:root {
      --bg: #050a12;
      --bg-soft: #091321;
      --panel: #0d192a;
      --panel-2: #101f33;
      --blue: #008cff;
      --blue-bright: #28b5ff;
      --blue-soft: #6ed4ff;
      --navy: #001f5f;
      --white: #f8fbff;
      --text: #d4e1ef;
      --muted: #8ca2b8;
      --line: rgba(134, 184, 231, .16);
      --green: #2ee6a6;
      --gold: #f6c64d;
      --danger: #ff5b6e;
      --shadow: 0 28px 80px rgba(0,0,0,.38);
      --radius: 24px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; scroll-padding-top: 90px; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--white);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      overflow-x: hidden;
    }

    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 999;
      opacity: .025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
    }

    img { display: block; max-width: 100%; }
    a { color: inherit; }
    button, input, select, textarea { font: inherit; }
    button { cursor: pointer; }

    .container { width: min(1180px, 92%); margin-inline: auto; }

    .skip-link {
      position: fixed;
      z-index: 1000;
      left: 12px;
      top: -60px;
      padding: 10px 14px;
      background: var(--blue);
      color: white;
      font-weight: 900;
      text-decoration: none;
      border-radius: 8px;
    }
    .skip-link:focus { top: 12px; }

    a:focus-visible, button:focus-visible, select:focus-visible,
    input:focus-visible, textarea:focus-visible, summary:focus-visible {
      outline: 2px solid var(--blue-bright);
      outline-offset: 3px;
    }

    .site-header {
      position: fixed;
      z-index: 100;
      top: 0;
      left: 0;
      width: 100%;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: rgba(4, 10, 18, .74);
      backdrop-filter: blur(20px);
      transition: .3s ease;
    }
    .site-header.scrolled {
      background: rgba(4, 10, 18, .94);
      box-shadow: 0 10px 30px rgba(0,0,0,.2);
    }

    .nav { min-height: 82px; display: flex; align-items: center; gap: 28px; }

    .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
    .brand img {
      width: 50px; height: 50px;
      object-fit: cover; border-radius: 15px;
      box-shadow: 0 0 28px rgba(0,140,255,.3);
    }
    .brand strong, .brand small { display: block; }
    .brand strong { font-size: 1rem; line-height: 1; }
    .brand small {
      margin-top: 4px;
      color: var(--blue-soft);
      font-size: .78rem;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    .nav-links {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 27px;
    }
    .nav-links a {
      text-decoration: none;
      color: #cddced;
      font-size: .9rem;
      font-weight: 800;
      transition: .2s ease;
    }
    .nav-links a:hover { color: var(--blue-bright); }
    .nav-links .nav-cta {
      padding: 11px 17px;
      border: 1px solid rgba(40,181,255,.4);
      border-radius: 999px;
      background: rgba(0,140,255,.1);
      color: #eafbff;
    }

    .menu-button {
      display: none;
      margin-left: auto;
      width: 45px;
      height: 45px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.04);
    }
    .menu-button span {
      width: 20px; height: 2px;
      display: block; margin: 4px auto;
      background: #fff;
    }

    .hero {
      position: relative;
      min-height: 100vh;
      display: grid;
      align-items: center;
      padding: 145px 0 120px;
      overflow: hidden;
      background:
        radial-gradient(circle at 75% 34%, rgba(0,140,255,.15), transparent 26%),
        radial-gradient(circle at 18% 48%, rgba(18,74,145,.19), transparent 30%),
        linear-gradient(160deg, #06101c 0%, #040810 70%);
    }
    .hero-grid-lines {
      position: absolute; inset: 0; opacity: .13;
      background-image:
        linear-gradient(rgba(48,161,255,.25) 1px, transparent 1px),
        linear-gradient(90deg, rgba(48,161,255,.25) 1px, transparent 1px);
      background-size: 64px 64px;
      mask-image: linear-gradient(to bottom, black, transparent 92%);
    }
    .hero-orb { position: absolute; border-radius: 50%; filter: blur(3px); opacity: .4; }
    .orb-one {
      width: 310px; height: 310px; right: -140px; top: 130px;
      border: 1px solid rgba(0,140,255,.6);
      box-shadow: inset 0 0 90px rgba(0,140,255,.14), 0 0 90px rgba(0,140,255,.08);
    }
    .orb-two {
      width: 150px; height: 150px; left: -70px; bottom: 120px;
      border: 1px solid rgba(110,212,255,.35);
      box-shadow: inset 0 0 60px rgba(0,140,255,.12);
    }

    .hero-layout {
      position: relative; z-index: 2;
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 50px;
      align-items: center;
    }


    .eyebrow {
      margin: 20px 0 0;
      color: var(--blue-soft);
      font-size: .76rem; font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .hero h1 {
      max-width: 800px;
      margin: 15px 0 22px;
      font-size: clamp(3.4rem, 7.6vw, 7.2rem);
      line-height: .91;
      letter-spacing: -.068em;
      text-transform: uppercase;
    }
    .hero h1 span, .display-heading span {
      color: transparent;
      background: linear-gradient(90deg, var(--blue-bright), #7fdbff 55%, #177dff);
      -webkit-background-clip: text;
      background-clip: text;
    }
    .hero-lead {
      max-width: 700px; margin: 0;
      color: #b7c9da;
      font-size: 1.1rem; line-height: 1.75;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

    .button {
      min-height: 50px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 0; border-radius: 999px;
      padding: 13px 21px;
      text-decoration: none;
      font-weight: 900;
      transition: .25s ease;
    }
    .button-primary {
      background: linear-gradient(100deg, #008cff, #22b9ff);
      color: #fff;
      box-shadow: 0 13px 35px rgba(0,140,255,.25);
    }
    .button-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 17px 42px rgba(0,140,255,.36);
    }
    .button-ghost {
      border: 1px solid rgba(255,255,255,.17);
      background: rgba(255,255,255,.04);
      color: #e6f2ff;
    }
    .button-ghost:hover { background: rgba(255,255,255,.09); }

    .trust-row {
      max-width: 680px;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 38px;
    }
    .trust-row > div {
      padding: 14px 15px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.025);
    }
    .trust-row strong, .trust-row span { display: block; }
    .trust-row strong { font-size: .92rem; }
    .trust-row span { margin-top: 4px; color: var(--muted); font-size: .78rem; }

    .hero-visual { position: relative; min-height: 580px; display: grid; place-items: center; }
    .visual-glow {
      position: absolute;
      width: 76%; aspect-ratio: 1;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(0,140,255,.23), transparent 67%);
      filter: blur(12px);
    }
    .logo-stage {
      position: relative;
      width: min(600px, 100%);
      padding: 15px;
      overflow: hidden;
      border: 1px solid rgba(65,174,255,.2);
      border-radius: 30px;
      background: linear-gradient(145deg, rgba(14,30,50,.9), rgba(4,10,17,.7));
      box-shadow: 0 35px 100px rgba(0,0,0,.5), inset 0 0 50px rgba(0,140,255,.04);
      transform: perspective(900px) rotateY(-7deg) rotateX(3deg);
    }
    .logo-stage::before {
      content: ""; position: absolute; inset: -1px;
      border-radius: inherit; pointer-events: none;
      background: linear-gradient(130deg, rgba(255,255,255,.17), transparent 30%, transparent 70%, rgba(0,140,255,.2));
    }
    .logo-stage img { width: 100%; border-radius: 20px; }


    .hero-strip {
      position: absolute; z-index: 3;
      left: 0; bottom: 0; width: 100%;
      padding: 17px 0;
      overflow: hidden;
      border-block: 1px solid rgba(255,255,255,.08);
      background: rgba(4,10,18,.74);
      backdrop-filter: blur(10px);
    }
    .strip-track {
      width: max-content;
      display: flex; align-items: center; gap: 26px;
      color: #cbdcec;
      font-size: .8rem; font-weight: 900;
      letter-spacing: .11em; text-transform: uppercase;
      animation: strip 25s linear infinite;
    }
    .strip-track i { color: var(--blue-bright); font-style: normal; }
    @keyframes strip { to { transform: translateX(-50%); } }

    .section { padding: 105px 0; }

    .intro-section { background: #f3f8fd; color: #0e1b2a; }
    .intro-grid { display: grid; grid-template-columns: .35fr 1.65fr; gap: 50px; }
    .section-label {
      color: #4e6375;
      font-size: .78rem; font-weight: 900;
      letter-spacing: .18em; text-transform: uppercase;
    }
    .display-heading, .section-heading :is(h1, h2), .solutions-copy h2, .about-copy :is(h1, h2), .contact-copy :is(h1, h2) {
      margin: 0;
      font-size: clamp(2.7rem, 5.6vw, 5.5rem);
      line-height: .98;
      letter-spacing: -.06em;
    }
    .large-copy {
      max-width: 900px;
      margin: 26px 0 0;
      color: #53697c;
      font-size: 1.14rem; line-height: 1.8;
    }

    .services-section {
      background:
        radial-gradient(circle at 0 20%, rgba(0,140,255,.09), transparent 25%),
        var(--bg);
    }
    .section-heading {
      display: flex;
      justify-content: space-between;
      align-items: end;
      gap: 40px;
      margin-bottom: 40px;
    }
    .section-heading :is(h1, h2) { max-width: 760px; margin-top: 12px; }
    .section-heading > p {
      max-width: 450px; margin: 0;
      color: var(--muted); line-height: 1.7;
    }

    .services-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 16px;
    }
    .service-card {
      position: relative;
      min-height: 340px;
      grid-column: span 4;
      display: flex; flex-direction: column;
      padding: 24px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: var(--panel);
      transition: border-color .28s ease, background-color .28s ease;
    }
    .service-card:hover { border-color: rgba(40,181,255,.4); background: var(--panel-2); }
    .service-featured { grid-column: span 8; }
    .service-number { color: #637d95; font-size: .76rem; font-weight: 900; }
    .service-icon {
      width: 55px; height: 55px;
      display: grid; place-items: center;
      margin: 40px 0 18px;
      border: 1px solid rgba(67,183,255,.32);
      border-radius: 16px;
      background: rgba(0,140,255,.12);
      color: var(--blue-soft);
      font-weight: 1000;
    }
    .service-card h3 { margin: 0 0 11px; font-size: 1.55rem; }
    .service-card p { margin: 0; color: #9fb2c4; line-height: 1.65; }
    .service-card > a {
      margin-top: auto;
      padding-top: 20px;
      color: var(--blue-soft);
      text-decoration: none; font-weight: 900;
    }

    .work-section { background: #eff5fa; color: #0d1b29; }
    .work-section .eyebrow { color: #0878d8; }
    .work-section .section-heading > p { color: #5f7487; }
    .work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
    .project-card {
      padding: 16px;
      border-radius: 26px;
      background: #fff;
      box-shadow: 0 20px 50px rgba(26,53,77,.08);
    }
    .browser {
      overflow: hidden;
      border-radius: 17px;
      background: #0b1521;
      box-shadow: 0 20px 40px rgba(0,0,0,.12);
    }
    .browser-bar {
      height: 42px;
      display: flex; align-items: center; gap: 6px;
      padding: 0 13px;
      background: #1c2836;
      color: #8193a5;
      font-size: .67rem;
    }
    .browser-bar i {
      width: 8px; height: 8px; border-radius: 50%;
      background: #ff6a6a;
    }
    .browser-bar i:nth-child(2) { background: #f5c647; }
    .browser-bar i:nth-child(3) { background: #55d98f; }
    .browser-bar span { margin-left: 7px; }
    .browser-screen {
      position: relative;
      min-height: 310px;
      display: flex; flex-direction: column; justify-content: center;
      padding: 32px;
      overflow: hidden;
    }
    .restaurant-screen {
      background:
        radial-gradient(circle at 78% 25%, rgba(255,183,68,.35), transparent 26%),
        linear-gradient(145deg, #431c13, #1d0c09);
    }
    .roadside-screen {
      background:
        linear-gradient(120deg, rgba(0,0,0,.6), rgba(0,0,0,.1)),
        linear-gradient(145deg, #112638, #06101b);
    }
    .music-screen {
      background:
        radial-gradient(circle at 68% 20%, rgba(215,165,38,.35), transparent 25%),
        linear-gradient(145deg, #103b34, #06110f);
    }
    .mini-nav {
      position: absolute; top: 20px; left: 28px;
      color: #fff;
      font-size: .7rem;
      letter-spacing: .14em;
    }
    .mini-nav b { color: #ffb649; }
    .mini-hero small, .mini-hero strong, .mini-hero em { display: block; }
    .mini-hero small {
      color: #ffc865;
      font-size: .69rem; font-weight: 900;
      letter-spacing: .12em; text-transform: uppercase;
    }
    .mini-hero strong {
      max-width: 360px;
      margin: 8px 0 16px;
      color: #fff;
      font-size: clamp(2rem, 4vw, 3.2rem);
      line-height: .95;
      letter-spacing: -.055em; text-transform: uppercase;
    }
    .mini-hero em {
      width: fit-content;
      padding: 9px 13px;
      border-radius: 999px;
      background: #fff;
      color: #111;
      font-size: .7rem; font-style: normal; font-weight: 900;
    }
    .roadside-badge {
      position: absolute; right: 25px; top: 24px;
      color: var(--gold);
      font-size: 1.5rem; font-weight: 1000;
    }
    .waveform {
      position: absolute; right: 20px; bottom: 24px;
      height: 100px;
      display: flex; gap: 6px; align-items: center;
      opacity: .6;
    }
    .waveform i { width: 8px; border-radius: 8px; background: #e8bd43; }
    .waveform i:nth-child(1) { height: 30px; }
    .waveform i:nth-child(2) { height: 70px; }
    .waveform i:nth-child(3) { height: 50px; }
    .waveform i:nth-child(4) { height: 90px; }
    .waveform i:nth-child(5) { height: 42px; }
    .waveform i:nth-child(6) { height: 65px; }
    .waveform i:nth-child(7) { height: 28px; }
    .project-copy {
      display: flex; align-items: end; justify-content: space-between;
      gap: 20px;
      padding: 19px 8px 6px;
    }
    .project-type {
      color: #6c8295;
      font-size: .72rem; font-weight: 900;
      letter-spacing: .11em; text-transform: uppercase;
    }
    .project-copy h3 { margin: 5px 0 0; font-size: 1.5rem; }
    .project-copy a {
      color: #087bdc;
      text-decoration: none;
      font-size: .87rem; font-weight: 900;
    }
    .project-status {
      padding: 8px 11px;
      border-radius: 999px;
      background: #e4f6ee;
      color: #087348;
      font-size: .75rem; font-weight: 900;
    }
    .lab-visual {
      min-height: 352px;
      display: grid; place-items: center;
      padding: 28px;
      border-radius: 17px;
      background:
        radial-gradient(circle at 20% 20%, rgba(0,140,255,.16), transparent 30%),
        linear-gradient(145deg, #071320, #02070d);
    }
    .terminal {
      width: 100%; max-width: 520px;
      overflow: hidden;
      border: 1px solid rgba(80,170,255,.22);
      border-radius: 14px;
      background: rgba(1,8,14,.86);
      box-shadow: 0 20px 50px rgba(0,0,0,.35);
    }
    .terminal-head {
      height: 38px;
      display: flex; align-items: center; gap: 7px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(255,255,255,.08);
      background: #0b1622;
    }
    .terminal-head span {
      width: 9px; height: 9px; border-radius: 50%;
      background: #ff5b6e;
    }
    .terminal-head span:nth-child(2) { background: #f7c64b; }
    .terminal-head span:nth-child(3) { background: #2ee6a6; }
    .terminal code {
      display: block;
      padding: 23px;
      color: #b9d4e9;
      font-family: Consolas, "Courier New", monospace;
      line-height: 1.75;
    }
    .terminal b { color: #42baff; }
    .terminal em { color: #8aa1b7; font-style: normal; }
    .terminal strong { color: #42e9a9; }

    .solutions-section {
      background:
        radial-gradient(circle at 100% 20%, rgba(0,140,255,.11), transparent 26%),
        #06101b;
    }
    .solutions-layout {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 60px;
      align-items: start;
    }
    .solutions-copy > p:not(.eyebrow) {
      max-width: 720px;
      color: var(--muted);
      line-height: 1.75;
    }
    .solution-points { display: grid; gap: 5px; margin-top: 30px; }
    .solution-points article {
      display: grid;
      grid-template-columns: 56px 1fr;
      gap: 15px;
      padding: 20px 0;
      border-bottom: 1px solid var(--line);
    }
    .solution-points article > span {
      color: var(--blue-bright);
      font-size: .74rem; font-weight: 1000;
    }
    .solution-points h3 { margin: 0 0 7px; font-size: 1.15rem; }
    .solution-points p { margin: 0; color: var(--muted); line-height: 1.6; }
    .process-card {
      position: sticky; top: 115px;
      padding: 28px;
      border: 1px solid rgba(75,180,255,.22);
      border-radius: 26px;
      background:
        radial-gradient(circle at 90% 0%, rgba(0,140,255,.16), transparent 30%),
        linear-gradient(150deg, #0e2034, #081421);
      box-shadow: var(--shadow);
    }
    .process-card .eyebrow { margin-top: 0; }
    .process-card h3 { margin: 12px 0 26px; font-size: 2rem; }
    .process-card ol { margin: 0; padding: 0; list-style: none; }
    .process-card li {
      display: grid;
      grid-template-columns: 48px 1fr;
      gap: 13px;
      padding: 17px 0;
      border-top: 1px solid var(--line);
    }
    .process-card li > span {
      width: 35px; height: 35px;
      display: grid; place-items: center;
      border-radius: 10px;
      background: rgba(0,140,255,.11);
      color: var(--blue-soft);
      font-size: .72rem; font-weight: 1000;
    }
    .process-card strong, .process-card small { display: block; }
    .process-card small { margin-top: 5px; color: var(--muted); line-height: 1.5; }

    .about-section { background: #f1f6fb; color: #102032; }
    .about-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 70px;
      align-items: center;
    }
    .about-layout > * { min-width: 0; }
    .about-visual { position: relative; min-height: 610px; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; }
    .emblem-frame {
      width: min(480px, 90%);
      padding: 18px;
      border-radius: 35px;
      background: #07111f;
      box-shadow: 0 40px 80px rgba(21,49,77,.23);
      transform: rotate(-3deg);
    }
    .emblem-frame img { border-radius: 24px; }
    .credential-badge {
      position: absolute;
      min-width: 225px;
      padding: 14px 16px;
      border: 1px solid #dae5ee;
      border-radius: 15px;
      background: rgba(255,255,255,.94);
      box-shadow: 0 15px 40px rgba(20,49,76,.14);
    }
    .credential-badge strong, .credential-badge span { display: block; }
    .credential-badge strong { color: #087bdc; }
    .credential-badge span { margin-top: 4px; color: #63788b; font-size: .76rem; }
    .badge-a { left: 0; top: 90px; }
    .badge-b { right: 0; bottom: 85px; }
    .about-section .eyebrow { color: #087bdc; }
    .about-copy > p:not(.eyebrow) { color: #587083; line-height: 1.78; }
    .credentials {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 11px;
      margin: 27px 0;
    }
    .credentials > div {
      padding: 14px;
      border: 1px solid #d8e3ec;
      border-radius: 14px;
      background: rgba(255,255,255,.7);
    }
    .credentials strong, .credentials span { display: block; }
    .credentials span { margin-top: 4px; color: #6b8092; font-size: .78rem; }
    .text-link { color: #087bdc; text-decoration: none; font-weight: 900; }

    .cta-section { padding: 0 0 105px; background: #f1f6fb; }
    .cta-box {
      display: flex; align-items: center; justify-content: space-between;
      gap: 35px;
      padding: 55px;
      border-radius: 30px;
      background:
        radial-gradient(circle at 85% 10%, rgba(41,183,255,.27), transparent 25%),
        linear-gradient(145deg, #071b32, #06101c);
      box-shadow: 0 30px 70px rgba(24,55,83,.18);
    }
    .cta-box .eyebrow { margin: 0 0 10px; }
    .cta-box h2 {
      max-width: 760px; margin: 0;
      font-size: clamp(2.4rem, 5vw, 4.5rem);
      line-height: .98;
      letter-spacing: -.055em;
    }

    .contact-section {
      background:
        radial-gradient(circle at 5% 20%, rgba(0,140,255,.11), transparent 28%),
        #050a12;
    }
    .contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; }
    .contact-copy > p:not(.eyebrow) { color: var(--muted); line-height: 1.75; }
    .contact-details { display: grid; gap: 0; margin-top: 28px; }
    .contact-details > * {
      display: flex; justify-content: space-between;
      gap: 20px;
      padding: 17px 0;
      border-bottom: 1px solid var(--line);
      text-decoration: none;
    }
    .contact-details span { color: var(--muted); }
    .contact-form {
      padding: 28px;
      border: 1px solid rgba(81,178,255,.21);
      border-radius: 26px;
      background: linear-gradient(150deg, rgba(16,34,56,.9), rgba(7,16,28,.94));
      box-shadow: var(--shadow);
    }
    .form-header { margin-bottom: 25px; }
    .form-header span, .form-header strong { display: block; }
    .form-header span {
      color: var(--blue-soft);
      font-size: .72rem; font-weight: 900;
      letter-spacing: .16em;
    }
    .form-header strong { margin-top: 6px; font-size: 1.8rem; }
    .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    .contact-form label {
      display: grid; gap: 7px;
      margin-bottom: 14px;
      color: #d7e5f2;
      font-size: .87rem; font-weight: 800;
    }
    .contact-form input,
    .contact-form select,
    .contact-form textarea {
      width: 100%;
      border: 1px solid rgba(255,255,255,.13);
      border-radius: 12px;
      padding: 13px 14px;
      outline: none;
      background: rgba(0,0,0,.18);
      color: white;
    }
    .contact-form option { color: #111; }
    .contact-form input:focus,
    .contact-form select:focus,
    .contact-form textarea:focus {
      border-color: var(--blue);
      box-shadow: 0 0 0 4px rgba(0,140,255,.12);
    }
    .full-width { width: 100%; }
    .form-note { margin: 12px 0 0; color: #7890a5; font-size: .76rem; text-align: center; }

    .site-footer {
      padding: 50px 0 25px;
      border-top: 1px solid var(--line);
      background: #03070c;
    }
    .footer-top {
      display: grid;
      grid-template-columns: 1.2fr .7fr .7fr;
      gap: 45px;
      align-items: center;
    }
    .footer-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
    .footer-brand img {
      width: 62px; height: 62px;
      object-fit: cover; border-radius: 16px;
    }
    .footer-brand strong, .footer-brand span { display: block; }
    .footer-brand span { margin-top: 4px; color: var(--muted); font-size: .79rem; }
    .footer-nav, .footer-social { display: flex; flex-wrap: wrap; gap: 16px; }
    .footer-nav a, .footer-social a {
      color: #b9c9d8;
      text-decoration: none;
      font-size: .85rem; font-weight: 800;
    }
    .footer-bottom {
      display: flex; justify-content: space-between;
      gap: 25px;
      margin-top: 40px;
      padding-top: 20px;
      border-top: 1px solid var(--line);
      color: #687d91;
      font-size: .78rem;
    }

    .whatsapp-float {
      position: fixed; z-index: 80;
      right: 22px; bottom: 22px;
      width: 58px; height: 58px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: #25d366;
      color: #ffffff;
      text-decoration: none;
      font-size: .78rem; font-weight: 1000;
      box-shadow: 0 18px 40px rgba(0,0,0,.35);
      transition: .25s ease;
    }
    .whatsapp-float:hover { transform: translateY(-4px) scale(1.03); }
    .whatsapp-float svg { width: 30px; height: 30px; fill: #ffffff; }

    .js .reveal {
      opacity: 0; transform: translateY(24px);
      transition: opacity .7s ease, transform .7s ease;
    }
    .js .reveal.visible { opacity: 1; transform: translateY(0); }

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

    @media (max-width: 1050px) {
      .hero-layout, .solutions-layout, .about-layout, .contact-layout { grid-template-columns: 1fr; }
      .hero-visual { min-height: 520px; }
      .service-card, .service-featured { grid-column: span 6; }
      .process-card { position: static; }
      .footer-top { grid-template-columns: 1fr; }
    }

    @media (max-width: 780px) {
      .menu-button { display: block; }
      .nav-links {
        position: absolute;
        top: 82px; left: 0; right: 0;
        display: none;
        align-items: stretch;
        flex-direction: column;
        padding: 22px 4%;
        border-bottom: 1px solid var(--line);
        background: rgba(4,10,18,.98);
      }
      .nav-links.open { display: flex; }
      .hero { padding-top: 125px; }
      .hero h1 { font-size: clamp(3.1rem, 15vw, 5.2rem); }
      .trust-row { grid-template-columns: 1fr; }
      .hero-visual { min-height: 450px; }
      .section { padding: 75px 0; }
      .intro-grid { grid-template-columns: 1fr; gap: 24px; }
      .section-heading { align-items: start; flex-direction: column; }
      .service-card, .service-featured { grid-column: span 12; }
      .work-grid { grid-template-columns: 1fr; }
      .browser-screen { min-height: 270px; }
      .about-visual { min-height: 500px; }
      .credential-badge { min-width: 190px; }
      .credentials, .field-row { grid-template-columns: 1fr; }
      .cta-box { align-items: flex-start; flex-direction: column; padding: 34px 25px; }
      .contact-details > * { align-items: flex-start; flex-direction: column; gap: 5px; }
      .footer-bottom { flex-direction: column; }
    }

    @media (max-width: 520px) {
      .hero h1 { font-size: clamp(2.2rem, 11vw, 2.8rem); text-transform: none; }
      .brand span { display: none; }
      .hero-visual { min-height: 390px; }
      .logo-stage { transform: none; }
      .browser-screen { padding: 22px; }
      .project-copy { align-items: flex-start; flex-direction: column; }
      .badge-a { left: -5px; top: 40px; }
      .badge-b { right: -5px; bottom: 35px; }
    }

    /* Audits and ISO readiness */
    .audit-section {
      background:
        radial-gradient(circle at 88% 8%, rgba(0,140,255,.14), transparent 24%),
        linear-gradient(160deg, #071321, #040a12);
    }
    .audit-heading { margin-bottom: 36px; }
    .audit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 17px; }
    .audit-card {
      min-height: 390px;
      padding: 27px;
      border: 0;
      border-left: 3px solid var(--blue);
      border-radius: 0 18px 18px 0;
      background: rgba(255,255,255,.025);
      box-shadow: 0 22px 55px rgba(0,0,0,.18);
    }
    .audit-tag {
      display: inline-flex;
      padding: 7px 10px;
      border: 1px solid rgba(40,181,255,.25);
      border-radius: 999px;
      background: rgba(0,140,255,.08);
      color: var(--blue-soft);
      font-size: .69rem; font-weight: 1000;
      letter-spacing: .14em;
    }
    .audit-card h3 { margin: 23px 0 11px; font-size: 1.8rem; }
    .audit-card p { margin: 0; color: #a9bbcb; line-height: 1.7; }
    .audit-card ul {
      margin: 22px 0 0; padding: 0;
      display: grid; gap: 10px;
      list-style: none;
      color: #d0deea;
      font-size: .89rem;
    }
    .audit-card li::before {
      content: "✓"; margin-right: 10px;
      color: var(--green); font-weight: 1000;
    }
    .iso-panel {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 42px;
      margin-top: 22px;
      padding: 36px;
      border: 1px solid rgba(246,198,77,.24);
      border-radius: 28px;
      background:
        radial-gradient(circle at 12% 20%, rgba(246,198,77,.11), transparent 25%),
        linear-gradient(145deg, #121d29, #07111c);
    }
    .iso-copy .eyebrow { margin-top: 0; color: var(--gold); }
    .iso-copy h3 {
      margin: 12px 0;
      font-size: clamp(2rem, 4vw, 3.4rem);
      line-height: 1; letter-spacing: -.045em;
    }
    .iso-copy p:last-child { color: #a9b8c6; line-height: 1.75; }
    .iso-standards { display: grid; gap: 10px; }
    .iso-standards article {
      padding: 16px;
      border: 1px solid rgba(255,255,255,.09);
      border-radius: 14px;
      background: rgba(255,255,255,.035);
    }
    .iso-standards strong, .iso-standards span { display: block; }
    .iso-standards strong { color: var(--gold); }
    .iso-standards span {
      margin-top: 5px;
      color: #aebdca;
      line-height: 1.55; font-size: .86rem;
    }
    .deliverables-strip { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
    .deliverables-strip span {
      padding: 9px 12px;
      border: 1px solid rgba(46,230,166,.19);
      border-radius: 999px;
      background: rgba(46,230,166,.055);
      color: #bdf5e1;
      font-size: .76rem; font-weight: 850;
    }
    @media (max-width: 900px) {
      .audit-grid, .iso-panel { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .audit-card { min-height: auto; }
      .iso-panel { padding: 25px; }
    }

    /* Founder and technical leadership presentation */
    .founder-title {
      margin: 24px 0 18px;
      padding: 17px 18px;
      border-left: 4px solid #087bdc;
      border-radius: 0 14px 14px 0;
      background: rgba(8, 123, 220, .07);
    }
    .founder-title strong, .founder-title span { display: block; }
    .founder-title strong { color: #102032; font-size: 1.14rem; }
    .founder-title span { margin-top: 4px; color: #5f7487; font-size: .86rem; font-weight: 750; }
    .credential-intro {
      margin: 24px 0 10px !important;
      color: #23384b !important;
      font-size: .84rem; font-weight: 900;
      letter-spacing: .08em; text-transform: uppercase;
    }
    .portfolio-actions { display: grid; gap: 12px; }
    .credentials-disclaimer {
      max-width: 720px;
      margin: 0 !important;
      padding: 12px 14px;
      border: 1px solid #d6e2eb;
      border-radius: 12px;
      background: rgba(255,255,255,.68);
      color: #65798a !important;
      font-size: .78rem;
      line-height: 1.55 !important;
    }

    /* ===== Packages section (new) ===== */
    .packages-section {
      background:
        radial-gradient(circle at 10% 8%, rgba(0,140,255,.12), transparent 26%),
        linear-gradient(160deg, #06101c 0%, #040810 70%);
    }
    .packages-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 17px;
    }
    .package-audience + .package-audience {
      margin-top: 64px;
      padding-top: 48px;
      border-top: 1px solid var(--line);
    }
    .package-audience-heading { margin-bottom: 26px; }
    .package-audience-heading h3 {
      margin: 10px 0 14px;
      font-size: clamp(1.8rem, 3.2vw, 2.7rem);
      letter-spacing: -.03em;
    }
    .package-audience-heading > p:last-child,
    .package-pricing-note { color: var(--muted); line-height: 1.75; }
    .package-audience-heading > p:last-child { max-width: 760px; }
    .packages-grid-sme { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .package-pricing-note { margin: 24px 0 0; font-size: .85rem; }
    .package-card {
      position: relative;
      display: flex; flex-direction: column;
      padding: 27px;
      border: 1px solid var(--line);
      border-radius: 18px;
      background: linear-gradient(145deg, rgba(16,34,56,.92), rgba(6,15,26,.96));
      transition: .28s ease;
    }
    .package-card:hover {
      border-color: rgba(40,181,255,.42);
      transform: translateY(-5px);
      box-shadow: 0 28px 60px rgba(0,0,0,.28);
    }
    .package-card.package-featured {
      border-top: 3px solid var(--gold);
      border-color: rgba(246,198,77,.35);
      background:
        radial-gradient(circle at 88% 8%, rgba(246,198,77,.11), transparent 30%),
        linear-gradient(145deg, #121d29, #07111c);
    }
    .package-tag {
      display: inline-flex; width: fit-content;
      padding: 7px 10px;
      border: 1px solid rgba(40,181,255,.25);
      border-radius: 999px;
      background: rgba(0,140,255,.08);
      color: var(--blue-soft);
      font-size: .69rem; font-weight: 1000;
      letter-spacing: .14em; text-transform: uppercase;
    }
    .package-featured .package-tag {
      border-color: rgba(246,198,77,.3);
      background: rgba(246,198,77,.08);
      color: var(--gold);
    }
    .package-card h4 { margin: 20px 0 8px; font-size: 1.5rem; }
    .package-card > p { margin: 0; color: #a9bbcb; line-height: 1.65; font-size: .93rem; }
    .package-price {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
      margin: 20px 0 16px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--line);
    }
    .package-price strong {
      font-size: clamp(2.4rem, 4vw, 3rem); font-weight: 1000;
      letter-spacing: -.03em;
      color: #fff;
    }
    .package-price small { color: var(--muted); font-size: .8rem; font-weight: 800; }
    .package-meta {
      display: flex; gap: 16px;
      margin-bottom: 16px;
      color: var(--muted);
      font-size: .78rem; font-weight: 800;
    }
    .package-meta span { display: flex; align-items: center; gap: 6px; }
    .package-meta i { color: var(--blue-soft); font-style: normal; }
    .package-card ul {
      margin: 0 0 22px; padding: 0;
      display: grid; gap: 9px;
      list-style: none;
      color: #d0deea;
      font-size: .87rem;
    }
    .package-card li::before {
      content: "✓"; margin-right: 9px;
      color: var(--green); font-weight: 1000;
    }
    .package-cta {
      margin-top: auto;
      width: 100%;
      min-height: 46px;
      display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(40,181,255,.4);
      border-radius: 999px;
      background: rgba(0,140,255,.1);
      color: #eafbff;
      text-decoration: none;
      font-weight: 900;
      transition: .25s ease;
    }
    .package-cta:hover {
      background: linear-gradient(100deg, #008cff, #22b9ff);
      border-color: transparent;
      transform: translateY(-2px);
    }
    .package-cta:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
    .package-cta.primary {
      background: linear-gradient(100deg, #008cff, #22b9ff);
      border-color: transparent;
      box-shadow: 0 13px 35px rgba(0,140,255,.25);
    }

    /* Retainer banner */
    .retainer-banner {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 36px;
      align-items: center;
      margin-top: 22px;
      padding: 36px;
      border: 1px solid rgba(46,230,166,.26);
      border-radius: 28px;
      background:
        radial-gradient(circle at 12% 20%, rgba(46,230,166,.1), transparent 28%),
        linear-gradient(145deg, #0b1f2b, #071119);
    }
    .retainer-copy .eyebrow { margin-top: 0; color: var(--green); }
    .retainer-copy h4 {
      margin: 12px 0 14px;
      font-size: clamp(1.9rem, 3.6vw, 3rem);
      line-height: 1;
      letter-spacing: -.04em;
    }
    .retainer-copy p { color: #a9b8c6; line-height: 1.75; }
    .retainer-list {
      display: grid; gap: 10px;
      margin: 0; padding: 0;
      list-style: none;
      color: #d0deea;
      font-size: .9rem;
    }
    .retainer-list li::before {
      content: "✓"; margin-right: 10px;
      color: var(--green); font-weight: 1000;
    }
    .retainer-banner .package-cta { margin-top: 22px; }
    .retainer-price {
      margin-top: 18px;
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
    }
    .retainer-price strong { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 1000; color: #fff; letter-spacing: -.03em; }
    .retainer-price small { color: var(--muted); font-size: .85rem; font-weight: 800; }
    .retainer-price-note { color: var(--muted); font-size: .78rem; margin-top: 4px; }

    @media (max-width: 1050px) {
      .packages-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 900px) {
      .retainer-banner { grid-template-columns: 1fr; }
    }
    @media (max-width: 700px) {
      .packages-grid { grid-template-columns: 1fr; }
      .retainer-banner { padding: 24px; gap: 24px; }
    }

    .page-content { padding-top: 90px; }

    .pillars-strip { padding-block: 70px; }
    .pillars-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
    .pillar-card { display: flex; flex-direction: column; align-items: flex-start; }
    .pillar-card .service-icon { margin: 0 0 20px; }
    .pillar-card h2 { margin: 0 0 12px; font-size: 1.35rem; letter-spacing: -.025em; }
    .pillar-card p { margin: 0 0 24px; color: var(--muted); line-height: 1.7; }
    .pillar-card .text-link { margin-top: auto; color: var(--blue-soft); }
    .proof-band { border-block: 1px solid var(--line); padding-block: 28px; }
    .proof-layout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; text-align: center; }
    .proof-layout p { margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.7; }
    @media (max-width: 780px) {
      .pillars-layout, .proof-layout { grid-template-columns: 1fr; gap: 32px; }
      .pillars-strip { padding-block: 55px; }
      .proof-layout { gap: 20px; }
    }

    .service-card .service-icon { margin: 0 0 18px; }
    .service-card .service-number { margin-bottom: 12px; }
    .service-scope-section { padding-top: 0; }
    .service-scopes { display: grid; gap: 0; }
    .service-scope { padding-block: 20px; border-bottom: 1px solid var(--line); }
    .service-scope summary { cursor: pointer; font-weight: 800; color: var(--blue-soft); }
    .service-scope ul { padding-left: 22px; color: var(--text); line-height: 1.8; }
    .service-scope p { color: var(--muted); line-height: 1.7; }
    .package-price strong { max-width: 100%; overflow-wrap: anywhere; }
    .package-card > p { margin-bottom: 18px; }
    .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

    .pricing-terms { margin-top: 24px; color: var(--muted); }
    .pricing-terms summary { cursor: pointer; color: var(--text); font-size: .9rem; }
    .pricing-terms[open] summary { margin-bottom: 12px; }
    .pricing-terms .package-pricing-note { margin-top: 0; }
    .reviews-band { background: #eff5fa; color: #0d1b29; }
    .reviews-band h2 { margin: 0 0 24px; font-size: clamp(2.4rem, 5vw, 4rem); letter-spacing: -.05em; }
    .reviews-band p { max-width: 900px; margin: 0 0 28px; color: #53697c; line-height: 1.8; }
    .reviews-links { display: flex; flex-wrap: wrap; gap: 14px; }