@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-400.ttf) format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-600.ttf) format("truetype");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-700.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/fonts/PlusJakartaSans-800.ttf) format("truetype");font-weight:800;font-display:swap}

:root{
  --primary:#5B2EFF;--primary-soft:#EEE9FF;--lime:#D7FF3D;--ink:#16132B;
  --muted:#5E5A75;--on-dark:#B9B5D0;--ground:#F6F5FB;--surface:#FFFFFF;--line:#E6E3F2;
  --gutter:clamp(20px,5vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 "Plus Jakarta Sans",system-ui,sans-serif;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--primary)}
h1,h2,h3{margin:0;font-weight:800;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(32px,5vw,52px);letter-spacing:-.03em}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.25}
p{margin:0}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:var(--gutter)}
.lead{color:var(--muted);font-size:clamp(17px,2vw,20px);max-width:38em}

/* Header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:19px;color:var(--ink);text-decoration:none}
.brand img{width:34px;height:34px;border-radius:8px}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,64px);align-items:center;padding-block:clamp(24px,5vw,56px) clamp(56px,8vw,96px)}
.pill{display:inline-block;background:var(--lime);color:var(--ink);font-weight:700;font-size:14px;border-radius:999px;padding:7px 14px;margin-bottom:22px}
h1{font-size:clamp(44px,7.4vw,84px);letter-spacing:-.045em;line-height:.98}
.hero .lead{margin-top:24px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 26px;border-radius:16px;font-weight:700;font-size:16px;text-decoration:none}
.btn.primary{background:var(--primary);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.note{color:var(--muted);font-size:14px;margin-top:14px}
.stage{position:relative;isolation:isolate;justify-self:center;width:min(100%,340px);margin-inline:auto}
.phone{position:relative;z-index:1;background:var(--ink);padding:9px;border-radius:44px;box-shadow:0 30px 60px rgba(22,19,43,.22)}
.phone img{border-radius:36px;width:100%}
.float{position:absolute;z-index:0;width:66%;border-radius:12px;box-shadow:0 18px 36px rgba(22,19,43,.24)}
.float.a{left:-38%;top:12%;transform:rotate(-8deg)}
.float.b{right:-38%;bottom:14%;transform:rotate(6deg)}

/* Sections */
section{padding-block:clamp(56px,8vw,96px)}
.head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(32px,5vw,52px)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.step{background:var(--surface);border-radius:20px;padding:12px 12px 24px;display:flex;flex-direction:column;gap:12px}
.step .shot{background:var(--primary-soft);border-radius:14px;overflow:hidden;height:clamp(300px,34vw,400px);padding:24px 24px 0}
.step .shot img{width:min(100%,250px);margin-inline:auto;border-radius:20px 20px 0 0;box-shadow:0 10px 30px rgba(22,19,43,.16)}
.step h3,.step p{padding-inline:12px}
.step b{color:var(--primary);display:block;font-size:14px;margin-bottom:4px}
.step p{color:var(--muted);font-size:15px}

/* Gallery */
.gallery{background:var(--surface)}
.marquee{display:flex;flex-direction:column;gap:20px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.track{display:flex;width:max-content;animation:slide 70s linear infinite}
.row.reverse .track{animation-direction:reverse}
.marquee:hover .track{animation-play-state:paused}
.group{display:flex}
.group img{width:clamp(240px,27vw,340px);margin-right:20px;border-radius:12px;box-shadow:0 0 0 1px var(--line)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ID cards */
.id-cards .row.v .group img{width:clamp(170px,19vw,230px)}
.id-cards .channels{margin-top:clamp(32px,5vw,52px)}
.id-cards .channel{background:var(--ground)}

/* Channels */
.channels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.channels.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.channel{background:var(--surface);border-radius:20px;padding:24px}
.channel p{color:var(--muted);font-size:15px;margin-top:8px}
.channel i{display:block;width:12px;height:12px;border-radius:6px;background:var(--primary);margin-bottom:16px}

/* Promise */
.promise{background:var(--ink);color:#fff}
.promise .lead{color:var(--on-dark)}
.promise-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:48px;align-items:center}
.price{background:var(--lime);color:var(--ink);border-radius:28px;padding:36px}
.price strong{display:block;font-size:clamp(56px,8vw,84px);font-weight:800;letter-spacing:-.04em;line-height:1}
.price p{font-weight:600;margin-top:12px}
.price small{display:block;font-size:13px;margin-top:10px;font-weight:400}

/* FAQ */
.faq{max-width:780px}
details{background:var(--surface);border-radius:16px;padding:18px 22px;margin-bottom:10px}
summary{font-weight:700;cursor:pointer}
details p{color:var(--muted);margin-top:10px;font-size:16px}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:32px;color:var(--muted);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 20px}
footer a{color:var(--ink);font-weight:600;text-decoration:none}

/* Text pages */
.doc{max-width:760px;padding-block:32px 80px}
.doc h1{font-size:clamp(36px,6vw,56px);letter-spacing:-.035em;margin-bottom:12px}
.doc h2{font-size:22px;letter-spacing:-.01em;margin:34px 0 8px}
.doc p,.doc li{color:var(--muted)}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px}
.doc .date{font-size:14px}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .stage{width:min(72%,320px);margin-top:12px}
  .steps{grid-template-columns:minmax(0,1fr)}
  .step .shot{height:340px}
  .channels,.channels.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promise-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .channels,.channels.three{grid-template-columns:minmax(0,1fr)}
  .float.a{left:-24%}
  .float.b{right:-24%}
  .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .track{animation:none}
  .row{overflow-x:auto}
  .group[aria-hidden]{display:none}
}