/* Nexui — marketing landing page.
 * Standalone stylesheet (does not depend on the webmail app CSS). */

:root{
    --bg:#f6f9f7;
    --ink:#0e2a22;
    --ink-soft:#4a5f57;
    --brand:#0b3d2e;      /* deep biotech green */
    --brand-2:#12a67a;    /* vivid teal-green */
    --brand-3:#4fd1a5;
    --accent:#0aa5e9;     /* clinical blue accent */
    --line:#e2ebe6;
    --white:#ffffff;
    --radius:16px;
    --shadow:0 18px 50px rgba(11,61,46,.10);
    --maxw:1140px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.bio-body{
    margin:0;
    font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;
    color:var(--ink);
    background:var(--bg);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Sora',sans-serif;line-height:1.15;margin:0 0 .5em;color:var(--ink)}
p{margin:0 0 1em;color:var(--ink-soft)}
a{color:var(--brand-2);text-decoration:none}
img{max-width:100%}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Buttons */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    font-weight:600;font-family:'Sora',sans-serif;font-size:15px;
    padding:12px 22px;border-radius:999px;border:1.5px solid transparent;
    cursor:pointer;transition:.18s ease;white-space:nowrap;
}
.btn-primary{background:var(--brand-2);color:#fff}
.btn-primary:hover{background:var(--brand);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--brand);border-color:rgba(11,61,46,.22)}
.btn-ghost:hover{background:rgba(18,166,122,.08)}
.btn-outline{background:transparent;color:var(--brand);border-color:var(--brand-2)}
.btn-outline:hover{background:var(--brand-2);color:#fff}
.btn-block{width:100%}

.kicker{
    display:inline-block;font-family:'Sora',sans-serif;font-weight:600;
    font-size:13px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--brand-2);margin-bottom:12px;
}
.kicker.light{color:var(--brand-3)}

/* Header */
.site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(246,249,247,.85);backdrop-filter:blur(10px);
    border-bottom:1px solid transparent;transition:.2s;
}
.site-header.scrolled{border-bottom-color:var(--line);background:rgba(255,255,255,.92)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;color:var(--brand);font-weight:700;text-decoration:none}
.brand-mark{display:inline-flex;line-height:0}
.brand-mark svg{display:block;border-radius:11px;box-shadow:0 4px 12px rgba(18,166,122,.28)}
.brand-name{font-family:'Sora',sans-serif;font-size:22px;font-weight:700;letter-spacing:-.02em;color:var(--brand)}
.brand-name strong{color:var(--brand-2);font-weight:700}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{color:var(--ink);font-weight:500;font-size:15px}
.site-nav a:not(.nav-cta):hover{color:var(--brand-2)}
.nav-cta{padding:9px 18px;font-size:14px}

.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.nav-toggle span{width:24px;height:2px;background:var(--brand);border-radius:2px;transition:.2s}

/* Hero */
.hero{position:relative;overflow:hidden;padding:72px 0 84px}
.hero-glow{
    position:absolute;inset:0;pointer-events:none;
    background:
        radial-gradient(600px 400px at 85% 10%, rgba(79,209,165,.28), transparent 60%),
        radial-gradient(520px 360px at 10% 90%, rgba(10,165,233,.16), transparent 60%);
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{
    display:inline-block;font-size:13px;font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;color:var(--brand-2);
    background:rgba(18,166,122,.1);padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.hero h1{font-size:clamp(2.1rem,4.5vw,3.4rem);letter-spacing:-.02em;margin-bottom:.4em}
.lede{font-size:1.15rem;max-width:38ch;color:var(--ink-soft)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin:26px 0 30px}
.hero-badges{list-style:none;display:flex;gap:26px;padding:0;margin:0;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
.hero-badges li{display:flex;flex-direction:column}
.hero-badges span{font-family:'Sora',sans-serif;font-weight:700;color:var(--brand);font-size:18px}

/* Hero visual — animated DNA double helix (pure CSS, CSP-safe) */
.hero-visual{display:flex;justify-content:center;align-items:center;min-height:420px;position:relative}
.dna{position:relative;width:200px;height:400px;perspective:900px;transform:rotateX(6deg);animation:dnaFloat 6s ease-in-out infinite}
@keyframes dnaFloat{0%,100%{transform:rotateX(6deg) translateY(0)}50%{transform:rotateX(6deg) translateY(-10px)}}
.dna-glow{position:absolute;inset:-40px;border-radius:50%;pointer-events:none;
    background:radial-gradient(circle at 50% 50%, rgba(18,166,122,.20), rgba(10,165,233,.12) 45%, transparent 70%);
    filter:blur(6px);animation:dnaPulse 4s ease-in-out infinite}
.dna-rotor{position:absolute;inset:0;transform-style:preserve-3d;animation:dnaSpin 8s linear infinite}
.dna-rung{position:absolute;left:50%;height:6px;border-radius:6px;transform-style:preserve-3d;transform-origin:center}
.dna-rung .node{position:absolute;top:50%;width:12px;height:12px;margin-top:-6px;border-radius:50%;box-shadow:0 0 10px rgba(18,166,122,.6)}
.dna-rung .node.l{left:-6px;background:var(--brand-2)}
.dna-rung .node.r{right:-6px;background:var(--accent)}
.dna-rung .bar{position:absolute;top:50%;left:6px;right:6px;height:3px;margin-top:-1.5px;border-radius:3px;
    background:linear-gradient(90deg,var(--brand-2),var(--accent));opacity:.55}
@keyframes dnaSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes dnaPulse{0%,100%{opacity:.7;transform:scale(.96)}50%{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
    .dna-rotor,.dna-glow{animation:none}
}
/* Hero visual — DNA helix (legacy fallback) */
.hero-visual{display:flex;justify-content:center;align-items:center;min-height:340px}
.helix{position:relative;width:120px;height:320px}
.helix span{
    position:absolute;left:50%;width:120px;height:14px;border-radius:999px;
    background:linear-gradient(90deg,var(--brand-2),var(--accent));
    transform:translateX(-50%);opacity:.85;
    animation:twist 3.4s ease-in-out infinite;
}
.helix span:nth-child(1){top:0%;animation-delay:0s}
.helix span:nth-child(2){top:9%;animation-delay:.12s}
.helix span:nth-child(3){top:18%;animation-delay:.24s}
.helix span:nth-child(4){top:27%;animation-delay:.36s}
.helix span:nth-child(5){top:36%;animation-delay:.48s}
.helix span:nth-child(6){top:45%;animation-delay:.6s}
.helix span:nth-child(7){top:54%;animation-delay:.72s}
.helix span:nth-child(8){top:63%;animation-delay:.84s}
.helix span:nth-child(9){top:72%;animation-delay:.96s}
.helix span:nth-child(10){top:81%;animation-delay:1.08s}
.helix span:nth-child(11){top:90%;animation-delay:1.2s}
.helix span:nth-child(12){top:99%;animation-delay:1.32s}
@keyframes twist{
    0%,100%{transform:translateX(-50%) scaleX(.2);opacity:.35}
    50%{transform:translateX(-50%) scaleX(1);opacity:.9}
}
@media (prefers-reduced-motion:reduce){.helix span{animation:none;transform:translateX(-50%) scaleX(.7)}}

/* Trust strip */
.strip{background:var(--brand);color:#dff3ec;padding:20px 0}
.strip-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap;justify-content:center}
.strip-label{font-size:13px;letter-spacing:.05em;text-transform:uppercase;opacity:.75}
.strip-logos{display:flex;gap:30px;flex-wrap:wrap;justify-content:center}
.strip-logos span{font-family:'Sora',sans-serif;font-weight:600;opacity:.85;font-size:15px}

/* Sections */
.section{padding:80px 0}
.section-head{max-width:640px;margin-bottom:44px}
.section-head.center{margin-inline:auto;text-align:center}
.section-head h2,.section h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.01em}
.section-sub{font-size:1.05rem}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.link-arrow{font-weight:600;font-family:'Sora',sans-serif}

/* About — visual left, content (text + cards) right */
.about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:48px;align-items:center}
.about-media img{width:100%;border-radius:18px;box-shadow:var(--shadow);object-fit:cover;aspect-ratio:4/3;display:block}

/* Animated molecule (biotech motif) — pure CSS, CSP-safe */
.about-media .molecule{
    position:relative;width:100%;max-width:360px;aspect-ratio:3/4;margin-inline:auto;border-radius:18px;overflow:hidden;
    background:radial-gradient(120% 120% at 30% 20%, #0e3b5c 0%, #0b2740 45%, #07182a 100%);
    box-shadow:var(--shadow);display:grid;place-items:center;
}
.mol-nucleus{position:absolute;width:46px;height:46px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #7dffd0, var(--brand-2) 55%, #0c7a58);
    box-shadow:0 0 26px rgba(33,193,135,.75);animation:molPulse 2.8s ease-in-out infinite;z-index:2}
.mol-orbit{position:absolute;top:50%;left:50%;width:230px;height:230px;margin:-115px 0 0 -115px;
    border:1.5px solid rgba(120,220,255,.30);border-radius:50%;transform-style:preserve-3d}
.mol-orbit.o1{animation:molSpin1 6s linear infinite}
.mol-orbit.o2{animation:molSpin2 7.5s linear infinite}
.mol-orbit.o3{animation:molSpin3 9s linear infinite}
.mol-orbit .electron{position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #d5f3ff, #0aa5e9 60%, #0761a8);
    box-shadow:0 0 14px rgba(10,165,233,.9)}
.mol-dot{position:absolute;width:5px;height:5px;border-radius:50%;background:rgba(160,230,255,.8);
    animation:molTwinkle 3.5s ease-in-out infinite}
.mol-dot.d1{top:16%;left:22%;animation-delay:0s}
.mol-dot.d2{top:26%;left:78%;animation-delay:.5s}
.mol-dot.d3{top:70%;left:18%;animation-delay:1s}
.mol-dot.d4{top:80%;left:72%;animation-delay:1.5s}
.mol-dot.d5{top:44%;left:88%;animation-delay:2s}
.mol-dot.d6{top:60%;left:40%;animation-delay:2.5s}
@keyframes molSpin1{from{transform:rotateZ(0deg) rotateX(72deg) rotateY(0)}to{transform:rotateZ(0deg) rotateX(72deg) rotateY(360deg)}}
@keyframes molSpin2{from{transform:rotateZ(60deg) rotateX(72deg) rotateY(360deg)}to{transform:rotateZ(60deg) rotateX(72deg) rotateY(0)}}
@keyframes molSpin3{from{transform:rotateZ(120deg) rotateX(72deg) rotateY(0)}to{transform:rotateZ(120deg) rotateX(72deg) rotateY(360deg)}}
@keyframes molPulse{0%,100%{transform:scale(1);box-shadow:0 0 22px rgba(33,193,135,.6)}50%{transform:scale(1.12);box-shadow:0 0 34px rgba(33,193,135,.9)}}
@keyframes molTwinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.mol-orbit,.mol-nucleus,.mol-dot{animation:none}}
.about-content .kicker{margin-top:0}
.about-cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0 20px}
.mini-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:20px;transition:.18s}
.mini-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.mini-card h3{font-size:1.05rem;color:var(--brand)}
.mini-card p{margin:0;font-size:.95rem}

/* Focus */
.focus{background:linear-gradient(180deg,#fff, #f0f6f3)}
.focus-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.focus-card{
    background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
    transition:.2s;position:relative;overflow:hidden;display:flex;flex-direction:column;
}
.focus-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
/* Banners carry their own baked-in title, so show them whole (no crop) at the
   image's natural ~1.85:1 ratio, and add only a short caption below. */
.focus-media{aspect-ratio:1.87;overflow:hidden;background:#eef4f1}
.focus-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s}
.focus-card:hover .focus-media img{transform:scale(1.03)}
.focus-body{padding:16px 20px 20px}
.focus-body p{margin:0;font-size:.95rem;color:var(--ink-soft)}

/* Pipeline */
.pipe-table{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--white)}
.pipe-row{display:grid;grid-template-columns:1fr 1.2fr 1fr 1.4fr;align-items:center;padding:16px 22px;border-bottom:1px solid var(--line)}
.pipe-row:last-child{border-bottom:0}
.pipe-head{background:var(--brand);color:#dff3ec;font-family:'Sora',sans-serif;font-weight:600;font-size:14px;letter-spacing:.03em}
.pipe-row:not(.pipe-head) span[role="cell"]{font-size:.98rem;color:var(--ink)}
.pipe-row:not(.pipe-head):nth-child(even){background:#fafcfb}
.stage{display:block;position:relative;height:8px;border-radius:999px;background:var(--line);max-width:220px}
.stage::after{content:attr(data-stage);position:absolute;top:-24px;left:0;font-size:12px;font-weight:600;color:var(--brand);font-family:'Sora',sans-serif}
.stage::before{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,var(--brand-2),var(--accent))}
.stage-1::before{width:28%}
.stage-2::before{width:55%}
.stage-3::before{width:82%}

/* Impact */
.impact{background:var(--brand);color:#eafaf4}
.impact .section-head h2{color:#fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{text-align:center;padding:24px 12px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);background:rgba(255,255,255,.05)}
.stat-num{display:block;font-family:'Sora',sans-serif;font-weight:700;font-size:2.6rem;color:#fff;line-height:1}
.stat-num::after{content:"+";color:var(--brand-3)}
.stat-label{font-size:.95rem;color:#c9efe0}

/* Contact */
.contact-card{
    display:grid;grid-template-columns:1fr 1fr;gap:44px;
    background:var(--white);border:1px solid var(--line);border-radius:24px;
    padding:44px;box-shadow:var(--shadow);
}
.contact-list{list-style:none;padding:0;margin:18px 0 0}
.contact-list li{padding:8px 0;border-top:1px solid var(--line);font-size:.98rem}
.contact-list strong{display:block;font-family:'Sora',sans-serif;color:var(--brand);font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.contact-form label{display:block;font-weight:600;font-size:14px;margin:12px 0 6px;color:var(--ink)}
.contact-form input,.contact-form textarea{
    width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:12px;
    font-family:inherit;font-size:15px;background:#fbfdfc;transition:.15s;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--brand-2);background:#fff}
.contact-form .btn{margin-top:16px}
.form-note{font-size:14px;margin-top:10px;min-height:1.2em;color:var(--brand-2)}

/* Footer */
.site-footer{background:#08281e;color:#bcd7cc;padding:56px 0 26px}
.footer-inner{display:grid;grid-template-columns:1.3fr 2fr;gap:40px;padding-bottom:32px;border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand-link{display:inline-flex;align-items:center;gap:11px;text-decoration:none;margin-bottom:2px}
.footer-brand .brand-name{color:#fff;font-size:22px}
.footer-brand .brand-name strong{color:var(--brand-3)}
.footer-brand p{color:#93b6a9;margin-top:10px;max-width:34ch}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.footer-cols h4{color:#fff;font-size:14px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px}
.footer-cols a{display:block;color:#bcd7cc;padding:5px 0;font-size:14px}
.footer-cols a:hover{color:var(--brand-3)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;font-size:13px;color:#7fa294;flex-wrap:wrap;gap:8px}

/* Responsive */
@media (max-width:900px){
    .hero-inner,.grid-2,.contact-card,.footer-inner,.about-grid{grid-template-columns:1fr}
    .about-media{order:-1}
    .about-media img{aspect-ratio:16/9}
    .hero-visual{order:-1;min-height:220px}
    .focus-grid{grid-template-columns:1fr 1fr}
    .stats{grid-template-columns:1fr 1fr}
    .site-nav{
        position:fixed;inset:70px 0 auto 0;flex-direction:column;gap:0;
        background:#fff;border-bottom:1px solid var(--line);padding:8px 0;
        transform:translateY(-120%);transition:.25s;box-shadow:var(--shadow);
    }
    .site-nav.open{transform:translateY(0)}
    .site-nav a{padding:14px 24px;width:100%}
    .nav-cta{margin:10px 24px;width:calc(100% - 48px)}
    .nav-toggle{display:flex}
    .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-toggle.open span:nth-child(2){opacity:0}
    .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}
@media (max-width:560px){
    .focus-grid,.stats,.about-cards,.footer-cols{grid-template-columns:1fr}
    .pipe-head{display:none}
    .pipe-row{grid-template-columns:1fr;gap:6px;padding:16px 18px}
    .pipe-row span[role="cell"]::before{content:attr(data-label) ": ";font-weight:600;color:var(--brand)}
    .stage{margin-top:26px}
}