:root{
  --bg:#F4F8FC;
  --surface:#FFFFFF;
  --surface-2:#F9FBFF;
  --text:#0B1320;
  --muted:#5B6B82;
  --brand:#6D28D9;
  --brand2:#0EA5E9;
  --accent:#F59E0B;
  --line:rgba(11,19,32,.12);
  --line-strong:rgba(11,19,32,.2);
  --shadow:0 18px 40px rgba(11,19,32,.10);
  --shadow-soft:0 12px 28px rgba(11,19,32,.08);
  --radius:18px;
  --radius-sm:12px;
  --white:#FFFFFF;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Manrope","Segoe UI",sans-serif;
  color:var(--text);
  line-height:1.6;
  overflow-x:hidden;
  background:
    radial-gradient(1000px 500px at 100% -10%, rgba(109,40,217,.08), transparent 65%),
    radial-gradient(800px 400px at 0% 12%, rgba(14,165,233,.08), transparent 65%),
    var(--bg);
}
body.menu-open{overflow:hidden}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

.container{max-width:1200px;margin:0 auto;padding:0 16px}
.section{padding:72px 0}
.section-tight{padding:56px 0}
.section-head{max-width:760px;margin-bottom:30px}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#075985;
  font-weight:800;
  margin-bottom:12px;
}
.kicker::before{
  content:"";
  width:18px;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
}

h1,h2,h3{line-height:1.15;margin:0 0 12px}
h1{font-size:clamp(2rem,4vw,3.55rem);letter-spacing:-.02em}
h2{font-size:clamp(1.55rem,3vw,2.3rem);letter-spacing:-.01em}
h3{font-size:clamp(1.05rem,2vw,1.25rem)}
p{margin:0 0 12px;color:var(--muted)}
ul{margin:8px 0 0;padding-left:20px}
li{margin:0 0 8px;color:var(--muted)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  height:44px;
  padding:10px 14px;
  font-size:14px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:700;
  letter-spacing:.01em;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(11,19,32,.14)}
.btn:focus-visible{outline:2px solid var(--brand2);outline-offset:2px}
.btn-primary{background:linear-gradient(135deg,var(--brand),var(--brand2));color:var(--white)}
.btn-secondary{background:rgba(255,255,255,.14);color:var(--white);border-color:rgba(255,255,255,.45)}
.btn-light{background:var(--surface);border-color:var(--line);color:var(--text)}
.btn-block{width:100%}

.site-header{
  position:sticky;
  top:0;
  z-index:70;
  background:rgba(244,248,252,.84);
  backdrop-filter:blur(12px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
.header-wrap{
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:800;
  white-space:nowrap;
  font-size:1.04rem;
}
.logo svg{width:22px;height:22px;color:var(--brand)}

.nav-desktop{display:flex;align-items:center;gap:22px}
.nav-link{
  color:var(--muted);
  font-weight:650;
  position:relative;
  padding:8px 0;
  transition:color .2s ease;
}
.nav-link.active,.nav-link:hover{color:var(--text)}
.nav-link.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:3px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
}
.header-cta{display:inline-flex}

.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--text);
  align-items:center;
  justify-content:center;
}

.mobile-panel{
  display:none;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#fff, #f8fbff);
}
.mobile-panel.open{display:block;animation:slideDown .24s ease}
.mobile-nav{padding:12px 0 16px;display:grid;gap:8px}
.mobile-link{
  padding:11px 6px;
  font-weight:650;
  color:var(--muted);
  border-bottom:1px solid rgba(11,19,32,.08);
}
.mobile-link.active{color:var(--brand)}
.mobile-cta{margin-top:8px}

.hero-banner{
  width:100vw;
  min-height:84vh;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  position:relative;
  display:flex;
  align-items:flex-end;
  padding-top:24px;
  padding-bottom:12px;
  background-size:cover;
  background-position:center;
  isolation:isolate;
}
.hero-banner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(120deg,rgba(9,14,24,.82),rgba(109,40,217,.42),rgba(14,165,233,.34));
  z-index:-1;
}
.hero-panel{
  width:min(780px,100%);
  background:linear-gradient(145deg, rgba(11,19,32,.54), rgba(11,19,32,.44));
  border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(10px);
  color:var(--white);
  border-radius:22px;
  padding:36px;
  margin:0 0 60px;
  box-shadow:0 24px 40px rgba(5,8,18,.35);
}
.hero-panel p{color:rgba(255,255,255,.9);font-size:clamp(.98rem,2vw,1.12rem)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.chip{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.08em;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.32);
  color:var(--white);
  padding:7px 11px;
  border-radius:999px;
  font-weight:700;
}

.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:var(--shadow-soft);
}
.card h3{margin-bottom:8px}

.media-card{overflow:hidden;padding:0}
.media-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.media-card .card-body{padding:18px}

.badge{
  display:inline-flex;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(14,165,233,.14);
  color:#0369A1;
  font-size:12px;
  font-weight:800;
}
.badge.alt{background:rgba(245,158,11,.18);color:#92400E}
.meta{display:flex;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--muted);margin:4px 0 14px}

.editorial{
  background:linear-gradient(180deg,var(--surface),var(--surface-2));
  border-radius:22px;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.editorial .split{display:grid;grid-template-columns:1.08fr .92fr}
.editorial img{width:100%;height:100%;object-fit:cover;min-height:300px}
.editorial .content{padding:30px}

.roadmap{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.road-step{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 14px;
  font-weight:700;
}
.road-arrow{color:var(--brand2);font-size:20px;font-weight:700;line-height:1}

.tools-layout{display:grid;grid-template-columns:1.06fr .94fr;gap:20px}
.tool-result{
  margin-top:12px;
  padding:14px;
  border-radius:14px;
  background:rgba(109,40,217,.06);
  border:1px solid rgba(109,40,217,.22);
  color:var(--text);
}

.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:grid;gap:6px}
label{font-weight:700;font-size:14px;color:#1e293b}
input:not([type="radio"]),select,textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
  font:inherit;
  color:var(--text);
  background:var(--surface);
}
input:not([type="radio"]):focus-visible,select:focus-visible,textarea:focus-visible{
  outline:none;
  border-color:#7c3aed;
  box-shadow:0 0 0 3px rgba(124,58,237,.15);
}
textarea{min-height:130px;resize:vertical}

.quiz-question{
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
}
.quiz-question strong{
  display:block;
  margin-bottom:10px;
}
#readinessQuizForm{gap:16px}
.quiz-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 12px;
  margin-top:10px;
}
.radio-line{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  gap:10px;
  color:var(--text);
  font-weight:600;
  line-height:1.35;
  width:100%;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  cursor:pointer;
}
.radio-line input[type="radio"]{
  width:auto;
  min-width:0;
  height:auto;
  padding:0;
  border:none;
  background:transparent;
  box-shadow:none;
  margin:0;
  flex:0 0 auto;
}

.accordion-item{border-bottom:1px solid var(--line)}
.accordion-trigger{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:16px 0;
  font:inherit;
  font-weight:750;
  color:var(--text);
  display:flex;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.accordion-content{max-height:0;overflow:hidden;transition:max-height .25s ease}
.accordion-content p{padding:0 0 14px}

.glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.term{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}

.testimonial{
  margin:0;
  padding:18px;
  border-left:3px solid var(--brand2);
  background:linear-gradient(180deg,#fff,#f9fbff);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
}

.cta-strip{
  background:linear-gradient(130deg,var(--brand),var(--brand2));
  color:var(--white);
  border-radius:22px;
  padding:30px;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  box-shadow:var(--shadow);
}
.cta-strip p{color:rgba(255,255,255,.9)}

.site-footer{
  background:linear-gradient(180deg,#0f1a2f,#0b1424);
  color:#c7d2e7;
  margin-top:40px;
  padding:56px 0 70px;
}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr) 1.2fr;gap:20px}
.footer-title{font-weight:800;color:#fff;margin-bottom:10px}
.footer-link{display:block;color:#c7d2e7;padding:5px 0}
.footer-link:hover{color:#fff}

.socials{display:flex;gap:10px;margin-top:10px}
.socials a{
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .2s ease;
}
.socials a:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34)}
.disclaimer{margin-top:22px;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);font-size:13px;color:#d4ddf0}

.to-top{
  position:fixed;
  right:16px;
  bottom:16px;
  width:44px;
  height:44px;
  border:none;
  border-radius:12px;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#fff;
  cursor:pointer;
  box-shadow:var(--shadow);
  opacity:0;
  visibility:hidden;
  transition:opacity .2s ease,visibility .2s ease;
  z-index:30;
}
.to-top.show{opacity:1;visibility:visible}

.toast{
  position:fixed;
  left:50%;
  bottom:20px;
  transform:translateX(-50%) translateY(20px);
  background:#0f172a;
  color:#fff;
  padding:12px 16px;
  border-radius:12px;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease;
  z-index:80;
}
.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}

.page-hero{padding:64px 0 24px}
.page-hero h1{font-size:clamp(1.85rem,3vw,2.75rem)}
.note-box{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff}

@keyframes slideDown{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:1120px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tools-layout{grid-template-columns:1fr}
  .editorial .split{grid-template-columns:1fr}
}

@media (max-width:768px){
  .section{padding:44px 0}
  .section-tight{padding:38px 0}
  .header-wrap{min-height:64px}
  .nav-desktop,.header-cta{display:none}
  .menu-toggle{display:inline-flex;flex-shrink:0}
  .mobile-panel{display:none}

  .logo{
    font-size:.95rem;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:78vw;
  }

  .hero-banner{min-height:76vh;padding-top:16px;padding-bottom:8px}
  .hero-panel{padding:24px;margin-bottom:30px;border-radius:18px}

  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .glossary{grid-template-columns:1fr}
  .input-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .quiz-options{grid-template-columns:1fr}

  .cta-strip{padding:24px;border-radius:18px}
  .editorial .content{padding:22px}
  .editorial img{min-height:240px}
}

@media (max-width:480px){
  .btn{height:40px;padding:8px 12px;font-size:13px}
  .container{padding:0 14px}
  .hero-panel{padding:20px;margin-bottom:24px}
  .hero-actions{gap:10px}
  .chip{font-size:11px;padding:6px 10px}
  .page-hero{padding:44px 0 16px}
  .site-footer{padding:48px 0 76px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}