/* ============================================================
   360 TECH SOLUTIONS — Consola
   Home como conversación viva · menú lateral derecho tipo chat
   Brandbook: Negro (dominante) · Turquesa #11C3BD (acento)
             · Azul #0F5A79 · Blanco
   Tipo: Funnel Display (principal) · Unbounded (display)
   ============================================================ */

:root{
  /* palette — brandbook */
  --black:      #000000;
  --ink:        #05080e;
  --ink-2:      #070c15;
  --panel:      #0b1220;
  --panel-2:    #0e1826;
  --line:       rgba(159,236,233,.11);
  --line-2:     rgba(159,236,233,.20);
  --turq:       #11c3bd;
  --turq-bright:#43e7e1;
  --turq-soft:  #9fece9;
  --azul:       #0f5a79;
  --azul-2:     #1b86ad;
  --white:      #ffffff;
  --mut:        rgba(233,244,247,.62);
  --mut-2:      rgba(233,244,247,.40);
  --mut-3:      rgba(233,244,247,.26);

  /* type */
  --f-sans:    'Funnel Display', system-ui, sans-serif;
  --f-display: 'Unbounded', system-ui, sans-serif;

  --rail-w: 328px;
  --thread-max: 880px;
  --radius: 18px;
  --radius-lg: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:var(--f-sans);
  font-weight:300;
  font-size:16px;
  line-height:1.55;
  letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
}
a{ color:inherit; text-decoration:none; }
a{ color:var(--turq); }
a:hover{ color:var(--turq-bright); }
img,svg{ display:block; }
button{ font-family:inherit; }
h1,h2,h3,h4,p{ margin:0; }
::selection{ background:var(--turq); color:var(--black); }

/* ===== app shell ================================================ */
.app{
  display:grid;
  grid-template-columns:var(--rail-w) 1fr;
  height:100dvh;
  position:relative;
}
/* ambient brand gradient (Gradiente Tech: negro/azul/turquesa) */
.app::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(90% 60% at 86% -8%, rgba(67,231,225,.20), transparent 46%),
    radial-gradient(120% 80% at 78% 4%, rgba(17,195,189,.16), transparent 52%),
    radial-gradient(120% 90% at 30% 34%, rgba(27,134,173,.14), transparent 58%),
    radial-gradient(130% 100% at 8% 78%, rgba(91,63,176,.20), transparent 60%),
    radial-gradient(120% 90% at 60% 100%, rgba(36,26,77,.30), transparent 62%),
    linear-gradient(178deg,#000000 0%, #010207 60%, #05030d 100%);
}

/* ===== conversation thread ====================================== */
.thread-wrap{ position:relative; min-width:0; z-index:1; order:2; }
.thread{
  height:100dvh;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-behavior:smooth;
  padding:0 clamp(20px,5vw,64px);
  scrollbar-width:thin;
  scrollbar-color:rgba(159,236,233,.22) transparent;
}
.thread::-webkit-scrollbar{ width:9px; }
.thread::-webkit-scrollbar-thumb{ background:rgba(159,236,233,.18); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }

.thread__inner{
  max-width:var(--thread-max);
  margin-inline:auto;
  padding-top:10px;
  padding-bottom:190px;
}

/* status bar — reads like a chat header, NOT a dash-eyebrow */
.threadbar{
  position:sticky; top:0; z-index:20;
  margin:0 calc(-1 * clamp(20px,5vw,64px));
  padding:14px clamp(20px,5vw,64px);
  display:flex; align-items:center; gap:12px;
  background:linear-gradient(180deg, rgba(3,6,12,.9), rgba(3,6,12,.55) 70%, transparent);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.threadbar__id{ display:flex; align-items:center; gap:11px; min-width:0; }
.threadbar__avatar{ width:32px; height:32px; flex:none; border-radius:9px; background:radial-gradient(120% 120% at 30% 20%, rgba(17,195,189,.22), rgba(11,18,32,.9)); border:1px solid var(--line-2); display:flex; align-items:center; justify-content:center; }
.threadbar__avatar img{ width:20px; height:20px; }
.threadbar__name{ font-weight:500; font-size:.92rem; letter-spacing:.01em; }
.threadbar__status{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--f-display); font-weight:300;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut-2);
}
.threadbar__status i{ width:6px; height:6px; border-radius:50%; background:var(--turq); box-shadow:0 0 0 0 rgba(17,195,189,.6); animation:pulse 2s var(--ease) infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(17,195,189,.5)} 70%{box-shadow:0 0 0 7px rgba(17,195,189,0)} 100%{box-shadow:0 0 0 0 rgba(17,195,189,0)} }

/* ===== messages ================================================= */
.msg{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.msg.in{ opacity:1; transform:none; }
.msg + .msg{ margin-top:clamp(38px,6vh,72px); }

/* ===== storytelling stagger (reveal en cascada al hacer scroll) ===== */
[data-stagger] > *{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
[data-stagger].in > *{ opacity:1; transform:none; }
[data-stagger].in > *:nth-child(1){ transition-delay:.05s; }
[data-stagger].in > *:nth-child(2){ transition-delay:.14s; }
[data-stagger].in > *:nth-child(3){ transition-delay:.23s; }
[data-stagger].in > *:nth-child(4){ transition-delay:.32s; }
[data-stagger].in > *:nth-child(5){ transition-delay:.41s; }
[data-stagger].in > *:nth-child(6){ transition-delay:.50s; }
[data-stagger].in > *:nth-child(7){ transition-delay:.59s; }
[data-stagger].in > *:nth-child(8){ transition-delay:.68s; }
@media (prefers-reduced-motion:reduce){ [data-stagger] > *{ opacity:1 !important; transform:none !important; } }

/* visitor bubble (right aligned) */
.msg--visitor{ display:flex; justify-content:flex-end; }
.bubble{
  max-width:min(80%,540px);
  background:linear-gradient(180deg, rgba(17,195,189,.16), rgba(17,195,189,.09));
  border:1px solid rgba(17,195,189,.28);
  color:#eafbfa;
  padding:13px 18px;
  border-radius:16px 16px 5px 16px;
  font-size:1.02rem; font-weight:400;
}
.bubble__who{
  display:block; font-family:var(--f-display); font-weight:300;
  font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--turq); margin-bottom:6px;
}

/* brand answer */
.msg--brand{ display:grid; grid-template-columns:44px 1fr; gap:18px; }
.msg__avatar{
  width:44px; height:44px; flex:none;
  border-radius:13px;
  background:radial-gradient(120% 120% at 30% 20%, rgba(17,195,189,.22), rgba(11,18,32,.9));
  border:1px solid var(--line-2);
  display:flex; align-items:center; justify-content:center;
}
.msg__avatar svg{ width:26px; height:26px; color:var(--turq); }
.msg__avatar img{ width:26px; height:26px; }
.msg__body{ min-width:0; padding-top:2px; }
.msg__meta{ display:flex; align-items:baseline; gap:11px; margin-bottom:16px; }
.msg__name{ font-weight:500; font-size:.9rem; }
.msg__time{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--mut-3); }

/* typing dots (initial) */
.typing{ display:inline-flex; gap:5px; padding:6px 0; }
.typing i{ width:7px; height:7px; border-radius:50%; background:var(--turq); opacity:.5; animation:typ 1.3s infinite; }
.typing i:nth-child(2){ animation-delay:.16s; } .typing i:nth-child(3){ animation-delay:.32s; }
@keyframes typ{ 0%,60%,100%{opacity:.3; transform:translateY(0)} 30%{opacity:1; transform:translateY(-4px)} }

/* ===== typographic scale (roman only in titles) ================= */
.t-hero{
  font-family:var(--f-sans); font-weight:700;
  font-size:clamp(2.6rem,6vw,4.9rem); line-height:.99; letter-spacing:-.035em;
  max-width:15ch; text-wrap:balance;
}
.t-h2{
  font-family:var(--f-sans); font-weight:500;
  font-size:clamp(1.8rem,3.4vw,2.9rem); line-height:1.05; letter-spacing:-.025em;
  max-width:20ch; text-wrap:balance;
}
.lead{ font-size:clamp(1.08rem,1.5vw,1.34rem); color:var(--mut); font-weight:300; line-height:1.5; text-wrap:pretty; max-width:52ch; }
.p{ color:var(--mut); font-weight:300; text-wrap:pretty; max-width:60ch; }
.p + .p{ margin-top:15px; }
.p b, .lead b{ color:var(--white); font-weight:500; }
.turq{ color:var(--turq); }

/* ===== buttons ================================================== */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-sans); font-weight:500; font-size:.98rem;
  padding:.82em 1.35em; border-radius:100px; cursor:pointer;
  background:var(--turq); color:var(--black); border:1px solid transparent;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
}
.btn svg{ width:18px; height:18px; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 16px 40px -14px rgba(17,195,189,.65); background:var(--turq-bright); }
.btn .arr{ transition:transform .35s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn--ghost{ background:transparent; color:var(--white); border:1px solid var(--line-2); }
.btn--ghost:hover{ background:rgba(17,195,189,.07); border-color:var(--turq); box-shadow:none; }

/* ===== hero intro (pantalla completa, centrado) ================ */
.hero-intro{ text-align:center; max-width:900px; margin:0 auto; min-height:calc(100dvh - 118px); display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(8px,2.5vh,32px) 0 24px; }
.hero-intro__title{
  font-family:var(--f-sans); font-weight:700;
  font-size:clamp(3.2rem,8vw,6.4rem); line-height:.98; letter-spacing:-.04em;
  margin:0 auto; max-width:15ch; text-wrap:balance;
}
.hero-intro__sub{
  margin:28px auto 0; max-width:60ch;
  font-size:clamp(1.2rem,1.8vw,1.6rem); color:var(--mut); font-weight:300; line-height:1.5; text-wrap:pretty;
}
.hero-intro__cta{ margin-top:40px; display:flex; justify-content:center; }
.hero-intro__meta{ display:block; margin-top:24px; font-family:var(--f-display); font-weight:300; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut-2); }

/* ===== facts (real facts, not generic metrics) ================== */
.facts{ margin-top:30px; display:grid; grid-template-columns:repeat(4,auto); gap:22px 40px; justify-content:start; }
.fact{ display:flex; flex-direction:column; gap:6px; }
.fact__k{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-3); }
.fact__v{ font-weight:500; font-size:1.02rem; color:var(--white); }
@media (max-width:560px){ .facts{ grid-template-columns:1fr 1fr; gap:20px 26px; } }

/* service lines row */
.lines{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.lines__k{ font-family:var(--f-display); font-weight:300; font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-3); margin-bottom:14px; }
.lines__list{ display:flex; flex-wrap:wrap; gap:9px; }
.chip-line{ font-size:.86rem; color:var(--mut); border:1px solid var(--line); border-radius:100px; padding:6px 14px; }
.chip-line:first-child{ color:var(--turq); border-color:rgba(17,195,189,.28); background:rgba(17,195,189,.06); }

/* ===== product cards ============================================ */
.prod-grid{ margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.prod{
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius);
  background:linear-gradient(180deg, rgba(12,20,34,.6), rgba(7,12,21,.5));
  padding:24px 24px 22px;
  transition:transform .5s var(--ease), border-color .4s, background .4s;
}
.prod::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(75% 55% at 82% 0%, rgba(17,195,189,.14), transparent 70%); transition:opacity .5s; }
.prod:hover{ transform:translateY(-4px); border-color:var(--line-2); background:linear-gradient(180deg, rgba(14,24,40,.72), rgba(8,14,24,.6)); }
.prod:hover::after{ opacity:1; }
.prod > *{ position:relative; z-index:1; }
.prod--wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:26px; }
.prod--wide .prod__ic{ margin-bottom:0; }
.prod--wide .prod__foot{ margin-left:auto; margin-top:0; align-self:center; flex-direction:column; align-items:flex-end; gap:10px; }
.prod--wide .prod__main{ flex:1; min-width:0; }
.prod__ic{
  width:48px; height:48px; flex:none; margin-bottom:18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px; color:var(--turq);
  background:rgba(17,195,189,.09); border:1px solid rgba(17,195,189,.22);
}
.prod__ic svg{ width:25px; height:25px; }
.prod__tag{ font-family:var(--f-display); font-weight:300; font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--mut-3); }
.prod__name{ font-family:var(--f-sans); font-weight:500; font-size:1.4rem; letter-spacing:-.02em; margin:4px 0 8px; }
.prod__name .plus{ color:var(--turq); }
.prod__desc{ color:var(--mut); font-size:.96rem; line-height:1.45; max-width:40ch; }
.prod__foot{ margin-top:18px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; }
.prod__price{ font-family:var(--f-display); font-weight:400; font-size:.76rem; line-height:1.35; color:var(--turq); letter-spacing:.01em; max-width:18ch; }
.prod__go{ display:inline-flex; align-items:center; gap:7px; font-size:.86rem; font-weight:500; color:var(--white); white-space:nowrap; flex:none; transition:gap .35s var(--ease), color .3s; }
.prod__go svg{ width:16px; height:16px; }
.prod:hover .prod__go{ gap:12px; color:var(--turq); }
@media (max-width:640px){ .prod-grid{ grid-template-columns:1fr; } .prod--wide{ flex-direction:column; align-items:flex-start; gap:16px; } .prod--wide .prod__foot{ margin-left:0; width:100%; } }

/* ===== principles (why us) ====================================== */
.princ{ margin-top:8px; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.princ__cell{ background:rgba(7,12,21,.6); padding:24px 24px; transition:background .4s; }
.princ__cell:hover{ background:rgba(13,22,37,.75); }
.princ__ic{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; color:var(--turq); margin-bottom:15px; }
.princ__ic svg{ width:28px; height:28px; }
.princ__t{ font-family:var(--f-sans); font-weight:500; font-size:1.1rem; letter-spacing:-.01em; margin-bottom:7px; }
.princ__d{ color:var(--mut); font-size:.92rem; line-height:1.45; }
@media (max-width:640px){ .princ{ grid-template-columns:1fr; } }

/* ===== contact answer =========================================== */
.contact{ border:1px solid var(--line-2); border-radius:var(--radius-lg); padding:clamp(26px,4vw,44px); background:linear-gradient(160deg, rgba(14,24,40,.7), rgba(6,12,20,.55)); position:relative; overflow:hidden; }
.contact::after{ content:""; position:absolute; right:-10%; bottom:-40%; width:60%; height:120%; background:radial-gradient(circle, rgba(17,195,189,.16), transparent 62%); pointer-events:none; }
.contact > *{ position:relative; z-index:1; }
.contact__cta{ margin-top:28px; display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
.contact__rows{ margin-top:30px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:12px 40px; }
.contact__row{ display:flex; align-items:center; gap:11px; font-size:.95rem; color:var(--mut); }
.contact__row svg{ width:18px; height:18px; color:var(--turq); flex:none; }
.contact__row a{ color:var(--white); }
.contact__row a:hover{ color:var(--turq); }

/* ===== respuestas como secciones (fondos de marca) ============= */
.msg--section{ display:block; }
.msg--section .msg__avatar{ display:none; }
.msg--section .msg__body{
  padding:clamp(26px,3.6vw,48px);
  border:1px solid var(--line);
  border-radius:26px;
  background:linear-gradient(180deg, rgba(12,20,34,.5), rgba(7,12,21,.4));
}
.msg--section .msg__meta{ margin-bottom:20px; }

/* fondo Solutions (blanco 360 + turquesa) — contenido adaptado a claro */
.msg--solutions .msg__body{
  background:linear-gradient(150deg,#ffffff 0%, #eafaf9 50%, #c9f2ef 100%);
  border-color:rgba(15,90,121,.16);
  color:#0a1622;
  box-shadow:0 34px 90px -54px rgba(15,90,121,.5);
}
.msg--solutions .msg__name{ color:#08131f; }
.msg--solutions .msg__time{ color:rgba(8,19,31,.42); }
.msg--solutions .t-h2{ color:#061019; }
.msg--solutions .p{ color:rgba(9,20,32,.74); }
.msg--solutions .p b{ color:#061019; }
.msg--solutions .fact__k{ color:rgba(9,20,32,.5); }
.msg--solutions .fact__v{ color:#061019; }
.msg--solutions .lines{ border-color:rgba(15,90,121,.18); }
.msg--solutions .lines__k{ color:rgba(9,20,32,.5); }
.msg--solutions .chip-line{ color:rgba(9,20,32,.74); border-color:rgba(15,90,121,.22); }
.msg--solutions .chip-line:first-child{ color:#0e6f78; border-color:rgba(15,90,121,.4); background:rgba(17,195,189,.16); }
.msg--solutions .princ{ background:rgba(15,90,121,.16); border-color:rgba(15,90,121,.16); }
.msg--solutions .princ__cell{ background:rgba(255,255,255,.74); }
.msg--solutions .princ__cell:hover{ background:rgba(255,255,255,.92); }
.msg--solutions .princ__ic{ color:#0f9a92; }
.msg--solutions .princ__t{ color:#061019; }
.msg--solutions .princ__d{ color:rgba(9,20,32,.66); }

/* ===== stack (carruseles por capa) ============================= */
.stack{ display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.stack-row{ position:relative; height:60px; border:1px solid var(--line); border-radius:14px; background:rgba(10,17,29,.5); overflow:hidden; }
.stack-row__marquee{ position:absolute; inset:0; overflow:hidden; }
.stack-row__track{ position:absolute; top:0; bottom:0; left:0; display:flex; align-items:center; animation:stackmarq var(--dur,30s) linear infinite; will-change:transform; }
.stack-row--rev .stack-row__track{ animation-direction:reverse; }
.stack-group{ display:flex; align-items:center; gap:10px; padding-right:10px; }
@keyframes stackmarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.stack-chip{ display:inline-flex; align-items:center; white-space:nowrap; font-family:var(--f-sans); font-weight:400; font-size:.9rem; color:var(--white); border:1px solid var(--line-2); border-radius:100px; padding:8px 16px; background:rgba(6,12,20,.55); }
.stack-row__label{ position:absolute; left:0; top:0; bottom:0; z-index:3; display:flex; align-items:center; gap:11px; min-width:214px; padding:0 44px 0 16px; background:linear-gradient(90deg, #0a111d 0, #0a111d 84%, rgba(10,17,29,0) 100%); }
.stack-row__label .ic{ width:30px; height:30px; flex:none; border-radius:8px; display:flex; align-items:center; justify-content:center; background:rgba(17,195,189,.1); border:1px solid rgba(17,195,189,.22); color:var(--turq); }
.stack-row__label .ic svg{ width:17px; height:17px; }
.stack-row__label b{ font-family:var(--f-display); font-weight:300; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--turq); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .stack-row__track{ animation:none; } }
@media (max-width:560px){ .stack-row__label{ min-width:150px; padding-right:34px; } .stack-chip{ font-size:.82rem; padding:7px 13px; } }

/* ===== composer ================================================= */
.composer{
  position:absolute; left:0; right:0; bottom:0; z-index:30;
  padding:14px clamp(20px,5vw,64px) 20px;
  background:linear-gradient(0deg, #010306 8%, rgba(2,4,9,.86) 58%, transparent);
  pointer-events:none;
}
.composer__inner{ max-width:var(--thread-max); margin-inline:auto; pointer-events:auto; }
.composer__chips{ display:flex; gap:9px; margin-bottom:11px; flex-wrap:wrap; }
.chip{
  font-size:.84rem; color:var(--mut); font-weight:400;
  border:1px solid var(--line-2); border-radius:100px; padding:7px 14px;
  background:rgba(10,17,29,.7); backdrop-filter:blur(8px); cursor:pointer;
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.chip:hover{ color:var(--white); border-color:var(--turq); background:rgba(17,195,189,.08); transform:translateY(-1px); }
.composer__bar{
  display:flex; align-items:center; gap:10px;
  background:rgba(9,15,26,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line-2); border-radius:16px;
  padding:8px 8px 8px 18px;
  box-shadow:0 20px 50px -26px rgba(0,0,0,.9);
}
.composer__bar:focus-within{ border-color:rgba(17,195,189,.4); }
.composer__input{ flex:1; min-width:0; background:none; border:0; color:var(--white); font-size:1rem; font-weight:300; padding:8px 0; outline:none; }
.composer__input::placeholder{ color:var(--mut-3); }
.composer__send{
  flex:none; width:42px; height:42px; border-radius:12px; border:0; cursor:pointer;
  background:var(--turq); color:var(--black);
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s var(--ease), background .3s;
}
.composer__send svg{ width:19px; height:19px; }
.composer__send:hover{ background:var(--turq-bright); transform:translateY(-1px); }

/* ===== rail (right-side chat menu) ============================== */
.rail{
  z-index:40; order:1;
  display:flex; flex-direction:column;
  height:100dvh;
  background:linear-gradient(180deg, rgba(6,11,20,.86), rgba(4,8,15,.9));
  border-right:1px solid var(--line);
  backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
}
.rail__head{ padding:20px 22px 16px; border-bottom:1px solid var(--line); }
.rail__logo{ height:44px; width:auto; }
.rail__brand{ display:flex; align-items:center; gap:12px; }
.rail__mark{ width:34px; height:34px; flex:none; color:var(--turq); }
.rail__mark svg{ width:100%; height:100%; }
.rail__wordmark{ line-height:1.05; }
.rail__wordmark b{ display:block; font-family:var(--f-sans); font-weight:600; font-size:1.02rem; letter-spacing:-.01em; }
.rail__wordmark span{ font-family:var(--f-display); font-weight:300; font-size:.54rem; letter-spacing:.22em; text-transform:uppercase; color:var(--mut-2); }
.rail__tagline{ margin-top:16px; font-size:.82rem; color:var(--mut); line-height:1.4; }

.rail__nav{ flex:1; overflow-y:auto; padding:16px 14px; scrollbar-width:thin; scrollbar-color:rgba(159,236,233,.2) transparent; }
.rail__section{ font-family:var(--f-display); font-weight:300; font-size:.54rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mut-3); padding:14px 12px 8px; }
.nav-link{
  display:flex; align-items:center; gap:13px;
  padding:11px 12px; border-radius:12px; cursor:pointer;
  color:var(--mut); font-size:.95rem; font-weight:400;
  border:1px solid transparent;
  transition:color .28s, background .28s, border-color .28s;
}
.nav-link__ic{ width:22px; height:22px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--mut-2); transition:color .28s; }
.nav-link__ic svg{ width:20px; height:20px; }
.nav-link__label{ flex:1; min-width:0; }
.nav-link__meta{ font-family:var(--f-display); font-weight:300; font-size:.56rem; letter-spacing:.06em; color:var(--mut-3); }
.nav-link:hover{ color:var(--white); background:rgba(159,236,233,.05); }
.nav-link:hover .nav-link__ic{ color:var(--turq); }
.nav-link.active{ color:var(--white); background:rgba(17,195,189,.1); border-color:rgba(17,195,189,.22); }
.nav-link.active .nav-link__ic{ color:var(--turq); }
.nav-prod .nav-link__ic{ color:var(--turq); }

.rail__foot{ padding:16px 18px 20px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:16px; }
.lang{ display:inline-flex; align-items:center; gap:3px; align-self:flex-start; border:1px solid var(--line-2); border-radius:100px; padding:4px; }
.lang button{ background:none; border:0; cursor:pointer; color:var(--mut-2); font-family:var(--f-display); font-weight:300; font-size:.64rem; letter-spacing:.1em; padding:5px 12px; border-radius:100px; transition:.3s; }
.lang button.on{ background:var(--turq); color:var(--black); }
.rail__legal{ font-size:.72rem; color:var(--mut-3); line-height:1.5; }
.rail__legal a{ color:var(--mut-2); }
.rail__legal a:hover{ color:var(--turq); }

/* ===== mobile top bar + overlay ================================= */
.topbar-m{ display:none; }
.rail__close{ display:none; }
.scrim{ display:none; }

@media (max-width:900px){
  body{ overflow:auto; }
  .app{ grid-template-columns:1fr; height:auto; min-height:100dvh; }
  .app::before{ position:fixed; }
  .thread{ height:auto; overflow:visible; }
  .thread__inner{ padding-top:16px; }
  .threadbar{ top:56px; }

  .topbar-m{
    display:flex; position:sticky; top:0; z-index:60;
    align-items:center; justify-content:space-between; gap:12px;
    padding:11px clamp(16px,5vw,24px);
    background:rgba(4,8,15,.9); backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .topbar-m__brand{ display:flex; align-items:center; gap:10px; }
  .topbar-m__logo{ height:24px; width:auto; }
  .topbar-m__brand .m{ width:30px; height:30px; color:var(--turq); }
  .topbar-m__brand b{ font-weight:600; font-size:1rem; letter-spacing:-.01em; }
  .menu-btn{ width:42px; height:42px; border-radius:11px; border:1px solid var(--line-2); background:rgba(10,17,29,.7); color:var(--white); display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .menu-btn svg{ width:22px; height:22px; }

  .rail{
    position:fixed; top:0; left:0; right:auto; bottom:0; width:min(86vw,340px);
    transform:translateX(-100%); transition:transform .4s var(--ease);
    box-shadow:30px 0 80px -30px rgba(0,0,0,.8);
  }
  .rail--open{ transform:none; }
  .rail__close{ display:flex; position:absolute; top:16px; right:16px; width:38px; height:38px; border-radius:10px; border:1px solid var(--line-2); background:rgba(10,17,29,.7); color:var(--white); align-items:center; justify-content:center; cursor:pointer; }
  .rail__close svg{ width:20px; height:20px; }

  .scrim{ display:block; position:fixed; inset:0; z-index:35; background:rgba(2,4,9,.6); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .4s; }
  .scrim.on{ opacity:1; visibility:visible; }

  .composer{ position:fixed; }
  .thread__inner{ padding-bottom:170px; }
}
@media (max-width:520px){
  .msg--brand{ grid-template-columns:36px 1fr; gap:13px; }
  .msg__avatar{ width:36px; height:36px; border-radius:11px; }
  .msg__avatar svg{ width:22px; height:22px; }
  .msg__avatar img{ width:22px; height:22px; }
  .facts{ grid-template-columns:1fr 1fr; }
}