/* ============================================================
   CodebyCarter — polish2.css
   Polish pass: tighten rhythm, soften noise, refine details.
   ============================================================ */

/* ---------- Lighter grain on dark stages (was .035, now .022) ---------- */
.stage-slate,.stage-midnight,.stage-neon,.stage-chaos,.stage-signature{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .022 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Tighten rhythm between consecutive same-stage sections ---------- */
.stage-cream + .stage-cream,
.stage-midnight + .stage-midnight,
.stage-neon + .stage-neon{
  padding-top:clamp(60px,7vw,100px);
}

/* Tighter top padding when preceded by trust strip / flow bridge */
.trust + section,
.flow-bridge + section{padding-top:clamp(70px,8vw,110px)}

/* Smooth color transition between stages */
section{transition:background-color 1.2s cubic-bezier(.16,1,.3,1)}

/* ---------- Eyebrow personality colors — softened ---------- */
#demos .eyebrow{
  background:rgba(132,204,22,.06);
  border-color:rgba(132,204,22,.22);
}
#roi .eyebrow{
  background:rgba(132,204,22,.06);
  border-color:rgba(132,204,22,.22);
}
#faq .eyebrow{
  background:rgba(6,182,212,.06);
  border-color:rgba(6,182,212,.22);
}

/* ---------- About avatar: gentle idle float ---------- */
.about-avatar{
  animation:hue 6s linear infinite, aboutFloat 5s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes aboutFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

/* ---------- Portfolio card: subtle preview brightening on hover ---------- */
.portfolio-card .portfolio-preview{transition:filter .35s ease}
.portfolio-card:hover .portfolio-preview{filter:brightness(1.06) saturate(1.05)}

/* ---------- Testimonial card: more presence on hover ---------- */
.testimonial:hover{box-shadow:0 14px 36px rgba(168,85,247,.10)}

/* ---------- Better focus on accordion summaries ---------- */
.faq-item summary:focus-visible{outline:2px solid #EC4899;outline-offset:4px;border-radius:12px}

/* ---------- Sticky CTA: clean mobile positioning ---------- */
@media (max-width:520px){
  .sticky-cta{
    left:50%;right:auto;bottom:14px;
    transform:translate(-50%,60px) scale(.92);
    padding:11px 18px;font-size:12.5px;
  }
  .sticky-cta.show{transform:translate(-50%,0) scale(1)}
  .sticky-cta.hidden{transform:translate(-50%,60px) scale(.92)}
}

/* ---------- Comparison table: mobile improvements ---------- */
@media (max-width:820px){
  .compare-wrap{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1);border-radius:0;border-left:0;border-right:0}
  .compare-cell{font-size:12.5px;padding:14px 14px}
  .compare-row{grid-template-columns:1.5fr 1.1fr .9fr .9fr 1fr}
  .compare-cell-feature{font-weight:600}
}
@media (max-width:560px){
  .compare-cell{font-size:11.5px;padding:12px 10px}
  .compare-row{grid-template-columns:1.4fr 1fr .85fr .85fr .95fr}
}

/* ---------- Mobile typography refinement ---------- */
@media (max-width:640px){
  section{padding:60px 0}
  .section-title{font-size:clamp(28px,9vw,46px);line-height:1.05}
  .hero-h1{font-size:clamp(40px,13vw,90px)}
  .footer-shout{font-size:clamp(40px,11vw,80px)}
  .about-avatar{width:120px;height:120px;font-size:60px}
  .about-h{font-size:clamp(28px,7vw,40px)}
  .about-stats{gap:20px}
}

/* ---------- Lab extras: a touch tighter ---------- */
.lab-extras{padding:18px 22px}

/* ---------- Hero stats: cleaner alignment ---------- */
.hero-stats{align-items:flex-start}

/* ---------- Make the brand mark line up vertically ---------- */
.brand .mark{display:inline-flex;align-items:center;justify-content:center}

/* ---------- Smoother scroll cue (reduces visual buzz at hero bottom) ---------- */
.scroll-cue{opacity:.75}

/* ---------- Better mobile nav drawer ---------- */
@media (max-width:820px){
  .nav-links{box-shadow:0 20px 50px rgba(0,0,0,.30)}
  .nav-links a{font-size:15px}
}

/* ---------- Service/Tier/Step cards: shared subtle rise on view ---------- */
.svc,.tier,.step,.testimonial,.portfolio-card,.faq-item,.demo-card{
  transition:transform .45s cubic-bezier(.16,1,.3,1),
             border-color .35s ease,
             box-shadow .4s ease,
             background-color .35s ease;
}

/* ---------- Style Lab pills: cleaner active state ---------- */
.lab-btn.is-active{outline:1px solid rgba(255,255,255,.06);outline-offset:-1px}

/* ---------- Eyebrows: enforce consistent height across personalities ---------- */
.eyebrow{min-height:30px;display:inline-flex}

/* ---------- Footer signature: subtler ---------- */
.footer-bottom{opacity:.85}

/* ---------- Better cursor positioning on form inputs ---------- */
.field input,.field textarea,.field select{cursor:text !important}
.budget-pills label{cursor:none !important}

/* ---------- Pricing tier: cleaner featured badge alignment ---------- */
.tier.is-featured::before{top:-13px}

/* ---------- Marquee: pause on hover affordance ---------- */
.marquee{cursor:none}
.marquee-track{transition:animation-play-state .2s}

/* ---------- Doodle canvas: cursor crosshair in there ---------- */
.doodle{cursor:crosshair !important}

/* ---------- Generally: subtler card shadows in light stages ---------- */
.stage-cream .svc:hover,
.stage-cream .testimonial:hover,
.stage-cream .portfolio-card:hover{box-shadow:0 14px 36px rgba(10,10,15,.06)}

/* ---------- Subtle outer glow on stage-chaos form so it pops ---------- */
.stage-chaos .form{box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(168,85,247,.25), 0 0 120px rgba(168,85,247,.10)}

/* ---------- Tighten ROI calculator on mobile ---------- */
@media (max-width:900px){
  .roi-shell{gap:20px}
  .roi-controls,.roi-result{padding:24px}
  .roi-result-number{font-size:clamp(48px,12vw,80px)}
}