:root {
  --ink: #15171c;
  --muted: #6d727d;
  --line: #dedfe3;
  --panel: #f6f5f2;
  --card: #fff;
  --yellow: #e7b94e;
  --shadow: 0 24px 60px rgba(15, 18, 27, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #ececeb; font-family: "DM Sans", sans-serif; }
body.modal-open { overflow: hidden; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

.page-shell { min-height: 100vh; }
.topbar { position: sticky; top: 0; z-index: 50; height: 74px; padding: 0 24px; display: flex; align-items: center; gap: 24px; color: #f6f2e8; background: rgba(18, 20, 25, .96); border-bottom: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 210px; }
.brand-logo { width: 38px; height: 38px; border-radius: 11px; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.brand-text { display: grid; line-height: 1.05; }
.brand-text strong { font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.3px; }
.brand-text small { margin-top: 4px; color: #9ea2ab; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.topbar-copy { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: #8e939d; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; }
.live-dot { display: inline-block; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #55d987; box-shadow: 0 0 0 4px rgba(85,217,135,.11), 0 0 10px rgba(85,217,135,.5); }
.topbar-actions { display: flex; gap: 8px; }
.ghost-btn, .primary-btn, .icon-btn, .apply-palette-btn { border: 0; cursor: pointer; transition: transform .2s ease, border-color .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease; }
.ghost-btn { min-height: 38px; padding: 0 16px; color: inherit; background: transparent; border: 1px solid rgba(255,255,255,.17); border-radius: 8px; font-size: 12px; font-weight: 700; }
.ghost-btn:hover { border-color: rgba(255,255,255,.45); transform: translateY(-1px); }
.pricing-trigger { color:#f3cb69; border-color:rgba(231,185,78,.48); background:rgba(231,185,78,.08); }
.pricing-trigger:hover { color:#fff0bd; border-color:#e7b94e; background:rgba(231,185,78,.15); }
.primary-btn { min-height: 46px; padding: 0 22px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; color: #151515; background: var(--yellow); border-radius: 9px; box-shadow: 0 8px 24px rgba(231,185,78,.2); font-size: 13px; font-weight: 800; }
.primary-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(231,185,78,.3); }
.primary-btn.compact { min-height: 38px; padding: 0 17px; }

.builder-layout { min-height: calc(100vh - 74px); display: grid; grid-template-columns: minmax(520px, 46%) minmax(0, 54%); }
.controls-panel { min-width: 0; padding: 42px clamp(24px, 3vw, 54px) 120px; background: var(--panel); border-right: 1px solid #d6d7da; }
.panel-intro { max-width: 610px; padding-bottom: 38px; }
.eyebrow { margin: 0 0 10px; color: #8a6d23; font-size: 10px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.panel-intro h1 { max-width: 550px; margin: 0; font-family: "Space Grotesk", sans-serif; font-size: clamp(34px, 4vw, 62px); line-height: .98; letter-spacing: -3px; }
.panel-intro > p:not(.eyebrow) { max-width: 550px; margin: 18px 0 0; color: #6b6e75; font-size: 14px; line-height: 1.7; }
.possibility-pill { width: fit-content; margin-top: 20px; padding: 8px 12px; display: flex; align-items: center; gap: 7px; color: #555962; background: #fff; border: 1px solid #dddde0; border-radius: 999px; font-size: 10px; letter-spacing: .5px; }
.possibility-pill span { color: #c18c15; }

.control-group { padding: 30px 0 34px; border-top: 1px solid #d7d7da; }
.group-heading { margin-bottom: 17px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.group-heading > div { display: flex; align-items: center; gap: 11px; }
.group-heading h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-size: 17px; letter-spacing: -.4px; }
.step-number { width: 27px; height: 27px; display: grid; place-items: center; color: #866414; background: #f1e5c7; border-radius: 50%; font-size: 9px; font-weight: 800; }
.selection-status { padding: 5px 9px; color: #666b73; background: #fff; border: 1px solid #dedfe1; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.option-grid { display: grid; gap: 10px; }
.option-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.option-card { position: relative; min-width: 0; padding: 8px; overflow: hidden; text-align: left; background: #fff; border: 1px solid #d9dadd; border-radius: 11px; cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.option-card:hover { transform: translateY(-2px); border-color: #b8b9bd; box-shadow: 0 9px 20px rgba(19,22,29,.08); }
.option-card.active { border-color: #202227; box-shadow: inset 0 0 0 1px #202227, 0 8px 22px rgba(19,22,29,.1); }
.option-card-preview { height: 67px; overflow: hidden; background: #eeeeec; border-radius: 7px; }
.option-card > div:nth-child(2) { min-width: 0; padding: 9px 2px 2px; display: grid; }
.option-card strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.option-card small { margin-top: 3px; overflow: hidden; color: #8b8e94; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.option-check { position: absolute; top: 13px; right: 13px; width: 17px; height: 17px; display: grid; place-items: center; color: #151515; background: #e8bb50; border-radius: 50%; opacity: 0; transform: scale(.65); font-size: 9px; font-weight: 900; transition: .2s ease; }
.option-sequence { top:10px; right:10px; width:23px; height:23px; border:2px solid rgba(255,255,255,.78); box-shadow:0 4px 10px rgba(20,22,27,.18); font-size:9px; font-variant-numeric:tabular-nums; }
.option-card.active .option-check { opacity: 1; transform: scale(1); }
.mini-layout { position: relative; width: 100%; height: 100%; overflow: hidden; background: #e4e3df; }
.mini-layout::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, transparent, rgba(0,0,0,.04)); }
.mini-layout b, .mini-layout em, .mini-layout .mini-block, .mini-nav { position: absolute; display: block; background: #37383b; border-radius: 1px; }
.mini-nav { top: 8px; left: 8px; width: 52%; height: 3px; opacity: .42; }
.mini-hero b { top: 22px; left: 9px; width: 50%; height: 9px; }
.mini-hero em { top: 36px; left: 9px; width: 35%; height: 3px; opacity: .35; }
.mini-block { background: #bbb9b2 !important; }
.mini-hero .m1 { right: 7px; bottom: 7px; width: 35%; height: 42%; background: #b39655 !important; }
.mini-hero.mini-2 .m1 { top: 0; right: 0; bottom: 0; width: 42%; height: 100%; }
.mini-hero.mini-3 .m1 { inset: 0; width: 100%; height: 100%; background: #6c706c !important; }
.mini-hero.mini-3 b, .mini-hero.mini-3 em, .mini-hero.mini-3 .mini-nav { z-index: 2; background: #fff; }
.mini-hero.mini-4 .m1 { right: 8px; top: 14px; width: 34%; height: 45%; border-radius: 4px; }
.mini-hero.mini-5 .m1 { right: 7px; top: 13px; width: 27%; height: 21%; }.mini-hero.mini-5 .m2 { right: 7px; bottom: 7px; width: 27%; height: 36%; }.mini-hero.mini-5 .m3 { right: 37%; bottom: 7px; width: 18%; height: 28%; }
.mini-hero.mini-6 b { width: 74%; height: 19px; }.mini-hero.mini-6 em { width: 54%; top: 45px; }
.mini-hero.mini-7 .m1 { right:7px; top:13px; width:38%; height:46px; background:#23252a !important; border-radius:1px 10px 1px 1px; }.mini-hero.mini-7 .m2,.mini-hero.mini-7 .m3 { right:10px; top:30px; width:8%; height:11px; background:#d2b04e !important; }.mini-hero.mini-7 .m3 { right:22px; }
.mini-hero.mini-8 b { width:63%; }.mini-hero.mini-8 .m1 { left:7px; right:auto; bottom:6px; width:31%; height:30px; }.mini-hero.mini-8 .m2 { left:40%; bottom:11px; width:23%; height:34px; }.mini-hero.mini-8 .m3 { right:7px; bottom:6px; width:29%; height:38px; }
.mini-hero.mini-9 .m1 { left:6px; top:0; bottom:0; width:38%; height:100%; }.mini-hero.mini-9 b { left:47%; width:45%; }.mini-hero.mini-9 em { left:47%; width:35%; }
.mini-body .mini-block { position: absolute; }
.mini-body.mini-1 .m1 { inset: 8px auto 8px 8px; width: 39%; }.mini-body.mini-1 .m2 { top: 10px; right: 8px; width: 45%; height: 12px; }.mini-body.mini-1 .m3 { right: 8px; bottom: 10px; width: 45%; height: 26px; }
.mini-body.mini-2 { display: grid; grid-template-columns: 1.2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; padding: 7px; }.mini-body.mini-2 .mini-block { position: static; }.mini-body.mini-2 .m1 { grid-row: span 2; }
.mini-body.mini-3 .mini-block { left: 8px; right: 8px; height: 5px; }.mini-body.mini-3 .m1 { top: 12px; }.mini-body.mini-3 .m2 { top: 25px; }.mini-body.mini-3 .m3 { top: 38px; }.mini-body.mini-3 .m4 { top: 51px; }
.mini-body.mini-4 { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px; padding: 9px; }.mini-body.mini-4 .mini-block { position: static; }
.mini-body.mini-5 { display: flex; gap: 4px; padding: 9px; }.mini-body.mini-5 .mini-block { position: static; flex: 1; border-radius: 2px; }
.mini-body.mini-6 .m1 { left: 8px; top: 9px; width: 40%; height: 47px; }.mini-body.mini-6 .m2 { right: 8px; top: 9px; width: 42%; height: 18px; }.mini-body.mini-6 .m3 { right: 8px; bottom: 9px; width: 42%; height: 24px; }
.mini-body.mini-7 .m1 { left: 10px; top: 10px; width: 75%; height: 11px; }.mini-body.mini-7 .m2 { left: 10px; top: 28px; width: 60%; height: 11px; }.mini-body.mini-7 .m3 { left: 10px; top: 46px; width: 42%; height: 6px; }
.mini-body.mini-8 .m1 { left: 7px; top: 7px; width: 49%; height: 53px; }.mini-body.mini-8 .m2 { right: 7px; top: 7px; width: 36%; height: 24px; }.mini-body.mini-8 .m3 { right: 7px; bottom: 7px; width: 36%; height: 23px; }
.mini-body.mini-9 .mini-block { left: 8px; right: 8px; height: 7px; }.mini-body.mini-9 .m1 { top: 9px; }.mini-body.mini-9 .m2 { top: 23px; }.mini-body.mini-9 .m3 { top: 37px; }.mini-body.mini-9 .m4 { top: 51px; }
.mini-footer b { left: 8px; top: 12px; width: 48%; height: 10px; }.mini-footer .m1 { left: 8px; right: 8px; bottom: 8px; height: 3px; }.mini-footer.mini-2 .m2,.mini-footer.mini-4 .m2 { right: 8px; top: 12px; width: 22%; height: 28px; }.mini-footer.mini-3 b,.mini-footer.mini-6 b { width: 78%; height: 19px; }.mini-footer.mini-5 .m1 { left: auto; right: 8px; top: 8px; width: 38%; height: 48px; }

.split-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.compact-heading { margin-bottom: 14px; }
.field-block > h3 { margin:0 0 14px; color:#555a63; font-family:"Space Grotesk",sans-serif; font-size:11px; letter-spacing:.2px; text-transform:uppercase; }
.field-block > label { display: block; margin-bottom: 7px; color: #666a72; font-size: 9px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.field-block select { width: 100%; height: 43px; padding: 0 13px; background: #fff; border: 1px solid #d6d7da; border-radius: 8px; outline: none; font-size: 12px; font-weight: 700; }
.field-block select:focus { border-color: #8c6e25; box-shadow: 0 0 0 3px rgba(231,185,78,.15); }
.font-sample { margin-top: 10px; min-height: 78px; padding: 14px; display: grid; align-content: center; background: #ececea; border-radius: 8px; }
.font-sample strong { font-size: 14px; }.font-sample span { margin-top: 4px; color: #777b82; font-size: 9px; }
.field-helper { margin: -7px 0 15px; color: #797d84; font-size: 11px; line-height: 1.5; }
.motion-options { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.motion-options button { min-height: 78px; padding: 10px 7px; display: grid; justify-items: center; align-content: center; gap: 3px; background: #fff; border: 1px solid #d7d8db; border-radius: 8px; cursor: pointer; }
.motion-options button i { width: 22px; height: 2px; margin-bottom: 4px; display: block; background: #a1a4aa; box-shadow: 0 -5px 0 #c2c4c8, 0 5px 0 #c2c4c8; }
.motion-options button strong { font-size: 10px; }.motion-options button small { color: #8a8e95; font-size: 7px; }
.motion-options button.active { color: #fff; background: #1d1f24; border-color: #1d1f24; box-shadow: 0 7px 18px rgba(16,18,23,.14); }
.motion-options button.active i { background: var(--yellow); box-shadow: 0 -5px 0 rgba(231,185,78,.55), 0 5px 0 rgba(231,185,78,.55); }

.assistant-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.assistant-options button { min-height:104px; padding:14px 10px; display:grid; justify-items:start; align-content:center; gap:3px; text-align:left; background:#fff; border:1px solid #d7d8db; border-radius:10px; cursor:pointer; transition:.2s ease; }
.assistant-options button:hover { border-color:#aaaeb5; transform:translateY(-2px); }.assistant-options button.active { color:#fff; background:#1d1f24; border-color:#1d1f24; box-shadow:0 10px 24px rgba(16,18,23,.14); }
.assistant-options button > span { width:28px; height:28px; margin-bottom:7px; display:grid; place-items:center; color:#8a6d23; background:#f1e5c7; border-radius:9px; font-size:14px; font-weight:900; }.assistant-options button.active > span { color:#17191d; background:var(--yellow); }
.assistant-options strong { font-size:10px; }.assistant-options small { color:#858991; font-size:7px; }.assistant-options button.active small { color:#aeb2ba; }
.feature-builder { margin-top:14px; padding:16px; background:#eae9e6; border:1px solid #d8d7d4; border-radius:12px; }
.feature-builder.standalone { margin-top:0; }
.feature-builder-heading { margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; }.feature-builder-heading > div { display:grid; }.feature-builder-heading strong { font-size:11px; }.feature-builder-heading span { margin-top:3px; color:#797d84; font-size:8px; }.feature-builder-heading > span { margin:0; padding:5px 8px; background:#fff; border:1px solid #d5d6d8; border-radius:999px; font-size:7px; font-weight:800; text-transform:uppercase; }
.feature-toggle-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }.feature-toggle-grid button { position:relative; min-height:66px; padding:10px 38px 10px 40px; display:grid; align-content:center; text-align:left; background:rgba(255,255,255,.62); border:1px solid #d4d4d2; border-radius:8px; cursor:pointer; transition:.2s ease; }.feature-toggle-grid button:hover { background:#fff; border-color:#b7b8bb; }.feature-toggle-grid button > span { position:absolute; left:10px; top:50%; width:22px; height:22px; display:grid; place-items:center; background:#dddcd8; border-radius:6px; transform:translateY(-50%); font-size:10px; font-style:normal; }.feature-toggle-grid button strong { font-size:9px; }.feature-toggle-grid button small { margin-top:2px; color:#858990; font-size:7px; }.feature-toggle-grid button i { position:absolute; right:10px; top:50%; width:22px; height:12px; background:#c7c7c5; border-radius:999px; transform:translateY(-50%); }.feature-toggle-grid button i::after { content:""; position:absolute; top:2px; left:2px; width:8px; height:8px; background:#fff; border-radius:50%; transition:.2s ease; }.feature-toggle-grid button.active { background:#fff; border-color:#2b2e34; }.feature-toggle-grid button.active > span { color:#181a1e; background:var(--yellow); }.feature-toggle-grid button.active i { background:#25272d; }.feature-toggle-grid button.active i::after { transform:translateX(10px); }
.included-standards { margin-top:12px; padding-top:11px; display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid #d2d1ce; }.included-standards span { width:100%; color:#777b82; font-size:7px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }.included-standards b { padding:5px 7px; color:#686c73; background:rgba(255,255,255,.68); border-radius:5px; font-size:7px; }

.palette-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; }
.palette-option { min-width: 0; padding: 7px; background: #fff; border: 1px solid #d8d9dc; border-radius: 8px; cursor: pointer; transition: .2s ease; }
.palette-option:hover { transform: translateY(-2px); }.palette-option.active { border-color: #202227; box-shadow: inset 0 0 0 1px #202227; }
.palette-swatch { height: 24px; display: flex; overflow: hidden; border: 1px solid rgba(0,0,0,.08); border-radius: 5px; }.palette-swatch i { flex: 1; }
.palette-option small { display: block; margin-top: 6px; overflow: hidden; color: #696d74; font-size: 8px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.custom-palette { margin-top: 14px; padding: 15px; display: grid; grid-template-columns: minmax(120px,.7fr) 1.7fr auto; align-items: end; gap: 16px; background: #eae9e6; border: 1px solid #dad9d6; border-radius: 11px; }
.custom-palette > div:first-child { align-self: center; display: grid; }.custom-palette > div:first-child strong { font-size: 11px; }.custom-palette > div:first-child span { margin-top: 4px; color: #7a7d83; font-size: 8px; }
.custom-color-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.custom-color-grid label { min-width: 0; display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 5px; }
.custom-color-grid label > span { grid-column: 1/-1; color: #74777e; font-size: 7px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.custom-color-grid input[type="color"] { width: 31px; height: 31px; padding: 2px; border: 1px solid #c8c9cc; border-radius: 6px; cursor: pointer; }
.custom-color-grid input[type="text"] { min-width: 0; width: 100%; height: 31px; padding: 0 7px; background: #fff; border: 1px solid #cdced1; border-radius: 6px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.custom-color-grid input.invalid { border-color: #c43b3b; box-shadow: 0 0 0 2px rgba(196,59,59,.12); }
.color-trigger { width: 31px; height: 31px; padding: 3px; display: grid; place-items: center; overflow: hidden; background: #fff; border: 1px solid #c8c9cc; border-radius: 7px; cursor: pointer; }
.color-trigger:hover { border-color: #202227; transform: translateY(-1px); }.color-trigger i { width: 100%; height: 100%; display: block; border: 1px solid rgba(0,0,0,.09); border-radius: 4px; }.color-trigger b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.apply-palette-btn { min-height: 34px; padding: 0 12px; color: #fff; background: #202227; border-radius: 7px; font-size: 9px; font-weight: 800; white-space: nowrap; }
.apply-palette-btn:hover { background: #000; transform: translateY(-1px); }
.image-upload-zone { padding: 12px; background: #ebeae7; border: 1px solid #d9d8d5; border-radius: 12px; }
.image-upload-button { width: 100%; min-height: 88px; padding: 14px; display: grid; grid-template-columns: 42px 1fr; grid-template-rows: auto auto; align-items: center; text-align: left; background: rgba(255,255,255,.68); border: 1px dashed #b8b8b7; border-radius: 9px; cursor: pointer; transition: .2s ease; }.image-upload-button:hover { background: #fff; border-color: #202227; }.image-upload-button > span { grid-row: 1/3; width: 34px; height: 34px; display: grid; place-items: center; color: #fff; background: #202227; border-radius: 50%; font-size: 20px; }.image-upload-button strong { align-self: end; font-size: 11px; }.image-upload-button small { align-self: start; margin-top: 3px; color: #83868c; font-size: 8px; }
.uploaded-images > p { margin: 10px 2px 0; color: #777b82; font-size: 8px; line-height: 1.5; }.uploaded-image-grid { margin-top: 10px; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }.uploaded-image-grid figure { position: relative; aspect-ratio: 1; margin: 0; overflow: hidden; border-radius: 7px; }.uploaded-image-grid img { width: 100%; height: 100%; object-fit: cover; }.uploaded-image-grid button { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; color: #fff; background: rgba(15,17,21,.78); border: 0; border-radius: 50%; cursor: pointer; font-size: 13px; }.clear-images { margin-top: 9px; padding: 0; color: #575b63; background: none; border: 0; cursor: pointer; font-size: 8px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.sticky-build { position: sticky; bottom: 16px; z-index: 15; margin-top: 26px; padding: 12px 12px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; color: #fff; background: rgba(25,27,32,.96); border: 1px solid rgba(255,255,255,.11); border-radius: 12px; box-shadow: 0 18px 45px rgba(15,16,20,.28); backdrop-filter: blur(18px); }
.sticky-build > div { min-width: 0; display: grid; }.sticky-build > div span { color: #91959f; font-size: 8px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }.sticky-build > div strong { margin-top: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.preview-panel { position: sticky; top: 74px; height: calc(100vh - 74px); min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: #dfe0e1; }
.preview-toolbar { min-height: 62px; padding: 10px 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f6f6f5; border-bottom: 1px solid #d2d3d5; }
.preview-toolbar > div:first-child { min-width: 0; display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 0 8px; }.preview-toolbar strong { font-size: 11px; }.preview-toolbar small { grid-column: 2; overflow: hidden; color: #858990; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.device-switcher { padding: 3px; display: flex; gap: 2px; background: #e7e7e6; border-radius: 8px; }
.device-btn { min-height: 31px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; color: #747880; background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 8px; font-weight: 800; }.device-btn small { grid-column:auto; padding:2px 4px; color:#92969d; background:rgba(0,0,0,.05); border-radius:4px; font-size:6px; line-height:1; }.device-btn.active { color: #22242a; background: #fff; box-shadow: 0 3px 8px rgba(24,26,31,.1); }
.preview-stage { min-height: 0; flex: 1; padding: clamp(12px, 2.2vw, 28px); display: flex; align-items: flex-start; justify-content: center; overflow: auto; background: radial-gradient(circle at 50% 20%, #f1f1f0, #d7d8da 70%); }
.preview-frame-shell { position:relative; width:100%; flex:0 0 auto; transition:width .35s cubic-bezier(.2,.8,.2,1),height .35s cubic-bezier(.2,.8,.2,1); }
.browser-frame { --device-width:1200px; --preview-scale:1; width:var(--device-width); max-width:none; min-width:var(--device-width); overflow:hidden; background:#fff; border:1px solid #c8c9cc; border-radius:11px; box-shadow:var(--shadow); transform:scale(var(--preview-scale)); transform-origin:top left; transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.browser-frame.device-tablet { --device-width:768px; }.browser-frame.device-mobile { --device-width:390px; }
.browser-bar { height: 32px; padding: 0 10px; display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; color: #7a7e86; background: #f2f2f1; border-bottom: 1px solid #dddde0; font-size: 7px; }
.browser-dots { display: flex; gap: 4px; }.browser-dots i { width: 6px; height: 6px; border-radius: 50%; background: #c2c3c6; }.browser-dots i:first-child { background: #e78f84; }.browser-dots i:nth-child(2) { background: #e4bd65; }.browser-dots i:nth-child(3) { background: #75be8b; }
.browser-address { justify-self: center; width: min(260px,90%); padding: 4px 10px; overflow: hidden; text-align: center; text-overflow: ellipsis; white-space: nowrap; background: #fff; border-radius: 5px; }.browser-action { justify-self: end; letter-spacing: 1px; }

/* Simulated website */
.site-preview { --site-bg:#f5f5f0; --site-text:#111; --site-accent:#dfff00; --site-font:"Poppins",sans-serif; position: relative; min-height: 900px; overflow: hidden; color: var(--site-text); background: var(--site-bg); font-family: var(--site-font); container-type: inline-size; }
.site-preview button, .site-preview input, .site-preview select, .site-preview textarea { font-family: inherit; }
.site-preview button:focus-visible,.site-preview a:focus-visible,.site-preview input:focus-visible,.site-preview select:focus-visible,.site-preview textarea:focus-visible { outline:2px solid var(--site-accent); outline-offset:2px; }
.site-scroll-progress { position:absolute; z-index:48; top:0; right:0; left:0; height:3px; overflow:hidden; pointer-events:none; }.site-scroll-progress span { width:100%; height:100%; display:block; background:var(--site-accent); transform:scaleX(var(--site-scroll-progress,0)); transform-origin:left center; transition:transform .12s linear; }
.site-nav { position:relative; z-index:25; min-height: 64px; padding: 0 clamp(18px,4cqw,50px); display: flex; align-items: center; gap: 28px; border-bottom: 1px solid color-mix(in srgb,var(--site-text) 13%,transparent); }
.site-logo { margin-right: auto; font-size: 13px; font-weight: 900; letter-spacing: -1px; }.site-logo span { color: var(--site-accent); }.site-nav ul { margin: 0; padding: 0; display: flex; gap: 24px; list-style: none; font-size: 8px; font-weight: 700; }.site-menu { display: none; padding: 0; background: none; border: 0; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.site-logo,.site-nav ul button { padding: 0; color: inherit; background: none; border: 0; cursor: pointer; font: inherit; }.site-nav ul button { position: relative; font-size: 8px; font-weight: 700; }.site-nav ul button::after { content:""; position:absolute; right:0; bottom:-7px; left:0; height:1px; background:var(--site-accent); opacity:0; transform:scaleX(.3); transition:.2s ease; }.site-nav ul button:hover::after,.site-nav ul button.active::after { opacity:1; transform:scaleX(1); }.site-nav a.site-btn { display:inline-flex; align-items:center; text-decoration:none; }
.site-menu-drawer { position:absolute; top:calc(100% + 1px); right:12px; width:180px; padding:8px; display:grid; gap:4px; color:var(--site-bg); background:var(--site-text); border:1px solid color-mix(in srgb,var(--site-accent) 28%,transparent); border-radius:0 0 10px 10px; box-shadow:0 18px 36px color-mix(in srgb,var(--site-text) 25%,transparent); }.site-menu-drawer button { padding:10px 11px; color:inherit; text-align:left; background:transparent; border:0; border-radius:6px; cursor:pointer; font-size:9px; font-weight:800; }.site-menu-drawer button:hover,.site-menu-drawer button.active { color:color-mix(in srgb,var(--site-text) 92%,#000); background:var(--site-accent); }
.site-btn { min-height: 34px; padding: 0 14px; color: var(--site-text); background: transparent; border: 1px solid currentColor; border-radius: 999px; font-size: 8px; font-weight: 800; cursor: pointer; }.site-btn.accent { color: color-mix(in srgb,var(--site-text) 88%,#000); background: var(--site-accent); border-color: var(--site-accent); }.site-btn.light { color: #fff; border-color: rgba(255,255,255,.5); }
.site-hero, .content-section { position: relative; padding: clamp(48px,8cqw,104px) clamp(22px,6cqw,72px); }
.hero-kicker, .section-label { display: block; font-size: clamp(7px,1.1cqw,10px); font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.section-label { margin-bottom: 18px; color: color-mix(in srgb,var(--site-text) 65%,transparent); }
.section-title { max-width: 760px; margin: 0; font-size: clamp(25px,4.6cqw,52px); line-height: 1.04; letter-spacing: -.045em; }
.section-copy { max-width: 600px; color: color-mix(in srgb,var(--site-text) 72%,transparent); font-size: clamp(10px,1.5cqw,14px); line-height: 1.7; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.hero-editorial { min-height: 620px; padding-bottom: 34px; text-align: center; }.hero-editorial h2 { max-width: 780px; margin: 20px auto 15px; font-size: clamp(45px,8.6cqw,92px); line-height: .9; letter-spacing: -.065em; }.hero-editorial h2 em { font-weight: 400; }.hero-editorial > p { max-width: 580px; margin: 0 auto; color: color-mix(in srgb,var(--site-text) 72%,transparent); font-size: clamp(10px,1.5cqw,14px); line-height: 1.7; }.hero-editorial .hero-actions { justify-content: center; margin: 25px 0 44px; }
.editorial-collage { position: relative; height: clamp(230px,42cqw,390px); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr; gap: 12px; }.editorial-collage img { width: 100%; height: 100%; object-fit: cover; }.editorial-collage span { position: absolute; left: 50%; top: 50%; padding: 9px 14px; color: var(--site-bg); background: var(--site-text); transform: translate(-50%,-50%) rotate(-3deg); font-size: 8px; font-weight: 800; text-transform: uppercase; }
.hero-split { min-height: 600px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }.hero-copy { padding: clamp(45px,7cqw,80px) clamp(24px,6cqw,70px); display: flex; flex-direction: column; justify-content: center; }.hero-copy h2 { margin: 18px 0; font-size: clamp(38px,6.6cqw,73px); line-height: .94; letter-spacing: -.06em; }.hero-copy > p { max-width: 500px; color: color-mix(in srgb,var(--site-text) 70%,transparent); font-size: clamp(10px,1.4cqw,14px); line-height: 1.75; }.hero-proof { margin-top: 46px; display: flex; align-items: center; gap: 12px; }.hero-proof strong { font-size: 34px; }.hero-proof span { padding-left: 12px; border-left: 1px solid color-mix(in srgb,var(--site-text) 20%,transparent); font-size: 8px; line-height: 1.5; text-transform: uppercase; }.hero-photo { position: relative; min-height: 520px; overflow: hidden; }.hero-photo img { width: 100%; height: 100%; object-fit: cover; }.photo-note { position: absolute; right: 18px; bottom: 18px; padding: 11px; color: #111; background: var(--site-accent); font-size: 8px; font-weight: 800; line-height: 1.4; text-transform: uppercase; }
.hero-canvas { min-height: 620px; padding: 0; color: #fff; overflow: hidden; }.canvas-image,.canvas-shade { position: absolute; inset: 0; width: 100%; height: 100%; }.canvas-image { object-fit: cover; }.canvas-shade { background: linear-gradient(90deg,rgba(6,8,10,.84),rgba(6,8,10,.16)),linear-gradient(0deg,rgba(6,8,10,.58),transparent 50%); }.canvas-copy { position: relative; z-index: 2; min-height: 620px; padding: clamp(52px,8cqw,90px) clamp(26px,6cqw,74px); display: flex; flex-direction: column; justify-content: flex-end; }.canvas-copy h2 { max-width: 760px; margin: 16px 0 70px; font-size: clamp(44px,8.3cqw,92px); line-height: .9; letter-spacing: -.065em; }.canvas-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }.canvas-bottom p { max-width: 460px; margin: 0; color: rgba(255,255,255,.78); font-size: 11px; line-height: 1.7; }
.hero-product { min-height: 590px; display: grid; grid-template-columns: 1fr .9fr; gap: clamp(28px,5cqw,60px); align-items: center; background: radial-gradient(circle at 78% 44%,color-mix(in srgb,var(--site-accent) 36%,transparent),transparent 30%); }.product-copy h2 { margin: 18px 0; font-size: clamp(39px,7cqw,76px); line-height: .93; letter-spacing: -.065em; }.product-copy > p { color: color-mix(in srgb,var(--site-text) 72%,transparent); font-size: 12px; line-height: 1.7; }.product-copy .hero-actions { margin-top: 24px; }.product-badges { margin-top: 30px; display: flex; gap: 6px; }.product-badges span { padding: 6px 9px; border: 1px solid color-mix(in srgb,var(--site-text) 17%,transparent); border-radius: 999px; font-size: 7px; font-weight: 800; text-transform: uppercase; }.product-window { padding: 7px; background: color-mix(in srgb,var(--site-text) 94%,#222); border-radius: 16px; box-shadow: 0 30px 60px color-mix(in srgb,var(--site-text) 22%,transparent); transform: rotate(2deg); }.product-window-bar { height: 28px; padding: 0 8px; display: flex; align-items: center; gap: 4px; }.product-window-bar i { width: 5px; height: 5px; border-radius: 50%; background: #777; }.product-ui { min-height: 330px; padding: 38px 25px; color: var(--site-text); background: var(--site-bg); border-radius: 10px; }.product-pill { display: inline-block; padding: 5px 8px; background: var(--site-accent); border-radius: 999px; font-size: 6px; font-weight: 900; }.product-ui > strong { display: block; margin-top: 40px; font-size: 32px; line-height: .95; }.product-ui-grid { margin-top: 50px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 5px; }.product-ui-grid i { height: 50px; background: color-mix(in srgb,var(--site-text) 11%,transparent); border-radius: 5px; }.product-ui-grid i:first-child { background: var(--site-accent); }
.hero-showcase { min-height: 600px; display: grid; grid-template-columns: .65fr 1.35fr; gap: 28px; align-items: center; }.showcase-copy h2 { margin: 16px 0 25px; font-size: clamp(40px,6.7cqw,75px); line-height: .92; letter-spacing: -.06em; }.showcase-grid { height: 470px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.15fr .85fr; gap: 8px; }.showcase-grid figure { position: relative; margin: 0; overflow: hidden; }.showcase-grid figure:first-child { grid-row: span 2; }.showcase-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }.showcase-grid figure:hover img { transform: scale(1.04); }.showcase-grid figcaption { position: absolute; left: 8px; bottom: 8px; padding: 5px 7px; color: #111; background: rgba(255,255,255,.88); font-size: 6px; font-weight: 800; text-transform: uppercase; }
.hero-statement { min-height: 620px; overflow: hidden; }.statement-number { position: absolute; top: 30px; right: 30px; font-size: 8px; font-weight: 800; }.hero-statement h2 { margin: 26px 0 35px; font-size: clamp(67px,13cqw,145px); line-height: .74; letter-spacing: -.07em; }.hero-statement h2 em { color: var(--site-accent); font-style: normal; }.statement-foot { display: flex; align-items: center; gap: 25px; }.statement-foot p { max-width: 420px; font-size: 11px; line-height: 1.6; }.circle-link { width: 54px; height: 54px; border: 1px solid var(--site-text); border-radius: 50%; background: none; font-size: 20px; }.statement-ticker { position: absolute; left: 0; right: 0; bottom: 0; padding: 9px 0; display: flex; overflow: hidden; color: var(--site-bg); background: var(--site-text); white-space: nowrap; }.statement-ticker span { min-width: max-content; font-size: 8px; font-weight: 900; letter-spacing: 1.4px; }
.hero-launch { min-height: 610px; display: grid; grid-template-columns: 1.1fr .9fr; align-items: stretch; gap: clamp(28px,6cqw,70px); background: linear-gradient(135deg,var(--site-bg),color-mix(in srgb,var(--site-accent) 20%,var(--site-bg))); }.launch-copy { display:flex; flex-direction:column; justify-content:center; }.launch-copy h2 { max-width:680px; margin:20px 0; font-size:clamp(46px,8.6cqw,94px); line-height:.88; letter-spacing:-.07em; }.launch-copy > p { max-width:520px; color:color-mix(in srgb,var(--site-text) 70%,transparent); font-size:11px; line-height:1.7; }.launch-form { max-width:480px; margin-top:28px; padding:5px; display:flex; gap:6px; background:color-mix(in srgb,var(--site-text) 7%,var(--site-bg)); border:1px solid color-mix(in srgb,var(--site-text) 15%,transparent); border-radius:999px; }.launch-form input { min-width:0; flex:1; padding:0 14px; color:var(--site-text); background:none; border:0; outline:0; font-size:9px; }.launch-countdown { padding:30px; display:grid; grid-template-columns:repeat(3,1fr); align-content:center; color:var(--site-bg); background:var(--site-text); border-radius:2px 90px 2px 2px; }.launch-countdown div { padding:20px 8px; text-align:center; border-right:1px solid color-mix(in srgb,var(--site-bg) 18%,transparent); }.launch-countdown div:nth-child(3) { border:0; }.launch-countdown strong { display:block; color:var(--site-accent); font-size:clamp(33px,5.5cqw,58px); line-height:1; }.launch-countdown span,.launch-countdown small { color:color-mix(in srgb,var(--site-bg) 58%,transparent); font-size:7px; text-transform:uppercase; }.launch-countdown small { grid-column:1/-1; margin-top:38px; text-align:center; letter-spacing:1.3px; }
.hero-reel { min-height:620px; padding-inline:0; overflow:hidden; }.reel-heading { padding:0 clamp(22px,6cqw,72px); display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; }.reel-heading .hero-kicker { grid-column:1/-1; }.reel-heading h2 { max-width:760px; margin:16px 0 34px; font-size:clamp(44px,7.5cqw,82px); line-height:.9; letter-spacing:-.065em; }.reel-heading .site-btn { margin-bottom:34px; }.reel-track { width:112%; margin-left:-6%; display:grid; grid-template-columns:1.1fr .8fr 1fr; gap:9px; transform:rotate(-2deg); }.reel-track figure { position:relative; height:clamp(260px,38cqw,410px); margin:0; overflow:hidden; }.reel-track figure:nth-child(2) { margin-top:35px; }.reel-track img { width:100%; height:100%; object-fit:cover; }.reel-track figcaption { position:absolute; left:10px; bottom:10px; padding:6px 8px; color:#111; background:var(--site-accent); font-size:7px; font-weight:900; }
.hero-signature { min-height:610px; padding:0; display:grid; grid-template-columns:.85fr 1.15fr; }.signature-portrait { position:relative; min-height:610px; overflow:hidden; }.signature-portrait img { width:100%; height:100%; object-fit:cover; filter:saturate(.8) contrast(1.03); }.signature-portrait span { position:absolute; right:14px; bottom:14px; padding:8px 10px; color:#111; background:var(--site-accent); font-size:7px; font-weight:900; text-transform:uppercase; }.signature-copy { position:relative; padding:clamp(48px,7cqw,82px); display:flex; flex-direction:column; justify-content:center; }.signature-copy h2 { max-width:740px; margin:18px 0; font-size:clamp(39px,6.7cqw,74px); line-height:.93; letter-spacing:-.06em; }.signature-copy h2 em { color:var(--site-accent); font-weight:inherit; }.signature-copy > p { max-width:540px; color:color-mix(in srgb,var(--site-text) 70%,transparent); font-size:11px; line-height:1.75; }.signature-copy .hero-actions { margin-top:25px; }.signature-mark { position:absolute; right:6%; bottom:2%; color:color-mix(in srgb,var(--site-accent) 55%,transparent); font-family:"DM Serif Display",serif; font-size:100px; font-style:italic; transform:rotate(-8deg); }

.content-section { border-top: 1px solid color-mix(in srgb,var(--site-text) 12%,transparent); }
.story-split { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(32px,7cqw,85px); align-items: center; }.story-photo { position: relative; height: clamp(310px,48cqw,520px); }.story-photo img { width: 100%; height: 100%; object-fit: cover; }.story-photo span { position: absolute; left: -13px; bottom: 20px; padding: 8px 10px; background: var(--site-accent); font-size: 7px; font-weight: 900; text-transform: uppercase; transform: rotate(-5deg); }.story-copy .section-copy { margin-top: 21px; }.stats-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.stat { padding-top: 12px; border-top: 1px solid color-mix(in srgb,var(--site-text) 20%,transparent); }.stat strong { display: block; font-size: clamp(21px,3.5cqw,37px); }.stat span { display: block; margin-top: 3px; color: color-mix(in srgb,var(--site-text) 65%,transparent); font-size: 7px; text-transform: uppercase; }
.bento-grid { margin-top: 36px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 8px; }.bento-card { min-height: 165px; padding: 20px; display: flex; flex-direction: column; background: color-mix(in srgb,var(--site-text) 5%,var(--site-bg)); border: 1px solid color-mix(in srgb,var(--site-text) 11%,transparent); }.bento-card.large { min-height: 338px; grid-row: span 2; }.bento-card span { margin-bottom: auto; font-size: 7px; }.bento-card strong { font-size: clamp(15px,2.4cqw,24px); line-height: 1.05; }.bento-card p { margin-bottom: 0; color: color-mix(in srgb,var(--site-text) 65%,transparent); font-size: 8px; line-height: 1.6; }.bento-card.accent-card { color: color-mix(in srgb,var(--site-text) 90%,#000); background: var(--site-accent); }.bento-browser { height: 70px; margin-top: 22px; padding: 10px; display: flex; gap: 6px; background: var(--site-text); }.bento-browser i { flex: 1; background: color-mix(in srgb,var(--site-bg) 16%,transparent); }.bento-browser i:first-child { flex: 1.7; background: var(--site-accent); }
.service-index .section-title { margin-bottom: 40px; }.services-list { border-top: 1px solid var(--site-text); }.service-row { min-height: 70px; display: grid; grid-template-columns: 35px 1fr 1fr 20px; align-items: center; gap: 10px; border-bottom: 1px solid color-mix(in srgb,var(--site-text) 22%,transparent); }.service-row span,.service-row small { color: color-mix(in srgb,var(--site-text) 55%,transparent); font-size: 7px; }.service-row strong { font-size: clamp(16px,2.7cqw,27px); }.service-row b { font-size: 15px; }
.proof-wall { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }.proof-metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.proof-metrics article { padding: 17px; background: var(--site-text); color: var(--site-bg); }.proof-metrics strong { display: block; font-size: clamp(24px,3.5cqw,40px); }.proof-metrics span { font-size: 7px; line-height: 1.4; text-transform: uppercase; }.client-cloud { grid-column: 1/-1; margin-top: 25px; padding-top: 25px; display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; border-top: 1px solid color-mix(in srgb,var(--site-text) 20%,transparent); }.client-cloud span { text-align: center; font-size: clamp(10px,1.8cqw,16px); font-weight: 900; opacity: .58; }
.team-section .section-title { max-width: 680px; }.team-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.team-grid article { min-width: 0; }.team-grid img { width: 100%; aspect-ratio: .86; object-fit: cover; filter: saturate(.82); }.team-grid article:nth-child(2) img { object-position: center; }.team-grid article:nth-child(3) img { object-position: center; }.team-grid article > div { padding: 9px 0; display: flex; justify-content: space-between; gap: 8px; }.team-grid strong { font-size: 10px; }.team-grid span { color: color-mix(in srgb,var(--site-text) 57%,transparent); font-size: 7px; }
.feature-focus { display: grid; grid-template-columns: 1.1fr .9fr; gap: 45px; }.feature-list { margin-top: 30px; }.feature-list article { padding: 15px 0; display: grid; grid-template-columns: 35px 1fr; border-top: 1px solid color-mix(in srgb,var(--site-text) 16%,transparent); }.feature-list article > span { font-size: 7px; }.feature-list strong { font-size: 14px; }.feature-list p { margin: 3px 0 0; color: color-mix(in srgb,var(--site-text) 62%,transparent); font-size: 8px; }.feature-visual { position: relative; min-height: 420px; display: grid; place-items: center; background: color-mix(in srgb,var(--site-accent) 75%,var(--site-bg)); }.feature-phone { width: 52%; min-height: 300px; padding: 30px 18px; color: var(--site-bg); background: var(--site-text); border: 5px solid color-mix(in srgb,var(--site-text) 80%,#555); border-radius: 24px; box-shadow: 0 28px 50px color-mix(in srgb,var(--site-text) 28%,transparent); }.feature-phone > span { display: block; width: 38%; height: 5px; margin: -20px auto 50px; background: #555; border-radius: 99px; }.feature-phone strong { font-size: 20px; line-height: .96; }.feature-phone i { display: block; height: 42px; margin-top: 12px; background: color-mix(in srgb,var(--site-bg) 12%,transparent); border-radius: 7px; }.feature-card { position: absolute; right: 7%; bottom: 9%; width: 45%; padding: 14px; color: var(--site-text); background: var(--site-bg); box-shadow: 0 15px 35px rgba(0,0,0,.2); }.feature-card span { font-size: 7px; }.feature-card strong { display: block; margin: 7px 0; font-size: 28px; }.feature-card i { display: block; height: 4px; background: linear-gradient(90deg,var(--site-accent) 94%,#ddd 94%); }
.manifesto { padding-block: clamp(80px,12cqw,150px); }.manifesto blockquote { max-width: 900px; margin: 0; font-size: clamp(36px,7.5cqw,82px); line-height: .96; letter-spacing: -.06em; }.manifesto blockquote em { color: color-mix(in srgb,var(--site-text) 46%,transparent); font-style: normal; }.manifesto-foot { max-width: 900px; margin-top: 45px; display: grid; grid-template-columns: 1fr 1.7fr; gap: 35px; }.manifesto-foot span { font-size: 7px; font-weight: 800; text-transform: uppercase; }.manifesto-foot p { margin: 0; color: color-mix(in srgb,var(--site-text) 67%,transparent); font-size: 9px; line-height: 1.65; }
.magazine-heading { display: grid; grid-template-columns: .55fr 1.45fr; gap: 30px; }.magazine-layout { margin-top: 40px; display: grid; grid-template-columns: 1.35fr .55fr .8fr; gap: 12px; align-items: end; }.magazine-layout figure { margin: 0; }.magazine-layout img { width: 100%; height: 100%; object-fit: cover; }.mag-main { height: 420px; }.mag-small { height: 270px; }.magazine-layout figcaption { margin-top: 7px; font-size: 7px; text-transform: uppercase; }.mag-copy { align-self: center; padding: 15px; }.mag-copy p { font-size: 10px; line-height: 1.7; }.mag-copy span { font-size: 8px; font-weight: 800; }
.faq-section { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; }.faq-list { border-top: 1px solid var(--site-text); }.faq-list details { border-bottom: 1px solid color-mix(in srgb,var(--site-text) 19%,transparent); }.faq-list summary { min-height: 59px; display: flex; align-items: center; justify-content: space-between; gap: 15px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 700; }.faq-list summary::-webkit-details-marker { display:none; }.faq-list summary span { font-size: 17px; }.faq-list details[open] summary span { transform: rotate(45deg); }.faq-list details p { margin: -4px 30px 17px 0; color: color-mix(in srgb,var(--site-text) 65%,transparent); font-size: 9px; line-height: 1.65; }

.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }.text-link { flex: 0 0 auto; padding: 0 0 4px; color: inherit; background: none; border: 0; border-bottom: 1px solid currentColor; font-size: 8px; font-weight: 800; }
.projects-grid { margin-top: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px 10px; }.projects-grid article { min-width: 0; }.projects-grid img { width: 100%; aspect-ratio: 1.45; object-fit: cover; transition: transform .7s ease, filter .7s ease; }.projects-grid article:hover img { transform: scale(.985); filter: saturate(1.15); }.project-meta { padding-top: 8px; display: flex; justify-content: space-between; gap: 10px; }.project-meta strong { font-size: 11px; }.project-meta small { color: color-mix(in srgb,var(--site-text) 55%,transparent); font-size: 7px; }
.testimonial-section { text-align: center; }.testimonial-wrap { position: relative; max-width: 820px; margin: 10px auto 0; padding: clamp(35px,6cqw,65px); background: var(--site-text); color: var(--site-bg); }.quote-mark { color: var(--site-accent); font-family: Georgia,serif; font-size: 80px; line-height: .5; }.testimonial-wrap blockquote { margin: 24px 0 34px; font-size: clamp(23px,4.2cqw,44px); line-height: 1.12; letter-spacing: -.04em; }.testimonial-person { display: inline-flex; align-items: center; gap: 10px; text-align: left; }.testimonial-avatar { width: 36px; height: 36px; object-fit: cover; border-radius: 50%; }.testimonial-person div { display: grid; }.testimonial-person strong { font-size: 9px; }.testimonial-person span { margin-top: 2px; color: color-mix(in srgb,var(--site-bg) 60%,transparent); font-size: 7px; }.testimonial-score { position: absolute; right: 18px; bottom: 18px; display: grid; text-align: right; }.testimonial-score strong { font-size: 14px; }.testimonial-score span { color: var(--site-accent); font-size: 7px; letter-spacing: 1px; }
.process-grid { margin-top: 38px; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--site-text); }.process-grid article { position: relative; min-height: 250px; padding: 20px 24px 30px 0; border-right: 1px solid color-mix(in srgb,var(--site-text) 17%,transparent); }.process-grid article:not(:first-child) { padding-left: 24px; }.process-grid article:last-child { border-right: 0; }.process-grid span { font-size: 7px; font-weight: 800; }.process-grid strong { display: block; margin-top: 65px; font-size: clamp(20px,3cqw,32px); }.process-grid p { color: color-mix(in srgb,var(--site-text) 65%,transparent); font-size: 8px; line-height: 1.6; }.process-grid i { position: absolute; left: 0; bottom: 0; width: 9px; height: 9px; background: var(--site-accent); border-radius: 50%; }
.pricing-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }.pricing-grid article { padding: clamp(18px,3cqw,30px); border: 1px solid color-mix(in srgb,var(--site-text) 16%,transparent); }.pricing-grid article.featured { color: var(--site-bg); background: var(--site-text); }.pricing-grid article > span { font-size: 6px; font-weight: 900; letter-spacing: 1px; }.pricing-grid h4 { margin: 27px 0 8px; font-size: clamp(20px,3cqw,30px); }.pricing-grid p { min-height: 42px; color: color-mix(in srgb,currentColor 65%,transparent); font-size: 8px; line-height: 1.6; }.pricing-grid article > strong { display: block; margin: 20px 0; font-size: 14px; }.pricing-grid ul { margin: 0 0 25px; padding: 0; list-style: none; }.pricing-grid li { padding: 6px 0; border-top: 1px solid color-mix(in srgb,currentColor 13%,transparent); font-size: 7px; }
.journal-grid { margin-top: 35px; display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }.journal-grid img { width: 100%; aspect-ratio: 1.15; object-fit: cover; }.journal-grid span { display: block; margin: 9px 0 6px; color: color-mix(in srgb,var(--site-text) 53%,transparent); font-size: 6px; font-weight: 800; text-transform: uppercase; }.journal-grid strong { display: block; font-size: clamp(12px,1.9cqw,18px); line-height: 1.25; }
.timeline { margin-top: 42px; display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--site-text); }.timeline article { position: relative; padding: 26px 22px 0 0; }.timeline article::before { content:""; position:absolute; top:-5px; left:0; width:9px; height:9px; background:var(--site-accent); border:1px solid var(--site-text); border-radius:50%; }.timeline span { font-size: 8px; font-weight: 900; }.timeline strong { display: block; margin: 45px 0 9px; font-size: 15px; }.timeline p { color: color-mix(in srgb,var(--site-text) 64%,transparent); font-size: 8px; line-height: 1.6; }
.dashboard-section { display: grid; grid-template-columns: .75fr 1.25fr; gap: 45px; }.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.dashboard-grid article { padding: 16px; background: color-mix(in srgb,var(--site-text) 5%,var(--site-bg)); border: 1px solid color-mix(in srgb,var(--site-text) 11%,transparent); }.metric-card { position: relative; }.metric-card span { font-size: 7px; }.metric-card strong { display: block; margin-top: 22px; font-size: 35px; }.metric-up { position: absolute; top: 15px; right: 15px; color: var(--site-text); font-style: normal; }.chart-card { grid-column: 1/-1; }.chart-card > div:first-child { display: flex; justify-content: space-between; font-size: 8px; }.bar-chart { height: 110px; margin-top: 20px; display: flex; align-items: end; gap: 5px; border-bottom: 1px solid color-mix(in srgb,var(--site-text) 18%,transparent); }.bar-chart i { flex: 1; background: color-mix(in srgb,var(--site-accent) 80%,var(--site-text)); }.donut-card { grid-column: 1/-1; display: flex; align-items: center; gap: 20px; }.donut { width: 72px; height: 72px; display: grid; place-items: center; background: conic-gradient(var(--site-accent) 82%,color-mix(in srgb,var(--site-text) 10%,transparent) 0); border-radius: 50%; }.donut::before { content:""; grid-area:1/1; width:52px; height:52px; background:var(--site-bg); border-radius:50%; }.donut span { z-index:1; grid-area:1/1; font-size:11px; font-weight:900; }.donut-card p { font-size: 8px; line-height: 1.5; }
.mosaic-section { display: grid; grid-template-columns: .6fr 1.4fr; gap: 40px; align-items: start; }.mosaic-copy { position: sticky; top: 25px; }.mosaic-copy p { color: color-mix(in srgb,var(--site-text) 66%,transparent); font-size: 9px; line-height: 1.65; }.photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.photo-mosaic figure { height: 230px; margin: 0; overflow: hidden; }.photo-mosaic figure.wide { grid-column: 1/-1; height: 300px; }.photo-mosaic img { width: 100%; height: 100%; object-fit: cover; }
.conversion-section { min-height: 560px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; text-align: center; }.conversion-section h3 { z-index:1; margin: 0; font-size: clamp(47px,9cqw,96px); line-height: .88; letter-spacing: -.07em; }.conversion-section h3 em { color: color-mix(in srgb,var(--site-text) 42%,transparent); font-style: normal; }.conversion-section > p { z-index:1; max-width:520px; color:color-mix(in srgb,var(--site-text) 68%,transparent); font-size:10px; line-height:1.65; }.conversion-section .hero-actions { z-index:1; margin-top:17px; }.conversion-orbit { position:absolute; width:430px; height:430px; border:1px solid color-mix(in srgb,var(--site-text) 12%,transparent); border-radius:50%; }.conversion-orbit span,.conversion-orbit i { position:absolute; inset:50%; width:300px; height:300px; border:1px solid color-mix(in srgb,var(--site-text) 10%,transparent); border-radius:50%; transform:translate(-50%,-50%); }.conversion-orbit i { width:170px; height:170px; }.conversion-orbit b { position:absolute; left:50%; top:-8px; width:18px; height:18px; display:grid; place-items:center; background:var(--site-accent); border-radius:50%; font-size:10px; }

.site-footer { padding: clamp(48px,7cqw,85px) clamp(22px,6cqw,72px) 24px; color: #f4f1e9; background: #121419; }.footer-top,.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; }.footer-top { font-size:8px; }.footer-big { margin: clamp(38px,7cqw,75px) 0; font-size: clamp(39px,8.3cqw,90px); line-height:.9; letter-spacing:-.065em; }.footer-bottom { padding-top:18px; border-top:1px solid rgba(255,255,255,.15); color:rgba(255,255,255,.58); font-size:7px; }.footer-multi .footer-columns { margin:55px 0; display:grid; grid-template-columns:2fr repeat(3,1fr); gap:35px; }.footer-columns h3 { margin:0; font-size:28px; line-height:1.05; }.footer-columns > div { display:flex; flex-direction:column; gap:7px; }.footer-columns strong { margin-bottom:8px; color:rgba(255,255,255,.5); font-size:7px; text-transform:uppercase; }.footer-columns a { font-size:8px; }.footer-cta { text-align:center; }.footer-cta .section-label { color:rgba(255,255,255,.52); }.footer-cta .footer-bottom { margin-top:65px; }.footer-newsletter { display:grid; grid-template-columns:1fr 1fr; gap:50px; }.footer-newsletter h3 { max-width:480px; margin:0; font-size:34px; line-height:1; }.footer-newsletter form label { display:block; margin-bottom:8px; font-size:7px; font-weight:800; text-transform:uppercase; }.footer-newsletter form > div { display:flex; border-bottom:1px solid rgba(255,255,255,.5); }.footer-newsletter input { min-width:0; flex:1; padding:12px 0; color:#fff; background:none; border:0; outline:0; font-size:11px; }.footer-newsletter form button { color:var(--site-accent); background:none; border:0; font-size:8px; font-weight:800; }.footer-newsletter form small { display:block; margin-top:8px; color:rgba(255,255,255,.42); font-size:6px; }.footer-newsletter .footer-bottom { grid-column:1/-1; margin-top:40px; }.footer-contact { display:grid; grid-template-columns:1.2fr .8fr; gap:60px; }.footer-contact h3 { max-width:600px; margin:0; font-size:clamp(37px,6cqw,65px); line-height:.95; }.footer-contact > div:first-child p { max-width:500px; color:rgba(255,255,255,.58); font-size:9px; line-height:1.65; }.contact-card { padding:22px; display:grid; color:var(--site-text); background:var(--site-accent); }.contact-card span { margin-top:10px; font-size:6px; font-weight:900; }.contact-card a { margin:5px 0 10px; font-size:12px; font-weight:800; }.contact-card p { margin:5px 0; font-size:8px; }.footer-contact .footer-bottom { grid-column:1/-1; }.footer-marquee { padding-inline:0; overflow:hidden; }.marquee-track { display:flex; width:max-content; color:#111; background:var(--site-accent); transform:rotate(-2deg) scale(1.03); }.marquee-track span { padding:13px 0; font-size:clamp(34px,7cqw,72px); font-weight:900; letter-spacing:-.05em; white-space:nowrap; }.marquee-bottom { padding:80px clamp(22px,6cqw,72px) 20px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:20px; align-items:end; }.marquee-bottom strong { font-size:16px; }.marquee-bottom a,.marquee-bottom span { color:rgba(255,255,255,.64); font-size:8px; }.marquee-bottom div { display:grid; gap:4px; }
.secondary-hero { min-height:420px; padding:clamp(65px,10cqw,120px) clamp(22px,6cqw,72px); display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(145deg,color-mix(in srgb,var(--site-accent) 20%,var(--site-bg)),var(--site-bg)); }.secondary-hero h2 { max-width:850px; margin:18px 0; font-size:clamp(49px,9cqw,98px); line-height:.87; letter-spacing:-.07em; }.secondary-hero p { max-width:620px; margin:0; color:color-mix(in srgb,var(--site-text) 67%,transparent); font-size:11px; line-height:1.7; }
.page-customize-notice { position:absolute; z-index:30; top:82px; right:18px; width:min(330px,calc(100% - 36px)); padding:18px; color:#f7f4ee; background:color-mix(in srgb,var(--site-text) 94%,#151820); border:1px solid color-mix(in srgb,var(--site-accent) 36%,transparent); border-radius:12px; box-shadow:0 22px 55px rgba(0,0,0,.28); animation:noticeIn .35s ease both; }.page-customize-notice > button { position:absolute; top:8px; right:9px; color:rgba(255,255,255,.55); background:none; border:0; cursor:pointer; font-size:16px; }.page-customize-notice > span { color:var(--site-accent); font-size:7px; font-weight:900; letter-spacing:1.1px; text-transform:uppercase; }.page-customize-notice strong { display:block; margin:6px 20px 6px 0; font-size:15px; }.page-customize-notice p { margin:0 0 12px; color:rgba(255,255,255,.65); font-size:8px; line-height:1.55; }.page-customize-notice a { display:inline-flex; padding:8px 11px; color:#15171b; background:var(--site-accent); border-radius:999px; font-size:8px; font-weight:900; text-decoration:none; } @keyframes noticeIn { from { opacity:0; transform:translateY(-8px) scale(.97); } }

.site-inquiry { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(32px,7cqw,86px); align-items:start; background:color-mix(in srgb,var(--site-accent) 11%,var(--site-bg)); }.site-inquiry-copy h3 { margin:0; font-size:clamp(32px,5.7cqw,62px); line-height:.96; letter-spacing:-.055em; }.site-inquiry-copy p { max-width:480px; margin:18px 0 0; color:color-mix(in srgb,var(--site-text) 68%,transparent); font-size:10px; line-height:1.7; }
.site-inquiry-form { padding:clamp(20px,4cqw,38px); display:grid; grid-template-columns:1fr 1fr; gap:13px; color:var(--site-bg); background:var(--site-text); box-shadow:0 24px 55px color-mix(in srgb,var(--site-text) 18%,transparent); }.site-inquiry-form label { min-width:0; display:grid; gap:6px; }.site-inquiry-form label:last-of-type { grid-column:1/-1; }.site-inquiry-form label > span { color:color-mix(in srgb,var(--site-bg) 62%,transparent); font-size:7px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; }.site-inquiry-form input,.site-inquiry-form select,.site-inquiry-form textarea { width:100%; min-width:0; padding:10px 0; color:var(--site-bg); background:transparent; border:0; border-bottom:1px solid color-mix(in srgb,var(--site-bg) 28%,transparent); border-radius:0; outline:0; font-size:9px; }.site-inquiry-form textarea { min-height:72px; resize:vertical; }.site-inquiry-form select { color-scheme:dark; }.site-inquiry-form .site-btn { grid-column:1/-1; width:fit-content; margin-top:5px; }.site-inquiry-form small { grid-column:1/-1; color:color-mix(in srgb,var(--site-bg) 47%,transparent); font-size:7px; line-height:1.5; }.inquiry-success { grid-column:1/-1; padding:20px; color:var(--site-text); background:var(--site-accent); }.inquiry-success strong { display:block; font-size:17px; }.inquiry-success p { margin:6px 0 0; font-size:8px; line-height:1.55; }

.site-assistant { position:absolute; z-index:46; top:0; right:clamp(10px,2.2cqw,22px); width:min(318px,calc(100% - 20px)); pointer-events:none; transform:translateY(var(--assistant-offset,520px)); transition:transform .18s ease; }.assistant-launcher { width:50px; height:50px; margin-left:auto; display:grid; place-items:center; color:color-mix(in srgb,var(--site-text) 92%,#000); background:var(--site-accent); border:1px solid color-mix(in srgb,var(--site-text) 16%,transparent); border-radius:16px 16px 4px 16px; box-shadow:0 14px 32px color-mix(in srgb,var(--site-text) 25%,transparent); cursor:pointer; pointer-events:auto; animation:assistantPulse 3.2s ease-in-out infinite; }.assistant-launcher span { font-size:18px; font-weight:900; }.assistant-launcher small { position:absolute; right:43px; width:max-content; padding:7px 9px; color:var(--site-bg); background:var(--site-text); border-radius:7px; opacity:0; transform:translateX(5px); font-size:7px; font-weight:800; transition:.2s ease; }.assistant-launcher:hover small,.assistant-launcher:focus-visible small { opacity:1; transform:none; }
.assistant-window { overflow:hidden; color:var(--site-text); background:var(--site-bg); border:1px solid color-mix(in srgb,var(--site-text) 16%,transparent); border-radius:16px; box-shadow:0 26px 65px color-mix(in srgb,var(--site-text) 30%,transparent); pointer-events:auto; animation:assistantIn .28s ease both; }.assistant-head { min-height:62px; padding:12px 12px 12px 14px; display:flex; align-items:center; gap:10px; color:var(--site-bg); background:var(--site-text); }.assistant-avatar { width:32px; height:32px; display:grid; place-items:center; color:color-mix(in srgb,var(--site-text) 92%,#000); background:var(--site-accent); border-radius:10px; font-size:13px; font-weight:900; }.assistant-title { min-width:0; margin-right:auto; display:grid; }.assistant-title strong { font-size:10px; }.assistant-title small { margin-top:2px; color:color-mix(in srgb,var(--site-bg) 56%,transparent); font-size:7px; }.assistant-head button { width:27px; height:27px; display:grid; place-items:center; color:var(--site-bg); background:color-mix(in srgb,var(--site-bg) 9%,transparent); border:0; border-radius:7px; cursor:pointer; font-size:13px; }
.assistant-messages { height:184px; padding:13px; display:flex; flex-direction:column; gap:8px; overflow:auto; scroll-behavior:smooth; }.assistant-message { max-width:84%; padding:9px 10px; border-radius:10px 10px 10px 3px; background:color-mix(in srgb,var(--site-text) 7%,var(--site-bg)); font-size:8px; line-height:1.55; }.assistant-message.user { align-self:flex-end; color:color-mix(in srgb,var(--site-text) 92%,#000); background:var(--site-accent); border-radius:10px 10px 3px 10px; }.assistant-typing { display:flex; gap:3px; align-items:center; }.assistant-typing i { width:4px; height:4px; display:block; background:color-mix(in srgb,var(--site-text) 48%,transparent); border-radius:50%; animation:typingDot .9s ease-in-out infinite; }.assistant-typing i:nth-child(2) { animation-delay:.12s; }.assistant-typing i:nth-child(3) { animation-delay:.24s; }
.assistant-suggestions { padding:0 12px 10px; display:flex; gap:5px; overflow:auto; scrollbar-width:none; }.assistant-suggestions button { min-height:28px; padding:0 9px; flex:0 0 auto; color:var(--site-text); background:transparent; border:1px solid color-mix(in srgb,var(--site-text) 17%,transparent); border-radius:999px; cursor:pointer; font-size:7px; font-weight:700; }.assistant-suggestions button:hover { background:color-mix(in srgb,var(--site-accent) 30%,transparent); border-color:var(--site-accent); }
.assistant-form { padding:9px; display:flex; gap:6px; border-top:1px solid color-mix(in srgb,var(--site-text) 12%,transparent); }.assistant-form input { min-width:0; height:34px; flex:1; padding:0 10px; color:var(--site-text); background:color-mix(in srgb,var(--site-text) 5%,var(--site-bg)); border:1px solid color-mix(in srgb,var(--site-text) 13%,transparent); border-radius:8px; outline:0; font-size:8px; }.assistant-form button { width:34px; height:34px; display:grid; place-items:center; color:color-mix(in srgb,var(--site-text) 92%,#000); background:var(--site-accent); border:0; border-radius:8px; cursor:pointer; font-size:13px; font-weight:900; }
@keyframes assistantIn { from { opacity:0; transform:translateY(10px) scale(.98); } } @keyframes assistantPulse { 50% { transform:translateY(-3px); box-shadow:0 18px 38px color-mix(in srgb,var(--site-text) 30%,transparent); } } @keyframes typingDot { 50% { opacity:.28; transform:translateY(-2px); } }

/* Motion choices */
.site-preview.motion-plain * { animation: none !important; transition: none !important; }
.site-preview.motion-soft .reveal-item { animation: softReveal .65s both; }.site-preview.motion-soft .reveal-item:nth-child(2) { animation-delay:.06s; }.site-preview.motion-soft .reveal-item:nth-child(3) { animation-delay:.12s; }.site-preview.motion-soft .reveal-item:nth-child(4) { animation-delay:.18s; }
.site-preview.motion-dynamic .reveal-item { animation: dynamicReveal .72s cubic-bezier(.2,.8,.2,1) both; }.site-preview.motion-dynamic .reveal-item:nth-child(2) { animation-delay:.08s; }.site-preview.motion-dynamic .reveal-item:nth-child(3) { animation-delay:.16s; }.site-preview.motion-dynamic .reveal-item:nth-child(4) { animation-delay:.24s; }.motion-dynamic .statement-ticker span,.motion-dynamic .marquee-track { animation: ticker 14s linear infinite; }.motion-dynamic .conversion-orbit { animation: orbit 13s linear infinite; }.motion-dynamic .product-window { animation: productFloat 4s ease-in-out infinite; }
@keyframes softReveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes dynamicReveal { from { opacity:0; transform:translateY(24px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes ticker { to { transform:translateX(-50%); } }
@keyframes orbit { to { transform:rotate(360deg); } }
@keyframes productFloat { 0%,100% { transform:rotate(2deg) translateY(0); } 50% { transform:rotate(1deg) translateY(-8px); } }

/* Device preview adaptations */
@container (max-width: 820px) {
  .site-nav ul,.site-nav > .site-btn { display:none; }.site-menu { display:block; }
  .hero-split,.hero-product,.hero-showcase,.hero-launch,.hero-signature,.story-split,.proof-wall,.feature-focus,.faq-section,.dashboard-section,.mosaic-section,.footer-newsletter,.footer-contact { grid-template-columns:1fr; }
  .hero-photo { min-height:390px; }.hero-showcase { padding-top:55px; }.showcase-grid { height:350px; }.bento-grid { grid-template-columns:1fr 1fr; }.bento-card.large { grid-row:span 1; grid-column:1/-1; min-height:220px; }.client-cloud { grid-template-columns:repeat(3,1fr); }.proof-metrics { grid-template-columns:repeat(3,1fr); }.team-grid,.pricing-grid { grid-template-columns:1fr 1fr; }.team-grid article:last-child,.pricing-grid article:last-child { grid-column:1/-1; }.feature-visual { min-height:360px; }.magazine-heading { grid-template-columns:1fr; }.magazine-layout { grid-template-columns:1.2fr .8fr; }.mag-copy { grid-column:1/-1; order:3; }.process-grid { grid-template-columns:1fr; }.process-grid article { min-height:auto; padding:22px 0; border-right:0; border-bottom:1px solid color-mix(in srgb,var(--site-text) 17%,transparent); }.process-grid article:not(:first-child) { padding-left:0; }.process-grid strong { margin-top:22px; }.journal-grid { grid-template-columns:1fr 1fr; }.journal-grid article:last-child { grid-column:1/-1; }.timeline { grid-template-columns:1fr 1fr; row-gap:25px; }.mosaic-copy { position:static; }.footer-multi .footer-columns { grid-template-columns:1.5fr 1fr 1fr; }.footer-multi .footer-columns > div:first-child { grid-column:1/-1; }.marquee-bottom { grid-template-columns:1fr 1fr; }
}
@container (max-width: 430px) {
  .site-nav { min-height:55px; }.site-hero,.content-section { padding:42px 18px; }.site-hero h2,.section-title { letter-spacing:-.045em; }.hero-editorial { min-height:auto; }.hero-editorial h2 { font-size:43px; }.editorial-collage { height:225px; grid-template-columns:1fr; }.editorial-collage img:last-of-type { display:none; }.hero-split { display:flex; flex-direction:column; }.hero-copy { padding:45px 18px; }.hero-copy h2 { font-size:42px; }.hero-photo { min-height:330px; }.canvas-copy { min-height:560px; padding:45px 18px; }.canvas-copy h2 { margin-bottom:42px; font-size:46px; }.canvas-bottom { align-items:flex-start; flex-direction:column; }.hero-product { padding:50px 18px; }.product-copy h2 { font-size:43px; }.product-window { margin-top:20px; }.product-ui { min-height:280px; }.hero-showcase { padding:45px 18px; }.showcase-copy h2 { font-size:45px; }.showcase-grid { height:390px; grid-template-columns:1fr 1fr; }.showcase-grid figure:first-child { grid-column:1/-1; grid-row:auto; }.hero-statement h2 { font-size:62px; }.statement-foot { align-items:flex-start; flex-direction:column; }.hero-launch { padding:45px 18px; }.launch-copy h2 { font-size:48px; }.launch-countdown { min-height:300px; padding:20px; }.launch-countdown strong { font-size:32px; }.hero-reel { padding:45px 0; }.reel-heading { grid-template-columns:1fr; padding:0 18px; }.reel-heading h2 { margin-bottom:8px; font-size:47px; }.reel-heading .site-btn { width:fit-content; margin-bottom:30px; }.reel-track { width:150%; grid-template-columns:repeat(3,1fr); }.reel-track figure { height:255px; }.signature-portrait { min-height:390px; }.signature-copy { padding:45px 18px 80px; }.signature-copy h2 { font-size:43px; }.secondary-hero { min-height:370px; padding:60px 18px; }.secondary-hero h2 { font-size:48px; }.page-customize-notice { top:67px; right:10px; width:calc(100% - 20px); }.story-photo { height:330px; }.stats-grid { grid-template-columns:1fr 1fr; }.bento-grid,.team-grid,.pricing-grid,.journal-grid { grid-template-columns:1fr; }.team-grid article:last-child,.pricing-grid article:last-child,.journal-grid article:last-child { grid-column:auto; }.bento-card.large { grid-column:auto; }.service-row { grid-template-columns:25px 1fr 16px; }.service-row small { display:none; }.proof-metrics { grid-template-columns:1fr; }.client-cloud { grid-template-columns:1fr 1fr; }.feature-phone { width:65%; }.manifesto blockquote { font-size:38px; }.manifesto-foot { grid-template-columns:1fr; }.magazine-layout { grid-template-columns:1fr; }.mag-main,.mag-small { height:260px; }.faq-section { gap:20px; }.section-heading-row { align-items:flex-start; flex-direction:column; }.projects-grid { grid-template-columns:1fr; }.testimonial-wrap { padding:42px 20px; }.testimonial-wrap blockquote { font-size:25px; }.testimonial-score { position:static; margin-top:20px; text-align:center; }.timeline { grid-template-columns:1fr; }.dashboard-section { gap:25px; }.dashboard-grid { grid-template-columns:1fr; }.metric-card,.chart-card,.donut-card { grid-column:auto; }.photo-mosaic { grid-template-columns:1fr; }.photo-mosaic figure.wide { grid-column:auto; height:230px; }.conversion-section h3 { font-size:48px; }.footer-top,.footer-bottom { align-items:flex-start; flex-direction:column; }.footer-big { font-size:43px; }.footer-multi .footer-columns { grid-template-columns:1fr 1fr; }.footer-newsletter,.footer-contact { gap:35px; }.footer-newsletter .footer-bottom,.footer-contact .footer-bottom { grid-column:auto; }.marquee-bottom { grid-template-columns:1fr; }
}

@container (max-width: 820px) {
  .site-inquiry { grid-template-columns:1fr; }.site-inquiry-form { max-width:560px; }
}
@container (max-width: 430px) {
  .site-inquiry-form { grid-template-columns:1fr; }.site-inquiry-form label:last-of-type,.site-inquiry-form .site-btn,.site-inquiry-form small { grid-column:auto; }.site-assistant { right:10px; width:calc(100% - 20px); }.assistant-messages { height:210px; }.assistant-launcher { width:48px; height:48px; }
}

/* Generation and full result */
.color-picker-modal { position:fixed; inset:0; z-index:320; padding:18px; display:grid; place-items:center; background:rgba(12,14,18,.64); opacity:0; pointer-events:none; transition:opacity .22s ease; backdrop-filter:blur(10px); }.color-picker-modal.show { opacity:1; pointer-events:auto; }.color-picker-card { width:min(440px,100%); padding:20px; color:#202227; background:#f6f5f2; border:1px solid rgba(255,255,255,.6); border-radius:17px; box-shadow:0 30px 90px rgba(0,0,0,.36); transform:translateY(12px) scale(.98); transition:transform .25s ease; }.color-picker-modal.show .color-picker-card { transform:none; }.color-picker-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.color-picker-head span { color:#878a90; font-size:7px; font-weight:900; letter-spacing:1.1px; text-transform:uppercase; }.color-picker-head h2 { margin:4px 0 0; font-family:"Space Grotesk",sans-serif; font-size:23px; letter-spacing:-.8px; }.color-picker-head button { width:32px; height:32px; display:grid; place-items:center; background:#e7e6e3; border:0; border-radius:50%; cursor:pointer; font-size:18px; }.color-picker-preview { height:105px; margin:18px 0 14px; padding:12px; display:flex; align-items:flex-end; justify-content:flex-end; border:1px solid rgba(0,0,0,.1); border-radius:11px; transition:background .18s ease; }.color-picker-preview span { padding:5px 8px; color:#fff; background:rgba(10,12,15,.72); border-radius:999px; font-size:8px; font-weight:900; letter-spacing:.5px; }.color-swatch-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }.color-swatch-grid button { aspect-ratio:1; padding:3px; background:#fff; border:1px solid #d2d2d0; border-radius:8px; cursor:pointer; transition:.15s ease; }.color-swatch-grid button:hover,.color-swatch-grid button.active { border-color:#202227; transform:translateY(-2px); box-shadow:0 5px 11px rgba(18,20,25,.12); }.color-swatch-grid button span { width:100%; height:100%; display:block; background:var(--choice); border:1px solid rgba(0,0,0,.07); border-radius:5px; }.color-hex-field { margin-top:16px; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:12px; }.color-hex-field span { color:#777a81; font-size:8px; font-weight:800; }.color-hex-field input { min-width:0; height:38px; padding:0 11px; background:#fff; border:1px solid #cfd0d2; border-radius:8px; font-size:11px; font-weight:800; text-transform:uppercase; }.color-hex-field input.invalid { border-color:#c43b3b; box-shadow:0 0 0 3px rgba(196,59,59,.12); }.color-picker-actions { margin-top:18px; display:flex; justify-content:flex-end; gap:8px; }

/* Fixed package chooser and project inquiry */
.pricing-modal { position:fixed; inset:0; z-index:360; padding:16px; display:grid; place-items:center; background:rgba(10,12,16,.76); opacity:0; pointer-events:none; transition:opacity .24s ease; backdrop-filter:blur(12px); }
.pricing-modal.show { opacity:1; pointer-events:auto; }
.pricing-dialog { width:min(1180px,100%); max-height:calc(100vh - 32px); overflow:auto; color:#1b1e24; background:#f6f5f1; border:1px solid rgba(255,255,255,.58); border-radius:20px; box-shadow:0 35px 110px rgba(0,0,0,.46); transform:translateY(16px) scale(.985); transition:transform .28s ease; }
.pricing-modal.show .pricing-dialog { transform:none; }
.pricing-head { position:sticky; top:0; z-index:3; padding:24px 28px 20px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; background:rgba(246,245,241,.96); border-bottom:1px solid #deded9; backdrop-filter:blur(14px); }
.pricing-head > div { max-width:730px; }
.pricing-head > div > span,.selected-package-summary > span,.package-success-view > span { color:#8b6817; font-size:9px; font-weight:900; letter-spacing:1.3px; text-transform:uppercase; }
.pricing-head h2 { margin:5px 0 6px; font-family:"Space Grotesk",sans-serif; font-size:clamp(27px,3vw,42px); line-height:1; letter-spacing:-1.8px; }
.pricing-head p { margin:0; color:#686d76; font-size:12px; line-height:1.55; }
.pricing-head > button { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; color:#25272c; background:#e9e8e4; border:0; border-radius:50%; cursor:pointer; font-size:23px; transition:transform .2s ease,background .2s ease; }
.pricing-head > button:hover { background:#deddd8; transform:rotate(5deg); }
.pricing-view-switcher { padding:16px 28px 0; display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.pricing-view-switcher[hidden] { display:none; }
.pricing-view-switcher button { min-height:54px; padding:9px 14px; display:grid; align-content:center; justify-items:start; color:#626771; background:#ecebe7; border:1px solid #d9d8d4; border-radius:10px; cursor:pointer; text-align:left; transition:border-color .2s ease,background .2s ease,transform .2s ease; }
.pricing-view-switcher button:hover { border-color:#a9a9a5; transform:translateY(-1px); }
.pricing-view-switcher button.active { color:#f4f0e7; background:#202329; border-color:#202329; box-shadow:inset 3px 0 0 #e7b94e; }
.pricing-view-switcher span { font-size:11px; font-weight:900; }
.pricing-view-switcher small { margin-top:3px; color:#858a93; font-size:8px; }
.pricing-view-switcher button.active small { color:#b8bdc5; }
.pricing-view { padding:22px 28px 28px; }
.pricing-quick-guide { margin-bottom:16px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; background:#202329; border-radius:12px; }
.pricing-quick-guide span { min-height:58px; padding:11px 14px; display:grid; align-content:center; color:#aeb2bb; border-right:1px solid rgba(255,255,255,.1); font-size:10px; line-height:1.4; }
.pricing-quick-guide span:last-child { border-right:0; }
.pricing-quick-guide b { color:#f4c960; font-size:11px; }
.pricing-modal .pricing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.pricing-modal .advanced-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pricing-modal .advanced-guide { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pricing-package-card { position:relative; min-width:0; padding:22px 19px 18px; display:flex; flex-direction:column; background:#fff; border:1px solid #dcdcd8; border-radius:14px; box-shadow:0 8px 25px rgba(20,22,27,.055); }
.pricing-package-card.featured { border-color:#d0a73f; box-shadow:inset 0 3px 0 #e7b94e,0 12px 32px rgba(73,55,13,.12); }
.pricing-package-card.system { color:#f5f2e8; background:#202329; border-color:#202329; }
.package-badge { position:absolute; top:0; right:17px; padding:6px 9px; color:#221b09; background:#e7b94e; border-radius:0 0 7px 7px; font-size:7px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; }
.package-purpose { margin-bottom:12px; color:#8a6b21; font-size:8px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.pricing-package-card.system .package-purpose { color:#efc867; }
.pricing-package-card h3 { margin:0; font-family:"Space Grotesk",sans-serif; font-size:20px; letter-spacing:-.7px; }
.package-price { margin:13px 0 14px; display:grid; }
.package-price strong { font-family:"Space Grotesk",sans-serif; font-size:31px; letter-spacing:-1.3px; }
.package-price span { margin-top:2px; color:#81858d; font-size:8px; font-weight:700; }
.pricing-package-card.system .package-price span { color:#aeb2ba; }
.package-facts { display:flex; flex-wrap:wrap; gap:5px; }
.package-facts span { padding:5px 7px; color:#5d626b; background:#f1f0ec; border-radius:999px; font-size:7px; font-weight:800; }
.pricing-package-card.system .package-facts span { color:#d5d7dc; background:rgba(255,255,255,.1); }
.pricing-package-card ul { min-height:150px; margin:17px 0 19px; padding:0; display:grid; align-content:start; gap:9px; list-style:none; }
.pricing-package-card li { position:relative; padding-left:16px; color:#5f646d; font-size:9px; line-height:1.45; }
.pricing-package-card li::before { content:"✓"; position:absolute; left:0; top:0; color:#9b741a; font-weight:900; }
.pricing-package-card.system li { color:#d1d3d7; }
.pricing-package-card.system li::before { color:#f0c65f; }
.package-avail-btn { width:100%; min-height:42px; margin-top:auto; padding:0 12px; display:flex; align-items:center; justify-content:space-between; color:#f7f3e9; background:#24272c; border:0; border-radius:8px; cursor:pointer; font-size:10px; font-weight:900; transition:transform .2s ease,background .2s ease,box-shadow .2s ease; }
.package-avail-btn:hover { background:#0e1014; transform:translateY(-2px); box-shadow:0 9px 19px rgba(20,22,27,.17); }
.pricing-package-card.system .package-avail-btn { color:#17191e; background:#e7b94e; }
.pricing-package-card.system .package-avail-btn:hover { background:#f1ca6b; }
.pricing-footnote { margin:15px 2px 0; color:#777b83; font-size:8px; line-height:1.55; }
.package-form-view { max-width:850px; margin:0 auto; }
.pricing-back { padding:6px 0; color:#765a18; background:none; border:0; cursor:pointer; font-size:10px; font-weight:900; }
.pricing-back:hover { text-decoration:underline; }
.selected-package-summary { margin:12px 0 20px; padding:17px 19px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px 20px; color:#fff; background:#202329; border-radius:12px; }
.selected-package-summary > span { grid-column:1/-1; color:#e7b94e; }
.selected-package-summary strong { font-family:"Space Grotesk",sans-serif; font-size:23px; letter-spacing:-.8px; }
.selected-package-summary b { color:#f0c660; font-size:12px; }
.package-inquiry-form { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.package-inquiry-form label:not(.form-consent) { display:grid; gap:6px; }
.package-inquiry-form label > span { color:#555a63; font-size:9px; font-weight:800; }
.package-inquiry-form input:not([type="checkbox"]),.package-inquiry-form select,.package-inquiry-form textarea { width:100%; min-width:0; padding:11px 12px; color:#202329; background:#fff; border:1px solid #d0d1d2; border-radius:8px; outline:0; font:inherit; font-size:11px; transition:border-color .18s ease,box-shadow .18s ease; }
.package-inquiry-form input:not([type="checkbox"]),.package-inquiry-form select { height:42px; }
.package-inquiry-form textarea { min-height:105px; resize:vertical; line-height:1.55; }
.package-inquiry-form input:focus,.package-inquiry-form select:focus,.package-inquiry-form textarea:focus { border-color:#a57d1d; box-shadow:0 0 0 3px rgba(231,185,78,.2); }
.form-wide { grid-column:1/-1; }
.form-consent { display:flex; align-items:flex-start; gap:9px; }
.form-consent input { width:16px; height:16px; margin:1px 0 0; accent-color:#b18520; }
.form-consent span { font-weight:500 !important; line-height:1.5; }
.package-form-actions { display:flex; align-items:center; gap:16px; }
.package-form-actions p { margin:0; color:#646973; font-size:9px; line-height:1.45; }
.package-form-actions p.error { color:#a52828; }
.package-form-actions button[disabled] { cursor:wait; opacity:.66; transform:none; }
.package-success-view { min-height:450px; display:grid; place-items:center; align-content:center; text-align:center; }
.package-success-view[hidden],.pricing-view[hidden] { display:none; }
.success-mark { width:58px; height:58px; margin-bottom:16px; display:grid; place-items:center; color:#202329; background:#e7b94e; border-radius:50%; font-size:25px; font-weight:900; }
.package-success-view h3 { max-width:560px; margin:7px 0 10px; font-family:"Space Grotesk",sans-serif; font-size:30px; line-height:1.08; letter-spacing:-1.2px; }
.package-success-view p { max-width:560px; margin:0; color:#686d76; font-size:11px; line-height:1.65; }
.package-success-view > div:last-child { margin-top:22px; display:flex; justify-content:center; gap:8px; }
.package-success-view .ghost-btn { color:#282b31; border-color:#c6c7c8; }
.package-success-view .ghost-btn:hover { border-color:#686b71; }
.pricing-modal button:focus-visible,.pricing-modal input:focus-visible,.pricing-modal select:focus-visible,.pricing-modal textarea:focus-visible,.pricing-trigger:focus-visible { outline:3px solid rgba(231,185,78,.56); outline-offset:2px; }
.generation-overlay,.result-modal { position:fixed; inset:0; z-index:200; opacity:0; pointer-events:none; transition:opacity .28s ease; }.generation-overlay.show,.result-modal.show { opacity:1; pointer-events:auto; }
.generation-overlay { display:grid; place-items:center; padding:20px; color:#fff; background:rgba(12,14,18,.86); backdrop-filter:blur(16px); }.generation-card { width:min(430px,100%); padding:34px; background:#1b1d22; border:1px solid rgba(255,255,255,.11); border-radius:16px; box-shadow:0 30px 80px rgba(0,0,0,.45); }.generation-card h2 { margin:0 0 25px; font-family:"Space Grotesk",sans-serif; font-size:30px; letter-spacing:-1.2px; }.loader-orbit { width:58px; height:58px; margin-bottom:23px; display:grid; place-items:center; border:1px solid rgba(231,185,78,.4); border-radius:50%; animation:orbit 1.6s linear infinite; }.loader-orbit img { width:38px; height:38px; border-radius:10px; }.generation-list { display:grid; gap:8px; }.generation-list > div { min-height:36px; padding:0 11px; display:flex; align-items:center; gap:10px; color:#777c86; background:rgba(255,255,255,.03); border-radius:6px; font-size:10px; transition:.2s ease; }.status-icon { width:8px; height:8px; border:1px solid #666b75; border-radius:50%; }.generation-list > div.active { color:#fff; background:rgba(231,185,78,.1); }.generation-list > div.active .status-icon { border-color:var(--yellow); box-shadow:0 0 0 4px rgba(231,185,78,.12); }.generation-list > div.done { color:#a7abb2; }.generation-list > div.done .status-icon { background:#55d987; border-color:#55d987; }
.result-modal { padding:14px; background:#111318; }.result-shell { height:100%; display:flex; flex-direction:column; overflow:hidden; background:#e4e4e3; border-radius:13px; }.result-header { min-height:94px; padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#fff; background:#1c1e23; }.result-header h2 { margin:0 0 3px; font-family:"Space Grotesk",sans-serif; font-size:22px; letter-spacing:-.8px; }.result-header p { margin:0; color:#969ba5; font-size:9px; }.result-actions { display:flex; align-items:center; gap:7px; }.result-actions .ghost-btn { color:#fff; }.icon-btn { width:38px; height:38px; color:#fff; background:rgba(255,255,255,.08); border-radius:50%; font-size:22px; }.result-canvas { min-height:0; flex:1; padding:18px; overflow:auto; }.result-browser { width:min(1250px,100%); margin:auto; overflow:hidden; background:#fff; border:1px solid #c7c8cb; border-radius:10px; box-shadow:var(--shadow); }.result-preview { min-height:1000px; }

.reality-cta { position:fixed; right:20px; bottom:20px; z-index:160; width:min(410px,calc(100vw - 30px)); padding:16px; display:grid; grid-template-columns:54px 1fr; gap:13px; color:#fff; background:rgba(20,22,27,.97); border:1px solid rgba(255,255,255,.12); border-radius:14px; box-shadow:0 25px 60px rgba(0,0,0,.34); opacity:0; pointer-events:none; transform:translateY(22px) scale(.97); transition:.4s cubic-bezier(.2,.8,.2,1); backdrop-filter:blur(18px); }.reality-cta.show { opacity:1; pointer-events:auto; transform:none; }.reality-cta > img { width:54px; height:54px; border-radius:13px; }.reality-cta > div { display:grid; }.reality-cta > div > span { color:#d8ad49; font-size:7px; font-weight:900; letter-spacing:1.1px; text-transform:uppercase; }.reality-cta strong { margin-top:3px; font-size:14px; }.reality-cta p { margin:6px 0 10px; color:#aeb2bb; font-size:9px; line-height:1.5; }.reality-cta a { width:fit-content; color:#f0c55f; font-size:9px; font-weight:900; }.reality-close { position:absolute; top:6px; right:8px; color:#8d929c; background:none; border:0; cursor:pointer; font-size:15px; }

/* The embedded simulator follows the portfolio's Day Mode. */
html[data-theme="light"] {
  color-scheme: light;
  --yellow: #bd8500;
}
html[data-theme="light"] body { color:#14161a; background:#eef0f3; }
html[data-theme="light"] .topbar { color:#14161a; background:rgba(255,253,248,.97); border-bottom-color:rgba(20,22,26,.12); box-shadow:0 8px 26px rgba(20,22,26,.065); }
html[data-theme="light"] .brand-logo { box-shadow:0 0 0 1px rgba(20,22,26,.12); }
html[data-theme="light"] .brand-text small,
html[data-theme="light"] .topbar-copy { color:#5b616b; }
html[data-theme="light"] .ghost-btn { color:#202329; border-color:rgba(20,22,26,.22); background:rgba(255,255,255,.48); }
html[data-theme="light"] .ghost-btn:hover { border-color:rgba(20,22,26,.5); background:#fff; }
html[data-theme="light"] .pricing-trigger { color:#775100; border-color:rgba(155,105,0,.44); background:rgba(189,133,0,.085); }
html[data-theme="light"] .pricing-trigger:hover { color:#5c3e00; border-color:#9b6900; background:rgba(189,133,0,.15); }
html[data-theme="light"] .primary-btn { color:#111317; background:#bd8500; box-shadow:0 8px 24px rgba(123,86,0,.18); }
html[data-theme="light"] .result-modal { background:#e8ebef; }
html[data-theme="light"] .result-header { color:#14161a; background:#fffdf8; border-bottom:1px solid rgba(20,22,26,.12); }
html[data-theme="light"] .result-header p { color:#5b616b; }
html[data-theme="light"] .result-actions .ghost-btn { color:#202329; }
html[data-theme="light"] .icon-btn { color:#14161a; background:#eeece6; border:1px solid rgba(20,22,26,.1); }
html[data-theme="light"] .generation-overlay { color:#14161a; background:rgba(232,235,239,.9); }
html[data-theme="light"] .generation-card { background:#fffdf8; border-color:rgba(20,22,26,.12); box-shadow:0 30px 80px rgba(20,22,26,.18); }
html[data-theme="light"] .generation-list > div { color:#59606a; background:rgba(20,22,26,.035); }
html[data-theme="light"] .generation-list > div.active { color:#14161a; background:rgba(189,133,0,.11); }
html[data-theme="light"] .pricing-modal { background:rgba(224,228,234,.9); }
html[data-theme="light"] .reality-cta { color:#14161a; background:rgba(255,253,248,.98); border-color:rgba(155,105,0,.3); box-shadow:0 25px 60px rgba(20,22,26,.18); }
html[data-theme="light"] .reality-cta > div > span,
html[data-theme="light"] .reality-cta a { color:#775100; }
html[data-theme="light"] .reality-cta p { color:#555c66; }
html[data-theme="light"] .reality-close { color:#555c66; }

@media (max-width: 1180px) {
  .builder-layout { grid-template-columns:1fr; }.preview-panel { position:relative; top:auto; height:min(850px,92vh); order:-1; }.controls-panel { border-right:0; }.panel-intro h1 { font-size:50px; }
}
@media (max-width: 1050px) {
  .topbar-copy,#resetBtn,#shuffleBtn { display:none; }
  .brand { margin-right:auto; }
  .pricing-modal .pricing-grid { grid-template-columns:1fr 1fr; }
  .pricing-package-card ul { min-height:0; }
}
@media (max-width: 720px) {
  .topbar { height:62px; padding:0 12px; }.brand { min-width:0; }.brand-logo { width:34px; height:34px; }.brand-text small,.topbar-copy,.topbar-actions .ghost-btn:not(.pricing-trigger) { display:none; }.topbar-actions { margin-left:auto; }.pricing-trigger { min-height:36px; padding:0 11px; font-size:10px; }.builder-layout { min-height:calc(100vh - 62px); }.preview-panel { height:78vh; }.preview-toolbar { align-items:flex-start; flex-direction:column; padding:10px 12px; }.device-switcher { width:100%; }.device-btn { flex:1; justify-content:center; }.preview-stage { padding:10px; }.controls-panel { padding:30px 16px 100px; }.panel-intro h1 { font-size:41px; letter-spacing:-2.2px; }.option-grid-3 { grid-template-columns:1fr 1fr; }.split-controls { grid-template-columns:1fr; }.palette-grid { grid-template-columns:repeat(2,1fr); }.custom-palette { grid-template-columns:1fr; align-items:stretch; }.uploaded-image-grid { grid-template-columns:repeat(3,1fr); }.color-swatch-grid { grid-template-columns:repeat(6,1fr); }.sticky-build { bottom:10px; }.result-modal { padding:0; }.result-shell { border-radius:0; }.result-header { align-items:flex-start; flex-direction:column; }.result-actions { width:100%; }.result-actions .contact-link,.result-actions .ghost-btn { flex:1; }.result-canvas { padding:8px; }.reality-cta { right:15px; bottom:15px; }
  .pricing-modal { padding:0; place-items:stretch; }.pricing-dialog { max-height:100vh; min-height:100vh; border-radius:0; }.pricing-head { padding:18px; }.pricing-view-switcher { padding:12px 18px 0; }.pricing-view { padding:18px; }.pricing-quick-guide,.pricing-modal .advanced-guide { grid-template-columns:1fr 1fr; }.pricing-modal .pricing-grid,.pricing-modal .advanced-grid { grid-template-columns:1fr; }.package-inquiry-form { grid-template-columns:1fr; }.form-wide { grid-column:auto; }.package-form-actions { align-items:stretch; flex-direction:column; }.package-form-actions .primary-btn { width:100%; }.selected-package-summary { grid-template-columns:1fr; }.selected-package-summary > span { grid-column:auto; }.package-success-view { min-height:calc(100vh - 110px); }
}
@media (max-width: 430px) {
  .brand-text strong { font-size:15px; }.primary-btn.compact { padding:0 12px; font-size:10px; }.preview-panel { height:72vh; }.option-grid-3 { grid-template-columns:1fr 1fr; }.motion-options { grid-template-columns:1fr; }.motion-options button { min-height:52px; grid-template-columns:28px 1fr; grid-template-rows:auto auto; justify-items:start; text-align:left; }.motion-options button i { grid-row:1/3; align-self:center; }.custom-color-grid { grid-template-columns:1fr; }.sticky-build .primary-btn { min-width:120px; padding:0 12px; }.sticky-build > div strong { max-width:130px; }.result-header { padding:12px; }.result-header h2 { font-size:18px; }.result-actions { flex-wrap:wrap; }.result-actions .icon-btn { position:absolute; top:10px; right:10px; }.reality-cta { grid-template-columns:42px 1fr; padding:13px; }.reality-cta > img { width:42px; height:42px; }
  .assistant-options,.feature-toggle-grid { grid-template-columns:1fr; }.assistant-options button { min-height:68px; padding:10px 12px 10px 52px; position:relative; }.assistant-options button > span { position:absolute; left:12px; margin:0; }.feature-builder { padding:12px; }
  .pricing-trigger span { font-size:0; }.pricing-trigger span::after { content:"Packages"; font-size:10px; }.pricing-view-switcher { grid-template-columns:1fr; }.pricing-quick-guide,.pricing-modal .advanced-guide { grid-template-columns:1fr; }.pricing-quick-guide span { min-height:45px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }.pricing-quick-guide span:last-child { border-bottom:0; }.package-success-view > div:last-child { width:100%; flex-direction:column; }.package-success-view > div:last-child button { width:100%; }
}
@media (max-width: 360px) {
  .topbar { gap:10px; }
  .brand { min-width:0; flex:0 0 auto; }
  .brand-text { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}