:root {
      --navy: #07182d;
      --navy-2: #0b2440;
      --navy-3: #102e4f;
      --blue: #0b73d8;
      --cyan: #00bde8;
      --yellow: #ffbd32;
      --orange: #ff8f2b;
      --white: #ffffff;
      --paper: #f6f9fc;
      --paper-2: #edf4fa;
      --ink: #182538;
      --muted: #637287;
      --line: #dce6ef;
      --success: #1bbf83;
      --shadow: 0 24px 70px rgba(7, 24, 45, .13);
      --shadow-soft: 0 12px 34px rgba(7, 24, 45, .10);
      --radius-xl: 32px;
      --radius-lg: 24px;
      --radius-md: 18px;
      --radius-sm: 12px;
      --container: min(1180px, calc(100vw - 40px));
      --ease: cubic-bezier(.2,.8,.2,1);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      color: var(--ink);
      background: var(--white);
      font-family: "DM Sans", Arial, sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
    }
    body.menu-open { overflow: hidden; }
    a { color: inherit; text-decoration: none; }
    button, input, textarea, select { font: inherit; }
    button { cursor: pointer; }
    img, svg { display: block; max-width: 100%; }
    .container { width: var(--container); margin-inline: auto; }
    .section { position: relative; padding: 110px 0; }
    .section-soft { background: var(--paper); }
    .section-dark { color: var(--white); background: var(--navy); }
    .overline {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
      color: var(--blue);
      font: 800 12px/1 "Manrope", sans-serif;
      letter-spacing: .14em;
      text-transform: uppercase;
    }
    .overline::before {
      content: "";
      width: 30px;
      height: 2px;
      border-radius: 10px;
      background: linear-gradient(90deg, var(--yellow), var(--cyan));
    }
    .section-title {
      max-width: 760px;
      margin: 0;
      color: var(--navy);
      font: 800 clamp(36px, 5vw, 62px)/1.08 "Manrope", sans-serif;
      letter-spacing: -.045em;
    }
    .section-title span { color: var(--blue); }
    .section-lead {
      max-width: 680px;
      margin: 22px 0 0;
      color: var(--muted);
      font-size: 17px;
    }
    .center-heading { text-align: center; }
    .center-heading .section-title,
    .center-heading .section-lead { margin-inline: auto; }

    /* Loader */
    .loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: grid;
      place-items: center;
      background: var(--navy);
      transition: opacity .65s ease, visibility .65s ease;
    }
    .loader.hide { opacity: 0; visibility: hidden; }
    .loader-box { text-align: center; }
    .loader-logo {
      color: var(--white);
      font: 800 58px/1 "Manrope", sans-serif;
      letter-spacing: -.08em;
    }
    .loader-logo span { color: var(--yellow); }
    .loader-line {
      width: 190px;
      height: 3px;
      margin: 22px auto 0;
      overflow: hidden;
      border-radius: 10px;
      background: rgba(255,255,255,.1);
    }
    .loader-line i {
      display: block;
      width: 48%;
      height: 100%;
      background: linear-gradient(90deg, var(--yellow), var(--cyan));
      animation: loading 1.1s infinite var(--ease);
    }
    @keyframes loading { from { transform: translateX(-120%); } to { transform: translateX(260%); } }

    /* Cursor */
    .cursor-dot, .cursor-ring {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9900;
      pointer-events: none;
      opacity: 0;
      transform: translate(-50%, -50%);
    }
    .cursor-dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--yellow);
    }
    .cursor-ring {
      width: 42px;
      height: 42px;
      border: 1px solid rgba(11,115,216,.45);
      border-radius: 50%;
      transition: width .2s, height .2s, background .2s, border-color .2s;
    }
    .cursor-ring.hover {
      width: 62px;
      height: 62px;
      border-color: rgba(255,189,50,.55);
      background: rgba(255,189,50,.1);
    }

    /* Header */
    .topbar {
      position: relative;
      z-index: 1100;
      color: rgba(255,255,255,.82);
      background: #04111f;
      font-size: 12px;
    }
    .topbar-inner {
      min-height: 42px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
    }
    .topbar-contact, .topbar-social {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .topbar a { transition: color .2s; }
    .topbar a:hover { color: var(--yellow); }
    .top-item { display: inline-flex; align-items: center; gap: 8px; }
    .top-icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .topbar-social a { font-weight: 700; letter-spacing: .06em; }

    .header {
      position: sticky;
      top: 0;
      z-index: 1050;
      color: var(--navy);
      background: rgba(255,255,255,.95);
      border-bottom: 1px solid rgba(7,24,45,.08);
      backdrop-filter: blur(18px);
      transition: box-shadow .25s, transform .25s;
    }
    .header.scrolled { box-shadow: 0 14px 38px rgba(7,24,45,.1); }
    .nav {
      min-height: 82px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 26px;
    }
    .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
    .brand-symbol {
      position: relative;
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border-radius: 16px 5px 16px 5px;
      color: var(--white);
      background: linear-gradient(145deg, var(--blue), var(--cyan));
      box-shadow: 0 12px 26px rgba(11,115,216,.22);
    }
    .brand-symbol::before {
      content: "";
      position: absolute;
      width: 28px;
      height: 28px;
      border: 4px solid rgba(255,255,255,.25);
      border-radius: 50%;
    }
    .brand-symbol strong { position: relative; font: 800 18px/1 "Manrope"; }
    .brand-name { display: flex; flex-direction: column; line-height: 1; }
    .brand-name strong { color: var(--navy); font: 800 22px/1 "Manrope"; letter-spacing: -.055em; }
    .brand-name small { margin-top: 8px; color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }

    .nav-links { display: flex; align-items: center; gap: 30px; }
    .nav-item { position: relative; }
    .nav-link {
      min-height: 82px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: #304158;
      font-size: 13px;
      font-weight: 700;
      transition: color .2s;
    }
    .nav-link::after {
      content: "";
      position: absolute;
      left: 0;
      right: 100%;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--yellow), var(--cyan));
      transition: right .3s var(--ease);
    }
    .nav-item:hover > .nav-link,
    .nav-link.active { color: var(--blue); }
    .nav-item:hover > .nav-link::after,
    .nav-link.active::after { right: 0; }
    .chevron { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .25s; }
    .nav-item:hover .chevron { transform: rotate(180deg); }

    .mega-menu {
      position: fixed;
      left: 50%;
      top: 124px;
      width: min(1120px, calc(100vw - 42px));
      padding: 28px;
      opacity: 0;
      visibility: hidden;
      transform: translate(-50%, 14px);
      border: 1px solid rgba(7,24,45,.08);
      border-radius: 0 0 24px 24px;
      background: rgba(255,255,255,.98);
      box-shadow: var(--shadow);
      transition: .3s var(--ease);
    }
    .nav-item.has-mega:hover .mega-menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
    .mega-grid { display: grid; grid-template-columns: 1.1fr repeat(4, 1fr); gap: 22px; }
    .mega-intro {
      min-height: 250px;
      padding: 27px;
      border-radius: 20px;
      color: var(--white);
      background:
        radial-gradient(circle at 85% 16%, rgba(0,189,232,.34), transparent 26%),
        linear-gradient(145deg, var(--navy), var(--navy-3));
      overflow: hidden;
      position: relative;
    }
    .mega-intro::after {
      content: "";
      position: absolute;
      right: -36px;
      bottom: -50px;
      width: 190px;
      height: 190px;
      border: 1px solid rgba(255,255,255,.15);
      border-radius: 50%;
      box-shadow: inset 0 0 0 22px rgba(255,255,255,.025), inset 0 0 0 44px rgba(255,255,255,.02);
    }
    .mega-intro span { color: var(--yellow); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .mega-intro h3 { max-width: 260px; margin: 15px 0 12px; font: 800 28px/1.12 "Manrope"; letter-spacing: -.04em; }
    .mega-intro p { max-width: 270px; margin: 0; color: rgba(255,255,255,.68); font-size: 13px; }
    .mega-col strong { display: block; margin-bottom: 14px; color: var(--navy); font: 800 13px "Manrope"; }
    .mega-col a { display: block; padding: 8px 0; color: var(--muted); font-size: 12px; font-weight: 600; transition: color .2s, transform .2s; }
    .mega-col a:hover { color: var(--blue); transform: translateX(5px); }

    .nav-actions { display: flex; align-items: center; gap: 10px; }
    .nav-cta, .btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      overflow: hidden;
      border: 0;
      border-radius: 10px;
      font-weight: 800;
      transition: transform .25s, box-shadow .25s, background .25s, color .25s;
    }
    .nav-cta {
      min-height: 46px;
      padding: 0 19px;
      color: var(--white);
      background: var(--navy);
      font-size: 12px;
    }
    .nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(7,24,45,.18); }
    .nav-cta::before, .btn.primary::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: -40%;
      width: 32%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);
      transform: skewX(-18deg);
      transition: left .55s ease;
    }
    .nav-cta:hover::before, .btn.primary:hover::before { left: 120%; }
    .menu-btn {
      display: none;
      width: 46px;
      height: 46px;
      border: 1px solid var(--line);
      border-radius: 10px;
      background: var(--white);
      position: relative;
    }
    .menu-btn i, .menu-btn::before, .menu-btn::after {
      content: "";
      position: absolute;
      left: 12px;
      width: 20px;
      height: 2px;
      border-radius: 3px;
      background: var(--navy);
      transition: .25s;
    }
    .menu-btn::before { top: 15px; }
    .menu-btn i { top: 22px; }
    .menu-btn::after { top: 29px; }
    .menu-btn.open i { opacity: 0; }
    .menu-btn.open::before { top: 22px; transform: rotate(45deg); }
    .menu-btn.open::after { top: 22px; transform: rotate(-45deg); }

    .mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 1040;
      padding: 150px 22px 36px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-15px);
      color: var(--white);
      background: rgba(7,24,45,.98);
      transition: .3s var(--ease);
      overflow-y: auto;
    }
    .mobile-menu.open { opacity: 1; visibility: visible; transform: none; }
    .mobile-menu a { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.09); font: 700 18px "Manrope"; }
    .mobile-services { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 12px 0 22px; }
    .mobile-services a { padding: 8px 0; border: 0; color: rgba(255,255,255,.65); font: 600 12px "DM Sans"; }

    /* Hero */
    .hero {
      position: relative;
      min-height: 720px;
      display: flex;
      align-items: center;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at 86% 28%, rgba(0,189,232,.24), transparent 26%),
        radial-gradient(circle at 15% 90%, rgba(255,189,50,.12), transparent 24%),
        linear-gradient(132deg, #04111f 0%, #07182d 45%, #0a2747 100%);
    }
    .hero-grid-pattern {
      position: absolute;
      inset: 0;
      opacity: .28;
      background-image:
        linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
      background-size: 62px 62px;
      mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
    }
    .hero-noise {
      position: absolute;
      inset: 0;
      opacity: .03;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
    }
    .hero-blob {
      position: absolute;
      border-radius: 50%;
      filter: blur(5px);
      opacity: .48;
      animation: blobFloat 7s ease-in-out infinite alternate;
    }
    .hero-blob.one { width: 360px; height: 360px; right: -150px; top: -110px; background: rgba(0,189,232,.16); }
    .hero-blob.two { width: 250px; height: 250px; left: -120px; bottom: -80px; background: rgba(255,189,50,.11); animation-delay: -2s; }
    @keyframes blobFloat { to { transform: translate(35px, 28px) scale(1.08); } }

    .hero-inner {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 70px;
      align-items: center;
      padding: 90px 0;
    }
    .hero-tag {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 8px 13px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 99px;
      color: rgba(255,255,255,.75);
      background: rgba(255,255,255,.05);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
    }
    .hero-tag i {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 0 rgba(27,191,131,.55);
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 70% { box-shadow: 0 0 0 11px rgba(27,191,131,0); } }
    .hero h1 {
      max-width: 760px;
      margin: 24px 0 22px;
      color: var(--white);
      font: 800 clamp(50px, 6.3vw, 86px)/.98 "Manrope", sans-serif;
      letter-spacing: -.065em;
    }
    .hero h1 .switch-word {
      display: inline-block;
      min-width: 5.1em;
      color: transparent;
      background: linear-gradient(90deg, var(--yellow), #ffdf7e 42%, var(--cyan));
      -webkit-background-clip: text;
      background-clip: text;
      transition: opacity .25s, transform .25s;
    }
    .hero-copy > p { max-width: 650px; margin: 0; color: rgba(255,255,255,.68); font-size: 17px; }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
    .btn { min-height: 55px; padding: 0 24px; font-size: 13px; }
    .btn.primary { color: #122032; background: linear-gradient(105deg, var(--yellow), #ffd76e); box-shadow: 0 15px 40px rgba(255,189,50,.18); }
    .btn.primary:hover { transform: translateY(-3px); box-shadow: 0 20px 50px rgba(255,189,50,.28); }
    .btn.secondary { color: var(--white); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
    .btn.secondary:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.09); }
    .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
    .hero-mini-proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
    .mini-avatars { display: flex; }
    .mini-avatars span {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      margin-left: -8px;
      border: 2px solid var(--navy);
      border-radius: 50%;
      color: var(--white);
      background: linear-gradient(145deg, var(--blue), var(--cyan));
      font-size: 10px;
      font-weight: 800;
    }
    .mini-avatars span:first-child { margin-left: 0; background: linear-gradient(145deg, #9158d7, #6340b0); }
    .mini-avatars span:nth-child(2) { background: linear-gradient(145deg, #e36c6c, #a94056); }
    .mini-avatars span:nth-child(3) { background: linear-gradient(145deg, #34b98b, #14745c); }
    .mini-avatars span:last-child { color: var(--navy); background: var(--white); }
    .hero-mini-proof p { margin: 0; color: rgba(255,255,255,.56); font-size: 11px; }
    .hero-mini-proof strong { display: block; color: var(--white); font-size: 12px; }

    .hero-stage { position: relative; min-height: 540px; }
    .stage-main {
      position: absolute;
      inset: 34px 24px 44px 24px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 32px;
      background: linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
      box-shadow: 0 36px 90px rgba(0,0,0,.3);
      backdrop-filter: blur(20px);
      animation: stageFloat 6s ease-in-out infinite alternate;
    }
    @keyframes stageFloat { to { transform: translateY(-12px); } }
    .stage-main::before {
      content: "";
      position: absolute;
      inset: -50%;
      background: conic-gradient(from 40deg, transparent 20%, rgba(0,189,232,.15), transparent 45%);
      animation: rotate 14s linear infinite;
    }
    @keyframes rotate { to { transform: rotate(360deg); } }
    .stage-top {
      position: relative;
      z-index: 2;
      min-height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      border-bottom: 1px solid rgba(255,255,255,.1);
    }
    .stage-dots { display: flex; gap: 6px; }
    .stage-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.26); }
    .stage-top span { color: rgba(255,255,255,.52); font-size: 9px; letter-spacing: .14em; }
    .orbit-system {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 52%;
      width: 310px;
      height: 310px;
      transform: translate(-50%, -50%);
    }
    .orbit {
      position: absolute;
      inset: 0;
      border: 1px dashed rgba(255,255,255,.18);
      border-radius: 50%;
      animation: rotate 18s linear infinite;
    }
    .orbit.two { inset: 48px; border-style: solid; border-color: rgba(0,189,232,.28); animation-duration: 11s; animation-direction: reverse; }
    .orbit.three { inset: 94px; border-style: solid; border-color: rgba(255,189,50,.25); animation-duration: 8s; }
    .orbit-core {
      position: absolute;
      inset: 112px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,189,232,.28), rgba(7,24,45,.9) 70%);
      box-shadow: 0 0 50px rgba(0,189,232,.16);
    }
    .orbit-core strong { font: 800 34px/1 "Manrope"; letter-spacing: -.07em; }
    .orbit-core small { margin-top: 7px; color: rgba(255,255,255,.52); font-size: 7px; letter-spacing: .15em; }
    .orbit-label {
      position: absolute;
      z-index: 3;
      min-width: 88px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 10px;
      color: var(--white);
      background: rgba(5,17,31,.78);
      box-shadow: 0 14px 30px rgba(0,0,0,.2);
      backdrop-filter: blur(10px);
      font-size: 8px;
      font-weight: 800;
      letter-spacing: .1em;
      text-align: center;
      text-transform: uppercase;
    }
    .orbit-label.l1 { top: 26px; left: 108px; }
    .orbit-label.l2 { right: -15px; top: 128px; }
    .orbit-label.l3 { bottom: 16px; left: 110px; }
    .orbit-label.l4 { left: -18px; top: 128px; }
    .data-card {
      position: absolute;
      z-index: 4;
      padding: 15px;
      border: 1px solid rgba(255,255,255,.14);
      border-radius: 15px;
      color: var(--white);
      background: rgba(5,17,31,.82);
      box-shadow: 0 18px 45px rgba(0,0,0,.25);
      backdrop-filter: blur(14px);
    }
    .data-card strong { display: block; font: 800 22px "Manrope"; }
    .data-card span { color: rgba(255,255,255,.54); font-size: 9px; }
    .data-card.a { right: 0; top: 80px; width: 150px; }
    .data-card.b { left: 0; bottom: 52px; width: 185px; }
    .mini-chart { height: 34px; display: flex; align-items: end; gap: 5px; margin-top: 11px; }
    .mini-chart i { flex: 1; border-radius: 4px 4px 1px 1px; background: linear-gradient(to top, var(--blue), var(--cyan)); animation: bars 2.6s ease-in-out infinite alternate; }
    .mini-chart i:nth-child(1) { height: 32%; }
    .mini-chart i:nth-child(2) { height: 62%; animation-delay: -.5s; }
    .mini-chart i:nth-child(3) { height: 46%; animation-delay: -1s; }
    .mini-chart i:nth-child(4) { height: 88%; animation-delay: -1.5s; }
    .mini-chart i:nth-child(5) { height: 70%; animation-delay: -2s; }
    @keyframes bars { to { filter: brightness(1.35); transform: scaleY(.78); transform-origin: bottom; } }
    .hero-scroll {
      position: absolute;
      z-index: 3;
      left: 50%;
      bottom: 24px;
      display: flex;
      align-items: center;
      gap: 10px;
      transform: translateX(-50%);
      color: rgba(255,255,255,.44);
      font-size: 9px;
      letter-spacing: .16em;
      text-transform: uppercase;
    }
    .hero-scroll i { width: 1px; height: 34px; background: linear-gradient(var(--yellow), transparent); animation: scrollLine 1.8s infinite; }
    @keyframes scrollLine { 0%,100% { transform: scaleY(.3); transform-origin: top; } 50% { transform: scaleY(1); } }

    /* Trust strip */
    .trust-strip {
      position: relative;
      z-index: 4;
      margin-top: -28px;
    }
    .trust-panel {
      display: grid;
      grid-template-columns: 1.15fr repeat(4, .7fr);
      align-items: stretch;
      overflow: hidden;
      border: 1px solid rgba(7,24,45,.08);
      border-radius: 22px;
      background: var(--white);
      box-shadow: var(--shadow);
    }
    .trust-intro, .trust-stat { padding: 28px 30px; }
    .trust-intro { display: flex; align-items: center; gap: 15px; background: var(--navy); color: var(--white); }
    .trust-badge { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--navy); background: var(--yellow); font: 800 15px "Manrope"; }
    .trust-intro strong { display: block; font: 800 14px "Manrope"; }
    .trust-intro span { display: block; margin-top: 4px; color: rgba(255,255,255,.55); font-size: 10px; }
    .trust-stat { border-left: 1px solid var(--line); }
    .trust-stat strong { display: block; color: var(--navy); font: 800 30px/1 "Manrope"; letter-spacing: -.04em; }
    .trust-stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }

    /* About */
    .about-grid { display: grid; grid-template-columns: .94fr 1.06fr; gap: 80px; align-items: center; }
    .about-visual { position: relative; min-height: 590px; }
    .about-card-main {
      position: absolute;
      inset: 0 48px 58px 0;
      overflow: hidden;
      border-radius: 28px;
      background: linear-gradient(145deg, #e8f5fc, #fdfefe);
      box-shadow: var(--shadow);
    }
    .about-card-main::before {
      content: "";
      position: absolute;
      width: 380px;
      height: 380px;
      right: -100px;
      top: -100px;
      border: 50px solid rgba(0,189,232,.08);
      border-radius: 50%;
    }
    .about-card-main::after {
      content: "";
      position: absolute;
      width: 300px;
      height: 300px;
      left: -120px;
      bottom: -130px;
      border-radius: 50%;
      background: rgba(255,189,50,.14);
    }
    .device-scene { position: absolute; inset: 65px 40px 35px; }
    .device-desktop {
      position: absolute;
      left: 50%;
      top: 42%;
      width: 78%;
      height: 55%;
      transform: translate(-50%, -50%);
      border: 8px solid var(--navy-2);
      border-radius: 18px;
      background: var(--white);
      box-shadow: 0 20px 45px rgba(7,24,45,.16);
    }
    .device-desktop::before { content: ""; position: absolute; left: 9%; right: 9%; top: 15%; height: 26%; border-radius: 8px; background: linear-gradient(110deg, var(--blue), var(--cyan)); }
    .device-desktop::after { content: ""; position: absolute; left: 9%; right: 33%; bottom: 16%; height: 28%; border-radius: 8px; background: repeating-linear-gradient(to bottom, #dbe6ef 0 6px, transparent 6px 15px); }
    .desktop-base { position: absolute; left: 50%; top: 70%; width: 38%; height: 12px; transform: translateX(-50%); border-radius: 0 0 15px 15px; background: var(--navy-2); }
    .device-phone {
      position: absolute;
      right: 2%;
      bottom: 10%;
      width: 27%;
      height: 48%;
      border: 7px solid var(--navy-2);
      border-radius: 24px;
      background: var(--white);
      box-shadow: 0 20px 45px rgba(7,24,45,.17);
      animation: phoneFloat 4s ease-in-out infinite alternate;
    }
    @keyframes phoneFloat { to { transform: translateY(-12px); } }
    .device-phone::before { content: ""; position: absolute; left: 12%; right: 12%; top: 12%; height: 28%; border-radius: 10px; background: linear-gradient(145deg, var(--yellow), var(--orange)); }
    .device-phone::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 13%; height: 35%; border-radius: 8px; background: repeating-linear-gradient(to bottom, #dae5ed 0 5px, transparent 5px 12px); }
    .floating-chip {
      position: absolute;
      min-width: 125px;
      padding: 13px 16px;
      border-radius: 13px;
      color: var(--white);
      background: var(--navy);
      box-shadow: var(--shadow-soft);
      font-size: 10px;
      font-weight: 700;
    }
    .floating-chip strong { display: block; color: var(--yellow); font: 800 19px "Manrope"; }
    .floating-chip.one { left: 2%; top: 9%; animation: chipFloat 4.7s ease-in-out infinite alternate; }
    .floating-chip.two { right: 3%; top: 14%; color: var(--navy); background: var(--white); animation: chipFloat 5s ease-in-out infinite alternate-reverse; }
    .floating-chip.two strong { color: var(--blue); }
    @keyframes chipFloat { to { transform: translateY(10px); } }
    .experience-card {
      position: absolute;
      right: 0;
      bottom: 0;
      width: 220px;
      padding: 24px;
      border-radius: 20px;
      color: var(--white);
      background: linear-gradient(145deg, var(--blue), var(--cyan));
      box-shadow: var(--shadow);
    }
    .experience-card strong { display: block; font: 800 50px/1 "Manrope"; letter-spacing: -.07em; }
    .experience-card span { display: block; margin-top: 8px; font-size: 12px; font-weight: 700; }

    .about-copy h2 { margin-bottom: 25px; }
    .about-copy p { margin: 0 0 17px; color: var(--muted); }
    .about-points { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 34px; }
    .about-point { display: flex; align-items: center; gap: 12px; color: var(--navy); font-size: 13px; font-weight: 700; }
    .about-point i { width: 26px; height: 26px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--white); background: var(--blue); font-style: normal; font-size: 11px; }
    .btn.dark { color: var(--white); background: var(--navy); }
    .btn.dark:hover { transform: translateY(-3px); background: var(--blue); box-shadow: 0 16px 34px rgba(11,115,216,.22); }

    /* Mission Vision Culture */
    .mvc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 50px; }
    .mvc-card {
      position: relative;
      min-height: 420px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 24px;
      background: var(--white);
      box-shadow: 0 14px 45px rgba(7,24,45,.07);
      transition: transform .35s var(--ease), box-shadow .35s;
    }
    .mvc-card:hover { transform: translateY(-10px); box-shadow: var(--shadow); }
    .mvc-art { position: relative; height: 205px; overflow: hidden; background: linear-gradient(145deg, #eaf6fc, #f8fbfe); }
    .mvc-art::before { content: ""; position: absolute; width: 175px; height: 175px; right: -55px; top: -58px; border-radius: 50%; background: rgba(0,189,232,.13); }
    .mvc-art::after { content: ""; position: absolute; width: 120px; height: 120px; left: -35px; bottom: -50px; border-radius: 50%; background: rgba(255,189,50,.16); }
    .art-browser { position: absolute; left: 50%; top: 50%; width: 185px; height: 125px; transform: translate(-50%, -50%); border: 7px solid #405064; border-radius: 12px; background: #fff; }
    .art-browser::before { content: ""; position: absolute; left: 10px; right: 10px; top: 15px; height: 34px; border-radius: 5px; background: var(--yellow); }
    .art-browser::after { content: ""; position: absolute; left: 10px; right: 48px; bottom: 13px; height: 36px; background: repeating-linear-gradient(to bottom,#ced9e3 0 5px,transparent 5px 11px); }
    .art-gauge { position: absolute; right: 42px; bottom: 27px; width: 75px; height: 75px; border: 9px solid #405064; border-top-color: var(--cyan); border-radius: 50%; background: #fff; }
    .art-gauge::after { content: ""; position: absolute; left: 50%; top: 50%; width: 25px; height: 3px; transform-origin: left; transform: rotate(-35deg); background: var(--orange); }
    .art-eye { position: absolute; left: 50%; top: 50%; width: 155px; height: 90px; transform: translate(-50%, -50%); border: 8px solid #405064; border-radius: 100% 0 100% 0; background: #fff; transform: translate(-50%, -50%) rotate(45deg); }
    .art-eye::before { content: ""; position: absolute; left: 50%; top: 50%; width: 50px; height: 50px; transform: translate(-50%, -50%); border: 10px solid var(--cyan); border-radius: 50%; background: var(--navy); }
    .art-people { position: absolute; left: 50%; top: 52%; width: 210px; height: 120px; transform: translate(-50%, -50%); }
    .person { position: absolute; bottom: 0; width: 54px; height: 77px; border-radius: 26px 26px 9px 9px; background: #405064; }
    .person::before { content: ""; position: absolute; left: 50%; top: -31px; width: 43px; height: 43px; transform: translateX(-50%); border-radius: 50%; background: var(--yellow); border: 6px solid #405064; }
    .person.p1 { left: 13px; transform: scale(.8); opacity: .82; }
    .person.p2 { left: 78px; height: 92px; background: var(--blue); }
    .person.p3 { right: 13px; transform: scale(.8); opacity: .82; }
    .mvc-content { padding: 28px; }
    .mvc-index { color: var(--cyan); font: 800 12px "Manrope"; letter-spacing: .1em; }
    .mvc-content h3 { margin: 10px 0 12px; color: var(--navy); font: 800 25px/1.15 "Manrope"; letter-spacing: -.035em; }
    .mvc-content p { margin: 0; color: var(--muted); font-size: 13px; }

    /* Services */
    .services-wrap { position: relative; overflow: hidden; }
    .services-wrap::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .13;
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.7) 1px, transparent 0);
      background-size: 34px 34px;
    }
    .services-head { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: end; gap: 34px; margin-bottom: 48px; }
    .services-head .section-title { color: var(--white); }
    .services-head .section-lead { color: rgba(255,255,255,.62); }
    .services-head .overline { color: var(--yellow); }
    .services-head .btn.secondary { flex: 0 0 auto; }
    .services-layout { position: relative; z-index: 2; display: grid; grid-template-columns: .68fr 1.32fr; gap: 22px; }
    .service-tabs { display: flex; flex-direction: column; gap: 10px; }
    .service-tab {
      width: 100%;
      min-height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 14px;
      color: rgba(255,255,255,.64);
      background: rgba(255,255,255,.045);
      font-weight: 700;
      text-align: left;
      transition: .25s;
    }
    .service-tab span { display: flex; align-items: center; gap: 13px; }
    .service-tab b { color: rgba(255,255,255,.3); font-size: 10px; }
    .service-tab i { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.07); font-style: normal; }
    .service-tab.active, .service-tab:hover { color: var(--navy); border-color: var(--yellow); background: var(--yellow); transform: translateX(8px); }
    .service-tab.active b, .service-tab:hover b { color: rgba(7,24,45,.45); }
    .service-stage {
      position: relative;
      min-height: 540px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.11);
      border-radius: 24px;
      background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
      box-shadow: 0 30px 70px rgba(0,0,0,.2);
    }
    .service-panel {
      position: absolute;
      inset: 0;
      display: grid;
      grid-template-columns: 1fr .95fr;
      gap: 30px;
      align-items: center;
      padding: 52px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(15px);
      transition: .4s var(--ease);
    }
    .service-panel.active { opacity: 1; visibility: visible; transform: none; }
    .service-copy small { color: var(--yellow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .service-copy h3 { margin: 14px 0 16px; font: 800 clamp(31px, 4vw, 48px)/1.05 "Manrope"; letter-spacing: -.05em; }
    .service-copy p { margin: 0; color: rgba(255,255,255,.62); font-size: 14px; }
    .service-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 26px 0 32px; }
    .service-list span { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,.77); font-size: 12px; }
    .service-list span::before { content: "✓"; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: var(--yellow); font-size: 10px; font-weight: 900; }
    .service-art {
      position: relative;
      min-height: 380px;
      overflow: hidden;
      border-radius: 22px;
      background:
        radial-gradient(circle at 80% 20%, rgba(0,189,232,.35), transparent 28%),
        linear-gradient(145deg, #0d3155, #061728);
    }
    .service-art::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size: 34px 34px; }
    .browser-ui {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 82%;
      height: 66%;
      transform: translate(-50%, -50%) rotate(-3deg);
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 18px;
      background: rgba(255,255,255,.08);
      box-shadow: 0 30px 55px rgba(0,0,0,.25);
      backdrop-filter: blur(14px);
    }
    .browser-ui .bar { height: 42px; border-bottom: 1px solid rgba(255,255,255,.1); }
    .browser-ui .hero-box { height: 80px; margin: 20px; border-radius: 11px; background: linear-gradient(110deg, var(--yellow), var(--orange)); }
    .browser-ui .ui-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 20px; }
    .browser-ui .ui-grid i { height: 65px; border-radius: 10px; background: rgba(255,255,255,.09); }
    .phone-ui {
      position: absolute;
      right: 18px;
      bottom: 22px;
      width: 115px;
      height: 220px;
      border: 6px solid #e9f1f8;
      border-radius: 27px;
      background: var(--navy);
      box-shadow: 0 25px 45px rgba(0,0,0,.3);
      animation: phoneFloat 4s ease-in-out infinite alternate;
    }
    .phone-ui::before { content: ""; position: absolute; left: 12px; right: 12px; top: 24px; height: 68px; border-radius: 11px; background: linear-gradient(145deg, var(--cyan), var(--blue)); }
    .phone-ui::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 26px; height: 80px; border-radius: 11px; background: repeating-linear-gradient(to bottom,rgba(255,255,255,.17) 0 5px,transparent 5px 14px); }
    .ai-nodes { position: absolute; inset: 0; }
    .ai-node { position: absolute; width: 65px; height: 65px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: var(--white); background: rgba(0,189,232,.12); font: 800 10px "Manrope"; box-shadow: 0 0 35px rgba(0,189,232,.12); }
    .ai-node::after { content: ""; position: absolute; width: 120px; height: 1px; left: 50%; top: 50%; transform-origin: left; background: linear-gradient(90deg, rgba(0,189,232,.55), transparent); }
    .ai-node.n1 { left: 16%; top: 18%; animation: chipFloat 3.8s ease-in-out infinite alternate; }
    .ai-node.n1::after { transform: rotate(28deg); }
    .ai-node.n2 { right: 14%; top: 25%; animation: chipFloat 4.4s ease-in-out infinite alternate-reverse; }
    .ai-node.n2::after { width: 110px; transform: rotate(145deg); }
    .ai-node.n3 { left: 24%; bottom: 18%; animation: chipFloat 4.8s ease-in-out infinite alternate; }
    .ai-node.n3::after { transform: rotate(-25deg); }
    .ai-core { position: absolute; left: 50%; top: 50%; width: 130px; height: 130px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.2); border-radius: 50%; background: radial-gradient(circle,rgba(0,189,232,.25),rgba(5,17,31,.75)); box-shadow: 0 0 60px rgba(0,189,232,.22); }
    .ai-core::before, .ai-core::after { content: ""; position: absolute; border: 1px dashed rgba(255,255,255,.2); border-radius: 50%; animation: rotate 13s linear infinite; }
    .ai-core::before { inset: -38px; }
    .ai-core::after { inset: -70px; animation-direction: reverse; animation-duration: 19s; }
    .ai-core strong { position: relative; z-index: 2; font: 800 22px "Manrope"; }
    .media-strip { position: absolute; inset: 24px; display: grid; grid-template-columns: 1.2fr .8fr; grid-template-rows: 1fr 1fr; gap: 12px; }
    .media-tile { position: relative; overflow: hidden; border-radius: 16px; background: linear-gradient(145deg,#175c96,#0c2b4a); }
    .media-tile:first-child { grid-row: 1 / 3; }
    .media-tile::before { content: ""; position: absolute; width: 80px; height: 80px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }
    .media-tile::after { content: "▶"; position: absolute; left: 50%; top: 50%; transform: translate(-45%,-50%); color: var(--yellow); font-size: 22px; }
    .brand-canvas { position: absolute; inset: 25px; display: grid; place-items: center; overflow: hidden; border-radius: 18px; background: #f6f9fc; }
    .brand-mark-big { position: relative; width: 170px; height: 170px; border: 30px solid var(--blue); border-right-color: var(--cyan); border-bottom-color: var(--yellow); border-radius: 50%; animation: rotate 12s linear infinite; }
    .brand-mark-big::before { content: "GTS"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--navy); font: 800 30px "Manrope"; transform: rotate(0deg); }
    .market-chart { position: absolute; inset: 30px; display: flex; align-items: end; gap: 13px; padding: 28px; border-radius: 18px; background: rgba(255,255,255,.05); }
    .market-chart i { flex: 1; border-radius: 9px 9px 2px 2px; background: linear-gradient(to top,var(--blue),var(--cyan)); animation: bars 2.5s ease-in-out infinite alternate; }
    .market-chart i:nth-child(1){height:34%}.market-chart i:nth-child(2){height:63%}.market-chart i:nth-child(3){height:49%}.market-chart i:nth-child(4){height:88%}.market-chart i:nth-child(5){height:72%}.market-chart i:nth-child(6){height:94%}

    /* Work */
    .work-top { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 42px; }
    .filters { display: flex; flex-wrap: wrap; gap: 8px; }
    .filters button { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: var(--white); font-size: 11px; font-weight: 800; transition: .25s; }
    .filters button.active, .filters button:hover { color: var(--white); border-color: var(--navy); background: var(--navy); }
    .work-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px; }
    .project { position: relative; min-height: 360px; overflow: hidden; border-radius: 24px; background: #dfeaf2; box-shadow: var(--shadow-soft); transition: transform .35s var(--ease), opacity .3s; }
    .project:nth-child(1), .project:nth-child(4) { grid-column: span 7; }
    .project:nth-child(2), .project:nth-child(3) { grid-column: span 5; }
    .project.hide { display: none; }
    .project:hover { transform: translateY(-8px); }
    .project-art { position: absolute; inset: 0; overflow: hidden; transition: transform .6s var(--ease); }
    .project:hover .project-art { transform: scale(1.04); }
    .project-art.web { background: radial-gradient(circle at 75% 20%,rgba(0,189,232,.38),transparent 28%),linear-gradient(145deg,#0c2744,#07182d); }
    .project-art.media { background: linear-gradient(145deg,#f6b333,#f47b2e); }
    .project-art.branding { background: linear-gradient(145deg,#e9f6fd,#c7e9f6); }
    .project-art.ai { background: radial-gradient(circle at 70% 20%,rgba(115,88,220,.4),transparent 28%),linear-gradient(145deg,#1b1741,#090922); }
    .project-browser { position: absolute; left: 50%; top: 50%; width: 75%; height: 62%; transform: translate(-50%,-50%) rotate(-4deg); border: 1px solid rgba(255,255,255,.15); border-radius: 17px; background: rgba(255,255,255,.1); box-shadow: 0 30px 50px rgba(0,0,0,.25); }
    .project-browser::before { content: ""; position: absolute; left: 7%; right: 7%; top: 17%; height: 30%; border-radius: 9px; background: linear-gradient(105deg,var(--yellow),var(--cyan)); }
    .project-browser::after { content: ""; position: absolute; left: 7%; right: 35%; bottom: 16%; height: 25%; background: repeating-linear-gradient(to bottom,rgba(255,255,255,.26) 0 5px,transparent 5px 13px); }
    .reel-phone { position: absolute; left: 50%; top: 50%; width: 145px; height: 270px; transform: translate(-50%,-50%) rotate(5deg); border: 8px solid #fff; border-radius: 30px; background: linear-gradient(180deg,#13243a,#050b13); box-shadow: 0 24px 50px rgba(0,0,0,.22); }
    .reel-phone::before { content: "PLAY"; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: var(--yellow); font: 800 12px "Manrope"; letter-spacing: .16em; }
    .brand-board { position: absolute; inset: 35px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
    .brand-board i { border-radius: 16px; background: rgba(255,255,255,.72); }
    .brand-board i:first-child { grid-row: 1/3; background: var(--navy); }
    .brand-board i:nth-child(2) { background: var(--yellow); }
    .brand-board i:nth-child(3) { background: var(--blue); }
    .ai-dashboard { position: absolute; inset: 38px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.07); }
    .ai-dashboard::before { content: ""; position: absolute; left: 7%; right: 54%; top: 14%; bottom: 14%; border-radius: 13px; background: linear-gradient(180deg,rgba(0,189,232,.3),rgba(255,255,255,.04)); }
    .ai-dashboard::after { content: ""; position: absolute; left: 52%; right: 7%; top: 14%; bottom: 14%; border-radius: 13px; background: repeating-linear-gradient(to bottom,rgba(255,255,255,.13) 0 7px,transparent 7px 18px); }
    .project-overlay { position: absolute; inset: auto 0 0; padding: 75px 28px 26px; color: var(--white); background: linear-gradient(transparent,rgba(4,17,31,.92)); }
    .project-overlay small { color: var(--yellow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
    .project-overlay h3 { margin: 8px 0 0; font: 800 24px/1.1 "Manrope"; letter-spacing: -.035em; }
    .project-arrow { position: absolute; right: 24px; bottom: 27px; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: var(--white); background: rgba(255,255,255,.08); transition: .3s; }
    .project:hover .project-arrow { color: var(--navy); background: var(--yellow); transform: rotate(45deg); }

    /* Process */
    .process-wrap { overflow: hidden; }
    .process-grid { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin-top: 54px; }
    .process-line { position: absolute; left: 10%; right: 10%; top: 33px; height: 2px; background: var(--line); }
    .process-line i { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--yellow),var(--cyan),var(--blue)); transition: width .2s; }
    .process-step { position: relative; z-index: 2; padding: 0 8px; text-align: center; }
    .step-icon { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 20px; border: 7px solid var(--white); border-radius: 50%; color: var(--white); background: var(--navy); box-shadow: 0 10px 24px rgba(7,24,45,.15); font: 800 13px "Manrope"; transition: .3s; }
    .process-step:hover .step-icon { color: var(--navy); background: var(--yellow); transform: scale(1.08); }
    .process-step h3 { margin: 0 0 9px; color: var(--navy); font: 800 17px "Manrope"; }
    .process-step p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

    /* Testimonials */
    .testimonial-section { overflow: hidden; }
    .testimonial-grid { display: grid; grid-template-columns: .75fr 1.25fr; gap: 60px; align-items: center; }
    .testimonial-copy .section-title { color: var(--white); }
    .testimonial-copy .section-lead { color: rgba(255,255,255,.58); }
    .testimonial-copy .overline { color: var(--yellow); }
    .testimonial-score { display: flex; align-items: center; gap: 15px; margin-top: 34px; }
    .testimonial-score strong { font: 800 42px "Manrope"; }
    .stars { color: var(--yellow); letter-spacing: .12em; }
    .testimonial-score small { display: block; color: rgba(255,255,255,.48); }
    .testimonial-slider { position: relative; min-height: 420px; }
    .quote-card {
      position: absolute;
      inset: 0;
      padding: 48px;
      opacity: 0;
      visibility: hidden;
      transform: translateX(30px);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 26px;
      color: var(--white);
      background: linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.04));
      box-shadow: 0 28px 70px rgba(0,0,0,.18);
      transition: .45s var(--ease);
    }
    .quote-card.active { opacity: 1; visibility: visible; transform: none; }
    .quote-mark { color: var(--yellow); font: 800 76px/.8 Georgia,serif; }
    .quote-card blockquote { margin: 20px 0 34px; color: rgba(255,255,255,.86); font: 600 clamp(20px,2.6vw,29px)/1.45 "Manrope"; letter-spacing: -.025em; }
    .quote-author { display: flex; align-items: center; gap: 14px; }
    .quote-avatar { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; color: var(--navy); background: linear-gradient(145deg,var(--yellow),#ffe498); font-weight: 800; }
    .quote-author strong { display: block; font: 800 14px "Manrope"; }
    .quote-author span { display: block; margin-top: 4px; color: rgba(255,255,255,.45); font-size: 11px; }
    .slider-controls { position: absolute; right: 28px; bottom: 28px; z-index: 4; display: flex; gap: 8px; }
    .slider-controls button { width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; color: var(--white); background: rgba(255,255,255,.06); transition: .25s; }
    .slider-controls button:hover { color: var(--navy); background: var(--yellow); }

    /* CTA / Contact */
    .contact-section { background: var(--paper); }
    .contact-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 70px; align-items: start; }
    .contact-copy { position: sticky; top: 150px; }
    .contact-copy .section-title { font-size: clamp(38px,5vw,60px); }
    .contact-details { display: grid; gap: 14px; margin-top: 36px; }
    .contact-details a, .contact-details span { display: flex; align-items: center; gap: 12px; color: var(--navy); font-size: 13px; font-weight: 700; }
    .contact-details i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; color: var(--white); background: var(--blue); font-style: normal; }
    .contact-form { padding: 36px; border: 1px solid var(--line); border-radius: 25px; background: var(--white); box-shadow: var(--shadow); }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
    .field { position: relative; }
    .field.full { grid-column: 1 / -1; }
    .field label { display: block; margin-bottom: 8px; color: var(--navy); font-size: 11px; font-weight: 800; }
    .field input, .field select, .field textarea {
      width: 100%;
      border: 1px solid var(--line);
      border-radius: 11px;
      outline: none;
      color: var(--ink);
      background: var(--paper);
      transition: border-color .2s, box-shadow .2s, background .2s;
    }
    .field input, .field select { height: 52px; padding: 0 15px; }
    .field textarea { min-height: 130px; padding: 14px 15px; resize: vertical; }
    .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cyan); background: var(--white); box-shadow: 0 0 0 4px rgba(0,189,232,.1); }
    .form-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 23px; }
    .form-status { margin: 0; color: var(--success); font-size: 11px; font-weight: 700; }

    /* Closing CTA */
    .closing-cta { position: relative; overflow: hidden; padding: 90px 0; color: var(--white); background: linear-gradient(125deg,var(--blue),var(--cyan)); }
    .closing-cta::before { content: ""; position: absolute; width: 520px; height: 520px; right: -170px; top: -240px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: inset 0 0 0 48px rgba(255,255,255,.04),inset 0 0 0 98px rgba(255,255,255,.025); }
    .closing-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 40px; }
    .closing-inner h2 { max-width: 720px; margin: 0; font: 800 clamp(36px,5vw,62px)/1.05 "Manrope"; letter-spacing: -.055em; }
    .closing-inner .btn { flex: 0 0 auto; color: var(--navy); background: var(--white); }

    /* Footer */
    .footer { color: rgba(255,255,255,.65); background: #04111f; }
    .footer-main { padding: 80px 0 55px; }
    .footer-grid { display: grid; grid-template-columns: 1.35fr repeat(4, .8fr); gap: 40px; }
    .footer .brand-name strong { color: var(--white); }
    .footer-brand p { max-width: 300px; margin: 22px 0 0; font-size: 13px; }
    .footer-col h4 { margin: 0 0 17px; color: var(--white); font: 800 14px "Manrope"; }
    .footer-col a { display: block; padding: 5px 0; font-size: 12px; transition: color .2s, transform .2s; }
    .footer-col a:hover { color: var(--yellow); transform: translateX(4px); }
    .footer-bottom { padding: 22px 0; border-top: 1px solid rgba(255,255,255,.09); }
    .footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; font-size: 11px; }
    .footer-bottom-links { display: flex; gap: 18px; }

    /* Floating */
    .floating-actions { position: fixed; right: 22px; bottom: 22px; z-index: 900; display: flex; flex-direction: column; gap: 9px; }
    .float-btn { width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--white); background: var(--blue); box-shadow: 0 12px 28px rgba(7,24,45,.2); transition: transform .25s, background .25s; }
    .float-btn:hover { transform: translateY(-4px) scale(1.04); background: var(--navy); }
    .float-btn.whatsapp { background: #1fbe68; }
    .float-btn.top { opacity: 0; visibility: hidden; transform: translateY(10px); }
    .float-btn.top.show { opacity: 1; visibility: visible; transform: none; }
    .float-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }

    /* Reveal */
    .reveal { opacity: 0; transform: translateY(34px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
    .reveal-left { opacity: 0; transform: translateX(-38px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
    .reveal-right { opacity: 0; transform: translateX(38px); transition: opacity .75s var(--ease), transform .75s var(--ease); }
    .reveal.show, .reveal-left.show, .reveal-right.show { opacity: 1; transform: none; }
    .delay-1 { transition-delay: .1s; }
    .delay-2 { transition-delay: .2s; }
    .delay-3 { transition-delay: .3s; }

    @media (max-width: 1080px) {
      .nav-links { display: none; }
      .menu-btn { display: block; }
      .topbar-social { display: none; }
      .hero-inner { grid-template-columns: 1fr 1fr; gap: 35px; }
      .hero h1 { font-size: clamp(48px, 6.5vw, 72px); }
      .about-grid { gap: 50px; }
      .services-layout { grid-template-columns: 1fr; }
      .service-tabs { display: grid; grid-template-columns: repeat(3,1fr); }
      .service-tab.active, .service-tab:hover { transform: translateY(-4px); }
      .service-stage { min-height: 590px; }
      .footer-grid { grid-template-columns: 1.3fr repeat(2,1fr); }
    }

    @media (max-width: 820px) {
      .section { padding: 85px 0; }
      .topbar { display: none; }
      .header { top: 0; }
      .nav { min-height: 72px; }
      .nav-cta { display: none; }
      .hero { min-height: auto; }
      .hero-inner { grid-template-columns: 1fr; padding: 80px 0 110px; }
      .hero-stage { min-height: 470px; }
      .hero-scroll { display: none; }
      .trust-panel { grid-template-columns: 1fr 1fr; }
      .trust-intro { grid-column: 1/-1; }
      .trust-stat:nth-child(even) { border-left: 0; }
      .about-grid { grid-template-columns: 1fr; }
      .about-visual { min-height: 540px; }
      .mvc-grid { grid-template-columns: 1fr; }
      .mvc-card { min-height: 0; display: grid; grid-template-columns: .8fr 1.2fr; }
      .mvc-art { height: auto; min-height: 280px; }
      .services-head { align-items: start; flex-direction: column; }
      .service-tabs { grid-template-columns: 1fr 1fr; }
      .service-panel { grid-template-columns: 1fr; padding: 34px; }
      .service-stage { min-height: 920px; }
      .work-top { align-items: start; flex-direction: column; }
      .project:nth-child(n) { grid-column: span 12; }
      .process-grid { grid-template-columns: 1fr; gap: 30px; }
      .process-line { left: 33px; right: auto; top: 30px; bottom: 30px; width: 2px; height: auto; }
      .process-line i { width: 100%; height: 0; }
      .process-step { display: grid; grid-template-columns: 68px 1fr; gap: 18px; text-align: left; align-items: start; }
      .step-icon { grid-row: 1 / 3; margin: 0; }
      .process-step h3 { margin-top: 10px; }
      .testimonial-grid { grid-template-columns: 1fr; }
      .testimonial-slider { min-height: 480px; }
      .contact-grid { grid-template-columns: 1fr; }
      .contact-copy { position: static; }
      .closing-inner { align-items: start; flex-direction: column; }
      .footer-grid { grid-template-columns: 1fr 1fr; }
      .footer-brand { grid-column: 1 / -1; }
    }

    @media (max-width: 560px) {
      :root { --container: min(100% - 28px, 1180px); }
      .section { padding: 72px 0; }
      .brand-name small { display: none; }
      .hero h1 { font-size: clamp(44px, 14vw, 64px); }
      .hero-copy > p { font-size: 15px; }
      .hero-actions .btn { width: 100%; }
      .hero-stage { min-height: 405px; }
      .stage-main { inset: 20px 0 40px; }
      .orbit-system { width: 260px; height: 260px; }
      .orbit-core { inset: 94px; }
      .orbit-label.l1 { left: 84px; }
      .orbit-label.l2 { right: -18px; top: 104px; }
      .orbit-label.l3 { left: 84px; }
      .orbit-label.l4 { left: -18px; top: 104px; }
      .data-card.a { right: -4px; top: 72px; width: 123px; }
      .data-card.b { left: -4px; bottom: 42px; width: 150px; }
      .trust-panel { grid-template-columns: 1fr; }
      .trust-intro { grid-column: auto; }
      .trust-stat { border-left: 0; border-top: 1px solid var(--line); }
      .about-visual { min-height: 455px; }
      .about-card-main { inset: 0 18px 45px 0; }
      .device-scene { inset: 70px 20px 28px; }
      .experience-card { width: 175px; padding: 19px; }
      .about-points { grid-template-columns: 1fr; }
      .mvc-card { display: block; }
      .mvc-art { min-height: 210px; }
      .service-tabs { grid-template-columns: 1fr; }
      .service-stage { min-height: 930px; }
      .service-panel { padding: 26px; }
      .service-list { grid-template-columns: 1fr; }
      .service-art { min-height: 310px; }
      .filters { width: 100%; }
      .filters button { flex: 1; }
      .project { min-height: 330px; }
      .testimonial-slider { min-height: 570px; }
      .quote-card { padding: 34px 28px 90px; }
      .form-grid { grid-template-columns: 1fr; }
      .field.full { grid-column: auto; }
      .contact-form { padding: 24px; }
      .form-footer { align-items: stretch; flex-direction: column-reverse; }
      .form-footer .btn { width: 100%; }
      .footer-grid { grid-template-columns: 1fr; }
      .footer-brand { grid-column: auto; }
      .footer-bottom-inner { align-items: flex-start; flex-direction: column; }
      .floating-actions { right: 14px; bottom: 14px; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
    }


    /* Official GTS logo */
    .brand-logo {
      width: 180px;
      height: 64px;
      object-fit: contain;
      object-position: left center;
      transition: transform .28s var(--ease), filter .28s ease;
    }
    .brand:hover .brand-logo { transform: translateY(-1px) scale(1.015); }
    .loader-logo-img {
      width: min(360px, 74vw);
      max-height: 132px;
      object-fit: contain;
      filter: drop-shadow(0 18px 35px rgba(0,189,232,.20));
    }
    .footer .brand-logo {
      width: 220px;
      height: 82px;
      filter: drop-shadow(0 12px 28px rgba(0,189,232,.14));
    }
    .work-actions {
      margin-top: 38px;
      display: flex;
      justify-content: center;
    }
    @media (max-width: 1120px) {
      .brand-logo { width: 155px; height: 58px; }
    }
    @media (max-width: 620px) {
      .brand-logo { width: 132px; height: 50px; }
      .footer .brand-logo { width: 190px; height: 70px; }
    }

  
    .portfolio-hero {
      position: relative;
      min-height: 680px;
      display: grid;
      align-items: center;
      overflow: hidden;
      color: var(--white);
      background:
        radial-gradient(circle at 82% 26%, rgba(0,189,232,.24), transparent 26%),
        radial-gradient(circle at 18% 80%, rgba(255,189,50,.13), transparent 24%),
        linear-gradient(135deg, #04111f 0%, #07182d 52%, #0b2440 100%);
    }
    .portfolio-hero::before {
      content: "";
      position: absolute;
      inset: 0;
      opacity: .16;
      background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: linear-gradient(to bottom, #000, transparent 95%);
    }
    .portfolio-hero-inner {
      position: relative;
      z-index: 2;
      padding: 116px 0 108px;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 70px;
      align-items: center;
    }
    .portfolio-breadcrumb { display:flex; gap:9px; color:rgba(255,255,255,.62); font-size:13px; font-weight:700; }
    .portfolio-breadcrumb a:hover { color:var(--cyan); }
    .portfolio-hero h1 { margin:20px 0 24px; max-width:770px; font:800 clamp(52px,7vw,88px)/.98 "Manrope",sans-serif; letter-spacing:-.065em; }
    .portfolio-hero h1 span { color:var(--cyan); }
    .portfolio-hero p { max-width:650px; margin:0; color:rgba(255,255,255,.72); font-size:18px; }
    .portfolio-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
    .portfolio-visual { position:relative; min-height:430px; }
    .portfolio-stack { position:absolute; inset:18px 0 0 30px; }
    .portfolio-sheet {
      position:absolute; width:76%; height:72%; right:0; top:7%; border-radius:28px; overflow:hidden;
      border:1px solid rgba(255,255,255,.16); box-shadow:0 34px 90px rgba(0,0,0,.35);
      background:linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.04)); backdrop-filter:blur(18px);
      transform:rotate(6deg); animation:sheetFloat 6s ease-in-out infinite;
    }
    .portfolio-sheet:nth-child(2) { right:14%; top:18%; transform:rotate(-5deg); animation-delay:-2s; background:linear-gradient(145deg,rgba(0,189,232,.25),rgba(255,255,255,.05)); }
    .portfolio-sheet:nth-child(3) { right:7%; top:29%; transform:rotate(1deg); animation-delay:-4s; background:linear-gradient(145deg,rgba(255,189,50,.17),rgba(255,255,255,.05)); }
    .sheet-bar { height:47px; border-bottom:1px solid rgba(255,255,255,.12); }
    .sheet-content { padding:26px; display:grid; gap:16px; }
    .sheet-content i { display:block; height:12px; border-radius:9px; background:rgba(255,255,255,.17); }
    .sheet-content i:nth-child(2){width:72%}.sheet-content i:nth-child(3){height:105px;background:linear-gradient(120deg,rgba(0,189,232,.38),rgba(11,115,216,.14))}
    .portfolio-float-stat { position:absolute; z-index:5; padding:18px 20px; border:1px solid rgba(255,255,255,.15); border-radius:17px; background:rgba(4,17,31,.72); backdrop-filter:blur(14px); box-shadow:0 20px 50px rgba(0,0,0,.24); animation:floatCard 5s ease-in-out infinite; }
    .portfolio-float-stat strong { display:block; color:var(--cyan); font:800 25px/1 "Manrope"; }
    .portfolio-float-stat span { display:block; margin-top:7px; color:rgba(255,255,255,.65); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; }
    .portfolio-float-stat.one { left:0; top:54px; }.portfolio-float-stat.two { right:-8px; bottom:38px; animation-delay:-2.5s; }
    @keyframes sheetFloat { 50% { transform:translateY(-13px) rotate(3deg); } }
    @keyframes floatCard { 50% { transform:translateY(-12px); } }

    .portfolio-nav-strip { position:sticky; top:82px; z-index:900; border-bottom:1px solid var(--line); background:rgba(255,255,255,.94); backdrop-filter:blur(14px); }
    .portfolio-filters { min-height:76px; display:flex; align-items:center; justify-content:center; gap:10px; overflow:auto; scrollbar-width:none; }
    .portfolio-filters::-webkit-scrollbar { display:none; }
    .portfolio-filters button { flex:0 0 auto; padding:11px 18px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--white); font-size:13px; font-weight:800; transition:.25s; }
    .portfolio-filters button:hover,.portfolio-filters button.active { color:var(--white); border-color:var(--blue); background:var(--blue); transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,115,216,.18); }

    .portfolio-intro-grid { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:end; margin-bottom:55px; }
    .portfolio-intro-grid .section-lead { margin:0; }
    .portfolio-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:24px; }
    .portfolio-card { position:relative; grid-column:span 6; min-height:500px; overflow:hidden; border-radius:28px; background:var(--paper); box-shadow:var(--shadow-soft); transition:transform .45s var(--ease),box-shadow .45s; }
    .portfolio-card.wide { grid-column:span 8; }.portfolio-card.tall { grid-column:span 4; }.portfolio-card.full { grid-column:span 12; min-height:520px; }
    .portfolio-card.hide { display:none; }
    .portfolio-card:hover { transform:translateY(-9px); box-shadow:var(--shadow); }
    .portfolio-art { position:absolute; inset:0; overflow:hidden; transition:transform .7s var(--ease); }
    .portfolio-card:hover .portfolio-art { transform:scale(1.025); }
    .portfolio-card-copy { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:110px 30px 28px; color:var(--white); background:linear-gradient(to top,rgba(4,17,31,.96),rgba(4,17,31,.55) 48%,transparent); }
    .portfolio-card-copy small { color:var(--cyan); font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    .portfolio-card-copy h3 { max-width:650px; margin:9px 0 7px; font:800 clamp(25px,3vw,37px)/1.08 "Manrope"; letter-spacing:-.04em; }
    .portfolio-card-copy p { max-width:640px; margin:0; color:rgba(255,255,255,.68); font-size:14px; }
    .portfolio-open { position:absolute; right:26px; top:26px; z-index:5; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:var(--white); background:rgba(4,17,31,.35); backdrop-filter:blur(10px); font-size:23px; transition:.3s; }
    .portfolio-card:hover .portfolio-open { color:var(--navy); background:var(--yellow); transform:rotate(45deg); }

    .art-web { background:linear-gradient(140deg,#0d2f53,#0b73d8 55%,#00bde8); }
    .art-web .mock-browser { position:absolute; width:72%; height:65%; left:14%; top:11%; border-radius:18px; background:#fff; box-shadow:0 30px 75px rgba(0,0,0,.28); transform:perspective(1000px) rotateX(5deg) rotateY(-8deg); }
    .mock-browser::before { content:""; display:block; height:34px; border-bottom:1px solid #dce6ef; background:linear-gradient(90deg,#f6f9fc,#fff); }
    .mock-browser::after { content:""; position:absolute; inset:56px 28px 30px; border-radius:13px; background:linear-gradient(135deg,#07182d 0 42%,#00bde8 42% 64%,#edf4fa 64%); }
    .art-brand { background:linear-gradient(145deg,#f5a623,#ffbd32 42%,#07182d 42%); }
    .art-brand .brand-shape { position:absolute; width:240px; height:240px; left:50%; top:41%; transform:translate(-50%,-50%) rotate(45deg); border-radius:48px; border:34px solid rgba(255,255,255,.92); box-shadow:0 22px 55px rgba(0,0,0,.22); }
    .art-media { background:radial-gradient(circle at 65% 35%,#ff8f2b,transparent 30%),linear-gradient(135deg,#22102d,#07182d 62%); }
    .art-media .media-frame { position:absolute; width:54%; height:72%; left:23%; top:8%; border:10px solid rgba(255,255,255,.88); border-radius:27px; transform:rotate(-6deg); background:linear-gradient(145deg,#ff8f2b,#0b73d8 58%,#07182d); box-shadow:0 30px 70px rgba(0,0,0,.32); }
    .media-frame::after { content:"▶"; position:absolute; inset:0; display:grid; place-items:center; color:white; font-size:58px; text-shadow:0 8px 30px rgba(0,0,0,.3); }
    .art-ai { background:linear-gradient(135deg,#07182d,#102e4f); }
    .art-ai .ai-network { position:absolute; inset:0; background-image:radial-gradient(circle,rgba(0,189,232,.72) 0 3px,transparent 4px); background-size:74px 74px; opacity:.8; }
    .ai-network::before,.ai-network::after { content:""; position:absolute; width:280px; height:280px; border:1px solid rgba(0,189,232,.38); border-radius:50%; left:50%; top:45%; transform:translate(-50%,-50%); box-shadow:0 0 70px rgba(0,189,232,.22),inset 0 0 40px rgba(0,189,232,.12); }
    .ai-network::after { width:160px;height:160px;border-color:rgba(255,189,50,.45); }
    .art-app { background:linear-gradient(150deg,#edf4fa,#cceeff); }
    .art-app .phone-one,.art-app .phone-two { position:absolute; width:190px; height:380px; top:8%; border:10px solid #07182d; border-radius:36px; background:linear-gradient(180deg,#fff,#d8f5ff); box-shadow:0 28px 70px rgba(7,24,45,.25); }
    .phone-one { left:24%; transform:rotate(-10deg); }.phone-two { right:22%; transform:rotate(10deg); }
    .phone-one::after,.phone-two::after { content:""; position:absolute; inset:45px 16px 18px; border-radius:20px; background:linear-gradient(145deg,#0b73d8,#00bde8 45%,#fff 46%); }
    .art-growth { background:linear-gradient(140deg,#051527,#0b2440); }
    .art-growth .growth-bars { position:absolute; inset:15% 13% 22%; display:flex; align-items:end; gap:18px; }
    .growth-bars i { flex:1; border-radius:12px 12px 0 0; background:linear-gradient(to top,#0b73d8,#00bde8); box-shadow:0 0 25px rgba(0,189,232,.22); }
    .growth-bars i:nth-child(1){height:26%}.growth-bars i:nth-child(2){height:44%}.growth-bars i:nth-child(3){height:36%}.growth-bars i:nth-child(4){height:68%}.growth-bars i:nth-child(5){height:84%}.growth-bars i:nth-child(6){height:100%}

    .impact-band { overflow:hidden; background:var(--paper); }
    .impact-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; border:1px solid var(--line); border-radius:28px; overflow:hidden; background:var(--line); }
    .impact-item { padding:42px 30px; background:var(--white); }
    .impact-item strong { display:block; color:var(--blue); font:800 43px/1 "Manrope"; letter-spacing:-.05em; }
    .impact-item span { display:block; margin-top:11px; color:var(--muted); font-size:14px; }

    .case-feature { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
    .case-feature-visual { min-height:520px; position:relative; border-radius:30px; overflow:hidden; background:linear-gradient(145deg,#07182d,#0b73d8); box-shadow:var(--shadow); }
    .case-dashboard { position:absolute; width:78%; height:66%; left:11%; top:12%; border:1px solid rgba(255,255,255,.18); border-radius:22px; background:rgba(255,255,255,.09); backdrop-filter:blur(13px); box-shadow:0 28px 70px rgba(0,0,0,.28); }
    .case-dashboard::before { content:""; position:absolute; inset:25px; border-radius:15px; background:linear-gradient(90deg,rgba(0,189,232,.26) 0 28%,transparent 28% 31%,rgba(255,255,255,.08) 31%); }
    .case-badge { position:absolute; right:7%; bottom:8%; padding:19px 22px; border-radius:17px; color:var(--navy); background:var(--yellow); box-shadow:0 18px 45px rgba(0,0,0,.25); }
    .case-badge strong { display:block; font:800 26px/1 "Manrope"; }.case-badge span { font-size:12px;font-weight:700; }
    .case-list { display:grid; gap:16px; margin:30px 0; }
    .case-list span { display:flex; gap:12px; align-items:center; color:var(--muted); }
    .case-list span::before { content:"✓"; width:26px; height:26px; display:grid; place-items:center; border-radius:50%; color:var(--white); background:var(--blue); font-size:12px; font-weight:900; }

    .portfolio-modal { position:fixed; inset:0; z-index:10000; display:grid; place-items:center; padding:24px; opacity:0; visibility:hidden; background:rgba(4,17,31,.78); backdrop-filter:blur(16px); transition:.3s; }
    .portfolio-modal.open { opacity:1; visibility:visible; }
    .modal-card { position:relative; width:min(800px,100%); max-height:88vh; overflow:auto; padding:44px; border-radius:28px; background:var(--white); box-shadow:0 35px 110px rgba(0,0,0,.35); transform:translateY(22px) scale(.98); transition:.35s var(--ease); }
    .portfolio-modal.open .modal-card { transform:none; }
    .modal-close { position:absolute; right:20px; top:18px; width:44px; height:44px; border:0; border-radius:50%; color:var(--navy); background:var(--paper); font-size:24px; }
    .modal-card small { color:var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.1em; }
    .modal-card h2 { max-width:650px; margin:12px 0 16px; color:var(--navy); font:800 clamp(34px,5vw,55px)/1.05 "Manrope"; letter-spacing:-.05em; }
    .modal-card p { color:var(--muted); }
    .modal-details { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:28px; }
    .modal-details div { padding:22px; border-radius:18px; background:var(--paper); }
    .modal-details strong { display:block; color:var(--navy); margin-bottom:8px; }

    @media (max-width: 980px) {
      .portfolio-hero-inner,.portfolio-intro-grid,.case-feature { grid-template-columns:1fr; }
      .portfolio-visual { min-height:380px; max-width:650px; width:100%; margin:auto; }
      .portfolio-card,.portfolio-card.wide,.portfolio-card.tall { grid-column:span 6; }
      .impact-grid { grid-template-columns:1fr 1fr; }
    }
    @media (max-width: 720px) {
      .portfolio-hero { min-height:auto; }
      .portfolio-hero-inner { padding:82px 0 74px; gap:30px; }
      .portfolio-visual { min-height:315px; }
      .portfolio-stack { inset:0; }
      .portfolio-float-stat.one { top:20px; }.portfolio-float-stat.two{bottom:8px}
      .portfolio-nav-strip { top:68px; }
      .portfolio-filters { justify-content:flex-start; }
      .portfolio-card,.portfolio-card.wide,.portfolio-card.tall,.portfolio-card.full { grid-column:span 12; min-height:430px; }
      .portfolio-intro-grid { gap:20px; }
      .impact-grid { grid-template-columns:1fr; }
      .modal-card { padding:36px 24px 26px; }.modal-details { grid-template-columns:1fr; }
      .case-feature-visual { min-height:390px; }
    }

    /* ============================================================
       SERVICE GALLERY (added section — follows existing GTS tokens)
       ============================================================ */
    .gallery-tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 0 46px; }
    .gallery-tabs button { flex:0 0 auto; padding:11px 18px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--white); font-size:13px; font-weight:800; transition:.25s; }
    .gallery-tabs button:hover, .gallery-tabs button.active { color:var(--white); border-color:var(--blue); background:var(--blue); transform:translateY(-2px); box-shadow:0 10px 24px rgba(11,115,216,.18); }

    .gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .gallery-item { position:relative; overflow:hidden; aspect-ratio:4/3; border-radius:var(--radius-md); background:linear-gradient(145deg,var(--navy-2),var(--navy-3)); box-shadow:var(--shadow-soft); cursor:pointer; transition:transform .45s var(--ease), box-shadow .45s; }
    .gallery-item:hover { transform:translateY(-7px); box-shadow:var(--shadow); }
    .gallery-item img, .gallery-item video { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s var(--ease); }
    .gallery-item:hover img, .gallery-item:hover video { transform:scale(1.06); }
    .gallery-item::after { content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(4,17,31,.72), transparent 55%); opacity:0; transition:.35s; pointer-events:none; }
    .gallery-item:hover::after { opacity:1; }
    .gallery-caption { position:absolute; z-index:3; left:0; right:0; bottom:0; padding:14px 16px; color:var(--white); font-size:12px; font-weight:700; letter-spacing:.02em; opacity:0; transform:translateY(8px); transition:.35s var(--ease); pointer-events:none; }
    .gallery-item:hover .gallery-caption { opacity:1; transform:none; }
    .gallery-play { position:absolute; z-index:3; left:50%; top:50%; width:56px; height:56px; display:grid; place-items:center; transform:translate(-50%,-50%); border-radius:50%; color:var(--navy); background:var(--yellow); box-shadow:0 14px 36px rgba(0,0,0,.32); font-size:18px; pointer-events:none; transition:.3s; }
    .gallery-item:hover .gallery-play { transform:translate(-50%,-50%) scale(1.12); }
    .gallery-type-badge { position:absolute; z-index:3; left:12px; top:12px; padding:5px 11px; border-radius:999px; color:var(--white); background:rgba(4,17,31,.55); backdrop-filter:blur(8px); font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
    .gallery-item.is-video .gallery-type-badge { color:var(--navy); background:var(--yellow); }

    /* Placeholder shown until real media is uploaded */
    .gallery-placeholder { position:absolute; inset:0; display:grid; place-items:center; color:rgba(255,255,255,.55); font:800 11px/1.6 "Manrope",sans-serif; letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:20px; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; }

    .gallery-more { display:flex; justify-content:center; margin-top:34px; }

    /* Lightbox for viewing gallery media */
    .lightbox { position:fixed; inset:0; z-index:10001; display:grid; place-items:center; padding:26px; opacity:0; visibility:hidden; background:rgba(4,17,31,.88); backdrop-filter:blur(16px); transition:.3s; }
    .lightbox.open { opacity:1; visibility:visible; }
    .lightbox-inner { position:relative; width:min(1020px,100%); max-height:88vh; display:grid; place-items:center; }
    .lightbox-inner img, .lightbox-inner video { max-width:100%; max-height:78vh; border-radius:var(--radius-lg); box-shadow:0 35px 110px rgba(0,0,0,.5); }
    .lightbox-caption { margin-top:16px; color:rgba(255,255,255,.75); font-size:14px; font-weight:600; text-align:center; }
    .lightbox-close { position:absolute; right:-6px; top:-54px; width:44px; height:44px; border:0; border-radius:50%; color:var(--navy); background:var(--yellow); font-size:24px; }
    .lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:50%; color:var(--white); background:rgba(4,17,31,.45); backdrop-filter:blur(10px); font-size:20px; transition:.3s; }
    .lightbox-nav:hover { color:var(--navy); background:var(--yellow); }
    .lightbox-prev { left:-64px; } .lightbox-next { right:-64px; }

    @media (max-width: 980px) {
      .gallery-grid { grid-template-columns:repeat(3,1fr); }
      .lightbox-prev { left:8px; } .lightbox-next { right:8px; }
      .lightbox-close { right:8px; top:-52px; }
    }
    @media (max-width: 720px) {
      .gallery-grid { grid-template-columns:repeat(2,1fr); gap:12px; }
      .gallery-tabs { justify-content:flex-start; overflow:auto; flex-wrap:nowrap; scrollbar-width:none; margin-inline:-20px; padding-inline:20px; }
      .gallery-tabs::-webkit-scrollbar { display:none; }
    }
    @media (max-width: 460px) {
      .gallery-grid { grid-template-columns:1fr 1fr; }
    }