/* Hallmark · v2.0.0 · custom (brand: Impactan navy, Peru red, cream) · genre editorial · hero: split, head left, the 3D star right · nav: edge-aligned, wordmark, four links, one action · footer: a single bar, wordmark and the legal line · signature: the Impactan star in 3D · job: book an installation */
/* critique: brand-led, one red signal, photos are the company's own, no invented numbers */
/* Hallmark · waive 38iii · the coloured phrase is a whole second line and appears once, in the hero · it is the brand headline split as on the live site */
@import url("tokens.css?v=4");

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 0;
  overflow-wrap: break-word;
  min-width: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; transition: none; }

.wrap { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.skip { position: absolute; left: var(--space-2); top: -4rem; z-index: 50; background: var(--ink); color: var(--paper); padding: var(--space-1) var(--space-2); border-radius: var(--radius-1); }
.skip:focus-visible { top: var(--space-2); }

/* Buttons: one primary style, one quiet style */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 600 var(--step-0)/1 var(--font-body);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform 0.25s var(--ease-out), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--red); color: var(--paper); }
.btn-primary:hover { background: var(--red-deep); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-quiet:hover { background: var(--ink); color: var(--paper); }
.on-night .btn-quiet { color: var(--on-night); border-color: var(--on-night-2); }
.on-night .btn-quiet:hover { background: var(--on-night); color: var(--night); }
.btn svg { width: 1.1em; height: 1.1em; transition: transform 0.25s var(--ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* Nav */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  transition: background-color 0.3s, box-shadow 0.3s, transform 0.4s var(--ease-out);
}
.nav.is-scrolled.on-hero { background: color-mix(in srgb, var(--night-deep) 82%, transparent); box-shadow: 0 1px 0 color-mix(in srgb, var(--on-night) 8%, transparent); }
.nav.is-scrolled.on-hero .logo-light { opacity: 1; } .nav.is-scrolled.on-hero .logo-dark { opacity: 0; }
.nav.is-scrolled.on-hero .nav-links a:not(.btn) { color: var(--on-night-2); }
.nav.is-scrolled { background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.nav.is-hidden { transform: translateY(-100%); }
.nav-logo { display: grid; }
.nav-logo img { grid-area: 1 / 1; transition: opacity .3s; }
.nav .logo-light { opacity: 0; }
.nav.on-hero:not(.is-scrolled) .logo-light { opacity: 1; }
.nav.on-hero:not(.is-scrolled) .logo-dark { opacity: 0; }
.nav.on-hero:not(.is-scrolled) .nav-links a:not(.btn) { color: var(--on-night-2); }
.nav.on-hero:not(.is-scrolled) .nav-links a:not(.btn):hover { color: var(--on-night); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 76px; }
.nav-logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: var(--space-4); }
.nav-links a:not(.btn) { text-decoration: none; font-size: var(--step--1); color: var(--ink-2); transition: color 0.2s; }
.nav-links a:not(.btn):hover { color: var(--ink); }
.nav .btn { padding: 0.75rem 1.2rem; font-size: var(--step--1); }

/* Hero */
.hero { position: relative; overflow: clip; background: var(--night-deep); color: var(--on-night); min-height: min(100svh, 920px); display: grid; align-items: center; padding-block: 140px var(--space-6); }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, var(--night-deep) 0%, color-mix(in srgb, var(--night-deep) 80%, transparent) 45%, color-mix(in srgb, var(--night-deep) 0%, transparent) 72%), linear-gradient(0deg, var(--night-deep) 0%, color-mix(in srgb, var(--night-deep) 0%, transparent) 22%); }
.hero .wrap { position: relative; z-index: 2; }
.btn-light { background: var(--paper); color: var(--night); padding: 1.05rem 1.7rem; }
.btn-light:hover { background: var(--paper); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-3); align-items: center; }
.hero-copy { grid-column: 1 / span 8; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(2.2rem, 1.3rem + 3.2vw, 4.2rem); max-width: 17ch; font-weight: 600; color: var(--on-night); letter-spacing: -0.035em; line-height: 0.98; }
.hero h1 .accent { color: var(--on-night); display: block; }
.hero-sub { margin-top: var(--space-4); font-size: var(--step-1); line-height: 1.45; color: var(--on-night); max-width: 44ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.hero-now { margin-top: var(--space-4); display: inline-flex; gap: var(--space-1); align-items: baseline; font-size: var(--step--1); color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); padding-bottom: 2px; }
.hero-now strong { color: var(--ink); font-weight: 600; }
.hero-now:hover { border-color: var(--ink); }
.hero-stage { grid-column: 9 / -1; position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; justify-self: end; }
.time { padding-block: var(--space-6) var(--space-5); }
.hero-demo { margin-top: 0; }
.day-h { font-size: var(--step-4); max-width: 16ch; }
.day-bars { display: grid; gap: var(--space-3); margin-top: var(--space-5); }
.day-row { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: var(--space-3); font: 600 var(--step-0)/1.2 var(--font-display); }
.cells { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-1); }
.cells .c { height: 64px; border-radius: 10px; }
.cells.old .c { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 16%, var(--cream-2)) 0 6px, color-mix(in srgb, var(--ink) 22%, var(--cream-2)) 6px 12px); }
.cells.new .on { background: var(--red); }
.cells.new .free { border: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.cells b { position: absolute; left: 0.9rem; top: 50%; translate: 0 -50%; font: 700 var(--step-2)/1 var(--font-display); color: var(--ink-2); }
.cells.new b { color: var(--on-night); }
.cells em { position: absolute; left: calc(37.5% + 1rem); top: 50%; translate: 0 -50%; font: 700 var(--step-1)/1 var(--font-display); font-style: normal; color: var(--ink); }
.gains { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.gain { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2); border-radius: 999px; background: var(--ink); color: var(--on-night); }
.gain svg { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: var(--red); fill: none; stroke: var(--on-night); stroke-width: 2; stroke-linecap: round; }
.gain small { display: block; font-size: var(--step--1); color: color-mix(in srgb, var(--on-night) 65%, transparent); }
.gain p { font: 700 var(--step-2)/1.1 var(--font-display); }
.demo-hint { margin: var(--space-4) 0 var(--space-2); display: flex; align-items: center; gap: 0.6rem; font-weight: 600; color: var(--ink); }
.demo-hint .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); animation: hintpulse 1.6s ease-out infinite; }
.hint-mob { display: none; }
@keyframes hintpulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--red) 45%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--red) 0%, transparent); } }
.demo { position: relative; border-radius: var(--radius-2); overflow: hidden; background: var(--night); box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--ink) 55%, transparent); }
.demo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.demo-desk { aspect-ratio: 16 / 10; }
.demo-mob { display: none; aspect-ratio: 2 / 3; max-height: 82svh; width: 100%; }
.hero-stage canvas, .hero-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-stage .star-fallback { transition: opacity 0.6s; }
.hero-stage.is-3d .star-fallback { opacity: 0; }
.hero-halo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--glow) 45%, transparent), transparent 72%); }
.hero-scroll { position: absolute; left: 50%; bottom: var(--space-3); translate: -50% 0; font-size: var(--step--1); color: var(--ink-3); }

/* Sections */
.sec { padding-block: var(--space-6); }
.sec-head { max-width: 34rem; }
.sec-head h2 { font-size: var(--step-4); }
.sec-head p { margin-top: var(--space-2); font-size: var(--step-1); color: var(--ink-2); }

/* Hours: the before/after table */
.hours-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-5); align-items: start; }
.hours-total { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.hours-total span { display: block; font-size: var(--step--1); color: var(--ink-2); }
.hours-total strong { font: 700 var(--step-5)/1 var(--font-display); letter-spacing: -0.03em; color: var(--red); }
.hours-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hour { border-bottom: 1px solid var(--line); }
.hour-btn {
  width: 100%; display: grid; grid-template-columns: 9rem minmax(0, 1fr) 1.5rem; align-items: center; gap: var(--space-3);
  background: none; border: 0; padding: 1.15rem 0; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.hour-name { font: 600 var(--step-1)/1.2 var(--font-display); }
.hour-bars { display: grid; gap: var(--space-1); }
.bar { position: relative; height: 26px; border-radius: 6px; background: var(--cream-2); overflow: hidden; }
.bar i { position: absolute; inset: 0; transform-origin: left center; transform: scaleX(var(--w)); border-radius: 6px; }
.bar-old i { background: color-mix(in srgb, var(--ink) 18%, var(--cream-2)); }
.bar-new i { background: var(--red); }
.bar b { position: relative; z-index: 1; display: block; padding-inline: 0.6rem; font: 500 var(--step--1)/26px var(--font-body); color: var(--ink); }
.bar-new b { padding-left: calc(var(--w) * 100% + 0.6rem); }
.hour-plus { width: 1.5rem; height: 1.5rem; position: relative; }
.hour-plus::before, .hour-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: var(--ink); translate: -50% -50%; transition: transform 0.3s var(--ease-out); }
.hour-plus::after { transform: rotate(90deg); }
.hour.is-open .hour-plus::after { transform: rotate(0deg); }
.hour-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); padding: 0 0 var(--space-3) calc(9rem + var(--space-3)); }
.hour-detail[hidden] { display: none; }
.hour-detail small { display: block; font-size: var(--step--1); color: var(--ink-3); margin-bottom: 0.25rem; }
.hour-detail .ai small { color: var(--red); }
.hour-detail p { color: var(--ink-2); }
.hour-btn { cursor: default; grid-template-columns: 9rem minmax(0, 1fr); }

/* How it works */
.how { background: var(--paper); }
/* Cómo funciona: one big image stays put, the steps change as you scroll */
.how-run { position: relative; margin-top: var(--space-4); }
.how-stage { position: sticky; top: max(88px, calc((100svh - var(--stage-h, 540px)) / 2)); aspect-ratio: 1670 / 941; width: min(100%, calc(min(78vh, 760px) * 1670 / 941)); margin-inline: auto; border-radius: var(--radius-2); overflow: hidden; background: var(--ink); isolation: isolate; }
.how-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.how-stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(180deg, var(--how-shade-0) 55%, var(--how-shade) 100%); }
.how-cap { list-style: none; margin: 0; padding: 0; position: absolute; left: var(--space-4); right: var(--space-4); bottom: calc(var(--space-4) + 10px); z-index: 4; display: grid; color: var(--paper); }
.how-cap li { grid-area: 1 / 1; }
.js-how .how-cap li { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.js-how .how-cap li.on { opacity: 1; transform: none; }
.how-cap h3 { font-size: var(--step-3); line-height: 1; letter-spacing: -0.03em; max-width: 14ch; }
.how-cap p { margin-top: var(--space-2); font-size: var(--step-1); color: var(--white-78); }
.how-bar { position: absolute; left: var(--space-4); right: var(--space-4); bottom: var(--space-3); z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
.how-bar i { height: 4px; border-radius: 4px; background: var(--white-22); transition: background .4s; }
.how-bar i.on { background: var(--paper); }
.how-steps { list-style: none; margin: calc(-1 * var(--stage-h, min(78vh, 760px))) 0 0; padding: 0; position: relative; z-index: -1; }
.how-steps li { height: 45vh; color: transparent; font-size: 1px; }
.how-run + .guarantee { margin-top: var(--space-4); }
.how-view { position: absolute; inset: 0; }
@media (max-width: 760px) {
  /* phone: the photo is cropped to the TV and zoomed so the screen reads; caption sits under it and changes as you scroll */
  .how-stage { position: sticky; top: 72px; aspect-ratio: auto; height: auto; width: 100%; overflow: visible; background: transparent; }
  .how-view { position: relative; inset: auto; aspect-ratio: 1.62; overflow: hidden; border-radius: var(--radius-2); background: var(--ink); }
  .how-img { position: absolute; inset: auto; width: 235%; max-width: none; height: auto; left: -6.26%; top: -2.2%; }
  .how-stage::after { display: none; }
  .tv { border-radius: 0; }
  .how-cap { position: relative; left: auto; right: auto; bottom: auto; margin-top: var(--space-3); min-height: 5.6rem; color: var(--ink); }
  .how-cap h3 { font-size: var(--step-2); max-width: none; }
  .how-cap p { color: var(--ink-2); margin-top: var(--space-1); font-size: var(--step-0); }
  .how-bar { position: static; margin-top: var(--space-2); left: auto; right: auto; }
  .how-bar i { background: color-mix(in srgb, var(--ink) 18%, transparent); }
  .how-bar i.on { background: var(--red); }
  .how-steps li { height: 38vh; }
  .tv-tag { font-size: 28px; }
  .tv-steps li { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .how-stage { position: relative; aspect-ratio: auto; width: 100%; overflow: visible; background: transparent; }
  .how-view { position: relative; inset: auto; aspect-ratio: 1670 / 941; border-radius: var(--radius-2); overflow: hidden; }
  .how-img { position: absolute; inset: 0; width: 100%; height: 100%; }
  .how-stage::after, .how-bar { display: none; }
  .how-cap { position: static; padding: var(--space-3) 0 0; gap: var(--space-3); color: var(--ink); }
  .how-cap p { color: var(--ink-2); }
  .how-cap li, .js-how .how-cap li { grid-area: auto; opacity: 1; transform: none; }
  .how-steps { display: none; }
}
/* TV overlay: a 1000x560 screen warped onto the TV in the photo (matrix3d set in site.js) */
.tv { contain: layout paint style; position: absolute; left: 0; top: 0; width: 1000px; height: 560px; z-index: 2; transform-origin: 0 0; background: radial-gradient(120% 120% at 20% 0%, var(--night-2), var(--night-deep) 70%); color: var(--on-night); overflow: hidden; font-family: var(--font-body, inherit); }
.tv::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgb(255 255 255 / .10), rgb(255 255 255 / 0) 38%); pointer-events: none; }
.tv-pane { position: absolute; inset: 0; padding: 30px 48px 28px; display: flex; flex-direction: column; opacity: 0; transition: opacity .5s var(--ease-out); }
.tv-pane.on { opacity: 1; }
.tv-tag { align-self: flex-start; font-size: 26px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--paper); background: var(--red); border-radius: 999px; padding: 8px 22px; margin-bottom: 22px; }
.tv-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.15fr .85fr; gap: 28px; align-items: center; }
.tv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.tv-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; font-size: 36px; line-height: 1.12; color: var(--paper); opacity: .22; transform: translateX(-14px); }
.tv-steps b { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--glow); font-size: 28px; }
.tv-pane.on .tv-steps li { animation: tvstep .6s var(--ease-out) forwards; }
.tv-pane.on .tv-steps li:nth-child(1) { animation-delay: .2s; } .tv-pane.on .tv-steps li:nth-child(2) { animation-delay: 1.7s; } .tv-pane.on .tv-steps li:nth-child(3) { animation-delay: 3.2s; }
@keyframes tvstep { to { opacity: 1; transform: none; } }
.tv-rows, .tv-apps { list-style: none; margin: 0; padding: 0; }
.tv-rows li { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 18px; font-size: 28px; position: relative; }
.tv-rows span { color: var(--on-night-2); }
.tv-rows i { display: block; height: 22px; border-radius: 11px; background: var(--red); width: 0; }
.tv-rows b { position: absolute; right: 0; top: 0; font-size: 28px; }
.tv-pane.on .tv-rows i { animation: tvgrow 1.1s var(--ease-out) forwards; animation-delay: 1.9s; }
.tv-rows li:nth-child(2) i { animation-delay: 2.1s; } .tv-rows li:nth-child(3) i { animation-delay: 2.3s; } .tv-rows li:nth-child(4) i { animation-delay: 2.5s; }
@keyframes tvgrow { to { width: var(--w); } }
.tv-foot { margin-top: 10px; font-size: 26px; color: var(--on-night-2); }
.tv-foot strong { color: var(--paper); font-size: 44px; margin-right: 10px; }
.tv-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.tv-apps li { background: var(--paper); color: var(--ink); border-radius: 18px; padding: 14px 10px 10px; display: grid; justify-items: center; gap: 6px; font-size: 22px; font-weight: 600; opacity: 0; transform: scale(.85); }
.tv-apps img { height: 40px; max-width: 100px; object-fit: contain; }
.tv-apps li::after { content: "Activo"; font-size: 17px; color: var(--ok-ink); }
.tv-pane.on .tv-apps li { animation: tvpop .5s var(--ease-out) forwards; }
.tv-apps li:nth-child(1) { animation-delay: 1.9s !important; } .tv-apps li:nth-child(2) { animation-delay: 2.1s !important; } .tv-apps li:nth-child(3) { animation-delay: 2.3s !important; } .tv-apps li:nth-child(4) { animation-delay: 2.5s !important; } .tv-apps li:nth-child(5) { animation-delay: 2.7s !important; } .tv-apps li:nth-child(6) { animation-delay: 2.9s !important; }
@keyframes tvpop { to { opacity: 1; transform: none; } }
.tv-chat { display: grid; gap: 16px; }
.tv-chat p { margin: 0; padding: 14px 22px; border-radius: 24px; font-size: 26px; line-height: 1.2; opacity: 0; transform: translateY(12px); display: flex; gap: 12px; align-items: center; }
.tv-chat .me { justify-self: end; background: var(--glow); color: var(--paper); }
.tv-chat .bot { background: rgb(255 255 255 / .14); justify-self: start; }
.tv-chat .bot img { height: 32px; width: 50px; object-fit: contain; background: var(--paper); border-radius: 8px; padding: 4px; }
.tv-chat .ok { background: none; justify-self: start; padding: 0; }
.tv-chat .ok span { background: var(--ok); color: var(--paper); font-weight: 700; border-radius: 999px; padding: 10px 30px; }
.tv-pane.on .tv-chat p { animation: tvpop .5s var(--ease-out) forwards; }
.tv-chat p:nth-child(1) { animation-delay: .3s !important; } .tv-chat p:nth-child(2) { animation-delay: 1.8s !important; } .tv-chat p:nth-child(3) { animation-delay: 3.3s !important; }
.tv-hours { display: grid; gap: 22px; }
.tv-hours > div { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; font-size: 26px; }
.tv-hours > div span { color: var(--on-night-2); }
.tv-hours > div b { font-size: 28px; }
.tv-hours em { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.tv-hours em i { height: 34px; border-radius: 7px; background: rgb(255 255 255 / .24); opacity: 0; }
.tv-hours .new i { background: var(--red); }
.tv-hours .new i.free { background: transparent; border: 2px dashed rgb(255 255 255 / .38); }
.tv-pane.on .tv-hours i { animation: tvpop .35s var(--ease-out) forwards; }
.tv-hours .old i:nth-child(1) { animation-delay: .3s; } .tv-hours .old i:nth-child(2) { animation-delay: .4s; } .tv-hours .old i:nth-child(3) { animation-delay: .5s; } .tv-hours .old i:nth-child(4) { animation-delay: .6s; } .tv-hours .old i:nth-child(5) { animation-delay: .7s; } .tv-hours .old i:nth-child(6) { animation-delay: .8s; } .tv-hours .old i:nth-child(7) { animation-delay: .9s; } .tv-hours .old i:nth-child(8) { animation-delay: 1s; }
.tv-hours .new i:nth-child(1) { animation-delay: 1.9s; } .tv-hours .new i:nth-child(2) { animation-delay: 2s; } .tv-hours .new i:nth-child(3) { animation-delay: 2.1s; } .tv-hours .new i:nth-child(n+4) { animation-delay: 3.3s; }
.tv-map { width: 100%; height: 100%; min-height: 0; }
.tv-map .sea { fill: rgb(62 107 255 / .18); }
.tv-map .coast { fill: none; stroke: var(--glow); stroke-width: 3; }
.tv-map .net { fill: none; stroke: rgb(255 255 255 / .3); stroke-width: 2; stroke-dasharray: 6 8; }
.tv-pane.on .tv-map .net { animation: tvdash 1.4s linear infinite; }
@keyframes tvdash { to { stroke-dashoffset: -28; } }
.tv-map .pin circle { fill: var(--red); }
.tv-map .pin .ring { fill: none; stroke: var(--red); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tv-map .pin { opacity: 0; }
.tv-pane.on .tv-map .pin { animation: tvpinin .5s var(--ease-out) forwards; animation-delay: calc(var(--d) + 1.2s); }
.tv-pane.on .tv-map .pin .ring { animation: tvring 2s ease-out infinite; animation-delay: calc(var(--d) + 1.7s); }
@keyframes tvpinin { from { opacity: 0; } to { opacity: 1; } }
@keyframes tvring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }

.guarantee { margin-top: var(--space-3); padding: var(--space-4); border-radius: var(--radius-2); background: var(--ink); color: var(--on-night); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.guarantee strong { font: 700 var(--step-4)/0.9 var(--font-display); color: var(--paper); letter-spacing: -0.03em; }
.guarantee h3 { font-size: var(--step-2); }
.guarantee p { color: var(--on-night-2); margin-top: 0.3rem; }

/* Route */
@keyframes ping { from { transform: scale(0.6); opacity: 0.7; } to { transform: scale(1.4); opacity: 0; } }


/* Bots: one per tool */
.bots-head { max-width: 40rem; }
.bots-head h2 { color: var(--paper); }
.bots-head p { color: var(--on-night-2); }
.tools { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.tool { position: relative; background: var(--paper); color: var(--ink); border-radius: var(--radius-2); padding: var(--space-2); display: flex; flex-direction: column; gap: 4px; min-height: 152px; border: 2px solid transparent; transition: filter .6s var(--ease-out), opacity .6s var(--ease-out), border-color .6s var(--ease-out), box-shadow .6s var(--ease-out), transform .6s var(--ease-out); }
.tool-logo { height: 32px; flex: 0 0 32px; display: flex; align-items: center; margin-bottom: var(--space-1); }
.tool-logo img { height: 28px; width: auto; max-width: 32px; object-fit: contain; }
.tool-logo.is-wide img { height: 24px; max-width: 88px; }
.tool h3 { font-size: var(--step-0); letter-spacing: -0.01em; }
.tool p { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.4; }
.tool-on { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; font-weight: 600; color: var(--ok-ink); }
.tool-on::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 18%, transparent); }
.tools.is-armed .tool:not(.is-on) { filter: grayscale(1); opacity: .32; transform: scale(.97); }
.tools.is-armed .tool:not(.is-on) .tool-on { visibility: hidden; }
.tools.is-armed .tool.is-on { border-color: var(--ok); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 12%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--night-deep) 60%, transparent); }
.tools.is-armed .tool.is-on .tool-on::before { animation: pulse 2s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 50%, transparent); } 100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ok) 0%, transparent); } }

/* Supervisor */
.sup { margin-top: var(--space-6); text-align: center; }
.sup h2 { font-size: var(--step-5, var(--step-4)); color: var(--paper); max-width: 18ch; margin-inline: auto; }

/* Why us */
.why { background: var(--cream-2); }
.why-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-5); align-items: center; }
.why-photo { border-radius: var(--radius-2); overflow: hidden; aspect-ratio: 4 / 3; }
.why-photo img { width: 100%; height: 115%; object-fit: cover; object-position: center 30%; }
.why-copy h2 { font-size: var(--step-4); }
.why-copy p { margin-top: var(--space-3); font-size: var(--step-1); color: var(--ink-2); }
.shift { margin-top: var(--space-4); display: flex; align-items: center; gap: var(--space-2); font: 600 var(--step-2)/1 var(--font-display); }
.shift s { color: var(--ink-3); text-decoration-thickness: 2px; }
.shift svg { width: 1.6rem; height: 1.6rem; color: var(--red); }

/* Enterprise */
.on-night { background: var(--night); color: var(--on-night); }
.ent-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-5); align-items: center; }
.ent-eyebrow { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--glow); margin-bottom: var(--space-2); }
.ent-copy .btn { margin-top: var(--space-4); }
.ent h2 { font-size: var(--step-4); color: var(--paper); }
.ent .lead { margin-top: var(--space-3); font-size: var(--step-1); color: var(--on-night-2); max-width: 32ch; }
.ent-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-bottom: 1px solid var(--night-line); }
.ent-feats li { display: flex; gap: var(--space-2); align-items: center; padding-block: 0.9rem; border-top: 1px solid var(--night-line); }
.ent-feats svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--glow); }
.certs { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1); }
.certs li { border: 1px solid var(--night-line); background: var(--night-2); color: var(--paper); border-radius: var(--radius-pill); padding: 0.45rem 0.9rem; font-size: var(--step--1); font-weight: 600; }
.cert-note { margin-top: var(--space-3); font-size: var(--step--1); color: var(--on-night-2); max-width: 52ch; }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-4); }
.faq h2 { font-size: var(--step-4); }
.faq details { border-top: 1px solid var(--line); padding-block: var(--space-2); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font: 600 var(--step-1)/1.3 var(--font-display); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-2); }
.faq summary::after { content: "+"; color: var(--red); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 0.6rem; color: var(--ink-2); max-width: 60ch; }
.bots-head .more { color: var(--paper); font-weight: 600; text-underline-offset: 4px; }

/* Final CTA */
.final { position: relative; overflow: clip; padding-block: var(--space-6); }
.final-bg { position: absolute; inset: 0; }
.final-bg img { width: 100%; height: 120%; object-fit: cover; opacity: 0.6; }
.final-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 25%, color-mix(in srgb, var(--night) 55%, transparent)); }
.final .wrap { position: relative; }
.final h2 { font-size: var(--step-5); color: var(--paper); max-width: 10ch; }
.final p { margin-top: var(--space-3); font-size: var(--step-1); color: var(--on-night-2); max-width: 46ch; }
.final .hero-actions { margin-top: var(--space-4); }
.promises { list-style: none; padding: 0; margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); color: var(--on-night); font-size: var(--step--1); }
.promises li { display: flex; gap: var(--space-1); align-items: center; }
.promises svg { width: 1rem; height: 1rem; color: var(--glow); }

/* Footer */
.foot { background: var(--night); color: var(--on-night-2); border-top: 1px solid var(--night-line); padding-block: var(--space-4); font-size: var(--step--1); }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); }
.foot img { height: 26px; width: auto; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--on-night); }
.foot-links { display: flex; gap: var(--space-3); }

/* Reveal: visible by default, JS adds motion only when allowed */
.js-motion [data-reveal] { will-change: transform, opacity; }

@media (max-width: 960px) {
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .hero-grid, .hours-grid, .why-grid, .ent-grid, .sup { grid-template-columns: minmax(0, 1fr); }
  .hero-copy, .hero-stage { grid-column: 1 / -1; }
  .hero-stage { max-width: 200px; justify-self: center; order: -1; margin-bottom: calc(var(--space-3) * -1); }
  .hero-demo { margin-top: var(--space-4); }
  .hero { padding-top: 96px; }
  .nav-links a:not(.btn) { display: none; }
  .hour-detail { padding-left: 0; }
}
@media (max-width: 760px) {
  .demo-desk { display: none; }
  .demo-mob { display: block; }
  .hint-desk { display: none; }
  .hint-mob { display: inline; }
  .day-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .cells .c { height: 40px; border-radius: 8px; }
  .cells b, .cells em { position: static; translate: none; grid-column: 1 / -1; margin-top: 4px; }
  .cells b { font-size: var(--step-1); }
  .cells.new b { color: var(--ink); }
  .cells em { font-size: var(--step-0); }
  .day-bars { gap: var(--space-2); margin-top: var(--space-3); }
  .gain { padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); }
  .gain svg { width: 44px; height: 44px; padding: 10px; }
  .gain p { font-size: var(--step-1); }
  .gains { gap: var(--space-2); margin-top: var(--space-3); }
  .day-h { font-size: var(--step-3); }

  .demo-hint { padding-inline: var(--gutter); margin-top: var(--space-3); }
  .hero-demo { width: 100%; }
  .time { padding-bottom: 0; }
  .demo { border-radius: 0; border-inline: 0; }
  .hero { padding-block: var(--space-5) var(--space-5); min-height: 0; }
  .hero::after { background: linear-gradient(0deg, var(--night-deep) 10%, color-mix(in srgb, var(--night-deep) 55%, transparent) 60%, color-mix(in srgb, var(--night-deep) 30%, transparent)); }
  .time { padding-top: var(--space-5); }
  .hero-stage { max-width: 120px; margin-bottom: 0; }
  .hero h1 { font-size: clamp(2.2rem, 1.4rem + 4vw, 2.8rem); }
  .hero-sub { margin-top: var(--space-2); font-size: var(--step-0); }
  .hero-actions { margin-top: var(--space-3); gap: 0.6rem; }
  .hero .hero-actions .btn { padding: 0.8rem 1.1rem; font-size: var(--step--1); }
  .hero-badge { margin-bottom: var(--space-3); }
}
@media (max-width: 560px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .tool { padding: 12px; min-height: 144px; }
  .tool-logo.is-wide img { max-width: 100%; }
  .hour-btn { grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--space-2); }
  .hour-name { font-size: var(--step-0); }
  .hour-detail { grid-template-columns: minmax(0, 1fr); }
  .guarantee { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .btn:hover, .btn:hover svg { transform: none; }
}

html{scroll-padding-top:5rem}

/* The demo takes the whole window while open */
.demo.is-open iframe { position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 100; }
.demo-open .nav { visibility: hidden; }

/* Voice-call demo over the page */
.callbox { position: fixed; inset: 0; z-index: 120; background: var(--night-deep); animation: callin .35s var(--ease-out); }
.callbox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.callbox-x { position: absolute; top: var(--space-2); right: var(--space-2); z-index: 2; display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--on-night) 30%, transparent); background: color-mix(in srgb, var(--night-deep) 60%, transparent); color: var(--on-night); font: 600 var(--step--1)/1 var(--font-body); cursor: pointer; }
.callbox-x:hover { border-color: var(--on-night); }
@keyframes callin { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .callbox { animation: none; } }

/* Neon word in the hero headline */

/* "impacten": a neon sign. It strikes on once with a bright burst, then stays lit and steady */
.hero h1 .neon .w {
  color: var(--neon-core);
  text-shadow: 0 0 0.04em var(--on-night), 0 0 0.12em var(--neon-hot), 0 0 0.35em var(--neon-hot), 0 0 0.8em var(--glow);
  opacity: 0.12;
  animation: neon-strike 1.4s var(--ease-out) 1.1s forwards;
}
@keyframes neon-strike {
  0% { opacity: .12; text-shadow: none; }
  10% { opacity: 1; }
  16% { opacity: .3; }
  24% { opacity: 1; color: var(--on-night); text-shadow: 0 0 0.06em var(--on-night), 0 0 0.25em var(--neon-hot), 0 0 0.7em var(--neon-hot), 0 0 1.6em var(--glow), 0 0 3em var(--glow); }
  100% { opacity: 1; color: var(--neon-core); text-shadow: 0 0 0.04em var(--on-night), 0 0 0.12em var(--neon-hot), 0 0 0.35em var(--neon-hot), 0 0 0.8em var(--glow); }
}
@media (prefers-reduced-motion: reduce) { .hero h1 .neon .w { animation: none; opacity: 1; } }

/* Enterprise: brushed-silver card look */
.ent { background: linear-gradient(135deg, #f4f6f9 0%, #cfd5de 22%, #eef1f5 45%, #b9c1ce 68%, #e9edf2 88%, #cdd3dd 100%); color: var(--ink); position: relative; }
.ent::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(90deg, rgb(255 255 255 / .22) 0 1px, rgb(0 0 0 / 0) 1px 3px); }
.ent .wrap { position: relative; }
.ent h2 { color: var(--ink); }
.ent .ent-eyebrow { color: var(--ink-2); }
.ent .lead, .ent .cert-note { color: var(--ink-2); }
.ent .btn-quiet { color: var(--ink); border-color: var(--ink); }
.ent .btn-quiet:hover { background: var(--ink); color: var(--paper); }
.ent .ent-feats { border-bottom-color: rgb(6 20 51 / .18); }
.ent .ent-feats li { border-top-color: rgb(6 20 51 / .18); color: var(--ink); }
.ent .ent-feats svg { color: var(--ink); }
.ent .certs li { background: linear-gradient(180deg, #fff, #dfe3ea); border-color: rgb(6 20 51 / .2); color: var(--ink); box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgb(6 20 51 / .12); }

.sec.faq, .guarantee, .site-foot, footer { content-visibility: auto; contain-intrinsic-size: auto 600px; }