:root{
  --bg:#ffffff;
  --surface:#f3f5f8;
  --surface-2:#e9edf3;
  --text:#0a0d12;
  --text-muted:#5b6472;
  --line:#dde2e9;
  --accent:#155eef;
  --accent-2:#0a2540;
  --glow: 0 0 0 rgba(21,94,239,0);
  --icon-fill:#155eef;
  --shadow: 0 10px 30px rgba(10,13,18,0.08);
  --radius:14px;
}
html[data-theme="dark"]{
  --bg:#05070a;
  --surface:#0d1117;
  --surface-2:#121822;
  --text:#eef2f7;
  --text-muted:#8b99ac;
  --line:#1c2531;
  --accent:#3fb0ff;
  --accent-2:#8fd6ff;
  --glow: 0 0 8px rgba(63,176,255,0.9), 0 0 22px rgba(63,176,255,0.5);
  --icon-fill:#3fb0ff;
  --shadow: 0 20px 50px rgba(0,0,0,0.55);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--text);
  font-family:'Inter', sans-serif;
  transition:background .5s ease, color .5s ease;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.02em;}
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--accent); display:inline-block; margin-bottom:14px;
}
.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
a{color:inherit;}
img{max-width:100%; display:block;}

#cursorGlow{
  position:fixed; width:420px; height:420px; border-radius:50%; pointer-events:none; z-index:1;
  background:radial-gradient(circle, rgba(21,94,239,0.15), transparent 70%);
  transform:translate(-50%,-50%);
  transition:opacity .3s ease; opacity:0;
}
html[data-theme="dark"] #cursorGlow{
  background:radial-gradient(circle, rgba(63,176,255,0.18), transparent 70%);
}

nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  backdrop-filter:blur(14px);
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border-bottom:1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:66px; gap:18px;}
.logo{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; white-space:nowrap;}
.back-link{
  display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:0.78rem;
  color:var(--text-muted); text-decoration:none; transition:color .3s ease;
}
.back-link:hover{ color:var(--accent); }
.nav-right{ display:flex; align-items:center; gap:12px; }
.lang-switch{ display:flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.lang-btn{ font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:1px; padding:8px 11px; background:transparent; border:none; color:var(--text-muted); cursor:pointer; transition:color .3s ease, background .3s ease; }
.lang-btn.active{ color:#fff; background:var(--accent); }
.lang-btn:not(.active):hover{ color:var(--text); }
.theme-toggle{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--surface); cursor:pointer; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden; transition:border-color .3s ease, transform .3s ease; flex-shrink:0;
}
.theme-toggle:hover{ transform:scale(1.08); border-color:var(--accent); }
.theme-toggle svg{ width:19px; height:19px; stroke:var(--icon-fill); transition:transform .5s cubic-bezier(.4,1.8,.5,1); filter:drop-shadow(var(--glow)); }
html[data-theme="dark"] .theme-toggle svg{ transform:rotate(180deg); }

.reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

header.page-head{ padding:150px 0 60px; }
header.page-head h1{ font-size:clamp(2rem,4.6vw,3.2rem); line-height:1.08; margin-bottom:20px; max-width:760px;}
header.page-head p{ color:var(--text-muted); font-size:1.05rem; line-height:1.7; max-width:700px; margin-bottom:18px;}

.case-teaser{
  margin-top:26px; padding:28px 26px; border-radius:var(--radius);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface));
  border:1px solid var(--line); position:relative; overflow:hidden;
}
.case-teaser::before{
  content:""; position:absolute; top:-40%; right:-8%; width:280px; height:280px; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%);
  pointer-events:none;
}
.teaser-lede{ font-size:1rem; line-height:1.7; color:var(--text); max-width:720px; margin-bottom:22px; position:relative; }
.teaser-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; position:relative; }
@media(max-width:700px){ .teaser-row{ grid-template-columns:1fr; } }
.teaser-item{
  display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); text-decoration:none;
  transition:border-color .3s ease, transform .3s ease, background .3s ease;
}
.teaser-item:hover{ border-color:var(--accent); transform:translateX(4px); background:var(--surface-2); }
.teaser-num{ font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--accent); font-weight:600; flex-shrink:0; }
.teaser-text{ font-size:0.88rem; line-height:1.5; color:var(--text-muted); }
.teaser-text strong{ color:var(--text); font-weight:600; }

section.cases{ padding:20px 0 120px; }
.case{
  border-top:1px solid var(--line); padding:56px 0;
}
.case:last-child{ padding-bottom:0; }
.case-tag{ font-family:'IBM Plex Mono',monospace; font-size:0.72rem; color:var(--accent); letter-spacing:1.5px; text-transform:uppercase; display:block; margin-bottom:10px;}
.case h2{ font-size:clamp(1.4rem,2.6vw,1.9rem); margin-bottom:6px;}
.case .case-sub{ color:var(--text-muted); font-size:0.9rem; margin-bottom:22px;}
.case > p.case-context{ color:var(--text-muted); font-size:1rem; line-height:1.75; max-width:820px; margin-bottom:30px;}

.case-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
@media(max-width:760px){ .case-grid{ grid-template-columns:1fr; } }
.case-field{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px;
  transition:border-color .3s ease, transform .3s ease;
}
.case-field:hover{ border-color:var(--accent); transform:translateY(-3px); }
.case-field h4{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:10px;
}
.case-field p{ color:var(--text-muted); font-size:0.9rem; line-height:1.6; }
.case-field ul{ list-style:none; display:flex; flex-direction:column; gap:6px; margin-top:4px;}
.case-field li{ color:var(--text-muted); font-size:0.88rem; line-height:1.5; padding-left:14px; position:relative;}
.case-field li::before{ content:""; position:absolute; left:0; top:7px; width:4px; height:4px; border-radius:50%; background:var(--accent); }

.result-banner{
  margin-top:18px; padding:18px 22px; border-left:2px solid var(--accent); background:var(--surface-2);
  border-radius:0 var(--radius) var(--radius) 0;
}
.result-banner h4{
  font-family:'IBM Plex Mono',monospace; font-size:0.68rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}
.result-banner p{ color:var(--text); font-size:0.94rem; line-height:1.6; }

.doc-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; }
.doc-link{
  display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:.74rem;
  padding:10px 16px; border-radius:8px; border:1px solid var(--line); background:var(--surface);
  color:var(--text); cursor:pointer; transition:border-color .3s ease, transform .3s ease;
}
.doc-link:hover{ border-color:var(--accent); color:var(--accent); transform:translateY(-2px); }
.doc-link svg{ width:14px; height:14px; stroke:currentColor; }

#docModal{
  display:none; position:fixed; inset:0; z-index:100; background:rgba(0,0,0,0.6);
  align-items:center; justify-content:center; padding:30px;
}
#docModal.open{ display:flex; }
.modal-box{
  background:var(--bg); border-radius:12px; width:100%; max-width:880px; height:88vh;
  display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; padding:14px 20px;
  border-bottom:1px solid var(--line); font-family:'IBM Plex Mono',monospace; font-size:.8rem;
}
.modal-close{
  background:none; border:none; color:var(--text-muted); font-size:1.3rem; cursor:pointer; line-height:1;
  padding:4px 8px; border-radius:6px; transition:color .3s ease, background .3s ease;
}
.modal-close:hover{ color:var(--accent); background:var(--surface); }
.modal-box iframe{ flex:1; width:100%; border:none; background:#fff; }

footer.page-foot{ padding:60px 0; text-align:center; color:var(--text-muted); font-size:0.78rem; font-family:'IBM Plex Mono',monospace; }
.magnetic{ display:inline-block; }