:root{
  --bg:#ffffff; --surface:#f3f5f8; --surface-2:#e9edf3; --text:#0a0d12; --text-muted:#5b6472;
  --line:#dde2e9; --accent:#155eef; --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; --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; }
section.cases{ padding:20px 0 120px; }
.case{ border-top:1px solid var(--line); padding:56px 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; }
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; }