/* ============================================
   ZERO DOOR SOFTWARE — Panel-Based Navigation
   Nothing-inspired: B&W, dot grid, glitch FX
   ============================================ */

/* --- Design Tokens --- */
:root {
  --font-display: 'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', monospace;

  --text-2xs:  clamp(0.5rem, 0.5rem + 0.1vw, 0.625rem);
  --text-xs:   clamp(0.625rem, 0.6rem + 0.15vw, 0.75rem);
  --text-sm:   clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
  --text-lg:   clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --text-3xl:  clamp(2.5rem, 1rem + 4vw, 5rem);
  --text-hero: clamp(3.5rem, 1rem + 8vw, 10rem);

  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem;
  --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem;

  --content-max: 1100px;
  --side-nav-w: 90px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);

  --cursor-x: 50%;
  --cursor-y: 50%;
}

/* --- Colors (dark only) --- */
:root, [data-theme="dark"] {
  --color-bg: #0a0a0a;
  --color-surface: #111111;
  --color-surface-2: #1a1a1a;
  --color-border: rgba(255,255,255,0.08);
  --color-border-strong: rgba(255,255,255,0.15);
  --color-text: #ffffff;
  --color-text-muted: rgba(255,255,255,0.5);
  --color-text-faint: rgba(255,255,255,0.25);
  --color-dot: rgba(255,255,255,0.07);
}

/* --- Reset --- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{
  height:100dvh;
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.6;
  color:var(--color-text);
  background:var(--color-bg);
  overflow:hidden; /* no scroll — panels */
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,h5,h6{text-wrap:balance;line-height:1.1}
p,li,figcaption{text-wrap:pretty;max-width:60ch}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::selection{background:rgba(255,255,255,0.2);color:var(--color-text)}
:focus-visible{outline:1px solid var(--color-text);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ======================
   DOT GRID
   ====================== */
.dot-grid{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--color-dot) 1px,transparent 1px);
  background-size:24px 24px;
}

.cursor-ripple{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(520px circle at var(--cursor-x) var(--cursor-y),
    rgba(255,255,255,0.08), transparent 58%);
  mix-blend-mode:screen;
  transition:background-position var(--transition-interactive),background-size var(--transition-interactive);
}

/* ======================
   TRANSITION OVERLAY
   ====================== */
.transition-overlay{
  position:fixed;inset:0;z-index:1000;
  pointer-events:none;opacity:0;
  transition:opacity .15s ease;
}
.transition-overlay.active{opacity:1;pointer-events:all}

.noise-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;mix-blend-mode:screen;
}
.transition-overlay.active .noise-canvas{
  opacity:.35;
}

.transition-wipe{
  position:absolute;inset:0;
  background:var(--color-bg);
  transform:scaleY(0);transform-origin:top;
}
.transition-overlay.active .transition-wipe{
  animation:wipeIn .4s var(--ease-out) forwards, wipeOut .35s var(--ease-in) .35s forwards;
}
@keyframes wipeIn{to{transform:scaleY(1)}}
@keyframes wipeOut{from{transform:scaleY(1);transform-origin:bottom}to{transform:scaleY(0);transform-origin:bottom}}

.glitch-lines{
  position:absolute;inset:0;overflow:hidden;opacity:0;
}
.transition-overlay.active .glitch-lines{
  animation:glitchFlash .7s steps(3) forwards;
}
@keyframes glitchFlash{
  0%,100%{opacity:0}
  10%,30%,50%{opacity:1}
  20%,40%,60%{opacity:0}
}
.glitch-line{
  position:absolute;left:0;right:0;height:2px;
  background:var(--color-text);opacity:.15;
}

/* ======================
   SIDE NAVIGATION (desktop)
   ====================== */
.side-nav{
  position:fixed;top:0;left:0;bottom:0;
  width:var(--side-nav-w);z-index:500;
  display:flex;flex-direction:column;
  align-items:center;justify-content:space-between;
  padding:var(--space-6) 0;
  border-right:1px solid var(--color-border);
  background:oklch(from var(--color-bg) l c h / .9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}

.side-nav-top .nav-logo{display:block}
.side-nav-top .logo-mark{width:28px;height:28px;color:var(--color-text)}

.side-nav-links{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-5);
}

.nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:var(--space-2);position:relative;
  transition:opacity var(--transition-interactive);
  opacity:.35;
}
.nav-item:hover{opacity:.7}
.nav-item.active{opacity:1}

.nav-index{
  font-family:var(--font-mono);font-size:0.5625rem;
  letter-spacing:.12em;color:var(--color-text);
}
.nav-label{
  font-family:var(--font-mono);font-size:0.5rem;
  letter-spacing:.15em;color:var(--color-text);
  white-space:nowrap;
}
.nav-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--color-text);
  opacity:0;transition:opacity .3s var(--ease-out);
  margin-top:2px;
}
.nav-item.active .nav-dot{opacity:1}

.side-nav-bottom{
  font-family:var(--font-mono);font-size:0.5rem;
  color:var(--color-text-faint);letter-spacing:.1em;
}

/* ======================
   MOBILE HEADER
   ====================== */
.mobile-header{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:500;
  height:56px;padding:0 var(--space-4);
  align-items:center;justify-content:space-between;
  background:oklch(from var(--color-bg) l c h / .9);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--color-border);
}
.mobile-logo{width:28px;height:28px;color:var(--color-text)}
.mobile-logo-link{display:flex;align-items:center;gap:var(--space-3);}
.mobile-brand{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.2em;color:var(--color-text);font-weight:500;
}
.mobile-menu-toggle{
  width:44px;height:44px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;
}
.toggle-line{
  display:block;width:20px;height:1.5px;background:var(--color-text);
  transition:transform .3s var(--ease-out),opacity .3s var(--ease-out);
}
.mobile-menu-toggle.active .toggle-line:first-child{
  transform:rotate(45deg) translate(2.5px,2.5px);
}
.mobile-menu-toggle.active .toggle-line:last-child{
  transform:rotate(-45deg) translate(2.5px,-2.5px);
}

/* --- Mobile Overlay Menu --- */
.mobile-overlay{
  display:none;
  position:fixed;inset:0;z-index:499;
  background:var(--color-bg);
  flex-direction:column;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease-out);
}
.mobile-overlay.active{opacity:1;pointer-events:all}

.mobile-overlay-inner{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-8);
}
.mobile-nav-item{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-3) var(--space-6);
  transition:opacity var(--transition-interactive);
  opacity:.5;
}
.mobile-nav-item:active,.mobile-nav-item.active{opacity:1}
.mni-index{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);letter-spacing:.12em;
}
.mni-label{
  font-family:var(--font-mono);font-size:var(--text-lg);
  letter-spacing:.2em;color:var(--color-text);
}

@media(max-width:768px){
  .side-nav{display:none}
  .mobile-header{display:flex}
  .mobile-overlay{display:flex}
}

/* ======================
   PANELS
   ====================== */
.panel{
  position:fixed;
  top:0;left:var(--side-nav-w);right:0;bottom:0;
  z-index:1;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease-out);
}
.panel.active{opacity:1;pointer-events:all;z-index:2}
.panel.exiting{opacity:0;z-index:1}

#panel-roadmap{
  align-items:flex-start;
  overflow-y:auto;
}
#panel-roadmap .panel-inner{
  padding-top:var(--space-10);
  padding-bottom:var(--space-12);
  min-height:100%;
}
#panel-roadmap .panel-content-area{
  max-height:calc(100dvh - var(--space-10) - var(--space-12));
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--color-border) transparent;
  padding-bottom:var(--space-8);
}

.panel-inner{
  width:100%;max-width:var(--content-max);
  padding:var(--space-8) var(--space-8);
  position:relative;
}

/* --- Panel Layout (label + content side by side) --- */
.panel-layout{
  display:grid;grid-template-columns:140px 1fr;
  gap:var(--space-10);align-items:start;
}
.panel-label-area{
  display:flex;flex-direction:column;gap:var(--space-2);
  padding-top:var(--space-1);
}

/* --- Anim-in elements (staggered fade on panel enter) --- */
.anim-in{
  opacity:0;transform:translateY(12px);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);
}
.panel.active .anim-in{opacity:1;transform:translateY(0)}
.panel.active .anim-delay-1{transition-delay:.1s}
.panel.active .anim-delay-2{transition-delay:.2s}
.panel.active .anim-delay-3{transition-delay:.3s}

/* Reset when exiting */
.panel:not(.active) .anim-in{
  opacity:0;transform:translateY(12px);
  transition:none;
}

/* ======================
   LABELS
   ====================== */
.label{
  display:inline-block;font-family:var(--font-mono);
  font-size:var(--text-xs);font-weight:400;
  letter-spacing:.15em;color:var(--color-text-muted);
  text-transform:uppercase;
}

/* ======================
   HOME PANEL
   ====================== */
.home-content{position:relative;z-index:2}
.hero-title{
  font-family:var(--font-display);font-size:var(--text-hero);
  font-weight:700;line-height:.9;letter-spacing:-.03em;
  margin-top:var(--space-6);color:var(--color-text);
}
.hero-dot{color:var(--color-text-muted)}
.hero-subtitle{
  font-family:var(--font-body);font-size:var(--text-lg);
  font-weight:300;color:var(--color-text-muted);
  margin-top:var(--space-8);max-width:40ch;
}
.hero-meta{
  display:flex;align-items:center;gap:var(--space-4);
  margin-top:var(--space-10);flex-wrap:wrap;
}
.meta-item{
  font-family:var(--font-mono);font-size:var(--text-xs);
  letter-spacing:.15em;color:var(--color-text-faint);
}
.meta-divider{width:24px;height:1px;background:var(--color-border-strong)}

/* Circuit decoration */
.circuit-deco{
  position:absolute;right:-60px;top:50%;transform:translateY(-50%);
  width:400px;height:400px;opacity:.5;pointer-events:none;
}
.circuit-svg{width:100%;height:100%}
.circuit-path{
  stroke-dasharray:600;stroke-dashoffset:600;
  animation:drawCircuit 4s var(--ease-out) forwards;
}
.circuit-path.p2{animation-delay:.5s}
.circuit-path.p3{animation-delay:1s}
@keyframes drawCircuit{to{stroke-dashoffset:0}}

.circuit-node{opacity:0;animation:nodePulse 2s ease-in-out infinite}
.circuit-node.n2{animation-delay:.8s}
.circuit-node.n3{animation-delay:1.6s}
@keyframes nodePulse{
  0%,100%{opacity:.1;r:3}
  50%{opacity:.4;r:5}
}

/* ======================
   ABOUT PANEL
   ====================== */
.panel-title{
  font-family:var(--font-display);font-size:var(--text-2xl);
  font-weight:600;line-height:1.05;letter-spacing:-.02em;
  color:var(--color-text);
}
.panel-body{
  font-family:var(--font-body);font-size:var(--text-base);
  font-weight:400;line-height:1.7;color:var(--color-text-muted);
  margin-top:var(--space-5);
}
.about-metrics{
  display:flex;gap:var(--space-10);margin-top:var(--space-10);
  padding-top:var(--space-6);border-top:1px solid var(--color-border);
}
.metric{display:flex;flex-direction:column;gap:var(--space-1)}
.metric-value{
  font-family:var(--font-display);font-size:var(--text-base);
  font-weight:600;color:var(--color-text);
}
.metric-label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);letter-spacing:.1em;
}

/* ======================
   BUILD PANEL
   ====================== */
.build-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);
}
.build-card{
  padding:var(--space-6);
  border:1px solid var(--color-border);
  transition:border-color var(--transition-interactive),
             background var(--transition-interactive);
}
.build-card:hover{
  border-color:var(--color-border-strong);
  background:var(--color-surface);
}
.build-card-header{
  display:flex;align-items:center;gap:var(--space-3);
  margin-bottom:var(--space-4);
}
.build-num{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);letter-spacing:.1em;
}
.build-line{flex:1;height:1px;background:var(--color-border)}
.build-title{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:600;color:var(--color-text);
}
.build-desc{
  font-family:var(--font-body);font-size:var(--text-sm);
  line-height:1.6;color:var(--color-text-muted);margin-top:var(--space-3);
}

/* ======================
   PHILOSOPHY PANEL
   ====================== */
.philosophy-block{position:relative;z-index:2}
.philosophy-quote{
  font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:300;line-height:1.4;color:var(--color-text);
  font-style:normal;max-width:48ch;
  padding:var(--space-8) 0;
  border-top:1px solid var(--color-border);
  border-bottom:1px solid var(--color-border);
}
.principles{
  display:flex;flex-direction:column;gap:var(--space-5);
  margin-top:var(--space-8);
}
.principle-item{display:flex;align-items:baseline;gap:var(--space-4)}
.principle-num{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);letter-spacing:.1em;min-width:1.5rem;
}
.principle-text{
  font-family:var(--font-body);font-size:var(--text-base);
  color:var(--color-text-muted);
}

/* Scanlines deco */
.scanlines-deco{
  position:absolute;inset:0;pointer-events:none;z-index:1;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,rgba(255,255,255,.015) 3px,rgba(255,255,255,.015) 4px
  );
  animation:scanDrift 8s linear infinite;
}
@keyframes scanDrift{
  from{background-position:0 0}to{background-position:0 100px}
}

/* ======================
   FOUNDER PANEL
   ====================== */
.founder-name{
  font-family:var(--font-display);font-size:var(--text-3xl);
  font-weight:700;line-height:.95;letter-spacing:-.03em;
  color:var(--color-text);
}
.founder-tags{
  display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-8);
}
.tag{
  font-family:var(--font-mono);font-size:var(--text-xs);
  padding:var(--space-2) var(--space-3);
  border:1px solid var(--color-border);color:var(--color-text-muted);
  letter-spacing:.05em;
  transition:border-color var(--transition-interactive),color var(--transition-interactive);
}
.tag:hover{border-color:var(--color-border-strong);color:var(--color-text)}

/* ======================
   CONTACT PANEL
   ====================== */
.cta-link{
  display:inline-flex;align-items:center;gap:var(--space-3);
  margin-top:var(--space-8);padding:var(--space-4) var(--space-8);
  border:1px solid var(--color-text);
  transition:background var(--transition-interactive),color var(--transition-interactive);
}
.cta-text{
  font-family:var(--font-mono);font-size:var(--text-sm);
  letter-spacing:.15em;font-weight:500;
}
.cta-arrow{
  width:18px;height:18px;
  transition:transform var(--transition-interactive);
}
.cta-link:hover{background:var(--color-text);color:var(--color-bg)}
.cta-link:hover .cta-arrow{transform:translateX(4px)}
.cta-link:active{opacity:.9}

.contact-footer{
  margin-top:var(--space-10);
  display:flex;flex-direction:column;gap:var(--space-2);
}
.contact-email,.contact-loc{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);letter-spacing:.08em;
}

/* ======================
   FIXED ATTRIBUTION
   ====================== */
.fixed-attribution{
  position:fixed;bottom:var(--space-4);right:var(--space-4);z-index:5;pointer-events:auto;
}
.fixed-attribution-text{
  font-family:var(--font-mono);font-size:0.5625rem;
  color:var(--color-text-faint);letter-spacing:.02em;
  opacity:.5;transition:opacity var(--transition-interactive);
}
.fixed-attribution-text:hover{opacity:1}

/* ======================
   ROADMAP PANEL
   ====================== */
.roadmap-section{
  margin-top:var(--space-8);
  padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
}
.roadmap-section:first-of-type{
  margin-top:var(--space-10);
}
.phase-header{
  display:flex;
  align-items:baseline;
  gap:var(--space-4);
  margin-bottom:var(--space-4);
  flex-wrap:wrap;
}
.phase-num{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--color-text-faint);
  letter-spacing:.1em;
  min-width:4.5rem;
}
.phase-title{
  font-family:var(--font-display);
  font-size:var(--text-base);
  font-weight:600;
  color:var(--color-text);
  letter-spacing:.02em;
  flex:1;
}
.phase-time{
  font-family:var(--font-mono);
  font-size:var(--text-xs);
  color:var(--color-text-muted);
  letter-spacing:.08em;
  padding:var(--space-1) var(--space-3);
  border:1px solid var(--color-border);
}
.phase-list{
  list-style:none;
  margin-top:var(--space-4);
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
}
.phase-list li{
  font-family:var(--font-body);
  font-size:var(--text-sm);
  color:var(--color-text-muted);
  padding-left:1.5rem;
  position:relative;
  line-height:1.6;
}
.phase-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:0.6em;
  width:6px;
  height:6px;
  background:var(--color-border-strong);
  border-radius:50%;
}
.tech-note{
  margin-top:var(--space-10);
  padding-top:var(--space-8);
  border-top:1px solid var(--color-border);
}

/* ======================
   TABS (Roadmap Page)
   ====================== */
.tabs{
  display:flex;gap:var(--space-3);margin-bottom:var(--space-8);
  border-bottom:1px solid var(--color-border);
  padding-bottom:var(--space-4);
  position:sticky;top:0;z-index:10;
  transition:opacity 0.3s ease,transform 0.3s ease;
}

.tabs.hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(-10px);
}

.tab-btn{
  padding:var(--space-3) var(--space-6);
  background:transparent;
  border:1px solid var(--color-border);
  color:var(--color-text-muted);
  cursor:pointer;
  font-family:var(--font-mono);font-size:var(--text-xs);
  font-weight:400;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:all var(--transition-interactive);
  position:relative;
  overflow:hidden;
}

.tab-btn:hover{color:var(--color-text);border-color:var(--color-text)}

.tab-btn.active{color:var(--color-text);border-color:var(--color-text)}

.tab-content{display:none}
.tab-content.active{display:block}

/* --- Tech Stack Grid --- */
.tech-stack-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--space-6);margin-top:var(--space-6);
}

.tech-category{
  padding:var(--space-5);border:1px solid var(--color-border);
  background:var(--color-surface-2);
}

.tech-category-name{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-muted);letter-spacing:.1em;
  margin-bottom:var(--space-4);display:block;
}

.tech-item{
  margin-bottom:var(--space-4);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--color-border);
}

.tech-item:last-child{
  margin-bottom:0;padding-bottom:0;border-bottom:none;
}

.tech-name{
  font-family:var(--font-display);font-size:var(--text-base);
  font-weight:600;color:var(--color-text);margin-bottom:var(--space-2);
}

.tech-purpose{
  font-family:var(--font-body);font-size:var(--text-sm);
  color:var(--color-text-muted);line-height:1.5;
}

/* --- Features Grid --- */
.features-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--space-5);margin-top:var(--space-6);
}

.feature-card{
  padding:var(--space-5);border:1px solid var(--color-border);
  transition:border-color var(--transition-interactive),background var(--transition-interactive);
}

.feature-card:hover{
  border-color:var(--color-border-strong);background:var(--color-surface);
}

.feature-title{
  font-family:var(--font-display);font-size:var(--text-base);
  font-weight:600;color:var(--color-text);margin-bottom:var(--space-3);
}

.feature-description{
  font-family:var(--font-body);font-size:var(--text-sm);
  color:var(--color-text-muted);line-height:1.6;
}

/* --- Revenue Model --- */
.revenue-model{margin-top:var(--space-6)}

.revenue-model-title{
  font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:600;color:var(--color-text);margin-bottom:var(--space-5);
}

.revenue-streams{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:var(--space-5);
}

.revenue-card{
  padding:var(--space-6);border:1px solid var(--color-border);
  background:var(--color-surface-2);
}

.revenue-amount{
  font-family:var(--font-display);font-size:var(--text-xl);
  font-weight:700;color:var(--color-text);margin-bottom:var(--space-2);
}

.revenue-label{
  font-family:var(--font-mono);font-size:var(--text-xs);
  color:var(--color-text-faint);letter-spacing:.1em;
  text-transform:uppercase;margin-bottom:var(--space-4);
}

.revenue-details{
  font-family:var(--font-body);font-size:var(--text-sm);
  color:var(--color-text-muted);line-height:1.6;
}

.revenue-disclaimer{
  margin-top:var(--space-8);padding-top:var(--space-6);
  border-top:1px solid var(--color-border);
  font-family:var(--font-body);font-size:var(--text-xs);
  color:var(--color-text-faint);line-height:1.6;
}

/* ======================
   MOBILE RESPONSIVE
   ====================== */
@media(max-width:768px){
  .panel{left:0;top:56px;bottom:0}
  .panel-inner{padding:var(--space-6) var(--space-4)}

  .panel-layout{
    grid-template-columns:1fr;gap:var(--space-6);
  }
  .panel-label-area{flex-direction:row;gap:var(--space-4)}

  .hero-title{font-size:clamp(3rem,12vw,5rem)}
  .hero-meta{gap:var(--space-3)}
  .hero-subtitle{margin-top:var(--space-5)}

  .build-grid{grid-template-columns:1fr}

  .about-metrics{flex-wrap:wrap;gap:var(--space-6)}

  .founder-name{font-size:var(--text-2xl)}
  .founder-tags{margin-top:var(--space-5)}

  .circuit-deco{display:none}

  .fixed-attribution{bottom:var(--space-2);right:var(--space-2)}

  .panel-content-area{
    max-height:calc(100dvh - 56px - var(--space-12) - var(--space-6));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color:var(--color-border) transparent;
    padding-bottom:var(--space-8);
  }

  .tabs{
    display:flex;
    flex-wrap:nowrap;
    gap:var(--space-2);
    overflow-x:auto;
    padding:var(--space-3) var(--space-2);
    margin-bottom:var(--space-4);
    border-bottom:1px solid var(--color-border);
    position:relative;
    transition:opacity 0.3s ease,transform 0.3s ease;
  }

  .tabs.hidden{
    opacity:0;
    pointer-events:none;
    transform:translateY(-10px);
  }

  .tab-btn{
    flex:0 0 auto;
    padding:var(--space-2) var(--space-3);
    font-size:var(--text-2xs);
    white-space:nowrap;
  }
}

@media(max-width:480px){
  .build-card{padding:var(--space-4)}
  .philosophy-quote{font-size:var(--text-lg)}
}