/* Lingaloop website. Values come from the designs in site-design/.
   Colors are the tokens below (light on :root, dark on [data-theme=dark]);
   the theme is set on <html> before the first paint (see build.py). */

/* Fonts, all bundled (tool/make_assets.py): Plus Jakarta Sans 400-700 for
   text and the brand's ExtraBold for headings (as in the design), Vazirmatn
   for Persian (only Arabic-script letters; Latin falls back to Jakarta). */
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-400.woff2?v=349f00c8c7) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-500.woff2?v=2d4742ef38) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-600.woff2?v=9965fbf841) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-700.woff2?v=a07815f76c) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(fonts/jakarta-800.woff2?v=18fef1e7c4) format("woff2");font-weight:800 900;font-display:swap}
@font-face{font-family:Vazirmatn;src:url(fonts/vazirmatn-400.woff2?v=c98f486b08) format("woff2");font-weight:300 500;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:Vazirmatn;src:url(fonts/vazirmatn-700.woff2?v=5792e5d3ed) format("woff2");font-weight:600 900;font-display:swap;unicode-range:U+0600-06FF,U+200C-200F,U+FB50-FDFF,U+FE70-FEFF}

:root{
  --bg:#FFFFFF;--bg2:#F4F6FA;--surface:#FFFFFF;--ink:#17213B;--ink2:#3D4556;--ink3:#5A6378;
  --line:#E6EAF2;--line2:#DDE2EC;--acc:#2E7A67;--teal:#4BA18B;--mint:#E8F4F0;--glow:#E8F4F0;
  --block:#17213B;--block-line:#17213B;--on-block:#FFFFFF;--on-block2:#C9D0DE;--on-block-line:#3A4766;
  --btn:#17213B;--btn-ink:#FFFFFF;--btn-hover:#0B1226;--num:#E3E8F0;--logo-a:#17213B;--chip-bg:#17213B;
  --shadow:rgba(23,33,59,.35);--nav:rgba(255,255,255,.86);--cta-form:#FFFFFF;--cta-input:#F4F6FA;
  --font-brand:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-head:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-text:"Plus Jakarta Sans",system-ui,sans-serif;
  color-scheme:light;
}
:root[data-theme=dark]{
  --bg:#0D1424;--bg2:#121B30;--surface:#172139;--ink:#EEF1F7;--ink2:#B6BECF;--ink3:#8E98AE;
  --line:#232E4A;--line2:#2B3756;--acc:#6CC3A9;--mint:#16332D;--glow:#12302A;
  --block:#1A2542;--block-line:#2B3756;--on-block:#FFFFFF;--on-block2:#B6BECF;--on-block-line:#34426A;
  --btn:#4BA18B;--btn-ink:#0D1424;--btn-hover:#5BB39B;--num:#25304C;--logo-a:#EEF1F7;--chip-bg:#24335E;
  --shadow:rgba(0,0,0,.6);--nav:rgba(13,20,36,.82);--cta-form:#0D1424;--cta-input:#172139;
  color-scheme:dark;
}
:root[lang=fa]{--font-head:Vazirmatn,"Plus Jakarta Sans",system-ui,sans-serif;--font-text:Vazirmatn,"Plus Jakarta Sans",system-ui,sans-serif}

*{box-sizing:border-box}
html{scroll-padding-top:84px}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font-text);overflow-x:clip;transition:background-color .4s,color .4s;-webkit-text-size-adjust:100%}
a{color:var(--acc)}a:hover{color:var(--ink)}
input,button,select{font-family:inherit}
h1,h2,h3,.ll-h,.kicker{font-family:var(--font-head)}
input::placeholder{color:var(--ink3)}
input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #4BA18B;outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fa-word{font-family:Vazirmatn,sans-serif}

/* SVG colors that follow the theme */
.s-ink{stroke:var(--ink)}.s-acc{stroke:var(--acc)}.s-line2{stroke:var(--line2)}.s-btn-ink{stroke:var(--btn-ink)}
.s-logo{stroke:var(--logo-a)}.f-logo{fill:var(--logo-a)}
.s-knock-bg{stroke:var(--bg)}.s-knock-surface{stroke:var(--surface)}

/* ---------- Animations (from the design) ---------- */
@keyframes ll-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes ll-spin{to{transform:rotate(360deg)}}
@keyframes ll-marquee{to{transform:translateX(-50%)}}
@keyframes ll-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ll-pulse{0%{box-shadow:0 0 0 0 rgba(75,161,139,.5)}100%{box-shadow:0 0 0 16px rgba(75,161,139,0)}}
@keyframes ll-dash{to{stroke-dashoffset:-240}}
@keyframes ll-draw{from{stroke-dashoffset:180}to{stroke-dashoffset:0}}
@keyframes ll-ringdraw{from{stroke-dashoffset:943}to{stroke-dashoffset:0}}
@keyframes ll-nodeon{from{fill:var(--line2);transform:scale(.6)}to{fill:var(--teal);transform:scale(1)}}
/* The step number on a node: readable on grey, navy once the node is teal. */
@keyframes ll-numon{from{fill:var(--ink2)}to{fill:#17213B}}
@keyframes ll-win{0%{opacity:0;transform:translateY(12px)}18%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes ll-win-first{0%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes ll-win-last{0%{opacity:0;transform:translateY(12px)}18%,100%{opacity:1;transform:none}}
@keyframes ll-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes ll-twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.1)}}
.ll-float{animation:ll-float 6s ease-in-out infinite}
.ll-float2{animation:ll-float 7s ease-in-out -2s infinite}
.ll-float3{animation:ll-float 8s ease-in-out -4s infinite}
.ll-spin{animation:ll-spin 40s linear infinite;transform-origin:50% 50%}
.ll-track{animation:ll-marquee 36s linear infinite}
.ll-rise{animation:ll-rise .9s cubic-bezier(.2,.7,.2,1) both}
.ll-rise2{animation:ll-rise .9s cubic-bezier(.2,.7,.2,1) .12s both}
.ll-rise3{animation:ll-rise .9s cubic-bezier(.2,.7,.2,1) .24s both}
.ll-rise4{animation:ll-rise .9s cubic-bezier(.2,.7,.2,1) .36s both}
.ll-pulse{animation:ll-pulse 2.2s ease-out infinite}
.ll-dash{animation:ll-dash 6s linear infinite}
.ll-draw{stroke-dasharray:180;animation:ll-draw 1.6s cubic-bezier(.6,0,.2,1) .4s both}
.ll-bob{animation:ll-bob 5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
.ll-twinkle{animation:ll-twinkle 2.8s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.ll-twinkle2{animation:ll-twinkle 3.4s ease-in-out -1.2s infinite;transform-box:fill-box;transform-origin:center}
.ll-node{transform-box:fill-box;transform-origin:center}
.ll-cl{display:none}

/* Scroll-driven parts: only in browsers that support them; elsewhere the
   section shows the finished ring, the logo and the four cards stacked. */
@supports (animation-timeline: view()){
.ll-reveal{animation:ll-rise linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
.ll-loopsec{view-timeline-name:--loop;view-timeline-axis:block}
.ll-ring-draw{stroke-dasharray:943;animation:ll-ringdraw linear both;animation-timeline:--loop;animation-range:contain 0% contain 100%}
.ll-node{animation:ll-nodeon linear both;animation-timeline:--loop}
.ll-num{animation:ll-numon linear both;animation-timeline:--loop}
.ll-node1{animation-range:contain 0% contain 6%}
.ll-node2{animation-range:contain 25% contain 31%}
.ll-node3{animation-range:contain 50% contain 56%}
.ll-node4{animation-range:contain 75% contain 81%}
.ll-static{display:none !important}
.ll-cl{display:flex;animation:ll-win linear both;animation-timeline:--loop}
.ll-cl1{animation-name:ll-win-first;animation-range:contain 0% contain 25%}
.ll-cl2{animation-range:contain 25% contain 50%}
.ll-cl3{animation-range:contain 50% contain 75%}
.ll-cl4{animation-name:ll-win-last;animation-range:contain 75% contain 100%}
}
/* Wide screens: the section stays pinned while the ring fills and the step
   cards change one by one. */
@supports (animation-timeline: view()){
@media (min-width:900px) and (prefers-reduced-motion:no-preference){
.ll-pin-track{height:420vh}
.ll-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.ll-pin-inner{padding-block:96px 32px !important;gap:28px !important}
.ll-pin-inner h2{font-size:clamp(30px,3.4vw,46px) !important}
.ll-pin-row{align-items:center !important;flex-wrap:nowrap !important}
.ll-ringbox{width:min(100%,50vh) !important}
.ll-stack{position:relative;min-height:300px}
.ll-sc{position:absolute;inset:0;display:flex;align-items:center;animation:ll-win linear both;animation-timeline:--loop}
.ll-sc:nth-child(1){animation-name:ll-win-first;animation-range:contain 0% contain 25%}
.ll-sc:nth-child(2){animation-range:contain 25% contain 50%}
.ll-sc:nth-child(3){animation-range:contain 50% contain 75%}
.ll-sc:nth-child(4){animation-name:ll-win-last;animation-range:contain 75% contain 100%}
}
}

/* Hover lifts use `translate` so they also work on cards whose reveal
   animation holds `transform`. */
.ll-card{transition:translate .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.ll-card:hover{translate:0 -6px;box-shadow:0 28px 56px -28px var(--shadow)}
.ll-btn{transition:transform .2s,background-color .2s}
.ll-btn:hover{transform:translateY(-2px);background:var(--btn-hover)}
.ll-btn2{transition:transform .2s,background-color .2s}
.ll-btn2:hover{transform:translateY(-2px);background:#5BB39B}
.ll-link{transition:color .2s}.ll-link:hover{color:var(--ink)}
.ll-toggle{transition:transform .3s,background-color .2s}.ll-toggle:hover{transform:rotate(-18deg)}

[dir=rtl] .ll-h,[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{letter-spacing:0 !important;line-height:1.4 !important}
[dir=rtl] .ll-flip{transform:scaleX(-1)}
[dir=rtl] .ll-chip-l{left:auto !important;right:-2%}
[dir=rtl] .chip-4{right:auto;left:8%}

@media (prefers-reduced-motion:reduce){
.ll-float,.ll-float2,.ll-float3,.ll-spin,.ll-track,.ll-rise,.ll-rise2,.ll-rise3,.ll-rise4,.ll-pulse,.ll-dash,.ll-draw,.ll-reveal,.ll-bob,.ll-twinkle,.ll-twinkle2,.ll-node,.ll-num{animation:none !important}
.ll-ring-draw{animation:none !important;stroke-dasharray:none !important}
.ll-cl{display:none !important}
.ll-static{display:flex !important}
}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--nav);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.bar{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand span{font-family:var(--font-brand);font-size:24px;font-weight:800;letter-spacing:-0.03em}
.bar-items{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.nav-link{font-size:15px;font-weight:600;color:var(--ink2);text-decoration:none}
.lang{display:flex;gap:4px;padding:4px;background:var(--bg2);border-radius:999px}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-height:36px;min-width:44px;padding:0 12px;border-radius:999px;background:transparent;color:var(--ink2);font:700 13px var(--font-brand);text-decoration:none}
.lang a[aria-current]{background:var(--btn);color:var(--btn-ink)}
.lang a:not([aria-current]):hover{color:var(--ink)}
.toggle{width:44px;height:44px;border:1px solid var(--line2);border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--ink)}
:root[data-theme=dark] .icon-moon,:root:not([data-theme=dark]) .icon-sun{display:none}
.btn{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-size:15px;font-weight:700;text-decoration:none}
.btn:hover{color:var(--btn-ink)}
/* Phones: the section links would wrap the header into four rows, so they
   go (every section is a short scroll away) and the header scrolls away. */
@media (max-width:640px){
.site-header{position:relative}
.nav-link{display:none}
.bar-items{gap:10px}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:radial-gradient(1100px 600px at 88% 8%,var(--glow) 0%,transparent 62%),var(--bg)}
.hero-inner{max-width:1200px;margin:0 auto;padding:clamp(48px,8vw,104px) 24px clamp(56px,8vw,112px);display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.hero-copy{flex:1 1 500px;min-width:0;display:flex;flex-direction:column;gap:26px}
.badge{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;padding-block:8px;padding-inline:12px 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line2);font-size:14px;font-weight:700;color:var(--acc)}
.badge-dot{width:10px;height:10px;border-radius:50%;background:#4BA18B}
.hero-title{margin:0;font-size:clamp(44px,6.2vw,82px);line-height:1.02;font-weight:800;letter-spacing:-0.035em;color:var(--ink)}
.hero-title .accent{display:block;position:relative;color:var(--acc)}
.hero-title svg{display:block;width:min(320px,70%);height:16px;margin-top:4px}
.hero-sub{margin:0;max-width:560px;font-size:clamp(18px,1.6vw,21px);line-height:1.65;color:var(--ink2)}
.trust{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;font-size:14px;font-weight:600;color:var(--ink2)}
.trust li{display:flex;align-items:center;gap:8px}

/* Waitlist forms */
.join-form{position:relative;display:flex;flex-wrap:wrap;gap:10px;max-width:560px;padding:8px;background:var(--surface);border:1px solid var(--line2);border-radius:20px;box-shadow:0 18px 40px -24px var(--shadow)}
.join-form input[type=email]{flex:1 1 220px;min-width:0;min-height:52px;padding:0 16px;border:0;border-radius:14px;background:var(--bg2);font-size:16px;font-weight:500;color:var(--ink)}
.join-form button{flex:0 0 auto;min-height:52px;padding:0 24px;border:0;border-radius:14px;background:var(--btn);color:var(--btn-ink);font-size:16px;font-weight:700;cursor:pointer}
.join-form button[disabled]{opacity:.7;cursor:progress}
.join-form .hp{position:absolute;inset-inline-start:-10000px;width:1px;height:1px;opacity:0}
.form-error{margin:0;font-size:15px;font-weight:600;color:var(--ink)}
.form-error:empty{display:none}
.thanks{display:flex;align-items:center;gap:14px;max-width:560px;padding:18px 20px;border-radius:20px;background:var(--mint);color:var(--ink);font-size:17px;font-weight:600}
.thanks svg{flex:0 0 auto}
.thanks:focus{outline:none}
[hidden]{display:none !important}

/* Hero picture */
.hero-art{flex:1 1 420px;min-width:0;display:flex;justify-content:center}
.orbit{position:relative;width:min(100%,500px);aspect-ratio:1/1}
.orbit-ring{position:absolute;inset:0;width:100%;height:100%}
.orbit-core{position:absolute;inset:15%;border-radius:50%;background:var(--surface);box-shadow:0 40px 80px -40px var(--shadow),inset 0 0 0 1px var(--line);display:flex;align-items:center;justify-content:center}
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface);border-radius:16px;box-shadow:0 18px 40px -20px var(--shadow);border:1px solid var(--line)}
.chip-1{top:7%;left:-2%}
.chip-2{top:45%;right:-4%}
.chip-3{bottom:4%;left:4%;background:var(--block);color:var(--on-block);border-color:var(--block-line)}
.chip-4{position:absolute;top:1%;right:8%;padding:10px 16px;background:var(--surface);border-radius:999px;box-shadow:0 14px 30px -18px var(--shadow);border:1px solid var(--line);font-size:14px;font-weight:800;color:var(--acc)}
.chip-icon{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.chip-icon-navy{background:var(--chip-bg)}.chip-icon-mint{background:var(--mint)}.chip-icon-teal{background:#4BA18B}
.chip-text{display:flex;flex-direction:column}
.chip-text strong{font-size:14px}
.chip-text span{font-size:13px;color:var(--ink3)}
.chip-3 .chip-text span{color:var(--on-block2)}

/* ---------- Marquee ---------- */
.marquee{background:var(--block);color:#FFFFFF;overflow:hidden;padding:22px 0;border-block:1px solid var(--block-line)}
.marquee-track{display:flex;width:max-content;font-family:var(--font-brand);font-size:28px;font-weight:800;letter-spacing:-0.02em;white-space:nowrap}
/* Two equal halves (each with its trailing gap), so the loop has no jump. */
.marquee-half{display:flex;gap:48px;padding-inline-end:48px}
.marquee-track .dot{color:#4BA18B}
.marquee-track .fa-word{letter-spacing:0}

/* ---------- Shared section parts ---------- */
.kicker{font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
.h2{margin:0;font-size:clamp(36px,4.6vw,60px);line-height:1.05;font-weight:800;letter-spacing:-0.03em}
.h2 .accent{display:block;color:var(--acc)}
.section-head{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center}
.section-head p{margin:0;max-width:560px;font-size:18px;line-height:1.65;color:var(--ink2)}

/* ---------- How it works (the loop) ---------- */
.loop{background:var(--bg2)}
.loop-inner{max-width:1200px;width:100%;margin:0 auto;padding:clamp(64px,9vw,120px) 24px;display:flex;flex-direction:column;gap:40px}
.loop-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.loop-head>div{flex:1 1 520px;display:flex;flex-direction:column;gap:16px}
.loop-head>p{flex:0 1 400px;margin:0;font-size:18px;line-height:1.65;color:var(--ink2)}
.ll-pin-row{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start}
.ring-col{flex:1 1 380px;min-width:0;display:flex;justify-content:center}
.ll-ringbox{position:relative;width:min(100%,460px);aspect-ratio:1/1}
.ring-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.node{fill:#4BA18B;stroke:var(--bg2)}
.node-num{text-anchor:middle;font:800 14px var(--font-brand);fill:#17213B}
.ring-core{position:absolute;inset:21%;border-radius:50%;background:var(--surface);box-shadow:0 30px 60px -30px var(--shadow),inset 0 0 0 1px var(--line)}
.ring-logo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ring-label{position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18%;text-align:center}
.ring-label span{font-family:var(--font-brand);font-size:15px;font-weight:800;color:var(--acc)}
.ring-label strong{font-size:clamp(18px,2vw,24px);line-height:1.2;letter-spacing:-0.02em}
.ll-stack{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.step{width:100%;display:flex;flex-direction:column;gap:18px;padding:32px 28px;background:var(--surface);border-radius:24px;border:1px solid var(--line)}
.step-top{display:flex;align-items:center;justify-content:space-between}
.step-icon{width:56px;height:56px;border-radius:16px;background:var(--chip-bg);display:flex;align-items:center;justify-content:center}
.step-num{font-family:var(--font-brand);font-size:44px;font-weight:800;color:var(--num)}
/* A faint watermark (decorative; the ring shows the number in full contrast). */
.step-num::after{content:attr(data-n)}
.step h3{margin:0;font-size:24px;font-weight:800;letter-spacing:-0.02em}
.step p{margin:0;font-size:16px;line-height:1.65;color:var(--ink2)}
.step-dark{background:var(--block);color:var(--on-block);border-color:var(--block-line)}
.step-dark .step-icon{background:#4BA18B}
.step-dark .step-num{color:var(--on-block-line)}
.step-dark p{color:var(--on-block2)}
.loop-tail{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:17px;font-weight:700;color:var(--acc);text-align:center}

/* ---------- Why ---------- */
.why{background:var(--bg)}
.why-inner{max-width:1200px;margin:0 auto;padding:clamp(64px,9vw,120px) 24px;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.why-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:20px}
.why-copy p{margin:0;font-size:18px;line-height:1.65;color:var(--ink2)}
.btn-lg-link{align-self:flex-start;gap:10px;min-height:52px;padding:0 26px;font-size:16px}
.why-list{flex:1 1 520px;min-width:0;display:flex;flex-direction:column;gap:14px}
.why-item{display:flex;gap:20px;align-items:flex-start;padding:26px;border-radius:22px;background:var(--bg2)}
.why-icon{flex:0 0 auto;width:48px;height:48px;border-radius:14px;background:var(--surface);display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.why-item>div{display:flex;flex-direction:column;gap:6px}
.why-item h3{margin:0;font-size:20px;font-weight:800}
.why-item p{margin:0;font-size:16px;line-height:1.65;color:var(--ink2)}

/* ---------- Courses ---------- */
.courses{background:var(--bg2)}
.courses-inner{max-width:1200px;margin:0 auto;padding:clamp(64px,9vw,120px) 24px;display:flex;flex-direction:column;gap:48px}
.course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:24px}
.course{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;padding:clamp(32px,4vw,44px);border-radius:28px}
.course-tag{align-self:flex-start;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:700}
.course h3{margin:0;font-size:clamp(30px,3vw,38px);font-weight:800;letter-spacing:-0.02em;line-height:1.1}
.course h3 span{display:block}
.course p{margin:0;max-width:440px;font-size:17px;line-height:1.65}
.course-art{align-self:flex-end;width:min(260px,72%);height:auto}
.course-chips{display:flex;flex-wrap:wrap;gap:8px}
.course-chips span{padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;border:1px solid}
.course-adults{background:var(--block);border:1px solid var(--block-line);color:#FFFFFF}
.course-adults .course-tag{background:#2E3A58}
.course-adults p{color:#C9D0DE}
.course-adults .course-chips span{border-color:#3A4766}
.course-kids{background:#4BA18B;color:#17213B}
.course-kids .course-tag{background:#FFFFFF}
.course-kids p{color:#17213B}
.course-kids .course-chips span{border-color:#17213B}

/* ---------- FAQ ---------- */
.faq{background:var(--bg)}
.faq-inner{max-width:880px;margin:0 auto;padding:clamp(64px,9vw,120px) 24px;display:flex;flex-direction:column;gap:40px}
.h2-faq{font-size:clamp(36px,4.6vw,56px)}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-list details{border-radius:18px;background:var(--bg2);padding:0 24px;transition:background-color .25s}
.faq-list details[open]{background:var(--mint)}
.faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;font-size:18px;font-weight:700;list-style:none;cursor:pointer}
.faq-list summary::-webkit-details-marker{display:none}
.plus{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--surface);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;color:var(--acc);transition:transform .25s}
details[open] .plus{transform:rotate(45deg)}
.faq-list details p{margin:0 0 22px;font-size:16px;line-height:1.7;color:var(--ink2)}

/* ---------- Final call to action ---------- */
.join{background:var(--bg2);padding:0 24px clamp(64px,9vw,120px)}
.join-card{position:relative;overflow:hidden;max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,88px) clamp(24px,6vw,80px);border-radius:36px;background:var(--block);border:1px solid var(--block-line);color:#FFFFFF;display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.join-ring-a{position:absolute;left:-200px;top:-220px;opacity:.3}
.join-ring-b{position:absolute;right:-140px;bottom:-180px;opacity:.25}
.join-art{position:relative;width:min(320px,82%);height:auto}
.join-card h2{position:relative;margin:0;max-width:760px;font-size:clamp(36px,5vw,64px);line-height:1.05;font-weight:800;letter-spacing:-0.03em}
.join-card>p{position:relative;margin:0;max-width:560px;font-size:18px;line-height:1.65;color:#C9D0DE}
.join-card .join-form{width:min(100%,560px);background:var(--cta-form);border-color:var(--block-line);box-shadow:none}
.join-card .join-form input[type=email]{background:var(--cta-input)}
.join-card .join-form button{background:#4BA18B;color:#0D1424;font-weight:800}
.join-card .thanks{position:relative;padding:18px 22px;background:var(--cta-form);color:var(--ink);text-align:start}
.join-card .form-error{position:relative;color:#FFFFFF}
.join-card .join-note{font-size:14px;color:#A9B2C6}

/* ---------- Footers ---------- */
.home-footer{background:var(--bg);border-top:1px solid var(--line)}
.footer-inner{max-width:1200px;margin:0 auto;padding:40px 24px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}
.brand-small span{font-size:20px}
.footer-nav{display:flex;flex-wrap:wrap;gap:8px 28px}
.footer-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600;color:var(--ink2);text-decoration:none}
.footer-nav a[aria-current]{font-weight:700;color:var(--ink)}
.footer-nav .signin{font-weight:700;color:var(--acc)}
.footer-nav .signin:hover{color:var(--ink)}
.copy{font-size:14px;color:var(--ink3)}
.page-footer{border-top:1px solid var(--line)}
.footer-inner-page{padding:32px 24px;gap:16px}

/* ---------- Privacy, terms, support ---------- */
.page-header{border-bottom:1px solid var(--line);background:var(--bg)}
.bar-page{padding:14px 24px}
.brand-page span{font-size:22px}
.bar-actions{display:flex;align-items:center;gap:12px}
.back-home{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--bg2);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}
.back-home:hover{color:var(--ink)}
.legal-hero{background:var(--bg2);border-bottom:1px solid var(--line)}
.legal-hero-inner{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,88px) 24px;display:flex;flex-direction:column;gap:14px}
.legal-hero h1,.support-hero h1{margin:0;font-size:clamp(40px,5.4vw,68px);line-height:1.04;font-weight:800;letter-spacing:-0.035em}
.legal-hero p{margin:0;max-width:640px;font-size:18px;line-height:1.65;color:var(--ink2)}
.legal-hero .updated{font-size:14px;color:var(--ink3)}
.legal{max-width:1200px;margin:0 auto;padding:clamp(40px,6vw,80px) 24px;display:flex;flex-wrap:wrap;gap:56px;align-items:flex-start}
.toc{flex:1 1 220px;max-width:280px;display:flex;flex-direction:column;gap:4px;padding:20px;border-radius:20px;background:var(--bg2)}
.toc span{padding:0 10px 8px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.toc a{display:flex;align-items:center;min-height:40px;padding:0 10px;border-radius:10px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.legal-body{flex:999 1 560px;min-width:0;max-width:760px;display:flex;flex-direction:column;gap:48px;font-size:17px;line-height:1.75;color:var(--ink2)}
.legal-body>section{display:flex;flex-direction:column;gap:14px}
.legal-body h2{margin:0;font-size:28px;line-height:1.2;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.legal-body p{margin:0}
.legal-body ul{margin:0;padding-inline-start:22px;display:flex;flex-direction:column;gap:10px}
.legal-body ul.tight{gap:8px}
.legal-body strong{color:var(--ink)}
.legal-body a{font-weight:700}
.legal-body>.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.facts>div{padding:22px;border-radius:18px;background:var(--mint);display:flex;flex-direction:column;gap:6px}
.facts strong{font-size:17px;color:var(--ink)}
.facts span{font-size:15px;line-height:1.6}
.facts-small{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.facts-small>div{padding:20px;border-radius:16px;gap:4px}
.facts-small strong{font-size:inherit}
.facts-small span{line-height:1.55}
.legal-body>.contact{gap:16px;padding:32px;border-radius:24px;background:var(--block);color:#C9D0DE}
.contact h2{color:#FFFFFF}
.contact a{color:#FFFFFF}

.support-hero{position:relative;overflow:hidden;background:var(--block);color:#FFFFFF;border-bottom:1px solid var(--line)}
.support-ring{position:absolute;right:-180px;top:-200px;opacity:.3}
.support-hero-inner{position:relative;max-width:1200px;margin:0 auto;padding:clamp(56px,8vw,104px) 24px;display:flex;flex-direction:column;gap:16px}
.support-hero .kicker{color:#4BA18B}
.support-hero p{margin:0;max-width:600px;font-size:18px;line-height:1.65;color:#C9D0DE}
.support-topics{background:var(--bg2)}
.topics{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,88px) 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:20px}
.topic{display:flex;flex-direction:column;gap:14px;padding:30px 28px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.topic-icon{width:52px;height:52px;border-radius:16px;background:var(--chip-bg);display:flex;align-items:center;justify-content:center}
.topic h2{margin:0;font-size:22px;font-weight:800;letter-spacing:-0.02em}
.topic p{margin:0;font-size:16px;line-height:1.65;color:var(--ink2)}
.topic a{font-weight:700}
.support-help{background:var(--bg)}
.help-wrap{max-width:1200px;margin:0 auto;padding:clamp(48px,7vw,88px) 24px}
.help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px;padding:clamp(32px,5vw,56px);border-radius:32px;background:var(--mint)}
.help-copy{flex:1 1 420px;display:flex;flex-direction:column;gap:10px}
.help h2{margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.1;font-weight:800;letter-spacing:-0.03em}
.help p{margin:0;font-size:17px;line-height:1.65;color:var(--ink2)}
.help-mail{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 28px;border-radius:999px;background:var(--btn);color:var(--btn-ink);font-size:16px;font-weight:700;text-decoration:none}
.help-mail:hover{color:var(--btn-ink)}