:root{
  --bg:#f7f5ef;
  --panel:#ffffff;
  --text:#121212;
  --muted:#6f6d68;
  --line:rgba(18,18,18,.11);
  --orange:#db6b20;
  --ember:#ff9b3e;
  --cyan:#13a7b2;
  --cyan-soft:#7be0df;
  --cream:#111111;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit}
#particle-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-3}
.grain{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.cursor-light{position:fixed;width:460px;height:460px;border-radius:50%;pointer-events:none;z-index:-2;background:radial-gradient(circle,rgba(19,167,178,.08),rgba(219,107,32,.035) 36%,transparent 68%);transform:translate(-50%,-50%)}
header{height:76px;position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid rgba(18,18,18,.06);background:rgba(247,245,239,.82);backdrop-filter:blur(18px)}
.wordmark{font:500 13px DM Mono,monospace;letter-spacing:.28em}
nav{display:flex;gap:32px}
nav a{font:400 9px DM Mono,monospace;letter-spacing:.16em;color:var(--muted);padding:29px 0 8px;border-bottom:1px solid transparent}
nav a:hover,nav a.active{color:var(--cream);border-color:var(--cyan)}
.top-cta{border:1px solid rgba(123,224,223,.3);border-radius:999px;padding:11px 17px;font:400 9px DM Mono,monospace;letter-spacing:.14em}
.top-cta span{color:var(--cyan-soft);margin-left:10px}
.menu{display:none;background:none;border:0;color:#111;font:400 9px DM Mono,monospace;letter-spacing:.15em}

.hero{max-width:1450px;margin:auto;min-height:100svh;padding:135px 5vw 80px;display:grid;grid-template-columns:1.05fr .95fr;gap:4vw;align-items:center;position:relative}
.hero-lines{position:absolute;inset:11% 2% 7%;background:linear-gradient(90deg,transparent 49.9%,rgba(255,255,255,.035) 50%,transparent 50.1%),linear-gradient(0deg,transparent 49.9%,rgba(255,255,255,.03) 50%,transparent 50.1%);background-size:120px 120px;mask-image:radial-gradient(circle,#000 20%,transparent 70%);opacity:.32;pointer-events:none}
.hero-logo-wrap{height:610px;position:relative;display:grid;place-items:center;isolation:isolate}
.glitch-frame{position:relative;width:min(570px,92%);height:min(570px,92%);display:grid;place-items:center}
.hero-logo{position:absolute;width:100%;height:100%;object-fit:contain}
.base-logo{z-index:4}
.ghost{z-index:5;opacity:0;pointer-events:none}
.ghost-one{animation:glitch-one 7s steps(1,end) infinite}
.ghost-two{animation:glitch-two 7s steps(1,end) infinite}
.energy-ring{position:absolute;border-radius:50%;border:1px solid rgba(19,167,178,.13)}
.ring-1{width:410px;height:410px;animation:spin 18s linear infinite}
.ring-2{width:500px;height:500px;border-color:rgba(219,107,32,.12);animation:spin 28s linear infinite reverse}
.ring-3{width:590px;height:590px;border-style:dashed;opacity:.45;animation:spin 42s linear infinite}
.energy-ring:after{content:"";position:absolute;width:6px;height:6px;border-radius:50%;background:var(--cyan-soft);top:50%;left:-3px;box-shadow:0 0 18px var(--cyan-soft)}
.micro-label{position:absolute;font:400 7px DM Mono,monospace;letter-spacing:.17em;color:#77989a;border-left:1px solid rgba(123,224,223,.4);padding-left:8px}
.micro-a{left:6%;top:23%}.micro-b{right:3%;bottom:20%;color:#a0765e;border-color:rgba(219,107,32,.4)}
.hero-copy{position:relative;z-index:6}
.kicker{color:var(--cyan-soft);font:400 9px DM Mono,monospace;letter-spacing:.2em}
.hero h1,.tape-copy h2,.duo-title h2,.manifesto h2,.signal-panel h2{font-size:clamp(56px,7.6vw,112px);line-height:.84;letter-spacing:-.065em;font-weight:500;margin:22px 0 30px}
.hero h1 em,.tape-copy h2 em,.manifesto h2 em{font-style:normal;color:var(--orange)}
.intro,.tape-copy>p,.manifesto-copy>p,.signal-panel>p,.member-card p{max-width:520px;color:var(--muted);font-size:14px;line-height:1.8}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:34px}
.button{border-radius:999px;padding:15px 20px;border:1px solid var(--line);font:500 9px DM Mono,monospace;letter-spacing:.13em}
.primary{background:var(--cream);color:#090909;border-color:var(--cream)}
.ghost-btn:hover{border-color:var(--cyan);color:var(--cyan-soft)}
.side-code{position:absolute;right:3%;bottom:35px;display:flex;gap:18px;color:#5f6264;font:400 7px DM Mono,monospace;letter-spacing:.12em}

.ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0;color:#7c7e80;font:400 8px DM Mono,monospace;letter-spacing:.22em}
.ticker-track{width:max-content;animation:ticker 27s linear infinite}

.section{max-width:1360px;margin:auto;padding:115px 4vw}
.section-label{display:flex;align-items:center;gap:16px;color:var(--muted);font:400 9px DM Mono,monospace;letter-spacing:.18em;margin-bottom:56px}
.section-label span{color:var(--orange)}
.tape-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:7vw;align-items:center}
.cover-stage{position:relative;perspective:1000px}
.cover-stage img{width:100%;display:block;border-radius:18px;border:1px solid rgba(255,255,255,.09);box-shadow:0 45px 100px rgba(0,0,0,.55);transition:transform .2s ease}
.cover-glow{position:absolute;inset:12%;background:radial-gradient(circle,rgba(19,167,178,.25),transparent 62%);filter:blur(48px);z-index:-1}
.cover-data{display:flex;justify-content:space-between;margin-top:14px;color:#707274;font:400 7px DM Mono,monospace;letter-spacing:.14em}
.tape-copy h2{font-size:clamp(46px,6vw,84px)}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:35px 0}
.spec-grid div{padding:18px 0;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:5px}
.spec-grid div:nth-child(odd){border-right:1px solid var(--line)}
.spec-grid div:nth-child(even){padding-left:18px}
.spec-grid small{color:#666;font:400 7px DM Mono,monospace;letter-spacing:.14em}
.spec-grid strong{font:400 12px DM Mono,monospace;letter-spacing:.08em}
.signal-button{width:100%;display:flex;justify-content:space-between;align-items:center;background:#fff;color:var(--text);border:1px solid rgba(123,224,223,.22);border-radius:12px;padding:17px 18px;cursor:pointer;font:400 9px DM Mono,monospace;letter-spacing:.15em}
.signal-button:hover{border-color:var(--cyan);box-shadow:0 0 35px rgba(19,167,178,.08)}
.signal-button b{color:var(--cyan-soft)}
.signal-message{margin:10px 0 0!important;font:400 8px DM Mono,monospace!important;letter-spacing:.12em!important;color:#647173!important}

.duo{border-top:1px solid rgba(255,255,255,.055)}
.duo-title{text-align:center}
.duo-title h2 span{color:var(--orange)}
.duo-grid{display:grid;grid-template-columns:1fr 110px 1fr;gap:28px;align-items:center;margin-top:70px}
.member-card{min-height:300px;border:1px solid var(--line);border-radius:24px;padding:30px;background:linear-gradient(150deg,rgba(255,255,255,.035),rgba(255,255,255,.008));position:relative;overflow:hidden}
.member-card:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;right:-80px;bottom:-90px;background:radial-gradient(circle,rgba(19,167,178,.08),transparent 70%)}
.member-card:nth-child(3):after{background:radial-gradient(circle,rgba(219,107,32,.09),transparent 70%)}
.member-index{color:#596367;font:400 8px DM Mono,monospace}
.member-card h3{font-size:28px;font-weight:400;margin:65px 0 20px;letter-spacing:-.035em}
.member-card h3 small{font-size:13px;color:var(--muted)}
.member-line{height:1px;background:linear-gradient(90deg,var(--cyan),transparent);margin:36px 0 15px}
.member-card:nth-child(3) .member-line{background:linear-gradient(90deg,var(--orange),transparent)}
.member-card>small{color:#6c6f71;font:400 7px DM Mono,monospace;letter-spacing:.16em}
.fusion{width:100px;height:100px;border-radius:50%;display:grid;place-items:center;position:relative}
.fusion strong{font:300 32px DM Mono,monospace;color:var(--cream)}
.fusion-ring{position:absolute;inset:0;border:1px solid rgba(123,224,223,.25);border-radius:50%;animation:spin 10s linear infinite}
.fusion-ring:after{content:"";position:absolute;inset:18%;border:1px solid rgba(219,107,32,.25);border-radius:50%}

.manifesto{min-height:700px;position:relative;display:flex;align-items:center;overflow:hidden;border-top:1px solid rgba(255,255,255,.055)}
.manifesto-bg{position:absolute;left:-3%;font-size:clamp(140px,22vw,330px);font-weight:600;letter-spacing:-.1em;color:rgba(255,255,255,.018);white-space:nowrap}
.manifesto-copy{position:relative;z-index:2}
.wave-object{position:absolute;right:7%;width:min(34vw,430px);aspect-ratio:1;display:grid;place-items:center}
.wave{position:absolute;border-radius:50%;border:1px solid rgba(123,224,223,.13);animation:pulse-wave 4s ease-out infinite}
.wave-1{inset:8%}.wave-2{inset:22%;animation-delay:-1.2s;border-color:rgba(219,107,32,.14)}.wave-3{inset:36%;animation-delay:-2.4s}
.wave-center{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font:400 18px DM Mono,monospace;letter-spacing:.12em;background:#fff}

.signal{padding-top:35px}
.signal-panel{border:1px solid var(--line);border-radius:30px;padding:clamp(35px,7vw,90px);background:radial-gradient(circle at 85% 20%,rgba(19,167,178,.09),transparent 30%),radial-gradient(circle at 10% 90%,rgba(219,107,32,.07),transparent 28%),#07090c}
.signal-panel h2{font-size:clamp(48px,7vw,96px)}
.status-row{display:flex;gap:30px;flex-wrap:wrap;margin-top:45px;color:#818587;font:400 8px DM Mono,monospace;letter-spacing:.13em}
.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan-soft);box-shadow:0 0 12px var(--cyan-soft);margin-right:7px}

footer{max-width:1360px;margin:auto;border-top:1px solid var(--line);padding:27px 4vw 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:#666;font:400 8px DM Mono,monospace;letter-spacing:.13em}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ticker{to{transform:translateX(-50%)}}
@keyframes pulse-wave{0%{transform:scale(.75);opacity:.1}45%{opacity:.6}100%{transform:scale(1.16);opacity:0}}
@keyframes glitch-one{
  0%,88%,93%,100%{opacity:0;transform:none;clip-path:inset(0)}
  89%{opacity:.28;transform:translate(11px,-2px);clip-path:inset(18% 0 62% 0)}
  90%{opacity:.22;transform:translate(-8px,2px);clip-path:inset(58% 0 22% 0)}
  91%{opacity:.32;transform:translate(6px,0);clip-path:inset(74% 0 7% 0)}
  92%{opacity:.18;transform:translate(-5px,0);clip-path:inset(35% 0 48% 0)}
}
@keyframes glitch-two{
  0%,82%,87%,100%{opacity:0;transform:none;clip-path:inset(0)}
  83%{opacity:.22;transform:translate(-10px,0);clip-path:inset(31% 0 51% 0)}
  84%{opacity:.3;transform:translate(9px,-1px);clip-path:inset(65% 0 15% 0)}
  85%{opacity:.17;transform:translate(-4px,1px);clip-path:inset(11% 0 76% 0)}
  86%{opacity:.24;transform:translate(7px,0);clip-path:inset(46% 0 36% 0)}
}

@media(max-width:820px){
  header{height:64px;padding:0 18px}.wordmark{font-size:11px}
  nav{display:none;position:absolute;top:64px;left:0;right:0;padding:22px 18px;background:#f7f5ef;flex-direction:column;gap:4px;border-bottom:1px solid var(--line)}
  nav.open{display:flex}.top-cta{display:none}.menu{display:block}
  .hero{padding:100px 20px 60px;display:flex;flex-direction:column;min-height:auto}
  .hero-logo-wrap{height:430px;width:100%}.glitch-frame{width:390px;height:390px}
  .ring-1{width:300px;height:300px}.ring-2{width:350px;height:350px}.ring-3{width:400px;height:400px}
  .hero-copy{text-align:center}.hero h1{font-size:58px}.intro{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}.side-code{display:none}
  .section{padding:80px 20px}.tape-grid{grid-template-columns:1fr;gap:55px}.tape-copy{text-align:left}
  .duo-grid{grid-template-columns:1fr}.fusion{margin:auto}.member-card{min-height:260px}
  .manifesto{min-height:720px;align-items:flex-start;padding-top:100px}.wave-object{right:50%;transform:translateX(50%);bottom:50px;width:260px}
  footer{margin:0 15px;padding-left:0;padding-right:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  .cursor-light{display:none}
}

/* V2 SLEEK WHITE — designed so the supplied TNTbyDnD logo blends into the page */
body{
  background:
    radial-gradient(circle at 20% 15%,rgba(219,107,32,.07),transparent 25%),
    radial-gradient(circle at 82% 24%,rgba(19,167,178,.06),transparent 25%),
    #f7f5ef;
  color:#111;
}
header{
  background:rgba(247,245,239,.84);
  border-bottom:1px solid rgba(18,18,18,.06);
  backdrop-filter:blur(20px);
}
.wordmark{color:#111}
nav a{color:#74726d}
nav a:hover,nav a.active{color:#111;border-color:var(--orange)}
.top-cta{border-color:rgba(18,18,18,.16);background:rgba(255,255,255,.6)}
.hero{
  min-height:92svh;
}
.hero-lines{
  opacity:.16;
  background:
    linear-gradient(90deg,transparent 49.9%,rgba(18,18,18,.04) 50%,transparent 50.1%),
    linear-gradient(0deg,transparent 49.9%,rgba(18,18,18,.035) 50%,transparent 50.1%);
}
.hero-logo-wrap{
  min-height:560px;
}
.glitch-frame{
  width:min(610px,94%);
  height:min(610px,94%);
}
.hero-logo{
  object-fit:contain;
  background:transparent;
  border:0;
  box-shadow:none;
}
.base-logo{
  mix-blend-mode:multiply;
}
.ghost{
  mix-blend-mode:multiply;
}
.energy-ring{
  border-color:rgba(19,167,178,.16);
}
.ring-2{border-color:rgba(219,107,32,.15)}
.ring-3{opacity:.28}
.micro-label{color:#7d8e8d}
.micro-b{color:#a67960}
.hero-copy{
  padding-left:18px;
}
.hero-copy .kicker{
  color:#6d7d7e;
}
.hero-actions{
  margin-top:26px;
}
.button{
  border-color:rgba(18,18,18,.13);
}
.primary{
  background:#111;
  border-color:#111;
  color:#fff;
}
.ghost-btn:hover{border-color:#111;color:#111}
.side-code{color:#95928d}

.ticker{
  color:#86837e;
  border-color:rgba(18,18,18,.08);
  background:rgba(255,255,255,.36);
}

.section-label{color:#77736f}
.cover-stage img{
  border:1px solid rgba(18,18,18,.08);
  box-shadow:0 35px 80px rgba(56,44,20,.13);
}
.cover-glow{
  background:radial-gradient(circle,rgba(19,167,178,.13),rgba(219,107,32,.05) 38%,transparent 68%);
}
.cover-data{color:#8c8984}
.tape-copy>p,.manifesto-copy>p,.signal-panel>p,.member-card p{color:#706d68}
.spec-grid{border-color:rgba(18,18,18,.08)}
.spec-grid div{border-color:rgba(18,18,18,.08)}
.spec-grid div:nth-child(odd){border-color:rgba(18,18,18,.08)}
.spec-grid small{color:#908d87}
.signal-button{
  background:#fff;
  border-color:rgba(18,18,18,.12);
  color:#111;
}
.signal-button:hover{
  border-color:rgba(19,167,178,.45);
  box-shadow:0 14px 40px rgba(19,167,178,.08);
}
.signal-message{color:#7d8484!important}

.duo{
  border-top:1px solid rgba(18,18,18,.06);
}
.duo-title h2{
  letter-spacing:-.06em;
}
.duo-grid{
  grid-template-columns:1fr 80px 1fr;
}
.member-card{
  min-height:230px;
  background:rgba(255,255,255,.58);
  border:1px solid rgba(18,18,18,.08);
  box-shadow:0 22px 60px rgba(28,20,8,.05);
}
.member-card h3{
  margin:54px 0 16px;
}
.member-line{margin-top:28px}
.fusion strong{color:#111}
.fusion-ring{
  border-color:rgba(19,167,178,.22);
}
.fusion-ring:after{
  border-color:rgba(219,107,32,.22);
}

.manifesto{
  border-top:1px solid rgba(18,18,18,.06);
}
.manifesto-bg{
  color:rgba(18,18,18,.025);
}
.wave{
  border-color:rgba(19,167,178,.16);
}
.wave-2{border-color:rgba(219,107,32,.16)}
.wave-center{
  background:#fff;
  border-color:rgba(18,18,18,.08);
  color:#111;
}

.signal-panel{
  background:
    radial-gradient(circle at 84% 20%,rgba(19,167,178,.08),transparent 30%),
    radial-gradient(circle at 10% 90%,rgba(219,107,32,.07),transparent 28%),
    rgba(255,255,255,.68);
  border-color:rgba(18,18,18,.08);
  box-shadow:0 30px 80px rgba(24,18,8,.06);
}
.signal-panel h2{
  color:#111;
}
.names-under{
  font-size:18px!important;
  line-height:1.7!important;
  color:#5f5c58!important;
}
.status-row{color:#7b7974}
footer{
  color:#7b7873;
  border-top:1px solid rgba(18,18,18,.08);
}

/* remove the “block” feeling from the logo area */
.glitch-frame:before{
  content:"";
  position:absolute;
  inset:6%;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.93) 0 44%,rgba(255,255,255,.48) 57%,transparent 74%);
  filter:blur(14px);
  z-index:-1;
}
.glitch-frame:after{
  content:"";
  position:absolute;
  width:82%;
  height:82%;
  border-radius:50%;
  box-shadow:
    0 0 90px rgba(219,107,32,.06),
    0 0 120px rgba(19,167,178,.05);
  z-index:-2;
}

/* Hide text blocks intentionally removed in V2 */
.hero-copy{align-self:center}
.hero-copy > .intro{display:none}

@media(max-width:820px){
  nav{background:#f7f5ef}
  .hero-logo-wrap{height:430px;min-height:430px}
  .glitch-frame{width:390px;height:390px}
  .hero-copy{padding-left:0}
  .duo-grid{grid-template-columns:1fr}
  .signal-panel{text-align:center}
}

/* V6 seamless TNTbyDnD logo */
.logo-stack,.glitch-frame{background:transparent!important}
.base-logo{
  opacity:.96;
  mix-blend-mode:multiply;
  filter:drop-shadow(0 12px 28px rgba(219,107,32,.10))
         drop-shadow(0 0 24px rgba(19,167,178,.06));
}
.ghost{
  mix-blend-mode:multiply;
}
.glitch-frame:before{
  background:radial-gradient(circle,rgba(255,255,255,.48) 0 38%,rgba(255,255,255,.16) 55%,transparent 73%)!important;
}