/* Prima pagină anpheros.com în mișcare (index-v2). Identitate: alb, ardezie, cyan, mentă.
   Animăm doar transform și opacity; stările statice (fără JS, fără mișcare) sunt cele implicite,
   iar html.js pune stările de pornire ale animațiilor. */
:root{
  --bg:#ffffff; --mist:#f4f7fb; --mist-2:#eaf1f8; --line:#e2e8f1;
  --ink:#0e1a33; --ink-2:#4a5673; --ink-3:#8591a8;
  --slate:#44619e; --slate-d:#2f4677; --cyan:#1fc7d9; --mint:#3ccfa8; --mint-d:#138a6b; --violet:#5e2a83;
  --app-bg:#f2f2f7; --amber:#f0a13a; --warm:#e9793a;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Instrument Sans","Helvetica Neue","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --app:-apple-system,"SF Pro Text","Inter",system-ui,sans-serif;
  --gutter:clamp(16px,4vw,56px);
  --nav:60px;
}
*{box-sizing:border-box}
html{scroll-behavior:auto; -webkit-text-size-adjust:100%}
html.i18n-pending body{visibility:hidden}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.55 var(--body); -webkit-font-smoothing:antialiased; overflow-x:hidden}
a{color:inherit}
img{display:block; max-width:100%}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px; border-radius:6px}
.wrap{padding-inline:var(--gutter); max-width:1320px; margin-inline:auto}
.mono{font-family:var(--mono); font-size:12px; letter-spacing:.02em}
.eyebrow{font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--slate); margin:0}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-.025em}
h2{font-size:clamp(34px,5vw,64px); line-height:1.02; font-weight:650}
p{margin:0}
.only-mobile{display:none}
@media (max-width:760px){ .only-mobile{display:block} .only-desktop{display:none !important} }

/* ---------- nav ---------- */
.nav{position:fixed; inset:0 0 auto 0; z-index:50; padding-top:env(safe-area-inset-top,0px);
  background:rgba(255,255,255,.72); backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid rgba(226,232,241,.7)}
.nav .wrap{display:flex; align-items:center; gap:18px; height:var(--nav)}
.brand{display:flex; align-items:center; gap:10px; font:650 19px/1 var(--display); text-decoration:none; letter-spacing:-.02em}
.brand img{width:28px; height:28px}
.nav-links{display:flex; flex:1; justify-content:space-evenly; gap:8px; margin:0 8px; font-size:14px; color:var(--ink-2); align-items:center}
.nav-tools{display:flex; align-items:center; gap:10px; margin-left:auto}
.nav-links a{text-decoration:none; white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border-radius:999px; font:600 15px/1 var(--body); text-decoration:none; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:transform .2s, background .2s, border-color .2s}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink); color:#fff}
.btn-ink:hover{background:var(--slate-d)}
.btn-line{border-color:var(--line); background:#fff; color:var(--ink)}
.btn-line:hover{border-color:var(--slate)}
.nav .btn{height:36px; font-size:14px; color:#fff}
.lang-switch{font:500 13px/1 var(--body); padding:8px 26px 8px 10px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2); -webkit-appearance:none; appearance:none; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%234a5673' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 9px center/10px}
/* meniul de pe telefon și tabletă: buton cu două linii, meniu pe tot ecranul (ca pe apple.com) */
.menu-btn{display:none}
@media (max-width:1000px){
  .nav-tools{margin-left:auto} .nav-tools .btn, .nav-tools .lang-switch{display:none}
  .menu-btn{display:block; position:relative; width:44px; height:44px; margin-left:0; margin-right:-10px; border:0; border-radius:12px; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
  .menu-btn span{position:absolute; left:12px; right:12px; top:50%; height:1.6px; margin-top:-.8px; border-radius:2px; background:var(--ink); transition:transform .4s cubic-bezier(.2,.8,.2,1)}
  .menu-btn span:first-child{transform:translateY(-4px)} .menu-btn span:last-child{transform:translateY(4px)}
  .nav-open .menu-btn span:first-child{transform:rotate(45deg)} .nav-open .menu-btn span:last-child{transform:rotate(-45deg)}
  .nav-links{position:fixed; inset:0; z-index:-1; margin:0; flex-direction:column; align-items:stretch; gap:0; overflow-y:auto; overscroll-behavior:contain;
    padding:calc(env(safe-area-inset-top,0px) + var(--nav) + 20px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 32px);
    background:#fafafc; opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s}
  .nav-open .nav-links{opacity:1; visibility:visible; transition:opacity .3s}
  .nav-links a:not(.btn){display:block; padding:9px 0; font:650 clamp(26px,7vw,34px)/1.2 var(--display); letter-spacing:-.02em; color:var(--ink);
    opacity:0; transform:translateY(-10px); transition:opacity .25s, transform .25s}
  .nav-open .nav-links a:not(.btn){opacity:1; transform:none; transition:opacity .45s calc(60ms + var(--i,0) * 35ms), transform .55s cubic-bezier(.2,.8,.2,1) calc(60ms + var(--i,0) * 35ms)}
  .nav-links .btn{margin-top:28px; height:50px; justify-content:center; font-size:16px}
  .nav-links .lang-switch{margin-top:14px; align-self:flex-start; font-size:15px; padding:12px 34px 12px 14px}
  .nav-open .nav{background:#fafafc; backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom-color:transparent}
  html.nav-open, html.nav-open body{overflow:hidden}
}

/* ---------- capul de scenă, note, pin ---------- */
.scene-head{padding-block:120px 40px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 64px; align-items:end}
.scene-head p{color:var(--ink-2); font-size:18px; max-width:30em}
.scene-head .eyebrow{grid-column:1/-1}
.note{color:var(--ink-3); font-size:13.5px; max-width:56em; padding-block:24px 96px}
.note a{color:var(--slate); font-weight:600; text-decoration:none}
.pin{height:100svh; min-height:560px; display:flex; align-items:center}
.pin > .wrap{width:100%; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:clamp(24px,5vw,80px); align-items:center}
@media (max-width:820px){ .scene-head{grid-template-columns:1fr; padding-block:88px 24px} }

/* pași (lista din stânga) */
.steps{list-style:none; margin:0; padding:0; display:grid; gap:4px; position:relative}
.step{display:block; width:100%; text-align:left; background:none; border:0; padding:14px 0 14px 22px; border-left:2px solid var(--line); cursor:pointer; color:var(--ink-3); font:inherit; transition:color .4s, border-color .4s}
.step .h{display:block; font-family:var(--display); letter-spacing:-.02em; line-height:1.15; font-size:clamp(19px,1.9vw,25px); font-weight:650; color:inherit; transition:color .4s}
.step .d{margin-top:6px; font-size:15px; color:var(--ink-2); max-width:28em; display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .5s, opacity .5s}
.step .d span{overflow:hidden}
.step.on{border-color:var(--slate); color:var(--ink)}
.step.on .d{grid-template-rows:1fr; opacity:1}
html.no-js .step .d, html.no-motion .step .d{grid-template-rows:1fr; opacity:1}

/* ============ ACTUL 1: hero → telefon → aparate ============ */
.act{position:relative}
.act-pin{position:relative; height:auto; min-height:0; overflow:hidden; isolation:isolate; padding-bottom:48px}
.hero-aura{position:absolute; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(40% 50% at 78% 38%, rgba(31,199,217,.16), transparent 70%),
    radial-gradient(35% 45% at 62% 70%, rgba(60,207,168,.14), transparent 70%),
    radial-gradient(45% 55% at 95% 10%, rgba(68,97,158,.12), transparent 70%)}
.hero-aura img{width:100%; height:100%; object-fit:cover; opacity:.3; mix-blend-mode:multiply; transform-origin:50% 50%}
.hero-aura::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,.35) 45%, rgba(255,255,255,0) 70%)}
#flow{position:absolute; inset:0; z-index:-1; width:100%; height:100%}
.act-grid{height:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); grid-template-rows:auto auto auto; align-items:center; column-gap:40px; row-gap:36px; padding-top:calc(var(--nav) + 48px)}
.hero-text{grid-area:1/1/2/3; position:relative; z-index:6; text-align:center; justify-self:center; max-width:52em; padding-top:2vh}
.hero-text .lede{margin:22px auto 0; max-width:40em; font-size:clamp(16px,1.3vw,19px); color:var(--ink-2)}
.hero-text .cta{margin-top:26px; display:flex; flex-wrap:wrap; gap:12px; justify-content:center}
.hero-text h1{margin-top:18px; font-size:clamp(36px,4.6vw,68px); line-height:1.02; font-weight:760; letter-spacing:-.04em}
.hero-text h1 .w{display:inline-block; white-space:nowrap}
.hero-text h1 .hl{color:var(--slate)}
.facts{grid-area:3/1/4/3; justify-self:center; display:flex; flex-wrap:wrap; justify-content:center; gap:10px 24px; color:var(--ink-3); padding-bottom:0}
.facts > span{display:flex; align-items:center; gap:8px}
.facts i{width:6px; height:6px; border-radius:50%; background:var(--mint)}
.col-text{grid-area:1/1/4/2; position:relative; display:grid; align-items:center; min-width:0; z-index:2}
.col-stage{grid-area:1/2/4/3; position:relative; height:100%; min-height:420px}

/* logo-ul din 4 bucăți, în mijlocul sferei */
.hero-visual{grid-area:2/1/3/3; position:relative; z-index:1; justify-self:center; align-self:center; width:min(1120px,100%); height:auto}
.hero-visual img{width:100%; height:auto; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(14,26,51,.18))}
.mark{grid-area:2/1/3/3; position:relative; justify-self:center; align-self:center; width:min(250px,22vw,34svh); aspect-ratio:1; z-index:3}
.mark::before{content:""; position:absolute; inset:-30%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.98) 38%, rgba(255,255,255,.6) 55%, rgba(255,255,255,0) 72%); z-index:-1}
/* banner lat sub titlu: etichetele FHIR în stânga, logo-ul (.mark, deasupra) în centru, globul mic în dreapta */
html.earth .mark{width:min(180px,20vw,22svh)}
.hero-band{grid-area:2/1/3/3; position:relative; z-index:1; justify-self:center; align-self:center; width:min(1180px,100%); height:min(calc(100% - 28px),320px); min-height:200px; border-radius:28px; overflow:hidden; background:linear-gradient(120deg,#ffffff 0%,#f4f7fb 55%,#e8f5f8 100%); border:1px solid var(--line); box-shadow:0 30px 60px -44px rgba(14,26,51,.45)}
.hero-band::before{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(60% 90% at 82% 50%, rgba(31,199,217,.12), transparent 70%), radial-gradient(40% 70% at 12% 50%, rgba(68,97,158,.07), transparent 70%)}
.band-tags{position:absolute; left:clamp(20px,4vw,52px); top:50%; translate:0 -50%; display:grid; gap:10px; z-index:2}
.band-tags .tag{position:static; inset:auto}
.earth-wrap{position:absolute; z-index:1; border-radius:50%; opacity:0; cursor:grab; touch-action:pan-y; transform-origin:50% 50%; filter:saturate(.8) brightness(1.04)}
.earth-wrap.grab{cursor:grabbing}
.earth-wrap::before{content:""; position:absolute; inset:-12%; border-radius:50%; z-index:-1; pointer-events:none; background:radial-gradient(circle, rgba(95,213,230,0) 52%, rgba(95,213,230,.32) 64%, rgba(68,97,158,.08) 74%, rgba(255,255,255,0) 84%)}
.earth-wrap canvas{display:block; width:100%; height:100%; border-radius:50%}
@media (max-width:760px){ .hero-band{grid-area:2/1/3/2; height:min(100%,220px); min-height:180px; border-radius:22px} .band-tags{display:none} }
.pieces{position:absolute; inset:0}
.piece{position:absolute; inset:0; background-size:100% 100%; background-repeat:no-repeat}
.p1{clip-path:inset(0 50% 50% 0)} .p2{clip-path:inset(0 0 50% 50%)} .p3{clip-path:inset(50% 0 0 50%)} .p4{clip-path:inset(50% 50% 0 0)}
.ring{position:absolute; inset:-14%; border-radius:50%; border:1px solid rgba(68,97,158,.14)}
.ring.r2{inset:-32%; border-style:dashed; border-color:rgba(31,199,217,.22)}
.tag{position:absolute; white-space:nowrap; padding:7px 11px; border-radius:10px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 24px -12px rgba(14,26,51,.25); color:var(--ink-2)}
.tag b{color:var(--slate); font-weight:500}
.t1{top:2%; left:-62%} .t2{top:40%; right:-52%} .t3{bottom:0; left:-40%}
.scroll-hint{position:absolute; left:50%; bottom:22px; translate:-50% 0; display:flex; align-items:center; gap:10px; font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); z-index:4}
.scroll-hint i{width:1px; height:34px; background:linear-gradient(var(--slate), transparent); display:block; animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* telefonul */
.phone-wrap{position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:2}
.cam{transform-origin:50% 50%; will-change:transform}
.phone{--h:min(640px,76svh); height:var(--h); aspect-ratio:300/640; position:relative; transform-style:preserve-3d; will-change:transform}
.phone-front,.phone-back{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:calc(var(--h)*.075)}
.phone-front{padding:calc(var(--h)*.016); background:linear-gradient(145deg,#2a3a63,#0b1326); box-shadow:0 50px 80px -40px rgba(14,26,51,.45), 0 0 0 1px rgba(255,255,255,.08) inset}
.phone-front::after{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.18), transparent 28%, transparent 70%, rgba(255,255,255,.08))}
.phone-back{transform:rotateY(180deg); overflow:hidden; background:#33507f}
.phone-back img{width:100%; height:100%; object-fit:fill}
.island{position:absolute; top:calc(var(--h)*.017); left:50%; translate:-50% 0; width:30%; height:calc(var(--h)*.042); border-radius:99px; background:#05080f; z-index:9}
.glass{position:relative; width:100%; height:100%; border-radius:calc(var(--h)*.06); overflow:hidden; background:var(--app-bg)}
.boot{position:absolute; inset:0; z-index:8; background:#05080f; display:grid; place-items:center}
.app-icon{width:22%; aspect-ratio:1; border-radius:24%; background:#fff center/72% no-repeat; box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
html.no-js .boot, html.no-motion .boot{display:none}
/* ecranele: pânză 300×640 scalată */
.ui{position:absolute; left:0; top:0; width:300px; height:640px; transform-origin:0 0; transform:scale(var(--k,1)); font-family:var(--app); color:#111827}
.screen{position:absolute; inset:0; padding:48px 14px 0; opacity:0; visibility:hidden; z-index:1}
.screen.on{opacity:1; visibility:visible}
.screen.s-sym{z-index:3}
html.no-js .s-home, html.no-motion .s-home{opacity:1; visibility:visible}
.sb{position:absolute; top:14px; left:24px; right:22px; display:flex; justify-content:space-between; font:600 13px/1 var(--app); z-index:6}
.sb .ic{display:flex; gap:5px; align-items:center} .sb .sig{font-size:10px}
.sb .bat{width:22px; height:11px; border-radius:3px; border:1.5px solid #111; position:relative}
.sb .bat::after{content:""; position:absolute; inset:1.5px 4px 1.5px 1.5px; background:#111; border-radius:1px}
.card{background:#fff; border-radius:18px; padding:13px 14px; box-shadow:0 1px 2px rgba(0,0,0,.03)}
.card.center{text-align:center}
.kicker{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8e8e93; margin:0 0 6px}
.big{font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.1}
.big .unit{font-size:13px; color:#6b7280; font-weight:600; margin-left:3px}
.big.xl{font-size:40px} .big.xl .unit{font-size:16px}
.big.name{font-size:30px; margin-bottom:12px}
.ttl{font-size:14px; font-weight:700} .ttl2{font-size:24px; margin-bottom:8px}
.greet{font-size:13px}
.row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.stack{display:grid; gap:10px}
.muted{color:#8e8e93; font-size:12px} .muted.good{color:var(--mint-d)}
.pill{display:inline-flex; align-items:center; padding:3px 9px; border-radius:99px; font-size:11px; font-weight:600}
.pill.mint{background:#e3f8f1; color:var(--mint-d)} .pill.slate{background:#e8eef8; color:var(--slate)} .pill.grey{background:#f2f2f7; color:#6b7280}
.chips{display:flex; gap:6px; flex-wrap:wrap}
.gnav{position:absolute; left:16px; right:16px; bottom:18px; height:58px; border-radius:30px; background:rgba(255,255,255,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.9); box-shadow:0 10px 30px -12px rgba(14,26,51,.3); display:flex; align-items:center; justify-content:space-around; padding:0 10px; z-index:4}
.gnav i{width:22px; height:22px; border-radius:7px; background:#c7cdd8; display:block}
.gnav i.on{background:var(--slate)}
.gnav .plus{width:40px; height:40px; border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font:400 24px/1 var(--app)}
.sheet{position:absolute; left:150px; top:593px; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; background:var(--app-bg); transform:scale(0); z-index:2; opacity:0}
.ripple{position:absolute; left:150px; top:593px; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; border:2px solid var(--cyan); opacity:0; transform:scale(.4); z-index:5; pointer-events:none}
/* acasă */
.feel .seg{display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:10px}
.feel .seg > div{background:var(--app-bg); border-radius:12px; padding:8px; font-size:11px; font-weight:600; color:#3a3a3c}
.dots{display:flex; gap:3px; margin-top:6px}
.dots b{width:9px; height:9px; border-radius:50%; background:#dde2ea}
.dots b.f{background:var(--mint)}
html.js .dots b.f{background:#dde2ea}
.bar{height:6px; border-radius:6px; background:#eceef3; overflow:hidden; margin-top:8px}
.bar b{display:block; height:100%; width:66%; background:linear-gradient(90deg,var(--slate),var(--cyan)); border-radius:6px; transform-origin:left}
/* simptom */
.symhead{position:relative; margin:-48px -14px 12px; padding:58px 18px 22px; color:#fff; overflow:hidden}
.symhead .bg{position:absolute; inset:0}
.symhead .bg.cool{background:linear-gradient(160deg,#3ccfa8,#1fa9b9)}
.symhead .bg.warm{background:linear-gradient(160deg,#f3b24e,#e9793a); opacity:0}
.symhead .symin{position:relative}
.symhead .sm{font-size:12px; opacity:.9}
.symhead .big{font-size:28px}
.sc{font-size:24px}
.scale{position:relative; height:44px; margin-top:12px}
.scale .track{position:absolute; left:0; right:0; top:18px; height:8px; border-radius:8px; background:linear-gradient(90deg,#3ccfa8,#f0c14a 55%,#e9793a 80%,#d1435b)}
.scale .thumb{position:absolute; top:8px; left:20%; width:28px; height:28px; margin-left:-14px; border-radius:50%; background:#fff; box-shadow:0 3px 10px rgba(0,0,0,.25)}
.ticks{display:flex; justify-content:space-between; font-size:10px; color:#8e8e93}
.code{font-family:var(--mono); font-size:10.5px; background:#f3f6fb; color:var(--slate); border-radius:8px; padding:6px 8px}
/* greutate */
.days{display:flex; justify-content:space-between; margin-top:4px}
.days span{width:32px; height:44px; border-radius:12px; display:grid; place-items:center; font-size:11px; font-weight:600; color:#6b7280; line-height:1.1; text-align:center}
.days span.sel{background:var(--ink); color:#fff}
.s-weight .card + .card{margin-top:10px}
.s-weight .card.center{margin-top:10px}
.ruler{position:relative; height:62px; overflow:hidden; margin-top:8px; border-radius:12px; background:#fff}
.tape{position:absolute; top:10px; left:0; height:44px; width:1400px; transform:translateX(-380px);
  background:repeating-linear-gradient(90deg,#9aa3b3 0 1.5px,transparent 1.5px 50px), repeating-linear-gradient(90deg,#c9ced8 0 1.5px,transparent 1.5px 10px);
  background-size:1400px 26px, 1400px 14px; background-repeat:no-repeat}
.needle{position:absolute; left:50%; top:4px; bottom:4px; width:3px; margin-left:-1.5px; border-radius:3px; background:var(--slate)}
.spark{display:block; width:100%; height:84px; margin-top:4px}
.spark-line{stroke-dasharray:420; stroke-dashoffset:0}
html.js .spark-line{stroke-dashoffset:420}
/* scanare */
.s-scan{padding:0; overflow:hidden}
.viewfinder{position:absolute; inset:0; background:#0b1326 radial-gradient(60% 50% at 50% 45%, rgba(68,97,158,.35), transparent 70%); display:grid; place-items:center}
.medbox3d{position:relative; width:150px; height:96px; transform:rotate(-8deg); filter:drop-shadow(0 18px 24px rgba(0,0,0,.5))}
.medbox3d .face{position:absolute; inset:0; background:#fff; border-radius:8px; padding:12px 12px 10px 20px; color:#0e1a33; overflow:hidden}
.medbox3d .band{position:absolute; left:0; top:0; bottom:0; width:12px; background:var(--slate)}
.medbox3d b{display:block; font:700 17px/1.1 var(--app)} .medbox3d small{display:block; font-size:10px; color:#6b7280; margin-top:4px}
.scanframe{position:absolute; left:50%; top:45%; width:210px; height:150px; translate:-50% -50%; opacity:0}
.scanframe i{position:absolute; width:22px; height:22px; border:3px solid #fff; border-radius:3px}
.scanframe i:nth-child(1){left:0; top:0; border-right:0; border-bottom:0} .scanframe i:nth-child(2){right:0; top:0; border-left:0; border-bottom:0}
.scanframe i:nth-child(3){left:0; bottom:0; border-right:0; border-top:0} .scanframe i:nth-child(4){right:0; bottom:0; border-left:0; border-top:0}
.scanframe .beam{position:absolute; left:6px; right:6px; top:0; height:2px; background:var(--cyan); box-shadow:0 0 12px var(--cyan); opacity:0}
.found{position:absolute; left:50%; top:calc(45% + 92px); translate:-50% 0; white-space:nowrap; padding:8px 12px; border-radius:10px; background:#fff; color:var(--ink); font:500 12px/1 var(--mono); opacity:0; transform:translateY(8px)}
.found b{color:var(--slate); font-weight:500}
.viewfinder .hint{position:absolute; left:0; right:0; bottom:96px; text-align:center; color:rgba(255,255,255,.7); font-size:12px}
.medlist{position:absolute; inset:0; padding:48px 14px 0; background:var(--app-bg); transform:translateY(100%); z-index:2}
html.no-js .medlist, html.no-motion .medlist{transform:none}
.medlist .card{margin-top:12px}
.box{position:relative; height:92px; border-radius:10px; background:#fff; border:1px solid #e6e9ef; overflow:hidden; padding:10px 12px; box-shadow:0 10px 18px -12px rgba(0,0,0,.35)}
.box::before{content:""; position:absolute; left:0; top:0; bottom:0; width:10px; background:var(--c)}
.box::after{content:""; position:absolute; right:-18px; top:-18px; width:70px; height:70px; border-radius:50%; background:var(--c); opacity:.16}
.box .n{font-weight:700; font-size:15px; padding-left:8px} .box .d{font-size:11px; color:#6b7280; padding-left:8px}
.box .atc{position:absolute; left:20px; bottom:9px; font:500 9.5px/1 var(--mono); color:#6b7280}
.li{display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-top:1px solid #eef0f4; font-size:13px}
.li:first-of-type{border-top:0}
.li .ref{font-size:11.5px; color:#6b7280} .li .ref b{color:#111827} .li .ref em{font-style:normal; color:var(--mint-d)}
.check{width:22px; height:22px; border-radius:50%; border:2px solid #d4d8e0; display:grid; place-items:center}
.check.done{background:var(--mint); border-color:var(--mint)}
/* dosar */
.s-rec{overflow:hidden}
.recscroll{height:462px; overflow:hidden}
.recin{display:grid; gap:10px}
.sum{border-radius:18px; padding:14px; color:#fff; background:linear-gradient(150deg,#2f4677,#5e2a83); transform-origin:top; overflow:hidden}
.sum .kicker{color:rgba(255,255,255,.7)}
.sum .nums{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin-top:8px}
.sum .nums b{font-size:24px; display:block; line-height:1}
.sum .nums span{font-size:10.5px; opacity:.8}
.sum .chips{margin-top:10px}
.sum .chips span{font-size:10px; background:rgba(255,255,255,.14); border-radius:99px; padding:3px 8px}
/* vitale */
.vstack{display:grid; gap:6px}
.vcard{position:relative; background:#fff; border-radius:14px; padding:8px 12px; display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; box-shadow:0 1px 2px rgba(0,0,0,.03)}
.vcard .k{font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8e8e93}
.vcard b{grid-row:1/3; font-size:16px; text-align:right; font-weight:700; letter-spacing:-.02em; color:#111827}
.vcard .src{font-size:10.5px; color:#8e8e93}
.vcard .lo{grid-column:1/-1; font-size:9.5px; color:var(--slate)}
.vcard[data-flash="1"]{box-shadow:0 0 0 2px var(--mint), 0 0 0 8px rgba(60,207,168,.18)}
html.js .s-vitals .vcard, html.js .dflow .vcard{opacity:0}
/* eticheta care „iese” din telefon */
.emit{position:absolute; left:calc(100% - 22px); top:22%; z-index:6; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 18px 36px -18px rgba(14,26,51,.35); width:max-content; max-width:240px}
.emit .mono{display:block; color:var(--ink-3); font-size:10.5px}
.emit b{font:500 13px/1.35 var(--mono); color:var(--slate); display:block; margin-top:3px}
.emit .dot{position:absolute; left:-4px; top:50%; width:8px; height:8px; margin-top:-4px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 5px rgba(31,199,217,.16)}
html.js .emit{opacity:0}


/* stările de pornire ale actului (doar cu JS) */
html.js .phone-wrap{opacity:0}
html.js .intro-step{opacity:0; visibility:hidden}
html.js .hero-text .lede, html.js .hero-text .cta, html.js .facts{opacity:0}
html.js .phone-wrap{z-index:4}

/* actul, static (fără JS sau fără mișcare): hero + telefon + aparate, unul sub altul */
html.no-js .act-pin, html.no-motion .act-pin{height:auto; min-height:0; overflow:visible; padding-bottom:60px}
html.no-js .act-grid, html.no-motion .act-grid{height:auto; grid-template-rows:auto auto auto auto; row-gap:40px; padding-top:calc(var(--nav) + 40px)}
html.no-js .col-text, html.no-motion .col-text{display:contents}
html.no-js .col-stage, html.no-motion .col-stage{display:contents}
html.no-js .hero-text, html.no-motion .hero-text{grid-area:1/1/2/3}
html.no-js .mark, html.no-motion .mark{grid-area:2/1/3/3}
html.no-js .facts, html.no-motion .facts{grid-area:3/1/4/3}
html.no-js .col-text, html.no-motion .col-text{display:block; grid-area:4/1/5/2}
html.no-js .col-stage, html.no-motion .col-stage{display:block; grid-area:4/2/5/3}
html.no-js .intro-step, html.no-motion .intro-step{opacity:1; visibility:visible}
html.no-js .phone-wrap, html.no-motion .phone-wrap{position:relative; left:auto; top:auto; translate:0; opacity:1; margin:0 auto}
html.no-js .scroll-hint, html.no-motion .scroll-hint{display:none}
html.no-js .sheet, html.no-motion .sheet{display:none}

/* mobil */
@media (max-width:760px){
  .act-pin{min-height:0}
  .act-grid{grid-template-columns:1fr; grid-template-rows:auto auto; align-content:start; align-items:center; row-gap:26px; padding-top:calc(var(--nav) + 24px); padding-bottom:0}
  .hero-text{grid-area:1/1/2/2; padding-top:0}
  .hero-visual{grid-area:2/1/3/2; height:auto}
  .facts{display:none}
  .col-text{grid-area:1/1/3/2; align-items:start; align-self:stretch; min-height:0; padding-top:6px}
  .col-stage{grid-area:1/1/3/2; align-self:stretch; min-height:0; height:100%}
  .col-stage .phone-wrap{top:calc(50% + 100px)}
  .hero-text h1{font-size:clamp(34px,9.5vw,48px); margin-top:12px}
  .hero-text .lede{margin-top:14px; font-size:15px}
  .hero-text .cta{margin-top:18px}
  .steps{gap:0}
  .step{padding:8px 0 8px 14px}
  .step .h{font-size:19px}
  .step .d{font-size:14px}
  .intro-step .h{font-size:22px}
  .intro-step .d2{display:none}
  .mark{width:min(200px,44vw)}
  .tag{display:none}
  .phone{--h:min(470px, calc(100svh - 330px))}
  .emit{left:auto; right:-4px; top:auto; bottom:9%; max-width:200px}
  .scroll-hint{bottom:12px}
  html.no-js .act-grid, html.no-motion .act-grid{grid-template-rows:none}
  html.no-js .hero-text, html.no-motion .hero-text, html.no-js .mark, html.no-motion .mark, html.no-js .col-text, html.no-motion .col-text, html.no-js .col-stage, html.no-motion .col-stage{grid-area:auto}
}


/* ============ blocurile: ecranele aplicației și aparatele ============ */
.intro-step{max-width:30em}
.intro-step .h{font-size:clamp(26px,2.6vw,36px); font-weight:650; margin-top:16px}
.intro-step .d{margin-top:12px; font-size:17px; color:var(--ink-2)}
.intro-step .d2{margin-top:18px; font:500 12px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.tiles-sec .scene-head{padding-bottom:28px}
.tiles{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; padding-bottom:56px}
.tile{position:relative; border-radius:28px; background:var(--mist); overflow:hidden; min-height:560px; display:grid; grid-template-rows:auto minmax(0,1fr); isolation:isolate}
.tile-text{padding:30px 32px 0; position:relative; z-index:2}
.tile-link{display:inline-flex; align-items:center; gap:4px; margin-top:10px; font:600 14px/1 var(--body); color:var(--slate); text-decoration:none; position:relative; z-index:3}
.tile-link:hover{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
.tile-text .n{font:500 11px/1 var(--mono); letter-spacing:.14em; color:var(--slate)}
.tile-text h3{font-size:clamp(22px,2.1vw,30px); font-weight:650; margin-top:10px; line-height:1.1}
.tile-text p{color:var(--ink-2); font-size:15.5px; max-width:30em; margin-top:8px}
.tile-text .tag{position:static; display:inline-block; margin-top:14px; font-size:11px; padding:6px 9px; box-shadow:none}
.tile-art{position:relative; min-height:320px}
.tile-art .phone{--h:min(600px,66vw); position:absolute; left:50%; top:22px; translate:-50% 0; box-shadow:none}
.tile-art .phone .phone-front{box-shadow:0 30px 60px -36px rgba(14,26,51,.5)}
.tile.wide{grid-column:1/-1; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:none; align-items:center; min-height:560px}
.tile.wide .tile-text{padding:40px 48px; align-self:center}
.tile.wide .tile-text p{max-width:26em}
.tile.wide .tile-art{height:100%; min-height:520px}
.tile.wide .tile-art .phone{top:40px}
.feel-big .dots{margin:4px 0 12px}
.feel-big .row{margin-top:2px}
.s-blank .card{margin-top:4px}
/* aparatele: poza, afișajul, traseul, cardul */
.dflow{position:relative; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:12px; align-items:center; padding:8px 24px 28px; min-height:300px}
.gadget{position:relative; width:100%; aspect-ratio:1; max-width:300px; justify-self:center}
.gadget img{width:100%; height:100%; object-fit:contain}
.gadget .disp{position:absolute; display:grid; place-items:center; align-content:center; border-radius:8px; background:rgba(8,14,30,.78); color:#dff9ff; font:600 clamp(10px,1vw,15px)/1.1 var(--mono); text-align:center; box-shadow:0 0 0 1px rgba(31,199,217,.25) inset}
.gadget .disp b{font-weight:600; font-size:1em} .gadget .disp small{font-size:.62em; opacity:.8; margin-top:2px}
.gadget[data-g=bp] .disp{left:57%; top:33.5%; width:23%; height:17%}
.gadget[data-g=glu] .disp{left:53%; top:21%; width:21%; height:19%}
.gadget[data-g=spo2] .disp{left:47%; top:24%; width:24%; height:17%; transform:rotate(-16deg)}
.gadget[data-g=temp] .disp{left:59%; top:27%; width:16%; height:9%; font-size:clamp(9px,.8vw,12px); transform:rotate(-18deg)}
.gadget[data-g=wt] .disp{left:13%; top:38%; width:20%; height:17%; border-radius:22%}
.rings{position:absolute; left:var(--rx,68%); top:var(--ry,42%); width:0; height:0}
.rings i{position:absolute; left:-40px; top:-40px; width:80px; height:80px; border-radius:50%; border:1.5px solid var(--cyan); opacity:0}
.gadget[data-live="1"] .rings i{animation:ring 2.2s ease-out infinite}
.gadget[data-live="1"] .rings i:nth-child(2){animation-delay:.7s} .gadget[data-live="1"] .rings i:nth-child(3){animation-delay:1.4s}
.gadget[data-g=bp] .rings{--rx:68%; --ry:42%} .gadget[data-g=glu] .rings{--rx:63%; --ry:30%} .gadget[data-g=spo2] .rings{--rx:59%; --ry:33%} .gadget[data-g=temp] .rings{--rx:67%; --ry:31%} .gadget[data-g=wt] .rings{--rx:23%; --ry:46%}
@keyframes ring{from{transform:scale(.3); opacity:.9} to{transform:scale(2.4); opacity:0}}
.dflow .vcard{width:100%; max-width:250px; justify-self:center; padding:12px 14px; grid-template-columns:1fr; gap:2px; box-shadow:0 14px 30px -18px rgba(14,26,51,.4)}
.dflow .vcard b{grid-row:auto; font-size:21px; text-align:left; white-space:nowrap}
.dflow .vcard .k{font-size:10.5px}
.dflow .vcard .src{font-size:10.5px}
.dflow .vcard .lo{font-size:9.5px}
.vcard[data-flash="1"]{box-shadow:0 0 0 2px var(--mint), 0 0 0 8px rgba(60,207,168,.18)}
.hb{position:absolute; left:50%; top:14px; translate:-50% 0; display:flex; align-items:center; gap:7px; padding:6px 10px 6px 7px; border-radius:999px; background:#fff; border:1px solid var(--line); font:600 11px/1 var(--body); color:var(--ink-2); white-space:nowrap; z-index:3; transition:box-shadow .3s, color .3s}
.hb i{width:12px; height:12px; border-radius:50%; background:linear-gradient(135deg,var(--mint),var(--cyan))}
.hb[data-hot="1"]{box-shadow:0 0 0 3px rgba(60,207,168,.25); color:var(--ink)}
.dpath{position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:2; pointer-events:none}
.dpath path{stroke:var(--cyan); stroke-width:1.5; stroke-dasharray:4 7; opacity:.5}
.dpath circle{fill:var(--mint); filter:drop-shadow(0 0 6px var(--cyan)); opacity:0}
.tile.stack .tile-art .phone{top:22px}
html.no-js .dflow .vcard, html.no-motion .dflow .vcard{opacity:1}
html.no-js .found, html.no-motion .found, html.no-js .scanframe, html.no-motion .scanframe{opacity:1; transform:none}
html.no-js .s-sym, html.no-motion .s-sym{opacity:1; visibility:visible}
html.no-js .s-blank, html.no-motion .s-blank{display:none}
html.no-js .sym-thumb, html.no-motion .sym-thumb{transform:translateX(108.8px)}
html.no-js .symhead .warm, html.no-motion .symhead .warm{opacity:1}
@media (max-width:1280px) and (min-width:761px){ .emit{left:auto; right:-8px; top:auto; bottom:12%; max-width:210px} }
@media (max-width:900px){
  .tiles{grid-template-columns:1fr; gap:14px; padding-bottom:40px}
  .tile{min-height:0}
  .tile-art{min-height:300px; height:300px}
  .tile-art .phone{--h:min(560px,120vw)}
  .tile.wide{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); min-height:0}
  .tile.wide .tile-text{padding:30px 24px 0}
  .tile.wide .tile-art{height:320px; min-height:0}
  .tile-text{padding:26px 24px 0}
  .dflow{grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px; padding:6px 16px 22px; min-height:240px}
  .gadget{max-width:200px}
  .hb{font-size:10px; top:6px}
}

/* ============ SCENA 3: multi-platformă, blocuri mari ============ */
.mtile{min-height:0}
.mtile .tile-art{min-height:0; padding:8px 28px 40px; display:grid; place-items:center}
.d3{position:relative; width:100%}
.d3 .dev{position:relative; width:100%}
.d3 .frame{position:relative; width:100%; height:auto; aspect-ratio:var(--ar); z-index:2; pointer-events:none}
.d3 .scr{position:absolute; left:var(--sx,4%); top:var(--sy,3%); width:var(--sw,92%); height:var(--sh,94%); overflow:hidden; background:var(--app-bg); z-index:1; border-radius:var(--sr,4px)}
.d3 .fit{position:absolute; left:0; top:0; width:var(--w); height:var(--h); transform:scale(var(--k,1)); transform-origin:0 0; font-family:var(--app); color:#111827}
.d3.cssframe .frame, html.no-js .d3 .frame{display:none}
.d3.cssframe .scr, html.no-js .d3 .scr{position:relative; left:auto; top:auto; width:100%; aspect-ratio:var(--ar); height:auto; border:8px solid #0f1a30; border-radius:22px; box-shadow:0 40px 70px -40px rgba(14,26,51,.5)}
.d3 .lbl{display:block; margin-top:14px; text-align:center; font:500 11px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.d3 .lbl em{font-style:normal; color:var(--mint-d); text-transform:none; letter-spacing:.02em; opacity:0; transition:opacity .4s}
.d3[data-synced="1"] .lbl em{opacity:1}
.d3[data-glow="1"] .scr, .d3[data-glow="1"] .win{box-shadow:0 0 0 3px var(--mint), 0 0 40px rgba(60,207,168,.45)}
.d3 .scr, .d3 .win{transition:box-shadow .5s}
.mac{--ar:1400/876; max-width:960px}
.ipad{--ar:1200/900; max-width:560px}
.iph{--ar:1024/1536; max-width:270px}
.andr{--ar:1024/1536; max-width:270px}
.fold{--ar:1300/1400; max-width:400px}
.fold.photo{max-width:none; width:100%; min-width:0}
.fold-photo{display:block; width:100%; max-width:100%; height:auto; filter:drop-shadow(0 30px 40px rgba(14,26,51,.22))}
.fold-tile .tile-art{display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; padding:16px 24px 28px}
.fold-tile .tile-text{min-width:0}
@media (max-width:760px){ .fold-tile .tile-art{padding:0 16px 16px} }
.watch-pair{display:flex; align-items:flex-end; justify-content:center; gap:28px; width:100%; padding:0 16px}
.watch{--ar:1000/1200; max-width:230px; flex:1 1 0}
.awatch{--ar:874/1374} .gwatch{--ar:910/1254}
.d3.awatch .scr{border-radius:18% / 16%} .d3.gwatch .scr{border-radius:50%}
.d3.gwatch .fit{padding:34px 34px 30px} .d3.gwatch .wrow{display:none} .d3.gwatch .wcard b{font-size:22px}
.d3.awatch.cssframe .scr, .d3.gwatch.cssframe .scr{border-width:12px}
@media (max-width:760px){ .watch-pair{gap:16px} .watch{max-width:160px} }
.watch .fit{background:#0b0f1a; color:#fff; padding:22px 20px; display:grid; gap:10px; align-content:start}
.d3.watch.cssframe .scr{border-radius:64px; border-width:12px}
.wtop{display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:15px}
.wtop .wtime{color:#3ccfa8; font-family:var(--mono); font-weight:500}
.wcard{position:relative; background:#171c2b; border-radius:18px; padding:12px 14px; display:grid; gap:2px}
.wcard .k{font-size:11px; color:#9aa3b8; text-transform:uppercase; letter-spacing:.06em}
.wcard b{font-size:24px; line-height:1.1; font-weight:700} .wcard b small{font-size:12px; color:#9aa3b8; font-weight:500}
.wline{position:absolute; right:14px; bottom:14px; width:70px; height:22px; background:linear-gradient(90deg,transparent 0 8%,#3ccfa8 8% 10%,transparent 10% 30%,#3ccfa8 30% 32%,transparent 32% 55%,#3ccfa8 55% 57%,transparent 57% 80%,#3ccfa8 80% 82%,transparent 82%) bottom/100% 60% no-repeat; opacity:.9; mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.wrow{display:grid; grid-template-columns:1fr 1fr; gap:10px} .wrow .wcard b{font-size:20px}
.wmed .wchk{position:absolute; right:14px; top:50%; translate:0 -50%; width:34px; height:34px; border-radius:50%; background:#3ccfa8; color:#0b0f1a; display:grid; place-items:center; font-weight:800}
.fold .fit{display:grid; grid-template-columns:150px 1fr; background:var(--app-bg)}
.fold-badge{display:inline-block; margin-bottom:10px; padding:5px 10px; border-radius:999px; background:linear-gradient(90deg,#1FC7D9,#7C3AED); color:#fff; font:600 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase}
.web{max-width:520px; --ar:16/10}
.mac-tile .tile-art{padding-bottom:48px}
/* layout-urile fiecărui dispozitiv */
.gcard{background:#fff; border-radius:12px; padding:10px 11px; position:relative; display:grid; gap:2px}
.gcard .k{font-size:9px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8e8e93}
.gcard b{font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.15}
.gcard .lo{font-size:8.5px; color:var(--slate)}
.gcard svg{display:block; width:100%; height:30px; margin-top:4px}
.sym-row{background:#fff7ee; box-shadow:0 0 0 1.5px var(--amber) inset}
html.js .sym-row{opacity:0; transform:translateY(8px)}
.d3[data-synced="1"] .sym-row{opacity:1; transform:none; transition:opacity .45s, transform .5s cubic-bezier(.2,.8,.2,1)}
.iph .fit, .andr .fit{padding:44px 10px 0; display:grid; gap:8px; align-content:start; background:var(--app-bg)}
.iph .top, .andr .top{display:flex; justify-content:space-between; font-size:13px; font-weight:700; padding:0 4px}
.iph .gnav{left:12px; right:12px; bottom:14px; height:54px}
.mnav{position:absolute; left:0; right:0; bottom:0; height:64px; background:#fff; border-top:1px solid #e6e9ef; display:flex; align-items:center; justify-content:space-around; padding:0 20px 8px}
.mnav i{width:52px; height:26px; border-radius:13px; background:#e3e7ee; display:block} .mnav i.on{background:#dfe7f6}
.mnav .fab{position:absolute; right:14px; top:-30px; width:52px; height:52px; border-radius:16px; background:var(--slate); color:#fff; display:grid; place-items:center; font-size:24px; box-shadow:0 8px 20px -8px rgba(68,97,158,.7)}
.ipad .fit{display:grid; grid-template-columns:150px 1fr; background:var(--app-bg)}
.pside{background:#fff; border-right:1px solid #eceef3; padding:18px 12px; display:grid; align-content:start; gap:10px}
.pside .pname{font-weight:700; font-size:14px; margin-bottom:8px}
.pside span:not(.pname){height:10px; border-radius:5px; background:#e1e5ec; display:block} .pside span.on{background:var(--slate)}
.pmain{padding:16px; display:grid; gap:10px; align-content:start}
.mac .fit{background:#fff}
.mbar{height:28px; display:flex; align-items:center; gap:7px; padding:0 12px; background:#f5f6f9; border-bottom:1px solid #eceef3; font:600 11px/1 var(--app); color:#6b7280}
.mbar i{width:11px; height:11px; border-radius:50%; background:#ff5f57} .mbar i:nth-child(2){background:#febc2e} .mbar i:nth-child(3){background:#28c840}
.mbar span{margin-left:auto; margin-right:auto}
.mside{position:absolute; left:0; top:28px; bottom:0; width:170px; background:rgba(247,248,251,.9); border-right:1px solid #eceef3; padding:14px 12px; display:grid; align-content:start; gap:10px}
.mside > span{height:10px; border-radius:5px; background:#e1e5ec; display:block} .mside > span.on{background:var(--slate)}
.badges{display:flex; gap:6px; margin-bottom:8px}
.bd{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font:700 12px/1 var(--app); color:#fff; background:#c7cdd8}
.bd[data-p=ana]{background:var(--slate)} .bd[data-p=mihai]{background:var(--cyan)} .bd[data-p=buni]{background:var(--violet)}
.bd.on{box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--slate); transform:scale(1.08)}
.mmain{position:absolute; left:170px; right:0; top:28px; bottom:0; padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; background:var(--app-bg)}
.mmain .gcard{background:rgba(255,255,255,.85)}
.mmain .sym-row{grid-column:1/-1}
.web .win{border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(14,26,51,.45); overflow:hidden}
.web .url{height:28px; display:flex; align-items:center; padding:0 10px; gap:6px; background:#f5f6f9; border-bottom:1px solid #eceef3; font:500 10px/1 var(--mono); color:var(--ink-3)}
.web .url i{width:9px; height:9px; border-radius:50%; background:#dfe3ea} .web .url span{flex:1; background:#fff; border-radius:6px; padding:5px 8px; margin-left:4px}
.wscr{display:grid; grid-template-columns:60px 1fr; height:230px; background:var(--app-bg)}
.wnav{background:#fff; border-right:1px solid #eceef3; padding:12px 10px; display:grid; align-content:start; gap:8px}
.wnav span{height:8px; border-radius:4px; background:#e1e5ec; display:block} .wnav span.on{background:var(--slate)}
.wmain{padding:12px; display:grid; gap:8px; align-content:start}
.wcard{background:#fff; border-radius:10px; padding:9px 11px; display:grid; gap:1px; font-family:var(--app)}
.wcard .k{font-size:8px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:#8e8e93}
.wcard b{font-size:15px; font-weight:700}
.wcard .lo{font-size:8px; color:var(--slate)}
.wcard.prof{display:flex; align-items:center; gap:8px}
.wcard .av{width:22px; height:22px; border-radius:50%; background:var(--slate); color:#fff; display:grid; place-items:center; font:700 10px/1 var(--app)}
.wcard.sym-row{box-shadow:0 0 0 1.5px var(--amber) inset}
html.no-js .sym-row, html.no-motion .sym-row{opacity:1; transform:none}
html.no-js .d3 .lbl em, html.no-motion .d3 .lbl em{opacity:1}
@media (max-width:900px){
  .mtile .tile-art{padding:6px 16px 30px}
  .iph, .andr{max-width:220px}
}

/* ============ SCENA 4: drumul datelor ============ */
.chain{position:relative; isolation:isolate}
.chain-bg{position:absolute; inset:0; z-index:-1; background:linear-gradient(var(--bg), var(--mist) 30%, var(--mist)); opacity:0}
html.no-js .chain-bg, html.no-motion .chain-bg{opacity:1}
.chain-pin{align-items:center; overflow:hidden}
.track{position:relative; display:flex; gap:clamp(20px,3vw,44px); padding-inline:max(var(--gutter), calc((100vw - 1320px)/2 + var(--gutter))); width:max-content; will-change:transform}
.node{position:relative; z-index:1; width:min(clamp(240px,24vw,300px),44svh); display:grid; gap:10px; align-content:start; transition:filter .6s, opacity .6s}
.node .art{width:100%; aspect-ratio:1; display:grid; place-items:center; border-radius:28px; overflow:hidden; background:var(--mist-2); transition:transform .8s cubic-bezier(.34,1.56,.64,1)}
.node .art img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply}
.node .n{font:500 11px/1 var(--mono); letter-spacing:.12em; color:var(--ink-3)}
.node h3{font-size:22px; font-weight:650; letter-spacing:-.02em}
.node p{font-size:15px; color:var(--ink-2); line-height:1.45}
.node .chip{justify-self:start; font:500 11px/1 var(--mono); padding:6px 9px; border-radius:8px; background:#fff; border:1px solid var(--line); color:var(--slate)}
html.js .node{filter:grayscale(1); opacity:.42}
html.js .node .art{transform:scale(.88)}
html.js .node.lit{filter:none; opacity:1}
html.js .node.lit .art{transform:none}
.wire{position:absolute; z-index:0; height:3px; border-radius:3px; background:repeating-linear-gradient(90deg, rgba(68,97,158,.22) 0 6px, transparent 6px 12px)}
.wire b{position:absolute; inset:0; border-radius:3px; background:linear-gradient(90deg,var(--slate),var(--cyan),var(--mint)); transform-origin:left; transform:scaleX(0)}
.wire i{position:absolute; top:50%; left:0; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 6px rgba(60,207,168,.2), 0 0 22px rgba(31,199,217,.7)}
.fhir-card{position:absolute; z-index:3; left:0; top:0; translate:-50% calc(-100% - 14px); padding:8px 11px 8px 24px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -16px rgba(14,26,51,.4); white-space:nowrap; opacity:0}
.fhir-card .dot{position:absolute; left:10px; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%; background:var(--cyan)}
.fhir-card b{display:block; font:500 12px/1.2 var(--mono); color:var(--slate)}
.fhir-card small{display:block; font:400 10px/1.3 var(--mono); color:var(--ink-3)}
.toggle{display:inline-flex; align-items:center; gap:10px; justify-self:start; padding:6px 10px 6px 6px; border-radius:999px; background:#fff; border:1px solid var(--line); font:600 13px/1 var(--body); color:var(--ink-2)}
.toggle .sw{position:relative; width:38px; height:22px; border-radius:11px; background:#d6dbe5; transition:background .35s}
.toggle .sw i{position:absolute; left:2px; top:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.toggle[data-on="1"] .sw{background:var(--mint)} .toggle[data-on="1"] .sw i{transform:translateX(16px)} .toggle[data-on="1"]{color:var(--mint-d); border-color:rgba(60,207,168,.5)}
html.no-js .toggle, html.no-motion .toggle{color:var(--mint-d)} html.no-js .toggle .sw, html.no-motion .toggle .sw{background:var(--mint)} html.no-js .toggle .sw i, html.no-motion .toggle .sw i{transform:translateX(16px)}
html.no-js .chain-pin, html.no-motion .chain-pin{height:auto; overflow-x:auto; padding-block:24px 40px}
html.no-js .wire, html.no-motion .wire, html.no-js .fhir-card, html.no-motion .fhir-card{display:none}
@media (max-width:760px){ .node{width:72vw} .chain-pin{align-items:center} .fhir-card{display:none} }

/* ============ SCENA 5: nucleul, ca blocuri ============ */
.fhir-grid{position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:center; padding:8px 28px 30px; min-height:300px}
.fhir-grid .fc{display:grid; gap:1px; padding:9px 12px; border-radius:10px; background:#fff; border:1px solid var(--line); box-shadow:0 10px 24px -16px rgba(14,26,51,.35)}
.fc b{font:500 12px/1.2 var(--mono); color:var(--slate)} .fc small{font:400 10.5px/1.2 var(--mono); color:var(--ink-3)}
.fhir-grid .nucleus{position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px; border-radius:50%; background:#fff; box-shadow:0 14px 34px -16px rgba(14,26,51,.45), 0 0 0 1px var(--line); display:grid; place-items:center; z-index:2}
.fhir-grid .nucleus img{width:42px; height:42px; mix-blend-mode:multiply; position:relative; z-index:2}
.fhir-grid .nucleus .glow{position:absolute; inset:-40%; border-radius:50%; background:radial-gradient(circle, rgba(31,199,217,.35), rgba(60,207,168,.1) 50%, transparent 70%)}
html.js .fhir-grid .fc{opacity:0}
.ips-wrap{padding:0 24px 28px; display:grid; align-content:center; min-height:300px}
.ips{background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:0 24px 50px -32px rgba(14,26,51,.45); padding:14px; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ips-head{grid-column:1/-1; display:grid; gap:2px; padding-bottom:8px; border-bottom:1px solid var(--line)}
.ips-head b{font:650 17px/1.1 var(--display); letter-spacing:-.02em}
.ips-head .mono{color:var(--ink-3); font-size:10.5px}
.ips-sec{display:grid; gap:2px; padding:8px 10px; border-radius:10px; background:var(--mist)}
.ips-sec .k{font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--slate)}
.ips-sec b{font-size:12.5px; font-weight:600; line-height:1.3}
html.js .ips-sec{opacity:0}
.gate{position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr) minmax(0,1fr); gap:20px; align-items:center; padding:8px 36px 36px; min-height:300px}
.partner{width:min(300px,100%); justify-self:end; background:#fff; border-radius:18px; border:1px solid var(--line); box-shadow:0 24px 50px -30px rgba(14,26,51,.5); padding:16px; display:grid; gap:4px}
.partner .k{font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.partner b{font:650 21px/1.1 var(--display); letter-spacing:-.02em}
.partner .ask{font-size:14px; color:var(--ink-2)}
.partner .lo{font-size:10.5px; color:var(--slate); margin-top:4px}
.door{position:relative; justify-self:center; width:min(240px,100%); aspect-ratio:1; display:grid; place-items:center}
.door img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:opacity .6s, transform .8s cubic-bezier(.2,.8,.2,1)}
.door .consent{opacity:0; transform:scale(.8)}
.door[data-open="1"] .vault, html.no-js .door .vault, html.no-motion .door .vault{opacity:0; transform:scale(1.1)}
.door[data-open="1"] .consent, html.no-js .door .consent, html.no-motion .door .consent{opacity:1; transform:none}
.approve{position:absolute; left:50%; bottom:-6px; translate:-50% 0; display:inline-flex; align-items:center; gap:10px; padding:8px 14px 8px 8px; border-radius:999px; background:#fff; border:1px solid var(--line); box-shadow:0 14px 30px -16px rgba(14,26,51,.4); font:600 14px/1 var(--body); color:var(--ink-2); white-space:nowrap}
.approve .sw{position:relative; width:40px; height:24px; border-radius:12px; background:#d6dbe5; transition:background .35s}
.approve .sw i{position:absolute; left:2px; top:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.door[data-open="1"] .approve, html.no-js .approve, html.no-motion .approve{color:var(--mint-d); border-color:rgba(60,207,168,.5)}
.door[data-open="1"] .approve .sw, html.no-js .approve .sw, html.no-motion .approve .sw{background:var(--mint)}
.door[data-open="1"] .approve .sw i, html.no-js .approve .sw i, html.no-motion .approve .sw i{transform:translateX(16px)}
.audit{justify-self:start; width:min(340px,100%); background:var(--ink); color:#dfe6f3; border-radius:18px; padding:14px 16px; box-shadow:0 24px 50px -30px rgba(14,26,51,.6)}
.audit .k{display:block; font:500 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--cyan); margin-bottom:8px}
.audit ol{list-style:none; margin:0; padding:0; display:grid; gap:6px; font:400 11.5px/1.4 var(--mono); min-height:6em}
.audit li{opacity:0; transform:translateY(6px); animation:auditIn .5s forwards}
.audit li em{font-style:normal; color:var(--mint)}
@keyframes auditIn{to{opacity:1; transform:none}}
@media (max-width:900px){
  .gate{grid-template-columns:1fr; gap:14px; padding:6px 20px 26px}
  .partner, .audit{justify-self:center; width:min(340px,100%)}
  .door{width:min(180px,100%)}
  .fhir-grid{padding:6px 18px 24px} .ips-wrap{padding:0 16px 24px}
}

/* ============ SCENA 6: harta Europei (refăcută 29 sep 2026; stările vin din world.js ca data-s="0|1|2") ============ */
.world{background:linear-gradient(var(--bg), var(--mist) 16%, var(--mist) 84%, var(--bg))}
.world-grid{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(24px,4vw,64px); align-items:center}
.world .wsteps .step{position:relative}
html.js .world .wsteps .step.on::after{content:""; position:absolute; left:-2px; top:0; width:2px; height:0; background:var(--cyan); animation:wfill 5.2s linear forwards}
@keyframes wfill{to{height:100%}}
.world-legend{margin-top:18px; color:var(--ink-2); font-size:14.5px; min-height:1.6em}
.world-legend p{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0}
.world-legend p[hidden]{display:none}
.world-legend span{display:inline-flex; align-items:center; gap:8px}
.world-legend i{display:inline-block; width:10px; height:10px; border-radius:50%; background:#7fd8ff; box-shadow:0 0 0 2px var(--ink)}
.world-legend i.ok{background:var(--mint)} .world-legend i.off{background:transparent; box-shadow:none; border:1.5px solid var(--ink-3)}
.world-legend i.line{width:22px; height:3px; border-radius:2px; box-shadow:none; background:linear-gradient(90deg,var(--cyan),var(--mint))}
.wmap{position:relative; width:100%; max-width:720px; aspect-ratio:1; justify-self:center; border-radius:32px; overflow:hidden; background:radial-gradient(120% 90% at 70% 20%,#1b3563 0%,var(--ink) 65%)}
.wmap canvas,.wmap svg{position:absolute; inset:0; width:100%; height:100%}
.wmap .arc{fill:none; stroke:#7fd8ff; stroke-opacity:.5; stroke-width:2.2; stroke-linecap:round; transition:stroke .6s, stroke-opacity .6s, opacity .6s}
.wmap .pkt{fill:#fff; transition:opacity .5s}
.wmap .n{transition:opacity .6s}
.wmap .n .core{fill:#7fd8ff; stroke:var(--ink); stroke-width:3; transition:fill .6s}
.wmap .n .halo{fill:var(--cyan); opacity:0; transform-box:fill-box; transform-origin:center; transition:opacity .6s}
.wmap .lbl{font:500 19px var(--mono); fill:rgba(255,255,255,.72); paint-order:stroke; stroke:rgba(14,26,51,.85); stroke-width:5px; stroke-linejoin:round; transition:opacity .6s}
.wmap .lbl.key{font-weight:600; fill:#fff}
.wmap .heroarc{fill:none; stroke:var(--mint); stroke-width:5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100}
@keyframes wpulse{0%,100%{transform:scale(.7)} 50%{transform:scale(1.25)}}
/* 0 · un format: toată rețeaua */
.world[data-s="0"] .n .halo{opacity:.18; animation:wpulse 2.6s ease-in-out infinite}
/* 1 · tu decizi: doar instituțiile aprobate rămân aprinse */
.world[data-s="1"] .n:not(.ok){opacity:.28}
.world[data-s="1"] .n.ok .core{fill:var(--mint)}
.world[data-s="1"] .n.ok .halo{fill:var(--mint); opacity:.28; animation:wpulse 2.2s ease-in-out infinite}
.world[data-s="1"] .arc:not(.ok),.world[data-s="1"] .pkt:not(.ok){opacity:.08}
.world[data-s="1"] .arc.ok{stroke:var(--mint); stroke-opacity:.8}
/* 2 · rezumatul trece granița: doar Sibiu → Wien */
.world[data-s="2"] .arc,.world[data-s="2"] .pkt{opacity:.06}
.world[data-s="2"] .n:not(.key){opacity:.18}
.world[data-s="2"] .lbl:not(.key){opacity:.25}
.world[data-s="2"] .n.key .core{fill:var(--mint)}
.world[data-s="2"] .n.key .halo{fill:var(--mint); opacity:.3; animation:wpulse 2s ease-in-out infinite}
.world[data-s="2"] .heroarc{stroke-dashoffset:0; transition:stroke-dashoffset 1.3s cubic-bezier(.4,.1,.2,1) .2s}
.packet{position:absolute; z-index:3; width:210px; padding:11px 12px; border-radius:14px; background:rgba(255,255,255,.96); border:1px solid var(--line); box-shadow:0 22px 40px -22px rgba(0,0,0,.6); transform:translate(-50%, calc(-100% - 26px)) translateY(8px); opacity:0; transition:opacity .45s, transform .45s; pointer-events:none}
.world[data-s="2"] .packet{opacity:1; transform:translate(-50%, calc(-100% - 26px)); transition-delay:1.2s}
.packet .top{display:flex; align-items:center; gap:9px}
.packet .th{width:32px; height:32px; border-radius:9px; background:#eaf1f8; overflow:hidden; flex:none}
.packet .th img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply}
.packet b{font:600 13px/1.25 var(--body); display:block}
.packet .mono{color:var(--ink-3); font-size:10.5px}
.packet ul{list-style:none; margin:8px 0 0; padding:8px 0 0; border-top:1px solid var(--line); display:grid; gap:4px; font-size:12px; color:var(--ink-2)}
.packet li{display:flex; justify-content:space-between}
.packet li em{font-style:normal; color:var(--mint-d); font-weight:600}
@media (prefers-reduced-motion:reduce){ .world .n .halo{animation:none!important} .world .heroarc,.world .packet{transition:none!important} }
@media (max-width:900px){
  .world-grid{grid-template-columns:1fr}
  .wmap .lbl{font-size:24px}
  /* pe ecrane înguste cardul nu mai încape deasupra Vienei: stă jos în stânga, peste Atlantic, departe de arcul Sibiu → Wien */
  .packet{width:180px; left:12px!important; top:auto!important; bottom:12px; transform:translateY(8px)}
  .world[data-s="2"] .packet{transform:none}
}

/* ============ SCENA 7: dezvoltatori ============ */
.dev-grid{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:28px; padding-bottom:60px; align-items:start}
.devbox{border-radius:22px; background:var(--ink); color:#dfe6f3; padding:20px 22px 22px; position:relative; overflow:hidden}
.tabs{display:flex; gap:6px; margin-bottom:14px}
.tabs button{border:1px solid rgba(255,255,255,.14); background:transparent; color:#b9c6de; border-radius:999px; padding:7px 13px; font:600 12.5px/1 var(--body); cursor:pointer}
.tabs button.on{background:#fff; color:var(--ink); border-color:#fff}
.devbox .code{display:none; margin:0; font:400 12.5px/1.7 var(--mono); white-space:pre-wrap; color:#b9c6de; min-height:15em; background:none; padding:0; border-radius:0}
.devbox .code.on{display:block}
.devbox .code .k{color:var(--cyan)} .devbox .code .s{color:var(--mint)} .devbox .code .c{color:#6f7f9c}
.devbox .code .cursor{display:inline-block; width:.6em; height:1.1em; vertical-align:-.15em; background:var(--cyan); animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.dev-links{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:18px; font-size:14px}
.dev-cta{display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:12px 22px; border-radius:999px; background:linear-gradient(135deg,#22B8E8,#2563EB 55%,#7C3AED); color:#fff; font-weight:600; font-size:15px; text-decoration:none; box-shadow:0 10px 30px -10px rgba(37,99,235,.7); transition:transform .2s ease, box-shadow .2s ease}
.dev-cta::after{content:"→"; transition:transform .2s ease}
.dev-cta:hover{transform:translateY(-1px); box-shadow:0 14px 34px -10px rgba(124,58,237,.75)}
.dev-cta:hover::after{transform:translateX(3px)}
.dev-links a{color:#fff; font-weight:600; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3)}
.dev-side{display:grid; gap:20px}
.feed{border-radius:18px; background:#fff; border:1px solid var(--line); padding:14px 16px; box-shadow:0 20px 40px -30px rgba(14,26,51,.35)}
.feed .fh{display:flex; align-items:center; gap:8px; font:600 13px/1 var(--body); margin-bottom:10px}
.feed .fh .mono{margin-left:auto; color:var(--ink-3)}
.feed .live{width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 0 rgba(60,207,168,.5); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(60,207,168,.5)} 70%{box-shadow:0 0 0 8px rgba(60,207,168,0)} 100%{box-shadow:0 0 0 0 rgba(60,207,168,0)}}
.feed ol{list-style:none; margin:0; padding:0; display:grid; gap:6px; font:400 11.5px/1.35 var(--mono); min-height:8.4em}
.feed li{display:grid; grid-template-columns:auto 1fr; gap:2px 10px; padding:7px 9px; border-radius:10px; background:var(--mist); animation:auditIn .5s forwards; opacity:0}
.feed li b{font-weight:500; color:var(--slate)} .feed li span{color:var(--ink-2)} .feed li small{grid-column:1/-1; color:var(--ink-3); font-size:10px}
.dev-art{border-radius:22px; background:#fff; overflow:hidden; aspect-ratio:4/3}
.dev-art img{width:100%; height:100%; object-fit:cover}
@media (max-width:900px){ .dev-grid{grid-template-columns:1fr} .dev-art{aspect-ratio:16/10} }

/* ============ SCENA 8: încredere + descărcare ============ */
.facts3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px}
.fact{display:grid; gap:10px; align-content:start}
.fact .art{aspect-ratio:1; border-radius:28px; background:var(--mist); overflow:hidden}
.fact .art img{width:100%; height:100%; object-fit:cover; mix-blend-mode:multiply}
.fact h3{font-size:22px; font-weight:650; margin-top:6px}
.fact p{font-size:15px; color:var(--ink-2)}
@media (max-width:760px){ .facts3{grid-template-columns:1fr} .fact{grid-template-columns:120px 1fr; gap:4px 16px} .fact .art{grid-row:1/3; border-radius:20px} }
/* Banner pentru clinici, deasupra titlului din hero: îndemn către platform.anpheros.com */
.clinic-banner{display:flex; position:relative; left:50%; translate:-50% 0; width:max-content; max-width:calc(100vw - 48px); align-items:center; gap:14px; margin:0 0 26px; padding:7px 7px 7px 16px; border-radius:999px; background:rgba(255,255,255,.78); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line); box-shadow:0 12px 32px -20px rgba(14,26,51,.45); color:var(--ink-2); font-size:14px; line-height:1.35; text-align:left; text-decoration:none; transition:border-color .2s, box-shadow .2s, transform .2s}
.clinic-banner:hover{border-color:var(--slate); translate:-50% -1px; box-shadow:0 16px 36px -18px rgba(37,99,235,.45)}
.clinic-banner b{color:var(--ink); font-weight:600}
.cb-dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 4px rgba(60,207,168,.22); animation:cbPulse 2.4s ease-in-out infinite}
@keyframes cbPulse{0%,100%{box-shadow:0 0 0 4px rgba(60,207,168,.22)} 50%{box-shadow:0 0 0 7px rgba(60,207,168,.08)}}
.cb-cta{flex:none; display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 15px; border-radius:999px; background:linear-gradient(135deg,#22B8E8,#2563EB 55%,#7C3AED); color:#fff; font-weight:600; font-size:13.5px; white-space:nowrap; box-shadow:0 8px 22px -10px rgba(37,99,235,.7)}
.cb-cta::after{content:"→"; transition:transform .2s ease}
.clinic-banner:hover .cb-cta::after{transform:translateX(3px)}
@media (max-width:760px){ .clinic-banner{left:auto; translate:none; width:auto; flex-direction:column; gap:10px; padding:12px 14px; border-radius:22px; text-align:center; font-size:13.5px; margin-bottom:20px} .clinic-banner:hover{translate:none} .cb-dot{display:none} .cb-cta{width:100%; justify-content:center} }
@media (max-height:700px){ .clinic-banner{margin-bottom:14px; font-size:13px} .cb-cta{height:30px} }
.get{position:relative; overflow:hidden}
.get-grid{padding-block:60px 80px; display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:48px; align-items:center}
.get h2{font-size:clamp(40px,6vw,84px); margin-top:18px}
.get .lede{margin-top:18px; color:var(--ink-2); max-width:32em}
.stores{display:flex; flex-wrap:wrap; gap:10px; margin-top:32px}
.phone-end{justify-self:center}
.phone-end .mini{--h:min(300px,40vh); height:var(--h); aspect-ratio:300/640; position:relative; border-radius:calc(var(--h)*.075); padding:calc(var(--h)*.016); background:linear-gradient(145deg,#2a3a63,#0b1326); box-shadow:0 50px 80px -40px rgba(14,26,51,.45)}
.phone-end .glass{display:grid; place-items:center; align-content:center; gap:10px; background:#05080f}
.phone-end .app-icon{width:36%; background-color:#fff}
.phone-end .mono{color:rgba(255,255,255,.65); font-size:9px}
@media (max-width:820px){ .get-grid{grid-template-columns:1fr; padding-block:40px 60px} .phone-end{display:none} }
.foot{border-top:1px solid var(--line); padding-block:24px 40px; color:var(--ink-3); font-size:13px}
.foot .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px 24px}
.foot-links{display:flex; flex-wrap:wrap; gap:8px 16px}
.foot-links a{text-decoration:none} .foot-links a:hover{color:var(--ink)}

/* ---------- mișcare redusă ---------- */
@media (prefers-reduced-motion: reduce){
  *{transition-duration:.01ms !important; animation:none !important}
}

/* ── Planuri (secțiunea 09) ─────────────────────────────────────────── */
.plans{position:relative}
.plan-toggle{display:inline-flex; padding:4px; border-radius:999px; background:var(--mist); border:1px solid var(--line); gap:2px; margin-bottom:28px}
.plan-toggle button{height:38px; padding:0 18px; border-radius:999px; border:0; background:transparent; font:600 14px var(--body); color:var(--ink-2); cursor:pointer; display:inline-flex; align-items:center; gap:8px; transition:background .2s,color .2s}
.plan-toggle button.on{background:#fff; color:var(--ink); box-shadow:0 2px 10px -4px rgba(14,26,51,.35)}
.plan-toggle small{font:600 11px/1 var(--mono); color:var(--mint-d); background:rgba(60,207,168,.18); padding:4px 7px; border-radius:999px}
.plan-region{display:inline-flex; align-items:center; gap:8px; margin:0 0 28px 12px; font:500 13px var(--body); color:var(--ink-3); vertical-align:top}
.plan-region select{height:46px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:var(--mist); color:var(--ink); font:600 14px var(--body); cursor:pointer; max-width:100%}
.plan-region select:focus-visible{outline:2px solid var(--mint-d); outline-offset:2px}
@media (max-width:640px){.plan-region{margin:0 0 24px; display:flex; flex-wrap:wrap}}
.plans-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:start}
.plan{position:relative; display:grid; gap:12px; align-content:start; padding:30px 26px 26px; border-radius:28px; background:var(--mist); border:1px solid transparent}
.plan h3{font-size:24px; font-weight:650; margin:0}
.plan-tag{color:var(--ink-2); font-size:15px; margin:0; min-height:2.6em}
.price{display:flex; align-items:baseline; gap:6px; margin:4px 0 0}
.price b{font-size:clamp(30px,3vw,40px); font-weight:650; letter-spacing:-.02em; font-family:var(--display); line-height:1}
.price span{color:var(--ink-3); font-size:14px}
.price-note{font:500 12px/1.4 var(--mono); color:var(--ink-3); margin:0; min-height:1.4em}
.plan ul{list-style:none; padding:0; margin:8px 0 6px; display:grid; gap:9px}
.plan li{position:relative; padding-left:26px; font-size:15px; color:var(--ink-2); line-height:1.4}
.plan li::before{content:"✓"; position:absolute; left:0; top:0; width:18px; height:18px; border-radius:50%; background:rgba(60,207,168,.2); color:var(--mint-d); font-size:11px; font-weight:700; display:grid; place-items:center; margin-top:2px}
.plan .btn{justify-content:center; margin-top:6px}
.plan-fine{font-size:12.5px; color:var(--ink-3); margin:0; text-align:center}
.plan-hot{background:linear-gradient(160deg,#eef5ff,#f4f7fb 60%); border-color:rgba(68,97,158,.28); box-shadow:0 30px 60px -40px rgba(14,26,51,.45)}
.ribbon{position:absolute; top:-13px; left:26px; font:600 11px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:#fff; background:linear-gradient(90deg,var(--slate),var(--cyan)); padding:8px 12px; border-radius:999px; box-shadow:0 8px 18px -10px rgba(68,97,158,.7)}
.plans .y{display:none} .plans.yearly .y{display:inline} .plans.yearly .m{display:none}
.plans .note{padding-block:24px 110px}
@media (max-width:900px){ .plans-grid{grid-template-columns:1fr} .plan-hot{order:-1} .plans .note{padding-block:20px 72px} }

/* ===== Partea de sus, 12 oct 2026: Pământul noaptea (video) + sigla + cardurile cu sursele (assets/hero-video.js) ===== */
.act-pin{background:#03060f}
.act .hero-text h1{color:#fff} .act .hero-text h1 em, .act .hero-text h1 em *{font-style:normal; color:#8fd8ff}
.act .hero-text .lede{color:#aab6cf} .act .hero-text .lede b{color:#fff; font-weight:600}
.act .hero-text .btn-ink{background:#fff; color:#0e1a33} .act .hero-text .btn-line{color:#fff; background:transparent; border:1px solid rgba(255,255,255,.35)}
.act .facts{color:#8fa0c4}
.act .act-grid{row-gap:0}
.vstage{position:relative; width:100vw!important; max-width:none; margin-inline:calc(50% - 50vw); margin-top:-40px; aspect-ratio:16/9; max-height:82vh; overflow:hidden; justify-self:stretch; background:#03060f}
.vstage video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; -webkit-mask-image:linear-gradient(transparent 0, #000 16%, #000 84%, transparent); mask-image:linear-gradient(transparent 0, #000 16%, #000 84%, transparent)}
#vLogo{position:absolute; left:50%; top:46.5%; width:clamp(56px,6.2vw,96px); aspect-ratio:1; translate:-50% -50%; opacity:0; scale:.55; filter:blur(10px) drop-shadow(0 0 18px rgba(140,220,255,.9)) drop-shadow(0 0 40px rgba(94,234,212,.6)); transition:opacity 1.6s ease, scale 1.8s cubic-bezier(.2,.8,.2,1), filter 1.6s ease}
#vLogo::before{content:""; position:absolute; inset:-60%; border-radius:50%; background:radial-gradient(circle, rgba(3,10,30,.55) 0 30%, rgba(3,10,30,0) 62%); z-index:-1}
#vLogo img{width:100%; height:100%; object-fit:contain}
#vLogo.on{opacity:1; scale:1; filter:blur(0) drop-shadow(0 0 14px rgba(140,220,255,.85)) drop-shadow(0 0 36px rgba(94,234,212,.5))}
.vc{position:absolute; translate:-50% -50%; display:flex; align-items:center; gap:12px; min-width:250px; max-width:320px; padding:10px 16px 10px 10px; border-radius:20px; background:rgba(8,20,48,.5); border:1px solid rgba(150,200,255,.25); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 20px 50px -20px rgba(0,0,0,.7), 0 0 30px -10px rgba(94,234,212,.45); color:#eaf2ff; text-align:left; opacity:0; transform:translateY(14px) scale(.96); transition:opacity .9s ease, transform 1.1s cubic-bezier(.2,.8,.2,1)}
.vc.on{opacity:1; transform:none}
.vc img{width:58px; height:58px; object-fit:contain; flex:none; filter:drop-shadow(0 8px 14px rgba(0,0,0,.4))}
.vc b{display:block; font:650 16px/1.2 var(--display)} .vc span{display:block; margin-top:3px; font-size:13.5px; line-height:1.35; color:#b4c3df}
@media (max-width:760px){
  .vstage{aspect-ratio:4/5; max-height:none; margin-top:0}
  .vc{min-width:0; width:max-content; max-width:calc(100vw - 48px); padding:8px 10px 8px 8px; gap:8px}
  .vc img{width:40px; height:40px} .vc b{font-size:13.5px} .vc span{font-size:11.5px}
}