/* =============================================================
   Lovense x 3DXChat promo landing page
   1.  Design tokens
   2.  Reset and base
   3.  Layout helpers
   4.  Reusable components (buttons, badges, glass, headings)
   5.  Header
   6.  Hero
   7.  How it works
   8.  Claim form
   9.  Benefits
   10. FAQ
   11. Final CTA
   12. Footer
   13. Motion
   14. Responsive
   ============================================================= */

/* ------------------------- 1. Tokens ------------------------- */
:root {
    /* Surfaces */
    --bg-900: #05040a;
    --bg-800: #0a0716;
    --bg-700: #0f0a20;
    --midnight: #0d1230;
    --plum: #1a0f2e;

    /* Glass */
    --surface: rgb(255 255 255 / 0.045);
    --surface-2: rgb(255 255 255 / 0.075);
    --stroke: rgb(255 255 255 / 0.09);
    --stroke-strong: rgb(255 255 255 / 0.16);

    /* Accents */
    --accent-pink: #ff3d8b;
    --accent-magenta: #d926c4;
    --accent-violet: #8b5cf6;
    --accent-blue: #38bdf8;

    /* Text */
    --text: #f4f2ff;
    --text-muted: #c9c6dd;
    --text-dim: #9c98b5;

    /* Gradients */
    --grad-brand: linear-gradient(115deg, var(--accent-pink) 0%, var(--accent-magenta) 45%, var(--accent-violet) 100%);
    --grad-text: linear-gradient(100deg, #ff6ba6 0%, #d472ff 50%, #6ec8ff 100%);
    --grad-glass: linear-gradient(160deg, rgb(255 255 255 / 0.08) 0%, rgb(255 255 255 / 0.02) 100%);

    /* Spacing scale */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4.5rem;
    --space-9: 6.5rem;

    /* Radii */
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 24px;
    --r-xl: 32px;
    --r-pill: 999px;

    /* Shadows and glows */
    --shadow-card: 0 24px 60px -24px rgb(0 0 0 / 0.75);
    --shadow-raised: 0 32px 80px -28px rgb(0 0 0 / 0.85);
    --shadow-glow: 0 14px 40px -12px rgb(255 61 139 / 0.55);
    --shadow-glow-strong: 0 18px 55px -10px rgb(255 61 139 / 0.7);

    /* Layout */
    --maxw: 1200px;
    --maxw-narrow: 780px;
    --header-h: 72px;

    --ease: cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* ---------------------- 2. Reset and base -------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--space-5));
    -webkit-text-size-adjust: 100%;
    /* Decorative absolute shapes must never create a horizontal scrollbar. */
    overflow-x: hidden;
}

body {
    margin: 0;
    background-color: var(--bg-900);
    color: var(--text);
    font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.65;
    letter-spacing: -0.005em;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Ambient background lighting: two blurred colour fields plus a faint grid. */
body::before,
body::after {
    content: "";
    position: fixed;
    z-index: -2;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(90px);
}

body::before {
    top: -18vmax;
    left: -12vmax;
    width: 62vmax;
    height: 62vmax;
    background:
        radial-gradient(circle at 40% 40%, rgb(255 61 139 / 0.3), transparent 62%),
        radial-gradient(circle at 70% 25%, rgb(139 92 246 / 0.26), transparent 60%);
}

body::after {
    right: -20vmax;
    bottom: -26vmax;
    width: 70vmax;
    height: 70vmax;
    background:
        radial-gradient(circle at 55% 55%, rgb(56 189 248 / 0.22), transparent 62%),
        radial-gradient(circle at 30% 70%, rgb(217 38 196 / 0.2), transparent 62%);
}

/* Grid overlay, kept behind the ambient colour fields. */
main::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background-image:
        linear-gradient(to bottom, rgb(255 255 255 / 0.028) 1px, transparent 1px),
        linear-gradient(to right, rgb(255 255 255 / 0.028) 1px, transparent 1px);
    background-size: 76px 76px;
    mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
    -webkit-mask-image: radial-gradient(circle at 50% 22%, #000 0%, transparent 72%);
}

img,
svg {
    display: block;
    max-width: 100%;
}

/* Both .claim-form and .claim-success set a display value, which would outrank
   the display:none the UA stylesheet gives [hidden]. Without this the hidden
   attribute has no effect on them at all. */
[hidden] {
    display: none !important;
}

h1,
h2,
h3 {
    margin: 0;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

h1 {
    font-size: clamp(2.1rem, 4.2vw, 3.25rem);
}

/* Keeps each headline sentence on its own line group. */
.h1-line {
    display: block;
}

h2 {
    font-size: clamp(1.85rem, 4vw, 2.85rem);
}

h3 {
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: inherit;
    text-decoration: none;
}

/* Single, consistent, high-contrast focus treatment. */
:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}

.skip-link {
    position: absolute;
    top: var(--space-3);
    left: 50%;
    z-index: 100;
    padding: var(--space-3) var(--space-5);
    transform: translate(-50%, -160%);
    border-radius: var(--r-pill);
    background: var(--accent-violet);
    color: #fff;
    font-weight: 600;
    transition: transform 0.22s var(--ease);
}

.skip-link:focus-visible {
    transform: translate(-50%, 0);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --------------------- 3. Layout helpers --------------------- */
.shell {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--space-5);
}

.shell-narrow {
    max-width: var(--maxw-narrow);
}

.section {
    position: relative;
    padding-block: var(--space-8);
}

.section-head {
    max-width: 640px;
    margin-bottom: var(--space-7);
}

.section-head h2 {
    margin-bottom: var(--space-4);
}

.section-lede {
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* ----------------------- 4. Components ----------------------- */
.glass {
    position: relative;
    border: 1px solid var(--stroke);
    border-radius: var(--r-lg);
    background: var(--grad-glass), rgb(10 7 22 / 0.55);
    background-origin: border-box;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-card), inset 0 1px 0 rgb(255 255 255 / 0.07);
    backdrop-filter: blur(18px) saturate(130%);
    -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.eyebrow {
    margin-bottom: var(--space-4);
    color: var(--accent-pink);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.grad-text {
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.4rem 0.85rem;
    border-radius: var(--r-pill);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.badge-accent {
    background: var(--grad-brand);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.badge-soft {
    border: 1px solid var(--stroke-strong);
    background: var(--surface-2);
    color: var(--text-muted);
    text-transform: uppercase;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.8rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    /* The transparent border shrinks the default (padding-box) background area,
       so a tiled gradient would wrap and show a 1px sliver of the opposite end
       colour at the left and right edges. */
    background-origin: border-box;
    background-repeat: no-repeat;
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform 0.22s var(--ease),
        box-shadow 0.22s var(--ease),
        border-color 0.22s var(--ease),
        background-color 0.22s var(--ease),
        filter 0.22s var(--ease);
}

.btn-sm {
    padding: 0.6rem 1.15rem;
    font-size: 0.9rem;
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1.03rem;
}

.btn-block {
    width: 100%;
}

/* background-image, not the background shorthand: the shorthand would reset
   the background-origin/repeat longhands set above. */
.btn-primary {
    background-image: var(--grad-brand);
    color: #fff;
    box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-strong);
    filter: saturate(115%) brightness(1.06);
}

.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

/* Loudest button on the page: the first step of the funnel is the purchase. */
.btn-buy {
    position: relative;
    background-image: linear-gradient(115deg, #ff2d7a 0%, #ff4fa3 38%, #b23bff 100%);
    color: #fff;
    box-shadow:
        0 16px 46px -12px rgb(255 45 122 / 0.75),
        inset 0 1px 0 rgb(255 255 255 / 0.25);
}

/* Slow halo that draws the eye without animating layout. Scoped to the hero
   button: inside a glass card a z-index:-1 layer would sit under the card. */
.hero-actions .btn-buy::after {
    content: "";
    position: absolute;
    inset: -4px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(115deg, #ff2d7a, #b23bff);
    opacity: 0.4;
    filter: blur(8px);
    animation: haloPulse 3.2s var(--ease) infinite;
}

.btn-buy:hover {
    transform: translateY(-2px);
    box-shadow:
        0 22px 60px -12px rgb(255 45 122 / 0.9),
        inset 0 1px 0 rgb(255 255 255 / 0.3);
    filter: saturate(112%) brightness(1.05);
}

.btn-buy:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

.btn-icon {
    width: 19px;
    height: 19px;
    flex: none;
}

.btn-ghost {
    border-color: var(--stroke-strong);
    background: var(--surface);
    color: var(--text);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Accent outline: clearly secondary to the buy button, still prominent. */
.btn-ghost-accent {
    border-color: rgb(255 61 139 / 0.5);
    background: rgb(255 61 139 / 0.1);
    color: #ffa6c8;
}

.btn-ghost-accent:hover {
    border-color: rgb(255 61 139 / 0.8);
    background: rgb(255 61 139 / 0.16);
    color: #ffc2da;
}

.btn-ghost:hover {
    transform: translateY(-2px);
    border-color: rgb(255 255 255 / 0.32);
    background: var(--surface-2);
}

.btn-ghost:active {
    transform: translateY(0);
}

/* ------------------------- 5. Header ------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
    background: rgb(5 4 10 / 0.7);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.logo-mark {
    position: relative;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 9px;
    background: var(--grad-brand);
    box-shadow: 0 0 18px -2px rgb(255 61 139 / 0.7);
}

.logo-mark::after {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: 50%;
    background: rgb(5 4 10 / 0.72);
}

.logo-text {
    font-size: 1.02rem;
}

.logo-x {
    color: var(--accent-pink);
}

/* The label is split across two nodes, so the flex gap stands in for the
   word space between them. */
.header-cta {
    gap: 0.25em;
}

.nav-list {
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

.nav-list a {
    position: relative;
    padding-block: var(--space-2);
    color: var(--text-muted);
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.2s var(--ease);
}

.nav-list a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--grad-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.24s var(--ease);
}

.nav-list a:hover {
    color: var(--text);
}

.nav-list a:hover::after {
    transform: scaleX(1);
}

/* -------------------------- 6. Hero ------------------------- */
.hero {
    position: relative;
    padding-block: clamp(var(--space-7), 8vw, var(--space-9)) var(--space-8);
}

.hero-grid {
    display: grid;
    gap: var(--space-7);
    align-items: center;
}

/* Grid items default to min-width:auto, which would let the promo card's
   min-content width stretch the column past the viewport on small screens. */
.hero-grid > * {
    min-width: 0;
}

.hero-copy h1 {
    margin-bottom: var(--space-5);
}

.lede {
    max-width: 52ch;
    margin-bottom: var(--space-6);
    color: var(--text-muted);
    font-size: clamp(1.02rem, 1.6vw, 1.16rem);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.trust-note {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 500;
}

.trust-note li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tick {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--accent-blue);
}

/* Hero promotional card */
.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

.promo-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    width: 100%;
    max-width: 420px;
    padding: clamp(var(--space-4), 5vw, var(--space-6));
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgb(255 255 255 / 0.09);
}

.promo-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.promo-card-tag {
    color: var(--text-dim);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* Gift-code ticket, CSS only */
.ticket {
    position: relative;
    margin-bottom: var(--space-5);
}

.ticket-glow {
    position: absolute;
    inset: -18%;
    background: radial-gradient(ellipse at 50% 50%, rgb(217 38 196 / 0.38), transparent 68%);
    filter: blur(26px);
}

.ticket-body {
    position: relative;
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: var(--r-md);
    background:
        linear-gradient(150deg, rgb(255 61 139 / 0.16), rgb(56 189 248 / 0.12)),
        rgb(13 8 28 / 0.85);
    background-origin: border-box;
    background-repeat: no-repeat;
    /* Perforated left/right notches */
    mask-image:
        radial-gradient(circle 11px at 0 50%, transparent 99%, #000 100%),
        radial-gradient(circle 11px at 100% 50%, transparent 99%, #000 100%);
    -webkit-mask-image:
        radial-gradient(circle 11px at 0 50%, transparent 99%, #000 100%),
        radial-gradient(circle 11px at 100% 50%, transparent 99%, #000 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
}

.ticket-label {
    color: var(--text-dim);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* Abstract code characters, deliberately non-textual placeholders. */
.ticket-code {
    display: flex;
    align-items: center;
    gap: 7px;
}

.ticket-code i {
    width: 17px;
    height: 24px;
    border-radius: 5px;
    background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.16));
}

.ticket-code em {
    color: var(--accent-pink);
    font-style: normal;
    font-size: 1.1rem;
}

.ticket-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.ticket-chip {
    width: 34px;
    height: 24px;
    flex: none;
    border-radius: 6px;
    background: linear-gradient(140deg, #ffd483, #d98b2a);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}

.ticket-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 22px;
}

.ticket-bars b {
    width: 3px;
    border-radius: 2px;
    background: rgb(255 255 255 / 0.4);
}

.ticket-bars b:nth-child(odd) { height: 100%; }
.ticket-bars b:nth-child(even) { height: 62%; }
.ticket-bars b:nth-child(3n) { width: 5px; }

.promo-card-note {
    color: var(--text-muted);
    font-size: 0.88rem;
    text-align: center;
}

/* Abstract, non-explicit product silhouette placeholder. */
.silhouette {
    position: relative;
    height: 92px;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 0.07);
}

.silhouette span {
    position: absolute;
    display: block;
}

.silhouette-orb {
    top: 34px;
    left: 50%;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(150deg, rgb(255 107 166 / 0.9), rgb(139 92 246 / 0.75));
    box-shadow: 0 0 34px -4px rgb(255 61 139 / 0.75);
    transform: translateX(-92%);
}

.silhouette-arc {
    top: 28px;
    left: 50%;
    width: 96px;
    height: 58px;
    border: 2px solid rgb(255 255 255 / 0.14);
    border-radius: var(--r-pill);
    transform: translateX(-38%) rotate(-14deg);
}

.silhouette-tail {
    top: 52px;
    left: 50%;
    width: 60px;
    height: 12px;
    border-radius: var(--r-pill);
    background: linear-gradient(90deg, rgb(56 189 248 / 0.7), transparent);
    transform: translateX(18%);
}

/* Decorative ring behind the promo card */
.orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(560px, 100%);
    aspect-ratio: 1;
    border: 1px solid rgb(255 255 255 / 0.06);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.orbit-ring::before,
.orbit-ring::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.orbit-ring::before {
    inset: 14%;
    border: 1px dashed rgb(255 255 255 / 0.07);
}

.orbit-ring::after {
    top: 8%;
    left: 50%;
    width: 9px;
    height: 9px;
    background: var(--accent-blue);
    box-shadow: 0 0 16px 2px rgb(56 189 248 / 0.8);
}

/* --------------------- 7. How it works ---------------------- */
.steps {
    display: grid;
    gap: var(--space-5);
    counter-reset: step;
}

.step-card {
    position: relative;
    padding: var(--space-6);
    transition:
        transform 0.26s var(--ease),
        border-color 0.26s var(--ease),
        box-shadow 0.26s var(--ease);
}

.step-card:hover {
    transform: translateY(-4px);
    border-color: rgb(255 109 176 / 0.4);
    box-shadow: var(--shadow-raised), 0 0 42px -18px rgb(255 61 139 / 0.6);
}

.step-num {
    display: block;
    margin-bottom: var(--space-3);
    background: var(--grad-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 2.9rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.05em;
}

.step-icon,
.benefit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: var(--space-4);
    border: 1px solid var(--stroke-strong);
    border-radius: 14px;
    background: var(--surface-2);
    color: var(--accent-pink);
    transition: color 0.26s var(--ease), border-color 0.26s var(--ease);
}

.step-icon svg,
.benefit-icon svg {
    width: 23px;
    height: 23px;
}

.step-card:hover .step-icon,
.benefit-card:hover .benefit-icon {
    border-color: rgb(255 109 176 / 0.45);
    color: #ff8ab8;
}

.step-card h3,
.benefit-card h3 {
    margin-bottom: var(--space-2);
}

.step-card p,
.benefit-card p {
    color: var(--text-muted);
    font-size: 0.96rem;
}

.step-cta {
    margin-top: var(--space-5);
}

/* ---------------------- 8. Claim form ----------------------- */
.section-claim {
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
}

.claim-card {
    padding: clamp(var(--space-5), 4vw, var(--space-8));
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-raised), inset 0 1px 0 rgb(255 255 255 / 0.09);
}

.claim-head {
    margin-bottom: var(--space-6);
    text-align: center;
}

.claim-head .badge-soft {
    margin-bottom: var(--space-4);
}

.claim-head h2 {
    margin-bottom: var(--space-4);
}

.claim-head .section-lede {
    margin-inline: auto;
    max-width: 46ch;
}

.claim-form {
    display: grid;
    gap: var(--space-5);
}

.field {
    display: grid;
    gap: var(--space-2);
}

.field label {
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.field input {
    width: 100%;
    padding: 0.95rem 1.1rem;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--r-md);
    background: rgb(5 4 10 / 0.55);
    color: var(--text);
    font-family: inherit;
    font-size: 1rem;
    transition:
        border-color 0.22s var(--ease),
        box-shadow 0.22s var(--ease),
        background-color 0.22s var(--ease);
}

.field input::placeholder {
    color: rgb(156 152 181 / 0.75);
}

.field input:hover {
    border-color: rgb(255 255 255 / 0.26);
}

.field input:focus {
    outline: none;
    border-color: var(--accent-pink);
    background: rgb(5 4 10 / 0.75);
    box-shadow: 0 0 0 4px rgb(255 61 139 / 0.16);
}

.field input:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 2px;
}

.field-hint {
    color: var(--text-dim);
    font-size: 0.83rem;
    line-height: 1.5;
}

.field-check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--stroke);
    border-radius: var(--r-md);
    background: var(--surface);
}

.field-check input {
    width: 20px;
    height: 20px;
    flex: none;
    margin: 2px 0 0;
    accent-color: var(--accent-pink);
    cursor: pointer;
}

.field-check label {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    cursor: pointer;
}

.form-privacy {
    color: var(--text-dim);
    font-size: 0.85rem;
    text-align: center;
}

/* Honeypot: off-screen rather than display:none, which bots learned to skip. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.turnstile-field {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
}

/* The widget lives in a cross-origin iframe, so it can only be positioned from
   the outside. Turnstile sizes .cf-turnstile itself through a stylesheet it
   injects at runtime, which would win over a single-class rule of ours; hence
   the two-class selector. Forcing full width and centring the iframe inside
   works whatever width Turnstile decides to use. */
.turnstile-field .cf-turnstile {
    display: flex;
    justify-content: center;
    width: 100%;
}

.field-error {
    color: #ff9db4;
    font-size: 0.85rem;
    line-height: 1.5;
}

/* Empty until the server reports a problem for this field. */
.field-error:empty {
    display: none;
}

.field input[aria-invalid="true"],
.field-check input[aria-invalid="true"] {
    border-color: #ff5c85;
    box-shadow: 0 0 0 4px rgb(255 92 133 / 0.16);
}

/* Shown in place of the whole form once the claim is stored. */
.claim-success {
    display: grid;
    justify-items: center;
    gap: var(--space-4);
    padding-block: var(--space-6);
    text-align: center;
}

.claim-success:focus-visible {
    outline: 2px solid var(--accent-blue);
    outline-offset: 6px;
}

.claim-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border: 1px solid rgb(52 211 153 / 0.45);
    border-radius: 50%;
    background: rgb(52 211 153 / 0.12);
    color: #8ff0c8;
    box-shadow: 0 0 38px -10px rgb(52 211 153 / 0.7);
}

.claim-success-icon svg {
    width: 30px;
    height: 30px;
}

.claim-success h3 {
    font-size: clamp(1.5rem, 3vw, 1.9rem);
}

.claim-success p {
    max-width: 46ch;
    color: var(--text-muted);
    font-size: 1rem;
}

.claim-success-note {
    color: var(--text-dim);
    font-size: 0.87rem;
}

.form-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-inline: auto;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--stroke-strong);
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    text-align: center;
}

.form-status:empty {
    display: none;
}

.form-status[data-state="info"] {
    border-color: rgb(56 189 248 / 0.35);
    background: rgb(56 189 248 / 0.1);
    color: #9ddcfb;
}

.form-status[data-state="success"] {
    border-color: rgb(52 211 153 / 0.4);
    background: rgb(52 211 153 / 0.12);
    color: #8ff0c8;
}

.form-status[data-state="error"] {
    border-color: rgb(255 92 133 / 0.42);
    background: rgb(255 92 133 / 0.12);
    color: #ffb3c4;
}

.btn[disabled] {
    cursor: not-allowed;
    opacity: 0.75;
}

.btn[disabled]:hover {
    transform: none;
    filter: none;
}

.btn.is-loading::after {
    content: "";
    width: 15px;
    height: 15px;
    border: 2px solid rgb(255 255 255 / 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ----------------------- 9. Benefits ------------------------ */
.benefits {
    display: grid;
    gap: var(--space-5);
}

.benefit-card {
    padding: var(--space-6);
    transition:
        transform 0.26s var(--ease),
        border-color 0.26s var(--ease),
        box-shadow 0.26s var(--ease);
}

.benefit-card:hover {
    transform: translateY(-4px);
    border-color: rgb(139 92 246 / 0.42);
    box-shadow: var(--shadow-raised), 0 0 40px -18px rgb(139 92 246 / 0.65);
}

/* -------------------------- 10. FAQ ------------------------- */
.faq-list {
    display: grid;
    gap: var(--space-3);
}

.faq-item {
    overflow: hidden;
    border-radius: var(--r-md);
    transition: border-color 0.24s var(--ease), background-color 0.24s var(--ease);
}

.faq-item:hover {
    border-color: var(--stroke-strong);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    font-size: 1.03rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    cursor: pointer;
    list-style: none;
    transition: color 0.2s var(--ease);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::marker {
    content: "";
}

.faq-item summary:hover {
    color: #ff8ab8;
}

.chevron {
    position: relative;
    width: 30px;
    height: 30px;
    flex: none;
    border: 1px solid var(--stroke-strong);
    border-radius: 50%;
    background: var(--surface);
    transition: transform 0.26s var(--ease), border-color 0.26s var(--ease);
}

.chevron::before,
.chevron::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform-origin: center;
}

.chevron::before {
    transform: translate(-72%, -50%) rotate(45deg);
}

.chevron::after {
    transform: translate(-28%, -50%) rotate(-45deg);
}

.faq-item[open] .chevron {
    border-color: rgb(255 109 176 / 0.5);
    transform: rotate(180deg);
}

.faq-item[open] summary {
    color: #ff8ab8;
}

.faq-answer {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--text-muted);
    font-size: 0.97rem;
}

.faq-answer p {
    max-width: 62ch;
    padding-top: var(--space-4);
    border-top: 1px solid rgb(255 255 255 / 0.07);
}

/* ----------------------- 11. Final CTA ---------------------- */
.section-final {
    padding-bottom: var(--space-9);
}

.final-card {
    position: relative;
    overflow: hidden;
    padding: clamp(var(--space-6), 5vw, var(--space-8)) var(--space-5);
    border-radius: var(--r-xl);
    text-align: center;
}

.final-glow {
    position: absolute;
    top: -55%;
    left: 50%;
    width: 78%;
    aspect-ratio: 1;
    background: radial-gradient(circle, rgb(255 61 139 / 0.3), transparent 62%);
    filter: blur(50px);
    transform: translateX(-50%);
    pointer-events: none;
}

.final-card h2 {
    position: relative;
    margin-bottom: var(--space-4);
}

.final-card p {
    position: relative;
    max-width: 46ch;
    margin: 0 auto var(--space-6);
    color: var(--text-muted);
    font-size: 1.05rem;
}

.final-card .btn {
    position: relative;
}

/* Needs .final-card in the selector to outrank `.final-card p` above. */
.final-card .final-alt {
    position: relative;
    margin-top: var(--space-6);
    margin-bottom: 0;
    color: var(--text-dim);
    font-size: 0.92rem;
}

.buy-link {
    color: #ffa6c8;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgb(255 61 139 / 0.45);
    text-underline-offset: 4px;
    transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
}

.buy-link:hover {
    color: #ffc2da;
    text-decoration-color: currentColor;
}

/* ------------------------ 12. Footer ------------------------ */
.site-footer {
    padding-block: var(--space-7);
    border-top: 1px solid rgb(255 255 255 / 0.07);
    background: rgb(5 4 10 / 0.6);
}

.footer-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid rgb(255 255 255 / 0.06);
}

.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
}

.footer-nav a {
    color: var(--text-dim);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.2s var(--ease);
}

.footer-nav a:hover {
    color: var(--text);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.age-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.8rem;
    border: 1px solid rgb(255 61 139 / 0.45);
    border-radius: var(--r-pill);
    background: rgb(255 61 139 / 0.12);
    color: #ff9ac2;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.disclaimer {
    max-width: 74ch;
    margin-top: var(--space-5);
    color: var(--text-dim);
    font-size: 0.83rem;
    line-height: 1.7;
}

.copyright {
    margin-top: var(--space-4);
    color: rgb(156 152 181 / 0.72);
    font-size: 0.8rem;
}

/* ------------------------ 13. Motion ------------------------ */
/* Falls back to the static glow set on the element when motion is reduced. */
@keyframes haloPulse {
    0%, 100% {
        opacity: 0.4;
        transform: scale(1);
    }
    50% {
        opacity: 0.75;
        transform: scale(1.04);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.rise {
    animation: rise 0.7s var(--ease) both;
    animation-delay: var(--d, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-delay: 0ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------------------- 14. Responsive ---------------------- */
@media (max-width: 719px) {
    /* Nav links collapse; the sticky CTA keeps the conversion path open. */
    .site-nav {
        display: none;
    }

    .header-inner {
        gap: var(--space-4);
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn,
    .final-card .btn,
    .step-cta {
        width: 100%;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Very narrow phones: tighten the header so the logo and CTA both fit. */
@media (max-width: 430px) {
    .shell {
        padding-inline: var(--space-4);
    }

    .logo-text {
        font-size: 0.94rem;
    }

    .cta-rest {
        display: none;
    }
}

@media (min-width: 720px) {
    .steps,
    .benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section-head {
        margin-bottom: var(--space-8);
    }
}

@media (min-width: 1000px) {
    .shell {
        padding-inline: var(--space-6);
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
        gap: var(--space-8);
    }

    .step-card {
        padding: var(--space-6) var(--space-6) var(--space-7);
    }

    /* Connected visual flow between the process cards on desktop. */
    .step-card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(var(--space-5) * -1 - 1px);
        width: var(--space-5);
        height: 1px;
        background: linear-gradient(90deg, rgb(255 61 139 / 0.55), rgb(139 92 246 / 0.2));
    }

    .step-card:not(:last-child)::before {
        content: "";
        position: absolute;
        top: 50%;
        right: calc(var(--space-5) * -1 - 3px);
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--accent-pink);
        box-shadow: 0 0 12px 1px rgb(255 61 139 / 0.8);
        transform: translateY(-2.5px);
    }
}