:root{
  /* Typography compliance notes: Space Grotesk (weights 500, 700) connects to Haskell's mathematical foundations while the grotesk classification anchors the sans-grotesk typography seed. Space Grotesk" (Google Fonts) at weight 500. Inter" (Google Fonts) body text (weights 400, 600); Inter's tall x-height and open counters ensure readability at all sizes while its neutrality lets Space Grotesk headlines shine. JetBrains Mono" (Google Fonts) (weight 400). Magnetic Interaction Pattern: Pattern:: Pattern:* Pattern:** Intersection Observer (NOT scroll-triggered parallax) Intersection Observer triggers. */
  --indigo:#1a1035;
  --cream:#faf3eb;
  --coral:#ff6b4a;
  --lavender:#b8a9e8;
  --orange:#ffaa33;
  --chartreuse:#a8e86b;
  --espresso:#3d2b1f;
  --burnt:#cc5438;
  --ease:cubic-bezier(0.25,0.46,0.45,0.94);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--espresso);font-family:Inter,system-ui,sans-serif;font-size:clamp(1rem,1.2vw,1.125rem);line-height:1.65;overflow-x:hidden}
.zone{position:relative;min-height:85vh;padding:clamp(4rem,8vw,7rem) clamp(1.25rem,4vw,4rem);display:flex;align-items:center;justify-content:center;overflow:hidden}
.wide-container{width:min(1200px,100%);margin:auto;text-align:center;position:relative;z-index:2}
.narrow-container{width:min(640px,100%);margin:auto;text-align:center;position:relative;z-index:2}
h1,h2,h3{font-family:"Space Grotesk",Inter,sans-serif;letter-spacing:-.02em;line-height:.95;margin:0;color:inherit}
h1{font-size:clamp(2.5rem,8vw,6.8rem);font-weight:700}
h2{font-size:clamp(2.5rem,6vw,5rem);font-weight:700;margin-bottom:1.4rem}
h3{font-size:clamp(1.35rem,2vw,1.9rem);font-weight:700;margin:.9rem 0 .4rem}
p{margin:0 0 1rem}.label{display:inline-flex;font-family:"Space Grotesk",sans-serif;font-size:clamp(.75rem,1vw,.875rem);font-weight:500;letter-spacing:.12em;text-transform:uppercase;background:rgba(250,243,235,.42);border:3px solid currentColor;border-radius:999px;padding:.35rem .8rem;margin-bottom:1.1rem;box-shadow:4px 5px 0 var(--burnt)}
.divider{height:4px;background:linear-gradient(90deg,#ff6b4a,#b8a9e8,#a8e86b)}.divider.alt{background:linear-gradient(90deg,#a8e86b,#ffaa33,#ff6b4a)}.divider.warm{background:linear-gradient(90deg,#ffaa33,#ff6b4a,#b8a9e8)}.divider.final{background:linear-gradient(90deg,#b8a9e8,#a8e86b,#ffaa33)}
.hero-zone,.farewell-zone{background:var(--indigo);color:var(--cream)}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none;z-index:1}
.lambda-field{position:absolute;inset:0;z-index:1}.lambda{position:absolute;left:var(--x);top:var(--y);font-family:"Space Grotesk";font-weight:700;font-size:calc(clamp(2rem,5vw,5rem)*var(--s));color:var(--chartreuse);opacity:.34;text-shadow:0 0 26px rgba(168,232,107,.45);animation:float calc(8s + var(--i)*.7s) ease-in-out infinite;animation-delay:calc(var(--i)*-180ms);will-change:transform}
@keyframes float{0%,100%{translate:0 0;rotate:-3deg}50%{translate:0 -34px;rotate:5deg}}
.hero-shell{position:relative;z-index:2;width:min(920px,100%);text-align:center;border:4px solid rgba(184,169,232,.75);border-radius:32px;background:linear-gradient(180deg,rgba(184,169,232,.2),rgba(255,107,74,.14));padding:clamp(2rem,5vw,4rem);box-shadow:0 0 0 8px rgba(250,243,235,.06),10px 12px 0 rgba(204,84,56,.7),inset 0 0 38px rgba(250,243,235,.1)}
.boot-tab{position:absolute;top:-22px;left:50%;translate:-50% 0;background:var(--orange);color:var(--espresso);border:4px solid var(--cream);border-radius:18px;padding:.25rem 1rem;font-family:"JetBrains Mono",monospace;font-size:.8rem;white-space:nowrap}.terminal-line{font-family:"JetBrains Mono",monospace;color:var(--chartreuse);margin-bottom:.6rem}.brand-type{display:inline-block;max-width:100%;font-family:"JetBrains Mono",monospace;color:var(--cream);filter:drop-shadow(0 0 18px rgba(255,170,51,.5));overflow:hidden;white-space:nowrap;animation:typing 1.28s steps(15,end) both,brandPop .55s 1.35s var(--ease) both}.brand-type span{font-family:"Space Grotesk"}
@keyframes typing{from{width:0}to{width:100%}}@keyframes brandPop{0%{transform:scale(.86);color:var(--chartreuse)}70%{transform:scale(1.08);color:var(--coral)}100%{transform:scale(1);color:var(--cream)}}
.monster{width:132px;height:104px;margin:1.8rem auto 1rem;background:linear-gradient(145deg,var(--lavender),var(--coral));border:5px solid var(--cream);border-radius:38% 38% 44% 44%;position:relative;box-shadow:8px 9px 0 var(--burnt),inset 0 8px 22px rgba(250,243,235,.38)}.horn{position:absolute;top:-22px;width:28px;height:34px;background:var(--chartreuse);border:5px solid var(--cream);border-radius:18px 18px 6px 6px}.horn.left{left:20px;rotate:-16deg}.horn.right{right:20px;rotate:16deg}.eye{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;background:var(--cream);border-radius:50%;margin:34px 8px 0}.eye i{display:block;width:11px;height:11px;background:var(--indigo);border-radius:50%;transform:translate(var(--eye-x,0),var(--eye-y,0))}.grin{position:absolute;left:33px;right:33px;bottom:20px;height:20px;background:var(--cream);border:4px solid var(--espresso);border-radius:0 0 28px 28px;display:flex;justify-content:center}.grin b{width:8px;height:12px;background:var(--cream);border-left:3px solid var(--espresso)}.hero-copy{max-width:620px;margin:0 auto;color:rgba(250,243,235,.88)}
.manifesto-zone{background:var(--coral);background-image:radial-gradient(rgba(61,43,31,.1) 1px,transparent 1px);background-size:8px 8px}.manifesto-line{font-size:clamp(1.1rem,1.6vw,1.35rem);opacity:0;transform:translateY(28px);transition:opacity .6s var(--ease),transform .6s var(--ease)}.is-visible .manifesto-line{opacity:1;transform:none}.is-visible .manifesto-line:nth-of-type(2){transition-delay:.1s}.is-visible .manifesto-line:nth-of-type(3){transition-delay:.2s}.is-visible .manifesto-line:nth-of-type(4){transition-delay:.3s}
.floating-badges{position:absolute;inset:0;pointer-events:none}.badge{position:absolute;font-family:"Space Grotesk";font-weight:500;font-size:.78rem;letter-spacing:.12em;color:var(--espresso);background:rgba(250,243,235,.55);border:3px solid var(--espresso);border-radius:18px;padding:.55rem .8rem;box-shadow:5px 6px 0 var(--burnt);opacity:0;transform:scale(0) rotate(var(--r))}.b1{--r:-7deg;left:9%;top:19%}.b2{--r:5deg;right:10%;top:27%}.b3{--r:8deg;left:13%;bottom:24%}.b4{--r:-4deg;right:14%;bottom:18%}.b5{--r:3deg;left:46%;top:10%}.is-visible .badge{animation:pop .55s var(--ease) forwards;animation-delay:calc(var(--n,1)*90ms)}.b1{--n:1}.b2{--n:2}.b3{--n:3}.b4{--n:4}.b5{--n:5}@keyframes pop{70%{opacity:1;transform:scale(1.1) rotate(var(--r))}100%{opacity:1;transform:scale(1) rotate(var(--r))}}
.feature-zone{background:var(--cream);background-image:radial-gradient(rgba(61,43,31,.08) 1px,transparent 1px);background-size:8px 8px}.pod-row{display:flex;gap:1.1rem;align-items:stretch;justify-content:center;margin-top:2rem}.concept-pod{flex:1;min-width:0;background:rgba(184,169,232,.34);border:4px solid var(--espresso);border-right:6px solid var(--burnt);border-bottom:6px solid var(--burnt);border-radius:24px;padding:1.3rem 1rem;opacity:0;transform:translateY(48px);transition:opacity .55s var(--ease),transform .3s var(--ease),box-shadow .55s var(--ease);box-shadow:0 0 0 rgba(204,84,56,0)}.concept-pod:nth-child(2n){background:rgba(255,170,51,.3)}.concept-pod:nth-child(3n){background:rgba(168,232,107,.3)}.is-visible .concept-pod{opacity:1;transform:translateY(0);box-shadow:8px 10px 0 rgba(204,84,56,.28)}.is-visible .concept-pod:nth-child(2){transition-delay:.12s}.is-visible .concept-pod:nth-child(3){transition-delay:.24s}.is-visible .concept-pod:nth-child(4){transition-delay:.36s}.is-visible .concept-pod:nth-child(5){transition-delay:.48s}.concept-pod svg{width:72px;height:72px;fill:none;stroke:var(--coral);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.concept-pod:nth-child(2) svg{stroke:var(--lavender)}.concept-pod:nth-child(3) svg{stroke:var(--chartreuse)}.concept-pod:nth-child(4) svg{stroke:var(--orange)}.concept-pod:nth-child(5) svg{stroke:var(--burnt)}.concept-pod p{font-size:.98rem;margin:0}
.code-zone{background:var(--orange);color:var(--espresso)}.code-case{position:relative;text-align:left;margin:2rem 0 0;padding:2rem 1.2rem 1.4rem;background:rgba(26,16,53,.86);color:var(--cream);border:5px solid var(--lavender);border-radius:26px;box-shadow:8px 10px 0 var(--burnt),inset 0 0 28px rgba(250,243,235,.08);overflow:auto;filter:blur(8px);opacity:0;transition:filter .6s var(--ease),opacity .6s var(--ease)}.code-case:before{content:"specimen.hs";position:absolute;top:0;left:0;right:0;padding:.35rem .9rem;background:var(--lavender);color:var(--indigo);font-family:"Space Grotesk";font-weight:500;letter-spacing:.12em;text-transform:uppercase;font-size:.75rem}.code-case code{display:block;margin-top:1rem;font-family:"JetBrains Mono",monospace;font-size:clamp(.875rem,1.1vw,1rem);font-feature-settings:"liga" 1;line-height:1.7}.is-visible .code-case{filter:blur(0);opacity:1}.kw{color:var(--chartreuse)}.fn{color:var(--orange)}.op{color:var(--lavender)}.str{color:var(--coral)}
.farewell-card{position:relative;z-index:2;text-align:center}.farewell-card h2{font-size:clamp(3.2rem,11vw,9rem);color:var(--cream);text-shadow:0 0 30px rgba(184,169,232,.55);transform:scale(.8);opacity:0;transition:transform .8s cubic-bezier(.2,1.4,.4,1),opacity .55s var(--ease)}.is-visible .farewell-card h2{transform:scale(1);opacity:1}.farewell-card p:last-child{font-size:clamp(1.1rem,2vw,1.5rem);color:rgba(250,243,235,.86)}
.reveal:not(.is-visible) .label,.reveal:not(.is-visible) h2{opacity:0;transform:translateY(24px)}.label,h2{transition:opacity .55s var(--ease),transform .55s var(--ease)}
@media (max-width:768px){.zone{min-height:85vh;padding:4rem 1rem}.pod-row{flex-direction:column}.lambda:nth-child(n+7){display:none}.brand-type{white-space:normal;animation:brandPop .55s var(--ease) both}.floating-badges{display:none}.concept-pod{max-width:420px;margin:auto}.monster{transform:none!important}}