/*
Theme Name:  Bonuschick
Theme URI:   https://bonuschick.com
Author:      Bonuschick
Description: One-page casino affiliate theme for Bonuschick.com. Casinos are a custom post type; the hero, August promo and social links are editable under the "Bonuschick" admin menu. Includes a signup handler that stores claims in the database with CSV export.
Version:     1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License:     Proprietary
Text Domain: bonuschick
*/

  :root{
    --violet:#4c1d95;
    --purple:#7c1fa8;
    --magenta:#c026a8;
    --pink:#ff2d8f;
    --orange:#ff7a2f;
    --yellow:#ffc93c;
    --ink:#3b1d55;      /* content bg below hero — lifted, plum instead of near-black */
    --ink-2:#48245f;    /* offers strip, a touch lighter again */
    --ink-3:#331a4b;    /* footer */
    --line:rgba(255,255,255,.16);
    --radius:22px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
    background:
      radial-gradient(900px 620px at 8% 44%, rgba(124,31,168,.5), transparent 65%),
      radial-gradient(900px 620px at 96% 62%, rgba(255,45,143,.28), transparent 62%),
      var(--ink);
    background-attachment:fixed;
    color:#fff;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  a{text-decoration:none;color:inherit}
  .wrap{max-width:1240px;margin:0 auto;padding:0 28px}

  /* ---------------- HERO ---------------- */
  .hero{
    position:relative;
    /* full viewport height on desktop */
    min-height:100vh;
    min-height:100svh;
    display:flex;flex-direction:column;
    overflow:hidden;
    background:
      radial-gradient(900px 700px at 88% 10%, rgba(255,201,60,.95), transparent 60%),
      radial-gradient(1100px 900px at 72% 55%, rgba(255,122,47,.85), transparent 62%),
      radial-gradient(1000px 900px at 46% 40%, rgba(255,45,143,.8), transparent 65%),
      linear-gradient(115deg, #3b0d6b 0%, #6b18a5 30%, #b31fa0 58%, #ff4d7d 80%, #ffb03a 100%);
  }
  .hero:after{ /* subtle vignette bottom for section blend */
    content:"";position:absolute;inset:auto 0 0 0;height:180px;
    background:linear-gradient(to bottom, rgba(13,7,19,0), var(--ink));
    pointer-events:none;
  }

  /* nav */
  .nav{
    position:relative;z-index:5;
    display:flex;align-items:center;gap:32px;
    padding:26px 0 0;
  }
  .brand{display:flex;align-items:center;gap:12px}
  .brand-mark{
    width:40px;height:40px;border-radius:50%;
    background:conic-gradient(from 210deg,var(--pink),var(--orange),var(--yellow),var(--pink));
    display:grid;place-items:center;
    box-shadow:0 6px 20px rgba(255,45,143,.45);
  }
  .brand-mark span{font-size:18px}
  .brand-name{line-height:1;font-weight:800;letter-spacing:.02em}
  .brand-name b{display:block;font-size:15px}
  .brand-name i{display:block;font-style:normal;font-size:15px;font-weight:600;opacity:.85}
  .btn-ghost{
    border:1.5px solid rgba(255,255,255,.65);
    border-radius:999px;padding:11px 24px;
    font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    display:inline-flex;align-items:center;gap:8px;
    backdrop-filter:blur(6px);
  }
  .btn-ghost:hover{background:rgba(255,255,255,.14)}
  /* two nav CTAs, one per breakpoint — they point at different places, so a
     single relabelled link won't do */
  /* the nav is just brand + CTA now, so the CTA carries the auto margin */
  .nav-cta{flex:0 0 auto;white-space:nowrap;margin-left:auto}
  .nav-cta--narrow{display:none}

  .hero > .wrap{display:flex;flex-direction:column;flex:1}

  /* hero grid */
  .hero-grid{
    position:relative;z-index:4;
    flex:1;
    display:grid;grid-template-columns:minmax(0,1fr) 450px;
    gap:40px;align-items:center;
    padding:56px 0 120px;
  }

  /* scroll-down cue, bottom centre */
  .scroll-cue{
    position:absolute;z-index:6;
    left:50%;bottom:34px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:10px;
    font-size:9.5px;font-weight:800;letter-spacing:.26em;text-transform:uppercase;
    color:rgba(255,255,255,.78);
    animation:cue-fade 3.2s ease-in-out infinite;
  }
  .scroll-cue:hover{color:#fff}
  .scroll-cue .mouse{
    width:26px;height:42px;border-radius:14px;
    border:1.5px solid rgba(255,255,255,.6);
    position:relative;
  }
  .scroll-cue .wheel{
    position:absolute;left:50%;top:8px;
    width:3px;height:8px;border-radius:2px;
    background:#fff;
    animation:cue-wheel 1.8s cubic-bezier(.4,0,.2,1) infinite;
  }
  .scroll-cue .chev{
    width:10px;height:10px;
    border-right:1.5px solid rgba(255,255,255,.7);
    border-bottom:1.5px solid rgba(255,255,255,.7);
    transform:rotate(45deg);
    animation:cue-chev 1.8s ease-in-out infinite;
  }
  @keyframes cue-wheel{
    0%{transform:translate(-50%,0);opacity:1}
    60%{transform:translate(-50%,16px);opacity:0}
    61%{transform:translate(-50%,0);opacity:0}
    100%{transform:translate(-50%,0);opacity:1}
  }
  @keyframes cue-chev{
    0%,100%{transform:rotate(45deg) translate(0,0);opacity:.5}
    50%{transform:rotate(45deg) translate(3px,3px);opacity:1}
  }
  @keyframes cue-fade{
    0%,100%{opacity:.75}
    50%{opacity:1}
  }
  @media (prefers-reduced-motion:reduce){
    .scroll-cue,.scroll-cue .wheel,.scroll-cue .chev{animation:none}
  }
  h1{
    font-size:clamp(34px,4.4vw,60px);
    line-height:1.04;
    font-style:italic;font-weight:900;
    text-transform:uppercase;
    letter-spacing:-.01em;
    margin:0 0 36px;
    max-width:14ch;
    text-shadow:0 4px 26px rgba(60,0,60,.35);
  }
  .cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
  .btn-primary{
    background:linear-gradient(90deg,#ff2d8f,#ff6ba8);
    border-radius:999px;padding:17px 42px;
    font-weight:800;font-size:14px;letter-spacing:.12em;text-transform:uppercase;
    display:inline-block;
  }
  .btn-primary:hover{filter:brightness(1.08)}

  /* The socials exist twice: inside the hero for desktop, and in a strip
     below it for narrow screens. CSS can't reparent a node, and only one copy
     is ever rendered. In the Next.js build this becomes one <Socials/>
     component with a `variant` prop and a single array of links. */
  .social-strip{display:none}

  /* socials — fixed 3-up grid so a pill can never drop to a second row */
  .socials{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;margin-top:38px;
    max-width:510px;
  }
  .social{
    display:flex;align-items:center;gap:9px;min-width:0;
    background:rgba(255,255,255,.14);
    border:1px solid var(--line);
    backdrop-filter:blur(10px);
    border-radius:999px;padding:7px 15px 7px 9px;
    font-size:12px;font-weight:700;
  }
  .social:hover{background:rgba(255,255,255,.24)}
  /* labels truncate rather than force the pill wider */
  .social > span:last-child{min-width:0;overflow:hidden}
  .social > span:last-child, .social small{
    white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
  }
  .social .ic{
    width:27px;height:27px;border-radius:50%;flex:0 0 auto;
    display:grid;place-items:center;
    background:rgba(0,0,0,.3);
  }
  .social .ic svg{width:16px;height:16px;display:block}
  /* brand colours on the icon badges */
  .ic-ig{background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%)}
  .ic-tt{background:#000}
  .ic-of{background:#00AFF0}
  .social small{display:block;font-weight:600;font-size:9.5px;opacity:.75;letter-spacing:.03em}
  /* the money link gets a brighter treatment than the rest */
  .social-of{
    background:linear-gradient(90deg,rgba(0,175,240,.85),rgba(0,130,220,.8));
    border-color:rgba(255,255,255,.42);
    box-shadow:0 8px 24px rgba(0,150,235,.35);
  }
  .social-of:hover{background:linear-gradient(90deg,rgba(0,190,255,.95),rgba(0,145,235,.9))}
  .social-of small{opacity:.9}

  /* ---- hero photo (pink duotone, blends into gradient) ---- */
  .hero-photo{
    position:absolute;z-index:2;
    top:0;right:0;bottom:0;
    /* wide, and uncapped on big screens — an 820px cap left her as a sliver
       on the right of a 2000px display instead of filling the frame */
    width:72%;max-width:1400px;
    overflow:hidden;
    pointer-events:none;
    /* fade the left edge + top into the hero gradient. The fade runs over a
       longer distance now so the extra width reads as more image, not more haze */
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 20%, rgba(0,0,0,.68) 44%, #000 66%),
      linear-gradient(to bottom, transparent 0%, #000 7%);
    -webkit-mask-composite:source-in;
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.22) 20%, rgba(0,0,0,.68) 44%, #000 66%),
      linear-gradient(to bottom, transparent 0%, #000 7%);
    mask-composite:intersect;
    /* fallback look if the photo file is missing */
    background:linear-gradient(180deg,#ff9ec4,#e0568f 45%,#7b1e8f);
    perspective:1100px;
  }
  /* pointer-driven tilt — max ~2°, eased so it never feels twitchy.
     The mask stays on the parent, so only the content tilts inside it. */
  .photo-3d{
    position:absolute;inset:0;
    transform-style:preserve-3d;
    transform:
      rotateY(calc(var(--mx,0) * 2deg))
      rotateX(calc(var(--my,0) * -1.4deg));
    transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
    will-change:transform;
  }
  /* ambient drift, separate element so it can't clash with the tilt transform.
     The scale gives overscan so tilting never exposes an edge. */
  .photo-float{
    position:absolute;inset:0;
    transform-origin:60% 40%;
    animation:photo-float 18s ease-in-out infinite;
  }
  @keyframes photo-float{
    0%,100%{transform:scale(1.03) translate3d(0,0,0)}
    50%{transform:scale(1.05) translate3d(-.6%,-.7%,0)}
  }
  @media (prefers-reduced-motion:reduce){
    .photo-float{animation:none;transform:scale(1.03)}
    .photo-3d{transition:none;transform:none}
  }
  /* Stacked slides that crossfade. Each carries its own --pos because the
     three shots are framed differently — a single object-position would put
     her face off-crop on at least one of them. */
  .hero-photo img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:var(--pos,58% 5%);
    /* flatten the original colours so the pink grade reads clean */
    filter:saturate(.5) contrast(.96) brightness(1.14);
    opacity:0;
    transition:opacity 1.5s ease-in-out;
  }
  .hero-photo img.is-active{opacity:1}
  @media (prefers-reduced-motion:reduce){
    .hero-photo img{transition:none}
  }
  /* lifts the near-black street shadows toward magenta so the photo
     reads as part of the gradient instead of a dark rectangle */
  .hero-photo .lift{
    position:absolute;inset:0;
    background:linear-gradient(145deg,
      rgba(255,45,143,.4) 0%,
      rgba(186,32,196,.34) 45%,
      rgba(255,140,60,.26) 100%);
    mix-blend-mode:screen;
  }
  /* magenta / orange colour grade — keeps luminance, replaces hue */
  .hero-photo .grade{
    position:absolute;inset:0;
    background:linear-gradient(155deg,
      rgba(255,45,143,.85) 0%,
      rgba(214,38,168,.8) 38%,
      rgba(255,122,47,.7) 72%,
      rgba(124,31,168,.85) 100%);
    mix-blend-mode:color;
  }
  /* warm rim light from the top-right, like the reference */
  .hero-photo .glow{
    position:absolute;inset:0;
    background:
      radial-gradient(46% 34% at 72% 16%, rgba(255,201,60,.55), transparent 68%),
      radial-gradient(52% 44% at 20% 78%, rgba(124,31,168,.5), transparent 70%);
    mix-blend-mode:screen;
  }
  /* extra punch + blend back toward the page gradient */
  .hero-photo .sheen{
    position:absolute;inset:0;
    background:linear-gradient(120deg, rgba(255,45,143,.42), transparent 46%, rgba(255,160,60,.3));
    mix-blend-mode:soft-light;
  }
  .hero-photo .fade{
    position:absolute;inset:auto 0 0 0;height:34%;
    background:linear-gradient(to bottom, transparent, rgba(59,29,85,.9));
  }
  .hero-right{position:relative;min-height:520px}

  /* Top casino card floating over portrait */
  .top-casino{
    position:relative;z-index:3;
    margin-left:auto;margin-top:80px;width:400px;
    background:rgba(20,10,28,.72);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(22px);
    border-radius:var(--radius);
    padding:22px;
    box-shadow:0 30px 70px rgba(20,0,30,.5);
    overflow:hidden;          /* lets the logo band bleed to the edges */
  }
  /* hero card: logo on top, everything centred */
  .top-casino{text-align:center}
  /* light plate behind the wordmarks — Mainio's logo is black, so a
     dark tile would swallow it; white keeps all four legible */
  .logo-plate{
    flex:0 0 auto;
    display:grid;place-items:center;
    background:#fff;
    border-radius:14px;
    padding:10px 14px;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
    position:relative;
  }
  /* Percentage heights don't resolve against the grid area here, so a
     width:100% image keeps its natural aspect and overflows the plate.
     Absolute inset:0 pins the image box to the plate's padding box, and the
     inherited padding re-creates the content inset — deterministic at every
     breakpoint, whatever the plate's height or padding happens to be. */
  .logo-plate img{
    position:absolute;inset:0;
    box-sizing:border-box;
    padding:inherit;
    width:100%;height:100%;
    object-fit:contain;
  }
  /* hero card: white band across the full width of the card top */
  .top-casino .logo-plate{
    width:auto;height:92px;
    margin:-22px -22px 18px;
    border-radius:0;
    padding:16px 26px;
  }
  /* offer rows: white panel flush to the left, full row height.
     The card's overflow:hidden clips it to the rounded corners. */
  .offer-card .logo-plate{
    align-self:stretch;
    width:auto;height:auto;
    margin:-22px 0 -22px -26px;
    border-radius:0;
    padding:16px 20px;
  }
  .top-casino h3{margin:0;font-size:19px;font-weight:800}
  .rating{
    display:flex;justify-content:center;align-items:center;gap:6px;
    font-size:12px;opacity:.85;margin:6px 0 16px;
  }
  .rating .stars{color:var(--yellow);letter-spacing:2px}
  .offer{
    font-size:21px;font-weight:800;line-height:1.25;margin:0 0 8px;
    background:linear-gradient(90deg,#fff,#ffd9ea);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .offer-sub{font-size:13px;opacity:.8;margin:0 0 18px;line-height:1.5}
  .tc-cta{
    display:block;text-align:center;
    background:linear-gradient(90deg,#ff2d8f,#ff7a2f);
    border-radius:999px;padding:16px;
    font-weight:800;font-size:13.5px;letter-spacing:.1em;text-transform:uppercase;
  }
  .tc-cta:hover{filter:brightness(1.08)}
  /* Hero box, giveaway variant. Deliberately no tint or border override — it
     must read as the same card as the casino box so the branding holds. Only
     the small line differs: a badge pill sits where the star rating goes. */
  .top-casino--giveaway .rating{margin:6px 0 14px}
  .top-casino--giveaway .promo-badge{margin:0}
  /* logo-plate falls back to text when no image is set */
  /* full-plate affiliate click target, above the letterboxed image */
  .logo-plate .logo-link{
    position:absolute;inset:0;z-index:2;
    display:block;border-radius:inherit;
  }
  .logo-plate .logo-link:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
  /* linked casino name — same colour, underline only on intent */
  .casino-link{color:inherit;text-decoration:none}
  .casino-link:hover,.casino-link:focus-visible{text-decoration:underline;text-underline-offset:3px}

  .logo-fallback{
    font-weight:900;font-size:15px;letter-spacing:.02em;
    color:#2a1440;text-transform:uppercase;text-align:center;
  }

  .tc-foot{
    display:flex;justify-content:space-between;align-items:center;
    margin-top:14px;font-size:10.5px;opacity:.6;letter-spacing:.03em;
  }

  /* ---------------- INSTAGRAM ---------------- */
  section{position:relative}
  .sec-pad{padding:96px 0}
  .sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:44px;flex-wrap:wrap}
  .eyebrow{
    font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
    background:linear-gradient(90deg,var(--pink),var(--orange));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    margin:0 0 12px;
  }
  h2{
    margin:0;font-size:clamp(28px,3.2vw,44px);font-weight:900;font-style:italic;
    text-transform:uppercase;line-height:1.06;letter-spacing:-.01em;
  }
  .sec-head p{margin:14px 0 0;font-size:15px;opacity:.7;max-width:46ch;line-height:1.6}

  /* ---------------- AUGUST PROMO ---------------- */
  .promo{padding:78px 0}
  .promo-card{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
    /* centre the copy against the form: the form is the taller column, so
       top-aligning left a dead gap under the text */
    gap:48px;align-items:center;
    background:
      radial-gradient(700px 420px at 88% 8%, rgba(255,201,60,.22), transparent 62%),
      linear-gradient(120deg, rgba(255,45,143,.24), rgba(255,122,47,.14) 55%, rgba(28,11,42,.6));
    border:1px solid rgba(255,180,90,.5);
    border-radius:var(--radius);
    padding:38px 40px;
  }
  /* Same gradient as the Claim / Get bonus buttons so the pill reads as part of
     the same system rather than a stray accent colour. */
  .promo-badge{
    display:inline-flex;align-items:center;
    background:linear-gradient(90deg,#ff2d8f,#ff7a2f);
    color:#fff;border-radius:999px;
    padding:6px 15px;font-size:10.5px;font-weight:800;
    letter-spacing:.14em;text-transform:uppercase;
    margin-bottom:16px;
  }
  .promo h2{margin-bottom:14px}
  .promo-lead{margin:0 0 20px;font-size:16px;line-height:1.6;max-width:52ch;opacity:.92}
  .promo-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .promo-list li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.5}
  /* tick drawn in CSS — inherits the brand pink and scales with the text */
  .promo-list li:before{
    content:"";flex:0 0 auto;
    width:6px;height:11px;margin:3px 0 0 2px;
    border-right:2px solid var(--pink);
    border-bottom:2px solid var(--pink);
    transform:rotate(45deg);
  }
  .promo-kicker{margin:20px 0 0;font-size:14px;font-weight:800;letter-spacing:.02em}

  /* ---- signup form ---- */
  .signup{
    background:rgba(20,10,28,.66);
    border:1px solid rgba(255,255,255,.18);
    backdrop-filter:blur(22px);
    border-radius:18px;padding:26px;
  }
  .signup h3{margin:0 0 4px;font-size:17px;font-weight:800}
  .signup > p{margin:0 0 18px;font-size:12.5px;opacity:.7;line-height:1.5}
  .field{display:block;margin-bottom:14px}
  .field span{
    display:block;margin-bottom:6px;
    font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75;
  }
  .field input,.field select{
    width:100%;
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.22);
    border-radius:12px;
    padding:12px 14px;
    color:#fff;font-family:inherit;font-size:14px;font-weight:600;
  }
  .field input::placeholder{color:rgba(255,255,255,.45);font-weight:500}
  .field input:focus,.field select:focus{
    outline:none;border-color:var(--pink);
    background:rgba(255,255,255,.14);
  }
  .field select option{background:#2a1440;color:#fff}
  .consent{
    display:flex;gap:10px;align-items:flex-start;
    margin:16px 0 18px;font-size:11.5px;line-height:1.5;opacity:.8;
  }
  .consent input{
    flex:0 0 auto;margin-top:1px;width:15px;height:15px;
    accent-color:var(--pink);
  }
  .btn-signup{
    width:100%;border:0;cursor:pointer;
    background:linear-gradient(90deg,#ff2d8f,#ff7a2f);
    border-radius:999px;padding:15px;
    color:#fff;font-family:inherit;
    font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  }
  .btn-signup:hover{filter:brightness(1.08)}
  .form-note{
    margin:12px 0 0;font-size:10.5px;line-height:1.5;opacity:.55;text-align:center;
  }
  .form-status{
    margin:12px 0 0;font-size:12px;line-height:1.5;text-align:center;
    color:var(--yellow);font-weight:700;
  }
  .form-status.is-ok{color:#4ade80}
  .form-status.is-error{color:#ff8fb0}
  .btn-signup[disabled]{opacity:.6;cursor:default}
  /* honeypot — off-screen rather than display:none, which some bots skip */
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  /* ---------------- OFFERS ---------------- */
  .offers{
    background:
      radial-gradient(700px 420px at 88% 0%, rgba(255,122,47,.2), transparent 65%),
      var(--ink-2);
    border-top:1px solid rgba(255,255,255,.1);
  }
  .offer-list{display:flex;flex-direction:column;gap:16px}
  .offer-card{
    display:grid;grid-template-columns:140px minmax(0,1fr) 220px;
    gap:26px;align-items:center;
    background:linear-gradient(120deg,rgba(28,11,42,.62),rgba(28,11,42,.34));
    border:1px solid rgba(255,255,255,.14);
    border-radius:var(--radius);
    padding:22px 26px;
    overflow:hidden;          /* clips the flush logo panel to the card radius */
    transition:border-color .2s ease, transform .2s ease;
  }
  .offer-card:hover{border-color:rgba(255,45,143,.55);transform:translateY(-3px)}
  /* first spot — warmer tint so it reads as the top pick */
  .offer-card--top{
    background:linear-gradient(120deg,rgba(255,45,143,.2),rgba(255,122,47,.13) 60%,rgba(28,11,42,.5));
    border-color:rgba(255,180,90,.5);
  }
  .offer-card--top:hover{border-color:rgba(255,201,60,.8)}
  .offer-card .logo-tile{width:88px;height:88px;border-radius:18px;font-size:12px}
  .oc-body h3{margin:0 0 6px;font-size:18px;font-weight:800;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .oc-offer{font-size:21px;font-weight:800;margin:0 0 6px;color:#fff}
  .oc-offer em{font-style:normal;color:var(--yellow)}
  .oc-terms{margin:0;font-size:12px;opacity:.6;line-height:1.5}
  .tags{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
  .tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    background:rgba(255,45,143,.16);border:1px solid rgba(255,45,143,.32);
    border-radius:999px;padding:5px 11px;color:#ffc0dc}
  .oc-cta{display:flex;flex-direction:column;gap:9px;align-items:stretch;text-align:center}
  .btn-claim{
    background:linear-gradient(90deg,#ff2d8f,#ff7a2f);
    border-radius:999px;padding:15px;
    font-weight:800;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;
  }
  .btn-claim:hover{filter:brightness(1.08)}
  /* desktop: the CTA column is narrow, so stack the small print */
  .offer-card .tc-foot{flex-direction:column;gap:2px;text-align:center;margin-top:9px}

  /* ---------------- FOOTER ---------------- */
  footer{background:var(--ink-3);padding:56px 0 40px;border-top:1px solid rgba(255,255,255,.1)}
  /* footer: brand and legal block centred at every width */
  footer .wrap{
    display:flex;flex-direction:column;align-items:center;text-align:center;
  }
  .foot-legal{
    width:100%;
    display:flex;flex-direction:column;align-items:center;gap:16px;
  }
  .age{
    display:grid;place-items:center;
    width:42px;height:42px;border-radius:50%;
    border:2px solid rgba(255,255,255,.5);
    font-weight:900;font-size:13px;
  }
  .disclaimer{
    margin:0;max-width:78ch;
    font-size:11.5px;line-height:1.7;opacity:.5;
  }

  /* ---------------- RESPONSIVE ----------------
     One breakpoint only. Everything below 1100px — tablet and phone alike —
     gets the same stacked treatment, so there is no in-between tier. */
  @media (max-width:1100px){
    /* ---- hero ---- */
    /* svh, not vh: vh includes the collapsing browser chrome on mobile,
       which would push the card below the fold on first paint */
    .hero{min-height:100svh}
    .scroll-cue{display:none}
    .nav-cta--wide{display:none}
    .nav-cta--narrow{display:inline-flex}

    /* flatten both columns into the grid so the order can be controlled */
    .hero-left,.hero-right{display:contents}
    .hero-grid{
      grid-template-columns:1fr;align-items:start;
      gap:0;
      /* Anchor the content to the bottom of the 100svh hero. All leftover
         height collects above the headline as the face reveal, so it is as
         large as the screen allows and collapses to nothing on short screens
         instead of pushing the card past the fold. */
      align-content:end;
      /* bottom gap matches the spacing above the card so the hero doesn't
         look like the card is falling out of it */
      padding:16px 0 44px;
    }
    h1{order:1;max-width:none;text-align:center;margin-bottom:24px}
    .cta-row{display:none}     /* the card CTA is the only action here */
    .top-casino{order:3;width:100%;margin:8px 0 0}

    /* socials leave the hero for their own strip, which frees the height the
       hero needed to fit one screen */
    .hero .socials{display:none}
    .social-strip{display:block;margin-top:40px}
    .social-strip .socials{
      margin:0 auto;max-width:540px;
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
    /* 3 pills in 2 columns leaves a half-width orphan — let the money link
       take the whole last row instead. Centre its contents: at full width the
       icon+label would otherwise sit far left while the two above look centred. */
    .social-strip .social-of{
      grid-column:1/-1;justify-content:center;
      /* the pill's 9px/15px padding is tuned for a left-aligned icon; even
         weights are needed for the content to read as centred */
      padding-left:15px;
    }
    .social-strip .social-of > span:last-child{flex:0 0 auto}
    /* photo becomes a full-bleed backdrop so the copy stays readable */
    .hero-photo{
      width:100%;max-width:none;opacity:.5;
      -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 62%, transparent 92%);
      -webkit-mask-composite:source-over;
      mask-image:linear-gradient(to bottom, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 62%, transparent 92%);
      mask-composite:add;
    }

    /* ---- august promo ---- */
    .promo{padding:52px 0}
    .promo-card{
      grid-template-columns:1fr;gap:28px;align-items:start;
      padding:26px 22px;text-align:center;
    }
    .promo-lead{max-width:none}
    .promo-list{align-items:center}
    .promo-list li{text-align:left;max-width:30ch}
    .promo-list li:before{margin-left:0}
    /* iOS/iPadOS zooms the whole page when a focused field's text is under
       16px. Bumping the size is the fix — NOT maximum-scale/user-scalable=no,
       which would also block pinch-zoom and break accessibility. */
    .signup input,.signup select,.signup textarea{font-size:16px}
    /* 16px in a 12px-padded box is tight; even it out */
    .field input,.field select{padding:13px 14px}

    .field span,.form-note,.form-status{text-align:center}
    .signup{text-align:left}
    .consent{text-align:left}

    /* ---- sections ---- */
    .sec-head{flex-direction:column;align-items:center;text-align:center}
    .sec-head p{margin-left:auto;margin-right:auto}

    /* ---- offer rows adopt the hero card layout exactly ---- */
    .offer-card{
      display:block;text-align:center;
      background:rgba(20,10,28,.72);
      border:1px solid rgba(255,255,255,.18);
      backdrop-filter:blur(22px);
      border-radius:var(--radius);
      padding:22px;
    }
    .offer-card:hover{transform:none;border-color:rgba(255,255,255,.18)}
    /* first spot keeps its warmer tint */
    .offer-card--top{
      background:linear-gradient(120deg,rgba(255,45,143,.22),rgba(255,122,47,.14) 60%,rgba(20,10,28,.7));
      border-color:rgba(255,180,90,.5);
    }
    .offer-card--top:hover{border-color:rgba(255,180,90,.5)}

    /* same full-width band as the hero card */
    .offer-card .logo-plate{
      align-self:auto;
      width:auto;height:92px;
      margin:-22px -22px 18px;
      border-radius:0;
      padding:16px 26px;
    }
    .oc-body h3{justify-content:center;font-size:19px;margin:0 0 16px}

    /* same gradient headline as the hero card */
    .oc-offer{
      font-size:21px;line-height:1.25;margin:0 0 8px;
      background:linear-gradient(90deg,#fff,#ffd9ea);
      -webkit-background-clip:text;background-clip:text;color:transparent;
    }
    .oc-offer em{color:inherit}

    .oc-terms{font-size:13px;opacity:.8;line-height:1.5;margin:0 0 18px}
    .tags{justify-content:center;margin:0 0 18px}

    .oc-cta{display:block}
    .btn-claim{
      display:block;padding:16px;
      font-size:13.5px;letter-spacing:.1em;
    }
    .offer-card .tc-foot{
      flex-direction:row;text-align:left;
      gap:0;margin-top:14px;
    }
  }