:root{
  --bg0:#050505;
  --bg1:#0A0A0A;
  --card:rgba(0,0,0,0.55);
  --card2:rgba(0,0,0,0.72);
  --border:rgba(255,255,255,0.10);
  --text:#F5F7FA;
  --muted:rgba(245,247,250,0.72);
  --muted2:rgba(245,247,250,0.55);
  --accent:#22D3EE;
  --shadow: 0 18px 55px rgba(0,0,0,0.45);
  --radius:22px;
  --radius2:16px;
  --navH: 76px;
  --gutter: clamp(16px, 4vw, 84px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(900px 520px at 80% 20%, rgba(34,211,238,0.10), transparent 62%),
    linear-gradient(180deg, var(--bg0), #000 70%);
  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
a.link{color:var(--text); text-decoration:underline; text-decoration-color: rgba(255,255,255,0.25); text-underline-offset: 4px;}
a.link:hover{opacity:.9}

.canvas-bg{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.82;
  filter: saturate(1.05) contrast(1.02);
}

/* ===== Index-only blended hero portrait (sits behind content, above page background) ===== */
.hero-portrait-bg{
  position:absolute;
  top: var(--navH);
  right: 0;
  height: calc(100vh - var(--navH));
  width: min(58vw, 900px);
  background: url("../img/hero.jpg") 70% 35% / cover no-repeat;
  z-index:0;
  pointer-events:none;
  opacity: 0.96;
  filter: contrast(1.06) saturate(1.05);
  -webkit-mask-image: radial-gradient(85% 95% at 55% 35%, #000 62%, transparent 100%);
          mask-image: radial-gradient(85% 95% at 55% 35%, #000 62%, transparent 100%);
}
.hero-portrait-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 70% at 55% 25%, rgba(0,0,0,0) 42%, rgba(0,0,0,0.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.20) 55%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}

.page{
  position:relative;
  z-index:2;
  min-height:100vh;
}

.container{
  width:100%;
  margin:0 auto;
  padding: 0 var(--gutter);
}

.nav{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background: rgba(0,0,0,0.55);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-inner{
  height: var(--navH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 240px;
}
.avatar{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  object-fit: cover;
}
.brand-name{
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.86rem;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255,255,255,0.92);
}

.nav-links{
  display:flex;
  align-items:center;
  gap: 10px;
}
.nav-links a{
  color: rgba(255,255,255,0.68);
  font-weight: 600;
  font-size: 0.80rem;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}
.nav-links a.active, .nav-links a:hover{
  color: rgba(255,255,255,0.95);
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.92);
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor:pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{transform: translateY(-1px); background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.20);}
.btn-accent{
  border-color: rgba(34,211,238,0.55);
  background: rgba(34,211,238,0.10);
}
.btn-accent:hover{background: rgba(34,211,238,0.14); border-color: rgba(34,211,238,0.70);}
.btn-ghost{ background: rgba(255,255,255,0.01); }
.btn-sm{height:34px; padding:0 12px; border-radius:999px; font-size:0.80rem}

.nav-cta{display:flex; align-items:center; gap: 10px;}
.hamburger{
  display:none;
  width:44px;
  height:44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
}
.hamburger:before{
  content:"";
  display:block;
  width:18px; height:2px;
  background: rgba(255,255,255,0.92);
  margin:0 auto;
  box-shadow: 0 6px 0 rgba(255,255,255,0.92), 0 -6px 0 rgba(255,255,255,0.92);
  opacity:.9;
}

.dropdown{ position:relative; }
.dropdown-toggle{ display:inline-flex; align-items:center; gap:8px; }
.dropdown-menu{
  position:absolute;
  right:0;
  top: 48px;
  min-width: 220px;
  padding: 10px;
  background: rgba(0,0,0,0.88);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  box-shadow: var(--shadow);
  display:none;
}
.dropdown.open .dropdown-menu{display:block;}
.dropdown-menu a{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,0.70);
}
.dropdown-menu a:hover{
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
}

.mobile-drawer{
  display:none;
  position:fixed;
  inset:0;
  z-index:60;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(8px);
}
.mobile-panel{
  position:absolute;
  right: 12px;
  left: 12px;
  top: 12px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.88);
  padding: 14px;
  box-shadow: var(--shadow);
}
.mobile-panel .row{display:flex; align-items:center; justify-content:space-between; gap: 12px;}
.mobile-links{ margin-top: 12px; display:grid; gap: 8px; }
.mobile-links a{
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
}
.mobile-links a:hover{background: rgba(255,255,255,0.05);}

@media (max-width: 980px){
  .nav-links{display:none;}
  .hamburger{display:inline-flex;}
}

.hero{ padding: 70px 0 34px; }
.hero-grid{
  display:grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 26px;
  align-items:start;
}
@media (max-width: 980px){
  .hero{ padding: 54px 0 26px; }
  .hero-grid{grid-template-columns: 1fr;}
}

/* ===== Home hero (reference-style layout) ===== */
.hero.hero-splash{
  padding: 22px 0 36px;
  min-height: calc(100vh - var(--navH));
  display:flex;
  align-items:center;
}
.hero-splash-grid{
  width:100%;
  display:grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:end;
}
.hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 10px;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,0.68);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.78rem;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.hero-stats{
  display:flex;
  gap: clamp(14px, 2vw, 22px);
  flex-wrap:wrap;
}
.stat{
  display:flex;
  flex-direction:column;
  gap: 2px;
  padding: 6px 2px;
}
.stat-num{
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.92);
}
.stat-label{
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
}

.hero-hello{
  margin: 8px 0 8px;
  font-size: clamp(4.2rem, 10vw, 9.2rem);
  line-height: 0.86;
  letter-spacing: -0.06em;
  font-weight: 900;
  text-transform: none;
}
.hero-name{
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.02em;
}
.hero-name-strong{ color: rgba(255,255,255,0.92); font-weight: 900; }
.hero-scroll{
  margin-top: 18px;
  color: rgba(255,255,255,0.60);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

/* Desktop uses the blended background portrait (.hero-portrait-bg). */
.hero-right-mobile{ display:none; }
.hero-portrait-inline{
  width:100%;
  height: min(62vh, 440px);
  object-fit: cover;
  object-position: 70% 35%;
  border-radius: calc(var(--radius) + 6px);
  filter: contrast(1.06) saturate(1.05);
  -webkit-mask-image: radial-gradient(85% 100% at 55% 35%, #000 70%, transparent 100%);
          mask-image: radial-gradient(85% 100% at 55% 35%, #000 70%, transparent 100%);
}

.portrait{
  position:relative;
  height: min(74vh, 680px);
  border-radius: calc(var(--radius) + 6px);
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: radial-gradient(90% 70% at 60% 25%, rgba(34,211,238,0.10), transparent 65%), rgba(0,0,0,0.35);
  box-shadow: var(--shadow);
}
.portrait::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.55) 100%);
  pointer-events:none;
}
.portrait::after{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(60% 60% at 65% 20%, rgba(0,0,0,0.05), rgba(0,0,0,0.65));
  pointer-events:none;
}
.portrait img{
  width:100%;
  height:100%;
  object-fit: cover;
  object-position: 70% 35%;
  filter: contrast(1.06) saturate(1.05);
}

@media (max-width: 980px){
  .hero.hero-splash{ min-height: auto; padding: 34px 0 20px; }
  .hero-splash-grid{ grid-template-columns: 1fr; align-items:start; }
  .hero-top{ flex-direction:column; align-items:flex-start; }
  .hero-kicker{ white-space: normal; }
  .hero-portrait-bg{ display:none; }
  .hero-right-mobile{ display:block; margin-top: 18px; }
}
@media (max-width: 520px){
  .hero-portrait-inline{ height: 360px; }
}

.kbd{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size:0.78rem;
}
.kbd-dot{
  width:7px; height:7px;
  border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 18px rgba(34,211,238,0.55);
}

.h1{
  font-size: clamp(2.6rem, 6.2vw, 6.2rem);
  line-height: 0.95;
  margin: 14px 0 18px 0;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  font-weight: 800;
}
.sub{
  color: rgba(255,255,255,0.72);
  font-size: 1.05rem;
  line-height:1.8;
  margin: 0 0 18px 0;
  max-width: 76ch;
}

.actions{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 18px;}

.card{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.46);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0,0,0,0.25);
  backdrop-filter: blur(10px);
}
.card.pad{padding: 18px;}
.card h3{margin:0 0 10px 0}

.muted{color: rgba(255,255,255,0.72);}
.small{font-size:0.92rem; color: rgba(255,255,255,0.56); line-height:1.65}

.badge{
  display:inline-flex;
  align-items:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.70);
  font-weight: 800;
  font-size:0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pills{display:flex; flex-wrap:wrap; gap: 8px;}
.hr{height:1px; background: rgba(255,255,255,0.08); margin: 16px 0;}

.section{ padding: 34px 0; }
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap: 18px;
  margin-bottom: 16px;
}
.section-title{
  font-size: clamp(1.2rem, 1.8vw, 2.0rem);
  margin:0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.section-note{color: rgba(255,255,255,0.62); font-size:0.95rem; margin:10px 0 0 0;}

.grid{ display:grid; gap: 14px; }
.grid.cols-2{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid.cols-3{grid-template-columns: repeat(3, minmax(0,1fr));}
@media (max-width: 980px){
  .grid.cols-2, .grid.cols-3{grid-template-columns: 1fr;}
}

.cards{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
}
@media (max-width: 520px){
  .cards{ grid-template-columns: 1fr; }
}

.item-title{font-weight: 900; margin:0 0 10px 0; letter-spacing:-0.01em;}
.list{margin:0; padding-left: 18px; color: rgba(255,255,255,0.66); line-height:1.7;}
.list li{margin: 6px 0;}
.pub-actions{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 12px;}

.searchbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
}
.searchbar input{
  border:0; outline:0;
  width:100%;
  background:transparent;
  color: rgba(255,255,255,0.90);
  font-size: 0.95rem;
}
.chips{display:flex; flex-wrap:wrap; gap: 8px; margin-top:12px;}
.chip{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.70);
  padding: 9px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 0.76rem;
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.chip.active, .chip:hover{
  color: rgba(255,255,255,0.95);
  border-color: rgba(34,211,238,0.55);
  background: rgba(34,211,238,0.10);
}

.footer{
  padding: 34px 0 44px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.20);
  margin-top: 40px;
}
.footer .row{
  display:flex; 
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* ===== Card reveal animation (scroll pop-up) ===== */
.card{
  transform: translateZ(0); /* smoother transforms */
  will-change: transform, opacity, filter;
}

/* Initial hidden state */
.card.reveal{
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  filter: blur(10px);
}

/* When visible */
.card.reveal.in{
  animation: cardPop 820ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--delay, 0ms);
}

/* Ultra-dynamic pop (overshoot) */
@keyframes cardPop{
  0%   { opacity: 0; transform: translateY(28px) scale(0.985); filter: blur(10px); }
  55%  { opacity: 1; transform: translateY(-10px) scale(1.015); filter: blur(2px); }
  80%  { opacity: 1; transform: translateY(3px) scale(0.995);  filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0px) scale(1);      filter: blur(0px); }
}

/* ===== Hover micro-interactions ===== */
.card{
  transition: transform 260ms cubic-bezier(.2, .9, .2, 1),
              border-color 260ms ease,
              box-shadow 260ms ease,
              background 260ms ease;
}

.card:hover{
  transform: translateY(-6px) scale(1.01);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}

/* Subtle glow ring on hover */
.card:hover::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(34,211,238,0.22), 0 0 36px rgba(34,211,238,0.10);
  opacity: 1;
}
.card{ position:relative; overflow:hidden; }
.card::after{ opacity:0; transition: opacity 260ms ease; }

/* Reduce motion accessibility */
@media (prefers-reduced-motion: reduce){
  .card.reveal{ opacity:1; transform:none; filter:none; }
  .card.reveal.in{ animation:none; }
  .card{ transition:none; }
}