:root{
  --c-bg:#16123A;
  --c-bg2:#1E1A4D;
  --c-magenta:#FF2E92;
  --c-cyan:#22D3EE;
  --c-text:#F4F1FF;
  --c-text-dim:#B9B3E6;
  --f-disp:'Syne',system-ui,sans-serif;
  --f-body:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--f-body);
  color:var(--c-text);
  background:var(--c-bg);
  line-height:1.65;
  position:relative;
  overflow-x:hidden;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 22px;position:relative;z-index:1}
h1,h2,h3{font-family:var(--f-disp);line-height:1.1;color:var(--c-text);font-weight:800;letter-spacing:-.01em}
a{color:inherit}
img{max-width:100%}

/* molecular strand backdrop */
.strand-bg{
  position:absolute;top:0;left:0;width:100%;height:640px;z-index:0;pointer-events:none;
  background:
    radial-gradient(560px 380px at 82% -8%, color-mix(in srgb,var(--c-magenta) 38%,transparent), transparent 70%),
    radial-gradient(480px 420px at 8% 12%, color-mix(in srgb,var(--c-cyan) 26%,transparent), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 54px, color-mix(in srgb,var(--c-cyan) 7%,transparent) 54px 56px),
    repeating-linear-gradient(65deg, transparent 0 54px, color-mix(in srgb,var(--c-magenta) 6%,transparent) 54px 56px);
}
.strand-bg--footer{height:100%}

/* ---------- floating pill nav ---------- */
header.nav{
  position:sticky;top:14px;z-index:20;
  display:flex;flex-direction:column;gap:8px;align-items:center;
  padding:0 16px;
}
header.nav .pill{
  width:100%;max-width:980px;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:color-mix(in srgb, var(--c-bg2) 82%, transparent);
  border:1px solid color-mix(in srgb, var(--c-cyan) 22%, transparent);
  border-radius:999px;
  padding:10px 10px 10px 22px;
  backdrop-filter:blur(14px);
  box-shadow:0 12px 34px -14px rgba(0,0,0,.55);
}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--f-disp);font-weight:800;font-size:19px;color:var(--c-text);text-decoration:none;white-space:nowrap}
.brand-dot{width:11px;height:11px;border-radius:50%;background:linear-gradient(135deg,var(--c-magenta),var(--c-cyan));display:inline-block;box-shadow:0 0 12px color-mix(in srgb,var(--c-magenta) 70%,transparent)}
.navlinks{display:flex;align-items:center;gap:4px}
.navlinks a{text-decoration:none;font-size:14px;font-weight:600;color:var(--c-text-dim);padding:9px 16px;border-radius:999px;transition:.15s}
.navlinks a:hover{color:var(--c-text);background:color-mix(in srgb,var(--c-cyan) 12%,transparent)}
.navlinks a.navcta{background:var(--c-magenta);color:#1A0A16;font-weight:800}
.navlinks a.navcta:hover{background:color-mix(in srgb,var(--c-magenta) 85%,white)}

.langs{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:980px;
  padding:6px 10px;
}
.langs a{
  font-size:11px;font-weight:700;letter-spacing:.03em;color:var(--c-text-dim);text-decoration:none;
  padding:5px 11px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-text) 14%,transparent);
  background:color-mix(in srgb,var(--c-bg2) 55%,transparent);
}
.langs a:hover{color:var(--c-text);border-color:var(--c-cyan)}
.langs a.active{background:var(--c-cyan);color:#0A2730;border-color:var(--c-cyan)}

/* ---------- hero (full-bleed video) ---------- */
.hero.hero-full{
  position:relative;overflow:hidden;
  height:90vh;min-height:600px;max-height:960px;
  display:flex;align-items:flex-end;
}
.hero-full-video{
  position:absolute;top:0;left:0;z-index:0;
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg, color-mix(in srgb,var(--c-bg) 20%,transparent) 0%, color-mix(in srgb,var(--c-bg) 42%,transparent) 45%, color-mix(in srgb,var(--c-bg) 92%,transparent) 100%),
    radial-gradient(65% 65% at 12% 88%, color-mix(in srgb,var(--c-magenta) 42%,transparent), transparent 70%),
    radial-gradient(50% 50% at 95% 0%, color-mix(in srgb,var(--c-cyan) 24%,transparent), transparent 70%);
}
.hero-copy-wrap{position:relative;z-index:2;width:100%;padding-bottom:64px}
.eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:#0A0918;background:var(--c-cyan);padding:6px 14px;border-radius:999px;margin-bottom:18px;
}
.eyebrow-light{background:transparent;color:var(--c-cyan);border:1px solid color-mix(in srgb,var(--c-cyan) 45%,transparent);padding:6px 14px}
.hero-copy{max-width:640px}
.hero-copy h1{font-size:clamp(34px,4.8vw,60px);max-width:16ch}
.hero-copy p{font-size:18px;color:var(--c-text-dim);max-width:48ch;margin-top:16px}
.hero-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;font-family:var(--f-body);
  padding:14px 26px;border-radius:999px;text-decoration:none;font-size:15px;border:2px solid transparent;
  transition:transform .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn-magenta{background:var(--c-magenta);color:#1A0714;box-shadow:0 10px 28px -10px color-mix(in srgb,var(--c-magenta) 70%,transparent)}
.btn-ghost{background:transparent;border-color:color-mix(in srgb,var(--c-cyan) 55%,transparent);color:var(--c-cyan)}
.btn-ghost:hover{background:color-mix(in srgb,var(--c-cyan) 12%,transparent)}

/* ---------- content sections ---------- */
section{padding:60px 0}
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:38px;align-items:start}
.vid{aspect-ratio:16/9;width:100%;border-radius:20px;overflow:hidden;background:#0A0822;border:1px solid color-mix(in srgb,var(--c-cyan) 20%,transparent);position:sticky;top:96px}
.vid video{width:100%;height:100%}

.prose h2{font-size:26px;margin:30px 0 14px;color:var(--c-text)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:24px 0 10px;color:var(--c-cyan)}
.prose p{margin:12px 0;color:var(--c-text-dim)}
.prose ul{margin:14px 0 14px 22px;color:var(--c-text-dim)}
.prose li{margin:6px 0}
.prose strong{color:var(--c-text)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin:26px 0 0}
.grid img{width:100%;border-radius:16px;display:block;border:1px solid color-mix(in srgb,var(--c-cyan) 18%,transparent)}

/* card grid */
.more-section{background:var(--c-bg2);position:relative}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.card{
  position:relative;display:block;padding:24px 22px 26px;border-radius:20px;text-decoration:none;color:var(--c-text);
  overflow:hidden;min-height:150px;border:1px solid color-mix(in srgb,var(--c-text) 10%,transparent);
  transition:transform .18s ease,border-color .18s ease;
}
.card:hover{transform:translateY(-4px)}
.card-magenta{background:linear-gradient(155deg,color-mix(in srgb,var(--c-magenta) 30%,var(--c-bg)),var(--c-bg2))}
.card-cyan{background:linear-gradient(155deg,color-mix(in srgb,var(--c-cyan) 24%,var(--c-bg)),var(--c-bg2))}
.card-indigo{background:linear-gradient(155deg,#2B2470,var(--c-bg2))}
.card:hover{border-color:color-mix(in srgb,var(--c-cyan) 60%,transparent)}
.card .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--c-cyan);font-weight:800}
.card h3{font-size:17px;margin:10px 0 0;max-width:26ch}
.card-arrow{position:absolute;right:20px;bottom:18px;font-size:20px;color:var(--c-magenta);opacity:.85}

/* ---------- contact ---------- */
.contact-section{position:relative}
.contact-panel{
  background:linear-gradient(135deg,#241E5C,#150F3C);
  border:1px solid color-mix(in srgb,var(--c-magenta) 30%,transparent);
  border-radius:28px;padding:44px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
}
.contact-panel::after{
  content:"";position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--c-cyan) 40%,transparent),transparent 70%);pointer-events:none;
}
.contact-copy p{color:var(--c-text-dim);margin-top:10px;max-width:36ch}

form.contact,.prose form{display:grid;gap:10px;max-width:520px}
form.contact label,.prose form label{
  font-size:13px;font-weight:700;color:var(--c-cyan);margin-top:4px;text-transform:uppercase;letter-spacing:.03em;
}
form.contact input,form.contact textarea,form.contact select,
.prose form input,.prose form textarea,.prose form select{
  width:100%;padding:13px 15px;border-radius:12px;font:inherit;font-size:15px;
  border:1px solid color-mix(in srgb,var(--c-cyan) 28%,transparent);
  background:color-mix(in srgb,var(--c-bg) 70%,#000 0%);
  color:var(--c-text);
}
form.contact input::placeholder,form.contact textarea::placeholder,
.prose form input::placeholder,.prose form textarea::placeholder{color:color-mix(in srgb,var(--c-text-dim) 80%,transparent)}
form.contact input:focus,form.contact textarea:focus,form.contact select:focus,
.prose form input:focus,.prose form textarea:focus,.prose form select:focus{
  outline:none;border-color:var(--c-magenta);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-magenta) 22%,transparent);
}
.prose form br{display:none}
form.contact button,.prose form button{
  justify-self:start;margin-top:8px;border:none;cursor:pointer;font-family:var(--f-body);
  background:var(--c-magenta);color:#1A0714;font-weight:800;padding:14px 28px;border-radius:999px;font-size:15px;
  box-shadow:0 10px 28px -10px color-mix(in srgb,var(--c-magenta) 70%,transparent);
}
form.contact button:hover,.prose form button:hover{background:color-mix(in srgb,var(--c-magenta) 85%,white)}
.prose form{margin:18px 0 8px}

/* ---------- footer ---------- */
footer{padding:56px 0 40px;position:relative;overflow:hidden;border-top:1px solid color-mix(in srgb,var(--c-cyan) 14%,transparent)}
.footwrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{font-size:20px}
.foot-tag{color:var(--c-text-dim);margin-top:8px;max-width:34ch}
.foot-note{color:var(--c-text-dim);font-size:13px;max-width:32ch;opacity:.85}

/* ---------- rtl ---------- */
[dir=rtl] .card-arrow{right:auto;left:20px;transform:scaleX(-1)}
[dir=rtl] form.contact button,[dir=rtl] .prose form button{justify-self:end}
[dir=rtl] .navlinks a{direction:rtl}

/* ---------- global mobile-overflow safety ---------- */
html,body{overflow-x:hidden;max-width:100%}
img,video{max-width:100%;height:auto}
.prose table{display:block;overflow-x:auto;max-width:100%}

/* ---------- responsive ---------- */
@media (max-width:880px){
  .hero.hero-full{height:78vh;min-height:520px}
  .split{grid-template-columns:1fr}
  .vid{position:static}
  .contact-panel{grid-template-columns:1fr;padding:30px}
  header.nav .pill{flex-wrap:wrap;border-radius:26px;padding:14px}
  .navlinks{width:100%;justify-content:space-between}
}
@media (max-width:560px){
  .navlinks{gap:2px}
  .navlinks a{padding:8px 10px;font-size:12.5px}
  .hero.hero-full{height:72vh;min-height:460px}
  .hero-copy h1{font-size:30px}
  .hero-copy p{font-size:16px}
  .hero-copy-wrap{padding-bottom:36px}
  .cards{grid-template-columns:1fr}
  .langs{gap:4px}
  .langs a{padding:4px 9px;font-size:10px}
}
@media (max-width:400px){
  header.nav{padding:0 8px}
  header.nav .pill{padding:12px;gap:10px}
  .brand{font-size:16px}
  .navlinks{flex-wrap:wrap;gap:6px}
  .navlinks a{padding:7px 10px}
  .navlinks a.navcta{width:100%;text-align:center;order:3}
}

/* reused article imagery (enzymes.bio watermarked) */
.prose figure.post-img{margin:30px 0}
.prose figure.post-img img{width:100%;height:auto;display:block;border-radius:12px}
.prose figure.post-img figcaption{font-size:13px;opacity:.72;margin-top:7px;line-height:1.4}