:root {
--navy: #061426;
--navy-2: #0a1d35;
--navy-3: #0e2745;

--blue: #3f7cff;
--blue-dark: #245bd1;
--blue-light: #162d56;

--green: #25c58a;
--green-light: #103c31;

--yellow: #ffbf3f;

--background: #061426;
--surface: #0a1d35;
--surface-2: #0d2340;
--surface-3: #112b4b;

--white: #ffffff;
--text: #f4f7fc;
--muted: #9eafc5;
--muted-light: #c1cedd;

--border: #1d3553;
--border-light: #294564;

--shadow: 0 20px 55px rgba(0, 0, 0, 0.28);
--shadow-blue: 0 18px 50px rgba(63, 124, 255, 0.16);

--container: 1220px;
}

/* =========================================================
RESET
========================================================= */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

html {
scroll-behavior: smooth;
}

body {
font-family:
Inter,
"Roboto",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Arial,
sans-serif;

background: var(--background);
color: var(--text);

line-height: 1.6;
font-size: 16px;

overflow-x: hidden;
}

img {
max-width: 100%;
}

a {
color: inherit;
text-decoration: none;
}

button,
input,
textarea,
select {
font: inherit;
}

button {
cursor: pointer;
}

/* =========================================================
SHARED CONTAINER
========================================================= */

.container {
width: min(var(--container), calc(100% - 48px));
margin: 0 auto;
}

/* =========================================================
HEADER
========================================================= */

.site-header {
width: 100%;

background: rgba(6, 20, 38, 0.96);

border-bottom: 1px solid var(--border);

position: sticky;
top: 0;

z-index: 1000;

backdrop-filter: blur(14px);
}

.header-inner {
width: min(var(--container), calc(100% - 48px));

min-height: 88px;

margin: 0 auto;

display: flex;
align-items: center;
justify-content: space-between;

gap: 40px;
}

/* Logo */

.brand {
display: inline-flex;
align-items: center;

gap: 12px;

flex-shrink: 0;

color: var(--white);

font-size: 26px;
font-weight: 850;

letter-spacing: -0.8px;
}

.brand-logo {
width: 46px;
height: 46px;

object-fit: contain;

display: block;
}

.brand-name {
color: var(--white);
}

.brand-name span {
color: var(--blue);
}

/* Navigation */

.nav-links {
display: flex;
align-items: center;

gap: 32px;

margin-left: auto;

color: var(--muted);

font-size: 15px;
font-weight: 650;
}

.nav-links a {
position: relative;

padding: 8px 0;

transition: color 0.2s ease;
}

.nav-links a:hover {
color: var(--white);
}

.nav-links a.active {
color: var(--white);
}

.nav-links a.active::after {
content: "";

position: absolute;

left: 0;
right: 0;
bottom: -5px;

height: 2px;

border-radius: 10px;

background: var(--blue);
}

.nav-links .login {
border: 1px solid var(--border-light);

padding: 10px 18px;

border-radius: 8px;

color: var(--white);
}

.nav-links .login:hover {
border-color: var(--blue);
background: var(--blue-light);
}

.nav-cta {
background: var(--blue);

color: var(--white);

padding: 11px 19px;

border-radius: 8px;

font-weight: 800;
}

.nav-cta:hover {
background: var(--blue-dark);
}

/* =========================================================
HERO
========================================================= */

.hero {
text-align: center;

max-width: 1000px;

margin: 0 auto;

padding: 105px 24px 90px;
}

.eyebrow {
display: inline-flex;
align-items: center;

gap: 9px;

padding: 9px 16px;

margin-bottom: 28px;

border: 1px solid #25436b;

border-radius: 999px;

background: #0d2342;

color: #8eb4ff;

font-size: 14px;
font-weight: 800;
}

.eyebrow-dot {
width: 8px;
height: 8px;

border-radius: 50%;

background: var(--blue);

box-shadow: 0 0 14px rgba(63, 124, 255, 0.7);
}

.hero h1 {
font-size: clamp(50px, 7vw, 82px);

line-height: 1.02;

letter-spacing: -4px;

font-weight: 900;

margin-bottom: 28px;
}

.hero h1 span {
color: var(--blue);
}

.hero p {
max-width: 760px;

margin: 0 auto;

color: var(--muted-light);

font-size: 20px;

line-height: 1.65;
}

.tagline {
margin-top: 28px;

color: #dce5f2;

font-size: 16px;

font-weight: 750;
}

.tagline span {
color: var(--blue);
}

/* =========================================================
FOUNDING 5
========================================================= */

.founding-wrap {
padding: 0 0 90px;
}

.founding {
width: min(var(--container), calc(100% - 48px));

margin: 0 auto;

background:
linear-gradient(
135deg,
#0b2443 0%,
#081a31 100%
);

border: 1px solid #244467;

border-radius: 22px;

padding: 42px 46px;

box-shadow: var(--shadow);
}

.founding-grid {
display: grid;

grid-template-columns: 1fr auto;

gap: 50px;

align-items: center;
}

.founding-brand {
display: flex;
align-items: center;

gap: 10px;

margin-bottom: 17px;
}

.founding-brand img {
width: 35px;
height: 35px;

object-fit: contain;
}

.founding-brand strong {
font-size: 20px;
}

.founding-kicker {
color: #75a4ff;

font-size: 13px;

font-weight: 900;

letter-spacing: 1.7px;

text-transform: uppercase;

margin-bottom: 10px;
}

.founding h2 {
font-size: 32px;

line-height: 1.2;

letter-spacing: -1px;

margin-bottom: 13px;
}

.founding p {
max-width: 720px;

color: var(--muted-light);

font-size: 16px;
}

.spots {
display: inline-block;

margin-top: 17px;

padding: 7px 12px;

border-radius: 999px;

background: var(--green-light);

color: var(--green);

font-size: 12px;

font-weight: 850;
}

.founding-price {
min-width: 230px;

padding: 27px 30px;

text-align: center;

background: #07182d;

border: 1px solid #2b4a6d;

border-radius: 16px;
}

.founding-price .old {
display: block;

color: #71839a;

text-decoration: line-through;

font-size: 15px;
}

.founding-price strong {
display: block;

color: var(--blue);

font-size: 44px;

line-height: 1.1;

font-weight: 900;

margin-top: 4px;
}

.founding-price small {
color: var(--muted);

font-size: 13px;
}

/* =========================================================
PRICING
========================================================= */

.pricing {
padding-bottom: 110px;
}

.pricing-heading {
max-width: 760px;

margin: 0 auto 48px;

text-align: center;
}

.pricing-heading h2 {
font-size: 42px;

line-height: 1.15;

letter-spacing: -1.7px;

margin-bottom: 13px;
}

.pricing-heading p {
color: var(--muted);

font-size: 17px;
}

.pricing-grid {
display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 18px;

align-items: stretch;
}

.plan {
position: relative;

display: flex;
flex-direction: column;

min-height: 650px;

padding: 30px 28px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: 17px;

transition:
transform 0.22s ease,
border-color 0.22s ease,
box-shadow 0.22s ease;
}

.plan:hover {
transform: translateY(-6px);

border-color: var(--border-light);

box-shadow: var(--shadow);
}

.plan.featured {
background:
linear-gradient(
180deg,
#0d2648 0%,
#0a1d35 100%
);

border: 2px solid var(--blue);

box-shadow: var(--shadow-blue);
}

.badge {
display: inline-block;

align-self: flex-start;

margin-bottom: 16px;

padding: 6px 12px;

border-radius: 999px;

background: var(--blue);

color: white;

font-size: 11px;

font-weight: 900;

letter-spacing: 0.6px;

text-transform: uppercase;
}

.plan-name {
font-size: 24px;

font-weight: 850;

letter-spacing: -0.5px;

margin-bottom: 8px;
}

.plan-description {
color: var(--muted);

font-size: 14px;

line-height: 1.55;

min-height: 70px;
}

.price-wrap {
min-height: 82px;

margin: 23px 0 21px;
}

.price {
color: var(--white);

font-size: 38px;

line-height: 1.1;

font-weight: 900;

letter-spacing: -1.8px;
}

.price small {
color: var(--muted);

font-size: 13px;

font-weight: 600;

letter-spacing: 0;
}

.price .old {
color: #71839a;

font-size: 15px;

font-weight: 600;

text-decoration: line-through;

letter-spacing: 0;

margin-right: 5px;
}

.features {
list-style: none;

flex: 1;

margin-bottom: 25px;
}

.features li {
display: flex;

align-items: flex-start;

gap: 9px;

padding: 7px 0;

color: #c0ccdb;

font-size: 14px;

line-height: 1.45;
}

.check {
flex-shrink: 0;

color: var(--green);

font-weight: 900;

font-size: 15px;
}

.button {
display: block;

width: 100%;

padding: 13px 16px;

border: 1px solid #3b5069;

border-radius: 9px;

text-align: center;

color: var(--white);

font-size: 14px;

font-weight: 850;

background: transparent;

transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}

.button:hover {
background: var(--surface-3);

border-color: #617892;

transform: translateY(-1px);
}

.button.primary {
background: var(--blue);

border-color: var(--blue);

box-shadow: 0 10px 25px rgba(63, 124, 255, 0.2);
}

.button.primary:hover {
background: var(--blue-dark);

border-color: var(--blue-dark);
}

/* =========================================================
TRUST
========================================================= */

.trust {
border-top: 1px solid var(--border);

border-bottom: 1px solid var(--border);

background: #081a30;
}

.trust-inner {
width: min(var(--container), calc(100% - 48px));

margin: 0 auto;

padding: 22px 0;

display: flex;

justify-content: center;

align-items: center;

flex-wrap: wrap;

gap: 15px;

color: var(--muted);

font-size: 13px;

text-align: center;
}

.trust-inner strong {
color: var(--white);
}

.separator {
color: #38516d;
}

/* =========================================================
SAVINGS
========================================================= */

.savings {
width: min(1000px, calc(100% - 48px));

margin: 0 auto;

padding: 105px 0;
}

.section-heading {
max-width: 760px;

margin: 0 auto 45px;

text-align: center;
}

.label {
display: inline-block;

margin-bottom: 12px;

color: #75a4ff;

font-size: 14px;

font-weight: 900;

letter-spacing: 1.5px;

text-transform: uppercase;
}

.section-heading h2 {
font-size: 42px;

line-height: 1.13;

letter-spacing: -1.7px;

margin-bottom: 15px;
}

.section-heading p {
color: var(--muted);

font-size: 17px;

line-height: 1.6;
}

.savings-card {
overflow: hidden;

background: var(--surface);

border: 1px solid var(--border);

border-radius: 18px;

box-shadow: var(--shadow);
}

.savings-top {
display: grid;

grid-template-columns: 1fr auto;

gap: 30px;

padding: 30px;

background: var(--surface-2);

border-bottom: 1px solid var(--border);
}

.savings-story h3 {
font-size: 25px;

margin-bottom: 8px;
}

.savings-story p {
color: var(--muted);

font-size: 14px;

max-width: 620px;
}

.savings-number {
min-width: 180px;

text-align: right;
}

.savings-number span {
display: block;

color: var(--muted);

font-size: 14px;

margin-bottom: 4px;
}

.savings-number strong {
color: var(--green);

font-size: 39px;

font-weight: 900;
}

.savings-row {
display: flex;

align-items: center;

justify-content: space-between;

gap: 20px;

padding: 19px 30px;

border-bottom: 1px solid var(--border);

color: var(--muted);

font-size: 15px;
}

.savings-row strong {
color: var(--white);

font-size: 16px;
}

.savings-row.total {
background: var(--green-light);

border-bottom: 0;
}

.savings-row.total strong {
color: var(--green);

font-size: 30px;
}

/* =========================================================
BENEFITS
========================================================= */

.benefits {
width: min(1100px, calc(100% - 48px));

margin: 0 auto;

padding: 20px 0 110px;
}

.benefit-grid {
display: grid;

grid-template-columns: repeat(3, 1fr);

gap: 18px;
}

.benefit {
padding: 28px;

background: var(--surface);

border: 1px solid var(--border);

border-radius: 15px;

transition:
transform 0.2s ease,
border-color 0.2s ease;
}

.benefit:hover {
transform: translateY(-4px);

border-color: var(--border-light);
}

.benefit-number {
color: var(--blue);

font-size: 20px;

font-weight: 900;

letter-spacing: 1px;

margin-bottom: 18px;
}

.benefit h3 {
font-size: 20px;

margin-bottom: 8px;
}

.benefit p {
color: var(--muted);

font-size: 14px;

line-height: 1.6;
}

/* =========================================================
FAQ
========================================================= */

.faq {
background: #081a30;

border-top: 1px solid var(--border);

border-bottom: 1px solid var(--border);

padding: 100px 24px;
}

.faq-inner {
max-width: 850px;

margin: 0 auto;
}

.faq-inner .section-heading {
margin-bottom: 35px;
}

.faq details {
border-bottom: 1px solid var(--border);

padding: 22px 0;
}

.faq summary {
cursor: pointer;

list-style: none;

color: var(--white);

font-size: 17px;

font-weight: 750;

padding-right: 30px;

position: relative;
}

.faq summary::-webkit-details-marker {
display: none;
}

.faq summary::after {
content: "+";

position: absolute;

right: 0;
top: -2px;

color: var(--blue);

font-size: 25px;

font-weight: 400;
}

.faq details[open] summary::after {
content: "−";
}

.faq details p {
max-width: 720px;

margin-top: 14px;

color: var(--muted);

font-size: 15px;

line-height: 1.65;
}

/* =========================================================
CTA
========================================================= */

.cta {
padding: 105px 24px;

text-align: center;

background:
radial-gradient(
circle at center,
#102c54 0%,
#061426 65%
);
}

.cta h2 {
font-size: clamp(36px, 5vw, 55px);

line-height: 1.1;

letter-spacing: -2px;

margin-bottom: 14px;
}

.cta p {
color: var(--muted);

font-size: 17px;

margin-bottom: 30px;
}

.cta-button {
display: inline-block;

padding: 15px 26px;

border-radius: 9px;

background: var(--blue);

color: white;

font-size: 15px;

font-weight: 850;

box-shadow: 0 12px 30px rgba(63, 124, 255, 0.24);

transition:
background 0.2s ease,
transform 0.2s ease;
}

.cta-button:hover {
background: var(--blue-dark);

transform: translateY(-2px);
}

/* =========================================================
FOOTER
========================================================= */

.site-footer {
background: #030c18;

border-top: 1px solid var(--border);

padding: 35px 24px;

color: var(--muted);

text-align: center;

font-size: 13px;
}

.site-footer strong {
color: var(--white);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) {

.pricing-grid {
grid-template-columns: repeat(2, 1fr);
}

.plan {
min-height: 620px;
}

.benefit-grid {
grid-template-columns: repeat(2, 1fr);
}

}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 760px) {

.container {
width: min(100% - 32px, var(--container));
}

.header-inner {
width: calc(100% - 32px);

```
min-height: 76px;

gap: 15px;
```

}

.brand {
font-size: 21px;

```
gap: 9px;
```

}

.brand-logo {
width: 38px;
height: 38px;
}

.nav-links {
gap: 10px;
}

.nav-links > a:not(.login):not(.nav-cta) {
display: none;
}

.nav-links .login {
padding: 8px 12px;

```
font-size: 13px;
```

}

.nav-cta {
padding: 9px 13px;

```
font-size: 13px;
```

}

.hero {
padding: 75px 20px 70px;
}

.hero h1 {
font-size: 47px;

```
letter-spacing: -2.5px;
```

}

.hero p {
font-size: 17px;
}

.founding-wrap {
padding-bottom: 65px;
}

.founding {
width: calc(100% - 32px);

```
padding: 30px 24px;
```

}

.founding-grid {
grid-template-columns: 1fr;

```
gap: 28px;
```

}

.founding h2 {
font-size: 27px;
}

.founding-price {
width: 100%;
}

.pricing {
padding-bottom: 75px;
}

.pricing-heading h2,
.section-heading h2 {
font-size: 33px;
}

.pricing-grid {
grid-template-columns: 1fr;
}

.plan {
min-height: auto;

```
padding: 28px 24px;
```

}

.savings {
width: calc(100% - 32px);

```
padding: 75px 0;
```

}

.savings-top {
grid-template-columns: 1fr;

```
padding: 25px;
```

}

.savings-number {
text-align: left;
}

.savings-row {
flex-direction: column;

```
align-items: flex-start;

gap: 4px;

padding: 17px 25px;
```

}

.benefits {
width: calc(100% - 32px);

```
padding-bottom: 75px;
```

}

.benefit-grid {
grid-template-columns: 1fr;
}

.faq {
padding: 75px 20px;
}

.cta {
padding: 75px 20px;
}

.cta h2 {
font-size: 37px;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

.nav-links .login {
display: none;
}

.hero h1 {
font-size: 41px;
}

.hero {
padding-top: 60px;
}

.eyebrow {
font-size: 12px;
}

.founding {
width: calc(100% - 24px);
}

.pricing-grid {
gap: 14px;
}

.savings,
.benefits {
width: calc(100% - 24px);
}

}