/* ===========================================================================
   Minerva AI Pro — main stylesheet
   Catppuccin Mocha palette, dark theme, modern type scale.
   Components: nav, hero, sections, features grid, pricing cards,
   CTAs, footer, language switcher.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens
   --------------------------------------------------------------------------- */
:root {
    /* Catppuccin Mocha */
    --c-base:     #1e1e2e;
    --c-mantle:   #181825;
    --c-surface0: #313244;
    --c-surface1: #45475a;
    --c-surface2: #585b70;
    --c-text:     #cdd6f4;
    --c-subtext:  #a6adc8;
    --c-overlay:  #6c7086;
    --c-blue:     #89b4fa;
    --c-lavender: #b4befe;
    --c-green:    #a6e3a1;
    --c-red:      #f38ba8;
    --c-peach:    #fab387;
    --c-yellow:   #f9e2af;
    --c-mauve:    #cba6f7;

    /* Type scale (modular, 1.2 ratio) */
    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-md:    1rem;
    --fs-lg:    1.125rem;
    --fs-xl:    1.333rem;
    --fs-2xl:   1.777rem;
    --fs-3xl:   2.369rem;
    --fs-4xl:   3.157rem;

    /* Spacing (4px base) */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-12: 3rem;
    --sp-16: 4rem;
    --sp-24: 6rem;
    --sp-32: 8rem;   /* generous top/bottom for hero sections */

    /* Layout */
    --content-max: 1100px;
    --content-narrow: 720px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, .45);

    /* Transitions */
    --t-fast: 120ms ease;
    --t-base: 200ms ease;
    --t-slow: 320ms ease;
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    /* Solid dark base — prevents any white flash behind the
       fixed canvas, and remains the page background everywhere
       the canvas doesn't cover (below the first viewport). */
    background: var(--c-base);
}

body {
    margin: 0;
    /* Body itself is transparent so the .page-bg canvas + overlay
       show through. The html background handles the "real" color. */
    background: transparent;
    color: var(--c-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Oxygen, Ubuntu, Cantarell, sans-serif;
    font-size: var(--fs-md);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: var(--c-blue);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover { color: var(--c-lavender); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-4);
    font-weight: 700;
    line-height: 1.2;
    color: var(--c-text);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--sp-4); }

ul, ol { padding-left: var(--sp-6); margin: 0 0 var(--sp-4); }

code, pre {
    font-family: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;
    font-size: 0.95em;
}
code {
    background: var(--c-surface0);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    color: var(--c-mauve);
}
pre {
    background: var(--c-surface0);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    overflow-x: auto;
}
pre code { background: transparent; padding: 0; }

hr {
    border: none;
    border-top: 1px solid var(--c-surface0);
    margin: var(--sp-8) 0;
}

/* ---------------------------------------------------------------------------
   3. Layout primitives
   --------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}
.container--narrow {
    max-width: var(--content-narrow);
}

.site-main {
    min-height: 60vh;
}

/* ---------------------------------------------------------------------------
   4. Buttons
   --------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-6);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--t-base), color var(--t-base),
                border-color var(--t-base), transform var(--t-fast);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    /* Solid dark glass — high contrast on the neural-net
       background, no colour accent. The active "weight" comes
       from the white text + subtle border, not a fill colour. */
    background: rgba(255, 255, 255, .95);
    color: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, .95);
    font-weight: 700;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .4) inset,
        0 6px 20px rgba(0, 0, 0, .35);
}
.btn--primary:hover {
    background: #ffffff;
    color: #1e1e2e;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .5) inset,
        0 10px 28px rgba(0, 0, 0, .5);
    transform: translateY(-2px);
}

.btn--ghost {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-surface1);
}
.btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue); }

.btn--lg {
    padding: var(--sp-4) var(--sp-8);
    font-size: var(--fs-lg);
}

.btn--block {
    display: flex;
    width: 100%;
}

/* ---------------------------------------------------------------------------
   5. Site header (sticky nav)
   --------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Frosted glass: tinted semi-transparent background + a
       gentle backdrop blur. The header sits over the neural-net
       background, so we keep some blur for the glass feel but
       not so much that the network becomes a mushy blur — the
       network should still be visible through it. */
    background: linear-gradient(180deg,
        rgba(30, 30, 46, .82) 0%,
        rgba(30, 30, 46, .68) 100%);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset,
                0 8px 24px rgba(0, 0, 0, .12);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: var(--sp-6);
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-4) var(--sp-6);
}

.site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--c-text);
    flex-shrink: 0;
}
.site-brand:hover { color: var(--c-text); text-decoration: none; }

.site-brand__mark {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .08);
    color: var(--c-text);
    border: 1px solid rgba(255, 255, 255, .12);
    font-size: 22px;
    font-weight: 800;
}

.site-brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.site-brand__title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-text);
}
.site-brand__tagline {
    font-size: var(--fs-xs);
    color: var(--c-subtext);
}

/* Site header actions: holds the language switcher + nav toggle.
   On desktop, only the language switcher is visible. On mobile,
   the nav-toggle is shown next to it; the lang switcher stays. */
.site-header__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

.nav-toggle {
    display: none;
    flex-direction: column; /* Stack the 3 bars vertically (hamburger) */
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: transparent;
    border: 1px solid var(--c-surface1);
    border-radius: var(--radius-md);
    padding: var(--sp-2) var(--sp-3);
    cursor: pointer;
    color: var(--c-text);
}
.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--c-text);
    border-radius: 1px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-left: auto;
}

.primary-menu {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    list-style: none;
    margin: 0;
    padding: 0;
}
.primary-menu li { margin: 0; padding: 0; }
.primary-menu a {
    display: inline-block;
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-subtext);
    font-weight: 500;
    border-radius: var(--radius-md);
    transition: color var(--t-fast), background var(--t-fast);
}
.primary-menu a:hover {
    color: var(--c-text);
    background: var(--c-surface0);
    text-decoration: none;
}
.primary-menu a[aria-current="page"] {
    color: var(--c-text);
    background: var(--c-surface0);
}

.site-nav__extras {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-left: var(--sp-3);
    margin-left: var(--sp-3);
    border-left: 1px solid var(--c-surface0);
}

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--fs-sm);
    transition: background var(--t-base), color var(--t-base);
}
.nav-cta--ghost { color: var(--c-subtext); }
.nav-cta--ghost:hover { color: var(--c-text); text-decoration: none; }
.nav-cta--primary {
    /* Matches .btn--primary — solid white pill for high contrast */
    background: rgba(255, 255, 255, .95);
    color: #1e1e2e;
    border: 1px solid rgba(255, 255, 255, .95);
}
.nav-cta--primary:hover { background: #ffffff; text-decoration: none; }

/* ---------------------------------------------------------------------------
   6. Language switcher
   --------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------
   Language switcher (header dropdown)
   ---------------------------------------------------------------------------
   A button with a globe icon + current language code opens a popup
   list of all 5 supported languages. Uses :focus-within so the menu
   stays open while any child has focus (keyboard accessible).
   --------------------------------------------------------------------------- */
.lang-switcher {
    position: relative;
    display: inline-block;
}
.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    height: 36px;
    padding: 0 var(--sp-3);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
    background: transparent;
    border: 1px solid var(--c-surface2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.lang-switcher__toggle:hover,
.lang-switcher:focus-within .lang-switcher__toggle {
    border-color: var(--c-green);
    background: var(--c-surface0);
}
.lang-switcher__globe {
    font-size: var(--fs-base);
    line-height: 1;
}
.lang-switcher__current {
    font-size: var(--fs-xs);
    letter-spacing: .05em;
    text-transform: uppercase;
}
.lang-switcher__caret {
    font-size: 10px;
    line-height: 1;
    color: var(--c-subtext);
    transition: transform var(--t-fast);
}
.lang-switcher:focus-within .lang-switcher__caret { transform: rotate(180deg); }
.lang-switcher__menu {
    position: absolute;
    top: calc(100% + var(--sp-1));
    right: 0;
    left: auto;
    min-width: 180px;
    list-style: none;
    margin: 0;
    padding: var(--sp-1);
    background: var(--c-surface1);
    border: 1px solid var(--c-surface2);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast);
    z-index: 100;
}
.lang-switcher:focus-within .lang-switcher__menu,
.lang-switcher__menu:hover {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.lang-switcher__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    color: var(--c-text);
    font-size: var(--fs-sm);
    border-radius: var(--radius-sm);
    transition: background var(--t-fast);
    text-decoration: none;
}
.lang-switcher__item:hover,
.lang-switcher__item:focus {
    background: var(--c-surface0);
    text-decoration: none;
    color: var(--c-text);
}
.lang-switcher__item--current {
    background: var(--c-surface0);
    color: var(--c-green);
    font-weight: 600;
}
.lang-switcher__code {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--c-subtext);
    min-width: 24px;
}
.lang-switcher__item--current .lang-switcher__code { color: var(--c-green); }
.lang-switcher__name { flex: 1; }
/* When the lang switcher is in the footer (which sits in the
   leftmost column on mobile), the menu's default right-anchored
   position would overflow off the left edge of the viewport.
   Flip it to anchor to the toggle's left edge instead so the
   menu opens to the right and stays on-screen. */
.site-footer .lang-switcher { position: relative; }
.site-footer .lang-switcher__menu {
    right: auto;
    left: 0;
    top: calc(100% + var(--sp-1));
}

.lang-switcher__check {
    color: var(--c-green);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   7. Hero (front page)
   --------------------------------------------------------------------------- */
.hero {
    position: relative;
    /* The neural-net background shows through. No colour tint
       overlays on top — let the network do the visual work. */
    background: transparent;
    padding: var(--sp-32) 0 var(--sp-24);
    overflow: visible;
    isolation: isolate;
}

/* Decorative neural-network background.
   The canvas is added by assets/js/neural-net.js. Two usages:
     .page-bg          — full-viewport, fixed background that
                         sits behind the entire page. Added in
                         header.php right after <body>.
     .hero__neuralnet  — kept as a per-section fallback (the
                         .hero has its own background tint that
                         shows through the canvas). */

.page-bg,
.hero__neuralnet {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    /* Brand colors for the canvas — read by the JS */
    --nn-color:   var(--c-blue);
    --nn-color-2: var(--c-mauve);
    --nn-color-3: var(--c-green);
}
.page-bg {
    /* Full-window background. z-index sits behind the page
       content but above the (now-transparent) body so the
       canvas is always visible. */
    position: fixed;
    inset: 0;
    z-index: -1;
}
/* The neural-net canvas itself is added by JS with the
   generic class "neuralnet-canvas". Style it here so the
   network reads as a subtle backdrop, not a foreground
   distraction. opacity: .5 dims both nodes and signals
   proportionally; bright pulses still pop, faint ones
   recede. */
.neuralnet-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.5;
}

/* Subtle radial mask so the network fades at the edges of
   the hero section, focusing the eye on the centered text.
   Skipped for .page-bg (we want the network to be visible
   everywhere, including under the frosted glass header /
   footer where the blur makes it look like a glowing strip). */
.hero__neuralnet::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center,
        transparent 0%,
        transparent 35%,
        rgba(30, 30, 46, .25) 70%,
        rgba(30, 30, 46, .6) 100%);
    pointer-events: none;
}
/* Very faint global overlay so the bright neural net shows
   through. Just enough to keep white text readable on the
   bright pulse backgrounds. */
.page-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(30, 30, 46, .18) 0%,
        rgba(30, 30, 46, .32) 100%);
    pointer-events: none;
}

.hero__inner {
    display: block;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
    text-align: center;
    position: relative;
    z-index: 1;
}
.hero__content {
    /* Dark glass panel that wraps the hero copy + CTAs.
       Width-capped so it doesn't span the full viewport on
       very wide screens. */
    max-width: 880px;
    margin: 0 auto;
    padding: var(--sp-10) var(--sp-8);
    background: rgba(255, 255, 255, .04);
    border-radius: var(--radius-xl);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    position: relative;
    z-index: 1;
}
/* Rainbow neon border around the hero panel.
   The conic-gradient border stays in place — the COLOURS
   shift through the spectrum via a `filter: hue-rotate()`
   animation, so the rainbow appears to "flow" around the
   panel without the border itself spinning.

   The glow is a separate pseudo-element (::after) so the
   border's hue-rotate animation and the glow's pulse
   animation can run independently. (They both write the
   `filter` property, so putting them on the same element
   would cause one to override the other.) */
.hero__content::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: conic-gradient(
        from 0deg,
        #ff6b6b,  /* coral */
        #ffa94d,  /* orange */
        #ffd43b,  /* yellow */
        #69db7c,  /* green */
        #4dabf7,  /* blue */
        #9775fa,  /* violet */
        #f783ac,  /* pink */
        #ff6b6b   /* back to coral */
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
    /* Slow hue-rotate cycles the conic-gradient through the
       spectrum, so the colours "flow" without the border
       itself rotating. 8s feels organic; longer is too slow. */
    animation: heroHueShift 8s linear infinite;
    will-change: filter;
}
.hero__content::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    /* Outer neon glow that pulses in/out. Uses drop-shadow
       on a transparent element so only the glow shows. */
    animation: heroGlowPulse 3s ease-in-out infinite;
    will-change: filter, opacity;
}
@keyframes heroHueShift {
    0%   { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}
@keyframes heroGlowPulse {
    0%, 100% {
        opacity: 0.5;
        filter: drop-shadow(0 0 4px  rgba(255, 255, 255, .3))
                drop-shadow(0 0 10px rgba(255, 255, 255, .18));
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 14px rgba(255, 255, 255, .6))
                drop-shadow(0 0 28px rgba(255, 255, 255, .38))
                drop-shadow(0 0 48px rgba(255, 255, 255, .2));
    }
}
@media (prefers-reduced-motion: reduce) {
    .hero__content::before,
    .hero__content::after { animation: none; }
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-4);
    /* Neutral dark glass pill — no colour accent */
    background: rgba(255, 255, 255, .06);
    color: var(--c-text);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 var(--sp-6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero__eyebrow::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 0 8px rgba(255, 255, 255, .7);
}
.hero__title {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.5rem);
    line-height: 1.05;
    margin: 0 0 var(--sp-6);
    font-weight: 800;
    letter-spacing: -0.02em;
    /* Plain light text — no colour gradient */
    color: #ffffff;
    text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}
.hero__subtitle {
    font-size: clamp(var(--fs-base), 1.5vw, var(--fs-lg));
    color: var(--c-subtext);
    max-width: 64ch;
    margin: 0 auto var(--sp-8);
    line-height: 1.6;
}
.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    justify-content: center;
}
.hero__note {
    font-size: var(--fs-sm);
    color: var(--c-overlay);
    margin: 0;
}

/* Hero on the inner pages: same orbs but more subdued so the page
   hero title stands out without competing with the animated bg. */
.page-hero .hero-orb--1,
.page-hero .hero-orb--2 { opacity: .35; }

/* ---------------------------------------------------------------------------
   8. Section primitives (page-hero, intro, section-header, cta-band)
   --------------------------------------------------------------------------- */
.page-hero {
    padding: var(--sp-16) 0 var(--sp-8);
    text-align: center;
    background: transparent;
}
.page-hero__title {
    font-size: var(--fs-3xl);
    margin: 0 0 var(--sp-3);
}
.page-hero__subtitle {
    font-size: var(--fs-lg);
    color: var(--c-subtext);
    max-width: 60ch;
    margin: 0 auto;
}

.intro {
    padding: var(--sp-6) 0 var(--sp-8);
}
.intro__inner {
    max-width: var(--content-narrow);
    margin: 0 auto;
    font-size: var(--fs-lg);
    color: var(--c-subtext);
    text-align: center;
}

.section-header {
    text-align: center;
    margin: 0 auto var(--sp-8);
    max-width: var(--content-narrow);
}
.section-eyebrow {
    display: inline-block;
    padding: 2px var(--sp-3);
    background: rgba(255, 255, 255, .06);
    color: var(--c-text);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 var(--sp-3);
}
.section-title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--sp-3);
}
.section-subtitle {
    font-size: var(--fs-lg);
    color: var(--c-subtext);
    margin: 0;
}

/* CTA band (full-width strip between sections) */
.cta-band {
    padding: var(--sp-12) 0;
    text-align: center;
    /* Dark glass — same recipe as cards. Kept very light so the
       neural net behind it stays visible. */
    background: rgba(255, 255, 255, .015);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-top: 1px solid rgba(255, 212, 59, .14);
    border-bottom: 1px solid rgba(255, 212, 59, .14);
}
.cta-band--primary {
    background: rgba(255, 212, 59, .03);
    border-color: rgba(255, 212, 59, .2);
}
.cta-band__title {
    font-size: var(--fs-2xl);
    margin: 0 0 var(--sp-3);
}
.cta-band__body {
    font-size: var(--fs-lg);
    color: var(--c-subtext);
    margin: 0 0 var(--sp-6);
}
.cta-band__actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------------------------------------------------------------------------
   8.5. How it works (front page) — 4-step numbered grid
   --------------------------------------------------------------------------- */
.how-it-works {
    padding: var(--sp-16) 0;
    /* Transparent so the neural-net background shows through. */
    background: transparent;
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--sp-6);
    margin-top: var(--sp-8);
}
.how-card {
    position: relative;
    /* Dark glass panel with green accent. Kept very light so the
       neural net behind it stays visible. */
    background: rgba(255, 255, 255, .018);
    border: 1px solid rgba(105, 219, 124, .2);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.how-card:hover {
    border-color: rgba(105, 219, 124, .5);
    background: rgba(105, 219, 124, .05);
    transform: translateY(-2px);
}
.how-card__step {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    color: var(--c-text);
    font-weight: 800;
    font-size: var(--fs-md);
    margin-bottom: var(--sp-4);
}
.how-card__title {
    font-size: var(--fs-lg);
    margin: 0 0 var(--sp-3);
    color: var(--c-text);
}
.how-card__body {
    color: var(--c-subtext);
    font-size: var(--fs-sm);
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   9. Feature grid (front page)
   --------------------------------------------------------------------------- */
.features-highlight {
    padding: var(--sp-16) 0;
}
.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
}
.feature-card {
    /* Dark glass panel with blue accent. Kept very light so the
       neural net behind it stays visible. */
    background: rgba(255, 255, 255, .018);
    border: 1px solid rgba(77, 171, 247, .2);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.feature-card:hover {
    border-color: rgba(77, 171, 247, .5);
    background: rgba(77, 171, 247, .05);
    transform: translateY(-2px);
}
.feature-card__icon {
    display: inline-grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(77, 171, 247, .1);
    border: 1px solid rgba(77, 171, 247, .25);
    font-size: 24px;
    margin-bottom: var(--sp-4);
}
/* When the icon slot contains an inline SVG (e.g. the custom
   neural-network icon), centre it and let the SVG paint at
   its natural size — we set width/height on the <svg> itself. */
.feature-card__icon--svg svg,
.feature-block__icon--svg svg {
    display: block;
}
.feature-card__title {
    font-size: var(--fs-lg);
    margin: 0 0 var(--sp-2);
    color: var(--c-text);
}
.feature-card__body {
    color: var(--c-subtext);
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* ---------------------------------------------------------------------------
   9.5. Who for (front page) — audience grid
   --------------------------------------------------------------------------- */
.who-for {
    padding: var(--sp-16) 0;
    /* Transparent so the neural-net background shows through. */
    background: transparent;
}
.who-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    margin-top: var(--sp-8);
}
.who-card {
    padding: var(--sp-6);
    border-left: 3px solid rgba(151, 117, 250, .5);
    background: rgba(255, 255, 255, .018);
    border-radius: var(--radius-md);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
}
.who-card__title {
    margin: 0 0 var(--sp-3);
    font-size: var(--fs-lg);
    color: var(--c-text);
}
.who-card__body {
    color: var(--c-subtext);
    font-size: var(--fs-sm);
    line-height: 1.6;
    margin: 0;
}

/* ---------------------------------------------------------------------------
   10. Pricing tiers
   --------------------------------------------------------------------------- */
.pricing-tiers {
    padding: var(--sp-12) 0;
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
    align-items: stretch;
}
.pricing-card {
    position: relative;
    /* Dark glass panel with orange accent. Kept very light so the
       neural net behind it stays visible. */
    background: rgba(255, 255, 255, .018);
    border: 1px solid rgba(255, 169, 77, .2);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    transition: border-color var(--t-base), background var(--t-base), transform var(--t-base);
}
.pricing-card:hover {
    border-color: rgba(255, 169, 77, .5);
    background: rgba(255, 169, 77, .05);
    transform: translateY(-2px);
}
.pricing-card--featured {
    /* Featured card uses the pink/coral accent (the "hero" tier
       visually — this is where the user signs up). */
    border-color: rgba(247, 131, 172, .5);
    background: rgba(247, 131, 172, .05);
    transform: scale(1.02);
}
.pricing-card--featured:hover {
    transform: scale(1.02) translateY(-2px);
    background: rgba(247, 131, 172, .08);
}
.pricing-card__badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, .95);
    color: #1e1e2e;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 4px 12px;
    border-radius: var(--radius-sm);
}
.pricing-card__header { margin-bottom: var(--sp-4); }
.pricing-card__name { font-size: var(--fs-xl); margin: 0; }
.pricing-card__tagline { color: var(--c-subtext); font-size: var(--fs-sm); margin: var(--sp-1) 0 0; }
.pricing-card__price {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 var(--sp-2);
}
.pricing-card__amount {
    font-size: var(--fs-4xl);
    font-weight: 800;
    color: var(--c-text);
    line-height: 1;
}
.pricing-card__period {
    color: var(--c-subtext);
    font-size: var(--fs-md);
}
.pricing-card__quota {
    color: var(--c-blue);
    font-size: var(--fs-sm);
    font-weight: 600;
    margin: 0 0 var(--sp-6);
}
.pricing-card__features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--sp-8);
    flex-grow: 1;
}
.pricing-card__features li {
    position: relative;
    padding-left: var(--sp-6);
    margin-bottom: var(--sp-3);
    color: var(--c-subtext);
    font-size: var(--fs-sm);
}
.pricing-card__features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--c-green);
    font-weight: 700;
}

/* Token packs table */
.token-packs {
    padding: var(--sp-16) 0;
}
.packs-table {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-collapse: collapse;
    background: var(--c-mantle);
    border: 1px solid var(--c-surface0);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.packs-table th, .packs-table td {
    padding: var(--sp-3) var(--sp-4);
    text-align: left;
    border-bottom: 1px solid var(--c-surface0);
}
.packs-table th {
    background: var(--c-surface0);
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-subtext);
}
.packs-table tr:last-child td { border-bottom: none; }
.packs-table td:nth-child(2),
.packs-table td:nth-child(3) {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* ---------------------------------------------------------------------------
   11. Features (deep) and About / Contact
   --------------------------------------------------------------------------- */
.features-deep, .about-content, .contact-content {
    padding: var(--sp-16) 0;
}
.feature-block {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--sp-6);
    align-items: start;
    margin-bottom: var(--sp-12);
}
.feature-block__icon {
    display: inline-grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: rgba(137, 180, 250, .15);
    font-size: 32px;
}
.feature-block__body h2 { margin-top: 0; }
.feature-block__body p { color: var(--c-subtext); }

.feature-list {
    list-style: none;
    padding: 0;
    margin: var(--sp-4) 0 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-2) var(--sp-4);
}
.feature-list li {
    position: relative;
    padding-left: var(--sp-6);
    color: var(--c-subtext);
    font-size: var(--fs-sm);
}
.feature-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--c-blue);
    font-weight: 700;
}

.about-cols, .contact-cols {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-8);
    max-width: var(--content-max);
    margin: 0 auto;
}
.about-block, .contact-block {
    background: var(--c-mantle);
    border: 1px solid var(--c-surface0);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
}
.about-block h2, .contact-block h2 { margin-top: 0; font-size: var(--fs-xl); }
.about-block p, .contact-block p { color: var(--c-subtext); margin-bottom: var(--sp-3); }

/* ---------------------------------------------------------------------------
   12. Legal pages (terms, privacy)
   --------------------------------------------------------------------------- */
.legal-content {
    padding: var(--sp-12) 0 var(--sp-16);
}
.legal-inner {
    max-width: var(--content-narrow);
    margin: 0 auto;
}
.legal-inner h2 {
    font-size: var(--fs-lg);
    margin-top: var(--sp-8);
    color: var(--c-blue);
}
.legal-inner h2:first-child { margin-top: 0; }
.legal-inner p, .legal-inner ul {
    color: var(--c-subtext);
}
.legal-inner ul li { margin-bottom: var(--sp-2); }
.legal-meta {
    margin-top: var(--sp-12);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--c-surface0);
    font-size: var(--fs-sm);
    color: var(--c-overlay);
}

/* ---------------------------------------------------------------------------
   13. Footer
   --------------------------------------------------------------------------- */
.site-footer {
    /* Frosted glass footer — same approach as the header so the
       two feel like a matched pair. A bit darker so the
       copyright / disclaimer text stays readable. Reduced the
       backdrop blur to match the header so the network
       background reads as a unified element rather than two
       over-blurred glass plates top and bottom. */
    position: relative;
    background: linear-gradient(180deg,
        rgba(24, 24, 37, .78) 0%,
        rgba(24, 24, 37, .90) 100%);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 -1px 0 rgba(255, 255, 255, .03) inset,
                0 -8px 24px rgba(0, 0, 0, .12);
    margin-top: var(--sp-16);
}
.site-footer__inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-6);
}
.site-footer__top { padding: 0; }
.site-footer__bottom {
    border-top: 1px solid var(--c-surface0);
}
.site-footer__bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--sp-6);
    padding-bottom: var(--sp-6);
    flex-wrap: wrap;
    gap: var(--sp-3);
}
.site-footer__top .site-footer__inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--sp-8);
}
.footer-col__title {
    font-size: var(--fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-subtext);
    margin: 0 0 var(--sp-4);
}
.footer-col__title--secondary { margin-top: var(--sp-6); }
.footer-col__tagline {
    color: var(--c-subtext);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-4);
}
.footer-col--brand .footer-col__title {
    color: var(--c-text);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--fs-lg);
}
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li { margin: 0 0 var(--sp-2); }
.footer-menu a {
    color: var(--c-subtext);
    font-size: var(--fs-sm);
}
.footer-menu a:hover { color: var(--c-blue); }

.copyright, .version {
    margin: 0;
    color: var(--c-overlay);
    font-size: var(--fs-xs);
}
.copyright__company {
    color: var(--c-text);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dotted var(--c-surface2);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.copyright__company:hover {
    color: var(--c-blue);
    border-bottom-color: var(--c-blue);
}
.footer-disclaimer {
    margin: var(--sp-3) 0 0;
    color: var(--c-overlay);
    font-size: var(--fs-xs);
    line-height: 1.6;
    max-width: 100ch;
}

/* ---------------------------------------------------------------------------
   13.5. Articles — single post + list styling for markdown content
   --------------------------------------------------------------------------- */
.article {
    padding: var(--sp-12) 0 var(--sp-16);
}
.container--narrow {
    max-width: var(--content-narrow);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}
.article__header {
    margin-bottom: var(--sp-8);
    text-align: center;
}
.article__categories {
    color: var(--c-blue);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0 0 var(--sp-4);
}
.article__title {
    font-size: var(--fs-3xl);
    margin: 0 0 var(--sp-4);
    line-height: 1.1;
}
.article__excerpt {
    font-size: var(--fs-lg);
    color: var(--c-subtext);
    margin: 0 auto var(--sp-4);
    max-width: 56ch;
}
.article__meta {
    color: var(--c-overlay);
    font-size: var(--fs-sm);
    margin: 0;
}
.article__meta time { margin-right: var(--sp-3); }
.article__lang {
    display: inline-block;
    padding: 2px 8px;
    background: var(--c-surface0);
    color: var(--c-subtext);
    border-radius: var(--radius-sm);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.article__body {
    font-size: var(--fs-lg);
    line-height: 1.7;
}
.article__body h2 {
    font-size: var(--fs-2xl);
    margin: var(--sp-12) 0 var(--sp-4);
    padding-top: var(--sp-2);
    border-top: 1px solid var(--c-surface0);
}
.article__body h3 {
    font-size: var(--fs-xl);
    margin: var(--sp-8) 0 var(--sp-3);
}
.article__body p { margin: 0 0 var(--sp-4); }
.article__body ul,
.article__body ol { margin: 0 0 var(--sp-6) var(--sp-4); }
.article__body li { margin-bottom: var(--sp-2); }
.article__body blockquote {
    margin: var(--sp-6) 0;
    padding: var(--sp-4) var(--sp-6);
    border-left: 3px solid var(--c-blue);
    background: var(--c-mantle);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--c-subtext);
    font-style: italic;
}
.article__body pre {
    background: var(--c-mantle);
    border: 1px solid var(--c-surface0);
    border-radius: var(--radius-md);
    padding: var(--sp-4);
    overflow-x: auto;
    margin: var(--sp-6) 0;
}
.article__body pre code {
    background: transparent;
    padding: 0;
    color: var(--c-text);
    font-size: 0.85em;
}
.article__body :not(pre) > code {
    background: var(--c-surface0);
    border-radius: 3px;
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--c-mauve);
}
.article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--sp-6) 0;
}
.article__body th,
.article__body td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--c-surface0);
    text-align: left;
}
.article__body th {
    background: var(--c-mantle);
    font-weight: 700;
    color: var(--c-text);
}
.article__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--sp-6) 0;
}
.article__body a {
    color: var(--c-blue);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.article__footer {
    margin-top: var(--sp-12);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--c-surface0);
}
.article__lang-switcher {
    margin-top: var(--sp-4);
}
.article__lang-switcher-label {
    font-size: var(--fs-sm);
    color: var(--c-overlay);
    margin: 0 0 var(--sp-2);
}

/* ---------------------------------------------------------------------------
   14. Post list (fallback index.php)
   --------------------------------------------------------------------------- */
.post-list { padding: var(--sp-12) 0; }
.post-list__item {
    padding: var(--sp-6) 0;
    border-bottom: 1px solid var(--c-surface0);
}
.post-list__item:last-child { border-bottom: none; }
.post-list__title {
    font-size: var(--fs-xl);
    margin: 0 0 var(--sp-2);
}
.post-list__title a { color: var(--c-text); }
.post-list__title a:hover { color: var(--c-blue); }
.post-list__meta {
    color: var(--c-overlay);
    font-size: var(--fs-sm);
    margin: 0 0 var(--sp-3);
}
.post-list__excerpt {
    color: var(--c-subtext);
}

/* ---------------------------------------------------------------------------
   13. Contact page — form + aside
   --------------------------------------------------------------------------- */
.contact-content { padding: var(--sp-12) 0 var(--sp-16); }

.contact-cols {
    /* Override the 2-col grid from .about-cols — the contact page
       uses a form-on-the-left / aside-on-the-right layout that
       collapses to a single column on narrow screens. */
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) !important;
    gap: var(--sp-8);
    align-items: start;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--sp-6);
}
@media (max-width: 720px) {
    .contact-cols {
        grid-template-columns: 1fr !important;
    }
}

/* Card glass for both the form and the aside blocks.
   Orange accent to match the rest of the brand palette. */
.contact-form-wrap,
.contact-aside .contact-block {
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 169, 77, .18);
    border-radius: var(--radius-lg);
    padding: var(--sp-8) var(--sp-6);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    box-shadow: 0 0 24px rgba(255, 169, 77, .04);
}
.contact-form-wrap { padding: var(--sp-10) var(--sp-8); }
@media (max-width: 720px) {
    .contact-form-wrap { padding: var(--sp-6); }
}

.contact-form__title {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-xl);
    color: #ffffff;
}
.contact-form__intro {
    margin: 0 0 var(--sp-6);
    color: var(--c-subtext);
    font-size: var(--fs-sm);
}
.contact-form__row {
    margin-bottom: var(--sp-4);
}
.contact-form__label {
    display: block;
    margin-bottom: var(--sp-2);
    color: var(--c-text);
    font-size: var(--fs-sm);
    font-weight: 600;
}
.contact-form__required {
    color: #ff8787;
    margin-left: 2px;
}
.contact-form__input {
    display: block;
    width: 100%;
    padding: var(--sp-3) var(--sp-4);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-md);
    color: #ffffff;
    font: inherit;
    font-size: var(--fs-base);
    line-height: 1.5;
    transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.contact-form__input:focus {
    outline: none;
    border-color: rgba(255, 169, 77, .6);
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(255, 169, 77, .15);
}
.contact-form__input--error {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255, 107, 107, .15) !important;
}
.contact-form__textarea {
    resize: vertical;
    min-height: 120px;
    font-family: inherit;
}
.contact-form__select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23cdd6f4' d='M6 8L0 0h12z'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--sp-4) center;
    background-size: 10px 7px;
    padding-right: var(--sp-8);
    cursor: pointer;
}
/* Honeypot — hidden from real users, spambots fill it */
.contact-form__honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.contact-form__actions {
    margin-top: var(--sp-6);
}
.contact-form__submit {
    position: relative;
    min-width: 160px;
}
.contact-form__submit-spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(30, 30, 46, .3);
    border-top-color: #1e1e2e;
    border-radius: 50%;
    margin-left: var(--sp-2);
    vertical-align: -2px;
    animation: contact-spin 0.7s linear infinite;
}
.contact-form__submit-spinner.is-active { display: inline-block; }
@keyframes contact-spin {
    to { transform: rotate(360deg); }
}
.contact-form__submit:disabled {
    opacity: .7;
    cursor: wait;
}
.contact-form__status {
    margin-top: var(--sp-4);
    min-height: 1.5em;
    font-size: var(--fs-sm);
    color: var(--c-subtext);
}
.contact-form__status--success { color: #69db7c; }
.contact-form__status--error   { color: #ff8787; }

/* Aside blocks: emphasise the single email address */
.contact-block__email a {
    color: #ffffff;
    font-weight: 700;
    font-size: var(--fs-lg);
    text-decoration: none;
    border-bottom: 1px dotted rgba(255, 255, 255, .3);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.contact-block__email a:hover {
    color: var(--c-yellow);
    border-bottom-color: var(--c-yellow);
}
.contact-aside .contact-block + .contact-block {
    margin-top: var(--sp-4);
}


/* ---------------------------------------------------------------------------
   14. My account (coming-soon page)
   --------------------------------------------------------------------------- */
.account-coming-soon {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--sp-12) var(--sp-8);
    background: rgba(255, 255, 255, .025);
    border: 1px solid rgba(255, 212, 59, .25);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    text-align: center;
    box-shadow: 0 0 24px rgba(255, 212, 59, .05);
}
.account-coming-soon__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255, 212, 59, .12);
    border: 1px solid rgba(255, 212, 59, .3);
    margin-bottom: var(--sp-5);
    box-shadow: 0 0 20px rgba(255, 212, 59, .2);
}
.account-coming-soon__title {
    margin: 0 0 var(--sp-4);
    font-size: var(--fs-2xl);
    color: #ffffff;
}
.account-coming-soon__lead {
    margin: 0 auto var(--sp-6);
    max-width: 56ch;
    color: var(--c-subtext);
    font-size: var(--fs-lg);
    line-height: 1.6;
}
.account-coming-soon__grid {
    text-align: left;
    max-width: 540px;
    margin: 0 auto var(--sp-8);
    padding: var(--sp-5) var(--sp-6);
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: var(--radius-md);
}
.account-coming-soon__row {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-2) 0;
    color: var(--c-text);
    font-size: var(--fs-sm);
    line-height: 1.5;
}
.account-coming-soon__row + .account-coming-soon__row {
    border-top: 1px solid rgba(255, 255, 255, .04);
}
.account-coming-soon__check {
    color: #69db7c;
    font-weight: 700;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}
.account-coming-soon__actions {
    display: flex;
    gap: var(--sp-3);
    justify-content: center;
    flex-wrap: wrap;
}