@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&family=Unbounded:wght@500;700;800&display=swap');

:root { --ink:#121212; --paper:#f5f1ea; --pink:#ff5d9e; --acid:#dcff45; --blue:#53a9ff; --violet:#8166ff; --line:rgba(18,18,18,.15); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#161616; color:var(--ink); font-family:'Manrope',Arial,sans-serif; }
button,input,summary { font:inherit; }
a:focus-visible,summary:focus-visible { outline:3px solid var(--acid); outline-offset:3px; }
main { min-height:100vh; position:relative; overflow:hidden; padding:32px 14px 70px; background:radial-gradient(circle at 10% 10%,rgba(255,93,158,.32),transparent 28%),radial-gradient(circle at 92% 34%,rgba(220,255,69,.18),transparent 27%),#161616; }
.ambient { width:380px; height:380px; position:fixed; border-radius:50%; filter:blur(100px); pointer-events:none; opacity:.2; }
.ambient-one { top:-180px; left:-160px; background:var(--pink); }
.ambient-two { right:-190px; bottom:5%; background:var(--acid); }
.phone-shell { width:min(100%,520px); position:relative; z-index:1; margin:0 auto; padding:12px; border-radius:38px; background:var(--paper); box-shadow:0 35px 120px rgba(0,0,0,.42); }
.profile { padding:16px 12px 26px; text-align:center; }
.avatar-wrap { width:92px; height:92px; position:relative; margin:0 auto 16px; }
.avatar { width:100%; height:100%; display:block; border:3px solid var(--ink); border-radius:28px; background:var(--acid); object-fit:cover; object-position:center 35%; transform:rotate(-4deg); }
.live-dot { position:absolute; right:-14px; bottom:2px; padding:6px 9px; border:2px solid var(--paper); border-radius:999px; background:var(--pink); color:white; font-size:9px; font-weight:900; letter-spacing:.08em; }
.handle { margin:0 0 8px; color:rgba(18,18,18,.52); font-size:11px; font-weight:750; }
h1,h2 { font-family:'Unbounded',Arial,sans-serif; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(35px,10vw,52px); line-height:.92; letter-spacing:-.07em; }
h1 em { color:var(--pink); font-style:normal; font-size:.54em; letter-spacing:-.03em; }
.intro { max-width:400px; margin:18px auto 0; color:rgba(18,18,18,.66); font-size:12px; line-height:1.65; }
.hero-card { height:340px; position:relative; overflow:hidden; border:3px solid var(--ink); border-radius:28px; background:#ddd; box-shadow:6px 7px 0 var(--ink); }
.hero-card img { width:100%; height:100%; display:block; object-fit:cover; }
.hero-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px; background:linear-gradient(180deg,rgba(0,0,0,.1),transparent 45%,rgba(0,0,0,.74)); color:#fff; }
.pill { align-self:flex-start; display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:999px; background:rgba(18,18,18,.74); font-size:9px; font-weight:800; text-transform:uppercase; backdrop-filter:blur(8px); }
.pill i { width:7px; height:7px; border-radius:50%; background:#ff3858; box-shadow:0 0 0 4px rgba(255,56,88,.22); }
.hero-overlay p { margin:0 0 3px; font-size:10px; opacity:.8; }
.hero-overlay strong { font-family:'Unbounded',Arial,sans-serif; font-size:18px; text-transform:uppercase; }
.link-stack { display:grid; gap:11px; padding:24px 2px; }
.social-link { min-height:76px; display:grid; grid-template-columns:48px 1fr auto; gap:13px; align-items:center; padding:10px 15px 10px 10px; border:3px solid var(--ink); border-radius:20px; color:var(--ink); text-decoration:none; box-shadow:4px 5px 0 var(--ink); transition:transform .18s ease,box-shadow .18s ease; }
.social-link:hover { transform:translate(3px,3px); box-shadow:1px 2px 0 var(--ink); }
.social-link.dark { background:var(--ink); color:#fff; box-shadow:4px 5px 0 var(--pink); }
.social-link.blue { background:var(--blue); }
.social-link.violet { background:var(--violet); color:#fff; }
.social-icon { width:48px; height:48px; display:grid; place-items:center; border:2px solid currentColor; border-radius:15px; font-family:'Unbounded',sans-serif; font-size:12px; font-weight:900; }
.social-copy { display:grid; gap:2px; }
.social-copy strong { font-size:14px; }
.social-copy small { font-size:9px; opacity:.68; }
.arrow { font-size:22px; }
.steps { margin:6px 0 16px; padding:34px 24px 30px; border:3px solid var(--ink); border-radius:28px; background:var(--acid); }
.section-kicker { margin:0 0 12px; font-size:9px; font-weight:850; letter-spacing:.14em; text-transform:uppercase; }
h2 { margin:0; font-size:29px; line-height:1.02; letter-spacing:-.05em; }
.steps ol { list-style:none; display:grid; gap:0; margin:28px 0 0; padding:0; }
.steps li { display:grid; grid-template-columns:36px 1fr; gap:12px; padding:16px 0; border-top:1px solid rgba(18,18,18,.2); }
.steps li>span { font-family:'Unbounded',sans-serif; font-size:11px; font-weight:900; }
.steps strong { display:block; margin-bottom:4px; font-size:13px; }
.steps li p { margin:0; color:rgba(18,18,18,.62); font-size:10px; line-height:1.5; }
.info-card { margin-top:16px; overflow:hidden; border:3px solid var(--ink); border-radius:28px; background:#fff; }
.info-heading { padding:23px 20px 18px; background:var(--pink); }
.info-heading span,.info-heading b { display:block; }
.info-heading span { margin-bottom:5px; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.info-heading b { font-family:'Unbounded',sans-serif; font-size:19px; text-transform:uppercase; }
details { padding:0 20px; border-top:1px solid var(--line); }
summary { display:flex; justify-content:space-between; gap:12px; padding:17px 0; cursor:pointer; font-size:12px; font-weight:800; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary span { font-size:18px; line-height:.8; transition:transform .2s ease; }
details[open] summary span { transform:rotate(45deg); }
details p { margin:-3px 0 18px; color:rgba(18,18,18,.62); font-size:10px; line-height:1.65; }
details p a { color:var(--ink); font-weight:800; text-decoration-thickness:1px; text-underline-offset:2px; }
.trust-card { display:grid; grid-template-columns:48px 1fr; gap:14px; margin:16px 0; padding:22px 20px; border-radius:24px; background:var(--ink); color:#fff; }
.trust-mark { width:46px; height:46px; display:grid; place-items:center; border-radius:50%; background:var(--acid); color:var(--ink); font-size:22px; font-weight:900; }
.trust-card strong { display:block; margin-bottom:5px; font-size:13px; }
.trust-card p { margin:0; color:rgba(255,255,255,.62); font-size:9px; line-height:1.55; }
footer { display:grid; gap:7px; padding:28px 14px 18px; text-align:center; }
footer strong { font-family:'Unbounded',sans-serif; font-size:13px; text-transform:uppercase; }
footer span { color:rgba(18,18,18,.48); font-size:9px; }

@media (max-width:560px) {
  main { padding:0; background:var(--paper); }
  .phone-shell { border-radius:0; box-shadow:none; }
  .hero-card { height:310px; }
}

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