/* Shared styles for the Electron Medical content pages (solutions, approach).
   Layout: fixed menu bar over a fixed, dimmed stage image; content scrolls in one centred column. */
:root{
  --bg:#03090c; --bg-2:#061217; --ink:#eef8f9; --ink-2:#a9bfc4; --ink-3:#6c868c;
  --accent:#19e3e0; --accent-hi:#7df5f2; --on-accent:#012628;
  --line:rgba(180,232,236,.12); --line-2:rgba(180,232,236,.26);
  --panel:rgba(6,18,23,.72);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --n:clamp(.74px,calc(100vw/1440),1.2px);
  --pad:clamp(20px,5vw,84px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)}
body{min-height:100vh;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--display);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ul{list-style:none}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---------- fixed stage ---------- */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg)}
.stage .bg{position:absolute;inset:-4%;background:url(stage-bg.jpg) 50% 34%/cover no-repeat;filter:blur(12px) brightness(.42);transform:scale(1.08)}
.stage::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,12,.72) 0%,rgba(3,9,12,.42) 34%,rgba(3,9,12,.78) 100%)}

/* ---------- menu bar (same as the home page) ---------- */
.bar{position:fixed;z-index:30;left:0;right:0;top:0;height:calc(74*var(--n));display:flex;align-items:center;gap:calc(24*var(--n));padding:0 calc(36*var(--n));background:linear-gradient(180deg,rgba(3,9,12,.94) 0%,rgba(3,9,12,.72) 60%,rgba(3,9,12,0) 100%)}
.brand{display:flex;align-items:center;gap:calc(14*var(--n));margin-right:auto;font-family:var(--display);font-weight:900;font-stretch:125%;white-space:nowrap;font-size:calc(20*var(--n));letter-spacing:.04em;color:#fff;text-shadow:0 0 calc(18*var(--n)) rgba(25,227,224,.35)}
.brand i{font-style:normal;font-family:var(--display);font-weight:300;font-stretch:125%;letter-spacing:.09em}
.brand span{text-align:left;line-height:1.25}
.brand img{height:calc(42*var(--n));width:auto;filter:drop-shadow(0 0 calc(10*var(--n)) rgba(25,227,224,.55))}
.links{position:relative;display:flex;align-items:center;gap:calc(22*var(--n))}
.links::after{content:"";position:absolute;left:calc(-30*var(--n));right:calc(-30*var(--n));bottom:calc(-13*var(--n));height:1px;background:linear-gradient(90deg,transparent,var(--accent) 50%,transparent);opacity:.7;pointer-events:none}
.tag{position:relative;display:inline-flex;align-items:center;font-weight:500;font-size:calc(14*var(--n));letter-spacing:.07em;text-transform:uppercase;color:#fff;white-space:nowrap;padding:calc(8*var(--n)) 0;transition:color .25s,text-shadow .25s}
.links .tag::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--accent);transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.links .tag:hover,.links .tag[aria-current]{color:var(--accent-hi);text-shadow:0 0 calc(14*var(--n)) rgba(25,227,224,.6)}
.links .tag:hover::after,.links .tag[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}
.t4{isolation:isolate;gap:calc(14*var(--n));height:calc(42*var(--n));padding:0 calc(24*var(--n));font-weight:600;margin-left:calc(12*var(--n))}
.t4::before{content:"";position:absolute;inset:0;z-index:-1;transform:skewX(-22deg);border:1.5px solid var(--accent);border-radius:calc(5*var(--n));background:linear-gradient(90deg,rgba(25,227,224,.2),rgba(25,227,224,.05));box-shadow:0 0 calc(18*var(--n)) rgba(25,227,224,.4),inset 0 0 calc(14*var(--n)) rgba(25,227,224,.18);transition:background .3s,box-shadow .3s}
.t4:hover::before{background:linear-gradient(90deg,rgba(25,227,224,.42),rgba(25,227,224,.16));box-shadow:0 0 calc(28*var(--n)) rgba(25,227,224,.65),inset 0 0 calc(14*var(--n)) rgba(25,227,224,.3)}
.t4 svg{width:calc(20*var(--n));height:calc(20*var(--n));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.t4:hover svg{transform:translateX(calc(4*var(--n)))}

/* ---------- page ---------- */
main{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:calc(74*var(--n) + clamp(48px,9vh,110px)) var(--pad) clamp(56px,9vh,110px)}
.mono{font:500 11px/1.4 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.mono b{color:var(--accent);font-weight:500}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--accent)}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--accent)}
h1{font-weight:900;font-stretch:118%;font-size:clamp(2.3rem,6.4vw,6.2rem);line-height:.94;letter-spacing:-.035em;text-transform:uppercase;margin-top:22px;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal;color:var(--accent)}
.rule{width:96px;height:2px;background:var(--accent);box-shadow:0 0 14px var(--accent);margin-top:clamp(22px,3vh,34px)}
h2{font-weight:800;font-stretch:116%;font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:.08em;text-transform:uppercase}
.prose p{color:var(--ink-2);max-width:62ch}
.prose p+p{margin-top:1.05em}
.prose strong{color:var(--ink);font-weight:600}
.panel{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
section{margin-top:clamp(48px,8vh,96px)}
.btn{display:inline-flex;align-items:center;gap:12px;height:56px;padding:0 28px;border-radius:999px;font-weight:650;font-size:15px;border:1px solid var(--line-2);white-space:nowrap;transition:background .3s,color .3s,border-color .3s,transform .2s}
.btn:hover{border-color:var(--accent);color:var(--accent-hi)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.solid:hover{background:var(--accent-hi);color:var(--on-accent)}

/* reveal: visible by default, animated only when JS adds .anim */
.anim [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*60ms)}
.anim [data-reveal].in{opacity:1;transform:none}

/* closing call to action + footer */
.cta{display:flex;justify-content:space-between;align-items:center;gap:28px 40px;flex-wrap:wrap;padding:clamp(26px,4vw,52px)}
.cta h3{font-weight:900;font-stretch:118%;font-size:clamp(1.6rem,3.6vw,3.2rem);line-height:.98;letter-spacing:-.03em;text-transform:uppercase}
.cta p{color:var(--ink-2);max-width:46ch;margin-top:12px}
.cta .acts{display:flex;gap:12px;flex-wrap:wrap}
footer{position:relative;z-index:1;max-width:1360px;margin:0 auto;padding:0 var(--pad) 34px;display:flex;justify-content:space-between;gap:12px 28px;flex-wrap:wrap}
footer a:hover{color:var(--accent)}

@media (max-width:820px){
  :root{--n:calc(100vw/430)}
  .bar{height:56px;padding:0 14px;gap:10px;background:linear-gradient(180deg,rgba(3,9,12,.96) 0%,rgba(3,9,12,.9) 100%);height:92px;align-items:flex-start;padding-top:12px}
  .brand{font-size:11px;gap:7px;white-space:normal}
  .brand img{height:30px}
  .links{position:absolute;left:14px;right:14px;top:58px;justify-content:space-between;gap:0}
  .links::after{left:0;right:0;bottom:-4px}
  .tag{font-size:8.6px;letter-spacing:.02em;padding:6px 0}
  .t4{height:30px;padding:0 13px;gap:6px;font-size:9.5px;margin-left:0}
  .t4 svg{width:14px;height:14px}
  main{padding-top:calc(92px + 40px)}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}