/* MediRight Theme CSS (moved from the HTML <style> block) */

/* -------- 2025+ Modern Reset -------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html,body{height:100%}
body{line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img, picture, video, canvas, svg{display:block;max-width:100%}
input, button, textarea, select{font:inherit}
p, h1, h2, h3, h4, h5, h6{overflow-wrap:break-word}

/* -------- Theme Tokens -------- */
:root{
  --bg-0: #070b12;
  --bg-1: #0a1018;
  --bg-2: #0f1722;
  --card: #0f1722cc; /* glass */
  --surface: #111927;
  --text: #e6f1ff;
  --muted: #a6b3c2;
  --line: #1d2a3a;
  --brand: #5af2c6;
  --brand-2: #7b61ff;
  --brand-3: #00d2ff;
  --accent: #ff82c6;
  --success: #45d483;
  --warning: #ffd76a;
  --error: #ff7a7a;
  --shadow-glow: 0 10px 30px #5af2c61a, 0 20px 60px #7b61ff1a;
  --radius-xl: 20px;
  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 8px;
  --container: 1200px;
  --nav-h: 72px;
  color-scheme: dark;
}

[data-theme="light"]{
  --bg-0: #f6f8fb;
  --bg-1: #eef3f8;
  --bg-2: #e6eef6;
  --card: #ffffffcc;
  --surface: #ffffff;
  --text: #10151a;
  --muted: #4b5b6b;
  --line: #e2e8f0;
  color-scheme: light;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: radial-gradient(1200px 800px at 20% 0%, #0d102000, #0d102000),
              radial-gradient(1000px 800px at 100% 20%, #2c1d6a22, #09121a00),
              linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  accent-color: var(--brand);
}

.container{max-width:var(--container); margin-inline:auto; padding-inline: clamp(16px, 4vw, 28px)}

/* -------- Ambient Aurora Background -------- */
.aurora{
  position: fixed; inset: -20vmax -10vmax 0; pointer-events:none; z-index: -1;
  filter: blur(50px) saturate(130%);
  opacity:.7;
  background:
    radial-gradient(50% 50% at 20% 10%, #00ffc22a 0%, transparent 60%),
    radial-gradient(40% 40% at 80% 0%, #8a7cff2b 0%, transparent 60%),
    radial-gradient(30% 30% at 60% 60%, #00d2ff2b 0%, transparent 60%),
    radial-gradient(30% 30% at 30% 70%, #ff82c620 0%, transparent 60%);
  animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateY(-2%) translateX(-2%) scale(1);} to { transform: translateY(2%) translateX(2%) scale(1.1);} }

/* -------- Cursor Glow -------- */
.cursor-glow{ position: fixed; inset:0; pointer-events:none; z-index:0; mix-blend-mode:screen; }
.cursor-glow::before{ content:""; position:absolute; width:48vmax; height:48vmax; border-radius:50%; transform: translate(-50%, -50%); left: var(--mx, -1000px); top: var(--my, -1000px);
  background: radial-gradient(closest-side, #5af2c633, #7b61ff1f, transparent 70%);
  filter: blur(30px);
}

/* -------- Nav -------- */
.nav-wrap{ position:sticky; top:0; z-index:100; backdrop-filter: saturate(160%) blur(10px); background: linear-gradient(180deg, #0a101880, #0a101800); border-bottom:1px solid var(--line)}
nav{ height: var(--nav-h); display:flex; align-items:center; justify-content:space-between } 
.logo{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.3px }
.logo .glyph{ width:36px; height:36px; border-radius:12px; background: conic-gradient(from 200deg at 50% 50%, var(--brand), var(--brand-2), var(--brand-3), var(--brand)); display:grid; place-items:center; box-shadow: 0 10px 30px #5af2c61a }
.logo .glyph svg{ width:22px; height:22px; color:#06131b; filter: drop-shadow(0 1px 0 #fff5) }
.logo img.logo-img, .logo img.custom-logo, .custom-logo{ height:36px; width:auto; display:block }
.nav-links{ display:flex; gap:22px; align-items:center }
.nav-links a{ color:var(--muted); text-decoration:none; font-weight:600; font-size:14px; letter-spacing:.2px }
.nav-links a:hover{ color:var(--text) }
.btn{ --bg: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%); --txt:#041015;
  background: var(--bg); color: var(--txt); border:none; padding:12px 18px; border-radius: 999px; font-weight:800; letter-spacing:.2px; cursor:pointer; box-shadow: var(--shadow-glow); transition: transform .2s ease, filter .2s ease }
.btn:hover{ transform: translateY(-1px) scale(1.01) }
.btn.secondary{ background: transparent; color: var(--text); border:1px solid var(--line)}
.theme-toggle{ background:var(--surface); color:var(--text); border:1px solid var(--line); width:44px; height:44px; border-radius:12px; display:grid; place-items:center; cursor:pointer }

/* Admin bar offset for sticky nav */
@media (min-width: 783px){ .admin-bar .nav-wrap{ top:32px } }
@media (max-width: 782px){ .admin-bar .nav-wrap{ top:46px } }

/* -------- Hero -------- */
.hero{ position:relative; padding: clamp(36px, 4vw, 48px) 0 80px }
.hero .inner{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 48px); align-items:center }
.eyebrow{ color: var(--brand); font-weight:800; letter-spacing:.28em; text-transform: uppercase; font-size:12px }
h1.hero-title{ font-size: clamp(40px, 7vw, 80px); line-height:1.02; letter-spacing:-.02em; font-weight:900; display:inline; background: linear-gradient(180deg, #fff, #bcd6ff); -webkit-background-clip:text; background-clip:text; color: transparent }
.hero p{ color: var(--muted); margin-top:16px; font-size: clamp(16px, 2.2vw, 20px) }
.cta-row{ display:flex; gap:12px; align-items:center; margin-top:26px; flex-wrap:wrap }
.meta{ display:flex; gap:20px; align-items:center; margin-top:18px; color:var(--muted); font-size:14px }
.meta .pill{ padding:6px 10px; border-radius: 999px; background: #ffffff10; border:1px solid var(--line) }
.trust{ display:flex; align-items:center; gap:18px; margin-top:30px; opacity:.9; flex-wrap:wrap }
.trust img{ width:auto; height:26px; opacity:.8; filter: saturate(0.6) }

.hero-visual{ position:relative; height:100%; min-height: 520px; display:grid; place-items:center }
.phone{
  width: 320px; height: 640px; border-radius: 32px; padding:12px; background: linear-gradient(180deg, #111927, #0f1722); box-shadow: 0 30px 80px #000a;
  border:1px solid #2a3750; position:relative; transform: perspective(1000px) rotateX(12deg) rotateY(-12deg); transform-style:preserve-3d; isolation:isolate
}
.phone::before{ content:""; position:absolute; inset:8px; border-radius:26px; background: linear-gradient(180deg, #122033, #0b1320); border:1px solid #2a3750; }
.phone-notch{ position:absolute; top:10px; left:50%; transform:translateX(-50%); width:120px; height:24px; background:#0c1726; border-radius:0 0 14px 14px; border:1px solid #2a3750; border-top:none; z-index:1 }
.screen{ position:absolute; inset:18px; border-radius:22px; overflow:hidden; background: linear-gradient(180deg, #0f1723, #0b1320) }
.screen .stat-card{ position:absolute; left:18px; right:18px; top:18px; padding:14px; border-radius:16px; background: #101a28aa; border:1px solid #203045; backdrop-filter: blur(10px) saturate(120%); color:#d9e8ff; display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center; animation: float1 6s ease-in-out infinite }
@keyframes float1{ 0%,100%{ transform: translateZ(30px) translateY(0) } 50%{ transform: translateZ(30px) translateY(-8px) } }
.ring{ --size:72px; width:var(--size); height:var(--size); border-radius:50%; background: conic-gradient(var(--brand) var(--pct,65%), #1b2a3d 0); display:grid; place-items:center }
.ring::after{ content: attr(data-value) "%"; font-weight:800; font-size:14px; color:#cfe7ff; background:#0f1722; width: calc(var(--size) - 16px); height: calc(var(--size) - 16px); border-radius:50%; display:grid; place-items:center; border:1px solid #2a3750 }
.screen .chart{ position:absolute; left:18px; right:18px; bottom:18px; height:54%; border-radius:16px; background: linear-gradient(180deg, #0b1422, #0b1320); border:1px solid #203045; overflow:hidden }
.sparkline{ position:absolute; inset:0; }

/* -------- Sections -------- */
section{ padding: 96px 0 }
.section-title{ font-size: clamp(28px, 4.4vw, 42px); letter-spacing:-.02em; font-weight:900; margin-bottom:14px }
.section-sub{ color:var(--muted); max-width: 62ch; margin-bottom: 28px }

/* Features */
.features{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
.card{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-xl); padding:20px; backdrop-filter: blur(10px); box-shadow: 0 12px 40px #00000022 }
.feature{ position:relative; overflow:hidden }
.feature .icon{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background: linear-gradient(135deg, #0c1825, #0b1320); border:1px solid #203045; margin-bottom:12px }
.feature h3{ font-size:18px; letter-spacing:-.01em; margin-bottom:6px }
.feature p{ color:var(--muted); font-size:14px }
.feature.tilt{ transform-style:preserve-3d; transition: transform .2s ease }
.feature .shine{ position:absolute; inset:-60%; background: radial-gradient(200px circle at var(--px,50%) var(--py,50%), #ffffff22, transparent 40%); transform: translateZ(30px); pointer-events:none }

/* How it works */
.timeline{ display:grid; grid-template-columns: 1fr 1fr; gap:22px }
.step{ display:flex; gap:16px; align-items:flex-start }
.step .count{ width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--brand), var(--brand-2)); color:#041015; display:grid; place-items:center; font-weight:900 }
.step p{ color:var(--muted) }

/* Testimonials */
.testimonials{ overflow:hidden }
.scroller{ display:flex; gap:18px; overflow:auto; scroll-snap-type:x mandatory; padding-bottom:8px }
.testi{ scroll-snap-align:start; min-width: clamp(280px, 40vw, 440px); background: var(--card); border:1px solid var(--line); border-radius: var(--radius-lg); padding:18px }
.testi .who{ display:flex; align-items:center; gap:12px; margin-top:12px }
.avatar{ width:38px; height:38px; border-radius:50%; background: linear-gradient(135deg, #203045, #0f1722); border:1px solid #2a3750 }

/* Pricing */
.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px }
.price{ position:relative; overflow:hidden }
.price .tier{ font-weight:800; letter-spacing:.2px; color:var(--muted) }
.price h4{ font-size:32px; margin:8px 0 }
.price ul{ list-style:none; padding:0; margin:12px 0 0; display:grid; gap:8px; color:var(--muted) }
.badge{ position:absolute; top:16px; right:-10px; background:linear-gradient(135deg, var(--brand-2), var(--brand)); color:#041015; padding:6px 12px; border-radius:999px; font-weight:900; transform: rotate(8deg) }

/* FAQ */
details{ background: var(--card); border:1px solid var(--line); border-radius: var(--radius-md); padding:14px 16px }
details+details{ margin-top:12px }
summary{ cursor:pointer; font-weight:700 }
details p{ color:var(--muted); margin-top:8px }

/* CTA */
.cta{ text-align:center }
.cta .card{ display:inline-block; padding:28px; border-radius: 24px; }
.cta form{ margin-top:14px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap }
input[type=email]{ background: var(--surface); color:var(--text); border:1px solid var(--line); padding:12px 14px; border-radius: 12px; min-width: min(480px, 90vw) }

/* Footer */
footer{ border-top:1px solid var(--line); padding: 24px 0 60px; color:var(--muted) }
.foot{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between }
.socials{ display:flex; gap:12px }
.socials a{ width:40px; height:40px; border-radius:10px; background: var(--surface); border:1px solid var(--line); display:grid; place-items:center; color:var(--muted); text-decoration:none }
.socials a:hover{ color:var(--text) }

/* Scroll progress */
.scrollbar{ position:fixed; top:0; left:0; height:3px; width:0%; background: linear-gradient(90deg, var(--brand), var(--brand-2)); z-index:200 }

/* Reveal on view */
.reveal{ opacity:0; transform: translateY(20px) scale(.98); filter: blur(6px); transition: all .8s cubic-bezier(.2,.7,0,1) }
.reveal.in{ opacity:1; transform: none; filter:none }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .aurora, .cursor-glow, .reveal{ animation:none !important; transition:none !important }
}

/* Light theme background tweak for visibility */
[data-theme="light"] body{
  background:
    radial-gradient(1200px 800px at 10% -10%, #7b61ff1a 0%, transparent 60%),
    radial-gradient(1000px 800px at 100% 0%, #5af2c61a 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 40%, var(--bg-2));
}
[data-theme="light"] details{ background:#ffffffee; border-color:#d4dee9 }

/* Light theme visibility improvements */
[data-theme="light"] .nav-wrap{ background: linear-gradient(180deg, #ffffffcc 0%, #ffffff80 100%); }
[data-theme="light"] .card{ background:#ffffffea; border-color:#cfd8e3; box-shadow: 0 8px 30px #0a254012, 0 1px 0 #00000005 inset }
[data-theme="light"] .theme-toggle{ background:#ffffff; border-color:#d4dee9; box-shadow: 0 6px 20px #00000014 }
[data-theme="light"] .btn.secondary{ background:#ffffffcc; border-color:#cfd8e3 }
[data-theme="light"] .meta .pill{ background:#f0f5ff80; border-color:#cfd8e3 }
[data-theme="light"] .feature .shine{ background: radial-gradient(200px circle at var(--px,50%) var(--py,50%), #00000012, transparent 42%) }
[data-theme="light"] .cursor-glow{ mix-blend-mode:multiply }
[data-theme="light"] .cursor-glow::before{ background: radial-gradient(closest-side, #7b61ff2e, #5af2c64d, transparent 70%); filter: blur(36px) }
[data-theme="light"] .aurora{ opacity:.9; filter: blur(60px) saturate(140%) contrast(115%); background:
  radial-gradient(50% 50% at 20% 10%, #00ffc244 0%, transparent 60%),
  radial-gradient(40% 40% at 80% 0%, #8a7cff44 0%, transparent 60%),
  radial-gradient(30% 30% at 60% 60%, #00d2ff3d 0%, transparent 60%),
  radial-gradient(30% 30% at 30% 70%, #ff82c633 0%, transparent 60%); }
[data-theme="light"] input[type=email]{ box-shadow: 0 2px 10px #0000000a; border-color:#cfd8e3 }
[data-theme="light"] .socials a{ background:#ffffff; border-color:#d4dee9; box-shadow: 0 4px 12px #0000000f }
[data-theme="light"] .testi{ background:#ffffffee; border-color:#d4dee9 }
[data-theme="light"] .feature .icon{ background: linear-gradient(135deg, #f6f9ff, #eef3f8); border-color:#d4dee9; color:#334155 }
[data-theme="light"] h1.hero-title{ background: linear-gradient(180deg, #0b1220, #2c3e67); -webkit-background-clip:text; background-clip:text; color: transparent }

/* Responsive */
@media (max-width: 980px){
  .hero .inner{ grid-template-columns: 1fr; }
  .features{ grid-template-columns: 1fr 1fr }
  .timeline{ grid-template-columns: 1fr }
  .pricing{ grid-template-columns: 1fr }
  .hero-visual{ order: -1 }
  .nav-links .hide-sm{ display:none }
  .logo img.logo-img, .logo img.custom-logo, .custom-logo{ height:30px }
}

.logo .light-logo { display: none; }
html[data-theme="light"] .logo .custom-logo { display: none; } /* WP’s default logo /
html[data-theme="light"] .logo .logo-img:not(.light-logo) { display: none; } / Fallback dark logo */
html[data-theme="light"] .logo .light-logo { display: inline-block; }