/* Awake — landing v2. "Midnight garden": an immersive dark-green single-theme
   design. Space Grotesk (display) + Manrope (body) + IBM Plex Sans Arabic (RTL)
   stay from the Slingshot house system; everything else is Awake's own.
   Self-contained, no libraries. */

:root {
  --bg:        #08100a;
  --bg-2:      #0c1710;
  --ink:       #eef6ea;
  --ink-soft:  #aebfaa;
  --ink-faint: #77897a;
  --leaf:      #a3cd93;
  --leaf-2:    #6f9c64;
  --leaf-deep: #3c5f34;
  --line:      rgba(163, 205, 147, .14);
  --line-soft: rgba(163, 205, 147, .08);
  --glass:     rgba(255, 255, 255, .04);
  --glass-2:   rgba(255, 255, 255, .07);
  --nav-bg:        rgba(10, 18, 11, .55);
  --nav-bg-solid:  rgba(10, 18, 11, .82);
  --nav-menu-bg:   rgba(10, 18, 11, .96);
  --wm1: #d9ecd0; --wm2: var(--leaf);
  --well:      rgba(4, 10, 5, .5);
  --well-2:    rgba(4, 10, 5, .4);
  --track:     rgba(255, 255, 255, .08);
  --au1: #29542a; --au2: #16351f; --au3: rgba(163, 205, 147, .24);
  --sales-a: #0d1a10; --sales-b: #10231a;
  --footer-bg: rgba(4, 10, 5, .5);

  /* topic colours (match the seed taxonomy) */
  --t-ux: #a08aff; --t-ai: #d287e0; --t-inno: #ffd166; --t-entr: #ff9d5c;
  --t-biz: #6fb8ff; --t-prod: #55d6a0; --t-free: #a3cd93;

  --display: "Space Grotesk", "Manrope", -apple-system, sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r: 20px;
  color-scheme: dark;
}
:root[lang="ar"], [dir="rtl"] {
  --display: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
  --body: "IBM Plex Sans Arabic", "Manrope", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg);
  line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 0; text-wrap: balance; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { letter-spacing: 0; line-height: 1.3; }
p { margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.4rem; }

::selection { background: rgba(163,205,147,.35); }

/* ---------- aurora backdrop ---------- */
.aurora { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: var(--bg); }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.aurora .a1 { width: 54vw; height: 54vw; background: radial-gradient(circle, var(--au1), transparent 65%); top: -18vw; right: -12vw; animation: fl 26s ease-in-out infinite; }
.aurora .a2 { width: 44vw; height: 44vw; background: radial-gradient(circle, var(--au2), transparent 65%); top: 22vh; left: -16vw; animation: fl 32s ease-in-out infinite reverse; }
.aurora .a3 { width: 34vw; height: 34vw; background: radial-gradient(circle, var(--au3), transparent 60%); top: 58vh; right: 6vw; animation: fl 38s ease-in-out infinite; }
@keyframes fl { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-4vw, 3vh) scale(1.12); } }
.grain { position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .aurora i { animation: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; font-family: var(--body); font-weight: 700; font-size: .98rem; padding: .85rem 1.55rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-leaf { background: linear-gradient(135deg, var(--leaf), var(--leaf-2)); color: #0b1508; box-shadow: 0 10px 30px -10px rgba(163,205,147,.5); }
.btn-leaf:hover { box-shadow: 0 16px 40px -12px rgba(163,205,147,.65); }
.btn-ghost { background: var(--glass); color: var(--ink); border-color: var(--line); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--leaf); background: var(--glass-2); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.06rem; }
.btn-sm { padding: .55rem 1.1rem; font-size: .9rem; }
.btn .ic { width: 17px; height: 17px; }

/* ---------- nav ---------- */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 60; pointer-events: none; }
.nav-inner { pointer-events: auto; display: flex; align-items: center; gap: 1.3rem; max-width: calc(var(--wrap) - 40px); margin: 0 auto; padding: .5rem .6rem .5rem 1rem; border-radius: 999px; border: 1px solid var(--line-soft); background: var(--nav-bg); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
.nav.scrolled .nav-inner { background: var(--nav-bg-solid); border-color: var(--line); box-shadow: 0 18px 44px -18px rgba(0,0,0,.6); }
.brand { display: inline-flex; align-items: center; gap: .55rem; }
.brand img { height: 27px; width: auto; }
.brand .wm { font-family: var(--display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; background: linear-gradient(115deg, var(--wm1), var(--wm2)); -webkit-background-clip: text; background-clip: text; color: transparent; direction: ltr; unicode-bidi: isolate; }
.brand .by { font-size: .58rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); display: block; margin-top: 1px; }
.nav-links { display: flex; gap: .2rem; list-style: none; margin: 0 auto; padding: 0; }
.nav-links a { font-size: .92rem; font-weight: 600; color: var(--ink-soft); padding: .45rem .85rem; border-radius: 999px; transition: color .15s, background .15s; }
.nav-links a:hover { color: var(--ink); background: var(--glass-2); }
.nav-cta { display: flex; align-items: center; gap: .5rem; }
.nav-login { font-size: .92rem; font-weight: 600; color: var(--ink-soft); padding: .45rem .8rem; }
.nav-login:hover { color: var(--leaf); }
.lang-link { font-family: var(--display); font-size: .88rem; font-weight: 600; color: var(--ink-soft); padding: .45rem .6rem; display: inline-flex; align-items: center; gap: 5px; }
.lang-link:hover { color: var(--leaf); }
.lang-link svg { opacity: .8; }
.nav-toggle { display: none; background: none; border: 0; color: var(--ink); font-size: 1.5rem; cursor: pointer; padding: .3rem .7rem; }

/* ---------- hero ---------- */
.hero { min-height: 92vh; display: flex; flex-direction: column; justify-content: center; padding: 9.5rem 0 3rem; position: relative; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: .6rem; font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--leaf); background: rgba(163,205,147,.08); border: 1px solid var(--line); padding: .45rem 1rem; border-radius: 999px; margin-bottom: 1.6rem; }
[dir="rtl"] .hero-eyebrow { letter-spacing: .02em; }
.hero-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 12px var(--leaf); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.1rem); max-width: 21ch; }
.hero h1 .roll { display: inline-block; position: relative; color: transparent; background: linear-gradient(115deg, var(--wm2), var(--wm1) 60%, var(--wm2)); -webkit-background-clip: text; background-clip: text; }
.hero-sub { margin-top: 1.6rem; font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ink-soft); max-width: 56ch; }
.hero-sub b { color: var(--ink); font-weight: 700; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2.3rem; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 2.6rem; margin-top: 3.4rem; }
.hero-meta .m b { font-family: var(--display); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; display: block; background: linear-gradient(115deg, var(--wm1), var(--wm2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-meta .m span { font-size: .86rem; color: var(--ink-faint); font-weight: 600; }

/* ---------- thumbnail river ---------- */
.river { padding: 1.5rem 0 1rem; position: relative; overflow: hidden; max-width: 100vw; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.river-track { display: flex; gap: 1rem; width: max-content; padding: .6rem 0; animation: drift-x 66s linear infinite; }
.river-track.rev { animation: drift-x-r 78s linear infinite; }
.river:hover .river-track { animation-play-state: paused; }
.river-track { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.river-track:active { cursor: grabbing; }
.river-track .vcard { -webkit-user-drag: none; }
@keyframes drift-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes drift-x-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }
[dir="rtl"] .river-track { animation-name: drift-x-r; }
[dir="rtl"] .river-track.rev { animation-name: drift-x; }
@media (prefers-reduced-motion: reduce) { .river-track { animation: none; } }
.vcard { position: relative; width: 235px; flex: none; border-radius: 14px; overflow: hidden; border: 1px solid var(--line-soft); background: var(--bg-2); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; direction: ltr; }
.vcard:hover { transform: translateY(-6px) scale(1.03); border-color: var(--line); box-shadow: 0 24px 48px -18px rgba(0,0,0,.7); z-index: 2; }
.vcard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background:
  linear-gradient(110deg, rgba(163,205,147,.06) 30%, rgba(163,205,147,.14) 50%, rgba(163,205,147,.06) 70%) var(--bg-2);
  background-size: 200% 100%; animation: shimmer 1.6s linear infinite; }
@keyframes shimmer { from { background-position: 160% 0; } to { background-position: -60% 0; } }
@media (prefers-reduced-motion: reduce) { .vcard img { animation: none; } }
.vcard .tt { position: absolute; inset: auto 0 0 0; padding: 1.6rem .7rem .55rem; font-size: .72rem; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(4,10,5,.92)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vcard .tp { position: absolute; top: .5rem; inset-inline-start: .5rem; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .55rem; border-radius: 999px; background: rgba(4,10,5,.75); backdrop-filter: blur(6px); }
.tp.ux { color: var(--t-ux); } .tp.ai { color: var(--t-ai); } .tp.inno { color: var(--t-inno); } .tp.entr { color: var(--t-entr); } .tp.biz { color: var(--t-biz); } .tp.prod { color: var(--t-prod); } .tp.free { color: var(--t-free); }

/* ---------- sections ---------- */
.section { padding: clamp(4.2rem, 8vw, 7rem) 0; position: relative; }
.eyebrow { font-size: .78rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--leaf); margin: 0 0 1rem; }
[dir="rtl"] .eyebrow { letter-spacing: .03em; }
.section-head { max-width: 780px; margin-bottom: clamp(2rem, 4vw, 3.4rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); }
.section-head p { margin-top: 1rem; color: var(--ink-soft); font-size: 1.08rem; }

/* reveal */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ---------- topics ---------- */
.topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.topic { position: relative; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--glass); padding: 1.35rem 1.25rem 1.2rem; overflow: hidden; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.topic:hover { transform: translateY(-4px); border-color: var(--line); background: var(--glass-2); }
.topic::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--tc, var(--leaf)), transparent); opacity: .8; }
.topic .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc, var(--leaf)) 14%, transparent); color: var(--tc, var(--leaf)); margin-bottom: .85rem; }
.topic .ic svg { width: 21px; height: 21px; }
.topic h3 { font-size: 1.04rem; }
.topic p { font-size: .86rem; color: var(--ink-soft); margin-top: .45rem; line-height: 1.55; }
.topic .n { position: absolute; top: 1.1rem; inset-inline-end: 1.15rem; font-family: var(--display); font-size: .8rem; font-weight: 700; color: var(--ink-faint); }
.topic.wide { grid-column: span 2; display: flex; align-items: center; gap: 1.4rem; }
.topic.wide .ic { margin: 0; flex: none; }
.topic.wide p { margin-top: .2rem; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; counter-reset: step; }
.step { position: relative; border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--glass); padding: 1.5rem 1.3rem 1.4rem; }
.step::after { counter-increment: step; content: "0" counter(step); position: absolute; top: 1rem; inset-inline-end: 1.1rem; font-family: var(--display); font-weight: 700; font-size: 2rem; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(163,205,147,.35); }
.step h3 { font-size: 1.08rem; margin-top: .9rem; }
.step p { font-size: .89rem; color: var(--ink-soft); margin-top: .5rem; }
.step .ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(163,205,147,.1); color: var(--leaf); }
.step .ic svg { width: 20px; height: 20px; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: .9rem; }
.cell { border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--glass); padding: 1.6rem 1.5rem; position: relative; overflow: hidden; transition: border-color .2s ease, background .2s ease; }
.cell:hover { border-color: var(--line); background: var(--glass-2); }
.cell h3 { font-size: 1.12rem; }
.cell > p { font-size: .92rem; color: var(--ink-soft); margin-top: .55rem; max-width: 46ch; }
.cell.c-3 { grid-column: span 3; }
.cell.c-2 { grid-column: span 2; }
.cell.c-4 { grid-column: span 4; }

/* watch meter mock */
.meter-mock { margin-top: 1.3rem; border-radius: 14px; border: 1px solid var(--line-soft); background: var(--well); padding: 1rem 1.1rem; }
.meter-mock .row { display: flex; align-items: center; justify-content: space-between; font-size: .78rem; color: var(--ink-faint); font-weight: 600; }
.meter-mock .bar { height: 8px; border-radius: 99px; background: var(--track); margin-top: .55rem; overflow: hidden; }
.meter-mock .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--leaf-2), var(--leaf)); transition: width 1.6s cubic-bezier(.2,.7,.2,1); }
.cell.in .meter-mock .bar i { width: 90%; }
.meter-mock .cap { display: flex; justify-content: space-between; margin-top: .5rem; font-size: .72rem; color: var(--ink-faint); }
.meter-mock .cap b { color: var(--leaf); }

/* quiz mock */
.quiz-mock { margin-top: 1.3rem; display: grid; gap: .5rem; }
.quiz-mock .q { font-size: .84rem; font-weight: 700; color: var(--ink-soft); }
.quiz-mock .opt { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line-soft); border-radius: 10px; padding: .5rem .75rem; font-size: .8rem; color: var(--ink-soft); background: var(--well-2); }
.quiz-mock .opt.ok { border-color: rgba(85,214,160,.5); color: var(--ink); background: rgba(85,214,160,.08); }
.quiz-mock .opt .b { width: 15px; height: 15px; border-radius: 50%; border: 1.6px solid currentColor; flex: none; display: grid; place-items: center; font-size: .6rem; }

/* certificate mock */
.cert-mock { margin-top: 1.3rem; border-radius: 14px; border: 1px solid rgba(163,205,147,.3); background: linear-gradient(150deg, rgba(163,205,147,.12), var(--well)); padding: 1.15rem 1.2rem; position: relative; overflow: hidden; }
.cert-mock::after { content: ""; position: absolute; top: -70%; left: -30%; width: 60%; height: 240%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent); animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%, 60% { left: -40%; } 100% { left: 130%; } }
.cert-mock .ttl { font-family: var(--display); font-weight: 700; font-size: .95rem; }
.cert-mock .ser { font-size: .72rem; color: var(--ink-faint); margin-top: .3rem; letter-spacing: .08em; direction: ltr; unicode-bidi: isolate; }
.cert-mock .st { display: inline-flex; align-items: center; gap: .4rem; margin-top: .7rem; font-size: .74rem; font-weight: 800; color: #5cd6a0; }

/* score dial */
.dial { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.3rem; }
.dial svg { width: 92px; height: 92px; transform: rotate(-90deg); flex: none; }
.dial .track { fill: none; stroke: var(--track); stroke-width: 8; }
.dial .val { fill: none; stroke: url(#dialGrad); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 264; stroke-dashoffset: 264; transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1); }
.cell.in .dial .val { stroke-dashoffset: 50; }
.dial .num { font-family: var(--display); font-size: 1.7rem; font-weight: 700; color: var(--leaf); }
.dial .lbl { font-size: .8rem; color: var(--ink-faint); font-weight: 600; }

/* ---------- paths ---------- */
.paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.path { border-radius: var(--r); border: 1px solid var(--line-soft); background: var(--glass); padding: 1.5rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; transition: transform .2s ease, border-color .2s ease; }
.path:hover { transform: translateY(-4px); border-color: var(--line); }
.path .tag { align-self: flex-start; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tc, var(--leaf)); background: color-mix(in srgb, var(--tc, var(--leaf)) 12%, transparent); padding: .3rem .7rem; border-radius: 999px; }
[dir="rtl"] .path .tag { letter-spacing: .02em; }
.path h3 { font-size: 1.18rem; }
.path p { font-size: .9rem; color: var(--ink-soft); flex: 1; }
.path .meta { display: flex; gap: 1rem; font-size: .76rem; color: var(--ink-faint); font-weight: 700; border-top: 1px solid var(--line-soft); padding-top: .85rem; }
.path .meta span { display: inline-flex; align-items: center; gap: .35rem; }
.path .meta svg { width: 13px; height: 13px; color: var(--leaf); }
.path.ar-path { grid-column: span 3; flex-direction: row; align-items: center; gap: 1.6rem; background: linear-gradient(135deg, rgba(163,205,147,.07), var(--glass)); }
.path.ar-path .body { flex: 1; }
.path.ar-path h3 { font-family: "IBM Plex Sans Arabic", var(--display); }

/* ---------- sources ---------- */
.sources-band { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.src { font-size: .88rem; font-weight: 700; color: var(--ink-soft); border: 1px solid var(--line-soft); background: var(--glass); border-radius: 999px; padding: .55rem 1.1rem; transition: color .2s, border-color .2s; }
.src:hover { color: var(--ink); border-color: var(--line); }
.src.ar { font-family: "IBM Plex Sans Arabic", var(--body); }

/* ---------- contact sales ---------- */
.sales { border-radius: 26px; border: 1px solid var(--line); background:
  radial-gradient(120% 160% at 85% -20%, rgba(163,205,147,.16), transparent 55%),
  linear-gradient(150deg, var(--sales-a), var(--sales-b));
  padding: clamp(2.4rem, 5vw, 3.8rem); display: grid; grid-template-columns: 1.5fr 1fr; gap: 2rem; align-items: center; position: relative; overflow: hidden; }
.sales h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); }
.sales p { color: var(--ink-soft); margin-top: .9rem; max-width: 52ch; }
.sales-side { display: flex; flex-direction: column; gap: .8rem; align-items: stretch; }
.sales-side .btn { width: 100%; }
.sales-note { font-size: .8rem; color: var(--ink-faint); text-align: center; }

/* ---------- faq ---------- */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: .6rem; }
.faq details { border: 1px solid var(--line-soft); border-radius: 14px; background: var(--glass); overflow: hidden; transition: border-color .2s; }
.faq details[open] { border-color: var(--line); background: var(--glass-2); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.05rem 1.25rem; font-weight: 700; font-size: .98rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.3rem; color: var(--leaf); transition: transform .25s; flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 1.25rem 1.15rem; color: var(--ink-soft); font-size: .93rem; }

/* ---------- final cta ---------- */
.cta-final { text-align: center; padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem); position: relative; }
.cta-final h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); max-width: 20ch; margin: 0 auto; }
.cta-final .sub { color: var(--ink-soft); font-size: 1.1rem; margin-top: 1.2rem; }
.cta-final .hero-cta { justify-content: center; }
.cta-final .glow { position: absolute; left: 50%; top: 20%; width: 640px; height: 380px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(163,205,147,.16), transparent); pointer-events: none; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line-soft); padding: 3rem 0 2.2rem; background: var(--footer-bg); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; }
.footer h4 { font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .9rem; }
[dir="rtl"] .footer h4 { letter-spacing: .02em; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer a { color: var(--ink-soft); font-size: .92rem; }
.footer a:hover { color: var(--leaf); }
.footer-brand p { color: var(--ink-faint); font-size: .9rem; margin-top: 1rem; max-width: 30ch; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: .6rem 2rem; justify-content: space-between; border-top: 1px solid var(--line-soft); margin-top: 2.4rem; padding-top: 1.4rem; font-size: .8rem; color: var(--ink-faint); }


/* ---------- light theme ---------- */
:root[data-theme="light"] {
  --bg:        #f4f7f1;
  --bg-2:      #ffffff;
  --ink:       #1c2718;
  --ink-soft:  #51624c;
  --ink-faint: #7f8d79;
  --leaf:      #4c7a41;
  --leaf-2:    #6f9c64;
  --line:      rgba(60, 95, 52, .22);
  --line-soft: rgba(60, 95, 52, .12);
  --glass:     rgba(255, 255, 255, .65);
  --glass-2:   rgba(255, 255, 255, .92);
  --nav-bg:        rgba(255, 255, 255, .6);
  --nav-bg-solid:  rgba(255, 255, 255, .88);
  --nav-menu-bg:   rgba(255, 255, 255, .97);
  --wm1: #3c5f34; --wm2: #6f9c64;
  --well:      rgba(60, 95, 52, .07);
  --well-2:    rgba(60, 95, 52, .05);
  --track:     rgba(60, 95, 52, .14);
  --au1: rgba(111, 156, 100, .5); --au2: rgba(163, 205, 147, .45); --au3: rgba(85, 214, 160, .3);
  --sales-a: #ffffff; --sales-b: #e7f0e1;
  --footer-bg: rgba(60, 95, 52, .05);
  --t-ux: #6a4fd8; --t-ai: #a83fb8; --t-inno: #ad8500; --t-entr: #d0651f;
  --t-biz: #2a76c4; --t-prod: #1a8f62; --t-free: #4c7a41;
  color-scheme: light;
}
:root[data-theme="light"] .aurora i { opacity: .55; filter: blur(110px); }
:root[data-theme="light"] .grain { opacity: .035; }
:root[data-theme="light"] ::selection { background: rgba(111,156,100,.3); }
:root[data-theme="light"] .btn-leaf { color: #ffffff; background: linear-gradient(135deg, #6f9c64, #4c7a41); box-shadow: 0 10px 26px -10px rgba(76,122,65,.55); }
:root[data-theme="light"] .sales h2, :root[data-theme="light"] .sales p { color: inherit; }
:root[data-theme="light"] .cert-mock { border-color: rgba(76,122,65,.35); }
:root[data-theme="light"] .cert-mock::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); }
:root[data-theme="light"] .step::after { -webkit-text-stroke: 1px rgba(76,122,65,.4); }
:root[data-theme="light"] .quiz-mock .opt.ok { border-color: rgba(26,143,98,.5); background: rgba(26,143,98,.08); }
:root[data-theme="light"] .quiz-mock .opt.ok, :root[data-theme="light"] .cert-mock .st { color: #157a52; }
:root[data-theme="light"] .cta-final .glow { background: radial-gradient(closest-side, rgba(111,156,100,.22), transparent); }

/* ---------- theme toggle ---------- */
.theme-toggle { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-soft); background: transparent; color: var(--ink-soft); cursor: pointer; transition: color .15s, border-color .15s; }
.theme-toggle:hover { color: var(--leaf); border-color: var(--leaf); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .ic-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display: block; }
:root[data-theme="light"] .theme-toggle .ic-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  .topics { grid-template-columns: repeat(2, 1fr); }
  .topic.wide { grid-column: span 2; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .cell.c-2, .cell.c-3, .cell.c-4 { grid-column: span 2; }
  .paths-grid { grid-template-columns: repeat(2, 1fr); }
  .path.ar-path { grid-column: span 2; flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .sales { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .nav-links, .nav-login { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links { display: flex; position: absolute; top: calc(100% + 8px); left: 1rem; right: 1rem; flex-direction: column; background: var(--nav-menu-bg); border: 1px solid var(--line); border-radius: 18px; padding: .7rem; backdrop-filter: blur(18px); }
}
@media (max-width: 640px) {
  /* Slim mobile top bar: one-line brand, tighter pill, CTA that fits. */
  .brand .by { display: none; }
  .brand img { height: 23px; }
  .brand .wm { font-size: 1.08rem; }
  .nav-inner { gap: .45rem; padding: .4rem .45rem .4rem .85rem; }
  .nav-cta { gap: .3rem; margin-inline-start: auto; }
  .lang-link { padding: .3rem .3rem; font-size: .8rem; }
  .lang-link svg { display: none; }
  .theme-toggle { width: 30px; height: 30px; }
  .nav-cta .btn-sm { padding: .44rem .7rem; font-size: .78rem; }
  .nav-toggle { padding: .25rem .4rem; font-size: 1.3rem; }
  .nav-cta .btn-sm svg { display: none; }
  .steps, .paths-grid { grid-template-columns: 1fr; }
  .path.ar-path { grid-column: span 1; }
  .topics { grid-template-columns: 1fr; }
  .topic.wide { grid-column: span 1; flex-direction: column; align-items: flex-start; }
  .hero { padding-top: 7.5rem; }
  .hero-meta { gap: 1.6rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .vcard { width: 190px; }
}