*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --bg: #04030D;
    --hero-bg: #080119;
    --bg2: #07061A;
    --sub-bg: #07061A;
    --card-bg: rgba(8,6,22,.75);
    --surface: rgba(255,255,255,0.04);
    --surface-mid: rgba(255,255,255,0.065);
    --accent: #9B6DFF;
    --accent-dark: #6E3FBE;
    --accent2: #2DD4BF;
    --white: #F0EEFF;
    --text: #F0EEFF;
    --text-soft: #B8B2D4;
    --gray: #B8B2D4;
    --muted: #5E597A;
    --border: rgba(255, 255, 255, 0.07);
    --border-accent: rgba(155,109,255,0.35);
    --nav-h: 76px;
    --purple-light: #C4A9FF;
    --purple-dark: #6E3FBE;
    --amber: #FBBF24;
    --blue: #38BDF8;
    --trend-down: #f87171;
    --accent-glow: rgba(155,109,255,0.25);
    --grad: linear-gradient(135deg,#9B6DFF,#6E3FBE);
    --grad-text: linear-gradient(130deg,#C4A9FF 0%,#8B6BF8 45%,#38BDF8 100%);
    --shadow-glow: 0 0 48px rgba(155,109,255,0.12), 0 16px 48px rgba(0,0,0,0.5);
    --font-d: 'DM Sans', sans-serif;
    --font-b: 'DM Sans', sans-serif;
    --font-share-tech-mono: 'Share Tech Mono', monospace;
    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --r-xl: 30px;
    --max-w: 1260px;
    --btn-bg: url('../img/btn2.png');
    /* Homepage sections  trust, roadmap, testimonials */
    --trust-strip-bg: rgba(8, 6, 22, 0.92);
    --trust-border: rgba(255, 255, 255, 0.06);
    --roadmap-line: rgba(155, 109, 255, 0.25);
    --roadmap-node: rgba(155, 109, 255, 0.45);
    --roadmap-complete: var(--accent2);
    --roadmap-progress: #FBBF24;
    --roadmap-upcoming: rgba(155, 109, 255, 0.35);
    /* About page hero */
    --about-hero-image: url('../img/prod2.png');
    --about-hero-overlay: linear-gradient(
        180deg,
        rgba(4, 3, 13, 0.52) 0%,
        rgba(4, 3, 13, 0.68) 45%,
        rgba(4, 3, 13, 0.9) 100%
    );
    /* Community page hero (same prod2 backdrop as about) */
    --community-hero-overlay: var(--about-hero-overlay);
    --community-hero-image: var(--about-hero-image);
    /* About page  hand-drawn sketch roadmap */
    --roadmap-sketch-ink: #C4A9FF;
    --roadmap-sketch-ink-muted: rgba(196, 169, 255, 0.55);
    --roadmap-sketch-paper: rgba(255, 252, 248, 0.04);
    --roadmap-sketch-paper-border: rgba(196, 169, 255, 0.28);
    --roadmap-sketch-shadow: rgba(0, 0, 0, 0.35);
    /* Clickable roadmap timeline dots (about page) */
    --roadmap-milestone-dot-size: 26px;
    --roadmap-milestone-dot-size-lg: 34px;
    --roadmap-milestone-dot-ring: rgba(155, 109, 255, 0.35);
    /* Roadmap milestone tooltip (about page) */
    --roadmap-tooltip-bg: rgba(10, 8, 26, 0.97);
    --roadmap-tooltip-border: rgba(155, 109, 255, 0.38);
    --roadmap-tooltip-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(155, 109, 255, 0.12);
    --roadmap-tooltip-scrim: rgba(4, 3, 13, 0.25);
    /* Roadmap hover-expand cards (about sketch timeline) */
    --roadmap-milestone-expand-w: 252px;
    --roadmap-milestone-expand-bg: rgba(10, 8, 26, 0.96);
    --roadmap-milestone-expand-border: rgba(155, 109, 255, 0.45);
    --roadmap-milestone-expand-shadow: 0 14px 36px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(155, 109, 255, 0.14), 0 0 24px rgba(155, 109, 255, 0.1);
    --roadmap-milestone-expand-radius: 14px;
    --roadmap-milestone-card-radius: 10px;
    /* Sketch roadmap: hover rectangle split (period top / copy bottom) */
    --roadmap-milestone-split-top-bg: linear-gradient(
        135deg,
        rgba(155, 109, 255, 0.62) 0%,
        rgba(110, 63, 190, 0.78) 48%,
        rgba(45, 212, 191, 0.28) 100%
    );
    --roadmap-milestone-split-bottom-bg: linear-gradient(180deg, rgba(6, 5, 18, 0.98) 0%, rgba(8, 6, 22, 0.96) 100%);
    --roadmap-milestone-split-divider: rgba(45, 212, 191, 0.42);
    --roadmap-milestone-split-period-color: #f8f5ff;
    --roadmap-milestone-circle-year-color: rgba(248, 245, 255, 0.96);
    --roadmap-milestone-circle-year-shadow: 0 1px 2px rgba(4, 3, 13, 0.45);
    --roadmap-milestone-year-ink: #120b24;
    /* About page: year roadmap (circle expands to H1 / H2 split card) */
    --roadmap-year-node-size: 88px;
    --roadmap-year-node-size-sm: 76px;
    --roadmap-year-node-expand-w: 320px;
    --roadmap-year-node-expand-min-h: 188px;
    /* Reserve vertical space so flex centering does not jump when a node expands */
    --roadmap-year-track-min-h: 204px;
    --roadmap-year-node-radius-expand: var(--r-md);
    --roadmap-year-node-shadow: 0 8px 28px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(155, 109, 255, 0.18);
    --roadmap-year-node-shadow-hover: 0 18px 48px rgba(155, 109, 255, 0.22), 0 14px 40px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(45, 212, 191, 0.15);
    --roadmap-year-node-face: linear-gradient(145deg, var(--accent-dark) 0%, var(--accent) 50%, rgba(45, 212, 191, 0.45) 100%);
    --roadmap-year-panel-surface: rgba(10, 8, 26, 0.98);
    --roadmap-year-half-top-bg: linear-gradient(180deg, rgba(155, 109, 255, 0.2) 0%, rgba(14, 10, 32, 0.72) 100%);
    --roadmap-year-half-bottom-bg: linear-gradient(180deg, rgba(6, 5, 18, 0.98) 0%, rgba(8, 6, 22, 0.99) 100%);
    --roadmap-year-half-divider: rgba(45, 212, 191, 0.38);
    --font-roadmap-sketch: 'Caveat', cursive;
    --testimonial-accent: #6B21A8;
    --marquee-duration: 32s;
    /* Full-bleed media bands */
    --cinematic-scrim: linear-gradient(180deg, rgba(4, 3, 13, 0.45) 0%, rgba(4, 3, 13, 0.82) 100%);
    --cinematic-scrim-strong: linear-gradient(135deg, rgba(4, 3, 13, 0.55) 0%, rgba(10, 6, 26, 0.88) 100%);
    /* Sticky split sections */
    --sticky-side-top: 110px;
    --sticky-side-maxw: 340px;
    /* Timeline */
    --timeline-line: rgba(155, 109, 255, 0.22);
    --timeline-dot: rgba(155, 109, 255, 0.55);
    /* Expand / read-more, offices, affiliate, popup */
    --expand-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --mission-bg: rgba(155, 109, 255, 0.06);
    --mission-border: rgba(155, 109, 255, 0.22);
    --popup-bg: rgba(8, 6, 22, 0.96);
    --popup-border: rgba(155, 109, 255, 0.35);
    --tier-card-bg: rgba(255, 255, 255, 0.03);
    /* About section  secondary modal trigger */
    --teaser-outline-border: rgba(155, 109, 255, 0.35);
    --teaser-outline-bg-hover: rgba(155, 109, 255, 0.08);
    /* RGB channels for rgba(var(--rgb-*), alpha) in styles.css */
    --rgb-bg-deep: 4, 3, 13;
    --rgb-elevated: 10, 8, 26;
    --rgb-card: 8, 6, 22;
    --rgb-white: 255, 255, 255;
    --rgb-black: 0, 0, 0;
    --rgb-accent: 155, 109, 255;
    --rgb-accent2: 45, 212, 191;
    --rgb-amber: 251, 191, 36;
    /* Inline SVG (data URL)  stroke matches --accent2 */
    --icon-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%232DD4BF' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    /* Contact page */
    --contact-category-surface: rgba(255, 255, 255, 0.035);
    --contact-category-border: rgba(255, 255, 255, 0.09);
    --contact-category-border-hover: rgba(155, 109, 255, 0.45);
    --contact-input-bg: rgba(255, 255, 255, 0.04);
    /* Opaque fill for <select> / options — native UIs often ignore translucent backgrounds (white field + light text). */
    --contact-input-bg-solid: #12101f;
    --contact-input-border: rgba(255, 255, 255, 0.1);
    --contact-input-focus: rgba(155, 109, 255, 0.5);
    --contact-hero-eyebrow-color: rgba(155, 109, 255, 0.95);
    /* Contact hero photo uses <img> + overlay (see internal.css); tint matches about hero */
    --contact-hero-overlay: var(--about-hero-overlay);
    --contact-category-cta-color: rgba(155, 109, 255, 0.95);
    --contact-social-link-size: 4rem;
    --contact-social-icon-size: 1.85rem;
    --contact-trust-line-color: rgba(45, 212, 191, 0.9);
    --contact-form-trust-banner-bg: rgba(155, 109, 255, 0.08);
    --contact-form-trust-banner-border: rgba(155, 109, 255, 0.24);
    --contact-form-trust-banner-icon: var(--accent2);
    /* Contact  global offices grid */
    --contact-office-surface: rgba(255, 255, 255, 0.04);
    --contact-office-border: rgba(255, 255, 255, 0.1);
    --contact-office-border-hover: rgba(155, 109, 255, 0.4);
    --contact-office-hq-bg: linear-gradient(
        145deg,
        rgba(155, 109, 255, 0.12) 0%,
        rgba(45, 212, 191, 0.06) 100%
    );
    --contact-office-hq-border: rgba(155, 109, 255, 0.35);
    --contact-office-icon-color: rgba(155, 109, 255, 0.85);
    --contact-office-badge-bg: rgba(155, 109, 255, 0.2);
    --contact-office-badge-text: rgba(232, 228, 255, 0.98);
    /* Contact page social icon accents */
    --contact-social-instagram: #2dd4bf;
    --contact-social-facebook: #93c5fd;
    --contact-social-twitter: #f0eeff;
    --contact-social-youtube: #c4a9ff;
    --contact-social-reddit: #fb923c;
    --contact-social-github: #e8e4ff;
    /* Internal page breadcrumbs */
    --breadcrumb-bg: rgba(255, 255, 255, 0.04);
    --breadcrumb-border: rgba(255, 255, 255, 0.09);
    --breadcrumb-link: var(--muted);
    --breadcrumb-link-hover: var(--accent);
    --breadcrumb-current: var(--text-soft);
    --breadcrumb-sep-color: rgba(184, 178, 212, 0.4);
    /* Brand mark image sizes  assets: static/img/logo-transparent.png (dark UI),
       static/img/logo.png (light backgrounds), static/img/logo-black.png (light/print) */
    --brand-logo-nav-size: 34px;
    --brand-logo-footer-size: 36px;
    /* Community  regional hub cards */
    --regional-hub-bg: rgba(255, 255, 255, 0.035);
    --regional-hub-border: rgba(155, 109, 255, 0.18);
    --regional-hub-flag-ring: rgba(155, 109, 255, 0.4);
    --regional-hub-glow: rgba(45, 212, 191, 0.12);
    /* Homepage floating card CTA (below mega dropdown 999 & modals 9999) */
    --floating-cta-z: 998;
    --floating-cta-inset: 1.25rem;
    /* Fixed starfield (static/js/starfield.js + .starfield in styles.css) */
    --starfield-min-opacity: 0.14;
    --starfield-max-opacity: 0.92;
    --starfield-accent-min-opacity: 0.1;
    --starfield-accent-max-opacity: 0.78;
    --starfield-star-fill: rgba(240, 238, 255, 0.95);
    --starfield-glow-soft: 0 0 5px rgba(240, 238, 255, 0.22);
    --starfield-glow-accent: 0 0 8px rgba(155, 109, 255, 0.45);
    /* Partner form — proposal / additional info panel */
    --partner-proposal-box-bg: rgba(255, 255, 255, 0.035);
    --partner-proposal-box-border: rgba(155, 109, 255, 0.28);
    --partner-proposal-box-radius: var(--r-lg);
    --partner-proposal-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    --partner-form-section-label: rgba(184, 178, 212, 0.92);
}

/* Shared layout  internal heroes and sections use .container */
.container {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 30px;
}

.padding-top-zero {
    padding-top: 0;
}