:root {
  --bg: #07090f;
  --bg-soft: #0b0e17;
  --panel: rgba(16, 20, 31, .72);
  --panel-strong: #10141f;
  --line: rgba(255,255,255,.095);
  --line-strong: rgba(255,255,255,.17);
  --text: #f3f6fb;
  --muted: #9ba5b4;
  --cyan: #67e7ff;
  --violet: #8b7dff;
  --green: #7df5b4;
  --radius: 24px;
  --content: min(1240px, calc(100vw - 72px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 75% 8%, rgba(95,111,255,.10), transparent 24rem),
    radial-gradient(circle at 10% 42%, rgba(79,221,255,.06), transparent 22rem),
    var(--bg);
  font-family: "Manrope", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
::selection { background: rgba(103,231,255,.25); color: white; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.page-noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 110; background: transparent; }
.scroll-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--violet)); box-shadow: 0 0 16px rgba(103,231,255,.6); }

.section-pad { width: var(--content); margin: 0 auto; }
.site-header {
  width: var(--content); height: 92px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 100; transition: .3s ease;
}
.site-header::before {
  content: ""; position: absolute; inset: 12px -18px; border: 1px solid transparent; border-radius: 18px; z-index: -1; transition: .3s ease;
}
.site-header.scrolled::before { background: rgba(7,9,15,.72); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; gap: 13px; align-items: center; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 11px;
  font-size: 12px; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 0 24px rgba(103,231,255,.05);
}
.brand-copy { display: grid; gap: 2px; }
.brand-copy strong { font-size: 11px; letter-spacing: .13em; }
.brand-copy small { font-size: 8px; color: #6f7b8b; letter-spacing: .22em; }
.desktop-nav { display: flex; gap: 34px; font-size: 12px; color: #aeb7c5; }
.desktop-nav a { transition: .2s ease; }
.desktop-nav a:hover { color: white; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: #9fa9b7; font-size: 9px; letter-spacing: .12em; }
.status-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.menu-button { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); align-items: center; justify-content: center; gap: 5px; flex-direction: column; }
.menu-button span { display:block; width:18px; height:1px; background:#d9e0e9; }
.mobile-menu { display:none; }

.hero { min-height: 100svh; position: relative; display: grid; align-content: center; padding-top: 110px; padding-bottom: 74px; }
.hero-art { position: absolute; inset: 0 -14vw 0 39%; pointer-events:none; overflow:hidden; opacity:.92; }
.hero-art::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--bg) 0%, rgba(7,9,15,.72) 17%, rgba(7,9,15,.1) 57%, var(--bg) 100%); }
.hero-art img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:center; opacity:.72; filter:saturate(.82); }
.hero-grid { position:absolute; inset:0; opacity:.26; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 60px 60px; mask-image: linear-gradient(to right, transparent, black 35%); }
.hero-glow { position:absolute; width:440px; height:440px; border-radius:50%; filter: blur(90px); opacity:.14; }
.hero-glow-a { background:var(--cyan); top:20%; right:18%; }
.hero-glow-b { background:var(--violet); bottom:0; right:4%; }
.hero-content { width:min(780px, 68vw); position:relative; z-index:2; }
.eyebrow { display:flex; gap:10px; flex-wrap:wrap; color:#7e8a9b; font-size:10px; letter-spacing:.18em; margin-bottom:28px; }
.eyebrow span:nth-child(2), .eyebrow span:nth-child(4) { color:#455063; }
h1, h2, h3, p { margin-top:0; }
h1, h2, h3, .brand-copy, .brand-mark { font-family: "IBM Plex Sans", "Manrope", ui-sans-serif, sans-serif; }
.section-label, .card-top, .project-meta, .detail-kicker, .contact-kicker, .status-pill, .meta-kicker, .project-code { font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
h1, h2 { text-wrap: balance; }
h1 { font-size:clamp(56px, 6.45vw, 102px); line-height:.94; letter-spacing:-.045em; max-width:1020px; margin-bottom:30px; font-weight:620; }
h1 em, h2 em { font-style:normal; color:transparent; background:linear-gradient(95deg, #dffbff 0%, var(--cyan) 48%, #9c8fff 100%); -webkit-background-clip:text; background-clip:text; }
.hero-lead { max-width:690px; color:#aab3c1; font-size:clamp(17px,1.4vw,21px); line-height:1.65; margin-bottom:34px; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
.button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:0 20px; border-radius:13px; border:1px solid var(--line); font-size:12px; font-weight:650; letter-spacing:.035em; transition:.25s ease; cursor:pointer; }
.button-primary { border-color:rgba(103,231,255,.34); background:linear-gradient(135deg, rgba(103,231,255,.18), rgba(139,125,255,.13)); box-shadow: inset 0 0 30px rgba(103,231,255,.04), 0 10px 40px rgba(0,0,0,.18); }
.button-primary:hover { transform:translateY(-2px); border-color:rgba(103,231,255,.65); box-shadow:0 12px 40px rgba(103,231,255,.12); }
.button-ghost:hover { border-color:var(--line-strong); background:rgba(255,255,255,.04); }
.hero-meta { position:absolute; z-index:3; bottom:54px; right:0; display:flex; gap:10px; align-items:stretch; }
.meta-card { min-width:220px; padding:15px 16px; border:1px solid var(--line); border-radius:15px; background:rgba(9,12,20,.56); backdrop-filter:blur(14px); display:grid; gap:4px; }
.meta-card-compact { min-width:310px; }
.meta-kicker { font-size:8px; color:#6e798a; letter-spacing:.15em; }
.meta-card strong { font-size:12px; }
.meta-card small { font-size:10px; color:#7e8998; }
.stack-line { display:flex; gap:7px; flex-wrap:wrap; }
.stack-line span { font-size:9px; padding:4px 7px; border-radius:6px; background:rgba(255,255,255,.045); color:#aab3bf; }
.hero-scroll { position:absolute; left:0; bottom:57px; color:#596476; font-size:8px; letter-spacing:.16em; display:flex; align-items:center; gap:10px; }
.hero-scroll span { width:34px; height:1px; background:#3f4a5c; position:relative; overflow:hidden; }
.hero-scroll span::after { content:""; position:absolute; width:13px; height:1px; background:var(--cyan); animation:scan 2.1s infinite ease-in-out; }
@keyframes scan { from { transform:translateX(-14px); } to { transform:translateX(36px); } }

.impact { padding-top:108px; padding-bottom:58px; border-top:1px solid var(--line); }
.section-label { display:flex; gap:10px; align-items:center; color:#748092; font-size:9px; letter-spacing:.17em; margin-bottom:28px; }
.section-label span { color:var(--cyan); }
.impact-grid { display:grid; grid-template-columns:1.5fr .72fr; gap:10vw; align-items:end; }
.impact-grid h2, .section-heading h2, .future h2 { font-size:clamp(40px,4.4vw,70px); line-height:1.03; letter-spacing:-.034em; font-weight:570; margin-bottom:0; }
.impact-grid p, .section-heading p { color:#8e99aa; line-height:1.75; font-size:15px; margin-bottom:3px; }
.impact-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:10px; margin-top:70px; }
.impact-metrics article { min-height:132px; padding:22px; border-top:1px solid var(--line-strong); background:linear-gradient(180deg, rgba(255,255,255,.025), transparent); display:grid; align-content:start; gap:6px; }
.impact-metrics article > span { color:var(--cyan); font-size:20px; }
.impact-metrics strong { font-size:15px; }
.impact-metrics small { color:#6f7a8b; font-size:11px; line-height:1.5; }

.expertise { padding-top:72px; padding-bottom:128px; }
.projects, .architecture { padding-top:118px; padding-bottom:128px; }
.section-heading { display:grid; grid-template-columns:1fr 1fr; gap:12px 6vw; margin-bottom:54px; }
.section-heading .section-label { grid-column:1/-1; }
.section-heading h2 { max-width:700px; }
.section-heading p { max-width:430px; justify-self:end; align-self:end; }
.expertise-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:10px; }
.expertise-card { min-height:320px; border:1px solid var(--line); border-radius:18px; padding:24px; background:rgba(13,16,26,.62); position:relative; overflow:hidden; display:flex; flex-direction:column; }
.expertise-card::before { content:""; position:absolute; width:240px; height:240px; left:var(--x,50%); top:var(--y,50%); transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle, rgba(103,231,255,.13), transparent 63%); opacity:0; transition:opacity .25s; pointer-events:none; }
.expertise-card:hover::before { opacity:1; }
.card-top { display:flex; justify-content:space-between; font-size:9px; letter-spacing:.14em; color:#667184; margin-bottom:70px; }
.card-top span { color:#495468; }
.card-top b { font-weight:600; color:#8e99a9; }
.expertise-card h3 { font-size:24px; letter-spacing:-.025em; margin-bottom:15px; }
.expertise-card p { color:#8691a2; font-size:13px; line-height:1.7; max-width:340px; }
.tags, .project-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; }
.tags span, .project-tags span { font-size:9px; color:#8490a0; padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.02); }

.projects { border-top:1px solid var(--line); }
.project-list { display:grid; gap:10px; }
.projects-discoverability { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(90deg, rgba(103,231,255,.05), rgba(139,125,255,.035)); }
.projects-discoverability span { display:inline-flex; align-items:center; justify-content:center; min-width:98px; height:28px; padding:0 10px; border-radius:999px; border:1px solid rgba(103,231,255,.16); background:rgba(255,255,255,.025); color:var(--cyan); font-family:"IBM Plex Mono", ui-monospace, monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; }
.projects-discoverability p { margin:0; color:#98a4b4; font-size:13px; line-height:1.55; }
.project { border:1px solid var(--line); border-radius:20px; overflow:hidden; background:rgba(12,15,24,.66); }
.project-clickable { cursor:pointer; transition: transform .28s var(--ease-premium), border-color .28s var(--ease-premium), box-shadow .28s var(--ease-premium), background .28s var(--ease-premium); }
.project-clickable:hover, .project-clickable:focus-visible { transform: translateY(-3px); border-color: rgba(103,231,255,.26); box-shadow: 0 16px 50px rgba(0,0,0,.24), 0 0 0 1px rgba(103,231,255,.07) inset; }
.project-clickable:focus-visible { outline: none; }
.project-featured { display:grid; grid-template-columns:1.2fr 1fr; min-height:560px; }
.project-visual { position:relative; overflow:hidden; min-height:320px; border-right:1px solid var(--line); background:#0a0e16; }
.project-code { position:absolute; left:22px; top:20px; color:#697486; font-size:9px; letter-spacing:.14em; z-index:3; }
.yarus-visual { background:radial-gradient(circle at 56% 47%, rgba(103,231,255,.13), transparent 25%), radial-gradient(circle at 65% 56%, rgba(139,125,255,.08), transparent 34%), #0a0e16; }
.map-lines { position:absolute; inset:-10%; opacity:.47; transform:rotate(-7deg) scale(1.1); background: repeating-radial-gradient(ellipse at 64% 49%, transparent 0 13px, rgba(103,231,255,.16) 14px 15px, transparent 16px 29px); mask-image:radial-gradient(circle at 65% 50%,black,transparent 64%); }
.project-orbit { position:absolute; border:1px solid rgba(103,231,255,.16); border-radius:50%; left:57%; top:50%; transform:translate(-50%,-50%); }
.orbit-a { width:280px; height:280px; }.orbit-b { width:430px; height:430px; border-color:rgba(139,125,255,.1); }
.project-node { position:absolute; width:74px; height:74px; border:1px solid rgba(103,231,255,.32); background:rgba(13,20,30,.78); border-radius:50%; display:grid; place-items:center; font-size:9px; letter-spacing:.1em; box-shadow:0 0 30px rgba(103,231,255,.07); }
.node-a { left:53%; top:20%; }.node-b { left:69%; top:50%; }.node-c { left:43%; top:67%; }
.project-copy { padding:44px; display:flex; flex-direction:column; align-items:flex-start; }
.project-meta { display:flex; justify-content:space-between; width:100%; gap:15px; color:#6c7788; font-size:8px; letter-spacing:.15em; margin-bottom:70px; }
.project-meta span:last-child { color:#7cad9f; }
.project-copy h3 { font-size:clamp(38px,4vw,62px); letter-spacing:-.04em; margin-bottom:20px; font-weight:560; }
.project-copy p { color:#8b96a6; font-size:14px; line-height:1.75; max-width:520px; }
.project-tags { margin-top:26px; }
.text-link { margin-top:auto; border:0; background:transparent; padding:0; color:#dce6f0; font-size:11px; cursor:pointer; display:flex; gap:12px; align-items:center; }
.text-link:hover { color:var(--cyan); }
.project-duo { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.project-small { display:grid; grid-template-rows:320px 1fr; min-height:620px; }
.project-small .project-visual { border-right:0; border-bottom:1px solid var(--line); }
.project-small .project-copy { padding:32px; }
.project-small .project-meta { margin-bottom:34px; }
.project-small .project-copy h3 { font-size:36px; }
.forest-visual { background:radial-gradient(circle at 66% 54%, rgba(125,245,180,.12), transparent 26%), #0a0e15; }
.forest-grid { position:absolute; inset:0; background-image:linear-gradient(35deg, transparent 47%, rgba(125,245,180,.11) 48%, rgba(125,245,180,.11) 49%, transparent 50%), linear-gradient(145deg, transparent 47%, rgba(103,231,255,.07) 48%, rgba(103,231,255,.07) 49%, transparent 50%); background-size:34px 34px; opacity:.55; mask-image:radial-gradient(circle at 65% 50%,black,transparent 70%); }
.forest-rings { position:absolute; width:210px; height:210px; border:1px solid rgba(125,245,180,.3); border-radius:50%; right:17%; top:25%; box-shadow:0 0 0 28px rgba(125,245,180,.035),0 0 0 58px rgba(125,245,180,.025),0 0 0 88px rgba(125,245,180,.015); }
.matrix-visual { background:radial-gradient(circle at 50% 46%, rgba(139,125,255,.18), transparent 23%), #0a0d16; }
.matrix-cube { position:absolute; width:120px; height:120px; border:1px solid rgba(139,125,255,.20); transform:rotate(45deg); left:50%; top:50%; translate:-50% -50%; }
.cube-2 { width:190px;height:190px;border-color:rgba(103,231,255,.13); }.cube-3{width:270px;height:270px;border-color:rgba(255,255,255,.06);}
.matrix-lock { position:absolute; left:50%; top:50%; translate:-50% -50%; width:66px; height:66px; border-radius:18px; display:grid; place-items:center; font-weight:800; border:1px solid rgba(103,231,255,.34); background:rgba(14,18,29,.84); box-shadow:0 0 40px rgba(139,125,255,.12); }

.architecture { border-top:1px solid var(--line); }
.architecture-shell { display:grid; grid-template-columns:1.6fr .8fr; min-height:520px; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:linear-gradient(145deg,rgba(12,16,26,.82),rgba(8,10,17,.8)); }
.architecture-map { position:relative; border-right:1px solid var(--line); min-height:520px; }
.architecture-map::before { content:""; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.09) .8px,transparent .8px); background-size:24px 24px; opacity:.28; }
.architecture-map svg { position:absolute; inset:8% 5%; width:90%; height:84%; overflow:visible; }
.architecture-map path { fill:none; stroke:url(#lineGradient); stroke-width:1.2; opacity:.23; stroke-dasharray:5 8; }
.arch-node { position:absolute; min-width:112px; height:44px; padding:0 15px; border:1px solid var(--line-strong); border-radius:12px; background:#101522; cursor:pointer; color:#8591a2; font-size:10px; letter-spacing:.04em; box-shadow:0 12px 30px rgba(0,0,0,.22); transition:.25s ease; }
.arch-node span { color:#566175; margin-right:8px; }
.arch-node:hover,.arch-node.active { color:white; border-color:rgba(103,231,255,.43); box-shadow:0 0 30px rgba(103,231,255,.08); transform:translateY(-2px); }
.arch-node.active span { color:var(--cyan); }
.n1{left:4%;top:45%}.n2{left:26%;top:15%}.n3{left:26%;top:72%}.n4{left:49%;top:45%}.n5{left:72%;top:15%}.n6{left:74%;top:72%}
.architecture-detail { padding:48px; align-self:center; }
.detail-kicker { color:var(--cyan); font-size:9px; letter-spacing:.15em; }
.architecture-detail h3 { font-size:32px; line-height:1.15; letter-spacing:-.035em; margin:22px 0 16px; }
.architecture-detail p { color:#8792a3; line-height:1.7; font-size:13px; }

.future { padding-top:112px; padding-bottom:120px; }
.future-inner { border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line); padding:70px 0; display:grid; grid-template-columns:1fr 1fr; gap:9vw; }
.future-list { display:flex; flex-wrap:wrap; align-content:center; gap:8px; }
.future-list span { padding:11px 13px; border:1px solid var(--line); border-radius:999px; font-size:9px; letter-spacing:.09em; color:#8f9aaa; background:rgba(255,255,255,.02); }

.contact { padding-top:30px; padding-bottom:100px; }
.contact-panel { min-height:580px; border:1px solid var(--line); border-radius:26px; position:relative; overflow:hidden; padding:80px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; background:radial-gradient(circle at 80% 50%, rgba(103,231,255,.1), transparent 24%), radial-gradient(circle at 76% 48%, rgba(139,125,255,.10), transparent 36%), linear-gradient(145deg,#0c101a,#090b12); }
.contact-panel::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:54px 54px; opacity:.17; mask-image:linear-gradient(90deg,transparent,black); }
.contact-kicker { position:relative; color:var(--cyan); font-size:9px; letter-spacing:.16em; margin-bottom:27px; }
.contact-panel h2 { position:relative; font-size:clamp(42px,5.4vw,80px); line-height:.98; letter-spacing:-.04em; max-width:900px; font-weight:560; margin-bottom:25px; }
.contact-panel p { position:relative; max-width:640px; color:#8e99a8; font-size:15px; line-height:1.7; }
.button-large { position:relative; margin-top:18px; min-height:56px; padding:0 24px; }
.contact-note { position:relative; margin-top:18px; color:#5f6b7c; font-size:9px; }
.contact-signal { position:absolute; width:420px; height:420px; right:5%; top:50%; translate:0 -50%; }
.contact-signal span { position:absolute; inset:50%; translate:-50% -50%; border:1px solid rgba(103,231,255,.16); border-radius:50%; }
.contact-signal span:nth-child(1){width:130px;height:130px}.contact-signal span:nth-child(2){width:240px;height:240px}.contact-signal span:nth-child(3){width:380px;height:380px}
.contact-signal::after { content:""; position:absolute; width:10px; height:10px; border-radius:50%; background:var(--cyan); left:50%; top:50%; translate:-50% -50%; box-shadow:0 0 32px var(--cyan); }

.site-footer { min-height:150px; border-top:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; color:#687486; font-size:9px; letter-spacing:.12em; }
.site-footer > div { display:flex; gap:18px; align-items:center; }
.site-footer strong { color:#aab4c1; font-size:10px; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.visible { opacity:1; transform:none; }.reveal-delay-1{transition-delay:.14s}
.project-dialog { width:min(820px,calc(100vw - 40px)); color:var(--text); background:#0d111b; border:1px solid var(--line-strong); border-radius:22px; padding:48px; box-shadow:0 40px 120px rgba(0,0,0,.72); }
.project-dialog::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.project-dialog h2 { font-size:42px; letter-spacing:-.04em; max-width:650px; margin:18px 0 28px; }
.project-dialog p { color:#8d98a8; line-height:1.7; }
.dialog-close { position:absolute; right:18px; top:18px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:rgba(255,255,255,.03); cursor:pointer; }
.dialog-architecture { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:28px 0; }
.dialog-architecture div { padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.03); font-size:11px; }.dialog-architecture span{color:var(--cyan)}
.toast { position:fixed; left:50%; bottom:28px; translate:-50% 120px; z-index:200; padding:13px 16px; border:1px solid var(--line-strong); border-radius:12px; background:rgba(14,18,29,.92); backdrop-filter:blur(16px); color:#aab4c2; font-size:11px; transition:.35s ease; opacity:0; }.toast.show{translate:-50% 0;opacity:1}

@media (max-width: 980px) {
  :root { --content:min(100% - 34px, 900px); }
  .desktop-nav,.status-pill { display:none; }.menu-button{display:flex}.mobile-menu{position:fixed;right:17px;top:77px;z-index:99;width:220px;padding:14px;border:1px solid var(--line);border-radius:15px;background:rgba(10,13,21,.95);backdrop-filter:blur(16px);flex-direction:column;gap:2px;opacity:0;transform:translateY(-10px);pointer-events:none;transition:.25s}.mobile-menu.open{display:flex;opacity:1;transform:none;pointer-events:auto}.mobile-menu a{padding:12px;border-radius:9px;color:#aeb7c4;font-size:12px}.mobile-menu a:hover{background:rgba(255,255,255,.04);color:white}
  .hero-content { width:100%; }.hero-art { left:30%; opacity:.62; }.hero-meta { position:relative; right:auto; bottom:auto; margin-top:60px; flex-wrap:wrap; }.hero-scroll{display:none}.meta-card{flex:1;min-width:220px}.meta-card-compact{min-width:260px}
  .impact-grid,.section-heading,.future-inner { grid-template-columns:1fr; }.section-heading p{justify-self:start}.impact-grid{gap:28px}.impact-metrics{grid-template-columns:1fr 1fr}.expertise-grid{grid-template-columns:1fr 1fr}.project-featured{grid-template-columns:1fr}.project-visual{border-right:0;border-bottom:1px solid var(--line)}.project-duo{grid-template-columns:1fr}.architecture-shell{grid-template-columns:1fr}.architecture-map{border-right:0;border-bottom:1px solid var(--line)}.contact-panel{padding:50px}.contact-signal{opacity:.45;right:-20%}.site-footer{flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
}
@media (max-width: 620px) {
  .site-header{height:74px}.brand-copy small{display:none}.brand-mark{width:36px;height:36px}.hero{padding-top:95px;min-height:auto;padding-bottom:90px}.hero-art{left:0;right:-45%;top:90px;height:68%;opacity:.44}.hero-art::after{background:linear-gradient(90deg,var(--bg) 0%,rgba(7,9,15,.58) 60%,rgba(7,9,15,.3) 100%),linear-gradient(0deg,var(--bg),transparent 44%)}
  h1{font-size:clamp(48px,15vw,70px)}.hero-lead{font-size:16px}.hero-actions{flex-direction:column;align-items:stretch}.button{width:100%}.hero-meta{margin-top:44px;display:grid}.meta-card,.meta-card-compact{min-width:0}.impact{padding-top:72px;padding-bottom:42px}.expertise{padding-top:56px;padding-bottom:88px}.projects,.architecture,.future{padding-top:82px;padding-bottom:90px}.impact-metrics,.expertise-grid{grid-template-columns:1fr}.impact-metrics{margin-top:45px}.impact-grid h2,.section-heading h2,.future h2{font-size:40px}.expertise-card{min-height:280px}.card-top{margin-bottom:48px}.project-featured{min-height:0}.project-copy{padding:28px}.project-meta{margin-bottom:36px}.project-small{min-height:0}.project-small .project-visual{min-height:260px}.project-small{grid-template-rows:260px 1fr}.architecture-shell{min-height:0}.architecture-map{min-height:620px}.architecture-map svg{display:none}.arch-node{left:50%;translate:-50% 0;width:70%;}.arch-node.active{transform:translateY(-2px)}.n1{top:7%}.n2{top:22%}.n3{top:37%}.n4{top:52%}.n5{top:67%}.n6{top:82%}.architecture-detail{padding:30px}.future-inner{gap:42px;padding:48px 0}.contact{padding-top:0}.contact-panel{padding:38px 26px;min-height:620px}.contact-panel h2{font-size:42px}.contact-signal{width:320px;height:320px;right:-40%;top:33%}.contact-note{max-width:250px;line-height:1.5}.site-footer > div{flex-direction:column;align-items:flex-start;gap:6px}.project-dialog{padding:36px 24px}.project-dialog h2{font-size:32px}.dialog-architecture span{transform:rotate(90deg)}
}

@media (max-width: 1280px) and (min-width: 981px) {
  :root { --content:min(1180px, calc(100vw - 56px)); }
  .desktop-nav { gap:26px; }
  .impact-grid { gap:7vw; }
  .impact-metrics { margin-top:58px; }
}

@media (max-width: 760px) {
  :root { --content:min(100% - 30px, 720px); }
  .section-heading { margin-bottom:44px; }
  .impact-metrics { gap:8px; }
  .expertise-grid { gap:8px; }
  .project-duo { gap:8px; }
}

@media (max-width: 460px) {
  :root { --content:calc(100vw - 26px); }
  .site-header { padding-left:max(0px, env(safe-area-inset-left)); padding-right:max(0px, env(safe-area-inset-right)); }
  .brand { gap:10px; }
  .brand-copy strong { font-size:10px; letter-spacing:.10em; }
  h1 { font-size:clamp(43px, 13.2vw, 59px); line-height:.97; letter-spacing:-.052em; }
  .hero-lead { line-height:1.58; }
  .eyebrow { font-size:8px; gap:7px; letter-spacing:.14em; }
  .impact-grid h2,.section-heading h2,.future h2 { font-size:36px; }
  .impact-metrics article { min-height:118px; padding:19px; }
  .expertise-card { padding:21px; }
  .expertise-card h3 { font-size:22px; }
  .project-copy h3,.project-small .project-copy h3 { font-size:34px; }
  .architecture-detail h3 { font-size:28px; }
  .contact-panel { min-height:560px; padding:34px 22px; }
  .contact-panel h2 { font-size:36px; line-height:1.02; }
  .contact-panel p { font-size:14px; }
  .mobile-menu { left:13px; right:13px; width:auto; }
}

@media (hover: none) {
  .expertise-card::before { display:none; }
  .button-primary:hover, .arch-node:hover { transform:none; }
}

@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none} }

/* ========================================================================== */
/* v0.1.2 — Polished UI & Motion Pass                                         */
/* ========================================================================== */

:root {
  --header-h: 72px;
  --ease-premium: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, .61, .36, 1);
  --section-space: clamp(88px, 7.5vw, 122px);
  --section-space-tight: clamp(54px, 5vw, 78px);
}

html {
  scroll-padding-top: 94px;
}

body {
  font-size: 16px;
  font-kerning: normal;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main section[id] {
  scroll-margin-top: 94px;
}

p { text-wrap: pretty; }

h1, h2, h3 {
  font-synthesis: none;
}

h1 {
  font-size: clamp(58px, 6.15vw, 98px);
  line-height: .935;
  letter-spacing: -.052em;
  font-weight: 600;
  margin-bottom: 28px;
}

.impact-grid h2,
.section-heading h2,
.future h2 {
  font-size: clamp(42px, 4.05vw, 66px);
  line-height: 1.015;
  letter-spacing: -.041em;
  font-weight: 500;
}

.hero-lead {
  max-width: 670px;
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.68;
  letter-spacing: -.012em;
  color: #a6b0bf;
}

.impact-grid p,
.section-heading p {
  font-size: 14px;
  line-height: 1.72;
  letter-spacing: -.005em;
}

/* Header — transparent at the top, compact glass surface after scroll. */
.site-header {
  top: 12px;
  height: var(--header-h);
  padding: 0 4px;
  will-change: transform, height;
  transition:
    transform .58s var(--ease-premium),
    height .42s var(--ease-premium),
    opacity .3s ease;
}

.site-header::before {
  inset: 0 -14px;
  border-radius: 20px;
  background: rgba(7, 9, 15, 0);
  border-color: transparent;
  box-shadow: 0 16px 50px rgba(0,0,0,0);
  backdrop-filter: blur(0px) saturate(1);
  -webkit-backdrop-filter: blur(0px) saturate(1);
  transition:
    background .45s var(--ease-premium),
    border-color .45s var(--ease-premium),
    box-shadow .45s var(--ease-premium),
    backdrop-filter .45s var(--ease-premium);
}

.site-header.scrolled {
  height: 62px;
}

.site-header.scrolled::before {
  background: rgba(8, 11, 18, .72);
  border-color: rgba(255,255,255,.105);
  box-shadow: 0 16px 50px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(22px) saturate(1.18);
  -webkit-backdrop-filter: blur(22px) saturate(1.18);
}

.site-header.header-hidden {
  transform: translate(-50%, calc(-100% - 28px));
}

.site-header.menu-active {
  transform: translate(-50%, 0);
}

.brand-mark {
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .45s var(--ease-premium);
}

.brand:hover .brand-mark {
  transform: rotate(-3deg) scale(1.035);
  border-color: rgba(103,231,255,.32);
  box-shadow: inset 0 0 26px rgba(103,231,255,.06), 0 8px 24px rgba(0,0,0,.16);
}

.desktop-nav {
  gap: clamp(25px, 2.6vw, 38px);
}

.desktop-nav a {
  position: relative;
  padding: 10px 0;
  color: #98a3b3;
  transition: color .28s ease;
}

.desktop-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(103,231,255,.72);
  opacity: 0;
  transform: translate(-50%, 5px) scale(.4);
  transition: opacity .3s ease, transform .42s var(--ease-premium);
}

.desktop-nav a:hover,
.desktop-nav a.is-active { color: #eef5fb; }
.desktop-nav a.is-active::after { opacity: 1; transform: translate(-50%, 0) scale(1); }

.status-pill {
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.site-header.scrolled .status-pill { background: rgba(255,255,255,.025); }

/* Mobile navigation can animate both in and out; no display:none snap. */
.menu-scrim {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 96;
  background: rgba(3,5,10,.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.menu-scrim.open { opacity: 1; pointer-events: auto; }

.menu-button span {
  transform-origin: center;
  transition: transform .38s var(--ease-premium), opacity .2s ease;
}
.menu-button[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

/* Hero — stronger hierarchy, controlled whitespace and staged entrance. */
.hero {
  min-height: max(760px, 100svh);
  padding-top: 126px;
  padding-bottom: 92px;
  align-content: center;
  isolation: isolate;
}

.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12) 14%, rgba(255,255,255,.12) 86%, transparent);
  opacity: .8;
}

.hero-art {
  inset: 0 -12vw 0 38%;
  transform: scale(1.025);
  opacity: 0;
  transition: opacity 1.35s ease .16s, transform 1.8s var(--ease-premium) .08s;
}
body.ui-ready .hero-art { opacity: .92; transform: scale(1); }

.hero-art img {
  filter: saturate(.78) contrast(1.03);
}

.hero-content {
  width: min(790px, 66vw);
}

.eyebrow {
  margin-bottom: 24px;
  font-size: 9px;
  line-height: 1.5;
}

.hero-actions { gap: 10px; }

.button {
  overflow: hidden;
  position: relative;
  min-height: 50px;
  border-radius: 14px;
  transition:
    transform .42s var(--ease-premium),
    border-color .3s ease,
    background .3s ease,
    box-shadow .42s var(--ease-premium);
}

.button span,
.text-link span {
  transition: transform .42s var(--ease-premium);
}
.button:hover span,
.text-link:hover span { transform: translate(3px, -3px); }

.button-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.10) 43%, transparent 66%);
  transform: translateX(-130%);
  transition: transform .75s var(--ease-premium);
  pointer-events: none;
}
.button-primary:hover::before { transform: translateX(130%); }

.hero-meta {
  bottom: 50px;
  gap: 8px;
}

.meta-card {
  border-radius: 14px;
  background: rgba(9, 12, 20, .50);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
  transition: border-color .35s ease, background .35s ease, transform .45s var(--ease-premium);
}
.meta-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.16);
  background: rgba(12,16,26,.67);
}

/* Entrance choreography — restrained rather than flashy. */
.hero-content .eyebrow,
.hero-content h1,
.hero-content .hero-lead,
.hero-content .hero-actions,
.hero-meta,
.hero-scroll {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
}

body.ui-ready .hero-content .eyebrow,
body.ui-ready .hero-content h1,
body.ui-ready .hero-content .hero-lead,
body.ui-ready .hero-content .hero-actions,
body.ui-ready .hero-meta,
body.ui-ready .hero-scroll {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition: opacity .85s ease, transform 1.0s var(--ease-premium), filter .75s ease;
}
body.ui-ready .hero-content .eyebrow { transition-delay: .08s; }
body.ui-ready .hero-content h1 { transition-delay: .15s; }
body.ui-ready .hero-content .hero-lead { transition-delay: .25s; }
body.ui-ready .hero-content .hero-actions { transition-delay: .34s; }
body.ui-ready .hero-meta { transition-delay: .46s; }
body.ui-ready .hero-scroll { transition-delay: .58s; }

/* Section rhythm. The previous dead zone after metrics is intentionally removed. */
.impact {
  padding-top: clamp(84px, 7vw, 108px);
  padding-bottom: clamp(22px, 2.2vw, 34px);
}

.impact-metrics {
  margin-top: clamp(46px, 4.4vw, 62px);
  gap: 8px;
}

.impact-metrics article {
  min-height: 126px;
  padding: 20px 22px;
  transition: background .35s ease, border-color .35s ease, transform .45s var(--ease-premium);
}
.impact-metrics article:hover {
  transform: translateY(-3px);
  border-top-color: rgba(103,231,255,.32);
  background: linear-gradient(180deg, rgba(103,231,255,.04), transparent 78%);
}

.expertise {
  padding-top: clamp(48px, 4vw, 62px);
  padding-bottom: var(--section-space);
}

.projects,
.architecture {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.section-heading {
  gap: 14px clamp(34px, 6vw, 90px);
  margin-bottom: clamp(42px, 4.2vw, 58px);
}

.section-heading .section-label,
.impact > .section-label {
  margin-bottom: 24px;
}

.expertise-grid,
.project-list,
.project-duo {
  gap: 8px;
}

.expertise-card {
  min-height: 304px;
  border-radius: 19px;
  padding: 25px;
  background: linear-gradient(150deg, rgba(15,19,30,.70), rgba(10,13,21,.60));
  box-shadow: inset 0 1px rgba(255,255,255,.018);
  transition:
    transform .55s var(--ease-premium),
    border-color .36s ease,
    background .36s ease,
    box-shadow .55s var(--ease-premium);
}

.expertise-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.16);
  background: linear-gradient(150deg, rgba(17,22,34,.82), rgba(10,13,21,.68));
  box-shadow: 0 22px 60px rgba(0,0,0,.18), inset 0 1px rgba(255,255,255,.03);
}

.card-top { margin-bottom: 58px; }
.expertise-card h3 {
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -.03em;
}

.project {
  border-radius: 22px;
  transition: border-color .4s ease, transform .6s var(--ease-premium), box-shadow .6s var(--ease-premium);
}
.project:hover {
  border-color: rgba(255,255,255,.15);
  box-shadow: 0 30px 90px rgba(0,0,0,.18);
}

.project-featured { min-height: 540px; }
.project-copy { padding: clamp(34px, 3.8vw, 48px); }
.project-meta { margin-bottom: clamp(48px, 5vw, 68px); }
.project-copy h3 { font-weight: 500; }
.project-copy p { line-height: 1.72; }

.project-visual > * {
  will-change: transform;
}

.orbit-a { animation: orbit-drift 18s linear infinite; }
.orbit-b { animation: orbit-drift 28s linear infinite reverse; }
.map-lines { animation: map-drift 18s ease-in-out infinite alternate; }
.forest-rings { animation: ring-breathe 7s ease-in-out infinite; }
.cube-1 { animation: cube-drift-a 18s linear infinite; }
.cube-2 { animation: cube-drift-b 26s linear infinite reverse; }
.cube-3 { animation: cube-drift-a 36s linear infinite reverse; }

@keyframes orbit-drift {
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes map-drift {
  from { transform: rotate(-7deg) scale(1.10) translate3d(-1%,0,0); }
  to { transform: rotate(-4deg) scale(1.13) translate3d(1.5%,-1%,0); }
}
@keyframes ring-breathe {
  0%,100% { transform: scale(.985); opacity: .75; }
  50% { transform: scale(1.035); opacity: 1; }
}
@keyframes cube-drift-a {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}
@keyframes cube-drift-b {
  from { transform: rotate(45deg) scale(.98); }
  to { transform: rotate(405deg) scale(1.03); }
}

.architecture-shell {
  border-radius: 24px;
  min-height: 500px;
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.architecture-map { min-height: 500px; }
.architecture-map path {
  stroke-dasharray: 5 8;
  animation: dash-flow 18s linear infinite;
}
@keyframes dash-flow { to { stroke-dashoffset: -130; } }

.arch-node {
  transition: transform .46s var(--ease-premium), border-color .32s ease, color .32s ease, box-shadow .45s var(--ease-premium), background .32s ease;
}
.arch-node.active {
  background: linear-gradient(145deg, rgba(18,27,39,.96), rgba(14,19,31,.96));
}
.arch-node.active::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  right: 9px;
  top: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 12px rgba(103,231,255,.8);
}

.future {
  padding-top: clamp(84px, 7vw, 108px);
  padding-bottom: clamp(82px, 7vw, 108px);
}
.future-inner {
  padding: clamp(58px, 5.4vw, 72px) 0;
}
.future-list span {
  transition: transform .38s var(--ease-premium), border-color .3s ease, color .3s ease, background .3s ease;
}
.future-list span:hover {
  transform: translateY(-2px);
  color: #d9e5ee;
  border-color: rgba(103,231,255,.25);
  background: rgba(103,231,255,.035);
}

.contact {
  padding-top: 0;
  padding-bottom: clamp(78px, 7vw, 104px);
}
.contact-panel {
  min-height: clamp(520px, 45vw, 590px);
  padding: clamp(52px, 6vw, 80px);
  border-radius: 28px;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 35px 100px rgba(0,0,0,.15);
}
.contact-signal span { animation: signal-pulse 7s ease-in-out infinite; }
.contact-signal span:nth-child(2) { animation-delay: -.9s; }
.contact-signal span:nth-child(3) { animation-delay: -1.8s; }
@keyframes signal-pulse {
  0%,100% { opacity: .48; transform: scale(.985); }
  50% { opacity: 1; transform: scale(1.025); }
}

.site-footer { min-height: 126px; }

/* Reveal system: blur + vertical travel + tiny scale creates depth without “template” motion. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(.992);
  filter: blur(10px);
  transition:
    opacity .82s ease var(--reveal-delay, 0ms),
    transform 1.05s var(--ease-premium) var(--reveal-delay, 0ms),
    filter .72s ease var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}
.reveal.visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.reveal-delay-1 { --reveal-delay: 110ms; }

.project-dialog {
  transform: translateY(12px) scale(.985);
  opacity: 0;
  transition: transform .45s var(--ease-premium), opacity .28s ease, overlay .45s allow-discrete, display .45s allow-discrete;
}
.project-dialog[open] { transform: none; opacity: 1; }
@starting-style {
  .project-dialog[open] { transform: translateY(18px) scale(.98); opacity: 0; }
}
.project-dialog::backdrop {
  background: rgba(2,4,9,.0);
  backdrop-filter: blur(0px);
  transition: background .4s ease, backdrop-filter .4s ease, overlay .4s allow-discrete, display .4s allow-discrete;
}
.project-dialog[open]::backdrop {
  background: rgba(2,4,9,.70);
  backdrop-filter: blur(10px);
}
@starting-style {
  .project-dialog[open]::backdrop { background: rgba(2,4,9,0); backdrop-filter: blur(0px); }
}

:focus-visible {
  outline: 2px solid rgba(103,231,255,.72);
  outline-offset: 4px;
}

/* Tablet */
@media (max-width: 980px) {
  :root {
    --header-h: 64px;
    --section-space: clamp(76px, 9vw, 102px);
  }

  .site-header { top: 10px; height: 64px; }
  .site-header.scrolled { height: 58px; }
  .site-header::before { inset: 0 -8px; border-radius: 18px; }

  .menu-scrim { display: block; }
  .mobile-menu {
    display: flex;
    visibility: hidden;
    top: 84px;
    right: 17px;
    width: min(330px, calc(100vw - 34px));
    padding: 10px;
    gap: 2px;
    opacity: 0;
    transform: translateY(-12px) scale(.97);
    transform-origin: top right;
    pointer-events: none;
    border-radius: 18px;
    background: rgba(9,12,20,.92);
    box-shadow: 0 28px 80px rgba(0,0,0,.35);
    transition: opacity .28s ease, transform .45s var(--ease-premium), visibility .45s;
  }
  .mobile-menu.open {
    display: flex;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .mobile-menu a { padding: 14px 13px; }

  body.menu-open { overflow: hidden; }

  .hero {
    min-height: max(760px, 100svh);
    padding-top: 112px;
    padding-bottom: 68px;
  }
  .hero-art { left: 25%; right: -22%; opacity: 0; }
  body.ui-ready .hero-art { opacity: .58; }
  .hero-content { width: min(760px, 92%); }
  .hero-meta { margin-top: 50px; }

  .impact-grid { gap: 24px; }
  .section-heading { gap: 22px; }
  .section-heading p { max-width: 580px; }

  .expertise-card { min-height: 286px; }
  .card-top { margin-bottom: 48px; }

  .project-featured { min-height: 0; }
  .project-featured .project-visual { min-height: 390px; }
}

/* Mobile */
@media (max-width: 620px) {
  :root {
    --content: calc(100vw - 28px);
    --section-space: 78px;
  }

  html { scroll-padding-top: 78px; }
  main section[id] { scroll-margin-top: 78px; }

  .site-header {
    height: 58px;
    top: 8px;
  }
  .site-header.scrolled { height: 54px; }
  .site-header::before { inset: 0 -5px; border-radius: 16px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-copy strong { font-size: 9px; letter-spacing: .12em; }
  .brand-copy small { display: block; font-size: 7px; }
  .menu-button { width: 38px; height: 38px; border-radius: 11px; }

  .mobile-menu {
    top: 74px;
    left: 14px;
    right: 14px;
    width: auto;
    transform-origin: top center;
  }

  .hero {
    min-height: max(720px, 100svh);
    padding-top: 104px;
    padding-bottom: 54px;
    align-content: start;
  }

  .hero-art {
    left: -12%;
    right: -78%;
    top: 70px;
    bottom: 29%;
    height: auto;
    opacity: 0;
    mask-image: linear-gradient(to bottom, black 0%, black 52%, transparent 94%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 52%, transparent 94%);
  }
  body.ui-ready .hero-art { opacity: .38; }
  .hero-art::after {
    background:
      linear-gradient(90deg, var(--bg) 0%, rgba(7,9,15,.52) 40%, rgba(7,9,15,.18) 100%),
      linear-gradient(0deg, var(--bg) 0%, transparent 42%);
  }
  .hero-grid { opacity: .16; background-size: 44px 44px; }

  .hero-content { width: 100%; }
  .eyebrow { margin-bottom: 20px; font-size: 8px; gap: 7px; letter-spacing: .13em; }
  h1 {
    font-size: clamp(43px, 12.65vw, 58px);
    line-height: .97;
    letter-spacing: -.055em;
    margin-bottom: 24px;
    max-width: 9.4em;
  }
  .hero-lead {
    font-size: 15px;
    line-height: 1.62;
    max-width: 34em;
    margin-bottom: 28px;
  }
  .hero-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .button { width: auto; min-height: 48px; padding-inline: 15px; font-size: 11px; }

  .hero-meta {
    margin-top: 36px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  .meta-card,
  .meta-card-compact {
    min-width: 0;
    padding: 13px;
  }
  .meta-card-compact { grid-column: 1 / -1; }
  .stack-line { gap: 5px; }
  .stack-line span { font-size: 8px; }

  .impact {
    padding-top: 72px;
    padding-bottom: 18px;
  }
  .impact > .section-label { margin-bottom: 20px; }
  .impact-grid h2,
  .section-heading h2,
  .future h2 {
    font-size: clamp(36px, 10.4vw, 44px);
    line-height: 1.02;
  }
  .impact-grid p,
  .section-heading p { font-size: 14px; line-height: 1.66; }
  .impact-metrics { margin-top: 36px; gap: 6px; }
  .impact-metrics article { min-height: 112px; padding: 18px; }

  .expertise { padding-top: 44px; padding-bottom: var(--section-space); }
  .projects,
  .architecture,
  .future { padding-top: var(--section-space); padding-bottom: var(--section-space); }
  .section-heading { margin-bottom: 38px; }
  .expertise-grid { gap: 6px; }
  .expertise-card { min-height: 258px; padding: 21px; }
  .card-top { margin-bottom: 38px; }

  .project-list,
  .project-duo { gap: 6px; }
  .project { border-radius: 18px; }
  .project-featured .project-visual,
  .project-small .project-visual { min-height: 250px; }
  .project-small { grid-template-rows: 250px 1fr; }
  .project-copy,
  .project-small .project-copy { padding: 25px; }
  .project-meta,
  .project-small .project-meta { margin-bottom: 30px; }
  .project-copy h3,
  .project-small .project-copy h3 { font-size: 34px; }

  .architecture-shell { border-radius: 18px; }
  .architecture-map { min-height: 560px; }
  .arch-node { width: min(76%, 270px); }
  .architecture-detail { padding: 28px 24px; }

  .future-inner { padding: 46px 0; gap: 34px; }

  .contact { padding-bottom: 74px; }
  .contact-panel {
    min-height: 540px;
    padding: 36px 23px;
    border-radius: 20px;
  }
  .contact-panel h2 { font-size: clamp(36px, 10.6vw, 44px); }
  .contact-panel p { font-size: 14px; line-height: 1.65; max-width: 29em; }
  .contact-signal { width: 300px; height: 300px; right: -43%; top: 32%; opacity: .38; }

  .site-footer { min-height: 112px; padding: 28px 0; }
}

@media (max-width: 430px) {
  :root { --content: calc(100vw - 24px); }

  .brand-copy small { display: none; }
  .hero { padding-top: 96px; }
  h1 { font-size: clamp(41px, 12.25vw, 52px); }
  .hero-actions { grid-template-columns: 1fr; }
  .hero-meta { grid-template-columns: 1fr; }
  .meta-card-compact { grid-column: auto; }
  .impact-grid h2,
  .section-heading h2,
  .future h2 { font-size: 35px; }
  .project-copy h3,
  .project-small .project-copy h3 { font-size: 32px; }
  .contact-panel h2 { font-size: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .hero-lead,
  .hero-content .hero-actions,
  .hero-meta,
  .hero-scroll {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .orbit-a,.orbit-b,.map-lines,.forest-rings,.cube-1,.cube-2,.cube-3,
  .architecture-map path,.contact-signal span { animation: none !important; }
  .site-header { transition: none !important; }
}
.scroll-progress span {
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}
body.ui-ready .hero-art {
  transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1);
}
html:not(.js) .hero-art,
html:not(.js) .hero-content .eyebrow,
html:not(.js) .hero-content h1,
html:not(.js) .hero-content .hero-lead,
html:not(.js) .hero-content .hero-actions,
html:not(.js) .hero-meta,
html:not(.js) .hero-scroll,
html:not(.js) .reveal {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ========================================================================== 
   v0.2 — Portfolio Content & Case Studies
   ========================================================================== */

body.page-leaving main,
body.page-leaving footer {
  opacity: 0;
  transform: translate3d(0, 8px, 0);
  filter: blur(5px);
  transition: opacity .19s ease, transform .24s var(--ease-premium), filter .19s ease;
}

/* Home / project cases */
.projects .section-heading { margin-bottom: clamp(46px, 5.5vw, 68px); }
.project-case-link { margin-top: auto; padding-top: 30px; display:grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 3px 12px; align-items:center; }
.project-case-link span { grid-column:1; color:#ebf2fb; font-family:"IBM Plex Sans", ui-sans-serif, sans-serif; font-size:14px; font-weight:600; }
.project-case-link b { grid-column:1; color:#6d7889; font-family:"Manrope", ui-sans-serif, sans-serif; font-size:11px; font-weight:500; }
.project-case-link i { grid-column:2; grid-row:1 / 3; font-style:normal; color:#7b8698; transition: transform .22s var(--ease-premium), color .22s var(--ease-premium); }
.project-clickable:hover .project-case-link i, .project-clickable:focus-visible .project-case-link i { color: var(--cyan); transform: translateX(4px); }
.project-clickable:hover .project-case-link span, .project-clickable:focus-visible .project-case-link span { color: var(--cyan); }
.project-wide {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  min-height: 430px;
}
.project-wide .project-visual { border-right: 1px solid var(--line); min-height: 430px; }
.project-wide .project-meta { margin-bottom: 42px; }
.project-wide .project-copy h3 { font-size: clamp(38px, 4vw, 58px); }

.secure-visual {
  background:
    radial-gradient(circle at 50% 52%, rgba(103,231,255,.085), transparent 17rem),
    radial-gradient(circle at 80% 18%, rgba(139,125,255,.06), transparent 15rem),
    #080c14;
}
.secure-grid {
  position:absolute; inset:0; opacity:.42;
  background-image:
    linear-gradient(rgba(103,231,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103,231,255,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at 55% 50%, black 0 43%, transparent 79%);
}
.secure-path {
  position:absolute; height:1px; left:14%; right:14%; top:50%;
  background:linear-gradient(90deg, transparent, rgba(103,231,255,.5), rgba(139,125,255,.42), transparent);
  box-shadow:0 0 18px rgba(103,231,255,.12);
}
.secure-path.path-b { transform:rotate(-22deg); opacity:.45; }
.secure-node {
  position:absolute; min-width:62px; height:30px; padding:0 10px; display:grid; place-items:center;
  border:1px solid rgba(103,231,255,.25); background:rgba(9,15,24,.87); border-radius:9px;
  font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.12em; color:#9db5c1;
  box-shadow:0 0 28px rgba(103,231,255,.05);
}
.sn-a{left:11%;top:47%}.sn-b{left:39%;top:28%}.sn-c{right:29%;top:57%}.sn-d{right:10%;top:38%}

/* About section */
.about { padding-top: clamp(94px, 8vw, 128px); padding-bottom: clamp(96px, 8vw, 128px); border-top:1px solid var(--line); }
.about-shell {
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr); gap:clamp(56px,8vw,120px);
  align-items:start;
}
.about-intro { position:sticky; top:128px; }
.about-intro h2 { font-size:clamp(42px,4.65vw,72px); line-height:1.03; letter-spacing:-.04em; font-weight:560; max-width:760px; }
.about-intro h2 em { font-style:normal; color:transparent; background:linear-gradient(95deg,#dffbff 0%,var(--cyan) 48%,#9c8fff 100%); -webkit-background-clip:text; background-clip:text; }
.about-lead { color:#909bab; font-size:15px; line-height:1.78; max-width:650px; }
.about-points { border-top:1px solid var(--line-strong); }
.about-point { display:grid; grid-template-columns:52px 1fr; gap:22px; padding:30px 0; border-bottom:1px solid var(--line); }
.about-point > span { font-family:"IBM Plex Mono",monospace; color:var(--cyan); font-size:9px; letter-spacing:.15em; padding-top:5px; }
.about-point h3 { font-size:20px; font-weight:520; letter-spacing:-.025em; margin-bottom:10px; }
.about-point p { color:#7f8b9b; line-height:1.72; font-size:13px; margin-bottom:0; max-width:500px; }
.future-body { color:#7f8b9b; line-height:1.72; font-size:13px; max-width:580px; margin:22px 0 0; }

/* Case study shell */
.case-page { background:radial-gradient(circle at 72% 7%, rgba(103,231,255,.055), transparent 27rem),radial-gradient(circle at 12% 38%,rgba(139,125,255,.045),transparent 26rem),var(--bg); }
.case-header .status-pill { color:#8ba2ac; }
.case-header .status-pill i { background:var(--cyan); box-shadow:0 0 12px rgba(103,231,255,.7); }
.case-page main { overflow:hidden; }

.case-hero {
  position:relative; min-height:760px; padding-top:176px; padding-bottom:84px;
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(340px,.8fr); column-gap:clamp(60px,8vw,120px); align-content:start;
}
.case-hero::after { content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,var(--line-strong),var(--line),transparent); }
.case-hero-art {
  position:absolute; z-index:-1; top:84px; right:-11vw; width:min(800px,58vw); height:650px; overflow:hidden;
  opacity:.83; mask-image:linear-gradient(90deg,transparent 0%,black 22%,black 76%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,black 22%,black 76%,transparent 100%);
}
.case-hero-art::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 54% 47%,rgba(103,231,255,.08),transparent 28%),linear-gradient(90deg,rgba(7,9,15,.48),transparent 25%,transparent 75%,rgba(7,9,15,.5)); pointer-events:none; }
.case-visual-grid { position:absolute; inset:0; opacity:.42; background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px); background-size:54px 54px; transform:perspective(700px) rotateY(-8deg) rotateX(3deg) scale(1.08); }
.case-visual-grid.forest { background-size:34px 34px; mask-image:radial-gradient(circle,black 25%,transparent 76%); }
.case-visual-grid.matrix { background-size:72px 72px; transform:perspective(700px) rotateY(-10deg) rotateX(4deg); }
.case-visual-grid.secure { background-size:45px 45px; mask-image:linear-gradient(90deg,transparent,black 15% 85%,transparent); }
.case-orbit { position:absolute; border:1px solid rgba(103,231,255,.18); border-radius:50%; left:52%; top:48%; transform:translate(-50%,-50%); }
.case-orbit.co-a { width:410px;height:410px; animation:case-orbit-a 22s linear infinite; }
.case-orbit.co-b { width:270px;height:270px; border-color:rgba(139,125,255,.17); animation:case-orbit-b 17s linear infinite; }
@keyframes case-orbit-a { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes case-orbit-b { to{transform:translate(-50%,-50%) rotate(-360deg)} }
.case-vnode { position:absolute; z-index:2; min-width:88px; min-height:34px; display:grid; place-items:center; padding:0 12px; border:1px solid rgba(103,231,255,.24); border-radius:10px; background:rgba(8,14,23,.84); font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.11em; color:#9db1bc; box-shadow:0 0 32px rgba(103,231,255,.045); }
.case-vnode::after { content:""; width:4px;height:4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);position:absolute;left:9px;top:9px; }
.case-vnode.cv-a{left:18%;top:27%}.case-vnode.cv-b{right:17%;top:33%}.case-vnode.cv-c{left:34%;bottom:28%}.case-vnode.cv-d{right:13%;bottom:18%}
.forest-core,.matrix-core,.secure-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; display:grid; place-items:center; border:1px solid rgba(103,231,255,.26); background:rgba(9,14,23,.88); box-shadow:0 0 70px rgba(103,231,255,.08); }
.forest-core { width:150px;height:150px;border-radius:50%; font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.15em; }
.forest-core i { position:absolute; inset:-38px;border:1px solid rgba(125,245,180,.08);border-radius:50%; }
.forest-core i:nth-child(2){inset:-76px}.forest-core i:nth-child(3){inset:-115px}
.matrix-core { width:126px;height:126px;border-radius:26px; font-size:52px;font-weight:700;color:rgba(229,244,249,.85); transform:translate(-50%,-50%) rotate(10deg); }
.secure-core { width:158px;height:66px;border-radius:16px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.16em; }

.case-breadcrumb { grid-column:1/-1; display:flex; gap:10px; align-items:center; font-family:"IBM Plex Mono",monospace; color:#596678; font-size:9px; letter-spacing:.13em; margin-bottom:78px; }
.case-breadcrumb a { color:#8290a2; transition:color .2s ease; }.case-breadcrumb a:hover{color:var(--cyan)}
.case-hero-copy { grid-column:1; position:relative; z-index:2; }
.case-kicker { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:24px; font-family:"IBM Plex Mono",monospace; font-size:9px; letter-spacing:.14em; color:#7d8999; }
.case-status { padding:7px 9px; border:1px solid rgba(125,245,180,.17); border-radius:999px; color:#82ac9d; background:rgba(125,245,180,.025); }
.case-hero h1 { font-size:clamp(68px,8.3vw,126px); margin-bottom:24px; max-width:8.8em; }
.case-subtitle { font-family:"IBM Plex Sans",sans-serif; font-size:clamp(22px,2.25vw,34px); line-height:1.25; letter-spacing:-.025em; max-width:850px; color:#d8e0e9; margin-bottom:24px; text-wrap:balance; }
.case-intro { color:#8995a6; line-height:1.77; font-size:15px; max-width:760px; margin-bottom:0; }
.case-facts { grid-column:2; grid-row:3; align-self:end; display:grid; gap:8px; margin-top:90px; position:relative; z-index:3; }
.case-facts article { border-top:1px solid var(--line-strong); padding:16px 0 18px; display:grid; gap:8px; }
.case-facts article > span { font-family:"IBM Plex Mono",monospace; color:#5f6b7d; font-size:8px; letter-spacing:.14em; }
.case-facts strong { font-family:"Manrope",sans-serif; font-weight:500; color:#aeb9c6; font-size:12px; line-height:1.55; }
.case-tags { grid-column:1/-1; display:flex; gap:7px; flex-wrap:wrap; margin-top:54px; position:relative; z-index:2; }
.case-tags span { padding:8px 10px;border:1px solid var(--line);border-radius:999px;color:#7d8999;background:rgba(255,255,255,.018);font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.09em; }

.case-layout { display:grid; grid-template-columns:220px minmax(0,1fr); gap:clamp(66px,9vw,140px); padding-top:118px; padding-bottom:80px; align-items:start; }
.case-toc { position:sticky; top:128px; display:grid; gap:4px; }
.case-toc > span { font-family:"IBM Plex Mono",monospace; font-size:8px; letter-spacing:.15em; color:#596577; margin-bottom:18px; }
.case-toc a { display:grid;grid-template-columns:30px 1fr;align-items:center;padding:10px 0;color:#667284;font-size:11px;border-bottom:1px solid rgba(255,255,255,.035);transition:color .2s ease,transform .35s var(--ease-premium); }
.case-toc a b { font-family:"IBM Plex Mono",monospace;font-size:8px;font-weight:400;color:#455164; }
.case-toc a:hover,.case-toc a.active{color:#d9e3ec;transform:translateX(3px)}
.case-toc a.active b{color:var(--cyan)}
.case-content { min-width:0; }
.case-section { padding:0 0 126px; scroll-margin-top:120px; }
.case-section + .case-section { padding-top:6px; }
.case-section-label { display:flex;gap:10px;align-items:center;font-family:"IBM Plex Mono",monospace;color:#687487;font-size:9px;letter-spacing:.15em;margin-bottom:28px; }
.case-section-label span{color:var(--cyan)}
.case-section > h2 { font-size:clamp(38px,4.4vw,64px); line-height:1.07; letter-spacing:-.038em; font-weight:530; max-width:900px; margin-bottom:44px; }
.case-section-lead { color:#778496; line-height:1.72; font-size:13px; max-width:710px; margin:-20px 0 40px; }
.case-statement-list { border-top:1px solid var(--line-strong); }
.case-statement-list article { display:grid;grid-template-columns:50px 1fr;gap:26px;padding:25px 0;border-bottom:1px solid var(--line); }
.case-statement-list span { font-family:"IBM Plex Mono",monospace;color:#4f5c70;font-size:9px;padding-top:4px; }
.case-statement-list p { margin:0;color:#9aa5b4;line-height:1.74;font-size:14px;max-width:760px; }

.solution-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.solution-card { position:relative;overflow:hidden;min-height:260px;padding:28px;border:1px solid var(--line);border-radius:18px;background:rgba(12,16,25,.62); }
.solution-card::before { content:"";position:absolute;width:260px;height:260px;left:var(--x,50%);top:var(--y,50%);transform:translate(-50%,-50%);background:radial-gradient(circle,rgba(103,231,255,.10),transparent 68%);opacity:0;transition:opacity .3s ease;pointer-events:none; }
.solution-card:hover::before{opacity:1}.solution-card:hover{border-color:rgba(103,231,255,.16)}
.solution-index { font-family:"IBM Plex Mono",monospace;color:#4d596b;font-size:9px;letter-spacing:.12em;margin-bottom:56px; }
.solution-card h3 { font-size:24px;font-weight:520;letter-spacing:-.025em;margin-bottom:13px; }
.solution-card p { color:#7d899a;line-height:1.7;font-size:12px;margin:0; }

.case-architecture-flow { position:relative;padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(14,19,30,.68),rgba(8,11,18,.56));overflow:hidden; }
.case-architecture-flow::before { content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:36px 36px;mask-image:linear-gradient(90deg,transparent,black 15% 85%,transparent);pointer-events:none; }
.case-layer { position:relative;z-index:2;min-height:88px;display:grid;grid-template-columns:50px 1fr;align-items:center;gap:20px;border:1px solid rgba(255,255,255,.075);border-radius:14px;padding:14px 20px;background:rgba(8,12,19,.72); }
.case-layer > span { font-family:"IBM Plex Mono",monospace;font-size:8px;color:#4f5d70; }
.case-layer div { display:grid;gap:5px; }.case-layer strong{font-size:15px;font-weight:520}.case-layer small{font-size:10px;color:#728094;letter-spacing:.025em}
.case-architecture-flow > i { position:relative;z-index:2;display:block;text-align:center;color:#496274;font-style:normal;height:28px;line-height:28px;font-size:14px; }

.responsibility-layout { display:grid;grid-template-columns:minmax(0,1.18fr) minmax(250px,.82fr);gap:54px;align-items:start; }
.responsibility-list { list-style:none;padding:0;margin:0;border-top:1px solid var(--line-strong);counter-reset:item; }
.responsibility-list li { position:relative;padding:22px 10px 22px 44px;border-bottom:1px solid var(--line);color:#929dad;line-height:1.65;font-size:13px;counter-increment:item; }
.responsibility-list li::before{content:counter(item,decimal-leading-zero);position:absolute;left:0;top:25px;font-family:"IBM Plex Mono",monospace;font-size:8px;color:#4e5b6d; }
.responsibility-stack { border:1px solid var(--line);border-radius:18px;padding:24px;background:rgba(12,16,25,.5); }
.responsibility-stack > span { display:block;font-family:"IBM Plex Mono",monospace;color:#5d697a;font-size:8px;letter-spacing:.14em;margin-bottom:26px; }
.responsibility-stack .project-tags { margin:0; }

.result-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
.result-grid article { min-height:190px;padding:25px;border-top:1px solid var(--line-strong);background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.result-grid span { display:block;font-family:"IBM Plex Mono",monospace;color:var(--cyan);font-size:8px;letter-spacing:.14em;margin-bottom:52px; }
.result-grid p { color:#8995a5;line-height:1.68;font-size:12px;margin:0; }
.case-next-layer { margin-top:42px;border:1px solid rgba(103,231,255,.11);border-radius:18px;padding:28px;background:linear-gradient(135deg,rgba(103,231,255,.035),rgba(139,125,255,.025)); }
.case-next-layer span { font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.15em;color:#6d7b8e; }
.case-next-layer p { margin:17px 0 0;color:#a3adba;font-size:14px;line-height:1.72;max-width:780px; }

.case-more { padding-top:70px;padding-bottom:130px;border-top:1px solid var(--line); }
.case-more-head { display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:42px; }
.case-more-head > span { font-family:"IBM Plex Mono",monospace;color:#667385;font-size:9px;letter-spacing:.15em; }
.case-more-head h2 { margin:0;font-size:clamp(36px,4vw,54px);font-weight:530;letter-spacing:-.035em; }
.case-more-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px; }
.more-case-card { min-height:300px;padding:26px;border:1px solid var(--line);border-radius:18px;background:rgba(12,16,25,.56);display:flex;flex-direction:column;transition:transform .46s var(--ease-premium),border-color .3s ease,background .3s ease; }
.more-case-card:hover { transform:translateY(-5px);border-color:rgba(103,231,255,.17);background:rgba(15,20,31,.68); }
.more-case-card > span { font-family:"IBM Plex Mono",monospace;color:#5d6a7c;font-size:8px;letter-spacing:.1em;line-height:1.5; }
.more-case-card h3 { margin:52px 0 14px;font-size:29px;font-weight:520;letter-spacing:-.03em; }
.more-case-card p { color:#778496;line-height:1.65;font-size:11px;margin-bottom:25px; }
.more-case-card b { margin-top:auto;font-family:"IBM Plex Mono",monospace;font-size:9px;letter-spacing:.08em;color:#9aa8b4;font-weight:500; }.more-case-card b i{font-style:normal;color:var(--cyan);margin-left:6px}
.case-contact { padding-top:0; }

@media (max-width: 980px) {
  .about-shell { grid-template-columns:1fr; gap:48px; }
  .about-intro { position:static; }
  .about-lead { max-width:720px; }

  .project-wide { grid-template-columns:1fr; }
  .project-wide .project-visual { min-height:330px;border-right:0;border-bottom:1px solid var(--line); }

  .case-hero { min-height:auto;grid-template-columns:1fr;padding-top:142px;padding-bottom:74px; }
  .case-hero-art { width:90vw;right:-38vw;top:70px;height:580px;opacity:.48; }
  .case-breadcrumb { margin-bottom:56px; }
  .case-facts { grid-column:1;grid-row:auto;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:56px; }
  .case-tags { margin-top:34px; }
  .case-layout { grid-template-columns:1fr;gap:44px;padding-top:90px; }
  .case-toc { position:sticky;top:77px;z-index:20;display:flex;overflow:auto;gap:4px;padding:8px;margin:0 -8px;border:1px solid var(--line);border-radius:14px;background:rgba(8,11,18,.86);backdrop-filter:blur(16px);scrollbar-width:none; }
  .case-toc::-webkit-scrollbar{display:none}.case-toc>span{display:none}.case-toc a{display:flex;gap:7px;min-width:max-content;padding:10px 12px;border:0;border-radius:9px;background:rgba(255,255,255,.018)}.case-toc a:hover,.case-toc a.active{transform:none;background:rgba(103,231,255,.055)}
  .case-section { padding-bottom:100px; }
  .case-more-grid { grid-template-columns:1fr 1fr; }.more-case-card:last-child{grid-column:1/-1;min-height:240px}
}

@media (max-width: 620px) {
  .about { padding-top:76px;padding-bottom:78px; }.about-shell{gap:38px}.about-point{grid-template-columns:36px 1fr;gap:15px;padding:23px 0}.about-point h3{font-size:18px}
  .project-wide .project-visual { min-height:250px; }.project-wide .project-copy{padding:25px}.project-wide .project-meta{margin-bottom:30px}.project-case-link{padding-top:27px}

  .case-hero { padding-top:108px;padding-bottom:54px; }
  .case-hero-art { width:125vw;right:-82vw;top:42px;height:470px;opacity:.33; }
  .case-breadcrumb { margin-bottom:40px;font-size:8px; }
  .case-kicker { font-size:8px;margin-bottom:18px;gap:8px; }
  .case-status { padding:6px 8px; }
  .case-hero h1 { font-size:clamp(52px,16.4vw,72px);line-height:.93;margin-bottom:20px; }
  .case-subtitle { font-size:21px;line-height:1.25;margin-bottom:20px; }
  .case-intro { font-size:13px;line-height:1.72; }
  .case-facts { grid-template-columns:1fr;margin-top:42px;gap:0; }.case-facts article{padding:14px 0}.case-facts strong{font-size:11px}
  .case-tags { margin-top:25px;gap:5px }.case-tags span{font-size:7px;padding:7px 8px}

  .case-layout { padding-top:68px;padding-bottom:34px;gap:34px; }
  .case-toc { top:70px;margin-left:0;margin-right:0; }
  .case-section { padding-bottom:80px;scroll-margin-top:128px; }
  .case-section-label { margin-bottom:20px;font-size:8px; }
  .case-section > h2 { font-size:clamp(34px,9.7vw,42px);margin-bottom:32px; }
  .case-section-lead { margin:-12px 0 30px;font-size:12px; }
  .case-statement-list article { grid-template-columns:32px 1fr;gap:12px;padding:20px 0; }.case-statement-list p{font-size:12px}
  .solution-grid { grid-template-columns:1fr;gap:6px; }.solution-card{min-height:220px;padding:23px}.solution-index{margin-bottom:40px}.solution-card h3{font-size:22px}
  .case-architecture-flow { padding:14px;border-radius:16px; }.case-layer{grid-template-columns:32px 1fr;gap:10px;padding:13px;min-height:78px}.case-layer strong{font-size:13px}.case-layer small{font-size:9px;line-height:1.4}
  .responsibility-layout { grid-template-columns:1fr;gap:28px; }.responsibility-list li{font-size:12px;padding-right:0}
  .result-grid { grid-template-columns:1fr;gap:5px; }.result-grid article{min-height:160px;padding:21px}.result-grid span{margin-bottom:34px}.case-next-layer{margin-top:30px;padding:22px}.case-next-layer p{font-size:12px}

  .case-more { padding-top:62px;padding-bottom:86px; }.case-more-head{display:grid;gap:14px;margin-bottom:30px}.case-more-grid{grid-template-columns:1fr;gap:6px}.more-case-card,.more-case-card:last-child{grid-column:auto;min-height:235px;padding:22px}.more-case-card h3{margin-top:38px;font-size:26px}
}

@media (prefers-reduced-motion: reduce) {
  .case-orbit,.case-visual-grid { animation:none!important;transform:none!important; }
  body.page-leaving main,body.page-leaving footer{transition:none!important;}
}
.case-hero { z-index:0; }
.case-hero-art { z-index:0; }
.case-breadcrumb,.case-hero-copy,.case-facts,.case-tags { position:relative; z-index:2; }

/* ========================================================================== */
/* v0.2.2 — Public Identity, Contact Layer & Multilingual UI                   */
/* ========================================================================== */
.brand-mark { overflow: hidden; padding: 0; }
.brand-mark img { width: 100%; height: 100%; display: block; border-radius: inherit; }

.language-switcher { position: relative; z-index: 130; flex: 0 0 auto; font-family: "IBM Plex Mono", ui-monospace, monospace; }
.language-toggle { appearance: none; -webkit-appearance: none; min-width: 72px; height: 38px; padding: 0 13px; border: 1px solid rgba(103,231,255,.16); border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018)); color: #dbe2ec; font: inherit; font-size: 10px; line-height: 1; letter-spacing: .11em; text-transform: uppercase; transition: .24s var(--ease-premium); user-select: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 10px 26px rgba(0,0,0,.16); }
.language-toggle:hover, .language-toggle:focus-visible, .language-switcher.is-open .language-toggle { color: #fff; border-color: rgba(103,231,255,.38); background: linear-gradient(180deg, rgba(103,231,255,.085), rgba(139,125,255,.045)); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 36px rgba(0,0,0,.24); outline: none; }
.language-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(103,231,255,.11), inset 0 1px 0 rgba(255,255,255,.07), 0 16px 36px rgba(0,0,0,.24); }
.language-switcher .lang-current { display:inline-flex; align-items:center; }
.language-switcher .lang-chevron { width: 7px; height: 7px; border-right: 1.5px solid #7e8ba0; border-bottom: 1.5px solid #7e8ba0; transform: rotate(45deg) translateY(-1px); transition: transform .22s var(--ease-premium), border-color .22s var(--ease-premium); }
.language-toggle:hover .lang-chevron, .language-switcher.is-open .lang-chevron { border-color: var(--cyan); }
.language-switcher.is-open .lang-chevron { transform: rotate(225deg) translate(-1px,-1px); }
.language-menu { position: absolute; top: calc(100% + 10px); right: 0; width: 228px; padding: 9px; border: 1px solid rgba(103,231,255,.15); border-radius: 16px; background: linear-gradient(180deg, rgba(8,11,18,.97), rgba(11,15,24,.95)); box-shadow: 0 26px 76px rgba(0,0,0,.5); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); display: grid; gap: 4px; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-7px) scale(.985); transform-origin: top right; transition: opacity .18s ease, transform .22s var(--ease-premium), visibility .18s ease; }
.language-switcher.is-open .language-menu { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.language-menu a { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: 11px; color: #9ba6b6; text-decoration: none; transition: background .18s ease, color .18s ease, transform .18s ease; }
.language-menu a span { display:inline-flex; align-items:center; justify-content:center; min-width: 36px; height: 25px; padding: 0 7px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; color: #dbe2ec; font-size: 9px; line-height: 1; letter-spacing: .08em; background: rgba(255,255,255,.025); white-space: nowrap; }
.language-menu a small { min-width: 0; color: #7f8b9f; font-family: "Manrope", ui-sans-serif, sans-serif; font-size: 12px; line-height: 1.25; letter-spacing: 0; white-space: nowrap; }
.language-menu a:hover { background: rgba(255,255,255,.05); transform: translateX(2px); }
.language-menu a[aria-current="true"] { background: linear-gradient(135deg, rgba(103,231,255,.11), rgba(139,125,255,.08)); }
.language-menu a[aria-current="true"] span { color: var(--cyan); border-color: rgba(103,231,255,.24); background: rgba(103,231,255,.06); }
.language-menu a[aria-current="true"] small { color: #e4eaf2; }
.mobile-language-row { display: none; }

.contact-channels { position: relative; width: min(980px, 100%); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 10px; margin-top: 24px; z-index: 2; }
.contact-channel { appearance: none; text-align: left; min-height: 88px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.027); color: inherit; display: grid; grid-template-columns: 42px minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 5px 14px; align-items: center; cursor: pointer; transition: .26s var(--ease-premium); text-decoration:none; }
.contact-icon { grid-column: 1; grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display:grid; place-items:center; border:1px solid rgba(103,231,255,.14); background: linear-gradient(180deg, rgba(103,231,255,.08), rgba(139,125,255,.05)); color: #dbe6f2; box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.contact-icon svg { width: 19px; height: 19px; display:block; }
.contact-label { grid-column: 2; color: #667285; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; }
.contact-channel > strong { grid-column: 2; min-width: 0; overflow-wrap: anywhere; color: #dfe6ef; font-size: 13px; font-weight: 600; }
.contact-channel > i { grid-column: 3; grid-row: 1 / 3; align-self: center; font-style: normal; color: #657185; font-size: 11px; text-align:right; max-width: 90px; }
.contact-channel:hover { transform: translateY(-2px); border-color: rgba(103,231,255,.3); background: rgba(103,231,255,.045); }
.contact-channel:hover > i, .contact-channel:hover .contact-icon { color: var(--cyan); border-color: rgba(103,231,255,.28); }
.contact-pending { grid-column: 1 / -1; max-width: 660px; padding: 18px 20px; border-left: 1px solid rgba(103,231,255,.35); background: linear-gradient(90deg, rgba(103,231,255,.045), transparent); }
.contact-pending span { display: block; margin-bottom: 8px; color: var(--cyan); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 8px; letter-spacing: .15em; }
.contact-pending p { margin: 0; color: #788497; font-size: 12px; line-height: 1.65; }
.contact-note-hidden { display: none; }
.contacts-pending .contact-signal { opacity: .62; }

html[lang^="zh"] body { font-family: "Noto Sans SC", "Manrope", ui-sans-serif, sans-serif; }
html[lang^="zh"] h1, html[lang^="zh"] h2, html[lang^="zh"] h3 { font-family: "Noto Sans SC", "IBM Plex Sans", ui-sans-serif, sans-serif; letter-spacing: -.025em; }
html[lang^="zh"] .hero-content { width: min(850px,72vw); }
html[lang^="zh"] h1 { line-height: 1.04; }

@media (max-width: 980px) {
  .language-switcher { margin-left: auto; }
  .mobile-language-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; border-top: 1px solid var(--line); margin-top: 8px; padding: 10px 4px 2px; }
  .mobile-menu .mobile-language-row a { padding: 9px 6px; text-align: center; font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 9px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
  .mobile-menu .mobile-language-row a:hover { border-color: rgba(103,231,255,.25); background: rgba(103,231,255,.05); }
  .contact-channels { grid-template-columns: 1fr; max-width: 620px; }
  .projects-discoverability { flex-direction: column; align-items:flex-start; gap:10px; }
}
@media (max-width: 620px) {
  .header-actions { gap: 8px; }
  .language-toggle { min-width: 64px; height: 38px; padding: 0 11px; }
  .language-menu { position: fixed; top: 68px; right: 14px; width: min(240px, calc(100vw - 28px)); }
  .contact-channels { margin-top: 18px; gap: 8px; }
  .contact-channel { min-height: 78px; padding: 15px 16px; grid-template-columns: 40px minmax(0,1fr); }
  .contact-channel > i { grid-column: 2; grid-row: 3; justify-self: start; margin-top: 4px; }
  .contact-icon { width: 36px; height: 36px; }
  .project-case-link span { font-size: 13px; }
  .project-case-link b { font-size: 10px; }
  html[lang^="zh"] .hero-content { width: 100%; }
}
.error-page { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.error-page > span { font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--cyan); font-size: 10px; letter-spacing: .16em; margin: 28px 0 18px; }
.error-page h1 { font-size: clamp(58px,9vw,120px); margin-bottom: 22px; }
.error-page p { color: var(--muted); line-height: 1.7; margin-bottom: 28px; }
.error-mark { width: 58px; height: 58px; }.error-mark img { width:100%;height:100%;display:block; }