/* ============================================================
   OSW Hero — scaffold, heading + rotating word, mockup, badges,
   scroll hint. Values verbatim from the source .hero / .mockup /
   .float-badge / .scroll-hint. Motion gates behind html.ovs-anim.
   No position:fixed here, so no editor detach (all absolute within
   the position:relative hero).
   ============================================================ */

.ovs-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:110px 0 70px;overflow:clip}
.ovs-hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(240,228,205,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(240,228,205,.033) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%,#000 30%,transparent 75%)}
.ovs-hero-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ovs-hero-fog{position:absolute;inset:0;background:radial-gradient(ellipse 60% 55% at 74% 42%,rgba(196,131,90,.13),transparent 65%),radial-gradient(ellipse 45% 45% at 20% 75%,rgba(227,201,143,.06),transparent 70%)}
.ovs-hero-spot{position:absolute;inset:0;background:radial-gradient(circle 340px at var(--mx,70%) var(--my,40%),rgba(227,201,143,.07),transparent 70%);pointer-events:none}
.ovs-hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:3.2rem;align-items:center}
/* Grid items default to min-width:auto, so the mockup's intrinsic width can
   force its track wider than the column and get clipped by the hero's
   overflow:clip. min-width:0 lets the columns shrink to fit. No source rule —
   containment fix; invisible on desktop where the columns exceed their content. */
.ovs-hero-left,.ovs-hero-right{min-width:0}

.ovs-hero-kicker{font-family:var(--ovs-mono);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--ovs-copper);margin-bottom:1.25rem;display:flex;align-items:center;gap:.7rem}
.ovs-hero-kicker::before{content:"";width:26px;height:1px;background:var(--ovs-copper)}

.ovs-hero-h1{font-family:var(--ovs-display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,5.4vw,4.5rem);line-height:1.04;letter-spacing:.012em}
.ovs-hline{display:block;overflow:hidden}
.ovs-hline > span{display:inline-block}
html.ovs-anim .ovs-hero .ovs-hline > span{transform:translateY(110%);animation:ovs-hUp .8s cubic-bezier(.2,.8,.2,1) forwards}
html.ovs-anim .ovs-hero .ovs-hline:nth-child(2) > span{animation-delay:.12s}
@keyframes ovs-hUp{to{transform:translateY(0)}}
.ovs-rotwrap{display:inline-block;overflow:hidden;vertical-align:bottom}
.ovs-rot{display:inline-block;color:var(--ovs-champ);background:linear-gradient(90deg,var(--ovs-champ),var(--ovs-copper),var(--ovs-champ));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ovs-shimmer 5s linear infinite}
@keyframes ovs-shimmer{to{background-position:200% 0}}
@keyframes ovs-rotIn{from{transform:translateY(80%);opacity:0}to{transform:translateY(0);opacity:1}}
.ovs-gold-dot{color:var(--ovs-copper);-webkit-text-fill-color:var(--ovs-copper)}

.ovs-hero-sub{margin-top:1.35rem;font-size:1.06rem;line-height:1.65;color:var(--ovs-muted);max-width:52ch}
.ovs-hero-sub b{color:var(--ovs-text);font-weight:600}

/* Hero right: mockup stage */
.ovs-hero-right{position:relative}
.ovs-stage{position:relative;perspective:1100px;max-width:100%}
.ovs-mockup{position:relative;max-width:100%;background:linear-gradient(160deg,#141009,#0B0906);border:1px solid var(--ovs-line);border-radius:18px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(227,201,143,.05) inset;transform-style:preserve-3d;will-change:transform}
.ovs-mockup .ovs-glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(227,201,143,.14),transparent 62%);opacity:0;transition:opacity .3s;pointer-events:none;z-index:5}
.ovs-mockup:hover .ovs-glare{opacity:1}
.ovs-mockup-bar{display:flex;align-items:center;gap:.5rem;padding:.7rem .9rem;border-bottom:1px solid var(--ovs-line);background:rgba(255,250,240,.02)}
.ovs-md{width:9px;height:9px;border-radius:50%}
.ovs-md-r{background:#E8695B}.ovs-md-y{background:var(--ovs-champ)}.ovs-md-g{background:var(--ovs-pine)}
.ovs-mockup-url{margin-left:.6rem;flex:1;display:flex;align-items:center;gap:.45rem;background:rgba(6,5,4,.6);border:1px solid var(--ovs-line);border-radius:8px;padding:.32rem .7rem;font-family:var(--ovs-mono);font-size:.68rem;color:var(--ovs-muted)}
.ovs-mockup-url svg{width:11px;height:11px;color:var(--ovs-pine)}
.ovs-mockup-body{padding:1.5rem 1.4rem 1.6rem}
.ovs-mk-chip{display:inline-block;font-family:var(--ovs-mono);font-size:.56rem;letter-spacing:.28em;color:var(--ovs-champ);border:1px solid var(--ovs-champ-border);border-radius:99px;padding:.3rem .75rem;margin-bottom:1rem}
.ovs-mk-h1{height:16px;border-radius:6px;background:linear-gradient(90deg,rgba(242,237,227,.9),rgba(242,237,227,.5));width:82%;margin-bottom:.6rem}
.ovs-mk-h1.ovs-short{width:55%;background:linear-gradient(90deg,rgba(227,201,143,.85),rgba(196,131,90,.55))}
.ovs-mk-row{display:flex;gap:.6rem;margin-top:1.05rem}
.ovs-mk-btn{width:104px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--ovs-champ),#D6B575)}
.ovs-mk-ghost{width:104px;height:30px;border-radius:8px;border:1px solid var(--ovs-line)}
.ovs-mk-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;margin-top:1.5rem}
.ovs-mk-cards span{height:64px;border-radius:11px;background:var(--ovs-panel);border:1px solid var(--ovs-line);position:relative;overflow:hidden}
.ovs-mk-cards span::after{content:"";position:absolute;left:.55rem;right:1.4rem;top:.6rem;height:7px;border-radius:4px;background:rgba(227,201,143,.35)}
.ovs-mk-cards span::before{content:"";position:absolute;left:.55rem;right:.8rem;bottom:.6rem;height:5px;border-radius:4px;background:rgba(242,237,227,.14)}

.ovs-float-badge{position:absolute;display:flex;align-items:center;gap:.65rem;background:rgba(10,8,6,.9);border:1px solid var(--ovs-line);border-radius:14px;padding:.65rem .9rem;box-shadow:0 16px 40px rgba(0,0,0,.5);backdrop-filter:blur(8px)}
html.ovs-anim .ovs-hero .ovs-float-badge{animation:ovs-floaty 5.2s ease-in-out infinite}
.ovs-float-badge strong{display:block;font-size:.8rem}
.ovs-float-badge em{display:block;font-style:normal;font-size:.66rem;color:var(--ovs-muted)}
.ovs-fb-icon{width:30px;height:30px;border-radius:9px;background:var(--ovs-champ-dim);border:1px solid var(--ovs-champ-border);display:flex;align-items:center;justify-content:center;color:var(--ovs-champ)}
.ovs-fb-icon svg{width:15px;height:15px}
.ovs-fb-ring{width:34px;height:34px;border-radius:50%;border:2px solid var(--ovs-pine);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.72rem;color:var(--ovs-pine)}
.ovs-b-audit{top:-16px;right:6%}
.ovs-b-speed{bottom:14%;left:-14px;animation-delay:1.2s !important}
.ovs-b-plugin{bottom:-18px;right:10%;animation-delay:2.2s !important}
@keyframes ovs-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}

.ovs-scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem;font-family:var(--ovs-mono);font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ovs-muted)}
.ovs-scroll-hint i{width:1px;height:34px;background:linear-gradient(var(--ovs-champ),transparent)}
html.ovs-anim .ovs-hero .ovs-scroll-hint i{animation:ovs-hint 1.8s ease-in-out infinite}
@keyframes ovs-hint{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ── Responsive — source breakpoints verbatim ── */
@media(max-width:1080px){
  .ovs-hero-inner{grid-template-columns:1fr;gap:3.5rem}
  .ovs-hero-right{max-width:560px}
}
@media(max-width:560px){
  .ovs-hero .ovs-float-badge{display:none}
}