:root{
  --bg1:20,10,40;      /* violet, rgb triplets so we can interpolate */
  --bg2:60,20,80;
  --bg3:15,15,30;
  --ink:#f4f2f8;
  --ink-dim:rgba(244,242,248,0.62);
  --ink-dimmer:rgba(244,242,248,0.36);
  --line:rgba(244,242,248,0.14);
  --accent:#ff6a4d;
  --font-display:'Bricolage Grotesque', sans-serif;
  --font-body:'Sora', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:#08070c;color:var(--ink);font-family:var(--font-body);font-weight:400;
  overflow-x:hidden;cursor:none;position:relative;
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:none;}
img{max-width:100%;display:block;}

/* ===== CURSOR ===== */
.cursor{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;
  background:conic-gradient(var(--accent), #ffd23f, #ff2ea6, #4fd6ff, var(--accent));
  transition:width .25s ease, height .25s ease, opacity .2s;
  mix-blend-mode:screen;
}
.cursor-tag{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.16em;color:var(--ink);
  opacity:0;transition:opacity .2s;text-transform:uppercase;
}
.cursor-tag.active{opacity:1;}
.cursor.grow{width:64px;height:64px;}
#trail{position:fixed;inset:0;z-index:9998;pointer-events:none;}
@media (hover:none),(pointer:coarse){.cursor,.cursor-tag,#trail{display:none;}body{cursor:auto;}}

/* ===== FIXED EVOLVING BACKGROUND ===== */
.field{
  position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(var(--bg1),0.85), transparent 46%),
    radial-gradient(circle at 82% 30%, rgba(var(--bg2),0.7), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(var(--bg3),0.8), transparent 55%),
    #08070c;
}
.field-noise{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== SHELL ===== */
.wrap{position:relative;z-index:2;}

/* ===== NAV ===== */
.corner-logo{
  position:fixed;top:24px;left:24px;z-index:1001;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);font-family:var(--font-display);font-weight:700;font-size:0.85rem;
}
.corner-menu{
  position:fixed;top:24px;right:24px;z-index:1001;width:48px;height:48px;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;background:rgba(255,255,255,0.04);
  backdrop-filter:blur(10px);font-size:1.3rem;transition:transform .4s ease, background .4s ease;
}
.corner-menu:hover{transform:rotate(90deg);background:rgba(255,255,255,0.1);}
.corner-menu.open{transform:rotate(45deg);}

.nav-overlay{
  position:fixed;inset:0;z-index:1000;background:rgba(6,5,10,0.97);backdrop-filter:blur(30px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.nav-overlay.open{opacity:1;pointer-events:auto;}
.nav-scatter{position:relative;width:min(90vw,900px);height:min(80vh,600px);}
.nav-item{
  position:absolute;font-family:var(--font-display);font-weight:600;font-size:clamp(1.8rem,5vw,3.4rem);
  text-transform:uppercase;transition:transform .3s ease, color .3s ease;
}
.nav-item span{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.14em;display:block;color:var(--ink-dimmer);margin-bottom:4px;}
.nav-item:hover{color:var(--accent);}
.nav-item.i1{top:6%;left:2%;}
.nav-item.i2{top:20%;right:4%;}
.nav-item.i3{top:48%;left:16%;}
.nav-item.i4{bottom:18%;right:12%;}
.nav-item.i5{bottom:2%;left:38%;}
.nav-close-hint{position:absolute;bottom:24px;right:24px;font-family:var(--font-mono);font-size:0.62rem;color:var(--ink-dimmer);letter-spacing:0.1em;}

/* ===== TYPOGRAPHY HELPERS ===== */
.eyebrow{
  font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.24em;text-transform:uppercase;
  color:var(--ink-dim);display:inline-flex;align-items:center;gap:10px;
}
.eyebrow::before{content:'';width:18px;height:1px;background:var(--accent);}
.gradient-word{
  background:linear-gradient(100deg,#ff6a4d,#ff2ea6,#4fd6ff);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:hue 7s linear infinite;
}
@keyframes hue{0%{background-position:0% 50%;}100%{background-position:220% 50%;}}
.distort{display:inline-block;transition:transform .25s ease, letter-spacing .25s ease;}
.distort:hover{transform:skewX(-6deg) scaleX(1.03);letter-spacing:0.02em;}

/* ===== REVEAL ===== */
.reveal{opacity:0;transform:translateY(46px);filter:blur(6px);transition:opacity 1s cubic-bezier(.16,.8,.24,1), transform 1s cubic-bezier(.16,.8,.24,1), filter 1s ease;}
.reveal.in{opacity:1;transform:translateY(0);filter:blur(0);}

/* ===== HERO ===== */
.hero{min-height:100svh;position:relative;padding:0 6vw;display:flex;align-items:center;}
.hero-comp{position:relative;width:100%;max-width:1400px;margin:0 auto;padding-top:60px;}
.hero-kicker{font-family:var(--font-mono);font-size:0.68rem;letter-spacing:0.2em;color:var(--ink-dimmer);margin-bottom:14px;}
.hero h1{font-family:var(--font-display);text-transform:uppercase;line-height:0.94;font-weight:700;}
.hero h1 .w1{display:block;font-size:clamp(2.4rem,7vw,5.2rem);margin-left:0;}
.hero h1 .w2{display:block;font-size:clamp(3.2rem,11vw,8.6rem);margin-left:6vw;}
.hero h1 .w3{display:block;font-size:clamp(2rem,5.4vw,3.8rem);margin-left:14vw;color:var(--ink-dim);font-weight:400;}
.hero-blob-wrap{
  position:absolute;top:8%;right:2%;width:min(38vw,420px);aspect-ratio:1;z-index:-1;pointer-events:none;
}
.hero-blob{
  width:100%;height:100%;
  background:conic-gradient(from 120deg, #ff6a4d, #ff2ea6, #7a5cff, #4fd6ff, #ff6a4d);
  filter:blur(2px);
  animation:blobMorph 12s ease-in-out infinite, blobSpin 30s linear infinite;
  box-shadow:0 40px 120px rgba(255,46,166,0.25);
}
@keyframes blobMorph{
  0%,100%{border-radius:42% 58% 70% 30% / 45% 45% 55% 55%;}
  25%{border-radius:70% 30% 46% 54% / 30% 60% 40% 70%;}
  50%{border-radius:50% 50% 33% 67% / 55% 27% 73% 45%;}
  75%{border-radius:30% 70% 55% 45% / 65% 40% 60% 35%;}
}
@keyframes blobSpin{to{transform:rotate(360deg);}}
.hero-meta{position:absolute;bottom:-4%;left:0;display:flex;gap:40px;font-family:var(--font-mono);font-size:0.64rem;color:var(--ink-dimmer);letter-spacing:0.08em;}
.hero-meta b{color:var(--ink);}
.scroll-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:0.6rem;letter-spacing:0.2em;color:var(--ink-dimmer);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-hint .line{width:1px;height:34px;background:linear-gradient(var(--ink-dimmer),transparent);animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{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;}}

/* ===== FRAGMENTS (features scattered) ===== */
.fragments{position:relative;min-height:120vh;padding:14vw 6vw;}
.fragment{
  position:relative;max-width:340px;margin-bottom:14vh;
}
.fragment:nth-child(1){margin-left:0;}
.fragment:nth-child(2){margin-left:auto;text-align:right;}
.fragment:nth-child(3){margin-left:14vw;}
.fragment .fnum{font-family:var(--font-display);font-size:3rem;font-weight:700;color:transparent;-webkit-text-stroke:1px var(--line);line-height:1;}
.fragment h3{font-family:var(--font-display);font-size:1.6rem;text-transform:uppercase;margin-top:10px;}
.fragment p{color:var(--ink-dim);margin-top:12px;line-height:1.6;font-size:0.98rem;}
.fragment-line{position:absolute;top:50%;left:-40px;width:30px;height:1px;background:var(--accent);}
.fragment:nth-child(2) .fragment-line{left:auto;right:-40px;}
.fragment:nth-child(3) .fragment-line{display:none;}

/* ===== FORM IS NEVER FINAL ===== */
.form-section{min-height:140vh;position:relative;display:flex;flex-direction:column;align-items:center;padding:10vw 6vw;text-align:center;}
.form-section h2{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(2rem,6vw,4.4rem);position:relative;z-index:2;
}
.form-shape-wrap{position:relative;width:min(46vw,460px);aspect-ratio:1;margin:6vw 0;}
.form-shape{
  width:100%;height:100%;
  background:linear-gradient(135deg, rgba(255,106,77,0.5), rgba(122,92,255,0.5), rgba(79,214,255,0.5));
  animation:blobMorph 9s ease-in-out infinite;
  filter:blur(1px);
}
.form-words{position:absolute;inset:0;}
.fword{
  position:absolute;font-family:var(--font-mono);font-size:0.78rem;letter-spacing:0.18em;text-transform:uppercase;
  opacity:0;transform:scale(0.7);transition:opacity .7s ease, transform .7s cubic-bezier(.34,1.56,.64,1);
}
.fword.in{opacity:1;transform:scale(1);}
.fword.w1{top:2%;left:-6%;}
.fword.w2{top:20%;right:-14%;}
.fword.w3{bottom:26%;left:-18%;}
.fword.w4{bottom:2%;right:-4%;}
.fword.w5{top:48%;left:44%;}

/* ===== GALLERY (scroll-linked horizontal) ===== */
.gallery-pin{height:320vh;position:relative;}
.gallery-sticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.gallery-head{padding:0 6vw;margin-bottom:40px;}
.gallery-head h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,4.6vw,3.2rem);}
.gallery-track{display:flex;gap:26px;padding-left:6vw;will-change:transform;}
.gallery-item{
  position:relative;flex-shrink:0;width:min(56vw,440px);height:56vh;
  clip-path:polygon(0 6%, 94% 0, 100% 92%, 8% 100%);
  overflow:hidden;background-size:cover;background-position:center;
}
.gallery-item::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%, rgba(8,7,12,0.9) 100%);}
.gallery-label{position:absolute;left:24px;bottom:22px;z-index:1;}
.gallery-label .idx{font-family:var(--font-mono);font-size:0.64rem;color:var(--ink-dimmer);letter-spacing:0.1em;}
.gallery-label h3{font-family:var(--font-display);font-weight:600;font-size:1.5rem;text-transform:uppercase;margin-top:6px;}
.gallery-label .cat{font-family:var(--font-mono);font-size:0.6rem;color:var(--ink-dim);margin-top:4px;}

/* ===== STATEMENT ===== */
.statement{min-height:90vh;display:flex;align-items:center;padding:0 6vw;}
.statement h2{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(1.9rem,6.2vw,4.6rem);line-height:1.08;max-width:1200px;
}
.statement .l2{color:var(--ink-dimmer);}

/* ===== SYSTEM VIZ ===== */
.system{padding:10vw 6vw;position:relative;}
.system-head{margin-bottom:60px;}
.system-head span.eyebrow{color:var(--accent);}
.system-head h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(1.8rem,4.4vw,3rem);margin-top:12px;}
.orbit-wrap{position:relative;width:min(60vw,540px);aspect-ratio:1;margin:0 auto;}
.orbit-ring{position:absolute;border:1px solid var(--line);border-radius:50%;}
.orbit-ring.r1{inset:0;animation:spin 34s linear infinite;}
.orbit-ring.r2{inset:14%;animation:spin 24s linear infinite reverse;border-style:dashed;}
.orbit-ring.r3{inset:30%;animation:spin 16s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.orbit-node{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px var(--accent);top:-5px;left:50%;}
.orbit-center{position:absolute;inset:38%;border-radius:50%;background:radial-gradient(circle,#7a5cff,transparent 70%);display:grid;place-items:center;font-family:var(--font-mono);font-size:0.6rem;text-align:center;color:var(--ink-dim);}
.system-labels{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-top:60px;max-width:900px;margin-left:auto;margin-right:auto;}
.system-labels div{font-family:var(--font-mono);font-size:0.62rem;letter-spacing:0.1em;color:var(--ink-dimmer);text-align:center;}
.system-labels b{display:block;font-family:var(--font-display);font-size:1rem;color:var(--ink);margin-top:6px;font-weight:600;}

/* ===== CTA ===== */
.cta-section{min-height:100vh;display:grid;place-items:center;position:relative;}
.cta-circle{
  width:min(46vw,380px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--line);display:grid;place-items:center;position:relative;
  transition:transform .5s cubic-bezier(.16,.8,.24,1), border-color .5s ease;
  background:radial-gradient(circle, rgba(255,106,77,0.08), transparent 70%);
}
.cta-circle:hover{transform:scale(1.08);border-color:var(--accent);}
.cta-circle .ring{position:absolute;inset:-14px;border:1px solid rgba(255,106,77,0.3);border-radius:50%;animation:spin 20s linear infinite;}
.cta-circle span{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;text-align:center;
  font-size:clamp(1.1rem,2.4vw,1.6rem);line-height:1.3;max-width:70%;
}

/* ===== FOOTER ===== */
footer{padding:10vw 6vw 40px;position:relative;}
.footer-huge{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,7vw,5rem);line-height:0.98;}
.footer-links{display:flex;gap:40px;flex-wrap:wrap;margin-top:40px;}
.footer-links a{font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-dim);transition:color .2s;}
.footer-links a:hover{color:var(--accent);}
.footer-gradient-line{height:2px;margin:50px 0 24px;border-radius:2px;background:linear-gradient(90deg,#ff6a4d,#ff2ea6,#4fd6ff,#ff6a4d);background-size:200% auto;animation:hue 6s linear infinite;}
.footer-bottom{font-family:var(--font-mono);font-size:0.64rem;color:var(--ink-dimmer);letter-spacing:0.06em;}

a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

@media (max-width:900px){
  .hero h1 .w2{margin-left:0;font-size:clamp(2.6rem,13vw,4.6rem);}
  .hero h1 .w3{margin-left:0;}
  .hero-blob-wrap{position:relative;top:0;right:0;width:60vw;margin:30px auto 0;}
  .fragment{max-width:100%;margin-left:0 !important;text-align:left !important;}
  .fragment-line{display:none;}
  .gallery-item{width:78vw;}
  .orbit-wrap{width:80vw;}
  .nav-item{font-size:1.8rem;}
}
@media (max-width:600px){
  .corner-logo,.corner-menu{width:42px;height:42px;}
  .nav-scatter{width:92vw;height:70vh;}
  .nav-item.i1{top:2%;left:0;}
  .nav-item.i2{top:16%;right:0;}
  .nav-item.i3{top:40%;left:4%;}
  .nav-item.i4{bottom:22%;right:0;}
  .nav-item.i5{bottom:0;left:8%;}
  body{cursor:auto;}
}