:root{
  --bg:#ffffff;
  --bg-soft:#f4f8ff;
  --bg-tint:#edf4ff;
  --bg-card:rgba(255,255,255,.78);
  --text:#081223;
  --text-soft:#4f647d;
  --text-faint:#7488a1;
  --line:rgba(14,39,78,.10);
  --line-strong:rgba(18,54,111,.16);
  --blue-900:#07172d;
  --blue-800:#0c2452;
  --blue-700:#133975;
  --blue-600:#1e57c8;
  --blue-500:#3d7cff;
  --blue-400:#6aa2ff;
  --slate:#ced8e7;
  --white:#ffffff;
  --shadow-lg:0 32px 100px rgba(10,31,68,.14);
  --shadow-md:0 18px 48px rgba(17,42,79,.11);
  --shadow-sm:0 10px 24px rgba(17,42,79,.08);
  --radius-xl:34px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --container:min(1200px, calc(100% - 32px));
  --transition:280ms cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at top left, rgba(106,162,255,.11), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(39,102,255,.10), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  line-height:1.6;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
body::selection{background:rgba(61,124,255,.18)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
.container{width:var(--container);margin-inline:auto}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{
  left:16px;top:16px;z-index:200;background:#fff;padding:10px 14px;border-radius:12px;
  box-shadow:var(--shadow-sm)
}
.scroll-progress{
  position:fixed;top:0;left:0;z-index:120;height:3px;width:0%;
  background:linear-gradient(90deg, var(--blue-500), var(--blue-400));
  box-shadow:0 0 20px rgba(61,124,255,.35)
}

.site-header{
  position:sticky;top:0;z-index:90;
  backdrop-filter:blur(18px);
  background:rgba(255,255,255,.72);
  border-bottom:1px solid transparent;
  transition:background var(--transition), border-color var(--transition), box-shadow var(--transition)
}
.site-header.scrolled{
  background:rgba(255,255,255,.88);
  border-color:var(--line);
  box-shadow:0 10px 30px rgba(9,31,64,.06)
}
.nav{
  min-height:82px;
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-weight:900;letter-spacing:.18em;font-size:.92rem;color:var(--blue-900)
}
.site-menu{
  display:flex;align-items:center;gap:26px;
  color:var(--text-soft)
}
.site-menu a{
  position:relative;font-weight:600
}
.site-menu a::after{
  content:"";position:absolute;left:0;bottom:-8px;width:100%;height:2px;
  background:linear-gradient(90deg, var(--blue-600), transparent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--transition)
}
.site-menu a:hover::after,
.site-menu a:focus-visible::after{transform:scaleX(1)}
.nav-toggle{
  display:none;background:none;border:0;padding:0;cursor:pointer
}
.nav-toggle span{
  display:block;width:24px;height:2px;background:var(--blue-900);margin:5px 0;border-radius:999px;
  transition:transform var(--transition), opacity var(--transition)
}

.hero{
  position:relative;
  padding:54px 0 30px;
  isolation:isolate;
}
.hero-layout{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  align-items:center;
  gap:34px;
  min-height:calc(100vh - 120px);
}
.hero-grid-pattern{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(19,57,117,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,57,117,.06) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 86%);
  z-index:-2
}
.hero-glow{
  position:absolute;border-radius:999px;filter:blur(26px);pointer-events:none;z-index:-1;
  animation:floatGlow 10s ease-in-out infinite
}
.hero-glow-a{
  width:360px;height:360px;top:80px;right:6%;
  background:radial-gradient(circle, rgba(61,124,255,.22), rgba(61,124,255,0));
}
.hero-glow-b{
  width:280px;height:280px;left:-40px;bottom:10%;
  background:radial-gradient(circle, rgba(25,75,180,.16), rgba(25,75,180,0));
  animation-delay:-3s
}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  margin:0 0 14px;
  font-size:.8rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-600)
}
.eyebrow::before{
  content:"";width:42px;height:1px;background:linear-gradient(90deg, var(--blue-500), transparent)
}
.eyebrow-dark{color:var(--blue-700)}

.hero-copy h1{
  margin:0;
  font-size:clamp(2.8rem, 6vw, 5.6rem);
  line-height:.98;
  max-width:11.4ch;
  letter-spacing:-.05em
}
.hero-text{
  margin:24px 0 0;
  max-width:63ch;
  color:var(--text-soft);
  font-size:1.08rem
}
.hero-actions{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:30px
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:52px;padding:13px 22px;border-radius:999px;
  font-weight:800;transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition)
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{
  background:linear-gradient(135deg, var(--blue-900), var(--blue-600));
  color:#fff;
  box-shadow:0 18px 36px rgba(26,79,191,.24)
}
.btn-secondary{
  background:rgba(255,255,255,.84);
  color:var(--blue-900);
  border:1px solid var(--line-strong);
  box-shadow:var(--shadow-sm)
}
.btn-sm{min-height:44px;padding:10px 16px;font-size:.94rem}

.hero-badges{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:12px;
  padding:0;margin:28px 0 0
}
.hero-badges li{
  padding:10px 14px;border-radius:999px;
  background:rgba(255,255,255,.68);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  color:var(--blue-800);font-weight:700;font-size:.94rem
}
.hero-metrics{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:14px;margin-top:28px;max-width:720px
}
.hero-metrics article{
  padding:18px 18px 16px;border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(245,249,255,.9));
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm)
}
.hero-metrics strong{
  display:block;font-size:2rem;line-height:1;color:var(--blue-900)
}
.hero-metrics span{
  display:block;margin-top:8px;color:var(--text-soft);font-size:.94rem
}

.hero-visual{
  position:relative;
  min-height:620px;
  display:grid;place-items:center
}
.showcase-card{
  position:relative;
  width:min(100%, 560px);
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(243,248,255,.86));
  border:1px solid rgba(20,52,103,.12);
  border-radius:32px;
  box-shadow:var(--shadow-lg);
  padding:20px;
  overflow:hidden;
  transform-style:preserve-3d;
  will-change:transform
}
.showcase-card::before{
  content:"";position:absolute;inset:-1px;
  background:linear-gradient(135deg, rgba(255,255,255,.8), rgba(71,128,255,.1), rgba(255,255,255,0));
  opacity:.9;pointer-events:none
}
.showcase-topbar{
  display:flex;gap:8px;margin-bottom:18px
}
.showcase-topbar span{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg, #dce7f8, #a9c7ff)
}
.showcase-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px
}
.mini-label{
  margin:0;
  text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;font-weight:800;color:var(--text-faint)
}
.showcase-header h2{
  margin:10px 0 0;
  font-size:1.55rem;line-height:1.08;max-width:14ch
}
.status-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);color:var(--blue-900);font-weight:700;
  box-shadow:var(--shadow-sm)
}
.status-dot{
  width:10px;height:10px;border-radius:50%;
  background:linear-gradient(135deg, #31a2ff, #1c53ff);
  box-shadow:0 0 0 6px rgba(49,162,255,.12)
}
.showcase-grid{
  margin-top:24px;
  display:grid;grid-template-columns:repeat(2, 1fr);gap:14px
}
.mini-panel{
  position:relative;
  padding:18px;border-radius:22px;
  background:rgba(255,255,255,.76);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm)
}
.mini-panel strong{
  display:block;margin-top:8px;font-size:1rem;color:var(--blue-900)
}
.mini-panel span{
  display:block;margin-top:10px;color:var(--text-soft);font-size:.92rem
}
.mini-panel-emphasis{
  grid-column:1 / -1;
  background:linear-gradient(135deg, rgba(16,38,83,.96), rgba(30,87,200,.9));
  border-color:transparent
}
.mini-panel-emphasis .mini-label,
.mini-panel-emphasis strong,
.mini-panel-emphasis span{color:#fff}
.signal-line{
  margin-top:18px;
  height:74px;border-radius:22px;
  background:linear-gradient(180deg, rgba(234,242,255,.9), rgba(255,255,255,.88));
  border:1px solid var(--line);
  overflow:hidden;position:relative
}
.signal-line span{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, transparent 0%, rgba(61,124,255,.35) 25%, rgba(61,124,255,.8) 50%, rgba(61,124,255,.35) 75%, transparent 100%);
  clip-path:path("M 0 45 C 60 15, 120 60, 180 34 S 300 14, 360 30 S 480 58, 620 26");
  animation:slideSignal 4s linear infinite
}
.showcase-footer{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:18px
}
.metric-chip{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.72);border:1px solid var(--line);
  color:var(--blue-900);font-weight:700
}
.metric-chip em{
  width:8px;height:8px;border-radius:50%;background:var(--blue-500);display:block;font-style:normal
}
.floating-note{
  position:absolute;
  padding:12px 16px;border-radius:999px;
  background:rgba(255,255,255,.88);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  font-weight:800;color:var(--blue-900);
  animation:floatNote 7s ease-in-out infinite
}
.note-a{top:99%;right:63%}
.note-b{bottom:-6%;left:50%;animation-delay:-2.5s}

.logo-ribbon{
  margin-top:30px;
  display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  padding:16px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm)
}
.logo-ribbon span{
  color:var(--text-soft);
  font-weight:700;
  padding:6px 8px
}
.logo-ribbon span:not(:last-child)::after{
  content:"·";margin-left:12px;color:#b3c2d6
}

.section{padding:108px 0}
.section-tint{background:linear-gradient(180deg, rgba(237,244,255,.55), rgba(255,255,255,0))}
.section-dark{
  position:relative;
  color:#fff;
  background:
    radial-gradient(circle at top left, rgba(61,124,255,.26), transparent 24%),
    linear-gradient(180deg, #07172d 0%, #0b2144 100%);
}
.section-dark::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(180deg, rgba(0,0,0,.55), transparent 86%)
}
.section-head{
  max-width:740px;
  margin:0 auto 40px;
  text-align:center
}
.section-head h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 3.6rem);
  line-height:1.03;
  letter-spacing:-.04em
}
.section-head p{
  margin:18px auto 0;
  color:var(--text-soft);
  font-size:1.04rem
}
.section-head-light p{color:rgba(255,255,255,.76)}
.section-head.narrow{max-width:660px}

.cards-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:18px
}
.service-card{
  position:relative;
  min-height:260px;
  padding:28px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(246,250,255,.9));
  border:1px solid var(--line);
  box-shadow:var(--shadow-md);
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition)
}
.service-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at top right, rgba(61,124,255,.12), transparent 28%);
  pointer-events:none
}
.service-card:hover{
  border-color:rgba(30,87,200,.2);
  box-shadow:0 28px 60px rgba(17,49,99,.14)
}
.icon-chip{
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  background:linear-gradient(135deg, var(--blue-900), var(--blue-600));
  color:#fff;font-weight:900;margin-bottom:22px
}
.service-card h3{margin:0;font-size:1.2rem}
.service-card p{margin:12px 0 0;color:var(--text-soft)}

.solutions-layout{display:grid;gap:34px}
.solutions-shell{
  padding:18px;
  border-radius:32px;
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(245,249,255,.92));
  border:1px solid var(--line);
  box-shadow:var(--shadow-md)
}
.solutions-tabs{
  display:flex;flex-wrap:wrap;gap:10px
}
.tab-button{
  appearance:none;border:0;cursor:pointer;
  padding:12px 16px;border-radius:999px;
  background:rgba(255,255,255,.8);
  border:1px solid var(--line);
  color:var(--text-soft);font-weight:800;
  transition:all var(--transition)
}
.tab-button.active{
  color:#fff;
  background:linear-gradient(135deg, var(--blue-900), var(--blue-600));
  border-color:transparent;
  box-shadow:0 16px 34px rgba(17,60,154,.22)
}
.tab-panels{margin-top:16px}
.tab-panel{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;align-items:start;
  padding:28px;border-radius:24px;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(240,246,255,.85));
  border:1px solid var(--line)
}
.tab-panel h3{
  margin:10px 0 0;
  font-size:1.7rem;line-height:1.08;letter-spacing:-.03em
}
.tab-panel p{margin:14px 0 0;color:var(--text-soft)}
.tab-panel ul{
  margin:0;padding:0;list-style:none;display:grid;gap:12px
}
.tab-panel li{
  position:relative;padding:16px 18px 16px 46px;border-radius:18px;
  background:rgba(255,255,255,.84);border:1px solid var(--line);
  color:var(--blue-900);font-weight:700
}
.tab-panel li::before{
  content:"";position:absolute;left:18px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle, var(--blue-400), var(--blue-600));
  box-shadow:0 0 0 6px rgba(61,124,255,.12)
}

.process-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(4, 1fr);gap:18px
}
.process-card{
  position:relative;
  padding:28px;border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(14px);
  box-shadow:0 18px 44px rgba(0,0,0,.16)
}
.process-card span{
  display:inline-grid;place-items:center;
  width:54px;height:54px;border-radius:16px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  font-weight:900;font-size:1.1rem
}
.process-card h3{margin:20px 0 0;font-size:1.18rem}
.process-card p{margin:12px 0 0;color:rgba(255,255,255,.76)}

.about-layout{
  display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center
}
.about-copy h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 3.4rem);
  line-height:1.04;letter-spacing:-.04em
}
.about-copy p{
  margin:20px 0 0;color:var(--text-soft);max-width:62ch
}
.about-points{
  display:grid;gap:14px;margin-top:24px
}
.about-points article{
  padding:18px 20px;border-radius:22px;
  background:rgba(255,255,255,.84);
  border:1px solid var(--line);box-shadow:var(--shadow-sm)
}
.about-points strong{display:block}
.about-points span{display:block;margin-top:8px;color:var(--text-soft)}

.about-card{
  padding:28px;border-radius:34px;
  background:linear-gradient(135deg, #07172d 0%, #10336f 100%);
  color:#fff;box-shadow:var(--shadow-lg);
  transform-style:preserve-3d
}
.about-card-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px
}
.stack-pulse{
  width:18px;height:18px;border-radius:50%;
  background:radial-gradient(circle, #ffffff, #72b0ff);
  box-shadow:0 0 0 10px rgba(114,176,255,.14), 0 0 32px rgba(114,176,255,.4);
  animation:pulse 2.2s infinite
}
.about-card h3{
  margin:18px 0 0;font-size:1.95rem;line-height:1.06;letter-spacing:-.04em
}
.stack-list{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:24px
}
.stack-list span{
  padding:10px 12px;border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  font-weight:700
}

.cta-section{padding-top:96px}
.cta-shell{
  display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center;
  padding:32px;border-radius:34px;
  background:
    radial-gradient(circle at top right, rgba(61,124,255,.16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(243,248,255,.92));
  border:1px solid var(--line);
  box-shadow:var(--shadow-lg)
}
.cta-shell h2{
  margin:0;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.04;letter-spacing:-.04em
}
.cta-shell p{margin:18px 0 0;color:var(--text-soft)}
.cta-actions{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px
}

.site-footer{
  padding:28px 0 42px;
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.66);
  backdrop-filter:blur(10px)
}
.footer-inner{
  display:flex;justify-content:space-between;gap:24px;align-items:flex-end
}
.footer-brand{margin-bottom:14px}
.site-footer p{margin:0;color:var(--text-soft);max-width:520px}
.footer-links{
  display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px 18px;color:var(--text-soft);font-weight:700
}

.reveal,
.reveal-soft{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 800ms ease, transform 800ms ease
}
.reveal-soft{transition-duration:1000ms}
.reveal.in-view,
.reveal-soft.in-view{
  opacity:1;
  transform:none
}
.floating-card{animation:floatCard 8s ease-in-out infinite}
.tilt-card{transition:transform 160ms ease}

@keyframes floatGlow{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,16px,0) scale(1.06)}
}
@keyframes floatCard{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes floatNote{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
@keyframes pulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(114,176,255,.24), 0 0 22px rgba(114,176,255,.3)}
  70%{transform:scale(1.04);box-shadow:0 0 0 18px rgba(114,176,255,0), 0 0 34px rgba(114,176,255,.42)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(114,176,255,0), 0 0 22px rgba(114,176,255,.3)}
}
@keyframes slideSignal{
  from{transform:translateX(-14%)}
  to{transform:translateX(14%)}
}

@media (max-width: 1120px){
  .hero-layout,
  .about-layout,
  .cta-shell,
  .tab-panel{grid-template-columns:1fr}
  .hero-copy h1{max-width:13ch}
  .hero-visual{min-height:unset}
  .cards-grid{grid-template-columns:repeat(2, 1fr)}
  .process-grid{grid-template-columns:repeat(2, 1fr)}
  .cta-actions{justify-content:flex-start}
}
@media (max-width: 840px){
  .nav-toggle{display:block}
  .site-menu{
    position:fixed;inset:82px 16px auto 16px;
    padding:16px;border-radius:24px;
    background:rgba(255,255,255,.94);
    border:1px solid var(--line);box-shadow:var(--shadow-md);
    display:grid;gap:10px;
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--transition), transform var(--transition)
  }
  .site-menu.open{
    transform:none;opacity:1;pointer-events:auto
  }
  .hero{padding-top:34px}
  .hero-layout{min-height:auto}
  .hero-metrics{grid-template-columns:1fr}
  .cards-grid,
  .process-grid{grid-template-columns:1fr}
  .footer-inner{flex-direction:column;align-items:flex-start}
  .footer-links{justify-content:flex-start}
  .logo-ribbon{border-radius:28px}
}
@media (max-width: 640px){
  .section{padding:84px 0}
  .hero-copy h1{font-size:clamp(2.45rem, 14vw, 4.2rem)}
  .hero-text{font-size:1rem}
  .showcase-card{padding:16px;border-radius:26px}
  .showcase-grid{grid-template-columns:1fr}
  .hero-badges{gap:10px}
  .tab-panel{padding:20px}
  .cta-shell{padding:24px}
  .site-header .brand span{letter-spacing:.14em;font-size:.86rem}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}


/* ---------------------------------
   Demos optimizados
--------------------------------- */
.demo2-sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}
.demo2-layout{display:grid;gap:32px}
.demo2-shell{
  padding:20px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(245,249,255,.96));
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  contain:layout paint
}
.demo2-shell-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px
}
.demo2-shell-head h3{
  margin:10px 0 0;
  font-size:1.6rem;
  line-height:1.08;
  letter-spacing:-.03em
}
.demo2-shell-head p{
  margin:12px 0 0;
  max-width:66ch;
  color:var(--text-soft)
}
.demo2-nav{display:flex;gap:10px;flex-shrink:0}
.demo2-arrow{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--blue-900);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition)
}
.demo2-arrow:hover{
  transform:translateY(-1px);
  border-color:rgba(30,87,200,.24)
}
.demo2-stage{
  overflow:hidden;
  border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(241,247,255,.84));
  transition:height 320ms ease
}
.demo2-track{
  display:flex;
  transition:transform 420ms cubic-bezier(.22,.61,.36,1)
}
.demo2-slide{
  min-width:100%;
  padding:22px
}
.demo2-grid{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:20px;
  align-items:stretch
}
.demo2-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0
}
.demo2-copy h4{
  margin:10px 0 0;
  font-size:1.45rem;
  line-height:1.08;
  letter-spacing:-.03em
}
.demo2-copy p{
  margin:14px 0 0;
  color:var(--text-soft)
}
.demo2-chip-list,
.demo2-chat-suggestions,
.analytics2-questions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px
}
.demo2-chip,
.demo2-chat-suggestions button,
.analytics2-questions button{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--blue-900);
  padding:10px 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer;
  transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition)
}
.demo2-chip:hover,
.demo2-chip.active,
.demo2-chat-suggestions button:hover,
.analytics2-questions button:hover{
  color:#fff;
  background:linear-gradient(135deg, var(--blue-900), var(--blue-600));
  border-color:transparent
}
.demo2-benefits{
  list-style:none;
  padding:0;
  margin:18px 0 0;
  display:grid;
  gap:10px
}
.demo2-benefits li{
  position:relative;
  padding:13px 14px 13px 42px;
  border-radius:16px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--blue-900);
  font-weight:700
}
.demo2-benefits li::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  border-radius:50%;
  background:radial-gradient(circle, var(--blue-400), var(--blue-600))
}
.demo2-card{
  min-width:0;
  border-radius:24px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-sm)
}
.demo2-footer{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.demo2-dots{
  display:flex;
  align-items:center;
  gap:10px
}
.demo2-dots button{
  width:12px;
  height:12px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#c7d4e6;
  cursor:pointer;
  transition:width var(--transition), background var(--transition)
}
.demo2-dots button.active{
  width:32px;
  background:linear-gradient(90deg, var(--blue-900), var(--blue-500))
}
.demo2-inline-note{
  margin:0;
  color:var(--text-soft);
  font-size:.92rem
}
.demo2-soft-btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color:var(--blue-900);
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  font-weight:800;
  cursor:pointer
}

/* Chat */
.demo2-chat-card{
  padding:16px;
  background:linear-gradient(180deg, #0b2144 0%, #10336f 100%);
  color:#fff
}
.demo2-chat-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px
}
.demo2-chat-topbar strong{display:block}
.demo2-chat-topbar span{display:block;color:rgba(255,255,255,.74);font-size:.92rem}
.demo2-chat-topbar .demo2-soft-btn{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
  color:#fff
}
.demo2-chat-messages{
  height:280px;
  max-height:280px;
  overflow-y:auto;
  padding:6px 2px 6px 0;
  display:flex;
  flex-direction:column;
  gap:10px
}
.demo2-chat-message{
  display:flex;
  flex-direction:column;
  max-width:88%
}
.demo2-chat-message-user{align-self:flex-end; align-items:flex-end}
.demo2-chat-message-bot{align-self:flex-start}
.demo2-chat-message-typing{align-self:flex-start}
.demo2-chat-bubble{
  padding:13px 14px;
  border-radius:16px;
  line-height:1.45
}
.demo2-chat-message-user .demo2-chat-bubble{
  background:linear-gradient(135deg, #3d7cff, #6aa2ff);
  color:#fff;
  border-bottom-right-radius:6px
}
.demo2-chat-message-bot .demo2-chat-bubble{
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  border-bottom-left-radius:6px
}
.demo2-chat-meta{
  margin-top:6px;
  font-size:.78rem;
  color:rgba(255,255,255,.66)
}
.demo2-chat-form{
  margin-top:14px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:10px
}
.demo2-chat-form input{
  width:100%;
  min-width:0;
  min-height:50px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:0 14px;
  outline:none
}
.demo2-chat-form input::placeholder{color:rgba(255,255,255,.56)}
.demo2-chat-form input:disabled,
.demo2-chat-form button:disabled,
.demo2-chat-suggestions button:disabled{
  opacity:.58;
  cursor:not-allowed
}
.demo2-typing{
  display:inline-flex;
  align-items:center;
  gap:7px
}
.demo2-typing span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#d9e6ff;
  animation:demo2Typing 1s infinite ease-in-out
}
.demo2-typing span:nth-child(2){animation-delay:.12s}
.demo2-typing span:nth-child(3){animation-delay:.24s}

/* Analytics */
.analytics2-card{
  padding:18px;
  display:grid;
  gap:16px
}
.analytics2-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.analytics2-topbar strong{
  display:block;
  color:var(--blue-900)
}
.analytics2-topbar span{
  display:block;
  margin-top:6px;
  color:var(--text-soft)
}
.analytics2-kpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px
}
.analytics2-kpis article{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff
}
.analytics2-kpis span{
  display:block;
  color:var(--text-soft);
  font-size:.9rem
}
.analytics2-kpis strong{
  display:block;
  margin-top:8px;
  color:var(--blue-900);
  font-size:1.5rem;
  line-height:1
}
.analytics2-bars{
  display:grid;
  gap:12px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff
}
.analytics2-bar-row{
  display:grid;
  grid-template-columns:88px 1fr;
  gap:12px;
  align-items:center
}
.analytics2-bar-row span{
  color:var(--blue-900);
  font-weight:700
}
.analytics2-bar{
  height:12px;
  border-radius:999px;
  background:#e7eef8;
  overflow:hidden
}
.analytics2-bar i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--blue-900), var(--blue-500));
  transition:width 360ms ease
}
.analytics2-insight{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(11,33,68,.96), rgba(16,53,111,.92));
  color:#fff
}
.analytics2-insight h5{
  margin:10px 0 0;
  font-size:1.1rem;
  line-height:1.2
}
.analytics2-insight p{
  margin:12px 0 0;
  color:rgba(255,255,255,.76)
}

/* Logistics */
.logistics2-card{
  padding:16px;
  display:grid;
  gap:14px
}
.logistics2-kpis{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px
}
.logistics2-kpis article{
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff
}
.logistics2-kpis span{
  display:block;
  color:var(--text-soft);
  font-size:.9rem
}
.logistics2-kpis strong{
  display:block;
  margin-top:8px;
  color:var(--blue-900);
  font-size:1.45rem;
  line-height:1
}
.logistics2-feed{
  margin-top:18px;
  display:grid;
  gap:10px
}
.logistics2-feed-item{
  padding:13px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--text-soft)
}
.logistics2-feed-item.active{
  color:var(--blue-900);
  border-color:rgba(30,87,200,.24)
}
.logistics2-map-shell{
  position:relative;
  min-height:360px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(237,244,255,.88), rgba(255,255,255,.92))
}
.logistics2-map{
  width:100%;
  height:360px
}
.logistics2-map-state{
  position:absolute;
  inset:auto 16px 16px 16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(11,33,68,.9);
  color:#fff;
  font-size:.92rem
}

/* Embedded assistant */
.embed2-card{
  padding:16px;
  display:grid;
  gap:16px
}
.embed2-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px
}
.embed2-topbar strong{
  display:block;
  color:var(--blue-900)
}
.embed2-topbar span{
  display:block;
  margin-top:6px;
  color:var(--text-soft)
}
.embed2-fab{
  appearance:none;
  border:0;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, var(--blue-900), var(--blue-500))
}
.embed2-body{
  display:grid;
  grid-template-columns:minmax(0,.98fr) minmax(0,.92fr);
  gap:16px;
  align-items:start
}
.embed2-main{display:grid;gap:12px}
.embed2-thread{
  min-height:320px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  display:grid;
  gap:10px
}
.embed2-message{
  max-width:86%;
  padding:13px 14px;
  border-radius:16px
}
.embed2-message p{
  margin:8px 0 0;
  line-height:1.45
}
.embed2-message.incoming{
  background:#eef4ff;
  color:var(--blue-900);
  border-bottom-left-radius:8px
}
.embed2-message.outgoing{
  margin-left:auto;
  background:linear-gradient(135deg, var(--blue-900), var(--blue-600));
  color:#fff;
  border-bottom-right-radius:8px
}
.embed2-author{
  display:block;
  font-size:.78rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase
}
.embed2-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  background:#fff
}
.embed2-panel{
  min-height:320px;
  padding:16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(11,33,68,.96), rgba(16,53,111,.92));
  color:#fff;
  transition:opacity 240ms ease, transform 240ms ease
}
.embed2-panel:not(.is-visible){
  opacity:.62;
  transform:translateY(6px)
}
.embed2-panel-head strong{display:block}
.embed2-panel-head span{
  display:block;
  margin-top:6px;
  color:rgba(255,255,255,.72)
}
.embed2-summary-card{
  margin-top:16px;
  padding:16px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12)
}
.embed2-summary-card h5{
  margin:10px 0 0;
  font-size:1.06rem;
  line-height:1.2
}
.embed2-summary-card p{
  margin:12px 0 0;
  color:rgba(255,255,255,.76)
}
.embed2-actions{
  margin-top:16px;
  display:grid;
  gap:10px
}
.embed2-actions button{
  appearance:none;
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.08);
  color:#fff;
  padding:13px 14px;
  border-radius:14px;
  font-weight:800;
  cursor:pointer
}
.embed2-actions button:hover{
  background:rgba(255,255,255,.14)
}

/* Vision */
.vision2-card{
  padding:16px;
  display:grid;
  gap:14px
}
.vision2-frame{
  position:relative;
  min-height:360px;
  border-radius:20px;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(230,238,248,.95), rgba(210,225,244,.9)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 28px, rgba(237,244,255,.12) 28px 56px)
}
.vision2-placeholder{
  position:absolute;
  inset:18px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px;
  border-radius:18px;
  background:
    linear-gradient(180deg, rgba(6,18,34,.08), rgba(6,18,34,.16)),
    radial-gradient(circle at top right, rgba(61,124,255,.22), transparent 30%);
  color:var(--blue-900)
}
.vision2-placeholder strong{display:block}
.vision2-placeholder span{
  display:block;
  margin-top:8px;
  max-width:34ch;
  color:var(--text-soft)
}
.vision2-overlays{
  position:absolute;
  inset:0;
  pointer-events:none
}
.vision2-box{
  position:absolute;
  border-radius:14px;
  border:2px solid #ef476f;
  background:rgba(239,71,111,.10);
  animation:visionPulse 2.2s ease-in-out infinite
}
.vision2-box.warning{
  border-color:#ff9f1c;
  background:rgba(255,159,28,.10)
}
.vision2-box.success{
  border-color:#1aa36f;
  background:rgba(26,163,111,.10)
}
.vision2-tag{
  position:absolute;
  left:10px;
  top:10px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(6,18,34,.82);
  color:#fff;
  font-size:.78rem;
  font-weight:800
}
.vision2-summary{
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  gap:16px;
  align-items:start
}
.vision2-summary h5{
  margin:10px 0 0;
  font-size:1.08rem;
  color:var(--blue-900)
}
.vision2-summary p{
  margin:12px 0 0;
  color:var(--text-soft)
}
.vision2-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px
}
.vision2-list li{
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--blue-900);
  font-weight:700
}

@keyframes demo2Typing{
  0%, 80%, 100%{transform:scale(.8); opacity:.55}
  40%{transform:scale(1); opacity:1}
}
@keyframes visionPulse{
  0%, 100%{transform:scale(1)}
  50%{transform:scale(1.01)}
}

@media (max-width: 1120px){
  .demo2-grid,
  .embed2-body,
  .vision2-summary{grid-template-columns:1fr}
  .demo2-stage{height:auto !important}
}
@media (max-width: 840px){
  .demo2-shell{padding:16px}
  .demo2-slide{padding:16px}
  .demo2-shell-head,
  .demo2-footer,
  .analytics2-topbar,
  .embed2-topbar,
  .embed2-footer{flex-direction:column; align-items:flex-start}
  .analytics2-kpis,
  .logistics2-kpis{grid-template-columns:1fr}
  .demo2-chat-form{grid-template-columns:1fr}
  .demo2-chat-form button{width:100%}
  .logistics2-map,
  .logistics2-map-shell,
  .vision2-frame{min-height:300px; height:300px}
}
@media (prefers-reduced-motion: reduce){
  .demo2-track,
  .demo2-stage,
  .analytics2-bar i,
  .vision2-box{transition:none; animation:none}
}