/* =========================================================================
   MOLISHA DIGITAL BRAND AGENCY — 2026 LOOK
   Loaded after style.css. Re-skins the public site with the logo palette:
   navy (wordmark) · magenta-pink (M swoosh) · orange (arrow) · violet (wave).
   Layout and class names stay the same, so nothing else needs changing.
   ========================================================================= */

:root{
  --font-display: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ivory: #FFFFFF;
  --ivory-soft: #F5F3FC;
  --radius-arch: 28px;
  --shadow-soft: 0 24px 50px -24px rgba(12,27,92,0.35);
  --shadow-card: 0 18px 40px -26px rgba(12,27,92,0.28);
  --grad-brand: linear-gradient(120deg, #D92D6A 0%, #FC840C 100%);
  --grad-violet: linear-gradient(120deg, #6A2BD6 0%, #D92D6A 100%);
}

body{ background:#FFFFFF; color:#1B1F3B; letter-spacing:-0.005em; }
h1,h2,h3,h4{ font-weight:800; letter-spacing:-0.02em; color:#0C1B5C; }

/* gradient text helper used by eyebrows and highlights */
.eyebrow, .hero h1 em, .feature-item .num{
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.eyebrow::before{ background: var(--grad-brand); }

/* ---------- Top utility bar ---------- */
.topbar{ background: linear-gradient(90deg, #070E3A 0%, #1B1560 60%, #3B1A8A 100%); color:#E9E7F8; }
.topbar a{ color:#FFC27A; }

/* ---------- Header ---------- */
.site-header{
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom:1px solid rgba(12,27,92,0.08);
  box-shadow: 0 6px 24px -20px rgba(12,27,92,0.35);
}
.brand__logo{ height:48px; }
.main-nav a.nav-link{ color:#0C1B5C; font-weight:600; border-radius:999px; padding:9px 16px; }
.main-nav a.nav-link:hover, .main-nav a.nav-link:focus-visible{ background:#F3EFFD; color:#6A2BD6; }
.dropdown{ border-radius:16px; box-shadow: 0 30px 60px -30px rgba(12,27,92,0.45); border-color:#E6E3F2; }
.dropdown a:hover{ background:#F3EFFD; color:#6A2BD6; }
.nav-cta{
  background: var(--grad-brand); color:#fff !important; padding:11px 22px; border-radius:999px;
  box-shadow: 0 10px 22px -10px rgba(217,45,106,0.8);
}
.nav-cta:hover{ background: var(--grad-brand); filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- Buttons ---------- */
.btn{ border-radius:999px; font-weight:700; letter-spacing:0.01em; }
.btn-primary{
  background: var(--grad-brand); color:#fff; box-shadow: 0 16px 30px -14px rgba(217,45,106,0.85);
}
.btn-primary:hover{ background: var(--grad-brand); filter:brightness(1.06); transform: translateY(-2px); color:#fff; }
.btn-outline{ background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.45); color:#fff; backdrop-filter: blur(6px); }
.btn-outline:hover{ background:#fff; border-color:#fff; color:#0C1B5C; }
.btn-outline.on-light{ background:#fff; border-color:#D9D4F0; color:#0C1B5C; }
.btn-outline.on-light:hover{ background:#0C1B5C; border-color:#0C1B5C; color:#fff; }

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(900px 480px at 85% 10%, rgba(252,132,12,0.45), transparent 60%),
    radial-gradient(800px 520px at 0% 0%, rgba(217,45,106,0.55), transparent 62%),
    radial-gradient(900px 600px at 60% 120%, rgba(106,43,214,0.7), transparent 60%),
    linear-gradient(160deg, #0C1B5C 0%, #1B1560 55%, #2A1170 100%);
  padding: 96px 0 0;
}
.hero::before{
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,0.12) 1px, transparent 0) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 80%);
          mask-image: linear-gradient(180deg, #000 10%, transparent 80%);
  animation:none;
}
.hero h1{
  font-size: clamp(2.3rem, 4.8vw, 3.9rem); line-height:1.04; max-width:16ch; letter-spacing:-0.035em; font-weight:800;
}
.hero h1 em{ font-style:normal; }
.hero p.lead{ font-size:1.1rem; color: rgba(255,255,255,0.82); }
.hero-stats{ gap:14px; }
.hero-stats div{
  background: rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.14);
  border-radius:16px; padding:14px 20px; min-width:150px; backdrop-filter: blur(8px);
}
.hero-stats div strong{ color:#FFC27A; font-weight:800; }
.hero-stats div span{ color: rgba(255,255,255,0.75); }

/* hero visual: white card with the logo (logo's wordmark is navy, so it sits on white) */
.jharokha-frame{
  max-width:360px; aspect-ratio: 4/5; border-radius:32px; border:none;
  background:#FFFFFF;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55), 0 0 0 10px rgba(255,255,255,0.08);
  padding:36px 28px; color:#1B1F3B;
}
.jharokha-frame::before{ display:none; }
.jharokha-frame .frame-eyebrow{ background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.jharokha-frame p{ color:#545873; }
.jharokha-frame__logo{ max-width:260px; }

/* ---------- Sections ---------- */
.section{ padding: 92px 0; }
.section-head{ margin-bottom:52px; }
.section-head h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing:-0.03em; }
.section-head p{ color:#545873; font-size:1.02rem; }
.jaali-bg{
  background:
    radial-gradient(700px 300px at 100% 0%, rgba(252,132,12,0.07), transparent 70%),
    radial-gradient(700px 300px at 0% 100%, rgba(106,43,214,0.06), transparent 70%),
    #FFFFFF;
}
.jaali-divider{ display:none; }
.section--dark{
  background:
    radial-gradient(700px 400px at 10% 0%, rgba(217,45,106,0.35), transparent 60%),
    radial-gradient(700px 400px at 100% 100%, rgba(106,43,214,0.4), transparent 60%),
    #0C1B5C;
}
.section--soft{ background: linear-gradient(180deg, #F5F3FC 0%, #FFFFFF 100%); }

/* ---------- Service cards ---------- */
.services-grid{ gap:24px; }
.service-window{
  border:1px solid #E6E3F2; border-radius:22px; padding:34px 26px 28px; text-align:left;
  background:#FFFFFF; box-shadow: var(--shadow-card); overflow:hidden;
}
.service-window::before{
  content:''; position:absolute; left:0; right:0; top:0; height:4px; width:auto; transform:none;
  border-radius:0; background: var(--grad-brand); box-shadow:none;
}
.service-window:hover, .service-window:focus-within{
  transform: translateY(-6px); border-color: transparent; box-shadow: 0 30px 50px -28px rgba(106,43,214,0.45);
}
.service-window:hover::before{ box-shadow:none; }
.service-window .icon{
  width:52px; height:52px; margin:0 0 18px; border-radius:14px; background: var(--grad-violet);
  color:#fff; font-size:1.05rem; font-weight:800; box-shadow: 0 12px 22px -12px rgba(106,43,214,0.8);
}
.service-window h3{ font-size:1.12rem; }
.service-window p{ color:#545873; }
.service-window a.link{
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800;
}

/* ---------- Location chips ---------- */
.location-chip{
  border:1px solid #E0DCF2; border-radius:999px; padding:10px 20px; color:#0C1B5C; font-weight:600;
  background:#fff; box-shadow: 0 6px 14px -12px rgba(12,27,92,0.4);
}
.location-chip:hover{ background: var(--grad-brand); border-color:transparent; color:#fff; }
.section--dark .location-chip{ background: rgba(255,255,255,0.08) !important; color:#fff !important; border-color: rgba(255,255,255,0.22) !important; }
.section--dark .location-chip:hover{ background: var(--grad-brand) !important; border-color: transparent !important; }

/* ---------- Feature list ---------- */
.feature-list{ gap:20px; }
.feature-item{
  background:#fff; border:1px solid #E6E3F2; border-radius:20px; padding:26px; box-shadow: var(--shadow-card);
}
.feature-item .num{ font-size:1.5rem; width:auto; flex-shrink:0; }
.feature-item h4{ color:#0C1B5C; }

/* ---------- Cards ---------- */
.plain-card{ border-radius:20px; border:1px solid #E6E3F2; box-shadow: var(--shadow-card); }
.testimonial{ color:#2E3354; font-size:1.02rem; }
.testimonial cite{ color:#6A2BD6; }

/* ---------- FAQ ---------- */
.faq-item{ border-bottom:1px solid #E6E3F2; }
.faq-item summary{ color:#0C1B5C; }
.faq-item summary::after{ color:#D92D6A; }

/* ---------- CTA band ---------- */
.cta-band{
  background:
    radial-gradient(500px 240px at 0% 0%, rgba(252,132,12,0.5), transparent 65%),
    linear-gradient(120deg, #D92D6A 0%, #6A2BD6 100%);
  border-radius:28px; padding:60px 40px; box-shadow: 0 30px 60px -30px rgba(106,43,214,0.6);
}
.cta-band p{ color: rgba(255,255,255,0.9); }
.cta-band h2{ color:#fff; }

/* ---------- Forms / contact ---------- */
.form-field input, .form-field textarea, .form-field select{ border-radius:14px; border-color:#E0DCF2; }
.form-field input:focus, .form-field textarea:focus{ border-color:#6A2BD6; box-shadow:0 0 0 4px rgba(106,43,214,0.12); }
.contact-info-card{
  background: linear-gradient(160deg, #0C1B5C 0%, #2A1170 100%); border-radius:26px;
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero{
  background:
    radial-gradient(700px 300px at 90% 0%, rgba(252,132,12,0.35), transparent 60%),
    radial-gradient(600px 300px at 0% 100%, rgba(217,45,106,0.35), transparent 60%),
    linear-gradient(135deg, #0C1B5C, #2A1170);
  padding: 72px 0 80px;
}
.page-hero h1{ letter-spacing:-0.03em; }

/* ---------- Footer ---------- */
.site-footer{
  background: linear-gradient(180deg, #0A1550 0%, #070E3A 100%);
  border-top: 4px solid transparent;
  border-image: var(--grad-brand) 1;
}
.footer-grid h4{ background: var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.footer-brand__logo-chip{ border-radius:16px; }
.footer-social a{ border-color: rgba(255,255,255,0.25); }
.footer-social a:hover{ border-color:#FC840C; color:#FC840C; }

/* ---------- Responsive polish ---------- */
@media (max-width: 980px){
  .hero{ padding-top:64px; }
  .jharokha-frame{ max-width:260px; aspect-ratio:auto; padding:28px 22px; }
}
@media (max-width: 720px){
  .section{ padding:64px 0; }
  .section-head{ margin-bottom:36px; }
  .hero h1{ font-size: 2.1rem; }
  .hero-stats div{ min-width:0; flex:1 1 120px; padding:12px 14px; }
  .main-nav{ background:#fff; }
  .cta-band{ padding:40px 22px; }
}

/* Off-canvas mobile menu: hide with transform/visibility so it never
   creates horizontal scroll on small screens. */
@media (max-width: 720px){
  .main-nav{ right:0; transform: translateX(105%); visibility:hidden; transition: transform .25s ease, visibility .25s; }
  .main-nav.is-open{ right:0; transform:none; visibility:visible; }
}
@media (max-width: 720px){
  html, body{ overflow-x: clip; }
}

/* =========================================================================
   HOMEPAGE ADDITIONS — process steps, portfolio preview, FAQ, floating contact
   ========================================================================= */
.text-center{ text-align:center; }
.steps-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:22px; }
.step-card{
  position:relative; background:#fff; border:1px solid #E6E3F2; border-radius:20px;
  padding:30px 24px 26px; box-shadow: var(--shadow-card);
}
.step-no{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:14px;
  background: var(--grad-brand); color:#fff; font-weight:800; font-size:0.9rem; margin-bottom:18px;
  box-shadow: 0 12px 22px -12px rgba(217,45,106,0.8);
}
.step-card h3{ font-size:1.08rem; }
.step-card p{ color:#545873; font-size:0.92rem; margin:0; }

.work-card{ padding:0; overflow:hidden; }
.work-card__img{ width:100%; aspect-ratio: 16/10; object-fit:cover; background:#F5F3FC; }
.work-card__body{ padding:22px 24px 26px; }
.work-card__city{
  display:inline-block; font-size:0.72rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
  background: var(--grad-violet); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:6px;
}
.work-card h3{ font-size:1.1rem; }
.work-card p{ color:#545873; font-size:0.92rem; margin:0; }

.faq-wrap{ max-width:820px; margin:0 auto; background:#fff; border:1px solid #E6E3F2; border-radius:22px; padding:8px 28px; box-shadow: var(--shadow-card); }
.faq-wrap .faq-item{ padding:20px 0; }
.faq-wrap .faq-item:last-child{ border-bottom:none; }
.faq-wrap .faq-item summary{ font-size:1.02rem; }

.float-contact{
  position:fixed; right:18px; bottom:18px; z-index:700; display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.float-contact__btn{
  display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border-radius:999px;
  color:#fff; font-weight:700; font-size:0.9rem; box-shadow: 0 16px 30px -12px rgba(12,27,92,0.55);
  transition: transform .18s ease;
}
.float-contact__btn:hover{ transform: translateY(-2px); text-decoration:none; color:#fff; }
.float-contact__wa{ background:#25D366; }
.float-contact__call{ background: var(--grad-brand); }

@media (max-width: 980px){
  .steps-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .steps-grid{ grid-template-columns: 1fr; }
  .faq-wrap{ padding:4px 18px; }
  .float-contact{ right:12px; bottom:12px; }
  .float-contact__btn span{ display:none; }
  .float-contact__btn{ padding:14px; }
}

/* =========================================================================
   v3 — hero motion, free audit card, service icons, tilt, mobile bar
   ========================================================================= */

/* Animated gradient on the highlighted hero word */
@keyframes gradShift { 0%{ background-position: 0% 50%; } 100%{ background-position: 300% 50%; } }
.hero h1 em{
  background-image: linear-gradient(90deg, #FC9C0C, #D92D6A, #6A2BD6, #FC840C, #FC9C0C);
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 7s linear infinite;
}

/* Hero entrance */
@keyframes riseIn { from { opacity:0; transform: translateY(14px); } to { opacity:1; transform:none; } }
.hero .eyebrow, .hero h1, .hero p.lead, .hero-actions, .hero-stats{ animation: riseIn .7s ease both; }
.hero h1{ animation-delay: .08s; } .hero p.lead{ animation-delay: .16s; } .hero-actions{ animation-delay: .24s; } .hero-stats{ animation-delay: .32s; }

/* Free website audit card (replaces the logo card in the hero) */
.audit-card{
  position:relative; width:100%; max-width:400px; margin:0 auto; background:#fff; color:#1B1F3B;
  border-radius:28px; padding:30px 28px 26px;
  box-shadow: 0 40px 80px -30px rgba(0,0,0,0.55), 0 0 0 10px rgba(255,255,255,0.08);
  animation: riseIn .8s .2s ease both;
}
.audit-card__badge{
  display:inline-block; font-size:0.7rem; font-weight:800; letter-spacing:0.1em;
  background: var(--grad-brand); color:#fff; padding:6px 12px; border-radius:999px; margin-bottom:14px;
}
.audit-card__title{ font-size:1.5rem; margin:0 0 8px; color:#0C1B5C; }
.audit-card__sub{ color:#545873; font-size:0.93rem; margin:0 0 18px; }
.audit-form__field{ margin-bottom:10px; }
.audit-form input{
  width:100%; padding:13px 15px; border:1.5px solid #E0DCF2; border-radius:14px;
  font-family:inherit; font-size:0.95rem; color:#1B1F3B; background:#FBFAFE;
}
.audit-form input:focus{ outline:none; border-color:#6A2BD6; box-shadow:0 0 0 4px rgba(106,43,214,0.12); background:#fff; }
.audit-form__submit{ width:100%; margin-top:6px; padding:15px 20px; font-size:1rem; }
.audit-form__note{ display:block; text-align:center; color:#7A7F97; font-size:0.78rem; margin-top:10px; }

/* Service icons */
.service-window .icon{ color:#fff; }
.service-window .icon svg{ width:26px; height:26px; }

/* 3D tilt on service cards (JS sets --rx / --ry; mouse only) */
.service-window{ transform-style: preserve-3d; will-change: transform; }
.service-window:hover, .service-window:focus-within{
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
}

/* Hover states for generic buttons and links */
.btn{ transition: transform .18s ease, box-shadow .18s ease, background .18s ease, filter .18s ease; }
.btn:active{ transform: scale(.98); }

/* Mobile sticky quick-action bar */
.mobile-cta{ display:none; }
@media (max-width: 720px){
  body{ padding-bottom: 78px; }
  .mobile-cta{
    display:grid; grid-template-columns: 0.8fr 0.9fr 1.5fr; gap:8px;
    position:fixed; left:0; right:0; bottom:0; z-index:650;
    background:rgba(255,255,255,0.97); backdrop-filter: blur(8px);
    border-top:1px solid #E6E3F2; box-shadow: 0 -10px 30px -18px rgba(12,27,92,0.5);
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    transform: translateY(110%); transition: transform .3s ease;
  }
  .mobile-cta.is-visible{ transform: translateY(0); }
  .mobile-cta a{
    display:flex; align-items:center; justify-content:center; padding:13px 10px; border-radius:14px;
    font-weight:800; font-size:0.9rem; color:#fff; text-align:center;
  }
  .mobile-cta__call{ background:#0C1B5C; }
  .mobile-cta__wa{ background:#25D366; }
  .mobile-cta__quote{ background: var(--grad-brand); }
  .float-contact{ display:none; }
}

/* Reduced motion: no animation or tilt */
@media (prefers-reduced-motion: reduce){
  .hero h1 em, .hero .eyebrow, .hero h1, .hero p.lead, .hero-actions, .hero-stats, .audit-card{ animation:none !important; }
  .service-window:hover, .service-window:focus-within{ transform: translateY(-6px); }
  .mobile-cta{ transition:none; }
}

/* ---------- Cookie consent bar ---------- */
.cookie-bar{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  max-width:720px; margin:0 auto;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 18px; border-radius:14px;
  background:#fff; color:var(--ink, #0C1B5C);
  border:1px solid var(--border, #E6E3F2);
  box-shadow:0 18px 40px -18px rgba(12,27,92,.35);
  font-size:.92rem; line-height:1.5;
  animation:cookieIn .4s ease both;
}
.cookie-bar[hidden]{ display:none; }
.cookie-bar p{ margin:0; flex:1 1 300px; }
.cookie-bar a{ text-decoration:underline; }
.cookie-bar__actions{ display:flex; gap:8px; flex-wrap:wrap; }
@keyframes cookieIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (max-width:720px){
  .cookie-bar{ bottom:84px; left:12px; right:12px; }
}
@media (prefers-reduced-motion: reduce){ .cookie-bar{ animation:none; } }

/* ---------- WhatsApp chat panel (floating) ---------- */
button.float-contact__wa{ border:0; cursor:pointer; font-family:inherit; }
.chat-panel{
  width:300px; max-width:calc(100vw - 36px); background:#fff; color:#1B1F3B;
  border-radius:18px; overflow:hidden; border:1px solid var(--border, #E6E3F2);
  box-shadow:0 26px 50px -20px rgba(12,27,92,.45); display:flex; flex-direction:column;
  animation:chatIn .25s ease both;
}
.chat-panel[hidden]{ display:none; }
.chat-panel__head{ background:#075E54; color:#fff; padding:14px 16px; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.chat-panel__head strong{ display:block; font-size:.98rem; }
.chat-panel__head span{ font-size:.78rem; opacity:.85; }
.chat-panel__close{ background:transparent; border:0; color:#fff; font-size:22px; line-height:1; cursor:pointer; padding:0 2px; }
.chat-panel__body{ padding:14px; display:flex; flex-direction:column; gap:8px; background:#ECE5DD; }
.chat-bubble{ background:#fff; border-radius:4px 14px 14px 14px; padding:10px 12px; font-size:.9rem; line-height:1.45; box-shadow:0 1px 1px rgba(0,0,0,.08); align-self:flex-start; max-width:92%; }
.chat-opt{
  display:block; background:#fff; color:#075E54; font-weight:600; font-size:.88rem;
  padding:10px 12px; border-radius:12px; border:1px solid #cfe9d9; text-decoration:none;
}
.chat-opt:hover{ background:#F1FBF5; text-decoration:none; color:#075E54; }
.chat-panel__start{
  display:block; text-align:center; background:#25D366; color:#fff; font-weight:700;
  padding:13px; text-decoration:none; font-size:.92rem;
}
.chat-panel__start:hover{ background:#1ebe5b; color:#fff; text-decoration:none; }
@keyframes chatIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .chat-panel{ animation:none; } }

/* ---------- Hindi (Devanagari) typography ---------- */
html[lang="hi"] body,
html[lang="hi"] h1, html[lang="hi"] h2, html[lang="hi"] h3, html[lang="hi"] h4,
html[lang="hi"] .nav-link, html[lang="hi"] button, html[lang="hi"] input,
html[lang="hi"] select, html[lang="hi"] textarea{
  font-family:'Noto Sans Devanagari','Poppins',system-ui,sans-serif;
  letter-spacing:0;
}

/* ---------- Courses ---------- */
.course-card h3{ margin:10px 0 8px; }
.course-card h3 a{ color:var(--ink, #0C1B5C); text-decoration:none; }
.course-card h3 a:hover{ text-decoration:underline; }
.course-card__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.course-card__chips span{ font-size:.75rem; font-weight:700; background:#F0EEF9; color:#3d3f56; padding:4px 10px; border-radius:999px; }
.course-card__foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; flex-wrap:wrap; }
.course-card__fee{ color:var(--ink, #0C1B5C); font-size:1.02rem; }
.course-layout{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:36px; align-items:start; }
.course-facts{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
.course-facts > div{ background:#F7F6FB; border:1px solid #E6E3F2; border-radius:12px; padding:12px 14px; }
.course-facts span{ display:block; font-size:.75rem; color:#6b6f86; text-transform:uppercase; letter-spacing:.04em; }
.course-facts strong{ font-size:.95rem; color:var(--ink, #0C1B5C); }
.course-syllabus{ padding-left:0; list-style:none; display:grid; gap:10px; }
.course-syllabus li{ background:#fff; border:1px solid #E6E3F2; border-left:4px solid #6A2BD6; border-radius:10px; padding:11px 14px; }
.course-enroll{ position:sticky; top:96px; }
@media (max-width: 900px){
  .course-layout{ grid-template-columns:1fr; }
  .course-enroll{ position:static; }
  .course-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* ---------- Course HTML file frame ---------- */
.course-frame-wrap{ border:1px solid #E6E3F2; border-radius:14px; overflow:hidden; background:#fff; }
.course-frame{ display:block; width:100%; height:640px; border:0; }
@media (max-width: 700px){ .course-frame{ height:480px; } }