/* ============================================
   AutoFlow — design tokens
   ============================================ */
:root{
  --ink: #0A0A0E;
  --panel: #131318;
  --panel-2: #1C1C24;
  --paper: #F5F5F7;
  --muted: #9C9FC2;
  --accent: #1FE08A;
  --bubble-out: #14532F;
  --bubble-in: #1C1C24;
  --line: rgba(255,255,255,0.08);

  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

*{ box-sizing: border-box; margin:0; padding:0; }

.view[hidden]{ display: none !important; }

html{
  scroll-behavior: smooth;
  overflow-x: clip;
}

body{
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.intro-pending{
  height: 100vh;
  overflow: hidden;
}

body.intro-pending > .topbar,
body.intro-pending > main,
body.intro-pending > .site-footer{
  opacity: 0;
}

#intro-canvas{
  position: fixed;
  inset: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

#intro-canvas.hide{
  opacity: 0 !important;
}

h1,h2,h3{ font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

a{ color: inherit; }

.mono{ font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase; }

.eyebrow{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}

.accent-text{ color: var(--accent) !important; }

section{ padding: 7rem 6vw; }

@media (max-width: 720px){
  section{ padding: 4.5rem 6vw; }
}

/* ============================================
   Top bar
   ============================================ */
.topbar{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 1.1rem 6vw;
  background: linear-gradient(to bottom, rgba(14,21,18,0.9), rgba(14,21,18,0));
  pointer-events: none;
}
.topbar-logo{
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  pointer-events: auto;
}
.topbar-brand-mark{
  display:block;
  width: 36px;
  height: 36px;
}
.topbar-brand-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.landing-nav{
  display:flex;
  align-items:center;
  gap: 1.4rem;
  pointer-events:auto;
}
.landing-nav a{
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration:none;
  transition: color 0.16s ease;
}
.landing-nav a:hover{ color: var(--paper); }
.topbar-actions{
  display:flex;
  align-items:center;
  gap: 0.6rem;
  pointer-events: auto;
}
.topbar-login{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0.55rem 0.9rem;
  transition: color 0.2s ease;
}
.topbar-login:hover{ color: var(--paper); }

.topbar-cta{
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 0.55rem 1rem;
  border-radius: 999px;
  pointer-events: auto;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.topbar-cta:hover{ border-color: var(--accent); color: var(--accent); }

@media (max-width: 720px){
  .landing-nav{ display:none; }
  .topbar{ padding: 1rem 5vw; }
}

/* ============================================
   Hero
   ============================================ */
.hero{
  position: relative;
  min-height: 100svh;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  text-align:center;
  overflow:hidden;
  padding: 6rem 6vw;
}

.hero-glow{
  position:absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 30% 25%, rgba(31,224,138,0.12), transparent 45%),
    radial-gradient(circle at 72% 68%, rgba(31,224,138,0.08), transparent 50%);
  animation: drift 18s ease-in-out infinite alternate;
  pointer-events:none;
}

@keyframes drift{
  from{ transform: translate3d(0,0,0) scale(1); }
  to{ transform: translate3d(2%,-3%,0) scale(1.08); }
}

.hero-content{ position: relative; z-index: 1; max-width: 640px; }

.landing-hero{
  display:grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(440px, 1.1fr);
  align-items:center;
  gap: clamp(2.5rem, 6vw, 5rem);
  max-width: 1320px;
  min-height: 760px;
  margin: 0 auto;
  text-align:left;
}
.landing-hero .hero-content{ max-width: 600px; }
.hero-kicker{
  margin-bottom: 1rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
}
.landing-hero .hero-desc{ margin-left:0; margin-right:0; }
.hero-actions{ display:flex; flex-wrap:wrap; gap: 0.8rem; margin-top: 2rem; }
.primary-action,
.secondary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: 42px;
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight:600;
  text-decoration:none;
}
.primary-action{ background: var(--accent); color:#06130C; }
.secondary-action{ border:1px solid var(--line); color:var(--paper); }

.hero-ai-panel{ position:relative; min-width:0; }
.ai-panel-inner{
  position:relative;
  min-height: 460px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:var(--panel);
}
.ai-routes{ position:absolute; inset:0; width:100%; height:100%; }
.ai-routes path{ fill:none; stroke:rgba(31,224,138,0.35); stroke-width:1.5; stroke-dasharray:5 7; }
.ai-core{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:112px; height:112px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--accent);
  border-radius:50%;
  background:var(--ink);
  color:var(--accent);
  text-align:center;
  font-family:var(--font-mono);
  font-size:0.8rem;
  line-height:1.4;
  z-index:2;
}
.ai-node{
  position:absolute;
  width:clamp(150px, 31%, 220px);
  padding:0.9rem;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--ink);
  color:var(--paper);
  font-size:0.72rem;
  z-index:1;
}
.ai-node p{ color:var(--muted); line-height:1.45; }
.node-header{ display:flex; justify-content:space-between; margin-bottom:0.6rem; color:var(--paper); font-size:0.72rem; }
.node-dot{ display:block; width:18px; height:18px; margin-top:0.7rem; border-radius:50%; background:var(--accent); color:#06130C; text-align:center; line-height:18px; font-weight:700; }
.whatsapp-node{ top:12%; left:5%; }
.company-node-large{ top:10%; right:5%; }
.company-node-small{ bottom:10%; left:10%; }
.answer-node{ right:6%; bottom:12%; }
.node-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0.55rem; }
.node-grid div{ display:flex; flex-direction:column; gap:0.12rem; }
.node-grid span{ color:var(--muted); font-size:0.62rem; }
.node-grid strong{ font-size:0.67rem; font-weight:500; }

@media (max-width: 900px){
  .landing-hero{ grid-template-columns:1fr; min-height:auto; padding-top:8rem; text-align:center; }
  .landing-hero .hero-desc{ margin-left:auto; margin-right:auto; }
  .hero-actions{ justify-content:center; }
  .hero-ai-panel{ max-width:620px; width:100%; margin:0 auto; }
}
@media (max-width: 520px){
  .landing-hero{ padding-left:5vw; padding-right:5vw; }
  .hero-name{ font-size:clamp(2.5rem, 14vw, 3.7rem); }
  .ai-panel-inner{ min-height:380px; }
  .ai-node{ width:42%; padding:0.65rem; font-size:0.64rem; }
  .ai-core{ width:82px; height:82px; font-size:0.66rem; }
  .node-grid{ grid-template-columns:1fr; }
  .company-node-small{ bottom:5%; left:4%; }
  .answer-node{ right:4%; bottom:6%; }
}

.hero-name{
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1;
}

.hero-slogan{
  margin-top: 1.1rem;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  color: var(--accent);
}

.hero-desc{
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: 1rem;
  max-width: 460px;
  margin-left:auto;
  margin-right:auto;
}

.hero-scroll{
  position:absolute;
  bottom: 2.4rem;
  z-index: 1;
  width: 26px;
  height: 42px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  display:flex;
  justify-content:center;
  padding-top: 8px;
}
.hero-scroll span{
  width: 4px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%{ transform: translateY(0); opacity: 1; }
  70%{ transform: translateY(14px); opacity: 0; }
  100%{ opacity: 0; }
}

/* ============================================
   Problem section
   ============================================ */
.problem{
  text-align:center;
}
.problem h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  max-width: 640px;
  margin: 0 auto;
  line-height: 1.15;
}
.problem-lede{
  max-width: 560px;
  margin: 1.4rem auto 3.5rem;
  color: var(--muted);
}

.problem-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align:left;
}
@media (max-width: 780px){
  .problem-grid{ grid-template-columns: 1fr; }
}

.problem-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
}
.problem-icon{
  width: 26px; height: 26px;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.problem-card h3{ font-size: 1.05rem; margin-bottom: 0.6rem; }
.problem-card p{ color: var(--muted); font-size: 0.9rem; }

/* ============================================
   Demo / scrollytelling
   ============================================ */
.demo{ background: var(--ink); }

.demo-stage{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

/* the panel that stays pinned: phone + text, side by side */
.demo-sticky{
  position: sticky;
  top: 12vh;
  display: grid;
  grid-template-columns: minmax(320px, 600px) 1fr;
  gap: 4rem;
  align-items: start;
  z-index: 2;
}

/* phone mockup */
.phone{
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow:hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6);
}

/* text beside the phone, part of the same pinned panel */
.demo-text{ padding-top: 1rem; }

.demo-intro{
  max-width: 440px;
  margin-bottom: 3rem;
  text-align: left;
}
.demo-intro h2{
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  line-height: 1.15;
}
.demo-intro p{
  margin-top: 1rem;
  color: var(--muted);
}

.track-caption{
  max-width: 400px;
  margin: 0;
  padding-top: 1rem;
  text-align: left;
}

.phone-header{
  display:flex;
  align-items:center;
  gap: 0.9rem;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.avatar{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--bubble-out);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
}
.contact-info{ display:flex; flex-direction:column; line-height:1.3; }
.contact-info strong{ font-size: 1.05rem; }
.status{ font-size: 0.8rem; color: var(--muted); }

.phone-body{
  height: 560px;
  overflow-y: auto;
  padding: 1.4rem;
  display:flex;
  flex-direction: column;
  gap: 0.8rem;
  scrollbar-width: none;
}
.phone-body::-webkit-scrollbar{ display:none; }

.chat-msg{
  max-width: min(80%, 400px);
  padding: 0.7rem 1rem;
  border-radius: 16px;
  font-size: 1rem;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.chat-msg.visible{ opacity: 1; transform: translateY(0) scale(1); }

.chat-msg time{
  display:block;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  opacity: 0.6;
}

.chat-msg.in{
  align-self: flex-start;
  background: var(--bubble-in);
  border-bottom-left-radius: 4px;
}
.chat-msg.out{
  align-self: flex-end;
  background: var(--bubble-out);
  border-bottom-right-radius: 4px;
}

.phone-input{
  padding: 1rem 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
  background: var(--panel-2);
}

/* scroll track: invisible spacer that keeps demo-sticky pinned while it runs */
.scroll-track{
  pointer-events:none;
}
.track-step{ height: 46vh; }
.track-step:last-child{ height: 10vh; }

.track-caption .mono{ color: var(--accent); }
.track-caption p{ margin-top: 0.5rem; color: var(--muted); }

@media (max-width: 860px){
  .demo-sticky{
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-items: center;
    top: 5vh;
  }
  .phone{
    width: min(420px, 92vw);
  }
  .demo-text{ padding-top: 0; }
  .demo-intro,
  .track-caption{
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .demo-intro{ margin-bottom: 1.5rem; }
}

/* ============================================
   Benefits
   ============================================ */
.benefits{ text-align:center; }
.benefits h2{
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  max-width: 620px;
  margin: 0 auto 3.5rem;
  line-height:1.15;
}

.benefits-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align:left;
}
@media (max-width: 900px){
  .benefits-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .benefits-grid{ grid-template-columns: 1fr; }
}

.benefit-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.8rem 1.5rem;
}
.benefit-icon{
  width: 26px; height: 26px;
  color: var(--accent);
  margin-bottom: 1.4rem;
}
.benefit-card h3{ font-size: 1.05rem; margin-bottom: 0.5rem; }
.benefit-card p{ color: var(--muted); font-size: 0.9rem; }

/* ============================================
   Contact
   ============================================ */
.contact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 800px){
  .contact{ grid-template-columns: 1fr; }
}

.contact-text h2{
  font-size: clamp(1.8rem, 4vw, 2.4rem);
  line-height:1.15;
  margin-bottom: 1rem;
}
.contact-text p{ color: var(--muted); max-width: 380px; }

.whatsapp-link{
  display:inline-block;
  margin-top: 1.8rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-decoration:none;
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.contact-form{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem;
}
.contact-form label{
  display:block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.contact-form input,
.contact-form textarea{
  width:100%;
  margin-top: 0.4rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.92rem;
  resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus{
  outline: none;
  border-color: var(--accent);
}
.contact-form button{
  width:100%;
  margin-top: 0.4rem;
  background: var(--accent);
  color: #06130C;
  border: none;
  border-radius: 8px;
  padding: 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor:pointer;
  font-weight: 600;
  transition: filter 0.2s ease;
}
.contact-form button:hover{ filter: brightness(1.08); }

.form-success{ text-align:center; padding: 2rem 0; }
.form-success .mono{ color: var(--accent); margin-bottom: 0.6rem; }
.form-success p:last-child{ color: var(--muted); }

/* ============================================
   Footer
   ============================================ */
.site-footer{
  display:flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items:center;
  text-align:center;
  padding: 3rem 6vw;
  color: var(--muted);
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}
.site-footer span:first-child{
  font-family: var(--font-display);
  color: var(--paper);
  font-weight: 600;
}

/* ============================================
   Landing page refresh
   ============================================ */
.landing-topbar{
  left: 50%;
  right: auto;
  width: min(1000px, calc(100% - 48px));
  transform: translateX(-50%);
  padding: 0.9rem 0;
  background: transparent;
  border-bottom: 0;
  backdrop-filter: none;
}
.topbar-logo{
  text-decoration: none;
}
.landing-topbar .topbar-logo{
  color: #8df65b;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 16px rgba(141,246,91,0.72);
}
.landing-topbar .topbar-logo .accent-text{
  color: #e9fff7 !important;
  text-shadow: 0 0 18px rgba(54,235,190,0.68);
}
.topbar-brand-mark{
  position: relative;
  display: block;
  width: 52px;
  height: 46px;
  overflow: hidden;
}
.topbar-brand-mark img{
  position: absolute;
  width: 124px;
  max-width: none;
  height: auto;
  left: -40px;
  top: -34px;
  filter: brightness(0) saturate(100%) invert(84%) sepia(37%) saturate(1070%) hue-rotate(91deg) brightness(101%);
}
.landing-nav{
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  display:flex;
  align-items:center;
  gap: 2rem;
  pointer-events: auto;
}
.landing-nav a{
  color: rgba(245,245,247,0.9);
  text-decoration: none;
  font-size: 0.94rem;
  transition: color 0.15s ease;
}
.landing-nav a:first-child{
  color: #6cff8e;
  text-shadow: 0 0 18px rgba(31,224,138,0.58);
}
.landing-nav a:hover{ color: var(--paper); }
.landing-topbar .topbar-cta,
.primary-action,
.secondary-action{
  border-radius: 999px;
}
.landing-topbar .topbar-login{
  border: 1px solid rgba(31,224,138,0.72);
  border-radius: 10px;
  color: #7bff9b;
  font-size: 0.8rem;
  padding: 0.7rem 1.05rem;
  box-shadow: 0 0 18px rgba(31,224,138,0.16);
}
.landing-topbar .topbar-cta{
  border-color: rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--paper);
  padding: 0.7rem 1.25rem;
  background: rgba(255,255,255,0.10);
  box-shadow: inset 0 0 16px rgba(255,255,255,0.05);
}

.landing-hero{
  position: relative;
  width: 100%;
  max-width: 1500px;
  min-height: 100svh;
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(560px, 1.1fr);
  align-items:center;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  padding: 7.3rem clamp(3.5rem, 6vw, 7rem) 4.2rem;
  text-align: left;
  overflow: hidden;
  background:
    radial-gradient(circle at 79% 44%, rgba(31,224,138,0.24), transparent 34%),
    radial-gradient(circle at 90% 72%, rgba(22,121,86,0.20), transparent 38%),
    radial-gradient(circle at 12% 12%, rgba(31,224,138,0.08), transparent 22%),
    #05080c;
}
.landing-hero::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(5,8,12,0) 0%, rgba(5,8,12,0.15) 60%, rgba(5,8,12,0.88) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: auto, 108px 108px, 108px 108px;
}
.landing-hero .hero-content{
  position: relative;
  z-index: 1;
  max-width: 590px;
  width: 100%;
  text-align: left;
  transform: none;
}
.hero-kicker{
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.15rem;
}
.landing-hero .hero-name{
  color: #fff;
  max-width: 14ch;
  font-size: clamp(2.7rem, 3.35vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-shadow: 0 0 28px rgba(255,255,255,0.05);
}
.landing-hero .hero-name .accent-text{
  color: inherit !important;
}
.landing-hero .hero-desc{
  max-width: 49ch;
  margin: 1.4rem 0 0;
  color: rgba(245,245,247,0.74);
  font-size: clamp(1rem, 1.2vw, 1.14rem);
  line-height: 1.55;
}
.hero-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 0.8rem;
  margin-top: 1.9rem;
  flex-wrap: wrap;
}
.primary-action,
.secondary-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 200px;
  min-height: 62px;
  padding: 0.95rem 1.35rem;
  border-radius: 12px;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 700;
}
.primary-action{
  border: 1px solid rgba(118,255,188,0.9);
  background: linear-gradient(100deg, #75ff78 0%, #3eeaa5 100%);
  color: #06130c;
  box-shadow:
    0 0 0 6px rgba(31,224,138,0.12),
    0 18px 42px rgba(31,224,138,0.2);
}
.secondary-action{
  border: 1px solid rgba(91,229,180,0.85);
  color: var(--paper);
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.06);
}
.primary-action:hover{ filter: brightness(1.08); }
.secondary-action:hover{ border-color: rgba(157,255,205,0.96); }

.hero-ai-panel{
  position: relative;
  z-index: 1;
  width: min(760px, 100%);
  justify-self:end;
}
.ai-panel-inner{
  position: relative;
  min-height: 480px;
  border: 1px solid rgba(210,244,237,0.46);
  border-radius: 30px;
  background:
    radial-gradient(circle at 55% 50%, rgba(31,224,138,0.21), transparent 30%),
    linear-gradient(145deg, rgba(222,255,249,0.14), rgba(13,23,25,0.74) 22%, rgba(9,19,20,0.83));
  box-shadow:
    0 0 0 8px rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 26px 90px rgba(31,224,138,0.18),
    0 0 46px rgba(255,255,255,0.18);
  overflow: hidden;
}
.ai-panel-inner:has(.ai-dashboard-image){
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  background: #06100e;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.ai-panel-inner:has(.ai-dashboard-image)::before,
.ai-panel-inner:has(.ai-dashboard-image)::after{ display:none; }
.ai-dashboard-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.18s ease;
}
.ai-dashboard-legacy{ display:none; }
.hero-ai-panel:has(.ai-dashboard-image){
  width: min(700px, 112%);
  transition: filter 0.18s ease;
}
.hero-ai-panel:has(.ai-dashboard-image):hover .ai-panel-inner{
  border-color: rgba(118,255,188,0.86);
  box-shadow: 0 0 18px rgba(31,224,138,0.28);
}
.hero-ai-panel:has(.ai-dashboard-image):hover .ai-dashboard-image{
  filter: brightness(1.08) contrast(1.03);
}

.ai-panel-inner::before{
  content:"";
  position:absolute;
  inset: 10px;
  border: 1px solid rgba(210,244,237,0.28);
  border-radius: 23px;
  pointer-events:none;
}
.ai-panel-inner::after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.28), transparent 16%),
    linear-gradient(110deg, transparent 10%, rgba(255,255,255,0.12) 22%, transparent 34% 100%);
  opacity: 0.45;
}
.ai-sheen{
  position:absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,0.05) 18.2%, transparent 18.6% 100%),
    linear-gradient(0deg, transparent 0 22%, rgba(255,255,255,0.035) 22.2%, transparent 22.6% 100%);
  background-size: 84px 84px;
  opacity: 0.54;
}
.ai-routes{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ai-routes .route-track{
  fill: none;
  stroke: rgba(137,255,186,0.16);
  stroke-width: 8;
  stroke-linecap: round;
}
.ai-routes .route-flow{
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 2 9;
  animation: route-flow 6.5s linear infinite;
}
.ai-routes .route-in{ stroke: url(#route-in); }
.ai-routes .route-out{ stroke: url(#route-out); animation-direction: reverse; }
.ai-routes .route-delayed{ animation-delay: -3.2s; }
.ai-routes .route-orbit{
  fill: none;
  stroke: rgba(137,255,186,0.25);
  stroke-width: 1.2;
  stroke-dasharray: 3 8;
}
.ai-routes .route-points circle{
  fill: #a4ffc7;
  stroke: rgba(31,224,138,0.26);
  stroke-width: 7;
}
@keyframes route-flow{
  to{ stroke-dashoffset: -44; }
}
.ai-core{
  position:absolute;
  left: 50%;
  top: 50%;
  width: 106px;
  height: 106px;
  transform: translate(-50%, -45%);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  border: 1px solid rgba(143,255,182,0.78);
  background:
    radial-gradient(circle at 45% 35%, rgba(187,255,208,0.98), rgba(31,224,138,0.34) 32%, rgba(15,54,42,0.78) 72%);
  color: #f5fff8;
  text-align:center;
  text-transform: uppercase;
  font-size: 0.78rem;
  line-height: 1.05;
  font-weight: 800;
  box-shadow:
    0 0 0 14px rgba(31,224,138,0.12),
    0 0 36px rgba(31,224,138,0.72);
}
.ai-node{
  position:absolute;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.24);
  border-radius: 10px;
  background: rgba(31,38,41,0.74);
  color: var(--paper);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 14px 36px rgba(0,0,0,0.26);
  backdrop-filter: blur(10px);
}
.node-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  color: rgba(245,245,247,0.76);
  font-size: 0.72rem;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.node-header span{
  color: rgba(118,255,188,0.6);
  letter-spacing: 0.16em;
}
.whatsapp-node{
  left: 42px;
  top: 48px;
  width: 230px;
  padding: 0.85rem;
}
.whatsapp-node p{
  position: relative;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 8px;
  background: rgba(255,255,255,0.12);
  padding: 0.65rem 2rem 0.65rem 0.75rem;
  font-size: 0.84rem;
  line-height: 1.2;
}
.node-dot{
  position:absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  width: 18px;
  height: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  background: #d7f07b;
  color: #40510e;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: lowercase;
  box-shadow: 0 0 8px rgba(215,240,123,0.75);
}
.company-node{
  padding: 0.75rem;
}
.company-node-large{
  right: 30px;
  top: 48px;
  width: 236px;
}
.company-node-small{
  left: 42px;
  bottom: 36px;
  width: 260px;
}
.node-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}
.node-grid div{
  position: relative;
  min-height: 54px;
  border: 1px solid rgba(80,255,151,0.48);
  border-radius: 8px;
  padding: 0.48rem 0.55rem;
  background: rgba(31,224,138,0.10);
  box-shadow:
    0 0 14px rgba(31,224,138,0.20),
    inset 0 0 16px rgba(31,224,138,0.08);
  overflow:hidden;
}
.node-grid span{
  display:block;
  color: rgba(245,245,247,0.68);
  font-size: 0.72rem;
  margin-bottom: 0.12rem;
}
.node-grid strong{
  display:block;
  color: #fff;
  font-size: 0.78rem;
}
.node-grid i{
  position:absolute;
  right: 6px;
  bottom: 7px;
  width: 34px;
  height: 22px;
  background:
    linear-gradient(135deg, transparent 44%, rgba(108,255,157,0.95) 45% 53%, transparent 54%),
    linear-gradient(45deg, transparent 42%, rgba(108,255,157,0.55) 43% 50%, transparent 51%);
  opacity: 0.86;
}
.answer-node{
  right: 30px;
  bottom: 48px;
  width: 250px;
  padding: 0.85rem 2.3rem 0.9rem 0.95rem;
  background: rgba(64,82,80,0.78);
}
.answer-node p{
  font-size: 0.84rem;
  line-height: 1.22;
}

.product-preview{
  position: relative;
  z-index: 1;
  width: min(850px, calc(100vw - 48px));
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 0.2rem;
  border: 1px solid rgba(205,230,228,0.42);
  background: rgba(235,255,251,0.12);
  border-radius: 28px 28px 0 0;
  padding: 16px 28px 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 -18px 80px rgba(54,236,164,0.18);
  overflow: hidden;
}
.preview-column{
  min-height: 390px;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.preview-header{
  height: 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(245,245,247,0.9);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.035em;
  margin-bottom: 0;
}
.whatsapp-mark{
  position:absolute;
  left: 16px;
  width: 26px;
  height: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  background: #56d36f;
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.84rem;
  font-weight: 700;
  text-transform: lowercase;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.25) inset;
}
.customer-thread{
  position: relative;
  display:flex;
  flex-direction: column;
  gap: 0.86rem;
  padding: 0 24px 32px 48px;
  background:
    linear-gradient(rgba(14,28,35,0.94), rgba(14,28,35,0.94)),
    radial-gradient(circle at 12% 40%, rgba(255,255,255,0.06) 0 1px, transparent 1px);
  background-size: auto, 28px 28px;
}
.customer-thread .preview-header{
  margin-left: -48px;
  margin-right: -24px;
  background: rgba(43,58,64,0.92);
}
.preview-line{
  display:flex;
  align-items:flex-start;
  gap: 0.68rem;
  max-width: 86%;
}
.preview-line.bot{
  align-self:flex-start;
  margin-left: -34px;
}
.mini-bot{
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 50%;
  border: 1px solid rgba(118,255,188,0.75);
  background: rgba(39,193,126,0.45);
  color: #dcfff0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  margin-top: 0.1rem;
}
.preview-message{
  max-width: 100%;
  border-radius: 10px;
  padding: 0.72rem 0.78rem;
  font-size: 0.84rem;
  line-height: 1.28;
}
.preview-message.in{
  align-self:flex-end;
  background: #086b58;
  color: var(--paper);
  border-bottom-right-radius: 4px;
}
.preview-message.in.compact{
  margin-top: 0.18rem;
}
.preview-message.out{
  align-self:flex-start;
  background: #283741;
  color: var(--paper);
  border-bottom-left-radius: 4px;
}
.knowledge-panel{
  display:flex;
  flex-direction: column;
  align-items:center;
  padding: 0 24px 32px;
  background: #fbfcfb;
  color: #0c0f12;
}
.knowledge-panel .preview-header{
  color: #283139;
  font-weight: 600;
}
.data-table{
  width: 100%;
  margin-top: 8px;
  border: 1px solid #d8dde1;
  border-radius: 8px;
  overflow: hidden;
}
.data-row{
  display:grid;
  grid-template-columns: 1fr 1.58fr;
  align-items:center;
  min-height: 42px;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid #d8dde1;
}
.data-row:last-child{ border-bottom: 0; }
.data-row span,
.data-row strong{
  min-height: 42px;
  display:flex;
  align-items:center;
  padding: 0.52rem 0.78rem;
}
.data-row span{
  color: #101418;
  background: #f4f5f5;
  border-right: 1px solid #d8dde1;
  font-size: 0.88rem;
}
.data-row strong{
  color: #101418;
  text-align: left;
  font-size: 0.86rem;
  font-weight: 500;
}

.section-heading{
  max-width: 680px;
  margin-bottom: 2.4rem;
}
.section-heading h2,
.audience-copy h2{
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  line-height: 1.14;
}
.section-heading p,
.audience-copy p{
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 1rem;
}
.use-cases,
.workflow,
.audience{
  max-width: 1180px;
  margin: 0 auto;
}
.workflow{
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 768px;
  display:grid;
  grid-template-columns: minmax(520px, 630px) 600px;
  align-items:center;
  justify-content:center;
  gap: 24px;
  padding-left: clamp(3rem, 5vw, 6rem);
  padding-right: clamp(3rem, 5vw, 6rem);
  overflow: hidden;
}
.workflow::before{
  content:"";
  position:absolute;
  inset: 4rem 0 3rem 38%;
  pointer-events:none;
  opacity: 0.72;
  background:
    linear-gradient(90deg, rgba(31,224,138,0.12) 1px, transparent 1px),
    linear-gradient(0deg, rgba(31,224,138,0.12) 1px, transparent 1px),
    radial-gradient(circle at 56% 42%, rgba(31,224,138,0.24), transparent 32%),
    linear-gradient(135deg, transparent 24%, rgba(31,224,138,0.16) 24.3%, transparent 24.8% 50%, rgba(31,224,138,0.12) 50.3%, transparent 50.8%);
  background-size: 108px 108px, 108px 108px, auto, 360px 360px;
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 82%, transparent);
}
.workflow-copy{
  position: relative;
  z-index: 1;
  max-width: 640px;
}
.workflow-copy h2{
  max-width: 640px;
  font-size: clamp(3.15rem, 4.1vw, 4.2rem);
  line-height: 1.03;
  letter-spacing: 0;
  font-weight: 700;
}
.workflow-copy h2 span{
  color: var(--accent);
}
.workflow-copy p{
  max-width: 560px;
  margin-top: 1.65rem;
  color: rgba(245,245,247,0.9);
  font-size: clamp(1.12rem, 1.55vw, 1.36rem);
  line-height: 1.34;
}
.workflow-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 208px;
  min-height: 58px;
  margin-top: 2.4rem;
  padding: 0.9rem 1.65rem;
  border-radius: 999px;
  background: linear-gradient(100deg, #94ff56 0%, #3ff0b8 100%);
  color: #06130c;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.92rem;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(57,236,155,0.23);
}
.workflow-cta:hover{ filter: brightness(1.08); }
.workflow-cards{
  position: relative;
  z-index: 1;
  min-height: 765px;
}
.use-cases{
  max-width: 1240px;
  display:grid;
  grid-template-columns: minmax(520px, 0.95fr) minmax(560px, 1fr);
  gap: 3rem;
  align-items:center;
  padding-top: 6rem;
  padding-bottom: 6rem;
}
.use-cases .section-heading{
  max-width: 560px;
  margin-bottom: 0;
  transform: translateX(-34px);
}
.use-cases .section-heading h2{
  font-size: clamp(3.4rem, 6vw, 5rem);
  line-height: 1.05;
  letter-spacing: -0.045em;
}
.use-cases .section-heading p{
  max-width: 520px;
  margin-top: 1.6rem;
  color: rgba(245,245,247,0.58);
  font-size: clamp(1.15rem, 1.75vw, 1.45rem);
  line-height: 1.28;
}
.use-case-grid,
.workflow-grid{
  display:grid;
  gap: 1rem;
}
.use-case-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  max-width: 500px;
}
.use-case-card,
.workflow-step{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.25rem;
}
.use-case-card{
  min-height: 230px;
  border-radius: 16px;
  padding: 1.35rem 1.3rem;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,255,255,0.055), transparent 35%),
    linear-gradient(145deg, rgba(34,35,42,0.96), rgba(22,23,29,0.96));
  border-color: rgba(255,255,255,0.12);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.025) inset,
    0 14px 40px rgba(0,0,0,0.18);
}
.use-case-icon{
  width: 46px;
  height: 46px;
  color: #8cff45;
  margin-bottom: 0.95rem;
  filter: drop-shadow(0 0 10px rgba(140,255,69,0.2));
}
.use-case-card h3,
.workflow-step h3{
  font-size: 1rem;
  margin-bottom: 0.55rem;
}
.use-case-card h3{
  color: #8cff45;
  font-size: 1.32rem;
  line-height: 1.05;
  margin-bottom: 0.65rem;
}
.use-case-card p,
.workflow-step p{
  color: var(--muted);
  font-size: 0.9rem;
}
.use-case-card p{
  color: rgba(245,245,247,0.86);
  font-size: 0.92rem;
  line-height: 1.38;
}
.use-case-card p strong{
  color: #8cff45;
  font-weight: 700;
}

.workflow-step{
  position:absolute;
  display:flex;
  flex-direction: column;
  justify-content:center;
  width: 286px;
  min-height: 170px;
  padding: 2.05rem 2rem;
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 76% 12%, rgba(255,255,255,0.06), transparent 32%),
    linear-gradient(145deg, rgba(34,39,50,0.96), rgba(25,29,38,0.98));
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.025) inset,
    0 20px 48px rgba(0,0,0,0.22);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}
.workflow-step:hover{
  border-color: rgba(31,224,138,0.55);
  background:
    radial-gradient(circle at 76% 12%, rgba(31,224,138,0.12), transparent 34%),
    radial-gradient(circle at 18% 86%, rgba(255,255,255,0.055), transparent 32%),
    linear-gradient(145deg, rgba(37,43,54,0.98), rgba(26,31,40,0.99));
  box-shadow:
    0 0 0 1px rgba(31,224,138,0.16) inset,
    0 22px 50px rgba(0,0,0,0.25),
    0 0 26px rgba(31,224,138,0.14);
}
.workflow-step:hover .workflow-icon{
  filter: drop-shadow(0 0 16px rgba(31,224,138,0.34));
}
.workflow-step-register{
  top: 0;
  right: 26px;
  min-height: 350px;
}
.workflow-step-connect{
  top: 210px;
  left: 0;
  min-height: 365px;
}
.workflow-step-track{
  right: 0;
  bottom: 0;
  min-height: 390px;
}
.workflow-icon{
  width: 72px;
  height: 72px;
  color: var(--accent);
  margin-bottom: 1.35rem;
  filter: drop-shadow(0 0 12px rgba(31,224,138,0.2));
}
.workflow-step h3{
  max-width: 210px;
  color: #fff;
  font-size: clamp(1.45rem, 2vw, 1.75rem);
  line-height: 0.96;
  letter-spacing: 0;
  margin-bottom: 0.85rem;
}
.workflow-step p{
  color: rgba(245,245,247,0.88);
  font-size: 1rem;
  line-height: 1.34;
}

.demo-intro .eyebrow{ display:none; }
.demo-intro h2{
  max-width: 520px;
}
.phone{
  position: relative;
  justify-self: center;
  width: min(390px, 100%);
  min-height: 720px;
  padding: 10px;
  border: 1px solid #2f3035;
  border-radius: 38px;
  background: #050506;
  box-shadow: 0 18px 44px rgba(0,0,0,0.35);
  overflow: hidden;
}
.iphone-speaker{
  position:absolute;
  top: 17px;
  left: 50%;
  z-index: 5;
  width: 92px;
  height: 24px;
  transform: translateX(-50%);
  border-radius: 14px;
  background: #050506;
}
.iphone-screen{
  height: 700px;
  overflow: hidden;
  border-radius: 30px;
  background: #0b141a;
  display:flex;
  flex-direction: column;
}
.iphone-status{
  height: 42px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 27px 0 30px;
  color: #e9edef;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  background: #111b21;
}
.phone .phone-header{
  display:flex;
  align-items:center;
  gap: 0.55rem;
  padding: 0.7rem 0.8rem;
  min-height: 62px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: #202c33;
}
.wa-back,
.phone-input button{
  border: 0;
  background: none;
  color: #d1d7db;
  cursor: default;
  flex-shrink: 0;
}
.wa-back{
  width: 22px;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1;
}
.phone .avatar{
  width: 38px;
  height: 38px;
  background: #00a884;
  color: #07120f;
  font-weight: 700;
}
.phone .contact-info{
  flex: 1;
  min-width: 0;
}
.phone .contact-info strong{
  display:block;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0f2f5;
  font-size: 0.93rem;
}
.phone .status{
  color: #aebac1;
  font-size: 0.76rem;
}
.wa-actions{
  display:flex;
  align-items:center;
  gap: 0.75rem;
  color: #d1d7db;
}
.wa-actions svg{
  width: 18px;
  height: 18px;
}
.phone .phone-body{
  position: relative;
  flex: 1;
  height: auto;
  padding: 1rem 0.75rem;
  background:
    linear-gradient(rgba(11,20,26,0.86), rgba(11,20,26,0.86)),
    radial-gradient(circle at 15% 20%, rgba(255,255,255,0.07) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,0.05) 0 1px, transparent 1px);
  background-size: auto, 26px 26px, 34px 34px;
}
.phone .chat-msg{
  border-radius: 8px;
  padding: 0.5rem 0.65rem 0.45rem;
  color: #e9edef;
  font-size: 0.86rem;
  line-height: 1.32;
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.phone .chat-msg.in{
  background: #202c33;
  border-bottom-left-radius: 2px;
}
.phone .chat-msg.out{
  background: #005c4b;
  border-bottom-right-radius: 2px;
}
.phone .chat-msg time{
  display:inline-block;
  float:right;
  margin: 0.2rem 0 0 0.45rem;
  color: rgba(233,237,239,0.62);
  font-size: 0.63rem;
}
.phone .phone-input{
  display:flex;
  align-items:center;
  gap: 0.55rem;
  padding: 0.55rem 0.65rem 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: #111b21;
}
.phone-input span{
  flex: 1;
  min-height: 38px;
  display:flex;
  align-items:center;
  padding: 0 0.9rem;
  border-radius: 20px;
  background: #2a3942;
  color: #8696a0;
  font-size: 0.88rem;
}
.phone-input button{
  width: 32px;
  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 1.45rem;
}
.phone-input button svg{
  width: 19px;
  height: 19px;
}
.demo .demo-stage{
  max-width: 1120px;
}
.demo .demo-sticky{
  position: relative;
  top: auto;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 3rem;
  align-items: start;
}
.demo .phone{
  position: sticky;
  top: 6.5rem;
  align-self: start;
}
.demo .demo-text{
  padding-top: 0.4rem;
}
.demo .demo-intro{
  max-width: 560px;
  margin-bottom: 1.25rem;
}
.demo .scroll-track{
  pointer-events: auto;
  display:flex;
  flex-direction: column;
  gap: 4rem;
  padding: 0;
}
.demo .track-step,
.demo .track-step:last-child{
  height: auto;
}
.demo .track-step{
  display:grid;
  grid-template-columns: 32px 1fr;
  column-gap: 0.9rem;
  row-gap: 0.3rem;
  min-height: 44vh;
  align-content: center;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--muted);
  opacity: 0.58;
  transition: opacity 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}
.demo .track-step span{
  grid-row: 1 / 3;
  width: 28px;
  height: 28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.76rem;
}
.demo .track-step strong{
  color: var(--paper);
  font-size: 0.98rem;
  line-height: 1.25;
}
.demo .track-step p{
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.demo .track-step.is-active{
  opacity: 1;
  border-color: rgba(31,224,138,0.38);
  background: #171a1d;
}
.demo{
  position: relative;
  background:
    linear-gradient(135deg, rgba(129,255,89,0.08) 0 1px, transparent 1px 170px),
    linear-gradient(45deg, rgba(61,238,180,0.06) 0 1px, transparent 1px 210px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 72px),
    #07090c;
  padding: 2.4rem 2.5rem;
  overflow: hidden;
}
.demo::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(to right, transparent 0 12%, rgba(137,255,92,0.18) 12% 12.15%, transparent 12.15% 100%),
    linear-gradient(to bottom, transparent 0 23%, rgba(61,238,180,0.12) 23% 23.15%, transparent 23.15% 100%),
    linear-gradient(135deg, transparent 0 48%, rgba(137,255,92,0.14) 48% 48.12%, transparent 48.12% 100%);
  opacity: 0.38;
  mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 84%, transparent);
}
.demo::after{
  content:"AutoFlow / atendimento / estoque / entrega / agenda";
  position:absolute;
  right: 2.5rem;
  bottom: 1.2rem;
  color: rgba(255,255,255,0.12);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events:none;
}
.demo .demo-stage{
  position: relative;
  z-index: 1;
  max-width: 1296px;
  min-height: 360vh;
  display:flex;
  align-items:flex-start;
  margin: 0 auto;
  padding: 3.8rem 5rem;
  border-radius: 24px;
  background:
    radial-gradient(circle at 36% 50%, rgba(87,255,151,0.08), transparent 28%),
    linear-gradient(135deg, #111214 0%, #0c0d0e 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.demo .demo-sticky{
  width: 100%;
  display:grid;
  grid-template-columns: 500px minmax(0, 1fr);
  gap: 4rem;
  align-items:center;
  position: sticky;
  top: clamp(2rem, 8vh, 5.5rem);
  min-height: min(720px, 84vh);
}
.demo .phone{
  position: relative;
  top: auto;
  width: 302px;
  min-height: 598px;
  justify-self: center;
  padding: 7px;
  border-radius: 38px;
  border-color: rgba(255,255,255,0.28);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.42),
    inset 0 0 0 1px rgba(255,255,255,0.08);
}
.demo .iphone-speaker{
  top: 21px;
  width: 88px;
  height: 25px;
}
.demo .iphone-screen{
  height: 582px;
  border-radius: 31px;
}
.demo .iphone-status{
  height: 45px;
  padding: 0 25px 0 32px;
  font-size: 0.64rem;
}
.demo .phone .phone-header{
  min-height: 50px;
  padding: 0.45rem 0.6rem;
  gap: 0.48rem;
}
.demo .wa-back{
  width: 18px;
  font-size: 1.45rem;
  color: #9cff65;
}
.demo .phone .avatar{
  width: 30px;
  height: 30px;
  font-size: 0.7rem;
  background: rgba(143,255,89,0.16);
  color: #9cff65;
}
.demo .phone .contact-info strong{
  font-size: 0.76rem;
}
.demo .phone .status{
  color: rgba(233,237,239,0.62);
  font-size: 0.62rem;
}
.demo .wa-actions{
  gap: 0.62rem;
  color: #9cff65;
}
.demo .wa-actions svg{
  width: 16px;
  height: 16px;
}
.demo .phone .phone-body{
  padding: 0.7rem 0.62rem;
  gap: 0.5rem;
}
.demo .phone .chat-msg{
  max-width: 82%;
  padding: 0.44rem 0.58rem 0.38rem;
  font-size: 0.72rem;
  line-height: 1.24;
}
.demo .phone .chat-msg.in{
  align-self: flex-end;
  background: #303a40;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 2px;
}
.demo .phone .chat-msg.out{
  align-self: flex-start;
  background: #202c33;
  border-bottom-left-radius: 2px;
  border-bottom-right-radius: 8px;
}
.demo .phone .chat-msg time{
  font-size: 0.55rem;
}
.demo .phone .phone-input{
  padding: 0.45rem 0.55rem 0.65rem;
  gap: 0.44rem;
}
.demo .phone-input span{
  min-height: 31px;
  font-size: 0.72rem;
}
.demo .phone-input button{
  width: 25px;
  height: 25px;
  color: #9cff65;
}
.demo .phone-input button svg{
  width: 16px;
  height: 16px;
}
.demo .demo-text{
  padding-top: 0;
  max-width: 560px;
}
.demo .demo-intro{
  max-width: 560px;
  margin-bottom: 2.7rem;
}
.demo .demo-intro h2{
  max-width: 560px;
  color: #fff;
  font-size: clamp(2.8rem, 4.2vw, 3.4rem);
  line-height: 1.02;
  letter-spacing: -0.055em;
}
.demo .demo-intro p{
  display:none;
}
.demo .scroll-track{
  gap: 1rem;
}
.demo .track-step,
.demo .track-step:last-child{
  height: auto;
}
.demo .track-step{
  min-height: 118px;
  display:grid;
  grid-template-columns: 40px 1fr;
  gap: 0.95rem;
  align-content:center;
  padding: 1.25rem 1.35rem;
  border-radius: 18px;
  border-color: rgba(255,255,255,0.11);
  background: rgba(27,30,33,0.38);
  opacity: 0.24;
  color: rgba(255,255,255,0.5);
}
.demo .track-step .flow-step-icon{
  grid-row: auto;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: transparent;
  color: currentColor;
}
.demo .track-step .flow-step-icon svg{
  width: 32px;
  height: 32px;
}
.demo .track-step strong{
  display:block;
  color: currentColor;
  font-size: 1.35rem;
  line-height: 1.15;
  margin-bottom: 0.5rem;
}
.demo .track-step p{
  color: currentColor;
  font-size: 0.98rem;
  line-height: 1.35;
}
.demo .track-step.is-active{
  opacity: 1;
  color: #fff;
  border-color: #9cff65;
  background: rgba(31,36,40,0.9);
  box-shadow:
    0 0 0 1px rgba(156,255,101,0.45),
    0 0 30px rgba(156,255,101,0.32);
}
.demo .track-step.is-active .flow-step-icon{
  color: #9cff65;
}
.track-caption .mono{
  color: var(--accent);
  text-transform: uppercase;
}

.workflow-grid{
  grid-template-columns: repeat(3, 1fr);
}
.workflow-step span{
  display:flex;
  align-items:center;
  justify-content:center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: var(--panel-2);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-bottom: 1rem;
}

.features-narrative{
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding-top: 5.25rem;
  padding-bottom: 5.5rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 32%, rgba(23,137,103,0.26), transparent 27%),
    radial-gradient(circle at 76% 90%, rgba(19,125,92,0.20), transparent 31%),
    linear-gradient(115deg, #0a1618 0%, #0b1017 50%, #071011 100%);
}
.features-narrative::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: 0.45;
  background:
    linear-gradient(135deg, transparent 0 72%, rgba(48,227,162,0.22) 72.1% 72.25%, transparent 72.35%),
    linear-gradient(45deg, transparent 0 82%, rgba(48,227,162,0.16) 82.1% 82.25%, transparent 82.35%),
    linear-gradient(90deg, rgba(48,227,162,0.10) 1px, transparent 1px),
    linear-gradient(0deg, rgba(48,227,162,0.08) 1px, transparent 1px);
  background-size: 520px 520px, 440px 440px, 96px 96px, 96px 96px;
  mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent);
}
.features-narrative > h2{
  position:relative;
  z-index:1;
  text-align: center;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: -0.035em;
}
.feature-benefit-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  width: min(1045px, 100%);
  margin: 2.35rem auto 0;
}
.feature-benefit-card{
  min-height: 258px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding: 2rem;
  text-align:center;
  background: linear-gradient(145deg, rgba(18,29,32,0.88), rgba(10,14,21,0.92));
  border: 2px solid rgba(72,230,166,0.72);
  border-radius: 18px;
  box-shadow: 0 16px 22px -18px rgba(44,238,163,0.92), inset 0 1px 0 rgba(255,255,255,0.04);
}
.feature-benefit-card svg{
  width: 60px;
  height: 60px;
  margin-bottom: 1.1rem;
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(31,224,138,0.22));
}
.feature-benefit-card h3{
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}
.feature-benefit-card p{
  max-width: 285px;
  margin-top: 0.7rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}
.features-flow-title{ margin-top: 4.2rem; }
.feature-flow{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  width: min(1045px, 100%);
  margin: 2.15rem auto 0;
  padding: 0;
  list-style:none;
}
.feature-flow li{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.feature-flow li:not(:last-child)::after{
  content:"";
  position:absolute;
  top: 32px;
  left: calc(50% + 41px);
  width: calc(100% - 15px);
  height: 3px;
  background: linear-gradient(90deg, rgba(31,224,138,0.25), rgba(57,239,169,0.92), rgba(31,224,138,0.25));
  box-shadow: 0 0 10px rgba(31,224,138,0.35);
}
.feature-flow-icon{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(72,230,166,0.55);
  border-radius: 12px;
  background: #0d1a1c;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 0 18px rgba(31,224,138,0.13);
}
.feature-flow strong{
  margin-top: 1rem;
  font-family: var(--font-display);
  font-size: 1.05rem;
}
.feature-flow p{
  max-width: 210px;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.audience{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items:start;
}
.audience-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
}
.audience-list span{
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 8px;
  padding: 0.85rem 0.9rem;
  color: var(--paper);
  font-size: 0.92rem;
}
.contact-text .eyebrow{ display:none; }
.contact-form{
  border-radius: 12px;
}
.whatsapp-link{
  font-family: var(--font-body);
  color: var(--paper);
  border-bottom-color: var(--accent);
}

/* Contact redesign */
.contact{
  position:relative;
  grid-template-columns:minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap:clamp(3rem, 7vw, 7rem);
  align-items:start;
  max-width:1180px;
  padding-top:6rem;
  padding-bottom:6rem;
  border-top:1px solid var(--line);
}
.contact-text{ padding-top:0.4rem; }
.contact-text h2{
  max-width:470px;
  margin-bottom:1.25rem;
  font-size:clamp(2.25rem, 4.2vw, 3.8rem);
  line-height:1.02;
  letter-spacing:-0.045em;
}
.contact-text p{
  max-width:430px;
  color:rgba(245,245,247,0.62);
  font-size:1.02rem;
  line-height:1.55;
}
.whatsapp-link{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  margin-top:2rem;
  padding-bottom:0.25rem;
  border-bottom:1px solid rgba(31,224,138,0.55);
  font-size:0.9rem;
  font-weight:600;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.whatsapp-link:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.whatsapp-link span{
  color:var(--accent);
  font-size:1.05rem;
}
.contact-form{
  padding:0 0 0 clamp(2rem, 4vw, 4rem);
  background:transparent;
  border:0;
  border-left:1px solid var(--line);
  border-radius:0;
}
#formFields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.1rem 1.25rem;
}
.contact-form-heading{
  grid-column:1 / -1;
  margin-bottom:0.45rem;
}
.contact-form-heading h3{
  color:var(--paper);
  font-size:1.25rem;
}
.contact-form-heading p{
  max-width:470px;
  margin-top:0.35rem;
  color:rgba(245,245,247,0.5);
  font-size:0.85rem;
  line-height:1.45;
}
.contact-form label{
  margin-bottom:0;
  color:rgba(245,245,247,0.72);
  font-size:0.78rem;
  font-weight:600;
}
.contact-form label:nth-of-type(3),
.contact-form label:nth-of-type(4){
  grid-column:1 / -1;
}
.contact-form input,
.contact-form textarea{
  margin-top:0.45rem;
  padding:0.78rem 0.85rem;
  background:#101116;
  border:1px solid rgba(255,255,255,0.11);
}
.contact-form textarea{ min-height:116px; }
.contact-form input:focus,
.contact-form textarea:focus{
  box-shadow:0 0 0 3px rgba(31,224,138,0.10);
}
.contact-form button{
  grid-column:2;
  justify-self:end;
  width:auto;
  min-width:170px;
  margin-top:0.25rem;
  padding:0.82rem 1.3rem;
  font-size:0.8rem;
  transition:background-color 0.15s ease;
}
.contact-form button:hover{
  background:#56eea7;
  filter:none;
}

@media (max-width: 800px){
  .contact{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .contact-text{ padding-top:0; }
  .contact-form{
    padding-left:0;
    border-left:0;
  }
}

.demo .demo-stage{
  min-height: 360vh;
}

.demo{
  overflow: clip;
}

.demo .demo-sticky{
  position: sticky;
  top: clamp(2rem, 8vh, 5.5rem);
  min-height: min(720px, 84vh);
}

.phone-visual{
  position: relative;
  width: 500px;
  height: 720px;
  justify-self: center;
  transform-style: preserve-3d;
}

#phoneCanvas{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
}

#phoneScreenOverlay{
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transform-origin: center;
  transform-style: preserve-3d;
  transition: opacity 0.32s ease;
  will-change: transform, opacity;
}

#phoneScreenOverlay.is-chat-visible{
  opacity: 1;
}

#phoneScreenOverlay .chat-msg{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.28s ease, transform 0.28s ease;
  transition-delay: 0s;
}

#phoneScreenOverlay.is-chat-visible .chat-msg{
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(var(--message-index) * 65ms + 100ms);
}

.phone-model-error #phoneCanvas{
  opacity: 0;
}

@media (max-width: 860px){
  .demo .demo-stage{
    min-height: auto;
  }

  .demo .demo-sticky{
    position: relative;
    top: auto;
    min-height: 0;
  }

  .phone-visual{
    width: min(390px, 100%);
    height: 560px;
  }
}

@media (prefers-reduced-motion: reduce){
  #phoneScreenOverlay,
  #phoneScreenOverlay .chat-msg{
    transition: none;
  }
}

@media (max-width: 980px){
  .feature-benefit-grid{
    grid-template-columns:1fr;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
  .feature-flow{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:2.5rem;
  }
  .feature-flow li:nth-child(2)::after{ display:none; }
}
@media (max-width: 640px){
  .features-narrative{
    padding-top:4.5rem;
    padding-bottom:4.5rem;
  }
  .feature-benefit-card{
    min-height:0;
    padding:1.8rem 1.35rem;
  }
  .feature-flow{
    grid-template-columns:1fr;
    gap:1.7rem;
  }
  .feature-flow li:not(:last-child)::after{ display:none; }
}

/* Restored auth control defaults */
.auth-mode-rail .auth-tab{
  border:0;
  background:transparent;
  font-family:var(--font-mono);
  font-weight:600;
  letter-spacing:0.03em;
  text-transform:uppercase;
  cursor:pointer;
}
.auth-loading[hidden]{ display:none !important; }

/* Keep the contact heading proportional to the section. */
.contact-text h2{
  font-size:clamp(2.1rem, 3.2vw, 3.1rem);
  line-height:1.05;
}
@media (max-width: 560px){
  .contact{
    padding-top:4.5rem;
    padding-bottom:4.5rem;
  }
  .contact-text h2{ font-size:clamp(2.1rem, 11vw, 3rem); }
  #formFields{ grid-template-columns:1fr; }
  .contact-form label:nth-of-type(3),
  .contact-form label:nth-of-type(4),
  .contact-form button{ grid-column:1; }
  .contact-form button{
    width:100%;
    justify-self:stretch;
  }
}

svg rect.mask.target{
  stroke: none !important;
  stroke-width: 0 !important;
}

@media (max-width: 1120px){
  .landing-hero{
    grid-template-columns: 1fr;
    padding-left: 6vw;
    padding-right: 6vw;
    gap: 3rem;
  }
  .landing-hero .hero-content{
    max-width: 760px;
    transform: none;
  }
  .hero-ai-panel{
    justify-self: center;
    width: min(760px, 100%);
  }
  .workflow{
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 3rem;
    padding-left: 6vw;
    padding-right: 6vw;
  }
  .workflow::before{
    inset: 24rem 0 3rem 0;
  }
  .workflow-copy{
    max-width: 760px;
  }
  .workflow-cards{
    width: min(650px, 100%);
    min-height: 620px;
    justify-self: center;
  }
  .workflow-step{
    width: min(306px, 48%);
  }
  .workflow-step-track{
    right: 86px;
  }
}

@media (max-width: 980px){
  .landing-nav{ display:none; }
  .product-preview,
  .audience,
  .use-cases{
    grid-template-columns: 1fr;
  }
  .feature-benefit-grid{
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .feature-flow{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 2.5rem;
  }
  .feature-flow li:nth-child(2)::after{ display:none; }
  .use-cases{
    gap: 2.2rem;
  }
  .use-cases .section-heading{
    max-width: 760px;
    transform: none;
  }
  .use-cases .section-heading h2{
    font-size: clamp(2.75rem, 8vw, 4.5rem);
  }
  .use-case-grid,
  .workflow-grid{
    grid-template-columns: repeat(2, 1fr);
  }
  .demo{
    padding: 1.25rem;
  }
  .demo .demo-stage{
    min-height: auto;
    padding: 3rem 2rem;
  }
  .demo .demo-sticky{
    grid-template-columns: 1fr;
    gap: 2.5rem;
    justify-items: center;
  }
  .demo .demo-text{
    max-width: 620px;
  }
  .landing-hero .hero-name{
    font-size: clamp(2.9rem, 8vw, 4.2rem);
  }
  .ai-panel-inner{
    min-height: 430px;
  }
  .hero-ai-panel{
    transform: scale(0.92);
    transform-origin: top center;
    margin-bottom: -2rem;
  }
}

@media (max-width: 640px){
  .features-narrative{ padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .feature-benefit-card{ min-height: 0; padding: 1.8rem 1.35rem; }
  .feature-flow{ grid-template-columns: 1fr; gap: 1.7rem; }
  .feature-flow li:not(:last-child)::after{ display:none; }
  .landing-topbar{
    padding: 0.9rem 5vw;
  }
  .topbar-actions{
    gap: 0.2rem;
  }
  .landing-topbar .topbar-login{
    display:inline-flex;
    min-height:44px;
    align-items:center;
    padding:0.5rem 0.65rem;
    font-size:0.68rem;
  }
  .landing-topbar .topbar-cta{
    min-height:44px;
    display:inline-flex;
    align-items:center;
    padding: 0.5rem 0.65rem;
    font-size: 0.68rem;
  }
  .landing-hero{
    padding-top: 6.7rem;
    padding-bottom: 3rem;
    gap: 2.2rem;
  }
  .hero-actions{
    align-items: stretch;
  }
  .primary-action,
  .secondary-action{
    width: 100%;
  }
  .landing-hero .hero-name{
    font-size: clamp(2.45rem, 12vw, 3.4rem);
  }
  .hero-kicker{
    font-size: 1.55rem;
  }
  .landing-hero .hero-desc{
    font-size: 1rem;
  }
  .hero-ai-panel{
    width: min(520px, 100%);
    transform: none;
    margin-bottom: 0;
  }
  .ai-panel-inner{
    min-height: 610px;
    border-radius: 22px;
  }
  .ai-routes{
    opacity: 0.55;
  }
  .ai-core{
    top: 49%;
    width: 92px;
    height: 92px;
    font-size: 0.68rem;
  }
  .whatsapp-node,
  .company-node-large,
  .company-node-small,
  .answer-node{
    left: 1rem;
    right: 1rem;
    width: auto;
  }
  .whatsapp-node{ top: 1rem; }
  .company-node-large{ top: 9.4rem; }
  .company-node-small{ bottom: 8.8rem; }
  .answer-node{ bottom: 1rem; }
  .node-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .use-case-grid,
  .workflow-grid,
  .audience-list{
    grid-template-columns: 1fr;
  }
  .use-cases{
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
  .use-cases .section-heading h2{
    font-size: clamp(2.35rem, 12vw, 3.2rem);
  }
  .use-cases .section-heading p{
    font-size: 1rem;
  }
  .use-case-card{
    min-height: 240px;
    padding: 1.45rem;
  }
  .workflow{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .workflow-copy h2{
    font-size: clamp(2.6rem, 8.5vw, 4.15rem);
  }
  .workflow-copy p{
    font-size: 1.1rem;
  }
  .product-preview{
    padding: 0.75rem;
  }
  .preview-message{
    max-width: 92%;
  }
  .demo{
    padding: 1rem 0.8rem;
  }
  .demo .demo-stage{
    padding: 2rem 1rem;
    border-radius: 20px;
  }
  .demo .demo-intro{
    margin-bottom: 1.5rem;
  }
  .demo .demo-intro h2{
    font-size: clamp(2.2rem, 11vw, 3rem);
  }
  .demo .track-step{
    grid-template-columns: 34px 1fr;
    padding: 1rem;
    border-radius: 14px;
  }
  .demo .track-step strong{
    font-size: 1.05rem;
  }
  .demo .track-step p{
    font-size: 0.85rem;
  }
  .workflow{
    gap: 2rem;
  }
  .workflow::before{
    inset: 19rem -6vw 2rem -6vw;
  }
  .workflow-cards{
    min-height: auto;
    display:grid;
    gap: 1rem;
  }
  .workflow-step,
  .workflow-step-register,
  .workflow-step-connect,
  .workflow-step-track{
    position: relative;
    inset: auto;
    width: 100%;
    min-height: 245px;
    border-radius: 18px;
    padding: 1.55rem;
  }
  .workflow-icon{
    width: 58px;
    height: 58px;
    margin-bottom: 1rem;
  }
  .workflow-step h3{
    font-size: 1.42rem;
  }
  .workflow-step p{
    font-size: 0.95rem;
  }
}

@media (max-width: 860px){
  .demo .demo-sticky{
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .demo .phone{
    position: relative;
    top: auto;
    width: min(302px, 100%);
  }
  .demo .demo-text{
    width: 100%;
  }
  .demo .demo-intro{
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
  .demo .track-step{
    min-height: auto;
    align-content: center;
  }
}

/* ============================================
   Accessibility
   ============================================ */
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-glow, .hero-scroll span, .ai-routes .route-flow{ animation: none; }
  .chat-msg{ transition: opacity 0.2s linear; transform:none; }
}

@media (max-width: 1120px){
  .hero-ai-panel:has(.ai-dashboard-image){ width:min(760px, 100%); }
}

/* ============================================
   Auth pages (login)
   ============================================ */
.auth-shell{
  position: relative;
  min-height: 100svh;
  display:grid;
  grid-template-columns: minmax(0, 430px) minmax(360px, 420px);
  align-items:center;
  justify-content:center;
  gap: clamp(3rem, 10vw, 10rem);
  padding: 7.5rem 6vw 5rem;
  overflow: hidden;
}

.auth-glow{
  position:absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 25% 20%, rgba(31,224,138,0.10), transparent 45%),
    radial-gradient(circle at 78% 75%, rgba(31,224,138,0.07), transparent 50%);
  pointer-events:none;
}

.auth-card{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: rgba(19,19,24,0.94);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2.5rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

.auth-intro{
  position: relative;
  z-index: 1;
  max-width: 410px;
}
.auth-intro-brand{
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.05em;
}
.auth-intro-brand span{ color: var(--accent); }
.auth-intro-copy{
  margin-top: 1.15rem;
  color: var(--paper);
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.025em;
}
.auth-intro-list{
  display:grid;
  gap: 0.8rem;
  margin-top: 2rem;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 0.92rem;
}
.auth-intro-list li{
  display:flex;
  align-items:center;
  gap: 0.7rem;
}
.auth-intro-list li::before{
  content:"";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}
.auth-card-label{
  display:inline-block;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.auth-card h1{
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  margin-top: 0.65rem;
  letter-spacing: -0.03em;
}

.auth-sub{
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: 0.92rem;
}

.auth-form{ margin-top: 2rem; }

.auth-form label{
  display:block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  width:100%;
  margin-top: 0.4rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.92rem;
}
.auth-form input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31,224,138,0.12);
}

.password-field{ position: relative; }
.password-field input{ padding-right: 3rem !important; }
.password-toggle{
  position:absolute;
  right: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0.2rem;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.password-toggle svg {
  width: 20px;
  height: 20px;
  display: none;
}
.password-toggle:not(.is-visible) .eye-open {
  display: block;
}
.password-toggle.is-visible .eye-closed {
  display: block;
}
.password-toggle:hover{ color: var(--accent); }

.auth-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: -0.3rem 0 1.6rem;
  font-size: 0.82rem;
}
.checkbox{
  display:flex;
  align-items:center;
  gap: 0.5rem;
  margin-bottom: 0;
  color: var(--muted);
}
.checkbox input{ accent-color: var(--accent); }

.auth-link{
  color: var(--accent);
  text-decoration: none;
  font-size: 0.82rem;
}
.auth-link:hover{ text-decoration: underline; }

.auth-submit{
  width:100%;
  background: var(--accent);
  color: #06130C;
  border: none;
  border-radius: 8px;
  padding: 0.85rem;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor:pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.auth-submit:hover{ background: #56eea7; }

.auth-loading{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 1rem;
  padding: 1.4rem 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.spinner{
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

.auth-footer-text{
  margin-top: 1.8rem;
  text-align:center;
  font-size: 0.85rem;
  color: var(--muted);
}

@media (max-width: 820px){
  .auth-shell{
    display:flex;
    min-height: 100vh;
    padding-top: 6.5rem;
  }
  .auth-intro{ display:none; }
}

@media (max-width: 480px){
  .auth-shell{ padding-left: 1.25rem; padding-right: 1.25rem; }
  .auth-card{ padding: 1.7rem; }
}

@media (prefers-reduced-motion: reduce){
  .spinner{ animation: none; }
}

/* Split login layout inspired by the supplied reference */
.auth-page{
  background: #eef2ec;
}
.auth-page .auth-topbar{
  width: min(1180px, calc(100% - 48px));
  z-index: 60;
}
.auth-shell{
  position: relative;
  display:grid;
  grid-template-columns: 48% 52%;
  gap: 0;
  min-height: 100svh;
  padding: 0;
  overflow: hidden;
  background: #eef2ec;
}
.auth-showcase{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  min-height:100svh;
  padding: 8.5rem clamp(3rem, 7vw, 8rem) 4rem;
  overflow:hidden;
  color:#f8fffb;
  background:
    radial-gradient(circle at 18% 16%, rgba(106,255,190,0.22), transparent 24%),
    radial-gradient(circle at 78% 72%, rgba(7,43,34,0.66), transparent 40%),
    linear-gradient(135deg, #145c46 0%, #0f4939 46%, #092d26 100%);
}
.auth-showcase::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0.28;
  background:
    linear-gradient(135deg, transparent 0 66%, rgba(120,255,200,0.28) 66.1% 66.25%, transparent 66.4%),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 500px 500px, 88px 88px, 88px 88px;
}
.auth-showcase-copy,
.auth-conversation{
  position:relative;
  z-index:1;
}
.auth-showcase-copy{
  max-width:560px;
}
.auth-showcase-label{
  margin-bottom:1rem;
  color:#96f8c7;
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.auth-showcase-copy h1{
  max-width:540px;
  font-size:clamp(2.4rem, 4.2vw, 4.4rem);
  line-height:0.98;
  letter-spacing:-0.055em;
}
.auth-showcase-copy > p:last-child{
  max-width:500px;
  margin-top:1.4rem;
  color:rgba(240,255,248,0.76);
  font-size:clamp(1rem, 1.35vw, 1.18rem);
  line-height:1.45;
}
.auth-conversation{
  width:min(460px, 92%);
  margin-top:3rem;
  padding:1.15rem;
  border:1px solid rgba(151,255,207,0.28);
  border-radius:14px;
  background:rgba(5,30,24,0.66);
  box-shadow:0 22px 50px rgba(0,0,0,0.18);
}
.auth-conversation-head{
  display:flex;
  align-items:center;
  gap:0.7rem;
  padding-bottom:0.9rem;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.auth-conversation-head > span{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:#64eda8;
  color:#0a3427;
  font-family:var(--font-mono);
  font-size:0.75rem;
  font-weight:700;
}
.auth-conversation-head div{
  display:flex;
  flex-direction:column;
}
.auth-conversation-head strong{ font-size:0.9rem; }
.auth-conversation-head small{ color:rgba(240,255,248,0.58); font-size:0.72rem; }
.auth-bubble{
  max-width:82%;
  margin-top:0.85rem;
  padding:0.7rem 0.85rem;
  border-radius:9px;
  font-size:0.82rem;
  line-height:1.4;
}
.auth-bubble-in{
  background:rgba(255,255,255,0.10);
  color:#f6fff9;
}
.auth-bubble-out{
  margin-left:auto;
  background:#d9f8e8;
  color:#153629;
}
.auth-conversation-status{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:0.45rem;
  margin-top:0.8rem;
  color:rgba(240,255,248,0.55);
  font-size:0.68rem;
}
.auth-conversation-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#64eda8;
}
.auth-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:100svh;
  padding:8rem clamp(2rem, 7vw, 8rem) 4rem;
  color:#18251f;
  background:#eef2ec;
  border-bottom-left-radius:120px;
}
.auth-card{
  width:100%;
  max-width:430px;
  padding:0;
  color:#18251f;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.auth-card-brand{
  position:relative;
  display:block;
  width:90px;
  height:78px;
  margin-bottom:1.2rem;
  overflow:hidden;
}
.auth-card-brand img{
  position:absolute;
  width:214px;
  max-width:none;
  left:-69px;
  top:-59px;
  filter:brightness(0) saturate(100%) invert(59%) sepia(67%) saturate(480%) hue-rotate(101deg) brightness(91%);
}
.auth-card-label{
  color:#238b63;
  letter-spacing:0.07em;
}
.auth-card h1{
  margin-top:0.55rem;
  color:#15231d;
  font-size:clamp(2rem, 3vw, 2.65rem);
}
.auth-sub{
  max-width:390px;
  color:#627069;
  line-height:1.45;
}
.auth-mode-rail{
  position:absolute;
  z-index:5;
  top:5.25rem;
  left:48%;
  width:174px;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  margin:0;
  padding:0;
  transform:translateX(-100%);
  background:transparent;
  border:0;
  border-radius:0;
}
.auth-mode-rail .auth-tab{
  flex:none;
  min-height:58px;
  padding:0.8rem 1.25rem;
  color:rgba(255,255,255,0.78);
  border-radius:28px 0 0 28px;
  font-size:0.78rem;
  text-align:right;
}
.auth-mode-rail .auth-tab.active{
  color:#173127;
  background:#eef2ec;
}
.auth-form{ margin-top:1.7rem; }
.auth-form label{
  color:#405149;
  font-size:0.78rem;
  font-weight:600;
}
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  margin-top:0.35rem;
  padding:0.72rem 0.1rem;
  color:#15231d;
  background:transparent;
  border:0;
  border-bottom:1px solid #aeb9b3;
  border-radius:0;
}
.auth-form input::placeholder{ color:#8d9993; }
.auth-form input:focus{
  border-bottom-color:#238b63;
  box-shadow:0 2px 0 #238b63;
}
.password-toggle{ color:#5f7168; }
.password-toggle:hover{ color:#1c815b; }
.checkbox{ color:#526159; }
.checkbox input{ accent-color:#238b63; }
.auth-link{ color:#237d5b; font-weight:600; }
.auth-submit{
  width:auto;
  min-width:132px;
  float:right;
  padding:0.78rem 1.7rem;
  color:#f7fff9;
  background:#207d59;
  border-radius:9px;
}
.auth-submit:hover{ background:#176b4b; }
.auth-form::after{
  content:"";
  display:block;
  clear:both;
}
#registerForm:not([hidden]){
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  column-gap:1.25rem;
}
#registerForm > label:nth-child(3){ grid-column:1 / -1; }
#registerForm .auth-submit{
  grid-column:2;
  justify-self:end;
  float:none;
}
#registerForm::after{ display:none; }
.auth-footer-text{
  clear:both;
  padding-top:1.5rem;
  color:#6e7b74;
}
.auth-message{
  color:#9a3437;
  background:#fff3f2;
  border-color:#e8b8b7;
}
.auth-message.success{
  color:#176b4b;
  background:#e6f7ed;
  border-color:#a9d8bd;
}
.auth-loading{ color:#627069; }
.spinner{ border-color:#cbd5cf; border-top-color:#238b63; }

@media (max-width: 980px){
  .auth-shell{ grid-template-columns:42% 58%; }
  .auth-mode-rail{ left:42%; }
  .auth-showcase{ padding-left:3rem; padding-right:3rem; }
  .auth-showcase-copy h1{ font-size:clamp(2.1rem, 5vw, 3.3rem); }
  .auth-conversation{ width:100%; }
}

@media (max-width: 760px){
  .auth-shell{
    display:block;
    min-height:100svh;
    overflow:visible;
  }
  .auth-showcase{
    min-height:auto;
    padding:7rem 1.5rem 3rem;
  }
  .auth-showcase-copy{ max-width:600px; }
  .auth-showcase-copy h1{ font-size:clamp(2.2rem, 10vw, 3.3rem); }
  .auth-conversation{ display:none; }
  .auth-panel{
    min-height:auto;
    padding:4.5rem 1.5rem 3rem;
    border-radius:0;
  }
  .auth-mode-rail{
    top:auto;
    left:50%;
    width:min(360px, calc(100% - 3rem));
    flex-direction:row;
    transform:translate(-50%, -50%);
    padding:0.3rem;
    background:#dfe7e1;
    border-radius:10px;
  }
  .auth-mode-rail .auth-tab{
    flex:1;
    min-height:44px;
    color:#5d6c64;
    border-radius:7px;
    text-align:center;
  }
  .auth-mode-rail .auth-tab.active{
    color:#173127;
    background:#fff;
  }
  .auth-card-brand{ margin-left:auto; margin-right:auto; }
  .auth-card-label,
  .auth-card h1,
  .auth-sub{ text-align:center; }
  #registerForm:not([hidden]){ grid-template-columns:1fr; }
  #registerForm > label:nth-child(3),
  #registerForm .auth-submit{ grid-column:1; }
}

@media (max-width: 480px){
  .auth-showcase{ padding-top:6.5rem; }
  .auth-showcase-copy > p:last-child{ font-size:0.95rem; }
  .auth-panel{ padding-left:1.25rem; padding-right:1.25rem; }
  .auth-card{ padding:0; }
  .auth-row{ align-items:flex-start; gap:0.75rem; }
}

/* Auth palette and distinct registration state */
.auth-page,
.auth-shell{
  background:#05080c;
}
.auth-showcase{
  background:
    radial-gradient(circle at 18% 18%, rgba(31,224,138,0.12), transparent 27%),
    #07110d;
}
.auth-panel{
  color:var(--paper);
  background:#0a0a0e;
  border-left:1px solid rgba(255,255,255,0.07);
  border-bottom-left-radius:0;
  transition:background-color 0.16s ease;
}
.auth-card{
  color:var(--paper);
}
.auth-card h1{ color:var(--paper); }
.auth-sub{ color:rgba(245,245,247,0.62); }
.auth-card-label{ color:var(--accent); }
.auth-mode-rail{
  top:50%;
  transform:translate(-100%, -50%);
}
.auth-mode-rail .auth-tab{
  border-radius:10px 0 0 10px;
  color:rgba(245,245,247,0.68);
}
.auth-mode-rail .auth-tab.active{
  color:var(--paper);
  background:#0a0a0e;
}
.auth-form label{ color:rgba(245,245,247,0.72); }
.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"]{
  padding:0.75rem 0.8rem;
  color:var(--paper);
  background:#131318;
  border:1px solid rgba(255,255,255,0.10);
  border-radius:8px;
}
.auth-form input::placeholder{ color:rgba(245,245,247,0.34); }
.auth-form input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(31,224,138,0.10);
}
.password-toggle{ color:rgba(245,245,247,0.5); }
.password-toggle:hover,
.auth-link{ color:var(--accent); }
.checkbox{ color:rgba(245,245,247,0.6); }
.auth-submit{
  color:#06130c;
  background:var(--accent);
}
.auth-submit:hover{ background:#56eea7; }
.auth-footer-text{ color:rgba(245,245,247,0.48); }
.auth-loading{ color:rgba(245,245,247,0.62); }
.auth-register-preview{
  position:relative;
  z-index:1;
  display:none;
  width:min(460px, 92%);
  margin-top:2rem;
  padding:0;
  list-style:none;
  border-top:1px solid rgba(255,255,255,0.10);
}
.auth-register-preview li{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:0.8rem;
  padding:1rem 0;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.auth-register-preview span{
  color:var(--accent);
  font-family:var(--font-mono);
  font-size:0.76rem;
}
.auth-register-preview strong{
  display:block;
  color:var(--paper);
  font-size:0.92rem;
}
.auth-register-preview p{
  margin-top:0.2rem;
  color:rgba(245,245,247,0.55);
  font-size:0.8rem;
  line-height:1.4;
}
.auth-register-mode .auth-conversation{ display:none; }
.auth-register-mode .auth-register-preview{ display:block; }
.auth-register-mode .auth-showcase{
  background:
    radial-gradient(circle at 74% 68%, rgba(31,224,138,0.10), transparent 30%),
    #05080c;
}
.auth-register-mode .auth-panel{ background:#0d1712; }
.auth-register-mode .auth-card{
  max-width:480px;
  padding:2rem;
  background:#121b17;
  border:0;
  border-radius:10px;
}
.auth-register-mode .auth-mode-rail .auth-tab.active{
  background:#0d1712;
}

@media (max-width: 760px){
  .auth-mode-rail{
    top:auto;
    transform:translate(-50%, -50%);
  }
  .auth-mode-rail .auth-tab,
  .auth-mode-rail .auth-tab.active{
    border-radius:7px;
  }
  .auth-register-mode .auth-card{ padding:1.5rem; }
  .auth-register-preview{ display:none !important; }
}

/* ============================================
   Dashboard
   ============================================ */
.dashboard-page{ background: var(--ink); }

.dash-shell{
  display:flex;
  min-height: 100vh;
}

/* sidebar */
.dash-sidebar{
  width: 240px;
  flex-shrink: 0;
  background: var(--panel);
  border-right: 1px solid var(--line);
  display:flex;
  flex-direction: column;
  padding: 1.6rem 1.2rem;
  position: sticky;
  top: 0;
  height: 100vh;
}

.dash-logo{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  text-decoration: none;
  color: var(--paper);
  padding: 0 0.6rem;
  margin-bottom: 2.4rem;
}

.dash-nav{
  display:flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
}

.dash-nav-item{
  display:flex;
  align-items:center;
  gap: 0.8rem;
  padding: 0.7rem 0.6rem;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease;
}
.dash-nav-item svg{ width: 18px; height: 18px; flex-shrink: 0; }
.dash-nav-item:hover{ background: var(--panel-2); color: var(--paper); }
.dash-nav-item.active{ background: var(--panel-2); color: var(--paper); }
.dash-nav-item.active svg{ color: var(--accent); }

.nav-badge{
  margin-left: auto;
  background: var(--accent);
  color: #06130C;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
}

.dash-logout{
  display:flex;
  align-items:center;
  gap: 0.8rem;
  padding: 0.7rem 0.6rem;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  border-top: 1px solid var(--line);
  margin-top: 1rem;
  padding-top: 1.2rem;
  transition: color 0.15s ease;
}
.dash-logout svg{ width: 18px; height: 18px; }
.dash-logout:hover{ color: var(--paper); }

/* main content */
.dash-main{
  flex: 1;
  min-width: 0;
  padding: 2rem 2.6rem 4rem;
}

.dash-topbar{
  display:flex;
  align-items:center;
  gap: 1rem;
  margin-bottom: 2.2rem;
}
.dash-topbar > div:not(.dash-avatar){ flex: 1; }
.dash-topbar h1{
  font-size: clamp(1.3rem, 2.4vw, 1.6rem);
}
.dash-topbar p{
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 0.3rem;
}

.dash-avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bubble-out);
  color: var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  flex-shrink: 0;
}

.dash-menu-toggle{
  display:none;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  width: 38px; height: 38px;
  align-items:center;
  justify-content:center;
  color: var(--paper);
  cursor:pointer;
  flex-shrink: 0;
}
.dash-menu-toggle svg{ width: 18px; height: 18px; }

/* stat cards */
.dash-stats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.stat-card{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.3rem 1.4rem;
  display:flex;
  flex-direction: column;
  gap: 0.5rem;
}
.stat-label{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value{
  font-family: var(--font-display);
  font-size: 1.9rem;
  font-weight: 600;
}
.stat-delta{ font-size: 0.78rem; }
.stat-delta.up{ color: var(--accent); }
.stat-delta.neutral{ color: var(--muted); }

/* generic panel */
.dash-panel{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.5rem 1.6rem;
}
.panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 1.3rem;
}
.panel-header h2{ font-size: 1.05rem; }
.panel-header .mono{ color: var(--muted); }
.panel-link{
  color: var(--accent);
  text-decoration: none;
  font-size: 0.82rem;
}
.panel-link:hover{ text-decoration: underline; }

/* grid: chart + conversations */
.dash-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.1rem;
  margin-bottom: 1.1rem;
}

.chart-svg{ width: 100%; height: 190px; display:block; }
.chart-labels{
  display:flex;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding: 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.chart-today{ color: var(--paper); font-weight: 600; }

/* conversations list */
.conversation-list{ list-style:none; display:flex; flex-direction:column; gap: 1rem; }
.conversation-list li{
  display:flex;
  align-items:flex-start;
  gap: 0.8rem;
}
.convo-avatar{
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.convo-body{ flex: 1; min-width: 0; }
.convo-body strong{ font-size: 0.9rem; }
.convo-body p{
  color: var(--muted);
  font-size: 0.84rem;
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.convo-meta{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
  flex-shrink: 0;
}
.convo-meta time{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted);
}

.status-pill{
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-pill.resolved{ background: rgba(31,224,138,0.14); color: var(--accent); }
.status-pill.pending{ background: rgba(156,159,194,0.16); color: var(--muted); }

/* appointments table */
.appointments-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.appointments-table th{
  text-align:left;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.appointments-table td{
  padding: 0.85rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.appointments-table tr:last-child td{ border-bottom: none; }

/* responsive */
@media (max-width: 980px){
  .dash-grid{ grid-template-columns: 1fr; }
  .dash-stats{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px){
  .dash-sidebar{
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 30px 0 60px -20px rgba(0,0,0,0.6);
  }
  .dash-sidebar.open{ transform: translateX(0); }
  .dash-main{ padding: 1.4rem 1.2rem 3rem; }
  .dash-menu-toggle{ display:flex; }
  .dash-stats{ grid-template-columns: 1fr 1fr; }
  .appointments-table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* ============================================
   Conversas (inbox)
   ============================================ */
.convo-page{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap: 1.1rem;
  height: calc(100vh - 150px);
  min-height: 480px;
}

.convo-sidebar{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}

.convo-search{
  display:flex;
  align-items:center;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
}
.convo-search svg{ width: 16px; height: 16px; flex-shrink: 0; }
.convo-search input{
  background: none;
  border: none;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.88rem;
  width: 100%;
}
.convo-search input:focus{ outline: none; }
.convo-search input::placeholder{ color: var(--muted); }

.convo-list-full{
  list-style:none;
  overflow-y: auto;
  flex: 1;
}
.convo-list-full li{
  display:flex;
  align-items:flex-start;
  gap: 0.7rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.15s ease;
}
.convo-list-full li:hover{ background: var(--panel-2); }
.convo-list-full li.active{ background: var(--panel-2); border-left: 2px solid var(--accent); }

/* thread panel */
.convo-thread{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  display:flex;
  flex-direction: column;
  overflow: hidden;
}
.thread-header{
  display:flex;
  align-items:center;
  gap: 0.9rem;
  padding: 1.1rem 1.3rem;
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}
.convo-avatar.big{ width: 42px; height: 42px; font-size: 0.85rem; }
.thread-info{ flex:1; display:flex; flex-direction:column; }
.thread-info strong{ font-size: 0.95rem; }
.thread-info .status{ font-size: 0.78rem; color: var(--accent); }

.thread-action{
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  cursor:pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.thread-action:hover{ border-color: var(--accent); color: var(--accent); }

.thread-body{
  flex: 1;
  overflow-y: auto;
  padding: 1.3rem;
  display:flex;
  flex-direction: column;
  gap: 0.7rem;
}
.thread-body .chat-msg{ opacity: 1; transform: none; max-width: 60%; }

.thread-input{
  padding: 1rem 1.3rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.88rem;
  background: var(--panel-2);
}

@media (max-width: 900px){
  .convo-page{ grid-template-columns: 1fr; height: auto; }
  .convo-sidebar{ max-height: 320px; }
  .convo-thread{ min-height: 420px; }
}

/* ============================================
   Agendamentos
   ============================================ */
.new-appointment-btn{
  background: var(--accent);
  color: #06130C;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 0.15s ease;
}
.new-appointment-btn:hover{ filter: brightness(1.08); }

.agenda-tabs{
  display:flex;
  gap: 0.5rem;
  margin-bottom: 1.4rem;
  flex-wrap: wrap;
}
.agenda-tab{
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.agenda-tab:hover{ color: var(--paper); }
.agenda-tab.active{ border-color: var(--accent); color: var(--accent); }

.agenda-group{ margin-bottom: 1.1rem; }

.agenda-list{ list-style:none; display:flex; flex-direction:column; }
.agenda-list li{
  display:flex;
  align-items:center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line);
}
.agenda-list li:last-child{ border-bottom: none; }

.agenda-time{
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  width: 52px;
  flex-shrink: 0;
}
.agenda-info{ flex: 1; display:flex; flex-direction: column; }
.agenda-info strong{ font-size: 0.92rem; }
.agenda-info span{ font-size: 0.82rem; color: var(--muted); }

.agenda-actions{ display:flex; gap: 0.5rem; flex-shrink: 0; }
.mini-btn{
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.mini-btn.confirm:hover{ border-color: var(--accent); color: var(--accent); }
.mini-btn.cancel:hover{ border-color: #E0575A; color: #E0575A; }

@media (max-width: 600px){
  .agenda-list li{ flex-wrap: wrap; }
  .agenda-actions{ width: 100%; justify-content: flex-end; }
}

/* ============================================
   Relatórios
   ============================================ */
.donut-panel{
  display:flex;
  flex-direction: column;
  align-items:center;
  text-align:center;
}
.donut-panel .panel-header{ width: 100%; }

.donut-wrap{
  position: relative;
  width: 150px;
  height: 150px;
  margin: 0.5rem 0 1.4rem;
}
.donut{
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(var(--accent) calc(var(--pct) * 1%), var(--panel-2) 0);
}
.donut::before{
  content:"";
  position:absolute;
  inset: 16px;
  border-radius: 50%;
  background: var(--panel);
}
.donut-label{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
}
.donut-label strong{ font-family: var(--font-display); font-size: 1.4rem; }
.donut-label span{ font-size: 0.78rem; color: var(--muted); }

.donut-legend{
  list-style:none;
  display:flex;
  gap: 1.4rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.dot{ display:inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 0.4rem; }
.dot.accent{ background: var(--accent); }
.dot.muted{ background: var(--panel-2); border: 1px solid var(--line); }

.bar-list{ list-style:none; display:flex; flex-direction:column; gap: 1rem; }
.bar-list li{ display:flex; align-items:center; gap: 1rem; }
.bar-label{ width: 190px; flex-shrink:0; font-size: 0.88rem; color: var(--paper); }
.bar-track{
  flex:1;
  height: 8px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow:hidden;
}
.bar-fill{
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}
.bar-value{
  width: 40px;
  flex-shrink:0;
  text-align:right;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}

@media (max-width: 600px){
  .bar-label{ width: 120px; font-size: 0.8rem; }
}

/* ============================================
   Configurações
   ============================================ */
.settings-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.settings-fields label{
  display:block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}
.settings-fields input{
  width:100%;
  margin-top: 0.4rem;
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.65rem 0.8rem;
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9rem;
}
.settings-fields input:focus{ outline:none; border-color: var(--accent); }
.settings-row{ display:flex; gap: 1rem; }
.settings-row label{ flex: 1; }

.settings-note{ color: var(--muted); font-size: 0.88rem; }

.toggle-list{ display:flex; flex-direction: column; gap: 1.3rem; }
.toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
}
.toggle-row div{ display:flex; flex-direction: column; }
.toggle-row strong{ font-size: 0.9rem; }
.toggle-row span{ font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }

.switch{ position: relative; display:inline-block; width: 42px; height: 24px; flex-shrink:0; }
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer; inset:0;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.slider::before{
  content:"";
  position:absolute;
  height: 16px; width: 16px;
  left: 3px; top: 3px;
  background: var(--muted);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}
.switch input:checked + .slider{ background: rgba(31,224,138,0.18); border-color: var(--accent); }
.switch input:checked + .slider::before{ transform: translateX(18px); background: var(--accent); }

.settings-save{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 1rem;
}
.settings-submit{ width: auto; padding: 0.75rem 1.6rem; }
.settings-success{ color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; }

@media (max-width: 860px){
  .settings-grid{ grid-template-columns: 1fr; }
}

/* ============================================
   Contact redesign
   ============================================ */
.contact{
  position:relative;
  grid-template-columns:minmax(0, 0.82fr) minmax(520px, 1.18fr);
  gap:clamp(3rem, 7vw, 7rem);
  align-items:start;
  max-width:1180px;
  padding-top:6rem;
  padding-bottom:6rem;
  border-top:1px solid var(--line);
}
.contact-text{ padding-top:0.4rem; }
.contact-text h2{
  max-width:470px;
  margin-bottom:1.25rem;
  font-size:clamp(2.1rem, 3.2vw, 3.1rem);
  line-height:1.05;
  letter-spacing:-0.045em;
}
.contact-text p{
  max-width:430px;
  color:rgba(245,245,247,0.62);
  font-size:1.02rem;
  line-height:1.55;
}
.whatsapp-link{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  margin-top:2rem;
  padding-bottom:0.25rem;
  border-bottom:1px solid rgba(31,224,138,0.55);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:0.9rem;
  font-weight:600;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.whatsapp-link:hover{
  color:var(--accent);
  border-bottom-color:var(--accent);
}
.whatsapp-link span{
  color:var(--accent);
  font-size:1.05rem;
}
.contact-form{
  padding:0 0 0 clamp(2rem, 4vw, 4rem);
  background:transparent;
  border:0;
  border-left:1px solid var(--line);
  border-radius:0;
}
#formFields{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:1.1rem 1.25rem;
}
.contact-form-heading{
  grid-column:1 / -1;
  margin-bottom:0.45rem;
}
.contact-form-heading h3{
  color:var(--paper);
  font-size:1.25rem;
}
.contact-form-heading p{
  max-width:470px;
  margin-top:0.35rem;
  color:rgba(245,245,247,0.5);
  font-size:0.85rem;
  line-height:1.45;
}
.contact-form label{
  margin-bottom:0;
  color:rgba(245,245,247,0.72);
  font-size:0.78rem;
  font-weight:600;
}
.contact-form label:nth-of-type(3),
.contact-form label:nth-of-type(4){
  grid-column:1 / -1;
}
.contact-form input,
.contact-form textarea{
  margin-top:0.45rem;
  padding:0.78rem 0.85rem;
  background:#101116;
  border:1px solid rgba(255,255,255,0.11);
  border-radius:8px;
}
.contact-form textarea{ min-height:116px; }
.contact-form input:focus,
.contact-form textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(31,224,138,0.10);
}
.contact-form button{
  grid-column:2;
  justify-self:end;
  width:auto;
  min-width:170px;
  margin-top:0.25rem;
  padding:0.82rem 1.3rem;
  border-radius:8px;
  font-size:0.8rem;
  transition:background-color 0.15s ease;
}
.contact-form button:hover{
  background:#56eea7;
  filter:none;
}

@media (max-width: 800px){
  .contact{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
  .contact-text{ padding-top:0; }
  .contact-form{
    padding-left:0;
    border-left:0;
  }
}
@media (max-width: 560px){
  .contact{
    padding-top:4.5rem;
    padding-bottom:4.5rem;
  }
  .contact-text h2{ font-size:clamp(2.1rem, 11vw, 3rem); }
  #formFields{ grid-template-columns:1fr; }
  .contact-form label:nth-of-type(3),
  .contact-form label:nth-of-type(4),
  .contact-form button{ grid-column:1; }
  .contact-form button{
    width:100%;
    justify-self:stretch;
  }
}