/* ============================================================
   Yanbang Kan — personal site
   Design system: "deep field" — near-black ground, cyan/violet
   signal light, glass surfaces, everything eased.
   ============================================================ */

:root{
  color-scheme: dark;

  /* ground */
  --bg:        #04060c;
  --bg-2:      #070b14;
  --panel:     rgba(255,255,255,.035);
  --panel-2:   rgba(255,255,255,.055);
  --line:      rgba(255,255,255,.09);
  --line-2:    rgba(255,255,255,.16);

  /* ink */
  --ink:       #E9EEF9;
  --ink-2:     #A6B2C8;
  --ink-3:     #6C7A93;

  /* signal */
  --cy:        #5EEAD4;
  --cy-2:      #22D3EE;
  --vi:        #8B7CFF;
  --vi-2:      #B98CFF;
  --up:        #4ADE80;
  --down:      #FF5D73;
  --warn:      #FFB86B;

  --glow-cy:   0 0 0 1px rgba(94,234,212,.28), 0 0 34px -8px rgba(94,234,212,.55);
  --glow-vi:   0 0 0 1px rgba(139,124,255,.30), 0 0 40px -10px rgba(139,124,255,.6);

  --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 30px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --maxw: 1240px;
  --nav-h: 66px;

  --font-d: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-b: "Inter", system-ui, -apple-system, sans-serif;
  --font-m: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important }
}

body{
  margin:0;
  font-family:var(--font-b);
  font-size:15px; line-height:1.6;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100% }
[hidden]{ display:none!important }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }

::selection{ background:rgba(94,234,212,.28); color:#fff }

/* ------------------------------------------------ scrollbar */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background:transparent }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.1); border-radius:99px; border:3px solid transparent; background-clip:content-box }
::-webkit-scrollbar-thumb:hover{ background:rgba(94,234,212,.35); background-clip:content-box }

/* ============================================================
   ATMOSPHERE
   ============================================================ */
#scene{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden }
#stars{ position:absolute; inset:0; width:100%; height:100% }

.aurora{
  position:absolute; border-radius:50%;
  filter:blur(96px); opacity:.42;
  will-change:transform;
  mix-blend-mode:screen;
}
.aurora.a{ width:52vw; height:52vw; left:-14vw; top:-18vw;
  background:radial-gradient(circle at 40% 40%, rgba(34,211,238,.40), rgba(56,110,190,.16) 45%, transparent 66%);
  animation:drift1 34s var(--ease) infinite alternate }
.aurora.b{ width:46vw; height:46vw; right:-12vw; top:6vh;
  background:radial-gradient(circle at 60% 40%, rgba(158,110,255,.42), rgba(226,95,190,.14) 46%, transparent 66%);
  animation:drift2 42s var(--ease) infinite alternate }
.aurora.c{ width:60vw; height:40vw; left:18vw; bottom:-24vw;
  background:radial-gradient(circle at 50% 50%, rgba(94,234,212,.22), rgba(60,130,255,.12) 48%, transparent 68%);
  animation:drift3 50s var(--ease) infinite alternate }
@keyframes drift1{ to{ transform:translate3d(9vw,7vh,0) scale(1.18) } }
@keyframes drift2{ to{ transform:translate3d(-10vw,11vh,0) scale(1.12) } }
@keyframes drift3{ to{ transform:translate3d(6vw,-8vh,0) scale(1.22) } }

/* ------------------------------------------------ deep field */
/* a faint galactic band cutting across the frame */
.milkyway{
  position:absolute; left:-30%; right:-30%; top:-16%; height:150%;
  transform:rotate(-19deg);
  background:
    radial-gradient(60% 20% at 30% 42%, rgba(160,190,255,.10), transparent 70%),
    radial-gradient(45% 14% at 62% 55%, rgba(200,160,255,.09), transparent 72%),
    linear-gradient(90deg, transparent, rgba(190,210,255,.055) 28%, rgba(190,210,255,.075) 52%, transparent 88%);
  filter:blur(26px);
  opacity:.9;
  animation:band 120s linear infinite alternate;
}
@keyframes band{ to{ transform:rotate(-15deg) translateX(3vw) } }

/* film grain */
.grain{
  position:absolute; inset:0; opacity:.035; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  animation:grain 800ms steps(4) infinite;
}
@keyframes grain{
  0%{background-position:0 0} 25%{background-position:-22px 14px}
  50%{background-position:16px -20px} 75%{background-position:-14px -12px} 100%{background-position:0 0}
}

.vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 0%, transparent 35%, rgba(4,6,12,.82) 100%);
}

/* ------------------------------------------------ solar system */
/* Circular orbits drawn on one plane, tilted back so the system reads in
   perspective. Periods are ordered like the real thing: inner fast, outer slow. */
.solar{
  --D: clamp(820px, 126vmin, 1700px);
  position:absolute; top:80%; left:90%;
  width:var(--D); height:var(--D); margin:calc(var(--D) / -2) 0 0 calc(var(--D) / -2);
  transform-style:preserve-3d;
  transform:rotateX(60deg) rotateZ(-16deg) translateZ(0);
  opacity:1;
  animation:systemdrift 150s ease-in-out infinite alternate;
  will-change:transform;
}
@media (max-width:860px){ .solar{ --D:150vmin; left:88%; top:84%; opacity:.6 } }

@keyframes systemdrift{
  0%   { transform:translateY(var(--py, 0px)) rotateX(60deg) rotateZ(-16deg) }
  100% { transform:translateY(var(--py, 0px)) rotateX(52deg) rotateZ(5deg) }
}

/* the ecliptic itself catches a little light */
.solar::before{
  content:""; position:absolute; left:50%; top:50%;
  width:112%; height:112%; margin:-56% 0 0 -56%; border-radius:50%;
  background:radial-gradient(circle, rgba(255,186,110,.26) 0%, rgba(120,170,255,.11) 26%, transparent 62%);
  filter:blur(22px);
}

/* --- the star --- */
.sun{
  position:absolute; left:50%; top:50%; width:0; height:0;
  transform:translateZ(1px);
}
.sun .core{
  position:absolute; left:-23px; top:-23px; width:46px; height:46px; border-radius:50%;
  background:radial-gradient(circle at 42% 38%, #FFF8E0, #FFD27A 38%, #FF9A3C 68%, #E4622A 100%);
  box-shadow:0 0 34px 10px rgba(255,180,90,.85), 0 0 130px 46px rgba(255,140,60,.4);
  animation:sunpulse 7s ease-in-out infinite;
}
.sun .corona{
  position:absolute; left:-135px; top:-135px; width:270px; height:270px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,186,110,.42), rgba(255,140,60,.13) 42%, transparent 68%);
  filter:blur(8px);
  animation:sunpulse 11s ease-in-out infinite reverse;
}
@keyframes sunpulse{ 0%,100%{ transform:scale(1); opacity:.92 } 50%{ transform:scale(1.07); opacity:1 } }

/* --- orbit rings --- */
.orb{
  position:absolute; left:50%; top:50%; border-radius:50%;
  border:1px solid rgba(186,222,255,.42);
  box-shadow:0 0 22px -5px rgba(150,205,255,.7);
  transform:translate(-50%,-50%);
  transform-style:preserve-3d;
}
.orb .rev{
  position:absolute; inset:0; border-radius:50%;
  animation:rev var(--t) linear infinite;
  transform-style:preserve-3d;
}
@keyframes rev{ to{ transform:rotate(360deg) } }

/* each planet sits at 12 o'clock on its ring and is billboarded back upright */
.pl{
  position:absolute; left:50%; top:0;
  width:var(--s); height:var(--s);
  margin:calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius:50%;
  transform:rotateX(-60deg);
  background:var(--c);
  box-shadow:inset -2.5px -2.5px 6px rgba(0,0,0,.66), 0 0 14px -1px var(--g, transparent);
}

.o1{ width:15%;  height:15%  } .o1 .rev{ --t:14s  }
.o2{ width:23%;  height:23%  } .o2 .rev{ --t:26s  }
.o3{ width:32%;  height:32%  } .o3 .rev{ --t:38s  }
.o4{ width:42%;  height:42%  } .o4 .rev{ --t:60s  }
.o5{ width:60%;  height:60%  } .o5 .rev{ --t:118s }
.o6{ width:76%;  height:76%  } .o6 .rev{ --t:178s }
.o7{ width:90%;  height:90%  } .o7 .rev{ --t:250s }
.o8{ width:104%; height:104% } .o8 .rev{ --t:330s }
.o7, .o8{ border-color:rgba(186,222,255,.24) }

.mercury{ --s:6px;  --c:radial-gradient(circle at 34% 32%, #C9C2B6, #6E675E 62%, #2E2A26) }
.venus  { --s:10px; --c:radial-gradient(circle at 34% 32%, #FFE6B8, #E0A65C 60%, #7A5326); --g:rgba(255,205,140,.55) }
.earth  { --s:11px; --c:radial-gradient(circle at 32% 30%, #9FE2FF, #2E7FD4 45%, #12406E 78%, #05192E); --g:rgba(110,200,255,.7) }
.mars   { --s:9px;  --c:radial-gradient(circle at 34% 32%, #FFB48A, #C2562F 58%, #5E2412); --g:rgba(255,130,90,.45) }
.jupiter{ --s:24px; --c:repeating-linear-gradient(178deg, #E8CBA4 0 3px, #C79C6E 3px 5px, #E3C097 5px 8px, #A97C52 8px 10px) }
.saturn { --s:21px; --c:repeating-linear-gradient(176deg, #F0DDB4 0 4px, #CDB185 4px 7px, #E6D2A8 7px 10px) }
.uranus { --s:14px; --c:radial-gradient(circle at 33% 30%, #CFF6F5, #7FD3D8 52%, #37727F); --g:rgba(140,235,235,.45) }
.neptune{ --s:14px; --c:radial-gradient(circle at 33% 30%, #A8C9FF, #3C6FD0 52%, #1B3470); --g:rgba(110,160,255,.5) }

.jupiter, .saturn{ box-shadow:inset -3px -3px 7px rgba(0,0,0,.55) }
.jupiter .spot{
  position:absolute; left:56%; top:56%; width:6px; height:4px; border-radius:50%;
  background:#C05B3C; opacity:.85;
}
.saturn .ring{
  position:absolute; left:50%; top:50%; width:34px; height:11px;
  margin:-5.5px 0 0 -17px; border-radius:50%;
  border:1.6px solid rgba(238,222,180,.85);
  border-top-color:rgba(238,222,180,.35);
  transform:rotate(-16deg);
}

/* Earth keeps a moon */
.earth .moonpath{
  position:absolute; left:50%; top:50%; width:24px; height:24px; margin:-12px 0 0 -12px;
  border-radius:50%; animation:rev 6s linear infinite;
}
.earth .moon{
  position:absolute; left:50%; top:-1.5px; width:3px; height:3px; margin-left:-1.5px;
  border-radius:50%; background:#D8DEE6;
}

/* asteroid belt, between Mars and Jupiter */
.belt{
  position:absolute; left:50%; top:50%; width:50%; height:50%;
  margin:-25% 0 0 -25%; border-radius:50%;
  border:7px solid rgba(190,205,225,.05);
  filter:blur(1.5px);
  animation:rev 90s linear infinite;
}

/* cursor halo *//* cursor halo *//* cursor halo */
#halo{
  position:fixed; z-index:1; width:520px; height:520px; margin:-260px 0 0 -260px;
  border-radius:50%; pointer-events:none; opacity:0;
  background:radial-gradient(circle, rgba(94,234,212,.10), transparent 62%);
  transition:opacity .5s var(--ease);
  will-change:transform;
}
body.has-pointer #halo{ opacity:1 }

/* ============================================================
   CHROME
   ============================================================ */
.shell{ position:relative; z-index:2 }

.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  padding-top:env(safe-area-inset-top, 0px);
  display:flex; align-items:center; gap:18px;
  padding-inline:clamp(16px,4vw,40px);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  background:linear-gradient(to bottom, rgba(4,6,12,.86), rgba(4,6,12,.48));
  border-bottom:1px solid transparent;
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.nav.solid{ border-bottom-color:var(--line); background:rgba(4,6,12,.92) }

.brand{ display:flex; align-items:center; gap:11px; font-family:var(--font-d); font-weight:600; letter-spacing:-.01em }
.brand .mark{
  width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  background:linear-gradient(140deg, var(--cy), var(--vi));
  color:#04060c; box-shadow:var(--glow-cy);
  transition:transform .6s var(--spring), box-shadow .5s var(--ease);
}
.brand:hover .mark{ transform:rotate(-8deg) scale(1.08); box-shadow:var(--glow-vi) }
.brand small{ display:block; font-family:var(--font-m); font-size:10px; font-weight:400;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); line-height:1 }

.tabs{ margin-left:auto; display:flex; align-items:center; gap:2px;
  background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:4px; position:relative }
.tabs .pill{ position:absolute; top:4px; left:4px; height:calc(100% - 8px); border-radius:99px;
  background:linear-gradient(120deg, rgba(94,234,212,.17), rgba(139,124,255,.17));
  border:1px solid rgba(94,234,212,.28);
  transition:transform .55s var(--ease-out), width .55s var(--ease-out);
  pointer-events:none }
.tabs a{
  position:relative; z-index:1; padding:8px 17px; border-radius:99px;
  font-size:13.5px; font-weight:500; color:var(--ink-2);
  transition:color .35s var(--ease);
  white-space:nowrap;
}
.tabs a:hover{ color:var(--ink) }
.tabs a.on{ color:#fff }

.navlinks{ display:flex; gap:8px; margin-left:4px }
.iconbtn{
  width:36px; height:36px; display:grid; place-items:center; border-radius:11px;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  transition:all .4s var(--ease);
}
.iconbtn:hover{ color:var(--cy); border-color:rgba(94,234,212,.4); background:var(--panel-2);
  transform:translateY(-2px); box-shadow:0 8px 24px -12px rgba(94,234,212,.7) }
.iconbtn svg{ width:16px; height:16px; fill:currentColor }

/* present, but not wired up yet */
.iconbtn.soon{
  cursor:not-allowed; color:var(--ink-3); opacity:.55;
  border-style:dashed;
}
.iconbtn.soon:hover{
  color:var(--ink-3); border-color:var(--line); background:var(--panel);
  transform:none; box-shadow:none;
}

/* ============================================================
   LAYOUT
   ============================================================ */
main{ min-height:70vh }
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(16px,4vw,40px) }
section{ padding-block:clamp(52px,8vw,104px) }

.route{ animation:routeIn .65s var(--ease-out) both }
@keyframes routeIn{ from{ opacity:0; transform:translateY(16px) } to{ opacity:1; transform:none } }

/* Reveal on scroll. The hidden state is scoped to a class JS adds at boot, so a
   failed script leaves the page readable instead of blank. */
.rv{ transition:opacity .9s var(--ease-out), transform .9s var(--ease-out) }
html.reveal-ready .rv{ opacity:0; transform:translateY(22px) }
html.reveal-ready .rv.in{ opacity:1; transform:none }

/* ------------------------------------------------ eyebrow / heads */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-m); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--cy); margin:0 0 14px;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:linear-gradient(90deg, transparent, var(--cy)) }

h1,h2,h3,h4{ font-family:var(--font-d); font-weight:600; letter-spacing:-.025em; line-height:1.1; margin:0 }
h1{ font-size:clamp(30px,4.2vw,46px) }
h2{ font-size:clamp(26px,3.6vw,40px) }
h3{ font-size:clamp(18px,2vw,22px) }
.lede{ color:var(--ink-2); font-size:clamp(14.5px,1.42vw,16.6px); line-height:1.58; max-width:76ch }

.grad{
  background:linear-gradient(104deg, #fff 8%, var(--cy) 44%, var(--vi) 78%, #fff 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 9s var(--ease) infinite;
}
@keyframes shimmer{ 0%,100%{ background-position:0% 50% } 50%{ background-position:100% 50% } }

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(40px,7vw,86px) clamp(30px,5vw,56px) }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(28px,5vw,64px); align-items:center }
@media (max-width:860px){ .hero-grid{ grid-template-columns:1fr; gap:34px } }

.avatar-wrap{ position:relative; width:clamp(180px,20vw,228px); aspect-ratio:1; flex:none }
@media (max-width:860px){ .avatar-wrap{ order:-1; width:170px } }

.avatar-ring{
  position:absolute; inset:-14px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0%, var(--cy) 18%, transparent 36%,
             transparent 54%, var(--vi) 72%, transparent 92%);
  animation:spin 11s linear infinite;
  mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
  opacity:.9;
}
.avatar-ring.slow{ inset:-30px; animation-duration:22s; animation-direction:reverse; opacity:.42 }
@keyframes spin{ to{ transform:rotate(360deg) } }

.avatar{
  position:absolute; inset:0; border-radius:50%; overflow:hidden;
  border:1px solid var(--line-2);
  background:
    radial-gradient(90% 70% at 30% 20%, rgba(94,234,212,.22), transparent 60%),
    radial-gradient(80% 80% at 75% 85%, rgba(139,124,255,.26), transparent 62%),
    #0a0f1a;
  display:grid; place-items:center;
  box-shadow:0 30px 80px -30px rgba(94,234,212,.5), inset 0 0 60px -20px rgba(139,124,255,.5);
  transition:transform .8s var(--spring);
}
.avatar:hover{ transform:scale(1.035) }
.avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* nudge the portrait up so the face sits on the upper third of the circle
     rather than dead centre, which leaves the chin crowding the rim */
  transform:scale(1.1) translateY(-2.5%);
  transform-origin:50% 42%;
}
.avatar .mono{
  font-family:var(--font-d); font-size:clamp(40px,7vw,64px); font-weight:600; letter-spacing:-.04em;
  background:linear-gradient(140deg,#fff,var(--cy),var(--vi));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.avatar .hint{
  position:absolute; bottom:16%; font-family:var(--font-m); font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.pulse-dot{
  position:absolute; right:8%; bottom:8%; width:16px; height:16px; border-radius:50%;
  background:var(--up); box-shadow:0 0 0 4px var(--bg), 0 0 20px var(--up);
}
.pulse-dot::after{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--up);
  animation:ping 2.4s var(--ease) infinite }
@keyframes ping{ 0%{ transform:scale(1); opacity:.7 } 80%,100%{ transform:scale(2.6); opacity:0 } }

.role-line{ display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:13px 0 15px }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 13px; border-radius:99px; font-size:12.5px; font-weight:500;
  border:1px solid var(--line); background:var(--panel); color:var(--ink-2);
  transition:all .4s var(--ease);
}
.chip:hover{ border-color:rgba(94,234,212,.42); color:var(--ink); transform:translateY(-2px);
  box-shadow:0 10px 26px -16px rgba(94,234,212,.9) }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--cy) }
.chip.vi .dot{ background:var(--vi) }

.cta-row{ display:flex; flex-wrap:wrap; gap:11px; margin-top:16px }
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:9px;
  padding:12px 22px; border-radius:13px; font-size:14px; font-weight:550;
  border:1px solid var(--line-2); background:var(--panel);
  transition:transform .45s var(--spring), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.btn svg{ width:15px; height:15px; fill:currentColor; transition:transform .45s var(--ease) }
.btn::after{
  content:""; position:absolute; inset:0; opacity:0;
  background:linear-gradient(120deg, rgba(94,234,212,.2), rgba(139,124,255,.2));
  transition:opacity .45s var(--ease);
}
.btn:hover{ transform:translateY(-3px); border-color:rgba(94,234,212,.45);
  box-shadow:0 16px 40px -20px rgba(94,234,212,.95) }
.btn:hover::after{ opacity:1 }
.btn:hover svg{ transform:translateX(3px) }
.btn.eq{ min-width:158px; justify-content:center }
@media (max-width:520px){ .btn.eq{ min-width:0; flex:1 } }

.btn.primary{
  border-color:transparent; color:#04060c; font-weight:650;
  background:linear-gradient(120deg, var(--cy), var(--vi));
}
.btn.primary::after{ background:linear-gradient(120deg, var(--vi), var(--cy)) }
.btn > span{ position:relative; z-index:1 }
.btn.primary > svg{ position:relative; z-index:1 }

/* ------------------------------------------------ stat strip */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px; margin-top:12px; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; background:var(--line);
}
.stat{ background:rgba(7,11,20,.72); padding:11px 17px; transition:background .45s var(--ease) }
.stat:hover{ background:rgba(94,234,212,.07) }
.stat .k{ font-family:var(--font-m); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3) }
.stat .v{ font-family:var(--font-d); font-size:clamp(21px,2.5vw,27px); font-weight:600; letter-spacing:-.03em;
  margin-top:4px; line-height:1 }
.stat .v small{ font-size:.5em; color:var(--ink-3); font-weight:500; margin-left:4px }
.stat .s{ font-size:11px; color:var(--ink-3); margin-top:4px }

/* ============================================================
   TIMELINE  (lane view — concurrent tracks)
   ============================================================ */
.tl{ position:relative; margin-top:36px }
.tl-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:26px }
.tl-legend{ display:flex; gap:16px; flex-wrap:wrap }
.tl-legend span{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-2) }
.tl-legend i{ width:9px; height:9px; border-radius:50%; display:block }

.tl-scroll{ overflow-x:auto; overflow-y:hidden; padding-bottom:12px; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%);
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 26px, #000 calc(100% - 26px), transparent 100%) }
@media (min-width:1180px){ .tl-scroll{ mask-image:none; -webkit-mask-image:none } }
.tl-canvas{ position:relative; min-width:940px; padding:14px 0 6px }

.tl-axis{ position:relative; height:26px; border-bottom:1px solid var(--line); margin-bottom:8px }
.tl-year{ position:absolute; top:0; transform:translateX(-50%); font-family:var(--font-m);
  font-size:10.5px; letter-spacing:.1em; color:var(--ink-3) }
.tl-year::after{ content:""; position:absolute; left:50%; top:18px; width:1px; height:8px; background:var(--line-2) }

.tl-lane{ position:relative; height:74px; margin-bottom:6px }
.tl-lane-label{
  position:absolute; left:0; top:-4px; font-family:var(--font-m); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3); z-index:1;
}
.tl-rail{ position:absolute; left:0; right:0; top:38px; height:1px; background:var(--line) }

.tl-item{
  position:absolute; top:26px; height:26px; border-radius:99px; cursor:pointer;
  display:flex; align-items:center; padding-left:26px; padding-right:12px;
  font-size:12px; font-weight:500; white-space:nowrap;
  border:1px solid var(--line-2);
  background:linear-gradient(100deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  transition:transform .5s var(--spring), box-shadow .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.tl-item .node{
  position:absolute; left:6px; width:13px; height:13px; border-radius:50%;
  background:var(--bg); border:2px solid currentColor;
  transition:transform .5s var(--spring), box-shadow .45s var(--ease);
}
.tl-item.eng{ color:var(--cy) }
.tl-item.inv{ color:var(--vi) }
.tl-item.edu{ color:var(--warn) }
.tl-item:hover, .tl-item.active{
  transform:translateY(-3px);
  border-color:currentColor;
  background:linear-gradient(100deg, color-mix(in srgb, currentColor 18%, transparent), rgba(255,255,255,.03));
  box-shadow:0 14px 34px -18px currentColor;
}
.tl-item:hover .node, .tl-item.active .node{ transform:scale(1.25); box-shadow:0 0 0 4px color-mix(in srgb, currentColor 22%, transparent) }
.tl-item .lbl{ color:var(--ink); opacity:.95 }
.tl-item.now::after{
  content:""; position:absolute; right:-1px; top:-1px; bottom:-1px; width:22px;
  border-radius:99px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, currentColor 55%, transparent));
  animation:breathe 2.6s var(--ease) infinite;
}
@keyframes breathe{ 0%,100%{ opacity:.35 } 50%{ opacity:.95 } }

.tl-card{
  margin-top:20px; border:1px solid var(--line); border-radius:var(--r-lg);
  background:linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:24px clamp(18px,3vw,30px); min-height:150px; position:relative; overflow:hidden;
}
.tl-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:linear-gradient(180deg, var(--cy), var(--vi)); opacity:.85;
}
.tl-card .tl-body{ animation:routeIn .5s var(--ease-out) both }
.tl-card .meta{ display:flex; flex-wrap:wrap; gap:8px 18px; font-family:var(--font-m);
  font-size:11px; letter-spacing:.06em; color:var(--ink-3); margin:8px 0 14px }
.tl-card ul{ margin:0; padding-left:18px; color:var(--ink-2) }
.tl-card li{ margin:7px 0 }
.tl-card li::marker{ color:var(--cy) }

/* ============================================================
   CARD GRID / PROJECTS
   ============================================================ */
.cards{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)) }

.card{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding:0; display:flex; flex-direction:column;
  transition:transform .6s var(--ease-out), border-color .5s var(--ease), box-shadow .5s var(--ease);
  will-change:transform;
}
.card:hover{ transform:translateY(-6px); border-color:var(--line-2);
  box-shadow:0 30px 70px -40px rgba(94,234,212,.75) }
.card::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(94,234,212,.13), transparent 62%);
  transition:opacity .5s var(--ease);
}
.card:hover::before{ opacity:1 }

.card-scene{ height:132px; position:relative; overflow:hidden; border-bottom:1px solid var(--line) }
.card-scene svg{ position:absolute; inset:0; width:100%; height:100% }
.card-scene::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(4,6,12,.9), transparent 70%);
}
.card-body{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column }
.card h3{ margin-bottom:6px }
/* holding cards: every logo occupies the same box, whatever its source pixels are */
.card-head{ display:flex; align-items:center; gap:13px; margin-bottom:14px }
.card-logo{
  width:42px; height:42px; flex:none;
  border-radius:11px; background:#fff; padding:6px;
  object-fit:contain; display:block;
  transition:transform .5s var(--spring);
}
span.card-logo{ padding:0; font-size:15px }   /* monogram fallback */
.card:hover .card-logo{ transform:scale(1.07) rotate(-3deg) }

/* any stray .lg still gets a size rather than the image's natural one */
.lg{ width:26px; height:26px; object-fit:contain }

.card .org{ font-family:var(--font-m); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cy); margin-bottom:11px }
.card p{ color:var(--ink-2); font-size:13.8px; margin:0 0 14px; line-height:1.66 }
.card .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:auto }
.tag{ font-family:var(--font-m); font-size:10px; letter-spacing:.07em; padding:4px 9px; border-radius:6px;
  border:1px solid var(--line); color:var(--ink-3); background:rgba(255,255,255,.03);
  transition:all .35s var(--ease) }
.card:hover .tag{ border-color:rgba(94,234,212,.28); color:var(--ink-2) }

.metricline{ display:flex; gap:22px; margin:0 0 14px; flex-wrap:wrap }
.metricline div{ }
.metricline .n{ font-family:var(--font-d); font-size:21px; font-weight:600; letter-spacing:-.03em;
  background:linear-gradient(120deg, var(--cy), var(--vi)); -webkit-background-clip:text;
  background-clip:text; color:transparent }
.metricline .l{ font-size:10.5px; color:var(--ink-3); font-family:var(--font-m); letter-spacing:.08em;
  text-transform:uppercase }

/* ============================================================
   PORTFOLIO
   ============================================================ */
.panel{
  border:1px solid var(--line); border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
}
.panel-head{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px 22px;
  border-bottom:1px solid var(--line) }
.panel-head h3{ font-size:16px }
.panel-head .sub{ font-size:12px; color:var(--ink-3) }
.panel-body{ padding:22px }

.seg{ margin-left:auto; display:flex; gap:2px; padding:3px; border-radius:99px;
  border:1px solid var(--line); background:rgba(0,0,0,.3) }
.seg button{ padding:6px 14px; border-radius:99px; font-size:12px; color:var(--ink-3);
  transition:all .4s var(--ease); white-space:nowrap }
.seg button:hover{ color:var(--ink-2) }
.seg button.on{ color:#04060c; font-weight:600;
  background:linear-gradient(120deg, var(--cy), var(--vi)) }

/* --- pie --- */
.pie-layout{ display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:clamp(20px,4vw,44px); align-items:center }
@media (max-width:760px){ .pie-layout{ grid-template-columns:1fr } }
.pie-hold{ position:relative; aspect-ratio:1; max-width:320px; margin-inline:auto; width:100% }
.pie-hold svg{ width:100%; height:100%; overflow:visible }
.pie-hold path{ cursor:pointer; transition:opacity .4s var(--ease), filter .4s var(--ease) }
.pie-hold.dim path{ opacity:.28 }
.pie-hold.dim path.hot{ opacity:1; filter:drop-shadow(0 0 16px currentColor) }
.pie-center{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  pointer-events:none;
}
.pie-center .big{ font-family:var(--font-d); font-size:clamp(24px,4vw,34px); font-weight:600;
  letter-spacing:-.03em; line-height:1 }
.pie-center .lbl{ font-family:var(--font-m); font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-3); margin-top:7px }
.pie-center img{ width:34px; height:34px; border-radius:8px; object-fit:contain; background:#fff;
  padding:3px; margin-bottom:9px }

.legend{ display:grid; gap:2px }
.legend-row{
  display:grid; grid-template-columns:auto 26px 1fr auto; align-items:center; gap:11px;
  padding:8px 11px; border-radius:11px; cursor:pointer;
  transition:background .35s var(--ease), transform .4s var(--ease);
}
.legend-row:hover{ background:rgba(255,255,255,.05); transform:translateX(4px) }
.legend-row i{ width:9px; height:9px; border-radius:3px; display:block }
.legend-row .lg{ width:26px; height:26px; border-radius:7px; object-fit:contain; background:#fff; padding:3px }
.legend-row .nm{ font-size:13.5px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.legend-row .pc{ font-family:var(--font-m); font-size:12.5px; color:var(--ink-2) }
.legend-row.other .lg{ background:rgba(255,255,255,.06); display:grid; place-items:center;
  font-family:var(--font-m); font-size:9px; color:var(--ink-3); padding:0 }

/* logo fallback monogram */
.lgm{ display:grid; place-items:center; font-family:var(--font-d); font-weight:600;
  color:#04060c; border-radius:7px; font-size:11px }

.pie-note{
  margin:22px 0 0; padding-top:18px; border-top:1px solid var(--line);
  font-size:12.8px; line-height:1.72; color:var(--ink-3); max-width:80ch;
}
.pie-note strong{ color:var(--ink-2); font-weight:600 }

/* --- curve --- */
.curve-hold{ position:relative; width:100%; overflow-x:auto; overflow-y:hidden }
.curve-hold > svg{ min-width:660px }
.curve-hold svg{ width:100%; display:block; overflow:visible }
.curve-hold .mk{ cursor:pointer }
.curve-hold .mk image, .curve-hold .mk rect.mkbg{ transition:transform .45s var(--spring) }
.curve-hold .mk:hover .mkg{ transform:translateY(-4px) }

/* --- tooltip --- */
.tip{
  position:fixed; z-index:200; pointer-events:none; opacity:0;
  transform:translate(-50%,-116%) scale(.94);
  transition:opacity .22s var(--ease), transform .3s var(--ease-out);
  min-width:180px; max-width:280px;
  border:1px solid var(--line-2); border-radius:14px; padding:12px 14px;
  background:rgba(8,12,21,.95);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 26px 60px -24px #000, 0 0 0 1px rgba(94,234,212,.12);
}
.tip.on{ opacity:1; transform:translate(-50%,-124%) scale(1) }
.tip .th{ display:flex; align-items:center; gap:9px; margin-bottom:9px }
.tip .th img, .tip .th .lgm{ width:26px; height:26px; border-radius:7px; object-fit:contain;
  background:#fff; padding:3px; flex:none }
.tip .th b{ font-size:13.5px; font-weight:600; letter-spacing:-.01em }
.tip .tr{ display:flex; justify-content:space-between; gap:16px; font-size:11.5px; padding:2.5px 0 }
.tip .tr span{ color:var(--ink-3) }
.tip .tr b{ font-family:var(--font-m); font-weight:500; font-size:11.5px }

/* --- table --- */
.tbl-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; padding:16px 20px;
  border-bottom:1px solid var(--line) }
.search{ position:relative; flex:1; min-width:180px; max-width:300px }
.search input{
  width:100%; padding:9px 12px 9px 34px; border-radius:11px; font-size:13px;
  border:1px solid var(--line); background:rgba(0,0,0,.3); color:var(--ink);
  transition:all .4s var(--ease); outline:none;
}
.search input::placeholder{ color:var(--ink-3) }
.search input:focus{ border-color:rgba(94,234,212,.5); background:rgba(0,0,0,.45);
  box-shadow:0 0 0 4px rgba(94,234,212,.09) }
.search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; fill:var(--ink-3) }

.tblwrap{ overflow-x:auto }
table{ width:100%; border-collapse:collapse; min-width:820px }
thead th{
  position:sticky; top:0; z-index:2;
  font-family:var(--font-m); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3); font-weight:400; text-align:right; padding:12px 14px; white-space:nowrap;
  background:rgba(7,11,20,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
  transition:color .35s var(--ease);
}
thead th:hover{ color:var(--cy) }
thead th:first-child, thead th.l{ text-align:left }
thead th .ar{ opacity:0; margin-left:5px; transition:opacity .3s var(--ease) }
thead th.sorted .ar{ opacity:1; color:var(--cy) }

tbody tr{ cursor:pointer; transition:background .3s var(--ease) }
tbody tr:hover{ background:rgba(94,234,212,.055) }
tbody td{ padding:11px 14px; text-align:right; border-bottom:1px solid rgba(255,255,255,.045);
  font-family:var(--font-m); font-size:12.5px; white-space:nowrap }
tbody td:first-child, tbody td.l{ text-align:left; font-family:var(--font-b) }
tbody tr:hover td:first-child .nm{ color:var(--cy) }
.co{ display:flex; align-items:center; gap:11px }
.co img, .co .lgm{ width:27px; height:27px; border-radius:7px; object-fit:contain; background:#fff;
  padding:3px; flex:none; transition:transform .45s var(--spring) }
tbody tr:hover .co img, tbody tr:hover .co .lgm{ transform:scale(1.12) rotate(-4deg) }
.co .nm{ font-size:13.5px; font-weight:500; transition:color .35s var(--ease) }
.co .sub{ font-size:10.5px; color:var(--ink-3); font-family:var(--font-m) }
.co .rk{ font-family:var(--font-m); font-size:10.5px; color:var(--ink-3); width:20px; flex:none }

.pos{ color:var(--up) } .neg{ color:var(--down) } .flat{ color:var(--ink-3) }

/* live / exited signal lamp, sitting just after the logo */
.st{
  display:inline-flex; align-items:center; flex:none; height:19px;
  padding:0 6px; border-radius:99px; overflow:hidden;
  border:1px solid transparent; background:rgba(255,255,255,.04);
  transition:border-color .45s var(--ease), background .45s var(--ease);
}
.st i{ width:7px; height:7px; border-radius:50%; flex:none; position:relative }
.st i::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:inherit; animation:ping 2.8s var(--ease) infinite;
}
.st b{
  font-family:var(--font-m); font-size:8.5px; font-weight:500; letter-spacing:.14em;
  max-width:0; opacity:0; margin-left:0; white-space:nowrap; overflow:hidden;
  transition:max-width .5s var(--ease-out), opacity .35s var(--ease), margin-left .5s var(--ease-out);
}
tbody tr:hover .st b{ max-width:54px; opacity:1; margin-left:6px }

.st.live{ color:var(--up); border-color:rgba(74,222,128,.3) }
.st.live i{ background:var(--up); box-shadow:0 0 9px rgba(74,222,128,.95) }
tbody tr:hover .st.live{ background:rgba(74,222,128,.09) }

.st.exit{ color:var(--warn); border-color:rgba(255,184,107,.32) }
.st.exit i{ background:var(--warn); box-shadow:0 0 9px rgba(255,184,107,.95) }
.st.exit i::after{ animation-duration:4.6s }
tbody tr:hover .st.exit{ background:rgba(255,184,107,.09) }
.bar{ position:relative; display:inline-block; width:66px; height:5px; border-radius:99px;
  background:rgba(255,255,255,.08); vertical-align:middle; margin-right:9px; overflow:hidden }
.bar i{ position:absolute; left:0; top:0; bottom:0; border-radius:99px;
  background:linear-gradient(90deg, var(--cy), var(--vi));
  transform-origin:left; animation:growbar .9s var(--ease-out) both }
@keyframes growbar{ from{ transform:scaleX(0) } }

.badge{ font-family:var(--font-m); font-size:9.5px; letter-spacing:.08em; padding:3px 7px;
  border-radius:5px; border:1px solid var(--line) }
.badge.live{ color:var(--cy); border-color:rgba(94,234,212,.3); background:rgba(94,234,212,.07) }
.badge.real{ color:var(--vi-2); border-color:rgba(139,124,255,.3); background:rgba(139,124,255,.07) }
.badge.ver{ color:var(--up); border-color:rgba(74,222,128,.28); background:rgba(74,222,128,.07) }

/* ============================================================
   DEAL DETAIL
   ============================================================ */
.back{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3);
  margin-bottom:22px; transition:all .4s var(--ease) }
.back:hover{ color:var(--cy); gap:12px }
.back svg{ width:14px; height:14px; fill:currentColor }

.deal-hero{ display:flex; align-items:flex-start; gap:clamp(16px,3vw,26px); flex-wrap:wrap }
.deal-logo{ width:76px; height:76px; border-radius:18px; object-fit:contain; background:#fff;
  padding:12px; flex:none; box-shadow:0 20px 50px -24px rgba(94,234,212,.9) }
.deal-logo.lgm{ font-size:26px; padding:0 }
.deal-hero h1{ font-size:clamp(28px,4.4vw,46px) }
.deal-sub{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }

.kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:1px;
  margin-top:32px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--line) }
.kpi{ background:rgba(7,11,20,.8); padding:17px 18px }
.kpi .k{ font-family:var(--font-m); font-size:9.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink-3) }
.kpi .v{ font-family:var(--font-d); font-size:24px; font-weight:600; letter-spacing:-.03em;
  margin-top:6px; line-height:1 }
.kpi .s{ font-size:11px; color:var(--ink-3); margin-top:5px }

.memo{ margin-top:38px; display:grid; gap:18px }
.memo-block{
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(150deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.memo-block > summary{
  list-style:none; cursor:pointer; padding:17px 22px;
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-d); font-size:15px; font-weight:550; letter-spacing:-.015em;
  transition:background .35s var(--ease);
}
.memo-block > summary::-webkit-details-marker{ display:none }
.memo-block > summary:hover{ background:rgba(255,255,255,.035) }
.memo-block > summary .ix{ font-family:var(--font-m); font-size:10px; color:var(--cy);
  letter-spacing:.1em }
.memo-block > summary .chev{ margin-left:auto; width:15px; height:15px; fill:var(--ink-3);
  transition:transform .45s var(--ease-out) }
.memo-block[open] > summary .chev{ transform:rotate(180deg) }
.memo-block[open] > summary{ border-bottom:1px solid var(--line) }
.memo-in{ padding:20px 22px 24px; animation:slideDown .5s var(--ease-out) both }
@keyframes slideDown{ from{ opacity:0; transform:translateY(-8px) } to{ opacity:1; transform:none } }
.memo-in p{ color:var(--ink-2); line-height:1.75; margin:0 0 12px }
.memo-in ul{ margin:0 0 4px; padding-left:20px }
.memo-in li{ color:var(--ink-2); margin:9px 0; line-height:1.68 }
.memo-in li::marker{ color:var(--cy) }
.memo-in.risks li::marker{ color:var(--warn) }
.memo-in pre{
  white-space:pre-wrap; word-wrap:break-word; font-family:var(--font-b); font-size:13.6px;
  line-height:1.78; color:var(--ink-2); margin:0; max-height:460px; overflow-y:auto;
  padding-right:10px;
}
.callout{ border-left:2px solid var(--cy); padding:2px 0 2px 15px; margin:14px 0;
  color:var(--ink-2); font-size:13.4px }
.callout.warn{ border-color:var(--warn) }

.gap-note{ border:1px dashed var(--line-2); border-radius:var(--r); padding:18px 20px;
  color:var(--ink-3); font-size:13.4px }

/* ------------------------------------------------ building… */
.building{
  min-height:58vh;
  display:flex; flex-direction:column; justify-content:center;
}
.building h2{ font-size:clamp(34px,6vw,64px) }
.building .dots i{
  display:inline-block; opacity:.25;
  animation:dot 1.5s ease-in-out infinite;
}
.building .dots i:nth-child(2){ animation-delay:.2s }
.building .dots i:nth-child(3){ animation-delay:.4s }
@keyframes dot{ 0%,70%,100%{ opacity:.2 } 35%{ opacity:1 } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ border-top:1px solid var(--line); margin-top:60px; padding-block:34px 44px;
  padding-bottom:calc(44px + env(safe-area-inset-bottom, 0px)) }
.foot{ display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between;
  font-size:12.5px; color:var(--ink-3) }
.foot a{ transition:color .35s var(--ease) }
.foot a:hover{ color:var(--cy) }

.disclaimer{ margin-top:18px; font-size:11.5px; color:var(--ink-3); line-height:1.7; max-width:78ch }

/* ============================================================
   MOBILE
   ============================================================ */
/* auto-fit gives 3 columns and an orphan at phone widths; 2x2 reads better */
@media (max-width:620px){ .stats{ grid-template-columns:repeat(2,1fr) } }

@media (max-width:720px){
  /* four tabs plus the longer name no longer fit; keep the name on one line */
  .tabs a{ padding:6px 9px; font-size:12px }
  .tabs{ padding:3px }
  .brand{ gap:8px; min-width:0 }
  .brand > span{ white-space:nowrap; font-size:13.5px; overflow:hidden; text-overflow:ellipsis }
  .brand .mark{ width:27px; height:27px; font-size:11px }
  .brand small{ display:none }
  .navlinks{ display:none }
  .panel-body{ padding:16px }
  .seg{ margin-left:0; width:100% }
  .seg button{ flex:1 }
  .panel-head{ padding:14px 16px }
}

/* ------------------------------------------------ property design */
.pd-gallery{ display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:12px; margin-top:32px }
@media (max-width:760px){ .pd-gallery{ grid-template-columns:1fr } }
.pd-thumbs{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:12px; min-height:0 }
.pd-gallery figure{ margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line);
  background:linear-gradient(150deg, rgba(94,234,212,.08), rgba(139,124,255,.08)), var(--bg-2) }
.pd-hero{ aspect-ratio:4/3 }
.pd-thumb{ min-height:0 }
@media (max-width:760px){ .pd-thumb{ aspect-ratio:4/3 } }
.pd-gallery img{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .8s var(--ease-out) }
.pd-gallery figure:hover img{ transform:scale(1.035) }
.pd-gallery figure.nophoto img{ display:none }
.pd-sec{ margin-top:clamp(48px,6vw,72px) }
.pd-h{ margin-top:6px; font-size:clamp(22px,2.6vw,30px) }
.pd-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:26px;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--line) }
@media (max-width:900px){ .pd-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:560px){ .pd-grid{ grid-template-columns:1fr } }
.pd-note{ background:rgba(7,11,20,.86); padding:20px 22px }
.pd-note .ix{ font-family:var(--font-m); font-size:10px; color:var(--cy) }
.pd-note h4{ font-size:15.5px; margin:8px 0 8px }
.pd-note p{ color:var(--ink-2); font-size:13.6px; line-height:1.62; margin:0 }
.kpi .v.up{ color:var(--up) }
.pd-bar{ display:flex; height:16px; border-radius:99px; overflow:hidden; gap:2px }
.pd-bar span{ min-width:3px }
.pd-legend{ list-style:none; padding:0; margin:18px 0 0; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:8px 24px; font-size:13px; color:var(--ink-2) }
.pd-legend li{ display:flex; align-items:center; gap:9px }
.pd-legend i{ width:9px; height:9px; border-radius:3px; flex:none }
.pd-legend b{ margin-left:auto; font-family:var(--font-m); font-weight:500; color:var(--ink) }
.pd-tl{ list-style:none; padding:0; margin:26px 0 0; border-left:1px solid var(--line-2) }
.pd-tl li{ display:grid; grid-template-columns:92px 1fr; gap:18px; padding:0 0 22px 22px; position:relative }
.pd-tl li::before{ content:""; position:absolute; left:-4.5px; top:5px; width:8px; height:8px; border-radius:50%;
  background:var(--cy); box-shadow:0 0 12px var(--cy) }
.pd-tl .w{ font-family:var(--font-m); font-size:11px; letter-spacing:.08em; color:var(--ink-3); padding-top:2px }
.pd-tl h4{ font-size:15px; margin:0 0 4px }
.pd-tl p{ color:var(--ink-2); font-size:13.4px; margin:0; line-height:1.55 }
@media (max-width:520px){ .pd-tl li{ grid-template-columns:1fr; gap:4px } }
.pd-gallery figure{ cursor:zoom-in; position:relative }
.pd-gallery figure:focus-visible{ outline:2px solid var(--cy); outline-offset:2px }
.pd-more{ position:absolute; inset:0; display:grid; place-items:center; background:rgba(7,11,20,.55);
  color:#fff; font-family:var(--font-m); font-size:clamp(20px,2.4vw,28px); letter-spacing:.04em;
  pointer-events:none; transition:background .3s }
.pd-gallery figure:hover .pd-more{ background:rgba(7,11,20,.4) }

/* lightbox */
.lb{ position:fixed; inset:0; z-index:1000; display:grid; grid-template-columns:64px minmax(0,1fr) 64px;
  align-items:center; background:rgba(4,7,14,.94); backdrop-filter:blur(6px); animation:lbIn .2s ease-out;
  touch-action:pan-y; user-select:none }
@keyframes lbIn{ from{ opacity:0 } }
.lb figure{ margin:0; grid-column:2; display:flex; flex-direction:column; align-items:center; gap:14px; min-width:0 }
.lb img{ max-width:100%; max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px); object-fit:contain;
  border-radius:var(--r); display:block }
.lb figcaption{ color:var(--ink-2); font-size:13px; font-family:var(--font-m); text-align:center; padding:0 8px }
.lb button{ background:none; border:0; color:#fff; cursor:pointer; opacity:.7; transition:opacity .2s; font:inherit }
.lb button:hover, .lb button:focus-visible{ opacity:1 }
.lb-nav{ font-size:44px; line-height:1; height:100%; width:100% }
.lb-x{ position:absolute; top:12px; right:16px; font-size:34px; line-height:1; padding:6px 10px }
@media (max-width:760px){
  .lb{ grid-template-columns:0 minmax(0,1fr) 0; padding:0 8px }
  .lb-nav{ position:absolute; bottom:10px; height:auto; width:auto; padding:8px 18px; font-size:36px }
  .lb-prev{ left:8px } .lb-next{ right:8px }
}