:root{--leading:28px;--half:14px;--edge:clamp(20px,5vw,72px);--measure:58ch}
body{margin:0;background:radial-gradient(1200px 720px at 82% -160px,color-mix(in srgb, var(--color-accent-900) 75%, transparent), transparent 60%),radial-gradient(1100px 800px at -10% 100%,color-mix(in srgb, black 30%, transparent), transparent 55%),var(--color-bg);text-wrap:pretty}
.wrap{max-width:1100px;margin:0 auto;padding:0 var(--edge)}
.kicker{position:relative;display:block;font-size:13px;line-height:var(--half);letter-spacing:0.06em;text-transform:uppercase;color:var(--color-accent);margin:0 0 calc(var(--leading) - var(--half))}
.page-hero{padding:calc(2.8*var(--leading)) 0 calc(1.5*var(--leading))}
.page-hero h1{font-size:clamp(34px,4.4vw,52px);letter-spacing:-0.015em;margin:0}
.page-hero .sub{font-size:16px;line-height:var(--leading);max-width:var(--measure);margin:calc(1*var(--leading) - 1cap) 0 0;color:color-mix(in srgb, var(--color-text) 82%, transparent)}
.layers{display:grid;gap:var(--space-3);margin:var(--leading) 0}
.layer{border:1px solid var(--color-neutral-800);border-left:2px solid var(--color-accent);background:var(--color-surface);border-radius:var(--radius-md);padding:var(--space-4) var(--space-6)}
.layer b{display:block;font-size:15px;margin-bottom:2px}
.layer p{font-size:14px;margin:0;color:color-mix(in srgb, var(--color-text) 78%, transparent)}
.section{padding:calc(1.5*var(--leading)) 0}
.section h2{font-size:26px;margin:0 0 var(--space-3)}
.section p{font-size:15.5px;line-height:var(--leading);color:color-mix(in srgb, var(--color-text) 82%, transparent);max-width:64ch}
.callout{border:1px solid var(--color-accent-700);background:color-mix(in srgb, var(--color-accent-900) 55%, transparent);border-radius:var(--radius-md);padding:var(--space-6);margin:var(--leading) 0}
.callout b{color:var(--color-accent-300)}
.callout p{margin:var(--space-2) 0 0;font-size:14.5px;color:color-mix(in srgb, var(--color-text) 85%, transparent);max-width:64ch}
.shotsrow{max-width:720px;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--leading);margin:var(--leading) 0}
.phone{border:1px solid var(--color-neutral-700);border-radius:20px;background:var(--color-surface);box-shadow:var(--shadow-md);padding:8px;display:flex;flex-direction:column;gap:6px}
.phone .screen{flex:1;border-radius:12px;overflow:hidden}
.cap{font-size:13px;margin-top:var(--space-2);color:color-mix(in srgb, var(--color-text) 60%, transparent);text-align:center}
@media (max-width:640px){.shotsrow{grid-template-columns:1fr}}
.mt-2{margin-top:var(--space-2)}
.layer p strong{color:var(--color-text);font-weight:600}