:root {
  --navy: #061322;
  --navy-2: #0a1d32;
  --surface: #102943;
  --surface-2: #153553;
  --cyan: #28c8ff;
  --cyan-2: #0689d7;
  --green: #42dda4;
  --text: #f4f9ff;
  --muted: #9db3ca;
  --line: rgba(111, 197, 240, .18);
  --shadow: 0 28px 75px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    radial-gradient(circle at 14% 8%, rgba(24, 116, 205, .18), transparent 31rem),
    radial-gradient(circle at 87% 38%, rgba(20, 198, 255, .09), transparent 27rem),
    var(--navy);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
}
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  width: 100%;
  min-height: 76px;
  padding: 12px clamp(20px, 5vw, 76px);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 19, 34, .88);
  backdrop-filter: blur(18px);
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand-logo { display: block; width: 52px; height: 52px; border-radius: 12px; object-fit: contain; box-shadow: 0 0 24px rgba(40, 200, 255, .14); }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 18px; letter-spacing: 2.5px; }
.brand strong span { color: var(--cyan); }
.brand small { color: var(--muted); font-size: 10px; letter-spacing: .2px; }
.site-header nav { display: flex; align-items: center; gap: 24px; color: #c8d8e8; font-size: 14px; }
.site-header nav a:hover { color: var(--cyan); }
.nav-video { padding: 0; border: 0; background: transparent; color: #c8d8e8; }
.nav-video:hover { color: var(--cyan); }
.nav-contact { padding: 10px 15px; border: 1px solid rgba(40, 200, 255, .48); border-radius: 10px; color: var(--cyan) !important; }

main { overflow: hidden; }
.hero {
  position: relative;
  display: grid;
  width: min(1440px, 100%);
  min-height: 650px;
  margin: auto;
  padding: clamp(62px, 8vw, 115px) clamp(20px, 6vw, 88px) 72px;
  grid-template-columns: minmax(0, .93fr) minmax(420px, 1.07fr);
  align-items: center;
  gap: clamp(42px, 6vw, 88px);
}
.hero::before {
  position: absolute;
  top: 2%;
  left: 43%;
  width: 1px;
  height: 94%;
  background: linear-gradient(transparent, rgba(40, 200, 255, .25), transparent);
  content: "";
}
.hero-copy { position: relative; z-index: 2; }
.eyebrow { margin: 0 0 18px; color: var(--green); font-size: 12px; font-weight: 800; letter-spacing: 1.8px; text-transform: uppercase; }
.eyebrow span { display: inline-block; width: 21px; height: 2px; margin: 0 8px 3px 0; background: var(--green); }
h1 { max-width: 680px; margin: 0; font-size: clamp(38px, 4.5vw, 66px); line-height: 1.07; letter-spacing: -2.2px; }
h1 em { display: block; color: var(--cyan); font-style: normal; }
.hero-lead { max-width: 650px; margin: 26px 0 30px; color: #b6c7d9; font-size: clamp(16px, 1.55vw, 20px); }
.hero-actions, .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  min-height: 48px;
  padding: 12px 19px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 11px;
  font-weight: 800;
}
button.button { border: 0; }
.button-primary { background: linear-gradient(135deg, var(--cyan), #078bd8); box-shadow: 0 12px 34px rgba(8, 145, 215, .28); color: #03121f; }
.button-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
.button-secondary { border: 1px solid rgba(145, 206, 237, .3); background: rgba(17, 43, 69, .58); color: #dce9f5; }
.button-secondary:hover { border-color: rgba(40, 200, 255, .7); color: var(--cyan); }
.hero-note { margin-top: 16px; color: #708ba5; font-size: 12px; }

.video-card {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(40, 200, 255, .34);
  border-radius: 22px;
  background: #06101d;
  box-shadow: var(--shadow);
  color: var(--text);
  text-align: left;
  aspect-ratio: 16 / 9;
}
.video-card::after { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 48%, rgba(3, 13, 25, .88)); content: ""; }
.video-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.video-card:hover img { transform: scale(1.025); }
.video-glow { position: absolute; inset: 20% 29%; border-radius: 50%; box-shadow: 0 0 80px 20px rgba(35, 193, 255, .13); }
.play { position: absolute; z-index: 3; top: 50%; left: 50%; display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(14, 45, 72, .78); box-shadow: 0 0 38px rgba(40, 200, 255, .42); transform: translate(-50%, -50%); backdrop-filter: blur(10px); }
.play b { margin-left: 5px; color: var(--cyan); font-size: 25px; }
.video-label { position: absolute; z-index: 3; right: 24px; bottom: 21px; left: 24px; }
.video-label strong, .video-label small { display: block; }
.video-label strong { font-size: 16px; }
.video-label small { color: var(--muted); }

.proof { display: grid; width: min(1240px, calc(100% - 40px)); margin: 0 auto 110px; padding: 22px 8px; grid-template-columns: repeat(3, 1fr); border-block: 1px solid var(--line); }
.proof div { padding: 4px 32px; border-right: 1px solid var(--line); }
.proof div:last-child { border: 0; }
.proof strong, .proof span { display: block; }
.proof strong { color: var(--cyan); font-size: 15px; }
.proof span { margin-top: 3px; color: var(--muted); font-size: 13px; }

.solutions { width: min(1240px, calc(100% - 40px)); margin: auto; padding-bottom: 120px; }
.section-heading { max-width: 780px; margin-bottom: 38px; }
.section-heading h2, .cta h2 { margin: 0; font-size: clamp(29px, 3.1vw, 46px); line-height: 1.14; letter-spacing: -1px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-grid article { min-height: 205px; padding: 25px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(18, 48, 77, .72), rgba(8, 25, 43, .86)); transition: border-color .2s ease, transform .2s ease; }
.feature-grid article:hover { border-color: rgba(40, 200, 255, .5); transform: translateY(-3px); }
.feature-grid i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(40,200,255,.35); border-radius: 11px; background: rgba(40, 200, 255, .08); color: var(--cyan); font-style: normal; font-size: 21px; }
.feature-grid h3 { margin: 18px 0 8px; font-size: 18px; }
.feature-grid p { margin: 0; color: var(--muted); font-size: 14px; }

.cta { display: flex; width: min(1240px, calc(100% - 40px)); margin: 0 auto 90px; padding: clamp(30px, 5vw, 58px); align-items: center; justify-content: space-between; gap: 35px; border: 1px solid rgba(40,200,255,.25); border-radius: 23px; background: radial-gradient(circle at 100% 0, rgba(40, 200, 255, .18), transparent 40%), linear-gradient(135deg, #102b47, #091a2d); box-shadow: var(--shadow); }
.cta > div:first-child { max-width: 700px; }
footer { display: flex; min-height: 80px; padding: 20px clamp(20px, 6vw, 88px); align-items: center; justify-content: center; gap: 28px; border-top: 1px solid var(--line); color: #7992aa; font-size: 13px; }
footer a:hover { color: var(--cyan); }

.video-modal { position: fixed; inset: 0; z-index: 3000; display: grid; padding: 24px; place-items: center; }
.video-backdrop { position: absolute; inset: 0; background: rgba(1, 7, 13, .86); backdrop-filter: blur(10px); }
.video-dialog { position: relative; z-index: 1; width: min(1180px, 100%); overflow: hidden; border: 1px solid rgba(40, 200, 255, .34); border-radius: 18px; background: #071523; box-shadow: var(--shadow); }
.video-dialog header { display: flex; min-height: 68px; padding: 12px 18px; align-items: center; justify-content: space-between; }
.video-dialog header strong, .video-dialog header small { display: block; }
.video-dialog header small { color: var(--muted); }
.video-dialog header button { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 25px; }
.video-dialog video { display: block; width: 100%; max-height: calc(100vh - 140px); background: #020810; aspect-ratio: 16 / 9; }

.public-tracky { position: fixed; right: 18px; bottom: 8px; z-index: 2000; color: var(--text); }
.tracky-launcher { position: relative; display: block; width: 145px; height: 168px; padding: 0; overflow: visible; border: 0; background: transparent; filter: drop-shadow(0 18px 19px rgba(0,0,0,.5)); }
.tracky-body { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tracky-body { z-index: 1; }
.tracky-closed { z-index: 2; opacity: 0; animation: trackyBlink 5.7s 1.8s infinite; }
.tracky-bubble { position: absolute; right: 125px; bottom: 128px; width: 225px; padding: 10px 13px; border: 1px solid rgba(40,200,255,.35); border-radius: 13px 13px 3px 13px; background: rgba(11, 34, 56, .96); box-shadow: 0 15px 42px rgba(0,0,0,.4); font-size: 12px; font-weight: 750; }
.tracky-panel { position: absolute; right: 5px; bottom: 162px; display: flex; width: min(410px, calc(100vw - 26px)); max-height: min(610px, calc(100vh - 190px)); overflow: hidden; flex-direction: column; border: 1px solid rgba(40,200,255,.32); border-radius: 18px; background: rgba(7, 25, 43, .985); box-shadow: var(--shadow); }
.tracky-panel > header { display: grid; min-height: 68px; padding: 9px 12px; grid-template-columns: 45px 1fr 38px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); background: #102b47; }
.mini-avatar { display: grid; width: 43px; height: 43px; overflow: hidden; place-items: center; border: 1px solid rgba(40,200,255,.35); border-radius: 50%; background: #081827; }
.mini-avatar img { width: 50px; transform: translateY(4px); }
.tracky-panel header strong, .tracky-panel header small { display: block; }
.tracky-panel header small { color: var(--green); font-size: 11px; }
.tracky-panel header small span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.tracky-panel header button { width: 35px; height: 35px; border: 0; border-radius: 9px; background: rgba(255,255,255,.05); color: #b8c9d9; font-size: 21px; }
.tracky-messages { display: flex; min-height: 220px; padding: 15px; overflow-y: auto; flex-direction: column; gap: 10px; }
.tracky-message { max-width: 88%; padding: 10px 12px; border-radius: 13px; font-size: 13px; line-height: 1.45; }
.tracky-message.is-tracky { align-self: flex-start; border: 1px solid rgba(150,190,225,.14); border-radius: 5px 13px 13px; background: #142f4c; }
.tracky-message.is-user { align-self: flex-end; border-radius: 13px 5px 13px 13px; background: linear-gradient(135deg, #24c6ff, #078dd8); color: #03131f; font-weight: 700; }
.message-actions { display: flex; margin-top: 9px; flex-wrap: wrap; gap: 7px; }
.message-actions a, .message-actions button { padding: 7px 9px; border: 1px solid rgba(40,200,255,.4); border-radius: 8px; background: rgba(40,200,255,.08); color: #aeeaff; font-size: 11px; font-weight: 800; }
.tracky-suggestions { display: flex; padding: 0 12px 11px; overflow-x: auto; gap: 7px; }
.tracky-suggestions button { flex: 0 0 auto; padding: 7px 10px; border: 1px solid rgba(40,200,255,.35); border-radius: 999px; background: rgba(40,200,255,.07); color: #bcecff; font-size: 11px; }
.tracky-form { display: grid; padding: 10px; grid-template-columns: 1fr 44px; gap: 8px; border-top: 1px solid var(--line); }
.tracky-form input { min-width: 0; height: 43px; padding: 0 12px; border: 1px solid rgba(40,200,255,.43); border-radius: 10px; outline: none; background: #061522; color: var(--text); }
.tracky-form input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(40,200,255,.09); }
.tracky-form button { border: 0; border-radius: 10px; background: var(--cyan); color: #031522; font-size: 20px; font-weight: 900; }
.tracky-privacy { margin: 0; padding: 0 12px 10px; color: #68849e; font-size: 9px; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@keyframes trackyBlink { 0%, 44%, 47%, 100% { opacity: 0; } 45%, 46% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

@media (max-width: 900px) {
  .site-header nav > a:first-child { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero::before { display: none; }
  .video-card { max-width: 720px; }
  .proof { grid-template-columns: 1fr; }
  .proof div { padding: 15px; border-right: 0; border-bottom: 1px solid var(--line); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .cta { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 600px) {
  .site-header { min-height: 66px; padding: 9px 14px; }
  .brand small, .nav-video, .nav-contact { display: none; }
  .hero { padding: 55px 18px 55px; gap: 35px; }
  h1 { font-size: 40px; }
  .hero-actions .button { width: 100%; }
  .solutions { width: calc(100% - 28px); padding-bottom: 75px; }
  .feature-grid { grid-template-columns: 1fr; }
  .proof { width: calc(100% - 28px); margin-bottom: 75px; }
  .cta { width: calc(100% - 28px); margin-bottom: 70px; }
  footer { align-items: flex-start; flex-direction: column; gap: 8px; }
  .public-tracky { right: 5px; }
  .tracky-launcher { width: 116px; height: 135px; }
  .tracky-panel { right: 3px; bottom: 132px; }
  .tracky-bubble { right: 101px; bottom: 102px; width: 190px; }
  .video-modal { padding: 8px; }
}