:root{
    --navy-900:#0a1730;
    --navy-800:#122a5e;
    --navy-700:#163286;
    --blue-500:#2f6fed;
    --blue-400:#5b8cf5;
    --blue-300:#9dbdfb;
    --ink:#141b30;
    --paper:#f4f6fb;
    --paper-2:#ffffff;
    --slate:#4f5672;
    --slate-soft:#767c94;
    --line:#dde2ee;
    --line-strong:#c7ceE0;
    --good:#1f9d6b;

    --bg: var(--paper);
    --surface: var(--paper-2);
    --text: var(--ink);
    --text-soft: var(--slate);
    --border: var(--line);
    --header-bg: rgba(255,255,255,0.86);
    --shadow: 0 1px 2px rgba(10,23,48,0.04), 0 8px 24px rgba(10,23,48,0.06);
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0a1120;
      --surface:#111a30;
      --text:#e9edf7;
      --text-soft:#9aa4c2;
      --border:#22304f;
      --line-strong:#2c3c60;
      --header-bg: rgba(10,17,32,0.86);
      --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 30px rgba(0,0,0,0.35);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0a1120;
    --surface:#111a30;
    --text:#e9edf7;
    --text-soft:#9aa4c2;
    --border:#22304f;
    --line-strong:#2c3c60;
    --header-bg: rgba(10,17,32,0.86);
    --shadow: 0 1px 2px rgba(0,0,0,0.3), 0 12px 30px rgba(0,0,0,0.35);
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; overflow-x:hidden; width:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:"Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    width:100%;
    overflow-wrap:break-word;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }
  .wrap{ width:100%; max-width:1180px; margin:0 auto; padding:0 24px; }

  h1,h2,h3{
    font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
    font-weight:800;
    line-height:1.12;
    letter-spacing:-0.01em;
    text-wrap:balance;
    margin:0;
    color:var(--text);
  }
  .mono{
    font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:12.5px;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--blue-500);
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }
  .eyebrow::before{
    content:"";
    width:22px; height:1px;
    background:var(--blue-500);
    display:inline-block;
  }
  .eyebrow.on-dark{ color:var(--blue-300); }
  .eyebrow.on-dark::before{ background:var(--blue-300); }

  .lede{
    color:var(--text-soft);
    font-size:1.05rem;
    max-width:640px;
  }

  section{ position:relative; }
  .section-pad{ padding:104px 0; }
  @media (max-width:720px){ .section-pad{ padding:72px 0; } }

  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    font-family:"Public Sans", sans-serif;
    font-weight:700;
    font-size:0.96rem;
    padding:14px 26px;
    border-radius:8px;
    border:1px solid transparent;
    cursor:pointer;
    text-decoration:none;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    white-space:nowrap;
  }
  .btn:active{ transform:translateY(1px); }
  .btn-primary{
    background:var(--blue-500);
    color:#fff;
    box-shadow:0 10px 24px -8px rgba(47,111,237,0.55);
  }
  .btn-primary:hover{ background:var(--blue-400); box-shadow:0 12px 28px -6px rgba(47,111,237,0.6); }
  .btn-ghost-dark{
    background:transparent;
    border-color:rgba(255,255,255,0.28);
    color:#fff;
  }
  .btn-ghost-dark:hover{ border-color:rgba(255,255,255,0.55); background:rgba(255,255,255,0.06); }
  .btn-ghost-light{
    background:transparent;
    border-color:var(--line-strong);
    color:var(--text);
  }
  .btn-ghost-light:hover{ border-color:var(--blue-500); color:var(--blue-500); }
  .btn-block{ width:100%; }
  .btn svg{ width:18px; height:18px; flex:none; }

  /* ---------- header ---------- */
  .site-header{
    position:fixed; top:0; left:0; right:0; z-index:50;
    background:var(--header-bg);
    backdrop-filter:saturate(160%) blur(14px);
    -webkit-backdrop-filter:saturate(160%) blur(14px);
    border-bottom:1px solid transparent;
    transition:border-color .25s ease, box-shadow .25s ease;
  }
  .site-header.scrolled{ border-bottom-color:var(--border); box-shadow:var(--shadow); }
  .header-inner{
    display:flex; align-items:center; justify-content:space-between;
    height:104px; transition:height .25s ease;
  }
  .site-header.scrolled .header-inner{ height:82px; }
  .brand{ display:flex; align-items:center; height:64px; }
  .brand img{ height:58px; width:auto; transition:height .25s ease; }
  .site-header.scrolled .brand img{ height:46px; }

  .main-nav{ display:flex; align-items:center; gap:34px; }
  .main-nav a{
    text-decoration:none; color:var(--text-soft); font-weight:600; font-size:0.93rem;
    padding:6px 0; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
  }
  .main-nav a:hover{ color:var(--blue-500); }
  .header-cta{ display:flex; align-items:center; gap:18px; }
  .nav-toggle{
    display:none; background:none; border:none; cursor:pointer; padding:6px;
    color:var(--text);
  }
  .nav-toggle svg{ width:26px; height:26px; }

  @media (max-width:920px){
    .main-nav{
      position:fixed; top:0; right:0; height:100vh; width:min(320px,84vw);
      background:var(--surface); flex-direction:column; align-items:flex-start;
      padding:100px 32px 32px; gap:26px; box-shadow:-16px 0 40px rgba(10,20,40,0.18);
      transform:translateX(100%); transition:transform .3s ease; z-index:40;
    }
    .main-nav.open{ transform:translateX(0); }
    .main-nav a{ font-size:1.05rem; }
    .header-cta .btn-label{ display:none; }
    .nav-toggle{ display:inline-flex; }
    .nav-scrim{
      position:fixed; inset:0; background:rgba(8,14,28,0.45); z-index:35;
      opacity:0; pointer-events:none; transition:opacity .3s ease;
    }
    .nav-scrim.open{ opacity:1; pointer-events:auto; }
  }

  /* ---------- hero ---------- */
  .hero{
    background:
      radial-gradient(1100px 620px at 82% -6%, rgba(47,111,237,0.30), transparent 60%),
      radial-gradient(760px 500px at 6% 108%, rgba(47,111,237,0.16), transparent 65%),
      linear-gradient(160deg, var(--navy-900) 0%, #0d1c3e 46%, var(--navy-700) 100%);
    color:#fff;
    padding:168px 0 108px;
    overflow:hidden;
  }
  .hero-inner{
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;
  }
  .hero h1{ font-size:clamp(2.1rem,4.1vw,3.35rem); color:#fff; }
  .hero .lede{ color:rgba(233,238,255,0.82); font-size:1.12rem; margin-top:20px; max-width:560px; }
  .hero-ctas{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
  .hero-trust{
    margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,0.14);
    display:flex; gap:28px; flex-wrap:wrap; color:rgba(255,255,255,0.7); font-size:0.88rem;
  }
  .hero-trust li{ list-style:none; display:flex; align-items:center; gap:9px; }
  .hero-trust ul{ display:flex; gap:28px; flex-wrap:wrap; margin:0; padding:0; }
  .hero-trust svg{ width:16px; height:16px; color:var(--blue-300); flex:none; }

  .hero-visual{ position:relative; }
  .hero-visual > svg{ width:100%; height:auto; overflow:visible; }
  .pulse-dot{ animation:pulseDot 2.6s ease-in-out infinite; transform-origin:center; }
  .pulse-dot.d2{ animation-delay:.5s; }
  .pulse-dot.d3{ animation-delay:1s; }
  @keyframes pulseDot{
    0%,100%{ opacity:1; } 50%{ opacity:.35; }
  }
  .flow-line{ stroke-dasharray:6 7; animation:flowMove 2.4s linear infinite; }
  @keyframes flowMove{ to{ stroke-dashoffset:-52; } }
  .orbit-node{ animation:floatY 6s ease-in-out infinite; }
  .orbit-node.n2{ animation-delay:1.4s; }
  .orbit-node.n3{ animation-delay:2.8s; }
  @keyframes floatY{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

  @media (prefers-reduced-motion:reduce){
    .pulse-dot,.flow-line,.orbit-node{ animation:none !important; }
  }

  @media (max-width:920px){
    .hero-inner{ grid-template-columns:1fr; }
    .hero-visual{ order:-1; max-width:360px; margin:0 auto 8px; }
    .hero{ padding-top:160px; }
  }
  @media (max-width:480px){
    .brand img{ height:46px; }
    .site-header.scrolled .brand img{ height:38px; }
  }

  /* ---------- generic card ---------- */
  .icon-badge{
    width:52px; height:52px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:rgba(47,111,237,0.1); color:var(--blue-500);
    flex:none;
  }
  .icon-badge svg{ width:26px; height:26px; }
  [data-theme="dark"] .icon-badge, :root:not([data-theme="light"]) .icon-badge{ background:rgba(91,140,245,0.16); }
  @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .icon-badge{ background:rgba(91,140,245,0.16); } }

  .section-head{ max-width:660px; margin-bottom:52px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

  /* ---------- about ---------- */
  .about{ background:var(--bg); }
  .about-grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start; }
  .pillars{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  .pillar{ display:flex; gap:14px; }
  .pillar h3{ font-size:0.98rem; font-weight:700; margin-bottom:4px; }
  .pillar p{ margin:0; color:var(--text-soft); font-size:0.87rem; }
  @media (max-width:860px){ .about-grid{ grid-template-columns:1fr; gap:40px; } }
  @media (max-width:520px){ .pillars{ grid-template-columns:1fr; } }

  /* ---------- services ---------- */
  .services{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  .service-card{
    background:var(--bg); border:1px solid var(--border); border-radius:14px;
    padding:30px 26px; display:flex; flex-direction:column; gap:16px;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  .service-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong); }
  .service-card h3{ font-size:1.06rem; font-weight:700; }
  .service-card p{ margin:0; color:var(--text-soft); font-size:0.91rem; }
  @media (max-width:920px){ .service-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:600px){ .service-grid{ grid-template-columns:1fr; } }

  /* ---------- value band (dark) ---------- */
  .value-band{
    background:linear-gradient(175deg, var(--navy-900), var(--navy-700) 130%);
    color:#fff;
  }
  .value-inner{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; }
  .value-inner h2{ color:#fff; font-size:clamp(1.7rem,3vw,2.35rem); }
  .value-inner .lede{ color:rgba(233,238,255,0.78); margin-top:16px; }
  .check-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .check-list li{
    display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:10px;
    font-weight:600; font-size:0.98rem;
  }
  .check-list svg{ width:20px; height:20px; color:var(--blue-300); flex:none; margin-top:1px; }
  .value-inner .btn{ margin-top:30px; }
  @media (max-width:880px){ .value-inner{ grid-template-columns:1fr; } }

  /* ---------- solutions ---------- */
  .solutions{ background:var(--bg); }
  .solution-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
  .solution-card{
    padding:26px 22px; border-radius:14px; background:var(--surface);
    border:1px solid var(--border); border-top:3px solid var(--blue-500);
  }
  .solution-card h3{ font-size:0.98rem; margin:14px 0 8px; }
  .solution-card p{ margin:0; color:var(--text-soft); font-size:0.87rem; }
  @media (max-width:920px){ .solution-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .solution-grid{ grid-template-columns:1fr; } }

  /* ---------- why choose ---------- */
  .why{ background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
  .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
  .why-card{ text-align:left; }
  .why-card h3{ font-size:1.02rem; margin:16px 0 8px; }
  .why-card p{ margin:0; color:var(--text-soft); font-size:0.88rem; }
  @media (max-width:920px){ .why-grid{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } }

  /* ---------- contact ---------- */
  .contact{
    background:linear-gradient(155deg, var(--navy-900), var(--navy-700) 140%);
    color:#fff;
  }
  .contact-inner{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
  .contact-inner h2{ color:#fff; font-size:clamp(1.8rem,3.2vw,2.5rem); }
  .contact-inner .lede{ color:rgba(233,238,255,0.8); margin-top:16px; }
  .contact-list{ list-style:none; margin:34px 0 0; padding:0; display:flex; flex-direction:column; gap:18px; }
  .contact-list li{ display:flex; align-items:center; gap:14px; font-size:1rem; }
  .contact-list a{ text-decoration:none; font-weight:600; overflow-wrap:anywhere; }
  .contact-list a:hover{ color:var(--blue-300); }
  .cicon{
    width:42px; height:42px; border-radius:10px; background:rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:center; flex:none;
    border:1px solid rgba(255,255,255,0.14);
  }
  .cicon svg{ width:19px; height:19px; }

  .contact-card{
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:16px; padding:32px; backdrop-filter:blur(6px);
  }
  .contact-card h3{ color:#fff; font-size:1.15rem; margin-bottom:6px; }
  .contact-card .lede{ margin:0 0 22px; font-size:0.92rem; }
  .field{ margin-bottom:16px; }
  .field label{ display:block; font-size:0.82rem; font-weight:600; color:rgba(255,255,255,0.75); margin-bottom:7px; }
  .field input, .field textarea{
    width:100%; background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.22);
    border-radius:8px; padding:12px 14px; color:#fff; font-family:inherit; font-size:0.94rem;
    resize:vertical;
  }
  .field input::placeholder, .field textarea::placeholder{ color:rgba(255,255,255,0.38); }
  .field input:focus, .field textarea:focus{ outline:2px solid var(--blue-400); outline-offset:1px; border-color:transparent; }
  .form-note{ font-size:0.78rem; color:rgba(255,255,255,0.55); margin-top:12px; text-align:center; }
  @media (max-width:880px){ .contact-inner{ grid-template-columns:1fr; } }

  /* ---------- footer ---------- */
  footer{ background:var(--navy-900); color:rgba(255,255,255,0.68); padding:64px 0 28px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.1); }
  .footer-brand img{ height:44px; margin-bottom:18px; }
  .footer-brand p{ max-width:320px; font-size:0.9rem; line-height:1.65; }
  .footer-col h4{ color:#fff; font-size:0.82rem; letter-spacing:0.06em; text-transform:uppercase; font-family:"IBM Plex Mono",monospace; font-weight:600; margin:0 0 18px; }
  .footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .footer-col a{ text-decoration:none; color:rgba(255,255,255,0.68); font-size:0.92rem; }
  .footer-col a:hover{ color:#fff; }
  .footer-bottom{ padding-top:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.8rem; color:rgba(255,255,255,0.5); }
  @media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; gap:32px; } }

  /* ---------- reveal ---------- */
  .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

  .whatsapp-fab{
    position:fixed; right:22px; bottom:22px; z-index:45;
    width:58px; height:58px; border-radius:50%;
    background:#1fae5b; color:#fff; display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 24px -6px rgba(31,174,91,0.55);
    text-decoration:none; transition:transform .18s ease;
  }
  .whatsapp-fab:hover{ transform:scale(1.06); }
  .whatsapp-fab svg{ width:28px; height:28px; }

  :focus-visible{ outline:2px solid var(--blue-500); outline-offset:2px; }