:root {
      color-scheme: dark;
      --bg: #080608;
      --surface: #171017;
      --surface-2: #231624;
      --ink: #fff8fb;
      --muted: #d1c1cb;
      --line: rgba(255,255,255,.15);
      --brand: #e52d6e;
      --brand-2: #8b51a8;
      --coral: #f2764f;
      --gold: #f6be27;
      --cyan: #25b7d3;
      --deep: #080608;
      --white: #fffafa;
      --shadow: 0 30px 80px rgba(0,0,0,.48);
      --radius: 30px;
    }
    @media (prefers-color-scheme: light) {
      :root {
        --bg: #100a10;
        --surface: #1d121c;
        --surface-2: #2a1928;
        --ink: #fff9fc;
        --muted: #d8c7d1;
        --line: rgba(255,255,255,.16);
        --deep: #080608;
        --shadow: 0 30px 80px rgba(0,0,0,.42);
      }
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 8% 4%, rgba(229,45,110,.20), transparent 28rem),
        radial-gradient(circle at 92% 20%, rgba(139,81,168,.20), transparent 34rem),
        radial-gradient(circle at 46% 62%, rgba(242,118,79,.10), transparent 38rem),
        var(--bg);
      color: var(--ink);
      font-family: "Manrope", sans-serif;
      line-height: 1.55;
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 99;
      opacity: .035;
      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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
    }
    a { color: inherit; }
    button, a { -webkit-tap-highlight-color: transparent; }
    img { max-width: 100%; display: block; }
    .wrap { width: min(1160px, calc(100% - 40px)); margin-inline: auto; }
    .nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      min-height: 72px;
      padding-top: max(8px, env(safe-area-inset-top));
      position: relative;
      z-index: 20;
    }
    .nav a {
      text-decoration: none;
      font-size: .86rem;
      font-weight: 700;
      color: var(--muted);
      padding: 10px 14px;
      border-radius: 999px;
      transition: color .2s ease, background .2s ease;
    }
    .nav a:hover, .nav a:focus-visible { color: var(--ink); background: var(--surface-2); outline: none; }
    .nav .nav-cta { color: var(--white); background:linear-gradient(120deg,var(--brand),var(--brand-2)); box-shadow:0 8px 28px rgba(229,45,110,.28); }
    .nav .nav-cta:hover, .nav .nav-cta:focus-visible { color:white; background:linear-gradient(120deg,var(--coral),var(--brand)); }
    .nav a { min-height:44px; display:inline-flex; align-items:center; }
    .nav::after { content:""; position:absolute; left:12%; right:12%; bottom:0; height:1px; background:linear-gradient(90deg,transparent,var(--brand),var(--coral),var(--brand-2),transparent); opacity:.7; }

    .hero {
      min-height: calc(100svh - 72px);
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      align-items: center;
      gap: clamp(40px, 7vw, 100px);
      padding-block: 56px 100px;
      position: relative;
    }
    .hero-copy { position: relative; z-index: 2; }
    .hero-brand {
      width:min(430px,82vw); display:flex; align-items:center; gap:15px; margin:0 0 25px;
      position:relative; isolation:isolate; perspective:900px;
    }
    .hero-brand::before {
      content:""; position:absolute; z-index:-1; left:-35px; top:50%; width:260px; height:105px;
      transform:translateY(-50%) scaleX(.15); transform-origin:left; opacity:0;
      background:radial-gradient(ellipse,rgba(229,45,110,.34),rgba(139,81,168,.12) 48%,transparent 72%);
      filter:blur(14px); animation:brandAura 1.4s .15s cubic-bezier(.22,1,.36,1) forwards;
    }
    .hero-brand-icon {
      display:block; width:74px; height:74px; flex:0 0 74px; border-radius:50%;
      background-image:url("../images/wowmet_logo_icon.jpg"); background-size:cover; background-position:center; background-repeat:no-repeat;
      box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 48px rgba(229,45,110,.28);
      opacity:1; transform:none; filter:none; animation:none;
    }
    .hero-wordmark-reveal {
      position:relative; flex:1; overflow:hidden; padding:10px 0 12px; transform-style:preserve-3d;
    }
    .hero-wordmark {
      width:100%; height:auto; object-fit:contain; opacity:0;
      clip-path:inset(0 100% 0 0); transform:translate3d(-34px,0,-100px) rotateX(-25deg);
      filter:blur(10px); animation:brandWordmarkEntrance 1.2s .55s cubic-bezier(.16,1,.3,1) forwards;
    }
    .hero-wordmark-reveal::after {
      content:""; position:absolute; top:4px; bottom:5px; width:70px; left:-90px; opacity:0;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent); filter:blur(5px);
      transform:skewX(-18deg); animation:brandLightSweep .9s 1.25s ease-out forwards;
    }
    .hero-brand-line {
      position:absolute; left:89px; right:0; bottom:0; height:1px; transform:scaleX(0); transform-origin:left; opacity:0;
      background:linear-gradient(90deg,var(--brand),var(--coral),var(--brand-2),transparent);
      box-shadow:0 0 14px rgba(229,45,110,.65); animation:brandLine 1s .82s cubic-bezier(.22,1,.36,1) forwards;
    }
    @keyframes brandAura { to { opacity:1; transform:translateY(-50%) scaleX(1); } }
    @keyframes brandWordmarkEntrance {
      0% { opacity:0; clip-path:inset(0 100% 0 0); transform:translate3d(-34px,0,-100px) rotateX(-25deg); filter:blur(10px); }
      100% { opacity:1; clip-path:inset(0 0 0 0); transform:translate3d(0,0,0) rotateX(0); filter:blur(0); }
    }
    @keyframes brandLightSweep { 0% { left:-90px; opacity:0; } 25% { opacity:.88; } 100% { left:110%; opacity:0; } }
    @keyframes brandLine { to { opacity:.85; transform:scaleX(1); } }
    .live-line { display:flex; align-items:center; gap:10px; color: var(--muted); font-size:.82rem; font-weight:700; letter-spacing:.03em; opacity:0; animation:heroCopyIn .7s 1.25s ease forwards; }
    .hero-copy h1 { opacity:0; transform:translateY(26px); animation:heroCopyIn .85s 1.4s cubic-bezier(.22,1,.36,1) forwards; }
    .hero-copy > p,.hero-copy > .micro-note { opacity:0; transform:translateY(20px); animation:heroCopyIn .75s cubic-bezier(.22,1,.36,1) forwards; }
    .hero-copy > p { animation-delay:1.58s; }
    .hero-copy > .store-row { transform:translateY(20px); animation:heroStoreIn .75s 1.72s cubic-bezier(.22,1,.36,1) both; }
    .hero-copy > .micro-note { animation-delay:1.84s; }
    @keyframes heroCopyIn { to { opacity:1; transform:translateY(0); } }
    @keyframes heroStoreIn { from { transform:translateY(20px); } to { transform:translateY(0); } }
    .pulse-dot { width:9px; height:9px; border-radius:50%; background:var(--brand); box-shadow: 0 0 0 0 rgba(229,45,110,.45); animation: ping 2.3s infinite; }
    @keyframes ping { 0%{box-shadow:0 0 0 0 rgba(229,45,110,.45)} 70%{box-shadow:0 0 0 10px rgba(229,45,110,0)} 100%{box-shadow:0 0 0 0 rgba(229,45,110,0)} }
    h1, h2, h3 { font-family: "Baloo 2", sans-serif; line-height: .98; margin: 0; letter-spacing: -.035em; }
    h1 { font-size: clamp(3.6rem, 7.6vw, 7.4rem); max-width: 8ch; margin-top: 26px; }
    .scribble { position: relative; display: inline-block; color: var(--brand); }
    .scribble::after { content:""; position:absolute; left:2%; right:0; height:7px; bottom:-2px; border-radius:100%; background:linear-gradient(90deg,var(--coral),var(--brand),var(--brand-2)); transform:rotate(-1deg) scaleX(.05); transform-origin:left; animation: draw 1.1s .45s cubic-bezier(.22,1,.36,1) forwards; }
    @keyframes draw { to { transform:rotate(-1deg) scaleX(1); } }
    .hero-copy > p { max-width: 590px; font-size: clamp(1rem, 1.35vw, 1.18rem); color: var(--muted); margin: 30px 0; }
    .store-row { display:flex; gap:12px; flex-wrap:wrap; }
    .store-btn {
      display:flex; align-items:center; gap:11px; min-height:58px; padding:9px 20px;
      border-radius:18px; text-decoration:none; background:var(--deep); color:#fff; border:1px solid rgba(255,255,255,.15);
      box-shadow:0 12px 24px rgba(0,0,0,.16); transition:transform .2s ease, box-shadow .2s ease;
    }
    .store-btn:hover { transform:translateY(-3px); box-shadow:0 18px 30px rgba(0,0,0,.24); }
    .store-btn svg { width:26px; height:26px; flex:0 0 auto; }
    .store-btn small { display:block; font-size:.61rem; line-height:1; opacity:.72; text-transform:uppercase; letter-spacing:.08em; }
    .store-btn strong { display:block; font-size:.98rem; line-height:1.3; }
    .micro-note { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:.78rem; margin-top:22px; }
    .micro-note span::before { content:""; display:inline-block; width:5px; height:5px; margin:0 8px 2px 0; border-radius:50%; background:var(--brand); }

    .hero-stage { min-height:680px; display:grid; place-items:center; position:relative; isolation:isolate; }
    .hero-stage::before { content:""; position:absolute; width:min(590px,95%); aspect-ratio:1; border-radius:46% 54% 60% 40%; background:conic-gradient(from 35deg,rgba(229,45,110,.55),rgba(242,118,79,.34),rgba(139,81,168,.54),rgba(37,183,211,.28),rgba(229,45,110,.55)); filter:blur(36px); opacity:.48; animation:morphGlow 11s ease-in-out infinite alternate; }
    @keyframes morphGlow { to { transform:rotate(22deg) scale(.88); border-radius:58% 42% 38% 62%; } }
    .orbit { position:absolute; border:1px solid rgba(255,255,255,.18); border-radius:50%; animation: spin 22s linear infinite; }
    .orbit.one { width:610px; height:610px; }
    .orbit.two { width:450px; height:450px; animation-direction:reverse; animation-duration:17s; }
    .orbit::after { content:""; width:16px; height:16px; background:var(--coral); border:6px solid var(--bg); border-radius:50%; position:absolute; top:16%; right:9%; box-shadow:0 8px 24px rgba(242,118,79,.4); }
    .orbit.two::after { background:var(--brand-2); top:auto; bottom:7%; right:auto; left:19%; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .hero-photo {
      position:absolute; z-index:1; width:min(440px,82%); aspect-ratio:.84; left:-3%; top:12%;
      border-radius:42px; overflow:hidden; transform:rotate(-9deg) translateZ(-30px);
      box-shadow:0 45px 90px rgba(38,20,31,.3); border:1px solid rgba(255,255,255,.35);
    }
    .hero-photo::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(15,9,13,.7)); }
    .hero-photo img { width:100%; height:100%; object-fit:cover; }
    .hero-photo-label { position:absolute; z-index:2; left:24px; bottom:23px; color:white; font-size:.75rem; font-weight:700; letter-spacing:.03em; }
    .hero-photo-label strong { display:block; font:700 1.35rem "Baloo 2"; letter-spacing:-.02em; }
    .phone {
      width:min(355px,76vw); aspect-ratio:722 / 1600; border-radius:54px; padding:10px; background:#050405;
      border:1px solid rgba(255,255,255,.24); box-shadow:0 48px 120px rgba(229,45,110,.30), 0 18px 55px rgba(139,81,168,.34), inset 0 0 0 2px #292229;
      position:relative; z-index:3; transform:translateX(78px) rotate(3deg); transition:transform .25s ease-out;
    }
    .phone::after { content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px; background:linear-gradient(145deg,var(--coral),transparent 28%,var(--brand-2)); pointer-events:none; opacity:.72; -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; }
    .phone-screen { height:100%; border-radius:44px; overflow:hidden; position:relative; background:#000; color:white; }
    .phone-screen img { width:100%; height:100%; object-fit:cover; }
    .float-card { position:absolute; z-index:4; padding:14px 17px; border-radius:18px; background:var(--surface); box-shadow:var(--shadow); border:1px solid var(--line); font-size:.78rem; color:var(--muted); animation:bob 4.5s ease-in-out infinite; }
    .float-card strong { display:block; color:var(--ink); margin-bottom:2px; }
    .float-card.a { top:14%; left:-2%; transform:rotate(-5deg); }
    .float-card.b { right:-2%; bottom:16%; transform:rotate(4deg); animation-delay:-2s; }
    .float-card .signal { display:flex; gap:4px; margin-top:8px; }
    .signal i { width:22px; height:4px; border-radius:3px; background:var(--surface-2); }
    .signal i:nth-child(-n+3) { background:var(--brand); }
    @keyframes bob { 0%,100%{translate:0 0} 50%{translate:0 -13px} }

    .statement {
      background:linear-gradient(122deg,#120b12 0%,#1b0d19 48%,#21102d 100%);
      color:var(--white); padding:clamp(90px,11vw,145px) 0; position:relative; overflow:hidden;
      border-block:1px solid rgba(255,255,255,.11); isolation:isolate;
    }
    .statement::after {
      content:""; position:absolute; z-index:-1; width:760px; height:760px; border-radius:50%;
      left:-360px; top:-375px; background:radial-gradient(circle,rgba(246,190,39,.24),rgba(242,118,79,.11) 38%,transparent 70%);
    }
    .statement::before {
      content:""; position:absolute; z-index:-1; inset:0;
      background:repeating-linear-gradient(118deg,transparent 0 88px,rgba(255,255,255,.025) 89px 90px);
      -webkit-mask-image:linear-gradient(90deg,black,transparent 76%); mask-image:linear-gradient(90deg,black,transparent 76%);
    }
    .statement-grid { display:grid; grid-template-columns:minmax(150px,.42fr) minmax(0,1.58fr); gap:clamp(42px,8vw,110px); align-items:center; position:relative; }
    .idea-rail { min-height:380px; display:flex; align-items:center; justify-content:center; position:relative; }
    .idea-rail::before,.idea-rail::after { content:""; position:absolute; left:50%; width:1px; height:74px; background:linear-gradient(transparent,rgba(246,190,39,.72)); }
    .idea-rail::before { top:-14px; }
    .idea-rail::after { bottom:-14px; transform:rotate(180deg); }
    .idea-word {
      display:block; color:var(--gold); font:800 clamp(4.4rem,7vw,6.8rem)/.67 "Baloo 2",sans-serif; letter-spacing:-.05em;
      text-align:center; padding:.08em; text-shadow:0 18px 54px rgba(246,190,39,.16);
    }
    .idea-content { position:relative; padding:clamp(28px,4vw,52px) clamp(0px,2vw,24px) clamp(28px,4vw,52px) clamp(28px,4vw,56px); }
    .idea-content::before { content:""; position:absolute; left:0; top:0; width:72px; height:72px; border-left:2px solid var(--gold); border-top:2px solid var(--gold); opacity:.82; }
    .idea-content::after { content:"01 / WHY"; position:absolute; right:0; top:4px; color:rgba(255,255,255,.48); font-size:.68rem; font-weight:800; letter-spacing:.16em; }
    .section-no { color:var(--brand); font-weight:800; font-size:.78rem; letter-spacing:.12em; }
    .statement h2 { font-size:clamp(3rem,6vw,6.3rem); max-width:10.5ch; }
    .statement h2 em { color:var(--gold); font-style:normal; }
    .statement p { font-size:clamp(1.1rem,1.8vw,1.48rem); line-height:1.65; color:#d7cbd3; max-width:690px; margin:28px 0 0; }
    .statement p strong { color:white; }

    section.content { padding:120px 0; }
    .section-head { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; margin-bottom:65px; align-items:end; }
    .section-head h2 { font-size:clamp(2.6rem,5vw,5rem); }
    .section-head p { color:var(--muted); max-width:580px; margin:0; font-size:1.04rem; }
    .steps { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
    .step { padding:35px 34px 25px 0; position:relative; }
    .step + .step { border-left:1px solid var(--line); padding-left:34px; }
    .step-number { font-family:"Baloo 2"; font-weight:800; font-size:4.6rem; line-height:1; color:var(--surface-2); -webkit-text-stroke:1px var(--line); }
    .step h3 { font-size:1.65rem; line-height:1.08; margin:18px 0 12px; }
    .step p { color:var(--muted); margin:0; font-size:.94rem; }
    .step-line { width:58px; height:5px; background:linear-gradient(90deg,var(--brand),var(--coral)); margin-top:26px; border-radius:3px; transform-origin:left; transform:scaleX(.2); transition:transform .8s .2s ease; box-shadow:0 0 20px rgba(229,45,110,.4); }
    .step:nth-child(2) .step-line { background:linear-gradient(90deg,var(--coral),var(--gold)); box-shadow:0 0 20px rgba(242,118,79,.35); }
    .step:nth-child(3) .step-line { background:linear-gradient(90deg,var(--brand-2),var(--cyan)); box-shadow:0 0 20px rgba(139,81,168,.4); }
    .step.revealed .step-line { transform:scaleX(1); }
    .hangout-types { display:flex; flex-wrap:wrap; gap:9px; margin-top:42px; }
    .hangout-types span { padding:10px 14px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--surface); font-size:.78rem; font-weight:700; }
    .hangout-types span:nth-child(3n+1) { color:var(--brand); }
    .hangout-types span:nth-child(3n+2) { color:var(--brand-2); }
    .hangout-types span:nth-child(3n) { color:#a36b00; }

    .playground { padding:30px 0 120px; }
    .play-panel { display:grid; grid-template-columns:.95fr 1.05fr; min-height:560px; background:linear-gradient(145deg,rgba(229,45,110,.12),var(--surface) 42%,rgba(139,81,168,.13)); border-radius:42px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(229,45,110,.3); }
    .play-controls { padding:clamp(32px,5vw,70px); display:flex; flex-direction:column; justify-content:center; }
    .play-controls h2 { font-size:clamp(2.5rem,4vw,4.6rem); max-width:8ch; }
    .play-controls > p { color:var(--muted); max-width:450px; margin:18px 0 30px; }
    .control-label { font-size:.75rem; font-weight:800; margin:20px 0 10px; display:block; }
    .choice-row { display:flex; flex-wrap:wrap; gap:8px; }
    .choice { border:1px solid var(--line); background:var(--bg); color:var(--ink); padding:10px 13px; border-radius:999px; font:700 .78rem "Manrope"; cursor:pointer; transition:.2s ease; }
    .choice:hover { border-color:var(--brand); }
    .choice { min-height:44px; }
    .choice.active { color:white; background:linear-gradient(120deg,var(--brand),var(--brand-2)); border-color:transparent; box-shadow:0 8px 22px rgba(229,45,110,.24); }
    .preview-stage { background:radial-gradient(circle at 25% 18%,rgba(242,118,79,.32),transparent 38%),radial-gradient(circle at 82% 80%,rgba(139,81,168,.38),transparent 45%),#130b12; color:white; display:grid; place-items:center; padding:44px; position:relative; overflow:hidden; }
    .preview-stage::before, .preview-stage::after { content:""; position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,.15); width:500px; height:500px; animation:spin 24s linear infinite; }
    .preview-stage::after { width:310px; height:310px; }
    .post-card { position:relative; z-index:2; width:min(100%,420px); background:#241d23; border:1px solid rgba(255,255,255,.1); padding:28px; border-radius:28px; box-shadow:0 24px 50px rgba(0,0,0,.35); transition:transform .35s ease, opacity .25s ease; }
    .post-card.bump { animation:cardBump .38s ease; }
    @keyframes cardBump { 45%{transform:scale(.97) rotate(-1deg); opacity:.8} }
    .post-top { display:flex; justify-content:space-between; gap:20px; align-items:flex-start; }
    .post-top small { color:#aea4ac; display:block; margin-bottom:3px; }
    .post-top strong { font-family:"Baloo 2"; font-size:1.45rem; }
    .status-ring { width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:rgba(229,45,110,.14); color:#ff79aa; }
    .status-ring svg { width:20px; }
    .post-activity { margin:28px 0 10px; font-size:1.9rem; font-family:"Baloo 2"; font-weight:700; }
    .post-activity span { color:#ff75a7; }
    .post-place { color:#c4bbc2; font-size:.9rem; }
    .post-ticket { margin-top:24px; display:grid; grid-template-columns:90px 1fr; overflow:hidden; background:#161216; border-radius:17px; }
    .post-ticket .day { background:var(--gold); color:#181317; padding:15px; text-align:center; font-size:.7rem; font-weight:700; }
    .post-ticket .day strong { display:block; font-family:"Baloo 2"; font-size:2rem; line-height:.8; }
    .post-ticket .time { padding:15px; display:flex; flex-direction:column; justify-content:center; font-weight:700; }
    .post-ticket .time small { color:#a79da5; font-weight:500; }

    .trust {
      background:#0c080d; padding:clamp(76px,8vw,100px) 0; border-block:1px solid rgba(255,255,255,.1);
      position:relative; overflow:hidden; isolation:isolate;
    }
    .trust::before {
      content:""; position:absolute; z-index:-1; inset:0;
      background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),radial-gradient(circle at 76% 48%,rgba(139,81,168,.25),transparent 32%),radial-gradient(circle at 22% 12%,rgba(229,45,110,.14),transparent 24%);
      background-size:58px 58px,58px 58px,auto,auto; -webkit-mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent); mask-image:linear-gradient(90deg,transparent,black 14%,black 86%,transparent);
    }
    .trust-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr); gap:clamp(55px,8vw,108px); align-items:center; }
    .trust-copy h2 { font-size:clamp(3.2rem,5.6vw,6rem); max-width:9ch; }
    .trust-copy > p { color:var(--muted); max-width:570px; margin:25px 0 42px; font-size:1.02rem; }
    .trust-list { display:grid; gap:0; counter-reset:trust-step; border-bottom:1px solid var(--line); }
    .trust-item {
      counter-increment:trust-step; display:grid; grid-template-columns:48px minmax(0,1fr); gap:17px; align-items:start;
      padding:15px 12px 15px 0; border-top:1px solid var(--line); position:relative; overflow:hidden;
    }
    .trust-item::after {
      content:""; position:absolute; inset:auto 0 0; height:1px; background:linear-gradient(90deg,var(--brand),var(--coral),transparent 78%);
      transform:scaleX(0); transform-origin:left; transition:transform 1s .18s cubic-bezier(.16,1,.3,1);
    }
    .trust-item.revealed::after { transform:scaleX(1); }
    .trust-icon {
      width:40px; height:40px; border-radius:12px; background:transparent; color:#ff76a7; display:grid; place-items:center;
      border:1px solid rgba(229,45,110,.42); box-shadow:inset 0 0 18px rgba(229,45,110,.08); position:relative;
    }
    .trust-icon::after { content:"0" counter(trust-step); position:absolute; left:calc(100% + 10px); top:-10px; font:800 .58rem "Manrope"; letter-spacing:.08em; color:rgba(255,255,255,.35); }
    .trust-icon svg { width:18px; height:18px; }
    .trust-item.revealed .trust-icon { animation:trustPulse .8s .28s cubic-bezier(.16,1,.3,1) both; }
    @keyframes trustPulse { 0%{transform:scale(.72) rotate(-9deg); box-shadow:0 0 0 0 rgba(229,45,110,.4)} 60%{box-shadow:0 0 0 12px rgba(229,45,110,0)} 100%{transform:scale(1) rotate(0); box-shadow:inset 0 0 18px rgba(229,45,110,.08)} }
    .trust-item strong { display:block; margin:0 0 4px 10px; color:var(--ink); font-size:.96rem; }
    .trust-item > div > span { display:block; margin-left:10px; color:var(--muted); font-size:.83rem; line-height:1.55; }
    .safety-visual { min-height:560px; position:relative; display:grid; place-items:center; perspective:1000px; }
    .safety-visual::before {
      content:"1:1  /  PUBLIC  /  APPROVED"; position:absolute; top:4%; left:50%; transform:translateX(-50%);
      color:rgba(255,255,255,.42); font-size:.62rem; font-weight:800; letter-spacing:.2em; white-space:nowrap;
    }
    .safety-ring {
      width:min(470px,82vw); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; position:relative;
      animation:safetyFloat 6s ease-in-out infinite; box-shadow:0 42px 110px rgba(0,0,0,.54),0 0 90px rgba(139,81,168,.18); transform-style:preserve-3d;
    }
    .safety-ring::before {
      content:""; position:absolute; inset:-11%; border-radius:50%;
      background:conic-gradient(from 20deg,transparent 0 13%,var(--gold) 13% 15%,transparent 15% 47%,var(--brand) 47% 52%,transparent 52% 78%,var(--brand-2) 78% 81%,transparent 81%);
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
      animation:safetyOrbit 13s linear infinite; opacity:.9;
    }
    .safety-ring::after { content:""; position:absolute; inset:8%; border:1px solid rgba(255,255,255,.23); border-radius:50%; box-shadow:0 0 0 22px rgba(255,255,255,.025); }
    .safety-ring img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:50%; filter:saturate(.78) contrast(1.08); }
    .safety-ring .photo-shade {
      position:absolute; z-index:1; inset:0; border-radius:50%; overflow:hidden;
      background:linear-gradient(135deg,rgba(229,45,110,.06),rgba(8,5,9,.62));
    }
    .safety-ring .photo-shade::after {
      content:""; position:absolute; left:8%; right:8%; height:16%; top:-18%;
      background:linear-gradient(180deg,transparent,rgba(246,190,39,.18),transparent); filter:blur(2px);
      animation:safetyScan 4.8s ease-in-out infinite;
    }
    @keyframes safetyFloat { 50%{transform:translateY(-12px) rotateY(2deg)} }
    @keyframes safetyOrbit { to{transform:rotate(360deg)} }
    @keyframes safetyScan { 45%,55%{top:102%} 100%{top:102%} }
    .shield { width:90px; position:relative; z-index:2; color:white; filter:drop-shadow(0 12px 18px rgba(0,0,0,.44)); }
    .safe-chip {
      position:absolute; z-index:4; background:#161018; color:var(--ink); border:1px solid rgba(255,255,255,.16);
      padding:12px 17px; border-radius:12px; font-size:.72rem; font-weight:800; letter-spacing:.02em;
      box-shadow:0 16px 35px rgba(0,0,0,.38); animation:chipDrift 5s ease-in-out infinite;
    }
    .safe-chip::before { content:""; display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:8px; background:var(--gold); box-shadow:0 0 12px rgba(246,190,39,.65); }
    .safe-chip.one { top:15%; right:-1%; }
    .safe-chip.two { left:-2%; bottom:28%; animation-delay:-1.7s; }
    .safe-chip.three { right:6%; bottom:8%; animation-delay:-3.1s; }
    @keyframes chipDrift { 50%{transform:translateY(-8px)} }

    .wowspots { padding:clamp(76px,8vw,96px) 0; }
    .venue-board { background:linear-gradient(128deg,#35101f 0%,#160a18 48%,#291648 100%); color:var(--white); padding:clamp(35px,7vw,90px); border-radius:44px; position:relative; overflow:hidden; border:1px solid rgba(242,118,79,.26); box-shadow:0 35px 90px rgba(88,19,56,.28); }
    .venue-board::after { content:""; position:absolute; width:360px; height:360px; border-radius:50%; border:70px solid rgba(229,45,110,.12); right:-90px; top:-100px; }
    .venue-board h2 { font-size:clamp(3rem,6vw,6rem); max-width:10ch; position:relative; z-index:2; }
    .venue-board p { color:#cbc0c9; max-width:610px; margin:24px 0 42px; position:relative; z-index:2; }
    .venue-flow { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; position:relative; z-index:2; }
    .venue-metric { padding:22px; border-top:1px solid rgba(255,255,255,.16); }
    .venue-metric strong { display:block; font-family:"Baloo 2"; font-size:2rem; color:#ff79a7; }
    .venue-metric span { color:#bdb3ba; font-size:.82rem; }
    .venue-link { display:inline-flex; align-items:center; gap:10px; color:white; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:7px; font-weight:700; position:relative; z-index:2; }

    .app-preview {
      height:320svh;
      padding:0;
      position:relative;
      overflow:visible;
    }
    .app-preview-sticky {
      min-height:100svh;
      position:sticky;
      top:0;
      display:grid;
      grid-template-columns:minmax(0,.82fr) minmax(360px,1.18fr);
      align-items:center;
      gap:clamp(42px,7vw,110px);
      padding-block:clamp(64px,9vh,100px);
    }
    .preview-copy { position:relative; z-index:8; }
    .preview-copy h2 { font-size:clamp(3rem,5.6vw,6rem); max-width:7.2ch; margin-top:15px; }
    .preview-copy p { color:var(--muted); max-width:470px; margin:24px 0 0; font-size:1.04rem; }
    .preview-progress { display:flex; align-items:center; gap:8px; margin-top:30px; }
    .preview-progress i { width:22px; height:3px; border-radius:3px; background:var(--line); transition:width .35s ease, background .35s ease; }
    .preview-progress i.active { width:44px; background:linear-gradient(90deg,var(--coral),var(--brand)); }
    .screens {
      height:min(78svh,790px);
      min-height:560px;
      position:relative;
      display:grid;
      place-items:center;
      perspective:1400px;
      isolation:isolate;
    }
    .screens::before {
      content:"";
      position:absolute;
      width:min(570px,92%);
      aspect-ratio:1;
      border-radius:50%;
      background:radial-gradient(circle,rgba(229,45,110,.25),rgba(139,81,168,.13) 42%,transparent 70%);
      filter:blur(18px);
      transform:translate(8%,2%);
    }
    .screen-frame {
      position:absolute;
      height:min(76svh,760px);
      width:auto;
      aspect-ratio:722 / 1600;
      margin:0;
      border-radius:clamp(26px,3vw,42px);
      overflow:hidden;
      box-shadow:0 34px 90px rgba(0,0,0,.58),0 0 0 1px rgba(255,255,255,.08);
      border:clamp(6px,.7vw,10px) solid #2b1320;
      background:var(--deep);
      transform-origin:20% 78%;
      will-change:transform,opacity;
      transition:box-shadow .25s ease;
    }
    .screen-frame:nth-child(2) { border-color:#45231a; }
    .screen-frame:nth-child(3) { border-color:#311944; }
    .screen-frame:nth-child(4) { border-color:#123945; }
    .screen-frame:nth-child(5) { border-color:#3d182d; }
    .screen-frame img { width:100%; height:100%; object-fit:cover; }

    .final { padding:clamp(90px,10vw,125px) 0; text-align:center; position:relative; }
    .final-faq { width:min(900px,100%); margin:34px auto 30px; display:grid; grid-template-columns:1fr 1fr; gap:0 26px; text-align:left; border-top:1px solid var(--line); }
    .final-faq details { border-bottom:1px solid var(--line); }
    .final-faq summary { list-style:none; cursor:pointer; padding:16px 34px 16px 0; font-weight:700; position:relative; }
    .final-faq summary::-webkit-details-marker { display:none; }
    .final-faq summary::after { content:"+"; position:absolute; right:4px; top:14px; color:var(--gold); font-size:1.2rem; }
    .final-faq details[open] summary::after { content:"−"; }
    .final-faq details p { color:var(--muted); font-size:.82rem; line-height:1.55; margin:0; padding:0 30px 16px 0; }

    .final::before { content:""; position:absolute; z-index:-1; inset:8% 10% 5%; border-radius:50%; background:radial-gradient(circle,rgba(229,45,110,.2),rgba(139,81,168,.11) 38%,transparent 72%); filter:blur(20px); }
    .final h2 { font-size:clamp(3.4rem,8vw,8rem); max-width:10ch; margin:auto; }
    .final p { color:var(--muted); max-width:540px; margin:26px auto 32px; }
    .final .store-row { justify-content:center; }
    .final-mark { width:76px; height:76px; object-fit:cover; border-radius:50%; margin:0 auto 28px; box-shadow:0 18px 40px rgba(229,45,110,.23); animation:bob 4s ease-in-out infinite; }
    .fineprint { margin-top:28px; color:var(--muted); font-size:.76rem; }

    .reveal { opacity:0; transform:translate3d(0,42px,0) scale(.985); transition:opacity .8s ease, transform .8s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0ms); will-change:opacity,transform; }
    .reveal.revealed { opacity:1; transform:translate3d(0,0,0) scale(1); }
    .section-no { color:#ff7da8; }
    .moment:nth-child(2n), .screen-frame:nth-child(2n) { --reveal-delay:90ms; }
    .moment:nth-child(3n), .screen-frame:nth-child(3n) { --reveal-delay:180ms; }

    .moments { padding:110px 0 0; }
    .moments-intro { display:flex; justify-content:space-between; gap:35px; align-items:end; margin-bottom:34px; }
    .moments-intro h2 { font-size:clamp(2.8rem,5vw,5rem); max-width:9ch; }
    .moments-intro p { max-width:500px; color:var(--muted); margin:0; }
    .moment-grid { display:grid; grid-template-columns:1.18fr .82fr; grid-template-rows:260px 260px; gap:16px; }
    .moment { position:relative; overflow:hidden; border-radius:30px; min-width:0; transform-style:preserve-3d; box-shadow:0 28px 65px rgba(42,20,34,.16); transition:transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease; }
    .moment:first-child { grid-row:1 / 3; transform:perspective(1100px) rotateY(4deg) rotateX(1deg); }
    .moment:nth-child(2) { transform:perspective(1100px) rotateY(-5deg) translateZ(8px); }
    .moment:nth-child(3) { transform:perspective(1100px) rotateY(-3deg) translateZ(15px); }
    .moment img { width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1); }
    .moment:hover { transform:perspective(1100px) rotateY(0) rotateX(0) translateY(-7px); box-shadow:0 38px 80px rgba(42,20,34,.23); }
    .moment:hover img { transform:scale(1.035); }
    .moment::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(10,7,10,.78)); }
    .moment figcaption { position:absolute; z-index:2; left:24px; bottom:20px; color:white; font:700 1rem "Manrope"; }
    .moment figcaption span { display:block; color:rgba(255,255,255,.72); font-size:.72rem; font-weight:500; margin-top:3px; }
    .idea-flow-bridge {
      display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:clamp(14px,3vw,34px);
      margin-top:clamp(46px,6vw,78px); padding:30px 0 12px; border-top:1px solid var(--line);
      color:var(--muted); position:relative;
    }
    .idea-flow-bridge::before {
      content:""; position:absolute; top:-2px; left:0; width:26%; height:3px;
      background:linear-gradient(90deg,var(--gold),var(--coral),var(--brand)); box-shadow:0 0 24px rgba(246,190,39,.22);
    }
    .idea-flow-bridge strong { color:var(--ink); font:800 clamp(1.15rem,2.2vw,1.75rem)/1 "Baloo 2"; letter-spacing:-.025em; }
    .idea-flow-bridge i { height:1px; background:linear-gradient(90deg,var(--brand),rgba(255,255,255,.16)); position:relative; }
    .idea-flow-bridge i::after { content:""; position:absolute; right:0; top:50%; width:7px; height:7px; border-radius:50%; background:var(--brand); transform:translateY(-50%); box-shadow:0 0 16px rgba(229,45,110,.6); }
    #how { padding-block:clamp(72px,8vw,96px); }
    #how .section-head { margin:clamp(38px,5vw,56px) 0 38px; }
    .how-gallery { display:grid; grid-template-columns:1.22fr .78fr .78fr; gap:12px; height:clamp(190px,23vw,270px); }
    .how-gallery .moment,.how-gallery .moment:first-child,.how-gallery .moment:nth-child(2),.how-gallery .moment:nth-child(3) { grid-row:auto; transform:none; border-radius:24px; }


    /* Refined kinetic typography and scroll polish */
    :root { --scroll-shift: 0px; }
    body { font-kerning:normal; text-rendering:optimizeLegibility; }
    h1, h2 { text-wrap:balance; }
    p { text-wrap:pretty; }
    main > section { position:relative; }
    .nav {
      width:min(680px,calc(100% - 40px)); margin-top:12px; min-height:58px; padding:6px 8px;
      border:1px solid rgba(255,255,255,.11); border-radius:999px;
      background:rgba(15,9,14,.76); box-shadow:0 18px 55px rgba(0,0,0,.22);
      backdrop-filter:blur(18px) saturate(135%); -webkit-backdrop-filter:blur(18px) saturate(135%);
    }
    .nav::after { left:10%; right:10%; bottom:-1px; }
    .hero { min-height:calc(100svh - 82px); padding-top:clamp(58px,8vw,105px); }
    .hero-copy h1 { line-height:.88; letter-spacing:-.055em; }
    .hero-copy > p { line-height:1.72; }
    .kinetic-ready { --kinetic-base:0ms; }
    .kinetic-word {
      display:inline-flex; overflow:hidden; vertical-align:bottom;
      margin:-.08em -.025em; padding:.08em .025em .11em;
    }
    .kinetic-inner {
      display:inline-block; opacity:1; filter:blur(0); transform:none;
      transform-origin:left bottom; will-change:transform,opacity,filter;
    }
    .kinetic-visible .kinetic-inner {
      animation:wordLift .9s cubic-bezier(.16,1,.3,1) both;
      animation-delay:calc(var(--kinetic-base) + (var(--word-index) * 58ms));
    }
    .hero-copy h1.kinetic-ready { opacity:1; transform:none; animation:none; --kinetic-base:180ms; }
    .hero-copy h1 .kinetic-inner { animation-duration:1.05s; }
    @keyframes wordLift {
      from { opacity:0; filter:blur(9px); transform:translate3d(0,112%,0) rotate(4deg); }
      to { opacity:1; filter:blur(0); transform:translate3d(0,0,0) rotate(0); }
    }
    .char-reveal { white-space:nowrap; }
    .kinetic-char { display:inline-block; opacity:1; filter:blur(0); transform:none; }
    .kinetic-visible .kinetic-char {
      animation:charLift .8s cubic-bezier(.16,1,.3,1) both;
      animation-delay:calc(620ms + (var(--char-index) * 38ms));
    }
    @keyframes charLift {
      from { opacity:0; filter:blur(8px); transform:translate3d(0,1em,0) rotate(8deg) scale(.82); }
      to { opacity:1; filter:blur(0); transform:translate3d(0,0,0) rotate(0) scale(1); }
    }
    .scribble::after { animation:none; }
    .kinetic-visible .scribble::after { animation:draw 1.1s 2.05s cubic-bezier(.22,1,.36,1) forwards; }
    .section-no {
      display:inline-flex; overflow:hidden; position:relative; padding-bottom:8px;
    }
    .section-no::after {
      content:""; position:absolute; left:0; bottom:1px; width:26px; height:2px;
      background:currentColor; transform:scaleX(0); transform-origin:left;
      transition:transform .75s .25s cubic-bezier(.16,1,.3,1);
    }
    .revealed .section-no::after, .section-no.revealed::after { transform:scaleX(1); }
    .statement h2, .section-head h2, .moments-intro h2, .play-controls h2,
    .trust-copy h2, .venue-board h2, .final h2 { letter-spacing:-.052em; }
    .statement h2 { line-height:.9; }
    .statement-grid > div, .section-head > div, .moments-intro > div { min-width:0; }
    .reveal { opacity:1; transform:none; transition:none; }
    .reveal.revealed { animation:revealUp .95s var(--reveal-delay,0ms) cubic-bezier(.16,1,.3,1) both; }
    .reveal[data-reveal="left"].revealed { animation-name:revealLeft; }
    .reveal[data-reveal="right"].revealed { animation-name:revealRight; }
    @keyframes revealUp {
      from { opacity:0; transform:translate3d(0,42px,0) scale(.985); }
      to { opacity:1; transform:translate3d(0,0,0) scale(1); }
    }
    @keyframes revealLeft {
      from { opacity:0; transform:translate3d(-44px,18px,0) scale(.985); }
      to { opacity:1; transform:translate3d(0,0,0) scale(1); }
    }
    @keyframes revealRight {
      from { opacity:0; transform:translate3d(44px,18px,0) scale(.985); }
      to { opacity:1; transform:translate3d(0,0,0) scale(1); }
    }
    .moment figcaption { overflow:hidden; }
    .moment figcaption, .screen-frame { transition-duration:.7s; transition-timing-function:cubic-bezier(.16,1,.3,1); }
    .moment::before {
      content:""; position:absolute; z-index:1; inset:0;
      background:linear-gradient(112deg,transparent 20%,rgba(255,255,255,.16) 48%,transparent 72%);
      transform:translateX(-130%); transition:transform 1.1s cubic-bezier(.16,1,.3,1);
    }
    .moment:hover::before { transform:translateX(130%); }
    .store-btn { position:relative; overflow:hidden; }
    .store-btn::after {
      content:""; position:absolute; inset:0; pointer-events:none;
      background:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.14),transparent 72%);
      transform:translateX(-120%); transition:transform .8s cubic-bezier(.16,1,.3,1);
    }
    .store-btn:hover::after, .store-btn:focus-visible::after { transform:translateX(120%); }
    .hero-stage { transform:translateY(calc(var(--scroll-shift) * .12)); }
    .statement::before { transform:translateY(calc(var(--scroll-shift) * -.08)); }

    @media (max-width: 920px) {
      .hero { grid-template-columns:1fr; text-align:center; padding-top:40px; }
      .hero-copy { display:flex; flex-direction:column; align-items:center; }
      h1 { max-width:9ch; }
      .hero-stage { min-height:620px; }
      .statement-grid { grid-template-columns:130px minmax(0,1fr); gap:36px; }
      .section-head,.trust-grid { grid-template-columns:1fr; gap:34px; }
      .section-head p { max-width:700px; }
      .safety-visual { min-height:520px; }
      .play-panel { grid-template-columns:1fr; }
      .play-controls h2 { max-width:none; }
      .preview-stage { min-height:560px; }
      .app-preview-sticky { grid-template-columns:minmax(0,.8fr) minmax(330px,1.2fr); gap:34px; }
      .preview-copy h2 { font-size:clamp(2.8rem,6vw,4.7rem); }
      .screens { min-height:520px; }
    }
    @media (max-width: 680px) {
      /* Belt-and-suspenders: animated decorations (orbit rings, drifting chips,
         rotating emblem) can momentarily extend past the viewport while
         animating. body already clips horizontally; this stops any mobile
         browser from turning that into sideways panning. overflow-x:clip
         (not hidden) so it never creates a scroll container. */
      html { overflow-x: clip; }
      .wrap { width:min(100% - 28px,1160px); }
      .hero-brand { width:min(355px,92vw); gap:12px; margin-bottom:22px; }
      .hero-brand-icon { width:54px; height:54px; flex-basis:54px; }
      .hero-brand-line { left:72px; }
      .nav { justify-content:flex-start; overflow:hidden; }
      .nav a { font-size:.74rem; padding:9px 10px; white-space:nowrap; }
      .nav a:nth-child(2) { display:none; }
      .nav .nav-cta { margin-left:auto; }
      .hero { padding-block:38px 78px; }
      h1 { font-size:clamp(3.4rem,18vw,5.3rem); }
      .hero-copy > p { font-size:.96rem; }
      .store-btn { flex:1 1 145px; justify-content:center; padding-inline:13px; }
      .micro-note { justify-content:center; }
      .hero-stage { min-height:560px; width:100%; transform:none; }
      .phone { width:min(270px,82vw); border-radius:43px; padding:8px; transform:translateX(10px) rotate(2deg); }
      .phone-screen { border-radius:35px; }
      .hero-photo { width:min(270px,78vw); left:-5%; top:15%; opacity:.62; transform:rotate(-8deg); }
      .orbit.one { width:min(460px, calc(100vw - 28px)); max-width:100%; height:auto; aspect-ratio:1; }
      .orbit.two { width:min(340px, calc((100vw - 28px) * .78)); max-width:78%; height:auto; aspect-ratio:1; }
      .float-card { font-size:.67rem; padding:11px 13px; }
      .float-card.a { left:-3%; top:12%; }
      .float-card.b { right:-2%; bottom:9%; }
      .statement, section.content, .trust, .wowspots { padding-block:84px; }
      .statement-grid { grid-template-columns:72px minmax(0,1fr); gap:18px; }
      .idea-rail { min-height:300px; }
      .idea-rail::before,.idea-rail::after { height:48px; }
      .idea-word { font-size:clamp(4.7rem,23vw,6.3rem); }
      .idea-content { padding:28px 0 28px 20px; }
      .idea-content::before { width:48px; height:48px; }
      .idea-content::after { font-size:.54rem; top:6px; }
      .statement h2,.section-head h2,.trust-copy h2 { font-size:clamp(2.65rem,13vw,4.4rem); }
      .statement p { font-size:.98rem; margin-top:20px; }
      .trust-copy h2 { max-width:11ch; overflow-wrap:break-word; }
      .trust-item { grid-template-columns:42px minmax(0,1fr); gap:12px; padding-right:0; }
      .trust-icon { width:38px; height:38px; }
      .moments { padding-top:84px; }
      .moments-intro { display:grid; gap:18px; }
      .idea-flow-bridge { gap:9px; margin-top:38px; padding-top:24px; }
      .idea-flow-bridge strong { font-size:1.02rem; }
      .idea-flow-bridge i::after { width:5px; height:5px; }
      #how { padding-top:56px; }
      .moments-intro h2 { max-width:10ch; }
      .moment-grid { grid-template-columns:1fr; grid-template-rows:360px 250px 250px; }
      .moment:first-child { grid-row:auto; }
      .moment,.moment:first-child,.moment:nth-child(2),.moment:nth-child(3) { border-radius:22px; transform:none; }
      .how-gallery { grid-template-columns:1.18fr .82fr; grid-template-rows:1fr 1fr; height:350px; gap:10px; }
      .how-gallery .moment:first-child { grid-row:1 / 3; }
      #how .section-head { margin:34px 0 24px; }
      .steps { grid-template-columns:1fr; }
      .step,.step + .step { padding:28px 0; border-left:0; border-bottom:1px solid var(--line); }
      .step-number { font-size:3.7rem; }
      .playground { padding-bottom:84px; }
      .play-panel { border-radius:28px; }
      .play-controls { padding:32px 24px; }
      .play-controls h2 { font-size:2.8rem; }
      .preview-stage { min-height:500px; padding:24px 16px; }
      .post-card { padding:22px; }
      .post-ticket { grid-template-columns:78px 1fr; }
      .safety-visual { min-height:470px; }
      .safe-chip.one { right:0; top:9%; }
      .safe-chip.two { left:0; bottom:19%; }
      .safe-chip.three { right:2%; bottom:2%; }
      .venue-board { border-radius:28px; }
      .venue-flow { grid-template-columns:1fr; }
      .venue-metric { padding:16px 0; }
      .app-preview { height:auto; padding-block:78px 90px; }
      .app-preview-sticky {
        min-height:auto; position:relative; top:auto; grid-template-columns:1fr;
        grid-template-rows:auto auto; align-content:start; gap:26px; padding-block:0;
      }
      .app-preview .preview-copy { text-align:center; }
      .app-preview .preview-copy h2 { font-size:clamp(2.65rem,13vw,4.2rem); max-width:8ch; margin-top:7px; margin-inline:auto; }
      .preview-copy p { font-size:.9rem; line-height:1.55; margin-top:10px; max-width:37ch; }
      .preview-progress { margin-top:14px; }
      .preview-progress i { width:16px; }
      .preview-progress i.active { width:34px; }
      .screens {
        width:100%; height:min(72svh,620px); min-height:500px; margin:0;
        display:grid; place-items:center; perspective:1000px; isolation:isolate;
        overflow:hidden; padding:10px;
        touch-action:pan-y;
      }
      .screens::before { width:min(440px,115%); left:4%; position:absolute; }
      .screen-frame {
        position:absolute; height:min(67svh,590px); max-width:78vw; border-width:6px; border-radius:27px;
        transform-origin:50% 90%; opacity:1 !important;
      }
      .screen-frame:nth-child(1) { transform:translateX(-8%) rotate(-4deg) scale(.96) !important; z-index:5 !important; }
      .screen-frame:nth-child(2) { transform:translateX(-4%) rotate(-2deg) scale(.94) !important; z-index:4 !important; }
      .screen-frame:nth-child(3) { transform:translateX(0) rotate(0) scale(.92) !important; z-index:3 !important; }
      .screen-frame:nth-child(4) { transform:translateX(4%) rotate(2deg) scale(.90) !important; z-index:2 !important; }
      .screen-frame:nth-child(5) { transform:translateX(8%) rotate(4deg) scale(.88) !important; z-index:1 !important; }
      .final-faq { grid-template-columns:1fr; margin-block:28px 26px; }
      .final { padding:82px 0 96px; }
    }
    @media (max-width: 390px) {
      .wrap { width:min(100% - 22px,1160px); }
      .hero-brand { width:min(320px,94vw); gap:10px; }
      .hero-brand-icon { width:46px; height:46px; flex-basis:46px; }
      .hero-brand-line { left:64px; }
      .nav a { padding-inline:8px; }
      .nav a:nth-child(3) { display:none; }
      .hero-stage { min-height:530px; }
      .phone { width:min(258px,82vw); transform:translateX(5px) rotate(2deg); }
      .hero-photo { width:240px; }
      .float-card.a { left:0; }
      .float-card.b { right:0; }
      .safe-chip { font-size:.69rem; padding:10px 12px; }
      .post-card { padding:19px; }
      .post-activity { font-size:1.55rem; }
    }
    /* Clarity pass: restore the original, compact hero and editorial moments grid. */
    body {
      background:
        radial-gradient(circle at 12% 0%, rgba(229,45,110,.10), transparent 30rem),
        radial-gradient(circle at 88% 28%, rgba(139,81,168,.08), transparent 34rem),
        var(--bg);
    }
    .phone { box-shadow:0 30px 70px rgba(0,0,0,.52),0 12px 36px rgba(229,45,110,.18),inset 0 0 0 2px #292229; }
    .hero-photo { box-shadow:0 28px 65px rgba(0,0,0,.34); }
    .app-preview { height:320svh; }
    .hero-brand {
      width:auto;
      max-width:min(330px,78vw);
      min-height:58px;
      gap:13px;
      margin:0 0 22px;
      perspective:none;
    }
    .hero-brand::before,
    .hero-brand-line,
    .hero-wordmark-reveal::after { display:none; }
    .hero-brand-icon {
      display:block;
      width:74px;
      height:74px;
      flex:0 0 74px;
      border-radius:50%;
      background-image:url("../images/wowmet_logo_icon.jpg");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 48px rgba(229,45,110,.28);
      opacity:1;
      transform:none;
      filter:none;
      animation:none;
    }
    .hero-wordmark-reveal {
      flex:0 1 auto;
      overflow:visible;
      padding:0;
      transform:none;
    }
    .hero-wordmark {
      width:auto;
      height:42px;
      max-width:245px;
      object-fit:contain;
      opacity:1;
      clip-path:none;
      transform:none;
      filter:none;
      animation:none;
    }
    .hero-copy h1,
    .hero-copy > p,
    .hero-copy > .micro-note,
    .hero-copy > .store-row,
    .live-line {
      opacity:1;
      transform:none;
      animation:none;
    }
    .kinetic-inner,
    .kinetic-char,
    .kinetic-visible .kinetic-inner,
    .kinetic-visible .kinetic-char {
      opacity:1;
      filter:none;
      transform:none;
      animation:none;
    }
    .scribble::after,
    .kinetic-visible .scribble::after {
      transform:rotate(-1deg) scaleX(1);
      animation:none;
    }
    .idea-rail { min-width:150px; min-height:380px; overflow:visible; }
    .idea-word { font-size:clamp(3.7rem,5vw,5rem); }
    .moments { padding:clamp(82px,9vw,112px) 0 0; }
    .moments-intro { margin-bottom:32px; }
    .moments-intro h2 { max-width:10ch; margin-top:12px; }
    .moment-grid { gap:14px; }
    .moment { background:var(--surface); }
    .moment img { opacity:1; visibility:visible; filter:none; }
    .moment::after { background:linear-gradient(180deg,transparent 48%,rgba(10,7,10,.72)); }
    #how { padding-top:clamp(84px,9vw,112px); }
    .nav { backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }

    @media (max-width:680px) {
      .hero-brand { max-width:min(285px,82vw); min-height:48px; gap:10px; }
      .hero-brand-icon { width:54px; height:54px; flex-basis:54px; }
      .hero-wordmark { height:34px; max-width:220px; }
      .statement-grid { grid-template-columns:88px minmax(0,1fr); gap:18px; }
      .idea-rail { min-width:88px; min-height:260px; }
      .idea-word { font-size:clamp(2.9rem,13vw,3.7rem); letter-spacing:-.04em; }
      .moments { padding-top:76px; }
      .moments-intro { gap:14px; margin-bottom:24px; }
      .moment-grid { grid-template-rows:330px 220px 220px; gap:12px; }
      #how { padding-top:76px; }
    }

    /* Correction pass: retain the original motion system while replacing the vertical IDEA treatment. */
    .idea-rail {
      min-width:190px;
      min-height:360px;
      justify-content:flex-start;
    }
    .idea-rail::before,
    .idea-rail::after { display:none; }
    .idea-emblem {
      width:190px;
      aspect-ratio:1;
      border-radius:50%;
      display:grid;
      place-content:center;
      position:relative;
      isolation:isolate;
      color:var(--white);
      background:radial-gradient(circle at 34% 28%,rgba(242,118,79,.22),rgba(229,45,110,.09) 45%,rgba(139,81,168,.13) 66%,transparent 68%);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 28px 70px rgba(0,0,0,.28);
    }
    .idea-emblem::before {
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:50%;
      background:conic-gradient(from 12deg,transparent 0 12%,var(--coral) 12% 17%,transparent 17% 43%,var(--brand) 43% 51%,transparent 51% 77%,var(--brand-2) 77% 82%,transparent 82%);
      -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
      mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 0);
      animation:ideaOrbit 16s linear infinite;
    }
    .idea-emblem::after {
      content:"";
      position:absolute;
      inset:17px;
      border:1px solid rgba(255,255,255,.13);
      border-radius:50%;
      z-index:-1;
    }
    .idea-kicker {
      display:block;
      margin:0 0 -3px 7px;
      color:#ff91b9;
      font:800 .7rem/1 "Manrope",sans-serif;
      letter-spacing:.2em;
      text-transform:uppercase;
    }
    .idea-word {
      color:var(--white);
      font:800 clamp(3rem,4.5vw,4.2rem)/.82 "Baloo 2",sans-serif;
      letter-spacing:-.055em;
      text-align:left;
      padding:0;
      text-shadow:0 18px 45px rgba(229,45,110,.24);
    }
    .idea-accent {
      display:block;
      width:58px;
      height:4px;
      margin:13px 0 0 7px;
      border-radius:3px;
      background:linear-gradient(90deg,var(--coral),var(--brand),var(--brand-2));
      box-shadow:0 0 18px rgba(229,45,110,.46);
      transform-origin:left;
      animation:ideaPulse 3.6s ease-in-out infinite;
    }
    @keyframes ideaOrbit { to { transform:rotate(360deg); } }
    @keyframes ideaPulse { 0%,100% { transform:scaleX(.55); opacity:.62; } 50% { transform:scaleX(1); opacity:1; } }

    @media (max-width:680px) {
      .statement-grid { grid-template-columns:1fr; gap:30px; }
      .idea-rail { min-width:0; min-height:auto; justify-content:flex-start; padding-left:8px; }
      .idea-emblem { width:158px; }
      .idea-word { font-size:3.2rem; }
      .idea-content { padding:30px 0 0; }
      .idea-content::after { top:5px; }

      .app-preview { height:auto; }
      .screens {
        display:flex !important;
        justify-content:flex-start;
        align-items:stretch;
        gap:16px;
        width:100%;
        height:min(69svh,590px);
        min-height:490px;
        overflow-x:auto;
        overflow-y:hidden;
        padding:10px max(11vw,34px) 22px;
        scroll-snap-type:x mandatory;
        scroll-padding-inline:max(11vw,34px);
        overscroll-behavior-x:contain;
        touch-action:pan-x pan-y;
        scrollbar-width:none;
      }
      .screens::-webkit-scrollbar { display:none; }
      .screens::before { position:absolute; pointer-events:none; }
      .screen-frame,
      .screen-frame:nth-child(1),
      .screen-frame:nth-child(2),
      .screen-frame:nth-child(3),
      .screen-frame:nth-child(4),
      .screen-frame:nth-child(5) {
        position:relative;
        inset:auto;
        flex:0 0 auto;
        height:100%;
        max-width:none;
        margin:0;
        transform:none !important;
        opacity:1 !important;
        z-index:1 !important;
        scroll-snap-align:center;
        scroll-snap-stop:always;
      }
    }

    /* Keep the official icon and wordmark together on a clear layer above the hero effects. */
    .hero-brand {
      width:min(390px,100%);
      max-width:none;
      min-height:0;
      justify-content:flex-start;
      align-items:center;
      gap:14px;
      margin:0 0 24px;
      background:transparent;
      isolation:isolate;
      z-index:10;
    }
    .hero-brand .hero-brand-icon {
      display:block;
      width:74px;
      height:74px;
      flex:0 0 74px;
      border-radius:50%;
      background-image:url("../images/wowmet_logo_icon.jpg");
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 48px rgba(229,45,110,.28);
      opacity:1;
      transform:none;
      filter:none;
      animation:none;
      position:relative;
      z-index:2;
    }
    .hero-brand .hero-wordmark {
      display:block;
      width:auto;
      height:42px;
      max-width:min(300px,calc(100% - 68px));
      margin:0;
      object-fit:contain;
      opacity:1;
      clip-path:none;
      transform:none;
      filter:none;
      animation:none;
      position:relative;
      z-index:2;
    }

    @media (max-width:680px) {
      /* Keep the mobile WebKit paint path light enough to avoid a blank GPU layer. */
      body::before { position:absolute; }
      .nav { backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(15,9,14,.96); }
      .hero-stage::before { filter:blur(22px); }
      .phone::after { display:none; }
      .hero-stage,.safety-visual,.safety-ring,.screens { transform-style:flat; }
      .screen-frame { will-change:auto; }
      .hero-brand { width:min(310px,86vw); max-width:none; min-height:0; gap:10px; }
      .hero-brand .hero-brand-icon { width:54px; height:54px; flex-basis:54px; }
      .hero-brand .hero-wordmark { width:auto; max-width:calc(100% - 56px); height:34px; }
    }

    @media (max-width:390px) {
      .hero-brand .hero-brand-icon { width:46px; height:46px; flex-basis:46px; }
    }

    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior:auto; }
      *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
      .reveal { opacity:1; transform:none; }
    }
  
/* Slim site footer (deployment package: links home <-> WowSpots) */
.site-footer{border-top:1px solid rgba(255,255,255,.08);padding:22px 0;color:#9aa0b4;font-size:14px}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer nav{display:flex;gap:20px}
.site-footer a{color:#c9cede;text-decoration:none}
.site-footer a:hover{color:#fff}
@media(max-width:640px){.footer-inner{flex-direction:column;text-align:center}}