/* ============================================================================
   DIGITT HYPE — assets/css/style.css
   Design system v3.0 — violet + gold, dark, high contrast.
   Owner: Agent A (CSS core).  Binding contract: DESIGN-SYSTEM.md
   ----------------------------------------------------------------------------
   TABLE OF CONTENTS
   01  TOKENS ................ palette, semantic, compat aliases, type, space
   02  RESET & BASE .......... document, media, overflow guard, scrollbars
   03  TYPOGRAPHY ............ headings, eyebrow, gradient text, .prose
   04  LAYOUT ................ container, section, grid-2/3/4, rail, split
   05  ACTIONS ............... buttons, text-link, pill-nav, chips
   06  CARDS ................. card, card-glass, link-card, entity-card,
                               stat, badge-metric, featured conic border
   07  DEPTH & DECOR ......... card-3d / [data-tilt], orb, glow, grid-lines,
                               noise, marquee
   08  NAV SHELL ............. skip-link, navbar, logo, mega, dropdown,
                               drawer, hamburger, breadcrumbs
   09  HERO & PAGE BANNER
   10  CONTENT SECTIONS ...... services, features, why, tech, platforms, stats,
                               process, testimonials, carousel, faq, tools,
                               case studies, portfolio, blog, timeline, cta
   11  FORMS & CALCULATORS
   12  RELATED / NEXT STEPS
   13  FOOTER & BACK TO TOP
   14  MOTION UTILITIES ...... reveals, legacy animation classes, scroll-driven
   15  ACCESSIBILITY ......... focus ring, aria states, sr-only
   16  RESPONSIVE ............ 1280 / 1100 / 900 / 768 / 560 / 400 — only these
   17  REDUCED MOTION & PRINT
   ----------------------------------------------------------------------------
   Canonical markup for the new components (for page agents D–G):

   <a class="link-card" href="…">
     <i class="fa-solid fa-code" aria-hidden="true"></i>   (optional icon plate)
     <span class="link-card-body">
       <span class="link-card-title">Web Development</span>
       <span class="link-card-teaser">One-line teaser.</span>
     </span>
   </a>                       … the arrow is drawn by CSS, don't add one.

   <a class="entity-card" href="…">
     <span class="entity-card-media"><img …></span>        (or a leading <i>)
     <span class="entity-card-body">
       <span class="eyebrow">Case study</span>
       <span class="entity-card-title">Title</span>
       <span class="entity-card-desc">Description</span>
       <span class="entity-card-meta"><span>6 min</span><span>AI</span></span>
     </span>
   </a>

   <div class="stat"><span class="stat-value" data-count="98"
        data-count-suffix="%">98%</span><span class="stat-label">…</span></div>
   ============================================================================ */


/* ============================================================================
   01  TOKENS
   ============================================================================ */

:root {
    /* --- Violet — from the wordmark gradient --- */
    --violet-50:  #F5F1FF;
    --violet-100: #E9DEFE;
    --violet-200: #D5C2FD;
    --violet-300: #B594FB;
    --violet-400: #A177F8;
    --violet-500: #8B5CF6;
    --violet-600: #7C3AED;
    --violet-700: #6D28D9;
    --violet-800: #5B21B6;
    --violet-900: #3B1080;

    /* --- Gold — from the tittles and the terminal dot --- */
    --gold-300: #FBD34D;
    --gold-400: #F7BE22;
    --gold-500: #E5A00C;
    --gold-600: #C97F05;

    /* --- Ink — violet-biased neutrals --- */
    --ink-950: #07050D;
    --ink-900: #0C0817;
    --ink-850: #120C21;
    --ink-800: #181030;
    --ink-700: #221741;
    --ink-600: #2E2054;

    /* --- Semantic surfaces --- */
    --bg:            var(--ink-950);
    --bg-alt:        var(--ink-900);
    --surface-1:     rgba(255,255,255,.035);
    --surface-2:     rgba(255,255,255,.06);
    --surface-3:     rgba(255,255,255,.09);
    --border:        rgba(255,255,255,.09);
    --border-strong: rgba(181,148,251,.30);

    /* --- Semantic text --- */
    --text-1: #F6F3FF;
    --text-2: #C9C2DE;
    --text-3: #948CAE;

    /* --- Brand roles --- */
    --primary:       var(--violet-500);
    --primary-dark:  var(--violet-700);
    --primary-light: var(--violet-300);
    --accent:        var(--gold-500);
    --accent-light:  var(--gold-400);

    /* Accent TEXT on dark backgrounds. Never --primary at body size. */
    --text-accent:      var(--violet-300);
    --text-accent-gold: var(--gold-400);

    --gradient-brand: linear-gradient(135deg, var(--violet-300) 0%, var(--violet-500) 45%, var(--violet-700) 100%);
    --gradient-gold:  linear-gradient(135deg, var(--gold-400) 0%, var(--gold-600) 100%);
    --gradient-text:  linear-gradient(120deg, #E9DEFE 0%, #B594FB 40%, #8B5CF6 100%);

    --glow-violet: 0 10px 40px rgba(139,92,246,.28);
    --glow-gold:   0 10px 40px rgba(229,160,12,.22);
    --ring: 0 0 0 3px rgba(181,148,251,.55);

    /* --- Typography (§2) --- */
    --font-display: 'Champ', 'Sora', 'Inter', system-ui, sans-serif;
    --font:         'Champ', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

    --step--1: clamp(.82rem, .78rem + .2vw, .9rem);
    --step-0:  clamp(.98rem, .94rem + .2vw, 1.06rem);
    --step-1:  clamp(1.15rem, 1.05rem + .5vw, 1.35rem);
    --step-2:  clamp(1.4rem, 1.2rem + 1vw, 1.85rem);
    --step-3:  clamp(1.75rem, 1.4rem + 1.8vw, 2.6rem);
    --step-4:  clamp(2.1rem, 1.5rem + 3vw, 3.6rem);
    --step-5:  clamp(2.6rem, 1.6rem + 5vw, 5.2rem);

    --measure-prose: 68ch;
    --measure-desc:  56ch;

    /* --- Space (§3) --- */
    --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
    --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
    --space-9: 96px;  --space-10: 128px;

    /* --- Radius (§3) --- */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 32px;
    --radius-pill: 999px;

    /* --- Motion (§3) --- */
    --ease-out:    cubic-bezier(.22,1,.36,1);
    --ease-inout:  cubic-bezier(.65,0,.35,1);
    --ease-spring: cubic-bezier(.34,1.56,.64,1);
    --dur-fast: .18s;
    --dur:      .35s;
    --dur-slow: .7s;

    /* --- Elevation --- */
    --shadow-sm: 0 2px 10px rgba(0,0,0,.35);
    --shadow-md: 0 14px 40px rgba(0,0,0,.45);
    --shadow-lg: 0 30px 80px rgba(0,0,0,.55);

    /* --- Shell --- */
    --max-width: 1200px;
    --gutter: clamp(16px, 4vw, 32px);
    --header-height: 76px;

    /* --- Breakpoint reference (§4) — documented for JS, not usable in @media --- */
    --bp-xl: 1280px;
    --bp-lg: 1100px;
    --bp-md: 900px;
    --bp-sm: 768px;
    --bp-xs: 560px;
    --bp-xxs: 400px;

    /* ------------------------------------------------------------------
       COMPATIBILITY ALIASES — legacy names still referenced by the pages.
       Re-pointed at the new palette. Do not delete.
       ------------------------------------------------------------------ */
    --primary-glow:     rgba(139,92,246,.35);
    --dark:             var(--ink-950);
    --dark-2:           var(--ink-900);
    --dark-3:           var(--ink-800);
    --dark-bg:          var(--ink-900);
    --dark-card:        var(--ink-850);
    --dark-card-hover:  var(--ink-800);
    --text-light:       var(--text-1);
    --text-body:        var(--text-2);
    --text-muted:       var(--text-3);
    --border-color:     var(--border);

    --gradient-1:    var(--gradient-brand);
    --gradient-2:    linear-gradient(135deg, #0C0817 0%, #120C21 50%, #181030 100%);
    --gradient-hero: linear-gradient(135deg, rgba(7,5,13,.92) 0%, rgba(18,12,33,.86) 50%, rgba(7,5,13,.95) 100%);
    --gradient-cta:  linear-gradient(135deg, rgba(139,92,246,.10) 0%, rgba(7,5,13,.95) 100%);

    --shadow-orange:  var(--glow-violet);   /* legacy name → violet glow */

    --radius-xs: 6px;
    --transition:      var(--dur) var(--ease-out);
    --transition-slow: var(--dur-slow) var(--ease-out);
}


/* ============================================================================
   02  RESET & BASE
   ============================================================================ */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 16px);
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;          /* fallback */
}
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

body {
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.7;
    background: var(--bg);
    color: var(--text-2);
    overflow-x: hidden;
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-synthesis-weight: none;
}

/* Ambient page wash — subtle violet bloom top-left / gold whisper bottom-right */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(60vw 50vh at 12% -8%, rgba(109,40,217,.20) 0%, transparent 70%),
        radial-gradient(50vw 40vh at 92% 8%, rgba(139,92,246,.12) 0%, transparent 70%),
        radial-gradient(46vw 40vh at 88% 96%, rgba(201,127,5,.06) 0%, transparent 72%);
}

img, svg, video, canvas, picture { max-width: 100%; display: block; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-7) 0; }
::selection { background: var(--violet-600); color: #fff; }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--ink-700) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-950); }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: var(--radius-pill); border: 2px solid var(--ink-950); }
::-webkit-scrollbar-thumb:hover { background: var(--violet-800); }

/* Legacy full-page particle canvas — kept, toned down, never blocks input */
#particleCanvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: .35;
}


/* ============================================================================
   03  TYPOGRAPHY
   ============================================================================ */

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--text-1);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    overflow-wrap: break-word;
}
h4, h5, h6 {
    font-family: var(--font);
    color: var(--text-1);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.01em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
h5 { font-size: var(--step-0); }
h6 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }

p { color: var(--text-2); }
strong, b { color: var(--text-1); font-weight: 600; }
small { font-size: var(--step--1); color: var(--text-3); }

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .92em;
}
code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    padding: .12em .42em;
    color: var(--text-accent);
}

/* --- Eyebrow (new) / section-tag (legacy) — both must work --- */
.eyebrow,
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--text-accent);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}
.eyebrow::before,
.section-tag::before {
    content: '';
    width: 28px;
    height: 1px;
    flex: none;
    background: linear-gradient(90deg, transparent, var(--violet-400));
}
.eyebrow--gold,
.section-tag--gold { color: var(--text-accent-gold); }
.eyebrow--gold::before,
.section-tag--gold::before { background: linear-gradient(90deg, transparent, var(--gold-400)); }
.eyebrow--bare::before,
.section-tag--bare::before { display: none; }

/* --- Section header --- */
.section-header {
    max-width: 760px;
    margin: 0 auto var(--space-8);
    text-align: center;
}
.section-header--left { margin-inline: 0; text-align: left; }
.section-header .eyebrow,
.section-header .section-tag { justify-content: center; }
.section-header--left .eyebrow,
.section-header--left .section-tag { justify-content: flex-start; }

.section-title {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--text-1);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}
.section-title span {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--violet-300);
}

.section-desc {
    color: var(--text-2);
    font-size: var(--step-0);
    max-width: var(--measure-desc);
    margin: 0 auto;
    text-wrap: pretty;
}
.section-header--left .section-desc { margin-inline: 0; }
.section-header .section-desc { margin-bottom: 0; }

/* --- Gradient text --- */
.gradient-text {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--violet-300);          /* fallback where background-clip fails */
    /* keep descenders from clipping */
    padding-bottom: .06em;
}
.gradient-text--gold {
    background: linear-gradient(120deg, var(--gold-300) 0%, var(--gold-500) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--gold-400);
}

/* --- Text colour helpers --- */
.text-accent { color: var(--text-accent); }
.text-accent-gold { color: var(--text-accent-gold); }
.text-muted { color: var(--text-3); }
.text-center { text-align: center; }
.text-balance { text-wrap: balance; }

/* --- .prose — article body --- */
.prose {
    max-width: var(--measure-prose);
    color: var(--text-2);
    font-size: var(--step-0);
    line-height: 1.8;
}
.prose > * + * { margin-top: 1.15em; }
.prose h2 {
    font-size: var(--step-2);
    margin-top: 1.9em;
    margin-bottom: .1em;
    scroll-margin-top: calc(var(--header-height) + 24px);
}
.prose h3 {
    font-size: var(--step-1);
    margin-top: 1.6em;
    margin-bottom: .1em;
    scroll-margin-top: calc(var(--header-height) + 24px);
}
.prose h2 + p, .prose h3 + p { margin-top: .55em; }
.prose a {
    color: var(--text-accent);
    text-decoration: underline;
    text-decoration-color: rgba(181,148,251,.45);
    text-underline-offset: .18em;
    text-decoration-thickness: 1px;
}
.prose a:hover { color: var(--violet-200); text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li {
    position: relative;
    padding-left: 1.6em;
    margin-top: .5em;
}
.prose ul li::before {
    content: '';
    position: absolute;
    left: .35em;
    top: .72em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--violet-400);
}
.prose ol { list-style: decimal; }
.prose ol li { margin-top: .5em; padding-left: .35em; }
.prose ol li::marker { color: var(--text-accent); font-variant-numeric: tabular-nums; }
.prose blockquote {
    margin: 1.8em 0;
    padding: var(--space-5) var(--space-6);
    border-left: 2px solid var(--violet-500);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: linear-gradient(90deg, rgba(139,92,246,.10), transparent 70%);
    color: var(--text-1);
    font-size: var(--step-1);
    line-height: 1.55;
    font-style: normal;
}
.prose blockquote p { color: inherit; }
.prose blockquote cite {
    display: block;
    margin-top: var(--space-3);
    font-size: var(--step--1);
    font-style: normal;
    color: var(--text-3);
}
.prose img,
.prose figure img {
    width: 100%;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    margin-block: 1.8em;
}
.prose figure figcaption {
    margin-top: -1.2em;
    font-size: var(--step--1);
    color: var(--text-3);
    text-align: center;
}
.prose pre {
    background: var(--ink-900);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    overflow-x: auto;
    max-width: 100%;
}
.prose pre code { background: none; border: 0; padding: 0; color: var(--text-2); }
.prose hr { margin: 2.4em 0; }
.prose > :first-child { margin-top: 0; }


/* ============================================================================
   04  LAYOUT
   ============================================================================ */

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide { max-width: 1400px; }
.container--narrow { max-width: 860px; }

/* --- Section rhythm (§3) --- */
.section {
    position: relative;
    padding: clamp(64px, 9vw, 128px) 0;
}
.section--tight   { padding: clamp(40px, 6vw, 80px) 0; }
.section--flush   { padding: 0; }
.section--alt     { background: var(--bg-alt); }
.section--hairline{ border-top: 1px solid var(--border); }
.section--clip    { overflow: hidden; }

/* Perf (§9): below-the-fold sections skip render work until near the viewport. */
.section:nth-of-type(n+3),
.cv-auto {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

/* --- Grids --- */
.grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: var(--space-5);
    align-items: stretch;
}
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
.grid--tight { gap: var(--space-4); }
.grid--loose { gap: var(--space-6); }

/* --- Rail — horizontal snap scroller below --bp-xs (see §16) --- */
.rail {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.rail > * { flex: 1 1 260px; min-width: 0; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: var(--radius-pill); border: 0; }

/* Always-scrollable rail variant — single row at every width, not just below --bp-xs.
   Use for a tighter "browse sideways" moment (e.g. the homepage project rail). */
.rail--scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--space-2);
}
.rail--scroll > * { flex: 0 0 min(320px, 82vw); scroll-snap-align: start; }
/* .entity-card's own height:100% suppresses flex stretch (a specified cross-size
   wins over the stretch default), so cards in ANY .rail render ragged instead of
   matching the tallest in their row. Applies to every rail, not just --scroll. */
.rail > .entity-card { height: auto; }

/* A grid/rail/chip-row is routinely followed by a centered CTA or another
   chip-row with zero margin between them — the two blocks read as glued
   together. Give every such handoff consistent breathing room, sitewide. */
.grid-2 + .text-center, .grid-3 + .text-center, .grid-4 + .text-center,
.rail + .text-center, .process-steps + .text-center, .chip-row + .text-center,
.grid-2 + .chip-row, .grid-3 + .chip-row, .grid-4 + .chip-row, .rail + .chip-row,
.chip-row + .text-center, .chip-row + .cluster {
    margin-top: var(--space-7);
}

/* --- Split — content + media, stacks at --bp-md --- */
.split {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.split--top { align-items: start; }
.split--reverse > *:first-child { order: 2; }
.split--reverse > *:last-child  { order: 1; }
.split-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-alt);
    aspect-ratio: 4 / 3;
}
.split-media img { width: 100%; height: 100%; object-fit: cover; }

/* --- Stacks & flow helpers --- */
.stack       { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--lg   { gap: var(--space-6); }
.cluster     { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.cluster--center { justify-content: center; }
.flow > * + *{ margin-top: var(--space-4); }

/* --- Anything wide scrolls inside its own container (§4) --- */
.scroll-x,
.table-scroll {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.table-scroll { border: 1px solid var(--border); border-radius: var(--radius-md); }
.table-scroll table { min-width: 560px; }
th, td { padding: var(--space-3) var(--space-4); text-align: left; font-size: var(--step--1); }
th { color: var(--text-1); font-weight: 600; background: var(--surface-1); white-space: nowrap; }
td { color: var(--text-2); border-top: 1px solid var(--border); }


/* ============================================================================
   05  ACTIONS
   ============================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 46px;
    padding: 13px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    white-space: nowrap;
    transition:
        transform var(--dur) var(--ease-spring),
        box-shadow var(--dur) var(--ease-out),
        background-color var(--dur) var(--ease-out),
        border-color var(--dur) var(--ease-out),
        color var(--dur) var(--ease-out);
}
.btn i { font-size: .85em; transition: transform var(--dur) var(--ease-out); }
.btn:hover i.fa-arrow-right,
.btn:focus-visible i.fa-arrow-right { transform: translateX(3px); }

/* Primary — violet fill, white text */
.btn-primary {
    background: var(--gradient-brand);
    color: #fff;
    box-shadow: var(--glow-violet);
}
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(135deg, var(--violet-400), var(--violet-600));
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(139,92,246,.42); }
.btn-primary:hover::before { opacity: 1; }
.btn-primary:active { transform: translateY(-1px); }

/* Secondary — hairline outline */
.btn-secondary {
    background: var(--surface-1);
    color: var(--text-1);
    border-color: var(--border);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-secondary:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: #fff;
}

/* Ghost — no chrome until hover */
.btn-ghost {
    background: transparent;
    color: var(--text-2);
    border-color: transparent;
    padding-inline: 20px;
}
.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--text-1);
    border-color: var(--border);
}

/* Outline — violet stroke */
.btn-outline {
    background: transparent;
    color: var(--text-accent);
    border-color: var(--border-strong);
}
.btn-outline:hover {
    background: var(--violet-600);
    border-color: var(--violet-600);
    color: #fff;
    transform: translateY(-3px);
    box-shadow: var(--glow-violet);
}

/* Gold — the "this is the outcome" button. Ink text on gold, never white. */
.btn-gold {
    background: var(--gradient-gold);
    color: var(--ink-950);
    box-shadow: var(--glow-gold);
    font-weight: 700;
}
.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 44px rgba(229,160,12,.34);
    filter: brightness(1.06);
}

.btn-sm { min-height: 40px; padding: 9px 20px; font-size: var(--step--1); gap: var(--space-2); }
.btn-lg { min-height: 58px; padding: 18px 40px; font-size: var(--step-0); gap: var(--space-4); }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* --- Text link — animated underline + travelling arrow --- */
.text-link,
.read-more {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    color: var(--text-accent);
    font-weight: 600;
    font-size: var(--step--1);
    padding-block: 2px;
    line-height: 1.5;
}
.text-link::after,
.read-more::after {
    content: '';
    position: absolute;
    left: 0;
    right: 1.4em;
    bottom: -1px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur) var(--ease-out);
}
.text-link:hover, .read-more:hover { color: var(--violet-200); }
.text-link:hover::after, .text-link:focus-visible::after,
.read-more:hover::after, .read-more:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.text-link i, .read-more i { font-size: .8em; transition: transform var(--dur) var(--ease-spring); }
.text-link:hover i, .read-more:hover i { transform: translateX(4px); }
.text-link--gold { color: var(--text-accent-gold); }
.text-link--gold:hover { color: var(--gold-300); }

/* Used inline inside running text, a text-link must match its host's size. */
p .text-link, li .text-link, .prose .text-link,
.hero-subtitle .text-link, .section-desc .text-link,
h1 .text-link, h2 .text-link, h3 .text-link, h4 .text-link {
    font-size: inherit;
    font-weight: 600;
    display: inline;
    vertical-align: baseline;
}
p .text-link::after, li .text-link::after, .prose .text-link::after {
    right: 0;
    bottom: -.08em;
    transform: scaleX(1);
    transform-origin: left;
    background: rgba(181,148,251,.4);
}
p .text-link:hover::after, li .text-link:hover::after, .prose .text-link:hover::after { background: currentColor; }

/* --- Pill nav / filters --- */
.pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    margin-bottom: var(--space-7);
}
.pill-nav--left { justify-content: flex-start; }
.pill-nav a,
.pill-nav button,
.filter-btn,
.case-filter-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--text-2);
    font-family: var(--font);
    font-size: var(--step--1);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.pill-nav a:hover,
.pill-nav button:hover,
.filter-btn:hover,
.case-filter-btn:hover {
    color: var(--text-1);
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-2px);
}
.pill-nav a.active,
.pill-nav button.active,
.pill-nav [aria-current="page"],
.pill-nav [aria-selected="true"],
.filter-btn.active,
.case-filter-btn.active {
    background: var(--violet-600);
    border-color: var(--violet-500);
    color: #fff;
    box-shadow: 0 6px 20px rgba(139,92,246,.30);
}

/* --- Chips --- */
.chip-row,
.tool-tags,
.case-study-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
}
.chip,
.tool-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 7px 14px;
    min-height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    color: var(--text-2);
    font-size: var(--step--1);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.chip i, .tool-tag i { font-size: .82em; color: var(--text-accent); transition: color var(--dur) var(--ease-out); }
a.chip, a.tool-tag { cursor: pointer; }
a.chip:hover, a.tool-tag:hover,
a.chip:focus-visible, a.tool-tag:focus-visible {
    color: var(--text-1);
    border-color: var(--border-strong);
    background: rgba(139,92,246,.14);
    transform: translateY(-2px);
}
a.chip:hover i, a.tool-tag:hover i { color: var(--violet-200); }
.chip--gold {
    border-color: rgba(229,160,12,.32);
    background: rgba(229,160,12,.10);
    color: var(--text-accent-gold);
}
a.chip--gold:hover { background: rgba(229,160,12,.18); color: var(--gold-300); }
.chip--solid { background: var(--violet-600); border-color: var(--violet-600); color: #fff; }
.chip--lg { padding: 10px 18px; min-height: 44px; font-size: var(--step-0); }

/* --- Gold outcome badge --- */
.badge-metric {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px 6px 12px;
    border: 1px solid rgba(229,160,12,.36);
    border-radius: var(--radius-pill);
    background: linear-gradient(120deg, rgba(229,160,12,.16), rgba(229,160,12,.05));
    color: var(--text-accent-gold);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .01em;
    line-height: 1.35;
    white-space: nowrap;
    max-width: 100%;
}
.badge-metric::before {
    content: '';
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: 0 0 0 3px rgba(247,190,34,.16);
}
.badge-metric--wrap { white-space: normal; }
.badge-metric i { font-size: .82em; }

/* Legacy badges re-pointed at the new palette */
.industry-badge,
.case-study-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 5px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: rgba(139,92,246,.12);
    color: var(--text-accent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.4;
}
.case-study-badge { margin-bottom: var(--space-4); }


/* ============================================================================
   06  CARDS
   ============================================================================ */

.card,
.card-glass,
.feature-card,
.mv-card,
.tool-card,
.contact-info-card,
.why-metrics-glass,
.testimonial-card,
.process-step,
.timeline-item,
.blog-card,
.case-study-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    padding: var(--space-6);
    min-width: 0;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring),
                box-shadow var(--dur) var(--ease-out);
}

/* Glass: gradient hairline drawn with a masked ::before, not a flat border */
.card-glass,
.why-metrics-glass,
.contact-form-card {
    background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-color: transparent;
    box-shadow: var(--shadow-md);
}
.card-glass::before,
.why-metrics-glass::before,
.contact-form-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(150deg, rgba(181,148,251,.55), rgba(255,255,255,.06) 40%, rgba(229,160,12,.28));
    -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;
}

/* Icon plate shared by cards */
.card-icon,
.link-card-icon,
.entity-card-icon,
.service-icon,
.tool-card-icon,
.next-step-icon,
.why-point > i,
.feature-card > i,
.process-step > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, rgba(139,92,246,.22), rgba(139,92,246,.06));
    border: 1px solid var(--border-strong);
    color: var(--violet-200);
    font-size: 1.05rem;
    transition: transform var(--dur) var(--ease-spring),
                background-color var(--dur) var(--ease-out),
                color var(--dur) var(--ease-out);
}
.card-icon i, .service-icon i, .tool-card-icon i { font-size: 1em; }
.service-icon { width: 56px; height: 56px; font-size: 1.25rem; margin-bottom: var(--space-5); }

.card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    font-size: var(--step--1);
    color: var(--text-3);
}
.card-meta > * { display: inline-flex; align-items: center; gap: var(--space-2); }

/* --- link-card — the standard cross-link unit ---------------------------- */
.link-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text-2);
    min-width: 0;
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring);
}
.link-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(120% 140% at 0% 0%, rgba(139,92,246,.16), transparent 60%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}
.link-card { position: relative; }
.link-card-icon { width: 42px; height: 42px; font-size: .95rem; }
.link-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.link-card-eyebrow {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-accent-gold);
}
.link-card-title {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-1);
    letter-spacing: -.01em;
}
.link-card-teaser {
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.link-card .badge-metric { margin-top: var(--space-2); align-self: flex-start; }
.link-card-arrow {
    flex: none;
    align-self: center;
    color: var(--text-3);
    font-size: .8rem;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out);
}
.link-card:hover,
.link-card:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-3px);
}
.link-card:hover::before, .link-card:focus-visible::before { opacity: 1; }
.link-card:hover .link-card-arrow,
.link-card:focus-visible .link-card-arrow { opacity: 1; transform: translateX(0); color: var(--text-accent); }
.link-card:hover .link-card-icon,
.link-card:focus-visible .link-card-icon {
    transform: rotate(-6deg) scale(1.06);
    background: linear-gradient(150deg, rgba(139,92,246,.34), rgba(139,92,246,.12));
    color: #fff;
}
.link-card:hover .link-card-title, .link-card:focus-visible .link-card-title { color: #fff; }
.link-card.is-current {
    border-color: var(--border-strong);
    background: rgba(139,92,246,.12);
}
.link-card.is-current .link-card-title { color: var(--text-accent); }

/* Tolerate the simpler authoring form — a bare <i> plus heading/eyebrow/copy as
   direct children — so a card is never laid out as one flat row. */
.link-card { flex-wrap: wrap; }
.link-card > .eyebrow,
.link-card > h3,
.link-card > h4,
.link-card > p,
.link-card > .chip-row,
.link-card > .badge-metric { flex: 1 0 100%; min-width: 0; }
.link-card > h3,
.link-card > h4 {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-1);
    letter-spacing: -.01em;
    margin: 0;
}
.link-card > p {
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text-3);
    margin: 0;
}
.link-card > .eyebrow { margin-bottom: 0; font-size: .68rem; letter-spacing: .14em; }
.link-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, rgba(139,92,246,.22), rgba(139,92,246,.06));
    border: 1px solid var(--border-strong);
    color: var(--violet-200);
    font-size: .95rem;
    transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out);
}
.link-card:hover > i { transform: rotate(-6deg) scale(1.06); color: #fff; }

/* --- entity-card — richer, image-led ------------------------------------- */
.entity-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    color: var(--text-2);
    height: 100%;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring),
                box-shadow var(--dur) var(--ease-out);
}
.entity-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.entity-card-media {
    display: block;
    position: relative;
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--ink-850);
}
.entity-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--dur-slow) var(--ease-out);
}
.entity-card-media::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7,5,13,.72));
}
.entity-card-icon { width: 52px; height: 52px; font-size: 1.15rem; }
.entity-card-body { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; flex: 1; }
.entity-card-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
    color: var(--text-1);
}
.entity-card-desc {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-2);
}
.entity-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--step--1);
    color: var(--text-3);
}
.entity-card-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    color: var(--text-accent);
    font-size: var(--step--1);
    font-weight: 600;
}
.entity-card-arrow i { transition: transform var(--dur) var(--ease-spring); }
.entity-card:hover,
.entity-card:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md), 0 0 0 1px rgba(139,92,246,.18);
}
.entity-card:hover::before, .entity-card:focus-visible::before { transform: scaleX(1); }
.entity-card:hover .entity-card-media img { transform: scale(1.06); }
.entity-card:hover .entity-card-arrow i { transform: translateX(5px); }
.entity-card:hover .entity-card-title { color: #fff; }
.entity-card:hover .entity-card-icon { transform: rotate(-6deg) scale(1.06); color: #fff; }

/* Card-hit: stretched invisible link for cards that must also carry smaller
   nested links (e.g. tool chips) and so can't be a single outer <a>. Add
   `.is-linked` to the card. The hit target sits under everything (z-index:1);
   interactive children opt in above it via `position:relative` so their own
   clicks still win. Gives the whole card a pointer cursor and one navigable
   target instead of a dead zone. */
.is-linked { cursor: pointer; }
.card-hit {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.is-linked > :not(.card-hit) {
    position: relative;
    z-index: 2;
}

/* Cards in the same row vary in copy length, so their trailing CTA link
   lands at different heights — push it to the bottom of the card instead,
   so every "Explore X" / "View the Y project" lines up across a row. */
.entity-card > .text-link,
.entity-card > p:last-child:has(> .text-link) {
    margin-top: auto;
}

/* Compact rail variant — trims a card down for a tighter, more scannable
   row (used where a card grid otherwise reads as too dense/overwhelming). */
.entity-card--compact .entity-card-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Stats --------------------------------------------------------------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--space-4);
}
.stat,
.stat-item,
.hero-stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    min-width: 0;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.stat:hover, .stat-item:hover, .hero-stat:hover { border-color: var(--border-strong); background: var(--surface-2); }
.stat-value,
.stat > strong,
.stat-item h3,
.hero-stat h3 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-label,
.stat > span,
.stat-item p,
.hero-stat p {
    font-size: var(--step--1);
    color: var(--text-3);
    line-height: 1.4;
}
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); }

/* Featured conic border — for the one card that matters most on a page */
@property --dh-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.is-featured-card { position: relative; }
.is-featured-card::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--dh-angle), var(--violet-600), var(--gold-500), var(--violet-400), var(--violet-600));
    -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;
    animation: dh-spin 6s linear infinite;
}
@keyframes dh-spin { to { --dh-angle: 360deg; } }


/* ============================================================================
   07  DEPTH & DECOR
   ============================================================================ */

/* Tilt container — motion.js sets --rx/--ry/--mx/--my and toggles .is-tilting */
.dh-tilt,
[data-tilt] {
    transform-style: preserve-3d;
    will-change: transform;
}
.dh-tilt.is-tilting {
    transform: perspective(var(--tilt-perspective, 1000px))
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
               scale(var(--tilt-scale, 1));
}
.dh-tilt > .dh-depth,
.dh-tilt [data-depth] { transform: translateZ(calc(var(--depth, 1) * 26px)); transform-style: preserve-3d; }

/* Specular sheen follows the pointer */
.dh-tilt.is-tilting::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(38% 55% at var(--mx, 50%) var(--my, 50%),
                rgba(255,255,255,.16), rgba(255,255,255,.03) 45%, transparent 72%);
    mix-blend-mode: screen;
}
.card-3d { position: relative; transform-style: preserve-3d; }

/* Ambient decorative layers — never interactive */
.orb, .glow, .grid-lines, .noise, .cta-glow, .hero-glow, .hero-glow-2 {
    position: absolute;
    pointer-events: none;
    z-index: 0;
}
.orb, .glow, .cta-glow, .hero-glow, .hero-glow-2 {
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    background: radial-gradient(circle, rgba(139,92,246,.55), transparent 68%);
    width: clamp(240px, 38vw, 560px);
    aspect-ratio: 1;
}
.orb--gold, .glow--gold { background: radial-gradient(circle, rgba(229,160,12,.42), transparent 68%); }
.orb--sm { width: clamp(160px, 20vw, 300px); }
.hero-glow  { top: -12%; right: -8%; }
.hero-glow-2{ bottom: -18%; left: -10%; background: radial-gradient(circle, rgba(229,160,12,.30), transparent 68%); }
.cta-glow   { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .35; }

.grid-lines, .hero-grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 64px 64px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 78%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 35%, #000 20%, transparent 78%);
}

.noise {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: .035;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ----------------------------------------------------------------------------
   Image resilience.
   Every photo on this site comes from a third-party CDN. When one is slow,
   rate-limited or blocked, the container must still look deliberate rather
   than leaving a hole in the layout — so each media wrapper carries a branded
   gradient + monogram behind the image.
   ---------------------------------------------------------------------------- */
.entity-card-media,
.blog-card-image,
.portfolio-card-image,
.split-media,
.about-image,
.why-image,
.service-detail-visual,
.hero-bg,
.page-banner-bg {
    position: relative;
    background-color: var(--ink-850);
    background-image:
        radial-gradient(80% 90% at 20% 10%, rgba(109,40,217,.42), transparent 62%),
        radial-gradient(70% 80% at 85% 90%, rgba(229,160,12,.16), transparent 66%),
        linear-gradient(150deg, var(--ink-800), var(--ink-950));
}
.entity-card-media::before,
.blog-card-image::before,
.portfolio-card-image::before,
.split-media::before,
.about-image::before,
.service-detail-visual::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 36px 36px;
    opacity: .7;
}
.entity-card-media img,
.blog-card-image img,
.portfolio-card-image img,
.split-media img,
.about-image img,
.service-detail-visual img { position: relative; z-index: 1; }

/* An <img> that failed to load reports zero intrinsic size. main.js tags it
   with .is-failed; hide the broken glyph and alt text so the branded
   placeholder stands in cleanly. Kept visibility (not display) so the
   container keeps its reserved aspect ratio and nothing reflows. */
img[alt]:not([src]), img[src=""] { display: none; }
img.is-failed { visibility: hidden; }
.has-failed-image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 632 200' width='120'%3E%3Cg fill='%238B5CF6' opacity='.22'%3E%3Cpath fill-rule='evenodd' d='M0,0 H62 C96,0 122,40 122,100 C122,160 96,200 62,200 H0 Z M46,44 H58 C74,44 76,68 76,100 C76,132 74,156 58,156 H46 Z'/%3E%3Cpath d='M125,38 L173,56 V200 H125 Z'/%3E%3Cpath d='M307,70 C297,28 273,0 241,0 C199,0 176,45 176,100 C176,155 199,200 241,200 C273,200 297,172 307,130 H264 C258,148 251,156 242,156 C226,156 220,129 220,100 C220,71 226,44 242,44 C251,44 258,52 264,70 Z M240,88 H307 V130 H240 Z'/%3E%3Cpath d='M315,38 L363,56 V200 H315 Z'/%3E%3Cpath d='M369,0 H478 V50 H447 V200 H400 V50 H369 Z'/%3E%3Cpath d='M480,0 H589 V50 H558 V200 H511 V50 H480 Z'/%3E%3C/g%3E%3C/svg%3E") center / clamp(72px, 34%, 150px) no-repeat;
}

/* Small standalone pill (used in hero badges, meta rows) */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-1);
    font-size: var(--step--1);
    color: var(--text-2);
    line-height: 1.4;
}

/* Marquee — motion.js sets --dh-marquee-dur / --dh-marquee-w.
   NOTE: motion.css also defines .dh-marquee / .dh-marquee__track (loaded after
   this file, so it wins the cascade on every shared property, incl. this exact
   mask-image and the hover-pause rule). Keep both copies' values in sync —
   the ones in motion.css are what actually render. */
.marquee, .dh-marquee {
    position: relative;
    display: flex;
    overflow: hidden;
    max-width: 100%;
    mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.marquee-track, .dh-marquee > * {
    display: flex;
    flex: none;
    gap: var(--space-8);
    align-items: center;
    padding-right: var(--space-8);
    animation: dh-marquee var(--dh-marquee-dur, 40s) linear infinite;
    will-change: transform;
}
.dh-marquee--rev > * { animation-direction: reverse; }
.dh-marquee--static > * { animation: none; }
.marquee:hover .marquee-track, .dh-marquee:hover > * { animation-play-state: paused; }
@keyframes dh-marquee { to { transform: translate3d(calc(var(--dh-marquee-w, 100%) * -1), 0, 0); } }
.marquee-item { flex: none; }


/* ============================================================================
   08  NAV SHELL
   ============================================================================ */

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2000;
    padding: 12px 20px;
    border-radius: var(--radius-pill);
    background: var(--violet-600);
    color: #fff;
    font-weight: 600;
    font-size: var(--step--1);
    transform: translateY(-160%);
    transition: transform var(--dur) var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(0); }

/* --- Navbar --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    height: var(--header-height);
    display: flex;
    align-items: center;
    background: transparent;
    transition: background-color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
    border-bottom: 1px solid transparent;
    padding-top: env(safe-area-inset-top, 0);
}
.navbar.scrolled,
.navbar.is-scrolled {
    background: rgba(7,5,13,.82);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    border-bottom-color: var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,.35);
}
.navbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    width: 100%;
}
.nav-spacer { height: var(--header-height); }

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    line-height: 0;
}
.logo-mark {
    width: auto;
    height: 34px;
    transition: transform var(--dur) var(--ease-spring), filter var(--dur) var(--ease-out);
}
.logo:hover .logo-mark { transform: translateY(-1px) scale(1.03); filter: drop-shadow(0 4px 16px rgba(139,92,246,.45)); }
.logo-text {
    font-family: var(--font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-1);
    letter-spacing: -.02em;
    line-height: 1;
    display: none;                       /* the SVG carries the brand */
}
.logo-dot { color: var(--gold-400); }
.no-svg .logo-text { display: inline; }
.no-svg .logo-mark { display: none; }

/* --- Primary nav --- */
.nav-primary { flex: 1; display: flex; justify-content: flex-end; }
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.nav-item { position: relative; display: flex; }
.nav-link,
.drop-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    padding: 0 14px;
    border-radius: var(--radius-pill);
    font-family: var(--font);
    font-size: .92rem;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.drop-trigger i { font-size: .62em; transition: transform var(--dur) var(--ease-out); opacity: .7; }
.nav-link:hover, .drop-trigger:hover,
.nav-link:focus-visible, .drop-trigger:focus-visible { color: var(--text-1); background: var(--surface-2); }
.nav-link.active, .drop-trigger.active,
.nav-link[aria-current="page"] { color: var(--text-accent); background: rgba(139,92,246,.12); }
.drop-trigger[aria-expanded="true"] { color: var(--text-1); background: var(--surface-2); }
.drop-trigger[aria-expanded="true"] i { transform: rotate(180deg); }

.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: 42px;
    padding: 0 20px;
    margin-left: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--gradient-brand);
    color: #fff;
    font-size: .9rem;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: var(--glow-violet);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(139,92,246,.42); color: #fff; }

/* --- Mega panel ---
   Positioned relative to .navbar (fixed, left:0/right:0 = full viewport width),
   NOT the trigger's .nav-item — centering on a right-aligned trigger would push
   a 1180px-wide panel off the right edge of the viewport. */
.mega {
    position: fixed;
    top: calc(var(--header-height) + 14px);
    left: 50%;
    transform: translate(-50%, -10px);
    width: min(1180px, calc(100vw - 32px));
    max-height: calc(100vh - var(--header-height) - 28px);
    overflow-y: auto;
    z-index: 950;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(12,8,23,.96);
    backdrop-filter: blur(22px) saturate(1.3);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: var(--shadow-lg);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
/* the invisible bridge so the pointer can travel from trigger to panel */
.nav-item.has-mega::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
}
.has-mega:hover > .mega,
.has-mega:focus-within > .mega,
.drop-trigger[aria-expanded="true"] + .mega,
.mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.mega-inner {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
    max-width: none;
}
.mega-inner--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega-inner--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mega-inner--resources { grid-template-columns: 2fr 1fr 1fr; }
.mega-col { min-width: 0; display: flex; flex-direction: column; gap: var(--space-3); }

/* --- Resources: featured post + title-only list -------------------------- */
.mega-blog-feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.mega-blog-feature-media { display: block; aspect-ratio: 16 / 9.7; overflow: hidden; border-radius: var(--radius-md); background: var(--ink-850); }
.mega-blog-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.mega-blog-feature:hover .mega-blog-feature-media img { transform: scale(1.05); }
.mega-blog-feature-body { display: flex; flex-direction: column; gap: 4px; }
.mega-blog-feature-eyebrow { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-accent-gold); }
.mega-blog-feature-title {
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-1);
}
.mega-blog-feature:hover .mega-blog-feature-title { color: var(--text-accent); }
.mega-blog-list { display: flex; flex-direction: column; gap: 2px; margin-top: var(--space-2); }
.mega-blog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
}
.mega-blog-row:hover, .mega-blog-row:focus-visible { background: var(--surface-2); }
.mega-blog-row-title {
    font-size: var(--step--1);
    font-weight: 500;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mega-blog-row-cta {
    flex: none;
    font-size: .74rem;
    font-weight: 600;
    color: var(--text-3);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.mega-blog-row-cta i { font-size: .7em; transition: transform var(--dur) var(--ease-spring); }
.mega-blog-row:hover .mega-blog-row-cta { color: var(--text-accent); }
.mega-blog-row:hover .mega-blog-row-cta i { transform: translateX(3px); }
.mega-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
    padding-left: var(--space-2);
}
.mega-list { display: flex; flex-direction: column; gap: 2px; }
.mega-list .link-card { padding: 10px 12px; border-color: transparent; background: transparent; }
.mega-list .link-card:hover, .mega-list .link-card:focus-visible { background: var(--surface-2); border-color: var(--border); }
.mega-list .link-card-icon { width: 36px; height: 36px; font-size: .82rem; border-radius: 10px; }
.mega-list .link-card-teaser { -webkit-line-clamp: 1; }

.mega-col.is-featured {
    padding-left: var(--space-6);
    border-left: 1px solid var(--border);
}
.mega-feature {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-5);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: linear-gradient(160deg, rgba(139,92,246,.16), rgba(229,160,12,.06));
    height: 100%;
    overflow: hidden;
    transition: transform var(--dur) var(--ease-spring), border-color var(--dur) var(--ease-out);
}
.mega-feature:hover { transform: translateY(-3px); border-color: var(--violet-400); }
.mega-feature-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-accent-gold);
}
.mega-feature-title {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--text-1);
}
.mega-feature-desc { font-size: var(--step--1); line-height: 1.6; color: var(--text-2); }
.mega-feature-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-accent);
}
.mega-feature-cta i { transition: transform var(--dur) var(--ease-spring); }
.mega-feature:hover .mega-feature-cta i { transform: translateX(5px); }

/* --- Drawer toggle (hamburger) --- */
.drawer-toggle, .hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 46px;
    height: 46px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.drawer-toggle:hover, .hamburger:hover { background: var(--surface-2); border-color: var(--border-strong); }
.drawer-toggle-bars { display: flex; flex-direction: column; gap: 5px; width: 20px; }
.drawer-toggle-bars span, .hamburger span {
    display: block;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    background: var(--text-1);
    transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out), width var(--dur) var(--ease-out);
}
.drawer-toggle-bars span:nth-child(2) { width: 70%; }
.drawer-toggle[aria-expanded="true"] .drawer-toggle-bars span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.drawer-toggle[aria-expanded="true"] .drawer-toggle-bars span:nth-child(2) { opacity: 0; }
.drawer-toggle[aria-expanded="true"] .drawer-toggle-bars span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); width: 100%; }

/* --- Mobile drawer --- */
.drawer {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    pointer-events: none;
}
.drawer.is-open, .drawer.open { visibility: visible; pointer-events: auto; }
.drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(7,5,13,.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}
.drawer.is-open .drawer-backdrop, .drawer.open .drawer-backdrop { opacity: 1; }
.drawer-panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    background: var(--ink-900);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.drawer.is-open .drawer-panel, .drawer.open .drawer-panel { transform: translateX(0); }
.drawer-head {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--ink-900);
    border-bottom: 1px solid var(--border);
}
.drawer-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    color: var(--text-2);
    background: var(--surface-1);
}
.drawer-close:hover { background: var(--surface-2); color: var(--text-1); }
.drawer-nav { padding: var(--space-4) var(--space-4) var(--space-6); display: flex; flex-direction: column; gap: 2px; }
.drawer-link, .drawer-acc {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: 12px 14px;
    border-radius: var(--radius-md);
    color: var(--text-2);
    font-size: var(--step-0);
    font-weight: 500;
    text-align: left;
    transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.drawer-link > i, .drawer-acc > span > i { width: 22px; color: var(--text-accent); font-size: .9em; }
/* Only the accordion rows push their chevron to the far edge. */
.drawer-acc { justify-content: space-between; }
.drawer-acc > span { display: inline-flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.drawer-link:hover, .drawer-acc:hover { background: var(--surface-2); color: var(--text-1); }
.drawer-link.active, .drawer-link[aria-current="page"] { background: rgba(139,92,246,.14); color: var(--text-accent); }
.drawer-acc-icon { font-size: .7em; color: var(--text-3); transition: transform var(--dur) var(--ease-out); }
.drawer-acc[aria-expanded="true"] { color: var(--text-1); }
.drawer-acc[aria-expanded="true"] .drawer-acc-icon { transform: rotate(180deg); }
/* motion.js animates the panel's inline height; keep the transition here. */
.drawer-acc-panel {
    overflow: hidden;
    transition: height .4s var(--ease-out);
}
.drawer-acc-panel[hidden] { display: none; }
.drawer-acc-panel > ul { display: flex; flex-direction: column; gap: 1px; padding: var(--space-2) 0 var(--space-3) var(--space-5); }
.drawer-sublink {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 46px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--text-3);
    font-size: var(--step--1);
    border-left: 1px solid var(--border);
}
.drawer-sublink > i { width: 18px; font-size: .88em; }
.drawer-sublink:hover { background: var(--surface-2); color: var(--text-1); border-left-color: var(--violet-500); }
.drawer-sublink.active, .drawer-sublink[aria-current="page"] { color: var(--text-accent); border-left-color: var(--violet-500); }
.drawer-foot {
    margin-top: auto;
    padding: var(--space-5);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.drawer-contact { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--step--1); color: var(--text-3); }
.drawer-contact a { color: var(--text-2); }
.drawer-contact a:hover { color: var(--text-accent); }
.drawer-social { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* --- Legacy dropdown (older pages that still ship .dropdown markup) --- */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 12px);
    left: 50%;
    transform: translate(-50%, -8px);
    min-width: 280px;
    padding: var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: rgba(12,8,23,.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 950;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.dropdown:hover > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu,
.dropdown.open > .dropdown-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.dropdown-menu-wide { min-width: min(880px, 92vw); }
.dropdown-grid { display: flex; flex-direction: column; gap: 2px; }
.dropdown-grid-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-4); }
.dropdown-col { min-width: 0; }
.dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    color: var(--text-2);
    font-size: var(--step--1);
}
.dropdown-item i { width: 20px; color: var(--text-accent); font-size: .9em; }
.dropdown-item:hover, .dropdown-item.active { background: var(--surface-2); color: var(--text-1); }

/* --- Breadcrumbs --- */
.breadcrumbs {
    padding-block: var(--space-5);
}
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--step--1);
    color: var(--text-3);
    min-width: 0;
}
.breadcrumbs li { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; }
.breadcrumbs a { color: var(--text-3); white-space: nowrap; }
.breadcrumbs a:hover { color: var(--text-accent); }
.breadcrumbs [aria-current="page"] {
    color: var(--text-2);
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: min(52ch, 70vw);
}
.breadcrumbs-sep { color: var(--ink-600); font-size: .7em; }


/* ============================================================================
   09  HERO & PAGE BANNER
   ============================================================================ */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(var(--header-height) + clamp(20px, 3vw, 40px)) 0 clamp(20px, 3vw, 40px);
    overflow: hidden;
    isolation: isolate;
}
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .30; }
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7,5,13,.62) 0%, rgba(7,5,13,.86) 55%, var(--bg) 100%),
        radial-gradient(70% 60% at 18% 20%, rgba(109,40,217,.34), transparent 68%),
        radial-gradient(50% 50% at 88% 78%, rgba(229,160,12,.12), transparent 70%);
}
.hero canvas, .hero .dh-scene { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero-content { position: relative; z-index: 2; max-width: 860px; }

.hero-title {
    font-family: var(--font-display);
    font-size: var(--step-5);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.035em;
    color: var(--text-1);
    margin-bottom: var(--space-4);
    text-wrap: balance;
}
.hero-subtitle {
    font-size: var(--step-1);
    line-height: 1.6;
    color: var(--text-2);
    max-width: 62ch;
    margin-bottom: var(--space-5);
    text-wrap: pretty;
}
.hero-buttons { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* --- Hero content: centred single column --- */
.hero-content--center { max-width: 760px; margin: 0 auto; text-align: center; }
.hero-content--center .hero-subtitle { margin-inline: auto; }
.hero-content--center .hero-buttons { justify-content: center; }

/* --- Scattered background icon field, parallaxed by the cursor ---------
   Sits between the WebGL scene (z:-1) and the centred text (z:2). Each chip
   is placed with --x/--y (percent of the field) and reads the field's
   cursor-driven --cf-x/--cf-y (inherited custom props, set once per frame
   by motion.js's cursorField module) scaled by its own --depth, so nearer
   "layers" drift further than distant ones — no per-icon JS, just CSS
   inheritance fanning one write out to twenty children. Static on touch/
   reduced-motion since --cf-x/--cf-y are simply never written there. */
.hero-icon-field {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.icon-chip {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    transform:
        translate(-50%, -50%)
        translate(calc(var(--cf-x, 0) * var(--depth, 1) * 26px), calc(var(--cf-y, 0) * var(--depth, 1) * 20px))
        rotate(var(--rot, 0deg))
        scale(var(--size, 1));
}
.icon-chip i {
    font-size: clamp(1.6rem, 2.8vw, 2.5rem);
    background-image: linear-gradient(140deg, rgba(255,255,255,.92) 0%, var(--ic-color, var(--violet-400)) 48%, var(--ic-color-deep, var(--ic-color, var(--violet-700))) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) drop-shadow(0 0 16px var(--ic-glow, rgba(139,92,246,.4)));
    opacity: .8;
}
.icon-chip--fb i      { --ic-color: #4E9BFF; --ic-color-deep: #1877F2; --ic-glow: rgba(24,119,242,.5); }
.icon-chip--gcp i     { --ic-color: #6FA8FF; --ic-color-deep: #4285F4; --ic-glow: rgba(66,133,244,.45); }
.icon-chip--oai i     { --ic-color: #3FD6AE; --ic-color-deep: #10A37F; --ic-glow: rgba(16,163,127,.45); }
.icon-chip--wa i      { --ic-color: #4FE38A; --ic-color-deep: #25D366; --ic-glow: rgba(37,211,102,.45); }
.icon-chip--react i   { --ic-color: #7EE6FF; --ic-color-deep: #61DAFB; --ic-glow: rgba(97,218,251,.45); }
.icon-chip--cf i      { --ic-color: #FFA85C; --ic-color-deep: #F38020; --ic-glow: rgba(243,128,32,.45); }
.icon-chip--aws i     { --ic-color: #FFC15C; --ic-color-deep: #FF9900; --ic-glow: rgba(255,153,0,.45); }
.icon-chip--node i    { --ic-color: #6FCF6F; --ic-color-deep: #339933; --ic-glow: rgba(51,153,51,.45); }
.icon-chip--php i     { --ic-color: #A8ACD9; --ic-color-deep: #777BB4; --ic-glow: rgba(119,123,180,.45); }
.icon-chip--fb2 i     { --ic-color: #FFD65C; --ic-color-deep: #FFA000; --ic-glow: rgba(255,160,0,.45); }
.icon-chip--android i { --ic-color: #79E8A6; --ic-color-deep: #3DDC84; --ic-glow: rgba(61,220,132,.45); }
.icon-chip--ios i     { --ic-color: #F2F2F5; --ic-color-deep: #C7C9D6; --ic-glow: rgba(181,148,251,.4); }
.icon-chip--tf i      { --ic-color: #FF9A4D; --ic-color-deep: #FF6F00; --ic-glow: rgba(255,111,0,.45); }
.icon-chip--docker i  { --ic-color: #6BC4FF; --ic-color-deep: #2496ED; --ic-glow: rgba(36,150,237,.45); }
.icon-chip--ai i      { --ic-color: #FFC15C; --ic-color-deep: #FF9A00; --ic-glow: rgba(255,154,0,.4); }
.icon-chip--ps i      { --ic-color: #78C6FF; --ic-color-deep: #31A8FF; --ic-glow: rgba(49,168,255,.4); }
.icon-chip--ig i {
    background-image: linear-gradient(135deg, #FEDA77 0%, #F58529 28%, #DD2A7B 55%, #8134AF 78%, #515BD4 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(221,42,123,.4));
}
.icon-chip--figma i {
    background-image: linear-gradient(160deg, #0ACF83 0%, #A259FF 35%, #F24E1E 65%, #FF7262 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(162,89,255,.4));
}
.icon-chip--google i {
    background-image: linear-gradient(120deg, #4285F4 0%, #EA4335 34%, #FBBC05 64%, #34A853 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(66,133,244,.4));
}
.icon-chip--py i {
    background-image: linear-gradient(160deg, #FFE873 0%, #FFD43B 45%, #3776AB 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(55,118,171,.4));
}

@media (max-width: 560px) {
    /* Thin the field on small screens — keep the layout legible, not a wall of icons */
    .icon-chip:nth-child(even) { display: none; }
    .icon-chip i { font-size: clamp(1.3rem, 5vw, 1.8rem); opacity: .55; }
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-4);
}
.hero-stat { flex-direction: row; align-items: center; gap: var(--space-4); }
.hero-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: rgba(139,92,246,.16);
    border: 1px solid var(--border-strong);
    color: var(--violet-200);
}
.hero-stat-content { min-width: 0; }

/* Floating decorative icons (legacy) */
.float-element {
    position: absolute;
    z-index: 0;
    color: rgba(181,148,251,.16);
    font-size: clamp(2rem, 5vw, 4.5rem);
    pointer-events: none;
    animation: dh-float 9s var(--ease-inout) infinite;
}
.float-1 { top: 18%; left: 7%; }
.float-2 { top: 26%; right: 10%; animation-delay: -2.5s; color: rgba(247,190,34,.14); }
.float-3 { bottom: 24%; left: 13%; animation-delay: -5s; }
.float-4 { bottom: 18%; right: 8%; animation-delay: -7s; color: rgba(247,190,34,.12); }
@keyframes dh-float {
    0%, 100% { transform: translate(var(--px, 0), var(--py, 0)) translateY(0) rotate(0deg); }
    50%      { transform: translate(var(--px, 0), var(--py, 0)) translateY(-22px) rotate(6deg); }
}

/* --- Page banner (inner pages) --- */
.page-banner {
    position: relative;
    padding: calc(var(--header-height) + clamp(48px, 7vw, 90px)) 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
    isolation: isolate;
    border-bottom: 1px solid var(--border);
}
.page-banner-bg { position: absolute; inset: 0; z-index: -2; }
.page-banner-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7,5,13,.70), rgba(7,5,13,.94)),
        radial-gradient(60% 70% at 15% 10%, rgba(109,40,217,.34), transparent 70%);
}
.page-banner h1 { font-size: var(--step-4); margin-bottom: var(--space-4); text-wrap: balance; max-width: 20ch; }
.page-banner > .container > p { font-size: var(--step-1); color: var(--text-2); max-width: 62ch; text-wrap: pretty; }


/* ============================================================================
   10  CONTENT SECTIONS
   ============================================================================ */

/* --- Generic auto grids used by the legacy pages --- */
.services-grid, .features-grid, .tools-grid, .blog-grid,
.case-studies-grid, .portfolio-grid, .platforms-grid,
.industry-links, .testimonials-grid, .related-grid {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.features-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.tools-grid    { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.services-grid > *, .features-grid > *, .tools-grid > *, .blog-grid > *,
.case-studies-grid > *, .portfolio-grid > *, .platforms-grid > *,
.industry-links > *, .related-grid > * { min-width: 0; }

/* --- Service / platform / industry / tool cards (legacy markup) --- */
.service-card, .platform-card, .industry-link, .tool-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-1);
    color: var(--text-2);
    height: 100%;
    overflow: hidden;
    isolation: isolate;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.service-card::before, .platform-card::before, .industry-link::before, .tool-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--gradient-brand);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-slow) var(--ease-out);
}
.service-card:hover, .platform-card:hover, .industry-link:hover, .tool-card:hover,
.service-card:focus-visible, .platform-card:focus-visible, .industry-link:focus-visible, .tool-card:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.service-card:hover::before, .platform-card:hover::before,
.industry-link:hover::before, .tool-card:hover::before { transform: scaleX(1); }
.service-card h3, .platform-card h4, .industry-link span, .tool-card h4 {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 600;
    color: var(--text-1);
    letter-spacing: -.015em;
    line-height: 1.25;
}
.service-card p, .platform-card p, .industry-link small, .tool-card p {
    font-size: var(--step--1);
    line-height: 1.65;
    color: var(--text-2);
}
.platform-card > i, .industry-link > i {
    font-size: 1.7rem;
    color: var(--text-accent);
    margin-bottom: var(--space-2);
}
.platform-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-3);
    color: var(--text-accent);
    font-size: var(--step--1);
    font-weight: 600;
}
.platform-link i { transition: transform var(--dur) var(--ease-spring); }
.platform-card:hover .platform-link i { transform: translateX(5px); }
.tool-card { align-items: flex-start; text-align: left; }
.tool-icon-badge, .tool-icon-sm { color: var(--text-accent); }

/* --- Feature card --- */
.feature-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.feature-card > i { width: 40px; height: 40px; font-size: .95rem; }
.feature-card h4 { font-size: var(--step-0); font-weight: 600; line-height: 1.45; color: var(--text-1); }
.feature-card:hover { border-color: var(--border-strong); background: var(--surface-2); }

/* --- Tech strip --- */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3); }
.tech-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    min-height: 104px;
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text-2);
    font-size: var(--step--1);
    text-align: center;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out),
                transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out);
}
.tech-item i { font-size: 1.7rem; color: var(--text-accent); transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out); }
.tech-item:hover, .tech-item:focus-visible {
    border-color: var(--border-strong);
    background: var(--surface-2);
    transform: translateY(-4px);
    color: var(--text-1);
}
.tech-item:hover i { transform: scale(1.14) rotate(-6deg); color: var(--violet-200); }

/* --- Why / split content --- */
.why-grid, .about-grid, .contact-grid, .service-detail, .mission-vision {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.mission-vision { align-items: stretch; }
.why-image, .about-image, .service-detail-visual, .split-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg-alt);
}
.why-image img, .about-image img, .service-detail-visual img { width: 100%; height: 100%; object-fit: cover; }
.why-image-placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    font-size: clamp(3rem, 9vw, 6rem);
    color: var(--violet-500);
    background:
        radial-gradient(70% 70% at 50% 40%, rgba(139,92,246,.22), transparent 70%),
        var(--ink-850);
}
.why-points { display: flex; flex-direction: column; gap: var(--space-5); margin-top: var(--space-6); }
.why-point { display: flex; align-items: flex-start; gap: var(--space-4); }
.why-point h4 { font-size: var(--step-0); margin-bottom: 2px; color: var(--text-1); }
.why-point p { font-size: var(--step--1); line-height: 1.6; color: var(--text-3); }

.why-metrics-bottom { margin-top: clamp(40px, 6vw, 72px); }
.why-metrics-glass { padding: clamp(24px, 4vw, 40px); }
.why-metrics-glass h3 { font-size: var(--step-1); margin-bottom: var(--space-6); display: flex; align-items: center; gap: var(--space-3); }
.why-bar { margin-bottom: var(--space-5); }
.why-bar:last-child { margin-bottom: 0; }
.why-bar-label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--step--1);
    color: var(--text-2);
}
.why-bar-label span:last-child { color: var(--text-accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.why-bar-track { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; }
.why-bar-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--gradient-brand);
    box-shadow: 0 0 16px rgba(139,92,246,.45);
    transition: width 1.2s var(--ease-out);
}

/* --- Process --- */
.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-5);
}
.process-step {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-8);
    /* Base .card surface (--surface-1) is too faint against --bg for a card
       this text-heavy — bump it up a step so the four steps read as distinct
       panels rather than blending into the page background. */
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.process-step-number {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    font-family: var(--font-display);
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(181,148,251,.34);
}
.process-step > i { position: absolute; top: var(--space-5); left: var(--space-5); }
.process-step h3, .process-step h4 { font-size: var(--step-1); color: var(--text-1); }
.process-step p { font-size: var(--step--1); line-height: 1.65; }
.process-step:hover { border-color: var(--violet-400); background: var(--surface-3); }
.step-number { font-family: var(--font-display); font-weight: 800; color: var(--text-accent); }

/* --- Timeline --- */
.timeline { position: relative; display: flex; flex-direction: column; gap: var(--space-5); padding-left: var(--space-6); }
.timeline::before {
    content: '';
    position: absolute;
    left: 7px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, var(--violet-500), rgba(139,92,246,.06));
}
.timeline-item { position: relative; }
.timeline-item::before {
    content: '';
    position: absolute;
    left: calc(var(--space-6) * -1);
    top: 26px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--ink-950);
    border: 3px solid var(--violet-500);
    box-shadow: 0 0 0 4px rgba(139,92,246,.16);
}

/* --- Trusted / marquee logos --- */
.trusted-section { padding: clamp(40px, 6vw, 72px) 0; border-block: 1px solid var(--border); }
.trusted-heading { width: 100%; text-align: center; }
.trusted-section > .container > p {
    text-align: center;
    font-size: var(--step--1);
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--space-6);
}
/* Two independent marquee rows (top/bottom), each with its own half of the
   client list. Logos are pre-converted to solid white PNGs with real alpha
   (assets/images/clients-logos-white/) — no card/background needed, they sit
   directly on the page background. */
.trusted-logos-rows { display: flex; flex-direction: column; gap: var(--space-6); }
.trusted-logos {
    display: flex;
    flex-wrap: nowrap;         /* critical: the marquee JS appends two wide track
                                   divs as children — flex-wrap: wrap would break
                                   them onto two visual rows instead of one strip */
    align-items: center;
    gap: clamp(32px, 6vw, 80px);
    overflow-x: auto;          /* graceful no-JS/reduced-motion fallback: scrolls
                                   as one row instead of wrapping */
    scrollbar-width: none;
}
.trusted-logos::-webkit-scrollbar { display: none; }
/* Fixed WxH bounding box, not just a fixed height — logo aspect ratios vary
   wildly (a wide short wordmark vs. a compact square badge), so height-only
   sizing let wide logos dominate visually. Every logo now fits inside the
   same box via object-fit:contain, so both the rendered size and the gaps
   between boxes read as genuinely equal regardless of source shape. */
.trusted-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: clamp(110px, 12vw, 160px);
    height: clamp(56px, 7vw, 80px);
}
.trusted-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: .82;
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.trusted-logo:hover img { opacity: 1; transform: scale(1.05); }
/* Scrolling never stops — hovering a logo to look closer shouldn't freeze the row. */
.trusted-logos:hover > * { animation-play-state: running; }

/* --- Testimonials & carousel --- */
.testimonials-carousel { position: relative; overflow: hidden; border-radius: var(--radius-lg); }
.carousel-track { display: flex; transition: transform var(--dur-slow) var(--ease-out); }
.carousel-slide { flex: 0 0 100%; min-width: 0; padding: 2px; }
.testimonial-card { display: flex; flex-direction: column; gap: var(--space-4); min-height: 100%; }
.testimonial-stars { color: var(--gold-400); letter-spacing: .18em; font-size: 1.05rem; }
.testimonial-card p { font-size: var(--step-1); line-height: 1.65; color: var(--text-1); text-wrap: pretty; }
.testimonial-author { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; }
.testimonial-avatar {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--gradient-brand);
    color: #fff;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
}
.testimonial-author h4 { font-size: var(--step-0); color: var(--text-1); }
.testimonial-author span { font-size: var(--step--1); color: var(--text-3); }
.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: rgba(12,8,23,.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-2);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.carousel-btn:hover { background: var(--violet-600); color: #fff; border-color: var(--violet-500); }
.carousel-prev { left: 8px; }
.carousel-next { right: 8px; }
.carousel-dots { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-5); }
.carousel-dots span, .carousel-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--ink-600);
    cursor: pointer;
    transition: width var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.carousel-dots .active, .carousel-dots [aria-selected="true"] { width: 26px; background: var(--violet-500); }

/* --- FAQ --- */
.faq-list { display: flex; flex-direction: column; gap: var(--space-3); max-width: 880px; margin-inline: auto; }
.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease-out), background-color var(--dur) var(--ease-out);
}
.faq-item:hover, .faq-item.open, .faq-item:has([aria-expanded="true"]) { border-color: var(--border-strong); background: var(--surface-2); }
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    min-height: 60px;
    padding: var(--space-4) var(--space-5);
    font-family: var(--font);
    font-size: var(--step-0);
    font-weight: 600;
    color: var(--text-1);
    text-align: left;
    line-height: 1.45;
    cursor: pointer;
}
.faq-question i { flex: none; font-size: .75em; color: var(--text-accent); transition: transform var(--dur) var(--ease-out); }
.faq-item.open .faq-question i, .faq-question[aria-expanded="true"] i { transform: rotate(180deg); }
/* When motion.js drives the accordion it animates the panel's inline height,
   so the panel must be a plain overflow-hidden block. */
.faq-answer {
    overflow: hidden;
    transition: height var(--dur-slow) var(--ease-out);
}
.faq-answer p { padding: 0 var(--space-5) var(--space-5); font-size: var(--step--1); line-height: 1.75; color: var(--text-2); }

/* Legacy fallback: FAQ lists not inside a [data-accordion] group are toggled
   by main.js, which only flips .open — so animate with grid rows there. */
.faq-list:not([data-accordion]) .faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    height: auto;
    transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.faq-list:not([data-accordion]) .faq-answer > * { overflow: hidden; }
.faq-list:not([data-accordion]) .faq-item.open .faq-answer,
.faq-list:not([data-accordion]) .faq-question[aria-expanded="true"] + .faq-answer { grid-template-rows: 1fr; }

/* --- Tools listing --- */
.tools-category { margin-bottom: clamp(40px, 6vw, 72px); }
.tools-category h3 { font-size: var(--step-2); margin-bottom: var(--space-5); }

/* --- Case studies --- */
.case-study-card { display: flex; flex-direction: column; gap: var(--space-4); height: 100%; }
.case-study-header h3 { font-size: var(--step-1); }
.case-study-client { font-size: var(--step--1); color: var(--text-accent); font-weight: 600; }
.case-study-challenge, .case-study-result { font-size: var(--step--1); line-height: 1.7; }
.case-study-result {
    padding: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(229,160,12,.28);
    background: rgba(229,160,12,.07);
    color: var(--text-1);
}
.case-study-card:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* --- Portfolio --- */
.portfolio-card {
    position: relative;
    display: block;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--ink-850);
    isolation: isolate;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.portfolio-card-image { aspect-ratio: 4 / 3; overflow: hidden; }
.portfolio-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.portfolio-card-overlay {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: linear-gradient(180deg, transparent, rgba(7,5,13,.92) 55%);
}
.portfolio-card-overlay span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-accent-gold);
}
.portfolio-card-overlay h3 { font-size: var(--step-1); color: #fff; }
.portfolio-card-overlay p { font-size: var(--step--1); line-height: 1.55; color: var(--text-2); }
.portfolio-card:hover, .portfolio-card:focus-visible {
    border-color: var(--border-strong);
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}
.portfolio-card:hover .portfolio-card-image img { transform: scale(1.07); }
.portfolio-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-bottom: var(--space-7); }

/* --- Blog --- */
.blog-card { display: flex; flex-direction: column; gap: var(--space-4); padding: 0; overflow: hidden; height: 100%; }
.blog-card-image { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink-850); }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.blog-card:hover .blog-card-image img { transform: scale(1.06); }
.blog-card-body { display: flex; flex-direction: column; gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); flex: 1; }
.blog-date {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-accent-gold);
}
.blog-card h3 { font-size: var(--step-1); line-height: 1.25; }
.blog-card p { font-size: var(--step--1); line-height: 1.65; }
.blog-card .read-more { margin-top: auto; }
.blog-card:hover { border-color: var(--border-strong); background: var(--surface-2); transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* --- About / mission --- */
.about-text p { font-size: var(--step-0); line-height: 1.8; }
.mv-card { display: flex; flex-direction: column; gap: var(--space-4); }
.mv-card h3 { font-size: var(--step-1); }

/* --- About / team --- */
.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); }
.team-rail-hint { display: none; }
.team-card { min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-1); transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.team-card-media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #f5f5f3; }
.team-card-media::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 5, 16, .38)); pointer-events: none; transition: opacity var(--dur-base) var(--ease-out); }
.team-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; filter: grayscale(1) contrast(1.06); transition: transform 600ms var(--ease-out), filter 600ms var(--ease-out); }
.team-card-index { position: absolute; top: var(--space-3); right: var(--space-3); z-index: 1; color: #fff; font: 700 .7rem/1 var(--font); letter-spacing: .12em; text-shadow: 0 1px 8px rgba(0, 0, 0, .65); }
.team-card-body { min-height: 112px; padding: var(--space-4); border-top: 1px solid var(--border); }
.team-role { margin: 0 0 6px; color: var(--text-accent-gold); font: 700 .66rem/1.35 var(--font); letter-spacing: .12em; text-transform: uppercase; }
.team-name { margin: 0; color: var(--text-1); font-size: var(--step-1); line-height: 1.05; }
.team-name span { position: relative; display: inline-block; }
.team-name span::before, .team-name span::after { position: absolute; inset: 0; content: attr(data-text); opacity: 0; pointer-events: none; }
.team-name span::before { color: #5eead4; transform: translateX(-2px); }
.team-name span::after { color: #f472b6; transform: translateX(2px); }
.team-detail { margin: 8px 0 0; color: var(--text-3); font-size: var(--step--1); }
@media (hover: hover) and (pointer: fine) {
    .team-card:hover { transform: translateY(-7px); border-color: var(--border-strong); box-shadow: var(--shadow-lg); }
    .team-card:hover .team-card-media img { transform: scale(1.055); filter: grayscale(.25) contrast(1.08); }
    .team-card:hover .team-card-media::after { opacity: .55; }
    .team-card:hover .team-name span::before, .team-card:hover .team-name span::after { animation: dh-team-glitch 420ms steps(2, end) both; }
}
@keyframes dh-team-glitch { 0%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); } 30% { opacity: .8; clip-path: inset(18% 0 55% 0); } 55% { opacity: .75; clip-path: inset(62% 0 12% 0); } 78% { opacity: .55; clip-path: inset(42% 0 35% 0); } }
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
    .team-rail-hint { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin: calc(var(--space-5) * -1) 0 var(--space-4); color: var(--text-3); font-size: .72rem; }
    .team-grid { display: flex; gap: var(--space-4); overflow-x: auto; overscroll-behavior-x: contain; padding: 0 var(--gutter) var(--space-3); margin: 0 calc(var(--gutter) * -1); scroll-padding-inline: var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; touch-action: pan-x; }
    .team-grid::-webkit-scrollbar { display: none; }
    .team-card { flex: 0 0 min(76vw, 310px); scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .team-name span::before, .team-name span::after { animation: none !important; } }

/* --- CTA section --- */
.cta-section, .parallax-section {
    position: relative;
    padding: clamp(72px, 10vw, 140px) 0;
    text-align: center;
    overflow: hidden;
    isolation: isolate;
    background-size: cover;
    background-position: center;
    background-attachment: scroll;
}
.parallax-overlay, .cta-overlay, .cta-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(7,5,13,.90), rgba(7,5,13,.95)),
        radial-gradient(60% 70% at 50% 30%, rgba(109,40,217,.34), transparent 72%);
}
.cta-section h2 { font-size: var(--step-4); margin-bottom: var(--space-5); text-wrap: balance; }
.cta-section h2 span {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--violet-300);
}
.cta-section p { font-size: var(--step-1); color: var(--text-2); max-width: 60ch; margin: 0 auto var(--space-7); text-wrap: pretty; }
.cta-section .btn + .btn { margin-left: var(--space-3); }


/* ============================================================================
   11  FORMS & CALCULATORS
   ============================================================================ */

.form-group { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); min-width: 0; }
.form-group label { font-size: var(--step--1); font-weight: 600; color: var(--text-1); }
.form-required { color: var(--gold-400); margin-left: 2px; }
.form-optional { color: var(--text-3); font-weight: 400; margin-left: 4px; font-size: .92em; }
.form-hint { font-size: var(--step--1); color: var(--text-3); line-height: 1.5; }

input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="search"], input[type="date"], select, textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text-1);
    font-family: var(--font);
    font-size: var(--step-0);
    line-height: 1.5;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
textarea { min-height: 148px; resize: vertical; padding-top: 14px; }
select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 44px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23B594FB' stroke-width='1.8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 12px;
    cursor: pointer;
}
select option { background: var(--ink-850); color: var(--text-1); }
::placeholder { color: var(--text-3); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--border-strong); }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--violet-500);
    background: var(--surface-2);
    box-shadow: var(--ring);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
    border-color: #F87171;
    box-shadow: 0 0 0 3px rgba(248,113,113,.22);
}
input[aria-invalid="true"] + .form-hint, .form-hint.is-error { color: #FCA5A5; }

input[type="range"] {
    width: 100%;
    height: 36px;
    padding: 0;
    background: transparent;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); }
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--violet-400);
    border: 2px solid #fff;
    box-shadow: 0 2px 10px rgba(139,92,246,.5);
}
input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--violet-400);
    border: 2px solid #fff;
}
input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    accent-color: var(--violet-500);
    cursor: pointer;
}

.form-status {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    font-size: var(--step--1);
    line-height: 1.6;
    border: 1px solid var(--border);
    background: var(--surface-1);
}
.form-status.success { border-color: rgba(52,211,153,.42); background: rgba(52,211,153,.10); color: #A7F3D0; }
.form-status.error   { border-color: rgba(248,113,113,.42); background: rgba(248,113,113,.10); color: #FCA5A5; }

.contact-form-card { padding: clamp(24px, 4vw, 44px); }
.contact-info { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-5); }
.contact-info-card i { color: var(--text-accent); font-size: 1.15rem; margin-top: 3px; }
.contact-info-card h4 { font-size: var(--step-0); margin-bottom: 2px; }
.contact-info-card a, .contact-info-card p { font-size: var(--step--1); color: var(--text-2); word-break: break-word; }
.contact-info-card a:hover { color: var(--text-accent); }

/* Honeypot — visually hidden but not display:none (bots skip display:none) */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Cost calculator — numbered fieldsets, pill/tile option cards, breakdown rows.
   Added for calculator-website-cost.php; nothing existing covered a
   checkable-card group, so these are additive and scoped to .cost-*. */
.cost-step { border: 0; padding: 0; margin: 0 0 var(--space-6) 0; }
.cost-step:last-of-type { margin-bottom: var(--space-6); }
.cost-step legend {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 0;
    margin-bottom: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--step-0);
    font-weight: 700;
    color: var(--text-1);
}
.cost-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--step--1);
    font-weight: 700;
}

.cost-options { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.cost-option {
    position: relative;
    flex: 1;
    min-width: 120px;
    min-height: 44px;
    padding: 12px 16px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cost-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.cost-option i { display: block; margin-bottom: 4px; font-size: 1.2rem; color: var(--text-3); }
.cost-option span { font-size: var(--step--1); color: var(--text-2); }
.cost-option:hover { border-color: var(--border-strong); }
.cost-option:has(input:focus-visible) { box-shadow: var(--ring); }
.cost-option:has(input:checked) { border-color: var(--violet-500); background: rgba(139,92,246,.10); }
.cost-option:has(input:checked) i,
.cost-option:has(input:checked) span { color: var(--text-1); }

.cost-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.cost-feature {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: var(--step--1);
    color: var(--text-2);
    transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.cost-feature input { margin: 0; }
.cost-feature:hover { border-color: var(--border-strong); }
.cost-feature:has(input:focus-visible) { box-shadow: var(--ring); }
.cost-feature:has(input:checked) { border-color: var(--violet-500); background: rgba(139,92,246,.10); color: var(--text-1); }

.cost-breakdown { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--step--1); }
.cost-breakdown-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: 4px 0; border-bottom: 1px solid var(--border); }
.cost-breakdown-row:last-child { border-bottom: 0; }
.cost-breakdown-row span:first-child { color: var(--text-3); }
.cost-breakdown-row span:last-child { color: var(--text-1); font-weight: 600; text-align: right; }

@media (max-width: 560px) {
    .cost-features { grid-template-columns: 1fr; }
    .cost-option { min-width: 100px; }
}


/* ============================================================================
   12  RELATED / NEXT STEPS
   ============================================================================ */

.related { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--border); }
.related-grid { margin-top: var(--space-6); }
.related-grid .link-card { padding: var(--space-5); }

.next-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: var(--space-4);
    margin-top: clamp(32px, 5vw, 56px);
    padding-top: clamp(32px, 5vw, 56px);
    border-top: 1px solid var(--border);
}
.next-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: linear-gradient(150deg, rgba(139,92,246,.10), transparent 70%);
    color: var(--text-2);
    min-width: 0;
    transition: border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring), background-color var(--dur) var(--ease-out);
}
.next-step:hover, .next-step:focus-visible { border-color: var(--border-strong); transform: translateY(-3px); background: var(--surface-2); }
.next-step-icon { width: 46px; height: 46px; }
.next-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.next-step-kicker {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-accent-gold);
}
.next-step-label { font-family: var(--font-display); font-size: var(--step-0); font-weight: 600; color: var(--text-1); line-height: 1.3; }
.next-step-teaser { font-size: var(--step--1); color: var(--text-3); line-height: 1.5; }
.next-step-arrow { flex: none; color: var(--text-3); transition: transform var(--dur) var(--ease-spring), color var(--dur) var(--ease-out); }
.next-step:hover .next-step-arrow { transform: translateX(4px); color: var(--text-accent); }
.next-step:hover .next-step-icon { transform: rotate(-6deg) scale(1.06); color: #fff; }


/* ============================================================================
   13  FOOTER & BACK TO TOP
   ============================================================================ */

.footer {
    position: relative;
    padding: clamp(56px, 8vw, 96px) 0 0;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, var(--bg), var(--ink-900));
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
    padding-bottom: clamp(40px, 6vw, 64px);
}
.footer-col { min-width: 0; }
.footer-col h4 {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--text-3);
    margin-bottom: var(--space-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-1); }
.footer-col ul a {
    display: inline-block;
    padding: 7px 0;
    font-size: var(--step--1);
    color: var(--text-2);
    line-height: 1.5;
}
.footer-col ul a:hover { color: var(--text-accent); }
.footer-brand .logo-mark { height: 32px; margin-bottom: var(--space-4); }
.footer-brand p { font-size: var(--step--1); line-height: 1.7; color: var(--text-3); max-width: 42ch; margin-bottom: var(--space-5); }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-social a, .drawer-social a {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-1);
    color: var(--text-2);
    transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring);
}
.footer-social a:hover, .drawer-social a:hover {
    background: var(--violet-600);
    border-color: var(--violet-500);
    color: #fff;
    transform: translateY(-3px);
}
.footer-contact { gap: var(--space-3) !important; }
.footer-contact li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--step--1); color: var(--text-2); line-height: 1.6; }
.footer-contact i { color: var(--text-accent); margin-top: 5px; flex: none; }
.footer-contact a { word-break: break-word; }
.footer-contact a:hover { color: var(--text-accent); }

.footer-newsletter {
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, rgba(139,92,246,.12), rgba(229,160,12,.05));
    margin-bottom: clamp(32px, 5vw, 56px);
}
.newsletter-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
}
.newsletter-text { min-width: 0; flex: 1 1 320px; }
.newsletter-text h4 { font-family: var(--font-display); font-size: var(--step-2); margin-bottom: var(--space-2); }
.newsletter-text p { font-size: var(--step--1); color: var(--text-2); }
.newsletter-form { display: flex; gap: var(--space-3); flex: 1 1 340px; min-width: 0; flex-wrap: wrap; }
.newsletter-form input { flex: 1 1 200px; min-width: 0; }
.newsletter-form button {
    flex: none;
    min-height: 48px;
    padding: 0 26px;
    border-radius: var(--radius-md);
    background: var(--gradient-brand);
    color: #fff;
    font-weight: 600;
    font-size: var(--step--1);
    box-shadow: var(--glow-violet);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
.newsletter-form button:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(139,92,246,.42); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) 0;
    border-top: 1px solid var(--border);
}
.footer-bottom p { font-size: var(--step--1); color: var(--text-3); }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.footer-bottom-links a { font-size: var(--step--1); color: var(--text-3); padding-block: 6px; }
.footer-bottom-links a:hover { color: var(--text-accent); }

.back-to-top {
    position: fixed;
    right: clamp(16px, 3vw, 28px);
    bottom: calc(clamp(16px, 3vw, 28px) + env(safe-area-inset-bottom, 0px));
    z-index: 800;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(12,8,23,.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-accent);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(.9);
    transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-spring),
                visibility var(--dur), background-color var(--dur) var(--ease-out);
}
.back-to-top.visible, .back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.back-to-top:hover { background: var(--violet-600); color: #fff; }

/* Scroll progress bar (motion.js sets --dh-progress) */
.dh-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1100;
    transform-origin: left;
    transform: scaleX(var(--dh-progress, 0));
    background: linear-gradient(90deg, var(--violet-500), var(--gold-400));
    pointer-events: none;
}


/* ============================================================================
   14  MOTION UTILITIES (legacy classes — the new API lives in motion.css)
   ============================================================================ */

.animate-on-scroll, .animate-on-scroll-left,
.animate-on-scroll-right, .animate-on-scroll-scale {
    opacity: 0;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}
.animate-on-scroll        { transform: translateY(30px); }
.animate-on-scroll-left   { transform: translateX(-40px); }
.animate-on-scroll-right  { transform: translateX(40px); }
.animate-on-scroll-scale  { transform: scale(.94); }
.animate-on-scroll.visible, .animate-on-scroll-left.visible,
.animate-on-scroll-right.visible, .animate-on-scroll-scale.visible {
    opacity: 1;
    transform: none;
}
.stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.stagger-children.visible > * { opacity: 1; transform: none; }

/* No-JS / failsafe: if the observer never runs, content must still be readable. */
.no-js .animate-on-scroll, .no-js .animate-on-scroll-left,
.no-js .animate-on-scroll-right, .no-js .animate-on-scroll-scale,
.no-js .stagger-children > * { opacity: 1; transform: none; }

.fade-in-up   { animation: dh-fade-up   .8s var(--ease-out) both; }
.fade-in-down { animation: dh-fade-down .8s var(--ease-out) both; }
.fade-in-left { animation: dh-fade-left .8s var(--ease-out) both; }
.fade-in-right{ animation: dh-fade-right .8s var(--ease-out) both; }
.scale-in     { animation: dh-scale-in  .8s var(--ease-out) both; }
.slide-up     { animation: dh-fade-up   .8s var(--ease-out) both; }
@keyframes dh-fade-up    { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes dh-fade-down  { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: none; } }
@keyframes dh-fade-left  { from { opacity: 0; transform: translateX(-32px); } to { opacity: 1; transform: none; } }
@keyframes dh-fade-right { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes dh-scale-in   { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fadeInUp      { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

.img-reveal { clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease-out); }
.img-reveal.revealed { clip-path: inset(0 0 0 0); }
.no-js .img-reveal { clip-path: none; }

.gradient-animate {
    background-size: 200% 200%;
    animation: dh-gradient 8s var(--ease-inout) infinite;
}
@keyframes dh-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.orbital-ring {
    position: absolute;
    border: 1px solid rgba(181,148,251,.14);
    border-radius: 50%;
    pointer-events: none;
    animation: dh-orbit 26s linear infinite;
}
@keyframes dh-orbit { to { transform: rotate(360deg); } }


/* ============================================================================
   15  ACCESSIBILITY
   ============================================================================ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

:focus-visible {
    outline: 2px solid var(--violet-300);
    outline-offset: 3px;
    border-radius: 4px;
}
.btn:focus-visible, .nav-cta:focus-visible, .link-card:focus-visible,
.entity-card:focus-visible, .chip:focus-visible, .next-step:focus-visible {
    outline: 2px solid var(--violet-200);
    outline-offset: 3px;
}
[hidden] { display: none !important; }

@media (forced-colors: active) {
    .link-card, .entity-card, .card, .btn, .chip { border: 1px solid CanvasText; }
    .gradient-text, .section-title span, .stat-value { -webkit-text-fill-color: CanvasText; color: CanvasText; }
}


/* ============================================================================
   16  RESPONSIVE — 1280 / 1100 / 900 / 768 / 560 / 400 only (§4)
   ============================================================================ */

@media (max-width: 1280px) {
    .mega-inner--4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega-col.is-featured { grid-column: 1 / -1; padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: var(--space-5); }
    .mega-feature { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
    .mega-feature-desc { flex: 1 1 260px; }
    .nav-link, .drop-trigger { padding-inline: 11px; font-size: .88rem; }
}

@media (max-width: 1100px) {
    /* Navigation switches to the drawer */
    .nav-primary, .nav-links { display: none; }
    /* CTA lives inside the drawer only ("Start a project") — showing it here too crowds the mobile bar */
    .nav-cta { display: none; }
    .drawer-toggle, .hamburger { display: inline-flex; }
    .footer-grid { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
    .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root { --header-height: 68px; }
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .split, .why-grid, .about-grid, .contact-grid, .service-detail { grid-template-columns: minmax(0, 1fr); }
    .split--reverse > *:first-child, .split--reverse > *:last-child { order: 0; }
    .hero { min-height: auto; }
    .hero-title { font-size: clamp(2.4rem, 8vw, 3.6rem); }
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mega-inner--3, .mega-inner--4, .mega-inner--resources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mega-col--blog { grid-column: 1 / -1; }
    .float-element { display: none; }
}

@media (max-width: 768px) {
    .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .section { padding: clamp(48px, 11vw, 80px) 0; }
    .hero { padding-top: calc(var(--header-height) + 40px); }
    .hero-subtitle { font-size: var(--step-0); }
    .hero-buttons .btn { flex: 1 1 100%; }
    .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .hero-stat { padding: var(--space-4); }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .newsletter-content { flex-direction: column; align-items: stretch; }
    .newsletter-form { flex: 1 1 auto; }
    .newsletter-form input, .newsletter-form button { flex: 1 1 100%; }
    .cta-section .btn + .btn { margin-left: 0; }
    .carousel-prev { left: 2px; }
    .carousel-next { right: 2px; }
    .process-step-number { font-size: 2.1rem; }
    .page-banner h1 { max-width: none; }
    .related { padding: clamp(48px, 11vw, 80px) 0; }
}

@media (max-width: 560px) {
    .grid-2, .grid-3, .grid-4,
    .services-grid, .features-grid, .blog-grid, .case-studies-grid,
    .portfolio-grid, .platforms-grid, .industry-links, .process-steps,
    .testimonials-grid, .related-grid, .next-steps, .stat-grid, .stats-grid {
        grid-template-columns: minmax(0, 1fr);
    }
    .tools-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tech-grid  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

    /* Card rows become swipeable rails rather than a 6-deep stack (§4) */
    .rail {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: var(--space-4);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        scroll-padding-inline: var(--gutter);
    }
    .rail > * { flex: 0 0 min(82vw, 320px); scroll-snap-align: start; }

    .hero-stats { grid-template-columns: minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
    .footer-bottom { flex-direction: column; align-items: flex-start; }
    .card, .card-glass, .feature-card, .mv-card, .tool-card,
    .contact-info-card, .why-metrics-glass, .testimonial-card,
    .process-step, .service-card, .platform-card, .industry-link, .entity-card {
        padding: var(--space-5);
    }
    .drawer-panel { width: 100%; }
    .section-header { margin-bottom: var(--space-6); }
    .testimonial-card p { font-size: var(--step-0); }
    .btn { width: 100%; }
    .btn-sm, .pill-nav .btn, .chip { width: auto; }
    .cluster > .btn { width: auto; }
}

@media (max-width: 400px) {
    :root { --gutter: 14px; }
    .tools-grid, .tech-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-banner, .hero { padding-top: calc(var(--header-height) + 32px); }
    .stat-value, .stat-item h3, .hero-stat h3 { font-size: var(--step-2); }
    .logo-mark { height: 28px; }
}

/* ----------------------------------------------------------------------------
   Touch target sizing.
   On coarse pointers every standalone control gets a comfortable hit area.
   Inline links inside running text are deliberately excluded — WCAG 2.2
   SC 2.5.8 exempts targets that sit within a sentence, and padding them out
   would wreck the line rhythm.
   ---------------------------------------------------------------------------- */
@media (pointer: coarse) {
    .footer-col ul a,
    .footer-bottom-links a,
    .breadcrumbs a,
    .drawer-contact a,
    .footer-contact a {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding-block: 8px;
    }
    .footer-contact li,
    .drawer-contact li { align-items: center; }
    .footer-contact i,
    .drawer-contact i { margin-top: 0; }

    .logo { padding-block: 8px; }

    .chip, .tool-tag { min-height: 40px; padding-inline: 16px; }
    .chip-row, .tool-tags, .case-study-tools { gap: var(--space-3); }

    .carousel-dots span, .carousel-dots button, .dh-carousel__dot {
        height: 24px;
        border-radius: var(--radius-pill);
        background-clip: content-box;
        padding-block: 8px;
    }
}

/* Touch devices: hover-only affordances must not hide content (§10.3) */
@media (hover: none) {
    .portfolio-card-overlay { position: relative; inset: auto; background: var(--surface-1); }
    .link-card-arrow { opacity: 1; transform: none; }
    .entity-card::before, .service-card::before { transform: scaleX(1); opacity: .5; }
}


/* ============================================================================
   17  REDUCED MOTION & PRINT
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    /* Content must never be left invisible when motion is off. */
    .animate-on-scroll, .animate-on-scroll-left, .animate-on-scroll-right,
    .animate-on-scroll-scale, .stagger-children > *, [data-reveal], [data-split] {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }
    .img-reveal { clip-path: none !important; }
    .marquee-track, .dh-marquee > *, .float-element, .orbital-ring,
    .is-featured-card::after, .typing-cursor { animation: none !important; }
    .dh-tilt.is-tilting { transform: none !important; }
    .dh-tilt.is-tilting::after { display: none; }
    body::before { display: none; }
}

.dh-reduced .float-element,
.dh-reduced .orbital-ring { display: none; }

@media print {
    body { background: #fff; color: #000; }
    body::before, .noise, .navbar, .drawer, .back-to-top, .dh-progress,
    .hero-bg, .page-banner-bg, .orb, .glow, .grid-lines, #particleCanvas { display: none !important; }
    .hero, .page-banner { padding-top: 0; }
    h1, h2, h3, h4, p, li { color: #000 !important; -webkit-text-fill-color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
    .section, .related { padding: 16px 0; page-break-inside: avoid; }
}


/* ============================================================================
   18  SERVICES INDEX — homepage #services cards (.svc-card)

   APPEND-ONLY. Every selector requires one of the new .svc-* classes, so nothing
   shared (.entity-card, .chip, .chip-row, .grid-3, .is-linked, .card-hit,
   .text-link) is redefined and the ~30 other pages using them are untouched.
   Replaces the duplicated purple .eyebrow (which reprinted the <h3> verbatim for
   4 of the 6 services) with an icon plate + an 01-06 index numeral.
   ============================================================================ */

.svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.svc-rail-hint { display: none; }
.svc-card { min-height: 300px; overflow: hidden; }
.svc-card > :not(.dh-sheen) { position: relative; z-index: 1; }
@media (max-width: 1050px) and (min-width: 769px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --- Header band: icon plate (where the duplicated eyebrow used to be) ----- */
.svc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}
.svc-index {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    /* Decorative only (aria-hidden) — sequence is also carried by DOM order.
       Body-size accent text still uses --text-accent per the contrast rule. */
    color: var(--violet-600);
    transition: color var(--dur) var(--ease-out);
}
.svc-card:hover .svc-index,
.svc-card:focus-within .svc-index { color: var(--text-accent); }

/* Soft corner wash gives the otherwise quiet cards a little depth on hover. */
.svc-card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 90% at 0% 0%, rgba(139,92,246,.14), transparent 58%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease-out);
}
.svc-card:hover::after,
.svc-card:focus-within::after { opacity: 1; }

/* --- Title + positioning sentence ----------------------------------------- */
.svc-lede { display: grid; gap: var(--space-2); }
.svc-title {
    font-size: var(--step-1);        /* below the section <h2> so hierarchy holds */
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.015em;
}
.svc-desc {
    font-size: var(--step--1);
    line-height: 1.6;
    color: var(--text-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Single, consistent navigation cue ------------------------------------ */
.svc-foot {
    display: flex;
    align-items: center;
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}
.svc-cta { font-size: var(--step--1); font-weight: 600; white-space: nowrap; }
.svc-cta i { transition: transform var(--dur) var(--ease-spring); }
.svc-card:hover .svc-cta i, .svc-card:focus-visible .svc-cta i { transform: translateX(5px); }
.svc-card:hover .entity-card-icon, .svc-card:focus-visible .entity-card-icon { transform: rotate(-8deg) scale(1.08); }

/* Homepage: one theatrical first impression; the proof remains quiet below it. */
.hero--landing {
    height: 100svh;
    min-height: 100svh;
    background:
        radial-gradient(70% 64% at 50% 45%, rgba(124,58,237,.19), transparent 65%),
        radial-gradient(40% 44% at 82% 18%, rgba(229,160,12,.12), transparent 72%);
}
.hero--landing::before {
    content: '';
    position: absolute;
    inset: 14% 6%;
    z-index: 0;
    pointer-events: none;
    border: 1px solid rgba(181,148,251,.12);
    border-radius: 50%;
    box-shadow: 0 0 0 12vw rgba(139,92,246,.018), 0 0 0 24vw rgba(139,92,246,.012);
    transform: rotate(-12deg) scale(1.35, .68);
}
.hero--landing .hero-overlay {
    background:
        linear-gradient(180deg, rgba(7,5,13,.34), rgba(7,5,13,.68) 74%, var(--bg) 100%),
        radial-gradient(54% 50% at 50% 52%, transparent 34%, rgba(7,5,13,.62) 100%);
}
.hero--landing .hero-icon-field { opacity: .44; filter: saturate(.82); }
.hero--landing .icon-chip i { opacity: .66; }
.hero--landing .hero-content { max-width: min(980px, 100%); }
.hero-title--landing {
    max-width: 10.5ch;
    margin-inline: auto;
    font-size: clamp(3.55rem, 8.9vw, 9rem);
    font-weight: 800;
    line-height: .88;
    letter-spacing: -.075em;
    text-transform: uppercase;
}
.hero-glitch { position: relative; display: inline-block; cursor: default; }
@media (hover: hover) and (pointer: fine) {
    .hero-glitch:hover::before,
    .hero-glitch:hover::after {
        content: attr(data-text);
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: #7ee6ff;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: dh-text-glitch .36s steps(2, end) both;
    }
    .hero-glitch:hover::before { transform: translate(-.045em, -.018em); clip-path: inset(0 0 58% 0); }
    .hero-glitch:hover::after  { background: #ff699b; transform: translate(.045em, .018em); clip-path: inset(52% 0 0 0); animation-delay: .035s; }
}
@keyframes dh-text-glitch {
    0%, 100% { opacity: 0; }
    18%, 76% { opacity: .88; }
    35% { clip-path: inset(12% 0 66% 0); }
    58% { clip-path: inset(62% 0 8% 0); }
}
.hero--landing .hero-subtitle { max-width: 54ch; margin-top: clamp(24px, 3vw, 38px); }
.hero--landing .hero-buttons { margin-top: clamp(28px, 4vw, 44px); }
.hero-scroll-cue {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: clamp(40px, 7vw, 76px);
    color: var(--text-3);
    font-size: var(--step--1);
    letter-spacing: .12em;
    text-transform: uppercase;
}
.hero-scroll-cue span { width: 34px; height: 1px; background: var(--text-accent); }
.page-index .hero + .section { border-top: 1px solid var(--border); }
.page-index .hero-stats { gap: 1px; background: var(--border); border: 1px solid var(--border); }
.page-index .hero-stats .stat { background: var(--bg); padding: clamp(22px, 3vw, 34px); }
.page-index .hero-stats .stat:hover { background: var(--surface-2); }
.rail-hint {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-2);
    margin: calc(var(--space-6) * -1) 0 var(--space-4);
    color: var(--text-3);
    font-size: var(--step--1);
    letter-spacing: .08em;
    text-transform: uppercase;
}
.story-rail, .portfolio-rail {
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-color: var(--violet-600) transparent;
}
.story-rail > .entity-card { flex-basis: min(360px, 84vw); }
.portfolio-rail {
    gap: clamp(18px, 2.5vw, 34px);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    padding-bottom: var(--space-5);
    scroll-snap-type: x proximity;
}
.portfolio-rail > .entity-card { flex-basis: clamp(300px, 31vw, 440px); }
.portfolio-rail .entity-card { background: rgba(255,255,255,.025); }
.portfolio-rail .entity-card-media { aspect-ratio: 4 / 4.65; }
.portfolio-rail .entity-card-media::after { transition: opacity var(--dur-fast) linear, background-position .45s linear; }
.portfolio-rail .entity-card:hover .entity-card-media::after,
.portfolio-rail .entity-card:focus-visible .entity-card-media::after {
    opacity: .78;
    background:
        linear-gradient(112deg, transparent 0 43%, rgba(126,230,255,.32) 44% 46%, transparent 47% 55%, rgba(255,105,155,.26) 56% 58%, transparent 59%),
        linear-gradient(180deg, transparent 52%, rgba(7,5,13,.74));
    background-size: 180% 100%, 100% 100%;
    animation: dh-work-scan .48s steps(2, end) both;
}
.portfolio-rail .entity-card:hover .entity-card-media img,
.portfolio-rail .entity-card:focus-visible .entity-card-media img { transform: scale(1.075) translate3d(-.7%, 0, 0); }
@keyframes dh-work-scan { to { background-position: 100% 0, 0 0; } }
@media (max-width: 768px) {
    .svc-rail-hint {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-2);
        margin: calc(var(--space-5) * -1) 0 var(--space-4);
        color: var(--text-3);
        font-size: var(--step--1);
        letter-spacing: .08em;
        text-transform: uppercase;
    }
    .svc-grid {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        gap: var(--space-4);
        margin-inline: calc(var(--gutter) * -1);
        padding: 0 var(--gutter) var(--space-4);
        scroll-padding-inline: var(--gutter);
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }
    .svc-grid::-webkit-scrollbar { display: none; }
    .svc-grid > .svc-card { flex: 0 0 min(82vw, 360px); scroll-snap-align: start; }
    .hero--landing { min-height: 100svh; }
    .hero--landing::before { inset: 22% -30%; transform: rotate(-12deg) scale(1.2, .58); }
    .hero--landing .hero-icon-field { opacity: .24; }
    .hero-title--landing { max-width: 9.7ch; font-size: clamp(3.15rem, 14.5vw, 5.2rem); }
    .hero-scroll-cue { margin-top: var(--space-7); }
    .rail-hint { margin-top: calc(var(--space-5) * -1); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-glitch::before, .hero-glitch::after,
    .portfolio-rail .entity-card-media::after { animation: none !important; }
}

@media (max-width: 400px) {
    .svc-card { min-height: 280px; }
}