:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#f7f9fc;
  --surface-soft-2:#eef2ff;
  --surface-brand:#f3f2ff;
  --text:#0f172a;
  --muted:#5b6475;
  --line:#e6edf7;
  --line-strong:#d9e4f4;
  --brand:#5B57FF;
  --brand-dark:#18193F;
  --brand-soft:#eeedff;
  --brand-soft-2:#f6f4ff;
  --accent:#0ea5a5;
  --success:#0f9f68;
  --warning:#f59e0b;
  --danger:#ef476f;
  --shadow:0 18px 45px rgba(15,23,42,.08);
  --shadow-soft:0 10px 30px rgba(15,23,42,.05);
  --radius:22px;
  --radius-lg:28px;
  --max:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(circle at 10% 10%, rgba(91,87,255,.08), transparent 24%),
    radial-gradient(circle at 90% 10%, rgba(52,109,255,.05), transparent 24%),
    linear-gradient(180deg,#ffffff 0%, #fbfdff 100%);
  color:var(--text);
  line-height:1.6;
}
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-size:38px 38px;
  background-image:
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
  z-index:-1;
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button,input,textarea{font:inherit}
.container{width:min(calc(100% - 32px), var(--max));margin-inline:auto}

.topbar{background:var(--brand-dark);color:#dde4ff;font-size:14px}
.topbar .inner,.nav .inner,.hero-grid,.grid-2,.grid-3,.grid-4,.feature-grid,.steps-grid,.proof-grid,.pricing-grid,.faq-grid,.footer-grid,.seo-grid,.legal-grid,.stat-grid{
  display:grid;
  gap:24px;
}
.topbar .inner{min-height:42px;grid-template-columns:1fr auto;align-items:center}

.nav-wrap{position:sticky;top:0;z-index:50;padding:16px 16px 0}
.nav{
  width:min(1120px,100%);
  margin:0 auto;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border:1px solid var(--line-strong);
  border-radius:20px;
  box-shadow:var(--shadow);
}
.nav .inner{min-height:78px;grid-template-columns:auto 1fr auto;align-items:center;padding:0 22px}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;letter-spacing:-.03em}
.brand-logo{width:42px;height:42px;border-radius:12px;object-fit:contain;background:#fff;padding:6px;box-shadow:0 12px 25px rgba(91,87,255,.16)}
.brand small{color:#64748b;font-weight:800}
.menu{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.menu a{padding:10px 14px;border-radius:12px;color:#556277;font-size:14px;font-weight:800}
.menu a:hover{background:var(--surface-soft);color:var(--text)}
.actions{display:flex;align-items:center;gap:12px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 18px;border-radius:14px;font-weight:800;
  border:1px solid transparent;cursor:pointer;transition:.18s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:linear-gradient(135deg,var(--brand),#776dff);color:#fff;box-shadow:0 14px 28px rgba(91,87,255,.22)}
.btn-secondary{background:#fff;color:var(--text);border-color:var(--line-strong)}
.btn-dark{background:var(--brand-dark);color:#fff}

.hero{padding:152px 0 80px}
.hero-grid{grid-template-columns:1.02fr .98fr;align-items:center}
.section{padding:90px 0}
.section-tight{padding:56px 0}
.page-hero{padding:78px 0 24px}
.section-alt{background:linear-gradient(180deg,#f7f9fc 0%, #ffffff 100%);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-brand-soft{background:linear-gradient(180deg,#f3f2ff 0%, #fbfdff 100%);border-top:1px solid #e7e4ff;border-bottom:1px solid #e7e4ff}
.section-accent-soft{background:linear-gradient(180deg,#f4fbfb 0%, #ffffff 100%);border-top:1px solid #ddf4f1;border-bottom:1px solid #ddf4f1}

.kicker{
  display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;
  background:#ecf3ff;color:var(--brand);border:1px solid #d8e5ff;font-size:13px;font-weight:900;margin-bottom:22px
}
.kicker .dot{width:8px;height:8px;border-radius:999px;background:var(--brand)}
.section-label{display:inline-block;margin-bottom:12px;color:#64748b;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.08em}

h1,h2,h3{line-height:1.03;letter-spacing:-.045em;margin:0 0 16px}
h1{font-size:clamp(46px,7vw,80px)}
h2{font-size:clamp(32px,4vw,54px)}
h3{font-size:clamp(20px,3vw,28px)}
p{margin:0 0 16px;color:var(--muted);font-size:18px}

.highlight{background:linear-gradient(120deg,rgba(91,87,255,.18),rgba(14,165,165,.12));padding:0 .12em;border-radius:10px}

.surface-card,.hero-card,.feature-card,.proof-card,.faq-card,.price-card,.legal-card,.notice,.cta-band,.widget-demo,.logo-pill,.stat-card,.article-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-soft)
}
.surface-card,.hero-card,.feature-card,.proof-card,.faq-card,.price-card,.legal-card,.notice,.cta-band,.stat-card,.article-card{padding:28px}
.hero-card{
  position:relative;border-radius:var(--radius-lg);
  background:linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
  box-shadow:var(--shadow)
}
.hero-card::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--radius-lg);padding:1px;
  background:linear-gradient(135deg,rgba(91,87,255,.24),rgba(124,58,237,.18),rgba(14,165,165,.14));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.mock-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;position:relative;z-index:1}
.window-dots{display:flex;gap:8px}
.window-dots span{width:10px;height:10px;border-radius:999px;background:#cbd5e1}
.chat{display:grid;gap:12px;position:relative;z-index:1}
.msg{max-width:86%;padding:14px 16px;border-radius:18px;font-size:14px;line-height:1.45}
.msg.bot{background:#eef4ff;border:1px solid #dbe8ff;border-top-left-radius:8px}
.msg.user{justify-self:end;background:#ebfbf9;border:1px solid #ccf2ee;border-top-right-radius:8px}
.reply{display:flex;gap:10px;margin-top:14px;position:relative;z-index:1}
.reply input,.chat-input input,.field{
  flex:1;min-height:48px;border-radius:14px;border:1px solid var(--line-strong);background:#fff;color:var(--text);padding:0 14px
}

.hero-mascot-band{
  margin-top:28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;border-radius:22px;background:linear-gradient(135deg,#ffffff 0%,#f4f7ff 100%);
  border:1px solid var(--line);box-shadow:var(--shadow-soft);max-width:720px
}
.hero-mascot-avatars{display:flex;align-items:center}
.hero-mascot-avatars img{width:54px;height:54px;object-fit:contain;background:#fff;padding:8px;border-radius:999px;border:1px solid var(--line);box-shadow:0 10px 22px rgba(91,87,255,.10)}
.hero-mascot-avatars img + img{margin-left:-12px}
.hero-mascot-copy strong{display:block;font-size:18px;letter-spacing:-.03em;color:#0f172a}
.hero-mascot-copy span{display:block;color:#64748b;font-size:14px;font-weight:700}

.rating,.badge-strip,.inline-pills{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stars{color:var(--warning);letter-spacing:.06em}
.trust-pill,.info-pill{
  padding:10px 14px;border-radius:999px;background:#f8fbff;border:1px solid var(--line);
  color:#475569;font-size:14px;font-weight:800
}

.stat-grid{grid-template-columns:repeat(4,1fr)}
.stat-card{text-align:center;background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)}
.stat-card strong{display:block;font-size:34px;letter-spacing:-.05em;color:var(--brand-dark)}
.stat-card span{color:#64748b;font-weight:700}

.grid-2{grid-template-columns:1fr 1fr;align-items:start}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.feature-grid{grid-template-columns:repeat(3,1fr)}
.steps-grid{grid-template-columns:repeat(4,1fr)}
.proof-grid{grid-template-columns:repeat(3,1fr)}
.pricing-grid{grid-template-columns:repeat(3,1fr)}
.faq-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1.2fr .8fr .8fr .8fr}
.seo-grid{grid-template-columns:repeat(3,1fr)}
.legal-grid{grid-template-columns:repeat(3,1fr)}

.logo-pill{min-height:90px;display:grid;place-items:center;text-align:center;font-weight:900;color:#334155}
.icon-box{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);border:1px solid #dfdcff;margin-bottom:16px;color:var(--brand);font-size:22px}
.step-row{display:flex;gap:14px;align-items:flex-start}
.step-num{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--brand),#7c6cff);flex:0 0 auto}

.checks,.article-list{display:grid;gap:10px;padding:0;margin:0;list-style:none}
.checks li,.article-list li{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;color:#334155}
.checks li::before,.article-list li::before{
  content:"✓";width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:#e8fbf6;color:var(--success);font-weight:900
}

.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.compare-box{padding:24px;border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft)}
.compare-box.bad{border-color:#f5d4db;background:#fff8fa}
.compare-box.good{border-color:#d2f2e8;background:#f7fffc}
.compare-box ul{display:grid;gap:10px;list-style:none;padding:0;margin:0}
.compare-box li{display:grid;grid-template-columns:24px 1fr;gap:12px;color:#334155}
.compare-box.bad li::before{content:"−";width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:#ffe7ed;color:var(--danger);font-weight:900}
.compare-box.good li::before{content:"+";width:24px;height:24px;border-radius:999px;display:grid;place-items:center;background:#e8fbf6;color:var(--success);font-weight:900}

.price{font-size:48px;font-weight:900;letter-spacing:-.06em;color:var(--brand-dark)}
.popular{border-color:#d7d1ff;box-shadow:0 0 0 1px #ddd8ff,0 18px 40px rgba(91,87,255,.10)}
.popular-badge{display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:0 12px;border-radius:999px;background:linear-gradient(135deg,var(--brand),#7c6cff);color:#fff;font-size:12px;font-weight:900;text-transform:uppercase}
.money-back{margin-top:22px;padding:18px 20px;border-radius:18px;background:#fff9ea;border:1px solid #fde6a8;color:#8a5b00;font-weight:800}

.faq-trigger{width:100%;background:none;border:none;padding:0;color:var(--text);display:flex;justify-content:space-between;gap:14px;text-align:left;font-weight:800;font-size:17px;cursor:pointer}
.faq-content{display:none;padding-top:14px;color:var(--muted)}
.faq-card.open .faq-content{display:block}

.cta-band{background:linear-gradient(135deg,#eeedff 0%,#f5fbff 100%);border-color:#ddd8ff}
.cta-band strong{color:var(--brand-dark)}
.cta-inline{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}

.article-card{transition:.18s ease}
.article-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

.footer{padding:42px 0 54px;border-top:1px solid var(--line);margin-top:36px;background:#fff}
.footer-links{display:grid;gap:10px}
.small{font-size:14px}
.field-label{display:block;margin-bottom:8px;color:var(--text);font-weight:800}
textarea.field{min-height:150px;padding:14px}

.chat-shell{position:fixed;right:18px;bottom:18px;z-index:60;width:min(390px,calc(100vw - 28px))}
.chat-launcher{margin-left:auto;display:flex;align-items:center;gap:12px;min-height:62px;padding:10px 14px;border:none;border-radius:999px;background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);color:#fff;box-shadow:0 18px 45px rgba(24,25,63,.20);cursor:pointer}
.chat-launcher img{width:42px;height:42px;object-fit:contain;border-radius:999px;background:#fff;padding:6px;box-shadow:0 10px 24px rgba(255,255,255,.22)}
.chat-launcher-text{display:grid;text-align:left;line-height:1.1}
.chat-launcher-text strong{font-size:14px;letter-spacing:-.02em}
.chat-launcher-text span{font-size:12px;opacity:.9}
.chat-panel{margin-top:12px;display:none;border-radius:22px;overflow:hidden}
.chat-shell.is-open .chat-panel{display:block}
.chat-shell.is-open .chat-launcher{display:none}

.widget-demo{padding:0;box-shadow:0 22px 48px rgba(15,23,42,.14)}
.widget-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line);background:#f7faff}
.widget-header-main{display:flex;align-items:center;gap:12px}
.widget-avatar{width:44px;height:44px;object-fit:contain;border-radius:999px;background:#fff;padding:7px;border:1px solid var(--line);box-shadow:0 10px 20px rgba(91,87,255,.12)}
.widget-close{width:38px;height:38px;border-radius:999px;border:1px solid var(--line);background:#fff;color:#334155;font-weight:900;cursor:pointer}
.widget-close:hover{background:#f8fbff}
.chat-area{padding:18px;display:grid;gap:12px}
.chat-prompt-pills{display:flex;flex-wrap:wrap;gap:8px;padding:0 18px 18px}
.chat-prompt{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:#f8fbff;color:#334155;font-size:12px;font-weight:800;cursor:pointer}
.chat-input{border-top:1px solid var(--line);padding:14px;display:flex;gap:10px}

@media (max-width:1000px){
  .nav .inner,.hero-grid,.grid-2,.grid-3,.grid-4,.feature-grid,.steps-grid,.proof-grid,.pricing-grid,.footer-grid,.seo-grid,.legal-grid,.stat-grid{grid-template-columns:1fr 1fr}
  .menu{justify-content:flex-start}
}
@media (max-width:760px){
  .topbar .inner,.nav .inner,.hero-grid,.grid-2,.grid-3,.grid-4,.feature-grid,.steps-grid,.proof-grid,.pricing-grid,.footer-grid,.seo-grid,.legal-grid,.stat-grid,.compare-grid{grid-template-columns:1fr}
  h1{font-size:48px}
  p{font-size:17px}
  .chat-shell{right:14px;left:14px;width:auto}
  .hero-mascot-band{align-items:flex-start;flex-direction:column}
}


/* spinner hero ad */
@keyframes slow-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes reverse-spin {
  from { transform: rotate(360deg); }
  to { transform: rotate(0deg); }
}
.spinner-ad{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:28px;
  align-items:center;
  padding:28px;
  border-radius:28px;
  background:linear-gradient(135deg,#f1f0ff 0%,#ffffff 38%,#eef8ff 100%);
  border:1px solid #ddd8ff;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}
.spinner-copy h2{
  margin-bottom:14px;
}
.spinner-copy p{
  max-width:720px;
}
.spinner-stage{
  position:relative;
  min-height:360px;
  border-radius:26px;
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(91,87,255,.15), transparent 24%),
    radial-gradient(circle at 70% 70%, rgba(24,25,63,.10), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--line);
}
.spinner-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.04) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(circle at center, #000 46%, transparent 90%);
}
.spinner-orbit{
  position:absolute;
  inset:50%;
  border-radius:999px;
  border:1px dashed rgba(91,87,255,.24);
  transform:translate(-50%,-50%);
}
.spinner-orbit.one{
  width:290px;
  height:290px;
  animation:slow-spin 18s linear infinite;
}
.spinner-orbit.two{
  width:220px;
  height:220px;
  animation:reverse-spin 14s linear infinite;
}
.spinner-core{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:118px;
  height:118px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  box-shadow:0 24px 45px rgba(91,87,255,.25);
}
.spinner-core img{
  width:70px;
  height:70px;
  object-fit:contain;
  background:#fff;
  border-radius:999px;
  padding:10px;
}
.spinner-badge{
  position:absolute;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px solid var(--line);
  color:#334155;
  font-size:13px;
  font-weight:900;
  box-shadow:var(--shadow-soft);
}
.spinner-badge.purple{
  background:#f4f1ff;
  border-color:#ddd8ff;
  color:#3d36b8;
}
.spinner-badge.teal{
  background:#eefcf9;
  border-color:#cdeee6;
  color:#0f766e;
}
.spinner-badge.dark{
  background:#18193F;
  border-color:#18193F;
  color:#fff;
}
.spinner-badge.one{ top:24px; left:28px; }
.spinner-badge.two{ top:42px; right:28px; }
.spinner-badge.three{ top:50%; left:22px; transform:translateY(-50%); }
.spinner-badge.four{ top:50%; right:22px; transform:translateY(-50%); }
.spinner-badge.five{ bottom:28px; left:34px; }
.spinner-badge.six{ bottom:22px; right:34px; }
.spinner-mini-proof{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.spinner-mini-proof span{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:800;
}
@media (max-width:1000px){
  .spinner-ad{
    grid-template-columns:1fr;
  }
}


/* premium color refresh */
.topbar{
  background:linear-gradient(135deg,#18193F 0%,#2b2d74 42%,#5B57FF 100%);
  color:#eef2ff;
}
.topbar .inner{
  gap:12px;
}
.topbar .inner div:last-child{
  justify-self:end;
  font-weight:800;
  color:#ffffff;
}

.surface-card,
.feature-card,
.proof-card,
.price-card,
.notice,
.article-card,
.legal-card,
.stat-card{
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,249,255,1) 100%);
  border:1px solid #e1e7fb;
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}

.surface-card,
.feature-card,
.proof-card,
.price-card,
.notice,
.article-card{
  position:relative;
  overflow:hidden;
}

.surface-card::before,
.feature-card::before,
.proof-card::before,
.price-card::before,
.notice::before,
.article-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#5B57FF 0%,#7a6bff 55%,#0ea5a5 100%);
}

.feature-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(91,87,255,.09), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f7f6ff 100%);
}

.proof-card{
  background:
    radial-gradient(circle at 0% 0%, rgba(91,87,255,.08), transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#f9fbff 100%);
}

.price-card{
  background:
    radial-gradient(circle at 100% 0%, rgba(91,87,255,.10), transparent 30%),
    linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%);
}

.notice{
  background:
    radial-gradient(circle at 100% 0%, rgba(14,165,165,.08), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#f6fffd 100%);
}

.article-card{
  display:block;
  background:
    radial-gradient(circle at 100% 0%, rgba(91,87,255,.08), transparent 26%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
}

.cta-band{
  background:
    radial-gradient(circle at 100% 0%, rgba(91,87,255,.12), transparent 30%),
    linear-gradient(135deg,#eeedff 0%,#f6f4ff 48%,#f5fbff 100%);
  border-color:#d9d3ff;
  box-shadow:0 18px 40px rgba(91,87,255,.08);
}

h2{
  color:#18193F;
}

.btn-primary{
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 62%,#7067ff 100%);
}

.btn-secondary:hover{
  border-color:#cfc8ff;
  background:#f7f5ff;
}

.final-bottom-cta{
  background:
    radial-gradient(circle at 15% 10%, rgba(91,87,255,.12), transparent 22%),
    radial-gradient(circle at 85% 90%, rgba(14,165,165,.08), transparent 22%),
    linear-gradient(135deg,#18193F 0%,#25276c 45%,#5B57FF 100%);
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.final-bottom-cta .cta-wrap{
  padding:34px;
  border-radius:28px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 18px 40px rgba(8,15,48,.24);
}
.final-bottom-cta .section-label{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:#e9eaff;
}
.final-bottom-cta h2,
.final-bottom-cta p,
.final-bottom-cta strong{
  color:#ffffff;
}
.final-bottom-cta p{
  max-width:760px;
}
.final-bottom-cta .mini-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.final-bottom-cta .mini-proof span{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#eef2ff;
  font-size:12px;
  font-weight:800;
}
.final-bottom-cta .btn-secondary{
  background:#ffffff;
  border-color:#ffffff;
}
.final-bottom-cta .btn-secondary:hover{
  background:#f7f7ff;
}


/* refreshed system section */
.system-operating-wrap{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:28px;
  align-items:stretch;
}
.system-visual{
  position:relative;
  padding:28px;
  border-radius:28px;
  background:
    radial-gradient(circle at 10% 10%, rgba(91,87,255,.12), transparent 22%),
    radial-gradient(circle at 90% 90%, rgba(14,165,165,.10), transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f6f7ff 100%);
  border:1px solid #ddd8ff;
  box-shadow:0 18px 45px rgba(15,23,42,.08);
}
.system-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
  align-items:center;
  min-height:420px;
}
.system-stack{
  display:grid;
  gap:12px;
}
.system-node{
  min-height:72px;
  padding:14px 16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.system-node strong{
  display:block;
  font-size:15px;
  letter-spacing:-.02em;
  color:#18193F;
}
.system-node span{
  display:block;
  margin-top:4px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.system-node.is-brand{
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  border-color:#5B57FF;
  color:#fff;
  box-shadow:0 24px 45px rgba(91,87,255,.24);
}
.system-node.is-brand strong,
.system-node.is-brand span{
  color:#fff;
}
.system-node.is-soft{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}
.system-flow{
  display:grid;
  gap:16px;
  justify-items:center;
}
.system-ring{
  width:120px;
  height:120px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.34), transparent 20%),
    linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  box-shadow:0 26px 44px rgba(91,87,255,.24);
}
.system-ring img{
  width:72px;
  height:72px;
  object-fit:contain;
  background:#fff;
  padding:10px;
  border-radius:999px;
}
.system-path{
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#fff;
  border:1px dashed #cfd7ea;
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.system-copy{
  padding:30px;
  border-radius:28px;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.system-copy h2{
  margin-bottom:14px;
}
.system-benefits{
  margin-top:22px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.system-benefit{
  padding:18px;
  border-radius:20px;
  background:
    linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.system-benefit:nth-child(1){
  background:linear-gradient(180deg,#f3f2ff 0%,#ffffff 100%);
  border-color:#ddd8ff;
}
.system-benefit:nth-child(2){
  background:linear-gradient(180deg,#eefcf9 0%,#ffffff 100%);
  border-color:#d7f1ea;
}
.system-benefit:nth-child(3){
  background:linear-gradient(180deg,#fff8ec 0%,#ffffff 100%);
  border-color:#f7e3b6;
}
.system-benefit:nth-child(4){
  background:linear-gradient(180deg,#f5f8ff 0%,#ffffff 100%);
  border-color:#dce6ff;
}
.system-benefit-number{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  color:#fff;
  font-size:14px;
  font-weight:900;
  margin-bottom:12px;
}
.system-benefit h3{
  font-size:18px;
  margin-bottom:8px;
}
.system-mini-pills{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.system-mini-pills span{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:800;
}

/* stronger final CTA refresh */
.final-bottom-cta{
  background:
    radial-gradient(circle at 12% 12%, rgba(91,87,255,.18), transparent 22%),
    radial-gradient(circle at 88% 88%, rgba(14,165,165,.10), transparent 22%),
    linear-gradient(135deg,#18193F 0%,#232569 46%,#5B57FF 100%);
}
.final-bottom-cta .cta-wrap{
  position:relative;
  overflow:hidden;
  padding:38px;
  border-radius:30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,255,255,.16), transparent 26%),
    rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
}
.final-bottom-cta .cta-wrap::before{
  content:"";
  position:absolute;
  top:-60px;
  right:-60px;
  width:180px;
  height:180px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.final-bottom-cta .cta-grid{
  position:relative;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  align-items:center;
}
.final-bottom-cta .cta-mascot-card{
  padding:22px;
  border-radius:24px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 40px rgba(8,15,48,.16);
}
.final-bottom-cta .cta-mascot-top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:16px;
}
.final-bottom-cta .cta-mascot-top img{
  width:56px;
  height:56px;
  object-fit:contain;
  background:#fff;
  border-radius:999px;
  padding:8px;
}
.final-bottom-cta .cta-mini-stats{
  display:grid;
  gap:10px;
}
.final-bottom-cta .cta-mini-stats div{
  min-height:42px;
  padding:0 14px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#eef2ff;
  font-size:13px;
  font-weight:800;
}
@media (max-width:1000px){
  .system-operating-wrap,
  .final-bottom-cta .cta-grid{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .system-benefits{
    grid-template-columns:1fr;
  }
  .system-grid{
    grid-template-columns:1fr;
    min-height:auto;
  }
}


/* AI ecosystem spinner */
.ecosystem-wrap{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:center}
.ecosystem-copy p{max-width:640px}
.ecosystem-stage{position:relative;min-height:520px;border-radius:30px;border:1px solid #ddd8ff;background:radial-gradient(circle at 30% 25%, rgba(91,87,255,.12), transparent 22%),radial-gradient(circle at 72% 74%, rgba(14,165,165,.10), transparent 22%),linear-gradient(180deg,#ffffff 0%,#f6f7ff 100%);box-shadow:var(--shadow);overflow:hidden}
.ecosystem-stage::before{content:"";position:absolute;inset:18px;border-radius:24px;border:1px dashed rgba(91,87,255,.16)}
.ecosystem-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:999px;background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);display:grid;place-items:center;box-shadow:0 28px 50px rgba(91,87,255,.22);z-index:3}
.ecosystem-center img{width:86px;height:86px;object-fit:contain;background:#fff;border-radius:999px;padding:12px}
.ecosystem-center-label{position:absolute;top:50%;left:50%;transform:translate(-50%,92px);min-height:36px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-soft);font-size:12px;font-weight:900;color:#334155;z-index:4}
.ecosystem-ring{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:999px;border:1px solid rgba(91,87,255,.16);z-index:1}
.ecosystem-ring.r1{width:330px;height:330px}
.ecosystem-ring.r2{width:430px;height:430px;border-style:dashed}
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes orbitSpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0deg)}}
.ecosystem-orbit{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:330px;height:330px;animation:orbitSpin 28s linear infinite;z-index:2}
.ecosystem-orbit.reverse{width:430px;height:430px;animation:orbitSpinReverse 34s linear infinite}
.ecosystem-item{position:absolute;display:grid;place-items:center;width:114px;height:72px;padding:10px;border-radius:18px;background:rgba(255,255,255,.92);border:1px solid #e1e7fb;box-shadow:0 14px 30px rgba(15,23,42,.07)}
.ecosystem-item img{max-width:100%;max-height:100%;object-fit:contain}
.ecosystem-item.small{width:100px;height:64px}
.ecosystem-item.p1{top:-6px;left:50%;transform:translateX(-50%)}
.ecosystem-item.p2{top:50%;right:-10px;transform:translateY(-50%)}
.ecosystem-item.p3{bottom:-6px;left:50%;transform:translateX(-50%)}
.ecosystem-item.p4{top:50%;left:-10px;transform:translateY(-50%)}
.ecosystem-item.p5{top:22px;right:34px}
.ecosystem-item.p6{bottom:22px;left:34px}
.ecosystem-item.p7{top:18px;left:28px}
.ecosystem-item.p8{bottom:18px;right:28px}
.ecosystem-caption{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px}
.ecosystem-caption span{min-height:34px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);color:#475569;font-size:12px;font-weight:800}
.ecosystem-marquee{margin-top:18px;overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-soft)}
@keyframes marqueeMove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ecosystem-track{display:flex;gap:14px;width:max-content;padding:14px;animation:marqueeMove 34s linear infinite}
.ecosystem-logo-card{display:grid;place-items:center;min-width:150px;height:68px;padding:10px 14px;border-radius:16px;background:#fff;border:1px solid #e4e9f6}
.ecosystem-logo-card img{max-width:100%;max-height:100%;object-fit:contain}
@media (prefers-reduced-motion: reduce){.ecosystem-orbit,.ecosystem-track{animation:none}}
@media (max-width:1000px){.ecosystem-wrap{grid-template-columns:1fr}.ecosystem-stage{min-height:500px}}
@media (max-width:760px){.ecosystem-stage{min-height:440px}.ecosystem-center{width:120px;height:120px}.ecosystem-center img{width:68px;height:68px}.ecosystem-ring.r1,.ecosystem-orbit{width:250px;height:250px}.ecosystem-ring.r2,.ecosystem-orbit.reverse{width:320px;height:320px}.ecosystem-item{width:86px;height:56px;padding:8px}.ecosystem-item.small{width:78px;height:52px}}


/* header logo sizing fix */
.nav .brand-logo{
  width:56px;
  height:56px;
  padding:7px;
  border-radius:16px;
}
.footer .brand-logo{
  width:44px;
  height:44px;
}

/* rebuilt AI ecosystem spinner */
.ecosystem-wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:30px;
  align-items:center;
}
.ecosystem-copy p{
  max-width:680px;
}
.ecosystem-copy .cta-inline{
  margin-top:20px;
}
.ecosystem-stage{
  position:relative;
  min-height:560px;
  border-radius:30px;
  border:1px solid #ddd8ff;
  background:
    radial-gradient(circle at 20% 18%, rgba(91,87,255,.14), transparent 22%),
    radial-gradient(circle at 80% 78%, rgba(14,165,165,.10), transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f6f7ff 100%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ecosystem-stage::before{
  content:"";
  position:absolute;
  inset:20px;
  border-radius:24px;
  border:1px dashed rgba(91,87,255,.16);
}
.ecosystem-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at center, #000 34%, transparent 88%);
}
.ecosystem-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:156px;
  height:156px;
  border-radius:999px;
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  display:grid;
  place-items:center;
  box-shadow:0 28px 50px rgba(91,87,255,.22);
  z-index:4;
}
.ecosystem-center img{
  width:92px;
  height:92px;
  object-fit:contain;
  background:#fff;
  border-radius:999px;
  padding:12px;
}
.ecosystem-center-label{
  position:absolute;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  font-size:12px;
  font-weight:900;
  color:#334155;
  z-index:4;
}
.ecosystem-ring{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(91,87,255,.16);
  z-index:1;
}
.ecosystem-ring.r1{ width:340px; height:340px; }
.ecosystem-ring.r2{ width:460px; height:460px; border-style:dashed; }

@keyframes orbitSpin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes orbitSpinReverse{
  from{ transform:translate(-50%,-50%) rotate(360deg); }
  to{ transform:translate(-50%,-50%) rotate(0deg); }
}
.ecosystem-orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:340px;
  height:340px;
  animation:orbitSpin 26s linear infinite;
  z-index:2;
}
.ecosystem-orbit.reverse{
  width:460px;
  height:460px;
  animation:orbitSpinReverse 34s linear infinite;
}
.ecosystem-item{
  position:absolute;
  display:grid;
  place-items:center;
  width:118px;
  height:74px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.94);
  border:1px solid #e1e7fb;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.ecosystem-item img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ecosystem-item.small{
  width:104px;
  height:66px;
}
.ecosystem-item.p1{ top:-4px; left:50%; transform:translateX(-50%); }
.ecosystem-item.p2{ top:50%; right:-8px; transform:translateY(-50%); }
.ecosystem-item.p3{ bottom:-4px; left:50%; transform:translateX(-50%); }
.ecosystem-item.p4{ top:50%; left:-8px; transform:translateY(-50%); }

.ecosystem-item.p5{ top:22px; left:50%; transform:translateX(-50%); }
.ecosystem-item.p6{ top:50%; right:14px; transform:translateY(-50%); }
.ecosystem-item.p7{ bottom:22px; left:50%; transform:translateX(-50%); }
.ecosystem-item.p8{ top:50%; left:14px; transform:translateY(-50%); }

.ecosystem-caption{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ecosystem-caption span{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.ecosystem-marquee{
  margin-top:18px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
@keyframes marqueeMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ecosystem-track{
  display:flex;
  gap:14px;
  width:max-content;
  padding:14px;
  animation:marqueeMove 32s linear infinite;
}
.ecosystem-logo-card{
  display:grid;
  place-items:center;
  min-width:156px;
  height:72px;
  padding:10px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid #e4e9f6;
}
.ecosystem-logo-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ecosystem-mini-proof{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ecosystem-mini-proof span{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#f8fbff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:800;
}

@media (prefers-reduced-motion: reduce){
  .ecosystem-orbit,
  .ecosystem-track{
    animation:none;
  }
}
@media (max-width:1000px){
  .ecosystem-wrap{
    grid-template-columns:1fr;
  }
  .ecosystem-stage{
    min-height:520px;
  }
}
@media (max-width:760px){
  .ecosystem-stage{
    min-height:450px;
  }
  .ecosystem-center{
    width:124px;
    height:124px;
  }
  .ecosystem-center img{
    width:72px;
    height:72px;
  }
  .ecosystem-ring.r1,
  .ecosystem-orbit{
    width:250px;
    height:250px;
  }
  .ecosystem-ring.r2,
  .ecosystem-orbit.reverse{
    width:330px;
    height:330px;
  }
  .ecosystem-item{
    width:88px;
    height:56px;
    padding:8px;
  }
  .ecosystem-item.small{
    width:80px;
    height:52px;
  }
  .ecosystem-logo-card{
    min-width:130px;
    height:66px;
  }
}


/* --- alignment + polish fixes --- */
html{scroll-padding-top:120px}
body{overflow-x:hidden}
.nav-wrap{
  padding:14px 0 0;
}
.nav{
  width:min(calc(100% - 32px), var(--max));
}
.nav .inner{
  padding:0 26px;
}
.hero{
  padding:176px 0 82px;
}
.topbar .inner{
  width:min(calc(100% - 32px), var(--max));
  margin-inline:auto;
}
.brand-logo{
  width:62px;
  height:62px;
  padding:8px;
  border-radius:18px;
}
.footer .brand-logo{
  width:48px;
  height:48px;
}
.hero-grid,
.ecosystem-wrap,
.system-operating-wrap{
  align-items:center;
}

/* --- rebuilt AI ecosystem section --- */
.ecosystem-wrap{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:32px;
  align-items:center;
}
.ecosystem-copy p{
  max-width:700px;
}
.ecosystem-copy .cta-inline{
  margin-top:22px;
}
.ecosystem-stage{
  position:relative;
  min-height:620px;
  border-radius:30px;
  overflow:hidden;
  border:1px solid #ddd8ff;
  background:
    radial-gradient(circle at 18% 18%, rgba(91,87,255,.14), transparent 22%),
    radial-gradient(circle at 84% 82%, rgba(14,165,165,.10), transparent 22%),
    linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%);
  box-shadow:var(--shadow);
}
.ecosystem-stage::before{
  content:"";
  position:absolute;
  inset:24px;
  border-radius:24px;
  border:1px dashed rgba(91,87,255,.18);
}
.ecosystem-stage::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size:28px 28px;
  mask-image:radial-gradient(circle at center, #000 34%, transparent 88%);
}
.ecosystem-center{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:4;
  width:166px;
  height:166px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  box-shadow:0 28px 54px rgba(91,87,255,.24);
}
.ecosystem-center img{
  width:96px;
  height:96px;
  object-fit:contain;
  background:#fff;
  border-radius:999px;
  padding:12px;
}
.ecosystem-center-label{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:5;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  color:#334155;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.ecosystem-float-badge{
  position:absolute;
  top:22px;
  left:22px;
  z-index:5;
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.ecosystem-float-badge img{
  height:18px;
  width:auto;
  object-fit:contain;
}
.ecosystem-float-badge span{
  color:#334155;
  font-size:12px;
  font-weight:900;
}

.ecosystem-ring{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(91,87,255,.16);
  z-index:1;
}
.ecosystem-ring.r1{ width:360px; height:360px; }
.ecosystem-ring.r2{ width:500px; height:500px; border-style:dashed; }

@keyframes orbitSpin{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to{ transform:translate(-50%,-50%) rotate(360deg); }
}
@keyframes orbitSpinReverse{
  from{ transform:translate(-50%,-50%) rotate(360deg); }
  to{ transform:translate(-50%,-50%) rotate(0deg); }
}

.ecosystem-orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  z-index:2;
}
.ecosystem-orbit.o1{
  width:360px;
  height:360px;
  animation:orbitSpin 28s linear infinite;
}
.ecosystem-orbit.o2{
  width:500px;
  height:500px;
  animation:orbitSpinReverse 38s linear infinite;
}

.ecosystem-item{
  position:absolute;
  width:118px;
  height:76px;
}
.ecosystem-item-card{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  border:1px solid #e1e7fb;
  box-shadow:0 14px 30px rgba(15,23,42,.08);
}
.ecosystem-item-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ecosystem-orbit.o1 .ecosystem-item-card{
  animation:orbitSpinReverse 28s linear infinite;
}
.ecosystem-orbit.o2 .ecosystem-item-card{
  animation:orbitSpin 38s linear infinite;
}

.ecosystem-item.top{ top:-38px; left:50%; transform:translateX(-50%); }
.ecosystem-item.right{ top:50%; right:-38px; transform:translateY(-50%); }
.ecosystem-item.bottom{ bottom:-38px; left:50%; transform:translateX(-50%); }
.ecosystem-item.left{ top:50%; left:-38px; transform:translateY(-50%); }

.ecosystem-item.small{
  width:104px;
  height:66px;
}
.ecosystem-item.top2{ top:-33px; left:50%; transform:translateX(-50%); }
.ecosystem-item.right2{ top:50%; right:-33px; transform:translateY(-50%); }
.ecosystem-item.bottom2{ bottom:-33px; left:50%; transform:translateX(-50%); }
.ecosystem-item.left2{ top:50%; left:-33px; transform:translateY(-50%); }

.ecosystem-marquee{
  margin-top:18px;
  overflow:hidden;
  border-radius:18px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow-soft);
}
@keyframes marqueeMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ecosystem-track{
  display:flex;
  gap:14px;
  width:max-content;
  padding:14px;
  animation:marqueeMove 34s linear infinite;
}
.ecosystem-logo-card{
  display:grid;
  place-items:center;
  min-width:156px;
  height:72px;
  padding:10px 14px;
  border-radius:16px;
  background:#fff;
  border:1px solid #e4e9f6;
}
.ecosystem-logo-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ecosystem-mini-proof{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ecosystem-mini-proof span{
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#f8fbff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:800;
}

@media (prefers-reduced-motion: reduce){
  .ecosystem-orbit,
  .ecosystem-orbit .ecosystem-item-card,
  .ecosystem-track{
    animation:none;
  }
}
@media (max-width:1000px){
  .ecosystem-wrap{
    grid-template-columns:1fr;
  }
  .ecosystem-stage{
    min-height:560px;
  }
}
@media (max-width:760px){
  .hero{
    padding:164px 0 76px;
  }
  .ecosystem-stage{
    min-height:470px;
  }
  .ecosystem-center{
    width:130px;
    height:130px;
  }
  .ecosystem-center img{
    width:76px;
    height:76px;
  }
  .ecosystem-ring.r1,
  .ecosystem-orbit.o1{
    width:260px;
    height:260px;
  }
  .ecosystem-ring.r2,
  .ecosystem-orbit.o2{
    width:350px;
    height:350px;
  }
  .ecosystem-item{
    width:88px;
    height:56px;
  }
  .ecosystem-item.small{
    width:80px;
    height:52px;
  }
  .ecosystem-item.top{ top:-28px; }
  .ecosystem-item.right{ right:-28px; }
  .ecosystem-item.bottom{ bottom:-28px; }
  .ecosystem-item.left{ left:-28px; }
  .ecosystem-item.top2{ top:-26px; }
  .ecosystem-item.right2{ right:-26px; }
  .ecosystem-item.bottom2{ bottom:-26px; }
  .ecosystem-item.left2{ left:-26px; }
  .ecosystem-logo-card{
    min-width:132px;
    height:66px;
  }
}


/* --- spinner under hero + premium dashboard section --- */
.hero-ai-strip{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.ai-spinner-band{
  position:relative;
  padding:28px;
  border-radius:30px;
  background:
    radial-gradient(circle at 14% 18%, rgba(91,87,255,.12), transparent 22%),
    radial-gradient(circle at 86% 82%, rgba(14,165,165,.08), transparent 20%),
    linear-gradient(180deg,#ffffff 0%,#f7f8ff 100%);
  border:1px solid #ddd8ff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ai-spinner-band::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,0.03) 1px, transparent 1px);
  background-size:30px 30px;
  mask-image:radial-gradient(circle at center, #000 32%, transparent 84%);
}
.ai-spinner-head{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}
.ai-spinner-head p{
  max-width:720px;
  margin:0;
}
.ai-spinner-stage{
  position:relative;
  z-index:2;
  min-height:380px;
}
.ai-spinner-ring{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
  border:1px solid rgba(91,87,255,.14);
}
.ai-spinner-ring.one{
  width:280px;
  height:280px;
}
.ai-spinner-ring.two{
  width:420px;
  height:420px;
  border-style:dashed;
}
@keyframes spinA{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes spinB{
  from{transform:translate(-50%,-50%) rotate(360deg)}
  to{transform:translate(-50%,-50%) rotate(0deg)}
}
.ai-orbit{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  border-radius:999px;
}
.ai-orbit.one{
  width:280px;
  height:280px;
  animation:spinA 24s linear infinite;
}
.ai-orbit.two{
  width:420px;
  height:420px;
  animation:spinB 34s linear infinite;
}
.ai-pill{
  position:absolute;
  width:116px;
  height:70px;
}
.ai-pill.small{
  width:94px;
  height:58px;
}
.ai-pill .ai-pill-card{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.96);
  border:1px solid #e2e7f6;
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}
.ai-pill .ai-pill-card img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}
.ai-orbit.one .ai-pill-card{
  animation:spinB 24s linear infinite;
}
.ai-orbit.two .ai-pill-card{
  animation:spinA 34s linear infinite;
}
.ai-pill.top{top:-35px;left:50%;transform:translateX(-50%)}
.ai-pill.right{top:50%;right:-35px;transform:translateY(-50%)}
.ai-pill.bottom{bottom:-35px;left:50%;transform:translateX(-50%)}
.ai-pill.left{top:50%;left:-35px;transform:translateY(-50%)}
.ai-pill.top2{top:-28px;left:50%;transform:translateX(-50%)}
.ai-pill.right2{top:50%;right:-28px;transform:translateY(-50%)}
.ai-pill.bottom2{bottom:-28px;left:50%;transform:translateX(-50%)}
.ai-pill.left2{top:50%;left:-28px;transform:translateY(-50%)}
.ai-spinner-core{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:150px;
  height:150px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  box-shadow:0 28px 50px rgba(91,87,255,.22);
}
.ai-spinner-core img{
  width:88px;
  height:88px;
  object-fit:contain;
  background:#fff;
  border-radius:999px;
  padding:12px;
}
.ai-spinner-core-label{
  position:absolute;
  left:50%;
  bottom:26px;
  transform:translateX(-50%);
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  color:#334155;
  font-size:12px;
  font-weight:900;
}

.dashboard-showcase{
  position:relative;
  padding:32px;
  border-radius:30px;
  background:
    radial-gradient(circle at 0% 0%, rgba(91,87,255,.10), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
  border:1px solid #ddd8ff;
  box-shadow:var(--shadow);
}
.dashboard-wrap{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:28px;
  align-items:center;
}
.dashboard-copy p{
  max-width:680px;
}
.dashboard-bullets{
  margin-top:20px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.dashboard-bullet{
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.dashboard-bullet strong{
  display:block;
  font-size:15px;
  color:#18193F;
  margin-bottom:6px;
}
.dashboard-ui{
  position:relative;
  min-height:520px;
  border-radius:26px;
  overflow:hidden;
  background:linear-gradient(180deg,#f6f7fb 0%,#eef1f8 100%);
  border:1px solid #dfe6f4;
  box-shadow:0 24px 50px rgba(15,23,42,.10);
}
.dashboard-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 18px;
  background:#ffffff;
  border-bottom:1px solid #e6edf7;
}
.dashboard-brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.dashboard-brand img{
  width:42px;
  height:42px;
  object-fit:contain;
  background:#fff;
  border-radius:12px;
  padding:6px;
  box-shadow:0 10px 18px rgba(91,87,255,.12);
}
.dashboard-shell{
  display:grid;
  grid-template-columns:220px 1fr;
  min-height:462px;
}
.dashboard-sidebar{
  background:linear-gradient(180deg,#18193F 0%,#25276c 100%);
  color:#eef2ff;
  padding:18px 16px;
}
.dashboard-side-group{
  margin-bottom:20px;
}
.dashboard-side-title{
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#aab4ff;
  margin-bottom:10px;
}
.dashboard-nav{
  display:grid;
  gap:8px;
}
.dashboard-nav div{
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.06);
  font-size:13px;
  font-weight:800;
}
.dashboard-main{
  padding:18px;
  background:linear-gradient(180deg,#f8faff 0%,#eef3fb 100%);
}
.dashboard-kpis{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}
.dashboard-kpi{
  padding:18px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e6edf7;
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}
.dashboard-kpi strong{
  display:block;
  font-size:28px;
  line-height:1;
  letter-spacing:-.05em;
  color:#18193F;
}
.dashboard-kpi span{
  display:block;
  margin-top:8px;
  color:#64748b;
  font-size:13px;
  font-weight:700;
}
.dashboard-panels{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:14px;
  margin-top:14px;
}
.dashboard-panel{
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid #e6edf7;
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}
.dashboard-panel h3{
  font-size:18px;
  margin-bottom:10px;
}
.dashboard-chart{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:10px;
  align-items:end;
  height:180px;
  margin-top:14px;
}
.dashboard-bar{
  border-radius:12px 12px 8px 8px;
  background:linear-gradient(180deg,#8b86ff 0%,#5B57FF 100%);
}
.dashboard-list{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.dashboard-list-item{
  min-height:54px;
  padding:0 12px;
  border-radius:14px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  background:#f7f9fc;
  border:1px solid #ebf0f8;
}
.dashboard-badge{
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#eeedff;
  color:#443dd1;
  font-size:12px;
  font-weight:900;
}
.dashboard-footer-rail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:14px;
}
.dashboard-mini{
  padding:16px;
  border-radius:18px;
  background:#fff;
  border:1px solid #e6edf7;
  box-shadow:0 12px 24px rgba(15,23,42,.05);
}
.dashboard-mini-line{
  height:10px;
  border-radius:999px;
  background:linear-gradient(90deg,#5B57FF 0%,#8f8aff 100%);
  margin-top:10px;
}
.dashboard-mini-line.two{
  width:78%;
}
.dashboard-mini-line.three{
  width:56%;
}
@media (prefers-reduced-motion: reduce){
  .ai-orbit,
  .ai-orbit .ai-pill-card,
  .ecosystem-track{
    animation:none;
  }
}
@media (max-width:1000px){
  .dashboard-wrap{
    grid-template-columns:1fr;
  }
}
@media (max-width:760px){
  .ai-spinner-stage{
    min-height:310px;
  }
  .ai-spinner-ring.one,
  .ai-orbit.one{
    width:230px;
    height:230px;
  }
  .ai-spinner-ring.two,
  .ai-orbit.two{
    width:320px;
    height:320px;
  }
  .ai-pill{
    width:86px;
    height:56px;
  }
  .ai-pill.small{
    width:74px;
    height:50px;
  }
  .ai-spinner-core{
    width:118px;
    height:118px;
  }
  .ai-spinner-core img{
    width:68px;
    height:68px;
  }
  .dashboard-shell{
    grid-template-columns:1fr;
  }
  .dashboard-sidebar{
    display:none;
  }
  .dashboard-kpis,
  .dashboard-panels,
  .dashboard-footer-rail,
  .dashboard-bullets{
    grid-template-columns:1fr;
  }
}


/* --- cleaner dashboard preview refresh --- */
.dashboard-showcase{
  background:
    radial-gradient(circle at 0% 0%, rgba(91,87,255,.10), transparent 24%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
}
.dashboard-ui{
  min-height:560px;
  background:linear-gradient(180deg,#f6f7fb 0%,#eef1f8 100%);
}
.dashboard-topbar{
  padding:18px 20px;
}
.dashboard-brand img{
  width:46px;
  height:46px;
}
.dashboard-shell{
  grid-template-columns:236px 1fr;
  min-height:496px;
}
.dashboard-sidebar{
  padding:20px 16px;
}
.dashboard-nav div{
  min-height:40px;
}
.dashboard-main{
  padding:20px;
}
.dashboard-kpis{
  grid-template-columns:repeat(4,1fr);
}
.dashboard-kpi{
  padding:16px;
}
.dashboard-kpi strong{
  font-size:24px;
}
.dashboard-panels{
  grid-template-columns:1.08fr .92fr;
}
.dashboard-panel{
  min-height:230px;
}
.dashboard-chart{
  height:170px;
}
.dashboard-list{
  gap:12px;
}
.dashboard-list-item{
  min-height:58px;
  grid-template-columns:1fr auto;
  gap:12px;
}
.dashboard-badge.alt{
  background:#eefcf9;
  color:#0f766e;
}
.dashboard-badge.dark{
  background:#eef2ff;
  color:#3d36b8;
}
.dashboard-footer-rail{
  grid-template-columns:1.1fr .9fr;
}
.dashboard-mini{
  min-height:120px;
}
.dashboard-mini-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:14px;
}
.dashboard-chip{
  min-height:38px;
  padding:0 12px;
  border-radius:12px;
  display:flex;
  align-items:center;
  background:#f7f9fc;
  border:1px solid #ebf0f8;
  color:#475569;
  font-size:12px;
  font-weight:800;
}
.dashboard-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}
.dashboard-tab{
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:900;
}
.dashboard-tab.active{
  background:linear-gradient(135deg,#18193F 0%,#5B57FF 100%);
  border-color:#5B57FF;
  color:#fff;
}
@media (max-width:1000px){
  .dashboard-kpis{
    grid-template-columns:repeat(2,1fr);
  }
}
@media (max-width:760px){
  .dashboard-ui{
    min-height:unset;
  }
  .dashboard-kpis,
  .dashboard-panels,
  .dashboard-footer-rail,
  .dashboard-mini-grid{
    grid-template-columns:1fr;
  }
}


/* --- chatbot story marquee + tighter dashboard UI --- */
.chatbot-story-strip{
  padding:26px;
  border-radius:30px;
  background:
    radial-gradient(circle at 10% 12%, rgba(91,87,255,.10), transparent 22%),
    radial-gradient(circle at 90% 88%, rgba(14,165,165,.08), transparent 20%),
    linear-gradient(180deg,#ffffff 0%,#f7f9ff 100%);
  border:1px solid #ddd8ff;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.chatbot-story-header{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  margin-bottom:20px;
}
.chatbot-story-header p{
  max-width:760px;
  margin:0;
}
.chatbot-story-marquee{
  overflow:hidden;
  border-radius:24px;
}
@keyframes chatbotMarqueeMove{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.chatbot-story-track{
  display:flex;
  gap:18px;
  width:max-content;
  animation:chatbotMarqueeMove 42s linear infinite;
}
.chatbot-story-card{
  position:relative;
  width:320px;
  min-height:248px;
  padding:20px;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(91,87,255,.10), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
  border:1px solid #e1e7fb;
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}
.chatbot-story-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#5B57FF 0%,#7a6bff 55%,#0ea5a5 100%);
  border-radius:24px 24px 0 0;
}
.chatbot-story-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
}
.chatbot-story-icon{
  width:52px;
  height:52px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#f3f2ff;
  border:1px solid #ddd8ff;
  color:#5B57FF;
  font-size:24px;
}
.chatbot-story-badge{
  min-height:30px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#eefcf9;
  border:1px solid #cdeee6;
  color:#0f766e;
  font-size:12px;
  font-weight:900;
}
.chatbot-story-card h3{
  font-size:22px;
  margin-bottom:8px;
}
.chatbot-story-card p{
  font-size:15px;
  margin-bottom:14px;
}
.chatbot-story-metrics{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chatbot-story-metrics span{
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#f8fbff;
  border:1px solid var(--line);
  color:#475569;
  font-size:12px;
  font-weight:800;
}

/* tighter dashboard preview */
.dashboard-showcase{
  padding:28px;
}
.dashboard-wrap{
  grid-template-columns:1fr 1fr;
  gap:24px;
  align-items:start;
}
.dashboard-copy p{
  max-width:640px;
}
.dashboard-bullets{
  margin-top:16px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.dashboard-bullet{
  padding:15px;
}
.dashboard-ui{
  min-height:430px;
  max-width:560px;
  justify-self:end;
}
.dashboard-topbar{
  padding:14px 16px;
}
.dashboard-brand img{
  width:40px;
  height:40px;
}
.dashboard-shell{
  grid-template-columns:182px 1fr;
  min-height:370px;
}
.dashboard-sidebar{
  padding:16px 12px;
}
.dashboard-side-title{
  font-size:10px;
  margin-bottom:8px;
}
.dashboard-nav{
  gap:7px;
}
.dashboard-nav div{
  min-height:34px;
  font-size:12px;
}
.dashboard-main{
  padding:14px;
}
.dashboard-tabs{
  margin-top:0;
  gap:8px;
}
.dashboard-tab{
  min-height:34px;
  padding:0 12px;
  font-size:11px;
}
.dashboard-kpis{
  margin-top:12px;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
}
.dashboard-kpi{
  padding:12px;
  border-radius:16px;
}
.dashboard-kpi strong{
  font-size:20px;
}
.dashboard-kpi span{
  font-size:11px;
  margin-top:6px;
}
.dashboard-panels{
  grid-template-columns:1.02fr .98fr;
  gap:10px;
  margin-top:10px;
}
.dashboard-panel{
  padding:14px;
  min-height:180px;
  border-radius:18px;
}
.dashboard-panel h3{
  font-size:15px;
  margin-bottom:8px;
}
.dashboard-chart{
  gap:8px;
  height:126px;
  margin-top:10px;
}
.dashboard-list{
  gap:8px;
}
.dashboard-list-item{
  min-height:46px;
  padding:0 10px;
  font-size:12px;
}
.dashboard-badge{
  min-height:24px;
  padding:0 8px;
  font-size:10px;
}
.dashboard-footer-rail{
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}
.dashboard-mini{
  padding:14px;
  min-height:92px;
  border-radius:16px;
}
.dashboard-mini strong{
  font-size:13px;
}
.dashboard-mini-grid{
  gap:8px;
  margin-top:10px;
}
.dashboard-chip{
  min-height:32px;
  padding:0 10px;
  font-size:11px;
  border-radius:10px;
}
.dashboard-mini-line{
  height:8px;
}
.catalog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.catalog-card{
  position:relative;
  display:block;
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(circle at 100% 0%, rgba(91,87,255,.10), transparent 28%),
    linear-gradient(180deg,#ffffff 0%,#fbfbff 100%);
  border:1px solid #e1e7fb;
  box-shadow:0 16px 34px rgba(15,23,42,.06);
}
.catalog-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:linear-gradient(90deg,#5B57FF 0%,#7a6bff 55%,#0ea5a5 100%);
  border-radius:24px 24px 0 0;
}
.catalog-card h3{
  font-size:22px;
}
.catalog-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.catalog-tags span{
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  background:#f8fbff;
  border:1px solid var(--line);
  color:#475569;
  font-size:11px;
  font-weight:900;
}
@media (prefers-reduced-motion: reduce){
  .chatbot-story-track{animation:none}
}
@media (max-width:1000px){
  .dashboard-wrap{grid-template-columns:1fr}
  .dashboard-ui{justify-self:stretch;max-width:none}
  .catalog-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .chatbot-story-header{flex-direction:column;align-items:flex-start}
  .chatbot-story-card{width:280px;min-height:232px}
  .dashboard-bullets,
  .dashboard-kpis,
  .dashboard-panels,
  .dashboard-footer-rail,
  .catalog-grid{grid-template-columns:1fr}
  .dashboard-shell{grid-template-columns:1fr}
  .dashboard-sidebar{display:none}
}


/* production form + whatsapp polish */
.form-grid{
  display:grid;
  gap:12px;
}
.form-status{
  display:none;
  margin-top:14px;
  padding:14px 16px;
  border-radius:16px;
  font-size:14px;
  font-weight:700;
}
.form-status.show{display:block}
.form-status.success{
  background:#eefcf9;
  border:1px solid #cdeee6;
  color:#0f766e;
}
.form-status.error{
  background:#fff7f9;
  border:1px solid #ffd8e1;
  color:#be123c;
}
.contact-quick-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:18px;
}
.contact-quick-card{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.contact-quick-card h3{
  font-size:18px;
  margin-bottom:8px;
}
.whatsapp-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border-radius:14px;
  background:#25D366;
  color:#ffffff;
  font-weight:800;
  border:1px solid #25D366;
  transition:.18s ease;
}
.whatsapp-cta:hover{
  transform:translateY(-1px);
  filter:brightness(.98);
}
.chat-input button[data-chat-send]{
  min-width:86px;
}
@media (max-width:760px){
  .contact-quick-grid{
    grid-template-columns:1fr;
  }
}

/* ================= Premium lead form: floating labels + magic ================= */
.form-head{ margin-bottom:20px; }
.form-head h3{ font-size:23px; margin:0 0 6px; letter-spacing:-.02em; color:var(--brand-dark); }
.form-sub{ color:#64748b; font-size:14.5px; margin:0 0 13px; }
.form-trust{ display:flex; flex-wrap:wrap; gap:8px; }
.form-trust span{ font-size:12.5px; font-weight:800; color:var(--brand-dark); background:var(--brand-soft); border:1px solid rgba(91,87,255,.20); padding:6px 11px; border-radius:999px; }

.form-grid.form-magic{ gap:20px; }
.form-magic .field-wrap{ position:relative; }
.form-magic .field{
  width:100%; min-height:60px; padding:24px 16px 8px !important; border-radius:15px;
  border:1.5px solid var(--line-strong); background:#fbfbff;
  transition:border-color .18s ease, box-shadow .2s ease, background .18s ease;
}
.form-magic textarea.field{ min-height:130px; padding-top:28px !important; resize:vertical; }
.form-magic .field:hover{ border-color:rgba(91,87,255,.55); }
.form-magic .field:focus{ outline:none; border-color:var(--brand); background:#fff; box-shadow:0 0 0 4px rgba(91,87,255,.16); }
.form-magic .field-label{
  position:absolute; left:15px; top:19px; margin:0 !important; padding:0 5px;
  color:#8a90a6; font-weight:600; font-size:15.5px; pointer-events:none; background:transparent;
  transition:all .16s cubic-bezier(.2,.7,.2,1);
}
.form-magic .field:focus + .field-label,
.form-magic .field:not(:placeholder-shown) + .field-label{
  top:-9px; left:11px; font-size:12px; font-weight:800; color:var(--brand); background:#fff; border-radius:4px;
}
.form-magic .field-wrap--area .field-label{ top:24px; }
.form-magic .field-wrap--area .field:focus + .field-label,
.form-magic .field-wrap--area .field:not(:placeholder-shown) + .field-label{ top:-9px; }
/* live valid check */
.form-magic .field-wrap::after{
  content:"✓"; position:absolute; right:15px; top:19px; color:#12b26b; font-weight:900; font-size:15px;
  opacity:0; transform:scale(.5); transition:.2s ease; pointer-events:none;
}
.form-magic .field-wrap:has(.field:valid:not(:placeholder-shown))::after{ opacity:1; transform:scale(1); }
.form-magic .field-wrap--area::after{ top:16px; }

/* submit button magic: shine sweep + glow + lift */
.form-submit{ position:relative; overflow:hidden; min-width:196px; transition:transform .18s ease, box-shadow .25s ease; }
.form-submit::after{ content:""; position:absolute; top:0; left:-120%; width:58%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); pointer-events:none; }
.form-submit:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(91,87,255,.42); }
.form-submit:hover::after{ animation:formShine .8s ease; }
@keyframes formShine{ to{ left:132%; } }
.form-reassure{ color:#8a90a6; font-size:13px; margin:14px 0 0; }

/* staggered reveal of fields */
@media (prefers-reduced-motion: no-preference){
  .form-magic .field-wrap, .form-magic .cta-inline{ animation:formFieldIn .5s both; }
  .form-magic .field-wrap:nth-child(1){ animation-delay:.04s }
  .form-magic .field-wrap:nth-child(2){ animation-delay:.11s }
  .form-magic .field-wrap:nth-child(3){ animation-delay:.18s }
  .form-magic .field-wrap:nth-child(4){ animation-delay:.25s }
  @keyframes formFieldIn{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:none } }
}