/* =========================================================
   ANTO — design system
   Dark, editorial, TAO-violet. The character is the star.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,400;0,500;0,600;0,800;0,900&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  /* Anto's shell, sampled straight from the render (assets/img/anto-source.jpg):
     a neutral graphite, a touch cooler than it is warm. The whole page is built
     out of these four tones instead of a flat black. */
  --shell-0:#040606;   /* the deepest crease */
  --shell-1:#141617;   /* the body in shadow */
  --shell-2:#222425;   /* the body in half light */
  --shell-3:#313233;   /* where the light lands */

  /* ink: surfaces, from the same greys */
  --ink-0:#050607;
  --ink-1:#0A0B0D;
  --ink-2:#121416;
  --ink-3:#1B1D20;
  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.14);

  /* tao violet */
  --v:#7A5CFF;
  --v-lite:#B4A0FF;
  --v-deep:#2A1B63;
  --v-glow:rgba(122,92,255,.55);

  /* type */
  --white:#F2F0FA;
  --muted:#8C88A6;
  --muted-2:#5D5A73;

  --display:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --maxw:1280px;
  --gut:clamp(20px,4vw,64px);
  --nav-h:68px;

  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:not(.no-smooth){scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-0);
  color:var(--white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--v);color:#fff}

/* ---------- ambient background: Anto's shell, then grain and glow ----------
   The gradient is the shading of the character himself: light landing on top,
   the deep crease across the middle, a half-lit graphite at the bottom. It is
   fixed, so a long page never drags it into visible banding. */
.bg-fx{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(118% 62% at 50% -10%, rgba(49,50,51,.85) 0%, rgba(49,50,51,0) 62%),
    radial-gradient(75% 55% at 8% 104%,   rgba(34,36,37,.75) 0%, rgba(34,36,37,0) 62%),
    radial-gradient(66% 48% at 94% 74%,   rgba(20,22,23,.85) 0%, rgba(20,22,23,0) 64%),
    linear-gradient(178deg, var(--shell-1) 0%, var(--shell-0) 42%, #07090A 66%, #101213 100%);
}
.bg-fx::after{ /* grain */
  content:"";position:absolute;inset:0;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aura{position:fixed;border-radius:50%;filter:blur(90px);opacity:.5;pointer-events:none;z-index:0}
.aura--1{width:60vw;height:60vw;max-width:820px;max-height:820px;top:-22vw;left:-12vw;background:radial-gradient(circle,rgba(122,92,255,.32),transparent 62%)}
.aura--2{width:46vw;height:46vw;max-width:620px;max-height:620px;bottom:-16vw;right:-10vw;background:radial-gradient(circle,rgba(122,92,255,.18),transparent 62%)}
#dust{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}
main,header,footer{position:relative;z-index:1}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
section[id]{scroll-margin-top:calc(var(--nav-h) + 14px)}
.sec{padding-block:clamp(90px,13vw,180px)}
.sec--tight{padding-block:clamp(64px,8vw,110px)}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* ---------- type ---------- */
.eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--v-lite);display:flex;align-items:center;gap:10px;margin:0 0 22px;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--v);opacity:.7}
.eyebrow--plain::before{display:none}

h1,h2,h3,h4,.d1,.d2,.d3,.d4{font-family:var(--display);font-weight:900;letter-spacing:-.045em;line-height:.92;margin:0;text-transform:uppercase}
.d1{font-size:clamp(48px,9.2vw,132px)}
.d2{font-size:clamp(38px,6.6vw,96px)}
.d3{font-size:clamp(28px,4vw,58px)}
.d4{font-size:clamp(20px,2.2vw,30px);letter-spacing:-.03em}
.lede{font-size:clamp(17px,1.5vw,21px);color:var(--muted);max-width:56ch;line-height:1.55}
.small{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.dim{color:var(--muted)}
.vio{color:var(--v-lite)}
.stroke-txt{color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.34)}

/* ---------- buttons ---------- */
.btn{
  --bg:transparent;--fg:var(--white);--bd:var(--line-2);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 26px;border-radius:999px;border:1px solid var(--bd);background:var(--bg);color:var(--fg);
  font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  cursor:pointer;overflow:hidden;transition:transform .35s var(--ease),border-color .3s,background .3s,color .3s;
}
.btn span{position:relative;z-index:1}
.btn:hover{transform:translateY(-2px);border-color:var(--v)}
.btn--primary{--bg:var(--v);--fg:#fff;--bd:transparent;box-shadow:0 10px 40px -12px var(--v-glow)}
.btn--primary:hover{box-shadow:0 18px 54px -14px var(--v-glow)}
.btn--ghost:hover{background:rgba(122,92,255,.1)}
.btn--sm{padding:11px 18px;font-size:11px}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;height:var(--nav-h);
  display:flex;align-items:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:rgba(4,4,7,.55);border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
.nav.is-stuck{background:rgba(4,4,7,.86);border-bottom-color:var(--line)}
.nav__in{display:flex;align-items:center;gap:28px;width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:900;letter-spacing:-.03em;font-size:18px;text-transform:uppercase}
.brand__dot{width:9px;height:9px;border-radius:50%;background:var(--v);box-shadow:0 0 14px var(--v-glow);animation:pulse 2.6s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.nav__links{display:flex;gap:4px;margin-left:auto}
.nav__links a{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:9px 13px;border-radius:8px;transition:color .25s,background .25s;position:relative;white-space:nowrap;
}
.nav__links a:hover{color:var(--white);background:rgba(255,255,255,.05)}
.nav__links a.is-active{color:var(--white)}
.nav__links a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:3px;height:1px;background:var(--v);
  transform:scaleX(0);transform-origin:0 50%;opacity:0;
  transition:transform .35s var(--ease),opacity .2s linear;
}
.nav__links a.is-active::after{transform:scaleX(1);opacity:1}
.nav__cta{margin-left:18px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:10px;padding:9px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;cursor:pointer}
@media(max-width:940px){
  .nav__in{gap:12px}
  .nav__links{position:fixed;inset:var(--nav-h) 0 auto;flex-direction:column;gap:0;background:rgba(6,6,11,.98);
    border-bottom:1px solid var(--line);padding:12px var(--gut) 26px;display:none}
  .nav__links.is-open{display:flex}
  .nav__links a{font-size:15px;padding:14px 0;letter-spacing:.1em}
  /* the one button that matters keeps its place: buy, then the menu */
  .nav__cta{order:2;margin-left:auto;padding:13px 16px;font-size:10.5px;letter-spacing:.12em}
  .burger{display:block;order:3;margin-left:0;padding:12px 13px}
}
@media(max-width:380px){
  .nav__cta{padding:12px 12px;font-size:10px;letter-spacing:.08em}
  .brand{font-size:16px}
}

/* ---------- marquee ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;background:rgba(122,92,255,.045);padding-block:16px}
.marquee__track{display:flex;width:max-content;animation:slide 38s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__track span{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;
  font-size:clamp(18px,2.4vw,30px);padding-inline:22px;display:flex;align-items:center;gap:22px;white-space:nowrap;color:rgba(242,240,250,.9)
}
.marquee__track span i{width:6px;height:6px;border-radius:50%;background:var(--v);display:inline-block;font-style:normal}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- anto character ---------- */
.anto{position:relative;display:inline-block;line-height:0;will-change:transform}
.anto{--rim1:rgba(205,190,255,.75);--rim2:rgba(122,92,255,.5)}
.anto img{
  width:100%;height:auto;position:relative;z-index:2;
  /* Anto is matte black: the violet rim-light lifts his silhouette off the background */
  filter:drop-shadow(0 0 1.5px var(--rim1)) drop-shadow(0 0 16px var(--rim2))
         drop-shadow(0 30px 40px rgba(0,0,0,.75));
  transform-origin:50% 92%;
}
.anto--float img{animation:float 6.5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}25%{transform:translateY(-12px) rotate(.7deg)}50%{transform:translateY(-6px) rotate(0deg)}75%{transform:translateY(-16px) rotate(-.7deg)}}
.anto__halo{
  position:absolute;left:50%;top:52%;translate:-50% -50%;
  width:118%;aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(122,92,255,.42) 0%,rgba(122,92,255,.14) 40%,transparent 66%);
  filter:blur(14px);animation:breathe 7s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.75;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}}
.anto__shadow{
  position:absolute;left:50%;bottom:-4%;translate:-50% 0;width:56%;height:26px;z-index:1;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.7),transparent 70%);
  filter:blur(9px);animation:shadow 6.5s ease-in-out infinite;
}
@keyframes shadow{0%,100%{opacity:.75;width:56%}50%{opacity:.5;width:46%}}
.anto.is-clicked img{animation:hop .6s var(--ease)}
@keyframes hop{0%{transform:translateY(0) scale(1)}30%{transform:translateY(-38px) scale(1.04,.96)}60%{transform:translateY(0) scale(.96,1.05)}100%{transform:translateY(0) scale(1)}}

/* speech bubble: it shows up in a different spot every time.
   Each variant places the bubble AND its tail; the JS falls back to the
   mirrored variant, then to --tc, if the bubble would leave the screen.       */
.anto__bubble{
  position:absolute;z-index:5;
  background:var(--white);color:#0A0912;border-radius:14px;padding:10px 14px;
  font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:-.02em;text-transform:uppercase;
  line-height:1.12;text-align:center;white-space:normal;text-wrap:balance;
  width:max-content;max-width:min(300px,58vw);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.8);
  opacity:0;transform:translateY(8px) scale(.92);
  transition:opacity .3s var(--ease),transform .3s var(--ease);pointer-events:none;
}
.anto__bubble::after{content:"";position:absolute;width:0;height:0;border:8px solid transparent}
.anto__bubble.is-on{opacity:1;transform:translateY(0) scale(1)}

/* above, centered */
.anto__bubble--tc{left:50%;right:auto;top:auto;bottom:calc(100% - 4%);translate:-50% 0;transform-origin:50% 100%}
.anto__bubble--tc::after{left:calc(50% - 8px);right:auto;top:auto;bottom:-7px;border-top-color:var(--white);border-bottom:0}
/* above, shifted left */
.anto__bubble--tl{right:50%;left:auto;top:auto;bottom:calc(100% - 16%);translate:0 0;transform-origin:100% 100%}
.anto__bubble--tl::after{right:20px;left:auto;top:auto;bottom:-7px;border-top-color:var(--white);border-bottom:0}
/* above, shifted right */
.anto__bubble--tr{left:50%;right:auto;top:auto;bottom:calc(100% - 16%);translate:0 0;transform-origin:0 100%}
.anto__bubble--tr::after{left:20px;right:auto;top:auto;bottom:-7px;border-top-color:var(--white);border-bottom:0}
/* on the left side */
.anto__bubble--ml{right:calc(100% - 16%);left:auto;top:20%;bottom:auto;translate:0 0;transform-origin:100% 50%}
.anto__bubble--ml::after{right:-7px;left:auto;top:calc(50% - 8px);bottom:auto;border-left-color:var(--white);border-right:0}
/* on the right side */
.anto__bubble--mr{left:calc(100% - 16%);right:auto;top:20%;bottom:auto;translate:0 0;transform-origin:0 50%}
.anto__bubble--mr::after{left:-7px;right:auto;top:calc(50% - 8px);bottom:auto;border-right-color:var(--white);border-left:0}

@media(max-width:760px){.anto__bubble{font-size:12px;padding:8px 11px;max-width:min(220px,64vw)}}

/* ---------- hero ---------- */
.hero{min-height:calc(100svh - var(--nav-h));display:flex;align-items:center;padding-block:clamp(40px,7vw,80px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center;width:100%}
.hero h1{margin-bottom:6px;font-size:clamp(42px,6.2vw,92px)}
.hero h1 .l2{display:block;color:var(--muted);font-size:.5em;letter-spacing:-.035em;margin-top:.22em;line-height:.98}
.hero__punch{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  font-size:clamp(20px,2.6vw,34px);color:var(--v-lite);margin:26px 0 0;
}
.hero__sub{margin:14px 0 34px;max-width:44ch}
.hero__foot{display:flex;align-items:center;gap:16px;margin-top:26px;flex-wrap:wrap}
.hero__foot .small + .small::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
  background:var(--v);margin-right:14px;vertical-align:middle;opacity:.8}
.hero__anto{position:relative;display:flex;justify-content:center}
.hero__anto .anto{width:min(100%,46vh,470px)}
.scroll-hint{
  position:absolute;left:var(--gut);bottom:26px;display:flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);
}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--v),transparent);animation:drop 2.2s infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:940px){
  .hero__grid{grid-template-columns:1fr;text-align:left}
  .hero__anto{order:-1}
  .hero__anto .anto{width:min(52%,34vh,240px)}
  .hero h1 .l2{font-size:.58em}
  .scroll-hint{display:none}
}

/* --- E8: the root system, at the centre of the hero --- */
.hero{position:relative;overflow:hidden}
.hero > .wrap{position:relative;z-index:2}
.e8{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(120%,86vh,1120px);aspect-ratio:1;z-index:0;pointer-events:none;
  /* the lines are white: the violet aura makes them look like they emit light */
  filter:drop-shadow(0 0 2px rgba(165,125,255,1)) drop-shadow(0 0 8px rgba(122,92,255,.45));
  will-change:filter;
  opacity:0;animation:e8-in .45s linear forwards;
}
.e8.is-unsupported{display:none}
@keyframes e8-in{to{opacity:1}}
/* dark veil on the text side: the headline must stay readable over the lattice */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,var(--ink-0) 6%,rgba(4,4,7,.86) 32%,rgba(4,4,7,.25) 55%,rgba(4,4,7,0) 70%);
}
@media(max-width:940px){
  .e8{width:min(150%,62vh,700px);top:30%}
  .hero__scrim{background:linear-gradient(180deg,rgba(4,4,7,0) 22%,rgba(4,4,7,.8) 46%,var(--ink-0) 62%)}
}

/* floating glyphs */
.glyphs{position:absolute;inset:0;pointer-events:none;z-index:1}
.glyphs b{
  position:absolute;font-family:var(--mono);font-weight:400;color:rgba(180,160,255,.34);
  font-size:13px;letter-spacing:.1em;animation:drift 12s ease-in-out infinite;
}
@keyframes drift{0%,100%{transform:translate(0,0);opacity:.25}50%{transform:translate(6px,-18px);opacity:.8}}

/* ---------- whisper (micro-interaction) ---------- */
.wh{position:relative;cursor:help;border-bottom:1px dashed rgba(180,160,255,.4)}
.wh::after{
  content:attr(data-wh);position:absolute;left:50%;bottom:calc(100% + 12px);translate:-50% 0;
  background:var(--white);color:#0A0912;padding:7px 12px;border-radius:9px;white-space:nowrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
  opacity:0;transform:translateY(6px);transition:.25s var(--ease);pointer-events:none;z-index:20;
  box-shadow:0 14px 34px -12px rgba(0,0,0,.9);
}
.wh:hover::after{opacity:1;transform:translateY(0)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.rv-1{transition-delay:.08s}.rv-2{transition-delay:.16s}.rv-3{transition-delay:.24s}
.rv-4{transition-delay:.32s}.rv-5{transition-delay:.4s}.rv-6{transition-delay:.48s}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  *{animation-duration:.001ms!important;animation-iteration-count:1!important}
  html{scroll-behavior:auto}
}

/* ---------- split section (who is anto) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,90px);align-items:center}
.split--rev .split__media{order:2}
.split__media{display:flex;justify-content:center}
.split__media .anto{width:min(100%,380px)}
.split__media .eyes{width:100%}
@media(max-width:940px){.split{grid-template-columns:1fr}.split--rev .split__media{order:0}}
.stack-lines p{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.035em;
  font-size:clamp(20px,2.5vw,32px);line-height:1.08;margin:0 0 14px;color:var(--muted)}
.stack-lines p.on{color:var(--white)}
.tao-good{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;
  font-size:clamp(56px,11vw,150px);line-height:.85;margin:34px 0 0;
  background:linear-gradient(180deg,#fff 0%,var(--v-lite) 60%,var(--v) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ---------- story ---------- */
.story{position:relative}
.story__sticky{position:sticky;top:calc(var(--nav-h) + 40px);height:min(60vh,520px);display:flex;align-items:center;justify-content:center}
.story__stage{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.story__stage > .anto{width:min(58%,300px);position:relative;z-index:2}
.story__steps{display:grid;gap:clamp(50px,11vh,120px);padding-block:10vh}
.story__step{max-width:min(100%,520px)}
.story__step .n{font-family:var(--mono);font-size:11px;letter-spacing:.24em;color:var(--v-lite);display:block;margin-bottom:14px}
.story__step p{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(24px,3vw,40px);line-height:1;margin:0}
.story__step em{display:block;margin-top:14px;font-style:normal;color:var(--muted);
  font-size:clamp(15px,1.35vw,17px);line-height:1.55;max-width:44ch}
.story__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,6vw,80px);align-items:start}

/* the colony appears when the story names it */
.story__swarm{position:absolute;inset:0;z-index:1;pointer-events:none}
.story__swarm .anto{position:absolute;width:24%;opacity:0;transform:scale(.55) translateY(18px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * .13s)}
.story__swarm .anto img{filter:drop-shadow(0 0 1px var(--rim1)) drop-shadow(0 0 9px var(--rim2))}
.story__swarm .anto:nth-child(1){left:-2%;bottom:4%}
.story__swarm .anto:nth-child(2){right:-2%;bottom:8%;width:22%}
.story__swarm .anto:nth-child(3){left:12%;top:0;width:17%}
.story__swarm .anto:nth-child(4){right:9%;top:4%;width:19%}
.story__stage.is-swarm .story__swarm .anto{opacity:.8;transform:none}
@media(max-width:940px){
  .story__grid{grid-template-columns:1fr}
  .story__sticky{height:34vh;top:calc(var(--nav-h) + 12px)}
  .story__stage > .anto{width:min(34%,150px)}
  .story__swarm .anto{width:22%}
}

/* ---------- manifesto ---------- */
.manifest{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.manifest__cell{
  background:var(--ink-0);padding:clamp(30px,4.4vw,60px);min-height:230px;
  display:flex;flex-direction:column;justify-content:space-between;gap:20px;position:relative;overflow:hidden;
  transition:background .4s var(--ease);
}
.manifest__cell:hover{background:var(--ink-2)}
.manifest__cell:hover .manifest__idx{color:var(--v-lite)}
.manifest__cell b{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;
  font-size:clamp(23px,2.9vw,40px);line-height:.96;display:block}
.manifest__idx{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted-2);transition:color .3s}
.manifest__cell::after{
  content:"";position:absolute;right:-40%;bottom:-60%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(122,92,255,.22),transparent 65%);opacity:0;transition:opacity .5s var(--ease)
}
.manifest__cell:hover::after{opacity:1}
.manifest__cell--wide{grid-column:1 / -1;min-height:190px}
@media(max-width:760px){.manifest{grid-template-columns:1fr}.manifest__cell{min-height:180px}}

/* ---------- colony ---------- */
.colony-row{display:flex;justify-content:center;align-items:flex-end;gap:clamp(4px,1.6vw,24px);flex-wrap:nowrap;margin-top:20px}
.colony-row .anto{width:clamp(40px,7vw,92px);flex:0 0 auto}
.colony-row .anto img{filter:drop-shadow(0 0 1.2px var(--rim1)) drop-shadow(0 0 12px var(--rim2)) drop-shadow(0 14px 20px rgba(0,0,0,.6))}
.colony-row .anto:nth-child(odd) img{animation-duration:5.2s}
.colony-row .anto:nth-child(3){width:clamp(64px,11vw,140px)}
.colony-row .anto:nth-child(even) img{opacity:.82}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{
  border:1px solid var(--line);border-radius:18px;padding:26px;background:linear-gradient(180deg,rgba(255,255,255,.028),transparent);
  display:flex;flex-direction:column;gap:12px;transition:border-color .35s,transform .35s var(--ease),background .35s;
}
.card:hover{border-color:rgba(122,92,255,.55);transform:translateY(-4px);background:linear-gradient(180deg,rgba(122,92,255,.09),transparent)}
.card h3{font-size:clamp(19px,2vw,25px)}
.card p{margin:0;color:var(--muted);font-size:15px}
.card__go{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--v-lite);display:flex;align-items:center;gap:8px}
.card:hover .card__go span{transform:translateX(4px)}
.card__go span{transition:transform .3s var(--ease);display:inline-block}
.card__go em{font-style:normal}
.card--soon{opacity:.6}
.card--soon:hover{transform:none;border-color:var(--line)}

/* ---------- token ---------- */
.token{border:1px solid var(--line);border-radius:24px;overflow:hidden;background:
  radial-gradient(90% 120% at 50% -20%,rgba(122,92,255,.16),transparent 60%),var(--ink-1)}
.token__head{padding:clamp(34px,5vw,62px);text-align:center;border-bottom:1px solid var(--line)}
.token__logo{font-family:var(--display);font-weight:900;letter-spacing:-.06em;font-size:clamp(58px,12vw,160px);line-height:.85;
  background:linear-gradient(180deg,#fff,var(--v-lite));-webkit-background-clip:text;background-clip:text;color:transparent}
.token__rows{display:grid;grid-template-columns:repeat(2,1fr)}
.token__row{padding:26px clamp(22px,3.4vw,40px);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.token__row:nth-child(odd){border-right:1px solid var(--line)}
.token__row dt{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.token__row dd{margin:0;font-family:var(--mono);font-size:15px;color:var(--white);word-break:break-all;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tag{display:inline-block;border:1px dashed rgba(180,160,255,.4);color:var(--v-lite);border-radius:6px;padding:3px 9px;font-size:11px;letter-spacing:.14em}
.copy{border:1px solid var(--line-2);background:none;border-radius:7px;padding:5px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;color:var(--muted);transition:.25s}
.copy:hover{color:var(--white);border-color:var(--v)}
.token__foot{padding:26px clamp(22px,3.4vw,40px);display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:space-between}
@media(max-width:760px){.token__rows{grid-template-columns:1fr}.token__row:nth-child(odd){border-right:0}}

/* ---------- roadmap ---------- */
.rm{position:relative;padding-left:clamp(28px,7vw,110px)}
.rm__spine{position:absolute;left:clamp(6px,2.2vw,34px);top:0;bottom:0;width:2px;background:var(--line);overflow:hidden;border-radius:2px}
.rm__fill{position:absolute;top:0;left:0;width:100%;height:0;background:linear-gradient(180deg,var(--v-lite),var(--v));box-shadow:0 0 18px var(--v-glow)}
.rm__item{position:relative;padding-block:clamp(34px,5vw,62px);border-bottom:1px solid var(--line)}
.rm__item:last-child{border-bottom:0}
.rm__dot{position:absolute;left:calc(clamp(28px,7vw,110px) * -1 + clamp(6px,2.2vw,34px) - 6px);top:calc(clamp(34px,5vw,62px) + 12px);
  width:14px;height:14px;border-radius:50%;background:var(--ink-0);border:2px solid var(--line-2);transition:.5s var(--ease)}
.rm__item.is-in .rm__dot{border-color:var(--v);background:var(--v);box-shadow:0 0 0 6px rgba(122,92,255,.16),0 0 20px var(--v-glow)}
.rm__top{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:10px}
.rm__cap{font-family:var(--mono);font-size:clamp(13px,1.5vw,17px);font-weight:700;letter-spacing:.14em;color:var(--v-lite)}
.rm__pill{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted-2);
  border:1px solid var(--line);border-radius:999px;padding:5px 11px;white-space:nowrap}
.rm__title{font-size:clamp(26px,4.4vw,60px)}
.rm__body{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(16px,4vw,50px);align-items:start;margin-top:16px}
.rm__tasks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rm__tasks li{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;transition:.3s}
.rm__item:hover .rm__tasks li{border-color:var(--line-2);color:var(--white)}
.meter{display:flex;flex-direction:column;gap:9px}
.meter__label{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.meter__bar{height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.meter__bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--v),var(--v-lite));transition:width 1.3s var(--ease)}
.rm__item.is-in .meter__bar i{width:var(--p)}
/* the only milestone meant literally: it has to stand out immediately */
.rm__item--real{background:linear-gradient(90deg,rgba(122,92,255,.10),transparent 58%)}
.rm__item--real .rm__title{color:var(--v-lite)}
.rm__item--real .rm__cap{color:var(--white)}
.rm__item--real .rm__dot{border-color:var(--v);background:var(--v);
  box-shadow:0 0 0 9px rgba(122,92,255,.18),0 0 30px var(--v-glow)}
.rm__item--real .rm__tasks li{border-color:rgba(122,92,255,.4);color:var(--white)}
.rm__pill--real{background:var(--v);border-color:var(--v);color:#fff;letter-spacing:.22em}
.rm__item--real .meter__bar i{background:linear-gradient(90deg,var(--v),var(--v-lite))}

@media(max-width:760px){.rm__body{grid-template-columns:1fr}.rm__pill{margin-left:0}}

/* ---------- the eyes band: the E8 lattice hiding in Anto's eyes ---------- */
.eyes{position:relative;border-radius:26px;overflow:hidden;border:1px solid var(--line);background:var(--ink-1)}
.eyes img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:50% 42%}
.eyes::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 38%,rgba(4,4,7,.55) 72%,rgba(4,4,7,.94) 100%)}
.eyes__cap{position:absolute;z-index:2;left:clamp(20px,4vw,56px);right:clamp(20px,4vw,56px);bottom:clamp(18px,3.2vw,42px)}
.eyes__cap .eyebrow{margin:0 0 10px}
.split__media .eyes__cap .d4{font-size:clamp(17px,1.6vw,23px)}
.eyes__cap p+p{margin:0}
/* edge to edge, the picture is cropped tighter: the eyes, and little else */
.eyes--wide img{aspect-ratio:21/9;object-position:50% 44%}
/* 16:9 on a phone: any taller and the crop would start eating the eyes */
@media(max-width:760px){.eyes--wide img{aspect-ratio:16/9}}
@media(max-width:640px){
  .eyes img{aspect-ratio:4/3}
  /* full bleed: the gutters are worth more to the picture than to the margins */
  .eyes--wide{margin-inline:calc(var(--gut) * -1) !important;border-radius:0;border-inline:0}
  .eyes--wide img{aspect-ratio:16/9}
}

/* --- the pinned picture: the lines travel through it while it stays put ---
   .whoscroll is only there to give the scroll its length. The stage freezes
   once the picture reaches the middle of the screen and holds there until the
   last line has left the frame, then the whole thing scrolls away like any
   other section. The exact offset depends on the height of the picture, so it
   is measured and set by anto.js; the value below is only the fallback.     */
.whoscroll{position:relative;height:300vh}
.whoscroll__stage{position:sticky;top:calc(var(--nav-h) + clamp(14px,3vh,40px))}
/* a thin fade on the outer edge only, where the picture meets the page.
   The eyes start at about 6% of the width, so the shade stops before them. */
.eyes--pinned::after{background:
  linear-gradient(90deg,
    rgba(4,4,7,.6) 0%, rgba(4,4,7,.26) 5%, rgba(4,4,7,.07) 11%, rgba(4,4,7,0) 17%,
    rgba(4,4,7,0) 83%, rgba(4,4,7,.07) 89%, rgba(4,4,7,.26) 95%, rgba(4,4,7,.6) 100%)}
/* the frame fades its own top and bottom, so a line rises into view, holds in
   the middle, and dissolves before it reaches the edge of the picture */
.eyes__scroll{position:absolute;inset:0;z-index:2;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,0) 2%,#000 30%,#000 68%,rgba(0,0,0,0) 97%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,0) 2%,#000 30%,#000 68%,rgba(0,0,0,0) 97%)}
.eyes__scroll-in{width:min(88%,860px);text-align:center;will-change:transform}
.eyes__scroll-in p{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.045em;
  /* the gap is wide on purpose: the lines then cross the frame one at a time */
  font-size:clamp(26px,4.6vw,68px);line-height:1;margin:0 0 3.3em;color:var(--white);
  /* the middle of the picture is no longer shaded, so the glyphs carry their own */
  text-shadow:0 0 16px rgba(4,4,7,.92),0 4px 40px rgba(4,4,7,.9),0 2px 10px rgba(4,4,7,.85);
}
.eyes__scroll-in p:last-child{margin-bottom:0}
@media(max-width:760px){
  .whoscroll{height:220vh}                       /* four lines, not three screens */
  .eyes__scroll-in{width:92%}
  /* the frame is short here: the lines need a wider gap to cross it alone */
  .eyes__scroll-in p{font-size:clamp(21px,5.6vw,30px);margin-bottom:4.6em}
}
/* no pin, no travelling text: the lines simply sit under the picture */
@media(prefers-reduced-motion:reduce){
  .whoscroll{height:auto}
  .whoscroll__stage{position:static}
  .eyes--pinned::after{background:
    linear-gradient(90deg,rgba(4,4,7,.5) 0%,rgba(4,4,7,0) 16%,rgba(4,4,7,0) 84%,rgba(4,4,7,.5) 100%)}
  .eyes__scroll{position:static;overflow:visible;margin-top:34px;-webkit-mask-image:none;mask-image:none}
  .eyes__scroll-in{transform:none!important;width:100%;text-align:left}
  .eyes__scroll-in p{font-size:clamp(20px,2.6vw,34px);margin:0 0 .5em;text-shadow:none}
}

/* a phone composites every one of these little Antos: one shadow is plenty */
@media(max-width:760px){
  .colony-row .anto img,.story__swarm .anto img,.cards .anto img{
    filter:drop-shadow(0 0 10px var(--rim2)) !important;
  }
}

/* ---------- the pre-release teaser ----------
   One picture, four lines, nothing else. It reuses .eyes and .whoscroll: the
   page is only tall enough to let the lines cross the frame once.          */
.teaser{padding-block:0}
.teaser .whoscroll__stage{display:flex;flex-direction:column;justify-content:center}
.teaser__hint{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2);
  transition:opacity .4s linear}
.teaser__hint i{display:block;width:1px;height:26px;background:linear-gradient(var(--v),transparent);animation:drop 2.2s infinite}
@media(prefers-reduced-motion:reduce){.teaser__hint{display:none}}

/* ---------- CTA band ---------- */
.band{border:1px solid var(--line);border-radius:26px;padding:clamp(36px,6vw,80px);text-align:center;
  background:radial-gradient(90% 130% at 50% 0%,rgba(122,92,255,.18),transparent 62%),var(--ink-1);position:relative;overflow:hidden}
.band .anto{width:min(140px,26vw);margin:0 auto 26px}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-top:clamp(60px,8vw,110px);margin-top:0;background:var(--ink-0)}
.foot__big{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.05em;line-height:.9;
  font-size:clamp(34px,7.6vw,110px)}
.foot__big span{display:block}
.foot__big span:nth-child(2){color:var(--muted)}
.foot__big span:nth-child(3){color:transparent;-webkit-text-stroke:1.3px var(--v-lite)}
.foot__mid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-end;margin-top:clamp(40px,6vw,80px)}
.foot__links{display:flex;gap:22px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.foot__links a:hover{color:var(--white)}
.foot__bar{margin-top:clamp(34px,5vw,60px);border-top:1px solid var(--line);padding-block:26px 34px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.disclaimer{max-width:78ch;font-size:12px;line-height:1.6;color:var(--muted-2)}

/* ---------- page header (sub-pages) ---------- */
.phead{padding-block:clamp(70px,10vw,130px) clamp(40px,5vw,70px)}
.phead__grid{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,5vw,60px);align-items:center}
.phead__grid .anto{width:min(100%,32vh,270px);margin-left:auto}
@media(max-width:940px){.phead__grid{grid-template-columns:1fr}.phead__grid .anto{width:min(42%,165px);margin:0}}

/* ---------- toast ---------- */
#toast{position:fixed;left:50%;bottom:30px;translate:-50% 0;z-index:200;background:var(--white);color:#0A0912;
  border-radius:12px;padding:12px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  opacity:0;transform:translateY(14px);transition:.35s var(--ease);pointer-events:none;box-shadow:0 20px 50px -18px rgba(0,0,0,.9)}
#toast.is-on{opacity:1;transform:none}

/* halo reserved for the central Anto of the colony row */
.colony-row .anto:not(:nth-child(3)) .anto__halo,
.colony-row .anto:not(:nth-child(3)) .anto__shadow{display:none}
/* Anto inside the community cards */
.card .anto img{filter:drop-shadow(0 0 1.2px var(--rim1)) drop-shadow(0 0 10px var(--rim2));animation-duration:5.6s}

/* the greek tau must not be uppercased into a latin capital */
.tau{font-family:var(--mono);text-transform:none;font-weight:500;color:var(--v-lite);letter-spacing:0}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);margin-top:46px}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:clamp(20px,2.4vw,30px) 0;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__q{
  font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;
  font-size:clamp(17px,2vw,27px);line-height:1.06;flex:1;transition:color .3s;
}
.faq__item:hover .faq__q,.faq__item[open] .faq__q{color:var(--v-lite)}
.faq__sign{position:relative;width:16px;height:16px;flex:0 0 auto;opacity:.55;transition:.4s var(--ease)}
.faq__sign::before,.faq__sign::after{content:"";position:absolute;background:var(--v-lite);border-radius:2px}
.faq__sign::before{left:0;top:7px;width:16px;height:2px}
.faq__sign::after{left:7px;top:0;width:2px;height:16px;transition:opacity .3s}
.faq__item[open] .faq__sign{opacity:1;transform:rotate(180deg)}
.faq__item[open] .faq__sign::after{opacity:0}
.faq__a{padding:0 0 clamp(22px,2.4vw,30px);max-width:66ch}
.faq__a p{margin:0;color:var(--muted);font-size:clamp(15px,1.35vw,17px);line-height:1.65}
.faq__item[open] .faq__a{animation:faq-in .45s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ---------- how to spread ---------- */
/* a manifesto cell can be a link: step one goes to X */
.manifest__cell--link{cursor:pointer}
.manifest__cell--link .manifest__idx{display:flex;align-items:center;gap:8px}
.manifest__cell--link .manifest__idx i{font-style:normal;display:inline-block;transition:transform .3s var(--ease)}
.manifest__cell--link:hover .manifest__idx i{transform:translateX(4px)}

.cards--miss{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.miss__top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--v-lite);
  border:1px solid rgba(122,92,255,.4);border-radius:99px;padding:4px 11px;white-space:nowrap}
.badge--dim{color:var(--muted-2);border-color:var(--line)}
.card--mission h3{font-size:clamp(18px,1.9vw,23px);margin:0}
.card--mission .card__go{color:var(--muted-2);cursor:default}
.card--mission:hover{transform:translateY(-4px)}

/* ---------- copyable ammo ---------- */
.ammo{border-top:1px solid var(--line);margin-top:40px}
.ammo__row{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);padding:clamp(16px,1.9vw,24px) 0;
  border-bottom:1px solid var(--line);transition:background .3s}
.ammo__row:hover{background:rgba(122,92,255,.05)}
.ammo__txt{flex:1;margin:0;font-family:var(--mono);font-size:clamp(13px,1.3vw,15.5px);line-height:1.6;color:var(--white)}
.ammo__row:nth-child(even) .ammo__txt{color:var(--muted)}
.ammo__row:hover .ammo__txt{color:var(--white)}
.ammo__n{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--muted-2);flex:0 0 auto}
@media(max-width:640px){.ammo__row{flex-wrap:wrap}.ammo__txt{flex-basis:100%;order:2}.copy{order:3;margin-left:auto}}

/* ---------- do / don't ---------- */
.rules{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:44px}
.rules__col{border:1px solid var(--line);border-radius:18px;padding:clamp(22px,3vw,34px);background:var(--ink-1)}
.rules__col--no{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.rules__col h3{font-family:var(--display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;
  font-size:clamp(22px,2.6vw,34px);margin:0 0 22px}
.rules__col--yes h3{color:var(--v-lite)}
.rules__col ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
/* the marker sits outside, so the bold lead and its sentence flow as one text */
.rules__col li{position:relative;padding-left:24px;color:var(--muted);font-size:15px;line-height:1.55}
.rules__col li b{color:var(--white);font-weight:600}
.rules__col li::before{content:"+";position:absolute;left:0;top:0;font-family:var(--mono);color:var(--v-lite);line-height:1.55}
.rules__col--no li::before{content:"\00d7";color:var(--muted-2)}
@media(max-width:760px){.rules{grid-template-columns:1fr}}

/* ---------- the narrowest phones ----------
   Kept last on purpose: these override the display sizes set further up.
   Below 380px a single word like UNDERSTAND is wider than the screen, so the
   type gives up its floor rather than be cut off by the edge.               */
@media(max-width:380px){
  .d1,.hero h1{font-size:34px}
  .d2{font-size:32px}
  .d3{font-size:26px}
  .d4{font-size:19px}
  .tao-good{font-size:48px}
  .hero__punch{font-size:19px}
  .manifest__cell b{font-size:21px}
  .rm__title{font-size:24px}
  .faq__q{font-size:16px}
  .hero__foot .small{font-size:10px;letter-spacing:.14em}
  .eyes__scroll-in p{font-size:20px}
}