:root { --cd-navy:#092f55; --cd-blue:#176cb8; --cd-sky:#dff3ff; --cd-orange:#f39a48; --cd-ink:#385269; }
.course-page { color:var(--cd-ink); background:linear-gradient(180deg,#f8fcff 0,#fff8ef 45%,#f8fcff 100%); overflow:hidden; }
.course-detail-hero,.course-detail-section { width:min(calc(100% - 36px),1160px); margin:auto; }
.course-detail-hero { min-height:680px; display:grid; grid-template-columns:1.08fr .92fr; align-items:center; gap:54px; padding:60px 0 70px; }
.course-breadcrumb { display:flex; flex-wrap:wrap; gap:8px; color:#6d8498; font-size:12px; }
.course-breadcrumb a { color:var(--cd-blue); text-decoration:none; font-weight:800; }
.course-detail-badges { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 12px; }
.course-detail-badges span { padding:7px 12px; border:1px solid rgba(23,108,184,.14); border-radius:999px; color:var(--cd-blue); background:rgba(255,255,255,.76); font-size:11px; font-weight:900; }
.course-detail-hero h1 { margin:0; color:var(--cd-navy); font-size:clamp(38px,5vw,67px); line-height:1.35; font-weight:950; letter-spacing:-1.5px; }
.course-detail-lead { max-width:650px; margin:20px 0 0; font-size:16px; line-height:2.05; }
.course-detail-teacher { margin:14px 0 0; color:#698095; font-size:13px; }
.course-detail-teacher strong { color:var(--cd-blue); }
.course-detail-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:30px 0 0; }
.course-detail-facts div { padding:14px 12px; border:1px solid rgba(23,108,184,.1); border-radius:17px; background:rgba(255,255,255,.76); box-shadow:0 12px 30px rgba(9,47,85,.06); }
.course-detail-facts small,.course-detail-facts strong { display:block; }
.course-detail-facts small { color:#8496a6; font-size:9px; }
.course-detail-facts strong { margin-top:5px; color:var(--cd-navy); font-size:12px; }
.course-detail-cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.course-detail-cta form { margin:0; }
.course-primary-button,.course-secondary-button { min-height:52px; display:inline-flex; align-items:center; justify-content:center; padding:10px 23px; border-radius:16px; font-family:inherit; font-size:13px; font-weight:950; text-decoration:none; cursor:pointer; }
.course-primary-button { border:0; color:#fff; background:linear-gradient(135deg,#2281d5,#0d4a84); box-shadow:0 16px 28px rgba(23,108,184,.25); }
.course-secondary-button { border:1px solid rgba(23,108,184,.2); color:var(--cd-blue); background:#fff; }
.course-detail-art { position:relative; min-height:550px; display:grid; place-items:center; }
.course-art-frame { position:relative; z-index:2; width:min(88%,430px); aspect-ratio:1; padding:13px; border-radius:42% 58% 55% 45%/46% 43% 57% 54%; background:#fff; box-shadow:0 35px 80px rgba(9,47,85,.21); transform:rotate(-2deg); }
.course-art-frame img { width:100%; height:100%; display:block; object-fit:contain; border-radius:inherit; background:linear-gradient(145deg,#e9f7ff,#fff5e7); }
.course-art-orbit { position:absolute; border:2px dashed rgba(23,108,184,.16); border-radius:50%; }
.course-art-orbit-one { width:500px; height:500px; }
.course-art-orbit-two { width:390px; height:530px; border-color:rgba(243,154,72,.22); transform:rotate(32deg); }
.course-art-note { position:absolute; z-index:3; left:0; bottom:78px; padding:12px 18px; border-radius:18px 18px 5px 18px; color:var(--cd-navy); background:#fff; box-shadow:0 15px 35px rgba(9,47,85,.15); font-size:12px; line-height:1.8; font-weight:900; transform:rotate(3deg); }
.course-detail-section { padding:78px 0; }
.course-section-heading>span { color:var(--cd-orange); font-size:11px; font-weight:950; }
.course-section-heading h2 { margin:8px 0 0; color:var(--cd-navy); font-size:clamp(26px,3vw,39px); line-height:1.5; font-weight:950; }
.course-section-heading-center { text-align:center; }
.course-story-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:45px; margin-top:35px; align-items:start; }
.course-story-text { padding:30px; border:1px solid rgba(23,108,184,.1); border-radius:28px; background:rgba(255,255,255,.82); box-shadow:0 20px 55px rgba(9,47,85,.08); font-size:14px; line-height:2.35; }
.course-story-text p { margin:0; }
.course-experience-cards { display:grid; gap:11px; }
.course-experience-cards article { display:grid; grid-template-columns:45px 1fr; column-gap:12px; padding:19px; border-radius:20px; background:#fff; box-shadow:0 13px 35px rgba(9,47,85,.07); }
.course-experience-cards i { grid-row:1/3; width:45px; height:45px; display:grid; place-items:center; border-radius:15px; color:#fff; background:linear-gradient(135deg,var(--cd-orange),#ef7659); font-style:normal; font-size:20px; }
.course-experience-cards strong { color:var(--cd-navy); font-size:13px; }
.course-experience-cards p { margin:5px 0 0; font-size:11px; line-height:1.8; }
.course-love { width:100%; max-width:none; padding-right:max(18px,calc((100% - 1160px)/2)); padding-left:max(18px,calc((100% - 1160px)/2)); background:linear-gradient(135deg,#0b3b68,#176cb8); color:#fff; }
.course-love .course-section-heading h2,.course-love .course-section-heading>span { color:#fff; }
.course-love-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; }
.course-love-card { position:relative; margin:0; padding:28px; border:1px solid rgba(255,255,255,.18); border-radius:26px; background:rgba(255,255,255,.1); backdrop-filter:blur(8px); }
.course-quote { position:absolute; top:2px; left:18px; color:#f8b968; font-size:52px; font-family:serif; }
.course-love-card p { min-height:82px; margin:0; font-size:13px; line-height:2; }
.course-love-card footer { display:flex; justify-content:space-between; gap:10px; margin-top:17px; padding-top:14px; border-top:1px solid rgba(255,255,255,.15); font-size:10px; }
.course-comments { display:grid; grid-template-columns:1.05fr .95fr; gap:42px; align-items:start; }
.course-comment-card { display:grid; grid-template-columns:46px 1fr; gap:12px; margin-top:14px; padding:18px; border-radius:20px; background:#fff; box-shadow:0 12px 35px rgba(9,47,85,.06); }
.course-comment-avatar { width:46px; height:46px; display:grid; place-items:center; border-radius:16px; color:#fff; background:linear-gradient(135deg,#1d83d5,#44b8c1); font-weight:950; }
.course-comment-card header { display:flex; justify-content:space-between; gap:10px; color:var(--cd-navy); font-size:11px; }
.course-comment-card header span { color:#e98735; }
.course-comment-card p { margin:7px 0 0; font-size:11px; line-height:1.9; }
.course-manager-reply { margin-top:12px; padding:12px 14px; border-right:3px solid #f39a48; border-radius:12px 4px 12px 12px; background:#fff7ea; }
.course-manager-reply strong { color:#d87825; font-size:10px; }
.course-manager-reply p { color:#536d82; }
.course-comments-empty { margin-top:18px; padding:22px; border:1px dashed rgba(23,108,184,.25); border-radius:20px; color:#748a9d; background:#fff; font-size:12px; line-height:2; }
.course-comment-form-card { position:relative; padding:31px; border-radius:30px; color:#fff; background:linear-gradient(145deg,#174f7f,#0b3157); box-shadow:0 28px 65px rgba(9,47,85,.2); }
.course-form-spark { position:absolute; top:20px; left:23px; color:#f6af5c; font-size:24px; }
.course-comment-form-card h2 { margin:0; font-size:23px; }
.course-comment-form-card>p { margin:8px 0 22px; color:#cde7fa; font-size:11px; }
.course-comment-form-card label,.course-rating-field legend { display:block; margin-top:13px; font-size:11px; font-weight:900; }
.course-comment-form-card input[type=text],.course-comment-form-card textarea { width:100%; box-sizing:border-box; display:block; margin-top:7px; padding:12px 14px; border:1px solid rgba(255,255,255,.18); border-radius:13px; outline:none; color:#fff; background:rgba(255,255,255,.1); font-family:inherit; resize:vertical; }
.course-comment-form-card input::placeholder,.course-comment-form-card textarea::placeholder { color:#b9d0e1; }
.course-rating-field { margin:13px 0 0; padding:0; border:0; }
.course-rating-field ul,.course-rating-field>div { display:flex; flex-wrap:wrap; gap:10px; margin:8px 0 0; padding:0; list-style:none; }
.course-rating-field label { display:flex; align-items:center; gap:4px; margin:0; cursor:pointer; }
.course-comment-form-card .errorlist { margin:5px 0 0; padding:0; color:#ffd2c8; font-size:10px; list-style:none; }
.course-comment-form-card button[type=submit] { width:100%; min-height:50px; margin-top:15px; border:0; border-radius:15px; color:#173b5b; background:linear-gradient(135deg,#ffd389,#f39a48); font-family:inherit; font-weight:950; cursor:pointer; }
.course-related { padding-top:35px; }
.course-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:17px; margin-top:28px; }
.course-related-grid>a { overflow:hidden; border-radius:24px; color:inherit; background:#fff; box-shadow:0 17px 45px rgba(9,47,85,.09); text-decoration:none; transition:transform .2s ease; }
.course-related-grid>a:hover { transform:translateY(-5px); }
.course-related-grid img { width:100%; height:190px; display:block; object-fit:contain; background:#edf8ff; }
.course-related-grid div { padding:18px; }
.course-related-grid small,.course-related-grid strong,.course-related-grid span { display:block; }
.course-related-grid small { color:var(--cd-blue); font-size:9px; }
.course-related-grid strong { margin-top:6px; color:var(--cd-navy); font-size:14px; }
.course-related-grid span { margin-top:13px; color:var(--cd-orange); font-size:10px; font-weight:900; }
@media(max-width:850px){.course-detail-hero{grid-template-columns:1fr;padding-top:42px}.course-detail-art{min-height:460px}.course-story-grid,.course-comments{grid-template-columns:1fr}.course-love-grid,.course-related-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.course-detail-hero,.course-detail-section{width:min(calc(100% - 24px),1160px)}.course-detail-hero{gap:20px;padding-bottom:42px}.course-detail-hero h1{font-size:36px}.course-detail-lead{font-size:13px}.course-detail-facts{grid-template-columns:1fr}.course-detail-cta>*{width:100%;box-sizing:border-box}.course-detail-cta form,.course-primary-button,.course-secondary-button{width:100%}.course-detail-art{min-height:370px}.course-art-orbit-one{width:350px;height:350px}.course-art-orbit-two{width:290px;height:380px}.course-art-note{bottom:35px}.course-detail-section{padding:50px 0}.course-story-text,.course-comment-form-card{padding:22px}.course-love{width:100%;padding-right:12px;padding-left:12px}.course-love-grid,.course-related-grid{grid-template-columns:1fr}.course-love-card p{min-height:0}.course-comments{gap:28px}.course-related-grid img{height:220px}}
@media(prefers-reduced-motion:reduce){.course-related-grid>a{transition:none}}