.course-detail-page {
  --course-navy: #07101d;
  --course-navy-2: #0d1928;
  --course-gold: #e5a93c;
  --course-gold-soft: #f4c96c;
  --course-paper: #f7f4ed;
  --course-cream: #efe8dc;
  --course-ink: #111823;
  --course-muted: #66717f;
  --course-line: rgba(17,24,35,.11);
  background: var(--course-paper);
  color: var(--course-ink);
}
.course-detail-page .container { width: min(calc(100% - 56px), 1240px); margin-inline: auto; }
.course-detail-main { overflow: clip; }
.course-hero { position: relative; padding: 88px 0 82px; color: #fff; background: radial-gradient(circle at 18% 8%, rgba(229,169,60,.14), transparent 25%), linear-gradient(135deg,#07101d,#0d1928 64%,#101d2b); }
.course-hero::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.17; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:64px 64px; mask-image:linear-gradient(to bottom,black,transparent 86%); }
.course-hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr); align-items:center; gap:70px; }
.course-breadcrumbs { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:30px; color:#9aa5b2; font-size:13px; }
.course-breadcrumbs a { color:#c7d0da; text-decoration:none; }
.course-breadcrumbs a:hover { color:var(--course-gold-soft); }
.course-kicker-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.course-kicker,.course-section-kicker { color:var(--course-gold); font-size:11px; font-weight:800; letter-spacing:.18em; }
.course-status { display:inline-flex; padding:7px 10px; border-radius:999px; font-size:11px; font-weight:800; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); }
.course-status.is-active { color:#7fe4a7; }.course-status.is-coming_soon{color:var(--course-gold-soft)}.course-status.is-closed{color:#ff9b92}
.course-hero h1 { max-width:760px; margin:0; font-size:clamp(44px,5vw,78px); line-height:1.08; letter-spacing:-.045em; }
.course-hero-copy>p { max-width:720px; margin:24px 0 0; color:#b8c1cc; font-size:18px; line-height:1.95; }
.course-hero-meta { display:flex; flex-wrap:wrap; gap:10px; margin-top:32px; }
.course-hero-meta span { min-width:125px; display:grid; gap:4px; padding:13px 16px; border:1px solid rgba(255,255,255,.09); border-radius:14px; background:rgba(255,255,255,.045); }
.course-hero-meta b { color:#8d98a6; font-size:10px; letter-spacing:.08em; }.course-hero-meta span{font-size:14px;color:#fff}
.course-hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
.course-btn { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:0 19px; border-radius:13px; font-weight:800; text-decoration:none; border:1px solid transparent; transition:transform .22s ease,border-color .22s ease,background .22s ease; }
.course-btn svg { width:17px; height:17px; }.course-btn:hover{transform:translateY(-2px)}
.course-btn-gold { background:var(--course-gold-soft); color:#111823; box-shadow:0 14px 32px rgba(229,169,60,.14); }
.course-btn-ghost { color:#fff; border-color:rgba(255,255,255,.15); background:rgba(255,255,255,.04); }
.course-btn-disabled { color:#8e98a5; border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.035); cursor:not-allowed; }
.course-btn-full { width:100%; box-sizing:border-box; }
.course-hero-media { position:relative; min-height:480px; border-radius:30px; overflow:hidden; background:#101a28; border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 80px rgba(0,0,0,.3); }
.course-hero-media>img { width:100%; height:100%; min-height:480px; object-fit:cover; display:block; }
.course-hero-fallback { min-height:480px; display:flex; flex-direction:column; justify-content:space-between; padding:32px; box-sizing:border-box; background:radial-gradient(circle at 80% 15%,rgba(229,169,60,.24),transparent 24%),radial-gradient(circle at 20% 90%,rgba(93,151,179,.16),transparent 28%),linear-gradient(145deg,#111d2d,#08111e); }
.course-hero-fallback span,.course-hero-fallback small { color:#8f9aaa; font-size:11px; letter-spacing:.15em; }.course-hero-fallback strong{font-size:clamp(110px,13vw,190px);line-height:.8;color:rgba(255,255,255,.08);font-weight:900}
.course-media-badge { position:absolute; left:22px; bottom:22px; display:grid; gap:3px; min-width:150px; padding:13px 15px; border:1px solid rgba(255,255,255,.12); border-radius:13px; background:rgba(7,16,29,.78); backdrop-filter:blur(14px); }
.course-media-badge span{color:#8994a2;font-size:9px;letter-spacing:.12em}.course-media-badge b{font-size:13px;color:#fff}
.course-overview { padding:92px 0 108px; }
.course-layout { display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:start; gap:64px; }
.course-content-column { min-width:0; }.course-section { padding:0 0 78px; }.course-section+.course-section{padding-top:6px;border-top:1px solid var(--course-line)}
.course-section h2 { margin:10px 0 22px; font-size:clamp(32px,4vw,52px); line-height:1.2; letter-spacing:-.035em; }
.course-lead { max-width:820px; margin:0; color:#3f4955; font-size:19px; line-height:2.05; }
.course-section-heading { display:flex; align-items:end; justify-content:space-between; gap:30px; margin-bottom:30px; }
.course-section-heading h2 { margin-bottom:0; }.course-section-heading>span,.course-section-heading>a{color:var(--course-muted);font-size:13px;text-decoration:none}.course-section-heading>a:hover{color:#a46d0d}
.course-curriculum-list { display:grid; gap:14px; }
.course-module { display:grid; grid-template-columns:64px minmax(0,1fr); gap:20px; padding:25px; background:#fff; border:1px solid var(--course-line); border-radius:20px; box-shadow:0 12px 30px rgba(17,24,35,.035); }
.course-module-number { width:52px;height:52px;display:grid;place-items:center;border-radius:15px;background:var(--course-navy);color:var(--course-gold-soft);font-size:13px;font-weight:900; }
.course-module h3 { margin:3px 0 13px; font-size:20px; }.course-module ul{display:grid;gap:9px;margin:0;padding:0;list-style:none;color:#59636f}.course-module li{position:relative;padding-right:19px;line-height:1.8}.course-module li::before{content:"";position:absolute;right:0;top:.78em;width:6px;height:6px;border-radius:50%;background:var(--course-gold)}
.course-faq-list { display:grid; gap:10px; margin-top:28px; }.course-faq-item{background:#fff;border:1px solid var(--course-line);border-radius:17px;overflow:hidden}.course-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 22px;font-weight:800}.course-faq-item summary::-webkit-details-marker{display:none}.course-faq-item summary svg{width:18px;height:18px;transition:transform .2s ease}.course-faq-item[open] summary svg{transform:rotate(180deg)}.course-faq-answer{padding:0 22px 22px;color:#5c6672;line-height:1.95;border-top:1px solid rgba(17,24,35,.07);padding-top:18px}
.course-sidebar { position:sticky; top:110px; }.course-enroll-card{padding:26px;border-radius:24px;background:var(--course-navy);color:#fff;box-shadow:0 26px 55px rgba(7,16,29,.16)}.course-enroll-label{color:var(--course-gold);font-size:10px;font-weight:900;letter-spacing:.16em}.course-enroll-price{display:flex;align-items:baseline;gap:10px;margin:16px 0 22px}.course-enroll-price strong{font-size:38px}.course-enroll-price del{color:#768190}.course-enroll-meta{display:grid;margin-bottom:22px;border-top:1px solid rgba(255,255,255,.09)}.course-enroll-meta div{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.09)}.course-enroll-meta span{color:#8e99a7;font-size:12px}.course-enroll-meta b{font-size:13px}.course-enroll-card>small{display:block;margin-top:14px;color:#7f8996;line-height:1.7;font-size:11px}
.course-interest { padding:92px 0; background:var(--course-navy); color:#fff; }.course-interest-shell{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}.course-interest h2{margin:10px 0 15px;font-size:clamp(34px,4vw,52px)}.course-interest p{max-width:520px;color:#9ba6b3;line-height:1.9}.course-interest-form-wrap{padding:25px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);border-radius:22px}.course-interest-form{display:grid;gap:14px}.course-interest-form label{display:grid;gap:7px}.course-interest-form label span{color:#aeb8c4;font-size:12px;font-weight:700}.course-interest-form input{width:100%;box-sizing:border-box;min-height:48px;border:1px solid rgba(255,255,255,.13);border-radius:12px;background:#fff;color:#111823;padding:0 14px;font:inherit;outline:none}.course-interest-form input:focus{border-color:var(--course-gold);box-shadow:0 0 0 3px rgba(229,169,60,.12)}.course-form-error{margin-bottom:14px;padding:12px 14px;border-radius:12px;background:rgba(255,97,85,.12);border:1px solid rgba(255,97,85,.2);color:#ffb0aa}.course-success{display:flex;gap:14px;align-items:center;padding:20px;border-radius:16px;background:rgba(95,211,140,.08);border:1px solid rgba(95,211,140,.17)}.course-success>svg{width:26px;height:26px;color:#6ddd9a}.course-success div{display:grid;gap:4px}.course-success span{color:#9aa6b2;font-size:12px}
.course-related { padding:100px 0; background:#fff; }.course-related-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.course-related-card{position:relative;min-height:285px;display:flex;flex-direction:column;padding:25px;border:1px solid var(--course-line);border-radius:20px;text-decoration:none;color:var(--course-ink);background:linear-gradient(145deg,#fff,#fbfaf7);transition:transform .22s ease,box-shadow .22s ease}.course-related-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(17,24,35,.08)}.course-related-number{position:absolute;left:22px;top:18px;color:rgba(17,24,35,.07);font-size:52px;font-weight:900}.course-related-card>span{color:#b47b19;font-size:10px;font-weight:900;letter-spacing:.12em}.course-related-card h3{margin:52px 0 10px;font-size:23px}.course-related-card p{margin:0;color:#66717f;line-height:1.8;font-size:14px}.course-related-card>div:last-child{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:20px}.course-related-card i svg{width:17px;height:17px}
.course-not-found{min-height:68vh;display:grid;place-items:center;text-align:center;padding:90px 0}.course-not-found span{color:#b47b19;font-size:11px;font-weight:900;letter-spacing:.15em}.course-not-found h1{margin:12px 0;font-size:clamp(40px,6vw,72px)}.course-not-found p{margin:0 0 25px;color:var(--course-muted)}
@media (max-width:1000px){.course-hero-grid{grid-template-columns:1fr;gap:45px}.course-hero-media{min-height:390px}.course-hero-media>img,.course-hero-fallback{min-height:390px}.course-layout{grid-template-columns:1fr}.course-sidebar{position:static}.course-enroll-card{max-width:none}.course-interest-shell{grid-template-columns:1fr}.course-related-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.course-detail-page .container{width:min(calc(100% - 32px),1240px)}.course-hero{padding:55px 0 58px}.course-hero h1{font-size:40px}.course-hero-copy>p{font-size:16px}.course-hero-media,.course-hero-media>img,.course-hero-fallback{min-height:315px}.course-hero-fallback{padding:22px}.course-hero-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.course-hero-meta span{min-width:0}.course-overview{padding:68px 0 78px}.course-section{padding-bottom:58px}.course-section-heading{align-items:flex-start;flex-direction:column;gap:10px}.course-module{grid-template-columns:48px minmax(0,1fr);padding:19px;gap:14px}.course-module-number{width:44px;height:44px}.course-interest{padding:68px 0}.course-interest-shell{gap:32px}.course-related{padding:74px 0}.course-related-grid{grid-template-columns:1fr}.course-sidebar{order:-1}}
@media (max-width:430px){.course-detail-page .container{width:min(calc(100% - 24px),1240px)}.course-hero h1{font-size:34px}.course-hero-actions{display:grid}.course-btn{width:100%;box-sizing:border-box}.course-hero-media,.course-hero-media>img,.course-hero-fallback{min-height:270px}.course-hero-meta{grid-template-columns:1fr 1fr}.course-section h2{font-size:31px}.course-lead{font-size:17px}.course-enroll-card{padding:21px}.course-related-card{min-height:260px}}
@media (prefers-reduced-motion:reduce){.course-btn,.course-related-card,.course-faq-item summary svg{transition:none!important}}