@import url('https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Space+Mono:wght@400;700&display=swap');

:root {
  --bg: #060606;
  --panel: #0d0d0d;
  --panel-2: #121212;
  --line: rgba(255,255,255,.08);
  --o: #d9482b;
  --o2: #ff6a3d;
  --t: #f5f5f5;
  --mut: #b8b8b8;
  --shadow: rgba(0,0,0,.38);
  --px: "Silkscreen", monospace;
  --mono: "Space Mono", monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
html {
  scrollbar-color: rgba(217,72,43,.85) rgba(14,14,14,.9);
  scrollbar-width: thin;
}

body {
  position:relative;
  background:
    radial-gradient(circle at top, rgba(217,72,43,.14), transparent 34%),
    radial-gradient(circle at bottom right, rgba(255,106,61,.10), transparent 30%),
    linear-gradient(180deg, #050505 0%, #0b0b0b 100%);
  color:var(--t);
  font:400 .95rem/1.7 var(--mono);
  overflow-x:hidden;
}
body::-webkit-scrollbar {
  width: 12px;
  background: rgba(14,14,14,.95);
}
body::-webkit-scrollbar-track {
  background: rgba(14,14,14,.95);
  border-left: 1px solid rgba(217,72,43,.35);
}
body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(217,72,43,.9), rgba(255,106,61,.8));
  border: 2px solid rgba(14,14,14,.9);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255,106,61,.95), rgba(217,72,43,.85));
}
body::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size:24px 24px;
  mask-image:radial-gradient(circle at center, black 14%, transparent 100%);
  z-index:-2;
}
img { max-width:100%; display:block; image-rendering:pixelated; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
:focus-visible { outline:2px dashed var(--o2); outline-offset:3px; }

video {
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3;
  opacity:.20; filter:brightness(.52) sepia(1) hue-rotate(-30deg) saturate(2.8);
}
.skyline {
  position:fixed; inset:auto 0 0 0; height:72vh; z-index:-2; opacity:.35; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23d9482b' stroke-width='2'%3E%3Cpath d='M0 300V150h40v-40h30v60h40V90h50v210M170 300V120h60V70h40v230M290 300V160h50V60h40v100h40v140M420 300V130h70V90h40v210M550 300V110h50V40h30v70h60v190M700 300V140h50V100h50v200'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 100% no-repeat;
}

/* top bar */
.topbar {
  position:sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:18px;
  min-height:104px; padding:18px clamp(16px,4vw,64px); background:rgba(5,5,5,.82); border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 14px 34px rgba(0,0,0,.2);
  transition:padding .22s ease, background-color .22s ease, box-shadow .22s ease;
}
.topbar::after {
  content:""; position:absolute; inset:auto 0 -1px; height:2px; opacity:.65; pointer-events:none;
  background:repeating-linear-gradient(90deg, var(--o) 0 4px, transparent 4px 8px);
  background-size:8px 2px; animation:navbar-dash-run .8s linear infinite;
}
@keyframes navbar-dash-run { to { background-position:8px 0; } }
.topbar.scrolled { min-height:92px; padding-top:12px; padding-bottom:12px; background:rgba(5,5,5,.96); backdrop-filter:blur(10px); box-shadow:0 12px 30px rgba(0,0,0,.34); }
.topbar.scrolled::after { opacity:.75; }
.tabs { display:flex; flex:0 1 auto; gap:7px; align-items:center; }
.tab {
  display:grid; place-items:center; min-height:36px; padding:7px 10px; color:rgba(245,245,245,.76);
  background:rgba(15,15,15,.92); border:1px solid rgba(255,255,255,.17); border-radius:2px;
  font:700 .58rem/1.2 var(--px); letter-spacing:.06em; white-space:nowrap;
  transition:color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.tab:hover { color:var(--o2); border-color:rgba(255,106,61,.8); background:#17110f; transform:translateY(-1px); box-shadow:0 3px 10px rgba(217,72,43,.12); }
.tab.active {
  color:#080808; background:var(--o2); border-color:#ffc1a9; box-shadow:0 2px 10px rgba(217,72,43,.2);
}
.tab.active:hover { color:#000; background:#ff8058; }
.nav-toggle {
  display:none; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.17);
  border-radius:2px; background:#0f0f0f; color:var(--mut); cursor:pointer; transition:color .16s ease, border-color .16s ease, background-color .16s ease;
}
.nav-toggle:hover { color:var(--o2); border-color:rgba(255,106,61,.8); background:#17110f; }
.nav-toggle:focus-visible, .tab:focus-visible { outline:2px solid var(--o2); outline-offset:3px; }
.tab, .nav-toggle, .pbtn, .findme a { position:relative; }
.tab::before, .nav-toggle::before, .pbtn::before, .findme a::before, .aura-btn::before {
  content:""; position:absolute; inset:3px; border:1px dashed currentColor; opacity:.58; pointer-events:none;
}
.aura-btn::before { border-color:var(--o2); }
.talker { position:relative; display:flex; flex:0 1 auto; align-items:center; gap:10px; min-width:0; }
.talker-copy { display:flex; flex-direction:column; gap:5px; min-width:0; }
.brand-name { color:rgba(245,245,245,.55); font:700 .52rem/1 var(--px); letter-spacing:.09em; white-space:nowrap; }
.brand-cursor { color:var(--o2); animation:brand-blink 1s steps(2, start) infinite; }
@keyframes brand-blink { to { visibility:hidden; } }
.avatar,
.avatar:hover,
.avatar:active {
  display:block; width:100px; height:100px; flex:0 0 100px; transform:none;
}
.avatar img,
.avatar:hover img,
.avatar:active img,
.talking .avatar img {
  display:block; width:100px; height:100px; min-width:100px; max-width:100px;
  object-fit:contain; object-position:center; image-rendering:auto; transform:none; scale:none; zoom:1;
  filter:drop-shadow(0 0 10px rgba(217,72,43,.28)); animation:none; transition:filter .2s ease;
}
.avatar:hover img { filter:drop-shadow(0 0 16px rgba(217,72,43,.55)); }
.typing-text,
.tab,
.bubble,
.speech,
.pbtn,
.findme a,
.card h3,
.xp h3,
.pcard h3,
.hex span,
label,
input,
textarea,
button,
.flinks a,
.term-bar,
.level span,
.card,
.pcard,
.logo-text {
  font-family: var(--px);
  letter-spacing: 0.08em;
}
.bubble {
  display:flex; align-items:center; width:clamp(230px,27vw,340px); min-height:58px; padding:10px 12px; overflow:hidden;
  color:var(--t); background:#101010; border:2px dashed rgba(255,106,61,.8);
  font:400 .78rem/1.45 var(--mono); letter-spacing:.035em; text-align:left; text-transform:uppercase;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 12px rgba(217,72,43,.08);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.bubble.typewriter { display:block; white-space:normal; border-right:2px dashed rgba(255,106,61,.8); animation:none; overflow-wrap:anywhere; }
.talker.talking .bubble { border-color:#ffb199; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 15px rgba(217,72,43,.22); }
.aura-btn {
  position:absolute; right:0; top:100%; margin-top:10px; width:260px; background:rgba(0,0,0,.96); border:1px dashed var(--o);
  color:var(--t); padding:10px; font-size:.7rem; line-height:1.5; opacity:0; pointer-events:none; transform:translateY(-6px);
  transition:opacity .2s ease 1.5s, transform .2s ease 1.4s; cursor:pointer; box-shadow:0 20px 40px rgba(0,0,0,.32);
}
.talker:hover .aura-btn,
.talker:focus-within .aura-btn,
body:has(.hero-face:hover) .aura-btn {
  opacity:1; pointer-events:auto; transform:none;
  transition-delay:0s;
}

/* layout */
main { width:min(1120px, calc(100% - 32px)); margin:0 auto; }
section { padding:90px 0; }
h2 {
  font:700 clamp(1.6rem,4.5vw,3rem)/1.2 var(--px); color:var(--o); text-transform:uppercase; text-align:center;
  letter-spacing:.04em; margin-bottom:42px; text-shadow:3px 3px 0 rgba(58,18,10,.8);
}

.pbtn {
  display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px;
  background:var(--o); color:#fff; border:1px dashed rgba(255,210,193,.9);
  font:700 .76rem/1.2 var(--mono); letter-spacing:.09em; text-transform:uppercase; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow:0 8px 20px rgba(217,72,43,.16), inset 0 1px 0 rgba(255,255,255,.12);
}
.pbtn:hover {
  transform:translateY(-2px); background:var(--o2); border-color:#ffc1a9;
  box-shadow:0 12px 24px rgba(217,72,43,.24), inset 0 1px 0 rgba(255,255,255,.16);
}
.pbtn:focus-visible { outline:2px solid var(--o2); outline-offset:4px; }
.pbtn:active { transform:translateY(0); box-shadow:0 4px 10px rgba(217,72,43,.14); }
.pbtn.dark {
  background:rgba(16,16,16,.94); color:var(--t); border-color:rgba(255,255,255,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.pbtn.dark:hover { background:#19110f; color:var(--o2); border-color:rgba(255,106,61,.78); }

/* hero */
.hero {
  position:relative; min-height:calc(100vh - 200px); display:flex; align-items:center; justify-content:space-between;
  gap:40px; padding-top:18px; padding-bottom:18px;
}
.hero::before {
  content:""; position:absolute; inset:8% 4% auto auto; width:300px; height:300px;
  background:radial-gradient(circle, rgba(255,106,61,.28), transparent 60%); filter:blur(26px); pointer-events:none;
}
.hero-text { max-width:620px; }
.hero h1 {
  font:700 clamp(2.6rem,7vw,5rem)/1.05 var(--px); margin-bottom:22px; text-shadow:4px 4px 0 rgba(58,18,10,.8);
  letter-spacing:.04em;
}
.hero p {
  font-weight:700; font-size:1.06rem; margin-bottom:6px; color:rgba(255,255,255,.82);
}
.hero-buttons { display:flex; gap:12px; flex-wrap:wrap; margin-top:30px; }
.hero-figure { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; }
.speech {
  position:relative; background:rgba(255,255,255,.96); color:#000; border:3px double #999; padding:10px 18px;
  font:700 .72rem/1.6 var(--mono); letter-spacing:.08em; text-align:center; max-width:520px;
  box-shadow:0 18px 40px rgba(0,0,0,.23), inset 0 1px 0 rgba(255,255,255,.7); overflow:hidden; white-space:nowrap;
}
.speech::after {
  content:""; position:absolute; left:50%; bottom:-12px; border:6px solid transparent; border-top:6px solid #fff; border-bottom:0;
  transform:translateX(-50%);
}
.hero-face {
  width:min(280px,60vw); height:min(280px,60vw); object-fit:contain; filter:drop-shadow(0 0 40px rgba(217,72,43,.45));
  animation:bob 3.4s ease-in-out infinite; transition:transform .2s ease, filter .2s ease;
}
.hero-figure:hover .hero-face {
  transform:none; filter:drop-shadow(0 0 52px rgba(217,72,43,.55));
}
@keyframes bob { 50% { transform:translateY(-10px); } }

@keyframes blinkCursor {
  0%, 49% { border-color: transparent; }
  50%, 100% { border-color: currentColor; }
}

.typewriter {
  display: inline-block; position: relative; white-space: nowrap; overflow: hidden; border-right: 2px solid currentColor;
  animation: blinkCursor .8s step-end infinite;
}

/* about */
.terminal {
  border:1px solid rgba(217,72,43,.9); background:linear-gradient(180deg, rgba(16,16,16,.86), rgba(7,7,7,.96));
  box-shadow:0 22px 46px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.02);
}
.term-bar {
  padding:8px 12px; font:700 .62rem var(--mono); color:var(--o); border-bottom:1px solid rgba(217,72,43,.8);
  letter-spacing:.1em; background:rgba(255,255,255,.02);
}
.cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:14px; }
.card {
  border:1px solid rgba(217,72,43,.8); background:linear-gradient(180deg, rgba(22,22,22,.92), rgba(11,11,11,.96));
  padding:14px 16px; transition:.2s ease;
}
.card.wide { grid-column:1/-1; }
.card:hover {
  border-color:rgba(255,255,255,.7); box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 14px 28px rgba(217,72,43,.15);
  transform:translateY(-2px);
}
.card h3 {
  display:flex; align-items:center; gap:8px; font:700 .68rem var(--mono); color:var(--o); text-transform:uppercase;
  letter-spacing:.06em; padding-bottom:6px; margin-bottom:8px; border-bottom:1px solid rgba(217,72,43,.8);
}
.card h3 i {
  font-style:normal; background:linear-gradient(135deg, var(--o), #ff8d68); color:#091010; padding:1px 5px; font-size:.6rem;
  box-shadow:0 0 12px rgba(217,72,43,.2);
}
.card p { font-size:.78rem; font-weight:700; }
.card a { background:var(--o); color:#000; padding:0 6px; margin-left:4px; font-size:.68rem; }
.findme {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:12px 14px; border-top:1px solid rgba(217,72,43,.8);
  background:rgba(255,255,255,.015);
}
.findme span { color:var(--o); font:700 .62rem var(--mono); letter-spacing:.1em; margin-right:6px; }
.findme a {
  border:1px solid rgba(217,72,43,.9); padding:5px 14px; font:700 .62rem var(--mono); text-transform:uppercase;
  letter-spacing:.08em; transition:.15s; background:rgba(0,0,0,.18);
}
.findme a:hover { background:var(--o); color:#000; }

/* experience */
.timeline {
  position:relative; display:grid; grid-template-columns:150px 1fr; gap:0 36px; max-width:900px; margin:0 auto;
}
.timeline::before { content:""; position:absolute; left:75px; top:0; bottom:0; border-left:2px dashed rgba(217,72,43,.75); opacity:.8; }
.level {
  position:relative; display:flex; flex-direction:column; align-items:center; align-self:start; gap:6px; margin:40px 0 0;
  background:#000; z-index:1;
}
.level b {
  width:24px; height:24px; border:2px solid var(--o); color:var(--o); display:grid; place-items:center; font-size:.9rem;
  background:rgba(10,10,10,.9); box-shadow:0 0 14px rgba(217,72,43,.18);
}
.level span {
  border:2px solid var(--o); color:var(--o); background:rgba(0,0,0,.9); padding:10px 22px; font:700 .72rem var(--mono);
  letter-spacing:.14em; text-transform:uppercase; box-shadow:0 8px 16px rgba(0,0,0,.15);
}
.xp {
  border:2px solid rgba(217,72,43,.85); background:linear-gradient(180deg, rgba(18,18,18,.95), rgba(9,9,9,.98));
  padding:26px 30px; margin-bottom:24px; transition:.2s ease; box-shadow:0 12px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02);
}
.xp:hover {
  box-shadow:8px 8px 0 rgba(217,72,43,.30), 0 24px 50px rgba(0,0,0,.22); transform:translateY(-2px);
}
.xp header { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.xp h3 { font:700 1.5rem var(--px); color:var(--o); text-transform:uppercase; }
.xp time { font:700 .78rem var(--mono); color:var(--mut); text-transform:uppercase; letter-spacing:.06em; }
.at { font-weight:700; text-transform:uppercase; margin-bottom:12px; }
.xp p:not(.at) { font-size:.88rem; max-width:70ch; }
.chips,.pchips { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chips span {
  background:linear-gradient(135deg, var(--o), #ff8d68); color:#0a0a0a; padding:4px 12px; font:700 .62rem var(--mono);
  letter-spacing:.08em; text-transform:uppercase; box-shadow:0 8px 18px rgba(217,72,43,.18);
}

/* projects */
.pgrid { display:grid; grid-template-columns:repeat(2,1fr); gap:22px; }
.pcard {
  border:1px solid rgba(217,72,43,.8); background:linear-gradient(180deg, rgba(20,20,20,.94), rgba(10,10,10,.98));
  min-width:0; padding:22px; display:flex; flex-direction:column; gap:14px; transition:.2s ease; box-shadow:0 18px 36px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02);
}
.pcard:hover {
  transform:translateY(-4px); box-shadow:0 12px 0 rgba(217,72,43,.32), 0 20px 42px rgba(0,0,0,.24);
}
.ptype {
  align-self:flex-start; border:1px solid rgba(217,72,43,.8); color:var(--o); padding:2px 8px; font:700 .55rem var(--mono);
  letter-spacing:.1em; text-transform:uppercase; background:rgba(217,72,43,.04);
}
.pcard h3 {
  overflow-wrap:anywhere; font:700 clamp(1.05rem,2vw,1.5rem)/1.2 var(--px); color:var(--o); text-transform:uppercase; padding-top:10px; border-top:1px solid rgba(217,72,43,.8);
}
.pchips { margin:0; }
.pchips span {
  border:1px solid rgba(255,255,255,.18); padding:2px 8px; font-size:.62rem; font-weight:700; background:rgba(255,255,255,.02);
}
.pcard p { overflow-wrap:anywhere; font-size:.82rem; flex:1; }
.plinks { display:flex; gap:16px; flex-wrap:wrap; }
.plinks .pbtn { min-height:42px; padding:10px 16px; }
.project-more { display:flex; justify-content:center; margin-top:28px; }
.pcard.project-extra {
  max-height:600px;
  opacity:1;
  transform:translateY(0);
  overflow:hidden;
  transition:max-height .35s ease, opacity .28s ease, transform .35s ease, padding .35s ease, border-width .35s ease;
}
.pcard.project-extra.project-hidden {
  max-height:0;
  opacity:0;
  padding-top:0;
  padding-bottom:0;
  border-top-width:0;
  border-bottom-width:0;
  transform:translateY(-12px);
  pointer-events:none;
}

/* skill tree */
.tree { display:flex; flex-direction:column; align-items:center; gap:0; }
.hex {
  position:relative; width:104px; height:118px; background:linear-gradient(135deg, var(--o), #ff8d68); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  transition:.15s; flex:none; box-shadow:0 14px 26px rgba(217,72,43,.18);
}
.hex span {
  position:absolute; inset:3px; background:#0a0a0a; clip-path:inherit; display:grid; place-items:center; padding:0 10px;
  text-align:center; font:700 .6rem/1.3 var(--mono); text-transform:uppercase; letter-spacing:.04em;
}
.hex:hover { background:#fff; transform:scale(1.08); }
.root { background:#fff; }
.root::after,.branches::before { content:""; }
.branches {
  position:relative; display:flex; justify-content:center; gap:70px; padding-top:34px; margin-top:0;
}
.branches::before {
  position:absolute; top:0; left:calc(50% - 150px); width:300px; height:34px; border:2px dashed rgba(217,72,43,.75); border-bottom:0;
}
.branch { display:flex; flex-direction:column; align-items:center; }
.branch i { width:0; height:30px; border-left:2px dashed rgba(217,72,43,.75); }

/* contact */
form { width:min(620px,100%); margin:0 auto; display:grid; gap:14px; }
input,textarea {
  width:100%; background:rgba(0,0,0,.9); border:2px dashed rgba(217,72,43,.9); color:#fff; padding:14px;
  font-weight:700; font-size:.8rem; letter-spacing:.06em; box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
input::placeholder,textarea::placeholder { color:#777; }
textarea { min-height:150px; resize:vertical; }
input:focus,textarea:focus { outline:none; border-style:solid; border-color:#fff; }
form button { justify-self:start; }

/* footer */
footer {
  border-top:3px solid rgba(217,72,43,.9); background:linear-gradient(180deg, rgba(12,12,12,.85), rgba(6,6,6,1));
  padding:36px 20px 44px; box-shadow:0 -20px 40px rgba(0,0,0,.15);
}
.flinks {
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 36px; padding-bottom:22px; border-bottom:1px solid rgba(255,255,255,.08);
  max-width:900px; margin:0 auto 22px;
}
.flinks a {
  display:inline-flex; align-items:center; gap:9px; min-height:36px; font:700 .78rem var(--mono);
  transition:color .15s ease, transform .15s ease;
}
.flinks a img { width:24px; height:24px; flex:0 0 24px; object-fit:contain; }
.flinks a:hover { color:var(--o2); transform:translateY(-1px); }
footer p { text-align:center; color:#666; font-size:.7rem; }

.reveal {
  opacity: 0; transform: translateY(24px) scale(.98); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
}
.reveal-delay-1 { transition-delay:70ms; }
.reveal-delay-2 { transition-delay:140ms; }
.reveal-delay-3 { transition-delay:210ms; }
.reveal-delay-4 { transition-delay:280ms; }
.reveal-delay-5 { transition-delay:350ms; }
.reveal-delay-6 { transition-delay:420ms; }
.reveal-delay-7 { transition-delay:490ms; }
.reveal-delay-8 { transition-delay:560ms; }
.reveal-delay-9 { transition-delay:630ms; }

.reveal.visible {
  opacity: 1; transform: translateY(0) scale(1);
}

.hero.reveal {
  opacity: 0; transform: translateY(34px) scale(.985);
}

.hero.reveal.visible {
  opacity: 1; transform: translateY(0) scale(1);
}

@media (min-width:861px) and (max-width:1100px) {
  .topbar { gap:10px; padding-right:22px; padding-left:22px; }
  .tabs { gap:4px; }
  .tab { min-height:32px; padding:6px 7px; font-size:.51rem; }
  .talker { gap:7px; }
  .bubble { width:clamp(185px,24vw,260px); min-height:58px; padding:8px 9px; font-size:.68rem; }
}
@media (min-width:1101px) {
  .pgrid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .pcard { grid-column:span 2; }
  .pcard.project-extra:nth-last-child(3) { grid-column:1 / span 2; }
  .pcard.project-extra:nth-last-child(2) { grid-column:3 / span 2; }
  .pcard.project-extra:last-child { grid-column:5 / span 2; }
  .pcard { padding:18px; }
  .plinks .pbtn { width:100%; }
}
@media (max-width:860px) {
  .hero { flex-direction:column-reverse; text-align:left; align-items:flex-start; }
  .pgrid,.cards { grid-template-columns:1fr; }
  .timeline { grid-template-columns:1fr; }
  .timeline::before { display:none; }
  .level { flex-direction:row; margin:20px 0 10px; }
  .branches { flex-direction:column; align-items:center; gap:30px; padding-top:0; }
  .branches::before { display:none; }
  .topbar {
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 12px; min-height:104px; padding:14px 18px;
  }
  .topbar.scrolled { min-height:96px; padding-top:10px; padding-bottom:10px; }
  .talker { grid-column:1; grid-row:1; width:100%; gap:8px; }
  .talker-copy { gap:4px; }
  .brand-name { font-size:.47rem; }
  .bubble { width:100%; min-width:0; min-height:60px; height:auto; padding:9px 10px; font-size:.64rem; overflow:visible; }
  .nav-toggle {
    grid-column:2; grid-row:1;
    display:flex;
    font:700 .58rem/1 var(--px); letter-spacing:.08em; cursor:pointer;
  }
  .nav-toggle-label { transition:color .18s ease; }
  .nav-toggle:hover .nav-toggle-label, .topbar.menu-open .nav-toggle-label { color:var(--o2); }
  .nav-toggle-icon { position:relative; width:14px; height:10px; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
  .nav-toggle-icon::after {
    content:""; position:absolute; top:4px; left:0; right:0; border-top:1px solid currentColor; transition:transform .2s ease;
  }
  .tabs {
    grid-column:1 / -1; grid-row:2; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px;
    max-height:0; overflow:hidden; visibility:hidden; opacity:0; padding-top:0;
    transition:max-height .24s ease, opacity .18s ease, padding-top .24s ease, visibility .24s;
  }
  .topbar.menu-open .nav-toggle-icon { border-bottom-color:transparent; }
  .topbar.menu-open .nav-toggle-icon::after { transform:rotate(45deg); }
  .topbar.menu-open .tabs { max-height:150px; visibility:visible; opacity:1; padding-top:8px; }
  .tab { min-height:34px; padding:6px 4px; font-size:.5rem; }
  .aura-btn { right:0; }
}
@media (max-width:480px) {
  .topbar { padding-right:14px; padding-left:14px; }
  .brand-name { font-size:.43rem; }
  .bubble { width:100%; min-height:58px; padding:8px 9px; font-size:.58rem; }
  .tabs { gap:4px; }
  .tab { min-height:32px; padding:5px 2px; font-size:.45rem; }
  .nav-toggle { font-size:.54rem; }
  .flinks { gap:12px 20px; }
  .flinks a { font-size:.7rem; }
}
@media (max-width:768px) {
  .avatar,
  .avatar:hover,
  .avatar:active { width:72px; height:72px; flex-basis:72px; }
  .avatar img,
  .avatar:hover img,
  .avatar:active img,
  .talking .avatar img {
    width:72px; height:72px; min-width:72px; max-width:72px;
  }
  .hero-face { width:min(220px,60vw); height:min(220px,60vw); }
  .flinks a img { width:22px; height:22px; flex-basis:22px; }
}
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition-duration:0s !important; scroll-behavior:auto !important; }
}