/* DRP[OS] · align.css v4 — one design language + one scaling law, every page */

/* index typography everywhere */
h1,.h1,h2,.h2,h3,.h3,h4,.h4{font-family:'Plus Jakarta Sans',sans-serif !important;font-weight:800;letter-spacing:-.02em}
h1 em,.h1 em,h2 em,.h2 em,h3 em,.h3 em{font-style:normal;background:var(--gradient-vivid);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.h1,h1{font-size:clamp(2.5rem,6.2vw,4.8rem) !important;line-height:1.04}
.h2,h2{font-size:clamp(1.9rem,4.3vw,3.4rem) !important;line-height:1.08}
.lead{font-size:clamp(.92rem,1.05vw,1.02rem) !important;line-height:1.85}
.wordmark{font-family:'Plus Jakarta Sans',sans-serif !important;font-weight:500 !important;letter-spacing:.01em}
.eyebrow,.mono{font-family:'IBM Plex Mono',monospace !important}
img,svg,video{max-width:100%;height:auto}
::selection{background:var(--accent);color:#fff}

/* nav: blur on scroll + index language, desktop & mobile */
.nav{transition:padding .4s var(--ease-out),background .4s,box-shadow .4s,backdrop-filter .4s}
.nav.scrolled{background:rgba(250,247,242,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--ink-10)}
.nav-links a{font-family:'IBM Plex Mono',monospace !important;font-size:.62rem !important;
  letter-spacing:.24em;text-transform:uppercase;font-weight:400}
.nav-links a.active{color:var(--accent);position:relative}
.nav-links a.active::after{content:'';position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--accent)}
.nav-cta .btn-secondary{background:none !important;border:none !important;box-shadow:none !important;
  font-family:'IBM Plex Mono',monospace !important;font-size:.62rem !important;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink) !important;padding:8px 10px !important}
.nav-cta .btn-ink{background:var(--ink) !important;color:#fff !important;border-radius:999px !important;
  font-family:'IBM Plex Mono',monospace !important;font-size:.62rem !important;letter-spacing:.24em;
  text-transform:uppercase;padding:12px 22px !important}
@media (max-width:900px){
  .nav-links a{font-family:'Plus Jakarta Sans',sans-serif !important;font-size:clamp(1.4rem,6vw,2rem) !important;
    letter-spacing:-.01em;text-transform:none;font-weight:500}
  .nav-links a.active::after{display:none}
}

/* micro-interactions */
.btn{transition:transform .3s var(--ease-out),box-shadow .3s,background .3s,filter .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.97)}

/* mobile grid collapse */
@media (max-width:960px){
  .oja-hero-grid,.vs-grid,.act-grid,.flow,.safe-grid,.oja-reach{grid-template-columns:1fr !important}
  .oja-reach-arrow{transform:rotate(90deg)}
}

/* ============================================================
   THE SCALING LAW — below 1600px, drp.css governs untouched.
   Above it, the page is pinned to its designed width and the
   whole composition scales with the glass (viewport / 1480):
   same design on a laptop, a monitor, or a 200-inch wall.
   ============================================================ */
@media (min-width:1600px){
  .container{max-width:1300px !important;padding:0 40px !important}
  body{zoom:1.08}
}
@media (min-width:1760px){body{zoom:1.19}}
@media (min-width:1920px){body{zoom:1.3}}
@media (min-width:2100px){body{zoom:1.42}}
@media (min-width:2300px){body{zoom:1.56}}
@media (min-width:2560px){body{zoom:1.73}}
@media (min-width:2900px){body{zoom:1.96}}
@media (min-width:3300px){body{zoom:2.23}}
@media (min-width:3840px){body{zoom:2.6}}