/* ─────────────────────────────────────────────────────────
       BASE
    ───────────────────────────────────────────────────────── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: 'Barlow', sans-serif;
      background: #000;
      color: #fff;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    /* ─────────────────────────────────────────────────────────
       LIQUID GLASS (from 078)
    ───────────────────────────────────────────────────────── */
    .liquid-glass {
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      border: 1px solid rgba(255,255,255,0.12);
    }
    .liquid-glass-strong {
      background: rgba(255,255,255,0.13);
      backdrop-filter: blur(32px) saturate(200%);
      -webkit-backdrop-filter: blur(32px) saturate(200%);
      border: 1px solid rgba(255,255,255,0.22);
      box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
    }
    .font-accent { font-family: 'Instrument Serif', serif; }

    /* ─────────────────────────────────────────────────────────
       NAVBAR  (055 pill design, GLOBA CODE brand)
    ───────────────────────────────────────────────────────── */
    #navbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      padding: 1.25rem 2rem;
    }
    .navbar-pill {
      max-width: 1280px;
      margin: 0 auto;
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(24px) saturate(180%);
      -webkit-backdrop-filter: blur(24px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.11);
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1.5rem 0.6rem 1.25rem;
    }
    .nav-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      cursor: pointer;
      user-select: none;
      text-decoration: none;
    }
    .nav-logo-icon { width: 24px; height: 24px; flex-shrink: 0; }
    .nav-logo-text {
      font-family: 'Readex Pro', sans-serif;
      font-size: 0.95rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      color: #fff;
    }
    /* Nav links with per-color glow */
    .nav-links {
      display: flex;
      align-items: center;
      gap: 2rem;
      list-style: none;
    }
    .nav-link {
      position: relative;
      font-family: 'Barlow', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      color: rgba(255,255,255,0.6);
      text-decoration: none;
      cursor: pointer;
      transition: color 220ms ease, text-shadow 220ms ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0; right: 0;
      height: 1px;
      border-radius: 1px;
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 220ms ease;
    }
    .nav-link:hover { color: #fff; }
    .nav-link.c-cyan:hover  { text-shadow: 0 0 14px rgba(0,229,255,0.8); }
    .nav-link.c-cyan::after { background:#00E5FF; }
    .nav-link.c-cyan:hover::after { transform:scaleX(1); }
    .nav-link.c-purple:hover  { text-shadow: 0 0 14px rgba(139,92,246,0.8); }
    .nav-link.c-purple::after { background:#8B5CF6; }
    .nav-link.c-purple:hover::after { transform:scaleX(1); }
    .nav-link.c-blue:hover  { text-shadow: 0 0 14px rgba(59,130,246,0.8); }
    .nav-link.c-blue::after { background:#3B82F6; }
    .nav-link.c-blue:hover::after { transform:scaleX(1); }
    .nav-link.c-green:hover  { text-shadow: 0 0 14px rgba(34,197,94,0.8); }
    .nav-link.c-green::after { background:#22C55E; }
    .nav-link.c-green:hover::after { transform:scaleX(1); }
    .nav-link.c-amber:hover  { text-shadow: 0 0 14px rgba(245,158,11,0.8); }
    .nav-link.c-amber::after { background:#F59E0B; }
    .nav-link.c-amber:hover::after { transform:scaleX(1); }
    .nav-link.c-pink:hover  { text-shadow: 0 0 14px rgba(236,72,153,0.8); }
    .nav-link.c-pink::after { background:#EC4899; }
    .nav-link.c-pink:hover::after { transform:scaleX(1); }
    .nav-link.c-teal:hover  { text-shadow: 0 0 14px rgba(20,184,166,0.8); }
    .nav-link.c-teal::after { background:#14B8A6; }
    .nav-link.c-teal:hover::after { transform:scaleX(1); }

    .btn-cta {
      position: relative;
      display: inline-block;
      font-family: 'Readex Pro', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      text-decoration: none;
      color: #000;
      background: #00E5FF;
      border: none;
      border-radius: 9999px;
      padding: 0.55rem 1.4rem;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      transition: box-shadow 250ms ease, transform 200ms ease;
    }
    .btn-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, #00E5FF, #3B82F6);
      opacity: 0;
      transition: opacity 250ms ease;
    }
    .btn-cta:hover {
      box-shadow: 0 0 28px rgba(0,229,255,0.55), 0 0 60px rgba(0,229,255,0.2);
      transform: translateY(-1px);
    }
    .btn-cta:hover::before { opacity: 1; }
    .btn-cta span { position: relative; z-index: 1; }

    /* Services nav dropdown */
    .nav-item-dropdown { position: relative; display: flex; align-items: center; gap: 0.25rem; }
    .nav-dropdown-toggle {
      display: flex; align-items: center; justify-content: center;
      width: 18px; height: 18px;
      background: none; border: none;
      padding: 0; margin: 0;
      cursor: pointer;
      color: rgba(255,255,255,0.5);
      transition: color 200ms ease;
    }
    .nav-dropdown-toggle:hover { color: #fff; }
    .nav-dropdown-caret {
      width: 8px; height: 8px;
      stroke: currentColor; fill: none;
      stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
      transition: transform 220ms ease;
    }
    .nav-item-dropdown:hover .nav-dropdown-caret,
    .nav-item-dropdown.open .nav-dropdown-caret { transform: rotate(180deg); }

    .nav-dropdown-panel {
      display: none;
      position: absolute;
      top: 100%; left: 50%;
      transform: translateX(-50%);
      padding-top: 0.85rem; /* invisible hover bridge closes the mouse-travel gap */
      min-width: 270px;
      z-index: 50;
    }
    /* display:block/none rather than opacity+visibility — simpler and
       unambiguous, no transition timing to get right. The fade/slide
       feel now lives entirely on .nav-dropdown-inner below, which
       still animates in via transform+opacity once the panel is
       actually in the render tree. */
    .nav-item-dropdown:hover .nav-dropdown-panel,
    .nav-item-dropdown.open .nav-dropdown-panel {
      display: block;
    }
    .nav-dropdown-inner {
      /* Overrides liquid-glass-strong's light frosted background —
         that reads fine on a card sitting in open black space, but
         over a bright hero image/video behind the navbar it washed
         out to near-invisible. Nav menus need to stay legible no
         matter what's behind the navbar, so go near-solid instead. */
      background: rgba(8,8,10,0.94);
      border-radius: 1rem;
      padding: 0.6rem;
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
      transform: translateY(-6px);
      transition: transform 220ms ease;
      box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    }
    .nav-item-dropdown:hover .nav-dropdown-inner,
    .nav-item-dropdown.open .nav-dropdown-inner { transform: translateY(0); }
    .nav-dropdown-inner a {
      display: block;
      padding: 0.65rem 0.9rem;
      border-radius: 0.6rem;
      font-family: 'Barlow', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: rgba(255,255,255,0.72);
      text-decoration: none;
      transition: background 150ms ease, color 150ms ease;
    }
    .nav-dropdown-inner a:hover { background: rgba(255,255,255,0.08); color: #fff; }
    .nav-dropdown-inner a.nav-dropdown-viewall {
      margin-top: 0.3rem;
      padding-top: 0.85rem;
      border-top: 1px solid rgba(255,255,255,0.1);
      color: #00E5FF;
      font-weight: 600;
    }

    /* Mobile hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      cursor: pointer;
      padding: 4px;
      min-width: 44px;
      min-height: 44px;
    }
    .hamburger span {
      display: block;
      width: 22px; height: 2px;
      background: #fff;
      border-radius: 2px;
      transition: all 240ms ease;
    }
    /* Hamburger → X, toggled by main.js adding .active on click */
    .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .hamburger.active span:nth-child(2) { opacity: 0; }
    .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    /* Mobile nav panel — .nav-links itself becomes the dropdown sheet
       below the pill on small screens (previously the hamburger had
       no JS at all, so it did nothing when tapped). Desktop layout
       is untouched; this only takes effect inside the 768px query
       further down, which sets display:none by default and toggles
       it via the .mobile-open class main.js adds on click. */
    @media (max-width: 768px) {
      .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        position: absolute;
        top: calc(100% + 0.75rem);
        left: 1rem; right: 1rem;
        background: rgba(8,8,10,0.96);
        backdrop-filter: blur(24px) saturate(180%);
        -webkit-backdrop-filter: blur(24px) saturate(180%);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 1.25rem;
        padding: 0.75rem;
        z-index: 90;
        box-shadow: 0 20px 50px rgba(0,0,0,0.5);
      }
      .nav-links.mobile-open .nav-link { display: block; padding: 0.85rem 0.75rem; }
      .nav-links.mobile-open li { width: 100%; }
      /* Dropdown submenus expand inline in the stacked mobile list
         instead of flying out as an absolutely-positioned popover
         (which assumed a horizontal desktop nav bar). */
      /* display:none/block again rather than a max-height transition —
         same reasoning as the outer panel: simpler and unambiguous. */
      .nav-links.mobile-open .nav-dropdown-panel {
        display: none;
        position: static;
        transform: none;
        padding-top: 0;
        min-width: 0;
      }
      .nav-links.mobile-open .nav-item-dropdown.open .nav-dropdown-panel { display: block; }
      .nav-links.mobile-open .nav-dropdown-inner { transform: none; box-shadow: none; margin: 0.25rem 0 0.5rem; }
    }

    /* ─────────────────────────────────────────────────────────
       HERO  (055 design — GLOBA CODE content)
    ───────────────────────────────────────────────────────── */
    #hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      overflow: hidden;
      display: flex;
      align-items: center;
    }
    #hero-bg-video {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .hero-video-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg,
        rgba(0,229,255,0.06) 0%,
        rgba(0,0,0,0.50)     40%,
        rgba(0,0,0,0.72)     100%
      );
      z-index: 1;
    }
    .hero-scanlines {
      position: absolute;
      inset: 0;
      background: repeating-linear-gradient(
        0deg, transparent, transparent 2px,
        rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
      );
      z-index: 2;
      pointer-events: none;
    }
    .glow-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      animation: glow-pulse 6s ease-in-out infinite;
    }
    .hero-content {
      position: relative;
      z-index: 5;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 0 1.5rem 0 2rem;
    }

    /* Giant staggered headline */
    .headline-word {
      display: block;
      line-height: 0.88;
      font-family: 'Readex Pro', sans-serif;
      opacity: 0;
      overflow-wrap: break-word;
      word-break: break-word;
    }
    .hw-build {
      font-size: clamp(5rem, 13vw, 13rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      color: #fff;
      text-shadow: 0 0 120px rgba(0,229,255,0.14);
    }
    .hw-stunning {
      font-size: clamp(3.5rem, 9vw, 9rem);
      font-weight: 300;
      letter-spacing: 0.06em;
      color: rgba(255,255,255,0.5);
      padding-left: clamp(2rem, 9vw, 11rem);
    }
    .hw-content {
      font-size: clamp(4.5rem, 12vw, 12rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      background: linear-gradient(90deg, #00E5FF 0%, #3B82F6 50%, #8B5CF6 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    /* Hero lower row */
    .hero-lower {
      display: flex;
      flex-direction: column;
      gap: 2rem;
      margin-top: 2.5rem;
    }
    @media (min-width: 1024px) {
      .hero-lower { flex-direction: row; align-items: flex-end; gap: 4rem; }
    }
    .hero-desc {
      font-family: 'Barlow', sans-serif;
      font-size: clamp(0.9rem, 1.4vw, 1rem);
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.5);
      max-width: 400px;
      opacity: 0;
    }

    /* Subscribe form */
    .hero-subscribe {
      display: inline-flex;
      align-items: center;
      border-radius: 9999px;
      overflow: hidden;
      padding: 0.25rem 0.25rem 0.25rem 1.4rem;
      max-width: 380px;
      width: 100%;
      margin-top: 0.5rem;
    }
    .hero-subscribe input {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      color: #fff;
      font-family: 'Barlow', sans-serif;
      font-size: 0.8rem;
      min-width: 0;
    }
    .hero-subscribe input::placeholder { color: rgba(255,255,255,0.38); }
    .subscribe-btn {
      background: #fff;
      color: #000;
      font-family: 'Barlow', sans-serif;
      font-size: 0.7rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      border: none;
      border-radius: 9999px;
      padding: 0.6rem 1.3rem;
      cursor: pointer;
      flex-shrink: 0;
      transition: background 200ms ease, transform 200ms ease;
    }
    .subscribe-btn:hover { background: #e5e5e5; transform: scale(1.03); }

    /* Hero stats */
    .stats-wrap {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    .stat-block {
      flex: 1;
      padding: 0 clamp(0.75rem, 2.5vw, 2rem);
      opacity: 0;
    }
    .stat-block:first-child { padding-left: 0; }
    .stat-value {
      font-family: 'Readex Pro', sans-serif;
      font-size: clamp(1.4rem, 2.8vw, 2.2rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1;
      color: #fff;
    }
    .stat-label {
      font-family: 'Barlow', sans-serif;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.42);
      margin-top: 0.3rem;
    }
    .stat-divider {
      width: 1px;
      height: 3rem;
      background: rgba(255,255,255,0.18);
      flex-shrink: 0;
    }
    .stat-divider.d1 { transform: rotate(20deg); }
    .stat-divider.d2 { transform: rotate(-20deg); }

    /* Bottom fade */
    .hero-bottom-fade {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      height: 12rem;
      background: linear-gradient(to bottom, transparent, #000);
      z-index: 4;
      pointer-events: none;
    }

    /* ─────────────────────────────────────────────────────────
       ABOUT PAGE — INTERACTIVE HERO
    ───────────────────────────────────────────────────────── */
    #about-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background: #000;
      padding: 9rem 2rem 6rem;
    }
    .about-hero-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image:
        linear-gradient(to right,  rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
      mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
      pointer-events: none;
    }
    .parallax-orb {
      transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .about-hero-content {
      position: relative;
      z-index: 3;
      max-width: 1100px;
      text-align: center;
    }
    .about-hero-content h1 {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .hero-eyebrow-tag {
      display: inline-block;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      margin-bottom: 1.75rem;
      padding: 0.45rem 1.1rem;
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 9999px;
    }
    .about-hero-desc {
      margin: 2rem auto 0;
      max-width: 520px;
      text-align: center;
      font-family: 'Barlow', sans-serif;
      font-size: clamp(0.9rem, 1.4vw, 1rem);
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.5);
    }
    .about-scroll-cue {
      margin: 3.5rem auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.6rem;
      font-size: 0.7rem;
      font-weight: 500;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.3);
    }
    .about-scroll-cue span {
      width: 1px; height: 32px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.5), transparent);
      animation: scroll-cue-pulse 2s ease-in-out infinite;
    }
    @keyframes scroll-cue-pulse {
      0%, 100% { opacity: 0.25; }
      50%      { opacity: 1; }
    }

    /* ─────────────────────────────────────────────────────────
       MISSION & VISION  (About page)
    ───────────────────────────────────────────────────────── */
    #mission-vision { padding: 6rem 2rem; background: #000; }
    .mv-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    .mv-card { border-radius: 1.5rem; padding: 2.5rem; }
    .mv-icon {
      width: 48px; height: 48px;
      border-radius: 0.85rem;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.75rem;
    }
    .mv-icon svg {
      width: 22px; height: 22px;
      stroke: var(--accent, #00E5FF);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .mv-title {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #fff;
      margin-bottom: 1rem;
    }
    .mv-text {
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.75;
      color: rgba(255,255,255,0.5);
    }

    /* ─────────────────────────────────────────────────────────
       OUR JOURNEY  (About page, vertical timeline)
    ───────────────────────────────────────────────────────── */
    #journey { padding: 6rem 2rem; background: #000; }
    .journey-inner { max-width: 780px; margin: 0 auto; }
    .journey-list {
      position: relative;
      margin-top: 3.5rem;
      padding-left: 2.5rem;
    }
    .journey-list::before {
      content: '';
      position: absolute;
      left: 5px; top: 6px; bottom: 6px;
      width: 1px;
      background: linear-gradient(to bottom, rgba(0,229,255,0.45), rgba(139,92,246,0.35), rgba(255,255,255,0.06));
    }
    .journey-item { position: relative; padding-bottom: 2.75rem; }
    .journey-item:last-child { padding-bottom: 0; }
    .journey-dot {
      position: absolute;
      left: -2.5rem; top: 4px;
      width: 11px; height: 11px;
      border-radius: 50%;
      background: var(--dot, #00E5FF);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot, #00E5FF) 18%, transparent);
    }
    .journey-year {
      font-family: 'Readex Pro', sans-serif;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: var(--dot, #00E5FF);
      margin-bottom: 0.5rem;
    }
    .journey-title {
      font-size: 1.05rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0.5rem;
      letter-spacing: -0.01em;
    }
    .journey-text {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.46);
      max-width: 480px;
    }

    /* ─────────────────────────────────────────────────────────
       SERVICE DETAIL PAGES  (digital-marketing.php etc.)
       Pain Points reuse .why-grid/.why-card, What's Included
       reuses .svc-grid/.svc-card (without the button), Tech Stack
       reuses .clients-row/.client-logo — only Solution, Results
       and Stats, Case Studies and Pricing need new CSS below.
    ───────────────────────────────────────────────────────── */

    /* Problem, Included and Tech Stack borrowed their grid/card
       classes from elsewhere but were never given their own section
       padding, so they collided directly against their neighbors
       with zero breathing room. Same 6rem rhythm as every other
       content section on this template. */
    #problem, #included, #tech-stack { padding: 6rem 2rem; background: #000; }

    /* Solution */
    #solution { padding: 6rem 2rem; background: #000; }
    .solution-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3rem;
      align-items: center;
    }
    .solution-text-title {
      font-size: clamp(1.8rem, 3.2vw, 2.6rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: #fff;
      margin-bottom: 1.25rem;
    }
    .solution-text-title .accent { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
    .solution-text-body { font-size: 0.9rem; font-weight: 300; line-height: 1.75; color: rgba(255,255,255,0.5); }
    .solution-checklist { display: flex; flex-direction: column; gap: 1rem; }
    .solution-check-item {
      display: flex;
      align-items: flex-start;
      gap: 0.85rem;
      padding: 1.1rem 1.25rem;
      border-radius: 0.85rem;
    }
    .solution-check-icon {
      width: 24px; height: 24px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--accent, #00E5FF) 16%, transparent);
      border: 1px solid color-mix(in srgb, var(--accent, #00E5FF) 45%, transparent);
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 0.1rem;
    }
    .solution-check-icon svg { width: 12px; height: 12px; stroke: var(--accent, #00E5FF); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .solution-check-text { font-size: 0.85rem; font-weight: 400; line-height: 1.55; color: rgba(255,255,255,0.75); }

    /* Results / Statistics */
    #results {
      padding: 5rem 2rem;
      background: #000;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .stats-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 2rem;
      text-align: center;
    }
    .stat-item-value {
      font-family: 'Readex Pro', sans-serif;
      font-size: clamp(2rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: var(--accent, #00E5FF);
      line-height: 1;
    }
    .stat-item-label {
      margin-top: 0.6rem;
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.03em;
      color: rgba(255,255,255,0.42);
      line-height: 1.4;
    }

    /* Case Studies / Portfolio */
    #case-studies { padding: 6rem 2rem; background: #000; }
    .case-study-grid {
      max-width: 1100px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem;
    }
    .case-study-card { border-radius: 1.25rem; padding: 2.25rem; }
    .case-study-cat {
      display: inline-block;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.3rem 0.7rem;
      border-radius: 9999px;
      border: 1px solid color-mix(in srgb, var(--accent, #00E5FF) 40%, transparent);
      background: color-mix(in srgb, var(--accent, #00E5FF) 10%, transparent);
      color: var(--accent, #00E5FF);
      margin-bottom: 1.25rem;
    }
    .case-study-client {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      color: #fff;
      margin-bottom: 0.6rem;
      letter-spacing: -0.01em;
    }
    .case-study-result {
      font-size: 1.3rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      line-height: 1.3;
      color: var(--accent, #00E5FF);
      margin-bottom: 1.1rem;
    }
    .case-study-quote {
      font-size: 0.85rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.5);
      font-style: italic;
    }

    /* Pricing / Packages */
    #pricing { padding: 6rem 2rem; background: #000; }
    .pricing-grid {
      max-width: 1150px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      align-items: stretch;
    }
    .pricing-card {
      display: flex;
      flex-direction: column;
      padding: 2.5rem 2rem;
      border-radius: 1.5rem;
      position: relative;
    }
    .pricing-card.highlighted {
      border-color: var(--accent, #00E5FF);
      box-shadow: 0 0 60px -14px var(--accent, #00E5FF);
    }
    .pricing-badge {
      position: absolute;
      top: -0.8rem; left: 50%;
      transform: translateX(-50%);
      background: var(--accent, #00E5FF);
      color: #000;
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.4rem 1rem;
      border-radius: 9999px;
      white-space: nowrap;
    }
    .pricing-name {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0.6rem;
    }
    .pricing-price {
      font-family: 'Readex Pro', sans-serif;
      font-size: clamp(1.7rem, 2.8vw, 2.3rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      color: #fff;
    }
    .pricing-price .period { font-size: 0.8rem; font-weight: 400; color: rgba(255,255,255,0.4); }
    .pricing-desc {
      margin-top: 0.85rem;
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,0.48);
      min-height: 2.5em;
    }
    .pricing-features {
      margin-top: 1.75rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      flex: 1;
    }
    .pricing-feature {
      display: flex;
      align-items: flex-start;
      gap: 0.6rem;
      font-size: 0.8rem;
      font-weight: 400;
      color: rgba(255,255,255,0.68);
      line-height: 1.4;
    }
    .pricing-feature svg {
      width: 14px; height: 14px;
      stroke: var(--accent, #00E5FF);
      fill: none; stroke-width: 2.4;
      stroke-linecap: round; stroke-linejoin: round;
      flex-shrink: 0; margin-top: 0.15rem;
    }
    .pricing-cta { margin-top: 2rem; }

    /* ─────────────────────────────────────────────────────────
       SERVICES PAGE — HERO WITH 3D WIREFRAME GLOBE
    ───────────────────────────────────────────────────────── */
    #services-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #000;
      padding: 9rem 2rem 6rem;
    }
    .svc-hero-grid {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-image:
        linear-gradient(to right,  rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
      background-size: 48px 48px;
      -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
      mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 40%, transparent 90%);
      pointer-events: none;
    }
    .svc-hero-inner {
      position: relative;
      z-index: 2;
      max-width: 1280px;
      margin: 0 auto;
      width: 100%;
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 3rem;
      align-items: center;
    }
    .svc-hero-title {
      /* Every other hero on the site (home, about, contact, all 8
         service detail pages) runs a giant word-stack headline up
         to 13rem. This is a full sentence, not stacked words, so it
         can't scale that far without breaking the 2-col layout next
         to the 3D globe — but it was sitting at a max of 3.6rem,
         visibly weaker than the rest of the site's hero treatment. */
      font-family: 'Barlow', sans-serif;
      font-size: clamp(2.4rem, 4.8vw, 4.4rem);
      font-weight: 700;
      line-height: 1.08;
      letter-spacing: -0.02em;
      color: #fff;
    }
    .svc-hero-title .accent { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }
    .svc-hero-desc {
      margin-top: 1.5rem;
      max-width: 460px;
      font-family: 'Barlow', sans-serif;
      font-size: clamp(0.9rem, 1.4vw, 1rem);
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.5);
    }
    .svc-hero-btn { margin-top: 2rem; }

    /* ─────────────────────────────────────────────────────────
       SERVICE DETAIL PAGE HERO — interactive HD video background.
       The vignette's radial-gradient center tracks the cursor via
       js/main.js (#service-hero pointermove), subtly revealing
       more of the video where you're looking.
    ───────────────────────────────────────────────────────── */
    #service-hero {
      position: relative;
      min-height: 100vh;
      display: flex;
      align-items: center;
      overflow: hidden;
      background: #000;
      padding: 9rem 2rem 6rem;
    }
    #service-hero-video {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .svc-hero-video-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(circle at var(--mx, 50%) var(--my, 40%),
        rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.75) 55%, rgba(0,0,0,0.92) 100%);
    }
    .service-hero-content {
      position: relative;
      z-index: 3;
      max-width: 900px;
      width: 100%;
      min-width: 0; /* let this flex item shrink below its text's intrinsic width */
      margin: 0 auto;
      text-align: center;
    }
    .service-hero-content h1 { display: flex; flex-direction: column; align-items: center; }

    /* 3D wireframe globe — real CSS 3D (perspective + preserve-3d), no WebGL */
    .svc-hero-3d { display: flex; align-items: center; justify-content: center; perspective: 1200px; }
    .hero3d-stage {
      width: min(320px, 70vw);
      height: min(320px, 70vw);
      transform-style: preserve-3d;
      transition: transform 300ms ease;
      will-change: transform;
    }
    .hero3d-globe {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d;
      animation: hero3d-spin 24s linear infinite;
    }
    @keyframes hero3d-spin {
      from { transform: rotateY(0deg); }
      to   { transform: rotateY(360deg); }
    }
    .hero3d-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1px solid rgba(0,229,255,0.32);
      transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    }
    .hero3d-ring:nth-child(odd) { border-color: rgba(139,92,246,0.28); }
    .hero3d-node {
      position: absolute;
      top: 50%; left: 50%;
      width: 6px; height: 6px;
      margin: -3px;
      border-radius: 50%;
      background: linear-gradient(135deg, #00E5FF, #8B5CF6);
      box-shadow: 0 0 10px rgba(0,229,255,0.6);
      transform: translate3d(var(--nx, 0), var(--ny, 0), var(--nz, 0));
    }

    /* ─────────────────────────────────────────────────────────
       SERVICES PAGE — GRID (with description + button)
    ───────────────────────────────────────────────────────── */
    #services-grid { padding: 6rem 2rem; background: #000; }
    .svc-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    .svc-card {
      display: flex;
      flex-direction: column;
      padding: 2rem 1.5rem 1.75rem;
      border-radius: 1rem;
      transition: transform 300ms ease, border-color 300ms ease;
    }
    .svc-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2); }
    .svc-icon {
      width: 46px; height: 46px;
      border-radius: 0.75rem;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.5rem;
      transition: border-color 300ms ease, box-shadow 300ms ease;
    }
    .svc-icon svg {
      width: 20px; height: 20px;
      stroke: var(--accent, #00E5FF);
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .svc-card:hover .svc-icon { border-color: var(--accent); box-shadow: 0 0 24px -6px var(--accent); }
    .svc-name {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
      margin-bottom: 0.6rem;
    }
    .svc-desc {
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.42);
      margin-bottom: 1.5rem;
      flex: 1;
    }
    .svc-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      padding: 0.6rem 1rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.16);
      font-family: 'Barlow', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      align-self: flex-start;
      transition: background 200ms ease, border-color 200ms ease, color 200ms ease, gap 200ms ease;
    }
    .svc-btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
    .svc-btn:hover { background: var(--accent); border-color: var(--accent); color: #000; gap: 0.6rem; }

    /* ─────────────────────────────────────────────────────────
       SERVICES PAGE — WHY CHOOSE US
    ───────────────────────────────────────────────────────── */
    #why-us { padding: 6rem 2rem; background: #000; }
    .why-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    /* 3-card variant (Problem/Pain Points on service pages). Equal
       specificity to .why-grid, declared after it and before the
       responsive breakpoints below, so it overrides the desktop
       default but still correctly collapses at 1024px/560px. */
    .why-grid-3 { grid-template-columns: repeat(3, 1fr); max-width: 1100px; }
    .why-card { position: relative; padding: 2rem 1.5rem 1.75rem; border-radius: 1rem; }
    .why-num {
      position: absolute;
      top: 1.35rem; right: 1.35rem;
      font-family: 'Readex Pro', sans-serif;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.2);
    }
    .why-icon {
      width: 46px; height: 46px;
      border-radius: 0.75rem;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.5rem;
    }
    .why-icon svg { width: 20px; height: 20px; stroke: var(--accent, #00E5FF); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
    .why-title {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
      margin-bottom: 0.6rem;
    }
    .why-text { font-size: 0.8rem; font-weight: 300; line-height: 1.6; color: rgba(255,255,255,0.42); }

    /* ─────────────────────────────────────────────────────────
       ABOUT (078)  — shared by the homepage teaser (#about) and
       the About page's fuller "Who We Are" section (#who-we-are)
    ───────────────────────────────────────────────────────── */
    #about, #who-we-are {
      padding: 8rem 2rem;
      background: #000;
    }
    .about-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1.6fr;
      gap: 6rem;
      align-items: start;
    }
    .section-eyebrow {
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.32);
      margin-bottom: 1.5rem;
    }
    .about-counter {
      font-size: clamp(3.5rem, 6vw, 7rem);
      font-weight: 700;
      letter-spacing: -0.04em;
      line-height: 1;
      color: #fff;
    }
    .about-counter-label {
      font-size: 0.8rem;
      font-weight: 400;
      color: rgba(255,255,255,0.38);
      letter-spacing: 0.06em;
      margin-top: 0.5rem;
    }
    .about-stats { display: flex; flex-direction: column; gap: 2.5rem; }
    .about-divider { height: 1px; background: rgba(255,255,255,0.07); }

    .reveal-text {
      font-size: clamp(1.4rem, 2.6vw, 2.3rem);
      font-weight: 300;
      line-height: 1.35;
      letter-spacing: -0.01em;
    }
    .reveal-text .word {
      display: inline-block;
      color: rgba(255,255,255,0.18);
      transition: color 350ms ease;
    }
    .reveal-text .word.lit { color: #fff; }

    .about-body {
      margin-top: 2.5rem;
      font-size: 0.9rem;
      font-weight: 400;
      line-height: 1.7;
      color: rgba(255,255,255,0.42);
      max-width: 500px;
    }
    .text-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      margin-top: 2rem;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
      text-decoration: none;
      cursor: pointer;
      transition: gap 200ms ease;
    }
    .text-link:hover { gap: 1rem; }
    .text-link svg { width: 16px; height: 16px; }

    /* ─────────────────────────────────────────────────────────
       SELECTED WORK (078)
    ───────────────────────────────────────────────────────── */
    #work { padding: 6rem 2rem; background: #000; }

    .section-header {
      max-width: 1280px;
      margin: 0 auto 4rem;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 2rem;
    }
    .section-title {
      font-size: clamp(2rem, 4vw, 3.5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
    }
    .section-title .accent {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-weight: 400;
    }
    .section-link {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.45);
      text-decoration: none;
      cursor: pointer;
      white-space: nowrap;
      transition: color 200ms ease;
    }
    .section-link:hover { color: #fff; }

    .work-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.5rem;
    }
    .project-card {
      position: relative;
      overflow: hidden;
      border-radius: 1rem;
      cursor: pointer;
      background: #111;
      aspect-ratio: 4/3;
    }
    .project-card img {
      width: 100%; height: 100%;
      object-fit: cover;
      transition: transform 600ms ease;
    }
    .project-card:hover img { transform: scale(1.05); }
    .card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 55%);
      z-index: 1;
    }
    .card-info {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 2;
      padding: 1.5rem;
    }
    .card-cat {
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.48);
      margin-bottom: 0.35rem;
    }
    .card-name {
      font-size: 1.05rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }
    .card-num {
      position: absolute;
      top: 1.25rem; left: 1.25rem;
      z-index: 2;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.38);
    }
    .card-arrow {
      position: absolute;
      top: 1.25rem; right: 1.25rem;
      z-index: 2;
      width: 36px; height: 36px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 250ms ease, transform 250ms ease;
    }
    .project-card:hover .card-arrow { opacity: 1; transform: translateY(0); }

    /* ─────────────────────────────────────────────────────────
       PORTFOLIO PAGES (branding/video/website/seo-portfolio.php)
       Reuses .work-grid / .project-card exactly as the homepage's
       "Selected Work" section — just a denser 3-up grid.
    ───────────────────────────────────────────────────────── */
    #portfolio-listing { padding: 9.5rem 2rem 6rem; background: #000; min-height: 60vh; }
    /* Real crawlable <a href> for "website" portfolio cards, replacing
       the old window.open()-only JS navigation. Sits above the
       z-index:2 card content so it stays fully invisible/clickable. */
    .project-card-link { position: absolute; inset: 0; z-index: 3; }
    .project-card-link:focus-visible { outline: 2px solid #00E5FF; outline-offset: 3px; border-radius: inherit; }
    .portfolio-hero-desc {
      max-width: 640px; margin: -0.5rem auto 2.5rem;
      text-align: center;
      font-size: 0.9rem; font-weight: 300; line-height: 1.6;
      color: rgba(255,255,255,0.45);
    }
    .portfolio-grid { grid-template-columns: repeat(3, 1fr); }
    .project-card-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #141414, #0a0a0a); }
    .card-play-btn {
      position: absolute; top: 50%; left: 50%; z-index: 2;
      transform: translate(-50%, -50%) scale(0.9);
      width: 56px; height: 56px; border-radius: 50%;
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(255,255,255,0.3);
      backdrop-filter: blur(4px);
      display: flex; align-items: center; justify-content: center;
      opacity: 0.9;
      transition: transform 250ms ease, opacity 250ms ease, background 250ms ease;
    }
    .card-play-btn svg { width: 20px; height: 20px; margin-left: 3px; }
    .project-card:hover .card-play-btn { transform: translate(-50%, -50%) scale(1.05); background: rgba(0,229,255,0.25); opacity: 1; }
    .card-stat {
      font-size: 0.95rem; font-weight: 700;
      color: #00E5FF;
      margin-bottom: 0.3rem;
      text-shadow: 0 0 20px rgba(0,229,255,0.35);
    }

    /* ─────────────────────────────────────────────────────────
       VIDEO SHOWCASE (078)
    ───────────────────────────────────────────────────────── */
    #showcase {
      padding: 6rem 2rem;
      background: #000;
      overflow: hidden;
    }
    .showcase-inner {
      max-width: 1280px;
      margin: 0 auto;
      position: relative;
    }
    .showcase-text {
      position: relative;
      z-index: 2;
      max-width: 520px;
      margin-bottom: -4rem;
    }
    .showcase-title {
      font-size: clamp(2.5rem, 5vw, 5rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 1.25rem;
    }
    .showcase-title .accent {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-weight: 400;
    }
    .showcase-desc {
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.48);
      max-width: 380px;
    }
    #showcase-video-wrap {
      position: relative;
      z-index: 1;
      border-radius: 1.5rem;
      overflow: hidden;
      margin-left: auto;
      width: 75%;
      box-shadow: 0 40px 120px rgba(0,0,0,0.8);
      will-change: transform;
    }
    #showcase-video-wrap video {
      width: 100%;
      display: block;
      aspect-ratio: 16/9;
      object-fit: cover;
    }

    /* ─────────────────────────────────────────────────────────
       CLIENT TESTIMONIALS (ported from testimonial.tsx bento layout)
    ───────────────────────────────────────────────────────── */
    #testimonials {
      position: relative;
      padding: 6rem 2rem 7rem;
      background: #000;
      overflow: hidden;
    }
    .testi-inner { max-width: 1280px; margin: 0 auto; }
    .testi-header {
      max-width: 640px;
      margin: 0 auto;
      text-align: center;
    }
    .testi-title {
      font-family: 'Barlow', sans-serif;
      font-size: clamp(1.8rem, 3.4vw, 2.6rem);
      font-weight: 500;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: #fff;
    }
    .testi-sub {
      margin-top: 0.6rem;
      font-size: 0.9rem;
      font-weight: 300;
      color: rgba(255,255,255,0.42);
    }

    /* Bento grid: col1 big+small, col2 three equal, col3 small+big */
    .testi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0.85rem;
      margin-top: 3.5rem;
    }
    .testi-col { display: flex; flex-direction: column; gap: 0.85rem; height: 100%; }

    .testi-card {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border-radius: 0.85rem;
      border: 1px solid rgba(255,255,255,0.08);
      padding: 1.5rem;
      overflow: hidden;
    }
    .testi-card.big   { flex: 7 1 0; min-height: 230px; }
    .testi-card.small { flex: 3 1 0; min-height: 150px; }

    .testi-card--primary { background: #0c1a2e; }
    .testi-card--primary::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(to right,  rgba(255,255,255,0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.055) 1px, transparent 1px);
      background-size: 42px 42px;
      -webkit-mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
      mask-image: radial-gradient(ellipse 80% 50% at 50% 0%, #000 70%, transparent 110%);
    }
    .testi-card--blue { background: #2563eb; }
    .testi-card--dark { background: #111111; }

    .testi-quote {
      position: relative;
      z-index: 1;
      font-size: 0.9rem;
      font-weight: 400;
      line-height: 1.55;
      color: rgba(255,255,255,0.82);
    }
    .testi-card--blue .testi-quote { color: rgba(255,255,255,0.94); }

    .testi-meta {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 0.75rem;
      margin-top: 1.25rem;
    }
    .testi-name {
      font-family: 'Readex Pro', sans-serif;
      font-size: 0.95rem;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
    }
    .testi-role {
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(255,255,255,0.5);
      margin-top: 0.15rem;
    }
    .testi-avatar {
      width: 56px; height: 56px;
      border-radius: 0.7rem;
      object-fit: cover;
      flex-shrink: 0;
    }

    /* Decorative bottom ruler with corner ticks */
    .testi-ruler {
      position: absolute;
      left: 5%; right: 5%;
      bottom: 1.5rem;
      height: 1px;
      background: rgba(255,255,255,0.10);
    }
    .testi-ruler::before,
    .testi-ruler::after {
      content: '';
      position: absolute;
      bottom: -6px;
      width: 12px; height: 12px;
      background: #000;
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 2px;
    }
    .testi-ruler::before { left: -6px; }
    .testi-ruler::after  { right: -6px; }

    /* Blur + translateY scroll reveal, staggered via inline --delay per element */
    .tt-reveal {
      opacity: 0;
      transform: translateY(-18px);
      filter: blur(8px);
      transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
      transition-delay: var(--d, 0s);
    }
    .tt-reveal.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

    /* ─────────────────────────────────────────────────────────
       CLIENTS  (logo cloud, ported from CinematicLogoCloud "grid" variant)
    ───────────────────────────────────────────────────────── */
    #clients {
      padding: 4.5rem 2rem;
      background: #000;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .clients-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
    .clients-desc {
      margin-top: 0.4rem;
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.35);
    }
    .clients-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 1.75rem 3rem;
      margin-top: 2.5rem;
    }
    .client-logo {
      display: inline-block;
      color: rgba(255,255,255,0.68);
      cursor: default;
      transition: color 200ms ease;
    }
    .client-logo:hover { color: #fff; }

    /* Real image-based logo cloud (partials/clients-section.php) —
       separate from .clients-row/.client-logo above, which the
       service detail pages' Tech Stack strip already owns. */
    .clogo-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 2rem 3rem;
      margin-top: 2.5rem;
    }
    .clogo-item {
      display: flex; align-items: center; justify-content: center;
      height: 34px;
      filter: grayscale(1) brightness(1.8) opacity(0.55);
      transition: filter 250ms ease, transform 250ms ease;
    }
    .clogo-item:hover { filter: grayscale(0) brightness(1) opacity(1); transform: translateY(-2px); }
    .clogo-item img { height: 100%; width: auto; max-width: 140px; object-fit: contain; }
    .clogo-viewall {
      display: inline-block;
      margin-top: 2.25rem;
      font-size: 0.75rem;
      font-weight: 600;
      color: rgba(255,255,255,0.5);
      text-decoration: none;
      border-bottom: 1px solid rgba(255,255,255,0.2);
      padding-bottom: 2px;
      transition: color 200ms ease, border-color 200ms ease;
    }
    .clogo-viewall:hover { color: #00E5FF; border-color: #00E5FF; }

    /* ─────────────────────────────────────────────────────────
       CLIENTS PAGE (clients.php) — 3D interactive logo ring
       Real CSS 3D (perspective + preserve-3d), no WebGL — same
       technique as the services page hero globe.
    ───────────────────────────────────────────────────────── */
    /* overflow-x: hidden guards against the rotating ring's translateZ
       cards swinging past the viewport edge on narrow phones. */
    #clients3d-hero { padding: 9.5rem 2rem 6rem; background: #000; min-height: 60vh; overflow-x: hidden; }
    .clients3d-wrap {
      display: flex; align-items: center; justify-content: center;
      perspective: 1600px;
      height: 360px;
      margin: 3.5rem 0 1rem;
    }
    .clients3d-stage {
      width: 100%; max-width: 900px; height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 300ms ease;
      will-change: transform;
    }
    .clients3d-ring {
      position: absolute; inset: 0;
      transform-style: preserve-3d;
      animation-name: clients3d-spin;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }
    @keyframes clients3d-spin {
      from { transform: rotateY(0deg); }
      to   { transform: rotateY(360deg); }
    }
    .clients3d-card {
      position: absolute;
      top: 50%; left: 50%;
      width: 170px; height: 96px;
      margin: -48px 0 0 -85px;
      background: #fff;
      border-radius: 1rem;
      display: flex; align-items: center; justify-content: center;
      padding: 1.25rem;
      box-shadow: 0 20px 50px -10px rgba(0,0,0,0.6);
      backface-visibility: hidden;
    }
    .clients3d-card img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .clients3d-card a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }

    /* Flat, accessible "all clients" grid below the ring */
    .clogo-grid-wrap { max-width: 1100px; margin: 0 auto; }
    .clogo-grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 1.25rem;
    }
    .clogo-grid-item {
      display: flex; align-items: center; justify-content: center;
      height: 90px;
      background: #fff;
      border-radius: 0.9rem;
      padding: 1.25rem;
      transition: transform 250ms ease, box-shadow 250ms ease;
    }
    .clogo-grid-item:hover { transform: translateY(-3px); box-shadow: 0 16px 40px -12px rgba(0,229,255,0.3); }
    .clogo-grid-item img { max-width: 100%; max-height: 100%; object-fit: contain; }

    /* ─────────────────────────────────────────────────────────
       SERVICES GRID
    ───────────────────────────────────────────────────────── */
    #services { padding: 6rem 2rem; background: #000; }

    .services-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    .service-card {
      position: relative;
      padding: 2rem 1.5rem 1.75rem;
      border-radius: 1rem;
      overflow: hidden;
      cursor: pointer;
      transition: transform 300ms ease, background 300ms ease, border-color 300ms ease;
    }
    /* Top accent hairline on hover */
    .service-card::before {
      content: '';
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: var(--accent);
      opacity: 0;
      transition: opacity 300ms ease;
    }
    /* Corner accent bloom on hover */
    .service-card::after {
      content: '';
      position: absolute;
      top: -60px; right: -60px;
      width: 140px; height: 140px;
      border-radius: 50%;
      background: var(--accent);
      filter: blur(50px);
      opacity: 0;
      transition: opacity 400ms ease;
      pointer-events: none;
    }
    /* Scoped with .services-grid so this beats `.sr.visible`,
       which is declared later in the sheet with equal specificity. */
    .services-grid .service-card:hover {
      transform: translateY(-4px);
      background: rgba(255,255,255,0.10);
      border-color: rgba(255,255,255,0.20);
    }
    .service-card:hover::before { opacity: 1; }
    .service-card:hover::after  { opacity: 0.16; }
    /* Stretched-link pattern: a real, crawlable <a href> that fills
       the whole card invisibly, sitting under the z-index:2 content
       so the icon/text stay visible while the entire card is the
       click target — same UX as before, but now with an actual
       href in the markup for search engines and AI crawlers to
       follow (previously this card had no link at all). */
    .service-card-link {
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
    }
    .service-card-link:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
    }

    .service-num {
      position: absolute;
      top: 1.35rem; right: 1.35rem;
      font-family: 'Readex Pro', sans-serif;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.12em;
      color: rgba(255,255,255,0.20);
      z-index: 2;
      transition: color 300ms ease;
    }
    .service-card:hover .service-num { color: rgba(255,255,255,0.45); }

    .service-icon {
      position: relative;
      z-index: 2;
      width: 46px; height: 46px;
      border-radius: 0.75rem;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.03);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 1.5rem;
      transition: border-color 300ms ease, box-shadow 300ms ease;
    }
    .service-icon svg {
      width: 20px; height: 20px;
      fill: none;
      stroke: rgba(255,255,255,0.78);
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 300ms ease;
    }
    .service-card:hover .service-icon {
      border-color: var(--accent);
      box-shadow: 0 0 24px -6px var(--accent);
    }
    .service-card:hover .service-icon svg { stroke: var(--accent); }

    .service-name {
      position: relative;
      z-index: 2;
      font-family: 'Readex Pro', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: -0.01em;
      line-height: 1.3;
      color: #fff;
      margin-bottom: 0.6rem;
    }
    .service-desc {
      position: relative;
      z-index: 2;
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.42);
    }
    .service-more {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 0.4rem;
      margin-top: 1.25rem;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.28);
      opacity: 0;
      transform: translateY(-4px);
      transition: opacity 300ms ease, transform 300ms ease, color 300ms ease;
    }
    .service-more svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.8; fill: none; }
    .service-card:hover .service-more {
      opacity: 1;
      transform: translateY(0);
      color: var(--accent);
    }

    /* ─────────────────────────────────────────────────────────
       SERVICES MARQUEE (078)
    ───────────────────────────────────────────────────────── */
    #services-marquee {
      padding: 5rem 0;
      background: #000;
      border-top: 1px solid rgba(255,255,255,0.06);
      border-bottom: 1px solid rgba(255,255,255,0.06);
      overflow: hidden;
    }
    .marquee-track {
      display: flex;
      gap: 3rem;
      width: max-content;
      animation: marquee 32s linear infinite;
    }
    .marquee-track:hover { animation-play-state: paused; }
    .marquee-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      white-space: nowrap;
      font-size: clamp(1.5rem, 3vw, 2rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.13);
    }
    .marquee-item .dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: rgba(255,255,255,0.18);
      flex-shrink: 0;
    }
    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ─────────────────────────────────────────────────────────
       CTA + HLS (078)
    ───────────────────────────────────────────────────────── */
    #cta {
      position: relative;
      min-height: 70vh;
      display: flex;
      align-items: center;
      overflow: hidden;
    }
    #cta-video {
      position: absolute;
      inset: 0;
      width: 100%; height: 100%;
      object-fit: cover;
      z-index: 0;
    }
    .cta-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.6);
      z-index: 1;
    }
    .cta-content {
      position: relative;
      z-index: 2;
      width: 100%;
      max-width: 1280px;
      margin: 0 auto;
      padding: 6rem 2rem;
      text-align: center;
    }
    .cta-title {
      font-size: clamp(2.5rem, 6vw, 6rem);
      font-weight: 700;
      letter-spacing: -0.03em;
      line-height: 1;
      margin-bottom: 1.5rem;
    }
    .cta-title .accent {
      font-family: 'Instrument Serif', serif;
      font-style: italic;
      font-weight: 400;
    }
    .cta-sub {
      font-size: 1rem;
      font-weight: 300;
      color: rgba(255,255,255,0.48);
      max-width: 480px;
      margin: 0 auto 3rem;
      line-height: 1.6;
    }
    .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
    /* .btn-solid / .btn-ghost are used on both <button> (homepage,
       scrolls to the on-page form) and <a> (other pages, navigates to
       index.php#start-project) — these two rules keep both tags identical. */
    .btn-solid {
      display: inline-block;
      font-family: 'Barlow', sans-serif;
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      background: #fff;
      color: #000;
      border: none;
      border-radius: 9999px;
      padding: 1rem 2.2rem;
      cursor: pointer;
      transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    }
    .btn-solid:hover { background: #e5e5e5; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,255,255,0.15); }
    .btn-ghost {
      display: inline-block;
      font-family: 'Barlow', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      text-decoration: none;
      background: transparent;
      color: #fff;
      border-radius: 9999px;
      padding: 1rem 2.2rem;
      cursor: pointer;
      transition: background 200ms ease, transform 200ms ease;
    }
    .btn-ghost:hover { background: rgba(255,255,255,0.1); transform: translateY(-2px); }

    /* ─────────────────────────────────────────────────────────
       PROJECT INQUIRY FORM  — shared by index.php's #start-project
       and services.php's #services-contact (same #pf-form markup).
       Extra bottom padding (7rem vs 6rem top) gives breathing room
       before the section that follows.
    ───────────────────────────────────────────────────────── */
    #start-project, #services-contact { padding: 6rem 2rem 7rem; background: #000; }
    .pf-inner { max-width: 1200px; margin: 0 auto; }
    .pf-header { text-align: center; max-width: 560px; margin: 0 auto 3rem; }

    /* Form + FAQ side by side */
    .pf-layout {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: 2rem;
      align-items: start;
    }
    /* Form-only variant (no FAQ/second column) — case-study-single.php */
    .pf-layout-single {
      grid-template-columns: 1fr;
      max-width: 640px;
      margin: 0 auto;
    }
    .pf-sub {
      margin-top: 0.75rem;
      font-size: 0.9rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.45);
    }

    .pf-card {
      border-radius: 1.5rem;
      padding: 2.5rem;
    }

    .pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }

    .pf-field { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }
    .pf-field:last-of-type { margin-bottom: 0; }
    .pf-label {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.09em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.5);
    }
    .pf-label-note {
      text-transform: none;
      font-weight: 400;
      letter-spacing: normal;
      color: rgba(255,255,255,0.3);
      font-size: 0.75rem;
      margin-left: 0.25rem;
    }

    .pf-input, .pf-select, .pf-textarea {
      width: 100%;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 0.6rem;
      padding: 0.75rem 1rem;
      font-family: 'Barlow', sans-serif;
      font-size: 0.85rem;
      color: #fff;
      outline: none;
      transition: border-color 200ms ease, background 200ms ease;
    }
    .pf-input::placeholder, .pf-textarea::placeholder { color: rgba(255,255,255,0.3); }
    .pf-input:focus, .pf-select:focus, .pf-textarea:focus {
      border-color: rgba(0,229,255,0.6);
      background: rgba(255,255,255,0.08);
    }
    .pf-textarea { resize: vertical; min-height: 110px; line-height: 1.55; }

    .pf-select {
      appearance: none;
      -webkit-appearance: none;
      cursor: pointer;
      padding-right: 2.1rem;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.85rem center;
      background-size: 11px;
    }
    .pf-select option { background: #111; color: #fff; }

    /* Date/time native icon needs to stay visible against dark fields */
    .pf-input[type="date"]::-webkit-calendar-picker-indicator,
    .pf-input[type="time"]::-webkit-calendar-picker-indicator {
      filter: invert(1) opacity(0.6);
      cursor: pointer;
    }

    .pf-phone-row { display: flex; gap: 0.6rem; }
    .pf-phone-row .pf-select { flex: 0 0 132px; }
    .pf-phone-row .pf-input { flex: 1; min-width: 0; }

    .pf-checkbox-row {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-top: 0.85rem;
    }
    .pf-checkbox-row input[type="checkbox"] {
      width: 17px; height: 17px;
      accent-color: #00E5FF;
      cursor: pointer;
      flex-shrink: 0;
    }
    .pf-checkbox-row label {
      font-size: 0.8rem;
      font-weight: 400;
      color: rgba(255,255,255,0.55);
      cursor: pointer;
    }

    .pf-chip-group { display: flex; flex-wrap: wrap; gap: 0.6rem; }
    .pf-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.04);
      font-family: 'Barlow', sans-serif;
      font-size: 0.8rem;
      font-weight: 500;
      color: rgba(255,255,255,0.6);
      cursor: pointer;
      user-select: none;
      transition: border-color 200ms ease, color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    }
    .pf-chip:hover { border-color: rgba(255,255,255,0.3); color: #fff; }
    .pf-chip.active {
      background: linear-gradient(135deg, rgba(0,229,255,0.16), rgba(139,92,246,0.16));
      border-color: #00E5FF;
      color: #fff;
      box-shadow: 0 0 20px -8px rgba(0,229,255,0.6);
    }
    .pf-chip svg {
      width: 13px; height: 13px;
      stroke: #00E5FF;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: 0;
      transform: scale(0.6);
      transition: opacity 200ms ease, transform 200ms ease;
      flex-shrink: 0;
    }
    .pf-chip.active svg { opacity: 1; transform: scale(1); }

    .pf-error-msg {
      display: none;
      font-size: 0.75rem;
      color: #F87171;
      margin-top: 0.1rem;
    }
    .pf-field.error .pf-chip-group { }
    .pf-field.error .pf-error-msg { display: block; }
    .pf-field.error .pf-chip:not(.active) { border-color: rgba(248,113,113,0.35); }

    .pf-hint {
      font-size: 0.75rem;
      font-weight: 300;
      line-height: 1.55;
      color: rgba(255,255,255,0.32);
    }

    .pf-submit {
      display: block;
      width: 100%;
      text-align: center;
      margin-top: 0.5rem;
    }
    .pf-submit[disabled] { opacity: 0.6; cursor: not-allowed; }
    .pf-submit-error {
      display: none;
      font-size: 0.8rem;
      color: #F87171;
      text-align: center;
      margin-bottom: 0.75rem;
      line-height: 1.5;
    }
    .pf-submit-error.show { display: block; }

    .pf-success {
      display: none;
      text-align: center;
      padding: 2.5rem 1rem 1rem;
    }
    .pf-success.show { display: block; }
    .pf-success-icon {
      width: 54px; height: 54px;
      border-radius: 50%;
      background: rgba(34,197,94,0.14);
      border: 1px solid rgba(34,197,94,0.4);
      display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem;
    }
    .pf-success-icon svg { width: 24px; height: 24px; stroke: #22C55E; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .pf-success h3 {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1.25rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0.5rem;
    }
    .pf-success p {
      font-size: 0.85rem;
      font-weight: 300;
      color: rgba(255,255,255,0.48);
      max-width: 380px;
      margin: 0 auto;
      line-height: 1.6;
    }

    /* ─────────────────────────────────────────────────────────
       FAQ  (beside the project form)
    ───────────────────────────────────────────────────────── */
    .faq-card { border-radius: 1.5rem; padding: 2.5rem; }
    .faq-title {
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: #fff;
      margin-bottom: 1.5rem;
    }
    .faq-title .accent { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; }

    .faq-list { display: flex; flex-direction: column; }
    .faq-item { border-bottom: 1px solid rgba(255,255,255,0.08); }
    .faq-item:last-child { border-bottom: none; }

    .faq-question {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      background: none;
      border: none;
      padding: 1rem 0;
      cursor: pointer;
      text-align: left;
      font-family: 'Barlow', sans-serif;
      font-size: 0.85rem;
      font-weight: 500;
      color: rgba(255,255,255,0.82);
      transition: color 200ms ease;
    }
    .faq-question:hover { color: #fff; }
    .faq-question:focus-visible { outline: 2px solid rgba(0,229,255,0.6); outline-offset: 2px; }

    .faq-icon {
      width: 11px; height: 11px;
      flex-shrink: 0;
      fill: none;
      stroke: rgba(255,255,255,0.5);
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 250ms ease, stroke 200ms ease;
    }
    .faq-item.open .faq-icon { transform: rotate(180deg); stroke: #00E5FF; }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 350ms ease;
    }
    .faq-answer p {
      padding: 0 1.4rem 1.1rem 0;
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.65;
      color: rgba(255,255,255,0.46);
    }

    /* Contact info panel (contact.php) — reuses .faq-card for the
       glass shell, only these list-item styles are new. */
    .contact-info-list { display: flex; flex-direction: column; gap: 0.85rem; }
    .contact-info-item {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      padding: 1rem;
      border-radius: 0.85rem;
      border: 1px solid rgba(255,255,255,0.08);
      text-decoration: none;
      transition: background 200ms ease, border-color 200ms ease;
    }
    a.contact-info-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
    .contact-info-icon {
      width: 40px; height: 40px;
      flex-shrink: 0;
      border-radius: 0.65rem;
      background: rgba(0,229,255,0.1);
      border: 1px solid rgba(0,229,255,0.3);
      display: flex; align-items: center; justify-content: center;
    }
    .contact-info-icon svg { width: 18px; height: 18px; stroke: #00E5FF; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .contact-info-label {
      display: block;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.4);
      margin-bottom: 0.3rem;
    }
    .contact-info-value {
      display: block;
      font-size: 0.9rem;
      font-weight: 500;
      color: #fff;
      line-height: 1.45;
      word-break: break-word;
    }

    /* ─────────────────────────────────────────────────────────
       BLOG
    ───────────────────────────────────────────────────────── */
    #blog { padding: 6rem 2rem; background: #000; }
    .blog-grid {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.25rem;
    }
    .blog-card {
      position: relative;
      background: #111;
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 1rem;
      padding: 1.75rem 1.5rem 2.25rem;
      cursor: pointer;
      transition: transform 300ms ease, border-color 300ms ease, background 300ms ease;
    }
    .blog-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,0.2); background: #141414; }
    .blog-cat {
      display: inline-block;
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 0.3rem 0.7rem;
      border-radius: 9999px;
      border: 1px solid;
      margin-bottom: 1.1rem;
    }
    .blog-title {
      font-family: 'Readex Pro', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      color: #fff;
      line-height: 1.35;
      margin-bottom: 0.6rem;
    }
    .blog-excerpt {
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.42);
      margin-bottom: 1.25rem;
    }
    .blog-meta {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.32);
    }
    .blog-dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.32); flex-shrink: 0; }
    .blog-arrow {
      position: absolute;
      top: 1.5rem; right: 1.5rem;
      width: 32px; height: 32px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.1);
      opacity: 0;
      transform: translateY(4px);
      transition: opacity 250ms ease, transform 250ms ease;
    }
    .blog-card:hover .blog-arrow { opacity: 1; transform: translateY(0); }
    /* Real crawlable <a href> covering the whole card (previously
       navigation was JS-only via onclick, invisible to search/AI
       crawlers that don't execute JavaScript). Same stretched-link
       pattern as .service-card-link. */
    .blog-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
    .blog-card-link:focus-visible { outline: 2px solid #00E5FF; outline-offset: 3px; border-radius: 1rem; }
    .blog-card-image {
      display: block;
      width: calc(100% + 3rem);
      height: 160px;
      object-fit: cover;
      margin: -1.75rem -1.5rem 1.25rem;
      border-radius: 1rem 1rem 0 0;
    }

    /* ─────────────────────────────────────────────────────────
       BLOG / CASE STUDY LISTING PAGES  (blog.php, case-study.php)
    ───────────────────────────────────────────────────────── */
    #blog-listing, #case-study-listing { padding: 9.5rem 2rem 6rem; background: #000; min-height: 60vh; }
    .listing-empty {
      max-width: 1280px; margin: 0 auto;
      padding: 4rem 2rem; text-align: center;
      color: rgba(255,255,255,0.4); font-size: 0.9rem;
    }
    /* Case study cards reuse .blog-card's shell exactly; only the
       result-headline row below is new. */
    .cs-result {
      font-size: 0.8rem;
      font-weight: 600;
      color: #fff;
      margin-bottom: 0.6rem;
      line-height: 1.4;
    }

    /* ─────────────────────────────────────────────────────────
       ARTICLE SINGLE PAGES  (blog-single.php, case-study-single.php)
    ───────────────────────────────────────────────────────── */
    .article-hero-image {
      width: 100%;
      height: min(56vh, 460px);
      margin-top: 5.25rem; /* clear the fixed floating navbar */
      overflow: hidden;
      position: relative;
      background: #0a0a0a;
    }
    .article-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .article-hero-image::after {
      content: '';
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.15), rgba(0,0,0,0.55));
      pointer-events: none;
    }

    .article-header { max-width: 800px; margin: 0 auto; padding: 3rem 2rem 1rem; text-align: center; }
    .article-title {
      font-family: 'Barlow', sans-serif;
      font-size: clamp(1.9rem, 4vw, 3rem);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.15;
      color: #fff;
      margin: 1.1rem 0 1rem;
    }
    .article-meta {
      display: flex; align-items: center; justify-content: center; gap: 0.6rem;
      font-size: 0.8rem;
      color: rgba(255,255,255,0.42);
      flex-wrap: wrap;
    }
    .article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,0.32); flex-shrink: 0; }

    .article-body {
      max-width: 720px;
      margin: 0 auto;
      padding: 1.5rem 2rem 4rem;
      font-family: 'Barlow', sans-serif;
      font-size: 0.95rem;
      font-weight: 400;
      line-height: 1.85;
      color: rgba(255,255,255,0.72);
    }
    .article-body p { margin-bottom: 1.35rem; }
    .article-body h2, .article-body h3 {
      font-family: 'Readex Pro', sans-serif;
      font-weight: 600;
      color: #fff;
      letter-spacing: -0.01em;
      margin: 2.25rem 0 1rem;
      line-height: 1.3;
    }
    .article-body h2 { font-size: 1.4rem; }
    .article-body h3 { font-size: 1.15rem; }
    .article-body a { color: #00E5FF; text-decoration: underline; text-underline-offset: 2px; }
    .article-body ul, .article-body ol { margin: 0 0 1.35rem 1.4rem; }
    .article-body li { margin-bottom: 0.55rem; }
    .article-body strong { color: #fff; font-weight: 600; }
    .article-body img { max-width: 100%; border-radius: 1rem; margin: 1.5rem 0; }

    /* Case study summary strip (client / category / result) above the content */
    .article-summary {
      max-width: 720px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 0 2rem 2rem;
    }
    .article-summary-item { text-align: center; padding: 1.1rem 0.75rem; border-radius: 0.9rem; border: 1px solid rgba(255,255,255,0.08); }
    .article-summary-label { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.35); margin-bottom: 0.4rem; }
    .article-summary-value { font-size: 0.85rem; font-weight: 600; color: #fff; }

    /* Gallery (case-study-single.php) */
    .cs-gallery { padding-top: 1rem; }
    .cs-gallery > h2 { max-width: 1000px; margin-left: auto; margin-right: auto; padding: 0 2rem; }
    .cs-gallery-grid {
      max-width: 1000px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      padding: 0 2rem 4rem;
    }
    .cs-gallery-item {
      display: block; width: 100%; padding: 0; margin: 0;
      background: none; border: none; cursor: zoom-in;
    }
    .cs-gallery-item:focus-visible img { outline: 2px solid #00E5FF; outline-offset: 2px; }
    .cs-gallery-grid img {
      width: 100%; aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: 0.9rem;
      cursor: zoom-in;
      border: 1px solid rgba(255,255,255,0.08);
      transition: transform 250ms ease, border-color 250ms ease;
    }
    .cs-gallery-grid img:hover { transform: scale(1.02); border-color: rgba(255,255,255,0.25); }

    .lightbox {
      position: fixed; inset: 0;
      z-index: 300;
      background: rgba(0,0,0,0.92);
      display: none;
      align-items: center; justify-content: center;
      padding: 3rem;
      cursor: zoom-out;
    }
    .lightbox.open { display: flex; }
    .lightbox img { max-width: 100%; max-height: 100%; border-radius: 0.75rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
    /* Portfolio pages route the lightbox through #lightboxBody so the
       same modal can hold a video embed instead of just an image. */
    .lightbox-body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; width: 100%; height: 100%; }
    .lightbox-body img { max-width: 100%; max-height: 85%; border-radius: 0.75rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6); }
    .lightbox-body iframe, .lightbox-body video {
      width: min(1100px, 92vw); aspect-ratio: 16/9; border: none;
      border-radius: 0.75rem; box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    }
    .lightbox-source-link {
      font-size: 0.8rem; font-weight: 600; color: #00E5FF;
      text-decoration: none; letter-spacing: 0.02em;
      padding: 0.5rem 1.1rem; border-radius: 9999px;
      border: 1px solid rgba(0,229,255,0.35); background: rgba(0,229,255,0.08);
      transition: background 200ms ease, border-color 200ms ease;
    }
    .lightbox-source-link:hover { background: rgba(0,229,255,0.16); border-color: rgba(0,229,255,0.6); }
    .lightbox-close {
      position: absolute; top: 1.5rem; right: 1.5rem;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
      display: flex; align-items: center; justify-content: center;
      color: #fff; cursor: pointer;
    }
    .lightbox-close svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; }

    /* FAQ section wrapper on blog-single.php (form lives beside it,
       reusing .pf-layout / .faq-card exactly as elsewhere on the site) */
    .article-faq-intro { max-width: 720px; margin: 0 auto; padding: 0 2rem; text-align: center; }

    /* ─────────────────────────────────────────────────────────
       FOOTER (078)
    ───────────────────────────────────────────────────────── */
    #footer {
      background: #000;
      border-top: 1px solid rgba(255,255,255,0.07);
      padding: 5rem 2rem 2.5rem;
    }
    .footer-inner { max-width: 1280px; margin: 0 auto; }
    .footer-top {
      display: grid;
      grid-template-columns: 1.5fr repeat(3, 1fr);
      gap: 3rem;
      padding-bottom: 4rem;
      border-bottom: 1px solid rgba(255,255,255,0.07);
    }
    .footer-logo {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-family: 'Readex Pro', sans-serif;
      font-size: 1rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      color: #fff;
      margin-bottom: 1rem;
    }
    .footer-logo-icon { width: 22px; height: 22px; flex-shrink: 0; }
    .footer-tagline {
      font-size: 0.8rem;
      font-weight: 300;
      line-height: 1.6;
      color: rgba(255,255,255,0.32);
      max-width: 220px;
    }
    .footer-socials { display: flex; gap: 0.75rem; margin-top: 1.75rem; }
    .social-btn {
      width: 40px; height: 40px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background 200ms ease;
    }
    .social-btn:hover { background: rgba(255,255,255,0.14); }
    .social-btn svg { width: 13px; height: 13px; fill: rgba(255,255,255,0.48); }
    .footer-col-title {
      font-size: 0.65rem;
      font-weight: 600;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.32);
      margin-bottom: 1.5rem;
    }
    .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.85rem; }
    .footer-links a {
      font-size: 0.85rem;
      font-weight: 400;
      color: rgba(255,255,255,0.52);
      text-decoration: none;
      transition: color 200ms ease;
    }
    .footer-links a:hover { color: #fff; }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 2rem;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.22); }
    .footer-legal { display: flex; gap: 2rem; }
    .footer-legal a { font-size: 0.75rem; color: rgba(255,255,255,0.22); text-decoration: none; transition: color 200ms ease; }
    .footer-legal a:hover { color: rgba(255,255,255,0.55); }

    /* ─────────────────────────────────────────────────────────
       SCROLL REVEAL
    ───────────────────────────────────────────────────────── */
    .sr { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
    .sr.visible  { opacity: 1; transform: translateY(0); }
    .sr-d1 { transition-delay: 0.1s; }
    .sr-d2 { transition-delay: 0.2s; }
    .sr-d3 { transition-delay: 0.3s; }

    /* ─────────────────────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────────────────────── */
    @media (max-width: 1024px) {
      .about-inner { grid-template-columns: 1fr; gap: 3.5rem; }
      #showcase-video-wrap { width: 100%; margin-left: 0; }
      .showcase-text { margin-bottom: 2rem; }
      .services-grid { grid-template-columns: repeat(2, 1fr); }
      .testi-grid { grid-template-columns: 1fr; }
      .testi-card.big, .testi-card.small { flex: initial; min-height: 0; }
      .pf-layout { grid-template-columns: 1fr; }
      .blog-grid { grid-template-columns: repeat(2, 1fr); }
      .mv-grid { grid-template-columns: 1fr; }
      .svc-hero-inner { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; }
      .svc-hero-desc { margin-left: auto; margin-right: auto; }
      .svc-hero-3d { order: -1; }
      .svc-grid { grid-template-columns: repeat(2, 1fr); }
      .why-grid { grid-template-columns: repeat(2, 1fr); }
      .solution-grid { grid-template-columns: 1fr; gap: 2.5rem; }
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
      .case-study-grid { grid-template-columns: 1fr; }
      .pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
      .pricing-card.highlighted { box-shadow: none; }
      .cs-gallery-grid { grid-template-columns: repeat(2, 1fr); }
      .article-summary { grid-template-columns: 1fr; }
      .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
      .clogo-grid { grid-template-columns: repeat(3, 1fr); }
    }
    @media (max-width: 768px) {
      .nav-links { display: none; }
      .hamburger { display: flex; }
      .work-grid { grid-template-columns: 1fr; }
      .footer-top { grid-template-columns: 1fr 1fr; }
      .section-header { flex-direction: column; align-items: flex-start; }
      .pf-card { padding: 1.75rem 1.25rem; }
      .pf-grid-2 { grid-template-columns: 1fr; }
      .pf-phone-row { flex-direction: column; }
      .pf-phone-row .pf-select { flex: none; width: 100%; }
      .faq-card { padding: 1.75rem 1.25rem; }
      .clients-row { gap: 1.25rem 2rem; }
      .clogo-row { gap: 1.5rem 2rem; }
      .clogo-item { height: 28px; }
      .clients3d-wrap { height: 260px; }
      .clients3d-card { width: 130px; height: 76px; margin: -38px 0 0 -65px; padding: 1rem; }
      /* Readability floor for body-copy paragraphs on phones — these
         sit at 0.8rem (12.8px) on desktop by design, which reads fine
         at arm's length on a monitor but is tight on a handheld
         screen, so bump the ones users actually read at length. */
      .pricing-desc, .svc-desc, .why-text, .clients-desc,
      .service-desc, .blog-excerpt {
        font-size: 0.85rem;
      }
    }
    @media (max-width: 560px) {
      .services-grid { grid-template-columns: 1fr; }
      .blog-grid { grid-template-columns: 1fr; }
      .svc-grid { grid-template-columns: 1fr; }
      .why-grid { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: 1fr; gap: 2rem; }
      .cs-gallery-grid { grid-template-columns: 1fr; }
      .clogo-grid { grid-template-columns: repeat(2, 1fr); }
      /* Logo + hamburger only — the CTA collides with the wordmark at this width */
      .navbar-pill .btn-cta { display: none; }
    }
    @media (max-width: 480px) {
      .footer-top { grid-template-columns: 1fr; }
      .cta-buttons { flex-direction: column; align-items: center; }
      .stats-wrap { flex-direction: column; gap: 1.5rem; align-items: flex-start; }
      .stat-divider { display: none; }
      .testi-avatar { width: 46px; height: 46px; }
      /* Lower the clamp() floor so longer single words (service page
         hero words like "marketing", "software") fit without forcing
         a mid-word break at very narrow widths. Same vw scaling, so
         it only affects the smallest phones. */
      .hw-build    { font-size: clamp(2.6rem, 13vw, 13rem); }
      .hw-stunning { font-size: clamp(2rem, 9vw, 9rem); }
      .hw-content  { font-size: clamp(2.4rem, 12vw, 12rem); }
    }

    /* ─────────────────────────────────────────────────────────
       REDUCED MOTION
    ───────────────────────────────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
      }
      .sr, .headline-word, .hero-desc, .stat-block, .tt-reveal { opacity: 1; transform: none; filter: none; }
      .reveal-text .word { color: #fff; }
    }