:root {
  --brand: #00aeef;
  --video-ratio: 1 / 1;
  --preview-ratio: 1426 / 893;
  --brand-2: #3ad3ff;
  --brand-dark: #008bc0;
  --ink: #07131e;
  --ink-2: #112536;
  --muted: #667788;
  --line: #dce7ee;
  --soft: #f4f8fb;
  --white: #fff;
  --success: #1bc47d;
  --shadow: 0 30px 80px rgba(8, 31, 47, .12);
  --shadow-sm: 0 16px 44px rgba(8, 31, 47, .09);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 12px;
  --container: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.menu-open, body.modal-open { overflow: hidden; }
/* Clips <main>'s own decorative bleed (the one element not already locally contained by its own
   section's overflow:hidden — .floating-metric's negative right/bottom offsets in the analytics
   section) WITHOUT putting overflow-x:hidden on body/html — Safari has a long-standing bug where
   any ANCESTOR of a `position: sticky` element with overflow-x:hidden (even just the x axis)
   silently disables sticky positioning entirely, treating it as `relative`. .site-header is a sibling
   of this wrapper, not a descendant, so it stays outside this rule and keeps working in Safari. */
.overflow-guard { overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.section { padding: 112px 0; position: relative; }
.section--soft { background: linear-gradient(180deg, #f7fbfd 0%, #f2f8fb 100%); }
.section--dark { background: var(--ink); color: #fff; overflow: hidden; }
.section--dark::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(0, 174, 239, .15); filter: blur(20px); top: -270px; right: -170px; }

.page-glow { position: fixed; z-index: -1; border-radius: 50%; filter: blur(90px); pointer-events: none; opacity: .38; }
.page-glow--one { width: 380px; height: 380px; background: rgba(0, 174, 239, .18); top: 50px; right: -160px; }
.page-glow--two { width: 320px; height: 320px; background: rgba(95, 220, 255, .12); top: 620px; left: -180px; }

.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.78); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(220,231,238,.7); transition: box-shadow .25s ease, background .25s ease; }
.site-header.scrolled { box-shadow: 0 10px 34px rgba(7, 19, 30, .08); background: rgba(255,255,255,.94); }
.nav-wrap { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-mark { width: 39px; height: 36px; position: relative; background: linear-gradient(135deg, var(--brand-2), var(--brand)); border-radius: 9px 3px 9px 3px; box-shadow: 0 8px 22px rgba(0,174,239,.25); overflow: hidden; }
.brand-mark::after { content: ""; position: absolute; left: 17px; top: 0; width: 10px; height: 100%; background: #fff; transform: skew(-20deg); opacity: .96; }
.brand-mark span { position: absolute; right: 3px; width: 12px; height: 3px; background: #fff; border-radius: 3px; z-index: 2; }
.brand-mark span:nth-child(1) { top: 11px; }
.brand-mark span:nth-child(2) { top: 17px; }
.brand-mark span:nth-child(3) { top: 23px; }
.brand-name { font-size: 19px; font-weight: 900; letter-spacing: -.8px; }
.brand-name span { color: var(--brand); }
.main-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.main-nav a { font-size: 14px; color: #435363; font-weight: 650; position: relative; transition: color .2s ease; }
.main-nav a::after { content: ""; position: absolute; left: 0; bottom: -9px; width: 0; height: 2px; background: var(--brand); transition: width .2s ease; }
.main-nav a:hover, .main-nav a.active { color: var(--ink); }
.main-nav a:hover::after, .main-nav a.active::after { width: 100%; }
.nav-actions { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: 12px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; }
.menu-toggle span { width: 19px; height: 2px; background: var(--ink); border-radius: 3px; transition: .25s ease; }
.menu-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 20px; border: 1px solid transparent; border-radius: 13px; font-weight: 760; font-size: 14px; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn--primary { color: #fff; background: linear-gradient(135deg, #08b6f5, #0096cf); box-shadow: 0 12px 28px rgba(0, 174, 239, .25); }
.btn--primary:hover { box-shadow: 0 16px 34px rgba(0, 174, 239, .32); }
.btn--secondary { color: var(--ink); background: #fff; border-color: var(--line); box-shadow: 0 9px 24px rgba(8,31,47,.06); }
.btn--secondary:hover, .btn--ghost:hover { border-color: #b8d3e2; }
.btn--ghost { min-height: 42px; background: transparent; border-color: transparent; color: #4b5b68; }
.btn--sm { min-height: 42px; padding-inline: 17px; border-radius: 11px; }
.btn--lg { min-height: 56px; padding-inline: 25px; border-radius: 15px; font-size: 15px; }
.btn--lg svg { font-size: 20px; }
.btn--block { width: 100%; }

.hero { min-height: 720px; display: flex; align-items: center; padding-top: 92px; padding-bottom: 78px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 40%, rgba(0,174,239,.1), transparent 31%), linear-gradient(180deg, #fff 0%, #fbfdff 100%); z-index: -2; }
.hero-grid { display: grid; grid-template-columns: 1.03fr .97fr; gap: 52px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 850; color: var(--brand-dark); margin-bottom: 18px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 5px rgba(27,196,125,.12); }
.hero h1 { margin: 0; max-width: 690px; font-size: clamp(36px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -2.5px; font-weight: 900; }
.gradient-text { background: linear-gradient(105deg, var(--brand-dark), var(--brand-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin: 27px 0 0; max-width: 625px; color: #586978; font-size: 18px; line-height: 1.75; }
.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 18px 24px; margin-top: 28px; color: #6a7a88; font-size: 13px; font-weight: 650; }
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta svg { color: var(--success); font-size: 16px; }
.hero-visual { position: relative; min-height: 510px; display: grid; place-items: center; }
.hero-orbit { position: absolute; width: 500px; height: 500px; border: 1px solid rgba(0,174,239,.18); border-radius: 50%; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border-radius: 50%; border: 1px dashed rgba(0,174,239,.16); }
.hero-orbit::before { inset: 45px; }
.hero-orbit::after { inset: 100px; }
.hero-device-card { position: relative; width: 106%; transform: translateX(12px); z-index: 2; filter: drop-shadow(0 38px 42px rgba(12, 36, 51, .16)); }
.hero-device-card::after { content: ""; position: absolute; left: 13%; right: 9%; bottom: -18px; height: 44px; background: rgba(7,19,30,.2); filter: blur(32px); border-radius: 50%; z-index: -1; }
.visual-badge { position: absolute; z-index: 4; display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.95); border: 1px solid rgba(216,232,240,.9); border-radius: 15px; padding: 12px 15px; box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); animation: float 4s ease-in-out infinite; }
.visual-badge strong, .visual-badge small { display: block; }
.visual-badge strong { font-size: 13px; }
.visual-badge small { font-size: 11px; color: var(--muted); margin-top: 1px; }
.visual-badge--top { top: 48px; right: -15px; }
.visual-badge--bottom { bottom: 50px; left: -18px; animation-delay: -2s; }

/* Hero video preview (replaces the former still hero image).
   THE ASPECT RATIO LIVES IN ONE PLACE — --video-ratio. This particular Short is a screen
   recording and is very close to SQUARE (its own 720x726 thumbnail proves it; YouTube's 16:9
   maxresdefault shows it pillarboxed with black bars either side). Matching the real ratio is
   what keeps the player free of black bars and the picture undistorted. If the video is ever
   replaced with a 9/16 one, change --video-ratio at the top of this file and both the preview
   and the popup follow. */
.hero-video { display: block; position: relative; width: 100%; aspect-ratio: var(--preview-ratio); padding: 0; border: 1px solid rgba(216,232,240,.9); border-radius: 18px; overflow: hidden; background: #0c2433; cursor: pointer; }
.hero-video__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
/* A whisper of a veil, only so the white play button always has something to sit against —
   the caption that needed a dark gradient is gone, and a landing page should show the product
   it is selling at full brightness. */
.hero-video::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(7,19,30,.06); transition: background .25s ease; }
.hero-video:hover::before, .hero-video:focus-visible::before { background: rgba(7,19,30,.12); }
.hero-video__play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.94); box-shadow: 0 12px 30px rgba(7,19,30,.32); transition: transform .25s ease, background .25s ease; }
.hero-video__play svg { width: 28px; height: 28px; fill: var(--brand); margin-left: 3px; }
.hero-video:hover .hero-video__thumb, .hero-video:focus-visible .hero-video__thumb { transform: scale(1.04); }
.hero-video:hover .hero-video__play { transform: translate(-50%,-50%) scale(1.08); background: #fff; }
.hero-video:focus-visible { outline: 3px solid rgba(0,174,239,.55); outline-offset: 3px; }

/* The popup player. */
.video-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; }
.video-modal[hidden] { display: none; }
.video-modal__backdrop { position: absolute; inset: 0; background: rgba(5,16,25,.82); backdrop-filter: blur(4px); animation: modalFade .2s ease; }
.video-modal__dialog { position: relative; z-index: 1; width: min(92vw, calc((100vh - 120px) * (var(--video-ratio)))); max-height: calc(100vh - 120px); aspect-ratio: var(--video-ratio); border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 30px 70px rgba(4,12,20,.55); animation: modalPop .24s cubic-bezier(.2,.8,.3,1); }
.video-modal__frame, .video-modal__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.video-modal__close { position: absolute; z-index: 3; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(12,36,51,.72); color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease; }
.video-modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.video-modal__close:hover { background: rgba(12,36,51,.95); transform: scale(1.06); }
.video-modal__close { background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(6px); }
.video-modal__close:focus-visible { outline: 3px solid rgba(255,255,255,.7); outline-offset: 2px; }
@keyframes modalFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes modalPop { from { opacity: 0; transform: scale(.96) } to { opacity: 1; transform: scale(1) } }
@media (prefers-reduced-motion: reduce) {
  .video-modal__backdrop, .video-modal__dialog { animation: none; }
  .hero-video__thumb, .hero-video__play { transition: none; }
}
.mini-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #e9f9ff; color: var(--brand-dark); font-weight: 900; }
@keyframes float { 50% { transform: translateY(-9px); } }

.trust-strip { border-top: 1px solid #e6eef3; border-bottom: 1px solid #e6eef3; background: rgba(250,252,253,.88); }
.trust-grid { min-height: 128px; display: grid; grid-template-columns: repeat(4,1fr); align-items: center; }
.trust-grid > div { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-right: 1px solid #e3edf2; }
.trust-grid > div:last-child { border-right: 0; }
.trust-grid strong { font-size: 30px; line-height: 1.1; letter-spacing: -1px; }
.trust-grid span { color: var(--muted); font-size: 12px; font-weight: 650; }

.section-heading { max-width: 760px; margin: 0 auto 55px; text-align: center; }
.section-heading h2 { margin: 0; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; letter-spacing: -1.6px; }
.section-heading p { color: var(--muted); font-size: 17px; margin: 19px auto 0; max-width: 660px; }
.section-heading--split { max-width: none; display: grid; grid-template-columns: 1.1fr .75fr; text-align: left; gap: 80px; align-items: end; }
.section-heading--split p { margin: 0 0 6px; }

.pillar-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; align-items: start; }
.pillar-grid .price-list { border: 0; padding: 14px 0 0; margin: 14px 0 0; }
.info-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 27px; background: rgba(255,255,255,.82); box-shadow: 0 10px 35px rgba(8,31,47,.04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.info-card:hover { transform: translateY(-6px); border-color: #c5e0ed; box-shadow: var(--shadow-sm); }
.icon-box { width: 48px; height: 48px; display: grid; place-items: center; color: var(--brand-dark); background: #eaf9ff; border-radius: 14px; font-size: 24px; margin-bottom: 18px; }
.info-card h3 { margin: 0 0 9px; font-size: 19px; }
.info-card p { margin: 0; color: var(--muted); font-size: 14px; }

.bento-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 18px; }
.bento { min-height: 280px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); padding: 29px; position: relative; overflow: hidden; box-shadow: 0 8px 30px rgba(8,31,47,.035); }
.bento--wide { grid-column: span 2; display: grid; grid-template-columns: 1fr .9fr; gap: 22px; align-items: center; }
.bento--blue { background: linear-gradient(135deg, #061926 0%, #0b2a3c 100%); color: #fff; border-color: #14364b; }
.bento--blue p { color: #a8c0cd; }
.card-kicker { display: block; color: var(--brand-dark); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; margin-bottom: 9px; }
.bento--blue .card-kicker { color: var(--brand-2); }
.bento h3 { font-size: 23px; line-height: 1.2; letter-spacing: -.6px; margin: 0 0 11px; }
.bento p { color: var(--muted); margin: 0; font-size: 14px; }
.bento-icon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: #e9f9ff; color: var(--brand-dark); margin-bottom: 44px; font-weight: 900; font-size: 20px; }
.mini-list { list-style: none; padding: 0; margin: 20px 0 0; display: flex; gap: 7px; flex-wrap: wrap; }
.mini-list li { color: #b9d1dd; border: 1px solid #23485d; background: rgba(255,255,255,.04); padding: 7px 10px; border-radius: 999px; font-size: 11px; }
.mock-pos { background: #101b22; border: 1px solid #2a3f4b; border-radius: 14px; box-shadow: 0 24px 40px rgba(0,0,0,.3); transform: rotate(2deg); overflow: hidden; }
.mock-top { height: 28px; display: flex; align-items: center; gap: 5px; padding: 0 9px; border-bottom: 1px solid #2a3f4b; color: #6f8998; font-size: 7px; }
.mock-top i { width: 5px; height: 5px; border-radius: 50%; background: #5a6d78; }
.mock-top span { margin-left: auto; }
.mock-body { display: grid; grid-template-columns: 1.4fr .8fr; min-height: 175px; }
.mock-products { padding: 10px; display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.mock-products span { border-radius: 7px; background: linear-gradient(135deg,#10415d,#0b2c40); border: 1px solid #195878; }
.mock-products span:nth-child(2), .mock-products span:nth-child(5) { background: linear-gradient(135deg,#0c6786,#0aa4d5); }
.mock-cart { padding: 10px; background: #f3f7f9; color: var(--ink); }
.mock-cart small { font-weight: 800; }
.mock-cart div { height: 17px; border-bottom: 1px solid #dbe4e8; }
.mock-cart strong { display: block; font-size: 15px; margin: 12px 0 8px; }
.mock-cart button { width: 100%; border: 0; background: var(--brand); color: #fff; font-size: 7px; border-radius: 5px; padding: 6px; font-weight: 800; }
.stock-bars { margin-top: 30px; display: grid; gap: 8px; }
.stock-bars span { display: block; width: var(--w); height: 8px; border-radius: 99px; background: linear-gradient(90deg,var(--brand),#8ee7ff); }
.debt-chip { position: absolute; left: 29px; bottom: 29px; right: 29px; display: flex; justify-content: space-between; align-items: center; border-radius: 13px; background: #f5fbfd; border: 1px solid #d9edf5; padding: 12px 14px; }
.debt-chip span { font-size: 11px; color: var(--muted); }
.debt-chip strong { color: #138a62; font-size: 14px; }
.device-stack { height: 200px; position: relative; }
.device { position: absolute; border: 7px solid var(--ink); background: #e3f6fd; overflow: hidden; }
.device span {
  display: block; width: 100%; height: 100%;
  background: repeating-linear-gradient(to bottom, #e3f6fd 0, #e3f6fd 11px, #ffffff 11px, #ffffff 14px);
}
.device--desktop { width: 220px; height: 138px; left: 0; top: 16px; border-radius: 14px; z-index: 1; }
.device--tablet { width: 112px; height: 152px; left: 62px; top: 42px; border-radius: 16px; z-index: 2; }
.device--phone { width: 62px; height: 122px; right: 4px; bottom: 0; border-radius: 14px; z-index: 3; }

.analytics-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 72px; align-items: center; }
.analytics-copy h2 { margin: 0; font-size: clamp(28px,3.2vw,40px); line-height: 1.15; letter-spacing: -1.6px; }
.analytics-copy > p { color: var(--muted); font-size: 16px; margin: 20px 0 25px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 25px 0 30px; }
.check-grid span { font-weight: 650; font-size: 13px; color: #415260; }
.check-grid i { font-style: normal; display: inline-grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #0e9969; background: #e6f9f2; margin-right: 7px; font-size: 11px; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--brand-dark); font-weight: 800; font-size: 14px; }
.text-link span { transition: transform .2s ease; }
.text-link:hover span { transform: translateX(4px); }
.dashboard-frame { border-radius: 22px; background: #111b22; padding: 12px; box-shadow: 0 38px 70px rgba(6,20,30,.24); position: relative; transform: perspective(1000px) rotateY(-1.5deg); }
.browser-bar { height: 34px; display: flex; gap: 6px; align-items: center; padding: 0 7px; color: #7a8e9a; }
.browser-bar span { width: 7px; height: 7px; border-radius: 50%; background: #3a4b55; }
.browser-bar div { font-size: 8px; margin-left: 8px; background: #1a2932; flex: 1; border-radius: 5px; padding: 5px 9px; }
.dashboard-frame img { width: 100%; border-radius: 10px; }
.floating-metric { position: absolute; right: -25px; bottom: -32px; min-width: 190px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.floating-metric small, .floating-metric span { display: block; }
.floating-metric small { color: var(--muted); font-size: 10px; }
.floating-metric strong { display: block; color: #138a62; font-size: 25px; margin: 1px 0; letter-spacing: -1px; }
.floating-metric span { color: #8b99a4; font-size: 9px; }

.focus-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: center; position: relative; z-index: 2; }
.eyebrow--dark { color: #69d8ff; }
.focus-copy h2 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.12; letter-spacing: -1.7px; }
.focus-copy h2 span { color: #76dcff; }
.focus-copy p { color: #9fb3c0; font-size: 16px; margin: 22px 0 0; }
.focus-cards { display: grid; gap: 13px; }
.focus-card { display: grid; grid-template-columns: 50px 1fr; column-gap: 16px; padding: 20px; border: 1px solid #173549; border-radius: 18px; background: rgba(255,255,255,.035); }
.focus-card strong { grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #0f3044; color: #6edcff; font-size: 12px; }
.focus-card h3 { margin: 0; font-size: 17px; }
.focus-card p { margin: 4px 0 0; color: #8ea5b3; font-size: 13px; }

.pricing-grid { max-width: 970px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.price-card { padding: 34px; border: 1px solid var(--line); border-radius: 27px; background: #fff; box-shadow: var(--shadow-sm); position: relative; }
.price-card--featured { border: 1.5px solid rgba(0,174,239,.55); box-shadow: 0 25px 65px rgba(0,174,239,.13); }
.popular-badge { position: absolute; top: -13px; right: 22px; background: var(--ink); color: #fff; padding: 7px 12px; font-size: 10px; border-radius: 999px; font-weight: 750; }
.price-top { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.price-top h3 { margin: 0; font-size: 22px; }
.price { display: flex; align-items: center; gap: 8px; }
.price strong { font-size: 47px; line-height: .95; letter-spacing: -2.5px; }
.price span { font-size: 10px; color: var(--muted); line-height: 1.35; }
.price-card > p { color: var(--muted); font-size: 14px; min-height: 46px; }
.price-list { list-style: none; padding: 20px 0; margin: 22px 0; border-top: 1px solid #edf2f5; border-bottom: 1px solid #edf2f5; display: grid; gap: 13px; }
.price-list li { color: #526271; font-size: 13px; }
.price-list i { font-style: normal; color: #15976c; margin-right: 8px; }

.faq-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 80px; align-items: start; }
.faq-intro h2 { margin: 0; font-size: 30px; line-height: 1.16; letter-spacing: -1.1px; }
.faq-intro p { color: var(--muted); font-size: 15px; margin: 16px 0 24px; }
.accordion { display: grid; gap: 10px; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 17px; overflow: hidden; }
.faq-item button { width: 100%; border: 0; background: transparent; padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; text-align: left; font-weight: 760; color: var(--ink); }
.faq-item button i { font-style: normal; font-size: 22px; color: var(--brand-dark); transition: transform .2s ease; }
.faq-item.open button i { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-answer p { color: var(--muted); font-size: 14px; margin: 0; padding: 0 22px 20px; }

.contact-section { padding-top: 90px; }
.contact-card { border-radius: 32px; background: linear-gradient(135deg,#061824,#0a293c); color: #fff; padding: 58px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; box-shadow: 0 36px 80px rgba(7,19,30,.18); position: relative; overflow: hidden; }
.contact-card::after { content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: rgba(0,174,239,.14); filter: blur(10px); left: -160px; bottom: -220px; }
.contact-copy { position: relative; z-index: 2; }
.contact-copy h2 { margin: 0; font-size: 30px; line-height: 1.16; letter-spacing: -1.1px; }
.contact-copy > p { color: #9fb5c2; font-size: 15px; margin: 17px 0 30px; }
.contact-details { display: grid; gap: 15px; }
.contact-details a, .contact-details div { display: flex; flex-direction: column; gap: 2px; }
.contact-details span { color: #7f9aaa; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; }
.contact-details strong { font-size: 13px; font-weight: 650; }
/* Phone row: WhatsApp button in front of the number (the number itself stays a tap-to-call link). */
.contact-details .contact-phone-value { flex-direction: row; align-items: center; gap: 10px; }
.contact-details .contact-phone-value a { display: inline-flex; align-items: center; }
.contact-details .wa-btn { width: 34px; height: 34px; border-radius: 50%; background: #25D366; color: #fff; justify-content: center; flex-shrink: 0; transition: filter .2s, transform .2s; }
.contact-details .wa-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.contact-details .wa-btn svg { width: 18px; height: 18px; fill: currentColor; }
.contact-form { position: relative; z-index: 2; background: #fff; color: var(--ink); border-radius: 22px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,.16); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-form label { display: block; margin-bottom: 14px; position: relative; }
.contact-form label > span { display: block; font-size: 11px; font-weight: 750; color: #506170; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid #dbe5eb; background: #fbfdfe; color: var(--ink); border-radius: 11px; padding: 12px 13px; outline: none; transition: border-color .2s, box-shadow .2s; font-size: 13px; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: #6ad7ff; box-shadow: 0 0 0 3px rgba(0,174,239,.1); }
.contact-form textarea { resize: vertical; min-height: 106px; }
.char-count { position: absolute; right: 10px; bottom: 9px; color: #91a0aa; font-size: 9px; background: #fbfdfe; padding-left: 5px; }
.form-note { min-height: 18px; margin: 10px 0 0; text-align: center; color: #61808f; font-size: 11px; }

.site-footer { background: #fff; padding: 70px 0 24px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr .7fr .7fr 1fr; gap: 50px; }
.footer-brand p { max-width: 280px; color: var(--muted); font-size: 13px; margin-top: 17px; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.footer-links a { color: #647583; font-size: 12px; }
.footer-links a:hover { color: var(--brand-dark); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; border-top: 1px solid #e6eef2; padding-top: 22px; margin-top: 50px; color: #85939d; font-size: 10px; }
.footer-bottom img { height: 28px; width: auto; }
.back-to-top { position: fixed; right: 22px; bottom: 22px; z-index: 30; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--ink); box-shadow: 0 12px 30px rgba(7,19,30,.2); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .25s ease; }
.back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .08s; }
.reveal-delay-2 { transition-delay: .16s; }
.reveal-delay-3 { transition-delay: .24s; }

@media (max-width: 1050px) {
  .main-nav { gap: 18px; }
  .main-nav a { font-size: 13px; }
  .hero-grid { gap: 25px; }
  .hero h1 { font-size: 44px; }
  .bento-grid { grid-template-columns: repeat(2,1fr); }
  .bento--wide { grid-column: span 2; }
  .analytics-grid { gap: 42px; }
  .contact-card { padding: 42px; gap: 40px; }
}

@media (max-width: 860px) {
  .section { padding: 82px 0; }
  .desktop-only { display: none; }
  .menu-toggle { display: flex; }
  .main-nav { position: fixed; top: 78px; left: 20px; right: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 12px; background: rgba(255,255,255,.98); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .25s ease; }
  .main-nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .main-nav a { padding: 13px 12px; border-radius: 10px; }
  .main-nav a:hover { background: #f3f9fc; }
  .main-nav a::after { display: none; }
  .hero { min-height: auto; padding-top: 70px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero h1 { margin-inline: auto; font-size: clamp(34px, 7vw, 50px); }
  .hero-lead { margin-inline: auto; }
  .hero-actions, .hero-meta { justify-content: center; }
  .hero-visual { min-height: 440px; margin-top: 15px; }
  .hero-device-card { max-width: 640px; transform: none; }
  .video-modal { padding: 14px; }
  .video-modal__dialog { width: min(94vw, calc((100vh - 90px) * (var(--video-ratio)))); max-height: calc(100vh - 90px); }
  .hero-orbit { width: 420px; height: 420px; }
  .visual-badge--top { right: 20px; }
  .visual-badge--bottom { left: 20px; }
  .section-heading--split { grid-template-columns: 1fr; gap: 15px; text-align: center; }
  .section-heading--split p { margin: 0 auto; }
  .analytics-grid, .focus-grid, .faq-grid, .contact-card, .pillar-grid { grid-template-columns: 1fr; }
  .analytics-grid, .focus-grid, .faq-grid { gap: 44px; }
  .analytics-copy, .focus-copy, .faq-intro { text-align: center; }
  .check-grid { max-width: 480px; margin-inline: auto; text-align: left; }
  .dashboard-frame { max-width: 720px; margin: 0 auto; }
  .focus-copy p { max-width: 650px; margin-inline: auto; }
  .pricing-grid { max-width: 680px; grid-template-columns: 1fr; }
  .contact-card { gap: 32px; }
  .contact-copy { text-align: center; }
  .contact-details { max-width: 450px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid > :last-child { grid-column: 2 / 4; }
}

@media (max-width: 640px) {
  .container { width: min(calc(100% - 28px), var(--container)); }
  .nav-wrap { min-height: 68px; }
  .main-nav { top: 68px; left: 14px; right: 14px; }
  .brand-mark { width: 35px; height: 32px; }
  .brand-name { font-size: 17px; }
  .hero { padding-top: 54px; padding-bottom: 54px; }
  .hero h1 { letter-spacing: -1.8px; }
  .hero-lead { font-size: 16px; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-meta { display: grid; justify-content: start; max-width: 270px; margin-inline: auto; text-align: left; }
  .hero-visual { min-height: 330px; }
  .hero-video__play { width: 56px; height: 56px; }
  .hero-video__play svg { width: 23px; height: 23px; }
  .video-modal { padding: 10px; }
  .video-modal__dialog { width: min(96vw, calc((100vh - 70px) * (var(--video-ratio)))); max-height: calc(100vh - 70px); }
  .hero-orbit { width: 300px; height: 300px; }
  .visual-badge { transform: scale(.88); }
  .visual-badge--top { top: 10px; right: -8px; }
  .visual-badge--bottom { bottom: 22px; left: -9px; }
  .trust-grid { grid-template-columns: repeat(2,1fr); padding: 14px 0; }
  .trust-grid > div { min-height: 90px; }
  .trust-grid > div:nth-child(2) { border-right: 0; }
  .trust-grid > div:nth-child(-n+2) { border-bottom: 1px solid #e3edf2; }
  .trust-grid strong { font-size: 26px; }
  .section-heading { margin-bottom: 38px; }
  .section-heading h2, .analytics-copy h2, .focus-copy h2 { letter-spacing: -1.1px; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento--wide { grid-column: span 1; grid-template-columns: 1fr; }
  .mock-pos { max-width: 320px; margin: 8px auto 0; }
  .device-stack { margin-top: -5px; }
  .analytics-grid { gap: 35px; }
  .floating-metric { right: 10px; bottom: -47px; transform: scale(.88); transform-origin: right center; }
  .check-grid { grid-template-columns: 1fr; }
  .price-card { padding: 26px 23px; }
  .price-top { display: block; }
  .price { margin-top: 18px; }
  .faq-intro h2 { font-size: 26px; }
  .contact-section { padding-top: 65px; }
  .contact-card { width: min(calc(100% - 20px), var(--container)); padding: 31px 19px; border-radius: 25px; }
  .contact-copy h2 { font-size: 25px; }
  .contact-form { padding: 19px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px 22px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-bottom { align-items: flex-start; flex-direction: column; }
  .back-to-top { right: 14px; bottom: 14px; }
}

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