:root {
  --ink: #161821; --ink-2: #4b5060; --ink-3: #7a7f8d;
  --paper: #fbf8f3; --paper-2: #f3ede4; --card: #ffffff; --line: #e8e0d4;
  --night: #11131c; --night-2: #1b1e2b; --night-line: rgba(255, 255, 255, .09);
  --amber: #ffb547; --amber-2: #f59e0b; --amber-ink: #3a2400; --violet: #9b5cff; --green: #1fae6b; --wa: #1fa855;
  --r: 18px; --r-sm: 12px; --shadow: 0 1px 2px rgba(22, 24, 33, .06), 0 10px 30px -12px rgba(22, 24, 33, .18);
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.55; font-size: 16px; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.12; margin: 0; letter-spacing: -.02em; }
h2 { font-size: clamp(28px, 4.2vw, 44px); font-weight: 800; max-width: 22ch; }
h3 { font-size: 18px; font-weight: 700; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; border-radius: 8px; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none;
  font: 700 16px/1 var(--font); padding: 16px 24px; border-radius: 999px; transition: transform .15s, box-shadow .2s, background .2s, opacity .2s; }
.btn:active { transform: scale(.98); }
.btn-sm { padding: 11px 18px; font-size: 14px; }
.btn-block { width: 100%; }
.btn-amber { background: var(--amber); color: var(--amber-ink); box-shadow: 0 8px 24px -8px rgba(245, 158, 11, .7); }
.btn-amber:hover { background: #ffc061; }
.btn-amber:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn-ghost { background: rgba(255, 255, 255, .08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.btn-ghost:hover { background: rgba(255, 255, 255, .14); }
.btn-ghost-dark { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); }
.btn-wa { background: var(--wa); color: #fff; }

.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin-bottom: 14px; }
.eyebrow.dark { color: var(--amber-2); }
.sub { color: var(--ink-2); margin-top: 14px; max-width: 60ch; font-size: 17px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; background: rgba(17, 19, 28, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--night-line); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; text-decoration: none; color: #fff; letter-spacing: -.02em; }
.logo-mark { width: 28px; height: 28px; border-radius: 8px; background: url(/assets/icon.svg) center / cover no-repeat; box-shadow: 0 0 18px rgba(255, 181, 71, .45); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 600; font-size: 14.5px; }
.nav-links a:hover { color: #fff; }
.nav-menu { display: none; background: none; border: 0; width: 40px; height: 40px; margin-left: auto; cursor: pointer; padding: 10px; }
.nav-menu span { display: block; height: 2px; background: #fff; border-radius: 2px; margin: 6px 0; transition: transform .2s; }
.nav-menu[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

/* hero */
.hero { position: relative; overflow: hidden; background: var(--night); color: #fff; padding: 72px 0 96px; }
.hero-glow { position: absolute; inset: -20% -10% auto auto; width: 70vw; height: 70vw; max-width: 900px; max-height: 900px;
  background: radial-gradient(circle, rgba(255, 181, 71, .28), rgba(255, 181, 71, .06) 45%, transparent 70%); pointer-events: none; }
.hero-in { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(44px, 7.4vw, 84px); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; }
.hl { background: linear-gradient(100deg, #ffd27a, var(--amber) 45%, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin-top: 22px; font-size: 19px; color: rgba(255, 255, 255, .78); max-width: 34em; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-points { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 10px 22px; color: rgba(255, 255, 255, .72); font-size: 14.5px; font-weight: 600; }
.hero-points li::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border-radius: 50%;
  background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }

.hero-art { position: relative; display: flex; justify-content: center; padding: 58px 0 34px; }
.phone { position: relative; width: 290px; height: 580px; border-radius: 44px; background: #0a0b10; padding: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -20px rgba(0, 0, 0, .7), 0 0 120px -20px rgba(255, 181, 71, .35); transform: rotate(-3deg); }
.phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 92px; height: 24px; border-radius: 14px; background: #000; z-index: 2; }
.phone-screen { height: 100%; border-radius: 34px; background: #f6f2ec; color: var(--ink); padding: 54px 14px 14px; overflow: hidden; }
.ph-head, .ph-room { display: flex; align-items: center; justify-content: space-between; background: #fff; border-radius: 18px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.ph-head b, .ph-room b { display: block; font-size: 15px; }
.ph-head small, .ph-room small { color: var(--ink-3); font-size: 11.5px; }
.ph-room { margin-top: 10px; }
.ph-sw { position: relative; width: 38px; height: 22px; border-radius: 99px; background: #d9d5ce; flex: none; display: inline-block; vertical-align: middle; }
.ph-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .3s; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.ph-sw.on { background: var(--amber-2); }
.ph-sw.on::after { transform: translateX(16px); }
.ph-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.tile { border-radius: 16px; padding: 12px; background: #ebe6de; min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end; transition: background .6s; }
.tile b { font-size: 12.5px; line-height: 1.2; }
.tile small { font-size: 11px; color: rgba(22, 24, 33, .6); }
.tile-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .7); margin-bottom: auto; position: relative; }
.tile-ic::after { content: ""; position: absolute; inset: 7px; border-radius: 50% 50% 40% 40%; background: rgba(22, 24, 33, .35); }
.tile.on.c1 { background: linear-gradient(155deg, #ffe2a8, #ffc061); }
.tile.on.c2 { background: linear-gradient(155deg, #fff2d9, #ffd89a); }
.tile.on.c3 { background: linear-gradient(155deg, #e3d0ff, #b78cff); }
.tile.on .tile-ic::after { background: #3a2400; }
.tile.blink { animation: tile 6s ease-in-out infinite; }
@keyframes tile { 0%, 45% { background: #ebe6de; } 55%, 90% { background: linear-gradient(155deg, #d6f1ff, #8fd3ff); } 100% { background: #ebe6de; } }
.ph-scenes { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ph-scenes span { font-size: 11px; font-weight: 700; padding: 7px 10px; border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #e8e0d4; }
.ph-scenes span:first-child { background: var(--night); color: #fff; box-shadow: none; }
.bubble { position: absolute; background: #fff; color: var(--ink); font-weight: 700; font-size: 14px; padding: 12px 16px; border-radius: 16px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .55); display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.bubble.b1 { top: 0; left: 4%; animation: float 6s ease-in-out infinite; }
.bubble.b2 { bottom: 0; right: 0; font-size: 13px; animation: float 7s ease-in-out -2s infinite; }
.mic { width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #3fd2ff, #2b6bff); box-shadow: 0 0 0 4px rgba(43, 107, 255, .15); flex: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--amber-2); box-shadow: 0 0 0 4px rgba(245, 158, 11, .2); flex: none; }
@keyframes float { 50% { transform: translateY(-10px); } }

/* sections */
.section { padding: 96px 0; }
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 44px; }
.feat { background: var(--card); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.feat p { color: var(--ink-2); margin-top: 8px; font-size: 15.5px; }
.feat-link { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--amber-2); text-decoration: none; }
.feat-link:hover { text-decoration: underline; }
.ic { display: block; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; background: var(--paper-2) center/26px no-repeat; }
.ic-voice { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E"); }
.ic-phone { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round'%3E%3Crect x='6' y='2.5' width='12' height='19' rx='3'/%3E%3Cpath d='M10.5 18.5h3'/%3E%3C/svg%3E"); }
.ic-home { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.ic-scene { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 4.6L18.5 9l-4.7 1.6L12 15l-1.8-4.4L5.5 9l4.7-1.4zM18 15l.8 2 2 .8-2 .8-.8 2-.8-2-2-.8 2-.8z'/%3E%3C/svg%3E"); }
.ic-clock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.ic-cube { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d97706' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 2.5l8.5 4.8v9.4L12 21.5l-8.5-4.8V7.3z'/%3E%3Cpath d='M3.8 7.4L12 12l8.2-4.6M12 12v9.4'/%3E%3C/svg%3E"); }

.plan-sec { background: var(--paper-2); }
.plan-in { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: center; }
.plan-copy p { color: var(--ink-2); margin-top: 16px; font-size: 17px; }
.checks { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.checks li { padding-left: 30px; position: relative; font-weight: 600; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%233a2400' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }
.plan-art { position: relative; background: radial-gradient(circle at 50% 45%, #232737, var(--night) 70%); border-radius: 28px; padding: 30px 20px 50px; box-shadow: var(--shadow); }
.iso { width: 100%; height: auto; }
.glow { mix-blend-mode: screen; animation: glow 5s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
.g2 { animation-delay: -1.2s; } .g3 { animation-delay: -2.4s; } .g4 { animation: off 7s ease-in-out infinite; }
@keyframes glow { 50% { opacity: .75; } }
@keyframes off { 0%, 40% { opacity: 1; } 50%, 85% { opacity: 0; } 100% { opacity: 1; } }
.plan-chip { position: absolute; display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .95); color: var(--ink); font-weight: 700; font-size: 13px;
  padding: 8px 10px 8px 14px; border-radius: 99px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
.pc1 { top: 26%; right: 8%; } .pc2 { bottom: 18%; left: 8%; }

.steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s; }
.steps li { background: var(--card); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.steps p { color: var(--ink-2); margin-top: 8px; font-size: 15px; }
.n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--night); color: var(--amber); font-weight: 800; margin-bottom: 18px; }

/* quote */
.quote { background: var(--night); color: #fff; position: relative; }
.quote h2 { color: #fff; }
.quote .sub { color: rgba(255, 255, 255, .7); }
.presets { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.chip { font: 700 14.5px/1 var(--font); padding: 12px 18px; border-radius: 999px; border: 0; cursor: pointer; color: #fff; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); transition: background .2s; }
.chip:hover { background: rgba(255, 255, 255, .13); }
.chip[aria-pressed="true"] { background: var(--amber); color: var(--amber-ink); box-shadow: none; }
.q-grid { display: grid; grid-template-columns: 1fr 380px; gap: 22px; margin-top: 24px; align-items: start; }
.q-items { display: grid; gap: 10px; }
.q-loading { color: rgba(255, 255, 255, .6); padding: 30px 0; }
.item { display: grid; grid-template-columns: 52px 1fr auto; gap: 16px; align-items: center; background: var(--night-2); border-radius: var(--r); padding: 16px 16px 16px 18px; box-shadow: inset 0 0 0 1px var(--night-line); transition: box-shadow .2s, background .2s; }
.item.has { box-shadow: inset 0 0 0 1.5px rgba(255, 181, 71, .65); background: #222536; }
.item-ic { width: 52px; height: 52px; border-radius: 15px; background: rgba(255, 255, 255, .06) center/28px no-repeat; }
.item h3 { font-size: 16.5px; }
.item-demo { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .02em; padding: 4px 9px; border-radius: 99px; vertical-align: 2px;
  color: var(--amber-ink); background: var(--amber); text-decoration: none; }
.item-demo:hover { background: #ffc061; }
.item p { color: rgba(255, 255, 255, .62); font-size: 14px; margin-top: 3px; }
.item .price { color: rgba(255, 255, 255, .85); font-size: 13.5px; margin-top: 6px; font-weight: 600; }
.item .price em { font-style: normal; color: rgba(255, 255, 255, .5); font-weight: 500; }
.step { display: flex; align-items: center; background: rgba(255, 255, 255, .06); border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.step button { width: 42px; height: 42px; border: 0; background: none; color: #fff; font: 700 22px/1 var(--font); cursor: pointer; border-radius: 50%; }
.step button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.step button:disabled { opacity: .3; cursor: default; }
.step input { width: 42px; text-align: center; background: none; border: 0; color: #fff; font: 800 17px/1 var(--font); -moz-appearance: textfield; appearance: textfield; }
.step input::-webkit-outer-spin-button, .step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.q-sum { position: sticky; top: 84px; background: var(--card); color: var(--ink); border-radius: 22px; padding: 24px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6); }
.q-lines { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.q-lines li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; }
.q-lines li span:last-child { font-weight: 700; white-space: nowrap; }
.q-lines li.fixed { color: var(--ink-3); }
.q-lines .empty { color: var(--ink-3); }
.own { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; font-weight: 600; color: var(--ink-2); background: var(--paper); border-radius: 12px; padding: 12px; cursor: pointer; }
.own input { width: 18px; height: 18px; accent-color: var(--amber-2); margin: 1px 0 0; flex: none; }
.q-tot { margin: 16px 0 18px; display: grid; gap: 6px; }
.q-tot div { display: flex; justify-content: space-between; font-size: 14.5px; color: var(--ink-2); }
.q-tot dd { margin: 0; font-weight: 700; color: var(--ink); }
.q-tot .grand { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 6px; align-items: baseline; }
.q-tot .grand dt { font-weight: 800; color: var(--ink); font-size: 16px; }
.q-tot .grand dd { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.q-note { color: var(--ink-3); font-size: 12.5px; margin-top: 12px; }
.q-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .96); color: var(--ink); box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); }
.q-bar small { display: block; color: var(--ink-3); font-size: 12px; }
.q-bar b { font-size: 21px; letter-spacing: -.02em; }

.brands { padding: 64px 0; }
.brand-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.brand-list li { font-weight: 800; color: var(--ink-2); background: var(--card); padding: 14px 22px; border-radius: 14px; box-shadow: var(--shadow); font-size: 15.5px; }

.faq { background: var(--paper-2); }
.faq-in { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px; }
.faq-list { display: grid; gap: 10px; }
.faq details { background: var(--card); border-radius: 16px; box-shadow: var(--shadow); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 52px 20px 22px; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 500; color: var(--amber-2); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; color: var(--ink-2); }

.cta-band { background: var(--night); color: #fff; padding: 88px 0; text-align: center; position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 120%, rgba(255, 181, 71, .35), transparent 60%); }
.cta-in { position: relative; display: grid; justify-items: center; gap: 14px; }
.cta-band h2 { max-width: none; }
.cta-band p { color: rgba(255, 255, 255, .72); margin-bottom: 12px; font-size: 18px; }

.foot { background: #0b0c12; color: rgba(255, 255, 255, .6); padding: 40px 0 56px; font-size: 14px; }
.foot-in { display: grid; gap: 10px; }
.foot-small { font-size: 12.5px; color: rgba(255, 255, 255, .4); }

/* lead dialog */
.lead { border: 0; padding: 0; border-radius: 24px; width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); color: var(--ink); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6); }
.lead::backdrop { background: rgba(11, 12, 18, .66); backdrop-filter: blur(4px); }
.lead form { padding: 28px; position: relative; }
.lead h3 { font-size: 22px; padding-right: 30px; }
.lead .x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--paper-2); font-size: 22px; cursor: pointer; color: var(--ink-2); }
.lead-tot { margin: 8px 0 18px; color: var(--ink-2); }
.lead label { display: grid; gap: 6px; font-weight: 700; font-size: 14px; margin-bottom: 14px; }
.lead .opt { font-weight: 500; color: var(--ink-3); }
.lead input, .lead textarea { font: 500 16px/1.4 var(--font); padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
.lead input:focus, .lead textarea:focus { outline: none; border-color: var(--amber-2); background: #fff; }
.lead .hp { position: absolute; left: -9999px; }
.form-err { color: #b42318; font-weight: 600; font-size: 14px; margin-bottom: 12px; }
.tiny { font-size: 12px; color: var(--ink-3); margin-top: 12px; text-align: center; }
#lead-done { text-align: center; display: grid; gap: 12px; }
#lead-done[hidden] { display: none; }
#lead-done p { color: var(--ink-2); }
.done-ic { width: 64px; height: 64px; border-radius: 50%; margin: 6px auto 4px; background: var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/44px no-repeat; }

/* scroll reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hero-in, .plan-in, .faq-in { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 72px; }
  .hero-art { margin-top: 8px; }
  .features { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
  .q-grid { grid-template-columns: 1fr; }
  .q-sum { position: static; }
  .q-bar { display: flex; }
  .q-bar[hidden] { display: none; }
}
@media (max-width: 760px) {
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--night); border-bottom: 1px solid var(--night-line); padding: 8px 20px 16px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; font-size: 16px; }
  .nav-cta { display: none; }
  .nav-menu { display: block; }
  .section { padding: 72px 0; }
  .features, .steps { grid-template-columns: 1fr; }
  .phone { width: 250px; height: 500px; transform: none; }
  .bubble { font-size: 12.5px; padding: 10px 12px; }
  .bubble.b1 { left: 0; top: 0; }
  .bubble.b2 { right: 0; bottom: 0; white-space: normal; max-width: 210px; }
  .item-ic { align-self: start; }
  .item { grid-template-columns: 44px 1fr; gap: 12px; }
  .item-ic { width: 44px; height: 44px; background-size: 24px; }
  .item .step { grid-column: 1 / -1; justify-self: start; }
  .lead form { padding: 22px; }
}
/* ── the 3D house: hero ─────────────────────────────────────────────────────────── */
.hero-in { grid-template-columns: .86fr 1.14fr; gap: 36px; }
.hero-art { display: block; padding: 40px 0 34px; }
.stage { position: relative; overflow: hidden; border-radius: 30px; aspect-ratio: 4 / 3.2; min-height: 340px;
  background: radial-gradient(circle at 50% 40%, #232737, #12141d 72%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 44px 90px -34px rgba(0, 0, 0, .85), 0 0 110px -24px rgba(255, 181, 71, .38); }
.stage-3d { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.stage-3d.ready { opacity: 1; }
.stage-3d .c3d-ui, .stage-3d .c3d-labels, .stage-3d .c3d-hint { display: none !important; }
.hero-fallback { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; transform: scale(.78); }
.hero-fallback[hidden] { display: none; }
.hero-art .bubble { z-index: 2; transition: opacity .35s; }
.hero-art .bubble.b1 { top: 12px; left: 22px; }
.hero-art .bubble.b2 { bottom: 14px; right: 22px; }
.hero-art .bubble.pop { animation: pop .55s cubic-bezier(.2, 1.4, .4, 1), float 6s ease-in-out .6s infinite; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }

/* ── loader: the house builds itself, in 3D ───────────────────────────────────────── */
.stage-loading, .demo-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 20px 58px; color: #fff; transition: opacity .6s ease; }
.stage-loading.done, .demo-loading.done { opacity: 0; pointer-events: none; }
.ld-fail { max-width: 30ch; text-align: center; color: rgba(255, 255, 255, .75); font-weight: 600; }
.ld-art { width: min(74%, 430px); animation: ldBob 5s ease-in-out infinite; filter: drop-shadow(0 26px 30px rgba(0, 0, 0, .5)) drop-shadow(0 0 40px rgba(255, 181, 71, .16)); }
.ld-iso { width: 100%; height: auto; overflow: visible; }
.ld-slab { animation: ldFade .6s ease-out both; }
.ld-floors { animation: ldFade .8s ease-out .15s both; }
.ld-w, .ld-f { transform-box: fill-box; }
.ld-w { transform-origin: 50% 100%; animation: ldRise .75s cubic-bezier(.2, .9, .3, 1) calc(.35s + var(--i) * .075s) both; }
.ld-f { transform-origin: 50% 100%; animation: ldDrop .6s cubic-bezier(.3, 1.5, .5, 1) calc(2.1s + var(--i) * .055s) both; }
.ld-lt { mix-blend-mode: screen; opacity: 0; transform-box: fill-box; transform-origin: center; animation: ldLight 2.6s ease-in-out var(--d) infinite; }
.ld-pet ellipse { fill: #ff9a2e; stroke: #fff3d6; stroke-width: 1.6; }
.ld-steps { display: grid; justify-items: center; min-height: 22px; font-weight: 700; font-size: 15px; color: rgba(255, 255, 255, .85); }
.ld-steps span { grid-area: 1 / 1; opacity: 0; animation: ldStep 6s linear infinite; }
.ld-steps span:nth-child(2) { animation-delay: 1.5s; } .ld-steps span:nth-child(3) { animation-delay: 3s; } .ld-steps span:nth-child(4) { animation-delay: 4.5s; }
.ld-bar { width: min(62%, 280px); height: 4px; border-radius: 99px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ld-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ff9a2e, #ffd27a); box-shadow: 0 0 12px rgba(255, 181, 71, .8);
  animation: ldBar 9s cubic-bezier(.1, .7, .3, 1) forwards; }
.stage-loading.done .ld-bar i, .demo-loading.done .ld-bar i { width: 100%; animation: none; transition: width .3s; }
@keyframes ldBob { 50% { transform: translateY(-6px); } }
@keyframes ldFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ldRise { from { transform: scaleY(0); opacity: .2; } to { transform: none; opacity: 1; } }
@keyframes ldDrop { from { opacity: 0; transform: translateY(-34px) scaleY(.7); } to { opacity: 1; transform: none; } }
@keyframes ldLight { 0%, 100% { opacity: 0; transform: scale(.6); } 35%, 65% { opacity: 1; transform: scale(1); } }
@keyframes ldStep { 0% { opacity: 0; transform: translateY(6px); } 4%, 20% { opacity: 1; transform: none; } 24%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes ldBar { to { width: 92%; } }
@media (prefers-reduced-motion: reduce) { .ld-steps span:not(:first-child) { display: none; } .ld-steps span { opacity: 1 !important; } .ld-lt { opacity: .7; } .ld-bar i { width: 60%; } .ld-art { animation: none; } }

/* ── demo: the view and its panel ───────────────────────────────────────────────── */
.demo-sec { position: relative; overflow: hidden; background: var(--night); color: #fff; }
.demo-sec h2 { color: #fff; max-width: 20ch; }
.demo-sec .eyebrow { color: var(--amber); }
.demo-sec .sub { color: rgba(255, 255, 255, .72); max-width: 62ch; }
.demo-sec .sub b { color: #fff; }
.demo-glow { position: absolute; inset: auto -10% -35% auto; width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px; pointer-events: none;
  background: radial-gradient(circle, rgba(155, 92, 255, .2), rgba(155, 92, 255, .05) 45%, transparent 70%); }
.demo { position: relative; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .8fr); gap: 18px; margin-top: 38px; }
.demo-view { position: relative; height: clamp(520px, 78vh, 740px); border-radius: 26px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #232737, #12141d 72%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 80px -36px rgba(0, 0, 0, .8); }

.dp { display: flex; flex-direction: column; gap: 12px; min-height: 0; max-height: clamp(520px, 78vh, 740px); padding: 18px; border-radius: 26px; color: #fff;
  background: linear-gradient(180deg, #1d2030, #171a27); box-shadow: 0 0 0 1px rgba(255, 255, 255, .09), 0 40px 80px -36px rgba(0, 0, 0, .8); }
.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dp-head b { display: block; font-size: 20px; letter-spacing: -.02em; }
.dp-head small { color: rgba(255, 255, 255, .6); font-weight: 600; font-size: 13px; }
.sw { position: relative; width: 52px; height: 30px; border: 0; padding: 0; border-radius: 99px; background: rgba(255, 255, 255, .16); cursor: pointer; flex: none; transition: background .2s; }
.sw i { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .2s; }
.sw.on { background: var(--amber-2); }
.sw.on i { transform: translateX(22px); }
.sw.sm { width: 42px; height: 24px; }
.sw.sm i { width: 18px; height: 18px; top: 3px; left: 3px; }
.sw.sm.on i { transform: translateX(18px); }
.chip { border: 0; cursor: pointer; font: 700 13px/1 var(--font); padding: 10px 13px; border-radius: 99px; color: #fff; background: rgba(255, 255, 255, .09);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .15s, transform .1s; }
.chip:hover { background: rgba(255, 255, 255, .17); }
.chip:active { transform: scale(.97); }
.dp-scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-say { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.dp-say::-webkit-scrollbar { display: none; }
.dp-say .chip { flex: none; white-space: nowrap; }
.dp-voice { padding: 11px 12px; border-radius: 16px; background: rgba(43, 107, 255, .1); box-shadow: inset 0 0 0 1px rgba(80, 140, 255, .22); }
.dp-voice > p { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 13px; color: #cfe0ff; margin-bottom: 9px; }
.chip.say { background: rgba(255, 255, 255, .07); font-weight: 600; font-size: 12.5px; padding: 9px 12px; }
.dp-reply { min-height: 0; display: grid; gap: 6px; margin-top: 0; }
.dp-reply:not(:empty) { margin-top: 10px; }
.dp-reply p { font-size: 13px; padding: 7px 11px; border-radius: 12px; max-width: 90%; animation: pop .3s ease-out; }
.dp-reply .you { justify-self: end; background: #2b6bff; color: #fff; }
.dp-reply .al { background: rgba(255, 255, 255, .12); }
.dp-rooms { flex: 1; min-height: 0; overflow: auto; display: grid; gap: 10px; align-content: start; padding-right: 2px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
.dp-room { border-radius: 16px; padding: 4px 12px 8px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); transition: background .3s; }
.dp-room.lit { background: rgba(255, 181, 71, .08); box-shadow: inset 0 0 0 1px rgba(255, 181, 71, .22); }
.dp-room > header { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.dp-room > header b { font-size: 15px; }
.dp-room > header small { color: rgba(255, 255, 255, .5); font-weight: 700; font-size: 12px; margin-right: auto; }
.dp-room ul { list-style: none; margin: 0; padding: 0; }
.dp-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dp-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; color: rgba(255, 255, 255, .82); font: 600 14px/1.2 var(--font);
  padding: 9px 0; cursor: pointer; text-align: left; }
.dp-light.lit .dp-name { color: #fff; }
.dp .dot { width: 11px; height: 11px; background: rgba(255, 255, 255, .22); box-shadow: none; transition: background .25s, box-shadow .25s; }
.dp-more { padding: 2px 0 10px 21px; display: grid; gap: 10px; }
.dp-more[hidden] { display: none; }
.dp-more label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.dp-more input { flex: 1; accent-color: var(--amber); }
.dp-sw { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35); }
.swatch:hover { transform: scale(1.12); }
.demo-tips { list-style: none; padding: 0; margin: 22px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; color: rgba(255, 255, 255, .66); font-size: 14.5px; }
.demo-tips li { padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
.demo-tips b { color: #fff; }

/* ── the panel section: what the 3D gives you ───────────────────────────────────── */
.plan-head { max-width: 760px; }
.plan-head .sub { max-width: 62ch; }
.shots { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: auto auto; gap: 18px; margin-top: 40px; }
.shot { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: var(--night); box-shadow: var(--shadow); }
.shot-big { grid-row: 1 / span 2; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot figcaption { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 56px 20px 18px; color: #fff;
  background: linear-gradient(180deg, transparent, rgba(10, 11, 18, .86)); }
.shot figcaption b { font-size: 18px; }
.shot figcaption span { font-size: 14px; color: rgba(255, 255, 255, .8); max-width: 46ch; }
.plan-checks { grid-template-columns: 1fr 1fr; gap: 12px 34px; margin-top: 34px; }
.plan-cta { margin-top: 30px; }

@media (max-width: 1100px) {
  .demo { grid-template-columns: minmax(0, 1fr); }
  .dp { max-height: none; }
  .dp-rooms { overflow: visible; }
  .demo-tips { grid-template-columns: 1fr; }
}
@media (max-width: 980px) {
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { padding-top: 10px; }
  .stage-3d { pointer-events: none; }
  .shots { grid-template-columns: 1fr; }
  .shot-big { grid-row: auto; }
  .plan-checks { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hero { padding: 36px 0 56px; }
  .hero h1 { font-size: clamp(40px, 12vw, 52px); }
  .hero-lead { font-size: 16.5px; margin-top: 16px; }
  .hero-ctas { margin-top: 22px; }
  .hero-ctas .btn { padding: 14px 20px; }
  .hero-points { margin-top: 20px; font-size: 13.5px; gap: 8px 16px; }
  .stage { aspect-ratio: 1 / 1; min-height: 0; border-radius: 24px; }
  .hero-art .bubble.b1 { left: 10px; top: 10px; }
  .hero-art .bubble.b2 { right: 10px; bottom: 10px; max-width: 78%; }
  .demo-view { height: min(460px, 66vh); border-radius: 22px; }
  .dp { border-radius: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}