/* ---- Variables ---- */
    :root {
      /* base navy layers */
      --bg:        #070b12;
      --bg2:       #0b1220;
      --bg3:       #0e1828;
      --card:      #0f1e30;
      --card-h:    #142438;
      --border:    #173050;
      --border2:   #204468;

      /* accents */
      --cyan:      #00c2e0;
      --cyan-deep: #0092ad;
      --cyan-dim:  rgba(0,194,224,0.12);
      --cyan-glow: rgba(0,194,224,0.28);
      --orange:    #ff6535;
      --orange-deep: #d94b1f;
      --orange-glow: rgba(255,101,53,0.3);
      --green:     #00e07a;
      --purple:    #c47eff;

      --text:      #ddeaf8;
      --muted:     #86a2bd;
      --mono:      #3db8d8;

      --fd: 'Barlow Condensed', sans-serif;
      --fb: 'Manrope', sans-serif;
      --fm: 'JetBrains Mono', monospace;

      /* radius scale */
      --r-sm:   10px;
      --r-md:   16px;
      --r-lg:   22px;
      --r-xl:   28px;
      --r-2xl:  36px;
      --r-full: 999px;

      /* elevation */
      --shadow-sm:     0 2px 10px rgba(2,6,12,0.35);
      --shadow-md:     0 12px 32px rgba(2,6,12,0.45);
      --shadow-lg:     0 24px 64px rgba(2,6,12,0.55);
      --shadow-cyan:   0 12px 40px rgba(0,194,224,0.16);
      --shadow-orange: 0 12px 40px rgba(255,101,53,0.16);

      /* glass */
      --glass:        rgba(13,24,40,0.6);
      --glass-border: rgba(255,255,255,0.07);

      /* motion */
      --ease: cubic-bezier(0.16, 1, 0.3, 1);

      /* z-index scale */
      --z-decor:   0;
      --z-content: 2;
      --z-sticky:  50;
      --z-nav:     100;
      --z-cursor:  200;
      --z-boot:    500;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--fb);
      background: var(--bg);
      color: var(--text);
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; max-width: 100%; }
    button { cursor: pointer; font-family: inherit; }

    :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: var(--r-sm); }

    ::-webkit-scrollbar { width: 8px; }
    ::-webkit-scrollbar-track { background: var(--bg); }
    ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: var(--r-full); }
    ::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

    /* ---- Cursor glow (desktop, fine-pointer only) ---- */
    .cursor-glow {
      position: fixed; top: 0; left: 0; width: 420px; height: 420px;
      border-radius: 50%; pointer-events: none; z-index: var(--z-cursor);
      background: radial-gradient(circle, rgba(0,194,224,0.16) 0%, rgba(0,194,224,0.05) 35%, transparent 70%);
      mix-blend-mode: screen; opacity: 0; transition: opacity 0.4s ease;
      will-change: transform;
    }
    .cursor-glow.active { opacity: 1; }
    @media (hover: none), (pointer: coarse) { .cursor-glow { display: none; } }

    /* ---- Boot sequence ----
       Fully self-playing via CSS animation-delay; no JS dependency, so it can never
       get stuck open (no inline-script pause/resume handshake to race or fail). */
    .boot-overlay {
      position: fixed; inset: 0; z-index: var(--z-boot);
      background: var(--bg);
      display: flex; align-items: center; justify-content: center;
      clip-path: circle(150% at 50% 50%);
      animation: bootWipe 0.7s var(--ease) forwards 1.5s;
    }
    @keyframes bootWipe { to { clip-path: circle(0% at 50% 50%); visibility: hidden; pointer-events: none; } }
    .boot-inner { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; width: min(360px, 84vw); }
    .boot-mark { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
    .boot-mark-ring {
      position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(0,194,224,0.3);
      animation: radarSpin 3.2s linear infinite;
    }
    .boot-mark-ring-2 { inset: 10px; border-color: rgba(0,194,224,0.5); animation: radarSpinReverse 2s linear infinite; }
    .boot-mark-dot {
      position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px;
      border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan), 0 0 32px var(--cyan-glow);
      animation: pulse-dot 1.4s ease-in-out infinite;
    }
    .boot-log { width: 100%; display: flex; flex-direction: column; gap: 0.55rem; min-height: 7.5rem; }
    .boot-line {
      font-family: var(--fm); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--muted);
      display: flex; align-items: center; justify-content: space-between; gap: 1rem;
      opacity: 0; transform: translateX(-8px);
      animation: bootLineIn 0.4s var(--ease) forwards;
      animation-delay: calc(0.25s + var(--i, 0) * 0.16s);
    }
    .boot-line-status { color: var(--green); flex-shrink: 0; }
    .boot-line.boot-line-final { color: var(--green); font-weight: 500; letter-spacing: 0.15em; }
    @keyframes bootLineIn { to { opacity: 1; transform: translateX(0); } }
    .boot-bar { width: 100%; height: 3px; border-radius: var(--r-full); background: var(--border); overflow: hidden; }
    .boot-bar-fill {
      height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--cyan-deep));
      border-radius: var(--r-full); animation: bootBarFill 1.1s var(--ease) forwards 0.2s;
    }
    @keyframes bootBarFill { to { width: 100%; } }

    @keyframes radarSpin { to { transform: rotate(360deg); } }
    @keyframes radarSpinReverse { to { transform: rotate(-360deg); } }

    /* ---- Ambient decorative blobs ---- */
    .blob {
      position: absolute; border-radius: 50%; filter: blur(70px);
      pointer-events: none; z-index: var(--z-decor); will-change: transform;
    }
    .blob-cyan   { background: radial-gradient(circle, rgba(0,194,224,0.4) 0%, transparent 70%); }
    .blob-orange { background: radial-gradient(circle, rgba(255,101,53,0.32) 0%, transparent 70%); }
    .blob-violet { background: radial-gradient(circle, rgba(196,126,255,0.28) 0%, transparent 70%); }
    .blob-green  { background: radial-gradient(circle, rgba(0,224,122,0.26) 0%, transparent 70%); }

    @keyframes blobFloatA { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(70px,-85px) scale(1.22); } 66% { transform: translate(-55px,55px) scale(0.88); } }
    @keyframes blobFloatB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-85px,65px) scale(1.25); } }
    @keyframes blobFloatC { 0%,100% { transform: translate(0,0) scale(1); } 40% { transform: translate(60px,60px) scale(0.86); } 70% { transform: translate(-35px,-45px) scale(1.15); } }

    /* ---- Nav (floating glass pill) ---- */
    nav {
      position: fixed; top: 1rem; left: 1.5rem; right: 1.5rem; z-index: var(--z-nav);
      display: flex; align-items: center; justify-content: space-between;
      padding: 0.85rem 1.75rem; border-radius: var(--r-full);
      background: rgba(9,16,28,0.5); backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid var(--glass-border); box-shadow: var(--shadow-sm);
      transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
    }
    nav.scrolled {
      background: rgba(8,14,24,0.82);
      border-color: var(--border);
      box-shadow: var(--shadow-md);
    }
    .nav-logo { display: flex; align-items: center; gap: 0.75rem; }
    .nav-logo img { height: 36px; width: auto; }
    .nav-logo-mark {
      font-family: var(--fm); font-size: 0.8rem; font-weight: 500;
      color: var(--cyan); border: 1px solid var(--cyan); border-radius: var(--r-full);
      padding: 0.2rem 0.6rem; letter-spacing: 0.05em;
    }
    .nav-links {
      display: flex; align-items: center; gap: 2.25rem; list-style: none;
    }
    .nav-links a {
      font-family: var(--fm); font-size: 0.72rem; font-weight: 400;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
      transition: color 0.25s var(--ease);
    }
    .nav-links a:hover { color: var(--cyan); }
    .nav-link-signin { color: var(--muted); }
    .nav-toggle {
      display: none; flex-direction: column; justify-content: center; gap: 5px;
      width: 32px; height: 32px; background: transparent; border: none;
      padding: 0;
    }
    .nav-toggle span {
      display: block; width: 100%; height: 2px; border-radius: var(--r-full); background: var(--text);
      transition: transform 0.35s var(--ease), opacity 0.2s;
    }
    .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
    .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    .nav-cta {
      font-family: var(--fm); font-size: 0.72rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan);
      border: 1px solid var(--cyan); border-radius: var(--r-full); padding: 0.6rem 1.4rem;
      background: rgba(0,194,224,0.06); transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
      position: relative;
    }
    .nav-cta::before {
      content: '';
      position: absolute; inset: -4px;
      border: 1px solid var(--cyan); border-radius: var(--r-full);
      opacity: 0; animation: nav-pulse 2.5s ease-in-out infinite;
    }
    .nav-cta:hover { background: var(--cyan); color: var(--bg); box-shadow: 0 0 24px var(--cyan-glow); transform: translateY(-1px); }
    .nav-cta:hover::before { animation: none; }
    @keyframes nav-pulse {
      0%, 100% { opacity: 0; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.06); }
    }

    /* ---- Hero ---- */
    #hero {
      min-height: 100vh;
      display: grid; grid-template-columns: 1fr 1fr;
      align-items: center; position: relative; overflow: hidden;
      padding: 9rem 3rem 4rem; gap: 2rem;
    }
    .hero-blob-1 { width: 480px; height: 480px; top: -10%; left: -8%; animation: blobFloatA 22s ease-in-out infinite; }
    .hero-blob-2 { width: 420px; height: 420px; top: 5%; right: -12%; animation: blobFloatB 26s ease-in-out infinite; }
    .hero-blob-3 { width: 360px; height: 360px; bottom: -15%; left: 30%; animation: blobFloatC 20s ease-in-out infinite; }

    .hero-content { position: relative; z-index: var(--z-content); }
    .hero-label {
      font-family: var(--fm); font-size: 0.72rem; font-weight: 500; color: var(--cyan);
      letter-spacing: 0.2em; text-transform: uppercase;
      display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 1.75rem;
      padding: 0.4rem 0.9rem 0.4rem 0.7rem; border-radius: var(--r-full);
      background: rgba(0,194,224,0.08); border: 1px solid rgba(0,194,224,0.22);
      opacity: 0; animation: fadeUp 0.6s var(--ease) forwards 2.1s;
    }
    .hero-label::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse-dot 2s ease-in-out infinite; }
    .hero-h1 {
      font-family: var(--fd); font-weight: 800;
      font-size: clamp(3.5rem, 7vw, 6.5rem); line-height: 0.92;
      letter-spacing: -0.01em; text-transform: uppercase; color: var(--text);
      text-wrap: balance;
    }
    .hero-h1 .word {
      display: block; opacity: 0; filter: blur(16px); transform: translateY(36px);
      animation: wordReveal 0.9s var(--ease) forwards;
      animation-delay: calc(2.25s + var(--i, 0) * 0.16s);
    }
    .hero-h1 .word-accent { color: var(--cyan); }
    @keyframes wordReveal { to { opacity: 1; filter: blur(0); transform: translateY(0); } }
    .hero-tagline {
      font-family: var(--fb); font-size: 1rem; font-weight: 400; color: var(--muted);
      margin-top: 1.5rem; line-height: 1.75; max-width: 440px;
      opacity: 0; animation: fadeUp 0.7s var(--ease) forwards 2.5s;
    }
    .hero-tagline .cursor {
      display: inline-block; width: 8px; height: 1em; background: var(--cyan); border-radius: var(--r-sm);
      vertical-align: text-bottom; animation: blink 1s step-end infinite;
    }
    .hero-actions {
      display: flex; gap: 1rem; margin-top: 2.5rem;
      opacity: 0; animation: fadeUp 0.7s var(--ease) forwards 2.7s;
    }
    .btn-primary {
      font-family: var(--fm); font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
      background: linear-gradient(135deg, var(--cyan), var(--cyan-deep));
      color: var(--bg); border: 1px solid transparent; border-radius: var(--r-full);
      padding: 0.95rem 2.2rem; box-shadow: var(--shadow-cyan);
      position: relative; overflow: hidden;
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
    .btn-primary::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
      transform: translateX(-120%); transition: transform 0.8s var(--ease);
    }
    .btn-primary:hover { box-shadow: 0 16px 48px rgba(0,194,224,0.35); }
    .btn-primary:hover::after { transform: translateX(120%); }
    .btn-ghost {
      font-family: var(--fm); font-size: 0.75rem; font-weight: 400;
      letter-spacing: 0.1em; text-transform: uppercase; background: rgba(255,255,255,0.02);
      color: var(--muted); border: 1px solid var(--border2); border-radius: var(--r-full);
      padding: 0.95rem 2.2rem; transition: border-color 0.35s var(--ease), color 0.35s var(--ease), background 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .btn-ghost:hover { border-color: var(--cyan); color: var(--text); background: rgba(0,194,224,0.06); transform: translateY(-2px); }

    .hero-visual {
      position: relative; z-index: var(--z-content); display: flex; justify-content: center; align-items: center;
      opacity: 0; animation: fadeIn 1s ease forwards 2.9s;
    }
    .hero-diagram-panel {
      --glow: 0;
      width: 100%; max-width: 500px; padding: 1.75rem;
      background: var(--glass); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%);
      border: 1px solid var(--glass-border); border-radius: var(--r-2xl);
      box-shadow: var(--shadow-lg), 0 0 calc(20px + var(--glow) * 46px) rgba(0,194,224, calc(var(--glow) * 0.5));
      transition: box-shadow 0.3s var(--ease);
    }
    .hero-diagram { width: 100%; display: block; will-change: transform; }

    /* Scroll-tied depth: the panel settles into place as it enters view. CSS-only, feature-detected. */
    @supports (animation-timeline: view()) {
      @media not (prefers-reduced-motion: reduce) {
        .hero-diagram-panel {
          animation: heroPanelSettle linear both;
          animation-timeline: view();
          animation-range: entry 0% cover 35%;
        }
        @keyframes heroPanelSettle {
          from { transform: translateY(30px) scale(0.96) rotate(-1.2deg); }
          to   { transform: translateY(0) scale(1) rotate(0deg); }
        }
      }
    }

    /* Node animations — stagger fade-in (timed to start as the boot sequence wipes away), then idle-float once alive */
    .node-core { animation: nodeFadeIn 0.5s ease forwards 3.1s; opacity: 0; }
    .node-1    { animation: nodeFadeIn 0.5s ease forwards 3.4s, floatBob 5s ease-in-out infinite 3.4s; opacity: 0; }
    .node-2    { animation: nodeFadeIn 0.5s ease forwards 3.7s, floatBob 6.5s ease-in-out infinite 3.7s; opacity: 0; }
    .node-3    { animation: nodeFadeIn 0.5s ease forwards 4.0s, floatBob 5.8s ease-in-out infinite 4.0s; opacity: 0; }
    .node-4    { animation: nodeFadeIn 0.5s ease forwards 4.3s, floatBob 7s ease-in-out infinite 4.3s; opacity: 0; }
    @keyframes nodeFadeIn { to { opacity: 1; } }
    @keyframes floatBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

    /* Radar scan rings around the core — always alive, contra-rotating */
    .radar-ring { transform-box: fill-box; transform-origin: center; }
    .radar-ring-1 { animation: radarSpin 16s linear infinite; }
    .radar-ring-2 { animation: radarSpinReverse 24s linear infinite; }

    /* Connection lines draw themselves in like a powering-up circuit */
    .line-draw {
      stroke-dasharray: 168; stroke-dashoffset: 168;
      animation: lineDraw 0.85s var(--ease) forwards;
      animation-delay: calc(3.2s + var(--ld, 0) * 0.16s);
    }
    .line-fade { opacity: 0; animation: nodeFadeIn 0.5s ease forwards 3.9s; }
    @keyframes lineDraw { to { stroke-dashoffset: 0; } }

    /* Status badge — the sequence's arrival flourish */
    .status-badge {
      opacity: 0; transform-box: fill-box; transform-origin: center;
      animation: badgeArrive 0.6s var(--ease) forwards 4.6s;
    }
    @keyframes badgeArrive { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

    .node-pulse   { animation: pulse 2.5s ease-in-out infinite; }
    .node-pulse-2 { animation: pulse 2.5s ease-in-out infinite 0.8s; }
    .node-pulse-3 { animation: pulse 2.5s ease-in-out infinite 1.5s; }
    .data-flow    { animation: flow 3s linear infinite; }
    .data-flow-2  { animation: flow 3s linear infinite 1s; }
    .data-flow-3  { animation: flow 3s linear infinite 2s; }

    /* Hero spec line */
    .hero-spec {
      grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem;
      margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--border);
      opacity: 0; animation: fadeUp 0.7s var(--ease) forwards 3.1s;
    }
    .hero-spec-item {
      font-family: var(--fm); font-size: 0.72rem; color: var(--muted);
      letter-spacing: 0.03em; display: flex; align-items: center; gap: 0.5rem;
      padding: 0.5rem 1rem; border-radius: var(--r-full); background: rgba(255,255,255,0.03);
      border: 1px solid var(--border); transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
    }
    .hero-spec-item:hover { border-color: var(--border2); background: rgba(255,255,255,0.05); }
    .hero-spec-item strong {
      font-weight: 700; color: var(--text); letter-spacing: 0.03em;
    }
    .hero-spec-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
      background: var(--green); box-shadow: 0 0 6px var(--green);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    /* ---- Section shared ---- */
    section { padding: 6rem 3rem; position: relative; }
    .section-label {
      font-family: var(--fm); font-size: 0.7rem; color: var(--cyan);
      letter-spacing: 0.2em; text-transform: uppercase;
      display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem;
    }
    .section-label::before { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: pulse-dot 2.4s ease-in-out infinite; }
    .section-title {
      font-family: var(--fd); font-size: clamp(2.2rem, 4vw, 3.5rem); font-weight: 800;
      letter-spacing: -0.01em; text-transform: uppercase; line-height: 1; color: var(--text);
      text-wrap: balance;
    }

    /* ---- Services ---- */
    #services { background: var(--bg2); }
    .services-header {
      display: flex; justify-content: space-between; align-items: flex-end;
      margin-bottom: 3.5rem; gap: 2rem;
    }
    .services-desc { font-size: 0.95rem; color: var(--muted); max-width: 360px; line-height: 1.7; }
    .services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .service-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: 2.5rem; position: relative; overflow: hidden;
      box-shadow: var(--shadow-sm);
      opacity: 0; transform: translateY(52px) scale(0.93); filter: blur(4px);
      transition: transform 0.7s var(--ease), filter 0.7s var(--ease), box-shadow 0.55s var(--ease), border-color 0.55s var(--ease), background 0.55s var(--ease), opacity 0.7s var(--ease);
    }
    .services-grid.visible .service-card { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    .services-grid.visible .service-card:nth-child(1) { transition-delay: 0.05s; }
    .services-grid.visible .service-card:nth-child(2) { transition-delay: 0.18s; }
    .services-grid.visible .service-card:nth-child(3) { transition-delay: 0.31s; }
    .services-grid.visible .service-card:nth-child(4) { transition-delay: 0.44s; }
    .service-card::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit;
      background: radial-gradient(circle at var(--mx, 75%) var(--my, 20%), var(--accent-glow, transparent) 0%, transparent 60%);
      opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none;
    }
    .service-card:hover { border-color: var(--accent, var(--border2)); background: var(--card-h); box-shadow: var(--shadow-lg); }
    .service-card:hover::before { opacity: 1; }
    .service-card:nth-child(1) { --accent: var(--cyan);   --accent-glow: rgba(0,194,224,0.32); }
    .service-card:nth-child(2) { --accent: var(--orange); --accent-glow: rgba(255,101,53,0.28); }
    .service-card:nth-child(3) { --accent: var(--green);  --accent-glow: rgba(0,224,122,0.28); }
    .service-card:nth-child(4) { --accent: var(--purple); --accent-glow: rgba(196,126,255,0.28); }

    /* Most Requested badge */
    .badge-popular {
      position: absolute; top: 1.5rem; left: 2.5rem; z-index: 1;
      font-family: var(--fm); font-size: 0.58rem; font-weight: 500;
      color: var(--purple); border: 1px solid var(--purple); border-radius: var(--r-full);
      padding: 0.22rem 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
      background: rgba(196,126,255,0.09);
    }

    .service-icon {
      width: 52px; height: 52px; margin-bottom: 1.5rem; position: relative; z-index: 1;
      border-radius: var(--r-md); background: rgba(255,255,255,0.03); padding: 8px;
    }
    .service-card:has(.badge-popular) .service-icon { margin-top: 1.75rem; }
    .service-icon rect, .service-icon path, .service-icon circle,
    .service-icon polyline, .service-icon line, .service-icon polygon { stroke-width: 1.5; fill: none; }
    .icon-cyan { stroke: var(--cyan); }
    .icon-orange { stroke: var(--orange); }
    .icon-green { stroke: var(--green); }
    .icon-purple { stroke: var(--purple); }

    .service-title {
      font-family: var(--fd); font-size: 1.5rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.03em; color: var(--text); margin-bottom: 0.5rem;
      position: relative; z-index: 1;
    }
    .service-pain {
      font-size: 0.85rem; color: rgba(221,234,248,0.75); line-height: 1.6; margin-bottom: 0.75rem;
      font-style: italic; position: relative; z-index: 1;
    }
    .service-desc { font-size: 0.875rem; color: var(--muted); line-height: 1.75; margin-bottom: 1.5rem; position: relative; z-index: 1; }
    .service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; position: relative; z-index: 1; }
    .tag {
      font-family: var(--fm); font-size: 0.65rem; color: var(--muted);
      border: 1px solid var(--border); border-radius: var(--r-full); padding: 0.3rem 0.75rem;
      letter-spacing: 0.08em; text-transform: uppercase;
    }
    .service-status {
      position: absolute; top: 2.5rem; right: 2.5rem; z-index: 1;
      display: flex; align-items: center; gap: 0.4rem;
      font-family: var(--fm); font-size: 0.62rem; color: var(--green); letter-spacing: 0.1em;
    }
    .service-card:has(.badge-popular) .service-status { top: 4.2rem; }
    .status-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--green); animation: pulse-dot 2s ease-in-out infinite;
    }

    /* ---- Mid-page CTA Banner ---- */
    #cta-banner { background: transparent; padding: 3rem 3rem; overflow: visible; }
    .cta-banner-inner {
      max-width: 1140px; margin: 0 auto;
      background: linear-gradient(135deg, var(--bg3), var(--card));
      border: 1px solid var(--border); border-radius: var(--r-2xl);
      padding: 4rem 3.5rem;
      display: flex; align-items: center; justify-content: space-between; gap: 3rem;
      position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
    }
    .cta-blob { width: 420px; height: 420px; top: -20%; right: -10%; animation: blobFloatB 24s ease-in-out infinite; }
    .cta-banner-text { position: relative; z-index: 1; }
    .cta-banner-text .cta-overline {
      display: inline-flex; align-items: center; gap: 0.5rem;
      font-family: var(--fm); font-size: 0.68rem; color: var(--orange);
      letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 1rem;
      padding: 0.4rem 0.9rem; border-radius: var(--r-full);
      background: rgba(255,101,53,0.1); border: 1px solid rgba(255,101,53,0.25);
    }
    .cta-banner-text h2 {
      font-family: var(--fd); font-weight: 800; font-size: clamp(1.8rem, 3vw, 2.8rem);
      text-transform: uppercase; line-height: 1.1; max-width: 560px; text-wrap: balance;
    }
    .cta-banner-text h2 span { color: var(--cyan); }
    .cta-banner-actions { display: flex; gap: 1rem; align-items: center; flex-shrink: 0; position: relative; z-index: 1; }
    .btn-assessment {
      font-family: var(--fm); font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase;
      background: linear-gradient(135deg, var(--orange), var(--orange-deep));
      color: var(--bg); border: 1px solid transparent; border-radius: var(--r-full);
      padding: 1rem 2.1rem; box-shadow: var(--shadow-orange);
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); white-space: nowrap;
    }
    .btn-assessment:hover { box-shadow: 0 16px 48px rgba(255,101,53,0.35); }
    .btn-quiz {
      font-family: var(--fm); font-size: 0.75rem; font-weight: 400;
      letter-spacing: 0.12em; text-transform: uppercase; background: rgba(255,255,255,0.02);
      color: var(--muted); border: 1px solid var(--border2); border-radius: var(--r-full);
      padding: 1rem 1.6rem; transition: border-color 0.35s var(--ease), color 0.35s var(--ease), transform 0.35s var(--ease); white-space: nowrap;
    }
    .btn-quiz:hover { border-color: var(--cyan); color: var(--cyan); transform: translateY(-2px); }

    /* ---- About ---- */
    #about {
      background: var(--bg); display: grid; grid-template-columns: 1fr 1fr;
      gap: 5rem; align-items: center; padding-top: 8rem;
    }
    .about-proof {
      background: var(--bg3); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: 2.5rem; box-shadow: var(--shadow-sm);
    }
    .about-proof-num { font-family: var(--fd); font-size: 4.5rem; font-weight: 800; color: var(--text); line-height: 1; }
    .about-proof-num span { color: var(--cyan); font-size: 1.4rem; font-weight: 700; }
    .about-proof-label { font-family: var(--fm); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.75rem; }
    .about-proof-support {
      list-style: none; display: flex; flex-direction: column; gap: 0.6rem;
      margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
    }
    .about-proof-support li { font-family: var(--fm); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.03em; }
    .about-proof-support strong { color: var(--text); font-weight: 500; }
    .about-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-top: 1.25rem; max-width: 65ch; }
    .about-list { list-style: none; margin-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
    .about-list li {
      font-family: var(--fm); font-size: 0.8rem; color: var(--muted);
      display: flex; align-items: center; gap: 0.75rem; letter-spacing: 0.05em;
    }
    .about-list li::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); flex-shrink: 0; }

    /* ---- Social Proof ---- */
    #social-proof { background: var(--bg2); overflow: hidden; }
    .testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3rem; }
    .testimonial-card {
      background: var(--card); border: 1px solid var(--border); border-radius: var(--r-xl);
      padding: 2rem; position: relative; box-shadow: var(--shadow-sm);
      opacity: 0; transform: translateY(52px) scale(0.93); filter: blur(4px);
      transition: transform 0.7s var(--ease), filter 0.7s var(--ease), box-shadow 0.55s var(--ease), background 0.55s var(--ease), border-color 0.55s var(--ease), opacity 0.7s var(--ease);
    }
    .testimonials-grid.visible .testimonial-card { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    .testimonials-grid.visible .testimonial-card:nth-child(1) { transition-delay: 0.05s; }
    .testimonials-grid.visible .testimonial-card:nth-child(2) { transition-delay: 0.18s; }
    .testimonials-grid.visible .testimonial-card:nth-child(3) { transition-delay: 0.31s; }
    .testimonial-card:hover { background: var(--card-h); border-color: var(--border2); box-shadow: var(--shadow-md); }
    .testimonial-quote {
      font-size: 0.9rem; color: var(--text); line-height: 1.8; margin-bottom: 1.5rem;
      font-style: italic; opacity: 0.88;
    }
    .testimonial-quote::before { content: '"'; color: var(--cyan); font-size: 2rem; font-family: var(--fd); line-height: 0; vertical-align: -0.4em; margin-right: 0.25rem; }
    .testimonial-source { display: flex; align-items: center; gap: 0.75rem; }
    .testimonial-dot { width: 34px; height: 34px; border-radius: 50%; background: var(--bg3); border: 1px solid var(--border2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .testimonial-dot span { font-family: var(--fd); font-size: 0.9rem; font-weight: 700; color: var(--cyan); }
    .testimonial-name { font-family: var(--fm); font-size: 0.72rem; color: var(--text); letter-spacing: 0.05em; }
    .testimonial-role { font-family: var(--fm); font-size: 0.62rem; color: var(--muted); letter-spacing: 0.05em; margin-top: 0.2rem; }

    .logos-strip {
      margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 2.5rem;
    }
    .logos-strip-label { font-family: var(--fm); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; flex-shrink: 0; }
    .logos-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); flex: 1; }
    .logos-track { display: flex; gap: 3.5rem; width: max-content; animation: marquee 24s linear infinite; }
    .logos-marquee:hover .logos-track { animation-play-state: paused; }
    .logo-item { font-family: var(--fd); font-size: 0.9rem; color: var(--border2); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; }
    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

    /* ---- Readiness Quiz ---- */
    #quiz { background: var(--bg3); }
    .quiz-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; margin-top: 3rem; }
    .quiz-description { font-size: 0.95rem; color: var(--muted); line-height: 1.8; margin-top: 1rem; }
    .quiz-widget { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-2xl); overflow: hidden; box-shadow: var(--shadow-md); }
    .quiz-questions { padding: 2.25rem; display: flex; flex-direction: column; gap: 1.5rem; }
    .quiz-question { display: flex; align-items: flex-start; gap: 1rem; }
    .quiz-q-num { font-family: var(--fm); font-size: 0.65rem; color: var(--cyan); letter-spacing: 0.1em; min-width: 24px; padding-top: 0.1rem; }
    .quiz-q-text { font-family: var(--fb); font-size: 0.9rem; color: var(--text); flex: 1; line-height: 1.5; }
    .quiz-yn { display: flex; gap: 0.5rem; margin-top: 0.65rem; }
    .quiz-btn {
      font-family: var(--fm); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
      border: 1px solid var(--border2); border-radius: var(--r-full); background: rgba(255,255,255,0.02); color: var(--muted);
      padding: 0.4rem 0.9rem; transition: all 0.2s var(--ease);
    }
    .quiz-btn:hover, .quiz-btn.active-yes { border-color: var(--green); color: var(--green); background: rgba(0,224,122,0.1); }
    .quiz-btn.active-no  { border-color: var(--orange); color: var(--orange); background: rgba(255,101,53,0.1); }
    .quiz-footer { padding: 1.5rem 2.25rem; border-top: 1px solid var(--border); background: rgba(255,255,255,0.02); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
    .quiz-score-display { font-family: var(--fm); font-size: 0.72rem; color: var(--muted); }
    .quiz-score-display strong { color: var(--cyan); font-size: 1.1rem; }
    .quiz-result { padding: 1.5rem 2.25rem; background: rgba(0,194,224,0.06); border-top: 1px solid var(--cyan-dim); display: none; }
    .quiz-result-title { font-family: var(--fd); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; color: var(--text); margin-bottom: 0.5rem; }
    .quiz-result-text { font-size: 0.85rem; color: var(--muted); line-height: 1.7; }
    .quiz-result-cta { margin-top: 1rem; display: inline-flex; font-family: var(--fm); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); border: 1px solid var(--cyan); border-radius: var(--r-full); padding: 0.7rem 1.4rem; background: transparent; transition: all 0.3s var(--ease); }
    .quiz-result-cta:hover { background: var(--cyan); color: var(--bg); box-shadow: 0 0 24px var(--cyan-glow); }

    /* ---- Owner ---- */
    #owner { background: var(--bg3); padding: 6rem 3rem; }
    .owner-inner { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: center; max-width: 1100px; margin: 0 auto; }
    .owner-frame { position: relative; }
    .owner-frame::before {
      content: ''; position: absolute; inset: -20px; z-index: -1; border-radius: var(--r-2xl);
      background: radial-gradient(circle at 30% 20%, rgba(0,194,224,0.2), transparent 60%);
      filter: blur(30px);
    }
    .owner-photo { width: 100%; display: block; filter: grayscale(10%) contrast(1.05); border-radius: var(--r-2xl); border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
    .owner-caption {
      position: absolute; left: 1.5rem; bottom: 1.5rem; right: 1.5rem;
      background: var(--glass); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%);
      border: 1px solid var(--glass-border); border-radius: var(--r-lg);
      padding: 1rem 1.25rem; box-shadow: var(--shadow-md);
    }
    .owner-caption-name { font-family: var(--fd); font-size: 1.3rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text); }
    .owner-caption-role { font-family: var(--fm); font-size: 0.68rem; color: var(--cyan); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.2rem; }
    .owner-text p { font-size: 0.95rem; color: var(--muted); line-height: 1.85; margin-bottom: 1.25rem; max-width: 65ch; }
    .owner-text p:last-child { margin-bottom: 2rem; }
    .owner-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 2rem; }
    .tag-accent { color: var(--cyan); border-color: rgba(0,194,224,0.35); }
    .btn-outline-cyan {
      font-family: var(--fm); font-size: 0.75rem; font-weight: 500;
      letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan);
      border: 1px solid var(--cyan); border-radius: var(--r-full); padding: 0.9rem 2.1rem; display: inline-block;
      background: rgba(0,194,224,0.05); transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
    }
    .btn-outline-cyan:hover { background: var(--cyan); color: var(--bg); box-shadow: 0 0 24px var(--cyan-glow); transform: translateY(-2px); }

    /* ---- Contact ---- */
    #contact { background: var(--bg2); }
    .contact-inner { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; margin-top: 3rem; }
    .contact-info p { font-size: 0.9rem; color: var(--muted); line-height: 1.8; margin-top: 1.25rem; margin-bottom: 2rem; }
    .contact-detail { display: flex; flex-direction: column; gap: 1rem; }
    .contact-row { display: flex; align-items: flex-start; gap: 1rem; }
    .contact-row-label { font-family: var(--fm); font-size: 0.65rem; color: var(--cyan); letter-spacing: 0.12em; text-transform: uppercase; min-width: 80px; padding-top: 0.1rem; }
    .contact-row-val { font-size: 0.875rem; color: var(--muted); }
    .contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
    .form-group {
      display: flex; flex-direction: column; gap: 0.35rem;
      background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
      padding: 0.85rem 1.1rem 0.9rem; transition: border-color 0.3s var(--ease), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    .form-group:focus-within { border-color: var(--cyan); background: var(--card-h); box-shadow: 0 0 0 3px rgba(0,194,224,0.12); }
    label { font-family: var(--fm); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
    input, textarea, select { font-family: var(--fb); font-size: 0.9rem; color: var(--text); background: transparent; border: none; outline: none; padding: 0; width: 100%; resize: none; }
    .form-full { grid-column: 1 / -1; }
    .form-submit-row { margin-top: 0.25rem; }
    .btn-submit {
      width: 100%; font-family: var(--fm); font-size: 0.8rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase;
      background: linear-gradient(135deg, var(--cyan), var(--cyan-deep)); color: var(--bg); border: none; border-radius: var(--r-full);
      padding: 1.1rem; box-shadow: var(--shadow-cyan);
      transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
    }
    .btn-submit:hover { box-shadow: 0 16px 48px rgba(0,194,224,0.35); }

    /* ---- Footer ---- */
    footer {
      background: var(--bg); border-top: 1px solid var(--border);
      padding: 2.5rem 3rem; display: flex; flex-direction: column; gap: 1.5rem;
    }
    .footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
    .footer-copy { font-family: var(--fm); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.08em; }
    .footer-links { display: flex; gap: 2rem; list-style: none; }
    .footer-links a { font-family: var(--fm); font-size: 0.68rem; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.25s var(--ease); }
    .footer-links a:hover { color: var(--cyan); }

    /* Portal quick-access links */
    .portal-links { display: flex; gap: 1rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
    .portal-link {
      font-family: var(--fm); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--muted); border: 1px solid var(--border); border-radius: var(--r-full); padding: 0.55rem 1.1rem;
      transition: border-color 0.3s var(--ease), color 0.3s var(--ease), transform 0.3s var(--ease); display: flex; align-items: center; gap: 0.5rem;
    }
    .portal-link:hover { transform: translateY(-2px); }
    .portal-link-client:hover { border-color: var(--cyan); color: var(--cyan); }
    .portal-link-admin:hover { border-color: var(--orange); color: var(--orange); }
    .portal-link-owner:hover { border-color: var(--purple); color: var(--purple); }

    /* Coverage strip */
    .uptime-strip {
      border-top: 1px solid var(--border); padding-top: 1.5rem;
      display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    }
    .uptime-label { font-family: var(--fm); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; }
    .uptime-services { display: flex; gap: 1.5rem; flex-wrap: wrap; }
    .uptime-service { display: flex; align-items: center; gap: 0.5rem; }
    .uptime-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); animation: pulse-dot 2.5s ease-in-out infinite; }
    .uptime-dot.orange { background: var(--orange); box-shadow: 0 0 6px var(--orange); animation-delay: 0.5s; }
    .uptime-service-name { font-family: var(--fm); font-size: 0.65rem; color: var(--muted); letter-spacing: 0.08em; }
    .uptime-service-status { font-family: var(--fm); font-size: 0.6rem; color: var(--green); letter-spacing: 0.05em; }
    .uptime-service-status.deg { color: var(--orange); }

    /* Tactile press feedback — placed after all component :hover rules so equal-specificity :active wins on click */
    .btn-ghost:active, .btn-quiz:active, .quiz-result-cta:active, .btn-outline-cyan:active,
    .btn-submit:active, .portal-link:active, .nav-cta:active, .quiz-btn:active {
      transform: scale(0.96) !important; transition-duration: 0.12s !important;
    }

    /* ---- Animations ---- */
    @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes fadeIn  { from { opacity: 0; } to { opacity: 1; } }
    @keyframes blink   { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
    @keyframes pulse   { 0%, 100% { r: 6; opacity: 0.6; } 50% { r: 9; opacity: 1; } }
    @keyframes pulse-ring { 0%, 100% { r: 14; opacity: 0.3; } 50% { r: 20; opacity: 0; } }
    @keyframes flow    { 0% { stroke-dashoffset: 200; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
    @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 4px var(--green), 0 0 8px var(--green); } 50% { box-shadow: 0 0 8px var(--green), 0 0 16px var(--green); } }

    /* Scroll reveal */
    .reveal { opacity: 0; transform: translateY(38px); filter: blur(6px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), filter 0.8s var(--ease); }
    .reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

    /* ---- Reduced motion ---- */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
      .reveal, .service-card, .testimonial-card, .hero-h1 .word { opacity: 1; transform: none; filter: none; }
      .cursor-glow { display: none; }
      .logos-track { transform: none; }
      .line-draw { stroke-dashoffset: 0; }
      .hero-diagram-panel { animation: none !important; transform: none !important; }
    }

    /* ===================== RESPONSIVE ===================== */
    @media (max-width: 1100px) {
      section { padding: 5rem 2rem; }
      #hero { padding: 9rem 2rem 3rem; }
      .services-desc { max-width: none; }
      .testimonials-grid { grid-template-columns: repeat(2, 1fr); }
      .quiz-inner { gap: 3rem; }
      .owner-inner { gap: 3rem; }
      .contact-inner { gap: 3rem; }
    }

    @media (max-width: 860px) {
      nav { top: 0.75rem; left: 1rem; right: 1rem; padding: 0.7rem 1.25rem; }
      .nav-toggle { display: flex; }
      .nav-cta { display: none; }
      .nav-links {
        position: absolute; top: calc(100% + 0.6rem); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: rgba(8,14,24,0.92); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%);
        border: 1px solid var(--glass-border); border-radius: var(--r-lg);
        padding: 0.5rem 1.5rem 1.25rem; box-shadow: var(--shadow-lg);
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 0.25s ease, transform 0.35s var(--ease), visibility 0s linear 0.25s;
      }
      .nav-links.open {
        opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.35s var(--ease), visibility 0s;
      }
      .nav-links li { border-bottom: 1px solid var(--border); }
      .nav-links li:last-child { border-bottom: none; }
      .nav-links a { display: block; padding: 0.9rem 0; }
      .nav-links-cta-item { display: block; border-bottom: none; }
      .nav-links a.nav-links-cta {
        display: block; text-align: center; margin: 0.75rem 0 0.5rem;
        color: var(--cyan); border: 1px solid var(--cyan); border-radius: var(--r-full); padding: 0.75rem;
      }

      #hero { grid-template-columns: 1fr; padding-top: 8rem; }
      .hero-visual { max-width: 340px; margin: 1rem auto 0; }
      .hero-spec { gap: 0.75rem; }

      .services-grid { grid-template-columns: 1fr; }

      .cta-banner-inner { flex-direction: column; align-items: flex-start; padding: 3rem 2rem; gap: 1.75rem; }
      .cta-banner-actions { width: 100%; }
      .btn-assessment, .btn-quiz { flex: 1; text-align: center; }

      #about { grid-template-columns: 1fr; padding-top: 5rem; gap: 2.5rem; }

      .testimonials-grid { grid-template-columns: 1fr; }
      .logos-strip { flex-direction: column; align-items: flex-start; gap: 1rem; }
      .logos-marquee { width: 100%; }

      .quiz-inner { grid-template-columns: 1fr; }

      .owner-inner { grid-template-columns: 1fr; }
      .owner-frame { max-width: 340px; margin: 0 auto; }

      .contact-inner { grid-template-columns: 1fr; }

      .footer-top { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
      .footer-links { flex-wrap: wrap; gap: 1rem 1.5rem; }
    }

    @media (max-width: 600px) {
      section { padding: 4rem 1.25rem; }
      #hero { padding: 7.5rem 1.25rem 2.5rem; }
      .hero-h1 { font-size: clamp(2.75rem, 13vw, 4rem); }
      .hero-tagline { max-width: none; }
      .hero-actions { flex-direction: column; align-items: stretch; }
      .hero-spec { flex-direction: column; align-items: stretch; }

      .services-header { flex-direction: column; align-items: flex-start; gap: 1rem; }

      .cta-banner-text h2 { font-size: clamp(1.6rem, 8vw, 2rem); }
      .cta-banner-actions { flex-direction: column; }

      .about-proof { padding: 2rem; }
      .about-proof-num { font-size: 3.5rem; }

      .form-row { grid-template-columns: 1fr; }

      .footer-links { gap: 0.75rem 1.25rem; }
      .portal-links { flex-direction: column; align-items: stretch; }
      .uptime-services { flex-direction: column; gap: 0.85rem; align-items: flex-start; }
    }