/* ============================================================================
   home.css — MR.ROBOT home page
   Extends the existing design system ONLY: every colour, font, shadow and
   animation is an existing styles.css token / keyframe (glowPulse, float,
   fadeInUp, pulseGlow). No new palette, no new motion language.
   RTL-first (logical properties); light theme inherits via the same tokens.
   ============================================================================ */

.hm {
  --hm-maxw: 1200px;
  display: block;
}
.hm section {
  position: relative;
  max-width: var(--hm-maxw);
  margin-inline: auto;
  padding: 5rem 1.5rem;
}

/* Scroll-reveal (wired in home.js) — uses the same fade-up feel as .fade-in-up */
.hm-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.hm-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .hm-reveal { opacity: 1 !important; transform: none !important; } }

/* Shared section heads */
.hm-head { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.hm-label {
  display: inline-block; font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-cyan); margin-bottom: .9rem;
  padding: .3rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--accent-cyan) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-cyan) 28%, transparent);
}
.hm-h2 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.18;
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--heading-color); margin: 0;
  letter-spacing: -.01em;
}

/* Shared CTA buttons — same look as the site's primary buttons */
.hm-cta {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: 1.02rem;
  padding: .9rem 1.6rem; border-radius: 12px; text-decoration: none;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275), box-shadow .25s, background-position .4s, border-color .25s, color .25s;
}
.hm-cta-arrow { transition: transform .25s; }
[dir="ltr"] .hm-cta-arrow { transform: scaleX(-1); }
.hm-cta-primary {
  color: #fff; border: none;
  background: var(--gradient-primary); background-size: 170% 170%;
  box-shadow: 0 12px 32px rgba(249,115,22,0.45), inset 0 1px 0 rgba(255,255,255,.2);
  animation: hmCtaPulse 2.9s ease-in-out infinite;
}
.hm-cta-primary:hover { transform: translateY(-3px) scale(1.04); background-position: 100% 0; box-shadow: 0 18px 46px rgba(249,115,22,0.55), inset 0 1px 0 rgba(255,255,255,.25); animation-play-state: paused; }
.hm-cta-primary:hover .hm-cta-arrow { transform: translateX(-5px); }
[dir="ltr"] .hm-cta-primary:hover .hm-cta-arrow { transform: scaleX(-1) translateX(-5px); }

/* second hero CTA — glowing purple, play icon AFTER the text pointing left */
.hm-cta-purple {
  color: #fff; border: none;
  background: linear-gradient(135deg, #8b5cf6, #a855f7);
  box-shadow: 0 12px 32px rgba(139,92,246,0.5), inset 0 1px 0 rgba(255,255,255,.2);
  animation: hmPurplePulse 2.9s ease-in-out infinite;
}
.hm-cta-purple:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 18px 48px rgba(139,92,246,0.62), inset 0 1px 0 rgba(255,255,255,.25); filter: brightness(1.06); animation-play-state: paused; }
.hm-cta-play { color: #fff; font-size: 1.12em; transition: transform .25s; transform: scaleX(-1); }
.hm-cta-purple:hover .hm-cta-play { transform: scaleX(-1) translateX(5px); }
.hm-cta-xl { font-size: 1.12rem; padding: 1.05rem 2rem; }

/* ============================================================
   1) HERO
   ============================================================ */
.hm-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-top: 4rem; padding-bottom: 2.5rem;
}
.hm-hero-orbs { display: none; }   /* removed — the corner glow blobs read as a "frame" of light at the screen edges (user) */
.hm-hero-orbs span {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  animation: float 9s ease-in-out infinite;
}
.hm-hero-orbs span:nth-child(1) { width: 340px; height: 340px; inset-inline-end: -60px; top: -40px; background: var(--secondary-glow); }
.hm-hero-orbs span:nth-child(2) { width: 300px; height: 300px; inset-inline-start: -50px; bottom: -30px; background: var(--accent-cyan-glow); animation-delay: 1.6s; }
.hm-hero-orbs span:nth-child(3) { width: 260px; height: 260px; inset-inline-start: 38%; top: 30%; background: var(--accent-violet-glow); animation-delay: 3s; }
.hm-hero-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; max-width: 860px; margin-inline: auto; }

.hm-eyebrow {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
  font-family: var(--font-display); font-weight: 700; font-size: .85rem;
  letter-spacing: .04em; color: var(--accent-amber);
  padding: .42rem 1rem; border-radius: 12px; margin-bottom: 1.4rem;
  background: color-mix(in srgb, var(--accent-amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent);
  transition: transform .2s, box-shadow .25s, background .25s;
  animation: hmEyebrowGlow 3.6s ease-in-out infinite;
}
.hm-eyebrow:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--accent-amber-glow); }
.hm-eyebrow i { font-size: .9em; }

.hm-h1 {
  font-family: var(--font-display); font-weight: 800; line-height: 1.08;
  font-size: clamp(2.3rem, 5.2vw, 4rem); margin: 0 0 1.3rem; letter-spacing: -.015em;
}
.hm-h1 .hm-line { display: block; color: var(--heading-color); }
.hm-h1 .hm-line-grad {
  /* same warm gradient as the MR.ROBOT logo (.brand-text) + product-page-level glow */
  background: linear-gradient(135deg, var(--accent-orange), var(--accent-amber));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(249,115,22,0.45));
  animation: hmLogoGlow 3.4s ease-in-out infinite;
}
.hm-sub { color: var(--text-secondary); font-size: 1.12rem; line-height: 1.7; max-width: 60ch; margin: 0 auto 1.8rem; }
.hm-cta-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; margin-bottom: 1.1rem; }
.hm-micro { display: inline-flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--text-secondary); opacity: .85; margin: 0; }
.hm-micro i { color: var(--accent-cyan); }

/* --- Business control center (demo dashboard) --- */
.hm-cc {  /* now the "screen" content inside .hm-tablet */
  position: relative;
  background: var(--surface-elevated);
  border: none;
  border-radius: 12px; padding: 1.1rem; overflow: hidden;
}
.hm-cc-bar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.hm-cc-dots { display: inline-flex; gap: 5px; }
.hm-cc-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--glass-border-hover); }
.hm-cc-dots i:nth-child(1){ background: #ff5f57; } .hm-cc-dots i:nth-child(2){ background: #febc2e; } .hm-cc-dots i:nth-child(3){ background: #28c840; }
.hm-cc-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--heading-color); margin-inline-end: auto; }
.hm-cc-badges { display: inline-flex; align-items: center; gap: .45rem; }
.hm-cc-live { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 700; color: var(--accent-emerald); }
.hm-cc-demo {
  font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-amber); padding: .14rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--accent-amber) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 32%, transparent);
}
.hm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-emerald); box-shadow: 0 0 0 0 var(--accent-emerald-glow); animation: dividerPulse 2.4s ease-in-out infinite; }

.hm-cc-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-bottom: .7rem; }
.hm-kpi {
  display: flex; align-items: center; gap: .55rem; padding: .6rem .6rem;
  background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px;
}
.hm-kpi-ic {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  color: var(--kc); background: color-mix(in srgb, var(--kc) 15%, transparent); font-size: .9rem;
}
.hm-kpi-meta { display: flex; flex-direction: column; min-width: 0; }
.hm-kpi-label { font-size: .68rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-kpi-val { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: var(--heading-color); }
.hm-kpi-sub { font-size: .6rem; color: var(--text-secondary); opacity: .82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .05rem; }

.hm-cc-approvals { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 12px; padding: .65rem .75rem; margin-bottom: .7rem; }
.hm-cc-approvals-head { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 700; color: var(--accent-amber); margin-bottom: .55rem; }
/* RTL list: each task is a right-aligned block — title + sub on the right, the action
   button right-aligned beneath them (no more far-left floating button + empty middle gap). */
.hm-cc-task { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; padding: .5rem 0; border-top: 1px solid var(--glass-border); text-align: start; }
.hm-cc-task:first-of-type { border-top: none; }
.hm-cc-task-meta { min-width: 0; display: flex; flex-direction: column; gap: .12rem; align-items: flex-start; }
.hm-cc-task-text { font-size: .8rem; color: var(--text-color); }
.hm-cc-task-sub { font-size: .68rem; color: var(--text-secondary); opacity: .9; line-height: 1.35; }
.hm-cc-task-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .72rem; font-weight: 700; color: #fff; padding: .26rem .6rem; border-radius: 8px;
  background: var(--accent-emerald); box-shadow: 0 4px 12px var(--accent-emerald-glow);
}

.hm-cc-insight { display: flex; align-items: flex-start; gap: .55rem; padding: .6rem .7rem; margin-bottom: .7rem; border-radius: 12px;
  background: color-mix(in srgb, var(--secondary-color) 12%, transparent); border: 1px solid color-mix(in srgb, var(--secondary-color) 26%, transparent); }
.hm-cc-insight > i { color: var(--accent-amber); margin-top: 2px; }
.hm-cc-insight-body { display: flex; flex-direction: column; gap: .1rem; }
.hm-cc-insight-head { display: inline-flex; align-items: center; gap: .4rem; }
.hm-cc-insight-head > i { color: var(--accent-amber); font-size: .9rem; }
.hm-cc-insight-label { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--secondary-color); }
.hm-cc-insight-text { font-size: .8rem; color: var(--text-color); line-height: 1.4; }

.hm-cc-status { display: flex; flex-wrap: wrap; gap: .4rem; }
.hm-sys { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 600; color: var(--text-secondary);
  padding: .3rem .55rem; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); }
.hm-sys i { color: var(--text-secondary); font-size: .8rem; }

/* ============================================================
   2) CONNECTIONS STRIP
   ============================================================ */
/* tighter top so it flows up under the dashboard (user: too much separation).
   !important overrides the base `.hm section { padding:5rem }` which outranks .hm-conn. */
.hm-conn { padding-top: 2rem !important; padding-bottom: 2rem; }
/* tighten the gap between the floating robot and the "what does your business need?" button
   below it (user: too much space, ~2 rows). !important beats base .hm section{padding:5rem}. */
.hm-domains { padding-top: 3rem !important; }
/* vertical centred stack: heading → floating cubes → floating robot (was a 2-col text|robot grid) */
.hm-conn-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.6rem; }
.hm-conn-text { min-width: 0; max-width: 960px; margin-inline: auto; width: 100%; }
.hm-conn-h {
  /* site headline standard (user-approved 2026-07-02): body = SOLID heading colour;
     only the punch line carries the brand gradient (was a white→violet→cyan wash) */
  font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.05rem);
  line-height: 1.3; max-width: 24ch; margin: 0 0 1.1rem;
  color: var(--heading-color); -webkit-text-fill-color: var(--heading-color);
}
.hm-conn-divider { height: 2px; width: 100%; margin: 0 0 1.25rem; border-radius: 2px; opacity: .55;
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-cyan), transparent); }
[dir="ltr"] .hm-conn-divider { background: linear-gradient(270deg, var(--accent-violet), var(--accent-cyan), transparent); }
/* tidy chip grid instead of a wrapping inline line — proportional on desktop & mobile */
.hm-conn-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; max-width: 760px; margin: 1.4rem auto 0; }
/* floating Roby beside the sentence — CANONICAL robot-glow package (identical to the
   12 product pages): purple aura + purple silhouette shadows + wrapper bob -26px/3.4s */
.hm-conn-robot { position: relative; display: flex; justify-content: center; align-items: center; min-height: 320px;
  animation: hmRobyBob 3.4s ease-in-out infinite; will-change: transform; }
@keyframes hmRobyBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
.hm-conn-robot img {
  position: relative; z-index: 2; width: clamp(220px, 30vw, 340px); height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4)) drop-shadow(0 0 22px rgba(103,51,209,0.65)) drop-shadow(0 0 48px rgba(103,51,209,0.4));
}
.hm-conn-robot::before {  /* ambient purple glow blob (canonical Roby purple) */
  content: ''; position: absolute; z-index: 0; inset: 0; margin: auto;
  width: 60%; height: 60%; border-radius: 50%;
  background: rgba(103,51,209,0.34); filter: blur(80px);
}
@media (prefers-reduced-motion: reduce) { .hm-conn-robot { animation: none; } }
.hm-robot-jet {  /* teal "jet" glow beneath the robot (spring colour #3FF3E7) */
  position: absolute; z-index: 1; bottom: 5%; left: 50%; transform: translateX(-50%);
  width: 44%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(63,243,231,0.5), rgba(63,243,231,0.12) 45%, transparent 72%);
  filter: blur(16px); animation: hmJet 3.2s ease-in-out infinite;
}
.hm-conn-item { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text-color); font-size: .92rem;
  padding: .55rem .7rem; border-radius: 11px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
/* each icon coloured per its matching product (set inline via --ci) */
.hm-conn-item i { color: var(--ci, var(--accent-cyan)); font-size: 1.05rem; transition: transform .2s, filter .2s; }
.hm-conn-item:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ci, var(--accent-cyan)) 50%, transparent);
  background: color-mix(in srgb, var(--ci, var(--accent-cyan)) 8%, var(--glass-bg));
  box-shadow: 0 8px 20px rgba(0,0,0,.22), 0 0 16px color-mix(in srgb, var(--ci, var(--accent-cyan)) 20%, transparent); }
.hm-conn-item:hover i { transform: scale(1.15); filter: drop-shadow(0 0 8px var(--ci, var(--accent-cyan))); }
.hm-conn-sep { display: none; }

/* ============================================================
   3) GROWTH DOMAINS
   ============================================================ */
.hm-domains-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.hm-domain {
  position: relative; padding: 1.8rem; border-radius: 18px; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.hm-domain:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.hm-domain-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; font-size: 1.3rem; margin-bottom: 1rem;
  color: var(--dc); background: color-mix(in srgb, var(--dc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--dc) 26%, transparent); }
.hm-domain-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--heading-color); margin: 0 0 .55rem; }
.hm-domain-tags { font-size: .9rem; font-weight: 600; color: var(--dc); margin: 0 0 .7rem; line-height: 1.5; }
.hm-domain-desc { font-size: .98rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ============================================================
   4) ROBY SECTION
   ============================================================ */
.hm-roby { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.hm-roby-text .hm-label { color: var(--accent-emerald); background: color-mix(in srgb, var(--accent-emerald) 12%, transparent); border-color: color-mix(in srgb, var(--accent-emerald) 28%, transparent); }
.hm-roby-text .hm-h2 { text-align: start; }
.hm-roby-p { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; margin: 1.2rem 0 0; max-width: 48ch; }

.hm-roby-phone { display: flex; justify-content: center; }
.hm-phone {
  position: relative; width: 300px; max-width: 100%; border-radius: 34px; padding: 1rem .9rem 1.4rem;
  background: linear-gradient(165deg, #1f2937, #0b1220);
  border: 1px solid var(--glass-border-hover); box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.hm-phone-notch { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 110px; height: 22px; border-radius: 0 0 16px 16px; background: #05080f; }
.hm-phone-head { display: flex; align-items: center; gap: .6rem; padding: 1.4rem .4rem .8rem; border-bottom: 1px solid rgba(255,255,255,.07); }
.hm-phone-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--accent-orange); }
.hm-phone-av img { width: 100%; height: 100%; object-fit: cover; }
.hm-phone-id { display: flex; flex-direction: column; }
.hm-phone-name { font-weight: 700; color: #f1f5f9; font-size: .95rem; }
.hm-phone-on { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; color: #25d366; }
.hm-phone-body { padding: 1rem .4rem 0; min-height: 150px; display: flex; flex-direction: column; gap: .6rem; }
.hm-bubble { max-width: 85%; padding: .6rem .8rem; border-radius: 14px; font-size: .9rem; line-height: 1.45; color: #e9edf2; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.hm-bubble-out { align-self: flex-end; background: #075e54; border-bottom-right-radius: 4px; }
.hm-bubble-in { align-self: flex-start; background: #1f2c33; border-bottom-left-radius: 4px; }
[dir="rtl"] .hm-bubble-out { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
[dir="rtl"] .hm-bubble-in { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.hm-bubble.is-swap { animation: hmBubbleSwap .45s ease; }
@keyframes hmBubbleSwap { 0% { opacity: 0; transform: translateY(8px) scale(.98); } 100% { opacity: 1; transform: none; } }

/* ============================================================
   5) HOW IT WORKS — steps
   ============================================================ */
/* Steps reuse the exact growth-domain cube look (2×2, accent top, icon-square, glow+sheen). */
.hm-steps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }
.hm-step {
  position: relative; padding: 1.8rem; border-radius: 18px; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.hm-step:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); box-shadow: 0 16px 40px rgba(0,0,0,.3); }
.hm-step-num { /* number inside an icon-square, like .hm-domain-ic */
  display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 14px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; line-height: 1; margin-bottom: 1rem;
  color: var(--dc); -webkit-text-fill-color: var(--dc);
  background: color-mix(in srgb, var(--dc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--dc) 26%, transparent);
}
.hm-step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: var(--heading-color); margin: 0 0 .55rem; }
.hm-step-desc { font-size: .98rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ============================================================
   6) PRODUCTS MAP
   ============================================================ */
.hm-map-core { position: relative; width: 130px; margin: 0 auto 1.4rem; text-align: center; }
.hm-map-core img { position: relative; z-index: 2; width: 74px; height: auto; filter: drop-shadow(0 10px 22px rgba(0,0,0,.4)); animation: float 4.4s ease-in-out infinite; }
.hm-map-core-ring { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 96px; height: 96px; border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent-cyan) 45%, transparent); box-shadow: 0 0 34px var(--accent-cyan-glow); animation: pulseGlow 3s ease-in-out infinite; }
.hm-map-core-label { display: block; margin-top: .4rem; font-family: var(--font-display); font-weight: 700; letter-spacing: .04em; color: var(--accent-cyan); }
.hm-map-core::after { /* living connector down into the grid */
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  width: 2px; height: 2.2rem; background: linear-gradient(var(--accent-cyan), transparent);
}
/* Category cubes — richer, glow + sheen, inspired by the growth-domain cubes. */
.hm-map-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.hm-map-cat {
  position: relative; overflow: hidden; padding: 1.5rem 1.3rem; border-radius: 18px;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--cat) 12%, transparent), transparent 58%), var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: transform .3s, border-color .3s, box-shadow .3s;
}
.hm-map-cat:hover { transform: translateY(-3px); border-color: var(--glass-border-hover); box-shadow: 0 22px 50px rgba(0,0,0,.34); }
.hm-map-cat-title { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 700;
  font-size: 1.02rem; color: var(--heading-color); margin: 0 0 1.1rem; padding: .42rem .9rem; border-radius: 999px;
  background: color-mix(in srgb, var(--cat) 14%, transparent); border: 1px solid color-mix(in srgb, var(--cat) 30%, transparent); }
.hm-map-cat-title i { color: var(--cat); }
.hm-prod { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .8rem; border-radius: 12px; text-decoration: none; margin-bottom: .55rem; cursor: pointer;
  background: var(--surface-elevated); border: 1px solid var(--glass-border); transition: transform .2s, border-color .2s, box-shadow .2s, background .2s; }
.hm-prod:last-child { margin-bottom: 0; }
.hm-prod::after { content: '\f104'; font-family: 'FontAwesome'; margin-inline-start: auto; color: var(--pc); opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; font-size: .95rem; }
[dir="ltr"] .hm-prod::after { content: '\f105'; transform: translateX(-6px); }
.hm-prod:hover { transform: translateX(-4px); border-color: color-mix(in srgb, var(--pc) 55%, transparent); background: color-mix(in srgb, var(--pc) 9%, var(--surface-elevated)); box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 0 22px color-mix(in srgb, var(--pc) 18%, transparent); }
[dir="ltr"] .hm-prod:hover { transform: translateX(4px); }
.hm-prod:hover::after { opacity: 1; transform: translateX(0); }
.hm-prod-ic { flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--pc);
  background: color-mix(in srgb, var(--pc) 15%, transparent); }
.hm-prod-body { display: flex; flex-direction: column; min-width: 0; }
.hm-prod-name { font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--heading-color); }
.hm-prod-desc { font-size: .78rem; color: var(--text-secondary); line-height: 1.35; }
.hm-map-foot { text-align: center; max-width: 50ch; margin: 2.4rem auto 0; color: var(--text-secondary); font-size: 1.05rem; line-height: 1.6; }

/* ============================================================
   7) ADVANTAGES
   ============================================================ */
.hm-adv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.hm-advc { padding: 1.7rem; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  transition: transform .3s, border-color .3s, box-shadow .3s; }
.hm-advc:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--ac) 45%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--ac) 16%, transparent); }
.hm-advc-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; font-size: 1.2rem; margin-bottom: .9rem;
  color: var(--ac); background: color-mix(in srgb, var(--ac) 14%, transparent); border: 1px solid color-mix(in srgb, var(--ac) 26%, transparent); }
.hm-advc-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--heading-color); margin: 0 0 .5rem; }
.hm-advc-desc { font-size: .94rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ============================================================
   8) FINAL CTA
   ============================================================ */
.hm-final { padding-block: 3rem 5rem; }
.hm-final-card {
  position: relative; overflow: hidden; text-align: center; max-width: 820px; margin: 0 auto;
  padding: 3.2rem 2rem; border-radius: 26px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--secondary-color) 22%, transparent) 0%, transparent 55%),
    radial-gradient(120% 140% at 0% 100%, color-mix(in srgb, var(--primary-color) 20%, transparent) 0%, transparent 55%),
    var(--surface-elevated);
  border: 1px solid var(--glass-border-hover); box-shadow: 0 24px 60px rgba(0,0,0,.34);
}
.hm-final-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-amber), var(--accent-cyan), var(--secondary-color), var(--accent-violet)); }
.hm-final-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); color: var(--heading-color); margin: 0 0 .8rem; }
.hm-final-sub { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; max-width: 52ch; margin: 0 auto 1.8rem; }

/* ============================================================
   Mobile gentle CTA → takeoff path
   ============================================================ */
.hm-mobile-cta {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(140%);
  z-index: 998; display: none; align-items: center; gap: .5rem;
  padding: .7rem 1.3rem; border-radius: 12px; text-decoration: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: #fff;
  background: var(--gradient-primary); box-shadow: 0 10px 28px var(--primary-glow);
  transition: transform .35s cubic-bezier(.175,.885,.32,1.275);
}
/* once shown, it gently pulses like the takeoff button (.hm-cta-primary hmCtaPulse).
   The .45s delay lets the slide-in transition finish first; the keyframe keeps the
   translateX(-50%) centering (a bare scale() would knock it off-centre). */
.hm-mobile-cta.show { transform: translateX(-50%) translateY(0); animation: hmMobileCtaPulse 2.9s ease-in-out .45s infinite; }
.hm-mobile-cta i { font-size: .9em; }
@keyframes hmMobileCtaPulse {
  0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 10px 28px var(--primary-glow); }
  50%      { transform: translateX(-50%) scale(1.05); box-shadow: 0 16px 40px var(--primary-glow); }
}
@media (prefers-reduced-motion: reduce) { .hm-mobile-cta.show { animation: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 992px) {
  .hm-hero { grid-template-columns: 1fr; gap: 2.4rem; min-height: 0; padding-top: 2.5rem; text-align: center; }
  .hm-hero-text { display: flex; flex-direction: column; align-items: center; }
  .hm-sub { max-width: 56ch; }
  .hm-cta-row { justify-content: center; }
  .hm-roby { grid-template-columns: 1fr; gap: 2.2rem; }
  .hm-roby-text { text-align: center; }
  .hm-roby-text .hm-h2 { text-align: center; }
  .hm-roby-p { margin-inline: auto; }
  .hm-cc-robot { top: -42px; width: 92px; }
  .hm-steps-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-adv-grid { grid-template-columns: repeat(2, 1fr); }
  .hm-map-cats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hm section { padding: 3.2rem 1.1rem; }
  .hm-domains-grid { grid-template-columns: 1fr; }
  .hm-steps-grid { grid-template-columns: 1fr; }
  .hm-adv-grid { grid-template-columns: 1fr; }
  /* minmax(0,1fr): plain 1fr won't shrink below the nowrap KPI labels' min-content,
     pushing the grid past the screen edge (left column clipped). Let labels wrap. */
  .hm-cc-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-kpi-label, .hm-kpi-sub { white-space: normal; }
  .hm-mobile-cta { display: inline-flex; }
}

/* ============================================================
   PRODUCT-STYLE ADDITIONS — tablet, glowing buttons, floating
   Roby, draggable cubes, iPhone chat + keyframes
   ============================================================ */

@keyframes hmLogoGlow {
  0%,100% { filter: drop-shadow(0 0 16px rgba(249,115,22,0.45)); }
  50%     { filter: drop-shadow(0 0 30px rgba(249,115,22,0.5)) drop-shadow(0 0 54px rgba(249,115,22,0.32)); }
}
@keyframes hmCtaPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 12px 30px rgba(249,115,22,0.4),  inset 0 1px 0 rgba(255,255,255,.2); }
  50%     { transform: scale(1.03); box-shadow: 0 18px 44px rgba(249,115,22,0.5),  inset 0 1px 0 rgba(255,255,255,.2); }
}
@keyframes hmPurplePulse {
  0%,100% { transform: scale(1);    box-shadow: 0 12px 30px rgba(139,92,246,0.45), inset 0 1px 0 rgba(255,255,255,.2); }
  50%     { transform: scale(1.03); box-shadow: 0 18px 46px rgba(139,92,246,0.6),  inset 0 1px 0 rgba(255,255,255,.2); }
}
@keyframes hmJet {
  0%,100% { opacity: .6; transform: translateX(-50%) scaleY(1); }
  50%     { opacity: 1;  transform: translateX(-50%) scaleY(1.18); }
}
@keyframes hmSheen { 0% { left: -60%; } 55%,100% { left: 130%; } }

/* --- 1b) tablet wrapping the control center --- */
.hm-cc-section { padding-top: 0 !important; padding-bottom: 2rem !important; }  /* !important: base `.hm section{padding:5rem}` outranks this class */
.hm-tablet-stage { width: min(94vw, 1040px); max-width: 100%; margin: 0 auto; }
.hm-tablet {
  position: relative; padding: clamp(10px,1.6vw,18px); border-radius: clamp(20px,2.6vw,30px);
  background: linear-gradient(155deg, #2b303b 0%, #15181f 58%, #1f232d 100%);
  /* user decision 2026-07-02: ONE consistent glow formula across all 13 tablets —
     the exact 12-product-page recipe (0 0 60px @ 45%), home's hue = violet.
     (was a double 55px@85% + 120px@55% halo — much stronger than the products.) */
  box-shadow: 0 30px 70px rgba(0,0,0,.55),
              0 0 60px color-mix(in srgb, var(--accent-violet) 45%, transparent),
              inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.05);
}
.hm-tablet::after {  /* front-camera dot */
  content: ''; position: absolute; top: clamp(5px,0.8vw,10px); left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #5b6472, #0a0c10); z-index: 5;
}
.hm-tablet::before {  /* colourful cycling LED strip on the tablet frame */
  content: ''; position: absolute; top: clamp(6px,1vw,12px); left: 16%; right: 16%; height: 3px; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--secondary-color), var(--accent-violet), var(--accent-amber), var(--accent-cyan));
  background-size: 200% 100%; animation: navGradientFlow 8s linear infinite; z-index: 5;
}

/* --- section headings (calm pass 2026-07-02): plain typography — the button costume is
   reserved for real clickables; the JS-coloured word inside carries the section accent --- */
.hm-glow-btn {
  --gb: var(--accent-violet);
  display: inline-block; padding: 0; cursor: default;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  background: none; border: 0;
}
.hm-roby-h { text-align: start; }
.hm-roby-name { color: var(--accent-emerald); -webkit-text-fill-color: var(--accent-emerald); }

/* --- 3) draggable domain cubes --- */
.hm-domain { cursor: grab; user-select: none; }
.hm-domain:active { cursor: grabbing; }
.hm-domain-grip {
  position: absolute; top: .9rem; inset-inline-end: .9rem; color: var(--text-secondary); opacity: .4;
  font-size: .9rem; transition: opacity .25s, color .25s;
}
.hm-domain:hover .hm-domain-grip { opacity: .9; color: var(--dc); }
.hm-domain:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: color-mix(in srgb, var(--dc) 55%, transparent);
  box-shadow: 0 20px 46px rgba(0,0,0,.32), 0 0 34px color-mix(in srgb, var(--dc) 26%, transparent);
}
.hm-domain.hm-dragging { opacity: .55; cursor: grabbing; transform: scale(1.04) rotate(-1deg); box-shadow: 0 26px 60px rgba(0,0,0,.45); z-index: 5; }
.hm-domain.hm-drop-before { box-shadow: inset 5px 0 0 0 var(--dc); }
.hm-domain.hm-drop-after  { box-shadow: inset -5px 0 0 0 var(--dc); }

/* --- 4) product-style iPhone (Roby chat) --- */
.hm-iphone {  /* same footprint as the product-page phones (.ecom-iphone 320×640) */
  position: relative; width: 320px; height: 640px; max-width: 100%; border-radius: 46px; padding: 12px;
  background: #050505; isolation: isolate;
  /* phone glow follows the page hue like every product page (tablet+phone share one
     accent) — home's accent = violet. The shared frame rule in product-outcomes.css
     ([class*="-iphone"], !important) renders `0 0 80px var(--pt-glow)` — feeding the
     vars here gives home the EXACT product level: 80px @ .45 + the 36px/.8 halo. */
  --pt-grad-from: var(--accent-violet); --pt-grad-to: #a78bfa; --pt-glow: rgba(139, 92, 246, .45);
  box-shadow: 0 0 0 2px #1f1f1f, 0 0 0 4px #050505, 0 40px 80px rgba(0,0,0,.6), 0 0 80px var(--pt-glow);
}
.hm-iphone-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 24px; border-radius: 0 0 16px 16px; background: #05080f; z-index: 4; }
.hm-iphone-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: #0b141a; display: flex; flex-direction: column; }
.hm-wa-statusbar { display: flex; align-items: center; justify-content: space-between; padding: .5rem .95rem .3rem; font-size: .72rem; color: #e9edf2; }
.hm-wa-icons { display: inline-flex; gap: .4rem; font-size: .68rem; }
.hm-wa-header { display: flex; align-items: center; gap: .55rem; padding: .5rem .8rem; background: #1f2c33; color: #e9edf2; }
.hm-wa-back { font-size: .9rem; }
.hm-wa-avatar { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--accent-orange); flex-shrink: 0; }
.hm-wa-avatar img { width: 100%; height: 100%; object-fit: cover; }
.hm-wa-id { margin-inline-end: auto; display: flex; flex-direction: column; line-height: 1.2; }
.hm-wa-name { font-weight: 700; font-size: .92rem; }
.hm-wa-status { display: inline-flex; align-items: center; gap: .3rem; font-size: .68rem; color: #8fd3b6; }
.hm-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #25d366; animation: dividerPulse 2.4s ease-in-out infinite; }
.hm-wa-header > .fa-video-camera, .hm-wa-header > .fa-phone { font-size: .9rem; opacity: .85; }
.hm-wa-messages { flex: 1; padding: .9rem .7rem; display: flex; flex-direction: column; justify-content: flex-start; gap: .5rem; overflow: hidden; background: linear-gradient(rgba(11,20,26,.5), rgba(11,20,26,.5)), #0b141a; }
.hm-wa-msg { animation: hmMsgIn .4s ease both; }
@keyframes hmMsgIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
.hm-wa-msg { display: flex; max-width: 82%; }
.hm-wa-owner { align-self: flex-end; }
.hm-wa-roby  { align-self: flex-start; }
.hm-wa-bubble { padding: .55rem .75rem; border-radius: 12px; font-size: .86rem; line-height: 1.45; color: #e9edf2; box-shadow: 0 2px 5px rgba(0,0,0,.3); }
.hm-wa-owner .hm-wa-bubble { background: #075e54; border-bottom-right-radius: 3px; }
.hm-wa-roby  .hm-wa-bubble { background: #1f2c33; border-bottom-left-radius: 3px; }
[dir="rtl"] .hm-wa-owner .hm-wa-bubble { border-bottom-right-radius: 12px; border-bottom-left-radius: 3px; }
[dir="rtl"] .hm-wa-roby  .hm-wa-bubble { border-bottom-left-radius: 12px; border-bottom-right-radius: 3px; }
.hm-wa-bubble.is-swap { animation: hmBubbleSwap .45s ease; }
.hm-wa-input { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; background: #1f2c33; color: #8696a0; }
.hm-wa-input-field { flex: 1; padding: .4rem .7rem; border-radius: 16px; background: #2a3942; font-size: .8rem; }

/* --- responsive for the new blocks --- */
@media (max-width: 992px) {
  .hm-conn-inner { grid-template-columns: 1fr; gap: 1.4rem; text-align: center; }
  .hm-conn-h { margin-inline: auto; max-width: 30ch; }
  .hm-conn-divider { margin-inline: auto; max-width: 220px; background: linear-gradient(90deg, transparent, var(--accent-violet), var(--accent-cyan), transparent); }
  .hm-conn-line { grid-template-columns: repeat(2, 1fr); max-width: 460px; margin-inline: auto; }
  .hm-conn-robot { min-height: 0; }   /* robot stays BELOW the cubes (was order:-1 = on top) */
  .hm-conn-robot img { width: clamp(180px, 46vw, 260px); }
  .hm-roby-h { text-align: center; }
}
@media (max-width: 640px) {
  .hm-cc-section { padding-bottom: 2.4rem; }
  .hm-tablet { padding: 9px; border-radius: 20px; }
}

/* --- eyebrow ambient glow --- */
@keyframes hmEyebrowGlow { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 20px -2px var(--accent-amber-glow); } }

/* --- guided tour inside the control-center tablet --- */
@keyframes hmTourFill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hm-cc.hm-tour-dim > * { transition: opacity .45s ease, filter .45s ease; opacity: .25; filter: blur(1.5px); }
.hm-cc.hm-tour-dim > .hm-tour-spot {
  opacity: 1; filter: none; position: relative; z-index: 2; border-radius: 12px;
  box-shadow: 0 0 0 2px var(--accent-cyan), 0 0 0 6px color-mix(in srgb, var(--accent-cyan) 22%, transparent), 0 0 30px var(--accent-cyan-glow);
}
/* keep the control-center title bar ("מרכז השליטה …") fully visible for the WHOLE tour,
   even while the spotlight is on a single row below it (user request). */
.hm-cc.hm-tour-dim > .hm-cc-bar { opacity: 1; filter: none; }
/* Controls sit in-flow just below the tablet (NOT an overlay — must never cover the tablet's own
   bottom action bar). Kept compact so tablet + controls fit the viewport; home.js scrolls to fit. */
.hm-tour-ui { width: min(94vw, 1040px); max-width: 100%; margin: 0.7rem auto 0; text-align: center; }
.hm-tour-progress { display: flex; gap: 7px; justify-content: center; margin-bottom: .6rem; }
.hm-tour-progress span { width: 34px; height: 4px; border-radius: 99px; background: rgba(255,255,255,.16); overflow: hidden; position: relative; }
.hm-tour-progress span.is-done { background: var(--accent-cyan); }
.hm-tour-progress span.is-active::after { content: ''; position: absolute; inset: 0; background: var(--accent-cyan); transform-origin: left; animation: hmTourFill 4s linear forwards; }
[dir="rtl"] .hm-tour-progress span.is-active::after { transform-origin: right; }
.hm-tour-cap { font-family: var(--font-display); font-weight: 600; font-size: clamp(.95rem,1.6vw,1.18rem); color: var(--accent-cyan); line-height: 1.4; margin: 0 auto .6rem; max-width: 60ch; min-height: 1.8em; }
.hm-tour-controls { display: inline-flex; gap: .6rem; }
.hm-tour-skip, .hm-tour-next { font-family: var(--font-display); font-weight: 700; font-size: .9rem; padding: .55rem 1.4rem; border-radius: 12px; cursor: pointer; transition: transform .2s, box-shadow .25s, filter .2s; }
.hm-tour-skip { background: transparent; color: var(--text-secondary); border: 1px solid var(--glass-border-hover); }
.hm-tour-skip:hover { color: var(--heading-color); transform: translateY(-2px); }
.hm-tour-next { color: #fff; border: none; background: var(--gradient-primary); box-shadow: 0 10px 26px rgba(249,115,22,.4); }
.hm-tour-next:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 14px 34px rgba(249,115,22,.5); }
@media (prefers-reduced-motion: reduce) { .hm-tour-progress span.is-active::after { animation: none; transform: scaleX(1); } }

/* --- phone on small screens (match product scale-down) --- */
@media (max-width: 480px) { .hm-iphone { width: 290px; height: 600px; } }

/* ============================================================
   ADVANTAGE CARDS — same look/effects/drag as the top cubes
   ============================================================ */
.hm-advc { position: relative; overflow: hidden; cursor: grab; user-select: none; }
.hm-advc:active { cursor: grabbing; }
.hm-advc:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: color-mix(in srgb, var(--ac) 55%, transparent);
  box-shadow: 0 20px 46px rgba(0,0,0,.32), 0 0 34px color-mix(in srgb, var(--ac) 26%, transparent);
}
.hm-advc .hm-domain-grip { color: var(--text-secondary); opacity: .4; }
.hm-advc:hover .hm-domain-grip { opacity: .9; color: var(--ac); }
.hm-advc.hm-dragging { opacity: .55; cursor: grabbing; transform: scale(1.04) rotate(-1deg); box-shadow: 0 26px 60px rgba(0,0,0,.45); z-index: 5; }
.hm-advc.hm-drop-before { box-shadow: inset 5px 0 0 0 var(--ac); }
.hm-advc.hm-drop-after  { box-shadow: inset -5px 0 0 0 var(--ac); }

/* ============================================================
   ROBY TEXT COLUMN — bullets + CTA (balances the tall phone)
   ============================================================ */
.hm-roby-bullets { list-style: none; margin: 1.4rem 0 1.7rem; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.hm-roby-bullets li { display: flex; align-items: flex-start; gap: .6rem; font-size: 1.02rem; color: var(--text-color); line-height: 1.5; }
.hm-roby-bullets i { color: var(--accent-emerald); margin-top: .2rem; flex-shrink: 0; }
.hm-roby-cta { align-self: flex-start; }

/* ============================================================
   FINAL CTA — euphoric / celebratory (no rockets)
   ============================================================ */
.hm-euphoria { position: relative; overflow: hidden; }
.hm-euphoria > *:not(.hm-confetti) { position: relative; z-index: 2; }
.hm-euphoria::after {  /* still aurora wash (was a perpetual drift) */
  content: ''; position: absolute; inset: -35%; z-index: 0; pointer-events: none; opacity: .4;
  background:
    radial-gradient(closest-side at 25% 30%, color-mix(in srgb, var(--accent-violet) 60%, transparent), transparent),
    radial-gradient(closest-side at 78% 64%, color-mix(in srgb, var(--accent-cyan) 55%, transparent), transparent),
    radial-gradient(closest-side at 62% 18%, color-mix(in srgb, var(--accent-pink) 50%, transparent), transparent),
    radial-gradient(closest-side at 38% 82%, color-mix(in srgb, var(--accent-amber) 48%, transparent), transparent);
  filter: blur(42px);
}
@keyframes hmAurora {
  0%   { transform: translate(0,0) rotate(0); }
  50%  { transform: translate(4%, -3%) rotate(7deg); }
  100% { transform: translate(-4%, 3%) rotate(-7deg); }
}
/* confetti — spawned by home.js when the card enters view + on button hover */
.hm-confetti { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hm-confetti i { position: absolute; top: -8%; width: 8px; height: 14px; border-radius: 2px; opacity: 0; animation: hmConfettiFall var(--d, 2.6s) linear forwards; }
@keyframes hmConfettiFall {
  0%   { opacity: 0; transform: translateY(-12px) rotate(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(380px) rotate(720deg); }
}
/* euphoric button — joyful shimmer + satisfying lift (no flame) */
.hm-cta-euphoria { position: relative; overflow: hidden; isolation: isolate; }
.hm-cta-euphoria > * { position: relative; z-index: 1; }
.hm-cta-euphoria::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.55) 50%, transparent);
  transform: skewX(-18deg); animation: hmSheen 3.2s ease-in-out infinite;
}
.hm-cta-euphoria:hover { transform: translateY(-4px) scale(1.06); filter: saturate(1.18) brightness(1.07);
  box-shadow: 0 22px 52px rgba(249,115,22,.55), 0 0 40px color-mix(in srgb, var(--accent-pink) 45%, transparent); }

/* responsive: center the Roby bullets when the column stacks */
@media (max-width: 992px) {
  .hm-roby-bullets { width: fit-content; margin-inline: auto; }
  .hm-roby-cta { align-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-wa-msg, .hm-euphoria::after, .hm-cta-euphoria::after { animation: none !important; }
  .hm-confetti { display: none !important; }
}

/* ============================================================
   ROUND-2 REFINEMENTS
   ============================================================ */
/* glowing "online" dot in the control-center bar */
.hm-dot-glow { width: 8px; height: 8px; background: #25d366; box-shadow: 0 0 8px 1px #25d366; animation: hmDotGlow 2s ease-in-out infinite; }
@keyframes hmDotGlow {
  0%,100% { box-shadow: 0 0 6px 1px #25d366, 0 0 0 0 rgba(37,211,102,.6); }
  50%     { box-shadow: 0 0 13px 3px #25d366, 0 0 0 6px rgba(37,211,102,0); }
}

/* connections heading — centred; widened so the first part stays on ONE line and the
   punch sits on a 2nd line → 2 lines total (was 3). */
.hm-conn-h { font-size: clamp(1.55rem, 3vw, 2.3rem); line-height: 1.3; max-width: min(94vw, 900px); margin-inline: auto; text-wrap: balance; }
.hm-conn-punch { display: block; margin-top: .5rem; font-size: 1.06em; font-weight: 800;
  /* the ONE accent phrase = the approved static brand gradient (matches the hero
     "עובדים יחד." and contact "בואו נדבר"; was solid cyan) */
  background-image: linear-gradient(90deg, var(--accent-violet), var(--accent-pink), var(--accent-orange));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }

/* the two hero buttons read as a synchronised pair (matched shimmer + glow) */
.hm-cta-primary, .hm-cta-purple { position: relative; overflow: hidden; isolation: isolate; }
.hm-cta-primary > *, .hm-cta-purple > * { position: relative; z-index: 1; }
.hm-cta-primary::after, .hm-cta-purple::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.42) 50%, transparent);
  transform: skewX(-18deg); animation: hmSheen 3.2s ease-in-out infinite;  /* same timing → in sync */
}

/* Roby text column matches the phone height so it reads proportional on desktop */
.hm-roby { align-items: stretch; }
.hm-roby-text { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; }
@media (max-width: 992px) {
  .hm-roby-text { align-items: center; }
}

.hm-final-h { display: inline-block; }
@keyframes hmBellRing {
  0%,100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(3px,-2px) rotate(4deg); }
  20% { transform: translate(-3px,2px) rotate(-4deg); }
  30% { transform: translate(3px,2px) rotate(3deg); }
  40% { transform: translate(-3px,-2px) rotate(-3deg); }
  55% { transform: translate(2px,-1px) rotate(2deg); }
  70% { transform: translate(-2px,1px) rotate(-2deg); }
  85% { transform: translate(1px,-1px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) { .hm-final-h:hover { animation: none; } }

/* === Final-CTA "cube" polish (mirrored on every page) === */
/* hero line "עסק אחד שעובד חכם." → the exact MR.ROBOT-logo orange (drop the jarring amber/yellow) */
.hm-h1 .hm-line-grad { background-image: linear-gradient(135deg, var(--accent-orange), #fb923c); }
.hm-final-sub { color: var(--heading-color); font-weight: 600; opacity: 1; }
.hm-final-h { border-bottom: 0; padding-bottom: 0; }   /* global h2 orange underline leaked here */
.hm-final-card { box-shadow: 0 24px 60px rgba(0,0,0,.4); }
/* the CTA button rings like the heading on hover, then settles so it stays clickable */
.hm-final-card .hm-cta:hover { animation: hmBellRing .55s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .hm-final-card .hm-cta:hover { animation: none; } }

/* === Home hero rework === */
/* home now uses the SAME planks + mesh background as every other page (texture restored) */

/* headline → 2 long lines, sized so each stays on ONE line on desktop */
.hm-h1 { font-size: clamp(1.9rem, 4.5vw, 3.4rem); line-height: 1.16; max-width: min(95vw, 1060px); margin-inline: auto; }
/* Headline lines wrap by word when a language makes a line too long for the viewport.
   Forcing `white-space: nowrap` here caused horizontal overflow on the English home page
   (the long second line ran off-screen → horizontal scrollbar). Short Hebrew lines still
   fit on one line naturally, so this only changes behaviour where a line would overflow. */
.hm-h1 .hm-line { white-space: normal; }

/* (headline colour/animation lives in the .hm-h1 .hm-line block further below — the
   earlier clip-path "paint-in" was removed: a later !important block overrode its
   animation, so the clip-path never opened and the headline was clipped to nothing.) */


/* connections punchline "מחובר למערכת אחת" — no inherited orange underline;
   instead a real-time "highlight" underline that draws itself when revealed */
.hm-conn-h, .hm-conn-punch { text-decoration: none !important; }
.hm-conn-divider { display: none !important; }
.hm-conn-punch { position: relative; display: block; width: fit-content; padding-bottom: .14em; }
.hm-conn-punch::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; border-radius: 6px;
  /* pen stroke recoloured to the brand gradient (same draw animation, untouched) */
  background: linear-gradient(90deg, var(--accent-violet), var(--accent-pink), var(--accent-orange));
  box-shadow: 0 0 14px color-mix(in srgb, var(--accent-pink) 50%, transparent);
  transform: scaleX(0); transform-origin: left;   /* pen-stroke draws LEFT → RIGHT */
  animation: hmPenDraw 1.1s cubic-bezier(.62,0,.2,1) 1s forwards;
}
/* underline draws itself L→R like a marker pen ONCE, then stays */
@keyframes hmPenDraw { to { transform: scaleX(1); } }
@media (max-width: 992px) { .hm-conn-punch { margin-inline: auto; } }
@media (prefers-reduced-motion: reduce) { .hm-conn-punch::after { animation: none; transform: scaleX(1); opacity: 1; } }

/* kill the stray full-width line under the punchline (divider + any conn pseudo) */
.hm-conn-divider { display: none !important; height: 0 !important; visibility: hidden !important; background: none !important; }
.hm-conn-h::before, .hm-conn-h::after, .hm-conn-text::before, .hm-conn-text::after, .hm-conn-line::before, .hm-conn-line::after { content: none !important; background: none !important; border: 0 !important; }
/* pen stroke = the approved brand gradient (user 2026-07-02), same draw animation */
.hm-conn-punch::after { background: linear-gradient(90deg, var(--accent-violet), var(--accent-pink), var(--accent-orange)) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--accent-pink) 50%, transparent) !important; }

/* kill any propagated underline from a conn ancestor */
.hm-conn, .hm-conn-inner, .hm-conn-text, .hm-conn-h, .hm-conn-punch, .hm-conn-line { text-decoration: none !important; }
.hm-conn-h { border-bottom: 0 !important; box-shadow: none !important; }

/* hero stays a single CENTRED column — NO robot, NO 2-column split (which left an empty
   "framed" panel on one side). The content centres full-width, no box/frame. */

/* === feedback batch === */
/* #6: connected-section heading centred on desktop too (not only mobile) */
.hm-conn-h, .hm-conn-text { text-align: center !important; }
/* #7: move the connected-section robot down */
.hm-conn-robot { margin-top: 2.6rem; }
/* #4: dashboard status chips → rounded-rect like the footer menu buttons (were pills) */
.hm-sys { border-radius: 12px !important; }

/* ============================================================
   HEADLINE STANDARD (user-approved 2026-07-02, site-wide):
   line 1 = SOLID heading colour (max readability), and ONLY the punch line
   (.hm-line-grad = "עובדים יחד.") carries the brand gradient — STATIC
   violet→pink→orange (the preferred home ramp reduced to 3 adjacent stops).
   No infinite headline animation, no glow (calm-pass motion budget:
   permanent glow belongs to Roby + CTAs only). Same standard on contact
   (.cx-title) and any future hero H1.
   ============================================================ */
.hm-h1 .hm-line {
  background: none !important;
  -webkit-text-fill-color: var(--heading-color) !important; color: var(--heading-color) !important;
  text-shadow: none !important; animation: none !important; filter: none !important;
}
.hm-h1 .hm-line-grad {
  background-image: linear-gradient(90deg, var(--accent-violet), var(--accent-pink), var(--accent-orange)) !important;
  background-size: 100% auto !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
  text-shadow: none !important; animation: none !important; filter: none !important;
  /* hug the text so the full violet→pink→orange ramp lands on the words
     (a full-width block samples only the middle of the gradient) */
  width: fit-content; max-width: 100%; margin-inline: auto;
}

/* === conn-section batch === */
/* F: force the "כל מה שהעסק…" heading to TRUE center (desktop + mobile) */
.hm-conn-inner { align-items: center !important; }
.hm-conn-text  { margin-inline: auto !important; text-align: center !important; width: 100%; }
.hm-conn-h     { display: block !important; width: 100%; text-align: center !important; margin-inline: auto !important; }
/* G: cubes fill their cell and CENTER their content (was right-hugged) — also fixes the broken mobile "תוכן" cube */
.hm-conn-item  { display: flex !important; justify-content: center !important; text-align: center; }
/* H: move the connected-section robot down one more line */
.hm-conn-robot { margin-top: 4.3rem !important; }

/* E: soft PURPLE glow behind the dashboard tablet (echoes the green phone-dot glow) */
.hm-tablet-stage { position: relative; }
/* (the tablet's purple glow is now a SCREEN-SHAPED box-shadow on .hm-tablet above — the
   oval radial ::before was removed because the user wanted it to follow the screen shape.) */
.hm-tablet { position: relative; z-index: 1; }
@keyframes hmTabletGlow { 0%,100% { opacity: .75; transform: scale(.99); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .hm-tablet-stage::before { animation: none; } }

/* Roby PHONE — its purple glow is now a SCREEN-SHAPED box-shadow on .hm-phone (above),
   matching the tablet. The oval radial ::before was removed (user wanted the screen shape). */
.hm-roby-phone { position: relative; }

/* === feedback round 6: clear whole-heading colour sequence (bottom→top) + zoom + hover === */
.hm-conn-punch { margin-inline: auto !important; }
.hm-conn-line .hm-conn-item { display: flex !important; justify-content: center !important; align-items: center !important; gap: .45rem !important; text-align: center !important; white-space: nowrap !important; }
.hm-conn-line .hm-conn-item > i, .hm-conn-line .hm-conn-item > span { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; }
@media (max-width: 992px) {
  .hm-conn-line { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; gap: .55rem !important; max-width: min(100%, 560px) !important; margin-inline: auto !important; }
  .hm-conn-item { width: auto !important; flex: 0 0 auto !important; min-width: 5rem; padding-inline: 1rem !important; white-space: nowrap !important; }
}
/* (superseded 2026-07-02: the per-letter colour-cycle + zoom headline was replaced by the
   approved site HEADLINE STANDARD — solid line 1 + static violet→pink→orange punch line —
   defined in the block above (~L770). Leftover .hm-ltr spans, if any page cached the old
   splitter JS, are neutralised so they inherit the standard.) */
.hm-h1 .hm-ltr { color: inherit !important; -webkit-text-fill-color: inherit !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) { .hm-h1 .hm-ltr { animation: none !important; -webkit-text-fill-color:#8D53A3 !important; color:#8D53A3 !important; } .hm-h1:hover { transform: none; } }

/* approval rows: each task is ONE line — sentence on the RIGHT, button on the LEFT, vertically centred (desktop + mobile) */
.hm-cc-task { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: .8rem; }
.hm-cc-task-meta { flex: 1 1 auto !important; min-width: 0; }
.hm-cc-task-btn { align-self: center !important; flex: 0 0 auto !important; min-width: 7.5rem; justify-content: center !important; }
@media (max-width: 992px) { .hm-cc-task-btn { min-width: 6rem; padding-inline: .5rem; } }

/* mobile: keep approval sentences aligned to the start (right in RTL) — the global mobile rule was centering them */
@media (max-width: 992px) {
  .hm-cc-task { text-align: start !important; }
  .hm-cc-task-meta { align-items: flex-start !important; text-align: start !important; }
  .hm-cc-task-text, .hm-cc-task-sub { text-align: start !important; width: 100%; }
}

/* ---- mobile heading sizes ---------------------------------------------------
   Must sit at the END of the file: the base .hm-h1 / .hm-conn-h clamps are
   declared late (~line 690-730), so an earlier media block of equal specificity
   loses by source order. Desktop floors (1.9rem/1.55rem) break the hero into
   3 lines and the conn punch-line into 4 on phones. */
@media (max-width: 640px) {
  .hm-h1 { font-size: clamp(1.4rem, 5.9vw, 1.8rem); line-height: 1.22; }
  .hm-conn-h { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
}

/* ===== MOBILE CENTERING of the control-center demo (≤700px — user 2026-07-02):
   task rows and the Roby insight centre fully (mirrors control-center.css). ===== */
@media (max-width: 700px) {
  .hm-cc-task { align-items: center; text-align: center; }
  .hm-cc-task-meta { align-items: center !important; text-align: center !important; }
  .hm-cc-task-text, .hm-cc-task-sub { width: 100%; text-align: center !important; }
  .hm-cc-task-btn { align-self: center; }
  .hm-cc-insight { flex-direction: column; align-items: center; text-align: center; gap: .35rem; }
  .hm-cc-insight > i { margin-top: 0; }
  .hm-cc-insight-body { align-items: center; gap: .2rem; }
  .hm-cc-insight-head { justify-content: center; }
  .hm-cc-status { justify-content: center; }
}

/* ≤900px uniform advantage-cube width — same fix as product-outcomes.css:
   the global flattener's justify-items:center shrink-wrapped each .hm-advc to
   its own text width (random-looking sibling widths). Fill, cap, center. */
@media (max-width: 900px) {
  .hm .hm-advc { width: 100%; max-width: 540px; margin-inline: auto; }
}