:root{
    --electric: #2585F8;
    --electric-dark: #1868D6;
    --signal: #03DDB1;
    --graphite: #3D3D3D;
    --ink: #14171C;
    --paper: #FFFFFF;
    --mist: #F3F7FD;
    --line: #DEE6F2;
    --dark: #0E1421;
    --dark-line: #263047;
    --dark-text: #B9C3D6;

    --font-display: 'Montserrat', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --container: 1160px;
  }

  *{ box-sizing: border-box; margin:0; padding:0; }
  html{ scroll-behavior: smooth; }
  body{
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--paper);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; text-decoration:none; }
  ul{ list-style:none; }
  .wrap{ max-width: var(--container); margin:0 auto; padding: 0 28px; }

  h1,h2,h3{ font-family: var(--font-display); color: var(--graphite); line-height:1.12; letter-spacing:-0.01em; }
  .eyebrow{
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    color: var(--electric-dark);
    text-transform: uppercase;
    display:flex; align-items:center; gap:10px;
    margin-bottom: 18px;
  }
  .eyebrow::before{
    content:""; width:20px; height:2px; background: var(--signal); display:inline-block;
  }

  /* ---------- Nav ---------- */
  header{
    position: sticky; top:0; z-index: 100;
    background: rgba(255,255,255,0.88);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 28px;
    max-width: var(--container); margin:0 auto;
  }
  .brand{ display:flex; align-items:center; gap:12px; }
  .brand svg{ width:30px; height:auto; }
  .brand span{
    font-family: var(--font-display); font-weight:800; font-size:19px;
    color: var(--graphite); letter-spacing: -0.01em;
  }
  .nav-links{ display:flex; align-items:center; gap:34px; }
  .nav-links a{
    font-size: 14.5px; font-weight:500; color: var(--ink); opacity:0.8;
    transition: opacity .15s; position:relative; padding-bottom:2px;
  }
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px;
    background: var(--signal); transition: width .2s ease;
  }
  .nav-links a:hover::after{ width:100%; }
  .nav-links a:hover{ opacity:1; color: var(--electric-dark); }
  .nav-right{ display:flex; align-items:center; gap:18px; }
  .lang-toggle{
    display:flex; border:1px solid var(--line); border-radius:999px; padding:3px;
    font-family: var(--font-mono); font-size:12px; font-weight:600;
  }
  .lang-toggle button{
    border:none; background:none; padding:5px 11px; border-radius:999px; cursor:pointer;
    color: var(--ink); opacity:0.55; transition: all .15s;
  }
  .lang-toggle button.active{ background: var(--electric); color:#fff; opacity:1; }
  .nav-cta{
    background: var(--electric); color:#fff; padding:10px 18px; border-radius:8px;
    font-size:14px; font-weight:600; transition: background .15s;
  }
  .nav-cta:hover{ background: var(--electric-dark); }
  .burger{ display:none; background:none; border:none; cursor:pointer; }

  /* ---------- Hero ---------- */
  .hero{
    padding: 96px 0 84px;
    position: relative;
    overflow: hidden;
  }
  .hero .wrap{ position:relative; z-index:2; }
  .hero-inner{ max-width: 760px; }
  .hero h1{
    font-size: clamp(34px, 5.2vw, 58px);
    font-weight: 800;
    margin-bottom: 22px;
    animation: heroUp .7s ease both;
    animation-delay: .05s;
  }
  .hero p.sub{
    font-size: 18px; color:#4B5563; max-width: 560px; margin-bottom: 34px;
    animation: heroUp .7s ease both;
    animation-delay: .15s;
  }
  .hero .eyebrow{ animation: heroUp .7s ease both; }
  .hero-ctas{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:56px; animation: heroUp .7s ease both; animation-delay:.25s; }
  .trace-strip{ animation: heroUp .7s ease both; animation-delay:.35s; }

  @keyframes heroUp{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform:none; }
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding: 13px 24px; border-radius:9px; font-weight:600; font-size:15px;
    transition: all .15s;
    border: 1.5px solid transparent;
  }
  .btn-primary{ background: var(--electric); color:#fff; }
  .btn-primary:hover{ background: var(--electric-dark); }
  .btn-ghost{ border-color: var(--line); color: var(--ink); }
  .btn-ghost:hover{ border-color: var(--electric); color: var(--electric-dark); }

  .trace-strip{
    display:flex; align-items:center; gap:14px;
    font-family: var(--font-mono); font-size: 12px; font-weight:600;
    color: var(--electric-dark); letter-spacing:0.08em;
  }
  .trace-strip svg{ width:140px; height:10px; }
  .trace-line{
    stroke: var(--electric); stroke-width:2; fill:none;
    stroke-dasharray: 6 6;
    animation: dash 1.4s linear infinite;
  }
  @keyframes dash{ to{ stroke-dashoffset: -24; } }

  .hero-bg{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      radial-gradient(600px 300px at 85% 15%, rgba(37,133,248,0.07), transparent 70%),
      radial-gradient(500px 260px at 100% 90%, rgba(3,221,177,0.08), transparent 70%);
    animation: bgDrift 14s ease-in-out infinite alternate;
  }
  @keyframes bgDrift{
    from{ transform: translate(0,0) scale(1); }
    to{ transform: translate(-18px,12px) scale(1.05); }
  }

  /* ---------- Hero decorative visual (satellite/network graphic) ---------- */
  .hero-visual{
    position:absolute; top:50%; right:-40px; transform:translateY(-50%);
    width:520px; height:520px; z-index:1; pointer-events:none;
  }
  .hero-visual svg{ width:100%; height:100%; overflow:visible; }

  .hero-hub{
    animation: heroHubPulse 3.4s ease-in-out infinite;
    transform-origin: 260px 260px;
  }
  @keyframes heroHubPulse{
    0%, 100%{ filter: drop-shadow(0 14px 30px rgba(22,101,204,0.32)) drop-shadow(0 0 0 rgba(75,155,255,0)); }
    50%{ filter: drop-shadow(0 14px 30px rgba(22,101,204,0.32)) drop-shadow(0 0 22px rgba(75,155,255,0.55)); }
  }

  .ping{
    transform-origin: 260px 260px;
    stroke-width: 2;
    animation: radarPing 3.6s ease-out infinite;
  }
  .ping--delay{ animation-delay: 1.8s; }
  @keyframes radarPing{
    0%{ transform: scale(1); opacity: 0.5; }
    100%{ transform: scale(2.05); opacity: 0; }
  }

  .orbit-ring{
    transform-origin: 260px 260px;
    animation: orbitSpin 50s linear infinite;
  }
  @keyframes orbitSpin{ to{ transform: rotate(360deg); } }

  .hero-links path{
    stroke-opacity:0.32;
    stroke-dasharray: 5 7;
    animation: dash 2.2s linear infinite;
  }
  .hero-links path:nth-child(2){ animation-duration: 2.6s; }
  .hero-links path:nth-child(3){ animation-duration: 1.9s; }
  .hero-links path:nth-child(4){ animation-duration: 2.4s; }
  .hero-links path:nth-child(5){ animation-duration: 2.1s; }

  .sat-card{
    stroke: rgba(20,23,28,0.06); stroke-width:1;
    filter: drop-shadow(0 6px 16px rgba(20,23,28,0.10));
  }
  .sat{ transform-box: fill-box; transform-origin: center; }
  .sat--a{ animation: floatY 4.4s ease-in-out infinite; }
  .sat--b{ animation: floatY 5.2s ease-in-out infinite; animation-delay:.3s; }
  .sat--c{ animation: floatY 5.8s ease-in-out infinite; animation-delay:.6s; }
  .sat--d{ animation: floatY 4.8s ease-in-out infinite; animation-delay:.9s; }
  .sat--e{ animation: floatY 4.2s ease-in-out infinite; animation-delay:.4s; }
  @keyframes floatY{
    0%, 100%{ transform: translateY(0); }
    50%{ transform: translateY(-10px); }
  }

  @media (max-width: 1180px){
    .hero-visual{ display:none; }
  }

  /* ---------- Section generic ---------- */
  section{ padding: 88px 0; }
  .section-alt{ background: var(--mist); }
  .section-head{ max-width: 620px; margin-bottom: 48px; }
  .section-head h2{ font-size: clamp(26px,3.4vw,36px); font-weight:800; }
  .section-head p{ color:#4B5563; margin-top:14px; font-size:16.5px; }

  /* ---------- About ---------- */
  .about-grid{
    display:grid; grid-template-columns: 1.3fr 1fr; gap:56px; align-items:start;
  }
  .about-grid p{ color:#3E4650; font-size:16px; margin-bottom:18px; max-width:520px; }
  .fact-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
  .fact-list li{
    display:flex; align-items:center; gap:14px;
    padding: 18px 0; border-bottom:1px solid var(--line);
    font-family: var(--font-mono); font-size:14px; font-weight:600; color: var(--graphite);
  }
  .fact-dot{ width:8px; height:8px; border-radius:50%; background: var(--signal); flex-shrink:0; }

  /* ---------- Services ---------- */
  .cards{ display:grid; grid-template-columns: 1fr 1fr; gap:24px; }
  .card{
    background:#fff; border:1px solid var(--line); border-radius:16px;
    padding: 32px 30px; transition: transform .18s, box-shadow .18s;
  }
  .card:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,23,28,0.07); }
  .card:hover .card-icon svg{ transform: scale(1.12); }
  .card-icon svg{ transition: transform .2s ease; }
  .card-icon{
    width:46px; height:46px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:22px;
  }
  .card-icon.blue{ background: rgba(37,133,248,0.1); }
  .card-icon.teal{ background: rgba(3,221,177,0.12); }
  .card h3{ font-size:20px; margin-bottom:10px; }
  .card p{ color:#4B5563; font-size:15px; }

  /* ---------- How it works / diagram ---------- */
  .diagram-wrap{
    background:
      radial-gradient(circle, rgba(37,133,248,0.07) 1px, transparent 1.4px) 0 0/24px 24px,
      #fff;
    border:1px solid rgba(222,230,242,0.6);
    border-radius:26px;
    padding: 44px 26px;
    margin-bottom: 60px;
    overflow-x:auto;
    box-shadow: 0 24px 60px -20px rgba(20,23,28,0.14), 0 2px 8px rgba(20,23,28,0.04);
  }
  .diagram-wrap svg{ width:100%; min-width:680px; height:auto; }

  .node-card{
    stroke: rgba(20,23,28,0.07); stroke-width:1;
    filter: drop-shadow(0 3px 10px rgba(20,23,28,0.07)) drop-shadow(0 1px 2px rgba(20,23,28,0.04));
  }
  .node-card--client{
    stroke: rgba(3,185,148,0.4); stroke-width:1.3;
    filter: drop-shadow(0 3px 10px rgba(3,185,148,0.12)) drop-shadow(0 1px 2px rgba(20,23,28,0.04));
  }

  .node-label{ font-family: var(--font-mono); font-size:11.5px; font-weight:600; fill: var(--graphite); }
  .hub-label{ font-family: var(--font-display); font-size:14px; font-weight:800; fill:#fff; }
  .diagram-caption{ font-family: var(--font-mono); font-size:11px; font-weight:600; fill: var(--electric-dark); }
  .cluster-label{
    font-family: var(--font-mono); font-size:10px; font-weight:600; letter-spacing:0.06em;
  }
  .cluster-label--eu{ fill: var(--electric-dark); }
  .cluster-label--asia{ fill: #03A180; }
  .pill-label{ font-family: var(--font-mono); font-size:9px; font-weight:700; fill:#fff; }

  .invoice-chip{
    stroke: #BEF0E1; stroke-width:1.3;
    filter: drop-shadow(0 6px 16px rgba(3,221,177,0.16));
  }

  .port{ fill:#fff; stroke:#C7D3E6; stroke-width:1.4; }
  .port--out{ stroke:#03B994; }

  .flow-line{
    stroke-dasharray: 6 6;
    animation: dash 1.6s linear infinite;
  }
  .flow-line--out{ stroke-dasharray: 7 5; animation-duration: 1.3s; }
  .hub-node{
    animation: hubPulse 3.2s ease-in-out infinite;
    transform-origin: 480px 153px;
    filter: drop-shadow(0 10px 24px rgba(22,101,204,0.28));
  }
  @keyframes hubPulse{
    0%, 100%{ filter: drop-shadow(0 10px 24px rgba(22,101,204,0.28)) drop-shadow(0 0 0 rgba(75,155,255,0)); }
    50%{ filter: drop-shadow(0 10px 24px rgba(22,101,204,0.28)) drop-shadow(0 0 14px rgba(75,155,255,0.45)); }
  }

  .steps{ position:relative; }
  .steps-track{
    display:flex; justify-content:space-between; align-items:center;
    position:relative; margin-bottom:22px; padding:0 16px;
  }
  .steps-track::before{
    content:""; position:absolute; top:50%; left:16px; right:16px; height:2px;
    background: linear-gradient(90deg, var(--electric), var(--signal));
    opacity:0.35; transform:translateY(-50%); z-index:0;
  }
  .step-dot{
    position:relative; z-index:1;
    width:32px; height:32px; border-radius:50%;
    font-family: var(--font-mono); font-size:13px; font-weight:700; color:#fff;
    background: linear-gradient(135deg, var(--electric), var(--electric-dark));
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 6px 14px -4px rgba(22,101,204,0.45);
  }
  .steps-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
  .step h3{ font-size:16.5px; margin-bottom:8px; }
  .step p{ color:#4B5563; font-size:14.5px; }

  /* ---------- Contact ---------- */
  .contact{ background: var(--dark); color: var(--dark-text); }
  .contact h2{ color:#fff; }
  .contact .eyebrow{ color: var(--signal); }
  .contact .eyebrow::before{ background: var(--electric); }
  .contact-grid{ display:grid; grid-template-columns: 1.1fr 1fr; gap:56px; align-items:start; }
  .contact-grid p.lead{ font-size:17px; color:#fff; margin-bottom:14px; max-width:460px; }
  .contact-grid p.sub{ color: var(--dark-text); margin-bottom:32px; max-width:460px; }
  .contact-cta{
    display:inline-flex; align-items:center; gap:10px;
    background: var(--signal); color:#06231C; padding:14px 24px; border-radius:9px;
    font-weight:700; font-size:15px;
  }
  .info-list{ border-top:1px solid var(--dark-line); }
  .info-list li{
    display:flex; justify-content:space-between; gap:20px;
    padding: 16px 0; border-bottom:1px solid var(--dark-line);
    font-size:14.5px;
  }
  .info-list .label{ font-family: var(--font-mono); color:#7C879E; font-size:12.5px; text-transform:uppercase; letter-spacing:0.08em; }
  .info-list .value{ color:#fff; text-align:right; }

  footer{
    background: var(--dark); border-top:1px solid var(--dark-line);
    padding: 26px 0; color:#7C879E; font-size:13px;
  }
  .footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }

  /* ---------- Safe scroll reveal ----------
     Default state = fully visible (no JS required to see content).
     JS only ADDS a one-off entrance animation when the element scrolls
     into view; it never hides content up front. */
  .reveal-target.in-view{
    animation: revealUp .6s ease both;
  }
  @keyframes revealUp{
    from{ opacity:0; transform: translateY(14px); }
    to{ opacity:1; transform:none; }
  }

  @media (prefers-reduced-motion: reduce){
    .trace-line, .flow-line, .hub-node,
    .hero h1, .hero p.sub, .hero .eyebrow, .hero-ctas, .trace-strip,
    .hero-bg, .hero-hub, .ping, .orbit-ring, .hero-links path, .sat{
      animation:none !important;
    }
    .reveal-target.in-view{ animation:none; }
  }

  /* ---------- Responsive ---------- */
  @media (max-width: 860px){
    .about-grid, .contact-grid{ grid-template-columns:1fr; }
    .cards{ grid-template-columns:1fr; }
    .steps-grid{ grid-template-columns: 1fr 1fr; row-gap:34px; }
    .steps-track{ display:none; }
    .step{ position:relative; padding-top:44px; counter-increment: step; }
    .steps-grid{ counter-reset: step; }
    .step::before{
      content: counter(step, decimal-leading-zero);
      font-family: var(--font-mono); font-size:13px; font-weight:700; color:#fff;
      background: linear-gradient(135deg, var(--electric), var(--electric-dark));
      width:32px; height:32px; border-radius:50%;
      display:flex; align-items:center; justify-content:center;
      position:absolute; top:0; left:0;
      box-shadow: 0 6px 14px -4px rgba(22,101,204,0.45);
    }
  }
  @media (max-width: 720px){
    .nav-links{
      position:fixed; top:64px; left:0; right:0; bottom:0;
      background:#fff; flex-direction:column; align-items:flex-start;
      padding: 28px; gap:22px; transform: translateX(100%);
      transition: transform .25s ease; z-index:90;
    }
    .nav-links.open{ transform: translateX(0); }
    .nav-cta{ display:none; }
    .burger{ display:block; }
    .steps-grid{ grid-template-columns: 1fr; }
    .hero{ padding: 64px 0 56px; }
  }