:root {
  --bg: #080015;
  --bg-deep: #05000e;
  --surface: #100525;
  --surface-2: #180a31;
  --surface-3: #20103e;
  --text: #ffffff;
  --muted: #b6b2c5;
  --cyan: #00e5ff;
  --cyan-2: #00c4d4;
  --aqua: #00ffee;
  --pink: #ff00ff;
  --pink-soft: #f71aad;
  --green: #46f2ad;
  --yellow: #ffd866;
  --danger: #ff6f91;
  --border: rgba(0, 229, 255, .22);
  --border-pink: rgba(255, 0, 255, .25);
  --shadow-cyan: 0 0 30px rgba(0, 229, 255, .14);
  --shadow-pink: 0 0 30px rgba(255, 0, 255, .12);
  --radius: 22px;
  --radius-sm: 14px;
  --content: 1180px;
  --reading: 790px;
}

html[data-theme="light"] {
  --bg: #f7fbff;
  --bg-deep: #eaf5fb;
  --surface: #ffffff;
  --surface-2: #eef8fd;
  --surface-3: #e5f2fa;
  --text: #09031b;
  --muted: #4e4a5c;
  --cyan: #007f97;
  --cyan-2: #006d7c;
  --aqua: #007b74;
  --pink: #b400a9;
  --pink-soft: #9c0877;
  --green: #08794c;
  --yellow: #8b6300;
  --danger: #a51d43;
  --border: rgba(0, 92, 115, .24);
  --border-pink: rgba(156, 8, 119, .22);
  --shadow-cyan: 0 12px 34px rgba(0, 83, 105, .1);
  --shadow-pink: 0 12px 34px rgba(132, 0, 103, .08);
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Poppins", "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  transition: background .25s ease, color .25s ease;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 8% 12%, rgba(0, 229, 255, .09), transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(255, 0, 255, .08), transparent 28%),
    linear-gradient(rgba(0, 229, 255, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 255, .025) 1px, transparent 1px);
  background-size: auto, auto, 42px 42px, 42px 42px;
  pointer-events: none;
}
img { max-width: 100%; height: auto; }
a { color: var(--cyan); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--aqua); }
*:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
section, article, [id] { scroll-margin-top: 7rem; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
h1, h2, h3, .brand { font-family: "Orbitron", "Segoe UI", sans-serif; line-height: 1.16; letter-spacing: -.025em; }
h1 { margin: 0 0 1.25rem; font-size: clamp(2.35rem, 5vw, 5.25rem); }
h2 { margin: 0 0 1rem; font-size: clamp(1.6rem, 3vw, 2.75rem); }
h3 { margin: 0 0 .65rem; font-size: 1.12rem; }
p { margin: 0 0 1.25rem; }
.lead { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--muted); line-height: 1.78; }
.eyebrow { margin: 0 0 .65rem; color: var(--cyan); font-size: .78rem; font-weight: 800; letter-spacing: .14em; }
.caption, .microcopy { color: var(--muted); font-size: .82rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; padding: .75rem 1rem; background: var(--text); color: var(--bg); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

.affiliate-strip { display: flex; justify-content: center; gap: 1rem; padding: .42rem 1rem; background: linear-gradient(90deg, rgba(0,229,255,.14), rgba(255,0,255,.14)); border-bottom: 1px solid var(--border); color: var(--muted); font-size: .76rem; }
.affiliate-strip a { font-weight: 700; }
.site-header { position: sticky; top: 0; z-index: 100; min-height: 76px; display: flex; align-items: center; gap: 1.5rem; padding: .8rem max(1.25rem, calc((100vw - var(--content)) / 2)); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom: 1px solid var(--border); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: .7rem; color: var(--text); font-size: 1.1rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand img { width: 42px; height: 42px; border-radius: 12px; box-shadow: var(--shadow-cyan); }
.brand span span { color: var(--pink); }
.site-nav { display: flex; align-items: center; gap: .25rem; margin-left: auto; }
.site-nav a { padding: .58rem .68rem; border-radius: 10px; color: var(--muted); font-size: .88rem; font-weight: 600; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: var(--surface-2); color: var(--text); }
.header-actions { display: flex; align-items: center; gap: .55rem; }
.icon-button { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); cursor: pointer; }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.menu-toggle span { display: block; height: 2px; margin: 5px 0; background: var(--text); }

.global-progress { padding: .7rem max(1.25rem, calc((100vw - var(--content)) / 2)); background: var(--bg-deep); border-bottom: 1px solid var(--border); }
.progress-copy, .progress-stats { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; color: var(--muted); }
.progress-copy strong { color: var(--cyan); }
.progress-track, .mini-progress { height: 7px; margin: .45rem 0; overflow: hidden; background: var(--surface-3); border-radius: 99px; }
.progress-track > span, .mini-progress > span { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink)); transition: width .6s ease; box-shadow: 0 0 14px rgba(0,229,255,.4); }
.progress-stats span:last-child { text-align: right; }

main { min-height: 60vh; }
.section, .hero, .page-hero, .lesson-hero, .lesson-layout, .breadcrumbs, .completion-hero, .community-card, .legal-content { width: min(calc(100% - 2.5rem), var(--content)); margin-inline: auto; }
.section { padding-block: clamp(3.75rem, 7vw, 7rem); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: 1.4rem; color: var(--muted); font-size: .82rem; }
.breadcrumbs a { color: var(--muted); }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1.15rem; border: 1px solid transparent; border-radius: 12px; font-weight: 750; text-decoration: none; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button, a, button { font-family: "Orbitron", "Segoe UI", sans-serif; }
.button:hover { transform: translateY(-2px); }
.button.primary { background: linear-gradient(120deg, var(--cyan), var(--aqua)); color: #041014; box-shadow: var(--shadow-cyan); }
.button.secondary { border-color: var(--border); background: var(--surface); color: var(--text); }
.button.ghost { border-color: var(--border-pink); background: transparent; color: var(--text); }
.button.whatsapp { border-color: #25d366; background: #25d366; color: #07180d; box-shadow: 0 0 24px rgba(37,211,102,.24); }
.button.youtube { border-color: #ff0033; background: #ff0033; color: #fff; box-shadow: 0 0 24px rgba(255,0,51,.22); }
.button.youtube:hover { color: #fff; box-shadow: 0 0 34px rgba(255,0,51,.34); }
.button.platform-register { border-color: rgba(255, 0, 223, .42); background: linear-gradient(120deg, #ff00df, #b946ff); color: #fff; box-shadow: 0 0 28px rgba(255, 0, 223, .2); }
.button.platform-register:hover { color: #fff; box-shadow: 0 0 36px rgba(255, 0, 223, .32); }
.button.small { min-height: 42px; padding: .55rem .85rem; font-size: .82rem; }
.button[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.button-row, .center-action { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.center-action { justify-content: center; margin-top: 2rem; }
.text-link { display: inline-block; margin-top: .8rem; font-weight: 700; }

.hero { min-height: 700px; display: grid; grid-template-columns: 1.03fr .97fr; align-items: center; gap: clamp(2rem, 6vw, 6rem); padding-block: clamp(4rem, 8vw, 8rem); }
.hero h1 span { background: linear-gradient(90deg, var(--cyan), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy .lead { max-width: 700px; }
.trust-list { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; padding: 0; margin: 1.5rem 0 0; list-style: none; color: var(--muted); font-size: .8rem; }
.trust-list li::before { content: "✓"; margin-right: .35rem; color: var(--green); }
.hero-visual { padding: 1.4rem; border: 1px solid var(--border); border-radius: 30px; background: linear-gradient(145deg, rgba(0,229,255,.08), rgba(255,0,255,.07)); box-shadow: var(--shadow-cyan), var(--shadow-pink); }
.hero-visual > p { margin: 1rem .5rem 0; color: var(--muted); font-size: .8rem; text-align: center; }
.orbit-title { display: flex; justify-content: space-between; gap: 1rem; padding: 0 .5rem 1rem; font-size: .72rem; color: var(--muted); }
.orbit-title span { color: var(--cyan); font-weight: 800; letter-spacing: .1em; }
.traffic-orbit { position: relative; min-height: 410px; border: 1px solid var(--border); border-radius: 24px; overflow: hidden; background: radial-gradient(circle, rgba(0,229,255,.12), transparent 48%); }
.traffic-orbit::before, .traffic-orbit::after { content: ""; position: absolute; inset: 12%; border: 1px dashed var(--border); border-radius: 50%; }
.traffic-orbit::after { inset: 28%; border-color: var(--border-pink); }
.orbit-center { position: absolute; inset: 50% auto auto 50%; width: 126px; aspect-ratio: 1; display: grid; place-items: center; padding: 1rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); transform: translate(-50%, -50%); z-index: 2; }
.orbit-center img { width: 54px; border-radius: 12px; }
.orbit-center span { color: var(--muted); font-size: .68rem; }
.orbit-item { position: absolute; width: 125px; padding: .8rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-cyan); }
.orbit-item strong, .orbit-item small { display: block; }
.orbit-item small { color: var(--muted); font-size: .7rem; }
.orbit-item.offer { top: 9%; left: 6%; }
.orbit-item.campaign { top: 9%; right: 6%; border-color: var(--border-pink); }
.orbit-item.people { bottom: 9%; right: 6%; }
.orbit-item.visit { bottom: 9%; left: 6%; border-color: var(--border-pink); }

.section-heading { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.section-heading > span { width: 58px; height: 58px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: .8rem; font-weight: 800; box-shadow: var(--shadow-cyan); }
.section-heading h2, .section-heading p { margin-bottom: 0; }
.center-heading { max-width: 820px; margin-inline: auto; text-align: center; }
.center-heading > p:last-child { color: var(--muted); }
.split-copy, .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.large-copy { font-size: clamp(1.3rem, 2.6vw, 2rem); line-height: 1.5; }
.notice { padding: 1.15rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--muted); }
.notice strong { color: var(--text); }
.notice.caution { border-color: rgba(255,216,102,.35); background: rgba(255,216,102,.07); }
.notice.danger { border-color: rgba(255,111,145,.35); background: rgba(255,111,145,.07); }
.value-grid, .process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.value-grid article, .process-grid article { position: relative; min-height: 230px; padding: 1.6rem; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(150deg, var(--surface), var(--surface-2)); }
.value-grid article:nth-child(2), .process-grid article:nth-child(even) { border-color: var(--border-pink); }
.value-grid p, .process-grid p { color: var(--muted); }
.card-number { display: block; margin-bottom: 2.5rem; color: var(--cyan); font-family: "Orbitron", sans-serif; }
.dark-panel { width: min(calc(100% - 2.5rem), calc(var(--content) + 4rem)); padding-inline: 2rem; border: 1px solid var(--border); border-radius: 32px; background: linear-gradient(145deg, var(--surface), var(--bg-deep)); }
.process-grid { grid-template-columns: repeat(4, 1fr); }
.process-grid.five-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process-grid article { min-height: 210px; }
.process-grid b { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 1.8rem; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--pink)); color: #060010; }
.lesson-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2.5rem; }
.lesson-preview-grid > a { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; }
.lesson-preview-grid > a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.lesson-preview-grid > a > span { color: var(--cyan); font-family: "Orbitron", sans-serif; font-weight: 800; }
.lesson-preview-grid h3 { margin-bottom: .35rem; }
.lesson-preview-grid p { margin: 0; color: var(--muted); font-size: .86rem; }
.lesson-preview-grid small { display: inline-block; margin-top: .55rem; color: var(--muted); }
.lesson-preview-grid .is-complete, .lesson-list .is-complete { border-color: rgba(70,242,173,.5); }
[data-lesson-status].is-complete { color: var(--green); }
.six-preview, .level-seven { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.six-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.six-badges span { padding: 1.2rem; border: 1px solid var(--border-pink); border-radius: 14px; background: var(--surface); text-align: center; font-weight: 700; box-shadow: var(--shadow-pink); }
.transparency { display: grid; grid-template-columns: 1fr 1.15fr .8fr; gap: 2rem; align-items: start; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.transparency > div:last-child { display: grid; gap: .65rem; }

.community-card { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid rgba(32,198,107,.38); border-radius: 28px; background: linear-gradient(120deg, rgba(32,198,107,.1), var(--surface)); box-shadow: 0 0 42px rgba(32,198,107,.08); }
.community-card > div { max-width: 730px; }
.community-card h2 { font-size: clamp(1.45rem, 3vw, 2.4rem); }
.community-card p:last-child { margin-bottom: 0; color: var(--muted); }
.site-footer { margin-top: 6rem; padding: 4rem max(1.25rem, calc((100vw - var(--content)) / 2)) 1.5rem; background: var(--bg-deep); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.8fr repeat(3, 1fr); gap: 2rem; }
.footer-grid > div { display: grid; align-content: start; gap: .6rem; }
.footer-grid h2 { margin: 0 0 .5rem; font-size: .9rem; color: var(--text); }
.footer-grid p, .footer-grid a { color: var(--muted); font-size: .82rem; }
.footer-brand img { width: 38px; height: 38px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .75rem; }
.footer-bottom p { margin: 0; }
.floating-whatsapp { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 90; display: flex; align-items: center; gap: .5rem; padding: .72rem 1rem; border-radius: 999px; background: #20c66b; color: #04150b; text-decoration: none; box-shadow: 0 12px 34px rgba(0,0,0,.28); }

.page-hero { padding-block: clamp(4rem, 8vw, 7rem); }
.page-hero.compact { max-width: 950px; margin-left: max(1.25rem, calc((100vw - var(--content)) / 2)); }
.page-hero.compact h1 { font-size: clamp(2.4rem, 5vw, 4.4rem); }
.page-hero.compact > p:last-of-type { max-width: 780px; color: var(--muted); font-size: 1.1rem; }
.journey-summary { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.journey-summary > div { min-width: 150px; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.journey-summary strong, .journey-summary span { display: block; }
.journey-summary strong { color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: 1.7rem; }
.journey-summary span { color: var(--muted); font-size: .75rem; }
.lesson-list { display: grid; gap: .8rem; }
.lesson-list > a { display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; gap: 1rem; padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; transition: transform .2s ease, border .2s ease; }
.lesson-list > a:hover { transform: translateX(4px); border-color: var(--cyan); }
.lesson-index, .lesson-arrow { color: var(--cyan); font-family: "Orbitron", sans-serif; font-weight: 800; }
.lesson-list h2 { margin: .3rem 0; font-size: 1.25rem; }
.lesson-list p { margin: 0; color: var(--muted); font-size: .86rem; }
.lesson-meta { display: flex; gap: 1rem; color: var(--muted); font-size: .7rem; }
.progress-controls { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; }
.progress-controls p { margin: 0; color: var(--muted); font-size: .8rem; }

.lesson-hero { display: grid; grid-template-columns: 1fr 150px; gap: 2rem; align-items: center; padding-block: clamp(3.5rem, 7vw, 6rem); }
.lesson-hero h1 { max-width: 900px; font-size: clamp(2.35rem, 5vw, 4.5rem); }
.lesson-hero > div > p:last-child { max-width: 800px; color: var(--muted); font-size: 1.1rem; }
.lesson-orbit { width: 132px; height: 132px; display: grid; place-items: center; margin-left: auto; border: 1px solid var(--border); border-radius: 50%; background: radial-gradient(circle, rgba(0,229,255,.14), transparent 65%); box-shadow: var(--shadow-cyan); }
.lesson-orbit span { grid-area: 1/1; color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: 2.7rem; font-weight: 800; }
.lesson-orbit small { grid-area: 1/1; align-self: end; margin-bottom: 1.4rem; color: var(--muted); }
.lesson-layout { display: grid; grid-template-columns: minmax(0, var(--reading)) 250px; justify-content: space-between; gap: 4rem; }
.lesson-section { padding: 0 0 clamp(2.75rem, 5vw, 4.5rem); }
.lesson-section p { color: var(--muted); }
.lesson-section .lead { color: var(--muted); }
.lesson-section > :last-child, .legal-content > :last-child { margin-bottom: 0; }
.lesson-section > p, .legal-content > p, .page-hero.compact > p, .completion-hero > p { max-width: 72ch; }
.legal-content { max-width: 900px; padding-bottom: clamp(4rem, 8vw, 7rem); }
.legal-content h2 { margin-top: clamp(2.2rem, 5vw, 3.8rem); }
.lesson-sidebar { position: relative; }
.sticky-card { position: sticky; top: 150px; display: grid; gap: .65rem; padding: 1.1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.sticky-card p { margin: 0; }
.sticky-card small { color: var(--muted); }
.sticky-card a { font-size: .8rem; }
dfn { position: relative; color: var(--cyan); font-style: normal; border-bottom: 1px dotted currentColor; cursor: help; outline-offset: 4px; }
dfn:hover::after, dfn:focus::after { content: attr(data-definition); position: fixed; right: auto; bottom: 1.25rem; left: 50%; z-index: 420; width: min(380px, calc(100vw - 2rem)); padding: .9rem 1rem; border: 1px solid rgba(0,229,255,.42); border-radius: 12px; background: rgba(8,5,24,.98); color: #fff; font-size: clamp(.82rem, 1.8vw, .9rem); font-weight: 500; line-height: 1.55; text-align: left; box-shadow: 0 18px 48px rgba(0,0,0,.52), var(--shadow-cyan); transform: translateX(-50%); pointer-events: none; }
.checklist { display: grid; gap: .65rem; padding: 0; list-style: none; }
.checklist li { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; color: var(--muted); }
.checklist span { color: var(--green); font-weight: 800; }
.checklist.avoid span { color: var(--danger); }

.infographic { display: flex; align-items: stretch; gap: .8rem; padding: 1.3rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.info-node { flex: 1; display: grid; place-items: center; min-height: 160px; padding: 1rem; border: 1px solid var(--border); border-radius: 16px; text-align: center; }
.info-node small { color: var(--muted); }
.node-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--pink)); color: #05000e; font-weight: 900; }
.flow-arrow { align-self: center; color: var(--pink); font-size: 1.6rem; }
.flashcard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.flashcard { position: relative; min-height: 220px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; perspective: 900px; }
.flash-front, .flash-back { position: absolute; inset: 0; display: grid; place-content: center; gap: .55rem; padding: 1.4rem; border: 1px solid var(--border); border-radius: var(--radius); background: linear-gradient(145deg, var(--surface), var(--surface-2)); backface-visibility: hidden; transition: transform .5s ease; box-shadow: var(--shadow-cyan); }
.flash-back { border-color: var(--border-pink); transform: rotateY(180deg); box-shadow: var(--shadow-pink); }
.flashcard.is-flipped .flash-front { transform: rotateY(180deg); }
.flashcard.is-flipped .flash-back { transform: rotateY(360deg); }
.flashcard small { color: var(--cyan); font-weight: 800; letter-spacing: .12em; }
.flashcard strong { font-size: 1.05rem; }
.flashcard em { color: var(--muted); font-size: .72rem; font-style: normal; }
.question-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.key-question { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.key-question summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; cursor: pointer; font-weight: 800; }
.key-question summary small { color: var(--cyan); font-size: .68rem; }
.key-question > div { padding: 0 1rem 1rem; }
.key-question p { font-size: .84rem; }
.step-roadmap { display: grid; gap: 1rem; padding: 0; list-style: none; }
.step-roadmap li { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.step-roadmap li > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--cyan), var(--pink)); color: #05000e; font-family: "Orbitron", sans-serif; font-weight: 900; }
.step-roadmap p { margin: .25rem 0 0; }
.formula-card { display: grid; gap: .4rem; padding: 1.4rem; border: 1px solid var(--border-pink); border-radius: 18px; background: var(--surface); }
.formula-card span { color: var(--muted); font-size: .75rem; }
.formula-card strong { margin-bottom: 1rem; color: var(--pink); }
.traffic-funnel { display: grid; gap: .55rem; max-width: 730px; margin-inline: auto; text-align: center; }
.funnel-stage { margin-inline: auto; padding: 1.1rem; border: 1px solid var(--border); background: var(--surface); clip-path: polygon(4% 0, 96% 0, 88% 100%, 12% 100%); }
.funnel-stage strong, .funnel-stage small { display: block; }
.funnel-stage small { color: var(--muted); }
.stage-one { width: 100%; }
.stage-two { width: 86%; border-color: var(--border-pink); }
.stage-three { width: 72%; }
.stage-four { width: 58%; border-color: var(--border-pink); }
.funnel-connector { color: var(--cyan); font-size: .72rem; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.compare-grid article { padding: 1.4rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.tag { display: inline-block; margin-bottom: 1rem; font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.tag.cyan { color: var(--cyan); }.tag.pink { color: var(--pink); }
.bottom-line { padding-left: 1rem; border-left: 3px solid var(--cyan); }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
table { width: 100%; min-width: 1050px; border-collapse: collapse; background: var(--surface); font-size: .78rem; }
th, td { padding: .85rem; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--surface-3); color: var(--cyan); }
tbody tr:hover { background: var(--surface-2); }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.timeline > div { min-height: 190px; padding: 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.timeline > div:nth-child(even) { border-color: var(--border-pink); }
.timeline span, .timeline strong, .timeline small { display: block; }
.timeline span { margin-bottom: 2rem; color: var(--cyan); font-size: .72rem; font-weight: 800; }
.timeline small { margin-top: .5rem; color: var(--muted); }
.split-bar { display: grid; grid-template-columns: 9fr 1fr; min-height: 170px; overflow: hidden; border-radius: 20px; }
.split-bar > div { display: grid; place-content: center; padding: 1rem; text-align: center; }
.member-share { background: linear-gradient(135deg, var(--cyan-2), var(--aqua)); color: #041014; }
.sponsor-share { min-width: 130px; background: linear-gradient(135deg, var(--pink-soft), var(--pink)); color: #150014; }
.split-bar strong { font-family: "Orbitron", sans-serif; font-size: 2.3rem; }
.split-bar span { font-size: .75rem; font-weight: 700; }
.campaign-lanes { display: grid; gap: 1rem; overflow-x: auto; padding: 1.2rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.campaign-lanes > div { min-width: 680px; display: flex; align-items: center; gap: .5rem; }
.campaign-lanes strong { width: 110px; }
.lane, .hold { display: grid; place-items: center; height: 50px; border-radius: 10px; font-size: .75rem; font-weight: 800; }
.lane { width: 350px; background: linear-gradient(90deg, var(--cyan-2), var(--aqua)); color: #041014; }
.hold { width: 190px; border: 1px dashed var(--pink); color: var(--pink); }
.offset { flex: 0 0 auto; }.offset.one { width: 70px; }.offset.two { width: 140px; }
.send-check { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.send-check > div { padding: 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.send-check span { width: 36px; height: 36px; display: grid; place-items: center; margin-bottom: 1.4rem; border-radius: 50%; background: var(--cyan); color: #041014; font-weight: 900; }
.send-check strong, .send-check small { display: block; }.send-check small { color: var(--muted); }
.dashboard-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.dashboard-map > * { min-height: 150px; display: grid; align-content: center; padding: 1rem; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); color: var(--text); text-decoration: none; }
.dashboard-map > *:nth-child(3n) { border-color: var(--border-pink); }
.dashboard-map small { color: var(--muted); }
.safety-zones { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.safety-zones article { padding: 1.3rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.safety-zones span { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.safety-zone-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem; margin-bottom: .65rem; }
.safety-zone-title strong { font-family: "Orbitron", "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.4; }
.safety-zones article > p { margin: 0; }

.quiz-card { margin: 1rem 0 3rem; padding: clamp(1.3rem, 4vw, 2.4rem); border: 1px solid var(--border-pink); border-radius: 26px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow-pink); }
.quiz-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; color: var(--pink); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.quiz-card h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.quiz-card > p { color: var(--muted); }
.quiz-card form { display: grid; gap: .7rem; }
.answer { display: grid; grid-template-columns: 28px 38px 1fr; align-items: center; gap: .6rem; padding: .85rem; border: 1px solid var(--border); border-radius: 13px; cursor: pointer; }
.answer:has(input:checked) { border-color: var(--cyan); background: rgba(0,229,255,.06); }
.answer input { accent-color: var(--cyan); }
.answer > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; background: var(--surface-3); color: var(--cyan); }
.answer strong { font-family: "Poppins", sans-serif; font-size: .9rem; }
.quiz-submit { justify-self: start; margin-top: .7rem; }
.quiz-feedback > div { margin-top: 1rem; padding: 1rem; border-radius: 14px; }
.feedback-success { border: 1px solid rgba(70,242,173,.4); background: rgba(70,242,173,.08); }
.feedback-retry { border: 1px solid var(--border-pink); background: rgba(255,0,255,.06); }
.feedback-success strong { color: var(--green); }.feedback-retry strong { color: var(--pink); }
.quiz-feedback p { color: var(--muted); }
.lesson-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.next-lesson.locked { opacity: .45; filter: grayscale(.6); }
.source-note { margin-bottom: 4rem; padding: 1rem; border-left: 3px solid var(--cyan); background: var(--surface); color: var(--muted); font-size: .76rem; }
.source-note p { margin: .3rem 0; }
.source-note ul { display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin: .5rem 0 0; padding-left: 1rem; }

.faq-list { max-width: 930px; }
.faq-list details { border-bottom: 1px solid var(--border); }
.faq-list summary { display: grid; grid-template-columns: 50px 1fr 30px; align-items: center; gap: 1rem; padding: 1.2rem 0; cursor: pointer; }
.faq-list summary span { color: var(--cyan); font-family: "Orbitron", sans-serif; }
.faq-list summary i { color: var(--pink); font-size: 1.5rem; font-style: normal; transition: color .2s ease, transform .2s ease; }
.faq-list details[open] summary i { color: var(--green); transform: scale(1.05); }
.faq-list details > p { padding: 0 0 1.4rem 66px; color: var(--muted); opacity: 0; transform: translateY(-4px); transition: opacity .22s ease, transform .22s ease; }
.faq-list details[open] > p { opacity: 1; transform: translateY(0); }
.search-box { display: block; max-width: 620px; margin-top: 2rem; }
.search-box input { width: 100%; min-height: 54px; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 14px; outline: none; background: var(--surface); color: var(--text); }
.search-box input:focus { border-color: var(--cyan); box-shadow: var(--shadow-cyan); }
.compare-callout { display: grid; grid-template-columns: 1fr 70px 1fr; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.compare-callout article { padding: 1.3rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.compare-callout article span { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.compare-callout > div { color: var(--pink); font-size: 2rem; text-align: center; }
.glossary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.glossary-grid article { min-height: 210px; padding: 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.glossary-grid article > span { color: var(--pink); font-family: "Orbitron", sans-serif; font-size: 1.5rem; }
.glossary-grid h2 { margin-top: 1rem; font-size: 1rem; }
.glossary-grid p { color: var(--muted); font-size: .82rem; }
.empty-message { text-align: center; color: var(--muted); }
.action-staircase { display: grid; gap: .7rem; padding: 0; list-style: none; }
.action-staircase li { width: calc(60% + var(--step, 0) * 6%); display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 1rem; padding: 1.2rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
.action-staircase li:nth-child(1) { margin-left: 0; }.action-staircase li:nth-child(2) { margin-left: 5%; }.action-staircase li:nth-child(3) { margin-left: 10%; }.action-staircase li:nth-child(4) { margin-left: 15%; }.action-staircase li:nth-child(5) { margin-left: 20%; }.action-staircase li:nth-child(6) { margin-left: 25%; }.action-staircase li:nth-child(7) { margin-left: 30%; }
.action-staircase li > span { color: var(--cyan); font-family: "Orbitron", sans-serif; font-weight: 900; }
.action-staircase h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
.action-staircase p { margin: 0; color: var(--muted); }
.level-seven-card { padding: 1.5rem; border: 1px solid var(--border-pink); border-radius: 22px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); box-shadow: var(--shadow-pink); }
.level-seven-card > span { color: var(--pink); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.level-seven-card > strong { display: block; margin: 1rem 0; font-size: 1.3rem; }
.level-seven-card dl { display: grid; gap: .6rem; }
.level-seven-card dl div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border); }
.level-seven-card dt { color: var(--muted); }.level-seven-card dd { font-weight: 800; }
.video-grid, .resource-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.video-grid article, .resource-grid article { padding: 1.2rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.video-frame { aspect-ratio: 16/9; margin-bottom: 1rem; overflow: hidden; border-radius: 12px; background: var(--bg-deep); }
.video-frame iframe { width: 100%; height: 100%; border: 0; }
.video-grid article > span, .resource-grid article > span { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.video-grid h2, .resource-grid h2 { margin-top: .8rem; font-size: 1.2rem; }
.video-grid p, .resource-grid p { color: var(--muted); }
.resource-grid .featured-resource { grid-column: 1 / -1; padding: clamp(1.4rem, 4vw, 2.2rem); border-color: rgba(255, 0, 223, .38); background: linear-gradient(125deg, rgba(255, 0, 223, .09), rgba(0, 229, 255, .06), var(--surface)); box-shadow: var(--shadow-pink); }
.resource-grid .featured-resource h2 { max-width: 620px; font-size: clamp(1.45rem, 3vw, 2.1rem); }
.resource-grid .featured-resource p { max-width: 720px; }
.completion-hero { padding-block: 6rem; text-align: center; }
.completion-mark { width: 110px; height: 110px; display: grid; place-items: center; margin: 0 auto 1.5rem; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--cyan); font-size: 3rem; box-shadow: var(--shadow-cyan); }
.completion-hero .journey-summary { justify-content: center; }
.recap { max-width: 800px; }
.decision-card { max-width: 880px; text-align: center; }
.decision-card .button-row { justify-content: center; }
.legal-content { max-width: 850px; padding-bottom: 5rem; }
.legal-content h2 { margin-top: 2.5rem; font-size: 1.5rem; }
.legal-content p { color: var(--muted); }
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0; }
.contact-grid article { padding: 1.5rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.contact-grid span { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.channel-cta { max-width: 820px; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid rgba(0, 229, 255, .2); border-radius: 22px; background: linear-gradient(135deg, rgba(0, 229, 255, .06), rgba(255, 0, 223, .05)); }
.channel-cta .button { margin-top: .5rem; }
.sustainability-engine { display: grid; gap: 1rem; margin: 2rem 0; }
.engine-core { padding: clamp(1.2rem, 3vw, 1.8rem); border: 1px solid rgba(0,229,255,.34); border-radius: 20px; background: linear-gradient(125deg, rgba(0,229,255,.08), rgba(255,0,223,.07), var(--surface)); text-align: center; box-shadow: var(--shadow-cyan); }
.engine-core > span, .engine-core > strong { display: block; }
.engine-core > span { color: var(--cyan); font-size: .74rem; font-weight: 900; letter-spacing: .13em; }
.engine-core > strong { max-width: 760px; margin: .55rem auto 1rem; font-family: "Orbitron", sans-serif; font-size: clamp(1.05rem, 2.4vw, 1.45rem); line-height: 1.45; }
.engine-flowline { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: .6rem; max-width: 760px; margin: 0 auto; }
.engine-flowline b { min-height: 52px; display: grid; place-items: center; padding: .65rem; border: 1px solid var(--border); border-radius: 12px; background: rgba(3,3,14,.48); font-size: .84rem; }
.engine-flowline i { color: var(--pink); font-size: 1.25rem; font-style: normal; }
.engine-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.engine-column { min-width: 0; display: grid; align-content: start; gap: .75rem; padding: clamp(1rem, 2.5vw, 1.35rem); border: 1px solid var(--border); border-radius: 20px; background: linear-gradient(145deg, var(--surface), var(--surface-2)); }
.engine-column.controls { border-color: var(--border-pink); }
.engine-column header { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: .8rem; margin-bottom: .25rem; }
.engine-column header > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(135deg, var(--cyan), var(--pink)); color: #080212; font-family: "Orbitron", sans-serif; font-weight: 900; }
.engine-column header small, .engine-column header strong { display: block; }
.engine-column header small { color: var(--cyan); font-size: .7rem; font-weight: 900; letter-spacing: .1em; }
.engine-column header strong { margin-top: .2rem; font-size: .95rem; line-height: 1.4; }
.engine-column article { min-width: 0; padding: 1rem; border: 1px solid rgba(120,75,188,.25); border-radius: 14px; background: rgba(255,255,255,.025); }
.engine-column article > strong, .engine-column article > small { display: block; }
.engine-column article > strong { margin-bottom: .35rem; color: var(--text); font-size: .96rem; }
.engine-column article > small { color: var(--muted); font-size: .82rem; line-height: 1.6; }
.engine-summary { margin: 0; padding: 1rem 1.15rem; border-left: 3px solid var(--pink); border-radius: 0 14px 14px 0; background: rgba(255,0,223,.05); color: var(--muted); }
.engine-summary strong { color: var(--text); }
.home-video-section, .faq-video-section { max-width: 1040px; }
.home-feature-video, .faq-feature-video { max-width: 900px; margin: 2rem auto 0; }
.dashboard-walkthrough-card { max-width: 760px; }
.video-library-card { display: grid; align-content: start; gap: .85rem; }
.video-library-card > .landing-video-card { width: 100%; }
.video-grid article.video-library-card { padding: 1rem; }

.scroll-top { position: fixed; right: clamp(.8rem, 2vw, 1.4rem); bottom: clamp(.8rem, 2vw, 1.4rem); z-index: 180; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid rgba(0,229,255,.42); border-radius: 50%; background: rgba(7,4,20,.9); color: var(--cyan); box-shadow: 0 12px 34px rgba(0,0,0,.38), 0 0 22px rgba(0,229,255,.14); opacity: 0; visibility: hidden; cursor: pointer; transform: translateY(14px); transition: opacity .2s ease, visibility .2s ease, transform .2s ease, border-color .2s ease; backdrop-filter: blur(12px); }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { border-color: var(--pink); color: #fff; }
.scroll-top span { font-size: 1.25rem; line-height: 1; }

.toast { position: fixed; top: 110px; left: 50%; z-index: 200; max-width: min(520px, calc(100vw - 2rem)); padding: .9rem 1.2rem; border: 1px solid rgba(70,242,173,.5); border-radius: 999px; background: var(--surface-3); color: var(--text); box-shadow: 0 16px 48px rgba(0,0,0,.3); opacity: 0; pointer-events: none; transform: translate(-50%, -20px); transition: .3s ease; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .site-nav { position: fixed; top: 118px; left: 1rem; right: 1rem; display: none; padding: 1rem; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-3); box-shadow: 0 18px 50px rgba(0,0,0,.35); }
  .site-nav.open { display: grid; }
  .menu-toggle { display: block; margin-left: auto; }
  .site-nav + .header-actions .whatsapp { display: none; }
  .hero { grid-template-columns: 1fr; }
  .hero-visual { max-width: 700px; }
  .lesson-layout { grid-template-columns: 1fr; }
  .lesson-sidebar { display: none; }
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr; }
  .footer-grid > div:last-child { grid-column: 2 / -1; }
  .dashboard-map { grid-template-columns: repeat(2, 1fr); }
  .glossary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 720px) {
  body { font-size: 1rem; }
  .affiliate-strip { justify-content: space-between; font-size: .68rem; }
  .site-header { min-height: 68px; padding: .65rem 1rem; }
  .brand span { display: none; }
  .brand img { width: 40px; height: 40px; }
  .site-nav { top: 108px; }
  .global-progress { padding-inline: 1rem; }
  .progress-stats span:nth-child(2) { display: none; }
  .progress-stats span:last-child { max-width: 55%; }
  .section, .hero, .page-hero, .lesson-hero, .lesson-layout, .breadcrumbs, .completion-hero, .community-card, .legal-content { width: min(calc(100% - 2rem), var(--content)); }
  .hero { min-height: auto; padding-block: 4rem; }
  .traffic-orbit { min-height: 350px; }
  .orbit-item { width: 104px; padding: .6rem; }
  .orbit-center { width: 105px; }
  .split-copy, .two-col, .value-grid, .process-grid, .lesson-preview-grid, .six-preview, .level-seven, .transparency, .video-grid, .resource-grid, .contact-grid { grid-template-columns: 1fr; }
  .dark-panel { width: min(calc(100% - 1rem), var(--content)); padding-inline: 1rem; }
  .value-grid article, .process-grid article { min-height: auto; }
  .community-card { align-items: stretch; flex-direction: column; }
  .community-card .button { width: 100%; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid > div:first-child { grid-column: 1/-1; }
  .footer-grid > div:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
  .floating-whatsapp { width: 52px; height: 52px; justify-content: center; padding: 0; }
  .floating-whatsapp b { display: none; }
  .lesson-hero { grid-template-columns: 1fr; }
  .lesson-orbit { display: none; }
  .infographic, .traffic-mini { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
  .flashcard-grid, .question-grid, .compare-grid, .safety-zones { grid-template-columns: 1fr; }
  .timeline, .send-check { grid-template-columns: 1fr 1fr; }
  .split-bar { grid-template-columns: 4fr 1fr; }
  .dashboard-map { grid-template-columns: 1fr; }
  .lesson-nav { flex-direction: column; }
  .lesson-nav .button { width: 100%; }
  .faq-list details > p { padding-left: 0; }
  .compare-callout { grid-template-columns: 1fr; }
  .compare-callout > div { transform: rotate(90deg); }
  .glossary-grid { grid-template-columns: 1fr; }
  .action-staircase li { width: 100%; margin-left: 0 !important; grid-template-columns: 50px 1fr; }
}

@media (max-width: 440px) {
  .header-actions .icon-button { width: 40px; height: 40px; }
  .orbit-title { flex-direction: column; }
  .traffic-orbit { min-height: 390px; }
  .timeline, .send-check { grid-template-columns: 1fr; }
  .six-badges { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid > div:last-child { grid-column: auto; }
  .lesson-list > a { grid-template-columns: 45px 1fr; }
  .lesson-arrow { display: none; }
  .journey-summary > div { flex: 1; min-width: 110px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  .affiliate-strip, .site-header, .global-progress, .community-card, .site-footer, .floating-whatsapp, .toast, .quiz-card { display: none !important; }
  body { background: #fff; color: #000; }
  main { width: 100%; }
  a { color: #000; }
}

/* 2026 dashboard redesign */
body { position: relative; background: #04030c; }
body::before { background: radial-gradient(circle at 50% 8%, rgba(69, 20, 145, .16), transparent 36%), radial-gradient(circle at 50% 96%, rgba(0, 229, 255, .12), transparent 30%), linear-gradient(180deg, #04030c 0%, #070414 55%, #04030c 100%); background-size: auto; }
.circuit-backdrop { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; contain: strict; pointer-events: none; opacity: .9; }
html[data-theme="light"] .circuit-backdrop { opacity: .22; }

.landing-page main { overflow: hidden; }
.landing-header { position: sticky; top: 0; z-index: 100; width: min(calc(100% - 3rem), 1320px); min-height: 82px; display: flex; align-items: center; gap: 2rem; margin: 1rem auto 0; padding: .8rem 1rem .8rem 1.2rem; border: 1px solid rgba(112, 55, 196, .28); border-radius: 18px; background: rgba(6, 4, 18, .82); box-shadow: 0 18px 60px rgba(0, 0, 0, .28); backdrop-filter: blur(20px); }
.landing-header nav { display: flex; gap: .25rem; margin-left: auto; }
.landing-header nav a { padding: .62rem .8rem; border-radius: 10px; color: var(--muted); font-size: .84rem; font-weight: 700; text-decoration: none; }
.landing-header nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.landing-page .hero-v2 { width: min(calc(100% - 3rem), 1320px); min-height: calc(100vh - 98px); grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr); align-items: center; gap: clamp(4.5rem, 8vw, 8rem); padding-block: clamp(5rem, 10vh, 8rem); overflow: visible; }
.hero-v2 .hero-copy { position: relative; min-width: 0; max-width: 100%; }
.hero-v2 h1 { display: grid; max-width: 100%; margin-bottom: 1.6rem; font-size: clamp(3.4rem, 6.1vw, 6.25rem); line-height: .87; letter-spacing: -.065em; text-transform: uppercase; text-shadow: 0 0 36px rgba(177, 139, 255, .15); }
.hero-v2 h1 .hero-white { color: #fff; }
.hero-v2 h1 .hero-gradient { margin-top: .22em; background: linear-gradient(92deg, #00e5ff 0%, #37c9ff 37%, #c052ff 67%, #ff00df 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgba(0, 229, 255, .16)); }
.hero-v2 h1 .hero-advertise { margin-top: .08em; }
.hero-v2 .lead { max-width: 780px; color: #d3cee0; font-size: clamp(1.05rem, 1.45vw, 1.28rem); }
.hero-v2 .lead strong { color: #fff; font-family: "Orbitron", sans-serif; letter-spacing: .025em; }
.hero-v2 .button-row { margin-top: 2rem; }
.hero-v2 .button { min-height: 56px; padding-inline: 1.4rem; }
.hero-access-links { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .35rem .75rem; margin: 1rem 0 0; color: var(--muted); font-size: .84rem; text-align: left; }
.hero-access-links .text-link { margin: 0; }
.campaign-teaser { display: grid; grid-template-columns: minmax(260px, .68fr) minmax(0, 1.55fr); grid-template-areas: "copy table" "action table"; column-gap: clamp(1.5rem, 4vw, 3.5rem); row-gap: .7rem; align-items: center; }
.campaign-teaser-copy { grid-area: copy; max-width: 430px; align-self: end; }
.campaign-teaser-action { grid-area: action; display: flex; flex-wrap: wrap; gap: .7rem; align-self: start; }
.campaign-table-compact { min-width: 0; }
.campaign-table-compact { grid-area: table; }
.campaign-table-compact .table-wrap { scrollbar-width: thin; scrollbar-color: var(--cyan) var(--surface-3); box-shadow: 0 18px 46px rgba(0, 0, 0, .2); }
.campaign-table-compact table { min-width: 840px; font-size: .69rem; }
.campaign-table-compact th, .campaign-table-compact td { padding: .62rem .48rem; }
.advertise-callout { margin: 1.35rem 0 1.15rem; padding: 1.15rem; border: 1px solid rgba(0, 229, 255, .28); border-left: 4px solid var(--cyan); border-radius: 0 16px 16px 0; background: linear-gradient(120deg, rgba(0, 229, 255, .08), rgba(255, 0, 223, .045)); }
.advertise-callout > span { display: block; margin-bottom: .35rem; color: var(--pink); font-size: .74rem; font-weight: 900; letter-spacing: .14em; }
.advertise-callout strong { display: block; color: var(--text); font-family: "Orbitron", sans-serif; font-size: clamp(.94rem, 1.7vw, 1.08rem); line-height: 1.4; }
.advertise-callout p { margin: .55rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.65; }
.hero-cycle-stage { position: relative; min-width: 0; width: 100%; display: grid; place-items: center; isolation: isolate; padding: clamp(1rem, 2.5vw, 2rem); }
.hero-cycle-stage::before { content: ""; position: absolute; z-index: -2; width: min(118%, 500px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(0, 229, 255, .13) 0 18%, rgba(113, 44, 255, .11) 38%, rgba(255, 0, 223, .07) 56%, transparent 72%); filter: blur(5px); }
.hero-cycle-stage::after { content: ""; position: absolute; z-index: -1; left: 17%; right: 17%; bottom: 5%; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, .72); filter: blur(17px); transform: perspective(480px) rotateX(68deg); }
.command-loop { position: relative; width: min(100%, 410px); aspect-ratio: 1; margin: 0 auto; isolation: isolate; filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .42)) drop-shadow(0 0 22px rgba(0, 229, 255, .12)); transform: perspective(900px) rotateX(2.5deg) translateY(-5px); transform-style: preserve-3d; }
.loop-track, .loop-pulse { position: absolute; inset: 16%; border-radius: 50%; pointer-events: none; }
.loop-track { z-index: -2; border: 2px dashed rgba(0,229,255,.38); box-shadow: inset 0 0 30px rgba(0,229,255,.05), 0 0 28px rgba(255,0,223,.06); }
.loop-pulse { z-index: -1; border: 1px solid transparent; }
.loop-pulse::before { content: ""; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 8px #fff, 0 0 20px var(--pink), 0 0 32px var(--cyan); }
.loop-node { position: absolute; z-index: 3; min-width: 88px; min-height: 42px; display: grid; place-items: center; padding: .55rem .75rem; border: 1px solid rgba(0,229,255,.4); border-radius: 999px; background: rgba(8,5,24,.96); color: #fff; font-family: "Orbitron", sans-serif; font-size: clamp(.72rem, 1.2vw, .88rem); font-weight: 800; letter-spacing: .025em; box-shadow: 0 10px 28px rgba(0,0,0,.38), 0 0 18px rgba(0,229,255,.12); }
.loop-node:nth-of-type(even) { border-color: rgba(255,0,223,.48); }
.loop-click { top: 0; left: 50%; transform: translateX(-50%); }
.loop-watch { top: 27%; right: 0; }
.loop-earn { right: 9%; bottom: 6%; }
.loop-withdraw { bottom: 6%; left: 9%; }
.loop-repeat { top: 27%; left: 0; }
.loop-arrow { position: absolute; z-index: 2; color: var(--cyan); font-size: 1.1rem; line-height: 1; text-shadow: 0 0 12px currentColor; }
.arrow-one { top: 14%; right: 20%; transform: rotate(48deg); }
.arrow-two { top: 56%; right: 7%; transform: rotate(112deg); }
.arrow-three { right: 43%; bottom: 8%; transform: rotate(180deg); }
.arrow-four { top: 56%; left: 7%; transform: rotate(248deg); }
.arrow-five { top: 14%; left: 20%; transform: rotate(312deg); }
.loop-center { position: absolute; inset: 50% auto auto 50%; z-index: 1; width: 112px; aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: .45rem; border: 1px solid rgba(255,0,223,.3); border-radius: 50%; background: radial-gradient(circle, rgba(255,0,223,.13), rgba(0,229,255,.04) 54%, rgba(5,3,16,.96) 72%); box-shadow: 0 0 35px rgba(0,229,255,.08), 0 0 30px rgba(255,0,223,.08); transform: translate(-50%, -50%); }
.loop-center img { width: 48px; border-radius: 12px; box-shadow: 0 0 22px rgba(0,229,255,.2); }
.loop-center small { color: var(--muted); font-size: .58rem; font-weight: 800; line-height: 1.25; letter-spacing: .1em; text-align: center; }
.landing-page .section { position: relative; }
.landing-page .intro-section { border-top: 1px solid rgba(0, 229, 255, .12); }
.intro-video-grid { grid-template-columns: minmax(0, .88fr) minmax(340px, 1.12fr); align-items: center; gap: clamp(2rem, 5vw, 4rem); }
.landing-video-card { position: relative; padding: 1px; overflow: hidden; border-radius: 24px; background: linear-gradient(125deg, rgba(0, 229, 255, .9), rgba(132, 62, 255, .75), rgba(255, 0, 223, .9)); box-shadow: 0 24px 75px rgba(0, 0, 0, .42), 0 0 35px rgba(0, 229, 255, .1), 0 0 32px rgba(255, 0, 223, .09); }
.landing-video-card::before { content: ""; position: absolute; inset: -45% auto auto -15%; z-index: 1; width: 55%; aspect-ratio: 1; border-radius: 50%; background: rgba(0, 229, 255, .16); filter: blur(32px); pointer-events: none; }
.landing-video-card button { position: relative; width: 100%; display: block; padding: 0; overflow: hidden; border: 0; border-radius: 23px; background: #070414; color: var(--text); text-align: left; cursor: pointer; }
.video-thumbnail { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(135deg, #10042b, #030711); }
.video-thumbnail img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease, filter .45s ease; }
.video-thumbnail-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 2, 13, .02), rgba(3, 2, 13, .35)), linear-gradient(90deg, rgba(0, 229, 255, .08), rgba(255, 0, 223, .08)); }
.video-play { position: absolute; inset: 50% auto auto 50%; width: 82px; height: 82px; display: grid; place-items: center; border: 2px solid rgba(255, 255, 255, .92); border-radius: 50%; background: linear-gradient(135deg, rgba(0, 229, 255, .96), rgba(255, 0, 223, .96)); color: #fff; box-shadow: 0 0 0 10px rgba(255, 255, 255, .07), 0 0 38px rgba(0, 229, 255, .4), 0 0 42px rgba(255, 0, 223, .32); transform: translate(-50%, -50%); transition: transform .25s ease, box-shadow .25s ease; }
.video-play span { margin-left: 5px; font-size: 1.8rem; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.video-watch-label { position: absolute; left: 1rem; bottom: 1rem; padding: .35rem .65rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: rgba(4, 3, 15, .78); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .11em; backdrop-filter: blur(12px); }
.video-card-copy { position: relative; z-index: 2; display: block; padding: .95rem 1.2rem 1.05rem; }
.video-card-copy small, .video-card-copy strong { display: block; }
.video-card-copy small { color: var(--pink); font-size: .68rem; font-weight: 800; letter-spacing: .12em; }
.video-card-copy strong { margin: .25rem 0; font-family: "Orbitron", "Segoe UI", sans-serif; font-size: 1.05rem; }
.landing-video-card button:hover .video-thumbnail img { transform: scale(1.035); filter: saturate(1.08) brightness(1.04); }
.landing-video-card button:hover .video-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 12px rgba(255, 255, 255, .08), 0 0 48px rgba(0, 229, 255, .52), 0 0 54px rgba(255, 0, 223, .42); }

.video-modal[hidden] { display: none; }
.video-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: clamp(.75rem, 3vw, 2rem); }
.video-modal-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(1, 1, 8, .88); cursor: pointer; backdrop-filter: blur(16px); }
.video-modal-panel { position: relative; z-index: 1; width: min(1100px, calc(100vw - 1.5rem), calc((100dvh - 8rem) * 1.7778)); max-height: calc(100dvh - 1rem); display: grid; grid-template-rows: auto auto auto; overflow: hidden; padding: clamp(.8rem, 2.3vw, 1.25rem); border: 1px solid rgba(0, 229, 255, .38); border-radius: clamp(18px, 3vw, 28px); background: linear-gradient(145deg, rgba(16, 7, 38, .99), rgba(4, 4, 14, .99)); box-shadow: 0 35px 110px rgba(0, 0, 0, .7), 0 0 54px rgba(0, 229, 255, .13), 0 0 50px rgba(255, 0, 223, .1); }
.video-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .2rem .1rem 1rem; }
.video-modal-head span { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.video-modal-head h2 { margin: .2rem 0 0; font-size: clamp(1.25rem, 3vw, 2rem); }
.video-close { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%; background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.video-close span { color: inherit; font-size: 2rem; font-weight: 400; line-height: 1; letter-spacing: 0; }
.video-close:hover { border-color: var(--pink); background: rgba(255, 0, 223, .12); transform: rotate(4deg); }
.video-modal-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); border-radius: 18px; background: radial-gradient(circle, rgba(0, 229, 255, .1), transparent 42%), #020208; }
.video-modal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-modal-note { margin: .75rem .15rem 0; color: var(--muted); font-size: .78rem; text-align: center; }
.video-loading { display: grid; place-items: center; gap: .8rem; color: var(--muted); text-align: center; }
.video-loading span { width: 46px; height: 46px; border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--cyan); border-right-color: var(--pink); border-radius: 50%; animation: video-loading-spin .8s linear infinite; }
.video-loading p { margin: 0; }
.video-load-error { display: grid; place-items: center; gap: .8rem; padding: 2rem; text-align: center; }
.video-load-error p { margin: 0; color: var(--muted); }
body.video-modal-open { overflow: hidden; }

@keyframes video-loading-spin {
  to { transform: rotate(360deg); }
}
.landing-path { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.path-topics { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.5rem 0 2rem; }
.path-topics span { padding: .5rem .72rem; border: 1px solid var(--border); border-radius: 999px; background: rgba(0, 229, 255, .04); color: var(--muted); font-size: .76rem; }
.dashboard-preview-card { min-height: 390px; display: grid; grid-template-columns: 92px 1fr; overflow: hidden; border: 1px solid rgba(144, 78, 229, .34); border-radius: 26px; background: #080613; box-shadow: 0 28px 80px rgba(0, 0, 0, .42), var(--shadow-pink); transform: perspective(1100px) rotateY(-6deg) rotateX(2deg); }
.preview-side { display: grid; align-content: start; gap: 1rem; padding: 1.5rem 1rem; border-right: 1px solid var(--border); background: #0d091d; }
.preview-side i { height: 28px; border: 1px solid rgba(0, 229, 255, .18); border-radius: 8px; background: rgba(0, 229, 255, .06); }
.preview-side i:first-child { height: 48px; background: linear-gradient(135deg, rgba(0, 229, 255, .22), rgba(255, 0, 223, .15)); }
.preview-content { padding: 2.3rem; }
.preview-content > span { color: var(--cyan); font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.preview-content > strong { display: block; margin: 1rem 0 2rem; font-family: "Orbitron", sans-serif; font-size: 1.55rem; }
.preview-progress { height: 10px; display: block; margin-bottom: 2rem; overflow: hidden; border-radius: 20px; background: #21173a; }
.preview-progress i { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 0 0 18px rgba(0, 229, 255, .3); }
.preview-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.preview-grid i { height: 92px; border: 1px solid rgba(0, 229, 255, .17); border-radius: 14px; background: linear-gradient(150deg, rgba(17, 11, 38, .95), rgba(8, 6, 20, .95)); }
.preview-grid i:nth-child(even) { border-color: rgba(255, 0, 223, .2); }
.landing-final { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 6rem; padding-inline: clamp(1.5rem, 5vw, 4rem); border: 1px solid var(--border); border-radius: 28px; background: linear-gradient(110deg, rgba(0, 229, 255, .08), rgba(255, 0, 223, .07)); }
.landing-final h2 { margin-bottom: .5rem; }
.landing-final p:last-child { margin: 0; color: var(--muted); }
.landing-footer { width: min(calc(100% - 3rem), 1320px); display: grid; grid-template-columns: 1.4fr 1fr auto; align-items: center; gap: 2rem; margin: 0 auto; padding: 2.2rem 0; border-top: 1px solid rgba(0, 229, 255, .15); color: var(--muted); font-size: .76rem; }
.landing-footer > div p, .landing-footer > p { margin: 0; }
.landing-footer nav { display: flex; flex-wrap: wrap; gap: .8rem; }
.landing-footer nav a { color: var(--muted); }

.dashboard-page { min-width: 320px; }
.dashboard-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 150; width: 320px; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; padding: 1.15rem; border-right: 1px solid rgba(108, 59, 179, .28); background: rgba(7, 5, 18, .97); box-shadow: 22px 0 70px rgba(0, 0, 0, .2); backdrop-filter: blur(22px); scrollbar-width: thin; scrollbar-color: rgba(0, 229, 255, .3) transparent; }
.dashboard-brand { padding: .35rem .3rem 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.sidebar-progress { display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: .8rem; margin-top: 1.25rem; }
.progress-ring { position: relative; width: 52px; height: 52px; }
.progress-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.progress-ring circle, .score-ring circle { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 4; }
.progress-ring .ring-value { stroke: var(--cyan); stroke-linecap: round; stroke-dasharray: 113.1; stroke-dashoffset: 113.1; filter: drop-shadow(0 0 4px rgba(0, 229, 255, .5)); transition: stroke-dashoffset .6s ease; }
.progress-ring strong { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text); font-family: "Orbitron", sans-serif; font-size: .75rem; }
.sidebar-progress small, .sidebar-progress b { display: block; }
.sidebar-progress small { color: var(--muted); font-size: .78rem; }
.sidebar-progress b { font-size: .9rem; }
.dashboard-sidebar > .progress-track { margin: .8rem 0 .6rem; }
.sidebar-motivation { margin: 0 0 1.1rem; color: var(--muted); font-size: .78rem; line-height: 1.55; }
.sidebar-reset-button { width: 100%; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; margin: 0 0 .25rem; padding: .55rem .75rem; border: 1px solid var(--border-pink); border-radius: 10px; background: transparent; color: var(--muted); font-size: .76rem; font-weight: 700; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; }
.sidebar-reset-button:hover { border-color: var(--pink); background: rgba(255, 0, 223, .07); color: var(--text); }
.sidebar-reset-button span { color: var(--pink); font-size: 1rem; }
.dashboard-nav { display: grid; gap: .2rem; }
.nav-label { margin: 1.1rem .55rem .4rem; color: #938ca0; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-nav-link { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: .55rem; min-height: 48px; padding: .58rem .7rem; border: 1px solid transparent; border-radius: 11px; color: #c2bdcc; font-size: .92rem; line-height: 1.35; text-decoration: none; }
.dashboard-nav-link span { color: var(--cyan); font-size: .88rem; font-weight: 800; text-align: center; }
.dashboard-nav-link:hover, .dashboard-nav-link.active { border-color: rgba(0, 229, 255, .18); background: linear-gradient(90deg, rgba(0, 229, 255, .08), rgba(255, 0, 223, .025)); color: #fff; }
.dashboard-nav-link.platform-link { color: #d0cad9; }
.dashboard-nav-link.platform-link span { color: var(--pink); }
.dashboard-nav-link.register-link { border-color: rgba(255, 0, 223, .25); background: linear-gradient(90deg, rgba(255, 0, 223, .11), rgba(0, 229, 255, .025)); color: #fff; }
.course-nav { margin: .25rem 0; }
.course-nav summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .58rem .7rem; color: #aaa4b5; font-size: .82rem; cursor: pointer; }
.course-nav summary small { color: var(--cyan); }
.course-nav > div { display: grid; gap: .12rem; padding: .25rem 0 .35rem .35rem; }
.course-nav-link { display: grid; grid-template-columns: 28px 1fr 20px; align-items: center; gap: .45rem; min-height: 44px; padding: .5rem .55rem; border-left: 2px solid rgba(255, 255, 255, .08); color: #aaa4b5; font-size: .875rem; line-height: 1.3; text-decoration: none; }
.course-nav-link > span { color: #655f70; font-family: "Orbitron", sans-serif; }
.course-nav-link b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-nav-link i { min-width: 20px; color: #645e6d; font-family: "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", sans-serif; font-style: normal; font-size: .9rem; line-height: 1; text-align: center; }
.course-nav-link:hover, .course-nav-link.active { border-left-color: var(--pink); color: #fff; }
.course-nav-link.is-complete i { color: var(--green); }
.course-nav-link i.is-current { color: var(--cyan); filter: drop-shadow(0 0 5px rgba(0, 229, 255, .42)); }
.course-nav-link i.is-complete { color: var(--green); font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif; font-size: 1rem; font-weight: 900; filter: drop-shadow(0 0 4px rgba(32, 198, 107, .32)); }
.course-nav-link i.is-locked { opacity: .72; }
.sidebar-community { display: grid; grid-template-columns: 28px 1fr; gap: .5rem; margin-top: 1.2rem; padding: .85rem; border: 1px solid rgba(32, 198, 107, .24); border-radius: 14px; background: rgba(32, 198, 107, .05); }
.sidebar-community > span { color: var(--green); }
.sidebar-community strong, .sidebar-community small { display: block; }
.sidebar-community strong { font-size: .84rem; }
.sidebar-community small { color: var(--muted); font-size: .76rem; }
.sidebar-community .button { grid-column: 1 / -1; min-height: 44px; font-size: .82rem; }
.sidebar-bottom { display: flex; align-items: center; gap: .65rem; margin-top: auto; padding-top: 1.1rem; }
.sidebar-bottom .icon-button { width: 34px; height: 34px; flex: 0 0 auto; }
.sidebar-bottom a { color: #aaa4b5; font-size: .76rem; }
.dashboard-shell { min-height: 100vh; margin-left: 320px; }
.dashboard-topbar { position: sticky; top: 0; z-index: 100; min-height: 72px; display: flex; align-items: center; gap: 1rem; padding: .75rem clamp(1.1rem, 4vw, 3rem); border-bottom: 1px solid rgba(107, 65, 170, .2); background: rgba(5, 4, 14, .82); backdrop-filter: blur(20px); }
.topbar-brand { min-width: 0; display: flex; align-items: center; gap: .7rem; color: var(--text); text-decoration: none; }
.topbar-brand img { width: 42px; height: 42px; flex: 0 0 auto; border-radius: 11px; }
.topbar-brand small, .topbar-brand strong { display: block; }
.topbar-brand small { color: #aaa4b5; font-size: .76rem; }
.topbar-brand strong { font-family: "Orbitron", sans-serif; font-size: .95rem; }
.topbar-actions { display: flex; align-items: center; gap: .55rem; margin-left: auto; }
.topbar-home { min-height: 44px; display: inline-flex; align-items: center; margin-left: auto; padding: .58rem .85rem; border: 1px solid var(--border); border-radius: 9px; color: var(--muted); font-size: .82rem; font-weight: 700; text-decoration: none; }
.login-label-mobile { display: none; }
.dashboard-menu-toggle { display: none; width: 42px; height: 42px; padding: 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.dashboard-menu-toggle span { display: block; height: 2px; margin: 4px 0; background: var(--text); }
.sidebar-overlay { display: none; }
.dashboard-main { width: min(calc(100% - 3rem), 1120px); min-height: calc(100vh - 150px); margin: 0 auto; }
.dashboard-page .section, .dashboard-page .page-hero, .dashboard-page .lesson-hero, .dashboard-page .lesson-layout, .dashboard-page .breadcrumbs, .dashboard-page .completion-hero, .dashboard-page .legal-content { width: 100%; margin-inline: 0; }
.dashboard-page .page-hero.compact { max-width: 900px; margin-left: 0; padding-block: clamp(3rem, 6vw, 5rem); }
.dashboard-page .section { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.dashboard-page .lesson-hero { padding-block: clamp(2.8rem, 5vw, 4.5rem); }
.dashboard-page .lesson-layout { display: block; max-width: 930px; }
.dashboard-page .breadcrumbs { padding-top: 1.2rem; }
.dashboard-footer { width: min(calc(100% - 3rem), 1120px); display: flex; justify-content: space-between; gap: 1rem; margin: 3rem auto 0; padding: 1.25rem 0 2rem; border-top: 1px solid rgba(255, 255, 255, .07); color: #aaa4b5; font-size: .76rem; }
.dashboard-footer p { margin: 0; }
.dashboard-footer nav { display: flex; gap: .8rem; }
.dashboard-footer a { color: #777184; }
.dashboard-welcome { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; align-items: center; margin-top: 1.2rem; padding: clamp(2rem, 5vw, 4rem); border: 1px solid rgba(0, 229, 255, .2); border-radius: 26px; background: linear-gradient(135deg, rgba(15, 10, 35, .94), rgba(6, 5, 18, .96)); box-shadow: 0 28px 90px rgba(0, 0, 0, .28); }
.dashboard-welcome h1 { max-width: 720px; font-size: clamp(2.4rem, 5vw, 4.7rem); }
.dashboard-welcome > div:first-child > p:last-of-type { max-width: 690px; color: var(--muted); }
.dashboard-score { text-align: center; }
.score-ring { position: relative; width: 180px; height: 180px; margin: 0 auto; }
.score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.score-ring circle { stroke-width: 7; }
.score-ring .ring-value { stroke: url(#none); stroke: var(--pink); stroke-linecap: round; stroke-dasharray: 314.2; stroke-dashoffset: 314.2; filter: drop-shadow(0 0 7px rgba(255, 0, 223, .5)); transition: stroke-dashoffset .6s ease; }
.score-ring strong { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-family: "Orbitron", sans-serif; font-size: 2rem; }
.score-ring small { position: absolute; inset: auto 0 45px; color: var(--muted); font-size: .65rem; }
.dashboard-score p { margin: .4rem 0 0; color: var(--muted); font-size: .76rem; }
.dashboard-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1rem 0 2.5rem; }
.dashboard-stats article { padding: 1.2rem; border: 1px solid rgba(120, 75, 188, .22); border-radius: 16px; background: rgba(13, 9, 29, .78); }
.dashboard-stats span, .dashboard-stats small, .dashboard-stats strong { display: block; }
.dashboard-stats span, .dashboard-stats small { color: var(--muted); font-size: .78rem; }
.dashboard-stats strong { margin: .35rem 0; color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: 1.5rem; }
.dashboard-section { margin: 2.5rem 0; }
.dashboard-section-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.dashboard-section-head h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.dashboard-section-head > a { min-height: 44px; display: inline-flex; align-items: center; font-size: .84rem; font-weight: 700; }
.next-lesson-card { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 1.2rem; padding: 1.3rem; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(120deg, rgba(0, 229, 255, .06), rgba(15, 10, 32, .9)); }
.next-index { width: 64px; height: 64px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 15px; color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: 1.3rem; box-shadow: var(--shadow-cyan); }
.next-lesson-card small { color: var(--pink); font-size: .76rem; font-weight: 800; letter-spacing: .1em; }
.next-lesson-card h3 { margin: .25rem 0; font-size: 1.15rem; }
.next-lesson-card p { margin: 0; color: var(--muted); font-size: .88rem; }
.tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.tool-grid > a { display: grid; grid-template-columns: 54px 1fr; gap: 1rem; padding: 1.2rem; border: 1px solid rgba(121, 73, 190, .22); border-radius: 16px; background: rgba(13, 9, 29, .78); color: var(--text); text-decoration: none; }
.tool-grid > a:hover { border-color: var(--cyan); transform: translateY(-2px); }
.tool-grid > a > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 13px; background: rgba(0, 229, 255, .08); color: var(--cyan); font-weight: 800; }
.tool-grid h3 { margin: 0 0 .25rem; font-size: .94rem; }
.tool-grid p { margin: 0; color: var(--muted); font-size: .84rem; }
.platform-access .dashboard-section-head { align-items: flex-start; }
.platform-access .dashboard-section-head p:last-child { max-width: 700px; margin: .35rem 0 0; color: var(--muted); }
.platform-access-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 255px), 1fr)); gap: .8rem; }
.platform-access-grid > a { display: grid; grid-template-columns: 50px 1fr 24px; align-items: center; gap: .85rem; min-height: 132px; padding: 1.15rem; border: 1px solid rgba(121, 73, 190, .25); border-radius: 16px; background: rgba(13, 9, 29, .82); color: var(--text); text-decoration: none; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.platform-access-grid > a:hover { border-color: var(--cyan); background: rgba(0, 229, 255, .055); transform: translateY(-2px); }
.platform-access-grid > a.featured { border-color: rgba(255, 0, 223, .38); background: linear-gradient(135deg, rgba(255, 0, 223, .09), rgba(13, 9, 29, .9)); box-shadow: var(--shadow-pink); }
.platform-access-grid > a > span { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; background: rgba(0, 229, 255, .08); color: var(--cyan); font-weight: 900; }
.platform-access-grid > a.featured > span { background: rgba(255, 0, 223, .11); color: var(--pink); }
.platform-access-grid small, .platform-access-grid strong, .platform-access-grid p { display: block; }
.platform-access-grid small { color: var(--pink); font-size: .7rem; font-weight: 800; letter-spacing: .09em; }
.platform-access-grid strong { margin: .2rem 0; font-family: "Orbitron", sans-serif; font-size: .95rem; }
.platform-access-grid p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.platform-access-grid i { color: var(--cyan); font-style: normal; text-align: right; }
.platform-disclosure { margin: .85rem 0 0; color: var(--muted); font-size: .76rem; }
.disclosure-links { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 2rem; }
.dashboard-note { padding: 1.5rem; border: 1px solid rgba(255, 0, 223, .2); border-radius: 20px; background: rgba(255, 0, 223, .035); }
.dashboard-note > div { display: grid; grid-template-columns: 42px 1fr; gap: 1rem; }
.dashboard-note > div > span { color: var(--pink); font-size: 1.5rem; }
.dashboard-note h2 { margin-bottom: .4rem; font-size: 1.4rem; }
.dashboard-note p:last-child { margin: 0; color: var(--muted); }

/* Performance, motion, and resilient layout refinements */
body { overflow-x: clip; }
h1, h2, h3, p, a, strong { overflow-wrap: break-word; }
.button { max-width: 100%; }
.button, .dashboard-nav-link, .course-nav-link, .platform-access-grid > a { touch-action: manipulation; }
.dashboard-page p, .landing-page p { text-wrap: pretty; }
.table-wrap, .campaign-lanes { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
.landing-page .section { padding-block: clamp(3.25rem, 6vw, 5.5rem); }
.landing-page .section, .dashboard-page .dashboard-section { content-visibility: auto; contain-intrinsic-size: 1px 620px; }
.video-frame iframe { display: block; }

/* Heading-family typography for navigation and linked text. */
.site-nav a:not(.button),
.dashboard-nav-link:not(.platform-link),
.course-nav-link,
.breadcrumbs a,
.sidebar-bottom a,
.source-note a,
.legal-content a,
.text-link,
.tutorial-related a,
.tutorial-source-note a,
.dashboard-footer nav a:not(.button) {
  font-family: "Orbitron", "Segoe UI", sans-serif;
}

.tutorial-video-shell { position: relative; width: 100%; display: block; overflow: hidden; border-radius: 23px; background: #070414; color: var(--text); text-align: left; }
.tutorial-thumbnail { display: grid; place-items: center; isolation: isolate; background: radial-gradient(circle at 50% 45%, rgba(0, 229, 255, .19), transparent 29%), linear-gradient(135deg, #13052f, #050817 58%, #210525); }
.tutorial-thumbnail::before { content: ""; position: absolute; inset: 12% 7%; z-index: -1; border: 1px solid rgba(0, 229, 255, .16); border-radius: 18px; box-shadow: inset 0 0 34px rgba(255, 0, 223, .07); }
.tutorial-thumbnail-number { position: relative; z-index: 1; color: var(--cyan); font-size: clamp(4.5rem, 10vw, 7.5rem); font-weight: 800; line-height: 1; text-shadow: 0 0 32px rgba(0, 229, 255, .32); }
.tutorial-coming-soon { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; padding: .35rem .65rem; border: 1px solid rgba(70, 242, 173, .42); border-radius: 999px; background: rgba(4, 3, 15, .84); color: var(--green); font-size: .7rem; font-weight: 800; letter-spacing: .11em; backdrop-filter: blur(12px); }
.tutorial-video-shell .video-card-copy small { color: var(--green); }
.tutorial-note { margin-top: 1.25rem; padding: 1rem 1.1rem; border-left: 3px solid var(--cyan); background: var(--surface); color: var(--muted); }
.visibility-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem; }
.visibility-grid article { padding: 1.15rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.visibility-grid article > span { color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.visibility-grid h3 { margin-top: .55rem; }
.visibility-grid p { margin: 0; color: var(--muted); font-size: .9rem; }

@keyframes circuit-node-pulse {
  0%, 100% { opacity: .42; transform: scale(.78); }
  42% { opacity: 1; transform: scale(1.24); }
  62% { opacity: .72; transform: scale(.96); }
}

@keyframes circuit-trace-flow {
  to { stroke-dashoffset: -72; }
}

@keyframes circuit-horizon-breathe {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

@keyframes video-modal-reveal {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loop-orbit {
  to { transform: rotate(360deg); }
}

@keyframes loop-arrow-breathe {
  0%, 100% { opacity: .42; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  .landing-page .circuit-node { transform-box: fill-box; transform-origin: center; will-change: transform, opacity; animation: circuit-node-pulse 4.8s ease-in-out infinite; }
  .landing-page .node-2 { animation-delay: -.8s; animation-duration: 5.4s; }
  .landing-page .node-3 { animation-delay: -2.1s; animation-duration: 4.2s; }
  .landing-page .node-4 { animation-delay: -1.4s; animation-duration: 5.7s; }
  .landing-page .node-5 { animation-delay: -3.2s; animation-duration: 4.6s; }
  .landing-page .node-6 { animation-delay: -.35s; animation-duration: 5.1s; }
  .landing-page .node-7 { animation-delay: -2.65s; animation-duration: 5.9s; }
  .landing-page .node-8 { animation-delay: -1.75s; animation-duration: 4.4s; }
  .landing-page .circuit-traces { stroke-dasharray: 18 12; animation: circuit-trace-flow 16s linear infinite; }
  .landing-page .trace-right { animation-direction: reverse; animation-duration: 19s; }
  .landing-page .circuit-horizon { animation: circuit-horizon-breathe 5.5s ease-in-out infinite; }
  .video-modal-panel { animation: video-modal-reveal .28s ease-out both; }
  .loop-pulse { animation: loop-orbit 8s linear infinite; }
  .loop-arrow { animation: loop-arrow-breathe 2.4s ease-in-out infinite; }
  .arrow-two { animation-delay: .25s; }
  .arrow-three { animation-delay: .5s; }
  .arrow-four { animation-delay: .75s; }
  .arrow-five { animation-delay: 1s; }
}

/* Mobile browser chrome changes the visual viewport while scrolling. Keep the
   fixed circuit background stable and remove its viewport-edge horizon lines
   on smaller or touch-based devices so they cannot jump during that resize. */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  .landing-page .circuit-backdrop { height: 100svh; }
  .landing-page .circuit-horizon,
  .landing-page .circuit-horizon + path { display: none; }
}

@media (max-width: 1180px) {
  .landing-page .hero-v2 { grid-template-columns: 1fr; }
  .hero-cycle-stage { width: min(100%, 560px); justify-self: center; }
  .landing-path { grid-template-columns: 1fr; }
  .dashboard-preview-card { max-width: 760px; }
  .landing-footer { grid-template-columns: 1fr 1fr; }
  .landing-footer > p { grid-column: 1 / -1; }
  .dashboard-sidebar { width: min(88vw, 340px); transform: translateX(-102%); transition: transform .25s ease; }
  .dashboard-sidebar.open { transform: translateX(0); }
  .dashboard-shell { margin-left: 0; }
  .dashboard-menu-toggle { display: block; }
  .sidebar-overlay { position: fixed; inset: 0; z-index: 140; width: 100%; height: 100%; border: 0; background: rgba(0, 0, 0, .62); }
  body.sidebar-open .sidebar-overlay { display: block; }
}

@media (max-width: 760px) {
  .circuit-backdrop { opacity: .55; }
  .landing-header { width: calc(100% - 1.5rem); margin-top: .6rem; }
  .landing-header nav { display: none; }
  .landing-header .brand > span { display: none; }
  .landing-header .header-actions { margin-left: auto; }
  .landing-header .whatsapp { font-size: 0; }
  .landing-header .whatsapp::after { content: "WhatsApp"; font-size: .72rem; }
  .landing-page .hero-v2 { width: calc(100% - 2rem); min-height: auto; padding-block: 5rem; }
  .hero-v2 .button-row { width: 100%; max-width: 640px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
  .hero-v2 .button-row > .button { width: 100%; min-width: 0; max-width: 100%; padding-inline: .9rem; line-height: 1.35; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .intro-video-grid { grid-template-columns: 1fr; }
  .hero-v2 h1 { font-size: clamp(3rem, 11vw, 4.8rem); line-height: .9; }
  .dashboard-preview-card { min-height: 310px; grid-template-columns: 66px 1fr; transform: none; }
  .preview-content { padding: 1.4rem; }
  .landing-final { width: calc(100% - 2rem); align-items: stretch; flex-direction: column; }
  .landing-final .button { width: 100%; }
  .landing-footer { width: calc(100% - 2rem); grid-template-columns: 1fr; }
  .landing-footer > p { grid-column: auto; }
  .dashboard-main, .dashboard-footer { width: calc(100% - 2rem); }
  .dashboard-topbar { padding-inline: 1rem; }
  .dashboard-topbar .topbar-brand { display: none; }
  .topbar-actions { gap: .35rem; }
  .login-label-desktop { display: none; }
  .login-label-mobile { display: inline; }
  .topbar-actions .button.platform-register { padding-inline: .7rem; }
  .dashboard-welcome { grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem; }
  .process-grid.five-steps { grid-template-columns: 1fr 1fr; }
  .engine-panels { grid-template-columns: 1fr; }
  .dashboard-score { display: grid; grid-template-columns: 120px 1fr; align-items: center; }
  .score-ring { width: 120px; height: 120px; }
  .score-ring small { bottom: 27px; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; }
  .next-lesson-card { grid-template-columns: 56px 1fr; }
  .next-index { width: 52px; height: 52px; }
  .next-lesson-card .button { grid-column: 1 / -1; width: 100%; }
  .tool-grid { grid-template-columns: 1fr; }
  .platform-access-grid { grid-template-columns: 1fr; }
  .dashboard-footer { align-items: flex-start; flex-direction: column; }
  .visibility-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .landing-header { gap: .55rem; padding-inline: .7rem; }
  .landing-header .header-actions { gap: .35rem; }
  .landing-header .theme-toggle { display: none; }
  .landing-header .brand img { width: 40px; height: 40px; }
  .landing-header .whatsapp { min-height: 42px; padding-inline: .7rem; }
  .landing-page .hero-v2 { padding-block: 4rem; }
  .hero-v2 h1 { font-size: clamp(2.75rem, 11.5vw, 4rem); line-height: .91; }
  .hero-v2 .button-row { grid-template-columns: minmax(0, 1fr); }
  .hero-v2 .button { width: 100%; min-height: 58px; padding: .9rem 1rem; line-height: 1.35; text-align: center; white-space: normal; }
  .landing-video-card { border-radius: 19px; }
  .landing-video-card button, .tutorial-video-shell { border-radius: 18px; }
  .video-play { width: 66px; height: 66px; }
  .video-play span { font-size: 1.4rem; }
  .video-card-copy { padding: .9rem 1rem 1rem; }
  .video-modal { padding: .45rem; }
  .video-modal-panel { width: min(calc(100vw - .7rem), calc((100dvh - 6.4rem) * 1.7778)); max-height: calc(100dvh - .7rem); border-radius: 17px; }
  .video-modal-frame { border-radius: 12px; }
  .video-modal-head { align-items: flex-start; }
  .video-close { width: 44px; height: 44px; }
  .command-loop { width: min(100%, 330px); margin-block: 1rem 1.25rem; }
  .loop-node { min-width: 80px; min-height: 40px; padding-inline: .6rem; font-size: .7rem; }
  .loop-center { width: 96px; }
  .loop-center img { width: 42px; }
  .landing-page .section { padding-block: 3.5rem; }
  .dashboard-page .section { padding-block: 2.75rem; }
  .dashboard-page .lesson-section { padding-bottom: 3.25rem; }
  .dashboard-page .page-hero.compact, .dashboard-page .lesson-hero { padding-block: 2.75rem; }
  .section-heading { align-items: flex-start; gap: .75rem; margin-bottom: 1.5rem; }
  .section-heading > span { width: 48px; height: 48px; border-radius: 13px; }
  .section-heading > div { min-width: 0; }
  .landing-page .dark-panel { width: calc(100% - 1rem); border-radius: 22px; }
  .topbar-brand small { display: none; }
  .topbar-brand strong { max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .topbar-actions .button, .topbar-actions .topbar-home { min-height: 42px; padding-inline: .55rem; font-size: .72rem; }
  .dashboard-welcome h1, .dashboard-page .page-hero.compact h1, .dashboard-page .lesson-hero h1 { font-size: clamp(2rem, 11vw, 3rem); }
  .dashboard-score { grid-template-columns: 100px 1fr; }
  .score-ring { width: 100px; height: 100px; }
  .score-ring small { bottom: 21px; }
  .score-ring strong { font-size: 1.55rem; }
  .dashboard-stats { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .dashboard-stats article { padding: 1rem; }
  .dashboard-stats strong { font-size: 1.25rem; }
  .dashboard-section-head { align-items: flex-start; flex-direction: column; }
  .tool-grid > a { grid-template-columns: 48px 1fr; padding: 1rem; }
  .platform-access-grid > a { grid-template-columns: 44px 1fr 20px; min-height: 116px; padding: 1rem; }
  .platform-access-grid > a > span { width: 42px; height: 42px; }
  .dashboard-footer nav { flex-wrap: wrap; }
  .progress-controls { align-items: stretch; flex-direction: column; }
  .progress-controls .button { width: 100%; }
}

@media (max-width: 380px) {
  .landing-header .icon-button { display: none; }
  .landing-header .whatsapp { margin-left: auto; }
  .hero-v2 h1 { font-size: clamp(2.45rem, 11.5vw, 3.25rem); }
  .hero-v2 .button-row > .button { padding-inline: .75rem; font-size: clamp(.88rem, 4.3vw, 1rem); }
  .dashboard-main, .dashboard-footer { width: calc(100% - 1.25rem); }
  .dashboard-topbar { gap: .55rem; }
  .topbar-brand span { display: none; }
  .topbar-brand img { width: 38px; height: 38px; }
  .topbar-actions { margin-left: auto; }
  .topbar-actions .button, .topbar-actions .topbar-home { font-size: .7rem; }
  .topbar-actions .platform-register { font-size: 0; }
  .topbar-actions .platform-register::after { content: "Register"; font-size: .7rem; }
  .dashboard-stats { grid-template-columns: 1fr; }
  .dashboard-score { grid-template-columns: 86px 1fr; }
  .score-ring { width: 86px; height: 86px; }
  .score-ring small { display: none; }
  .next-lesson-card { grid-template-columns: 1fr; }
  .next-index { width: 48px; height: 48px; }
  .next-lesson-card .button { grid-column: auto; }
  .answer { grid-template-columns: 24px 34px 1fr; padding: .7rem .55rem; }
  .process-grid.five-steps { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .campaign-teaser { grid-template-columns: 1fr; grid-template-areas: "copy" "table" "action"; row-gap: 1.35rem; }
  .campaign-teaser-copy { max-width: 720px; }
  .campaign-teaser-action .button { width: 100%; }
}

@media (max-width: 560px) {
  .engine-flowline { grid-template-columns: 1fr; }
  .engine-flowline i { transform: rotate(90deg); }
  .engine-column header { grid-template-columns: 40px 1fr; }
  .engine-column header > span { width: 40px; height: 40px; }
  dfn:hover::after, dfn:focus::after { bottom: .75rem; width: calc(100vw - 1.25rem); }
}

@media (max-height: 620px) {
  .video-modal-note { display: none; }
  .video-modal-head { padding-bottom: .55rem; }
  .video-modal-head h2 { font-size: 1rem; }
  .video-close { width: 40px; height: 40px; }
  .video-modal-panel { width: min(980px, calc(100vw - 1rem), calc((100dvh - 4.5rem) * 1.7778)); }
}

@media (hover: none) and (pointer: coarse) {
  .button, .icon-button, .dashboard-menu-toggle, .dashboard-nav-link, .course-nav summary, .course-nav-link, .topbar-home { min-height: 48px; }
  .flashcard { min-height: 220px; }
}

/* Profit Calculator */
.calculator-main { width: min(calc(100% - 3rem), 1260px); }
.calculator-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2rem; padding-block: clamp(2.75rem, 5vw, 4.75rem) clamp(2rem, 4vw, 3.5rem); }
.calculator-hero h1 { max-width: 900px; margin-bottom: .9rem; font-size: clamp(2.35rem, 5vw, 4.65rem); }
.calculator-hero > div > p:last-child { max-width: 820px; margin: 0; color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.15rem); }
.calculator-rule-chip { min-width: 220px; padding: 1rem 1.15rem; border: 1px solid rgba(0, 229, 255, .28); border-radius: var(--radius-sm); background: linear-gradient(145deg, rgba(0, 229, 255, .08), rgba(255, 0, 223, .045)); box-shadow: var(--shadow-cyan); }
.calculator-rule-chip span, .calculator-rule-chip strong, .calculator-rule-chip small { display: block; }
.calculator-rule-chip span { color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: .7rem; font-weight: 800; letter-spacing: .1em; }
.calculator-rule-chip strong { margin: .3rem 0 .2rem; font-family: "Orbitron", sans-serif; font-size: 1rem; }
.calculator-rule-chip small { color: var(--muted); font-size: .78rem; }

.calculator-workspace { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 1.25rem; align-items: start; }
.calculator-panel, .calculator-results { min-width: 0; padding: clamp(1.1rem, 2.4vw, 1.65rem); border: 1px solid rgba(0, 229, 255, .2); border-radius: 24px; background: linear-gradient(150deg, rgba(16, 5, 37, .96), rgba(7, 4, 20, .94)); box-shadow: 0 18px 60px rgba(0, 0, 0, .18), var(--shadow-cyan); }
html[data-theme="light"] .calculator-panel, html[data-theme="light"] .calculator-results { background: linear-gradient(150deg, var(--surface), var(--surface-2)); }
.calculator-panel-head, .calculator-results-head, .calculator-section-intro, .calculator-form-actions, .calculator-result-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.calculator-panel-head { align-items: flex-start; margin-bottom: 1.2rem; }
.calculator-panel-head h2, .calculator-results-head h2, .calculator-section-intro h3 { margin: 0; }
.calculator-panel-head h2 { font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
.calculator-reset { border-color: rgba(255, 111, 145, .48); background: rgba(255, 111, 145, .07); color: var(--text); }
.calculator-reset:hover { border-color: var(--danger); background: rgba(255, 111, 145, .13); color: var(--text); }

.calculator-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; padding: .38rem; border: 1px solid rgba(112, 72, 173, .28); border-radius: 15px; background: rgba(3, 2, 12, .45); }
.calculator-tabs button { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .75rem; border: 1px solid transparent; border-radius: 11px; background: transparent; color: var(--muted); cursor: pointer; font-size: .78rem; }
.calculator-tabs button span { color: var(--cyan); }
.calculator-tabs button.active { border-color: rgba(0, 229, 255, .3); background: linear-gradient(120deg, rgba(0, 229, 255, .12), rgba(255, 0, 223, .055)); color: var(--text); box-shadow: inset 0 0 20px rgba(0, 229, 255, .04); }
.calculator-mode-panel { padding-top: 1.35rem; }
.calculator-section-intro { align-items: flex-start; margin-bottom: 1.15rem; }
.calculator-section-intro p { margin: .35rem 0 0; color: var(--muted); font-size: .86rem; }
.calculator-section-intro > span { flex: 0 0 auto; padding: .38rem .65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: .68rem; }

.calculator-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.calculator-field-grid label { min-width: 0; display: grid; align-content: start; gap: .42rem; color: var(--text); }
.calculator-field-grid label > span { font-size: .86rem; font-weight: 700; }
.calculator-field-grid label small { color: var(--muted); font-size: .72rem; line-height: 1.5; }
.calculator-field-grid select, .calculator-field-grid input { width: 100%; min-height: 50px; padding: .7rem .8rem; border: 1px solid rgba(0, 229, 255, .25); border-radius: 11px; background: var(--bg-deep); color: var(--text); font-family: "Poppins", "Segoe UI", sans-serif; font-size: 1rem; }
html[data-theme="light"] .calculator-field-grid select, html[data-theme="light"] .calculator-field-grid input { background: var(--surface); }
.calculator-field-grid option { color: #fff; background: #0a0318; }
.calculator-date-field { grid-column: 1 / -1; }
.calculator-form-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.calculator-form-actions .button { min-width: 160px; }

.calculator-empty { display: grid; place-items: center; padding: 2.2rem 1.25rem; border: 1px dashed rgba(0, 229, 255, .26); border-radius: 16px; color: var(--muted); text-align: center; }
.calculator-empty > span { width: 48px; height: 48px; display: grid; place-items: center; margin-bottom: .65rem; border: 1px solid var(--border); border-radius: 50%; color: var(--cyan); font-size: 1.2rem; }
.calculator-empty h3 { margin-bottom: .3rem; color: var(--text); }
.calculator-empty p { max-width: 44ch; margin: 0; }
.planner-empty { margin-bottom: .9rem; padding-block: 1.4rem; }
.advanced-plans { display: grid; gap: .85rem; margin-bottom: .9rem; }
.planner-row { padding: 1rem; border: 1px solid rgba(0, 229, 255, .16); border-radius: 16px; background: rgba(0, 229, 255, .025); }
.planner-row-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; }
.planner-row-head span, .planner-row-head strong { display: block; }
.planner-row-head span { color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .09em; }
.planner-row-head strong { margin-top: .15rem; font-family: "Orbitron", sans-serif; font-size: .85rem; }
.calculator-icon-action { min-height: 42px; padding: .55rem .75rem; border: 1px solid rgba(255, 111, 145, .35); border-radius: 10px; background: transparent; color: var(--danger); cursor: pointer; font-size: .7rem; }
.calculator-cap-note { margin: .85rem 0 0; color: var(--muted); font-size: .76rem; }
.calculator-error { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(255, 111, 145, .42); border-radius: 13px; background: rgba(255, 111, 145, .08); }
.calculator-error ul { margin: .45rem 0 0; padding-left: 1.25rem; color: var(--muted); }

.calculator-results { border-color: rgba(255, 0, 223, .24); box-shadow: 0 18px 60px rgba(0, 0, 0, .18), var(--shadow-pink); }
.calculator-results-head { margin-bottom: 1.2rem; }
.calculator-results-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
.calculator-results-head > span { padding: .38rem .6rem; border: 1px solid var(--border-pink); border-radius: 9px; color: var(--pink); font-family: "Orbitron", sans-serif; font-size: .72rem; font-weight: 800; }
.calculator-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
.calculator-metrics article { min-width: 0; min-height: 126px; padding: .95rem; border: 1px solid rgba(111, 70, 169, .24); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.calculator-metrics article.metric-primary, .calculator-metrics article.metric-profit { border-color: rgba(0, 229, 255, .3); background: linear-gradient(135deg, rgba(0, 229, 255, .08), rgba(255, 0, 223, .035)); }
.calculator-metrics span, .calculator-metrics strong, .calculator-metrics small { display: block; }
.calculator-metrics span { color: var(--muted); font-size: .72rem; font-weight: 700; }
.calculator-metrics strong { margin: .42rem 0 .28rem; color: var(--text); font-family: "Orbitron", sans-serif; font-size: clamp(.95rem, 2vw, 1.18rem); line-height: 1.3; }
.calculator-metrics .metric-profit strong { color: var(--green); }
.calculator-metrics small { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.calculator-notice { margin-top: .9rem; padding: 1rem; border: 1px solid rgba(255, 216, 102, .32); border-radius: 14px; background: rgba(255, 216, 102, .06); }
.calculator-notice strong { color: var(--yellow); font-family: "Orbitron", sans-serif; font-size: .8rem; }
.calculator-notice p { margin: .35rem 0 0; color: var(--muted); font-size: .78rem; }
.calculator-result-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 1rem; }
.calculator-result-section { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.calculator-subhead { display: grid; grid-template-columns: 42px 1fr; gap: .75rem; align-items: start; margin-bottom: 1rem; }
.calculator-subhead > span { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--cyan); font-family: "Orbitron", sans-serif; font-size: .7rem; }
.calculator-subhead h2 { margin: 0; font-size: clamp(1.08rem, 2vw, 1.4rem); }
.campaign-breakdown { display: grid; gap: .7rem; }
.campaign-result-card { padding: 1rem; border: 1px solid rgba(0, 229, 255, .18); border-radius: 14px; background: rgba(0, 229, 255, .025); }
.campaign-result-card header { display: flex; justify-content: space-between; gap: .75rem; margin-bottom: .65rem; }
.campaign-result-card header span { color: var(--cyan); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.campaign-result-card header strong { font-family: "Orbitron", sans-serif; font-size: .82rem; }
.campaign-result-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .8rem; margin: 0; }
.campaign-result-card dl div { min-width: 0; }
.campaign-result-card dt { color: var(--muted); font-size: .68rem; }
.campaign-result-card dd { margin: .1rem 0 0; color: var(--text); font-size: .82rem; font-weight: 700; }
.campaign-result-card p { margin: .7rem 0 0; color: var(--muted); font-size: .72rem; }

.campaign-timeline { position: relative; display: grid; gap: .75rem; }
.campaign-timeline::before { content: ""; position: absolute; top: 22px; bottom: 22px; left: 21px; width: 1px; background: linear-gradient(var(--cyan), var(--pink)); opacity: .42; }
.timeline-card { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: .8rem; align-items: start; padding: .85rem 0; }
.timeline-marker { position: relative; z-index: 1; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--cyan); font-family: "Orbitron", sans-serif; font-weight: 800; box-shadow: var(--shadow-cyan); }
.timeline-card > div:last-child { min-width: 0; padding: .1rem .85rem .8rem; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.timeline-card span { color: var(--pink); font-size: .68rem; font-weight: 800; letter-spacing: .08em; }
.timeline-card h3 { margin: .28rem 0 .55rem; font-size: .95rem; }
.timeline-card dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0; }
.timeline-card dt { color: var(--muted); font-size: .67rem; }
.timeline-card dd { margin: .1rem 0 0; color: var(--text); font-size: .78rem; font-weight: 700; }
.calculator-timeline-note { margin: .8rem 0 0; color: var(--muted); font-size: .75rem; }
.calculator-reset-bottom { margin-top: 1.4rem; }

.calculator-explainers { display: grid; gap: .8rem; padding-block: 1.25rem 4rem; }
.calculator-explainers details { border: 1px solid rgba(108, 65, 170, .24); border-radius: 16px; background: rgba(12, 6, 28, .72); }
html[data-theme="light"] .calculator-explainers details { background: var(--surface); }
.calculator-explainers summary { display: flex; justify-content: space-between; gap: 1rem; min-height: 56px; align-items: center; padding: 1rem 1.15rem; color: var(--text); font-family: "Orbitron", sans-serif; font-size: .9rem; cursor: pointer; }
.calculator-explainers summary span { color: var(--cyan); font-size: 1.1rem; }
.calculator-explainers details[open] summary span { transform: rotate(45deg); }
.calculator-explainers details > div { padding: 0 1.15rem 1.15rem; color: var(--muted); }
.calculator-explainers details p, .calculator-explainers details ul { margin-bottom: .8rem; }
.calculator-explainers details li + li { margin-top: .45rem; }
.calculator-explainers details strong { color: var(--text); }

.calculator-reset-dialog { width: min(calc(100% - 2rem), 520px); padding: 0; border: 1px solid rgba(255, 111, 145, .38); border-radius: 22px; background: var(--surface); color: var(--text); box-shadow: 0 30px 100px rgba(0, 0, 0, .55); }
.calculator-reset-dialog::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(5px); }
.calculator-reset-dialog form { padding: clamp(1.35rem, 4vw, 2rem); text-align: center; }
.reset-dialog-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 1rem; border: 1px solid rgba(255, 111, 145, .4); border-radius: 50%; color: var(--danger); font-size: 1.4rem; }
.calculator-reset-dialog h2 { font-size: clamp(1.25rem, 4vw, 1.7rem); }
.calculator-reset-dialog p { color: var(--muted); }
.calculator-reset-dialog form > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

@media (max-width: 1050px) {
  .calculator-workspace { grid-template-columns: 1fr; }
  .calculator-panel, .calculator-results { padding: clamp(1.15rem, 3vw, 1.8rem); }
}

@media (max-width: 700px) {
  .calculator-main { width: calc(100% - 2rem); }
  .calculator-hero { grid-template-columns: 1fr; align-items: start; gap: 1.1rem; }
  .calculator-rule-chip { width: 100%; min-width: 0; }
  .calculator-panel-head { display: grid; }
  .calculator-panel-head .calculator-reset { justify-self: start; }
  .calculator-field-grid { grid-template-columns: 1fr; }
  .calculator-date-field { grid-column: auto; }
  .calculator-metrics { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .calculator-main { width: calc(100% - 1.25rem); }
  .calculator-hero h1 { font-size: clamp(2rem, 10.5vw, 2.75rem); }
  .calculator-panel, .calculator-results { padding: .9rem; border-radius: 18px; }
  .calculator-tabs { grid-template-columns: 1fr; }
  .calculator-tabs button { justify-content: flex-start; }
  .calculator-section-intro { display: grid; }
  .calculator-section-intro > span { justify-self: start; }
  .calculator-metrics { grid-template-columns: 1fr; }
  .calculator-metrics article { min-height: 110px; }
  .calculator-form-actions, .calculator-result-actions { display: grid; grid-template-columns: 1fr; }
  .calculator-form-actions .button, .calculator-result-actions .button, .calculator-reset-bottom { width: 100%; }
  .campaign-result-card dl, .timeline-card dl { grid-template-columns: 1fr; }
  .calculator-reset-dialog form > div:last-child { display: grid; grid-template-columns: 1fr; }
}

@media print {
  .circuit-backdrop, .dashboard-sidebar, .dashboard-topbar, .dashboard-footer, .landing-header, .landing-footer, .sidebar-overlay, .scroll-top { display: none !important; }
  .dashboard-shell { margin-left: 0; }
  .calculator-hero, .calculator-panel, .calculator-result-actions, .calculator-reset-bottom, .calculator-explainers, .toast { display: none !important; }
  .calculator-main { width: 100%; }
  .calculator-workspace { display: block; }
  .calculator-results { border: 0; box-shadow: none; background: #fff; color: #000; }
  .calculator-results [hidden] { display: none !important; }
  .calculator-metrics, .campaign-result-card dl, .timeline-card dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-metrics article, .campaign-result-card, .calculator-notice { break-inside: avoid; border-color: #bbb; background: #fff; }
  .calculator-results h2, .calculator-results h3, .calculator-results strong, .calculator-results dd { color: #000; }
  .calculator-results p, .calculator-results span, .calculator-results small, .calculator-results dt { color: #333; }
}

/* Signal Aurora background
   Decorative layers only. Existing content, controls, links, and layout remain intact. */
html {
  background: #03020a;
}

body {
  background: transparent;
}

body::before,
body::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body::before {
  inset: -18vmax;
  z-index: -2;
  background:
    radial-gradient(ellipse 48% 34% at 10% 12%, rgba(0, 229, 255, .18) 0%, rgba(0, 229, 255, .07) 32%, transparent 72%),
    radial-gradient(ellipse 42% 30% at 88% 18%, rgba(255, 0, 223, .16) 0%, rgba(255, 0, 223, .055) 35%, transparent 72%),
    radial-gradient(ellipse 45% 34% at 54% 92%, rgba(116, 54, 255, .18) 0%, rgba(0, 229, 255, .045) 42%, transparent 74%),
    conic-gradient(from 218deg at 52% 48%, transparent 0 16%, rgba(0, 229, 255, .055) 23%, rgba(126, 58, 255, .075) 31%, transparent 40% 61%, rgba(255, 0, 223, .055) 69%, transparent 78%),
    linear-gradient(145deg, #020108 0%, #080316 44%, #04020d 72%, #020108 100%);
  background-size: 100% 100%;
  transform-origin: 50% 50%;
  animation: signal-aurora-drift 24s ease-in-out infinite alternate;
}

body::after {
  inset: 0;
  z-index: -1;
  width: 100vw;
  height: 100svh;
  background:
    radial-gradient(ellipse 72% 44% at 48% -14%, transparent 58%, rgba(0, 229, 255, .105) 58.5%, rgba(0, 229, 255, .025) 60%, transparent 63%),
    radial-gradient(ellipse 48% 68% at 109% 52%, transparent 61%, rgba(255, 0, 223, .095) 61.5%, rgba(255, 0, 223, .02) 63%, transparent 66%),
    radial-gradient(ellipse 54% 48% at -11% 78%, transparent 63%, rgba(92, 76, 255, .09) 63.5%, rgba(0, 229, 255, .018) 65%, transparent 68%),
    radial-gradient(circle at 7% 19%, rgba(0, 229, 255, .72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 17% 72%, rgba(255, 255, 255, .58) 0 1px, transparent 1.7px),
    radial-gradient(circle at 31% 14%, rgba(255, 0, 223, .62) 0 1px, transparent 1.9px),
    radial-gradient(circle at 47% 84%, rgba(255, 216, 102, .54) 0 1px, transparent 1.8px),
    radial-gradient(circle at 64% 26%, rgba(0, 229, 255, .64) 0 1px, transparent 1.8px),
    radial-gradient(circle at 79% 69%, rgba(255, 255, 255, .5) 0 1px, transparent 1.7px),
    radial-gradient(circle at 92% 34%, rgba(255, 0, 223, .58) 0 1px, transparent 1.9px);
  opacity: .72;
  animation: signal-orbit-breathe 10s ease-in-out infinite alternate;
}

.circuit-backdrop {
  display: none;
}

.landing-header,
.dashboard-topbar,
.dashboard-sidebar {
  background-color: rgba(5, 3, 15, .9);
}

.landing-page .hero-v2 {
  position: relative;
}

.landing-page .hero-v2::before,
.dashboard-main::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.landing-page .hero-v2::before {
  top: 8%;
  right: -15%;
  width: min(66vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 0 42%, rgba(0, 229, 255, .12) 42.4%, transparent 43.1% 51%, rgba(255, 0, 223, .1) 51.4%, transparent 52.2% 63%, rgba(121, 71, 255, .075) 63.4%, transparent 64.2%);
  opacity: .72;
  transform: rotate(-12deg);
  animation: signal-halo-float 18s ease-in-out infinite alternate;
}

.dashboard-main {
  position: relative;
  isolation: isolate;
}

.dashboard-main::before {
  top: 3rem;
  left: 50%;
  width: min(86vw, 980px);
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 229, 255, .075) 0%, rgba(112, 53, 255, .055) 42%, transparent 72%);
  transform: translateX(-50%);
}

.landing-page .section,
.dashboard-main > * {
  isolation: isolate;
}

@keyframes signal-aurora-drift {
  0% { opacity: .88; transform: translate3d(-1.3%, -.8%, 0) scale(1); }
  50% { opacity: 1; }
  100% { opacity: .9; transform: translate3d(1.5%, 1%, 0) scale(1.035) rotate(.45deg); }
}

@keyframes signal-orbit-breathe {
  0% { opacity: .52; transform: scale(1); }
  100% { opacity: .78; transform: scale(1.018); }
}

@keyframes signal-halo-float {
  0% { opacity: .56; transform: translate3d(-1.5%, -1%, 0) rotate(-12deg) scale(.98); }
  100% { opacity: .8; transform: translate3d(1.5%, 1.5%, 0) rotate(-7deg) scale(1.025); }
}

body.ambient-paused::before,
body.ambient-paused::after,
body.ambient-paused .hero-v2::before {
  animation-play-state: paused;
}

html[data-theme="light"] {
  background: #f7fbff;
}

html[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 48% 34% at 10% 12%, rgba(0, 127, 151, .14), transparent 70%),
    radial-gradient(ellipse 42% 30% at 88% 18%, rgba(180, 0, 169, .1), transparent 70%),
    radial-gradient(ellipse 45% 34% at 54% 92%, rgba(111, 76, 210, .11), transparent 72%),
    linear-gradient(145deg, #ffffff 0%, #f5f1ff 48%, #edfaff 100%);
}

html[data-theme="light"] body::after {
  opacity: .34;
}

html[data-theme="light"] .landing-header,
html[data-theme="light"] .dashboard-topbar,
html[data-theme="light"] .dashboard-sidebar {
  background-color: rgba(250, 253, 255, .92);
}

@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  body::before {
    inset: 0;
    width: 100vw;
    height: 100svh;
    animation: none;
  }

  body::after {
    animation: none;
  }

  .landing-page .hero-v2::before {
    right: -32%;
    animation: none;
  }
}

@media (max-width: 560px) {
  body::before {
    background:
      radial-gradient(ellipse 82% 42% at 12% 8%, rgba(0, 229, 255, .14), transparent 72%),
      radial-gradient(ellipse 76% 42% at 92% 34%, rgba(255, 0, 223, .12), transparent 72%),
      radial-gradient(ellipse 80% 46% at 48% 94%, rgba(116, 54, 255, .14), transparent 74%),
      linear-gradient(160deg, #020108 0%, #080316 48%, #03020a 100%);
  }

  body::after {
    background:
      radial-gradient(ellipse 100% 40% at 50% -12%, transparent 58%, rgba(0, 229, 255, .08) 58.5%, transparent 62%),
      radial-gradient(circle at 9% 18%, rgba(0, 229, 255, .65) 0 1px, transparent 1.8px),
      radial-gradient(circle at 26% 72%, rgba(255, 255, 255, .46) 0 1px, transparent 1.7px),
      radial-gradient(circle at 62% 20%, rgba(255, 0, 223, .58) 0 1px, transparent 1.9px),
      radial-gradient(circle at 88% 66%, rgba(255, 216, 102, .46) 0 1px, transparent 1.8px);
    opacity: .58;
  }

  .landing-page .hero-v2::before {
    top: 12%;
    right: -52%;
    width: 145vw;
    opacity: .45;
  }

  html[data-theme="light"] body::before {
    background:
      radial-gradient(ellipse 82% 42% at 12% 8%, rgba(0, 127, 151, .12), transparent 72%),
      radial-gradient(ellipse 76% 42% at 92% 34%, rgba(180, 0, 169, .09), transparent 72%),
      radial-gradient(ellipse 80% 46% at 48% 94%, rgba(111, 76, 210, .1), transparent 74%),
      linear-gradient(160deg, #ffffff 0%, #f5f1ff 50%, #edfaff 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after,
  .landing-page .hero-v2::before {
    animation: none !important;
  }
}

@media print {
  body::before,
  body::after,
  .landing-page .hero-v2::before,
  .dashboard-main::before {
    display: none !important;
  }
}

/* Static interface: content and pages appear immediately. */
@view-transition { navigation: none; }
html { scroll-behavior: auto; }
*, *::before, *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
.button:hover, .lesson-preview-grid > a:hover, .lesson-list > a:hover,
.tool-grid > a:hover, .platform-access-grid > a:hover { transform: none; }
.landing-video-card button:hover .video-thumbnail img { transform: none; filter: none; }
.landing-video-card button:hover .video-play { transform: translate(-50%, -50%); }
.video-close:hover { transform: none; }
.button:focus-visible, .topbar-home:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 4px;
}

/* Video cards: make every playable card read as a video at a glance */
.landing-video-card { transition: transform .25s ease, box-shadow .25s ease; }
.landing-video-card:has(button):hover { transform: translateY(-3px); box-shadow: 0 28px 80px rgba(0, 0, 0, .5), 0 0 44px rgba(0, 229, 255, .22), 0 0 40px rgba(255, 0, 223, .2); }
.landing-video-card button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.landing-video-card button .video-thumbnail::after { content: "VIDEO"; position: absolute; top: 1rem; right: 1rem; z-index: 3; padding: .38rem .75rem .38rem 1.55rem; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: radial-gradient(circle at .8rem 50%, #ff3b30 0 3.5px, rgba(255, 59, 48, .35) 4.5px, transparent 7px), rgba(4, 3, 15, .82); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; letter-spacing: .14em; backdrop-filter: blur(10px); pointer-events: none; }
.landing-video-card button .video-play::before { content: ""; position: absolute; inset: -12px; border: 2px solid rgba(0, 229, 255, .75); border-radius: 50%; animation: cbVideoPulse 2.2s ease-out infinite; pointer-events: none; }
@keyframes cbVideoPulse { 0% { transform: scale(.88); opacity: 1; border-color: rgba(0, 229, 255, .8); } 100% { transform: scale(1.5); opacity: 0; border-color: rgba(255, 0, 223, .6); } }
.landing-video-card button .video-card-copy::after { content: "\25B6\00A0\00A0Play video"; display: inline-flex; align-items: center; margin-top: .7rem; padding: .55rem 1rem; border-radius: 10px; background: linear-gradient(135deg, rgba(0, 229, 255, .16), rgba(255, 0, 223, .16)); border: 1px solid rgba(0, 229, 255, .5); color: #fff; font-size: .85rem; font-weight: 800; line-height: 1; letter-spacing: .02em; transition: background .2s ease, box-shadow .2s ease; }
.landing-video-card button:hover .video-card-copy::after { background: linear-gradient(135deg, #00c8e6, #d400c8); border-color: transparent; box-shadow: 0 0 22px rgba(0, 229, 255, .35); }
@media (prefers-reduced-motion: reduce) {
  .landing-video-card button .video-play::before { animation: none; }
  .landing-video-card:has(button):hover { transform: none; }
}