/* ═══════════════════════════════════════════════════════════
   Bloom — storefront
   One violet accent, used flat. Depth comes from surface
   elevation and shadow, not from multi-colour gradients.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap');

:root {
    --violet:      #8B5CF6;
    --violet-lite: #B39BFB;
    --violet-deep: #6D28D9;
    --violet-ink:  #3B1E77;

    --bg:        #08060F;
    --bg-2:      #0C0918;
    --surface:   #120D22;
    --surface-2: #17112C;
    --line:      rgba(179,155,251,.11);
    --line-2:    rgba(179,155,251,.2);

    --text:  #EDE9F8;
    --muted: #9B90BC;
    --dim:   #6D6390;

    --good: #5FD07A;

    --r-sm: 10px;
    --r:    14px;
    --r-lg: 20px;
    --r-xl: 28px;

    --ease: cubic-bezier(.22,1,.36,1);
    --ease-out: cubic-bezier(.16,1,.3,1);
    --shadow: 0 24px 60px -18px rgba(0,0,0,.8);
    --shadow-violet: 0 0 0 1px rgba(139,92,246,.25), 0 26px 60px -24px rgba(139,92,246,.6);

    --nav-h: 72px;
    --max: 1240px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
body.cart-open { overflow: hidden; }

h1,h2,h3,h4 { font-family: "Space Grotesk", Inter, sans-serif; line-height: 1.08; letter-spacing: -.02em; margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }

/* One accent word colour — flat violet, no rainbow. */
.grad { color: var(--violet-lite); }

/* ─────────── backdrop ─────────── */

.grain {
    position: fixed; inset: -50%; z-index: 0; pointer-events: none; opacity: .03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-3%,2%); }
    40% { transform: translate(2%,-3%); }
    60% { transform: translate(-2%,-2%); }
    80% { transform: translate(3%,1%); }
}

.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(130px); opacity: .42; will-change: transform; }
.blob.b1 { width: 46vw; height: 46vw; left: -12vw; top: -10vw;
      background: radial-gradient(circle, rgba(139,92,246,.7), transparent 68%);
      animation: drift1 26s var(--ease) infinite; }
.blob.b2 { width: 40vw; height: 40vw; right: -10vw; top: 22vh;
      background: radial-gradient(circle, rgba(109,40,217,.6), transparent 68%);
      animation: drift2 32s var(--ease) infinite; }
.blob.b3 { width: 44vw; height: 44vw; left: 26vw; bottom: -18vw;
      background: radial-gradient(circle, rgba(179,155,251,.32), transparent 68%);
      animation: drift3 29s var(--ease) infinite; }
@keyframes drift1 { 50% { transform: translate(12vw, 10vh) scale(1.18); } }
@keyframes drift2 { 50% { transform: translate(-14vw, 8vh) scale(.86); } }
@keyframes drift3 { 50% { transform: translate(8vw, -12vh) scale(1.12); } }

/* ─────────── cursor ─────────── */

.cursor { position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; mix-blend-mode: screen; }
.cursor-dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; transform: translate(-50%,-50%); }
.cursor-ring {
    position: absolute; width: 36px; height: 36px; border-radius: 50%;
    border: 1.5px solid rgba(179,155,251,.65); transform: translate(-50%,-50%);
    transition: width .3s var(--ease), height .3s var(--ease), border-color .3s, background .3s;
}
.cursor.is-hot .cursor-ring { width: 60px; height: 60px; border-color: var(--violet); background: rgba(139,92,246,.12); }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ─────────── scroll progress ─────────── */

.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200; background: rgba(255,255,255,.05); }
.scroll-progress i { display: block; height: 100%; width: 0%; background: var(--violet); box-shadow: 0 0 12px rgba(139,92,246,.9); }

/* ─────────── nav ─────────── */

.nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 150; height: var(--nav-h);
    display: flex; align-items: center; gap: 32px; padding: 0 34px;
    border-bottom: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease);
}
.nav.is-stuck { background: rgba(10,7,20,.78); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); }

.brand { display: flex; align-items: center; gap: 11px; }
/* The crystal, not a violet tile with a ring punched out of it. The artwork
   is transparent, so the glow is a drop-shadow filter rather than a
   box-shadow - box-shadow would trace the element's square box and leave a
   rectangle of light around a crystal-shaped hole. */
.brand-mark {
    width: 34px; height: 34px;
    background: url("../assets/logo.png") center / contain no-repeat;
    display: grid; place-items: center; position: relative;
    filter: drop-shadow(0 5px 14px rgba(139,92,246,.75));
}
/* Kept in the markup on every page; nothing to draw now the mark is art. */
.brand-mark i { display: none; }
.brand-text { font-family: "Space Grotesk"; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.brand-text em { font-style: normal; color: var(--violet-lite); }

.nav-links { display: flex; gap: 6px; margin-left: auto; }
.nav-links a {
    position: relative; padding: 8px 15px; border-radius: 9px;
    font-size: 14.5px; font-weight: 500; color: var(--muted);
    transition: color .25s, background .25s;
}
.nav-links a:hover, .nav-links a.is-active { color: var(--text); background: rgba(139,92,246,.12); }
.nav-links a.is-active::after {
    content: ''; position: absolute; left: 15px; right: 15px; bottom: 2px;
    height: 2px; border-radius: 2px; background: var(--violet);
}

.nav-actions { display: flex; align-items: center; gap: 14px; }

.status-chip {
    display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px;
    background: rgba(95,208,122,.09); border: 1px solid rgba(95,208,122,.24);
    color: var(--good); font-size: 12.5px; font-weight: 600;
}
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--good);
         box-shadow: 0 0 0 0 rgba(95,208,122,.7); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(95,208,122,0); } 100% { box-shadow: 0 0 0 0 rgba(95,208,122,0); } }

.cart-btn {
    position: relative; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: rgba(139,92,246,.1); border: 1px solid var(--line);
    transition: background .25s, border-color .25s, transform .25s var(--ease);
}
.cart-btn:hover { background: rgba(139,92,246,.2); border-color: var(--line-2); }
.cart-btn.is-bumped { animation: bump .5s var(--ease); }
@keyframes bump { 40% { transform: scale(1.18) rotate(-6deg); } }
.cart-count {
    position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px;
    border-radius: 999px; background: var(--violet); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 19px; text-align: center;
    box-shadow: 0 3px 10px -2px rgba(139,92,246,.95);
    transform: scale(0); transition: transform .34s var(--ease);
}
.cart-count.is-on { transform: scale(1); }

/* ─────────── buttons ─────────── */

.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 14px 26px; border-radius: 12px;
    font-size: 15px; font-weight: 600; letter-spacing: -.01em;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), background .3s, border-color .3s;
    overflow: hidden; white-space: nowrap;
}
.btn-primary {
    background: var(--violet); color: #fff; font-weight: 700;
    box-shadow: 0 14px 32px -14px rgba(139,92,246,.95);
}
.btn-primary:hover { background: #7A4BEF; box-shadow: 0 20px 44px -14px rgba(139,92,246,.95); }
.btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
    transform: translateX(-130%); transition: transform .75s var(--ease);
}
.btn-primary:hover::after { transform: translateX(130%); }

.btn-ghost { background: rgba(179,155,251,.07); border: 1px solid var(--line-2); color: var(--text); }
.btn-ghost:hover { background: rgba(179,155,251,.14); border-color: rgba(179,155,251,.34); }

.btn-lg { padding: 17px 34px; font-size: 16.5px; }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.btn-block { width: 100%; }

/* ─────────── section shell ─────────── */

.section { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 110px 34px; }
.section-head { max-width: 700px; margin: 0 auto 58px; text-align: center; }
.kicker {
    display: inline-block; margin-bottom: 15px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: var(--violet-lite);
}
.section-head h2 { font-size: clamp(34px, 4.6vw, 52px); font-weight: 700; margin-bottom: 16px; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }

.page-head {
    position: relative; z-index: 1; max-width: var(--max); margin: 0 auto;
    padding: calc(var(--nav-h) + 70px) 34px 0;
}

/* ─────────── reveal ─────────── */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; }
    html { scroll-behavior: auto; }
}

/* ═══════════════════ HERO (home) ═══════════════════ */

.hero { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center;
        padding: calc(var(--nav-h) + 60px) 34px 90px; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-banner {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 42%;
    opacity: .3; filter: saturate(.85) contrast(1.05) hue-rotate(-8deg);
    transform: scale(1.06); will-change: transform;
}
.hero-veil {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 90% 60% at 50% 42%, transparent 0%, rgba(8,6,15,.6) 58%, var(--bg) 100%),
        linear-gradient(180deg, rgba(8,6,15,.92) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}
.hero-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(179,155,251,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(179,155,251,.05) 1px, transparent 1px);
    background-size: 62px 62px;
    mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 55% at 50% 45%, #000 20%, transparent 75%);
}

.hero-inner { max-width: 880px; text-align: center; position: relative; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; margin-bottom: 28px;
    border-radius: 999px; background: rgba(139,92,246,.1); border: 1px solid var(--line-2);
    backdrop-filter: blur(10px); font-size: 13px; font-weight: 500; color: var(--muted);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet-lite); box-shadow: 0 0 10px var(--violet); }

.hero-title { font-size: clamp(52px, 9vw, 106px); font-weight: 700; letter-spacing: -.035em; margin-bottom: 24px; }
.hero-title .line { display: block; }
.scramble { font-variant-ligatures: none; }

.hero-sub { max-width: 620px; margin: 0 auto 36px; font-size: clamp(16px, 1.7vw, 18.5px); color: var(--muted); }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 58px; }

.hero-stats {
    display: inline-flex; align-items: center; gap: 30px; padding: 20px 34px; border-radius: var(--r-lg);
    background: rgba(139,92,246,.07); border: 1px solid var(--line); backdrop-filter: blur(14px);
}
.hero-stats .stat { display: flex; flex-direction: column; gap: 2px; min-width: 92px; }
.hero-stats b { font-family: "Space Grotesk"; font-size: 30px; font-weight: 700; color: var(--violet-lite); line-height: 1.1; }
.hero-stats span { font-size: 12.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }
.hero-stats .divider { width: 1px; height: 38px; background: var(--line-2); }

.scroll-hint {
    position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
    width: 26px; height: 42px; border-radius: 14px; border: 1.5px solid rgba(179,155,251,.28);
    display: grid; place-items: start center; padding-top: 8px;
}
.scroll-hint i { width: 3px; height: 8px; border-radius: 2px; background: var(--violet-lite);
                 animation: scrollDot 1.9s var(--ease) infinite; }
@keyframes scrollDot { 0% { opacity:0; transform: translateY(0);} 40%{opacity:1;} 100% { opacity:0; transform: translateY(15px);} }

/* ─────────── ticker ─────────── */

.ticker {
    position: relative; z-index: 1; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    background: rgba(139,92,246,.04); padding: 17px 0; overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; align-items: center; gap: 34px; width: max-content; animation: ticker 32s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker span { font-family: "Space Grotesk"; font-size: 19px; font-weight: 600; color: var(--dim); transition: color .3s; }
.ticker i { color: var(--violet); font-style: normal; font-size: 12px; }
.ticker:hover span { color: var(--muted); }

/* ─────────── product notes ─────────── */

.showcase-notes { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.note { padding: 22px 24px; border-radius: var(--r); background: rgba(179,155,251,.045);
        border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.note b { font-family: "Space Grotesk"; font-size: 16px; font-weight: 600; }
.note span { font-size: 14px; color: var(--muted); line-height: 1.55; }

/* ═══════════════════ FEATURES ═══════════════════ */

.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
.fcard {
    position: relative; overflow: hidden; padding: 30px; border-radius: var(--r-lg);
    background: rgba(179,155,251,.045); border: 1px solid var(--line);
    transform-style: preserve-3d;
    transition: border-color .4s var(--ease), box-shadow .4s var(--ease), transform .18s var(--ease);
}
.fcard.span-2 { grid-column: span 2; }
.fcard:hover { border-color: rgba(139,92,246,.5); box-shadow: var(--shadow-violet); }
.fcard-glare {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(139,92,246,.24), transparent 62%);
    transition: opacity .4s var(--ease);
}
.fcard:hover .fcard-glare { opacity: 1; }

.fcard-icon { width: 46px; height: 46px; border-radius: 13px; margin-bottom: 20px; display: grid; place-items: center;
              background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.34); }
.fcard-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--violet-lite); stroke-width: 1.7;
                  stroke-linecap: round; stroke-linejoin: round; }
.fcard h3 { font-size: 21px; font-weight: 600; margin-bottom: 10px; }
.fcard p { color: var(--muted); font-size: 15px; margin: 0; }
.fcard-visual { margin-top: 24px; }

.esp-demo { position: relative; height: 118px; border-radius: 12px; background: rgba(0,0,0,.32);
            border: 1px solid var(--line); overflow: hidden; }
.esp-box { position: absolute; border: 1.5px solid var(--violet-lite); border-radius: 2px;
           animation: espFloat 5s var(--ease) infinite; }
.esp-box em { position: absolute; top: -17px; left: 50%; transform: translateX(-50%);
              font-style: normal; font-size: 9px; font-weight: 600; color: var(--violet-lite); white-space: nowrap; }
.esp-box .hp { position: absolute; left: -5px; top: 0; bottom: 0; width: 2.5px; border-radius: 2px;
               background: linear-gradient(180deg, var(--violet-lite) 78%, rgba(255,255,255,.14) 78%); }
.esp-box .hp.low { background: linear-gradient(180deg, rgba(255,255,255,.14) 62%, var(--violet) 62%); }
.esp-box.b1 { left: 16%; top: 34%; width: 30px; height: 52px; }
.esp-box.b2 { left: 46%; top: 22%; width: 40px; height: 68px; border-color: var(--violet); animation-delay: -1.7s; }
.esp-box.b2 em { color: var(--violet); }
.esp-box.b3 { left: 76%; top: 44%; width: 22px; height: 38px; border-color: #D9CBFD; animation-delay: -3.2s; }
.esp-box.b3 em { color: #D9CBFD; }
@keyframes espFloat { 50% { transform: translate(6px,-7px); } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500;
              background: rgba(179,155,251,.07); border: 1px solid var(--line); color: var(--muted);
              transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.chips span:hover { background: rgba(139,92,246,.2); color: var(--text); border-color: rgba(139,92,246,.45); transform: translateY(-2px); }

/* ═══════════════════ CHARACTER BAND ═══════════════════ */

.character { padding-top: 40px; padding-bottom: 40px; }
.char-inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }

.char-art { position: relative; display: grid; place-items: center; min-height: 520px; }

/* The figure is clipped to this disc rather than floated over the ring, so it
   cannot escape the circle at any viewport size. The disc has no fill of its
   own — the page shows through around him — and the ring is painted on top, so
   its edge crosses in front of the figure. */
.char-disc {
    position: absolute; z-index: 1;
    width: 78%; aspect-ratio: 1; border-radius: 50%;
    overflow: hidden;
    display: grid; place-items: center;
}

/* The source render is a wide frame with a lot of transparent padding: the
   figure is only 41.9% of the file's width and 93.3% of its height, and it does
   not sit dead centre (margins are 26.8/31.3 across and 6.7/0 down).

   Sizing to the disc would leave him small in the middle of it, so the image is
   blown up until the figure reaches ~0.95 of the disc diameter. The padding
   that spills past the edge is transparent and gets clipped away. */
.char-disc img {
    width: 215%; max-width: none; height: auto;
    animation: charBob 6s var(--ease) infinite;
}
/* Transform percentages resolve against the image's own box, so the X value
   cancels the off-centre padding measured above at any scale.

   The Y value pushes him down. The figure runs to the very bottom edge of the
   file (0% margin), so centred he finished 3% of a diameter ABOVE the arc —
   a flat horizontal cut hanging in mid-air. Sitting him 8% lower puts that cut
   outside the circle, so the arc does the clipping and he reads as standing
   inside the disc. The 12px bob rides on top and never lifts the cut back in. */
@keyframes charBob {
    0%, 100% { transform: translate(2.2%, 4.5%); }
    50%      { transform: translate(2.2%, calc(4.5% - 12px)); }
}

.char-glow { position: absolute; z-index: 0; width: 88%; aspect-ratio: 1; border-radius: 50%;
             background: radial-gradient(circle, rgba(139,92,246,.6), rgba(109,40,217,.22) 45%, transparent 68%);
             filter: blur(50px); animation: glowPulse 6s var(--ease) infinite; }
/* Above the figure, and deliberately unfilled so the interior stays see-through. */
.char-ring { position: absolute; z-index: 2; width: 78%; aspect-ratio: 1; border-radius: 50%;
             border: 1px solid rgba(179,155,251,.3); box-shadow: inset 0 0 70px rgba(139,92,246,.3);
             pointer-events: none; }
.char-ring::after {
    content: ''; position: absolute; inset: -1px; border-radius: 50%;
    background: conic-gradient(from var(--a,0deg), transparent 0deg, var(--violet-lite) 40deg, transparent 90deg);
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: spin 6s linear infinite;
}
@property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --a: 360deg; } }

.char-art.is-missing { display: none; }
.char-inner:has(.char-art.is-missing) { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; text-align: center; }
.char-inner:has(.char-art.is-missing) .char-stats { justify-content: center; }

.char-copy h2 { font-size: clamp(32px, 4.2vw, 46px); font-weight: 700; margin-bottom: 18px; }
.char-copy p { color: var(--muted); font-size: 16.5px; margin: 0 0 30px; }
.char-stats { display: flex; gap: 34px; flex-wrap: wrap; }
.cstat { display: flex; flex-direction: column; gap: 2px; }
.cstat b { font-family: "Space Grotesk"; font-size: 26px; font-weight: 700; color: var(--violet-lite); }
.cstat span { font-size: 12.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }

/* ═══════════════════ PRODUCTS LISTING ═══════════════════ */

.breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--dim); margin-bottom: 26px; }
.breadcrumb a { transition: color .25s; }
.breadcrumb a:hover { color: var(--violet-lite); }
.breadcrumb i { font-style: normal; opacity: .5; font-size: 11px; }
.breadcrumb .here { color: var(--muted); }

.page-title { font-size: clamp(36px, 5vw, 54px); font-weight: 700; margin-bottom: 14px; }
.page-lede { color: var(--muted); font-size: 17px; max-width: 620px; margin: 0 0 12px; }

.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pcard {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    border-radius: var(--r-lg); background: rgba(179,155,251,.045); border: 1px solid var(--line);
    transition: transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.pcard:hover { transform: translateY(-6px); border-color: rgba(139,92,246,.5); box-shadow: var(--shadow-violet); }
.pcard-media { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--violet-ink); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pcard:hover .pcard-media img { transform: scale(1.06); }
.pcard-badge {
    position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 13px; border-radius: 999px; backdrop-filter: blur(10px);
    background: rgba(95,208,122,.16); border: 1px solid rgba(95,208,122,.35);
    color: var(--good); font-size: 11.5px; font-weight: 700;
}
.pcard-body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.pcard-game { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--violet-lite); }
.pcard-body h3 { font-size: 21px; font-weight: 600; }
.pcard-body p { color: var(--muted); font-size: 14.5px; margin: 0; flex: 1; }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.pcard-price { display: flex; flex-direction: column; }
.pcard-price small { font-size: 11.5px; color: var(--dim); }
.pcard-price b { font-family: "Space Grotesk"; font-size: 24px; font-weight: 700; color: var(--violet-lite); }

.pcard.is-soon { opacity: .55; }
.pcard.is-soon .pcard-media { display: grid; place-items: center; background: rgba(179,155,251,.05); }
.pcard-soon-art { font-family: "Space Grotesk"; font-size: 15px; font-weight: 600; color: var(--dim); letter-spacing: .12em; }

/* ═══════════════════ STATUS PAGE ═══════════════════ */

.status-banner {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    padding: 30px 34px; border-radius: var(--r-lg);
    background: rgba(95,208,122,.07); border: 1px solid rgba(95,208,122,.28);
}
.status-orb {
    width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center;
    background: rgba(95,208,122,.14); border: 1px solid rgba(95,208,122,.4);
}
.status-orb i {
    width: 14px; height: 14px; border-radius: 50%; background: var(--good);
    box-shadow: 0 0 0 0 rgba(95,208,122,.75); animation: pulse 2.2s infinite;
}
.status-banner-text { flex: 1; min-width: 240px; }
.status-banner-text h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: var(--good); margin-bottom: 4px; }
.status-banner-text p { color: var(--muted); font-size: 15px; margin: 0; }
.status-banner-text b { color: var(--text); font-weight: 600; }
.status-since { display: flex; flex-direction: column; align-items: flex-end; }
.status-since b { font-family: "Space Grotesk"; font-size: 36px; font-weight: 700; color: var(--good); line-height: 1.1; }
.status-since span { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .1em; }

.status-list { display: flex; flex-direction: column; gap: 12px; }
.srow {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 22px 24px; border-radius: var(--r);
    background: rgba(179,155,251,.045); border: 1px solid var(--line);
    transition: border-color .3s, background .3s;
}
.srow:hover { border-color: var(--line-2); background: rgba(179,155,251,.08); }
.srow-dot { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.srow-dot i { width: 10px; height: 10px; border-radius: 50%; }
.srow.is-up   .srow-dot { background: rgba(95,208,122,.14); border: 1px solid rgba(95,208,122,.35); }
.srow.is-up   .srow-dot i { background: var(--good); }
.srow.is-dev  .srow-dot { background: rgba(179,155,251,.1); border: 1px solid var(--line-2); }
.srow.is-dev  .srow-dot i { background: var(--dim); }
.srow-main { flex: 1; min-width: 250px; }
.srow-main h3 { font-size: 18px; font-weight: 600; margin-bottom: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.srow-main p { color: var(--muted); font-size: 14.5px; margin: 0; }
.srow-tag {
    font-family: Inter; font-size: 11px; font-weight: 700; letter-spacing: .06em;
    padding: 3px 10px; border-radius: 999px;
    background: rgba(179,155,251,.1); border: 1px solid var(--line-2); color: var(--dim);
}
.srow.is-up .srow-tag { background: rgba(95,208,122,.13); border-color: rgba(95,208,122,.32); color: var(--good); }
.srow-meta { display: flex; align-items: center; gap: 20px; }
.srow-uptime { display: flex; flex-direction: column; align-items: flex-end; }
.srow-uptime b { font-family: "Space Grotesk"; font-size: 19px; font-weight: 700; }
.srow-uptime small { font-size: 11.5px; color: var(--dim); }

.uptime-card { padding: 24px 26px; border-radius: var(--r-lg);
               background: rgba(179,155,251,.045); border: 1px solid var(--line); }
.uptime-bars { display: flex; gap: 3px; align-items: stretch; height: 52px; }
.ubar { flex: 1; border-radius: 3px; background: var(--good); opacity: .8;
        transition: opacity .2s, transform .2s var(--ease); }
.ubar:hover { opacity: 1; transform: scaleY(1.08); }
.ubar.is-down { background: var(--violet); }
.uptime-legend { display: flex; justify-content: space-between; align-items: center; gap: 16px;
                 margin-top: 14px; font-size: 12.5px; color: var(--dim); flex-wrap: wrap; }
.uptime-key { display: inline-flex; align-items: center; gap: 8px; }
.uptime-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.uptime-key .k-up { background: var(--good); }
.uptime-key .k-down { background: var(--violet); margin-left: 10px; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.sstat { padding: 20px 22px; border-radius: var(--r); text-align: center;
         background: rgba(179,155,251,.045); border: 1px solid var(--line); }
.sstat b { display: block; font-family: "Space Grotesk"; font-size: 30px; font-weight: 700;
           color: var(--violet-lite); line-height: 1.15; }
.sstat span { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }

.timeline { position: relative; padding-left: 26px; display: flex; flex-direction: column; gap: 26px; }
.timeline::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px;
                    width: 1px; background: var(--line-2); }
.tl { position: relative; }
.tl-dot { position: absolute; left: -26px; top: 6px; width: 11px; height: 11px; border-radius: 50%;
          background: var(--violet); box-shadow: 0 0 0 4px var(--bg), 0 0 14px rgba(139,92,246,.9); }
.tl-date { font-size: 12px; font-weight: 700; letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.tl-body h4 { font-size: 17px; font-weight: 600; margin: 5px 0 6px; }
.tl-body p { color: var(--muted); font-size: 14.5px; margin: 0; }

/* ═══════════════════ PRODUCT DETAIL ═══════════════════ */

.product { position: relative; z-index: 1; max-width: var(--max); margin: 0 auto; padding: 0 34px 40px; }
.product-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }

.product-gallery { position: relative; border-radius: var(--r-lg); overflow: hidden;
                   border: 1px solid var(--line); background: var(--violet-ink); }
.product-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.product-gallery::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(160deg, rgba(255,255,255,.1), transparent 42%);
}

.product-game { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--violet-lite); }
.product-info h1 { font-size: clamp(34px, 4.4vw, 50px); font-weight: 700; margin: 12px 0 20px; }

.product-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.pbadge {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 11px;
    background: rgba(179,155,251,.07); border: 1px solid var(--line-2);
    font-size: 13.5px; font-weight: 600; color: var(--muted);
}
.pbadge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8;
              stroke-linecap: round; stroke-linejoin: round; }
.pbadge.is-good { background: rgba(95,208,122,.1); border-color: rgba(95,208,122,.3); color: var(--good); }
.pbadge.is-good .pulse { background: var(--good); }
.pbadge.is-violet { color: var(--violet-lite); border-color: rgba(139,92,246,.35); background: rgba(139,92,246,.12); }

.product-desc { color: var(--muted); font-size: 15.5px; margin: 0 0 26px; }
.product-rule { height: 1px; background: var(--line); margin: 0 0 22px; }

.select-label { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--dim); margin-bottom: 14px; }

.plan-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.ptile {
    position: relative; padding: 18px 14px; border-radius: var(--r);
    background: rgba(179,155,251,.05); border: 1px solid var(--line);
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.ptile:hover { border-color: var(--line-2); background: rgba(179,155,251,.1); transform: translateY(-2px); }
.ptile b { font-family: "Space Grotesk"; font-size: 23px; font-weight: 700; }
.ptile span { font-size: 12.5px; color: var(--dim); }
.ptile.is-on { border-color: var(--violet); background: rgba(139,92,246,.18);
               box-shadow: 0 0 0 1px var(--violet), 0 14px 34px -16px rgba(139,92,246,.9); }
.ptile.is-on b { color: var(--violet-lite); }
.ptile.is-on span { color: var(--muted); }
.ptile-tag {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    padding: 3px 11px; border-radius: 999px; white-space: nowrap;
    background: var(--violet); color: #fff; font-size: 10px; font-weight: 800; letter-spacing: .06em;
    box-shadow: 0 5px 14px -5px rgba(139,92,246,.95);
}

.buy-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.buy-selected { display: flex; flex-direction: column; }
.buy-selected small { font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--dim); }
.buy-selected b { font-family: "Space Grotesk"; font-size: 30px; font-weight: 700; color: var(--violet-lite); line-height: 1.2; }
.buy-row .btn { flex: 1; min-width: 220px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 18px; font-size: 13px; color: var(--dim); }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7;
                 stroke-linecap: round; stroke-linejoin: round; }

/* system requirements */

.block-label {
    display: flex; align-items: center; gap: 18px; margin: 0 0 20px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .18em; color: var(--violet-lite);
}
.block-label::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.block-label .count { letter-spacing: 0; font-weight: 500; color: var(--dim); text-transform: none; font-size: 13px; }

.req-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.req {
    display: flex; align-items: center; gap: 14px; padding: 16px 20px;
    border-radius: var(--r); background: rgba(179,155,251,.045); border: 1px solid var(--line);
    transition: border-color .3s, background .3s;
}
.req:hover { border-color: var(--line-2); background: rgba(179,155,251,.08); }
.req-icon { width: 32px; height: 32px; border-radius: 9px; flex: none; display: grid; place-items: center;
            background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.3); }
.req-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--violet-lite); stroke-width: 1.7;
                stroke-linecap: round; stroke-linejoin: round; }
.req-text { display: flex; flex-direction: column; }
.req-text small { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--dim); }
.req-text b { font-size: 15px; font-weight: 600; }

/* feature accordion */

.feat-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.feat {
    border-radius: var(--r); overflow: hidden;
    background: rgba(179,155,251,.045); border: 1px solid var(--line);
    transition: border-color .3s, background .3s;
}
.feat[open] { border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.07); }
.feat summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    display: flex; align-items: center; gap: 12px;
    font-size: 15px; font-weight: 600;
}
.feat summary::-webkit-details-marker { display: none; }
.feat summary > svg { width: 17px; height: 17px; flex: none; fill: none; stroke: var(--violet-lite);
                      stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.feat summary .caret { margin-left: auto; color: var(--dim); transition: transform .35s var(--ease); }
.feat[open] summary .caret { transform: rotate(180deg); }
.feat ul { list-style: none; margin: 0; padding: 0 20px 18px 49px; display: flex; flex-direction: column; gap: 8px; }
.feat li { position: relative; padding-left: 18px; font-size: 14px; color: var(--muted); }
.feat li::before { content: ''; position: absolute; left: 0; top: 9px; width: 6px; height: 6px;
                   border-radius: 50%; background: var(--violet); }

/* ═══════════════════ FAQ ═══════════════════ */

.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-list details { border-radius: var(--r); overflow: hidden;
                    background: rgba(179,155,251,.045); border: 1px solid var(--line);
                    transition: border-color .3s, background .3s; }
.faq-list details[open] { border-color: rgba(139,92,246,.4); background: rgba(139,92,246,.07); }
.faq-list summary { list-style: none; cursor: pointer; padding: 20px 24px;
                    display: flex; align-items: center; justify-content: space-between; gap: 16px;
                    font-family: "Space Grotesk"; font-size: 16.5px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary i { position: relative; width: 15px; height: 15px; flex: none; }
.faq-list summary i::before, .faq-list summary i::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: var(--violet-lite);
    transform: translate(-50%,-50%); transition: transform .35s var(--ease);
}
.faq-list summary i::before { width: 15px; height: 2px; border-radius: 2px; }
.faq-list summary i::after  { width: 2px; height: 15px; border-radius: 2px; }
.faq-list details[open] summary i::after { transform: translate(-50%,-50%) rotate(90deg) scaleX(0); }
.faq-list p { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: 15px; }

/* ═══════════════════ CTA + footer ═══════════════════ */

.cta-band { text-align: center; }
.cta-inner {
    padding: 70px 40px; border-radius: var(--r-xl); position: relative; overflow: hidden;
    background: radial-gradient(ellipse 70% 130% at 50% 0%, rgba(139,92,246,.28), transparent 62%), rgba(179,155,251,.05);
    border: 1px solid var(--line-2);
}
.cta-inner::before {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(rgba(179,155,251,.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(179,155,251,.05) 1px, transparent 1px);
    background-size: 46px 46px;
    mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 72%);
    -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000, transparent 72%);
}
.cta-inner > * { position: relative; }
.cta-inner h2 { font-size: clamp(32px, 4.4vw, 48px); font-weight: 700; margin-bottom: 14px; }
.cta-inner p { color: var(--muted); font-size: 17px; margin: 0 0 30px; }

.footer { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 60px;
          padding: 60px 34px 30px; background: rgba(0,0,0,.32); }
.footer-top { max-width: var(--max); margin: 0 auto 44px; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand .brand-mark { margin-bottom: 4px; }
.footer-brand p { color: var(--dim); font-size: 14px; margin: 6px 0 0; max-width: 330px; }
.footer-col { display: flex; flex-direction: column; gap: 11px; }
.footer-col h4 { font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); font-weight: 700; }
.footer-col a { font-size: 14.5px; color: var(--muted); transition: color .25s; width: fit-content; }
.footer-col a:hover { color: var(--violet-lite); }
.footer-bottom { max-width: var(--max); margin: 0 auto; padding-top: 24px; border-top: 1px solid var(--line);
                 display: flex; justify-content: space-between; align-items: center; gap: 16px;
                 font-size: 13.5px; color: var(--dim); flex-wrap: wrap; }
.footer-status { display: inline-flex; align-items: center; gap: 8px; color: var(--good); }

/* ═══════════════════ CART ═══════════════════ */

.cart-scrim { position: fixed; inset: 0; z-index: 300; background: rgba(5,3,10,.72); backdrop-filter: blur(5px);
              opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.cart-scrim.is-open { opacity: 1; pointer-events: auto; }

.cart {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 310; width: min(420px, 92vw);
    background: linear-gradient(180deg, #140E28, #0A0716);
    border-left: 1px solid var(--line-2); display: flex; flex-direction: column;
    transform: translateX(105%); transition: transform .55s var(--ease);
    box-shadow: -30px 0 80px -30px rgba(0,0,0,.9);
}
.cart.is-open { transform: none; }
.cart-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 24px 18px;
             border-bottom: 1px solid var(--line); }
.cart-head h3 { font-size: 20px; font-weight: 600; }
.cart-close { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
              background: rgba(179,155,251,.07); border: 1px solid var(--line);
              transition: background .25s, transform .25s var(--ease); }
.cart-close:hover { background: rgba(139,92,246,.2); transform: rotate(90deg); }

.cart-items { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.cart-items::-webkit-scrollbar { width: 8px; }
.cart-items::-webkit-scrollbar-thumb { background: rgba(179,155,251,.18); border-radius: 8px; }

.ci { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center;
      padding: 14px; border-radius: var(--r); background: rgba(179,155,251,.06); border: 1px solid var(--line);
      animation: ciIn .45s var(--ease); }
@keyframes ciIn { from { opacity: 0; transform: translateX(22px); } }
.ci-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
            background: rgba(139,92,246,.18); border: 1px solid rgba(139,92,246,.34);
            font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; color: var(--violet-lite); }
.ci-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ci-name { font-size: 15px; font-weight: 600; }
.ci-meta { font-size: 12.5px; color: var(--dim); }
.ci-right { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.ci-price { font-family: "Space Grotesk"; font-weight: 700; font-size: 16px; }
.ci-qty { display: flex; align-items: center; gap: 2px; background: rgba(0,0,0,.32); border-radius: 8px; padding: 2px; }
.ci-qty button { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center;
                 font-size: 15px; line-height: 1; color: var(--muted); transition: background .2s, color .2s; }
.ci-qty button:hover { background: rgba(179,155,251,.14); color: var(--text); }
.ci-qty b { min-width: 20px; text-align: center; font-size: 13px; font-weight: 600; }

.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
              gap: 14px; padding: 40px; text-align: center; }
.cart-empty-art { width: 74px; height: 74px; border-radius: 22px; display: grid; place-items: center;
                  background: rgba(179,155,251,.06); border: 1px solid var(--line); color: var(--dim); }
.cart-empty-art svg { width: 32px; height: 32px; }
.cart-empty p { color: var(--dim); margin: 0; }
.cart-empty.is-hidden, .cart-foot.is-hidden { display: none; }

.cart-foot { padding: 20px 24px 24px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 11px; }
.cart-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 14.5px; }
.cart-row span { color: var(--muted); }
.cart-row b { font-weight: 600; }
.cart-row.muted b { font-size: 12.5px; color: var(--dim); font-weight: 400; }
.cart-row.total { padding-top: 11px; border-top: 1px solid var(--line); font-size: 16px; }
.cart-row.total b { font-family: "Space Grotesk"; font-size: 27px; font-weight: 700; color: var(--violet-lite); }
.cart-fine { text-align: center; font-size: 12px; color: var(--dim); margin: 2px 0 0; }

/* ═══════════════════ toast ═══════════════════ */

.toast { position: fixed; left: 50%; bottom: 34px; z-index: 400; transform: translate(-50%, 130%);
         display: flex; align-items: center; gap: 11px; padding: 14px 22px; border-radius: 14px;
         background: rgba(20,14,40,.96); border: 1px solid rgba(139,92,246,.45); backdrop-filter: blur(14px);
         font-size: 14.5px; font-weight: 500; box-shadow: 0 20px 50px -18px rgba(0,0,0,.85);
         transition: transform .55s var(--ease); }
.toast.is-on { transform: translate(-50%, 0); }
.toast i { width: 20px; height: 20px; border-radius: 50%; flex: none; background: var(--violet); position: relative; }
.toast i::after { content: ''; position: absolute; left: 6px; top: 8px; width: 7px; height: 3.5px;
                  border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }

/* ═══════════════════ DISCORD ═══════════════════ */

.discord-btn {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    display: grid; place-items: center; color: var(--muted);
    background: rgba(179,155,251,.06); border: 1px solid var(--line);
    transition: color .25s, background .25s, border-color .25s, transform .25s var(--ease);
}
.discord-btn:hover { color: #fff; background: #5865F2; border-color: #5865F2; transform: translateY(-2px); }

.btn-discord { display: inline-flex; align-items: center; gap: 10px; }
.btn-discord svg { flex: none; }
.btn-discord:hover { color: #fff; background: rgba(88,101,242,.18); border-color: rgba(88,101,242,.6); }

/* ═══════════════════ REVIEWS ═══════════════════ */

/* One star glyph, masked so it takes the fill colour of whatever state it is in. */
:root {
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.7l3.1 6.3 6.9 1-5 4.9 1.2 6.9L12 17.5 5.8 20.8 7 13.9 2 9l6.9-1z'/%3E%3C/svg%3E");
}
.stars { display: inline-flex; gap: 3px; }
.stars i {
    width: 15px; height: 15px; font-style: normal; flex: none;
    background: var(--violet-lite);
    -webkit-mask: var(--star) center/contain no-repeat; mask: var(--star) center/contain no-repeat;
}
.stars i.off { background: rgba(179,155,251,.22); }
.stars.sm i { width: 12.5px; height: 12.5px; }

.rating-summary {
    display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center;
    padding: 26px 32px; margin-bottom: 30px; border-radius: var(--r-lg);
    background: rgba(179,155,251,.045); border: 1px solid var(--line);
}
.rating-score { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 132px; }
.rating-score b { font-family: "Space Grotesk"; font-size: 52px; font-weight: 700; line-height: 1; }
.rating-score small { font-size: 12.5px; color: var(--dim); }

.rating-bars { display: flex; flex-direction: column; gap: 7px; }
.rbar { display: grid; grid-template-columns: 34px 1fr 40px; align-items: center; gap: 12px;
        font-size: 12.5px; color: var(--dim); }
.rbar .track { height: 6px; border-radius: 999px; background: rgba(179,155,251,.1); overflow: hidden; }
.rbar .track i { display: block; height: 100%; border-radius: 999px; background: var(--violet);
                 width: 0; transition: width 1s var(--ease); }
.rbar b { text-align: right; font-weight: 500; color: var(--muted); }

.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rcard {
    display: flex; flex-direction: column; gap: 13px; padding: 24px;
    border-radius: var(--r-lg); background: rgba(179,155,251,.045);
    border: 1px solid var(--line);
    transition: border-color .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rcard:hover { border-color: rgba(139,92,246,.42); transform: translateY(-3px); box-shadow: var(--shadow); }
.rcard-top { display: flex; align-items: center; gap: 11px; }
.rc-av { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
         font-family: "Space Grotesk"; font-weight: 700; font-size: 15px; color: #fff;
         background: var(--violet-deep); border: 1px solid rgba(179,155,251,.3); }
.rc-who { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; }
.rc-name { font-weight: 600; font-size: 14.5px; display: flex; align-items: center; gap: 6px; }
.rc-when { font-size: 12px; color: var(--dim); }
.rc-verified { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%;
               background: rgba(95,208,122,.16); color: var(--good); flex: none; }
.rc-verified svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3.2;
                   stroke-linecap: round; stroke-linejoin: round; }
.rcard p { margin: 0; font-size: 14.5px; color: var(--muted); line-height: 1.62; flex: 1; }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
           padding-top: 12px; border-top: 1px solid var(--line); }
.rc-plan { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--violet-lite);
           padding: 4px 10px; border-radius: 999px; background: rgba(139,92,246,.14);
           border: 1px solid rgba(139,92,246,.3); }
.rc-src { font-size: 11.5px; color: var(--dim); }

.reviews-more { display: flex; justify-content: center; margin-top: 32px; }

.review-filters { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 24px; }
.rfilter { padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--muted);
           background: rgba(179,155,251,.06); border: 1px solid var(--line);
           transition: background .25s, color .25s, border-color .25s; }
.rfilter:hover { color: var(--text); background: rgba(139,92,246,.16); }
.rfilter.is-on { color: #fff; background: var(--violet); border-color: var(--violet); }

.reviews-empty { padding: 50px 20px; text-align: center; color: var(--dim); }

.reviews-note {
    margin-top: 34px; padding: 20px 24px; border-radius: var(--r);
    background: rgba(179,155,251,.045); border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.reviews-note p { margin: 0; color: var(--muted); font-size: 14.5px; }

/* ═══════════════════ CHECKOUT ═══════════════════ */

.checkout { display: grid; grid-template-columns: 1.3fr .9fr; gap: 26px; align-items: start; }

.co-step {
    padding: 26px 28px; border-radius: var(--r-lg); margin-bottom: 18px;
    background: rgba(179,155,251,.045); border: 1px solid var(--line);
}
.co-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.co-num { width: 26px; height: 26px; border-radius: 50%; flex: none; display: grid; place-items: center;
          font-size: 12.5px; font-weight: 700; color: var(--violet-lite);
          background: rgba(139,92,246,.16); border: 1px solid rgba(139,92,246,.36); }
.co-head h3 { font-size: 17px; font-weight: 600; }
.co-head small { margin-left: auto; font-size: 12.5px; color: var(--dim); }

.co-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.co-field { display: flex; flex-direction: column; gap: 7px; }
.co-field.wide { grid-column: 1 / -1; }
.co-field label { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.co-field input, .co-field select {
    width: 100%; padding: 12px 14px; border-radius: var(--r-sm); font: inherit; font-size: 14.5px;
    color: var(--text); background: rgba(8,6,15,.55); border: 1px solid var(--line);
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.co-field input::placeholder { color: var(--dim); }
.co-field input:focus, .co-field select:focus {
    outline: 0; border-color: rgba(139,92,246,.6); background: rgba(8,6,15,.8);
    box-shadow: 0 0 0 3px rgba(139,92,246,.16);
}
.co-field input.is-bad { border-color: rgba(255,120,120,.6); }
.co-hint { font-size: 12px; color: var(--dim); }
.co-hint.is-bad { color: #FF9A9A; }

/* Four methods now, so two rows of two rather than an awkward 3 + 1. */
.pay-methods { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pay {
    position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    padding: 16px; border-radius: var(--r); text-align: left;
    background: rgba(8,6,15,.5); border: 1px solid var(--line);
    transition: border-color .25s, background .25s, transform .25s var(--ease);
}
.pay:hover { border-color: var(--line-2); transform: translateY(-2px); }
.pay.is-on { border-color: var(--violet); background: rgba(139,92,246,.12); }
.pay-mark { display: flex; align-items: center; gap: 7px; height: 22px; color: var(--violet-lite); }
.pay-mark svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7;
                stroke-linecap: round; stroke-linejoin: round; }
.pay b { font-size: 14px; font-weight: 600; }
.pay span { font-size: 12px; color: var(--dim); line-height: 1.45; }
.pay .tick { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; border-radius: 50%;
             border: 1.5px solid var(--line-2); transition: background .25s, border-color .25s; }
.pay.is-on .tick { background: var(--violet); border-color: var(--violet);
                   box-shadow: inset 0 0 0 3px rgba(8,6,15,.9); }
.card-logos { display: flex; gap: 6px; margin-top: 2px; }
.card-logos i { width: 27px; height: 17px; border-radius: 3px; background: rgba(179,155,251,.14);
                border: 1px solid var(--line); font-style: normal; font-size: 7.5px; font-weight: 700;
                color: var(--muted); display: grid; place-items: center; letter-spacing: .02em; }

.co-agree { display: flex; align-items: flex-start; gap: 11px; margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.co-agree input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--violet); flex: none; }
.co-agree a { color: var(--violet-lite); text-decoration: underline; text-underline-offset: 3px; }

.co-summary { position: sticky; top: calc(var(--nav-h) + 22px); padding: 26px 26px 22px;
              border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-2);
              box-shadow: var(--shadow); }
.co-summary h3 { font-size: 17px; font-weight: 600; margin-bottom: 18px; }
.co-items { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.co-item { display: flex; align-items: center; gap: 12px; }
.co-thumb { width: 44px; height: 44px; border-radius: 10px; flex: none; overflow: hidden;
            background: rgba(179,155,251,.08); border: 1px solid var(--line); }
.co-thumb img { width: 100%; height: 100%; object-fit: cover; }
.co-item-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; flex: 1; }
.co-item-info b { font-size: 14px; font-weight: 600; }
.co-item-info span { font-size: 12px; color: var(--dim); }
.co-item-price { font-size: 14px; font-weight: 600; white-space: nowrap; }

.co-promo { display: flex; gap: 8px; margin-bottom: 16px; }
.co-promo input { flex: 1; min-width: 0; padding: 10px 13px; border-radius: var(--r-sm); font: inherit;
                  font-size: 13.5px; color: var(--text); background: rgba(8,6,15,.55); border: 1px solid var(--line); }
.co-promo input:focus { outline: 0; border-color: rgba(139,92,246,.6); }
.co-promo button { padding: 10px 16px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600;
                   color: var(--muted); background: rgba(179,155,251,.08); border: 1px solid var(--line);
                   transition: color .25s, background .25s; }
.co-promo button:hover { color: var(--text); background: rgba(139,92,246,.2); }

.co-lines { display: flex; flex-direction: column; gap: 9px; padding-top: 16px; border-top: 1px solid var(--line); }
.co-line { display: flex; justify-content: space-between; font-size: 14px; color: var(--muted); }
.co-line b { color: var(--text); font-weight: 600; }
.co-line.discount b { color: var(--good); }
.co-line.total { padding-top: 12px; margin-top: 3px; border-top: 1px solid var(--line); font-size: 15px; }
.co-line.total b { font-family: "Space Grotesk"; font-size: 24px; font-weight: 700; }

.co-pay-btn { margin-top: 18px; }
.co-secure { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.co-secure div { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--dim); }
.co-secure svg { width: 14px; height: 14px; flex: none; fill: none; stroke: var(--good);
                 stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.co-empty { padding: 70px 30px; text-align: center; border-radius: var(--r-lg);
            background: rgba(179,155,251,.04); border: 1px solid var(--line); }
.co-empty h2 { font-size: 24px; margin-bottom: 10px; }
.co-empty p { color: var(--muted); margin: 0 0 22px; }

.co-notice {
    display: flex; gap: 13px; padding: 16px 18px; margin-bottom: 18px; border-radius: var(--r);
    background: rgba(139,92,246,.09); border: 1px solid rgba(139,92,246,.3);
}
.co-notice svg { width: 18px; height: 18px; flex: none; margin-top: 2px; fill: none;
                 stroke: var(--violet-lite); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.co-notice p { margin: 0; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.co-notice b { color: var(--text); }

/* ═══════════════════ responsive ═══════════════════ */

@media (max-width: 1080px) {
    .feature-grid { grid-template-columns: repeat(2, 1fr); }
    .fcard.span-2 { grid-column: span 2; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
    .product-hero { grid-template-columns: 1fr; gap: 34px; }
    .product-gallery { max-width: 460px; }
    .review-grid { grid-template-columns: repeat(2, 1fr); }
    .checkout { grid-template-columns: 1fr; }
    .co-summary { position: static; }
}

@media (max-width: 860px) {
    .char-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
    .char-art { min-height: 360px; }
    .char-stats { justify-content: center; gap: 24px; }
    .nav { padding: 0 20px; gap: 16px; }
    .nav-links { gap: 2px; }
    .nav-links a { padding: 8px 11px; font-size: 13.5px; }
    .status-chip { display: none; }
    .section, .product { padding-left: 20px; padding-right: 20px; }
    .section { padding-top: 76px; padding-bottom: 76px; }
    .page-head { padding-left: 20px; padding-right: 20px; }
    .showcase-notes { grid-template-columns: 1fr; }
    .hero-stats { gap: 18px; padding: 16px 20px; flex-wrap: wrap; justify-content: center; }
    .hero-stats .divider { display: none; }
    .feat-cols, .req-grid { grid-template-columns: 1fr; }
    .stat-row { grid-template-columns: repeat(2, 1fr); }
    .status-since { align-items: flex-start; }
    .srow-meta { width: 100%; justify-content: space-between; }
    .rating-summary { grid-template-columns: 1fr; gap: 24px; padding: 24px; }
    .rating-score { align-items: flex-start; }
    .discord-btn { width: 38px; height: 38px; }
}

@media (max-width: 620px) {
    /* Four nav links plus two action buttons no longer fit beside the wordmark
       at 375px — the cart was ending up off-screen. The mark alone identifies
       the brand here, and the Discord icon drops out because the hero button
       and the footer both still carry the invite. */
    .nav { gap: 10px; padding: 0 16px; }
    .brand-text { display: none; }
    .nav-actions .discord-btn { display: none; }
    .nav-links { gap: 0; }
    .nav-links a { padding: 8px 9px; font-size: 13px; }
    .nav-links a.is-active::after { left: 9px; right: 9px; }

    .feature-grid, .product-grid { grid-template-columns: 1fr; }
    .fcard.span-2 { grid-column: span 1; }
    .footer-top { grid-template-columns: 1fr; }
    .hero-cta { flex-direction: column; align-items: stretch; }
    .cta-inner { padding: 46px 22px; }
    .plan-tiles { grid-template-columns: repeat(2, 1fr); }
    .buy-row .btn { min-width: 0; }
    .review-grid { grid-template-columns: 1fr; }
    .co-fields, .pay-methods { grid-template-columns: 1fr; }
    .co-step, .co-summary { padding: 22px 18px; }
}

/* ═══════════════════════════════════════════════════════════
   PAYMENT METHODS — unavailable options
   ═══════════════════════════════════════════════════════════ */
.pay.is-off {
    opacity: .4;
    cursor: not-allowed;
    filter: saturate(.3);
}
.pay.is-off:hover { border-color: var(--line); transform: none; }
.pay.is-off .tick { display: none; }
.pay-soon {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 6px;
    margin-left: 6px;
    border-radius: 5px;
    background: rgba(255,255,255,.07);
    color: var(--text-dim);
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════
   ORDER STATUS PAGE
   ═══════════════════════════════════════════════════════════ */
.order-page {
    min-height: 68vh;
    display: grid;
    place-items: center;
    padding-top: 120px;
}
.order-card {
    width: 100%;
    max-width: 560px;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 44px 38px 34px;
}
.order-icon {
    width: 62px; height: 62px;
    margin: 0 auto 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--line);
}
.order-icon svg { width: 28px; height: 28px; fill: none; stroke-width: 2.2; stroke-linecap: round; }
.order-icon.good { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.35); }
.order-icon.good svg { stroke: #34D399; }
.order-icon.bad  { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.order-icon.bad svg { stroke: #F87171; }
.order-icon .spin {
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 2.4px solid rgba(255,255,255,.14);
    border-top-color: var(--violet);
    animation: orderSpin .8s linear infinite;
}
@keyframes orderSpin { to { transform: rotate(360deg); } }

.order-card h1 { font-size: 27px; letter-spacing: -.02em; margin-bottom: 10px; }
.order-lede { color: var(--text-dim); line-height: 1.62; font-size: 14.5px; }

.order-meta {
    margin: 26px 0 4px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 4px 0;
}
.order-row {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 11px 2px;
    font-size: 13.5px;
}
.order-row + .order-row { border-top: 1px solid rgba(255,255,255,.045); }
.order-row span { color: var(--text-dim); }
.order-row b { font-weight: 600; text-align: right; }

.order-actions {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
    margin-top: 26px;
}
.order-actions:empty { margin-top: 0; }
.order-fine {
    margin-top: 24px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-faint, var(--text-dim));
    opacity: .75;
}

@media (max-width: 620px) {
    .order-page { padding-top: 100px; }
    .order-card { padding: 34px 22px 26px; border-radius: 16px; }
    .order-card h1 { font-size: 23px; }
    .order-actions .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   ORDER PAGE — the licence keys

   The key is the thing the buyer came back for, so it gets the
   loudest box on the page: monospace, wide tracking, and a copy
   button, because retyping four groups by hand is how support
   tickets start.
   ═══════════════════════════════════════════════════════════ */
.order-keys {
    margin: 22px 0 4px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-key {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(139, 92, 246, .07);
    border: 1px solid rgba(139, 92, 246, .28);
}

.order-key-plan {
    flex: 0 0 100%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-dim, #8b839f);
}

.order-key code {
    flex: 1 1 auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #fff;
    word-break: break-all;
}

.order-key-copy {
    flex: 0 0 auto;
    padding: 8px 14px;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(139, 92, 246, .22);
    border: 1px solid rgba(139, 92, 246, .45);
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}
.order-key-copy:hover { background: rgba(139, 92, 246, .34); border-color: rgba(139, 92, 246, .7); }

@media (max-width: 560px) {
    .order-key { gap: 10px; padding: 14px; }
    .order-key code { font-size: 16px; letter-spacing: 1px; }
    .order-key-copy { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   LEGAL PAGES

   Long prose, so the measure is capped and the line height is
   loose. The contents column sticks on wide screens and simply
   stacks on narrow ones — a table of contents you have to
   scroll back up to reach is worse than none.
   ═══════════════════════════════════════════════════════════ */
.legal-updated {
    margin: 14px 0 0;
    font-size: 13px;
    color: var(--text-dim, #8b839f);
}

.legal-wrap { padding-top: 30px; }

/* the four documents, as a row of pills */
.legal-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 30px;
}
.legal-switch a {
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-dim, #a79fbb);
    background: rgba(255, 255, 255, .035);
    border: 1px solid rgba(255, 255, 255, .07);
    text-decoration: none;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.legal-switch a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.legal-switch a.is-on {
    color: #fff;
    background: rgba(139, 92, 246, .16);
    border-color: rgba(139, 92, 246, .45);
}

.legal-grid {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.legal-toc { position: sticky; top: 96px; }
.legal-toc h4 {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-dim, #6f6885);
}
.legal-toc a {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-dim, #a79fbb);
    text-decoration: none;
    transition: color .15s ease;
}
.legal-toc a:hover { color: #fff; }
.legal-toc a span {
    flex: 0 0 18px;
    color: var(--violet, #8B5CF6);
    font-variant-numeric: tabular-nums;
}

.legal { max-width: 68ch; }
.legal-section { margin-bottom: 38px; scroll-margin-top: 96px; }
.legal-section h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
}
.legal-num {
    flex: 0 0 auto;
    font-size: 13px;
    font-weight: 700;
    color: var(--violet, #8B5CF6);
    font-variant-numeric: tabular-nums;
}
.legal p {
    margin: 0 0 13px;
    font-size: 15px;
    line-height: 1.75;
    color: var(--text-dim, #a79fbb);
}
.legal p strong, .legal li strong { color: #e6e1f0; font-weight: 600; }
.legal a { color: #a78bfa; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #c4b5fd; }
.legal ul {
    margin: 0 0 15px;
    padding-left: 20px;
    list-style: none;
}
.legal li {
    position: relative;
    margin-bottom: 9px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-dim, #a79fbb);
}
.legal li::before {
    content: '';
    position: absolute;
    left: -16px;
    top: .68em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(139, 92, 246, .6);
}

.legal-foot {
    margin-top: 40px !important;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, .07);
    font-size: 13px !important;
    color: var(--text-dim, #6f6885) !important;
}

@media (max-width: 900px) {
    .legal-grid { grid-template-columns: 1fr; gap: 26px; }
    .legal-toc { position: static; }
    .legal-toc a { padding: 5px 0; }
    .legal { max-width: none; }
}


/* ═══════════════════════════════════════════════════════════
   ORDER PAGE — the gift card rail

   This is the one payment route with a person in the middle, so
   the panel has to do more talking than the others: what to buy,
   for how much, and what happens after the code is sent.
   ═══════════════════════════════════════════════════════════ */
.order-icon.gift { background: rgba(139,92,246,.12); border-color: rgba(139,92,246,.35); }
.order-icon.gift svg { stroke: var(--violet-lite); fill: none; stroke-width: 1.8; }

.gc-panel {
    margin: 24px 0 2px;
    padding: 20px 20px 18px;
    text-align: left;
    border-radius: 14px;
    background: rgba(139,92,246,.05);
    border: 1px solid rgba(139,92,246,.22);
}

.gc-steps { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 9px; }
.gc-steps li { font-size: 13.8px; line-height: 1.6; color: var(--muted); }
.gc-steps b { color: var(--text); font-weight: 600; }
.gc-steps a { color: var(--violet-lite); text-decoration: underline; text-underline-offset: 3px; }
.gc-steps a:hover { color: #fff; }

.gc-warn {
    margin: 0 0 16px;
    font-size: 12.4px; line-height: 1.6; color: var(--dim);
    padding-left: 11px; border-left: 2px solid rgba(139,92,246,.3);
}
.gc-panel .btn { margin: 0; }

/* A rejection is the one thing on this page the buyer has to act on,
   so it is the one thing that is not violet. */
.gc-note {
    margin: 0 0 14px; padding: 11px 13px;
    font-size: 13px; line-height: 1.55; color: #F8C9C9;
    background: rgba(248,113,113,.09);
    border: 1px solid rgba(248,113,113,.26);
    border-radius: 10px;
}

.gc-received { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.gc-received svg {
    flex: none; width: 20px; height: 20px; padding: 4px;
    fill: none; stroke: var(--good); stroke-width: 2.4;
    stroke-linecap: round; stroke-linejoin: round;
    border-radius: 50%; background: rgba(95,208,122,.12);
}
.gc-received b { display: block; font-size: 14px; }
.gc-received span { font-size: 12.5px; color: var(--dim); }
.gc-received code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--muted);
}

/* ── the Mark as Paid form ──────────────────────────────── */
.gc-modal {
    position: fixed; inset: 0; z-index: 90;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(4,2,10,.72);
    backdrop-filter: blur(6px);
}
.gc-modal.is-open { display: flex; animation: gcIn .18s var(--ease-out); }
@keyframes gcIn { from { opacity: 0; } to { opacity: 1; } }
body.gc-locked { overflow: hidden; }

.gc-sheet {
    position: relative;
    width: 100%; max-width: 470px;
    max-height: calc(100vh - 48px); overflow-y: auto;
    padding: 28px 28px 24px;
    text-align: left;
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: 18px;
    box-shadow: var(--shadow);
    animation: gcRise .22s var(--ease-out);
}
@keyframes gcRise { from { transform: translateY(14px) scale(.985); } to { transform: none; } }

.gc-x {
    position: absolute; top: 16px; right: 16px;
    width: 30px; height: 30px; display: grid; place-items: center;
    border: 0; border-radius: 8px; cursor: pointer;
    background: transparent; color: var(--dim);
    transition: color .15s, background .15s;
}
.gc-x:hover { color: var(--text); background: rgba(179,155,251,.09); }
.gc-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.gc-sheet h2 { font-size: 20px; letter-spacing: -.015em; margin: 0 0 6px; }
.gc-sub { margin: 0 0 20px; font-size: 13.2px; line-height: 1.6; color: var(--muted); }

.gc-label {
    display: block; margin-bottom: 7px;
    font-size: 11.5px; font-weight: 600; letter-spacing: 1.1px;
    text-transform: uppercase; color: var(--dim);
}
.gc-label em { font-style: normal; opacity: .65; letter-spacing: .4px; text-transform: none; }

.gc-input {
    width: 100%; margin-bottom: 18px; padding: 13px 15px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 15px; letter-spacing: .6px; color: var(--text);
    background: var(--bg-2);
    border: 1px solid var(--line); border-radius: 10px;
    transition: border-color .15s, background .15s;
}
.gc-input::placeholder { color: rgba(109,99,144,.6); letter-spacing: 1px; }
.gc-input:focus {
    outline: none; background: var(--bg);
    border-color: rgba(139,92,246,.55);
    box-shadow: 0 0 0 3px rgba(139,92,246,.13);
}

.gc-drop {
    display: grid; place-items: center; gap: 5px;
    padding: 26px 16px; margin-bottom: 4px;
    text-align: center; cursor: pointer;
    border: 1.5px dashed var(--line-2); border-radius: 12px;
    background: rgba(255,255,255,.012);
    transition: border-color .16s, background .16s;
}
.gc-drop:hover, .gc-drop:focus-visible, .gc-drop.is-over {
    outline: none;
    border-color: rgba(139,92,246,.6);
    background: rgba(139,92,246,.07);
}
.gc-drop svg {
    width: 22px; height: 22px; margin-bottom: 3px;
    fill: none; stroke: var(--dim); stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.gc-drop:hover svg, .gc-drop.is-over svg { stroke: var(--violet-lite); }
.gc-drop b { font-size: 13.5px; font-weight: 600; }
.gc-drop span { font-size: 11.8px; color: var(--dim); }
/* display:grid above beats the hidden attribute's UA rule, so the
   dropzone would stay on screen behind the preview without this. */
.gc-drop[hidden] { display: none; }

.gc-preview { margin-bottom: 4px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.gc-preview img { display: block; width: 100%; max-height: 210px; object-fit: contain; background: var(--bg); }
.gc-preview-meta {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; background: var(--bg-2);
}
.gc-preview-meta b {
    font-size: 12px; font-weight: 500; color: var(--muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gc-preview-meta button {
    flex: none; padding: 0; border: 0; background: none; cursor: pointer;
    font-size: 12px; color: #F87171;
}
.gc-preview-meta button:hover { text-decoration: underline; }

.gc-error {
    margin: 14px 0 0; padding: 10px 12px;
    font-size: 12.6px; line-height: 1.5; color: #F8C9C9;
    background: rgba(248,113,113,.09);
    border: 1px solid rgba(248,113,113,.26);
    border-radius: 9px;
}

.gc-actions { display: flex; gap: 10px; margin-top: 22px; }
.gc-actions .btn { flex: 1; justify-content: center; }

@media (max-width: 560px) {
    .gc-modal { padding: 0; align-items: flex-end; }
    .gc-sheet {
        max-width: none; max-height: 92vh;
        padding: 24px 20px 20px;
        border-radius: 18px 18px 0 0;
    }
    .gc-actions { flex-direction: column-reverse; }
}