:root{
    --bg:#f6f7fb;
    --surface:#ffffff;
    --ink:#0b1220;
    --muted:#5b6472;
    --border:rgba(15, 23, 42, 0.12);
    --shadow:0 10px 30px rgba(2, 6, 23, 0.08);
    --amber:#f59e0b;
    --navy1:#07132b;
    --navy2:#0b2a5b;
    --tint:#eef2ff;
    --tint2:#eef7ff;
    --radius:18px;
  }
  
  *{box-sizing:border-box}
  html,body{
    margin:0;
    padding:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color:var(--ink);
    background:
      radial-gradient(1200px 700px at 10% 10%, rgba(99,102,241,0.18), transparent 55%),
      radial-gradient(1000px 600px at 90% 15%, rgba(245,158,11,0.14), transparent 55%),
      radial-gradient(900px 600px at 20% 95%, rgba(34,197,94,0.10), transparent 55%),
      radial-gradient(800px 500px at 85% 90%, rgba(56,189,248,0.12), transparent 55%),
      var(--bg);
    background-attachment: fixed;
  }
  a{color:inherit;text-decoration:none}
  .container{max-width:1100px;margin:0 auto;padding:0 20px}
  .section{padding:72px 0}
  .section.tint{background:var(--tint)}
  .section.tint2{background:var(--tint2)}
  
  .nav{
    position:sticky; top:0; z-index:50;
    backdrop-filter: blur(10px);
    background: rgba(7, 19, 43, 0.72);
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
  .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
  .brand{display:flex;align-items:center;gap:12px}
  .brand img{
    height:76px;
    width:auto;
    background: rgba(255,255,255,0.92);
    padding:6px;
    border-radius:10px;
    border:1px solid rgba(0,0,0,0.08);
  }
  .brand span{color:#fff;font-weight:700;letter-spacing:0.4px}
  
  .nav-links{display:flex;align-items:center;gap:18px}
  .nav-links a{color:rgba(255,255,255,0.88);font-weight:600;font-size:14px;padding:10px 10px;border-radius:12px}
  .nav-links a.active, .nav-links a:hover{background:rgba(255,255,255,0.10);color:#fff}
  .cta{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--amber); color:#111827; font-weight:800;
    padding:10px 14px; border-radius:14px; border:1px solid rgba(0,0,0,0.08);
  }
  .cta:hover{filter:brightness(0.97)}
  .ghost{
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; color:#fff; font-weight:700;
    padding:10px 14px; border-radius:14px; border:1px solid rgba(255,255,255,0.25);
  }
  .ghost:hover{background:rgba(255,255,255,0.08)}
  
  .hamburger{display:none;background:transparent;border:0;color:#fff;padding:10px;border-radius:12px}
  .hamburger:hover{background:rgba(255,255,255,0.10)}
  .mobile{display:none;padding:0 0 14px 0}
  .mobile a{display:block;color:#fff;padding:12px 10px;border-radius:12px}
  .mobile a:hover{background:rgba(255,255,255,0.10)}
  
  .hero{
    background: linear-gradient(135deg, var(--navy1), var(--navy2));
    color:#fff;
    padding:86px 0 72px 0;
    position:relative;
    overflow:hidden;
  }
  .hero:before{
    content:""; position:absolute; inset:-40%;
    background:
  radial-gradient(circle at 20% 30%, rgba(245,158,11,0.22), transparent 42%),
  radial-gradient(circle at 80% 20%, rgba(99,102,241,0.26), transparent 48%),
  radial-gradient(circle at 60% 80%, rgba(34,197,94,0.14), transparent 48%),
  radial-gradient(circle at 50% 50%, rgba(56,189,248,0.10), transparent 55%);
    transform: rotate(8deg);
  }
  .hero .container{position:relative}
  .kicker{color:rgba(255,255,255,0.75);font-weight:700;letter-spacing:0.12em;text-transform:uppercase;font-size:12px}
  .h1{font-size:44px;line-height:1.08;margin:14px 0 14px 0;font-weight:900;letter-spacing:-0.02em}
  .sub{font-size:18px;line-height:1.6;color:rgba(255,255,255,0.85);max-width:760px}
  .hero-actions{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
  
  .grid{display:grid;gap:18px}
  .grid.cols3{grid-template-columns:repeat(3, minmax(0,1fr))}
  .grid.cols2{grid-template-columns:repeat(2, minmax(0,1fr))}
  .card{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:18px;
    box-shadow: var(--shadow);
  }
  .card h3{margin:6px 0 8px 0;font-size:16px}
  .card p{margin:0;color:var(--muted);line-height:1.6;font-size:14px}
  .badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:12px;padding:8px 10px;border-radius:999px;background:rgba(245,158,11,0.14);color:#7c4a00;border:1px solid rgba(245,158,11,0.25)}
  .h2{font-size:28px;margin:0 0 12px 0;letter-spacing:-0.01em}
  .lead{color:var(--muted);max-width:820px;line-height:1.7;margin:0 0 26px 0}
  
  .steps{display:grid;gap:14px}
  .step{display:flex;gap:12px;align-items:flex-start}
  .dot{width:30px;height:30px;border-radius:999px;background:rgba(11,42,91,0.10);border:1px solid rgba(11,42,91,0.18);display:flex;align-items:center;justify-content:center;font-weight:900;color:#0b2a5b}
  .step strong{display:block;margin-bottom:4px}
  .callout{
    border-radius:var(--radius);
    border:1px solid rgba(245,158,11,0.30);
    background: rgba(245,158,11,0.10);
    padding:18px;
  }
  
  .form-row{display:grid;gap:14px}
  label{font-weight:800;font-size:13px}
  input, textarea{
    width:100%;
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--border);
    background:#fff;
    color:var(--ink);
    outline:none;
  }
  input:focus, textarea:focus{border-color:rgba(245,158,11,0.7); box-shadow:0 0 0 4px rgba(245,158,11,0.18)}
  textarea{min-height:120px;resize:vertical}
  .small{font-size:13px;color:var(--muted);line-height:1.6}
  .kv{display:grid;gap:8px}
  .kv strong{display:block}
  .footer{
    background:#07132b;
    color:rgba(255,255,255,0.82);
    padding:36px 0;
    border-top:1px solid rgba(255,255,255,0.08);
  }
  .footer a{color:rgba(255,255,255,0.88)}
  .footer a:hover{text-decoration:underline}
  .footer-grid{display:grid;gap:18px;grid-template-columns:2fr 1fr 1fr}
  hr.sep{border:0;border-top:1px solid rgba(255,255,255,0.12);margin:18px 0}
  
  @media (max-width: 900px){
    .grid.cols3{grid-template-columns:1fr}
    .grid.cols2{grid-template-columns:1fr}
    .h1{font-size:34px}
    .footer-grid{grid-template-columns:1fr}
    .nav-links{display:none}
    .hamburger{display:inline-flex}
    .mobile{display:block}
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:
      linear-gradient(to right, rgba(15,23,42,0.05) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(15,23,42,0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(circle at 50% 20%, rgba(0,0,0,0.85), transparent 60%);
  }
  .container, .nav, .hero, .section, .footer{
    position:relative;
    z-index:1;
  }
  /* Image hero (per-page) */
.hero-img{
  position: relative;
  overflow: hidden;
  padding: 86px 0 72px 0;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.hero-img::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(135deg, rgba(7,19,43,0.92), rgba(11,42,91,0.82));
  z-index:0;
}

.hero-img::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.05);
  opacity: 0.55;
  z-index:0;
}

.hero-img .container{
  position: relative;
  z-index: 1;
}

.hero-img .hero-glow{
  position:absolute;
  inset:-40%;
  z-index:0;
  background:
    radial-gradient(circle at 20% 30%, rgba(245,158,11,0.22), transparent 42%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,0.26), transparent 48%),
    radial-gradient(circle at 60% 80%, rgba(34,197,94,0.14), transparent 48%),
    radial-gradient(circle at 50% 50%, rgba(56,189,248,0.10), transparent 55%);
  transform: rotate(8deg);
  pointer-events:none;
}