/* ========================================================
   $ASHCAT — Still Typing (the office banner, brought to life)
   ======================================================== */

:root{
  --ink: #171225;
  --paper: #fff8ef;
  --office-amber: #e8b23d;
  --office-dark: #241a12;
  --rainbow-1: #ff3b6b;
  --rainbow-2: #ff9f3b;
  --rainbow-3: #ffe33b;
  --rainbow-4: #3bff8f;
  --rainbow-5: #3bd0ff;
  --rainbow-6: #b23bff;
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; }

/* ---------------- marquee ---------------- */
.marquee-top{
  position: sticky; top:0; z-index: 60;
  background: linear-gradient(90deg, var(--rainbow-1), var(--rainbow-2), var(--rainbow-3), var(--rainbow-4), var(--rainbow-5), var(--rainbow-6), var(--rainbow-1));
  background-size: 200% 100%;
  animation: rainbowSlide 6s linear infinite;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .03em;
  color: #14101f;
  padding: 5px 0;
}
.marquee-track{ display:inline-flex; animation: marquee 18s linear infinite; }
.marquee-track span{ padding-right: 2rem; }
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
@keyframes rainbowSlide{ from{ background-position: 0% 0; } to{ background-position: 200% 0; } }

/* ---------------- nav ---------------- */
.nav{
  position: sticky; top: 26px; z-index: 55;
  backdrop-filter: blur(10px);
  background: rgba(20,15,30,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav-inner{
  max-width: 1180px; margin: 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding: .7rem 1.25rem;
  gap: 1rem;
}
.brand{
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem;
  text-decoration:none; color: var(--paper);
  display:flex; align-items:center; gap:.5rem;
}
.brand-dot{
  width:12px; height:12px; border-radius:50%;
  background: conic-gradient(from 0deg, var(--rainbow-1), var(--rainbow-2), var(--rainbow-3), var(--rainbow-4), var(--rainbow-5), var(--rainbow-6), var(--rainbow-1));
  box-shadow: 0 0 10px rgba(255,255,255,.5);
  flex-shrink:0;
}
.nav-links{ display:flex; gap: 1.35rem; flex-wrap:wrap; }
.nav-links a{
  text-decoration:none; font-size:.78rem; font-weight:700; letter-spacing:.04em;
  color: rgba(255,248,239,.8);
  transition: color .15s ease;
}
.nav-links a:hover{ color: var(--rainbow-3); }
.sound-btn{
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  color: var(--paper); border-radius: 999px; width:38px; height:38px;
  font-size: 1rem; cursor:pointer; flex-shrink:0;
  transition: transform .15s ease, background .15s ease;
}
.sound-btn:hover{ transform: scale(1.08); background: rgba(255,255,255,.16); }

/* ---------------- generic scene / section ---------------- */
.scene{ position:relative; width:100%; min-height: 100vh; overflow:hidden; }
.section{ padding: 5.5rem 1.25rem; max-width: 1180px; margin: 0 auto; }
.section-title{
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  text-align:center; margin: 0 0 .6rem;
  background: linear-gradient(90deg, var(--rainbow-2), var(--rainbow-4), var(--rainbow-5));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.section-sub{
  text-align:center; opacity:.7; max-width: 560px; margin: 0 auto 2.6rem;
  font-size:.92rem;
}

/* ================= HERO: THE DESK ================= */
.office-scene{
  display:flex; align-items:flex-end;
}
.office-bg-wrap{ position:absolute; inset:0; overflow:hidden; }
.office-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: 50% 35%;
  filter: brightness(.82) saturate(1.08);
  animation: kenBurns 22s ease-in-out infinite alternate;
}
@keyframes kenBurns{
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.07) translate(-0.6%, -0.4%); }
}
.office-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(0deg, rgba(23,17,10,.92) 0%, rgba(23,17,10,.45) 38%, rgba(23,17,10,.08) 62%, rgba(23,17,10,.28) 100%);
}
.office-content{
  position:relative; z-index:2;
  padding: 0 1.5rem 4.5rem;
  width:100%;
  text-align:center;
}
.eyebrow{
  font-family: var(--font-mono); font-size:.75rem; letter-spacing:.15em;
  color: var(--office-amber); font-weight:700; margin:0 0 .6rem;
}
.title{
  font-family: var(--font-display); font-weight:800;
  font-size: clamp(2.6rem, 8vw, 5rem);
  margin: 0; line-height:1;
  color:#fff;
  text-shadow: 0 0 40px rgba(232,178,61,.35);
  letter-spacing: -.01em;
}
.subtitle{
  font-size: clamp(.95rem, 2vw, 1.15rem);
  max-width: 560px; margin: 1.1rem auto 1.8rem;
  color: rgba(255,248,239,.85);
  line-height:1.5;
}
.subtitle em{ color: var(--rainbow-3); font-style:normal; }
.hint{ margin-top:1rem; font-size:.75rem; opacity:.5; }

.screen-glow{
  position:absolute; left:0; top:0;
  width: 90px; height: 60px;
  transform: translate(-50%,-50%);
  background: radial-gradient(ellipse at center, rgba(80,255,140,.55), transparent 70%);
  filter: blur(6px);
  animation: screenPulse 2.6s ease-in-out infinite;
  pointer-events:none;
  z-index:3;
}
@keyframes screenPulse{ 0%,100%{ opacity:.4;} 45%{ opacity:1;} 55%{opacity:.55;} 100%{opacity:.4;} }

/* little bits of "life" laid over the office photo — positioned in JS
   (script.js) to the mascot's actual eyes/mug/keyboard, because the photo
   is shown with object-fit:cover and crops differently on every screen. */
.eyelid{
  position:absolute; left:0; top:0;
  width: 30px; height:16px;
  background: linear-gradient(180deg, #c7c0b8, #948c84);
  border-radius: 50%;
  transform: translate(-50%,-50%) scaleY(0.04);
  transform-origin:center;
  filter: blur(.3px);
  pointer-events:none; z-index:3;
  animation: blink 5.2s ease-in-out infinite;
}
.eyelid-r{ animation-delay: .04s; }
@keyframes blink{
  0%, 92%, 100% { transform: translate(-50%,-50%) scaleY(0.04); }
  95%           { transform: translate(-50%,-50%) scaleY(1); }
  97%           { transform: translate(-50%,-50%) scaleY(0.04); }
}

.screen-ticker{
  position:absolute; left:0; top:0;
  transform: translate(-50%,-50%);
  font-family: var(--font-mono); font-weight:700; font-size: 11px;
  color: #7bffb0; text-shadow: 0 0 6px rgba(123,255,176,.8);
  pointer-events:none; z-index:3; white-space:nowrap;
}

.paw{
  position:absolute; left:0; top:0;
  width: 30px; height:18px;
  background: radial-gradient(ellipse at center, rgba(255,252,244,.95), rgba(255,252,244,0) 72%);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.55));
  border-radius:50%;
  transform: translate(-50%,-50%);
  pointer-events:none; z-index:6;
  animation: pawTap 0.5s ease-in-out infinite;
}
.paw-r{ animation-delay: .25s; }
@keyframes pawTap{
  0%, 100%{ transform: translate(-50%,-40%) scale(1,.7); opacity:.65; }
  40%     { transform: translate(-50%,-70%) scale(.9,1.1); opacity:1; }
  55%     { transform: translate(-50%,-40%) scale(1,.7); opacity:.65; }
}

.steam-wrap{ position:absolute; left:0; top:0; z-index:2; pointer-events:none; }
.steam{
  position:absolute; left:0; bottom:0;
  width: 10px; height: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.55));
  border-radius: 50%;
  filter: blur(3px);
  opacity:0;
  animation: steamRise 3.6s ease-in infinite;
}
.steam.s2{ animation-delay: 1.2s; left:-6px; }
.steam.s3{ animation-delay: 2.4s; left:6px; }
@keyframes steamRise{
  0%   { transform: translate(-50%,0) scale(1); opacity:0; }
  15%  { opacity:.5; }
  60%  { opacity:.3; }
  100% { transform: translate(-50%,-70px) scale(1.8); opacity:0; }
}

/* ================= CA / ACTIONS BAR ================= */
.cta-bar{
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center;
  gap: 1.1rem;
  padding: 2.4rem 1.25rem;
  background: linear-gradient(180deg, var(--office-dark), var(--ink));
}
.ca-box{
  background: rgba(255,255,255,.05); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 16px; padding: .8rem 1.1rem;
  max-width: 480px; width: 100%;
  text-align:center;
}
.ca-label{ font-family: var(--font-mono); font-size:.68rem; letter-spacing:.12em; opacity:.65; display:block; margin-bottom:.3rem; }
.ca-row{ display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap; }
.ca-row span{ font-family: var(--font-mono); font-size:.82rem; font-weight:600; word-break: break-all; }
.copy-btn{
  font-family: var(--font-mono); font-weight:700; font-size:.68rem;
  background: var(--rainbow-4); color:#0d2b1a; border:none; border-radius:999px;
  padding:.35rem .8rem; cursor:pointer; letter-spacing:.05em;
  transition: transform .15s ease;
}
.copy-btn:hover{ transform: scale(1.06); }
.copy-btn.small{ font-size:.62rem; padding:.28rem .65rem; }

.action-row{
  display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center;
}
.action-btn{
  text-decoration:none; font-family: var(--font-display); font-weight:700; font-size:.88rem;
  padding: .8rem 1.5rem; border-radius:999px; letter-spacing:.02em;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.action-btn:hover{ transform: translateY(-2px); }
.action-btn.buy{ background: linear-gradient(90deg, var(--rainbow-4), var(--rainbow-5)); color:#0d2b1a; }
.action-btn.chart{ background: rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.35); }
.action-btn.x{ background:#171225; color:#fff; }

/* ================= LORE ================= */
.lore-section{ background: var(--ink); }
.lore-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap:1.2rem; }
.lore-card{
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.1); border-radius: 18px; padding: 1.6rem;
  transition: transform .2s ease, border-color .2s ease;
}
.lore-card:hover{ transform: translateY(-4px); border-color: rgba(255,255,255,.3); }
.lore-icon{ font-size:1.8rem; margin-bottom:.6rem; }
.lore-card h3{ font-family: var(--font-display); font-size:1.1rem; margin: 0 0 .5rem; letter-spacing:.03em; }
.lore-card p{ font-size:.88rem; line-height:1.6; opacity:.8; margin:0; }

/* ================= STATS ================= */
.stats-section{ background: var(--ink); }
.stats-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap:1rem; }
.stat-card{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:1.3rem; text-align:center;
}
.stat-label{ display:block; font-family: var(--font-mono); font-size:.68rem; opacity:.6; letter-spacing:.08em; margin-bottom:.5rem; }
.stat-value{ display:block; font-family: var(--font-mono); font-weight:700; font-size:1.35rem; color: var(--rainbow-4); }

/* ================= HOW TO BUY ================= */
.howto-section{ background: var(--ink); }
.howto-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap:1.2rem; }
.howto-step{
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:1.5rem;
}
.step-num{ font-family: var(--font-mono); font-size:1.6rem; font-weight:700; color: var(--rainbow-2); opacity:.85; }
.howto-step h3{ font-family: var(--font-display); font-size:1rem; margin:.6rem 0 .5rem; letter-spacing:.03em; }
.howto-step p{ font-size:.85rem; line-height:1.55; opacity:.78; margin:0; }

/* ================= FOOTER ================= */
.footer{ background:#0d0a17; padding: 2.6rem 1.25rem 3rem; border-top:1px solid rgba(255,255,255,.08); }
.footer-inner{ max-width: 1180px; margin:0 auto; text-align:center; }
.footer-brand{
  font-family: var(--font-display); font-weight:800; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; gap:.5rem; margin-bottom:1rem;
}
.footer-ca{
  display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap;
  font-family: var(--font-mono); font-size:.78rem; opacity:.85; margin-bottom:1rem;
}
.footer-links{ display:flex; gap:1.2rem; justify-content:center; flex-wrap:wrap; margin-bottom:1.6rem; font-size:.82rem; font-weight:700; }
.footer-links a{ text-decoration:none; }
.footer-links a:hover{ color: var(--rainbow-3); }
.footer-links .soon{ opacity:.4; }
.disclaimer{ font-size:.72rem; opacity:.45; max-width:640px; margin:0 auto; line-height:1.6; }

/* ================= RESPONSIVE ================= */
@media (max-width: 760px){
  .nav-links{ display:none; }
  .section{ padding: 3.6rem 1.1rem; }
  .cta-bar{ padding: 2rem 1.1rem; }
  /* the banner is a wide 3:1 desk shot — on a tall phone screen
     min-height:100vh forces object-fit:cover to zoom in so far that
     the mug/keyboard/screen fall outside the crop entirely and only
     the face is left. Capping the hero height keeps the whole desk
     in frame so the overlay effects still land on something visible. */
  .office-scene{ min-height: 92vw; }
  .office-content{ padding: 0 1.2rem 2.4rem; }
}