:root{
  --navy:#0A1628; --navy-2:#0F2D5A; --blue:#1A5FBA; --blue-2:#2A7FE0;
  --gold:#F5A623; --green:#1F6B3A; --white:#FFFFFF;
  --ink:#0A1628; --ink-soft:#4A5568; --ink-mute:#8A93A6;
  --bg-soft:#F6F8FB; --line:#E7ECF3;
  --maxw:1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',Arial,Helvetica,sans-serif; color:var(--ink); background:var(--white); line-height:1.6; -webkit-font-smoothing:antialiased;}
img,svg{display:block; max-width:100%;}
a{text-decoration:none; color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}
.eyebrow{font-size:12px; letter-spacing:2px; font-weight:600; text-transform:uppercase;}
h1,h2,h3{font-weight:700; letter-spacing:-0.02em; color:var(--navy);}
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s ease; border:1.5px solid transparent; white-space:nowrap;}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:#e6971a;}
.btn-outline-dark{border-color:rgba(255,255,255,.35); color:var(--white);}
.btn-outline-dark:hover{border-color:rgba(255,255,255,.7); background:rgba(255,255,255,.06);}
.btn-outline-navy{border-color:var(--line); color:var(--navy);}
.btn-outline-navy:hover{border-color:var(--blue); color:var(--blue);}

/* utility bar */
.utilitybar{background:var(--navy); color:#9FB3D4; font-size:12px;}
.utilitybar .wrap{display:flex; justify-content:space-between; align-items:center; height:34px;}
.utilitybar a{color:#C9D8EE;}
.lang-toggle{display:flex; gap:2px; border:1px solid rgba(255,255,255,.2); border-radius:5px; overflow:hidden;}
.lang-toggle span{padding:2px 9px; cursor:pointer;}
.lang-toggle .active{background:rgba(255,255,255,.14); color:#fff;}

/* nav */
header.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line);}
.navrow{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{display:flex; align-items:center; gap:11px;}
.logo .wordmark{font-size:19px; line-height:1;}
.logo .wordmark b{font-weight:700; color:var(--navy);}
.logo .wordmark span{font-weight:500; letter-spacing:2.5px; color:#C7841C; font-size:14px;}
nav.links{display:flex; align-items:center; gap:34px; font-size:14px; font-weight:500; color:#2B3A55;}
nav.links a:hover, nav.links a.active{color:var(--blue);}
.navcta{display:flex; align-items:center; gap:18px;}

/* generic page hero (subpages) */
.pagehero{background:radial-gradient(ellipse 900px 500px at 78% 10%, #12336b 0%, var(--navy) 55%); color:#fff; padding:64px 0 56px;}
.pagehero .eyebrow{color:var(--blue-2);}
.pagehero h1{color:#fff; font-size:38px; margin-top:14px; max-width:640px;}
.pagehero p{color:#C4D1E6; font-size:15px; max-width:560px; margin-top:14px;}

/* hero (homepage) */
.hero{position:relative; background:radial-gradient(ellipse 900px 600px at 78% 20%, #12336b 0%, var(--navy) 55%); overflow:hidden; color:var(--white);}
.hero .wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; padding-top:88px; padding-bottom:88px;}
.hero .eyebrow{color:var(--blue-2);}
.hero h1{font-size:50px; line-height:1.08; color:#fff; margin:18px 0 20px;}
.hero h1 .accent{color:var(--gold);}
.hero p.lead{font-size:16.5px; color:#C4D1E6; max-width:480px; margin-bottom:30px;}
.hero .ctarow{display:flex; gap:12px; margin-bottom:26px; flex-wrap:wrap;}
.hero .trustline{font-size:12.5px; color:#8FA3C4; display:flex; align-items:center; gap:8px;}
.hero .trustline svg{width:14px; height:14px; flex:none;}
.hero-tagline{margin-top:38px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); font-size:11px; letter-spacing:2.5px; color:#5C82B8; font-weight:500;}
.hero-art{position:relative; display:flex; align-items:center; justify-content:center; height:420px;}
.hero-art .glow{position:absolute; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(245,166,35,.16) 0%, rgba(245,166,35,0) 70%);}
.statcard{position:absolute; bottom:8px; left:-6px; background:#fff; color:var(--navy); border-radius:12px; padding:16px 18px; box-shadow:0 20px 40px -12px rgba(0,0,0,.35); width:190px;}
.statcard .num{font-size:26px; font-weight:700; color:var(--green);}
.statcard .lbl{font-size:11.5px; color:var(--ink-mute); margin-top:2px;}

/* showcase illustration band */
.showcase{background:linear-gradient(180deg, #EAF1FC 0%, #F6F8FB 100%); padding:64px 0;}
.showcase .wrap{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;}
.showcase-art{background:#fff; border-radius:16px; padding:24px; box-shadow:0 24px 48px -20px rgba(10,22,40,.18);}
.showcase h2{font-size:26px; margin-bottom:14px;}
.showcase p{color:var(--ink-soft); font-size:14.5px; line-height:1.7; margin-bottom:10px;}
.showcase .note{font-size:12px; color:var(--ink-mute); font-style:italic;}

/* generic sections */
.section, .diffs, .how, .packages{padding:78px 0;}
.section-soft, .how{background:var(--bg-soft);}
.section-head{text-align:center; max-width:640px; margin:0 auto 48px;}
.section-head.left{text-align:left; margin:0 0 40px;}
.section-head .eyebrow{color:var(--blue); justify-content:center; display:flex;}
.section-head.left .eyebrow{justify-content:flex-start;}
.section-head h2{font-size:32px; margin-top:12px;}
.section-head p{color:var(--ink-soft); font-size:15px; margin-top:12px;}

/* differentiator / feature cards */
.diff-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.diff-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.diff-grid.cols-2{grid-template-columns:repeat(2,1fr);}
.diff-card{border:1px solid var(--line); border-radius:14px; padding:26px 22px; transition:box-shadow .15s ease, border-color .15s ease;}
.diff-card:hover{box-shadow:0 14px 30px -14px rgba(10,22,40,.18); border-color:#DCE6F5;}
.diff-card .icn{width:42px; height:42px; border-radius:10px; background:#E9F1FC; display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.diff-card .icn svg{width:20px; height:20px;}
.diff-card h3{font-size:16px; margin-bottom:8px;}
.diff-card p{font-size:13.5px; color:var(--ink-soft); line-height:1.6;}

/* how it works steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.steps::before{content:""; position:absolute; top:23px; left:12%; right:12%; height:2px; background:var(--line);}
.step{position:relative; text-align:center; padding:0 16px;}
.step .n{width:46px; height:46px; border-radius:50%; background:var(--navy); color:var(--gold); font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; position:relative; z-index:1; border:5px solid var(--bg-soft);}
.step h3{font-size:14.5px; margin-bottom:6px;}
.step p{font-size:12.5px; color:var(--ink-soft);}

/* vertical timeline (how-it-works detail page) */
.timeline{max-width:760px; margin:0 auto; position:relative; padding-left:52px;}
.timeline::before{content:""; position:absolute; left:19px; top:8px; bottom:8px; width:2px; background:var(--line);}
.tl-item{position:relative; padding-bottom:44px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item .n{position:absolute; left:-52px; top:0; width:40px; height:40px; border-radius:50%; background:var(--navy); color:var(--gold); font-weight:700; font-size:15px; display:flex; align-items:center; justify-content:center;}
.tl-item h3{font-size:17px; margin-bottom:8px;}
.tl-item p{font-size:14px; color:var(--ink-soft); line-height:1.7; max-width:600px;}

/* packages */
.pkg-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px;}
.pkg-card{border:1px solid var(--line); border-radius:14px; padding:20px 16px; text-align:center;}
.pkg-card.rec{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.pkg-tag{font-size:10px; letter-spacing:1px; color:var(--ink-mute); text-transform:uppercase; margin-bottom:10px;}
.pkg-name{font-size:17px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.pkg-spec{font-size:12px; color:var(--ink-soft); margin-bottom:14px;}
.pkg-price{font-size:13px; color:var(--blue); font-weight:600; margin-bottom:12px;}
.pkg-for{font-size:11.5px; color:var(--ink-mute); border-top:1px solid var(--line); padding-top:12px;}
.pkg-note{text-align:center; font-size:13px; color:var(--ink-soft); margin-top:26px;}
.pkg-detail{border:1px solid var(--line); border-radius:16px; padding:28px; margin-bottom:16px; display:grid; grid-template-columns:1fr 2fr; gap:24px; align-items:center;}
.pkg-detail .name{font-size:22px; font-weight:700; color:var(--navy);}
.pkg-detail .spec{font-size:13px; color:var(--ink-soft); margin-top:4px;}
.pkg-detail .price{font-size:15px; color:var(--blue); font-weight:600; margin-top:8px;}
.pkg-detail ul{list-style:none; font-size:13.5px; color:var(--ink-soft);}
.pkg-detail li{padding-left:20px; position:relative; margin-bottom:6px;}
.pkg-detail li::before{content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700;}

/* mission band */
.mission{background:linear-gradient(135deg, var(--green) 0%, #164f2c 100%); color:#fff; padding:70px 0; text-align:center;}
.mission h2{color:#fff; font-size:30px; margin-bottom:14px;}
.mission p{max-width:600px; margin:0 auto; color:#D6EBDC; font-size:15px; line-height:1.7;}

/* final cta */
.finalcta{background:var(--navy); color:#fff; padding:64px 0; text-align:center;}
.finalcta h2{color:#fff; font-size:28px; margin-bottom:12px;}
.finalcta p{color:#B9C4D6; font-size:14.5px; margin-bottom:26px;}
.finalcta .ctarow{display:flex; gap:12px; justify-content:center;}

/* illustration strip (subpages) */
.illo-strip{background:linear-gradient(180deg, #EAF1FC 0%, #F6F8FB 100%); padding:44px 0;}
.illo-strip .wrap{display:flex; justify-content:center;}
.illo-strip svg{max-width:640px; width:100%; height:auto;}

/* callout box */
.callout{background:#FBF3E4; border:1px solid #F0DCAF; border-radius:14px; padding:26px 28px; margin-top:32px;}
.callout h3{font-size:16px; margin-bottom:8px; color:var(--navy);}
.callout p{font-size:13.5px; color:#6B5320; line-height:1.7; margin:0;}

/* comparison table (why helio) */
.compare{width:100%; border-collapse:collapse; font-size:13.5px;}
.compare th,.compare td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left;}
.compare th{font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-mute); font-weight:600;}
.compare td.good{color:var(--green); font-weight:600;}
.compare tr td:first-child{color:var(--navy); font-weight:600; width:34%;}

/* FAQ */
.faq-list{max-width:760px; margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-item h3{font-size:15.5px; margin-bottom:8px; display:flex; gap:10px; align-items:baseline;}
.faq-item h3 .q{color:var(--blue);}
.faq-item p{font-size:13.5px; color:var(--ink-soft); line-height:1.7;}

/* contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start;}
.contact-card{border:1px solid var(--line); border-radius:14px; padding:24px;}
.contact-card h3{font-size:15px; margin-bottom:6px;}
.contact-card p{font-size:13.5px; color:var(--ink-soft);}
.contact-card + .contact-card{margin-top:14px;}
.form-field{margin-bottom:16px;}
.form-field label{display:block; font-size:12.5px; font-weight:600; color:var(--navy); margin-bottom:6px;}
.form-field input, .form-field textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:11px 13px; font-size:14px; font-family:inherit; color:var(--ink);}
.form-field textarea{min-height:100px; resize:vertical;}

/* footer */
footer{background:#081120; color:#8A93A6; padding:52px 0 28px; font-size:13px;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.08);}
.foot-col h4{color:#fff; font-size:12.5px; letter-spacing:1px; text-transform:uppercase; margin-bottom:14px; font-weight:600;}
.foot-col a{display:block; color:#8A93A6; margin-bottom:9px;}
.foot-col a:hover{color:#fff;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12px;}
.beta-pill{display:inline-block; font-size:9.5px; font-weight:700; letter-spacing:.5px; background:rgba(245,166,35,.16); color:var(--gold); border-radius:20px; padding:2px 8px; margin-left:6px; vertical-align:middle;}

@media (max-width: 980px){
  nav.links{display:none;}
  .hero .wrap, .diff-grid, .steps, .pkg-grid, .foot-grid, .contact-grid, .pkg-detail{grid-template-columns:1fr; }
  .hero h1{font-size:36px;}
  .steps::before{display:none;}
}