@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Mono:wght@400;500&family=Inter:wght@500;600;700;800&display=swap');

:root {
  --ink: #090a0b;
  --paper: #f3f0e7;
  --acid: #b8ff36;
  --aqua: #69e1df;
  --aqua-dark: #2b9d9e;
  --muted: #969793;
  --panel: #151719;
  --line: rgba(255, 255, 255, 0.13);
  --display: "Archivo Black", Impact, sans-serif;
  --mono: "DM Mono", ui-monospace, monospace;
  --body: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background:
    radial-gradient(circle at 15% 12%, rgba(105, 225, 223, 0.11), transparent 24rem),
    radial-gradient(circle at 90% 42%, rgba(184, 255, 54, 0.07), transparent 28rem),
    var(--ink);
  color: var(--paper);
  font-family: var(--body);
}

button, input { font: inherit; }
button { color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  opacity: 0.18;
  pointer-events: none;
  z-index: 20;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.app-shell { width: min(100%, 1100px); margin: 0 auto; padding: 0 20px 48px; }

.topbar {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.brand, .freeforall { color: var(--paper); text-decoration: none; }
.brand { font: 24px/1 var(--display); letter-spacing: -1.2px; }
.brand-x { color: var(--aqua); }
.freeforall { display: flex; align-items: center; gap: 8px; font: 500 10px/1 var(--mono); letter-spacing: 1.3px; }
.freeforall-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 12px var(--acid); }

.hero { padding: 54px 0 38px; max-width: 760px; }
.eyebrow { margin: 0 0 14px; color: var(--aqua); font: 500 11px/1.2 var(--mono); letter-spacing: 2.2px; }
.hero h1 { margin: 0; font: 400 clamp(44px, 9.5vw, 102px)/0.82 var(--display); letter-spacing: -0.065em; }
.hero h1 span { color: var(--acid); -webkit-text-stroke: 1px var(--acid); }
.hero-copy { max-width: 540px; margin: 26px 0 0; color: #bbbcb8; font-size: clamp(16px, 2.3vw, 21px); line-height: 1.45; }

.phone {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 9px;
  border: 1px solid #373a3b;
  border-radius: 38px;
  background: linear-gradient(145deg, #4c5052, #101113 12%, #111315 88%, #4a4d4f);
  box-shadow: 0 36px 100px rgba(0,0,0,.55), inset 0 0 0 2px #050606;
  position: relative;
}

.phone-speaker { position: absolute; top: 18px; left: 50%; translate: -50% 0; width: 70px; height: 5px; border-radius: 9px; background: #080909; z-index: 4; }
.screen { min-height: 760px; overflow: hidden; border: 1px solid #26292a; border-radius: 30px; background: #0d0f10; position: relative; }
.panel { display: none; padding: 44px 20px 118px; min-height: 760px; animation: panel-in .28s ease both; }
.panel.is-active { display: block; }

@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

.scanner {
  height: 378px;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--aqua-dark);
  border-radius: 19px;
  background: linear-gradient(#1b2326, #101416);
  box-shadow: 0 0 0 5px rgba(105, 225, 223, 0.09), inset 0 0 80px rgba(105, 225, 223, 0.1);
}

.scanner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,.04) 50%, transparent 50.3%), linear-gradient(transparent 49.7%, rgba(255,255,255,.04) 50%, transparent 50.3%); pointer-events: none; }
#photo-preview { width: 100%; height: 100%; object-fit: cover; filter: saturate(.82) contrast(1.06); }
.placeholder-face { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(150deg, #3d7774, #16292a 65%); }
.face-shape { width: 210px; height: 255px; position: absolute; left: 50%; top: 57px; translate: -50% 0; border-radius: 47% 47% 43% 43% / 39% 39% 56% 56%; background: #d3a17d; box-shadow: inset 0 -28px rgba(79,38,26,.14); z-index: 2; }
.hair { position: absolute; z-index: 4; top: 38px; left: 50%; translate: -50% 0; width: 228px; height: 104px; border-radius: 52% 52% 18% 22%; background: #171718; clip-path: polygon(2% 65%, 8% 25%, 27% 6%, 57% 0, 88% 15%, 100% 49%, 86% 39%, 74% 58%, 60% 39%, 44% 58%, 31% 37%, 17% 58%); }
.ear { position: absolute; z-index: 1; top: 160px; width: 37px; height: 72px; border-radius: 50%; background: #c18b69; }
.ear-left { left: calc(50% - 124px); } .ear-right { right: calc(50% - 124px); }
.brow { position: absolute; top: 88px; width: 58px; height: 9px; border-radius: 10px; background: #33231d; }
.brow-left { left: 35px; rotate: -5deg; } .brow-right { right: 35px; rotate: 5deg; }
.eye { position: absolute; top: 110px; width: 18px; height: 13px; border-radius: 50%; background: #121212; box-shadow: 0 0 0 8px #ece3d8; }
.eye-left { left: 57px; } .eye-right { right: 57px; }
.nose { position: absolute; top: 122px; left: 50%; width: 22px; height: 48px; translate: -50% 0; border: solid rgba(83,42,27,.34); border-width: 0 0 3px 3px; transform: skew(-7deg); }
.mouth { position: absolute; left: 50%; bottom: 52px; translate: -50% 0; width: 58px; height: 17px; border-bottom: 4px solid #63392f; border-radius: 50%; }
.neck { position: absolute; z-index: 1; bottom: 0; left: 50%; translate: -50% 0; width: 92px; height: 94px; background: #bd8667; }
.shirt { position: absolute; z-index: 2; bottom: -54px; left: 50%; translate: -50% 0; width: 330px; height: 146px; border-radius: 50% 50% 0 0; background: var(--aqua-dark); }
.corner { position: absolute; z-index: 5; width: 48px; height: 48px; border-color: var(--aqua); border-style: solid; filter: drop-shadow(0 0 5px rgba(105,225,223,.5)); }
.corner-tl { left: 14px; top: 14px; border-width: 5px 0 0 5px; border-radius: 9px 0 0; }
.corner-tr { right: 14px; top: 14px; border-width: 5px 5px 0 0; border-radius: 0 9px 0 0; }
.corner-bl { left: 14px; bottom: 14px; border-width: 0 0 5px 5px; border-radius: 0 0 0 9px; }
.corner-br { right: 14px; bottom: 14px; border-width: 0 5px 5px 0; border-radius: 0 0 9px; }
.scan-status { position: absolute; z-index: 7; bottom: 16px; left: 50%; translate: -50% 0; padding: 7px 10px; white-space: nowrap; border-radius: 4px; background: rgba(5,7,7,.83); color: var(--aqua); font: 500 10px/1 var(--mono); letter-spacing: 1.4px; }
.scan-line { position: absolute; z-index: 6; left: 4%; right: 4%; top: 10%; height: 2px; opacity: 0; background: var(--acid); box-shadow: 0 0 20px 4px rgba(184,255,54,.6); }
.scanner.is-scanning .scan-line { opacity: 1; animation: scanning 1.05s ease-in-out infinite alternate; }
@keyframes scanning { to { top: 88%; } }
.mesh { position: absolute; z-index: 4; inset: 0; opacity: 0; transition: opacity .25s; }
.scanner.has-photo .mesh, .scanner.is-scanning .mesh { opacity: .78; }
.mesh i { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: 9px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); border: 2px solid var(--aqua); box-shadow: 0 0 8px var(--aqua); }
.mesh svg { width: 100%; height: 100%; }
.mesh path { fill: none; stroke: rgba(255,255,255,.72); stroke-width: .7; vector-effect: non-scaling-stroke; }

.score-block { text-align: center; padding: 25px 0 18px; }
.score-block p { margin: 0 0 8px; color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: 1.6px; }
.score-line { display: flex; align-items: baseline; justify-content: center; gap: 3px; }
.score-line strong { color: var(--acid); font: 400 66px/.95 var(--display); letter-spacing: -4px; }
.score-line span { font: 700 20px/1 var(--body); }
.score-block h2 { margin: 9px 0 0; font: 400 18px/1.1 var(--display); letter-spacing: -.5px; }

.primary-actions { display: grid; }
.button { border: 0; border-radius: 8px; cursor: pointer; min-height: 56px; padding: 15px 18px; font: 400 14px/1 var(--display); letter-spacing: .4px; transition: transform .16s, background .16s, color .16s; }
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0); }
.button:focus-visible, .nav-item:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.button-primary { background: var(--aqua); color: #092829; }
.button-primary:hover { background: #8af0ee; }
.button-secondary { width: 100%; margin-top: 24px; background: var(--acid); color: #172106; }
.button-quiet { background: transparent; color: #bcbdb8; border: 1px solid #3b3e3f; }
.privacy-note { text-align: center; margin: 13px 0 0; color: #777a78; font: 400 9px/1.4 var(--mono); letter-spacing: .5px; }
.privacy-note span { color: var(--acid); }

.section-heading { padding: 12px 0 27px; }
.section-heading h2 { margin: 0; font: 400 37px/.95 var(--display); letter-spacing: -2px; }
.section-heading > p:last-child { margin: 15px 0 0; color: #9da09d; line-height: 1.45; font-size: 14px; }
.metric-list { display: grid; gap: 13px; }
.metric { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #141719; }
.metric-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.metric-name { font: 700 13px/1 var(--body); }
.metric-score { color: var(--aqua); font: 500 13px/1 var(--mono); }
.metric-track { height: 8px; border-radius: 5px; background: #252829; overflow: hidden; }
.metric-fill { height: 100%; width: var(--value); border-radius: inherit; background: linear-gradient(90deg, var(--aqua-dark), var(--aqua), var(--acid)); animation: grow .7s ease both; transform-origin: left; }
@keyframes grow { from { transform: scaleX(0); } }
.metric-note { margin: 10px 0 0; color: #818482; font-size: 12px; line-height: 1.4; }

.plan-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; counter-reset: steps; }
.plan-list li { counter-increment: steps; position: relative; padding: 18px 16px 18px 64px; min-height: 84px; border: 1px solid var(--line); border-radius: 12px; background: #141719; }
.plan-list li::before { content: "0" counter(steps); position: absolute; left: 17px; top: 20px; color: var(--acid); font: 400 19px/1 var(--display); }
.plan-list strong { display: block; margin-bottom: 6px; font-size: 14px; }
.plan-list p { margin: 0; color: #8f9290; font-size: 12px; line-height: 1.45; }
.result-actions { display: grid; gap: 10px; margin-top: 23px; }

.bottom-nav { position: absolute; z-index: 10; left: 0; right: 0; bottom: 0; min-height: 91px; display: grid; grid-template-columns: repeat(3, 1fr); padding: 10px 13px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(13,15,16,.95); backdrop-filter: blur(16px); }
.nav-item { appearance: none; border: 0; background: transparent; display: grid; place-items: center; align-content: center; gap: 6px; color: #777a78; cursor: pointer; font: 600 9px/1 var(--body); letter-spacing: .7px; }
.nav-item svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nav-item.is-active { color: var(--aqua); }

footer { width: min(100%, 520px); margin: 34px auto 0; color: #626563; text-align: center; font: 400 9px/1.6 var(--mono); letter-spacing: .7px; }
footer p { margin: 4px 0; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 24px; translate: -50% 18px; opacity: 0; pointer-events: none; width: max-content; max-width: calc(100% - 32px); padding: 11px 15px; border-radius: 7px; background: var(--paper); color: var(--ink); font: 500 11px/1.3 var(--mono); transition: .22s; }
.toast.is-visible { opacity: 1; translate: -50% 0; }

@media (min-width: 860px) {
  .app-shell { display: grid; grid-template-columns: 1fr 480px; column-gap: 68px; align-items: start; }
  .topbar { grid-column: 1 / -1; }
  .hero { position: sticky; top: 80px; padding-top: 116px; }
  .hero h1 { font-size: clamp(62px, 7vw, 88px); }
  .phone { margin-top: 70px; }
  footer { grid-column: 2; }
}

@media (max-width: 520px) {
  .app-shell { padding-inline: 10px; }
  .topbar { padding-inline: 8px; min-height: 68px; }
  .brand { font-size: 21px; }
  .freeforall { font-size: 8px; }
  .hero { padding: 39px 8px 28px; }
  .hero h1 { font-size: clamp(39px, 12.2vw, 61px); }
  .hero h1 span { display: inline-block; font-size: .8em; letter-spacing: -.055em; }
  .hero-copy { font-size: 15px; margin-top: 20px; }
  .phone { border-radius: 31px; padding: 7px; }
  .screen { border-radius: 24px; min-height: 718px; }
  .panel { padding: 38px 13px 110px; min-height: 718px; }
  .scanner { height: 338px; }
  .face-shape { scale: .9; transform-origin: top center; }
  .hair { scale: .9; transform-origin: top center; }
  .score-line strong { font-size: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}