/* Landing page: the look. Theme "night shift": a deep night background and the warm light of a desk lamp
   left on (amber), because the promise is "your customer doesn't wait, neither do we, even at night".
   Rules of this page (keep them when you change something):
   - one theme (dark) and one accent colour (--lamp), used the same way everywhere; --ember only as a glow;
   - one family (Manrope) for everything you read; JetBrains Mono only for times, codes and the agent's work log;
   - shapes: everything you can press is a pill; big panels 24px; tiles inside panels 12px;
   - motion only moves transform and opacity, always with --ease, and stops under prefers-reduced-motion. */

@font-face { font-family: "Manrope"; src: url("/site/fonts/Manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/site/fonts/JetBrainsMono.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --bg: #08090d;
  --bg-2: #0c0e14;
  --panel: #10131b;
  --panel-2: #151925;
  --line: rgba(255, 244, 228, 0.08);
  --line-2: rgba(255, 244, 228, 0.15);
  --text: #f3efe8;
  --muted: #a8a197;
  --faint: #7a746b;
  --lamp: #ffb648;
  --lamp-ink: #1e1304;
  --lamp-soft: rgba(255, 182, 72, 0.12);
  --lamp-line: rgba(255, 182, 72, 0.5);
  --ember: #ff6a3d;
  --them: #191c26;
  --us: #2a2214;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1200px;
  --pad: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
/* taps: no double-tap zoom delay, a quiet amber flash instead of the default grey box */
a, button { touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 182, 72, 0.18); }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--lamp); color: var(--lamp-ink); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--pad); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 10px 16px; border-radius: 999px; background: var(--lamp); color: var(--lamp-ink); font-weight: 700; text-decoration: none; transition: transform 0.4s var(--ease); }
.skip:focus { transform: translateY(72px); }

/* icons: Phosphor glyphs used as masks, so they take the text colour */
.ico { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.ico-whatsapp-logo { --i: url("/site/icons/whatsapp-logo.svg"); }
.ico-envelope-simple { --i: url("/site/icons/envelope-simple.svg"); }
.ico-globe { --i: url("/site/icons/globe.svg"); }
.ico-calculator { --i: url("/site/icons/calculator.svg"); }
.ico-calendar-check { --i: url("/site/icons/calendar-check.svg"); }
.ico-file-text { --i: url("/site/icons/file-text.svg"); }
.ico-address-book { --i: url("/site/icons/address-book.svg"); }
.ico-archive { --i: url("/site/icons/archive.svg"); }
.ico-video-camera { --i: url("/site/icons/video-camera.svg"); }
.ico-arrow-right { --i: url("/site/icons/arrow-right.svg"); }
.ico-arrow-counter-clockwise { --i: url("/site/icons/arrow-counter-clockwise.svg"); }
.ico-chat-text { --i: url("/site/icons/chat-text.svg"); }
.ico-shield-check { --i: url("/site/icons/shield-check.svg"); }
.ico-check { --i: url("/site/icons/check.svg"); }
.ico-play { --i: url("/site/icons/play.svg"); }
.ico-x { --i: url("/site/icons/x.svg"); }
.ico-caret-down { --i: url("/site/icons/caret-down.svg"); }
.ico-clock { --i: url("/site/icons/clock.svg"); }
.ico-paperclip { --i: url("/site/icons/paperclip.svg"); }
.ico-identification-card { --i: url("/site/icons/identification-card.svg"); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 8px 0 24px; border-radius: 999px;
  border: 1px solid transparent; font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
  transition: transform 0.5s var(--ease), background-color 0.5s var(--ease), border-color 0.5s var(--ease), color 0.5s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn-lamp { background: var(--lamp); color: var(--lamp-ink); }
.btn-lamp:hover { background: #ffc66e; }
.btn-ghost { padding: 0 24px; border-color: var(--line-2); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--lamp-line); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 13.5px; gap: 8px; }
.btn-sm .ico { width: 16px; height: 16px; }
.btn-dot { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(30, 19, 4, 0.12); transition: transform 0.5s var(--ease); }
.btn-dot .ico { width: 16px; height: 16px; }
.btn:hover .btn-dot { transform: translateX(3px); }

/* ---------- nav: a floating bar ---------- */
.nav { position: fixed; inset: 14px 0 auto; z-index: 20; pointer-events: none; padding: 0 var(--pad); }
.nav-in { display: flex; align-items: center; gap: 24px; height: 60px; margin: 0 auto; padding: 0 10px 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(12, 14, 20, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); pointer-events: auto; max-width: calc(var(--wrap) - 2 * var(--pad)); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; }
.brand-chip { position: relative; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--lamp-line); background: var(--panel); }
.brand-chip i { width: 8px; height: 8px; border-radius: 2px; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); }
.nav-links { display: flex; gap: 22px; margin-left: auto; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 600; transition: color 0.4s var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.lang button { height: 30px; min-width: 38px; border: 0; border-radius: 999px; background: none; color: var(--faint); font: 600 12px/1 var(--mono); transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.lang button[aria-pressed="true"] { background: var(--panel-2); color: var(--text); }
.lang button:hover:not([aria-pressed="true"]) { color: var(--text); }

/* ---------- shared section bits ---------- */
section { position: relative; scroll-margin-top: 90px; }
.app { scroll-margin-top: 96px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12.5px/1 var(--mono); color: var(--muted); margin-bottom: 22px; }
.lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft), 0 0 14px var(--lamp); }
.sec-head { max-width: 760px; margin-bottom: 44px; }
.sec-head h2, .about h2 { font-weight: 600; font-size: clamp(32px, 4.6vw, 56px); line-height: 1.04; letter-spacing: -0.035em; text-wrap: balance; }
.sub { margin-top: 18px; color: var(--muted); font-size: clamp(16px, 1.5vw, 18.5px); max-width: 60ch; }

/* ---------- the film: a big frame right after the first screen, as on think-next.it ---------- */
.reel { padding: 24px 0 40px; scroll-margin-top: 96px; }
.reel-frame { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-width: calc((100svh - 130px) * 16 / 9); margin: 0 auto; /* the whole frame fits the screen under the bar */ border-radius: 24px; border: 1px solid var(--line-2); background: #000;
  box-shadow: 0 40px 120px -50px rgba(255, 140, 60, 0.45); }
.reel-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
.reel-frame video { cursor: pointer; }
/* the open button: a pill at the bottom right, the play sign in its own circle */
.reel-open { position: absolute; right: 18px; bottom: 18px; display: inline-flex; align-items: center; gap: 12px; height: 50px; padding: 0 22px 0 6px;
  border-radius: 999px; border: 1px solid var(--line-2); background: rgba(8, 9, 13, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 15px; font-weight: 700; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease); }
.reel-open:hover { border-color: var(--lamp-line); }
.reel-open:active { transform: scale(0.98); }
.reel-play { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--lamp); color: var(--lamp-ink); transition: transform 0.4s var(--ease); }
.reel-play .ico { width: 15px; height: 15px; margin-left: 2px; }
.reel-open:hover .reel-play { transform: scale(1.06); }
/* the film full screen */
.film { width: min(1400px, calc(100vw - 32px), calc((100dvh - 120px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; background: none; color: var(--text); overflow: visible; }
.film::backdrop { background: rgba(4, 5, 8, 0.92); backdrop-filter: blur(6px); }
.film[open] { animation: film-in 0.5s var(--ease); }
@keyframes film-in { from { opacity: 0; transform: scale(0.96); } }
.film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; box-shadow: 0 40px 120px -40px rgba(255, 182, 72, 0.35); }
.film-close { position: absolute; right: 0; bottom: calc(100% + 12px); display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); font-weight: 700; font-size: 14px; }
.film-close .ico { width: 14px; height: 14px; }
.film-close:hover { border-color: var(--lamp-line); }
@media (max-width: 767px) {
  .reel { padding: 8px 0 24px; }
  .reel-frame { border-radius: 16px; }
  /* on a phone the frame is small: only the round play button, so it does not cover the film's captions
     (the words stay for screen readers) */
  .reel-open { right: 8px; bottom: 8px; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 50%; }
  .reel-open > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .reel-play { width: 34px; height: 34px; }
}

/* ---------- hero ---------- */
.hero { padding: 110px 0 110px; overflow: hidden; }
/* The warm light at the top: a lamp seen through the dark, with faint vertical slats */
.hero-glow {
  position: absolute; inset: -10% -10% auto; height: 820px; pointer-events: none;
  -webkit-mask: linear-gradient(180deg, transparent 10%, #000 65%); mask: linear-gradient(180deg, transparent 10%, #000 65%); /* no hard edge under the first screen */
  background:
    radial-gradient(42% 46% at 74% 8%, rgba(255, 106, 61, 0.30), transparent 70%),
    radial-gradient(34% 38% at 56% 0%, rgba(255, 182, 72, 0.22), transparent 72%),
    radial-gradient(30% 34% at 18% 14%, rgba(70, 90, 160, 0.16), transparent 70%);
}
.hero-glow::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(8, 9, 13, 0) 0 46px, rgba(8, 9, 13, 0.35) 46px 48px);
  -webkit-mask: linear-gradient(180deg, #000 0%, transparent 80%); mask: linear-gradient(180deg, #000 0%, transparent 80%);
}
.hero .wrap { position: relative; }
.hero-head { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: end; margin-bottom: 56px; }
.hero #hero-title { font-weight: 500; font-size: clamp(40px, 6vw, 82px); line-height: 0.98; letter-spacing: -0.05em; text-wrap: balance; }
/* The headline types itself: the customer's sentence letter by letter, then "Noi neanche." all at once (site.js) */
.h1-fast { display: block; color: var(--lamp); }
#hero-title.h1-typing .ch { opacity: 0; }
#hero-title.h1-typing .ch.on { opacity: 1; }
#hero-title.h1-typing .h1-fast:not(.on) { opacity: 0; }
.h1-slow .w { white-space: nowrap; }
/* before the script starts typing, the headline stays hidden (shown anyway after 3 s, in case the script never runs) */
html.js #hero-title:not(.h1-typing):not(.h1-typed) > span[aria-hidden] { opacity: 0; animation: h1-show 0s 3s forwards; }
@keyframes h1-show { to { opacity: 1; } }
.caret { display: inline-block; width: 0.06em; height: 0.8em; margin: 0 -0.1em 0 0.04em; vertical-align: -0.04em; background: var(--lamp); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.hero-side { padding-bottom: 8px; }
.lead { color: var(--muted); font-size: clamp(16px, 1.45vw, 18px); max-width: 44ch; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- the app window with the chat ---------- */
.app {
  position: relative; border-radius: 24px; border: 1px solid var(--line-2); background: rgba(14, 16, 23, 0.92);
  box-shadow: 0 40px 120px -40px rgba(255, 106, 61, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.05); overflow: hidden;
}
.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.app-title { display: flex; align-items: center; gap: 12px; }
.app-title b { display: block; font-size: 15px; }
.app-title small { display: block; color: var(--faint); font-size: 12.5px; }
.app-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--panel-2); border: 1px solid var(--line-2); font: 700 12px/1 var(--mono); color: var(--muted); }
.mode { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.mode-label { padding: 0 8px 0 10px; font: 500 11.5px/1 var(--mono); color: var(--faint); }
.mode button { height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-size: 13px; font-weight: 600; transition: background-color 0.4s var(--ease), color 0.4s var(--ease); }
.mode button[aria-pressed="true"] { background: var(--lamp); color: var(--lamp-ink); }
.mode button:hover:not([aria-pressed="true"]) { color: var(--text); }

.app-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.thread-wrap { display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--line); background-image: radial-gradient(rgba(255, 244, 228, 0.035) 1px, transparent 1px); background-size: 20px 20px; }
.thread { height: 520px; overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(14px, 3vw, 34px) 16px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.thread > li { max-width: min(78%, 560px); animation: pop 0.55s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(0.98); } }

.thread > li.day-chip { align-self: center; padding: 5px 12px; border-radius: 999px; background: var(--panel-2); color: var(--faint); font: 500 11.5px/1.2 var(--mono); }
.thread > li.end-chip { margin-top: 8px; color: var(--lamp); border: 1px solid var(--lamp-line); background: var(--lamp-soft); }
.msg { position: relative; padding: 10px 14px 8px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.msg time { display: block; margin-top: 4px; text-align: right; font: 400 11px/1 var(--mono); color: var(--faint); }
.them { align-self: flex-start; }
.them .msg { background: var(--them); border-top-left-radius: 4px; }
.us { align-self: flex-end; }
.us .msg { background: var(--us); border: 1px solid rgba(255, 182, 72, 0.16); border-top-right-radius: 4px; }
.ready { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 6px; font: 500 11.5px/1 var(--mono); color: var(--lamp); }
.ready::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lamp); }
.att { display: flex; align-items: center; gap: 10px; margin: 8px 0 2px; padding: 9px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.25); border: 1px solid var(--line); font-size: 13.5px; font-weight: 600; white-space: normal; }
.att .ico { width: 18px; height: 18px; color: var(--lamp); }
.att small { margin-left: auto; color: var(--faint); font: 400 11px/1 var(--mono); }
.them .att .ico { color: var(--muted); }
.typing { display: inline-flex; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--them); border-top-left-radius: 4px; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); animation: dot 1.1s infinite; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

/* the agent's work, shown between the messages */
.thread > li.work { align-self: flex-end; display: grid; gap: 4px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--line-2); font: 400 12px/1.45 var(--mono); color: var(--muted); }
.work div { display: flex; gap: 10px; animation: pop 0.45s var(--ease) both; }
.work div span { color: var(--faint); min-width: 7.5em; }
.work b { color: var(--lamp); font-weight: 500; }
.work-head { color: var(--faint); }
.work-head::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 2px; background: var(--lamp); box-shadow: 0 0 8px var(--lamp); vertical-align: 1px; }

/* "with your OK": the reply waits as a draft */
.thread > li.draft { align-self: flex-end; width: min(78%, 560px); padding: 12px; border-radius: 16px; border: 1px solid var(--lamp-line); background: rgba(255, 182, 72, 0.05); }
.draft-tag { font: 500 11.5px/1 var(--mono); color: var(--lamp); margin-bottom: 8px; }
.draft .msg { background: var(--us); }
.draft-btns { display: flex; gap: 8px; margin-top: 10px; }
.draft-btns button { height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-2); background: none; font-size: 13.5px; font-weight: 700; transition: transform 0.3s var(--ease), background-color 0.3s var(--ease); }
.draft-btns .go { background: var(--lamp); border-color: var(--lamp); color: var(--lamp-ink); }
.draft-btns .go.pressed { transform: scale(0.94); }

/* try it yourself */
.try { padding: 14px clamp(14px, 3vw, 34px) 18px; border-top: 1px solid var(--line); background: rgba(8, 9, 13, 0.6); }
.try-label { display: block; font: 500 11.5px/1 var(--mono); color: var(--faint); margin-bottom: 10px; }
.try-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ask, .ask-b { min-height: 38px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; transition: border-color 0.4s var(--ease), transform 0.4s var(--ease), opacity 0.4s var(--ease); }
.ask:hover:not([disabled]), .ask-b:hover:not([disabled]) { border-color: var(--lamp-line); }
.ask:active:not([disabled]), .ask-b:active:not([disabled]) { transform: scale(0.97); }
.ask[disabled], .ask-b[disabled] { opacity: 0.4; cursor: default; }

/* the customer's file, on the right */
.file { padding: 22px 20px; display: flex; flex-direction: column; gap: 22px; background: var(--bg-2); }
.file-head { display: grid; gap: 4px; }
.file-code { font: 500 12px/1 var(--mono); color: var(--faint); }
.file-head b { font-size: 18px; letter-spacing: -0.01em; }
.steps { display: grid; gap: 4px; }
.steps li { display: flex; align-items: center; gap: 12px; height: 36px; padding: 0 12px; border-radius: 12px; color: var(--faint); font-size: 14px; font-weight: 600; transition: color 0.5s var(--ease), background-color 0.5s var(--ease); }
.steps i { position: relative; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease); }
.steps li.now { color: var(--text); background: var(--panel-2); }
.steps li.now i { border-color: var(--lamp); box-shadow: 0 0 0 4px var(--lamp-soft); }
.steps li.done { color: var(--muted); }
.steps li.done i { border-color: var(--lamp); background: var(--lamp); }
.steps li.done i::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid var(--lamp-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.facts { display: grid; gap: 10px; margin: 0; font-size: 13.5px; }
.facts div { display: grid; gap: 2px; animation: pop 0.45s var(--ease) both; }
.facts dt { font: 500 11px/1.2 var(--mono); color: var(--faint); }
.facts dd { margin: 0; color: var(--text); font-weight: 600; }
.clock { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.clock div { padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); }
.clock small { display: block; font: 500 10.5px/1.3 var(--mono); color: var(--faint); }
.clock b { display: block; margin-top: 6px; font-size: 22px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#clock-agent { color: var(--lamp); }
.app-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); }

/* ---------- always on watch: a 30-second countdown, the three channels, the log ---------- */
.watch { padding: 120px 0; }
.watch-box { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: clamp(20px, 4vw, 48px);
  border-radius: 24px; border: 1px solid var(--line); background: var(--bg-2); padding: clamp(18px, 3vw, 36px); }
.watch-clock { position: relative; width: 190px; aspect-ratio: 1; }
.watch-clock svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.wc-track { fill: none; stroke: var(--panel-2); stroke-width: 6; }
.wc-arc { fill: none; stroke: var(--lamp); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; filter: drop-shadow(0 0 6px rgba(255, 182, 72, 0.6)); transition: stroke-dashoffset 1s linear; }
.watch-box.reset .wc-arc { transition: none; }
.wc-num { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 0 28px; }
.wc-num b { font-size: 56px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.wc-num small { margin-top: 6px; font: 500 11.5px/1.3 var(--mono); color: var(--faint); }
.watch-ch { display: grid; gap: 10px; }
.watch-ch li { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px;
  border-radius: 12px; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.5s var(--ease); }
.watch-ch li > .ico { width: 22px; height: 22px; color: var(--muted); }
.watch-ch b { display: block; font-size: 15.5px; font-weight: 700; }
.watch-ch small { display: block; margin-top: 2px; font: 400 12.5px/1.35 var(--mono); color: var(--faint); }
.watch-ch li.new small { color: var(--lamp); }
.wc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); transition: background-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.watch-ch li.scan { border-color: var(--lamp-line); }
.watch-ch li.scan .wc-dot, .watch-ch li.new .wc-dot { background: var(--lamp); box-shadow: 0 0 10px var(--lamp); }
/* the scanner light running across a channel while it is checked */
.watch-ch li::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: linear-gradient(90deg, transparent, rgba(255, 182, 72, 0.18), transparent); transform: translateX(-110%); }
.watch-ch li.scan::after { animation: wc-sweep 0.6s var(--ease) forwards; }
@keyframes wc-sweep { to { transform: translateX(220%); } }
.watch-log { display: grid; gap: 8px; align-content: start; min-height: 300px; padding: 16px 18px; border-radius: 12px; border: 1px solid var(--line); background: rgba(8, 9, 13, 0.6); }
.watch-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 12px; padding: 10px 12px; border-radius: 10px; background: var(--panel);
  font-size: 14px; line-height: 1.4; color: var(--muted); animation: pop 0.5s var(--ease); }
.watch-log li > .ico { width: 18px; height: 18px; margin-top: 1px; color: var(--lamp); }
.watch-log li b { color: var(--text); font-weight: 700; }
.watch-log li em { display: block; margin-top: 3px; font: 500 12.5px/1.3 var(--mono); font-style: normal; color: var(--lamp); }
.watch-log li.wl-empty { display: block; background: none; padding: 6px 2px; color: var(--faint); font: 400 13px/1.4 var(--mono); animation: none; }
.watch-note { margin-top: 14px; color: var(--faint); font-size: 13px; }

/* ---------- how it works ---------- */
.how { padding: 120px 0; background: linear-gradient(180deg, transparent, rgba(5, 6, 8, 0.55) 30%, rgba(5, 6, 8, 0.55) 70%, transparent); } /* see-through: the circuits run behind it */
.chip { position: relative; width: 156px; height: 156px; border-radius: 24px; border: 1px solid var(--line-2); background: linear-gradient(160deg, #1a1812, #0d0e12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); transition: box-shadow 0.6s var(--ease); }
.chip.hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 60px -10px rgba(255, 182, 72, 0.45); }
.chip::before, .chip::after { content: ""; position: absolute; pointer-events: none; }
.chip::before {
  left: 24px; right: 24px; top: -8px; bottom: -8px;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 14px) top / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, var(--line-2) 0 2px, transparent 2px 14px) bottom / 100% 6px no-repeat;
}
.chip::after {
  top: 24px; bottom: 24px; left: -8px; right: -8px;
  background:
    repeating-linear-gradient(180deg, var(--line-2) 0 2px, transparent 2px 14px) left / 6px 100% no-repeat,
    repeating-linear-gradient(180deg, var(--line-2) 0 2px, transparent 2px 14px) right / 6px 100% no-repeat;
}
.chip-traces { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.chip-traces path { fill: none; stroke: rgba(255, 244, 228, 0.13); stroke-width: 1.4; transition: stroke 0.5s var(--ease); }
.chip-traces circle { fill: var(--bg-2); stroke: rgba(255, 244, 228, 0.2); stroke-width: 1.4; transition: stroke 0.5s var(--ease), fill 0.5s var(--ease); }
.chip.hot .chip-traces path { stroke: var(--lamp); }
.chip.hot .chip-traces circle { stroke: var(--lamp); fill: var(--lamp); }
.chip-core { position: absolute; inset: 46px; display: grid; place-content: center; justify-items: center; gap: 8px; border-radius: 12px; background: #121318; border: 1px solid var(--line-2); transition: border-color 0.5s var(--ease); }
.chip.hot .chip-core { border-color: var(--lamp-line); }
.chip-dot { width: 12px; height: 12px; border-radius: 3px; background: var(--lamp); box-shadow: 0 0 16px var(--lamp); }
.chip-label { font: 500 10px/1 var(--mono); color: var(--faint); }
/* five areas of the back office, each with three concrete jobs */
.jobs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 8px; border-top: 1px solid var(--line); }
.jobs > li { padding: 26px 22px 8px 0; }
.jobs > li + li { padding-left: 22px; border-left: 1px solid var(--line); }
.jobs .ico { width: 24px; height: 24px; color: var(--lamp); }
.jobs h3 { margin-top: 16px; font-size: 18px; font-weight: 650; letter-spacing: -0.015em; }
.jobs ul { display: grid; gap: 8px; margin-top: 12px; }
.jobs ul li { position: relative; padding-left: 14px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.jobs ul li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--lamp); }
/* section titles: keyboard font, typed letter by letter when they come into view (site.js) */
.type-h { font-family: var(--mono); font-weight: 500; letter-spacing: -0.04em; }
.sec-head h2.type-h, .about h2.type-h { font-size: clamp(26px, 3.6vw, 44px); line-height: 1.15; }
.type-h .w { white-space: nowrap; }
html.js .type-h .ch { opacity: 0; }
html.js .type-h .ch.on, html.js .type-h.th-done .ch { opacity: 1; }
/* the 7x: closes "how it works" with the reason speed matters */
.speed { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 5vw, 72px); margin-top: 64px; padding-top: 56px; border-top: 1px solid var(--line); }
.speed-num { font-size: clamp(110px, 17vw, 230px); font-weight: 300; line-height: 0.85; letter-spacing: -0.07em; color: var(--lamp); text-shadow: 0 0 80px rgba(255, 182, 72, 0.35); }
.speed-text { font-size: clamp(22px, 2.6vw, 34px); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; max-width: 30ch; text-wrap: balance; }
.speed-how { margin-top: 16px; color: var(--muted); font-size: 17px; max-width: 52ch; }
.speed-src { margin-top: 14px; color: var(--faint); font-size: 13.5px; }

/* ---------- how to start: three steps ---------- */
.start { padding: 110px 0 40px; }
.steps-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: none; }
.steps-3 li { position: relative; padding: 28px 26px 30px; border-radius: 24px; border: 1px solid var(--line); background: var(--bg-2); }
.s3-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--lamp-line); color: var(--lamp); font: 600 15px/1 var(--mono); box-shadow: 0 0 20px -6px rgba(255, 182, 72, 0.6); }
.steps-3 h3 { margin-top: 22px; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; }
.steps-3 p { margin-top: 10px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* ---------- about ---------- */
.about { padding: 120px 0 90px; }
.about-in { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(28px, 6vw, 80px); align-items: center; }
/* a head-and-shoulders portrait card, as on think-next.it: the bottom fades into the page */
.about-photo { position: relative; margin: 0; width: 100%; max-width: 320px; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 24px; border: 1px solid var(--line); background: var(--bg-2); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.about-photo::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 9, 13, 0.85)); pointer-events: none; }
.about-copy p:not(.eyebrow):not(.sign) { margin-top: 18px; color: var(--muted); font-size: 17.5px; max-width: 56ch; }
.sign { display: flex; flex-direction: column; margin-top: 26px; }
.sign-name { font-weight: 700; }
.sign span:last-child { color: var(--faint); font-size: 14px; }

/* ---------- contact ---------- */
.contact { padding: 90px 0 120px; }
.contact-rows { border-top: 1px solid var(--line); }
.c-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 18px; padding: 24px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color 0.5s var(--ease); }
.c-row > .ico { width: 24px; height: 24px; color: var(--lamp); }
.c-what { font-size: clamp(18px, 2vw, 24px); font-weight: 650; letter-spacing: -0.015em; }
.c-detail { color: var(--faint); font: 400 13.5px/1.3 var(--mono); }
.c-go { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-2); transition: transform 0.5s var(--ease), background-color 0.5s var(--ease), color 0.5s var(--ease); }
.c-go .ico { width: 16px; height: 16px; }
.c-row:hover .c-go { background: var(--lamp); color: var(--lamp-ink); border-color: var(--lamp); transform: translateX(4px); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 8px 28px; color: var(--faint); font-size: 13px; }

/* ---------- the circuits behind the whole page ----------
   A fixed layer under every section: bundles of thin circuits with 45° bends and, now and then, a small light running
   along one of them. Fainter in the middle of the screen, where the text is. It fades in once the first screen
   (which has its own circuits, joined to the chip) has mostly scrolled away. */
.bg-circuit { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease);
  -webkit-mask: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0, 0, 0, 0.45), #000); mask: radial-gradient(ellipse 70% 65% at 50% 50%, rgba(0, 0, 0, 0.45), #000); }
.bg-circuit.on { opacity: 1; }
.bg-circuit .tr-base path { fill: none; stroke: rgba(255, 244, 228, 0.07); stroke-width: 1.2; stroke-linejoin: round; }
.bg-circuit .tr-pads circle { fill: var(--bg); stroke: rgba(255, 244, 228, 0.14); stroke-width: 1.2; transition: fill 0.6s var(--ease), stroke 0.6s var(--ease); }
.bg-circuit .tr-pads circle.on { fill: var(--lamp); stroke: var(--lamp); transition-duration: 0.08s; }
.bg-circuit .spark { fill: none; stroke: var(--lamp); stroke-width: 1.6; stroke-linecap: round; opacity: 0.75; filter: drop-shadow(0 0 4px var(--lamp)); }

/* ---------- first screen: the agent as a big chip ----------
   The chip fills the screen; its circuits run out to the edges (drawn by site.js from the chip's pins) and small lights
   travel along them now and then; two rings of dots turn around it, as slow as a clock. Rotations are linear on purpose
   (a constant turn), the lights along the circuits move stroke-dashoffset: both are cheap and stop under reduced motion. */
.stage {
  --s: min(62svh, 78vw, 560px); /* the chip's side */
  position: relative; isolation: isolate; display: grid; place-items: center; min-height: 100svh; padding: 100px var(--pad) 84px; overflow: hidden;
  background:
    radial-gradient(closest-side circle at 50% 50%, rgba(255, 106, 61, 0.13), transparent 85%) 50% 50% / calc(var(--s) * 2.6) calc(var(--s) * 2.6) no-repeat;
}
.stage-traces { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 62% 72% at 50% 50%, #000 35%, transparent 100%); mask: radial-gradient(ellipse 62% 72% at 50% 50%, #000 35%, transparent 100%); }
.stage-traces .tr-base path { fill: none; stroke: rgba(255, 244, 228, 0.11); stroke-width: 1.3; stroke-linejoin: round; }
.stage-traces .tr-pins line { stroke: rgba(255, 244, 228, 0.26); stroke-width: 3; }
.stage-traces .tr-pads circle { fill: var(--bg); stroke: rgba(255, 244, 228, 0.22); stroke-width: 1.3; transition: fill 0.5s var(--ease), stroke 0.5s var(--ease); }
.stage-traces .tr-pads circle.on { fill: var(--lamp); stroke: var(--lamp); transition-duration: 0.08s; }
.stage-traces .spark { fill: none; stroke: var(--lamp); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 5px var(--lamp)); }

.stage-chip { position: relative; width: var(--s); aspect-ratio: 1; }
.stage-rings { position: absolute; left: 50%; top: 50%; z-index: -1; width: calc(var(--s) * 2.2); height: calc(var(--s) * 2.2); transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.ring { fill: none; transform-box: view-box; transform-origin: 50% 50%; stroke-linecap: round; }
.ring-a { stroke: rgba(255, 182, 72, 0.55); stroke-width: 3; stroke-dasharray: 0 15; animation: spin 90s linear infinite; }
.ring-b { stroke: rgba(255, 182, 72, 0.3); stroke-width: 2.4; stroke-dasharray: 0 22; animation: spin 140s linear infinite reverse; }
.ring-c { stroke: rgba(255, 244, 228, 0.1); stroke-width: 1.2; stroke-dasharray: 90 34 6 34; animation: spin 220s linear infinite; }
.orbit { transform-box: view-box; transform-origin: 50% 50%; animation: spin 26s linear infinite; }
.orbit circle { fill: var(--lamp); filter: drop-shadow(0 0 8px var(--lamp)); }
@keyframes spin { to { transform: rotate(360deg); } }

.big-chip { position: absolute; inset: 0; border-radius: 11%; border: 1px solid var(--line-2);
  background: linear-gradient(155deg, #1d1a14, #0c0d11 60%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 50px 120px -50px rgba(255, 140, 60, 0.5), 0 0 0 10px rgba(8, 9, 13, 0.55); }
.big-chip-traces { position: absolute; inset: 0; width: 100%; height: 100%; }
.big-chip-traces path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.bt-base path { stroke: rgba(255, 244, 228, 0.13); stroke-width: 1.3; }
/* each inner circuit lights up for a moment, each on its own beat (--d is set per path in index.html) */
.bt-lit path { stroke: var(--lamp); stroke-width: 1.8; opacity: 0; filter: drop-shadow(0 0 3px var(--lamp)); animation: trace-blink 5.2s var(--d, 0s) infinite; }
@keyframes trace-blink { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 14% { opacity: 0.85; } 26% { opacity: 0; } }
.big-chip-core { position: absolute; inset: 14%; container-type: inline-size; display: grid; place-content: center; justify-items: center; gap: 4cqw; overflow: hidden;
  border-radius: 7%; border: 1px solid var(--lamp-line); background: radial-gradient(70% 60% at 50% 40%, #191811, #101116);
  box-shadow: 0 0 70px -18px rgba(255, 182, 72, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
.big-chip-name { font-weight: 800; font-size: 12.2cqw; line-height: 1; letter-spacing: -0.04em; color: var(--text); text-shadow: 0 0 30px rgba(255, 182, 72, 0.25); }
.big-chip-status { display: flex; align-items: center; gap: 2.6cqw; font: 500 clamp(11px, 4.4cqw, 15px)/1 var(--mono); color: var(--muted); }
.big-chip-status .lamp { width: 7px; height: 7px; animation: lamp-pulse 2.4s var(--ease) infinite; }
@keyframes lamp-pulse { 50% { opacity: 0.35; } }
/* a flash inside the core when a light arrives from outside (site.js) */
.big-chip-flash { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 50%, rgba(255, 182, 72, 0.22), transparent 70%); opacity: 0; pointer-events: none; }
/* the chip switches on when the page opens */
html.js .stage-chip { opacity: 0; transform: scale(0.94); }
.stage.on .stage-chip { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.stage-down { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(8, 9, 13, 0.85); color: var(--muted); font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease); }
.stage-down:hover { color: var(--text); border-color: var(--line-2); }
.stage-down .ico { width: 14px; height: 14px; animation: nudge 2.2s var(--ease) infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
@media (max-width: 767px) {
  .stage { --s: min(52svh, 82vw); padding: 96px 16px 84px; }
}

/* ---------- entry motion: one quiet fade-up ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- tablet ---------- */
@media (max-width: 1023px) {
  .nav-links { display: none; }
  .nav-in { justify-content: space-between; }
  .hero-head { grid-template-columns: 1fr; gap: 28px; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .thread-wrap { border-right: 0; }
  /* the file becomes a strip above the chat */
  .file { order: -1; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
  .file-head { min-width: 120px; }
  .steps { display: flex; flex-wrap: wrap; gap: 4px; }
  .steps li { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 8px; }
  .steps i { width: 13px; height: 13px; }
  .steps li.done i::after { left: 3.5px; top: 1px; width: 3px; height: 6px; }
  .facts { display: none; }
  .clock { margin: 0 0 0 auto; grid-template-columns: auto auto; }
  .clock div { padding: 8px 12px; }
  .clock b { font-size: 16px; margin-top: 2px; }
  .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jobs > li, .jobs > li + li { padding: 24px 18px 12px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .about-in { grid-template-columns: 1fr; }
  .about-photo { max-width: 240px; }
}

/* ---------- phone ---------- */
@media (max-width: 767px) {
  .nav { inset: 10px 0 auto; }
  .nav-in { height: 54px; padding: 0 6px 0 14px; gap: 10px; }
  .brand-name { font-size: 15px; }
  .nav-right .btn { display: none; }
  .hero { padding: 72px 0 72px; }
  .hero #hero-title { font-size: clamp(36px, 10.5vw, 48px); }
  .hero-ctas .btn { flex: 1 1 auto; justify-content: center; }
  .app { border-radius: 20px; }
  .app-bar { flex-wrap: wrap; padding: 12px 14px; }
  .mode { width: 100%; }
  .mode button { flex: 1; }
  .thread { height: 470px; padding: 16px 12px 12px; }
  .thread > li, .thread > li.draft { max-width: 90%; }
  .thread > li.draft { width: 90%; }
  .msg { font-size: 14.5px; }
  /* the file shrinks to two lines: name and timers, then the steps in one row that scrolls sideways */
  .file { padding: 10px 12px; gap: 8px; }
  .file-head { flex: 1 1 auto; display: flex; gap: 8px; align-items: baseline; min-width: 0; }
  .file-code { white-space: nowrap; }
  .file-head b { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .steps { order: 3; flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .steps::-webkit-scrollbar { display: none; }
  .steps li { flex: none; height: 28px; padding: 0 8px; font-size: 12px; }
  .clock { order: 4; flex: 1 1 100%; margin: 0; gap: 6px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .clock small { overflow: hidden; text-overflow: ellipsis; }
  .clock div { display: flex; align-items: baseline; gap: 6px; padding: 5px 9px; }
  .clock small { font-size: 10px; white-space: nowrap; }
  .clock b { margin: 0; font-size: 14px; white-space: nowrap; }
  .thread > li.work { font-size: 11px; }
  .work div span { min-width: 6.5em; }
  .app-foot { flex-wrap: wrap; padding: 10px 14px; }
  .watch, .how, .about { padding: 84px 0; }
  .watch-box { grid-template-columns: 1fr; justify-items: stretch; }
  .watch-clock { width: 160px; justify-self: center; }
  .chip { width: 124px; height: 124px; }
  .chip-core { inset: 36px; }
  .speed { grid-template-columns: 1fr; gap: 12px; margin-top: 48px; padding-top: 40px; }
  .jobs { grid-template-columns: 1fr; }
  .steps-3 { grid-template-columns: 1fr; }
  .start { padding: 84px 0 20px; }
  .c-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; }
  .c-detail { grid-column: 2; grid-row: 2; }
  .c-go { grid-row: 1 / span 2; grid-column: 3; }
}

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