/* ============================================================
   ZENCRYPTIX — Brand identity tokens (Unbounded refresh)
   Sourced from logoxbranding/files/* — purple-only palette:
     bg #0A0612 · purple #A855F7 · text #F1EFE8
   The legacy --cyan-* tokens are kept (aliased to purple shades)
   so existing rules don't need to change.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
    --black: #0A0612;        /* deep ink, pulled from logo backdrop */
    --black-2: #0F0A1A;      /* surface one */
    --black-3: #15102A;      /* surface two */
    --purple: #A855F7;       /* primary brand */
    --purple-2: #C084FC;     /* tint */
    --purple-deep: #7E22CE;  /* shade */
    --purple-glow: rgba(168, 85, 247, 0.45);
    --purple-soft: rgba(168, 85, 247, 0.12);

    /* Aliased to purple shades — variable names retained so the rest of
       the stylesheet doesn't need to be rewritten. */
    --cyan: #C084FC;         /* light purple (formerly cyan accent) */
    --cyan-2: #E9D5FF;       /* pale purple tint */
    --cyan-soft: rgba(192, 132, 252, 0.12);
    --cyan-glow: rgba(192, 132, 252, 0.40);

    --text: #F1EFE8;         /* warm cream from logo system */
    --text-muted: #9CA3AF;
    --text-dim: #6B7280;

    --border: rgba(241, 239, 232, 0.08);
    --border-strong: rgba(168, 85, 247, 0.35);
    --border-line: #1F1729;  /* dividers per logo system */

    --gradient-primary: linear-gradient(135deg, #A855F7 0%, #C084FC 100%);
    --gradient-primary-soft: linear-gradient(135deg, rgba(168, 85, 247, 0.85) 0%, rgba(192, 132, 252, 0.85) 100%);
    --gradient-card: linear-gradient(160deg, rgba(168, 85, 247, 0.16) 0%, rgba(15, 10, 26, 0.7) 60%, rgba(10, 6, 18, 0.95) 100%);
    --gradient-text: linear-gradient(135deg, #E9D5FF 0%, #A855F7 45%, #7E22CE 100%);
    --gradient-logo: linear-gradient(135deg, #A855F7 0%, #C084FC 100%);

    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 12px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 60px rgba(168, 85, 247, 0.35);

    --radius-sm: 10px;
    --radius-md: 16px;
    --radius-lg: 22px;

    --container: 1200px;
    --nav-h: 84px;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--text);
    background: var(--black);
    line-height: 1.65;
    overflow-x: hidden;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

input,
textarea {
    font-family: inherit;
    font-size: 1rem;
    color: inherit;
}

::selection {
    background: var(--purple);
    color: #fff;
}

/* ---------- Layout helpers ---------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.section {
    position: relative;
    padding: 120px 0;
    z-index: 2;
}

.section--alt {
    padding-bottom: 140px;
}

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

/* ---------- Animated background ---------- */
/* Constellation canvas — drifting stars connected to nearest neighbours.
   Full-screen, slight opacity dial-back so foreground content stays the
   focal point, no radial mask (constellation reads better edge-to-edge). */
.bg-matrix {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
}

.bg-grid {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.9) 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 30%, rgba(0, 0, 0, 0.9) 0%, transparent 70%);
}

/* Background orbs retired — the soft blurred glows read as 2018-era SaaS
   marketing decoration. Page now relies on the matrix rain + grid + noise
   for texture; the result is sharper and more "operations console". */
.bg-orb { display: none; }

.bg-noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.04;
    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='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}


/* ---------- Navigation ---------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: var(--nav-h);
    background: rgba(10, 10, 10, 0.6);
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid transparent;
    transition: background 0.3s var(--ease), border-color 0.3s var(--ease);
}

.navbar.scrolled {
    background: rgba(10, 10, 10, 0.85);
    border-bottom-color: var(--border);
}

.nav-inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

/* The brand SVG is the source-of-truth wordmark from logoxbranding/files/
   inlined directly so it inherits the page's loaded Unbounded font. Sized
   by height — width auto-scales to preserve the 320:60 aspect ratio. */
.brand-img {
    height: 36px;
    width: auto;
    display: block;
}

.brand-img--footer {
    height: 30px;
}

.brand:hover {
    /* no hover glow — keep the logo identical at rest and on hover */
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-links a {
    position: relative;
    padding: 10px 16px;
    color: var(--text-muted);
    font-size: 0.93rem;
    font-weight: 500;
    border-radius: 8px;
    transition: color 0.2s var(--ease), background 0.2s var(--ease);
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
    transition: width 0.3s var(--ease);
    border-radius: 2px;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 24px;
}

.nav-cta {
    padding: 10px 20px;
    font-size: 0.9rem;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.nav-toggle span {
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--gradient-primary);
    color: #fff;
    box-shadow: 0 8px 24px rgba(126, 34, 206, 0.4);
}

.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #C084FC 0%, #A855F7 100%);
    opacity: 0;
    transition: opacity 0.3s var(--ease);
}

.btn-primary > * {
    position: relative;
    z-index: 1;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(126, 34, 206, 0.55), 0 0 40px rgba(168, 85, 247, 0.4);
}

.btn-primary:hover::before {
    opacity: 1;
}

.btn-ghost {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
}

.btn-ghost:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: var(--border-strong);
    transform: translateY(-2px);
}

.btn-block {
    width: 100%;
}

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: calc(var(--nav-h) + 60px) 0 80px;
    z-index: 2;
}

.hero-inner {
    width: 100%;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 80px;
}

.hero-content {
    max-width: 620px;
}

/* Right column — operator terminal. Replaces the prior glowing brand-mark
   visual with a small console scene that signals "we actually do the work"
   instead of looking like SaaS marketing decoration. Brand-tinted:
   cyan prompts, purple commands, soft white output. */
.hero-visual {
    position: relative;
    display: block;
    justify-self: end;
    width: 100%;
    max-width: 540px;
}

/* Clean indigo console — no chrome bar, just a dark rounded card. The
   only adornment is a soft brand-tinted edge highlight; everything else
   is the code. Background sits in the deep indigo family so it reads as
   distinct from the page bg without leaning purple/blue marketing. */
.terminal {
    position: relative;
    background: linear-gradient(180deg, #110823 0%, #0c0519 100%);
    border: 1px solid rgba(168, 85, 247, 0.22);
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(168, 85, 247, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.terminal__body {
    margin: 0;
    padding: 30px 38px;
    font-family: "JetBrains Mono", "Space Mono", monospace;
    font-size: 1.4rem;
    line-height: 1.5;
    color: rgba(245, 245, 247, 0.82);
}

.t-line { margin: 0; }


/* Brand-aligned syntax palette — purple + cyan only, with one magenta
   accent used exclusively to flag critical findings. No generic
   red/amber/green; severity is implied by hierarchy and weight.
   Bracketed status markers ([*], [+], [!]) follow real pentest tool
   conventions — sec engineers immediately recognise them. */
.t-prompt  { color: #C084FC; font-weight: 600; text-shadow: 0 0 10px rgba(192, 132, 252, 0.35); }
.t-cmd     { color: #C084FC; font-weight: 600; }
.t-flag    { color: rgba(192, 132, 252, 0.78); }
.t-arg     { color: rgba(245, 245, 247, 0.88); }
.t-arrow   { color: rgba(168, 85, 247, 0.6); }
.t-check   { color: #C084FC; font-weight: 700; text-shadow: 0 0 10px rgba(192, 132, 252, 0.45); }
.t-out     { color: rgba(245, 245, 247, 0.65); }
.t-crit    { color: #E879F9; font-weight: 700; }
.t-high    { color: #C084FC; font-weight: 600; }
.t-sep     { color: rgba(245, 245, 247, 0.3); margin: 0 2px; }

.t-cursor {
    display: inline-block;
    width: 7px;
    height: 1em;
    background: #C084FC;
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: t-blink 1.05s steps(1) infinite;
    box-shadow: 0 0 10px rgba(192, 132, 252, 0.55);
}

@keyframes t-blink {
    50% { opacity: 0; }
}

@media (max-width: 560px) {
    .terminal__body { font-size: 0.74rem; padding: 20px 18px 22px; line-height: 1.5; }
}

/* Status row — replaces "Encrypted Beyond Limits" eyebrow */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: var(--purple-soft);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.status-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--border-strong);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(192, 132, 252, 0.10));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text);
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 28px;
}

.status-row .pulse-dot { margin-right: 4px; }

.status-row .status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

.status-row .status--secure { color: var(--cyan-2); }

.status-row .status-divider {
    color: var(--text-dim);
    opacity: 0.55;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.7);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0.7); }
    70% { box-shadow: 0 0 0 12px rgba(192, 132, 252, 0); }
    100% { box-shadow: 0 0 0 0 rgba(192, 132, 252, 0); }
}

.hero-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.9rem, 3.4vw, 2.95rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.025em;
    margin-bottom: 24px;
}

.hero-tagline {
    color: var(--text-muted);
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    max-width: 560px;
    margin: 0 0 40px 0;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    max-width: 720px;
    margin: 0 auto;
    padding-top: 48px;
    border-top: 1px solid var(--border);
    text-align: center;
    align-items: start;
}

/* Every stat — link or div — uses the same internal box so numbers and
   labels align on a shared baseline across all three cells. */
.stat {
    display: block;
    padding: 8px 6px 6px;
    border-radius: 10px;
}

.stat-num {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 700;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
}

.stat-label {
    color: var(--text-dim);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

/* Clickable cert stat → links to the offensive page's credential ledger.
   Padding/box already comes from .stat — only link-specific affordances
   (cursor, color reset, hover transition) live here. */
.stat--link {
    text-decoration: none;
    color: inherit;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}

.stat--link:hover {
    background: rgba(168, 85, 247, 0.08);
    transform: translateY(-2px);
}

.stat-arrow {
    font-size: 0.7em;
    margin-left: 6px;
    color: rgba(192, 132, 252, 0.7);
    transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.stat--link:hover .stat-arrow {
    transform: translateY(3px);
    color: #C084FC;
}

.hero-scroll {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: var(--text-dim);
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    animation: bob 2.4s ease-in-out infinite;
}

@keyframes bob {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* ---------- Section heads ---------- */
.section-head {
    text-align: center;
    max-width: 1100px;
    margin: 0 auto 64px;
}

.section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--purple-soft), var(--cyan-soft));
    border: 1px solid rgba(192, 132, 252, 0.25);
    color: var(--cyan);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.section-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
}

.section-title .divider {
    color: var(--text-dim);
    margin: 0 8px;
    font-weight: 300;
}

.section-sub {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ---------- Certifications slider ---------- */
.cert-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.cert-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 20px 4px 30px;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.cert-track::-webkit-scrollbar { display: none; }
.cert-track:active { cursor: grabbing; }

.cert-card {
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    perspective: 1000px;
}

.cert-card-inner {
    position: relative;
    height: 320px;
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.cert-card-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.25), transparent 50%),
        radial-gradient(circle at 0% 100%, rgba(75, 0, 130, 0.2), transparent 50%);
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.4s var(--ease);
}

.cert-card-inner::after {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.cert-card:hover .cert-card-inner {
    transform: translateY(-6px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md), 0 0 40px rgba(126, 34, 206, 0.25);
}

.cert-card:hover .cert-card-inner::before {
    opacity: 1;
}

.cert-top,
.cert-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.cert-seal {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: var(--gradient-primary);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    color: #fff;
    box-shadow: 0 0 24px var(--purple-glow);
}

.cert-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.cert-id {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.72rem;
    color: var(--text-dim);
    letter-spacing: 0.08em;
}

.cert-year {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}

.cert-body {
    position: relative;
    z-index: 1;
}

.cert-pretitle {
    font-size: 0.78rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 8px;
}

.cert-name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 12px;
}

.cert-issuer {
    color: var(--text-muted);
    font-size: 0.88rem;
}

.cert-tag {
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.18);
    border: 1px solid var(--border-strong);
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #E9D5FF;
}

.cert-verify {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6ee7a3;
    font-size: 0.8rem;
    font-weight: 500;
}

.slider-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    color: var(--text);
    display: grid;
    place-items: center;
    backdrop-filter: blur(10px);
    transition: all 0.25s var(--ease);
}

.slider-arrow:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    transform: scale(1.08);
    box-shadow: 0 0 24px var(--purple-glow);
}

.slider-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.slider-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.3s var(--ease);
    padding: 0;
}

.slider-dots button.active {
    width: 28px;
    border-radius: 4px;
    background: var(--gradient-primary);
}

/* ---------- Acknowledgments marquee ----------
   Two horizontal rows that scroll opposite directions. Edge mask fades
   tiles in/out smoothly. Hover pauses motion and reveals each company's
   real brand color. Restored after the static grid felt too quiet for
   this section's "trusted by 30+ companies" message. */
.marquee {
    overflow: hidden;
    padding: 16px 0;
    margin-top: 32px;
    mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.marquee + .marquee { margin-top: 8px; }

.marquee-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scroll-left 90s linear infinite;
}

.marquee--reverse .marquee-track {
    animation: scroll-right 110s linear infinite;
}

.marquee:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes scroll-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes scroll-right {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.logo-tile {
    --brand: #A855F7;
    --brand-rgb: 168, 85, 247;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 28px;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    color: rgba(245, 245, 247, 0.42);
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    min-width: 200px;
    justify-content: center;
    transition: color 0.35s var(--ease), background 0.35s var(--ease),
                border-color 0.35s var(--ease), transform 0.35s var(--ease),
                box-shadow 0.35s var(--ease);
}

.logo-tile svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    color: inherit;
    fill: currentColor;
    transition: filter 0.35s var(--ease), transform 0.35s var(--ease);
}

.logo-tile:hover {
    color: var(--brand);
    background: rgba(var(--brand-rgb), 0.12);
    border-color: rgba(var(--brand-rgb), 0.55);
    transform: translateY(-3px);
    box-shadow: 0 14px 36px rgba(var(--brand-rgb), 0.28),
                0 0 22px rgba(var(--brand-rgb), 0.15) inset;
}

.logo-tile:hover svg {
    filter: drop-shadow(0 0 12px rgba(var(--brand-rgb), 0.65));
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .logo-tile {
        min-width: 160px;
        padding: 14px 22px;
        font-size: 0.95rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track,
    .marquee--reverse .marquee-track { animation-duration: 80s; }
}

/* Per-brand colors (actual brand palettes) for marquee tiles */
.brand-riverisland     { --brand: #C8102E; --brand-rgb: 200, 16, 46; }
.brand-sogexia         { --brand: #00B0F0; --brand-rgb: 0, 176, 240; }
.brand-ebay            { --brand: #E53238; --brand-rgb: 229, 50, 56; }
.brand-coursera        { --brand: #2A73E8; --brand-rgb: 42, 115, 232; }
.brand-redbull         { --brand: #DB0A40; --brand-rgb: 219, 10, 64; }
.brand-alibaba         { --brand: #FF6A00; --brand-rgb: 255, 106, 0; }
.brand-eutelsat        { --brand: #2E63D6; --brand-rgb: 46, 99, 214; }
.brand-reddit          { --brand: #FF4500; --brand-rgb: 255, 69, 0; }
.brand-smule           { --brand: #FF6B00; --brand-rgb: 255, 107, 0; }
.brand-intermedia      { --brand: #009ED4; --brand-rgb: 0, 158, 212; }
.brand-mattermost      { --brand: #4A6FA5; --brand-rgb: 74, 111, 165; }
.brand-autoscout24     { --brand: #FFDC00; --brand-rgb: 255, 220, 0; }
.brand-logitech        { --brand: #00B8FC; --brand-rgb: 0, 184, 252; }
.brand-uber            { --brand: #f5f5f7; --brand-rgb: 245, 245, 247; }
.brand-ibm             { --brand: #1F70C1; --brand-rgb: 31, 112, 193; }
.brand-rapyd           { --brand: #8B5CF6; --brand-rgb: 139, 92, 246; }
.brand-nordsec         { --brand: #4687FF; --brand-rgb: 70, 135, 255; }
.brand-razer           { --brand: #44D62C; --brand-rgb: 68, 214, 44; }
.brand-seventeenhats   { --brand: #FF6F00; --brand-rgb: 255, 111, 0; }
.brand-instacart       { --brand: #43B02A; --brand-rgb: 67, 176, 42; }
.brand-ford            { --brand: #2A76C8; --brand-rgb: 42, 118, 200; }
.brand-bykea           { --brand: #00A86B; --brand-rgb: 0, 168, 107; }
.brand-navient         { --brand: #4A82BE; --brand-rgb: 74, 130, 190; }
.brand-wehkamp         { --brand: #E60028; --brand-rgb: 230, 0, 40; }
.brand-cirrusinsight   { --brand: #1F9FCB; --brand-rgb: 31, 159, 203; }
.brand-sprinklr        { --brand: #F58220; --brand-rgb: 245, 130, 32; }
.brand-investnext      { --brand: #1A73E8; --brand-rgb: 26, 115, 232; }
.brand-unit410         { --brand: #C0C0C0; --brand-rgb: 192, 192, 192; }
.brand-teamtopia       { --brand: #2E86DE; --brand-rgb: 46, 134, 222; }
.brand-mirrorweb       { --brand: #1F8FB8; --brand-rgb: 31, 143, 184; }
.brand-paloalto        { --brand: #2C9F2C; --brand-rgb: 44, 159, 44; }
.brand-sealimited      { --brand: #5B83C8; --brand-rgb: 91, 131, 200; }
.brand-amitree         { --brand: #19A974; --brand-rgb: 25, 169, 116; }
.brand-ifttt           { --brand: #f5f5f7; --brand-rgb: 245, 245, 247; }
.brand-expedia         { --brand: #FFC72C; --brand-rgb: 255, 199, 44; }
.brand-adobe           { --brand: #FA0F00; --brand-rgb: 250, 15, 0; }
.brand-sony            { --brand: #f5f5f7; --brand-rgb: 245, 245, 247; }
.brand-gc3             { --brand: #C8102E; --brand-rgb: 200, 16, 46; }
.brand-tva             { --brand: #2A6FB8; --brand-rgb: 42, 111, 184; }
.brand-moogsoft        { --brand: #00B5E2; --brand-rgb: 0, 181, 226; }
.brand-eightxeight     { --brand: #ED1C24; --brand-rgb: 237, 28, 36; }
.brand-oneplus         { --brand: #EB0028; --brand-rgb: 235, 0, 40; }
.brand-chargepoint     { --brand: #00A451; --brand-rgb: 0, 164, 81; }
.brand-desjardins      { --brand: #00874E; --brand-rgb: 0, 135, 78; }
.brand-jopwell         { --brand: #2E7D32; --brand-rgb: 46, 125, 50; }
.brand-pg              { --brand: #1F5DC8; --brand-rgb: 31, 93, 200; }
.brand-carbonblack     { --brand: #0091DA; --brand-rgb: 0, 145, 218; }
.brand-dod             { --brand: #4A6FA5; --brand-rgb: 74, 111, 165; }
.brand-amexgbt         { --brand: #2671B5; --brand-rgb: 38, 113, 181; }
.brand-sophos          { --brand: #0079B6; --brand-rgb: 0, 121, 182; }
.brand-opera           { --brand: #FF1B2D; --brand-rgb: 255, 27, 45; }
.brand-walmart         { --brand: #FFC220; --brand-rgb: 255, 194, 32; }
.brand-fireeye         { --brand: #ED1C24; --brand-rgb: 237, 28, 36; }
.brand-upwork          { --brand: #14A800; --brand-rgb: 20, 168, 0; }
.brand-dell            { --brand: #007DB8; --brand-rgb: 0, 125, 184; }
.brand-seatgeek        { --brand: #FF5B49; --brand-rgb: 255, 91, 73; }
.brand-paysafe         { --brand: #2D72D9; --brand-rgb: 45, 114, 217; }
.brand-atlassian       { --brand: #2684FF; --brand-rgb: 38, 132, 255; }

/* ---------- Contact ---------- */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 64px;
    align-items: start;
}

.contact-info .section-tag,
.contact-info .section-title {
    text-align: left;
}

.contact-info .section-title {
    margin-bottom: 18px;
}

.contact-sub {
    margin: 0 0 32px 0;
    text-align: left;
    max-width: 100%;
}

.contact-points {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 36px;
}

.contact-points li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.contact-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--purple-soft);
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--purple-2);
    font-size: 1rem;
    flex-shrink: 0;
}

.contact-label {
    display: block;
    font-size: 0.78rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 2px;
}

.contact-value {
    display: block;
    font-weight: 500;
    color: var(--text);
}

.social-row {
    display: flex;
    gap: 12px;
}

.social {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border);
    display: grid;
    place-items: center;
    color: var(--text-muted);
    transition: all 0.25s var(--ease);
}

.social:hover {
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(126, 34, 206, 0.4);
}

/* Form card */
.contact-card {
    position: relative;
    padding: 40px;
    background: linear-gradient(160deg, rgba(126, 34, 206, 0.12) 0%, rgba(15, 15, 22, 0.92) 60%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    overflow: hidden;
    transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.contact-card::before {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.contact-card:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md), 0 0 60px rgba(126, 34, 206, 0.18);
}

.form-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 6px;
    position: relative;
}

.form-sub {
    color: var(--text-muted);
    font-size: 0.92rem;
    margin-bottom: 28px;
    position: relative;
}

/* Honeypot — visually & semantically hidden from humans/AT, but
   not from naive bots that submit every form field they find. */
.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.field {
    position: relative;
    margin-bottom: 18px;
}

.field label {
    display: block;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}

.field-optional {
    color: var(--text-dim);
    font-weight: 400;
    margin-left: 4px;
    font-size: 0.78rem;
}

.field-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.25s var(--ease), background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.field-wrap > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 0.95rem;
    pointer-events: none;
    transition: color 0.25s var(--ease);
}

.field-wrap--textarea > i {
    top: 18px;
    transform: none;
}

.field-wrap--phone {
    display: flex;
    align-items: stretch;
}

.cc-trigger {
    appearance: none;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 0.95rem;
    font-family: inherit;
    padding: 14px 14px 14px 44px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    min-width: 0;
}

.cc-trigger .cc-display {
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cc-trigger .cc-display.is-selected {
    color: var(--text);
}

.cc-trigger .cc-display .cc-flag {
    font-size: 1.05rem;
    line-height: 1;
}

.cc-trigger .cc-arrow {
    color: rgba(192, 132, 252, 0.7);
    font-size: 0.7rem;
    transition: transform 0.2s var(--ease);
}

.cc-trigger[aria-expanded="true"] .cc-arrow {
    transform: rotate(180deg);
}

.field-wrap--phone .phone-divider {
    width: 1px;
    background: var(--border);
    margin: 10px 0;
    flex: 0 0 auto;
}

.field-wrap--phone input[type="tel"] {
    flex: 1 1 auto;
    padding-left: 14px;
    min-width: 0;
}

/* Floating panel */
.cc-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 30;
    width: 320px;
    max-width: calc(100vw - 32px);
    background: #120a22;
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(168, 85, 247, 0.18);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* The [hidden] attribute can't beat an explicit display value, so override
   it for the elements that set display themselves. Without this, the panel
   never closes and the search filter can't visually hide rows. */
.cc-panel[hidden],
.cc-item[hidden],
.cc-empty[hidden] { display: none !important; }

.cc-search-wrap {
    position: relative;
    border-bottom: 1px solid var(--border);
    padding: 10px 12px;
}

.cc-search-wrap > i {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 0.8rem;
    pointer-events: none;
}

.cc-search {
    width: 100%;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    padding: 8px 10px 8px 32px;
    outline: none;
    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.cc-search:focus {
    border-color: var(--purple-2);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.15);
}

.cc-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 260px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.4) transparent;
}

.cc-list::-webkit-scrollbar { width: 8px; }
.cc-list::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.35); border-radius: 4px; }
.cc-list::-webkit-scrollbar-track { background: transparent; }

.cc-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--text);
    font-size: 0.88rem;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.cc-item:hover {
    background: rgba(168, 85, 247, 0.12);
}

.cc-item .cc-flag {
    font-size: 1.05rem;
    line-height: 1;
}

.cc-item .cc-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cc-item .cc-code {
    color: rgba(192, 132, 252, 0.8);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
}

.cc-empty {
    padding: 16px;
    text-align: center;
    color: var(--text-dim);
    font-size: 0.85rem;
    margin: 0;
}

.field-wrap input,
.field-wrap textarea {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 14px 16px 14px 44px;
    color: var(--text);
    font-size: 0.95rem;
    resize: vertical;
}

.field-wrap textarea {
    min-height: 120px;
    padding-top: 16px;
    line-height: 1.55;
}

.field-wrap input::placeholder,
.field-wrap textarea::placeholder {
    color: var(--text-dim);
}

.field-wrap:hover {
    border-color: rgba(168, 85, 247, 0.35);
    background: rgba(0, 0, 0, 0.55);
}

.field-wrap:focus-within {
    border-color: var(--purple-2);
    background: rgba(0, 0, 0, 0.55);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.15);
}

.field-wrap:focus-within > i {
    color: var(--purple-2);
}

.field.has-error .field-wrap {
    border-color: #ff4d6d;
    box-shadow: 0 0 0 4px rgba(255, 77, 109, 0.1);
}

.field-error {
    display: block;
    font-size: 0.8rem;
    color: #ff6b86;
    margin-top: 6px;
    min-height: 18px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}

.field.has-error .field-error {
    opacity: 1;
    transform: translateY(0);
}

.btn-block {
    margin-top: 8px;
    padding: 16px;
}

.form-feedback {
    margin-top: 16px;
    padding: 0;
    font-size: 0.92rem;
    text-align: center;
    min-height: 24px;
    transition: opacity 0.3s var(--ease);
}

.form-feedback.success {
    color: #6ee7a3;
}

.form-feedback.error {
    color: #ff6b86;
}

/* Loading state on submit */
.btn.loading {
    pointer-events: none;
    opacity: 0.85;
}

.btn.loading .btn-label::after {
    content: "...";
    animation: dots 1.2s steps(4, end) infinite;
}

@keyframes dots {
    0%, 100% { content: ""; }
    25% { content: "."; }
    50% { content: ".."; }
    75% { content: "..."; }
}

/* ---------- Footer ---------- */
.footer {
    position: relative;
    z-index: 2;
    padding: 40px 0;
    border-top: 1px solid var(--border);
    background: rgba(10, 10, 10, 0.6);
}

.footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-copy {
    color: var(--text-dim);
    font-size: 0.85rem;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .cert-card { flex: 0 0 calc((100% - 24px) / 2); }
    .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 768px) {
    .section { padding: 90px 0; }

    .nav-links,
    .nav-cta { display: none; }
    .nav-toggle { display: flex; }

    .nav-links.open {
        display: flex;
        position: absolute;
        top: var(--nav-h);
        left: 16px;
        right: 16px;
        flex-direction: column;
        gap: 4px;
        padding: 16px;
        background: rgba(15, 15, 22, 0.95);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
    }

    .nav-links.open a {
        padding: 12px 14px;
        text-align: left;
    }

    .hero-stats { gap: 16px; padding-top: 32px; }
    .stat-num { font-size: 1.6rem; }

    .cert-card { flex: 0 0 85%; }
    .cert-card-inner { height: 300px; padding: 24px; }
    .cert-name { font-size: 1.15rem; }

    .brand-img { height: 32px; }
    .brand-img--footer { height: 28px; }

    .slider-arrow { display: none; }

    .contact-card { padding: 28px; }
    .form-title { font-size: 1.25rem; }

    .footer-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
    .hero-actions .btn { width: 100%; }
    .hero-stats { grid-template-columns: 1fr; }
    .section-title .divider { display: block; opacity: 0; height: 0; margin: 0; }
}

/* ---------- Services timeline ----------
   Vertical center line, 80px circular icon-nodes sitting on the line
   with a dashed ring orbiting around them, content cards alternating
   left/right with thin connectors back to the node. */
.timeline {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}

.timeline-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(126, 34, 206, 0.7) 6%,
        rgba(168, 85, 247, 0.85) 30%,
        rgba(192, 132, 252, 0.85) 70%,
        rgba(126, 34, 206, 0.7) 94%,
        transparent 100%
    );
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.45);
    overflow: hidden;
    pointer-events: none;
}

.timeline-line::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -3px;
    right: -3px;
    height: 30%;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(127, 240, 220, 0.95),
        transparent
    );
    filter: blur(2px);
    animation: timelineShimmer 6s linear infinite;
}

@keyframes timelineShimmer {
    0%   { top: -30%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 130%; opacity: 0; }
}

.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 96px 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    margin-bottom: 64px;
    min-height: 120px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

/* Icon-node — the circular icon on the center line */
.timeline-node {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--cyan);
    background: radial-gradient(circle at 50% 45%, var(--black-2) 0%, var(--black) 75%);
    display: grid;
    place-items: center;
    z-index: 2;
    box-shadow:
        0 0 28px rgba(192, 132, 252, 0.45),
        inset 0 0 18px rgba(168, 85, 247, 0.4);
    transition: transform 0.5s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.timeline-node i {
    font-size: 1.7rem;
    background: linear-gradient(135deg, var(--cyan-2) 0%, var(--purple-2) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: filter 0.4s var(--ease);
}

/* Dashed orbiting ring */
.timeline-node::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px dashed rgba(168, 85, 247, 0.55);
    animation: orbitRing 18s linear infinite;
    pointer-events: none;
}

/* Soft halo behind the node */
.timeline-node::after {
    content: "";
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 132, 252, 0.18) 0%, transparent 60%);
    pointer-events: none;
    z-index: -1;
}

@keyframes orbitRing {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Content card */
.timeline-content {
    position: relative;
    padding: 22px 26px;
    border-radius: var(--radius-md);
    background:
        linear-gradient(160deg, rgba(126, 34, 206, 0.16) 0%, rgba(15, 15, 22, 0.88) 70%),
        rgba(15, 15, 22, 0.65);
    border: 1px solid var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.timeline-item--left  .timeline-content { grid-column: 1; grid-row: 1; align-self: center; margin-right: 32px; text-align: right; }
.timeline-item--right .timeline-content { grid-column: 3; grid-row: 1; align-self: center; margin-left: 32px;  text-align: left;  }

/* Connector from card to icon */
.timeline-content::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 32px;
    height: 1px;
    transform: translateY(-50%);
    transition: background 0.4s var(--ease), height 0.4s var(--ease);
}
.timeline-item--left  .timeline-content::after { right: -32px; background: linear-gradient(90deg, rgba(192, 132, 252, 0.75), transparent); }
.timeline-item--right .timeline-content::after { left:  -32px; background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.75)); }

/* Hover effects */
.timeline-item:hover .timeline-node {
    transform: scale(1.08) rotate(8deg);
    border-color: var(--purple-2);
    box-shadow:
        0 0 38px rgba(168, 85, 247, 0.55),
        inset 0 0 22px rgba(168, 85, 247, 0.5);
}

.timeline-item:hover .timeline-content {
    transform: translateY(-2px);
    border-color: var(--border-strong);
    box-shadow: 0 12px 36px rgba(168, 85, 247, 0.3);
}

.timeline-item:hover .timeline-content::after {
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), var(--purple-2));
    box-shadow: 0 0 12px rgba(192, 132, 252, 0.55);
}
.timeline-item--left:hover  .timeline-content::after { background: linear-gradient(90deg, var(--purple-2), var(--cyan)); }

/* Card text */
.timeline-number {
    display: block;
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    color: var(--cyan);
    margin-bottom: 8px;
    text-transform: uppercase;
}

.timeline-title {
    font-family: "Orbitron", "Space Grotesk", sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
    line-height: 1.25;
}

.timeline-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.55;
}

/* Reveal — fade up + small translate, staggered via animation-delay */
.timeline-item.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.timeline-item.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}
.timeline-item.reveal:nth-child(2) { transition-delay: 0.1s; }
.timeline-item.reveal:nth-child(3) { transition-delay: 0.2s; }
.timeline-item.reveal:nth-child(4) { transition-delay: 0.05s; }
.timeline-item.reveal:nth-child(5) { transition-delay: 0.15s; }

/* Responsive — collapse to single column with line on the left */
@media (max-width: 820px) {
    .timeline { padding-left: 0; }
    .timeline-line { left: 40px; transform: none; }

    .timeline-item {
        grid-template-columns: 80px 1fr;
        margin-bottom: 44px;
    }
    .timeline-node { grid-column: 1; justify-self: start; width: 64px; height: 64px; }
    .timeline-node i { font-size: 1.35rem; }

    .timeline-item--left  .timeline-content,
    .timeline-item--right .timeline-content {
        grid-column: 2;
        margin: 0 0 0 26px;
        text-align: left;
    }
    .timeline-item--left  .timeline-content::after,
    .timeline-item--right .timeline-content::after {
        left: -26px; right: auto;
        background: linear-gradient(90deg, rgba(192, 132, 252, 0.75), transparent);
    }
    .timeline-item--left:hover  .timeline-content::after,
    .timeline-item--right:hover .timeline-content::after {
        background: linear-gradient(90deg, var(--cyan), var(--purple-2));
    }
}

/* Section-tag mono variant for the Capabilities label */
.section-tag--mono {
    font-family: "JetBrains Mono", "Courier New", monospace;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--cyan);
}

/* ---------- Custom cursor (pointer-fine devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
    body { cursor: none; }
    a, button, input, textarea, label,
    .cert-card, .timeline-item, .logo-tile, .cert-ledger__row,
    .nav-toggle, .slider-arrow, .social { cursor: none; }
    /* Keep native text caret visibility for typing */
    input, textarea { caret-color: var(--purple-2); }

    .cursor {
        position: fixed;
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        will-change: transform, left, top;
        opacity: 0;
        transition: opacity 0.25s var(--ease);
    }

    .cursor.is-active { opacity: 1; }

    .cursor--dot {
        width: 6px;
        height: 6px;
        background: var(--cyan);
        border-radius: 50%;
        box-shadow: 0 0 12px rgba(192, 132, 252, 0.8);
        transition: width 0.2s var(--ease), height 0.2s var(--ease),
                    background 0.2s var(--ease), transform 0.2s var(--ease);
    }

    .cursor--ring {
        width: 38px;
        height: 38px;
        border: 1.5px solid rgba(168, 85, 247, 0.7);
        border-radius: 50%;
        background: rgba(168, 85, 247, 0.05);
        backdrop-filter: blur(2px);
        transition: width 0.25s var(--ease), height 0.25s var(--ease),
                    border-color 0.25s var(--ease), background 0.25s var(--ease),
                    border-width 0.25s var(--ease);
    }

    /* Hover state — over interactive elements */
    .cursor--ring.is-hover {
        width: 64px;
        height: 64px;
        border-color: var(--cyan);
        background: rgba(192, 132, 252, 0.08);
        border-width: 2px;
    }

    .cursor--dot.is-hover {
        width: 4px;
        height: 4px;
        background: var(--cyan-2);
    }

    /* Pressed state */
    .cursor--ring.is-down {
        width: 28px;
        height: 28px;
        border-color: var(--cyan);
    }

    /* Hide cursor over text inputs so native caret takes precedence */
    body.cursor-text-mode .cursor { opacity: 0; }
    body.cursor-text-mode,
    body.cursor-text-mode input,
    body.cursor-text-mode textarea { cursor: text; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   NEW SECTIONS — about · testimonials · faq · proud members
   Cert badge marks (replace generic FontAwesome glyphs)
   ============================================================ */

/* ---------- Cert badges ----------
   Stylized inline-SVG badge per certification. Each cert keeps its own
   issuer-color via a CSS variable applied at the card level. */
.cert-card { --issuer: var(--purple); --issuer-rgb: 168, 85, 247; }
.cert-card.issuer-offsec  { --issuer: #59BA47; --issuer-rgb: 89, 186, 71; }   /* Offensive Security green */
.cert-card.issuer-isc2    { --issuer: #009FDA; --issuer-rgb: 0, 159, 218; }   /* ISC² blue */
.cert-card.issuer-eccouncil { --issuer: #C8102E; --issuer-rgb: 200, 16, 46; } /* EC-Council red */
.cert-card.issuer-comptia { --issuer: #C8202F; --issuer-rgb: 200, 32, 47; }   /* CompTIA red */
.cert-card.issuer-aws     { --issuer: #FF9900; --issuer-rgb: 255, 153, 0; }   /* AWS orange */
.cert-card.issuer-giac    { --issuer: #003B71; --issuer-rgb: 0, 59, 113; }    /* GIAC navy */

.cert-mark {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    display: block;
    color: var(--issuer);
    filter: drop-shadow(0 0 14px rgba(var(--issuer-rgb), 0.45));
    transition: transform 0.4s var(--ease), filter 0.4s var(--ease);
}

.cert-card:hover .cert-mark {
    transform: rotate(-6deg) scale(1.06);
    filter: drop-shadow(0 0 22px rgba(var(--issuer-rgb), 0.7));
}

/* Override cert-seal so issuer color drives the chrome */
.cert-card .cert-seal {
    background: linear-gradient(135deg, rgba(var(--issuer-rgb), 0.85), rgba(var(--issuer-rgb), 0.55));
    box-shadow: 0 0 24px rgba(var(--issuer-rgb), 0.45);
    width: 64px;
    height: 64px;
    border-radius: 16px;
    padding: 6px;
}

.cert-card .cert-tag {
    background: rgba(var(--issuer-rgb), 0.14);
    border-color: rgba(var(--issuer-rgb), 0.45);
    color: rgba(var(--issuer-rgb), 1);
    filter: brightness(1.4) saturate(1.1);
}

.cert-card:hover .cert-card-inner {
    border-color: rgba(var(--issuer-rgb), 0.5);
    box-shadow: var(--shadow-md), 0 0 40px rgba(var(--issuer-rgb), 0.25);
}

/* ---------- Marquee tile inline SVG sizing ---------- */
/* ---------- About section ---------- */
.about-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 64px;
    align-items: start;
}

.about-narrative .section-tag,
.about-narrative .section-title {
    text-align: left;
}

.about-narrative .section-title {
    margin-bottom: 22px;
}

.about-lede {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 18px;
}

.about-lede strong {
    color: var(--text);
    font-weight: 600;
}

.about-signature {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--purple-soft);
    border: 1px solid var(--border-strong);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    color: var(--cyan-2);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.about-signature i { color: var(--purple-2); }

.values-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.value-card {
    position: relative;
    padding: 24px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.value-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, transparent, rgba(168, 85, 247, 0.4), transparent);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.value-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: 0 14px 40px rgba(168, 85, 247, 0.25);
}

.value-card:hover::before { opacity: 1; }

.value-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(192, 132, 252, 0.12));
    border: 1px solid var(--border-strong);
    color: var(--cyan-2);
    font-size: 1.1rem;
    margin-bottom: 14px;
}

.value-name {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.value-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

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

.testimonial-card {
    position: relative;
    padding: 28px;
    background: var(--gradient-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.testimonial-card::after {
    content: "\201C";
    position: absolute;
    top: -22px;
    right: 18px;
    font-family: "Space Grotesk", serif;
    font-size: 7rem;
    line-height: 1;
    color: rgba(168, 85, 247, 0.18);
    pointer-events: none;
}

.testimonial-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md), 0 0 40px rgba(168, 85, 247, 0.2);
}

.testimonial-rating {
    display: inline-flex;
    gap: 4px;
    color: #FFD15A;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

.testimonial-quote {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.65;
    font-weight: 400;
    flex: 1;
}

.testimonial-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.testimonial-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: grid;
    place-items: center;
    color: #fff;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(168, 85, 247, 0.45);
}

.testimonial-name {
    display: block;
    font-weight: 600;
    color: var(--text);
    font-size: 0.92rem;
}

.testimonial-role {
    display: block;
    color: var(--text-dim);
    font-size: 0.78rem;
    margin-top: 2px;
}

.testimonial-source {
    margin-left: auto;
    color: var(--text-dim);
    font-size: 0.85rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.testimonial-source.upwork { color: #14A800; }

/* ---------- Proud Members section ----------
   Standalone, prominent treatment for industry-body affiliations.
   Each card is a tall pillar with a brand-gradient outline mark,
   acronym, and full organization name. */
.members-section {
    position: relative;
}

.members-section .container { position: relative; z-index: 1; }

.members-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    max-width: 920px;
    margin: 0 auto;
}

.member-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 14px 14px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(160deg, rgba(168, 85, 247, 0.14) 0%, rgba(15, 10, 26, 0.65) 60%, rgba(10, 6, 18, 0.92) 100%);
    border: 1px solid var(--border);
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

/* Animated brand-gradient border on hover */
.member-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1.5px;
    background: linear-gradient(135deg, #A855F7, #C084FC);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.4s var(--ease);
    pointer-events: none;
}

.member-card::after {
    content: "";
    position: absolute;
    top: -40%;
    left: 50%;
    transform: translateX(-50%);
    width: 140%;
    height: 80%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.18), transparent 60%);
    pointer-events: none;
    opacity: 0.6;
}

.member-card:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.28),
                0 0 40px rgba(192, 132, 252, 0.15);
}

.member-card:hover::before { opacity: 1; }

.member-mark {
    position: relative;
    width: 84px;
    height: 84px;
    margin-bottom: 6px;
    filter: drop-shadow(0 0 18px rgba(168, 85, 247, 0.45));
    transition: transform 0.5s var(--ease), filter 0.5s var(--ease);
}

.member-mark svg {
    width: 100%;
    height: 100%;
}

.member-card:hover .member-mark {
    transform: rotate(-6deg) scale(1.08);
    filter: drop-shadow(0 0 26px rgba(192, 132, 252, 0.65));
}

.member-acronym {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: 0.01em;
    line-height: 1.1;
}

.member-name {
    display: none;
}

/* ---------- FAQ accordion ---------- */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: rgba(15, 10, 26, 0.65);
    overflow: hidden;
    transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}

.faq-item.is-open {
    border-color: var(--border-strong);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(192, 132, 252, 0.04)),
                rgba(15, 10, 26, 0.85);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 24px;
    text-align: left;
    color: var(--text);
    font-family: "Space Grotesk", sans-serif;
    font-size: 1rem;
    font-weight: 600;
    background: transparent;
    border: none;
    transition: color 0.25s var(--ease);
}

.faq-question:hover { color: var(--cyan-2); }

.faq-toggle {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--purple-2);
    font-size: 0.8rem;
    transition: transform 0.35s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}

.faq-item.is-open .faq-toggle {
    transform: rotate(45deg);
    background: var(--gradient-primary);
    color: #fff;
    border-color: transparent;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s var(--ease);
}

.faq-answer-inner {
    padding: 0 24px 22px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.65;
}

/* ---------- Hero responsive collapse ---------- */
@media (max-width: 960px) {
    .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .hero-content { max-width: 720px; margin: 0 auto; }
    .hero-tagline { margin-left: auto; margin-right: auto; }
    .hero-actions { justify-content: center; }
    .hero-visual { justify-self: center; max-width: 640px; text-align: left; }
    .terminal__body { font-size: 0.82rem; }
    .status-row { letter-spacing: 0.14em; }
}

@media (max-width: 1024px) {
    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
    .members-grid { gap: 12px; }
}

@media (max-width: 768px) {
    .values-grid { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .members-grid { gap: 10px; }
    .member-card { padding: 10px 10px; }
    .faq-question { font-size: 0.95rem; padding: 18px 20px; }
}

@media (max-width: 520px) {
    .members-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   NAV — three-column centered layout
   Logo left · nav links centered with generous gap · CTA + theme right
   Dropdowns: glass-morphism panels with gradient border, fade-in
   ============================================================ */
.nav-inner {
    height: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 24px;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(20px, 2.4vw, 40px);
}

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

.nav-item { position: relative; }

.nav-trigger {
    padding: 10px 0;
    color: var(--text-muted);
    font-size: 0.93rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    transition: color 0.2s var(--ease);
}

.nav-trigger i {
    font-size: 0.65rem;
    opacity: 0.7;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}

.nav-trigger::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 0;
    height: 2px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
    transition: width 0.3s var(--ease);
    border-radius: 2px;
}

.nav-item--dropdown:hover .nav-trigger,
.nav-item--dropdown.is-open .nav-trigger,
.nav-trigger.is-active { color: var(--text); }
.nav-item--dropdown:hover .nav-trigger i,
.nav-item--dropdown.is-open .nav-trigger i { opacity: 1; transform: rotate(180deg); }
.nav-trigger.is-active::after { width: 24px; }

.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    min-width: 340px;
    padding: 12px;
    background: rgba(15, 10, 26, 0.95);
    backdrop-filter: blur(22px) saturate(180%);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(168, 85, 247, 0.20);
    border-radius: var(--radius-md);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(8px);
    transition: opacity 0.18s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.18s;
    z-index: 110;
}

.nav-dropdown::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.55), rgba(192, 132, 252, 0.35));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    opacity: 0.7;
}

.nav-item--dropdown:hover .nav-dropdown,
.nav-item--dropdown.is-open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0s;
}

.dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.dropdown-item:hover { background: rgba(168, 85, 247, 0.12); transform: translateX(2px); }

.dropdown-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.dropdown-desc {
    font-size: 0.78rem;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ---------- Theme toggle button ---------- */

/* ============================================================
   SERVICE PAGE shell — used by services/*.html
   ============================================================ */
/* Service pages mirror the home hero's spacing/alignment so the layout
   matches across pages: full nav clearance + 60px top breathing room
   (same as `.hero`), grid identical to `.hero-grid`. */
.service-page {
    padding-top: calc(var(--nav-h) + 60px);
    padding-bottom: 80px;
    position: relative;
    z-index: 2;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin: 0 0 28px;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    color: var(--text-dim);
}
.breadcrumb a { color: var(--text-muted); text-decoration: none; transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--cyan-2); }
.breadcrumb i { font-size: 0.6rem; opacity: 0.55; }
.breadcrumb .current { color: var(--text); }

.service-hero {
    padding: 0 0 80px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
    align-items: start;
    margin-bottom: 80px;
}
.service-hero-content { max-width: 720px; }

.service-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--purple-soft);
    border: 1px solid var(--border-strong);
    color: var(--cyan-2);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.74rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.service-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(2rem, 3.4vw, 2.8rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 22px;
}

.service-lede {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 32px;
}

.service-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Right-side sticky info card */
.info-card {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    padding: 28px;
    border-radius: var(--radius-lg);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}
.info-card-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--text);
}
.info-block + .info-block {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}
.info-label {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.72rem;
    color: var(--cyan-2);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 10px;
    display: block;
}
.info-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.info-list li {
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.22);
    color: var(--text);
}
.info-text { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

/* Sub-services grid */
.subservices-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.subservice-card {
    padding: 26px;
    border-radius: var(--radius-md);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.subservice-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 14px 36px rgba(168, 85, 247, 0.20);
}
.subservice-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(192, 132, 252, 0.10));
    border: 1px solid var(--border-strong);
    display: grid;
    place-items: center;
    color: var(--cyan-2);
    font-size: 1.1rem;
    margin-bottom: 14px;
}
.subservice-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}
.subservice-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 14px;
}
.subservice-divider { height: 1px; background: var(--border); margin: 14px 0; }
.subservice-features { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.subservice-features li {
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
}
.subservice-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: linear-gradient(135deg, #A855F7, #C084FC);
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.5);
}

/* Numbered why-zencryptix list */
.why-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.why-list > li {
    padding: 26px;
    border-radius: var(--radius-md);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    position: relative;
}
.why-num {
    font-family: "JetBrains Mono", monospace;
    font-size: 0.82rem;
    color: var(--cyan-2);
    letter-spacing: 0.18em;
    margin-bottom: 12px;
    display: block;
}
.why-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text);
}
.why-desc { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

/* Cert pills (text-based, brand-tinted) */
.certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 14px;
}
.cert-pill {
    padding: 18px 14px;
    border-radius: var(--radius-md);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    text-align: center;
    transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.cert-pill:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    box-shadow: 0 10px 24px rgba(168, 85, 247, 0.20);
}
.cert-pill-acronym {
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 4px;
    letter-spacing: 0.01em;
}
.cert-pill-issuer { color: var(--text-dim); font-size: 0.72rem; line-height: 1.3; }

/* ---------- Image-based cert badges (offensive page) ----------
   Renders an <img> from assets/certs/{slug}.png. If the file is missing,
   onerror adds .img-missing on the parent which swaps to the inline
   geometric SVG fallback. Drop your real Credly / issuer badge PNGs
   into v2.2.0/assets/certs/ to populate. */
.certs-grid--badges {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 18px;
}
.cert-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 22px 16px 18px;
    border-radius: var(--radius-md);
    background: var(--gradient-card);
    border: 1px solid var(--border);
    text-decoration: none;
    color: inherit;
    transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cert-badge:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
    box-shadow: 0 14px 30px rgba(168, 85, 247, 0.22);
}
.cert-badge-img {
    width: 96px;
    height: 96px;
    display: grid;
    place-items: center;
    position: relative;
}
.cert-badge-img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 14px rgba(168, 85, 247, 0.30));
    transition: transform 0.35s var(--ease);
}
.cert-badge:hover .cert-badge-img img { transform: scale(1.06); }
.cert-badge-fallback {
    width: 100%;
    height: 100%;
    display: none;
}
.cert-badge-img.img-missing img { display: none; }
.cert-badge-img.img-missing .cert-badge-fallback { display: block; }
.cert-badge-meta { text-align: center; }
.cert-badge-acronym {
    display: block;
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    background: var(--gradient-text);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    margin-bottom: 2px;
}
.cert-badge-issuer {
    display: block;
    color: var(--text-dim);
    font-size: 0.72rem;
    line-height: 1.3;
}

/* CTA banner */
.cta-banner {
    margin-top: 40px;
    padding: 56px 40px;
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, rgba(168, 85, 247, 0.22), rgba(192, 132, 252, 0.16)),
        rgba(15, 10, 26, 0.5);
    border: 1px solid var(--border-strong);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 0%, rgba(168, 85, 247, 0.30), transparent 70%);
    pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
.cta-title {
    font-family: "Space Grotesk", sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.15;
    color: var(--text);
}
.cta-sub {
    color: var(--text-muted);
    font-size: 1rem;
    margin-bottom: 28px;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* Service-page section wrapper */
.service-section {
    padding: 80px 0;
    position: relative;
    z-index: 2;
}
.service-section .section-head {
    text-align: left;
    margin: 0 0 36px 0;
    max-width: 1100px;
}
.service-section .section-head .section-tag,
.service-section .section-head .section-title {
    text-align: left;
}
.service-section .section-head .section-title { margin-bottom: 14px; }

/* Service-page responsive */
@media (max-width: 1024px) {
    .service-hero { grid-template-columns: 1fr; gap: 32px; min-height: auto; }
    .info-card { position: static; }
    .subservices-grid { grid-template-columns: repeat(2, 1fr); }
    .why-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .subservices-grid { grid-template-columns: 1fr; }
    .why-list { grid-template-columns: 1fr; }
    .cta-banner { padding: 40px 22px; }
}

/* ============================================================
   MOBILE NAV — slide-in drawer with accordion dropdowns
   ============================================================ */
@media (max-width: 1024px) {
    .nav-inner { grid-template-columns: auto auto; gap: 12px; }
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-toggle { display: flex; }
    .nav-actions { gap: 8px; }

    .nav-links.open {
        display: flex;
        position: absolute;
        top: var(--nav-h);
        left: 12px;
        right: 12px;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 16px;
        background: rgba(15, 10, 26, 0.97);
        backdrop-filter: blur(20px);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-md);
        max-height: calc(100vh - var(--nav-h) - 32px);
        overflow-y: auto;
    }

    .nav-links.open > a,
    .nav-links.open > .nav-item .nav-trigger {
        padding: 14px 16px;
        text-align: left;
        width: 100%;
        justify-content: space-between;
        border-radius: var(--radius-sm);
    }
    .nav-links.open > .nav-item { width: 100%; }

    /* Mobile dropdowns become accordions */
    .nav-links.open .nav-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        border: none;
        backdrop-filter: none;
        box-shadow: none;
        min-width: 0;
        padding: 4px 0 12px 12px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s var(--ease);
    }
    .nav-links.open .nav-dropdown::before { display: none; }
    .nav-links.open .nav-item--dropdown.is-open .nav-dropdown {
        max-height: 600px;
    }
}


@media (max-width: 480px) {
    .hero-stats { gap: 20px; }
}

/* ============================================================
   v2.2.0 ADDITIONS — cert marquee, testimonial slider, members
   logos, scrollbar styling. Appended at the bottom so theme
   tokens above are already defined.
   ============================================================ */

/* ---------- Custom scrollbar (page + nested scrollers) ----------
   Track sits flat with the brand surface; thumb uses the primary
   gradient and brightens on hover. Firefox uses thin native styling. */
html {
    scrollbar-width: thin;
    scrollbar-color: rgba(168, 85, 247, 0.65) rgba(15, 10, 26, 0.4);
}

::-webkit-scrollbar {
    width: 11px;
    height: 11px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 10, 26, 0.6);
    border-left: 1px solid var(--border);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A855F7 0%, #C084FC 100%);
    border-radius: 8px;
    border: 2px solid rgba(15, 10, 26, 0.85);
    background-clip: padding-box;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #C084FC 0%, #E9D5FF 100%);
    background-clip: padding-box;
}

::-webkit-scrollbar-corner { background: transparent; }

/* ---------- Cert ledger (offensive page) ----------
   Two-column grid of indexed pill rows. Each row pairs the real credential
   badge (in a soft brand-gradient mount) with full title + issuer + an
   indexed mono side-tag. Hover slides a brand-gradient hairline up the left
   edge and lifts the row — restrained, enterprise, no motion at rest. */
.cert-ledger {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.cert-ledger__row {
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 18px;
    padding: 20px 24px 20px 28px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.05) 0%, rgba(15, 10, 26, 0.5) 100%);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.4s var(--ease), border-color 0.4s var(--ease),
                box-shadow 0.4s var(--ease), background 0.4s var(--ease);
}

/* Vertical brand-gradient hairline anchored to the left edge, scales in
   from the bottom on hover. */
.cert-ledger__row::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 2px;
    background: var(--gradient-primary);
    transform: scaleY(0.18);
    transform-origin: bottom center;
    transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
    opacity: 0.55;
}

.cert-ledger__row:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.42);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.10) 0%, rgba(15, 10, 26, 0.7) 100%);
    box-shadow: 0 14px 38px rgba(168, 85, 247, 0.22),
                0 0 24px rgba(192, 132, 252, 0.10) inset;
}

.cert-ledger__row:hover::before {
    transform: scaleY(1);
    opacity: 1;
}

.cert-ledger__index {
    font-family: "JetBrains Mono", "Space Mono", monospace;
    font-size: 0.7rem;
    color: rgba(168, 85, 247, 0.55);
    letter-spacing: 0.16em;
    align-self: flex-start;
    padding-top: 4px;
}

.cert-ledger__badge {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 28%, rgba(168, 85, 247, 0.22) 0%, rgba(15, 10, 26, 0.65) 70%);
    border: 1px solid rgba(168, 85, 247, 0.22);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    transition: border-color 0.4s var(--ease), transform 0.4s var(--ease);
}

.cert-ledger__row:hover .cert-ledger__badge {
    border-color: rgba(192, 132, 252, 0.45);
    transform: scale(1.04);
}

.cert-ledger__badge img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.cert-ledger__body {
    min-width: 0;
}

.cert-ledger__name {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text);
    margin: 0 0 4px;
    letter-spacing: 0.005em;
}

.cert-ledger__title {
    font-size: 0.86rem;
    color: var(--text-muted);
    margin: 0 0 6px;
    line-height: 1.45;
}

.cert-ledger__issuer {
    display: inline-block;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(192, 132, 252, 0.75);
    padding: 3px 9px;
    border: 1px solid rgba(192, 132, 252, 0.28);
    border-radius: 100px;
    background: rgba(192, 132, 252, 0.05);
}

@media (max-width: 900px) {
    .cert-ledger { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .cert-ledger__row {
        grid-template-columns: auto 1fr;
        padding: 16px 18px;
        gap: 14px;
    }
    .cert-ledger__index { display: none; }
    .cert-ledger__badge { width: 64px; height: 64px; }
    .cert-ledger__badge img { width: 48px; height: 48px; }
}

.certs-group + .certs-group {
    margin-top: 56px;
}

.certs-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 40px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border);
}

.certs-group + .certs-group .certs-group-head {
    margin-top: 0;
}

.certs-group-eyebrow {
    font-family: "JetBrains Mono", "Space Mono", monospace;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text);
    font-weight: 600;
}

.certs-group-count {
    font-family: "JetBrains Mono", "Space Mono", monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(192, 132, 252, 0.75);
    padding: 4px 10px;
    border: 1px solid rgba(192, 132, 252, 0.28);
    border-radius: 100px;
    background: rgba(192, 132, 252, 0.05);
}

.certs-group .cert-ledger {
    margin-top: 22px;
}

/* ---------- Testimonial slider ----------
   Drag-scroll track with side arrows + dot pagination. Cards are wider
   and stretch by viewport count. Replaces previous static grid. */
#testimonials .testimonials-grid { display: none; } /* legacy, in case markup remnants exist */

.testimonial-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 16px 4px 24px;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-track:active { cursor: grabbing; }

.testimonial-track .testimonial-card {
    flex: 0 0 calc((100% - 44px) / 3);
    scroll-snap-align: start;
    margin: 0;
    align-self: stretch;
    min-height: 340px;
}

.testimonial-track .testimonial-quote {
    flex: 1 1 auto;
}

@media (max-width: 1024px) {
    .testimonial-track .testimonial-card { flex: 0 0 calc((100% - 22px) / 2); }
}

@media (max-width: 720px) {
    .testimonial-track .testimonial-card { flex: 0 0 100%; }
}

.slider-arrow {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(15, 10, 26, 0.7);
    color: var(--text);
    display: grid;
    place-items: center;
    transition: background 0.3s var(--ease), transform 0.3s var(--ease),
                color 0.3s var(--ease), opacity 0.3s var(--ease);
    backdrop-filter: blur(8px);
}

.slider-arrow:hover:not(:disabled) {
    background: var(--gradient-primary);
    color: #fff;
    transform: scale(1.06);
}

.slider-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

@media (max-width: 720px) {
    .slider-arrow { width: 38px; height: 38px; }
}

/* Centered dot pagination beneath the testimonial track */
#testimonialDots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
}

#testimonialDots button {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.18);
    transition: all 0.3s var(--ease);
    padding: 0;
    cursor: pointer;
}

#testimonialDots button.active {
    width: 28px;
    border-radius: 4px;
    background: var(--gradient-primary);
}

/* ---------- Membership logos ----------
   Simple white plate showing each badge in its native colors. */
.member-logo {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 2;
    border-radius: 10px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.member-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Hide legacy member-mark / member-acronym usage on rest of styles */
.member-card .member-acronym { display: none; }

/* ---------- Service-page sub-services pill (replaces "// Sub-services") ---------- */
.section-tag.section-tag--pill {
    background: linear-gradient(135deg, var(--purple-soft), var(--cyan-soft));
    border: 1px solid rgba(192, 132, 252, 0.25);
    color: var(--cyan);
}

.service-section .section-tag.section-tag--pill {
    text-align: center;
}