/* ============================================================
   Optivro Site Widgets — core.css
   Design tokens, scoped resets, shared buttons + reveal engine.
   Every widget root carries `class="ovs-scope ovs-<widget>"`.
   Nothing here leaks: no bare *, html or body rules.
   ============================================================ */

/* ── Design tokens (verbatim from source :root) ── */
.ovs-scope{
  --ovs-bg:#060504;
  --ovs-bg2:#0A0806;
  --ovs-bg3:#0F0C09;
  --ovs-panel:rgba(255,250,240,0.03);
  --ovs-line:rgba(240,228,205,0.10);
  --ovs-text:#F2EDE3;
  --ovs-muted:#A79D8C;
  --ovs-white:#fff;
  --ovs-champ:#E3C98F;
  --ovs-champ-dim:rgba(227,201,143,0.11);
  --ovs-champ-border:rgba(227,201,143,0.32);
  --ovs-copper:#C4835A;
  --ovs-copper-dim:rgba(196,131,90,0.12);
  --ovs-pine:#6FA98C;
  --ovs-danger:#E8695B;
  --ovs-danger-dim:rgba(232,105,91,0.10);
  --ovs-danger-border:rgba(232,105,91,0.26);
  --ovs-max:1240px;
  --ovs-r:20px;
  --ovs-display:'Anton',Impact,sans-serif;
  --ovs-body:'Archivo',sans-serif;
  --ovs-mono:'Space Mono',monospace;
}

/* ── Scoped resets — undo common theme pollution, contained to our roots ── */
.ovs-scope{font-family:var(--ovs-body);color:var(--ovs-text);box-sizing:border-box;-webkit-font-smoothing:antialiased}
.ovs-scope *,.ovs-scope *::before,.ovs-scope *::after{box-sizing:border-box}
.ovs-scope :where(h1,h2,h3,h4,h5,h6,p,ul,ol,figure,blockquote){margin:0;padding:0}
.ovs-scope :where(h1,h2,h3,h4,h5,h6){color:inherit;font-weight:400;line-height:1.02}
.ovs-scope :where(ul,ol){list-style:none}
.ovs-scope a{color:inherit;text-decoration:none}
.ovs-scope img{max-width:100%}
.ovs-scope ::selection{background:rgba(227,201,143,0.35);color:#fff}

/* ── Shared layout ── */
.ovs-wrap{width:min(calc(100% - 44px),var(--ovs-max));margin:0 auto}

/* Display type helper */
.ovs-dh{font-family:var(--ovs-display);font-weight:400;text-transform:uppercase;letter-spacing:.015em;line-height:1.02}

/* Eyebrow (shared across sections) */
.ovs-eye{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--ovs-mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ovs-champ);margin-bottom:1.1rem}
.ovs-eye::before{content:"";width:22px;height:1px;background:var(--ovs-champ)}
.ovs-eye.ovs-danger{color:var(--ovs-danger)}
.ovs-eye.ovs-danger::before{background:var(--ovs-danger)}
.ovs-eye.ovs-copper{color:var(--ovs-copper)}
.ovs-eye.ovs-copper::before{background:var(--ovs-copper)}

/* Section scaffold — shared heading/lead used across most sections */
.ovs-section-h{font-family:var(--ovs-display);font-weight:400;text-transform:uppercase;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.06;letter-spacing:.015em;margin-bottom:1.4rem}
.ovs-section-h .ovs-hl{color:var(--ovs-champ)}
.ovs-lead{color:var(--ovs-muted);font-size:1rem;line-height:1.65}
/* Default section padding. :where() keeps this at .ovs-scope's specificity
   (0,1,0) so a widget's own section rule (e.g. .ovs-hero{padding:...}) always
   wins the cascade regardless of load order — a plain compound selector like
   `section.ovs-scope` would outrank a single class and silently win instead. */
.ovs-scope:where(section){padding:7rem 0;position:relative}
@media(max-width:880px){
  .ovs-scope:where(section){padding:5rem 0}
}

/* Glass card (shared) */
.ovs-gb{background:var(--ovs-panel);border:1px solid var(--ovs-line);border-radius:var(--ovs-r);transition:border-color .3s,background .3s}
.ovs-gb:hover{border-color:rgba(227,201,143,.24)}

/* Icon chip (shared) — the source defines this once, danger-coloured by
   default, and only overrides the colour where a section needs a different
   palette (e.g. Niches → champagne). Widgets that want the default danger
   look (Problem) declare nothing extra; others override colour only. */
.ovs-chip{width:44px;height:44px;border-radius:12px;background:var(--ovs-danger-dim);border:1px solid var(--ovs-danger-border);display:flex;align-items:center;justify-content:center;color:var(--ovs-danger);margin-bottom:1.1rem}
.ovs-chip svg{width:20px;height:20px;stroke-width:1.8}

/* ── Shared buttons (verbatim from source .btn family) ── */
.ovs-btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:12px;font-weight:700;font-size:.92rem;letter-spacing:.01em;padding:.85rem 1.5rem;cursor:pointer;border:1px solid transparent;transition:transform .25s,box-shadow .25s,background .25s,border-color .25s;position:relative;overflow:hidden;font-family:var(--ovs-body)}
.ovs-btn svg{width:17px;height:17px;flex:none}
.ovs-btn-primary{background:linear-gradient(135deg,var(--ovs-champ),#D6B575);color:#221A0D;box-shadow:0 8px 30px rgba(227,201,143,.22)}
.ovs-btn-primary:hover{box-shadow:0 12px 40px rgba(227,201,143,.36)}
.ovs-btn-ghost{border-color:var(--ovs-line);color:var(--ovs-text);background:rgba(255,250,240,.02)}
.ovs-btn-ghost:hover{border-color:var(--ovs-champ-border);color:var(--ovs-champ)}
.ovs-btn-lg{padding:1.02rem 1.8rem;font-size:.98rem;border-radius:14px}
.ovs-btn-shine::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-120%);transition:transform .7s}
.ovs-btn-shine:hover::after{transform:translateX(120%)}

/* ── Reveal engine — gated behind html.ovs-anim so content is never hidden
      in the editor or when JS is disabled/failed ── */
html.ovs-anim .ovs-reveal{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
html.ovs-anim .ovs-reveal.ovs-in{opacity:1;transform:none}

/* Visible keyboard focus */
.ovs-scope a:focus-visible,.ovs-scope button:focus-visible,.ovs-scope input:focus-visible,.ovs-scope textarea:focus-visible,.ovs-scope [tabindex]:focus-visible{outline:2px solid var(--ovs-champ);outline-offset:3px;border-radius:6px}

/* ── Reduced motion — scoped to our roots (source used a bare * block) ── */
@media(prefers-reduced-motion:reduce){
  html.ovs-anim .ovs-reveal{opacity:1;transform:none}
  .ovs-scope *,.ovs-scope *::before,.ovs-scope *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}