:root{
  --bg:#ffffff; --fg:#122025; --muted:#50656e; --brand:#0e748a; --brand-2:#0aa6c1;
  --card:#f6f9fa; --line:#e7eef0; --accent:#eaf7fb;
}
:root.dark{
  --bg:#0f1417; --fg:#e7eef0; --muted:#a7bac2; --brand:#2fc4dc; --brand-2:#7ee4f3;
  --card:#121a1e; --line:#1e2a30; --accent:#0c2c35;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--fg); line-height:1.6; scroll-behavior:smooth;
}

/* Containers */
.container{width:min(1200px,92%); margin-inline:auto}
.grid-2{display:grid; gap:32px; grid-template-columns:1.1fr 0.9fr}
@media (max-width: 900px){.grid-2{grid-template-columns:1fr}}

.section{padding:80px 0; position:relative}
.section-head{text-align:center; margin-bottom:32px}
.section h2{font-size:clamp(1.6rem,2.2vw,2.2rem); margin:0 0 8px}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:999; backdrop-filter:saturate(140%) blur(8px);
  background:color-mix(in srgb, var(--bg), transparent 8%); border-bottom:1px solid var(--line);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.logo{text-decoration:none; font-weight:700; color:var(--fg); font-size:1.1rem}
.logo span{color:var(--brand)}

.nav{position:relative}
.nav-list{display:flex; gap:6px; align-items:center; list-style:none; margin:0; padding:0}
.nav-link,.nav-btn{display:block; padding:10px 14px; border-radius:8px; text-decoration:none; color:var(--fg)}
.nav-link:hover,.nav-btn:hover{background:var(--accent)}
.nav-cta .btn{margin-left:6px}

/* Dropdown */
.nav-dropdown{position:relative}
.nav-dropdown .dropdown{
  position:absolute; inset:auto auto auto 0; translate:0 8px;
  min-width:240px; background:var(--bg); border:1px solid var(--line);
  border-radius:10px; padding:8px; display:none; box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.nav-dropdown:focus-within .dropdown,
.nav-dropdown:hover .dropdown{display:block}
.dropdown li{list-style:none}
.dropdown a{display:block; padding:10px 12px; border-radius:8px; color:var(--fg); text-decoration:none}
.dropdown a:hover{background:var(--accent)}
.chev{margin-left:6px}

/* Burger */
.burger{display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:10px; background:transparent}
.burger span{display:block; width:24px; height:2px; background:var(--fg); margin:5px auto}
@media (max-width: 900px){
  .burger{display:block}
  .nav-list{
    position:fixed; inset:60px 0 auto 0; background:var(--bg); flex-direction:column;
    align-items:stretch; gap:0; padding:12px; border-top:1px solid var(--line); display:none;
  }
  .nav-list.show{display:flex}
  .nav-cta{order:10}
}

/* Buttons, chips */
.btn{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#fff;
  border:none; padding:12px 18px; border-radius:10px; text-decoration:none; display:inline-block}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; color:var(--brand); border:1.5px solid var(--brand)}
.btn-sm{padding:8px 12px; font-size:.92rem}
.icon-btn{background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px; cursor:pointer}

.chips{display:flex; gap:10px; flex-wrap:wrap}
.chip{padding:8px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card)}

/* Hero */
.hero{min-height:80vh; display:grid; place-items:center; position:relative; overflow:hidden}
.hero::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(1200px 400px at 30% 10%, color-mix(in srgb,var(--brand-2),transparent 75%), transparent),
             radial-gradient(1000px 600px at 90% 80%, color-mix(in srgb,var(--brand),transparent 75%), transparent);
  pointer-events:none; opacity:.5;
}
.hero-inner{display:grid; align-items:center; gap:40px; grid-template-columns:1.1fr .9fr}
@media (max-width: 900px){.hero-inner{grid-template-columns:1fr}}
.hero-text h1{margin:0 0 8px; font-size:clamp(2rem,5vw,3rem)}
.hero-text p{margin:0 0 18px; color:var(--muted)}
.hero-visual{min-height:240px; position:relative}
.orb{position:absolute; border-radius:50%; filter:blur(4px); opacity:.9}
.orb-1{width:220px;height:220px;background:linear-gradient(135deg,var(--brand),var(--brand-2)); right:20%; top:10%}
.orb-2{width:160px;height:160px;background:linear-gradient(135deg,#46e,#0aa6c1); left:10%; bottom:10%}
.orb-3{width:80px;height:80px;background:linear-gradient(135deg,#0aa6c1,#7ee4f3); right:5%; bottom:5%}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(14px); transition:.6s ease}
.reveal.visible{opacity:1; transform:none}
.delay-1{transition-delay:.12s}
.delay-2{transition-delay:.24s}
.delay-3{transition-delay:.36s}

/* About */
.ticks{padding-left:18px}
.ticks li{margin:6px 0}

/* Cards */
.cards{display:grid; gap:18px; grid-template-columns:repeat(4,1fr)}
@media (max-width: 1100px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 600px){.cards{grid-template-columns:1fr}}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;
  transition:.25s transform,.25s box-shadow; box-shadow:0 4px 14px rgba(0,0,0,.04);
}
.card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.08)}
.card h3{margin:0 0 6px}
.card .link{display:inline-block; margin-top:8px; color:var(--brand); text-decoration:none}
.card .link:hover{text-decoration:underline}

/* Research carousel */
.carousel{position:relative; margin-top:12px}
.carousel-track{display:grid; grid-auto-flow:column; grid-auto-columns:calc(25% - 12px);
  gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 2px}
@media (max-width: 1100px){.carousel-track{grid-auto-columns:calc(50% - 10px)}}
@media (max-width: 600px){.carousel-track{grid-auto-columns:100%}}
.slide{
  background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px;
  scroll-snap-align:start; min-height:120px
}
.carousel-btn{
  position:absolute; top:50%; translate:0 -50%; width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line); background:var(--bg); cursor:pointer
}
.carousel .prev{left:-6px} .carousel .next{right:-6px}

/* Contact */
.form{background:var(--card)}
.field{margin-bottom:12px}
.field label{display:block; font-size:.92rem; margin-bottom:6px}
.field input,.field textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--bg); color:var(--fg)
}
.field .err{color:#c32828; font-size:.8rem; height:16px; display:block}
.form-note{color:var(--muted); font-size:.9rem}
.map{margin-top:12px; border-radius:12px; overflow:hidden; border:1px solid var(--line)}
.map iframe{width:100%; height:260px}

/* Footer */
.footer{border-top:1px solid var(--line); padding:18px 0; background:color-mix(in srgb,var(--bg),transparent 8%)}
.footer-inner{display:flex; align-items:center; justify-content:space-between}
.back-top{
  width:40px; height:40px; border:1px solid var(--line); border-radius:10px;
  display:grid; place-items:center; text-decoration:none; color:var(--fg); opacity:.9
}
.back-top:hover{opacity:1}

/* Utilities */
.hidden{display:none}