:root{
  --navy:#031c3d;
  --navy-2:#062e67;
  --teal:#26a8a0;
  --gold:#d0a246;
  --paper:#ffffff;
  --mist:#f3f6f8;
  --ink:#122b43;
  --muted:#647688;
  --line:#d9e2e8;
  --shadow:0 22px 70px rgba(3,28,61,.15);
}

body{font-family:Arial,Helvetica,sans-serif;font-size:17px;line-height:1.65;background:var(--paper)}
.container{width:min(1240px,calc(100% - 48px))}
h1,h2,h3{font-weight:850}

header{background:rgba(3,28,61,.97);border-bottom:1px solid rgba(255,255,255,.12)}
.nav{min-height:94px}
.logo{display:block;background:#fff;padding:10px 14px;border-radius:2px}
.logo img{width:278px}
.navlinks{color:#eaf0f5;gap:27px}
.navlinks>a:not(.btn){position:relative;padding:34px 0}
.navlinks>a:not(.btn):after{content:"";position:absolute;left:0;bottom:24px;width:0;height:2px;background:var(--gold);transition:width .2s ease}
.navlinks>a:not(.btn):hover:after{width:100%}
.navlinks .btn{background:var(--gold);border-color:var(--gold);color:var(--navy);border-radius:2px;padding:14px 20px}
.site-header .brand{color:#fff;font-size:18px;letter-spacing:-.01em}
.site-header .brand small{color:#8fe0db;margin-top:2px}
.site-header .navlinks{color:#eaf0f5}
.site-header .navlinks .btn{background:var(--gold);border-color:var(--gold);color:var(--navy)}

.hero{min-height:720px;padding:105px 0 84px;background:
 linear-gradient(90deg,rgba(3,28,61,.98) 0%,rgba(3,28,61,.94) 56%,rgba(3,28,61,.8) 100%),
 radial-gradient(circle at 84% 20%,rgba(38,168,160,.42),transparent 32%),
 linear-gradient(135deg,#0b4777,#031c3d);position:relative;overflow:hidden;color:#fff}
.hero:before{content:"01 / 04";position:absolute;left:max(24px,calc((100vw - 1240px)/2));top:44px;color:rgba(255,255,255,.62);font-size:13px;font-weight:800;letter-spacing:.18em}
.hero:after{content:"";position:absolute;right:-7vw;bottom:-25vw;width:58vw;height:58vw;border:1px solid rgba(255,255,255,.13);transform:rotate(45deg);box-shadow:0 0 0 80px rgba(38,168,160,.05),0 0 0 160px rgba(255,255,255,.025)}
.hero-grid{grid-template-columns:1.25fr .75fr;gap:70px;position:relative;z-index:1}
.hero .eyebrow{color:#8fe0db}
.hero h1{color:#fff;font-size:clamp(48px,6vw,82px);max-width:920px;letter-spacing:-.055em}
.hero h1 span{color:#fff}
.hero .lead{color:#d8e2ea;font-size:20px;max-width:740px}
.hero .btn{background:var(--gold);border-color:var(--gold);color:var(--navy);border-radius:2px;padding:16px 23px}
.hero .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.48)}
.pills span{background:transparent;border:0;border-left:2px solid var(--teal);border-radius:0;color:#eaf2f6;padding:4px 13px}
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.18);border-radius:2px;box-shadow:none;backdrop-filter:blur(10px);padding:38px}
.hero-card:after{border-radius:0;border-width:1px;transform:rotate(25deg)}
.hero-card h2{font-size:36px}
.intro-kicker{color:#8fe0db}
.intro-text{color:#d8e2ea}
.intro-benefits div{padding:13px 0;margin:0}

.strip{background:var(--teal)}
.strip .container{min-height:86px}
.strip strong{font-size:20px}
.strip a{color:#fff;border-bottom:1px solid rgba(255,255,255,.7)}

.section{padding:105px 0}
.section-head{max-width:890px;margin-bottom:52px}
.section-head h2{font-size:clamp(38px,5vw,62px)}
.eyebrow{color:var(--teal);letter-spacing:.18em}
.eyebrow:before{background:var(--gold);height:2px;width:38px}
.section.soft{background:var(--mist)}
.card{border:0;border-top:3px solid var(--teal);border-radius:0;padding:34px;background:#fff;box-shadow:0 12px 38px rgba(3,28,61,.07);transition:transform .2s ease,box-shadow .2s ease}
a.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.card .num{color:var(--gold);font-size:13px;letter-spacing:.14em}
.card h3{font-size:25px}

.pricing-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pricing-item{display:flex;flex-direction:column;align-items:stretch;min-height:310px;border:0;border-radius:0;padding:34px;background:#fff;box-shadow:0 12px 38px rgba(3,28,61,.07)}
.pricing-info{flex:1}
.pricing-info h3{font-size:27px}
.pricing-info .price-line{color:var(--teal);font-size:23px}
.pricing-action{align-self:stretch;margin-top:22px}
.pricing-action .btn{width:100%;border-radius:2px;background:transparent;color:var(--navy);border-color:var(--navy)}
.pricing-item.featured{transform:none;border:0;border-top:4px solid var(--gold);border-radius:0;background:var(--navy);box-shadow:var(--shadow)}
.pricing-item.featured:before{border-radius:0;background:var(--gold)}

.section.dark{background:var(--navy);position:relative;overflow:hidden}
.section.dark:after{content:"04";position:absolute;right:4vw;top:-70px;color:rgba(255,255,255,.035);font-size:290px;font-weight:900;line-height:1}
.steps{position:relative;z-index:1;grid-template-columns:repeat(5,minmax(0,1fr))}
.step{border-radius:0;border:0;border-top:2px solid var(--teal);background:rgba(255,255,255,.055);padding:31px}
.step b{border-radius:0;background:var(--gold);color:var(--navy)}

details{border-color:var(--line)}
summary{font-size:18px;padding:22px 0}
.quote-wrap{grid-template-columns:.85fr 1.15fr;gap:0;box-shadow:var(--shadow)}
.quote-info,.form{border-radius:0;box-shadow:none;border:0;padding:44px}
.quote-info{background:var(--navy)}
.form input,.form select,.form textarea{border-radius:2px;padding:14px}
.choice label{border-radius:2px;padding:14px}
.form .btn{border-radius:2px;padding:16px}
.form .btn:disabled{cursor:wait;opacity:.65}
.form-status{min-height:27px;margin:14px 0 0;font-size:15px;font-weight:700}
.form-status.success{color:#13735f}
.form-status.error{color:#b42318}

footer{background:#02152f;color:#d9e2e8;border:0}
.footer span,footer .container:last-child{color:#aebdca!important}
.footer img{background:#fff;padding:10px 12px}

@media(max-width:900px){
  .container{width:min(100% - 32px,1240px)}
  .nav{min-height:78px}.logo img{width:220px}.menu-label{display:flex;border-color:rgba(255,255,255,.3)}
  .menu-label i,.menu-label i:before,.menu-label i:after{background:#fff}
  .navlinks{top:78px;background:var(--navy);border-color:rgba(255,255,255,.14);border-radius:0}
  .navlinks>a:not(.btn){padding:10px 0}
  .hero{min-height:0;padding:92px 0 70px}.hero-grid{grid-template-columns:1fr;gap:38px}
  .pricing-list{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 24px,1240px)}
  .hero h1{font-size:43px}.hero .lead{font-size:18px}.hero-card{padding:26px}
  .section{padding:72px 0}.section-head h2{font-size:38px}
  .quote-info,.form{padding:27px}.pricing-item{min-height:0;padding:27px}.steps{grid-template-columns:1fr}
  .strip .container{padding:20px 0}
}
