:root{
  --bg:#071322;
  --panel:#0d1f33;
  --panel2:#102844;
  --border:rgba(255,255,255,0.12);

  --text:#f8fafc;
  --muted:#c7d2e2;
  --muted2:#8fa3bb;

  --accent:#f97316;
  --accentSoft:rgba(249,115,22,0.14);

  --shadow:0 18px 44px rgba(0,0,0,0.35);
  --shadow2:0 24px 60px rgba(0,0,0,0.38);
  --radius:18px;
  --max:1120px;

  --headerBg:rgba(7,19,34,0.86);

  --badgeBg:rgba(249,115,22,0.13);
  --badgeText:#fed7aa;
  --badgeIcon:#fb923c;

  --btnBg:#102844;
  --btnHover:#16375c;
  --btnText:#f8fafc;

  --ctaBg:#f97316;
  --ctaBorder:#fb923c;
  --ctaHover:#ea580c;

  --iconBg:rgba(255,255,255,0.06);
  --iconBorder:rgba(255,255,255,0.16);
  --iconColor:#fb923c;

  --noticeBg:#0d1f33;
  --noticeBorder:#f97316;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:#081524;
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.container{max-width:var(--max);margin:0 auto;padding:0 22px}

/* Skip link */
.skip{position:absolute;left:-999px;width:1px;height:1px;overflow:hidden}
.skip:focus{
  left:20px;top:20px;width:auto;height:auto;padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  z-index:10000
}

/* Header */
header{
  position:sticky;top:0;z-index:1000;
  background:var(--headerBg);
  backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 0
}

.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-0.02em}
.logo{
  width:40px;height:40px;border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid var(--border);
  display:grid;place-items:center;
}
.logo svg{width:22px;height:22px;color:var(--accent)}

.small{color:var(--muted2);font-size:13px;font-weight:600}

.links{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-weight:800;
  font-size:14px
}
.links a{padding:8px 10px;border-radius:12px}
.links a:hover{
  background:rgba(255,255,255,0.08);
  text-decoration:none
}

/* CTA */
.cta{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 14px;border-radius:16px;
  border:1px solid var(--ctaBorder);
  background:var(--ctaBg);
  color:#111827;
  font-weight:900;font-size:14px;white-space:nowrap;
}
.cta:hover{background:var(--ctaHover);text-decoration:none;color:#fff}
.cta svg{width:18px;height:18px;color:currentColor}

/* Sections */
section{padding:52px 0}
.hero{padding-top:54px}

/* Layout */
.grid-hero{
  display:flex;
  flex-direction:column;
  gap:28px;
}
@media(max-width:920px){.grid-hero{grid-template-columns:1fr}}

.badge{
  display:inline-flex;align-items:center;gap:10px;
  padding:8px 12px;border-radius:999px;
  border:1px solid rgba(249,115,22,0.35);
  color:var(--badgeText);
  background:var(--badgeBg);
  font-weight:900;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;
}
.badge svg{width:16px;height:16px;color:var(--badgeIcon)}

h1{
  margin:14px 0 10px;
  font-size:46px;
  line-height:1.08;
  letter-spacing:-0.04em;
  color:var(--text);
}
@media(max-width:520px){h1{font-size:36px}}

.lead{
  color:var(--muted);
  font-size:18px;
  margin:22px 0 22px;
  max-width:75ch
}

.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:12px 16px;border-radius:16px;
  border:1px solid var(--border);
  background:var(--btnBg);
  color:var(--btnText);
  font-weight:900;font-size:14px;
}
.btn:hover{background:var(--btnHover);text-decoration:none}
.btn.primary{
  border-color:var(--ctaBorder);
  background:var(--ctaBg);
  color:#111827;
}
.btn.primary:hover{background:var(--ctaHover);color:#fff}
.btn svg{width:18px;height:18px;color:currentColor}

/* Cards */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)), var(--panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.hero-illus{overflow:hidden}
.hero-illus img{width:100%;height:250px;object-fit:cover}
.block{padding:20px}

.hero-list{
  margin:10px 0 0;
  padding-left:18px;
  color:var(--muted);
}
.hero-list li{margin:8px 0}

h2{
  font-size:28px;
  letter-spacing:-0.02em;
  margin:0 0 12px;
  color:var(--text);
}
.section-lead{
  color:var(--muted);
  margin:0 0 28px;
  max-width:85ch
}

/* Grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:980px){.grid-3{grid-template-columns:1fr}}

.kicker{
  color:#fb923c;
  font-weight:900;font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase
}
h3{
  margin:8px 0 4px;
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--text);
}

.price{
  margin-top:4px;
  font-size:13px;
  color:#fed7aa;
  font-weight:900
}

p{margin:10px 0;color:var(--muted)}

.subhead{
  margin:14px 0 6px;
  font-weight:900;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#fb923c
}

.list{margin:8px 0 0;padding-left:18px;color:var(--muted)}
.list li{margin:8px 0}

/* Icon bubble */
.icon{
  width:44px;height:44px;border-radius:16px;
  border:1px solid var(--iconBorder);
  background:var(--iconBg);
  display:grid;place-items:center;
}
.icon svg{width:20px;height:20px;color:var(--iconColor)}

/* Split blocks */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:920px){.split{grid-template-columns:1fr}}

/* FAQ grid */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:920px){.faq{grid-template-columns:1fr}}
.qa h3{margin:0 0 8px;font-size:16px}
.qa p{margin:0;color:var(--muted)}

/* Notice */
.notice{
  border-left:4px solid var(--noticeBorder);
  background:linear-gradient(180deg, rgba(249,115,22,0.08), rgba(255,255,255,0.025)), var(--noticeBg);
  box-shadow:var(--shadow2);
}
.notice strong{color:var(--text)}

/* Footer */
.footer{
  border-top:1px solid var(--border);
  background:#050d18;
  padding:28px 0;
}
.footer .row{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer .links2{
  display:flex;flex-direction:column;gap:10px;
  color:var(--muted);
  font-weight:800;font-size:14px
}
.footer .links2 a:hover{
  color:var(--accent);
  text-decoration:none
}

/* micro animations */
[data-animate]{
  opacity:0;transform:translateY(10px);
  transition:opacity 650ms ease, transform 650ms ease;
  will-change:opacity, transform
}
[data-animate].is-visible{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  [data-animate]{opacity:1;transform:none;transition:none}
}

/* Services layout v4 */
.services-grid{
  display:flex;
  flex-direction:column;
  gap:28px;
}
.services-row{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:18px;
}

@media(max-width:980px){
  .services-row{ grid-template-columns:1fr; }
}

.service-primary{
  background:linear-gradient(180deg, rgba(249,115,22,0.08), rgba(255,255,255,0.025)), var(--panel);
}
.service-secondary{
  background:var(--panel2);
}