/* The What-If Lab: a louder, mechanical branch of the portal's navy/cyan system. */
.crazyPage main { overflow:hidden; }
.crazyGate {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
  align-items:center;
  gap:48px;
  margin-block:30px 70px;
  padding:48px;
  overflow:hidden;
  border:1px solid #45c8f54d;
  background:
    radial-gradient(circle at 88% 12%,#ff8a6520,transparent 32%),
    radial-gradient(circle at 50% 120%,#45c8f522,transparent 48%),
    linear-gradient(115deg,#0c1c34,#07111f 65%);
}
.crazyGate::before,.crazyHero::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:linear-gradient(#45c8f50b 1px,transparent 1px),linear-gradient(90deg,#45c8f50b 1px,transparent 1px);
  background-size:28px 28px;
  mask-image:linear-gradient(90deg,transparent,#000);
}
.crazyGateCopy { position:relative; z-index:1; }
.crazyGate h2 { margin:12px 0 16px; font-size:clamp(34px,4vw,58px); letter-spacing:-2px; }
.crazyGateCopy>p:not(.eyebrow) { max-width:570px; margin-bottom:24px; color:var(--muted); }
.crazyGateVisual { position:relative; min-height:260px; display:grid; place-content:center; text-align:center; }
.crazyGateVisual::before,.crazyGateVisual::after {
  content:'';
  position:absolute;
  inset:10% 4%;
  border:1px solid #45c8f54d;
  border-radius:50%;
  transform:rotate(-12deg);
}
.crazyGateVisual::after { inset:20% 14%; border-style:dashed; transform:rotate(18deg); }
.crazyGateWord { position:relative; font:clamp(64px,7vw,106px)/.88 var(--display); letter-spacing:-2px; color:var(--ink); text-shadow:0 0 36px #45c8f526; }
.crazyGateWord span { display:block; color:var(--accent); }
.crazyGateTag { position:relative; margin-top:22px; font:10px/1.6 var(--mono); letter-spacing:1px; color:#ffad8c; }

.crazyHero {
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);
  align-items:center;
  gap:60px;
  width:min(var(--width),100% - var(--gutter)*2);
  min-height:650px;
  margin-inline:auto;
  padding-block:70px;
}
.crazyHero::after {
  content:'';
  position:absolute;
  z-index:-2;
  width:640px;
  height:640px;
  right:-180px;
  top:-100px;
  border-radius:50%;
  background:radial-gradient(circle,#45c8f516,transparent 65%);
}
.crazyDisplay { position:relative; width:max-content; max-width:100%; margin:24px 0 32px; font:clamp(112px,14.5vw,210px)/.78 var(--display); letter-spacing:-5px; }
.crazyDisplay>span { color:transparent; -webkit-text-stroke:2px var(--accent); filter:drop-shadow(0 0 24px #45c8f533); }
.crazyDisplay>i { position:absolute; right:-48px; top:-10px; font:80px/1 var(--display); color:#ff8a65; transform:rotate(12deg); }
.crazyHero h1 { margin-bottom:18px; font-size:clamp(25px,3vw,42px); letter-spacing:-1px; }
.crazyHero .lead { max-width:690px; }
.crazyHero .actions { margin-top:28px; }
.crazySignal {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  justify-self:center;
  width:min(32vw,360px);
  aspect-ratio:1;
  border:1px solid #45c8f54d;
  border-radius:50%;
  background:radial-gradient(circle,#102b49 0 34%,#091629 35% 58%,transparent 59%);
  box-shadow:inset 0 0 60px #45c8f50d,0 0 80px #45c8f50b;
}
.crazySignal::before,.crazySignal::after { content:''; position:absolute; inset:-18px; border:1px dashed #45c8f54d; border-radius:50%; animation:crazy-spin 28s linear infinite; }
.crazySignal::after { inset:18px; border-color:#ff8a6559; animation-direction:reverse; animation-duration:19s; }
.crazySignalIndex { font:9px/1 var(--mono); letter-spacing:3px; color:var(--muted); }
.crazySignal strong { font:clamp(100px,12vw,160px)/.95 var(--display); color:var(--accent); text-shadow:0 0 34px #45c8f544; }
.crazySignalStatus { max-width:70%; font:10px/1.5 var(--mono); text-align:center; color:#ffad8c; }
.crazySpark { position:absolute; width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 18px var(--accent); }
.crazySparkA { left:7%; top:29%; }
.crazySparkB { right:4%; bottom:32%; background:#ff8a65; box-shadow:0 0 18px #ff8a65; }
.crazySparkC { left:28%; bottom:2%; width:5px; height:5px; }
@keyframes crazy-spin { to { transform:rotate(360deg); } }

.crazyCatalog { padding-top:60px; border-top:1px solid var(--line); }
.crazyGrid { grid-template-columns:1fr; }
.crazyGrid .toolCard { border-color:#45c8f538; background:linear-gradient(135deg,#0c1b30,#081221); box-shadow:0 26px 80px #0005; }
.crazyGrid .toolCard:hover { border-color:var(--accent); background:#0c1c31; }
.crazyGrid .cardTop { padding:20px 28px 0; }
.crazyGrid .featuredToolText { padding:30px 34px 32px; }
.crazyGrid .toolCard h3 { font-size:clamp(24px,3vw,36px); }
.crazyGrid .toolCardText>p { max-width:960px; font-size:14px; }
.crazyGrid .toolNote { margin-top:12px; color:#ffad8c!important; }
.crazySpecs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:22px; border-block:1px solid var(--line); }
.crazySpecs>span { display:flex; flex-direction:column; gap:5px; padding:25px 28px; }
.crazySpecs>span+span { border-left:1px solid var(--line); }
.crazySpecs b { font:clamp(28px,3vw,42px)/1.2 var(--display); letter-spacing:.5px; color:var(--ink); }
.crazySpecs em { font:12px/1 var(--mono); color:var(--accent); }
.crazySpecs small { color:var(--muted); font-size:11px; }
.crazyDisclaimer { display:flex; align-items:center; gap:28px; margin-block:40px 0; padding:34px 40px; border:1px solid #ff8a6538; background:#ff8a6508; }
.crazyDisclaimerMark { flex:0 0 auto; font:72px/1 var(--display); color:#ff8a65; }
.crazyDisclaimer h2 { margin-bottom:8px; font-size:20px; }
.crazyDisclaimer p { max-width:940px; color:var(--muted); font-size:13px; }
.crazyBack { padding-bottom:80px; }

.motion-paused .crazySignal::before,.motion-paused .crazySignal::after { animation-play-state:paused; }
@media(max-width:900px) {
  .crazyGate { gap:25px; padding:34px; }
  .crazyHero { gap:25px; min-height:580px; }
  .crazyDisplay { font-size:14vw; }
  .crazyDisplay>i { right:-30px; font-size:60px; }
}
@media(max-width:650px) {
  .crazyGate { grid-template-columns:1fr; margin-block:10px 45px; padding:28px 24px; }
  .crazyGateVisual { min-height:190px; }
  .crazyGateWord { font-size:76px; }
  .crazyHero { grid-template-columns:1fr; min-height:0; padding-block:48px 58px; }
  .crazyDisplay { margin-block:25px; font-size:clamp(100px,30vw,150px); letter-spacing:-3px; }
  .crazyDisplay>i { right:-24px; font-size:48px; }
  .crazySignal { width:230px; margin-top:20px; }
  .crazySignal strong { font-size:105px; }
  .crazyGrid .cardTop { padding:18px 20px 0; }
  .crazyGrid .featuredToolText { padding:24px 20px; }
  .crazySpecs>span { padding:20px 12px; }
  .crazySpecs b { font-size:25px; }
  .crazySpecs em { display:block; margin-top:5px; font-size:9px; }
  .crazyDisclaimer { align-items:flex-start; gap:18px; padding:26px 22px; }
  .crazyDisclaimerMark { font-size:48px; }
}
@media(max-width:360px) {
  .crazyDisplay { font-size:94px; }
  .crazyGateWord { font-size:66px; }
  .crazySpecs small { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  .crazySignal::before,.crazySignal::after { animation:none; }
}
@media print { .crazySignal::before,.crazySignal::after { animation:none; } }