/* ============================================================
   Charles Yichen Wang — Personal Homepage
   Twilight / blue-hour system: deep indigo base, blue→purple→pink glow
   Type: PingFang SC (CN) · Space Grotesk (Latin) · IBM Plex Mono (labels)
   ============================================================ */

:root{
  /* surfaces */
  --bg:        #070A14;
  --bg-2:      #0A0F1C;
  --bg-3:      #0C1222;
  --card:      rgba(255,255,255,0.038);
  --card-2:    rgba(255,255,255,0.055);
  --border:    rgba(255,255,255,0.085);
  --border-2:  rgba(255,255,255,0.16);
  /* ink */
  --t1: #F4F6FB;
  --t2: #AEB6CC;
  --t3: #707B93;
  --t4: #50596f;
  /* twilight accents */
  --blue:   #5B8DEF;
  --blue-d: #3B82F6;
  --indigo: #6E72E8;
  --purple: #9B6DF3;
  --pink:   #EC6FB0;
  --rose:   #F4789B;
  --cyan:   #45C7DE;
  --green:  #34D27B;
  --grad:   linear-gradient(100deg,#5B8DEF 0%,#9B6DF3 42%,#EC6FB0 78%,#F0A878 100%);
  --grad-2: linear-gradient(120deg,#5B8DEF,#9B6DF3 55%,#EC6FB0);
  /* type */
  --cn: "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --lat: "Space Grotesk", var(--cn);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
  --maxw: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--bg);
  color:var(--t1);
  font-family:var(--cn);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:rgba(155,109,243,0.35); color:#fff; }
a{ color:inherit; text-decoration:none; }
em{ font-style:normal; color:var(--t1); font-family:var(--mono); font-size:0.92em; letter-spacing:-0.01em; }
strong{ font-weight:500; color:var(--t1); }

/* ---------- ambient sky ---------- */
.sky{ position:fixed; inset:0; z-index:-2; background:
   radial-gradient(120% 80% at 50% -10%, #0E1430 0%, var(--bg-2) 45%, var(--bg) 100%); }
.sky-grid{ position:absolute; inset:0; opacity:0.5;
  background-image:linear-gradient(rgba(255,255,255,0.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,0.025) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 75%); }
.sky-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:0.55; }
.sky-glow--blue{   width:48vw; height:48vw; left:-10vw;  top:-12vw;  background:radial-gradient(circle,#2C5CC4,transparent 65%); }
.sky-glow--purple{ width:42vw; height:42vw; right:-8vw;  top:6vw;    background:radial-gradient(circle,#6B3FB0,transparent 65%); opacity:0.45; }
.sky-glow--pink{   width:50vw; height:50vw; left:30vw;   top:34vw;   background:radial-gradient(circle,#9A3D77,transparent 68%); opacity:0.3; }
.sky-noise{ position:absolute; inset:0; opacity:0.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- layout helpers ---------- */
.section{ max-width:var(--maxw); margin:0 auto; padding:120px 32px; position:relative; }
.kicker{ font-family:var(--mono); font-size:12px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--t3); display:flex; align-items:center; gap:12px; margin-bottom:26px; }
.kicker span{ color:var(--blue); }
.kicker::after{ content:""; flex:0 0 56px; height:1px; background:linear-gradient(90deg,var(--border-2),transparent); }
.section__head{ font-size:clamp(30px,4.4vw,46px); line-height:1.12; font-weight:600; letter-spacing:-0.01em; }
.section__sub{ color:var(--t2); font-size:clamp(15px,1.6vw,18px); margin-top:18px; max-width:640px; }
.grad-text{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.muted{ color:var(--t3); }

/* ---------- NAV ---------- */
.nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; gap:24px;
  padding:18px 32px; transition:padding .3s ease, background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent; }
.nav.is-stuck{ padding:12px 32px; background:rgba(8,11,20,0.72); backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%); border-bottom:1px solid var(--border); }
.nav__brand{ display:flex; align-items:center; gap:11px; font-family:var(--lat); font-weight:600; letter-spacing:-0.01em; }
.brand-mark{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px;
  background:linear-gradient(150deg,rgba(91,141,239,0.22),rgba(236,111,176,0.18)); border:1px solid var(--border-2); color:var(--blue); }
.brand-mark svg{ width:20px; height:20px; }
.brand-name{ font-size:15.5px; }
.nav__links{ display:flex; gap:26px; margin-left:auto; }
.nav__links a{ font-family:var(--mono); font-size:12.5px; letter-spacing:0.04em; color:var(--t3);
  position:relative; padding:4px 0; transition:color .2s; }
.nav__links a:hover{ color:var(--t1); }
.nav__links a.is-active{ color:var(--t1); }
.nav__links a.is-active::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:var(--grad-2); border-radius:2px; }
.nav__cta{ font-size:13.5px; padding:8px 16px; border-radius:999px; border:1px solid var(--border-2);
  color:var(--t1); transition:background .2s,border-color .2s; }
.nav__cta:hover{ background:var(--card-2); border-color:var(--blue); }
.nav__menu{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; }
.nav__menu span{ width:22px; height:1.6px; background:var(--t1); border-radius:2px; transition:.25s; }

/* ---------- HERO ---------- */
.hero{ max-width:var(--maxw); margin:0 auto; padding:160px 32px 110px; min-height:100vh;
  display:grid; grid-template-columns:1.05fr 0.95fr; align-items:center; gap:48px; position:relative; }
.eyebrow{ display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--t2);
  padding:7px 14px; border:1px solid var(--border); border-radius:999px; background:var(--card); margin-bottom:30px; }
.eyebrow .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 4px rgba(52,210,123,0.16); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:0.45} }
.hero__name{ font-family:var(--lat); font-size:clamp(46px,7vw,84px); line-height:0.98; font-weight:600;
  letter-spacing:-0.025em; }
.hero__title{ font-size:clamp(19px,2.4vw,26px); margin-top:20px; color:var(--t1); font-weight:500;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; display:inline-block; }
.hero__lede{ color:var(--t2); font-size:clamp(15px,1.7vw,17.5px); line-height:1.75; margin-top:24px; max-width:540px; }
.hero__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:30px; max-width:560px; }
.hero__tags span{ font-family:var(--mono); font-size:11.5px; letter-spacing:0.02em; color:var(--t2);
  padding:6px 11px; border:1px solid var(--border); border-radius:7px; background:rgba(255,255,255,0.02);
  white-space:nowrap; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.btn{ display:inline-flex; align-items:center; gap:9px; padding:14px 24px; border-radius:999px; font-size:15px;
  font-weight:500; transition:transform .2s, box-shadow .25s, background .25s, border-color .2s; }
.btn--primary{ background:var(--grad); color:#0a0d18; font-weight:600; box-shadow:0 8px 30px -8px rgba(155,109,243,0.55); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -10px rgba(236,111,176,0.6); }
.btn--primary .arr{ font-style:normal; transition:transform .2s; }
.btn--primary:hover .arr{ transform:translateX(3px); }
.btn--ghost{ border:1px solid var(--border-2); color:var(--t1); }
.btn--ghost:hover{ background:var(--card-2); border-color:var(--blue); transform:translateY(-2px); }

/* hero visual orb */
.hero__visual{ position:relative; height:480px; display:grid; place-items:center; }
.orb{ position:relative; width:430px; height:430px; max-width:100%; }
.orb-net{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.orb-net .net-edges path{ animation:edgePulse 4s ease-in-out infinite; }
@keyframes edgePulse{ 0%,100%{opacity:0.18} 50%{opacity:0.6} }
.net-rings circle{ animation:ringPulse 5s ease-in-out infinite; }
@keyframes ringPulse{ 0%,100%{ opacity:0.6 } 50%{ opacity:0.95 } }
.net-flow circle{ filter:drop-shadow(0 0 3px rgba(180,205,255,0.9)); }
.orb-ring{ position:absolute; border-radius:50%; border:1px solid var(--border); inset:0; margin:auto; }
.orb-ring--2{ width:430px; height:430px; animation:spin 60s linear infinite reverse; border-color:rgba(255,255,255,0.05); }
@keyframes spin{ to{ transform:rotate(360deg); } }
.orb-chip{ position:absolute; font-family:var(--mono); font-size:12px; color:var(--t1);
  padding:7px 13px; border-radius:999px; background:rgba(12,16,30,0.8); border:1px solid var(--border-2);
  backdrop-filter:blur(8px); box-shadow:0 8px 26px -10px rgba(0,0,0,0.6); white-space:nowrap;
  animation:floaty 6s ease-in-out infinite; }
.orb-chip i{ font-style:normal; }
.orb-chip--agent,.orb-chip--skill,.orb-chip--runtime{
  left:50%; --tx:-50%; transform:translateX(-50%); margin-top:-13px; }
.orb-chip--runtime{ top:11.9%; color:#ffc9e4; border-color:rgba(236,111,176,0.5); }
.orb-chip--skill{   top:24.3%; color:#d8c6ff; border-color:rgba(155,109,243,0.5); animation-delay:1.1s; }
.orb-chip--agent{   top:36.2%; color:#bcd2ff; border-color:rgba(91,141,239,0.5); animation-delay:2.2s; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) translateX(var(--tx,0)); } 50%{ transform:translateY(-10px) translateX(var(--tx,0)); } }

.hero__scroll{ position:absolute; bottom:34px; left:32px; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.2em; color:var(--t3); }
.hero__scroll i{ position:relative; width:1px; height:36px; background:linear-gradient(var(--blue),transparent); overflow:hidden; }
.hero__scroll i::after{ content:""; position:absolute; top:0; left:0; width:1px; height:12px; background:#cfe0ff; animation:scrolldot 1.8s ease-in-out infinite; }
@keyframes scrolldot{ 0%{ transform:translateY(-12px); opacity:0 } 40%{opacity:1} 100%{ transform:translateY(36px); opacity:0 } }

/* ---------- THESIS ---------- */
.thesis__head{ font-size:clamp(28px,4.6vw,52px); line-height:1.18; font-weight:600; letter-spacing:-0.015em; max-width:18em; }
.thesis__head{ margin-bottom:6px; }
.thesis__body{ display:grid; grid-template-columns:1fr 1fr; gap:40px; margin-top:44px; max-width:900px; }
.thesis__body p{ color:var(--t2); font-size:17px; line-height:1.8; }
.thesis__atoms{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:64px; }
.atom{ border:1px solid var(--border); border-radius:14px; padding:22px 20px; background:var(--card);
  position:relative; overflow:hidden; }
.atom::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad); opacity:0.7; }
.atom__k{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--t3); }
.atom__v{ display:block; margin-top:12px; font-size:15.5px; color:var(--t1); line-height:1.5; }

/* ---------- EXPERIENCE timeline ---------- */
.experience .section__head{ margin-bottom:0; }
.timeline{ list-style:none; margin-top:64px; }
.tl{ display:grid; grid-template-columns:40px 1fr; gap:24px; }
.tl__rail{ position:relative; display:flex; justify-content:center; }
.tl__rail::before{ content:""; position:absolute; top:6px; bottom:-34px; width:1px;
  background:linear-gradient(var(--border-2),var(--border)); }
.tl:last-child .tl__rail::before{ display:none; }
.tl__node{ width:13px; height:13px; border-radius:50%; background:var(--bg-2); border:2px solid var(--blue);
  margin-top:4px; z-index:1; box-shadow:0 0 0 5px rgba(91,141,239,0.1); }
.tl--accent .tl__node{ border-color:var(--purple); box-shadow:0 0 0 5px rgba(155,109,243,0.14); }
.tl--now .tl__node{ border-color:var(--pink); box-shadow:0 0 0 5px rgba(236,111,176,0.16); background:var(--pink); }
.tl__card{ padding-bottom:34px; }
.tl__top{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tl__no{ font-family:var(--mono); font-size:12px; color:var(--t3); }
.tl__phase{ font-size:20px; font-weight:600; color:var(--t1); white-space:nowrap; }
.tl__org{ font-family:var(--lat); font-size:13.5px; font-weight:500; color:var(--blue);
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.tl__org::before{ content:""; width:4px; height:4px; border-radius:50%; background:currentColor; }
.tl--accent .tl__org{ color:var(--purple); }
.tl--now .tl__org{ color:var(--pink); }
.tl__live{ font-family:var(--mono); font-size:10px; letter-spacing:0.14em; color:#0a0d18; background:var(--pink);
  padding:3px 8px; border-radius:999px; font-weight:600; }
.tl__card p{ color:var(--t2); font-size:15.5px; line-height:1.7; margin-top:12px; max-width:680px; }
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.chips span{ font-size:12.5px; color:var(--t2); padding:5px 11px; border:1px solid var(--border); border-radius:999px;
  background:rgba(255,255,255,0.02); transition:border-color .2s, color .2s; white-space:nowrap; }
.chips--mono span{ font-family:var(--mono); font-size:11px; letter-spacing:0.01em; }
.card:hover .chips span{ border-color:rgba(255,255,255,0.14); }

/* ---------- generic card / grids ---------- */
.card{ border:1px solid var(--border); border-radius:18px; background:var(--card); padding:28px;
  position:relative; transition:transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s, background .3s; }
.card:hover{ transform:translateY(-6px); border-color:var(--border-2); background:var(--card-2); }
.grid{ display:grid; gap:18px; margin-top:56px; }
.grid--sys{ grid-template-columns:repeat(3,1fr); }
.grid--work{ grid-template-columns:repeat(2,1fr); }
.grid--think{ grid-template-columns:repeat(3,1fr); }

/* systems */
.sys__no{ font-family:var(--mono); font-size:12px; color:var(--blue); letter-spacing:0.1em; }
.sys h3{ font-size:19px; font-weight:600; margin:14px 0 12px; line-height:1.3; letter-spacing:-0.01em; }
.sys p{ color:var(--t2); font-size:14.5px; line-height:1.65; }
.sys .chips{ margin-top:18px; }
.sys::after{ content:""; position:absolute; inset:0; border-radius:18px; padding:1px; pointer-events:none;
  background:linear-gradient(140deg,transparent 40%,rgba(155,109,243,0.4),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s; }
.sys:hover::after{ opacity:1; }

/* ---------- ARCHITECTURE pipe ---------- */
.arch{ position:relative; }
.pipe{ margin:64px auto 0; max-width:860px; display:flex; flex-direction:column; align-items:center; }
.pl{ width:100%; display:flex; justify-content:center; }
.pl__node--solo{ display:inline-flex; flex-direction:column; align-items:center; gap:3px; padding:16px 34px;
  border-radius:14px; border:1px solid var(--border-2); background:var(--bg-3);
  box-shadow:0 10px 30px -16px rgba(0,0,0,0.7); min-width:240px; text-align:center; }
.pl__lbl{ font-size:16px; font-weight:600; color:var(--t1); }
.pl__en{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--t3); white-space:nowrap; }
.pl__link{ width:2px; height:40px; position:relative; overflow:hidden; border-radius:2px;
  background:rgba(255,255,255,0.08); margin:6px 0; }
.pl__link i{ position:absolute; left:0; top:-40%; width:100%; height:60%;
  background:linear-gradient(var(--blue),transparent); animation:flow 1.8s linear infinite; }
@keyframes flow{ 0%{ transform:translateY(-60%); } 100%{ transform:translateY(220%); } }

.pl--band{ flex-direction:column; align-items:stretch; width:100%; border:1px solid var(--border);
  border-radius:16px; background:var(--card); padding:18px 20px 20px; position:relative; overflow:hidden; }
.pl--band::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tone,var(--blue)); opacity:0.85; }
.pl__band-head{ display:flex; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.pl__band-head .pl__lbl{ font-size:16px; }
.pl__band-head .pl__en{ color:var(--t3); }
.pl__row{ display:flex; flex-wrap:wrap; gap:9px; }
.pnode{ font-size:13px; color:var(--t1); padding:9px 14px; border-radius:10px; border:1px solid var(--border);
  background:rgba(255,255,255,0.025); transition:transform .2s, border-color .2s, background .2s; }
.pl--band:hover .pnode{ border-color:rgba(255,255,255,0.14); }
.pnode:hover{ transform:translateY(-2px); border-color:var(--tone,var(--blue)); background:rgba(255,255,255,0.05); }
.pnode--out{ font-weight:600; background:rgba(240,168,120,0.08); border-color:rgba(240,168,120,0.28); }

/* tones */
.pl[data-tone="blue"]{ --tone:var(--blue); }
.pl[data-tone="indigo"]{ --tone:var(--indigo); }
.pl[data-tone="purple"]{ --tone:var(--purple); }
.pl[data-tone="pink"]{ --tone:var(--pink); }
.pl[data-tone="cyan"]{ --tone:var(--cyan); }
.pl[data-tone="out"]{ --tone:#F0A878; }
.pl[data-tone="indigo"] .pl__link i,
.pl__link i{ background:linear-gradient(var(--blue),transparent); }
.arch__note{ max-width:660px; margin:54px auto 0; text-align:center; color:var(--t2); font-size:16.5px; line-height:1.75; }
.arch__note strong{ background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:600; }

/* ---------- WORK ---------- */
.wk{ padding:30px 30px 26px; }
.wk__idx span{ font-family:var(--mono); font-size:12px; color:var(--t3); letter-spacing:0.1em; }
.wk h3{ font-size:21px; font-weight:600; margin:14px 0 12px; letter-spacing:-0.01em; }
.wk p{ color:var(--t2); font-size:15px; line-height:1.7; }
.wk__list{ list-style:none; margin-top:20px; display:grid; gap:9px; }
.wk__list li{ font-size:14px; color:var(--t2); padding-left:18px; position:relative; }
.wk__list li::before{ content:""; position:absolute; left:0; top:8px; width:6px; height:6px; border-radius:2px;
  background:var(--grad-2); }

/* ---------- CAPABILITIES cloud ---------- */
.cloud{ display:flex; flex-wrap:wrap; gap:10px 12px; margin-top:48px; align-items:center; }
.cloud span{ font-size:15px; color:var(--t2); padding:8px 16px; border:1px solid var(--border); border-radius:999px;
  background:var(--card); transition:transform .2s, border-color .2s, color .2s; }
.cloud span:hover{ transform:translateY(-3px); color:var(--t1); border-color:var(--border-2); }
.cloud span.big{ font-size:18px; color:var(--t1); padding:10px 20px; font-weight:500;
  border-color:rgba(155,109,243,0.4); background:rgba(155,109,243,0.07); }

/* ---------- THINKING ---------- */
.think{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:16px; padding:24px;
  background:var(--card); min-height:190px; transition:transform .3s, border-color .3s, background .3s; }
.think:hover{ transform:translateY(-6px); border-color:var(--border-2); background:var(--card-2); }
.think__tag{ font-family:var(--mono); font-size:10.5px; letter-spacing:0.1em; color:var(--cyan);
  padding:4px 10px; border:1px solid rgba(69,199,222,0.3); border-radius:999px; align-self:flex-start; }
.think h3{ font-size:18px; font-weight:600; line-height:1.4; margin-top:18px; letter-spacing:-0.01em; flex:1; }
.think__more{ font-family:var(--mono); font-size:12px; color:var(--t3); margin-top:16px; transition:color .2s; }
.think:hover .think__more{ color:var(--t1); }

/* ---------- CONTACT ---------- */
.contact{ padding-top:60px; padding-bottom:120px; }
.contact__inner{ border:1px solid var(--border); border-radius:28px; padding:64px clamp(28px,5vw,72px);
  background:radial-gradient(120% 140% at 50% 0%, rgba(91,141,239,0.1), transparent 60%), var(--card);
  position:relative; overflow:hidden; }
.contact__inner::before{ content:""; position:absolute; inset:0; border-radius:28px; padding:1px; pointer-events:none;
  background:linear-gradient(120deg,rgba(91,141,239,0.5),rgba(236,111,176,0.4) 60%,transparent);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; }
.contact__head{ font-size:clamp(26px,3.6vw,40px); font-weight:600; line-height:1.25; margin:20px 0 0; max-width:18ch; letter-spacing:-0.01em; }
.contact__lede{ color:var(--t2); font-size:16.5px; margin-top:20px; max-width:560px; }
.contact__links{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:40px; }
.clink{ display:flex; flex-direction:column; gap:6px; padding:20px; border:1px solid var(--border); border-radius:14px;
  background:rgba(255,255,255,0.02); transition:transform .25s, border-color .25s, background .25s; }
.clink:hover{ transform:translateY(-4px); border-color:var(--border-2); background:var(--card-2); }
.clink__k{ font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--t3); }
.clink__v{ font-size:15px; color:var(--t1); word-break:break-all; }

/* ---------- FOOTER ---------- */
.foot{ max-width:var(--maxw); margin:0 auto; padding:36px 32px 60px; display:flex; align-items:center; gap:16px;
  flex-wrap:wrap; border-top:1px solid var(--border); }
.foot__name{ font-family:var(--lat); font-weight:600; font-size:15px; }
.foot__tag{ color:var(--t3); font-size:13px; }
.foot__copy{ font-family:var(--mono); font-size:12px; color:var(--t4); margin-left:auto; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation:none !important; }
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hero{ grid-template-columns:1fr; padding-top:130px; gap:30px; min-height:auto; }
  .hero__visual{ height:380px; order:-1; }
  .hero__scroll{ display:none; }
  .thesis__body{ grid-template-columns:1fr; gap:22px; }
  .thesis__atoms{ grid-template-columns:repeat(2,1fr); }
  .grid--sys{ grid-template-columns:repeat(2,1fr); }
  .grid--think{ grid-template-columns:repeat(2,1fr); }
  .nav__links{ display:none; }
  .nav__menu{ display:flex; margin-left:auto; }
  .nav.is-open .nav__links{ display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    gap:0; background:rgba(10,13,22,0.96); backdrop-filter:blur(16px); padding:8px 0; border-bottom:1px solid var(--border); }
  .nav.is-open .nav__links a{ padding:14px 32px; font-size:15px; }
}
@media (max-width:620px){
  .section{ padding:84px 20px; }
  .hero{ padding:120px 20px 80px; }
  .thesis__atoms{ grid-template-columns:1fr; }
  .grid--sys,.grid--work,.grid--think{ grid-template-columns:1fr; }
  .contact__links{ grid-template-columns:1fr; }
  .orb{ width:340px; height:340px; }
  .nav__cta{ display:none; }
  .pl__node--solo{ min-width:0; width:100%; }
  .foot__copy{ margin-left:0; width:100%; }
}