.cit-archive{font-family:Montserrat,system-ui,-apple-system,sans-serif;color:#0f0f0f;line-height:1.55;}
.cit-archive img{max-width:100%;height:auto;}
.cit-archive .cit-trust-row{display:flex;justify-content:center;align-items:center;gap:32px;flex-wrap:wrap;
  font-size:.9rem;color:#5c5a57;margin:28px 0;}
.cit-archive .cit-sec-369 svg{width:22px!important;height:22px!important;flex:0 0 auto;vertical-align:middle;display:inline-block;margin-right:8px;}
.cit-archive .cit-sec-497{max-width:100%;overflow-x:hidden;}
.cit-archive .cit-sec-75,.cit-archive .cit-sec-529{display:flex;justify-content:center;align-items:center;min-height:200px;margin:24px 0;}
.cit-archive .cit-sec-conv{font-family:Inter,system-ui,sans-serif;margin-top:24px;}
.cit-archive h1,.cit-archive h2,.cit-archive h3{line-height:1.2;}

/* --- logo-options page CSS --- */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:    #1e3a5f;
      --ink:     #0f0f0f;
      --mid:     #6b7c8f;
      --soft:    #f0f2f5;
      --white:   #ffffff;
      --accent:  #2a6bbd;
    } .cit-sec-497  {
      font-family: "Montserrat", sans-serif;
      background: #f8f9fb;
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
      padding: 60px 40px 100px;
    }
    .page-header {
      max-width: 800px;
      margin: 0 auto 80px;
      text-align: center;
    }
    .page-header h1 {
      font-size: 2.5rem;
      font-weight: 900;
      letter-spacing: -0.04em;
      color: var(--ink);
      margin-bottom: 12px;
    }
    .page-header p {
      font-size: 0.88rem;
      color: var(--mid);
      line-height: 1.7;
    }
    /* ── Cards ── */
    .logo-grid {
      display: flex;
      flex-direction: column;
      gap: 2px;
      max-width: 1200px;
      margin: 0 auto;
    }
    .logo-card {
      background: var(--white);
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 340px;
      overflow: hidden;
      border: 1px solid rgba(30,58,95,0.07);
    }
    .logo-card:nth-child(even) .logo-display { order: 2; }
    .logo-card:nth-child(even) .logo-info    { order: 1; }
    .logo-display {
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--soft);
      padding: 60px 48px;
      position: relative;
      overflow: hidden;
    }
    /* dark variant */
    .logo-display.dark {
      background: var(--ink);
    }
    .logo-display.navy {
      background: var(--navy);
    }
    .logo-display.mid-dark {
      background: #1a2535;
    }
    .logo-display.white {
      background: var(--white);
      border-right: 1px solid rgba(30,58,95,0.07);
    }
    .logo-info {
      padding: 56px 56px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border-left: 1px solid rgba(30,58,95,0.06);
    }
    .logo-card:nth-child(even) .logo-info {
      border-left: none;
      border-right: 1px solid rgba(30,58,95,0.06);
    }
    .option-tag {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
    }
    .logo-info h2 {
      font-size: 1.6rem;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 12px;
      line-height: 1.1;
    }
    .logo-info p {
      font-size: 0.82rem;
      line-height: 1.75;
      color: var(--mid);
      max-width: 340px;
    }
    .logo-info .detail {
      margin-top: 24px;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(30,58,95,0.3);
    }
    .logo-info .detail span {
      color: var(--navy);
    }
    /* ════════════════════════════════════════════════
       LOGO 1 — GLITCH SLASH
       CIT with a diagonal slash that animates on hover
    ════════════════════════════════════════════════ */
    .logo-1 {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0;
      font-family: "Montserrat", sans-serif;
      font-weight: 900;
      font-size: 3.2rem;
      letter-spacing: -0.04em;
      cursor: default;
      user-select: none;
    }
    .l1-cit {
      color: var(--white);
      position: relative;
      z-index: 1;
      display: inline-block;
      transition: transform 0.4s cubic-bezier(.16,1,.3,1);
    }
    .l1-slash {
      width: 3px;
      height: 3.6rem;
      background: var(--accent);
      transform: rotate(18deg);
      margin: 0 6px;
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      transition: transform 0.4s cubic-bezier(.16,1,.3,1), width 0.4s ease, background 0.3s;
    }
    .l1-full {
      font-size: 0.78rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width 0.7s cubic-bezier(.16,1,.3,1), opacity 0.4s;
      opacity: 0;
      align-self: flex-end;
      padding-bottom: 4px;
    }
    .logo-1:hover .l1-full {
      max-width: 300px;
      opacity: 1;
    }
    .logo-1:hover .l1-slash {
      transform: rotate(0deg);
      width: 2px;
      background: rgba(255,255,255,0.15);
    }
    .logo-1:hover .l1-cit {
      transform: translateX(-4px);
    }
    /* glitch layers */
    .l1-cit::before,
    .l1-cit::after {
      content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      opacity: 0;
      transition: opacity 0.1s;
    }
    .l1-cit::before { color: #00cfff; clip-path: polygon(0 30%, 100% 30%, 100% 50%, 0 50%); }
    .l1-cit::after  { color: #ff4060; clip-path: polygon(0 55%, 100% 55%, 100% 70%, 0 70%); }
    .logo-1:hover .l1-cit::before { animation: glitch-a 0.5s steps(2) 0.05s; }
    .logo-1:hover .l1-cit::after  { animation: glitch-b 0.5s steps(2) 0.1s; }
    @keyframes glitch-a {
      0%   { opacity:0; transform:translateX(0); }
      20%  { opacity:1; transform:translateX(-3px); }
      40%  { opacity:0; transform:translateX(2px); }
      60%  { opacity:1; transform:translateX(-1px); }
      80%  { opacity:0; }
      100% { opacity:0; }
    }
    @keyframes glitch-b {
      0%   { opacity:0; transform:translateX(0); }
      20%  { opacity:1; transform:translateX(3px); }
      40%  { opacity:0; transform:translateX(-2px); }
      60%  { opacity:1; transform:translateX(1px); }
      80%  { opacity:0; }
      100% { opacity:0; }
    }
    /* ════════════════════════════════════════════════
       LOGO 2 — STACKED BLOCK
       Bold stacked type with an accent underline block
    ════════════════════════════════════════════════ */
    .logo-2 {
      display: inline-flex;
      flex-direction: column;
      align-items: flex-start;
      cursor: default;
      user-select: none;
      gap: 0;
    }
    .l2-top {
      font-family: "Space Grotesk", sans-serif;
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      padding-left: 2px;
      margin-bottom: 2px;
      transition: letter-spacing 0.5s cubic-bezier(.16,1,.3,1), color 0.3s;
    }
    .logo-2:hover .l2-top {
      letter-spacing: 0.5em;
      color: rgba(255,255,255,0.7);
    }
    .l2-main {
      font-family: "Space Grotesk", sans-serif;
      font-size: 3.4rem;
      font-weight: 700;
      letter-spacing: -0.06em;
      line-height: 1;
      color: var(--white);
      position: relative;
      display: inline-block;
    }
    .l2-main .l2-it {
      position: relative;
      display: inline-block;
    }
    .l2-accent-bar {
      position: absolute;
      bottom: 4px;
      left: 0;
      width: 0;
      height: 6px;
      background: var(--accent);
      z-index: -1;
      transition: width 0.5s cubic-bezier(.16,1,.3,1);
    }
    .logo-2:hover .l2-accent-bar { width: 100%; }
    .l2-bottom {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }
    .l2-line {
      height: 1px;
      width: 0;
      background: rgba(255,255,255,0.2);
      transition: width 0.6s cubic-bezier(.16,1,.3,1) 0.1s;
    }
    .logo-2:hover .l2-line { width: 60px; }
    .l2-sub {
      font-family: "Space Grotesk", sans-serif;
      font-size: 0.58rem;
      font-weight: 400;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0);
      transition: color 0.4s 0.15s;
    }
    .logo-2:hover .l2-sub { color: rgba(255,255,255,0.35); }
    /* ════════════════════════════════════════════════
       LOGO 3 — SIGNAL ICON + WORDMARK
       Animated WiFi/signal icon morphing on hover
    ════════════════════════════════════════════════ */
    .logo-3 {
      display: inline-flex;
      align-items: center;
      gap: 18px;
      cursor: default;
      user-select: none;
    }
    .l3-icon {
      position: relative;
      width: 48px;
      height: 48px;
      flex-shrink: 0;
    }
    .l3-icon svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .l3-arc {
      fill: none;
      stroke: var(--white);
      stroke-linecap: round;
      transform-origin: 50% 50%;
      transition: stroke-dashoffset 0.5s cubic-bezier(.16,1,.3,1), stroke 0.3s, stroke-width 0.3s;
    }
    .l3-arc-1 { stroke-dasharray: 22; stroke-dashoffset: 0; stroke-width: 2.5; }
    .l3-arc-2 { stroke-dasharray: 36; stroke-dashoffset: 0; stroke-width: 2.5; transition-delay: 0.06s; }
    .l3-arc-3 { stroke-dasharray: 52; stroke-dashoffset: 0; stroke-width: 2.5; transition-delay: 0.12s; }
    .logo-3:hover .l3-arc-1 { stroke: #60b0ff; stroke-dashoffset: 22; }
    .logo-3:hover .l3-arc-2 { stroke: #3a8eff; stroke-dashoffset: 36; }
    .logo-3:hover .l3-arc-3 { stroke: var(--accent); stroke-dashoffset: 52; }
    .l3-dot {
      fill: var(--white);
      transition: fill 0.3s, r 0.4s cubic-bezier(.34,1.56,.64,1);
    }
    .logo-3:hover .l3-dot { fill: #60b0ff; }
    .l3-text {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .l3-wordmark {
      font-family: "Inter", sans-serif;
      font-size: 1.6rem;
      font-weight: 700;
      letter-spacing: -0.03em;
      color: var(--white);
      line-height: 1;
      display: flex;
      align-items: baseline;
      gap: 0;
    }
    .l3-con {
      font-weight: 300;
      opacity: 0.6;
      transition: opacity 0.4s, letter-spacing 0.5s cubic-bezier(.16,1,.3,1);
    }
    .logo-3:hover .l3-con {
      opacity: 1;
      letter-spacing: 0.01em;
    }
    .l3-nect {
      transition: letter-spacing 0.5s cubic-bezier(.16,1,.3,1);
    }
    .logo-3:hover .l3-nect { letter-spacing: 0.02em; }
    .l3-ivity {
      font-weight: 700;
      color: rgba(255,255,255,0.5);
      transition: color 0.4s;
    }
    .logo-3:hover .l3-ivity { color: rgba(255,255,255,0.8); }
    .l3-it-badge {
      background: var(--accent);
      color: var(--white);
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.04em;
      padding: 1px 6px;
      margin-left: 5px;
      vertical-align: middle;
      position: relative;
      top: -1px;
      transition: background 0.3s, transform 0.3s cubic-bezier(.34,1.56,.64,1);
    }
    .logo-3:hover .l3-it-badge { background: #60b0ff; transform: scale(1.1); }
    .l3-tagline {
      font-family: "Inter", sans-serif;
      font-size: 0.6rem;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0);
      transition: color 0.5s 0.1s;
    }
    .logo-3:hover .l3-tagline { color: rgba(255,255,255,0.3); }
    /* ════════════════════════════════════════════════
       LOGO 4 — MINIMAL GEOMETRIC MARK
       A pure mark: interlocking C and brackets
    ════════════════════════════════════════════════ */
    .logo-4 {
      display: inline-flex;
      align-items: center;
      gap: 20px;
      cursor: default;
      user-select: none;
    }
    .l4-mark {
      width: 56px;
      height: 56px;
      position: relative;
      flex-shrink: 0;
    }
    .l4-mark svg {
      width: 100%;
      height: 100%;
      overflow: visible;
    }
    .l4-path {
      fill: none;
      stroke: var(--white);
      stroke-linecap: square;
      transition: stroke 0.3s, stroke-dashoffset 0.6s cubic-bezier(.16,1,.3,1);
    }
    /* outer bracket L */
    .l4-outer {
      stroke-width: 2;
      stroke: rgba(255,255,255,0.35);
      stroke-dasharray: 200;
      stroke-dashoffset: 0;
      transition: stroke 0.4s, stroke-dashoffset 0.7s cubic-bezier(.16,1,.3,1);
    }
    .logo-4:hover .l4-outer {
      stroke: var(--accent);
      stroke-dashoffset: 200;
    }
    /* inner C */
    .l4-inner {
      stroke-width: 2.5;
      stroke-dasharray: 120;
      stroke-dashoffset: 0;
      transition: stroke 0.3s, stroke-dashoffset 0.6s cubic-bezier(.16,1,.3,1) 0.1s;
    }
    .logo-4:hover .l4-inner {
      stroke-dashoffset: -120;
    }
    /* dot */
    .l4-dot {
      fill: var(--accent);
      transition: r 0.4s cubic-bezier(.34,1.56,.64,1), fill 0.3s;
    }
    .logo-4:hover .l4-dot { fill: var(--white); }
    .l4-text {
      display: flex;
      flex-direction: column;
    }
    .l4-main {
      font-family: "Montserrat", sans-serif;
      font-size: 1.55rem;
      font-weight: 400;
      letter-spacing: 0.12em;
      color: var(--white);
      line-height: 1;
      text-transform: uppercase;
    }
    .l4-it {
      font-weight: 900;
      color: var(--white);
      transition: color 0.3s;
    }
    .logo-4:hover .l4-it { color: var(--accent); }
    .l4-rule {
      height: 1px;
      background: rgba(255,255,255,0.15);
      width: 100%;
      margin: 6px 0;
      transition: background 0.3s;
    }
    .logo-4:hover .l4-rule { background: rgba(42,107,189,0.4); }
    .l4-sub {
      font-family: "Montserrat", sans-serif;
      font-size: 0.56rem;
      font-weight: 500;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.25);
      transition: color 0.4s, letter-spacing 0.5s;
    }
    .logo-4:hover .l4-sub { color: rgba(255,255,255,0.5); letter-spacing: 0.35em; }
    /* ════════════════════════════════════════════════
       LOGO 5 — KINETIC TYPE
       Letters that reassemble on hover
    ════════════════════════════════════════════════ */
    .logo-5 {
      display: inline-flex;
      align-items: center;
      gap: 0;
      cursor: default;
      user-select: none;
      font-family: "Montserrat", sans-serif;
      font-weight: 900;
      line-height: 1;
    }
    .l5-c-block {
      background: var(--white);
      color: var(--ink);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.2rem;
      height: 3.2rem;
      font-size: 2rem;
      letter-spacing: -0.02em;
      flex-shrink: 0;
      transition: width 0.55s cubic-bezier(.16,1,.3,1), background 0.3s;
      overflow: hidden;
    }
    .l5-c-inner {
      display: flex;
      align-items: center;
      white-space: nowrap;
    }
    .l5-c-letter { flex-shrink: 0; }
    .l5-onnectivity {
      max-width: 0;
      overflow: hidden;
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--ink);
      transition: max-width 0.6s cubic-bezier(.16,1,.3,1);
      white-space: nowrap;
    }
    .logo-5:hover .l5-c-block { width: auto; padding: 0 18px 0 16px; }
    .logo-5:hover .l5-onnectivity { max-width: 300px; }
    .l5-sep {
      width: 2px;
      height: 3.2rem;
      background: rgba(255,255,255,0.08);
    }
    .l5-it-block {
      background: var(--accent);
      color: var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 3.2rem;
      height: 3.2rem;
      font-size: 2rem;
      letter-spacing: -0.02em;
      flex-shrink: 0;
      transition: background 0.3s, transform 0.4s cubic-bezier(.34,1.56,.64,1);
    }
    .logo-5:hover .l5-it-block { background: #3a8eff; transform: scale(1.06); }
    .l5-right {
      display: flex;
      flex-direction: column;
      margin-left: 14px;
      gap: 3px;
    }
    .l5-tagline-top {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
      transition: color 0.4s;
    }
    .logo-5:hover .l5-tagline-top { color: rgba(255,255,255,0.6); }
    .l5-tagline-bot {
      font-size: 0.6rem;
      font-weight: 400;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.15);
      transition: color 0.4s 0.08s;
    }
    .logo-5:hover .l5-tagline-bot { color: rgba(255,255,255,0.35); }
    /* ── Hover hint ── */
    .hover-hint {
      position: absolute;
      bottom: 20px;
      right: 24px;
      font-size: 0.6rem;
      font-weight: 600;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.18);
    }
    .logo-display.white .hover-hint { color: rgba(30,58,95,0.2); }
    .logo-display.soft  .hover-hint { color: rgba(30,58,95,0.2); }
    @media (max-width: 860px) {
      .logo-card { grid-template-columns: 1fr; }
      .logo-card:nth-child(even) .logo-display { order: 0; }
      .logo-card:nth-child(even) .logo-info    { order: 1; }
      .logo-card:nth-child(even) .logo-info { border-right: none; }
    }
  

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:    #1e3a5f;
      --deep:    #0a1628;
      --ink:     #0f0f0f;
      --mid:     #6b7c8f;
      --soft:    #f0f2f5;
      --white:   #ffffff;
      --accent:  #2a6bbd;
      --max:     1640px;
    } .cit-sec-497  { scroll-behavior: smooth; } .cit-sec-497  {
      font-family: "Montserrat", sans-serif;
      background: var(--white);
      color: var(--ink);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      cursor: none;
    }
    /* ════════════════════════════════════════
       CURSOR — RGB GLITCH TRAIL
    ════════════════════════════════════════ */
    .cursor-dot {
      position: fixed;
      top: 0; left: 0;
      width: 8px; height: 8px;
      border-radius: 50%;
      background: var(--ink);
      pointer-events: none;
      z-index: 9999;
      transform: translate(-50%, -50%);
      transition: width .2s, height .2s, background .2s;
      will-change: transform;
      mix-blend-mode: difference;
    }
    .cursor-ring {
      position: fixed;
      top: 0; left: 0;
      width: 38px; height: 38px;
      border: 1.5px solid rgba(30,58,95,.5);
      border-radius: 50%;
      pointer-events: none;
      z-index: 9998;
      transform: translate(-50%, -50%);
      will-change: transform;
      transition: width .35s cubic-bezier(.16,1,.3,1),
                  height .35s cubic-bezier(.16,1,.3,1),
                  border-color .3s, border-radius .3s;
    }
    /* RGB ghost trails — sit behind ring */
    .cursor-r,
    .cursor-g,
    .cursor-b {
      position: fixed;
      top: 0; left: 0;
      width: 8px; height: 8px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 9996;
      transform: translate(-50%, -50%);
      will-change: transform;
      opacity: 0;
      transition: opacity .2s;
    }
    .cursor-r { background: rgba(255,40,80,.55);  mix-blend-mode: screen; }
    .cursor-g { background: rgba(0,200,150,.45);  mix-blend-mode: screen; }
    .cursor-b { background: rgba(40,130,255,.55); mix-blend-mode: screen; }
    /* Slash cursor accent — appears near cursor */
    .cursor-slash {
      position: fixed;
      top: 0; left: 0;
      width: 2px; height: 22px;
      background: var(--accent);
      pointer-events: none;
      z-index: 9997;
      transform: translate(-50%, -50%) rotate(18deg);
      opacity: 0;
      transition: opacity .25s, height .3s;
      will-change: transform;
    }
    /* Hover states */
    body.cur-hover .cursor-dot   { width: 5px; height: 5px; } .cit-sec-497 .cur-hover .cursor-ring  { width: 64px; height: 64px; border-color: var(--accent); border-radius: 0; } .cit-sec-497 .cur-hover .cursor-r,
    body.cur-hover .cursor-g,
    body.cur-hover .cursor-b     { opacity: 1; } .cit-sec-497 .cur-hover .cursor-slash { opacity: 1; } .cit-sec-497 .cur-click .cursor-ring  { width: 20px; height: 20px; border-color: var(--accent); } .cit-sec-497 .cur-click .cursor-dot   { background: var(--accent); }
    /* Dark section cursor invert */
    body.cur-dark .cursor-dot  { background: var(--white); } .cit-sec-497 .cur-dark .cursor-ring { border-color: rgba(255,255,255,.4); }
    /* ════════════════════════════════════════
       UTIL
    ════════════════════════════════════════ */
    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 56px;
    }
    /* slash divider motif */
    .slash-divider {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 0.66rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--mid);
      margin-bottom: 20px;
    }
    .slash-divider::before {
      content: '';
      display: inline-block;
      width: 2px;
      height: 1.1em;
      background: var(--accent);
      transform: rotate(18deg);
      flex-shrink: 0;
    }
    /* ── SCROLL REVEAL ── */
    .rv  { opacity:0; transform:translateY(44px);  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1); }
    .rvl { opacity:0; transform:translateX(-56px); transition:opacity .9s  cubic-bezier(.16,1,.3,1),transform .9s  cubic-bezier(.16,1,.3,1); }
    .rvr { opacity:0; transform:translateX(56px);  transition:opacity .9s  cubic-bezier(.16,1,.3,1),transform .9s  cubic-bezier(.16,1,.3,1); }
    .rvs { opacity:0; transform:scale(.93);         transition:opacity .8s  cubic-bezier(.16,1,.3,1),transform .8s  cubic-bezier(.16,1,.3,1); }
    .vis { opacity:1 !important; transform:none !important; }
    .d1 { transition-delay:.08s; }
    .d2 { transition-delay:.18s; }
    .d3 { transition-delay:.29s; }
    .d4 { transition-delay:.41s; }
    .d5 { transition-delay:.54s; }
    /* glitch on text headings */
    .glitch {
      position: relative;
      display: inline-block;
    }
    .glitch::before,
    .glitch::after {
      content: attr(data-g);
      position: absolute;
      top: 0; left: 0;
      width: 100%;
      pointer-events: none;
    }
    .glitch::before {
      color: #ff2850;
      clip-path: polygon(0 20%, 100% 20%, 100% 40%, 0 40%);
      animation: gA 6s steps(2) infinite;
    }
    .glitch::after {
      color: #1ed4c8;
      clip-path: polygon(0 55%, 100% 55%, 100% 75%, 0 75%);
      animation: gB 6s steps(2) infinite .3s;
    }
    @keyframes gA { 0%,89%,100%{opacity:0;transform:translateX(0)}  90%{opacity:1;transform:translateX(-3px)} 93%{opacity:0;transform:translateX(2px)} 96%{opacity:1;transform:translateX(-1px)} 99%{opacity:0} }
    @keyframes gB { 0%,89%,100%{opacity:0;transform:translateX(0)}  90%{opacity:1;transform:translateX(3px)}  93%{opacity:0;transform:translateX(-2px)} 96%{opacity:1;transform:translateX(1px)}  99%{opacity:0} }
    /* ════════════════════════════════════════
       NAV
    ════════════════════════════════════════ */
    nav {
      position: fixed;
      inset: 0 0 auto 0;
      z-index: 500;
    }
    .nav-bar {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 56px;
      height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(30,58,95,.06);
    }
    /* ── LOGO 1 in nav ── */
    .nav-logo { text-decoration:none; display:inline-flex; }
    .logo-1 {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0;
      font-family: "Montserrat", sans-serif;
      font-weight: 900;
      font-size: 1.55rem;
      letter-spacing: -.04em;
      cursor: none;
      user-select: none;
    }
    .l1-cit {
      color: var(--ink);
      position: relative;
      z-index: 1;
      display: inline-block;
      transition: transform .4s cubic-bezier(.16,1,.3,1);
    }
    .l1-cit::before,
    .l1-cit::after {
      content: attr(data-text);
      position: absolute;
      top: 0; left: 0;
      opacity: 0;
    }
    .l1-cit::before { color: #00cfff; clip-path: polygon(0 30%,100% 30%,100% 50%,0 50%); }
    .l1-cit::after  { color: #ff4060; clip-path: polygon(0 55%,100% 55%,100% 70%,0 70%); }
    .l1-slash {
      width: 2.5px;
      height: 1.8rem;
      background: var(--accent);
      transform: rotate(18deg);
      margin: 0 7px;
      flex-shrink: 0;
      transition: transform .45s cubic-bezier(.16,1,.3,1),
                  width .4s ease,
                  background .3s;
    }
    .l1-full {
      font-size: .78rem;
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(15,15,15,.4);
      max-width: 0;
      overflow: hidden;
      white-space: nowrap;
      transition: max-width .7s cubic-bezier(.16,1,.3,1), opacity .4s;
      opacity: 0;
      align-self: flex-end;
      padding-bottom: 3px;
    }
    .logo-1:hover .l1-full            { max-width:300px; opacity:1; }
    .logo-1:hover .l1-slash           { transform:rotate(0deg); width:1.5px; background:rgba(15,15,15,.12); }
    .logo-1:hover .l1-cit             { transform:translateX(-4px); }
    .logo-1:hover .l1-cit::before     { animation: glitch-a .5s steps(2) .05s; }
    .logo-1:hover .l1-cit::after      { animation: glitch-b .5s steps(2) .1s; }
    @keyframes glitch-a { 0%{opacity:0;transform:translateX(0)} 20%{opacity:1;transform:translateX(-3px)} 40%{opacity:0;transform:translateX(2px)} 60%{opacity:1;transform:translateX(-1px)} 80%,100%{opacity:0} }
    @keyframes glitch-b { 0%{opacity:0;transform:translateX(0)} 20%{opacity:1;transform:translateX(3px)} 40%{opacity:0;transform:translateX(-2px)} 60%{opacity:1;transform:translateX(1px)} 80%,100%{opacity:0} }
    .nav-links {
      display: flex;
      align-items: center;
      gap: 40px;
      list-style: none;
    }
    .nav-links a {
      text-decoration: none;
      font-size: .74rem;
      font-weight: 600;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--mid);
      transition: color .2s;
      position: relative;
    }
    .nav-links a::after {
      content:'';
      position:absolute;
      bottom:-4px; left:0;
      width:0; height:1.5px;
      background: var(--accent);
      transition: width .3s cubic-bezier(.16,1,.3,1);
    }
    .nav-links a:hover { color:var(--ink); }
    .nav-links a:hover::after { width:100%; }
    .nav-cta {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: var(--ink);
      color: var(--white) !important;
      padding: 10px 22px;
      font-size: .72rem !important;
      font-weight: 700 !important;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      transition: background .2s !important;
    }
    .nav-cta::after { display:none !important; }
    .nav-cta:hover  { background:var(--navy) !important; }
    /* ════════════════════════════════════════
       HERO
    ════════════════════════════════════════ */
    .hero {
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-top: 72px;
      background: var(--white);
      position: relative;
      overflow: hidden;
    }
    /* background ghost "CIT" */
    .hero-bg {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: clamp(18rem, 28vw, 34rem);
      font-weight: 900;
      letter-spacing: -.06em;
      color: transparent;
      -webkit-text-stroke: 1px rgba(30,58,95,.045);
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
      line-height: 1;
    }
    /* animated slash grid overlay */
    .hero-slash-grid {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .hsg-line {
      position: absolute;
      top: -20%;
      width: 1.5px;
      height: 140%;
      background: rgba(42,107,189,.06);
      transform: rotate(18deg);
      transform-origin: top center;
    }
    .hero-inner {
      position: relative;
      z-index: 2;
      max-width: var(--max);
      margin: 0 auto;
      width: 100%;
      padding: 0 56px 80px;
      display: grid;
      grid-template-columns: 1fr 440px;
      align-items: flex-end;
      gap: 80px;
    }
    .hero-eyebrow {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 28px;
    }
    .hero-slash-mark {
      width: 2px;
      height: 1.2em;
      background: var(--accent);
      transform: rotate(18deg);
      flex-shrink: 0;
    }
    .hero-eyebrow span {
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .hero-h1 {
      font-size: clamp(3.8rem, 8vw, 9.5rem);
      font-weight: 900;
      line-height: .9;
      letter-spacing: -.045em;
      color: var(--ink);
      margin-bottom: 0;
    }
    .hero-h1 em {
      font-style: italic;
      color: var(--navy);
      display: block;
    }
    .hero-right {
      display: flex;
      flex-direction: column;
      gap: 28px;
      padding-bottom: 8px;
    }
    .hero-sub {
      font-size: .9rem;
      line-height: 1.8;
      color: var(--mid);
    }
    .hero-slash-cta {
      display: flex;
      align-items: stretch;
      gap: 0;
    }
    .btn-main {
      display: inline-flex;
      align-items: center;
      gap: 14px;
      background: var(--ink);
      color: var(--white);
      padding: 16px 28px;
      font-family: "Montserrat", sans-serif;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid var(--ink);
      transition: background .25s, color .25s;
      flex: 1;
      justify-content: space-between;
    }
    .btn-main:hover { background: transparent; color: var(--ink); }
    .cta-slash-sep {
      width: 2px;
      background: var(--accent);
      transform: skewX(-18deg);
      flex-shrink: 0;
      margin: 0 -1px;
    }
    .btn-alt {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      background: transparent;
      color: var(--navy);
      padding: 16px 24px;
      font-family: "Montserrat", sans-serif;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid rgba(30,58,95,.2);
      border-left: none;
      transition: border-color .25s, background .25s;
    }
    .btn-alt:hover { border-color: var(--navy); background: rgba(30,58,95,.03); }
    /* scroll indicator */
    .hero-scroll {
      position: absolute;
      bottom: 36px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      z-index: 2;
    }
    .scroll-line {
      width: 1px;
      height: 48px;
      background: linear-gradient(to bottom, rgba(30,58,95,.4), transparent);
      animation: scrollPulse 2s ease-in-out infinite;
    }
    @keyframes scrollPulse {
      0%,100% { transform:scaleY(1); opacity:1; }
      50%      { transform:scaleY(.6); opacity:.4; }
    }
    .scroll-label {
      font-size: .58rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(30,58,95,.35);
    }
    /* ── TICKER ── */
    .ticker-wrap {
      background: var(--ink);
      overflow: hidden;
      padding: 13px 0;
      border-top: 1px solid rgba(255,255,255,.04);
    }
    .ticker-track {
      display: flex;
      width: max-content;
      animation: ticker 24s linear infinite;
    }
    @keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
    .ticker-item {
      display: flex;
      align-items: center;
      gap: 28px;
      padding: 0 28px;
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: .18em;
      text-transform: uppercase;
      color: rgba(255,255,255,.45);
      white-space: nowrap;
    }
    .ticker-slash {
      width: 1.5px;
      height: 1em;
      background: var(--accent);
      transform: rotate(18deg);
      flex-shrink: 0;
    }
    /* ════════════════════════════════════════
       STATS
    ════════════════════════════════════════ */
    .stats {
      background: var(--soft);
    }
    .stats-grid {
      max-width: var(--max);
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4,1fr);
    }
    .stat-cell {
      padding: 64px 56px;
      border-right: 1px solid rgba(30,58,95,.08);
      position: relative;
      overflow: hidden;
    }
    .stat-cell:last-child { border-right: none; }
    .stat-cell::after {
      content:'';
      position: absolute;
      bottom: 0; left: 0;
      width: 0; height: 2px;
      background: var(--accent);
      transform: skewX(-18deg);
      transition: width .5s cubic-bezier(.16,1,.3,1);
    }
    .stat-cell:hover::after { width:100%; }
    /* slash accent top-left on each cell */
    .stat-cell::before {
      content:'';
      position: absolute;
      top: 20px; left: 56px;
      width: 2px; height: 14px;
      background: rgba(42,107,189,.25);
      transform: rotate(18deg);
    }
    .stat-num {
      font-size: clamp(3rem,4.5vw,5.2rem);
      font-weight: 900;
      letter-spacing: -.04em;
      color: var(--navy);
      line-height: 1;
      margin-bottom: 8px;
    }
    .stat-lbl {
      font-size: .7rem;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--mid);
    }
    /* ════════════════════════════════════════
       SERVICES
    ════════════════════════════════════════ */
    .services { padding: 130px 0; background: var(--white); }
    .svc-layout {
      display: grid;
      grid-template-columns: 360px 1fr;
      gap: 120px;
      align-items: start;
    }
    .svc-sticky {
      position: sticky;
      top: 100px;
    }
    .svc-sticky-num {
      font-size: 8rem;
      font-weight: 900;
      letter-spacing: -.06em;
      color: rgba(30,58,95,.05);
      line-height: 1;
      margin-bottom: -20px;
    }
    .svc-sticky h2 {
      font-size: clamp(3rem, 4.5vw, 5rem);
      font-weight: 900;
      letter-spacing: -.04em;
      line-height: .92;
      color: var(--ink);
    }
    .svc-sticky h2 em { font-style:italic; color:var(--navy); display:block; }
    .svc-sticky p {
      margin-top: 28px;
      font-size: .84rem;
      line-height: 1.8;
      color: var(--mid);
    }
    /* service rows */
    .svc-row {
      display: grid;
      grid-template-columns: 32px 56px 1fr auto;
      align-items: center;
      gap: 28px;
      padding: 36px 0;
      border-top: 1px solid rgba(30,58,95,.08);
      cursor: none;
      position: relative;
      overflow: hidden;
    }
    .svc-row:last-child { border-bottom: 1px solid rgba(30,58,95,.08); }
    /* slash sweep on hover */
    .svc-row::before {
      content:'';
      position: absolute;
      top: 0; left: -100%;
      width: 100%; height: 100%;
      background: var(--soft);
      transition: left .45s cubic-bezier(.16,1,.3,1);
      z-index: 0;
    }
    .svc-row:hover::before { left: 0; }
    .svc-row > * { position: relative; z-index: 1; }
    .svc-n {
      font-size: .66rem;
      font-weight: 700;
      letter-spacing: .1em;
      color: rgba(30,58,95,.25);
    }
    .svc-icon-box {
      width: 52px; height: 52px;
      border: 1.5px solid rgba(30,58,95,.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--navy);
      transition: background .3s, border-color .3s, transform .3s cubic-bezier(.34,1.56,.64,1);
      flex-shrink: 0;
    }
    .svc-row:hover .svc-icon-box {
      background: var(--navy);
      border-color: var(--navy);
      color: var(--white);
      transform: rotate(-8deg) scale(1.08);
    }
    .svc-body h3 {
      font-size: clamp(1.1rem,1.8vw,1.55rem);
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--ink);
      margin-bottom: 8px;
      transition: color .2s;
    }
    .svc-row:hover .svc-body h3 { color: var(--navy); }
    .svc-body p {
      font-size: .8rem;
      line-height: 1.72;
      color: var(--mid);
    }
    .svc-tags {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      margin-top: 12px;
    }
    .svc-tag {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--navy);
      border: 1px solid rgba(30,58,95,.18);
      padding: 3px 9px;
    }
    .svc-arrow {
      opacity: 0;
      transform: translateX(-10px) rotate(-45deg);
      transition: opacity .3s, transform .3s cubic-bezier(.16,1,.3,1);
      color: var(--navy);
      flex-shrink: 0;
    }
    .svc-row:hover .svc-arrow { opacity:1; transform:translateX(0) rotate(-45deg); }
    /* ════════════════════════════════════════
       MARQUEE BAND
    ════════════════════════════════════════ */
    .marquee-band {
      background: var(--deep);
      padding: 72px 0;
      overflow: hidden;
      position: relative;
    }
    .marquee-band::before {
      content:'';
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        18deg,
        transparent,
        transparent 80px,
        rgba(42,107,189,.03) 80px,
        rgba(42,107,189,.03) 81px
      );
    }
    .marquee-track {
      display: flex;
      width: max-content;
      animation: ticker 28s linear infinite;
    }
    .marquee-item {
      font-size: clamp(3.5rem, 6vw, 6.5rem);
      font-weight: 900;
      letter-spacing: -.04em;
      white-space: nowrap;
      padding: 0 32px;
      line-height: 1;
      display: flex;
      align-items: center;
      gap: 32px;
    }
    .marquee-item.solid   { color: var(--white); }
    .marquee-item.outline {
      color: transparent;
      -webkit-text-stroke: 1px rgba(255,255,255,.18);
    }
    .marquee-slash {
      width: 3px;
      height: .9em;
      background: var(--accent);
      transform: rotate(18deg);
      flex-shrink: 0;
    }
    /* ════════════════════════════════════════
       WHY
    ════════════════════════════════════════ */
    .why { padding: 130px 0; background: var(--soft); }
    .why-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 60px;
      margin-bottom: 72px;
    }
    .why-top h2 {
      font-size: clamp(2.8rem,5.5vw,6rem);
      font-weight: 900;
      letter-spacing: -.045em;
      line-height: .92;
      color: var(--ink);
    }
    .why-top h2 em { font-style:italic; color:var(--navy); }
    .why-top p {
      max-width: 380px;
      font-size: .85rem;
      line-height: 1.8;
      color: var(--mid);
    }
    .why-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      gap: 2px;
    }
    .why-card {
      background: var(--white);
      padding: 48px 36px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 320px;
      border-top: 2px solid transparent;
      transition: border-color .3s, background .35s;
    }
    .why-card:hover { border-color: var(--accent); background: var(--navy); }
    /* slash decorative BG */
    .why-card::before {
      content: attr(data-num);
      position: absolute;
      bottom: -20px; right: -10px;
      font-size: 7rem;
      font-weight: 900;
      letter-spacing: -.06em;
      color: rgba(30,58,95,.04);
      line-height: 1;
      transition: color .3s;
    }
    .why-card:hover::before { color: rgba(255,255,255,.04); }
    .why-n {
      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(30,58,95,.22);
      transition: color .3s;
    }
    .why-card:hover .why-n { color: rgba(255,255,255,.25); }
    .why-slash-mark {
      width: 2px;
      height: 20px;
      background: var(--accent);
      transform: rotate(18deg);
      margin: 20px 0 16px;
      opacity: 0;
      transition: opacity .4s;
    }
    .why-card:hover .why-slash-mark { opacity: 1; }
    .why-card h3 {
      font-size: 1.05rem;
      font-weight: 700;
      letter-spacing: -.01em;
      line-height: 1.2;
      color: var(--ink);
      margin-bottom: 12px;
      transition: color .3s;
    }
    .why-card:hover h3 { color: var(--white); }
    .why-card p {
      font-size: .78rem;
      line-height: 1.7;
      color: var(--mid);
      transition: color .3s;
    }
    .why-card:hover p { color: rgba(255,255,255,.5); }
    /* ════════════════════════════════════════
       PROCESS
    ════════════════════════════════════════ */
    .process { padding: 130px 0; background: var(--white); }
    .proc-top {
      display: grid;
      grid-template-columns: 1fr 380px;
      gap: 80px;
      align-items: flex-end;
      margin-bottom: 80px;
    }
    .proc-top h2 {
      font-size: clamp(3rem, 6vw, 6.5rem);
      font-weight: 900;
      letter-spacing: -.045em;
      line-height: .9;
      color: var(--ink);
    }
    .proc-top h2 em { font-style:italic; color:var(--navy); }
    .proc-top p { font-size:.85rem; line-height:1.8; color:var(--mid); }
    .proc-grid {
      display: grid;
      grid-template-columns: repeat(4,1fr);
      border-top: 1px solid rgba(30,58,95,.1);
    }
    .proc-item {
      padding: 48px 44px;
      border-right: 1px solid rgba(30,58,95,.08);
      position: relative;
    }
    .proc-item:last-child { border-right: none; }
    .proc-item::before {
      content:'';
      position: absolute;
      top: -1px; left: 0;
      width: 0; height: 2px;
      background: var(--accent);
      transition: width .7s cubic-bezier(.16,1,.3,1);
    }
    .proc-item.vis::before { width:100%; }
    .proc-ghost {
      font-size: 5rem;
      font-weight: 900;
      letter-spacing: -.06em;
      color: rgba(30,58,95,.04);
      line-height: 1;
      margin-bottom: 20px;
    }
    .proc-item h4 {
      font-size: .95rem;
      font-weight: 700;
      color: var(--ink);
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .proc-item h4::before {
      content:'';
      width: 2px; height: 1em;
      background: var(--accent);
      transform: rotate(18deg);
      flex-shrink: 0;
    }
    .proc-item p { font-size:.78rem; line-height:1.72; color:var(--mid); }
    /* ════════════════════════════════════════
       CTA
    ════════════════════════════════════════ */
    .cta-section {
      background: var(--deep);
      position: relative;
      overflow: hidden;
    }
    /* diagonal slashes decorative */
    .cta-slashes {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }
    .cta-slashes span {
      position: absolute;
      width: 1px;
      background: rgba(42,107,189,.08);
      height: 200%;
      top: -50%;
      transform: rotate(18deg);
    }
    .cta-inner {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 520px;
      max-width: var(--max);
      margin: 0 auto;
    }
    .cta-left {
      padding: 110px 80px 110px 56px;
      border-right: 1px solid rgba(255,255,255,.06);
    }
    .cta-left h2 {
      font-size: clamp(2.5rem,5vw,5.2rem);
      font-weight: 900;
      letter-spacing: -.045em;
      line-height: .92;
      color: var(--white);
      margin-bottom: 28px;
    }
    .cta-left h2 em { font-style:italic; color:rgba(255,255,255,.35); }
    .cta-left p { font-size:.88rem; line-height:1.8; color:rgba(255,255,255,.4); max-width:400px; }
    .cta-right {
      padding: 110px 56px 110px 80px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .cta-eyebrow {
      font-size: .64rem;
      font-weight: 700;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(255,255,255,.2);
      display: flex;
      align-items: center;
      gap: 12px;
    }
    .cta-eyebrow::before {
      content:'';
      width:2px; height:1em;
      background: var(--accent);
      transform:rotate(18deg);
    }
    .cta-email {
      font-size: clamp(1rem,2.5vw,2rem);
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--white);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,.15);
      padding-bottom: 14px;
      display: block;
      margin-top: 48px;
      transition: color .25s, border-color .25s;
    }
    .cta-email:hover { color:rgba(255,255,255,.55); border-color:rgba(255,255,255,.06); }
    .cta-btn {
      margin-top: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      background: var(--white);
      color: var(--deep);
      padding: 20px 32px;
      font-family: "Montserrat", sans-serif;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid var(--white);
      transition: background .25s, color .25s;
    }
    .cta-btn:hover { background:transparent; color:var(--white); }
    /* status dot */
    .cta-status {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: .7rem;
      font-weight: 500;
      color: rgba(255,255,255,.25);
    }
    .status-pulse {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #2ecc71;
      animation: pulse 2s ease-in-out infinite;
    }
    @keyframes pulse {
      0%,100%{ box-shadow:0 0 0 0 rgba(46,204,113,.4); }
      50%    { box-shadow:0 0 0 5px rgba(46,204,113,0); }
    }
    /* ════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════ */
    footer {
      background: var(--ink);
      padding: 72px 0 36px;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.8fr 1fr 1fr 1fr;
      gap: 64px;
      margin-bottom: 64px;
    }
    .footer-brand-name {
      font-family: "Montserrat", sans-serif;
      font-size: 1.1rem;
      font-weight: 900;
      letter-spacing: -.02em;
      color: rgba(255,255,255,.85);
      display: flex;
      align-items: center;
      gap: 0;
    }
    .fbslash {
      width: 2px;
      height: 1.1em;
      background: var(--accent);
      transform: rotate(18deg);
      margin: 0 8px;
    }
    .footer-brand p {
      margin-top: 18px;
      font-size: .78rem;
      line-height: 1.75;
      color: rgba(255,255,255,.3);
      max-width: 260px;
    }
    .footer-status {
      margin-top: 28px;
      display: flex;
      align-items: center;
      gap: 9px;
      font-size: .7rem;
      color: rgba(255,255,255,.25);
    }
    .footer-col h5 {
      font-size: .62rem;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255,255,255,.18);
      margin-bottom: 22px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .footer-col h5::before {
      content:'';
      width:1.5px; height:.9em;
      background: var(--accent);
      transform:rotate(18deg);
    }
    .footer-col ul { list-style: none; }
    .footer-col li { margin-bottom: 12px; }
    .footer-col a {
      font-size: .78rem;
      color: rgba(255,255,255,.38);
      text-decoration: none;
      transition: color .2s;
    }
    .footer-col a:hover { color: rgba(255,255,255,.82); }
    .footer-bottom {
      border-top: 1px solid rgba(255,255,255,.05);
      padding-top: 26px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: .68rem;
      font-weight: 500;
      color: rgba(255,255,255,.18);
      letter-spacing: .06em;
    }
    /* ════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════ */
    @media(max-width:1100px){
      .hero-inner { grid-template-columns:1fr; }
      .hero-right  { max-width:500px; }
      .svc-layout  { grid-template-columns:1fr; gap:60px; }
      .svc-sticky  { position:static; }
      .why-grid    { grid-template-columns:1fr 1fr; }
      .proc-grid   { grid-template-columns:1fr 1fr; }
      .cta-inner   { grid-template-columns:1fr; }
      .cta-right   { padding:0 56px 80px; }
      .footer-grid { grid-template-columns:1fr 1fr; }
    }
    @media(max-width:700px){
      .wrap { padding:0 24px; }
      .nav-bar { padding:0 24px; }
      .hero-inner { padding:0 24px 60px; }
      .stats-grid { grid-template-columns:1fr 1fr; }
      .why-grid   { grid-template-columns:1fr; }
      .proc-grid  { grid-template-columns:1fr; }
      .svc-row    { grid-template-columns:28px 44px 1fr; }
      .svc-arrow  { display:none; }
      .nav-links  { display:none; }
    }