*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --b950:#020e1f;--b900:#042C53;--b800:#0C447C;--b700:#185FA5;
  --b600:#1e75cc;--b500:#378ADD;--b400:#5fa3e8;--b300:#85B7EB;
  --b200:#B5D4F4;--white:#ffffff;
}
html,body{width:100%;height:100%;background:var(--b950);overflow:hidden;font-family:'DM Sans',sans-serif}
.bg{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%,rgba(30,117,204,0.18) 0%,transparent 65%),
    radial-gradient(ellipse 45% 45% at 88% 75%,rgba(12,68,124,0.2) 0%,transparent 60%),
    radial-gradient(ellipse 38% 45% at 12% 85%,rgba(55,138,221,0.1) 0%,transparent 60%),
    var(--b950);
}
.bg::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(133,183,235,0.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(133,183,235,0.032) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 85% 85% at 50% 50%,black,transparent);
}
canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
#dna{z-index:1}
#ecg{z-index:3}

@keyframes blink{0%,100%{opacity:1}50%{opacity:0.25}}
@keyframes up{to{opacity:1;transform:translateY(0)}}

/* ── Shell ── */
.shell{position:relative;z-index:10;width:100%;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;pointer-events:none}
.shell>*{pointer-events:auto}
.logo-icon{width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,var(--b700),var(--b500));display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(133,183,235,0.22),0 8px 36px rgba(55,138,221,0.3);margin-bottom:1.8rem;opacity:0;transform:translateY(-18px);animation:up 0.9s cubic-bezier(.22,1,.36,1) 0.2s forwards}
.logo-icon svg{width:30px;height:30px}
.title{font-family:'Syne',sans-serif;font-size:clamp(4.5rem,11vw,10rem);font-weight:800;letter-spacing:-0.045em;line-height:1;text-align:center;color:var(--white);opacity:0;transform:translateY(28px);animation:up 1.1s cubic-bezier(.22,1,.36,1) 0.38s forwards}
.title .q{background:linear-gradient(90deg,var(--b300) 0%,var(--b400) 55%,var(--b200) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.tag{margin-top:1.5rem;font-size:0.95rem;font-weight:300;color:rgba(181,212,244,0.5);text-align:center;letter-spacing:0.2em;text-transform:uppercase;opacity:0;transform:translateY(16px);animation:up 1s cubic-bezier(.22,1,.36,1) 0.58s forwards}
.ctas{display:flex;gap:14px;align-items:center;margin-top:3rem;opacity:0;transform:translateY(14px);animation:up 1s cubic-bezier(.22,1,.36,1) 0.76s forwards}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 30px;border-radius:50px;font-family:'DM Sans',sans-serif;font-size:0.93rem;font-weight:500;cursor:pointer;text-decoration:none;border:none;transition:all 0.3s cubic-bezier(.22,1,.36,1);position:relative;overflow:hidden}
.bp{background:linear-gradient(135deg,var(--b600),var(--b500));color:var(--white);box-shadow:0 0 0 1px rgba(133,183,235,0.18),0 8px 28px rgba(55,138,221,0.36)}
.bp::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.13),transparent);opacity:0;transition:opacity 0.3s}
.bp:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(133,183,235,0.28),0 14px 44px rgba(55,138,221,0.5)}
.bp:hover::after{opacity:1}