/* Tayanch — Biometric Lab design system (the only theme; light + dark). Light lab: clinical cool-white + scanner teal. Dark lab: deep-teal night lab. Explicit choice via data-theme on ; otherwise follows the system. */ *,*::before,*::after{box-sizing:border-box} :root{ --ink:#0d2b33;--sub:#5b7a83;--line:#d7e6ea;--line2:#e4eff2; --blue:#0891b2;--blue2:#22b8d4;--red:#d13c2e;--redbg:#fdeae7;--green:#0a8f6c;--greenbg:#e2f6ef; --bg:#f4f9fa;--alt:#e9f2f4;--maxw:1000px; --card:#ffffff;--chipbg:#dfecef;--ctabg:#e9f2f4;--ctabg2:#dce9ec; --navbg:rgba(244,249,250,.85);--navline:rgba(8,145,178,.15);--menubg:rgba(244,249,250,.97); --dropline:#b9d3da;--dropdrag:#e3f4f8;--droplocked:#eef5f7; --uncsig:#5b7a83; --navcta1:#0891b2;--navcta2:#067a96;--navctaink:#fff; --acc1:#22b8d4;--acc2:#0891b2;--accshadow:rgba(8,145,178,.30);--accshadow2:rgba(8,145,178,.45); --meshbg:#06272e;--blob1:#22b8d4;--blob2:#0a8f6c;--blob3:#155e6e; } :root[data-theme="dark"]{ --ink:#dcecf1;--sub:#8fb0ba;--line:#20363e;--line2:#182b32; --blue:#2fc4e0;--blue2:#4fd4ec;--red:#ff7a6e;--redbg:#3c1a15;--green:#4fd6a5;--greenbg:#0f3226; --bg:#0a1418;--alt:#0e1a1f; --card:#122129;--chipbg:#1b2f37;--ctabg:#1b2f37;--ctabg2:#254049; --navbg:rgba(10,20,24,.82);--navline:rgba(34,184,212,.14);--menubg:rgba(10,20,24,.97); --dropline:#2b4650;--dropdrag:#0e2f38;--droplocked:#101d23; --uncsig:#8fb0ba; --navcta1:#22b8d4;--navcta2:#0a7f9c;--navctaink:#fff; --acc1:#4fd4ec;--acc2:#0891b2;--accshadow:rgba(8,145,178,.35);--accshadow2:rgba(8,145,178,.5); --meshbg:#04181d;--blob1:#22b8d4;--blob2:#0a8f6c;--blob3:#155e6e; } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --ink:#dcecf1;--sub:#8fb0ba;--line:#20363e;--line2:#182b32; --blue:#2fc4e0;--blue2:#4fd4ec;--red:#ff7a6e;--redbg:#3c1a15;--green:#4fd6a5;--greenbg:#0f3226; --bg:#0a1418;--alt:#0e1a1f; --card:#122129;--chipbg:#1b2f37;--ctabg:#1b2f37;--ctabg2:#254049; --navbg:rgba(10,20,24,.82);--navline:rgba(34,184,212,.14);--menubg:rgba(10,20,24,.97); --dropline:#2b4650;--dropdrag:#0e2f38;--droplocked:#101d23; --uncsig:#8fb0ba; --navcta1:#22b8d4;--navcta2:#0a7f9c;--navctaink:#fff; --acc1:#4fd4ec;--acc2:#0891b2;--accshadow:rgba(8,145,178,.35);--accshadow2:rgba(8,145,178,.5); --meshbg:#04181d;--blob1:#22b8d4;--blob2:#0a8f6c;--blob3:#155e6e; } } html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--ink);line-height:1.4; font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',system-ui,sans-serif; -webkit-font-smoothing:antialiased} a{text-decoration:none;color:var(--blue)} a:hover{text-decoration:underline} ::selection{background:var(--ink);color:var(--bg)} svg{display:block} h1,h2,p{margin:0} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .wrap.narrow{max-width:640px} /* NAV */ .nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:0 20px;height:52px;background:var(--navbg); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--navline)} .brand{font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink)} .brand:hover{text-decoration:none} .nav-links{display:none;align-items:center;gap:28px;font-size:12.5px} .nav-links a{color:var(--ink)} .nav-links a.active{color:var(--blue);font-weight:600} .nav-cta{display:none;font-size:12.5px;padding:7px 16px;border-radius:980px;color:var(--navctaink);white-space:nowrap; background:linear-gradient(180deg,var(--navcta1),var(--navcta2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(0,0,0,.2);transition:transform .22s ease} .nav-cta:hover{text-decoration:none;transform:translateY(-1px)} .theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;padding:0; transition:background .18s ease} .theme-btn:hover{background:var(--chipbg)} .theme-btn .sun{display:none}.theme-btn .moon{display:block} html.dark-active .theme-btn .sun{display:block} html.dark-active .theme-btn .moon{display:none} .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px; background:none;border:0;cursor:pointer;padding:9px;margin-right:-9px} .burger span{height:2px;background:var(--ink);border-radius:2px;transition:transform .22s ease,opacity .18s ease} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .menu{position:fixed;top:52px;left:0;right:0;z-index:29;display:none;flex-direction:column; padding:6px 24px 18px;background:var(--menubg);border-bottom:1px solid var(--line); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)} .menu.open{display:flex} .menu a{color:var(--ink);font-size:16px;padding:13px 0;border-bottom:1px solid var(--line2)} .menu a.cta{color:var(--blue);font-weight:600;border-bottom:0} /* BUTTONS */ .btn{display:inline-block;border:0;cursor:pointer;font:inherit} .btn-primary{padding:13px 28px;border-radius:980px;color:#fff;font-weight:500;font-size:17px; background:linear-gradient(180deg,var(--acc1),var(--acc2)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 22px var(--accshadow); transition:transform .22s ease,box-shadow .22s ease} .btn-primary:hover{transform:translateY(-1px);text-decoration:none; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 12px 30px var(--accshadow2)} .btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none} .btn-link{padding:13px 12px;color:var(--blue);font-weight:500} /* HERO */ .hero{text-align:center;padding:64px 24px 44px} .hero h1{font-size:clamp(33px,8.5vw,72px);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin-bottom:16px} .hero-sub{font-size:clamp(17px,4.5vw,21px);color:var(--sub);max-width:600px;margin:0 auto 30px} .hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center} .page-head{text-align:center;padding:56px 24px 8px} .page-head h1{font-size:clamp(30px,7vw,52px);font-weight:600;letter-spacing:-.02em;margin-bottom:12px} .page-head p{color:var(--sub);font-size:clamp(15px,4vw,18px);max-width:560px;margin:0 auto} /* HERO VISUAL */ .visual{max-width:1000px;margin:0 auto;padding:0 20px 64px} .mesh{position:relative;border-radius:24px;overflow:hidden;background:var(--meshbg);isolation:isolate; display:flex;align-items:center;justify-content:center;padding:46px 14px} .blob{position:absolute;border-radius:50%;filter:blur(64px);opacity:.85;pointer-events:none} .blob.b1{background:radial-gradient(circle,var(--blob1),transparent 70%)} .blob.b2{background:radial-gradient(circle,var(--blob2),transparent 70%)} .blob.b3{background:radial-gradient(circle,var(--blob3),transparent 70%)} .compare{position:relative;z-index:2;display:flex;gap:clamp(10px,3vw,22px);align-items:stretch} .glass{position:relative;width:min(210px,42vw);padding:clamp(12px,3.4vw,18px);border-radius:22px; transform:translateZ(0); backdrop-filter:blur(26px) saturate(180%);-webkit-backdrop-filter:blur(26px) saturate(180%); background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.07)); border:1px solid rgba(255,255,255,.45); box-shadow:inset 0 1px 1px rgba(255,255,255,.7),0 20px 50px rgba(0,0,0,.35)} .glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(115deg,rgba(255,255,255,.38),rgba(255,255,255,0) 32%,rgba(255,255,255,0) 68%,rgba(255,255,255,.16)); opacity:.85} .thumb{position:relative;height:clamp(82px,24vw,118px);border-radius:14px;overflow:hidden;margin-bottom:14px; display:flex;align-items:flex-end;justify-content:center} .thumb svg.person{width:clamp(44px,14vw,66px);height:auto} .grid-ovl{position:absolute;inset:0;mix-blend-mode:overlay; background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.16) 0 1px,transparent 1px 13px), repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 1px,transparent 1px 13px)} /* detection overlay on the AI card: a frame FITTED to the subject's head (sized relative to the svg wrapper, so it tracks the responsive icon) plus a measurement tag — reads as instrument output, not decoration */ .subject{position:relative;display:flex;align-items:flex-end;justify-content:center} .det-frame{position:absolute;left:50%;transform:translateX(-50%); top:-6%;width:62%;aspect-ratio:1;border:1.5px dashed rgba(255,255,255,.95); border-radius:10px;box-shadow:0 0 0 3px rgba(255,90,122,.30)} .det-tag{position:absolute;top:8px;right:8px;padding:3px 8px;border-radius:6px; font-size:9.5px;font-weight:600;letter-spacing:.02em;color:#fff; background:rgba(215,60,46,.85);white-space:nowrap} .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:980px;font-size:13px;font-weight:600} .cap{color:rgba(255,255,255,.75);font-size:11.5px;line-height:1.4;margin-top:10px} .chips{position:absolute;z-index:3;top:14%;left:7%;display:none;flex-direction:column;gap:10px} .chip-float{position:absolute;z-index:3;bottom:16%;right:8%;display:none} .chip{padding:9px 15px;border-radius:980px;color:#fff;font-size:13px;font-weight:500;align-self:flex-start; transform:translateZ(0); backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%); background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.4); box-shadow:inset 0 1px 1px rgba(255,255,255,.75),0 6px 22px rgba(0,0,0,.18)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .glass{background:linear-gradient(135deg,rgba(24,52,60,.92),rgba(14,36,44,.88))} .chip{background:rgba(24,52,60,.9)} } /* SECTIONS */ .section{padding:64px 0} .section.alt{background:var(--alt)} .h2{font-size:clamp(28px,7.5vw,40px);font-weight:600;letter-spacing:-.015em;text-align:center;margin-bottom:14px} .lead{color:var(--sub);font-size:clamp(15px,4vw,17px);text-align:center;max-width:520px;margin:0 auto 40px} /* HOW */ .how-grid{display:grid;grid-template-columns:1fr;gap:32px} .step-num{font-size:13px;font-weight:600;color:var(--blue);margin-bottom:10px} .step-title{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px} .step-body{color:var(--sub);font-size:15px;line-height:1.5} /* DEMO */ .demo-card{background:var(--card);border-radius:20px;padding:clamp(22px,5vw,40px);box-shadow:0 2px 24px rgba(0,0,0,.06);text-align:center} .tabs{display:inline-flex;border-radius:980px;padding:3px;background:var(--chipbg);margin-bottom:24px;max-width:100%} .tab{border:0;cursor:pointer;padding:7px 16px;border-radius:980px;font-size:13.5px;background:transparent;color:var(--sub);font:inherit;font-size:13.5px} .tab.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} .dropzone{border:1px dashed var(--dropline);border-radius:14px;padding:34px 18px;color:var(--sub);font-size:15px; margin-bottom:24px;cursor:pointer;transition:border-color .18s ease,background .18s ease;word-break:break-word} .dropzone.drag{border-color:var(--blue);background:var(--dropdrag);color:var(--blue)} .dropzone.locked{cursor:default;border-style:solid;border-color:var(--line);background:var(--droplocked)} .urlrow{display:flex;align-items:center;gap:10px;margin:-10px 0 6px} .urlrow-or{color:var(--sub);font-size:12.5px;flex:0 0 auto} .urlinput{flex:1;min-width:0;padding:10px 14px;border-radius:980px;border:1px solid var(--line); background:var(--card);color:var(--ink);font:inherit;font-size:13.5px;outline:none; transition:border-color .18s ease} .urlinput:focus{border-color:var(--blue)} .urlinput::placeholder{color:var(--sub)} .urlbtn{flex:0 0 auto;padding:9px 16px;border-radius:980px;font-size:13.5px;font-weight:500; background:var(--chipbg);color:var(--ink)} .urlbtn:hover{background:var(--ctabg2)} .urlbtn:disabled{opacity:.5;cursor:not-allowed} .urlnote{color:var(--sub);font-size:11.5px;margin-bottom:18px} .urlrow.hidden,.urlnote.hidden{display:none} .result{margin-top:26px;padding-top:22px;border-top:1px solid var(--line);display:none; flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;text-align:left} .result .k{font-size:13px;color:var(--sub);margin-bottom:4px} .result .v{font-weight:600;font-size:19px} .result-left{display:flex;align-items:center;gap:14px} .result-thumb{width:56px;height:56px;border-radius:10px;object-fit:cover;border:1px solid var(--line)} .sigs{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end} .sig{padding:5px 11px;border-radius:980px;font-size:12px} .v-ai{color:var(--red)} .v-real{color:var(--green)} .v-unc{color:var(--uncsig)} .sig-ai{background:var(--redbg);color:var(--red)} .sig-real{background:var(--greenbg);color:var(--green)} .sig-unc{background:var(--chipbg);color:var(--sub)} /* API */ .api-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start} .statcard{background:var(--card);border-radius:20px;padding:clamp(24px,5vw,36px);box-shadow:0 2px 24px rgba(0,0,0,.06)} .statcard-title{font-size:21px;font-weight:600;letter-spacing:-.01em;margin-bottom:8px} .statcard-sub{color:var(--sub);font-size:14.5px;line-height:1.5;margin:0 0 26px} .statgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 18px} .stat-n{font-size:clamp(28px,6vw,40px);font-weight:600;letter-spacing:-.02em;color:var(--blue);line-height:1.1} .stat-l{color:var(--sub);font-size:13px;line-height:1.45;margin-top:4px} .statcard-note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line2);color:var(--sub);font-size:12px;line-height:1.5} .code{background:#0b1e24;border-radius:18px;padding:22px;overflow-x:auto; font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:13px;color:#d9ecf1} .code .c{color:#6d8f99} .code pre{margin:0;white-space:pre;line-height:1.7;font:inherit} .points{display:flex;flex-direction:column;gap:22px} .pt-title{font-weight:600;font-size:17px;margin-bottom:4px} .pt-body{color:var(--sub);font-size:15px;line-height:1.5} /* PRICING */ .seg{display:flex;justify-content:center;margin-bottom:32px} .seg-inner{display:inline-flex;border-radius:980px;padding:3px;background:var(--chipbg)} .seg-btn{border:0;cursor:pointer;padding:8px 20px;border-radius:980px;font-size:14px;background:transparent;color:var(--sub);font:inherit;font-size:14px} .seg-btn.active{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08)} .pricing-grid{display:grid;grid-template-columns:1fr;gap:16px} .tier{background:var(--card);border-radius:18px;padding:30px 26px;box-shadow:0 2px 20px rgba(0,0,0,.05)} .tier .name{font-weight:600;font-size:19px;margin-bottom:6px} .tier .price{font-size:32px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px} .tier .unit{color:var(--sub);font-size:13px;margin-bottom:20px} .tier .desc{color:var(--sub);font-size:14.5px;line-height:1.5;margin-bottom:24px} .tier .cta{display:block;text-align:center;padding:10px;border-radius:980px;background:var(--ctabg);font-size:15px;color:var(--ink)} .tier .cta:hover{text-decoration:none;background:var(--ctabg2)} .payg{background:var(--card);border-radius:18px;padding:clamp(24px,5vw,40px);box-shadow:0 2px 20px rgba(0,0,0,.05)} .payg-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:start} .payg h3{font-weight:600;font-size:21px;margin:0 0 10px} .payg p{color:var(--sub);font-size:15px;line-height:1.5;margin:0 0 24px} .rates{display:flex;flex-wrap:wrap;gap:24px 32px;margin-bottom:24px} .rate .n{font-size:24px;font-weight:600} .rate .l{color:var(--sub);font-size:13px} .keys{border:1px solid var(--line);border-radius:14px;overflow:hidden} .keys-head{padding:12px 18px;background:var(--ctabg);font-size:12px;color:var(--sub);letter-spacing:.02em} .key-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-top:1px solid var(--line2)} .key-row .mono{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:12px;color:var(--sub)} .hidden{display:none !important} /* FOOTER */ .footer{padding:28px 24px;font-size:12px;color:var(--sub);border-top:1px solid var(--line)} .footer-inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center;justify-content:space-between} .footer-contact{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center} .footer-contact a{color:var(--sub)} .footer-contact a:hover{color:var(--blue);text-decoration:none} /* CONTACT-SALES MODAL */ .cmodal-backdrop{position:fixed;inset:0;z-index:60;background:rgba(4,24,29,.55);display:none; align-items:center;justify-content:center;padding:18px; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .cmodal-backdrop.open{display:flex} .cmodal{background:var(--card);border-radius:20px;max-width:430px;width:100%;padding:clamp(22px,5vw,32px); box-shadow:0 24px 70px rgba(0,0,0,.35);max-height:90vh;overflow-y:auto} .cmodal h3{margin:0 0 6px;font-size:20px;font-weight:600;letter-spacing:-.01em} .cmodal .sub{color:var(--sub);font-size:13.5px;line-height:1.5;margin:0 0 18px} .cmodal .direct{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;padding:14px 16px; border:1px solid var(--line);border-radius:12px;font-size:14px} .cmodal .direct a{font-weight:500} .cmodal label{display:block;text-align:left;font-size:12px;color:var(--sub);margin:12px 0 4px} .cmodal input,.cmodal textarea{width:100%;padding:10px 14px;border-radius:12px;border:1px solid var(--line); background:var(--bg);color:var(--ink);font:inherit;font-size:14px;outline:none} .cmodal input:focus,.cmodal textarea:focus{border-color:var(--blue)} .cmodal textarea{resize:vertical;min-height:64px} .cmodal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px} .cmodal .btn-ghost{padding:11px 18px;border-radius:980px;background:var(--chipbg);color:var(--ink);font-size:14px} .cmodal .btn-primary{font-size:14px;padding:11px 22px} .cmodal .ok-msg{color:var(--green);font-weight:500;font-size:14.5px;margin-top:14px;display:none} .cmodal .err-msg{color:var(--red);font-size:13px;margin-top:10px;display:none} /* responsive */ @media (min-width:768px){ .nav-links{display:flex} .nav-cta{display:inline-block} .burger{display:none} .menu{display:none !important} .hero{padding:100px 24px 64px} .mesh{aspect-ratio:16/8;padding:0} .chips{display:flex} .chip-float{display:block} .section{padding:88px 0} .how-grid{grid-template-columns:repeat(3,1fr);gap:48px} .api-grid{grid-template-columns:1fr 1fr;gap:32px} .pricing-grid{grid-template-columns:repeat(3,1fr);gap:20px} .payg-grid{grid-template-columns:1.1fr 1fr;gap:40px} } @media (prefers-reduced-motion:no-preference){ .blob{animation:blobdrift 12s ease-in-out infinite} .blob.b2{animation-duration:13s;animation-direction:reverse} .blob.b3{animation-duration:10s} .chips{animation:floaty 6s ease-in-out infinite} .chip-float{animation:floaty2 7s ease-in-out infinite} } @keyframes floaty{0%,100%{transform:translate(0,0)}50%{transform:translate(0,-14px)}} @keyframes floaty2{0%,100%{transform:translate(0,0)}50%{transform:translate(0,12px)}} @keyframes blobdrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(24px,-18px) scale(1.08)}}