/* ================================================================
   GroundQA — Valley.co Clone Stylesheet
   Fonts: DM Sans, Inter, Geist Mono
   Radius: 2px  |  Borders: 0.5-1px  |  Accent: #555 (gray hover)
   ================================================================ */

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:'DM Sans','Inter',system-ui,-apple-system,sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  color:#000;
  background:#fff;
  background-image:radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-top:72px;
  overflow-x:hidden;
}
::selection{background:rgba(0,0,0,0.08);color:#000;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button,input,select,textarea{font:inherit;border:none;outline:none;background:none;}
button::selection,a::selection,[class*="btn"]::selection{background:transparent;color:inherit;}

/* ---------- Layout ---------- */
.container{max-width:1440px;margin:0 auto;padding:0 52px;}
.container--narrow{max-width:900px;}

/* ---------- Typography ---------- */
h1,h2,h3,h4{font-family:'Inter','DM Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-0.03em;line-height:1.15;color:#000;}
h1{font-size:clamp(2.5rem,5.5vw,4rem);}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem);}
h3{font-size:1.15rem;font-weight:600;letter-spacing:-0.01em;}

/* ================================================================
   NAVIGATION — 90px height, Valley style
   ================================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:72px;
  background:#fff;
  border-bottom:1px solid rgba(0,0,0,0.08);
  transition:background 0.3s ease, border-color 0.3s ease;
}
.nav__inner{
  position:relative;
  max-width:1440px;margin:0 auto;padding:0 52px;
  display:flex;align-items:center;height:100%;
}
.nav__logo{display:flex;align-items:center;flex-shrink:0;}
.nav__logo img{height:24px;}
.nav__links{
  display:flex;align-items:center;gap:32px;
  margin:0 auto;
}
.nav__links a{
  font-size:13px;font-weight:500;
  color:#000;
  letter-spacing:0.01em;
  transition:color 0.2s, font-size 0.5s cubic-bezier(0.22,1,0.36,1);
  position:relative;
}
.nav__links a:hover{color:#555;}
.nav__links a::after{
  content:'';position:absolute;bottom:-2px;left:0;right:0;
  height:1px;background:#555;
  transform:scaleX(0);transform-origin:left;
  transition:transform 0.25s ease;
}
.nav__links a:hover::after{transform:scaleX(1);}
.nav__actions{display:flex;align-items:center;gap:16px;flex-shrink:0;}
.nav__link-btn{
  font-size:13px;font-weight:500;color:#000;
  transition:color 0.2s;cursor:pointer;
}
.nav__link-btn:hover{color:#555;}
.nav__btn-filled{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 22px;
  font-size:13px;font-weight:600;
  color:#fff;background:#000;
  border:1px solid #000;
  border-radius:2px;
  transition:all 0.25s ease;
  will-change:transform;
  cursor:pointer;user-select:none;
}
.nav__btn-filled:hover{background:#222;}
.nav__btn-filled span{font-size:15px;transition:transform 0.2s;}
.nav__btn-filled:hover span{transform:translateX(3px);}
.nav__btn{
  display:inline-flex;align-items:center;
  padding:10px 20px;
  font-size:13px;font-weight:500;
  color:#000;
  border:0.5px solid rgba(0,0,0,0.24);
  border-radius:2px;
  transition:all 0.2s ease;
  will-change:transform;
  cursor:pointer;user-select:none;
}
.nav__btn:hover{border-color:#555;color:#555;}
.nav__hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;
}
.nav__hamburger span{display:block;width:20px;height:1.5px;background:#000;border-radius:1px;transition:all 0.2s;}

/* ================================================================
   HERO
   ================================================================ */
.hero{
  padding:80px 0 0;
  position:relative;
  overflow:hidden;
}
.hero__content{
  max-width:720px;
  margin:0 auto;
  text-align:center;
  padding:0 24px;
}
.hero__eyebrow{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:12px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#999;
  margin-bottom:20px;
  visibility:hidden;
  min-height:1.6em;
}
.hero__title{
  margin-bottom:24px;
}
.hero__desc{
  font-size:17px;
  color:#666;
  line-height:1.7;
  max-width:540px;
  margin:0 auto 36px;
}
.hero__input-row{
  max-width:440px;
  margin:0 auto 32px;
}
.hero__form{
  display:flex;
  border:0.5px solid rgba(0,0,0,0.24);
  border-radius:2px;
  overflow:hidden;
  transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.hero__form:focus-within{border-color:#555;box-shadow:0 0 0 3px rgba(0,0,0,0.06);}
.hero__form input{
  flex:1;
  padding:14px 18px;
  font-size:14px;
  color:#000;
  background:#fff;
}
.hero__form input::placeholder{color:#999;}
.hero__submit{
  padding:14px 24px;
  font-size:13px;font-weight:600;
  color:#fff;
  background:#000;
  cursor:pointer;
  white-space:nowrap;
  transition:background 0.2s;user-select:none;
}
.hero__submit:hover{background:#222;}
.hero__cta-row{
  display:flex;align-items:center;justify-content:center;
  max-width:600px;margin:0 auto 32px;gap:14px;
  flex-wrap:wrap;
}
.hero__cta-row .hero__form{flex:1;}
.hero__status{
  flex-basis:100%;
  text-align:left;
  color:#22c55e;
}
.hero__tour-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;
  font-size:13px;font-weight:600;letter-spacing:0.01em;
  color:#000;
  background:transparent;
  border:1.5px solid #000;
  border-radius:2px;
  text-decoration:none;
  white-space:nowrap;
  transition:all 0.25s ease;user-select:none;
}
.hero__tour-btn svg{transition:transform 0.25s ease;pointer-events:none;}
.hero__tour-btn:hover{background:#000;color:#fff;}
.hero__tour-btn:hover svg{transform:scale(1.15);stroke:#fff;}
.hero__tour-btn::selection{background:transparent;color:inherit;}
.hero__proof{
  display:flex;align-items:center;justify-content:center;gap:16px;
  margin-bottom:60px;
  flex-wrap:wrap;
}
.hero__proof-item{font-size:13px;color:#888;}
.hero__proof-item strong{color:#000;font-weight:600;}
.hero__proof-sep{width:1px;height:14px;background:rgba(0,0,0,0.12);}

/* Hero Visual — Large product screenshot */
.hero__visual{
  max-width:1200px;
  margin:0 auto;
  padding:0 52px;
  position:relative;
}
.hero__fade{
  position:absolute;bottom:0;left:0;right:0;
  height:200px;
  background:linear-gradient(rgba(255,255,255,0) 0%,#fff 100%);
  pointer-events:none;
  z-index:5;
}

/* Hero background — watercolor texture overlay */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('images/hero-watercolor.jpg') center top / cover no-repeat;
  opacity:0.65;
  filter:blur(1px);
  pointer-events:none;
  z-index:0;
}
/* Gradient fade — smooth white fade at edges, sits above canvas */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.5) 0%,
    transparent 15%,
    transparent 55%,
    rgba(255,255,255,0.5) 70%,
    #fff 90%);
  pointer-events:none;
  z-index:3;
}
.hero__content{position:relative;z-index:4;}
.hero__visual{position:relative;z-index:4;}

/* ================================================================
   TRUST BAR
   ================================================================ */
.trust-bar{
  padding:48px 0 40px;
  text-align:center;
  border-bottom:0.5px solid rgba(0,0,0,0.06);
  position:relative;
  overflow:hidden;
}
.trust-bar__label{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#bbb;
  margin-bottom:32px;
}
.trust-bar__sub{
  font-size:13px;
  color:#bbb;
  margin-top:28px;
}

/* ── Infinite ticker ── */
.trust-ticker{
  position:relative;
  width:100%;
  overflow:hidden;
  padding:4px 0;
}
.trust-ticker__track{
  display:flex;
  gap:12px;
  width:max-content;
  animation:tickerScroll 40s linear infinite;
}
.trust-ticker__track:hover{
  animation-play-state:paused;
}
@keyframes tickerScroll{
  0%{transform:translateX(0);}
  100%{transform:translateX(-50%);}
}
.trust-ticker__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  border-radius:60px;
  border:0.5px solid rgba(0,0,0,0.08);
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  white-space:nowrap;
  transition:all 0.35s cubic-bezier(0.4,0,0.2,1);
  cursor:default;
  flex-shrink:0;
}
.trust-ticker__item:hover{
  border-color:rgba(0,0,0,0.12);
  background:rgba(0,0,0,0.02);
  box-shadow:0 0 0 3px rgba(0,0,0,0.04), 0 2px 12px rgba(0,0,0,0.04);
  transform:translateY(-2px);
}
.trust-ticker__item span{
  font-family:'Inter',system-ui,sans-serif;
  font-size:13.5px;
  font-weight:600;
  color:#555;
  letter-spacing:-0.01em;
  transition:color 0.35s;
}
.trust-ticker__item:hover span{
  color:#0a0a0a;
}
.trust-ticker__icon{
  width:20px;
  height:20px;
  flex-shrink:0;
  color:#999;
  transition:color 0.35s;
}
.trust-ticker__item:hover .trust-ticker__icon{
  color:#555;
}

/* Gradient fades on edges */
.trust-ticker__fade{
  position:absolute;
  top:0;
  bottom:0;
  width:120px;
  z-index:2;
  pointer-events:none;
}
.trust-ticker__fade--left{
  left:0;
  background:linear-gradient(to right, #fff 0%, transparent 100%);
}
.trust-ticker__fade--right{
  right:0;
  background:linear-gradient(to left, #fff 0%, transparent 100%);
}

/* ================================================================
   MOCKUP — Dark themed (Valley uses dark product screenshots)
   ================================================================ */
.mock{
  border:0.265px solid #e0e0e0;
  border-radius:2px;
  overflow:hidden;
  background:#fff;
}

/* ================================================================
   HERO EXPLAINER — Premium animated product walkthrough
   ================================================================ */
.xplr{
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 25px 80px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  background:#fff;
  max-width:960px;
  margin:0 auto;
}
.xplr__chrome{
  display:flex;align-items:center;gap:10px;
  padding:14px 20px;
  background:linear-gradient(180deg, #fafafa, #f5f5f5);
  border-bottom:1px solid rgba(0,0,0,0.06);
  position:relative;
}
.xplr__dots{display:flex;gap:7px;}
.xplr__dots span{width:11px;height:11px;border-radius:50%;}
.xplr__dots span:nth-child(1){background:#ff5f57;}
.xplr__dots span:nth-child(2){background:#febc2e;}
.xplr__dots span:nth-child(3){background:#28c840;}
.xplr__url{font-family:'Geist Mono',monospace;font-size:11px;color:#444;margin-left:10px;letter-spacing:0.02em;}
.xplr__progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:transparent;}
.xplr__progress-fill{height:100%;width:0;background:linear-gradient(90deg,#059669,#10b981,#34d399);transition:width 0.8s cubic-bezier(0.16,1,0.3,1);border-radius:0 1px 1px 0;box-shadow:0 0 8px rgba(5,150,105,0.3);}

.xplr__stage{
  position:relative;
  min-height:480px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(0,0,0,0.02) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 20%, rgba(0,0,0,0.015) 0%, transparent 70%),
    linear-gradient(180deg, #fafafa 0%, #f5f5f5 40%, #f0f0f0 100%);
  perspective:1200px;
}
/* Subtle dot grid overlay */
.xplr__stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,0,0,0.04) 1px, transparent 1px);
  background-size:24px 24px;
  opacity:0.5;
}
/* Animated mesh gradient blob */
.xplr__stage::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0.01) 40%, transparent 70%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  animation:meshFloat 12s ease-in-out infinite;
  filter:blur(50px);
}
@keyframes meshFloat{
  0%{transform:translate(-50%,-50%) scale(1);}
  25%{transform:translate(-45%,-55%) scale(1.08);}
  50%{transform:translate(-55%,-45%) scale(1.15);}
  75%{transform:translate(-48%,-52%) scale(0.95);}
  100%{transform:translate(-50%,-50%) scale(1);}
}

/* ---- INTRO: GroundQA bubble-drop & paint reveal ---- */
.xplr__intro{
  position:absolute;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  pointer-events:none;
  overflow:hidden;
  background:linear-gradient(180deg, #f8faf9 0%, #f0f4f2 40%, #edf2ef 100%);
  text-align:center;
}
.xplr__intro-brand{
  display:flex;align-items:center;justify-content:center;
  gap:0;
  width:100%;
  opacity:0;transform:scale(0.5);
  transition:opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 1s cubic-bezier(0.34,1.56,0.64,1);
  position:relative;z-index:3;
}
.xplr__intro-logo{
  height:52px;
  width:auto;
  display:block;
  margin:0 auto;
}
.xplr__intro-brand .xplr__intro-accent{
  color:#0a0a0a;
}
.xplr__intro-brand.is-in{opacity:1;transform:scale(1);}
.xplr__intro-brand.is-out{
  opacity:0;transform:scale(1.3);
  transition:opacity 0.5s ease, transform 0.6s ease;
}
.xplr__intro-sub{
  font-family:'Geist Mono',monospace;font-size:12px;letter-spacing:0.08em;
  text-transform:uppercase;color:#444;margin-top:14px;
  width:100%;text-align:center;
  opacity:0;transform:translateY(12px);
  transition:opacity 0.6s 0.3s, transform 0.6s 0.3s cubic-bezier(0.16,1,0.3,1);
  position:relative;z-index:3;
}
.xplr__intro-sub.is-in{opacity:1;transform:translateY(0);}
.xplr__intro-sub.is-out{opacity:0;transition:opacity 0.3s;}

/* Floating bubbles — drop & bounce */
.xplr__bubble{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(0,0,0,0.06), rgba(0,0,0,0.02));
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:inset 0 -4px 8px rgba(0,0,0,0.03), 0 4px 12px rgba(0,0,0,0.04);
  z-index:2;pointer-events:none;
  opacity:0;transform:translateY(-80px) scale(0);
  animation:bubbleDrop var(--bub-dur,1.4s) var(--bub-delay,0s) cubic-bezier(0.34,1.56,0.64,1) forwards;
}
@keyframes bubbleDrop{
  0%{opacity:0;transform:translateY(-80px) scale(0);}
  25%{opacity:1;transform:translateY(15px) scale(1.1);}
  45%{transform:translateY(-8px) scale(0.95);}
  60%{transform:translateY(4px) scale(1.02);}
  75%{transform:translateY(-2px) scale(0.99);}
  100%{opacity:0.85;transform:translateY(0) scale(1);}
}
.xplr__bubble.is-coalesce{
  transition:all 0.6s cubic-bezier(0.16,1,0.3,1);
  animation:none !important;
  opacity:0;transform:scale(0);
}

/* Step progress indicator — persistent across scenes */
.xplr__steps{
  position:absolute;top:14px;left:0;right:0;z-index:55;
  display:flex;align-items:center;justify-content:center;gap:0;
  padding:0 40px;
  opacity:0;transform:translateY(-6px);
  transition:opacity 0.5s, transform 0.5s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.xplr__steps.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;}
.xplr__step{
  font-family:'Geist Mono',monospace;font-size:9px;letter-spacing:0.06em;
  text-transform:uppercase;color:rgba(0,0,0,0.45);
  padding:3px 8px;border-radius:10px;
  transition:color 0.5s, background 0.5s, transform 0.3s;
  white-space:nowrap;cursor:pointer;
}
.xplr__step:hover{color:rgba(0,0,0,0.7);}
.xplr__step.is-active{
  color:#0a0a0a;background:rgba(0,0,0,0.04);
  transform:scale(1.05);
}
.xplr__step.is-done{color:rgba(0,0,0,0.6);}
.xplr__step-line{
  width:16px;height:1px;
  background:rgba(0,0,0,0.1);
  flex-shrink:0;
}

/* Ambient floating particles */
.xplr__particles{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.xplr__particle{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(0,0,0,0.08);
  animation:particleFloat linear infinite;
}
@keyframes particleFloat{
  0%{transform:translateY(0) scale(1);opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{transform:translateY(-420px) scale(0);opacity:0;}
}
/* Subtle gradient orb */
.xplr__glow-orb{
  position:absolute;width:200px;height:200px;border-radius:50%;
  background:radial-gradient(circle, rgba(0,0,0,0.03) 0%, transparent 70%);
  pointer-events:none;z-index:0;
  transition:left 2s cubic-bezier(0.16,1,0.3,1), top 2s cubic-bezier(0.16,1,0.3,1);
}
/* Cursor with trail */
.xplr__cursor{
  position:absolute;
  z-index:50;
  pointer-events:none;
  opacity:0;
  transform:translate(-2px,-2px);
  transition:left 0.9s cubic-bezier(0.22,1,0.36,1), top 0.9s cubic-bezier(0.22,1,0.36,1), opacity 0.4s;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.2));
}
.xplr__cursor.is-visible{opacity:1;}
.xplr__cursor-trail{
  position:absolute;z-index:49;pointer-events:none;
  width:4px;height:4px;border-radius:50%;
  background:rgba(138,180,248,0.4);
  animation:cursorTrailFade 0.5s ease-out forwards;
}
@keyframes cursorTrailFade{
  0%{opacity:0.6;transform:scale(1);}
  100%{opacity:0;transform:scale(0);}
}
/* Click ripple — double ring */
.xplr__ripple{
  position:absolute;z-index:48;pointer-events:none;
  width:0;height:0;border-radius:50%;
  border:2px solid rgba(138,180,248,0.5);
  animation:clickRipple 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.xplr__ripple2{
  position:absolute;z-index:47;pointer-events:none;
  width:0;height:0;border-radius:50%;
  border:1px solid rgba(138,180,248,0.2);
  animation:clickRipple2 0.8s 0.1s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes clickRipple{
  0%{width:0;height:0;opacity:1;transform:translate(-50%,-50%);}
  100%{width:36px;height:36px;opacity:0;transform:translate(-50%,-50%);}
}
@keyframes clickRipple2{
  0%{width:0;height:0;opacity:0.5;transform:translate(-50%,-50%);}
  100%{width:52px;height:52px;opacity:0;transform:translate(-50%,-50%);}
}

/* Scenes — cinematic 3D transitions */
.xplr__scene{
  position:absolute;
  inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:36px 48px;
  margin-top:10px;
  opacity:0;
  transform:translateY(30px) scale(0.94) rotateX(4deg);
  filter:blur(6px);
  transition:opacity 0.9s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1), filter 0.9s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
  transform-style:preserve-3d;
}
.xplr__scene--active{
  opacity:1;transform:translateY(0) scale(1) rotateX(0);filter:blur(0);pointer-events:auto;
}
.xplr__scene--exit{
  opacity:0;transform:translateY(-24px) scale(1.03) rotateX(-3deg);filter:blur(5px);
}

/* Scene label — typewriter style */
.xplr__scene-label{
  font-family:'Geist Mono',monospace;
  font-size:12px;letter-spacing:0.1em;text-transform:uppercase;
  color:#444;margin-top:10px;margin-bottom:24px;
  min-height:14px;
  overflow:hidden;
}
.xplr__scene-label .xplr__char{
  display:inline-block;
  opacity:0;transform:translateY(8px);
  transition:opacity 0.2s, transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.xplr__scene-label .xplr__char.is-in{
  opacity:1;transform:translateY(0);
}

/* Scene 1: Problems */
.xplr__problems{display:flex;gap:20px;width:100%;max-width:700px;}
.xplr__prob{
  flex:1;
  text-align:center;
  padding:32px 16px;
  border:1px solid rgba(0,0,0,0.05);
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  opacity:0;transform:translateY(40px) scale(0.88);
  position:relative;
  overflow:hidden;
}
.xplr__prob::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
}
.xplr__prob.is-in{
  opacity:1;transform:translateY(0) scale(1);
  box-shadow:0 8px 28px rgba(0,0,0,0.07);border-color:rgba(138,180,248,0.25);
  animation:cardBounce 0.8s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes cardBounce{
  0%{opacity:0;transform:translateY(40px) scale(0.88);}
  50%{transform:translateY(-6px) scale(1.03);}
  75%{transform:translateY(2px) scale(0.99);}
  100%{transform:translateY(0) scale(1);}
}
.xplr__prob.is-in::before{
  animation:probShimmer 0.8s 0.2s ease forwards;
}
@keyframes probShimmer{0%{left:-100%;}100%{left:100%;}}
.xplr__prob.is-hover{
  box-shadow:0 16px 40px rgba(138,180,248,0.2);border-color:rgba(138,180,248,0.35);
  transform:translateY(-4px) scale(1.03);
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.xplr__prob-num{
  font-family:'Inter',system-ui,sans-serif;
  font-size:3.2rem;font-weight:900;letter-spacing:-0.04em;
  color:#0a0a0a;line-height:1;
  display:inline-block;
}
.xplr__prob-pct{font-size:1.8rem;font-weight:700;color:#0a0a0a;display:inline-block;}
.xplr__prob-text{font-size:13px;color:#333;margin-top:12px;line-height:1.5;opacity:0;transform:translateY(6px);transition:opacity 0.4s 0.3s, transform 0.4s 0.3s cubic-bezier(0.16,1,0.3,1);}
.xplr__prob.is-in .xplr__prob-text{opacity:1;transform:translateY(0);}
.xplr__prob-bar{
  width:0;height:2px;margin:14px auto 0;
  background:linear-gradient(90deg,#0a0a0a,#555);
  border-radius:1px;
  transition:width 1s 0.5s cubic-bezier(0.16,1,0.3,1);
}
.xplr__prob.is-in .xplr__prob-bar{width:60%;}
/* Number scale pop on count finish */
.xplr__prob-num.is-pop{animation:numPop 0.35s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes numPop{0%{transform:scale(1);}50%{transform:scale(1.15);}100%{transform:scale(1);}}

/* Scene 2: Import */
.xplr__import{display:flex;align-items:center;gap:32px;width:100%;justify-content:center;position:relative;}
.xplr__file{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:24px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);background:#fafafa;
  opacity:0;transform:translateX(-40px) scale(0.95);
  transition:opacity 0.6s cubic-bezier(0.16,1,0.3,1), transform 0.9s cubic-bezier(0.16,1,0.3,1);
  font-family:'Geist Mono',monospace;font-size:11px;color:#333;
  position:relative;overflow:hidden;
}
.xplr__file::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, transparent 0%, rgba(138,180,248,0.06) 100%);
  opacity:0;transition:opacity 0.4s;
}
.xplr__file.is-in{opacity:1;transform:translateX(0) scale(1);}
.xplr__file.is-in::after{opacity:1;}
.xplr__file.is-dragging{transform:translateX(80px) scale(0.82) rotate(-3deg);opacity:0.4;border-color:#8ab4f8;filter:blur(1px);}
.xplr__dropzone{
  width:140px;height:140px;
  border-radius:50%;
  border:2px dashed rgba(0,0,0,0.1);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;color:#bbb;
  position:relative;
  transition:border-color 0.4s, background 0.4s, transform 0.4s, box-shadow 0.4s;
}
.xplr__dropzone.is-active{
  border-color:#8ab4f8;background:rgba(138,180,248,0.04);
  transform:scale(1.05);
  box-shadow:0 0 30px rgba(138,180,248,0.15);
}
.xplr__dropzone.is-done{
  border-style:solid;border-color:#8ab4f8;
  background:rgba(138,180,248,0.06);
  box-shadow:0 0 40px rgba(138,180,248,0.2);
  animation:dropzonePulse 0.7s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes dropzonePulse{0%{transform:scale(0.85);}50%{transform:scale(1.1);}70%{transform:scale(0.97);}100%{transform:scale(1);}}
/* Import particle burst */
.xplr__burst{
  position:absolute;width:6px;height:6px;border-radius:50%;
  pointer-events:none;z-index:10;
  animation:burstOut 0.7s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes burstOut{
  0%{transform:translate(0,0) scale(1);opacity:1;}
  100%{opacity:0;transform:var(--burst-to) scale(0);}
}
.xplr__dropzone.is-done span{color:#8ab4f8;font-weight:600;}
.xplr__dropzone-ring{
  position:absolute;inset:-8px;border-radius:50%;
  border:1px solid rgba(138,180,248,0);
  transition:border-color 0.3s, transform 0.3s;
}
.xplr__dropzone.is-active .xplr__dropzone-ring{border-color:rgba(138,180,248,0.3);transform:scale(1.08);animation:ringPulse 1.2s ease infinite;}
@keyframes ringPulse{0%,100%{transform:scale(1.05);opacity:1;}50%{transform:scale(1.12);opacity:0.5;}}
/* Scanning line across dropzone */
.xplr__scan-line{
  position:absolute;left:10%;right:10%;height:2px;
  background:linear-gradient(90deg, transparent, #8ab4f8, transparent);
  opacity:0;top:20%;
  border-radius:1px;
}
.xplr__dropzone.is-done .xplr__scan-line{
  animation:scanDown 0.8s 0.2s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes scanDown{
  0%{top:20%;opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  100%{top:80%;opacity:0;}
}
.xplr__import-stats{
  display:flex;flex-direction:column;gap:12px;
  opacity:0;transform:translateX(30px) scale(0.95);
  transition:opacity 0.6s 0.3s cubic-bezier(0.16,1,0.3,1), transform 0.6s 0.3s cubic-bezier(0.16,1,0.3,1);
}
.xplr__import-stats.is-in{opacity:1;transform:translateX(0) scale(1);}
.xplr__istat{display:flex;align-items:center;gap:10px;}
.xplr__istat-val{font-family:'Inter',system-ui,sans-serif;font-size:1.8rem;font-weight:800;color:#0a0a0a;}
.xplr__istat-val--check{color:#059669;}
.xplr__istat-label{font-size:13px;color:#333;text-transform:uppercase;letter-spacing:0.06em;font-family:'Geist Mono',monospace;}
.xplr__istat.is-in{animation:statPop 0.4s cubic-bezier(0.34,1.56,0.64,1);}
@keyframes statPop{0%{transform:scale(0.8);}60%{transform:scale(1.05);}100%{transform:scale(1);}}

/* Scene 3: Graph */
.xplr__graph{position:relative;width:100%;height:220px;}
.xplr__graph-svg{position:absolute;inset:0;width:100%;height:100%;z-index:0;}
.xplr__graph-svg line{stroke:rgba(0,0,0,0.1);stroke-width:1.5;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s cubic-bezier(0.16,1,0.3,1), stroke 0.4s, stroke-width 0.3s;}
.xplr__graph-svg line.is-drawn{stroke-dashoffset:0;}
.xplr__graph-svg line.is-pulse{stroke:#059669;stroke-width:2.5;filter:drop-shadow(0 0 4px rgba(5,150,105,0.4));}
.xplr__node{
  position:absolute;
  padding:8px 16px;
  font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;
  color:#555;background:#fff;
  border:1px solid rgba(0,0,0,0.1);border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.05);
  transform:translate(-50%,-50%) scale(0);
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1), border-color 0.4s, background 0.4s, color 0.3s, box-shadow 0.4s;
  z-index:2;
  white-space:nowrap;
}
.xplr__node.is-in{
  transform:translate(-50%,-50%) scale(1);
  animation:nodeSpring 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes nodeSpring{
  0%{transform:translate(-50%,-50%) scale(0);}
  60%{transform:translate(-50%,-50%) scale(1.15);}
  80%{transform:translate(-50%,-50%) scale(0.95);}
  100%{transform:translate(-50%,-50%) scale(1);}
}
.xplr__node.is-pulse{
  border-color:#059669;background:#059669;color:#fff;
  box-shadow:0 4px 24px rgba(5,150,105,0.4), 0 0 0 6px rgba(5,150,105,0.12);
  transform:translate(-50%,-50%) scale(1.12);
  animation:nodePulseGlow 0.7s ease;
}
@keyframes nodePulseGlow{
  0%{box-shadow:0 4px 24px rgba(5,150,105,0.4), 0 0 0 6px rgba(5,150,105,0.12);}
  50%{box-shadow:0 4px 32px rgba(5,150,105,0.6), 0 0 0 10px rgba(5,150,105,0.08);}
  100%{box-shadow:0 4px 24px rgba(5,150,105,0.4), 0 0 0 6px rgba(5,150,105,0.12);}
}
/* Node connection dot particle */
.xplr__node-dot{
  position:absolute;width:5px;height:5px;border-radius:50%;
  background:#059669;z-index:1;pointer-events:none;
  opacity:0;
}
.xplr__node-dot.is-fly{
  opacity:1;
  transition:left 0.6s cubic-bezier(0.16,1,0.3,1), top 0.6s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.xplr__node-dot.is-fade{opacity:0;}
.xplr__graph-stats{
  text-align:center;margin-top:12px;
  font-family:'Geist Mono',monospace;font-size:11px;color:#444;
  opacity:0;transform:translateY(6px);
  transition:opacity 0.6s 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.6s 0.5s cubic-bezier(0.16,1,0.3,1);
}
.xplr__graph-stats.is-in{opacity:1;transform:translateY(0);}

/* Scene 4: Test Gen */
.xplr__gen{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;}
.xplr__gen-counter{text-align:center;position:relative;}
.xplr__gen-counter span{
  font-family:'Inter',system-ui,sans-serif;font-size:3.6rem;font-weight:900;letter-spacing:-0.04em;color:#0a0a0a;line-height:1;
  display:inline-block;
}
.xplr__gen-counter.is-glow span{
  text-shadow:0 0 30px rgba(5,150,105,0.15);
  animation:counterPop 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes counterPop{0%{transform:scale(1);}50%{transform:scale(1.12);}100%{transform:scale(1);}}
.xplr__gen-counter small{display:block;font-size:12px;color:#333;margin-top:6px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:0.06em;}
/* Spinning ring behind counter — disabled */
.xplr__gen-spinner{display:none;}
.xplr__gen-cats{width:100%;max-width:480px;display:flex;flex-direction:column;gap:10px;}
.xplr__gen-cat{display:flex;align-items:center;gap:12px;opacity:0;transform:translateX(-12px);transition:opacity 0.5s, transform 0.5s cubic-bezier(0.16,1,0.3,1);}
.xplr__gen-cat.is-in{opacity:1;transform:translateX(0);}
.xplr__gen-cat span{font-size:13px;color:#333;white-space:nowrap;min-width:140px;}
.xplr__gen-cat b{color:#0a0a0a;font-weight:700;}
.xplr__gen-bar{flex:1;height:8px;background:rgba(0,0,0,0.04);border-radius:4px;overflow:hidden;}
.xplr__gen-fill{height:100%;width:0;border-radius:3px;transition:width 1.2s cubic-bezier(0.16,1,0.3,1);}
.xplr__gen-fill--1{background:linear-gradient(90deg,#059669,#34d399);}
.xplr__gen-fill--2{background:linear-gradient(90deg,#d97706,#fbbf24);}
.xplr__gen-fill--3{background:linear-gradient(90deg,#dc2626,#f87171);}
.xplr__gen-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:540px;}
.xplr__chip{
  padding:4px 10px;
  font-family:'Geist Mono',monospace;font-size:9px;
  color:#059669;background:rgba(5,150,105,0.06);
  border:1px solid rgba(5,150,105,0.15);border-radius:4px;
  opacity:0;transform:translateY(12px) scale(0.5) rotate(var(--chip-rot, 0deg));
}
.xplr__chip.is-in{
  opacity:1;transform:translateY(0) scale(1) rotate(0deg);
  animation:chipPop 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes chipPop{
  0%{opacity:0;transform:translateY(12px) scale(0.5);}
  60%{transform:translateY(-2px) scale(1.08);}
  100%{transform:translateY(0) scale(1);}
}

/* Scene 5: Run */
.xplr__run{display:flex;align-items:center;gap:36px;width:100%;max-width:700px;}
.xplr__run-ring{position:relative;width:140px;height:140px;flex-shrink:0;}
.xplr__run-ring svg{width:100%;height:100%;}
.xplr__ring-fill{transition:stroke-dashoffset 2.2s cubic-bezier(0.16,1,0.3,1);}
.xplr__run-ring.is-glow svg{filter:drop-shadow(0 0 12px rgba(5,150,105,0.25));}
.xplr__ring-label{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Inter',system-ui,sans-serif;font-size:1.5rem;font-weight:800;color:#059669;
  transition:transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.xplr__run-ring.is-glow .xplr__ring-label{transform:scale(1.08);}
.xplr__run-metrics{display:flex;flex-direction:column;gap:8px;min-width:120px;}
.xplr__rmet{display:flex;align-items:baseline;gap:8px;}
.xplr__rmet-val{font-family:'Inter',system-ui,sans-serif;font-size:1.2rem;font-weight:800;color:#0a0a0a;}
.xplr__rmet-val--green{color:#059669;}
.xplr__rmet-val--yellow{color:#d97706;}
.xplr__rmet-label{font-size:11px;color:#444;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:0.06em;}
.xplr__run-bars{flex:1;display:flex;flex-direction:column;gap:8px;}
.xplr__rbar{display:flex;align-items:center;gap:10px;}
.xplr__rbar span{font-family:'Geist Mono',monospace;font-size:10px;color:#444;min-width:60px;}
.xplr__rbar-track{flex:1;height:5px;background:rgba(0,0,0,0.04);border-radius:3px;overflow:hidden;}
.xplr__rbar-fill{height:100%;width:0;background:linear-gradient(90deg,#059669,#34d399);border-radius:3px;transition:width 1.8s cubic-bezier(0.16,1,0.3,1);}
.xplr__verdict{
  margin-top:16px;
  font-family:'Geist Mono',monospace;font-size:13px;font-weight:600;
  color:#059669;
  opacity:0;transform:scale(2.5);
  text-align:center;
  padding:10px 24px;
  background:rgba(5,150,105,0.06);
  border:1px solid rgba(5,150,105,0.15);
  border-radius:8px;
  display:inline-block;
  position:relative;overflow:hidden;
}
.xplr__verdict.is-in{
  opacity:1;
  animation:verdictSlam 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes verdictSlam{
  0%{opacity:0;transform:scale(2.5);filter:blur(4px);}
  60%{opacity:1;transform:scale(0.92);filter:blur(0);}
  80%{transform:scale(1.04);}
  100%{opacity:1;transform:scale(1);}
}
.xplr__verdict.is-in::after{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(5,150,105,0.15), transparent);
  animation:verdictShine 0.6s 0.3s ease forwards;
}
@keyframes verdictShine{0%{left:-100%;}100%{left:100%;}}
/* Confetti */
.xplr__confetti{
  position:absolute;width:4px;height:8px;
  pointer-events:none;z-index:10;
  animation:confettiFall var(--c-dur, 1s) cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes confettiFall{
  0%{transform:translate(0,0) rotate(0);opacity:1;}
  100%{transform:translate(var(--c-x, 0px), var(--c-y, 60px)) rotate(var(--c-rot, 360deg));opacity:0;}
}

/* Scene dots indicator */
.xplr__indicators{
  display:flex;gap:6px;justify-content:center;
  padding:12px 0 14px;
  background:#fafafa;
  border-top:1px solid rgba(0,0,0,0.04);
}
.xplr__dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,0.12);
  transition:background 0.4s, transform 0.4s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.4s;
}
.xplr__dot.is-active{background:#059669;transform:scale(1.4);box-shadow:0 0 8px rgba(5,150,105,0.3);}

/* ── Hero explainer: mobile + tablet responsive ── */

/* Tablet (640–810px): slightly tighter layout */
@media(max-width:810px){
  .xplr__stage{min-height:500px;}
  .xplr__scene{padding:48px 20px 16px;}
  .xplr__scene-label{font-size:11px;margin-bottom:16px;}
  /* Ingest: reduce inline padding, compact stats row */
  #xplrIngestSpec,#xplrIngestTraffic{padding:14px !important;}
  .xplr__import-stats{flex-direction:row !important;gap:8px 16px;flex-wrap:wrap;}
  .xplr__istat-val{font-size:1.2rem;}
  .xplr__istat-label{font-size:10px;}
  /* Traffic lines: clip to prevent overflow */
  .xplr__traffic-row{overflow:hidden;}
  .xplr__traffic-row span:last-child{font-size:11px !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;max-width:calc(100% - 20px);vertical-align:middle;}
  /* Learn scene inline padding */
  #xplrLearnSpec,#xplrLearnTraffic,#xplrLearnFeedback{padding:12px 14px !important;}
  #xplrLearnModel{padding:14px 16px !important;}
}

/* Mobile (≤640px): compact layout */
@media(max-width:640px){
  .xplr{border-radius:10px;}
  /* Taller stage — must fit the tallest scene (IMPROVE: ring + metrics + bars + verdict) */
  .xplr__stage{min-height:560px;}
  /* Push content below steps bar */
  .xplr__scene{padding:44px 12px 14px;}
  .xplr__scene-label{font-size:9.5px;margin-bottom:10px;letter-spacing:0.07em;}
  /* Step nav: compact */
  .xplr__steps{padding:0 6px;top:6px;}
  .xplr__step{font-size:7px;padding:2px 3px;}
  .xplr__step-line{width:4px;}

  /* Scene 1: Problem cards — stack vertically, row layout inside */
  .xplr__problems{flex-direction:column;gap:8px;}
  .xplr__prob{padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left;}
  .xplr__prob-num{font-size:1.8rem;}
  .xplr__prob-pct{font-size:1rem;}
  .xplr__prob-text{font-size:12px;margin-top:0;}
  .xplr__prob-bar{display:none;}

  /* Scene 2: Ingest — stack two cards, make stats horizontal (not a tall column) */
  .xplr__import{flex-direction:column !important;gap:10px !important;}
  #xplrIngestSpec,#xplrIngestTraffic{padding:12px !important;border-radius:10px !important;}
  /* Stats: horizontal row so card height stays compact */
  .xplr__import-stats{flex-direction:row !important;gap:6px 12px;flex-wrap:wrap;}
  .xplr__istat{gap:6px;}
  .xplr__istat-val{font-size:1rem;}
  .xplr__istat-label{font-size:9px;letter-spacing:0.04em;}
  /* Filename */
  .xplr__ingest-file{font-size:12px !important;}
  /* Traffic log: shrink font, clip overflow */
  .xplr__traffic-row{overflow:hidden;}
  .xplr__traffic-row span:last-child{
    font-size:10px !important;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    display:inline-block;max-width:calc(100% - 20px);vertical-align:middle;
  }
  #xplrTrafficStats span{font-size:10px !important;}

  /* Scene 3: Learn — show all layers, compact sizing */
  .xplr__scene[data-scene="3"]{justify-content:flex-start;}
  .xplr__learn-inputs{flex-wrap:wrap;gap:8px !important;}
  #xplrLearnSpec,#xplrLearnTraffic,#xplrLearnFeedback{padding:10px 12px !important;flex:1 1 calc(50% - 4px) !important;}
  /* Keep arrows, model, output visible but compact */
  #xplrLearnArrows{font-size:14px !important;margin:4px 0 !important;}
  #xplrLearnModel{padding:10px 14px !important;border-radius:10px !important;}
  #xplrLearnModel > div:first-child{font-size:13px !important;margin-bottom:4px !important;}
  #xplrLearnModel > div:last-child{font-size:11px !important;gap:8px !important;}
  #xplrLearnOutput{font-size:12px !important;gap:12px !important;}
  .xplr__graph{height:160px;}
  .xplr__node{padding:4px 8px;font-size:8.5px;}

  /* Scene 4: Generate */
  .xplr__gen-counter span{font-size:2rem;}
  .xplr__gen-counter small{font-size:10px;}
  .xplr__gen-cats{max-width:100%;}
  .xplr__gen-cat span{font-size:11px;min-width:100px;}
  .xplr__gen-cat b{font-size:11px;}

  /* Scene 5: Run/Improve — ring with comfortable padding around the percentage */
  .xplr__run{flex-direction:column;gap:8px;align-items:center;}
  .xplr__run-ring{width:110px;height:110px;}
  .xplr__ring-label{font-size:1.2rem;padding:14px;}
  .xplr__run-metrics{flex-direction:row;flex-wrap:wrap;gap:4px 12px;justify-content:center;min-width:0;}
  .xplr__rmet-val{font-size:1rem;}
  .xplr__rmet-label{font-size:9px;}
  .xplr__run-bars{width:100%;}
  .xplr__rbar span{font-size:9px;min-width:50px;}
  .xplr__cursor{display:none;}
}

/* Small mobile (≤400px): tightest layout */
@media(max-width:400px){
  .xplr__stage{min-height:520px;}
  .xplr__scene{padding:42px 10px 12px;}
  .xplr__steps{gap:0;}
  .xplr__step{font-size:6.5px;padding:2px 2px;}
  .xplr__step-line{width:3px;}
  .xplr__scene-label{font-size:9px;letter-spacing:0.05em;}
  /* Problem */
  .xplr__prob-num{font-size:1.6rem;}
  /* Ingest */
  #xplrIngestSpec,#xplrIngestTraffic{padding:10px !important;}
  .xplr__traffic-row span:last-child{font-size:9.5px !important;}
  /* Generate */
  .xplr__gen-counter span{font-size:1.8rem;}
  /* Run */
  .xplr__run-ring{width:90px;height:90px;}
  .xplr__ring-label{font-size:1rem;padding:12px;}
}


/* Hero mock — clean elevation like Valley */
.hero__visual .mock{
  box-shadow:0 16px 48px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.04);
  border:1px solid rgba(0,0,0,0.06);
  border-radius:8px;
  transition:box-shadow 0.4s ease, transform 0.4s ease;
}
.hero__visual .mock:hover{
  box-shadow:0 20px 60px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.mock--dark{background:#111118;}
.mock__chrome{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;
  background:#f8f8f8;
  border-bottom:0.5px solid rgba(0,0,0,0.08);
}
.mock__chrome--dark{background:#0c0c14;border-bottom-color:rgba(255,255,255,0.06);}
.mock__dots{display:flex;gap:6px;}
.mock__dots span{width:10px;height:10px;border-radius:50%;background:#e0e0e0;}
.mock__dots--dark span{background:rgba(255,255,255,0.1);}
.mock__url{font-family:'Geist Mono',monospace;font-size:11px;color:#999;}
.mock__url--dark{color:rgba(255,255,255,0.35);}
.mock__screen{display:flex;min-height:360px;}
.mock__screen--dark{display:block;padding:24px;min-height:auto;color:rgba(255,255,255,0.85);}

/* Dark mock screen */
.mock__screen--dark{
  position:relative;
  overflow:hidden;
}
.mock__sidebar{
  width:180px;border-right:0.5px solid rgba(0,0,0,0.06);
  padding:16px 0;background:#fff;flex-shrink:0;
}
.mock__sidebar-item{padding:8px 20px;font-size:13px;color:#999;cursor:default;}
.mock__sidebar-item.is-active{color:#000;font-weight:600;background:rgba(0,0,0,0.03);}
.mock__main{flex:1;padding:24px;}
.mock__topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap;}
.mock__heading{font-size:15px;font-weight:600;}
.mock__pill{font-family:'Geist Mono',monospace;font-size:10px;font-weight:700;padding:4px 10px;border-radius:100px;text-transform:uppercase;letter-spacing:0.04em;}
.mock__pill--green{background:rgba(138,180,248,0.08);color:#8ab4f8;}
.mock__run{font-size:12px;font-weight:600;color:#555;margin-left:auto;cursor:pointer;}
.mock__kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;}
.mock__kpi{text-align:center;padding:14px 8px;background:#fafafa;border:0.5px solid rgba(0,0,0,0.06);border-radius:2px;}
.mock__kpi-val{font-family:'Geist Mono',monospace;font-size:1.3rem;font-weight:700;display:block;}
.mock__kpi-val--green{color:#8ab4f8;}
.mock__kpi-val--yellow{color:#d97706;}
.mock__kpi-val--red{color:#dc2626;}
.mock__kpi-val--blue{color:#2563eb;}
.mock__kpi-label{font-size:10px;color:#999;text-transform:uppercase;letter-spacing:0.05em;}
.mock__rows{display:flex;flex-direction:column;gap:4px;}
.mock__row{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  font-family:'Geist Mono',monospace;font-size:12px;
  background:#fafafa;
  border:0.5px solid rgba(0,0,0,0.04);
  border-radius:2px;
}
.mock__row--warn{background:rgba(217,119,6,0.03);border-color:rgba(217,119,6,0.12);}
.mock__status{font-weight:700;}
.mock__status--pass{color:#8ab4f8;}
.mock__status--warn{color:#d97706;}
.mock__endpoint{flex:1;}
.mock__ms{color:#999;font-size:11px;}

/* ================================================================
   DARK MOCK INNER ELEMENTS
   ================================================================ */
.dm-row{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.05);}
.dm-row:last-child{border-bottom:none;}
.dm-label{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(255,255,255,0.35);min-width:80px;}
.dm-val{font-family:'Geist Mono',monospace;font-size:13px;color:rgba(255,255,255,0.85);}
.dm-val--green{color:#8ab4f8;}
.dm-val--yellow{color:#fbbf24;}
.dm-val--blue{color:#60a5fa;}
.dm-val--red{color:#f87171;}
.dm-bar{height:6px;background:rgba(255,255,255,0.06);border-radius:3px;margin-top:14px;overflow:hidden;}
.dm-bar__fill{height:100%;border-radius:3px;background:#8ab4f8;transition:width 1.2s ease;}
.dm-bar__fill--green{background:#8ab4f8;}
.dm-bar__fill--blue{background:#60a5fa;}

/* Progress bar — clean */
.dm-bar__fill{position:relative;}

/* Dep graph */
.dep-graph{display:flex;align-items:center;gap:8px;justify-content:center;padding:16px 0;flex-wrap:wrap;}
.dep-col{display:flex;flex-direction:column;gap:8px;}
.dep-arrow{color:rgba(255,255,255,0.2);font-size:16px;}
.dep-node{
  padding:8px 14px;font-family:'Geist Mono',monospace;font-size:11px;
  border:1px solid rgba(255,255,255,0.08);border-radius:2px;
  text-align:center;
}
.dep-node--green{border-color:rgba(138,180,248,0.3);color:#8ab4f8;background:rgba(138,180,248,0.05);}
.dep-node--yellow{border-color:rgba(251,191,36,0.3);color:#fbbf24;background:rgba(251,191,36,0.05);}

/* Metrics */
.dm-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;}
.dm-metric{display:flex;flex-direction:column;gap:4px;padding:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:2px;}
.dm-metric__label{font-family:'Geist Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:0.05em;color:rgba(255,255,255,0.35);}
.dm-metric__val{font-family:'Geist Mono',monospace;font-size:1.1rem;font-weight:700;}

/* Bar rows in dark mock */
.dm-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.dm-bar-label{font-family:'Geist Mono',monospace;font-size:11px;color:rgba(255,255,255,0.4);min-width:80px;}
.dm-bar-pct{font-family:'Geist Mono',monospace;font-size:10px;color:rgba(255,255,255,0.3);min-width:36px;text-align:right;}

/* Log rows */
.dm-log{display:flex;flex-direction:column;gap:8px;}
.dm-log-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-family:'Geist Mono',monospace;font-size:12px;}
.dm-log-row:last-child{border-bottom:none;}
.dm-check{font-weight:700;}
.dm-check--green{color:#8ab4f8;}
.dm-check--yellow{color:#fbbf24;}

/* KPIs */
.dm-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px;}
.dm-kpi{text-align:center;padding:12px;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:2px;}
.dm-kpi__val{font-family:'Geist Mono',monospace;font-size:1.4rem;font-weight:700;display:block;color:rgba(255,255,255,0.9);}
.dm-kpi__label{font-family:'Geist Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:0.06em;color:rgba(255,255,255,0.3);}

/* ================================================================
   STICKY TABS — sticks below 90px navbar
   ================================================================ */
.sticky-tabs{
  position:sticky;top:72px;z-index:50;
  background:#fff;
  background-image:none;
  border-bottom:1px solid rgba(0,0,0,0.08);
  transition:box-shadow 0.3s;
}
.sticky-tabs.is-stuck{box-shadow:0 1px 0 rgba(0,0,0,0.04);}
.sticky-tabs__inner{
  display:flex;align-items:center;gap:0;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.sticky-tabs__inner::-webkit-scrollbar{display:none;}
.sticky-tabs__tab{
  padding:16px 20px;
  font-size:12px;font-weight:500;
  color:#999;
  white-space:nowrap;
  cursor:pointer;
  text-decoration:none;
  transition:color 0.2s;
  border-bottom:1.5px solid transparent;
  margin-bottom:-1px;
}
.sticky-tabs__tab:hover{color:#000;}
.sticky-tabs__tab.is-active{color:#000;border-bottom-color:#000;}
.sticky-tabs__divider{width:1px;height:16px;background:rgba(0,0,0,0.08);flex-shrink:0;}

/* ================================================================
   SECTIONS
   ================================================================ */
.section{padding:80px 0;position:relative;overflow:hidden;}
.section--border{border-bottom:1px solid rgba(0,0,0,0.06);}

/* ================================================================
   SECTION BACKGROUNDS — geometric design system
   Subtle CSS-only geometric patterns: dot grids, diagonal lines,
   and angular shapes. Tech-appropriate, restrained, editorial.
   ================================================================ */

/* Ensure section content sits above pseudo-element backgrounds */
.section > .container{position:relative;z-index:2;}
.trust-bar > .container{position:relative;z-index:2;}

/* --- Base tint layer — override body dot pattern --- */
.section--tint-blue,
.section--tint-soft,
.section--tint-warm{
  background-image:none;
}
.section--accent{
  background-image:none;
}

/* ---- Soft blue tint — waitlist (watercolor bg) ---- */
.section--tint-blue{
  background:#f6fafe;
}
.section--tint-blue::before{
  content:'';position:absolute;inset:0;
  background:url('images/bg/bg-2.jpg') center/cover no-repeat;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}
.section--tint-blue::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    #fff 0%, transparent 15%,
    transparent 85%, #fff 100%);
  pointer-events:none;
  z-index:1;
}

/* ---- Soft neutral tint — built-for (watercolor bg) ---- */
.section--tint-soft{
  background:#f7f7fb;
}
.section--tint-soft::before{
  content:'';position:absolute;inset:0;
  background:url('images/bg/bg-3.jpg') center/cover no-repeat;
  opacity:0.05;
  pointer-events:none;
  z-index:0;
}
.section--tint-soft::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    #fff 0%, transparent 18%,
    transparent 82%, #fff 100%);
  pointer-events:none;
  z-index:1;
}

/* ---- Warm tint — comparison (watercolor bg restored) ---- */
.section--tint-warm{
  background:#fff;
}
.section--tint-warm::before{
  display:none;
}
.section--tint-warm::after{
  display:none;
}

/* ================================================================
   PROBLEM SECTION — Dark charcoal with geometric grid
   ================================================================ */
.section--problem{
  background:url('images/theprob.avif') center/cover no-repeat;
  color:#fff;
  border:none;
  padding:100px 0;
}
.section--problem::before{
  content:'';position:absolute;inset:0;
  background:none;
  pointer-events:none;
  z-index:0;
}
.section--problem::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(255,255,255,0.95) 0%, transparent 15%,
    transparent 85%, rgba(255,255,255,0.95) 100%);
  pointer-events:none;
  z-index:1;
}
.section--problem > .container{ position:relative; z-index:2; }
.section--problem .section__label{color:rgba(0,0,0,0.4);}
.section--problem .section__label::before,
.section--problem .section__label::after{background:rgba(0,0,0,0.1);}
.section--problem .section__title{color:#0a0a0a;}
.section--problem .section__desc{color:rgba(0,0,0,0.5);}


/* ================================================================
   PROBLEM SECTION — Geometric bento grid
   ================================================================ */
.prob-bento{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  max-width:1060px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.prob-card{
  position:relative;
  overflow:hidden;
  border:none;
  border-radius:4px;
  background:#111;
  transition:background 0.4s;
  z-index:2;
}
.prob-card:hover{
  background:#161616;
}
/* Cards — equal columns, uniform styling */
.prob-card--hero,
.prob-card--tr,
.prob-card--br{
  padding:40px 32px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

/* Geo shapes removed — clean solid cards */
.prob-card__geo{ display:none; }

/* Accent lines & cross marks removed — clean cards */
.prob-card::before, .prob-card::after{ display:none; }

/* Inner content */
.prob-card__inner{
  position:relative;
  z-index:2;
}
.prob-card__num{
  font-family:'Inter','DM Sans',system-ui,sans-serif;
  font-weight:900;
  letter-spacing:-0.05em;
  line-height:1;
  display:block;
  color:#fff;
}
.prob-card__num{
  font-size:3.8rem;
}
.prob-card__line{
  width:40px;
  height:1px;
  background:rgba(255,255,255,0.15);
  margin:20px 0;
}
/* uniform line size */
.prob-card__title{
  font-family:'Inter','DM Sans',system-ui,sans-serif;
  font-size:17px; font-weight:600; color:rgba(255,255,255,0.88);
  margin-bottom:10px; letter-spacing:-0.01em;
}
/* uniform title size */
.prob-card__text{
  font-size:14px; line-height:1.7; color:rgba(255,255,255,0.3);
}
/* uniform text size */

/* Floating tag label */
.prob-card__tag{
  position:absolute;
  z-index:2;
  font-family:'Geist Mono',monospace;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.2);
  padding:6px 12px;
  border:0.5px solid rgba(255,255,255,0.06);
  border-radius:2px;
  backdrop-filter:blur(4px);
}
.prob-card__tag{
  top:16px; right:16px;
}
/* Bottom CTA */
.prob-bottom{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:28px; margin-top:56px;
  max-width:900px; margin-left:auto; margin-right:auto;
  text-align:center;
  position:relative; z-index:2;
}
.prob-bottom__text{
  font-size:17px; color:rgba(0,0,0,0.45);
  max-width:520px; line-height:1.7;
}
.prob-bottom__btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:14px 32px;
  font-size:14px; font-weight:600;
  color:#fff; background:#0a0a0a;
  border-radius:2px;
  transition:all 0.25s ease;
  letter-spacing:-0.01em;user-select:none;
}
.prob-bottom__btn:hover{
  background:rgba(255,255,255,0.9);
  transform:translateY(-1px);
  box-shadow:0 4px 20px rgba(255,255,255,0.15);
}
.prob-bottom__btn span{
  font-size:16px;
  transition:transform 0.2s;
}
.prob-bottom__btn:hover span{
  transform:translateX(3px);
}

.section__label{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#999;
  text-align:center;
  margin-bottom:16px;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.section__label::before,.section__label::after{
  content:'';height:0.5px;width:24px;background:rgba(0,0,0,0.15);
}
.section__title{
  text-align:center;
  margin-bottom:16px;
}
.section__desc{
  text-align:center;
  color:#666;
  font-size:16px;
  line-height:1.7;
  max-width:560px;
  margin:0 auto 52px;
}

/* ================================================================
   FEATURE BLOCKS — alternating text + large dark mock
   ================================================================ */
.feat{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:60px;
  align-items:center;
  padding:80px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.feat:last-child{border-bottom:none;}
.feat--reverse{grid-template-columns:1.2fr 1fr;}
.feat--reverse .feat__copy{order:2;}
.feat--reverse .feat__media{order:1;}

.feat__label{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#999;
  margin-bottom:14px;
  display:block;
}
.feat__title{font-size:clamp(1.4rem,2.5vw,2rem);margin-bottom:16px;letter-spacing:-0.02em;}
.feat__desc{font-size:15px;color:#555;line-height:1.75;margin-bottom:20px;}
.feat__list{display:flex;flex-direction:column;gap:8px;}
.feat__list li{
  font-size:14px;color:#555;padding-left:20px;position:relative;line-height:1.6;
}
.feat__list li::before{content:'→';position:absolute;left:0;color:#888;font-weight:500;}
.feat__media{position:relative;}

/* Feature visual areas — Geometric compositions with watercolor */
.feat__gradient{
  position:relative;
  min-height:420px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  overflow:visible;
  border:none;
  padding:40px;
}
.feat__gradient .mock{
  border:none;
  border-radius:8px;
  box-shadow:0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  position:relative;z-index:3;
  max-width:100%;
}

/* ---- Geometric watercolor shapes ---- */
.feat__gradient--photo{
  background:none !important;
}
/* Base watercolor layer — clipped into geometric shapes */
.feat__gradient--photo::before{
  content:'';
  position:absolute;
  background:var(--bg) center/cover no-repeat;
  z-index:0;
}
/* accent line removed — soft blended edges */

/* ---- Features 1 & 3 (normal layout): soft bottom-right triangle ---- */
#cap-testgen .feat__gradient--photo::before,
#cap-agent .feat__gradient--photo::before{
  inset:-40px;
  -webkit-mask-image:radial-gradient(ellipse 120% 120% at 100% 100%, black 10%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.12) 52%, transparent 68%);
  mask-image:radial-gradient(ellipse 120% 120% at 100% 100%, black 10%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.12) 52%, transparent 68%);
}

/* ---- Features 2 & 4 (reversed layout): soft bloom from bottom-left ---- */
#cap-depgraph .feat__gradient--photo::before,
#cap-scale .feat__gradient--photo::before{
  inset:-40px;
  -webkit-mask-image:radial-gradient(ellipse 120% 120% at 0% 100%, black 10%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.12) 52%, transparent 68%);
  mask-image:radial-gradient(ellipse 120% 120% at 0% 100%, black 10%, rgba(0,0,0,0.45) 35%, rgba(0,0,0,0.12) 52%, transparent 68%);
}

/* Cross-mark decorations on feature visuals */
.feat__gradient--photo .feat__geo-mark{
  position:absolute;
  font-family:'Geist Mono',monospace;
  font-size:9px;
  color:rgba(0,0,0,0.08);
  z-index:1;
  pointer-events:none;
}

/* ================================================================
   CARDS — Valley style with thin borders, 2px radius
   ================================================================ */
.card-grid{display:grid;gap:16px;}
.card-grid--4{grid-template-columns:repeat(4,1fr);}
.card-grid--3{grid-template-columns:repeat(3,1fr);}
.card-grid--2{grid-template-columns:repeat(2,1fr);}
.card{
  padding:28px 24px;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:2px;
  background:#fff;
  transition:background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
  cursor:default;
  position:relative;
}
.card:hover{
  background:#0a0a0a;
  border-color:#0a0a0a;
  box-shadow:0 8px 28px rgba(0,0,0,0.15);
  transform:translateY(-2px);
}
.card:hover .card__title{color:#fff;}
.card:hover .card__text{color:rgba(255,255,255,0.7);}
.card:hover .card__num{color:rgba(255,255,255,0.4);}
.card:hover .tag{color:rgba(255,255,255,0.6);border-color:rgba(255,255,255,0.15);}
.card__num{
  font-family:'Geist Mono',monospace;
  font-size:11px;font-weight:700;
  color:#ccc;
  margin-bottom:12px;display:block;
}
.card__title{margin-bottom:8px;font-size:16px;transition:color 0.3s ease;}
.card__text{font-size:14px;color:#666;line-height:1.65;transition:color 0.3s ease;}
.card__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px;}
.tag{
  font-family:'Geist Mono',monospace;
  font-size:10px;font-weight:500;
  padding:4px 10px;
  color:#666;
  border:0.5px solid rgba(0,0,0,0.1);
  border-radius:2px;
}

/* ================================================================
   USE-CASE ILLUSTRATED CARDS
   ================================================================ */
.uc-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}
.uc-card{
  border:1px solid rgba(0,0,0,0.06);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  transition:border-color 0.25s, box-shadow 0.35s, transform 0.35s;
  cursor:default;
  display:flex;
  flex-direction:column;
}
.uc-card:hover{
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 12px 40px rgba(0,0,0,0.08);
  transform:translateY(-4px);
}
.uc-card__title{
  padding:22px 24px 0;
  font-size:16px;
  font-weight:600;
  letter-spacing:-0.01em;
  color:#0a0a0a;
}
/* Visual area — Valley-style blurred gradient bg */
.uc-card__visual{
  position:relative;
  flex:1;
  margin:14px 14px 14px;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0;
  min-height:280px;
}
/* Subtle grain enhancement (main grain comes from the watercolor texture itself) */
.uc-card__visual::before{
  content:'';
  position:absolute;
  inset:0;
  background:url('images/paper-grain.png') repeat;
  opacity:0.3;
  z-index:1;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.uc-card__visual::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,0.25);
  z-index:0;
  pointer-events:none;
}
.uc-card__visual--1{
  background:url('images/uc-texture-1.jpg') center/cover no-repeat;
}
.uc-card__visual--2{
  background:url('images/uc-texture-2.jpg') center/cover no-repeat;
}
.uc-card__visual--3{
  background:url('images/uc-texture-3.jpg') center/cover no-repeat;
}
.uc-card__visual--4{
  background:url('images/uc-texture-4.jpg') center/cover no-repeat;
}

/* ═══════════════════════════════════════════════════
   Card 1 — Terminal / Test-runner
   ═══════════════════════════════════════════════════ */
.uc-terminal{
  position:relative;
  z-index:2;
  width:88%;
  border-radius:10px;
  overflow:hidden;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
  border:1px solid rgba(0,0,0,0.06);
}
.uc-terminal__bar{
  display:flex;
  align-items:center;
  gap:6px;
  padding:10px 14px;
  background:rgba(0,0,0,0.03);
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.uc-terminal__dot{
  width:8px;height:8px;
  border-radius:50%;
}
.uc-terminal__title{
  margin-left:8px;
  font-family:'Geist Mono',monospace;
  font-size:10px;
  font-weight:500;
  color:rgba(0,0,0,0.4);
}
.uc-terminal__body{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.uc-terminal__line{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:500;
  color:rgba(0,0,0,0.7);
  line-height:1.6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.uc-terminal__line--gap{margin-top:6px;}
.uc-terminal__line--result{
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid rgba(0,0,0,0.08);
}
.uc-t-dim{color:rgba(0,0,0,0.35);}
.uc-t-green{color:#16a34a;}
.uc-t-red{color:#dc2626;}
.uc-t-cyan{color:#0891b2;}

/* ═══════════════════════════════════════════════════
   Card 2 — Chat / Intercept
   ═══════════════════════════════════════════════════ */
.uc-chat{
  position:relative;
  z-index:2;
  width:88%;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.uc-chat__msg{
  padding:10px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.uc-chat__label{
  display:block;
  font-family:'Geist Mono',monospace;
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#888;
  margin-bottom:4px;
}
.uc-chat__text{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:500;
  color:#0a0a0a;
  line-height:1.5;
}
.uc-chat__shield{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-radius:12px;
  background:rgba(217,48,37,0.06);
  border:1px solid rgba(217,48,37,0.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.uc-chat__shield-text{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:700;
  color:#d93025;
}
.uc-chat__scores{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 14px;
  border-radius:12px;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,0,0,0.06);
}
.uc-chat__score-item{
  display:flex;
  align-items:center;
  gap:10px;
}
.uc-chat__score-label{
  font-family:'Geist Mono',monospace;
  font-size:9px;
  font-weight:600;
  color:#888;
  min-width:60px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.uc-chat__score-bar{
  flex:1;
  height:5px;
  background:rgba(0,0,0,0.06);
  border-radius:3px;
  overflow:hidden;
}
.uc-chat__score-fill{
  height:100%;
  background:linear-gradient(90deg,#22863a,#4ade80);
  border-radius:3px;
}
.uc-chat__score-fill--low{
  background:#4ade80;
}
.uc-chat__score-val{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:800;
  color:#0a0a0a;
  min-width:32px;
  text-align:right;
}

/* ═══════════════════════════════════════════════════
   Card 3 — Live Dashboard / Metrics
   ═══════════════════════════════════════════════════ */
.uc-dash{
  position:relative;
  z-index:2;
  width:88%;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.uc-dash__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 16px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.uc-dash__live{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Geist Mono',monospace;
  font-size:10px;
  font-weight:700;
  color:#0a0a0a;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.uc-dash__live-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:#22863a;
  box-shadow:0 0 6px rgba(34,134,58,0.5);
  animation:uc-pulse 2s ease-in-out infinite;
}
@keyframes uc-pulse{
  0%,100%{opacity:1;}
  50%{opacity:0.4;}
}
.uc-dash__target{
  font-family:'Geist Mono',monospace;
  font-size:9px;
  font-weight:500;
  color:#888;
}
.uc-dash__chart{
  padding:12px 16px 4px;
  height:80px;
}
.uc-dash__svg{
  width:100%;
  height:100%;
}
.uc-dash__metrics{
  display:flex;
  justify-content:space-around;
  padding:10px 12px 14px;
  border-top:1px solid rgba(0,0,0,0.06);
}
.uc-dash__metric{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
}
.uc-dash__metric-val{
  font-family:'Geist Mono',monospace;
  font-size:16px;
  font-weight:800;
  color:#0a0a0a;
  letter-spacing:-0.02em;
}
.uc-dash__metric-val--green{
  color:#22863a;
}
.uc-dash__metric-label{
  font-family:'Geist Mono',monospace;
  font-size:8px;
  font-weight:500;
  color:#888;
  text-transform:uppercase;
  letter-spacing:0.06em;
}

/* ═══════════════════════════════════════════════════
   Card 4 — CI Pipeline
   ═══════════════════════════════════════════════════ */
.uc-pipe{
  position:relative;
  z-index:2;
  width:88%;
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
}
.uc-pipe__header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.uc-pipe__header span{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:600;
  color:#0a0a0a;
}
.uc-pipe__stages{
  padding:6px 0;
}
.uc-pipe__stage{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  position:relative;
}
.uc-pipe__stage-icon{
  width:24px;
  height:24px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.uc-pipe__stage--pass .uc-pipe__stage-icon{
  background:rgba(34,134,58,0.08);
}
.uc-pipe__stage--gate .uc-pipe__stage-icon{
  background:rgba(34,134,58,0.06);
  border:1px solid rgba(34,134,58,0.2);
}
.uc-pipe__stage-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex:1;
  min-width:0;
}
.uc-pipe__stage-name{
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:600;
  color:#0a0a0a;
}
.uc-pipe__stage-time{
  font-family:'Geist Mono',monospace;
  font-size:10px;
  font-weight:500;
  color:#888;
}
.uc-pipe__stage-line{
  position:absolute;
  left:27px;
  bottom:-4px;
  width:1px;
  height:8px;
  background:rgba(0,0,0,0.08);
}
.uc-pipe__stage:last-child .uc-pipe__stage-line{display:none;}

.uc-ctag{
  font-family:'Geist Mono',monospace;
  font-size:10px;
  font-weight:700;
  padding:4px 12px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-radius:20px;
  color:#0a0a0a;
  letter-spacing:0.03em;
  box-shadow:0 2px 10px rgba(0,0,0,0.08);
}

/* Stat cards */
.card--stat{text-align:center;padding:36px 24px;}
.card__stat{
  font-family:'Inter',sans-serif;
  font-size:3rem;font-weight:900;
  display:block;margin-bottom:12px;
  letter-spacing:-0.03em;
}
.card__stat--red{color:#dc2626;}
.card__stat--yellow{color:#d97706;}
.card__stat--blue{color:#2563eb;}

/* ================================================================
   GRADIENT IMAGE CARDS — Valley's signature gradient photos
   ================================================================ */
.card--gradient{
  position:relative;
  min-height:280px;
  border:none;
  border-radius:2px;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:32px;
  color:#fff;
}
.card--gradient .card__title{color:#fff;}
.card--gradient .card__text{color:rgba(255,255,255,0.8);}

/* Valley uses warm sunset / cool blue gradient backgrounds on cards */
.card--gradient-warm{
  background:linear-gradient(135deg,#f97316 0%,#ec4899 40%,#8b5cf6 100%);
}
.card--gradient-cool{
  background:linear-gradient(135deg,#3b82f6 0%,#06b6d4 50%,#8ab4f8 100%);
}
.card--gradient-sunset{
  background:linear-gradient(135deg,#f59e0b 0%,#ef4444 50%,#ec4899 100%);
}
.card--gradient-sky{
  background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 50%,#a855f7 100%);
}

/* ================================================================
   STEPS
   ================================================================ */
/* ---- HTW Section — override section overflow to allow sticky ---- */
#product-tour{
  overflow:visible;
  padding-bottom:0;
}
#product-tour > .container{
  position:static;
  z-index:auto;
}

/* ---- HTW Tabs — step navigation (inside sticky viewport) ---- */
.htw-tabs{
  display:flex;
  border-bottom:1px solid rgba(0,0,0,0.08);
  overflow:hidden;
  position:relative;
  z-index:2;
  flex-shrink:0;
}
.htw-tab{
  flex:1;
  padding:16px 12px;
  font-family:'Geist Mono',monospace;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:#bbb;
  background:#fafafa;
  border:none;
  border-bottom:3px solid transparent;
  border-right:1px solid rgba(0,0,0,0.06);
  cursor:pointer;
  transition:background 0.25s, color 0.25s, border-color 0.25s;
}
.htw-tab:last-child{border-right:none;}
.htw-tab:hover{background:#f0f0f0;color:#333;}
.htw-tab.is-active{
  background:#fff;
  color:#000;
  border-bottom-color:#000;
}

/* ---- HTW Scroll-driven tab section ---- */
.htw-pin{
  /* Tall scroll runway: 5 steps × 80vh each */
  height:400vh;
  position:relative;
}
.htw-viewport{
  position:sticky;
  top:72px; /* below nav */
  height:calc(100vh - 72px);
  overflow:hidden;
  border:1px solid rgba(0,0,0,0.08);
  border-radius:2px;
  background:#fff;
  display:flex;
  flex-direction:column;
}
.htw-header{
  flex-shrink:0;
  padding:32px 52px 0;
}
.htw-header .section__label,
.htw-header .section__title{
  text-align:center;
}
.htw-header .section__desc{
  text-align:center;
  max-width:560px;
  margin-left:auto;
  margin-right:auto;
}
.htw-content{
  flex:1;
  min-height:0;
  position:relative;
}
.htw-panel{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:48px;
  align-items:center;
  padding:32px 52px;
  box-sizing:border-box;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.4s ease, visibility 0.4s;
}
.htw-panel.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.htw-panel__left{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.htw-panel__right{
  display:flex;
  align-items:center;
  justify-content:center;
}
.htw-panel__right .mock{
  border-radius:8px;
  border:none;
  box-shadow:0 8px 32px rgba(0,0,0,0.1);
  width:100%;
  max-width:520px;
}
.htw__num{
  font-family:'Geist Mono',monospace;
  font-size:12px;
  color:#bbb;
  letter-spacing:0.04em;
  display:block;
  margin-bottom:16px;
}
.htw__step-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:-0.01em;
  margin-bottom:12px;
}
.htw__step-desc{
  font-size:14px;
  color:#666;
  line-height:1.7;
  max-width:480px;
}

/* ================================================================
   DIFFERENTIATION GRID — Valley-style aesthetics
   ================================================================ */
#comparison .section__desc{ margin-bottom:0; }
#comparison > .container{ position:relative; z-index:2; }
.diff-grid{
  max-width:780px; margin:2.5rem auto 0;
  border:0.5px solid rgba(0,0,0,0.10); border-radius:2px;
  overflow:hidden; background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,0.03), 0 4px 16px rgba(0,0,0,0.025);
}
/* Header */
.diff-header{
  display:grid; grid-template-columns:1fr 160px 160px; gap:0;
  background:#fafbfc; border-bottom:0.5px solid rgba(0,0,0,0.08);
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:10px; font-weight:500; letter-spacing:0.08em; text-transform:uppercase;
}
.diff-header__cap{ padding:14px 24px; color:#aaa; }
.diff-header__col{ padding:14px 20px; text-align:center; color:#aaa; }
/* Watercolor GQ column — continuous strip across header + rows */
.diff-header__col--gq{
  background:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)),
    url('images/diff-gq-strip.jpg') center 0% / 100% 1000% no-repeat;
  color:#0a0a0a; font-weight:700; font-size:11px;
  border-left:0.5px solid rgba(0,0,0,0.06);
  letter-spacing:0.04em;
}
.diff-header__col--other{ color:#bbb; }
.diff-logo{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-family:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; font-weight:700; letter-spacing:-0.03em; text-transform:none; }
.diff-logo__icon{ width:16px; height:16px; border-radius:2px; opacity:1; }
/* Feature rows */
.diff-row{
  display:grid; grid-template-columns:1fr 160px 160px; gap:0;
  border-bottom:0.5px solid rgba(0,0,0,0.05);
  transition:background 0.25s ease;
}
.diff-row:last-of-type{ border-bottom:none; }
.diff-row:hover{ background:rgba(0,0,0,0.015); }
.diff-row__cap{
  display:flex; align-items:center; gap:10px;
  padding:14px 24px; font-size:13.5px; color:#333; font-weight:400;
  line-height:1.5;
}
.diff-row__cap svg{ flex-shrink:0; width:16px; height:16px; opacity:0.4; }
.diff-row__val{
  display:flex; align-items:center; justify-content:center;
  padding:14px 20px; border-left:0.5px solid rgba(0,0,0,0.05);
}
/* Each GQ cell shows a unique slice — softened with white overlay */
.diff-row__val--gq{
  background:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)),
    url('images/diff-gq-strip.jpg') center 10% / 100% 1000% no-repeat;
}
.diff-row:nth-child(2) .diff-row__val--gq{ background-position:center 20%; }
.diff-row:nth-child(3) .diff-row__val--gq{ background-position:center 30%; }
.diff-row:nth-child(4) .diff-row__val--gq{ background-position:center 40%; }
.diff-row:nth-child(5) .diff-row__val--gq{ background-position:center 50%; }
.diff-row:nth-child(6) .diff-row__val--gq{ background-position:center 60%; }
.diff-row:nth-child(7) .diff-row__val--gq{ background-position:center 70%; }
.diff-row:nth-child(8) .diff-row__val--gq{ background-position:center 80%; }
.diff-row:nth-child(9) .diff-row__val--gq{ background-position:center 90%; }
/* Check icon */
.diff-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(255,255,255,0.8); color:#8ab4f8;
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1), box-shadow 0.3s;
}
.diff-row:hover .diff-check{ transform:scale(1.1); box-shadow:0 0 12px rgba(138,180,248,0.25); }
/* Cross icon */
.diff-cross{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:rgba(0,0,0,0.025); color:#ccc;
}
/* Partial badge */
.diff-partial{
  font:500 10px/1 'Geist Mono',monospace;
  color:#b45309; background:rgba(217,119,6,0.05);
  padding:4px 10px; border-radius:999px;
  border:0.5px solid rgba(217,119,6,0.12);
  letter-spacing:0.03em; text-transform:uppercase;
}
/* Staggered scroll entrance */
.diff-row--anim{
  opacity:0; transform:translateX(-16px);
  transition:opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1), background 0.25s;
}
.diff-row--anim.is-visible{ opacity:1; transform:translateX(0); }
/* Score summary */
.diff-score{
  display:grid; grid-template-columns:1fr 160px 160px; gap:0;
  border-top:0.5px solid rgba(0,0,0,0.10); background:#fafbfc;
}
.diff-score__cap{
  padding:16px 24px; font-weight:600; font-size:13px; color:#222;
  font-family:'Inter','DM Sans',system-ui,sans-serif;
}
.diff-score__val{
  display:flex; align-items:center; justify-content:center; gap:2px;
  padding:16px; border-left:0.5px solid rgba(0,0,0,0.05);
}
.diff-score__val--gq{
  background:
    linear-gradient(rgba(255,255,255,0.55), rgba(255,255,255,0.55)),
    url('images/diff-gq-strip.jpg') center 95% / 100% 1000% no-repeat;
}
.diff-score__num{
  font-family:'Inter','DM Sans',system-ui,sans-serif;
  font-weight:700; font-size:1.4rem; line-height:1; letter-spacing:-0.02em;
}
.diff-score__val--gq .diff-score__num{ color:#0a0a0a; }
.diff-score__val--gq .diff-score__of{ color:rgba(0,0,0,0.5); }
.diff-score__val--other .diff-score__num{ color:#ccc; }
.diff-score__of{ font-weight:400; font-size:0.75rem; color:#bbb; }

/* Responsive — stack on mobile */
@media(max-width:640px){
  .diff-header,.diff-row,.diff-score{ grid-template-columns:1fr 100px 100px; }
  .diff-row__cap{ font-size:12px; padding:12px 16px; gap:8px; }
  .diff-header__cap{ padding:12px 16px; }
  .diff-row__val,.diff-header__col,.diff-score__val{ padding:12px 8px; }
  .diff-score__cap{ padding:12px 16px; font-size:12px; }
  .diff-check,.diff-cross{ width:24px; height:24px; }
}

/* ================================================================
   DEVELOPER TABS
   ================================================================ */
.dev-tabs{
  display:flex;gap:0;
  border-bottom:0.5px solid rgba(0,0,0,0.1);
  max-width:860px;margin:0 auto;
}
.dev-tab{
  padding:12px 24px;
  font-family:'Geist Mono',monospace;
  font-size:12px;font-weight:500;
  color:#999;
  cursor:pointer;
  border-bottom:1.5px solid transparent;
  margin-bottom:-0.5px;
  transition:all 0.2s;
}
.dev-tab:hover{color:#000;}
.dev-tab.is-active{color:#000;border-bottom-color:#000;}
.dev-panels{max-width:860px;margin:0 auto;}
.dev-panel{display:none;}
.dev-panel.is-active{display:block;}
.code{
  margin:0;padding:28px;
  background:#111118;
  border:0.5px solid rgba(0,0,0,0.1);
  border-top:none;
  border-radius:0 0 2px 2px;
  overflow-x:auto;
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:13px;line-height:1.8;
  color:rgba(255,255,255,0.8);
}
.cc{color:rgba(255,255,255,0.3);}
.ck{color:#c4b5fd;}
.cs{color:#8ab4f8;}
.cf{color:#60a5fa;}
.cn{color:#fbbf24;}
.cg{color:#8ab4f8;}
.cy{color:#fbbf24;}
.cr{color:#f87171;}

/* ================================================================
   WAITLIST
   ================================================================ */
.waitlist{
  display:grid;grid-template-columns:1fr 1fr;
  gap:80px;align-items:start;
}
.waitlist__left .section__label{text-align:left;}
.waitlist__right{width:100%;}
.waitlist__desc{font-size:15px;color:#555;line-height:1.75;margin-bottom:28px;}
.waitlist__perks{display:flex;flex-direction:column;gap:10px;}
.waitlist__perk{display:flex;align-items:center;gap:10px;font-size:14px;color:#555;}
.waitlist__check{color:#8ab4f8;font-weight:700;font-size:14px;}
.wl-form{display:flex;flex-direction:column;gap:12px;}
.wl-form input,.wl-form select{
  padding:14px 16px;
  border:0.5px solid rgba(0,0,0,0.16);
  border-radius:2px;
  font-size:14px;color:#000;
  background:#fff;
  transition:border-color 0.2s;
}
.wl-form input:focus,.wl-form select:focus{border-color:#555;}
.wl-form input::placeholder{color:#bbb;}
.wl-form select{color:#bbb;}
.wl-form select:valid{color:#000;}
.wl-form__btn{
  padding:14px 24px;
  font-size:14px;font-weight:600;
  color:#fff;background:#000;
  border-radius:2px;
  cursor:pointer;
  transition:background 0.2s;
  width:100%;user-select:none;
}
.wl-form__btn:hover{background:#222;}

/* ================================================================
   FAQ
   ================================================================ */
.faq{margin-top:32px;}
.faq__item{border-bottom:0.5px solid rgba(0,0,0,0.08);}
.faq__item summary{
  padding:20px 0;
  font-size:15px;font-weight:600;
  cursor:pointer;
  list-style:none;
  display:flex;align-items:center;justify-content:space-between;
  color:#000;
  transition:color 0.2s;
}
.faq__item summary:hover{color:#555;}
.faq__item summary::after{content:'+';font-size:1.4rem;font-weight:300;color:#999;transition:transform 0.3s ease,color 0.2s;}
.faq__item[open] summary::after{content:'−';color:#555;}
.faq__item summary::-webkit-details-marker{display:none;}
.faq__item p{padding:0 0 20px;font-size:14px;color:#555;line-height:1.7;}

/* FAQ smooth expansion */
.faq__item summary{
  cursor:pointer;
  transition:color 0.2s;
}
.faq__item[open] summary{
  color:#555;
  margin-bottom:12px;
}
.faq__item p{
  animation:faqExpand 0.3s ease;
}
@keyframes faqExpand{
  from{opacity:0;transform:translateY(-8px);}
  to{opacity:1;transform:translateY(0);}
}

/* ================================================================
   FOOTER — Valley dark style
   ================================================================ */
.footer{
  position:relative;
  overflow:hidden;
  background:#0a0a0a;
  color:#fff;
}

/* Top section — dark with grid */
.footer__top{
  padding:72px 0 48px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.footer__grid{
  display:grid;grid-template-columns:1fr 1.4fr;
  gap:80px;
}
.footer__left{}
.footer__logo{margin-bottom:18px;height:28px;opacity:0.9;}
.footer__tagline{
  font-size:14px;
  color:rgba(255,255,255,0.4);
  line-height:1.6;
  margin-bottom:12px;
}
.footer__contact{font-size:13px;color:rgba(255,255,255,0.3);margin-bottom:0;}
.footer__contact a{color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s;}
.footer__contact a:hover{color:rgba(255,255,255,0.8);}
.footer__right{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;
}
.footer__col h4{
  font-family:'Geist Mono','Fragment Mono',monospace;
  font-size:10px;font-weight:400;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  margin-bottom:16px;
}
.footer__col a{display:block;font-size:13px;color:rgba(255,255,255,0.5);padding:5px 0;transition:color 0.2s;}
.footer__col a:hover{color:#fff;}

/* Giant watermark area */
.footer__watermark-area{
  position:relative;
  overflow:hidden;
  padding:0;
  margin-top:20px;
}
.footer__watermark-text{
  font-family:system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-weight:900;
  font-size:clamp(100px, 15vw, 240px);
  letter-spacing:-0.04em;
  line-height:0.8;
  text-align:center;
  color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,0.25);
  text-stroke:1.5px rgba(255,255,255,0.25);
  user-select:none;
  pointer-events:none;
  padding:0;
  transform:translateY(-4%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 75%, rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 75%, rgba(0,0,0,0) 100%);
}

/* Bottom bar — on dark bg */
.footer__bottom-bar{
  position:relative;
  z-index:2;
  border-top:none;
  padding:20px 0;
}
.footer__bottom-inner{
  display:flex;align-items:center;justify-content:space-between;
}
.footer__bottom-inner span{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.06em;
  color:rgba(255,255,255,0.3);
}
.footer__legal-links{display:flex;gap:24px;}
.footer__legal-links a{
  font-family:'Geist Mono',monospace;
  font-size:10px;letter-spacing:0.06em;
  color:rgba(255,255,255,0.3);transition:color 0.2s;
}
.footer__legal-links a:hover{color:#fff;}

/* ================================================================
   FIXED BOTTOM CTA BAR
   ================================================================ */
.bottom-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:80;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.4s ease;
}
.bottom-bar.is-visible{opacity:1;pointer-events:auto;}
.bottom-bar__fade{
  display:none;
}
.bottom-bar__inner{
  position:relative;
  background:#fff;
  border-top:0.5px solid rgba(0,0,0,0.08);
  box-shadow:0 -4px 20px rgba(0,0,0,0.06);
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:16px 48px 16px 24px;
}
.bottom-bar__text{font-size:14px;font-weight:500;color:#000;}
.bottom-bar__close{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;
  font-size:16px;color:#999;line-height:1;padding:4px 6px;
  transition:color 0.15s;
}
.bottom-bar__close:hover{color:#000;}

/* ================================================================
   SCROLL REVEAL ANIMATIONS — handled by JS, these are fallbacks
   ================================================================ */
/* JS sets inline styles for reveal; no-JS fallback shows everything */
@media(scripting:none){
  [data-reveal],[data-reveal] > *{opacity:1!important;transform:none!important;}
}

/* Smooth will-change hint for animated elements */
[data-reveal]{will-change:transform,opacity;}

/* ================================================================
   TYPEWRITER — sequential reveal for mock inner elements
   ================================================================ */
.mock--dark[data-typewriter] .dm-log-row,
.mock--dark[data-typewriter] .dm-row,
.mock--dark[data-typewriter] .dm-bar-row{
  opacity:0;
  transform:translateX(-10px);
  transition:opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
.mock--dark[data-typewriter] .dm-log-row.is-typed,
.mock--dark[data-typewriter] .dm-row.is-typed,
.mock--dark[data-typewriter] .dm-bar-row.is-typed{
  opacity:1;
  transform:translateX(0);
}

/* Metric cards pop in with bounce */
.mock--dark[data-typewriter] .dm-metric{
  opacity:0;
  transform:translateY(12px) scale(0.9);
  transition:opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}
.mock--dark[data-typewriter] .dm-metric.is-typed{
  opacity:1;
  transform:translateY(0) scale(1);
}

/* Dep graph nodes cascade left to right */
.mock--dark[data-typewriter] .dep-col{
  opacity:0;
  transform:translateX(-16px);
  transition:opacity 0.5s ease, transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.mock--dark[data-typewriter] .dep-arrow{
  opacity:0;
  transition:opacity 0.3s ease;
}
.mock--dark[data-typewriter] .dep-col.is-typed,
.mock--dark[data-typewriter] .dep-arrow.is-typed{
  opacity:1;
  transform:translateX(0);
}

/* ================================================================
   CSS KEYFRAME ANIMATIONS — Hero entrance (runs immediately)
   ================================================================ */
@keyframes heroFadeUp{
  from{opacity:0;transform:translateY(40px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroScaleUp{
  from{opacity:0;transform:scale(0.92) translateY(30px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}
.hero__content{
  animation:heroFadeUp 0.9s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
.hero__visual{
  animation:heroScaleUp 1.1s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}

/* Smooth entrance for sticky tabs */
@keyframes slideDown{
  from{opacity:0;transform:translateY(-10px);}
  to{opacity:1;transform:translateY(0);}
}
.sticky-tabs{animation:slideDown 0.5s ease 0.6s both;}

/* ================================================================
   EXTRA MICRO-INTERACTIONS
   ================================================================ */
/* Links with underline animation */
.footer__col a{position:relative;}
.footer__col a::after{
  content:'';position:absolute;bottom:0;left:0;right:100%;
  height:1px;background:rgba(255,255,255,0.4);
  transition:right 0.25s ease;
}
.footer__col a:hover::after{right:0;}
.footer__col a:hover{text-decoration:none;}

/* Tag hover */
.tag{transition:border-color 0.2s,color 0.2s;}
.tag:hover{border-color:#555;color:#555;}

/* Dev tab underline animation */
.dev-tab{position:relative;}
.dev-tab::after{
  content:'';position:absolute;bottom:-0.5px;left:0;right:100%;
  height:1.5px;background:#000;transition:right 0.2s ease;
}
.dev-tab.is-active::after{right:0;}

/* Waitlist form inputs focus glow */
.wl-form input:focus,.wl-form select:focus{box-shadow:0 0 0 3px rgba(0,0,0,0.04);}


/* ================================================================
   TESTIMONIALS
   ================================================================ */
.card--testimonial{
  background:#fff;
  padding:32px;
  border-radius:12px;
  border:0.5px solid rgba(0,0,0,0.08);
  display:flex;
  flex-direction:column;
  gap:24px;
  transition:all 0.3s ease;
}
.card--testimonial:hover{
  border-color:rgba(0,0,0,0.12);
  box-shadow:0 12px 40px rgba(0,0,0,0.06);
  transform:translateY(-2px);
}
.card__quote{
  font-size:15px;
  line-height:1.7;
  color:#444;
  font-style:italic;
  flex:1;
}
.card__quote::before{
  content:'"';
  display:block;
  font-family:'Inter',serif;
  font-size:48px;
  font-weight:900;
  font-style:normal;
  color:rgba(0,0,0,0.1);
  line-height:1;
  margin-bottom:8px;
}
.card__author{
  display:flex;
  align-items:center;
  gap:12px;
}
.card__avatar{
  width:40px;height:40px;
  border-radius:50%;
  background:linear-gradient(135deg, #555, #333);
  color:#fff;
  font-weight:700;
  font-size:15px;
  display:flex;align-items:center;justify-content:center;
}
.card__role{
  font-size:12px;
  color:#999;
}

/* ================================================================
   REFINED ENHANCEMENTS — Restrained, editorial, Valley approach
   No flashy gradients. Subtle shadows and borders only.
   ================================================================ */

/* Feature label accent dot — small detail */
.feat__label::before{
  content:'';display:inline-block;
  width:5px;height:5px;border-radius:50%;
  background:#000;margin-right:8px;vertical-align:middle;
}

/* Waitlist form card — clean elevation */
.waitlist__right{
  background:#fff;
  border:1px solid rgba(0,0,0,0.06);
  border-radius:8px;
  padding:40px;
  box-shadow:0 4px 24px rgba(0,0,0,0.04);
}

/* ================================================================
   RESPONSIVE — Valley.co breakpoints & spacing strategy
   ================================================================ */

/* Desktop (1200px and up) — no changes needed */

/* Tablet / Small Desktop (1200px down to 810px) */
@media(max-width:1200px){
  .container{padding:0 24px;}
  .nav__inner{padding:0 24px;}
  .hero__visual{padding:0 24px;}
  .card-grid--4{grid-template-columns:repeat(2,1fr);}
  .uc-grid{grid-template-columns:repeat(2,1fr);}
}

/* Tablet (810px down to 481px) */
@media(max-width:810px){
  body{padding-top:70px;}
  .container{padding:0 20px;}
  .nav{height:70px;}
  .sticky-tabs{top:70px;}

  /* ── Nav: show hamburger, hide links & actions ── */
  .nav__links{
    display:none;
    position:fixed;top:70px;left:0;right:0;bottom:0;
    background:#fff;
    flex-direction:column;
    padding:24px 20px;gap:4px;
    border-top:0.5px solid rgba(0,0,0,0.08);
    z-index:99;
    overflow-y:auto;
  }
  .nav__links.is-open{display:flex;}
  .nav__links a{font-size:15px;padding:14px 0;border-bottom:0.5px solid rgba(0,0,0,0.04);}
  .nav__links a::after{display:none;}
  .nav__actions{display:none;}
  .nav__hamburger{display:flex;}
  .nav__hamburger.is-open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
  .nav__hamburger.is-open span:nth-child(2){opacity:0;}
  .nav__hamburger.is-open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
  /* Center logo between hamburger (left) and edge (right) */
  .nav__logo{position:absolute;left:50%;transform:translateX(-50%);}

  /* Section spacing */
  .section{padding:56px 0;}

  /* ── Hero: stack CTA form + button ── */
  .hero{padding:48px 0 0;}
  .hero__content{padding:0 20px;}
  .hero__cta-row{flex-direction:column;align-items:center;gap:12px;}
  .hero__cta-row .hero__form{flex:none;width:100%;max-width:440px;}
  .hero__tour-btn{width:100%;max-width:440px;justify-content:center;}
  .hero__visual{padding:0 20px;}
  /* xplr stage sizing handled in the dedicated explainer responsive block above */

  /* Feature blocks stack */
  .feat{grid-template-columns:1fr;gap:24px;padding:40px 0;}
  .feat--reverse .feat__copy{order:1;}
  .feat--reverse .feat__media{order:2;}
  .feat__gradient{min-height:300px;padding:24px;}

  /* Cards: keep 2-col for card-grid--2, collapse 3/4 to 2 cols on tablet */
  .card-grid--3{grid-template-columns:repeat(2,1fr);}
  .card-grid--4{grid-template-columns:repeat(2,1fr);}
  .card-grid--2{grid-template-columns:repeat(2,1fr);}

  /* Use-case grid: keep 2 cols on tablet */
  .uc-grid{grid-template-columns:repeat(2,1fr);max-width:none;margin:0;}
  .uc-card__visual{height:auto;min-height:200px;}
  .uc-terminal__line{font-size:10px;}
  .uc-chat__text{font-size:10px;}
  .uc-dash__metric-val{font-size:14px;}

  /* Problem section responsive */
  .prob-bento{grid-template-columns:1fr;grid-template-rows:auto;}
  .prob-card--hero{grid-row:auto;padding:40px 28px;}
  .prob-card--hero .prob-card__num{font-size:3.6rem;}
  .prob-card--tr,.prob-card--br{padding:28px 24px;}
  .prob-bottom__text{font-size:15px;}

  /* ── HTW Product Tour: disable sticky scroll on tablet, stack panels ── */
  #product-tour{overflow:visible;padding-bottom:0;}
  .htw-pin{height:auto !important;}
  .htw-viewport{
    position:static !important;
    height:auto !important;
    overflow:visible;
    border:none;
    border-radius:0;
    background:transparent;
  }
  .htw-header{padding:40px 20px 0;flex-shrink:0;}
  .htw-content{position:static;min-height:0;}
  .htw-tabs{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid rgba(0,0,0,0.08);}
  .htw-tab{flex:none;padding:14px 16px;font-size:10px;white-space:nowrap;}
  .htw-panel{
    position:static !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
    filter:none !important;
    display:none;
    grid-template-columns:1fr;
    gap:24px;
    padding:28px 20px;
    border-bottom:1px solid rgba(0,0,0,0.06);
  }
  .htw-panel.is-active{display:grid;}
  .htw-panel:last-child{border-bottom:none;}
  .htw-panel__right .mock{max-width:100%;}

  /* Waitlist stacks */
  .waitlist{grid-template-columns:1fr;gap:40px;}
  .waitlist__right{padding:28px;}

  /* Footer */
  .footer__grid{grid-template-columns:1fr;gap:32px;}
  .footer__right{grid-template-columns:repeat(2,1fr);}
  .footer__watermark-text{font-size:clamp(70px, 12vw, 160px);}
}

/* Mobile (480px and down) */
@media(max-width:480px){
  .container{padding:0 16px;}
  body{padding-top:60px;}

  /* Nav — compact mobile nav */
  .nav{height:60px;}
  .sticky-tabs{top:60px;}
  .nav__links{
    top:60px;
    padding:24px 16px;
  }
  .nav__links a{padding:12px 0;}

  /* Hero */
  .hero{padding:32px 0 0;}
  .hero__content{padding:0 16px;}
  .hero__title{font-size:clamp(1.7rem,7vw,2.2rem);}
  .hero__desc{font-size:15px;}
  .hero__cta-row{gap:10px;}
  .hero__cta-row .hero__form{max-width:100%;}
  .hero__tour-btn{max-width:100%;}
  .hero__proof-sep{display:none;}
  .hero__proof{gap:10px;flex-direction:column;}
  .hero__form{flex-direction:column;}
  .hero__submit{padding:12px;}
  .hero__visual{padding:0 12px;}
  /* xplr sizing handled in the dedicated explainer responsive block above */
  .mock__sidebar{display:none;}
  .mock__kpi-row{grid-template-columns:repeat(2,1fr);}

  /* Sections */
  .section{padding:40px 0;}
  .sticky-tabs__tab{padding:12px 10px;font-size:10px;}
  .section__title{font-size:clamp(1.5rem,6vw,2rem);}
  .section__desc{font-size:14px;margin-bottom:36px;}

  /* Cards — all 1 column on mobile */
  .card-grid--2,.card-grid--3,.card-grid--4{grid-template-columns:1fr;}
  .card__stat{font-size:2rem;}
  .dm-metrics{grid-template-columns:1fr;}
  .dm-kpis{grid-template-columns:1fr;}

  /* Use-case grid → 1 col on mobile */
  .uc-grid{grid-template-columns:1fr;}
  .uc-card__visual{min-height:180px;}

  /* Feature blocks */
  .feat{padding:32px 0;}
  .feat__gradient{min-height:240px;padding:16px;}

  /* Dependency graph */
  .dep-graph{flex-direction:column;}
  .dep-arrow{transform:rotate(90deg);}

  /* Comparison table — shrink columns for mobile */
  .diff-grid{margin-top:1.5rem;}
  .diff-header,.diff-row,.diff-score{grid-template-columns:1fr 80px 80px;}
  .diff-row__cap{font-size:11px;padding:10px 10px;gap:5px;}
  .diff-row__cap svg{width:13px;height:13px;}
  .diff-header__cap{padding:10px 10px;font-size:8px;}
  .diff-header__col,.diff-row__val,.diff-score__val{padding:10px 6px;}
  .diff-score__cap{padding:10px 10px;font-size:11px;}
  .diff-check,.diff-cross{width:20px;height:20px;}
  .diff-score__num{font-size:1rem;}

  /* HTW Product Tour on mobile */
  .htw-panel{padding:24px 16px;gap:16px;}
  .htw-tab{padding:12px 10px;font-size:9px;}

  /* Problem section */
  .prob-card--hero{padding:32px 20px;}
  .prob-card--hero .prob-card__num{font-size:3rem;}
  .prob-card--tr,.prob-card--br{padding:24px 20px;}

  /* Footer */
  .footer__grid{grid-template-columns:1fr;gap:20px;}
  .footer__right{grid-template-columns:repeat(2,1fr);}
  .footer__bottom-inner{flex-direction:column;gap:12px;text-align:center;}
  .footer__watermark-area{margin-top:12px;}
  .footer__watermark-text{font-size:clamp(48px, 14vw, 80px);transform:translateY(18%);}

  /* Testimonials */
  .card--testimonial{padding:20px;}

  /* Trust bar */
  .trust-ticker__fade{width:40px;}
  .trust-ticker__item{padding:8px 14px;}
  .trust-ticker__item span{font-size:11px;}

  /* Waitlist */
  .waitlist__right{padding:20px;}
  .waitlist{gap:28px;}

  /* Bottom bar */
  .bottom-bar__inner{flex-direction:column;gap:10px;padding:14px 16px;}
  .bottom-bar__text{font-size:13px;text-align:center;}
}

/* ================================================================
   COOKIE CONSENT BAR
   ================================================================ */
/* ================================================================
   COOKIE CONSENT FLOATING BANNER
   ================================================================ */
.gq-cookie-banner{
  position:fixed;bottom:0;right:0;left:0;z-index:9999;display:none;pointer-events:none;
}
.gq-cookie-banner.is-visible{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  padding:20px;pointer-events:auto;
}
.gq-cookie-banner__backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.3);z-index:-1;pointer-events:auto;
}
.gq-cookie-banner.is-visible .gq-cookie-banner__backdrop{
  opacity:1;animation:fadeIn 0.3s ease-out;
}
@keyframes fadeIn{
  from{opacity:0;}to{opacity:1;}
}
.gq-cookie-banner__content{
  position:relative;background:#fff;border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.2);
  max-width:420px;width:100%;animation:slideUp 0.4s ease-out;pointer-events:auto;
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(40px);}to{opacity:1;transform:translateY(0);}
}
.gq-cookie-banner__inner{padding:24px;}
.gq-cookie-banner__inner h3{
  font-size:1.1rem;font-weight:700;margin-bottom:12px;color:#000;letter-spacing:-0.01em;
}
.gq-cookie-banner__inner p{
  font-size:0.9rem;line-height:1.5;color:#555;margin-bottom:16px;
}
.gq-cookie-banner__link{
  color:#0066cc;text-decoration:none;font-weight:500;
}
.gq-cookie-banner__link:hover{text-decoration:underline;}
.gq-cookie-banner__buttons{
  display:flex;gap:10px;align-items:center;
}
.gq-cookie-banner__buttons button{
  padding:10px 16px;font-size:0.85rem;font-weight:600;
  border-radius:4px;cursor:pointer;transition:all 0.2s ease;
  white-space:nowrap;border:none;outline:none;user-select:none;
}
.gq-btn--primary{
  background:#000;color:#fff;flex-shrink:0;user-select:none;
}
.gq-btn--primary:hover{
  background:#222;transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.gq-btn--primary:active{transform:translateY(0);}
.gq-btn--secondary{
  background:#f5f5f5;color:#000;border:1px solid #ddd;flex-shrink:0;user-select:none;
}
.gq-btn--secondary:hover{
  background:#fff;border-color:#999;transform:translateY(-1px);
}
.gq-btn--secondary:active{transform:translateY(0);}
.gq-cookie-banner__close{
  position:absolute;top:12px;right:12px;width:24px;height:24px;
  padding:0;background:none;border:none;cursor:pointer;color:#999;
  transition:color 0.2s ease;display:flex;align-items:center;justify-content:center;
}
.gq-cookie-banner__close:hover{color:#000;}

/* Tab Navigation within Banner */
.gq-cookie-banner__tabs{
  display:flex;border-bottom:1px solid #f0f0f0;padding:0;gap:0;
}
.gq-cookie-banner__tab{
  padding:12px 20px;background:none;border:none;cursor:pointer;
  font-size:0.9rem;font-weight:500;color:#999;transition:all 0.2s ease;
  position:relative;white-space:nowrap;flex:1;text-align:center;
}
.gq-cookie-banner__tab:hover{color:#555;}
.gq-cookie-banner__tab--active{color:#000;}
.gq-cookie-banner__tab--active::after{
  content:'';position:absolute;bottom:-1px;left:0;right:0;
  height:2px;background:#000;
}

/* Tab Content Switching */
.gq-cookie-banner__tab-content{
  display:none;animation:fadeIn 0.2s ease-in;
}
.gq-cookie-banner__tab-content--active{
  display:block;
}

/* About Links in Banner - Subtle and Hidden */
.gq-about-footer{
  margin-top:12px;font-size:0.85rem;color:#777;line-height:1.5;
}
.gq-about-subtle-link{
  color:#0066cc;text-decoration:none;font-weight:400;
  transition:color 0.2s ease;
}
.gq-about-subtle-link:hover{text-decoration:underline;color:#0052a3;}

@media(max-width:768px){
  .gq-cookie-banner.is-visible{padding:16px;align-items:stretch;justify-content:center;}
  .gq-cookie-banner__content{max-width:100%;width:100%;}
  .gq-cookie-banner__inner{padding:20px;}
  .gq-cookie-banner__inner h3{font-size:1rem;}
  .gq-cookie-banner__inner p{font-size:0.85rem;}
  .gq-cookie-banner__buttons{flex-wrap:wrap;gap:8px;}
  .gq-cookie-banner__buttons button{flex:1;min-width:100px;}
}
@media(max-width:480px){
  .gq-cookie-banner.is-visible{padding:12px;}
  .gq-cookie-banner__inner{padding:16px;}
  .gq-cookie-banner__inner h3{font-size:0.95rem;}
  .gq-cookie-banner__inner p{font-size:0.8rem;margin-bottom:12px;}
  .gq-cookie-banner__buttons{flex-direction:column;}
  .gq-cookie-banner__buttons button{width:100%;}
}

/* ================================================================
   SMART COOKIE SETTINGS MODAL (ElevenLabs Style)
   ================================================================ */
.gq-settings-modal{position:fixed;top:0;left:0;right:0;bottom:0;z-index:10000;display:none;align-items:center;justify-content:center;}
.gq-settings-modal.is-visible{display:flex;}
.gq-settings-modal__backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);backdrop-filter:blur(4px);}
.gq-settings-modal__content{position:relative;background:#fff;border-radius:12px;box-shadow:0 25px 50px rgba(0,0,0,0.15);width:90%;max-width:500px;max-height:80vh;overflow-y:auto;animation:modalFadeIn 0.3s ease-out;}
@keyframes modalFadeIn{from{opacity:0;transform:scale(0.95);}to{opacity:1;transform:scale(1);}}
.gq-settings-modal__header{padding:24px;border-bottom:1px solid #f0f0f0;display:flex;justify-content:flex-end;}
.gq-settings-modal__close{background:none;border:none;cursor:pointer;color:#999;transition:color 0.2s ease;width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.gq-settings-modal__close:hover{color:#000;}
.gq-settings-modal__tabs{display:flex;border-bottom:1px solid #f0f0f0;padding:0 24px;gap:0;}
.gq-settings-modal__tab{padding:16px 24px;background:none;border:none;cursor:pointer;font-size:0.95rem;font-weight:500;color:#999;transition:all 0.2s ease;position:relative;white-space:nowrap;}
.gq-settings-modal__tab:hover{color:#555;}
.gq-settings-modal__tab--active{color:#000;}
.gq-settings-modal__tab--active::after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#000;}
.gq-settings-modal__tab-content{display:none;padding:24px;animation:fadeIn 0.2s ease-in;}
.gq-settings-modal__tab-content--active{display:block;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.gq-settings-modal__tab-content h2{font-size:1.4rem;font-weight:700;margin-bottom:16px;color:#000;}
.gq-settings-modal__tab-content p{font-size:0.9rem;line-height:1.6;color:#555;margin-bottom:24px;}
.gq-cookie-categories{margin-bottom:24px;}
.gq-cookie-category{padding:16px;background:#f9f9f9;border-radius:8px;margin-bottom:12px;}
.gq-cookie-category__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.gq-cookie-category h3{font-size:0.95rem;font-weight:600;color:#000;margin:0;}
.gq-cookie-toggle{display:inline-block;padding:4px 12px;background:#e8e8e8;color:#666;border-radius:4px;font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.gq-cookie-toggle--disabled{cursor:not-allowed;}
.gq-cookie-toggle__input{display:none;}
.gq-cookie-toggle__input+.gq-cookie-toggle{position:relative;display:inline-block;width:44px;height:24px;background:#ccc;border-radius:12px;cursor:pointer;transition:background 0.2s ease;vertical-align:middle;}
.gq-cookie-toggle__input+.gq-cookie-toggle::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left 0.2s ease;}
.gq-cookie-toggle__input:checked+.gq-cookie-toggle{background:#000;}
.gq-cookie-toggle__input:checked+.gq-cookie-toggle::after{left:22px;}
.gq-cookie-category p{font-size:0.85rem;color:#666;margin:0;}
/* About links styling moved to .gq-about-footer and .gq-about-subtle-link */
.gq-settings-modal__buttons{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid #f0f0f0;}
.gq-settings-modal__buttons .gq-btn{padding:10px 20px;font-size:0.9rem;}
@media(max-width:600px){
  .gq-settings-modal__content{max-width:95%;max-height:90vh;}
  .gq-settings-modal__header{padding:16px;}
  .gq-settings-modal__tabs{padding:0 16px;}
  .gq-settings-modal__tab{padding:12px 16px;font-size:0.85rem;}
  .gq-settings-modal__tab-content{padding:16px;}
  .gq-settings-modal__tab-content h2{font-size:1.2rem;}
  .gq-settings-modal__buttons{flex-direction:column-reverse;}
  .gq-settings-modal__buttons .gq-btn{width:100%;}
}