:root{
--navy:#08152b;
--blue:#1266ed;
--cyan:#63d5ff;
--ink:#17233b;
--muted:#61708a;
--surface:#fff;
--tint:#f3f7ff;
--line:#dce5f4;
--radius:18px;
--shadow:0 16px 42px rgba(18,42,85,.1);
--sans:"DM Sans",Arial,sans-serif;
--display:"Plus Jakarta Sans",Arial,sans-serif}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
scroll-padding-top:5.5rem}
body{
margin:0;
background:var(--surface);
color:var(--ink);
font:400 1rem/1.65 var(--sans)}
img{
display:block;
max-width:100%}
a{
color:inherit;
text-decoration:none}
button{
font:inherit}
.container{
width:min(1120px,calc(100% - 3rem));
margin-inline:auto}
.section{
padding:6.5rem 0}
.section-tint{
background:var(--tint)}
.section-dark{
background:var(--navy);
color:#fff}
.sr-only{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0}
.skip-link{
position:fixed;
z-index:100;
top:1rem;
left:1rem;
transform:translateY(-200%);
background:#fff;
color:var(--navy);
padding:.75rem 1rem;
border-radius:8px;
font-weight:700}
.skip-link:focus{
transform:none}
.site-header{
position:sticky;
top:0;
z-index:50;
background:rgba(255,255,255,.94);
border-bottom:1px solid rgba(220,229,244,.8);
backdrop-filter:blur(14px)}
.header-inner{
height:4.75rem;
display:flex;
align-items:center;
justify-content:space-between;
gap:1.5rem}
.brand{
display:inline-flex;
align-items:center;
gap:.55rem;
color:var(--navy);
font:700 1.1rem var(--display);
letter-spacing:-.02em;
white-space:nowrap}
.brand-mark{
display:grid;
place-items:center;
width:2.1rem;
height:2.1rem;
background:linear-gradient(135deg,var(--blue),#785cf4);
color:#fff;
border-radius:9px;
font:800 .7rem var(--display);
letter-spacing:-.08em}
.brand-wordmark{
font:800 1rem var(--display);
letter-spacing:-.03em}
a:focus-visible,button:focus-visible,summary:focus-visible{
outline:3px solid var(--blue);
outline-offset:3px}
.primary-nav{
display:flex;
align-items:center;
gap:1.5rem;
font-size:.91rem;
font-weight:600}
.primary-nav>a:not(.nav-cta){
color:#3f4d66}
.primary-nav>a:hover,.primary-nav>a:focus-visible{
color:var(--blue)}
.nav-cta{
padding:.65rem 1rem;
background:var(--navy);
border-radius:8px;
color:#fff}
.menu-toggle{
display:none;
border:0;
background:transparent;
padding:.5rem}
.menu-toggle span:not(.sr-only){
display:block;
width:1.4rem;
height:2px;
margin:.25rem;
background:var(--navy)}
.hero{
position:relative;
isolation:isolate;
overflow:hidden;
min-height:650px;
display:grid;
place-items:center;
text-align:center;
color:#fff;
background:radial-gradient(circle at 50% 10%,#244a93 0,transparent 36%),linear-gradient(135deg,#07152d 10%,#102d61 66%,#152651)}
.hero:after{
content:"";
position:absolute;
z-index:-1;
inset:auto -12vw -35vw auto;
width:46vw;
height:46vw;
border-radius:50%;
background:rgba(75,172,255,.14);
filter:blur(1px)}
.hero-content{
max-width:910px}
.eyebrow{
margin:0 0 .75rem;
color:var(--blue);
font-size:.78rem;
font-weight:800;
letter-spacing:.13em;
text-transform:uppercase}
.hero .eyebrow{
color:var(--cyan)}
h1,h2,h3{
margin:0;
font-family:var(--display);
line-height:1.15;
letter-spacing:-.045em}
h1{
font-size:clamp(2.7rem,6vw,5.25rem);
max-width:900px}
h1 span{
color:var(--cyan)}
h2{
font-size:clamp(2rem,4vw,3.15rem)}
h3{
font-size:1.25rem}
.hero-copy{
max-width:670px;
margin:1.45rem auto 2rem;
color:#d9e6ff;
font-size:clamp(1.05rem,2vw,1.22rem)}
.button-row{
display:flex;
justify-content:center;
gap:.85rem;
flex-wrap:wrap}
.button{
display:inline-flex;
align-items:center;
justify-content:center;
gap:.65rem;
min-height:3.2rem;
padding:.85rem 1.25rem;
border:1px solid transparent;
border-radius:9px;
font-weight:700;
transition:transform .2s,box-shadow .2s,background .2s}
.button:hover{
transform:translateY(-2px)}
.button-primary{
background:var(--blue);
color:#fff;
box-shadow:0 10px 24px rgba(38,118,247,.28)}
.button-primary:hover{
background:#0b53c7;
box-shadow:0 14px 28px rgba(38,118,247,.36)}
.button-secondary{
border-color:rgba(255,255,255,.45);
color:#fff}
.button-secondary:hover{
background:rgba(255,255,255,.1)}
.trust-list{
display:flex;
justify-content:center;
gap:1.6rem;
flex-wrap:wrap;
margin:2rem 0 0;
padding:0;
color:#d6e4fa;
font-size:.88rem;
list-style:none}
.trust-list li:before{
content:"✓";
margin-right:.4rem;
color:var(--cyan);
font-weight:800}
.section-heading{
max-width:680px;
margin-bottom:3rem}
.section-heading>p:last-child{
margin:.9rem 0 0;
color:var(--muted)}
.section-heading.centered{
margin-inline:auto;
text-align:center}
.section-heading.light h2{
color:#fff}
.card-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.4rem}
.card{
padding:2rem;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:0 8px 24px rgba(19,44,90,.05);
transition:transform .25s,box-shadow .25s}
.card:hover{
transform:translateY(-5px);
box-shadow:var(--shadow)}
.card-icon{
display:grid;
place-items:center;
width:3rem;
height:3rem;
margin-bottom:1.6rem;
background:#e8f1ff;
color:var(--blue);
border-radius:10px;
font-size:1.3rem;
font-weight:700}
.card p{
margin:1rem 0 1.5rem;
color:var(--muted)}
.text-link{
color:var(--blue);
font-weight:800;
font-size:.93rem;
text-decoration:underline;
text-underline-offset:.16em}
.text-link span{
display:inline-block;
transition:transform .2s}
.text-link:hover span{
transform:translateX(4px)}
.feature-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:3rem}
.feature-grid article{
padding-top:1.2rem;
border-top:2px solid #bfd1f3}
.number{
color:var(--blue);
font:700 .85rem var(--display)}
.feature-grid h3{
margin:.8rem 0}
.feature-grid p{
margin:0;
color:var(--muted)}
.founder-layout{
display:grid;
grid-template-columns:minmax(250px,.82fr) 1.18fr;
align-items:center;
gap:clamp(2.5rem,7vw,6.5rem)}
.founder-photo{
overflow:hidden;
border-radius:var(--radius);
box-shadow:var(--shadow)}
.founder-photo img{
width:100%;
aspect-ratio:1/1.08;
object-fit:cover}
.founder-copy>p:not(.eyebrow){
color:var(--muted)}
.founder-copy .text-link{
display:inline-block;
margin-top:1rem}
.testimonial{
margin:0;
padding:2rem;
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:var(--radius)}
.testimonial blockquote{
margin:0 0 1.8rem;
font-size:1.08rem;
line-height:1.65}
.testimonial figcaption{
display:grid;
font-size:.9rem}
.testimonial figcaption span{
color:#aabbd6;
font-size:.82rem}
.pricing-wrap{
display:flex;
justify-content:center}
.pricing-card{
width:min(100%,480px);
padding:2.25rem;
background:#fff;
border:1px solid var(--line);
border-radius:var(--radius);
box-shadow:var(--shadow)}
.plan-name{
margin:0;
color:var(--blue);
font-weight:800}
.price{
margin:.4rem 0 1.6rem;
font:700 1.8rem var(--display);
letter-spacing:-.04em}
.price span{
display:block;
margin-top:.35rem;
color:var(--muted);
font:400 .9rem var(--sans);
letter-spacing:0}
.pricing-card ul{
margin:0 0 1.8rem;
padding:0;
list-style:none}
.pricing-card li{
padding:.6rem 0;
border-bottom:1px solid var(--line)}
.pricing-card li:before{
content:"✓";
margin-right:.65rem;
color:var(--blue);
font-weight:800}
.full-width{
width:100%}
.faq-layout{
display:grid;
grid-template-columns:.75fr 1.25fr;
gap:5rem}
.faq-layout>div>p:last-child{
color:var(--muted)}
.faq-list{
display:grid;
gap:.75rem}
details{
background:#fff;
border:1px solid var(--line);
border-radius:10px;
padding:0 1.1rem}
summary{
padding:1rem 1.8rem 1rem 0;
cursor:pointer;
font-weight:700;
list-style:none;
position:relative}
summary::-webkit-details-marker{
display:none}
summary:after{
content:"+";
position:absolute;
right:0;
color:var(--blue);
font-size:1.35rem;
font-weight:400}
details[open] summary:after{
content:"−"}
details p{
margin:0 0 1.1rem;
color:var(--muted)}
.site-footer{
padding:3.5rem 0 1.3rem;
background:#060f21;
color:#b7c5dc}
.footer-top{
display:grid;
grid-template-columns:1.4fr 1fr auto;
gap:2rem;
align-items:start;
padding-bottom:2.5rem}
.brand-footer{
color:#fff}
.brand-footer .brand-wordmark{
color:#fff}
.footer-top p{
max-width:390px;
margin:0;
font-size:.92rem}
.footer-top nav{
display:grid;
gap:.55rem;
font-size:.9rem}
.footer-top nav a:hover,.footer-bottom a:hover{
color:#fff}
.footer-bottom{
display:flex;
justify-content:space-between;
gap:1rem;
padding-top:1.3rem;
border-top:1px solid rgba(255,255,255,.12);
font-size:.82rem}
.footer-bottom p{
margin:0}
@media (max-width:760px){
.container{
width:min(100% - 2rem,1120px)}
.section{
padding:4.5rem 0}
.header-inner{
height:4.25rem}
.menu-toggle{
display:block}
.primary-nav{
display:none;
position:absolute;
top:calc(100% + 1px);
left:0;
width:100%;
padding:1rem;
background:#fff;
border-bottom:1px solid var(--line);
box-shadow:0 12px 22px rgba(18,42,85,.08);
align-items:stretch;
gap:.15rem}
.primary-nav.is-open{
display:flex;
flex-direction:column}
.primary-nav>a{
padding:.75rem 1rem}
.nav-cta{
text-align:center;
margin-top:.5rem}
.hero{
min-height:590px}
.card-grid,.feature-grid{
grid-template-columns:1fr}
.course-grid{
gap:1rem}
.feature-grid{
gap:1.8rem}
.founder-layout,.faq-layout{
grid-template-columns:1fr;
gap:2.5rem}
.founder-photo{
max-width:420px}
.footer-top{
grid-template-columns:1fr;
gap:1.4rem}
.footer-bottom{
flex-direction:column}
.testimonial-grid{
gap:1rem}
}
@media (prefers-reduced-motion:reduce){
html{
scroll-behavior:auto}
*,*:before,*:after{
transition-duration:.01ms!important;
animation-duration:.01ms!important}
}
/* =========================================
   Contact Page Form
========================================= */

.contact-form{
    margin-top:40px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:24px;
    margin-bottom:24px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.form-group label{
    font-weight:600;
    color:var(--ink);
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    padding:14px 16px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:var(--ink);
    font:inherit;
    transition:.25s ease;
}

.form-group textarea{
    resize:vertical;
    min-height:180px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    outline:none;
    border-color:var(--blue);
    box-shadow:0 0 0 4px rgba(0,119,255,.15);
}

.contact-form button{
    margin-top:20px;
}