/* Humaan Genetics — components (depends on tokens.css) */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-fa);font-size:var(--fs-body);line-height:var(--lh-body);background:var(--c-bg);color:var(--c-text);-webkit-font-smoothing:antialiased;transition:background var(--dur-slow) var(--ease),color var(--dur-slow) var(--ease)}
.en{font-family:var(--font-en);direction:ltr;unicode-bidi:isolate}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--c-focus);outline-offset:3px;border-radius:var(--r-sm)}
/* buttons */
.btn{--h:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--h);padding:0 22px;border-radius:var(--r-pill);font:600 15px/1 var(--font-fa);border:1.5px solid transparent;cursor:pointer;transition:all var(--dur-base) var(--ease);white-space:nowrap}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--c-primary);color:var(--c-on-primary);box-shadow:0 8px 20px -8px color-mix(in srgb,var(--c-primary) 70%,transparent)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--c-primary-hover);transform:translateY(-1px)}
.btn-secondary{background:var(--c-surface);color:var(--c-text);border-color:var(--c-border)}
.btn-secondary:hover,.btn-secondary.is-hover{border-color:var(--c-text)}
.btn-ghost{background:transparent;color:var(--c-primary)}
.btn-ghost:hover,.btn-ghost.is-hover{background:color-mix(in srgb,var(--c-primary) 10%,transparent)}
.btn.is-focus{outline:3px solid var(--c-focus);outline-offset:3px}
.btn:active,.btn.is-active{transform:translateY(1px) scale(.98)}
.btn[disabled],.btn.is-disabled{background:var(--c-surface-2);color:var(--c-text-muted);border-color:transparent;box-shadow:none;cursor:not-allowed}
.btn-sm{--h:38px;padding:0 16px;font-size:14px}
/* badge */
.badge{white-space:nowrap;flex:none;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:var(--r-pill);font:600 12.5px/1 var(--font-fa);background:var(--c-surface-2);color:var(--c-text)}
.badge i{width:7px;height:7px;border-radius:50%;background:var(--c-primary)}
.badge-teal{background:color-mix(in srgb,var(--c-primary) 14%,var(--c-surface));color:var(--c-success)}
.badge-purple{background:color-mix(in srgb,var(--c-accent) 14%,var(--c-surface));color:var(--c-accent)}
.badge-purple i{background:var(--c-accent)}
.badge-coral{background:color-mix(in srgb,var(--c-reconstructed) 13%,var(--c-surface));color:var(--c-reconstructed-text)}
.badge-coral i{background:var(--c-reconstructed)}
.badge-outline{background:transparent;border:1px solid var(--c-border)}
/* cards */
.card{background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-1);transition:all var(--dur-base) var(--ease)}
[data-theme=light] .card{border-color:color-mix(in srgb,var(--c-border) 60%,transparent)}
.card:hover{box-shadow:var(--sh-2);transform:translateY(-2px)}
.glass{background:var(--glass-fill);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur)) saturate(1.4);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.4);border-radius:var(--r-lg);box-shadow:var(--sh-2)}
.svc{display:flex;flex-direction:column;min-height:300px;position:relative;overflow:hidden}
.svc .ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--c-surface-2);color:var(--c-primary);margin-bottom:auto}
.svc .ico svg{width:28px;height:28px}
.svc .num{position:absolute;inset-inline-end:24px;top:20px;font:600 13px var(--font-en);color:var(--c-text-muted)}
.svc h3{font-size:var(--fs-h4);margin:28px 0 8px}
.svc p{color:var(--c-text-muted);font-size:15px}
.svc.featured{background:linear-gradient(155deg,#0E7C74 0%,#0B4F63 55%,#0B1F3A 100%);border-color:transparent;color:#fff}
.svc.featured p,.svc.featured .num{color:#D3E6EE}
.svc.featured .ico{background:#ffffff22;color:#fff}
.stat{padding:22px 24px;border-radius:var(--r-lg)}
.stat .v{font:800 34px/1.2 var(--font-fa);color:var(--c-text)}
.stat .l{font-size:14px;color:var(--c-text-muted);margin-top:4px}
.stat .bar{height:4px;border-radius:4px;background:var(--c-surface-2);margin-top:14px;overflow:hidden}
.stat .bar b{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--c-accent),var(--c-primary))}
/* navbar */
.nav{display:flex;align-items:center;gap:28px;height:72px;padding:0 20px 0 12px;border-radius:var(--r-pill)}
.nav .logo{display:flex;align-items:center;gap:10px;font:800 19px var(--font-fa)}
.nav .logo img{width:34px;height:34px}
.nav ul{display:flex;gap:26px;list-style:none;margin-inline-start:auto;font-size:14.5px;font-weight:500;color:var(--c-text-muted)}
.nav ul a:hover,.nav ul a.on{color:var(--c-text)}
.nav .act{display:flex;gap:10px;align-items:center;margin-inline-start:18px}
.iconbtn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--c-border);background:transparent;color:var(--c-text);cursor:pointer}
.iconbtn svg{width:18px;height:18px}
/* fields */
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-size:14px;font-weight:600}
.field label b{color:var(--c-danger);font-weight:700}
.input{height:50px;border-radius:var(--r-md);border:1.5px solid var(--c-border);background:var(--c-surface);color:var(--c-text);font:400 15px var(--font-fa);padding:0 16px;width:100%;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
textarea.input{height:110px;padding:14px 16px;resize:vertical}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-text-muted) 50%),linear-gradient(135deg,var(--c-text-muted) 50%,transparent 50%);background-position:18px 22px,24px 22px;background-size:6px 6px;background-repeat:no-repeat}
.input::placeholder{color:var(--c-text-muted)}
.input:hover,.input.is-hover{border-color:var(--c-text-muted)}
.input:focus,.input.is-focus{outline:none;border-color:var(--c-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--c-focus) 22%,transparent)}
.input.is-error{border-color:var(--c-danger)}
.input:disabled{background:var(--c-surface-2);color:var(--c-text-muted);border-color:transparent}
.help{font-size:12.5px;color:var(--c-text-muted)}
.help.err{color:var(--c-danger);font-weight:600}
.help.ok{color:var(--c-success);font-weight:600}
.input.is-ok{border-color:var(--c-success)}