:root {
  --ink: #050913;
  --ink-2: #080e1a;
  --panel: #0c1425;
  --panel-2: #111b2e;
  --line: rgba(255, 255, 255, .085);
  --muted: #8c9ab0;
  --dim: #59687f;
  --white: #f8fbff;
  --cyan: #43d9f7;
  --violet: #8b7cff;
  --blue: #5b8cff;
  --green: #3ad3a5;
  --yellow: #f4c75f;
  --red: #fb7185;
  --radius: 22px;
  --shadow: 0 30px 80px rgba(0, 0, 0, .28);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--ink);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 85% 4%, rgba(77, 105, 243, .11), transparent 27rem),
    var(--ink);
  color: var(--white);
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin-top: 0; }
img { max-width: 100%; }

.skip-link {
  position: fixed;
  z-index: 999;
  left: 16px;
  top: 12px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.skip-link:focus { transform: translateY(0); }

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 76px;
  border-bottom: 1px solid transparent;
  background: rgba(5, 9, 19, .64);
  backdrop-filter: blur(20px);
  transition: .25s ease;
}

.site-header.is-scrolled {
  border-color: var(--line);
  background: rgba(5, 9, 19, .92);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .16);
}

.nav-wrap { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  box-shadow: 0 8px 24px rgba(67, 217, 247, .14);
  color: var(--ink);
  font-size: 17px;
  font-weight: 950;
}
.brand-name { font-size: 13px; font-weight: 900; letter-spacing: .18em; }
.brand-product {
  padding: 4px 7px;
  border: 1px solid rgba(67, 217, 247, .18);
  border-radius: 6px;
  background: rgba(67, 217, 247, .07);
  color: var(--cyan);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
}
.main-nav { display: flex; align-items: center; gap: 25px; margin-left: auto; }
.main-nav a { color: #9aa8bc; font-size: 12px; font-weight: 550; transition: color .2s; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--white); }
.main-nav .nav-demo { color: #cad7e8; }

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 22px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(105deg, var(--cyan), var(--violet));
  box-shadow: 0 16px 30px rgba(67, 217, 247, .1);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 18px 34px rgba(67, 217, 247, .16); }
.button:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.button-small { min-height: 40px; padding-inline: 16px; font-size: 11px; }
.button-ghost { border: 1px solid var(--line); background: rgba(255, 255, 255, .04); box-shadow: none; color: var(--white); }
.button-ghost:hover { border-color: rgba(255, 255, 255, .18); background: rgba(255, 255, 255, .07); box-shadow: none; }
.menu-toggle { display: none; margin-left: auto; border: 0; background: transparent; color: #fff; }

.hero {
  position: relative;
  padding: 152px 0 0;
  overflow: hidden;
}
.hero-grid {
  position: absolute;
  inset: 0 0 auto;
  height: 90%;
  opacity: .6;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent);
}
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(110px); }
.glow-one { width: 420px; height: 420px; right: 6%; top: 120px; background: rgba(67, 217, 247, .09); }
.glow-two { width: 360px; height: 360px; left: -10%; top: 240px; background: rgba(139, 124, 255, .08); }
.hero-layout { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 72px; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px;
  border: 1px solid rgba(139, 124, 255, .18);
  border-radius: 999px;
  background: rgba(139, 124, 255, .07);
  color: #b6aefe;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
}
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 12px var(--violet); }
.hero h1 {
  max-width: 620px;
  margin: 25px 0 25px;
  font-size: clamp(42px, 5.2vw, 68px);
  line-height: 1.01;
  letter-spacing: -.052em;
}
.hero h1 span {
  background: linear-gradient(110deg, #fff 5%, #79e6fa 48%, #a99eff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-copy > p { max-width: 570px; margin-bottom: 0; color: var(--muted); font-size: 17px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 32px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 23px; color: var(--dim); font-size: 10px; }
.trust-row span { display: flex; align-items: center; gap: 7px; }
.trust-row i { color: var(--cyan); font-style: normal; }
.hero-product { position: relative; width: 100%; min-width: 0; }
.product-glow { position: absolute; inset: 5% -5% -5%; border-radius: 40px; background: linear-gradient(135deg, rgba(67,217,247,.09), rgba(139,124,255,.08)); filter: blur(38px); }
.dashboard-shell {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: #080d18;
  box-shadow: 0 38px 100px rgba(0,0,0,.4), 0 0 0 7px rgba(255,255,255,.018);
  transform: perspective(1600px) rotateY(-2.5deg) rotateX(1.5deg);
}
.browser-bar { display: flex; height: 47px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--line); color: #435169; font-size: 7px; font-weight: 800; letter-spacing: .18em; }
.browser-dots { display: flex; gap: 5px; }
.browser-dots i { width: 7px; height: 7px; border-radius: 50%; background: #26334a; }
.browser-dots i:first-child { background: #f27b86; }.browser-dots i:nth-child(2) { background: #e8b858; }.browser-dots i:nth-child(3) { background: #4cc99a; }
.browser-bar .live { color: #53cfaa; }.browser-bar .live i { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: #53cfaa; box-shadow: 0 0 8px #53cfaa; }
.dashboard-body { display: flex; min-height: 392px; }
.mini-side { display: flex; width: 58px; align-items: center; flex-direction: column; gap: 19px; padding: 18px 0; border-right: 1px solid var(--line); background: #070b15; }
.mini-logo { display: grid; width: 25px; height: 25px; margin-bottom: 9px; place-items: center; border-radius: 8px; background: linear-gradient(135deg,var(--cyan),var(--violet)); color: var(--ink); font-size: 10px; font-weight: 900; }
.mini-side i { width: 14px; height: 14px; border-radius: 4px; background: #182238; }.mini-side i.active { background: var(--cyan); box-shadow: 0 0 16px rgba(67,217,247,.4); }
.dashboard-main { flex: 1; min-width: 0; padding: 20px; }
.dash-heading { display: flex; align-items: center; justify-content: space-between; }
.dash-heading div { display: flex; flex-direction: column; gap: 3px; }.dash-heading small { color: var(--dim); font-size: 7px; letter-spacing: .15em; }.dash-heading strong { font-size: 14px; }
.dash-heading > span { padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--dim); font-size: 7px; }
.metric-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-top: 15px; }
.metric-grid article { position: relative; overflow: hidden; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.025); }
.metric-grid article::after { position: absolute; content: ""; inset: auto 0 0; height: 1px; background: linear-gradient(90deg,var(--cyan),transparent); }
.metric-grid small { display: block; color: #4b5b74; font-size: 5.7px; letter-spacing: .06em; }.metric-grid strong { display: block; margin-top: 7px; font-size: 13px; }.metric-grid article:first-child strong { color: var(--cyan); }.metric-grid em { display: block; margin-top: 4px; color: var(--green); font-size: 6px; font-style: normal; }
.chart-grid { display: grid; grid-template-columns: 1.7fr .8fr; gap: 9px; margin-top: 9px; }
.chart-grid article { min-height: 156px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.chart-title { display: flex; justify-content: space-between; color: #96a3b6; font-size: 7px; font-weight: 700; }.chart-title em { color: var(--green); font-style: normal; }.chart-title b { color: var(--green); font-size: 6px; }
.bars { display: flex; height: 103px; align-items: flex-end; gap: 5px; margin-top: 14px; border-bottom: 1px solid rgba(255,255,255,.05); background: repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px, transparent 1px 26px); }
.bars i { flex: 1; min-width: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(to top,rgba(67,217,247,.16),var(--cyan)); }
.pulse-ring { display: grid; width: 88px; height: 88px; margin: 15px auto 0; place-items: center; border-radius: 50%; background: conic-gradient(var(--cyan) 0 86%,#172136 86%); }
.pulse-ring::before { position: absolute; width: 68px; height: 68px; border-radius: 50%; background: #0b1220; content: ""; }.pulse-ring span { position: relative; font-size: 18px; font-weight: 900; }.pulse-ring small { font-size: 9px; }.ai-pulse p { margin: 7px 0 0; color: var(--dim); font-size: 6px; text-align: center; }
.ai-insight { display: flex; align-items: center; gap: 9px; margin-top: 9px; padding: 10px; border: 1px solid rgba(139,124,255,.14); border-radius: 11px; background: rgba(139,124,255,.055); }
.ai-insight > span { color: var(--violet); }.ai-insight p { flex: 1; margin: 0; color: #8f9cb0; font-size: 6.5px; line-height: 1.5; }.ai-insight p strong { display: block; color: var(--violet); font-size: 5.5px; letter-spacing: .12em; }.ai-insight b { color: var(--violet); }
.floating-card { position: absolute; display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(13,21,38,.94); box-shadow: 0 15px 35px rgba(0,0,0,.3); backdrop-filter: blur(14px); }
.floating-card p { margin: 0; color: var(--dim); font-size: 7px; line-height: 1.45; }.floating-card strong { display: block; color: #dce6f5; font-size: 8px; }.floating-card b { color: var(--green); font-size: 6px; }
.float-icon { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; background: rgba(67,217,247,.1); color: var(--cyan); font-size: 8px; font-weight: 800; }
.floating-lead { right: -30px; top: 77px; }.floating-revenue { left: -32px; bottom: 45px; }.floating-revenue > span { display: grid; width: 26px; height: 26px; place-items: center; border-radius: 8px; background: rgba(58,211,165,.1); color: var(--green); font-size: 12px; }
.hero-stats { position: relative; display: grid; grid-template-columns: repeat(5,1fr); margin-top: 90px; border-block: 1px solid var(--line); }
.hero-stats div { padding: 25px 20px; border-right: 1px solid var(--line); text-align: center; }.hero-stats div:last-child { border: 0; }
.hero-stats strong { display: block; color: #dce7f6; font-size: 18px; }.hero-stats span { display: block; margin-top: 5px; color: var(--dim); font-size: 9px; }

.section { padding: 112px 0; }
.section-heading { max-width: 720px; margin-bottom: 52px; }
.section-heading.centered { margin-inline: auto; text-align: center; }
.kicker { color: var(--cyan); font-size: 9px; font-weight: 800; letter-spacing: .22em; }
.section h2 { margin: 17px 0 17px; font-size: clamp(33px, 4.2vw, 51px); line-height: 1.08; letter-spacing: -.043em; }
.section-heading p, .feature-copy > p, .security-copy > p, .cta-copy > p { margin-bottom: 0; color: var(--muted); font-size: 16px; line-height: 1.75; }
.problems { border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.problems-grid { display: grid; grid-template-columns: repeat(4,1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.problems-grid article { min-height: 195px; padding: 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); transition: background .2s; }
.problems-grid article:hover { background: rgba(255,255,255,.026); }.problems-grid article:nth-child(4n) { border-right: 0; }.problems-grid article:nth-child(n+5) { border-bottom: 0; }
.problems-grid article > span { color: #34435a; font-size: 9px; font-weight: 800; }.problems-grid h3 { margin: 38px 0 9px; font-size: 14px; }.problems-grid p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.7; }
.pillar-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.pillar-card { position: relative; overflow: hidden; min-height: 355px; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(12,20,37,.68); transition: transform .25s, border-color .25s; }
.pillar-card:hover { transform: translateY(-5px); }.pillar-card::after { position: absolute; content: ""; inset: auto 0 0; height: 2px; background: linear-gradient(90deg,currentColor,transparent); opacity: .55; }
.pillar-card.cyan { color: var(--cyan); }.pillar-card.violet { color: var(--violet); }.pillar-card.blue { color: var(--blue); }.pillar-card.green { color: var(--green); }
.pillar-number { position: absolute; top: 25px; right: 26px; color: #38465b; font-size: 9px; }.pillar-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid currentColor; border-radius: 13px; background: color-mix(in srgb,currentColor 9%,transparent); font-size: 15px; font-weight: 900; }
.pillar-card h3 { margin: 25px 0 11px; color: var(--white); font-size: 19px; }.pillar-card p { min-height: 66px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.pillar-card ul { margin: 28px 0 0; padding: 0; list-style: none; }.pillar-card li { position: relative; padding: 8px 0 8px 17px; border-top: 1px solid rgba(255,255,255,.055); color: #718097; font-size: 10px; }.pillar-card li::before { position: absolute; left: 0; color: currentColor; content: "·"; }

.receptionist { border-block: 1px solid var(--line); background: rgba(255,255,255,.015); }
.feature-layout { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 90px; }
.feature-copy h2 { max-width: 570px; }
.feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 28px; }
.feature-list span { padding: 12px 13px; border: 1px solid var(--line); border-radius: 10px; color: #aab6c8; font-size: 10px; }.feature-list span::before { margin-right: 8px; color: var(--cyan); content: "✓"; }
.text-link { display: inline-flex; align-items: center; gap: 9px; margin-top: 30px; color: var(--cyan); font-size: 12px; font-weight: 750; }.text-link:hover { color: var(--white); }.text-link span { font-size: 17px; }
.chat-demo { overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 25px; background: #080e19; box-shadow: var(--shadow); }
.chat-head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.chat-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: linear-gradient(135deg,rgba(67,217,247,.2),rgba(139,124,255,.2)); color: var(--cyan); font-size: 10px; font-weight: 800; }
.chat-head p { margin: 0; }.chat-head strong { display: block; font-size: 12px; }.chat-head small { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--dim); font-size: 8px; }.chat-head small i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }.chat-head > b { margin-left: auto; color: var(--green); font-size: 7px; letter-spacing: .13em; }
.chat-body { display: flex; min-height: 450px; flex-direction: column; gap: 12px; padding: 24px; background: radial-gradient(circle at center,rgba(67,217,247,.025),transparent 60%); }
.message { max-width: 76%; padding: 12px 14px; border: 1px solid var(--line); color: #c2ccda; font-size: 10px; line-height: 1.65; }
.message small { display: block; margin-top: 6px; color: #4a5870; font-size: 7px; text-align: right; }.message em { display: block; margin-bottom: 4px; color: var(--cyan); font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .1em; }
.incoming { align-self: flex-start; border-radius: 4px 14px 14px; background: rgba(255,255,255,.04); }.outgoing { align-self: flex-end; border-color: rgba(67,217,247,.14); border-radius: 14px 4px 14px 14px; background: rgba(67,217,247,.065); }
.system-event { align-self: center; padding: 7px 10px; border-radius: 999px; background: rgba(139,124,255,.07); color: var(--violet); font-size: 7px; }
.booking { display: flex; align-self: center; align-items: center; gap: 10px; padding: 10px 13px; border: 1px solid rgba(58,211,165,.15); border-radius: 11px; background: rgba(58,211,165,.055); color: var(--green); }.booking > span { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; background: rgba(58,211,165,.1); }.booking p { margin: 0; color: var(--dim); font-size: 8px; }.booking strong { display: block; color: var(--green); font-size: 9px; }
.crm-sync { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-top: 1px solid rgba(139,124,255,.14); background: rgba(139,124,255,.055); }.crm-sync > span { display: grid; width: 31px; height: 31px; place-items: center; border-radius: 9px; background: rgba(139,124,255,.12); color: var(--violet); font-size: 7px; font-weight: 800; }.crm-sync p { margin: 0; color: var(--dim); font-size: 8px; }.crm-sync strong { display: block; color: #c7d1df; font-size: 9px; }.crm-sync b { margin-left: auto; color: var(--green); }

.geo-panel { display: grid; grid-template-columns: 380px 1fr; min-height: 570px; overflow: hidden; border: 1px solid var(--line); border-radius: 25px; background: #0a111e; box-shadow: var(--shadow); }
.geo-sidebar { padding: 22px; border-right: 1px solid var(--line); }.geo-filters { display: flex; gap: 8px; }.geo-filters span { flex: 1; padding: 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--dim); font-size: 8px; }.geo-filters b { color: #aeb9c8; }.geo-sidebar h3 { margin: 24px 0 12px; font-size: 12px; }
.geo-sidebar article { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid rgba(255,255,255,.055); }.map-pin { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(67,217,247,.1); color: var(--cyan); font-size: 9px; font-weight: 800; }.violet-pin { background: rgba(139,124,255,.1)!important; color: var(--violet)!important; }.blue-pin { background: rgba(91,140,255,.1)!important; color: var(--blue)!important; }.green-pin { background: rgba(58,211,165,.1)!important; color: var(--green)!important; }
.geo-sidebar article p { flex: 1; margin: 0; color: var(--dim); font-size: 8px; line-height: 1.5; }.geo-sidebar article strong { display: block; color: #bec9d8; font-size: 9px; }.geo-sidebar article b { color: var(--green); font-size: 10px; }
.map-action { width: 100%; margin-top: 18px; padding: 12px; border: 1px solid rgba(67,217,247,.15); border-radius: 10px; background: rgba(67,217,247,.07); color: var(--cyan); cursor: pointer; font-size: 9px; font-weight: 750; }.map-action span { float: right; }
.fake-map { position: relative; overflow: hidden; background-color: #0c1523; background-image: radial-gradient(circle,rgba(255,255,255,.06) 1px,transparent 1px); background-size: 28px 28px; }
.fake-map::after { position: absolute; inset: 0; background: radial-gradient(circle at 48% 45%,rgba(67,217,247,.06),transparent 32%); content:""; }
.road { position: absolute; z-index: 1; background: #202d42; box-shadow: 0 0 0 5px #111c2c; }.road-one { width: 130%; height: 7px; left: -10%; top: 44%; transform: rotate(-15deg); }.road-two { width: 8px; height: 130%; left: 54%; top: -10%; transform: rotate(12deg); }.road-three { width: 100%; height: 6px; left: 0; top: 74%; transform: rotate(8deg); }
.map-area { position: absolute; border: 1px solid rgba(58,211,165,.06); border-radius: 45% 55% 65% 35%; background: rgba(58,211,165,.025); }.a1 { width: 180px; height: 120px; left: 5%; top: 7%; }.a2 { width: 210px; height: 160px; right: 8%; top: 9%; }.a3 { width: 170px; height: 130px; left: 12%; bottom: 8%; }.a4 { width: 230px; height: 140px; right: 4%; bottom: 2%; }
.map-unit, .opportunity { position: absolute; z-index: 3; display: grid; place-items: center; border: 3px solid rgba(5,9,19,.75); border-radius: 50%; box-shadow: 0 8px 25px rgba(0,0,0,.4); font-weight: 900; }
.map-unit { width: 48px; height: 48px; left: 48%; top: 43%; background: linear-gradient(135deg,var(--cyan),var(--violet)); color: var(--ink); }.map-unit::after { position: absolute; z-index: -1; width: 116px; height: 116px; border: 1px solid rgba(67,217,247,.25); border-radius: 50%; box-shadow: 0 0 0 28px rgba(67,217,247,.025); content:""; }.map-unit small { position: absolute; top: 52px; width: 80px; color: #b9c5d5; font-size: 7px; text-align: center; }
.opportunity { width: 37px; height: 37px; border-color: #0c1523; background: rgba(67,217,247,.95); color: var(--ink); cursor: pointer; font-size: 10px; }.opportunity span { position: absolute; left: 28px; top: -7px; padding: 4px 5px; border-radius: 6px; background: #101b2c; color: var(--green); font-size: 7px; }.o1 { left: 22%; top: 22%; }.o2 { right: 18%; top: 22%; }.o3 { left: 18%; bottom: 18%; }.o4 { right: 20%; bottom: 13%; }
.map-legend { position: absolute; z-index: 3; left: 20px; bottom: 18px; display: flex; gap: 14px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(8,14,25,.88); color: var(--dim); font-size: 7px; }.map-legend i { display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; }.cyan-bg{background:var(--cyan)}.violet-bg{background:var(--violet)}.blue-bg{background:var(--blue)}

.modules { border-block: 1px solid var(--line); background: rgba(255,255,255,.012); }
.modules-grid { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.modules-grid span { position: relative; min-height: 78px; padding: 28px 24px 24px 46px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: #9daabd; font-size: 11px; transition: background .2s,color .2s; }.modules-grid span::before { position: absolute; left: 23px; color: var(--cyan); content: "✓"; }.modules-grid span:hover { background: rgba(67,217,247,.025); color: var(--white); }
.segment-tabs { display: flex; width: max-content; margin: 0 auto 24px; padding: 5px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }.segment-tabs button { min-width: 150px; padding: 12px 20px; border: 0; border-radius: 10px; background: transparent; color: var(--dim); cursor: pointer; font-size: 11px; font-weight: 700; }.segment-tabs button[aria-selected="true"] { background: rgba(255,255,255,.075); color: var(--white); box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.segment-panel { display: grid; grid-template-columns: .7fr 1.3fr; gap: 60px; padding: 48px; border: 1px solid var(--line); border-radius: 24px; background: linear-gradient(135deg,rgba(67,217,247,.04),rgba(139,124,255,.035)); }
.segment-panel[hidden] { display: none; }
.segment-intro > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: linear-gradient(135deg,rgba(67,217,247,.16),rgba(139,124,255,.16)); color: var(--cyan); font-weight: 900; }.segment-intro h3 { margin: 23px 0 11px; font-size: 23px; line-height: 1.25; }.segment-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.8; }
.segment-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 0; list-style: none; }.segment-panel li { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(5,9,19,.34); color: #9caabd; font-size: 10px; }.segment-panel li::before { margin-right: 9px; color: var(--cyan); content:"✓"; }

.security { border-block: 1px solid var(--line); background: rgba(255,255,255,.015); }.security-layout { display: grid; grid-template-columns: .75fr 1.25fr; align-items: center; gap: 80px; }.security-note { display: flex; align-items: flex-start; gap: 12px; margin-top: 28px; padding: 15px; border: 1px solid rgba(244,199,95,.14); border-radius: 12px; background: rgba(244,199,95,.045); }.security-note strong { color: var(--yellow); font-size: 10px; }.security-note span { color: var(--dim); font-size: 9px; line-height: 1.5; }
.security-grid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }.security-grid article { min-height: 160px; padding: 23px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }.security-grid article > span { color: #35445a; font-size: 8px; }.security-grid h3 { margin: 26px 0 7px; font-size: 13px; }.security-grid p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.65; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); margin: 0; padding: 0; list-style: none; counter-reset: step; }.steps li { position: relative; display: flex; gap: 16px; min-height: 175px; padding: 25px; border: 1px solid var(--line); border-right: 0; }.steps li:last-child { border-right: 1px solid var(--line); }.steps > li > span { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: rgba(67,217,247,.07); color: var(--cyan); font-size: 8px; font-weight: 800; }.steps h3 { margin: 5px 0 10px; font-size: 13px; }.steps p { margin: 0; color: var(--dim); font-size: 10px; line-height: 1.7; }.steps li::after { position: absolute; z-index: 2; right: -8px; top: 38px; width: 15px; height: 15px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--ink); transform: rotate(45deg); content: ""; }.steps li:last-child::after { display: none; }

.final-cta { padding-top: 40px; }.cta-shell { position: relative; display: grid; grid-template-columns: 1fr .9fr; gap: 60px; overflow: hidden; padding: 66px; border: 1px solid rgba(67,217,247,.14); border-radius: 30px; background: radial-gradient(circle at 6% 20%,rgba(67,217,247,.08),transparent 30%),radial-gradient(circle at 90% 90%,rgba(139,124,255,.08),transparent 35%),#0a111f; }
.cta-shell::before { position: absolute; inset: 0; opacity: .38; background-image: linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px); background-size: 42px 42px; content:""; }.cta-shell > * { position: relative; }
.cta-copy h2 { margin-top: 18px; }.cta-copy .button { margin-top: 30px; }.api-note { display: flex; gap: 10px; margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); }.api-note > span { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--cyan); font-size: 10px; }.api-note p { margin: 0; color: var(--dim); font-size: 9px; line-height: 1.7; }
.contact-form { padding: 27px; border: 1px solid rgba(255,255,255,.1); border-radius: 21px; background: rgba(5,9,19,.78); box-shadow: var(--shadow); }.form-title > span { color: var(--violet); font-size: 8px; font-weight: 800; letter-spacing: .16em; }.form-title h3 { margin: 8px 0 20px; font-size: 18px; }.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }.form-grid label { display: block; }.form-grid label.full { grid-column: 1/-1; }.form-grid label > span { display: block; margin: 0 0 6px 2px; color: #7d8ba0; font-size: 8px; font-weight: 700; }
.form-grid input,.form-grid select,.form-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: rgba(255,255,255,.035); color: var(--white); font-size: 10px; transition: border .2s; }.form-grid input,.form-grid select { height: 41px; padding: 0 12px; }.form-grid textarea { padding: 11px 12px; resize: vertical; }.form-grid select option { background: var(--panel); }.form-grid input::placeholder,.form-grid textarea::placeholder { color: #3e4b61; }.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus { border-color: rgba(67,217,247,.4); }.form-submit { width: 100%; margin-top: 16px; }.form-submit:disabled { opacity: .7; cursor: wait; }.form-privacy { margin: 10px 0 0; color: #435066; font-size: 7px; text-align: center; }.form-success { display: flex; align-items: flex-start; gap: 13px; margin-top: 17px; padding: 15px; border: 1px solid rgba(58,211,165,.17); border-radius: 12px; background: rgba(58,211,165,.055); }.form-success[hidden] { display: none; }.form-success > span { display: grid; width: 28px; height: 28px; flex: 0 0 auto; place-items: center; border-radius: 8px; background: rgba(58,211,165,.1); color: var(--green); }.form-success strong { color: var(--green); font-size: 10px; }.form-success p { margin: 5px 0 0; color: var(--dim); font-size: 8px; line-height: 1.6; }

.site-footer { margin-top: 90px; border-top: 1px solid var(--line); }.footer-grid { display: grid; grid-template-columns: .7fr 1fr .8fr; align-items: start; gap: 55px; padding: 50px 0 40px; }.footer-grid > p { margin: 0; color: var(--dim); font-size: 11px; line-height: 1.8; }.footer-grid > div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }.footer-grid > div a { color: var(--dim); font-size: 10px; }.footer-grid > div a:hover { color: var(--white); }.footer-bottom { display: flex; justify-content: space-between; padding: 18px 0 28px; border-top: 1px solid var(--line); color: #3e4c61; font-size: 8px; }
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s ease,transform .65s ease; }.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 1080px) {
  .main-nav { gap: 17px; }.header-cta { display: none; }
  .hero-layout { grid-template-columns: 1fr; gap: 65px; }.hero-copy { max-width: 780px; }.hero h1 { max-width: 820px; }.hero-product { width: min(760px,100%); margin: 0 auto; }
  .pillar-grid { grid-template-columns: 1fr 1fr; }.problems-grid { grid-template-columns: repeat(2,1fr); }.problems-grid article:nth-child(2n) { border-right: 0; }.problems-grid article:nth-child(n+5) { border-bottom: 1px solid var(--line); }.problems-grid article:nth-child(n+7) { border-bottom: 0; }
  .feature-layout { grid-template-columns: 1fr; gap: 50px; }.feature-copy { max-width: 720px; }.chat-demo { width: min(760px,100%); margin: 0 auto; }
  .geo-panel { grid-template-columns: 330px 1fr; }.modules-grid { grid-template-columns: repeat(3,1fr); }
  .security-layout { grid-template-columns: 1fr; gap: 50px; }.security-copy { max-width: 730px; }
  .steps { grid-template-columns: 1fr 1fr; }.steps li:nth-child(2) { border-right: 1px solid var(--line); }.steps li:nth-child(2)::after { display:none; }.steps li:nth-child(n+3) { border-top:0; }
  .cta-shell { padding: 45px; gap: 42px; }
}

@media (max-width: 800px) {
  .container { width: min(100% - 30px, 680px); }
  .site-header { height: 68px; }.nav-wrap { gap: 12px; }.brand-name { font-size: 11px; }.brand-product { display:none; }
  .menu-toggle { position: relative; display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid var(--line); border-radius: 11px; }
  .menu-toggle span { position: absolute; width: 16px; height: 1.5px; background: #fff; transition: .2s; }.menu-toggle span:first-child { transform: translateY(-5px); }.menu-toggle span:last-child { transform: translateY(5px); }.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }.menu-toggle[aria-expanded="true"] span:first-child { transform: rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
  .main-nav { position: fixed; inset: 68px 0 auto; display: none; padding: 15px; border-bottom: 1px solid var(--line); background: rgba(5,9,19,.98); box-shadow: 0 30px 50px rgba(0,0,0,.3); }.main-nav.is-open { display: grid; }.main-nav a { padding: 13px 15px; border-radius: 10px; }.main-nav a:hover { background: rgba(255,255,255,.04); }
  .hero { padding-top: 120px; }.hero h1 { font-size: clamp(41px,10.7vw,62px); }.hero-copy > p { font-size: 15px; }.floating-card { display:none; }
  .metric-grid { grid-template-columns: 1fr 1fr; }.dashboard-shell { transform:none; }.dashboard-body { min-height: 450px; }.chart-grid { grid-template-columns: 1fr; }.ai-pulse { display:none; }
  .hero-stats { grid-template-columns: repeat(2,1fr); margin-top: 65px; }.hero-stats div { border-bottom: 1px solid var(--line); }.hero-stats div:nth-child(2n) { border-right:0; }.hero-stats div:last-child { grid-column:1/-1; border-bottom:0; }
  .section { padding: 86px 0; }.section-heading { margin-bottom: 38px; }
  .problems-grid article { min-height: 180px; }.pillar-card { min-height: 320px; }.geo-panel { grid-template-columns: 1fr; }.geo-sidebar { border-right:0; border-bottom: 1px solid var(--line); }.fake-map { min-height: 420px; }
  .modules-grid { grid-template-columns:1fr 1fr; }.segment-panel { grid-template-columns:1fr; gap:35px; padding:32px; }
  .cta-shell { grid-template-columns:1fr; padding:38px; }.footer-grid { grid-template-columns:1fr 1fr; }.footer-grid > p { grid-column:1/-1; grid-row:2; }
}

@media (max-width: 560px) {
  .brand-mark { width:34px;height:34px; }.hero-actions { flex-direction:column; }.hero-actions .button { width:100%; }.trust-row { gap:11px; }
  .browser-bar > span:nth-child(2) { display:none; }.dashboard-main { padding:13px; }.mini-side { width:43px; }.metric-grid article { padding:10px; }.metric-grid strong { font-size:11px; }.dash-heading strong { font-size:11px; }
  .problems-grid,.pillar-grid { grid-template-columns:1fr; }.problems-grid article { min-height:auto; border-right:0!important; border-bottom:1px solid var(--line)!important; }.problems-grid article:last-child { border-bottom:0!important; }.problems-grid h3 { margin-top:22px; }
  .feature-list { grid-template-columns:1fr; }.chat-body { min-height:auto; padding:17px; }.message { max-width:90%; }.geo-sidebar { padding:17px; }.fake-map { min-height:360px; }.map-legend { display:none; }
  .modules-grid { grid-template-columns:1fr; }.modules-grid span { min-height:64px; padding-block:22px; }
  .segment-tabs { width:100%; }.segment-tabs button { min-width:0; flex:1; padding-inline:7px; font-size:9px; }.segment-panel { padding:23px; }.segment-panel ul { grid-template-columns:1fr; }
  .security-grid { grid-template-columns:1fr; }.steps { grid-template-columns:1fr; }.steps li { border-right:1px solid var(--line); border-top:0; }.steps li:first-child { border-top:1px solid var(--line); }.steps li::after { display:none; }
  .cta-shell { width:100%; padding:32px 17px; border-radius:0; }.final-cta .container { width:100%; }.cta-copy { padding:0 5px; }.form-grid { grid-template-columns:1fr; }.form-grid label.full { grid-column:auto; }.contact-form { padding:20px; }
  .footer-grid { grid-template-columns:1fr; gap:25px; }.footer-grid > p { grid-column:auto; grid-row:auto; }.footer-bottom { flex-direction:column; gap:8px; }
}

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