/* themes.css — every project page and sub-site gets its own identity.
   body class="th t-<theme>" (+ "l-center" for centred hero). Loads after pf.css + site.css. */

@font-face{font-family:"Anton";src:url(fonts/anton.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Grotesk";src:url(fonts/grotesk.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Hand";src:url(fonts/caveat.woff2) format("woff2");font-weight:500 700;font-display:swap}

/* ── shared mechanics ── */
.th{--hf:var(--serif);--hw:400;--htt:none;--hls:-.03em;--r:18px;--rb:12px;--ems:italic}
.th :is(.ph h1,.ph .tl,.split h2,.shead h2,.fcell h3,.facts b,.dl-band h3,.nextp b,.phero h1,.cta-band h2,.faq summary,.doc h2,
  .page-hero h1,.step h3,.pstats b,.nf h1,.gallery figcaption b,.sec-head h2,.brand,.bot b,.mock .hd b,.mock .card b){
  font-family:var(--hf)!important;font-weight:var(--hw)!important;text-transform:var(--htt);letter-spacing:var(--hls)!important}
.th :is(h1,h2,h3) em{font-style:var(--ems)}
.th :is(.fcell,.spec,.step,.dl-band,.doc .tldr,.tbl,.notice,.gallery img,.lgal img,.ph .media .gwrap,.faq details,.bot){border-radius:var(--r)}
.th .btn{border-radius:var(--rb)}
.th::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
.th .ph::before,.th .phero::before{display:none}
.th main{position:relative}

/* centred hero layout */
.l-center .ph-grid{grid-template-columns:1fr;justify-items:center;text-align:center}
.l-center .ph-grid>div:first-child{display:flex;flex-direction:column;align-items:center}
.l-center .ph .sum{margin-inline:auto}
.l-center .ph .btns,.l-center .ph .facts{justify-content:center}
.l-center .ph .media{width:min(1040px,100%);margin-top:24px}

/* wide sans headings need smaller sizes than the condensed serif */
.t-neon,.t-soft,.t-aurora,.t-blueprint{--big:clamp(52px,8vw,132px)}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) .ph h1{font-size:var(--big)!important;line-height:.92!important}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) .phero h1{font-size:clamp(50px,7.4vw,118px)!important;line-height:.95!important}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) :is(.split h2,.shead h2,.sec-head h2){font-size:clamp(36px,5vw,76px)!important;line-height:.98!important}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) :is(.cta-band h2,.nextp b){font-size:clamp(44px,7vw,112px)!important;line-height:.95!important}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) :is(.ph .tl){font-size:clamp(20px,2vw,28px)!important;font-weight:500!important;letter-spacing:-.02em!important}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) .fcell h3{font-size:clamp(20px,1.7vw,24px)!important;letter-spacing:-.02em!important}
:is(.t-neon,.t-soft,.t-aurora,.t-blueprint) .faq summary{font-size:clamp(17px,1.6vw,21px)!important;letter-spacing:-.01em!important}

/* ═════════ NEON — TipzPop ═════════ */
.t-neon{--bg:#0b0613;--bg2:#120a1d;--card:#160d23;--line:rgba(225,195,255,.1);--line2:rgba(225,195,255,.2);--ink:#f7f0ff;--mute:#ad9fc2;--dim:#7a6c8f;
  --hf:"Grotesk";--hw:700;--hls:-.045em;--ems:normal;--r:26px;--rb:999px;background:var(--bg)}
.t-neon::after{background:
  radial-gradient(38% 46% at 18% 12%,rgba(194,92,255,.28),transparent 70%),
  radial-gradient(34% 40% at 88% 30%,rgba(255,92,168,.22),transparent 70%),
  radial-gradient(40% 40% at 60% 100%,rgba(255,179,92,.12),transparent 70%);
  animation:neonShift 14s ease-in-out infinite alternate}
@keyframes neonShift{to{transform:translate3d(0,-3%,0) scale(1.06)}}
.t-neon :is(h1,h2,h3) em,.t-neon .ph h1{background:linear-gradient(92deg,#f7f0ff 10%,#d38bff 45%,#ff6fb5 70%,#ffb35c);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-neon :is(.fcell,.spec,.step,.dl-band,.faq details,.notice){border:1px solid transparent;
  background:linear-gradient(var(--card),var(--card)) padding-box,linear-gradient(140deg,rgba(194,92,255,.55),rgba(255,255,255,.04) 40%,rgba(255,92,168,.45)) border-box}
.t-neon .fgrid{border:0;gap:14px}.t-neon .fcell{border-right:1px solid transparent;border-bottom:1px solid transparent}
.t-neon .fcell:hover{box-shadow:0 20px 60px -20px rgba(194,92,255,.5)}
.t-neon .btn.pc{background:linear-gradient(92deg,#a24bff,#ff4fa3);border:0;color:#fff;box-shadow:0 12px 40px -10px rgba(194,92,255,.7)}
.t-neon .ph .media .gwrap{box-shadow:0 60px 140px -40px rgba(194,92,255,.55)}
.t-neon .facts b{color:#fff}

/* ═════════ ARENA — Codian Esports ═════════ */
.t-arena{--bg:#08080a;--bg2:#0e0e11;--card:#111115;--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);--ink:#f4f4f6;--mute:#9b9ba6;--dim:#66666f;
  --hf:"Anton";--hw:400;--htt:uppercase;--hls:.005em;--ems:normal;--r:0;--rb:0;background:var(--bg)}
.t-arena::after{background:
  repeating-linear-gradient(135deg,rgba(255,77,46,.06) 0 2px,transparent 2px 16px),
  radial-gradient(60% 50% at 80% 0%,rgba(255,77,46,.18),transparent 70%),
  repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%)}
.t-arena :is(h1,h2,h3) em{color:var(--acc)}
.t-arena .ph h1,.t-arena .phero h1{line-height:.88!important;font-size:clamp(64px,10vw,168px)!important}
.t-arena :is(.fcell,.spec,.step,.dl-band,.faq details,.notice,.ph .media .gwrap,.doc .tldr){
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));border-left:3px solid var(--acc)}
.t-arena .fgrid{border:0;gap:10px}.t-arena .fcell{background:var(--card);border-right:0;border-bottom:0}
.t-arena .fcell:hover{background:linear-gradient(120deg,rgba(255,77,46,.14),var(--card) 60%)}
.t-arena .btn{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));text-transform:uppercase;letter-spacing:.06em;font:600 12.5px var(--mono)}
.t-arena .mono::before{content:"▸ ";color:var(--acc)}
.t-arena .facts b{color:var(--acc)}
.t-arena .gallery img{border-radius:6px}
.t-arena .phone{border-radius:28px}

/* ═════════ SOFT GLASS — SmartConnect ═════════ */
.t-soft{--bg:#0c0b18;--bg2:#121026;--card:rgba(255,255,255,.045);--line:rgba(200,190,255,.1);--line2:rgba(200,190,255,.2);--ink:#f2f0ff;--mute:#a8a5c8;--dim:#75729a;
  --hf:"Grotesk";--hw:600;--hls:-.04em;--ems:normal;--r:30px;--rb:999px;background:var(--bg)}
.t-soft::after{background:
  radial-gradient(30% 34% at 15% 25%,rgba(143,125,255,.35),transparent 70%),
  radial-gradient(28% 32% at 85% 15%,rgba(79,209,255,.25),transparent 70%),
  radial-gradient(30% 30% at 70% 85%,rgba(255,140,220,.14),transparent 70%);
  filter:blur(20px);animation:softFloat 18s ease-in-out infinite alternate}
@keyframes softFloat{50%{transform:translate3d(2%,3%,0)}100%{transform:translate3d(-2%,-1%,0) scale(1.05)}}
.t-soft :is(h1,h2,h3) em{color:var(--acc)}
.t-soft :is(.fcell,.spec,.step,.dl-band,.faq details,.notice,.doc .tldr){background:var(--card);border:1px solid var(--line2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.t-soft .fgrid{border:0;gap:14px}.t-soft .fcell{padding:30px}
.t-soft .fcell:hover{transform:translateY(-4px);transition:transform .5s var(--ease),background .4s;background:rgba(143,125,255,.1)}
.t-soft .btn.pc{background:linear-gradient(135deg,#8f7dff,#4fd1ff);border:0;color:#0b0a18}
.t-soft .faq details{margin-bottom:10px;padding:0 22px;border:1px solid var(--line2)}
.t-soft .faq{border:0}

/* ═════════ AURORA — PXJ AI Master, Super AI ═════════ */
.t-aurora{--bg:#050c0d;--bg2:#08151a;--card:rgba(255,255,255,.04);--line:rgba(160,255,235,.09);--line2:rgba(160,255,235,.18);--ink:#ecfffb;--mute:#93b8b2;--dim:#5f817b;
  --hf:"Grotesk";--hw:500;--hls:-.05em;--ems:normal;--r:22px;--rb:14px;background:var(--bg)}
.t-aurora::after{inset:-20% -10% auto;height:85vh;
  background:linear-gradient(100deg,transparent 10%,rgba(47,211,181,.35) 30%,rgba(124,108,255,.35) 50%,rgba(47,211,181,.25) 70%,transparent 90%);
  background-size:200% 100%;filter:blur(70px);transform:skewY(-8deg);animation:aur 12s ease-in-out infinite alternate;opacity:.7}
@keyframes aur{to{background-position:100% 0;transform:skewY(-4deg) translateY(4%)}}
.t-aurora :is(h1,h2,h3) em{background:linear-gradient(90deg,var(--acc),#a49bff);-webkit-background-clip:text;background-clip:text;color:transparent}
.t-aurora :is(.fcell,.spec,.step,.dl-band,.faq details,.notice,.doc .tldr){background:var(--card);border:1px solid var(--line2);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.t-aurora .fgrid{border:0;gap:12px}
.t-aurora .fcell .mono{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(47,211,181,.12)}
.t-aurora .btn.pc{background:linear-gradient(135deg,var(--acc),#7c6cff);border:0;color:#04110f}

/* ═════════ PAPER — Whiteboard Studio Pro (light) ═════════ */
.t-paper{--bg:#f3efe6;--bg2:#ece6d8;--card:#fffdf7;--line:rgba(25,25,40,.12);--line2:rgba(25,25,40,.22);--ink:#17171f;--mute:#56535f;--dim:#8b8794;
  --r:6px;--rb:10px;background:var(--bg);color:var(--ink);color-scheme:light}
.t-paper::after{background-image:linear-gradient(rgba(60,110,220,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,220,.08) 1px,transparent 1px),
  linear-gradient(rgba(60,110,220,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(60,110,220,.04) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px}
.t-paper::before{opacity:.03}
.t-paper :is(h1,h2,h3) em{font-family:"Hand",cursive!important;font-style:normal;color:var(--acc);font-weight:700;font-size:1.12em;letter-spacing:0}
.t-paper .nav{background:rgba(255,253,247,.8);border-color:var(--line2)}
.t-paper .nav ul{background:rgba(255,253,247,.97)}
.t-paper .btn{background:#fff;border-color:var(--line2);color:var(--ink)}
.t-paper .btn:hover{background:#fff;border-color:var(--ink)}
.t-paper .btn.solid,.t-paper .btn.pc{background:var(--ink);border-color:var(--ink);color:#fff}
.t-paper .btn.pc{background:var(--acc);border-color:var(--acc)}
.t-paper .edge-blur{display:none}
.t-paper :is(.fcell,.spec,.step,.dl-band,.notice,.faq details,.doc .tldr){background:var(--card);box-shadow:0 1px 0 var(--line),0 18px 40px -26px rgba(20,20,40,.35)}
.t-paper .fgrid{border:0;gap:16px}.t-paper .fcell{border:1px solid var(--line)}
.t-paper .fcell:nth-child(odd){transform:rotate(-.6deg)}.t-paper .fcell:nth-child(even){transform:rotate(.5deg)}
.t-paper .ph .media .gwrap{transform:rotate(1.6deg);box-shadow:0 30px 60px -30px rgba(20,20,40,.5);border:10px solid #fff;border-radius:4px;overflow:visible}
.t-paper .ph .media .gwrap::before{content:"";position:absolute;top:-18px;left:50%;width:120px;height:32px;transform:translateX(-50%) rotate(-3deg);
  background:rgba(255,230,140,.75);box-shadow:0 2px 6px rgba(0,0,0,.08);z-index:2}
.t-paper .lgal img{border:8px solid #fff;box-shadow:0 20px 40px -24px rgba(20,20,40,.5)}
.t-paper .lgal img:nth-child(odd){transform:rotate(-1deg)}.t-paper .lgal img:nth-child(even){transform:rotate(1.2deg)}
.t-paper .dl-band{background:var(--card)}
.t-paper .nextp:hover{background:rgba(90,169,255,.08)}
.t-paper .foot-name{-webkit-text-stroke:1px rgba(20,20,40,.12)}
.t-paper .stack span{background:#fff}
.t-paper .pill{background:#fff}
.t-paper .crumbs,.t-paper .mono{color:var(--dim)}
.t-paper .split h2,.t-paper .shead h2{color:var(--ink)}
.t-paper ::selection{background:var(--acc);color:#fff}

/* ═════════ TERMINAL — NexAPI, Phantom, Bots ═════════ */
.t-terminal{--bg:#050806;--bg2:#08100a;--card:#0a110c;--line:rgba(140,255,170,.1);--line2:rgba(140,255,170,.22);--ink:#dcf9e2;--mute:#83a68b;--dim:#56755d;
  --hf:var(--mono);--hw:500;--hls:-.05em;--ems:normal;--r:6px;--rb:4px;background:var(--bg)}
.t-terminal::after{background:
  repeating-linear-gradient(0deg,rgba(140,255,170,.035) 0 1px,transparent 1px 3px),
  radial-gradient(70% 60% at 50% 0%,color-mix(in srgb,var(--acc) 16%,transparent),transparent 70%),
  radial-gradient(120% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.6))}
.t-terminal .ph h1{font-size:clamp(42px,6.6vw,108px)!important;line-height:1!important}
.t-terminal .ph h1::before{content:"> ";color:var(--acc)}
.t-terminal .ph h1::after{content:"";display:inline-block;width:.5em;height:.08em;margin-left:.08em;background:var(--acc);vertical-align:.08em;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.t-terminal :is(.split h2,.shead h2,.cta-band h2,.nextp b){font-size:clamp(32px,4.4vw,68px)!important;line-height:1.02!important}
.t-terminal .ph .tl{font-size:clamp(18px,1.8vw,24px)!important}
.t-terminal .fcell h3{font-size:18px!important}
.t-terminal .faq summary{font-size:17px!important}
.t-terminal :is(h1,h2,h3) em{color:var(--acc)}
.t-terminal :is(.fcell,.spec,.step,.dl-band,.faq details,.notice,.doc .tldr){border:1px dashed var(--line2);background:var(--card)}
.t-terminal .fgrid{border:0;gap:10px}
.t-terminal .fcell .mono::before{content:"$ ";color:var(--acc)}
.t-terminal .ph .media .gwrap{border:1px solid var(--line2);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 100px -40px color-mix(in srgb,var(--acc) 40%,transparent)}
.t-terminal .ph .media .gwrap::before{content:"● ● ●   ~/" attr(data-slug);display:block;padding:9px 14px;font:400 11px var(--mono);color:var(--dim);border-bottom:1px solid var(--line);background:#07100a}
.t-terminal .btn{font:500 12.5px var(--mono)}
.t-terminal .btn.pc{color:#041006}
.t-terminal .facts b{color:var(--acc)}

/* ═════════ BLUEPRINT — UI Designer, Macro Recorder, Smart Tube ═════════ */
.t-blueprint{--bg:#071222;--bg2:#0a182c;--card:#0c1b30;--line:rgba(140,190,255,.12);--line2:rgba(140,190,255,.26);--ink:#e9f2ff;--mute:#8fa8c7;--dim:#5d7798;
  --hf:"Grotesk";--hw:600;--hls:-.045em;--ems:normal;--r:2px;--rb:6px;background:var(--bg)}
.t-blueprint::after{background-image:
  linear-gradient(rgba(140,190,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(140,190,255,.09) 1px,transparent 1px),
  linear-gradient(rgba(140,190,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(140,190,255,.04) 1px,transparent 1px);
  background-size:96px 96px,96px 96px,16px 16px,16px 16px;-webkit-mask-image:radial-gradient(90% 80% at 50% 20%,#000,transparent);mask-image:radial-gradient(90% 80% at 50% 20%,#000,transparent)}
.t-blueprint :is(h1,h2,h3) em{color:var(--acc)}
.t-blueprint :is(.fcell,.spec,.step,.dl-band,.notice,.ph .media .gwrap){position:relative;
  background:linear-gradient(var(--acc),var(--acc)) 0 0/14px 2px no-repeat,linear-gradient(var(--acc),var(--acc)) 0 0/2px 14px no-repeat,
  linear-gradient(var(--acc),var(--acc)) 100% 100%/14px 2px no-repeat,linear-gradient(var(--acc),var(--acc)) 100% 100%/2px 14px no-repeat,var(--card);border:1px solid var(--line)}
.t-blueprint .fgrid{border:0;gap:12px}
.t-blueprint .ph .media .gwrap{padding:12px}
.t-blueprint .fcell .mono{font-size:10px}
.t-blueprint .fcell .mono::after{content:" / spec";color:var(--dim)}

/* ═════════ FESTIVE — My Wish ═════════ */
.t-festive{--bg:#14070f;--bg2:#1b0a15;--card:#1f0d19;--line:rgba(255,190,220,.1);--line2:rgba(255,190,220,.22);--ink:#fff0f6;--mute:#caa0b5;--dim:#8d6779;
  --r:30px;--rb:999px;background:var(--bg)}
.t-festive::after{background-image:
  radial-gradient(circle,#ff5c9a 0 3px,transparent 4px),radial-gradient(circle,#ffd25c 0 2.5px,transparent 3.5px),
  radial-gradient(circle,#8f7dff 0 2.5px,transparent 3.5px),radial-gradient(circle,#5cffd2 0 2px,transparent 3px);
  background-size:220px 260px,180px 200px,260px 240px,150px 170px;background-position:0 0,60px 90px,120px 40px,30px 140px;opacity:.35;animation:confetti 40s linear infinite}
@keyframes confetti{to{background-position:0 1040px,60px 890px,120px 1000px,30px 820px}}
.t-festive :is(h1,h2,h3) em{color:var(--acc)}
.t-festive .ph h1{color:#fff}
.t-festive :is(.fcell,.spec,.step,.dl-band,.notice,.faq details){background:var(--card);border:1px solid var(--line2)}
.t-festive .fgrid{border:0;gap:14px}
.t-festive .fcell:hover{transform:translateY(-6px) rotate(-.6deg);transition:transform .5s var(--ease)}
.t-festive .btn.pc{background:linear-gradient(135deg,#ff5c9a,#ffb35c);border:0;color:#2a0717}
.t-festive .ph .media .gwrap{box-shadow:0 50px 120px -40px rgba(255,92,154,.6)}

/* sub-site extras (esports / connect / ai product pages) */
.t-arena .phero h1 .ln{padding-bottom:0}
.t-arena .check li::before{border-radius:0}
.t-soft .phone,.t-aurora .phone{box-shadow:0 60px 140px -40px color-mix(in srgb,var(--acc) 55%,transparent)}
.t-soft .marquee,.t-aurora .marquee,.t-arena .marquee{background:transparent}
.t-arena .marquee span{font-family:"Anton"!important;text-transform:uppercase}
:is(.t-soft,.t-aurora) .marquee span{font-family:"Grotesk"!important;font-weight:600;font-style:normal!important;letter-spacing:-.03em}