:root {
  --bg:#0b1221; --surface:#0f172a; --text:#e5e7eb; --muted:#9aa3b2;
  --accent:#66e3ff; --accent-2:#b3ffcc; --link:#7dd3fc; --border:#1f2937;
  --radius:12px; --space:clamp(16px,2.2vw,24px); --scrollbar-width: 0px;
}

* { box-sizing:border-box }
@font-face {
  font-family: 'Inter'; /* This is the name you’ll use in CSS */
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900; /* variable font range */
  font-style: normal;
}

html { scroll-behavior:smooth }
body {
  margin:0;
  font-family:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-size:15px; /* unified base font size */
  transition: padding-right 0.3s ease;
}

body.menu-open { overflow: hidden; /* Compensate for scrollbar disappearance to avoid layout shift */ padding-right: var(--scrollbar-width, 0px); }

.container { max-width:1100px; margin:0 auto; padding:0 var(--space) }
.section { padding:calc(var(--space)*2) 0 }
.section.alt { background:rgba(255,255,255,0.02) }

h1,h2,h3 { line-height:1.2; margin:0 0 12px }
p { margin:0 0 12px; color:var(--text) }
a { color:var(--link); text-decoration:none }
a:focus { outline:2px solid var(--accent); outline-offset:3px }

.site-header { position: sticky; top: 0; z-index: 20; }

/* Navbar */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--space);
  background:var(--surface);
  box-shadow:0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(102,227,255,0.08);
  position:sticky; top:0; z-index:10;
}
.brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:700 }
.nav-links { display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.nav-toggle { display:none }

/* Desktop nav always visible */ 
.nav-links.desktop { display:flex; gap:18px; list-style:none; margin:0; padding:0; }

/* Overlay for off-canvas menu */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Off-canvas nav menu */
.nav-links.offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 70%;   /* covers part of screen */
  height: 100%;
  background: var(--surface);
  flex-direction: column;
  padding: 68px;
  gap: 48px;
  box-shadow: -4px 0 12px rgba(0,0,0,0.4);
  transform: translateX(100%); /* hidden off-screen */
  transition: transform 0.35s ease-in-out;
  z-index: 10;
}
.nav-links.offcanvas.active {
  transform: translateX(0); /* slide in */
}

/* Prevent background scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

@media (max-width:860px){
  .nav-toggle {
    display:inline-flex;
    background:none;
    border:1px solid var(--border);
    color:var(--text);
    padding:8px 10px;
    border-radius:8px;
    z-index: 11; /* above overlay */
  }
  /* Hide default nav links on small screens */
  /*.nav-links { display:none; }*/
  .nav-links.desktop { display:none; } 
  .nav-links.offcanvas { display:flex; } /* off-canvas rules already apply */
}

/* Hero */
.hero {
  background: linear-gradient(180deg, #0b1221, #0d1426 55%, #66e3ff);
  padding: calc(var(--space)*3) 0;
  position: relative;
  overflow: hidden;
}
.hero-inner {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: var(--space);
}
.hero-text { flex:1 1 50%; text-align:left; }
.hero-text h1 {
  font-size:clamp(28px,4.2vw,48px);
  margin-bottom:12px;
}
.hero-text p {
  color:var(--muted);
  font-size:clamp(15px,1.6vw,18px);
  margin-bottom:18px;
}
.cta-buttons { display:flex; gap:14px; flex-wrap:wrap; }
.hero-banner {
  flex:1 1 40%;
  max-width:420px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,0.3);
}
.hero-banner img { width:100%; height:auto; display:block; border-radius:var(--radius); }
@media (max-width:860px){
  .hero-inner { flex-direction:column; text-align:center }
  .hero-text, .hero-banner { flex:1 1 100% }
  .hero-banner { max-width:100%; margin-top:var(--space) }
}

/* Metrics */
.metrics { display:flex; gap:18px; flex-wrap:wrap; padding:0 }
.metrics li {
  list-style:none; background:linear-gradient(180deg,#0f192f,#0d1627);
  border:1px solid var(--border); border-radius:var(--radius);
  padding:14px 18px; flex:1 1 200px
}
.metrics li span { font-weight:700; color:var(--accent-2); font-size:20px; margin-right:8px }

/* Publications */
.pub-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin: 12px 0;
  background: linear-gradient(180deg, #101a31, #0e1528);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.pub-card h3 { margin: 0 0 6px; font-size: clamp(18px, 2vw, 22px); color: var(--accent); }
.pub-card p.meta { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.pub-card .btn-small { margin-top: 8px; }
.pub-card img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); margin-top: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#0ea5e9,#0284c7);
  color:#06111e; border:none; border-radius:10px;
  padding:10px 16px; font-weight:600;
  box-shadow:0 10px 30px rgba(102,227,255,.15);
  transition:filter .2s ease;
}
.btn:hover { filter:brightness(1.07) }
.btn-outline { background:none; border:1px solid var(--border); color:var(--text); }
.btn-small { padding:8px 12px; font-size:14px }

/* About */
#about p { line-height:1.8; text-align:justify }

/* Footer */
.site-footer { 
  border-top:1px solid var(--border); 
  padding:calc(var(--space)*2) var(--space); 
  background: linear-gradient(180deg, #0f172a, #0b1221);
  color: var(--muted);
  font-size: 15px;
  box-shadow: 0 -6px 12px rgba(102,227,255,0.08), 0 -2px 6px rgba(0,0,0,0.4);
  position: relative;
  z-index: 5;
}
.footer-grid { 
  display:grid; 
  grid-template-columns:repeat(3,1fr); 
  gap:28px; 
  margin-bottom:20px; 
  justify-items:center; 
  text-align:center;
}
.footer-grid strong { display:block; margin-bottom:10px; font-size:16px; color:var(--accent); }
.footer-grid p { margin:6px 0; color:var(--text); }
.footer-grid a { 
  color:var(--link); 
  text-decoration:none; 
  transition:color .2s ease; 
}
.footer-grid a:hover { color:var(--accent); }
.footer-icons { 
  display:flex; 
  gap:10px; 
  margin-top:8px; 
  align-items:center; 
  justify-content:center; 
}
.footer-icons .icon { width:20px; height:20px; fill:var(--accent-2); }
.footer-logo { 
  width:120px; 
  height:auto; 
  display:block; 
  border-radius:4px; 
  margin-left:auto; 
  margin-right:auto; 
}
@media (max-width:720px){
  .footer-grid { grid-template-columns:1fr; gap:20px; text-align:center; }
}
.social-icons {
  display:flex; justify-content:center; gap:18px; margin-top:24px;
}
.social-icons a { 
  color:var(--text); 
  transition:color .2s ease, transform .2s ease; 
}
.social-icons a:hover { 
  color:var(--accent); 
  transform:scale(1.15); 
}
.social-icons .icon { width:26px; height:26px; }
.legal {
  color: var(--muted);
  margin-top: 18px;
  text-align: center;
  font-size: 14px; /* meta/secondary text */
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

/* Base icon style */
.icon {
  width:18px; height:18px;
  flex-shrink:0;
  display:inline-block;
  vertical-align:middle;
  fill:currentColor;
}

/* Icon inside buttons */
.btn .icon { margin-right:8px; width:20px; height:20px; }

/* Small button variant */
.btn-small .icon { width:16px; height:16px; margin-right:6px; }

/* Outline buttons keep icon color consistent */
.btn-outline .icon { fill:var(--text); }

/* Accent hover effect */
.btn:hover .icon { filter:brightness(1.1); }

/* Metrics or inline icons */
.metrics .icon { width:22px; height:22px; margin-right:6px; fill:var(--accent-2); }

/* Footer links */
.footer-links {
  list-style:none;
  padding:0;
  margin:0;
}
.footer-links li { margin-bottom:8px; }
.footer-links a {
  color:var(--text);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .2s ease;
}
.footer-links a:hover { color:var(--accent); }

/* Contact form card */
form.card {
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px;
  background:linear-gradient(180deg,#101a31,#0e1528);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
  max-width:640px;
  margin:0 auto;
}

/* Labels */
form.card label {
  display:block;
  margin-bottom:8px;
  font-weight:500;
  color:var(--text);
}

/* Inputs, textarea, select */
form.card input[type="text"],
form.card input[type="email"],
form.card input[type="file"],
form.card textarea,
form.card select {
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--surface);
  color:var(--text);
  font-size:15px;
  line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease;
}
form.card input::placeholder,
form.card textarea::placeholder {
  font-family:inherit;
  font-size:15px;
  color:var(--muted);
}

/* Focus state */
form.card input:focus,
form.card textarea:focus,
form.card select:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(102,227,255,0.25);
  outline:none;
}

/* Feedback areas below each field */
.form-group .feedback,
.captcha-feedback {
  min-height:22px;
  font-size:12px;
  margin-top:4px;
}
.form-group .feedback.error,
.captcha-feedback.error { color:#f87171; }
.form-group .feedback.success,
.captcha-feedback.success { color:#22c55e; }

/* Captcha row */
.captcha-row {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.captcha-row img {
  border:1px solid #000;
  border-radius:4px;
}

/* Error/success input borders */
@keyframes shake {
  0% { transform:translateX(0); }
  20% { transform:translateX(-4px); }
  40% { transform:translateX(4px); }
  60% { transform:translateX(-4px); }
  80% { transform:translateX(4px); }
  100% { transform:translateX(0); }
}
input.error,
textarea.error,
select.error {
  border-color:#f87171;
  box-shadow:0 0 0 2px rgba(248,113,113,0.25);
  animation:shake .3s ease;
}
input.success,
textarea.success,
select.success {
  border-color:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,0.25);
}

/* Buttons row */
.form-actions {
  display:flex;
  gap:10px;
  justify-content:flex-start;
  margin-top:10px;
}

/* Submission message */
#formMsg {
  min-height:28px;
  text-align:center;
  font-size:15px;
  margin-top:14px;
}
#formMsg.error { color:#f87171; }
#formMsg.success { color:#22c55e; }
#formMsg.sending {
  color:var(--accent);
  animation:pulse 1s infinite;
}
@keyframes pulse {
  0% { opacity:.4; }
  50% { opacity:1; }
  100% { opacity:.4; }
}

/* Contact grid layout */
.contact-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:stretch;
}
.contact-left { min-width:0; }
.contact-right {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:20px;
  background:linear-gradient(180deg,#101a31,#0e1528);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:0 4px 12px rgba(0,0,0,0.25);
}
.contact-info p {
  display:flex;
  align-items:flex-start;
  gap:20px;
  margin:12px 0;
  color:var(--text);
}
.contact-info .icon {
  flex-shrink:0;
  margin-top:2px;
  color:var(--accent,#4da3ff);
}

/* Responsive breakpoint */
@media (max-width:768px) {
  .contact-grid { grid-template-columns:1fr; }
  .contact-right { margin-top:20px; }
}

/* 404 Error Card */
.error-card {
  text-align: center;
  padding: 40px 28px;
  background: linear-gradient(180deg, #101a31, #0e1528);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  max-width: 640px;
  margin: 0 auto;
}
.error-card h1 {
  font-size: clamp(64px, 10vw, 120px);
  margin: 0;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 2px;
}
.error-card .subtitle {
  font-size: 22px;
  margin-top: 8px;
  color: var(--accent-2);
  font-weight: 600;
}
.error-card .message {
  margin-top: 18px;
  font-size: 16px;
  color: var(--muted);
  line-height: 1.6;
}
.error-card .actions {
  margin-top: 28px;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Creative showcase grid */
.creative-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.creative-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.creative-card img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.4s ease;
}

.creative-card:hover img {
  transform: scale(1.05);
}

.creative-card .overlay {
  position: absolute;
  inset: 0;
  background: rgba(11,18,33,0.85);
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s ease;
  padding: 20px;
}

.creative-card:hover .overlay {
  opacity: 1;
}

.creative-card h3 {
  color: var(--accent);
  margin-bottom: 8px;
}