/* ═══════════════════════════════════════════════════════════════
   PAGES/HOME.CSS — homepage-only styles.
   · Hero  ........ "Orbit" schematic (.d3-hero)
   · Intro ........ "Chip to Cognition" (.d1-intro)
   · Why   ........ Bento pillars (.d4-why)
   Design tokens are SCOPED to these sections so nothing leaks
   into the shared styles (core.css / components.css) used by the
   rest of the page. Typography/rhythm/animation primitives live
   in the site-wide assets/css/brand.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── Scoped V2 tokens ──────────────────────────────────────── */
.d3-hero,
.v2-sec.d1-intro,
.v2-sec.d4-why,
.wwd {
    --purple:     #34005F;
    --purple-lt:  #5A2D8A;
    --purple-dk:  #1C0033;
    --lilac:      #F0E6FF;
    --violet-2:   #D4B3FF;
    --ember:      #F94C30;
    --ember-dk:   #D93A20;
    --ember-pr:   #B32A14;
    --ember-lt:   #FFF0EC;
    --ember-200:  #FFC4B6;

    --v2bg:       #FFFBF7;
    --v2surface:  #FFFFFF;
    --v2tx:       #1A1210;
    --v2tx-2:     #574F46;
    --v2tx-3:     #9A918A;
    --v2line:     rgba(52, 0, 95, .12);
    --v2line-soft:rgba(52, 0, 95, .07);

    --f-display: 'Freight Sans Pro', 'Trebuchet MS', 'Gill Sans MT', 'Gill Sans', Arial, sans-serif;
    --f-body:    'Trebuchet MS', 'Gill Sans MT', 'Gill Sans', Arial, Helvetica, sans-serif;
    --f-mono:    'JetBrains Mono', 'Cascadia Code', 'Courier New', monospace;

    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
    --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
    --s20: 80px; --s24: 96px;

    --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 20px; --r-full: 999px;

    --d-fast: 150ms; --d-base: 220ms; --d-slow: 360ms; --d-slower: 750ms;
    --ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-out:   cubic-bezier(0, 0, 0.2, 1);
    --ease-brand: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --shadow-sm:   0 1px 3px rgba(52, 0, 95, .07), 0 1px 2px rgba(52, 0, 95, .05);
    --shadow-card: 0 2px 6px rgba(52, 0, 95, .05), 0 14px 44px rgba(52, 0, 95, .08);
    --shadow-lift: 0 18px 50px rgba(52, 0, 95, .15);
    --shadow-glow: 0 10px 36px rgba(249, 76, 48, .25);
}

/* ── Shared utilities (scoped to these sections) ───────────── */
.d3-hero .v2-eyebrow,
.d1-intro .v2-eyebrow,
.d4-why .v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--s3);
    font-family: var(--f-mono);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--purple);
}
.d1-intro .beam-rule,
.d4-why .beam-rule {
    position: relative;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--ember) 40%, var(--purple-lt) 100%);
    flex: none;
}
.d1-intro .beam-rule::after,
.d4-why .beam-rule::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 50%;
    width: 7px;
    height: 7px;
    transform: translateY(-50%) rotate(45deg);
    border: 1px solid var(--ember);
    border-left: 0;
    border-bottom: 0;
}
.d4-why .beam-rule.flip { transform: scaleX(-1); }

/* Buttons (used in the hero only) */
.d3-hero .v2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    min-height: 48px;
    padding: var(--s3) var(--s8);
    border-radius: var(--r-md);
    font-family: var(--f-body);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: background var(--d-fast) var(--ease-out),
                color var(--d-fast) var(--ease-out),
                border-color var(--d-fast) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out),
                transform var(--d-base) var(--ease-out);
}
.d3-hero .v2-btn i { font-size: .82em; transition: transform var(--d-base) var(--ease-out); }
.d3-hero .v2-btn--primary {
    background: var(--ember);
    color: #fff;
    box-shadow: 0 8px 24px rgba(249, 76, 48, .28);
}
.d3-hero .v2-btn--primary:hover {
    background: var(--ember-dk);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}
.d3-hero .v2-btn--primary:hover i { transform: translateX(3px); }
.d3-hero .v2-btn--primary:active { background: var(--ember-pr); transform: none; }
.d3-hero .v2-btn--secondary {
    background: transparent;
    color: var(--purple);
    border: 2px solid var(--purple);
    padding: 10px calc(var(--s8) - 2px);
}
.d3-hero .v2-btn--secondary:hover { background: var(--lilac); transform: translateY(-2px); }

/* ═══════════════════════════════════════════════════════════
   HERO — "Orbit"
   ═══════════════════════════════════════════════════════════ */
.d3-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 150px 0 var(--s20);
    overflow: hidden;
    background:
        radial-gradient(ellipse 55% 65% at 82% 28%, var(--lilac), transparent 62%),
        radial-gradient(ellipse 45% 55% at 10% 85%, var(--ember-lt), transparent 58%),
        var(--v2bg);
}
.d3-hero::after {                 /* fine schematic grid */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(var(--v2line-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--v2line-soft) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 60% 40%, #000 20%, transparent 75%);
    pointer-events: none;
}
.d3-hero .container { position: relative; z-index: 2; width: 100%; }

.d3-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    gap: var(--s16);
    align-items: center;
}

.d3-kicker {
    padding: 9px var(--s5);
    background: rgba(255, 255, 255, .8);
    border: 1px solid var(--v2line);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--s6);
}
.d3-kicker .pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ember);
    animation: d3-pulse 2.6s var(--ease-out) infinite;
}
@keyframes d3-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 76, 48, .4); }
    70%  { box-shadow: 0 0 0 11px rgba(249, 76, 48, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 76, 48, 0); }
}

.d3-hero h1.d3-h1 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2.6rem, 5vw, 4.2rem);
    line-height: 1.14;
    letter-spacing: -0.03em;
    color: var(--purple);
    margin-bottom: var(--s6);
}
.d3-hero .grad-it {
    display: block;
    margin: var(--s3) 0 0;
    padding: 0 0 .12em;
    font-style: normal;
    font-size: .5em;
    line-height: 1.3;
    letter-spacing: -0.015em;
    background: linear-gradient(98deg, var(--ember) 5%, #FF8C6A 60%, var(--purple-lt) 130%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.d3-desc {
    max-width: 540px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: var(--v2tx-2);
    margin-bottom: var(--s8);
}
.d3-btns { display: flex; flex-wrap: wrap; gap: var(--s4); margin-bottom: var(--s12); }

.d3-stats {
    display: flex;
    align-items: stretch;
    gap: var(--s8);
    padding-top: var(--s6);
    border-top: 1px solid var(--v2line);
    max-width: 540px;
}
.d3-stat { flex: 1; }
.d3-stat + .d3-stat { padding-left: var(--s8); border-left: 1px solid var(--v2line); }
.d3-stat-num {
    font-family: var(--f-mono);
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    font-weight: 600;
    color: var(--purple);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.d3-stat-num::after {
    content: '';
    display: block;
    width: 22px; height: 2px;
    margin-top: var(--s2);
    background: linear-gradient(90deg, var(--ember), var(--purple-lt));
}
.d3-stat-lbl {
    margin-top: var(--s2);
    font-size: .76rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--v2tx-3);
}

/* Orbit schematic */
.d3-core {
    position: relative;
    width: min(520px, 100%);
    aspect-ratio: 1 / 1;
    margin-left: auto;
}
.d3-core-glow {
    position: absolute;
    inset: 14%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240, 230, 255, .9), transparent 62%);
    animation: d3-breathe 5.5s ease-in-out infinite;
}
@keyframes d3-breathe {
    0%, 100% { opacity: .7; transform: scale(1); }
    50%      { opacity: 1;  transform: scale(1.05); }
}
.d3-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.d3-ring--outer {
    inset: 5%;
    border: 1.5px dashed rgba(52, 0, 95, .22);
    animation: d3-spin 80s linear infinite;
}
.d3-ring--outer::before {
    content: '';
    position: absolute;
    top: -4px; left: 50%;
    width: 9px; height: 9px;
    margin-left: -4.5px;
    border-radius: 50%;
    background: var(--ember);
    box-shadow: 0 0 14px 3px rgba(249, 76, 48, .5);
}
.d3-ring--inner {
    inset: 17%;
    border: 1px solid rgba(52, 0, 95, .1);
    animation: d3-spin-r 64s linear infinite;
}
.d3-ring--inner::before {
    content: '';
    position: absolute;
    bottom: -3px; left: 50%;
    width: 7px; height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--purple-lt);
    box-shadow: 0 0 12px 2px rgba(90, 45, 138, .45);
}
@keyframes d3-spin   { to { transform: rotate(360deg); } }
@keyframes d3-spin-r { to { transform: rotate(-360deg); } }

.d3-links { position: absolute; inset: 0; width: 100%; height: 100%; }
.d3-links .ln { stroke: rgba(52, 0, 95, .14); stroke-width: .55; }
.d3-links .ln-pulse {
    stroke: var(--ember);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-dasharray: 5 95;
    animation: d3-flow 3s linear infinite;
}
@keyframes d3-flow {
    from { stroke-dashoffset: 100; }
    to   { stroke-dashoffset: 0; }
}

.d3-hub {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 112px; height: 112px;
    display: grid;
    place-items: center;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 12px rgba(255, 255, 255, .55),
        0 0 0 1px var(--v2line),
        0 24px 60px rgba(52, 0, 95, .2);
    z-index: 3;
}
.d3-hub img { width: 64%; display: block; max-width: 100%; }

.d3-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding: 10px var(--s5);
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--v2line);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-card);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--purple);
    text-decoration: none;
    white-space: nowrap;
    z-index: 4;
    transition: border-color var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out),
                color var(--d-base) var(--ease-out);
}
.d3-node i { color: var(--ember); font-size: .85rem; }
.d3-node:hover {
    border-color: var(--ember);
    color: var(--ember-dk);
    box-shadow: var(--shadow-glow);
}
.d3-n1 { top: 9%;  left: 50%; }
.d3-n2 { top: 50%; left: 88%; }
.d3-n3 { top: 91%; left: 50%; }
.d3-n4 { top: 50%; left: 12%; }

/* Hero entrance */
.d3-hero [data-hero] {
    opacity: 0;
    transform: translateY(24px);
    animation: d3-rise .85s var(--ease) forwards;
}
.d3-hero [data-hero="1"] { animation-delay: .05s; }
.d3-hero [data-hero="2"] { animation-delay: .18s; }
.d3-hero [data-hero="3"] { animation-delay: .32s; }
.d3-hero [data-hero="4"] { animation-delay: .46s; }
.d3-hero [data-hero="5"] { animation-delay: .6s; }
.d3-hero [data-hero="6"] { animation-delay: .45s; }
@keyframes d3-rise { to { opacity: 1; transform: none; } }

/* ═══════════════════════════════════════════════════════════
   INTRO — "Chip to Cognition"
   ═══════════════════════════════════════════════════════════ */
.v2-sec.d1-intro {
    padding: 96px 0;
    background: var(--v2surface);
}
.d1-intro-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
    gap: var(--s20);
    align-items: start;
}
.d1-intro .v2-eyebrow { margin-bottom: var(--s5); }

.d1-intro h2.d1-intro-headline {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(2rem, 3.6vw, 3rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--purple);
    margin-bottom: var(--s8);
}
.d1-intro em.grad {
    display: inline-block;
    font-style: normal;
    padding: 0 0 .1em;
    margin: 0;
    line-height: 1.14;
    background: linear-gradient(98deg, var(--ember) 0%, var(--purple-lt) 110%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.d1-quote { display: flex; gap: var(--s5); margin-bottom: var(--s6); }
.d1-quote-bar {
    flex: none;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--ember), var(--purple-lt));
}
.d1-quote-text {
    font-family: var(--f-display);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.45;
    color: var(--purple);
}
.d1-intro-para {
    font-size: 1.02rem;
    line-height: 1.8;
    color: var(--v2tx-2);
    margin-bottom: var(--s8);
}
.d1-intro-para strong { color: var(--purple); }
.d1-tags { display: flex; flex-wrap: wrap; gap: var(--s2); }
.d1-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s2) var(--s4);
    min-height: 38px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--v2tx-2);
    background: var(--v2bg);
    border: 1px solid var(--v2line);
    border-radius: var(--r-full);
    transition: all var(--d-fast) var(--ease-out);
}
.d1-tag i { color: var(--ember); }
.d1-tag:hover { border-color: var(--violet-2); background: var(--lilac); color: var(--purple); }

.d1-isr-stack { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.d1-isr {
    display: flex;
    align-items: center;
    gap: var(--s5);
    padding: var(--s5) var(--s6);
    background: var(--v2bg);
    border: 1px solid var(--v2line-soft);
    border-radius: var(--r-lg);
    transition: border-color var(--d-base) var(--ease-out),
                box-shadow var(--d-base) var(--ease-out),
                transform var(--d-base) var(--ease-out);
}
.d1-isr:hover {
    border-color: var(--violet-2);
    box-shadow: var(--shadow-card);
    transform: translateY(-2px);
}
.d1-isr-num {
    font-family: var(--f-mono);
    font-size: 1.7rem;
    font-weight: 600;
    color: var(--purple);
    min-width: 88px;
    font-variant-numeric: tabular-nums;
}
.d1-isr-text { flex: 1; }
.d1-isr-text strong {
    display: block;
    font-family: var(--f-display);
    font-size: .95rem;
    font-weight: 700;
    color: var(--purple);
}
.d1-isr-text span { font-size: .82rem; color: var(--v2tx-3); }
.d1-isr-icon {
    display: grid;
    place-items: center;
    width: 42px; height: 42px;
    flex: none;
    color: var(--ember);
    background: #fff;
    border: 1px solid var(--v2line);
    border-radius: var(--r-md);
}

.d1-aside {
    background: linear-gradient(160deg, var(--purple), var(--purple-dk));
    border-radius: var(--r-xl);
    padding: var(--s8);
    color: #fff;
    position: relative;
    overflow: hidden;
}
.d1-aside::before {
    content: '';
    position: absolute;
    right: -44px; bottom: -52px;
    width: 190px; height: 190px;
    background: linear-gradient(135deg, rgba(212, 179, 255, .3), rgba(249, 76, 48, .22));
    clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.d1-aside-title {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--violet-2);
    margin-bottom: var(--s5);
}
.d1-aside-list { display: grid; gap: var(--s4); position: relative; }
.d1-aside-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s3);
    font-size: .9rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}
.d1-aside-item strong { color: #fff; }
.d1-aside-item i { flex: none; margin-top: 3px; color: var(--ember); }

/* ═══════════════════════════════════════════════════════════
   WHY KEN-AI & SASKEN — Bento pillars
   ═══════════════════════════════════════════════════════════ */
.v2-sec.d4-why {
    padding: 96px 0;
    background: var(--v2surface);
}
.d4-why .v2-sec-head {
    max-width: 700px;
    margin: 0 auto 64px;
    text-align: center;
}
.d4-why .v2-sec-head .v2-eyebrow {
    justify-content: center;
    margin-bottom: var(--s5);
}
.d4-why h2.v2-sec-title {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem);
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--purple);
}

.d4-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s4);
}

.d4-why .d4-tile {
    position: relative;
    background: var(--v2surface);
    border: 1px solid var(--v2line-soft);
    border-radius: var(--r-xl);
    overflow: hidden;
    transition: transform var(--d-slow) var(--ease),
                box-shadow var(--d-slow) var(--ease),
                border-color var(--d-slow) var(--ease);
}
.d4-why .d4-tile::after {              /* cursor spotlight (animations.js) */
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%),
        rgba(249, 76, 48, .07), transparent 55%);
    opacity: 0;
    transition: opacity var(--d-base) var(--ease-out);
    pointer-events: none;
}
.d4-why .d4-tile:hover {
    box-shadow: var(--shadow-lift);
    border-color: var(--violet-2);
    transform: translateY(-3px);
}
.d4-why .d4-tile:hover::after { opacity: 1; }

.d4-pillar { padding: var(--s10) var(--s8); }
.d4-pillar-num {
    display: inline-grid;
    place-items: center;
    min-width: 48px;
    height: 48px;
    padding: 0 var(--s3);
    font-family: var(--f-mono);
    font-size: .9rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(140deg, var(--ember), var(--ember-dk));
    border-radius: var(--r-md);
    margin-bottom: var(--s6);
}
.d4-pillar h3 {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.35;
    letter-spacing: .02em;
    color: var(--purple);
    margin-bottom: var(--s5);
}
.d4-pillar-intro {
    font-size: .92rem;
    line-height: 1.65;
    color: var(--v2tx-2);
    padding-bottom: var(--s5);
    margin-bottom: var(--s5);
    border-bottom: 1px solid var(--v2line-soft);
}
.d4-pillar-list { display: grid; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.d4-pillar-list li {
    position: relative;
    padding-left: var(--s5);
    font-size: .88rem;
    line-height: 1.6;
    color: var(--v2tx-2);
}
.d4-pillar-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    transform: rotate(45deg);
    border: 1.5px solid var(--purple-lt);
    border-left: 0; border-bottom: 0;
}

/* ═══════════════════════════════════════════════════════════
   WHAT WE DO — "Living Illustrations"
   Alternating rows; each service has its own animated SVG diagram
   sourced from the matching offering page. Everything below is
   scoped under .wwd so the sv-*/lblt/blt/lm names never leak.
   ═══════════════════════════════════════════════════════════ */
.wwd { background: var(--cream, #FEF5EC); }
/* Neutralize the old shared .wwd decorative hairlines from components.css
   on the homepage (still used as-is by the GenAI landing page). */
.wwd::before, .wwd::after { display: none; }

.wwd .n2-rows { display: grid; gap: 36px; }
.wwd .n2-row {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 40px;
    background: var(--v2bg);
    border: 1px solid var(--v2line-soft);
    border-radius: 28px;
    transition: box-shadow .45s ease, border-color .45s ease;
}
.wwd .n2-row:hover { box-shadow: var(--shadow-lift); border-color: transparent; }
.wwd .n2-row.rev { grid-template-columns: minmax(0, 1fr) 380px; }
.wwd .n2-row.rev .n2-vis { order: 2; }

.wwd .n2-vis {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 22px;
    overflow: hidden;
    display: grid;
    place-items: center;
}
.wwd .t-purple .n2-vis { background: linear-gradient(150deg, var(--lilac), #FAF5FF 70%); }
.wwd .t-orange .n2-vis { background: linear-gradient(150deg, var(--ember-lt), #FFF8F4 70%); }
.wwd .n2-vis svg { width: 78%; height: 78%; overflow: visible; }

.wwd .n2-stp {
    display: block;
    font-family: var(--f-mono);
    font-size: .68rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--ember-dk);
    margin-bottom: 10px;
}
.wwd .n2-row h3 {
    font-family: var(--f-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    font-size: 1.7rem;
    color: var(--purple);
    margin-bottom: 8px;
}
.wwd .n2-ln {
    width: 46px; height: 2px;
    margin: 14px 0 20px;
    background: linear-gradient(90deg, var(--ember), var(--purple-lt));
}
.wwd .n2-row ul { display: grid; gap: 13px; margin-bottom: 22px; list-style: none; padding: 0; }

/* bullets + learn-more (scoped) */
.wwd .blt {
    position: relative;
    padding-left: 20px;
    font-size: .92rem;
    line-height: 1.7;
    color: var(--v2tx-2);
}
.wwd .blt::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 7px; height: 7px;
    transform: rotate(45deg);
    border: 1.5px solid var(--ember);
    border-left: 0; border-bottom: 0;
}
.wwd .lm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    width: fit-content;
    font-weight: 700;
    font-size: .92rem;
    color: var(--purple);
    text-decoration: none;
}
.wwd .lm i { font-size: .8em; transition: transform var(--d-base) var(--ease-out); }
.wwd .lm:hover { color: var(--ember-dk); }
.wwd .lm:hover i { transform: translateX(4px); }

/* SVG label text */
.wwd .lblt {
    font-family: var(--f-mono);
    font-size: 6.8px;
    font-weight: 600;
    letter-spacing: 1.2px;
    fill: #4A423A;
    text-transform: uppercase;
}
.wwd .lblt.dk { fill: #1A1210; font-weight: 600; }
.wwd .lblt-hd { font-size: 8.2px !important; font-weight: 700 !important; fill: var(--purple) !important; letter-spacing: 1.4px !important; }
.wwd .tb { transform-box: fill-box; transform-origin: center; }

/* SVG animations — each maps to a service's own story */
.wwd .sv-pulse { stroke-dasharray: 10 130; stroke-linecap: round; animation: sv-flow 2.8s linear infinite; }
@keyframes sv-flow { to { stroke-dashoffset: -140; } }
.wwd .sv-pulse-up { stroke-dasharray: 10 130; stroke-linecap: round; animation: sv-flowup 2.8s linear infinite; }
@keyframes sv-flowup { to { stroke-dashoffset: -140; } }
/* @keyframes sv-flowup { to { stroke-dashoffset: 140; } } */ 
.wwd .sv-blink { animation: sv-blink 2.2s ease-in-out infinite; }
.wwd .sv-blink.d2 { animation-delay: .7s; }
.wwd .sv-blink.d3 { animation-delay: 1.4s; }
@keyframes sv-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.wwd .sv-node { animation: sv-node 3.6s ease-in-out infinite; }
@keyframes sv-node { 0%, 8% { transform: scale(1); opacity: .55; } 14%, 22% { transform: scale(1.45); opacity: 1; } 34%, 100% { transform: scale(1); opacity: .55; } }
.wwd .sv-build { opacity: .15; animation: sv-build 7s ease-in-out infinite; }
@keyframes sv-build { 0% { opacity: .15; transform: translateY(8px); } 7%, 80% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: .15; transform: translateY(8px); } }
.wwd .sv-hl { opacity: 0; animation: sv-hl 7.5s ease-in-out infinite; }
@keyframes sv-hl { 0% { opacity: 0; } 4%, 17% { opacity: 1; } 27%, 100% { opacity: 0; } }
.wwd .sv-stair { stroke-dasharray: 150; stroke-dashoffset: 150; animation: sv-stair 9s linear infinite; }
@keyframes sv-stair { 0% { stroke-dashoffset: 150; } 80%, 95% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.wwd .sv-up9 { opacity: 0; animation: sv-up9 9s ease infinite; }
@keyframes sv-up9 { 0%, 72% { opacity: 0; transform: translateY(6px); } 82%, 94% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; } }

/* ═══ Responsive ═══ */
@media (max-width: 1100px) {
    .d3-core { width: min(440px, 100%); }
}
@media (max-width: 980px) {
    .d3-hero { min-height: 0; padding-top: 134px; }
    .d3-hero-grid { grid-template-columns: 1fr; gap: var(--s16); }
    .d3-core { margin: 0 auto; }
    .d1-intro-wrap { grid-template-columns: 1fr; gap: var(--s12); }
}
@media (max-width: 960px) {
    .wwd .n2-row, .wwd .n2-row.rev { grid-template-columns: 1fr; gap: var(--s8); }
    .wwd .n2-row.rev .n2-vis { order: 0; }
    .wwd .n2-vis { max-width: 340px; margin: 0 auto; width: 100%; }
}
@media (max-width: 860px) {
    .d4-why-grid { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; }
}
@media (max-width: 640px) {
    .d3-stats { gap: var(--s5); }
    .d3-stat + .d3-stat { padding-left: var(--s5); }
    .d3-core { width: min(360px, 92vw); }
    .d3-hub { width: 86px; height: 86px; }
    .d3-node { padding: 8px var(--s4); font-size: .7rem; }
    .d3-n2 { left: 84%; }
    .d3-n4 { left: 16%; }
    .v2-sec.d1-intro, .v2-sec.d4-why { padding: 64px 0; }
    .d4-pillar { padding: var(--s8) var(--s6); }
    .wwd .n2-row { padding: var(--s6); }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
    .d3-hero [data-hero] { opacity: 1; transform: none; animation: none; }
    .d3-ring--outer, .d3-ring--inner, .d3-core-glow, .d3-kicker .pulse-dot { animation: none; }
    .d3-links .ln-pulse { animation: none; stroke-dasharray: none; opacity: .3; }
    .wwd [class*="sv-"] { animation: none !important; }
    .wwd .sv-build { opacity: 1; }
}