/* OcuTrace — Future layer: iris HUD language across all pages */
:root{--glow:#58d9e9;--deep:#02070f}
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
background:repeating-radial-gradient(circle at 82% 18%,transparent 0 62px,#58d9e90d 63px 64px),
linear-gradient(#58d9e906 1px,transparent 1px) 0 0/100% 56px,linear-gradient(90deg,#58d9e906 1px,transparent 1px) 0 0/56px 100%;
-webkit-mask:radial-gradient(ellipse at 70% 20%,#000 0,transparent 78%);mask:radial-gradient(ellipse at 70% 20%,#000 0,transparent 78%)}
.landing{background:radial-gradient(ellipse at 30% 45%,#0a3f78 0,#07203f 38%,#02070f 78%)}
/* hero: the eye becomes the world */
.landing .hero{position:relative;grid-template-columns:1fr;min-height:660px}
.hero-copy{position:relative;z-index:3;max-width:540px;text-shadow:0 2px 24px #02070f}
.hero h1{background:linear-gradient(120deg,#fff 20%,#8fe9ff 60%,#4a8bff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 22px #2fb8ff55)}
.hero h1 em{color:inherit}
.eye-stage{position:absolute;top:-40px;bottom:-40px;left:-8%;width:70%;height:auto;pointer-events:none;z-index:1;cursor:default}
html[dir=ltr] .eye-stage{left:auto;right:-8%}
.eye-stage canvas{filter:drop-shadow(0 0 70px #1b9dff88)}
.hud-tag{position:absolute;z-index:2;font:600 10px/1.9 Manrope,monospace;letter-spacing:1.2px;color:#8fe9ff;direction:ltr;text-align:left;padding:8px 12px;border-inline-start:1px solid #58d9e9aa;background:linear-gradient(90deg,#58d9e90f,transparent)}
.hud-tag b{color:#fff;font-weight:700}
.hud-tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#62d8ba;box-shadow:0 0 10px #62d8ba;margin-inline-end:6px;animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
/* cards: reticle corners */
.feature-card,.quick-card,.panel,.clinic-card,.plan-card,.price-card,.metric,.member-card,.welcome-card,.privacy-row,.requirements>div,.passport-summary,.doctor-hero,.test-box{position:relative;background-color:#0a1d33cc}
.feature-card::after,.quick-card::after,.panel::after,.clinic-card::after,.plan-card::after,.price-card::after,.metric::after,.welcome-card::after,.test-box::after,.doctor-hero::after,.passport-summary::after{content:'';position:absolute;inset:6px;pointer-events:none;opacity:.55;transition:opacity .25s,inset .25s;
background:linear-gradient(#58d9e9,#58d9e9) 0 0/12px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 0 0/1px 12px no-repeat,
linear-gradient(#58d9e9,#58d9e9) 100% 0/12px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 100% 0/1px 12px no-repeat,
linear-gradient(#58d9e9,#58d9e9) 0 100%/12px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 0 100%/1px 12px no-repeat,
linear-gradient(#58d9e9,#58d9e9) 100% 100%/12px 1px no-repeat,linear-gradient(#58d9e9,#58d9e9) 100% 100%/1px 12px no-repeat}
.feature-card:hover::after,.quick-card:hover::after,.clinic-card:hover::after,.plan-card:hover::after{opacity:1;inset:3px}
.feature-icon,.clinic-symbol,.passport-icon,.doctor-emblem{border-radius:50%;background:radial-gradient(circle,#58d9e933,#58d9e90a 70%);border:1px solid #58d9e955;box-shadow:0 0 22px #58d9e92e,inset 0 0 12px #58d9e91f}
/* iris emblem on every inner page header + dashboard orb */
.page-head{position:relative}
.page-head::after,.welcome-orb{content:'';position:absolute;inset-inline-end:0;top:-10px;width:130px;height:130px;border-radius:50%;pointer-events:none;border:0;font-size:0;
background:radial-gradient(circle,#02070f 0 17%,#1a6cff 18%,#58d9e9 34%,transparent 36%),repeating-conic-gradient(#58d9e977 0 1.2deg,transparent 1.2deg 5deg);
-webkit-mask:radial-gradient(circle,#000 0 56%,transparent 57% 62%,#000 63% 100%);mask:radial-gradient(circle,#000 0 56%,transparent 57% 62%,#000 63% 100%);
box-shadow:none;animation:spin 40s linear infinite;opacity:.85}
.welcome-orb{position:relative;inset:auto;top:auto;width:120px;height:120px;filter:drop-shadow(0 0 24px #2fa8ff88)}
.page-head h1{text-shadow:0 0 30px #2fb8ff44}
.sidebar{background:linear-gradient(180deg,#06182ccc,#030c18f2);backdrop-filter:blur(14px)}
.side-link.active{box-shadow:inset 0 0 22px #58d9e922,0 0 18px #58d9e91c}
.btn-primary{background:linear-gradient(110deg,#0aa6d4,#2f5fff);box-shadow:0 0 30px #1d8fff66,inset 0 1px 0 #ffffff55}
.btn-primary:hover{box-shadow:0 0 46px #35c4ff99,inset 0 1px 0 #ffffff66}
.topbar{backdrop-filter:blur(10px)}
/* cursor reticle + iris-open intro */
.reticle{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;border:1px solid #58d9e9aa;border-radius:50%;pointer-events:none;z-index:150;mix-blend-mode:screen;transition:width .2s,height .2s,margin .2s,background .2s}
.reticle::after{content:'';position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#8fe9ff;box-shadow:0 0 10px #58d9e9}
.reticle.on{width:60px;height:60px;margin:-30px 0 0 -30px;background:#58d9e914}
@media(pointer:coarse){.reticle{display:none}}
.iris-intro{position:fixed;inset:0;z-index:300;pointer-events:none}
@media(max-width:900px){.eye-stage{width:90%}}
@media(max-width:700px){.landing .hero{min-height:0}.eye-stage{position:relative;inset:auto;width:100%;height:340px;margin-top:-10px}.hud-tag{display:none}.page-head::after{width:80px;height:80px}}

/* dashboard bento */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin:17px 0 8px}
.tile{position:relative;overflow:hidden;border:1px solid #1f4a72;border-radius:24px;padding:22px;background:radial-gradient(circle at 80% 0,#12407055,transparent 60%),linear-gradient(150deg,#0b2444dd,#061222ee);box-shadow:0 20px 50px #0006,inset 0 1px 0 #ffffff14}
.t-iris{grid-column:span 5;grid-row:span 2;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.t-chart{grid-column:span 7;min-height:220px}.t-s{grid-column:span 4;min-height:170px;display:flex;flex-direction:column;gap:8px}
.t-s b,.tile-h b{font-size:13px}.tile-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tag{display:inline-flex;align-items:center;gap:7px;font:700 10px Manrope,Cairo;color:#8fe9ff;letter-spacing:.6px}.t-iris .tag{position:absolute;top:18px;inset-inline-start:20px}
.live{width:7px;height:7px;border-radius:50%;background:#62d8ba;box-shadow:0 0 10px #62d8ba;animation:blink 1.6s infinite}
.iris-big{position:relative;width:min(250px,60%);aspect-ratio:1;border-radius:50%;margin:20px 0 6px;background:radial-gradient(circle,#02070f 0 16%,#0b3fbf 17%,#35b8ff 36%,#0b2f8f 56%,#030c2e 58%,transparent 60%);box-shadow:0 0 100px #1d8fff77}
.iris-big::before{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(#8fe9ff55 0 .8deg,transparent .8deg 3.2deg);-webkit-mask:radial-gradient(circle,transparent 17%,#000 18% 57%,transparent 58%);mask:radial-gradient(circle,transparent 17%,#000 18% 57%,transparent 58%);animation:spin 60s linear infinite}
.iris-big::after{content:'';position:absolute;inset:-9%;border-radius:50%;border:1px dashed #58d9e9aa;animation:spin 30s linear infinite reverse}
.score{font:800 58px/1 Manrope;margin-top:14px}.score small{font-size:16px;color:#7fa6bb;margin-inline-start:4px}.t-iris p{color:#91aaba;font-size:11px;line-height:1.9;max-width:280px}
.t-chart svg{width:100%;height:150px;margin-top:12px}.line{stroke-dasharray:1;animation:draw 2.2s ease-out both;filter:drop-shadow(0 0 8px #58d9e9)}@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.t-s strong{font:800 34px Manrope;margin-top:auto}.t-s strong small{font-size:11px;color:#7fa6bb;margin-inline-start:5px}
.blink{display:flex;align-items:flex-end;gap:4px;height:46px;direction:ltr}.blink i{flex:1;background:linear-gradient(#8fe9ff,#2f6bff);border-radius:3px;opacity:.85}
.ring{width:84px;height:84px;position:absolute;inset-inline-end:18px;top:18px;filter:drop-shadow(0 0 10px #35b8ff88)}
.next span{font:800 34px Manrope}.next small{display:block;color:#91aaba;font-size:10px}
@media(max-width:900px){.t-iris,.t-chart{grid-column:span 12}.t-s{grid-column:span 12;min-height:130px}.t-iris{min-height:340px}}