:root{
  --ink:#071A3D;
  --deep:#0C2E6E;
  --splash:#1E7BFF;
  --aqua:#29D3E6;
  --wash:#E9F3FF;
  --paper:#FBFDFF;
  --text:#0E1B33;
  --muted:#5B6B85;
  --line:#DCE7F5;
  --grad:linear-gradient(120deg,var(--splash),var(--aqua));
  --bs-primary:#1E7BFF;
  --bs-primary-rgb:30,123,255;
}

*{ scroll-behavior:smooth; }

body{
  font-family:"DM Sans",system-ui,sans-serif;
  color:var(--text);
  background:var(--paper);
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:var(--ink);
  letter-spacing:-0.01em;
  line-height:1.08;
}

a{ color:var(--splash); text-decoration:none; }
a:hover{ color:var(--deep); }
::selection{ background:var(--aqua); color:var(--ink); }

:focus-visible{
  outline:3px solid var(--aqua);
  outline-offset:2px;
  border-radius:4px;
}

.container{ max-width:1140px; }

/* ---------- Buttons ---------- */
.btn-splash{
  background:var(--grad);
  color:#fff;
  border:0;
  font-weight:600;
  padding:.8rem 1.6rem;
  border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(30,123,255,.7);
  transition:transform .18s ease, box-shadow .18s ease;
}
.btn-splash:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 30px -12px rgba(30,123,255,.85);
}
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border:1.5px solid var(--line);
  font-weight:600;
  padding:.8rem 1.6rem;
  border-radius:999px;
  transition:border-color .18s ease, color .18s ease;
}
.btn-ghost:hover{ border-color:var(--splash); color:var(--splash); }
.on-dark .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.28); }
.on-dark .btn-ghost:hover{ border-color:var(--aqua); color:var(--aqua); }

/* ---------- Navbar ---------- */
.site-nav{
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
  padding:1.1rem 0;
}
.site-nav.scrolled{
  background:rgba(7,26,61,.92);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.06);
  padding:.7rem 0;
}
.brand{
  font-family:"Space Grotesk",sans-serif;
  font-weight:700;
  font-size:1.28rem;
  color:#fff;
  display:flex;
  align-items:center;
  gap:.55rem;
}
.brand svg{ flex:0 0 auto; }
.site-nav .nav-link{
  color:rgba(255,255,255,.78);
  font-weight:500;
  padding:.4rem 1rem;
  transition:color .15s ease;
}
.site-nav .nav-link:hover,
.site-nav .nav-link:focus{ color:#fff; }
.navbar-toggler{ border-color:rgba(255,255,255,.35); }
.navbar-toggler:focus{ box-shadow:none; }
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.85)' stroke-width='2.2' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3E%3C/svg%3E");
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  background:radial-gradient(120% 120% at 80% -10%, #12408f 0%, var(--ink) 55%);
  color:#fff;
  overflow:hidden;
  padding:11rem 0 8rem;
}
.hero .eyebrow{ color:var(--aqua); font-weight:600; font-size:.95rem; margin-bottom:1rem; }
.hero h1{ color:#fff; font-size:clamp(2.6rem,6vw,4.6rem); font-weight:700; margin-bottom:1.4rem; }
.hero h1 .wet{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero .lede{ color:rgba(255,255,255,.82); font-size:1.2rem; max-width:34rem; margin-bottom:2.2rem; }
.hero-meta{ margin-top:3.5rem; display:flex; gap:2.6rem; flex-wrap:wrap; }
.hero-meta .num{ font-family:"Space Grotesk",sans-serif; font-size:2rem; font-weight:700; color:#fff; }
.hero-meta .lbl{ color:rgba(255,255,255,.6); font-size:.92rem; }

.splash-blob{ position:absolute; border-radius:50%; filter:blur(2px); opacity:.9; pointer-events:none; }
.blob-1{
  width:420px;height:420px;top:-90px;right:-60px;
  background:radial-gradient(circle at 35% 35%, rgba(41,211,230,.55), rgba(30,123,255,.18) 60%, transparent 72%);
  animation:float 9s ease-in-out infinite;
}
.blob-2{
  width:260px;height:260px;bottom:-40px;right:22%;
  background:radial-gradient(circle at 40% 40%, rgba(30,123,255,.5), transparent 70%);
  animation:float 11s ease-in-out infinite reverse;
}
.droplet{ position:absolute; border-radius:50%; background:var(--aqua); opacity:.5; pointer-events:none; }
.d1{width:14px;height:14px;top:26%;right:18%;animation:float 6s ease-in-out infinite;}
.d2{width:9px;height:9px;top:60%;right:40%;background:var(--splash);animation:float 7.5s ease-in-out infinite reverse;}
.d3{width:20px;height:20px;top:74%;right:9%;opacity:.35;animation:float 8s ease-in-out infinite;}

@keyframes float{
  0%,100%{ transform:translateY(0) translateX(0); }
  50%{ transform:translateY(-18px) translateX(8px); }
}

.reveal{ opacity:0; transform:translateY(16px); }
.loaded .reveal{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s ease; }
.loaded .r1{ transition-delay:.05s; }
.loaded .r2{ transition-delay:.18s; }
.loaded .r3{ transition-delay:.31s; }
.loaded .r4{ transition-delay:.44s; }

.wave{ display:block; width:100%; height:70px; }

/* ---------- Sections ---------- */
section{ padding:6rem 0; }
.section-head{ max-width:46rem; margin-bottom:3.2rem; }
.section-head .kicker{ color:var(--splash); font-weight:600; margin-bottom:.6rem; }
.section-head h2{ font-size:clamp(2rem,4vw,2.9rem); margin-bottom:.9rem; }
.section-head p{ color:var(--muted); font-size:1.12rem; margin:0; }

/* ---------- Services / pillars ---------- */
.service{
  height:100%;
  padding:2.2rem 1.9rem;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service:hover{
  border-color:transparent;
  transform:translateY(-4px);
  box-shadow:0 24px 48px -28px rgba(12,46,110,.5);
}
.service .ic{
  width:52px;height:52px;border-radius:14px;
  display:grid;place-items:center;
  background:var(--wash);color:var(--splash);
  margin-bottom:1.2rem;
}
.service:hover .ic{ background:var(--grad); color:#fff; }
.service h3{ font-size:1.35rem; margin-bottom:.5rem; }
.service > p{ color:var(--muted); font-size:1rem; }
.svc-list{ list-style:none; padding:0; margin:1.1rem 0 0; }
.svc-list li{
  position:relative; padding-left:1.5rem; margin-bottom:.55rem;
  color:var(--text); font-size:.99rem;
}
.svc-list li::before{
  content:""; position:absolute; left:0; top:.5rem;
  width:9px; height:9px; border-radius:50%; background:var(--grad);
}

/* ---------- Process ---------- */
.process{ background:var(--ink); color:#fff; }
.process .section-head h2{ color:#fff; }
.process .section-head p{ color:rgba(255,255,255,.7); }
.process .kicker{ color:var(--aqua); }
.step{ position:relative; padding-top:2.4rem; }
.step .idx{
  font-family:"Space Grotesk",sans-serif;
  font-size:1rem; font-weight:700; color:var(--ink);
  width:2.4rem;height:2.4rem;border-radius:50%;
  background:var(--grad); display:grid;place-items:center;
  position:absolute;top:0;left:0;
}
.step h3{ color:#fff; font-size:1.25rem; margin:.4rem 0 .5rem; }
.step p{ color:rgba(255,255,255,.68); font-size:1rem; margin:0; }
.step-line{ height:2px; background:linear-gradient(90deg,var(--splash),transparent); margin-top:1.2rem; }

/* ---------- Work ---------- */
.work-card{
  border-radius:18px; overflow:hidden;
  border:1px solid var(--line); background:#fff; height:100%;
  transition:transform .2s ease, box-shadow .2s ease;
}
.work-card:hover{ transform:translateY(-4px); box-shadow:0 24px 48px -28px rgba(12,46,110,.5); }
.work-thumb{ height:190px; }
.work-thumb--1{ background:linear-gradient(135deg,#1E7BFF,#0C2E6E); }
.work-thumb--2{ background:linear-gradient(135deg,#29D3E6,#1E7BFF); }
.work-thumb--3{ background:linear-gradient(135deg,#0C2E6E,#29D3E6); }
.work-body{ padding:1.4rem 1.5rem 1.7rem; }
.work-body .tag{ color:var(--splash); font-weight:600; font-size:.85rem; }
.work-body h3{ font-size:1.22rem; margin:.3rem 0 .4rem; }
.work-body p{ color:var(--muted); font-size:.98rem; margin:0; }

/* ---------- Stats ---------- */
.band{ background:var(--wash); }
.stat .n{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(2.4rem,5vw,3.4rem); font-weight:700;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; line-height:1;
}
.stat p{ color:var(--muted); margin:.5rem 0 0; }

/* ---------- Testimonial ---------- */
.quote{
  font-family:"Space Grotesk",sans-serif;
  font-size:clamp(1.5rem,3.4vw,2.2rem); line-height:1.32;
  color:var(--ink); font-weight:500;
}
.quote-mark{
  font-family:"Space Grotesk",sans-serif;
  font-size:4rem; line-height:0; color:var(--aqua);
  display:block; height:1.6rem;
}
.who{ color:var(--muted); margin-top:1.4rem; }
.who strong{ color:var(--ink); }

/* ---------- Contact ---------- */
.contact{
  background:radial-gradient(120% 120% at 20% 0%, #12408f 0%, var(--ink) 60%);
  color:#fff; border-radius:28px; padding:3.5rem;
}
.contact h2{ color:#fff; font-size:clamp(2rem,4vw,2.8rem); }
.contact p.sub{ color:rgba(255,255,255,.78); }
.contact-details{ margin-top:1.6rem; }
.contact-line{ color:rgba(255,255,255,.85); margin-bottom:.5rem; }
.contact-line a{ color:#fff; }
.contact-line a:hover{ color:var(--aqua); }
.form-label{ color:rgba(255,255,255,.8); font-weight:500; font-size:.95rem; }
.form-control{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#fff; border-radius:12px; padding:.8rem 1rem;
}
.form-control::placeholder{ color:rgba(255,255,255,.45); }
.form-control:focus{
  background:rgba(255,255,255,.1);
  border-color:var(--aqua);
  box-shadow:0 0 0 .2rem rgba(41,211,230,.2);
  color:#fff;
}

/* Honeypot — kept out of the visual + tab order */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Flash messages */
.flash{ border-radius:12px; padding:.9rem 1.1rem; margin-bottom:1.3rem; font-weight:500; }
.flash--ok{ background:rgba(41,211,230,.14); border:1px solid rgba(41,211,230,.5); color:#d6fbff; }
.flash--error{ background:rgba(255,107,107,.12); border:1px solid rgba(255,107,107,.5); color:#ffdede; }

/* ---------- Footer ---------- */
footer{ background:var(--ink); color:rgba(255,255,255,.6); padding:3rem 0; }
.foot-brand{ font-size:1.15rem; margin-bottom:.8rem; }
.foot-lead{ max-width:22rem; margin:0; }
.foot-h{ color:#fff; font-size:1rem; margin-bottom:1rem; }
footer a{ color:rgba(255,255,255,.6); }
footer a:hover{ color:#fff; }
.foot-rule{ border-color:rgba(255,255,255,.12); margin:2.2rem 0 1.2rem; }

@media (max-width:575px){
  .contact{ padding:2.2rem 1.5rem; }
  .hero{ padding:9rem 0 5.5rem; }
  section{ padding:4.5rem 0; }
}

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