/* Five-O design system v4 — the loved deep-space DNA of haimalca.cloud (midnight ink + cyber
   cyan + nebula glows), carrying the Five-O rings. Logo gradient lives in brand moments only. */

/* fonts.css is linked from each page head, not imported, so the two sheets load in parallel */

:root {
  /* the five O's — logo, brand rail and brand moments */
  --o1: #3B74B8;
  --o2: #3E86A8;
  --o3: #40989A;
  --o4: #43A78C;
  --o5: #45B878;
  --grad-five: linear-gradient(90deg, var(--o1), var(--o2), var(--o3), var(--o4), var(--o5));
  --grad-cta: var(--grad-five);

  /* surfaces — the midnight family from the current site */
  --bg: #17202e;
  --void: #0B131F;
  --surface: #1c2436;
  --surface-2: #202a3e;
  --line: rgba(205, 208, 214, .1);
  --line-strong: rgba(205, 208, 214, .22);

  /* text */
  --text: #F2F5FA;
  --muted: #cdd0d6;
  --faint: #8E97A6;

  /* THE accent — cyber cyan, the color Chaim loves */
  --accent: #6ae4ff;
  --accent-blue: #7CA9DE;
  --accent-soft: rgba(106, 228, 255, .12);
  --link: var(--accent);
  --on-accent: #06121C;

  --wa: #25D366;

  /* one handset width drives the whole arena; the 9:19 ratio derives the height */
  --phone-w: clamp(238px, 23vw, 300px);

  /* client logo discs — a light ground so brand colour reads at full strength */
  --client-disc: #eef1f6;
  --client-ink: #17202e;

  --font-display: "Open Sans", "Heebo", sans-serif;
  --font-body: "Heebo", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* WhatsApp dark-mode palette — lives ONLY inside the phone screens */
  --wa-screen: #0B141A;
  --wa-panel: #202C33;
  --wa-out: #005C4B;
  --wa-teal: #00A884;
  --wa-bezel: #2A3442;

  --container: 1180px;
  --radius: 12px;
  --radius-s: 9px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sec-gap: clamp(64px, 9vw, 120px);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 85% -120px, rgba(41, 138, 203, .22), transparent 60%),
    radial-gradient(1000px 700px at -5% 20%, rgba(8, 33, 143, .28), transparent 55%),
    radial-gradient(900px 520px at 50% 105%, rgba(106, 228, 255, .05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main { position: relative; z-index: 1; }

::selection { background: var(--accent); color: var(--on-accent); }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.22; margin: 0 0 .5em; }
h1 { font-size: clamp(40px, 6.2vw, 80px); letter-spacing: -.02em; }
h2 { font-size: clamp(27px, 3.4vw, 42px); }
h3 { font-size: clamp(19px, 2.1vw, 24px); }
p { margin: 0 0 1em; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 4px; }
img, svg { max-width: 100%; }
strong { font-weight: 700; color: var(--text); }

.container { max-width: var(--container); margin-inline: auto; padding-inline: clamp(18px, 4vw, 32px); }

.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }

/* ---------- skip link + focus ---------- */

.skip-link {
  position: absolute;
  top: -60px;
  right: 16px;
  z-index: 200;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: var(--radius-s);
  font-weight: 700;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; text-decoration: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 19, 31, .92);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  order: 3;
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  color: var(--text);
  letter-spacing: .01em;
}
.brand:hover { text-decoration: none; }
.brand img { height: 22px; width: auto; display: block; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 15.5px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--accent); text-decoration: none; }
.nav-toggle { display: none; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--radius-s);
  font-family: var(--font-body);
  font-size: 16.5px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-grad {
  background: #FFFFFF;
  color: #0B131F;
  border-radius: 5px;
  box-shadow: 0 6px 24px rgba(255, 255, 255, .12);
}
.btn-grad:hover { box-shadow: 0 10px 32px rgba(106, 228, 255, .28); }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line-strong);
  border-radius: 80px;
}
.btn-ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

.btn-wa {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line-strong);
  border-radius: 80px;
}
.btn-wa:hover { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }

/* ---------- sections ---------- */

.sec { padding-block: var(--sec-gap); position: relative; }
.sec + .sec { border-top: 1px solid var(--line); }

.sec-head { display: flex; align-items: baseline; gap: 18px; margin-bottom: clamp(28px, 4vw, 48px); }
.sec-idx {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 500;
  color: var(--accent);
  white-space: nowrap;
}
.sec-head h2 { margin: 0; }

.sec-cta { margin-top: clamp(26px, 4vw, 44px); display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sec-cta .hint { color: var(--faint); font-size: 15px; }

/* ---------- hero ---------- */

.hero { padding-block: clamp(64px, 10vw, 130px) clamp(52px, 7vw, 90px); }
.hero .clock {
  font-family: var(--font-mono);
  font-size: clamp(17px, 2vw, 21px);
  color: var(--accent);
  letter-spacing: .12em;
  margin-bottom: 14px;
}
.hero .clock::after { content: ""; display: inline-block; width: 9px; height: 22px; background: var(--accent); margin-inline-start: 8px; vertical-align: text-bottom; animation: blink 1.15s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero h1 { max-width: 16ch; }
/* the clock is isolated so bidi cannot fling its punctuation to the wrong side */
.hero-time { unicode-bidi: isolate; }
.hero-sep { color: var(--accent); font-weight: 400; margin-inline: .34em; }
.hero .sub { font-size: clamp(17px, 1.9vw, 20.5px); color: var(--muted); max-width: 54ch; margin-top: 16px; }
.hero .sub strong { color: var(--text); }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap; }

.stat-strip {
  display: flex;
  gap: clamp(24px, 5vw, 64px);
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.stat b { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.1; color: var(--accent); }
.stat span { color: var(--faint); font-size: 14.5px; }

/* ---------- pillars ---------- */

.pillars { display: flex; flex-direction: column; }
.pillar {
  display: grid;
  grid-template-columns: 84px 1.1fr 1.6fr;
  gap: clamp(16px, 3vw, 40px);
  padding-block: clamp(22px, 3.2vw, 34px);
  border-top: 1px solid var(--line);
  align-items: start;
}
.pillar:last-child { border-bottom: 1px solid var(--line); }
.pillar .num { font-family: var(--font-mono); font-size: clamp(20px, 2.4vw, 27px); line-height: 1.3; color: var(--accent); opacity: .85; }
.pillar h3 { margin: 0; }
.pillar .lead { color: var(--muted); margin: 6px 0 0; font-size: 15.5px; }
.pillar ul { list-style: none; margin: 0; padding: 0; }
.pillar li { padding: 7px 0; border-bottom: 1px dashed var(--line); color: var(--muted); }
.pillar li:last-child { border-bottom: none; }
.pillar li::before { content: "○"; margin-inline-end: 10px; color: var(--accent); font-size: .8em; }

/* ---------- process ---------- */

.steps { counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 1px solid var(--line); }
.step { counter-increment: step; padding: 26px 18px 26px 0; border-inline-start: 1px solid var(--line); padding-inline-start: 18px; }
.step:first-child { border-inline-start: none; padding-inline-start: 0; }
.step::before {
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 15px;
  display: inline-block;
  margin-bottom: 10px;
  padding-bottom: 4px;
  color: var(--accent);
  border-bottom: 2px solid var(--accent);
}
.step h3 { font-family: var(--font-body); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }

.guarantee {
  margin-top: clamp(30px, 4vw, 48px);
  border: 1px solid var(--line-strong);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius);
  padding: 22px 26px;
  max-width: 720px;
  background: var(--surface);
}
.guarantee p { margin: 0; font-size: 17.5px; }

/* ---------- clients strip ---------- */

.clients { padding-bottom: clamp(30px, 5vw, 50px); }
.clients-title { font-size: clamp(24px, 2.8vw, 34px); margin: 0 0 clamp(16px, 2vw, 26px); }
.clients-row + .clients-row { margin-top: clamp(14px, 1.8vw, 22px); }
.clients-track { align-items: center; gap: clamp(14px, 1.8vw, 22px); animation-duration: 64s; }
/* specificity beats the .marquee-track shorthand further down, which resets direction */
.clients-track.clients-track--rev { animation-direction: reverse; }

/* the discs are light on purpose: every one of these logos was drawn for a light
   ground, so brand colour only survives if we give it that ground back */
/* width and height are set from one token, never aspect-ratio: a two-line lockup
   would out-grow the ratio and stretch that one disc into an egg */
.client-o {
  --o-size: clamp(88px, 9vw, 118px);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--o-size);
  height: var(--o-size);
  padding: clamp(13px, 1.5vw, 19px);
  border-radius: 50%;
  background: var(--client-disc);
  overflow: hidden;
  transition: box-shadow .4s var(--ease);
}
.client-o[data-fit="wide"] { padding-inline: clamp(6px, .7vw, 9px); }
.client-o[data-fit="tight"] { padding: clamp(17px, 2vw, 25px); }
.client-o img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* a name broken across two lines can run much bigger inside the same disc */
.client-o .client-name { font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.1; text-align: center; color: var(--client-ink); }

.marquee:hover .client-o, .marquee:focus-within .client-o { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- rolling bot gallery ---------- */

.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding-block: 6px;
}
.marquee-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: marquee 70s linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(50%); } }

.bot-card {
  width: 235px;
  flex-shrink: 0;
  background: none;
  border-inline-start: 1px solid var(--line);
  padding: 4px 18px 4px 8px;
}
.bot-card .tag { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); display: block; margin-bottom: 7px; }
.bot-card h3 { font-family: var(--font-body); font-weight: 700; font-size: 16px; margin: 0 0 5px; }
.bot-card p { color: var(--muted); font-size: 13.5px; margin: 0; line-height: 1.5; }
.bot-card.star .tag { color: var(--accent); }
.bot-card.star h3 { color: var(--accent); }

.live-counter { display: flex; align-items: baseline; gap: 12px; margin-top: 26px; font-size: 15px; color: var(--muted); }
.live-counter b { font-family: var(--font-mono); font-weight: 500; font-size: 28px; color: var(--accent); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); align-self: center; animation: pulse 2.2s var(--ease) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- forms ---------- */

.lead-form { max-width: 560px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 500; font-size: 15px; margin-bottom: 7px; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  padding: 13px 15px;
  font: inherit;
  transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 96px; }
.consent { display: flex; align-items: flex-start; gap: 10px; margin: 2px 0 18px; font-size: 14px; color: var(--muted); cursor: pointer; max-width: 52ch; }
.consent input { width: 17px; height: 17px; margin-top: 3px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.form-note { font-size: 13.5px; color: var(--faint); margin-top: 12px; }
.form-msg { margin-top: 14px; font-weight: 500; min-height: 1.4em; }
.form-msg.ok { color: var(--accent); }
.form-msg.err { color: #E08A8A; }

/* ---------- bot arena: 3 side by side ---------- */

/* the three demos are physical phones, so the phone is sized like a device and the
   grid is built around it: fixed width, real 9:19 handset ratio, height derived.
   Content never changes the shell, so all three stay identical at every viewport. */
.arena-grid {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: center;
  gap: clamp(10px, 1.6vw, 20px);
  align-items: start;
}
/* all three columns carry the same padding and a transparent border, so lighting
   ours up costs no layout shift and the three phones stay on one line */
.arena-col {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(12px, 1.4vw, 16px);
  border: 1px solid transparent;
  border-radius: 22px;
}
.arena-title { font-weight: 700; font-size: 16px; margin: 0 0 2px; }
.arena-sub { color: var(--faint); font-size: 13px; margin: 0 0 10px; }

.arena-col.ours {
  border-color: rgba(106, 228, 255, .3);
  background: linear-gradient(180deg, rgba(106, 228, 255, .08), rgba(106, 228, 255, 0) 46%), var(--surface);
}
.arena-col.ours .arena-title { color: var(--accent); }

.arena-badge {
  position: absolute;
  top: 0;
  inset-inline-start: clamp(16px, 2vw, 24px);
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  line-height: 1;
  padding: 6px 13px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  white-space: nowrap;
}

/* A real handset, not a suggestion of one. The shell is a machined titanium rail:
   a gradient body, a bright specular edge on the outside, a dark inner lip where
   the glass meets the frame, and side buttons that sit ON the rail. Inside it the
   screen keeps its own smaller radius, the way concentric device radii actually work. */
.phone {
  position: relative;
  width: var(--phone-w);
  aspect-ratio: 9 / 19;
  flex: none;
  padding: 11px 9px;
  border-radius: 44px;
  background:
    linear-gradient(148deg, #5b6577 0%, #333c4c 16%, #262e3c 42%, #2f3949 68%, #596375 88%, #2a3240 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16),
    0 1px 1px rgba(255, 255, 255, .3) inset,
    0 -1px 2px rgba(0, 0, 0, .5) inset,
    0 34px 70px -18px rgba(0, 0, 0, .75),
    0 8px 24px -8px rgba(0, 0, 0, .6);
}

/* the two volume keys and, on the far rail, the side button */
.phone::before,
.phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a5464, #2b3341);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5);
}
.phone::before { inset-inline-start: -3px; top: 21%; height: 8.5%; }
.phone::after { inset-inline-start: -3px; top: 32%; height: 8.5%; }

.phone .side-btn {
  position: absolute;
  inset-inline-end: -3px;
  top: 26%;
  width: 3px;
  height: 12%;
  border-radius: 3px;
  background: linear-gradient(180deg, #4a5464, #2b3341);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .5);
}

.chat {
  position: relative;
  background: var(--wa-screen);
  border-radius: 34px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .85);
}

/* dynamic island: a real pill that floats over the screen, with the camera in it */
.chat::before {
  content: "";
  position: absolute;
  top: 9px;
  inset-inline: 0;
  margin-inline: auto;
  z-index: 4;
  width: 33%;
  height: 20px;
  border-radius: 20px;
  background: #05090c;
  box-shadow: inset -7px 0 0 -3.5px rgba(28, 44, 58, .95);
}
/* the status bar sits under the island, exactly like it does on a real handset */
.chat-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 38px 12px 10px;
  background: var(--wa-panel);
  font-size: 13px;
  font-weight: 500;
  color: #E9EDEF;
}
/* each bot gets the contact photo it deserves: our mark, a generic AI badge, an antique dial */
.chat-head::before {
  content: "";
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #7B8794, #4A5561) center / cover no-repeat;
}
.chat-head[data-avatar="avatar-five-o"]::before { background-image: url("/assets/img/avatars/avatar-five-o.svg"); }
.chat-head[data-avatar="avatar-ai"]::before { background-image: url("/assets/img/avatars/avatar-ai.svg"); }
.chat-head[data-avatar="avatar-old"]::before { background-image: url("/assets/img/avatars/avatar-old.svg"); }
.chat-head .status { margin-inline-start: auto; font-size: 11px; font-family: var(--font-body); }
.chat-head .status.on { color: var(--wa-teal); }
.chat-head .status.off { color: #8696A0; }
.chat-log { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; scroll-behavior: smooth; }
.msg { max-width: 86%; padding: 8px 12px; border-radius: 9px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; box-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
.msg.user { align-self: flex-end; background: var(--wa-out); color: #E9EDEF; border-start-end-radius: 2px; }
.msg.bot { align-self: flex-start; background: var(--wa-panel); color: #E9EDEF; border-start-start-radius: 2px; }
.msg.bot.clumsy { background: var(--wa-panel); }
.msg.bot.buttons { background: var(--wa-panel); }
.msg.sys { align-self: center; background: none; color: var(--faint); font-size: 12.5px; font-family: var(--font-mono); text-align: center; }
.msg .typing { display: inline-flex; gap: 4px; }
.msg .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse 1s infinite; }
.msg .typing i:nth-child(2) { animation-delay: .18s; }
.msg .typing i:nth-child(3) { animation-delay: .36s; }

.action-card {
  align-self: flex-start;
  border-inline-start: 3px solid var(--wa-teal);
  border-radius: 9px;
  padding: 11px 13px;
  max-width: 86%;
  background: var(--wa-panel);
  color: #E9EDEF;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.action-card .t { font-family: var(--font-mono); font-size: 11.5px; color: var(--wa-teal); margin-bottom: 5px; }
.action-card .b { font-size: 14px; }

.quick-replies { display: flex; flex-wrap: wrap; gap: 7px; align-self: flex-start; max-width: 92%; }
.quick-replies button {
  border: none;
  background: var(--wa-panel);
  color: var(--wa-teal);
  border-radius: 999px;
  padding: 6px 13px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}
.quick-replies button:hover { filter: brightness(1.15); }
.quick-replies .btn { border-radius: var(--radius-s); }

.chat-input { display: flex; gap: 8px; padding: 8px 10px 10px; background: var(--wa-screen); }
.chat-input input {
  flex: 1;
  min-width: 0;
  background: var(--wa-panel);
  border: none;
  border-radius: 22px;
  color: #E9EDEF;
  padding: 10px 16px;
  font: inherit;
  font-size: 14.5px;
}
.chat-input input::placeholder { color: #8696A0; }
.chat-input input:focus { outline: none; box-shadow: 0 0 0 1.5px var(--wa-teal); }
.chat-input .btn, .chat-input .btn-grad, .chat-input .btn-ghost {
  flex-shrink: 0;
  padding: 10px 16px;
  font-size: 14.5px;
  background: var(--wa-teal);
  color: #06130A;
  border: none;
  border-radius: 22px;
  box-shadow: none;
}
.chat-quota { font-family: var(--font-mono); font-size: 11px; color: #8696A0; padding: 3px 14px 7px; text-align: end; min-height: 1.5em; background: var(--wa-screen); }

/* ---------- real story (magazine narrative) ---------- */

.story { max-width: 640px; }
.story .story-kicker { font-size: 14px; color: var(--accent); letter-spacing: .1em; margin-bottom: 14px; }
.story h2 { max-width: 20ch; }
.story p { color: var(--muted); font-size: 17.5px; max-width: 58ch; }
.story p strong { color: var(--text); }

/* ---------- signed quote (magazine style, from the loved site) ---------- */

.quote {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: clamp(30px, 5vw, 52px) 0;
  max-width: 780px;
  margin-inline: auto;
}
.quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 3vw, 34px);
  line-height: 1.4;
}
.quote blockquote em { font-style: normal; color: var(--accent); }
.quote figcaption { margin-top: 16px; color: var(--faint); font-size: 15px; }

/* ---------- faq ---------- */

.faq { max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 0;
  font-weight: 700;
  font-size: 17.5px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 19px; transition: transform .2s var(--ease); }
.faq details[open] summary::before { content: "−"; }
.faq details > p { margin: 0 0 18px; padding-inline-start: 33px; color: var(--muted); max-width: 62ch; }

/* ---------- mobile pinned cta ---------- */

.sticky-cta { display: none; }

@media (max-width: 640px) {
  .sticky-cta {
    display: block;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 95;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(23, 32, 46, .94);
    border-top: 1px solid var(--line-strong);
    backdrop-filter: blur(8px);
  }
  .sticky-cta .btn { width: 100%; }
}

/* ---------- floating whatsapp ---------- */

.wa-float {
  position: fixed;
  bottom: 22px;
  left: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.wa-float:hover { transform: translateY(-3px); border-color: #25d366; }
.wa-float svg { width: 28px; height: 28px; fill: #25d366; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 44px 0 110px; margin-top: var(--sec-gap); position: relative; z-index: 1; }
.site-footer .rings { height: 16px; width: 132px; margin-bottom: 22px; }
.footer-grid { display: flex; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; }
.footer-grid nav { display: flex; flex-direction: column; gap: 8px; }
.footer-grid a { color: var(--muted); font-size: 15px; }
.footer-grid a:hover { color: var(--accent); }
.footer-meta { color: var(--faint); font-size: 13.5px; margin-top: 28px; }

/* ---------- mascot (the Five-O bot, from the ad creatives) ---------- */

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(28px, 5vw, 60px);
  align-items: end;
}
.hero-bot {
  width: min(100%, 470px);
  height: auto;
  justify-self: center;
  filter: drop-shadow(0 28px 54px rgba(0, 0, 0, .5));
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.bot-side {
  width: clamp(190px, 23vw, 290px);
  height: auto;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, .45));
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-bot { width: min(74%, 330px); justify-self: center; margin-top: 6px; }
  .split { grid-template-columns: 1fr; }
  .split .bot-side { width: min(52%, 240px); margin-inline: auto; }
}

/* ---------- reveal ---------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
  .marquee-track { width: auto; }
  .marquee-track[aria-hidden="true"], .marquee-copy { display: none; }
}

/* the sticky CTA owns the bottom of the screen on mobile, so the float steps aside
   and the footer makes room for it. Declared here, after the base rules, because an
   equal-specificity media query placed earlier in the file loses the cascade. */
@media (max-width: 640px) {
  .wa-float { display: none; }
  .site-footer { padding-bottom: 150px; }
}

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* the handset keeps its proportions, only the count per row drops */
  .arena-grid { grid-template-columns: max-content; }
}

@media (max-width: 380px) {
  :root { --phone-w: min(300px, 84vw); }
}

@media (max-width: 900px) {
  .pillar { grid-template-columns: 56px 1fr; }
  .pillar ul { grid-column: 2; }
  .steps { grid-template-columns: 1fr; border-top: none; }
  .step { border-inline-start: none; padding-inline-start: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 640px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    flex-direction: column;
    background: var(--bg);
    border-bottom: 1px solid var(--line-strong);
    padding: 18px 24px 22px;
    gap: 16px;
    align-items: flex-start;
  }
  .nav-links.open { display: flex; }
  .nav-toggle {
    display: block;
    background: none;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-s);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    padding: 7px 14px;
    cursor: pointer;
  }
  .stat-strip { gap: 20px; }
  .hero-ctas .btn { width: 100%; }
  .wa-float { bottom: 16px; left: 16px; }
}