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

    :root {
      --bg:          #04040A;
      --bg-2:        #08091A;
      --bg-3:        #0D0F22;
      --border:      #131628;
      --border-hi:   #1E2240;
      --text:        #E4E9FF;
      --text-muted:  #48527A;
      --text-dim:    #8A95C0;
      --accent:      #5B8AFF;
      --accent-glow: rgba(91,138,255,0.22);
      --accent-dim:  #2E4FCC;
      --cyan:        #00E5FF;
      --font:        'Inter', system-ui, sans-serif;
      --mono:        'JetBrains Mono','Fira Code',monospace;
      --r:           6px;
      --ease:        0.22s ease;
    }

    html { scroll-behavior: smooth; }
    /* fix: prevent browser auto-scroll to hash on reload */

    /* ─── Light theme ─── */
    [data-theme="light"] {
      --bg:          #E8ECF8;
      --bg-2:        #F6F8FF;
      --bg-3:        #FFFFFF;
      --border:      #D0D6EE;
      --border-hi:   #B0BADC;
      --text:        #07091A;
      --text-muted:  #6B779E;
      --text-dim:    #3A4268;
      --accent:      #2D5EDF;
      --accent-glow: rgba(45,94,223,0.12);
      --accent-dim:  #1B3DA8;
      --cyan:        #0077AA;
    }

    /* transitions for smooth switching */
    body, nav, .ticker, section, footer, .callout,
    .service-card, .about-block, .retainer-card,
    .adv-item, .forwhom-card, .process-step, .form {
      transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    }

    /* Nav light */
    [data-theme="light"] nav {
      background: rgba(232,236,248,0.92);
      border-bottom-color: var(--border);
    }
    [data-theme="light"] .nav-logo-name { color: var(--text); }

    /* Scrollbar light */
    [data-theme="light"] ::-webkit-scrollbar-track { background: var(--bg); }
    [data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-hi); }

    /* Ticker light */
    [data-theme="light"] .ticker { background: var(--bg-3); border-color: var(--border); }

    /* Hero light */
    [data-theme="light"] .hero-grid-overlay {
      background-image:
        linear-gradient(rgba(45,94,223,0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(45,94,223,0.12) 1px, transparent 1px);
    }
    [data-theme="light"] .hero-glow {
      background: radial-gradient(circle, rgba(45,94,223,0.14) 0%, transparent 65%);
    }
    [data-theme="light"] .hero-glow-2 {
      background: radial-gradient(circle, rgba(0,119,170,0.1) 0%, transparent 65%);
    }
    [data-theme="light"] .gradient-text {
      background: linear-gradient(135deg, #07091A 20%, #2D5EDF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    [data-theme="light"] .hero-eyebrow-line { background: var(--accent); }
    [data-theme="light"] .hero-stat { border-right-color: var(--border); }
    [data-theme="light"] .hero-stats { border-top-color: var(--border); }
    [data-theme="light"] .stat-val { color: var(--text); }
    [data-theme="light"] .stat-val em { color: var(--accent); }

    /* Buttons light */
    [data-theme="light"] .btn-primary {
      box-shadow: 0 4px 14px rgba(45,94,223,0.35), 0 1px 3px rgba(45,94,223,0.2);
    }
    [data-theme="light"] .btn-primary:hover {
      box-shadow: 0 6px 20px rgba(45,94,223,0.45), 0 2px 6px rgba(45,94,223,0.25);
    }
    [data-theme="light"] .btn-outline {
      background: var(--bg-3);
      border-color: var(--border);
      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    [data-theme="light"] .btn-outline:hover {
      border-color: var(--accent); color: var(--accent);
      box-shadow: 0 2px 8px rgba(45,94,223,0.15);
    }

    /* Cards light — elevation not glow */
    [data-theme="light"] .service-card {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .service-card:hover {
      border-color: rgba(45,94,223,0.3);
      box-shadow: 0 4px 24px rgba(45,94,223,0.12), 0 1px 4px rgba(0,0,0,0.08);
    }
    [data-theme="light"] .service-card::after {
      background: linear-gradient(135deg, rgba(45,94,223,0.06) 0%, transparent 60%);
    }
    [data-theme="light"] .about-block:hover {
      border-color: rgba(45,94,223,0.25);
      box-shadow: 0 4px 20px rgba(45,94,223,0.08);
    }
    [data-theme="light"] .about::before {
      background: radial-gradient(circle, rgba(45,94,223,0.07) 0%, transparent 70%);
    }
    [data-theme="light"] .process-step {
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .retainer-card {
      box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 4px 16px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .retainer-card.featured {
      border-color: rgba(45,94,223,0.5);
      box-shadow: 0 8px 32px rgba(45,94,223,0.14), 0 2px 8px rgba(45,94,223,0.1);
    }
    [data-theme="light"] .retainer-card.featured:hover {
      box-shadow: 0 12px 40px rgba(45,94,223,0.2), 0 4px 12px rgba(45,94,223,0.12);
    }
    [data-theme="light"] .adv-item {
      box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .adv-item:hover {
      border-color: rgba(45,94,223,0.2);
      box-shadow: 0 4px 20px rgba(45,94,223,0.1);
    }
    [data-theme="light"] .adv-icon {
      background: var(--bg);
    }
    [data-theme="light"] .adv-item:hover .adv-icon {
      border-color: var(--accent);
      box-shadow: 0 0 12px rgba(45,94,223,0.2);
    }
    [data-theme="light"] .form {
      box-shadow: 0 2px 8px rgba(0,0,0,0.06), 0 8px 32px rgba(0,0,0,0.04);
    }
    [data-theme="light"] .form-input:focus,
    [data-theme="light"] .form-select:focus,
    [data-theme="light"] .form-textarea:focus {
      box-shadow: 0 0 0 3px rgba(45,94,223,0.12);
    }
    [data-theme="light"] .callout {
      background: linear-gradient(135deg, #E8ECF8, #F0F3FF);
    }

    /* Radar light */
    [data-theme="light"] .radar-wrap { opacity: 0.35; }
    [data-theme="light"] .radar-ring { border-color: var(--accent); }
    [data-theme="light"] .radar-sweep { background: linear-gradient(90deg, var(--accent), transparent); }
    [data-theme="light"] .radar-crosshair-h,
    [data-theme="light"] .radar-crosshair-v { background: var(--accent); opacity: 0.3; }

    /* Section labels */
    [data-theme="light"] .label { color: var(--accent); }

    /* Tags */
    [data-theme="light"] .tag { border-color: var(--border); }
    [data-theme="light"] .tag:hover { border-color: var(--accent); color: var(--accent); }

    /* Nav scroll effect light */
    [data-theme="light"] nav.scrolled {
      border-bottom-color: rgba(45,94,223,0.2) !important;
    }

    /* ─── Theme toggle button ─── */
    .theme-toggle {
      width: 38px; height: 38px;
      border-radius: var(--r);
      border: 1px solid var(--border-hi);
      background: transparent;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      color: var(--text-dim);
      transition: border-color var(--ease), color var(--ease), background var(--ease);
      flex-shrink: 0;
    }
    .theme-toggle:hover {
      border-color: var(--accent);
      color: var(--accent);
      background: var(--accent-glow);
    }
    .theme-toggle svg { width: 16px; height: 16px; }
    .icon-sun { display: none; }
    .icon-moon { display: block; }
    [data-theme="light"] .icon-sun { display: block; }
    [data-theme="light"] .icon-moon { display: none; }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font);
      font-size: 16px;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }

    /* Scrollbar */
    ::-webkit-scrollbar { width: 4px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 4px; }

    .container { max-width: 1360px; margin: 0 auto; padding: 0 48px; }

    /* ─── Typography ─── */
    h1,h2,h3 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; }
    h1 { font-size: clamp(2.6rem,5.5vw,4.2rem); }
    h2 { font-size: clamp(1.8rem,3vw,2.6rem); }
    h3 { font-size: 1rem; font-weight: 600; }

    .label {
      font-family: var(--mono);
      font-size: 0.68rem;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--accent);
    }

    .gradient-text {
      background: linear-gradient(135deg, #fff 30%, var(--accent) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* ─── Buttons ─── */
    .btn {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 13px 28px; border-radius: var(--r);
      font-size: 0.875rem; font-weight: 500;
      cursor: pointer; transition: var(--ease); border: none;
      white-space: nowrap; position: relative; overflow: hidden;
    }
    .btn-primary {
      background: var(--accent); color: #fff;
      box-shadow: 0 0 32px rgba(91,138,255,0.45), 0 0 80px rgba(91,138,255,0.15);
    }
    .btn-primary:hover {
      background: #7099FF;
      box-shadow: 0 0 48px rgba(91,138,255,0.65), 0 0 100px rgba(91,138,255,0.2);
      transform: translateY(-1px);
    }
    .btn-outline {
      background: transparent;
      border: 1px solid var(--border-hi);
      color: var(--text-dim);
    }
    .btn-outline:hover { border-color: var(--accent); color: var(--accent); }

    /* ─── Nav ─── */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 100;
      background: rgba(7,8,15,0.8);
      backdrop-filter: blur(16px) saturate(180%);
      border-bottom: 1px solid var(--border);
      transition: border-color 0.3s;
    }
    .nav-inner {
      display: flex; align-items: center;
      justify-content: space-between; height: 64px;
    }
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logo-img { width: 28px; height: 28px; flex-shrink: 0; filter: brightness(0) invert(1); }
    [data-theme="light"] .nav-logo-img { filter: none; }
    .nav-logo-name {
      font-size: 1rem; font-weight: 800;
      letter-spacing: 0.08em; text-transform: uppercase;
      color: #fff;
    }
    .nav-logo-tag { font-family: var(--mono); font-size: 0.6rem; color: var(--text-muted); }
    .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
    .nav-links a { font-size: 0.82rem; font-weight: 500; color: var(--text-dim); transition: color var(--ease); }
    .nav-links a:hover { color: var(--text); }

    /* ─── Hamburger ─── */
    .hamburger {
      display: none;
      flex-direction: column; justify-content: center; align-items: center; gap: 5px;
      width: 36px; height: 36px; flex-shrink: 0;
      background: none; border: 1px solid var(--border); border-radius: var(--r);
      cursor: pointer; padding: 0;
      transition: border-color var(--ease);
    }
    .hamburger:hover { border-color: var(--border-hi); }
    .hamburger span {
      display: block; width: 16px; height: 1.5px;
      background: var(--text-dim); border-radius: 2px;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .nav-mobile {
      display: none;
      position: fixed; top: 64px; left: 0; right: 0; z-index: 99;
      background: rgba(7,8,15,0.97);
      backdrop-filter: blur(20px) saturate(180%);
      border-bottom: 1px solid var(--border);
      transform: translateY(-6px);
      opacity: 0; pointer-events: none;
      transition: transform 0.25s ease, opacity 0.25s ease;
    }
    .nav-mobile.open { transform: translateY(0); opacity: 1; pointer-events: all; }
    .nav-mobile-links {
      list-style: none; padding: 8px 24px 20px;
      display: flex; flex-direction: column;
    }
    .nav-mobile-links a {
      display: block; padding: 15px 0;
      font-size: 0.95rem; color: var(--text-dim);
      border-bottom: 1px solid var(--border);
      transition: color var(--ease);
    }
    .nav-mobile-links li:last-child a { border-bottom: none; }
    .nav-mobile-links a:hover { color: var(--text); }
    [data-theme="light"] .nav-mobile { background: rgba(224,229,244,0.97); }

    /* ─── Ticker ─── */
    .ticker {
      margin-top: 64px;
      background: var(--bg-2);
      border-bottom: 1px solid var(--border);
      padding: 11px 0; overflow: hidden;
    }
    .ticker-track {
      display: flex; gap: 0;
      -webkit-animation: ticker 30s linear infinite;
      animation: ticker 30s linear infinite;
      white-space: nowrap; width: max-content;
      will-change: transform;
    }
    .ticker-item {
      display: inline-flex; align-items: center; gap: 12px;
      padding: 0 36px;
      font-family: var(--mono); font-size: 0.65rem;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--text-muted);
    }
    .ticker-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
    @-webkit-keyframes ticker { 0%{-webkit-transform:translateX(0)} 100%{-webkit-transform:translateX(-50%)} }
    @keyframes ticker { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

    /* ─── Hero ─── */
    .hero {
      position: relative; min-height: 100vh;
      display: flex; align-items: center;
      padding: 20px 0 60px;
      overflow: hidden;
    }
    .hero .container { padding: 0 96px 0 48px; }
    #hero-canvas {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      pointer-events: none; opacity: 1;
    }
    .hero-grid-overlay {
      position: absolute; inset: 0;
      background-image:
        linear-gradient(var(--border) 1px, transparent 1px),
        linear-gradient(90deg, var(--border) 1px, transparent 1px);
      background-size: 60px 60px;
      opacity: 0.25; pointer-events: none;
      mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
    }
    .hero-glow {
      position: absolute; top: 0%; right: 0%;
      width: 800px; height: 800px;
      background: radial-gradient(circle, rgba(91,138,255,0.18) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-glow-2 {
      position: absolute; bottom: -100px; left: -150px;
      width: 600px; height: 600px;
      background: radial-gradient(circle, rgba(0,229,255,0.1) 0%, transparent 65%);
      pointer-events: none;
    }
    .hero-content { position: relative; z-index: 2; width: 100%; }
    .hero-eyebrow {
      display: flex; align-items: center; gap: 14px;
      margin-bottom: 36px;
    }
    .hero-eyebrow-line { width: 40px; height: 1px; background: var(--accent); }
    .hero h1 { margin-bottom: 28px; }
    .hero-sub {
      font-size: 1.05rem; color: var(--text-dim);
      max-width: 720px; margin-bottom: 48px; line-height: 1.8;
    }
    .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 80px; }
    .hero-stats {
      display: flex; gap: 0;
      border-top: 1px solid var(--border);
      padding-top: 40px; flex-wrap: wrap;
    }
    .hero-stat {
      padding-right: 48px; margin-right: 48px;
      border-right: 1px solid var(--border);
    }
    .hero-stat:last-child { border-right: none; padding-right: 0; margin-right: 0; }
    .stat-val {
      font-size: 2.2rem; font-weight: 800;
      letter-spacing: -0.04em; line-height: 1;
      color: #fff; margin-bottom: 6px;
    }
    .stat-val em { font-style: normal; color: var(--accent); }
    .stat-label { font-size: 0.75rem; color: var(--text-muted); line-height: 1.5; }

    /* Radar decoration */
    .radar-wrap {
      position: absolute; right: 8%; top: 50%; transform: translateY(-50%);
      z-index: 1; opacity: 0.75; pointer-events: none;
    }
    .radar { width: 340px; height: 340px; position: relative; }
    .radar-ring {
      position: absolute; border-radius: 50%;
      border: 1px solid var(--accent); top: 50%; left: 50%;
      transform: translate(-50%,-50%);
    }
    .radar-ring:nth-child(1) { width: 80px; height: 80px; }
    .radar-ring:nth-child(2) { width: 160px; height: 160px; opacity: 0.7; }
    .radar-ring:nth-child(3) { width: 240px; height: 240px; opacity: 0.5; }
    .radar-ring:nth-child(4) { width: 340px; height: 340px; opacity: 0.3; }
    .radar-sweep {
      position: absolute; top: 50%; left: 50%;
      width: 170px; height: 1px;
      background: linear-gradient(90deg, var(--accent), transparent);
      transform-origin: 0 50%;
      animation: sweep 4s linear infinite;
    }
    .radar-crosshair-h {
      position: absolute; top: 50%; left: 0; right: 0;
      height: 1px; background: var(--accent); opacity: 0.4;
    }
    .radar-crosshair-v {
      position: absolute; left: 50%; top: 0; bottom: 0;
      width: 1px; background: var(--accent); opacity: 0.4;
    }
    @keyframes sweep { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

    /* ─── Scroll animations ─── */
    .reveal {
      opacity: 0; transform: translateY(28px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    .reveal.visible { opacity: 1; transform: none; }
    .reveal-delay-1 { transition-delay: 0.1s; }
    .reveal-delay-2 { transition-delay: 0.2s; }
    .reveal-delay-3 { transition-delay: 0.3s; }
    .reveal-delay-4 { transition-delay: 0.4s; }

    /* ─── Section ─── */
    section { padding: 100px 0; }
    .section-header { margin-bottom: 64px; }
    .section-header .label { display: block; margin-bottom: 16px; }
    .section-header p { color: var(--text-muted); max-width: 500px; margin-top: 14px; font-size: 0.95rem; line-height: 1.8; }

    /* ─── About ─── */
    .about { background: var(--bg-2); position: relative; overflow: hidden; }
    .about::before {
      content: ''; position: absolute;
      top: -200px; left: -200px; width: 700px; height: 700px;
      background: radial-gradient(circle, rgba(91,138,255,0.09) 0%, transparent 70%);
      pointer-events: none;
    }
    .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
    .about-text p { color: var(--text-dim); margin-bottom: 18px; line-height: 1.85; }
    .about-text p strong { color: var(--text); font-weight: 600; }
    .about-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
    .tag {
      padding: 5px 14px;
      border: 1px solid var(--border-hi);
      border-radius: 100px; font-size: 0.75rem; color: var(--text-muted);
      transition: var(--ease);
    }
    .tag:hover { border-color: var(--accent); color: var(--accent); }
    .about-blocks { display: flex; flex-direction: column; gap: 3px; }
    .about-block {
      padding: 24px 28px;
      background: var(--bg-3);
      border: 1px solid var(--border);
      border-radius: var(--r);
      transition: border-color var(--ease), box-shadow var(--ease);
      cursor: default;
    }
    .about-block:hover {
      border-color: rgba(79,126,255,0.3);
      box-shadow: 0 0 24px rgba(79,126,255,0.08);
    }
    .about-block-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
    .about-block-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 8px var(--accent); }
    .about-block h3 { font-size: 0.9rem; }
    .about-block p { font-size: 0.8rem; color: var(--text-muted); line-height: 1.65; padding-left: 20px; }

    /* ─── Services ─── */
    .services-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; }
    .service-card {
      background: var(--bg-2); border: 1px solid var(--border);
      padding: 44px 40px; position: relative; overflow: hidden;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .service-card::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(135deg, var(--accent-glow) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.3s;
    }
    .service-card:hover { border-color: rgba(79,126,255,0.35); box-shadow: 0 0 40px rgba(79,126,255,0.08); }
    .service-card:hover::after { opacity: 1; }
    .service-card > * { position: relative; z-index: 1; }
    .service-num {
      font-family: var(--mono); font-size: 0.65rem;
      color: var(--accent-dim); letter-spacing: 0.12em;
      margin-bottom: 20px; display: flex; align-items: center; gap: 10px;
    }
    .service-num::after { content: ''; flex: 1; height: 1px; background: var(--border); }
    .service-card h3 { font-size: 1.15rem; margin-bottom: 14px; }
    .service-card > p { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 28px; line-height: 1.75; }
    .service-items { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .service-items li {
      font-size: 0.8rem; color: var(--text-muted);
      display: flex; align-items: flex-start; gap: 10px;
    }
    .service-items li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; }

    /* ─── Services tabs ─── */
    .stabs {
      display: flex; position: relative;
      border-bottom: 1px solid var(--border);
      margin-bottom: 0; gap: 0;
      overflow-x: auto; scrollbar-width: none;
    }
    .stabs::-webkit-scrollbar { display: none; }

    .stab {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; align-items: flex-start;
      gap: 4px; padding: 20px 28px;
      background: none; border: none; cursor: pointer;
      color: var(--text-muted); text-align: left;
      border-right: 1px solid var(--border);
      transition: color var(--ease), background var(--ease);
      position: relative; z-index: 1;
    }
    .stab:last-child { border-right: none; }
    .stab:hover { color: var(--text-dim); background: var(--accent-glow); }
    .stab.active { color: var(--text); }
    .stab-num {
      font-family: var(--mono); font-size: 0.62rem;
      letter-spacing: 0.12em; color: var(--accent); transition: color var(--ease);
    }
    .stab-name { font-size: 0.85rem; font-weight: 600; line-height: 1.3; }

    /* sliding ink indicator */
    .stab-ink {
      position: absolute; bottom: -1px; left: 0;
      height: 2px; background: var(--accent);
      transition: left 0.35s cubic-bezier(0.4,0,0.2,1),
                  width 0.35s cubic-bezier(0.4,0,0.2,1);
      box-shadow: 0 0 12px var(--accent);
      z-index: 2;
    }

    /* panels */
    .svc-panels {
      background: var(--bg-2);
      border: 1px solid var(--border);
      border-top: none;
      min-height: 360px;
      position: relative;
      overflow: hidden;
    }
    .svc-panel {
      display: none;
      grid-template-columns: 1fr 1fr;
      gap: 0; align-items: center;
      padding: 56px 52px;
      animation: svcFadeIn 0.4s ease;
    }
    .svc-panel.active { display: grid; }

    @keyframes svcFadeIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: none; }
    }

    .svc-desc {
      font-size: 1rem; color: var(--text-dim);
      line-height: 1.85; margin-bottom: 32px;
      max-width: 480px;
    }
    .svc-list {
      list-style: none; display: flex;
      flex-direction: column; gap: 14px;
      margin-bottom: 36px;
    }
    .svc-list li {
      display: flex; align-items: flex-start; gap: 12px;
      font-size: 0.9rem; color: var(--text-dim);
    }
    .svc-li-num {
      color: var(--accent); font-family: var(--mono);
      font-size: 0.85rem; flex-shrink: 0; margin-top: 1px;
    }

    .svc-visual {
      display: flex; align-items: center; justify-content: center;
      padding: 20px; opacity: 0.9;
    }
    .svc-visual svg { width: 100%; max-width: 280px; height: auto; }

    /* SVG animations */
    .vis-pulse {
      animation: visPulse 2.4s ease-in-out infinite;
    }
    @keyframes visPulse {
      0%,100% { opacity: 0.9; r: 4; }
      50%      { opacity: 0.4; r: 7; }
    }
    .scan-line {
      animation: scanMove 2.8s ease-in-out infinite;
    }
    .scan-rect {
      animation: scanMove 2.8s ease-in-out infinite;
    }
    @keyframes scanMove {
      0%   { transform: translateY(-40px); opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { transform: translateY(80px); opacity: 0; }
    }
    .legal-progress {
      stroke-dasharray: 200;
      stroke-dashoffset: 200;
      animation: drawLine 1.8s ease forwards;
    }
    @keyframes drawLine {
      to { stroke-dashoffset: 0; }
    }

    /* Services light theme */
    [data-theme="light"] .svc-panels {
      box-shadow: 0 2px 12px rgba(0,0,0,0.05);
    }
    [data-theme="light"] .stab.active { background: var(--bg-2); }
    [data-theme="light"] .stab:hover  { background: rgba(45,94,223,0.05); }

    /* Responsive services */
    @media (max-width: 760px) {
      .stab { padding: 14px 16px; }
      .stab-name { font-size: 0.75rem; }
      .svc-panel { grid-template-columns: 1fr; padding: 36px 28px; }
      .svc-visual { display: none; }
    }

    /* ─── Process ─── */
    .process { background: var(--bg-2); }
    .process-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
    .process-step {
      background: var(--bg-3); border: 1px solid var(--border);
      padding: 36px 28px; position: relative;
      transition: border-color var(--ease);
    }
    .process-step:hover { border-color: var(--border-hi); }
    .process-step-num {
      font-family: var(--mono); font-size: 3rem;
      font-weight: 800; color: var(--border-hi);
      line-height: 1; margin-bottom: 24px;
      transition: color var(--ease);
    }
    .process-step:hover .process-step-num { color: rgba(79,126,255,0.25); }
    .process-step h3 { font-size: 0.9rem; margin-bottom: 10px; }
    .process-step p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.65; }
    .process-connector {
      display: flex; align-items: center; justify-content: center;
      height: 2px; background: transparent;
      margin: 0 -1px; position: relative;
    }

    /* ─── Retainer ─── */
    .retainer-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
    .retainer-card {
      background: var(--bg-2); border: 1px solid var(--border);
      padding: 40px 32px; display: flex; flex-direction: column;
      position: relative; transition: border-color var(--ease), box-shadow var(--ease);
    }
    .retainer-card:hover { border-color: var(--border-hi); }
    .retainer-card.featured {
      background: var(--bg-3);
      border-color: rgba(91,138,255,0.6);
      box-shadow: 0 0 80px rgba(91,138,255,0.15), inset 0 0 80px rgba(91,138,255,0.05);
    }
    .retainer-card.featured:hover { border-color: var(--accent); box-shadow: 0 0 100px rgba(91,138,255,0.22), inset 0 0 80px rgba(91,138,255,0.07); }
    .retainer-badge {
      position: absolute; top: -1px; right: 24px;
      background: var(--accent); color: #fff;
      font-family: var(--mono); font-size: 0.62rem;
      font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; padding: 5px 12px;
      border-radius: 0 0 var(--r) var(--r);
    }
    .retainer-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
    .retainer-card > p { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 32px; line-height: 1.65; }
    .retainer-features { list-style: none; display: flex; flex-direction: column; gap: 13px; flex: 1; margin-bottom: 32px; }
    .retainer-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.8rem; color: var(--text-dim); }
    .retainer-features li::before { content: '✓'; color: var(--accent); font-size: 0.7rem; flex-shrink: 0; margin-top: 3px; }

    /* ─── Advantages ─── */
    .advantages { background: var(--bg-2); }
    .advantages-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
    .adv-item {
      padding: 36px 32px; background: var(--bg-3);
      border: 1px solid var(--border);
      transition: border-color var(--ease), transform var(--ease);
    }
    .adv-item:hover { border-color: rgba(79,126,255,0.25); transform: translateY(-2px); }
    .adv-icon {
      width: 44px; height: 44px;
      border: 1px solid var(--border-hi); border-radius: var(--r);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.1rem; margin-bottom: 20px;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .adv-item:hover .adv-icon { border-color: var(--accent); box-shadow: 0 0 16px rgba(79,126,255,0.2); }
    .adv-item h3 { font-size: 0.9rem; margin-bottom: 10px; }
    .adv-item p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.7; }

    /* ─── For Whom ─── */
    .forwhom-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 3px; }
    .forwhom-card {
      padding: 28px 24px; background: var(--bg-2);
      border: 1px solid var(--border);
      transition: border-color var(--ease);
    }
    .forwhom-card:hover { border-color: var(--border-hi); }
    .forwhom-icon { font-size: 1.4rem; margin-bottom: 14px; }
    .forwhom-card h3 { font-size: 0.88rem; margin-bottom: 8px; }
    .forwhom-card p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.6; }

    /* ─── Callout ─── */
    .callout {
      background: var(--bg-2);
      border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
    }
    .callout-inner {
      display: flex; align-items: center; justify-content: space-between;
      gap: 40px; padding: 60px 0; flex-wrap: wrap;
    }
    .callout h2 { font-size: clamp(1.4rem,2.5vw,2rem); max-width: 560px; }
    .callout h2 em { font-style: normal; color: var(--accent); }

    /* ─── Contact ─── */
    .contact { background: var(--bg-2); }
    .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
    .contact-info h2 { margin-bottom: 20px; }
    .contact-info p { color: var(--text-dim); margin-bottom: 40px; line-height: 1.85; }
    .contact-details { display: flex; flex-direction: column; gap: 16px; }
    .contact-detail { display: flex; align-items: center; gap: 14px; }
    .contact-icon {
      width: 38px; height: 38px; border: 1px solid var(--border-hi);
      border-radius: var(--r); display: flex; align-items: center;
      justify-content: center; font-size: 0.85rem; flex-shrink: 0;
      color: var(--accent);
    }
    .contact-detail-text { font-size: 0.875rem; }
    .contact-detail-label { font-size: 0.72rem; color: var(--text-muted); }

    /* ─── Form ─── */
    .form {
      background: var(--bg-3); border: 1px solid var(--border);
      border-radius: var(--r); padding: 40px;
    }
    .form-group { margin-bottom: 18px; }
    .form-label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 7px; }
    .form-input, .form-select, .form-textarea {
      width: 100%; background: var(--bg-2);
      border: 1px solid var(--border); border-radius: var(--r);
      padding: 11px 14px; color: var(--text);
      font-family: var(--font); font-size: 0.875rem;
      transition: border-color var(--ease), box-shadow var(--ease); outline: none;
    }
    .form-input:focus, .form-select:focus, .form-textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(79,126,255,0.1);
    }
    .form-textarea { resize: vertical; min-height: 96px; }
    .form-select option { background: var(--bg-3); }
    .form-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 14px; line-height: 1.6; }

    /* ─── Modal ─── */
    .modal-overlay {
      position: fixed; inset: 0; z-index: 1000;
      background: rgba(4,4,10,0.75);
      backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      opacity: 0; pointer-events: none;
      transition: opacity 0.25s ease;
    }
    .modal-overlay.open { opacity: 1; pointer-events: all; }

    .modal-box {
      background: var(--bg-3);
      border: 1px solid var(--border-hi);
      border-radius: 10px;
      width: 100%; max-width: 520px;
      max-height: 90vh; overflow-y: auto;
      scrollbar-width: thin;
      transform: translateY(16px) scale(0.97);
      transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
      opacity: 0;
      box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px var(--border);
    }
    .modal-box.open { transform: none; opacity: 1; }

    .modal-header {
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 16px;
      padding: 28px 28px 20px;
      border-bottom: 1px solid var(--border);
    }
    .modal-title { font-size: 1.1rem; font-weight: 700; }
    .modal-close {
      width: 32px; height: 32px; border-radius: var(--r);
      border: 1px solid var(--border); background: none;
      cursor: pointer; color: var(--text-muted);
      display: flex; align-items: center; justify-content: center;
      transition: border-color var(--ease), color var(--ease);
      flex-shrink: 0;
    }
    .modal-close:hover { border-color: var(--accent); color: var(--accent); }

    .modal-form { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 0; }

    .mform-group { margin-bottom: 18px; }
    .mform-label { display: block; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 8px; }

    /* Contact method pills */
    .contact-methods {
      display: grid; grid-template-columns: repeat(4,1fr); gap: 8px;
    }
    .cmethod {
      display: flex; flex-direction: column; align-items: center;
      gap: 6px; padding: 12px 8px;
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--r); cursor: pointer;
      color: var(--text-muted); font-size: 0.72rem; font-weight: 500;
      font-family: var(--font);
      transition: border-color var(--ease), color var(--ease), background var(--ease), box-shadow var(--ease);
    }
    .cmethod:hover { border-color: var(--border-hi); color: var(--text-dim); }
    .cmethod.active {
      border-color: var(--accent); color: var(--accent);
      background: var(--accent-glow);
      box-shadow: 0 0 16px rgba(91,138,255,0.15);
    }
    .cmethod svg { flex-shrink: 0; }

    /* Input with prefix */
    .mform-input-wrap {
      display: flex; align-items: center;
      background: var(--bg-2); border: 1px solid var(--border);
      border-radius: var(--r); overflow: hidden;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .mform-input-wrap:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .mform-prefix {
      padding: 0 12px; color: var(--text-muted);
      font-family: var(--mono); font-size: 0.85rem;
      border-right: 1px solid var(--border);
      height: 42px; display: flex; align-items: center;
      background: var(--bg-3); flex-shrink: 0;
    }
    .mform-input {
      flex: 1; background: none; border: none; outline: none;
      padding: 11px 14px; color: var(--text);
      font-family: var(--font); font-size: 0.875rem;
    }
    .mform-input-full {
      width: 100%; background: var(--bg-2);
      border: 1px solid var(--border); border-radius: var(--r);
      padding: 11px 14px; color: var(--text);
      font-family: var(--font); font-size: 0.875rem; outline: none;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .mform-input-full:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .mform-select {
      width: 100%; background: var(--bg-2);
      border: 1px solid var(--border); border-radius: var(--r);
      padding: 11px 14px; color: var(--text);
      font-family: var(--font); font-size: 0.875rem; outline: none;
      cursor: pointer;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .mform-select:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .mform-select option { background: var(--bg-3); }
    .mform-textarea {
      width: 100%; background: var(--bg-2);
      border: 1px solid var(--border); border-radius: var(--r);
      padding: 11px 14px; color: var(--text);
      font-family: var(--font); font-size: 0.875rem; outline: none;
      resize: vertical; min-height: 88px;
      transition: border-color var(--ease), box-shadow var(--ease);
    }
    .mform-textarea:focus {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px var(--accent-glow);
    }
    .mform-note {
      font-size: 0.72rem; color: var(--text-muted);
      margin-top: 14px; line-height: 1.6; text-align: center;
    }

    /* Success state */
    .modal-success {
      display: none; flex-direction: column;
      align-items: center; text-align: center;
      padding: 48px 28px;
      gap: 14px;
    }
    .modal-success h3 { font-size: 1.2rem; }
    .modal-success p { font-size: 0.875rem; color: var(--text-dim); max-width: 320px; line-height: 1.7; }

    /* Light modal */
    [data-theme="light"] .modal-overlay { background: rgba(20,25,60,0.5); }
    [data-theme="light"] .modal-box {
      box-shadow: 0 24px 80px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
    }
    [data-theme="light"] .cmethod { background: var(--bg); }
    [data-theme="light"] .cmethod.active { box-shadow: 0 0 16px rgba(45,94,223,0.12); }
    [data-theme="light"] .mform-input-full,
    [data-theme="light"] .mform-select,
    [data-theme="light"] .mform-textarea,
    [data-theme="light"] .mform-input-wrap { background: var(--bg); }
    [data-theme="light"] .mform-prefix { background: var(--bg-2); }

    /* ─── Contact links ─── */
    .contact-link {
      color: inherit; text-decoration: none;
      transition: color var(--ease);
    }
    .contact-link:hover { color: var(--accent); }

    /* ─── Footer ─── */
    footer { border-top: 1px solid var(--border); padding: 40px 0; }
    .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
    .footer-copy { font-size: 0.78rem; color: var(--text-muted); }
    .footer-links { display: flex; gap: 24px; list-style: none; }
    .footer-links a { font-size: 0.78rem; color: var(--text-muted); transition: color var(--ease); }
    .footer-links a:hover { color: var(--accent); }

    /* ─── Responsive ─── */
    @media (max-width: 960px) {
      .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
      .services-grid, .retainer-grid, .advantages-grid { grid-template-columns: 1fr; }
      .process-steps { grid-template-columns: repeat(2,1fr); }
      .forwhom-grid { grid-template-columns: repeat(2,1fr); }
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .nav-mobile { display: block; }
      .radar-wrap { display: none; }
      .hero { min-height: auto; padding: 60px 0 60px; }
      .hero .container { padding: 0 48px; }
    }
    @media (max-width: 600px) {
      .container { padding: 0 20px; }
      .hero .container { padding: 0 20px; }
      section { padding: 64px 0; }
      .section-header { margin-bottom: 40px; }
      .process-steps, .forwhom-grid { grid-template-columns: 1fr; }
      .hero-stats { gap: 24px; }
      .hero-stat { border-right: none; padding-right: 0; margin-right: 0; }
      .hero-actions { flex-direction: column; }
      .hero-actions .btn, .callout-inner .btn { width: 100%; justify-content: center; }
      nav .btn { width: auto; }
      .callout-inner { flex-direction: column; }
      .form { padding: 24px 20px; }
    }

    /* ─── Additional mobile fixes ─── */

    /* Hide nav CTA button when hamburger is shown — prevents nav overflow */
    @media (max-width: 960px) {
      nav .btn-primary { display: none; }
    }

    /* Service tabs: remove flex:1 so tabs do not compress; allow proper horizontal scroll */
    @media (max-width: 760px) {
      .stab { flex: 0 0 auto; min-width: 110px; }
    }

    @media (max-width: 600px) {
      /* Modal contact methods: 2 columns instead of 4 */
      .contact-methods { grid-template-columns: repeat(2, 1fr); }

      /* Hero stats: force single column */
      .hero-stat { width: 100%; }

      /* Reduce oversized stat numbers */
      .stat-val { font-size: 1.75rem; }

      /* About section buttons: full width on small screens */
      .about-text .btn { width: 100%; justify-content: center; }
    }