/* =========================================================
   Nexora — site design system
   Light-first, dark theme via [data-theme="dark"]
   ========================================================= */
:root {
  --primary: #0062ff;
  --primary-700: #004ecc;
  --primary-50: #eef4ff;
  --cyan: #00d2ff;
  --navy-950: #050c1a;
  --navy-900: #0a192f;
  --navy-800: #102a4e;

  --bg: #f6f8fc;
  --bg-2: #ffffff;
  --bg-3: #eef2f8;
  --card: #ffffff;
  --text: #0f172a;
  --text-2: #475569;
  --muted: #64748b;
  --line: #e2e8f0;
  --line-2: #cbd5e1;

  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06), 0 1px 3px rgba(15, 23, 42, .08);
  --shadow: 0 10px 30px -12px rgba(15, 23, 42, .18);
  --shadow-lg: 0 30px 60px -20px rgba(0, 98, 255, .25);
  --wrap: 1180px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}
:root[data-theme="dark"] {
  --bg: #070d1a;
  --bg-2: #0b1426;
  --bg-3: #101b31;
  --card: #0e1830;
  --text: #e6edf7;
  --text-2: #b6c2d6;
  --muted: #8a99b3;
  --line: #1c2a45;
  --line-2: #2a3a5a;
  --primary-50: #0f1d3a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 10px 30px -12px rgba(0, 0, 0, .6);
  --shadow-lg: 0 30px 60px -20px rgba(0, 98, 255, .35);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Layout ---------- */
.wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
.section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--bg-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sec-head { max-width: 720px; margin: 0 auto 44px; text-align: center; }
.sec-head.left { margin-inline: 0; text-align: left; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary); background: var(--primary-50); border: 1px solid transparent;
  padding: 6px 12px; border-radius: 999px; margin-bottom: 16px;
}
:root[data-theme="dark"] .eyebrow { border-color: rgba(0, 98, 255, .35); }
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -.01em; font-weight: 800; }
h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -.025em; }
h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.02em; }
h3 { font-size: clamp(20px, 2.4vw, 26px); }
h4 { font-size: 17px; }
.sec-head p { color: var(--text-2); font-size: 17px; margin-top: 14px; }
.lead { font-size: 18px; color: var(--text-2); }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mono { font-family: var(--mono); }
.grad { background: linear-gradient(95deg, var(--primary), var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; font-weight: 700; font-size: 14.5px;
  border: 1px solid transparent; transition: transform .15s, box-shadow .2s, background .2s, color .2s, border-color .2s;
  white-space: nowrap; text-decoration: none !important; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px -8px var(--primary); }
.btn-primary:hover { background: var(--primary-700); }
.btn-outline { background: var(--card); color: var(--text); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-white { background: #fff; color: var(--navy-900); }
.btn-white:hover { background: #eef4ff; }
.btn-glass { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }
.btn-glass:hover { background: rgba(255, 255, 255, .18); }
.btn-lg { padding: 15px 28px; font-size: 16px; }
.btn-sm { padding: 8px 14px; font-size: 13px; }
.btn-block { width: 100%; }
.btn-wa { background: #25d366; color: #fff; }
.btn-wa:hover { background: #1fb457; }

/* ---------- Top bar + header ---------- */
.topbar {
  background: var(--navy-950); color: #94a3b8; font-size: 12.5px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topbar .wrap { display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: space-between; align-items: center; min-height: 36px; }
.topbar a { color: #cbd5e1; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #fff; text-decoration: none; }
.topbar .links { display: flex; gap: 18px; flex-wrap: wrap; }
@media (max-width: 720px) { .topbar .tag { display: none; } .topbar .wrap { justify-content: center; } .topbar .links a:nth-child(2) { display: none; } }

.header {
  position: sticky; top: 0; z-index: 900;
  background: color-mix(in srgb, var(--bg-2) 88%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 72px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; color: var(--text); text-decoration: none !important; }
.brand img { width: 46px; height: auto; }
.brand b { font-size: 20px; letter-spacing: .06em; font-weight: 900; line-height: 1; display: block; }
.brand b span { color: var(--primary); }
.brand small { display: block; font-size: 10.5px; color: var(--muted); letter-spacing: .04em; margin-top: 3px; text-transform: uppercase; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { list-style: none; position: relative; }
.nav a, .nav .navbtn {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text-2);
  background: transparent; border: 0; text-decoration: none !important; transition: background .2s, color .2s;
}
.nav a:hover, .nav .navbtn:hover, .nav a.active, .nav li.active > .navbtn { color: var(--primary); background: var(--primary-50); }
.nav .navbtn .icon { width: 14px; height: 14px; transition: transform .2s; }
.nav li.open > .navbtn .icon { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 300px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  padding: 8px; display: none; z-index: 50;
}
.nav li.open > .dropdown { display: block; }
/* hover bridge */
.nav .has-dd > .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav .has-dd { padding-bottom: 2px; }
.dropdown a { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; width: 100%; color: var(--text); }
.dropdown a .icon { width: 20px; height: 20px; color: var(--primary); margin-top: 2px; }
.dropdown a b { display: block; font-size: 14px; }
.dropdown a small { display: block; font-size: 12px; color: var(--muted); font-weight: 500; margin-top: 2px; }
.dropdown a:hover { background: var(--primary-50); }
.dropdown .dd-all { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; color: var(--primary); font-weight: 700; font-size: 13px; justify-content: center; }

/* ---------- Products: a gallery of tiles rather than a list ---------- */
.dropdown.dd-gallery { min-width: 640px; padding: 12px; }
.dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.dropdown .dd-tile {
  display: grid; grid-template-columns: 38px 1fr; grid-template-areas: "ico name" "ico cap";
  gap: 1px 11px; align-items: center; padding: 11px 12px; border-radius: 12px;
  border: 1px solid transparent; width: auto;
}
.dropdown .dd-tile:hover { background: var(--primary-50); border-color: var(--primary); }
.dd-ico {
  grid-area: ico; width: 38px; height: 38px; border-radius: 10px; background: var(--bg-3);
  display: inline-flex; align-items: center; justify-content: center; transition: background .2s;
}
.dropdown .dd-tile:hover .dd-ico { background: #fff; }
.dropdown .dd-tile .dd-ico .icon { width: 19px; height: 19px; margin: 0; color: var(--primary); }
.dd-name { grid-area: name; font-size: 13.5px; font-weight: 700; line-height: 1.25; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dd-cap { grid-area: cap; font-size: 11.5px; color: var(--muted); font-weight: 500; line-height: 1.3; }
.dropdown .dd-tile.is-flagship .dd-ico { background: var(--primary); }
.dropdown .dd-tile.is-flagship .dd-ico .icon { color: #fff; }
.dd-soon {
  font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #9a5b00; background: #fff4e0; border: 1px solid #f0cf9a; border-radius: 999px; padding: 2px 7px;
}
@media (max-width: 1100px) {
  .dropdown.dd-gallery { min-width: 0; padding: 8px; }
  .dd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) { .dd-grid { grid-template-columns: 1fr; } }
.header-actions { display: flex; align-items: center; gap: 8px; }
.theme-btn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); display: inline-flex; align-items: center; justify-content: center; }
.theme-btn .icon { width: 18px; height: 18px; }
.theme-btn .sun { display: none; }
:root[data-theme="dark"] .theme-btn .sun { display: block; }
:root[data-theme="dark"] .theme-btn .moon { display: none; }
.nav-toggle { display: none; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); align-items: center; justify-content: center; }
.nav-toggle .icon { width: 22px; height: 22px; }

@media (max-width: 1440px) { .header-actions .btn-outline { display: none; } }
/* The tagline goes at 1360, not 1300: between 1305 and 1355 the brand is
   still wide enough to push the menu past the window edge. */
@media (max-width: 1360px) { .brand small { display: none; } }
@media (max-width: 1200px) {
  .nav a, .nav .navbtn { padding: 9px 8px; font-size: 13.5px; }
}
@media (max-width: 1100px) {
  /* backdrop-filter would make the header the containing block of the fixed nav panel */
  .header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg-2); }
  .nav-toggle { display: inline-flex; }
  .nav-panel {
    position: fixed; inset: 0; top: 0; z-index: 950;
    background: var(--bg-2); overflow-y: auto; padding: 18px 20px 40px; display: block;
    clip-path: inset(0 0 0 100%); visibility: hidden; transition: clip-path .25s ease, visibility 0s linear .25s;
  }
  body.nav-open .nav-panel { clip-path: inset(0); visibility: visible; transition: clip-path .25s ease, visibility 0s; }
  body.nav-open { overflow: hidden; }
  .nav-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
  .nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav a, .nav .navbtn { width: 100%; justify-content: space-between; padding: 13px 12px; font-size: 16px; }
  .dropdown { position: static; box-shadow: none; border: 0; background: var(--bg-3); border-radius: 12px; margin: 4px 0 8px; min-width: 0; }
  .dropdown a { justify-content: flex-start; padding: 11px 12px; }
  .header-actions { flex-direction: column; align-items: stretch; margin-top: 18px; gap: 10px; }
  .header-actions .btn { width: 100%; }
  .header-actions .btn-outline { display: inline-flex; }
  .header-actions .theme-btn { width: 100%; }
}
@media (min-width: 1101px) { .nav-panel-head { display: none; } .nav-panel { display: flex; align-items: center; gap: 18px; } }

/* THE HEADER ROW GETS THE ROOM IT NEEDS.

   The row is brand + menu + actions, and a nav link is nowrap, so the
   row cannot shrink: past a certain number of menu items it simply runs
   out of the 1180 px wrap and out of the window with it. It overflowed
   by 70 px at 1366 and 33 px at 1440 - the two widths most laptops
   actually are - which let the whole page be dragged sideways and left
   Request Demo hanging off the edge.

   The header is a row of controls, not prose, so between the hamburger
   and 1560 px it takes the window rather than the measure. Everything
   else on the page keeps the 1180 px wrap it always had. */
@media (min-width: 1101px) and (max-width: 1560px) {
  .header .wrap { width: calc(100% - 32px); }
}
/* And in the last band before the hamburger, even the full width is not
   enough for an untightened menu, so it tightens a step earlier. */
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav { gap: 0; }
  .nav a, .nav .navbtn { padding: 9px 6px; font-size: 13px; }
  .header .wrap { gap: 10px; }
  .header-actions { gap: 6px; }
}

/* Download joined the top menu (2026-10-03), one item more than the row
   had room for: it ran 88 px past the window at 1241 and 1366 and 48 px
   at 1600. Measured at every width 1101-2560 (scratchpad navscan.js):
   - above 1560 the row is wider than the 1180 px wrap, so the header
     keeps the window width up to 1480 px instead of dropping to 1180;
   - from 1241 to 1560 the items sit closer (7 px each side, no gap);
   - in the last band before the hamburger they tighten one more step. */
@media (min-width: 1101px) { .header .wrap { width: min(100% - 32px, 1480px); } }
@media (min-width: 1241px) and (max-width: 1560px) {
  .nav { gap: 0; }
  .nav a, .nav .navbtn { padding: 9px 7px; font-size: 13.5px; }
}
@media (min-width: 1101px) and (max-width: 1240px) {
  .nav a, .nav .navbtn { padding: 9px 5px; font-size: 12.5px; }
  .header .wrap { gap: 8px; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(0, 210, 255, .28), transparent 60%),
              radial-gradient(900px 500px at -10% 110%, rgba(0, 98, 255, .35), transparent 60%),
              linear-gradient(160deg, var(--navy-950), var(--navy-900) 60%, #0b2350);
}
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px); background-size: 26px 26px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), transparent 90%);
}
.hero .wrap { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; padding: 84px 0 76px; }
.hero h1 { color: #fff; }
.hero h1 .grad { background: linear-gradient(95deg, #7fb2ff, var(--cyan)); -webkit-background-clip: text; background-clip: text; }
.hero p.lead { color: #c7d2e5; margin-top: 18px; max-width: 580px; }
.hero .eyebrow { background: rgba(255, 255, 255, .1); color: #bfe6ff; border-color: rgba(255, 255, 255, .18); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; font-size: 13.5px; color: #a9b8d3; }
.hero-proof span { display: inline-flex; gap: 7px; align-items: center; }
.hero-proof .icon { color: var(--cyan); }
.hero-visual { position: relative; }
.hero-visual .shot { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .15); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .7); background: #0b1426; }
.hero-visual .float {
  position: absolute; background: #fff; color: var(--text); border-radius: 12px; padding: 12px 14px;
  box-shadow: var(--shadow-lg); font-size: 12.5px; border: 1px solid var(--line); min-width: 170px;
}
.hero-visual .float b { display: block; font-size: 20px; letter-spacing: -.01em; }
.hero-visual .float small { color: var(--muted); }
.f1 { top: -18px; left: -22px; } .f2 { bottom: -22px; left: 6%; } .f3 { bottom: -22px; right: -14px; }   /* bottom right: the Nexora AI steps (top right of the shot) stay in view */
@media (max-width: 1100px) {
  .hero .wrap { grid-template-columns: 1fr; padding: 60px 0; }
  .hero-visual { margin-top: 10px; }
  .f1 { left: 0; top: -14px; } .f2 { left: 0; bottom: -14px; } .f3 { right: 0; bottom: -14px; }
}
.page-hero { background: linear-gradient(160deg, var(--navy-950), var(--navy-900) 70%, #0b2350); color: #fff; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; pointer-events: none; }
.page-hero .wrap { position: relative; padding: 64px 0 56px; max-width: 860px; }
.page-hero h1 { color: #fff; }
.page-hero p.lead { color: #c7d2e5; margin-top: 16px; }
.page-hero .eyebrow { background: rgba(255, 255, 255, .1); color: #bfe6ff; border-color: rgba(255, 255, 255, .18); }
.crumbs { font-size: 12.5px; color: #8fa2c4; margin-bottom: 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs a { color: #c7d2e5; }
.crumbs a:hover { color: #fff; }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
}
a.card { color: var(--text); text-decoration: none !important; display: block; }
.card.hover:hover, a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--primary) 40%, var(--line)); }
.card .ico {
  width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary); margin-bottom: 16px;
}
.card .ico .icon { width: 22px; height: 22px; }
.card h3, .card h4 { margin-bottom: 8px; }
.card p { color: var(--text-2); font-size: 14.5px; }
.card .more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-weight: 700; font-size: 13.5px; color: var(--primary); }
.card.flag { border-color: var(--primary); background: linear-gradient(180deg, var(--primary-50), var(--card) 70%); }
.card.flag::after { content: "Flagship"; position: absolute; top: 16px; right: 16px; background: var(--primary); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; }
.card.dark { background: var(--navy-900); color: #fff; border-color: rgba(255,255,255,.1); }
.card.dark p { color: #b8c5db; }
.card.dark .ico { background: rgba(255,255,255,.1); color: var(--cyan); }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--bg-3); color: var(--text-2); border: 1px solid var(--line); }
.tag.blue { background: var(--primary-50); color: var(--primary); }
.tag.green { background: rgba(16,185,129,.12); color: #059669; }
.tag.amber { background: rgba(245,158,11,.14); color: #b45309; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* Check lists */
.checks { list-style: none; display: grid; gap: 10px; }
/* NOT display:flex. A flex row makes every inline element inside the
   line its own flex item, so a <b> or an <em> in the middle of a bullet
   breaks into a column of its own and the sentence comes apart. The icon
   is placed instead and the text flows as text. */
.checks li { display: block; position: relative; padding-left: 30px;
  color: var(--text-2); font-size: 15px; }
.checks li .icon { position: absolute; left: 0; top: 3px;
  width: 20px; height: 20px; color: var(--success); }
.checks.cols { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .checks.cols { grid-template-columns: 1fr; } }

/* Feature split */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split.rev > :first-child { order: 2; }
.split-contact { align-items: start; grid-template-columns: 1fr 1.1fr; }
@media (max-width: 900px) { .split, .split-contact { grid-template-columns: 1fr; gap: 28px; } .split.rev > :first-child { order: 0; } }
.split h2 { margin-bottom: 14px; }
.split p { color: var(--text-2); font-size: 16px; }
.split .checks { margin-top: 18px; }
.shot { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #0b1426; }
.shot img { width: 100%; }

/* Stats */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; text-align: center; }
.stat b { display: block; font-size: 34px; letter-spacing: -.02em; color: var(--primary); line-height: 1; }
.stat span { display: block; font-size: 13px; color: var(--muted); margin-top: 8px; }
@media (max-width: 800px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Steps / process */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; counter-reset: s; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 18px; position: relative; }
.step::before { counter-increment: s; content: "0" counter(s); font-family: var(--mono); font-weight: 700; color: var(--primary); font-size: 13px; letter-spacing: .05em; }
.step h4 { margin: 8px 0 6px; font-size: 15.5px; }
.step p { font-size: 13.5px; color: var(--text-2); }
.steps-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* Compare */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compare .card ul { list-style: none; display: grid; gap: 10px; margin-top: 12px; }
.compare .card li { display: flex; gap: 10px; font-size: 14.5px; color: var(--text-2); }
.compare .bad { border-color: rgba(239,68,68,.35); }
.compare .bad li::before { content: "✕"; color: var(--danger); font-weight: 800; }
.compare .good { border-color: rgba(16,185,129,.4); }
.compare .good li::before { content: "✓"; color: var(--success); font-weight: 800; }
@media (max-width: 800px) { .compare { grid-template-columns: 1fr; } }

/* Tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
table.t th, table.t td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.t th { background: var(--bg-3); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
table.t tr:last-child td { border-bottom: 0; }
table.t td.num, table.t th.num { text-align: right; font-family: var(--mono); }

/* Forms */
.form { display: grid; gap: 14px; }
.form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form .row2 { grid-template-columns: 1fr; } }
.field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--bg-2); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 98, 255, .15); }
.field input::placeholder, .field textarea::placeholder { color: #9aa8bf; }
.field textarea { min-height: 110px; resize: vertical; }
.hint { font-size: 12px; color: var(--muted); line-height: 1.65; }
.field .hint { margin-top: 5px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 12.5px; color: var(--muted); text-align: center; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.form-actions .btn { flex: 1; }
.form-status { font-size: 13.5px; padding: 10px 12px; border-radius: 10px; display: none; }
.form-status.ok { display: block; background: rgba(16,185,129,.12); color: #047857; }
.form-status.err { display: block; background: rgba(239,68,68,.12); color: #b91c1c; }
.form-status.wait { display: block; background: var(--bg-3); color: var(--text-2); }
:root[data-theme="dark"] .form-status.ok { color: #6ee7b7; }
:root[data-theme="dark"] .form-status.err { color: #fca5a5; }
.form-actions .btn:disabled { opacity: .6; cursor: progress; }
/* 4.73.0 — product range ticks, and what is missing said on the field itself */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
.field legend { display: block; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 6px; }
.ticks { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.ticks .tick {
  display: flex; align-items: center; gap: 9px; margin: 0; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px;
  background: var(--bg-2); color: var(--text); font-size: 13.5px; font-weight: 600; line-height: 1.3; cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.ticks .tick:hover { border-color: color-mix(in srgb, var(--primary) 45%, var(--line-2)); }
.ticks .tick.on { border-color: var(--primary); background: var(--primary-50); }
.ticks .tick:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 98, 255, .15); }
.ticks input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; padding: 0; accent-color: var(--primary); cursor: pointer; }
.ticks input[type="checkbox"]:focus { box-shadow: none; }
@media (max-width: 560px) { .ticks .tick { padding: 9px 10px; gap: 8px; font-size: 13px; } }
.field.has-err input, .field.has-err select, .field.has-err textarea, .field.has-err .tick { border-color: var(--danger); }
.field-err { margin-top: 6px; padding: 7px 10px; border-radius: 8px; background: rgba(239,68,68,.12); color: #b91c1c; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
:root[data-theme="dark"] .field-err { color: #fca5a5; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 1000; background: rgba(5, 12, 26, .7); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 20px; }
.modal.open { display: flex; }
.modal-box { background: var(--card); border: 1px solid var(--line); border-radius: 18px; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; padding: 28px; box-shadow: var(--shadow-lg); animation: pop .2s ease; }
@keyframes pop { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; }
.modal-head h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.modal-head img { width: 28px; }
.modal-x { background: transparent; border: 0; color: var(--muted); width: 36px; height: 36px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.modal-x:hover { background: var(--bg-3); color: var(--text); }
.modal-sub { color: var(--text-2); font-size: 14px; margin-bottom: 18px; }

/* Calculator */
.calc { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; display: grid; grid-template-columns: 1.1fr .9fr; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc-in { padding: 28px; }
.calc-in h3 { margin-bottom: 18px; font-size: 18px; }
.calc-fields { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 480px) { .calc-fields { grid-template-columns: 1fr; } }
.calc-check { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--text-2); }
.calc-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.calc-out { background: var(--navy-900); color: #fff; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.calc-big { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 18px 20px; }
.calc-big small { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #93a4c4; }
.calc-big b { display: block; font-size: 44px; line-height: 1.05; letter-spacing: -.02em; margin-top: 4px; }
.calc-big b em { font-style: normal; font-size: 18px; color: #93a4c4; margin-left: 6px; }
.calc-rows { display: grid; gap: 8px; }
.calc-rows div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 10px 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.calc-rows div span { color: #a9b8d3; }
.calc-rows div b { font-family: var(--mono); font-weight: 600; }
.calc-rows div.total b { color: var(--cyan); font-size: 16px; }
.calc-formula { font-family: var(--mono); font-size: 12px; color: #93a4c4; background: rgba(0,0,0,.25); padding: 10px 12px; border-radius: 8px; word-break: break-word; }
.calc-note { font-size: 12.5px; color: var(--muted); margin-top: 14px; line-height: 1.6; }

/* Screens gallery */
.screen { display: grid; grid-template-columns: .8fr 1.2fr; gap: 36px; align-items: center; padding: 44px 0; border-bottom: 1px solid var(--line); }
.screen:nth-child(even) > :first-child { order: 2; }
.screen:last-child { border-bottom: 0; }
.screen .no { font-family: var(--mono); color: var(--primary); font-weight: 700; font-size: 13px; letter-spacing: .1em; }
.screen h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 8px 0 12px; }
.screen p { color: var(--text-2); }
.screen .checks { margin-top: 14px; }
.screen figure { margin: 0; cursor: zoom-in; }
.screen figcaption { font-size: 12px; color: var(--muted); text-align: center; margin-top: 8px; }
@media (max-width: 900px) { .screen { grid-template-columns: 1fr; gap: 20px; } .screen:nth-child(even) > :first-child { order: 0; } }
.jump { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.jump a { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); }
.jump a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
/* Feature screenshots carry a light and a dark rendering; one shows. */
.shot-dual { position: relative; }
.shot-dual img.mode-dark { display: none; }
.shot-dual.dark img.mode-light { display: none; }
.shot-dual.dark img.mode-dark { display: block; }
.shot-toggle { position: absolute; top: 10px; right: 10px; z-index: 2; display: flex; gap: 3px; padding: 3px; border-radius: 999px; background: rgba(11, 20, 38, .78); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(6px); }
.shot-toggle button { border: 0; background: transparent; color: #cbd5e1; font: 700 12px/1 var(--font, inherit); padding: 6px 11px; border-radius: 999px; cursor: pointer; }
.shot-toggle button.on { background: #fff; color: #0b1426; }
.theme-all { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 14px; border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #c7d2e5; font-size: 13px; font-weight: 600; }
.theme-all button { border: 0; background: transparent; color: #e2e8f0; font: 700 13px/1 inherit; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.theme-all button.on { background: #fff; color: #0b1426; }
.jump a { white-space: nowrap; }

.lightbox { position: fixed; inset: 0; z-index: 1100; background: rgba(3, 8, 18, .92); display: none; align-items: center; justify-content: center; padding: 24px; cursor: zoom-out; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 92vh; width: auto; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lightbox button { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.25); font-size: 24px; }

/* Spec sheet sample */
.sheet { background: #fff; color: #0f172a; border: 1px solid var(--line); border-radius: 12px; padding: 26px; font-size: 13px; box-shadow: var(--shadow); }
.sheet .sh-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-bottom: 2px solid #0f172a; padding-bottom: 12px; margin-bottom: 14px; align-items: flex-end; }
.sheet .sh-head img { width: 36px; }
.sheet h5 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; border-bottom: 1px solid #cbd5e1; padding-bottom: 4px; margin: 14px 0 8px; color: #334155; }
.sheet table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sheet td, .sheet th { padding: 6px 8px; border-bottom: 1px solid #e2e8f0; text-align: left; }
.sheet th { background: #f8fafc; font-size: 11px; text-transform: uppercase; color: #475569; }
.sheet .num { text-align: right; font-family: var(--mono); }
.sheet tr.total td { font-weight: 800; background: #f0fdf4; }
.sheet .tol { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; background: #f8fafc; padding: 10px 12px; border-radius: 8px; margin-top: 12px; }

/* Founder */
.founder-grid { display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: start; }
@media (max-width: 860px) { .founder-grid { grid-template-columns: 1fr; } }
.avatar { width: 120px; height: 120px; border-radius: 26px; background: linear-gradient(135deg, var(--primary), var(--cyan)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 42px; font-weight: 900; letter-spacing: .02em; box-shadow: var(--shadow-lg); }
.timeline { display: grid; gap: 0; margin-top: 22px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 17px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.tl { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 12px 0; position: relative; }
.tl i { width: 36px; height: 36px; border-radius: 50%; background: var(--card); border: 2px solid var(--primary); display: flex; align-items: center; justify-content: center; color: var(--primary); font-style: normal; font-weight: 800; font-size: 12px; position: relative; z-index: 1; }
.tl b { display: block; }
.tl span { font-size: 13.5px; color: var(--text-2); }
blockquote.quote { border-left: 4px solid var(--primary); padding: 12px 18px; background: var(--primary-50); border-radius: 0 12px 12px 0; font-size: 17px; font-weight: 600; margin-top: 22px; }

/* CTA band */
.cta { background: linear-gradient(120deg, var(--navy-900), #0b2350 60%, #0a3f8f); color: #fff; padding: 72px 0; position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1px); background-size: 26px 26px; }
.cta .wrap { position: relative; text-align: center; max-width: 760px; }
.cta h2 { color: #fff; }
.cta p { color: #c7d2e5; font-size: 17px; margin: 14px 0 26px; }
.cta .hero-cta { justify-content: center; margin-top: 0; }

/* Footer */
.footer { background: var(--navy-950); color: #a9b8d3; padding: 64px 0 0; font-size: 14px; }
.footer .cols { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr .9fr 1.1fr; gap: 28px; }
@media (max-width: 1100px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer .cols { grid-template-columns: 1fr; } }
.footer h5 { color: #fff; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { color: #c7d2e5; }
.footer a:hover { color: #fff; }
.footer .brand b { color: #fff; }
.footer .brand small { color: #8fa2c4; }
.footer .about { margin-top: 14px; max-width: 320px; line-height: 1.6; }
.footer .bottom { border-top: 1px solid rgba(255,255,255,.08); margin-top: 44px; padding: 18px 0; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #7f92b3; }

/* WhatsApp float */
.wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 800; width: 54px; height: 54px; border-radius: 50%; background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 30px -8px rgba(37, 211, 102, .7); }
.wa-float:hover { transform: scale(1.06); text-decoration: none; }
.wa-float .icon { width: 28px; height: 28px; fill: currentColor; stroke: none; }

/* Reveal */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.js-off .reveal { opacity: 1; transform: none; }

/* Misc */
.pill-row { display: flex; gap: 10px; flex-wrap: wrap; }
.kicker { font-size: 13px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .08em; }
.divider { height: 1px; background: var(--line); margin: 30px 0; }
.faq details { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 0 18px; margin-bottom: 10px; }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--primary); font-size: 20px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 16px; color: var(--text-2); font-size: 14.5px; }
.contact-cards .card { display: flex; gap: 14px; align-items: flex-start; }
.contact-cards .card .ico { margin: 0; flex: none; }
.contact-cards .card b { display: block; margin-bottom: 4px; }
.contact-cards .card a { font-weight: 600; }
.module-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .module-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .module-list { grid-template-columns: 1fr; } }
.module { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; display: flex; gap: 12px; align-items: flex-start; }
.module .icon { width: 22px; height: 22px; color: var(--primary); margin-top: 2px; }
.module b { display: block; font-size: 14.5px; }
.module span { font-size: 13px; color: var(--text-2); }
.forecast-out { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.forecast-out .k { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; padding: 12px 14px; }
.forecast-out .k small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #93a4c4; }
.forecast-out .k b { display: block; font-size: 20px; font-family: var(--mono); font-weight: 600; margin-top: 4px; }
.forecast-out .k.hi b { color: var(--cyan); }
@media (max-width: 480px) { .forecast-out { grid-template-columns: 1fr; } }

/* ---------- Simulator calculator ---------- */
.sim-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.sim-head h3 { margin: 0; }
.unit-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.unit-toggle button { border: 0; background: var(--bg-2); color: var(--text-2); padding: 6px 12px; font-weight: 700; font-size: 12.5px; }
.unit-toggle button.on { background: var(--primary); color: #fff; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; color: var(--primary); cursor: pointer; margin-left: 8px; }
.inline-check input { accent-color: var(--primary); width: 14px; height: 14px; }
.sim-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.prices { margin-top: 14px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 12px; background: var(--bg-3); }
.calc.sim .calc-out { gap: 12px; }
.o-sub { font-size: 12px; color: #93a4c4; margin-top: 6px; }
.cost-box { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; }
.cost-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #93a4c4; margin-bottom: 10px; }
.cost-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.cost-grid small { display: block; font-size: 11px; color: #93a4c4; text-transform: uppercase; letter-spacing: .05em; }
.cost-grid b { display: block; font-family: var(--mono); font-size: 18px; font-weight: 600; }
.cost-grid > div:first-child b { color: var(--cyan); font-size: 24px; }
.cost-total { font-size: 13px; color: #c7d2e5; border-top: 1px dashed rgba(255,255,255,.14); margin-top: 10px; padding-top: 10px; }
.cost-total b { font-family: var(--mono); font-weight: 600; }
.locked { position: relative; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 14px 16px; }
.locked-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #93a4c4; margin-bottom: 8px; }
.locked-head .tag { background: rgba(0,210,255,.15); color: var(--cyan); border-color: transparent; }
.locked-list { list-style: none; display: grid; gap: 6px; }
.locked-list li { display: flex; justify-content: space-between; font-size: 13.5px; color: #c7d2e5; }
.locked-list b { font-family: var(--mono); font-weight: 600; }
.blur { filter: blur(6px); user-select: none; pointer-events: none; }
.locked-cta { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.14); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.locked-cta p { font-size: 12.5px; color: #93a4c4; flex: 1 1 220px; margin: 0; }

/* ---------- Conversion tools ---------- */
.tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 24px; }
.tool h2, .tool h3 { font-size: 20px; margin-bottom: 14px; }
.tool .calc-fields { grid-template-columns: repeat(2, 1fr); }
.tool-out { margin-top: 16px; background: var(--navy-900); color: #fff; border-radius: 12px; padding: 16px 18px; }
.tool-out small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #93a4c4; }
.tool-out b { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -.02em; margin-top: 4px; }
.tool-out b em { font-style: normal; font-size: 15px; color: #93a4c4; margin-left: 6px; }
.tool-out .calc-formula { margin-top: 10px; }
.tool-out .aux { font-size: 13px; color: #c7d2e5; margin-top: 8px; }
.tool-out .aux b { display: inline; font-size: 14px; font-family: var(--mono); font-weight: 600; margin: 0; }
.formula-box { background: var(--bg-3); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-family: var(--mono); font-size: 13.5px; line-height: 1.8; overflow-x: auto; }
.related { display: flex; gap: 8px; flex-wrap: wrap; }
.related a { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text-2); }
.related a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.prose p { color: var(--text-2); margin-bottom: 12px; font-size: 15.5px; }
.prose h2 { margin: 26px 0 10px; font-size: 24px; }
.prose h3 { margin: 18px 0 8px; font-size: 18px; }
.prose ul { color: var(--text-2); padding-left: 20px; margin-bottom: 12px; }
.prose li { margin-bottom: 6px; }

.field input[readonly] { background: var(--bg-3); color: var(--text-2); }
.field label.split-label { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.fieldset-title { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 20px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.fieldset-title:first-of-type { margin-top: 0; }
.auto-tag { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); background: var(--primary-50); border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: middle; }
.inline-check.standalone { margin-left: 0; margin-top: 24px; font-size: 13.5px; }
.calc.sim .locked .cost-grid { gap: 10px 14px; }
.calc.sim .locked .cost-grid b { font-size: 20px; }
.calc.sim .locked .cost-grid > div:first-child b { font-size: 24px; color: var(--cyan); }
.locked .cost-total { color: #93a4c4; }
.blur { filter: blur(7px); user-select: none; pointer-events: none; }
@media (max-width: 480px) { .blur { filter: blur(5px); } }

.sync-note { font-size: 12.5px; font-weight: 600; color: var(--primary); background: var(--primary-50); border-radius: 8px; padding: 8px 12px; margin-top: 10px; line-height: 1.5; }
.sync-note:empty { display: none; }

.mode-field { margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--primary); border-radius: 10px; background: var(--bg-3); }
.mode-field > label { font-size: 12.5px; }
.mode-field .hint { margin-top: 7px; }

.video-frame { margin: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); background: #0b1426; }
.video-frame video { width: 100%; height: auto; display: block; background: #0b1426; }
.video-frame figcaption { font-size: 12.5px; color: var(--muted); padding: 10px 14px; background: var(--card); border-top: 1px solid var(--line); }

/* "Only in Nexora" cards */
.only-card { position: relative; padding-top: 30px; }
.only-no { position: absolute; top: 14px; right: 18px; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--primary); opacity: .55; }
.only-card h4 { font-size: 16px; line-height: 1.3; }
.only-card p { font-size: 14px; }
.only-card .more { margin-top: 12px; }

/* three hero buttons stay on one line until the hero stacks */
@media (min-width: 1101px) {
  .hero-cta-3 { flex-wrap: nowrap; }
  .hero-cta-3 .btn-lg { padding: 14px 20px; font-size: 15px; }
}

.input-unit { display: grid; grid-template-columns: 1fr 88px; gap: 8px; align-items: start; }
.input-unit select { padding-left: 10px; padding-right: 26px; }
@media (max-width: 420px) { .input-unit { grid-template-columns: 1fr 76px; } }

.tool-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.tool-head h2 { margin: 0; }
.field .unit-toggle { margin-top: 7px; }
.unit-toggle button { cursor: pointer; }
@media (max-width: 420px) { .tool-head { align-items: flex-start; } }

.faq-group { font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); margin: 22px 0 10px; }
.faq-group:first-child { margin-top: 0; }

.btn-link { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.btn-link:hover { text-decoration: none; }

.steps-list { counter-reset: sl; list-style: none; display: grid; gap: 10px; margin: 6px 0 0; }
.steps-list li { counter-increment: sl; position: relative; padding-left: 40px; }
.steps-list li::before { content: counter(sl); position: absolute; left: 0; top: 1px; width: 26px; height: 26px; border-radius: 999px; background: var(--primary-50); color: var(--primary); font-size: 13px; font-weight: 800; display: grid; place-items: center; }


/* ---------- Invoice & quotation generator ---------- */
.invtool { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
@media (max-width: 1080px) { .invtool { grid-template-columns: minmax(0, 1fr); } }
.inv-block { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.inv-block h2 { font-size: 16px; margin: 0 0 14px; }
.inv-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-head h2 { margin: 0; }
.inv-logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.inv-logo-prev img { max-height: 46px; max-width: 160px; border: 1px solid var(--line); border-radius: 6px; padding: 4px; background: #fff; }
.inv-rowhead, .inv-row { display: grid; grid-template-columns: minmax(0,3fr) minmax(0,1.1fr) 68px 62px minmax(0,1.2fr) minmax(0,1.3fr) 30px; gap: 6px; align-items: center; }
.inv-rowhead { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 0 0 6px; font-weight: 700; }
.inv-row { margin-bottom: 6px; }
.inv-row input { width: 100%; padding: 8px 9px; font-size: 13.5px; }
.inv-c.amt { font-family: var(--mono); font-size: 13px; text-align: right; padding-right: 2px; overflow: hidden; text-overflow: ellipsis; }
.inv-rowhead .amt, .inv-rowhead .rate, .inv-rowhead .qty { text-align: right; }
.inv-x { background: none; border: 0; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.inv-x:hover { color: #e23; }
@media (max-width: 720px) {
  .inv-rowhead { display: none; }
  .inv-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; }
  .inv-c.desc, .inv-c.amt { grid-column: 1 / -1; }
  .inv-c.amt { text-align: left; }
  .inv-c.del { grid-column: 2; justify-self: end; }
}
.inv-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-preview { position: sticky; top: 86px; }
/* the preview is a scaled miniature of the real page, so it matches the print */
.inv-scale { position: relative; overflow: hidden; }
.inv-scale > .doc { transform-origin: top left; }
.invtool.scaled .inv-scale > .doc { width: 720px; }
.inv-preview-head { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; margin-bottom: 8px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.inv-badge { background: #fff4e0; color: #9a5b00; border: 1px solid #f0cf9a; border-radius: 999px; padding: 3px 10px; font-size: 10px; letter-spacing: .04em; text-transform: none; font-weight: 700; }
.invtool.is-sample .doc { opacity: .82; }
@media print { .inv-badge { display: none !important; } }

/* the document itself — a sheet worth sending to a buyer */
.doc {
  --dc: #1f3864;                 /* the accent, chosen in the form */
  --dink: #17202c; --dmute: #5b6676; --dline: #dde3ec; --dtint: #f6f8fc;
  background: #fff; color: var(--dink); border: 1px solid var(--line); border-radius: 8px;
  padding: 0 30px 26px; font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-sm);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.doc * { color: inherit; }
.doc-band { height: 6px; background: var(--dc); margin: 0 -30px 22px; border-radius: 8px 8px 0 0; }

.doc-head { display: flex; justify-content: space-between; gap: 22px; align-items: flex-start; margin-bottom: 20px; }
.doc-brand { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.doc-brand img { max-height: 56px; max-width: 150px; object-fit: contain; }
.doc-co { font-size: 17px; font-weight: 800; letter-spacing: -.2px; color: var(--dc); margin-bottom: 3px; }
.doc-sm { font-size: 11.5px; color: var(--dmute); }
.doc-gst { color: var(--dink); margin-top: 3px; }
.doc-gst b { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dmute); }

.doc-type { text-align: right; flex: none; }
.doc-t { display: inline-block; background: var(--dc); color: #fff !important; font-size: 14px; font-weight: 800;
         letter-spacing: .1em; padding: 7px 16px; border-radius: 5px; margin-bottom: 9px; }
table.doc-meta { margin-left: auto; border-collapse: collapse; font-size: 11.5px; }
table.doc-meta td { padding: 2px 0 2px 12px; text-align: right; white-space: nowrap; }
table.doc-meta td:first-child { color: var(--dmute); text-transform: uppercase; font-size: 9.5px; letter-spacing: .07em; padding-left: 0; }
table.doc-meta td:last-child { font-weight: 700; font-family: var(--mono); }

.doc-party { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.doc-pcard { flex: 1; background: var(--dtint); border: 1px solid var(--dline);
             border-left: 3px solid var(--dc); border-radius: 6px; padding: 11px 14px; min-width: 0; }
.doc-pos { flex: 0 0 34%; }
.doc-lbl { font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--dc); font-weight: 800; margin-bottom: 4px; }
.doc-co2 { font-weight: 700; font-size: 13px; margin-bottom: 2px; }

table.doc-items { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.doc-items th { background: var(--dc); color: #fff !important; font-size: 9.5px; text-transform: uppercase;
                     letter-spacing: .07em; padding: 8px 9px; text-align: left; font-weight: 700; }
table.doc-items th:first-child { border-radius: 5px 0 0 0; }
table.doc-items th:last-child { border-radius: 0 5px 0 0; }
table.doc-items td { padding: 8px 9px; border-bottom: 1px solid var(--dline); vertical-align: top; }
table.doc-items tbody tr:nth-child(even) td { background: var(--dtint); }
table.doc-items .r { text-align: right; font-family: var(--mono); }
table.doc-items .c { text-align: center; }
table.doc-items th.r { text-align: right; }
table.doc-items th.c { text-align: center; }

.doc-mid { display: flex; gap: 22px; margin-top: 16px; align-items: flex-start; }
.doc-midleft { flex: 1; min-width: 0; }
.doc-midright { flex: 0 0 252px; }
.doc-words { background: var(--dtint); border: 1px solid var(--dline); border-radius: 6px;
             padding: 9px 12px; font-size: 11.5px; font-weight: 600; margin-bottom: 12px; }
.doc-words .doc-lbl { display: block; margin-bottom: 2px; }
.doc-bank .doc-sm { line-height: 1.6; }

table.doc-sum { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.doc-sum td { padding: 4px 0; }
table.doc-sum td.r { text-align: right; font-family: var(--mono); }
table.doc-sum tr.doc-sub td { border-top: 1px solid var(--dline); padding-top: 6px; font-weight: 700; }
.doc-grand { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
             background: var(--dc); color: #fff !important; border-radius: 6px; padding: 9px 13px; margin-top: 8px; }
.doc-grand span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; opacity: .9; }
.doc-grand b { font-family: var(--mono); font-size: 15px; font-weight: 700; white-space: nowrap; }

.doc-terms-box { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--dline); }
.doc-terms { margin: 0; padding-left: 16px; font-size: 11px; color: var(--dmute); }
.doc-terms li { margin-bottom: 2px; }

.doc-sign { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 26px; gap: 24px; font-size: 11.5px; }
.doc-thanks { color: var(--dmute); font-style: italic; }
.doc-sig { text-align: right; }
.doc-sigline { margin-top: 40px; border-top: 1px solid var(--dmute); padding-top: 4px; font-size: 10px; color: var(--dmute); }
.doc-footnote { margin-top: 18px; padding-top: 9px; border-top: 2px solid var(--dc);
                font-size: 9.5px; color: var(--dmute); text-align: center; letter-spacing: .03em; }

/* the accent picker in the form */
.doc-theme { display: flex; gap: 7px; align-items: center; }
.doc-theme button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
                    background: var(--c); cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--line) inset; }
.doc-theme button.on { border-color: var(--text); box-shadow: 0 0 0 2px #fff inset; }

/* a notice block, used for the legal statement */
.notice { background: var(--bg-3); border: 1px solid var(--line); border-left: 4px solid var(--primary); border-radius: 12px; padding: 20px 22px; margin-top: 26px; }
.notice h2 { font-size: 17px; margin: 0 0 10px; }
.notice p { font-size: 13.5px; margin-bottom: 10px; }
.notice p:last-child { margin-bottom: 0; }
.notice-legal { border-left-color: #d98218; }

@media print {
  body > *:not(main), .topbar, .header, .footer, .page-hero, .section-alt,
  .inv-form, .inv-preview-head, .notice, .cta, .wa-float, .demo-modal, .lightbox { display: none !important; }
  .section { padding: 0 !important; background: #fff !important; }
  .wrap { max-width: none !important; padding: 0 !important; }
  .invtool { display: block !important; }
  .inv-preview { position: static !important; }
  .doc { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 12px;
         width: auto !important; transform: none !important; padding: 0 !important; }
  .doc-band { margin: 0 0 20px !important; border-radius: 0 !important; }
  .doc-items thead { display: table-header-group; }
  .doc-items tr, .doc-sign, .doc-grand, .doc-words { break-inside: avoid; }
  .inv-scale { overflow: visible !important; height: auto !important; }
  @page { size: A4; margin: 14mm; }
}

/* the document keeps its proportions on a phone by scrolling inside its own box,
   rather than pushing the page sideways */
.invtool:not(.scaled) .inv-preview { overflow-x: auto; }
@media (max-width: 720px) {
  .doc { padding: 16px; font-size: 11.5px; min-width: 460px; }
  .doc-head, .doc-party, .doc-cols, .doc-sign { gap: 12px; }
  .inv-block { padding: 16px; }
}

/* ---------- Easy cost calculator (the trade's quick sum) ----------
   The rates on that page are SAMPLES, and the page has to say so where
   nobody can miss it — hence .es-warn, which is loud on purpose and
   appears twice: above the calculator and again inside the rates
   drawer. A visitor who takes a sample rate for a quotation is the one
   failure this page must not have. */
.es-warn { display: flex; gap: 14px; align-items: flex-start; margin: 0 0 22px;
  padding: 16px 18px; border-radius: 14px; font-size: 14px; line-height: 1.65;
  color: var(--text-2); background: rgba(245, 158, 11, .09);
  border: 1px solid rgba(245, 158, 11, .32); border-left-width: 4px; }
.es-warn b { color: var(--text); }
.es-warn-ico { flex: 0 0 auto; color: #f59e0b; margin-top: 2px; }
.es-warn-ico .icon { width: 20px; height: 20px; }
.es-warn-sm { margin-bottom: 16px; padding: 12px 14px; font-size: 13px; }

.es-tabs button { min-width: 104px; }

.es-table { margin-top: 14px; }
.es-row { display: grid; grid-template-columns: 1.6fr .8fr .9fr .9fr; gap: 10px;
  font-size: 13.5px; padding: 9px 0; border-bottom: 1px dashed rgba(255,255,255,.14); }
.es-row span { color: #a9b8d3; }
.es-row b { font-family: var(--mono); font-weight: 600; text-align: right; }
.es-row.es-head { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: #93a4c4; }
.es-row.es-head b { color: #93a4c4; font-family: inherit; font-weight: 700; }
.es-row.es-sum { border-bottom: 0; border-top: 1px solid rgba(255,255,255,.2); }
.es-row.es-sum span, .es-row.es-sum b:last-child { color: var(--cyan); font-weight: 700; }

.es-strength { margin-top: 14px; }
.es-strength small { display: block; font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: #93a4c4; margin-bottom: 6px; }
.es-meter { height: 7px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin-bottom: 6px; }
.es-meter i { display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, #ef4444, #f59e0b 45%, #22c55e); }

.es-rates-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.es-rates-bar .muted { font-size: 13px; color: var(--muted); }
.es-rate-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 16px;
  padding: 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.es-rate-grid h4 { margin: 0 0 10px; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: #93a4c4; }
.es-rate-grid h4 + .calc-fields + h4 { margin-top: 20px; }
@media (max-width: 880px) {
  .es-rate-grid { grid-template-columns: 1fr; gap: 20px; }
  .es-row { grid-template-columns: 1.4fr .8fr .8fr; }
  .es-row b:nth-child(3) { display: none; }
}
/* .calc-big b is the 44px headline figure, and it catches any <b> inside
   the box — including the one in the sub-line that says these rates are
   samples. The sub-line is prose; it reads at prose size. */
.calc-big .o-sub b { display: inline; font-size: inherit; color: inherit; margin: 0; }

/* The material prices carry a real heading now, because a section with
   no heading behind a fold is a section a reader cannot find. */
.es-rates-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 26px 0 4px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 90px;
}
.es-rates-head h3 { margin: 0; font-size: 19px; }
.es-rates-lead { margin: 0 0 14px; max-width: 62ch; }

/* ---------- Welcome video (home page) ----------
   A full-screen layer over the page that plays first; the page appears when
   it ends, on Skip, or on Escape. Dark in both themes — it is a film, not a
   page. html.intro-on / html.intro-skip are set before first paint by the
   inline script in pages/index.html. */
html.intro-on { overflow: hidden; }
.intro-skip .intro { display: none; }
.intro {
  position: fixed; inset: 0; z-index: 9999;
  background: #070a12;
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity .6s ease;
}
.intro.intro-out { opacity: 0; pointer-events: none; }
.intro-video {
  width: 100%; height: 100%;
  object-fit: contain; /* the whole frame, always — never crop a face */
  opacity: 0; transition: opacity .5s ease;
}
.intro.intro-playing .intro-video { opacity: 1; }
.intro-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.intro-wait img { border-radius: 20px; animation: introPulse 1.6s ease-in-out infinite; }
.intro.intro-playing .intro-wait { display: none; }
@keyframes introPulse { 0%, 100% { opacity: .5; transform: scale(.95); } 50% { opacity: 1; transform: scale(1); } }
.intro-controls {
  position: absolute;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(24px, calc(env(safe-area-inset-bottom) + 14px));
  display: flex; gap: 10px;
}
.intro-btn {
  font: 600 14px/1 Inter, system-ui, sans-serif; color: #fff;
  min-height: 44px; /* a thumb, not a cursor */
  padding: 12px 18px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.intro-btn:hover { background: rgba(255, 255, 255, .24); }
/* Sound shows its STATE: grey and crossed out while muted, Nexora blue with
   waves once it is on — so the button reads the way it sounds. */
.intro-sound { display: inline-flex; align-items: center; gap: 8px; color: #b8c0d0; background: rgba(120, 128, 145, .32); border-color: rgba(184, 192, 208, .35); }
.intro-sound:hover { background: rgba(120, 128, 145, .45); }
.intro-sound[aria-pressed="true"] { color: #fff; background: #4f7cff; border-color: #7d9dff; box-shadow: 0 0 0 3px rgba(79, 124, 255, .28); }
.intro-sound[aria-pressed="true"]:hover { background: #3f6cf0; }
.intro-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro-ico path:first-child { fill: currentColor; }
.intro-sound .ico-on { display: none; }
.intro-sound[aria-pressed="true"] .ico-on { display: inline; }
.intro-sound[aria-pressed="true"] .ico-off { display: none; }
.intro-btn:focus-visible { outline: 2px solid #6d93ff; outline-offset: 2px; }
.intro-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .12); }
.intro-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6d93ff, #4f7cff); transition: width .25s linear; }
@media (max-width: 480px) {
  .intro-controls { left: 16px; right: 16px; justify-content: space-between; }
  .intro-btn { padding: 12px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro, .intro-video, .intro-bar i { transition: none; }
  .intro-wait img { animation: none; }
}

/* The way back to it, under the hero buttons */
.intro-replay {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 8px 2px; min-height: 40px;
  background: none; border: 0; cursor: pointer;
  font: 600 15px/1.2 Inter, system-ui, sans-serif; color: inherit; opacity: .9;
}
.intro-replay:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.intro-replay .icon { width: 1.3em; height: 1.3em; }

/* The welcome film offered in a corner, for a visitor from a search engine
   (never a layer over the page: Google ranks that down). Left corner, since
   the WhatsApp button holds the right; small enough to read the page past. */
.intro-offer-pill {
  position: fixed; left: 16px; bottom: 18px; z-index: 790;
  display: flex; align-items: center; gap: 2px;
  background: #0b1224; color: #fff;
  border: 1px solid rgba(125, 157, 255, .45); border-radius: 999px;
  box-shadow: 0 10px 28px -10px rgba(15, 30, 80, .7);
  padding: 4px 4px 4px 6px; max-width: calc(100vw - 100px);
}
.intro-offer-pill[hidden] { display: none; }
.intro-offer-play {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px;
  background: none; border: 0; color: inherit; cursor: pointer; white-space: nowrap;
  font: 600 13.5px/1 Inter, system-ui, sans-serif;
}
.intro-offer-play .icon { width: 20px; height: 20px; color: #7d9dff; }
.intro-offer-x {
  width: 32px; height: 32px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, .1); color: #c7d2e5; font-size: 18px; line-height: 1;
}
.intro-offer-x:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.intro-offer-play:focus-visible, .intro-offer-x:focus-visible { outline: 2px solid #6d93ff; outline-offset: 2px; border-radius: 999px; }

/* In every footer */
.footer-replay {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; background: none; border: 0;
  color: #c7d2e5; font: inherit; cursor: pointer;
}
.footer-replay:hover { color: #fff; text-decoration: underline; }
.footer-replay .icon { width: 1.2em; height: 1.2em; }

@media print { .intro, .intro-offer-pill { display: none !important; } }

/* =========================================================
   Colour gradients, 30 Sep 2026 — owner: "add gradiant effect in website also with different colour not at
   everywhere but where its look good". The palette is the app's own (4.70.1 / phone 0.9.1): blue into cyan, amber into
   rose, violet into pink, green into sky, and Marketing's sunrise. Only the home page's hero, its phone band, the
   flagship card, the four "Only in Nexora" cards, the four figures and Nexora AI's kicker wear them.
   ========================================================= */
:root {
  --sun: linear-gradient(100deg, #f59e0b 0%, #ec4899 52%, #8b5cf6 100%);
  --ai: linear-gradient(95deg, #6366f1, #a855f7 55%, #ec4899);
}
.grad-sun { background: var(--sun); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 .grad { background: linear-gradient(95deg, #fcd34d, #fb7185 48%, #c084fc); -webkit-background-clip: text; background-clip: text; }
.hero { background: radial-gradient(900px 520px at 100% 100%, rgba(236, 72, 153, .20), transparent 60%),
                    radial-gradient(1200px 600px at 80% -10%, rgba(0, 210, 255, .24), transparent 60%),
                    radial-gradient(900px 500px at -10% 110%, rgba(0, 98, 255, .35), transparent 60%),
                    linear-gradient(160deg, var(--navy-950), var(--navy-900) 60%, #0b2350); }
.hero .btn-primary { background: linear-gradient(95deg, #2563eb, #7c3aed); box-shadow: 0 10px 24px -10px #7c3aed; }
.hero .btn-primary:hover { background: linear-gradient(95deg, #1d4ed8, #6d28d9); }
.btn-grad { background: var(--sun); color: #fff; box-shadow: 0 10px 24px -10px #ec4899; }
.btn-grad:hover { filter: brightness(1.06); }

/* the hero: the PC and, beside it, the phone; the picture reaches into the margin on a wide screen so the
   dashboard reads, and the one note sits at its foot, off the briefing and the figures */
.hero-duo { padding: 0 46px 42px 0; }
@media (min-width: 1360px) { .hero-duo { margin-right: -84px; } }
@media (min-width: 1101px) and (max-width: 1359px) { .hero-duo { margin-right: -12px; } }
.hero-phone { position: absolute; right: 0; bottom: 0; width: 25%; max-width: 170px; padding: 5px; border-radius: 24px;
  background: linear-gradient(160deg, #334155, #0b1220); transform: rotate(3deg);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .16); }
.hero-phone img { width: 100%; border-radius: 19px; }
.hero-duo .f1 { top: auto; bottom: 0; left: -34px; }
.hero-duo .float b { font-size: 17px; }
@media (max-width: 1100px) { .hero-duo { padding: 0 26px 30px 0; } .hero-duo .f1 { left: 0; } }
@media (max-width: 560px) { .hero-phone { width: 30%; } .hero-duo .float { display: none; } }

/* Nexora Mobile: a band of its own */
.mobile-band { background: linear-gradient(135deg, #eef2ff 0%, #fdf2f8 48%, #fff7ed 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
:root[data-theme="dark"] .mobile-band { background: linear-gradient(135deg, #0e1733 0%, #221233 50%, #25170d 100%); }
.eyebrow-sun { background: var(--sun); color: #fff; }
.phones { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; max-width: 900px; margin: 0 auto; align-items: start; }
.phone { margin: 0; cursor: zoom-in; }
.phone img { width: 100%; border-radius: 24px; border: 6px solid #0f172a; box-shadow: 0 26px 50px -22px rgba(15, 23, 42, .55), 0 0 0 1px rgba(15, 23, 42, .12); background: #0f172a; transition: transform .25s; }
:root[data-theme="dark"] .phone img { border-color: #1e293b; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .1); }
.phone:hover img { transform: translateY(-6px); }
.phone:nth-child(even) { margin-top: 34px; }
.phone figcaption { text-align: center; font-size: 13px; font-weight: 700; color: var(--text-2); margin-top: 12px; }
.mobile-points { margin-top: 44px; }
@media (max-width: 800px) { .phones { grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 420px; } .phone:nth-child(even) { margin-top: 22px; } }

/* cards and figures, each in its own colour */
.color-cards > .card, .stats-color > .stat { --g1: #2563eb; --g2: #06b6d4; }
.color-cards > .card:nth-child(4n+2), .stats-color > .stat:nth-child(4n+2) { --g1: #f59e0b; --g2: #f43f5e; }
.color-cards > .card:nth-child(4n+3), .stats-color > .stat:nth-child(4n+3) { --g1: #8b5cf6; --g2: #ec4899; }
.color-cards > .card:nth-child(4n+4), .stats-color > .stat:nth-child(4n+4) { --g1: #10b981; --g2: #0ea5e9; }
.color-cards > .card { overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 7%, var(--card)), var(--card) 55%); }
.color-cards > .card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.color-cards > .card .ico { background: linear-gradient(135deg, var(--g1), var(--g2)); color: #fff; box-shadow: 0 10px 20px -10px var(--g1); }
.color-cards > .card.hover:hover { border-color: color-mix(in srgb, var(--g1) 45%, var(--line)); }
.color-cards .only-no { background: linear-gradient(95deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 1; font-size: 15px; }
:root[data-theme="dark"] .color-cards > .card { background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 16%, var(--card)), var(--card) 60%); }
.stats-color > .stat { position: relative; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 8%, var(--card)), var(--card) 70%); }
.stats-color > .stat::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--g1), var(--g2)); }
.stats-color > .stat b { background: linear-gradient(95deg, var(--g1), var(--g2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 40px; padding-bottom: 2px; }
:root[data-theme="dark"] .stats-color > .stat { background: linear-gradient(180deg, color-mix(in srgb, var(--g1) 18%, var(--card)), var(--card) 75%); }

/* the flagship: a sunrise edge and badge */
.card.flag.flag-sun { border: 1.5px solid transparent;
  background: linear-gradient(180deg, color-mix(in srgb, #ec4899 6%, var(--card)), var(--card) 65%) padding-box, var(--sun) border-box; }
.card.flag.flag-sun::after { background: var(--sun); }
.card.flag.flag-sun .ico { background: var(--sun); color: #fff; }

/* Nexora AI's kicker */
.kicker-ai { background: var(--ai); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 800; }

/* 30 Sep 2026 — "for dark and light both mode": the hero and the phone dashboard show the picture of the theme the
   site is in (the dark one is only fetched when it is shown) */
.theme-dark { display: none !important; }
:root[data-theme="dark"] .theme-dark { display: block !important; }
:root[data-theme="dark"] .theme-light { display: none !important; }
/* the hero's note in the dark theme: a dark card with light words (it was a white card with light words) */
:root[data-theme="dark"] .hero-visual .float { background: #0e1830; color: #e6edf7; border-color: #2a3a5a; }

/* 30 Sep 2026 — "in website at home page add new screenshot along with mobile screen also replace old one": each
   computer picture on the home page has the phone's screen beside it, tilted over its corner */
.duo { position: relative; padding: 0 42px 40px 0; }
.duo .shot { margin: 0; }
.duo-phone { position: absolute; right: 0; bottom: 18px; width: 25%; max-width: 165px; padding: 5px; border-radius: 24px; cursor: zoom-in;
  background: linear-gradient(160deg, #334155, #0b1220); transform: rotate(3deg);
  box-shadow: 0 26px 50px -18px rgba(15, 23, 42, .6), 0 0 0 1px rgba(255, 255, 255, .16); transition: transform .25s; }
.duo-phone:hover { transform: rotate(0deg) translateY(-4px); }
.duo-phone img { width: 100%; border-radius: 19px; }
.duo-cap { font-size: 13px; color: var(--muted); margin-top: 12px; padding-right: 26%; }
:root[data-theme="dark"] .duo-phone { box-shadow: 0 26px 50px -18px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .12); }
@media (max-width: 560px) { .duo { padding: 0 20px 30px 0; } .duo-phone { width: 30%; } .duo .duo-cap { padding-right: 36%; } }
.split .duo-cap, .duo .duo-cap { font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- Download page ---------- */
.dl-warning { margin-top: 0; }
.dl-warning h2 { display: flex; align-items: center; gap: 8px; }
.dl-warning h2 .icon { width: 20px; height: 20px; color: #d98218; }
.dl-warn-list { margin: 6px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; color: var(--text-2); }
.dl-warn-list b { color: var(--text); }
.dl-warning code, .dl-card code { font-family: var(--mono); font-size: .92em; background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; word-break: break-all; }
.dl-inline-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); font-weight: 700; cursor: pointer; text-decoration: underline; }
.dl-accept { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; font-size: 14.5px; font-weight: 600; cursor: pointer; }
.dl-accept input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--primary); flex: none; }
.dl-flash { animation: dlflash 1.6s ease; }
@keyframes dlflash { 0%, 100% { box-shadow: none; } 30%, 70% { box-shadow: 0 0 0 4px rgba(217, 130, 24, .35); } }
.dl-list { display: grid; gap: 22px; margin-top: 30px; }
.dl-card { padding: 26px; }
.dl-head { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: start; }
.dl-head .ico { margin: 0; }
.dl-head h3 { margin: 2px 0 4px; font-size: 21px; }
.dl-sub { margin: 0; }
.dl-ver { white-space: nowrap; }
.dl-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.dl-body h4 { font-size: 14px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 12px; }
.dl-files { font-size: 14.5px; }
.dl-specs { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; font-size: 14.5px; }
.dl-specs dt { font-weight: 700; }
.dl-specs dd { margin: 0; color: var(--text-2); }
.dl-steps { margin-top: 22px; font-size: 14.5px; }
.dl-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.dl-btn.is-off { opacity: .55; cursor: not-allowed; filter: grayscale(.35); }
.dl-hint { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--muted); }
.dl-hint:empty { display: none; }
.dl-mobile-text { margin-top: 16px; }
.dl-more { margin-top: 26px; font-size: 14.5px; color: var(--text-2); }
@media (max-width: 720px) {
  .dl-card { padding: 20px; }
  .dl-head { grid-template-columns: auto 1fr; }
  .dl-head .dl-ver { grid-column: 1 / -1; justify-self: start; }
  .dl-body { grid-template-columns: 1fr; gap: 20px; }
  .dl-actions .btn { width: 100%; justify-content: center; }
}

.soon-pill { display: inline-block; vertical-align: middle; margin-left: 8px; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #9a5b00; background: #fff4e0; border: 1px solid #f0cf9a; border-radius: 999px; padding: 3px 9px; }
.soon-note { background: #fff8ec; border: 1px solid #f0cf9a; border-left: 4px solid #d98218; border-radius: 12px; padding: 16px 18px; margin-top: 22px; }
.soon-note b { color: #8a5200; }
.soon-note p { margin: 6px 0 0; font-size: 13.5px; }

/* ---------- a row of phone screenshots ---------- */
.phone-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; align-items: start; }
.phone-row figure { margin: 0; }
.phone-row img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-sm); cursor: zoom-in;
}
.phone-row figcaption { margin-top: 8px; text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); }
@media (max-width: 1100px) { .phone-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 620px)  { .phone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- device frames: a screenshot inside the thing it runs on ---------- */
.devfig { margin: 0; }
.devfig figcaption { margin-top: 12px; text-align: center; font-size: 12.5px; color: var(--muted); }
.devfig .shot img { cursor: zoom-in; }

.dev-pc .lid {
  position: relative; padding: 12px 12px 15px; border-radius: 12px 12px 5px 5px;
  background: linear-gradient(180deg, #2b3547, #18202f);
  box-shadow: 0 20px 46px rgba(2, 8, 23, .24), inset 0 1px 0 rgba(255, 255, 255, .12);
}
.dev-pc .lid::before {                              /* the camera */
  content: ""; position: absolute; top: 5px; left: 50%; transform: translateX(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: #0c121d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.dev-pc .lid img { display: block; width: 100%; border-radius: 4px; cursor: zoom-in; }
.dev-pc .base {
  position: relative; width: 100%; height: 12px;
  background: linear-gradient(180deg, #d7dde8, #9fa9bb); border-radius: 0 0 11px 11px;
}
.dev-pc .base::after {                              /* the notch you lift it by */
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 5px; background: #8d97a9; border-radius: 0 0 6px 6px;
}

.dev-phone .case {
  position: relative; padding: 7px; border-radius: 28px;
  background: linear-gradient(180deg, #2b3547, #161e2b);
  box-shadow: 0 18px 40px rgba(2, 8, 23, .26), inset 0 1px 0 rgba(255, 255, 255, .14);
}
.dev-phone .case::before {                          /* the notch */
  content: ""; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 13px; background: #161e2b; border-radius: 0 0 9px 9px; z-index: 2;
}
.dev-phone .case img { display: block; width: 100%; border-radius: 22px; cursor: zoom-in; }

/* a computer and a phone standing on the same floor */
.devpair { display: flex; align-items: flex-end; gap: 20px; }
.devpair .dev-pc { flex: 1 1 auto; min-width: 0; }
.devpair .dev-phone { flex: 0 0 auto; width: 19%; max-width: 196px; min-width: 112px; }
@media (max-width: 620px) {
  .devpair { display: block; }
  .devpair .dev-phone { width: 168px; margin: 20px auto 0; }
  .dev-phone .case { border-radius: 24px; }
  .dev-phone .case img { border-radius: 18px; }
}

/* the gallery of phone screens wears the same case */
.phone-row .dev-phone .case img { border: 0; background: none; box-shadow: none; border-radius: 20px; }
@media (max-width: 1100px) { .phone-row .dev-phone .case { border-radius: 26px; } }

/* ---------- product icons: a gradient tile with a little depth ---------- */
.g-indigo { --i1: #818cf8; --i2: #4338ca; }
.g-blue   { --i1: #38bdf8; --i2: #1d4ed8; }
.g-teal   { --i1: #2dd4bf; --i2: #0f766e; }
.g-amber  { --i1: #f59e0b; --i2: #b45309; }
.g-rose   { --i1: #fb7185; --i2: #be123c; }
.g-slate  { --i1: #94a3b8; --i2: #475569; }
.g-violet { --i1: #c084fc; --i2: #7e22ce; }
.g-green  { --i1: #34d399; --i2: #047857; }

.dropdown .dd-tile .dd-ico,
.dropdown .dd-tile.is-flagship .dd-ico,
.card .ico {
  background: linear-gradient(150deg, var(--i1, #60a5fa), var(--i2, #1d4ed8));
  position: relative; overflow: hidden; border: 0;
  box-shadow: 0 7px 16px -7px var(--i2, #1d4ed8),
              inset 0 1px 0 rgba(255, 255, 255, .55),
              inset 0 -3px 8px rgba(0, 0, 0, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.dropdown .dd-tile .dd-ico::after,
.card .ico::after {                                  /* the gloss across the top */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(125% 85% at 28% -5%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 62%);
}
.dropdown .dd-tile .dd-ico .icon,
.card .ico .icon { color: #fff; position: relative; z-index: 1; }
.dropdown .dd-tile:hover .dd-ico,
.card.hover:hover .ico, a.card:hover .ico {
  background: linear-gradient(150deg, var(--i1, #60a5fa), var(--i2, #1d4ed8));
  transform: translateY(-2px) scale(1.04);
  filter: saturate(1.08) brightness(1.05);
  box-shadow: 0 11px 20px -8px var(--i2, #1d4ed8),
              inset 0 1px 0 rgba(255, 255, 255, .6),
              inset 0 -3px 8px rgba(0, 0, 0, .18);
}
/* what is not built yet keeps the shape but loses the colour */
.dropdown .dd-tile.is-soon .dd-ico { filter: grayscale(.72) brightness(1.04); }
.dropdown .dd-tile.is-soon:hover .dd-ico { filter: grayscale(.4) saturate(1.05) brightness(1.05); }

/* ---------- a product card wearing its own screen ---------- */
.card-shot {
  margin: -2px 0 14px; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--line); background: var(--bg-3); aspect-ratio: 16 / 9;
}
.card-shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  transition: transform .35s ease;
}
a.card:hover .card-shot img { transform: scale(1.035); }