/* Lunero V3 — COMPONENTS (case, testimonial, process, motion, footer) */

/* Case */
.case-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;}
.case{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);padding:26px;position:relative;overflow:hidden;transition:transform 200ms ease-out,border-color 200ms ease-out;}
.case:hover{transform:translateY(-4px);border-color:var(--rule-2);}
.case:active{transform:translateY(0);}
.case .tag{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);}
.case h3{margin:12px 0 8px;color:var(--paper);font-family:var(--mono);font-size:1.15rem;}
.case p{margin:0;font-size:.92rem;}
.case .link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:var(--mono);font-size:.8rem;}
.case::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:transparent;transition:background 200ms ease-out;}
.case:hover::before{background:var(--accent);}

/* Testimonial */
.quote{border-left:2px solid var(--accent);padding:4px 0 4px 22px;}
.quote blockquote{margin:0 0 8px;font-size:1.15rem;color:var(--paper);max-width:55ch;line-height:1.5;}
.quote .who{font-family:var(--mono);font-size:.78rem;color:var(--ink-2);}

/* Process */
.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.pstep{border-top:1px solid var(--rule);padding:16px 0 0;}
.pstep .n{font-family:var(--mono);color:var(--accent);font-size:.85rem;}
.pstep h3{margin:6px 0;color:var(--paper);font-family:var(--mono);font-size:1.05rem;}
.pstep p{margin:0;font-size:.92rem;}

/* State demo */
.state-note{border:1px dashed var(--rule-2);border-radius:var(--r);padding:16px 18px;margin-top:24px;font-family:var(--mono);font-size:.78rem;color:var(--ink-2);}
.load-bar{display:none;height:3px;background:var(--rule-2);position:relative;overflow:hidden;margin-bottom:10px;}
[data-state="loading"] .load-bar{display:block;}
[data-state="loading"]{border-color:var(--accent);}
.load-bar::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:var(--accent);animation:load 1.2s ease-out infinite;}
@keyframes load{0%{left:-40%}100%{left:100%}}

/* Motion — scoped & named, visible-by-default, reduced honoured */
@media (prefers-reduced-motion: no-preference){
  .hero .reveal{opacity:1;transform:none;}
  .hero:not(.is-entered) .reveal{opacity:0;transform:translateY(12px);transition:opacity 480ms ease-out,transform 480ms ease-out;transition-delay:calc(var(--i,0)*80ms);}
  .hero.is-entered .reveal{opacity:1;transform:none;}
  .press-rule{transform-origin:left;transform:none;transition:transform 800ms ease-out;}
  .press-rule:not(.is-visible){transform:scaleX(0);}
  .press-rule.is-visible{transform:scaleX(1);}
}
@media (prefers-reduced-motion: reduce){
  .hero .reveal{opacity:1 !important;transform:none !important;}
  .press-rule{transform:none !important;}
  .load-bar::after{animation:none;}
  html{scroll-behavior:auto;}
}

/* Stats band — design intelligence (real numbers, tabular) */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px;margin-top:8px;}
.stat{border-top:2px solid var(--accent);padding:16px 0 0;}
.stat .num{font-family:var(--mono);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--paper);}
.stat .lbl{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin-top:4px;}
.stat .num.accent-2{color:var(--accent-2);}

/* Footer */
.colophon{border-top:2px solid var(--rule-2);padding:56px 0 48px;}
.colophon .fine{display:grid;grid-template-columns:1fr auto;gap:8px 24px;font-family:var(--mono);font-size:.76rem;color:var(--ink-2);}

/* Responsive */
@media(max-width:720px){
  .site-head .wrap{flex-direction:column;align-items:flex-start;gap:12px;}
  .spec-line{flex-direction:column;gap:4px;}
  .colophon .fine{grid-template-columns:1fr;}
  body{font-size:15px;}
}