:root{
    --navy-deep:#0F0D3A;
    --navy:#1B1670;
    --indigo:#2E27A0;
    --orange:#F5821F;
    --orange-bright:#FF9A2E;
    --amber:#FFC93C;
    --neon:#F4E645;
    --cream:#FAF8F3;
    --cream-2:#F1EEE4;
    --ink:#16142B;
    --ink-soft:#4A4870;
    --white:#FFFFFF;
    --line: rgba(22,20,43,0.1);
    --shadow: 0 20px 50px -20px rgba(15,13,58,0.35);
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  .progress-bar{
    position:fixed; top:0; left:0; height:3px; width:0%;
    background:linear-gradient(90deg, var(--orange), var(--neon));
    z-index:1000;
    box-shadow:0 0 12px rgba(244,230,69,0.6);
    transition:width .1s linear;
  }
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',sans-serif;
    color:var(--ink);
    background:var(--cream);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,h4{
    font-family:'Space Grotesk',sans-serif;
    letter-spacing:-0.02em;
    line-height:1.05;
  }
  a{text-decoration:none;color:inherit;}
  img,svg{display:block;max-width:100%;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:500;
  }
  .wrap{
    max-width:1200px;
    margin:0 auto;
    padding:0 32px;
  }
  @media (max-width:640px){ .wrap{padding:0 20px;} }

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 0;
    transition:all .35s ease;
  }
  header.scrolled{
    background:rgba(15,13,58,0.92);
    backdrop-filter:blur(10px);
    padding:14px 0;
    box-shadow:0 6px 30px rgba(0,0,0,0.25);
  }
  header .wrap{display:flex;align-items:center;justify-content:space-between;}
  .logo{
    display:flex; align-items:center; gap:10px;
    font-family:'Space Grotesk',sans-serif;
    font-weight:700; font-size:1.25rem; color:var(--white);
  }
  .logo .mark{
    width:34px;height:34px;position:relative;
  }
  nav.links{display:flex; align-items:center; gap:36px;}
  nav.links a{
    color:rgba(255,255,255,0.82);
    font-size:0.9rem; font-weight:500;
    position:relative;
    transition:color .2s;
  }
  nav.links a:hover{color:var(--neon);}
  .nav-cta{
    background:var(--orange);
    color:var(--white) !important;
    padding:11px 22px;
    border-radius:999px;
    font-weight:600;
    font-size:0.88rem;
    box-shadow:0 8px 24px rgba(245,130,31,0.35);
    transition:transform .2s, box-shadow .2s;
  }
  .nav-cta:hover{transform:translateY(-2px); box-shadow:0 12px 30px rgba(245,130,31,0.5);}
  .burger{display:none;}

  /* ---------- HERO ---------- */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex; align-items:center;
    background:
      radial-gradient(1100px 700px at 82% -10%, rgba(245,130,31,0.35), transparent 60%),
      radial-gradient(900px 600px at 10% 110%, rgba(244,230,69,0.12), transparent 60%),
      linear-gradient(160deg, var(--navy-deep) 0%, var(--navy) 55%, var(--indigo) 100%);
    overflow:hidden;
    padding-top:110px;
  }
  .hero-grid{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:linear-gradient(to bottom, black, transparent 85%);
    opacity:0.6;
    animation:gridDrift 26s linear infinite;
  }
  @keyframes gridDrift{
    0%{background-position:0 0;}
    100%{background-position:56px 112px;}
  }
  .orb{
    position:absolute;
    border-radius:50%;
    filter:blur(70px);
    opacity:0.55;
    pointer-events:none;
    z-index:1;
  }
  .orb-a{
    width:380px; height:380px;
    background:radial-gradient(circle, rgba(245,130,31,0.55), transparent 70%);
    top:-100px; right:-60px;
    animation:floatA 13s ease-in-out infinite;
  }
  .orb-b{
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(244,230,69,0.35), transparent 70%);
    bottom:-80px; left:-40px;
    animation:floatB 16s ease-in-out infinite;
  }
  @keyframes floatA{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(-30px, 30px) scale(1.08);}
  }
  @keyframes floatB{
    0%,100%{transform:translate(0,0) scale(1);}
    50%{transform:translate(30px, -20px) scale(1.1);}
  }
  .glow-follow{
    position:absolute;
    width:480px; height:480px;
    border-radius:50%;
    background:radial-gradient(circle, rgba(255,154,46,0.18), transparent 70%);
    top:0; left:0;
    transform:translate(-50%,-50%);
    pointer-events:none;
    z-index:1;
    transition:opacity .4s ease;
    opacity:0;
  }
  @media (max-width:900px){ .glow-follow{display:none;} }
  .hero-inner{
    position:relative; z-index:2;
    display:grid; grid-template-columns:1.05fr 0.95fr; gap:40px;
    align-items:center;
    width:100%;
  }
  .hero-copy .eyebrow{color:var(--neon);}
  .hero-copy h1{
    font-size:clamp(2.4rem, 5vw, 3.6rem);
    color:var(--white);
    margin:18px 0 22px;
  }
  .hero-copy h1 em{
    font-style:normal;
    background:linear-gradient(95deg, var(--amber), var(--neon));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .hero-copy p{
    color:rgba(255,255,255,0.72);
    font-size:1.08rem;
    max-width:520px;
    margin-bottom:34px;
  }
  .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:14px 26px;
    border-radius:999px;
    font-weight:600;
    font-size:0.94rem;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    border:1px solid transparent;
  }
  .btn-primary{
    background:var(--orange);
    color:var(--white);
    box-shadow:0 10px 30px rgba(245,130,31,0.4);
  }
  .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(245,130,31,0.55);}
  .btn-ghost{
    color:var(--white);
    border-color:rgba(255,255,255,0.28);
  }
  .btn-ghost:hover{background:rgba(255,255,255,0.08); border-color:rgba(255,255,255,0.5);}

  .hero-stats{
    display:flex; gap:34px; margin-top:52px; flex-wrap:wrap;
  }
  .hero-stats div{border-left:2px solid var(--orange); padding-left:14px;}
  .hero-stats b{
    display:block; font-family:'Space Grotesk',sans-serif;
    font-size:1.6rem; color:var(--white);
  }
  .hero-stats span{color:rgba(255,255,255,0.55); font-size:0.82rem;}

  /* network signature graphic */
  .mesh-wrap{
    position:relative;
    height:520px;
  }
  .mesh-wrap svg{width:100%; height:100%;}
  .mesh-node{fill:var(--navy-deep); stroke:var(--neon); stroke-width:1.4;}
  .mesh-node.hub{fill:var(--orange); stroke:var(--amber);}
  .mesh-line{stroke:rgba(244,230,69,0.35); stroke-width:1.2; fill:none;}
  .mesh-pulse{fill:var(--neon);}
  .mesh-label{
    font-family:'JetBrains Mono',monospace;
    font-size:9.5px;
    fill:rgba(255,255,255,0.55);
    letter-spacing:0.03em;
  }

  section{position:relative;}
  .section-pad{padding:110px 0;}
  @media (max-width:900px){ .section-pad{padding:74px 0;} }

  /* ---------- ABOUT ---------- */
  .about-head{max-width:640px; margin-bottom:56px;}
  .about-head .eyebrow{color:var(--orange);}
  .about-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:14px;}
  .three-col{
    display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
  }
  @media (max-width:860px){ .three-col{grid-template-columns:1fr;} }
  .info-card{
    background:var(--white);
    border:1px solid var(--line);
    border-radius:18px;
    padding:34px 30px;
    box-shadow:var(--shadow);
    position:relative;
    overflow:hidden;
    transform:perspective(800px) rotateX(0) rotateY(0);
    transition:transform .35s ease, box-shadow .35s ease;
    will-change:transform;
  }
  .tilt:hover{ box-shadow:0 26px 60px -20px rgba(15,13,58,0.4); }
  .info-card::before{
    content:'';
    position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--orange), var(--amber));
  }
  .info-card .ic{
    width:46px;height:46px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(135deg, var(--navy), var(--indigo));
    margin-bottom:18px;
  }
  .info-card h3{font-size:1.2rem; margin-bottom:10px;}
  .info-card p{color:var(--ink-soft); font-size:0.95rem; line-height:1.6;}

  /* ---------- IMAGE BANNER (parallax) ---------- */
  .img-banner{
    position:relative;
    min-height:420px;
    display:flex; align-items:center;
    overflow:hidden;
  }
  .img-banner-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    background-attachment:fixed;
    transform:scale(1.02);
  }
  @media (max-width:900px){
    .img-banner-bg{ background-attachment:scroll; }
  }
  .img-banner-overlay{
    position:absolute; inset:0;
    background:
      linear-gradient(100deg, rgba(15,13,58,0.92) 0%, rgba(27,22,112,0.82) 45%, rgba(245,130,31,0.55) 100%);
  }
  .img-banner-content{
    position:relative; z-index:2;
    max-width:640px;
    padding:70px 32px;
  }
  .img-banner-content .eyebrow{color:var(--neon);}
  .img-banner-content h2{
    color:var(--white);
    font-size:clamp(1.6rem,3vw,2.3rem);
    margin:14px 0 16px;
  }
  .img-banner-content p{color:rgba(255,255,255,0.75); font-size:1rem;}

  /* ---------- MARQUEE ---------- */
  .marquee-section{
    background:var(--navy-deep);
    padding:26px 0;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,0.08);
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .marquee-track{
    display:flex;
    width:max-content;
    animation:marqueeScroll 26s linear infinite;
  }
  .marquee-section:hover .marquee-track{ animation-play-state:paused; }
  .marquee-group{
    display:flex;
    align-items:center;
  }
  .marquee-group span{
    font-family:'JetBrains Mono',monospace;
    font-size:0.95rem;
    color:rgba(255,255,255,0.5);
    letter-spacing:0.05em;
    padding:0 28px;
    position:relative;
  }
  .marquee-group span::after{
    content:'●';
    color:var(--orange);
    font-size:0.5rem;
    position:absolute;
    right:-2px; top:50%; transform:translateY(-50%);
  }
  @keyframes marqueeScroll{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
  }

  /* ---------- SERVICES (mesh layout) ---------- */
  .services{background:var(--navy-deep); color:var(--white);}
  .services .about-head .eyebrow{color:var(--neon);}
  .services .about-head p{color:rgba(255,255,255,0.65);}
  .svc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
    gap:2px;
    background:rgba(255,255,255,0.08);
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.08);
  }
  .svc-card{
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
    padding:36px 30px;
    transition:background .25s ease, transform .35s ease;
    transform:perspective(800px) rotateX(0) rotateY(0);
    will-change:transform;
  }
  .svc-card:hover{background:rgba(245,130,31,0.09);}
  .svc-card .ic{
    width:42px; height:42px;
    margin-bottom:20px;
  }
  .svc-card h3{font-size:1.08rem; margin-bottom:10px; color:var(--white);}
  .svc-card p{color:rgba(255,255,255,0.6); font-size:0.9rem; line-height:1.6;}
  .svc-tag{
    display:inline-block;
    font-family:'JetBrains Mono',monospace;
    font-size:0.68rem;
    color:var(--neon);
    letter-spacing:0.08em;
    margin-bottom:12px;
  }

  /* ---------- WHY / VALUES ---------- */
  .why-grid{
    display:grid; grid-template-columns:repeat(5,1fr); gap:20px;
  }
  @media (max-width:1000px){ .why-grid{grid-template-columns:repeat(2,1fr);} }
  @media (max-width:560px){ .why-grid{grid-template-columns:1fr;} }
  .why-card{
    background:var(--cream);
    border:1px solid var(--line);
    border-radius:16px;
    padding:26px 22px;
  }
  .why-card .num{
    font-family:'JetBrains Mono',monospace;
    font-size:0.75rem;
    color:var(--orange);
    margin-bottom:14px;
    display:block;
  }
  .why-card h4{font-size:1rem; margin-bottom:8px;}
  .why-card p{font-size:0.86rem; color:var(--ink-soft); line-height:1.55;}

  /* ---------- STATS BAND ---------- */
  .stats-band{
    background:linear-gradient(100deg, var(--orange) 0%, #FF9A2E 55%, var(--amber) 100%);
    color:var(--white);
    padding:70px 0;
  }
  .stats-inner{
    display:grid; grid-template-columns:repeat(3,1fr); gap:30px; text-align:center;
  }
  @media (max-width:760px){ .stats-inner{grid-template-columns:1fr; gap:34px;} }
  .stats-inner b{
    font-family:'Space Grotesk',sans-serif;
    font-size:clamp(2rem,4vw,2.8rem);
    display:block;
  }
  .stats-inner span{
    font-family:'JetBrains Mono',monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    opacity:0.9;
    text-transform:uppercase;
  }

  /* ---------- CTA ---------- */
  .cta-section{
    position:relative;
    padding:120px 0;
    text-align:center;
    overflow:hidden;
  }
  .cta-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.05);
    animation:ctaSlowZoom 18s ease-in-out infinite alternate;
  }
  @keyframes ctaSlowZoom{
    0%{transform:scale(1.05);}
    100%{transform:scale(1.15);}
  }
  .cta-overlay{
    position:absolute; inset:0;
    background:linear-gradient(160deg, rgba(15,13,58,0.94) 10%, rgba(27,22,112,0.9) 55%, rgba(245,130,31,0.5) 100%);
  }
  .cta-content{ position:relative; z-index:2; }
  .cta-section h2{font-size:clamp(1.8rem,3.6vw,2.6rem); max-width:680px; margin:0 auto 20px; color:var(--white);}
  .cta-section p{color:rgba(255,255,255,0.75); max-width:520px; margin:0 auto 34px;}
  .cta-btns{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
  .btn-dark{background:var(--navy-deep); color:var(--white);}
  .btn-dark:hover{transform:translateY(-2px); box-shadow:0 14px 34px rgba(15,13,58,0.35);}
  .btn-outline-dark{border-color:var(--ink); color:var(--ink);}
  .btn-outline-dark:hover{background:var(--ink); color:var(--white);}

  /* ---------- CONTACT / FOOTER ---------- */
  footer{
    position:relative;
    background:var(--navy-deep);
    color:rgba(255,255,255,0.85);
    padding-top:90px;
    overflow:hidden;
  }
  .footer-bg{
    position:absolute; inset:0;
    background-size:cover;
    background-position:center;
    opacity:0.08;
    filter:grayscale(0.4);
    pointer-events:none;
  }
  footer .wrap{ position:relative; z-index:1; }
  .contact-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:60px;
  }
  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:40px;} }
  .contact-grid .eyebrow{color:var(--neon);}
  .contact-grid h2{color:var(--white); font-size:clamp(1.7rem,3vw,2.3rem); margin:14px 0 22px;}
  .contact-list{list-style:none; margin-top:26px;}
  .contact-list li{
    display:flex; gap:14px; padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,0.08);
  }
  .contact-list .ic{
    width:38px;height:38px; border-radius:10px; flex-shrink:0;
    background:rgba(245,130,31,0.15);
    display:flex; align-items:center; justify-content:center;
  }
  .contact-list strong{display:block; color:var(--white); font-size:0.92rem; margin-bottom:2px;}
  .contact-list span{color:rgba(255,255,255,0.6); font-size:0.88rem;}
  .map-card{
    border-radius:20px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.1);
    height:100%;
    min-height:340px;
  }
  .map-card iframe{width:100%; height:100%; border:0; filter:grayscale(0.3) invert(0.92) contrast(0.9);}

  .footer-bottom{
    margin-top:80px;
    padding:28px 0;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
  }
  .footer-bottom .logo{font-size:1.05rem;}
  .footer-bottom p{color:rgba(255,255,255,0.45); font-size:0.82rem;}

  /* reveal */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:none;}

  @media (prefers-reduced-motion: reduce){
    .reveal{opacity:1; transform:none; transition:none;}
    *{scroll-behavior:auto !important;}
  }

  /* mobile nav */
  @media (max-width:860px){
    nav.links{
      position:fixed; top:0; right:-100%; height:100vh; width:78%; max-width:320px;
      background:var(--navy-deep);
      flex-direction:column; align-items:flex-start;
      padding:100px 30px; gap:26px;
      transition:right .35s ease;
      z-index:99;
    }
    nav.links.open{right:0;}
    .burger{
      display:flex; flex-direction:column; gap:5px; cursor:pointer;
      width:26px; z-index:101;
    }
    .burger span{height:2px; background:var(--white); border-radius:2px;}
    .nav-cta{display:none;}
  }