:root{
  --bg:#f6fbff;
  --bg-alt:#ffffff;
  --text:#0f1b2d;
  --muted:#5b7083;
  --primary:#2E7CF6;
  --primary-600:#2568cf;
  --accent:#36C2AA;
  --green:#1cbf81;
  --ring: rgba(46,124,246,.35);
  --shadow: 0 10px 30px rgba(15,27,45,.06);
  --radius: 14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  /* Option 1: Glass morphism with animated background */
  background: 
    radial-gradient(circle at 20% 50%, rgba(46, 124, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(54, 194, 170, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(46, 124, 246, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #f6fbff 0%, rgba(238, 247, 255, 0.8) 40%, rgba(247, 255, 252, 0.9) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  position: relative;
}

/* Animated background particles */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 30%, rgba(46, 124, 246, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(54, 194, 170, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(46, 124, 246, 0.03) 0%, transparent 40%);
  animation: backgroundFloat 20s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

.container{width:min(1120px,92%);margin-inline:auto}
.section{padding:64px 0}
.section-alt{background:rgba(255,255,255,0.6);backdrop-filter:blur(10px)}
.section-header{max-width:740px;margin:0 auto 32px auto;text-align:center}
.section-header h2{margin:0 0 8px 0;font-size:clamp(1.4rem,1.5rem+1.2vw,2rem)}
.section-header p{margin:0;color:var(--muted)}

.skip-link{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{position:fixed;left:16px;top:16px;width:auto;height:auto;padding:8px 12px;background:#000;color:#fff;border-radius:8px;z-index:1000}

/* Header & Nav */
.site-header{position:relative;padding-bottom:24px}
.nav-container{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{display:inline-grid;place-items:center;width:28px;height:28px;background:var(--primary);color:#fff;border-radius:8px}
.brand-text{font-size:1.1rem}
.brand-text .accent{color:var(--accent)}

.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav a{text-decoration:none;color:var(--text);font-weight:500}
.nav a:hover{color:var(--primary)}

.nav-toggle{display:none;flex-direction:column;gap:4px;background:transparent;border:0;padding:6px;border-radius:8px}
.nav-toggle-bar{width:24px;height:2px;background:var(--text)}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
.hero-content h1{font-size:clamp(1.8rem,1.2rem+2.4vw,2.6rem);margin:6px 0 10px}
.hero-content p{color:var(--muted);margin:0 0 18px}
.cta-group{display:flex;gap:12px;margin:12px 0 18px}

.search{margin-top:8px}
.search input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid #dfe8f3;box-shadow:var(--shadow)}
.search input:focus{outline:2px solid var(--ring);border-color:transparent}

.hero-illus{display:flex;justify-content:center}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:12px;padding:10px 14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid #cfe1ff}
.btn-ghost:hover{background:#e9f2ff}
.btn-secondary{background:#e8f8f4;color:#0f5f4e;border:1px solid #c3efe3}
.btn-secondary:hover{background:#dff5ef}

/* Cards */
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:rgba(255,255,255,0.9);border:1px solid rgba(231,238,248,0.8);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px rgba(15,27,45,.06), 0 0 0 1px rgba(255,255,255,0.5);display:flex;gap:14px;align-items:flex-start;backdrop-filter:blur(10px);transition:all 0.3s ease}
.card h3{margin:4px 0 6px;font-size:1.05rem}
.card p{margin:0;color:var(--muted)}

.service .icon{width:38px;height:38px;border-radius:12px;background:#eef5ff;color:var(--primary);display:grid;place-items:center;flex-shrink:0;transition:all 0.3s ease;position:relative;overflow:hidden}
.service .icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,var(--primary),var(--accent));opacity:0;transition:opacity 0.3s ease}
.service:hover .icon{transform:translateY(-2px) scale(1.1);box-shadow:0 8px 25px rgba(46,124,246,0.25)}
.service:hover .icon::before{opacity:0.1}
.service:hover .icon svg{position:relative;z-index:1;color:#fff}

.doctor{align-items:center}
.doctor .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#dff1ff,#f2fffb);border:1px solid #dce9f7;display:grid;place-items:center;font-weight:700;color:#4072ff;position:relative;overflow:hidden}
.doctor .avatar-animated{position:relative}
.doctor .avatar-bg{position:absolute;inset:0;background:linear-gradient(135deg,#dff1ff,#f2fffb);border-radius:50%;transition:all 0.3s ease}
.doctor .avatar-icon{position:relative;z-index:2;font-size:1.5rem;transition:all 0.3s ease}
.doctor .avatar-animated:hover .avatar-bg{background:linear-gradient(135deg,#2E7CF6,#36C2AA);transform:scale(1.1)}
.doctor .avatar-animated:hover .avatar-icon{transform:scale(1.2) rotate(5deg)}
.doctor .card-body{flex:1}
.doctor .muted{margin-bottom:10px}
.doctor .book-btn{margin-top:6px}

/* Forms */
.form{background:rgba(255,255,255,0.95);border:1px solid rgba(231,238,248,0.8);border-radius:var(--radius);padding:18px;box-shadow:0 10px 30px rgba(15,27,45,.06), 0 0 0 1px rgba(255,255,255,0.5);position:relative;backdrop-filter:blur(15px)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.field{display:flex;flex-direction:column;position:relative}
.field label{font-weight:600;margin-bottom:6px;transition:color 0.3s ease}
.field input,.field select,.field textarea{padding:10px 12px;border-radius:10px;border:1px solid rgba(223,232,243,0.8);transition:all 0.3s ease;position:relative;background:rgba(255,255,255,0.7);backdrop-filter:blur(5px)}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--ring);border-color:transparent;transform:translateY(-1px);background:rgba(255,255,255,0.95)}
.field:focus-within label{color:var(--primary)}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-color:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,0.1)}
.field.has-success input,.field.has-success select,.field.has-success textarea{border-color:var(--green);box-shadow:0 0 0 3px rgba(28,191,129,0.1)}
.error{color:#b42318;min-height:18px;font-size:0.9rem}
.success{color:#05603a;margin-top:10px;padding:10px;background:rgba(240,253,244,0.9);border-radius:8px;border-left:4px solid var(--green);backdrop-filter:blur(5px)}

/* Loading states */
.btn.loading{position:relative;color:transparent}
.btn.loading::after{content:'';position:absolute;inset:0;background:currentColor;border-radius:inherit;opacity:0.1}
.btn.loading::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:16px;height:16px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:rotate 1s linear infinite}

@keyframes checkmark{0%{stroke-dashoffset:50}100%{stroke-dashoffset:0}}

.no-results{color:var(--muted);text-align:center;margin-top:10px}

/* Footer */
.site-footer{padding:28px 0;color:var(--muted);text-align:center}

/* Toast */
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:#09243d;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);z-index:1000}

/* Data Panel */
.data-panel{position:fixed;top:20px;right:20px;width:350px;max-height:80vh;background:rgba(255,255,255,0.95);border:1px solid rgba(231,238,248,0.8);border-radius:var(--radius);box-shadow:0 20px 40px rgba(15,27,45,.1), 0 0 0 1px rgba(255,255,255,0.5);z-index:1000;overflow:hidden;backdrop-filter:blur(15px)}
.panel-header{display:flex;justify-content:space-between;align-items:center;padding:16px;background:rgba(246,251,255,0.9);border-bottom:1px solid rgba(231,238,248,0.8);backdrop-filter:blur(10px)}
.panel-header h3{margin:0;font-size:1.1rem}
.panel-close{background:none;border:0;font-size:1.5rem;cursor:pointer;color:var(--muted)}
.panel-content{padding:16px;overflow-y:auto;max-height:calc(80vh - 60px)}
.data-section{margin-bottom:20px}
.data-section h4{margin:0 0 8px;color:var(--primary)}
.data-list{max-height:150px;overflow-y:auto}
.data-item{padding:8px;margin-bottom:8px;background:rgba(246,251,255,0.7);border-radius:8px;font-size:0.9rem;backdrop-filter:blur(5px);position:relative}
.data-item strong{color:var(--text)}
.data-item small{color:var(--muted)}
.status-badge{position:absolute;top:8px;right:8px;padding:2px 6px;border-radius:4px;font-size:0.7rem;font-weight:600;text-transform:uppercase}
.status-pending{background:#fef3c7;color:#d97706}
.status-unread{background:#fecaca;color:#dc2626}

/* FAB */
.fab{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:0;font-size:1.5rem;cursor:pointer;box-shadow:0 8px 25px rgba(46,124,246,0.3);z-index:100;transition:all 0.3s ease}
.fab:hover{background:var(--primary-600);transform:scale(1.05);box-shadow:0 12px 30px rgba(46,124,246,0.4)}

/* Data Badge */
.data-badge{position:fixed;bottom:60px;right:10px;background:#f97316;color:#fff;border-radius:50%;width:24px;height:24px;display:grid;place-items:center;font-size:0.8rem;font-weight:700;z-index:101;box-shadow:0 2px 8px rgba(249,115,22,0.3)}

/* Background Switcher */
.bg-switcher{position:fixed;bottom:20px;left:20px;display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,0.95);padding:8px;border-radius:12px;backdrop-filter:blur(15px);border:1px solid rgba(231,238,248,0.8);box-shadow:0 8px 25px rgba(15,27,45,0.15);z-index:999}
.bg-option{width:36px;height:36px;border:0;border-radius:8px;background:rgba(246,251,255,0.8);cursor:pointer;font-size:1.1rem;transition:all 0.3s ease;display:grid;place-items:center;position:relative}
.bg-option:hover{background:var(--primary);color:#fff;transform:scale(1.05)}
.bg-option.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(46,124,246,0.3)}
.bg-option::after{content:attr(title);position:absolute;right:45px;background:rgba(15,27,45,0.9);color:#fff;padding:4px 8px;border-radius:6px;font-size:0.8rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 0.3s ease;z-index:1001}
.bg-option:hover::after{opacity:1}

/* Background Variants */
body.bg-glass {
  background: 
    radial-gradient(circle at 20% 50%, rgba(46, 124, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(54, 194, 170, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(46, 124, 246, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, #f6fbff 0%, rgba(238, 247, 255, 0.8) 40%, rgba(247, 255, 252, 0.9) 100%);
}

body.bg-mesh {
  background: 
    conic-gradient(from 0deg at 50% 50%, rgba(46, 124, 246, 0.1) 0deg, rgba(54, 194, 170, 0.1) 60deg, rgba(46, 124, 246, 0.05) 120deg, rgba(54, 194, 170, 0.08) 180deg, rgba(46, 124, 246, 0.1) 240deg, rgba(54, 194, 170, 0.1) 300deg, rgba(46, 124, 246, 0.1) 360deg),
    linear-gradient(135deg, #f6fbff 0%, #eef7ff 50%, #f0fdf4 100%);
  background-size: 400px 400px, 100% 100%;
  animation: meshMove 20s ease-in-out infinite;
}

body.bg-minimal {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

body.bg-medical {
  background: 
    linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%),
    radial-gradient(circle at 20% 30%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
}

@keyframes meshMove {
  0%, 100% { background-position: 0% 0%, 0% 0%; }
  50% { background-position: 100% 100%, 0% 0%; }
}

/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:0.6}50%{transform:scale(1.05);opacity:0.8}}
@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes backgroundFloat{
  0%, 100% { 
    transform: translate(0, 0) scale(1);
    opacity: 0.8;
  }
  33% { 
    transform: translate(30px, -30px) scale(1.1);
    opacity: 0.6;
  }
  66% { 
    transform: translate(-20px, 20px) scale(0.9);
    opacity: 1;
  }
}

.animate-in{animation:fadeInUp 0.6s ease-out forwards}
.card{opacity:0;transform:translateY(30px);transition:all 0.3s ease}
.card.animate-in{opacity:1;transform:translateY(0)}
.card:hover{transform:translateY(-5px);box-shadow:0 20px 40px rgba(15,27,45,.12), 0 0 0 1px rgba(255,255,255,0.7)}

/* Hero animations */
.animated-illustration .pulse{animation:pulse 3s ease-in-out infinite}
.animated-illustration .pulse-delayed{animation:pulse 3s ease-in-out infinite;animation-delay:1.5s}
.animated-illustration .float-1{animation:float 4s ease-in-out infinite}
.animated-illustration .float-2{animation:float 4s ease-in-out infinite;animation-delay:1s}
.animated-illustration .float-3{animation:float 4s ease-in-out infinite;animation-delay:2s}
.animated-illustration .float-4{animation:float 4s ease-in-out infinite;animation-delay:3s}
.animated-illustration .main-icon{animation:pulse 2s ease-in-out infinite}
.animated-illustration .dna-helix{animation:rotate 10s linear infinite}

/* Utilities */
.muted{color:var(--muted)}
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0}

/* Responsive */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr}
  .hero-illus{order:-1}
}
@media (max-width: 800px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 560px){
  .nav-toggle{display:flex}
  .nav{position:absolute;inset:60px 0 auto 0;background:rgba(255,255,255,0.95);border-bottom:1px solid rgba(231,238,248,0.8);box-shadow:0 4px 12px rgba(15,27,45,0.1);backdrop-filter:blur(15px)}
  .nav ul{flex-direction:column;padding:12px}
  .nav[hidden]{display:none}
  .grid-2{grid-template-columns:1fr}
  .cards-grid{grid-template-columns:1fr}
  
  /* Move background switcher on mobile */
  .bg-switcher{bottom:80px;left:10px;padding:6px}
  .bg-option{width:32px;height:32px;font-size:1rem}
  .bg-option::after{display:none} /* Hide tooltips on mobile */
  
  /* Adjust data panel on mobile */
  .data-panel{top:10px;right:10px;left:10px;width:auto}
}