/* =====================================================================
   "Corporate Light" design — a sleek, light layer on top of site.css.
   Active only when  <html data-design="corporate">  (Admin → Colours & fonts → Design style).
   Switching back to "Classic Dark" simply stops these rules from applying; nothing else changes.
   ===================================================================== */
html[data-design="corporate"] {
  --shadow-sm: 0 1px 2px rgba(11, 37, 69, .05), 0 1px 3px rgba(11, 37, 69, .04);
  --shadow: 0 16px 36px -18px rgba(11, 37, 69, .22);
  --shadow-lg: 0 30px 70px -28px rgba(11, 37, 69, .3);
  --grad: linear-gradient(135deg, var(--c-primary), var(--c-cyan));

  /* ---- type: no italics except quotes ---- */
  & body { letter-spacing: .005em; }
  & h1, & h2, & h3, & h4 { letter-spacing: -.012em; }
  & h1 { font-size: clamp(2.5rem, 5.2vw, 4.1rem); line-height: 1.07; }
  & h2 { font-size: clamp(1.9rem, 3.3vw, 2.7rem); line-height: 1.12; }
  & h3 { font-size: 1.28rem; }
  & em, & i, & cite { font-style: normal; }
  & blockquote { font-style: italic; } & blockquote em, & blockquote i { font-style: normal; }
  & .quote blockquote, & .sl-quote blockquote { font-style: italic; }
  & .hl, & h1 em, & h2 em { font-style: normal; color: var(--c-primary); background: linear-gradient(transparent 68%, color-mix(in srgb, var(--c-accent) 42%, transparent) 68%); -webkit-text-fill-color: currentColor; padding: 0 .06em; border-radius: 2px; }
  & .card-plain p, & .foot-note { font-style: normal; }

  & .eyebrow { background: color-mix(in srgb, var(--c-primary) 8%, #fff); color: var(--c-primary); padding: .5rem .95rem; border-radius: 99px; letter-spacing: .12em; }
  & .eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--c-accent); }
  & .eyebrow-light { color: var(--c-primary); }
  & .bg-brand .eyebrow, & .cta-box .eyebrow { background: rgba(255, 255, 255, .18); color: #fff; }

  /* ---- buttons ---- */
  & .btn { letter-spacing: .01em; }
  & .btn-ghost { background: #fff; color: var(--c-primary); border-color: var(--c-border); backdrop-filter: none; }
  & .btn-ghost:hover { background: var(--c-primary); color: #fff; border-color: var(--c-primary); }
  & .btn-light { border: 1px solid transparent; }
  & .hero .btn-light, & .bg-default .btn-light, & .bg-alt .btn-light { border-color: var(--c-border); }
  & .btn-outline { border-width: 1.5px; }

  /* ---- header ---- */
  & .site-header { background: transparent; }
  & .nav-link { color: var(--c-heading); font-weight: 600; }
  & .nav-link:hover, & .nav-item.active > .nav-link { color: var(--c-primary); background: color-mix(in srgb, var(--c-primary) 7%, transparent); }
  & .burger { color: var(--c-heading); }
  & .brand img { height: 50px; } & .scrolled .brand img { height: 44px; }
  & .site-header.scrolled, & body[data-hero="0"] .site-header, & body.nav-open .site-header { background: rgba(255, 255, 255, .9); backdrop-filter: blur(14px) saturate(1.4); box-shadow: 0 1px 0 var(--c-border), 0 14px 30px -20px rgba(11, 37, 69, .35); }
  & .sub { border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); }

  /* ---- hero ---- */
  & .hero { background: linear-gradient(180deg, #F8FBFF 0%, #EAF2FC 100%); color: var(--c-text); }
  & .hero h1 { color: var(--c-heading); }
  & .hero-sub { color: var(--c-text); max-width: 600px; }
  & .hero-glow { display: none; }
  & .badges { color: var(--c-text); } & .badges .ico { color: #fff; background: var(--c-primary); border-radius: 50%; padding: 2px; width: 18px; height: 18px; }
  & .scroll-cue { color: var(--c-primary); }
  & .crumbs, & .crumbs a { color: var(--c-muted); } & .crumbs .cur { color: var(--c-primary); }
  & .hero-home:not(.hero-split)::before { background: linear-gradient(95deg, rgba(248, 251, 255, .97) 0%, rgba(248, 251, 255, .84) 42%, rgba(248, 251, 255, .08) 80%); }
  & .hero-split .hero-bg, & .hero-split::before { display: none; }
  & .hero-split { min-height: max(92svh, 700px); }
  & .hero-split .hero-inner { display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; padding-top: 8.6rem; padding-bottom: 4.5rem; }
  & .hero-visual { display: block; position: relative; perspective: 1100px; }
  & .hv-frame { margin: 0; border-radius: 30px; overflow: hidden; box-shadow: 0 44px 90px -34px rgba(11, 37, 69, .55); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; aspect-ratio: 5 / 4.3; background: #0d3b73; border: 6px solid #fff; }
  & .hv-frame img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
  & .float-card { background: #fff; border: 1px solid var(--c-border); border-radius: 16px; padding: .8rem 1.1rem .8rem .8rem; box-shadow: 0 22px 44px -18px rgba(11, 37, 69, .38); animation: floaty 6.5s ease-in-out infinite; z-index: 2; }
  & .float-card b { display: block; font: 700 .95rem var(--f-ui); color: var(--c-heading); } & .float-card small { color: var(--c-muted); font-size: .78rem; }
  & .float-card .card-ico.sm { width: 40px; height: 40px; border-radius: 12px; }
  & .fc1 { left: -9%; top: 10%; } & .fc2 { right: -5%; top: 44%; animation-delay: -2.2s; } & .fc3 { left: 4%; bottom: -5%; animation-delay: -4.4s; }
  @keyframes floaty { 50% { transform: translateY(-14px); } }
  & .hero-page { padding: 9.2rem 0 4.4rem; background: linear-gradient(100deg, #F8FBFF 0%, #EAF2FC 100%); }
  & .hero-page::before { display: none; }
  & .hero-page .hero-bg { left: auto; width: 52%; background-position: center; opacity: .5; filter: saturate(.85); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 85%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 35%, #000 85%); }
  & .hero-page .hero-copy { max-width: 700px; }
  & .hero-page .decor { z-index: -1; }

  /* ---- sections: no heavy dark ---- */
  & .bg-dark { background: linear-gradient(135deg, color-mix(in srgb, var(--c-primary) 9%, #fff), color-mix(in srgb, var(--c-cyan) 11%, #fff)); color: var(--c-text); }
  & .bg-dark h1, & .bg-dark h2, & .bg-dark h3, & .bg-dark h4 { color: var(--c-heading); }
  & .bg-dark .lead { color: var(--c-muted); } & .bg-dark .eyebrow { background: #fff; color: var(--c-primary); }
  & .bg-dark .card { background: #fff; border-color: var(--c-border); color: var(--c-text); backdrop-filter: none; }
  & .bg-dark .card p, & .bg-dark .card .ct { color: var(--c-text); }
  & .bg-dark .step-n { background: var(--c-primary); color: #fff; box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-primary) 14%, transparent); }
  & .bg-dark .steps-horizontal .step:not(:last-child)::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-primary) 35%, transparent), transparent); }
  & .bg-dark .quote blockquote { color: var(--c-heading); } & .bg-dark .stat-l { color: var(--c-muted); } & .bg-dark .stat-v { background: linear-gradient(135deg, var(--c-primary), var(--c-cyan)); -webkit-background-clip: text; background-clip: text; }
  & .bg-alt { background: #F5F8FC; }

  /* ---- cards ---- */
  & .card { border-color: var(--c-border); box-shadow: var(--shadow-sm); }
  & .card:hover { box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--c-primary) 30%, var(--c-border)); }
  & .card-ico { background: color-mix(in srgb, var(--c-primary) 10%, #fff); color: var(--c-primary); box-shadow: none; border-radius: 14px; transition: background .3s, color .3s, transform .3s; }
  & .card:hover .card-ico { background: var(--c-primary); color: #fff; transform: rotate(-4deg) scale(1.05); }
  & .card-num { background: none; -webkit-text-fill-color: color-mix(in srgb, var(--c-primary) 35%, #fff); color: color-mix(in srgb, var(--c-primary) 35%, #fff); }
  & .card-badge { background: var(--c-accent); }
  & .card-glass { background: #fff; }
  & .stat { background: #fff; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 1.5rem 1rem; box-shadow: var(--shadow-sm); } & .stat + .stat { border-left: 1px solid var(--c-border); }
  & .stats { gap: 1.1rem; }
  & .chips li, & .mq-chips .mq-item { background: #fff; }

  /* ---- bright brand blocks (replace the heavy navy ones) ---- */
  & .formula, & .cta-box, & .contact-info, & .aside-cta, & .tier-hi { background: linear-gradient(135deg, var(--c-primary), color-mix(in srgb, var(--c-primary) 66%, var(--c-cyan))); }
  & .cta-box { box-shadow: 0 34px 70px -34px color-mix(in srgb, var(--c-primary) 80%, #000); }
  & .tier-hi .tier-tag { color: #fff; opacity: .85; }
  & .step-tag { color: var(--c-accent); }
  & .timeline::before { opacity: .5; }

  /* ---- footer ---- */
  & .site-footer { background: #F4F7FB; color: var(--c-text); border-top: 1px solid var(--c-border); }
  & .site-footer::before { display: none; }
  & .site-footer h4 { color: var(--c-heading); } & .site-footer a { color: var(--c-text); } & .site-footer a:hover { color: var(--c-primary); }
  & .news-form input { background: #fff; border-color: var(--c-border); color: var(--c-text); } & .news-form input::placeholder { color: var(--c-muted); }
  & .foot-bottom { border-top-color: var(--c-border); } & .foot-news .form-msg.ok { color: #0a7a3f; } & .foot-news .form-msg.err { color: #b42318; }
  & .social { border-color: var(--c-border); color: var(--c-primary) !important; } & .site-footer .social:hover { background: var(--c-primary); color: #fff !important; }
  & .contact-info .social { border-color: rgba(255, 255, 255, .5); color: #fff !important; }

  /* ---- forms, misc ---- */
  & .form input, & .form select, & .form textarea { background-color: #fff; }
  & .post-card, & .course, & .tier { border-color: var(--c-border); }
  & #progress { height: 3px; }
}

@media (max-width: 980px) {
  html[data-design="corporate"] {
    & .nav { background: #fff; box-shadow: -24px 0 60px rgba(11, 37, 69, .25); }
    & .nav-link { color: var(--c-heading); border-bottom-color: var(--c-border); }
    & .nav-item.active > .nav-link { color: var(--c-primary); }
    & .sub a { color: var(--c-text); } & .sub a:hover { background: var(--c-bg-alt); color: var(--c-primary); }
    & .hero-split .hero-inner { grid-template-columns: 1fr; padding-top: 7.2rem; }
    & .hero-visual { max-width: 560px; margin: 0 auto; width: 100%; }
    & .fc1 { left: -2%; } & .fc2 { right: -2%; } & .fc3 { left: 2%; }
    & .hero-page .hero-bg { width: 100%; opacity: .14; -webkit-mask-image: none; mask-image: none; }
    & .hero-home:not(.hero-split)::before { background: linear-gradient(180deg, rgba(248, 251, 255, .92), rgba(248, 251, 255, .85)); }
  }
}
@media (max-width: 640px) {
  html[data-design="corporate"] { & .float-card { padding: .55rem .8rem .55rem .55rem; } & .float-card b { font-size: .82rem; } & .float-card small { display: none; } & .stat + .stat { border-left: 1px solid var(--c-border); } }
}

html[data-design="corporate"] .tl-label, html[data-design="corporate"] .step-tag { text-transform: none; letter-spacing: .04em; }
html[data-design="corporate"] .sl-quote blockquote, html[data-design="corporate"] .quote blockquote { font-weight: 600; }

@media (max-width: 980px) {
  html[data-design="corporate"] .mg-link { color: var(--c-heading); } html[data-design="corporate"] .mg-link small, html[data-design="corporate"] .mg-col h5 { color: var(--c-muted); }
  html[data-design="corporate"] .mg-link:hover { background: var(--c-bg-alt); } html[data-design="corporate"] .mg-ico { background: color-mix(in srgb, var(--c-primary) 10%, #fff); color: var(--c-primary); }
}

/* Mobile: a backdrop-filter on the header would trap the fixed slide-out menu inside it (menu cut off). */
@media (max-width: 980px) {
  html[data-design="corporate"] .site-header, html[data-design="corporate"] .site-header.scrolled, html[data-design="corporate"] body[data-hero="0"] .site-header, html[data-design="corporate"] body.nav-open .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .97); }
  html[data-design="corporate"] .nav { background: #fff; box-shadow: -20px 0 50px rgba(11, 37, 69, .25); }
}