/* KOOSY Education Kit — Landing Page */

/* ── HERO ── */
.hero{position:relative;height:100vh;height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding-top:var(--nav-h)}
.hero__bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% 40%,rgba(59,130,246,0.06) 0%,transparent 60%),radial-gradient(ellipse 60% 80% at 30% 70%,rgba(139,92,246,0.03) 0%,transparent 50%),var(--bg)}
.hero__bg::after{content:'';position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px;opacity:0.4;pointer-events:none}
.hero__content{position:relative;z-index:1;text-align:center;padding:0 var(--gutter)}
.hero__brand{font-size:clamp(4rem,14vw,12rem);font-weight:var(--w-thin);letter-spacing:0.4em;text-transform:uppercase;line-height:0.9;margin-right:-0.4em;animation:fadeIn 1.2s var(--ease-out) 0.3s both;font-family:var(--font-mono)}
.hero__tagline{font-size:var(--text-small);font-weight:var(--w-light);letter-spacing:var(--ls-widest);text-transform:lowercase;color:var(--text-3);margin-top:var(--sp-6);animation:fadeIn 1s var(--ease-out) 0.8s both}
.hero__line{width:1px;height:48px;background:linear-gradient(to bottom,var(--text-3),transparent);margin:var(--sp-8) auto 0;animation:fadeIn 1s var(--ease-out) 1.2s both}

/* ── CHANNEL GRID ── */
.channels-section{padding:0}
.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border)}
.channel-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:var(--sp-10) var(--sp-8);min-height:50vh;background:var(--bg);overflow:hidden;transition:background var(--dur-normal) ease;cursor:pointer}
.channel-card:hover{background:var(--elevated)}
.channel-card__num{position:absolute;top:var(--sp-8);right:var(--sp-8);font-size:clamp(4rem,10vw,8rem);font-weight:var(--w-black);line-height:0.85;color:transparent;-webkit-text-stroke:1px var(--border-bold);user-select:none;transition:-webkit-text-stroke-color var(--dur-normal) ease}
.channel-card:hover .channel-card__num{-webkit-text-stroke-color:var(--text-3)}
.channel-card__label{font-size:var(--text-micro);font-weight:var(--w-medium);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-3);margin-bottom:var(--sp-3)}
.channel-card__name{font-size:var(--text-h1);font-weight:var(--w-bold);letter-spacing:var(--ls-tight);line-height:var(--lh-tight);margin-bottom:var(--sp-3);transition:color var(--dur-normal) ease}
.channel-card:hover .channel-card__name{color:var(--accent)}
.channel-card__desc{font-size:var(--text-small);font-weight:var(--w-light);color:var(--text-2);max-width:320px}
.channel-card__arrow{position:absolute;bottom:var(--sp-8);right:var(--sp-8);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--r-full);font-size:var(--text-small);color:var(--text-3);transition:all var(--dur-normal) var(--ease-out)}
.channel-card:hover .channel-card__arrow{background:var(--text);color:var(--bg);border-color:var(--text);transform:scale(1.1)}
@media(min-width:1280px){.channel-grid{grid-template-columns:repeat(4,1fr)}.channel-card{min-height:40vh}}
@media(max-width:768px){.channel-grid{grid-template-columns:1fr}.channel-card{min-height:40vh;padding:var(--sp-8) var(--sp-6)}.channel-card__num{font-size:4rem;top:var(--sp-6);right:var(--sp-6)}}

/* ── STATEMENT ── */
.statement{padding:var(--sp-32) var(--gutter);max-width:var(--max-w);margin:0 auto}
.statement__text{font-size:var(--text-hero);font-weight:var(--w-thin);line-height:var(--lh-snug);letter-spacing:var(--ls-tight)}
.statement__text em{font-style:normal;color:var(--accent);font-weight:var(--w-light)}
@media(max-width:768px){.statement{padding:var(--sp-20) var(--gutter)}}

/* ── MARQUEE ── */
.marquee{overflow:hidden;white-space:nowrap;padding:var(--sp-6) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.marquee__inner{display:inline-flex;animation:marquee 30s linear infinite}
.marquee__item{font-size:var(--text-xs);font-weight:var(--w-medium);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-3);padding:0 var(--sp-10)}