:root, [data-theme="light"] {
      --text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.875rem);
      --text-sm: clamp(0.875rem, 0.82rem + 0.2vw, 1rem);
      --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.125rem);
      --text-lg: clamp(1.125rem, 1rem + 0.7vw, 1.45rem);
      --text-xl: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
      --text-2xl: clamp(2.25rem, 1.25rem + 3vw, 4rem);

      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
      --space-5: 1.25rem;
      --space-6: 1.5rem;
      --space-8: 2rem;
      --space-10: 2.5rem;
      --space-12: 3rem;
      --space-16: 4rem;
      --space-20: 5rem;

      --color-bg: #f4f9ff;
      --color-surface: #ffffff;
      --color-surface-2: #eef5fc;
      --color-surface-offset: #e4eef8;
      --color-border: rgba(19, 51, 88, 0.12);
      --color-divider: rgba(19, 51, 88, 0.09);
      --color-text: #122640;
      --color-text-muted: #62748d;
      --color-text-faint: #90a3b9;
      --color-primary: #153a63;
      --color-primary-hover: #0f2c4a;
      --color-primary-soft: rgba(21, 58, 99, 0.08);
      --color-accent: #f1bd52;
      --color-accent-soft: rgba(241, 189, 82, 0.18);
      --color-white: #ffffff;

      --radius-sm: 0.5rem;
      --radius-md: 0.85rem;
      --radius-lg: 1.2rem;
      --radius-xl: 1.6rem;
      --radius-full: 999px;

      --shadow-sm: 0 8px 24px rgba(18, 38, 64, 0.06);
      --shadow-md: 0 18px 42px rgba(18, 38, 64, 0.1);
      --shadow-lg: 0 28px 70px rgba(18, 38, 64, 0.14);
      --ease: cubic-bezier(0.16, 1, 0.3, 1);
      --content: 1180px;
      --font-body: 'Satoshi', Inter, sans-serif;
      --font-display: 'Satoshi', Inter, sans-serif;
    }

    [data-theme="dark"] {
      --color-bg: #0e1622;
      --color-surface: #151f2d;
      --color-surface-2: #1a2534;
      --color-surface-offset: #233145;
      --color-border: rgba(233, 242, 252, 0.1);
      --color-divider: rgba(233, 242, 252, 0.08);
      --color-text: #edf5fd;
      --color-text-muted: #acbed1;
      --color-text-faint: #8699ae;
      --color-primary: #85b7ef;
      --color-primary-hover: #9cc5f4;
      --color-primary-soft: rgba(133, 183, 239, 0.12);
      --color-accent: #f2c55d;
      --color-accent-soft: rgba(242, 197, 93, 0.14);
      --color-white: #0f1d2d;
      --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.22);
      --shadow-md: 0 18px 42px rgba(0, 0, 0, 0.28);
      --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.35);
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
    body {
      min-height: 100vh;
      font-family: var(--font-body);
      font-size: var(--text-base);
      line-height: 1.6;
      color: var(--color-text);
      background:
        radial-gradient(circle at top left, rgba(241,189,82,0.12), transparent 22%),
        radial-gradient(circle at bottom right, rgba(95,149,214,0.12), transparent 18%),
        var(--color-bg);
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
    img, svg { display: block; max-width: 100%; height: auto; }
    :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); }

    .container { width: min(calc(100% - 1.2rem), var(--content)); margin-inline: auto; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 70;
      background: color-mix(in srgb, var(--color-bg) 90%, transparent);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid transparent;
      transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease);
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }

    .header-actions .ghost-btn { display: none; }

    .site-header.scrolled {
      border-color: var(--color-divider);
      box-shadow: var(--shadow-sm);
    }
    .header-inner {
      min-height: 4.8rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      gap: 0.1rem;
      font-size: 1.5rem;
      font-weight: 900;
      letter-spacing: -0.03em;
    }
    .brand-logo-img {
        width: 40px;     
        height: auto;
        display: block;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      width: 0.48rem;
      height: 0.22rem;
      background: var(--color-primary);
      border-radius: 999px;
      right: -0.28rem;
      top: 0.16rem;
      transform: rotate(-18deg);
    }

    .header-right { display: flex; align-items: center; gap: var(--space-3); }
    .site-nav { display: flex; align-items: center; gap: 0.35rem; }
    .site-nav a,
    .footer-nav a {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0.72rem 1rem;
      border-radius: var(--radius-md);
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-text-muted);
      transition: background 180ms var(--ease), color 180ms var(--ease), transform 180ms var(--ease);
    }
    .site-nav a:hover,
    .site-nav a.active {
      background: var(--color-primary-soft);
      color: var(--color-primary);
    }

    .nav-toggle,
    .theme-toggle,
    .btn,
    .btn-outline {
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 0.9rem;
      transition: transform 180ms var(--ease), background 180ms var(--ease), box-shadow 180ms var(--ease), color 180ms var(--ease);
    }
    .nav-toggle,
    .theme-toggle {
      width: 2.8rem;
      aspect-ratio: 1;
      border: 1px solid var(--color-border);
      background: var(--color-surface);
      box-shadow: var(--shadow-sm);
      color: var(--color-primary);
    }
    .theme-toggle svg { width: 1.1rem; height: 1.1rem; }
    .nav-toggle { display: none; position: relative; }
    .nav-toggle span,
    .nav-toggle::before,
    .nav-toggle::after {
      content: "";
      position: absolute;
      width: 1rem;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 180ms var(--ease), opacity 180ms var(--ease);
    }
    .nav-toggle::before { transform: translateY(-0.35rem); }
    .nav-toggle::after { transform: translateY(0.35rem); }
    .nav-toggle[aria-expanded="true"] span { opacity: 0; }
    .nav-toggle[aria-expanded="true"]::before { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"]::after { transform: rotate(-45deg); }

    .nav-wrap {
      display: flex;
      align-items: center;
      gap: var(--space-4);
    }

    .btn,
    .btn-outline {
      padding: 0.86rem 1.2rem;
      font-size: var(--text-sm);
      font-weight: 700;
      gap: 0.5rem;
    }
    .btn {
      background: var(--color-primary);
      color: white;
      box-shadow: var(--shadow-sm);
    }
    .btn:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-md); }
    .btn-outline {
      background: var(--color-surface);
      color: var(--color-primary);
      border: 1px solid var(--color-border);
    }
    .btn-outline:hover { background: var(--color-primary-soft); }
    .btn:hover,
    .btn-outline:hover,
    .theme-toggle:hover,
    .nav-toggle:hover,
    .site-nav a:hover,
    .footer-nav a:hover { transform: translateY(-1px); }
    .btn:active,
    .btn-outline:active,
    .theme-toggle:active,
    .nav-toggle:active,
    .site-nav a:active,
    .footer-nav a:active { transform: translateY(0); }

    main { padding-block: clamp(var(--space-6), 4vw, var(--space-10)) 0; }
    .stack { display: grid; gap: clamp(var(--space-8), 4vw, var(--space-12)); }
    .panel {
      position: relative;
      overflow: hidden;
      background: color-mix(in srgb, var(--color-surface) 88%, transparent);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow-sm);
      padding: clamp(var(--space-5), 3vw, var(--space-8));
    }
    .section-head {
      text-align: center;
      margin-bottom: var(--space-6);
    }
    .section-head h2 {
      font-size: var(--text-xl);
      letter-spacing: -0.04em;
      margin-bottom: 0.2rem;
    }
    .section-head p { color: var(--color-text-muted); }

    .hero {
      min-height: min(100svh - 6.5rem, 860px);
      display: grid;
      align-items: center;
      background:
        radial-gradient(circle at 15% 14%, rgba(241,189,82,0.16), transparent 18%),
        radial-gradient(circle at 86% 24%, rgba(95,149,214,0.16), transparent 18%),
        linear-gradient(180deg, color-mix(in srgb, var(--color-surface) 84%, white), var(--color-surface-offset));
    }
    .hero-inner {
      display: grid;
      grid-template-columns: 1.05fr 0.95fr;
      gap: clamp(var(--space-6), 5vw, var(--space-10));
      align-items: center;
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.45rem 0.8rem;
      border-radius: var(--radius-full);
      background: var(--color-accent-soft);
      color: var(--color-primary);
      font-size: var(--text-xs);
      font-weight: 800;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      margin-bottom: var(--space-4);
    }
    .eyebrow::before {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      border-radius: 50%;
      background: var(--color-accent);
    }
    .hero-copy h1 {
      font-size: var(--text-2xl);
      line-height: 0.98;
      letter-spacing: -0.05em;
      max-width: 10ch;
    }
    .hero-copy p {
      margin-top: var(--space-4);
      color: var(--color-text-muted);
      max-width: 52ch;
    }
    .hero-actions {
      margin-top: var(--space-6);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-3);
    }

    .hero-visual {
      min-height: 360px;
      position: relative;
      display: grid;
      place-items: center;
    }
    .placeholder-stage {
      position: relative;
      width: 100%;
      max-width: 520px;
      aspect-ratio: 1.18 / 0.9;
      border-radius: calc(var(--radius-xl) - 0.2rem);
      border: 2px dashed rgba(21, 58, 99, 0.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,0.42), rgba(219,233,246,0.3)),
        repeating-linear-gradient(135deg, transparent 0 18px, rgba(21,58,99,0.04) 18px 36px);
      overflow: hidden;
      isolation: isolate;
    }
    .placeholder-box {
      position: absolute;
      inset: 12% 12%;
      border-radius: 1.2rem;
      border: 2px dashed rgba(21, 58, 99, 0.24);
      background: rgba(255,255,255,0.24);
      backdrop-filter: blur(4px);
      display: grid;
      place-items: center;
      text-align: center;
      padding: var(--space-6);
      color: var(--color-text-muted);
      font-weight: 800;
      letter-spacing: 0.02em;
      animation: floatY 5s var(--ease) infinite alternate;
    }
    .placeholder-box small {
      display: block;
      margin-top: 0.45rem;
      color: var(--color-text-faint);
      font-size: var(--text-xs);
      font-weight: 700;
    }
    .floating,
    .gear {
      position: absolute;
      pointer-events: none;
      opacity: 0.95;
    }
    .floating {
      width: 4rem;
      height: 0.45rem;
      border-radius: 999px;
      background: linear-gradient(90deg, #9db3cb, var(--color-accent));
      animation: drift 7s ease-in-out infinite alternate;
    }
    .tool-1 { top: 16%; left: 8%; transform: rotate(-38deg); }
    .tool-2 { right: 10%; bottom: 18%; transform: rotate(34deg); animation-delay: -2s; }
    .gear {
      border-radius: 50%;
      border: 0.36rem solid rgba(110, 148, 190, 0.28);
      background: rgba(255,255,255,0.56);
      animation: spin 16s linear infinite;
    }
    .gear-1 { width: 3.3rem; height: 3.3rem; top: 1.2rem; right: 1rem; }
    .gear-2 { width: 2.4rem; height: 2.4rem; left: 2.4rem; bottom: 1.8rem; animation-direction: reverse; animation-duration: 12s; }

    .services-grid,
    .team-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-4);
    }
    .card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      box-shadow: var(--shadow-sm);
      transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease);
      content-visibility: auto;
    }
    .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
    .card-visual {
      aspect-ratio: 1.34 / 0.9;
      border-radius: 1rem;
      border: 2px dashed rgba(21,58,99,0.16);
      background:
        radial-gradient(circle at top right, rgba(241,189,82,0.22), transparent 28%),
        radial-gradient(circle at bottom left, rgba(95,149,214,0.18), transparent 28%),
        linear-gradient(180deg, var(--color-surface-2), var(--color-surface-offset));
      position: relative;
      overflow: hidden;
      margin-bottom: var(--space-4);
    }
    .card-visual span {
      position: absolute;
      left: 1rem;
      bottom: 1rem;
      padding: 0.45rem 0.75rem;
      border-radius: var(--radius-full);
      background: rgba(255,255,255,0.74);
      border: 1px solid rgba(21,58,99,0.1);
      color: var(--color-primary);
      font-size: var(--text-xs);
      font-weight: 800;
    }
    .card h3 {
      font-size: 1.14rem;
      letter-spacing: -0.03em;
      margin-bottom: 0.25rem;
    }
    .card p { color: var(--color-text-muted); font-size: var(--text-sm); }

    .team-card { text-align: center; position: relative; }
    .team-badge {
      width: 2.4rem;
      height: 2.4rem;
      border-radius: 50%;
      position: absolute;
      top: 0.9rem;
      right: 0.9rem;
      display: grid;
      place-items: center;
      background: var(--color-accent-soft);
      color: var(--color-primary);
      font-size: 1.1rem;
    }
    .avatar {
      width: 6.25rem;
      aspect-ratio: 1;
      margin: 2rem auto 1rem;
      border-radius: 50%;
      border: 5px solid rgba(226,237,248,0.84);
      background:
        radial-gradient(circle at 50% 30%, #ffd8bf 0 19%, transparent 20%),
        radial-gradient(circle at 50% 72%, #6c99ca 0 33%, transparent 34%),
        linear-gradient(180deg, #bed7ef, #eaf2fb);
      position: relative;
      overflow: hidden;
    }
    .avatar::before {
      content: "";
      position: absolute;
      inset: 18% 26% 46% 26%;
      border-radius: 50% 50% 35% 35%;
      background: #2a4362;
    }
    .avatar::after {
      content: "";
      position: absolute;
      inset: 31% 35% 24% 35%;
      border-radius: 40% 40% 45% 45%;
      background: rgba(255,255,255,0.18);
      backdrop-filter: blur(3px);
    }

    .contact-grid {
      display: grid;
      grid-template-columns: 1.25fr 0.75fr;
      gap: var(--space-4);
      align-items: center;
    }
    .map-box {
        width: 100%;
        height: 350px; /* Adjust the height to match your desktop design layout */
        border-radius: 12px;
        overflow: hidden; /* Ensures the sharp corners of the iframe match the border-radius */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }

    .map-box iframe {
        width: 100%;
        height: 100%;
        display: block;
    }
    .map-pin {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 4.4rem;
      height: 4.4rem;
      border-radius: 50% 50% 50% 0;
      rotate: -45deg;
      background: var(--color-primary);
      box-shadow: var(--shadow-md);
    }
    .map-pin::before {
      content: "T";
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      rotate: 45deg;
      color: white;
      font-size: 1.4rem;
      font-weight: 900;
    }
    .contact-side {
      display: grid;
      justify-items: center;
      text-align: center;
      gap: var(--space-4);
    }
    .phone-icon {
      width: 5.4rem;
      aspect-ratio: 1;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: radial-gradient(circle, rgba(255,255,255,0.86), rgba(190,216,242,0.65));
      color: var(--color-primary);
      box-shadow: var(--shadow-sm);
      font-size: 1.9rem;
    }
    .contact-side p { color: var(--color-text-muted); max-width: 22ch; }

    .site-footer {
      margin-top: clamp(var(--space-8), 4vw, var(--space-12));
      background:
        radial-gradient(circle at right top, rgba(241,189,82,0.12), transparent 18%),
        linear-gradient(135deg, #10243f, #143761 60%, #0b1b30);
      color: rgba(248,251,255,0.92);
      border-top-left-radius: 2rem;
      border-top-right-radius: 2rem;
    }
    .footer-inner { padding: var(--space-8) 0 var(--space-6); }
    .footer-top,
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-4);
      flex-wrap: wrap;
    }
    .footer-top {
      padding-bottom: var(--space-5);
      border-bottom: 1px solid rgba(255,255,255,0.14);
    }
    .footer-brand {
      display: inline-flex;
      align-items: center;
      gap: 0.1rem;
      font-size: 1.85rem;
      font-weight: 900;
      letter-spacing: -0.04em;
    }
    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3rem;
    }
    .footer-nav a { color: rgba(248,251,255,0.76); }
    .footer-nav a:hover { color: white; background: rgba(255,255,255,0.08); }
    .footer-bottom {
      padding-top: var(--space-5);
      color: rgba(248,251,255,0.72);
      font-size: var(--text-sm);
    }

    .spark {
      width: 3.4rem;
      height: 3.4rem;
      position: relative;
      animation: pulse 4.5s ease-in-out infinite;
    }
    .spark::before,
    .spark::after {
      content: "";
      position: absolute;
      inset: 0;
      margin: auto;
      background: rgba(255,255,255,0.84);
      border-radius: 999px;
    }
    .spark::before { width: 0.42rem; height: 3.3rem; }
    .spark::after { width: 3.3rem; height: 0.42rem; }

    .reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity 800ms var(--ease), transform 800ms var(--ease);
      transition-delay: var(--delay, 0ms);
    }
    .reveal.is-visible { opacity: 1; transform: translateY(0); }

    @keyframes floatY { from { transform: translateY(-8px); } to { transform: translateY(10px); } }
    @keyframes drift { from { translate: 0 0; } to { translate: 0.5rem -0.45rem; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes pulse {
      0%,100% { transform: scale(0.95) rotate(0deg); opacity: 0.7; }
      50% { transform: scale(1.04) rotate(45deg); opacity: 1; }
    }

    @media (max-width: 1024px) {
      .hero-inner,
      .contact-grid { grid-template-columns: 1fr; }
      .services-grid,
      .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hero { min-height: auto; }
      .hero-copy h1 { max-width: 12ch; }
    }

    @media (max-width: 820px) {
      .nav-toggle { display: inline-flex; }
      .site-nav {
        position: absolute;
        top: calc(100% + 0.7rem);
        left: 0.6rem;
        right: 0.6rem;
        display: grid;
        padding: 0.75rem;
        gap: 0.3rem;
        background: color-mix(in srgb, var(--color-surface) 95%, transparent);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-md);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 220ms var(--ease), transform 220ms var(--ease);
      }
      .site-nav.open {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }
      .header-right .btn-outline { display: none; }
    }

    @media (max-width: 640px) {
      .container { width: min(calc(100% - 0.8rem), var(--content)); }
      .header-inner { min-height: 4.3rem; }
      .header-actions { width: 100%; }
      .hero-copy h1 { max-width: 9ch; }
      .services-grid,
      .team-grid { grid-template-columns: 1fr; }
      .hero-actions,
      .footer-top,
      .footer-bottom { align-items: flex-start; }
      .header-right { gap: 0.45rem; }
      .header-right .btn { padding-inline: 0.95rem; }
      .hero-visual { min-height: 280px; }
      .placeholder-box { inset: 10%; }
      .panel { padding: var(--space-5); }
      .header-actions {
        margin-left: auto;
        width: auto;
      }
    }

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