/* Direction: vibrant modern care — deep indigo trust, electric teal energy, coral warmth, fresh glow */
:root{
  --color-navy:#0C1845; --color-navy-2:#1A2B7A; --color-teal:#00B79B; --color-teal-dark:#07806F;
  --color-mint:#C9FFF2; --color-white:#FFFFFF; --color-bg:#F3F5FF; --color-border:#E3E8FF;
  --color-text:#0C1845; --color-secondary:#3E4C7A; --color-muted:#7C88B0;
  --color-accent:#FF7A45; --color-accent-2:#FFB020; --color-danger:#F43F5E; --color-success:#00B79B; --color-warning:#F59E0B;
  --gradient-brand:linear-gradient(135deg,#00D9B5 0%,#00A3FF 55%,#5B5BF5 100%);
  --gradient-warm:linear-gradient(135deg,#FF7A45,#FFB020);
  --gradient-navy:linear-gradient(135deg,#0C1845,#1A2B7A 60%,#5B5BF5 130%);
  --radius-sm:10px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
  --shadow-soft:0 18px 50px rgba(43,72,245,.16); --shadow-card:0 6px 24px rgba(12,24,69,.08);
  --font:'Plus Jakarta Sans',Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--color-bg);color:var(--color-text);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0 0 .5rem}
h1{font-size:clamp(2rem,4vw,3.2rem)} h2{font-size:clamp(1.4rem,2.4vw,2rem)} h3{font-size:1.15rem}
p{margin:0 0 1rem;color:var(--color-secondary)}
a{color:var(--color-teal-dark)}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:88px 0} @media(max-width:768px){.section{padding:60px 0}}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:var(--radius-pill);font-weight:700;font-size:15px;border:0;cursor:pointer;text-decoration:none;transition:.18s ease-out}
.btn-primary{background:var(--gradient-brand);color:#fff;box-shadow:0 8px 22px rgba(0,183,155,.35)} .btn-primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(0,163,255,.4)}
.btn-navy{background:var(--gradient-navy);color:#fff} .btn-navy:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;border:1.5px solid var(--color-border);color:var(--color-navy)}
.btn-warm{background:var(--gradient-warm);color:#fff;box-shadow:0 8px 22px rgba(255,122,69,.35)}
.btn-danger{background:var(--color-danger);color:#fff}
.btn-block{width:100%} .btn-lg{min-height:56px;font-size:16px;padding:14px 28px}
.btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}
.card{background:#fff;border:1px solid var(--color-border);border-radius:20px;box-shadow:var(--shadow-card)}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;letter-spacing:.02em}
.badge-demo{background:var(--gradient-navy);color:#fff} .badge-clinical{background:#DCF3FF;color:#075985}
.badge-nonclin{background:#FFF1D6;color:#9A4A00} .badge-verified{background:var(--color-mint);color:var(--color-teal-dark)}
.badge-warn{background:#FFE4E6;color:#9F1239} .badge-mint{background:var(--color-mint);color:var(--color-teal-dark)}
.chip{font-size:12px;font-weight:700;background:#fff;border:1px solid var(--color-border);border-radius:999px;padding:6px 12px}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;color:var(--color-navy);text-decoration:none}
.logo-mark{width:36px;height:36px;border-radius:12px;background:var(--gradient-brand);color:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 4px 14px rgba(0,183,155,.4)}
.nav-links{display:flex;gap:22px;align-items:center} .nav-links a{text-decoration:none;color:var(--color-secondary);font-weight:600;font-size:14px}
.nav-links a.active,.nav-links a:hover{color:var(--color-navy)}
@media(max-width:900px){.nav-links{display:none}}
.hamburger{display:none;background:#fff;border:1px solid var(--color-border);border-radius:10px;min-width:44px;min-height:44px}
@media(max-width:900px){.hamburger{display:inline-flex}}
.mobile-menu{display:none;border-top:1px solid var(--color-border);background:#fff;padding:12px 20px}
.mobile-menu.open{display:block} .mobile-menu a{display:block;padding:12px 4px;text-decoration:none;color:var(--color-navy);font-weight:700}
/* phone */
.phone-shell{background:var(--gradient-navy);border-radius:36px;padding:14px;box-shadow:var(--shadow-soft);border:1px solid rgba(255,255,255,.25)}
.phone{background:#fff;border-radius:26px;overflow:hidden;max-width:400px;margin:0 auto;height:780px;display:flex;flex-direction:column;position:relative}
.phone-screen{flex:1;overflow-y:auto;padding:16px 16px 96px;scrollbar-width:thin}
.phone-status{display:flex;justify-content:space-between;align-items:center;padding:10px 18px 4px;font-size:12px;font-weight:700;color:var(--color-muted)}
.bottom-nav{position:absolute;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--color-border);display:flex;padding:8px 6px 16px}
.bottom-nav button{flex:1;background:none;border:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10.5px;font-weight:700;color:var(--color-muted);min-height:52px;cursor:pointer}
.bottom-nav button.active{color:var(--color-teal-dark)} .bottom-nav button svg{width:22px;height:22px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.svc{background:#fff;border:1.5px solid var(--color-border);border-radius:20px;padding:14px;text-align:left;cursor:pointer;transition:.18s}
.svc:hover{border-color:var(--color-teal);transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,183,155,.18)} .svc.sel{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,var(--gradient-brand) border-box;border:1.5px solid transparent;box-shadow:0 8px 20px rgba(0,163,255,.15)}
.svc .ico{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;margin-bottom:8px}
.svc b{font-size:13.5px;display:block} .svc span{font-size:11.5px;color:var(--color-secondary)}
.pro-card{display:flex;gap:12px;padding:14px;border-radius:18px;border:1px solid var(--color-border);background:#fff;margin-bottom:10px}
.avatar{width:56px;height:56px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;font-weight:800;color:#fff;font-size:18px}
.input,select.input,textarea.input{width:100%;min-height:48px;border:1.5px solid var(--color-border);border-radius:14px;padding:12px 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--color-text)}
.input:focus{border-color:var(--color-teal);outline:none}
label.lbl{font-size:13px;font-weight:800;margin:14px 0 6px;display:block;color:var(--color-navy)}
.err{font-size:12.5px;color:var(--color-danger);font-weight:600;margin-top:4px;display:none}
.err.show{display:block} .input.invalid{border-color:var(--color-danger)}
.step-dots{display:flex;gap:6px;margin:10px 0} .step-dots i{height:6px;flex:1;border-radius:99px;background:var(--color-border)} .step-dots i.on{background:var(--gradient-brand)}
.timeline{display:flex;flex-direction:column;gap:0;margin:12px 0}
.t-step{display:flex;gap:12px} .t-dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--color-border);flex-shrink:0;font-size:13px}
.t-step.done .t-dot{background:var(--color-teal);color:#fff} .t-step.now .t-dot{background:var(--gradient-navy);color:#fff}
.t-line{width:2px;background:linear-gradient(var(--color-teal),var(--color-border));margin:2px 0 2px 13px;min-height:18px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--gradient-navy);color:#fff;padding:12px 18px;border-radius:14px;font-size:14px;font-weight:600;opacity:0;transition:.25s;z-index:200;max-width:90vw}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.sos-btn{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,#FB4D6D,#FF7A45);color:#fff;border:6px solid #FFE4E6;font-size:18px;font-weight:800;cursor:pointer;box-shadow:0 12px 32px rgba(244,63,94,.45)}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi{background:linear-gradient(180deg,#fff,#F8FAFF);border:1px solid var(--color-border);border-radius:20px;padding:14px}
.kpi b{font-size:22px;display:block;background:var(--gradient-navy);-webkit-background-clip:text;background-clip:text;color:transparent} .kpi span{font-size:12px;color:var(--color-secondary);font-weight:600}
.dash{display:grid;grid-template-columns:240px 1fr;min-height:100vh} @media(max-width:900px){.dash{grid-template-columns:1fr}.sidebar{display:none}.sidebar.open{display:block;position:fixed;inset:0;z-index:99}}
.sidebar{background:var(--gradient-navy);color:#D8DEFF;padding:20px 14px}
.sidebar a{display:flex;gap:10px;align-items:center;color:#D8DEFF;text-decoration:none;padding:11px 12px;border-radius:14px;font-size:14px;font-weight:600}
.sidebar a.active,.sidebar a:hover{background:rgba(255,255,255,.16);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.2)}
.dash-main{padding:24px;max-width:1100px}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--color-border);border-radius:16px}
table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px} th{text-align:left;padding:12px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--color-muted);background:#F8FAFC} td{padding:12px;border-top:1px solid var(--color-border)}
.pill{font-size:11px;font-weight:800;padding:4px 10px;border-radius:999px;background:var(--color-mint);color:var(--color-teal-dark)} .pill.amber{background:#FEF3C7;color:#92400E} .pill.red{background:#FEE2E2;color:#991B1B} .pill.navy{background:var(--color-navy);color:#fff} .pill.gray{background:#F1F5F9;color:#475569}
.skeleton{background:linear-gradient(90deg,#EDF2F7 25%,#F7FAFC 50%,#EDF2F7 75%);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:12px;min-height:18px}
@keyframes sh{to{background-position:-200% 0}}
.empty{border:2px dashed var(--color-border);border-radius:18px;padding:32px 20px;text-align:center;background:#fff}
.hero{background:radial-gradient(800px 400px at 85% 0%,#C9FFF2,transparent),radial-gradient(700px 380px at 10% 10%,#FFE3D3,transparent),radial-gradient(900px 500px at 50% 120%,#D9E2FF,transparent),linear-gradient(180deg,#fff,var(--color-bg));border-bottom:1px solid var(--color-border)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:22px 0}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.portal-card{background:#fff;border:1px solid var(--color-border);border-radius:20px;padding:20px;text-decoration:none;color:inherit;display:block;transition:.15s}
.portal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:var(--color-teal)}
.notif-dot{width:8px;height:8px;border-radius:50%;background:var(--color-danger);display:inline-block}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}