/* Oros Optika – premium visual layer (OROS style elements on the white site). Content unchanged; brand blue as accent.
   Loaded after home.css / october-*.css / lens-video.css / enhancements.css and before chat.css. */
@font-face{font-family:Geist;src:url(/assets/fonts/geist-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(/assets/fonts/geist-sans-latin-600-normal.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-latin-500-normal.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist Mono";src:url(/assets/fonts/geist-mono-latin-ext-500-normal.woff2) format("woff2");font-weight:400 600;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Serif";src:url(/assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF}

:root{--acc-2:#3fa9e5;--grad:linear-gradient(100deg,#075caa 10%,#2f8fd8 60%,#3f6fe0);
  --sans:Geist,Inter,system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--serif:"Instrument Serif",Georgia,serif}

body{font-family:var(--sans)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
h1,h2,h3{font-family:var(--sans);font-weight:600;letter-spacing:-.045em}
h2{line-height:.98;font-size:clamp(2.3rem,5.2vw,4.4rem)}
h3{letter-spacing:-.025em}
.eyebrow,.step .n,.about-person span{font-family:var(--mono);font-weight:500;letter-spacing:.16em}

/* floating glass pill navigation */
.site-header{position:fixed;top:14px;left:50%;transform:translateX(-50%);width:min(1120px,calc(100% - 24px));border:1px solid rgba(12,18,21,.08);border-radius:999px;
  background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);box-shadow:0 10px 40px -12px rgba(1,35,62,.18)}
.site-header .nav{width:auto;height:60px;padding:0 8px 0 20px;gap:20px}
.brand img{width:104px}
.nav-links{gap:4px}.nav-links a{padding:8px 12px;border-radius:999px;font-size:.9rem;color:#3d4a54}.nav-links a:hover{background:rgba(10,99,180,.07)}
.site-header .nav>.button{min-height:44px;padding:0 20px;font-size:.92rem}

/* hero: serif italic highlight with brand gradient, light behind the photo */
.hero{padding-top:calc(88px + clamp(40px,5vw,72px))}
.hero h1{line-height:.95;letter-spacing:-.05em}
.hero h1 span.em,.hero h1 .em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em;color:#0a63b4;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding-right:.08em}
.hero h1 .em .w,.hero h1 .em .wi{background:inherit;-webkit-background-clip:text;background-clip:text}
.hero-img{position:relative;box-shadow:0 -24px 90px -30px rgba(10,99,180,.35)}
@supports (animation-timeline:view()){
  html.motion .hero-img img{animation:hero-zoom linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  @keyframes hero-zoom{to{transform:scale(1.1)}}
}

/* marquee: big type, filled and outlined in turn */
.marquee-track{padding:24px 0}
.marquee-track li{font-size:clamp(1.5rem,3vw,2.4rem);font-weight:600;letter-spacing:-.035em}
.marquee-track li:nth-child(even){color:transparent;-webkit-text-stroke:1px rgba(11,22,32,.55)}
.marquee-track li::after{-webkit-text-stroke:0}

/* cards: light under the pointer (premium.js sets --mx/--my) and a slight tilt */
.why article,.feature,.price,.service{position:relative;overflow:hidden}
.why article::before,.feature::before,.price::before,.service::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
  background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(63,169,229,.14),transparent 60%)}
.why article:hover::before,.feature:hover::before,.price:hover::before,.service:hover::before{opacity:1}
.why article>*,.price>*,.feature>*,.service>*{position:relative}
html.motion .why article,html.motion .feature,html.motion .price{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
html.motion .why article:hover,html.motion .price:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}
.why .num{font-family:var(--mono);font-weight:500;font-size:1rem;letter-spacing:.16em}

/* exam story / about */
.story-progress i{background:var(--grad)}
.step.on::before{background:var(--grad)}
.stat strong{font-family:var(--sans);background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0a63b4;letter-spacing:-.05em;font-size:3.2rem}

/* reviews: serif italic quotes */
.review blockquote{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(1.7rem,3.4vw,2.7rem);line-height:1.15;letter-spacing:-.01em}
.review cite{font-family:var(--mono);font-weight:500;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase}

/* prices: the exam card gets the gradient frame */
.price .k{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.price.main{color:var(--ink);border:1px solid transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(140deg,#075caa,#3fa9e5,rgba(63,111,224,.5) 70%,var(--line)) border-box;box-shadow:0 30px 80px -36px rgba(10,99,180,.55)}
.price.main .k{color:var(--accent)}.price.main small{color:var(--muted)}
.price.main strong{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0a63b4}
html.motion .price.main:hover{border-color:transparent}

/* final CTA: big type over blue light */
.cta{position:relative;overflow:hidden;isolation:isolate}
.cta::before{content:"";position:absolute;z-index:-1;left:50%;top:60%;width:80vmax;height:60vmax;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(63,169,229,.30),transparent 70%),radial-gradient(closest-side at 70% 60%,rgba(109,140,255,.2),transparent 70%);filter:blur(20px)}
.cta h2{font-size:clamp(2.8rem,7vw,6rem);letter-spacing:-.055em;line-height:.95}


/* tighter rhythm: less empty space between and inside sections */
section{padding:clamp(56px,6.5vw,92px) 0}
.section-head{margin-bottom:36px}
.step{min-height:34vh}
.lens-sub{margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px)}
.autumn-offer{padding:40px 0 48px}
@media(max-width:900px){section{padding:52px 0}.step{min-height:auto}}


@media(max-width:900px){
  .site-header{top:10px;border-radius:24px}
  .site-header .nav{height:56px;padding-left:16px}
  .brand img{width:90px}
  .nav-links{top:64px;border-radius:20px;border:1px solid var(--line)}
  .hero{padding-top:calc(76px + 40px)}
}
/* usability test fixes (2026-10-26): touch targets, landscape phones, compact mobile */
.rot-dot{width:40px;height:40px}
.rot-pause{width:40px;height:40px}
.faq-list details{padding:10px 0}.faq-list summary{padding:10px 0}
.video-brand{font-size:.8rem}
@media(max-width:900px){
  .lang a{display:inline-grid;place-items:center;min-width:40px;min-height:36px}
  .menu-btn{min-width:44px;min-height:44px}
  .autumn-offer .offer-poster-link{display:inline-block;padding:9px 0}
  .step{padding:20px 0}.step img{aspect-ratio:16/9;margin-top:14px}
  .service{padding:20px 18px}
}
@media(max-height:500px) and (orientation:landscape){
  .hero{padding-top:84px}
  .hero h1{font-size:clamp(2rem,5.6vw,3rem);margin-bottom:12px}
  .hero .lead{font-size:1rem;margin-bottom:16px}
  .status{margin-top:12px}
}

@media print{body::after{display:none}.site-header{position:static;transform:none}.hero{padding-top:24px}
  .hero h1 .em,.hero h1 .em *,.stat strong,.price.main strong{-webkit-text-fill-color:currentColor;background:none}
  .marquee-track li:nth-child(even){color:inherit;-webkit-text-stroke:0}}