/* NOREVYO FUTURISTIC ELEVATION
   Typography + ambient background system.
   Preserves all existing wording and layout; visual layer only.
*/
@import url('https://cdn.jsdelivr.net/npm/@fontsource/orbitron@5.2.5/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/orbitron@5.2.5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/orbitron@5.2.5/700.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5.2.5/400.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5.2.5/500.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5.2.5/600.css');
@import url('https://cdn.jsdelivr.net/npm/@fontsource/space-grotesk@5.2.5/700.css');

:root{
  --norevyo-display:'Orbitron',ui-monospace,SFMono-Regular,Menlo,monospace;
  --norevyo-body:'Space Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

/* Futuristic type system: technical/display voice + highly readable UI voice. */
body,
button,input,textarea,select{
  font-family:var(--norevyo-body)!important;
  font-synthesis:none;
}
h1,h2,h3{
  font-family:var(--norevyo-display)!important;
  font-kerning:normal;
  font-feature-settings:"kern","liga","clig","calt";
}

/* Shared micro-UI uses the futuristic display face without changing its copy. */
.site-header .nav,
.site-header .plain,
.site-header .cta,
.site-header .menu,
.eyebrow,
.kicker,
.marquee-item,
.engine-head,
.node small,
.flow-card span,
.price-name,
.plan h3,
footer nav{
  font-family:var(--norevyo-display)!important;
}

/* Editorial scale mirrored from the reference deployment.
   Orbitron reads larger than the previous SF Pro headings, so the pixel
   sizes stay close to the reference while the face becomes more futuristic. */
.hero h1{font-size:clamp(40px,4.1vw,62px)!important;line-height:.95!important;letter-spacing:-.018em!important}
.hero p{font-size:13px!important;line-height:1.5!important}
.title{font-size:clamp(32px,3.3vw,50px)!important;line-height:1!important;letter-spacing:-.012em!important}
.lede{font-size:12px!important;line-height:1.55!important}
.head h2{font-family:var(--norevyo-display)!important;font-size:clamp(34px,3.7vw,54px)!important;line-height:1!important;letter-spacing:-.012em!important}
.section p{font-family:var(--norevyo-body)!important}
.cta-section h2{font-size:clamp(36px,4vw,58px)!important;line-height:1!important;letter-spacing:-.012em!important}
.decision-title{font-family:var(--norevyo-display)!important;font-size:36px!important;line-height:1!important;letter-spacing:-.01em!important}
.language-copy h3{font-family:var(--norevyo-display)!important;font-size:29px!important;line-height:1!important;letter-spacing:-.01em!important}
.about-lead h2{font-family:var(--norevyo-display)!important;font-size:clamp(42px,4.5vw,68px)!important;line-height:.98!important;letter-spacing:-.012em!important}
.about-intro{font-family:var(--norevyo-body)!important;font-size:23px!important;line-height:1.3!important}
.story-title h2{font-family:var(--norevyo-display)!important;font-size:clamp(40px,4.25vw,62px)!important;line-height:1!important;letter-spacing:-.012em!important}
.panel h3,.persona h3{font-family:var(--norevyo-display)!important;line-height:1.04!important}
.card h3,.flow-card strong,.plan h3{font-family:var(--norevyo-display)!important}
.page-engine .core-k,
.page-engine .core-title,
.page-engine .core-status,
.page-engine .core-data{
  font-family:var(--norevyo-display)!important;
}
.page-engine .core-title{
  font-size:20px!important;
  letter-spacing:.025em!important;
}
.page-engine .core-sub{font-family:var(--norevyo-body)!important}

.site-header .brand,
.topbar .brand,
.top .brand{font-family:var(--norevyo-display)!important;font-weight:700!important;letter-spacing:.04em!important}
footer strong{font-family:var(--norevyo-display)!important;font-weight:700!important;letter-spacing:.02em!important}

/* Ambient future-field: translucent, slow, and deliberately behind all copy. */
body{position:relative;overflow-x:clip;isolation:isolate}
body:before,
body:after{
  content:"";
  position:fixed;
  inset:-10%;
  pointer-events:none;
  z-index:-2;
}
body:before{
  background:
    radial-gradient(circle at 16% 22%,rgba(101,114,255,.085),transparent 24%),
    radial-gradient(circle at 82% 28%,rgba(70,217,225,.060),transparent 20%),
    radial-gradient(circle at 50% 80%,rgba(158,107,255,.050),transparent 25%);
  filter:blur(5px);
  opacity:.76;
  transform:translate3d(0,0,0) scale(1.04);
  animation:none;
}
body:after{
  background:
    linear-gradient(rgba(101,114,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,217,225,.018) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 42%,#000 0 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000 0 30%,transparent 78%);
  opacity:.28;
  z-index:-1;
  animation:none;
}

@keyframes norevyoAurora{
  0%{transform:translate3d(-1.5%,0,0) scale(1.04) rotate(0deg)}
  50%{transform:translate3d(1%,1.2%,0) scale(1.065) rotate(.3deg)}
  100%{transform:translate3d(-.6%,-1%,0) scale(1.045) rotate(-.2deg)}
}
@keyframes norevyoField{
  0%{background-position:0 0,0 0}
  50%{background-position:28px -16px,-18px 22px}
  100%{background-position:56px -34px,-36px 44px}
}

@media(max-width:1000px){
  .hero h1{font-size:clamp(40px,6.5vw,58px)!important}
  .title{font-size:42px!important}
  .cta-section h2{font-size:clamp(36px,5vw,56px)!important}
}
@media(max-width:650px){
  .hero h1{font-size:clamp(38px,10.5vw,52px)!important}
  .hero p{font-size:12px!important}
  .title{font-size:34px!important}
  .head h2{font-size:34px!important}
  .decision-title{font-size:29px!important}
  .result-number{font-size:50px!important}
  .language-copy h3{font-size:29px!important}
  .cta-section h2{font-size:37px!important}
}
@media(prefers-reduced-motion:reduce){
  body:before,body:after{animation:none!important}
}
/* ============================================================
   REFERENCE SCALE LOCK · 2026-09-28
   The older nzjajw2a3 deployment is the visual scale reference.
   Keep Orbitron, but deliberately reduce its optical footprint.
   ============================================================ */
.hero h1{font-size:clamp(36px,3.45vw,54px)!important;line-height:1.02!important;letter-spacing:.008em!important}
.title{font-size:clamp(30px,2.9vw,44px)!important;line-height:1.04!important;letter-spacing:.006em!important}
.head h2{font-size:clamp(32px,3.25vw,48px)!important;line-height:1.04!important;letter-spacing:.006em!important}
.cta-section h2{font-size:clamp(34px,3.55vw,50px)!important;line-height:1.04!important;letter-spacing:.006em!important}
.about-lead h2{font-size:clamp(38px,3.8vw,58px)!important;line-height:1.02!important}
.story-title h2{font-size:clamp(36px,3.55vw,54px)!important;line-height:1.03!important}
.about-intro{font-size:18px!important;line-height:1.4!important}
.decision-title{font-size:32px!important}
.language-copy h3{font-size:27px!important}
.result-number{font-size:58px!important}
@media(max-width:1000px){
  .hero h1{font-size:clamp(36px,5.5vw,50px)!important}
  .title{font-size:39px!important}
  .head h2{font-size:38px!important}
  .cta-section h2{font-size:43px!important}
}
@media(max-width:650px){
  .hero h1{font-size:clamp(34px,9.5vw,46px)!important}
  .title{font-size:32px!important}
  .head h2{font-size:32px!important}
  .cta-section h2{font-size:35px!important}
  .about-lead h2{font-size:38px!important}
  .about-intro{font-size:16px!important}
}