webverse.css

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

    .skip-link {
      position: absolute; top: -100%; left: 1rem;
      background: var(--teal); color: var(--bg);
      padding: .75rem 1.5rem; border-radius: 0 0 8px 8px;
      font-family: var(--ff-body); font-size: .9rem; font-weight: 500;
      z-index: 10000; text-decoration: none;
      transition: top .2s;
    }
    .skip-link:focus { top: 0; }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible,
    [tabindex]:focus-visible {
      outline: 2px solid var(--teal);
      outline-offset: 2px;
    }

    :root {
      --bg:      #06080f;
      --white:   #ede9e3;
      --g900:    #0c0e18;
      --g800:    #12151f;
      --g700:    #1e2130;
      --g600:    #2d3245;
      --g500:    #4a5068;
      --g400:    #6b738f;
      --g300:    #8e97b0;
      --g200:    #b4bccf;
      --g100:    #d4d8e4;

      --teal:    #2dd4bf;
      --indigo:  #818cf8;
      --violet:  #a78bfa;
      --ff-head: 'Cormorant Garamond', Georgia, serif;
      --ff-body: 'Jost', system-ui, sans-serif;
      --ease:    cubic-bezier(0.16, 1, 0.3, 1);

      --overlay-rgb: 255, 255, 255;
      --scrim-rgb:   6, 8, 15;
      --surface-rgb: 14, 17, 28;
      --card-rgb:    18, 21, 31;
      --deep-rgb:    10, 13, 24;
      --shadow-rgb:  0, 0, 0;
      --focus-rgb:   22, 28, 48;
      --hover-rgb:   30, 33, 48;

      --teal-rgb:    45, 212, 191;
      --indigo-rgb:  129, 140, 248;
      --violet-rgb:  167, 139, 250;
      --green-rgb:   74, 222, 128;

      --ambient-opacity: 1;
      --selection-bg: var(--teal);
      --selection-fg: #06080f;
    }

    [data-theme="light"] {
      --bg:      #f5f2ed;
      --white:   #1a1a2e;
      --g900:    #eae6e0;
      --g800:    #e0dcd5;
      --g700:    #cec9c1;
      --g600:    #b3ada4;
      --g500:    #8a8378;
      --g400:    #6b645c;
      --g300:    #4d4843;
      --g200:    #3a3530;
      --g100:    #2a2520;

      --teal:    #0d9488;
      --indigo:  #6366f1;
      --violet:  #7c3aed;

      --overlay-rgb: 0, 0, 0;
      --scrim-rgb:   245, 242, 237;
      --surface-rgb: 234, 230, 224;
      --card-rgb:    224, 220, 213;
      --deep-rgb:    214, 210, 204;
      --shadow-rgb:  0, 0, 0;
      --focus-rgb:   224, 228, 234;
      --hover-rgb:   210, 214, 220;

      --teal-rgb:    13, 148, 136;
      --indigo-rgb:  99, 102, 241;
      --violet-rgb:  124, 58, 237;
      --green-rgb:   22, 163, 74;

      --ambient-opacity: 0.25;
      --selection-bg: var(--teal);
      --selection-fg: #fff;
    }
    html { font-size: 18px; }
    body {
      background: var(--bg);
      color: var(--white);
      font-family: var(--ff-body);
      font-weight: 300;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(var(--teal-rgb), .018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--teal-rgb), .018) 1px, transparent 1px);
      background-size: 60px 60px;
      mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
      -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 20%, transparent 75%);
    }
    ::selection { background: var(--selection-bg); color: var(--selection-fg); }
    a { color: inherit; text-decoration: none; }

    ::-webkit-scrollbar { width: 2px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--g600); }

    #smooth-wrapper {
      position: relative;
      width: 100%;
    }

    #loader {
      position: fixed; inset: 0; z-index: 9000;
      background: rgba(var(--scrim-rgb), 0.25);
      backdrop-filter: blur(24px) saturate(160%);
      -webkit-backdrop-filter: blur(24px) saturate(160%);
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      overflow: hidden;
      opacity: 1;
      transition: opacity .75s ease, visibility .75s;
    }
    #loader.hidden {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    .ld-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(88px);
      opacity: 0;
      animation: ldBlobIn 1.4s ease forwards;
    }
    .ld-blob-1 {
      width: 460px; height: 460px;
      background: radial-gradient(circle, rgba(45,212,191,.20) 0%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-62%, -56%);
      animation-delay: .05s;
    }
    .ld-blob-2 {
      width: 400px; height: 400px;
      background: radial-gradient(circle, rgba(129,140,248,.16) 0%, transparent 70%);
      top: 50%; left: 50%;
      transform: translate(-28%, -42%);
      animation-delay: .18s;
    }
    @keyframes ldBlobIn { to { opacity: 1; } }

    .ld-wordmark {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .5rem;
      position: relative;
    }

    .ld-sig-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .ld-sig-reveal {
      clip-path: inset(0 100% 0 0);
      animation: ldReveal 1.3s cubic-bezier(.25,.46,.45,.94) forwards .1s;
    }
    @keyframes ldReveal {
      to { clip-path: inset(0 0% 0 0); }
    }

    .ld-sig-svg {
      width: clamp(260px, 48vw, 480px);
      height: auto;
      overflow: visible;
    }

    .ld-sig-text {
      fill: url(#ld-sig-grad);
    }

    :root {
      --glass-bg:     rgba(var(--surface-rgb), 0.45);
      --glass-border: rgba(var(--overlay-rgb), 0.10);
      --glass-blur:   saturate(180%) blur(22px);
      --glass-radius: 18px;
      --glass-radius-sm: 12px;
      --glass-radius-pill: 999px;
    }

    #navbar {
      position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
      padding: 1.25rem 5rem;
      display: flex; align-items: center; justify-content: space-between;
      transition: background .45s, padding .45s, border-color .45s, backdrop-filter .45s;
      border-bottom: 1px solid transparent;
    }
    #navbar.scrolled {
      background: rgba(var(--scrim-rgb), 0.60);
      backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
      padding: 1rem 5rem;
      border-bottom-color: var(--glass-border);
      box-shadow: 0 1px 0 rgba(var(--overlay-rgb),0.04), 0 8px 32px rgba(var(--shadow-rgb),0.35);
    }
    .nav-logo {
      font-family: var(--ff-head); font-size: 1.5rem; font-weight: 700; letter-spacing: .2em;
      background: linear-gradient(135deg, var(--white) 30%, var(--teal) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .nav-links { display: flex; gap: 2.75rem; align-items: center; }
    .nav-links a {
      font-size: .92rem; letter-spacing: .14em; text-transform: uppercase;
      color: var(--g300); transition: color .25s; font-weight: 400;
    }
    .nav-links a:hover { color: var(--white); }
    .nav-links a.nav-active { color: var(--teal); }

    .nav-cta {
      font-size: .88rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500;
      padding: .62rem 1.6rem;
      border: 1px solid rgba(var(--teal-rgb),.28);
      border-radius: var(--glass-radius-pill);
      background: rgba(var(--teal-rgb),0.08);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      color: var(--teal);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.08), 0 4px 16px rgba(var(--teal-rgb),0.08);
      transition: background .25s, border-color .25s, color .25s, box-shadow .25s;
    }
    .nav-cta:hover {
      background: rgba(var(--teal-rgb),0.22);
      border-color: rgba(var(--teal-rgb),.55);
      color: #fff;
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.14), 0 6px 28px rgba(var(--teal-rgb),0.20);
    }

    .nav-hamburger {
      display: none; flex-direction: column; justify-content: center;
      gap: 6px; background: none; border: none; cursor: pointer;
      width: 44px; height: 44px; padding: 6px;
      position: relative; z-index: 2100;
      border-radius: var(--glass-radius-sm);
      background: rgba(var(--overlay-rgb),0.04);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      transition: background .25s, border-color .25s;
    }
    .nav-hamburger:hover { background: rgba(var(--overlay-rgb),0.08); border-color: rgba(var(--overlay-rgb),0.18); }
    .nav-hamburger span {
      display: block; width: 22px; height: 1.5px; background: var(--white);
      transform-origin: center; margin: 0 auto;
      transition: transform .38s var(--ease), opacity .25s;
    }
    .nav-hamburger.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    .nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

    #mobile-nav {
      position: fixed; inset: 0; z-index: 2050;
      background: rgba(var(--scrim-rgb), 0.82);
      backdrop-filter: saturate(160%) blur(40px);
      -webkit-backdrop-filter: saturate(160%) blur(40px);
      display: flex; flex-direction: column;
      padding: 0 0 2rem;
      transform: translateX(100%);
      transition: transform .55s var(--ease);
      overflow: hidden;
    }
    #mobile-nav.open { transform: translateX(0); }

    .mn-topbar {
      display: flex; align-items: center; justify-content: space-between;
      padding: 1.2rem 2rem 1rem;
      border-bottom: 1px solid var(--glass-border);
      flex-shrink: 0;
    }
    .mn-logo {
      font-family: var(--ff-head); font-size: 1.4rem; font-weight: 700; letter-spacing: .2em;
      background: linear-gradient(135deg, var(--white) 30%, var(--teal) 100%);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .mn-close {
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(var(--overlay-rgb),0.07);
      border: 1px solid var(--glass-border);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; color: var(--white); font-size: 1.3rem; line-height: 1;
      transition: background .25s, border-color .25s;
      flex-shrink: 0;
    }
    .mn-close:hover { background: rgba(var(--overlay-rgb),0.14); border-color: rgba(var(--overlay-rgb),0.25); }

    .mn-scroll {
      flex: 1; overflow-y: auto; overflow-x: hidden;
      padding: 1.5rem 2rem 0;
      -webkit-overflow-scrolling: touch;
    }
    .mn-scroll::-webkit-scrollbar { width: 2px; }
    .mn-scroll::-webkit-scrollbar-thumb { background: var(--g600); border-radius: 2px; }

    .mn-links { display: flex; flex-direction: column; }
    .mn-links a {
      font-family: var(--ff-head); font-size: 2.6rem; font-weight: 600;
      letter-spacing: .02em; color: var(--white);
      border-bottom: 1px solid var(--g700);
      padding: .85rem 0;
      display: flex; align-items: center; justify-content: space-between;
      transition: color .25s;
    }
    .mn-links a:hover, .mn-links a.mn-active { color: var(--teal); }
    .mn-links a.mn-active .mn-arrow { opacity: .7; color: var(--teal); }
    .mn-arrow { font-size: 1.4rem; opacity: .3; transition: transform .3s var(--ease), opacity .3s; }
    .mn-links a:hover .mn-arrow { transform: translate(6px,-6px); opacity: .8; color: var(--teal); }

    .mn-cta-wrap { padding: 1.5rem 0 0; }
    .mn-cta {
      display: block; text-align: center;
      font-family: var(--ff-body); font-size: .9rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 1rem 2rem;
      border-radius: var(--glass-radius-pill);
      background: rgba(var(--teal-rgb),0.12);
      border: 1px solid rgba(var(--teal-rgb),.35);
      color: var(--teal);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.10), 0 6px 24px rgba(var(--teal-rgb),0.12);
      transition: background .25s, box-shadow .25s;
    }
    .mn-cta:hover { background: rgba(var(--teal-rgb),0.22); box-shadow: 0 8px 32px rgba(var(--teal-rgb),0.22); }

    .mn-foot { padding: 1.5rem 0 0; border-top: 1px solid var(--g700); margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
    .mn-foot p { font-size: .9rem; color: var(--g400); }
    .mn-foot a { font-size: 1rem; color: var(--teal); }

    #ambient {
      position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    }
    .pool {
      position: absolute; border-radius: 50%;
      opacity: 0;

      will-change: transform, opacity;
      animation: poolDrift var(--dur, 20s) ease-in-out infinite var(--delay, 0s);
    }
    .pool-1 {
      width: 900px; height: 900px;
      background: radial-gradient(circle, rgba(45,212,191,0.45) 0%, rgba(45,212,191,0.08) 35%, transparent 60%);
      top: -10%; left: -5%;
      --dur: 22s; --delay: 0s;
      animation: pool1Drift 22s ease-in-out infinite;
    }
    .pool-2 {
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(79,70,229,0.40) 0%, rgba(79,70,229,0.06) 35%, transparent 60%);
      top: 10%; right: -10%;
      animation: pool2Drift 28s ease-in-out infinite;
    }
    .pool-3 {
      width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(167,139,250,0.38) 0%, rgba(167,139,250,0.06) 35%, transparent 60%);
      bottom: 20%; left: 30%;
      animation: pool3Drift 18s ease-in-out infinite;
    }
    .pool-4 {
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(14,116,144,0.40) 0%, rgba(14,116,144,0.06) 35%, transparent 60%);
      bottom: -5%; right: 5%;
      animation: pool4Drift 24s ease-in-out infinite;
    }
    @keyframes pool1Drift {
      0%   { opacity: .10; transform: translate(0, 0) scale(1); }
      33%  { opacity: .14; transform: translate(80px, 60px) scale(1.1); }
      66%  { opacity: .08; transform: translate(-40px, 120px) scale(.92); }
      100% { opacity: .10; transform: translate(0, 0) scale(1); }
    }
    @keyframes pool2Drift {
      0%   { opacity: .08; transform: translate(0, 0) scale(1); }
      25%  { opacity: .13; transform: translate(-100px, 80px) scale(1.05); }
      50%  { opacity: .10; transform: translate(-60px, 160px) scale(.95); }
      75%  { opacity: .14; transform: translate(-120px, 40px) scale(1.08); }
      100% { opacity: .08; transform: translate(0, 0) scale(1); }
    }
    @keyframes pool3Drift {
      0%   { opacity: .07; transform: translate(0, 0) scale(1); }
      40%  { opacity: .12; transform: translate(-80px, -60px) scale(1.12); }
      70%  { opacity: .09; transform: translate(60px, -30px) scale(.9); }
      100% { opacity: .07; transform: translate(0, 0) scale(1); }
    }
    @keyframes pool4Drift {
      0%   { opacity: .09; transform: translate(0, 0) scale(1); }
      35%  { opacity: .13; transform: translate(-70px, -80px) scale(1.06); }
      65%  { opacity: .07; transform: translate(40px, -120px) scale(.94); }
      100% { opacity: .09; transform: translate(0, 0) scale(1); }
    }

    #ambient::after {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(var(--scrim-rgb),.7) 100%);
    }

    .hero-ticker {
      width: 100%;
      overflow: hidden;
      border-top: 1px solid rgba(var(--overlay-rgb),0.07);
      border-bottom: 1px solid rgba(var(--overlay-rgb),0.07);
      padding: 1.1rem 0;
      background: rgba(var(--surface-rgb),0.40);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      position: relative;
      user-select: none;
    }

    .hero-ticker::before,
    .hero-ticker::after {
      content: '';
      position: absolute; top: 0; bottom: 0; width: 80px; z-index: 1;
      pointer-events: none;
    }
    .hero-ticker::before {
      left: 0;
      background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
    }
    .hero-ticker::after {
      right: 0;
      background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
    }
    .ticker-track {
      display: flex; align-items: center;
      width: max-content;
      animation: tickerScroll 32s linear infinite;
      gap: 0;
    }
    .ticker-track:hover { animation-play-state: paused; }
    @keyframes tickerScroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 1.5rem;
      padding: 0 1.5rem;
      font-family: var(--ff-body); font-size: .9rem;
      letter-spacing: .18em; text-transform: uppercase;
      color: var(--g400); font-weight: 400;
      white-space: nowrap;
      transition: color .25s;
    }
    .ticker-item:hover { color: var(--g200); }

    .ticker-dot {
      display: inline-block; width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--teal);
      opacity: 0.45;
      flex-shrink: 0;
    }

    .ticker-item.accent {
      color: var(--teal);
      opacity: 0.85;
    }

    .sec-label {
      font-size: .88rem; letter-spacing: .26em; text-transform: uppercase;
      color: var(--teal); margin-bottom: 1.4rem;
      display: flex; align-items: center; gap: .9rem; font-weight: 400;
    }
    .sec-label::before {
      content: '';
      display: block; flex-shrink: 0;
      width: 28px; height: 1px;
      background: var(--teal);
      opacity: 0.6;
    }

    .reveal {
      opacity: 0; transform: translateY(50px);
      transition: opacity 1s var(--ease), transform 1s var(--ease);
    }
    .reveal.visible { opacity: 1; transform: none; }
    .d1 { transition-delay: .12s; } .d2 { transition-delay: .24s; }
    .d3 { transition-delay: .36s; } .d4 { transition-delay: .48s; }
    .d5 { transition-delay: .60s; }

    #hero {
      min-height: 100vh;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 6rem 5rem 9rem; position: relative; overflow: hidden;
    }
    .hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
    .hero-grid {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(rgba(var(--overlay-rgb),.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--overlay-rgb),.025) 1px, transparent 1px);
      background-size: 90px 90px;
      mask-image: radial-gradient(ellipse 85% 55% at 50% 45%, black 30%, transparent 100%);
      z-index: 1;
    }

    .hero-mq-wrap { position: absolute; bottom: 0; left: 0; right: 0; overflow: hidden; pointer-events: none; z-index: 2; }
    .hero-mq {
      font-family: var(--ff-head); font-size: 20vw; font-weight: 700;
      color: rgba(var(--overlay-rgb), 0.07);
      -webkit-text-fill-color: rgba(var(--overlay-rgb), 0.07);
      -webkit-text-stroke: 1px rgba(var(--overlay-rgb),.13);
      white-space: nowrap; line-height: 1; display: flex;
    }
    .hero-mq-inner { display: inline-block; animation: mqTick 22s linear infinite; flex-shrink: 0; }
    @keyframes mqTick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    @media (max-width: 900px) {
      .hero-mq { font-size: 28vw; color: rgba(var(--overlay-rgb),.09); -webkit-text-fill-color: rgba(var(--overlay-rgb),.09); -webkit-text-stroke: 1px rgba(var(--overlay-rgb),.16); }
    }

    .hero-content { position: relative; z-index: 3; max-width: 1050px; }
    .hero-eye {
      font-size: .92rem; letter-spacing: .3em; text-transform: uppercase; color: var(--teal);
      margin-bottom: 2.75rem; display: flex; align-items: center; gap: 1rem; font-weight: 400;
      opacity: 0; animation: fadeUp .9s var(--ease) forwards 1.7s;
    }
    .hero-eye::before { content: ''; width: 32px; height: 1px; background: var(--teal); opacity: .65; display: block; flex-shrink: 0; }
    h1.hero-hl {
      font-family: var(--ff-head);
      font-size: clamp(3.8rem, 9.5vw, 9.5rem);
      font-weight: 600; line-height: .93; letter-spacing: -.01em;
      margin-bottom: 3.25rem;
      opacity: 0; animation: fadeUp 1.1s var(--ease) forwards 1.9s;
    }
    h1.hero-hl em {
      font-style: italic;
      color: var(--teal);
      -webkit-text-fill-color: var(--teal);
    }
    .hero-sub {
      font-size: 1.28rem; line-height: 1.8; color: var(--g300);
      max-width: 520px; margin-bottom: 4.25rem; font-weight: 300;
      opacity: 0; animation: fadeUp .9s var(--ease) forwards 2.1s;
    }
    .hero-actions {
      display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
      opacity: 0; animation: fadeUp .9s var(--ease) forwards 2.3s;
    }
    .hero-stats {
      position: absolute; right: 5rem; top: 50%; transform: translateY(-50%);
      display: flex; flex-direction: column; gap: 2.75rem; z-index: 3;
      opacity: 0; animation: fadeIn .9s forwards 2.6s;
    }
    .hs-num {
      font-family: var(--ff-head); font-size: 2.4rem; font-weight: 600; line-height: 1;
      background: linear-gradient(135deg, var(--white), var(--teal));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hs-lbl { font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g400); margin-top: .3rem; font-weight: 400; }
    .hero-scroll {
      position: absolute; right: 5rem; bottom: 8rem; z-index: 3;
      display: flex; flex-direction: column; align-items: center; gap: .9rem;
      opacity: 0; animation: fadeIn 1s forwards 3s;
    }
    .hs-line { width: 1px; height: 72px; background: var(--g700); position: relative; overflow: hidden; }
    .hs-line::after {
      content: ''; position: absolute; top: 0; left: 0; right: 0; height: 35%;
      background: rgb(45,212,191); animation: scrollDrop 2.2s ease-in-out infinite;
    }
    @keyframes scrollDrop { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
    .hs-txt { font-size: .8rem; letter-spacing: .22em; text-transform: uppercase; color: var(--g500); writing-mode: vertical-rl; }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

    .btn-primary {
      display: inline-flex; align-items: center; gap: .85rem;
      background: rgba(var(--teal-rgb),0.15);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      color: var(--teal);
      font-family: var(--ff-body); font-size: .95rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 1.15rem 2.3rem;
      border: 1px solid rgba(var(--teal-rgb),.35);
      border-radius: var(--glass-radius-pill);
      box-shadow:
        inset 0 1px 0 rgba(var(--overlay-rgb),0.14),
        inset 0 -1px 0 rgba(var(--shadow-rgb),0.15),
        0 4px 24px rgba(var(--teal-rgb),0.12),
        0 1px 3px rgba(var(--shadow-rgb),0.3);
      position: relative; overflow: hidden;
      transition: transform .35s var(--ease), box-shadow .35s, background .25s, color .25s;
    }
    .btn-primary::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(var(--overlay-rgb),0.07) 0%, transparent 60%);
      border-radius: inherit; pointer-events: none;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      background: rgba(var(--teal-rgb),0.25);
      color: #fff;
      border-color: rgba(var(--teal-rgb),.65);
      box-shadow:
        inset 0 1px 0 rgba(var(--overlay-rgb),0.18),
        0 8px 40px rgba(var(--teal-rgb),0.25),
        0 2px 8px rgba(var(--shadow-rgb),0.3);
    }
    .btn-icon { display: flex; align-items: center; }
    .btn-icon svg { width: 15px; height: 15px; }
    .btn-ghost {
      font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--g300);
      display: inline-flex; align-items: center; gap: .65rem;
      padding: .75rem 1.4rem;
      border: 1px solid rgba(var(--overlay-rgb),0.10);
      border-radius: var(--glass-radius-pill);
      background: rgba(var(--overlay-rgb),0.04);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.07);
      font-weight: 400;
      transition: color .25s, gap .3s var(--ease), background .25s, border-color .25s, box-shadow .25s;
    }
    .btn-ghost:hover {
      color: var(--teal); gap: 1.1rem;
      background: rgba(var(--teal-rgb),0.07);
      border-color: rgba(var(--teal-rgb),.30);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.10), 0 4px 16px rgba(var(--teal-rgb),0.10);
    }

    #services {
      position: relative;
      min-height: 100vh;

    }

    .svc-frame {
      position: sticky;
      top: 0; left: 0;
      width: 100%;
      overflow: hidden;
      border-top: 1px solid var(--g700);
      background-image: radial-gradient(circle, rgba(var(--teal-rgb),.05) 1px, transparent 1px);
      background-size: 38px 38px;
    }

    .svc-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: clamp(22vh, 26vh, 30vh);
      padding: clamp(1.8rem, 2.5vw, 3rem) 5rem 0;
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
      gap: clamp(1.5rem, 2.5vw, 3rem);
      z-index: 4;
    }

    .svc-hl-line1, .svc-hl-line2 {
      display: block;
      height: 1.15em;
      overflow: visible;
      white-space: nowrap;
    }
    h2.svc-hl {
      font-family: var(--ff-head); font-size: clamp(1.9rem, 3.2vw, 3.4rem);
      font-weight: 600; line-height: 1.15; letter-spacing: .01em;
      position: relative;
      padding-bottom: clamp(0.8rem, 1.2vw, 1.5rem);
    }

    .svc-desc {
      font-size: clamp(0.92rem, 1vw, 1.1rem); line-height: 1.75; color: var(--g300);
      max-width: 340px; font-weight: 300;
      padding-bottom: clamp(0.8rem, 1.2vw, 1.5rem);
      opacity: 0;
      transform: translateY(14px);
      transition: opacity .6s var(--ease), transform .6s var(--ease);
    }
    .svc-desc.typed { opacity: 1; transform: none; }

    .svc-rail-wrap {
      position: absolute;
      top: clamp(22vh, 26vh, 30vh); bottom: 0;
      left: 0; right: 0;
      overflow: hidden;
      z-index: 1;
    }

    .svc-rail {
      display: flex;
      align-items: center;
      height: 100%;
      padding: clamp(1rem, 1.8vh, 2rem) 5rem;
      gap: clamp(1.5rem, 2vw, 2.5rem);
      width: max-content;
      will-change: transform;
    }

    .svc-card {
      flex: none;
      width: clamp(440px, 40vw, 640px);
      height: clamp(280px, 38vh, 420px);
      padding: clamp(1.2rem, 1.6vh, 1.75rem) clamp(1.5rem, 2vw, 2.5rem) clamp(1.2rem, 1.6vh, 2rem);
      border: 1px solid rgba(var(--overlay-rgb),0.07);
      border-radius: var(--glass-radius);
      display: flex; flex-direction: column; gap: 1.1rem;
      position: relative; overflow: hidden;
      transition: background .4s, box-shadow .4s, border-color .4s;
      background: rgba(var(--deep-rgb),0.70);
      backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    }
    .svc-card:hover {
      background: rgba(var(--card-rgb),0.88);
      border-color: rgba(var(--overlay-rgb),0.12);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.07), 0 0 60px rgba(var(--shadow-rgb),0.4);
    }

    .svc-card::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(var(--overlay-rgb),0.03) 0%, transparent 55%);
      pointer-events: none; border-radius: inherit;
    }

    .svc-num { display: none; }
    .svc-icon {
      width: clamp(38px, 4vh, 50px); height: clamp(38px, 4vh, 50px);
      border: 1px solid rgba(var(--overlay-rgb),0.10); border-radius: var(--glass-radius-sm);
      display: flex; align-items: center; justify-content: center;
      background: rgba(var(--overlay-rgb),0.04);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      transition: border-color .3s, background .3s;
      flex-shrink: 0;
    }
    .svc-card:hover .svc-icon { border-color: rgba(var(--teal-rgb),.4); background: rgba(var(--teal-rgb),.08); }
    .svc-icon svg { width: 22px; height: 22px; stroke: var(--g400); transition: stroke .3s; }
    .svc-card:hover .svc-icon svg { stroke: var(--teal); }
    h3.svc-name {
      font-family: var(--ff-head); font-size: clamp(1.4rem, 2.2vw, 2.2rem);
      font-weight: 600; line-height: 1.1;
    }
    .svc-body { font-size: clamp(0.9rem, 1vw, 1.05rem); line-height: 1.7; color: var(--g300); flex: 1; font-weight: 300; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; }
    .svc-link {
      font-size: .86rem; letter-spacing: .14em; text-transform: uppercase; color: var(--g500);
      display: flex; align-items: center; gap: .5rem;
      transition: color .25s, gap .3s var(--ease);
      margin-top: auto;
    }
    .svc-card:hover .svc-link { color: var(--teal); gap: .95rem; }
    .svc-link svg { width: 12px; height: 12px; }

    .svc-card-glow {
      position: absolute; inset: 0; border-radius: inherit;
      pointer-events: none; z-index: 0; opacity: 0; transition: opacity .45s;
      background: radial-gradient(
        400px circle at var(--mx, 50%) var(--my, 50%),
        rgba(var(--teal-rgb),.10) 0%, rgba(var(--indigo-rgb),.05) 45%, transparent 70%
      );
    }
    .svc-card:hover .svc-card-glow { opacity: 1; }
    .svc-card > *:not(.svc-card-glow) { position: relative; z-index: 1; }

    .svc-card.is-active::before {
      content: ''; position: absolute; top: 15%; left: 0; bottom: 15%;
      width: 2px;
      background: linear-gradient(180deg, transparent, var(--teal), transparent);
      border-radius: 0 2px 2px 0;
      opacity: 0.6;
    }

    .svc-progress-bar {
      position: absolute; bottom: 0; left: 0; right: 0;
      height: 1px; background: var(--g700); z-index: 3;
    }
    .svc-progress-fill {
      height: 100%; width: 0%;
      background: linear-gradient(90deg, var(--teal), var(--indigo));
    }

    #philosophy {

      position: relative;
      border-top: 1px solid var(--g700);
    }

    #phil-frame {
      position: sticky;
      top: 0;
      left: 0; right: 0;
      overflow: hidden;
      box-sizing: border-box;
    }

    #phil-frame::before {
      content: 'Method';
      position: absolute;
      top: 12vh; right: -2vw;
      font-family: var(--ff-head);
      font-size: clamp(8rem, 20vw, 20rem);
      font-weight: 700; font-style: italic;
      color: rgba(var(--overlay-rgb),0.03);
      -webkit-text-stroke: 1px rgba(var(--overlay-rgb),0.18);
      pointer-events: none; user-select: none;
      z-index: 0; line-height: 1;
      transform: translateY(var(--wm-y, 0));
      transition: transform .1s linear;
    }

    .phil-wrap {
      display: flex;
      height: 100%;
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
    }

    .phil-left {
      flex: 0 0 44%;
      position: relative;
      height: 100%;
      overflow: hidden;
      display: flex;
      align-items: center;
      border-right: 1px solid rgba(var(--overlay-rgb),0.06);
    }

    .phil-phase {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 clamp(2.5rem, 3.5vw, 4rem) 0 clamp(3rem, 4vw, 5rem);

      opacity: 0;
      transform: translateX(-60px);
      transition: opacity .65s var(--ease), transform .65s var(--ease);
      pointer-events: none;
      will-change: transform, opacity;
    }

    .phil-phase.phase-active {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }

    .phil-phase.phase-exit {
      opacity: 0;
      transform: translateX(60px);
      transition: opacity .45s var(--ease), transform .45s var(--ease);
    }

    .phil-phase-label {
      font-size: .6rem;
      letter-spacing: .32em;
      text-transform: uppercase;
      color: var(--teal);
      opacity: .7;
      margin-bottom: clamp(0.7rem, 1vh, 1.2rem);
      font-family: var(--ff-body);
    }

    .phil-phase-rule {
      width: 0px; height: 1px;
      background: linear-gradient(90deg, var(--teal), transparent);
      margin-bottom: clamp(1.2rem, 1.8vh, 2.2rem);
      transition: width .55s var(--ease) .05s;
    }
    .phil-phase.phase-active .phil-phase-rule { width: 40px; }

    .phil-phase-hl {
      font-family: var(--ff-head);
      font-size: clamp(2.2rem, 3.5vw, 3.4rem);
      font-weight: 600;
      line-height: 1.05;
      color: var(--g100);
      margin: 0 0 clamp(1rem, 1.5vh, 1.8rem);
      letter-spacing: .01em;
    }
    .phil-phase-hl em { font-style: italic; color: var(--teal); }

    .phil-phase-body {
      font-family: var(--ff-head);
      font-size: clamp(0.95rem, 1.3vw, 1.35rem);
      font-weight: 400;
      line-height: 1.55;
      color: var(--g500);
    }
    .phil-phase-body p { margin: 0; }
    .phil-phase-body p + p { margin-top: .8rem; }
    .phil-phase-body .accent-line { color: var(--g200); font-style: italic; }

    .phil-stats-col {
      display: flex;
      gap: clamp(1.5rem, 2.5vw, 3rem);
      margin-top: clamp(1.5rem, 2.5vh, 3rem);
      padding-top: clamp(1.2rem, 2vh, 2.5rem);
      border-top: 1px solid rgba(var(--overlay-rgb),0.08);
      opacity: 1;
      transition: opacity .6s var(--ease);
    }
    .phil-stats-col.fade-out { opacity: 0; pointer-events: none; }
    .phil-stat-num {
      font-family: var(--ff-head);
      font-size: clamp(1.8rem, 2.2vw, 2.4rem); font-weight: 700; color: var(--teal); line-height: 1;
    }
    .phil-stat-label {
      font-size: .82rem; letter-spacing: .18em; text-transform: uppercase;
      color: var(--g500); margin-top: .3rem;
    }

    .phil-progress-track {
      position: absolute;
      left: 44%;
      top: 10%; bottom: 10%;
      width: 1px;
      background: rgba(var(--overlay-rgb),0.07);
      z-index: 3;
    }
    .phil-progress-fill {
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 0%;
      background: linear-gradient(180deg, var(--teal), var(--indigo));
      transition: height .12s linear;
      box-shadow: 0 0 8px rgba(var(--teal-rgb),.5);
    }
    .phil-progress-fill::after {
      content: '';
      position: absolute;
      bottom: -4px; left: 50%;
      transform: translateX(-50%);
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--teal);
      box-shadow: 0 0 10px rgba(var(--teal-rgb),.8);
    }

    .phil-dots { display: none; }

    .phil-right {
      flex: 1;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      padding: 0 clamp(2.5rem, 3.5vw, 4rem);
      overflow: hidden;
    }

    .phil-card {
      position: absolute;
      left: clamp(2.5rem, 3.5vw, 4rem); right: clamp(2.5rem, 3.5vw, 4rem);
      opacity: 0;
      transform: translateY(80px);
      transition: opacity .75s var(--ease), transform .75s var(--ease);
      pointer-events: none;
      will-change: transform, opacity;
    }
    .phil-card.card-active {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }
    .phil-card.card-exit {
      opacity: 0;
      transform: translateY(-60px);
      transition: opacity .5s var(--ease), transform .5s var(--ease);
    }

    .phil-card-inner {
      width: 100%;
      background: rgba(var(--deep-rgb),0.65);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(var(--overlay-rgb),0.07);
      border-radius: var(--glass-radius);
      padding: clamp(2rem, 3vh, 3.5rem) clamp(2.5rem, 3.5vw, 4rem);
      position: relative;
      overflow: hidden;
    }

    .phil-card-inner::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      transform: scaleX(0); transform-origin: left;
      transition: transform .8s var(--ease) .2s;
    }
    .phil-card.card-active .phil-card-inner::before { transform: scaleX(1); }
    .phil-card:nth-child(1) .phil-card-inner::before { background: linear-gradient(90deg, var(--teal), transparent); }
    .phil-card:nth-child(2) .phil-card-inner::before { background: linear-gradient(90deg, var(--indigo), transparent); }
    .phil-card:nth-child(3) .phil-card-inner::before { background: linear-gradient(90deg, #a78bfa, transparent); }

    .phil-card-bar {
      position: absolute; bottom: 0; left: 0;
      height: 1px; width: 0%;
      transition: width 1s var(--ease) .4s;
    }
    .phil-card.card-active .phil-card-bar { width: 100%; }
    .phil-card:nth-child(1) .phil-card-bar { background: linear-gradient(90deg, var(--teal), var(--indigo), transparent); }
    .phil-card:nth-child(2) .phil-card-bar { background: linear-gradient(90deg, var(--indigo), #a78bfa, transparent); }
    .phil-card:nth-child(3) .phil-card-bar { background: linear-gradient(90deg, #a78bfa, var(--teal), transparent); }

    .phil-card-glow {
      position: absolute; inset: 0; pointer-events: none;
      border-radius: inherit;
      background: radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(var(--teal-rgb),.07), transparent 50%);
      opacity: 0; transition: opacity .4s;
    }
    .phil-card-inner:hover .phil-card-glow { opacity: 1; }

    .ps-chapter {
      font-size: .75rem; letter-spacing: .25em; text-transform: uppercase;
      color: var(--teal); opacity: .7; margin-bottom: clamp(1rem, 1.5vh, 1.75rem);
      display: flex; align-items: center; gap: .75rem;
    }
    .ps-chapter::after {
      content: ''; flex: 1; height: 1px;
      background: linear-gradient(90deg, rgba(var(--teal-rgb),.3), transparent);
    }

    h4.ps-title {
      font-family: var(--ff-head);
      font-size: clamp(1.6rem, 2.5vw, 2.6rem);
      font-weight: 600; line-height: 1.05;
      margin-bottom: clamp(0.8rem, 1.2vh, 1.5rem);
      opacity: 0; transform: translateY(16px);
      transition: opacity .65s var(--ease) .2s, transform .65s var(--ease) .2s;
    }
    .phil-card.card-active h4.ps-title { opacity: 1; transform: none; }
    .ps-body {
      font-size: clamp(0.95rem, 1vw, 1.05rem); line-height: 1.75; color: var(--g300);
      font-weight: 300; max-width: 540px;
      opacity: 0; transform: translateY(10px);
      transition: opacity .65s var(--ease) .35s, transform .65s var(--ease) .35s;
    }
    .phil-card.card-active .ps-body { opacity: 1; transform: none; }

    #work { padding: 13rem 5rem; border-top: 1px solid var(--g700); }
    .work-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5.5rem; flex-wrap: wrap; gap: 3rem; }
    h2.work-hl { font-family: var(--ff-head); font-size: clamp(2.8rem, 5.5vw, 5rem); font-weight: 600; letter-spacing: .01em; }
    .work-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--g700); }
    .work-item { position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--g900); cursor: pointer; }
    .wi-bg { position: absolute; inset: 0; transition: transform .85s var(--ease); }
    .work-item:hover .wi-bg { transform: scale(1.05); }
    .wi-pat { position: absolute; inset: 0; }
    .wp-dots { background: radial-gradient(circle, rgba(var(--teal-rgb),.12) 1px, transparent 1px) 0 0/28px 28px; }
    .wp-lines { background: repeating-linear-gradient(45deg, transparent, transparent 22px, rgba(var(--indigo-rgb),.07) 22px, rgba(var(--indigo-rgb),.07) 23px); }
    .wp-grid {
      background:
        linear-gradient(rgba(var(--violet-rgb),.06) 1px, transparent 1px) 0 0/44px 44px,
        linear-gradient(90deg, rgba(var(--violet-rgb),.06) 1px, transparent 1px) 0 0/44px 44px;
    }
    .wp-wave { background: repeating-linear-gradient(0deg, transparent, transparent 12px, rgba(var(--teal-rgb),.04) 12px, rgba(var(--teal-rgb),.04) 13px); }
    .wi-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--scrim-rgb),.94) 0%, rgba(var(--scrim-rgb),.3) 50%, transparent 100%); z-index: 1; }
    .wi-inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 2.75rem; z-index: 2; }
    .wi-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .9rem; }
    .wi-tag { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); border: 1px solid rgba(var(--teal-rgb),.25); padding: .22rem .65rem; border-radius: 1px; opacity: .8; }
    h3.wi-title { font-family: var(--ff-head); font-size: 1.75rem; font-weight: 600; line-height: 1.1; }
    .wi-year { font-size: .92rem; color: var(--g500); margin-top: .4rem; }
    .wi-reveal { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .35s; }
    .work-item:hover .wi-reveal { opacity: 1; }
    .wi-btn {
      background: rgba(var(--teal-rgb),0.15);
      backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(var(--teal-rgb),.4);
      color: var(--teal); font-size: .9rem; letter-spacing: .12em;
      text-transform: uppercase; font-weight: 600; padding: .9rem 1.85rem;
      border-radius: var(--glass-radius-pill);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.12), 0 4px 20px rgba(var(--teal-rgb),0.15);
      transform: translateY(14px); transition: transform .42s var(--ease), background .25s;
    }
    .work-item:hover .wi-btn { transform: translateY(0); background: rgba(var(--teal-rgb),0.25); }

    #faq { padding: 13rem 5rem; border-top: 1px solid var(--g700); }
    .faq-inner { max-width: 820px; margin: 0 auto; }
    h2.faq-hl { font-family: var(--ff-head); font-size: clamp(2.4rem, 4.5vw, 4.2rem); font-weight: 600; letter-spacing: .01em; line-height: 1.05; margin-bottom: 5rem; }
    .faq-list { display: flex; flex-direction: column; }
    .faq-item { border-bottom: 1px solid var(--g700); }
    .faq-q {
      width: 100%; background: none; border: none; text-align: left; cursor: pointer;
      padding: 2.1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 2.5rem;
      font-family: var(--ff-head); font-size: 1.35rem; font-weight: 500;
      color: var(--white); letter-spacing: .01em; transition: color .25s;
    }
    .faq-q:hover { color: var(--g200); }
    .faq-icon {
      width: 32px; height: 32px; flex-shrink: 0;
      border: 1px solid rgba(var(--overlay-rgb),0.10);
      border-radius: 50%;
      background: rgba(var(--overlay-rgb),0.04);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      transition: transform .42s var(--ease), background .3s, border-color .3s;
    }
    .faq-icon svg { width: 12px; height: 12px; stroke: var(--g400); transition: stroke .3s; }
    .faq-item.open .faq-icon {
      transform: rotate(45deg);
      background: rgba(var(--teal-rgb),0.18);
      border-color: rgba(var(--teal-rgb),.45);
    }
    .faq-item.open .faq-icon svg { stroke: var(--teal); }
    .faq-a { max-height: 0; overflow: hidden; transition: max-height .55s var(--ease); }
    .faq-a-in { padding-bottom: 2.1rem; font-size: 1.12rem; line-height: 1.85; color: var(--g300); font-weight: 300; }
    .faq-item.open .faq-a { max-height: 340px; }

    #cta {
      padding: 16rem 5rem 15rem;
      border-top: 1px solid var(--g700);
      position: relative;
      overflow: hidden;
      text-align: center;
    }

    .cta-bg {
      position: absolute; inset: 0;
      pointer-events: none;
      z-index: 0;
    }

    .cta-bg::before,
    .cta-bg::after {
      content: '';
      position: absolute;
      left: 0; right: 0;
      height: 22%;
      z-index: 4;
      pointer-events: none;
    }
    .cta-bg::before {
      top: 0;
      background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
    }
    .cta-bg::after {
      bottom: 0;
      background: linear-gradient(to top, var(--bg) 0%, transparent 100%);
    }

    .cta-noise {
      position: absolute; inset: 0; z-index: 2;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      opacity: .022;
      background-size: 220px 220px;
    }

    .cta-inner {
      position: relative;
      z-index: 1;
      max-width: 820px;
      margin: 0 auto;
    }

    .cta-badge {
      display: inline-flex;
      align-items: center;
      gap: .6rem;
      padding: .5rem 1.2rem .5rem .85rem;
      background: rgba(var(--green-rgb),0.07);
      border: 1px solid rgba(var(--green-rgb),.22);
      border-radius: var(--glass-radius-pill);
      font-family: var(--ff-body);
      font-size: .88rem;
      font-weight: 400;
      letter-spacing: .04em;
      color: rgba(var(--green-rgb),.9);
      margin-bottom: 2.5rem;
    }
    .cta-badge-dot {
      width: 7px; height: 7px;
      border-radius: 50%;
      background: rgb(74,222,128);
      box-shadow: 0 0 0 3px rgba(74,222,128,.18);
      animation: badgePulse 2.4s ease-in-out infinite;
      flex-shrink: 0;
    }
    @keyframes badgePulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(74,222,128,.18); }
      50%       { box-shadow: 0 0 0 6px rgba(74,222,128,.0); }
    }

    h2.cta-hl {
      font-family: var(--ff-head);
      font-size: clamp(3.6rem, 8.5vw, 8.5rem);
      font-weight: 600;
      line-height: .92;
      letter-spacing: .01em;
      margin-bottom: 2.75rem;
    }
    h2.cta-hl em {
      font-style: italic;
      color: var(--teal);
      -webkit-text-fill-color: var(--teal);
    }

    .cta-sub {
      font-size: 1.22rem;
      color: var(--g300);
      line-height: 1.85;
      margin-bottom: 2.25rem;
      max-width: 480px;
      margin-left: auto; margin-right: auto;
      font-weight: 300;
    }

    .cta-stats {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 2.5rem;
      margin-bottom: 4rem;
      flex-wrap: wrap;
    }
    .cta-stat {
      display: flex;
      align-items: center;
      gap: .6rem;
      font-family: var(--ff-body);
      font-size: .9rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--g400);
    }
    .cta-stat-num {
      font-family: var(--ff-head);
      font-size: 1.35rem;
      font-weight: 600;
      color: var(--g200);
      line-height: 1;
    }
    .cta-stat-div {
      width: 1px; height: 22px;
      background: rgba(var(--overlay-rgb),.12);
    }

    .cta-actions { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }

    .btn-cta-primary {
      display: inline-flex; align-items: center; gap: .9rem;
      padding: 1.25rem 2.75rem;
      background: linear-gradient(135deg, rgba(var(--teal-rgb),.18) 0%, rgba(var(--indigo-rgb),.12) 100%);
      backdrop-filter: blur(18px) saturate(180%);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      color: var(--white);
      font-family: var(--ff-body); font-size: .96rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      border: 1px solid rgba(var(--teal-rgb),.3);
      border-radius: var(--glass-radius-pill);
      box-shadow:
        inset 0 1px 0 rgba(var(--overlay-rgb),.16),
        inset 0 -1px 0 rgba(var(--shadow-rgb),.18),
        0 6px 32px rgba(var(--teal-rgb),.18),
        0 2px 6px rgba(var(--shadow-rgb),.35);
      position: relative; overflow: hidden;
      transition: transform .4s var(--ease), box-shadow .4s, background .3s, border-color .3s;
    }

    .btn-cta-primary::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 50%; height: 100%;
      background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(var(--overlay-rgb),.18) 50%,
        transparent 100%
      );
      transform: skewX(-18deg) translateX(-150%);
      will-change: transform, opacity;
      animation: ctaShimmer 3.2s ease-in-out infinite;
    }
    @keyframes ctaShimmer {
      0%   { transform: skewX(-18deg) translateX(-150%); opacity: 0; }
      10%  { opacity: 1; }
      60%  { transform: skewX(-18deg) translateX(260%); opacity: 1; }
      61%, 100% { transform: skewX(-18deg) translateX(260%); opacity: 0; }
    }

    .btn-cta-primary::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(180deg, rgba(var(--overlay-rgb),.08) 0%, transparent 55%);
      border-radius: inherit; pointer-events: none;
    }
    .btn-cta-primary:hover {
      transform: translateY(-4px);
      border-color: rgba(var(--teal-rgb),.55);
      box-shadow:
        inset 0 1px 0 rgba(var(--overlay-rgb),.2),
        0 12px 48px rgba(var(--teal-rgb),.28),
        0 4px 12px rgba(var(--shadow-rgb),.4);
      background: linear-gradient(135deg, rgba(var(--teal-rgb),.28) 0%, rgba(var(--indigo-rgb),.18) 100%);
    }
    .btn-cta-primary .btn-icon { display: flex; align-items: center; position: relative; z-index: 1; transition: transform .4s var(--ease); }
    .btn-cta-primary:hover .btn-icon { transform: translateX(4px); }
    .btn-cta-primary .btn-label { position: relative; z-index: 1; }

    #contact { padding: 13rem 5rem; border-top: 1px solid var(--g700); }
    .contact-inner { display: grid; grid-template-columns: 1fr 1.5fr; gap: 8rem; align-items: start; }
    h2.ct-hl { font-family: var(--ff-head); font-size: clamp(2.4rem, 4vw, 3.9rem); font-weight: 600; letter-spacing: .01em; line-height: 1.08; margin-bottom: 1.85rem; }
    .ct-txt { font-size: 1.12rem; line-height: 1.85; color: var(--g300); margin-bottom: 3.25rem; font-weight: 300; }
    .ct-details { display: flex; flex-direction: column; gap: 1.65rem; }
    .ct-detail { display: flex; flex-direction: column; gap: .28rem; }
    .ct-detail-label { font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); opacity: .7; font-family: var(--ff-body); }
    .ct-detail-value { font-size: 1.1rem; color: var(--g200); }
    .contact-form { display: flex; flex-direction: column; gap: 1.85rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
    .form-grp { display: flex; flex-direction: column; gap: .65rem; }
    .form-lbl { font-size: .84rem; letter-spacing: .2em; text-transform: uppercase; color: var(--g400); font-weight: 400; }
    .form-input, .form-ta, .form-select {
      background: rgba(var(--surface-rgb),0.55);
      backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(var(--overlay-rgb),0.09);
      color: var(--white); font-family: var(--ff-body); font-size: 1.05rem; font-weight: 300;
      padding: 1.05rem 1.25rem;
      border-radius: var(--glass-radius-sm);
      outline: none;
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.05);
      transition: border-color .25s, background .25s, box-shadow .25s; width: 100%;
    }
    .form-input::placeholder, .form-ta::placeholder { color: var(--g600); }
    .form-input:focus, .form-ta:focus, .form-select:focus {
      border-color: rgba(var(--teal-rgb),.40);
      background: rgba(var(--focus-rgb),0.65);
      box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.07), 0 0 0 3px rgba(var(--teal-rgb),0.08);
    }
    .form-select { cursor: pointer; appearance: none; }
    .form-ta { min-height: 145px; resize: none; }
    .form-submit {
      background: rgba(var(--teal-rgb),0.14);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      color: var(--teal);
      font-family: var(--ff-body); font-size: 1rem; font-weight: 600;
      letter-spacing: .1em; text-transform: uppercase;
      padding: 1.2rem 2rem;
      border: 1px solid rgba(var(--teal-rgb),.35);
      border-radius: var(--glass-radius-pill);
      width: 100%; cursor: pointer;
      box-shadow:
        inset 0 1px 0 rgba(var(--overlay-rgb),0.12),
        inset 0 -1px 0 rgba(var(--shadow-rgb),0.10),
        0 4px 20px rgba(var(--teal-rgb),0.10);
      position: relative; overflow: hidden;
      transition: transform .35s var(--ease), box-shadow .35s, background .25s;
    }
    .form-submit::before {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(135deg, rgba(var(--overlay-rgb),0.06) 0%, transparent 55%);
      border-radius: inherit; pointer-events: none;
    }
    .form-submit:hover {
      transform: translateY(-3px);
      background: rgba(var(--teal-rgb),0.24);
      color: #fff;
      border-color: rgba(var(--teal-rgb),.6);
      box-shadow:
        inset 0 1px 0 rgba(var(--overlay-rgb),0.16),
        0 8px 40px rgba(var(--teal-rgb),0.22);
    }
    .form-confirm {
      display: none; align-items: center; justify-content: center; gap: .85rem;
      padding: 1.2rem 2rem;
      border: 1px solid rgba(var(--teal-rgb),.3);
      border-radius: var(--glass-radius-pill);
      background: rgba(var(--teal-rgb),0.06);
      backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
      font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); font-weight: 400;
    }
    .form-confirm.show { display: flex; }
    .form-submit.hide { display: none; }
    .form-notice {
      font-size: .78rem; color: var(--g500); line-height: 1.5;
      margin-top: .5rem; text-align: center;
    }
    .form-notice a {
      color: var(--teal); text-decoration: underline;
      text-underline-offset: 2px;
    }

    footer {
      position: relative;
      overflow: hidden;
      padding: 7rem 5rem 3.5rem;
      border-top: none;
    }

    footer::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 40% at 0% 100%,  rgba(var(--teal-rgb),.07)  0%, transparent 70%),
        radial-gradient(ellipse 45% 35% at 100% 0%,  rgba(var(--indigo-rgb),.06) 0%, transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    footer::after {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent      0%,
        rgba(var(--teal-rgb),.35)  20%,
        rgba(var(--indigo-rgb),.45) 50%,
        rgba(var(--teal-rgb),.35)  80%,
        transparent      100%
      );
      z-index: 1;
    }

    .ft-wordmark {
      position: absolute;
      bottom: -0.12em;
      left: 50%;
      transform: translateX(-50%);
      font-family: var(--ff-head);
      font-size: clamp(9rem, 22vw, 20rem);
      font-weight: 700;
      letter-spacing: .12em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(var(--overlay-rgb),.04);
      white-space: nowrap;
      user-select: none;
      pointer-events: none;
      z-index: 0;
      line-height: 1;
    }

    .ft-top,
    .ft-divider,
    .ft-bottom { position: relative; z-index: 1; }

    .ft-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
      gap: 4rem;
      margin-bottom: 4rem;
    }

    .ft-brand-wrap { max-width: 260px; }
    .ft-brand-lockup {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      margin-bottom: .75rem;
    }
    .ft-brand {
      font-family: var(--ff-head);
      font-size: 1.9rem;
      font-weight: 700;
      letter-spacing: .22em;
      line-height: 1;
      background: linear-gradient(135deg, var(--white) 20%, var(--teal) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: inline-block;
    }
    .ft-brand-sub {
      font-family: var(--ff-head);
      font-size: .82rem;
      font-weight: 400;
      font-style: italic;
      letter-spacing: .38em;
      text-transform: lowercase;
      background: linear-gradient(90deg, var(--teal), var(--indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      margin-top: .18rem;
      padding-left: .1em;
    }
    .ft-tagline {
      font-size: 1.12rem;
      color: var(--g400);
      line-height: 1.75;
      font-weight: 300;
      margin-bottom: 2rem;
    }

    .ft-avail {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .32rem .9rem .32rem .65rem;
      background: rgba(var(--green-rgb),.06);
      border: 1px solid rgba(var(--green-rgb),.18);
      border-radius: var(--glass-radius-pill);
      font-family: var(--ff-body);
      font-size: .82rem;
      letter-spacing: .04em;
      color: rgba(var(--green-rgb),.75);
    }
    .ft-avail-dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgb(74,222,128);
      box-shadow: 0 0 0 3px rgba(74,222,128,.18);
      animation: badgePulse 2.4s ease-in-out infinite;
      flex-shrink: 0;
    }

    .ft-nav {
      display: flex;
      gap: 5rem;
    }
    .ft-col {
      display: flex;
      flex-direction: column;
      gap: .85rem;
    }
    .ft-col-title {
      font-size: .9rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--g600);
      margin-bottom: .55rem;
      font-family: var(--ff-body);
      font-weight: 500;
    }
    .ft-col a {
      font-size: 1.08rem;
      color: var(--g400);
      transition: color .22s, transform .22s;
      font-weight: 300;
      display: inline-block;
    }
    .ft-col a:hover {
      color: var(--teal);
      transform: translateX(3px);
    }

    .ft-divider {
      height: 1px;
      background: linear-gradient(
        90deg,
        transparent 0%,
        var(--g700) 20%,
        var(--g700) 80%,
        transparent 100%
      );
      margin-bottom: 2.5rem;
    }

    .ft-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 1.25rem;
    }
    .ft-copy {
      font-size: 1rem;
      color: var(--g600);
      font-weight: 300;
      letter-spacing: .04em;
    }
    .ft-copy span {
      color: var(--g500);
    }
    .ft-legal {
      display: flex;
      align-items: center;
      gap: 2rem;
    }
    .ft-legal a {
      font-size: 1rem;
      color: var(--g500);
      transition: color .22s;
      letter-spacing: .04em;
    }
    .ft-legal a:hover { color: var(--white); }

    .ft-socials {
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    .ft-social {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px; height: 40px;
      border-radius: 50%;
      border: 1px solid rgba(var(--overlay-rgb),.08);
      background: rgba(var(--overlay-rgb),.03);
      color: var(--g400);
      transition: border-color .25s, color .25s, background .25s, transform .25s;
    }
    .ft-social:hover {
      border-color: rgba(var(--teal-rgb),.4);
      color: var(--teal);
      background: rgba(var(--teal-rgb),.06);
      transform: translateY(-2px);
    }
    .ft-social svg { width: 17px; height: 17px; }

    @media (max-width: 1100px) {
      .svc-grid { grid-template-columns: repeat(2,1fr); }
      .hero-stats { display: none; }
      .contact-inner { grid-template-columns: 1fr; gap: 4.5rem; }
    }
    @media (max-width: 900px) {
      #navbar { padding: 1.1rem 1.5rem; }
      #navbar.scrolled { padding: .9rem 1.5rem; }
      .nav-links { display: none; }
      .nav-hamburger { display: flex; }
      #hero { padding: 5rem 1.75rem 7rem; }
      .hero-scroll { display: none; }
      h1.hero-hl { font-size: clamp(3rem, 12vw, 4.8rem); }
      .hero-sub { font-size: 1.12rem; }
      #services, #work, #faq, #cta, #contact { padding: 8rem 1.75rem; }

      footer { padding: 5rem 1.75rem 2.5rem; }
      .ft-top { flex-direction: column; gap: 2.5rem; }
      .ft-nav { flex-wrap: wrap; gap: 2.5rem; }
      .ft-wordmark { font-size: 28vw; }
      .ft-bottom { flex-direction: column; align-items: flex-start; gap: 1.5rem; }
      .ft-socials { order: -1; }
      .ft-legal { gap: 1.25rem; }

      #services {
        height: auto !important;
        min-height: unset;
        padding: 0 !important;
      }
      .svc-frame {
        position: relative !important;
        height: auto !important;
        overflow: visible;
        display: block;
        padding: 5rem 0 5rem;
        background-image: none;
        border-top: 1px solid var(--g700);
      }
      .svc-top {
        position: relative !important;
        height: auto !important;
        padding: 0 1.5rem 0 !important;
        flex-direction: column;
        align-items: flex-start;
        gap: .5rem;
      }
      h2.svc-hl {
        font-size: clamp(2.2rem, 7.5vw, 3rem);
        padding-bottom: 0 !important;
        overflow: hidden;
      }
      .svc-hl-line1, .svc-hl-line2 {
        height: auto !important;
        white-space: normal !important;
      }
      .svc-desc {
        padding-bottom: 0 !important;
      }

      #svc-hl-line1, #svc-hl-line2 {
        display: block;
        height: auto !important;
        white-space: normal !important;
        opacity: 0;
        transform: translateX(40px);
        transition: opacity .6s var(--ease), transform .6s var(--ease);
      }
      #svc-hl-line1.svc-text--in, #svc-hl-line2.svc-text--in {
        opacity: 1;
        transform: translateX(0);
      }
      #svc-hl-line2 { transition-delay: .15s; }
      #svc-desc {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity .6s var(--ease), transform .6s var(--ease);
        transition-delay: .28s;
        max-width: 100%;
        padding-bottom: 0;
      }
      #svc-desc.svc-text--in { opacity: 1 !important; transform: none !important; }
      .svc-rail-wrap {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        overflow: visible;
        margin-top: 1.5rem;
      }
      .svc-rail {
        display: flex;
        flex-direction: column;
        width: 100%;
        padding: 0 1.25rem;
        gap: 1.25rem;
        transform: none !important;
      }
      .svc-card {
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 1.75rem 1.5rem;
      }
      h3.svc-name { font-size: clamp(1.4rem, 5vw, 1.9rem); }
      .svc-body { font-size: 1.05rem; -webkit-line-clamp: 5; line-clamp: 5; }

      .svc-card {
        opacity: 0;
        transform: translateY(60px);
        transition: opacity .65s var(--ease), transform .65s var(--ease);
      }
      .svc-card.svc-card--visible {
        opacity: 1;
        transform: translateY(0);
      }
      .svc-progress-bar { display: none; }
      .work-grid { grid-template-columns: 1fr; }
      .pillars { grid-template-columns: 1fr; gap: 1rem; }

      #philosophy {
        height: auto !important;
        padding: 6rem 1.5rem 5rem !important;
        border-top: 1px solid var(--g700);
      }

      #phil-frame {
        position: static !important;
        top: auto !important;
        height: auto !important;
        overflow: visible !important;
        background: none !important;
      }
      #phil-frame::before { display: none !important; }

      .phil-wrap {
        flex-direction: column !important;
        height: auto !important;
        gap: 0 !important;
        max-width: 100% !important;
      }

      .phil-left {
        flex: none !important;
        width: 100% !important;
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(var(--overlay-rgb),0.07) !important;
        padding: 0 !important;
        display: block !important;
        align-items: unset !important;
      }

      #phil-left-track {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: scroll !important;
        overflow-y: visible !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;

        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
        gap: 0 !important;
        padding-bottom: 0 !important;

        height: auto !important;
        align-items: stretch !important;
      }
      #phil-left-track::-webkit-scrollbar { display: none !important; }

      .phil-phase {

        position: relative !important;
        inset: auto !important;

        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        scroll-snap-align: start !important;

        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        will-change: auto !important;
        padding: 0 0 2rem !important;
        box-sizing: border-box !important;
      }

      #phil-phase-0,
      #phil-phase-1,
      #phil-phase-2,
      #phil-phase-3,
      #phil-phase-4 {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
      }

      .phil-stats-col {
        display: flex !important;
        gap: 2.25rem !important;
        margin-top: 2rem !important;
        padding-top: 1.6rem !important;
        border-top: 1px solid rgba(var(--overlay-rgb),0.07) !important;
        flex-wrap: wrap;
        opacity: 1 !important;
      }
      .phil-stats-col.fade-out { opacity: 1 !important; }

      .phil-phase-label {
        font-size: .65rem !important;
        letter-spacing: .28em !important;
        text-transform: uppercase;
        color: var(--teal);
        opacity: .8;
        margin-bottom: .9rem !important;
        font-family: var(--ff-body);
      }

      .phil-phase-rule {
        width: 28px !important;
        margin-bottom: 1.6rem !important;
        height: 1px;
        background: linear-gradient(90deg, var(--teal), transparent);
        display: block !important;
        transition: none !important;
      }

      .phil-phase-hl {
        font-size: clamp(2.2rem, 8.5vw, 3rem) !important;
        line-height: 1.06 !important;
        margin-bottom: 1.2rem !important;
      }

      .phil-phase-body {
        font-size: clamp(.95rem, 4vw, 1.15rem) !important;
        line-height: 1.72 !important;
        color: var(--g400) !important;
      }
      .phil-phase-body p { margin: 0; }
      .phil-phase-body p + p { margin-top: .5rem; }

      .phil-stat-num  { font-size: 2rem !important; }
      .phil-stat-label { font-size: .68rem !important; margin-top: .2rem !important; }

      .phil-dots {
        display: flex !important;
        justify-content: center;
        align-items: center;
        gap: .55rem;
        padding: 1.25rem 0 2rem;
        border-bottom: 1px solid rgba(var(--overlay-rgb),0.07);
        margin-bottom: 0;
      }
      .phil-dot {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: rgba(var(--overlay-rgb),0.22);
        transition: background .25s, transform .25s, width .25s;
        cursor: pointer;
        border: none; padding: 0;
        flex-shrink: 0;
      }
      .phil-dot.is-active {
        background: var(--teal);
        width: 20px;
        border-radius: 3px;
        transform: none;
      }

      .phil-progress-track { display: none !important; }

      .phil-right {
        flex: none !important;
        width: 100% !important;
        position: static !important;
        height: auto !important;
        overflow: visible !important;
        padding: 2.5rem 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        align-items: unset !important;
      }

      .phil-card {
        position: static !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;

        opacity: 0 !important;
        transform: translateY(44px) !important;
        transition: opacity .65s var(--ease), transform .65s var(--ease) !important;
        pointer-events: auto !important;
        display: block !important;
        will-change: transform, opacity !important;
        margin-bottom: 0 !important;
      }

      .phil-card.phil-card--visible {
        opacity: 1 !important;
        transform: translateY(0) !important;
      }

      .phil-card:nth-child(2) { transition-delay: .1s !important; }
      .phil-card:nth-child(3) { transition-delay: .2s !important; }

      .phil-card-inner {
        padding: 1.75rem 1.5rem !important;
        border-radius: 14px !important;
      }

      .phil-card-inner::before {
        transform: scaleX(1) !important;
        transition: none !important;
      }

      .phil-card-bar {
        width: 100% !important;
        transition: none !important;
      }

      .ps-chapter {
        font-size: .68rem !important;
        letter-spacing: .22em !important;
        margin-bottom: 1.1rem !important;
      }

      h4.ps-title {
        font-size: clamp(1.35rem, 5.5vw, 1.8rem) !important;
        line-height: 1.15 !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        margin-bottom: 1rem !important;
      }

      .ps-body {
        font-size: clamp(.9rem, 3.8vw, 1.05rem) !important;
        line-height: 1.8 !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        max-width: 100% !important;
      }
      .work-top { flex-direction: column; align-items: flex-start; }
      .ft-nav { flex-direction: column; gap: 2.75rem; }
      .ft-top { flex-direction: column; }
      .form-row { grid-template-columns: 1fr; }
      .hero-actions { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
      .cta-actions { flex-direction: column; align-items: center; }

      #cta { padding: 7rem 1.5rem 6rem; }
      h2.cta-hl { font-size: clamp(3rem, 11vw, 4.2rem); }
      .cta-stats { gap: 1.25rem; }
      .cta-stat-div { display: none; }
      .cta-badge { font-size: .8rem; padding: .42rem .95rem .42rem .72rem; }
      .ft-avail  { font-size: .78rem; padding: .28rem .8rem .28rem .58rem; }
      .btn-cta-primary { width: 100%; justify-content: center; font-size: .82rem; padding: .9rem 1.5rem; gap: .6rem; letter-spacing: .08em; }
      .btn-ghost { font-size: .82rem; padding: .6rem 1.1rem; gap: .5rem; letter-spacing: .08em; }

      .sec-label::before { width: 20px; opacity: 0.7; }

      .btn-primary, .btn-ghost, .form-submit, .form-confirm, .btn-cta-primary { border-radius: var(--glass-radius-sm); }
    }
    @media (max-width: 480px) {
      h1.hero-hl { font-size: clamp(2.6rem, 13vw, 3.8rem); }
      .mn-links a { font-size: 2.1rem; }
      .sec-label { font-size: .82rem; letter-spacing: .18em; }
      .btn-primary { font-size: .82rem; padding: .85rem 1.55rem; gap: .6rem; letter-spacing: .08em; }
      .work-item { aspect-ratio: 4/3; }
      .wi-inner { padding: 1.5rem; }
      h3.wi-title { font-size: 1.3rem; }
      .wi-tag { font-size: .74rem; padding: .18rem .5rem; }
      .wi-year { font-size: .82rem; }
    }
    @media (hover: none) {
      .form-select { cursor: pointer; }
      .form-input, .form-ta { cursor: text; }
    }

    @keyframes waPulse {
      0%   { box-shadow: 0 0 0 0   rgba(45,212,191,.55), 0 4px 24px rgba(45,212,191,.2), 0 2px 10px rgba(0,0,0,.45); }
      60%  { box-shadow: 0 0 0 12px rgba(45,212,191,.0),  0 4px 24px rgba(45,212,191,.2), 0 2px 10px rgba(0,0,0,.45); }
      100% { box-shadow: 0 0 0 0   rgba(45,212,191,.0),  0 4px 24px rgba(45,212,191,.2), 0 2px 10px rgba(0,0,0,.45); }
    }
    #wa-fab {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      z-index: 8000;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 52px;
      height: 52px;
      padding: 0;
      background: rgba(10,13,22,0.82);
      backdrop-filter: blur(16px) saturate(160%);
      -webkit-backdrop-filter: blur(16px) saturate(160%);
      border: 1px solid rgba(45,212,191,.28);
      border-radius: 50%;
      box-shadow: 0 0 0 0 rgba(45,212,191,.55), 0 4px 24px rgba(45,212,191,.2), 0 2px 10px rgba(0,0,0,.45);
      text-decoration: none;
      color: var(--g100);
      animation: waPulse 2.8s ease-out infinite;
      transition: transform .22s cubic-bezier(.34,1.56,.64,1),
                  border-color .2s ease,
                  background .2s ease;
    }
    #wa-fab:hover {
      transform: translateY(-3px) scale(1.04);
      border-color: rgba(45,212,191,.55);
      background: rgba(var(--surface-rgb),0.92);
    }
    #wa-fab svg {
      width: 20px; height: 20px;
      flex-shrink: 0;
      fill: var(--teal);
      filter: drop-shadow(0 0 6px rgba(45,212,191,.5));
    }
    #wa-fab-label {
      display: inline-block;
      background: linear-gradient(90deg, var(--teal), var(--indigo));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      font-weight: 500;
    }

    @media (max-width: 600px) {
      #wa-fab {
        width: 46px;
        height: 46px;
        bottom: 1.25rem;
        right: 1.25rem;
      }
    }

.pg-header {
  padding: 10rem 5rem 4rem;
  text-align: center;
  position: relative;
}
.pg-header::after {
  content: '';
  position: absolute; bottom: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g600), transparent);
}
.pg-breadcrumb {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--ff-body); font-size: .78rem; font-weight: 400;
  color: var(--g400); margin-bottom: 1.5rem; letter-spacing: .06em;
  text-transform: uppercase;
  padding: .4rem .9rem;
  background: rgba(var(--card-rgb), .45);
  border: 1px solid var(--g700); border-radius: 8px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.pg-breadcrumb a { color: var(--g300); text-decoration: none; transition: color .25s; }
.pg-breadcrumb a:hover { color: var(--teal); }
.pg-breadcrumb span { color: var(--g500); font-size: .72rem; }
.pg-title {
  font-family: var(--ff-head); font-size: clamp(2.4rem, 5vw, 4.2rem);
  font-weight: 600; letter-spacing: .01em; line-height: 1.15;
  background: linear-gradient(135deg, var(--white) 40%, var(--g300));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 1rem;
}
.pg-subtitle {
  font-family: var(--ff-body); font-size: 1.05rem; font-weight: 300;
  color: var(--g300); max-width: 600px; margin: 0 auto; line-height: 1.7;
}

.pg-container {
  max-width: 1200px; margin: 0 auto; padding: 4rem 2rem;
}
.pg-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.pg-card {
  background: rgba(var(--card-rgb), .6);
  border: 1px solid var(--g700);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .3s;
}
.pg-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--teal-rgb), .3);
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb), .4), 0 0 30px rgba(var(--teal-rgb), .06);
}
.pg-card-img {
  width: 100%; height: 220px; object-fit: cover;
  border-bottom: 1px solid var(--g700);
}
.pg-card-body { padding: 1.5rem; }
.pg-card-tag {
  display: inline-block; font-family: var(--ff-body); font-size: .75rem;
  font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal); margin-bottom: .75rem;
}
.pg-card-title {
  font-family: var(--ff-head); font-size: 1.35rem; font-weight: 600;
  color: var(--white); line-height: 1.3; margin-bottom: .5rem;
}
.pg-card-title a { color: inherit; text-decoration: none; transition: color .2s; }
.pg-card-title a:hover { color: var(--teal); }
.pg-card-excerpt {
  font-family: var(--ff-body); font-size: .9rem; font-weight: 300;
  color: var(--g300); line-height: 1.65; margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pg-card-meta {
  display: flex; align-items: center; gap: .75rem;
  font-family: var(--ff-body); font-size: .8rem; color: var(--g400);
}
.pg-card-link {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 500;
  color: var(--teal); text-decoration: none;
  transition: color .2s, gap .2s;
}
.pg-card-link:hover { color: var(--indigo); gap: .65rem; }
.pg-card-link svg { width: 14px; height: 14px; fill: currentColor; }

.pg-detail { max-width: 800px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.pg-detail-content {
  font-family: var(--ff-body); font-size: 1rem; font-weight: 300;
  color: var(--g200); line-height: 1.8;
}
.pg-detail-content h2 {
  font-family: var(--ff-head); font-size: 1.8rem; font-weight: 600;
  color: var(--white); margin: 2.5rem 0 1rem; letter-spacing: .01em;
}
.pg-detail-content h3 {
  font-family: var(--ff-head); font-size: 1.4rem; font-weight: 600;
  color: var(--white); margin: 2rem 0 .75rem;
}
.pg-detail-content p { margin-bottom: 1.25rem; }
.pg-detail-content a { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.pg-detail-content a:hover { color: var(--indigo); }
.pg-detail-content img {
  max-width: 100%; height: auto; border-radius: 12px; margin: 1.5rem 0;
  border: 1px solid var(--g700);
}
.pg-detail-content ul, .pg-detail-content ol {
  margin: 1rem 0 1.5rem 1.5rem; color: var(--g200);
}
.pg-detail-content li { margin-bottom: .5rem; }
.pg-detail-content blockquote {
  border-left: 3px solid var(--teal); margin: 1.5rem 0; padding: 1rem 1.5rem;
  background: rgba(var(--card-rgb), .5); border-radius: 0 12px 12px 0;
  color: var(--g200); font-style: italic;
}
.pg-detail-content code {
  background: var(--g800); padding: .15em .4em; border-radius: 4px;
  font-size: .9em; color: var(--teal);
}
.pg-detail-content pre {
  background: var(--g800); border: 1px solid var(--g700); border-radius: 12px;
  padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0;
}
.pg-detail-content pre code { background: none; padding: 0; }

.pg-featured-img {
  width: 100%; max-height: 480px; object-fit: cover; border-radius: 16px;
  border: 1px solid var(--g700); margin-bottom: 2.5rem;
}

.pg-related { padding: 4rem 2rem; }
.pg-related-title {
  font-family: var(--ff-head); font-size: 1.8rem; font-weight: 600;
  color: var(--white); text-align: center; margin-bottom: 2.5rem;
}
.pg-related-grid {
  display: grid; gap: 2rem; max-width: 1200px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.pg-filters {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-bottom: 2.5rem;
}
.pg-pill {
  appearance: none; border: none; cursor: pointer;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 400;
  letter-spacing: .04em; padding: .5rem 1.25rem; border-radius: 999px;
  background: var(--g800); color: var(--g300); border: 1px solid var(--g700);
  transition: all .25s;
}
.pg-pill:hover { border-color: var(--g500); color: var(--white); }
.pg-pill.active {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg); border-color: transparent; font-weight: 500;
}

.pg-search-wrap {
  max-width: 400px; margin: 0 auto 2rem; position: relative;
}
.pg-search {
  width: 100%; padding: .7rem 1.2rem .7rem 2.75rem;
  background: var(--g800); border: 1px solid var(--g700); border-radius: 999px;
  color: var(--white); font-family: var(--ff-body); font-size: .9rem;
  font-weight: 300; outline: none; transition: border-color .2s;
}
.pg-search::placeholder { color: var(--g500); }
.pg-search:focus { border-color: var(--teal); }
.pg-search-icon {
  position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: var(--g500); pointer-events: none;
}

.pg-pagination {
  display: flex; justify-content: center; gap: .4rem;
  margin-top: 3rem; flex-wrap: wrap;
}
.pg-pagination a, .pg-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px; padding: 0 .5rem;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 400;
  border-radius: 8px; text-decoration: none;
  border: 1px solid var(--g700); color: var(--g300); background: var(--g800);
  transition: all .2s;
}
.pg-pagination a:hover { border-color: var(--teal); color: var(--white); }
.pg-pagination .active {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg); border-color: transparent; font-weight: 500;
}
.pg-pagination .disabled { opacity: .3; pointer-events: none; }

.pg-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.pg-form-group { display: flex; flex-direction: column; gap: .4rem; }
.pg-form-group.full { grid-column: 1 / -1; }
.pg-form-label {
  font-family: var(--ff-body); font-size: .8rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; color: var(--g400);
}
.pg-form-input, .pg-form-textarea {
  background: var(--g800); border: 1px solid var(--g700); border-radius: 12px;
  padding: .85rem 1.1rem; color: var(--white);
  font-family: var(--ff-body); font-size: .95rem; font-weight: 300;
  outline: none; transition: border-color .2s;
}
.pg-form-input:focus, .pg-form-textarea:focus { border-color: var(--teal); }
.pg-form-input::placeholder, .pg-form-textarea::placeholder { color: var(--g500); }
.pg-form-textarea { resize: vertical; min-height: 140px; }
.pg-form-error {
  font-family: var(--ff-body); font-size: .78rem; color: #f87171; margin-top: .2rem;
}
.pg-form-btn {
  display: inline-flex; align-items: center; gap: .6rem; justify-content: center;
  padding: .9rem 2.2rem; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--ff-body); font-size: .95rem; font-weight: 500;
  letter-spacing: .04em; color: var(--bg);
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  transition: transform .25s var(--ease), box-shadow .25s;
  margin-top: 1rem;
}
.pg-form-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(var(--teal-rgb), .25);
}

.pg-success {
  text-align: center; padding: 3rem 2rem;
  background: rgba(var(--teal-rgb), .06); border: 1px solid rgba(var(--teal-rgb), .2);
  border-radius: 16px;
}
.pg-success-icon { font-size: 3rem; margin-bottom: 1rem; }
.pg-success-title {
  font-family: var(--ff-head); font-size: 1.6rem; font-weight: 600;
  color: var(--teal); margin-bottom: .5rem;
}
.pg-success-text {
  font-family: var(--ff-body); font-size: .95rem; color: var(--g300);
}

.pg-legal { max-width: 800px; margin: 0 auto; padding: 4rem 2rem 6rem; }
.pg-legal-meta {
  display: flex; gap: 2rem; margin-bottom: 2rem;
  font-family: var(--ff-body); font-size: .85rem; color: var(--g400);
}
.pg-legal-content {
  font-family: var(--ff-body); font-size: 1rem; font-weight: 300;
  color: var(--g200); line-height: 1.8;
}
.pg-legal-content h2 {
  font-family: var(--ff-head); font-size: 1.6rem; font-weight: 600;
  color: var(--white); margin: 2.5rem 0 1rem;
}
.pg-legal-content h3 {
  font-family: var(--ff-head); font-size: 1.25rem; font-weight: 600;
  color: var(--white); margin: 2rem 0 .75rem;
}
.pg-legal-content p { margin-bottom: 1.25rem; }
.pg-legal-content a { color: var(--teal); }
.pg-legal-content ul, .pg-legal-content ol {
  margin: 1rem 0 1.5rem 1.5rem;
}
.pg-legal-content li { margin-bottom: .5rem; }

.pg-empty {
  text-align: center; padding: 6rem 2rem;
}
.pg-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .4; }
.pg-empty-title {
  font-family: var(--ff-head); font-size: 1.6rem; font-weight: 600;
  color: var(--g300); margin-bottom: .5rem;
}
.pg-empty-text {
  font-family: var(--ff-body); font-size: .95rem; color: var(--g500);
}

.pg-faq { margin-top: 3rem; }
.pg-faq-title {
  font-family: var(--ff-head); font-size: 1.6rem; font-weight: 600;
  color: var(--white); margin-bottom: 1.5rem;
}
.pg-faq-item {
  border: 1px solid var(--g700); border-radius: 12px;
  margin-bottom: .75rem; overflow: hidden; background: rgba(var(--card-rgb), .4);
}
.pg-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.25rem; cursor: pointer;
  font-family: var(--ff-body); font-size: .95rem; font-weight: 400;
  color: var(--g100); transition: color .2s;
}
.pg-faq-q:hover { color: var(--teal); }
.pg-faq-q svg {
  width: 16px; height: 16px; fill: var(--g500);
  transition: transform .3s;
}
.pg-faq-item.open .pg-faq-q svg { transform: rotate(180deg); }
.pg-faq-a {
  padding: 0 1.25rem; max-height: 0; overflow: hidden;
  transition: max-height .35s var(--ease), padding .35s;
  font-family: var(--ff-body); font-size: .9rem; font-weight: 300;
  color: var(--g300); line-height: 1.7;
}
.pg-faq-item.open .pg-faq-a {
  max-height: 500px; padding: 0 1.25rem 1rem;
}

.pg-footer-wrap { margin-top: 2rem; }

@media (max-width: 768px) {
  .pg-header { padding: 8rem 1.5rem 3rem; }
  .pg-container { padding: 2.5rem 1.25rem; }
  .pg-grid { grid-template-columns: 1fr; }
  .pg-form-grid { grid-template-columns: 1fr; }
  .pg-detail { padding: 2.5rem 1.25rem 4rem; }
  .pg-legal { padding: 2.5rem 1.25rem 4rem; }
  .pg-related-grid { grid-template-columns: 1fr; }
  .pg-breadcrumb { font-size: .72rem; padding: .35rem .7rem; }
}
@media (max-width: 480px) {
  .pg-header { padding: 7rem 1rem 2rem; }
  .pg-title { font-size: clamp(1.8rem, 7vw, 2.4rem); }
  .pg-subtitle { font-size: .92rem; }
  .pg-container { padding: 2rem 1rem; }
  .pg-legal { padding: 2rem 1rem 3rem; }
  .pg-breadcrumb { font-size: .68rem; gap: .3rem; }
}

.bl-progress-bar {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
  background: linear-gradient(90deg, var(--teal), var(--indigo));
  width: 0; transition: width .1s linear; pointer-events: none;
}

.bl-hero {
  padding: 10rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}
.bl-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 60%, rgba(var(--teal-rgb), .04) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(var(--indigo-rgb), .04) 0%, transparent 70%);
  pointer-events: none;
}
.bl-hero-inner {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 4rem;
  align-items: center;
}
.bl-hero-text { position: relative; z-index: 1; }
.bl-hero-title {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--white) 40%, var(--g300));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 1.25rem;
}
.bl-hero-sub {
  font-family: var(--ff-body); font-size: 1.1rem; font-weight: 300;
  color: var(--g300); line-height: 1.7; max-width: 420px;
  margin-bottom: 2.5rem;
}
.bl-hero-stats {
  display: flex; align-items: center; gap: 1.5rem;
}
.bl-stat { display: flex; flex-direction: column; }
.bl-stat-num {
  font-family: var(--ff-head); font-size: 2.4rem; font-weight: 600;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1;
}
.bl-stat-label {
  font-family: var(--ff-body); font-size: .78rem; font-weight: 400;
  color: var(--g400); text-transform: uppercase; letter-spacing: .1em;
  margin-top: .2rem;
}
.bl-stat-divider {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--g600), transparent);
}

.bl-hero-card {
  display: block; text-decoration: none; color: inherit;
  background: rgba(var(--card-rgb), .5);
  border: 1px solid var(--g700); border-radius: 20px;
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s;
  opacity: 0; transform: translateY(30px);
}
.bl-hero-card.bl-revealed {
  opacity: 1; transform: translateY(0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.bl-hero-card:hover {
  transform: translateY(-8px);
  border-color: rgba(var(--teal-rgb), .25);
  box-shadow: 0 20px 60px rgba(var(--shadow-rgb), .5), 0 0 40px rgba(var(--teal-rgb), .06);
}
.bl-hero-card-img-wrap {
  position: relative; overflow: hidden;
  height: 260px;
}
.bl-hero-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.bl-hero-card:hover .bl-hero-card-img { transform: scale(1.06); }
.bl-hero-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(var(--scrim-rgb), .7) 100%);
}
.bl-hero-card-badge {
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--ff-body); font-size: .7rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .85rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg);
}
.bl-hero-card-body { padding: 1.5rem 1.75rem 1.75rem; }
.bl-hero-card-title {
  font-family: var(--ff-head); font-size: 1.6rem; font-weight: 600;
  color: var(--white); line-height: 1.25; margin: .5rem 0 .75rem;
  transition: color .3s;
}
.bl-hero-card:hover .bl-hero-card-title { color: var(--teal); }
.bl-hero-card-excerpt {
  font-family: var(--ff-body); font-size: .9rem; font-weight: 300;
  color: var(--g300); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.bl-card-tag {
  font-family: var(--ff-body); font-size: .7rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal);
}
.bl-card-meta {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--ff-body); font-size: .78rem; color: var(--g400);
}
.bl-card-meta-item {
  display: inline-flex; align-items: center; gap: .35rem;
}

.bl-toolbar {
  position: sticky; top: 60px; z-index: 90;
  background: rgba(var(--scrim-rgb), .85);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: 1px solid var(--g700);
  padding: 1rem 0;
}
.bl-toolbar-inner {
  max-width: 1280px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; gap: 1.5rem;
  flex-wrap: wrap;
}

.bl-search-wrap {
  position: relative; flex: 0 0 260px;
}
.bl-search {
  width: 100%; padding: .6rem 1rem .6rem 2.5rem;
  background: var(--g800); border: 1px solid var(--g700); border-radius: 10px;
  color: var(--white); font-family: var(--ff-body); font-size: .85rem;
  font-weight: 300; outline: none;
  transition: border-color .25s, box-shadow .25s, width .3s var(--ease);
}
.bl-search::placeholder { color: var(--g500); }
.bl-search:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb), .08);
}
.bl-search-icon {
  position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  color: var(--g500); pointer-events: none;
}
.bl-search-clear {
  position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--g400); font-size: 1.1rem;
  cursor: pointer; line-height: 1; padding: .2rem;
  transition: color .2s;
}
.bl-search-clear:hover { color: var(--white); }

.bl-filters {
  display: flex; flex-wrap: wrap; gap: .4rem;
  flex: 1;
}
.bl-pill {
  appearance: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-body); font-size: .8rem; font-weight: 400;
  letter-spacing: .03em; padding: .45rem 1rem; border-radius: 8px;
  background: transparent; color: var(--g400);
  border: 1px solid transparent;
  transition: all .25s var(--ease);
}
.bl-pill:hover {
  color: var(--white); background: rgba(var(--hover-rgb), .5);
}
.bl-pill.active {
  background: rgba(var(--teal-rgb), .1);
  color: var(--teal);
  border-color: rgba(var(--teal-rgb), .2);
  font-weight: 500;
}
.bl-pill-count {
  font-size: .7rem; padding: .1rem .4rem; border-radius: 4px;
  background: var(--g700); color: var(--g300);
}
.bl-pill.active .bl-pill-count {
  background: rgba(var(--teal-rgb), .15); color: var(--teal);
}

.bl-sort-wrap { margin-left: auto; }
.bl-sort {
  appearance: none; background: var(--g800); border: 1px solid var(--g700);
  border-radius: 8px; padding: .5rem 2rem .5rem .8rem;
  color: var(--g300); font-family: var(--ff-body); font-size: .8rem;
  font-weight: 300; cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b738f' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .75rem center;
  transition: border-color .2s;
}
.bl-sort:focus { border-color: var(--teal); }

.bl-active-filter {
  display: flex; align-items: center; justify-content: space-between;
  padding: .75rem 1rem; margin-bottom: 2rem;
  background: rgba(var(--teal-rgb), .04);
  border: 1px solid rgba(var(--teal-rgb), .1);
  border-radius: 10px;
  font-family: var(--ff-body); font-size: .85rem; color: var(--g300);
}
.bl-active-filter strong { color: var(--white); font-weight: 500; }
.bl-active-filter-clear {
  appearance: none; border: none; background: none; cursor: pointer;
  font-family: var(--ff-body); font-size: .8rem; font-weight: 400;
  color: var(--teal); text-decoration: underline; text-underline-offset: 2px;
  transition: color .2s;
}
.bl-active-filter-clear:hover { color: var(--indigo); }

.bl-content { padding: 3rem 0 2rem; }
.bl-container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

.bl-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.bl-card--large { grid-column: span 2; }
.bl-card--large .bl-card-img-wrap { height: 340px; }
.bl-card--large .bl-card-title { font-size: 1.5rem; }

.bl-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity .05s, transform .05s;
}
.bl-card.bl-revealed {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s var(--ease) var(--delay, 0s),
              transform .6s var(--ease) var(--delay, 0s);
}
.bl-card-link {
  display: flex; flex-direction: column;
  background: rgba(var(--card-rgb), .45);
  border: 1px solid var(--g700); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  height: 100%;
  transition: transform .45s var(--ease), border-color .35s, box-shadow .35s;
}
.bl-card-link:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--teal-rgb), .2);
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), .35), 0 0 30px rgba(var(--teal-rgb), .04);
}

.bl-card-img-wrap {
  position: relative; overflow: hidden;
  height: 220px; flex-shrink: 0;
}
.bl-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.bl-card-link:hover .bl-card-img { transform: scale(1.05); }
.bl-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: var(--g800); color: var(--g600);
}
.bl-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(var(--scrim-rgb), .5) 100%);
  opacity: 0; transition: opacity .4s;
}
.bl-card-link:hover .bl-card-img-overlay { opacity: 1; }
.bl-card-featured-dot {
  position: absolute; top: .85rem; right: .85rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(var(--teal-rgb), .5);
}

.bl-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; flex: 1;
}
.bl-card-body-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .6rem;
}
.bl-card-reading-time {
  font-family: var(--ff-body); font-size: .72rem; font-weight: 400;
  color: var(--g500);
}
.bl-card-title {
  font-family: var(--ff-head); font-size: 1.2rem; font-weight: 600;
  color: var(--white); line-height: 1.3; margin-bottom: .5rem;
  transition: color .3s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card-link:hover .bl-card-title { color: var(--teal); }
.bl-card-excerpt {
  font-family: var(--ff-body); font-size: .85rem; font-weight: 300;
  color: var(--g400); line-height: 1.6; margin-bottom: auto;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bl-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; padding-top: .85rem;
  border-top: 1px solid var(--g700);
}
.bl-card-author {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--ff-body); font-size: .78rem; color: var(--g400);
}
.bl-card-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-body); font-size: .65rem; font-weight: 600;
  color: var(--bg);
}
.bl-card-date {
  font-family: var(--ff-body); font-size: .75rem; color: var(--g500);
}

.bl-pagination {
  display: flex; justify-content: center; gap: .35rem;
  margin-top: 3.5rem; padding-bottom: 1rem;
}
.bl-page-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 .6rem;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 400;
  border-radius: 10px; text-decoration: none;
  border: 1px solid var(--g700); color: var(--g400); background: var(--g800);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.bl-page-btn:hover:not(.active):not(.disabled) {
  border-color: var(--teal); color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .3);
}
.bl-page-btn.active {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg); border-color: transparent; font-weight: 600;
}
.bl-page-btn.disabled { opacity: .25; pointer-events: none; }

.bl-empty {
  text-align: center; padding: 6rem 2rem;
}
.bl-empty-icon { color: var(--g600); margin-bottom: 1.5rem; }
.bl-empty-title {
  font-family: var(--ff-head); font-size: 1.8rem; font-weight: 600;
  color: var(--g300); margin-bottom: .5rem;
}
.bl-empty-text {
  font-family: var(--ff-body); font-size: .95rem; color: var(--g500);
  margin-bottom: 1.5rem;
}
.bl-empty-reset {
  appearance: none; border: 1px solid var(--teal); background: transparent;
  color: var(--teal); padding: .55rem 1.4rem; border-radius: 999px;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 500;
  cursor: pointer; transition: all .25s;
}
.bl-empty-reset:hover {
  background: var(--teal); color: var(--bg);
}

.bl-newsletter {
  padding: 4rem 2rem; position: relative;
}
.bl-newsletter-inner {
  max-width: 640px; margin: 0 auto; text-align: center;
  position: relative; padding: 3.5rem 2.5rem;
  background: rgba(var(--card-rgb), .5);
  border: 1px solid var(--g700); border-radius: 24px;
  overflow: hidden;
}
.bl-newsletter-glow {
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--teal-rgb), .08) 0%, transparent 70%);
  pointer-events: none;
}
.bl-newsletter-title {
  font-family: var(--ff-head); font-size: 2rem; font-weight: 600;
  color: var(--white); margin-bottom: .75rem; position: relative;
}
.bl-newsletter-text {
  font-family: var(--ff-body); font-size: .95rem; font-weight: 300;
  color: var(--g300); line-height: 1.7; position: relative;
}

.bd-progress-track {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(var(--hover-rgb), .5); z-index: 9999;
}
.bd-progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--teal), var(--indigo), var(--violet));
  border-radius: 0 2px 2px 0;
  transition: width .08s linear;
}

.bd-hero {
  position: relative; min-height: 520px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.bd-hero-img-wrap {
  position: absolute; inset: 0;
}
.bd-hero-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.7) saturate(1.1);
}
.bd-hero-no-img {
  background: linear-gradient(135deg, var(--g900), var(--g800));
}
.bd-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .3) 0%,
    rgba(var(--scrim-rgb), .6) 50%,
    rgba(var(--scrim-rgb), .95) 85%,
    var(--bg) 100%
  );
}
.bd-hero-content {
  position: relative; z-index: 2;
  max-width: 820px; padding: 0 2rem 3.5rem;
  margin: 0 auto; width: 100%;
}
.bd-hero-tag {
  display: inline-block;
  font-family: var(--ff-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  padding: .35rem .9rem; border-radius: 6px;
  background: rgba(var(--teal-rgb), .12); color: var(--teal);
  border: 1px solid rgba(var(--teal-rgb), .15);
  margin-bottom: 1rem;
}
.bd-hero-title {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--white); margin-bottom: 1.5rem;
}
.bd-hero-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
}
.bd-hero-author {
  display: flex; align-items: center; gap: .75rem;
}
.bd-author-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-body); font-size: .85rem; font-weight: 600;
  color: var(--bg);
}
.bd-author-info { display: flex; flex-direction: column; }
.bd-author-name {
  font-family: var(--ff-body); font-size: .9rem; font-weight: 500;
  color: var(--white);
}
.bd-author-date {
  font-family: var(--ff-body); font-size: .78rem; font-weight: 300;
  color: var(--g400);
}
.bd-hero-details {
  display: flex; align-items: center; gap: .75rem;
}
.bd-meta-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--ff-body); font-size: .78rem; font-weight: 400;
  color: var(--g400); padding: .35rem .75rem;
  background: rgba(var(--card-rgb), .5);
  border: 1px solid var(--g700); border-radius: 8px;
}

.bd-layout {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: 240px 1fr;
  gap: 3rem; padding: 3rem 2rem 4rem;
  position: relative;
}
.bd-article--full { grid-column: 1 / -1; }
.bd-layout:has(.bd-article--full) { grid-template-columns: 1fr; }

.bd-sidebar {
  position: relative;
}
.bd-toc {
  position: sticky; top: 100px;
}
.bd-toc-title {
  display: flex; align-items: center; gap: .5rem;
  font-family: var(--ff-body); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--g400); margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--g700);
}
.bd-toc-list { display: flex; flex-direction: column; gap: .15rem; }
.bd-toc-link {
  display: flex; align-items: flex-start; gap: .6rem;
  font-family: var(--ff-body); font-size: .82rem; font-weight: 300;
  color: var(--g400); text-decoration: none;
  padding: .45rem .6rem; border-radius: 6px;
  transition: all .25s var(--ease);
  line-height: 1.4;
}
.bd-toc-link:hover { color: var(--g200); background: rgba(var(--hover-rgb), .3); }
.bd-toc-marker {
  flex-shrink: 0; width: 3px; min-height: 16px; height: 100%;
  border-radius: 2px; margin-top: 2px;
  background: var(--g700);
  transition: background .25s var(--ease);
}
.bd-toc-link.active {
  color: var(--teal); font-weight: 400;
}
.bd-toc-link.active .bd-toc-marker {
  background: linear-gradient(180deg, var(--teal), var(--indigo));
}

.bd-article { max-width: 780px; min-width: 0; }
.bd-content {
  font-family: var(--ff-body); font-size: 1.05rem; font-weight: 300;
  color: var(--g200); line-height: 1.85;
}
.bd-content h2 {
  font-family: var(--ff-head); font-size: 1.9rem; font-weight: 600;
  color: var(--white); margin: 3rem 0 1.25rem; letter-spacing: .01em;
  padding-top: .5rem;
  scroll-margin-top: 100px;
}
.bd-content h3 {
  font-family: var(--ff-head); font-size: 1.4rem; font-weight: 600;
  color: var(--white); margin: 2.25rem 0 .75rem;
}
.bd-content h4 {
  font-family: var(--ff-head); font-size: 1.15rem; font-weight: 600;
  color: var(--g100); margin: 1.75rem 0 .5rem;
}
.bd-content p { margin-bottom: 1.35rem; }
.bd-content a {
  color: var(--teal); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: rgba(var(--teal-rgb), .3);
  transition: text-decoration-color .2s;
}
.bd-content a:hover { text-decoration-color: var(--teal); }
.bd-content img {
  max-width: 100%; height: auto; border-radius: 14px; margin: 2rem 0;
  border: 1px solid var(--g700);
  transition: transform .4s var(--ease), box-shadow .4s;
}
.bd-content img:hover {
  transform: scale(1.01);
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb), .3);
}
.bd-content ul, .bd-content ol {
  margin: 1rem 0 1.5rem 1.5rem; color: var(--g200);
}
.bd-content li { margin-bottom: .6rem; }
.bd-content li::marker { color: var(--teal); }
.bd-content blockquote {
  position: relative; margin: 2rem 0; padding: 1.5rem 1.75rem 1.5rem 2rem;
  background: rgba(var(--card-rgb), .4);
  border-radius: 0 14px 14px 0; color: var(--g200);
  font-style: italic; font-size: 1.1rem; line-height: 1.7;
  border-left: 3px solid transparent;
  border-image: linear-gradient(180deg, var(--teal), var(--indigo)) 1;
}
.bd-content blockquote::before {
  content: '\201C';
  position: absolute; top: -.1rem; left: .5rem;
  font-family: var(--ff-head); font-size: 3.5rem; font-weight: 700;
  color: rgba(var(--teal-rgb), .15); line-height: 1;
}
.bd-content code {
  background: var(--g800); padding: .15em .45em; border-radius: 5px;
  font-size: .88em; color: var(--teal);
  border: 1px solid var(--g700);
}
.bd-content pre {
  background: var(--g800); border: 1px solid var(--g700); border-radius: 14px;
  padding: 1.5rem; overflow-x: auto; margin: 2rem 0;
}
.bd-content pre code { background: none; padding: 0; border: none; }
.bd-content table {
  width: 100%; border-collapse: collapse; margin: 1.5rem 0;
  font-size: .9rem;
}
.bd-content th, .bd-content td {
  padding: .75rem 1rem; text-align: left;
  border-bottom: 1px solid var(--g700);
}
.bd-content th {
  font-weight: 500; color: var(--white);
  background: rgba(var(--card-rgb), .4);
}
.bd-content hr {
  border: none; height: 1px; margin: 2.5rem 0;
  background: linear-gradient(90deg, transparent, var(--g600), transparent);
}

.bd-share {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 0; margin-top: 2.5rem;
  border-top: 1px solid var(--g700);
  border-bottom: 1px solid var(--g700);
}
.bd-share-label {
  font-family: var(--ff-body); font-size: .82rem; font-weight: 500;
  color: var(--g400); text-transform: uppercase; letter-spacing: .08em;
}
.bd-share-buttons { display: flex; gap: .5rem; }
.bd-share-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem .85rem; border-radius: 8px;
  background: var(--g800); border: 1px solid var(--g700);
  color: var(--g300); text-decoration: none;
  font-family: var(--ff-body); font-size: .78rem;
  cursor: pointer;
  transition: all .25s var(--ease);
}
.bd-share-btn:hover {
  border-color: var(--teal); color: var(--teal);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--shadow-rgb), .2);
}
.bd-share-btn.copied {
  border-color: var(--teal); color: var(--teal);
  background: rgba(var(--teal-rgb), .08);
}
.bd-copy-label {
  font-family: var(--ff-body); font-size: .78rem;
}

.bd-faq { margin-top: 3.5rem; }
.bd-faq-heading {
  font-family: var(--ff-head); font-size: 1.8rem; font-weight: 600;
  color: var(--white); margin-bottom: 1.5rem;
}
.bd-faq-list { display: flex; flex-direction: column; gap: .6rem; }
.bd-faq-item {
  border: 1px solid var(--g700); border-radius: 12px;
  overflow: hidden; background: rgba(var(--card-rgb), .35);
  transition: border-color .3s;
}
.bd-faq-item:has(.bd-faq-q.active) {
  border-color: rgba(var(--teal-rgb), .15);
}
.bd-faq-q {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 1.1rem 1.25rem; cursor: pointer;
  background: none; border: none;
  font-family: var(--ff-body); font-size: .95rem; font-weight: 400;
  color: var(--g100); text-align: left;
  transition: color .2s;
}
.bd-faq-q:hover { color: var(--teal); }
.bd-faq-q svg {
  flex-shrink: 0; color: var(--g500);
  transition: transform .35s var(--ease), color .2s;
}
.bd-faq-q.active svg { color: var(--teal); }
.bd-faq-a {
  padding: 0 1.25rem 1.1rem;
  font-family: var(--ff-body); font-size: .9rem; font-weight: 300;
  color: var(--g300); line-height: 1.7;
}

.bd-faq-enter, .bd-faq-leave {
  transition: opacity .25s var(--ease), max-height .3s var(--ease);
  overflow: hidden;
}
.bd-faq-enter-start {
  opacity: 0; max-height: 0;
}
.bd-faq-enter-end {
  opacity: 1; max-height: 500px;
}
[x-cloak] { display: none !important; }

.bd-author-card {
  display: flex; align-items: center; gap: 1.25rem;
  margin-top: 3rem; padding: 1.75rem;
  background: rgba(var(--card-rgb), .4);
  border: 1px solid var(--g700); border-radius: 16px;
}
.bd-author-card-avatar {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-body); font-size: 1.2rem; font-weight: 600;
  color: var(--bg);
}
.bd-author-card-info { display: flex; flex-direction: column; gap: .15rem; }
.bd-author-card-label {
  font-family: var(--ff-body); font-size: .72rem; font-weight: 400;
  color: var(--g500); text-transform: uppercase; letter-spacing: .1em;
}
.bd-author-card-name {
  font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600;
  color: var(--white);
}
.bd-author-card-date {
  font-family: var(--ff-body); font-size: .82rem; font-weight: 300;
  color: var(--g400);
}

.bd-related { padding: 4rem 2rem 2rem; }
.bd-related-header { text-align: center; margin-bottom: 2.5rem; }
.bd-related-title {
  font-family: var(--ff-head); font-size: 2rem; font-weight: 600;
  color: var(--white); margin-bottom: .5rem;
}
.bd-related-sub {
  font-family: var(--ff-body); font-size: .9rem; color: var(--g400);
}
.bd-related-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 1rem;
  scrollbar-width: thin; scrollbar-color: var(--g600) transparent;
}
.bd-related-scroll::-webkit-scrollbar { height: 4px; }
.bd-related-scroll::-webkit-scrollbar-track { background: transparent; }
.bd-related-scroll::-webkit-scrollbar-thumb { background: var(--g600); border-radius: 4px; }
.bd-related-track {
  display: flex; gap: 1.5rem;
  max-width: 1280px; margin: 0 auto;
  padding: 0 2rem;
}
.bd-related-track .bl-card {
  min-width: 320px; max-width: 380px; flex-shrink: 0;
}

@media (max-width: 1024px) {
  .bl-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .bl-hero { padding: 9rem 2rem 3rem; }
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-card--large { grid-column: span 2; }
  .bd-layout { grid-template-columns: 1fr; }
  .bd-sidebar { display: none; }
  .bd-article { max-width: 780px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .bl-hero { padding: 8rem 1.5rem 2.5rem; }
  .bl-hero-title { font-size: clamp(2.4rem, 8vw, 3.5rem); }
  .bl-hero-inner { gap: 2rem; }
  .bl-hero-card-img-wrap { height: 200px; }

  .bl-toolbar-inner { flex-direction: column; align-items: stretch; gap: 1rem; }
  .bl-search-wrap { flex: 1 1 100%; }
  .bl-sort-wrap { margin-left: 0; }

  .bl-filters {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: .3rem; gap: .35rem;
    scrollbar-width: none;
  }
  .bl-filters::-webkit-scrollbar { display: none; }
  .bl-pill { white-space: nowrap; flex-shrink: 0; }

  .bl-grid { grid-template-columns: 1fr; }
  .bl-card--large { grid-column: span 1; }
  .bl-card--large .bl-card-img-wrap { height: 220px; }
  .bl-container { padding: 0 1.25rem; }
  .bl-content { padding: 2rem 0 1rem; }

  .bl-active-filter { flex-direction: column; gap: .5rem; text-align: center; }

  .bl-hero-stats { gap: 1rem; }
  .bl-stat-num { font-size: 1.8rem; }

  .bd-hero { min-height: 420px; }
  .bd-hero-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .bd-hero-content { padding: 0 1.5rem 2.5rem; }
  .bd-hero-meta { flex-direction: column; align-items: flex-start; }
  .bd-layout { padding: 2rem 1.25rem 3rem; gap: 0; }
  .bd-share { flex-direction: column; gap: .75rem; align-items: flex-start; }
  .bd-content { font-size: 1rem; }
  .bd-author-card { flex-direction: column; text-align: center; }
  .bd-related-track { padding: 0 1.25rem; }
  .bd-related-track .bl-card { min-width: 280px; }

  .bl-pagination { gap: .25rem; flex-wrap: wrap; }
  .bl-page-btn { min-width: 36px; height: 36px; font-size: .8rem; }

  .bl-newsletter { padding: 2.5rem 1rem; }
  .bl-newsletter-inner { padding: 2.5rem 1.5rem; }
  .bl-newsletter-title { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .bl-hero { padding: 7rem 1rem 2rem; }
  .bl-hero-card-body { padding: 1.25rem; }
  .bl-hero-sub { font-size: .95rem; }
  .bl-card-body { padding: 1rem 1.15rem 1.25rem; }
  .bl-card-title { font-size: 1.05rem; }
  .bl-card-excerpt { font-size: .8rem; }
  .bl-card-img-wrap { height: 180px; }
  .bd-hero-content { padding: 0 1rem 2rem; }
  .bd-hero-details { flex-direction: column; align-items: flex-start; gap: .4rem; }
  .bd-content h2 { font-size: 1.3rem; }
  .bd-content h3 { font-size: 1.1rem; }
}

.sv-hero {
  padding: 10rem 2rem 4rem;
  position: relative; overflow: hidden;
  max-width: 1360px; margin: 0 auto;
}
.sv-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse 50% 45% at 70% 50%, rgba(var(--indigo-rgb), .05) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 25% 70%, rgba(var(--teal-rgb), .04) 0%, transparent 70%);
  pointer-events: none;
}
.sv-hero-inner {
  max-width: 620px; position: relative; z-index: 1;
}
.sv-hero-title {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 1.05; letter-spacing: -.02em;
  background: linear-gradient(135deg, var(--white) 40%, var(--g300));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 1.25rem;
}
.sv-hero-sub {
  font-family: var(--ff-body); font-size: 1.1rem; font-weight: 300;
  color: var(--g300); line-height: 1.7; max-width: 540px;
  margin-bottom: 2.5rem;
}
.sv-hero-stats {
  display: flex; align-items: center; gap: 1.5rem;
}
.sv-stat { display: flex; flex-direction: column; }
.sv-stat-num {
  font-family: var(--ff-head); font-size: 2.4rem; font-weight: 600;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.1;
}
.sv-stat-label {
  font-family: var(--ff-body); font-size: .78rem; font-weight: 400;
  color: var(--g400); text-transform: uppercase; letter-spacing: .1em;
  margin-top: .2rem;
}
.sv-stat-divider {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, transparent, var(--g600), transparent);
}

.sv-hero-card {
  position: absolute; top: 10rem; right: 2rem; z-index: 2;
  width: 380px; text-decoration: none; color: inherit;
  background: rgba(var(--card-rgb), .55);
  border: 1px solid var(--g700); border-radius: 16px;
  overflow: hidden;
  opacity: 0; transform: translateY(20px);
  animation: svHeroCardIn .8s var(--ease) .4s forwards;
  transition: transform .45s var(--ease), border-color .35s, box-shadow .35s;
}
@keyframes svHeroCardIn {
  to { opacity: 1; transform: translateY(0); }
}
.sv-hero-card:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--indigo-rgb), .25);
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), .4), 0 0 30px rgba(var(--indigo-rgb), .06);
}
.sv-hero-card-img-wrap {
  position: relative; overflow: hidden; height: 200px;
}
.sv-hero-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.sv-hero-card:hover .sv-hero-card-img { transform: scale(1.06); }
.sv-hero-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g800), var(--g900));
}
.sv-hero-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(var(--scrim-rgb), .6) 100%);
}
.sv-hero-card-badge {
  position: absolute; top: .8rem; right: .8rem;
  font-family: var(--ff-body); font-size: .65rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .65rem; border-radius: 6px;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg);
}
.sv-hero-card-body { padding: 1.25rem 1.5rem 1.5rem; }
.sv-hero-card-icon {
  color: var(--teal); margin-bottom: .5rem;
}
.sv-hero-card-icon svg { width: 26px; height: 26px; }
.sv-hero-card-title {
  font-family: var(--ff-head); font-size: 1.25rem; font-weight: 600;
  color: var(--white); line-height: 1.3; margin-bottom: .4rem;
  transition: color .3s;
}
.sv-hero-card:hover .sv-hero-card-title { color: var(--indigo); }
.sv-hero-card-excerpt {
  font-family: var(--ff-body); font-size: .82rem; font-weight: 300;
  color: var(--g400); line-height: 1.6; margin-bottom: .75rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-hero-card-meta {
  display: flex; align-items: center; gap: .75rem;
}
.sv-hero-card-price {
  font-family: var(--ff-body); font-size: .78rem; font-weight: 500;
  color: var(--teal);
}
.sv-hero-card-duration {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--ff-body); font-size: .75rem; font-weight: 400;
  color: var(--g400);
}

.sv-process {
  border-top: 1px solid var(--g700); border-bottom: 1px solid var(--g700);
  background: rgba(var(--surface-rgb), .5);
  padding: 3rem 2rem;
}
.sv-process-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: flex-start; justify-content: center;
  gap: 3rem;
}
.sv-process-item {
  flex: 1; text-align: center; max-width: 280px;
  opacity: 0; transform: translateY(16px);
  transition: opacity .05s, transform .05s;
}
.sv-process-item.sv-revealed {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s var(--ease) var(--delay, 0s),
              transform .6s var(--ease) var(--delay, 0s);
}
.sv-process-item:nth-child(1) { --delay: 0s; }
.sv-process-item:nth-child(3) { --delay: .1s; }
.sv-process-item:nth-child(5) { --delay: .2s; }
.sv-process-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(var(--teal-rgb), .06);
  border: 1px solid rgba(var(--teal-rgb), .15);
  color: var(--teal); margin-bottom: .85rem;
}
.sv-process-title {
  font-family: var(--ff-head); font-size: 1.15rem; font-weight: 600;
  color: var(--white); margin-bottom: .35rem;
}
.sv-process-desc {
  font-family: var(--ff-body); font-size: .82rem; font-weight: 300;
  color: var(--g400); line-height: 1.6;
}
.sv-process-divider {
  width: 1px; min-height: 60px; align-self: center;
  background: linear-gradient(180deg, transparent, var(--g600), transparent);
  flex-shrink: 0;
}

.sv-section-header {
  margin-bottom: 2.5rem;
}
.sv-section-title {
  font-family: var(--ff-head); font-size: 2rem; font-weight: 600;
  color: var(--white); margin-bottom: .4rem;
}
.sv-section-sub {
  font-family: var(--ff-body); font-size: .92rem; font-weight: 300;
  color: var(--g400); line-height: 1.6;
}

.sv-content { padding: 3rem 0 2rem; }
.sv-container { max-width: 1280px; margin: 0 auto; padding: 0 2rem; }

.sv-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(3, 1fr);
}

.sv-card {
  opacity: 0; transform: translateY(24px);
  transition: opacity .05s, transform .05s;
}
.sv-card.sv-revealed {
  opacity: 1; transform: translateY(0);
  transition: opacity .6s var(--ease) var(--delay, 0s),
              transform .6s var(--ease) var(--delay, 0s);
}
.sv-card-link {
  display: flex; flex-direction: column;
  background: rgba(var(--card-rgb), .45);
  border: 1px solid var(--g700); border-radius: 16px;
  overflow: hidden; text-decoration: none; color: inherit;
  height: 100%;
  transition: transform .45s var(--ease), border-color .35s, box-shadow .35s;
}
.sv-card-link:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--indigo-rgb), .25);
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb), .35), 0 0 30px rgba(var(--indigo-rgb), .05);
}

.sv-card-img-wrap {
  position: relative; overflow: hidden;
  height: 200px; flex-shrink: 0;
}
.sv-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--ease);
}
.sv-card-link:hover .sv-card-img { transform: scale(1.05); }
.sv-card-img-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--g800), var(--g900));
  color: var(--g500);
}
.sv-card-placeholder-icon {
  color: var(--teal); opacity: .6;
}
.sv-card-placeholder-icon svg { width: 48px; height: 48px; }
.sv-card-img-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(var(--scrim-rgb), .5) 100%);
  opacity: 0; transition: opacity .4s;
}
.sv-card-link:hover .sv-card-img-overlay { opacity: 1; }
.sv-card-featured-badge {
  position: absolute; top: .85rem; right: .85rem;
  font-family: var(--ff-body); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 6px;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg);
}

.sv-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; flex: 1;
}
.sv-card-icon {
  color: var(--teal); margin-bottom: .6rem;
  opacity: .8; transition: opacity .3s;
}
.sv-card-icon svg { width: 28px; height: 28px; }
.sv-card-link:hover .sv-card-icon { opacity: 1; }
.sv-card-title {
  font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600;
  color: var(--white); line-height: 1.3; margin-bottom: .5rem;
  transition: color .3s;
}
.sv-card-link:hover .sv-card-title { color: var(--indigo); }
.sv-card-desc {
  font-family: var(--ff-body); font-size: .85rem; font-weight: 300;
  color: var(--g400); line-height: 1.6; margin-bottom: auto;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1.25rem; padding-top: .85rem;
  border-top: 1px solid var(--g700);
}
.sv-card-chips {
  display: flex; align-items: center; gap: .6rem;
}
.sv-card-price {
  font-family: var(--ff-body); font-size: .8rem; font-weight: 500;
  color: var(--teal);
}
.sv-card-duration {
  font-family: var(--ff-body); font-size: .75rem; font-weight: 400;
  color: var(--g500); padding: .15rem .5rem;
  background: var(--g800); border-radius: 4px;
}
.sv-card-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--g800); border: 1px solid var(--g700);
  color: var(--g400);
  transition: all .3s var(--ease);
}
.sv-card-link:hover .sv-card-arrow {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  border-color: transparent; color: var(--bg);
  transform: translateX(3px);
}

.sv-cta {
  padding: 4rem 2rem; position: relative;
}
.sv-cta-inner {
  max-width: 640px; margin: 0 auto; text-align: center;
  position: relative; padding: 3.5rem 2.5rem;
  background: rgba(var(--card-rgb), .5);
  border: 1px solid var(--g700); border-radius: 24px;
  overflow: hidden;
}
.sv-cta-glow {
  position: absolute; top: -50%; left: 50%; transform: translateX(-50%);
  width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--indigo-rgb), .08) 0%, transparent 70%);
  pointer-events: none;
}
.sv-cta-title {
  font-family: var(--ff-head); font-size: 2rem; font-weight: 600;
  color: var(--white); margin-bottom: .75rem; position: relative;
}
.sv-cta-text {
  font-family: var(--ff-body); font-size: .95rem; font-weight: 300;
  color: var(--g300); line-height: 1.7; position: relative;
  margin-bottom: 1.5rem;
}
.sv-cta-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem; border-radius: 999px;
  font-family: var(--ff-body); font-size: .9rem; font-weight: 500;
  letter-spacing: .03em; text-decoration: none;
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: var(--bg); border: none; cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s;
  position: relative;
}
.sv-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(var(--teal-rgb), .2);
}

.sd-hero {
  position: relative; min-height: 480px;
  display: flex; align-items: flex-end; overflow: hidden;
}
.sd-hero-img-wrap {
  position: absolute; inset: 0;
}
.sd-hero-img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.65) saturate(1.1);
}
.sd-hero-no-img {
  background: linear-gradient(135deg, var(--g900), var(--g800));
}
.sd-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .3) 0%,
    rgba(var(--scrim-rgb), .55) 45%,
    rgba(var(--scrim-rgb), .95) 85%,
    var(--bg) 100%
  );
}
.sd-hero-content {
  position: relative; z-index: 2;
  max-width: 820px; padding: 0 2rem 3.5rem;
  margin: 0 auto; width: 100%;
}
.sd-hero-icon {
  color: var(--teal); margin-bottom: 1rem;
}
.sd-hero-icon svg { width: 40px; height: 40px; }
.sd-hero-title {
  font-family: var(--ff-head); font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  line-height: 1.15; letter-spacing: -.01em;
  color: var(--white); margin-bottom: 1rem;
}
.sd-hero-sub {
  font-family: var(--ff-body); font-size: 1.05rem; font-weight: 300;
  color: var(--g300); line-height: 1.7; max-width: 600px;
  margin-bottom: 1.5rem;
}
.sd-hero-chips {
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.sd-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--ff-body); font-size: .8rem; font-weight: 400;
  color: var(--g300); padding: .4rem .85rem;
  background: rgba(var(--card-rgb), .5);
  border: 1px solid var(--g700); border-radius: 8px;
}
.sd-chip--accent {
  color: var(--teal);
  border-color: rgba(var(--teal-rgb), .2);
  background: rgba(var(--teal-rgb), .06);
}

.sd-layout {
  max-width: 820px; margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.sd-article { min-width: 0; }

.sd-inline-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; margin-top: 3rem; padding: 2rem;
  background: rgba(var(--card-rgb), .4);
  border: 1px solid var(--g700); border-radius: 16px;
  flex-wrap: wrap;
}
.sd-inline-cta-text { flex: 1; min-width: 200px; }
.sd-inline-cta-title {
  font-family: var(--ff-head); font-size: 1.3rem; font-weight: 600;
  color: var(--white); margin-bottom: .3rem;
}
.sd-inline-cta-sub {
  font-family: var(--ff-body); font-size: .88rem; font-weight: 300;
  color: var(--g400);
}

.sd-related { padding: 4rem 2rem 2rem; }
.sd-related-header { text-align: center; margin-bottom: 2.5rem; }
.sd-related-title {
  font-family: var(--ff-head); font-size: 2rem; font-weight: 600;
  color: var(--white); margin-bottom: .5rem;
}
.sd-related-sub {
  font-family: var(--ff-body); font-size: .9rem; color: var(--g400);
}
.sd-related-grid {
  display: grid; gap: 2rem; max-width: 1280px; margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

@media (max-width: 1024px) {
  .sv-grid { grid-template-columns: repeat(2, 1fr); }
  .sv-hero-card { position: static; width: 100%; margin-top: 2.5rem; animation-delay: 0s; }
  .sv-hero { display: block; }
}

@media (max-width: 768px) {
  .sv-hero { padding: 8rem 1.5rem 2.5rem; }
  .sv-hero-title { font-size: clamp(2.4rem, 8vw, 3.5rem); }
  .sv-grid { grid-template-columns: 1fr; }
  .sv-container { padding: 0 1.25rem; }
  .sv-content { padding: 2rem 0 1rem; }
  .sv-hero-stats { gap: 1rem; }
  .sv-stat-num { font-size: 1.8rem; }
  .sv-card-img-wrap { height: 180px; }

  .sv-process { padding: 2rem 1.25rem; }
  .sv-process-inner { flex-direction: column; align-items: center; gap: 1.5rem; }
  .sv-process-divider { width: 40px; min-height: 1px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--g600), transparent); }
  .sv-process-item { max-width: 100%; }

  .sv-section-header { margin-bottom: 2rem; }
  .sv-section-title { font-size: 1.6rem; }

  .sv-cta { padding: 2.5rem 1rem; }
  .sv-cta-inner { padding: 2.5rem 1.5rem; }
  .sv-cta-title { font-size: 1.6rem; }

  .sd-hero { min-height: 400px; }
  .sd-hero-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .sd-hero-content { padding: 0 1.5rem 2.5rem; }
  .sd-layout { padding: 2rem 1.25rem 3rem; }
  .sd-inline-cta { flex-direction: column; text-align: center; }
  .sd-related { padding: 2.5rem 1.25rem 2rem; }
  .sd-related-grid { grid-template-columns: 1fr; }
  .sd-related-title { font-size: 1.6rem; }
}

@media (max-width: 480px) {
  .sv-hero { padding: 7rem 1rem 2rem; }
  .sv-hero-sub { font-size: .95rem; }
  .sv-card-body { padding: 1rem 1.15rem 1.25rem; }
  .sv-card-title { font-size: 1.15rem; }
  .sv-card-desc { font-size: .8rem; }
  .sv-hero-card-body { padding: 1rem 1.15rem 1.25rem; }
  .sv-process-icon { width: 40px; height: 40px; }
  .sd-hero-content { padding: 0 1rem 2rem; }
  .sd-hero-chips { flex-direction: column; align-items: flex-start; }
  .sd-inline-cta { padding: 1.5rem; }
}

[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(var(--teal-rgb), .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--teal-rgb), .04) 1px, transparent 1px);
}

[data-theme="light"] #ambient { opacity: var(--ambient-opacity); }
[data-theme="light"] #ambient::after {
  background: radial-gradient(ellipse 90% 80% at 50% 50%, transparent 30%, rgba(var(--scrim-rgb),.5) 100%);
}
[data-theme="light"] .pool-1 {
  background: radial-gradient(circle, rgba(13,148,136,.15) 0%, transparent 70%);
}
[data-theme="light"] .pool-2 {
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
}
[data-theme="light"] .pool-3 {
  background: radial-gradient(circle, rgba(124,58,237,.10) 0%, transparent 70%);
}
[data-theme="light"] .pool-4 {
  background: radial-gradient(circle, rgba(13,148,136,.12) 0%, transparent 70%);
}

[data-theme="light"] #loader {
  background: rgba(var(--scrim-rgb), 0.65);
}
[data-theme="light"] .ld-blob-1 {
  background: radial-gradient(circle, rgba(13,148,136,.15) 0%, transparent 70%);
}
[data-theme="light"] .ld-blob-2 {
  background: radial-gradient(circle, rgba(99,102,241,.12) 0%, transparent 70%);
}
[data-theme="light"] .ld-sig-text {
  fill: var(--teal);
}

[data-theme="light"] body {
  font-weight: 400;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

[data-theme="light"] .nav-logo {
  background: linear-gradient(135deg, var(--white) 30%, var(--teal) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .nav-cta {
  border-color: rgba(var(--teal-rgb),.35);
  background: rgba(var(--teal-rgb),0.08);
  box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.05), 0 4px 16px rgba(var(--teal-rgb),0.08);
}
[data-theme="light"] .nav-cta:hover {
  background: rgba(var(--teal-rgb),0.18);
  border-color: rgba(var(--teal-rgb),.55);
  box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.08), 0 6px 28px rgba(var(--teal-rgb),0.15);
}

[data-theme="light"] .mn-logo {
  background: linear-gradient(135deg, var(--white) 30%, var(--teal) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(var(--overlay-rgb),.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--overlay-rgb),.035) 1px, transparent 1px);
}
[data-theme="light"] .hero-mq {
  color: rgba(var(--overlay-rgb), 0.06);
  -webkit-text-fill-color: rgba(var(--overlay-rgb), 0.06);
  -webkit-text-stroke: 1px rgba(var(--overlay-rgb),.08);
}
[data-theme="light"] h1.hero-hl em {
  color: var(--teal);
  -webkit-text-fill-color: var(--teal);
}
[data-theme="light"] .hs-num {
  background: linear-gradient(135deg, var(--white), var(--teal));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

[data-theme="light"] .btn-primary {
  background: rgba(var(--teal-rgb),0.10);
  border-color: rgba(var(--teal-rgb),.30);
  box-shadow:
    inset 0 1px 0 rgba(var(--overlay-rgb),0.06),
    0 4px 24px rgba(var(--teal-rgb),0.10),
    0 1px 3px rgba(var(--shadow-rgb),0.08);
}
[data-theme="light"] .btn-primary:hover {
  background: rgba(var(--teal-rgb),0.18);
  border-color: rgba(var(--teal-rgb),.55);
  box-shadow:
    inset 0 1px 0 rgba(var(--overlay-rgb),0.08),
    0 8px 40px rgba(var(--teal-rgb),0.18),
    0 2px 8px rgba(var(--shadow-rgb),0.1);
}
[data-theme="light"] .btn-ghost {
  border-color: rgba(var(--overlay-rgb),0.12);
  background: rgba(var(--overlay-rgb),0.04);
}
[data-theme="light"] .btn-ghost:hover {
  background: rgba(var(--teal-rgb),0.07);
  border-color: rgba(var(--teal-rgb),.25);
}

[data-theme="light"] .svc-card {
  background: rgba(var(--card-rgb), 0.55);
  border-color: rgba(var(--overlay-rgb), 0.08);
}
[data-theme="light"] .svc-card:hover {
  background: rgba(var(--card-rgb), 0.75);
  border-color: rgba(var(--overlay-rgb), 0.14);
  box-shadow: 0 8px 32px rgba(var(--shadow-rgb),0.08);
}
[data-theme="light"] .svc-icon {
  border-color: rgba(var(--overlay-rgb),0.08);
  background: rgba(var(--overlay-rgb),0.04);
}
[data-theme="light"] .svc-card:hover .svc-icon {
  border-color: rgba(var(--teal-rgb),.35);
  background: rgba(var(--teal-rgb),.08);
}
[data-theme="light"] .svc-card-glow {
  background: radial-gradient(
    400px circle at var(--mx, 50%) var(--my, 50%),
    rgba(var(--teal-rgb),.06) 0%, rgba(var(--indigo-rgb),.03) 45%, transparent 70%
  );
}

[data-theme="light"] #phil-frame::before {
  color: rgba(var(--overlay-rgb),0.03);
  -webkit-text-stroke: 1px rgba(var(--overlay-rgb),0.08);
}
[data-theme="light"] .phil-card-inner {
  background: rgba(var(--card-rgb), 0.55);
  border-color: rgba(var(--overlay-rgb), 0.08);
}
[data-theme="light"] .phil-card-glow {
  background: radial-gradient(500px circle at var(--mx,50%) var(--my,50%), rgba(var(--teal-rgb),.05), transparent 50%);
}

[data-theme="light"] .work-grid { background: var(--g700); }
[data-theme="light"] .work-item { background: var(--g900); }
[data-theme="light"] .wi-overlay {
  background: linear-gradient(to top, rgba(var(--scrim-rgb),.85) 0%, rgba(var(--scrim-rgb),.2) 50%, transparent 100%);
}
[data-theme="light"] .wi-tag {
  border-color: rgba(var(--teal-rgb),.30);
  background: rgba(var(--scrim-rgb),.5);
}
[data-theme="light"] .wi-btn {
  background: rgba(var(--teal-rgb),0.12);
  border-color: rgba(var(--teal-rgb),.35);
  box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.06), 0 4px 20px rgba(var(--teal-rgb),0.1);
}

[data-theme="light"] .faq-q:hover { color: var(--g200); }
[data-theme="light"] .faq-icon {
  border-color: rgba(var(--overlay-rgb),0.10);
  background: rgba(var(--overlay-rgb),0.04);
}
[data-theme="light"] .faq-item.open .faq-icon {
  background: rgba(var(--teal-rgb),0.12);
  border-color: rgba(var(--teal-rgb),.40);
}

[data-theme="light"] h2.cta-hl em {
  color: var(--teal);
  -webkit-text-fill-color: var(--teal);
}
[data-theme="light"] .btn-cta-primary {
  background: linear-gradient(135deg, rgba(var(--teal-rgb),.12) 0%, rgba(var(--indigo-rgb),.08) 100%);
  border-color: rgba(var(--teal-rgb),.25);
  box-shadow:
    inset 0 1px 0 rgba(var(--overlay-rgb),.06),
    0 6px 32px rgba(var(--teal-rgb),.12),
    0 2px 6px rgba(var(--shadow-rgb),.08);
}
[data-theme="light"] .btn-cta-primary:hover {
  border-color: rgba(var(--teal-rgb),.45);
  box-shadow:
    inset 0 1px 0 rgba(var(--overlay-rgb),.08),
    0 12px 48px rgba(var(--teal-rgb),.18),
    0 4px 12px rgba(var(--shadow-rgb),.1);
  background: linear-gradient(135deg, rgba(var(--teal-rgb),.2) 0%, rgba(var(--indigo-rgb),.14) 100%);
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-ta,
[data-theme="light"] .form-select {
  background: rgba(var(--card-rgb), 0.55);
  border-color: rgba(var(--overlay-rgb), 0.10);
  box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.03);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-ta:focus,
[data-theme="light"] .form-select:focus {
  border-color: rgba(var(--teal-rgb),.40);
  background: rgba(var(--card-rgb), 0.65);
  box-shadow: inset 0 1px 0 rgba(var(--overlay-rgb),0.04), 0 0 0 3px rgba(var(--teal-rgb),0.08);
}
[data-theme="light"] .form-submit {
  background: rgba(var(--teal-rgb),0.10);
  border-color: rgba(var(--teal-rgb),.30);
  box-shadow:
    inset 0 1px 0 rgba(var(--overlay-rgb),0.06),
    0 4px 20px rgba(var(--teal-rgb),0.08);
}
[data-theme="light"] .form-submit:hover {
  background: rgba(var(--teal-rgb),0.18);
  border-color: rgba(var(--teal-rgb),.50);
}

[data-theme="light"] footer::before {
  background:
    radial-gradient(ellipse 55% 40% at 0% 100%,  rgba(var(--teal-rgb),.06)  0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 100% 0%,  rgba(var(--indigo-rgb),.05) 0%, transparent 70%);
}
[data-theme="light"] footer::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--teal-rgb),.25) 20%,
    rgba(var(--indigo-rgb),.30) 50%,
    rgba(var(--teal-rgb),.25) 80%,
    transparent 100%
  );
}
[data-theme="light"] .ft-wordmark {
  -webkit-text-stroke: 1px rgba(var(--overlay-rgb),.04);
}
[data-theme="light"] .ft-brand {
  background: linear-gradient(135deg, var(--white) 20%, var(--teal) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .ft-brand-sub {
  background: linear-gradient(90deg, var(--teal), var(--indigo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .ft-avail {
  background: rgba(var(--green-rgb),.06);
  border-color: rgba(var(--green-rgb),.20);
  color: rgba(var(--green-rgb),.8);
}
[data-theme="light"] .ft-social {
  border-color: rgba(var(--overlay-rgb),.08);
  background: rgba(var(--overlay-rgb),.03);
}
[data-theme="light"] .ft-social:hover {
  border-color: rgba(var(--teal-rgb),.35);
  background: rgba(var(--teal-rgb),.06);
}
[data-theme="light"] .ft-divider {
  background: linear-gradient(90deg, transparent 0%, var(--g700) 20%, var(--g700) 80%, transparent 100%);
}

[data-theme="light"] .pg-title {
  background: linear-gradient(135deg, var(--white) 40%, var(--g300));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .pg-breadcrumb {
  background: rgba(var(--card-rgb), .45);
  border-color: var(--g700);
}

[data-theme="light"] .bl-hero-title,
[data-theme="light"] .sv-hero-title {
  background: linear-gradient(135deg, var(--white) 40%, var(--g300));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .bl-toolbar {
  background: rgba(var(--scrim-rgb), .85);
}
[data-theme="light"] .bl-stat-num,
[data-theme="light"] .sv-stat-num {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="light"] .bl-card-link,
[data-theme="light"] .sv-card-link {
  background: rgba(var(--card-rgb), .45);
  border-color: rgba(var(--overlay-rgb), .08);
}
[data-theme="light"] .bl-card-link:hover,
[data-theme="light"] .sv-card-link:hover {
  border-color: rgba(var(--teal-rgb), .2);
  box-shadow: 0 12px 40px rgba(var(--shadow-rgb),.08), 0 0 20px rgba(var(--teal-rgb), .04);
}
[data-theme="light"] .bl-hero-card {
  background: rgba(var(--card-rgb), .45);
  border-color: rgba(var(--overlay-rgb), .08);
}
[data-theme="light"] .bl-hero-card:hover {
  border-color: rgba(var(--teal-rgb), .2);
  box-shadow: 0 16px 48px rgba(var(--shadow-rgb),.1), 0 0 30px rgba(var(--teal-rgb), .05);
}

[data-theme="light"] .bd-hero-scrim {
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .2) 0%,
    rgba(var(--scrim-rgb), .5) 50%,
    rgba(var(--scrim-rgb), .9) 85%,
    var(--bg) 100%
  );
}
[data-theme="light"] .sd-hero-scrim {
  background: linear-gradient(180deg,
    rgba(var(--scrim-rgb), .2) 0%,
    rgba(var(--scrim-rgb), .45) 45%,
    rgba(var(--scrim-rgb), .9) 85%,
    var(--bg) 100%
  );
}
[data-theme="light"] .bd-content blockquote {
  background: rgba(var(--card-rgb), .35);
}
[data-theme="light"] .bd-content code {
  background: var(--g800);
  color: var(--teal);
  border-color: var(--g700);
}
[data-theme="light"] .bd-content pre {
  background: var(--g800);
  border-color: var(--g700);
}

[data-theme="light"] .bl-search,
[data-theme="light"] .pg-search {
  background: var(--g800);
  border-color: var(--g700);
}
[data-theme="light"] .bl-search:focus,
[data-theme="light"] .pg-search:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(var(--teal-rgb),.08);
}
[data-theme="light"] .bl-pill.active {
  background: rgba(var(--teal-rgb), .10);
  border-color: rgba(var(--teal-rgb), .2);
}

[data-theme="light"] .bl-page-btn.active,
[data-theme="light"] .pg-pagination .active,
[data-theme="light"] .pg-pill.active {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: #fff;
}

[data-theme="light"] #wa-fab {
  background: rgba(245,242,237, 0.85);
  border-color: rgba(13,148,136,.25);
}
[data-theme="light"] #wa-fab:hover {
  background: rgba(245,242,237, 0.95);
}
[data-theme="light"] #wa-fab svg {
  fill: var(--teal);
}
[data-theme="light"] #wa-fab-label {
  background: linear-gradient(90deg, var(--teal), var(--indigo));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
@keyframes waPulseLight {
  0%   { box-shadow: 0 0 0 0   rgba(13,148,136,.45), 0 4px 24px rgba(13,148,136,.15), 0 2px 10px rgba(0,0,0,.1); }
  60%  { box-shadow: 0 0 0 12px rgba(13,148,136,.0),  0 4px 24px rgba(13,148,136,.15), 0 2px 10px rgba(0,0,0,.1); }
  100% { box-shadow: 0 0 0 0   rgba(13,148,136,.0),  0 4px 24px rgba(13,148,136,.15), 0 2px 10px rgba(0,0,0,.1); }
}
[data-theme="light"] #wa-fab {
  animation-name: waPulseLight;
}

[data-theme="light"] .cta-badge {
  background: rgba(var(--green-rgb),0.07);
  border-color: rgba(var(--green-rgb),.22);
  color: rgba(var(--green-rgb),.9);
}

[data-theme="light"] .sv-process {
  background: rgba(var(--surface-rgb), .5);
}
[data-theme="light"] .sv-process-icon {
  background: rgba(var(--teal-rgb), .06);
  border-color: rgba(var(--teal-rgb), .15);
}

[data-theme="light"] .bl-newsletter-inner,
[data-theme="light"] .sv-cta-inner {
  background: rgba(var(--card-rgb), .45);
  border-color: rgba(var(--overlay-rgb), .08);
}

[data-theme="light"] .sd-inline-cta {
  background: rgba(var(--card-rgb), .35);
  border-color: rgba(var(--overlay-rgb), .08);
}

[data-theme="light"] .hero-ticker {
  border-top-color: rgba(var(--overlay-rgb),0.07);
  border-bottom-color: rgba(var(--overlay-rgb),0.07);
  background: rgba(var(--surface-rgb),0.40);
}
[data-theme="light"] .hero-ticker::before {
  background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
[data-theme="light"] .hero-ticker::after {
  background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

[data-theme="light"] .bd-share-btn {
  background: var(--g800);
  border-color: var(--g700);
}
[data-theme="light"] .bd-share-btn:hover {
  border-color: var(--teal);
  color: var(--teal);
}

[data-theme="light"] .bd-author-card {
  background: rgba(var(--card-rgb), .35);
  border-color: rgba(var(--overlay-rgb), .08);
}

[data-theme="light"] .pg-form-input,
[data-theme="light"] .pg-form-textarea {
  background: var(--g800);
  border-color: var(--g700);
}
[data-theme="light"] .pg-form-input:focus,
[data-theme="light"] .pg-form-textarea:focus {
  border-color: var(--teal);
}
[data-theme="light"] .pg-form-btn {
  background: linear-gradient(135deg, var(--teal), var(--indigo));
  color: #fff;
}

[data-theme="light"] .pg-faq-item,
[data-theme="light"] .bd-faq-item {
  background: rgba(var(--card-rgb), .3);
  border-color: rgba(var(--overlay-rgb), .08);
}

[data-theme="light"] .pg-success {
  background: rgba(var(--teal-rgb), .05);
  border-color: rgba(var(--teal-rgb), .15);
}

[data-theme="light"] .pg-empty-icon,
[data-theme="light"] .bl-empty-icon {
  opacity: .3;
}

[data-theme="light"] .svc-body,
[data-theme="light"] .ct-txt,
[data-theme="light"] .cta-sub,
[data-theme="light"] .hero-sub,
[data-theme="light"] .phil-phase-body,
[data-theme="light"] .ps-body,
[data-theme="light"] .sv-hero-sub,
[data-theme="light"] .sv-process-desc,
[data-theme="light"] .sv-card-desc,
[data-theme="light"] .bl-card-excerpt,
[data-theme="light"] .bl-hero-card-excerpt {
  color: var(--g300);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--overlay-rgb), 0.10);
  border-radius: 50%;
  background: rgba(var(--overlay-rgb), 0.04);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .3s var(--ease);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
  outline: none;
}
.theme-toggle:hover {
  background: rgba(var(--overlay-rgb), 0.08);
  border-color: rgba(var(--overlay-rgb), 0.18);
  transform: scale(1.08);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform .45s var(--ease), opacity .3s;
  position: absolute;
}
.theme-toggle .icon-sun {
  color: #f59e0b;
  opacity: 0;
  transform: rotate(-90deg) scale(0.5);
}
.theme-toggle .icon-moon {
  color: var(--g300);
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
[data-theme="light"] .theme-toggle .icon-sun {
  opacity: 1;
  transform: rotate(0deg) scale(1);
}
[data-theme="light"] .theme-toggle .icon-moon {
  opacity: 0;
  transform: rotate(90deg) scale(0.5);
}

.nav-links .theme-toggle {
  margin-left: .5rem;
}

.mn-theme-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 0 0;
}
.mn-theme-toggle-wrap .theme-toggle {
  width: 48px;
  height: 48px;
}
.mn-theme-toggle-wrap .theme-toggle svg {
  width: 22px;
  height: 22px;
}

html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
  transition-duration: .4s !important;
}