/* Self-hosted fonts - no third-party CDN (GDPR) */
@font-face{font-family:"Clash Display";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/ClashDisplay-Semibold.woff2") format("woff2");}
@font-face{font-family:"Clash Display";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/ClashDisplay-Bold.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/GeneralSans-Regular.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/GeneralSans-Medium.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;src:url("../fonts/GeneralSans-Semibold.woff2") format("woff2");}
@font-face{font-family:"General Sans";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/GeneralSans-Bold.woff2") format("woff2");}

/* ============================================================
   BE THE MEME — bethememe.app
   "Sticker-Bomb Arcade" — the real game loop, on the web.
   ONE cream page background. Each section = a rounded colour
   panel floating on it (no full-bleed bands, no separator lines).
   Headline + components ported from web/brandbook + the iOS app.
   ============================================================ */

:root{
  --ink:#111114; --ink-2:#1b1b21; --paper:#FAF7F0; --paper-2:#F1ECE0;
  --warm:#FCF7EC;
  --lime:#B8FF3C; --magenta:#FF3DAE; --eblue:#3D7BFF; --sunburst:#FF7A00;
  --violet:#8B5CFF; --cyan:#19D3E6; --red:#FF3B2F; --gold:#FFC23C;
  --contour:3px;
  --shadow:6px 6px 0 #000; --shadow-sm:4px 4px 0 #000;
  --panel-radius:42px;
  --display:"Clash Display","Arial Black",sans-serif;
  --ui:"General Sans",-apple-system,system-ui,sans-serif;
  --maxw:1240px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;overflow-x:clip;}
body{
  margin:0;font-family:var(--ui);color:var(--ink);background:var(--paper);
  line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* fine film grain over the whole page */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  background-image:url("../img/grain.svg");background-size:200px 200px;
  opacity:.06;mix-blend-mode:multiply;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

/* ============================================================
   PANEL — rounded colour card on the single cream bg
   ============================================================ */
.panel{position:relative;width:min(var(--maxw), 100vw - 28px);margin:0 auto 18px;}
.panel-bg{position:absolute;inset:0;border-radius:var(--panel-radius);overflow:hidden;
  background:var(--pc,var(--lime));z-index:0;}
/* soft sunburst, clipped to the rounded card — colour panels only */
.panel-bg::after{
  content:"";position:absolute;left:50%;top:43%;width:160%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.13) 0 6deg, transparent 6deg 12deg);
  -webkit-mask:radial-gradient(circle,#000 0 26%,transparent 60%);mask:radial-gradient(circle,#000 0 26%,transparent 60%);
}
.panel.ink .panel-bg::after,.panel.white .panel-bg::after,.panel.cream .panel-bg::after{display:none;}
.panel-in{position:relative;z-index:2;padding:72px 60px;}
.panel.lime{--pc:var(--lime);} .panel.pink{--pc:var(--magenta);} .panel.blue{--pc:var(--eblue);}
.panel.ink{--pc:#0c0c0e;color:#fff;} .panel.white{--pc:#fff;} .panel.cream{--pc:var(--paper-2);}
/* bare panel — content sits straight on the cream page, no card background */
.panel.plain .panel-bg{display:none;}
@media(max-width:680px){ .panel-in{padding:46px 24px;} .panel-bg{border-radius:32px;} :root{--panel-radius:32px;} }

/* ============================================================
   SIGNATURE HEADLINE — thick outline + solid 3D extrude
   ============================================================ */
.cap{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  color:var(--warm);line-height:.82;letter-spacing:.5px;margin:0;
  -webkit-text-stroke:.105em #000;paint-order:stroke fill;
  text-shadow:
    .013em .019em 0 #000, .026em .038em 0 #000, .039em .057em 0 #000,
    .052em .076em 0 #000, .065em .095em 0 #000, .078em .114em 0 #000,
    .091em .133em 0 #000, .104em .152em 0 #000, .117em .171em 0 #000;
}
.cap .cl{display:block;}
.cap .pink{color:var(--magenta);} .cap .violet{color:var(--violet);}
.cap .lime{color:var(--lime);} .cap .white{color:var(--warm);}

/* ============================================================
   CHIPS, PILLS, GAME LABELS
   ============================================================ */
.hl{display:inline-block;background:#fff;color:var(--ink);font-weight:700;
  border-radius:9px;padding:.02em .34em;box-shadow:3px 3px 0 rgba(0,0,0,.9);line-height:1.18;white-space:nowrap;}
.hl.pink{background:var(--magenta);} .hl.lime{background:var(--lime);}
.hl.tl{transform:rotate(-2deg);} .hl.tr{transform:rotate(2deg);}

.pill{display:inline-flex;align-items:center;gap:.4em;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;font-size:14px;padding:.42em .85em;border:3px solid #000;
  border-radius:999px;background:#fff;color:var(--ink);box-shadow:0 4px 0 #000;white-space:nowrap;}
.pill.lime{background:var(--lime);} .pill.pink{background:var(--magenta);color:#fff;}
.pill.dark{background:var(--ink);color:#fff;} .pill.blue{background:var(--eblue);color:#fff;}
.pill.lg{font-size:17px;padding:.5em 1em;}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--ui);font-weight:700;
  text-transform:uppercase;letter-spacing:1px;font-size:13px;background:var(--ink);color:#fff;padding:8px 15px;border-radius:30px;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.5px;font-size:18px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 26px;
  border:var(--contour) solid var(--ink);border-radius:18px;background:var(--lime);color:var(--ink);
  text-decoration:none;box-shadow:0 7px 0 #000;cursor:pointer;transition:transform .06s ease,box-shadow .06s ease;}
.btn:hover{transform:translateY(2px);box-shadow:0 5px 0 #000;}
.btn:active{transform:translateY(7px);box-shadow:0 0 0 #000;}
.btn.dark{background:var(--ink);color:#fff;}
.btn.sm{font-size:14px;padding:11px 16px;border-radius:13px;box-shadow:0 5px 0 #000;}

/* official-style Apple App Store badge (Apple logo path + SF Pro system text) */
.appstore{display:inline-flex;align-items:center;justify-content:center;gap:12px;background:#000;color:#fff;text-decoration:none;
  border-radius:13px;padding:10px 18px;border:1px solid rgba(255,255,255,.28);
  box-shadow:0 10px 26px rgba(0,0,0,.28);transition:transform .08s ease,box-shadow .08s ease;}
.appstore:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(0,0,0,.34);}
.appstore svg{width:30px;height:30px;fill:#fff;flex:0 0 auto;}
.appstore .as-txt{display:flex;flex-direction:column;line-height:1;
  font-family:-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;}
.appstore .as-t{font-size:12px;font-weight:400;letter-spacing:.2px;}
.appstore .as-b{font-size:22px;font-weight:600;letter-spacing:.2px;margin-top:3px;}
/* big wide hero / final badge */
.appstore.lg{gap:18px;padding:18px 34px;border-radius:18px;}
.appstore.lg svg{width:44px;height:44px;}
.appstore.lg .as-t{font-size:16px;} .appstore.lg .as-b{font-size:32px;}
.appstore.wide{width:100%;max-width:440px;}   /* full-width download bar */
@media(max-width:430px){
  .appstore.lg{width:100%;max-width:360px;padding:15px 22px;gap:14px;}
  .appstore.lg svg{width:38px;height:38px;} .appstore.lg .as-b{font-size:27px;}
}

.lime-chip{background:var(--lime);color:var(--ink);border:2px solid var(--ink);border-radius:7px;padding:0 .18em;display:inline-block;}

/* ============================================================
   HEADER — floating BLACK nav bar (brand · centred nav · CTA)
   ============================================================ */
.site-head{position:sticky;top:0;z-index:100;padding-top:14px;margin-bottom:16px;}
.site-head .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;
  width:min(var(--maxw),100vw - 28px);max-width:none;margin:0 auto;
  background:#0c0c0e;border:3px solid #000;border-radius:22px;padding:11px 16px 11px 22px;}
.brand{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;
  text-transform:uppercase;font-size:22px;letter-spacing:.5px;text-decoration:none;color:var(--ink);}
.brand .lime-chip{border-width:3px;box-shadow:2px 2px 0 #000;transform:rotate(-2.5deg);padding:0 .2em;}
.site-head .brand{justify-self:start;color:var(--warm);font-size:23px;}
.site-head .nav{justify-self:center;display:flex;align-items:center;gap:30px;}
.site-head .nav a{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:14px;
  letter-spacing:.6px;text-decoration:none;color:var(--warm);transition:color .12s ease;}
.site-head .nav a:hover{color:var(--lime);}
.site-head .headcta{justify-self:end;background:var(--lime);color:var(--ink);border-color:#000;box-shadow:0 5px 0 #000;}
.site-head .headcta:hover{background:var(--lime);}
/* anchor scroll offset — sticky header must never cover a section headline */
#get,#loop,#packs,#faq{scroll-margin-top:96px;}
.site-head .brand{white-space:nowrap;}

/* hamburger button (mobile only) */
.navtoggle{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  justify-self:end;width:48px;height:42px;padding:0;border:3px solid #000;border-radius:12px;
  background:var(--lime);box-shadow:0 4px 0 #000;cursor:pointer;}
.navtoggle span{display:block;width:22px;height:3px;background:#000;border-radius:2px;}

/* full-screen nav sheet */
.navsheet{position:fixed;inset:0;z-index:200;background:#0c0c0e;display:flex;flex-direction:column;
  align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:scale(1.05);
  transition:opacity .22s ease,transform .22s ease,visibility .22s;}
.navsheet.open{opacity:1;visibility:visible;transform:none;}
.navsheet nav{display:flex;flex-direction:column;align-items:center;gap:30px;text-align:center;}
.navsheet a:not(.btn){font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(32px,9vw,46px);letter-spacing:.5px;color:var(--warm);text-decoration:none;}
.navsheet a:not(.btn):active{color:var(--lime);}
.navsheet .btn{margin-top:12px;font-size:22px;}
.navclose{position:absolute;top:18px;right:16px;width:48px;height:48px;padding:0;border:3px solid #000;
  border-radius:12px;background:var(--lime);box-shadow:0 4px 0 #000;cursor:pointer;display:grid;place-items:center;}
.navclose span{position:absolute;width:22px;height:3px;background:#000;border-radius:2px;}
.navclose span:first-child{transform:rotate(45deg);} .navclose span:last-child{transform:rotate(-45deg);}
@media(min-width:761px){ .navsheet{display:none;} }
@media(max-width:760px){
  .site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px 10px 20px;}
  .site-head .nav,.site-head .headcta{display:none;}
  .site-head .brand{font-size:20px;}
  .navtoggle{display:flex;}
}

/* ============================================================
   CAUTION-TAPE MARQUEE — angled lime band, scrolls, section separator
   ============================================================ */
/* Tilted tape must NOT be clipped vertically: the 118vw width turns the 2.4deg
   tilt into a ~45px vertical swing at the ends, and overflow:hidden sliced those
   corners flat (cut off top & bottom). Horizontal bleed is already contained by
   html/body{overflow-x:clip}, so this wrapper only needs to reserve vertical room. */
.mqclip{position:relative;z-index:7;overflow:visible;padding:30px 0;margin:-22px 0;}
.marquee{position:relative;width:118vw;margin-left:-9vw;overflow:hidden;
  background:var(--lime);border-top:4px solid #000;border-bottom:4px solid #000;
  padding:13px 0;transform:rotate(-2.4deg);box-shadow:0 10px 22px rgba(0,0,0,.18);}
.marquee.tilt-r{transform:rotate(2.4deg);}
.marquee.dark{background:#0c0c0e;border-color:#000;box-shadow:0 10px 22px rgba(0,0,0,.28);}
.marquee-row{display:flex;width:max-content;animation:marq 34s linear infinite;will-change:transform;}
.marquee.fast .marquee-row{animation-duration:24s;}
@keyframes marq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee-set{display:flex;align-items:center;flex:0 0 auto;}
.marquee-item{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(19px,2.5vw,30px);letter-spacing:1px;color:#0c0c0e;padding:0 20px;white-space:nowrap;}
.marquee-star{flex:0 0 auto;font-size:clamp(15px,1.9vw,22px);color:#0c0c0e;line-height:1;}
.marquee.dark .marquee-item{color:var(--warm);} .marquee.dark .marquee-star{color:var(--lime);}
@media(max-width:600px){ .marquee{margin-top:-8px;margin-bottom:-8px;padding:10px 0;} }
@media(prefers-reduced-motion:reduce){ .marquee-row{animation:none;} }

/* ============================================================
   SECTION HEAD (inside panels)
   ============================================================ */
.sec-head{position:relative;z-index:2;text-align:center;max-width:760px;margin:0 auto 50px;}
.sec-head .cap{font-size:clamp(34px,6vw,64px);}
.sec-head p{font-size:18px;font-weight:600;margin:18px auto 0;max-width:540px;}
.panel.ink .sec-head p,.panel.blue .sec-head p,.panel.pink .sec-head p{color:#fff;}

.decal{position:absolute;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.55));z-index:3;}
.decal.hard{filter:drop-shadow(3px 4px 0 #000);}

/* ============================================================
   HERO
   ============================================================ */
.hero .panel-in{padding-top:50px;padding-bottom:54px;}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:30px;align-items:center;}
.hero-copy{position:relative;z-index:4;}
.hero-copy .eyebrow{margin-bottom:22px;}
.hero-head{font-size:clamp(52px,8.4vw,98px);margin:0;}
.hero-sub{font-family:var(--ui);font-weight:700;font-size:clamp(17px,2.2vw,21px);line-height:1.75;
  color:var(--ink);margin:24px 0 0;max-width:470px;}
.hero-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px;}
.trust{margin:22px 0 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.trust .t{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:13px;letter-spacing:.3px;color:var(--ink);}
.trust .dot{width:5px;height:5px;border-radius:50%;background:var(--ink);}

.hero-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:500px;}
.hero-stage .phone{transform:rotate(3deg);z-index:5;}
.hero-stage .pack-card{position:absolute;width:clamp(112px,11.5vw,146px);z-index:1;}
.hero-stage .pc-a{left:-4%;top:5%;transform:rotate(-13deg);}
.hero-stage .pc-b{left:-8%;bottom:7%;transform:rotate(7deg);}
.hero-stage .pc-c{right:-6%;top:2%;transform:rotate(12deg);}
.hero-stage .pc-d{right:-8%;bottom:5%;transform:rotate(-8deg);}
.hero-stage .decal{z-index:7;}
.hs-1{top:-2%;left:33%;width:52px;transform:rotate(-12deg);}
.hs-2{top:40%;right:-3%;width:44px;transform:rotate(12deg);}
.hs-3{bottom:-1%;left:22%;width:48px;transform:rotate(8deg);}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:18px;text-align:center;}
  .hero-copy .eyebrow,.hero-sub{margin-left:auto;margin-right:auto;}
  .hero-cta,.trust{justify-content:center;}
  .hero-stage{min-height:0;margin-top:14px;}
  .hero-stage .pack-card{width:clamp(92px,22vw,118px);}
  .hero-stage .pc-a{left:0;} .hero-stage .pc-c{right:0;}
}
@media(max-width:560px){
  .hero-stage .pack-card{width:84px;}
  .hero-stage .pc-b,.hero-stage .pc-d{display:none;}
  .hero-stage .pc-a{left:-2%;top:1%;} .hero-stage .pc-c{right:-2%;top:0;}
}

/* ============================================================
   PHONE MOCK + capture overlay (hero only)
   ============================================================ */
.phone{position:relative;width:clamp(248px,27vw,308px);aspect-ratio:9/19.3;background:#0a0a0c;border-radius:46px;
  border:6px solid #000;box-shadow:0 0 0 5px #fff,16px 18px 0 rgba(0,0,0,.9);padding:9px;flex:0 0 auto;}
.phone-screen{position:relative;height:100%;border-radius:36px;overflow:hidden;background:var(--eblue);display:flex;}
.phone-notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:34%;height:20px;background:#000;border-radius:0 0 14px 14px;z-index:8;}
.screen-fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;}
.phone-screen .ps-meme{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:40%;aspect-ratio:1;
  background:#fff;border:3px solid #000;border-radius:14px;padding:4px;box-shadow:3px 4px 0 rgba(0,0,0,.55);z-index:4;}
.phone-screen .ps-meme img{width:100%;height:100%;object-fit:cover;border-radius:8px;}
.ps-321{position:absolute;top:4.5%;left:5.5%;z-index:5;}
.phone-screen .ps-timer{position:absolute;left:7%;right:7%;bottom:6%;height:11px;border-radius:6px;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.32);overflow:hidden;z-index:5;}
.phone-screen .ps-timer::after{content:"";position:absolute;inset:1px;border-radius:5px;background:var(--lime);
  transform-origin:left center;animation:drain 2.1s linear infinite;}
@keyframes drain{0%{transform:scaleX(1);}88%{transform:scaleX(.04);}100%{transform:scaleX(1);}}

/* shared reveal "shot" card (used in the floating chat) */
.shot{position:relative;background:#fff;border:3px solid #000;border-radius:24px;padding:5px;box-shadow:10px 12px 0 rgba(0,0,0,.85);}
.shot-inner{position:relative;border-radius:19px;overflow:hidden;aspect-ratio:9/13;background:#222;}
.shot-inner>.face{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.shot .meme{position:absolute;top:3.4%;left:50%;transform:translateX(-50%);width:42%;aspect-ratio:1;background:#fff;
  border:3px solid #000;border-radius:13px;padding:4px;box-shadow:3px 4px 0 rgba(0,0,0,.6);z-index:3;}
.shot .meme img{width:100%;height:100%;object-fit:cover;border-radius:7px;}
.shot .you{position:absolute;right:7%;bottom:9%;z-index:4;font-family:var(--display);font-weight:700;font-size:13px;
  color:var(--ink);background:var(--lime);border:2px solid #000;border-radius:999px;padding:2px 11px;}
.shot .mark{position:absolute;left:8%;right:8%;bottom:3.6%;z-index:4;display:flex;justify-content:space-between;
  align-items:baseline;color:#fff;font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.4px;text-shadow:0 1px 3px rgba(0,0,0,.85);}
.shot .mark .h{font-family:var(--ui);font-weight:700;color:#e9e9ec;}

/* ============================================================
   THE LOOP — compact intro + three step panels
   ============================================================ */
.loop-intro{width:min(900px,100vw - 28px);margin:8px auto 18px;text-align:center;padding:14px 18px;}
.loop-intro .eyebrow{margin-bottom:16px;}
.loop-intro .cap{font-size:clamp(30px,5.2vw,56px);}
.loop-intro p{font-weight:600;margin:14px auto 0;max-width:460px;}

.loop-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
.loop-grid.flip .loop-copy{order:2;}
.loop-step{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:15px;letter-spacing:1.2px;
  display:inline-flex;align-items:center;gap:10px;margin-bottom:18px;}
.loop-step .n{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;border:3px solid #000;
  background:#fff;color:var(--ink);font-size:18px;box-shadow:0 4px 0 #000;}
.panel.pink .loop-step,.panel.blue .loop-step{color:#fff;}
.loop-copy .cap{font-size:clamp(40px,5.6vw,74px);transform:rotate(-3deg);transform-origin:left center;}
.loop-copy .lsub{font-family:var(--ui);font-weight:700;font-size:clamp(16px,2vw,20px);line-height:1.7;margin:24px 0 0;max-width:430px;
  transform:rotate(-3deg);transform-origin:left center;}
.panel.pink .lsub,.panel.blue .lsub{color:#fff;}
.loop-copy .lsub .hl{margin:0 1px;}
.loop-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:420px;}

/* meme deck (A MEME DROPS) */
.deck{position:relative;width:min(74%,330px);aspect-ratio:5/6;}
.deck .memecard{position:absolute;inset:0;background:#fff;border:4px solid #000;border-radius:22px;
  box-shadow:10px 12px 0 rgba(0,0,0,.85);overflow:hidden;}
.deck .memecard img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
.deck .d1{transform:rotate(-12deg) translate(-16%,4%);z-index:1;}
.deck .d2{transform:rotate(8deg) translate(15%,-2%);z-index:2;}
.deck .d3{transform:rotate(-2deg);z-index:3;}
.deck .drop-tag{position:absolute;z-index:6;top:-24px;left:50%;}
.loop-art .decal.d-flame{bottom:6%;left:1%;width:60px;transform:rotate(-6deg);}
.loop-art .decal.d-spark{top:4%;right:3%;width:46px;transform:rotate(12deg);}
.loop-art .decal.d-star{bottom:2%;left:44%;width:44px;transform:rotate(-8deg);}
.loop-art .d-321{position:absolute;bottom:15%;left:-3%;z-index:6;}
@media(max-width:880px){
  .loop-grid{grid-template-columns:1fr;gap:30px;text-align:center;}
  .loop-grid.flip .loop-copy{order:0;}
  .loop-copy .lsub{margin-left:auto;margin-right:auto;}
  .loop-copy .cap,.loop-copy .lsub{transform-origin:center;}
  .loop-step{justify-content:center;}
  .loop-art{min-height:0;margin-top:8px;}
}

/* ============================================================
   FLOATING GROUP CHAT — bubbles in the air, no phone
   ============================================================ */
/* blue step: give the chat more room so the panel centre doesn't read empty */
@media(min-width:881px){ .panel.blue .loop-grid{grid-template-columns:.82fr 1.18fr;} }
/* GROUP CHAT = a live chat simulator (JS-driven). Messages arrive one at a time —
   "typing…" then the bubble pops in — and the thread flows up endlessly.
   No hover pause. Older messages fade off the top. */
.chatfloat{position:relative;width:100%;min-height:582px;display:flex;align-items:center;justify-content:center;}
.chatwin{position:relative;width:min(432px,100%);height:582px;overflow:hidden;
  -webkit-mask:linear-gradient(180deg,transparent 0,#000 15%,#000 100%);
          mask:linear-gradient(180deg,transparent 0,#000 15%,#000 100%);}
.chatlog{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:14px 8px 32px;}
.cmsg{opacity:0;transform:translateY(15px) scale(.96);transform-origin:bottom left;}
.cmsg.show{opacity:1;transform:none;transition:opacity .34s ease,transform .44s cubic-bezier(.2,.85,.3,1);}
.cmsg.in{display:flex;align-items:flex-end;gap:9px;max-width:96%;}
.cmsg.out{display:flex;flex-direction:row-reverse;align-self:flex-end;max-width:90%;transform-origin:bottom right;}
.av{width:34px;height:34px;border-radius:50%;border:2px solid #000;background:#fff;flex:0 0 auto;
  object-fit:cover;box-shadow:0 5px 12px rgba(0,0,0,.3);}
.b{font-family:var(--ui);font-weight:700;font-size:15.5px;line-height:1.3;padding:11px 16px;border-radius:20px;
  width:fit-content;box-shadow:0 10px 22px rgba(0,0,0,.2);}
.cmsg.in .b{background:#141419;color:#fff;border-bottom-left-radius:6px;}
.cmsg.out .b{background:var(--lime);color:var(--ink);border-bottom-right-radius:6px;}
.b.huge{font-size:23px;padding:9px 15px;}
.cmsg.pic{align-self:flex-start;width:182px;margin-left:43px;}
.cmsg.pic .shot{box-shadow:8px 9px 0 rgba(0,0,0,.7);}
.cmsg.typ{display:flex;gap:5px;align-items:center;background:#141419;border-radius:20px;border-bottom-left-radius:6px;
  padding:14px 15px;width:fit-content;align-self:flex-start;margin-left:43px;box-shadow:0 10px 22px rgba(0,0,0,.2);}
.cmsg.typ span{width:8px;height:8px;border-radius:50%;background:#8b8b97;animation:blink 1.3s infinite;}
.cmsg.typ span:nth-child(2){animation-delay:.18s;} .cmsg.typ span:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,60%,100%{opacity:.3;}30%{opacity:1;}}
/* decals fixed over the window */
.chatfloat .react{position:absolute;z-index:7;pointer-events:none;filter:drop-shadow(2px 4px 0 rgba(0,0,0,.4));}
.chatfloat .r-fire{top:6%;left:-4%;width:58px;animation:wob 2.4s ease-in-out infinite;}
.chatfloat .r-laugh{bottom:13%;left:-5%;width:64px;animation:wob 2.8s ease-in-out infinite .3s;}
@keyframes wob{0%,100%{transform:rotate(-6deg) translateY(0);}50%{transform:rotate(6deg) translateY(-7px);}}
.chatfloat .cert{position:absolute;right:-4%;bottom:9%;z-index:8;}
/* holographic foil seal — ported from the app's HolographicFill (scrolling brand
   rainbow magenta→violet→eblue→cyan→lime→sunburst→magenta + a sweeping sheen) */
.cert-seal{position:relative;overflow:hidden;width:112px;height:112px;border-radius:50%;border:3px solid #000;
  display:grid;place-content:center;box-shadow:0 0 0 4px #000,0 8px 0 rgba(0,0,0,.4);transform:rotate(-8deg);}
.cert-seal::before{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(100deg,#FF3DAE,#8B5CFF,#3D7BFF,#19D3E6,#B8FF3C,#FF7A00,#FF3DAE);
  background-size:200% 100%;animation:holoscroll 3s linear infinite;}
.cert-seal::after{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  background-size:260% 100%;animation:holosheen 3s linear infinite;}
.cert-seal span{position:relative;z-index:2;font-family:var(--display);font-weight:700;text-transform:uppercase;
  text-align:center;line-height:1.02;font-size:14.5px;letter-spacing:.3px;color:var(--warm);
  -webkit-text-stroke:1.2px #000;paint-order:stroke fill;}
@keyframes holoscroll{from{background-position:0 0;}to{background-position:200% 0;}}
@keyframes holosheen{from{background-position:160% 0;}to{background-position:-160% 0;}}
@media(max-width:880px){
  .chatfloat{min-height:0;}
  .chatwin{height:520px;width:min(360px,100%);} .chatfloat .r-fire,.chatfloat .r-laugh{left:1%;} .chatfloat .cert{right:1%;}
}
@media(prefers-reduced-motion:reduce){
  .cmsg{opacity:1;transform:none;} .cmsg.typ{display:none;}
  .chatfloat .r-fire,.chatfloat .r-laugh{animation:none;}
}

/* ============================================================
   BENEFITS  (plain black — no sunburst)
   ============================================================ */
.humans{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:34px 26px;max-width:1000px;margin:0 auto;}
.human{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;}
.human img{height:84px;width:auto;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.9));}
.human .hk{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:21px;color:#fff;letter-spacing:.3px;}
.human p{margin:0;font-size:14.5px;font-weight:600;color:#c9c9d2;max-width:200px;}
/* a little life on the plain-black panel (decals only, no sunburst) */
.bdecal{position:absolute;z-index:1;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.6));pointer-events:none;}
.bd-1{top:16%;left:5%;width:48px;transform:rotate(-13deg);}
.bd-2{top:13%;right:6%;width:40px;transform:rotate(12deg);}
.bd-3{bottom:14%;left:9%;width:38px;transform:rotate(9deg);}
.bd-4{bottom:11%;right:8%;width:46px;transform:rotate(-8deg);}
@media(max-width:560px){ .bdecal{display:none;} }
/* CHAOS CERTIFIED holo seal — lives up by the benefits headline */
.benef-cert{position:absolute;z-index:5;top:5%;right:9%;}
@media(max-width:880px){ .benef-cert{top:3%;right:3%;transform:scale(.84);} }
@media(max-width:560px){ .benef-cert{position:static;display:flex;justify-content:center;margin:2px auto 30px;transform:none;} }
@media(max-width:780px){ .humans{grid-template-columns:repeat(2,1fr);gap:40px 18px;} }
@media(max-width:430px){ .humans{grid-template-columns:1fr;} }

/* ============================================================
   PACKS
   ============================================================ */
.packs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:40px 26px;}
@media(max-width:920px){ .packs{grid-template-columns:repeat(3,1fr);gap:36px 22px;} }
@media(max-width:600px){ .packs{grid-template-columns:repeat(2,1fr);gap:32px 18px;} }
.packitem{display:flex;flex-direction:column;}
.packitem .pcap{margin-top:16px;}
.packitem .pname{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:.2px;}
.packitem .pblurb{margin:5px 0 0;font-size:13.5px;font-weight:500;line-height:1.45;color:#4d4d52;}
.packitem .pfree{color:#1aa11a;}
.packs-note{position:relative;z-index:2;text-align:center;margin-top:46px;font-family:var(--display);
  text-transform:uppercase;font-size:14px;letter-spacing:.3px;}
.packs-note strong{color:#1aa11a;opacity:1;}
/* scattered brand stickers on the bare (cream) sections */
.sdecal{position:absolute;z-index:1;pointer-events:none;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.42));}
.sd-1{top:3%;left:1%;width:60px;transform:rotate(-13deg);}
.sd-2{top:5%;right:1%;width:52px;transform:rotate(12deg);}
.sd-3{bottom:2%;left:4%;width:54px;transform:rotate(9deg);}
.sd-4{bottom:3%;right:3%;width:64px;transform:rotate(-8deg);}
@media(max-width:820px){ .sdecal{display:none;} }

.pack-card{--pack-bg:var(--lime);--pack-label:var(--lime);position:relative;container-type:inline-size;
  aspect-ratio:236/332;width:100%;min-width:0;color:var(--ink);isolation:isolate;}
.pack-card::before{content:"";position:absolute;inset:0;border:clamp(4px,2.35cqw,6px) solid var(--ink);border-radius:7.5cqw;
  box-sizing:border-box;pointer-events:none;z-index:0;transform-origin:50% 50%;transition:transform .14s ease;
  background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,0) 38%,rgba(0,0,0,.1)),var(--pack-bg);
  transform:translate(1.9cqw,1.7cqw) rotate(1.35deg);}
.pack-card__front{position:absolute;inset:0;z-index:1;box-sizing:border-box;color:var(--ink);overflow:hidden;
  border:clamp(4px,2.35cqw,6px) solid var(--ink);border-radius:7.5cqw;transform-origin:50% 50%;transition:transform .14s ease;
  background:linear-gradient(145deg,rgba(255,255,255,.24),rgba(255,255,255,0) 38%,rgba(0,0,0,.08)),var(--pack-bg);}
.pack-card:hover::before{transform:translate(1.9cqw,1.7cqw) rotate(1.95deg);}
.pack-card:hover .pack-card__front{transform:rotate(-.9deg);}
.pack-card.lime{--pack-bg:#aaff05;--pack-label:#b8ff3c;}
.pack-card.violet{--pack-bg:#9d53f2;--pack-label:#b068ff;}
.pack-card.eblue{--pack-bg:#3d7bff;--pack-label:#5e93ff;}
.pack-card.cyan{--pack-bg:#14ced2;--pack-label:#25e5f0;}
.pack-card.magenta{--pack-bg:#ff2dae;--pack-label:#ff3dae;}
.pack-card.sunburst{--pack-bg:#ff8a08;--pack-label:#ffb01d;}
.pack-card.red{--pack-bg:#ff3730;--pack-label:#ff6b66;}
.pack-card__tone{position:absolute;top:5.3cqw;left:5.3cqw;z-index:5;display:inline-flex;align-items:center;height:13.2cqw;
  max-width:calc(100% - 10.6cqw);padding:0 5.4cqw;border-radius:6.7cqw;background:#050506;color:var(--pack-label);
  font-family:Impact,"Arial Black",var(--display);font-weight:900;font-size:clamp(13px,7.2cqw,24px);line-height:1;text-transform:uppercase;white-space:nowrap;}
.pack-card__status{position:absolute;top:5.5cqw;right:5.2cqw;z-index:6;width:13cqw;height:13cqw;object-fit:contain;display:block;}
.pack-card__hero-wrap{position:absolute;top:14.5%;right:3.8cqw;bottom:36%;left:3.8cqw;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.pack-card__hero{width:88%;max-width:100%;max-height:100%;object-fit:contain;display:block;filter:drop-shadow(.9cqw 1.15cqw 0 rgba(0,0,0,.78));}
.pack-card__copy{position:absolute;left:6.2cqw;right:8cqw;bottom:7cqw;z-index:4;}
.pack-card__title{font-family:Impact,"Arial Black",var(--display);font-weight:900;font-size:clamp(22px,17.2cqw,42px);line-height:.78;text-transform:uppercase;letter-spacing:0;}
.pack-card__meta{margin-top:2cqw;font-family:Impact,"Arial Black",var(--display);font-weight:900;font-size:clamp(11px,5.6cqw,17px);line-height:1;text-transform:uppercase;}

/* ============================================================
   FAQ
   ============================================================ */
.faq{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.faq details{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:5px 6px 0 #000;margin-bottom:16px;padding:0 22px;overflow:hidden;}
.faq summary{font-family:var(--display);text-transform:uppercase;font-size:17px;cursor:pointer;list-style:none;
  padding:18px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";font-size:26px;line-height:1;}
.faq details[open] summary::after{content:"–";}
.faq p{margin:0 0 18px;font-size:15px;font-weight:500;color:#45454a;}
.faq a{color:var(--eblue);text-decoration:underline;font-weight:600;}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final{position:relative;z-index:2;text-align:center;}
.final .cap{font-size:clamp(40px,7vw,80px);}
.final .frow{display:flex;align-items:center;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:30px;}
.final .trust{justify-content:center;margin-top:22px;}
.final .decal{z-index:1;}
.final .fd-1{top:14%;left:8%;width:58px;transform:rotate(-12deg);}
.final .fd-2{bottom:16%;right:9%;width:64px;transform:rotate(13deg);}
.final .fd-3{top:24%;right:15%;width:38px;transform:rotate(8deg);}
@media(max-width:560px){ .final .decal{display:none;} }

/* ============================================================
   FOOTER — rounded ink panel
   ============================================================ */
.site-foot{width:min(var(--maxw),100vw - 28px);margin:0 auto 18px;background:#0c0c0e;color:var(--paper);
  border-radius:var(--panel-radius);padding:46px 50px 40px;}
.site-foot .wrap{max-width:none;padding:0;display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start;}
.site-foot .brand{color:var(--paper);}
.site-foot nav{display:flex;flex-wrap:wrap;gap:18px;}
.site-foot nav a{font-weight:600;font-size:14px;text-decoration:none;color:#d7d7dc;}
.site-foot nav a:hover{color:var(--lime);}
.site-foot .legalline{width:100%;margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);font-size:12.5px;color:#8f8f95;}

/* ============================================================
   LEGAL PAGES  (terms / privacy / imprint) — preserved
   ============================================================ */
.legal{padding:40px 0 70px;}
.legal .wrap{max-width:760px;}
.legal .back{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;text-decoration:none;color:#6a6a6e;margin-bottom:24px;}
.legal .back:hover{color:var(--ink);}
.legal h1{font-family:var(--display);text-transform:uppercase;font-size:clamp(34px,6vw,54px);line-height:.96;margin:0 0 6px;}
.legal .updated{font-size:13px;font-weight:600;color:#86868a;margin-bottom:34px;}
.legal h2{font-family:var(--display);text-transform:uppercase;font-size:22px;margin:38px 0 10px;padding-top:18px;border-top:2px solid var(--ink);}
.legal h3{font-family:var(--display);text-transform:uppercase;font-size:16px;margin:22px 0 8px;}
.legal p,.legal li{font-size:15.5px;line-height:1.65;}
.legal ul,.legal ol{padding-left:22px;}
.legal li{margin-bottom:7px;}
.legal table{width:100%;border-collapse:collapse;margin:16px 0;font-size:14px;}
.legal th,.legal td{border:2px solid var(--ink);padding:9px 11px;text-align:left;vertical-align:top;}
.legal th{background:var(--paper-2);font-family:var(--display);text-transform:uppercase;font-size:12px;}
.legal a{color:var(--eblue);text-decoration:underline;font-weight:600;word-break:break-word;}
.legal .fill{background:var(--lime);padding:0 4px;border-radius:4px;font-weight:600;box-shadow:inset 0 0 0 1.5px var(--ink);}
.legal .callout{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:var(--shadow-sm);padding:18px 20px;margin:24px 0;font-size:14.5px;}
.legal .contact{background:var(--paper-2);border:2px solid var(--ink);border-radius:14px;padding:16px 18px;margin-top:30px;font-size:14.5px;}

/* ============================================================
   SUPPORT PAGE — preserved
   ============================================================ */
.support{padding:0 0 70px;}
.support-hero{background:var(--lime);border-radius:var(--panel-radius);padding:48px 44px;position:relative;overflow:hidden;
  width:min(var(--maxw),100vw - 28px);margin:14px auto 0;}
.support-hero .back{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.4px;text-decoration:none;color:#1c1c1c;margin-bottom:16px;}
.support-hero .back:hover{color:#000;}
.support-hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,7vw,66px);line-height:.92;margin:0 0 10px;}
.support-hero p{font-size:18px;font-weight:600;max-width:520px;margin:0;color:#1d1d1d;}
.support .wrap{max-width:820px;}
.contact-card{display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:space-between;background:var(--ink);color:#fff;border:3px solid var(--ink);border-radius:22px;box-shadow:var(--shadow);padding:26px 28px;margin:-30px 0 46px;position:relative;z-index:2;}
.contact-card .ct-l h2{font-family:var(--display);text-transform:uppercase;font-size:22px;margin:0 0 6px;border:0;padding:0;}
.contact-card .ct-l p{margin:0;font-size:15px;color:#cfcfd6;}
.contact-card a.mail{font-family:var(--display);text-transform:uppercase;font-size:18px;background:var(--lime);color:var(--ink);border:3px solid var(--ink);border-radius:16px;padding:14px 22px;box-shadow:0 6px 0 #000;text-decoration:none;white-space:nowrap;transition:transform .06s ease,box-shadow .06s ease;}
.contact-card a.mail:hover{transform:translateY(2px);box-shadow:0 4px 0 #000;}
.support h2.qa-head{font-family:var(--display);text-transform:uppercase;font-size:26px;margin:0 0 20px;border:0;padding:0;}
.qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:680px){ .qa-grid{grid-template-columns:1fr;} }
.qa{background:#fff;border:3px solid var(--ink);border-radius:18px;box-shadow:var(--shadow-sm);padding:22px 24px;}
.qa h3{font-family:var(--display);text-transform:uppercase;font-size:16px;margin:0 0 8px;}
.qa p{margin:0;font-size:15px;font-weight:500;color:#45454a;line-height:1.6;}
.qa a{color:var(--eblue);text-decoration:underline;font-weight:600;}
.support .legal-row{margin-top:40px;padding-top:24px;border-top:2px solid var(--ink);font-family:var(--display);text-transform:uppercase;font-size:13px;letter-spacing:.4px;}
.support .legal-row a{color:#3c3c40;text-decoration:none;}
.support .legal-row a:hover{color:var(--magenta);}

@media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .ps-timer::after,.cert-seal::before,.cert-seal::after{animation:none;} }