/* =========================================================
   MENEGATE.DEV – PORTFÓLIO
   app.css (dark padrão • light via data-theme)
   - Consolidado (sem patches que se anulam)
   - Glow/gradientes controlados (sem “carnaval”)
   ========================================================= */

/* =========================
   TOKENS
   ========================= */
:root{
  --bg: #0b0d12;

  --surface: rgba(255,255,255,.06);
  --surface2: rgba(255,255,255,.09);

  --text: #e8eaf0;
  --muted: rgba(232,234,240,.72);

  --accent: #0b8638;
  --accent2: #10b964;

  --accent-rgb: 11 134 56;
  --accent2-rgb: 16 185 100;

  --radius: 18px;
  --shadow: 0 18px 60px rgba(0,0,0,.45);

  /* ring mais contido */
  --ring: 0 0 0 1px rgb(255 255 255 / .10),
          0 0 0 5px rgb(var(--accent-rgb) / .16);

  --max: clamp(1100px, 86vw, 1320px);
}

html[data-theme="light"]{
  --bg: #f7f8fb;

  --surface: rgba(12,18,28,.06);
  --surface2: rgba(12,18,28,.09);

  --text: #0c121c;
  --muted: rgba(12,18,28,.70);

  --shadow: 0 18px 60px rgba(0,0,0,.10);

  --ring: 0 0 0 1px rgb(12 18 28 / .12),
          0 0 0 5px rgb(var(--accent-rgb) / .16);
}
/* =========================
   RESET / BASE
   ========================= */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ overflow-x:hidden; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  isolation: isolate;
}

/* Glow de fundo: suave e fixo (sem blend maluco) */
body::before{
  content:"";
  position: fixed;
  inset: -16%;
  z-index: -2;
  pointer-events:none;
  opacity: .55;
  background:
    radial-gradient(1000px 720px at 18% 16%, rgb(var(--accent-rgb) / .12), transparent 60%),
    radial-gradient(900px 650px at 84% 18%,  rgb(var(--accent2-rgb) / .09), transparent 62%),
    radial-gradient(900px 650px at 70% 88%,  rgb(var(--accent-rgb) / .07), transparent 60%);
  filter: saturate(1.08);
  transform: translate3d(0,0,0);
}

/* Granulado: bem discreto */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events:none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

a{ color: inherit; text-decoration:none; }
button, input, select{ font: inherit; }
button{ background: none; border: 0; padding: 0; }

:focus-visible{
  outline: none;
  box-shadow: var(--ring);
  border-radius: 14px;
}

.container{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; }

.section{ padding: 92px 0; position: relative; }
.section-head{ margin-bottom: 18px; }
.section-head h2{ margin:0 0 6px; font-size: clamp(26px, 2.6vw, 38px); }
.muted{ color: var(--muted); }
.small{ font-size: 13px; }

.section-head h2{
  position: relative;
  display: inline-block;
  padding-bottom: 8px;
}
.section-head h2::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(170px, 52%);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / .95), rgb(var(--accent2-rgb) / .65));
}

/* espaço pro dock no desktop */
.main{ padding-left: 110px; }
@media (max-width: 980px){
  .main{ padding-left: 0; }
  .container{ width: min(var(--max), calc(100% - 28px)); }
}
/* =========================
   GLASS / UI
   ========================= */
.glass{
  background: linear-gradient(180deg, var(--surface), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}
.card{ border-radius: var(--radius); padding: 18px; }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
  position: relative;
  overflow: hidden;
}
.btn:hover{ transform: translateY(-1px); box-shadow: var(--ring); }
.btn.primary{
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .92), rgb(var(--accent2-rgb) / .24));
  border-color: rgb(var(--accent-rgb) / .34);
}
.btn.ghost{ background: transparent; }
.btn.small{ padding: 10px 12px; border-radius: 12px; font-size: 14px; }
.btn.icon{ width: 44px; height: 44px; justify-content:center; padding:0; }

.badge{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

.chip{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 8px 10px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  font-size: 13px;
  color: var(--muted);
}
.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 14px; }

.field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 10px; }
.field label{ font-size: 13px; color: var(--muted); }
.field input, .field select{
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  outline: none;
}
.field input:focus, .field select:focus{
  box-shadow: var(--ring);
  border-color: rgb(var(--accent-rgb) / .34);
}
/* =========================
   LAYOUT HELPERS
   ========================= */
.grid-2{ display:grid; grid-template-columns: 1.2fr .8fr; gap: 14px; }
.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px){ .cards{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px){
  .cards{ grid-template-columns: 1fr; }
  .grid-2{ grid-template-columns: 1fr; }
}
/* =========================
   UTILITIES / MICROCLASSES
   ========================= */
.mag{ position: relative; }

/* Quick-stats label */
.qk{ font-size: 12px; color: var(--muted); }

/* Tags cloud (About Pack) */
.stack-cloud{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
  font-size: 13px;
}

/* Chip variant used no About Pack 3 */
.chip2{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  font-size: 12px;
}

/* Respiro entre About e Journey */
.about-gap{ height: 18px; }

/* Skills (usado no About Pack 3) */
.skill{ margin: 10px 0; }
.skill-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  font-size: 13px;
}
.skill-bar{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  overflow: hidden;
  position: relative;
}
.skill-bar span{
  display:block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / .86), rgb(var(--accent2-rgb) / .46));
  transition: width 1.05s cubic-bezier(.2,.9,.2,1);
  will-change: width, filter, transform;
}
.skill-bar span::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.22),
    rgba(255,255,255,0));
  transform: translateX(-60%);
  animation: shimmer 1.8s linear infinite;
  mix-blend-mode: overlay;
}
.skill.is-on .skill-bar span{
  animation: barPulse 2.6s ease-in-out infinite;
}

@keyframes shimmer{ to { transform: translateX(60%); } }
@keyframes barPulse{
  0%,100%{ filter: drop-shadow(0 0 0 rgba(0,0,0,0)); transform: translateY(0); }
  50%{ filter: drop-shadow(0 0 10px rgb(var(--accent-rgb) / .25)); transform: translateY(-.5px); }
}
/* =========================
   FLOATING DOCK (sidebar)
   - FAB no topo
   - painel centralizado (desktop)
   ========================= */
.dock{
  position: fixed;
  left: 18px;
  top: 18px;
  bottom: 18px;
  width: 82px;
  z-index: 60;
  pointer-events: none;
}
@media (max-width: 980px){
  .dock{
    left: 12px; right: 12px; top: 12px; bottom: auto;
    width: auto;
  }
}

.dock-fab{
  pointer-events: auto;
  width: 56px; height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease;
  animation: floaty 4.2s ease-in-out infinite;
}
.dock-fab:hover{ transform: translateY(-2px); box-shadow: var(--ring); }

@keyframes floaty{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-4px); }
}

.hamb{ width: 18px; height: 14px; display:flex; flex-direction:column; justify-content:space-between; }
.hamb span{ height: 2px; border-radius: 2px; background: rgba(255,255,255,.85); }
html[data-theme="light"] .hamb span{ background: rgba(12,18,28,.85); }

.dock-panel{
  pointer-events: auto;
  width: 280px;
  position: absolute;
  left: 0;
  top: 72px;
  bottom: 0;
  padding: 14px;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface2), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
  transform-origin: top left;
  transform: scale(.98);
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.dock-panel > *{ position: relative; z-index: 1; }

/* decoração leve (sem screen blend) */
.dock-panel::before{
  content:"";
  position:absolute;
  inset: -1px;
  pointer-events:none;
  z-index: 0;
  opacity: .35;
  background:
    linear-gradient(135deg, rgb(var(--accent-rgb) / .22), rgb(var(--accent2-rgb) / .12), transparent 70%);
}

/* “spotlight” suave (se teu JS mexer em --mx/--my) */
.dock-panel::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  z-index: 0;
  opacity: .22;
  background: radial-gradient(240px 240px at var(--mx, 25%) var(--my, 18%),
    rgb(var(--accent-rgb) / .22), transparent 62%);
}

@media (max-width: 980px){
  .dock-panel{
    position: relative;
    top: 10px;
    bottom: auto;
    width: min(420px, calc(100vw - 24px));
    transform: none;
  }
}

/* fechado */
.dock[data-open="0"] .dock-panel{
  opacity: 0;
  transform: translateY(-8px) scale(.98);
  pointer-events: none;
}
.dock[data-open="0"]{ pointer-events: none; }
.dock[data-open="0"] .dock-fab{ pointer-events: auto; }

/* Desktop: centraliza SOMENTE o painel, mantendo FAB no topo */
@media (min-width: 981px){
  .dock-panel{
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) scale(.98);
    max-height: calc(100vh - 110px);
  }
  .dock[data-open="0"] .dock-panel{
    transform: translateY(calc(-50% - 8px)) scale(.98);
  }
}

.brand{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius: 14px; }
.brand-logo{
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  box-shadow: 0 8px 22px rgba(0,0,0,.30);
}
.dot{ width:12px; height:12px; border-radius: 99px; background: var(--accent); box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / .14); }
.glow{ box-shadow: 0 0 16px rgb(var(--accent-rgb) / .38), 0 0 0 6px rgb(var(--accent-rgb) / .14); }
.brand-txt{ font-weight: 750; letter-spacing: .2px; }

.now{
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.now-sec{ font-weight: 780; letter-spacing: .2px; }
.now-pct{
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}

/* Rail + Nav */
.dock-navwrap{
  margin-top: 2px;
  display:grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  align-items: start;
  flex: 1;
  overflow: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.dock-navwrap::-webkit-scrollbar{ width: 8px; }
.dock-navwrap::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border-radius: 99px;
}

.dock-rail{ position: relative; height: 100%; }
.rail-line{
  position:absolute; left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 99px;
  background: linear-gradient(to bottom,
    rgb(var(--accent-rgb) / 0),
    rgb(var(--accent-rgb) / .40),
    rgb(var(--accent2-rgb) / .28),
    rgb(var(--accent-rgb) / 0)
  );
  opacity: .9;
}

.rail-fill{
  position:absolute;
  left: 8px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(to bottom,
    rgb(var(--accent-rgb) / 0),
    rgb(var(--accent-rgb) / .80),
    rgb(var(--accent2-rgb) / .55)
  );
  transform-origin: top;
  transform: scaleY(0);
  opacity: .95;
}

.rail-dot{
  position:absolute;
  left: 4px;
  top: 10px;
  width: 10px; height: 10px;
  border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 14px rgb(var(--accent-rgb) / .45);
  transform: translateY(0);
  transition: transform .22s ease;
}

/* Nav com highlight deslizante */
.nav{
  position: relative;
  display:flex;
  flex-direction:column;
  gap: 6px;
  padding: 2px 0;
}

/* highlight (JS posiciona) */
.nav-active{
  position:absolute;
  left: 6px;
  right: 6px;
  height: 44px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .14), rgb(var(--accent2-rgb) / .08));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 0 0 5px rgb(var(--accent-rgb) / .10);
  transform: translateY(0);
  transition: transform .18s ease;
  pointer-events:none;
  opacity: 0;
}
#sideNav.js-ready .nav-active{ opacity: 1; }

.nav-item{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 14px;
  color: var(--muted);
  transition: transform .14s ease, color .14s ease, background .14s ease, filter .14s ease;
}
.nav-item i{ width: 18px; height: 18px; opacity: .92; }
.nav-item .label{ font-weight: 650; letter-spacing: .15px; }

.nav-item:hover{
  transform: translateX(2px);
  color: var(--text);
  background: rgba(255,255,255,.05);
  filter: saturate(1.06);
}

/* ativo não cria “segundo highlight” — quem manda é o nav-active */
#sideNav .nav-item.active{
  background: transparent;
  box-shadow: none;
  color: var(--text);
}

/* tooltip */
.nav-item::after{
  content: attr(data-tip);
  position:absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  backdrop-filter: blur(14px);
  color: var(--text);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events:none;
  transition: opacity .14s ease, transform .14s ease;
}
html[data-theme="light"] .nav-item::after{
  background: rgba(255,255,255,.80);
  color: #0c121c;
}
.nav-item:hover::after{
  opacity: 1;
  transform: translateY(-50%) translateX(2px);
}
@media (max-width: 980px){ .nav-item::after{ display:none; } }

.side-actions{
  margin-top: 4px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.accent{ display:flex; align-items:center; gap:10px; }
.accent label{ font-size: 13px; color: var(--muted); }
.accent input{ width: 44px; height: 28px; border: none; background: transparent; cursor:pointer; }

.dock-hint{ padding: 0 4px; }

/* =========================
   TOPBAR (Acesso rápido)
   ========================= */
.topbar{
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1600;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}

.topbar-fab{
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: radial-gradient(120px 80px at 20% -40%, rgba(var(--accent-rgb)/.35), transparent 60%),
              rgba(18,20,26,.85);
  color: var(--text);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  transition: transform .25s ease, opacity .25s ease, box-shadow .25s ease;
}
.topbar-fab:hover{ transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0,0,0,.45); }
.topbar-fab i{ width: 16px; height: 16px; }
.topbar-fab .chev{ width: 14px; height: 14px; opacity: .7; }

.topbar-modal{
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: start center;
  padding-top: 72px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.topbar-modal.open{
  opacity: 1;
  pointer-events: auto;
}
.topbar-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
}
.topbar-modal-box{
  position: relative;
  min-width: 320px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  z-index: 1;
  transform: translateY(-6px);
  transition: transform .2s ease;
}
.topbar-modal.open .topbar-modal-box{ transform: translateY(0); }
.topbar-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.topbar-title{
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.topbar-logo{
  width: 20px;
  height: 20px;
  border-radius: 6px;
  object-fit: contain;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
}
.topbar-actions{ display: flex; gap: 8px; flex-wrap: wrap; }

.topbar.hidden{
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  pointer-events: none;
}

@media (max-width: 620px){
  .topbar{ top: 10px; }
  .topbar-modal-box{ min-width: 240px; }
  .topbar-fab span{ display: none; }
}
/* =========================
   HERO
   ========================= */
.hero{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: clamp(92px, 10vh, 140px) 0;
  overflow: hidden;
}
@media (max-width: 980px){ .hero{ min-height: unset; } }

.hero-bg{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 520px at 18% 30%, rgb(var(--accent-rgb) / .16), transparent 62%),
    radial-gradient(760px 520px at 86% 14%, rgb(var(--accent2-rgb) / .12), transparent 65%);
  pointer-events:none;
  opacity: .9;
  z-index: 0;
}
.hero-noise{
  position:absolute; inset:0;
  pointer-events:none;
  opacity: .08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  z-index: 0;
}

/* garante que o conteúdo fique acima do bg/noise */
.hero-logo-bg{
  position: absolute;
  inset: -8% -5%;
  pointer-events: none;
  z-index: 0;
  opacity: .18;
  background: center / min(78vw, 980px) no-repeat url("../img/logo-recorte.png");
  filter: grayscale(1) brightness(.20) contrast(1.18);
  transform: translateY(2%);
}
@media (max-width: 980px){
  .hero-logo-bg{
    inset: -4% -30%;
    background-size: min(130vw, 760px);
    opacity: .16;
  }
}

.hero .container{ position: relative; z-index: 1; }

.welcome-shell{
  border-radius: 28px;
  padding: clamp(18px, 2.2vw, 32px);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  position: relative;
  overflow: hidden;
}

/* brilho “vivo” dentro do shell */
.welcome-shell::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(420px 260px at var(--mx, 60%) var(--my, 30%),
    rgb(var(--accent-rgb)/.14), transparent 60%);
  opacity: .0;
  transition: opacity .25s ease;
  pointer-events:none;
}
.welcome-shell:hover::before{ opacity: .9; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
}
@media (min-width: 1280px){
  .hero-grid{ grid-template-columns: 1.35fr .65fr; }
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; }
}

.hero-left{
  position: relative;
}
.hero-left > *{ position: relative; z-index: 1; }

/* “aura” sutil na coluna esquerda */
.hero-left::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius: 24px;
  background:
    radial-gradient(520px 320px at 18% 28%, rgb(var(--accent-rgb)/.18), transparent 60%),
    radial-gradient(520px 320px at 72% 12%, rgb(var(--accent2-rgb)/.12), transparent 60%);
  opacity: 0;
  filter: blur(10px);
  transition: opacity .25s ease;
  pointer-events:none;
}
.hero-left:hover::after{ opacity: 1; }

.pill{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 14px;
  border-radius: 99px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  width: fit-content;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.pill:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / .24);
  background: rgba(255,255,255,.05);
}

.pulse{
  width: 9px; height: 9px; border-radius: 99px;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .42);
  animation: pulse 1.4s infinite;
}
@keyframes pulse{
  0% { box-shadow: 0 0 0 0 rgb(var(--accent-rgb) / .42); }
  100% { box-shadow: 0 0 0 14px rgb(var(--accent-rgb) / 0); }
}

.hero-title{
  margin: 12px 0 6px;
  font-size: clamp(44px, 3.8vw, 74px);
  line-height: 1.03;
  letter-spacing: -0.5px;
}
.hero-name{ display:inline-block; }
.hero-degree{
  display:inline-block;
  color: var(--text);
  text-shadow: 0 0 18px rgb(var(--accent-rgb) / .10);
}

/* linha do typed separada (mais “clean”) */
.hero-typedline{
  margin: 6px 0 10px;
  font-size: 15px;
  color: var(--muted);
}
.typed{
  color: var(--accent2);
  text-shadow: 0 0 18px rgb(var(--accent2-rgb) / .22);
}

.hero-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 12px;
}
.meta-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(232,234,240,.82);
  transition: transform .18s ease, border-color .18s ease;
}
.meta-pill i{ width: 16px; height: 16px; opacity: .9; }
.meta-pill:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--accent2-rgb) / .22);
}
.meta-pill.ghost{
  background: rgba(255,255,255,.02);
  color: var(--muted);
}

.lead{ font-size: 17px; max-width: 68ch; }

.cta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* chips com ícone + hover mais forte */
.chips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(232,234,240,.86);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.chip i{ width: 16px; height: 16px; opacity: .9; }
.chip:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / .28);
  box-shadow: 0 10px 26px rgba(0,0,0,.25), 0 0 0 6px rgb(var(--accent-rgb) / .08);
}

.hero-badges{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 16px;
}
@media (max-width: 640px){ .hero-badges{ grid-template-columns: 1fr; } }

.mini{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mini:hover{
  transform: translateY(-2px);
  border-color: rgb(var(--accent2-rgb) / .18);
  box-shadow: 0 16px 44px rgba(0,0,0,.30);
}
.mini-k{ font-size: 12px; color: var(--muted); }
.mini-v{ font-weight: 750; margin-top: 4px; }

.hero-right{ position: relative; }

.hero-card{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.hero-card:hover{
  border-color: rgb(var(--accent-rgb) / .22);
  box-shadow: 0 22px 70px rgba(0,0,0,.40);
}

.card-title{
  font-weight: 800;
  letter-spacing: .2px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  position: relative;
}
.shine{
  position:absolute;
  inset: -120% -60% auto auto;
  width: 240px; height: 240px;
  transform: rotate(25deg);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.14), transparent 55%);
  transition: transform .35s ease;
  pointer-events:none;
}
.hero-card:hover .shine{ transform: translate(-34px, 18px) rotate(25deg); }

.mini-list{
  list-style:none;
  padding:0;
  margin: 12px 0 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.mini-list li{
  display:flex;
  align-items:center;
  gap:10px;
  color: var(--muted);
}
.mini-list li i{ width: 18px; height: 18px; opacity: .95; }

.bar{ height: 1px; background: rgba(255,255,255,.10); margin: 14px 0; }

.quick-stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.qstat{
  border-radius: 16px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .18s ease, border-color .18s ease;
}
.qstat:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / .22);
}
.qv{ font-size: 22px; font-weight: 850; letter-spacing: -0.3px; }
.hero-tip{ margin-top: 12px; }

.orb{
  position:absolute;
  right: -18px;
  bottom: -16px;
  width: 170px;
  height: 170px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%,
    rgb(var(--accent2-rgb) / .28),
    rgb(var(--accent-rgb) / .18),
    transparent 62%);
  opacity: .55;
  animation: orb 5.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes orb{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-10px) scale(1.03); }
}
/* =========================
   ABOUT PACK – pequenos ajustes
   ========================= */
.ap3-kicker{ margin-bottom: 8px; }
.ap3-stat-k{ color: var(--muted); font-size: 12px; }
/* =========================
   ABOUT PACK 3 (bem distribuído)
   ========================= */
.about-pack3{
  padding: 18px;
  margin-bottom: 18px; /* <<< espaço antes da Trajetória */
}

/* topo */
.ap3-head{
  display:flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}

.ap3-avatar{
  width: 118px;  /* <<< maior */
  height: 118px;
  border-radius: 26px;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  box-shadow: 0 22px 70px rgba(0,0,0,.45);
}

/* ring girando (impacto real) */
.ap3-ring{
  position:absolute;
  inset: -22px;
  border-radius: 999px;
  background:
    conic-gradient(
      from 90deg,
      rgb(var(--accent-rgb) / .95),
      rgb(var(--accent2-rgb) / .85),
      rgb(var(--accent-rgb) / .95)
    );
  filter: blur(0px);
  opacity: .95;
  animation: apSpin 5.5s linear infinite;
}

.ap3-core{
  position:absolute;
  inset: 10px;
  border-radius: 20px;
  background:
    radial-gradient(closest-side at 30% 25%,
      rgba(255,255,255,.18),
      transparent 55%
    ),
    linear-gradient(135deg,
      rgba(255,255,255,.06),
      rgba(0,0,0,.30)
    );
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

@keyframes apSpin{
  to{ transform: rotate(360deg); }
}

.ap3-headtxt{ flex: 1; min-width: 0; }
.ap3-h3{ margin: 0 0 6px 0; }

.ap3-lead{
  margin: 0 0 10px 0;
  line-height: 1.6;
  color: rgba(232,234,240,.86);
}

.ap3-chips{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* corpo */
.ap3-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr; /* <<< dá mais espaço pros skills */
  gap: 14px;
  align-items: stretch;
}

.ap3-left,
.ap3-right{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  padding: 12px;
}

.ap3-stats{
  margin-top: 8px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.ap3-stat{
  display:flex;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}
.ap3-stat i{
  width: 36px; height: 36px;
  display:grid; place-items:center;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.ap3-stat-v{ font-weight: 900; margin-top: 2px; }

.ap3-shead{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ap3-stitle{
  font-weight: 900;
  margin-top: 2px;
  opacity: .92;
}

.ap3-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
  font-size: 12px;
}

/* skills mais compactas */
.ap3-skill-list .skill{ margin: 9px 0; }
.ap3-skill-list .skill-top{ font-size: 13px; margin-bottom: 8px; }
.ap3-skill-list .skill-bar{ height: 10px; border-radius: 999px; }

.ap3-cloud{ margin-top: 10px; }
.ap3-footnote{ margin-top: 8px; }

/* responsivo */
@media (max-width: 980px){
  .ap3-head{ align-items: center; }
  .ap3-avatar{ width: 96px; height: 96px; border-radius: 22px; }
  .ap3-grid{ grid-template-columns: 1fr; }
  .ap3-pill{ display:none; }
}
/* =========================
   Trajetória 2.0 — Journey
   ========================= */
.journey{
  padding: 18px;
  overflow: clip;
}

.j-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.j-title h3{ margin:0; }
.j-title p{ margin:6px 0 0; }

.j-switch{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.j-tab{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.j-tab:hover{ transform: translateY(-1px); }
.j-tab.active{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  box-shadow: var(--ring);
}

/* panes */
.j-pane{ display:none; }
.j-pane.active{ display:block; }

/* slider layout */
.j-slider{
  display:grid;
  grid-template-columns: 330px 1fr;
  gap: 16px;
  align-items: stretch;
  min-height: 420px;
}

@media (max-width: 900px){
  .j-head{ align-items:flex-start; flex-direction:column; }
  .j-switch{ width:100%; justify-content:space-between; }
  .j-tab{ flex:1; justify-content:center; }
  .j-slider{ grid-template-columns: 1fr; min-height: auto; }
}

/* timeline */
.j-timeline{
  position:relative;
  display:flex;
  flex-direction:column;
  gap: 10px;
  padding-left: 14px;
}

.j-timeline::before{
  content:"";
  position:absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 4px;
  background: rgba(255,255,255,.10);
}

.j-step{
  text-align:left;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.j-step:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.16); }

.j-dot{
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 6px;
  background: rgba(255,255,255,.14);
  box-shadow: 0 0 0 3px rgba(255,255,255,.06);
  flex: 0 0 auto;
}

.j-step.active{
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.16);
  box-shadow: var(--ring);
}
.j-step.active .j-dot{
  background: rgb(var(--accent-rgb) / 1);
  box-shadow:
    0 0 0 3px rgb(var(--accent-rgb) / .22),
    0 12px 42px rgb(var(--accent-rgb) / .30);
}

.j-step-main{ display:flex; flex-direction:column; gap: 6px; min-width: 0; }
.j-step-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.j-step-company{
  font-weight: 800;
  letter-spacing: .2px;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.j-step-pill{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}
.j-step-role{
  font-size: 13px;
  overflow:hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* mobile timeline vira “carrossel” horizontal */
@media (max-width: 900px){
  .j-timeline{
    flex-direction:row;
    overflow:auto;
    padding: 0 2px 10px;
    gap: 10px;
    scroll-snap-type: x mandatory;
  }
  .j-timeline::before{ display:none; }
  .j-step{
    min-width: 270px;
    scroll-snap-align: start;
  }
}

/* stage */
.j-stage{
  display:flex;
  flex-direction:column;
  gap: 10px;
  min-width: 0;
}

.j-stage-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.j-nav{ display:flex; gap: 8px; }
.j-btn{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.j-btn:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.18); }

.j-card-stack{
  position:relative;
  min-height: 330px;
  border-radius: 18px;
}

/* cards 3D */
.j-card{
  position:absolute;
  inset: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;

  transform: perspective(1200px) rotateY(14deg) translateY(10px) scale(.985);
  transition: transform .55s cubic-bezier(.2,.9,.2,1), opacity .35s ease;
}

.j-card::before{
  content:"";
  position:absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events:none;
  background: radial-gradient(1200px 380px at 20% 10%, rgb(var(--accent-rgb) / .20), transparent 60%),
              radial-gradient(900px 320px at 80% 15%, rgb(var(--accent2-rgb) / .14), transparent 55%);
  opacity: .75;
  filter: saturate(1.1);
}

.j-card.active{
  opacity: 1;
  pointer-events: auto;
  transform: perspective(1200px) rotateY(0deg) translateY(0) scale(1);
}

.j-card.leaving{
  opacity: 0;
  transform: perspective(1200px) rotateY(-14deg) translateY(12px) scale(.985);
}

.j-card:hover{
  transform: perspective(1200px) rotateY(0deg) translateY(-2px) scale(1.01);
}

/* card content */
.j-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
  position:relative;
  z-index: 1;
}

.j-logo{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .6px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.07);
  box-shadow: 0 14px 40px rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.j-card-title{ min-width:0; }
.j-role{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.15;
}
.j-sub{
  margin-top: 4px;
  font-size: 13px;
}

.j-chip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  font-size: 12px;
  flex: 0 0 auto;
}

.j-meta{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  position:relative;
  z-index: 1;
}
.j-meta span{ display:inline-flex; align-items:center; gap: 8px; }

.j-desc{
  margin: 12px 0 0;
  line-height: 1.55;
  position:relative;
  z-index: 1;
}

.j-bullets{
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display:grid;
  gap: 8px;
  position:relative;
  z-index: 1;
}
.j-bullets li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
.j-bullets svg{ opacity: .9; margin-top: 2px; }

.j-tags{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  position:relative;
  z-index: 1;
}
.j-tag{
  font-size: 12px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.j-footer{
  display:flex;
  align-items:center;
  gap: 12px;
}

.j-progress{
  flex: 1;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow:hidden;
}
.j-progress span{
  display:block;
  height: 100%;
  transform-origin: left center;
  transform: scaleX(0);
  background: linear-gradient(90deg,
    rgb(var(--accent-rgb) / .95),
    rgb(var(--accent2-rgb) / .85)
  );
  border-radius: inherit;
  transition: transform .35s ease;
}

@media (prefers-reduced-motion: reduce){
  .j-card, .j-step, .j-btn, .j-tab, .j-progress span{ transition:none !important; }
}

.j-logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ou 'contain' se for logo com fundo transparente */
  border-radius: inherit;
  display: block;
}

.j-logo img{ object-fit: contain; padding: 6px; }

/* ====== Stage com perspectiva real ====== */
.j-card-stack{
  position:relative;
  min-height: 330px;
  border-radius: 18px;
  perspective: 1400px;          /* <<< aqui nasce o 3D de verdade */
  perspective-origin: 50% 40%;
}

/* ====== Logo maior e mais “premium” ====== */
.j-logo{
  width: 68px;                  /* antes era 46 */
  height: 68px;
  border-radius: 18px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .6px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  box-shadow: 0 18px 46px rgba(0,0,0,.28);
  flex: 0 0 auto;
  overflow: hidden;
}

.j-logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* melhor pra logo */
  display:block;
  padding: 8px;                 /* ajusta aqui (0–10) conforme a imagem */
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

/* ====== Card com tilt via CSS vars (JS seta --rx/--ry/--mx/--my) ====== */
.j-card{
  position:absolute;
  inset: 0;
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  box-shadow: 0 18px 60px rgba(0,0,0,.30);
  transform-style: preserve-3d;

  opacity: 0;
  pointer-events: none;

  /* defaults do tilt */
  --rx: 0deg;
  --ry: 0deg;
  --mx: 50%;
  --my: 35%;
  --lift: 10px;
  --sc: .985;

  transform:
    rotateX(var(--rx)) rotateY(var(--ry))
    translateY(var(--lift))
    scale(var(--sc));
  transition:
    transform .55s cubic-bezier(.2,.9,.2,1),
    opacity .35s ease;
  will-change: transform;
}

/* Glow base (tu já tinha no ::before — mantive e deixei mais “vivo”) */
.j-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(1200px 380px at 20% 10%, rgb(var(--accent-rgb) / .22), transparent 60%),
    radial-gradient(900px 320px at 80% 15%, rgb(var(--accent2-rgb) / .16), transparent 55%);
  opacity: .85;
  filter: saturate(1.1);
}

/* Glare (SEM branco estourado) */
.j-card::after{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events:none;

  /* glow colorido e discreto */
  background:
    radial-gradient(650px 420px at var(--mx) var(--my),
      rgb(var(--accent-rgb) / .18),
      transparent 55%
    ),
    radial-gradient(520px 360px at calc(var(--mx) + 10%) calc(var(--my) + 8%),
      rgb(var(--accent2-rgb) / .12),
      transparent 58%
    );

  opacity: 0;
  transition: opacity .20s ease;
  mix-blend-mode: normal; /* <<< tira o "screen" que estoura */
}

.j-card.active:hover::after,
.j-card.active:focus-visible::after{
  opacity: .55; /* bem mais controlado */
}

/* estado ativo (entra “de frente”) */
.j-card.active{
  opacity: 1;
  pointer-events: auto;
  --lift: 0px;
  --sc: 1;
}

/* saindo */
.j-card.leaving{
  opacity: 0;
  --lift: 12px;
  --sc: .985;
}

/* hover/focus mostra glare + dá um “punch” */
.j-card.active:hover::after,
.j-card.active:focus-visible::after{
  opacity: 1;
}

/* Profundidade nos elementos (isso dá sensação 3D quando inclina) */
.j-card-head{ transform: translateZ(26px); position: relative; z-index: 1; }
.j-meta     { transform: translateZ(20px); position: relative; z-index: 1; }
.j-desc     { transform: translateZ(18px); position: relative; z-index: 1; }
.j-bullets  { transform: translateZ(16px); position: relative; z-index: 1; }
.j-tags     { transform: translateZ(14px); position: relative; z-index: 1; }

/* Mobile: logo um pouco menor pra não estourar */
@media (max-width: 560px){
  .j-logo{ width: 58px; height: 58px; border-radius: 16px; }
  .j-logo img{ padding: 6px; }
}

/* Card vira layout com área scrollável */
.j-card{
  overflow: hidden;          /* corta vazamentos */
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 10px;
}

/* body: onde rola */
.j-body{
  overflow: auto;
  padding-right: 6px;
}

/* scrollbar mais discreta */
.j-body::-webkit-scrollbar{ width: 10px; }
.j-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.j-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.16);
  border: 2px solid rgba(0,0,0,0);
  background-clip: padding-box;
}
.j-card-stack{ min-height: 400px; }

.j-logo{
  width: 86px;   /* antes 68 */
  height: 86px;
  border-radius: 18px;
}

.j-logo img{
  padding: 2px;          /* antes 8 -> isso deixava miúda */
  object-fit: contain;
  transform: scale(1.08); /* dá um “punch” */
}
@media (max-width: 560px){
  .j-logo{ width: 70px; height: 70px; }
}

.j-card-head{
  justify-content: flex-start; /* antes space-between */
  align-items: center;
  gap: 12px;
}

.j-card-title{
  margin-left: 2px;
  flex: 1;          /* ocupa o meio */
  min-width: 0;
}

.j-chip{
  margin-left: auto; /* joga o chip pro canto direito */
}

.j-card{
  background: rgba(10,12,18,.55); /* mais escuro pra contraste */
  border-color: rgba(255,255,255,.12);
}
/* =========================
   JOURNEY – helpers faltantes
   ========================= */
.j-hint{
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
}
.j-counter{
  margin-left: auto;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
}
/* =========================
   DEMOS (UPGRADE)
   ========================= */
.demo-showcase-head{
  position: relative;
  margin: 0 0 18px;
  width: 100%;
  max-width: none;
  padding: clamp(22px, 3vw, 34px) clamp(12px, 1.6vw, 20px);
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(760px 220px at 14% -20%, rgb(var(--accent-rgb) / .09), transparent 64%),
    radial-gradient(760px 220px at 86% 120%, rgb(var(--accent2-rgb) / .09), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,0));
}
.demo-showcase-head::before,
.demo-showcase-head::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.06) 10%,
    rgba(255,255,255,.14) 50%,
    rgba(255,255,255,.06) 90%,
    transparent 100%
  );
}
.demo-showcase-head::before{ top: 0; }
.demo-showcase-head::after{ bottom: 0; }
.demo-showcase-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.demo-showcase-head > *:not(.demo-showcase-particles){
  position: relative;
  z-index: 1;
}
.demo-showcase-particles span{
  position: absolute;
  top: 18px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.78), rgba(255,255,255,.12));
  opacity: .34;
  animation: demoFloat 7s ease-in-out infinite;
}
.demo-showcase-particles span:nth-child(1){ left: 8%; animation-delay: 0s; top: 16px; }
.demo-showcase-particles span:nth-child(2){ left: 20%; animation-delay: .8s; top: 28px; }
.demo-showcase-particles span:nth-child(3){ left: 34%; animation-delay: 1.4s; top: 12px; }
.demo-showcase-particles span:nth-child(4){ left: 50%; animation-delay: .4s; top: 32px; }
.demo-showcase-particles span:nth-child(5){ left: 66%; animation-delay: 1.8s; top: 14px; }
.demo-showcase-particles span:nth-child(6){ left: 80%; animation-delay: 1.1s; top: 26px; }
.demo-showcase-particles span:nth-child(7){ left: 92%; animation-delay: 2.1s; top: 18px; }
@keyframes demoFloat{
  0%, 100%{ transform: translate3d(0, 0, 0); opacity: .32; }
  50%{ transform: translate3d(0, -8px, 0); opacity: .7; }
}
.demo-showcase-kicker,
.demo-showcase-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgb(var(--accent2-rgb) / .95);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.demo-showcase-badge i{
  width: 14px;
  height: 14px;
}
.demo-showcase-head h2{
  margin: 0 0 10px;
  display: block;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: #f8fbff;
  max-width: 18ch;
  margin-left: auto;
  margin-right: auto;
}
.demo-showcase-head p{
  margin: 0 auto;
  max-width: 64ch;
  line-height: 1.55;
}
.demo-showcase-head p.muted{
  color: rgba(230,238,249,.78);
}

@media (prefers-reduced-motion: reduce){
  .demo-showcase-particles span{
    animation: none !important;
  }
}
@media (max-width: 640px){
  .demo-showcase-head{
    padding-top: 20px;
    margin-bottom: 14px;
  }
  .demo-showcase-head h2{
    font-size: clamp(26px, 8vw, 34px);
  }
}
.demo-lab{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}

/* Tabs */
.demo-tabs{
  display:flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  flex-wrap: wrap;
}
.demo-tab{
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--muted);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  display:flex; align-items:center; gap: 10px;
  transition: transform .12s ease, box-shadow .12s ease, color .12s ease, background .12s ease, border-color .12s ease;
}
.demo-tab:hover{
  transform: translateY(-1px);
  box-shadow: var(--ring);
  color: var(--text);
  border-color: rgba(255,255,255,.18);
}
.demo-tab.active{
  background: rgb(var(--accent-rgb) / .12);
  color: var(--text);
  box-shadow: var(--ring);
  border-color: rgb(var(--accent-rgb) / .35);
}

/* Panels */
.demo-panels{ padding: 14px; }
.demo-panel{ display:none; }
.demo-panel.active{
  display:block;
  animation: demoIn .18s ease both;
}
@keyframes demoIn{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: translateY(0); }
}

.demo-grid{
  display:grid;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px){ .demo-grid{ grid-template-columns: 1fr; } }

/* Form card */
.demo-form{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
  min-width: 0;
}
.demo-form h3{ margin: 0 0 10px; }
.field-help{ margin-top: 6px; font-size: 12px; opacity: .85; }

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

/* Result card */
.demo-result{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
  min-width: 0;
}
.result-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.result-title{
  font-weight: 850;
  letter-spacing: .2px;
}
.result-hint{ font-size: 12px; }

/* Summary */
.result-summary{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  margin-bottom: 10px;
}
.sum-left{
  min-width: 0;
  flex: 1 1 320px;
}
.sum-kicker{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .2px;
}
.sum-value{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.1;
  margin-top: 4px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.sum-sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.25;
}
.sum-right{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgb(var(--accent-rgb) / .14);
  color: var(--text);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
}
.pill.ghost{
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

/* KV cards */
.result-cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 640px){ .result-cards{ grid-template-columns: 1fr; } }

.kv{
  position: relative;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.kv::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .9), rgb(var(--accent2-rgb) / .75));
  opacity: .95;
}
.kv:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 14px 44px rgba(0,0,0,.22);
}
.kv .k{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .35px;
  text-transform: uppercase;
}
.kv .v{
  font-weight: 820;
  margin-top: 6px;
  line-height: 1.25;
  word-break: break-word;
  color: rgb(var(--accent-rgb) / .95);
}

/* Chart card */
.chart-card{
  margin: 10px 0 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  min-width: 0;
}
.chart-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.chart-title{
  font-weight: 850;
  letter-spacing: .2px;
}
.chart-actions{ display:flex; gap: 6px; flex-wrap: wrap; }
.btn.tiny{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.btn.tiny.active{
  background: rgb(var(--accent-rgb) / .12);
  box-shadow: var(--ring);
  color: var(--text);
}
.chart-box{
  position: relative;
  height: 220px;
  padding: 10px 12px 12px;
  min-width: 0;
}
.chart-box canvas{
  width: 100% !important;
  max-width: 100%;
}
.chart-box.sm{
  height: 170px;
}

/* JSON collapse */
.collapse{
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .22s ease, opacity .18s ease;
}
.collapse.open{ opacity: 1; }
.output{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.25);
  padding: 12px;
  overflow:auto;
  max-width: 100%;
  max-height: min(62vh, 760px);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.42;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
.output-json .json-key{ color: #a7d7ff; }
.output-json .json-key.is-picked{
  color: #fff7c2;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .22), rgb(var(--accent2-rgb) / .18));
  border-radius: 6px;
  padding: 0 3px;
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .24);
}
.output-json .json-str{ color: #b7f7d7; }
.output-json .json-num{ color: #ffc891; }
.output-json .json-bool{ color: #f7a5d7; font-weight: 700; }
.output-json .json-null{ color: #a6adc8; font-style: italic; }
.output-json-raw .json-key.is-picked{
  background: none;
  box-shadow: none;
  padding: 0;
}

/* Table */
.table-wrap{ margin-top: 0; overflow:auto; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding: 10px 12px; text-align:left; border-bottom: 1px solid rgba(255,255,255,.08); }
.table th{ color: var(--muted); font-weight: 650; }
.table td:last-child{ width: 1%; white-space:nowrap; }

/* Extras abaixo do card */
.demo-live{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){ .demo-live{ grid-template-columns: 1fr; } }

.live-card{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  padding: 14px;
}
.live-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.live-title{
  font-weight: 900;
  letter-spacing: .2px;
}
.live-sub{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}
/* =========================
   DEMOS – helpers faltantes
   ========================= */
.sum-left{ display:grid; gap: 6px; }
/* =========================
   SERVIÇOS + PROJETOS
   ========================= */
.work .work-block{ scroll-margin-top: 90px; margin-top: 14px; }
.work .work-head{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.work .work-head h3{ margin: 0; }
.work .work-head p{ margin: 0; }

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

.service-card{
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  transition: box-shadow .18s ease, transform .18s ease;
}
.service-card:hover{ transform: translateY(-2px); box-shadow: var(--ring); }
.service-card.highlight{
  box-shadow: 0 0 0 1px rgb(var(--accent-rgb) / .16), 0 24px 80px rgb(var(--accent-rgb) / .10);
}

.service-head{
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  display:flex;
  gap: 12px;
  align-items: center;
  padding: 16px 16px 14px;
}
.service-ico{
  width: 48px; height: 48px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgb(var(--accent-rgb) / .14);
  border: 1px solid rgb(var(--accent-rgb) / .22);
  flex: 0 0 auto;
}
.service-title h3{ margin:0; font-size: 18px; }
.chev{ margin-left: auto; transition: transform .18s ease; opacity: .85; }

.service-body{
  padding: 0 16px 16px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .24s ease;
}
.service-card.is-open .service-body{ max-height: 520px; }
.service-card.is-open .chev{ transform: rotate(180deg); }

.service-extra{ margin-top: 12px; }
.mini-steps{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px){ .mini-steps{ grid-template-columns: repeat(2, 1fr); } }
.step{
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-size: 13px;
  display:flex; gap: 8px; align-items:center;
}
.step span{ font-weight: 850; color: var(--text); opacity: .9; }
.service-actions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }

/* Projects */
.work #projects .swiper{ margin-top: 10px; }
.project{ transition: transform .18s ease, box-shadow .18s ease; }
.project:hover{ transform: translateY(-2px); box-shadow: var(--ring); }
.project-top{ display:flex; align-items:flex-start; justify-content: space-between; gap: 10px; }
.project-actions{ display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; }
/* =========================
   FOOTER / REDUCED MOTION
   ========================= */
.footer{ padding: 22px 0 0; text-align:center; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================
   CATÁLOGO — Ecommerce style
   ========================= */
.anchor{ display:block; position:relative; top:-86px; height:0; }

.catalog .cat{
  padding: 16px;
  overflow: clip;
}

.cat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.cat-tabs{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
}

.cat-tab{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor:pointer;
  transition: .2s ease;
  white-space:nowrap;
}
.cat-tab:hover{ transform: translateY(-1px); }
.cat-tab.active{
  background: rgba(var(--accent-rgb)/.18);
  box-shadow: 0 0 0 1px rgba(var(--accent-rgb)/.22) inset;
}

.cat-right{ display:flex; align-items:center; gap: 10px; flex-wrap: wrap; }

.cat-switch{
  display:flex; align-items:center; gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  user-select:none;
  min-height: 36px;
}
.cat-switch input{ accent-color: var(--accent); }

.cat-filters{
  display:grid;
  gap: 10px;
  margin: 12px 0 10px;
}
.cat-filters .field{ margin-bottom: 0; }
.cat-filters-top{
  display:grid;
  grid-template-columns: 1fr;
}
.cat-filters-row{
  display:grid;
  grid-template-columns: 1.2fr 1.1fr .9fr .8fr auto;
  gap: 10px;
  align-items:end;
}
.cat-filters .field.wide input{
  padding: 14px 14px;
  font-size: 15px;
}
@media (max-width: 980px){
  .cat-filters-row{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px){
  .cat-filters-row{ grid-template-columns: 1fr; }
}

.cat-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}

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

.cat-card{
  border-radius: 18px;
  overflow: clip;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  cursor:pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  position:relative;
}
.cat-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.cat-cover{
  height: 150px;
  background: radial-gradient(1200px 280px at 20% -20%, rgba(var(--accent-rgb)/.35), transparent 60%),
              rgba(255,255,255,.05);
  background-size: cover;
  background-position: center;
  position:relative;
}
.cat-cover-badges{
  position:absolute; left:10px; right:10px; top:10px;
  display:flex; flex-wrap:wrap; gap: 8px;
}
.cat-cover-shine{
  position:absolute; inset:-1px;
  background: radial-gradient(400px 220px at var(--mx, 35%) var(--my, 30%), rgba(255,255,255,.18), transparent 60%);
  opacity:.0;
  transition: opacity .2s ease;
  pointer-events:none;
}
.cat-card:hover .cat-cover-shine{ opacity:.9; }

.cat-body{ padding: 12px 12px 14px; }
.cat-title{ margin:0 0 6px; font-size: 16px; letter-spacing:.2px; }
.cat-sub{ margin-bottom: 8px; }
.cat-excerpt{ margin: 0; font-size: 13.5px; line-height:1.35; min-height: 38px; }
.cat-foot{
  margin-top: 10px;
  display:flex; align-items:center; justify-content:space-between;
}
.cat-cta{
  width: 34px; height: 34px;
  border-radius: 12px;
  display:grid; place-items:center;
  background: rgba(var(--accent-rgb)/.16);
  border: 1px solid rgba(var(--accent-rgb)/.22);
}

.cat-empty{
  padding: 26px;
  border-radius: 16px;
  border: 1px dashed rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  grid-column: 1 / -1;
  text-align:center;
}

.cat-pager{
  display:flex;
  gap: 8px;
  justify-content:center;
  margin-top: 14px;
  flex-wrap:wrap;
}
.cat-page{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 8px 10px;
  border-radius: 12px;
  cursor:pointer;
  transition: .2s ease;
  min-width: 40px;
}
.cat-page:hover{ transform: translateY(-1px); }
.cat-page.active{
  background: rgba(var(--accent-rgb)/.18);
  border-color: rgba(var(--accent-rgb)/.25);
}

/* Skeleton */
.cat-card.skel{ cursor: default; }
.cat-card.skel:hover{ transform:none; box-shadow:none; }
.cat-card.skel .cat-cover{ background: rgba(255,255,255,.06); }
.cat-card.skel .sk{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow:hidden;
  position:relative;
}
.cat-card.skel .sk::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-100%);
  animation: sk 1.25s linear infinite;
}
.cat-card.skel .sk1{ width: 72%; margin: 10px 0 8px; }
.cat-card.skel .sk2{ width: 46%; margin: 0 0 10px; }
.cat-card.skel .sk3{ width: 90%; height: 28px; border-radius: 12px; }
@keyframes sk { to { transform: translateX(100%); } }

/* Modal */
body.modal-open{ overflow:hidden; }

.cat-modal{
  position:fixed;
  inset:0;
  z-index: 1000;
  display:none;
}
.cat-modal.open{ display:block; }

.cat-modal-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}

.cat-modal-box{
  position:relative;
  width: min(1060px, calc(100% - 22px));
  max-height: calc(100% - 22px);
  margin: 11px auto;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(12,14,18,.88);
  box-shadow: 0 22px 80px rgba(0,0,0,.55);
  overflow: auto;
  padding: 16px;
}

.cat-modal-x{
  position:absolute;
  top: 12px; right: 12px;
  width: 40px; height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--text);
  cursor:pointer;
}

.cat-modal-head{ padding: 6px 8px 12px; }
.cat-modal-title{ margin: 6px 0 6px; }

.cat-modal-grid{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
}
@media (max-width: 980px){
  .cat-modal-grid{ grid-template-columns: 1fr; }
}

.cat-heroimg-in{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  height: 260px;
  background-size: cover;
  background-position:center;
  overflow:hidden;
  display:block;
}
.cat-heroimg-in.empty{
  display:grid;
  place-items:center;
  color: rgba(255,255,255,.65);
}

.cat-gallery{
  margin-top: 10px;
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}
.cat-gimg{
  width: 74px; height: 54px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background-size: cover;
  background-position:center;
  background-color: rgba(255,255,255,.06);
  cursor:pointer;
}

.cat-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 520px){
  .cat-meta{ grid-template-columns: 1fr; }
}

.cat-html{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
  margin-bottom: 12px;
}
.cat-html p{ margin: 0 0 10px; }
.cat-html p:last-child{ margin-bottom:0; }

.cat-actions{ display:flex; flex-wrap:wrap; gap: 10px; margin-bottom: 12px; }

.cat-person-card{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  padding: 12px;
}
.cat-person-name{ font-weight: 700; margin-top: 2px; }
/* =========================
   CATALOGO — Cards (capa premium)
   ========================= */
.cat-grid{
  gap: 14px;
}

.cat-card{
  overflow: hidden;
  position: relative;
}

.cat-cover{
  position: relative;
  aspect-ratio: 16 / 10;              /* cara de “capa” */
  background-size: cover;
  background-position: center;
  border-radius: 18px;
  overflow: hidden;
  transform: translateZ(0);
}

/* gradiente “cinema” + brilho */
.cat-cover::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.12), transparent 55%),
    linear-gradient(to top, rgba(0,0,0,.66), rgba(0,0,0,.08) 60%, rgba(0,0,0,0));
  pointer-events:none;
}

.cat-cover-shine{
  position:absolute; inset:-40%;
  background: radial-gradient(40% 40% at var(--mx, 40%) var(--my, 30%), rgba(255,255,255,.18), transparent 60%);
  opacity:.0;
  transition: opacity .25s ease;
  pointer-events:none;
}

.cat-card:hover .cat-cover-shine{ opacity:.9; }

.cat-cover-badges{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items:center;
}

/* leve zoom da capa no hover */
.cat-card:hover .cat-cover{
  transform: scale(1.02);
  transition: transform .35s ease;
}

.cat-excerpt{
  display:-webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:hidden;
}
/* =========================
   CATALOGO — Modal (central + maior + responsivo)
   ========================= */
.cat-modal{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
}

.cat-modal-box{
  width: min(1100px, 96vw);
  max-height: min(86vh, 900px);
  overflow: hidden;
  border-radius: 22px;
  display:flex;
  flex-direction: column;
}

.cat-modal-head{
  padding: 18px 18px 12px;
}

.cat-modal-body{
  overflow:auto;
  padding: 0 18px 18px;
}

.cat-modal-grid{
  gap: 16px;
}

/* mobile: vira 1 coluna e ocupa bem */
@media (max-width: 900px){
  .cat-modal-box{
    width: 100%;
    max-height: 92vh;
    border-radius: 18px;
  }
  .cat-modal-grid{
    grid-template-columns: 1fr !important;
  }
  .cat-heroimg{
    aspect-ratio: 16 / 9;
  }
}
/* =========================
   CATALOGO — Viewer (iframe)
   ========================= */
.cat-viewer{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display:none;
}

.cat-viewer.open{ display:block; }

.cat-viewer-backdrop{
  position:absolute; inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(8px);
}

.cat-viewer-box{
  position: relative;
  width: min(1200px, 96vw);
  height: min(860px, 92vh);
  margin: 4vh auto 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 80px rgba(0,0,0,.55);
  display:flex;
  flex-direction: column;
}

.cat-viewer-top{
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.cat-viewer-title{
  font-weight: 800;
  line-height: 1.1;
}
.cat-viewer-url{
  max-width: 52ch;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cat-devices{
  display:flex;
  gap: 8px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.cat-dbtn{
  width: 38px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display:grid;
  place-items:center;
  opacity: .85;
}
.cat-dbtn.active{
  background: rgba(255,255,255,.12);
  opacity: 1;
}

.cat-viewer-stage{
  position: relative;
  flex: 1;
  padding: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cat-framewrap{
  position: relative;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,.40);
  width: 100%;
  height: 100%;
}

.cat-framewrap[data-device="tablet"]{
  width: min(860px, 100%);
  height: min(1180px, 100%);
}

.cat-framewrap[data-device="mobile"]{
  width: min(420px, 100%);
  height: min(880px, 100%);
  border-radius: 26px;
}

#catV_iframe{
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.cat-viewer-fallback{
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  display: grid;
  grid-template-rows: 1fr auto;
}
.cat-viewer-fallback img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: rgba(0,0,0,.16);
}
.cat-viewer-fallback-note{
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.40);
}

.cat-viewer-hint{
  position:absolute;
  bottom: 10px;
  left: 14px;
  right: 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.12);
}
.cat-quick{
  position:absolute;
  top: 10px;
  right: 10px;
  display:flex;
  gap: 8px;
}
.cat-qbtn{
  width: 42px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.cat-qbtn:hover{
  transform: translateY(-1px);
}

/* =========================
   CATÁLOGO — Cards (footer travado + alinhado)
   ========================= */

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

/* Card vira “coluna” e o body estica */
.cat-card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius: 20px;
  min-height: 330px;              /* ✅ mantém altura consistente */
}

/* Capa com altura fixa */
.cat-cover{
  position:relative;
  flex: 0 0 160px;                /* ✅ altura da capa */
  height: 160px;
  border-radius: 18px;
  margin: 12px 12px 0;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}

/* Corpo ocupa o restante do card */
.cat-body{
  flex:1;
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 14px 16px 16px;
  min-height: 0;
}

.cat-title{
  margin:0;
  line-height:1.22;
}

.cat-sub{
  margin:0;
  opacity:.85;
}

/* Excerpt com clamp (mesma “altura visual”) */
.cat-excerpt{
  margin: 2px 0 0;
  opacity:.8;
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;          /* ✅ sempre 2 linhas */
  overflow:hidden;
  min-height: 2.6em;              /* ✅ reserva espaço mesmo vazio */
}

/* Footer grudado embaixo */
.cat-foot{
  margin-top:auto;                 /* ✅ cola no fundo */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding-top: 10px;
}

/* CTA (seta) com tamanho fixo */
.cat-cta{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(var(--accent-rgb) / .16);
  border: 1px solid rgba(var(--accent-rgb) / .32);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.cat-cta svg{
  width: 18px;
  height: 18px;
}

/* Quick preview na capa (se tiver) */
.cat-quick{
  position:absolute;
  right: 10px;
  bottom: 10px;
  display:flex;
  gap: 8px;
}
.cat-qbtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(10px);
}


/* =========================
   CAT MODAL — estado fechado por padrão
   ========================= */
.cat-modal,
.cat-viewer{
  display: none;            /* <- ISSO resolve o “aberto ao entrar” */
  position: fixed;
  inset: 0;
  z-index: 9999;
}

/* aberto */
.cat-modal.is-open{
  display: flex;
}

/* (se teu viewer/iframe também é modal) */
.cat-viewer.is-open{
  display: flex;
}

/* =========================
   CATÁLOGO — Viewer (modal preview) mais largo/alto e topo “solto”
   ========================= */

.cat-viewer-box{
  width: min(1280px, 96vw);
  height: min(86vh, 900px);
  display:flex;
  flex-direction:column;
  border-radius: 22px;
  overflow:hidden;
}

.cat-viewer-top{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,18,.65);
  backdrop-filter: blur(14px);
}

.cat-viewer-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;               /* ✅ não “amassa” tudo */
  justify-content:flex-end;
}
.cat-viewer-actions .btn.active{
  border-color: rgba(var(--accent-rgb)/.38);
  background: rgba(var(--accent-rgb)/.16);
}

.cat-devices{
  display:flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}

.cat-dbtn{
  width: 44px;
  height: 40px;
  border-radius: 999px;
  display:grid;
  place-items:center;
}

.cat-viewer-stage{
  flex:1;
  padding: 14px;
  min-height: 0;
}

.cat-framewrap{
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow:hidden;
  background: rgba(255,255,255,.04);
}

#catV_iframe{
  width:100%;
  height:100%;
  border:0;
  background: #0b0d12;
}

@media (max-width: 720px){
  .cat-viewer-top{
    grid-template-columns: 1fr;   /* ✅ ações vão pra baixo */
  }
  .cat-viewer-actions{
    justify-content:flex-start;
  }
}

/* =========================
   CONTACT — layout profissional + copy
   ========================= */
.contact-gh{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(3,11,26,.94), rgba(4,10,22,.94)),
    radial-gradient(80% 130% at 50% -22%, rgb(var(--accent-rgb) / .18), transparent 62%);
  overflow: hidden;
}

.contact-gh-showcase{
  position: relative;
  padding: clamp(20px, 3vw, 34px);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(137,93,255,.36), transparent 62%),
    linear-gradient(180deg, rgba(10,18,35,.96), rgba(8,16,32,.82));
}

.contact-gh-glow{
  position: absolute;
  left: 50%;
  top: 8px;
  width: min(72%, 860px);
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(145,109,255,.36), transparent 72%);
  filter: blur(24px);
  pointer-events: none;
}

.contact-gh-window{
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(14,23,39,.98), rgba(13,22,37,.94));
  box-shadow: 0 30px 70px rgba(0,0,0,.40);
  overflow: hidden;
}

.contact-gh-window-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
}

.contact-gh-window-brand{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.contact-gh-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #8b5cf6;
  box-shadow: 0 0 0 4px rgba(139,92,246,.18);
}

.contact-gh-window-actions{
  display: inline-flex;
  gap: 6px;
}

.contact-gh-window-actions span{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
}

.contact-gh-window-actions span:nth-child(1){ background: #ef4444; }
.contact-gh-window-actions span:nth-child(2){ background: #f59e0b; }
.contact-gh-window-actions span:nth-child(3){ background: #22c55e; }

.contact-gh-toolbar{
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
}

.contact-gh-pill{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
}

.contact-gh-pill i{
  width: 13px;
  height: 13px;
}

.contact-gh-table-wrap{
  overflow-x: auto;
}

.contact-gh-table{
  width: 100%;
  border-collapse: collapse;
}

.contact-gh-table th,
.contact-gh-table td{
  padding: 11px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  font-size: 13px;
}

.contact-gh-table th{
  color: rgba(240,246,252,.68);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.contact-gh-state{
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}

.contact-gh-state.is-done{
  color: #a7f3d0;
  border-color: rgba(16,185,129,.34);
  background: rgba(16,185,129,.16);
}

.contact-gh-state.is-work{
  color: #bfdbfe;
  border-color: rgba(59,130,246,.34);
  background: rgba(59,130,246,.14);
}

.contact-gh-state.is-next{
  color: #ddd6fe;
  border-color: rgba(139,92,246,.34);
  background: rgba(139,92,246,.14);
}

.contact-gh-progress{
  width: min(170px, 100%);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}

.contact-gh-progress span{
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8b5cf6, #a78bfa);
}

.contact-gh-bottom{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.contact-gh-card{
  padding: clamp(18px, 2.4vw, 28px);
  min-height: 280px;
}

.contact-gh-card-main{
  border-right: 1px solid rgba(255,255,255,.10);
}

.contact-gh-card h3{
  margin: 0 0 10px;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
}

.contact-gh-links{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-gh-quote-mark{
  color: rgb(var(--accent2-rgb) / .95);
  font-size: 38px;
  line-height: 1;
  font-weight: 900;
}

.contact-gh-quote{
  margin: 8px 0 0;
  font-size: clamp(20px, 2vw, 31px);
  line-height: 1.22;
  font-weight: 700;
}

.contact-gh-sign{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-gh-sign strong{
  font-size: 14px;
}

.contact-gh-sign span{
  font-size: 12px;
  color: var(--muted);
}

.contact-gh-inline{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-gh-inline-soft{
  margin-top: 12px;
}

.contact-gh-inline-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.contact-gh-inline-link:hover{
  border-color: rgb(var(--accent-rgb) / .46);
  background: rgba(var(--accent-rgb) / .10);
}

@media (max-width: 1120px){
  .contact-gh-bottom{
    grid-template-columns: 1fr;
  }
  .contact-gh-card-main{
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}

@media (max-width: 760px){
  .contact-gh-showcase{
    padding: 12px;
  }
  .contact-gh-window-top,
  .contact-gh-toolbar{
    padding-left: 10px;
    padding-right: 10px;
  }
  .contact-gh-table th,
  .contact-gh-table td{
    padding: 9px;
  }
  .contact-gh-table th:nth-child(3),
  .contact-gh-table td:nth-child(3),
  .contact-gh-table th:nth-child(4),
  .contact-gh-table td:nth-child(4){
    display: none;
  }
  .contact-gh-links .btn,
  .contact-gh-inline-link{
    width: 100%;
    justify-content: center;
  }
}

html[data-theme="light"] .contact-gh{
  border-color: rgba(16,24,38,.14);
  background:
    linear-gradient(180deg, rgba(252,255,255,.96), rgba(246,250,255,.98)),
    radial-gradient(80% 130% at 50% -22%, rgb(var(--accent-rgb) / .12), transparent 62%);
}

html[data-theme="light"] .contact-gh-showcase{
  border-bottom-color: rgba(16,24,38,.10);
  background:
    radial-gradient(70% 70% at 50% 0%, rgba(137,93,255,.18), transparent 62%),
    linear-gradient(180deg, rgba(247,250,255,.96), rgba(245,249,255,.92));
}

html[data-theme="light"] .contact-gh-window{
  border-color: rgba(16,24,38,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,255,.92));
  box-shadow: 0 18px 44px rgba(16,24,38,.14);
}

html[data-theme="light"] .contact-gh-window-top{
  border-bottom-color: rgba(16,24,38,.10);
}

html[data-theme="light"] .contact-gh-toolbar{
  border-bottom-color: rgba(16,24,38,.08);
}

html[data-theme="light"] .contact-gh-pill,
html[data-theme="light"] .contact-gh-inline-link{
  border-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.86);
  color: rgba(16,24,38,.92);
}

html[data-theme="light"] .contact-gh-table th,
html[data-theme="light"] .contact-gh-sign span{
  color: rgba(34,47,64,.68);
}

html[data-theme="light"] .contact-gh-table th,
html[data-theme="light"] .contact-gh-table td{
  border-bottom-color: rgba(16,24,38,.08);
}

html[data-theme="light"] .contact-gh-card-main{
  border-right-color: rgba(16,24,38,.10);
}

html[data-theme="light"] .contact-gh-card-main,
html[data-theme="light"] .contact-gh-card-side{
  background: rgba(255,255,255,.62);
}

/* Site footer (full width) */
.site-footer{
  position: relative;
  width: 100%;
  margin-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 100% at 8% -20%, rgb(var(--accent-rgb) / .18), transparent 60%),
    radial-gradient(120% 100% at 92% -30%, rgb(var(--accent2-rgb) / .14), transparent 64%),
    linear-gradient(180deg, rgba(5,11,22,.95), rgba(4,9,19,.98));
}

.site-footer::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent-rgb) / .72), rgb(var(--accent2-rgb) / .68), transparent);
}

.site-footer-inner{
  width: min(1720px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(22px, 3vw, 34px) 0;
}

.site-footer-top{
  display: grid;
  grid-template-columns: 1.3fr .9fr 1fr;
  gap: 20px;
  align-items: start;
}

.site-footer-brand{
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.site-footer-logo{
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: contain;
  padding: 5px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  flex: 0 0 auto;
}

.site-footer-name{
  font-family: "Sora", "Manrope", sans-serif;
  font-size: clamp(18px, 1.2vw, 22px);
  font-weight: 800;
  letter-spacing: .01em;
}

.site-footer-copy{
  margin: 6px 0 0;
  max-width: 62ch;
  line-height: 1.45;
}

.site-footer-nav{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.site-footer-nav a{
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  opacity: .86;
}

.site-footer-nav a:hover{
  opacity: 1;
  color: rgb(var(--accent2-rgb) / .95);
}

.site-footer-actions{
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.site-footer-bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(240,246,252,.72);
  font-size: 13px;
}

.site-footer-bottom .dot{
  opacity: .55;
}

html[data-theme="light"] .site-footer{
  border-top-color: rgba(16,24,38,.14);
  background:
    radial-gradient(140% 100% at 8% -20%, rgb(var(--accent-rgb) / .12), transparent 60%),
    radial-gradient(120% 100% at 92% -30%, rgb(var(--accent2-rgb) / .10), transparent 64%),
    linear-gradient(180deg, rgba(252,255,255,.96), rgba(246,250,255,.98));
}

html[data-theme="light"] .site-footer-copy{
  color: rgba(34,47,64,.78);
}

html[data-theme="light"] .site-footer-nav a{
  color: rgba(16,24,38,.88);
}

html[data-theme="light"] .site-footer-bottom{
  border-top-color: rgba(16,24,38,.12);
  color: rgba(34,47,64,.72);
}

@media (max-width: 1080px){
  .site-footer-top{
    grid-template-columns: 1.2fr 1fr;
  }
  .site-footer-actions{
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 640px){
  .site-footer-inner{
    width: calc(100% - 24px);
    padding: 18px 0;
  }
  .site-footer-nav{
    grid-template-columns: 1fr;
  }
  .site-footer-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

/* Toast */
.copy-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 99999;
}
.copy-toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

/* =========================
   LIGHT + MOBILE HARDENING
   ========================= */
html[data-theme="light"]{
  --bg: #f4f7f6;
  --surface: rgba(255,255,255,.78);
  --surface2: rgba(255,255,255,.92);
  --text: #101826;
  --muted: rgba(30,43,60,.72);
  --shadow: 0 12px 34px rgba(16,24,38,.10);
}

html[data-theme="light"] body::before{
  opacity: .42;
  filter: saturate(.92);
}
html[data-theme="light"] body::after{ opacity: .02; }

html[data-theme="light"] .glass,
html[data-theme="light"] .welcome-shell,
html[data-theme="light"] .demo-form,
html[data-theme="light"] .demo-result,
html[data-theme="light"] .live-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .cat-card,
html[data-theme="light"] .cat,
html[data-theme="light"] .contact-line,
html[data-theme="light"] .social-item{
  border-color: rgba(16,24,38,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,251,250,.74));
}

html[data-theme="light"] .btn{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.80);
}
html[data-theme="light"] .btn.ghost{ background: rgba(16,24,38,.03); }
html[data-theme="light"] .btn.primary{
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .96), rgb(var(--accent2-rgb) / .72));
  color: #f6fff9;
  border-color: rgb(var(--accent-rgb) / .55);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}
html[data-theme="light"] .btn.primary:hover{
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / 1), rgb(var(--accent2-rgb) / .80));
}
html[data-theme="light"] .btn.primary:active{
  transform: translateY(0);
  filter: saturate(1.04);
}

html[data-theme="light"] .badge,
html[data-theme="light"] .chip,
html[data-theme="light"] .chip2,
html[data-theme="light"] .pill.ghost,
html[data-theme="light"] .j-chip,
html[data-theme="light"] .j-step-pill,
html[data-theme="light"] .j-tag{
  border-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.76);
  color: var(--text);
}

html[data-theme="light"] .field input,
html[data-theme="light"] .field select{
  background: rgba(245,249,255,.92);
  border-color: rgba(16,24,38,.16);
}
html[data-theme="light"] .output{
  background: rgba(245,249,255,.96);
  border-color: rgba(16,24,38,.16);
  color: var(--text);
}
html[data-theme="light"] .output-json .json-key{ color: #1c4f8f; }
html[data-theme="light"] .output-json .json-key.is-picked{
  color: #0f172a;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .18), rgb(var(--accent2-rgb) / .10));
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .22);
}
html[data-theme="light"] .output-json .json-str{ color: #0f766e; }
html[data-theme="light"] .output-json .json-num{ color: #b45309; }
html[data-theme="light"] .output-json .json-bool{ color: #be185d; }
html[data-theme="light"] .output-json .json-null{ color: #64748b; }
html[data-theme="light"] .kv .v{ color: rgb(var(--accent-rgb) / .98); }

html[data-theme="light"] .dock-panel,
html[data-theme="light"] .side-actions,
html[data-theme="light"] .now{
  border-color: rgba(16,24,38,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.90), rgba(245,250,248,.82));
}
html[data-theme="light"] .topbar-fab{
  color: var(--text);
  border-color: rgba(16,24,38,.16);
  background: radial-gradient(120px 80px at 20% -40%, rgb(var(--accent-rgb)/.24), transparent 62%),
              rgba(255,255,255,.90);
  box-shadow: 0 10px 30px rgba(16,24,38,.16);
}
html[data-theme="light"] .topbar-modal-backdrop{ background: rgba(16,24,38,.18); }
html[data-theme="light"] .topbar-logo,
html[data-theme="light"] .brand-logo,
html[data-theme="light"] .site-footer-logo{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.86);
}

html[data-theme="light"] .j-step{
  border-color: rgba(16,24,38,.12);
  background: rgba(255,255,255,.78);
}
html[data-theme="light"] .j-card{
  border-color: rgba(16,24,38,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(247,251,249,.86));
  box-shadow: 0 14px 42px rgba(16,24,38,.14);
}
html[data-theme="light"] .j-card::before{ opacity: .46; }
html[data-theme="light"] .j-card::after{ opacity: .22; }
html[data-theme="light"] .j-progress{
  border-color: rgba(16,24,38,.15);
  background: rgba(16,24,38,.05);
}

html[data-theme="light"] .table-wrap,
html[data-theme="light"] .table th,
html[data-theme="light"] .table td{
  border-color: rgba(16,24,38,.14);
}

html[data-theme="light"] .cat-modal-box,
html[data-theme="light"] .cat-viewer-box{
  border-color: rgba(16,24,38,.14);
  background: rgba(249,252,255,.96);
}
html[data-theme="light"] .cat-modal-backdrop,
html[data-theme="light"] .cat-viewer-backdrop{ background: rgba(16,24,38,.28); }
html[data-theme="light"] .cat-viewer-top{
  border-bottom-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.88);
}
html[data-theme="light"] .cat-viewer-hint{
  background: rgba(255,255,255,.92);
  border-color: rgba(16,24,38,.14);
  color: var(--text);
}
html[data-theme="light"] .cat-viewer-fallback{
  border-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.96);
}
html[data-theme="light"] .cat-viewer-fallback-note{
  background: rgba(255,255,255,.92);
  border-top-color: rgba(16,24,38,.14);
  color: rgba(34,47,64,.86);
}
html[data-theme="light"] .cat-qbtn{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.86);
}

@media (max-width: 980px){
  .section{ padding: 76px 0; }
  .hero{ padding: 90px 0 76px; }

  .dock{
    left: 10px;
    right: 10px;
    top: 10px;
    z-index: 1700;
  }
  .dock-panel{
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 84px);
    overflow: auto;
    padding: 12px;
  }

  .j-slider{ gap: 12px; }
  .j-card-stack{ min-height: 450px; }

  .cat-top{
    align-items: stretch;
    flex-direction: column;
  }
  .cat-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .cat-tab{
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .cat-right{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
  }
  .cat-info{
    flex-direction: column;
    align-items: flex-start;
  }

  .contact-line{
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .contact-actions{
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 760px){
  .container{ width: min(var(--max), calc(100% - 20px)); }
  .card{ padding: 14px; }

  .hero-title{
    font-size: clamp(34px, 11vw, 52px);
    line-height: 1.05;
  }
  .hero-meta{
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .cta{
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .cta .btn{
    width: 100%;
    justify-content: center;
  }
  .chips{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .demo-tabs{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .demo-tab{
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .demo-actions{ gap: 8px; }
  .demo-actions .btn{
    flex: 1 1 100%;
    justify-content: center;
  }
  .result-head{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .sum-value{ font-size: 19px; }
  .chart-box{ height: 190px; }
  .chart-actions{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .chart-actions .btn.tiny{
    width: 100%;
    justify-content: center;
  }

  .cat-modal{ padding: 0; }
  .cat-modal-box{
    width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
  .cat-modal-head{ padding: 14px 14px 10px; }
  .cat-modal-body{ padding: 0 14px 14px; }

  .cat-viewer-box{
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }
  .cat-viewer-top,
  .cat-viewer-stage{ padding: 10px; }
  .cat-viewer-actions{
    width: 100%;
    justify-content: flex-start;
  }
  .cat-viewer-actions .btn,
  .cat-viewer-actions a.btn{
    flex: 1 1 calc(50% - 6px);
    justify-content: center;
  }
  .cat-devices{
    width: 100%;
    justify-content: space-between;
  }
  .cat-dbtn{
    flex: 1 1 0;
    width: auto;
  }

  .site-footer-top{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .site-footer-actions{
    justify-content: flex-start;
  }
  .site-footer-bottom .dot{
    display: none;
  }
}

@media (max-width: 560px){
  .dock-fab{
    width: 50px;
    height: 50px;
    border-radius: 16px;
  }
  .brand-txt{ font-size: 15px; }
  .nav-item{
    padding: 10px 11px;
    gap: 8px;
  }
  .j-step{ min-width: 238px; }
  .j-card{
    padding: 14px;
    border-radius: 16px;
  }
  .j-role{ font-size: 16px; }
  .j-chip{ font-size: 11px; }
  .j-card-stack{ min-height: 470px; }

  .contact-actions .btn{
    width: 100%;
    flex: 1 1 100%;
  }
}

/* =========================
   LIGHT CONTRAST FIX PACK
   ========================= */
html[data-theme="light"] .muted{
  color: rgba(34,47,64,.82);
}

html[data-theme="light"] .meta-pill{
  color: var(--text);
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.86);
}
html[data-theme="light"] .meta-pill.ghost{
  color: rgba(34,47,64,.82);
  background: rgba(16,24,38,.04);
}
html[data-theme="light"] .chip{
  color: var(--text);
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.82);
}
html[data-theme="light"] .ap3-lead,
html[data-theme="light"] .lead{
  color: rgba(22,32,46,.92);
}

html[data-theme="light"] .j-title p,
html[data-theme="light"] .j-sub,
html[data-theme="light"] .j-step-role,
html[data-theme="light"] .j-counter,
html[data-theme="light"] .j-hint{
  color: rgba(34,47,64,.80);
}
html[data-theme="light"] .j-step-company,
html[data-theme="light"] .j-role{
  color: rgba(16,24,38,.96);
}
html[data-theme="light"] .j-dot{
  background: rgba(16,24,38,.28);
  box-shadow: 0 0 0 3px rgba(16,24,38,.08);
}
html[data-theme="light"] .j-timeline::before{
  background: rgba(16,24,38,.16);
}

html[data-theme="light"] .result-title,
html[data-theme="light"] .live-title,
html[data-theme="light"] .card-title{
  color: rgba(16,24,38,.96);
}
html[data-theme="light"] .result-hint,
html[data-theme="light"] .live-sub,
html[data-theme="light"] .social-sub{
  color: rgba(34,47,64,.80);
}
html[data-theme="light"] .kv .k{
  color: rgba(34,47,64,.78);
}
html[data-theme="light"] .kv .v{
  color: rgba(16,24,38,.96);
}
html[data-theme="light"] .sum-kicker,
html[data-theme="light"] .sum-sub{
  color: rgba(34,47,64,.80);
}
html[data-theme="light"] .sum-value{
  color: rgba(16,24,38,.98);
}

html[data-theme="light"] .cat-title,
html[data-theme="light"] .cat-person-name{
  color: rgba(16,24,38,.96);
}
html[data-theme="light"] .cat-sub,
html[data-theme="light"] .cat-excerpt{
  opacity: 1;
  color: rgba(34,47,64,.82);
}
html[data-theme="light"] .cat-empty{
  border-color: rgba(16,24,38,.22);
  background: rgba(255,255,255,.86);
  color: rgba(34,47,64,.88);
}
html[data-theme="light"] .cat-cover::before{
  background:
    radial-gradient(80% 60% at 50% 20%, rgba(255,255,255,.20), transparent 55%),
    linear-gradient(to top, rgba(16,24,38,.36), rgba(16,24,38,.05) 60%, rgba(16,24,38,0));
}
html[data-theme="light"] .cat-cover-shine{
  opacity: .34;
}

html[data-theme="light"] .topbar-title,
html[data-theme="light"] .brand-txt,
html[data-theme="light"] .now-sec,
html[data-theme="light"] .nav-item{
  color: rgba(16,24,38,.95);
}
html[data-theme="light"] .now-pct{
  color: rgba(34,47,64,.78);
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.86);
}
html[data-theme="light"] .nav-item:hover{
  background: rgba(16,24,38,.05);
}

html[data-theme="light"] .copy-toast{
  background: rgba(16,24,38,.90);
  color: #f8fafc;
  border-color: rgba(255,255,255,.24);
}

@media (max-width: 760px){
  html[data-theme="light"] .j-step{
    background: rgba(255,255,255,.90);
  }
  html[data-theme="light"] .demo-tab,
  html[data-theme="light"] .cat-tab{
    background: rgba(255,255,255,.86);
    border-color: rgba(16,24,38,.16);
  }
  html[data-theme="light"] .demo-tab.active,
  html[data-theme="light"] .cat-tab.active{
    background: rgba(var(--accent-rgb)/.20);
    border-color: rgba(var(--accent-rgb)/.38);
  }
}

/* =========================================================
   VISUAL REFRESH 2026
   ========================================================= */
:root{
  --bg: #040d1f;
  --surface: rgba(255,255,255,.05);
  --surface2: rgba(255,255,255,.08);
  --text: #f0f6fc;
  --muted: rgba(240,246,252,.72);
  --accent: #0b8638;
  --accent2: #16b15d;
  --accent-rgb: 11 134 56;
  --accent2-rgb: 22 177 93;
  --max: clamp(1200px, 94vw, 1720px);
}

body{
  font-family: "Manrope", "Segoe UI", sans-serif;
  background:
    radial-gradient(1200px 700px at 12% -6%, rgb(var(--accent-rgb) / .24), transparent 62%),
    radial-gradient(900px 560px at 94% 8%, rgb(var(--accent2-rgb) / .16), transparent 58%),
    linear-gradient(180deg, #02070f 0%, #040c1d 40%, #061227 100%);
}
h1, h2, h3, h4, .hero-title, .gh-nav a, .gh-brand span{
  font-family: "Sora", "Manrope", sans-serif;
}

.main{
  padding-left: 0 !important;
  padding-top: 90px;
}
.container.wide{
  width: min(1700px, calc(100% - 48px));
}
.anchor{ top: -120px; }

.gh-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1900;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(4,11,24,.96), rgba(4,11,24,.85));
  backdrop-filter: blur(14px);
}
.gh-header-inner{
  width: min(1720px, calc(100% - 36px));
  margin: 0 auto;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.gh-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 700;
}
.gh-brand img{
  width: 32px;
  height: 32px;
  border-radius: 9px;
  object-fit: contain;
}
.gh-nav{
  display: flex;
  align-items: center;
  gap: 18px;
}
.gh-nav a{
  color: rgba(240,246,252,.86);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 0;
  border-bottom: 2px solid transparent;
}
.gh-nav a:hover{
  color: #fff;
  border-bottom-color: rgb(var(--accent-rgb) / .8);
}
.gh-actions{
  display: flex;
  align-items: center;
  gap: 10px;
}
.gh-search{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 320px;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.06);
  color: rgba(240,246,252,.78);
}
.gh-search input{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  outline: none;
}
.gh-link{
  appearance: none;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,246,252,.92);
  font-weight: 600;
  padding: 8px 10px;
  cursor: pointer;
}
.gh-accent-wrap{
  position: relative;
}
.gh-accent-toggle{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.20);
  background: rgba(255,255,255,.05);
  color: rgba(240,246,252,.84);
  cursor: pointer;
}
.gh-accent-toggle i{
  width: 16px;
  height: 16px;
}
.gh-accent-panel{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(8,18,36,.96), rgba(7,15,31,.92));
  box-shadow: 0 20px 55px rgba(0,0,0,.42);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 30;
}
.gh-accent-panel.open{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.gh-accent-title{
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.gh-accent-presets{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.accent-swatch{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.2);
  background: var(--sw);
  cursor: pointer;
}
.accent-swatch.active{
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .35);
  transform: translateY(-1px);
}
.gh-accent-custom{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: rgba(240,246,252,.82);
}
.gh-accent-custom input{
  width: 46px;
  height: 30px;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.gh-cta{
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.02);
  color: #fff;
  font-weight: 700;
}
.gh-cta:hover{
  border-color: rgb(var(--accent-rgb) / .55);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18);
}

.hero{
  min-height: calc(100vh - 90px);
  padding: clamp(88px, 11vh, 140px) 0 clamp(60px, 8vh, 96px);
}
.hero-bg{
  background:
    radial-gradient(850px 560px at 12% 14%, rgb(var(--accent-rgb) / .24), transparent 68%),
    radial-gradient(880px 560px at 82% 12%, rgba(13,17,23,.70), transparent 66%),
    radial-gradient(1100px 720px at 52% 100%, rgb(var(--accent2-rgb) / .16), transparent 76%);
}
.welcome-shell{
  border-radius: 34px;
  padding: clamp(24px, 2.5vw, 42px);
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(160deg, rgba(10,23,47,.82), rgba(7,16,34,.72));
}
.hero-title{
  font-size: clamp(48px, 5.2vw, 86px);
  line-height: 1.02;
  letter-spacing: -.9px;
}
.lead{
  font-size: clamp(17px, 1.15vw, 20px);
  color: rgba(240,246,252,.84);
}
.hero-card{
  border-color: rgba(255,255,255,.15);
  background: linear-gradient(160deg, rgba(8,20,41,.82), rgba(5,14,30,.68));
}

.clients-strip{
  padding-top: 26px;
  padding-bottom: 38px;
}
.clients-strip .container{
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  padding-top: 24px;
  padding-bottom: 24px;
}
.clients-strip-head{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
.clients-strip-head h2{
  margin: 0 0 6px;
  font-size: clamp(24px, 2.6vw, 38px);
}
.clients-marquee{
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.clients-track{
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  animation: clients-scroll 40s linear infinite;
}
.clients-marquee:hover .clients-track,
.clients-marquee[data-paused="1"] .clients-track{
  animation-play-state: paused;
}
.client-logo{
  margin: 0;
  width: 200px;
  min-height: 74px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  display: flex;
  align-items: center;
  justify-content: center;
}
.client-logo img{
  max-width: 100%;
  max-height: 46px;
  object-fit: contain;
  filter: grayscale(1) contrast(1.08) brightness(1.2);
  opacity: .88;
  transition: .25s ease;
}
.client-logo:hover img{
  filter: grayscale(0) contrast(1.08) brightness(1.05);
  opacity: 1;
}
@keyframes clients-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

.catalog .cat{
  padding: 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(9,20,42,.88), rgba(5,13,29,.88));
}
.cat-top{
  margin-bottom: 16px;
}
.cat-tabs{
  padding: 7px;
  border-radius: 14px;
  border-color: rgba(255,255,255,.14);
}
.cat-tab{
  border-radius: 10px;
  font-weight: 700;
}
.cat-tab.active{
  background: rgb(var(--accent-rgb) / .20);
  box-shadow: inset 0 0 0 1px rgb(var(--accent-rgb) / .35);
}
.cat-filters{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(255,255,255,.03);
  padding: 14px;
  margin-bottom: 16px;
}
.cat-info{
  margin-bottom: 14px;
}
.cat-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.cat-card{
  min-height: 370px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}
.cat-cover{
  height: 188px;
  margin: 10px 10px 0;
  border-radius: 16px;
}
.cat-cover-badges{
  left: 10px;
  right: 10px;
  top: 10px;
  bottom: auto;
}
.cat-body{
  padding: 14px 14px 16px;
  gap: 10px;
}
.cat-title{
  font-size: 18px;
  line-height: 1.25;
}
.cat-sub{
  font-size: 12.5px;
}
.cat-excerpt{
  -webkit-line-clamp: 3;
  min-height: 3.9em;
}
.cat-tagsline{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.badge{
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(240,246,252,.82);
}
.badge.ghost{
  background: rgba(255,255,255,.03);
  color: rgba(240,246,252,.72);
}
.cat-foot{
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 12px;
}
.cat-price{
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .2px;
}
.cat-cta{
  width: 44px;
  height: 44px;
  border-radius: 13px;
  border: 1px solid rgb(var(--accent-rgb) / .35);
  background: rgb(var(--accent-rgb) / .18);
}
.cat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 22px 60px rgba(0,0,0,.36);
}
.cat-card:hover .cat-cta{
  border-color: rgb(var(--accent-rgb) / .62);
  background: rgb(var(--accent-rgb) / .30);
}

@media (min-width: 981px){
  .dock,
  .topbar{
    display: none !important;
  }
}

@media (max-width: 1200px){
  .gh-search{ min-width: 250px; }
  .cat-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px){
  .main{
    padding-top: 72px;
  }
  .gh-header-inner{
    min-height: 62px;
    width: calc(100% - 18px);
  }
  .gh-nav,
  .gh-search{
    display: none;
  }
  .gh-actions{
    margin-left: auto;
  }
  .gh-cta{
    padding: 8px 10px;
    font-size: 13px;
  }
  .clients-strip .container{
    padding-top: 16px;
    padding-bottom: 16px;
  }
  .clients-strip-head{
    align-items: flex-start;
    flex-direction: column;
  }
  .client-logo{
    width: 158px;
    min-height: 62px;
  }
  .cat-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .container.wide{
    width: calc(100% - 20px);
  }
  .gh-link{
    display: none;
  }
  .cat-grid{
    grid-template-columns: 1fr;
  }
}

html[data-theme="light"] .gh-header{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(250,252,255,.92));
  border-bottom-color: rgba(16,24,38,.14);
}
html[data-theme="light"] .gh-nav a,
html[data-theme="light"] .gh-link{
  color: rgba(16,24,38,.82);
}
html[data-theme="light"] .gh-accent-toggle{
  border-color: rgba(16,24,38,.18);
  background: rgba(16,24,38,.04);
  color: rgba(16,24,38,.72);
}
html[data-theme="light"] .gh-accent-panel{
  border-color: rgba(16,24,38,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,249,255,.95));
}
html[data-theme="light"] .gh-accent-title{
  color: rgba(16,24,38,.65);
}
html[data-theme="light"] .gh-accent-custom{
  color: rgba(16,24,38,.78);
}
html[data-theme="light"] .accent-swatch{
  border-color: rgba(16,24,38,.16);
}
html[data-theme="light"] .gh-search{
  border-color: rgba(16,24,38,.20);
  background: rgba(16,24,38,.04);
  color: rgba(16,24,38,.74);
}
html[data-theme="light"] .gh-cta{
  border-color: rgba(16,24,38,.22);
  color: rgba(16,24,38,.92);
}
html[data-theme="light"] .catalog .cat{
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(244,249,255,.90));
  border-color: rgba(16,24,38,.16);
}
html[data-theme="light"] .cat-card{
  border-color: rgba(16,24,38,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.88));
}
html[data-theme="light"] .cat-foot{
  border-top-color: rgba(16,24,38,.14);
}
html[data-theme="light"] .badge{
  border-color: rgba(16,24,38,.16);
  color: rgba(16,24,38,.82);
  background: rgba(16,24,38,.06);
}

@media (prefers-reduced-motion: reduce){
  .clients-track{ animation: none !important; }
}

/* =========================================================
   HERO SCROLL REVEAL + CLIENT LOGOS (GITHUB STYLE)
   ========================================================= */
.hero.hero-scroll{
  position: relative;
  min-height: calc(100vh - 90px);
  padding: 0;
  overflow: clip;
}
.hero.hero-scroll .hero-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 620px at 50% 16%, rgb(var(--accent-rgb) / .22), transparent 66%),
    linear-gradient(180deg, rgba(3,10,22,.56), rgba(3,10,22,.86));
}
.hero-veil{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(1,4,10,.68), rgba(2,8,20,.56) 24%, rgba(2,10,24,.92));
  pointer-events: none;
}
.hero-scroll-wrap{
  position: relative;
  min-height: calc(100vh - 90px);
}
.hero-stage{
  position: relative;
  min-height: calc(100vh - 90px);
  display: grid;
  place-items: center;
  isolation: isolate;
}
.hero-impact{
  width: min(1060px, 90vw);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  z-index: 3;
  transition: opacity .12s linear, transform .12s linear;
  will-change: transform, opacity;
  pointer-events: none;
  padding: clamp(8px, 1.2vw, 14px) 0;
}
.hero-impact::before,
.hero-impact::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, 74vw);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgb(var(--accent2-rgb) / .58),
    rgb(var(--accent-rgb) / .68),
    transparent
  );
}
.hero-impact::before{ top: -6px; }
.hero-impact::after{ display: none; }
.hero-impact > *{
  margin-left: auto;
  margin-right: auto;
}
.hero-impact-kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgb(var(--accent2-rgb) / .95);
  font-weight: 700;
}
.hero-impact-title{
  margin: 0;
  max-width: 24ch;
  font-size: clamp(40px, 5.6vw, 84px);
  line-height: 1.02;
  letter-spacing: -.9px;
  text-wrap: balance;
  color: transparent;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,1) 0%,
      rgb(var(--accent2-rgb) / .94) 58%,
      rgb(var(--accent-rgb) / .86) 100%
    );
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 8px 34px rgb(var(--accent-rgb) / .22);
  animation: impactBreath 4.8s ease-in-out infinite;
}
.hero-impact-sub{
  margin: 0;
  width: min(82ch, 100%);
  font-size: clamp(16px, 1.22vw, 21px);
  color: rgba(234,242,255,.86);
  line-height: 1.46;
}
.hero-advance{
  margin-top: 10px;
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  color: rgba(240,246,252,.94);
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  transition: transform .2s ease, color .2s ease, filter .2s ease;
  animation: heroAdvanceBob 1.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 20px rgb(var(--accent-rgb) / .28));
}
.hero-advance i{
  width: 34px;
  height: 34px;
}
.hero-advance::before,
.hero-advance::after{
  content: none;
}
.hero-advance:hover{
  transform: translateY(2px);
  color: rgb(var(--accent2-rgb) / 1);
  filter: drop-shadow(0 8px 26px rgb(var(--accent-rgb) / .44));
}
.hero-reveal{
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  justify-items: center;
  opacity: 0;
  transform: translateY(120px) scale(.96);
  pointer-events: none;
  transition: opacity .15s linear, transform .15s linear;
  will-change: transform, opacity;
  z-index: 4;
}
.hero.hero-scroll .welcome-shell{
  width: min(1700px, calc(100% - 48px));
  margin: 0 auto;
}
.hero.hero-scroll .hero-title{
  font-size: clamp(44px, 4.2vw, 70px);
}

.clients-strip{
  margin-top: 12px;
  padding-top: 18px;
}
.clients-strip .container{
  border-top: 1px solid rgba(255,255,255,.09);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
.clients-track{
  gap: clamp(34px, 4.2vw, 64px);
}
.client-logo{
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.client-logo img{
  width: auto;
  max-width: 300px;
  max-height: 76px;
  display: block;
  filter: grayscale(1) brightness(1.45) contrast(1.05);
  opacity: .52;
}
.client-logo:hover img{
  opacity: .92;
  filter: grayscale(1) brightness(1.72);
}

@media (max-width: 980px){
  .hero.hero-scroll{
    min-height: calc(100vh - 72px);
  }
  .hero-scroll-wrap{
    min-height: calc(100vh - 72px);
  }
  .hero-stage{
    min-height: calc(100vh - 72px);
  }
  .hero-impact{
    width: min(94vw, 740px);
  }
  .hero.hero-scroll .welcome-shell{
    width: min(100%, calc(100% - 22px));
    margin-bottom: 12px;
  }
  .clients-strip{
    margin-top: 8px;
    padding-top: 14px;
  }
  .client-logo img{
    max-width: 220px;
    max-height: 58px;
  }
}

@media (max-width: 640px){
  .hero-impact-kicker{
    letter-spacing: .14em;
    font-size: 11px;
  }
  .hero-impact-title{
    font-size: clamp(30px, 11vw, 44px);
    max-width: 18.5ch;
  }
  .hero-impact-sub{
    font-size: 15px;
    width: min(92vw, 48ch);
  }
}

html[data-theme="light"] .hero-veil{
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(247,250,255,.76));
}
html[data-theme="light"] .hero-impact-kicker{ color: rgb(var(--accent-rgb) / .88); }
html[data-theme="light"] .hero-impact-sub{ color: rgba(16,24,38,.74); }
html[data-theme="light"] .hero-impact-title{
  background: linear-gradient(180deg, rgba(16,24,38,.98), rgb(var(--accent-rgb) / .92));
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="light"] .hero-advance{
  color: rgba(16,24,38,.86);
  filter: drop-shadow(0 5px 16px rgb(var(--accent-rgb) / .16));
}
html[data-theme="light"] .client-logo img{
  filter: grayscale(1) brightness(.72) contrast(1.02);
  opacity: .58;
}

@keyframes heroAdvanceBob{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(6px); }
}

@keyframes impactBreath{
  0%,100%{ filter: drop-shadow(0 8px 24px rgb(var(--accent-rgb) / .10)); }
  50%{ filter: drop-shadow(0 10px 34px rgb(var(--accent-rgb) / .24)); }
}

@media (prefers-reduced-motion: reduce){
  .hero-advance,
  .hero-advance::before,
  .hero-advance::after{
    animation: none !important;
  }
}


/* =========================================================
   PRESENTATION REFRESH (GitHub-like interactions)
   ========================================================= */
:root{
  --accent: #2563eb;
  --accent2: #7c3aed;
  --accent-rgb: 37 99 235;
  --accent2-rgb: 124 58 237;
}

body{
  background:
    radial-gradient(1100px 760px at 12% -4%, rgb(var(--accent-rgb) / .22), transparent 64%),
    radial-gradient(1000px 720px at 96% 4%, rgb(var(--accent2-rgb) / .22), transparent 66%),
    linear-gradient(180deg, #020617 0%, #030a1c 36%, #071127 100%);
}

.gh-accent-custom-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.accent-swatch{
  position: relative;
  isolation: isolate;
}
.accent-swatch::before{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.36), rgba(255,255,255,0) 46%);
  pointer-events: none;
}

.hero-particles{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.hero-particles span{
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 999px;
  background: rgba(216,233,255,.95);
  opacity: .12;
  filter: drop-shadow(0 0 8px rgb(var(--accent-rgb) / .45));
  animation: heroParticleFloat var(--t) linear infinite;
  animation-delay: var(--d);
}

@keyframes heroParticleFloat{
  0%{ transform: translate3d(0, 0, 0); opacity: .08; }
  22%{ opacity: .28; }
  100%{ transform: translate3d(-16px, -56px, 0); opacity: 0; }
}

.hero-impact{
  backdrop-filter: blur(4px);
}

.hero.hero-scroll .welcome-shell{
  border-radius: 30px;
  border: 1px solid rgba(255,255,255,.17);
  background: linear-gradient(160deg, rgba(7,18,38,.86), rgba(4,11,26,.74));
  box-shadow:
    0 32px 90px rgba(0,0,0,.48),
    0 0 0 1px rgb(var(--accent-rgb) / .14),
    0 0 90px rgb(var(--accent2-rgb) / .18);
}

.hero-card{
  border-color: rgb(var(--accent-rgb) / .34);
  box-shadow:
    0 18px 54px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.07);
}

.clients-strip{
  padding-top: 10px;
  padding-bottom: 24px;
}
.clients-strip .container{
  padding-top: 10px;
  padding-bottom: 16px;
}
.clients-strip-head{
  justify-content: flex-end;
  margin-bottom: 8px;
}
#clientsPause{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  padding: 0;
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}
#clientsPause i{
  width: 16px;
  height: 16px;
}

.clients-marquee{
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 18px 0;
}
.clients-track{
  gap: clamp(30px, 4vw, 58px);
  animation-duration: 38s;
}
.client-logo img{
  max-height: 68px;
  opacity: .48;
  filter: grayscale(1) brightness(1.35) contrast(1.04);
}
.client-logo:hover img{
  opacity: .9;
}

.about-pack3{
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(170deg, rgba(9,21,44,.88), rgba(5,13,31,.78)),
    radial-gradient(760px 320px at 20% -20%, rgb(var(--accent-rgb) / .2), transparent 62%);
  box-shadow: 0 28px 80px rgba(0,0,0,.42);
}
.ap3-left,
.ap3-right{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.14);
}
.ap3-stat{
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
}

.journey{
  position: relative;
  min-height: 210vh;
  padding-bottom: 64px;
  overflow: visible;
}
.j-head{
  position: sticky;
  top: 110px;
  z-index: 15;
  backdrop-filter: blur(8px);
  background: linear-gradient(180deg, rgba(3,8,20,.9), rgba(3,8,20,.72));
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 18px;
  padding: 14px;
}
.j-scroll-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
}

.journey-stack{
  position: sticky;
  top: 206px;
  min-height: min(72vh, 700px);
  z-index: 8;
}
.journey-stack .j-pane{
  display: block !important;
  position: absolute;
  inset: 0;
}
.journey-layer{
  transition: transform .3s ease, opacity .3s ease;
  will-change: transform, opacity;
}
.journey-layer-exp{ z-index: 2; }
.journey-layer-edu{
  z-index: 4;
  transform: translate3d(0, 108%, 0) scale(.95);
  opacity: .54;
  pointer-events: none;
}
.journey[data-journey-layer="edu"] .journey-layer-edu{
  pointer-events: auto;
}
.journey[data-journey-layer="edu"] .journey-layer-exp{
  pointer-events: none;
}

.j-slider{
  height: 100%;
  min-height: min(72vh, 700px);
}
.j-stage,
.j-card-stack,
.j-card{
  height: 100%;
}
.j-card-stack{
  min-height: min(58vh, 540px);
}

.demo-lab{
  --demo-browser-a: 6 182 212;
  --demo-browser-b: 79 70 229;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(2,7,18,.94), rgba(4,12,28,.9));
}
.demo-lab[data-active-tab="cep"]{
  --demo-browser-a: 14 116 240;
  --demo-browser-b: 109 40 217;
}
.demo-lab[data-active-tab="fx"]{
  --demo-browser-a: 6 182 212;
  --demo-browser-b: 79 70 229;
}
.demo-lab[data-active-tab="cnpj"]{
  --demo-browser-a: 59 130 246;
  --demo-browser-b: 147 51 234;
}
.demo-lab[data-active-tab="crud"]{
  --demo-browser-a: 16 185 129;
  --demo-browser-b: 59 130 246;
}
.demo-browser-top{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(70% 180% at 0% 0%, rgb(var(--demo-browser-a) / .24), transparent 62%),
    radial-gradient(70% 180% at 100% 0%, rgb(var(--demo-browser-b) / .20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.demo-browser-lights{
  display: inline-flex;
  gap: 6px;
}
.demo-browser-lights span{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
}
.demo-browser-lights span:nth-child(1){ background: #ef4444; }
.demo-browser-lights span:nth-child(2){ background: #f59e0b; }
.demo-browser-lights span:nth-child(3){ background: #22c55e; }
.demo-browser-url{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(232,238,252,.74);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 12px 9px 34px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-browser-url::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.72);
  opacity: .8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.demo-browser-url::after{
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 1.5px;
  height: 14px;
  background: rgba(255,255,255,.55);
  transform: translate(-50%, -50%);
  opacity: .7;
}

.demo-browser-tabs{
  gap: 6px;
  padding: 10px 12px 0;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.demo-tab{
  --demo-tx: 0px;
  --demo-ty: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 10px 13px 9px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 238px;
  position: relative;
  transform: translate3d(var(--demo-tx), var(--demo-ty), 0);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    opacity .15s ease;
  user-select: none;
}
.demo-tab.active{
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .24), rgb(var(--accent2-rgb) / .16));
  border-color: rgb(var(--accent-rgb) / .44);
  transform: translate3d(var(--demo-tx), calc(var(--demo-ty) + 1px), 0);
  box-shadow: 0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06);
}
.demo-tab i{
  width: 14px;
  height: 14px;
  margin-top: 1px;
}
.demo-tab-label{
  font-weight: 700;
  color: rgba(240,246,252,.92);
}
.demo-tab-grip{
  margin-left: auto;
  margin-top: 2px;
  width: 14px;
  height: 12px;
  opacity: .42;
  background:
    radial-gradient(circle, currentColor 1px, transparent 1.2px) 0 0/5px 5px;
  color: rgba(232,238,252,.8);
}
.demo-tab-site{
  width: 100%;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232,238,252,.62);
  margin-left: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-tab:focus-visible{
  outline: none;
  border-color: rgb(var(--accent-rgb) / .44);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .14);
}
.demo-tab.is-dragging{
  opacity: .46;
  cursor: grabbing;
  box-shadow: none !important;
}
.demo-tab.is-drop-target{
  border-color: rgb(var(--demo-browser-b) / .54);
  box-shadow: 0 0 0 1px rgb(var(--demo-browser-b) / .20);
}
.demo-tab[data-tab="fx"].active{
  border-color: rgb(6 182 212 / .56);
  background: linear-gradient(180deg, rgb(6 182 212 / .32), rgb(79 70 229 / .20));
}
.demo-tab[data-tab="cep"].active{
  border-color: rgb(14 116 240 / .56);
  background: linear-gradient(180deg, rgb(14 116 240 / .30), rgb(109 40 217 / .20));
}
.demo-tab[data-tab="cnpj"].active{
  border-color: rgb(59 130 246 / .56);
  background: linear-gradient(180deg, rgb(59 130 246 / .30), rgb(147 51 234 / .20));
}
.demo-tab[data-tab="crud"].active{
  border-color: rgb(16 185 129 / .56);
  background: linear-gradient(180deg, rgb(16 185 129 / .28), rgb(59 130 246 / .18));
}

.demo-panel{
  --panel-a: 37 99 235;
  --panel-b: 124 58 237;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    radial-gradient(800px 280px at 16% -14%, rgb(var(--panel-a) / .24), transparent 64%),
    radial-gradient(760px 240px at 100% 0%, rgb(var(--panel-b) / .22), transparent 68%),
    linear-gradient(180deg, rgba(5,11,24,.88), rgba(5,11,24,.75));
}
.demo-panel-cep{ --panel-a: 14 116 240; --panel-b: 109 40 217; }
.demo-panel-fx{ --panel-a: 6 182 212; --panel-b: 79 70 229; }
.demo-panel-cnpj{ --panel-a: 59 130 246; --panel-b: 147 51 234; }
.demo-panel-crud{ --panel-a: 16 185 129; --panel-b: 59 130 246; }

.demo-panel .demo-form,
.demo-panel .demo-result{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border-color: rgba(255,255,255,.14);
}

.demo-site-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin: 2px 2px 12px;
}

.demo-site-brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.demo-site-ico{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgb(var(--panel-a) / .24);
}

.demo-site-ico i{
  width: 16px;
  height: 16px;
}

.demo-site-title{
  font-weight: 900;
  letter-spacing: .01em;
}

.demo-site-sub{
  margin-top: 1px;
}

.demo-live-inline{
  margin: 12px 0;
}

@media (max-width: 759px){
  .journey{
    min-height: auto;
    padding-bottom: 10px;
  }
  .j-head,
  .journey-stack{
    position: relative;
    top: auto;
  }
  .journey-stack{
    min-height: auto;
    display: grid;
    gap: 12px;
  }
  .journey-stack .j-pane{
    position: relative;
    inset: auto;
  }
  .journey-layer,
  .journey-layer-edu{
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto;
  }
  .j-slider,
  .j-stage,
  .j-card-stack,
  .j-card{
    height: auto;
    min-height: auto;
  }
  .client-logo img{
    max-height: 52px;
  }
}

html[data-theme="light"] body{
  background:
    radial-gradient(1000px 700px at 14% -8%, rgb(var(--accent-rgb) / .14), transparent 62%),
    radial-gradient(980px 680px at 88% 2%, rgb(var(--accent2-rgb) / .14), transparent 64%),
    linear-gradient(180deg, #eef3ff, #f8fbff 44%, #f4f7fc);
}
html[data-theme="light"] .demo-lab,
html[data-theme="light"] .about-pack3,
html[data-theme="light"] .j-head{
  border-color: rgba(16,24,38,.16);
}
html[data-theme="light"] .demo-showcase-particles span{
  border-color: rgba(16,24,38,.22);
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.98), rgba(148,163,184,.26));
}
html[data-theme="light"] .demo-showcase-badge{
  border-color: rgba(16,24,38,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.78));
}
html[data-theme="light"] .demo-showcase-head h2 i{
  border-color: rgb(var(--accent-rgb) / .34);
  box-shadow: 0 12px 34px rgb(var(--accent-rgb) / .14);
}
html[data-theme="light"] .demo-panel{
  background:
    radial-gradient(800px 260px at 16% -14%, rgb(var(--panel-a) / .16), transparent 62%),
    radial-gradient(760px 220px at 100% 0%, rgb(var(--panel-b) / .15), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,255,.88));
}
html[data-theme="light"] .demo-browser-top{
  border-bottom-color: rgba(16,24,38,.14);
}
html[data-theme="light"] .demo-browser-url{
  border-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.86);
  color: rgba(16,24,38,.74);
}
html[data-theme="light"] .demo-browser-url::before{
  border-color: rgba(16,24,38,.58);
}
html[data-theme="light"] .demo-browser-url::after{
  background: rgba(16,24,38,.5);
}
html[data-theme="light"] .demo-tab-site{
  color: rgba(34,47,64,.66);
}
html[data-theme="light"] .demo-tab-label{
  color: rgba(16,24,38,.9);
}
html[data-theme="light"] .demo-site-ico{
  border-color: rgba(16,24,38,.16);
  background: rgb(var(--panel-a) / .18);
}
html[data-theme="light"] .hero.hero-scroll .welcome-shell{
  background: linear-gradient(160deg, rgba(255,255,255,.92), rgba(246,249,255,.84));
}

/* =========================================================
   SCENE OVERRIDES V3 (hero sky->mountain + journey moon->sun)
   ========================================================= */
.hero.hero-scroll{
  --hero-p: 0;
  padding-bottom: 26px;
}

.hero-seam{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22px;
  z-index: 8;
  pointer-events: none;
}
.hero-seam span{
  position: absolute;
  left: min(5vw, 52px);
  right: min(5vw, 52px);
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent2-rgb) / .5), rgb(var(--accent-rgb) / .78), transparent);
}
.hero-seam::after{
  content: "";
  position: absolute;
  left: min(5vw, 52px);
  right: min(5vw, 52px);
  bottom: 0;
  height: 44px;
  background: linear-gradient(180deg, transparent, rgba(3,7,17,.93));
}

.hero-impact{
  z-index: 3 !important;
}

.hero-reveal{
  z-index: 6 !important;
  align-items: end !important;
  padding-bottom: 0;
  transform: translateY(68vh) scale(.82);
}
.hero-reveal::before{
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 0;
  height: 56%;
  border-radius: 24px 24px 0 0;
  background:
    radial-gradient(38% 56% at 16% 100%, rgb(var(--accent-rgb) / .22), transparent 66%),
    radial-gradient(42% 62% at 82% 100%, rgb(var(--accent2-rgb) / .2), transparent 70%),
    linear-gradient(180deg, rgba(3,8,20,.02), rgba(3,8,20,.86));
  opacity: calc(.44 + (var(--hero-p) * .42));
  pointer-events: none;
}
.hero-reveal > *{
  position: relative;
  z-index: 2;
}

.hero-window{
  position: relative;
  overflow: hidden;
  padding-top: 60px;
  border-radius: 28px;
  background: linear-gradient(165deg, rgba(4,11,26,.97), rgba(5,14,32,.95));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow:
    0 32px 90px rgba(0,0,0,.52),
    0 0 0 1px rgb(var(--accent-rgb) / .14),
    0 0 80px rgb(var(--accent2-rgb) / .2);
}
.hero-window::before{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}
.hero-window::after{
  content: "";
  position: absolute;
  top: 16px;
  left: 16px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 16px 0 0 #f59e0b, 32px 0 0 #22c55e;
}

.journey{
  --journey-p: 0;
  min-height: 228vh;
  padding-bottom: 44px;
}

.journey-stack{
  position: sticky;
  top: 188px;
  min-height: min(72vh, 730px);
  z-index: 10;
  overflow: hidden;
  border-radius: 18px;
}

.journey-ridge{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  z-index: 9;
  background: linear-gradient(90deg, transparent, rgb(var(--accent2-rgb) / .5), rgb(var(--accent-rgb) / .78), transparent);
}

.journey-stack .j-pane{
  display: block !important;
  position: absolute;
  inset: 0;
}

.journey-layer{
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform, opacity;
}

.journey-layer-exp{ z-index: 11; }
.journey-layer-edu{
  z-index: 13;
  transform: translate3d(0, 116%, 0) scale(.92);
  opacity: .2;
  pointer-events: none;
}

.journey-stack::before,
.journey-stack::after{
  content: "";
  position: absolute;
  right: 14px;
  top: -34px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity .25s linear, transform .25s ease;
}
.journey-stack::before{
  background: radial-gradient(circle at 30% 30%, #ffffff, #dbeafe 65%, rgba(255,255,255,.2));
  box-shadow: 0 0 24px rgba(255,255,255,.3);
  opacity: calc(1 - var(--journey-p));
  transform: translateY(calc(var(--journey-p) * 20px));
}
.journey-stack::after{
  background: radial-gradient(circle at 35% 35%, #fff7cc, #facc15 65%, rgba(250,204,21,.2));
  box-shadow: 0 0 26px rgba(250,204,21,.38);
  opacity: var(--journey-p);
  transform: translateY(calc((1 - var(--journey-p)) * 20px));
}

.journey-stack .j-slider{
  grid-template-columns: 1fr;
  min-height: min(72vh, 730px);
}
.journey-stack .j-timeline,
.journey-stack .j-nav,
.journey-stack .j-footer{
  display: none !important;
}
.journey-stack .j-stage{
  height: 100%;
}
.journey-stack .j-card-stack{
  height: 100%;
  min-height: min(62vh, 610px);
}
.journey-stack .j-card{
  height: 100%;
}

@media (max-width: 759px){
  .hero.hero-scroll{
    padding-bottom: 14px;
  }
  .hero-reveal{
    transform: translateY(42vh) scale(.88);
  }
  .hero-seam{
    height: 16px;
  }

  .journey{
    min-height: auto;
    padding-bottom: 8px;
  }
  .journey-stack{
    position: relative;
    top: auto;
    min-height: auto;
  }
  .journey-stack .j-pane{
    position: relative;
    inset: auto;
    display: block !important;
  }
  .journey-layer,
  .journey-layer-edu{
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .journey-stack .j-timeline,
  .journey-stack .j-nav,
  .journey-stack .j-footer{
    display: flex !important;
  }
  .journey-ridge,
  .journey-stack::before,
  .journey-stack::after{
    display: none;
  }
}

/* =========================================================
   FINAL FIX V4 (hero lock visual + clients full width clean)
   ========================================================= */
.hero.hero-scroll .hero-reveal{
  align-items: end !important;
  padding-bottom: 0 !important;
}

.hero.hero-scroll .hero-window{
  border: 1px solid rgba(255,255,255,.18) !important;
  border-bottom: 0 !important;
  border-radius: 28px 28px 0 0 !important;
  box-shadow:
    0 32px 90px rgba(0,0,0,.52),
    0 0 0 1px rgb(var(--accent-rgb) / .14),
    0 0 80px rgb(var(--accent2-rgb) / .2) !important;
}

.hero.hero-scroll .hero-window .hero-grid{
  position: relative;
}

.hero.hero-scroll .hero-window .hero-grid::after{
  content: "";
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: -1px;
  height: clamp(62px, 10vw, 104px);
  background: linear-gradient(
    180deg,
    rgba(3,8,20,0) 0%,
    rgba(3,8,20,.86) 58%,
    rgba(3,8,20,.98) 100%
  );
  pointer-events: none;
}

.clients-strip{
  width: 100%;
  padding-top: 10px !important;
  padding-bottom: 26px !important;
}

.clients-strip .container,
.clients-strip .container.wide{
  position: relative;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-top: 44px !important;
  padding-bottom: 0 !important;
  padding-left: clamp(14px, 4vw, 56px) !important;
  padding-right: clamp(14px, 4vw, 56px) !important;
  border: 0 !important;
}

.clients-strip-head{
  position: absolute !important;
  top: 0;
  right: clamp(14px, 4vw, 56px);
  z-index: 5;
  margin: 0 !important;
  pointer-events: none;
}

.clients-strip-head > *{
  pointer-events: auto;
}

#clientsPause{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  padding: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
}

#clientsPause i{
  width: 16px;
  height: 16px;
}

.clients-marquee{
  border: 0 !important;
  padding: 10px 0 !important;
  background: transparent !important;
}

.clients-marquee::before,
.clients-marquee::after,
.clients-strip::before,
.clients-strip::after{
  content: none !important;
}

.clients-track{
  gap: clamp(32px, 4.2vw, 62px) !important;
}

.client-logo{
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.client-logo img{
  max-height: 72px;
  opacity: .56;
}

@media (max-width: 759px){
  .clients-strip .container,
  .clients-strip .container.wide{
    padding-top: 36px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .clients-strip-head{
    right: 14px;
  }

  .client-logo img{
    max-height: 56px;
  }
}

/* =========================================================
   HOTFIX V5 (hero reveal + header seam)
   ========================================================= */
.main{
  padding-top: 74px !important;
}

.gh-header{
  border-bottom-color: rgba(255,255,255,.06);
}

.hero.hero-scroll{
  padding-bottom: 0;
  overflow: hidden;
}

.hero.hero-scroll::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(170px, 24vh, 280px);
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3,8,20,0) 0%,
    rgba(3,8,20,.42) 58%,
    rgba(3,8,20,.74) 82%,
    rgba(3,8,20,.9) 100%
  );
}

.hero-reveal::before{
  left: 0;
  right: 0;
  border-radius: 0;
  height: clamp(200px, 34vh, 380px);
}

.hero-reveal::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(100px, 16vh, 190px);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(3,8,20,0) 0%,
    rgba(3,8,20,.28) 56%,
    rgba(3,8,20,.52) 82%,
    rgba(3,8,20,.74) 100%
  );
}

.hero.hero-scroll .hero-window .hero-grid::after{
  height: clamp(64px, 9vw, 120px);
  background: linear-gradient(
    180deg,
    rgba(3,8,20,0) 0%,
    rgba(3,8,20,.46) 72%,
    rgba(3,8,20,.72) 100%
  );
}

@media (max-width: 980px){
  .main{
    padding-top: 62px !important;
  }
}

/* =========================================================
   JOURNEY NEO (editorial grid, sem card de fundo)
   ========================================================= */
.journey-neo{
  position: relative;
  margin-top: 8px;
  --journey-collapsed-h: 760px;
  border-top: 1px solid rgba(255,255,255,.12);
  border-bottom: 0;
  background: transparent;
  overflow: hidden;
}

.journey-neo::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 300px at 18% -12%, rgb(var(--accent-rgb) / .10), transparent 66%),
    radial-gradient(620px 300px at 88% 108%, rgb(var(--accent2-rgb) / .10), transparent 68%);
  opacity: .75;
}

.journey-neo-grid{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-areas:
    "intro stats"
    "exp edu";
}

.journey-neo-clip{
  position: relative;
  overflow: hidden;
  max-height: none;
  transition: max-height .35s ease;
}

.journey-neo.is-collapsed .journey-neo-clip{
  max-height: var(--journey-collapsed-h);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 14px), transparent 100%);
}

.journey-neo:not(.is-collapsed) .journey-neo-clip{
  -webkit-mask-image: none;
  mask-image: none;
}

.journey-neo-fade{
  display: none;
}

.journey-neo-fade::before{
  display: none;
}

.journey-neo-fade::after{
  display: none;
}

.journey-neo.is-collapsed.is-truncatable .journey-neo-fade{
  opacity: 1;
}

.journey-neo-reveal{
  position: relative;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 6px 0 0;
  background: transparent;
  box-shadow: none;
}

.journey-neo.is-truncatable .journey-neo-reveal{
  display: flex;
}

.journey-neo.is-collapsed.is-truncatable .journey-neo-reveal{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  padding: 0;
  pointer-events: none;
}

.journey-neo.is-collapsed.is-truncatable .journey-neo-reveal-btn{
  pointer-events: auto;
}

.journey-neo:not(.is-collapsed).is-truncatable .journey-neo-reveal{
  position: relative;
  padding: 6px 0 0;
}

.journey-neo-reveal::before{
  display: none;
}

.journey-neo-reveal-btn{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 0;
  border: 0;
  background:
    linear-gradient(180deg, rgba(12,20,38,.92), rgba(8,14,28,.92)),
    radial-gradient(180px 60px at 20% 0%, rgb(var(--accent-rgb) / .10), transparent 72%);
  color: rgba(240,246,252,.94);
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: none;
  transition: color .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.journey-neo-reveal-btn::before{
  display: none;
}

.journey-neo-reveal-btn:hover{
  color: #fff;
  border-color: rgba(255,255,255,.22);
  box-shadow: none;
}

.journey-neo-reveal-btn:focus-visible{
  outline: none;
  color: #fff;
  border-color: rgb(var(--accent-rgb) / .42);
  box-shadow:
    0 0 0 2px rgb(var(--accent-rgb) / .16);
}

.journey-neo-reveal-btn i{
  width: 16px;
  height: 16px;
  transition: transform .22s ease;
}

.journey-neo:not(.is-collapsed) .journey-neo-reveal-btn i{
  transform: rotate(180deg);
}

.journey-neo.is-collapsed .journey-neo-reveal-btn i{
  animation: journey-reveal-chevron 1.15s ease-in-out infinite;
}

@keyframes journey-reveal-chevron{
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

.journey-neo-block{
  padding: clamp(22px, 2.8vw, 34px);
}

.journey-neo-intro{
  grid-area: intro;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.journey-neo-stats{
  grid-area: stats;
  border-left: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  display: grid;
  gap: 10px;
  align-content: center;
}

.journey-neo-col-exp{ grid-area: exp; }
.journey-neo-col-edu{
  grid-area: edu;
  border-left: 1px solid rgba(255,255,255,.10);
}

.journey-neo-kicker{
  margin: 0 0 12px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgb(var(--accent2-rgb) / .95);
  font-weight: 700;
}

.journey-neo-intro h3{
  margin: 0 0 10px;
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 20ch;
}

.journey-neo-intro p{
  margin: 0;
  max-width: 70ch;
}

.journey-neo-metric{
  display: grid;
  gap: 4px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.journey-neo-metric:last-child{ border-bottom: 0; }

.journey-neo-metric-v{
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1;
  color: #f8fbff;
}

.journey-neo-metric-k{
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(230,238,249,.72);
}

.journey-neo-col-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.journey-neo-col-head h4{
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(18px, 2vw, 24px);
}

.journey-neo-col-count{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(230,238,249,.66);
}

.journey-neo-list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.journey-neo-item{
  position: relative;
  padding: 0 0 24px 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.journey-neo-item:last-child{
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.journey-neo-item::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  bottom: -24px;
  width: 1px;
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .56), rgba(255,255,255,.10));
}

.journey-neo-item:last-child::before{ bottom: 0; }

.journey-neo-item::after{
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / 1);
  box-shadow: 0 0 0 6px rgb(var(--accent-rgb) / .14);
}

.journey-neo-item-top{
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
  margin-bottom: 5px;
}

.journey-neo-role{
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.journey-neo-period{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(230,238,249,.68);
  white-space: nowrap;
}

.journey-neo-place{
  margin: 0 0 8px;
  font-size: 14px;
  color: rgba(236,243,252,.88);
}

.journey-neo-meta{
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.journey-neo-note{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
}

.journey-neo-desc{
  margin: 0 0 10px;
  line-height: 1.5;
  color: rgba(236,243,252,.80);
}

.journey-neo-bullets{
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.journey-neo-bullets li{
  display: flex;
  align-items: flex-start;
  gap: 7px;
  line-height: 1.42;
  color: rgba(236,243,252,.80);
}

.journey-neo-bullets i{
  margin-top: 2px;
  opacity: .95;
}

.journey-neo-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.journey-neo-tag{
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-size: 12px;
  color: rgba(230,238,249,.84);
}

@media (max-width: 1120px){
  .journey-neo{
    --journey-collapsed-h: 980px;
  }

  .journey-neo-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "intro"
      "stats"
      "exp"
      "edu";
  }

  .journey-neo-stats,
  .journey-neo-col-edu{
    border-left: 0;
  }

  .journey-neo-col-exp,
  .journey-neo-col-edu{
    border-top: 1px solid rgba(255,255,255,.10);
  }
}

@media (max-width: 640px){
  .journey-neo{
    --journey-collapsed-h: 1180px;
  }

  .journey-neo-fade{
    display: none;
  }

  .journey-neo-reveal{
    gap: 8px;
    padding: 8px 0 12px;
  }

  .journey-neo.is-collapsed.is-truncatable .journey-neo-reveal{
    bottom: 6px;
    padding: 0;
  }

  .journey-neo-reveal-btn{
    width: auto;
    justify-content: center;
    max-width: calc(100% - 12px);
    text-align: center;
  }

  .journey-neo-item-top{
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }

  .journey-neo-role{
    font-size: 16px;
  }
}

html[data-theme="light"] .journey-neo{
  border-top-color: rgba(16,24,38,.16);
  border-bottom-color: transparent;
}

html[data-theme="light"] .journey-neo-fade{
  display: none;
}

html[data-theme="light"] .journey-neo-reveal{
  background: transparent;
}

html[data-theme="light"] .journey-neo-reveal::before{
  display: none;
}

html[data-theme="light"] .journey-neo-reveal-btn{
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.90)),
    radial-gradient(180px 60px at 20% 0%, rgb(var(--accent-rgb) / .08), transparent 72%);
  color: rgba(16,24,38,.92);
  box-shadow: none;
}

html[data-theme="light"] .journey-neo-reveal-btn:hover{
  color: rgba(16,24,38,.98);
  border-color: rgba(16,24,38,.22);
}

html[data-theme="light"] .journey-neo-intro,
html[data-theme="light"] .journey-neo-stats,
html[data-theme="light"] .journey-neo-col-edu,
html[data-theme="light"] .journey-neo-col-exp{
  border-color: rgba(16,24,38,.12);
}

html[data-theme="light"] .journey-neo-metric-v,
html[data-theme="light"] .journey-neo-role{
  color: #0c121c;
}

html[data-theme="light"] .journey-neo-metric-k,
html[data-theme="light"] .journey-neo-col-count,
html[data-theme="light"] .journey-neo-period{
  color: rgba(16,24,38,.58);
}

html[data-theme="light"] .journey-neo-place,
html[data-theme="light"] .journey-neo-desc,
html[data-theme="light"] .journey-neo-bullets li{
  color: rgba(16,24,38,.82);
}

html[data-theme="light"] .journey-neo-tag{
  border-color: rgba(16,24,38,.14);
  background: rgba(16,24,38,.04);
  color: rgba(16,24,38,.78);
}

/* =========================================================
   CATALOG NEO (full width + rail slider)
   ========================================================= */
.catalog{
  overflow: hidden;
}

.catalog .container.wide{
  width: min(1920px, calc(100% - 18px));
  max-width: none;
}

.catalog .cat-neo{
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}

.catalog .cat-neo .cat-top{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 8px 2px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.catalog .cat-neo .cat-tabs{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog .cat-neo .cat-tab{
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
  padding: 10px 14px;
  font-weight: 700;
}

.catalog .cat-neo .cat-tab.active{
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .28), rgb(var(--accent2-rgb) / .22));
  border-color: rgb(var(--accent-rgb) / .48);
}

.catalog .cat-neo .cat-filters{
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
  padding: 14px;
}

.catalog .cat-neo .cat-filters .field input,
.catalog .cat-neo .cat-filters .field select{
  background: rgba(255,255,255,.03);
}

.catalog .cat-rail-head{
  margin-top: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 12px;
  row-gap: 6px;
}

.catalog #catStats{
  grid-column: 1;
}

.catalog .cat-section-state{
  grid-column: 1;
  color: rgb(var(--accent-rgb) / .94);
  letter-spacing: .01em;
}

.catalog #catHint{
  grid-column: 1;
}

.catalog .cat-rail-actions{
  grid-column: 2;
  grid-row: 1 / span 3;
  display: inline-flex;
  gap: 8px;
  align-self: center;
}

.catalog .cat-rail-btn{
  width: 38px;
  height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, opacity .18s ease;
}

.catalog .cat-rail-btn:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / .52);
}

.catalog .cat-rail-btn.is-off,
.catalog .cat-rail-btn:disabled{
  opacity: .42;
  cursor: default;
  transform: none;
}

.catalog .cat-rail{
  margin-top: 12px;
}

.catalog .cat-neo #catGrid{
  display: flex !important;
  grid-template-columns: none !important;
  gap: 16px !important;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 2px 10px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--accent-rgb) / .45) transparent;
  transition: opacity .28s ease, transform .28s ease, filter .28s ease;
}

.catalog .cat-neo.is-switching #catGrid{
  opacity: .22;
  transform: translateY(10px) scale(.992);
  filter: blur(1.6px);
  pointer-events: none;
}

.catalog .cat-neo #catGrid::-webkit-scrollbar{
  height: 9px;
}

.catalog .cat-neo #catGrid::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--accent-rgb) / .65), rgb(var(--accent2-rgb) / .55));
}

.catalog .cat-neo #catGrid .cat-card{
  flex: 0 0 clamp(320px, 25vw, 420px);
  width: auto;
  min-height: 452px;
  scroll-snap-align: start;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 22px;
  background:
    radial-gradient(140% 120% at 0% 0%, rgb(var(--accent-rgb) / .13), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow: 0 18px 52px rgba(0,0,0,.30);
}

.catalog .cat-neo #catGrid .cat-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 24px 66px rgba(0,0,0,.42);
}

.catalog .cat-neo #catGrid .cat-cover{
  height: 220px;
  margin: 10px 10px 0;
  border-radius: 15px;
}

.catalog .cat-neo #catGrid .cat-title{
  font-size: 19px;
  line-height: 1.22;
}

.catalog .cat-neo #catGrid .cat-excerpt{
  min-height: 4.2em;
  -webkit-line-clamp: 3;
}

.catalog .cat-neo #catGrid .cat-foot{
  margin-top: auto;
}

.catalog .cat-neo[data-kind="system"] #catGrid .cat-card{
  flex-basis: clamp(350px, 28vw, 500px);
  min-height: 496px;
}

.catalog .cat-neo[data-kind="system"] #catGrid .cat-cover{
  height: 252px;
}

.catalog .cat-neo[data-kind="site"] #catGrid .cat-card{
  flex-basis: clamp(380px, 31vw, 540px);
  min-height: 520px;
}

.catalog .cat-neo[data-kind="site"] #catGrid .cat-cover{
  height: 286px;
}

.catalog .cat-neo[data-kind="site"] #catGrid .cat-title{
  font-size: 20px;
}

.catalog .cat-neo[data-kind="tech"] #catGrid .cat-card{
  flex-basis: clamp(320px, 25vw, 418px);
  min-height: 462px;
}

.catalog .cat-neo[data-kind="tech"] #catGrid .cat-cover{
  height: 206px;
}

.catalog .cat-neo[data-mode="global"] #catGrid .cat-card{
  flex-basis: clamp(320px, 24vw, 400px);
  min-height: 440px;
}

.catalog .cat-neo[data-mode="global"] #catGrid .cat-cover{
  height: 218px;
}

.catalog .cat-neo #catGrid .cat-empty{
  flex: 1 0 100%;
  width: 100%;
}

.catalog .cat-neo .cat-pager{
  display: none !important;
}

@media (max-width: 1080px){
  .catalog .cat-neo .cat-top{
    grid-template-columns: 1fr;
  }

  .catalog .cat-rail-head{
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .catalog .cat-rail-actions{
    grid-column: 1;
    grid-row: auto;
  }
}

@media (max-width: 760px){
  .catalog .container.wide{
    width: calc(100% - 10px);
  }

  .catalog .cat-neo #catGrid .cat-card{
    flex-basis: min(90vw, 420px) !important;
    min-height: 430px;
  }
}

html[data-theme="light"] .catalog .cat-neo .cat-top{
  border-bottom-color: rgba(16,24,38,.14);
}

html[data-theme="light"] .catalog .cat-neo .cat-tab{
  border-color: rgba(16,24,38,.20);
  background: rgba(16,24,38,.03);
}

html[data-theme="light"] .catalog .cat-neo .cat-tab.active{
  border-color: rgb(var(--accent-rgb) / .44);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .16), rgb(var(--accent2-rgb) / .14));
}

html[data-theme="light"] .catalog .cat-neo .cat-filters{
  border-color: rgba(16,24,38,.12);
  background: linear-gradient(180deg, rgba(16,24,38,.035), rgba(16,24,38,.02));
}

html[data-theme="light"] .catalog .cat-neo #catGrid .cat-card{
  border-color: rgba(16,24,38,.14);
  background:
    radial-gradient(140% 120% at 0% 0%, rgb(var(--accent-rgb) / .08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(247,250,255,.92));
  box-shadow: 0 14px 38px rgba(16,24,38,.14);
}

/* =========================================================
   CATALOG ALTDECK (2026 rebuild)
   ========================================================= */
.catalog .catalog-shell{
  margin-top: 16px;
  padding: clamp(14px, 2.2vw, 22px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(120% 120% at 0% 0%, rgb(var(--accent-rgb) / .10), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.018));
}

.catalog .catalog-shell:focus-visible{
  outline: 2px solid rgb(var(--accent-rgb) / .75);
  outline-offset: 2px;
}

.catalog .catalog-shell-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.catalog .catalog-kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  font-weight: 700;
  letter-spacing: .01em;
}

.catalog .catalog-kicker i{
  width: 16px;
  height: 16px;
}

.catalog .altdeck{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
}

.catalog .altdeck-nav{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

.catalog .altdeck-nav:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--accent-rgb) / .62);
  background: rgb(var(--accent-rgb) / .12);
}

.catalog .altdeck-stage{
  position: relative;
  min-height: 720px;
  overflow: hidden;
}

.catalog .altdeck-canvas{
  position: relative;
  min-height: inherit;
  perspective: 1600px;
}

.catalog .altdeck-card{
  position: absolute;
  top: 0;
  left: 50%;
  width: min(980px, 76%);
  min-height: 700px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(95% 80% at 50% -12%, rgba(255,255,255,.15), transparent 58%),
    linear-gradient(180deg, rgba(6,14,28,.92), rgba(6,14,28,.76));
  box-shadow: 0 26px 80px rgba(0,0,0,.46);
  transform: translate3d(-50%, 0, 0) scale(.78);
  opacity: 0;
  pointer-events: none;
  transition: transform .42s cubic-bezier(.2,.9,.2,1), opacity .35s ease, filter .35s ease;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.catalog .altdeck-card.is-active{
  transform: translate3d(-50%, 0, 0) scale(1);
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  filter: saturate(1);
}

.catalog .altdeck-card.is-prev{
  transform: translate3d(-88%, 20px, 0) scale(.87) rotateY(9deg);
  opacity: .5;
  pointer-events: auto;
  z-index: 2;
  filter: saturate(.78) blur(.2px);
  cursor: pointer;
}

.catalog .altdeck-card.is-next{
  transform: translate3d(-12%, 20px, 0) scale(.87) rotateY(-9deg);
  opacity: .5;
  pointer-events: auto;
  z-index: 2;
  filter: saturate(.78) blur(.2px);
  cursor: pointer;
}

.catalog .altdeck-card.is-away{
  transform: translate3d(-50%, 44px, 0) scale(.68);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

.catalog .altdeck-windowbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.catalog .altdeck-appid{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.catalog .altdeck-appicon{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.16);
  background: rgb(var(--accent-rgb) / .16);
  flex: 0 0 auto;
}

.catalog .altdeck-appicon i{
  width: 16px;
  height: 16px;
}

.catalog .altdeck-appname{
  font-weight: 700;
  letter-spacing: .01em;
}

.catalog .altdeck-appmeta{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog .altdeck-controls{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.catalog .altdeck-control{
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.03);
  opacity: .86;
}

.catalog .altdeck-control i{
  width: 14px;
  height: 14px;
}

.catalog .altdeck-control.close{
  border-color: rgba(255,121,121,.44);
  color: #ffb4b4;
}

.catalog .altdeck-control.max{
  border-color: rgba(123,255,183,.42);
  color: #b6ffd7;
}

.catalog .altdeck-control.min{
  border-color: rgba(255,236,150,.42);
  color: #fff0b2;
}

.catalog .altdeck-preview{
  margin: 12px 14px 0;
  height: clamp(210px, 31vw, 330px);
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 14px;
}

.catalog .altdeck-preview-systems{
  background:
    radial-gradient(100% 100% at 0% 0%, rgba(58,164,255,.50), transparent 58%),
    linear-gradient(140deg, #06203a 0%, #071a30 46%, #09152a 100%);
}

.catalog .altdeck-preview-sites{
  background:
    radial-gradient(100% 100% at 100% 0%, rgba(83,204,141,.46), transparent 60%),
    linear-gradient(140deg, #072515 0%, #081f18 44%, #081625 100%);
}

.catalog .altdeck-preview-pc-portfolio{
  background:
    radial-gradient(100% 100% at 0% 100%, rgba(243,180,86,.45), transparent 60%),
    linear-gradient(140deg, #2b1706 0%, #231206 46%, #171426 100%);
}

.catalog .altdeck-logo{
  width: 86px;
  height: 86px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.25);
}

.catalog .altdeck-logo img{
  width: 84%;
  height: 84%;
  object-fit: contain;
}

.catalog .altdeck-logo-fallback{
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.92);
}

.catalog .altdeck-badge{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.24);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
}

.catalog .altdeck-content{
  padding: 14px 16px 16px;
  display: grid;
  grid-template-rows: auto auto auto auto 1fr;
  gap: 10px;
}

.catalog .altdeck-title{
  margin: 0;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.15;
}

.catalog .altdeck-summary{
  margin: 0;
}

.catalog .altdeck-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.catalog .altdeck-list{
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
}

.catalog .altdeck-list li{
  color: rgba(255,255,255,.86);
}

.catalog .altdeck-actions{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.catalog .altdeck-link-muted{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px dashed rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
  font-size: .9rem;
}

.catalog .altdeck-city{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.catalog .altdeck-strip{
  margin-top: 14px;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: thin;
}

.catalog .altdeck-thumb{
  flex: 0 0 auto;
  max-width: 230px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.catalog .altdeck-thumb:hover{
  transform: translateY(-1px);
}

.catalog .altdeck-thumb i{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.catalog .altdeck-thumb span{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog .altdeck-thumb.is-active{
  border-color: rgb(var(--accent-rgb) / .58);
  background: linear-gradient(135deg, rgb(var(--accent-rgb) / .26), rgb(var(--accent2-rgb) / .15));
}

.catalog .altdeck-footer{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.catalog .altdeck-segment{
  color: rgb(var(--accent-rgb) / .95);
}

.sr-only{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 1180px){
  .catalog .altdeck-stage{
    min-height: 680px;
  }

  .catalog .altdeck-card{
    width: min(920px, 88%);
    min-height: 660px;
  }

  .catalog .altdeck-card.is-prev{
    transform: translate3d(-84%, 16px, 0) scale(.84) rotateY(8deg);
  }

  .catalog .altdeck-card.is-next{
    transform: translate3d(-16%, 16px, 0) scale(.84) rotateY(-8deg);
  }
}

@media (max-width: 860px){
  .catalog .altdeck{
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .catalog .altdeck-nav{
    width: 100%;
    height: 38px;
  }

  .catalog .altdeck-stage{
    min-height: 690px;
  }

  .catalog .altdeck-card{
    width: 100%;
    min-height: 676px;
    border-radius: 16px;
  }

  .catalog .altdeck-card.is-prev,
  .catalog .altdeck-card.is-next{
    transform: translate3d(-50%, 0, 0) scale(.96);
    opacity: .16;
    pointer-events: none;
  }

  .catalog .altdeck-preview{
    height: 208px;
  }
}

@media (max-width: 620px){
  .catalog .catalog-shell{
    padding: 12px;
    border-radius: 16px;
  }

  .catalog .altdeck-stage{
    min-height: 700px;
  }

  .catalog .altdeck-card{
    min-height: 686px;
  }

  .catalog .altdeck-windowbar{
    padding: 10px;
  }

  .catalog .altdeck-content{
    padding: 12px;
  }

  .catalog .altdeck-actions .btn{
    width: 100%;
    justify-content: center;
  }
}

html[data-theme="light"] .catalog .catalog-shell{
  border-color: rgba(16,24,38,.14);
  background:
    radial-gradient(120% 120% at 0% 0%, rgb(var(--accent-rgb) / .08), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,255,.80));
}

html[data-theme="light"] .catalog .catalog-kicker,
html[data-theme="light"] .catalog .altdeck-nav,
html[data-theme="light"] .catalog .altdeck-thumb{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.84);
  color: rgba(16,24,38,.95);
}

html[data-theme="light"] .catalog .altdeck-card{
  border-color: rgba(16,24,38,.16);
  background:
    radial-gradient(95% 80% at 50% -12%, rgba(255,255,255,.72), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,255,.90));
  box-shadow: 0 16px 42px rgba(16,24,38,.16);
}

html[data-theme="light"] .catalog .altdeck-windowbar{
  border-bottom-color: rgba(16,24,38,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(245,249,255,.76));
}

html[data-theme="light"] .catalog .altdeck-title{
  color: rgba(16,24,38,.96);
}

html[data-theme="light"] .catalog .altdeck-summary,
html[data-theme="light"] .catalog .altdeck-list li,
html[data-theme="light"] .catalog .altdeck-link-muted{
  color: rgba(34,47,64,.82);
}

html[data-theme="light"] .catalog .altdeck-link-muted{
  border-color: rgba(16,24,38,.22);
  background: rgba(255,255,255,.64);
}

/* =========================================================
   ABOUT SHOWCASE (GitHub-inspired)
   ========================================================= */
.about-gh{
  position: relative;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 24px;
  overflow: hidden;
  background:
    radial-gradient(760px 260px at 20% -20%, rgb(var(--accent-rgb) / .22), transparent 62%),
    radial-gradient(760px 260px at 100% 0%, rgb(var(--accent2-rgb) / .18), transparent 64%),
    linear-gradient(180deg, rgba(6,15,33,.92), rgba(4,11,26,.86));
  box-shadow: 0 30px 86px rgba(0,0,0,.36);
}

.about-gh-top{
  padding: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.about-gh-top-grid{
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}

.about-gh-copy{
  min-width: 0;
  align-self: start;
}

.about-gh-kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgb(var(--accent2-rgb) / .92);
  font-weight: 700;
}

.about-gh-copy h3{
  margin: 8px 0 10px;
  font-size: clamp(24px, 2.5vw, 36px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.about-gh-lead{
  margin: 0;
  color: rgba(232,238,252,.86);
  line-height: 1.66;
}

.about-gh-pillrow{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-gh-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  color: rgba(232,238,252,.92);
  font-size: 12px;
  white-space: nowrap;
}

.about-gh-pill i{
  width: 14px;
  height: 14px;
}

.about-gh-browser{
  min-width: 0;
}

.about-gh-browser-shell{
  --about-rx: 0deg;
  --about-ry: 0deg;
  --about-gx: 50%;
  --about-gy: 30%;
  position: relative;
  min-height: 410px;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--about-rx)) rotateY(var(--about-ry));
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  box-shadow: 0 22px 54px rgba(0,0,0,.28);
  will-change: transform;
}

.about-gh-browser-shell[data-about-dragging="1"]{
  transition: box-shadow .22s ease, border-color .22s ease;
}

.about-gh-browser-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(220px 120px at var(--about-gx) var(--about-gy), rgb(var(--accent-rgb) / .12), transparent 72%),
    radial-gradient(280px 140px at calc(var(--about-gx) + 18%) calc(var(--about-gy) + 8%), rgb(var(--accent2-rgb) / .10), transparent 74%);
  opacity: .9;
}

.about-gh-browser-top{
  position: relative;
  z-index: 1;
  align-items: stretch;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.about-gh-browser-titlebar{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(80% 160% at 0% 0%, rgb(var(--accent-rgb) / .14), transparent 66%),
    radial-gradient(76% 160% at 100% 0%, rgb(var(--accent2-rgb) / .12), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
}

.about-gh-browser-tabs{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1 1 auto;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 10px 10px 0;
  scrollbar-width: thin;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.about-gh-browser-tab{
  --tx: 0px;
  --ty: 0px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px 8px;
  border-radius: 12px 12px 0 0;
  border-bottom-color: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  color: rgba(240,246,252,.86);
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  min-width: 206px;
  transform: translate3d(var(--tx), var(--ty), 0);
  transition:
    transform .16s ease,
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease,
    opacity .16s ease;
}

.about-gh-browser-tab::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(110deg, rgb(var(--accent-rgb) / .14), rgb(var(--accent2-rgb) / .10));
  opacity: 0;
  transition: opacity .16s ease;
}

.about-gh-browser-tab:hover{
  border-color: rgba(255,255,255,.20);
  border-bottom-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.95);
}

.about-gh-browser-tab:hover::after{
  opacity: .55;
}

.about-gh-browser-tab.is-active{
  border-color: rgb(var(--accent-rgb) / .36);
  border-bottom-color: rgba(7,13,25,.35);
  color: rgba(255,255,255,.98);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)),
    radial-gradient(180px 60px at 20% 0%, rgb(var(--accent-rgb) / .14), transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 4px 12px rgba(0,0,0,.20),
    0 0 0 1px rgb(var(--accent-rgb) / .14);
  transform: translate3d(var(--tx), calc(var(--ty) + 1px), 0);
}

.about-gh-browser-tab.is-active::after{
  opacity: .85;
}

.about-gh-browser-tab.is-dragging{
  opacity: .48;
  cursor: grabbing;
  box-shadow: none;
}

.about-gh-browser-tab.is-drop-target{
  border-color: rgb(var(--accent2-rgb) / .38);
  box-shadow: 0 0 0 1px rgb(var(--accent2-rgb) / .18);
}

.about-gh-browser-tab:focus-visible{
  outline: none;
  border-color: rgb(var(--accent-rgb) / .38);
  box-shadow: 0 0 0 2px rgb(var(--accent-rgb) / .16);
}

.about-gh-browser-tab i{
  width: 14px;
  height: 14px;
  position: relative;
  z-index: 1;
}

.about-gh-browser-tab span{
  position: relative;
  z-index: 1;
}

.about-gh-browser-drag{
  opacity: .45;
  margin-left: 2px;
}

.about-gh-browser-urlbar{
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.about-gh-browser-urlbar > i{
  width: 14px;
  height: 14px;
  color: rgba(232,238,252,.70);
  flex: 0 0 auto;
}

.about-gh-browser-urlbar > span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232,238,252,.72);
}

.about-gh-browser-urlbar > small{
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
}

.about-gh-browser-body{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px 10px 10px;
}

.about-gh-browser-pane{
  height: 100%;
  min-height: 320px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(10,19,35,.94), rgba(7,13,25,.92)),
    radial-gradient(320px 120px at 18% 0%, rgb(var(--accent-rgb) / .07), transparent 76%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 12px 28px rgba(0,0,0,.16);
}

.about-gh-browser-pane[hidden]{
  display: none !important;
}

.about-gh-browser-pane.is-active{
  animation: about-gh-pane-in .2s ease;
}

.about-gh-browser-pane .about-gh-window-body{
  height: 100%;
  min-height: 0;
  max-height: 372px;
  overflow: auto;
  scrollbar-width: thin;
  padding: 12px;
}

.about-gh-browser-pane .about-gh-window-points li{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 10px 10px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
}

.about-gh-browser-pane .about-gh-window-points li::before{
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
}

.about-gh-browser-pane .about-gh-summary-item strong{
  font-size: clamp(15px, 1.1vw, 18px);
}

.about-gh-browser-pane .about-gh-summary-item i{
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  padding: 7px;
}

.about-gh-browser-pane .about-gh-skill-list .skill-top{
  font-size: 12px;
}

.about-gh-browser-pane .about-gh-skill-list .skill-bar{
  height: 9px;
}

@keyframes about-gh-pane-in{
  from{
    opacity: .64;
    transform: translateY(6px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

.about-gh-window{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.about-gh-window-top{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
}

.about-gh-window-lights{
  display: inline-flex;
  gap: 6px;
}

.about-gh-window-lights span{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
}

.about-gh-window-lights span:nth-child(1){ background: #ef4444; }
.about-gh-window-lights span:nth-child(2){ background: #f59e0b; }
.about-gh-window-lights span:nth-child(3){ background: #22c55e; }

.about-gh-window-url{
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(232,238,252,.64);
}

.about-gh-window-body{
  padding: 12px;
  display: grid;
  gap: 10px;
}

.about-gh-window-card{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 11px;
  background: rgba(255,255,255,.04);
}

.about-gh-window-label{
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.about-gh-window-value{
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(240,246,252,.94);
  font-weight: 650;
}

.about-gh-window-points{
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.about-gh-window-points li{
  padding-left: 14px;
  position: relative;
  color: rgba(232,238,252,.82);
  line-height: 1.4;
  font-size: 13px;
}

.about-gh-window-points li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgb(var(--accent-rgb) / .92);
  box-shadow: 0 0 0 4px rgb(var(--accent-rgb) / .16);
}

.about-gh-windows{
  position: relative;
  min-height: 0;
  padding: 2px 18px 2px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}

.about-gh-window-pane{
  position: relative;
  inset: auto;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  user-select: none;
  min-width: 0;
  height: 360px;
  min-height: 360px;
  margin-left: -42px;
  transition:
    transform .55s cubic-bezier(.22,.9,.2,1),
    opacity .35s ease,
    filter .35s ease,
    box-shadow .55s ease,
    border-color .35s ease;
  will-change: transform, opacity;
  box-shadow: 0 16px 40px rgba(0,0,0,.24);
  background: linear-gradient(180deg, rgba(12,20,38,.96), rgba(8,14,28,.95));
}

.about-gh-window-pane:first-child{
  margin-left: 0;
}

.about-gh-window-pane .about-gh-window-top{
  flex: 0 0 auto;
}

.about-gh-window-pane .about-gh-window-body{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  padding: 10px;
  gap: 8px;
}

.about-gh-window-pane[data-pane-state="left"]{
  transform: translate3d(0, 20px, 0) scale(.955) rotate(-.7deg);
  z-index: 1;
  opacity: .92;
  filter: saturate(.88) brightness(.94);
}

.about-gh-window-pane[data-pane-state="right"]{
  transform: translate3d(0, 12px, 0) scale(.975) rotate(.55deg);
  z-index: 2;
  opacity: .97;
  filter: saturate(.94);
}

.about-gh-window-pane[data-pane-state="focus"],
.about-gh-window-pane.is-focus{
  transform: translate3d(0, -8px, 0) scale(1.02);
  z-index: 5;
  opacity: 1;
  filter: none;
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 22px 54px rgba(0,0,0,.36), 0 0 0 1px rgb(var(--accent-rgb) / .20);
}

.about-gh-window-pane:focus-visible{
  outline: none;
}

.about-gh-window-pane[data-pane-state="focus"] .about-gh-window-top,
.about-gh-window-pane.is-focus .about-gh-window-top{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)),
    radial-gradient(300px 60px at 20% 0%, rgb(var(--accent-rgb) / .10), transparent 72%);
}

.about-gh-window-pane:not([data-pane-state="focus"]):not(.is-focus) .about-gh-window-body{
  opacity: .78;
}

.about-gh-window-card-inline{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.about-gh-window-card-inline .about-gh-badge{
  margin-left: auto;
  flex: 0 0 auto;
}

.about-gh-window-pane .about-gh-window-card{
  padding: 10px;
  border-radius: 12px;
  min-height: 58px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
}

.about-gh-window-pane .about-gh-window-label{
  font-size: 10px;
  letter-spacing: .08em;
}

.about-gh-window-pane .about-gh-window-value{
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.35;
}

.about-gh-window-pane .about-gh-window-points{
  gap: 8px;
}

.about-gh-window-pane .about-gh-window-points li{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 10px 10px 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  font-size: 12px;
  line-height: 1.35;
}

.about-gh-window-pane .about-gh-window-points li::before{
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .14);
}

.about-gh-window-pane .about-gh-summary-list{
  gap: 8px;
}

.about-gh-window-pane .about-gh-summary-item{
  gap: 9px;
  padding: 9px 10px;
  border-radius: 12px;
}

.about-gh-window-pane .about-gh-summary-item strong{
  font-size: clamp(13px, .98vw, 16px);
  line-height: 1.22;
  margin-top: 1px;
}

.about-gh-window-pane .about-gh-summary-item i{
  width: 28px;
  height: 28px;
  flex-basis: 28px;
  padding: 6px;
  border-radius: 8px;
}

.about-gh-window-pane .about-gh-summary-k{
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.about-gh-window-pane .about-gh-skill-list .skill{
  margin: 7px 0;
}

.about-gh-window-pane .about-gh-skill-list .skill-top{
  font-size: 11px;
  margin-bottom: 6px;
}

.about-gh-window-pane .about-gh-skill-list .skill-bar{
  height: 8px;
}

.about-gh-window-pane .about-gh-badge{
  font-size: 10px;
  padding: 7px 9px;
  white-space: nowrap;
}

.about-gh-window-pane .about-gh-cloud{
  margin-top: 8px;
}

.about-gh-window-pane .about-gh-cloud .tag{
  font-size: 11px;
  padding: 6px 9px;
}

.about-gh-window-pane .about-gh-footnote{
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.3;
}

.about-gh-bottom{
  padding: 14px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 12px;
}

.about-gh-panel{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
}

.about-gh-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.about-gh-panel-head h4{
  margin: 2px 0 0;
  font-size: clamp(18px, 1.7vw, 24px);
  letter-spacing: -.01em;
}

.about-gh-badge{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  white-space: nowrap;
  font-size: 12px;
  color: rgba(232,238,252,.92);
}

.about-gh-badge i{
  width: 13px;
  height: 13px;
}

.about-gh-summary-list{
  display: grid;
  gap: 10px;
}

.about-gh-summary-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
}

.about-gh-summary-item i{
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  padding: 8px;
}

.about-gh-summary-item strong{
  display: block;
  margin-top: 2px;
  font-size: clamp(17px, 1.45vw, 27px);
  line-height: 1.24;
}

.about-gh-summary-k{
  display: inline-block;
  font-size: 12px;
}

.about-gh-skill-list .skill{
  margin: 9px 0;
}

.about-gh-skill-list .skill-top{
  font-size: 13px;
  margin-bottom: 8px;
}

.about-gh-skill-list .skill-bar{
  height: 10px;
  border-radius: 999px;
}

.about-gh-cloud{
  margin-top: 10px;
}

.about-gh-footnote{
  margin: 8px 0 0;
}

#about .about-gap{
  height: 24px;
}

#about .container{
  overflow-x: clip;
}

#about .about-gh{
  max-width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: clamp(14px, 2vw, 18px);
  background:
    radial-gradient(760px 240px at 16% -12%, rgb(var(--accent-rgb) / .10), transparent 64%),
    radial-gradient(760px 240px at 84% 112%, rgb(var(--accent2-rgb) / .08), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  overflow: clip;
}

html[data-theme="light"] .demo-showcase-head{
  background:
    radial-gradient(760px 220px at 14% -20%, rgb(var(--accent-rgb) / .08), transparent 64%),
    radial-gradient(760px 220px at 86% 120%, rgb(var(--accent2-rgb) / .07), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,0));
}
html[data-theme="light"] .demo-showcase-head::before,
html[data-theme="light"] .demo-showcase-head::after{
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(16,24,38,.06) 10%,
    rgba(16,24,38,.16) 50%,
    rgba(16,24,38,.06) 90%,
    transparent 100%
  );
}

html[data-theme="light"] .demo-showcase-head h2{
  color: #121a26;
}

html[data-theme="light"] .demo-showcase-head p.muted{
  color: rgba(18,26,38,.72);
}

html[data-theme="light"] .demo-showcase-kicker{
  color: rgb(var(--accent-rgb) / .92);
}

html[data-theme="light"] .demo-showcase-particles span{
  border-color: rgba(16,24,38,.16);
  background: radial-gradient(circle at 30% 30%, rgba(16,24,38,.32), rgba(16,24,38,.04));
}

@media (max-width: 980px){
  .about-gh-top-grid,
  .about-gh-bottom{
    grid-template-columns: 1fr;
  }

  .about-gh-browser-shell{
    min-height: 0;
    transform: none !important;
  }

  .about-gh-browser-top{
    padding: 0;
  }

  .about-gh-browser-titlebar{
    padding: 9px;
  }

  .about-gh-browser-tab{
    padding: 8px 10px;
    font-size: 11px;
    min-width: 174px;
  }

  .about-gh-browser-tabs{
    padding: 8px 8px 0;
  }

  .about-gh-browser-urlbar > small{
    display: none;
  }

  .about-gh-browser-pane{
    min-height: 0;
  }

  .about-gh-browser-pane .about-gh-window-body{
    max-height: none;
    overflow: visible;
  }

  .about-gh-windows{
    min-height: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .about-gh-window-pane{
    position: relative;
    inset: auto;
    height: auto;
    min-height: 0;
    margin-left: 0;
    transform: none !important;
    z-index: auto;
    opacity: 1;
    filter: none;
    cursor: default;
    user-select: auto;
    box-shadow: none;
  }

  .about-gh-window-pane .about-gh-window-body{
    overflow: visible;
  }

  .about-gh-badge{
    display: none;
  }

  .about-gh-window-card-inline .about-gh-badge{
    display: inline-flex;
  }
}

@media (max-width: 620px){
  .about-gh{
    border-radius: 18px;
  }

  .about-gh-top,
  .about-gh-bottom{
    padding: 12px;
  }

  .about-gh-pillrow{
    gap: 6px;
  }

  .about-gh-pill{
    font-size: 11px;
    padding: 7px 9px;
  }

  .about-gh-window-url{
    font-size: 10px;
    letter-spacing: .06em;
  }

  .about-gh-window-card-inline{
    flex-direction: column;
    align-items: stretch;
  }

  .about-gh-browser-titlebar{
    align-items: center;
    flex-wrap: wrap;
  }

  .about-gh-browser-tabs{
    width: 100%;
  }

  .about-gh-browser-urlbar{
    flex: 1 1 100%;
  }

  .about-gh-window-card-inline .about-gh-badge{
    margin-left: 0;
    width: fit-content;
    max-width: 100%;
  }
}

html[data-theme="light"] .about-gh{
  border-color: rgba(16,24,38,.16);
  background:
    radial-gradient(760px 260px at 20% -20%, rgb(var(--accent-rgb) / .12), transparent 64%),
    radial-gradient(760px 260px at 100% 0%, rgb(var(--accent2-rgb) / .10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(245,249,255,.90));
  box-shadow: 0 20px 56px rgba(16,24,38,.12);
}

html[data-theme="light"] .about-gh-top{
  border-bottom-color: rgba(16,24,38,.13);
}

html[data-theme="light"] .about-gh-lead{
  color: rgba(26,38,53,.88);
}

html[data-theme="light"] .about-gh-pill,
html[data-theme="light"] .about-gh-window,
html[data-theme="light"] .about-gh-window-card,
html[data-theme="light"] .about-gh-panel,
html[data-theme="light"] .about-gh-summary-item,
html[data-theme="light"] .about-gh-badge{
  border-color: rgba(16,24,38,.16);
}

html[data-theme="light"] .about-gh-pill,
html[data-theme="light"] .about-gh-window,
html[data-theme="light"] .about-gh-window-card,
html[data-theme="light"] .about-gh-panel,
html[data-theme="light"] .about-gh-summary-item,
html[data-theme="light"] .about-gh-badge{
  background: rgba(255,255,255,.84);
  color: rgba(16,24,38,.92);
}

html[data-theme="light"] .about-gh-window-url{
  color: rgba(34,47,64,.70);
}

html[data-theme="light"] .about-gh-browser-titlebar{
  border-bottom-color: rgba(16,24,38,.12);
  background:
    radial-gradient(80% 160% at 0% 0%, rgb(var(--accent-rgb) / .10), transparent 66%),
    radial-gradient(76% 160% at 100% 0%, rgb(var(--accent2-rgb) / .08), transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,251,255,.78));
}

html[data-theme="light"] .about-gh-browser-tabs{
  border-bottom-color: rgba(16,24,38,.10);
}

html[data-theme="light"] .about-gh-browser-tab{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.84);
  color: rgba(16,24,38,.88);
}

html[data-theme="light"] .about-gh-browser-tab:hover{
  border-color: rgba(16,24,38,.24);
  color: rgba(16,24,38,.96);
}

html[data-theme="light"] .about-gh-browser-tab.is-active{
  border-color: rgb(var(--accent-rgb) / .30);
  border-bottom-color: rgba(248,251,255,.95);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(246,249,255,.90)),
    radial-gradient(180px 60px at 20% 0%, rgb(var(--accent-rgb) / .10), transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 8px 18px rgba(16,24,38,.08),
    0 0 0 1px rgb(var(--accent-rgb) / .14);
}

html[data-theme="light"] .about-gh-browser-urlbar{
  border-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.82);
}

html[data-theme="light"] .about-gh-browser-urlbar > i,
html[data-theme="light"] .about-gh-browser-urlbar > span{
  color: rgba(16,24,38,.72);
}

html[data-theme="light"] .about-gh-browser-pane{
  border-color: rgba(16,24,38,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,251,255,.92)),
    radial-gradient(320px 120px at 18% 0%, rgb(var(--accent-rgb) / .05), transparent 76%);
}

html[data-theme="light"] .about-gh-window-pane[data-pane-state="focus"],
html[data-theme="light"] .about-gh-window-pane.is-focus{
  border-color: rgba(16,24,38,.22);
  box-shadow: 0 20px 48px rgba(16,24,38,.16), 0 0 0 1px rgb(var(--accent-rgb) / .18);
}

html[data-theme="light"] .about-gh-window-value,
html[data-theme="light"] .about-gh-summary-item strong{
  color: rgba(16,24,38,.96);
}

html[data-theme="light"] .about-gh-window-points li{
  color: rgba(34,47,64,.84);
}

/* =========================================================
   ABOUT -> Reuse Demo Browser Skin (same look/behavior)
   ========================================================= */
.about-gh{
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.about-gh-top{
  padding: 0;
  border-bottom: 0;
  background: transparent;
}

.about-gh-browser-shell.demo-lab{
  position: relative;
  min-height: 410px;
  overflow: hidden;
  transform-style: preserve-3d;
  transform: perspective(1200px) rotateX(var(--about-rx, 0deg)) rotateY(var(--about-ry, 0deg));
  box-shadow: none;
  will-change: transform;
}

.about-gh-browser-shell.demo-lab::before{
  display: none;
}

.about-gh-browser-top{
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.about-gh-browser-titlebar.demo-browser-top{
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(70% 180% at 0% 0%, rgb(var(--demo-browser-a) / .24), transparent 62%),
    radial-gradient(70% 180% at 100% 0%, rgb(var(--demo-browser-b) / .20), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.about-gh-browser-titlebar .about-gh-browser-urlbar.demo-browser-url{
  flex: 1 1 auto;
  min-width: 0;
}

.about-gh-browser-urlbar.demo-browser-url{
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  color: rgba(232,238,252,.74);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 9px 12px 9px 34px;
  border-radius: 11px;
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-gh-browser-urlbar.demo-browser-url::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.72);
  opacity: .8;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}

.about-gh-browser-urlbar.demo-browser-url::after{
  content: "";
  position: absolute;
  left: 19px;
  top: 50%;
  width: 1.5px;
  height: 14px;
  background: rgba(255,255,255,.55);
  transform: translate(-50%, -50%);
  opacity: .7;
}

.about-gh-browser-urlbar.demo-browser-url > span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-gh-browser-urlbar.demo-browser-url > small{
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: .9;
}

.about-gh-browser-tabs.demo-tabs.demo-browser-tabs{
  display: flex;
  gap: 6px;
  padding: 10px 12px 0;
  border-bottom: 0;
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.about-gh-browser-tab.demo-tab{
  --demo-tx: 0px;
  --demo-ty: 0px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 10px 13px 9px;
  border-color: rgba(255,255,255,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 8px;
  min-width: 238px;
  position: relative;
  transform: translate3d(var(--demo-tx), var(--demo-ty), 0);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background .15s ease,
    color .15s ease,
    opacity .15s ease;
}

.about-gh-browser-tab.demo-tab::after{
  display: none;
}

.about-gh-browser-tab.demo-tab:hover{
  transform: translate3d(var(--demo-tx), var(--demo-ty), 0);
}

.about-gh-browser-tab.demo-tab.is-active,
.about-gh-browser-tab.demo-tab.active{
  background: linear-gradient(180deg, rgb(var(--accent-rgb) / .24), rgb(var(--accent2-rgb) / .16));
  border-color: rgb(var(--accent-rgb) / .44);
  box-shadow: 0 8px 20px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translate3d(var(--demo-tx), calc(var(--demo-ty) + 1px), 0);
}

.about-gh-browser-tab.demo-tab:not(.active):not(.is-active){
  transform: translate3d(var(--demo-tx), var(--demo-ty), 0);
}

.about-gh-browser-tab.demo-tab i{
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.about-gh-browser-tab.demo-tab .demo-tab-label{
  font-weight: 700;
  color: rgba(240,246,252,.92);
}

.about-gh-browser-tab.demo-tab .demo-tab-site{
  margin-left: 22px;
  width: 100%;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232,238,252,.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.about-gh-browser-drag.demo-tab-grip{
  margin-left: auto;
}

.about-gh-browser-body{
  padding-top: 12px;
}

@media (max-width: 980px){
  .about-gh-browser-urlbar.demo-browser-url > small{
    display: none;
  }

  .about-gh-browser-tab.demo-tab{
    min-width: 174px;
  }
}

@media (max-width: 620px){
  .about-gh-browser-titlebar.demo-browser-top{
    gap: 8px;
    flex-wrap: wrap;
  }

  .about-gh-browser-titlebar .about-gh-browser-urlbar.demo-browser-url{
    flex: 1 1 100%;
  }
}

html[data-theme="light"] .about-gh{
  background: transparent;
  box-shadow: none;
  border: 0;
}

html[data-theme="light"] .about-gh-top{
  border-bottom: 0;
  background: transparent;
}

html[data-theme="light"] .about-gh-browser-titlebar.demo-browser-top{
  border-bottom-color: rgba(16,24,38,.14);
}

html[data-theme="light"] .about-gh-browser-urlbar.demo-browser-url{
  border-color: rgba(16,24,38,.14);
  background: rgba(255,255,255,.86);
  color: rgba(16,24,38,.74);
}

html[data-theme="light"] .about-gh-browser-urlbar.demo-browser-url::before{
  border-color: rgba(16,24,38,.58);
}

html[data-theme="light"] .about-gh-browser-urlbar.demo-browser-url::after{
  background: rgba(16,24,38,.5);
}

html[data-theme="light"] .about-gh-browser-tab.demo-tab .demo-tab-label{
  color: rgba(16,24,38,.9);
}

html[data-theme="light"] .about-gh-browser-tab.demo-tab .demo-tab-site{
  color: rgba(34,47,64,.66);
}

html[data-theme="light"] .about-gh-browser-tab.demo-tab{
  background: rgba(255,255,255,.86);
  border-color: rgba(16,24,38,.16);
}

html[data-theme="light"] .about-gh-browser-tab.demo-tab.is-active,
html[data-theme="light"] .about-gh-browser-tab.demo-tab.active{
  background: rgba(var(--accent-rgb)/.20);
  border-color: rgba(var(--accent-rgb)/.38);
  box-shadow: 0 8px 18px rgba(16,24,38,.08), inset 0 1px 0 rgba(255,255,255,.7);
}

/* =========================================================
   CATALOG POLISH (title + width + selector layout)
   ========================================================= */
.catalog-showcase-head{
  margin-bottom: 14px;
}

.catalog .catalog-shell{
  margin-top: 10px;
}

.catalog .altdeck-strip{
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: visible;
  padding: 0;
}

.catalog .altdeck-thumb{
  flex: 1 1 clamp(170px, 20%, 250px);
  min-width: 170px;
  max-width: none;
  min-height: 44px;
  border-radius: 13px;
}

.catalog .altdeck-thumb span{
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.catalog .altdeck-footer{
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
}

@media (max-width: 980px){
  .catalog .altdeck-strip{
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: thin;
  }

  .catalog .altdeck-thumb{
    flex: 0 0 auto;
    min-width: 170px;
    max-width: 230px;
  }
}

html[data-theme="light"] .catalog .altdeck-footer{
  border-top-color: rgba(16,24,38,.14);
}

/* =========================================================
   CONTACT UX (header + quick entry + whatsapp float)
   ========================================================= */
.contact-showcase-head{
  margin-bottom: 12px;
}

.contact-entry{
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: clamp(14px, 2vw, 18px);
  background:
    radial-gradient(100% 120% at 0% 0%, rgb(var(--accent-rgb) / .18), transparent 56%),
    linear-gradient(180deg, rgba(8,18,35,.92), rgba(7,15,31,.86));
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 14px;
  margin-bottom: 10px;
}

.contact-entry-kicker{
  margin: 0;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgb(var(--accent2-rgb) / .95);
  font-weight: 700;
}

.contact-entry-main h3{
  margin: 8px 0 8px;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -.02em;
}

.contact-entry-main p{
  margin: 0;
}

.contact-entry-actions{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-entry-whats{
  font-weight: 800;
  min-width: min(100%, 260px);
  justify-content: center;
  box-shadow: 0 12px 38px rgb(var(--accent-rgb) / .34);
}

.contact-entry-meta{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.contact-entry-meta span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.contact-entry-side{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.contact-entry-side-k{
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .11em;
  color: var(--muted);
}

.contact-entry-side-v{
  margin-top: 4px;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 900;
}

.contact-entry-side-actions{
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.contact-flow-hint{
  margin: 8px 2px 10px;
}

#contact .contact-gh{
  margin-top: 0;
}

.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  height: 54px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(37,211,102,.48);
  background: linear-gradient(135deg, rgba(37,211,102,.95), rgba(22,163,74,.94));
  color: #f6fff9;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 18px 44px rgba(22,163,74,.34);
  cursor: pointer;
  z-index: 10040;
}

.wa-float i{
  width: 18px;
  height: 18px;
}

.wa-chat-modal{
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: none;
}

.wa-chat-modal.is-open{
  display: block;
}

.wa-chat-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(3,8,18,.62);
}

.wa-chat-panel{
  position: absolute;
  right: 18px;
  bottom: 84px;
  width: min(420px, calc(100vw - 24px));
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(9,19,38,.98), rgba(8,16,32,.96));
  box-shadow: 0 26px 70px rgba(0,0,0,.48);
  overflow: hidden;
}

.wa-chat-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(135deg, rgba(37,211,102,.24), rgba(22,163,74,.18));
}

.wa-chat-head-main{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.wa-chat-avatar{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.18);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.wa-chat-avatar i{
  width: 15px;
  height: 15px;
}

.wa-chat-title{
  font-weight: 800;
  line-height: 1.2;
}

.wa-chat-sub{
  margin-top: 2px;
  font-size: 12px;
  color: rgba(232,238,252,.74);
}

.wa-chat-close{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.wa-chat-close i{
  width: 14px;
  height: 14px;
}

.wa-chat-body{
  padding: 12px;
}

.wa-chat-bubble{
  max-width: 90%;
  padding: 10px 11px;
  border-radius: 10px 10px 10px 4px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.07);
  color: rgba(232,238,252,.92);
  font-size: 13px;
  line-height: 1.4;
}

.wa-chat-label{
  display: block;
  margin-top: 10px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.wa-chat-input{
  width: 100%;
  resize: vertical;
  min-height: 90px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  padding: 10px;
  outline: none;
}

.wa-chat-input:focus{
  border-color: rgb(var(--accent-rgb) / .64);
  box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .18);
}

.wa-chat-actions{
  padding: 0 12px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

body.wa-chat-open{
  overflow: hidden;
}

@media (max-width: 980px){
  .contact-entry{
    grid-template-columns: 1fr;
  }

  .wa-float{
    right: 12px;
    bottom: 12px;
  }

  .wa-chat-panel{
    right: 12px;
    bottom: 74px;
    width: calc(100vw - 24px);
  }
}

@media (max-width: 560px){
  .wa-float{
    width: 54px;
    padding: 0;
    justify-content: center;
  }

  .wa-float span{
    display: none;
  }
}

html[data-theme="light"] .contact-entry{
  border-color: rgba(16,24,38,.16);
  background:
    radial-gradient(100% 120% at 0% 0%, rgb(var(--accent-rgb) / .12), transparent 56%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,250,255,.92));
}

html[data-theme="light"] .contact-entry-side{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.86);
}

html[data-theme="light"] .contact-entry-main h3,
html[data-theme="light"] .contact-entry-side-v{
  color: rgba(16,24,38,.96);
}

html[data-theme="light"] .wa-chat-backdrop{
  background: rgba(16,24,38,.34);
}

html[data-theme="light"] .wa-chat-panel{
  border-color: rgba(16,24,38,.16);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.94));
  box-shadow: 0 20px 52px rgba(16,24,38,.20);
}

html[data-theme="light"] .wa-chat-head{
  border-bottom-color: rgba(16,24,38,.12);
}

html[data-theme="light"] .wa-chat-sub{
  color: rgba(34,47,64,.78);
}

html[data-theme="light"] .wa-chat-close,
html[data-theme="light"] .wa-chat-bubble,
html[data-theme="light"] .wa-chat-input{
  border-color: rgba(16,24,38,.16);
  background: rgba(255,255,255,.88);
  color: rgba(16,24,38,.92);
}

/* =========================================
   Catalogo -> Hub de Solucoes (leve)
   ========================================= */
.catalog .catalog-hub{
  position: relative;
}

.catalog .catalog-hub-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 18px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(4,8,16,.92), rgba(4,8,16,.84));
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
}

.catalog .catalog-hub-card{
  --card-accent: 59 130 246;
  position: relative;
  min-height: 370px;
  padding: 20px 20px 18px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 16px;
  color: inherit;
  text-decoration: none;
  border-right: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(90% 110% at 80% 0%, rgb(var(--card-accent) / .08), transparent 60%),
    linear-gradient(180deg, rgba(7,12,23,.92), rgba(4,8,16,.94));
  isolation: isolate;
  transition: transform .22s ease, background-color .22s ease;
  will-change: transform;
}

.catalog .catalog-hub-card:last-child{
  border-right: 0;
}

.catalog .catalog-hub-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 100% 56px, 56px 100%;
  opacity: .22;
  pointer-events: none;
  z-index: -1;
}

.catalog .catalog-hub-card::after{
  content: "";
  position: absolute;
  inset: auto 18px 0;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgb(var(--card-accent) / .85), rgba(255,255,255,.18));
  opacity: .26;
  transform: scaleX(.45);
  transform-origin: left center;
  transition: transform .28s ease, opacity .28s ease;
}

.catalog .catalog-hub-media{
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(48% 66% at 76% 30%, rgb(var(--card-accent) / .22), transparent 72%),
    linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.24)),
    var(--card-bg);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: center, center, 78% 34%;
  background-size: cover, cover, 54% auto;
  opacity: .12;
  filter: grayscale(.4) blur(10px);
  transform: scale(1.05);
  transition: opacity .32s ease, filter .32s ease, transform .32s ease;
  pointer-events: none;
  z-index: -2;
}

.catalog .catalog-hub-line{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 180px at 78% 18%, rgb(var(--card-accent) / .12), transparent 70%);
  opacity: .7;
  pointer-events: none;
  z-index: -1;
}

.catalog .catalog-hub-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.catalog .catalog-hub-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  color: rgba(230,236,248,.94);
}

.catalog .catalog-hub-badge i{
  width: 15px;
  height: 15px;
}

.catalog .catalog-hub-arrow{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.03);
  color: rgba(232,238,252,.92);
  transform: translateY(0);
  transition: transform .22s ease, background-color .22s ease, border-color .22s ease;
}

.catalog .catalog-hub-arrow i{
  width: 16px;
  height: 16px;
}

.catalog .catalog-hub-logo{
  color: rgba(243,246,255,.94);
  font-family: "Sora", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: .02em;
  line-height: 1.05;
  min-height: 32px;
}

.catalog .catalog-hub-copy{
  align-self: end;
  display: grid;
  gap: 8px;
}

.catalog .catalog-hub-eyebrow{
  margin: 0;
  color: rgba(180,192,214,.72);
  font-size: 12px;
  font-weight: 600;
}

.catalog .catalog-hub-copy h3{
  margin: 0;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.22;
  color: rgba(246,249,255,.97);
  max-width: 22ch;
}

.catalog .catalog-hub-desc{
  margin: 0;
  color: rgba(197,208,227,.82);
  font-size: 13.5px;
  line-height: 1.45;
  max-width: 36ch;
}

.catalog .catalog-hub-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: rgb(var(--card-accent) / .98);
  font-weight: 700;
  font-size: 13px;
}

.catalog .catalog-hub-card:hover,
.catalog .catalog-hub-card:focus-visible,
.catalog .catalog-hub-card.is-active{
  transform: translateY(-2px);
}

.catalog .catalog-hub-card:hover::after,
.catalog .catalog-hub-card:focus-visible::after,
.catalog .catalog-hub-card.is-active::after{
  opacity: .95;
  transform: scaleX(1);
}

.catalog .catalog-hub-card:hover .catalog-hub-media,
.catalog .catalog-hub-card:focus-visible .catalog-hub-media,
.catalog .catalog-hub-card.is-active .catalog-hub-media{
  opacity: .32;
  filter: grayscale(0) blur(0);
  transform: scale(1.01);
}

.catalog .catalog-hub-card:hover .catalog-hub-arrow,
.catalog .catalog-hub-card:focus-visible .catalog-hub-arrow,
.catalog .catalog-hub-card.is-active .catalog-hub-arrow{
  transform: translateY(-1px);
  border-color: rgb(var(--card-accent) / .38);
  background: rgb(var(--card-accent) / .12);
}

.catalog .catalog-hub-card:focus-visible{
  outline: 2px solid rgb(var(--card-accent) / .55);
  outline-offset: -2px;
}

@media (max-width: 1180px){
  .catalog .catalog-hub-grid{
    grid-template-columns: 1fr;
  }

  .catalog .catalog-hub-card{
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }

  .catalog .catalog-hub-card:last-child{
    border-bottom: 0;
  }

  .catalog .catalog-hub-media{
    background-position: center, center, 88% 26%;
    background-size: cover, cover, 34% auto;
    opacity: .18;
    filter: grayscale(.15) blur(4px);
  }
}

@media (max-width: 640px){
  .catalog .catalog-hub-card{
    min-height: 260px;
    padding: 16px 14px 14px;
    gap: 12px;
  }

  .catalog .catalog-hub-copy h3{
    font-size: 19px;
  }

  .catalog .catalog-hub-desc{
    font-size: 13px;
  }

  .catalog .catalog-hub-logo{
    font-size: 18px;
  }

  .catalog .catalog-hub-media{
    background-size: cover, cover, 42% auto;
  }
}

html[data-theme="light"] .catalog .catalog-hub-grid{
  border-color: rgba(16,24,38,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.94));
  box-shadow: 0 18px 42px rgba(16,24,38,.12);
}

html[data-theme="light"] .catalog .catalog-hub-card{
  border-right-color: rgba(16,24,38,.08);
  background:
    radial-gradient(90% 110% at 80% 0%, rgb(var(--card-accent) / .08), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,255,.95));
}

html[data-theme="light"] .catalog .catalog-hub-card::before{
  opacity: .14;
  background:
    linear-gradient(rgba(16,24,38,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,24,38,.06) 1px, transparent 1px);
}

html[data-theme="light"] .catalog .catalog-hub-badge,
html[data-theme="light"] .catalog .catalog-hub-arrow{
  border-color: rgba(16,24,38,.12);
  background: rgba(255,255,255,.72);
  color: rgba(18,27,42,.9);
}

html[data-theme="light"] .catalog .catalog-hub-logo,
html[data-theme="light"] .catalog .catalog-hub-copy h3{
  color: rgba(16,24,38,.96);
}

html[data-theme="light"] .catalog .catalog-hub-eyebrow{
  color: rgba(44,58,80,.72);
}

html[data-theme="light"] .catalog .catalog-hub-desc{
  color: rgba(39,53,74,.8);
}

/* =========================================
   Performance: render abaixo da dobra
   ========================================= */
@supports (content-visibility: auto){
  #about.section,
  #demos.section,
  #catalog.section,
  #contact.section{
    content-visibility: auto;
    contain-intrinsic-size: 1px 900px;
  }
}

@media (prefers-reduced-motion: reduce){
  .catalog .catalog-hub-card,
  .catalog .catalog-hub-card::after,
  .catalog .catalog-hub-media,
  .catalog .catalog-hub-arrow{
    transition: none !important;
  }

  .catalog .catalog-hub-card{
    transform: none !important;
  }
}

/* =========================================
   Title Header Soft Patch (all demo-showcase titles)
   ========================================= */
.demo-showcase-head{
  overflow: visible;
  isolation: isolate;
  background: transparent;
}

.demo-showcase-head::before,
.demo-showcase-head::after{
  display: none;
}

.demo-showcase-head h2{
  position: relative;
  text-shadow:
    0 8px 30px rgba(0,0,0,.22),
    0 0 34px rgb(var(--accent-rgb) / .08);
}

.demo-showcase-head h2::before{
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(100% + 120px);
  height: calc(100% + 70px);
  transform: translate(-50%, -50%);
  border-radius: 999px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(55% 70% at 50% 50%, rgb(var(--accent-rgb) / .22), transparent 74%),
    radial-gradient(70% 90% at 50% 55%, rgb(var(--accent2-rgb) / .14), transparent 78%);
  filter: blur(12px);
  opacity: .95;
}

.demo-showcase-head p.muted{
  position: relative;
  text-shadow: 0 2px 18px rgba(0,0,0,.14);
}

.demo-showcase-particles{
  inset: auto auto auto 50%;
  top: 42%;
  width: min(560px, 92%);
  height: 120px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.demo-showcase-particles span{
  top: auto;
  width: 5px;
  height: 5px;
  border: 0;
  opacity: .52;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(255,255,255,.18) 55%, transparent 75%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 0 14px rgba(255,255,255,.18),
    0 0 26px rgb(var(--accent-rgb) / .16);
  animation: demoFloat 6.8s ease-in-out infinite;
}

.demo-showcase-particles span:nth-child(1){ left: 12%; top: 42%; width: 4px; height: 4px; animation-delay: .1s; }
.demo-showcase-particles span:nth-child(2){ left: 24%; top: 18%; width: 5px; height: 5px; animation-delay: .9s; }
.demo-showcase-particles span:nth-child(3){ left: 39%; top: 10%; width: 4px; height: 4px; animation-delay: 1.6s; }
.demo-showcase-particles span:nth-child(4){ left: 61%; top: 12%; width: 5px; height: 5px; animation-delay: .35s; }
.demo-showcase-particles span:nth-child(5){ left: 76%; top: 20%; width: 4px; height: 4px; animation-delay: 1.9s; }
.demo-showcase-particles span:nth-child(6){ left: 18%; top: 78%; width: 4px; height: 4px; animation-delay: 1.15s; }
.demo-showcase-particles span:nth-child(7){ left: 84%; top: 74%; width: 5px; height: 5px; animation-delay: 2.15s; }

@keyframes demoFloat{
  0%, 100%{
    transform: translate3d(0, 0, 0) scale(.95);
    opacity: .38;
  }
  50%{
    transform: translate3d(0, -10px, 0) scale(1.12);
    opacity: .86;
  }
}

html[data-theme="light"] .demo-showcase-head{
  background: transparent;
}

html[data-theme="light"] .demo-showcase-head h2{
  text-shadow:
    0 10px 24px rgba(16,24,38,.08),
    0 0 30px rgb(var(--accent-rgb) / .08);
}

html[data-theme="light"] .demo-showcase-head h2::before{
  background:
    radial-gradient(55% 70% at 50% 50%, rgb(var(--accent-rgb) / .16), transparent 74%),
    radial-gradient(70% 90% at 50% 55%, rgb(var(--accent2-rgb) / .10), transparent 78%);
  opacity: .9;
}

html[data-theme="light"] .demo-showcase-particles span{
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.98), rgba(148,163,184,.22) 55%, transparent 76%);
  box-shadow:
    0 0 0 1px rgba(16,24,38,.07),
    0 0 12px rgba(16,24,38,.06),
    0 0 18px rgb(var(--accent-rgb) / .10);
  opacity: .44;
}

@media (max-width: 640px){
  .demo-showcase-head{
    background: transparent;
  }

  .demo-showcase-particles{
    top: 39%;
    width: 92%;
    height: 96px;
  }

  .demo-showcase-head h2::before{
    width: calc(100% + 56px);
    height: calc(100% + 44px);
    filter: blur(10px);
  }

  .demo-showcase-particles span{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.06),
      0 0 10px rgba(255,255,255,.12),
      0 0 18px rgb(var(--accent-rgb) / .12);
  }
}

/* =========================================
   HERO Sticky Parallax Lite (GitHub-like flow)
   ========================================= */
.hero.hero-scroll{
  --hero-p: 0;
}

.hero.hero-scroll .hero-bg{
  transform: translateY(calc(var(--hero-p) * 18px)) scale(calc(1 + (var(--hero-p) * .02)));
  transform-origin: center top;
  will-change: transform;
}

.hero.hero-scroll .hero-veil{
  opacity: calc(1 - (var(--hero-p) * .08));
}

.hero-impact,
.hero-reveal{
  transition: none !important;
}

.hero-impact{
  will-change: transform, opacity;
}

.hero-reveal{
  will-change: transform, opacity;
}

.hero-impact-title{
  animation: none !important;
}

.hero-advance{
  animation: none !important;
}

@media (min-width: 981px){
  .hero.hero-scroll{
    min-height: clamp(1180px, 168vh, 1580px) !important;
    padding-bottom: 0 !important;
    overflow: clip !important;
  }

  .hero-scroll-wrap{
    min-height: inherit !important;
  }

  .hero-stage{
    position: sticky !important;
    top: clamp(82px, 8vh, 112px);
    min-height: calc(100svh - clamp(82px, 8vh, 112px));
    height: calc(100svh - clamp(82px, 8vh, 112px));
    place-items: center;
    align-items: center;
    overflow: visible;
  }

  .hero-impact{
    width: min(1080px, 90vw);
    margin-top: calc(var(--hero-p) * -6vh);
    z-index: 4;
  }

  .hero-impact-title{
    text-shadow:
      0 8px 34px rgb(var(--accent-rgb) / .18),
      0 0 42px rgb(var(--accent2-rgb) / .12);
  }

  .hero-reveal{
    inset: 0;
    align-items: end !important;
    padding-bottom: 0 !important;
    z-index: 6 !important;
  }

  .hero.hero-scroll .welcome-shell{
    width: min(1560px, calc(100% - 42px)) !important;
    margin-bottom: 0 !important;
  }

  .hero.hero-scroll .hero-window{
    transform: translateY(calc((1 - var(--hero-p)) * 18px));
    border-bottom: 0 !important;
    border-radius: 28px 28px 0 0 !important;
  }

  .hero.hero-scroll .hero-window::before{
    height: 40px;
  }

  .hero.hero-scroll .hero-window .hero-grid::after{
    height: clamp(56px, 9vw, 106px) !important;
  }

  .hero-seam{
    opacity: calc(.75 - (var(--hero-p) * .22));
  }
}

@media (max-width: 980px){
  .hero.hero-scroll{
    min-height: calc(100vh - 72px) !important;
  }

  .hero-scroll-wrap{
    min-height: calc(100vh - 72px) !important;
  }

  .hero-stage{
    position: relative !important;
    top: auto !important;
    min-height: calc(100vh - 72px);
    height: calc(100vh - 72px);
  }

  .hero-impact-title{
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero.hero-scroll .hero-bg{
    transform: none !important;
  }
}

/* =========================================
   HERO Sticky Parallax Lite - Fixes (opaque card + attached edge)
   ========================================= */
.hero.hero-scroll::after{
  content: none !important;
}

.hero-seam{
  display: none !important;
}

.hero-reveal::before,
.hero-reveal::after{
  content: none !important;
}

.hero-impact{
  z-index: 3 !important;
}

.hero-reveal{
  z-index: 7 !important;
}

.hero.hero-scroll .hero-window{
  opacity: 1 !important;
  background: linear-gradient(165deg, rgba(4,10,22,.985), rgba(5,12,26,.985)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    0 0 0 1px rgb(var(--accent-rgb) / .14),
    0 0 58px rgb(var(--accent2-rgb) / .14) !important;
}

.hero.hero-scroll .hero-window .hero-grid::after{
  content: none !important;
}

.hero.hero-scroll .welcome-shell{
  opacity: 1 !important;
}

@media (min-width: 981px){
  .hero.hero-scroll{
    min-height: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-stage{
    top: 86px !important;
    min-height: calc(100vh - 86px) !important;
    height: calc(100vh - 86px) !important;
  }

  .hero-impact{
    padding-bottom: 12vh;
  }

  .hero-reveal{
    inset: 0 !important;
    align-items: end !important;
    padding: 0 !important;
  }

  .hero.hero-scroll .welcome-shell{
    width: min(1540px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
  }

  .hero.hero-scroll .hero-window{
    border-bottom: 0 !important;
    border-radius: 26px 26px 0 0 !important;
  }

  #clients.clients-strip{
    margin-top: -2px !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 8;
  }

  #clients.clients-strip .container,
  #clients.clients-strip .container.wide{
    padding-top: 26px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }
}

@media (max-width: 980px){
  .hero.hero-scroll .hero-window{
    background: linear-gradient(165deg, rgba(4,10,22,.975), rgba(5,12,26,.975)) !important;
  }

  #clients.clients-strip{
    margin-top: 0 !important;
    padding-top: 6px !important;
  }
}

/* =========================================
   HERO Professional Title + Tight Attach (final tuning)
   ========================================= */
.hero-impact{
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

.hero-impact::before{
  opacity: .34 !important;
  width: min(420px, 62vw) !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent) !important;
}

.hero-impact-kicker{
  color: rgba(201,214,232,.84) !important;
  letter-spacing: .16em !important;
  font-weight: 600 !important;
}

.hero-impact-title{
  max-width: min(1080px, 82vw) !important;
  font-size: clamp(34px, 4.2vw, 62px) !important;
  font-weight: 800 !important;
  color: #edf3fb !important;
  -webkit-text-fill-color: #edf3fb !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  letter-spacing: -.03em !important;
  line-height: 1.02 !important;
  text-shadow:
    0 10px 30px rgba(2,8,18,.36),
    0 0 22px rgba(77,124,255,.10) !important;
  text-wrap: balance;
}

.hero-impact-sub{
  width: min(72ch, 94vw) !important;
  color: rgba(218,227,241,.80) !important;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.5 !important;
}

.hero-impact-title .hero-impact-key{
  color: rgb(var(--accent-rgb) / .98);
  -webkit-text-fill-color: rgb(var(--accent-rgb) / .98);
}

.hero-impact-title .hero-impact-caps{
  color: rgb(var(--accent2-rgb) / .98);
  -webkit-text-fill-color: rgb(var(--accent2-rgb) / .98);
  letter-spacing: .03em;
}

@media (min-width: 981px){
  .hero.hero-scroll{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-stage{
    top: 74px !important;
    min-height: calc(100vh - 74px) !important;
    height: calc(100vh - 74px) !important;
    place-items: start center !important;
    align-items: start !important;
  }

  .hero-impact{
    width: min(980px, 88vw) !important;
    margin-top: clamp(4px, 1.6vh, 20px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .hero-reveal{
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    padding: 0 !important;
    display: block !important;
    height: auto !important;
  }

  .hero.hero-scroll .welcome-shell{
    margin-bottom: 0 !important;
    width: min(1540px, calc(100% - 40px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero.hero-scroll .hero-window{
    margin-bottom: 0 !important;
  }

  #clients.clients-strip{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #clients.clients-strip .container,
  #clients.clients-strip .container.wide{
    position: relative;
    padding-top: 12px !important;
    border-top: 0 !important;
  }

  #clients.clients-strip .container::before,
  #clients.clients-strip .container.wide::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: rgba(255,255,255,.08);
    pointer-events: none;
  }
}

/* =========================================
   HERO Fixed Browser Card Overlap (requested)
   ========================================= */
.hero-advance{
  display: none !important;
}

.hero.hero-scroll{
  --hero-title-p: 0;
}

.hero.hero-scroll .hero-reveal{
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
}

.hero-scroll-wrap{
  position: relative !important;
}

.hero.hero-scroll .welcome-shell{
  position: relative;
  opacity: 1 !important;
}

.hero.hero-scroll .welcome-shell::before{
  content: "";
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: -10%;
  height: clamp(170px, 24vw, 320px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, rgb(var(--accent2-rgb) / .34), rgb(var(--accent-rgb) / .22) 42%, transparent 74%);
  filter: blur(46px);
  opacity: .92;
  pointer-events: none;
  z-index: -1;
}

.hero.hero-scroll .hero-window{
  border: 1px solid rgba(255,255,255,.16) !important;
  border-bottom: 0 !important;
  border-radius: 26px 26px 0 0 !important;
  background: linear-gradient(165deg, rgba(4,10,22,.82), rgba(6,12,28,.78)) !important;
  backdrop-filter: blur(14px) saturate(118%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(118%) !important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.42),
    0 0 0 1px rgb(var(--accent-rgb) / .12),
    0 0 56px rgb(var(--accent2-rgb) / .14) !important;
}

.hero-impact{
  z-index: 3 !important;
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
  will-change: transform, opacity;
}

.hero-impact.has-open-picker{
  z-index: 16 !important;
}

.hero.hero-scroll.has-open-picker{
  overflow: visible !important;
}

.hero.hero-scroll .hero-stage.has-open-picker{
  z-index: 18 !important;
}

.hero-impact-title{
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-wrap: balance;
}

.hero-impact-sub{
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.hero-impact-actions{
  width: min(980px, 92vw);
  margin: clamp(10px, 1.7vw, 18px) auto 0;
  display: grid;
  grid-template-columns: minmax(220px, 1.15fr) auto auto;
  gap: 10px;
  align-items: stretch;
  pointer-events: auto;
}

.hero-impact-picker{
  position: relative;
  z-index: 14;
}

.hero-impact-select,
.hero-impact-btn{
  min-height: 48px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 16px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.hero-impact-select{
  width: 100%;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  color: rgba(238,244,252,.86);
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.hero-impact-select-value{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero-impact-select i{
  width: 18px;
  height: 18px;
  color: rgba(255,255,255,.76);
  flex: 0 0 auto;
  transition: transform .16s ease;
}

.hero-impact-picker.is-open .hero-impact-select{
  border-color: rgba(255,255,255,.34);
  background: rgba(255,255,255,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 0 3px rgb(var(--accent-rgb) / .12);
}

.hero-impact-picker.is-open .hero-impact-select i{
  transform: rotate(180deg);
}

.hero-impact-menu{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  padding: 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(180deg, rgba(8,13,28,.96), rgba(5,9,20,.98));
  box-shadow:
    0 18px 40px rgba(0,0,0,.35),
    0 0 0 1px rgb(var(--accent-rgb) / .08);
  backdrop-filter: blur(10px) saturate(116%);
  -webkit-backdrop-filter: blur(10px) saturate(116%);
}

.hero-impact-option{
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: rgba(238,244,252,.9);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: background-color .14s ease, color .14s ease;
}

.hero-impact-option:hover,
.hero-impact-option:focus-visible{
  outline: none;
  background: rgba(255,255,255,.06);
}

.hero-impact-option.is-selected{
  background: rgb(var(--accent-rgb) / .16);
  color: #f3f8ff;
}

.hero-impact-btn{
  color: #eff5ff;
  background: rgba(255,255,255,.04);
}

.hero-impact-btn-wa{
  background: #238636;
  border-color: rgba(255,255,255,.30);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    0 10px 24px rgba(35,134,54,.25);
}

.hero-impact-btn-panel{
  min-width: clamp(220px, 18vw, 300px);
  background: rgba(255,255,255,.03);
}

.hero-impact-select:hover,
.hero-impact-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.38);
}

.hero-impact-btn-panel:hover{
  background: rgba(255,255,255,.07);
}

@media (min-width: 981px){
  .hero.hero-scroll{
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    overflow: clip !important;
  }

  .hero-scroll-wrap{
    min-height: 100% !important;
    height: 100% !important;
  }

  .hero-stage{
    top: clamp(78px, 8vh, 98px) !important;
    min-height: calc(100svh - clamp(78px, 8vh, 98px)) !important;
    height: calc(100svh - clamp(78px, 8vh, 98px)) !important;
    place-items: center !important;
    align-items: center !important;
    overflow: visible !important;
  }

  .hero-impact{
    width: min(1020px, 88vw) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: clamp(120px, 15vh, 210px) !important;
    transform-origin: center top !important;
  }

  .hero-impact-kicker{
    max-width: min(900px, 86vw);
    text-align: center !important;
  }

  .hero-impact-title{
    max-width: min(1100px, 86vw) !important;
    font-size: clamp(40px, 4.35vw, 72px) !important;
    font-weight: 600 !important;
    line-height: 1.04 !important;
    letter-spacing: -.025em !important;
    color: #f0f5fc !important;
    -webkit-text-fill-color: #f0f5fc !important;
    background: none !important;
    text-shadow:
      0 8px 28px rgba(2,8,18,.22) !important;
  }

  .hero-impact-sub{
    max-width: min(760px, 84vw) !important;
    color: rgba(226,234,246,.84) !important;
    font-size: clamp(15px, 1.02vw, 18px) !important;
    line-height: 1.45 !important;
  }

  .hero-impact-title .hero-impact-key,
  .hero-impact-title .hero-impact-caps{
    color: #f0f5fc !important;
    -webkit-text-fill-color: #f0f5fc !important;
    letter-spacing: inherit !important;
  }

  .hero.hero-scroll .hero-reveal{
    position: absolute !important;
    inset: auto 0 0 0 !important;
    display: grid !important;
    align-items: end !important;
    justify-items: center !important;
    padding: 0 !important;
    z-index: 8 !important;
  }

  .hero.hero-scroll .welcome-shell{
    width: min(1540px, calc(100% - 40px)) !important;
    margin: 0 auto !important;
  }

  .hero.hero-scroll .hero-window{
    margin-bottom: 0 !important;
  }

  #clients.clients-strip{
    margin-top: -1px !important;
    padding-top: 0 !important;
    position: relative;
    z-index: 9;
    background:
      linear-gradient(180deg, rgba(3,7,18,.92) 0%, rgba(2,6,16,.98) 100%);
  }

  #clients.clients-strip .container,
  #clients.clients-strip .container.wide{
    position: relative;
    padding-top: 14px !important;
    border-top: 0 !important;
  }

  #clients.clients-strip .container::before,
  #clients.clients-strip .container.wide::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: rgba(255,255,255,.09);
    pointer-events: none;
  }
}

@media (max-width: 980px){
  .hero-impact-actions{
    width: min(92vw, 680px);
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hero-impact-select,
  .hero-impact-btn{
    width: 100%;
    min-height: 46px;
    justify-content: center;
  }

  .hero-impact-select{
    justify-content: space-between;
  }

  .hero-impact-menu{
    position: static;
    margin-top: 8px;
    width: 100%;
  }

  .hero.hero-scroll .hero-reveal{
    position: relative !important;
    inset: auto !important;
    display: block !important;
    padding-top: 10px !important;
  }

  .hero.hero-scroll .welcome-shell::before{
    left: 10%;
    right: 10%;
    bottom: -12%;
    height: 180px;
    filter: blur(34px);
    opacity: .72;
  }

  .hero.hero-scroll .hero-window{
    border-radius: 20px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(10px) saturate(112%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(112%) !important;
  }

  .hero-impact{
    padding-bottom: 14px !important;
  }
}