:root { --black:#060607; --white:#fff; --dim:#9c9c9f; --faint:#6a6a6e; --hair:rgba(255,255,255,.12); --hair-2:rgba(255,255,255,.06); }
  * { box-sizing:border-box; }
  html, body { margin:0; background:var(--black); color:var(--white); }
  body { font-family:Manrope,"Helvetica Neue",Helvetica,Arial,sans-serif; -webkit-font-smoothing:antialiased; min-height:100svh; display:grid; place-items:start center; position:relative; overflow-x:hidden; }
  a { color:inherit; text-decoration:none; }
  .mono { font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
  .plate { position:fixed; inset:0; z-index:0; overflow:hidden; }
  .plate video, .plate img { width:100%; height:100%; object-fit:cover; display:block; opacity:.38; transform:scale(1.04); }
  .plate::after { content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(6,6,7,.55), rgba(6,6,7,.4) 30%, rgba(6,6,7,.93) 75%, #060607); }
  .card { position:relative; z-index:1; width:min(540px, 100%); padding:max(3rem, env(safe-area-inset-top) + 2.5rem) 1.25rem max(2rem, env(safe-area-inset-bottom) + 1.5rem); display:grid; gap:1rem; justify-items:center; }
  .avatar { width:84px; height:84px; border-radius:50%; border:1px solid var(--hair); background:rgba(255,255,255,.06); backdrop-filter:blur(14px); display:grid; place-items:center; animation:in .7s cubic-bezier(.16,1,.3,1) both; }
  .avatar img { width:56px; height:56px; }
  h1 { margin:.2rem 0 0; font-size:1.7rem; font-weight:800; letter-spacing:-.04em; line-height:1; text-align:center; animation:in .7s .05s cubic-bezier(.16,1,.3,1) both; }
  .tagline { margin:-.3rem 0 0; text-align:center; font-size:1.05rem; font-weight:600; letter-spacing:-.01em; animation:in .7s .08s cubic-bezier(.16,1,.3,1) both; }
  .subline { margin:-.6rem 0 0; animation:in .7s .1s cubic-bezier(.16,1,.3,1) both; }
  .socials { display:flex; flex-wrap:wrap; justify-content:center; gap:.45rem; animation:in .7s .12s cubic-bezier(.16,1,.3,1) both; }
  .socials a { width:44px; height:44px; border-radius:50%; border:1px solid var(--hair); background:rgba(255,255,255,.06); backdrop-filter:blur(14px); display:grid; place-items:center; transition:background .2s, transform .25s; }
  .socials a:hover { background:var(--white); color:var(--black); transform:translateY(-2px); }
  .socials svg { width:20px; height:20px; fill:currentColor; }
  .badge { display:inline-flex; align-items:center; gap:.6rem; padding:.5rem .9rem .5rem .6rem; border-radius:999px; border:1px solid var(--hair); background:rgba(255,255,255,.06); backdrop-filter:blur(14px); animation:in .7s .14s cubic-bezier(.16,1,.3,1) both; }
  .badge .g { width:22px; height:22px; border-radius:50%; background:#fff; display:grid; place-items:center; }
  .badge .g svg { width:13px; height:13px; }
  .badge b { display:block; font-size:.8125rem; font-weight:700; letter-spacing:-.01em; }
  .section { width:100%; display:grid; gap:.6rem; margin-top:.5rem; }
  .section h2 { margin:.6rem 0 .1rem; text-align:center; font-size:1.05rem; font-weight:800; letter-spacing:-.02em; animation:in .7s cubic-bezier(.16,1,.3,1) both; }
  .link { display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:.85rem; padding:.7rem .9rem .7rem .7rem; border-radius:16px; border:1px solid var(--hair); background:rgba(255,255,255,.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s, border-color .2s; animation:in .7s cubic-bezier(.16,1,.3,1) both; }
  .link:hover, .link:focus-visible { transform:translateY(-2px) scale(1.01); background:rgba(255,255,255,.11); border-color:rgba(255,255,255,.22); outline:none; }
  .link:active { transform:scale(.99); }
  .link.featured { background:var(--white); color:var(--black); border-color:var(--white); }
  .link.featured:hover { background:#f0f0f0; }
  .link.featured .sub { color:#555; }
  .link.featured .ico { background:rgba(0,0,0,.08); }
  .ico { width:48px; height:48px; border-radius:12px; background:rgba(255,255,255,.08); display:grid; place-items:center; overflow:hidden; }
  .ico img { width:100%; height:100%; object-fit:cover; display:block; }
  .ico svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
  .ico svg.fill { fill:currentColor; stroke:none; }
  .txt { display:grid; gap:.15rem; min-width:0; }
  .txt b { font-size:1rem; font-weight:700; letter-spacing:-.02em; line-height:1.15; }
  .sub { font-size:.8125rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .arrow { color:var(--dim); font-size:1.1rem; }
  .link.featured .arrow { color:var(--black); }
  .hero { display:grid; gap:.7rem; padding:.6rem .6rem .8rem; border-radius:20px; border:1px solid var(--hair); background:rgba(255,255,255,.06); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); transition:transform .25s cubic-bezier(.16,1,.3,1), background .2s; animation:in .7s .18s cubic-bezier(.16,1,.3,1) both; }
  .hero:hover { transform:translateY(-2px); background:rgba(255,255,255,.1); }
  .hero .pic { position:relative; aspect-ratio:16 / 9; border-radius:14px; overflow:hidden; background:#111; }
  .hero .badge { position:absolute; left:.6rem; bottom:.6rem; animation:none; background:rgba(6,6,7,.55); border-color:rgba(255,255,255,.2); padding:.35rem .7rem .35rem .45rem; }
  .hero .badge b { font-size:.75rem; }
  .hero .badge .mono { font-size:.5rem; }
  .hero .pic img, .hero .pic video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.16,1,.3,1); }
  .hero:hover .pic img { transform:scale(1.04); }
  .hero b { text-align:center; font-size:1.05rem; font-weight:800; letter-spacing:-.01em; }
  .spot { position:relative; overflow:hidden; display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:center; padding:1rem 1rem 1rem 1rem; border-radius:20px; border:1px solid rgba(255,255,255,.18); background:#140a04; box-shadow:0 20px 60px -20px var(--accent, #ff7a1a); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .3s; animation:in .7s .2s cubic-bezier(.16,1,.3,1) both; }
  .spot::before { content:""; position:absolute; inset:-40%; background:radial-gradient(60% 60% at 25% 50%, var(--accent, #ff7a1a) 0%, rgba(255,122,26,.35) 35%, transparent 70%); filter:blur(30px); opacity:.85; animation:breathe 6s ease-in-out infinite alternate; }
  .spot::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%); transform:translateX(-120%); }
  .spot:hover { transform:translateY(-3px) scale(1.01); box-shadow:0 26px 70px -18px var(--accent, #ff7a1a); }
  .spot:hover::after { animation:shine .9s ease forwards; }
  .spot > * { position:relative; }
  .spot .logo { width:92px; height:92px; border-radius:22px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.15); }
  .spot .logo img { width:100%; height:100%; object-fit:cover; display:block; }
  .spot .body { display:grid; gap:.35rem; min-width:0; }
  .spot .body b { font-size:1.35rem; font-weight:800; letter-spacing:-.03em; line-height:1; }
  .spot .body p { margin:0; font-size:.875rem; color:rgba(255,255,255,.82); line-height:1.35; }
  .spot .row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-top:.3rem; }
  .spot .price { display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .65rem; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); font-size:.75rem; font-weight:700; letter-spacing:.02em; }
  .spot .price i { width:6px; height:6px; border-radius:50%; background:#ffd28a; box-shadow:0 0 10px #ffb454; }
  .spot .go { display:inline-flex; align-items:center; gap:.4rem; padding:.55rem .95rem; border-radius:999px; background:var(--white); color:#1a0c03; font-size:.8125rem; font-weight:800; }
  @keyframes breathe { from { transform:scale(1) translate(0,0); opacity:.75; } to { transform:scale(1.12) translate(3%,-3%); opacity:1; } }
  @keyframes shine { to { transform:translateX(120%); } }
  @media (max-width:420px) { .spot { grid-template-columns:1fr; } .spot .logo { width:72px; height:72px; } }
  .quick { position:fixed; left:0; right:0; bottom:max(.9rem, env(safe-area-inset-bottom)); margin-inline:auto; width:max-content; max-width:calc(100% - 1.5rem); z-index:5; display:flex; gap:.3rem; padding:.3rem; border-radius:999px; border:1px solid rgba(255,255,255,.16); background:rgba(14,14,16,.78); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 18px 50px -14px rgba(0,0,0,.95); animation:pop .7s .4s cubic-bezier(.16,1,.3,1) both; }
  @keyframes pop { from { opacity:0; transform:translateY(16px) scale(.96); } to { opacity:1; transform:none; } }
  .quick a { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .95rem; border-radius:999px; font-size:.8125rem; font-weight:700; letter-spacing:-.01em; white-space:nowrap; transition:background .2s, color .2s; }
  .quick a svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .quick a:first-child { background:var(--white); color:var(--black); }
  .quick a:not(:first-child):hover { background:rgba(255,255,255,.12); }
  .quickpad { padding-bottom:4.2rem; }
  @media (max-width:380px) { .quick a span { display:none; } .quick a:first-child span { display:inline; } }
  .foot { margin-top:1rem; text-align:center; animation:in .7s .6s cubic-bezier(.16,1,.3,1) both; }
  .foot a:hover { color:var(--white); }
  @keyframes in { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  /* Phones: a shorter top so the WHY Circle card is on the first screen. */
  @media (max-width:430px) {
    .card { padding:max(1.6rem, env(safe-area-inset-top) + 1rem) 1rem max(2rem, env(safe-area-inset-bottom) + 1.5rem); gap:.7rem; }
    .avatar { width:56px; height:56px; } .avatar img { width:38px; height:38px; }
    h1 { font-size:1.35rem; margin:0; }
    .tagline { font-size:.9rem; margin-top:-.25rem; }
    .subline { display:none; }
    .socials { gap:.35rem; } .socials a { width:38px; height:38px; } .socials svg { width:17px; height:17px; }
    .section { gap:.5rem; margin-top:.3rem; }
    .section h2 { margin:.4rem 0 0; font-size:.95rem; }
    .hero { padding:.45rem .45rem .6rem; gap:.5rem; }
    .hero .pic { aspect-ratio:2 / 1; }
    .hero b { font-size:.95rem; }
    .spot { padding:.85rem; gap:.8rem; }
    .spot .logo { width:64px; height:64px; }
  }
  @media (prefers-reduced-motion: reduce) { * { animation:none !important; transition:none !important; } }