:root{--navy:#0b1730;--navy2:#12224a;--navy3:#1a2f5e;--gold:#d4af5a;--gold2:#f1d98f;--gold3:#a8832f;--ink:#e9eef8;--muted:#a9b6d3;--line:rgba(212,175,90,.25);--card:#13254d;--wa:#25d366;--r:16px;--sh:0 10px 30px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:"Heebo",system-ui,Arial,sans-serif;background:radial-gradient(1200px 600px at 80% -10%,#1d3570 0,transparent 60%),var(--navy);color:var(--ink);line-height:1.7;font-size:17px}
img{max-width:100%;display:block}a{color:var(--gold2);text-decoration:none}a:hover{color:#fff}
h1,h2,h3,.serif{font-family:"Frank Ruhl Libre",serif;line-height:1.25;margin:0 0 .5em}
h1{font-size:clamp(2rem,4.6vw,3.4rem)}h2{font-size:clamp(1.6rem,3vw,2.3rem)}h3{font-size:1.25rem}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.gold{color:var(--gold)}.muted{color:var(--muted)}
.grad{background:linear-gradient(90deg,var(--gold2),var(--gold),var(--gold3));-webkit-background-clip:text;background-clip:text;color:transparent}
/* topbar & header */
.topbar{background:#07101f;border-bottom:1px solid var(--line);font-size:.9rem}
.topbar .wrap{display:flex;gap:18px;justify-content:space-between;align-items:center;padding-block:6px;flex-wrap:wrap}
.topbar a{color:var(--muted)}.topbar a:hover{color:var(--gold2)}
header.site{position:sticky;top:0;z-index:50;background:rgba(11,23,48,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site .wrap{display:flex;align-items:center;gap:24px;height:76px}
.brand{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-family:"Frank Ruhl Libre",serif;font-size:1.7rem;font-weight:900}
.brand small{color:var(--muted);font-size:.78rem;letter-spacing:.02em}
nav.main{display:flex;gap:4px;margin-inline-start:auto}
nav.main a{color:var(--ink);padding:8px 12px;border-radius:999px;font-weight:500}
nav.main a:hover,nav.main a.on{background:rgba(212,175,90,.12);color:var(--gold2)}
.hdr-actions{display:flex;gap:10px;align-items:center}
.icon-btn{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);color:var(--gold2);background:transparent;cursor:pointer}
.icon-btn svg{width:22px;height:22px}
.badge-count{position:absolute;top:-4px;left:-4px;background:var(--gold);color:var(--navy);font-size:.72rem;font-weight:800;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.burger{display:none}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 22px;border-radius:999px;font-weight:700;border:1px solid transparent;cursor:pointer;font-size:1rem;font-family:inherit;transition:.2s}
.btn svg{width:20px;height:20px}
.btn-gold{background:linear-gradient(180deg,var(--gold2),var(--gold) 55%,var(--gold3));color:#1b1405;box-shadow:0 6px 18px rgba(212,175,90,.25)}
.btn-gold:hover{filter:brightness(1.08);color:#000}
.btn-ghost{border-color:var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold2)}
.btn-wa{background:var(--wa);color:#05230f}.btn-wa:hover{filter:brightness(1.05);color:#000}
.btn-sm{padding:8px 14px;font-size:.9rem}.btn-block{width:100%}
/* hero */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .bg{position:absolute;inset:0}.hero .bg img{width:100%;height:100%;object-fit:cover;opacity:.32}
.hero .bg:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,23,48,.35),rgba(11,23,48,.95) 65%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:40px;padding-block:80px 70px;align-items:center}
.eyebrow{display:inline-block;border:1px solid var(--line);color:var(--gold2);padding:4px 14px;border-radius:999px;font-size:.88rem;margin-bottom:16px;background:rgba(212,175,90,.07)}
.hero p.lead{font-size:1.15rem;color:#d3dcef;max-width:60ch}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.finder{background:linear-gradient(180deg,rgba(26,47,94,.9),rgba(18,34,74,.9));border:1px solid var(--line);border-radius:22px;padding:26px;box-shadow:var(--sh)}
.finder h3{color:var(--gold2)}
.finder label{display:block;font-size:.9rem;color:var(--muted);margin:12px 0 6px}
select,input,textarea{width:100%;background:#0a1430;border:1px solid var(--line);color:var(--ink);border-radius:12px;padding:12px 14px;font:inherit}
select:focus,input:focus,textarea:focus{outline:2px solid var(--gold);border-color:transparent}
.stats{display:flex;gap:28px;margin-top:30px;flex-wrap:wrap}
.stats div b{display:block;font-family:"Frank Ruhl Libre",serif;font-size:1.8rem;color:var(--gold)}
.stats div span{color:var(--muted);font-size:.9rem}
/* sections */
section{padding:72px 0}
.sec-head{text-align:center;max-width:760px;margin:0 auto 40px}
.sec-head p{color:var(--muted)}
.divider{width:90px;height:3px;margin:12px auto 18px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0));border-block:1px solid rgba(212,175,90,.12)}
.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
/* category / feature cards */
.cat{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--card);min-height:260px;display:flex;align-items:flex-end;color:var(--ink)}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.cat:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,16,31,.95),rgba(7,16,31,.1) 60%)}
.cat:hover img{transform:scale(1.06)}
.cat .t{position:relative;z-index:1;padding:20px}.cat .t h3{color:var(--gold2);margin-bottom:4px}.cat .t p{margin:0;color:#c9d3ea;font-size:.95rem}
/* product cards */
.pcard{background:linear-gradient(180deg,var(--card),#0f1e40);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:rgba(212,175,90,.6)}
.pcard .ph{position:relative;aspect-ratio:1/1;background:#fff;display:grid;place-items:center;overflow:hidden}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .ph.contain img{object-fit:contain;padding:10px}
.tag{position:absolute;top:12px;right:12px;background:var(--gold);color:#1b1405;font-weight:800;font-size:.8rem;padding:4px 12px;border-radius:999px}
.tag.green{background:#1f8f4e;color:#fff;right:auto;left:12px}
.pcard .bd{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:.78rem;border:1px solid var(--line);color:var(--gold2);padding:2px 10px;border-radius:999px;background:rgba(212,175,90,.06)}
.pcard h3{font-size:1.15rem;margin:0}.pcard h3 a{color:var(--ink)}
.pcard p{margin:0;color:var(--muted);font-size:.93rem}
.price{font-family:"Frank Ruhl Libre",serif;font-weight:900;font-size:1.55rem;color:var(--gold)}
.price small{font-size:.85rem;color:var(--muted);font-family:Heebo,sans-serif;font-weight:400}
.pcard .ft{margin-top:auto;display:flex;gap:8px;padding-top:8px}
.pcard .ft .btn{flex:1}
/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split img{border-radius:22px;border:1px solid var(--line);box-shadow:var(--sh)}
.checks{list-style:none;padding:0;margin:16px 0}
.checks li{padding:8px 34px 8px 0;position:relative}
.checks li:before{content:"";position:absolute;right:0;top:12px;width:20px;height:20px;border-radius:50%;background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b1730' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;position:relative}
.step .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,var(--gold2),var(--gold3));color:var(--navy);font-weight:900;font-family:"Frank Ruhl Libre",serif;font-size:1.3rem;margin-bottom:12px}
.step p{color:var(--muted);margin:0}
blockquote.q{margin:0;padding:28px 32px;border-right:4px solid var(--gold);background:rgba(212,175,90,.06);border-radius:14px;font-family:"Frank Ruhl Libre",serif;font-size:1.2rem}
blockquote.q cite{display:block;margin-top:10px;font-family:Heebo;font-size:.9rem;color:var(--muted);font-style:normal}
/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.gallery img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.gallery .tall{grid-row:span 2}.gallery .tall img{height:452px}
/* knowledge + faq */
.topic{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;display:flex;gap:14px;align-items:flex-start;color:var(--ink)}
.topic .ic{flex:none;width:48px;height:48px;border-radius:12px;background:rgba(212,175,90,.12);display:grid;place-items:center;color:var(--gold)}
.topic .ic svg{width:26px;height:26px}.topic p{margin:0;color:var(--muted);font-size:.93rem}
.topic:hover{border-color:var(--gold)}
.faq-group{margin-bottom:36px}.faq-group h3{color:var(--gold2);border-bottom:1px solid var(--line);padding-bottom:8px}
details.faq{background:var(--card);border:1px solid var(--line);border-radius:14px;margin:10px 0;overflow:hidden}
details.faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;display:flex;justify-content:space-between;gap:16px;align-items:center}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary:after{content:"+";font-size:1.6rem;color:var(--gold);line-height:1;transition:.2s}
details.faq[open] summary:after{transform:rotate(45deg)}
details.faq[open]{border-color:var(--gold)}
details.faq .a{padding:0 22px 20px;color:#cfd8ec}
.faq-search{max-width:560px;margin:0 auto 30px}
/* product page */
.crumbs{font-size:.9rem;color:var(--muted);padding:18px 0}.crumbs a{color:var(--muted)}.crumbs a:hover{color:var(--gold2)}
.pdp{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding-bottom:60px}
.pdp .media{background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);aspect-ratio:1/1;position:sticky;top:96px}
.pdp .media img{width:100%;height:100%;object-fit:cover}.pdp .media.contain img{object-fit:contain;padding:20px}
.pdp h1{font-size:clamp(1.7rem,3vw,2.4rem)}
.pbox{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;margin:20px 0}
.pbox .row{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.qty{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.qty button{background:transparent;border:0;color:var(--gold2);width:40px;font-size:1.2rem;cursor:pointer}
.qty input{width:48px;text-align:center;border:0;border-radius:0;background:transparent;padding:8px 0}
.spec{width:100%;border-collapse:collapse}.spec td{padding:10px 0;border-bottom:1px solid rgba(212,175,90,.15);vertical-align:top}.spec td:first-child{color:var(--muted);width:38%}
.perks{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.perks div{font-size:.85rem;text-align:center;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:12px 8px}
.perks b{display:block;color:var(--gold2)}
/* cart */
.cart-line{display:grid;grid-template-columns:90px 1fr auto auto;gap:16px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;margin-bottom:10px}
.cart-line img{width:90px;height:90px;object-fit:cover;border-radius:10px;background:#fff}
.summary{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;position:sticky;top:96px}
.summary .row{display:flex;justify-content:space-between;padding:6px 0}
.summary .tot{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-weight:800;font-size:1.2rem}
.layout-cart{display:grid;grid-template-columns:1.6fr 1fr;gap:28px;align-items:start}
.notice{border:1px dashed var(--gold);background:rgba(212,175,90,.07);border-radius:14px;padding:14px 18px;color:#f3e6bf;font-size:.95rem}
.pay-opts label{display:flex;gap:12px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:14px;margin:8px 0;cursor:pointer}
.pay-opts input{width:auto}.pay-opts .dis{opacity:.5;cursor:not-allowed}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid .full{grid-column:1/-1}
.form-grid label{font-size:.9rem;color:var(--muted);display:block;margin-bottom:6px}
.empty{text-align:center;padding:60px 20px;color:var(--muted)}
/* toolbar */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:24px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;gap:4px}
.seg button{background:transparent;border:0;color:var(--ink);padding:8px 16px;border-radius:999px;cursor:pointer;font:inherit}
.seg button.on{background:var(--gold);color:var(--navy);font-weight:700}
.toolbar select{width:auto}
/* page hero */
.phero{padding:56px 0 30px;text-align:center;border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(212,175,90,.06),transparent)}
.phero p{color:var(--muted);max-width:700px;margin:0 auto}
/* footer */
footer.site{background:#07101f;border-top:1px solid var(--line);padding:56px 0 24px;margin-top:40px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:30px}
footer h4{color:var(--gold2);font-family:"Frank Ruhl Libre",serif;font-size:1.1rem;margin:0 0 12px}
footer ul{list-style:none;padding:0;margin:0}footer li{margin:6px 0}footer a{color:var(--muted)}footer a:hover{color:var(--gold2)}
footer .copy{border-top:1px solid rgba(212,175,90,.15);margin-top:36px;padding-top:18px;color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
.wa-float{position:fixed;bottom:20px;left:20px;z-index:60;width:60px;height:60px;border-radius:50%;background:var(--wa);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.wa-float svg{width:32px;height:32px;fill:#fff}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--gold);color:var(--navy);padding:12px 22px;border-radius:999px;font-weight:700;z-index:80;transition:.3s;box-shadow:var(--sh)}
.toast.show{transform:translateX(-50%) translateY(0)}
.map{border:0;width:100%;height:340px;border-radius:18px;filter:grayscale(.3) invert(.9) hue-rotate(180deg)}
.skip{position:absolute;right:-999px}.skip:focus{right:10px;top:10px;z-index:99;background:var(--gold);color:var(--navy);padding:8px}
/* responsive */
@media (max-width:1000px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}footer .cols{grid-template-columns:1fr 1fr}.gallery{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){
 nav.main{position:fixed;inset:76px 0 auto 0;background:var(--navy);flex-direction:column;padding:12px 20px 24px;border-bottom:1px solid var(--line);display:none}
 nav.main.open{display:flex}.burger{display:inline-grid}
 .hero .wrap,.split,.pdp,.layout-cart{grid-template-columns:1fr}.hero .wrap{padding-block:48px}
 .pdp .media,.summary{position:static}.hdr-actions .btn{display:none}
}
@media (max-width:560px){body{font-size:16px}.g2,.g3,.g4{grid-template-columns:1fr}.grid.products{grid-template-columns:1fr 1fr;gap:12px}
 .pcard .bd{padding:12px}.pcard h3{font-size:1rem}.price{font-size:1.25rem}.pcard .ft{flex-direction:column}.pcard p.s{display:none}
 .form-grid{grid-template-columns:1fr}.cart-line{grid-template-columns:70px 1fr;}.cart-line img{width:70px;height:70px}
 .topbar .hide-m{display:none}section{padding:52px 0}.perks{grid-template-columns:1fr 1fr 1fr}.gallery img{height:160px}.gallery .tall img{height:332px}footer .cols{grid-template-columns:1fr}}
.split img{width:100%;max-height:560px;object-fit:cover}
@media (max-width:560px){.stats{gap:10px;display:grid;grid-template-columns:repeat(3,1fr)}.stats div b{font-size:1.15rem}.stats div span{font-size:.75rem;display:block;line-height:1.3}.hero .cta .btn{flex:1}.split img{max-height:380px}}
.summary .cart-line{grid-template-columns:56px 1fr;gap:10px;padding:10px}.summary .cart-line img{width:56px;height:56px}
.summary .cart-line>div:nth-child(3){grid-column:2;font-size:.9rem;color:var(--muted)}.summary .cart-line .price{grid-column:2;font-size:1.05rem!important}
/* lessons / youtube facade */
.yt{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;border:1px solid var(--line);box-shadow:var(--sh);cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;max-height:none!important;border:0!important;border-radius:0!important;box-shadow:none!important;transition:.3s}
.yt:hover img{filter:brightness(.8)}
.yt-play{position:absolute;inset:0;margin:auto;width:84px;height:60px;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5));transition:transform .2s}
.yt:hover .yt-play{transform:scale(1.08)}.yt-play svg{width:100%;height:100%}
.yt-len{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.75);color:#fff;font-size:.8rem;padding:2px 8px;border-radius:6px;direction:ltr}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pcard .yt{border-radius:0;border:0;box-shadow:none}
@media (max-width:1180px) and (min-width:861px){nav.main a{padding:8px 8px;font-size:.95rem}header.site .wrap{gap:14px}}
/* courses */
.placeholder{border:2px dashed var(--gold);background:rgba(212,175,90,.08);border-radius:12px;padding:12px 16px;margin:14px 0;color:var(--muted,#c9cfdc)}
.placeholder b{color:var(--gold2,#e6c97a)}.placeholder p{margin:4px 0 0;font-size:.92rem}
.reg-form{display:grid;gap:14px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:18px;padding:24px}
.reg-form label{display:grid;gap:6px;font-weight:600}
.reg-form input,.reg-form select,.reg-form textarea{font:inherit;padding:11px 14px;border-radius:10px;border:1px solid var(--line);background:rgba(255,255,255,.06);color:inherit}
.reg-form select option{color:#000}
a.yt .yt-play{display:block}
.course-card .ph{aspect-ratio:16/9;height:auto}.course-card .ph img{width:100%;height:100%;object-fit:cover}