:root{
  --bg:#050819;
  --text:#f6f8ff;
  --muted:#c2c8dc;
  --line:rgba(255,255,255,.24);
  --glass:rgba(7,10,28,.72);
  --purple:#9c46ff;
  --blue:#52a8ff;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body{overflow-x:hidden}
button,a{font:inherit}
button{color:inherit}
.page{position:relative;min-height:100svh;isolation:isolate;overflow:hidden;background:#030615}
.hero-bg{position:absolute;inset:0;z-index:-3;background-image:url('assets/oczio-desktop.png');background-size:cover;background-repeat:no-repeat;background-position:center center}
.veil{position:absolute;inset:0;z-index:-2;background:transparent}
.topbar{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:28px clamp(22px,5vw,64px);padding-top:max(28px,env(safe-area-inset-top))}
.wordmark{color:#f7f8ff;text-decoration:none;font-size:clamp(18px,2vw,27px);letter-spacing:.35em;font-weight:400;text-shadow:0 0 18px rgba(90,130,255,.28)}
.nav{display:flex;gap:clamp(18px,3.2vw,46px);align-items:center}
.nav-link,.footer-contact{appearance:none;border:0;background:transparent;padding:10px 0;cursor:pointer;color:rgba(255,255,255,.86);font-size:12px;letter-spacing:.23em;transition:.22s ease;text-transform:uppercase}
.nav-link:hover,.nav-link:focus-visible,.footer-contact:hover,.footer-contact:focus-visible{color:#fff;text-shadow:0 0 14px rgba(94,171,255,.85);outline:none}
.nav-contact{background:rgba(4,7,24,.22);padding:10px 4px;border-radius:4px}
.hero{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:clamp(155px,21vh,240px) 24px 40px;text-align:center}
.hero-copy{display:flex;flex-direction:column;align-items:center;gap:12px;filter:drop-shadow(0 8px 22px rgba(0,0,0,.35))}
.face-logo{display:flex;align-items:center;justify-content:center;gap:clamp(5px,1vw,12px);height:clamp(58px,8.4vw,108px);margin-bottom:7px}
.eye{position:relative;width:clamp(56px,7vw,92px);height:clamp(56px,7vw,92px);border-radius:50%;background:radial-gradient(circle at 50% 50%,#0d1a36 0 18%,#f6f8ff 19% 34%,#10152d 35% 56%,#050818 57% 100%);box-shadow:0 0 0 1px rgba(128,164,255,.35),0 0 18px rgba(47,122,255,.5),inset 0 0 18px rgba(100,170,255,.25)}
.iris{position:absolute;width:16%;height:16%;border-radius:50%;background:#a6e4ff;left:42%;top:42%;box-shadow:0 0 10px 4px rgba(63,168,255,.95)}
.smile{width:clamp(46px,6vw,82px);height:clamp(27px,3.6vw,48px);border:clamp(8px,1vw,14px) solid var(--purple);border-top:0;border-left-color:transparent;border-right-color:transparent;border-radius:0 0 70px 70px;transform:translateY(10px);filter:drop-shadow(0 0 9px rgba(156,70,255,.75))}
.zi{font-weight:700;font-size:clamp(56px,8vw,106px);line-height:.88;letter-spacing:-.08em;background:linear-gradient(125deg,#152b63 10%,#3a79ff 50%,#051024 82%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 24px rgba(45,123,255,.22)}
h1{margin:9px 0 0;font-size:clamp(34px,5vw,68px);font-weight:300;letter-spacing:.17em;line-height:1.05;text-shadow:0 0 22px rgba(105,140,255,.18)}
.subtitle{margin:6px 0 0;font-size:clamp(11px,1.4vw,18px);letter-spacing:.43em;color:rgba(246,248,255,.86);font-weight:400}
.spacer{flex:1;min-height:42vh}
.footer-line{display:flex;align-items:center;gap:16px;color:rgba(255,255,255,.72);margin-bottom:34px}
.footer-line span{width:clamp(28px,5vw,82px);height:1px;background:var(--line)}
.footer-line p{margin:0;font-size:clamp(8px,1vw,12px);letter-spacing:.34em;white-space:nowrap}
.site-footer{position:absolute;z-index:4;left:0;right:0;bottom:0;display:none;justify-content:space-between;align-items:center;padding:16px clamp(22px,5vw,64px);padding-bottom:max(16px,env(safe-area-inset-bottom));color:rgba(255,255,255,.48);font-size:11px;letter-spacing:.15em}
.footer-contact{font-size:10px;color:rgba(255,255,255,.58)}
.modal{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:20px}
.modal.open{display:grid}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,3,12,.72);backdrop-filter:blur(11px)}
.modal-card{position:relative;width:min(520px,100%);border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(16,19,44,.88),rgba(7,9,25,.92));box-shadow:0 26px 90px rgba(0,0,0,.55),0 0 42px rgba(77,72,255,.12);border-radius:26px;padding:34px;backdrop-filter:blur(20px)}
.close{position:absolute;top:12px;right:16px;border:0;background:transparent;font-size:30px;font-weight:200;cursor:pointer;color:rgba(255,255,255,.72)}
.modal-card h2{margin:0 42px 12px 0;font-size:24px;letter-spacing:.08em;font-weight:500}
.modal-card p{margin:0;color:var(--muted);line-height:1.7;font-size:15px}
.contact-actions{display:grid;gap:12px;margin-top:25px}
.contact-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;border-radius:15px;text-decoration:none;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.06);color:#fff;font-weight:600;letter-spacing:.03em;transition:.2s ease}
.contact-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}
.contact-note{margin-top:16px!important;font-size:12px!important;color:rgba(255,255,255,.52)!important;text-align:center}
@media (max-width:720px){
  .hero-bg{background-image:url('assets/oczio-mobile.png');background-size:cover;background-position:center center}
  .topbar{padding-left:20px;padding-right:20px}
  .wordmark{font-size:15px;letter-spacing:.28em}
  .nav{gap:14px}
  .nav-link{font-size:9px;letter-spacing:.14em}
  .hero{padding-top:25vh}
  .hero-copy{transform:scale(.96)}
  .spacer{min-height:41vh}
  .footer-line{margin-bottom:45px}
  .footer-line p{letter-spacing:.23em;font-size:7.5px}
  .site-footer{font-size:9px}
}
@media (max-width:480px){
  .nav-link[data-panel="vision"],.nav-link[data-panel="technology"]{display:none}
  .nav-contact{font-size:10px}
  .hero-bg{background-position:center center}
  h1{letter-spacing:.12em}
  .subtitle{letter-spacing:.28em}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}