:root {
  --bg: #050914;
  --surface: #0a1325;
  --surface-2: #0d1930;
  --line: rgba(148, 163, 184, 0.16);
  --text: #f3f7ff;
  --muted: #9cafc8;
  --accent: #27cfff;
  --accent-2: #8b5cf6;
  --success: #38d7a6;
  --max: 1200px;
  --display: "Outfit", "Montserrat", system-ui, sans-serif;
  --body: "Inter", "Montserrat", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 12% 5%, rgba(39, 207, 255, .055), transparent 28rem),
    radial-gradient(circle at 92% 20%, rgba(139, 92, 246, .065), transparent 32rem),
    var(--bg);
  font-family: var(--body);
  line-height: 1.6;
}

.sl-product-visual {
  position: relative;
  margin: 0;
  padding: 10px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, transparent);
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(16, 31, 59, .9), rgba(7, 10, 26, .96));
  box-shadow: 0 32px 90px rgba(0, 0, 0, .48), 0 0 70px color-mix(in srgb, var(--accent-2) 18%, transparent);
  isolation: isolate;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.sl-product-visual::before,
.sl-product-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  inset: 7% -7%;
  animation: slVisualOrbit 16s linear infinite;
}
.sl-product-visual::after { inset: 18% -1%; animation-duration: 11s; animation-direction: reverse; }
.sl-product-visual:hover { transform: translateY(-6px) scale(1.008); border-color: color-mix(in srgb, var(--accent) 72%, transparent); box-shadow: 0 38px 100px rgba(0, 0, 0, .56), 0 0 88px color-mix(in srgb, var(--accent-2) 25%, transparent); }
.sl-product-visual img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 21px; }
.sl-product-visual figcaption { position: absolute; left: 28px; right: 28px; bottom: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 15px 17px; border: 1px solid rgba(164, 198, 255, .24); border-radius: 16px; background: rgba(4, 9, 24, .82); box-shadow: 0 18px 45px rgba(0,0,0,.4); backdrop-filter: blur(16px); }
.sl-product-visual figcaption b { font: 800 .92rem/1.2 var(--display); }
.sl-product-visual figcaption span { color: var(--muted); font-size: .76rem; text-align: right; }
@keyframes slVisualOrbit { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .sl-product-visual { padding: 7px; border-radius: 22px; }
  .sl-product-visual img { border-radius: 16px; }
  .sl-product-visual figcaption { position: relative; left: auto; right: auto; bottom: auto; margin: 8px 0 0; align-items: flex-start; flex-direction: column; gap: 4px; }
  .sl-product-visual figcaption span { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .sl-product-visual::before, .sl-product-visual::after { animation: none; }
}
body[data-tone="violet"] { --accent: #9a6cff; --accent-2: #e34b9d; }
body[data-tone="blue"] { --accent: #3aa8ff; --accent-2: #5968ff; }
body[data-tone="pink"] { --accent: #f04ca6; --accent-2: #8a5cff; }
body[data-tone="ai"] { --accent: #43d8ff; --accent-2: #b45cff; }
a { color: inherit; }
button, input, textarea { font: inherit; }
img { max-width: 100%; }
.sl-container { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.sl-skip {
  position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 14px;
  color: #06101f; background: #fff; border-radius: 8px; transform: translateY(-160%);
}
.sl-skip:focus { transform: none; }
.sl-nav {
  position: sticky; z-index: 100; top: 0; border-bottom: 1px solid var(--line);
  background: rgba(3, 8, 20, 0.88); backdrop-filter: blur(18px);
}
.sl-nav__inner { display: flex; min-height: 76px; align-items: center; gap: 24px; }
.sl-logo { display: inline-flex; width: 156px; min-width: 156px; align-items: center; text-decoration: none; }
.sl-logo img { display: block; width: 100%; height: 58px; object-fit: contain; object-position: left center; }
.sl-nav__links { display: flex; margin-left: auto; align-items: center; gap: 22px; }
.sl-nav__links a { color: #bbc9dc; font-size: .78rem; font-weight: 700; text-decoration: none; }
.sl-nav__links a { position: relative; }
.sl-nav__links a:not(.sl-nav__cta)::after { position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; border-radius: 2px; content: ""; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transform: scaleX(0); transition: transform .18s ease; }
.sl-nav__links a:hover { color: #fff; }
.sl-nav__links a:hover::after, .sl-nav__links a:focus-visible::after { transform: scaleX(1); }
.sl-nav__cta, .sl-button {
  display: inline-flex; min-height: 48px; padding: 0 20px; border: 0; border-radius: 12px;
  align-items: center; justify-content: center; gap: 12px; color: #fff;
  background: linear-gradient(110deg, var(--accent), var(--accent-2));
  box-shadow: 0 15px 35px color-mix(in srgb, var(--accent) 22%, transparent);
  font-size: .78rem; font-weight: 800; text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.sl-nav__cta:hover, .sl-button:hover { transform: translateY(-2px); box-shadow: 0 20px 45px color-mix(in srgb, var(--accent) 32%, transparent); }
.sl-button--ghost { border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent); background: rgba(9, 18, 35, .75); box-shadow: none; }
.sl-hero {
  position: relative; min-height: 680px; overflow: hidden; padding: 78px 0 68px;
  background:
    radial-gradient(circle at 78% 25%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 30rem),
    radial-gradient(circle at 12% 48%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 28rem),
    linear-gradient(160deg, #050914, #071225 70%, #050914);
}
.sl-hero::before, .sl-section--grid::before {
  position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .34;
  background-image: linear-gradient(rgba(80, 185, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 185, 255, .06) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: linear-gradient(#000, transparent 90%);
}
.sl-hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .92fr; align-items: center; gap: 58px; }
.sl-eyebrow { display: inline-flex; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.sl-hero h1 { max-width: 720px; margin: 20px 0 22px; font: 800 clamp(3rem, 5.4vw, 5.2rem)/.95 var(--display); letter-spacing: -.055em; }
.sl-gradient { color: transparent; background: linear-gradient(100deg, var(--accent), var(--accent-2)); background-clip: text; -webkit-background-clip: text; }
.sl-hero__lead { max-width: 670px; color: #acbdd2; font-size: 1.08rem; }
.sl-hero__actions { display: flex; margin-top: 30px; flex-wrap: wrap; gap: 12px; }
.sl-proof { display: flex; margin: 30px 0 0; padding: 0; flex-wrap: wrap; gap: 10px; list-style: none; }
.sl-proof li { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: #9eb2ca; background: rgba(255,255,255,.025); font-size: .68rem; }
.sl-window {
  position: relative; min-height: 480px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 26px; background: linear-gradient(145deg, rgba(13, 28, 52, .98), rgba(5, 10, 24, .99));
  box-shadow: 0 45px 100px rgba(0,0,0,.5), 0 0 70px color-mix(in srgb, var(--accent) 10%, transparent);
  transform: perspective(1100px) rotateY(-5deg) rotateX(2deg);
}
.sl-window__bar { display: flex; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; }
.sl-window__dots { display: flex; gap: 6px; }
.sl-window__dots i { width: 8px; height: 8px; border-radius: 50%; background: #35445a; }
.sl-window__bar b { color: #7f93ad; font-size: .62rem; letter-spacing: .1em; }
.sl-window__body { display: grid; min-height: 426px; grid-template-columns: 60px 1fr; }
.sl-window__rail { display: flex; padding-top: 20px; border-right: 1px solid var(--line); align-items: center; flex-direction: column; gap: 16px; }
.sl-window__rail i { width: 21px; height: 21px; border: 1px solid #40506a; border-radius: 6px; }
.sl-window__rail i:first-child { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.sl-window__main { display: grid; padding: 22px; align-content: start; gap: 16px; }
.sl-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.sl-kpis span { min-height: 70px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.sl-kpis small { display: block; color: #7488a3; font-size: .56rem; text-transform: uppercase; }
.sl-kpis b { display: block; margin-top: 4px; font-size: 1.1rem; }
.sl-demo-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 10px; }
.sl-chart, .sl-feed { min-height: 176px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.02); }
.sl-chart { display: flex; align-items: flex-end; gap: 7px; }
.sl-chart i { width: 100%; height: 34%; border-radius: 5px 5px 2px 2px; background: linear-gradient(var(--accent), var(--accent-2)); animation: slBars 3s ease-in-out infinite alternate; }
.sl-chart i:nth-child(2) { height: 65%; animation-delay: -.8s; } .sl-chart i:nth-child(3) { height: 47%; animation-delay: -1.6s; }
.sl-chart i:nth-child(4) { height: 82%; animation-delay: -2.2s; } .sl-chart i:nth-child(5) { height: 71%; animation-delay: -1s; }
@keyframes slBars { to { filter: brightness(1.3); transform: scaleY(.88); transform-origin: bottom; } }
.sl-feed { display: grid; align-content: center; gap: 9px; }
.sl-feed span { display: block; height: 31px; border: 1px solid rgba(148,163,184,.11); border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 11%, transparent), transparent); }
.sl-section { position: relative; padding: 82px 0; background: linear-gradient(180deg, #081224, #071020); }
.sl-section:nth-of-type(even) { background: #050914; }
.sl-section--grid { overflow: hidden; }
.sl-section__head { position: relative; z-index: 2; max-width: 780px; margin: 0 auto 38px; text-align: center; }
.sl-section__head h2 { margin: 14px 0 0; font: 800 clamp(1.95rem, 3.15vw, 3.2rem)/1.04 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.sl-section__head p { max-width: 700px; margin: 16px auto 0; color: var(--muted); }
.sl-card-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.sl-card { min-height: 190px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(145deg, rgba(14,27,50,.92), rgba(7,13,27,.95)); transition: transform .2s, border-color .2s, box-shadow .2s; }
.sl-card:hover { border-color: color-mix(in srgb, var(--accent) 42%, transparent); transform: translateY(-4px); }
.sl-card:hover { box-shadow: 0 22px 50px rgba(0,0,0,.28), 0 0 28px color-mix(in srgb, var(--accent) 8%, transparent); }
.sl-card i { display: grid; width: 38px; height: 38px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); border-radius: 11px; place-items: center; color: var(--accent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 13%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent)); box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 8%, transparent); font-size: .7rem; font-style: normal; font-weight: 800; }
.sl-card h3 { margin: 17px 0 7px; font: 700 1.08rem var(--display); }
.sl-card p { margin: 0; color: #91a4bd; font-size: .86rem; }
.sl-solutions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.sl-solution-link { --solution: #27cfff; --solution-2: #5968ff; position: relative; display: grid; min-height: 286px; overflow: hidden; padding: 24px; border: 1px solid color-mix(in srgb, var(--solution) 24%, var(--line)); border-radius: 22px; grid-template-columns: minmax(0, .78fr) minmax(210px, 1.22fr); align-items: center; gap: 20px; color: #fff; background: radial-gradient(circle at 95% 10%, color-mix(in srgb, var(--solution-2) 14%, transparent), transparent 48%), linear-gradient(135deg, rgba(10,24,47,.98), rgba(5,10,23,.99)); text-decoration: none; transition: transform .22s, border-color .22s, box-shadow .22s; }
.sl-solution-link::before { position: absolute; top: -28px; left: 16px; color: rgba(255,255,255,.025); content: "01"; font: 800 7rem/.9 var(--display); pointer-events: none; }
.sl-solution-link--pos { --solution: #9a6cff; --solution-2: #df4aa5; }
.sl-solution-link--pos::before { content: "02"; }
.sl-solution-link--restaurant { --solution: #ff4f9d; --solution-2: #ff875c; }
.sl-solution-link--restaurant::before { content: "03"; }
.sl-solution-link--ai { --solution: #3ce0d0; --solution-2: #27a8ff; }
.sl-solution-link--ai::before { content: "04"; }
.sl-solution-link:hover { border-color: color-mix(in srgb, var(--solution) 68%, white); box-shadow: 0 24px 54px rgba(0,0,0,.32), 0 0 34px color-mix(in srgb, var(--solution) 10%, transparent); transform: translateY(-4px); }
.sl-solution-copy { position: relative; z-index: 2; }
.sl-solution-link small { color: var(--solution); font-size: .64rem; font-weight: 800; letter-spacing: .1em; }
.sl-solution-link h3 { margin: 8px 0; font: 750 1.28rem var(--display); }
.sl-solution-link p { margin: 0; color: #8fa4be; font-size: .8rem; }
.sl-solution-link .sl-solution-copy > b { display: inline-flex; margin-top: 18px; align-items: center; gap: 9px; color: var(--solution); font-size: .7rem; }
.sl-solution-demo { position: relative; display: grid; min-height: 214px; padding: 14px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--solution) 22%, transparent); border-radius: 16px; grid-template-columns: repeat(2, 1fr); align-content: center; gap: 8px; background: linear-gradient(145deg, color-mix(in srgb, var(--solution) 8%, #081020), rgba(4,8,18,.96)); box-shadow: inset 0 0 35px rgba(0,0,0,.26); }
.sl-solution-demo::before { position: absolute; inset: 0; content: ""; opacity: .22; background-image: linear-gradient(color-mix(in srgb, var(--solution) 25%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--solution) 25%, transparent) 1px, transparent 1px); background-size: 22px 22px; mask-image: linear-gradient(#000, transparent); }
.sl-solution-demo i, .sl-solution-demo strong { position: relative; z-index: 1; display: block; border: 1px solid color-mix(in srgb, var(--solution) 23%, transparent); border-radius: 8px; background: linear-gradient(90deg, color-mix(in srgb, var(--solution) 16%, transparent), rgba(255,255,255,.025)); }
.sl-solution-demo--crm i { height: 46px; }
.sl-solution-demo--crm i:nth-child(1), .sl-solution-demo--crm i:nth-child(6) { grid-column: 1 / -1; }
.sl-solution-demo--crm i:nth-child(1) { height: 25px; }
.sl-solution-demo--crm i:nth-child(6) { height: 36px; background: linear-gradient(90deg, color-mix(in srgb, var(--solution) 45%, transparent) 64%, rgba(255,255,255,.03) 64%); }
.sl-solution-demo--pos { grid-template-columns: 1fr 1fr; }
.sl-solution-demo--pos i { height: 34px; }
.sl-solution-demo--pos i:first-child { height: 88px; grid-column: 1 / -1; background: linear-gradient(90deg, color-mix(in srgb, var(--solution) 18%, transparent) 67%, rgba(255,255,255,.025) 67%); }
.sl-solution-demo--pos strong { padding: 10px; grid-column: 1 / -1; color: var(--solution); text-align: right; }
.sl-solution-demo--restaurant { grid-template-columns: repeat(3, 1fr); align-content: start; padding-top: 46px; }
.sl-solution-demo--restaurant::after { position: absolute; top: 15px; left: 14px; color: var(--solution); content: "ÓRDENES · KDS · MESAS"; font-size: .5rem; font-weight: 800; letter-spacing: .1em; }
.sl-solution-demo--restaurant i { height: 62px; }
.sl-solution-demo--restaurant i:nth-child(2), .sl-solution-demo--restaurant i:nth-child(5) { height: 82px; }
.sl-solution-demo--ai { display: block; }
.sl-solution-demo--ai i { position: absolute; width: 54px; height: 42px; }
.sl-solution-demo--ai i:nth-child(1) { top: 86px; left: calc(50% - 27px); border-color: var(--solution); box-shadow: 0 0 28px color-mix(in srgb, var(--solution) 25%, transparent); }
.sl-solution-demo--ai i:nth-child(2) { top: 25px; left: 18px; }.sl-solution-demo--ai i:nth-child(3) { top: 25px; right: 18px; }.sl-solution-demo--ai i:nth-child(4) { bottom: 25px; left: 18px; }.sl-solution-demo--ai i:nth-child(5) { right: 18px; bottom: 25px; }
.sl-solution-demo--ai::after { position: absolute; inset: 45px 50px; border: 1px dashed color-mix(in srgb, var(--solution) 45%, transparent); border-radius: 50%; content: ""; }
.sl-config { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .72fr); align-items: start; gap: 24px; }
.sl-config__panel, .sl-config__preview { width: 100%; min-width: 0; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(145deg, #0b172c, #070d1c); }
.sl-config__panel { padding: 28px; }
.sl-config__tabs { display: flex; margin-bottom: 20px; overflow-x: auto; gap: 8px; scrollbar-width: none; }
.sl-filter { padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px; color: #9eb0c7; background: rgba(255,255,255,.02); font-size: .68rem; cursor: pointer; white-space: nowrap; }
.sl-filter[aria-pressed="true"] { border-color: var(--accent); color: #fff; background: color-mix(in srgb, var(--accent) 12%, transparent); }
.sl-modules { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.sl-module { display: flex; min-height: 64px; padding: 10px; border: 1px solid var(--line); border-radius: 13px; align-items: center; gap: 9px; color: #c5d2e3; background: rgba(255,255,255,.02); text-align: left; cursor: pointer; transition: border-color .18s, background .18s, transform .18s; font-size: .72rem; font-weight: 650; }
.sl-module:hover { border-color: color-mix(in srgb, var(--accent) 40%, transparent); transform: translateY(-2px); }
.sl-module::before { display: grid; width: 22px; height: 22px; border: 1px solid #50617a; border-radius: 7px; flex: 0 0 auto; place-items: center; content: "+"; color: #7f93ad; }
.sl-module[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.sl-module[aria-pressed="true"]::before { border-color: var(--accent); color: #06101f; background: var(--accent); content: "✓"; }
.sl-module[hidden] { display: none; }
.sl-config__preview { position: sticky; top: 98px; overflow: hidden; }
.sl-preview__bar { display: flex; min-height: 58px; padding: 0 18px; border-bottom: 1px solid var(--line); align-items: center; justify-content: space-between; }
.sl-preview__bar span { color: #7edfbf; font-size: .65rem; }
.sl-preview__canvas { position: relative; min-height: 330px; overflow: hidden; padding: 22px; background: radial-gradient(circle at 65% 40%, rgba(154,108,255,.1), transparent 48%); }
.sl-preview__canvas h3 { margin: 0 0 16px; font: 700 1rem var(--display); }
.sl-preview__architecture { position: absolute; right: 22px; bottom: 28px; width: 190px; height: 190px; border: 1px solid rgba(39,207,255,.15); border-radius: 50%; opacity: .82; }
.sl-preview__architecture::before, .sl-preview__architecture::after { position: absolute; inset: 24px; border: 1px solid rgba(154,108,255,.2); border-radius: 50%; content: ""; }.sl-preview__architecture::after { inset: 55px; border-color: rgba(240,76,166,.28); }
.sl-preview__architecture strong { position: absolute; z-index: 2; top: 72px; left: 69px; color: #eaf5ff; font: 800 .65rem/1.1 var(--display); text-align: center; text-shadow: 0 0 18px #27cfff; }
.sl-preview__architecture i { position: absolute; z-index: 2; width: 28px; height: 28px; border: 1px solid #27cfff; border-radius: 9px; background: #09172a; box-shadow: 0 0 18px rgba(39,207,255,.18); }
.sl-preview__architecture i:nth-child(1) { top: 10px; left: 80px; }.sl-preview__architecture i:nth-child(2) { top: 78px; right: 5px; border-color: #9a6cff; }.sl-preview__architecture i:nth-child(3) { bottom: 8px; left: 80px; border-color: #f04ca6; }.sl-preview__architecture i:nth-child(4) { top: 78px; left: 5px; border-color: #3ce0d0; }
.sl-preview__canvas > :not(.sl-preview__architecture) { position: relative; z-index: 3; max-width: calc(100% - 150px); }
.sl-preview__list { display: grid; gap: 8px; }
.sl-preview__list span { display: flex; min-height: 38px; padding: 0 11px; border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); border-radius: 9px; align-items: center; color: #aebdd0; background: color-mix(in srgb, var(--accent) 5%, transparent); font-size: .7rem; }
.sl-preview__empty { color: #71839b; font-size: .78rem; }
.sl-preview__summary { padding: 18px 22px; border-top: 1px solid var(--line); color: #9dafc5; font-size: .75rem; }
.sl-preview__summary b { color: #fff; }
.sl-security { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; align-items: center; }
.sl-security__visual { position: relative; display: grid; min-height: 390px; border: 1px solid var(--line); border-radius: 25px; place-items: center; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 13%, transparent), transparent 55%), #07101e; }
.sl-shield { display: grid; width: 150px; height: 176px; border: 2px solid var(--accent); border-radius: 60% 60% 48% 48% / 35% 35% 65% 65%; place-items: center; color: var(--accent); box-shadow: inset 0 0 55px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 45px color-mix(in srgb, var(--accent) 18%, transparent); font-size: 2.7rem; }
.sl-list { display: grid; margin: 24px 0 0; padding: 0; gap: 10px; list-style: none; }
.sl-list li { padding-left: 25px; color: #a8b8cc; }
.sl-list li::before { margin-left: -25px; margin-right: 10px; color: var(--success); content: "✓"; font-weight: 800; }
.sl-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; counter-reset: process; }
.sl-process { position: relative; }
.sl-process::before { position: absolute; top: 45px; right: 8%; left: 8%; height: 1px; content: ""; background: linear-gradient(90deg, #27cfff, #7468ff, #f04ca6, #ff875c); opacity: .36; }
.sl-process article { position: relative; min-height: 165px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(150deg, rgba(13,28,52,.82), rgba(5,10,23,.92)); counter-increment: process; }
.sl-process article::before { display: grid; position: relative; z-index: 2; width: 38px; height: 38px; border: 1px solid var(--accent); border-radius: 12px; place-items: center; color: var(--accent); content: "0" counter(process); background: #081225; box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 12%, transparent); font-size: .68rem; font-weight: 800; }
.sl-process article:nth-child(2)::before { color: #8b6cff; border-color: #8b6cff; }.sl-process article:nth-child(3)::before { color: #e64fa4; border-color: #e64fa4; }.sl-process article:nth-child(4)::before { color: #ff875c; border-color: #ff875c; }
.sl-process h3 { margin: 22px 0 8px; font: 700 1rem var(--display); }
.sl-process p { margin: 0; color: #8fa3bc; font-size: .78rem; }
.sl-form-wrap { display: grid; grid-template-columns: .75fr 1.25fr; gap: 32px; }
.sl-form-copy h2 { margin: 12px 0; font: 800 clamp(2rem, 3.25vw, 3.15rem)/1.03 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.sl-form-copy p { color: var(--muted); }
.sl-form { display: grid; padding: 28px; border: 1px solid var(--line); border-radius: 23px; grid-template-columns: repeat(2, 1fr); gap: 15px; background: linear-gradient(145deg, #0d1a30, #070d1b); }
.sl-field { display: grid; gap: 6px; }
.sl-field--full { grid-column: 1 / -1; }
.sl-field label { color: #c9d5e5; font-size: .72rem; font-weight: 700; }
.sl-field input, .sl-field textarea { width: 100%; border: 1px solid rgba(148,163,184,.2); border-radius: 11px; outline: 0; color: #eff6ff; background: #07101f; }
.sl-field input { height: 48px; padding: 0 13px; }
.sl-field textarea { min-height: 112px; padding: 12px 13px; resize: vertical; }
.sl-field :is(input,textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.sl-honeypot { position: absolute; left: -9999px; }
.sl-form__status { min-height: 24px; grid-column: 1 / -1; color: #a8bdd4; font-size: .72rem; }
.sl-form .sl-button { grid-column: 1 / -1; }
.sl-faq { max-width: 860px; margin: 0 auto; }
.sl-faq details { border-bottom: 1px solid var(--line); }
.sl-faq summary { padding: 20px 0; color: #e5edf8; font-weight: 750; cursor: pointer; }
.sl-faq p { margin: 0; padding: 0 0 20px; color: #94a7bf; }
.sl-footer { padding: 52px 0 30px; border-top: 1px solid var(--line); background: #030713; }
.sl-footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 30px; }
.sl-footer h2, .sl-footer h3 { font: 700 1rem var(--display); }
.sl-footer p, .sl-footer a { color: #8fa2ba; font-size: .75rem; }
.sl-footer nav { display: grid; gap: 8px; }
.sl-footer__bottom { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: #667991; font-size: .68rem; }
.sl-footer__logo { display: block; width: 160px; height: 62px; margin-bottom: 8px; object-fit: contain; object-position: left center; }
.sl-reveal { opacity: 0; transform: translateY(20px); transition: opacity .55s ease, transform .55s ease; }
.sl-reveal.is-visible { opacity: 1; transform: none; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 68%, white); outline-offset: 3px; }

@media (max-width: 900px) {
  .sl-nav__links a:not(.sl-nav__cta) { display: none; }
  .sl-hero { min-height: auto; padding: 70px 0; }
  .sl-hero__grid, .sl-security, .sl-form-wrap { grid-template-columns: 1fr; }
  .sl-window { max-width: 620px; width: 100%; margin: 0 auto; transform: none; }
  .sl-card-grid { grid-template-columns: repeat(2, 1fr); }
  .sl-config { grid-template-columns: 1fr; }
  .sl-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-config__preview { position: relative; top: auto; }
  .sl-process { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .sl-container { width: min(100% - 28px, var(--max)); }
  .sl-nav__inner { min-height: 66px; }
  .sl-logo { width: 132px; min-width: 132px; }
  .sl-logo img { height: 50px; }
  .sl-nav__cta { min-height: 42px; padding: 0 13px; font-size: .68rem; }
  .sl-hero { padding: 56px 0; }
  .sl-hero h1 { font-size: clamp(2.7rem, 14vw, 4rem); }
  .sl-hero__lead { font-size: .94rem; }
  .sl-hero__actions { align-items: stretch; flex-direction: column; }
  .sl-button { width: 100%; }
  .sl-window { min-height: 370px; border-radius: 20px; }
  .sl-window__body { min-height: 316px; grid-template-columns: 42px 1fr; }
  .sl-window__main { padding: 12px; }
  .sl-kpis { gap: 6px; }
  .sl-kpis span { min-height: 60px; padding: 8px; }
  .sl-kpis b { font-size: .9rem; }
  .sl-demo-grid { grid-template-columns: 1fr; }
  .sl-chart { min-height: 145px; }
  .sl-feed { display: none; }
  .sl-section { padding: 62px 0; }
  .sl-card-grid, .sl-solutions, .sl-process { grid-template-columns: 1fr; }
  .sl-solution-link { min-height: auto; padding: 20px; grid-template-columns: 1fr; gap: 16px; }
  .sl-solution-link p { max-width: 32rem; }
  .sl-solution-demo { min-height: 180px; }
  .sl-solution-demo--ai { min-height: 205px; }
  .sl-card { min-height: 190px; }
  .sl-config__panel { padding: 18px; }
  .sl-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-module { min-height: 72px; padding: 10px 8px; align-items: flex-start; flex-direction: column; justify-content: center; font-size: .66rem; line-height: 1.3; }
  .sl-security__visual { min-height: 300px; }
  .sl-form { padding: 19px; grid-template-columns: 1fr; }
  .sl-field--full { grid-column: auto; }
  .sl-form .sl-button, .sl-form__status { grid-column: auto; }
  .sl-footer__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .sl-reveal { opacity: 1; transform: none; }
}