:root {
--navy: #073b67;
--navy-deep: #042d50;
--orange: #f26a21;
--red: #e4032f;
--red-dark: #bf0028;
--yellow: #ffd857;
--yellow-dark: #ffc928;
--teal: #006b68;
--text: #213444;
--muted: #576979;
--paper: #f6fafb;
--cream: #fff7e4;
--blue-soft: #e7f5fa;
--border: #d6e3e8;
--white: #ffffff;
--shadow: 0 18px 50px rgba(4, 45, 80, 0.14);
--shadow-soft: 0 10px 30px rgba(4, 45, 80, 0.09);
--radius-lg: 28px;
--radius-md: 16px;
--radius-sm: 10px;
--heading: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
--body: "Source Sans 3", "Segoe UI", Arial, sans-serif;
}
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
margin: 0;
background: var(--white);
color: var(--text);
font-family: var(--body);
font-size: 18px;
line-height: 1.65;
}
img {
display: block;
height: auto;
max-width: 100%;
}
a {
color: inherit;
text-decoration-thickness: 2px;
text-underline-offset: 0.2em;
}
button,
input,
textarea,
select {
font: inherit;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
:focus-visible {
border-radius: 6px;
outline: 3px solid var(--yellow);
outline-offset: 4px;
}
.sr-only {
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
.skip-link {
background: var(--yellow);
color: var(--navy-deep);
font-weight: 800;
left: 1rem;
padding: 0.7rem 1rem;
position: fixed;
top: -5rem;
z-index: 999;
}
.skip-link:focus {
top: 1rem;
}
.shell {
margin: 0 auto;
max-width: 1180px;
padding-left: 28px;
padding-right: 28px;
width: 100%;
}
.site-header {
background: rgba(255, 255, 255, 0.97);
border-bottom: 1px solid rgba(7, 59, 103, 0.1);
position: sticky;
top: 0;
z-index: 100;
}
.nav-wrap {
align-items: center;
display: flex;
justify-content: space-between;
min-height: 82px;
}
.brand {
align-items: center;
display: inline-flex;
gap: 12px;
text-decoration: none;
}
.brand-mark {
align-items: center;
background: var(--orange);
border-radius: 50%;
color: var(--white);
display: inline-flex;
flex: 0 0 42px;
font-family: var(--heading);
font-size: 24px;
font-weight: 900;
height: 42px;
justify-content: center;
}
.brand strong,
.brand small {
display: block;
}
.brand strong {
color: var(--navy);
font-family: var(--heading);
line-height: 1.1;
}
.brand small {
color: var(--muted);
font-size: 14px;
line-height: 1.3;
}
.main-nav {
align-items: center;
display: flex;
gap: 28px;
}
.main-nav a {
color: var(--navy);
font-family: var(--heading);
font-size: 15px;
font-weight: 800;
text-decoration: none;
}
.main-nav a:hover {
color: var(--orange);
}
.main-nav .nav-cta {
background: var(--navy);
border-radius: 999px;
color: var(--white);
padding: 12px 20px;
}
.main-nav .nav-cta:hover {
background: var(--navy-deep);
color: var(--white);
}
.nav-toggle {
background: transparent;
border: 0;
display: none;
height: 48px;
padding: 10px;
width: 48px;
}
.nav-toggle > span:not(.sr-only) {
background: var(--navy);
display: block;
height: 3px;
margin: 5px auto;
width: 26px;
}
.hero {
background: var(--navy);
color: var(--white);
overflow: hidden;
padding: 86px 0 76px;
position: relative;
}
.hero-orbit {
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
pointer-events: none;
position: absolute;
}
.hero-orbit-one {
height: 520px;
right: -220px;
top: -100px;
width: 520px;
}
.hero-orbit-two {
bottom: -250px;
height: 680px;
left: -330px;
width: 680px;
}
.hero-grid {
align-items: center;
display: grid;
gap: 70px;
grid-template-columns: 1.08fr 0.92fr;
position: relative;
z-index: 1;
}
.eyebrow {
color: var(--orange);
font-family: var(--heading);
font-size: 14px;
font-weight: 900;
letter-spacing: 0.12em;
margin: 0 0 16px;
text-transform: uppercase;
}
.eyebrow-light {
color: var(--yellow);
}
h1,
h2,
h3 {
font-family: var(--heading);
letter-spacing: -0.025em;
margin-top: 0;
}
h1 {
font-size: clamp(46px, 5.1vw, 72px);
font-weight: 900;
line-height: 1.02;
margin-bottom: 24px;
}
h1 span {
color: var(--yellow);
display: block;
}
h2 {
color: var(--navy);
font-size: clamp(36px, 4.2vw, 56px);
font-weight: 900;
line-height: 1.08;
margin-bottom: 20px;
}
h3 {
color: var(--navy);
font-size: 25px;
font-weight: 900;
line-height: 1.18;
margin-bottom: 12px;
}
.hero-lead {
color: rgba(255, 255, 255, 0.86);
font-size: 21px;
line-height: 1.55;
margin: 0 0 30px;
max-width: 660px;
}
.hero-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.button {
align-items: center;
border: 0;
border-radius: 12px;
cursor: pointer;
display: inline-flex;
font-family: var(--heading);
font-size: 16px;
font-weight: 900;
justify-content: center;
min-height: 52px;
padding: 14px 22px;
text-align: center;
text-decoration: none;
transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}
.button:hover {
transform: translateY(-2px);
}
.button-yellow {
background: var(--yellow);
color: var(--navy-deep);
}
.button-yellow:hover {
background: var(--yellow-dark);
}
.button-primary {
background: var(--red);
color: var(--white);
}
.button-primary:hover {
background: var(--red-dark);
}
.button-quiet {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.34);
color: var(--white);
}
.button-quiet:hover {
background: rgba(255, 255, 255, 0.16);
}
.button-dark {
background: var(--navy);
color: var(--white);
}
.button-dark:hover {
background: var(--navy-deep);
}
.hero-facts {
border-top: 1px solid rgba(255, 255, 255, 0.18);
display: grid;
gap: 18px;
grid-template-columns: repeat(3, 1fr);
margin-top: 34px;
padding-top: 24px;
}
.hero-facts strong,
.hero-facts span {
display: block;
}
.hero-facts strong {
color: var(--yellow);
font-family: var(--heading);
font-size: 22px;
line-height: 1.2;
}
.hero-facts span {
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
line-height: 1.35;
margin-top: 5px;
}
.hero-visual {
background: var(--white);
border: 12px solid var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
margin: 0;
overflow: visible;
position: relative;
}
.hero-visual img {
aspect-ratio: 1 / 1;
border-radius: 18px;
object-fit: cover;
width: 100%;
}
.hero-visual figcaption {
align-items: center;
background: var(--white);
border-radius: 14px;
bottom: 18px;
color: var(--navy);
display: flex;
flex-direction: column;
left: 18px;
padding: 10px 14px;
position: absolute;
}
.hero-visual figcaption strong {
font-family: var(--heading);
font-size: 17px;
}
.hero-visual figcaption span {
color: var(--muted);
font-size: 13px;
}
.hero-sticker {
align-items: center;
background: var(--yellow);
border: 6px solid var(--white);
border-radius: 50%;
color: var(--navy);
display: flex;
font-family: var(--heading);
font-size: 14px;
font-weight: 900;
height: 112px;
justify-content: center;
line-height: 1.1;
padding: 15px;
position: absolute;
right: -35px;
text-align: center;
top: -35px;
transform: rotate(7deg);
width: 112px;
z-index: 2;
}
.hero-video-card {
background: var(--white);
border: 12px solid var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: visible;
position: relative;
}
.hero-video-shell {
aspect-ratio: 16 / 9;
background: var(--navy-deep);
border-radius: 18px;
overflow: hidden;
}
.hero-video-shell iframe {
border: 0;
display: block;
height: 100%;
width: 100%;
}
.hero-video-caption {
color: var(--navy);
padding: 16px 10px 6px;
}
.hero-video-caption strong,
.hero-video-caption span {
display: block;
}
.hero-video-caption strong {
font-family: var(--heading);
font-size: 19px;
font-weight: 900;
}
.hero-video-caption span {
color: var(--muted);
font-size: 14px;
line-height: 1.4;
margin-top: 4px;
}
.trust-bar {
background: var(--yellow);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.trust-grid p {
border-right: 1px solid rgba(7, 59, 103, 0.16);
margin: 0;
padding: 22px 28px;
}
.trust-grid p:first-child {
border-left: 1px solid rgba(7, 59, 103, 0.16);
}
.trust-grid strong {
color: var(--navy);
display: block;
font-family: var(--heading);
font-weight: 900;
}
.section {
padding: 100px 0;
}
.section-light {
background: var(--paper);
}
.section-heading {
align-items: end;
display: grid;
gap: 70px;
grid-template-columns: 1.15fr 0.85fr;
margin-bottom: 52px;
}
.section-heading > p {
color: var(--muted);
margin-bottom: 6px;
}
.section-heading.center {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 790px;
text-align: center;
}
.section-heading.center h2,
.section-heading.center p {
color: var(--white);
}
.benefits-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(4, 1fr);
}
.benefit-card {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-soft);
padding: 28px;
}
.benefit-card > span {
align-items: center;
background: var(--blue-soft);
border-radius: 50%;
color: var(--navy);
display: inline-flex;
font-family: var(--heading);
font-weight: 900;
height: 42px;
justify-content: center;
margin-bottom: 26px;
width: 42px;
}
.benefit-card p {
color: var(--muted);
margin-bottom: 0;
}
.program-section {
background: var(--navy);
color: var(--white);
overflow: hidden;
position: relative;
}
.age-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
}
.age-card {
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-md);
padding: 34px;
}
.age-card-featured {
background: var(--yellow);
color: var(--navy-deep);
transform: translateY(-12px);
}
.age-card h3 {
color: var(--white);
}
.age-card-featured h3 {
color: var(--navy);
}
.age-label {
color: var(--yellow);
font-family: var(--heading);
font-size: 14px;
font-weight: 900;
text-transform: uppercase;
}
.age-card-featured .age-label {
color: var(--red);
}
.age-card ul {
margin: 20px 0 0;
padding-left: 22px;
}
.film-section {
background: var(--cream);
}
.film-grid {
align-items: center;
display: grid;
gap: 74px;
grid-template-columns: 0.8fr 1.2fr;
}
.film-copy p:not(.eyebrow) {
color: var(--muted);
}
.text-link {
color: var(--navy);
font-family: var(--heading);
font-weight: 900;
}
.video-shell {
aspect-ratio: 16 / 9;
background: var(--navy-deep);
border: 10px solid var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
overflow: hidden;
}
.video-shell.hero-video-shell {
border: 0;
border-radius: 18px;
box-shadow: none;
}
.video-poster {
background: var(--navy-deep);
border: 0;
cursor: pointer;
height: 100%;
padding: 0;
position: relative;
width: 100%;
}
.video-poster img {
height: 100%;
object-fit: cover;
opacity: 0.8;
width: 100%;
}
.video-poster::after {
background: linear-gradient(transparent, rgba(4, 45, 80, 0.82));
bottom: 0;
content: "";
height: 55%;
left: 0;
position: absolute;
right: 0;
}
.video-poster strong {
bottom: 22px;
color: var(--white);
font-family: var(--heading);
font-size: 20px;
left: 26px;
position: absolute;
z-index: 2;
}
.play-button {
align-items: center;
background: var(--red);
border-radius: 50%;
color: var(--white);
display: flex;
font-size: 30px;
height: 76px;
justify-content: center;
left: 50%;
padding-left: 5px;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 76px;
z-index: 2;
}
.video-shell iframe {
border: 0;
height: 100%;
width: 100%;
}
.process-section {
background: var(--white);
}
.process-list {
display: grid;
gap: 18px;
grid-template-columns: repeat(4, 1fr);
list-style: none;
margin-bottom: 0;
padding-bottom: 0;
}
.process-list li {
border-top: 4px solid var(--yellow);
padding: 26px 16px 0 0;
}
.process-list > li > span {
color: var(--orange);
display: block;
font-family: var(--heading);
font-size: 40px;
font-weight: 900;
line-height: 1;
margin-bottom: 20px;
}
.process-list p {
color: var(--muted);
}
.product-section {
background: var(--blue-soft);
}
.product-grid {
align-items: center;
display: grid;
gap: 80px;
grid-template-columns: 0.88fr 1.12fr;
}
.product-visual {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
margin: 0;
padding: 28px;
position: relative;
}
.product-visual img {
aspect-ratio: 1 / 1;
object-fit: contain;
width: 100%;
}
.sale-badge {
align-items: center;
background: var(--red);
border: 5px solid var(--white);
border-radius: 50%;
color: var(--white);
display: flex;
font-family: var(--heading);
font-size: 22px;
font-weight: 900;
height: 86px;
justify-content: center;
position: absolute;
right: -20px;
top: -20px;
width: 86px;
z-index: 2;
}
.product-copy > p:not(.eyebrow) {
color: var(--muted);
}
.check-list {
list-style: none;
margin: 28px 0;
padding: 0;
}
.check-list li {
padding: 5px 0 5px 32px;
position: relative;
}
.check-list li::before {
color: var(--teal);
content: "✓";
font-weight: 900;
left: 0;
position: absolute;
}
.price-row {
align-items: baseline;
display: flex;
gap: 14px;
margin-bottom: 22px;
}
.price-row strong {
color: var(--red);
font-family: var(--heading);
font-size: 36px;
}
.old-price {
color: var(--muted);
text-decoration: line-through;
}
.story-section {
background: var(--yellow);
}
.story-grid {
align-items: center;
display: grid;
gap: 74px;
grid-template-columns: 1.05fr 0.95fr;
}
.story-photo {
background: var(--white);
border: 10px solid var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
margin: 0;
overflow: hidden;
}
.story-photo img {
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
}
.story-copy p {
color: rgba(4, 45, 80, 0.86);
}
.credibility {
border-left: 4px solid var(--red);
font-weight: 700;
padding-left: 18px;
}
.faq-grid {
align-items: start;
display: grid;
gap: 80px;
grid-template-columns: 0.8fr 1.2fr;
}
.faq-list {
border-top: 1px solid var(--border);
}
.faq-list details {
border-bottom: 1px solid var(--border);
padding: 22px 0;
}
.faq-list summary {
color: var(--navy);
cursor: pointer;
font-family: var(--heading);
font-size: 20px;
font-weight: 900;
list-style: none;
padding-right: 40px;
position: relative;
}
.faq-list summary::-webkit-details-marker {
display: none;
}
.faq-list summary::after {
content: "+";
font-size: 28px;
position: absolute;
right: 5px;
top: -4px;
}
.faq-list details[open] summary::after {
content: "–";
}
.faq-list p {
color: var(--muted);
margin: 14px 40px 0 0;
}
.contact-section {
background: var(--navy);
color: var(--white);
}
.contact-grid {
align-items: start;
display: grid;
gap: 80px;
grid-template-columns: 0.9fr 1.1fr;
}
.contact-copy h2 {
color: var(--white);
}
.contact-copy > p:not(.eyebrow) {
color: rgba(255, 255, 255, 0.78);
}
.direct-contact {
display: grid;
gap: 12px;
margin-top: 34px;
}
.direct-contact a {
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-sm);
display: block;
padding: 14px 18px;
text-decoration: none;
}
.direct-contact span,
.direct-contact strong {
display: block;
}
.direct-contact span {
color: rgba(255, 255, 255, 0.58);
font-size: 13px;
text-transform: uppercase;
}
.contact-form {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow);
color: var(--text);
padding: 34px;
}
.form-status {
border-radius: var(--radius-sm);
font-weight: 700;
margin: 0 0 20px;
padding: 13px 15px;
}
.form-status-success {
background: #e6f4ed;
color: #175c3a;
}
.form-status-error {
background: #fff0ed;
color: #9f271f;
}
.form-honeypot {
height: 1px !important;
left: -10000px !important;
opacity: 0 !important;
pointer-events: none !important;
position: absolute !important;
width: 1px !important;
}
.contact-form label {
color: var(--navy);
display: block;
font-family: var(--heading);
font-size: 15px;
font-weight: 900;
margin-bottom: 18px;
}
.contact-form input,
.contact-form textarea {
background: var(--white);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text);
display: block;
margin-top: 7px;
min-height: 50px;
padding: 12px 14px;
width: 100%;
}
.contact-form textarea {
line-height: 1.45;
min-height: 110px;
resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
border-color: var(--navy);
}
.field-row {
display: grid;
gap: 16px;
grid-template-columns: 1fr 1fr;
}
.contact-form .consent {
align-items: start;
color: var(--muted);
display: grid;
font-family: var(--body);
font-size: 14px;
font-weight: 400;
gap: 10px;
grid-template-columns: 20px 1fr;
}
.contact-form .consent input {
height: 20px;
margin: 2px 0 0;
min-height: 20px;
width: 20px;
}
.contact-form .button {
width: 100%;
}
.form-note {
color: var(--muted);
font-size: 13px;
margin: 12px 0 0;
text-align: center;
}
.site-footer {
background: var(--navy-deep);
color: rgba(255, 255, 255, 0.76);
padding: 34px 0;
}
.footer-grid {
align-items: center;
display: grid;
gap: 30px;
grid-template-columns: 1.4fr 0.7fr 0.9fr;
}
.brand-footer strong {
color: var(--white);
}
.brand-footer small {
color: rgba(255, 255, 255, 0.66);
}
.footer-grid > div:nth-child(2) {
display: grid;
gap: 5px;
}
.footer-grid > div:nth-child(2) a {
text-decoration: none;
}
.footer-grid p {
margin: 0;
text-align: right;
}
.mobile-cta {
display: none;
}
.reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
@media (max-width: 980px) {
.main-nav {
gap: 18px;
}
.hero-grid,
.film-grid,
.product-grid,
.story-grid,
.contact-grid {
gap: 44px;
}
.hero-grid {
grid-template-columns: 1fr 0.82fr;
}
.hero-facts {
grid-template-columns: 1fr;
}
.benefits-grid,
.process-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 760px) {
body {
font-size: 17px;
padding-bottom: 72px;
}
.shell {
padding-left: 20px;
padding-right: 20px;
}
.site-header {
top: 0;
}
.nav-wrap {
min-height: 70px;
}
.brand-mark {
flex-basis: 38px;
height: 38px;
width: 38px;
}
.nav-toggle {
display: block;
}
.main-nav {
align-items: stretch;
background: var(--white);
border-bottom: 1px solid var(--border);
box-shadow: var(--shadow-soft);
display: none;
flex-direction: column;
gap: 0;
left: 0;
padding: 14px 20px 22px;
position: absolute;
right: 0;
top: 70px;
}
.main-nav.is-open {
display: flex;
}
.main-nav a {
border-bottom: 1px solid var(--border);
padding: 13px 4px;
}
.main-nav .nav-cta {
margin-top: 12px;
text-align: center;
}
.hero {
padding: 56px 0 60px;
}
.hero-grid,
.section-heading,
.film-grid,
.product-grid,
.story-grid,
.faq-grid,
.contact-grid {
display: grid;
gap: 38px;
grid-template-columns: 1fr;
}
.hero-grid {
gap: 48px;
}
h1 {
font-size: clamp(40px, 12vw, 54px);
}
h2 {
font-size: clamp(32px, 10vw, 42px);
}
.hero-lead {
font-size: 19px;
}
.hero-actions {
display: grid;
grid-template-columns: 1fr;
}
.hero-facts {
grid-template-columns: repeat(3, 1fr);
}
.hero-facts strong {
font-size: 17px;
}
.hero-facts span {
font-size: 12px;
}
.hero-sticker {
height: 96px;
right: -10px;
top: -28px;
width: 96px;
}
.trust-grid,
.benefits-grid,
.age-grid,
.process-list,
.footer-grid {
grid-template-columns: 1fr;
}
.trust-grid p,
.trust-grid p:first-child {
border: 0;
border-bottom: 1px solid rgba(7, 59, 103, 0.16);
padding: 16px 0;
}
.section {
padding: 72px 0;
}
.section-heading {
margin-bottom: 38px;
}
.age-card-featured {
transform: none;
}
.process-list {
gap: 32px;
}
.process-list li {
display: grid;
gap: 20px;
grid-template-columns: 52px 1fr;
padding-top: 20px;
}
.process-list > li > span {
font-size: 34px;
margin: 0;
}
.product-grid {
gap: 48px;
}
.product-visual {
margin: 0 10px;
}
.story-grid {
gap: 44px;
}
.field-row {
grid-template-columns: 1fr;
}
.contact-form {
border-radius: 20px;
padding: 24px;
}
.footer-grid p {
text-align: left;
}
.mobile-cta {
background: var(--white);
border-top: 1px solid var(--border);
bottom: 0;
display: block;
left: 0;
padding: 10px 14px;
position: fixed;
right: 0;
z-index: 150;
}
.mobile-cta a {
background: var(--red);
border-radius: 10px;
color: var(--white);
display: block;
font-family: var(--heading);
font-size: 16px;
font-weight: 900;
padding: 12px 16px;
text-align: center;
text-decoration: none;
}
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.reveal {
opacity: 1;
transform: none;
}
}