/* ============================================================
   Smartcom Limited — Main Stylesheet
   Edit design tokens in Section 1 (:root) to change colours.
   All other values reference those tokens automatically.
============================================================ */

/* ============================================================
       1 — DESIGN TOKENS
       Change brand colours and fonts here once — updates everywhere.
    ============================================================ */
    :root {
      /* ── Brand colours (unchanged) ── */
      --green:        #006A4E;
      --green-lt:     #005C42;   /* darker for contrast on light bg */
      --red:          #E8112D;
      --red-lt:       #C8001F;   /* darker for contrast on light bg */

      /* ── Light theme surfaces ── */
      --white:        #1A1A1A;   /* primary text colour on light bg  */
      --surface:      #F8F9F8;   /* page background — warm light grey */
      --surface-2:    #EDEFED;   /* lifted sections                   */
      --surface-3:    #E3E8E3;   /* cards, inputs                     */

      /* ── Type ── */
      --ff-head:      'Syne', sans-serif;
      --ff-body:      'DM Sans', sans-serif;

      /* ── Shape ── */
      --r-sm:  4px;
      --r-md:  10px;
      --r-lg:  20px;

      /* ── Motion ── */
      --ease:  cubic-bezier(0.4, 0, 0.2, 1);
      --spring:cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* ============================================================
       2 — RESET
    ============================================================ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html   { scroll-behavior: smooth; font-size: 16px; }
    body   {
      font-family: var(--ff-body);
      background: var(--surface);
      color: var(--white);
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    a      { color: inherit; text-decoration: none; }
    ul     { list-style: none; }
    button { font-family: inherit; cursor: pointer; border: none; background: none; }
    img, svg { display: block; max-width: 100%; }
    h1,h2,h3,h4 { font-family: var(--ff-head); line-height: 1.1; letter-spacing: -0.02em; }

    .container {
      width: 100%;
      max-width: 1240px;
      margin-inline: auto;
      padding-inline: clamp(1.1rem, 5vw, 3.5rem);
    }

    ::-webkit-scrollbar       { width: 4px; }
    ::-webkit-scrollbar-track { background: #EDEFED; }
    ::-webkit-scrollbar-thumb { background: var(--green); border-radius: 99px; }
    ::-webkit-scrollbar-thumb:hover { background: var(--red); }
    ::selection { background: var(--red); color: var(--white); }

    /* ============================================================
       4 — SCROLL PROGRESS BAR
       Thin line at very top tracking scroll position.
    ============================================================ */
    .scroll-progress {
      position: fixed;
      top: 3px; /* sits just below flag stripe */
      left: 0;
      height: 2px;
      width: 0%;
      z-index: 999;
      background: linear-gradient(90deg, var(--green-lt), var(--red));
      transition: width 0.1s linear;
      pointer-events: none;
    }

    /* ============================================================
       5 — PAGE-LOAD ANIMATIONS
       .anim = hero elements fade+rise on load (body.loaded trigger)
       .reveal / .reveal-left / .reveal-right = scroll-triggered
    ============================================================ */
    .anim {
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.72s var(--spring), transform 0.72s var(--spring);
    }
    body.loaded .anim, .anim.visible { opacity: 1; transform: none; }
    .d1 { transition-delay: 0.05s; }
    .d2 { transition-delay: 0.20s; }
    .d3 { transition-delay: 0.35s; }
    .d4 { transition-delay: 0.50s; }

    .reveal       { opacity:0; transform:translateY(28px);   transition:opacity 0.65s var(--spring),transform 0.65s var(--spring); }
    .reveal-left  { opacity:0; transform:translateX(-32px);  transition:opacity 0.7s  var(--spring),transform 0.7s  var(--spring); }
    .reveal-right { opacity:0; transform:translateX(32px);   transition:opacity 0.7s  var(--spring),transform 0.7s  var(--spring); }
    .reveal.visible,.reveal-left.visible,.reveal-right.visible { opacity:1; transform:none; }
    .rd1{transition-delay:0s} .rd2{transition-delay:.1s} .rd3{transition-delay:.2s} .rd4{transition-delay:.3s}

    /* ============================================================
       6 — FLAG STRIPE
    ============================================================ */
    .flag-stripe {
      position: fixed; top:0; left:0; right:0; z-index:1001;
      display:flex; height:3px;
    }
    .flag-stripe span          { flex:1; }
    .flag-stripe span:nth-child(1) { background:var(--green); }
    .flag-stripe span:nth-child(2) { background:var(--white); }
    .flag-stripe span:nth-child(3) { background:var(--red);   }

    /* ============================================================
       7 — NAVBAR
    ============================================================ */
    .navbar {
      position: fixed; top:3px; left:0; right:0; z-index:1000;
      background: rgba(248,249,248,0.75);
      backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0,0,0,0.08);
      transform: translateY(-110%);
      transition: transform 0.65s var(--spring), background 0.3s var(--ease), box-shadow 0.3s var(--ease);
    }
    body.loaded .navbar { transform: translateY(0); }
    .navbar--scrolled {
      background: rgba(248,249,248,0.97);
      box-shadow: 0 4px 24px rgba(0,0,0,0.1);
    }
    .navbar__inner {
      display:flex; align-items:center; justify-content:space-between;
      height:66px; gap:2rem;
      transition: height 0.3s var(--ease);
    }
    .navbar--scrolled .navbar__inner { height:56px; }

    /* Brand */
    .navbar__brand { display:flex; align-items:center; gap:0.7rem; flex-shrink:0; }
    .navbar__logo-img { height:28px; width:auto; display:block; transition:opacity .2s var(--ease); }
    .navbar__brand:hover .navbar__logo-img { opacity:.82; }
    .logo-mark { width:18px; height:18px; border:2.5px solid rgba(255,255,255,.9); border-radius:50%; position:relative; }
    .logo-mark::after { content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:6px; height:6px; background:var(--white); border-radius:50%; }

    /* Desktop links */
    .navbar__nav { margin-left:auto; }
    .navbar__links { display:flex; align-items:center; gap:0.15rem; }
    .navbar__link {
      font-family:var(--ff-head); font-size:0.83rem; font-weight:600;
      color:rgba(26,26,26,.6); padding:0.42rem 0.78rem; border-radius:var(--r-sm);
      position:relative; transition:color 0.3s var(--ease);
    }
    .navbar__link::after {
      content:''; position:absolute; bottom:3px; left:50%;
      transform:translateX(-50%) scaleX(0);
      width:54%; height:2px; background:var(--green-lt); border-radius:99px;
      transition:transform 0.3s var(--ease);
    }
    .navbar__link:hover,.navbar__link.active { color:#1A1A1A; }
    .navbar__link:hover::after,.navbar__link.active::after { transform:translateX(-50%) scaleX(1); }
    .navbar__link.active::after { background:var(--red); }

    .navbar__cta {
      font-family:var(--ff-head); font-size:0.83rem; font-weight:700;
      color:#fff; background:var(--red);
      padding:0.42rem 1.05rem; border-radius:var(--r-sm); border:1.5px solid var(--red);
      position:relative; overflow:hidden;
      transition:box-shadow 0.3s var(--ease),transform 0.3s var(--ease);
    }
    .navbar__cta::before {
      content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
      background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-20deg); transition:left 0s; pointer-events:none;
    }
    .navbar__cta:hover::before { left:135%; transition:left 0.48s var(--ease); }
    .navbar__cta:hover { box-shadow:0 4px 16px rgba(200,0,31,.3); transform:translateY(-1px); }

    /* Hamburger */
    .navbar__hamburger {
      display:none; flex-direction:column; justify-content:center;
      gap:5px; width:34px; height:34px; padding:4px; border-radius:var(--r-sm);
      transition:background 0.3s var(--ease);
    }
    .navbar__hamburger:hover { background:rgba(255,255,255,.07); }
    .navbar__hamburger span {
      display:block; height:2px; background:#1A1A1A; border-radius:99px;
      transition:transform .32s ease,opacity .22s ease,width .22s ease; transform-origin:center;
    }
    .navbar__hamburger span:nth-child(2) { width:68%; }
    .navbar__hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .navbar__hamburger.open span:nth-child(2) { opacity:0; width:0; }
    .navbar__hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

    /* Mobile menu */
    .navbar__mobile-menu {
      display:none; max-height:0; overflow:hidden;
      background:rgba(248,249,248,.99); border-top:1px solid rgba(0,0,0,.08);
      transition:max-height 0.42s var(--ease);
    }
    /* ── Hamburger fix: never clip last item ──
       Use the full available viewport height minus navbar height.
       overflow-y:auto lets it scroll if items somehow overflow.    */
    .navbar__mobile-menu.open {
      max-height: calc(100dvh - 68px);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .navbar__mobile-links {
      display:flex; flex-direction:column;
      padding:0.75rem 0 2rem; /* extra bottom padding so last item breathes */
    }
    .navbar__mobile-link {
      font-family:var(--ff-head); font-weight:600; font-size:0.92rem;
      color:rgba(26,26,26,.65); padding:0.7rem 1.4rem;
      border-left:3px solid transparent;
      transition:color 0.3s var(--ease),border-color 0.3s var(--ease),background 0.3s var(--ease);
    }
    .navbar__mobile-link:hover,.navbar__mobile-link.active { color:#1A1A1A; background:rgba(0,106,78,.08); border-left-color:var(--green); }
    .navbar__mobile-link.contact { color:var(--red); }
    .navbar__mobile-link.contact:hover { border-left-color:var(--red); background:rgba(232,17,45,.07); }

    @media(max-width:820px) {
      .navbar__nav { display:none; }
      .navbar__hamburger { display:flex; }
      .navbar__mobile-menu { display:block; }
    }

    /* ============================================================
       8 — SHARED UTILITIES
    ============================================================ */
    /* Buttons — shimmer sweep on hover */
    .btn {
      display:inline-flex; align-items:center; gap:0.5rem;
      font-family:var(--ff-head); font-size:0.9rem; font-weight:700;
      letter-spacing:.025em; padding:0.72rem 1.55rem;
      border-radius:var(--r-sm); border:1.5px solid transparent;
      cursor:pointer; white-space:nowrap;
      position:relative; overflow:hidden;
      transition:box-shadow 0.3s var(--ease),transform 0.3s var(--ease),
                 background 0.3s var(--ease),color 0.3s var(--ease),border-color 0.3s var(--ease);
    }
    /* Shimmer pseudo-element — sweeps left→right on hover */
    .btn::before {
      content:'';
      position:absolute; top:0; left:-75%;
      width:50%; height:100%;
      background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);
      transform:skewX(-20deg);
      transition:left 0s; /* reset instantly when not hovered */
      pointer-events:none;
    }
    .btn:hover::before {
      left:135%;
      transition:left 0.52s var(--ease);
    }
    .btn--primary { background:var(--red); color:#fff; border-color:var(--red); }
    .btn--primary:hover {
      box-shadow:0 6px 22px rgba(200,0,31,.3);
      transform:translateY(-3px);
    }
    .btn__icon { width:16px; height:16px; transition:transform 0.3s var(--ease); flex-shrink:0; }
    .btn--primary:hover .btn__icon { transform:translateX(4px); }
    .btn--ghost { background:transparent; color:var(--red); border-color:var(--red); }
    .btn--ghost::before {
      background:linear-gradient(120deg,transparent 0%,rgba(232,17,45,.18) 50%,transparent 100%);
    }
    .btn--ghost:hover {
      background:rgba(232,17,45,.06);
      border-color:var(--red);
      box-shadow:0 6px 22px rgba(200,0,31,.15);
      transform:translateY(-3px);
      color:var(--red);
    }

    /* Section chrome */
    .eyebrow { font-family:var(--ff-head); font-size:0.68rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--green-lt); margin-bottom:.55rem; }
    .headline { font-family:var(--ff-head); font-size:clamp(1.5rem,4.2vw,3rem); font-weight:800; letter-spacing:-.025em; color:#1A1A1A; overflow-wrap:normal; word-break:keep-all; }
    .headline span { background:linear-gradient(90deg,var(--green-lt),var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .section { padding-block: clamp(3.5rem,8vw,6.5rem); }
    /* Offset so fixed navbar never covers section headings when scrolled-to */
    section[id] { scroll-margin-top: 72px; }
    .divider { display:flex; align-items:center; justify-content:center; gap:.65rem; margin-top:1.1rem; }
    .divider__line { width:44px; height:2px; border-radius:99px; }
    .divider__line--green { background:var(--green); }
    .divider__line--red   { background:var(--red);   }
    .divider__dot { width:5px; height:5px; border-radius:50%; background:rgba(0,0,0,.18); }

    /* ============================================================
       9 — HERO
    ============================================================ */
    .hero {
      position:relative;
      min-height: calc(100svh - 69px);
      display:flex; align-items:center; justify-content:center;
      overflow:hidden;
      padding-block: clamp(3rem,8vh,6rem);
    }
    .hero__bg { position:absolute; inset:0; pointer-events:none; z-index:0; }
    .hero__blob { position:absolute; border-radius:50%; filter:blur(140px); opacity:.07; }
    .hero__blob--green { width:min(60vw,680px); height:min(60vw,680px); background:var(--green); top:-18%; left:-12%; animation:blobFloat 14s ease-in-out infinite alternate; opacity:.06; }
    .hero__blob--red   { width:min(50vw,560px); height:min(50vw,560px); background:var(--red);   bottom:-15%; right:-8%; animation:blobFloat 18s ease-in-out infinite alternate-reverse; opacity:.06; }
    @keyframes blobFloat { from{transform:translate(0,0) scale(1)} to{transform:translate(28px,22px) scale(1.07)} }
    .hero__grid {
      position:absolute; inset:0;
      background-image:linear-gradient(rgba(0,0,0,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.04) 1px,transparent 1px);
      background-size:54px 54px;
      mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,black 25%,transparent 100%);
    }
    .hero__inner { position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.5rem; max-width:800px; width:100%; }
    .hero__badge {
      display:inline-flex; align-items:center; gap:.6rem;
      font-family:var(--ff-head); font-size:0.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--green-lt);
      background:rgba(0,135,95,.08); border:1px solid rgba(0,135,95,.28); padding:.42rem 1.3rem; border-radius:999px;
      animation:badgePulse 3.5s ease-in-out infinite;
    }
    @keyframes badgePulse { 0%,100%{box-shadow:0 0 14px rgba(0,135,95,.15)} 50%{box-shadow:0 0 28px rgba(0,135,95,.38)} }
    .hero__badge-dot { width:5px; height:5px; border-radius:50%; background:var(--green-lt); flex-shrink:0; animation:dotBlink 2.4s ease-in-out infinite; }
    .hero__badge-dot:last-child { animation-delay:1.2s; }
    @keyframes dotBlink { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.5)} }
    .hero__logo { display:flex; align-items:center; justify-content:center; margin-bottom:.25rem; }
    .hero__logo-img { width:clamp(240px,50vw,440px); height:auto; display:block; }
    @media(max-width:480px) { .hero__logo-img { width:clamp(200px,82vw,300px); } }
    .hero__about { font-size:clamp(.88rem,2.2vw,1rem); font-weight:300; color:rgba(26,26,26,.62); line-height:1.82; max-width:580px; }
    .hero__about strong { color:#1A1A1A; font-weight:500; }
    .hero__actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:.85rem; }
    .hero__fade { position:absolute; bottom:0; left:0; right:0; height:100px; z-index:2; pointer-events:none; background:linear-gradient(to bottom,transparent,#F8F9F8); }

    /* ============================================================
       10 — SERVICES
    ============================================================ */
    .services { background:var(--surface-2); border-top:1px solid rgba(0,0,0,.06); border-bottom:1px solid rgba(0,0,0,.06); }
    .services__header { text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
    .services__header .headline { max-width:520px; margin-inline:auto; }
    .services__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
    @media(max-width:960px){ .services__grid{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:480px){ .services__grid{grid-template-columns:1fr} }

    .svc-card {
      background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--r-md);
      padding:1.8rem 1.6rem 2.2rem; display:flex; flex-direction:column; gap:.9rem;
      position:relative; overflow:hidden;
      opacity:0; transform:translateY(26px);
      transition:opacity .55s ease,transform .55s ease,border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .svc-card.revealed { opacity:1; transform:translateY(0); }
    .svc-card.revealed:hover { transform:translateY(-5px); border-color:rgba(0,106,78,.3); box-shadow:0 12px 32px rgba(0,0,0,.1),0 0 20px rgba(0,106,78,.06); }
    .svc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--green),var(--red)); opacity:0; transition:opacity .3s var(--ease); }
    .svc-card.revealed:hover::before { opacity:1; }
    .svc-icon { width:46px; height:46px; border-radius:var(--r-sm); background:rgba(0,106,78,.1); border:1px solid rgba(0,106,78,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s var(--ease),border-color .3s var(--ease); }
    .svc-card.revealed:hover .svc-icon { background:rgba(0,106,78,.2); border-color:rgba(0,135,95,.38); }
    .svc-icon svg { width:21px; height:21px; stroke:var(--green-lt); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; transition:stroke .3s var(--ease); }
    .svc-card.revealed:hover .svc-icon svg { stroke:var(--white); }
    .svc-name { font-family:var(--ff-head); font-size:1rem; font-weight:700; color:var(--white); letter-spacing:-.01em; }
    .svc-desc { font-size:.855rem; font-weight:300; color:rgba(26,26,26,.58); line-height:1.68; }
    .svc-tag  { position:absolute; bottom:.9rem; right:1rem; font-family:var(--ff-head); font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,106,78,.35); transition:color .3s var(--ease); }
    .svc-card.revealed:hover .svc-tag { color:var(--green); }

    /* ============================================================
       11 — WHY CHOOSE US
    ============================================================ */
    .why { background:var(--surface); border-top:1px solid rgba(0,0,0,.06); }
    .why__header { text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
    .why__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
    @media(max-width:900px){ .why__grid{grid-template-columns:repeat(2,1fr)} }
    @media(max-width:460px){ .why__grid{grid-template-columns:1fr} }

    .why-card {
      background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--r-md);
      padding:1.8rem 1.5rem; display:flex; flex-direction:column; gap:.8rem;
      position:relative; overflow:hidden;
      opacity:0; transform:translateY(24px);
      transition:opacity .6s ease,transform .6s ease,border-color .3s var(--ease),box-shadow .3s var(--ease);
    }
    .why-card.revealed, .why-card.visible { opacity:1; transform:translateY(0); }
    .why-card.revealed:hover, .why-card.visible:hover { transform:translateY(-4px); border-color:rgba(0,106,78,.25); box-shadow:0 10px 28px rgba(0,0,0,.1); }
    /* Gradient number watermark */
    .why-card__num {
      position:absolute; top:.6rem; right:.8rem;
      font-family:var(--ff-head); font-size:4rem; font-weight:800;
      background:linear-gradient(135deg,rgba(0,106,78,.12),rgba(232,17,45,.08));
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      line-height:1; pointer-events:none; user-select:none;
    }
    .why-card__icon { width:44px; height:44px; border-radius:var(--r-sm); background:rgba(0,106,78,.1); border:1px solid rgba(0,106,78,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .3s var(--ease); }
    .why-card.revealed:hover, .why-card.visible:hover .why-card__icon { background:rgba(0,106,78,.2); }
    .why-card__icon svg { width:20px; height:20px; stroke:var(--green-lt); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
    .why-card__stat { font-family:var(--ff-head); font-size:2rem; font-weight:800; background:linear-gradient(90deg,var(--green-lt),var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
    .why-card__title { font-family:var(--ff-head); font-size:.95rem; font-weight:700; color:var(--white); }
    .why-card__desc  { font-size:.82rem; font-weight:300; color:rgba(26,26,26,.55); line-height:1.65; }

    /* ============================================================
       11b — CLIENTS
    ============================================================ */
    .clients { background:var(--surface-2); border-top:1px solid rgba(0,0,0,.06); }
    .clients__header { text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); }

    /* Grid — 3 columns desktop, 2 tablet, 1 mobile */
    .clients__grid {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:1.2rem;
      max-width:900px;
      margin-inline:auto;
    }
    @media(max-width:720px) { .clients__grid { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:420px) { .clients__grid { grid-template-columns:1fr 1fr; gap:.75rem; } }

    /* Each client card */
    .client-card {
      background:#fff;
      border:1.5px solid rgba(0,0,0,.07);
      border-radius:var(--r-md);
      padding:1.6rem 1.4rem 1.2rem;
      display:flex; flex-direction:column; align-items:center; gap:.9rem;
      cursor:default;
      opacity:0; transform:translateY(18px);
      transition:opacity .5s var(--spring), transform .5s var(--spring),
                 border-color .3s var(--ease), box-shadow .3s var(--ease);
    }
    .client-card.revealed {
      opacity:1; transform:translateY(0);
    }
    .client-card.revealed:hover {
      transform:translateY(-5px);
      border-color:rgba(0,106,78,.25);
      box-shadow:0 12px 32px rgba(0,0,0,.09), 0 0 0 3px rgba(0,106,78,.05);
    }

    /* Logo area */
    .client-card__logo {
      width:100%; height:56px;
      display:flex; align-items:center; justify-content:center;
    }
    .client-card__logo img {
      max-width:140px; max-height:52px;
      width:auto; height:auto; object-fit:contain;
      opacity:.7; filter:grayscale(.2);
      transition:opacity .3s var(--ease), filter .3s var(--ease);
    }
    .client-card.revealed:hover .client-card__logo img {
      opacity:1; filter:none;
    }

    /* Client name — appears on hover */
    .client-card__name {
      font-family:var(--ff-head);
      font-size:.7rem; font-weight:700;
      letter-spacing:.1em; text-transform:uppercase;
      color:rgba(26,26,26,.35);
      transition:color .3s var(--ease);
      text-align:center;
    }
    .client-card.revealed:hover .client-card__name {
      color:var(--green);
    }

    /* Sector tag */
    .client-card__sector {
      font-size:.68rem; font-weight:400;
      color:rgba(26,26,26,.38);
      text-align:center;
      line-height:1.4;
    }

    /* ============================================================
       12 — SOLUTIONS
    ============================================================ */
    .solutions { background:var(--surface-2); border-top:1px solid rgba(0,0,0,.06); }
    .solutions__header { text-align:center; margin-bottom:clamp(2.5rem,5vw,3.5rem); }
    .solutions__it { margin-bottom:clamp(3rem,7vw,5rem); }

    /* Typewriter */
    .typewriter-wrap { text-align:center; margin-bottom:3rem; min-height:clamp(7rem,12vw,10rem); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.65rem; }
    .typewriter-label { font-family:var(--ff-head); font-size:.68rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(26,26,26,.4); }
    .typewriter-text {
      font-family:var(--ff-head); font-size:clamp(2rem,6vw,5rem); font-weight:800; letter-spacing:-.03em; line-height:1;
      background:linear-gradient(135deg,#1A1A1A 30%,var(--green) 100%);
      -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
      min-height:1em;
    }
    .typewriter-cursor {
      display:inline-block;
      width: clamp(3px, .4vw, 5px);
      /* Use the same clamp as .typewriter-text so height always matches */
      height: 1em;
      font-size: clamp(2rem,6vw,5rem);
      background:var(--green);
      margin-left:5px;
      /* text-bottom aligns the cursor base with the text baseline */
      vertical-align: text-bottom;
      border-radius:3px;
      animation:cursorBlink .75s step-end infinite;
      -webkit-text-fill-color:var(--green);
    }
    @keyframes cursorBlink { 0%,100%{opacity:1} 50%{opacity:0} }

    /* ── Globe canvas ────────────────────────────────────────────
       Canvas fills its container, sized dynamically by JS.
       Responsive: JS reads container width and scales the globe.
    ──────────────────────────────────────────────────────────── */
    .globe-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: clamp(2rem, 5vw, 3.5rem);
      width: 100%;
    }
    .globe-label {
      font-family: var(--ff-head);
      font-size: .68rem; font-weight: 700;
      letter-spacing: .22em; text-transform: uppercase;
      color: rgba(26,26,26,.4);
      margin-bottom: 1.2rem;
    }
    #globeCanvas {
      display: block;
      cursor: grab;
      max-width: 100%;
      /* Soft green glow behind the globe */
      filter: drop-shadow(0 0 40px rgba(0,106,78,.12));
    }
    #globeCanvas:active { cursor: grabbing; }

    /* ============================================================
       13 — ABOUT
    ============================================================ */
    .about { background:var(--surface); border-top:1px solid rgba(0,0,0,.06); }
    .about__grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,6rem); align-items:start; }
    @media(max-width:780px){ .about__grid{grid-template-columns:1fr; gap:2.5rem} }
    .about__left { display:flex; flex-direction:column; gap:1.5rem; }
    .about__title { font-family:var(--ff-head); font-size:clamp(1.6rem,3.5vw,2.5rem); font-weight:800; letter-spacing:-.03em; color:var(--white); line-height:1.08; }
    .about__title span { background:linear-gradient(90deg,var(--green-lt),var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .about__text { font-size:.95rem; font-weight:300; color:rgba(26,26,26,.62); line-height:1.82; }
    .about__list { display:flex; flex-direction:column; gap:.65rem; }
    .about__list-item { display:flex; align-items:center; gap:.75rem; font-size:.9rem; font-weight:400; color:rgba(26,26,26,.78); }
    .about__list-item::before { content:''; width:7px; height:7px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--green-lt),var(--red)); box-shadow:0 0 8px rgba(0,135,95,.5); }
    .about__stats { display:flex; gap:2rem; flex-wrap:wrap; padding-top:1rem; border-top:1px solid rgba(0,0,0,.08); }
    .about__stat-num { font-family:var(--ff-head); font-size:1.9rem; font-weight:800; background:linear-gradient(90deg,var(--green-lt),var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; }
    .about__stat-label { font-size:.72rem; font-weight:400; color:rgba(26,26,26,.48); letter-spacing:.06em; text-transform:uppercase; margin-top:3px; }
    .about__right { display:flex; flex-direction:column; gap:1.3rem; }
    .about__card { background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--r-md); padding:1.7rem 1.6rem; position:relative; overflow:hidden; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease); }
    .about__card:hover { border-color:rgba(0,106,78,.28); box-shadow:0 8px 24px rgba(0,0,0,.1); transform:translateY(-3px); }
    .about__card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:0 99px 99px 0; }
    .about__card--vision::before  { background:var(--green-lt); }
    .about__card--mission::before { background:var(--red); }
    .about__card-label { font-family:var(--ff-head); font-size:.65rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.55rem; }
    .about__card--vision  .about__card-label { color:var(--green-lt); }
    .about__card--mission .about__card-label { color:var(--red-lt); }
    .about__card-title { font-family:var(--ff-head); font-size:1.2rem; font-weight:700; color:var(--white); margin-bottom:.7rem; letter-spacing:-.01em; }
    .about__card-text  { font-size:.875rem; font-weight:300; color:rgba(26,26,26,.6); line-height:1.72; }
    .about__card-icon  { position:absolute; top:1.4rem; right:1.4rem; width:38px; height:38px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; opacity:.55; }
    .about__card--vision  .about__card-icon { background:var(--green); }
    .about__card--mission .about__card-icon { background:var(--red); }
    .about__card-icon svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }

    /* ============================================================
       14 — PARTNERS MARQUEE
    ============================================================ */
    .partners { background:var(--surface-2); border-top:1px solid rgba(0,0,0,.06); overflow:hidden; }
    .partners__header { text-align:center; margin-bottom:clamp(2rem,5vw,3rem); }
    .partners__stage {
      overflow:hidden;
      -webkit-mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
              mask-image:linear-gradient(to right,transparent 0%,black 8%,black 92%,transparent 100%);
    }
    .partners__track { display:flex; width:max-content; padding-block:.6rem; }
    .partners__track + .partners__track { margin-top:1.2rem; }
    .partners__track--left  { animation:marqueeLeft  45s linear infinite; }
    .partners__track--right { animation:marqueeRight 45s linear infinite; }
    @keyframes marqueeLeft  { from{transform:translateX(0)}    to{transform:translateX(-50%)} }
    @keyframes marqueeRight { from{transform:translateX(-50%)} to{transform:translateX(0)}   }
    .partners__stage:hover .partners__track { animation-play-state:paused; }
    .partner-item { display:flex; align-items:center; justify-content:center; padding:.5rem clamp(2.5rem,6vw,5rem); flex-shrink:0; border-right:1px solid rgba(0,0,0,.07); transition:opacity .3s var(--ease),transform .3s var(--ease); cursor:default; }
    .partner-item:hover { opacity:.9; transform:scale(1.05); }
    .partner-item__logo { width:130px; height:60px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    /* Natural colours on light bg — slight desaturate at rest, full colour on hover */
    .partner-item__logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; opacity:.7; filter:grayscale(.25); transition:opacity .3s var(--ease),filter .3s var(--ease); }
    .partner-item:hover .partner-item__logo img { opacity:1; filter:none; }

    /* ============================================================
       15 — CONTACT
    ============================================================ */
    .contact { background:var(--surface); border-top:1px solid rgba(0,0,0,.06); }

    /* Section header */
    .contact__header { text-align:center; max-width:620px; margin-inline:auto; margin-bottom:clamp(2.5rem,5vw,4rem); }
    .contact__title  { font-family:var(--ff-head); font-size:clamp(1.8rem,3.5vw,2.8rem); font-weight:800; letter-spacing:-.03em; color:#1A1A1A; line-height:1.08; }
    .contact__title span { background:linear-gradient(90deg,var(--green),var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
    .contact__tagline { font-size:.95rem; font-weight:300; color:rgba(26,26,26,.6); line-height:1.8; margin-top:.75rem; }

    /* ── 4 action cards ── */
    .contact__actions { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:clamp(2rem,4vw,3rem); }
    @media(max-width:900px)  { .contact__actions { grid-template-columns:repeat(2,1fr); } }
    @media(max-width:480px)  { .contact__actions { grid-template-columns:1fr 1fr; gap:.75rem; } }

    .contact-card {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      text-align:center; gap:.75rem;
      padding:clamp(1.4rem,3vw,2rem) 1.2rem;
      background:#fff; border:1.5px solid rgba(0,0,0,.08); border-radius:var(--r-md);
      cursor:pointer; text-decoration:none; color:inherit;
      position:relative; overflow:hidden;
      transition:transform .3s var(--spring), border-color .3s var(--ease),
                 box-shadow .3s var(--ease), background .3s var(--ease);
    }
    .contact-card:hover { transform:translateY(-5px); box-shadow:0 14px 36px rgba(0,0,0,.1); }

    /* Shimmer sweep */
    .contact-card::before {
      content:''; position:absolute; top:0; left:-75%; width:50%; height:100%;
      background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);
      transform:skewX(-20deg); transition:left 0s; pointer-events:none;
    }
    .contact-card:hover::before { left:135%; transition:left .55s var(--ease); }

    /* Top accent bar — each card gets its own colour via modifier */
    .contact-card::after {
      content:''; position:absolute; top:0; left:0; right:0; height:3px;
      opacity:0; transition:opacity .3s var(--ease);
    }
    .contact-card:hover::after { opacity:1; }
    .contact-card--cal::after  { background:var(--green); }
    .contact-card--wa::after   { background:#25d366; }
    .contact-card--email::after{ background:var(--red); }
    .contact-card--li::after   { background:#0077b5; }

    /* Hover border colours */
    .contact-card--cal:hover   { border-color:rgba(0,106,78,.3); }
    .contact-card--wa:hover    { border-color:rgba(37,211,102,.35); background:rgba(37,211,102,.03); }
    .contact-card--email:hover { border-color:rgba(232,17,45,.25); }
    .contact-card--li:hover    { border-color:rgba(0,119,181,.25); }

    /* Icon circle */
    .contact-card__icon {
      width:52px; height:52px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      flex-shrink:0;
      transition:transform .3s var(--spring), background .3s var(--ease);
    }
    .contact-card:hover .contact-card__icon { transform:scale(1.1); }
    .contact-card--cal   .contact-card__icon { background:rgba(0,106,78,.1);   border:1.5px solid rgba(0,106,78,.2); }
    .contact-card--wa    .contact-card__icon { background:rgba(37,211,102,.1); border:1.5px solid rgba(37,211,102,.25); }
    .contact-card--email .contact-card__icon { background:rgba(232,17,45,.08); border:1.5px solid rgba(232,17,45,.2); }
    .contact-card--li    .contact-card__icon { background:rgba(0,119,181,.08); border:1.5px solid rgba(0,119,181,.2); }

    .contact-card__icon svg { width:22px; height:22px; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
    .contact-card--cal   .contact-card__icon svg { stroke:var(--green); }
    .contact-card--wa    .contact-card__icon svg { stroke:#25d366; }
    .contact-card--email .contact-card__icon svg { stroke:var(--red); }
    .contact-card--li    .contact-card__icon svg { stroke:#0077b5; }

    .contact-card__title { font-family:var(--ff-head); font-size:.92rem; font-weight:700; color:#1A1A1A; letter-spacing:-.01em; }
    .contact-card__tag   { font-size:.72rem; font-weight:400; color:rgba(26,26,26,.48); line-height:1.4; }

    /* ── Info strip — address, hours ── */
    .contact__info-strip {
      display:grid; grid-template-columns:repeat(2,1fr); gap:1rem;
      margin-bottom:clamp(2rem,4vw,3rem);
    }
    @media(max-width:600px) { .contact__info-strip { grid-template-columns:1fr; } }

    .contact__info-item { display:flex; align-items:flex-start; gap:1rem; padding:1rem 1.2rem; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--r-md); transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease); }
    .contact__info-item:hover { border-color:rgba(0,106,78,.3); transform:translateX(4px); box-shadow:0 4px 16px rgba(0,0,0,.07); }
    .contact__info-icon { width:36px; height:36px; border-radius:var(--r-sm); background:rgba(0,106,78,.1); border:1px solid rgba(0,106,78,.18); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
    .contact__info-icon svg { width:15px; height:15px; fill:none; stroke:var(--green); stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; }
    .contact__info-text  { display:flex; flex-direction:column; gap:.12rem; }
    .contact__info-label { font-family:var(--ff-head); font-size:.58rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--green); }
    .contact__info-value { font-size:.88rem; font-weight:400; color:rgba(26,26,26,.75); line-height:1.5; }

    /* ── Collapsible form ── */
    .contact__form-toggle {
      display:flex; align-items:center; justify-content:center; gap:.6rem;
      width:100%; padding:.9rem; border-radius:var(--r-md);
      background:transparent; border:1.5px dashed rgba(0,0,0,.15);
      font-family:var(--ff-head); font-size:.85rem; font-weight:700;
      color:rgba(26,26,26,.55); cursor:pointer; letter-spacing:.01em;
      transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
    }
    .contact__form-toggle:hover { border-color:rgba(0,106,78,.35); color:var(--green); background:rgba(0,106,78,.03); }
    .contact__form-toggle svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition:transform .35s var(--spring); }
    .contact__form-toggle.open svg { transform:rotate(180deg); }
    .contact__form-toggle.open { border-style:solid; border-color:rgba(0,106,78,.25); color:var(--green); }

    .contact__form-wrap {
      max-height:0; overflow:hidden;
      transition:max-height .55s var(--spring), opacity .4s var(--ease);
      opacity:0;
    }
    .contact__form-wrap.open { max-height:900px; opacity:1; }

    .contact__form-inner {
      background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:var(--r-lg);
      padding:clamp(1.6rem,4vw,2.4rem); margin-top:1rem;
      box-shadow:0 4px 24px rgba(0,0,0,.06);
    }
    .contact__form-title { font-family:var(--ff-head); font-size:1rem; font-weight:700; color:#1A1A1A; margin-bottom:1.4rem; padding-bottom:.8rem; border-bottom:1px solid rgba(0,0,0,.07); }
    .contact__form { display:flex; flex-direction:column; gap:.9rem; }
    .form-row { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
    @media(max-width:500px){ .form-row{grid-template-columns:1fr} }
    .form-field { display:flex; flex-direction:column; gap:.38rem; }
    .form-label { font-family:var(--ff-head); font-size:.63rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(26,26,26,.45); transition:color .3s var(--ease); }
    .form-field:focus-within .form-label { color:var(--green); }
    .form-input,.form-textarea {
      font-family:var(--ff-body); font-size:.9rem; font-weight:400; color:#1A1A1A;
      background:#F8F9F8; border:1px solid rgba(0,0,0,.12);
      border-radius:var(--r-sm); padding:.7rem 1rem; width:100%; outline:none;
      transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
    }
    .form-input::placeholder,.form-textarea::placeholder { color:rgba(26,26,26,.3); }
    .form-input:focus,.form-textarea:focus { border-color:rgba(0,106,78,.5); background:#fff; box-shadow:0 0 0 3px rgba(0,106,78,.1); }
    .form-input:-webkit-autofill { -webkit-box-shadow:0 0 0 100px #F8F9F8 inset; -webkit-text-fill-color:#1A1A1A; }
    .form-textarea { resize:vertical; min-height:110px; }
    .cf-turnstile { margin-top:.4rem; }

    .form-submit {
      width:100%; display:flex; align-items:center; justify-content:center; gap:.5rem;
      font-family:var(--ff-head); font-size:.95rem; font-weight:700; letter-spacing:.025em;
      color:#fff; background:var(--red); border:1.5px solid var(--red); border-radius:var(--r-sm);
      position:relative; overflow:hidden;
      padding:.82rem 1.5rem; cursor:pointer; margin-top:.3rem;
      transition:box-shadow .3s var(--ease),transform .3s var(--ease);
    }
    .form-submit::before { content:''; position:absolute; top:0; left:-75%; width:50%; height:100%; background:linear-gradient(120deg,transparent,rgba(255,255,255,.28),transparent); transform:skewX(-20deg); transition:left 0s; pointer-events:none; }
    .form-submit:hover::before { left:135%; transition:left 0.5s var(--ease); }
    .form-submit:hover { box-shadow:0 6px 22px rgba(200,0,31,.3); transform:translateY(-2px); }
    .form-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
    .form-submit svg { width:16px; height:16px; transition:transform .3s var(--ease); }
    .form-submit:hover svg { transform:translateX(4px); }
    .form-feedback { display:none; align-items:center; gap:.65rem; padding:.82rem 1rem; border-radius:var(--r-sm); font-size:.875rem; margin-top:.4rem; }
    .form-feedback.visible { display:flex; }
    .form-feedback--success { background:rgba(0,135,95,.1); border:1px solid rgba(0,135,95,.3); color:var(--green); }
    .form-feedback--error   { background:rgba(232,17,45,.08); border:1px solid rgba(232,17,45,.3); color:var(--red); }
    .form-feedback svg { width:16px; height:16px; flex-shrink:0; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

    
    /* ============================================================
       16 — FOOTER
    ============================================================ */
    .site-footer {
      background:var(--surface-2);
      border-top:1px solid rgba(0,0,0,.08);
      padding:clamp(2rem,5vw,3rem) 0 clamp(1.5rem,4vw,2rem);
    }
    .footer__inner {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:1.5rem;
    }
    @media(max-width:640px){
      .footer__inner { grid-template-columns:1fr; text-align:center; justify-items:center; gap:1.2rem; }
    }

    /* Brand column */
    .footer__brand { display:flex; flex-direction:column; gap:.5rem; }
    .footer__brand-row { display:flex; align-items:center; gap:.6rem; }
    .footer__logo-img { height:30px; width:auto; display:block; opacity:.85; }
    .footer__brand a:hover .footer__logo-img { opacity:1; }
    .footer__copy { font-size:.75rem; color:rgba(26,26,26,.42); }
    .footer__copy span { color:var(--red); }

    /* Social icons — centre column */
    .footer__social { display:flex; align-items:center; gap:.75rem; }
    /* Social link wrapper */
    .social-link {
      width:38px; height:38px; border-radius:var(--r-sm);
      background:#fff; border:1px solid rgba(0,0,0,.1);
      display:flex; align-items:center; justify-content:center;
      transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
    }
    .social-link:hover { background:rgba(0,106,78,.08); border-color:rgba(0,106,78,.25); transform:translateY(-2px); }
    .social-link svg { width:18px; height:18px; fill:rgba(26,26,26,.5); transition:fill .3s var(--ease); }
    .social-link:hover svg { fill:#1A1A1A; }

    /* Right column — tagline */
    .footer__right { text-align:right; }
    .footer__tagline { font-size:.75rem; color:rgba(26,26,26,.42); line-height:1.6; }
    @media(max-width:640px){ .footer__right { text-align:center; } }

    /* Flag stripe at footer bottom */
    .footer__stripe { display:flex; height:3px; margin-top:clamp(1.5rem,4vw,2rem); }
    .footer__stripe span { flex:1; }
    .footer__stripe span:nth-child(1) { background:var(--green); }
    .footer__stripe span:nth-child(2) { background:var(--white); }
    .footer__stripe span:nth-child(3) { background:var(--red); }

    /* ============================================================
       17 — BACK TO TOP BUTTON
    ============================================================ */
    .back-to-top {
      position:fixed; bottom:2rem; right:1.5rem; z-index:500;
      width:42px; height:42px; border-radius:var(--r-sm);
      background:#fff; border:1px solid rgba(0,0,0,.1); box-shadow:0 2px 12px rgba(0,0,0,.1);
      display:flex; align-items:center; justify-content:center;
      opacity:0; pointer-events:none; transform:translateY(12px);
      transition:opacity .3s var(--ease),transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
      cursor:pointer;
    }
    .back-to-top.visible { opacity:1; pointer-events:auto; transform:translateY(0); }
    .back-to-top:hover { background:rgba(0,106,78,.08); border-color:rgba(0,106,78,.3); box-shadow:0 4px 16px rgba(0,0,0,.12); transform:translateY(-2px); }
    .back-to-top svg { width:18px; height:18px; stroke:var(--green-lt); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }


    

    /* ================================================================
       MULTI-PAGE: NEW ELEMENTS
       All new CSS for the multi-page site
    ================================================================ */

    /* ── Page hero strip (services / clients / about / contact / partners) ── */
    .page-hero {
      background: var(--surface-2);
      border-bottom: 1.5px solid var(--surface-3);
      padding: 5rem 0 3rem;
      text-align: center;
    }
    .page-hero__title {
      font-family: var(--ff-head);
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 800;
      color: #1A1A1A;
      margin: .4rem 0;
    }
    .page-hero__title span { color: var(--green); }
    .page-hero__sub {
      color: rgba(26,26,26,.6);
      max-width: 560px;
      margin: .75rem auto 0;
      line-height: 1.7;
      font-size: clamp(.875rem, 1.3vw, 1rem);
    }

    /* ── Hero: globe layout — typewriter above globe, fits viewport ── */
    .hero__globe-layout {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: .9rem;
      min-height: calc(100svh - 69px);
      justify-content: center;
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;
      box-sizing: border-box;
    }
    .hero__typewriter-wrap { display: flex; flex-direction: column; align-items: center; gap: .3rem; }
    .hero__tw-label { font-size: clamp(.75rem, 1vw, .875rem); color: rgba(26,26,26,.45); letter-spacing: .05em; }
    .hero__tw-text {
      font-family: var(--ff-head);
      font-size: clamp(1.5rem, 3.8vw, 2.6rem);
      font-weight: 800;
      color: var(--green);
      min-height: 1.2em;
      display: flex; align-items: center; gap: 2px;
    }
    .hero__globe-wrap { width: 100%; max-width: 420px; }
    .hero__globe-wrap canvas { width: 100% !important; height: auto !important; display: block; max-width: 420px; }
    @media (max-width: 600px) {
      .hero__globe-wrap { max-width: 280px; }
      .hero__globe-layout { gap: .7rem; }
    }
    @media (max-height: 700px) {
      .hero__globe-wrap { max-width: 240px; }
      .hero__globe-layout { gap: .5rem; }
    }

    /* ── Service tiles — home.html ── */
    .services__tiles {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: .75rem;
      margin-top: 2rem;
    }
    .service-tile {
      background: var(--surface-2);
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      padding: 1.25rem 1.1rem;
      display: flex; flex-direction: column; gap: .35rem;
      opacity: 0; transform: translateY(14px);
      transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .2s;
    }
    .service-tile.visible { opacity: 1; transform: none; }
    .service-tile:hover { border-color: var(--green); }
    .service-tile__tag { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
    .service-tile__name { font-family: var(--ff-head); font-size: .9rem; font-weight: 700; color: #1A1A1A; }

    /* ── Service cards — services.html full cards ── */
    .services__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .service-card {
      background: #fff;
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      padding: 2rem;
      display: flex; flex-direction: column; gap: .75rem;
      opacity: 0; transform: translateY(18px);
      transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .2s, box-shadow .2s;
    }
    .service-card.visible { opacity: 1; transform: none; }
    .service-card:hover { border-color: var(--green); box-shadow: 0 8px 32px rgba(0,106,78,.1); }
    .service-card__icon svg { width: 30px; height: 30px; stroke: var(--green); }
    .service-card__tag { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
    .service-card__name { font-family: var(--ff-head); font-size: 1.05rem; font-weight: 700; color: #1A1A1A; }
    .service-card__desc { font-size: .875rem; color: rgba(26,26,26,.6); line-height: 1.7; flex: 1; }

    /* ── Cyber solutions grid ── */
    .cyber__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1rem;
      margin-top: 2rem;
    }
    .cyber-card {
      background: #fff;
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      padding: 1.5rem;
      display: flex; flex-direction: column; gap: .6rem;
      opacity: 0; transform: translateY(14px);
      transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .2s;
    }
    .cyber-card.visible { opacity: 1; transform: none; }
    .cyber-card:hover { border-color: var(--green); }
    .cyber-card__icon svg { width: 22px; height: 22px; stroke: var(--green); }
    .cyber-card__name { font-family: var(--ff-head); font-size: .95rem; font-weight: 700; color: #1A1A1A; }
    .cyber-card__desc { font-size: .82rem; color: rgba(26,26,26,.58); line-height: 1.65; }

    /* ── Why cards — ensure .visible works ── */
    .why-card.visible, .why-card.revealed { opacity: 1; transform: translateY(0); }
    .why-card.visible:hover, .why-card.revealed:hover { transform: translateY(-4px); border-color: rgba(0,106,78,.25); box-shadow: 0 10px 28px rgba(0,0,0,.1); }

    /* ── Client cards — clients.html ── */
    .clients__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 1.25rem;
      margin-top: 2rem;
    }
    .client-card {
      background: #fff;
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      padding: 1.75rem;
      display: flex; flex-direction: column; align-items: center; gap: .75rem;
      text-align: center;
      opacity: 0; transform: translateY(14px);
      transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .2s;
    }
    .client-card.visible { opacity: 1; transform: none; }
    .client-card:hover { border-color: var(--green); }
    .client-card__logo { height: 60px; display: flex; align-items: center; }
    .client-card__logo img { max-height: 48px; max-width: 140px; object-fit: contain; }
    .client-card__name { font-family: var(--ff-head); font-size: .9rem; font-weight: 700; color: #1A1A1A; }
    .client-card__sector { font-size: .75rem; color: rgba(26,26,26,.5); }

    /* ── About home stats row ── */
    .about--home .about__stats-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
      gap: 1rem;
      margin: 2rem 0;
    }
    .about--home .about__stat {
      background: var(--surface-2);
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      padding: 1.25rem;
      text-align: center;
      opacity: 0; transform: translateY(12px);
      transition: opacity .45s var(--ease), transform .45s var(--ease);
    }
    .about--home .about__stat.visible { opacity: 1; transform: none; }
    .about--home .about__stat-num { font-family: var(--ff-head); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; color: var(--green); }
    .about--home .about__stat-label { font-size: .72rem; color: rgba(26,26,26,.5); margin-top: .2rem; }
    .about__cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1rem; }
    @media (max-width: 600px) { .about__cards-row { grid-template-columns: 1fr; } }

    /* ── Contact cards ── */
    .contact-card {
      display: flex; flex-direction: column; align-items: flex-start; gap: .5rem;
      padding: 1.5rem;
      background: #fff;
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      text-decoration: none;
      opacity: 0; transform: translateY(14px);
      transition: opacity .45s var(--ease), transform .45s var(--ease), border-color .2s, box-shadow .2s;
    }
    .contact-card.visible { opacity: 1; transform: none; }
    .contact-card:hover { border-color: var(--green); box-shadow: 0 6px 24px rgba(0,106,78,.1); }
    .contact-card__icon svg { width: 24px; height: 24px; stroke: var(--green); }
    .contact-card__title { font-family: var(--ff-head); font-size: .95rem; font-weight: 700; color: #1A1A1A; }
    .contact-card__tag { font-size: .75rem; color: rgba(26,26,26,.5); }
    .contact__actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 2rem; }
    .contact__actions--full { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

    /* ── Contact info strip ── */
    .contact__info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin-top: 2rem; }
    .contact__info-item {
      display: flex; gap: .85rem; align-items: flex-start;
      padding: 1.25rem;
      background: var(--surface-2);
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-md);
      opacity: 0; transform: translateY(10px);
      transition: opacity .4s var(--ease), transform .4s var(--ease);
    }
    .contact__info-item.visible { opacity: 1; transform: none; }
    .contact__info-icon svg { width: 20px; height: 20px; stroke: var(--green); flex-shrink: 0; margin-top: 2px; }
    .contact__info-text { display: flex; flex-direction: column; gap: .2rem; }
    .contact__info-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
    .contact__info-value { font-size: .875rem; color: #1A1A1A; line-height: 1.5; }

    /* ── Section CTA ── */
    .section__cta { display: flex; justify-content: center; margin-top: 2.5rem; }

    /* ── Back to home ── */
    .back-home-wrap { display: flex; justify-content: center; padding: 2.5rem 1rem; background: var(--surface-2); border-top: 1px solid var(--surface-3); }
    .back-home {
      display: inline-flex; align-items: center; gap: .5rem;
      font-family: var(--ff-head); font-size: .82rem; font-weight: 600;
      color: rgba(26,26,26,.5);
      text-decoration: none;
      padding: .6rem 1.2rem;
      border: 1.5px solid var(--surface-3);
      border-radius: var(--r-sm);
      transition: color .2s, border-color .2s;
    }
    .back-home svg { width: 15px; height: 15px; stroke: currentColor; }
    .back-home:hover { color: var(--green); border-color: var(--green); }

    /* ── Partner detail cards ── */
    .partner-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 1.5rem; margin-top: 2rem; }
    .partner-detail-card {
      background: #fff; border: 1.5px solid var(--surface-3); border-radius: var(--r-md);
      padding: 2rem; display: flex; flex-direction: column; gap: 1rem;
      opacity: 0; transform: translateY(18px);
      transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .2s;
    }
    .partner-detail-card.visible { opacity: 1; transform: none; }
    .partner-detail-card:hover { border-color: var(--green); }
    .partner-detail-card__logo { height: 52px; display: flex; align-items: center; }
    .partner-detail-card__logo img { max-height: 44px; max-width: 150px; object-fit: contain; }
    .partner-detail-card__tag { font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
    .partner-detail-card__name { font-family: var(--ff-head); font-size: 1.05rem; font-weight: 800; color: #1A1A1A; }
    .partner-detail-card__desc { font-size: .875rem; color: rgba(26,26,26,.6); line-height: 1.7; flex: 1; }
    .partner-detail-card__link {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .82rem; font-weight: 600; color: var(--green); text-decoration: none; margin-top: auto;
      transition: gap .18s;
    }
    .partner-detail-card__link svg { width: 13px; height: 13px; stroke: currentColor; }
    .partner-detail-card__link:hover { gap: .7rem; }

    /* ── .anim.visible fallback (for JS-built elements that get visible added) ── */
    .anim.visible { opacity: 1 !important; transform: none !important; }