/* ============================================================================
   info.css — shared styles for content pages (About, How it works)
   Reuses the existing design tokens + motion feel only. RTL-first. Namespace .ip-*
   ============================================================================ */
.ip { display: block; }
.ip section { position: relative; max-width: 1140px; margin-inline: auto; padding: 4.5rem 1.5rem; }

.ip-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.ip-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ip-reveal { opacity: 1 !important; transform: none !important; } }

.ip-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);
}
.ip-head { text-align: center; max-width: 820px; margin: 0 auto 3rem; }
.ip-h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; font-size: clamp(1.6rem, 3.4vw, 2.5rem); color: var(--heading-color); margin: 0; letter-spacing: -.01em; }

/* CTA button (same look as the site primary) */
.ip-btn {
  display: inline-flex; align-items: center; gap: .6rem; cursor: pointer; text-decoration: none; border: none;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: #fff;
  padding: 1rem 1.9rem; border-radius: 12px;
  background: var(--gradient-primary); background-size: 170% 170%; box-shadow: 0 10px 28px var(--primary-glow);
  animation: pulseGlow 3.5s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.175,.885,.32,1.275), box-shadow .25s, background-position .4s;
}
.ip-btn:hover { transform: translateY(-3px); background-position: 100% 0; box-shadow: 0 14px 38px var(--primary-glow); }
.ip-btn i { transition: transform .25s; } [dir="ltr"] .ip-btn i { transform: scaleX(-1); }
.ip-btn:hover i { transform: translateX(-5px); } [dir="ltr"] .ip-btn:hover i { transform: scaleX(-1) translateX(-5px); }
/* secondary (ghost) CTA — same shape/size as .ip-btn, outlined instead of filled (existing tokens only) */
.ip-btn-ghost { background: transparent; color: var(--heading-color); box-shadow: none; animation: none; border: 1px solid var(--glass-border-hover); }
.ip-btn-ghost:hover { background: var(--surface-elevated); box-shadow: none; }

/* ============================================================================
   ABOUT — RTL editorial "story" rows (2026-07-01, fixed for Hebrew): each idea =
   heading anchored on the RIGHT (natural Hebrew reading start) with a bold accent
   bar on its right/outer edge, and the paragraph flowing to its LEFT. NO left/right
   flip — flipping reads backwards in RTL (the eye hits the text before the heading);
   the rhythm comes from the accent COLOUR per idea instead. Stacks on mobile.
   ============================================================================ */
.ip-band { position: relative; max-width: 920px; margin: 0 auto; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: 20px; padding: 2.3rem 2.6rem; overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; }
.ip-band::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--sc, var(--accent-cyan));
  box-shadow: 0 0 24px color-mix(in srgb, var(--sc, var(--accent-cyan)) 55%, transparent); }
.ip-band:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--sc, var(--accent-cyan)) 42%, transparent);
  box-shadow: 0 18px 44px rgba(0,0,0,.3), 0 0 30px color-mix(in srgb, var(--sc, var(--accent-cyan)) 15%, transparent); }
.ip-band-ic { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.4rem; margin-bottom: 1.1rem;
  color: var(--sc, var(--accent-cyan)); background: color-mix(in srgb, var(--sc, var(--accent-cyan)) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc, var(--accent-cyan)) 28%, transparent); }
.ip-band-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.8vw, 2.05rem); line-height: 1.28;
  letter-spacing: -.01em; color: var(--heading-color); margin: 0 0 .85rem; text-align: start; border-bottom: 0; padding-bottom: 0; }
.ip-band-text { color: var(--text-color); font-size: 1.13rem; line-height: 1.8; margin: 0; text-align: start; max-width: 64ch; }

/* UNIFIED card line for the whole About page: every "cube" (belief/vision bands +
   the 6 value cards) shares one glass/accent look, and ALL their content is CENTRED
   (icon badge, heading, text) — not right-aligned. */
#aboutRoot .ip-band, #aboutRoot .ip-prin { text-align: center; }
#aboutRoot .ip-band-ic, #aboutRoot .ip-prin-ic { display: grid; margin-inline: auto; }
#aboutRoot .ip-band-h, #aboutRoot .ip-band-text, #aboutRoot .ip-prin-title, #aboutRoot .ip-prin-desc { text-align: center; }
#aboutRoot .ip-band-text { margin-inline: auto; }
#aboutRoot .ip-prin { border-radius: 20px; }
#aboutRoot .ip-prin::before { height: 4px; box-shadow: 0 0 20px color-mix(in srgb, var(--pc, var(--accent-cyan)) 45%, transparent); }
@media (max-width: 700px) { .ip-band { padding: 1.85rem 1.5rem; } }

/* hero closing sub-statement — centred, small accent divider above (not a glow-button) */
.ip-hero-sub { display: block; max-width: 42ch; margin: 2.1rem auto 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 2.1vw, 1.55rem); line-height: 1.4; color: var(--heading-color); white-space: pre-line;
  position: relative; padding-top: 1.7rem; border-bottom: 0; }
.ip-hero-sub::before { content: ''; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--accent-cyan), var(--secondary-color)); }

/* ---- Hero ---- */
.ip-hero { text-align: center; padding-top: 4rem; padding-bottom: 2.5rem; }
.ip-hero-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ip-hero-orbs span { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .42; animation: float 10s ease-in-out infinite; }
.ip-hero-orbs span:nth-child(1) { width: 360px; height: 360px; inset-inline-end: -70px; top: -50px; background: var(--secondary-glow); }
.ip-hero-orbs span:nth-child(2) { width: 320px; height: 320px; inset-inline-start: -60px; bottom: -40px; background: var(--accent-cyan-glow); animation-delay: 2s; }
.ip-hero > * { position: relative; z-index: 1; }
.ip-tag {
  display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-amber);
  padding: .35rem .95rem; border-radius: 12px; margin-bottom: 1.5rem;
  background: color-mix(in srgb, var(--accent-amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-amber) 30%, transparent);
}
.ip-h1 { font-family: var(--font-display); font-weight: 800; line-height: 1.14; font-size: clamp(2rem, 4.6vw, 3.2rem); color: var(--heading-color); margin: 0 auto 1.2rem; max-width: 20ch; letter-spacing: -.015em; white-space: pre-line; }
/* LIGHT THEME: global `body.light-theme h1` sets -webkit-text-fill-color:transparent for its
   gradient, but the .ip-h1 pill background removes that gradient → the heading went INVISIBLE
   in light mode (about + how-it-works). Restore the fill to the (dark) heading colour. */
body.light-theme .ip-h1 { -webkit-text-fill-color: currentColor; }
.ip-hero-text { color: var(--text-color); font-size: 1.18rem; line-height: 1.75; max-width: 62ch; margin: 0 auto; }

/* ---- About hero interactions ---- */
/* the small decorative divider above the sub-statement was floating / unrelated → removed */
#aboutRoot .ip-hero-sub::before { display: none; }
/* paragraph: MR.ROBOT-logo warm glow (orange->amber, like .brand-text) + a PERPETUAL gentle zoom in/out.
   margin-top nudges the whole hero copy (paragraph + sub-statement) down one line. */
#aboutRoot .ip-hero-text { color: var(--accent-amber); margin-top: 1.7rem; transform-origin: center; animation: ipParaBreathe 3.6s ease-in-out infinite;
  /* the yellow tone of the MR.ROBOT logo / primary hero button (--accent-amber = #f59e0b), same glow level as before but yellow */
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent-amber) 55%, transparent), 0 0 34px color-mix(in srgb, var(--accent-amber) 35%, transparent); }
@keyframes ipParaBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.028); } }
/* TIGHTEN the gap between the hero's last line and the first cube (belief) by ~2 lines */
#aboutRoot .ip-hero { padding-bottom: .4rem; }
#aboutRoot > section:nth-of-type(2) { padding-top: 3rem; }
/* sub-statement: per-letter yellow->orange colour-WIPE (same style as the home headline) + light hover zoom */
#aboutRoot .ip-hero-sub { padding-top: 0; transition: transform .35s cubic-bezier(.22,.61,.36,1); transform-origin: center; }
#aboutRoot .ip-hero-sub:hover { transform: scale(1.03); }
#aboutRoot .ip-hero-sub .ip-ltr { color: #f97316; -webkit-text-fill-color: #f97316; animation: ipSubStep 12.6s step-end infinite both; }
/* each line gets a marker-pen underline that DRAWS itself (R->L, reading order) then STAYS —
   line 1 first, then line 2, as if someone highlighted the sentence by hand to emphasise it */
#aboutRoot .ip-sub-line { display: block; position: relative; width: fit-content; margin: 0 auto; padding-bottom: .16em; }
#aboutRoot .ip-sub-line::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; border-radius: 5px;
  background: linear-gradient(90deg, var(--accent-amber), var(--accent-orange));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-orange) 60%, transparent);
  transform: scaleX(0); transform-origin: right; animation: ipPenDraw 4.2s cubic-bezier(.62,0,.2,1) infinite; }
#aboutRoot .ip-sub-line:nth-of-type(1)::after { animation-delay: .8s; }
#aboutRoot .ip-sub-line:nth-of-type(2)::after { animation-delay: 1.9s; }
/* LOOP forever: draw (R->L), hold, fade out, then redraw — line 1 keeps leading line 2 by ~1.1s */
@keyframes ipPenDraw {
  0%        { transform: scaleX(0); opacity: 1; }
  22%, 66%  { transform: scaleX(1); opacity: 1; }
  84%, 100% { transform: scaleX(1); opacity: 0; }
}
@keyframes ipSubStep {
  0%      { color:#fde047; -webkit-text-fill-color:#fde047; }
  14.285% { color:#fbbf24; -webkit-text-fill-color:#fbbf24; }
  28.571% { color:#f59e0b; -webkit-text-fill-color:#f59e0b; }
  42.857% { color:#f97316; -webkit-text-fill-color:#f97316; }
  57.142% { color:#fb923c; -webkit-text-fill-color:#fb923c; }
  71.428% { color:#f59e0b; -webkit-text-fill-color:#f59e0b; }
  85.714% { color:#fbbf24; -webkit-text-fill-color:#fbbf24; }
}
@media (prefers-reduced-motion: reduce) {
  #aboutRoot .ip-hero-sub .ip-ltr { animation: none !important; color: var(--accent-orange) !important; -webkit-text-fill-color: var(--accent-orange) !important; }
  #aboutRoot .ip-hero-text { animation: none; }
  #aboutRoot .ip-sub-line::after { animation: none; transform: scaleX(1); }
  #aboutRoot .ip-hero-sub:hover { transform: none; }
}

/* ---- Problem grid (scattered) ---- */
.ip-prob-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 920px; margin: 0 auto; }
.ip-prob {
  display: flex; align-items: center; gap: .8rem; padding: 1.1rem 1.2rem; border-radius: 14px;
  background: var(--glass-bg); border: 1px dashed var(--glass-border-hover); color: var(--text-color); font-weight: 600;
}
.ip-prob:nth-child(odd) { transform: rotate(-1.1deg); }
.ip-prob:nth-child(even) { transform: rotate(1.1deg); }
.ip-prob-ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 1.1rem; color: var(--text-secondary); background: var(--surface-elevated); }
.ip-prob:nth-child(3n+1) .ip-prob-ic { color: var(--accent-cyan); }
.ip-prob:nth-child(3n+2) .ip-prob-ic { color: var(--accent-amber); }
.ip-prob:nth-child(3n) .ip-prob-ic { color: var(--accent-pink); }

/* ---- Principles (solution) ---- */
.ip-principles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.ip-prin { position: relative; padding: 1.8rem; border-radius: 18px; background: var(--glass-bg); border: 1px solid var(--glass-border); transition: transform .3s, border-color .3s, box-shadow .3s; }
.ip-prin::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--pc, var(--accent-cyan)); }
.ip-prin:nth-child(1) { --pc: var(--accent-cyan); } .ip-prin:nth-child(2) { --pc: var(--accent-violet); } .ip-prin:nth-child(3) { --pc: var(--accent-amber); }
.ip-prin:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--pc) 45%, transparent); box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--pc) 16%, transparent); }
.ip-prin-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; font-size: 1.25rem; margin-bottom: 1rem; color: var(--pc); background: color-mix(in srgb, var(--pc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--pc) 26%, transparent); }
.ip-prin-title { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; color: var(--heading-color); margin: 0 0 .55rem; line-height: 1.3; }
.ip-prin-desc { font-size: .96rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ---- Roby band ---- */
.ip-roby { display: grid; grid-template-columns: .8fr 1.2fr; gap: 2.5rem; align-items: center; }
.ip-roby-robot { position: relative; display: grid; place-items: center; min-height: 220px; }
.ip-roby-robot img { position: relative; z-index: 2; width: 370px; max-width: 100%; height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.45)); animation: float 4.6s ease-in-out infinite; }
.ip-roby-robot::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, var(--accent-cyan-glow), transparent 68%); animation: pulseGlow 3s ease-in-out infinite; }
.ip-roby-text .ip-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); }
.ip-roby-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--heading-color); margin: 0 0 1rem; line-height: 1.25; white-space: pre-line; }
.ip-roby-p { color: var(--heading-color); font-size: 1.1rem; line-height: 1.7; margin: 0; max-width: 52ch;
  /* white text wrapped in the canonical Roby purple glow (same #6733D1 as the robot's aura) */
  text-shadow: 0 0 16px rgba(103,51,209,.65), 0 0 36px rgba(103,51,209,.4);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), text-shadow .35s ease; }
.ip-roby-p:hover { transform: scale(1.045); text-shadow: 0 0 20px rgba(103,51,209,.82), 0 0 50px rgba(103,51,209,.5); }
@media (prefers-reduced-motion: reduce) { .ip-roby-p { transition: none; } .ip-roby-p:hover { transform: none; } }

/* ---- Steps journey (How it works) ---- */
.ip-steps { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; }
.ip-step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; padding-bottom: 2.2rem; }
.ip-step:last-child { padding-bottom: 0; }
.ip-step-num { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; color: #fff;
  background: var(--gradient-secondary); box-shadow: 0 8px 22px var(--secondary-glow); }
.ip-step:not(:last-child) .ip-step-num::after { content: ''; position: absolute; top: 58px; left: 50%; transform: translateX(-50%); width: 2px; height: calc(100% + 2.2rem - 58px); background: linear-gradient(var(--secondary-color), transparent); }
.ip-step-body { padding-top: .5rem; }
.ip-step-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--heading-color); margin: 0 0 .4rem; }
.ip-step-desc { font-size: 1rem; color: var(--text-secondary); line-height: 1.6; margin: 0; }

/* ---- Timeline ---- */
.ip-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; }
.ip-tl-item { position: relative; padding: 1.5rem 1.2rem; border-radius: 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); text-align: center; }
.ip-tl-node { width: 16px; height: 16px; border-radius: 50%; margin: 0 auto .9rem; background: var(--accent-cyan); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-cyan) 16%, transparent), 0 0 16px var(--accent-cyan-glow); }
.ip-tl-when { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--accent-cyan); margin-bottom: .35rem; }
.ip-tl-what { font-size: .92rem; color: var(--text-secondary); line-height: 1.5; }

/* ---- Final CTA ---- */
.ip-cta-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);
}
.ip-cta-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));
  background-size: 200% 100%; animation: footerGlowShift 6s linear infinite; }
.ip-cta-h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.4rem); color: var(--heading-color); margin: 0 0 .8rem; }
.ip-cta-sub { color: var(--text-secondary); font-size: 1.1rem; line-height: 1.6; max-width: 52ch; margin: 0 auto 1.8rem; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .ip-prob-grid { grid-template-columns: repeat(2, 1fr); }
  .ip-principles { grid-template-columns: 1fr; }
  .ip-roby { grid-template-columns: 1fr; gap: 1.8rem; text-align: center; }
  .ip-roby-text .ip-roby-p { margin-inline: auto; }
  .ip-timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .ip section { padding: 3.2rem 1.1rem; }
  .ip-prob-grid { grid-template-columns: 1fr; }
  .ip-timeline { grid-template-columns: 1fr; }
  .ip-step-num { width: 50px; height: 50px; font-size: 1.2rem; }
  .ip-step:not(:last-child) .ip-step-num::after { top: 50px; height: calc(100% + 2.2rem - 50px); }
}

/* ============================================================================
   Home-page design language on content pages (mirrors .hm-glow-btn + cubes):
   - eyebrow labels/tags = glowing colour-coded pills with a moving shine (--gb)
   - principle/timeline cards = per-item accent + hover sheen sweep (--tc)
   - how-it-works step squares = distinct colour per step (--sc)
   Existing tokens / motion only.
   ============================================================================ */
@keyframes ipSheen { 0% { left: -60%; } 55%,100% { left: 130%; } }
@keyframes ipGlowPulse { 0%,100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 20px -4px color-mix(in srgb, var(--gb, var(--accent-cyan)) 60%, transparent); } }

.ip-label, .ip-tag {
  --gb: var(--accent-cyan);
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--gb);
  background: color-mix(in srgb, var(--gb) 13%, transparent);
  border-color: color-mix(in srgb, var(--gb) 36%, transparent);
  animation: ipGlowPulse 3.6s ease-in-out infinite;
}
.ip-label::after, .ip-tag::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; animation: ipSheen 5s ease-in-out infinite;
}
.ip-roby-text .ip-label { color: var(--gb); background: color-mix(in srgb, var(--gb) 13%, transparent); border-color: color-mix(in srgb, var(--gb) 36%, transparent); }

.ip-h2, .ip-roby-h, .ip-cta-h { text-shadow: 0 0 26px rgba(139,92,246,.16); }

/* principle cards — hover sheen */
.ip-prin { overflow: hidden; }
.ip-prin::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.15) 50%, transparent); transform: skewX(-18deg); opacity: 0; }
.ip-prin:hover::after { opacity: 1; animation: ipSheen 1.1s ease-out; }
.ip-prin > * { position: relative; z-index: 1; }

/* timeline cards — per-item colour + colored top accent + hover lift/glow + sheen */
.ip-timeline .ip-tl-item:nth-of-type(1) { --tc: var(--accent-cyan); }
.ip-timeline .ip-tl-item:nth-of-type(2) { --tc: var(--accent-amber); }
.ip-timeline .ip-tl-item:nth-of-type(3) { --tc: var(--accent-violet); }
.ip-timeline .ip-tl-item:nth-of-type(4) { --tc: var(--accent-emerald); }
.ip-tl-item { overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; border-top: 3px solid var(--tc, var(--accent-cyan)); }
.ip-tl-item::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none; z-index: 0;
  background: linear-gradient(110deg, transparent, rgba(255,255,255,.15) 50%, transparent); transform: skewX(-18deg); opacity: 0; }
.ip-tl-item:hover::after { opacity: 1; animation: ipSheen 1.1s ease-out; }
.ip-tl-item:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--tc, var(--accent-cyan)) 50%, transparent);
  box-shadow: 0 16px 40px rgba(0,0,0,.28), 0 0 26px color-mix(in srgb, var(--tc, var(--accent-cyan)) 18%, transparent); }
.ip-tl-item > * { position: relative; z-index: 1; }
.ip-tl-node { background: var(--tc, var(--accent-cyan)); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tc, var(--accent-cyan)) 16%, transparent), 0 0 16px color-mix(in srgb, var(--tc, var(--accent-cyan)) 55%, transparent); }
.ip-tl-when { color: var(--tc, var(--accent-cyan)); }

/* how-it-works step squares — distinct colour per step */
.ip-steps .ip-step:nth-of-type(1) { --sc: var(--accent-cyan); }
.ip-steps .ip-step:nth-of-type(2) { --sc: var(--accent-amber); }
.ip-steps .ip-step:nth-of-type(3) { --sc: var(--accent-violet); }
.ip-steps .ip-step:nth-of-type(4) { --sc: var(--accent-emerald); }
.ip-steps .ip-step:nth-of-type(5) { --sc: var(--accent-pink); }
.ip-steps .ip-step-num { background: var(--sc, var(--secondary-color)); box-shadow: 0 8px 22px color-mix(in srgb, var(--sc, var(--secondary-color)) 45%, transparent); }
.ip-steps .ip-step:not(:last-child) .ip-step-num::after { background: linear-gradient(var(--sc, var(--secondary-color)), transparent); }

/* timeline heading inside a glow-button frame (like home .hm-glow-btn), amber accent */
.ip-head-btn {
  --gb: var(--accent-amber);
  position: relative; overflow: hidden; isolation: isolate; display: inline-block; text-align: center;
  padding: .9rem 2rem; border-radius: 12px;
  background: color-mix(in srgb, var(--gb) 15%, transparent);
  border: none; box-shadow: 0 8px 30px -10px color-mix(in srgb, var(--gb) 45%, transparent);
  animation: ipGlowPulse 3.6s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
}
.ip-head-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; animation: ipSheen 5s ease-in-out infinite;
}
.ip-head-btn > * { position: relative; z-index: 1; }
.ip-head-btn:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px color-mix(in srgb, var(--gb) 30%, transparent); background: color-mix(in srgb, var(--gb) 16%, transparent); }
.ip-head-btn-eyebrow { display: block; font-family: var(--font-display); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gb); margin-bottom: .3rem; }
.ip-head-btn .ip-h2 { margin: 0; }

/* timeline cubes — colored icon box (like the home cubes) instead of the bare node */
.ip-tl-ic { display: inline-grid; place-items: center; width: 50px; height: 50px; border-radius: 13px; font-size: 1.35rem; margin: 0 auto .9rem;
  color: var(--tc, var(--accent-cyan)); background: color-mix(in srgb, var(--tc, var(--accent-cyan)) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--tc, var(--accent-cyan)) 28%, transparent); transition: box-shadow .3s, transform .3s; }
.ip-tl-item:hover .ip-tl-ic { box-shadow: 0 0 22px color-mix(in srgb, var(--tc, var(--accent-cyan)) 38%, transparent); transform: translateY(-2px); }

/* === Final-CTA "cube" polish (same as home) === */
@keyframes ipBell {
  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); }
}
.ip-cta-sub { color: var(--heading-color); font-weight: 600; text-shadow: 0 0 18px rgba(255,255,255,.22), 0 1px 2px rgba(0,0,0,.35); }
.ip-cta-h { text-shadow: 0 0 24px rgba(139,92,246,.28); }
.ip-cta-card { box-shadow: 0 24px 60px rgba(0,0,0,.4), 0 0 60px color-mix(in srgb, var(--secondary-color) 14%, transparent); }
.ip-btn:hover { animation: ipBell .55s ease-in-out 2; }
@media (prefers-reduced-motion: reduce) { .ip-btn:hover { animation: none; } }

/* CTA-cube heading: zoom in/out on hover (button keeps the jiggle) */
@keyframes ipZoom { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ip-cta-h { display: inline-block; }
.ip-cta-h:hover { animation: ipZoom .9s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ip-cta-h:hover { animation: none; } }

/* === how-it-works: hero heading → glow-pill button (like the home sentences) === */
#hiwRoot .ip-h1 {
  --gb: var(--accent-cyan);
  display: inline-block; position: relative; overflow: hidden; isolation: isolate;
  padding: .6rem 1.7rem; border-radius: 12px; margin-inline: auto;
  max-width: 94%; font-size: clamp(1.25rem, 2.7vw, 1.95rem); white-space: normal;
  background: color-mix(in srgb, var(--gb) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--gb) 36%, transparent);
  animation: ipGlowPulse 3.6s ease-in-out infinite;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, background .3s;
}
#hiwRoot .ip-h1::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(110deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
  transform: skewX(-18deg); pointer-events: none; animation: ipSheen 5s ease-in-out infinite;
}
#hiwRoot .ip-h1:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 14px 32px color-mix(in srgb, var(--gb) 30%, transparent); background: color-mix(in srgb, var(--gb) 18%, transparent); }

/* === how-it-works: bottom CTA button → different colour (cyan→violet) === */
@keyframes ipBtnPulseV {
  0%,100% { box-shadow: 0 6px 22px color-mix(in srgb, var(--accent-violet) 38%, transparent); }
  50%     { box-shadow: 0 6px 40px color-mix(in srgb, var(--accent-violet) 50%, transparent), 0 0 50px color-mix(in srgb, var(--accent-cyan) 24%, transparent); }
}
#hiwRoot .ip-btn { background-image: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet)); animation: ipBtnPulseV 3.5s ease-in-out infinite; }
#hiwRoot .ip-btn:hover { animation: ipBell .55s ease-in-out 2; box-shadow: 0 16px 40px color-mix(in srgb, var(--accent-violet) 50%, transparent); }

/* ============================================================================
   how-it-works: 5 steps → a LAUNCH PATH (rocket climbs a glowing trajectory
   past per-stage markers). Existing tokens / motion only.
   ============================================================================ */
#hiwRoot .ip-steps { position: relative; padding-top: .5rem; }

/* rocket that continuously climbs the trajectory column (start side) */
.ip-launch-rocket {
  position: absolute; top: 0; inset-inline-start: 0; width: 58px; text-align: center;
  z-index: 4; pointer-events: none; font-size: 1.45rem; color: var(--accent-amber);
  filter: drop-shadow(0 0 10px var(--accent-amber-glow));
  animation: hiwClimb 4.6s cubic-bezier(.45,0,.55,1) infinite;
}
.ip-launch-rocket .fa-rocket { display: inline-block; transform: rotate(-45deg); }
.ip-launch-rocket::after {  /* thrust flame trailing below the rocket */
  content: ''; position: absolute; top: 72%; left: 50%; transform: translateX(-50%);
  width: 11px; height: 30px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,228,130,.95), rgba(249,115,22,.55) 45%, transparent 78%);
  filter: blur(3px); animation: hiwFlame .16s ease-in-out infinite alternate;
}
@keyframes hiwClimb { 0% { top: calc(100% - 66px); opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 100% { top: -20px; opacity: 0; } }
@keyframes hiwFlame { from { transform: translateX(-50%) scaleY(.75); opacity: .6; } to { transform: translateX(-50%) scaleY(1.35); opacity: 1; } }

/* round glowing per-stage markers with a gentle staggered pulse */
#hiwRoot .ip-step-num {
  border-radius: 50%;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--sc, var(--accent-cyan)) 78%, #05070d), color-mix(in srgb, var(--sc, var(--accent-cyan)) 52%, #05070d));
  border: 2px solid color-mix(in srgb, #fff 38%, var(--sc, var(--accent-cyan)));
  color: #fff; animation: hiwMarker 3s ease-in-out infinite; animation-delay: calc(var(--si, 1) * .25s);
  transition: transform .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes hiwMarker {
  0%,100% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--sc, var(--accent-cyan)) 12%, transparent), 0 0 18px color-mix(in srgb, var(--sc, var(--accent-cyan)) 38%, transparent); }
  50%     { box-shadow: 0 0 0 9px color-mix(in srgb, var(--sc, var(--accent-cyan)) 16%, transparent), 0 0 32px color-mix(in srgb, var(--sc, var(--accent-cyan)) 65%, transparent); }
}
#hiwRoot .ip-step-title { transition: color .3s; }
#hiwRoot .ip-step:hover .ip-step-num { transform: scale(1.14) rotate(-4deg); }
#hiwRoot .ip-step:hover .ip-step-title { color: var(--sc, var(--accent-cyan)); }

/* trajectory line glows; an energy spark rises along it toward the rocket */
#hiwRoot .ip-step:not(:last-child) .ip-step-num::after {
  width: 3px; border-radius: 3px;
  background: linear-gradient(var(--sc, var(--accent-cyan)), color-mix(in srgb, var(--sc, var(--accent-cyan)) 22%, transparent));
  box-shadow: 0 0 9px color-mix(in srgb, var(--sc, var(--accent-cyan)) 50%, transparent);
}
#hiwRoot .ip-step:not(:last-child) .ip-step-num::before {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 7px; height: 7px; border-radius: 50%; z-index: 2;
  background: #fff; box-shadow: 0 0 10px 2px var(--sc, var(--accent-cyan));
  animation: hiwSpark 2.6s linear infinite; animation-delay: calc(var(--si, 1) * .35s);
}
@keyframes hiwSpark { 0% { top: calc(100% + 2.2rem - 10px); opacity: 0; } 18% { opacity: 1; } 82% { opacity: 1; } 100% { top: 58px; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .ip-launch-rocket { display: none; }
  #hiwRoot .ip-step-num, #hiwRoot .ip-step-num::before { animation: none !important; }
}
@media (max-width: 560px) { .ip-launch-rocket { width: 50px; } }

/* match the home glow-button frame (12px, not a full stadium) */
.ip-label, .ip-tag { border-radius: 12px; }
#hiwRoot .ip-h1 { border-radius: 12px; }
/* ensure the timeline heading has no underline accent */
.ip-head-btn .ip-h2 { text-decoration: none !important; border-bottom: 0 !important; }
.ip-head-btn .ip-h2::after, .ip-head-btn .ip-h2::before { content: none !important; }

/* ============================================================================
   how-it-works "journey" — wide zigzag (desktop) / stacked rail (tablet+mobile);
   cards alternate sides joined by a flowing path the rocket flies (motion-path).
   ============================================================================ */
.hiw-zz { position: relative; width: 920px; max-width: 100%; height: 1080px; margin: 0 auto; }
.hiw-zz-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; overflow: visible; }
.hiw-zz-base { stroke: var(--glass-border); stroke-width: 2.5; }
.hiw-zz-dash { stroke: var(--accent-cyan); stroke-width: 4; stroke-dasharray: 1.5 14; stroke-linecap: round; opacity: .85; animation: hiwDashFlow 1.3s linear infinite; }
@keyframes hiwDashFlow { to { stroke-dashoffset: -15.5; } }

.hiw-zz-step { position: absolute; top: var(--top); width: 400px; height: 200px; display: flex; align-items: center; z-index: 1; }
.hiw-zz-r { right: 0; }
.hiw-zz-l { left: 0; }
.hiw-zz-num {
  position: absolute; top: 18px; z-index: 3;
  width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 1.28rem; color: #fff; background: var(--jc);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--jc) 13%, transparent), 0 8px 20px color-mix(in srgb, var(--jc) 45%, transparent);
  transition: transform .3s;
}
.hiw-zz-r .hiw-zz-num { left: -26px; }
.hiw-zz-l .hiw-zz-num { right: -26px; }
.hiw-zz-step:hover .hiw-zz-num { transform: scale(1.08) rotate(-4deg); }
.hiw-zz-card {
  flex: 1; position: relative; overflow: hidden; border-radius: 18px; padding: 1.45rem 1.7rem;
  background: var(--surface-elevated); border: 1px solid var(--glass-border);
  box-shadow: 0 14px 34px rgba(0,0,0,.28); transition: transform .3s, border-color .3s, box-shadow .3s;
}
.hiw-zz-r .hiw-zz-card { padding-inline-end: 2.7rem; }
.hiw-zz-l .hiw-zz-card { padding-inline-start: 2.7rem; }
.hiw-zz-card::before { content:''; position:absolute; inset-block:0; width:3px; background:var(--jc); }
.hiw-zz-r .hiw-zz-card::before { inset-inline-end: 0; }
.hiw-zz-l .hiw-zz-card::before { inset-inline-start: 0; }
.hiw-zz-step:hover .hiw-zz-card { transform: translateY(-4px); border-color: color-mix(in srgb, var(--jc) 42%, transparent); box-shadow: 0 18px 42px color-mix(in srgb, var(--jc) 18%, transparent); }
.hiw-zz-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem; }
.hiw-zz-ic { flex-shrink: 0; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 1.35rem; color: var(--jc); background: color-mix(in srgb, var(--jc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--jc) 26%, transparent); }
.hiw-zz-title { font-family: var(--font-display); font-weight: 700; font-size: 1.42rem; color: var(--heading-color); margin: 0; line-height: 1.2; }
.hiw-zz-desc { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.55; margin: 0; }

.hiw-zz-rocket {
  position: absolute; top: 0; left: 0; z-index: 4;
  font-size: 1.95rem; color: var(--accent-cyan); line-height: 1;
  offset-path: path("M 520 25 L 520 100 C 520 210 400 206 400 316 S 520 420 520 532 S 400 636 400 748 S 520 852 520 964 L 520 1050");
  offset-rotate: 0deg; offset-distance: 0%;
  animation: hiwFly 9s linear infinite, hiwHue 9s linear infinite;
}
.hiw-zz-rocket .fa-rocket { display: block; transform: rotate(135deg); filter: drop-shadow(0 0 11px currentColor); }
@keyframes hiwFly { 0%{offset-distance:0%;opacity:0} 5%{opacity:1} 93%{opacity:1} 100%{offset-distance:100%;opacity:0} }
@keyframes hiwHue {
  0%,14%   { color: var(--accent-cyan); }
  24%,34%  { color: var(--accent-amber); }
  44%,54%  { color: var(--accent-violet); }
  64%,74%  { color: var(--accent-emerald); }
  86%,100% { color: var(--accent-pink); }
}

@media (prefers-reduced-motion: reduce) { .hiw-zz-dash, .hiw-zz-rocket, .hiw-zz-rocket::after { animation: none; } .hiw-zz-rocket { offset-distance: 3%; } }

/* mobile — stacked numbered cards on a STRAIGHT vertical rail; the rocket
   descends the rail in a straight line, changing colour at each step. */
@media (max-width: 999px) {
  .hiw-zz { position: relative; width: 100%; max-width: 560px; height: auto; display: flex; flex-direction: column; gap: 1.5rem; padding-top: 4px; }
  .hiw-zz-svg, .hiw-zz::before { display: none; }
  #hiwRoot .ip-reveal:has(.hiw-zz) { padding-block: 1.9rem; }
  /* only the rocket rides down the cards' right-edge line — no dashes */
  .hiw-zz-rocket {
    display: block !important; offset-path: none; offset-rotate: 0deg;
    inset-inline-start: 2px; left: auto; top: 0; transform: translateX(50%);
    font-size: 1.4rem; line-height: 1; z-index: 5; width: auto; height: auto;
    animation: hiwFlyV 8s linear infinite, hiwHue 8s linear infinite;
  }
  .hiw-zz-rocket .fa-rocket { display: block; transform: rotate(135deg); filter: drop-shadow(0 0 9px currentColor); }
  @keyframes hiwFlyV { 0%{top:0;opacity:0} 7%{opacity:1} 92%{opacity:1} 100%{top:calc(100% - 10px);opacity:0} }
  .hiw-zz-step { position: relative; top: auto !important; width: 100%; height: auto; padding: 0; display: block; z-index: 1; }
  .hiw-zz-r, .hiw-zz-l { right: auto; left: auto; }
  .hiw-zz-num {
    top: 1.9rem; transform: none; left: auto; right: auto; inset-inline-start: 1.35rem;
    width: 46px; height: 46px; border-radius: 13px; font-size: 1.12rem; z-index: 3;
  }
  .hiw-zz-r .hiw-zz-num, .hiw-zz-l .hiw-zz-num { left: auto; right: auto; }
  .hiw-zz-step:hover .hiw-zz-num { transform: scale(1.06); }
  .hiw-zz-card, .hiw-zz-r .hiw-zz-card, .hiw-zz-l .hiw-zz-card { padding-block: 1.95rem; padding-inline: 5.2rem 1.4rem; }
  .hiw-zz-card::before { inset-inline-start: 0; inset-inline-end: auto; width: 4px; }
}
@media (max-width: 560px) {
  .hiw-zz { gap: 1.3rem; }
  .hiw-zz-num { top: 1.65rem; width: 44px; height: 44px; font-size: 1.05rem; inset-inline-start: 1.15rem; }
  .hiw-zz-title { font-size: 1.18rem; }
  .hiw-zz-desc { font-size: .96rem; }
  .hiw-zz-card, .hiw-zz-r .hiw-zz-card, .hiw-zz-l .hiw-zz-card { padding-block: 1.7rem; padding-inline: 4.5rem 1.2rem; }
}

/* how-it-works hero robot (placed image) */
.ip-hero-robot {
  display: block; margin: 1.6rem auto 0; width: clamp(220px, 30vw, 340px); height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.40)) drop-shadow(0 0 22px rgba(103,51,209,.55)) drop-shadow(0 0 48px rgba(103,51,209,.35));
  animation: ipHeroFloat 6s ease-in-out infinite;
}
@keyframes ipHeroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) { .ip-hero-robot { animation: none; } }

/* === how-it-works fine-tuning (purple sentence, balanced buttons, float, gaps, desktop cubes) === */
/* (A) hero sub-sentence -> glowing purple */
#hiwRoot .ip-hero-text {
  color: var(--accent-violet); font-weight: 600;
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent-violet) 60%, transparent), 0 0 42px color-mix(in srgb, var(--accent-violet) 32%, transparent);
}
/* (B) balance the hero heading-button to match the timeline .ip-head-btn (no border + glow shadow + same padding/bg) */
#hiwRoot .ip-h1 {
  border: none; padding: .9rem 2rem;
  background: color-mix(in srgb, var(--gb) 15%, transparent);
  box-shadow: 0 8px 30px -10px color-mix(in srgb, var(--gb) 45%, transparent);
}
/* (C) robot floats more noticeably */
@keyframes ipHeroFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-26px); } }
.ip-hero-robot { animation-duration: 5.2s; }
/* (D) tighten the gaps around the journey (closer to the robot + before the timeline) */
#hiwRoot .ip-hero { padding-bottom: 1rem; }
#hiwRoot .ip-reveal:has(.hiw-zz) { padding-block: 2rem; }
#hiwRoot .ip-reveal:has(.ip-timeline) { padding-top: 2.4rem; }
/* (E) bigger cubes on desktop only (mobile/tablet layout untouched) */
@media (min-width: 1000px) {
  .hiw-zz-step { width: 435px; }
  .hiw-zz-title { font-size: 1.5rem; }
  .hiw-zz-desc { font-size: 1.1rem; }
  .hiw-zz-card { padding: 1.6rem 1.9rem; }
}

/* hero sentence expands on hover; robot pushed lower so it won't touch the grown text */
#hiwRoot .ip-hero-text { transition: transform .35s cubic-bezier(.34,1.56,.64,1); transform-origin: center; }
#hiwRoot .ip-hero-text:hover { transform: scale(1.06); }
.ip-hero-robot { margin-top: 3.3rem; }

/* about problem-cube break effect lives in the consolidated block at the end of this file
   (the two halves must be SIBLINGS — an ancestor clip-path clips its whole subtree). */

/* ===== about robot: drop the round cyan "frame" → product-style purple aura + indigo silhouette glow + stronger float ===== */
.ip-roby-robot::before { width: 80%; height: 80%; background: radial-gradient(circle, rgba(103,51,209,.42), transparent 72%); }
.ip-roby-robot img {
  filter: drop-shadow(0 26px 44px rgba(0,0,0,.42)) drop-shadow(0 0 24px rgba(103,51,209,.62)) drop-shadow(0 0 54px rgba(103,51,209,.4)) !important;
  animation: ipRobyFloat 5s ease-in-out infinite !important;
}
@keyframes ipRobyFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@media (prefers-reduced-motion: reduce) { .ip-roby-robot img { animation: none !important; } }

/* ===== about (2026-06-29): remove the glow circle around Roby; each section's whole
   heading is now the coloured glow-button (the small label pills were removed). ===== */
.ip-roby-robot::before { display: none !important; }   /* the reddish/purple circle around Roby — gone */
/* kill the global h2 red border-bottom on the heading-buttons (the "orange line") */
.ip-head-btn .ip-h1, .ip-head-btn .ip-roby-h, .ip-head-btn .ip-h2 { margin: 0 !important; border-bottom: 0 !important; padding-bottom: 0 !important; }
.ip-head-btn-hero { display: block; max-width: min(92vw, 34rem); margin: 0 auto 1.3rem; }
.ip-head-btn-hero .ip-h1 { max-width: none; }
.ip-head-btn-roby { margin-bottom: 1rem; text-align: start; }

/* ============================================================================
   about cubes (REVISED v3) — each pill is a SOLID cube that, in turn, CRACKS down
   the middle into TWO jagged halves that tumble apart and fall like Lego, looping.
   `.ip-prob` is just an UNCLIPPED sizing wrapper; the two `.ip-prob-face` copies are
   SIBLINGS — so neither clips the other. (An ancestor clip-path clips its whole
   subtree, which is why the old parent+child clone never split into two.)
   ============================================================================ */
.ip-prob-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; max-width: 740px; }
.ip-prob:nth-child(1){--pc:var(--accent-cyan)} .ip-prob:nth-child(2){--pc:var(--accent-violet)} .ip-prob:nth-child(3){--pc:var(--accent-emerald)}
.ip-prob:nth-child(4){--pc:var(--accent-amber)} .ip-prob:nth-child(5){--pc:var(--accent-pink)} .ip-prob:nth-child(6){--pc:var(--secondary-color)}
/* wrapper must be a plain BLOCK (not the inherited flex) so the in-flow left face
   fills the full column width — otherwise it shrinks to its text and the two halves
   are clipped from different-width boxes and don't meet at the seam. */
.ip-prob { display: block !important; position: relative; background: transparent !important; border: 0 !important; padding: 0 !important; transform: none !important; }

.ip-prob-face {
  display: flex; align-items: center; gap: .6rem; white-space: nowrap; font-size: .95rem; font-weight: 600;
  width: 100%; box-sizing: border-box;
  padding: .6rem 1rem; border-radius: 13px; color: var(--text-color); backface-visibility: hidden;
  background: color-mix(in srgb, var(--pc, var(--accent-cyan)) 13%, var(--glass-bg));
  border: 1px dashed color-mix(in srgb, var(--pc, var(--accent-cyan)) 48%, transparent);
}
.ip-prob-face-l { position: relative; z-index: 1; }            /* in normal flow → gives the wrapper its size */
.ip-prob-face-r { position: absolute; inset: 0; z-index: 2; }  /* identical copy stacked exactly on top */
.ip-prob-face .ip-prob-ic { width: 32px !important; height: 32px !important; font-size: .95rem !important; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--pc) !important; background: color-mix(in srgb, var(--pc) 16%, transparent) !important; }

/* solid until ~55%, then both halves snap to complementary jagged seams and tumble away */
.ip-prob-face-l { animation: ipProbBreakL 6.5s cubic-bezier(.45,.03,.5,.96) infinite; }
.ip-prob-face-r { animation: ipProbBreakR 6.5s cubic-bezier(.45,.03,.5,.96) infinite; }
.ip-prob:nth-child(1) .ip-prob-face { animation-delay: 0s; }
.ip-prob:nth-child(2) .ip-prob-face { animation-delay: .45s; }
.ip-prob:nth-child(3) .ip-prob-face { animation-delay: .9s; }
.ip-prob:nth-child(4) .ip-prob-face { animation-delay: 1.35s; }
.ip-prob:nth-child(5) .ip-prob-face { animation-delay: 1.8s; }
.ip-prob:nth-child(6) .ip-prob-face { animation-delay: 2.25s; }
/* LEFT half — jagged right edge; tips and drops down-left */
@keyframes ipProbBreakL {
  0%, 55% { clip-path: inset(0 round 13px); transform: translate(0,0) rotate(0); opacity: 1; }
  56%     { clip-path: polygon(0 0, 48% 0, 54% 22%, 45% 44%, 53% 66%, 46% 88%, 49% 100%, 0 100%); transform: translate(0,0) rotate(0); opacity: 1; }
  100%    { clip-path: polygon(0 0, 48% 0, 54% 22%, 45% 44%, 53% 66%, 46% 88%, 49% 100%, 0 100%); transform: translate(-30px, 72px) rotate(-15deg); opacity: 0; }
}
/* RIGHT half — matching jagged left edge; tips and drops a little further down-right */
@keyframes ipProbBreakR {
  0%, 55% { clip-path: inset(0 round 13px); transform: translate(0,0) rotate(0); opacity: 1; }
  56%     { clip-path: polygon(48% 0, 100% 0, 100% 100%, 49% 100%, 46% 88%, 53% 66%, 45% 44%, 54% 22%); transform: translate(0,0) rotate(0); opacity: 1; }
  100%    { clip-path: polygon(48% 0, 100% 0, 100% 100%, 49% 100%, 46% 88%, 53% 66%, 45% 44%, 54% 22%); transform: translate(32px, 92px) rotate(13deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ip-prob-face { animation: none !important; clip-path: none !important; }
  .ip-prob-face-r { display: none !important; }
}

/* ============================================================================
   about heading-buttons (v2) — each section heading is a full sentence inside the
   glow-button. Spread it across the button so it wraps to ~2 BALANCED lines at a
   consistent, roomy width on desktop, instead of being crammed narrow into 3 lines.
   ============================================================================ */
#aboutRoot .ip-head-btn { display: block; width: fit-content; max-width: min(94vw, 47rem); margin-inline: auto; padding: 1rem 2.2rem; }
#aboutRoot .ip-head-btn-roby { margin-inline: 0; }   /* Roby heading stays start-aligned in its column */
#aboutRoot .ip-head-btn .ip-h1,
#aboutRoot .ip-head-btn .ip-h2,
#aboutRoot .ip-head-btn .ip-roby-h { text-wrap: balance; line-height: 1.3; max-width: none; }
#aboutRoot .ip-head-btn-hero { max-width: min(94vw, 47rem); margin-bottom: 1.3rem; }
#aboutRoot .ip-head-btn-hero .ip-h1 { font-size: clamp(1.5rem, 3.1vw, 2.25rem); }
#aboutRoot .ip-head-btn .ip-h2 { font-size: clamp(1.3rem, 2.6vw, 1.9rem); }
#aboutRoot .ip-roby-h { font-size: clamp(1.35rem, 2.5vw, 1.85rem); }

/* about: Roby section → vertical stack (heading-button on top → floating robot → text below) */
#aboutRoot .ip-roby-stack { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
#aboutRoot .ip-roby-stack .ip-head-btn-roby { max-width: 700px; }
#aboutRoot .ip-roby-stack .ip-roby-p { max-width: 60ch; margin: -1.4rem auto 0; }  /* pull the sentence up ~1 row, closer to the robot (user) */

/* about hero heading → solid ORANGE button (the site's warm contact/brand orange) */
#aboutRoot .ip-head-btn-hero { background: linear-gradient(135deg, var(--accent-orange), var(--accent-amber)); border-color: transparent; box-shadow: 0 14px 38px -10px var(--accent-orange-glow); }
#aboutRoot .ip-head-btn-hero .ip-h1 { color: #fff; }

/* ── About spacing + Roby-sentence glow (user request) ── */
/* stronger, more saturated canonical-Roby-purple glow on the sentence under the robot (match the robot's aura) */
#aboutRoot .ip-roby-p { text-shadow: 0 0 8px rgba(103,51,209,.95), 0 0 22px rgba(103,51,209,.82), 0 0 48px rgba(103,51,209,.62), 0 0 90px rgba(103,51,209,.42); }
#aboutRoot .ip-roby-p:hover { text-shadow: 0 0 10px rgba(103,51,209,1), 0 0 32px rgba(103,51,209,.95), 0 0 66px rgba(103,51,209,.72), 0 0 112px rgba(103,51,209,.52); }
/* HERO paragraph under the orange heading button: WHITE text + strong glow in the YELLOW/amber tone
   of the primary button above it (#f59e0b) — NOT purple (user request). */
#aboutRoot .ip-hero-text { color: var(--heading-color); text-shadow: 0 0 8px rgba(245,158,11,.95), 0 0 22px rgba(245,158,11,.82), 0 0 48px rgba(245,158,11,.62), 0 0 90px rgba(245,158,11,.42); }
/* tighten hero-sentences → belief box ("אנחנו מאמינים") gap by ~2 rows */
#aboutRoot section:nth-of-type(2) { padding-top: 1.8rem; }
/* tighten Roby-sentence → CTA box ("הצמיחה הבאה") gap by ~2 rows */
#aboutRoot .ip-roby { padding-bottom: 1.5rem; }

/* Roby heading → ONE line on desktop (override the earlier balance/max-width that forced 2 lines) */
#aboutRoot .ip-roby-stack .ip-head-btn-roby { max-width: none; }
#aboutRoot .ip-head-btn .ip-roby-h { white-space: nowrap; text-wrap: nowrap; font-size: clamp(1.3rem, 2.3vw, 1.7rem); }

/* hero heading ("כל עסק ראוי לצוות…") → ONE line on desktop (the \n collapses to a space);
   button hugs its own text so its width stays dynamic. Mobile override below splits it back to 2 lines. */
#aboutRoot .ip-head-btn-hero { width: fit-content; max-width: 94vw; }
#aboutRoot .ip-head-btn-hero .ip-h1 { white-space: nowrap; }

@media (max-width: 680px) {
  #aboutRoot .ip-head-btn .ip-roby-h { white-space: normal; text-wrap: balance; }
  #aboutRoot .ip-roby-stack .ip-head-btn-roby { max-width: 94%; }
  /* mobile: split the hero heading at the \n into 2 stacked sentences; button sizes to them */
  #aboutRoot .ip-head-btn-hero .ip-h1 { white-space: pre-line; }
}