:root{
    --navy-900:#0A1930;
    --navy-800:#122744;
    --navy-700:#1B3A63;
    --blue-600:#1E7FD1;
    --blue-500:#2E90E0;
    --blue-400:#6BB3EA;
    --amber-500:#C7902F;
    --amber-300:#E3B968;
    --paper:#F5F7FA;
    --paper-deep:#EEF2F6;
    --white:#FFFFFF;
    --ink-900:#101826;
    --ink-600:#48566B;
    --ink-400:#8695A8;
    --line:#E1E7EE;
    --shadow: 0 20px 60px -20px rgba(10,25,48,0.25);
    --radius: 4px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter', sans-serif;
    color:var(--ink-900);
    background:var(--white);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{text-decoration:none; color:inherit;}
  ul{list-style:none;}
  .container{
    width:100%;
    max-width:1240px;
    margin:0 auto;
    padding:0 32px;
  }
  .eyebrow{
    font-family:'IBM Plex Mono', monospace;
    font-size:12px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    font-weight:500;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;
    height:1px;
    background:currentColor;
    display:inline-block;
  }
  h1,h2,h3{
    font-family:'Fraunces', serif;
    font-weight:600;
    letter-spacing:-0.01em;
    color:var(--navy-900);
  }
  .section{
    padding:120px 0;
    position:relative;
  }
  .section--tight{padding:96px 0;}
  .section-head{
    max-width:640px;
    margin-bottom:64px;
  }
  .section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
  .section-head h2{
    font-size:clamp(30px,3.6vw,44px);
    margin-top:16px;
    line-height:1.15;
  }
  .section-head p{
    margin-top:18px;
    color:var(--ink-600);
    font-size:16.5px;
    max-width:560px;
  }
  .section-head.center p{margin-left:auto;margin-right:auto;}

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

  /* ===== buttons ===== */
  .btn{
    font-family:'Inter';
    font-weight:600;
    font-size:14.5px;
    letter-spacing:0.01em;
    padding:15px 28px;
    border-radius:var(--radius);
    display:inline-flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    transition:all .25s ease;
    border:1px solid transparent;
    white-space:nowrap;
  }
  .btn--primary{
    background:var(--blue-600);
    color:#fff;
    box-shadow:0 10px 26px -10px rgba(30,127,209,0.55);
  }
  .btn--primary:hover{background:#186bb3; transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(30,127,209,0.65);}
  .btn--ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.35);
    color:#fff;
  }
  .btn--ghost:hover{background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.6); transform:translateY(-2px);}
  .btn--dark{
    background:var(--navy-900);
    color:#fff;
  }
  .btn--dark:hover{background:var(--blue-600); transform:translateY(-2px);}
  .btn--outline-navy{
    border:1px solid var(--line);
    color:var(--navy-900);
    background:#fff;
  }
  .btn--outline-navy:hover{border-color:var(--blue-600); color:var(--blue-600); transform:translateY(-2px);}

  /* ===== header ===== */
  header{
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:rgba(10,25,48,0.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,0.08);
    transition:background .3s ease, padding .3s ease;
  }
  header.scrolled{background:rgba(9,22,42,0.94);}
  .nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 0;
  }
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:80px; width:auto;}
  .brand-name{
    font-family:'Fraunces'; font-weight:600; color:#fff; font-size:16px; letter-spacing:0.01em; line-height:1.15;
  }
  .brand-name span{
    display:block; font-family:'IBM Plex Mono'; font-size:9.5px; letter-spacing:0.15em; color:var(--blue-400); font-weight:500; margin-top:2px;
  }
  .nav-links{
    display:flex; align-items:center; gap:34px;
  }
  .nav-links a{
    font-size:13.5px; font-weight:500; color:rgba(255,255,255,0.82);
    letter-spacing:0.01em;
    position:relative;
    padding:6px 0;
    transition:color .2s ease;
  }
  .nav-links a:hover{color:#fff;}
  .nav-links a::after{
    content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--blue-400);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-right{display:flex; align-items:center; gap:22px;}
  .burger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
  .burger span{width:24px; height:2px; background:#fff; display:block;}

  /* ===== hero ===== */
  .hero{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    background:
      radial-gradient(ellipse at 78% 18%, rgba(30,127,209,0.35), transparent 55%),
      linear-gradient(180deg, var(--navy-900) 0%, #0D2038 55%, var(--navy-800) 100%);
    overflow:hidden;
    padding-top:96px;
  }
  .hero-routes{position:absolute; inset:0; opacity:0.55;}
  .hero-grid-overlay{
    position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size:56px 56px;
    mask-image:linear-gradient(180deg, transparent, black 30%, black 70%, transparent);
  }
  .hero-inner{position:relative; z-index:2; width:100%;}
  .hero-content{max-width:760px;}
  .hero .eyebrow{color:var(--blue-400);}
  .hero h1{
    color:#fff;
    font-size:clamp(38px, 5.6vw, 68px);
    line-height:1.06;
    margin-top:22px;
    letter-spacing:-0.015em;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--blue-400);
    font-weight:500;
  }
  .hero p.lead{
    color:rgba(255,255,255,0.72);
    font-size:17.5px;
    max-width:560px;
    margin-top:24px;
  }
  .hero-cta{display:flex; gap:16px; margin-top:40px; flex-wrap:wrap;}
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(3,auto);
    gap:56px;
    margin-top:76px;
    padding-top:36px;
    border-top:1px solid rgba(255,255,255,0.12);
    max-width:640px;
  }
  .hero-stat .num{
    font-family:'IBM Plex Mono'; font-size:28px; color:#fff; font-weight:600; letter-spacing:-0.02em;
  }
  .hero-stat .label{
    font-size:12px; color:rgba(255,255,255,0.55); margin-top:6px; letter-spacing:0.03em;
  }
  .hero-port-tag{
    position:absolute;
    font-family:'IBM Plex Mono';
    font-size:10.5px;
    color:rgba(255,255,255,0.65);
    display:flex; align-items:center; gap:7px;
    letter-spacing:0.04em;
  }
  .hero-port-tag .dot{
    width:6px; height:6px; border-radius:50%; background:var(--amber-300);
    box-shadow:0 0 0 4px rgba(199,144,47,0.18);
  }
  .scroll-cue{
    position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
    display:flex; flex-direction:column; align-items:center; gap:8px;
    color:rgba(255,255,255,0.5); font-family:'IBM Plex Mono'; font-size:10px; letter-spacing:0.15em;
    z-index:2;
  }
  .scroll-cue .line{width:1px; height:34px; background:linear-gradient(180deg, rgba(255,255,255,0.7), transparent); animation:scrollmove 2s ease infinite;}
  @keyframes scrollmove{0%{transform:scaleY(0); transform-origin:top;}50%{transform:scaleY(1);transform-origin:top;}51%{transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

  /* wave divider */
  .wave-divider{
    width:100%; height:64px; display:block;
  }

  /* ===== about ===== */
  .about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
  }
  .about-copy p{color:var(--ink-600); font-size:16px; margin-top:18px;}
  .about-facts{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 32px;
    margin-top:36px;
  }
  .about-fact{border-top:1px solid var(--line); padding-top:14px;}
  .about-fact .f-num{font-family:'Fraunces'; font-size:26px; color:var(--blue-600); font-weight:600;}
  .about-fact .f-label{font-size:12.5px; color:var(--ink-400); margin-top:4px; letter-spacing:0.02em;}
  .about-visual{
    position:relative;
    aspect-ratio:1/1.02;
    border-radius:6px;
    background:linear-gradient(160deg, var(--navy-800), var(--navy-900));
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
  }
  .about-visual svg{width:78%; height:78%;}
  .about-visual .frame-label{
    position:absolute; bottom:22px; left:22px; right:22px;
    font-family:'IBM Plex Mono'; font-size:10.5px; color:rgba(255,255,255,0.45);
    letter-spacing:0.08em; display:flex; justify-content:space-between;
    border-top:1px solid rgba(255,255,255,0.12); padding-top:12px;
  }
  .box-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  /* ===== services ===== */
  .services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:1px;
    background:var(--line);
    border:1px solid var(--line);
  }
  .service-card{
    background:#fff;
    padding:44px 36px;
    transition:background .3s ease;
    position:relative;
  }
  .service-card:hover{background:var(--paper);}
  .service-card .s-index{
    font-family:'IBM Plex Mono'; font-size:11px; color:var(--blue-600); letter-spacing:0.08em;
  }
  .service-card .s-icon{margin:22px 0 18px;}
  .service-card h3{
    font-size:19px; font-weight:600; margin-bottom:12px; color:var(--navy-900);
  }
  .service-card p{
    font-size:14.5px; color:var(--ink-600); line-height:1.65;
  }
  .service-card .s-link{
    margin-top:20px; font-size:13px; font-weight:600; color:var(--blue-600);
    display:inline-flex; align-items:center; gap:6px; opacity:0; transform:translateX(-6px);
    transition:all .25s ease;
  }
  .service-card:hover .s-link{opacity:1; transform:translateX(0);}
  .service-card.wide{grid-column:span 1;}

  /* ===== why choose us (dark) ===== */
  .why{
    background:var(--navy-900);
    color:#fff;
    position:relative;
  }
  .why::before{
    content:"";
    position:absolute; inset:0;
    background:radial-gradient(ellipse at 10% 90%, rgba(30,127,209,0.22), transparent 60%);
  }
  .why .eyebrow{color:var(--blue-400);}
  .why .section-head h2{color:#fff;}
  .why .section-head p{color:rgba(255,255,255,0.6);}
  .why-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:1px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.08);
    position:relative; z-index:1;
  }
  .why-item{
    background:var(--navy-900);
    padding:34px 28px;
  }
  .why-item .w-num{
    font-family:'IBM Plex Mono'; font-size:12px; color:var(--amber-300); letter-spacing:0.06em;
  }
  .why-item h4{
    font-family:'Fraunces'; font-size:16.5px; font-weight:600; color:#fff; margin:16px 0 10px; line-height:1.3;
  }
  .why-item p{font-size:13px; color:rgba(255,255,255,0.55); line-height:1.6;}

  /* ===== certifications ===== */
  .cert-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px;
  }
  .cert-card{
    border:1px solid var(--line);
    border-radius:6px;
    padding:40px;
    display:flex; gap:24px;
    background:#fff;
    transition:box-shadow .3s ease, transform .3s ease;
  }
  .cert-card:hover{box-shadow:var(--shadow); transform:translateY(-4px);}
  .cert-badge{
    flex:none; width:60px; height:60px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
  }
  .cert-card h3{font-size:18px; margin-bottom:4px;}
  .cert-card .cert-code{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--blue-600); letter-spacing:0.05em; margin-bottom:10px; display:block;}
  .cert-card p{font-size:14px; color:var(--ink-600);}

  /* ===== projects ===== */
  .projects-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:20px;
    height:520px;
  }
  .project-tile{
    position:relative;
    border-radius:6px;
    overflow:hidden;
    display:flex; flex-direction: column; overflow: hidden;
    padding:28px;
    background-size:cover;
  }
  .project-tile img{
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    object-position: 75% center;
  }
  .project-tile::before{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 40%, rgba(8,18,33,0.85) 100%);
  }
  .project-tile .p-label{position:relative; z-index:1; color:#fff;}
  .project-tile .p-label .eyebrow{color:var(--blue-400); margin-bottom:8px;}
  .project-tile .p-label h4{font-family:'Fraunces'; font-size:20px; font-weight:600;}
  .project-tile svg{position:absolute; opacity:.18; z-index:0;}
  .tile-1{background:linear-gradient(155deg,#12345c,#0a1930);}
  .tile-2{background:linear-gradient(155deg,#1b3a63,#0d2038);}
  .tile-3{background:linear-gradient(155deg,#0d2038,#122744);}

  /* ===== clients ===== */
  .clients-row{
    display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items: center;
  }
  .clients-row img.logo-long{
    width: 20%;
    height: 20%;
  }
  .clients-row img.logo-box{
    width: 15%;
    height: 15%;
  }
  .client-chip{
    border:1px solid var(--line);
    padding:18px 34px;
    border-radius:4px;
    font-family:'IBM Plex Mono';
    font-size:13px;
    letter-spacing:0.03em;
    color:var(--ink-400);
    background:#fff;
    transition:all .25s ease;
  }
  .client-chip:hover{border-color:var(--blue-600); color:var(--navy-900);}

  /* ===== CTA band ===== */
  .cta-band{
    background:linear-gradient(120deg, var(--blue-600), var(--navy-800));
    padding:80px 0;
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .cta-band h2{color:#fff; font-size:clamp(26px,3vw,38px);}
  .cta-band p{color:rgba(255,255,255,0.78); margin-top:14px; max-width:520px; margin-left:auto; margin-right:auto;}
  .cta-band .hero-cta{justify-content:center; margin-top:32px;}

  /* ===== footer ===== */
  footer{background:var(--navy-900); color:rgba(255,255,255,0.6); padding:80px 0 28px;}
  .footer-grid{
    display:grid;
    grid-template-columns:1.6fr 1fr 1fr 1.2fr;
    gap:48px;
    padding-bottom:56px;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .footer-brand img{width:100px; height: 100px; object-fit: cover; margin-bottom:16px;}
  .footer-brand p{font-size:13.5px; max-width:280px; line-height:1.7;}
  .footer-col h5{
    font-family:'IBM Plex Mono'; font-size:11.5px; letter-spacing:0.1em; color:rgba(255,255,255,0.4); margin-bottom:18px; text-transform:uppercase;
  }
  .footer-col li{margin-bottom:11px;}
  .footer-col a{font-size:13.5px; color:rgba(255,255,255,0.68); transition:color .2s ease;}
  .footer-col a:hover{color:#fff;}
  .footer-bottom{
    display:flex; justify-content:space-between; align-items:center; padding-top:26px;
    font-size:12.5px; color:rgba(255,255,255,0.4); flex-wrap:wrap; gap:12px;
  }

  /* ===== whatsapp float ===== */
  .wa-float{
    position:fixed; right:28px; bottom:28px; z-index:300;
    width:58px; height:58px; border-radius:50%;
    background:#25D366;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 12px 28px -8px rgba(37,211,102,0.6);
    cursor:pointer;
    transition:transform .25s ease;
  }
  .wa-float:hover{transform:scale(1.08);}
  .wa-float::before{
    content:""; position:absolute; inset:0; border-radius:50%;
    background:#25D366; opacity:0.5;
    animation:wapulse 2.2s ease-out infinite;
  }
  @keyframes wapulse{0%{transform:scale(1); opacity:0.5;}100%{transform:scale(1.9); opacity:0;}}
  .wa-tooltip{
    position:absolute; right:70px; top:50%; transform:translateY(-50%);
    background:#fff; color:var(--navy-900); font-size:13px; font-weight:600;
    padding:9px 14px; border-radius:5px; white-space:nowrap;
    box-shadow:0 8px 20px -6px rgba(0,0,0,0.25);
    opacity:0; pointer-events:none; transition:opacity .2s ease, right .2s ease;
  }
  .wa-float:hover .wa-tooltip{opacity:1; right:76px;}

  /* mockup badge (not part of real site, indicates draft) */
  .mockup-badge{
    position:fixed; top:14px; left:14px; z-index:400;
    background:var(--amber-500); color:#fff; font-family:'IBM Plex Mono';
    font-size:10px; letter-spacing:0.08em; padding:6px 10px; border-radius:3px;
    box-shadow:0 6px 16px -4px rgba(0,0,0,0.3);
  }

  @media(max-width:980px){
    .about-grid{grid-template-columns:1fr; gap:48px;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .cert-grid{grid-template-columns:1fr;}
    .projects-grid{grid-template-columns:1fr 1fr; height:auto;}
    .project-tile{height:260px;}
    .footer-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
  }
  @media(max-width:760px){
    .nav-links{
      position:fixed; top:0; right:0; height:100vh; width:78%; max-width:340px;
      background:var(--navy-900); flex-direction:column; align-items:flex-start;
      padding:110px 32px 40px; gap:26px;
      transform:translateX(100%); transition:transform .35s ease;
    }
    .nav-links.open{transform:translateX(0);}
    .burger{display:flex;}
    .nav-right .btn--primary{display:none;}
    .hero-stats{grid-template-columns:1fr; gap:20px;}
    .services-grid{grid-template-columns:1fr;}
    .why-grid{grid-template-columns:1fr;}
    .projects-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr; gap:32px;}
    .section{padding:80px 0;}
  }

/* ===== multi-page navigation ===== */
.nav-links a.active{color:#fff;}
.nav-links a.active::after{width:100%;}

/* Fixed header compensation for pages without the full-screen hero. */
body:not(:has(.hero)){padding-top:96px;}
body:not(:has(.hero)) .section:first-of-type{padding-top:96px;}

@media(max-width:760px){
  body:not(:has(.hero)){padding-top:82px;}
  body:not(:has(.hero)) .section:first-of-type{padding-top:70px;}
}