:root{
  --container: min(1180px, 94vw);
  --radius:14px;
  --pad: clamp(18px, 2vw, 26px);
  --header-h: 66px;
  --accent:#6ce8ff;
  --accent-strong:#9c7cff;
}
:root[data-theme='dark']{
  --bg:#0d1422;
  --bg-soft:#101828;
  --card:#141c2f;
  --muted:#a4b6cc;
  --text:#eef2ff;
  --accent-2:#7ff1c8;
  --ring:rgba(108,232,255,.25);
  --border:rgba(255,255,255,.08);
  --chip-bg:#131c2c;
  --chip-text:#e6edfa;
  --chip-muted:rgba(208,222,240,.82);
  --chip-active-text:#061427;
  --chip-active-shadow:0 0 0 2px rgba(18,144,255,.35), 0 10px 22px rgba(4,12,28,.32);
  --toolbar-button-bg:#141c2c;
  --panel-bg:#0f1725;
  --badge-bg:rgba(108,232,255,.12);
  --badge-border:rgba(108,232,255,.4);
  --badge-text:#d9f6ff;
  --btn-ghost-bg:#121c2b;
  --btn-ghost-text:#e6edfa;
  --mono-color:#b8c7db;
  --input-bg:#0f1827;
  --footer-bg:rgba(9,13,20,.82);
  --pill-text:#d6deed;
  --footer-link:#d3ddf0;
  --header-gradient:linear-gradient(180deg, rgba(13,20,34,.9), rgba(13,20,34,.74) 55%, transparent);
  --header-solid:rgba(13,20,34,.94);
  --header-shadow:0 10px 32px rgba(0,0,0,.3);
  --hero-overlay-gradient:linear-gradient(180deg, rgba(10,15,26,.86) 0%, rgba(10,15,26,.55) 32%, rgba(10,15,26,.2) 68%, rgba(10,15,26,.7));
  --hero-copy-glow:radial-gradient(260px 200px at 24% 6%, rgba(108,232,255,.16), transparent 72%), radial-gradient(340px 240px at 68% 14%, rgba(156,124,255,.12), transparent 68%);
  --hero-text-shadow:0 10px 38px rgba(0,0,0,.55), 0 0 30px rgba(6,14,32,.65);
  --hero-ambient:radial-gradient(1080px 640px at 78% -14%, rgba(156,124,255,.09), transparent 60%), radial-gradient(960px 600px at 14% 4%, rgba(108,232,255,.08), transparent 64%), linear-gradient(180deg, rgba(7,12,22,.28), rgba(7,12,22,.82));
  --hero-fade-bg: #0d1422;
  --section-backdrop:radial-gradient(900px 420px at 12% 6%, rgba(108,232,255,.08), transparent 70%), radial-gradient(760px 380px at 88% 88%, rgba(156,124,255,.08), transparent 68%), linear-gradient(180deg, rgba(12,18,30,.96), rgba(9,13,22,.94) 58%, rgba(8,12,20,1));
  --section-inner-backdrop:radial-gradient(620px 320px at 12% 8%, rgba(108,232,255,.1), transparent 66%), radial-gradient(620px 320px at 82% 92%, rgba(156,124,255,.1), transparent 70%), linear-gradient(180deg, rgba(13,18,30,.96), rgba(9,13,22,1));
  --card-bg:linear-gradient(155deg, rgba(21,30,46,.9), rgba(15,22,36,.92) 52%, rgba(12,19,32,.98));
  --card-border:rgba(133,170,223,.2);
  --card-shadow:0 18px 44px rgba(0,0,0,.38);
  --list-dot-shadow:0 0 0 3px rgba(255,255,255,.06);
  --footer-text-shadow:0 18px 52px rgba(0,0,0,.7), 0 0 40px rgba(2,6,14,.65);
  --footer-link-shadow:0 14px 46px rgba(0,0,0,.6), 0 0 36px rgba(4,10,22,.62);
  --cols-glow:radial-gradient(ellipse at center, rgba(9,14,24,.86) 0%, rgba(9,14,24,.56) 44%, rgba(9,14,24,.22) 72%, transparent 100%);
  --gl-clear:10,16,28;
  --gl-label-text:rgba(238,242,255,0.95);
  --gl-label-bracket:rgba(200,218,245,0.72);
  --menu-shadow:0 26px 64px rgba(2,6,16,.46);
  --gl-fog:28,36,52;
  --gl-node-cool:82,220,255;
  --gl-node-warm:210,86,186;
  --gl-edge-strong:82,172,255;
  --gl-edge-soft:72,216,186;
  --gl-edge-hot:214,96,190;
  --gl-line-pulse:118,204,255;
  --gl-fog-density:0.72;
}
*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:"Space Grotesk","Manrope","Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  color:var(--text); line-height:1.6; background:var(--bg);
  padding-top: var(--header-h);
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.container{width:var(--container); margin:0 auto; padding:0 8px}

/* Header */
header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  backdrop-filter: saturate(120%) blur(3px);
  background: var(--header-gradient);
  border-bottom: 1px solid var(--border);
  transform: none;
  transition: transform .25s ease, background .2s ease, box-shadow .2s ease;
}
header.scrolled{ background: var(--header-solid); box-shadow: var(--header-shadow) }
header.hide{ transform: translateY(-100%) }
.nav{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; flex:1 1 auto; min-width:0;}
.logo{height:32px; width:auto; display:block;}
footer .logo{height:40px;}
.brand small{display:block; font-weight:600; color:var(--muted)}
.footer-brand{display:flex; align-items:center; gap:12px; margin-bottom:16px;}
.footer-brand-name{font-weight:700; letter-spacing:.08em; color:var(--text);}
.footer-copy{margin-top:10px; color:var(--muted);}
footer .pill{margin-top:6px;}
.menu{display:flex; gap:18px; align-items:center; margin-left:28px;}
.nav-actions{display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:18px;}
.menu a{color:var(--text); opacity:.9; font-weight:600; letter-spacing:.02em;}
.menu a:hover{opacity:1}
.lang-switcher{position:relative; display:flex; flex-direction:column; align-items:flex-end; gap:8px;}
.lang-toggle{appearance:none; border:1px solid var(--border); border-radius:999px; background:var(--btn-ghost-bg);
  color:var(--btn-ghost-text); padding:6px 14px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center;
  gap:10px; transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;}
.lang-toggle:hover{background:rgba(108,232,255,.12); color:var(--text); border-color:rgba(108,232,255,.35);}
.lang-toggle:focus-visible{outline:2px solid rgba(62,142,255,.9); outline-offset:2px;}
.lang-toggle .lang-flag{font-size:1.1rem; line-height:1;}
.lang-toggle .lang-current{display:flex; flex-direction:column; align-items:flex-start; line-height:1.1;}
.lang-toggle .lang-code{font-weight:700; font-size:.74rem; letter-spacing:.1em; opacity:.75; text-transform:uppercase;}
.lang-toggle .lang-name{font-size:.86rem;}
.lang-toggle .lang-chevron{font-size:.7rem; opacity:.65;}
.lang-switcher[data-open="true"] .lang-toggle{background:linear-gradient(135deg, rgba(31,111,235,.16), rgba(43,212,161,.12));
  border-color:rgba(31,111,235,.45); box-shadow:0 12px 28px rgba(12,22,40,.28);}
.lang-menu{position:absolute; right:0; top:calc(100% + 10px); background:var(--panel-bg); border:1px solid var(--border);
  border-radius:14px; padding:14px; box-shadow:var(--menu-shadow); width:min(320px, 80vw); display:none; z-index:400;
  max-height:min(440px, 70vh); overflow:auto;}
.lang-switcher[data-open="true"] .lang-menu{display:block;}
.lang-label{margin:0 0 8px; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.lang-search{position:relative; margin:0 0 10px;}
.lang-search input{width:100%; padding:8px 12px 8px 34px; border-radius:10px; border:1px solid var(--border);
  background:var(--input-bg); color:var(--text); font-size:.86rem; transition:border-color .18s ease, box-shadow .18s ease;}
.lang-search input::placeholder{color:var(--muted);}
.lang-search input:focus{border-color:rgba(31,111,235,.55); box-shadow:0 0 0 3px rgba(31,111,235,.16); outline:none;}
.lang-search::before{content:"🔍"; position:absolute; left:10px; top:50%; transform:translateY(-50%); font-size:.9rem; opacity:.72;}
.lang-options{display:flex; flex-direction:column; gap:6px; max-height:max(180px, calc(min(440px, 70vh) - 96px)); overflow-y:auto; padding-right:4px;}
.lang-option{appearance:none; border:1px solid var(--border); border-radius:12px; background:var(--btn-ghost-bg);
  color:var(--btn-ghost-text); padding:8px 12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:10px;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;}
.lang-option .lang-flag{font-size:1.1rem; line-height:1;}
.lang-option .lang-labels{display:flex; flex-direction:column; align-items:flex-start; gap:2px; line-height:1.1;}
.lang-option .lang-native{font-size:.92rem;}
.lang-option .lang-english{font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7;}
.lang-option:hover{background:rgba(108,232,255,.14); color:var(--text); border-color:rgba(108,232,255,.25);}
.lang-option.is-highlight{border-color:rgba(108,232,255,.42); box-shadow:0 0 0 1px rgba(108,232,255,.18), 0 10px 24px rgba(10,22,40,.18);}
.lang-option[aria-selected="true"]{background:linear-gradient(135deg, rgba(108,232,255,.92), rgba(156,124,255,.9));
  color:#041120; border-color:transparent; box-shadow:0 0 0 1px rgba(11,22,42,.45), 0 12px 26px rgba(6,14,32,.35);}
.lang-option[aria-selected="true"] .lang-english{color:rgba(6,24,52,.72);}
.lang-option:focus-visible{outline:2px solid rgba(62,142,255,.9); outline-offset:2px;}
.lang-noscript{margin:10px 0 0; font-size:.82rem; color:var(--muted); text-align:right;}
.hamb{display:none; background:#151a27; border:1px solid var(--border); color:#e6ebf2; padding:8px 10px; border-radius:10px}

@media (max-width:860px){
  .nav{gap:12px;}
  .brand{flex:1 1 auto;}
  .nav-actions{margin-left:auto;}
  .hamb{display:inline-flex}
  .menu{
    display:none; position: fixed; right:12px;
    top: calc(var(--header-h) + 6px);
    flex-direction:column; gap:10px;
    background:var(--panel-bg); border:1px solid var(--border); border-radius:12px; padding:12px;
    box-shadow:var(--menu-shadow);
    width: calc(100vw - 24px)
  }
  .menu.open{display:flex}
  .lang-switcher{align-items:flex-end; width:auto;}
  .lang-toggle{width:auto; justify-content:space-between;}
  .lang-switcher[data-open="true"]{ position:relative; }
  .lang-switcher{position:relative; align-items:flex-end; width:auto; z-index:410;}
  .lang-switcher .lang-menu{
    position: fixed;
    top: calc(var(--header-h) + 8px);
    left: 12px;
    right: 12px;
    width: calc(100% - 24px);
    max-height: calc(100dvh - var(--header-h) - 24px - env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overflow: auto;
    z-index: 420;
  }
  .lang-switcher .lang-options{max-height:none;}
  .lang-noscript{text-align:left;}
}
@media (max-width:600px){
  .brand small{display:none;}
}

/* ===== HERO (100vh under fixed header) ===== */
/* Use dvh when available for mobile browser UI; fallback to vh */
@supports (height: 100dvh) {
  .hero{ min-height: calc(100dvh - var(--header-h)); }
}
@supports not (height: 100dvh) {
  .hero{ min-height: calc(100vh - var(--header-h)); }
}

/* Base hero layout – remove extra +header padding/double count */
.hero{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding: 24px 0 0;            /* was: calc(var(--header-h) + 24px) 0 10svh; */
  isolation:isolate; overflow: clip;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background: var(--hero-overlay-gradient);
}
.hero .container{ position:relative; z-index:3; max-width: var(--container); }
.hero-copy{
  display:flex; flex-direction:column; gap:12px;
  margin-top: 0;                 /* was clamp(..., 9vh, ...) to avoid vertical drift */
  max-width: 860px; position:relative;
  padding: clamp(12px, 3.6vw, 24px);
  isolation:isolate;
}
.hero-copy::before{
  content:""; position:absolute;
  inset: clamp(-40px, -6.5vw, -22px) clamp(-34px, -5.6vw, -18px);
  background: var(--hero-copy-glow);
  filter: blur(14px); opacity:.7; pointer-events:none; z-index:-1;
}
.hero-copy > *{text-shadow:var(--hero-text-shadow);}

/* Badge = true fit-content + nowrap */
.badge{
  display:inline-flex;
  width:max-content;
  white-space:nowrap;
  align-self:flex-start;
  align-items:center; gap:8px; font-size:.83rem; color:var(--badge-text);
  background:var(--badge-bg); border:1px solid var(--badge-border);
  padding:6px 12px; border-radius:999px; letter-spacing:.08em; text-transform:uppercase;
}

h1{font-size:clamp(2.2rem, 5.4vw, 3.6rem); line-height:1.05; margin:6px 0 6px; letter-spacing:-0.02em;}
.lead{font-size:clamp(1.08rem, 2.3vw, 1.3rem); color:var(--muted); max-width:820px}
.cta{margin-top:18px; display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:12px; font-weight:700;
  background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:white; border:1px solid rgba(255,255,255,.08); cursor:pointer;
  box-shadow:0 12px 30px rgba(8,16,32,.35); letter-spacing:.01em; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;}
.btn:hover{transform: translateY(-1px); box-shadow:0 14px 34px rgba(8,16,32,.42); filter:brightness(1.03);}
.btn:active{transform: translateY(0);}
.btn.ghost{background:var(--btn-ghost-bg); color:var(--btn-ghost-text); border:1px solid rgba(255,255,255,.1); box-shadow:none}
.btn.ghost:hover{border-color:rgba(108,232,255,.35); box-shadow:0 10px 22px rgba(8,16,32,.22);}

/* FIXED full-bleed background (static, lightweight) */
.hero-bg{
  position:fixed; inset:0; z-index:1; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(140% 120% at 20% 4%, rgba(108,232,255,.12), transparent 58%),
    radial-gradient(160% 120% at 78% 10%, rgba(156,124,255,.1), transparent 62%),
    linear-gradient(180deg, rgba(7,12,22,.58), rgba(7,12,22,.92));
}
.hero-fade{
  position:absolute; left:0; right:0; bottom:-1px; height:22svh; z-index:2; pointer-events:none;
  background: linear-gradient(to bottom, transparent, var(--hero-fade-bg));
}

/* Mobile: keep same logic, just adjust inner padding if desired */
@media (max-width:720px){
  @supports (height: 100dvh) {
    .hero{ min-height: calc(100dvh - var(--header-h)); }
  }
  @supports not (height: 100dvh) {
    .hero{ min-height: calc(100vh - var(--header-h)); }
  }
  .hero{ padding: 16px 0 0; align-items:center; justify-content:center; }
  .lead{font-size:clamp(1rem, 4.6vw, 1.18rem);}
}

/* Sections */
main > section{scroll-margin-top: calc(var(--header-h) + 36px);}
main > section:not(.hero){
  position:relative; min-height:auto;
  display:flex; align-items:center;
  padding: clamp(72px, 16vh, 140px) 0;
  background: var(--section-backdrop);
  border-top:1px solid var(--border)
}
@media (max-width:760px){
  main > section:not(.hero){
    padding: clamp(56px, 14vh, 110px) 0;
    background: var(--section-inner-backdrop);
  }
}
.section-inner{
  width:var(--container); margin:0 auto; padding:0 8px;
  display:grid; grid-template-columns: 1fr 1fr; gap:clamp(20px, 3vw, 28px);
  align-items:stretch;
}
@media (max-width:980px){ .section-inner{grid-template-columns:1fr} }
h2{font-size:1.6rem; margin:0 0 12px}
.section-inner h2{ position:relative; padding-top:6px; }
.section-inner h2::before{
  content:""; position:absolute; left:0; top:0; height:4px; width:56px;
  border-radius:999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity:.9;
}
.card{background: var(--card-bg);
  border:1px solid var(--card-border); border-radius:var(--radius); padding: var(--pad);
  box-shadow: var(--card-shadow); backdrop-filter: blur(6px) saturate(120%);
  display:flex; flex-direction:column; gap:10px}
.card-subheading{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); margin:8px 0 4px;
}
.company-facts{
  margin:10px 0 0; padding:0; list-style:none;
  display:grid; gap:12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.company-facts li{display:flex; flex-direction:column; gap:2px;}
.company-facts .fact-label{
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.company-facts .fact-value{font-weight:600; color:var(--text);}
.company-facts .fact-value a{color:inherit; text-decoration:none;}
.company-facts .fact-value a:hover{text-decoration:underline;}
.list{display:grid; gap:10px; margin:14px 0 0; padding:0; list-style:none}
.list li{display:grid; grid-template-columns: 14px 1fr; align-items:start; column-gap:10px}
.list li::before{content:""; width:10px; height:10px; margin-top:.4em; border-radius:999px; background:linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow:var(--list-dot-shadow)}
.mono{font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.95rem; color:var(--mono-color)}
.muted{color:var(--muted)}

form{margin-top:12px}
form .row{display:grid; gap:12px; grid-template-columns:1fr 1fr}
@media (max-width:700px){form .row{grid-template-columns:1fr}}
input, textarea{width:100%; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--input-bg); color: var(--text)}
textarea{min-height:140px; resize:vertical}
input:focus, textarea:focus{outline:none; border-color:rgba(108,232,255,.5); box-shadow:0 0 0 3px rgba(108,232,255,.14);}

footer{background:var(--footer-bg); padding:42px 0; border-top:1px solid var(--border); color:var(--muted); font-size:.95rem; position:relative;}
footer, footer *{text-shadow:var(--footer-text-shadow);}
.cols{
  width:var(--container); margin:0 auto; padding: clamp(16px, 4vw, 28px);
  display:grid; gap:20px; grid-template-columns: 1.3fr 1fr 1fr 1fr;
  position:relative; isolation:isolate;
}
.cols::before{
  content:""; position:absolute;
  inset: clamp(-28px, -5.4vw, -16px) clamp(-24px, -4.6vw, -14px);
  background: var(--cols-glow);
  filter: blur(26px); opacity:.9; pointer-events:none; z-index:-1;
}
@media (max-width:980px){ .cols{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .cols{grid-template-columns:1fr} }
.pill{display:inline-block; padding:6px 10px; border:1px solid var(--border); border-radius:999px; color:var(--pill-text)}
.footer-links a{display:block; margin:6px 0; color:var(--footer-link); opacity:.9;
  text-shadow:var(--footer-link-shadow);
}
.footer-links a:hover{opacity:1; text-decoration:none}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

@media (prefers-reduced-motion: reduce){
  .hero .container{transform:none !important}
  main > section:not(.hero){min-height:auto}
}
@media (max-height: 720px){
  main > section:not(.hero){ min-height:auto; }
}

/* Pages (articles/projects) */
.page-hero{
  padding: clamp(74px, 18vh, 140px) 0 28px;
  background: var(--hero-ambient);
  border-bottom:1px solid var(--border);
}
.page-hero__inner{display:flex; flex-direction:column; gap:12px;}
.page-body{background:var(--section-inner-backdrop); padding: clamp(48px, 12vh, 120px) 0;}

.article-grid, .project-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(18px, 2.6vw, 26px);
}
.article-card, .project-card{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: var(--card-shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
}
.article-card__meta, .project-card__meta, .article-hero-meta, .project-hero-meta{
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
}
.pill.ghost{background:transparent;}
.pill.strong{background:linear-gradient(135deg, var(--accent), var(--accent-strong)); color:#041120; border-color:transparent;}
.project-card__cta{margin-top:6px;}
.btn.small{padding:10px 14px; font-size:.92rem;}
.list.tight{gap:6px;}

.article-body, .project-body{
  display:grid;
  grid-template-columns: minmax(0, 1fr);
  gap:18px;
}
.article-section{
  background: var(--card-bg);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(16px, 2vw, 22px);
  box-shadow: var(--card-shadow);
}
.article-section h2{margin:0 0 8px;}

.article-card h2, .project-card h2{margin:4px 0;}
.article-card h2 a, .project-card h2 a{color:var(--text);}
.article-card h2 a:hover, .project-card h2 a:hover{text-decoration:none; color:var(--accent-2);}