/* ============================================================
   VIVOFORT HEALTHCARE — Landing
   navy #0B2A4A · teal #12A594 · slate #6B7785
   ============================================================ */
:root{
  --bg:#030d1a;
  --navy:#0B2A4A;
  --ink:#EAF2F8;
  --ink-dim:#A9BDCE;
  --slate:#6B7785;
  --teal:#12A594;
  --teal-bright:#1fd0bb;
  --teal-glow:rgba(18,165,148,.5);
  --line:rgba(150,190,220,.16);
  --f-display:'Space Grotesk',system-ui,sans-serif;
  --f-tech:'Orbitron',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-display);
  background:var(--bg);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--f-tech);font-weight:500;font-size:.82rem;letter-spacing:1.5px;
  text-transform:uppercase;cursor:pointer;transition:.35s var(--ease);white-space:nowrap;
}
.btn .arr{transition:transform .35s var(--ease);font-family:var(--f-display)}
.btn:hover .arr{transform:translateX(5px)}
.btn--primary{
  padding:17px 30px;color:#02110e;
  background:linear-gradient(135deg,var(--teal-bright),#0d8577);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:0 10px 40px -8px var(--teal-glow);
}
.btn--primary:hover{filter:brightness(1.12);transform:translateY(-2px)}
.btn--sm{
  padding:12px 22px;font-size:.7rem;color:var(--teal-bright);
  border:1px solid rgba(18,165,148,.45);background:rgba(18,165,148,.08);
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px);
}
.btn--sm:hover{background:rgba(18,165,148,.2);box-shadow:0 0 24px -4px var(--teal-glow)}

.dot{
  width:8px;height:8px;border-radius:50%;display:inline-block;
  background:var(--teal-bright);box-shadow:0 0 0 0 var(--teal-glow);
  animation:pulse 2s infinite;
}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--teal-glow)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}

/* ============ NAV ============ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;transition:.4s var(--ease)}
.nav.scrolled{background:rgba(3,13,26,.8);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav__inner{
  max-width:1280px;margin:0 auto;padding:20px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.nav__brand img{height:58px;filter:drop-shadow(0 2px 14px rgba(0,0,0,.5))}

/* ============ HERO ============ */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;isolation:isolate}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media video{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(1.15) contrast(1.08) brightness(.95);
  transform:scale(1.08);
  animation:drift 30s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:scale(1.08) translate3d(0,0,0)}
  to{transform:scale(1.16) translate3d(-1.6%,-1.2%,0)}
}
/* cinematic teal grade */
.hero__grade{
  position:absolute;inset:0;mix-blend-mode:soft-light;
  background:linear-gradient(120deg,rgba(18,165,148,.5),rgba(11,42,74,.65) 60%);
}
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 22% 60%,rgba(3,13,26,.86) 0%,rgba(3,13,26,.45) 45%,rgba(3,13,26,.1) 75%),
    linear-gradient(0deg,var(--bg) 0%,transparent 26%),
    linear-gradient(180deg,rgba(3,13,26,.75) 0%,transparent 24%);
}
.hero__scan{
  position:absolute;inset:0;pointer-events:none;opacity:.45;mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg,rgba(180,225,255,.07) 0 1px,transparent 1px 4px);
  animation:scan 9s linear infinite;
}
@keyframes scan{from{background-position-y:0}to{background-position-y:220px}}

.hero__content{
  position:relative;z-index:2;width:100%;
  max-width:1280px;margin:0 auto;padding:150px 32px 150px;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-tech);font-weight:500;font-size:.72rem;letter-spacing:5px;
  color:var(--teal-bright);padding:11px 20px;
  border:1px solid rgba(18,165,148,.4);background:rgba(3,13,26,.45);backdrop-filter:blur(8px);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  margin-bottom:30px;
  opacity:0;animation:rise .8s var(--ease) .15s forwards;
}
.hero__title{
  font-weight:700;letter-spacing:-2px;line-height:1.0;
  font-size:clamp(2.9rem,7.8vw,6.4rem);max-width:15ch;
  text-shadow:0 4px 40px rgba(0,0,0,.55);
  opacity:0;animation:rise .9s var(--ease) .3s forwards;
}
.hero__title .em{
  background:linear-gradient(100deg,var(--teal-bright),#7ef5e6 55%,var(--teal-bright));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 26px var(--teal-glow));
}
.hero__sub{
  margin-top:26px;max-width:54ch;
  font-size:clamp(1.02rem,1.6vw,1.22rem);font-weight:400;color:var(--ink-dim);
  opacity:0;animation:rise .9s var(--ease) .45s forwards;
}
.hero__cta{margin-top:42px;opacity:0;animation:rise .9s var(--ease) .6s forwards}
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.eyebrow,.hero__title,.hero__sub,.hero__cta{transform:translateY(24px)}

/* HUD frame */
.hud{position:absolute;inset:112px 36px 88px;z-index:1;pointer-events:none;opacity:0;animation:hudIn 1.4s var(--ease) .9s forwards}
@keyframes hudIn{to{opacity:1}}
.hud__corner{position:absolute;width:34px;height:34px;border:2px solid rgba(31,208,187,.6)}
.hud__corner--tl{top:0;left:0;border-right:0;border-bottom:0}
.hud__corner--tr{top:0;right:0;border-left:0;border-bottom:0}
.hud__corner--bl{bottom:0;left:0;border-right:0;border-top:0}
.hud__corner--br{bottom:0;right:0;border-left:0;border-top:0}
.hud__tag{
  position:absolute;display:flex;align-items:center;gap:8px;
  font-family:var(--f-tech);font-size:.6rem;font-weight:500;letter-spacing:3px;
  color:rgba(169,189,206,.8);
}
.hud__tag--tl{top:-3px;left:50px}
.hud__tag--tr{top:-3px;right:50px}
.hud__tag--bl{bottom:-3px;left:50px}
.hud__tag--br{bottom:-3px;right:50px}

/* layers ticker along hero bottom */
.hero__ticker{
  position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;
  border-top:1px solid var(--line);
  background:rgba(3,13,26,.55);backdrop-filter:blur(12px);
  padding:15px 0;
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__track{
  display:flex;gap:30px;align-items:center;white-space:nowrap;width:max-content;
  animation:marq 30s linear infinite;
  font-family:var(--f-tech);font-weight:500;font-size:.72rem;letter-spacing:4px;color:var(--ink-dim);
}
.ticker__track i{color:var(--teal);font-style:normal;font-size:.6rem}
@keyframes marq{to{transform:translateX(-50%)}}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--line);background:rgba(3,13,26,.7)}
.footer__inner{
  max-width:1280px;margin:0 auto;padding:34px 32px;
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;
}
.footer__logo{height:44px;opacity:.95}
.footer__mail{
  margin-left:auto;font-family:var(--f-tech);font-size:.74rem;letter-spacing:2px;
  color:var(--teal-bright);transition:.3s;
}
.footer__mail:hover{text-shadow:0 0 18px var(--teal-glow)}
.footer__copy{font-size:.78rem;color:var(--slate);letter-spacing:.5px}

/* ============ RESPONSIVE ============ */
@media(max-width:720px){
  .nav__inner{padding:14px 20px}
  .nav__brand img{height:44px}
  .btn--sm{padding:10px 16px;font-size:.62rem}
  .hero__content{padding:170px 22px 150px}
  .eyebrow{font-size:.62rem;letter-spacing:3px;padding:9px 14px}
  .hero__title{letter-spacing:-1px}
  .hud{inset:86px 14px 66px}
  .hud__tag{display:none}
  .footer__inner{flex-direction:column;gap:14px;text-align:center}
  .footer__mail{margin-left:0}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .eyebrow,.hero__title,.hero__sub,.hero__cta,.hud{opacity:1;transform:none}
  .hero__media video{transform:scale(1.08)}
}