:root{
  --color-primary:#102a43; /* deep calming blue */
  --color-secondary:#f6f8fa; /* very light neutral */
  --color-accent:#d4a02b; /* warm gold */
  --text:#0f1720;
  --muted:#6b7280;
  --white:#ffffff;
  --card:#ffffff;
  --radius:10px;
  --max-width:1200px;
  --wrap-padding:28px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--color-secondary);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* layout helpers */
.wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:56px var(--wrap-padding);
}
.wrap.narrow{max-width:820px}
.header-inner, .footer-inner{display:flex;align-items:center;justify-content:space-between}

/* header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:rgba(246,248,250,0.9);
  border-bottom:1px solid rgba(16,42,67,0.06);
  backdrop-filter:blur(8px);
  z-index:60;
  box-shadow:0 4px 18px rgba(16,42,67,0.06);
}
.site-header .wrap{padding:14px var(--wrap-padding)}
.site-brand{
  font-weight:700;
  letter-spacing:2px;
  text-decoration:none;
  color:var(--color-primary);
  font-size:1rem;
  text-transform:uppercase;
}
.site-nav a{
  margin-left:20px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:0.9rem;
  letter-spacing:1px;
  text-transform:uppercase;
}

/* hero */
.hero{
  padding-top:120px;
  padding-bottom:120px;
  display:flex;
  align-items:center;
  background:linear-gradient(180deg, rgba(245,247,250,1) 0%, rgba(244,246,248,1) 100%);
}
.hero-inner{display:flex;gap:48px;align-items:center;justify-content:space-between}
.hero-copy{flex:1;max-width:720px}
.hero-title{
  margin:0 0 18px 0;
  font-size:clamp(34px,6.5vw,56px);
  color:var(--color-primary);
  line-height:1.02;
  font-weight:800;
  font-family:Montserrat, "Helvetica Neue", Arial, sans-serif;
  letter-spacing:-0.5px;
}
.hero-sub{
  margin:0 0 26px 0;
  color:var(--muted);
  font-size:1.05rem;
}
.hero-ctas{display:flex;gap:14px;margin-bottom:20px}
.btn{
  display:inline-block;
  padding:14px 20px;
  border-radius:8px;
  text-decoration:none;
  cursor:pointer;
  font-weight:800;
  font-size:0.95rem;
  border:2px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 8px 24px rgba(16,42,67,0.06);
}
.btn:hover{transform:translateY(-3px)}
.btn.primary{
  background:var(--color-primary);
  color:var(--white);
  border-color:var(--color-primary);
}
.btn.primary:hover{background:#0b2131}
.btn.outline{
  background:transparent;
  color:var(--color-primary);
  border:1px solid rgba(16,42,67,0.08);
}
.btn.small{padding:10px 14px;font-size:0.9rem}
.btn.highlight{background:linear-gradient(180deg,var(--color-primary),#072b41);color:var(--white)}

.visual-plate{
  background:linear-gradient(180deg, #ffffff, #f9fbfd);
  color:var(--muted);
  padding:36px;
  border-radius:14px;
  border:1px solid rgba(16,42,67,0.04);
  font-weight:700;
  text-align:center;
  box-shadow:0 12px 40px rgba(16,42,67,0.07);
  max-width:300px;
}

/* subscribe */
.subscribe{display:flex;gap:12px;margin-top:12px}
.subscribe input[type="email"]{
  padding:12px 14px;border-radius:8px;border:1px solid rgba(16,42,67,0.08);flex:1;font-weight:600
}

/* sections */
.section{padding:82px 0}
.section-dark{background:var(--color-primary);color:var(--white)}
.section-dark .section-title, .section-dark .section-lead{color:var(--white)}
.section-muted{background:#ffffff}
.section-title{
  margin:0 0 8px 0;
  font-size:0.95rem;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:800;
}
.section-lead{margin:0 0 28px 0;color:var(--muted)}

/* grid */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:920px){
  .hero-inner{flex-direction:column}
  .visual-plate{max-width:100%}
  .grid-3, .grid-2{grid-template-columns:1fr}
  .site-nav{display:none}
  .wrap{padding:28px}
  .site-header .wrap{padding:10px 20px}
}

/* cards */
.card{
  background:var(--card);
  padding:28px;
  border-radius:12px;
  border:1px solid rgba(16,42,67,0.04);
  box-shadow:0 12px 30px rgba(16,42,67,0.06);
}
.section-dark .card{background:transparent;border:none;box-shadow:none}
.card h3{margin:0 0 10px 0;color:var(--color-accent);font-weight:800}
.card p{margin:0;color:var(--white);opacity:0.95}
.pillars{color:var(--muted);margin:0}

/* pricing */
.price-card{display:flex;flex-direction:column;gap:14px;align-items:flex-start;padding:28px}
.price-card .plan-price{font-size:1.6rem;font-weight:900;margin:0;color:var(--text)}
.price-card.highlight{background:linear-gradient(180deg,#072a40,#05202b);color:var(--white);border:none;position:relative}
.price-card.highlight .plan-price{color:var(--white)}
.price-card .ribbon{position:absolute;top:-12px;right:-12px;background:var(--color-accent);color:#081018;padding:8px 12px;border-radius:8px;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.benefits{list-style:none;padding:0;margin:0 0 12px 0}
.benefits li{margin:8px 0;color:var(--muted)}

/* forms */
.contact-form label{display:block;margin:10px 0 6px 0;font-weight:700}
.contact-form input, .contact-form textarea{
  width:100%;padding:12px;border-radius:8px;border:1px solid rgba(16,42,67,0.08);font-weight:600
}

/* footer */
.site-footer{border-top:1px solid rgba(16,42,67,0.06);background:transparent;padding:28px 0;margin-top:40px}
.site-footer p{margin:4px 0;color:var(--muted)}

/* small utilities */
.narrow{max-width:780px}
.muted{color:var(--muted)}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

/* subtle animations */
@media (prefers-reduced-motion: no-preference){
  .card, .visual-plate{transition:transform .18s ease, box-shadow .18s ease}
  .card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(16,42,67,0.10)}
}