/* --- Base --- */
:root{
  --navy-900:#082f53;
  --navy-800:#0a3b66;
  --navy-700:#0e4a7f;
  --section-alt:#e9eff6;
  --card:#ffffff;
  --muted:#516171;
  --text:#0e243d;
  --green:#12c26d;
  --green-700:#0da358;
  --surface:#0e3a60;
  --shadow:0 8px 24px rgba(0,0,0,.12);
  --radius:14px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;
  color:var(--text);
  background:#fff;
  line-height:1.6;
}

.container{
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
}

/* --- Header --- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid #e6eef6;
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  height:64px;
}
.brand{display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--text); font-weight:700}
.brand-mark{
  background:linear-gradient(135deg,var(--green),#7ff3b7);
  color:#063a2a;
  padding:.35rem .5rem;
  border-radius:8px;
  font-size:.9rem;
}
.brand-text{letter-spacing:.5px}

.main-nav{display:flex; gap:24px; margin-left:auto}
.main-nav a{color:#21384a; text-decoration:none; font-weight:500}
.main-nav a:hover{color:var(--green)}

.header-cta{display:flex; gap:10px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:12px; font-weight:700;
  text-decoration:none; transition:.2s; border:2px solid transparent;
}
.btn-ghost{background:transparent; border-color:#cfe1f2; color:#0d375e}
.btn-ghost:hover{border-color:var(--green); color:var(--green)}
.btn-primary{background:var(--green); color:#073a2a}
.btn-primary:hover{background:var(--green-700); color:#062e22}
.btn-lg{padding:1rem 1.4rem; font-size:1.05rem}
.btn-surface{background:#f4f9ff; border-color:#cfe1f2; color:#0d375e}
.nav-toggle{display:none; margin-left:4px; background:none; border:0}
.nav-toggle span{display:block;height:2px;background:#0d375e;margin:5px 0;width:22px}

/* --- Hero --- */
.hero{
  background:linear-gradient(180deg,var(--navy-900),var(--navy-800));
  color:#e9f6ff;
  padding:72px 0 56px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:42px;
  align-items:stretch;
}
.hero h1{
  font-size: clamp(2.2rem, 2.4rem + 1.2vw, 3.3rem);
  line-height:1.1;
  margin:0 0 18px 0;
}
.hero .text-light{color:#d8f3ff; font-weight:800}
.hero .accent{color:var(--green)}
.lead{color:#b9d7ea; font-size:1.08rem}
.checks{list-style:none; padding:0; margin:22px 0; color:#e3f5ff}
.checks li{display:flex; gap:10px; align-items:flex-start; margin:8px 0}
.checks li::before{content:'✓'; font-weight:900; color:var(--green); background:#0b2f4e; border:1px solid #134d7a; border-radius:50%; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; font-size:.85rem}

.hero-panel .panel{
  background:#0b3e69;
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:18px;
  box-shadow: var(--shadow);
}
.panel-title{display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:10px}
.app-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;
}
.app{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:10px; padding:18px; background:#0a3558; border:1px solid rgba(255,255,255,.06); border-radius:14px; text-decoration:none; color:#e3f4ff;
}
.app strong{font-size:.88rem; font-weight:700}
.app:hover{outline:2px solid #76ffca33; transform: translateY(-1px)}

/* --- Icon system --- */
.ico{
  width:42px; height:42px; display:inline-grid; place-items:center;
  border-radius:12px; background:#20d18a; color:#043c2b;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
  font-size:22px; font-weight:900;
}
.ico-app::before{content:'▦'}
.ico-rocket::before{content:'🚀'}
.ico-search::before{content:'🔎'}
.ico-doc::before{content:'📄'}
.ico-scale::before{content:'⚖️'}
.ico-bot::before{content:'🤖'}
.ico-chart::before{content:'📈'}
.ico-money::before{content:'💰'}
.ico-compass::before{content:'🧭'}
.ico-lock::before{content:'🔒'}
.ico-user::before{content:'👤'}
.ico-bolt::before{content:'⚡'}

/* --- Section generic --- */
.strip{padding:64px 0; background:#fff}
.strip-alt{background:var(--section-alt)}
.section-head{display:grid; gap:10px; margin-bottom:26px}
.two-col{grid-template-columns: 1.2fr 1fr; align-items:start}
.section-head h2{font-size: clamp(1.6rem, 1.5rem + 1.2vw, 2.3rem); margin:0}
.section-sub{color:var(--muted); margin-top:6px}

.card-row.three{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:22px;
}
.card{background:var(--card); border:1px solid #e6eef6; border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.card.feature{display:grid; gap:10px; text-align:center}
.card.feature h3{margin:.3rem 0 .2rem 0}
.card.feature p{color:var(--muted); margin:0}

/* Modules grid */
.card-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:22px}
.card.module{display:grid; gap:10px}
.card.module h3{margin:0}
.card.module p{color:var(--muted); margin:.1rem 0 .35rem}
.more{color:var(--green-700); text-decoration:none; font-weight:700}

/* Plans */
.plans{display:grid; grid-template-columns: repeat(4, 1fr); gap:18px; margin-top:12px}
.plan{background:#fff; border-radius:18px; border:1px solid #d8e7f4; padding:22px; box-shadow:var(--shadow)}
.plan-featured{background:linear-gradient(180deg,#0d3a60,#0a2d49); color:#e8f7ff; border-color:#0a2d49}
.plan-featured .muted{color:#bfe7ff}
.muted{color:#7892a6; margin:.2rem 0 .6rem}
.small li{font-size:.95rem; color:#4f6a80}
.plan .btn{margin-top:8px}

/* --- Footer --- */
.site-footer{background:linear-gradient(180deg,var(--navy-800),var(--navy-900)); color:#cfe9ff; padding-top:36px}
.footer-top{display:flex; gap:44px; align-items:flex-start}
.brand-lg .brand-mark{font-size:1rem}
.footer-brand{max-width:540px}
.footer-cols{display:flex; gap:52px; margin-left:auto}
.footer-cols .col{display:flex; flex-direction:column; gap:8px}
.footer-cols a{color:#d8f2ff; text-decoration:none}
.footer-cols a:hover{color:var(--green)}
.footer-bottom{display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.14); padding:16px 0; margin-top:26px}
.chip{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:#0a3558; border:1px solid rgba(255,255,255,.14)}

/* --- Responsive --- */
@media (max-width: 1024px){
  .main-nav{display:none}
  .nav-toggle{display:block}
  .hero-grid{grid-template-columns:1fr}
  .panel{margin-top:16px}
  .two-col{grid-template-columns:1fr}
  .card-grid{grid-template-columns: repeat(2, 1fr)}
  .plans{grid-template-columns: repeat(2, 1fr)}
}

@media (max-width: 640px){
  .header-inner{height:58px}
  .card-row.three{grid-template-columns:1fr}
  .card-grid{grid-template-columns: 1fr}
  .plans{grid-template-columns: 1fr}
  .footer-top{flex-direction:column}
  .footer-cols{margin-left:0}
}