:root{
  --navy:#14273E;
  --navy-2:#1C3450;
  --gold:#D0AB66;
  --gold-soft:#E3C68C;
  --light:#F8F6F0;
  --dark:#1A2233;
  --muted:#5C6470;
  --on-navy-muted:#B9C4D6;
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:84px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:"Tahoma","Segoe UI",sans-serif;
  color:var(--dark);
  line-height:1.6;
  background:#fff;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
section{padding:78px 6%;}
h2.section-title{font-size:32px; color:var(--navy); text-align:center; margin-bottom:46px;}

/* ---------- nav ---------- */
nav{
  position:sticky; top:0; z-index:10;
  background:var(--navy); color:#fff;
  padding:16px 6%;
  display:flex; justify-content:space-between; align-items:center;
  box-shadow:0 2px 18px rgba(10,20,35,.35);
}
.logo-img{height:30px; width:auto;}
nav ul{display:flex; gap:30px; list-style:none;}
nav ul a{
  font-size:14px; opacity:.92; position:relative; padding-bottom:5px;
  transition:color .25s ease, opacity .25s ease;
}
nav ul a::after{
  content:""; position:absolute; right:0; bottom:0;
  width:100%; height:2px; background:var(--gold);
  transform:scaleX(0); transform-origin:right center;
  transition:transform .3s ease;
}
nav ul a:hover{opacity:1; color:var(--gold-soft);}
nav ul a:hover::after{transform:scaleX(1);}
.nav-toggle{display:none; background:none; border:none; color:#fff; font-size:22px; cursor:pointer;}

/* ---------- hero ---------- */
.hero{
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(208,171,102,.14), transparent 60%),
    radial-gradient(900px 460px at 8% 110%, rgba(208,171,102,.08), transparent 55%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; text-align:center; padding:108px 6% 118px;
}
.hero-logo{
  width:min(340px, 62vw); margin:0 auto 30px;
  animation:rise .8s ease both;
}
.hero .tagline{
  color:var(--gold-soft); font-size:21px; margin-bottom:10px;
  animation:rise .8s ease .15s both;
}
.hero p{
  color:var(--on-navy-muted); max-width:560px; margin:0 auto 38px;
  animation:rise .8s ease .3s both;
}
.hero .btn{animation:rise .8s ease .45s both;}

@keyframes rise{
  from{opacity:0; transform:translateY(22px);}
  to{opacity:1; transform:translateY(0);}
}

.btn{
  display:inline-block; background:var(--gold); color:var(--navy);
  font-weight:bold; padding:15px 38px; border-radius:999px; font-size:15px;
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.btn:hover{
  background:var(--gold-soft);
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(208,171,102,.35);
}

/* ---------- about ---------- */
.about-lead{max-width:720px; margin:0 auto 46px; text-align:center; font-size:15px; color:var(--muted);}
.stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; max-width:900px; margin:0 auto;}
.stat-card{
  background:var(--light); border-radius:14px; padding:32px 10px; text-align:center;
  border:1px solid rgba(20,39,62,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.stat-card:hover{transform:translateY(-5px); box-shadow:0 12px 28px rgba(20,39,62,.10);}
.stat-num{font-size:42px; font-weight:bold; color:var(--navy); margin-bottom:8px;}
.stat-label{font-size:13px; color:var(--gold); font-weight:bold;}

/* ---------- icon sections ---------- */
.alt-bg{background:var(--light);}
.icon-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.icon-card{
  background:#fff; border-radius:14px; padding:30px 18px; text-align:center;
  border:1px solid rgba(20,39,62,.06);
  transition:transform .3s ease, box-shadow .3s ease;
}
.icon-card:hover{transform:translateY(-6px); box-shadow:0 14px 32px rgba(20,39,62,.12);}
.icon-circle{
  width:58px; height:58px; border-radius:50%;
  background:var(--navy); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px; font-size:24px;
  transition:transform .3s ease;
}
.icon-card:hover .icon-circle{transform:scale(1.08);}
.icon-card h3{font-size:16px; color:var(--navy); margin-bottom:8px;}
.icon-card p{font-size:13px; color:var(--muted);}

/* ---------- portfolio ---------- */
.portfolio-note{text-align:center; font-size:13px; color:var(--gold); font-style:italic; margin-top:-26px; margin-bottom:38px;}
.pf-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.pf-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 2px 12px rgba(20,39,62,.08);
  transition:transform .3s ease, box-shadow .3s ease;
}
.pf-card:hover{transform:translateY(-6px); box-shadow:0 16px 36px rgba(20,39,62,.16);}
.pf-thumb{
  height:110px; background:linear-gradient(135deg, var(--navy-2), var(--navy));
  display:flex; align-items:center; justify-content:center; font-size:28px;
}
.pf-body{padding:16px;}
.pf-body h4{color:var(--navy); font-size:15px; margin-bottom:4px;}
.pf-body p{font-size:12.5px; color:var(--muted);}

/* ---------- pricing ---------- */
.price-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1000px; margin:0 auto;}
.price-card{
  border:1px solid rgba(20,39,62,.12); border-radius:14px; padding:32px 22px; text-align:center;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.price-card:hover{transform:translateY(-5px); box-shadow:0 12px 28px rgba(20,39,62,.10); border-color:var(--gold);}
.price-card.highlight{border-color:var(--gold); box-shadow:0 8px 24px rgba(208,171,102,.22); transform:translateY(-6px);}
.price-card.highlight:hover{transform:translateY(-9px);}
.price-card h3{color:var(--navy); font-size:17px; margin-bottom:6px;}
.price-card .price{font-size:26px; font-weight:bold; color:var(--gold); margin:14px 0;}
.price-card p{font-size:13px; color:var(--muted);}
.impact-note{
  max-width:900px; margin:42px auto 0; background:var(--navy); color:var(--gold-soft);
  font-weight:bold; text-align:center; padding:20px; border-radius:12px; font-size:14px;
}

/* ---------- contact ---------- */
.contact{
  background:
    radial-gradient(900px 420px at 15% -20%, rgba(208,171,102,.12), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff; text-align:center;
}
.contact .section-title{color:#fff;}
.contact p{color:var(--on-navy-muted);}
.contact-links{display:flex; justify-content:center; gap:18px; margin-top:28px;}
.contact-secondary{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  padding:15px 38px; border-radius:999px; font-size:15px;
  transition:background .25s ease, transform .25s ease;
}
.contact-secondary:hover{background:rgba(255,255,255,.16); transform:translateY(-3px);}

/* ---------- footer ---------- */
footer{
  text-align:center; padding:34px 6%; font-size:12px; color:var(--on-navy-muted);
  background:var(--navy);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.footer-logo{height:22px; width:auto; opacity:.85;}

/* ---------- scroll reveal (classes added by JS only) ---------- */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1; transform:translateY(0);}
.reveal.visible.reveal-stagger > *:nth-child(2){transition-delay:.08s;}
.reveal.visible.reveal-stagger > *:nth-child(3){transition-delay:.16s;}
.reveal.visible.reveal-stagger > *:nth-child(4){transition-delay:.24s;}
.reveal.visible.reveal-stagger > *:nth-child(5){transition-delay:.32s;}
.reveal.visible.reveal-stagger > *:nth-child(6){transition-delay:.4s;}

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

/* ---------- responsive ---------- */
@media (max-width:820px){
  nav ul{
    position:fixed; top:62px; right:0; left:0;
    background:var(--navy); flex-direction:column;
    padding:0 16px; gap:0;
    max-height:0; overflow:hidden; visibility:hidden;
    transition:max-height .35s ease, padding .35s ease, visibility .35s;
  }
  nav ul.open{max-height:420px; padding:16px; visibility:visible;}
  nav ul li{padding:8px 0;}
  .nav-toggle{display:block;}

  .icon-grid, .pf-grid, .price-grid, .stats-grid{grid-template-columns:1fr;}
  .hero-logo{width:min(260px, 74vw);}
  .price-card.highlight{transform:none;}
  .contact-links{flex-direction:column; align-items:center;}
}