:root{--oc-navy:#06162d;--oc-gold:#f4b719;--oc-purple:#6b3fe0;--oc-blue:#1777e8;--oc-green:#0f9b69;--oc-ink:#17283f;--oc-muted:#53647a;--oc-line:#e5eaf1;--oc-shadow:0 14px 34px rgba(26,47,84,.08)}
body.public-site .public-content{max-width:none!important;padding:0!important}
.oc-page{color:var(--oc-ink);overflow:hidden}.oc-shell{max-width:1390px;margin:0 auto;padding:0 36px}
.oc-hero{max-width:1480px;margin:18px auto 0;border-radius:28px;padding:52px;color:#fff;background:radial-gradient(circle at 88% 12%,rgba(255,210,80,.23),transparent 24%),linear-gradient(120deg,#061a35,#0b395a 48%,#17386f 72%,#5930c5);box-shadow:0 24px 54px rgba(15,37,73,.16)}
.oc-eyebrow{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:#ffd45e;font-weight:950}.oc-hero h1{font-size:clamp(42px,4vw,58px);line-height:1.04;letter-spacing:-.04em;margin:12px 0 14px;color:#fff;max-width:850px}.oc-hero p{font-size:16px;line-height:1.75;color:#f0f5fb;max-width:790px}
.oc-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.oc-tags span{padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.13);font-size:12px}
.oc-head{display:flex;justify-content:space-between;align-items:end;gap:15px;margin-top:35px}.oc-head h2{font-size:32px;line-height:1.15;margin:4px 0 0}.oc-head p{font-size:13px;line-height:1.68;color:#58687e;max-width:760px}
.oc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:17px}.oc-card{background:#fff;border:1px solid var(--oc-line);border-radius:19px;overflow:hidden;box-shadow:var(--oc-shadow);display:flex;flex-direction:column;transition:.24s}.oc-card:hover{transform:translateY(-6px);box-shadow:0 20px 38px rgba(25,45,80,.12)}
.oc-media{height:190px;background:linear-gradient(135deg,#194c73,#5f3bc5);position:relative;overflow:hidden}.oc-media img{width:100%;height:100%;object-fit:cover}.oc-badge{position:absolute;top:12px;left:12px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.94);font-size:12px;font-weight:950}.oc-price{position:absolute;right:12px;bottom:12px;padding:8px 10px;border-radius:11px;background:#fff;color:#15243b;font-size:12px;font-weight:950;box-shadow:0 8px 20px rgba(0,0,0,.13)}
.oc-body{padding:17px;display:flex;flex-direction:column;flex:1}.oc-body h3{font-size:19px;line-height:1.3;margin:0 0 7px}.oc-body p{font-size:12px;line-height:1.7;color:#56667b;margin:0}.oc-meta{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.oc-meta span{padding:6px 8px;border-radius:999px;background:#f6f8fb;border:1px solid #ebeff4;color:#66758a;font-size:9.5px;font-weight:800}.oc-teacher{font-size:10.5px;color:#66758a;margin-top:auto;padding-top:11px}.oc-link{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid #edf1f5;color:#5d39d1;font-size:12px;font-weight:900;text-decoration:none}
.oc-detail{max-width:1250px;margin:22px auto 70px;padding:0 24px}.oc-detail-hero{display:grid;grid-template-columns:1.1fr .9fr;border-radius:24px;overflow:hidden;background:#071b36;color:#fff;box-shadow:0 20px 44px rgba(23,42,75,.13)}.oc-detail-copy{padding:35px}.oc-detail-copy h1{font-size:42px;line-height:1.08;color:#fff;margin:10px 0}.oc-detail-copy p{font-size:14px;line-height:1.75;color:#e4edf7}.oc-detail-media{min-height:390px;background:linear-gradient(135deg,#174a70,#6040c4)}.oc-detail-media img{width:100%;height:100%;object-fit:cover}
.oc-detail-grid{display:grid;grid-template-columns:1fr 340px;gap:15px;margin-top:15px}.oc-panel{background:#fff;border:1px solid var(--oc-line);border-radius:18px;padding:22px;box-shadow:var(--oc-shadow)}.oc-panel h2{font-size:23px;margin:0 0 9px}.oc-panel p,.oc-panel li{font-size:13px;line-height:1.75;color:#52637a}.oc-lessons{display:grid;gap:8px;margin-top:12px}.oc-lesson{display:flex;gap:10px;align-items:center;padding:11px;border-radius:11px;background:#f8fafc;border:1px solid #ebeff4}.oc-lesson b{font-size:12px}.oc-lesson small{font-size:12px;color:#758297}
.oc-buy{position:sticky;top:112px}.oc-buy .price{font-size:31px;font-weight:950;color:#15243b}.oc-buy label{display:grid;gap:5px;font-size:10.5px;font-weight:900;margin-top:10px}.oc-buy input{border:1px solid #dbe2eb;border-radius:10px;padding:11px;font-size:13px}.oc-btn{border:0;border-radius:11px;padding:12px 15px;background:linear-gradient(135deg,#5d39d1,#1777e8);color:#fff!important;font-size:12px;font-weight:900;text-decoration:none;display:inline-flex;justify-content:center;cursor:pointer}.oc-buy .oc-btn{width:100%;margin-top:12px}.oc-secure{font-size:9.5px;line-height:1.55;color:#65758a;margin-top:9px}
.oc-learn{max-width:1200px;margin:22px auto 70px;padding:0 24px}.oc-learn-head{padding:26px;border-radius:20px;background:linear-gradient(120deg,#071c39,#0c5264 60%,#5431bf);color:#fff}.oc-learn-head h1{font-size:30px;color:#fff;margin:5px 0}.oc-learn-head p{font-size:12px;color:#e7eff8}.oc-learn-grid{display:grid;grid-template-columns:1fr 300px;gap:14px;margin-top:14px}.oc-lesson-full{background:#fff;border:1px solid var(--oc-line);border-radius:16px;padding:18px;margin-bottom:10px;box-shadow:0 8px 22px rgba(26,47,84,.05)}.oc-lesson-full h3{font-size:17px;margin:0 0 7px}.oc-lesson-full p{font-size:12px;line-height:1.72;color:#56667b}.oc-lesson-full a{font-size:12px;font-weight:900;color:#5d39d1}.oc-side{position:sticky;top:100px;align-self:start}
.oc-cert{max-width:1000px;margin:35px auto;padding:25px}.oc-cert-card{border:8px double #d6a92a;padding:60px 45px;text-align:center;background:#fff;color:#14243b}.oc-cert-card h1{font-size:48px;margin:10px 0}.oc-cert-card h2{font-size:28px}.oc-cert-card p{font-size:14px;line-height:1.7}
@media(max-width:900px){.oc-shell{padding:0 18px}.oc-hero{margin:14px;padding:38px 28px}.oc-grid{grid-template-columns:1fr 1fr}.oc-detail-hero,.oc-detail-grid,.oc-learn-grid{grid-template-columns:1fr}.oc-buy,.oc-side{position:static}}
@media(max-width:620px){.oc-hero{padding:30px 21px;border-radius:20px}.oc-hero h1{font-size:35px}.oc-hero p{font-size:13.5px}.oc-head h2{font-size:27px}.oc-grid{grid-template-columns:1fr}.oc-detail{padding:0 14px}.oc-detail-copy{padding:22px}.oc-detail-copy h1{font-size:32px}.oc-detail-media{min-height:250px}.oc-learn{padding:0 14px}.oc-cert-card{padding:35px 18px}.oc-cert-card h1{font-size:35px}}