:root{
  --navy:#071A3D; --navy-2:#0B2558; --blue:#1F5BFF; --blue-2:#0E3FD0;
  --yellow:#FFD60A; --red:#E3141F; --white:#fff;
  --paper:#F3F5FA; --card:#ffffff; --ink:#0A1630; --muted:#4A5672; --line:#DCE2EE;
  --radius:14px;
  --font:"Outfit", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --cond:"Barlow Condensed", "Arial Narrow", "Outfit", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --paper:#0A1430; --card:#10204A; --ink:#E9EEF8; --muted:#A9B6D3; --line:#1F3366; }
}
:root[data-theme="dark"]{ --paper:#0A1430; --card:#10204A; --ink:#E9EEF8; --muted:#A9B6D3; --line:#1F3366; }
html{scroll-behavior:smooth; scroll-padding-top:calc(env(safe-area-inset-top,0px) + 84px)}
*,*::before,*::after{box-sizing:border-box}
body{overflow-x:clip; margin:0; font-family:var(--font); color:var(--ink); background:var(--paper); line-height:1.55; -webkit-font-smoothing:antialiased}
img{max-width:100%; display:block}
a{color:inherit}
h1,h2,h3{margin:0; line-height:1.05; letter-spacing:-.02em}
p{margin:0}
.wrap{width:min(1240px, 100% - 2.5rem); margin-inline:auto}
:focus-visible{outline:3px solid var(--yellow); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }

/* Buttons */
.btn{white-space:nowrap; display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 1.6rem; border-radius:10px; font-weight:700; font-size:.98rem; text-decoration:none; border:2px solid transparent; letter-spacing:.01em; transition:transform .15s ease, background .15s ease}
.btn:hover{transform:translateY(-2px)}
.btn-yellow{background:var(--yellow); color:var(--navy)}
.btn-yellow:hover{background:#ffe14d}
.btn-red{background:var(--red); color:#fff}
.btn-red:hover{background:#c60f19}
.btn-ghost{border-color:rgba(255,255,255,.75); color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.1)}
.btn svg{width:1em; height:1em}

/* Header */
.site-header{position:sticky; top:0; z-index:50; background:rgba(7,26,61,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; border-bottom:1px solid rgba(255,255,255,.08)}
.site-header .wrap{display:flex; align-items:center; gap:1.5rem; min-height:76px}
.logo{display:flex; flex-direction:column; text-decoration:none; line-height:1; flex-shrink:0}
.logo-word{font-family:var(--cond); font-weight:800; font-size:2.15rem; letter-spacing:-.01em; display:flex; align-items:center}
.logo-word .q{color:var(--blue)}
.logo-word svg{width:20px; height:24px; margin-left:2px}
.logo-sub{font-size:.66rem; font-weight:600; letter-spacing:.2em; margin-top:3px; color:#DCE5FF}
.nav{display:flex; gap:0; margin-left:auto}
.nav a{white-space:nowrap; padding:.55rem .7rem; text-decoration:none; font-size:.93rem; font-weight:500; color:#E3EAFB; border-radius:8px; position:relative}
.nav a:hover{color:#fff; background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{color:var(--yellow)}
.nav a[aria-current="page"]::after{content:""; position:absolute; left:.75rem; right:.75rem; bottom:.2rem; height:2px; background:var(--yellow)}
.header-cta{display:flex; gap:.6rem; align-items:center}
.phone-pill{display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1.05rem; background:rgba(255,255,255,.12); border-radius:10px; text-decoration:none; font-weight:700; white-space:nowrap}
.phone-pill svg{width:18px; height:18px}
.header-cta .btn{padding:.75rem 1.2rem}
.nav-toggle{display:none}
.burger{display:none; width:44px; height:44px; border-radius:10px; background:rgba(255,255,255,.1); cursor:pointer; align-items:center; justify-content:center; margin-left:auto}
.burger span,.burger span::before,.burger span::after{display:block; width:20px; height:2px; background:#fff; position:relative; border-radius:2px}
.burger span::before,.burger span::after{content:""; position:absolute; left:0}
.burger span::before{top:-6px} .burger span::after{top:6px}

/* Hero */
.hero{position:relative; color:#fff; background:
  linear-gradient(115deg, var(--navy) 0%, var(--navy) 38%, var(--navy-2) 60%, #0b2a6b 100%); overflow:hidden; isolation:isolate}
.hero::before{content:""; position:absolute; inset:0; background:linear-gradient(115deg, transparent 41%, rgba(31,91,255,.22) 41.2%, transparent 52%); z-index:-1}
.hero .wrap{display:grid; grid-template-columns: minmax(0,1.02fr) minmax(0,1fr); gap:2rem; align-items:center; padding-block:3.5rem 3rem}
.eyebrow{display:flex; align-items:center; gap:.7rem; font-weight:600; font-size:1rem; letter-spacing:.04em; text-transform:uppercase; margin-bottom:1.1rem}
.eyebrow::before{content:""; width:4px; height:1.25em; background:var(--red); border-radius:2px}
.hero h1{font-size:clamp(2.5rem, 4.3vw, 4.15rem); font-weight:800; line-height:.98; letter-spacing:-.035em}
.hero h1 > span{display:block; white-space:nowrap}
.hero h1 .blue{color:var(--blue)} .hero h1 .yel{color:var(--yellow)}
.hero-lead{font-size:1.18rem; color:#D8E1F5; max-width:34em; margin-top:1.4rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem}
.hero-trust{display:flex; flex-wrap:wrap; gap:1.2rem 1.6rem; margin-top:2.3rem; padding:0; list-style:none}
.hero-trust li{display:flex; align-items:center; gap:.65rem; font-size:.9rem; font-weight:500; line-height:1.25}
.hero-trust li + li{padding-left:1.6rem; border-left:1px solid rgba(255,255,255,.18)}
.hero-trust svg{width:34px; height:34px; flex-shrink:0}
.stars{color:var(--yellow); letter-spacing:2px; font-size:1.05rem; display:block}

.hero-media{align-self:center; position:relative; container-type:inline-size; margin-right:calc((100vw - min(1240px, 100vw - 2.5rem)) / -2)}
.hero-media img{width:100%; height:auto; aspect-ratio:896/472; object-fit:cover; -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg, transparent 0, #000 34%), linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%); mask-composite:intersect}
.offer{position:absolute; left:47.4%; top:5.6%; width:21.8%; height:27.6%; display:flex; flex-direction:column; justify-content:center; background:#fff; color:var(--navy); border-radius:10px; padding:0 2.4cqw 0 3.4cqw; box-shadow:0 18px 40px -12px rgba(0,0,0,.5); text-decoration:none}
.offer::before{content:""; position:absolute; left:0; top:12%; bottom:12%; width:5px; background:var(--red); border-radius:0 3px 3px 0}
.offer small{display:block; font-weight:700; font-size:clamp(.62rem, 1.75cqw, .95rem); line-height:1.1}
.offer b{display:block; color:var(--red); font-size:clamp(1.5rem, 5.8cqw, 3.1rem); font-weight:800; line-height:1; letter-spacing:-.03em; margin:.15em 0}
.offer span{font-size:clamp(.62rem, 1.6cqw, .9rem); color:var(--muted)}
.fast{position:absolute; left:74.8%; top:21.8%; width:19.8%; height:28.4%; display:flex; flex-direction:column; justify-content:center; background:var(--navy); color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:0 2.2cqw 0 3cqw; text-decoration:none; box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.fast::before{content:""; position:absolute; left:0; top:14%; bottom:14%; width:4px; background:var(--red)}
.fast strong{display:block; font-size:clamp(.72rem, 2.15cqw, 1.2rem); line-height:1.15}
.fast span{display:block; margin-top:.5em; font-size:clamp(.62rem, 1.6cqw, .88rem); color:#DCE5FF}
.fast:hover strong{color:var(--yellow)}

/* Trust bar */
.trustbar{background:var(--card); border-bottom:1px solid var(--line)}
.trustbar ul{list-style:none; margin:0 auto; padding:1.3rem 0; display:grid; grid-template-columns:repeat(5,1fr)}
.trustbar li{display:flex; align-items:center; justify-content:center; gap:.8rem; line-height:1.25; font-size:.85rem; color:var(--muted)}
.trustbar li + li{border-left:1px solid var(--line)}
.trustbar strong{display:block; color:var(--ink); font-size:.98rem}
.trustbar svg{width:34px; height:34px; flex-shrink:0}

/* Section shells */
.section{padding-block:4.5rem}
.section-head h2{font-size:clamp(2rem, 3.6vw, 2.9rem); font-weight:800}
.section-head p{color:var(--muted); font-size:1.1rem; margin-top:.9rem; max-width:36em}
.section-head .eyebrow{color:var(--ink); font-size:.92rem}

/* Courses */
.courses .wrap{display:grid; grid-template-columns: 1.15fr 3fr; gap:2.2rem; align-items:center}
.courses .section-head .btn{margin-top:1.6rem}
.courses .section-head h2{font-size:clamp(2rem, 3vw, 2.5rem)}
.course-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem}
.course{background:var(--card); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 0 var(--line), 0 14px 34px -22px rgba(7,26,61,.45); display:flex; flex-direction:column; text-decoration:none; color:inherit; transition:transform .2s ease}
.course:hover{transform:translateY(-4px)}
.course img{width:100%; aspect-ratio:300/76; object-fit:cover}
.course-body{padding:1.3rem 1.3rem 1.4rem; display:flex; flex-direction:column; gap:.5rem; flex:1}
.course h3{font-size:1.45rem; font-weight:700}
.course p{color:var(--muted)}
.course-foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:.6rem}
.course-foot b{font-size:1.4rem; font-weight:800}
.course-foot i{width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-weight:700}
.c-blue b{color:var(--blue)} .c-blue i{background:#E5ECFF; color:var(--blue-2)}
.c-red b{color:var(--red)} .c-red i{background:#FDE4E6; color:var(--red)}
.c-yel b{color:#E0B800} .c-yel i{background:#FFF6CC; color:#7a6200}

/* Manual / automatic split */
.split{display:grid; grid-template-columns:1fr 1fr; gap:0}
.panel{position:relative; color:#fff; padding:2.6rem clamp(1.4rem,4vw,4.4rem); display:flex; gap:2rem; align-items:center; min-height:200px; overflow:hidden; isolation:isolate}
.panel-man{background:linear-gradient(100deg, #0E3FD0 0%, #0A2A8A 40%, #061433 75%)}
.panel-auto{background:linear-gradient(100deg, #E3141F 0%, #A20C14 40%, #2a0508 78%)}
.panel img{position:absolute; right:0; top:0; height:100%; width:55%; object-fit:cover; z-index:-1; -webkit-mask-image:linear-gradient(90deg, transparent, #000 45%); mask-image:linear-gradient(90deg, transparent, #000 45%)}
.panel .ico{width:76px; height:76px; border-radius:50%; background:#fff; display:grid; place-items:center; flex-shrink:0}
.panel .ico svg{width:40px; height:40px}
.panel h2{font-size:1.9rem; font-weight:800}
.panel p{margin:.4rem 0 1.1rem; color:#EEF2FF; font-size:1.05rem}

/* Prices */
.prices{background:var(--paper)}
.price-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.8rem; margin-top:2.6rem}
.board{background:var(--card); border-radius:18px; overflow:hidden; box-shadow:0 1px 0 var(--line), 0 20px 44px -26px rgba(7,26,61,.5)}
.board-head{display:flex; align-items:center; gap:1rem; padding:1.4rem 1.6rem; color:#fff}
.board-head svg{width:30px; height:30px}
.board-head h3{font-size:1.6rem; font-weight:800}
.board-head p{font-size:.92rem; opacity:.85}
#manual .board-head{background:linear-gradient(100deg,var(--blue-2),var(--navy))}
#automatic .board-head{background:linear-gradient(100deg,var(--red),#7d0a10)}
.board-body{padding:1.4rem 1.6rem 1.7rem}
.featured-rows{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
.feat{border:2px solid var(--line); border-radius:12px; padding:1rem 1.1rem}
.feat.hot{border-color:var(--yellow); background:color-mix(in srgb, var(--yellow) 12%, var(--card))}
.feat span{display:block; font-size:.86rem; color:var(--muted); font-weight:500}
.feat b{display:block; font-size:2rem; font-weight:800; line-height:1.1; margin-top:.2rem}
.feat em{font-style:normal; font-size:.95rem; font-weight:600; color:var(--muted)}
.board h4{margin:1.6rem 0 .5rem; font-size:1.05rem; font-weight:700}
.tier-table{width:100%; border-collapse:collapse; font-size:1rem}
.tier-table th{text-align:left; font-size:.82rem; font-weight:600; color:var(--muted); padding:.4rem 0; border-bottom:1px solid var(--line)}
.tier-table th:last-child,.tier-table td:last-child{text-align:right}
.tier-table td{padding:.75rem 0; border-bottom:1px solid var(--line)}
.tier-table td:first-child{font-weight:700}
.tier-table td small{display:block; color:var(--muted); font-weight:400; font-size:.85rem}
.tier-table .amt{font-weight:800; font-size:1.15rem}
.tbc{display:inline-block; color:var(--red); border:1.5px dashed currentColor; border-radius:6px; padding:.05rem .45rem; font-size:.9rem!important}
.board .btn{margin-top:1.4rem; width:100%; justify-content:center}
.price-note{margin-top:1.4rem; color:var(--muted); font-size:.92rem}

/* Steps */
.steps{background:var(--navy); color:#fff}
.steps .section-head p{color:#C9D5F0}
.steps .eyebrow{color:#fff}
.step-list{list-style:none; padding:0; margin:2.6rem 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:s}
.step-list li{counter-increment:s; padding:1.5rem 1.4rem 1.6rem; border-radius:var(--radius); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); position:relative}
.step-list li::before{content:counter(s); display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--yellow); color:var(--navy); font-weight:800; font-size:1.3rem; margin-bottom:1rem}
.step-list li:nth-child(2)::before{background:var(--blue); color:#fff}
.step-list li:nth-child(3)::before{background:var(--red); color:#fff}
.step-list li:nth-child(4)::before{background:#fff}
.step-list h3{font-size:1.2rem; font-weight:700; margin-bottom:.4rem}
.step-list p{color:#C9D5F0; font-size:.98rem}

/* About */
.about .wrap{display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:start}
.why{list-style:none; margin:0; padding:0; display:grid; gap:1rem}
.why li{display:flex; gap:1rem; background:var(--card); padding:1.1rem 1.2rem; border-radius:12px; border:1px solid var(--line)}
.why svg{width:28px; height:28px; flex-shrink:0; margin-top:.15rem}
.why b{display:block; font-size:1.05rem}
.why span{color:var(--muted); font-size:.95rem}

/* Areas */
.areas{background:var(--card); border-block:1px solid var(--line)}
.area-list{list-style:none; padding:0; margin:2rem 0 0; display:flex; flex-wrap:wrap; gap:.7rem}
.area-list li{display:flex; align-items:center; gap:.45rem; padding:.6rem 1rem; border-radius:999px; background:var(--paper); border:1px solid var(--line); font-weight:600; font-size:.95rem}
.area-list svg{width:16px; height:16px}

/* FAQ */
.faq-list{margin-top:2rem; display:grid; gap:.8rem; max-width:860px}
.faq-list details{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 1.3rem}
.faq-list summary{cursor:pointer; list-style:none; padding:1.1rem 0; font-weight:700; font-size:1.08rem; display:flex; justify-content:space-between; gap:1rem}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+"; color:var(--red); font-size:1.5rem; line-height:1}
.faq-list details[open] summary::after{content:"–"}
.faq-list details p{padding:0 0 1.2rem; color:var(--muted)}

/* Contact */
.contact{background:linear-gradient(110deg, var(--navy) 0%, var(--navy-2) 55%, var(--blue-2) 100%); color:#fff; position:relative; overflow:hidden}
.contact::after{content:""; position:absolute; right:-6%; top:0; bottom:0; width:38%; background:var(--yellow); transform:skewX(-14deg); opacity:.95}
.contact .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.3fr 1fr; gap:3rem; align-items:center}
.contact h2{font-size:clamp(2.1rem, 4vw, 3.2rem); font-weight:800}
.contact .lead{color:#D8E1F5; font-size:1.12rem; margin-top:1rem; max-width:32em}
.contact .hero-actions{margin-top:1.8rem}
.contact-card{background:#fff; color:var(--navy); border-radius:16px; padding:1.8rem; box-shadow:0 24px 50px -20px rgba(0,0,0,.5)}
.contact-card h3{font-size:1.3rem; font-weight:800; margin-bottom:1rem}
.contact-card ul{list-style:none; padding:0; margin:0; display:grid; gap:.9rem}
.contact-card li{display:flex; gap:.8rem; align-items:flex-start}
.contact-card svg{width:22px; height:22px; flex-shrink:0; margin-top:2px}
.contact-card a{font-weight:700; text-decoration:none}
.contact-card small{display:block; color:#55607A}

/* Footer */
.site-footer{background:#050F26; color:#B6C2DE; padding:3rem 0 2rem; font-size:.94rem}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
.site-footer h4{color:#fff; font-size:1rem; margin:0 0 .8rem}
.site-footer ul{list-style:none; padding:0; margin:0; display:grid; gap:.45rem}
.site-footer a{text-decoration:none} .site-footer a:hover{color:var(--yellow)}
.site-footer .logo{color:#fff; margin-bottom:1rem}
.copy{border-top:1px solid rgba(255,255,255,.1); margin-top:2.4rem; padding-top:1.4rem; font-size:.85rem}

/* Responsive */
@media (max-width:1300px){
  .nav a{padding:.5rem .5rem; font-size:.88rem}
  .phone-pill span{display:none}
}
@media (max-width:1020px){
  .burger{display:flex}
  .header-cta{order:2}
  .nav{position:absolute; left:0; right:0; top:100%; flex-direction:column; background:var(--navy); padding:.6rem 1.25rem 1.2rem; gap:0; display:none; border-bottom:3px solid var(--yellow)}
  .nav a{padding:.9rem .4rem; font-size:1.05rem; border-bottom:1px solid rgba(255,255,255,.08)}
  .nav a[aria-current="page"]::after{display:none}
  .nav-toggle:checked ~ .nav{display:flex}
  .hero .wrap{grid-template-columns:minmax(0,1fr); padding-top:2.6rem}
  .hero-media{margin-right:-1.25rem; margin-left:-1.25rem}
  .hero-media img{-webkit-mask-image:none; mask-image:none}
  .courses .wrap{grid-template-columns:1fr}
  .trustbar ul{grid-template-columns:repeat(3,1fr); row-gap:1.2rem}
  .trustbar li:nth-child(4){border-left:0}
  .split{grid-template-columns:1fr}
  .price-grid{grid-template-columns:1fr}
  .step-list{grid-template-columns:1fr 1fr}
  .about .wrap,.contact .wrap{grid-template-columns:1fr}
  .contact::after{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .header-cta .btn{display:none}
  .logo-word{font-size:1.8rem}
  .logo-sub{font-size:.58rem}
  .course-grid{grid-template-columns:1fr}
  .trustbar ul{grid-template-columns:1fr 1fr}
  .trustbar li{justify-content:flex-start; padding-left:.6rem}
  .trustbar li + li{border-left:0}
  .hero-trust li + li{padding-left:0; border-left:0}
  .hero-trust{display:grid; grid-template-columns:1fr 1fr}
  .featured-rows{grid-template-columns:1fr}
  .step-list{grid-template-columns:1fr}
  .panel{flex-direction:column; align-items:flex-start; gap:1rem}
  .panel img{width:70%; opacity:.6}
  .foot-grid{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%; justify-content:center}
  .hero h1{font-size:clamp(2.1rem, 10vw, 2.8rem)}
  .hero h1 > span{white-space:normal}
  .offer small{font-size:.62rem} .offer span{font-size:.58rem} .fast strong{font-size:.72rem} .fast span{font-size:.56rem}
}