:root{
  --page-bg:#0a0a0b;
  --win-top:#1b1b1d;
  --win-bot:#0a0a0b;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --txt:#f4f4f5;
  --muted:#76767b;
  --muted-2:#5d5d62;
  --blue:#3b82f6;
  --blue-2:#2563eb;
  --green:#34d27f;
  --orange:#ff7a3d;
  --pink:#ff5da2;

  --pad-x:clamp(20px, 5vw, 64px);
  --container:1280px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  background:linear-gradient(180deg,var(--win-top) 0%,#121214 38%,var(--win-bot) 100%);
  background-attachment:fixed;
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--txt);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 50% -10%,rgba(255,255,255,.05),transparent 60%);
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

/* ───────────────── NAV ───────────────── */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
  padding:18px var(--pad-x);
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .25s ease,backdrop-filter .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.nav.scrolled{
  background:rgba(18,18,20,.55);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:rgba(255,255,255,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.logo{
  width:36px;height:36px;border-radius:10px;
  background-image:url("data:image/png;base64,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");
  background-size:cover;background-position:center;background-repeat:no-repeat;
  flex-shrink:0;display:block;
}
.logo>*{display:none}

.pill{
  display:flex;align-items:center;gap:2px;
  background:#161617;border:1px solid var(--line);
  border-radius:13px;padding:5px;height:42px;
}
.tab{
  font-size:13.5px;font-weight:500;color:var(--muted);
  padding:0 16px;height:32px;line-height:32px;border-radius:9px;
  white-space:nowrap;transition:color .15s;
}
.tab:hover{color:#a8a8ad}
.tab.active{
  color:#fff;background:#2a2a2c;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}

.right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.search{
  width:40px;height:40px;border-radius:50%;
  background:#161617;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
}
.search svg{width:17px;height:17px;stroke:#9a9aa0;fill:none;stroke-width:2;stroke-linecap:round}
.signin{
  height:40px;padding:0 22px;border-radius:11px;
  background:#161617;border:1px solid var(--line);
  color:#cfcfd3;font-size:13.5px;font-weight:500;
  display:flex;align-items:center;
}
.signin:hover,.search:hover{border-color:var(--line-2);background:#1c1c1e}

/* ───────────────── HERO ───────────────── */
.hero{
  position:relative;z-index:10;
  text-align:center;
  padding:80px var(--pad-x) 28px;
}
.launch-badge{
  display:flex;align-items:center;gap:8px;
  width:max-content;max-width:100%;
  margin:0 auto 22px;
  padding:7px 14px 7px 12px;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(59,130,246,.16),rgba(37,99,235,.10));
  border:1px solid rgba(59,130,246,.45);
  box-shadow:0 0 0 1px rgba(59,130,246,.10) inset, 0 8px 24px -10px rgba(59,130,246,.55);
  color:#dbe7ff;
  font-size:12.5px;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.launch-badge .lb-text{line-height:1}
.launch-badge .lb-text strong{color:#fff;font-weight:700;margin-left:2px}
.launch-badge .lb-dot{
  width:8px;height:8px;border-radius:50%;
  background:#4f8cff;
  box-shadow:0 0 0 0 rgba(79,140,255,.7);
  animation:lb-pulse 1.8s ease-out infinite;
  flex-shrink:0;
}
@keyframes lb-pulse{
  0%{box-shadow:0 0 0 0 rgba(79,140,255,.55)}
  70%{box-shadow:0 0 0 10px rgba(79,140,255,0)}
  100%{box-shadow:0 0 0 0 rgba(79,140,255,0)}
}
@media (prefers-reduced-motion: reduce){
  .launch-badge .lb-dot{animation:none}
}
.wordmark{
  /* Was sized for the two-word product name at up to 184px. It now carries a
     whole sentence, so the scale comes down and the measure is capped — a
     headline that runs the full width of a wide screen is unreadable, and at
     the old size it filled three lines of shouting. */
  position:relative;display:inline-block;
  max-width:15ch;margin-inline:auto;
  font-weight:900;
  font-size:clamp(38px, 7vw, 86px);
  line-height:1.02;
  letter-spacing:-2px;color:#f6f6f7;
  text-wrap:balance;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.vbadge{
  position:absolute;
  right:clamp(-10px,-0.5vw,8px);
  top:clamp(-8px,-0.5vw,-2px);
  width:clamp(30px,3.8vw,56px);
  height:clamp(30px,3.8vw,56px);
  border-radius:50%;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  border:3px solid #0c0c0d;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:clamp(11px,1.3vw,18px);
  font-weight:800;letter-spacing:-.5px;
  box-shadow:0 6px 18px rgba(47,111,237,.45);
}
.subtitle{
  margin:18px auto 0;
  max-width:680px;
  font-size:clamp(15px,1.6vw,22px);
  font-weight:500;
  letter-spacing:-.2px;
  color:#a8a8ad;
  line-height:1.45;
}

/* ───────────────── HERO DOWNLOAD BUTTONS ───────────────── */
.downloads{
  margin-top:36px;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:14px;
}
.dl-btn{
  display:inline-flex;align-items:center;gap:14px;
  background:#161617;border:1px solid var(--line);
  border-radius:16px;
  padding:16px 32px 16px 24px;
  min-width:260px;
  color:#e8e8ea;
  transition:transform .15s ease,border-color .2s,background .2s,box-shadow .2s;
}
.dl-btn:hover{
  transform:translateY(-2px);
  border-color:rgba(79,140,255,.45);
  background:#1c1c1e;
  box-shadow:0 10px 24px rgba(0,0,0,.35);
}
.dl-btn:active{transform:translateY(0)}
.dl-platform{
  width:34px;height:34px;fill:currentColor;
  color:#e8e8ea;flex-shrink:0;
}
.dl-text{
  display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;text-align:left;
}
.dl-text small{
  font-size:12px;font-weight:500;color:var(--muted);
  letter-spacing:.3px;
}
.dl-text strong{
  font-size:17px;font-weight:700;color:#fff;letter-spacing:-.2px;
  margin-top:4px;
}

/* ───────────────── VIDEO CARD ───────────────── */
.card-left{
  position:relative;
  margin-top:36px;
  padding:48px var(--pad-x) 56px;
  background:linear-gradient(180deg,rgba(24,24,26,.6),rgba(12,12,13,.6));
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.grid-bg{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 80%);
  mask-image:radial-gradient(120% 100% at 50% 40%,#000 30%,transparent 80%);
}
.cross{position:absolute;width:9px;height:9px;opacity:.5}
.cross::before,.cross::after{content:"";position:absolute;background:rgba(255,255,255,.3)}
.cross::before{left:4px;top:0;width:1px;height:9px}
.cross::after{top:4px;left:0;height:1px;width:9px}

.today{
  position:relative;
  margin:0 auto;
  width:min(820px,100%);
  aspect-ratio:16/9;
  border-radius:18px;padding:0;
  background:
    linear-gradient(#141416,#141416) padding-box,
    conic-gradient(from 0deg,#ff5f6d,#ffc371,#7afcff,#4f8cff,#c86bff,#ff5f6d) border-box;
  border:2px solid transparent;
  box-shadow:0 0 22px rgba(120,120,255,.18);
  overflow:hidden;
}
.today .glow{
  position:absolute;inset:-10px;border-radius:24px;z-index:-1;
  background:conic-gradient(from 0deg,#ff5f6d,#ffc371,#7afcff,#4f8cff,#c86bff,#ff5f6d);
  filter:blur(22px);opacity:.4;
}
.today iframe,.today video,.today .hero-placeholder{
  width:100%;height:100%;
  border:0;border-radius:16px;
  display:block;background:#000;
  object-fit:cover;
}
.hero-placeholder{
  display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.45);font-size:14px;letter-spacing:.4px;
  background:repeating-linear-gradient(45deg,#0e0e10,#0e0e10 12px,#141416 12px,#141416 24px);
}
.hero-placeholder span{
  padding:8px 16px;border:1px dashed rgba(255,255,255,.25);border-radius:999px;
}
.unlock{
  position:absolute;left:50%;bottom:40px;transform:translateX(-50%);
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:13px;font-weight:600;
  padding:10px 22px;border-radius:10px;white-space:nowrap;
  box-shadow:0 6px 16px rgba(47,111,237,.4);
  transition:transform .1s;
}
.unlock:hover{transform:translateX(-50%) translateY(-1px)}

/* ───────────────── LOGO MARQUEE ───────────────── */
.logos{
  position:relative;height:110px;
  display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
.logo-track{
  display:flex;align-items:center;gap:72px;flex-shrink:0;
  padding-right:72px;
  animation:scrollLogos 40s linear infinite;
  will-change:transform;
}
.logo-item{
  display:inline-flex;align-items:center;gap:10px;
  font-size:22px;font-weight:700;color:#5a5a60;letter-spacing:-.5px;
  white-space:nowrap;opacity:.7;transition:opacity .2s,color .2s;
}
.logo-item:hover{opacity:1;color:#cfcfd3}
.logo-item svg{width:24px;height:24px}
@keyframes scrollLogos{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ───────────────── PROJECTS ───────────────── */
.projects{
  position:relative;
  padding:80px var(--pad-x) 64px;
}
.projects-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  margin-bottom:30px;
}
.projects-title{
  font-size:clamp(26px,3vw,36px);
  font-weight:800;color:var(--txt);letter-spacing:-1px;
}
.filter-pill{
  display:inline-flex;align-items:center;gap:2px;
  background:#161617;border:1px solid var(--line);
  border-radius:13px;padding:5px;height:42px;
}
.filter-tab{
  font-size:13.5px;font-weight:500;color:var(--muted);
  padding:0 16px;height:32px;line-height:32px;border-radius:9px;
  white-space:nowrap;transition:color .15s,background .15s;
}
.filter-tab:hover{color:#a8a8ad}
.filter-tab.active{
  color:#fff;background:#2a2a2c;font-weight:600;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset;
}
.projects-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.project-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;overflow:hidden;
  cursor:pointer;transition:transform .25s ease,border-color .25s ease;
}
.project-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.project-thumb{aspect-ratio:16/10;width:100%;position:relative;overflow:hidden}
.project-thumb::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 28% 22%,rgba(255,255,255,.18),transparent 55%);
}
.project-thumb .badge{
  position:absolute;left:14px;top:14px;
  font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:rgba(255,255,255,.85);background:rgba(0,0,0,.35);
  padding:5px 9px;border-radius:6px;backdrop-filter:blur(8px);
  z-index:2;
}
.project-body{padding:16px 18px 20px}
.project-title{font-size:15px;font-weight:600;color:#e8e8ea;margin-bottom:4px}
.project-meta{font-size:12px;color:var(--muted)}

.t-blue{background:linear-gradient(135deg,#4f8cff 0%,#7c5cff 100%)}
.t-violet{background:linear-gradient(135deg,#6f5dff 0%,#c86bff 100%)}
.t-indigo{background:linear-gradient(135deg,#1e3a8a 0%,#4f8cff 100%)}
.t-orange{background:linear-gradient(135deg,#ff8a3d 0%,#ff4d8d 100%)}
.t-pink{background:linear-gradient(135deg,#ff5da2 0%,#c86bff 100%)}
.t-amber{background:linear-gradient(135deg,#ffc371 0%,#ff5f6d 100%)}
.t-green{background:linear-gradient(135deg,#34d27f 0%,#5fa8ff 100%)}
.t-teal{background:linear-gradient(135deg,#22b86b 0%,#0e7490 100%)}
.t-lime{background:linear-gradient(135deg,#7afcff 0%,#34d27f 100%)}

.load-more-wrap{display:flex;justify-content:center;margin-top:38px}
.load-more{
  background:#161617;border:1px solid var(--line);
  color:#cfcfd3;font-size:14px;font-weight:500;
  padding:12px 28px;border-radius:11px;
  transition:background .15s,border-color .15s,color .15s;
}
.load-more:hover{background:#1c1c1e;border-color:var(--line-2);color:#fff}
.load-more[hidden]{display:none}

/* ───────────────── PAGE HERO (sub-pages) ───────────────── */
.page-hero{
  position:relative;text-align:center;
  padding:96px var(--pad-x) 40px;
  border-bottom:1px solid var(--line);
}
.section-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:#a8a8ad;
  background:#161617;border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;margin-bottom:20px;
}
.section-eyebrow::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  box-shadow:0 0 8px rgba(79,140,255,.6);
}
.section-title{
  font-size:clamp(32px,4.4vw,56px);
  font-weight:800;letter-spacing:-1.2px;color:var(--txt);
  margin-bottom:16px;
}
.section-sub{
  font-size:clamp(15px,1.5vw,18px);
  color:var(--muted);max-width:700px;line-height:1.65;
  margin:0 auto;
}

/* ───────────────── ABOUT ───────────────── */
.about-stats{
  margin-top:64px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
}
.stat-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;
}
.stat-num{
  font-size:34px;font-weight:800;letter-spacing:-1px;
  background:linear-gradient(180deg,#fff,#9aa6c1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stat-label{font-size:13px;color:var(--muted);margin-top:6px}

.about-values{
  margin-top:56px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.value-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;
  transition:transform .25s ease,border-color .25s ease;
}
.value-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.value-icon{
  width:40px;height:40px;border-radius:11px;
  background:#161617;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#cfcfd3;margin-bottom:18px;
}
.value-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.value-title{font-size:17px;font-weight:700;color:#e8e8ea;margin-bottom:6px;letter-spacing:-.2px}
.value-text{font-size:14px;color:var(--muted);line-height:1.65}

.about-team-head{margin-top:80px;margin-bottom:36px;text-align:center}
.about-team{
  display:grid;grid-template-columns:repeat(4,1fr);gap:22px;
}
.team-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  padding:24px;text-align:center;
}
.team-avatar{
  width:64px;height:64px;border-radius:50%;
  margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:22px;letter-spacing:-.5px;
}
.team-name{font-size:15px;font-weight:700;color:#e8e8ea;margin-bottom:3px}
.team-role{font-size:12.5px;color:var(--muted)}

/* ───────────────── ABOUT (v2 — solo founder) ───────────────── */
.about-eyebrow{
  display:inline-block;
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:#a8a8ad;margin-bottom:14px;
}
.about-h2{
  font-size:clamp(26px,3vw,38px);
  font-weight:800;letter-spacing:-.6px;color:#e8e8ea;
  margin-bottom:16px;
}
.about-h2-center{text-align:center}
.about-lede{
  font-size:15.5px;color:var(--muted);line-height:1.7;
  max-width:680px;margin:0 auto 8px;text-align:center;
}

.about-story{
  max-width:var(--container);
  margin:64px auto 0;
  padding:0 var(--pad-x);
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:48px;align-items:center;
}
.about-story-photos{
  display:flex;flex-direction:column;gap:14px;
}
.about-story-photo{
  /* 8% narrower than its grid column (owner's call: -15, then +7). It shrinks from the
     RIGHT so the photo stays flush with the section's left edge, where it lines up with
     everything else on the page; the freed space widens the gutter instead of moving the
     picture. */
  width:92%;
  border-radius:18px;overflow:hidden;
  border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.about-story-photo:hover{
  transform:translateY(-2px);
  border-color:var(--line-2);
  box-shadow:0 14px 32px rgba(0,0,0,.4);
}
.about-story-photo img{width:100%;height:auto;display:block}
.about-story-text p{
  font-size:15.5px;color:#cfcfd3;line-height:1.75;
  margin-bottom:14px;
}
.about-story-text p:last-of-type{margin-bottom:18px}
.about-story-text strong{color:#fff;font-weight:700}
.about-inline-link{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;color:#7aa8ff;
  background:#161617;border:1px solid var(--line);
  border-radius:10px;padding:9px 14px;
  transition:border-color .15s,background .15s,color .15s;
}
.about-inline-link:hover{border-color:rgba(122,168,255,.4);background:#1c1c1e;color:#9ec3ff}
.about-inline-link svg{width:13px;height:13px;transition:transform .2s}
.about-inline-link:hover svg{transform:translateX(3px)}

.about-principles-head{
  margin-top:24px;margin-bottom:36px;text-align:center;
  display:flex;flex-direction:column;align-items:center;
}
.about-principles{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.principle-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;
  transition:transform .25s ease,border-color .25s ease;
}
.principle-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.principle-num{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:#7aa8ff;letter-spacing:1px;margin-bottom:14px;
}
.principle-title{
  font-size:18px;font-weight:700;color:#e8e8ea;letter-spacing:-.3px;
  margin-bottom:10px;
}
.principle-text{font-size:14px;color:var(--muted);line-height:1.7}

.about-public{
  padding:80px var(--pad-x) 32px;
  max-width:var(--container);margin:0 auto;
}
.about-public-head{
  display:flex;flex-direction:column;align-items:center;
  margin-bottom:36px;
}
.about-public-gallery{
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px;
}
.about-pub-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  overflow:hidden;
  transition:transform .25s ease,border-color .25s ease;
}
.about-pub-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.about-pub-card img{
  width:100%;aspect-ratio:5/4;object-fit:cover;display:block;
  border-bottom:1px solid var(--line);
}
.about-pub-card figcaption{
  padding:18px 20px 20px;
  display:flex;flex-direction:column;gap:4px;
}
.about-pub-card figcaption strong{
  font-size:14.5px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px;
}
.about-pub-card figcaption span{
  font-size:13px;color:var(--muted);line-height:1.55;
}

.about-cta-wrap{
  padding:32px var(--pad-x) 80px;
  max-width:var(--container);margin:0 auto;
}
.about-cta{
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(79,140,255,.1),transparent 60%),
    linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid rgba(79,140,255,.3);border-radius:20px;
  padding:36px 38px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.about-cta-copy{flex:1;min-width:260px}
.about-cta-copy h3{
  font-size:22px;font-weight:800;color:#e8e8ea;letter-spacing:-.4px;
  margin-bottom:8px;
}
.about-cta-copy p{font-size:14px;color:var(--muted);line-height:1.65;max-width:540px}
.about-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 24px;border-radius:12px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:14px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  transition:transform .1s;flex-shrink:0;
}
.about-cta-btn:hover{transform:translateY(-1px)}
.about-cta-btn svg{width:14px;height:14px;transition:transform .2s}
.about-cta-btn:hover svg{transform:translateX(3px)}

/* ───────────────── DOCUMENTATION ───────────────── */
.docs-search{
  margin:48px auto 0;
  display:flex;align-items:center;gap:10px;
  max-width:620px;
  background:#161617;border:1px solid var(--line);
  border-radius:13px;padding:5px 5px 5px 16px;height:54px;
  transition:border-color .15s;
}
.docs-search:focus-within{border-color:rgba(79,140,255,.5)}
.docs-search svg{width:17px;height:17px;stroke:#9a9aa0;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.docs-search input{
  flex:1;background:transparent;border:0;outline:0;
  color:#e8e8ea;font-size:14px;font-family:inherit;
}
.docs-search input::placeholder{color:#5d5d62}
.docs-search kbd{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:11px;color:#9a9aa0;
  background:#1c1c1e;border:1px solid var(--line);
  border-radius:6px;padding:3px 7px;
}
.docs-grid{
  margin-top:48px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.doc-card{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;
  text-decoration:none;color:inherit;
  transition:transform .25s ease,border-color .25s ease;
  display:flex;flex-direction:column;
}
.doc-card:hover{transform:translateY(-3px);border-color:var(--line-2)}
.doc-icon{
  width:42px;height:42px;border-radius:11px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  display:flex;align-items:center;justify-content:center;
  color:#fff;margin-bottom:20px;
  box-shadow:0 6px 16px rgba(47,111,237,.25);
}
.doc-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.doc-title{font-size:17px;font-weight:700;color:#e8e8ea;margin-bottom:6px;letter-spacing:-.2px}
.doc-text{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:16px}
.doc-link{
  font-size:13px;font-weight:600;color:#7aa8ff;
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;
}
.doc-link svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .2s}
.doc-card:hover .doc-link svg{transform:translateX(3px)}

.docs-cta{
  margin-top:64px;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:20px;
  padding:40px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.docs-cta h3{font-size:22px;font-weight:800;color:#e8e8ea;margin-bottom:6px;letter-spacing:-.5px}
.docs-cta p{font-size:14px;color:var(--muted);max-width:520px}
.docs-cta-btn{
  height:44px;padding:0 22px;border-radius:11px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .1s;
}
.docs-cta-btn:hover{transform:translateY(-1px)}

/* ───────────────── FAQ ───────────────── */
.faq-list{
  margin:56px auto 0;
  max-width:880px;
  display:flex;flex-direction:column;gap:14px;
}
.faq-item{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:16px;
  overflow:hidden;
  transition:border-color .2s;
}
.faq-item[open]{border-color:var(--line-2)}
.faq-q{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 26px;
  font-size:15.5px;font-weight:600;color:#e8e8ea;letter-spacing:-.1px;
}
.faq-q::-webkit-details-marker{display:none}
.faq-icon{
  width:30px;height:30px;border-radius:9px;
  background:#161617;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;transition:transform .25s,background .2s,border-color .2s;
}
.faq-icon svg{width:13px;height:13px;fill:none;stroke:#cfcfd3;stroke-width:2.4;stroke-linecap:round}
.faq-item[open] .faq-icon{
  transform:rotate(45deg);
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  border-color:transparent;
}
.faq-item[open] .faq-icon svg{stroke:#fff}
.faq-a{
  padding:0 26px 24px;
  font-size:14.5px;color:var(--muted);line-height:1.7;
}
.faq-a a{
  color:#7aa8ff;font-weight:600;
  border-bottom:1px solid rgba(122,168,255,.3);
  transition:color .15s,border-color .15s;
}
.faq-a a:hover{color:#9ec3ff;border-bottom-color:rgba(158,195,255,.6)}

.faq-cta{
  margin:64px auto 0;
  max-width:880px;
  text-align:center;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:20px;
  padding:40px;
}
.faq-cta h3{font-size:22px;font-weight:800;color:#e8e8ea;margin-bottom:8px;letter-spacing:-.5px}
.faq-cta p{font-size:14px;color:var(--muted);margin-bottom:18px}
.faq-cta-btn{
  height:44px;padding:0 22px;border-radius:11px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  display:inline-flex;align-items:center;gap:8px;
  transition:transform .1s;
}
.faq-cta-btn:hover{transform:translateY(-1px)}

/* ───────────────── CONTACT (vertical list) ───────────────── */
.contact-grid{
  margin:56px auto 0;
  max-width:920px;
  display:flex;flex-direction:column;gap:14px;
}
.contact-card{
  position:relative;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:16px;
  padding:22px 24px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto auto auto auto;
  align-items:center;
  column-gap:22px;row-gap:4px;
  transition:border-color .25s ease,background .2s ease;
}
.contact-card:hover{border-color:var(--line-2);background:linear-gradient(180deg,rgba(28,28,30,.95),rgba(14,14,15,.95))}
.contact-icon{
  grid-column:1;grid-row:1 / span 4;
  width:48px;height:48px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  color:#fff;flex-shrink:0;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.contact-icon svg{width:20px;height:20px}
.contact-icon-blue{background:linear-gradient(180deg,#4f8cff,#2f6fed)}
.contact-icon-violet{background:linear-gradient(180deg,#7c5cff,#5b3fff)}
.contact-icon-amber{background:linear-gradient(180deg,#ff9d3d,#ff6a3d)}
.contact-tag{
  grid-column:2;grid-row:1;
  font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:#a8a8ad;
  margin-bottom:2px;
}
.contact-title{
  grid-column:2;grid-row:2;
  font-size:17px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px;
}
.contact-text{
  grid-column:2;grid-row:3;
  font-size:13.5px;color:var(--muted);line-height:1.6;
  margin:4px 0 0;
}
.contact-email{
  grid-column:2;grid-row:4;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;color:#cfcfd3;
  background:#161617;border:1px solid var(--line);
  border-radius:8px;padding:5px 10px;
  margin-top:10px;
  justify-self:start;
  word-break:break-all;
}
.contact-btn{
  grid-column:3;grid-row:1 / span 4;
  align-self:center;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:11px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  transition:transform .1s;
}
.contact-btn:hover{transform:translateY(-1px)}
.contact-btn svg{width:14px;height:14px;transition:transform .2s}
.contact-btn:hover svg{transform:translateX(3px)}
.contact-note{
  margin:40px auto 0;max-width:920px;
  display:flex;align-items:flex-start;gap:12px;
  background:rgba(22,22,23,.7);border:1px solid var(--line);
  border-radius:14px;padding:16px 18px;
  font-size:13.5px;color:var(--muted);line-height:1.6;
}
.contact-note svg{
  width:18px;height:18px;flex-shrink:0;color:#7aa8ff;margin-top:1px;
}

/* ───────────────── LIL DEV — DIRECTORY (vertical list) ───────────────── */
.dev-grid{
  margin:56px auto 0;
  max-width:920px;
  display:flex;flex-direction:column;gap:14px;
}
.dev-card{
  position:relative;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:16px;
  padding:20px 24px;
  display:grid;
  grid-template-columns:minmax(220px,260px) 1fr auto;
  grid-template-rows:auto auto;
  grid-template-areas:
    "head bio    foot"
    "head skills foot";
  column-gap:24px;row-gap:10px;align-items:center;
  cursor:pointer;text-decoration:none;color:inherit;
  transition:border-color .25s ease,background .2s ease;
}
.dev-card:hover{border-color:var(--line-2);background:linear-gradient(180deg,rgba(28,28,30,.95),rgba(14,14,15,.95))}
.dev-card-featured{
  padding:30px 30px 28px;
  border-color:rgba(79,140,255,.4);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(79,140,255,.1),transparent 60%),
    linear-gradient(180deg,rgba(26,26,28,.95),rgba(14,14,16,.95));
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 14px 36px rgba(47,111,237,.16),
    0 6px 18px rgba(0,0,0,.35);
}
.dev-card-featured:hover{
  border-color:rgba(79,140,255,.6);
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(79,140,255,.14),transparent 60%),
    linear-gradient(180deg,rgba(30,30,32,.98),rgba(16,16,18,.98));
  box-shadow:
    0 1px 0 rgba(255,255,255,.05) inset,
    0 18px 42px rgba(47,111,237,.22),
    0 8px 20px rgba(0,0,0,.4);
}
.dev-card-featured .dev-card-avatar{width:60px;height:60px;font-size:19px}
.dev-card-featured .dev-card-name{font-size:18px}
.dev-card-featured .dev-card-role{font-size:13px}
.dev-card-featured .dev-card-bio{font-size:14px;-webkit-line-clamp:3}
.dev-card-featured .dev-card-link{
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;border-color:transparent;
  box-shadow:0 6px 16px rgba(47,111,237,.4);
}
.dev-card-featured:hover .dev-card-link{
  background:linear-gradient(180deg,#5e98ff,#3a78ff);
  color:#fff;border-color:transparent;
}

.dev-card-badge{
  position:absolute;top:-12px;left:20px;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:6px 12px 6px 10px;
  box-shadow:0 8px 20px rgba(47,111,237,.5),0 2px 4px rgba(0,0,0,.3);
  transform:rotate(-3deg);
  pointer-events:none;
  z-index:2;
}
.dev-card-badge svg{
  width:11px;height:11px;fill:currentColor;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.dev-card-head{
  grid-area:head;align-self:center;
  display:flex;align-items:center;gap:14px;min-width:0;
}
.dev-card-avatar{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:17px;letter-spacing:-.5px;
  flex-shrink:0;overflow:hidden;
}
.dev-card-avatar.dev-card-avatar-photo{
  background:#161617;
  border:1px solid var(--line);
}
.dev-card-avatar img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.dev-card-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.dev-card-name{
  font-size:16px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dev-card-role{
  font-size:12.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dev-card-bio{
  grid-area:bio;align-self:end;
  font-size:13.5px;color:var(--muted);line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dev-card-skills{
  grid-area:skills;align-self:start;
  display:flex;flex-wrap:wrap;gap:6px;
}
.dev-card-skills .dev-tag{
  font-size:11px;font-weight:500;
  color:#a8a8ad;background:#161617;border:1px solid var(--line);
  border-radius:6px;padding:3px 8px;
}
.dev-card-foot{
  grid-area:foot;align-self:center;
  display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;
  font-size:12.5px;color:var(--muted);white-space:nowrap;
}
.dev-card-link{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;font-weight:600;color:#7aa8ff;
  background:#161617;border:1px solid var(--line);
  border-radius:9px;padding:6px 12px;
  transition:border-color .15s,background .15s,color .15s;
}
.dev-card:hover .dev-card-link{border-color:rgba(122,168,255,.4);background:#1c1c1e;color:#9ec3ff}
.dev-card-link svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;transition:transform .2s}
.dev-card:hover .dev-card-link svg{transform:translateX(3px)}
.dev-empty{
  margin:48px auto 0;max-width:520px;text-align:center;
  color:var(--muted);font-size:14px;
}
.dev-empty a{color:#7aa8ff;font-weight:600}

.dev-cta{
  margin:48px auto 0;max-width:920px;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(79,140,255,.1),transparent 60%),
    linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid rgba(79,140,255,.3);border-radius:18px;
  padding:32px 36px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.dev-cta-copy{flex:1;min-width:240px}
.dev-cta-copy h3{
  font-size:20px;font-weight:800;color:#e8e8ea;letter-spacing:-.3px;
  margin-bottom:6px;
}
.dev-cta-copy p{font-size:14px;color:var(--muted);line-height:1.65;max-width:560px}
.dev-cta-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 22px;border-radius:12px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:14px;font-weight:600;white-space:nowrap;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  transition:transform .1s;flex-shrink:0;
}
.dev-cta-btn:hover{transform:translateY(-1px)}
.dev-cta-btn svg{width:14px;height:14px;transition:transform .2s}
.dev-cta-btn:hover svg{transform:translateX(3px)}

/* ───────────────── LIL DEV — PROFILE ───────────────── */
.dev-profile{
  max-width:880px;margin:0 auto;
  padding:64px var(--pad-x) 80px;
}
.dev-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);
  background:#161617;border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;
  transition:color .15s,border-color .15s,background .15s;
}
.dev-back:hover{color:#e8e8ea;border-color:var(--line-2);background:#1c1c1e}
.dev-back svg{width:13px;height:13px}
.dev-head{
  margin-top:32px;
  display:flex;gap:28px;align-items:center;flex-wrap:wrap;
  padding-bottom:36px;border-bottom:1px solid var(--line);
}
.dev-avatar{
  width:104px;height:104px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:34px;letter-spacing:-1px;
  flex-shrink:0;overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.dev-avatar.dev-avatar-photo{background:#161617;border:1px solid var(--line)}
.dev-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.dev-head-meta{display:flex;flex-direction:column;gap:6px}
.dev-role-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dev-role{
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:#a8a8ad;
}
.dev-profile-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:5px 11px 5px 9px;
  box-shadow:0 6px 16px rgba(47,111,237,.4);
  transform:rotate(1.5deg);
}
.dev-profile-badge[hidden]{display:none}
.dev-profile-badge svg{width:11px;height:11px;fill:currentColor}
.dev-name{
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800;letter-spacing:-1px;color:#f4f4f5;
}
.dev-location{font-size:13.5px;color:var(--muted)}
.dev-actions{margin-top:10px}
.dev-linkedin{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13.5px;font-weight:600;color:#fff;
  background:linear-gradient(180deg,#0a66c2,#0353a4);
  border-radius:10px;padding:9px 16px;
  box-shadow:0 6px 16px rgba(10,102,194,.35);
  transition:transform .1s;
}
.dev-linkedin:hover{transform:translateY(-1px)}
.dev-linkedin svg{width:14px;height:14px;fill:currentColor}
.dev-section{margin-top:36px}
.dev-section-title{
  font-size:12px;font-weight:600;color:#a8a8ad;
  letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;
}
.dev-about{font-size:15.5px;color:#cfcfd3;line-height:1.75}
.dev-skills{display:flex;flex-wrap:wrap;gap:8px}
.dev-skill-tag{
  font-size:12.5px;font-weight:500;color:#cfcfd3;
  background:#161617;border:1px solid var(--line);
  border-radius:8px;padding:6px 12px;
}
.dev-experience{list-style:none;display:flex;flex-direction:column;gap:14px}
.dev-experience li{
  background:linear-gradient(180deg,rgba(24,24,26,.7),rgba(12,12,13,.7));
  border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;
}
.dev-exp-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  margin-bottom:6px;
}
.dev-exp-role{font-size:15px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px}
.dev-exp-when{font-size:12.5px;color:var(--muted);font-family:'JetBrains Mono',monospace}
.dev-exp-org{font-size:13px;color:#a8a8ad;margin-bottom:8px}
.dev-exp-text{font-size:13.5px;color:var(--muted);line-height:1.65}
.dev-impact{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dev-impact-card{
  background:linear-gradient(180deg,rgba(24,24,26,.7),rgba(12,12,13,.7));
  border:1px solid var(--line);border-radius:14px;
  padding:20px 18px;
}
.dev-impact-num{
  font-size:26px;font-weight:800;letter-spacing:-.5px;
  background:linear-gradient(180deg,#fff,#9aa6c1);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.dev-impact-label{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}

/* ───────────────── LIL SUMMIT ───────────────── */
.summit-hero .section-title em{font-style:italic;color:#9ec3ff;font-weight:800}
.summit-cta-row{
  margin-top:30px;
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;
}
.summit-hero-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:48px;padding:0 26px;border-radius:12px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:14.5px;font-weight:600;letter-spacing:-.1px;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  transition:transform .1s,background .2s;
}
.summit-hero-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#5e98ff,#3a78ff);
}
.summit-hero-btn svg{width:16px;height:16px;transition:transform .2s}
.summit-hero-btn:hover svg{transform:translateX(3px)}

.summit-h2{
  font-size:clamp(22px,2.4vw,30px);
  font-weight:800;letter-spacing:-.6px;color:#e8e8ea;
  margin-bottom:18px;
}
.summit-intro{
  margin-top:56px;max-width:780px;
}
.summit-p{font-size:15px;color:var(--muted);line-height:1.75;margin-bottom:14px}
.summit-p:last-child{margin-bottom:0}

.summit-pillars{
  margin-top:56px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.summit-pillar{
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:18px;
  padding:28px 26px;
  transition:transform .25s ease,border-color .25s ease;
}
.summit-pillar:hover{transform:translateY(-3px);border-color:var(--line-2)}
.summit-pillar-num{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:#7aa8ff;letter-spacing:1px;margin-bottom:10px;
}
.summit-pillar-title{
  font-size:18px;font-weight:700;color:#e8e8ea;letter-spacing:-.3px;
  margin-bottom:8px;
}
.summit-pillar-text{font-size:14px;color:var(--muted);line-height:1.7}

.summit-how{margin-top:64px}
.summit-how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.summit-how-card{
  background:rgba(22,22,23,.7);border:1px solid var(--line);
  border-radius:14px;padding:22px 22px 20px;
}
.summit-how-label{
  font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:#9ec3ff;margin-bottom:10px;
}
.summit-how-card p{font-size:13.5px;color:var(--muted);line-height:1.7}

.summit-roadmap{margin-top:64px}
.summit-timeline{list-style:none;position:relative;padding-left:28px}
.summit-timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;
  width:2px;background:linear-gradient(180deg,rgba(79,140,255,.5),rgba(255,255,255,.05));
  border-radius:2px;
}
.summit-timeline li{
  position:relative;padding:6px 0 24px;
}
.summit-timeline li:last-child{padding-bottom:0}
.summit-tl-dot{
  position:absolute;left:-26px;top:9px;
  width:14px;height:14px;border-radius:50%;
  background:#161617;border:2px solid #4f8cff;
  box-shadow:0 0 12px rgba(79,140,255,.4);
}
.summit-tl-when{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12px;color:#7aa8ff;letter-spacing:.5px;margin-bottom:4px;
}
.summit-tl-what{font-size:14.5px;color:#cfcfd3;line-height:1.65}
.summit-tl-what strong{color:#e8e8ea;font-weight:700}

.summit-contact-card{
  margin-top:64px;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:20px;
  padding:36px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
}
.summit-contact-left{flex:1;min-width:260px}
.summit-contact-left h3{
  font-size:22px;font-weight:800;color:#e8e8ea;letter-spacing:-.4px;
  margin-bottom:8px;
}
.summit-contact-left p{font-size:14px;color:var(--muted);line-height:1.65;max-width:520px}
.summit-contact-left strong{color:#e8e8ea;font-family:'JetBrains Mono',monospace;font-weight:500}
.summit-contact-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:46px;padding:0 22px;border-radius:12px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:14px;font-weight:600;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  transition:transform .1s;flex-shrink:0;
}
.summit-contact-btn:hover{transform:translateY(-1px)}
.summit-contact-btn svg{width:14px;height:14px;transition:transform .2s}
.summit-contact-btn:hover svg{transform:translateX(3px)}

/* ───────────────── LEGAL PAGES (Privacy / Terms / Cookies / Security) ───────────────── */
.legal-page{
  max-width:780px;
  margin:24px auto 0;
  padding:0 var(--pad-x) 80px;
  color:#cfcfd3;
}
.legal-meta{
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;color:var(--muted);
  background:#161617;border:1px solid var(--line);
  border-radius:9px;padding:8px 12px;
  display:inline-block;margin-top:28px;
}
.legal-intro{
  margin-top:36px;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:16px;
  padding:24px 26px;
}
.legal-intro h2{
  font-size:16px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px;
  margin-bottom:10px;
}
.legal-intro p{font-size:14px;color:var(--muted);line-height:1.7;margin-bottom:12px}
.legal-intro ul{margin:8px 0 0 0;padding:0;list-style:none}
.legal-intro li{
  font-size:14px;color:var(--muted);line-height:1.65;
  padding:6px 0 6px 22px;position:relative;
}
.legal-intro li::before{
  content:"";position:absolute;left:6px;top:13px;
  width:4px;height:4px;border-radius:50%;background:#4f8cff;
}
.legal-intro strong{color:#e8e8ea}

.legal-page h2{
  font-size:20px;font-weight:800;color:#e8e8ea;letter-spacing:-.3px;
  margin:48px 0 10px;
  scroll-margin-top:96px;
}
.legal-page h3{
  font-size:16px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px;
  margin:24px 0 8px;
}
.legal-page p{font-size:14.5px;color:#bfbfc4;line-height:1.75;margin-bottom:14px}
.legal-page p strong, .legal-page li strong{color:#e8e8ea;font-weight:700}
.legal-page ul{margin:8px 0 18px 0;padding:0;list-style:none}
.legal-page li{
  font-size:14.5px;color:#bfbfc4;line-height:1.7;
  padding:6px 0 6px 22px;position:relative;
}
.legal-page li::before{
  content:"";position:absolute;left:6px;top:15px;
  width:5px;height:5px;border-radius:50%;background:rgba(122,168,255,.7);
}
.legal-page a{
  color:#7aa8ff;font-weight:600;
  border-bottom:1px solid rgba(122,168,255,.3);
  transition:color .15s,border-color .15s;
}
.legal-page a:hover{color:#9ec3ff;border-bottom-color:rgba(158,195,255,.6)}
.legal-page hr{
  border:0;height:1px;background:var(--line);
  margin:48px 0;
}
.legal-page ol{
  margin:10px 0 20px 0;padding:0;list-style:none;counter-reset:steps;
}
.legal-page ol > li{
  font-size:14.5px;color:#bfbfc4;line-height:1.7;
  padding:8px 0 8px 36px;position:relative;
  counter-increment:steps;
}
.legal-page ol > li::before{
  content:counter(steps);
  position:absolute;left:0;top:8px;
  width:24px;height:24px;border-radius:50%;
  background:#161617;border:1px solid var(--line);
  color:#7aa8ff;font-family:'JetBrains Mono',monospace;
  font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.legal-page ol > li ul{margin:8px 0 6px 0}
.legal-page ol > li ul li{padding:4px 0 4px 22px}
.legal-page blockquote{
  margin:18px 0 22px;
  padding:14px 18px;
  background:rgba(79,140,255,.06);
  border:1px solid rgba(79,140,255,.25);
  border-left:3px solid #4f8cff;
  border-radius:10px;
  font-size:14.5px;color:#cfcfd3;line-height:1.7;
}
.legal-page blockquote strong{color:#9ec3ff}

.docs-back{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;color:var(--muted);
  background:#161617;border:1px solid var(--line);
  border-radius:10px;padding:8px 14px;
  margin-top:32px;
  transition:color .15s,border-color .15s,background .15s;
}
.docs-back:hover{color:#e8e8ea;border-color:var(--line-2);background:#1c1c1e}
.docs-back svg{width:13px;height:13px}

/* ───────────────── COMING-SOON (Tutorials / Blog) ───────────────── */
.coming-soon{
  margin:32px auto 24px;max-width:640px;
  background:linear-gradient(180deg,rgba(24,24,26,.9),rgba(12,12,13,.92));
  border:1px solid var(--line);border-radius:20px;
  padding:48px 36px;text-align:center;
}
.coming-soon-icon{
  width:64px;height:64px;border-radius:18px;
  background:#161617;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;color:#7aa8ff;
}
.coming-soon-icon svg{width:30px;height:30px}
.coming-soon h2{
  font-size:24px;font-weight:800;color:#e8e8ea;letter-spacing:-.4px;
  margin-bottom:14px;
}
.coming-soon p{
  font-size:14.5px;color:var(--muted);line-height:1.75;
  margin-bottom:14px;max-width:520px;margin-left:auto;margin-right:auto;
}
.coming-soon-actions{
  margin-top:24px;
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
}
.coming-soon-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:44px;padding:0 20px;border-radius:11px;
  background:#161617;border:1px solid var(--line);
  color:#e8e8ea;font-size:14px;font-weight:600;
  transition:border-color .15s,background .15s,color .15s,transform .1s;
}
.coming-soon-btn:hover{border-color:var(--line-2);background:#1c1c1e}
.coming-soon-btn-primary{
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  border-color:transparent;color:#fff;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
}
.coming-soon-btn-primary:hover{
  background:linear-gradient(180deg,#5e98ff,#3a78ff);
  border-color:transparent;transform:translateY(-1px);
}
.coming-soon-btn svg{width:14px;height:14px;transition:transform .2s}
.coming-soon-btn-primary:hover svg{transform:translateX(3px)}

/* ───────────────── COMMUNITY ───────────────── */
.community-card{
  margin:32px auto 0;max-width:880px;
  background:
    radial-gradient(120% 100% at 0% 0%,rgba(88,101,242,.14),transparent 60%),
    linear-gradient(180deg,rgba(24,24,26,.92),rgba(12,12,13,.95));
  border:1px solid rgba(88,101,242,.32);border-radius:22px;
  padding:48px 44px 40px;text-align:center;
}
.community-logo{
  width:72px;height:72px;border-radius:20px;
  background:linear-gradient(180deg,#5865f2,#404eed);
  display:flex;align-items:center;justify-content:center;color:#fff;
  margin:0 auto 22px;
  box-shadow:0 12px 28px rgba(88,101,242,.4);
}
.community-logo svg{width:36px;height:36px;fill:currentColor}
.community-eyebrow{
  font-size:11px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:#9aa8ff;margin-bottom:14px;
}
.community-title{
  font-size:clamp(26px,3.2vw,38px);
  font-weight:800;color:#f4f4f5;letter-spacing:-.8px;
  margin-bottom:14px;
}
.community-sub{
  font-size:15.5px;color:var(--muted);line-height:1.7;
  max-width:600px;margin:0 auto 36px;
}
.community-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:0 auto 36px;text-align:left;
}
.community-pillar{
  background:rgba(22,22,23,.7);border:1px solid var(--line);
  border-radius:14px;padding:20px 20px 18px;
}
.community-pillar-icon{
  width:36px;height:36px;border-radius:10px;
  background:#161617;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#9aa8ff;margin-bottom:14px;
}
.community-pillar-icon svg{width:18px;height:18px}
.community-pillar h3{
  font-size:15px;font-weight:700;color:#e8e8ea;letter-spacing:-.2px;
  margin-bottom:6px;
}
.community-pillar p{font-size:13.5px;color:var(--muted);line-height:1.65}
.community-cta-btn{
  display:inline-flex;align-items:center;gap:10px;
  height:52px;padding:0 28px;border-radius:13px;
  background:linear-gradient(180deg,#5865f2,#404eed);
  color:#fff;font-size:15px;font-weight:700;letter-spacing:-.1px;
  box-shadow:0 10px 24px rgba(88,101,242,.45);
  transition:transform .1s,background .2s;
}
.community-cta-btn:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#6f7bff,#525fff);
}
.community-cta-btn svg{width:18px;height:18px}
.community-cta-arrow{transition:transform .2s}
.community-cta-btn:hover .community-cta-arrow{transform:translateX(4px)}
.community-cta-url{
  margin-top:14px;
  font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:12.5px;color:var(--muted-2);letter-spacing:.4px;
}

/* ───────────────── FOOTER ───────────────── */
.footer{
  position:relative;
  padding:80px var(--pad-x) 32px;
  border-top:1px solid var(--line);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 2.2fr;
  gap:48px;padding-bottom:48px;
  border-bottom:1px solid var(--line);
  max-width:var(--container);margin:0 auto;
}
.foot-brand .logo{margin-bottom:18px}
.foot-wordmark{
  font-size:18px;font-weight:800;color:#f4f4f5;letter-spacing:-.5px;
  margin-bottom:14px;
}
.foot-tag{font-size:13px;color:var(--muted);line-height:1.65;max-width:280px;margin-bottom:22px}
.foot-social{display:flex;gap:10px;flex-wrap:wrap}
.foot-social a{
  width:36px;height:36px;border-radius:10px;
  background:#161617;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:#8a8a90;
  transition:color .15s,border-color .15s,background .15s;
}
.foot-social a:hover{color:#fff;border-color:var(--line-2);background:#1c1c1e}
.foot-social svg{width:16px;height:16px;fill:currentColor}

.foot-col h4{
  font-size:12px;font-weight:600;color:#e8e8ea;
  letter-spacing:.6px;text-transform:uppercase;margin-bottom:18px;
}
.foot-col ul{list-style:none;display:flex;flex-direction:column;gap:11px}
.foot-col a{font-size:13.5px;color:var(--muted);transition:color .15s}
.foot-col a:hover{color:#e8e8ea}

.foot-subscribe p{font-size:13px;color:var(--muted);line-height:1.65;margin:0 0 14px}
.foot-form{display:flex;gap:8px;flex-wrap:wrap}
.foot-input{
  flex:1;min-width:0;background:#161617;border:1px solid var(--line);
  border-radius:11px;padding:0 14px;height:42px;
  color:#e8e8ea;font-size:13.5px;font-family:inherit;
  outline:none;transition:border-color .15s;
}
.foot-input::placeholder{color:#5a5a60}
.foot-input:focus{border-color:rgba(79,140,255,.5)}
.foot-submit{
  height:42px;padding:0 18px;border-radius:11px;
  background:linear-gradient(180deg,#4f8cff,#2f6fed);
  color:#fff;font-size:13px;font-weight:600;
  white-space:nowrap;
  box-shadow:0 6px 16px rgba(47,111,237,.35);
  transition:transform .1s;
}
.foot-submit:hover{transform:translateY(-1px)}
.foot-submit:active{transform:translateY(0)}
.foot-msg{font-size:12px;color:var(--green);margin-top:10px;min-height:16px}

.foot-bottom{
  display:flex;align-items:center;justify-content:space-between;
  padding-top:28px;gap:24px;flex-wrap:wrap;
  max-width:var(--container);margin:0 auto;
}
.foot-copy{font-size:12px;color:var(--muted-2)}
.foot-legal{display:flex;gap:22px;flex-wrap:wrap}
.foot-legal a{font-size:12px;color:var(--muted-2);transition:color .15s}
.foot-legal a:hover{color:#e8e8ea}
.foot-locale{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;color:#cfcfd3;
  background:#161617;border:1px solid var(--line);
  border-radius:9px;padding:6px 11px;
  transition:border-color .15s,background .15s;
}
.foot-locale:hover{border-color:var(--line-2);background:#1c1c1e}
.foot-locale svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* ───────────────── RESPONSIVE ───────────────── */
@media (max-width:1024px){
  .pill{display:none}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .about-stats{grid-template-columns:repeat(2,1fr)}
  .about-values{grid-template-columns:repeat(2,1fr)}
  .about-team{grid-template-columns:repeat(2,1fr)}
  .docs-grid{grid-template-columns:repeat(2,1fr)}
  .about-story{grid-template-columns:1fr;gap:32px}
  /* One column: nothing to be flush with, so the narrower photo is centred. */
  .about-story-photo{margin-inline:auto}
  .community-grid{grid-template-columns:1fr;gap:12px}
  .community-card{padding:36px 24px 30px}
  .about-principles{grid-template-columns:1fr;gap:14px}
  .about-public-gallery{grid-template-columns:1fr;gap:16px}
  /* contact + dev lists keep their vertical stack at all sizes */
  .dev-card{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "head foot"
      "bio  bio"
      "skills skills";
    column-gap:18px;row-gap:12px;
  }
  .dev-card-bio{align-self:auto}
  .dev-card-skills{align-self:auto}
  .dev-card-foot{align-items:flex-end}
  .summit-pillars{grid-template-columns:1fr}
  .summit-how-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .foot-brand,.foot-subscribe{grid-column:1 / -1}
}
@media (max-width:640px){
  .nav{padding:14px var(--pad-x)}
  .signin{padding:0 16px;font-size:13px}
  .wordmark{letter-spacing:-1.5px}
  .subtitle{font-size:15px;padding:0 12px}
  .downloads{gap:10px;margin-top:28px}
  .dl-btn{min-width:220px;padding:14px 28px;gap:12px}
  .dl-platform{width:28px;height:28px}
  .dl-text small{font-size:11px}
  .dl-text strong{font-size:15px}
  .card-left{padding:32px 16px 40px}
  .projects-grid{grid-template-columns:1fr;gap:16px}
  .page-hero{padding:72px var(--pad-x) 32px}
  .about-stats{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{padding:18px}
  .stat-num{font-size:26px}
  .about-values{grid-template-columns:1fr}
  .about-team{grid-template-columns:1fr 1fr;gap:14px}
  .docs-grid{grid-template-columns:1fr;gap:16px}
  .docs-cta{padding:28px;flex-direction:column;align-items:flex-start;text-align:left}
  .faq-q{padding:18px 20px;font-size:14px}
  .faq-a{padding:0 20px 18px;font-size:13.5px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .foot-brand,.foot-subscribe{grid-column:1 / -1}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  .about-story{margin-top:40px;gap:24px}
  .about-cta{padding:28px 22px;flex-direction:column;align-items:flex-start}
  .about-cta-btn{width:100%;justify-content:center}
  .about-public{padding:56px var(--pad-x) 24px}
  .about-cta-wrap{padding:24px var(--pad-x) 56px}
  .contact-card{
    padding:18px 20px;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto auto auto auto;
    row-gap:2px;
  }
  .contact-icon{grid-column:1;grid-row:1 / span 2;width:44px;height:44px}
  .contact-tag{grid-column:2;grid-row:1}
  .contact-title{grid-column:2;grid-row:2}
  .contact-text{grid-column:1 / -1;grid-row:3;margin-top:10px}
  .contact-email{grid-column:1 / -1;grid-row:4;margin-top:6px}
  .contact-btn{
    grid-column:1 / -1;grid-row:5;
    width:100%;margin-top:12px;align-self:auto;
  }
  .dev-card{
    padding:18px 20px;
    grid-template-columns:1fr;
    grid-template-areas:
      "head"
      "bio"
      "skills"
      "foot";
    row-gap:12px;
  }
  .dev-card-foot{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .dev-cta{padding:24px 22px;flex-direction:column;align-items:flex-start;text-align:left}
  .dev-cta-btn{width:100%;justify-content:center}
  .dev-profile{padding:48px 20px 64px}
  .dev-head{gap:18px}
  .dev-avatar{width:80px;height:80px;font-size:26px}
  .dev-impact{grid-template-columns:1fr 1fr;gap:10px}
  .summit-pillar{padding:24px 22px}
  .summit-how-card{padding:20px 18px}
  .summit-contact-card{padding:28px 22px;flex-direction:column;align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .logo-track{animation:none}
  .project-card,.foot-submit,.unlock,.value-card,.doc-card{transition:none}
  html{scroll-behavior:auto}
}

::selection{background:rgba(79,140,255,.4);color:#fff}

/* ── Hero chat: the app's composer, on the marketing page ──────────────────
   Same shape and the same tokens the app uses (--raised #2c2c2e surface, #fff
   text, #8e8e93 placeholder, 60px min-height), so the field a visitor types
   into here is the field they keep using after they sign in.

   NO FOCUS RING ON THE CARD OR THE TEXTAREA. An earlier version lit a blue
   border on :focus-within and a blue outline on the textarea — the owner saw it
   as "a weird blue line", and rightly: the app's composer does none of that
   (its textarea is focus:outline-none and the card never changes). The BUTTONS
   keep a visible focus ring, because a keyboard user has no other way to see
   where they are.

   Wider than the app's version — 720px rather than a narrow chat column —
   because here it sits under a headline rather than inside a sidebar. */
.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}

.hero-chat{
  display:block;
  width:min(720px,100%);
  margin:44px auto 12px;
  /* Left gap is 5% of the card's OWN width — the same min() the width uses, because a bare
     5% would resolve against the hero, which is far wider than the card. Percentage rather
     than a fixed 36px so the prompt keeps its distance from the edge as the card narrows. */
  padding:18px 16px 12px calc(min(720px,100%) * .05);
  background:#2c2c2e;
  border-radius:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  text-align:left;
}

.hero-chat textarea{
  display:block;width:100%;
  min-height:60px;max-height:180px;
  background:transparent;border:0;outline:0;resize:none;
  color:#fff;font:inherit;font-size:16px;line-height:1.6;
  padding:0;margin-bottom:10px;
}
.hero-chat textarea::placeholder{color:#8e8e93}
.hero-chat textarea:focus,.hero-chat textarea:focus-visible{outline:0;box-shadow:none}

.hero-chat-bar{display:flex;align-items:center;justify-content:space-between;gap:8px}
.hero-chat-tools,.hero-chat-right{display:flex;align-items:center;gap:6px}

/* Every control here leads to sign-in rather than doing nothing: on a static
   page the real attach / select / agent-picker cannot run, and a button that
   silently ignores a click is the worst of the options. */
.hero-chat-tool{
  display:grid;place-items:center;
  width:38px;height:38px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:#a3a3a3;
  transition:background .16s ease,color .16s ease;
}

/* The send button copies the app's states exactly: a filled brand-blue circle the
   moment there is something to send, and the flat raised grey of the composer while
   there is not. The owner's words were "the send button isn't activating" — it never
   changed at all before, because it was styled as a ghost icon in both states. */
.hero-chat-send{
  display:grid;place-items:center;
  width:40px;height:40px;border:0;border-radius:999px;cursor:pointer;
  background:#3B6EF3;color:#fff;
  box-shadow:0 6px 16px rgba(59,110,243,.35);
  transition:background .16s ease,color .16s ease,box-shadow .16s ease;
}
.hero-chat-send:hover:not(:disabled){background:#2A56D4}
.hero-chat-send:disabled{
  background:#2c2c2e;color:#8e8e93;box-shadow:none;cursor:not-allowed;
}
.hero-chat-agent{
  display:flex;align-items:center;gap:7px;
  padding:8px 10px 8px 12px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:#a3a3a3;font:inherit;font-size:14px;
  transition:background .16s ease,color .16s ease;
}
.hero-chat-tool:hover,.hero-chat-agent:hover{
  background:rgba(255,255,255,.08);color:#fff;
}
.hero-chat-tool:focus-visible,
.hero-chat-send:focus-visible,
.hero-chat-agent:focus-visible{outline:2px solid #3B6EF3;outline-offset:2px}

.hero-chat-note{margin:0 auto 26px;text-align:center;font-size:13px;color:rgba(255,255,255,.45)}

@media (max-width:640px){
  .hero-chat{margin-top:34px;padding:16px 12px 10px calc(min(720px,100%) * .05);border-radius:16px}
  .hero-chat textarea{font-size:15px;min-height:52px}
  .hero-chat-agent span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .hero-chat-tool,.hero-chat-send,.hero-chat-agent{transition:none}
}

/* Agent picker + attached-file chips — real controls, so they need real states. */
.hero-chat-agentwrap{position:relative}
.hero-chat-menu{
  position:absolute;right:0;bottom:calc(100% + 8px);z-index:20;
  min-width:180px;margin:0;padding:6px;list-style:none;
  background:#1c1c1e;border:1px solid #3a3a3c;border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.55);
}
.hero-chat-menu li{
  /* Icon then name, as the app's composer lists them — the mark is what makes the row
     scannable, so it keeps its own column and never shrinks with a long name. */
  display:flex;align-items:center;gap:9px;
  padding:9px 12px;border-radius:8px;cursor:pointer;
  font-size:14px;color:#a3a3a3;white-space:nowrap;
}
.hero-chat-menu li svg{flex:0 0 auto;opacity:.85}
.hero-chat-menu li:hover svg,
.hero-chat-menu li[aria-selected="true"] svg{opacity:1}
.hero-chat-menu li:hover{background:rgba(255,255,255,.08);color:#fff}
.hero-chat-menu li[aria-selected="true"]{color:#fff;background:rgba(59,110,243,.16)}

.hero-chat-files{
  display:flex;flex-wrap:wrap;gap:6px;
  list-style:none;margin:10px 0 0;padding:0;
}
.hero-chat-files li{
  display:flex;align-items:center;gap:8px;
  padding:5px 8px 5px 10px;border-radius:8px;
  background:rgba(255,255,255,.06);color:#d4d4d4;font-size:13px;
}
.hero-chat-files button{
  border:0;background:transparent;color:#8e8e93;cursor:pointer;
  font-size:15px;line-height:1;padding:2px 4px;border-radius:4px;
}
.hero-chat-files button:hover{color:#fff;background:rgba(255,255,255,.1)}
.hero-chat-files button:focus-visible{outline:2px solid #3B6EF3;outline-offset:1px}