@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/montserrat-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/cormorant-garamond-latin-600-normal.woff2) format('woff2')}
[hidden]:not([hidden=until-found i]){display:none!important}
img{max-width:100%}
/* Layout concept: Tesla-style full-screen panels. Each panel is a dark studio with one
   "hero object" in the middle (desks of screens running real systems and code), a small,
   quiet title on top and a pair of buttons near the bottom. Type stays restrained; the
   scenes carry the page. */
:root{
  color-scheme:dark;
  --bg:#05070B;
  --surface:#0E131B;
  --surface-2:#151B25;
  --line:rgba(255,255,255,.12);
  --fg:#F4F5F7;
  --fg-2:#C3C9D2;
  --muted:#8B93A2;
  --primary:#2563EB;
  --primary-2:#1D4ED8;
  --accent:#38BDF8;
  --light:#F4F4F4;
  --ink:#171A20;
  --wa:#25D366;
  --pain:#F5B544;
  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --nav-h:56px;
}

*{box-sizing:border-box}
html{background:var(--bg); scroll-behavior:smooth}
@media (min-height:560px){ html{scroll-snap-type:y mandatory} }
html.locked{overflow:hidden}
body{margin:0; background:var(--bg); color:var(--fg); font-family:var(--font); font-size:14px; -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important; transition:none!important}
}

/* ---------- NAV ---------- */
.nav{position:fixed; top:0; left:0; right:0; z-index:40; padding-top:env(safe-area-inset-top,0px); transition:background-color .3s}
.nav.solid{background:rgba(5,7,11,.74); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.nav-inner{position:relative; height:var(--nav-h); display:flex; align-items:center; justify-content:space-between;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
@media (min-width:1100px){ .nav-inner{padding-left:max(40px, env(safe-area-inset-left,0px)); padding-right:max(40px, env(safe-area-inset-right,0px))} }
.brand{display:flex; align-items:center; height:40px; padding:0 6px; border-radius:4px}
.brand svg{height:34px; width:auto; display:block}
.nav-center{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; gap:2px}
.nav-right{display:flex; gap:2px}
.nav-link{display:inline-flex; align-items:center; height:32px; padding:0 14px; border-radius:4px; font-size:14px; font-weight:500; color:var(--fg); transition:background-color .33s}
.nav-link:hover{background:rgba(255,255,255,.1)}
.nav-link.on{background:rgba(255,255,255,.06)}
.nav-menu{display:none}
@media (max-width:1099px){ .nav-center{display:none} .nav-menu{display:inline-flex; background:rgba(255,255,255,.1)} }
@media (max-width:759px){ .hide-sm{display:none} }

/* ---------- PANELS ---------- */
.panel{position:relative; height:100vh; height:100svh; min-height:560px; overflow:hidden; isolation:isolate; scroll-snap-align:start}
.scene{position:absolute; inset:0; z-index:0; overflow:hidden; background:
  radial-gradient(60% 50% at 50% 58%, var(--glow, rgba(37,99,235,.22)), rgba(0,0,0,0) 72%),
  linear-gradient(180deg, #030508 0%, #070B12 48%, #0B111A 76%, #05070B 100%)}
.scene::after{content:""; position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(180deg, rgba(160,190,255,0), rgba(160,190,255,.035) 35%, rgba(160,190,255,0))}

.codewall{position:absolute; inset:0; display:flex; justify-content:center; gap:44px; overflow:hidden; pointer-events:none; user-select:none;
  -webkit-mask-image:radial-gradient(70% 62% at 50% 42%, #000 8%, transparent 78%); mask-image:radial-gradient(70% 62% at 50% 42%, #000 8%, transparent 78%)}
.cw-col{flex:none; width:380px; animation:drift 90s linear infinite}
.cw-col:nth-child(even){animation-direction:reverse}
.cw-col pre{margin:0; font:400 12.5px/22px var(--mono); color:rgba(125,160,230,.085); white-space:pre}
@keyframes drift{from{transform:translateY(0)} to{transform:translateY(-50%)}}

.copy{position:absolute; left:0; right:0; top:calc(var(--nav-h) + 6svh); z-index:2; text-align:center;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.copy h1,.copy h2,.end-main h2{margin:0; font-size:clamp(30px,3.1vw,42px); font-weight:500; line-height:1.15; letter-spacing:-.01em; text-wrap:balance}
.copy p,.end-main p.sub{margin:8px auto 0; max-width:60ch; font-size:14px; line-height:1.55; color:var(--fg-2)}
.copy p a,.end-main p.sub a{color:var(--fg); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; text-decoration-color:rgba(255,255,255,.55); transition:text-decoration-color .3s}
.copy p a:hover{text-decoration-color:var(--fg)}

.actions{position:absolute; left:0; right:0; bottom:7svh; z-index:2; display:flex; justify-content:center; gap:22px;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-width:248px; height:40px; padding:0 24px; border-radius:4px;
  font:500 14px/1 var(--font); cursor:pointer; text-decoration:none; transition:background-color .33s, color .33s, filter .33s}
.btn svg{width:17px; height:17px}
.btn-primary{background:var(--primary); color:#FFFFFF}
.btn-primary:hover{background:var(--primary-2)}
.btn-light{background:rgba(244,244,244,.9); color:var(--ink)}
.btn-light:hover{background:#FFFFFF}
.btn-wa{background:var(--wa); color:#052E14}
.btn-wa:hover{filter:brightness(1.06)}
@media (max-width:640px){
  .actions{flex-direction:column; align-items:center; gap:12px; bottom:6svh}
  .actions .btn{width:100%; max-width:360px; min-width:0}
}
.chev{position:absolute; left:50%; bottom:1.6svh; z-index:2; width:28px; height:28px; margin-left:-14px; color:var(--fg); opacity:.75; animation:chev 2.6s ease-in-out infinite}
.chev svg{width:28px; height:28px}
@keyframes chev{0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)}}
@media (max-width:640px){ .chev{display:none} }

/* pain → solution lines above the buttons */
.pains{position:absolute; left:0; right:0; bottom:calc(7svh + 62px); z-index:2; max-width:980px; margin:0 auto; list-style:none;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; text-align:center;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.pains li{min-width:0; text-shadow:0 1px 14px rgba(0,0,0,.9)}
.pains b{display:block; font-size:15px; font-weight:500; color:var(--fg)}
.pains span{display:block; margin-top:4px; font-size:12.5px; line-height:1.45; color:var(--fg-2)}
@media (max-width:640px){
  .pains{bottom:calc(6svh + 108px); grid-template-columns:1fr; gap:8px}
  .pains b{font-size:13px}
  .pains span{margin-top:1px; font-size:11.5px}
}

/* ---------- STAGE + DEVICES ---------- */
.stage-wrap{position:absolute; left:0; right:0; top:24%; bottom:15%; z-index:1; pointer-events:none}
.stage{position:absolute; left:50%; top:50%; width:1600px; height:820px; transform:translate(-50%,-50%) scale(var(--s,.55)); transform-origin:50% 50%}
.dev{position:absolute; -webkit-box-reflect:below 3px linear-gradient(transparent 0%, transparent 82%, rgba(255,255,255,.13) 100%)}
.shadow{position:absolute; height:44px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.9), rgba(0,0,0,0)); filter:blur(5px)}
.bezel,.lid,.phone-body,.tab-body{position:relative; background:#090B0F;
  box-shadow:0 0 0 1px #2C313A, 0 40px 90px -30px rgba(0,0,0,.95), 0 0 160px -40px var(--sg, rgba(37,99,235,.35))}
.screen{position:relative; width:100%; height:100%; overflow:hidden; background:#0B1018; border-radius:5px}
.screen::after{content:""; position:absolute; inset:0; z-index:20; pointer-events:none;
  background:linear-gradient(118deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,.02) 26%, rgba(255,255,255,0) 40%)}

.monitor{width:var(--w)}
.monitor .bezel{height:var(--h); border-radius:18px; padding:13px}
.monitor .neck{width:var(--nw,150px); height:var(--neck,186px); margin:0 auto;
  background:linear-gradient(90deg,#121418 0%,#2E333B 22%,#555B66 50%,#2E333B 78%,#121418 100%); clip-path:polygon(22% 0,78% 0,86% 100%,14% 100%)}
.monitor .foot{width:var(--fw,320px); height:14px; margin:0 auto; border-radius:4px 4px 10px 10px; background:linear-gradient(180deg,#6A707B,#2A2E35 60%,#15181C)}

.laptop{width:var(--bw)}
.laptop .lid{width:var(--lw); height:var(--lh); margin:0 auto; border-radius:16px 16px 4px 4px; padding:12px 12px 22px}
.laptop .lid::before{content:""; position:absolute; top:4px; left:50%; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:#1C222B}
.laptop .base{position:relative; height:16px; border-radius:2px 2px 14px 14px / 2px 2px 9px 9px; background:linear-gradient(180deg,#7A808B 0%,#454A53 30%,#1E2228 100%)}
.laptop .base::before{content:""; position:absolute; left:50%; top:0; width:110px; height:6px; margin-left:-55px; border-radius:0 0 8px 8px; background:linear-gradient(180deg,#2B3037,#4A4F58)}

.phone{width:var(--pw); height:var(--ph)}
.phone-body{height:100%; border-radius:42px; padding:9px; box-shadow:0 0 0 1.5px #3A3F48, 0 0 0 4px #121418, 0 40px 80px -30px rgba(0,0,0,.95), 0 0 120px -40px var(--sg, rgba(37,99,235,.3))}
.phone .screen{border-radius:34px}
.island{position:absolute; top:10px; left:50%; width:62px; height:18px; margin-left:-31px; border-radius:10px; background:#000; z-index:21}

.tablet{width:var(--tw)}
.tab-body{height:var(--th); border-radius:24px; padding:14px}
.tablet .screen{border-radius:10px}
.tablet .kick{width:34%; height:12px; margin:0 auto; border-radius:0 0 8px 8px; background:linear-gradient(180deg,#2C3038,#14171B)}

.dot{display:inline-block; width:8px; height:8px; border-radius:50%; flex:none}
.dot.r{background:#FF5F57} .dot.y{background:#FEBC2E} .dot.g{background:#28C840}

/* ---------- SCREEN: app shell ---------- */
.app{display:grid; grid-template-columns:150px minmax(0,1fr); height:100%; background:#0B1018; color:#E3E8EF; font-family:var(--font); font-size:10px}
.app-side{display:flex; flex-direction:column; gap:2px; padding:14px 10px 10px; background:#080B11; border-right:1px solid rgba(255,255,255,.06)}
.app-brand{display:flex; align-items:center; gap:8px; padding:0 6px 14px; font-size:11px; font-weight:600; white-space:nowrap}
.app-brand svg{width:20px; height:16px; flex:none}
.app-item{display:flex; align-items:center; gap:9px; height:26px; padding:0 8px; border-radius:6px; color:#8A94A6; font-weight:500}
.app-item i{width:11px; height:11px; border:1.5px solid currentColor; border-radius:3px; opacity:.85}
.app-item.on{background:rgba(37,99,235,.2); color:#FFFFFF}
.app-user{margin-top:auto; display:flex; align-items:center; gap:8px; padding:10px 6px 2px; border-top:1px solid rgba(255,255,255,.06)}
.app-user b{display:block; font-size:9.5px; font-weight:600}
.app-user small{display:block; font-size:8.5px; color:#6E788B}
.av{flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-size:8.5px; font-weight:600; color:#FFFFFF; background:linear-gradient(135deg,#2563EB,#38BDF8)}
.app-main{display:flex; flex-direction:column; gap:10px; min-width:0; min-height:0; padding:14px 16px}
.app-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.app-head h4{margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em}
.app-head small{display:block; margin-top:2px; font-size:9px; color:#717B8E}
.app-search{width:190px; height:26px; display:flex; align-items:center; gap:7px; padding:0 10px; border-radius:7px; background:#111824; border:1px solid rgba(255,255,255,.06); color:#5C6679; font-size:9px}
.app-search svg{width:10px; height:10px}
.seg{display:flex; padding:2px; border-radius:7px; background:#111824; border:1px solid rgba(255,255,255,.06)}
.seg span{padding:4px 10px; border-radius:5px; font-size:9px; color:#7A8496}
.seg span.on{background:#1C2533; color:#FFFFFF}
.kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px}
.kpi{padding:9px 11px; border-radius:8px; background:#101622; border:1px solid rgba(255,255,255,.06); min-width:0}
.kpi span{display:block; font-size:8.5px; color:#7A8496; font-weight:500; white-space:nowrap}
.kpi b{display:block; margin-top:4px; font-size:17px; font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums; white-space:nowrap}
.kpi em{display:block; margin-top:2px; font-style:normal; font-size:8px; color:#4ADE80; white-space:nowrap}
.kpi em.w{color:#FBBF24}
.kpi em.m{color:#7A8496}
.grid2{flex:1; min-height:0; display:grid; gap:10px}
.card{min-width:0; min-height:0; overflow:hidden; padding:10px 12px; border-radius:8px; background:#101622; border:1px solid rgba(255,255,255,.06)}
.card-h{display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:10px; font-weight:600; color:#D3DAE4; white-space:nowrap}
.card-h span{font-size:8.5px; font-weight:500; color:#677185}
.card-h .live{color:#4ADE80}
.big{display:flex; align-items:baseline; gap:8px; margin:-2px 0 4px}
.big b{font-size:18px; font-weight:600; letter-spacing:-.015em; font-variant-numeric:tabular-nums}
.big span{font-size:8.5px; color:#7A8496}
.rows > div{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; border-top:1px solid rgba(255,255,255,.05)}
.rows > div:first-child{border-top:0; padding-top:0}
.rows b{display:block; font-size:9.5px; font-weight:600}
.rows small{display:block; font-size:8.5px; color:#6E788B; margin-top:1px; white-space:nowrap}
.chip{flex:none; padding:2px 7px; border-radius:4px; font-size:8px; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.chip.ok{background:rgba(52,211,153,.14); color:#4ADE80}
.chip.warn{background:rgba(251,191,36,.14); color:#FBBF24}
.chip.bad{background:rgba(248,113,113,.15); color:#F87171}
.chip.info{background:rgba(56,189,248,.14); color:#38BDF8}
.feed .fi{display:flex; align-items:center; gap:8px; padding:6px 0; border-top:1px solid rgba(255,255,255,.05); font-size:9px; color:#C9D1DC}
.feed .fi:first-child{border-top:0; padding-top:0}
.fi i{flex:none; width:6px; height:6px; border-radius:50%; background:#38BDF8}
.fi i.ok{background:#4ADE80} .fi i.warn{background:#FBBF24}
.fi span{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fi time{flex:none; color:#5F697C; font-size:8px}
.fi.new{animation:fiIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes fiIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}
.ag{display:grid !important; grid-template-columns:34px minmax(0,1fr); gap:8px; font-size:9px}
.ag time{font-family:var(--mono); color:#7DCFFF; font-size:8.5px}
.ag span{color:#C9D1DC; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ag span b{display:inline; color:#FFFFFF; font-size:9px}
.chart{display:block; width:100%; height:auto}
.chart .grid line{stroke:rgba(255,255,255,.06); stroke-width:1}
.chart text{font-family:var(--font); font-size:8px; fill:#5F697C}
.chart .xl text{text-anchor:middle}
.chart .line{fill:none; stroke:#3B82F6; stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .pt{fill:#38BDF8}
.chart .pt-ring{fill:rgba(56,189,248,.3); transform-box:fill-box; transform-origin:center; animation:ping 1.8s ease-out infinite}
.chart .val{fill:#E3E8EF; font-weight:600}
@keyframes ping{0%{transform:scale(.6); opacity:1} 100%{transform:scale(1.9); opacity:0}}
.lg{display:inline-flex; align-items:center; gap:4px; margin-left:8px}
.lg i{width:7px; height:7px; border-radius:2px}
.tbl{width:100%; border-collapse:collapse; font-size:9px}
.tbl th{padding:0 0 6px; text-align:left; font-size:8px; font-weight:500; color:#677185}
.tbl td{padding:5px 0; border-top:1px solid rgba(255,255,255,.05); white-space:nowrap; color:#D3DAE4}
.tbl .v{text-align:right; padding-right:12px; font-variant-numeric:tabular-nums}
.tbl .r{text-align:right}
.tbl td.d{color:#7A8496; font-variant-numeric:tabular-nums}
.mini{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,.05)}
.mini span{display:block; font-size:8px; color:#677185; white-space:nowrap}
.mini b{display:block; margin-top:2px; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.docs-g{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px}
.docf{display:flex; align-items:center; gap:8px; padding:8px; border-radius:7px; background:#0C121C; border:1px solid rgba(255,255,255,.05); min-width:0}
.docf > div{flex:1; min-width:0}
.docf b{display:block; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.docf small{display:block; font-size:8px; color:#6E788B; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fic{flex:none; width:24px; height:28px; border-radius:4px; display:grid; place-items:center; font-style:normal; font-size:6.5px; font-weight:700; color:#FFFFFF; background:#B42318}
.fic.x{background:#0E7490}

/* ---------- SCREEN: code editor ---------- */
.ide{height:100%; display:flex; flex-direction:column; background:#0A0D14; font-family:var(--mono); color:#C0CAF5}
.ide-bar{flex:none; height:24px; display:flex; align-items:center; gap:6px; padding:0 0 0 10px; background:#06080D; border-bottom:1px solid rgba(255,255,255,.05); font-size:9px}
.tab{height:100%; display:flex; align-items:center; padding:0 12px; color:#565F89; border-right:1px solid rgba(255,255,255,.04); white-space:nowrap}
.ide-bar .tab:first-of-type{margin-left:10px}
.tab.on{color:#C0CAF5; background:#0A0D14; box-shadow:inset 0 1px 0 #38BDF8}
.code{flex:1; min-height:0; padding:8px 0; overflow:hidden; font-size:10px; line-height:16px}
.ln{display:flex; white-space:pre; height:16px}
.ln .n{flex:none; width:32px; padding-right:12px; text-align:right; color:#3B4261}
.ln.cur{background:rgba(255,255,255,.035)}
.ln.cur .n{color:#737AA2}
.caret{display:inline-block; width:2px; height:13px; margin-left:1px; vertical-align:-2px; background:#38BDF8; animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.t-kw{color:#BB9AF7} .t-fn{color:#7AA2F7} .t-str{color:#9ECE6A} .t-num{color:#FF9E64} .t-com{color:#565F89; font-style:italic}
.t-prop{color:#7DCFFF} .t-deco{color:#E0AF68} .t-par{color:#E0AF68} .t-p{color:#89DDFF}
.term{flex:none; height:62px; padding:7px 12px; background:#06080D; border-top:1px solid rgba(255,255,255,.06); font-size:9.5px; line-height:15px; color:#A9B1D6; overflow:hidden; white-space:nowrap}
.term .pr{color:#7DCFFF} .term .ok{color:#9ECE6A} .term .mut{color:#565F89}

.ide2{height:100%; display:grid; grid-template-rows:26px minmax(0,1fr); background:#0A0D14; font-family:var(--mono); color:#C0CAF5}
.ide2-bar{display:flex; align-items:center; gap:6px; padding:0 12px; background:#06080D; border-bottom:1px solid rgba(255,255,255,.05); font-size:9.5px; color:#565F89}
.ide2-bar .ttl{flex:1; text-align:center; margin-right:40px}
.ide2-body{display:grid; grid-template-columns:170px minmax(0,1fr) 410px; min-height:0}
.tree{padding:10px 0; background:#080A10; border-right:1px solid rgba(255,255,255,.05); font-size:9.5px; color:#787F9E; overflow:hidden}
.tree div{height:21px; display:flex; align-items:center; gap:6px; padding-left:12px; white-space:nowrap}
.tree .h{font-size:8px; letter-spacing:.1em; color:#565F89; padding-bottom:4px}
.tree .ind{padding-left:26px}
.tree .on{background:rgba(56,189,248,.08); color:#C0CAF5}
.tree .fo::before{content:""; width:0; height:0; border-left:3.5px solid transparent; border-right:3.5px solid transparent; border-top:4.5px solid #565F89}
.tree .f::before{content:""; width:7px; height:8px; border-radius:2px; background:#3B82F6; opacity:.75}
.tree .f.txt::before{background:#565F89}
.ed{display:flex; flex-direction:column; min-width:0; border-right:1px solid rgba(255,255,255,.05)}
.ed-tabs{flex:none; height:26px; display:flex; background:#06080D; font-size:9.5px}
.ed .code{font-size:11px; line-height:18px; padding:10px 0}
.ed .ln{height:18px}
.side2{display:flex; flex-direction:column; min-width:0; min-height:0; background:#090C12}
.flow{padding:12px 16px 14px; border-bottom:1px solid rgba(255,255,255,.06); font-family:var(--font)}
.flow-h{display:flex; justify-content:space-between; margin-bottom:10px; font-size:8.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#6B7590}
.flow-h span:last-child{letter-spacing:0; text-transform:none; color:#4ADE80}
.node{position:relative; display:flex; align-items:center; gap:10px; height:32px; padding:0 12px; border-radius:7px; background:#101622; border:1px solid rgba(255,255,255,.07); color:#8F99AC; font-size:10px; font-weight:500; transition:border-color .4s, color .4s, box-shadow .4s}
.node + .node{margin-top:10px}
.node + .node::before{content:""; position:absolute; left:15px; top:-11px; width:1px; height:10px; background:rgba(255,255,255,.14)}
.node .nd{width:8px; height:8px; border-radius:50%; background:#2A3242; transition:background .4s}
.node .st{margin-left:auto; font-size:8.5px; color:#5F697C}
.node.run{border-color:rgba(56,189,248,.75); color:#FFFFFF; box-shadow:0 0 0 3px rgba(56,189,248,.12)}
.node.run .nd{background:#38BDF8; animation:blink .8s steps(1) infinite}
.node.run .st{color:#38BDF8}
.node.done{color:#DDE3EC}
.node.done .nd{background:#4ADE80}
.node.done .st{color:#4ADE80}
.logs-h{flex:none; padding:9px 14px 0; font-size:8px; letter-spacing:.1em; color:#565F89}
.logs{flex:1; min-height:0; overflow:hidden; padding:6px 14px 10px; font-size:9.5px; line-height:16px; color:#A9B1D6; display:flex; flex-direction:column; justify-content:flex-end}
.logs div{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.logs .ts{color:#565F89}
.logs .tg{display:inline-block; width:66px; color:#BB9AF7}
.logs .okl{color:#9ECE6A}
.logs .new{animation:fiIn .35s ease-out}

/* ---------- SCREEN: phone UIs ---------- */
.lock{position:relative; height:100%; display:flex; flex-direction:column; align-items:center; padding:42px 9px 14px; color:#FFFFFF; font-family:var(--font);
  background:radial-gradient(120% 60% at 20% 0%, #1D4ED8 0%, rgba(29,78,216,0) 60%), radial-gradient(90% 50% at 100% 100%, #0E7490 0%, rgba(14,116,144,0) 60%), #060A12}
.lock-date{font-size:9.5px; font-weight:500; opacity:.85}
.lock-time{margin-top:2px; font-size:50px; font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.notifs{width:100%; margin-top:auto; display:flex; flex-direction:column; gap:6px}
.notif{display:grid; grid-template-columns:24px minmax(0,1fr); gap:7px; padding:8px 9px; border-radius:14px; background:rgba(255,255,255,.13)}
.notif.new{animation:notifIn .55s cubic-bezier(.2,.8,.2,1)}
@keyframes notifIn{from{opacity:0; transform:translateY(-10px) scale(.97)} to{opacity:1; transform:none}}
.notif .ic{width:24px; height:24px; border-radius:6px; background:#0A0F18; display:grid; place-items:center}
.notif .ic svg{width:16px; height:13px}
.nt{display:flex; justify-content:space-between; font-size:7px; opacity:.7; letter-spacing:.04em; text-transform:uppercase}
.notif b{display:block; margin-top:1px; font-size:9px; font-weight:600}
.notif p{margin:1px 0 0; font-size:8.5px; line-height:1.3; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.home{flex:none; width:70px; height:4px; border-radius:2px; background:rgba(255,255,255,.7); margin-top:12px}

.chat{height:100%; display:flex; flex-direction:column; background:#0B1018; font-family:var(--font); color:#E8ECF2}
.chat-h{flex:none; display:flex; align-items:center; gap:8px; padding:38px 10px 9px; background:#111824; border-bottom:1px solid rgba(255,255,255,.06)}
.chat-h .back{font-size:16px; color:#38BDF8; line-height:1}
.chat-h .av{width:26px; height:26px; background:linear-gradient(135deg,#0EA5E9,#14B8A6)}
.chat-h b{display:block; font-size:10px}
.chat-h small{display:block; font-size:8px; color:#4ADE80}
.chat-b{flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; gap:6px; padding:10px 9px}
.day{align-self:center; font-size:7.5px; color:#8A94A6; background:#151D2A; padding:3px 8px; border-radius:6px}
.msg{max-width:84%; padding:6px 8px 4px; border-radius:11px; font-size:9px; line-height:1.38}
.msg.new{animation:fiIn .45s cubic-bezier(.2,.8,.2,1)}
.msg.in{align-self:flex-start; background:#1A2230; border-top-left-radius:3px}
.msg.out{align-self:flex-end; background:#1D4ED8; border-top-right-radius:3px}
.msg time{display:block; text-align:right; font-size:6.5px; opacity:.6; margin-top:2px}
.typing{align-self:flex-start; display:flex; gap:3px; padding:8px 10px; border-radius:11px; background:#1A2230}
.typing i{width:4px; height:4px; border-radius:50%; background:#8A94A6; animation:dots 1s infinite}
.typing i:nth-child(2){animation-delay:.15s} .typing i:nth-child(3){animation-delay:.3s}
@keyframes dots{0%,60%,100%{opacity:.3; transform:none} 30%{opacity:1; transform:translateY(-2px)}}
.chat-in{flex:none; margin:0 8px 16px; height:30px; border-radius:15px; background:#141B27; display:flex; align-items:center; padding:0 12px; font-size:8.5px; color:#5C6679}

/* ---------- SCREEN: law-firm website mock ---------- */
.browser{height:100%; display:flex; flex-direction:column; background:#F6F4EF}
.br-bar{flex:none; height:30px; display:flex; align-items:center; gap:6px; padding:0 12px; background:#E7E4DD; border-bottom:1px solid #D8D4CB}
.br-url{display:flex; align-items:center; justify-content:center; gap:6px; height:19px; margin:0 auto; width:340px; padding:0 10px; border-radius:6px; background:#FFFFFF; color:#4A5060; font:500 9.5px var(--font)}
.br-url svg,.mb-url svg{width:9px; height:9px; color:#5B6170}
.br-view{position:relative; flex:1; min-height:0; overflow:hidden}
.site{--navy:#14213D; --brass:#A9834B; --ivory:#F6F4EF; font-family:var(--font); color:#1D2433; background:var(--ivory); animation:siteScroll var(--dur,18s) ease-in-out infinite alternate}
@keyframes siteScroll{0%,14%{transform:translateY(0)} 86%,100%{transform:translateY(calc(-1 * var(--scroll, 0px)))}}
.s-logo b{display:block; font-family:var(--serif); font-size:20px; font-weight:600; color:var(--navy); line-height:1}
.s-logo small{display:block; margin-top:3px; font-size:6.5px; font-weight:600; letter-spacing:.34em; color:var(--brass)}
.s-btn{display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 14px; border-radius:3px; background:var(--navy); color:#FFFFFF; font-size:9.5px; font-weight:600; white-space:nowrap}
.s-btn.brass{background:var(--brass)}
.s-eyebrow{font-size:7.5px; font-weight:600; letter-spacing:.24em; color:var(--brass)}
.s-link{font-size:10px; font-weight:600; color:var(--navy); border-bottom:1px solid var(--brass); padding-bottom:2px}
.s-img{position:relative; overflow:hidden; border-radius:4px; background:
  linear-gradient(180deg, rgba(20,33,61,0) 45%, rgba(20,33,61,.55) 100%),
  repeating-linear-gradient(90deg, #E9E3D7 0 26px, #CFC5B2 26px 30px, #F3EEE5 30px 34px, #E9E3D7 34px 58px),
  linear-gradient(180deg,#DCD3C2,#BFB39C)}
.s-img::before{content:""; position:absolute; left:0; right:0; top:0; height:20%; background:linear-gradient(180deg,#8FA3BF,#C9D3E0); box-shadow:0 6px 0 #D8CFBE, 0 9px 0 #B9AD95}
.s-img::after{content:""; position:absolute; left:0; right:0; bottom:0; height:15%; background:repeating-linear-gradient(180deg,#D8CFBE 0 6px,#BDB19A 6px 8px)}
.s-badge{position:absolute; left:12px; bottom:22%; z-index:2; padding:7px 10px; border-radius:3px; background:#FFFFFF; font-size:8.5px; font-weight:600; color:var(--navy); box-shadow:0 6px 18px rgba(20,33,61,.18)}
.s-h4{margin:0 0 16px; font-family:var(--serif); font-size:24px; font-weight:600; color:var(--navy)}
.s-card{padding:16px; border:1px solid rgba(20,33,61,.1); border-radius:4px; background:var(--ivory)}
.s-card b{display:block; font-family:var(--serif); font-size:17px; font-weight:600; color:var(--navy)}
.s-card p{margin:6px 0 0; font-size:9.5px; line-height:1.55; color:#535C6E}
.s-card span{display:block; margin-top:10px; font-size:9px; font-weight:600; color:var(--brass)}
.s-band{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:26px 40px; background:var(--navy); color:#FFFFFF}
.s-band b{font-family:var(--serif); font-size:22px; font-weight:600}
.s-band p{margin:4px 0 0; font-size:10px; color:#AEB7C9}
.s-foot{display:flex; justify-content:space-between; padding:16px 40px; font-size:8.5px; color:#6B7383}
.sd-head{display:flex; align-items:center; justify-content:space-between; padding:16px 40px; border-bottom:1px solid rgba(20,33,61,.08)}
.sd-nav{display:flex; gap:22px; font-size:10px; font-weight:500; color:#3D4659}
.sd-hero{display:grid; grid-template-columns:1.05fr 1fr; gap:34px; align-items:center; padding:40px 40px 44px}
.sd-hero h3{margin:10px 0 0; font-family:var(--serif); font-size:40px; font-weight:600; line-height:1.02; color:var(--navy)}
.sd-hero p{margin:12px 0 0; max-width:38ch; font-size:11px; line-height:1.6; color:#4A5366}
.s-ctas{display:flex; align-items:center; gap:16px; margin-top:18px}
.sd-hero .s-img{height:250px}
.sd-areas{padding:32px 40px 36px; background:#FFFFFF}
.sd-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.mob{height:100%; display:flex; flex-direction:column; background:#EFECE6}
.mb-status{flex:none; height:32px; display:flex; align-items:flex-end; justify-content:space-between; padding:0 18px 4px 22px; font:600 9px var(--font); color:#1D2433}
.mb-ic{display:flex; align-items:flex-end; gap:2px}
.mb-ic i{width:3px; border-radius:1px; background:#1D2433}
.mb-ic i:nth-child(1){height:4px} .mb-ic i:nth-child(2){height:6px} .mb-ic i:nth-child(3){height:8px}
.mb-url{flex:none; height:26px; margin:5px 8px 6px; border-radius:8px; background:#E1DDD4; display:flex; align-items:center; justify-content:center; gap:5px; font:500 8.5px var(--font); color:#4A5060}
.sm-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid rgba(20,33,61,.08)}
.sm-head .s-logo b{font-size:15px}
.burger{width:16px; height:11px; background:linear-gradient(#14213D,#14213D) 0 0/100% 2px no-repeat, linear-gradient(#14213D,#14213D) 0 50%/100% 2px no-repeat, linear-gradient(#14213D,#14213D) 0 100%/100% 2px no-repeat}
.sm-hero{padding:18px 14px 16px}
.sm-hero h3{margin:8px 0 0; font-family:var(--serif); font-size:24px; font-weight:600; line-height:1.05; color:var(--navy)}
.sm-hero p{margin:8px 0 0; font-size:9.5px; line-height:1.55; color:#4A5366}
.sm-hero .s-btn{margin-top:12px; width:100%; height:30px}
.sm-img{height:130px; margin:0 14px}
.sm-areas{margin-top:16px; padding:18px 14px; background:#FFFFFF}
.sm-areas .s-h4{font-size:18px; margin-bottom:10px}
.sm-areas .s-card + .s-card{margin-top:8px}
.sm-band{padding:18px 14px}
.sm-band b{font-size:17px}
.s-wa{position:absolute; right:10px; bottom:12px; z-index:3; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#063B1A; box-shadow:0 6px 14px rgba(0,0,0,.25)}
.s-wa svg{width:15px; height:15px}

/* ---------- SCREEN: maps + business profile ---------- */
.maps{position:relative; height:100%; background:#0E1520; font-family:var(--font); color:#E7EBF1; overflow:hidden}
.map{position:absolute; left:0; right:0; top:0; height:360px}
.map svg{display:block; width:100%; height:100%}
.map .pulse{transform-box:fill-box; transform-origin:center; animation:ping 2s ease-out infinite}
.m-search{position:absolute; left:10px; right:10px; top:40px; height:34px; z-index:2; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:17px; background:#1A2331; box-shadow:0 8px 20px rgba(0,0,0,.35); font-size:10px; color:#DCE2EA}
.m-search svg{width:12px; height:12px; color:#8A94A6}
.m-chips{position:absolute; left:10px; right:0; top:82px; z-index:2; display:flex; gap:6px; white-space:nowrap}
.m-chips span{padding:5px 9px; border-radius:12px; background:#1A2331; font-size:8.5px; color:#C9D1DC; box-shadow:0 4px 10px rgba(0,0,0,.25)}
.m-chips span.on{background:#1E3A8A; color:#FFFFFF}
.m-sheet{position:absolute; left:0; right:0; top:318px; bottom:0; z-index:3; padding:8px 14px 0; border-radius:18px 18px 0 0; background:#121A26; box-shadow:0 -10px 30px rgba(0,0,0,.4)}
.m-handle{width:34px; height:4px; margin:0 auto 10px; border-radius:2px; background:#2E3949}
.m-name{font-size:14px; font-weight:600}
.m-rate{display:flex; align-items:center; gap:5px; margin-top:4px; font-size:10px}
.m-rate b{font-weight:600}
.m-rate .stars{display:flex; gap:1px}
.m-rate .stars svg{width:10px; height:10px; fill:#FBBF24}
.m-rate span{color:#8A94A6}
.m-meta{margin-top:4px; font-size:9.5px; color:#8A94A6}
.m-meta .open{color:#4ADE80; font-weight:600}
.m-acts{display:flex; justify-content:space-between; margin-top:14px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.07)}
.m-act{display:flex; flex-direction:column; align-items:center; gap:5px; width:56px; font-size:8.5px; color:#C9D1DC}
.m-act i{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; border:1px solid #2E3949; color:#7DCFFF}
.m-act i svg{width:15px; height:15px}
.m-act.pri i{background:#2563EB; border-color:#2563EB; color:#FFFFFF}
.m-photos{display:flex; gap:6px; margin-top:12px}
.m-photos i{flex:1; height:62px; border-radius:8px}
.rep{height:100%; display:flex; flex-direction:column; gap:10px; padding:14px 16px; background:#0B1018; font-family:var(--font); color:#E3E8EF; font-size:10px}
.rep-h{display:flex; align-items:center; justify-content:space-between}
.rep-h small{display:block; font-size:8.5px; color:#717B8E}
.rep-h h4{margin:2px 0 0; font-size:13px; font-weight:600}
.src{margin-bottom:10px}
.src-l{display:flex; justify-content:space-between; font-size:9px; color:#C9D1DC; margin-bottom:4px}
.src-l b{font-weight:600; font-variant-numeric:tabular-nums}
.src i{display:block; height:6px; border-radius:3px; background:linear-gradient(90deg,#2563EB,#38BDF8) 0 0/var(--p) 100% no-repeat, #1A2230}
.kw{margin-top:14px; font-size:8.5px; color:#677185}
.kw-c{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.kw-c span{padding:3px 7px; border-radius:4px; background:#1A2230; font-size:8px; color:#C9D1DC}
.ck{height:100%; display:flex; flex-direction:column; padding:18px 20px; background:#0D131C; font-family:var(--font); color:#E5EAF1}
.ck-h{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.ck-h b{display:block; font-size:14px; font-weight:600}
.ck-h small{display:block; margin-top:3px; font-size:9px; color:#6E788B}
.ring{position:relative; width:54px; height:54px}
.ring svg{display:block; width:54px; height:54px; transform:rotate(-90deg)}
.ring .tr{fill:none; stroke:#1C2533; stroke-width:5}
.ring .v{fill:none; stroke:#38BDF8; stroke-width:5; stroke-linecap:round; stroke-dasharray:138.23; stroke-dashoffset:0; transition:stroke-dashoffset .5s}
.ring span{position:absolute; inset:0; display:grid; place-items:center; font-size:11px; font-weight:600; font-variant-numeric:tabular-nums}
.ck-i{display:flex; align-items:center; gap:10px; height:38px; border-top:1px solid rgba(255,255,255,.06); font-size:10.5px}
.ck-i .cb{flex:none; width:16px; height:16px; border-radius:50%; border:1.5px solid #39445A; display:grid; place-items:center; color:#FFFFFF; transition:background .35s, border-color .35s, box-shadow .35s}
.ck-i .cb svg{width:9px; height:9px; opacity:0; transition:opacity .3s}
.ck-i.done .cb{background:#2563EB; border-color:#2563EB}
.ck-i.done .cb svg{opacity:1}
.ck-i.run .cb{border-color:#38BDF8; box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.ck-i small{margin-left:auto; font-size:9px; color:#7A8496}

/* ---------- SCREEN: payment + document ---------- */
.pay{height:100%; display:flex; flex-direction:column; align-items:center; padding:46px 14px 18px; background:linear-gradient(180deg,#0C1424,#06080D); font-family:var(--font); text-align:center; color:#FFFFFF}
.pay-ic{position:relative; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:rgba(52,211,153,.14); color:#4ADE80}
.pay-ic svg{width:24px; height:24px}
.pay-ic::after{content:""; position:absolute; inset:-6px; border-radius:50%; border:1.5px solid rgba(52,211,153,.4); animation:ping 2.4s ease-out infinite}
.pay-ic.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{0%{transform:scale(.7)} 60%{transform:scale(1.08)} 100%{transform:scale(1)}}
.pay .l{margin-top:14px; font-size:9px; color:#8A94A6}
.pay .amt{margin-top:4px; font-size:24px; font-weight:600; font-variant-numeric:tabular-nums}
.pay .from{margin-top:3px; font-size:9px; color:#8A94A6}
.pay-d{width:100%; margin-top:16px; border-top:1px solid rgba(255,255,255,.07)}
.pay-d div{display:flex; justify-content:space-between; padding:7px 2px; border-bottom:1px solid rgba(255,255,255,.07); font-size:8.5px}
.pay-d span:first-child{color:#8A94A6}
.pay-d .okt{color:#4ADE80; font-weight:600}
.pay-btn{margin-top:auto; width:100%; height:30px; border-radius:8px; display:grid; place-items:center; background:#1D2635; font-size:9px; font-weight:600}
.doc{height:100%; display:flex; flex-direction:column; background:#E9ECF1; font-family:var(--font); color:#1B2230}
.doc-bar{flex:none; height:30px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:#FFFFFF; border-bottom:1px solid #D9DEE6; font-size:9px; font-weight:600}
.doc-bar span{color:#7A8496; font-weight:500}
.doc-page{flex:1; min-height:0; margin:10px; padding:16px; display:flex; flex-direction:column; gap:5px; background:#FFFFFF; border-radius:3px; box-shadow:0 2px 8px rgba(15,23,42,.12)}
.doc-t{margin-bottom:6px; text-align:center; font-size:8px; font-weight:700; letter-spacing:.04em}
.doc-c{margin-top:6px; font-size:7.5px; font-weight:600}
.tl{display:block; height:4px; border-radius:2px; background:#DDE2E9}
.doc-place{margin-top:8px; font-size:7.5px; color:#4A5366}
.sigs{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:auto}
.sig svg{display:block; width:100%; height:40px}
.sig path{fill:none; stroke:#1E3A8A; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sig.anim path{stroke-dasharray:1; stroke-dashoffset:0; animation:sign 9s ease-in-out infinite}
@keyframes sign{0%,8%{stroke-dashoffset:1; opacity:1} 40%,88%{stroke-dashoffset:0; opacity:1} 96%,100%{stroke-dashoffset:0; opacity:0}}
.sig-line{display:block; height:1px; background:#9AA3B2}
.sig small{display:block; margin-top:4px; font-size:7px; color:#5E677A}
.stamp{align-self:flex-start; display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:5px 8px; border-radius:4px; background:#E8F7EF; color:#0F7A47; font-size:7.5px; font-weight:600; animation:stamp 9s ease-in-out infinite}
.stamp svg{width:9px; height:9px}
@keyframes stamp{0%,40%{opacity:0; transform:translateY(4px)} 46%,88%{opacity:1; transform:none} 96%,100%{opacity:0}}

/* pause everything that is off screen */
.panel:not(.is-live) *{animation-play-state:paused!important}

/* ---------- PAIN FINDER PANEL ---------- */
.panel-pain{height:auto; min-height:100vh; min-height:100svh; display:flex; flex-direction:column}
.pain-main{position:relative; z-index:2; flex:1; width:100%; max-width:1120px; margin:0 auto; display:flex; flex-direction:column; justify-content:center;
  padding-block:calc(var(--nav-h) + 32px) 48px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.pain-head{margin-bottom:36px; text-align:center}
.pain-head h2{margin:0; font-size:clamp(28px,3.1vw,42px); font-weight:500; line-height:1.15; letter-spacing:-.01em; text-wrap:balance}
.pain-head .sub{margin:8px auto 0; max-width:60ch; font-size:14px; line-height:1.55; color:var(--fg-2)}
.pain-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:40px; align-items:start}
.pain-list{display:flex; flex-direction:column; gap:8px; min-width:0}
.pain-opt{display:flex; align-items:center; gap:14px; width:100%; min-height:50px; padding:12px 16px; border-radius:6px; text-align:left; font-size:14.5px; font-weight:500; line-height:1.35; color:var(--fg-2);
  background:rgba(255,255,255,.02); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); scroll-margin-top:calc(var(--nav-h) + 16px); transition:box-shadow .25s, background-color .25s, color .25s}
.pain-opt i{flex:none; width:16px; height:16px; border-radius:50%; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35); transition:box-shadow .25s}
.pain-opt span{flex:1; min-width:0}
.pain-opt em{flex:none; font-style:normal; font-size:11.5px; color:var(--muted)}
.pain-opt:hover{color:var(--fg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.pain-opt[aria-checked="true"]{color:var(--fg); background:rgba(37,99,235,.08); box-shadow:inset 0 0 0 2px var(--primary)}
.pain-opt[aria-checked="true"] i{box-shadow:inset 0 0 0 5px var(--primary)}
.pain-ans{min-width:0; padding:28px 30px; border-radius:10px; background:var(--surface); border:1px solid var(--line)}
.pain-ans.swap{animation:fiIn .4s ease-out}
.pa-k{font-size:12px; font-weight:500; color:var(--accent)}
.pa-t{margin:6px 0 0; font-size:24px; font-weight:500; line-height:1.25; letter-spacing:-.01em}
.pa-p{margin:12px 0 0; font-size:14.5px; line-height:1.65; color:var(--fg-2)}
.pa-out{list-style:none; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.pa-out li{display:flex; gap:10px; font-size:14px; line-height:1.45}
.pa-out svg{flex:none; width:16px; height:16px; margin-top:2px; color:var(--accent)}
.pa-btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.pa-btns .btn{flex:1 1 200px; min-width:0}
@media (max-width:860px){
  .pain-grid{grid-template-columns:1fr; gap:0}
  .pain-ans{margin:2px 0 6px; padding:20px 18px}
  .pa-t{font-size:20px}
}

/* ---------- FINAL PANEL ---------- */
.panel-end{height:auto; min-height:100vh; min-height:100svh; display:flex; flex-direction:column}
.bigmark{position:absolute; left:50%; top:44%; width:min(66vw,700px); transform:translate(-50%,-50%); opacity:.07}
.end-main{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  padding-block:calc(var(--nav-h) + 48px) 40px; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
.end-actions{display:flex; justify-content:center; gap:22px; margin-top:36px; width:100%}
@media (max-width:640px){ .end-actions{flex-direction:column; align-items:center; gap:12px} .end-actions .btn{width:100%; max-width:360px; min-width:0} }
.steps{list-style:none; margin:72px 0 0; padding:0; width:min(980px,100%); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); text-align:left; border-top:1px solid var(--line)}
.steps li{padding:18px 20px 0 0; min-width:0}
.steps b{display:block; font-size:13px; font-weight:600}
.steps b span{color:var(--muted); font-weight:500; margin-right:8px; font-variant-numeric:tabular-nums}
.steps p{margin:6px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted)}
@media (max-width:760px){ .steps{grid-template-columns:1fr 1fr; gap:4px 16px; margin-top:56px} }
.foot{position:relative; z-index:2; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px 28px; padding-block:22px 30px;
  padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px)); font-size:12px; color:var(--muted)}
.foot .ph{display:inline-flex; align-items:center; gap:8px; color:var(--fg); font-variant-numeric:tabular-nums}
.copy-btn{padding:3px 9px; border-radius:4px; background:rgba(255,255,255,.08); color:var(--fg-2); font-size:11px; font-weight:500; transition:background-color .3s}
.copy-btn:hover{background:rgba(255,255,255,.15)}

/* ---------- FLOATING WHATSAPP ---------- */
.fab{position:fixed; z-index:50; right:calc(24px + env(safe-area-inset-right,0px)); bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; background:var(--wa); color:#052E14; box-shadow:0 12px 30px -10px rgba(0,0,0,.6); transition:transform .3s}
.fab:hover{transform:translateY(-2px)}
.fab svg{width:24px; height:24px}
@media (max-width:899px){ .fab{display:none} }

/* ---------- DRAWER / SHEET ---------- */
.ov{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.42); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); opacity:0; transition:opacity .4s}
.ov.open{opacity:1}
.side{position:fixed; top:0; right:0; bottom:0; z-index:80; width:min(330px,100vw); display:flex; flex-direction:column; overflow-y:auto;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px); padding-right:env(safe-area-inset-right,0px);
  background:var(--surface); border-left:1px solid var(--line); transform:translateX(100%); transition:transform .45s cubic-bezier(.5,0,0,.75)}
.side.open{transform:none}
.side-wide{width:min(520px,100vw)}
.side-top{display:flex; justify-content:flex-end; padding:12px 14px}
.side-close{width:36px; height:36px; border-radius:4px; display:grid; place-items:center; transition:background-color .3s}
.side-close:hover{background:rgba(255,255,255,.08)}
.side-close svg{width:20px; height:20px}
.side-links{display:flex; flex-direction:column; padding:4px 20px 28px}
.side-links a{padding:11px 14px; border-radius:4px; font-size:14px; font-weight:500; transition:background-color .3s}
.side-links a:hover{background:rgba(255,255,255,.08)}
.side-links hr{width:100%; height:1px; margin:10px 0; border:0; background:var(--line)}
.sheet-body{padding:0 32px 40px}
@media (max-width:480px){ .sheet-body{padding:0 20px 32px} }
.sh-k{margin:0; font-size:12px; font-weight:500; color:var(--muted)}
.sheet-body h3{margin:6px 0 0; font-size:30px; font-weight:500; letter-spacing:-.01em; line-height:1.15}
.sh-lead{margin:14px 0 0; font-size:14.5px; line-height:1.65; color:var(--fg-2)}
.specs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:28px; padding:20px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.specs div{padding-right:12px; min-width:0}
.specs b{display:block; font-size:18px; font-weight:500; line-height:1.2}
.specs span{display:block; margin-top:6px; font-size:11.5px; line-height:1.4; color:var(--muted)}
.sheet-body h4{margin:28px 0 12px; font-size:13px; font-weight:600}
.feats{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
.feats li{display:flex; gap:10px; font-size:14px; line-height:1.5; color:var(--fg-2)}
.feats svg{flex:none; width:16px; height:16px; margin-top:3px; color:var(--accent)}
.signs{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.signs li{position:relative; padding-left:18px; font-size:14px; line-height:1.55; color:var(--fg-2)}
.signs li::before{content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border-radius:50%; background:var(--pain)}
.how{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px}
.how b{display:block; font-size:14px; font-weight:600}
.how b span{margin-right:8px; color:var(--muted); font-weight:500; font-variant-numeric:tabular-nums}
.how p{margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--fg-2)}
.sh-actions{display:flex; flex-direction:column; gap:12px; margin-top:32px}
.sh-actions .btn{width:100%; min-width:0}

/* ---------- DIAGNÓSTICO (BRIEFING) ---------- */
.quiz{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; background:rgba(3,5,8,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:max(16px, env(safe-area-inset-top,0px)) max(16px, env(safe-area-inset-right,0px)) max(16px, env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.quiz-card{position:relative; width:100%; max-width:660px; height:min(780px,100%); display:flex; flex-direction:column; overflow:hidden; border-radius:10px; background:var(--surface); border:1px solid var(--line)}
.q-top{flex:none; position:relative; padding:20px 64px 0 28px}
.quiz-x{position:absolute; top:10px; right:12px; width:36px; height:36px; border-radius:4px; display:grid; place-items:center; color:var(--muted); transition:background-color .3s, color .3s}
.quiz-x:hover{background:rgba(255,255,255,.08); color:var(--fg)}
.quiz-x svg{width:20px; height:20px}
.q-prog{display:flex; justify-content:space-between; gap:12px; font-size:12px; font-weight:500; color:var(--muted)}
.q-prog span:first-child{color:var(--fg-2)}
.q-bar{height:3px; margin-top:12px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden}
.q-bar i{display:block; width:0; height:100%; background:var(--primary); transition:width .35s ease}
.q-scroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:26px 28px 28px}
.q-foot{flex:none; display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:14px 28px 18px; border-top:1px solid var(--line); background:var(--surface)}
.q-foot .sp{flex:1}
.q-foot .btn{min-width:0; height:40px; padding:0 20px}
.btn[disabled]{opacity:.4; cursor:not-allowed}
.q-title{margin:0; font-size:22px; font-weight:500; line-height:1.3; text-wrap:balance}
.q-help{margin:8px 0 0; font-size:13.5px; line-height:1.55; color:var(--muted)}
.q-fields{display:flex; flex-direction:column; gap:24px; margin-top:22px}
.q-label{display:block; margin-bottom:10px; font-size:13px; font-weight:600; color:var(--fg)}
.q-label span{font-weight:500; color:var(--muted)}
.q-opts{display:flex; flex-direction:column; gap:8px}
.q-opt{display:flex; align-items:center; gap:12px; width:100%; min-height:48px; padding:11px 16px; border-radius:6px; text-align:left; font-size:14px; font-weight:500; line-height:1.4; color:var(--fg-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:box-shadow .2s, background-color .2s, color .2s}
.q-opt span{flex:1; min-width:0}
.q-opt > svg{flex:none; width:16px; height:16px; color:var(--muted)}
.q-chips{display:flex; flex-wrap:wrap; gap:8px}
.q-chip{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:8px 14px; border-radius:6px; text-align:left; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--fg-2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); transition:box-shadow .2s, background-color .2s, color .2s}
.q-opt:hover,.q-chip:hover{color:var(--fg); box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.q-opt.sel,.q-chip.sel{color:var(--fg); background:rgba(37,99,235,.12); box-shadow:inset 0 0 0 2px var(--primary)}
.q-ck{flex:none; width:16px; height:16px; border-radius:4px; display:grid; place-items:center; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.q-ck svg{width:11px; height:11px; color:#FFFFFF; opacity:0}
.sel .q-ck{background:var(--primary); box-shadow:none}
.sel .q-ck svg{opacity:1}
.q-input{width:100%; height:46px; padding:0 14px; border:0; border-radius:6px; background:var(--surface-2); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); color:var(--fg); font:500 15px var(--font)}
.q-input::placeholder{color:#5F6878}
.q-input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--primary)}
.q-area{height:auto; min-height:88px; padding:12px 14px; line-height:1.5; resize:vertical}
.q-link{font-size:13px; font-weight:500; color:var(--muted); text-decoration:underline; text-underline-offset:4px}
.q-link:hover{color:var(--fg)}
.q-intro{list-style:none; margin:24px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px}
.q-intro li{font-size:13.5px; color:var(--fg-2)}
.q-intro span{display:inline-block; width:26px; color:var(--muted); font-variant-numeric:tabular-nums}
.q-note{margin:22px 0 0; padding:12px 14px; border-radius:6px; background:rgba(56,189,248,.08); font-size:13.5px; line-height:1.5; color:var(--fg-2)}
.q-resumo{margin-top:20px; padding:14px 16px; border-radius:6px; background:var(--surface-2); font-size:14px; line-height:1.6}
.q-resumo b{display:block; margin-bottom:4px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}
.rv-sec{margin-top:22px}
.rv-h{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.rv-h b{font-size:13.5px; font-weight:600}
.rv-h b span{margin-right:6px; color:var(--muted); font-variant-numeric:tabular-nums}
.rv-sec dl{margin:0}
.rv-row{display:grid; grid-template-columns:minmax(0,36%) minmax(0,1fr); gap:12px; padding:8px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:13px; line-height:1.5}
.rv-row dt{color:var(--muted)}
.rv-row dd{margin:0; overflow-wrap:anywhere}
.q-raw{margin-top:22px; font-size:13px; color:var(--muted)}
.q-raw summary{cursor:pointer; font-weight:500}
.q-raw pre{margin:10px 0 0; padding:12px 14px; max-height:240px; overflow:auto; border-radius:6px; background:var(--surface-2); font:400 12px/1.6 var(--mono); color:var(--fg-2); white-space:pre-wrap; overflow-wrap:anywhere}
.q-fine{margin:16px 0 0; font-size:12.5px; line-height:1.5; color:var(--muted)}
@media (max-width:640px){
  .quiz{padding:0}
  .quiz-card{max-width:none; height:100%; border:0; border-radius:0}
  .q-top{padding:calc(16px + env(safe-area-inset-top,0px)) 60px 0 max(20px, env(safe-area-inset-left,0px))}
  .quiz-x{top:calc(8px + env(safe-area-inset-top,0px))}
  .q-scroll{padding:22px max(20px, env(safe-area-inset-right,0px)) 24px max(20px, env(safe-area-inset-left,0px))}
  .q-foot{padding:12px max(20px, env(safe-area-inset-right,0px)) calc(14px + env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px))}
  .q-foot .btn{padding:0 14px}
  .q-title{font-size:20px}
  .q-intro{grid-template-columns:1fr}
  .rv-row{grid-template-columns:1fr; gap:2px}
}

.site.dur15{--dur:15s}
.site.dur18{--dur:18s}
.u1{position:absolute !important}
.u2{--glow:rgba(37,99,235,.26) !important}
.u3{left:380px !important;top:36px !important;--w:880px !important;--h:550px !important;--neck:186px !important}
.u4{grid-template-columns:1.55fr 1fr !important;grid-template-rows:minmax(0,1fr) 148px !important}
.u5{left:-10px !important;top:436px !important;--bw:640px !important;--lw:560px !important;--lh:352px !important}
.u6{left:1236px !important;top:380px !important;--pw:210px !important;--ph:430px !important}
.u7{--glow:rgba(37,99,235,.14) !important}
.u8{--glow:rgba(56,189,248,.18) !important}
.u9{left:190px !important;top:70px !important;--w:1220px !important;--h:500px !important;--neck:200px !important;--fw:380px !important;--sg:rgba(56,189,248,.3) !important}
.u10{left:1376px !important;top:372px !important;--pw:220px !important;--ph:440px !important;--sg:rgba(56,189,248,.25) !important}
.u11{--glow:rgba(169,131,75,.16) !important}
.u12{left:210px !important;top:140px !important;--bw:1180px !important;--lw:1040px !important;--lh:650px !important;--sg:rgba(246,244,239,.16) !important}
.u13{--dur:20s !important}
.u14{left:20px !important;top:338px !important;--tw:320px !important;--th:440px !important;--sg:rgba(246,244,239,.12) !important}
.u15{left:1290px !important;top:342px !important;--pw:230px !important;--ph:470px !important;--sg:rgba(246,244,239,.12) !important}
.u16{--glow:rgba(37,99,235,.2) !important}
.u17{left:-10px !important;top:110px !important;--w:660px !important;--h:440px !important;--neck:170px !important;--fw:260px !important;--nw:120px !important}
.u18{grid-template-columns:1.35fr 1fr !important}
.u19{--p:41% !important}
.u20{--p:33% !important}
.u21{--p:26% !important}
.u22{left:962px !important;top:348px !important;--tw:580px !important;--th:400px !important}
.u23{left:645px !important;top:186px !important;--pw:310px !important;--ph:630px !important}
.u24{background:linear-gradient(160deg,#C9B48A,#6B5A3E) !important}
.u25{background:linear-gradient(160deg,#8FA3BF,#2B3A55) !important}
.u26{background:linear-gradient(160deg,#D9D2C3,#8C7F69) !important}
.u27{--glow:rgba(52,211,153,.12) !important}
.u28{left:350px !important;top:30px !important;--w:900px !important;--h:560px !important;--neck:186px !important}
.u29{grid-template-columns:1fr 1.05fr !important;grid-template-rows:minmax(0,1fr) 112px !important}
.u30{background:#3B82F6 !important}
.u31{background:#3A4558 !important}
.u32{grid-column:1/-1 !important}
.u33{left:130px !important;top:380px !important;--pw:210px !important;--ph:430px !important;--sg:rgba(52,211,153,.18) !important}
.u34{left:1230px !important;top:353px !important;--tw:330px !important;--th:450px !important;--sg:rgba(233,236,241,.12) !important}
.u35{width:100% !important}
.u36{width:94% !important}
.u37{width:62% !important}
.u38{width:88% !important}
.u39{width:96% !important}
.u40{width:40% !important}
.u41{width:97% !important}
.u42{width:72% !important}
.u43{--glow:rgba(56,189,248,.16) !important}
.ig-link{display:inline-flex;align-items:center;gap:7px;color:var(--fg);transition:color .3s}
.ig-link:hover{color:var(--accent)}
.ig-link svg,.ig-cta svg{width:16px;height:16px}
.ig-cta{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:14px;font-weight:500;color:var(--fg-2);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35);transition:color .3s,text-decoration-color .3s}
.ig-cta:hover{color:var(--fg);text-decoration-color:var(--fg)}