/* ─── MYM ALALI · homepage.css (V4) ───────────────────────────────────────
   Dark cinematic studio system. Blue = technology, violet/cyan = AI depth,
   gold = MYM ALALI signature accent (never dominant).
   ───────────────────────────────────────────────────────────────────── */

:root {
  --bg: #0C111B;
  --bg-hero: #05070B;
  --bg-blue: #0F1728;
  --bg-alt: #121926;
  --surface: #182132;
  --border: rgba(255,255,255,0.09);
  --border-soft: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.14);
  --text: #F8FAFC;
  --text-dim: #A7B0BE;
  --text-faint: rgba(156,163,175,0.7);

  --blue: #2563EB;
  --blue-2: #3B82F6;
  --cyan: #22D3EE;
  --violet: #7C3AED;
  --gold: #D39A45;
  --orange: #F59E0B;

  --glow-blue: 0 0 0 1px rgba(59,130,246,0.2), 0 30px 80px -30px rgba(37,99,235,0.6);
  --glow-violet: 0 0 0 1px rgba(124,58,237,0.22), 0 30px 80px -30px rgba(124,58,237,0.55);

  --radius-l: 20px;
  --max: 1180px;
  --maxw: 1320px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

html { background: var(--bg); overflow-x: clip; }
.mh { font-family: 'Tajawal', sans-serif; overflow-x: hidden; }
.mh, .mh * { box-sizing: border-box; }
.mh section { background: transparent; }

.mh-container { max-width: var(--max); margin-inline: auto; padding-inline: 24px; }
.mh-container-wide { max-width: var(--maxw); margin-inline: auto; padding-inline: 24px; }
.mh-section { padding-block: clamp(56px, 7vw, 104px); position: relative; }
.mh-section-tight { padding-block: clamp(40px, 5vw, 68px); position: relative; }

.mh .mh-band, .mh-band { background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }

.mh-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.1em; color: var(--gold); text-transform: uppercase; margin-bottom: 12px; }
.mh-eyebrow::before { content: ''; width: 16px; height: 1px; background: var(--gold); }

.mh-h2 { font-size: clamp(1.75rem, 3vw, 2.45rem); font-weight: 800; line-height: 1.22; letter-spacing: -0.012em; color: var(--text); margin: 0 0 12px; }
.mh-lede { font-size: 0.98rem; line-height: 1.75; color: var(--text-dim); max-width: 560px; margin: 0; }
.mh-accent { color: var(--gold); }

.mh-sec-head { max-width: 640px; margin-bottom: 40px; }
.mh-sec-head-center { text-align: center; margin-inline: auto; }
.mh-sec-head-center .mh-eyebrow::before { display: none; }
.mh-sec-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
.mh-sec-head-row .mh-h2 { margin-bottom: 0; }

/* ── Buttons ── */
.mh-btn { display: inline-flex; align-items: center; gap: 9px; font-family: inherit; font-weight: 700; font-size: 0.93rem; padding: 13px 26px; border-radius: 999px; text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: transform .3s var(--ease), box-shadow .3s ease, border-color .25s ease, color .25s ease; }
.mh-btn-primary { background: linear-gradient(135deg, var(--blue), var(--blue-2)); color: #fff; box-shadow: 0 10px 30px -10px rgba(37,99,235,0.7), inset 0 1px 0 rgba(255,255,255,0.18); }
.mh-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 16px 40px -12px rgba(59,130,246,0.85), inset 0 1px 0 rgba(255,255,255,0.2); }
.mh-btn-outline { background: rgba(255,255,255,0.03); color: var(--text); border-color: var(--border-strong); }
.mh-btn-outline:hover { border-color: rgba(211,154,69,0.55); color: var(--gold); }
.mh-btn-sm { padding: 9px 18px; font-size: 0.84rem; }
.mh-btn i { font-size: 0.85em; }
.mh-link { font-size: 0.86rem; font-weight: 700; color: var(--blue-2); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; transition: color .2s ease; }
.mh-link:hover { color: var(--cyan); }
[dir="ltr"] .mh-link .fa-arrow-left, [dir="ltr"] .mh-price-card a .fa-arrow-left { transform: scaleX(-1); }

/* ── Nav ── */
.mh-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(5,7,11,0.55); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid var(--border-soft); }
.mh-nav-row { display: flex; align-items: center; justify-content: space-between; padding-block: 14px; gap: 12px; }
.mh-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.mh-logo-mark { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; border: 1.5px solid rgba(211,154,69,0.55); flex-shrink: 0; }
.mh-logo-mark img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.mh-logo-word { font-weight: 900; font-size: 1.02rem; color: var(--text); letter-spacing: 0.02em; }
.mh-logo-tag { display: none; }
.mh-nav-links { display: none; align-items: center; gap: 24px; }
@media (min-width: 960px) { .mh-nav-links { display: flex; } }
.mh-nav-link { font-size: 0.86rem; font-weight: 500; color: var(--text-dim); text-decoration: none; transition: color .2s ease; white-space: nowrap; }
.mh-nav-link:hover { color: var(--text); }
.mh-nav-right { display: flex; align-items: center; gap: 10px; }
.mh-lang-btn { background: transparent; border: 1px solid var(--border-strong); color: var(--text-dim); font-size: 0.8rem; font-weight: 700; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-family: inherit; transition: all .2s ease; }
.mh-lang-btn:hover { color: var(--text); border-color: rgba(255,255,255,0.3); }
.mh-nav-cta { display: none; }
@media (min-width: 960px) { .mh-nav-cta { display: inline-flex; } }
.mh-menu-toggle { display: flex; background: transparent; border: 1px solid var(--border-strong); color: var(--text); width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; cursor: pointer; }
@media (min-width: 960px) { .mh-menu-toggle { display: none; } }
.mh-mobile-menu { display: none; flex-direction: column; border-top: 1px solid var(--border-soft); padding-block: 8px; }
.mh-mobile-menu.open { display: flex; }
.mh-mobile-menu a { padding: 12px 4px; color: var(--text-dim); text-decoration: none; font-size: 0.95rem; border-bottom: 1px solid var(--border-soft); }
.mh-mobile-menu a:last-child { border-bottom: none; }

/* ═══════════════ HERO ═══════════════ */
.mh-hero { background: var(--bg-hero); box-shadow: 0 0 0 100vmax var(--bg-hero); clip-path: inset(0 -100vmax); position: relative; min-height: 90vh; display: flex; align-items: center; padding-top: 96px; padding-bottom: 40px; isolation: isolate; }
.mh-hero-bg { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; z-index: -1; pointer-events: none; overflow: hidden; }
.mh-hero-bg::before { content: ''; position: absolute; inset: 0;
  background: radial-gradient(38% 50% at 64% 40%, rgba(37,99,235,0.26), transparent 70%), radial-gradient(26% 34% at 72% 74%, rgba(124,58,237,0.22), transparent 70%); }
[dir="rtl"] .mh-hero-bg::before {
  background: radial-gradient(38% 50% at 36% 40%, rgba(37,99,235,0.26), transparent 70%), radial-gradient(26% 34% at 28% 74%, rgba(124,58,237,0.22), transparent 70%); }
.mh-hero-bg::after { content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(40% 60% at 50% 45%, #000 10%, transparent 75%); mask-image: radial-gradient(40% 60% at 50% 45%, #000 10%, transparent 75%); }
.mh-hero-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 1040px) { .mh-hero-grid { grid-template-columns: 43fr 57fr; gap: 16px; } }

.mh-hero-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; color: var(--gold); letter-spacing: 0.06em; border: 1px solid rgba(211,154,69,0.3); background: rgba(211,154,69,0.07); padding: 6px 14px; border-radius: 999px; margin-bottom: 22px; }
.mh-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); font-weight: 900; line-height: 1.14; letter-spacing: -0.02em; margin: 0 0 20px; max-width: 16ch; color: var(--text); }
[dir="rtl"] .mh-hero h1 { line-height: 1.32; letter-spacing: 0; }
.mh-hero-sub { font-size: 1.06rem; line-height: 1.7; color: var(--text-dim); max-width: 470px; margin: 0 0 30px; }
.mh-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }
.mh-credibility-strip { display: flex; flex-wrap: wrap; align-items: center; row-gap: 10px; padding-top: 22px; border-top: 1px solid var(--border-soft); max-width: 520px; }
.mh-cred-item { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); padding-inline-end: 16px; margin-inline-end: 16px; border-inline-end: 1px solid var(--border); }
.mh-cred-item:last-child { border: none; margin: 0; padding: 0; }
.mh-cred-item i { color: var(--gold); font-size: 0.72rem; }

/* Hero stage — layered product windows */
.hp-stage { position: relative; height: clamp(440px, 44vw, 600px); perspective: 1600px; }
@media (min-width: 1040px) { .hp-stage { margin-inline-end: calc(-1 * clamp(0px, 5vw, 90px)); } }
.hp-layer { position: absolute; will-change: transform; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); transition: transform .8s var(--ease), opacity 1s var(--ease); }
.hp-card { position: relative; border-radius: 18px; overflow: hidden; background: var(--surface); border: 1px solid rgba(255,255,255,0.09); box-shadow: 0 40px 80px -30px rgba(0,0,0,0.8); }
.hp-drift { animation: hp-drift 10s ease-in-out infinite alternate; }
@keyframes hp-drift { from { translate: 0 0; } to { translate: 0 -8px; } }

.hp-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); direction: ltr; }
.hp-win-bar i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.14); display: block; }
.hp-win-title { margin-left: 8px; font-size: 0.66rem; font-weight: 800; color: var(--text-dim); letter-spacing: 0.1em; }
.hp-win-tag { margin-left: auto; font-size: 0.6rem; font-weight: 700; color: #93c5fd; letter-spacing: 0.06em; }

/* dashboard (shared by hero + NEXORA feature) */
.hp-dash { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; padding: 14px; direction: ltr; }
.hp-kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-kpis span { height: 42px; border-radius: 10px; border: 1px solid var(--border-soft); background: rgba(255,255,255,0.02); position: relative; }
.hp-kpis span::before { content: ''; position: absolute; left: 10px; top: 10px; width: 40%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.12); }
.hp-kpis span::after { content: ''; position: absolute; left: 10px; bottom: 10px; width: 55%; height: 8px; border-radius: 3px; background: linear-gradient(90deg, var(--k, var(--blue-2)), transparent); }
.hp-kpis span:nth-child(2) { --k: var(--cyan); }
.hp-kpis span:nth-child(3) { --k: var(--violet); }
.hp-dash-chart { height: 130px; border-radius: 12px; background: linear-gradient(180deg, rgba(37,99,235,0.12), rgba(37,99,235,0)); border: 1px solid var(--border-soft); position: relative; overflow: hidden; }
.hp-dash-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hp-dash-side { display: flex; flex-direction: column; gap: 12px; }
.hp-donut { height: 70px; border-radius: 12px; border: 1px solid var(--border-soft); display: flex; align-items: center; justify-content: center; }
.hp-donut span { width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(var(--cyan) 0 38%, var(--blue-2) 38% 70%, var(--violet) 70% 88%, rgba(255,255,255,0.08) 88%); -webkit-mask: radial-gradient(circle, transparent 52%, #000 54%); mask: radial-gradient(circle, transparent 52%, #000 54%); }
.hp-lines { flex: 1; min-height: 48px; border-radius: 12px; border: 1px solid var(--border-soft); padding: 10px; display: flex; flex-direction: column; gap: 7px; justify-content: center; }
.hp-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); }
.hp-lines i:nth-child(1) { width: 90%; background: linear-gradient(90deg, var(--blue-2), rgba(59,130,246,0.2)); }
.hp-lines i:nth-child(2) { width: 64%; }
.hp-lines i:nth-child(3) { width: 78%; background: linear-gradient(90deg, var(--cyan), rgba(34,211,238,0.15)); }
.hp-dash-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 6px; height: 46px; }
.hp-dash-bars span { flex: 1; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, rgba(59,130,246,0.85), rgba(59,130,246,0.08)); }
.hp-dash-bars span:nth-child(3n) { background: linear-gradient(180deg, rgba(124,58,237,0.85), rgba(124,58,237,0.08)); }

/* L1 NEXORA (back) */
.hp-l1 { top: 2%; inset-inline-end: 0; width: 74%; z-index: 1; }
.hp-l1 .hp-card { transform: perspective(1600px) rotateY(-12deg) rotateX(5deg); box-shadow: var(--glow-blue); opacity: 0.94; }
[dir="rtl"] .hp-l1 .hp-card { transform: perspective(1600px) rotateY(12deg) rotateX(5deg); }
/* L2 Mihrabi */
.hp-l2 { top: 34%; inset-inline-start: 0; width: 33%; z-index: 2; }
.hp-l2 .hp-card { transform: rotate(-4deg); box-shadow: 0 0 0 1px rgba(211,154,69,0.28), 0 30px 70px -28px rgba(211,154,69,0.45); }
[dir="rtl"] .hp-l2 .hp-card { transform: rotate(4deg); }
.hp-l2 img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; }
/* L3 VoxNotiq */
.hp-l3 { bottom: 4%; inset-inline-end: 3%; width: 40%; z-index: 3; }
.hp-l3 .hp-card { background: linear-gradient(160deg, #1b1033, #10141D 72%); padding: 16px; transform: rotate(3deg); box-shadow: var(--glow-violet); }
[dir="rtl"] .hp-l3 .hp-card { transform: rotate(-3deg); }
.hp-vox-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.hp-vox-head img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.hp-vox-head b { font-size: 0.82rem; color: var(--text); display: block; }
.hp-vox-head small { font-size: 0.66rem; color: #c4a6ff; display: block; }
.hp-wave, .mh-art-wave { display: flex; align-items: center; gap: 3px; height: 40px; direction: ltr; }
.hp-wave span, .mh-art-wave span { flex: 1; border-radius: 3px; background: linear-gradient(180deg, #e879f9, #7C3AED 60%, #3B82F6); }
.hp-wave span:nth-child(5n+1), .mh-art-wave span:nth-child(5n+1) { height: 28%; }
.hp-wave span:nth-child(5n+2), .mh-art-wave span:nth-child(5n+2) { height: 70%; }
.hp-wave span:nth-child(5n+3), .mh-art-wave span:nth-child(5n+3) { height: 100%; }
.hp-wave span:nth-child(5n+4), .mh-art-wave span:nth-child(5n+4) { height: 52%; }
.hp-wave span:nth-child(5n), .mh-art-wave span:nth-child(5n) { height: 36%; }
/* L4 Chatrio (front) */
.hp-l4 { top: 10%; inset-inline-start: 33%; width: clamp(150px, 15vw, 200px); z-index: 4; }
.hp-l4 .hp-card { border-radius: 28px; border: 6px solid #0b0e15; background: #0b0e15; transform: rotate(-2deg); box-shadow: 0 0 0 1px rgba(59,130,246,0.4), 0 40px 90px -30px rgba(37,99,235,0.8); }
[dir="rtl"] .hp-l4 .hp-card { transform: rotate(2deg); }
.hp-l4 img { display: block; width: 100%; height: auto; border-radius: 22px; }
/* L5 Sila */
.hp-l5 { top: 4%; inset-inline-start: 10%; width: 116px; z-index: 5; }
.hp-l5 .hp-card { padding: 9px 9px 8px; background: linear-gradient(160deg, #2c1712, #10141D); transform: rotate(-7deg); box-shadow: 0 0 0 1px rgba(251,146,110,0.28), 0 24px 50px -22px rgba(251,146,110,0.55); }
[dir="rtl"] .hp-l5 .hp-card { transform: rotate(7deg); }
.hp-l5 img { width: 100%; height: auto; aspect-ratio: 1/1; border-radius: 11px; display: block; object-fit: cover; }
.hp-l5 span { display: block; font-size: 0.68rem; color: #fbc7a8; margin-top: 6px; text-align: center; font-weight: 700; }

@media (max-width: 1039px) { .hp-stage { height: 480px; max-width: 640px; width: 100%; margin-inline: auto; } }
@media (max-width: 640px) {
  .mh-hero { min-height: auto; padding-top: 88px; }
  .hp-stage { height: 350px; }
  .hp-l1 { width: 88%; }
  .hp-l2 { width: 36%; top: 40%; }
  .hp-l3 { width: 56%; bottom: 0; }
  .hp-l3 .hp-card { padding: 12px; }
  .hp-l4 { width: 118px; inset-inline-start: 36%; top: 8%; }
  .hp-l5 { width: 80px; top: 0; inset-inline-start: 4%; }
  .hp-kpis { display: none; }
  .hp-dash-chart { height: 92px; }
  .hp-donut { height: 48px; }
  .hp-donut span { width: 32px; height: 32px; }
  .hp-dash-bars { height: 30px; }
}

/* ═══════════════ Core offering ═══════════════ */
.mh-offer-strip { display: grid; grid-template-columns: 1fr; border: 1px solid var(--border); border-radius: var(--radius-l); background: linear-gradient(180deg, var(--bg-alt), var(--bg)); overflow: hidden; }
@media (min-width: 860px) { .mh-offer-strip { grid-template-columns: repeat(3, 1fr); } }
.mh-offer-col { padding: 28px; border-top: 1px solid var(--border); position: relative; }
.mh-offer-col:first-child { border-top: none; }
@media (min-width: 860px) { .mh-offer-col { border-top: none; border-inline-start: 1px solid var(--border); } .mh-offer-col:first-child { border-inline-start: none; } }
.mh-offer-col::before { content: ''; position: absolute; top: 0; inset-inline: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--oc), transparent); }
.mh-offer-col:nth-child(1) { --oc: var(--blue-2); }
.mh-offer-col:nth-child(2) { --oc: var(--violet); }
.mh-offer-col:nth-child(3) { --oc: var(--gold); }
.mh-offer-num { font-size: 0.76rem; font-weight: 900; letter-spacing: 0.08em; color: var(--oc); display: block; margin-bottom: 14px; }
.mh-offer-col h3 { font-size: 1.16rem; font-weight: 800; color: var(--text); margin: 0 0 8px; }
.mh-offer-col p { font-size: 0.9rem; line-height: 1.65; color: var(--text-dim); margin: 0 0 16px; }

/* ═══════════════ Products ═══════════════ */
.mh-product-row { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding-block: 32px; }
@media (min-width: 940px) {
  .mh-product-row { grid-template-columns: 1.2fr 0.8fr; gap: 64px; }
  .mh-product-row.mh-reverse { grid-template-columns: 0.8fr 1.2fr; }
  .mh-product-row.mh-reverse .mh-product-media { order: 2; }
}
.mh-product-art { position: relative; width: 100%; aspect-ratio: 16/10; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; isolation: isolate; }
.mh-product-art::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.mh-art-chatrio { background: #070b18; border-color: rgba(59,130,246,0.25); }
.mh-art-chatrio::before { background: radial-gradient(60% 70% at 70% 30%, rgba(59,130,246,0.45), transparent 70%), radial-gradient(50% 60% at 20% 90%, rgba(124,58,237,0.4), transparent 70%); }
.mh-art-vox { background: #0e0717; border-color: rgba(217,70,239,0.22); flex-direction: column; gap: 24px; }
.mh-art-vox::before { background: radial-gradient(55% 70% at 50% 40%, rgba(217,70,239,0.34), transparent 70%), radial-gradient(40% 50% at 85% 85%, rgba(124,58,237,0.35), transparent 70%); }
.mh-art-mihrabi { background: #0d0a05; border-color: rgba(211,154,69,0.28); }
.mh-art-sila { background: #170c09; border-color: rgba(251,146,110,0.24); }
.mh-art-sila::before { background: radial-gradient(60% 70% at 45% 40%, rgba(251,146,110,0.4), transparent 70%), radial-gradient(40% 50% at 90% 90%, rgba(245,158,11,0.22), transparent 70%); }

.mh-art-icon { position: relative; z-index: 3; width: 18%; height: auto; aspect-ratio: 1/1; border-radius: 22%; object-fit: cover; box-shadow: 0 20px 40px -14px rgba(0,0,0,0.7); }
.mh-art-chatrio .mh-art-icon { position: absolute; width: 15%; bottom: 12%; inset-inline-start: 12%; }
.mh-art-phone { position: absolute; top: 8%; inset-inline-end: 20%; width: 28%; border-radius: 24px; overflow: hidden; border: 5px solid #0b0e15; transform: rotate(4deg); box-shadow: 0 0 0 1px rgba(59,130,246,0.35), 0 30px 60px -20px rgba(37,99,235,0.7); z-index: 2; }
.mh-art-phone-b { inset-inline-end: auto; inset-inline-start: 30%; top: 16%; transform: rotate(-5deg); opacity: 0.85; z-index: 1; width: 25%; }
.mh-art-phone img { width: 100%; height: auto; display: block; }
.mh-art-vox .mh-art-icon { width: 15%; box-shadow: 0 0 50px -6px rgba(217,70,239,0.6); }
.mh-art-wave { position: relative; z-index: 2; height: 56px; width: 62%; }
.mh-art-full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mh-art-mihrabi::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(13,10,5,0.6)); pointer-events: none; }
.mh-polaroid { position: absolute; width: 26%; aspect-ratio: 4/5; background: #fff6f0; border-radius: 10px; padding: 7px 7px 20px; box-shadow: 0 24px 44px -18px rgba(0,0,0,0.7); }
.mh-polaroid-a { transform: rotate(-12deg) translate(-44%, 6%); background: #ffe3d3; }
.mh-polaroid-b { transform: rotate(10deg) translate(44%, -4%); background: #ffd4bd; }
.mh-polaroid-main { position: relative; z-index: 2; transform: rotate(-2deg); }
.mh-polaroid-main img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }

.mh-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: #6ee7a8; background: rgba(16,185,129,0.1); border: 1px solid rgba(16,185,129,0.28); padding: 4px 10px; border-radius: 999px; }
.mh-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.mh-status-dev { color: #93c5fd; background: rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.3); }
.mh-status-dev::before { background: var(--blue-2); }
.mh-status-proto { color: #a5f3fc; background: rgba(34,211,238,0.08); border-color: rgba(34,211,238,0.3); }
.mh-status-proto::before { background: var(--cyan); }
.mh-status-concept { color: var(--text-dim); background: rgba(255,255,255,0.04); border-color: var(--border-strong); }
.mh-status-concept::before { background: var(--text-faint); }

.mh-product-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mh-product-kicker { font-size: 0.74rem; font-weight: 700; color: var(--text-faint); letter-spacing: 0.04em; }
.mh-product-name { font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 900; color: var(--text); margin: 0 0 10px; }
.mh-product-desc { font-size: 0.95rem; line-height: 1.72; color: var(--text-dim); margin: 0 0 22px; max-width: 440px; }
.mh-product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mh-product-links { display: flex; align-items: center; gap: 12px; font-size: 0.78rem; flex-wrap: wrap; }
.mh-product-links a { color: var(--text-faint); text-decoration: none; transition: color .2s ease; }
.mh-product-links a:hover { color: var(--text); }
.mh-p-chatrio .mh-btn-primary { background: linear-gradient(135deg, #2563EB, #7C3AED); }
.mh-p-vox .mh-btn-primary { background: linear-gradient(135deg, #7C3AED, #c026d3); box-shadow: 0 10px 30px -10px rgba(192,38,211,0.6); }
.mh-p-mihrabi .mh-btn-primary { background: linear-gradient(135deg, #b98336, #D39A45); color: #120d05; box-shadow: 0 10px 30px -10px rgba(211,154,69,0.55); }
.mh-p-sila .mh-btn-primary { background: linear-gradient(135deg, #f0785a, #fb926e); color: #1c0c07; box-shadow: 0 10px 30px -10px rgba(251,146,110,0.55); }

/* ═══════════════ Platforms ═══════════════ */
.mh-platforms::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(50% 40% at 50% 0%, rgba(37,99,235,0.14), transparent 70%); }
.mh-platform-feature { position: relative; display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 28px; border-radius: var(--radius-l); border: 1px solid rgba(59,130,246,0.24); background: linear-gradient(160deg, rgba(37,99,235,0.12), var(--surface) 55%); box-shadow: 0 40px 100px -50px rgba(37,99,235,0.7); margin-bottom: 16px; }
@media (min-width: 900px) { .mh-platform-feature { grid-template-columns: 0.75fr 1.25fr; padding: 40px 44px; gap: 44px; } }
.mh-platform-feature .hp-card { box-shadow: var(--glow-blue); }
.mh-platform-top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mh-platform-mark { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--border-strong); color: var(--blue-2); flex-shrink: 0; }
.mh-platform-kicker { font-size: 0.74rem; font-weight: 700; color: var(--text-faint); letter-spacing: 0.04em; margin-bottom: 6px; }
.mh-platform-name { font-size: 1.7rem; font-weight: 900; color: var(--text); margin: 0 0 12px; letter-spacing: 0.02em; }
.mh-platform-feature p, .mh-platform-card p { font-size: 0.93rem; line-height: 1.7; color: var(--text-dim); margin: 0 0 16px; }
.mh-plat-for { font-size: 0.82rem !important; color: var(--text-faint) !important; }
.mh-platform-secondary-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) { .mh-platform-secondary-grid { grid-template-columns: 1fr 1fr; } }
.mh-platform-card { position: relative; border-radius: var(--radius-l); padding: 24px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.mh-platform-card .mh-platform-name { font-size: 1.28rem; margin-bottom: 8px; }
.mh-plat-visual { height: 104px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--border-soft); position: relative; overflow: hidden; }
.mh-concept-note { position: absolute; top: 8px; inset-inline-end: 10px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-faint); z-index: 2; }
.mh-plat-aqar { background: linear-gradient(160deg, rgba(34,211,238,0.08), var(--surface) 60%); border-color: rgba(34,211,238,0.2); }
.mh-plat-aqar .mh-platform-mark { color: var(--cyan); }
.mh-plat-aqar .mh-plat-visual { background-color: #071217; background-image: linear-gradient(rgba(34,211,238,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,0.12) 1px, transparent 1px); background-size: 18px 18px; }
.mh-plat-aqar .mh-plat-visual i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(34,211,238,0.15), 0 0 14px var(--cyan); }
.mh-plat-aqar .mh-plat-visual i:nth-child(2) { top: 30%; left: 22%; }
.mh-plat-aqar .mh-plat-visual i:nth-child(3) { top: 60%; left: 48%; }
.mh-plat-aqar .mh-plat-visual i:nth-child(4) { top: 36%; left: 74%; background: var(--gold); box-shadow: 0 0 0 5px rgba(211,154,69,0.18), 0 0 14px var(--gold); }
.mh-plat-operix { background: linear-gradient(160deg, rgba(245,158,11,0.07), var(--surface) 60%); border-color: rgba(245,158,11,0.18); }
.mh-plat-operix .mh-platform-mark { color: var(--orange); }
.mh-plat-operix .mh-plat-visual { background: #110d06; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 10px; direction: ltr; }
.mh-plat-operix .mh-plat-visual > span:not(.mh-concept-note) { display: flex; align-items: center; gap: 8px; }
.mh-plat-operix .mh-plat-visual b { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; flex-shrink: 0; }
.mh-plat-operix .mh-plat-visual span:nth-child(3) b { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.mh-plat-operix .mh-plat-visual em { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.mh-plat-operix .mh-plat-visual em::after { content: ''; position: absolute; inset: 0; width: var(--w, 60%); background: linear-gradient(90deg, rgba(245,158,11,0.85), rgba(245,158,11,0.2)); border-radius: 3px; }

/* ═══════════════ Add-ons — capability map ═══════════════ */
.mh-addon-groups { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .mh-addon-groups { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1080px) { .mh-addon-groups { grid-template-columns: repeat(4, 1fr); } .mh-addon-group:nth-child(even) { transform: translateY(20px); } }
.mh-addon-group { position: relative; padding: 24px 22px; border-radius: var(--radius-l); background: linear-gradient(180deg, color-mix(in srgb, var(--gc) 10%, var(--surface)), var(--surface) 65%); border: 1px solid color-mix(in srgb, var(--gc) 28%, transparent); overflow: hidden; }
.mh-addon-group::before { content: ''; position: absolute; top: -40%; inset-inline-end: -30%; width: 70%; height: 80%; background: radial-gradient(circle, color-mix(in srgb, var(--gc) 30%, transparent), transparent 70%); pointer-events: none; }
.mh-addon-group:nth-child(1) { --gc: #7C3AED; }
.mh-addon-group:nth-child(2) { --gc: #22D3EE; }
.mh-addon-group:nth-child(3) { --gc: #3B82F6; }
.mh-addon-group:nth-child(4) { --gc: #D39A45; }
.mh-addon-group-icon { position: relative; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--gc); background: color-mix(in srgb, var(--gc) 14%, transparent); border: 1px solid color-mix(in srgb, var(--gc) 35%, transparent); margin-bottom: 16px; }
.mh-addon-group h4 { position: relative; font-size: 1.02rem; font-weight: 800; color: var(--text); margin: 0 0 14px; }
.mh-addon-group ul { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.mh-addon-group li { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); background: rgba(255,255,255,0.035); border: 1px solid var(--border); padding: 6px 11px; border-radius: 999px; }

/* ═══════════════ Case study ═══════════════ */
.mh-case { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
@media (min-width: 940px) { .mh-case { grid-template-columns: 0.8fr 1fr; gap: 64px; } }
.mh-case-num { font-size: clamp(4.5rem, 10vw, 7rem); font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; background: linear-gradient(180deg, rgba(59,130,246,0.6), rgba(59,130,246,0)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mh-case-name { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.14em; color: var(--gold); margin-bottom: 10px; }
.mh-case-visual { position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 4/5; max-width: 360px; margin-inline: auto; background: #070b18; border: 1px solid rgba(59,130,246,0.22); display: flex; align-items: flex-end; justify-content: center; isolation: isolate; }
.mh-case-visual::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 50% 20%, rgba(59,130,246,0.4), transparent 70%), radial-gradient(50% 40% at 50% 100%, rgba(124,58,237,0.35), transparent 70%); }
.mh-case-phone { width: 58%; border-radius: 26px 26px 0 0; overflow: hidden; border: 6px solid #0b0e15; border-bottom: none; max-height: 86%; }
.mh-case-phone img { width: 100%; height: auto; display: block; }
.mh-case-list { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--border); }
.mh-case-list li { padding: 14px 0; border-bottom: 1px solid var(--border); font-size: 0.92rem; line-height: 1.6; color: var(--text-dim); }
.mh-case-list li strong { color: var(--text); font-weight: 800; }

/* ═══════════════ Pricing ═══════════════ */
.mh-pricing-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .mh-pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .mh-pricing-grid { grid-template-columns: repeat(4, 1fr); } }
.mh-price-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-l); background: var(--surface); padding: 24px 22px; display: flex; flex-direction: column; overflow: hidden; }
.mh-price-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 2px; background: linear-gradient(90deg, var(--pc), transparent); }
[dir="rtl"] .mh-price-card::before { background: linear-gradient(270deg, var(--pc), transparent); }
.mh-price-card:nth-child(1) { --pc: var(--blue-2); }
.mh-price-card:nth-child(2) { --pc: var(--violet); }
.mh-price-card:nth-child(3) { --pc: var(--cyan); }
.mh-price-card:nth-child(4) { --pc: var(--gold); }
.mh-price-card h3 { font-size: 1.08rem; font-weight: 800; color: var(--text); margin: 0 0 6px; }
.mh-price-for { font-size: 0.82rem; color: var(--text-dim); margin: 0 0 16px; line-height: 1.55; }
.mh-price-value-row { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; background: rgba(255,255,255,0.02); }
.mh-price-from { display: block; font-size: 0.68rem; color: var(--text-faint); margin-bottom: 2px; }
.mh-price-value { font-size: 1.05rem; font-weight: 900; color: var(--text); }
.mh-price-meta { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 10px; }
.mh-price-meta div { display: flex; flex-direction: column; gap: 2px; }
.mh-price-meta dt { font-size: 0.68rem; color: var(--text-faint); font-weight: 700; letter-spacing: 0.04em; }
.mh-price-meta dd { font-size: 0.82rem; color: var(--text); margin: 0; font-weight: 600; line-height: 1.5; }
.mh-price-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.mh-price-list li { font-size: 0.8rem; color: var(--text-dim); display: flex; gap: 8px; line-height: 1.5; }
.mh-price-list li i { font-size: 0.35rem; color: var(--pc); margin-top: 8px; }
.mh-price-card > a { font-size: 0.84rem; font-weight: 700; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.mh-price-card > a:hover { color: var(--pc); }
.mh-pricing-note { font-size: 0.8rem; color: var(--text-faint); text-align: center; margin: 24px 0 0; }

/* ═══════════════ Build — configurator ═══════════════ */
.mh-build { overflow: visible; }
.mh-build-glow { position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw; overflow: hidden; pointer-events: none; z-index: 0; background: radial-gradient(30% 50% at 30% 40%, rgba(124,58,237,0.22), transparent 70%), radial-gradient(30% 50% at 70% 70%, rgba(37,99,235,0.24), transparent 70%); }
.mh-build > *:not(.mh-build-glow) { position: relative; z-index: 1; }
.mh-config { border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-l); background: rgba(16,20,29,0.78); padding: clamp(22px, 4vw, 40px); box-shadow: 0 0 0 1px rgba(59,130,246,0.1), 0 50px 120px -60px rgba(59,130,246,0.8); }
.mh-config-step { display: grid; grid-template-columns: 1fr; gap: 12px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--border-soft); }
@media (min-width: 820px) { .mh-config-step { grid-template-columns: 220px 1fr; gap: 24px; align-items: center; } }
.mh-config-step:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mh-config-label { font-size: 0.7rem; font-weight: 800; color: var(--cyan); letter-spacing: 0.1em; margin-bottom: 4px; }
.mh-config-q { font-size: 1.02rem; font-weight: 800; color: var(--text); margin: 0; }
.mh-config-options { display: flex; flex-wrap: wrap; gap: 9px; }
.mh-config-opt { font-size: 0.85rem; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,0.035); border: 1px solid var(--border-strong); padding: 10px 18px; border-radius: 12px; cursor: pointer; font-family: inherit; transition: all .25s var(--ease); }
.mh-config-opt:hover { border-color: rgba(59,130,246,0.5); color: var(--text); }
.mh-config-opt[aria-pressed="true"] { color: #fff; border-color: rgba(96,165,250,0.85); background: linear-gradient(135deg, rgba(37,99,235,0.5), rgba(124,58,237,0.4)); box-shadow: 0 0 0 3px rgba(59,130,246,0.16), 0 10px 30px -10px rgba(59,130,246,0.85); }
.mh-config-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }

/* ═══════════════ Founder ═══════════════ */
.mh-founder { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
@media (min-width: 880px) { .mh-founder { grid-template-columns: 1.15fr 1fr; gap: 52px; } }
.mh-founder-photo-frame { position: relative; border-radius: var(--radius-l); overflow: hidden; aspect-ratio: 16/10; width: 100%; border: 1px solid var(--border); }
.mh-founder-photo-frame img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 22%; }
.mh-founder-photo-frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,13,20,0) 55%, rgba(10,13,20,0.75) 100%); }
.mh-founder-roles { font-size: 0.95rem; font-weight: 700; color: var(--text-dim); margin: 0 0 14px; line-height: 1.7; }

/* ═══════════════ Final CTA ═══════════════ */
.mh-cta { position: relative; border-radius: var(--radius-l); border: 1px solid rgba(59,130,246,0.25); padding: clamp(34px, 5vw, 60px); text-align: center; overflow: hidden; background: linear-gradient(160deg, rgba(37,99,235,0.16), rgba(124,58,237,0.1) 50%, var(--surface)); }
.mh-cta h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 900; color: var(--text); margin: 0 0 10px; }
.mh-cta p { font-size: 0.98rem; color: var(--text-dim); max-width: 480px; margin: 0 auto 24px; line-height: 1.65; }
.mh-cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ═══════════════ Footer ═══════════════ */
.mh-footer { padding-block: 26px 22px; border-top: 1px solid var(--border-soft); }
.mh-footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.mh-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
.mh-footer-links a { font-size: 0.83rem; color: var(--text-dim); text-decoration: none; transition: color .2s ease; }
.mh-footer-links a:hover { color: var(--text); }
.mh-footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.mh-footer-copy { font-size: 0.78rem; color: var(--text-faint); }
.mh-social-row { display: flex; align-items: center; gap: 8px; }
.mh-social-row a { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); border: 1px solid var(--border); text-decoration: none; font-size: 0.8rem; transition: all .2s ease; }
.mh-social-row a:hover { color: var(--text); border-color: rgba(59,130,246,0.5); }

/* ── Reveal + load sequence ── */
.mh-reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.mh-reveal.mh-in { opacity: 1; transform: none; }
.hp-stage .hp-layer { opacity: 0; }
.hp-stage.hp-ready .hp-layer { opacity: 1; }
.hp-stage.hp-ready .hp-l2 { transition-delay: 0s, .12s; }
.hp-stage.hp-ready .hp-l3 { transition-delay: 0s, .24s; }
.hp-stage.hp-ready .hp-l4 { transition-delay: 0s, .36s; }
.hp-stage.hp-ready .hp-l5 { transition-delay: 0s, .48s; }

@media (prefers-reduced-motion: reduce) {
  .mh-reveal, .hp-stage .hp-layer { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hp-drift { animation: none !important; }
}

.mh a:focus-visible, .mh button:focus-visible { outline: 2px solid var(--blue-2); outline-offset: 3px; border-radius: 8px; }

/* ═══════════════ V4.1 — unified stage / panel system ═══════════════
   Every product & platform visual = one stage (tinted top light, floor grid,
   same border) + panels (same frame, window bar, edge light) + icon chip. */
.mh-hero-bg::after { opacity: .8; }
.mh-logo-mark { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 0.9rem; color: var(--gold); background: rgba(211,154,69,0.08); }

.mh-stage { position: relative; isolation: isolate; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: radial-gradient(70% 80% at 50% -10%, rgba(var(--tint),0.30), transparent 65%),
              radial-gradient(50% 50% at 85% 110%, rgba(var(--tint2),0.18), transparent 70%),
              linear-gradient(180deg, #111a2a, #0d1320) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 80px -50px rgba(var(--tint),0.6) !important; }
.mh-stage::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px; -webkit-mask-image: linear-gradient(0deg, #000, transparent); mask-image: linear-gradient(0deg, #000, transparent); }
.mh-product-art.mh-stage { display: block; }

.mh-panel { position: absolute; border-radius: 14px; overflow: hidden; background: rgba(22,30,46,0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px rgba(var(--tint),0.18), 0 30px 60px -28px rgba(0,0,0,0.8), 0 20px 60px -30px rgba(var(--tint),0.55); }
.mh-panel .hp-win-bar { padding: 8px 12px; }
.mh-panel .hp-win-title { font-size: 0.6rem; }
.mh-panel-body { padding: 16px; }
.mh-panel-lines { display: flex; flex-direction: column; gap: 7px; margin-top: 14px; }
.mh-panel-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.09); }
.mh-panel-lines i:first-child { background: linear-gradient(90deg, rgba(var(--tint),0.9), rgba(var(--tint),0.15)); }
.mh-panel .hp-wave span { background: linear-gradient(180deg, rgb(var(--tint2)), rgb(var(--tint)) 60%, rgba(59,130,246,0.9)); }

.mh-device { position: absolute; top: 9%; left: 50%; width: 27%; border-radius: 22px; overflow: hidden; border: 5px solid #0b0f18;
  transform: translateX(-10%) rotate(3deg); box-shadow: 0 0 0 1px rgba(var(--tint),0.35), 0 30px 60px -24px rgba(var(--tint),0.7); z-index: 2; }
.mh-device-back { transform: translateX(-95%) rotate(-5deg); top: 16%; width: 24%; opacity: 0.8; z-index: 1; }
.mh-device img { width: 100%; height: auto; display: block; }

.mh-chip { position: absolute; z-index: 5; bottom: 8%; inset-inline-start: 7%; width: 13%; max-width: 72px; height: auto; aspect-ratio: 1/1; object-fit: cover;
  border-radius: 22%; border: 1px solid rgba(255,255,255,0.14); box-shadow: 0 16px 32px -12px rgba(0,0,0,0.8), 0 0 30px -8px rgba(var(--tint),0.6); }

.mh-panel-vox { left: 14%; right: 14%; top: 18%; }
.mh-panel-vox .hp-wave { height: 54px; }
.mh-panel-media { left: 20%; right: 20%; top: 9%; bottom: -6%; }
.mh-panel-media img { display: block; width: 100%; height: calc(100% - 30px); object-fit: cover; }
.mh-panel-sila { left: 30%; right: 30%; top: 12%; z-index: 3; }
.mh-panel-sila .mh-panel-body img { display: block; width: 100%; height: auto; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; }
.mh-panel-ghost { top: 20%; width: 34%; height: 70%; opacity: 0.55; }
.mh-ghost-a { left: 14%; transform: rotate(-8deg); }
.mh-ghost-b { right: 14%; transform: rotate(8deg); }

.mh-plat-visual.mh-stage { height: 150px; padding: 0; border-radius: 14px; margin-bottom: 20px; }
.mh-panel-map, .mh-panel-ops { left: 8%; right: 8%; top: 16%; bottom: -10%; }
.mh-map { position: relative; height: 100%; background-image: linear-gradient(rgba(34,211,238,0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,0.12) 1px, transparent 1px); background-size: 16px 16px; }
.mh-map i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 5px rgba(34,211,238,0.15), 0 0 12px var(--cyan); }
.mh-map i:nth-child(1) { top: 22%; left: 22%; } .mh-map i:nth-child(2) { top: 48%; left: 50%; }
.mh-map i:nth-child(3) { top: 26%; left: 76%; background: var(--gold); box-shadow: 0 0 0 5px rgba(211,154,69,0.18), 0 0 12px var(--gold); }
.mh-ops { padding: 14px; display: flex; flex-direction: column; gap: 11px; direction: ltr; }
.mh-ops span { display: flex; align-items: center; gap: 8px; }
.mh-ops b { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; flex-shrink: 0; }
.mh-ops span:nth-child(2) b { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.mh-ops em { flex: 1; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); position: relative; overflow: hidden; }
.mh-ops em::after { content: ''; position: absolute; inset: 0; width: var(--w, 60%); background: linear-gradient(90deg, rgba(245,158,11,0.85), rgba(245,158,11,0.2)); border-radius: 3px; }
.mh-plat-aqar, .mh-plat-operix { background: var(--surface); border-color: var(--border); }
.mh-concept-note { z-index: 6; }
.mh-platform-feature.mh-stage { overflow: hidden; }
.mh-platform-feature .mh-panel { position: relative; }

/* Studio narrative */
.mh-studio { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 940px) { .mh-studio { grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: start; } }
.mh-studio-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); }
.mh-studio-item { display: grid; grid-template-columns: 48px 1fr; column-gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--border); }
.mh-studio-item .mh-offer-num { grid-row: span 2; color: var(--blue-2); margin: 3px 0 0; }
.mh-studio-item:nth-child(2) .mh-offer-num { color: var(--violet); }
.mh-studio-item:nth-child(3) .mh-offer-num { color: var(--gold); }
.mh-studio-item h3 { font-size: 1.08rem; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.mh-studio-item p { font-size: 0.9rem; color: var(--text-dim); margin: 0; line-height: 1.65; }
.mh-footer { background: #090D15; box-shadow: 0 0 0 100vmax #090D15; clip-path: inset(0 -100vmax); }
@media (max-width: 640px) { .mh-device { width: 34%; } .mh-device-back { width: 30%; } .mh-panel-sila { left: 26%; right: 26%; } }

/* ═══════════════════════════════════════════════════════════════════════════
   HYBRID V5 — Claude UX × Google AI Studio Art Direction × MYM ALALI
   Keeps Claude's information architecture and production-safe static stack,
   while importing Google's deeper blue/violet atmosphere, layered glow and
   more expressive section rhythm. 2026-09-28
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #0b1220;
  --bg-hero: #050912;
  --bg-blue: #0d1729;
  --bg-alt: #101a2b;
  --surface: #151f31;
  --surface-2: #1a2740;
  --border: rgba(148,163,184,.16);
  --border-soft: rgba(148,163,184,.09);
  --border-strong: rgba(148,163,184,.24);
  --text: #f8fbff;
  --text-dim: #b3bfd0;
  --text-faint: #77859a;
  --blue: #2563eb;
  --blue-2: #4f8cff;
  --cyan: #2dd4ff;
  --violet: #8b5cf6;
  --violet-2: #a855f7;
  --gold: #d8a14d;
  --orange: #f59e0b;
}

html { background:#08101c; }
.mh { font-family:'IBM Plex Sans Arabic','Tajawal',sans-serif; background:#08101c; }
[dir="ltr"] .mh { font-family:'Inter',system-ui,sans-serif; }
[dir="ltr"] .mh h1,[dir="ltr"] .mh h2,[dir="ltr"] .mh h3,[dir="ltr"] .mh-logo-word { font-family:'Space Grotesk','Inter',sans-serif; }

/* richer but slightly brighter page canvas */
.mh::before {
  content:''; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(50% 38% at 14% 18%, rgba(37,99,235,.13), transparent 72%),
    radial-gradient(42% 36% at 88% 36%, rgba(139,92,246,.11), transparent 72%),
    linear-gradient(180deg,#08101c 0%,#0a1322 48%,#08101c 100%);
}

/* Header: Google-style restrained chrome with Claude structure */
.mh-nav { background:rgba(6,11,20,.72); border-bottom-color:rgba(96,165,250,.12); box-shadow:0 10px 40px rgba(0,0,0,.14); }
.mh-logo-word { letter-spacing:.045em; font-size:.96rem; }
.mh-logo-mark { border-color:rgba(216,161,77,.58); box-shadow:0 0 26px rgba(216,161,77,.12); }
.mh-nav-link { color:#a9b6c9; }
.mh-nav-link:hover { color:white; text-shadow:0 0 18px rgba(96,165,250,.4); }
.mh-lang-btn { background:rgba(10,18,31,.7); }

/* Hero: preserve Claude composition, add Google's cinematic depth */
.mh-hero { min-height:96vh; padding-top:112px; background:
  radial-gradient(76% 64% at 18% 52%, rgba(37,99,235,.16), transparent 67%),
  radial-gradient(72% 72% at 76% 48%, rgba(124,58,237,.14), transparent 70%),
  linear-gradient(180deg,#050912 0%,#07101d 68%,#0a1321 100%);
  box-shadow:0 0 0 100vmax #07101d; }
.mh-hero-bg::before { opacity:.95; filter:saturate(118%); }
.mh-hero-bg::after { opacity:.42; background-size:72px 72px; }
.mh-hero-orbit { position:absolute; pointer-events:none; border-radius:999px; filter:blur(.2px); opacity:.34; }
.mh-hero-orbit-a { width:520px; height:520px; top:16%; inset-inline-end:-150px; border:1px solid rgba(45,212,255,.16); box-shadow:0 0 110px rgba(37,99,235,.10) inset; }
.mh-hero-orbit-b { width:360px; height:360px; bottom:6%; inset-inline-start:-80px; border:1px solid rgba(139,92,246,.15); }
.mh-hero h1 { font-size:clamp(2.55rem,4.9vw,4.25rem); max-width:14ch; text-wrap:balance; text-shadow:0 8px 38px rgba(0,0,0,.34); }
.mh-hero-sub { font-size:1.08rem; max-width:520px; color:#b8c4d6; }
.mh-hero-badge { color:#cfe6ff; border-color:rgba(96,165,250,.26); background:linear-gradient(90deg,rgba(37,99,235,.14),rgba(124,58,237,.11)); box-shadow:inset 0 1px rgba(255,255,255,.04); }
.mh-hero-badge i { color:var(--cyan); }
.mh-credibility-strip { border-top-color:rgba(96,165,250,.14); }
.mh-cred-item i { color:#60a5fa; }

/* Hero stack — closer to the reference: floating window planes + edge lighting */
.hp-stage { perspective:1900px; filter:drop-shadow(0 48px 90px rgba(0,0,0,.28)); }
.hp-card { background:linear-gradient(155deg,rgba(24,37,61,.96),rgba(8,15,27,.98)); border-color:rgba(96,165,250,.20); box-shadow:0 42px 90px -34px rgba(0,0,0,.95),0 0 60px -30px rgba(59,130,246,.5),inset 0 1px rgba(255,255,255,.05); }
.hp-l1 .hp-card { border-color:rgba(45,212,255,.21); }
.hp-l2 .hp-card { box-shadow:0 38px 85px -35px rgba(245,158,11,.42); }
.hp-l3 .hp-card { border-color:rgba(168,85,247,.28); box-shadow:0 42px 100px -34px rgba(168,85,247,.5); }
.hp-l4 .hp-card { border-color:rgba(96,165,250,.28); box-shadow:0 44px 100px -36px rgba(59,130,246,.62); }
.hp-l5 .hp-card { box-shadow:0 28px 66px -28px rgba(251,113,133,.48); }
.hp-stage::after { content:''; position:absolute; inset:12% 7% 4%; z-index:-2; background:radial-gradient(ellipse at center,rgba(37,99,235,.20),rgba(124,58,237,.08) 45%,transparent 72%); filter:blur(38px); }

/* Buttons borrowed from Google's brighter electric treatment */
.mh-btn-primary { background:linear-gradient(135deg,#2563eb 0%,#3b82f6 60%,#4f8cff 100%); border-color:rgba(147,197,253,.30); box-shadow:0 14px 44px -14px rgba(37,99,235,.82),inset 0 1px 0 rgba(255,255,255,.24); }
.mh-btn-primary:hover { box-shadow:0 18px 58px -14px rgba(59,130,246,.92),0 0 0 1px rgba(147,197,253,.24),inset 0 1px 0 rgba(255,255,255,.28); }

/* Alternating section luminosity: still dark, but not black-on-black */
#areas { --band:#0c1625 !important; }
#products { --band:#101a2b !important; }
#platforms { --band:#0a1628 !important; }
#addons { --band:#111b2b !important; }
.mh-pricing-section { --band:#0d1727 !important; }
#founder { --band:#101a2b !important; }

/* Connected offering strip gets a subtle blue-violet underglow */
.mh-offer-strip { background:linear-gradient(180deg,rgba(18,30,49,.86),rgba(13,23,39,.95)); border:1px solid rgba(96,165,250,.15); border-radius:24px; overflow:hidden; box-shadow:0 28px 80px -55px rgba(59,130,246,.55),inset 0 1px rgba(255,255,255,.03); }
.mh-offer-col { padding:28px 30px; }
.mh-offer-col + .mh-offer-col { border-inline-start-color:rgba(96,165,250,.12); }

/* Product stories: Google color energy, Claude product UX */
.mh-product-row { border-top-color:rgba(148,163,184,.12); }
.mh-product-art { min-height:390px; }
.mh-p-chatrio .mh-product-art { --tint:59,130,246 !important; --tint2:139,92,246 !important; }
.mh-p-vox .mh-product-art { --tint:168,85,247 !important; --tint2:45,212,255 !important; }
.mh-p-mihrabi .mh-product-art { --tint:216,161,77 !important; --tint2:245,158,11 !important; }
.mh-p-sila .mh-product-art { --tint:251,113,133 !important; --tint2:249,115,22 !important; }
.mh-stage { border-color:rgba(148,163,184,.17)!important; background:radial-gradient(68% 76% at 50% -8%,rgba(var(--tint),.30),transparent 67%),radial-gradient(48% 48% at 88% 112%,rgba(var(--tint2),.18),transparent 72%),linear-gradient(180deg,#17243a,#0e1828)!important; }
.mh-product-name { letter-spacing:-.01em; }
.mh-status { background:rgba(16,185,129,.10); border-color:rgba(52,211,153,.28); color:#7ee7b7; }

/* Platforms: make enterprise zone the visual anchor */
.mh-platforms { isolation:isolate; }
.mh-platforms::before { content:''; position:absolute; inset:0 -100vmax; z-index:-1; background:radial-gradient(48% 42% at 20% 18%,rgba(34,211,238,.09),transparent 70%),radial-gradient(44% 50% at 82% 50%,rgba(37,99,235,.13),transparent 74%); pointer-events:none; }
.mh-platform-feature { border-color:rgba(45,212,255,.20)!important; box-shadow:0 34px 90px -45px rgba(34,211,238,.42)!important; }
.mh-platform-secondary-grid { gap:20px; }
.mh-plat-aqar { background:linear-gradient(160deg,#10253a,#101a2b 64%); border-color:rgba(45,212,255,.17); }
.mh-plat-operix { background:linear-gradient(160deg,#17152b,#101827 65%); border-color:rgba(139,92,246,.18); }

/* Add-ons become four colored systems, less flat */
.mh-addon-group { background:linear-gradient(165deg,rgba(24,36,58,.86),rgba(14,24,40,.92)); border:1px solid rgba(148,163,184,.13); border-radius:20px; padding:24px; position:relative; overflow:hidden; }
.mh-addon-group::after { content:''; position:absolute; width:150px; height:150px; border-radius:50%; filter:blur(46px); opacity:.16; top:-72px; inset-inline-end:-52px; background:#3b82f6; }
.mh-addon-group:nth-child(2)::after { background:#22d3ee; }
.mh-addon-group:nth-child(3)::after { background:#8b5cf6; }
.mh-addon-group:nth-child(4)::after { background:#d8a14d; }
.mh-addon-group-icon { box-shadow:0 0 32px -12px rgba(59,130,246,.65); }

/* Editorial case study: softer gradient panel instead of flat band */
.mh-case { background:linear-gradient(145deg,rgba(15,28,49,.90),rgba(14,20,34,.96)); border:1px solid rgba(96,165,250,.15); border-radius:26px; padding:clamp(24px,4vw,46px); box-shadow:0 32px 80px -60px rgba(37,99,235,.56); }
.mh-case-num { color:#2e5ea9; text-shadow:0 0 48px rgba(37,99,235,.20); }

/* Pricing: four distinct families, no fake popularity claims */
.mh-price-card { background:linear-gradient(180deg,rgba(21,31,49,.96),rgba(14,23,39,.98)); border-color:rgba(148,163,184,.13); box-shadow:0 20px 60px -50px rgba(0,0,0,.65); position:relative; overflow:hidden; }
.mh-price-card::before { content:''; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,#3b82f6,#22d3ee); opacity:.9; }
.mh-price-card:nth-child(2)::before { background:linear-gradient(90deg,#8b5cf6,#d946ef); }
.mh-price-card:nth-child(3)::before { background:linear-gradient(90deg,#22d3ee,#3b82f6); }
.mh-price-card:nth-child(4)::before { background:linear-gradient(90deg,#d8a14d,#f59e0b); }
.mh-price-value-row { background:rgba(255,255,255,.025); border:1px dashed rgba(148,163,184,.15); border-radius:14px; padding:14px; }

/* Build configurator: Google interaction canvas, Claude semantic flow */
.mh-build { background:linear-gradient(160deg,#0a1322,#0d1730 54%,#11132b)!important; }
.mh-build::after { content:''; position:absolute; inset:8% 5%; pointer-events:none; z-index:-1; background:radial-gradient(circle at 28% 22%,rgba(37,99,235,.15),transparent 32%),radial-gradient(circle at 76% 72%,rgba(139,92,246,.14),transparent 34%); filter:blur(24px); }
.mh-config { background:rgba(10,18,31,.72); border-color:rgba(96,165,250,.18); box-shadow:0 34px 90px -48px rgba(37,99,235,.72),inset 0 1px rgba(255,255,255,.03); }
.mh-config-opt[aria-pressed="true"] { background:linear-gradient(135deg,rgba(37,99,235,.46),rgba(139,92,246,.40)); border-color:rgba(96,165,250,.72); box-shadow:0 0 0 1px rgba(96,165,250,.16),0 0 28px -12px rgba(59,130,246,.95); }

/* Studio replaces personal portrait — public-facing brand narrative */
.mh-studio { background:linear-gradient(145deg,rgba(19,30,48,.78),rgba(13,22,38,.88)); border:1px solid rgba(148,163,184,.13); border-radius:26px; padding:clamp(28px,4vw,50px); }
.mh-studio-item { border-bottom-color:rgba(148,163,184,.12); }

/* CTA + footer: brighter than before but still premium */
.mh-cta { background:radial-gradient(60% 120% at 50% 0%,rgba(37,99,235,.26),transparent 62%),linear-gradient(145deg,#101b30,#15152d 62%,#151f31); border-color:rgba(96,165,250,.24); box-shadow:0 34px 90px -55px rgba(37,99,235,.72); }
.mh-footer { background:#07101c; box-shadow:0 0 0 100vmax #07101c; }

/* improved section breathing without going sparse */
.mh-section { padding-block:clamp(62px,6vw,92px); }
.mh-section-tight { padding-block:clamp(42px,4.5vw,64px); }

/* mobile simplification of depth while preserving identity */
@media (max-width: 760px) {
  .mh-hero { min-height:auto; padding-top:100px; padding-bottom:56px; }
  .mh-hero h1 { font-size:clamp(2.25rem,11vw,3rem); max-width:13ch; }
  .mh-hero-orbit-a { width:320px; height:320px; inset-inline-end:-180px; }
  .mh-hero-orbit-b { width:240px; height:240px; }
  .hp-stage { filter:none; }
  .mh-offer-strip { border-radius:20px; }
  .mh-offer-col { padding:24px 22px; }
  .mh-product-art { min-height:320px; }
  .mh-case,.mh-studio { border-radius:20px; padding:24px 20px; }
}

/* ── English typography (LTR only): Space Grotesk headings, Inter body ── */
[dir="ltr"] .mh-product-name,[dir="ltr"] .mh-platform-name,[dir="ltr"] .mh-case-num,
[dir="ltr"] .mh-addon-group h4,[dir="ltr"] .mh-config-q,[dir="ltr"] .mh-price-value { font-family:'Space Grotesk','Inter',sans-serif; }
[dir="ltr"] .mh-hero h1 { font-weight:600; letter-spacing:-.03em; line-height:1.04; font-size:clamp(2.3rem,4.4vw,3.8rem); max-width:17ch; }
@media (max-width: 760px) { [dir="ltr"] .mh-hero h1 { font-size:clamp(2rem,9.8vw,2.7rem); max-width:15ch; } }
[dir="ltr"] .mh-h2,[dir="ltr"] .mh-cta h2 { font-weight:600; letter-spacing:-.022em; line-height:1.16; }
[dir="ltr"] .mh h3,[dir="ltr"] .mh-product-name,[dir="ltr"] .mh-platform-name,
[dir="ltr"] .mh-addon-group h4,[dir="ltr"] .mh-config-q { font-weight:600; letter-spacing:-.015em; }
[dir="ltr"] .mh-price-value,[dir="ltr"] .mh-case-num { font-weight:600; }
[dir="ltr"] .mh-logo-word { font-weight:700; }
[dir="ltr"] .mh-btn,[dir="ltr"] .mh-lang-btn,[dir="ltr"] .mh-config-opt,[dir="ltr"] .mh-case-list li strong { font-weight:600; }
[dir="ltr"] .mh-eyebrow,[dir="ltr"] .mh-hero-badge,[dir="ltr"] .mh-offer-num,[dir="ltr"] .mh-case-name,
[dir="ltr"] .mh-config-label,[dir="ltr"] .hp-win-title,[dir="ltr"] .mh-logo-mark { font-weight:600; }

/* ── Post-launch support (inside #pricing) ── */
.mh-support { margin-top: clamp(40px, 6vw, 64px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--border-soft); }
.mh-support-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-bottom: 22px; }
.mh-support-h { font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 800; color: var(--text); margin: 0 0 8px; line-height: 1.3; }
.mh-support-sub { font-size: 0.9rem; color: var(--text-dim); margin: 0; max-width: 52ch; line-height: 1.6; }
.mh-seg { display: inline-flex; padding: 4px; gap: 4px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255,255,255,0.03); }
.mh-seg-btn { font-family: inherit; font-size: 0.82rem; font-weight: 700; color: var(--text-dim); background: transparent; border: 0; padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .25s ease, color .25s ease; }
.mh-seg-btn:hover { color: var(--text); }
.mh-seg-btn[aria-selected="true"] { color: #fff; background: linear-gradient(135deg, rgba(37,99,235,0.55), rgba(124,58,237,0.42)); }
.mh-seg-btn:focus-visible, .mh-sup-policy summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.mh-sup-kicker { font-size: 0.8rem; color: var(--text-faint); margin: 0 0 14px; }
.mh-sup-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 820px) { .mh-sup-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.mh-sup-card { border: 1px solid rgba(148,163,184,.13); border-radius: var(--radius-l); background: rgba(255,255,255,0.025); padding: 18px 20px; }
.mh-sup-card h4 { font-size: 1rem; font-weight: 800; color: var(--text); margin: 0 0 10px; }
.mh-sup-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--border-soft); }
.mh-sup-price .mh-price-from { flex-basis: 100%; margin: 0; }
.mh-sup-amount { font-size: 1.15rem; font-weight: 800; color: var(--text); }
.mh-sup-per { font-size: 0.78rem; color: var(--text-faint); }
.mh-sup-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mh-sup-list li { font-size: 0.76rem; color: var(--text-dim); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 10px; line-height: 1.4; }
.mh-sup-note { font-size: 0.78rem; color: var(--text-faint); margin: 14px 0 0; line-height: 1.6; }
.mh-sup-policy { margin-top: 18px; border: 1px solid var(--border-soft); border-radius: 14px; padding: 12px 16px; background: rgba(255,255,255,0.015); }
.mh-sup-policy summary { cursor: pointer; font-size: 0.84rem; font-weight: 700; color: var(--text); list-style-position: inside; }
.mh-sup-policy ul { margin: 12px 0 2px; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; }
.mh-sup-policy li { font-size: 0.8rem; color: var(--text-dim); line-height: 1.6; }
@media (max-width: 560px) { .mh-seg { width: 100%; } .mh-seg-btn { flex: 1; padding: 9px 10px; } }
[dir="ltr"] .mh-support-h, [dir="ltr"] .mh-sup-card h4, [dir="ltr"] .mh-sup-amount { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.015em; }
[dir="ltr"] .mh-seg-btn, [dir="ltr"] .mh-sup-policy summary { font-weight: 600; }

/* ── Delivery options drawer + consultation (inside #pricing) ── */
.mh-dlv { margin-top: 20px; border: 1px solid var(--border-soft); border-radius: var(--radius-l); background: rgba(255,255,255,0.015); }
.mh-dlv > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 18px; font-size: 0.88rem; font-weight: 700; color: var(--text); }
.mh-dlv > summary::-webkit-details-marker { display: none; }
.mh-dlv > summary i { font-size: 0.7rem; color: var(--text-faint); transition: transform .25s var(--ease); }
.mh-dlv[open] > summary i { transform: rotate(180deg); }
.mh-dlv > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: var(--radius-l); }
.mh-dlv-body { padding: 4px clamp(14px, 3vw, 24px) 20px; border-top: 1px solid var(--border-soft); }
.mh-dlv-hint { font-size: 0.82rem; color: var(--text-dim); margin: 14px 0 12px; }
.mh-seg-scroll { max-width: 100%; overflow-x: auto; scrollbar-width: none; margin-bottom: 16px; }
.mh-seg-scroll::-webkit-scrollbar { display: none; }
.mh-dlv-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 820px) { .mh-dlv-grid { grid-template-columns: repeat(3, 1fr); } .mh-dlv-tier + .mh-dlv-tier { border-inline-start: 1px solid var(--border-soft); } }
.mh-dlv-tier { padding: 14px 4px; border-top: 1px solid var(--border-soft); }
@media (min-width: 820px) { .mh-dlv-tier { padding: 6px 20px; border-top: 0; } .mh-dlv-tier:first-child { padding-inline-start: 0; } }
.mh-dlv-name { font-size: 0.95rem; font-weight: 800; color: var(--text); margin: 0 0 4px; }
.mh-dlv-price { font-size: 0.78rem; color: var(--text-faint); margin: 0 0 10px; }
.mh-dlv-price strong { font-size: 1rem; color: var(--text); font-weight: 800; }
.mh-dlv-k { font-size: 0.7rem; color: var(--text-faint); letter-spacing: .04em; margin: 8px 0 6px; }
.mh-dlv-tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.mh-dlv-tier li { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; padding-inline-start: 14px; position: relative; }
.mh-dlv-tier li::before { content: ''; position: absolute; inset-inline-start: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--blue-2); opacity: .8; }
.mh-dlv-tier ul.mh-dlv-client li::before { background: transparent; border: 1px solid var(--text-faint); }
.mh-dlv-foot { font-size: 0.76rem; color: var(--text-faint); margin: 14px 0 0; line-height: 1.6; }

.mh-con { margin-top: clamp(36px, 5vw, 56px); padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid var(--border-soft); }
.mh-con-head { margin-bottom: 16px; }
.mh-con-row { display: grid; grid-template-columns: 1fr; border: 1px solid rgba(148,163,184,.13); border-radius: var(--radius-l); background: rgba(255,255,255,0.02); }
@media (min-width: 820px) { .mh-con-row { grid-template-columns: 1fr 1.35fr; } .mh-con-item + .mh-con-item { border-inline-start: 1px solid var(--border-soft); } }
.mh-con-item { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.mh-con-item + .mh-con-item { border-top: 1px solid var(--border-soft); }
@media (min-width: 820px) { .mh-con-item + .mh-con-item { border-top: 0; } }
.mh-con-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin: 0; font-size: 1rem; font-weight: 800; color: var(--text); }
.mh-con-meta { font-size: 0.8rem; font-weight: 700; color: var(--gold); }
.mh-con-item .mh-sup-note { margin: 0; flex-grow: 1; }
.mh-con-cta { align-self: flex-start; }
[dir="ltr"] .mh-dlv-name, [dir="ltr"] .mh-con-title, [dir="ltr"] .mh-dlv-price strong, [dir="ltr"] .mh-price-value { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
[dir="ltr"] .mh-dlv > summary, [dir="ltr"] .mh-con-meta { font-weight: 600; }

/* ── Client onboarding (Build a product) ── */
.onb { position: relative; max-width: 1080px; margin: 0 auto; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-l); background: rgba(14,20,34,0.82); box-shadow: 0 0 0 1px rgba(59,130,246,0.1), 0 50px 120px -60px rgba(59,130,246,0.75); overflow: hidden; }
.onb-top { padding: 18px clamp(16px, 3vw, 28px) 0; }
.onb-steps { list-style: none; margin: 0; padding: 0 0 14px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.onb-steps::-webkit-scrollbar { display: none; }
.onb-steps li { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; font-size: 0.74rem; color: var(--text-faint); padding-inline-end: 8px; }
.onb-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem; font-weight: 700; border: 1px solid var(--border-strong); color: var(--text-faint); }
.onb-dot i { font-size: 0.6rem; }
.onb-steps li.is-done .onb-dot { border-color: rgba(96,165,250,.6); color: #93c5fd; background: rgba(37,99,235,.14); }
.onb-steps li.is-current { color: var(--text); }
.onb-steps li.is-current .onb-dot { border-color: transparent; color: #fff; background: linear-gradient(135deg, var(--blue), var(--violet)); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
@media (max-width: 819px) { .onb-step-name { display: none; } .onb-steps { justify-content: space-between; } .onb-steps li { padding-inline-end: 0; } }
.onb-bar { height: 2px; background: var(--border-soft); margin: 0 calc(-1 * clamp(16px, 3vw, 28px)); }
.onb-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--blue-2), var(--violet)); transition: width .4s var(--ease); }
[dir="rtl"] .onb-bar span { margin-inline-start: 0; background: linear-gradient(270deg, var(--blue-2), var(--violet)); }
.onb-layout { display: grid; grid-template-columns: 1fr; }
@media (min-width: 960px) { .onb-layout { grid-template-columns: 1fr 300px; } .onb-aside { border-inline-start: 1px solid var(--border-soft); } }
.onb-main { padding: clamp(20px, 3.4vw, 34px); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.onb-panel { animation: onbIn .32s var(--ease); }
@keyframes onbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .onb-panel { animation: none; } .onb-bar span { transition: none; } }
.onb-kicker { font-size: 0.7rem; font-weight: 700; letter-spacing: .08em; color: var(--cyan); margin: 0 0 6px; text-transform: uppercase; }
.onb-q { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 800; color: var(--text); margin: 0 0 6px; line-height: 1.3; outline: none; }
.onb-sub { font-size: 0.86rem; color: var(--text-dim); margin: 0 0 18px; line-height: 1.6; }
.onb-fine { font-size: 0.76rem; color: var(--text-faint); margin: 14px 0 0; line-height: 1.6; }
.onb-fine a { color: var(--blue-2); }
.onb-fields { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .onb-fields { grid-template-columns: 1fr 1fr; } .onb-field-wide { grid-column: span 1; } }
.onb-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.onb-field em { font-style: normal; color: var(--text-faint); font-weight: 500; }
.onb-field input { font: inherit; font-size: 0.92rem; font-weight: 500; color: var(--text); background: rgba(255,255,255,0.035); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px 13px; width: 100%; box-sizing: border-box; transition: border-color .2s ease, box-shadow .2s ease; }
[dir="rtl"] .onb-field input[dir="ltr"] { text-align: right; }
.onb-field input:focus { outline: none; border-color: rgba(96,165,250,.8); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.onb-field input[aria-invalid="true"] { border-color: rgba(248,113,113,.7); }
.onb-err { font-size: 0.74rem; color: #fca5a5; font-weight: 500; margin: 8px 0 0; }
.onb-opts { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 620px) { .onb-opts { grid-template-columns: repeat(2, 1fr); } }
.onb-opt { position: relative; text-align: start; font: inherit; color: var(--text-dim); background: rgba(255,255,255,0.03); border: 1px solid var(--border-strong); border-radius: 14px; padding: 13px 44px 13px 15px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
[dir="rtl"] .onb-opt { padding: 13px 15px 13px 44px; }
.onb-opt:hover { border-color: rgba(96,165,250,.5); }
.onb-opt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.onb-opt[aria-checked="true"] { border-color: rgba(96,165,250,.85); background: linear-gradient(135deg, rgba(37,99,235,.22), rgba(124,58,237,.16)); box-shadow: 0 0 0 3px rgba(59,130,246,.14), 0 14px 34px -18px rgba(59,130,246,.8); }
.onb-opt-name { font-size: 0.92rem; font-weight: 700; color: var(--text); }
.onb-opt-meta { font-size: 0.8rem; font-weight: 600; color: #93c5fd; }
.onb-opt-desc { font-size: 0.76rem; color: var(--text-dim); line-height: 1.5; margin-top: 2px; }
.onb-opt-check { position: absolute; top: 13px; inset-inline-end: 13px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-size: 0.55rem; color: transparent; }
.onb-opt[aria-checked="true"] .onb-opt-check { background: var(--blue-2); border-color: transparent; color: #fff; }
.onb-detail { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border-soft); border-radius: 14px; background: rgba(255,255,255,0.02); }
.onb-detail-k { font-size: 0.7rem; letter-spacing: .04em; color: var(--text-faint); margin: 0 0 8px; }
.onb-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
[dir="ltr"] .onb-next .fa-arrow-left { transform: scaleX(-1); }
[dir="rtl"] .onb-back .fa-arrow-left { transform: scaleX(-1); }
.onb-pay { display: flex; flex-direction: column; gap: 14px; }
.onb-pay-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid rgba(96,165,250,.3); border-radius: 14px; background: rgba(37,99,235,.08); }
.onb-pay-name { margin: 0; font-weight: 700; color: var(--text); font-size: 0.95rem; }
.onb-pay-meta { margin: 2px 0 0; font-size: 0.78rem; color: var(--text-dim); }
.onb-pay-amount { margin: 0; font-size: 1.15rem; font-weight: 800; color: var(--text); white-space: nowrap; }
.onb-pay-client { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.onb-pay-client dt { font-size: 0.7rem; color: var(--text-faint); }
.onb-pay-client dd { margin: 2px 0 0; font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
.onb-pay-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; opacity: .45; }
.onb-pay-method { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 11px 6px; border: 1px dashed var(--border-strong); border-radius: 12px; font-size: 0.8rem; color: var(--text-dim); cursor: not-allowed; }
.onb-pay-notice { margin: 0; font-size: 0.82rem; color: var(--gold); display: flex; gap: 8px; align-items: center; }
.onb-pay-btn { align-self: stretch; justify-content: center; opacity: .4; cursor: not-allowed; box-shadow: none; }
.onb-pay-btn:hover { transform: none; }
.onb-review { margin: 0; border: 1px solid var(--border-soft); border-radius: 14px; }
.onb-review > div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: baseline; padding: 10px 14px; border-top: 1px solid var(--border-soft); }
.onb-review > div:first-child { border-top: 0; }
.onb-review dt { font-size: 0.74rem; color: var(--text-faint); }
.onb-review dd { margin: 0; font-size: 0.86rem; color: var(--text); overflow-wrap: anywhere; }
[dir="rtl"] .onb-review dd[dir="ltr"] { text-align: right; }
.onb-edit { font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--blue-2); background: none; border: 0; padding: 2px 4px; cursor: pointer; }
.onb-edit:focus-visible { outline: 2px solid var(--cyan); border-radius: 6px; }
.onb-estimate { margin-top: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(37,99,235,.16), rgba(124,58,237,.12)); border: 1px solid rgba(96,165,250,.28); }
.onb-estimate span { font-size: 0.8rem; color: var(--text-dim); }
.onb-estimate strong { font-size: 1.1rem; color: var(--text); }
.onb-estimate-sub { margin-top: 8px; background: rgba(255,255,255,.02); border-color: var(--border-soft); }
.onb-aside { padding: clamp(20px, 3vw, 28px); background: rgba(255,255,255,0.015); border-top: 1px solid var(--border-soft); }
@media (min-width: 960px) { .onb-aside { border-top: 0; } }
.onb-aside-k { font-size: 0.7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 10px; }
.onb-aside-client { font-size: 0.9rem; font-weight: 700; color: var(--text); margin: 0 0 12px; overflow-wrap: anywhere; }
.onb-aside dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.onb-aside dl > div { display: flex; justify-content: space-between; gap: 10px; font-size: 0.78rem; }
.onb-aside dt { color: var(--text-faint); }
.onb-aside dd { margin: 0; color: var(--text); text-align: end; }
.onb-aside .is-empty dd { color: var(--text-faint); }
@media (max-width: 959px) { .onb-aside dl, .onb-aside-client, .onb-aside .onb-fine { display: none; } .onb-aside { padding-block: 14px; } .onb-aside-k { margin-bottom: 6px; } }
.onb-aside-est { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-soft); display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 959px) { .onb-aside-est { margin-top: 0; padding-top: 0; border-top: 0; flex-direction: row; justify-content: space-between; align-items: baseline; } }
.onb-aside-est span { font-size: 0.74rem; color: var(--text-faint); }
.onb-aside-est strong { font-size: 1rem; color: var(--text); }
.onb-aside-est-sub { margin-top: 8px; }
.onb-done { text-align: center; padding: 10px 0; }
.onb-done-icon { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #93c5fd; background: rgba(37,99,235,.14); border: 1px solid rgba(96,165,250,.35); }
[dir="ltr"] .onb-q, [dir="ltr"] .onb-pay-amount, [dir="ltr"] .onb-estimate strong, [dir="ltr"] .onb-aside-est strong { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.015em; }
[dir="ltr"] .onb-opt-name { font-weight: 600; }

/* ── Unified start modal (Quick Start / Guided Project Setup) ── */
.stm { padding: 0; border: 0; background: transparent; color: var(--text); width: min(1040px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow: visible; }
.stm::backdrop { background: rgba(3,7,15,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.stm[open] { animation: stmIn .28s var(--ease); }
@keyframes stmIn { from { opacity: 0; transform: translateY(10px) scale(.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stm[open] { animation: none; } }
.stm-shell { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid rgba(255,255,255,.1); border-radius: 24px; background: radial-gradient(60% 50% at 15% 0%, rgba(37,99,235,.16), transparent 70%), radial-gradient(50% 50% at 90% 100%, rgba(124,58,237,.14), transparent 70%), #0b1322; box-shadow: 0 0 0 1px rgba(59,130,246,.12), 0 60px 140px -50px rgba(37,99,235,.7); }
.stm-head { position: sticky; top: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px 0; pointer-events: none; }
.stm-head > * { pointer-events: auto; }
.stm-back { font: inherit; font-size: .8rem; font-weight: 600; color: var(--text-dim); background: rgba(11,19,34,.9); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.stm-back[hidden] { display: none; }
.stm-back:hover { color: var(--text); }
[dir="rtl"] .stm-back i { transform: scaleX(-1); }
.stm-close { margin-inline-start: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border-strong); background: rgba(11,19,34,.9); color: var(--text-dim); cursor: pointer; font-size: .95rem; }
.stm-close:hover { color: var(--text); }
.stm-back:focus-visible, .stm-close:focus-visible, .stm-path:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.stm-body { padding: 4px clamp(18px, 4vw, 44px) clamp(22px, 4vw, 40px); }
.stm.is-guided .stm-body { display: none; }
.stm-guided { padding: 0 clamp(10px, 2vw, 18px) clamp(10px, 2vw, 18px); }
.stm:not(.is-guided) .stm-guided { display: none; }
.stm .onb { box-shadow: none; background: rgba(14,20,34,.6); }
.stm .mh-reveal { opacity: 1; transform: none; }
.stm-title { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; line-height: 1.2; margin: 6px 0 8px; outline: none; }
.stm-sub { font-size: .92rem; color: var(--text-dim); margin: 0 0 22px; line-height: 1.6; max-width: 60ch; }
.stm-ctx { display: inline-flex; gap: 8px; align-items: center; font-size: .8rem; color: var(--text); border: 1px solid rgba(96,165,250,.35); background: rgba(37,99,235,.1); border-radius: 999px; padding: 6px 12px; margin: -8px 0 20px; }
.stm-ctx span { color: var(--text-faint); }
.stm-paths { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 760px) { .stm-paths { grid-template-columns: 1fr 1fr; gap: 18px; } }
.stm-path { font: inherit; text-align: start; color: var(--text-dim); cursor: pointer; display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 3vw, 28px); border-radius: 20px; border: 1px solid var(--border-strong); background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015)); transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--ease); }
.stm-path:hover { border-color: rgba(96,165,250,.7); box-shadow: 0 0 0 3px rgba(59,130,246,.12), 0 24px 60px -30px rgba(59,130,246,.9); transform: translateY(-2px); }
.stm-path[data-path="b"]:hover { border-color: rgba(167,139,250,.7); box-shadow: 0 0 0 3px rgba(124,58,237,.14), 0 24px 60px -30px rgba(124,58,237,.9); }
@media (prefers-reduced-motion: reduce) { .stm-path:hover { transform: none; } }
.stm-path-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; color: #bfdbfe; background: linear-gradient(135deg, rgba(37,99,235,.35), rgba(37,99,235,.12)); border: 1px solid rgba(96,165,250,.35); margin-bottom: 4px; }
.stm-path[data-path="b"] .stm-path-icon { color: #ddd6fe; background: linear-gradient(135deg, rgba(124,58,237,.38), rgba(124,58,237,.12)); border-color: rgba(167,139,250,.38); }
.stm-path-title { font-size: 1.2rem; font-weight: 800; color: var(--text); }
.stm-path-desc { font-size: .9rem; color: var(--text); line-height: 1.5; }
.stm-path-text { font-size: .82rem; line-height: 1.6; }
.stm-path-hl { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.stm-path-hl span { font-size: .74rem; color: var(--text-dim); border: 1px solid var(--border-soft); border-radius: 999px; padding: 4px 10px; }
.stm-path-cta { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: #93c5fd; }
.stm-path[data-path="b"] .stm-path-cta { color: #c4b5fd; }
[dir="ltr"] .stm-path-cta i { transform: scaleX(-1); }
.stm-span { grid-column: 1 / -1; }
.stm select, .stm textarea { font: inherit; font-size: .92rem; font-weight: 500; color: var(--text); background: rgba(255,255,255,.035); border: 1px solid var(--border-strong); border-radius: 12px; padding: 11px 13px; width: 100%; box-sizing: border-box; }
.stm select option { background: #0b1322; color: var(--text); }
.stm textarea { resize: vertical; min-height: 104px; line-height: 1.6; }
.stm select:focus, .stm textarea:focus { outline: none; border-color: rgba(96,165,250,.8); box-shadow: 0 0 0 3px rgba(59,130,246,.18); }
.stm [aria-invalid="true"] { border-color: rgba(248,113,113,.7); }
.stm-ref { font-size: .74rem; color: #93c5fd; }
.stm-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
.stm-actions-3 { justify-content: center; }
.stm-summary { align-self: start; border: 1px solid var(--border-soft); border-radius: 16px; background: rgba(255,255,255,.02); padding: 18px; }
.stm-summary dl, .stm-done-sum { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.stm-summary dl > div, .stm-done-sum > div { display: flex; justify-content: space-between; gap: 10px; font-size: .8rem; }
.stm-summary dt, .stm-done-sum dt { color: var(--text-faint); }
.stm-summary dd, .stm-done-sum dd { margin: 0; color: var(--text); text-align: end; }
.stm-done { text-align: center; max-width: 560px; margin: 0 auto; padding-top: 10px; }
.stm-done .stm-sub { margin-inline: auto; }
.stm-done-sum { text-align: start; border: 1px solid var(--border-soft); border-radius: 14px; padding: 14px 16px; }
@media (max-width: 600px) {
  .stm { width: 100vw; max-height: 100dvh; margin: 0; top: auto; bottom: 0; }
  .stm-shell { max-height: 94dvh; border-radius: 22px 22px 0 0; }
  .stm-actions > * { flex: 1 1 100%; justify-content: center; }
}
[dir="ltr"] .stm-title, [dir="ltr"] .stm-path-title { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.02em; }
[dir="ltr"] .stm-path-cta { font-weight: 600; }

/* ── Secondary service entry points (subtle) ── */
.mh-addon-group { display: flex; flex-direction: column; }
.mh-addon-group > ul { flex-grow: 1; }
.mh-addon-cta { margin-top: 14px; font-size: 0.78rem; }
.mh-link-quiet { margin-top: 8px; font-size: 0.8rem; color: var(--text-dim); }
.mh-link-quiet:hover { color: var(--blue-2); }
.mh-offer-col .mh-link-quiet { display: flex; width: max-content; }
.mh-price-card a.mh-price-alt { margin-top: 8px; font-size: 0.76rem; font-weight: 500; color: var(--text-faint); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(148,163,184,.35); }
.mh-price-card a.mh-price-alt:hover { color: var(--pc); }
.mh-addon-cta:focus-visible, .mh-link-quiet:focus-visible, .mh-price-alt:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 4px; }

/* ── Quick Start: one light, centred column (no summary panel) ── */
.stm-quick { max-width: 620px; margin: 0 auto; padding-top: 4px; }
.stm-quick .onb-kicker { display: inline-flex; align-items: center; gap: 6px; }
.stm-quick .stm-sub { margin-bottom: 20px; }
.stm-service { margin-bottom: 14px; }
.stm-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .78rem; font-weight: 500; color: #93c5fd; }
.stm-hint-ctx { color: var(--text); border: 1px solid rgba(96,165,250,.3); background: rgba(37,99,235,.1); border-radius: 999px; padding: 2px 10px; }
.stm-fields { gap: 14px; }
.stm-quick-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin-top: 22px; }
.stm-switch { font: inherit; font-size: .84rem; font-weight: 600; color: var(--text-dim); background: none; border: 0; padding: 8px 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.stm-switch:hover { color: #c4b5fd; }
.stm-switch:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 6px; }
.stm-quick-fine { text-align: center; }
.stm-path-viz { display: flex; gap: 5px; margin: 2px 0 6px; }
.stm-path-viz i { width: 18px; height: 4px; border-radius: 4px; background: rgba(167,139,250,.35); }
.stm-path-viz i:first-child { background: #a78bfa; }
.stm-path-viz i.stm-viz-one { width: 56px; background: #60a5fa; }
@media (max-width: 600px) {
  .stm-body { padding-inline: 16px; }
  .stm-quick-actions { position: sticky; bottom: 0; margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(11,19,34,.6), #0b1322 35%); flex-direction: column; align-items: stretch; gap: 4px; }
  .stm-quick-actions .stm-submit { justify-content: center; min-height: 48px; }
  .stm-switch { justify-content: center; min-height: 44px; }
  .stm .onb-field input, .stm select, .stm textarea { font-size: 16px; min-height: 46px; }
}

/* ── Reference ID + confirmation polish ── */
.ref-block { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(96,165,250,.38); border-radius: 14px; background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(124,58,237,.1)); box-shadow: 0 0 0 3px rgba(59,130,246,.06), 0 16px 40px -26px rgba(59,130,246,.9); text-align: start; }
.ref-label { font-size: .72rem; letter-spacing: .06em; color: var(--text-faint); flex-basis: 100%; }
.ref-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.02rem; font-weight: 600; letter-spacing: .04em; color: var(--text); user-select: all; }
.ref-copy { font: inherit; font-size: .78rem; font-weight: 600; color: #93c5fd; background: rgba(255,255,255,.04); border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 12px; min-height: 36px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.ref-copy:hover { border-color: rgba(96,165,250,.6); }
.ref-copy.is-copied { color: #86efac; border-color: rgba(134,239,172,.5); }
.ref-copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.ref-keep { margin: -6px 0 14px; }
.onb-done .ref-block, .stm-done .ref-block { max-width: 460px; margin-inline: auto; }
.onb-done .ref-keep, .stm-done .ref-keep { text-align: center; }
.onb-done-icon .fa-check { color: #86efac; }
.onb-done-icon:has(.fa-check) { background: rgba(34,197,94,.12); border-color: rgba(134,239,172,.35); }
.onb-done-sum { max-width: 460px; margin: 0 auto; text-align: start; }
.onb-done-sum > div { grid-template-columns: minmax(110px, 42%) 1fr; }
.stm-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 18px; }
.stm-done .stm-switch { margin: 8px auto 0; display: flex; }
@media (max-width: 600px) { .stm-done-actions > * { flex: 1 1 100%; justify-content: center; min-height: 46px; } .ref-copy { flex: 1 1 100%; justify-content: center; } }

/* ── Approved showcase artwork (hero + product cards) ── */
@media (min-width: 1040px) { .mh-hero-grid.mh-hero-grid-art { grid-template-columns: 1fr 1fr; gap: 40px; } }
.hp-stage.hp-stage-art { height: auto; perspective: none; display: flex; align-items: center; justify-content: center; margin-inline-end: 0; }
.hp-stage-art .hp-art { position: relative; width: 100%; opacity: 0; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .5s var(--ease), opacity .8s var(--ease); }
.hp-stage-art.hp-ready .hp-art { opacity: 1; }
.hp-stage-art .hp-art::before { content: ''; position: absolute; inset: 10% 8%; z-index: -1; border-radius: 40px; background: radial-gradient(closest-side, rgba(59,130,246,.18), rgba(124,58,237,.10) 60%, transparent); filter: blur(28px); }
.hp-stage-art img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 30px 80px -40px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06);
  -webkit-mask-image: radial-gradient(130% 120% at 50% 50%, #000 78%, transparent 100%); mask-image: radial-gradient(130% 120% at 50% 50%, #000 78%, transparent 100%); }
@media (max-width: 1039px) { .hp-stage.hp-stage-art { height: auto; max-width: 720px; } }
@media (prefers-reduced-motion: reduce) { .hp-stage-art .hp-art { opacity: 1; transform: none; transition: none; } }

.mh-product-art.mh-showcase { aspect-ratio: auto; min-height: 0; height: clamp(420px, 42vw, 600px); padding: 20px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(60% 60% at 50% 45%, rgba(var(--tint),.16), transparent 70%), linear-gradient(180deg, rgba(21,31,49,.6), rgba(10,16,28,.8)); }
.mh-product-art.mh-showcase img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 16px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
@media (max-width: 899px) { .mh-product-art.mh-showcase { height: auto; padding: 14px; } .mh-product-art.mh-showcase img { width: 100%; max-width: 520px; max-height: none; } }

/* ═════════════ Layered product composition (hero, product cards, Explore heroes) ═════════════
   Depth comes from overlapping structure, offsets and real shadows — not glow.
   Colours per product via --lc (RGB) and --lc2 (RGB); logical properties mirror in Arabic.   */
.lc-card, .lc-explore, .lc-hero { --lc: 124,58,237; --lc2: 59,130,246; --lc-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 28px 56px -28px rgba(0,0,0,.85), 0 10px 20px -12px rgba(0,0,0,.6); }
.lc-chatrio, .lc-x-chatrio { --lc: 139,92,246; --lc2: 59,130,246; }
.lc-voxnotiq, .lc-x-voxnotiq { --lc: 168,85,247; --lc2: 236,72,153; }
.lc-mihrabi, .lc-x-mihrabi { --lc: 196,146,64; --lc2: 30,41,82; }
.lc-sila, .lc-x-sila { --lc: 239,128,96; --lc2: 253,186,116; }

/* shared pieces */
.lc-tile { position: absolute; z-index: 4; width: 64px; height: 64px; border-radius: 18px; overflow: hidden; background: #0b1220;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 34px -14px rgba(0,0,0,.9); animation: lcFloat 8s ease-in-out infinite; }
.lc-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
@keyframes lcFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
.lc-frag { position: absolute; z-index: 3; border-radius: 16px; background: linear-gradient(180deg, #172238, #0f1729); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 22px 40px -20px rgba(0,0,0,.9); padding: 12px; display: flex; gap: 6px; }
/* chat fragment: two message pills */
.lc-frag-chat { width: 132px; flex-direction: column; }
.lc-frag-chat i { display: block; height: 16px; border-radius: 10px 10px 10px 4px; background: rgba(255,255,255,.1); width: 78%; }
.lc-frag-chat i:nth-child(2) { align-self: flex-end; width: 64%; border-radius: 10px 10px 4px 10px; background: linear-gradient(135deg, rgba(139,92,246,.85), rgba(59,130,246,.85)); }
.lc-frag-chat i:nth-child(3) { width: 52%; }
/* waveform fragment: record dot + bars */
.lc-frag-wave { width: 148px; height: 52px; align-items: center; }
.lc-frag-wave b { flex: 0 0 22px; height: 22px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px rgba(239,68,68,.18); margin-inline-end: 4px; }
.lc-frag-wave i { flex: 1; border-radius: 3px; background: linear-gradient(180deg, #c084fc, #ec4899); height: 40%; }
.lc-frag-wave i:nth-child(3), .lc-frag-wave i:nth-child(8) { height: 80%; } .lc-frag-wave i:nth-child(4), .lc-frag-wave i:nth-child(10) { height: 55%; }
.lc-frag-wave i:nth-child(5) { height: 95%; } .lc-frag-wave i:nth-child(6) { height: 30%; } .lc-frag-wave i:nth-child(9) { height: 65%; }
/* widget fragment: gold ring + two lines */
.lc-frag-widget { width: 118px; height: 118px; flex-direction: column; justify-content: flex-end; background: linear-gradient(160deg, #1c1a14, #0e1322); box-shadow: 0 0 0 1px rgba(196,146,64,.35), 0 22px 40px -20px rgba(0,0,0,.9); }
.lc-frag-widget b { position: absolute; top: 14px; inset-inline-start: 14px; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(217,162,76,.9); border-inline-end-color: rgba(217,162,76,.2); }
.lc-frag-widget i { display: block; height: 7px; border-radius: 4px; background: rgba(246,220,174,.35); width: 80%; }
.lc-frag-widget i:last-child { width: 50%; background: rgba(217,162,76,.6); }
/* circle fragment: three avatars + line */
.lc-frag-circle { width: 136px; align-items: center; background: linear-gradient(180deg, #2a1c1a, #171b28); box-shadow: 0 0 0 1px rgba(251,143,108,.3), 0 22px 40px -20px rgba(0,0,0,.9); }
.lc-frag-circle b { flex: 0 0 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #fdba74, #fb8f6c); box-shadow: 0 0 0 2px #1c1b27; margin-inline-end: -10px; }
.lc-frag-circle b:nth-child(2) { background: linear-gradient(135deg, #fecaca, #f472b6); } .lc-frag-circle b:nth-child(3) { background: linear-gradient(135deg, #fde68a, #fb923c); }
.lc-frag-circle i { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,220,203,.3); margin-inline-start: 18px; }

/* ── Hero: collage with an offset back panel, a system card and two identity tiles ── */
.lc-hero { padding: 36px 0 44px; }
.lc-hero .hp-art { width: 90%; margin-inline-start: auto; z-index: 2; }
.lc-hero .hp-art::before { display: none; }
.lc-hero .hp-art img { -webkit-mask-image: none; mask-image: none; border-radius: 20px; box-shadow: var(--lc-shadow), 0 0 0 1px rgba(255,255,255,.07); }
.lc-hero .lc-h-back { position: absolute; z-index: 0; inset-inline-start: 0; top: 0; width: 62%; height: 74%; border-radius: 26px;
  background: linear-gradient(150deg, #1a2440 0%, #121a2e 55%, #0d1322 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -40px rgba(0,0,0,.9); }
.lc-hero .lc-h-back::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .5;
  background-image: linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px); background-size: 28px 28px; }
.lc-hero .lc-h-card { position: absolute; z-index: 3; inset-inline-start: 2%; bottom: 6%; width: 190px; padding: 14px; border-radius: 16px; display: grid; grid-template-columns: 30px 1fr; gap: 8px 10px; align-items: center;
  background: linear-gradient(180deg, #182238, #0f1729); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 44px -22px rgba(0,0,0,.95); }
.lc-sk-dot { grid-row: span 2; width: 30px; height: 30px; border-radius: 10px; background: linear-gradient(135deg, #3b82f6, #7c3aed); }
.lc-sk-line { height: 8px; border-radius: 4px; background: rgba(255,255,255,.16); }
.lc-sk-short { width: 60%; background: rgba(255,255,255,.09); }
.lc-sk-bars { grid-column: 1 / -1; display: flex; align-items: flex-end; gap: 5px; height: 34px; margin-top: 4px; }
.lc-sk-bars i { flex: 1; border-radius: 3px 3px 0 0; background: rgba(96,165,250,.55); height: 40%; }
.lc-sk-bars i:nth-child(2) { height: 70%; } .lc-sk-bars i:nth-child(3) { height: 52%; background: rgba(139,92,246,.7); } .lc-sk-bars i:nth-child(4) { height: 88%; } .lc-sk-bars i:nth-child(5) { height: 62%; }
.lc-hero .lc-h-tile-a { position: absolute; top: 4%; inset-inline-end: 4%; left: auto; }
[dir="rtl"] .lc-hero .lc-h-tile-a { right: auto; }
.lc-hero .lc-h-tile-b { position: absolute; bottom: 0; inset-inline-end: 22%; width: 54px; height: 54px; border-radius: 15px; animation-delay: -3s; }
.lc-hero.hp-stage .lc-tile, .lc-hero.hp-stage .lc-h-card, .lc-hero.hp-stage .lc-h-back { opacity: 0; }
.lc-hero.hp-ready .lc-tile, .lc-hero.hp-ready .lc-h-card, .lc-hero.hp-ready .lc-h-back { opacity: 1; }
.lc-hero .lc-tile img { border-radius: 0; box-shadow: none; }

/* ── Homepage product cards: poster embedded in a composition, no boxed frame ── */
.mh-product-art.lc-card { background: none !important; border: 0 !important; box-shadow: none !important; overflow: visible; padding: 26px 34px 30px; height: auto; min-height: 0; aspect-ratio: auto; display: flex; justify-content: center; }
.lc-card .lc-back { position: absolute; z-index: 0; inset-inline-end: 4%; top: 10%; width: 66%; height: 78%; border-radius: 28px;
  background: linear-gradient(155deg, rgba(var(--lc),.55), rgba(var(--lc2),.35) 55%, rgba(13,19,34,.9)); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -40px rgba(0,0,0,.9); }
.lc-card .lc-back::after { content: ''; position: absolute; inset: 14px; border-radius: 20px; border: 1px solid rgba(255,255,255,.1); }
.lc-card .lc-poster { position: relative; z-index: 2; display: block; width: auto; max-width: 100%; max-height: 520px; height: auto; border-radius: 18px; box-shadow: var(--lc-shadow), 0 0 0 1px rgba(255,255,255,.08) !important; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.lc-voxnotiq .lc-poster { max-height: 460px; }
.lc-card .lc-tile { bottom: 8%; inset-inline-start: 6%; }
.lc-card .lc-frag { top: 16%; inset-inline-start: 2%; }
.lc-mihrabi .lc-frag { top: auto; bottom: 26%; inset-inline-start: auto; inset-inline-end: 1%; }
.lc-voxnotiq .lc-frag { top: 8%; inset-inline-start: auto; inset-inline-end: 0; }
@media (hover: hover) and (pointer: fine) {
  .mh-product-row:hover .lc-card .lc-poster { transform: translateY(-4px); box-shadow: 0 1px 0 rgba(255,255,255,.06) inset, 0 40px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.1) !important; }
}

/* ── Explore heroes: structural back panel, grid texture, identity tile, product fragment ── */
.lc-explore { padding: 28px 22px 34px; }
.lc-explore::before { display: none; }
.lc-explore .pp-showcase { position: relative; z-index: 2; box-shadow: var(--lc-shadow), 0 0 0 1px rgba(255,255,255,.08); }
.lc-x-back { position: absolute; z-index: 0; top: 0; bottom: 12%; inset-inline-end: 0; width: 72%; border-radius: 30px;
  background: linear-gradient(160deg, rgba(var(--lc),.5), rgba(var(--lc2),.28) 60%, rgba(13,19,34,.85)); box-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 30px 60px -40px rgba(0,0,0,.9); }
.lc-x-grid { position: absolute; z-index: 1; bottom: 0; inset-inline-start: 0; width: 46%; height: 42%; border-radius: 24px; opacity: .8;
  background-color: rgba(15,23,41,.9); background-image: radial-gradient(rgba(var(--lc),.45) 1.2px, transparent 1.3px); background-size: 16px 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.06); }
.lc-x-tile { width: 76px; height: 76px; border-radius: 22px; top: 6%; inset-inline-start: 4%; }
.lc-frag-lg { transform: scale(1.12); transform-origin: center; }
.lc-x-voxnotiq .lc-frag { bottom: 10%; inset-inline-end: -2%; }
.lc-x-mihrabi .lc-frag { bottom: 12%; inset-inline-start: 2%; }
.lc-x-sila .lc-frag { bottom: 9%; inset-inline-end: -1%; }
/* Chatrio: a real Tasks screen tilted behind the poster */
.lc-device { position: absolute; z-index: 1; width: 34%; top: 14%; inset-inline-end: -2%; border-radius: 26px; overflow: hidden; border: 5px solid #0b0e15; background: #0b0e15;
  transform: rotate(6deg); box-shadow: 0 0 0 1px rgba(139,92,246,.4), 0 30px 60px -28px rgba(0,0,0,.9); }
[dir="rtl"] .lc-device { transform: rotate(-6deg); }
.lc-device img { display: block; width: 100%; height: auto; }
/* Mihrabi: arch-topped structural panel (echoes the poster's arch), Sila: two stacked warm panels */
.lc-x-mihrabi .lc-x-back { border-radius: 200px 200px 28px 28px; background: linear-gradient(170deg, rgba(196,146,64,.35), rgba(30,41,82,.9) 60%); box-shadow: 0 0 0 1px rgba(217,162,76,.35); }
.lc-x-sila .lc-x-grid { background-image: none; background-color: rgba(253,186,116,.2); border-radius: 30px; }

/* ── Responsive: fewer layers on tablet, poster + icon on phones ── */
@media (max-width: 1039px) {
  .lc-hero .lc-h-card, .lc-hero .lc-h-tile-b, .lc-x-grid, .lc-device { display: none; }
  .lc-hero .hp-art { width: 94%; }
}
@media (max-width: 899px) {
  .lc-frag, .lc-hero .lc-h-tile-a { display: none; }
  .mh-product-art.lc-card { padding: 16px 12px 22px; }
  .lc-card .lc-back { width: 80%; top: 6%; height: 84%; inset-inline-end: 0; }
  .lc-card .lc-poster { width: 100%; max-width: 480px; max-height: none; }
  .lc-card .lc-tile { width: 52px; height: 52px; border-radius: 15px; bottom: 4%; inset-inline-start: 2%; }
  .lc-hero { padding: 18px 0 20px; } .lc-hero .hp-art { width: 100%; }
  .lc-hero .lc-h-back { width: 80%; height: 80%; }
  .lc-explore { padding: 14px 8px 20px; } .lc-x-back { width: 82%; bottom: 6%; }
  .lc-x-tile { width: 58px; height: 58px; border-radius: 16px; top: 2%; inset-inline-start: 0; }
}
@media (prefers-reduced-motion: reduce) { .lc-tile { animation: none; } .lc-card .lc-poster { transition: none; } }
.lc-hero .lc-tile img { -webkit-mask-image: none; mask-image: none; }
/* layered composition — geometry pass */
@media (min-width: 900px) {
  .lc-hero { padding: 44px 0 56px; }
  .lc-hero .hp-art { width: 84%; margin-top: 26px; }
  .lc-hero .lc-h-back { width: 58%; height: 68%; background: linear-gradient(150deg, #22305a 0%, #172040 55%, #111830 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.09), 0 30px 60px -40px rgba(0,0,0,.9); }
  .lc-hero .lc-h-card { inset-inline-start: 0; bottom: 4%; }
  .lc-hero .lc-h-tile-a { top: 0; inset-inline-end: 9%; }
  .lc-hero .lc-h-tile-b { bottom: 2%; inset-inline-end: auto; inset-inline-start: 42%; }

  .mh-product-art.lc-card { justify-content: flex-start; padding: 34px 0 40px; }
  .lc-card .lc-poster { max-height: 470px; margin-inline-start: 5%; }
  .lc-voxnotiq .lc-poster { max-height: 410px; }
  .lc-card .lc-back { inset-inline-end: 0; top: 7%; width: 64%; height: 86%; }
  .lc-card .lc-frag, .lc-voxnotiq .lc-frag, .lc-mihrabi .lc-frag { top: 20%; bottom: auto; inset-inline-start: auto; inset-inline-end: 7%; }
  .lc-card .lc-tile { bottom: 11%; inset-inline-start: auto; inset-inline-end: 33%; width: 70px; height: 70px; border-radius: 20px; }
  .mh-reverse .mh-product-art.lc-card { justify-content: flex-end; }
  .mh-reverse .lc-card .lc-poster { margin-inline-start: 0; margin-inline-end: 5%; }
  .mh-reverse .lc-card .lc-back { inset-inline-end: auto; inset-inline-start: 0; }
  .mh-reverse .lc-card .lc-frag { inset-inline-end: auto; inset-inline-start: 7%; }
  .mh-reverse .lc-card .lc-tile { inset-inline-end: auto; inset-inline-start: 33%; }
}
/* specificity: beat the earlier .mh-product-art.mh-showcase img sizing */
.mh-product-art.lc-card img.lc-poster { width: auto; max-width: 100%; max-height: 470px; height: auto; }
.mh-product-art.lc-voxnotiq img.lc-poster { max-height: 410px; }
.mh-product-art.lc-card .lc-tile img { max-height: none; border-radius: 0; box-shadow: none; }
@media (max-width: 899px) { .mh-product-art.lc-card img.lc-poster { width: 100%; max-width: 480px; max-height: none; } }

/* ═════════════ Experimental product art direction (CSS-drawn artifacts, no images) ═════════════
   .xa        per-product artifact layer inside a card / Explore stage (absolute, inset 0)
   .xh-*      hero ecosystem artifacts (parallax layers)                                       */
.xa { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.xa i { position: absolute; display: block; font-style: normal; }
.xa b { display: block; }
.mh-reverse .lc-card .xa { transform: scaleX(-1); }
.lc-chatrio .lc-frag { display: none; }

/* ── Chatrio: a chain of conversation shells, a typing capsule, reaction orbs, a dashed signal path ── */
.xa-chatrio .xa-bub { border: 1.5px solid rgba(167,139,250,.55); border-radius: 22px 22px 22px 6px; background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(59,130,246,.04)); }
.xa-chatrio .xa-bub1 { width: 118px; height: 66px; top: 5%; inset-inline-end: 3%; transform: rotate(-8deg); }
.xa-chatrio .xa-bub2 { width: 88px; height: 52px; top: 13%; inset-inline-end: 15%; transform: rotate(7deg); border-color: rgba(96,165,250,.6); border-radius: 22px 22px 6px 22px; }
.xa-chatrio .xa-bub3 { width: 58px; height: 36px; top: 24%; inset-inline-end: 6%; transform: rotate(-3deg); background: linear-gradient(135deg, #8b5cf6, #3b82f6); border: 0; box-shadow: 0 16px 30px -14px rgba(59,130,246,.8); }
.xa-chatrio .xa-typing { z-index: 3; bottom: 31%; inset-inline-end: 5%; width: 74px; height: 30px; border-radius: 15px; background: #111a2e; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 14px 26px -12px rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; gap: 6px; }
.xa-chatrio .xa-typing b { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: xaType 1.6s ease-in-out infinite; }
.xa-chatrio .xa-typing b:nth-child(2) { animation-delay: .2s; } .xa-chatrio .xa-typing b:nth-child(3) { animation-delay: .4s; }
@keyframes xaType { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.xa-chatrio .xa-orbs { bottom: 6%; inset-inline-end: 12%; width: 80px; height: 50px; }
.xa-chatrio .xa-orbs b { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 30%, #fff 0 6%, #c4b5fd 16%, #7c3aed 58%, #2e1065 100%); box-shadow: 0 10px 18px -8px rgba(0,0,0,.8); }
.xa-chatrio .xa-orbs b:nth-child(1) { width: 34px; height: 34px; inset-inline-end: 0; bottom: 0; }
.xa-chatrio .xa-orbs b:nth-child(2) { width: 22px; height: 22px; inset-inline-end: 38px; bottom: 18px; background: radial-gradient(circle at 32% 30%, #fff 0 6%, #93c5fd 18%, #2563eb 60%, #172554 100%); }
.xa-chatrio .xa-orbs b:nth-child(3) { width: 13px; height: 13px; inset-inline-end: 62px; bottom: 4px; }
.xa-chatrio .xa-path { top: 36%; inset-inline-end: 16%; width: 150px; height: 110px; border-top: 1.5px dashed rgba(167,139,250,.45); border-inline-end: 1.5px dashed rgba(167,139,250,.45); border-start-end-radius: 90px; }

/* ── VoxNotiq: a skewed spectrogram slab, a radar of rings with a slow sweep, a scan line and a frequency ruler ── */
.xa-voxnotiq .xa-spectro { z-index: 3; bottom: 10%; inset-inline-end: 3%; width: 150px; height: 74px; border-radius: 12px; transform: skewX(-9deg); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 18px 34px -16px rgba(0,0,0,.9);
  background: linear-gradient(180deg, rgba(6,10,20,.2), rgba(6,10,20,.75)), repeating-linear-gradient(90deg, #ec4899 0 3px, #7c3aed 3px 6px, #22d3ee 6px 8px, #0b1020 8px 11px); }
.xa-voxnotiq .xa-radar { top: 3%; inset-inline-end: 9%; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; opacity: .85;
  background: repeating-radial-gradient(circle, transparent 0 14px, rgba(192,132,252,.28) 14px 15px); box-shadow: 0 0 0 1px rgba(192,132,252,.3); }
.xa-voxnotiq .xa-radar b { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(236,72,153,.45), transparent 22%); animation: xaSweep 9s linear infinite; }
@keyframes xaSweep { to { transform: rotate(1turn); } }
.xa-voxnotiq .xa-scan { top: 56%; inset-inline-end: 0; width: 42%; height: 1px; background: linear-gradient(90deg, transparent, #ec4899, #22d3ee); }
.xa-voxnotiq .xa-ticks { top: 22%; inset-inline-end: 1%; width: 16px; height: 190px; background: repeating-linear-gradient(180deg, rgba(34,211,238,.55) 0 1px, transparent 1px 9px); -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent); mask-image: linear-gradient(90deg, #000 40%, transparent); }

/* ── Mihrabi: offset arch windows, a slender lantern, a vast thin arc and a gold hairline with a diamond ── */
.xa-mihrabi .xa-arch { border: 1px solid rgba(217,162,76,.6); border-bottom: 0; border-radius: 999px 999px 0 0; }
.xa-mihrabi .xa-arch1 { width: 120px; height: 172px; bottom: 7%; inset-inline-end: 7%; }
.xa-mihrabi .xa-arch2 { width: 92px; height: 136px; bottom: 11%; inset-inline-end: 13%; border-color: rgba(217,162,76,.35); background: linear-gradient(180deg, rgba(217,162,76,.1), transparent 70%); }
.xa-mihrabi .xa-arch3 { width: 62px; height: 96px; bottom: 15%; inset-inline-end: 19%; border-color: rgba(246,220,174,.8); }
.xa-mihrabi .xa-lantern { z-index: 3; bottom: 42%; inset-inline-end: 4%; width: 12px; height: 78px; border-radius: 6px; background: linear-gradient(180deg, #f6dcae, #d9a24c 45%, #7a4f14); box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 10px 18px -8px rgba(0,0,0,.9); }
.xa-mihrabi .xa-lantern::before { content: ''; position: absolute; bottom: 100%; left: 50%; width: 1px; height: 46px; background: linear-gradient(transparent, rgba(217,162,76,.8)); }
.xa-mihrabi .xa-arc { bottom: -6%; inset-inline-end: -3%; width: 260px; height: 260px; border-radius: 50%; border-top: 1px solid rgba(217,162,76,.45); border-inline-start: 1px solid rgba(217,162,76,.2); transform: rotate(-24deg); }
.xa-mihrabi .xa-rule { top: 56%; inset-inline-end: 0; width: 34%; height: 1px; background: linear-gradient(90deg, transparent, rgba(217,162,76,.8)); }
.xa-mihrabi .xa-rule::after { content: ''; position: absolute; inset-inline-end: -3px; top: -3px; width: 7px; height: 7px; background: #d9a24c; transform: rotate(45deg); }
[dir="rtl"] .xa-mihrabi .xa-rule { background: linear-gradient(270deg, transparent, rgba(217,162,76,.8)); }

/* ── Sila: a fanned stack of keepsake prints, a postmark, a thread with a pin ── */
.lc-sila .lc-frag { top: auto; bottom: 34%; inset-inline-end: 20%; }
.xa-sila .xa-photo { width: 104px; padding: 7px 7px 22px; border-radius: 6px; background: #fff3ea; box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 20px 34px -16px rgba(0,0,0,.85); }
.xa-sila .xa-photo b { height: 84px; border-radius: 3px; background: radial-gradient(circle at 70% 28%, #fff7d6 0 9%, transparent 10%), linear-gradient(170deg, #fed7aa, #fb8f6c 55%, #9a3412); }
.xa-sila .xa-p1 { top: 4%; inset-inline-end: 4%; transform: rotate(9deg); }
.xa-sila .xa-p2 { top: 10%; inset-inline-end: 17%; transform: rotate(-7deg); }
.xa-sila .xa-p2 b { background: radial-gradient(circle at 30% 70%, rgba(255,255,255,.5) 0 12%, transparent 13%), linear-gradient(200deg, #fecdd3, #f472b6 60%, #831843); }
.xa-sila .xa-p3 { z-index: 3; top: 24%; inset-inline-end: 7%; width: 78px; padding: 5px 5px 16px; transform: rotate(-2deg); }
.xa-sila .xa-p3 b { height: 62px; background: linear-gradient(160deg, #fde68a, #fb923c 60%, #7c2d12); }
.xa-sila .xa-stamp { z-index: 3; bottom: 9%; inset-inline-end: 5%; width: 66px; height: 66px; border-radius: 50%; border: 2px dashed rgba(251,143,108,.75); box-shadow: inset 0 0 0 6px rgba(15,20,34,.9), inset 0 0 0 7px rgba(251,143,108,.4); transform: rotate(-14deg); background: rgba(15,20,34,.85); }
.xa-sila .xa-thread { top: 2%; inset-inline-end: 22%; width: 120px; height: 60px; border-top: 1.5px solid rgba(253,186,116,.55); border-start-start-radius: 60px; border-start-end-radius: 60px; }
.xa-sila .xa-thread b { position: absolute; top: -6px; inset-inline-end: -4px; width: 10px; height: 10px; border-radius: 50%; background: #fb8f6c; box-shadow: 0 0 0 3px rgba(251,143,108,.25); }

/* ── Explore stages: same artifacts, larger and closer to the poster edges ── */
.lc-explore .pp-showcase { width: min(420px, 100%); }
.xa-lg { z-index: 1; }
.xa-lg.xa-chatrio .xa-bub1 { top: 2%; } .xa-lg.xa-chatrio .xa-typing { bottom: 22%; inset-inline-end: 0; } .xa-lg.xa-chatrio .xa-orbs { bottom: 2%; inset-inline-end: 6%; }
.xa-lg.xa-voxnotiq .xa-radar { width: 190px; height: 190px; top: -2%; inset-inline-end: 0; } .xa-lg.xa-voxnotiq .xa-spectro { bottom: 18%; inset-inline-end: -1%; }
.xa-lg.xa-mihrabi .xa-arch1 { width: 150px; height: 214px; bottom: 4%; inset-inline-end: 0; } .xa-lg.xa-mihrabi .xa-arch2 { bottom: 8%; inset-inline-end: 6%; } .xa-lg.xa-mihrabi .xa-arch3 { bottom: 12%; inset-inline-end: 12%; }
.xa-lg.xa-sila .xa-p1 { top: 0; inset-inline-end: 0; } .xa-lg.xa-sila .xa-p2 { top: 4%; inset-inline-end: 12%; } .xa-lg.xa-sila .xa-p3 { top: auto; bottom: 20%; inset-inline-end: -1%; } .xa-lg.xa-sila .xa-stamp { bottom: 3%; inset-inline-end: 12%; }

/* ── Hero ecosystem: a tilted orbit with product nodes, a prism shard, a punch strip, registration marks, keycaps ── */
.lc-hero .xh-orbit { z-index: 1; top: 24%; left: -2%; width: 104%; height: 56%; border-radius: 50%; border: 1px solid rgba(255,255,255,.13); rotate: -9deg; }
.xh-orbit b { position: absolute; width: 11px; height: 11px; border-radius: 50%; translate: -50% -50%; box-shadow: 0 0 0 4px rgba(8,16,28,.9), 0 0 0 5px rgba(255,255,255,.12); }
.xh-orbit .xh-n1 { left: 0; top: 50%; background: #d9a24c; } .xh-orbit .xh-n2 { left: 50%; top: 0; background: #8b5cf6; }
.xh-orbit .xh-n3 { left: 100%; top: 50%; background: #fb8f6c; } .xh-orbit .xh-n4 { left: 29%; top: 95.4%; background: #3b82f6; }
.lc-hero .xh-shard { z-index: 1; top: 0; inset-inline-start: 46%; width: 92px; height: 118px; clip-path: polygon(22% 0, 100% 26%, 74% 100%, 0 72%);
  background: linear-gradient(150deg, rgba(196,181,253,.9), rgba(124,58,237,.75) 45%, rgba(37,99,235,.55)); }
.lc-hero .xh-shard::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.45) 48%, transparent 56%); }
.lc-hero .xh-punch { z-index: 3; bottom: 12%; inset-inline-end: 0; width: 30px; height: 158px; border-radius: 8px; background-color: #0f1729;
  background-image: radial-gradient(circle, #05080f 2.4px, transparent 2.6px); background-size: 10px 12px; background-position: 5px 6px; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 16px 30px -14px rgba(0,0,0,.9); }
.lc-hero .xh-punch::before { content: ''; position: absolute; top: 10px; left: 50%; width: 2px; height: 30%; translate: -50% 0; background: #fb8f6c; border-radius: 2px; }
.lc-hero .xh-mark { z-index: 1; width: 22px; height: 22px; }
.xh-mark::before, .xh-mark::after { content: ''; position: absolute; background: rgba(255,255,255,.35); }
.xh-mark::before { left: 50%; top: 0; width: 1px; height: 100%; } .xh-mark::after { top: 50%; left: 0; height: 1px; width: 100%; }
.lc-hero .xh-mark-a { top: 7%; inset-inline-start: 9%; } .lc-hero .xh-mark-b { bottom: 0; inset-inline-end: 34%; }
.lc-hero .xh-keys { z-index: 4; top: 3%; inset-inline-end: 24%; display: flex; gap: 7px; }
.xh-keys b { width: 13px; height: 13px; border-radius: 3px; transform: rotate(45deg); box-shadow: 0 6px 10px -4px rgba(0,0,0,.8); }
.xh-keys b:nth-child(1) { background: #d9a24c; } .xh-keys b:nth-child(2) { background: #8b5cf6; translate: 0 6px; } .xh-keys b:nth-child(3) { background: #fb8f6c; } .xh-keys b:nth-child(4) { background: #3b82f6; translate: 0 6px; }
.lc-hero.hp-stage .xh-orbit, .lc-hero.hp-stage .xh-shard, .lc-hero.hp-stage .xh-punch, .lc-hero.hp-stage .xh-mark, .lc-hero.hp-stage .xh-keys { opacity: 0; }
.lc-hero.hp-ready .xh-orbit, .lc-hero.hp-ready .xh-shard, .lc-hero.hp-ready .xh-punch, .lc-hero.hp-ready .xh-mark, .lc-hero.hp-ready .xh-keys { opacity: 1; }

/* ── Responsive: one signature artifact per product on tablet, none on phones ── */
@media (max-width: 1039px) {
  .lc-hero .xh-shard, .lc-hero .xh-punch, .lc-hero .xh-mark, .lc-hero .xh-keys { display: none; }
  .xa i { display: none; }
  .xa-chatrio .xa-bub1, .xa-voxnotiq .xa-radar, .xa-mihrabi .xa-arch1, .xa-sila .xa-p1 { display: block; }
}
@media (max-width: 899px) { .xa, .lc-hero .xh-orbit { display: none; } }
@media (prefers-reduced-motion: reduce) { .xa-voxnotiq .xa-radar b, .xa-chatrio .xa-typing b { animation: none; } }
/* tuning */
.lc-sila .lc-back, .lc-x-sila .lc-x-back { background: linear-gradient(155deg, rgba(251,143,108,.62), rgba(236,112,138,.34) 52%, rgba(24,20,34,.92)); }
.xa-chatrio .xa-bub { border-color: rgba(167,139,250,.8); background: linear-gradient(135deg, rgba(139,92,246,.24), rgba(59,130,246,.06)); }
.xa-chatrio .xa-bub2 { border-color: rgba(96,165,250,.85); }
@media (min-width: 1040px) {
  .xa-lg.xa-sila { z-index: 3; }
  .xa-lg.xa-sila .xa-p1 { top: auto; bottom: 12%; inset-inline-start: -3%; inset-inline-end: auto; transform: rotate(-11deg); }
  .xa-lg.xa-sila .xa-p2 { top: auto; bottom: 26%; inset-inline-start: 3%; inset-inline-end: auto; transform: rotate(6deg); width: 88px; }
  .xa-lg.xa-sila .xa-p2 b { height: 70px; }
  .xa-lg.xa-sila .xa-p3 { top: 3%; bottom: auto; inset-inline-end: -3%; transform: rotate(8deg); }
  .xa-lg.xa-sila .xa-stamp { bottom: 2%; inset-inline-start: 16%; inset-inline-end: auto; }
  .xa-lg.xa-sila .xa-thread { top: auto; bottom: 40%; inset-inline-end: auto; inset-inline-start: -2%; width: 90px; }
}
@media (min-width: 1040px) {
  .xa-lg.xa-mihrabi .xa-arch1 { inset-inline-end: auto; inset-inline-start: -7%; bottom: 2%; }
  .xa-lg.xa-mihrabi .xa-arch2 { inset-inline-end: auto; inset-inline-start: -3%; bottom: 6%; }
  .xa-lg.xa-mihrabi .xa-arch3 { inset-inline-end: auto; inset-inline-start: 1%; bottom: 10%; }
  .xa-lg.xa-mihrabi .xa-lantern { z-index: 3; top: 8%; bottom: auto; inset-inline-end: -1%; }
  .xa-lg.xa-mihrabi .xa-rule { top: auto; bottom: 30%; }
}

/* ═════ Wide (16:9) showcase artwork — container geometry only; all layered artifacts kept ═════ */
.lc-hero .hp-art { width: 94%; }
@media (min-width: 1040px) { .mh-hero-grid.mh-hero-grid-art { grid-template-columns: 0.9fr 1.1fr; } }
.mh-product-art.lc-card img.lc-poster, .mh-product-art.lc-voxnotiq img.lc-poster { width: 90%; max-width: 100%; max-height: none; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
@media (min-width: 900px) {
  .mh-product-art.lc-card { padding: 42px 0 48px; }
  .lc-card .lc-back { top: 4%; height: 92%; width: 58%; }
}
.lc-explore .pp-showcase { width: 100%; max-width: 640px; }
.lc-explore .pp-showcase img { aspect-ratio: 16 / 9; object-fit: contain; }
@media (max-width: 899px) { .mh-product-art.lc-card img.lc-poster { width: 100%; max-width: none; } }

/* ═════ Wide artwork cleanup: decorations frame the artwork instead of covering it ═════ */
/* Chatrio temporarily back on the approved portrait poster (chatrio-wide.jpg not approved) */
.mh-product-art.lc-chatrio img.lc-poster { aspect-ratio: auto; width: auto; max-height: 470px; }
.lc-x-chatrio .pp-showcase { max-width: 420px; }
.lc-x-chatrio .pp-showcase img { aspect-ratio: auto; }
@media (max-width: 899px) { .mh-product-art.lc-chatrio img.lc-poster { width: 100%; max-width: 480px; max-height: none; } }

/* redundant with the new artwork */
.lc-mihrabi .lc-frag, .lc-x-mihrabi .lc-frag, .lc-sila .lc-frag, .lc-x-sila .lc-frag { display: none; }

@media (min-width: 900px) {
  /* Hero: card and punch strip live in a bottom band below the artwork */
  .lc-hero { padding-bottom: 118px; }
  .lc-hero .lc-h-card { bottom: 0; inset-inline-start: 3%; }
  .lc-hero .xh-punch { top: auto; bottom: 28px; inset-inline-end: 8%; width: 158px; height: 30px; background-size: 12px 10px; }
  .lc-hero .xh-punch::before { top: 50%; left: 10px; width: 30%; height: 2px; translate: 0 -50%; }
  .lc-hero .lc-h-tile-b { bottom: 18px; inset-inline-start: 46%; }
  .lc-hero .xh-mark-b { bottom: 70px; }

  /* Wide product cards: identity tile + fragment sit in bands above/below the artwork */
  .mh-product-art.lc-card:not(.lc-chatrio) { padding: 70px 0 84px; }
  .lc-card:not(.lc-chatrio) .lc-tile { width: 58px; height: 58px; border-radius: 16px; top: auto; bottom: 14px; inset-inline-start: auto; inset-inline-end: 7%; }
  .lc-voxnotiq .lc-frag { top: 10px; bottom: auto; inset-inline-start: auto; inset-inline-end: 9%; }
  .mh-reverse .lc-card:not(.lc-chatrio) .lc-tile { inset-inline-end: auto; inset-inline-start: 7%; }
  .mh-reverse .lc-voxnotiq .lc-frag { inset-inline-end: auto; inset-inline-start: 9%; }
  .lc-card:not(.lc-chatrio) .lc-back { top: 12%; height: 76%; }
  .xa-mihrabi .xa-lantern { bottom: auto; top: 6px; inset-inline-end: 2%; }

  /* Explore: icon tile above the artwork, waveform below it, Sila prints tucked behind the edges */
  .lc-explore:not(.lc-x-chatrio) { padding: 84px 22px 84px; }
  .lc-explore:not(.lc-x-chatrio) .lc-x-tile { width: 60px; height: 60px; border-radius: 17px; top: 10px; inset-inline-start: 4%; }
  .lc-x-voxnotiq .lc-frag { top: auto; bottom: 14px; inset-inline-start: auto; inset-inline-end: 4%; }
  .xa-lg.xa-sila { z-index: 1; }
  .xa-lg.xa-sila .xa-p1 { top: auto; bottom: 0; inset-inline-start: 2%; }
  .xa-lg.xa-sila .xa-p2 { top: auto; bottom: 10px; inset-inline-start: 16%; }
  .xa-lg.xa-sila .xa-p3 { top: 0; inset-inline-end: 3%; }
  .xa-lg.xa-sila .xa-stamp { bottom: 8px; inset-inline-start: auto; inset-inline-end: 6%; }
  .xa-lg.xa-sila .xa-thread { bottom: auto; top: 22px; inset-inline-start: 30%; }
}
/* Phones: wide artwork dominates — back panel + one icon only, icon below the image */
@media (max-width: 899px) {
  .lc-card:not(.lc-chatrio) .lc-tile, .lc-explore .lc-x-tile { position: relative; inset: auto; display: block; margin: 12px auto 0; width: 46px; height: 46px; border-radius: 13px; }
  .mh-product-art.lc-card:not(.lc-chatrio) { flex-direction: column; align-items: center; }
  .lc-explore { flex-direction: column; }
}
@media (min-width: 900px) {
  .lc-chatrio .lc-tile { inset-inline-end: 24%; bottom: 8%; width: 60px; height: 60px; border-radius: 17px; }
  .mh-reverse .lc-chatrio .lc-tile { inset-inline-end: auto; inset-inline-start: 24%; }
  .lc-x-chatrio .lc-x-tile { width: 56px; height: 56px; border-radius: 16px; top: 4%; inset-inline-start: 0; }
}
@media (max-width: 899px) {
  .lc-chatrio .lc-tile { position: relative; inset: auto; display: block; margin: 12px auto 0; width: 46px; height: 46px; border-radius: 13px; }
  .mh-product-art.lc-chatrio { flex-direction: column; align-items: center; }
}

/* ═════ Chatrio on the redesigned wide artwork (chatrio-wide-v2.jpg): same wide geometry as the other products ═════ */
.mh-product-art.lc-chatrio img.lc-poster { aspect-ratio: 16 / 9; width: 90%; max-width: 100%; max-height: none; height: auto; object-fit: contain; }
.lc-x-chatrio .pp-showcase { max-width: 640px; }
.lc-x-chatrio .pp-showcase img { aspect-ratio: 16 / 9; object-fit: contain; }
@media (min-width: 900px) {
  .mh-product-art.lc-card.lc-chatrio { padding: 70px 0 84px; }
  .lc-card.lc-chatrio .lc-back { top: 12%; height: 76%; }
  .lc-card.lc-chatrio .lc-tile { width: 58px; height: 58px; border-radius: 16px; top: auto; bottom: 14px; inset-inline-start: auto; inset-inline-end: 7%; }
  .mh-reverse .lc-card.lc-chatrio .lc-tile { inset-inline-end: auto; inset-inline-start: 7%; }
  .lc-explore.lc-x-chatrio { padding: 84px 22px 84px; }
  .lc-x-chatrio .lc-x-tile { width: 60px; height: 60px; border-radius: 17px; top: 10px; inset-inline-start: 4%; }
}
@media (max-width: 899px) { .mh-product-art.lc-chatrio img.lc-poster { width: 100%; max-width: none; } }

/* ═════ Vertical rhythm: tighter gaps between major sections (≈25–35% less), internals untouched ═════ */
.mh-section { padding-block: clamp(46px, 4.2vw, 62px); }
.mh-section-tight { padding-block: clamp(32px, 3.2vw, 46px); }
.mh-product-row { padding-block: 20px; }
.mh-support { margin-top: clamp(30px, 4vw, 44px); padding-top: clamp(22px, 3vw, 30px); }
.mh-con { margin-top: clamp(28px, 3.6vw, 40px); padding-top: clamp(22px, 3vw, 30px); }
@media (min-width: 900px) {
  .mh-product-row { padding-block: 12px; }
  /* bands keep just enough room for the icon tile (below) and, on VoxNotiq, the waveform (above) */
  .mh-product-art.lc-card:not(.lc-chatrio), .mh-product-art.lc-card.lc-chatrio { padding: 38px 0 78px; }
  .mh-product-art.lc-card.lc-voxnotiq { padding-top: 68px; }
  .lc-explore:not(.lc-x-chatrio), .lc-explore.lc-x-chatrio { padding: 76px 22px 36px; }
  .lc-explore.lc-x-voxnotiq { padding-bottom: 72px; }
}

/* ═════ Vertical rhythm, pass 2: targeted gaps (related product rows tight, more air before a new category) ═════ */
@media (min-width: 900px) {
  /* product rows: artwork → next artwork ≈ 98px (tile and VoxNotiq waveform share the band under the artwork) */
  .mh-product-row { padding-block: 6px; }
  .mh-product-art.lc-card:not(.lc-chatrio), .mh-product-art.lc-card.lc-chatrio, .mh-product-art.lc-card.lc-voxnotiq { padding: 22px 0 64px; }
  .mh-product-art.lc-card .lc-tile { width: 52px; height: 52px; border-radius: 15px; bottom: 6px; }
  .mh-product-art.lc-voxnotiq .lc-frag { top: auto; bottom: 6px; inset-inline-end: auto; inset-inline-start: 7%; }
  .mh-reverse .mh-product-art.lc-voxnotiq .lc-frag { inset-inline-start: auto; inset-inline-end: 7%; }
  /* last product → Platforms: a little more air than between products, without the double padding */
  #products { padding-bottom: 8px; }
  #platforms { padding-top: 46px; }
}
@media (max-width: 899px) {
  #products { padding-bottom: 18px; }
}
@media (min-width: 900px) {
  /* keep Mihrabi's large arc inside its own row now that rows sit closer */
  .lc-card .xa-mihrabi .xa-arc { width: 190px; height: 190px; bottom: 2%; inset-inline-end: -1%; }
}

/* ═════ Pricing: four core services + custom add-ons feature ═════ */
@media (min-width: 1120px) { .mh-pricing-grid { grid-template-columns: repeat(4, 1fr); } }
.mh-price-card-web { padding-top: 24px; }
.mh-price-devices { position: absolute; top: 24px; inset-inline-end: 20px; display: flex; align-items: flex-end; gap: 6px; color: #a78bfa; margin: 0; }
.mh-price-devices i { opacity: .75; }
.mh-price-devices i:nth-child(1) { font-size: .78rem; }
.mh-price-devices i:nth-child(2) { font-size: .9rem; }
.mh-price-devices i:nth-child(3) { font-size: 1rem; }
.mh-price-devices i:nth-child(4) { font-size: 1.1rem; }
.mh-price-card-web h3 { padding-inline-end: 96px; }
.mh-price-quote { font-size: .98rem; }

.mh-xa { position: relative; overflow: hidden; margin-top: 16px; border-radius: var(--radius-l); border: 1px solid rgba(148,163,184,.16);
  background: radial-gradient(70% 140% at 0% 0%, rgba(59,130,246,.16), transparent 60%), radial-gradient(60% 140% at 100% 100%, rgba(124,58,237,.14), transparent 60%), linear-gradient(180deg, rgba(19,29,47,.98), rgba(12,20,35,.98));
  padding: 26px 22px; display: grid; gap: 22px; }
.mh-xa::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, rgba(34,211,238,.55), rgba(124,58,237,.35) 45%, rgba(211,154,69,.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.mh-xa-grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(148,163,184,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(148,163,184,.06) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(80% 120% at 100% 50%, #000, transparent 75%); mask-image: radial-gradient(80% 120% at 100% 50%, #000, transparent 75%); }
[dir="rtl"] .mh-xa-grid-bg { -webkit-mask-image: radial-gradient(80% 120% at 0% 50%, #000, transparent 75%); mask-image: radial-gradient(80% 120% at 0% 50%, #000, transparent 75%); }
.mh-xa-main, .mh-xa-side { position: relative; z-index: 1; min-width: 0; }
.mh-xa-eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; color: var(--cyan); margin-bottom: 8px; }
[dir="ltr"] .mh-xa-eyebrow { text-transform: uppercase; }
.mh-xa-title { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; color: var(--text); margin: 0 0 10px; line-height: 1.25; }
[dir="ltr"] .mh-xa-title { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.01em; }
.mh-xa-desc { font-size: .9rem; color: var(--text-dim); line-height: 1.7; margin: 0 0 18px; max-width: 64ch; }
.mh-xa-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mh-xa-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: .76rem; font-weight: 600; color: #d6e2f3; padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.03); white-space: nowrap; }
.mh-xa-chips li i { font-size: .7rem; color: #7dd3fc; opacity: .9; }
.mh-xa-side { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.mh-xa-price { border: 1px dashed rgba(211,154,69,.35); border-radius: 14px; padding: 12px 16px; background: rgba(211,154,69,.05); }
.mh-xa-amount { font-size: 1.35rem; font-weight: 900; color: var(--text); }
[dir="ltr"] .mh-xa-amount { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.mh-xa-cta { padding: 12px 22px; font-size: .88rem; }
[dir="ltr"] .mh-xa-cta .fa-arrow-left { transform: scaleX(-1); }
@media (min-width: 900px) {
  .mh-xa { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding: 32px 34px; }
  .mh-xa-side { align-items: stretch; min-width: 230px; padding-inline-start: 34px; border-inline-start: 1px solid rgba(148,163,184,.14); }
  .mh-xa-cta { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════
   Homepage refinement — shared CTA system, add-ons, case study,
   how-to-start, support summary, compact build entry, studio,
   newsletter and footer.
   ═══════════════════════════════════════════════════════════════ */
.mh-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ── CTA system: one shape, arrow chip, clear primary vs soft ── */
.mh-cta-btn { gap: 12px; padding: 7px 7px 7px 20px; min-height: 48px; font-size: .9rem; letter-spacing: .005em; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease); }
[dir="rtl"] .mh-cta-btn { padding: 7px 20px 7px 7px; }
.mh-arw { flex: none; width: 34px; height: 34px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.18); font-size: .78rem; transition: transform .25s var(--ease), background-color .25s var(--ease); }
[dir="ltr"] .mh-arw .fa-arrow-left { transform: scaleX(-1); }
.mh-cta-btn:hover .mh-arw { transform: translateX(-3px); }
[dir="ltr"] .mh-cta-btn:hover .mh-arw { transform: translateX(3px); }
.mh-cta-soft { color: var(--text); background: rgba(255,255,255,.045); border: 1px solid rgba(148,163,184,.24); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.mh-cta-soft .mh-arw { background: rgba(96,165,250,.16); color: #bfdbfe; box-shadow: inset 0 0 0 1px rgba(96,165,250,.28); }
.mh-cta-soft:hover { border-color: rgba(96,165,250,.55); background: rgba(59,130,246,.10); transform: translateY(-1px); }
.mh-cta-btn:focus-visible, .mh-svc-btn:focus-visible, .hb-opt:focus-visible, .nl input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mh-cta-btn, .mh-arw, .mh-svc-btn, .hb-opt { transition: none !important; } .mh-cta-btn:hover, .mh-cta-btn:hover .mh-arw, .mh-svc-btn:hover .mh-arw, .hb-opt:hover .mh-arw { transform: none !important; } }

/* ── Service-card CTA: full-width tinted bar in the card accent ── */
.mh-price-card:nth-child(1) { --ac: 59,130,246; }
.mh-price-card:nth-child(2) { --ac: 167,139,250; }
.mh-price-card:nth-child(3) { --ac: 34,211,238; }
.mh-price-card:nth-child(4) { --ac: 216,161,77; }
.mh-price-card > a.mh-svc-btn { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 7px 7px 7px 18px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: var(--text); text-decoration: none;
  background: linear-gradient(135deg, rgba(var(--ac),.16), rgba(var(--ac),.06)); border: 1px solid rgba(var(--ac),.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
[dir="rtl"] .mh-price-card > a.mh-svc-btn { padding: 7px 18px 7px 7px; }
.mh-svc-btn .mh-arw { background: rgba(var(--ac),.9); color: #fff; box-shadow: 0 6px 16px -6px rgba(var(--ac),.8); }
.mh-price-card:nth-child(4) .mh-svc-btn .mh-arw { color: #1a1206; }
.mh-price-card > a.mh-svc-btn:hover { color: var(--text); border-color: rgba(var(--ac),.7); background: linear-gradient(135deg, rgba(var(--ac),.26), rgba(var(--ac),.1)); transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(var(--ac),.9); }
.mh-svc-btn:hover .mh-arw { transform: translateX(-3px); }
[dir="ltr"] .mh-svc-btn:hover .mh-arw { transform: translateX(3px); }
.mh-price-list { margin-bottom: 22px; }
.mh-price-card a.mh-price-alt { margin-top: 10px; align-self: center; }

/* ── Custom add-ons: one supporting feature block ── */
.mh-xa { display: block; padding: clamp(24px, 3.2vw, 38px); margin-top: 18px; }
.mh-xa-top { position: relative; z-index: 1; display: grid; gap: 22px; }
.mh-xa-lead { font-size: clamp(1rem, 1.5vw, 1.12rem); font-weight: 600; color: #e2e8f0; margin: 0 0 6px; }
.mh-xa-desc { margin-bottom: 0; }
.mh-xa-cta { justify-content: space-between; }
.xa-groups { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 26px; padding-top: 24px; border-top: 1px solid rgba(148,163,184,.12); }
.xa-group { border-radius: 16px; padding: 16px 16px 14px; background: rgba(8,14,26,.45); border: 1px solid rgba(148,163,184,.12); }
.xa-group h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .88rem; font-weight: 700; color: var(--text); }
[dir="ltr"] .xa-group h4 { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.xa-g-ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: var(--gc); background: rgba(var(--gr),.12); box-shadow: inset 0 0 0 1px rgba(var(--gr),.3); }
.xa-g-ai { --gc: #c4b5fd; --gr: 139,92,246; } .xa-g-auto { --gc: #67e8f9; --gr: 34,211,238; } .xa-g-prod { --gc: #93c5fd; --gr: 59,130,246; } .xa-g-data { --gc: #f3c98b; --gr: 216,161,77; }
.xa-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.xa-group li { font-size: .74rem; font-weight: 600; color: #cbd5e1; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.14); }
@media (min-width: 640px) { .xa-groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .mh-xa { display: block; }
  .mh-xa-top { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}
@media (min-width: 1180px) { .xa-groups { grid-template-columns: repeat(4, 1fr); } }

/* ── Case study ── */
.cs { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; border-radius: 28px; padding: clamp(22px, 3.6vw, 48px); position: relative; overflow: hidden;
  background: radial-gradient(70% 90% at 85% 40%, rgba(124,58,237,.20), transparent 65%), radial-gradient(60% 80% at 10% 100%, rgba(59,130,246,.12), transparent 60%), linear-gradient(160deg, #111a2c, #0d1424); border: 1px solid rgba(148,163,184,.14); }
[dir="rtl"] .cs { background: radial-gradient(70% 90% at 15% 40%, rgba(124,58,237,.20), transparent 65%), radial-gradient(60% 80% at 90% 100%, rgba(59,130,246,.12), transparent 60%), linear-gradient(200deg, #111a2c, #0d1424); }
.cs-label { display: inline-flex; align-items: center; gap: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; color: #c4b5fd; padding: 6px 12px; border-radius: 999px; background: rgba(139,92,246,.1); border: 1px solid rgba(139,92,246,.28); }
[dir="ltr"] .cs-label { text-transform: uppercase; }
.cs-label-dot { width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250,.18); }
.cs-label-sep { width: 1px; height: 12px; background: rgba(196,181,253,.35); }
.cs-label-app { color: var(--text); letter-spacing: .02em; text-transform: none; }
.cs-h { font-size: clamp(1.45rem, 2.7vw, 2.2rem); line-height: 1.25; font-weight: 800; color: var(--text); margin: 18px 0 24px; max-width: 24ch; }
[dir="ltr"] .cs-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
[dir="rtl"] .cs-h { line-height: 1.45; }
.cs-story { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 2px; }
.cs-story li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 0; border-top: 1px solid rgba(148,163,184,.12); }
.cs-story li:first-child { border-top: 0; padding-top: 0; }
.cs-step { font-family: 'Space Grotesk','Inter',sans-serif; font-size: .8rem; font-weight: 600; color: #a78bfa; padding-top: 2px; }
.cs-story h3 { font-size: .92rem; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.cs-story p { font-size: .88rem; color: var(--text-dim); margin: 0; line-height: 1.65; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.cs-visual { position: relative; min-height: 380px; display: flex; align-items: center; justify-content: center; }
.cs-glow { position: absolute; inset: 10% 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139,92,246,.42), rgba(59,130,246,.14) 55%, transparent); filter: blur(10px); }
.cs-rings { position: absolute; width: min(92%, 440px); aspect-ratio: 1; border-radius: 50%; border: 1px dashed rgba(196,181,253,.18); }
.cs-rings::after { content: ''; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(147,197,253,.12); }
.cs-phone { position: absolute; margin: 0; width: clamp(118px, 15vw, 182px); aspect-ratio: 600 / 1301; border-radius: 26px; padding: 5px; background: linear-gradient(160deg, #2a2f45, #0b0f19); box-shadow: 0 30px 60px -24px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12); }
.cs-phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 21px; display: block; }
.cs-phone-b { z-index: 3; transform: translateY(-6px); width: clamp(132px, 17vw, 206px); }
.cs-phone-a { z-index: 2; transform: translateX(-62%) translateY(22px) rotate(-7deg); opacity: .92; }
.cs-phone-c { z-index: 2; transform: translateX(62%) translateY(22px) rotate(7deg); opacity: .92; }
.cs-tile { position: absolute; z-index: 4; top: 8%; inset-inline-end: 12%; width: 54px; height: 54px; border-radius: 16px; overflow: hidden; box-shadow: 0 16px 34px -12px rgba(124,58,237,.75), 0 0 0 1px rgba(255,255,255,.12); }
.cs-tile img { width: 100%; height: 100%; display: block; }
.cs-flow { position: absolute; z-index: 4; bottom: 0; left: 50%; transform: translateX(-50%); list-style: none; margin: 0; padding: 6px; display: flex; gap: 4px; border-radius: 999px; background: rgba(10,15,27,.82); border: 1px solid rgba(148,163,184,.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); white-space: nowrap; }
.cs-flow li { font-size: .72rem; font-weight: 600; color: #cbd5e1; padding: 5px 12px; border-radius: 999px; }
.cs-flow li:nth-child(2) { color: #fff; background: rgba(139,92,246,.35); }
@media (min-width: 960px) { .cs { grid-template-columns: 1.02fr .98fr; } .cs-visual { min-height: 470px; } }
@media (max-width: 520px) { .cs-visual { min-height: 330px; } .cs-phone-a { transform: translateX(-56%) translateY(18px) rotate(-7deg); } .cs-phone-c { transform: translateX(56%) translateY(18px) rotate(7deg); } }

/* ── How to start ── */
.hc-grid { display: grid; gap: 16px; max-width: 1040px; margin-inline: auto; }
@media (min-width: 820px) { .hc-grid { grid-template-columns: 1fr 1.08fr; align-items: stretch; } }
.hc-card { position: relative; display: flex; flex-direction: column; border-radius: 24px; padding: clamp(22px, 3vw, 32px); overflow: hidden; }
.hc-discovery { background: linear-gradient(180deg, rgba(22,32,52,.92), rgba(15,23,40,.95)); border: 1px solid rgba(148,163,184,.16); }
.hc-strategy { background: radial-gradient(80% 70% at 100% 0%, rgba(124,58,237,.22), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(37,99,235,.2), transparent 60%), linear-gradient(170deg, #17203a, #101830); border: 1px solid rgba(139,92,246,.4); box-shadow: 0 30px 70px -40px rgba(124,58,237,.6); }
[dir="rtl"] .hc-strategy { background: radial-gradient(80% 70% at 0% 0%, rgba(124,58,237,.22), transparent 60%), radial-gradient(70% 60% at 100% 100%, rgba(37,99,235,.2), transparent 60%), linear-gradient(190deg, #17203a, #101830); }
.hc-flag { position: absolute; top: 20px; inset-inline-end: 20px; font-size: .7rem; font-weight: 700; color: #e9d5ff; padding: 5px 10px; border-radius: 999px; background: rgba(139,92,246,.2); border: 1px solid rgba(196,181,253,.35); }
.hc-ic { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; margin-bottom: 16px; }
.hc-discovery .hc-ic { color: #67e8f9; background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,.28); }
.hc-strategy .hc-ic { color: #ddd6fe; background: rgba(139,92,246,.18); box-shadow: inset 0 0 0 1px rgba(196,181,253,.35); }
.hc-card h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); font-weight: 800; color: var(--text); margin: 0 0 10px; }
[dir="ltr"] .hc-card h3 { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.hc-meta > span { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 600; color: #cbd5e1; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.16); }
.hc-meta .hc-free { color: #86efac; background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); }
.hc-meta .hc-paid { color: #f3d19c; background: rgba(216,161,77,.1); border-color: rgba(216,161,77,.34); }
.hc-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 9px; }
.hc-list li { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; color: #dbe3ee; line-height: 1.5; }
.hc-list li i { font-size: .62rem; margin-top: 6px; width: 16px; height: 16px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.hc-discovery .hc-list li i { color: #67e8f9; background: rgba(34,211,238,.12); }
.hc-strategy .hc-list li i { color: #ddd6fe; background: rgba(139,92,246,.22); }
@media (min-width: 520px) { .hc-list-2 { grid-template-columns: 1fr 1fr; column-gap: 16px; } }
.hc-note { font-size: .78rem; color: var(--text-faint); margin: 0 0 20px; }
.hc-credit { display: flex; gap: 10px; align-items: flex-start; font-size: .8rem; line-height: 1.6; color: #f3d19c; margin: 0 0 20px; padding: 10px 12px; border-radius: 12px; background: rgba(216,161,77,.07); border: 1px dashed rgba(216,161,77,.3); }
.hc-credit i { margin-top: 4px; font-size: .72rem; }
.hc-cta { margin-top: auto; align-self: flex-start; }
.hc-help { display: flex; align-items: flex-start; justify-content: center; gap: 10px; max-width: 760px; margin: 20px auto 0; font-size: .86rem; line-height: 1.7; color: var(--text-dim); text-align: center; }
.hc-help i { color: #f3c98b; margin-top: 4px; }

/* ── Support summary ── */
#support-plans { padding-top: 0; }
.hs { display: grid; gap: 22px; align-items: center; border-radius: 24px; padding: clamp(22px, 3vw, 32px); background: linear-gradient(180deg, rgba(20,30,49,.9), rgba(13,21,37,.94)); border: 1px solid rgba(148,163,184,.14); }
.hs-h { font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; color: var(--text); margin: 6px 0 8px; }
[dir="ltr"] .hs-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.01em; }
.hs-p { font-size: .88rem; color: var(--text-dim); line-height: 1.7; margin: 0; max-width: 46ch; }
.hs-opts { display: grid; gap: 10px; }
.hs-opt { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(148,163,184,.12); }
.hs-ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; color: #93c5fd; background: rgba(59,130,246,.12); box-shadow: inset 0 0 0 1px rgba(96,165,250,.28); }
.hs-opt h3 { font-size: .92rem; font-weight: 700; color: var(--text); margin: 0 0 3px; }
.hs-opt p { font-size: .8rem; color: var(--text-dim); margin: 0; line-height: 1.55; }
.hs-cta { justify-self: start; }
@media (min-width: 640px) { .hs-opts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .hs { grid-template-columns: .95fr 1.35fr auto; gap: 28px; } .hs-cta { justify-self: end; } }

/* ── Compact build entry ── */
.hb { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(24px, 3.6vw, 48px); display: grid; gap: 26px;
  background: radial-gradient(60% 90% at 50% 0%, rgba(37,99,235,.22), transparent 65%), radial-gradient(50% 70% at 100% 100%, rgba(34,211,238,.08), transparent 60%), linear-gradient(170deg, #121c33, #0d1426); border: 1px solid rgba(96,165,250,.24); }
.hb .mh-build-glow { display: none; }
.hb-head { text-align: center; }
.hb-head .mh-h2 { margin-inline: auto; }
.hb-steps { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; }
.hb-steps li { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: #cbd5e1; }
.hb-steps li + li::before { content: ''; width: 22px; height: 1px; background: linear-gradient(90deg, rgba(96,165,250,.15), rgba(96,165,250,.6)); margin-inline-end: 4px; }
[dir="rtl"] .hb-steps li + li::before { background: linear-gradient(270deg, rgba(96,165,250,.15), rgba(96,165,250,.6)); }
.hb-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .66rem; font-weight: 700; color: #bfdbfe; background: rgba(59,130,246,.16); box-shadow: inset 0 0 0 1px rgba(96,165,250,.4); font-family: 'Space Grotesk','Inter',sans-serif; }
.hb-opts { display: grid; gap: 10px; }
@media (min-width: 860px) { .hb-opts { grid-template-columns: repeat(3, 1fr); } }
.hb-opt { display: flex; align-items: center; gap: 14px; width: 100%; text-align: start; font: inherit; color: var(--text); cursor: pointer; padding: 14px 14px; border-radius: 18px; background: rgba(8,14,26,.5); border: 1px solid rgba(148,163,184,.16); transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.hb-opt:hover { border-color: rgba(96,165,250,.55); background: rgba(37,99,235,.1); transform: translateY(-2px); }
.hb-opt-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #93c5fd; background: rgba(59,130,246,.14); box-shadow: inset 0 0 0 1px rgba(96,165,250,.3); }
.hb-opt-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hb-opt-t strong { font-size: .92rem; font-weight: 700; }
.hb-opt-t small { font-size: .76rem; color: var(--text-dim); line-height: 1.45; }
.hb-opt .mh-arw { width: 30px; height: 30px; background: rgba(96,165,250,.14); color: #bfdbfe; }
.hb-opt:hover .mh-arw { transform: translateX(-3px); }
[dir="ltr"] .hb-opt:hover .mh-arw { transform: translateX(3px); }
.hb-foot { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hb-reassure { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--text-dim); margin: 0; text-align: center; }
.hb-reassure i { color: #67e8f9; }

/* ── Studio ── */
.st { display: grid; gap: clamp(26px, 4vw, 56px); align-items: start; }
@media (min-width: 960px) { .st { grid-template-columns: .95fr 1.05fr; } }
.st-p { font-size: .95rem; line-height: 1.8; color: var(--text-dim); margin: 14px 0 22px; max-width: 52ch; }
.st-quote { margin: 0; padding: 16px 20px; border-inline-start: 2px solid transparent; border-image: linear-gradient(180deg, #60a5fa, #a78bfa) 1; font-size: clamp(1rem, 1.6vw, 1.15rem); font-weight: 600; line-height: 1.6; color: #e2e8f0; background: linear-gradient(90deg, rgba(59,130,246,.08), transparent); }
[dir="rtl"] .st-quote { background: linear-gradient(270deg, rgba(59,130,246,.08), transparent); }
.st-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.st-rows li { position: relative; display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: start; padding: 20px 22px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, rgba(23,33,54,.9), rgba(14,22,38,.92)); border: 1px solid rgba(148,163,184,.13); box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.st-rows li::after { content: ''; position: absolute; inset-inline-end: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--sr),.18), transparent); pointer-events: none; }
.st-rows li:nth-child(1) { --sr: 59,130,246; } .st-rows li:nth-child(2) { --sr: 139,92,246; } .st-rows li:nth-child(3) { --sr: 34,211,238; }
.st-num { font-family: 'Space Grotesk','Inter',sans-serif; font-size: 2rem; font-weight: 600; line-height: 1; letter-spacing: -.03em; background: linear-gradient(160deg, rgba(var(--sr),1), rgba(var(--sr),.35)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.st-rows h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 2px 0 6px; }
[dir="ltr"] .st-rows h3 { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.st-rows p { font-size: .86rem; color: var(--text-dim); margin: 0; line-height: 1.65; }

/* ── Final CTA ── */
.mh-cta .mh-cta-row { gap: 12px; }

/* ── Newsletter ── */
.nl-wrap { padding-block: 0 clamp(36px, 4vw, 52px); }
.nl { display: grid; gap: 16px; align-items: center; padding: 18px 20px; border-radius: 20px; background: rgba(255,255,255,.025); border: 1px solid rgba(148,163,184,.13); }
.nl-copy { display: flex; gap: 14px; align-items: center; }
.nl-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #f3c98b; background: rgba(216,161,77,.1); box-shadow: inset 0 0 0 1px rgba(216,161,77,.3); }
.nl-h { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 2px; }
[dir="ltr"] .nl-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.nl-p { font-size: .8rem; color: var(--text-dim); margin: 0; line-height: 1.5; }
.nl-field { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.nl-field input { min-width: 0; height: 46px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: .88rem; color: var(--text); background: rgba(8,14,26,.6); border: 1px solid rgba(148,163,184,.22); }
[dir="rtl"] .nl-field input { text-align: right; }
.nl-field input::placeholder { color: var(--text-faint); }
.nl-field input[aria-invalid="true"] { border-color: rgba(248,113,113,.7); }
.nl-btn { min-height: 46px; padding: 0 22px; }
[dir="rtl"] .nl-btn { padding: 0 22px; }
.nl-note, .nl-err { grid-column: 1 / -1; font-size: .72rem; color: var(--text-faint); }
.nl-err { color: #fca5a5; }
@media (min-width: 900px) { .nl { grid-template-columns: 1fr minmax(360px, 440px); padding: 20px 24px; } }

/* ── Footer ── */
.ft-grid { display: grid; gap: 26px 20px; grid-template-columns: repeat(2, 1fr); padding: 18px 0 22px; margin-bottom: 16px; border-bottom: 1px solid var(--border-soft); }
.ft-brand { grid-column: 1 / -1; }
.ft-tag { font-size: .82rem; color: var(--text-dim); margin: 10px 0 0; max-width: 32ch; line-height: 1.6; }
.ft-col { display: flex; flex-direction: column; gap: 9px; align-items: flex-start; }
.ft-col h2 { font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--text-faint); margin: 0 0 4px; }
[dir="ltr"] .ft-col h2 { text-transform: uppercase; }
.ft-col a { font-size: .85rem; color: var(--text-dim); text-decoration: none; transition: color .2s ease; }
.ft-col a:hover { color: var(--text); }
.ft-mail { font-size: .8rem !important; }
.ft-col .mh-social-row { margin-top: 4px; }
@media (min-width: 900px) { .ft-grid { grid-template-columns: 1.5fr repeat(4, 1fr); } .ft-brand { grid-column: auto; } }

/* ═════ Final polish: consultation entry, platform CTAs, build, studio, support, footer ═════ */
/* Consultation entry */
.hc-sub { font-size: .95rem; color: var(--text-dim); line-height: 1.7; max-width: 560px; margin: 10px auto 22px; }
.hc-start { margin-inline: auto; }
.hc-help { margin-top: 22px; }
.hcp { width: min(520px, calc(100vw - 32px)); max-width: none; padding: 0; border: 0; border-radius: 26px; background: transparent; color: var(--text); }
.hcp::backdrop { background: rgba(3,6,12,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.hcp-shell { position: relative; padding: 28px 24px 22px; border-radius: 26px; background: radial-gradient(70% 60% at 50% 0%, rgba(37,99,235,.22), transparent 65%), linear-gradient(175deg, #141e35, #0c1324); border: 1px solid rgba(96,165,250,.28); box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); }
.hcp-close { position: absolute; top: 14px; inset-inline-end: 14px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.04); color: var(--text-dim); cursor: pointer; }
.hcp-close:hover { color: var(--text); border-color: rgba(96,165,250,.5); }
.hcp-h { font-size: 1.3rem; font-weight: 800; margin: 6px 0 18px; }
[dir="ltr"] .hcp-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.hcp-opts { display: grid; gap: 10px; }
.hcp-opt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border-radius: 18px; font: inherit; color: var(--text); text-align: start; cursor: pointer; transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease); }
.hcp-d { background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.2); }
.hcp-s { background: linear-gradient(135deg, rgba(124,58,237,.2), rgba(37,99,235,.14)); border: 1px solid rgba(167,139,250,.45); }
.hcp-opt:hover { transform: translateY(-1px); border-color: rgba(96,165,250,.6); }
.hcp-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; }
.hcp-d .hcp-ic { color: #67e8f9; background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 1px rgba(34,211,238,.28); }
.hcp-s .hcp-ic { color: #ddd6fe; background: rgba(139,92,246,.2); box-shadow: inset 0 0 0 1px rgba(196,181,253,.35); }
.hcp-t { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.hcp-t strong { font-size: .95rem; }
.hcp-t small { font-size: .78rem; color: var(--text-dim); }
.hcp-s .mh-arw { background: linear-gradient(135deg, #2563eb, #7c3aed); color: #fff; }
.hcp-d .mh-arw { background: rgba(96,165,250,.16); color: #bfdbfe; }
.hcp-help { font-size: .8rem; color: var(--text-faint); line-height: 1.65; margin: 16px 0 0; }
.hcp-opt:focus-visible, .hcp-close:focus-visible, .mh-plat-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

/* Platform CTAs: compact, accent-tinted */
.mh-platform-feature { --pa: 96,165,250; } .mh-plat-aqar { --pa: 34,211,238; } .mh-plat-operix { --pa: 245,158,11; }
.mh-plat-btn { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; margin-top: 4px; padding: 5px 5px 5px 14px; min-height: 40px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--text); text-decoration: none; background: rgba(var(--pa),.08); border: 1px solid rgba(var(--pa),.32); transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease); }
[dir="rtl"] .mh-plat-btn { padding: 5px 14px 5px 5px; }
.mh-plat-btn .mh-arw { width: 30px; height: 30px; font-size: .7rem; background: rgba(var(--pa),.85); color: #06101c; }
.mh-plat-btn:hover { background: rgba(var(--pa),.16); border-color: rgba(var(--pa),.6); transform: translateY(-1px); }
.mh-plat-btn:hover .mh-arw { transform: translateX(-3px); }
[dir="ltr"] .mh-plat-btn:hover .mh-arw { transform: translateX(3px); }

/* Build: supporting choices read as options, one main CTA */
.hb-ways { text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--text-faint); margin: 0 0 -12px; }
[dir="ltr"] .hb-ways { text-transform: uppercase; }
.hb-opt { padding: 16px; background: rgba(8,14,26,.38); }
.hb-opt-t strong { font-size: .95rem; }
.hb-foot { padding-top: 4px; }

/* Studio polish */
.st-story { position: relative; }
.st-quote { position: relative; margin-top: 4px; padding: 22px 24px 22px 26px; border: 1px solid rgba(139,92,246,.26); border-image: none; border-radius: 20px; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.55; color: #f1f5f9;
  background: radial-gradient(90% 120% at 0% 0%, rgba(59,130,246,.16), transparent 60%), linear-gradient(135deg, rgba(124,58,237,.12), rgba(15,23,40,.6)); box-shadow: 0 24px 60px -40px rgba(124,58,237,.7); }
[dir="rtl"] .st-quote { padding: 22px 26px 22px 24px; background: radial-gradient(90% 120% at 100% 0%, rgba(59,130,246,.16), transparent 60%), linear-gradient(225deg, rgba(124,58,237,.12), rgba(15,23,40,.6)); }
.st-quote::before { content: ''; position: absolute; inset-block: 18px; inset-inline-start: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #60a5fa, #a78bfa); }
[dir="ltr"] .st-quote { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 500; letter-spacing: -.01em; }
.st-rows { gap: 14px; }
.st-rows li { grid-template-columns: 76px 1fr; padding: 24px 24px; border-color: rgba(var(--sr),.2); background: radial-gradient(80% 140% at 0% 0%, rgba(var(--sr),.1), transparent 55%), linear-gradient(135deg, rgba(23,33,54,.92), rgba(13,20,35,.94)); }
[dir="rtl"] .st-rows li { background: radial-gradient(80% 140% at 100% 0%, rgba(var(--sr),.1), transparent 55%), linear-gradient(225deg, rgba(23,33,54,.92), rgba(13,20,35,.94)); }
.st-rows li::before { content: ''; position: absolute; top: 0; inset-inline: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--sr),.6), transparent); }
.st-num { font-size: 2.6rem; }
.st-rows h3 { font-size: 1.05rem; margin-top: 4px; }
@media (min-width: 960px) { .st { align-items: center; } }

/* Support polish */
.hs { gap: 24px; }
.hs-opt { padding: 16px; }
.hs-cta { white-space: nowrap; }

/* Footer polish */
.ft-col a { position: relative; }
.ft-col nav a:hover, .ft-col > a:hover { color: #fff; }
.ft-mail { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; border: 1px solid rgba(148,163,184,.2); background: rgba(255,255,255,.03); color: var(--text-dim) !important; }
.ft-mail:hover { border-color: rgba(96,165,250,.5); color: var(--text) !important; }
.ft-mail i { color: #93c5fd; }
.mh-footer .mh-social-row a { width: 36px; height: 36px; border-radius: 11px; background: rgba(255,255,255,.03); transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease; }
.mh-footer .mh-social-row a:hover { transform: translateY(-1px); background: rgba(59,130,246,.1); }
.mh-footer a:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

/* ═════ Hero CTAs: project (primary) + consultation (secondary) + quiet products link ═════ */
.mh-hero-ctas { align-items: center; }
.mh-hero-ctas .mh-cta-soft .mh-arw i { font-size: .8rem; }
.mh-hero-link { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; font-size: .86rem; font-weight: 600; color: var(--text-dim); text-decoration: none; transition: color .2s ease; }
.mh-hero-link i { font-size: .7rem; transition: transform .2s ease; }
.mh-hero-link:hover { color: var(--text); }
.mh-hero-link:hover i { transform: translateY(2px); }
.mh-hero-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
@media (max-width: 520px) {
  .mh-hero-ctas { flex-direction: column; align-items: stretch; }
  .mh-hero-ctas .mh-cta-btn { justify-content: space-between; }
  .mh-hero-link { align-self: center; }
}

/* ═════ Consultation modal: two full session cards ═════ */
.hcp { width: min(940px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: visible; }
.hcp-shell { max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(22px, 3vw, 34px); }
.hcp-head { text-align: center; padding-inline: 36px; }
.hcp-h { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin: 6px 0 8px; }
.hcp-sub { font-size: .9rem; color: var(--text-dim); line-height: 1.7; max-width: 560px; margin: 0 auto 22px; }
.hcp-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .hcp-grid { grid-template-columns: 1fr 1.08fr; } }
.hcp .hc-card { padding: clamp(20px, 2.6vw, 26px); border-radius: 20px; }
.hcp .hc-discovery { background: radial-gradient(80% 60% at 0% 0%, rgba(34,211,238,.12), transparent 60%), linear-gradient(180deg, rgba(22,32,52,.95), rgba(14,22,38,.97)); border-color: rgba(34,211,238,.22); }
[dir="rtl"] .hcp .hc-discovery { background: radial-gradient(80% 60% at 100% 0%, rgba(34,211,238,.12), transparent 60%), linear-gradient(180deg, rgba(22,32,52,.95), rgba(14,22,38,.97)); }
.hcp .hc-strategy { border-color: rgba(167,139,250,.45); box-shadow: 0 0 0 1px rgba(216,161,77,.08) inset, 0 30px 70px -40px rgba(124,58,237,.6); }
.hcp .hc-list { gap: 8px; }
.hcp .hc-list li { font-size: .86rem; }
.hcp .hc-cta { align-self: stretch; justify-content: space-between; }
.hcp .hc-note, .hcp .hc-credit { margin-bottom: 18px; }
.hcp-close { z-index: 2; }
@media (max-width: 520px) { .hcp-head { padding-inline: 28px 28px; } }

/* Hero consultation button: secondary but clearly visible */
.mh-hero-ctas .mh-cta-soft { background: rgba(255,255,255,.07); border-color: rgba(147,197,253,.42); color: #fff; }
.mh-hero-ctas .mh-cta-soft:hover { background: rgba(59,130,246,.16); border-color: rgba(147,197,253,.75); }

/* ═════ Hero consultation CTA: full-weight secondary ═════ */
.mh-hero-ctas .mh-cta-btn { min-height: 52px; font-size: .95rem; font-weight: 700; }
.mh-hero-ctas .mh-cta-soft.mh-hero-consult {
  color: #fff; border: 1px solid transparent;
  background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(124,58,237,.16)) padding-box, linear-gradient(135deg, rgba(103,232,249,.85), rgba(167,139,250,.85)) border-box;
  box-shadow: 0 12px 34px -16px rgba(124,58,237,.65), inset 0 1px 0 rgba(255,255,255,.08);
}
.mh-hero-consult .mh-arw { background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(139,92,246,.34)); color: #e0f2fe; box-shadow: inset 0 0 0 1px rgba(196,181,253,.45); }
.mh-hero-ctas .mh-cta-soft.mh-hero-consult:hover {
  background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(124,58,237,.26)) padding-box, linear-gradient(135deg, #67e8f9, #a78bfa) border-box;
  box-shadow: 0 16px 40px -14px rgba(124,58,237,.8), inset 0 1px 0 rgba(255,255,255,.1); transform: translateY(-1px);
}
.mh-hero-consult:hover .mh-arw { transform: none; }
@media (max-width: 520px) { .mh-hero-ctas .mh-cta-btn { width: 100%; } }
.mh-hero-ctas .mh-hero-link { flex-basis: 100%; justify-content: flex-start; width: max-content; padding-top: 2px; }
@media (max-width: 520px) { .mh-hero-ctas .mh-hero-link { flex-basis: auto; } }
.mh-hero-ctas .mh-hero-link { max-width: max-content; margin-inline-end: auto; }
/* products link sits on its own line below the hero buttons */
.mh-hero-ctas { margin-bottom: 14px; }
.mh-hero-link { flex-basis: auto !important; max-width: none !important; margin: 0 0 30px; }
@media (max-width: 520px) { .mh-hero-link { display: flex; width: max-content; margin-inline: auto; } }

/* ═════ Hero consultation CTA: calm secondary at rest, accent on hover ═════ */
.mh-hero-ctas .mh-cta-soft.mh-hero-consult {
  color: #fff; border: 1px solid rgba(129,140,248,.55);
  background: linear-gradient(135deg, rgba(34,211,238,.035), rgba(124,58,237,.05)), rgba(13,20,36,.72);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mh-hero-consult .mh-arw { background: rgba(129,140,248,.14); color: #a5f3fc; box-shadow: inset 0 0 0 1px rgba(129,140,248,.35); }
.mh-hero-ctas .mh-cta-soft.mh-hero-consult:hover {
  border-color: rgba(165,180,252,.9);
  background: linear-gradient(135deg, rgba(34,211,238,.07), rgba(124,58,237,.1)), rgba(13,20,36,.78);
  box-shadow: 0 10px 28px -16px rgba(124,58,237,.55), 0 0 0 1px rgba(103,232,249,.12), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateY(-1px);
}

/* ═════ Top-nav consultation CTA: secondary next to the primary project CTA ═════ */
.mh-nav-consult { color: #fff; border: 1px solid rgba(129,140,248,.6); background: linear-gradient(135deg, rgba(34,211,238,.04), rgba(124,58,237,.06)), rgba(13,20,36,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); }
.mh-nav-consult:hover { border-color: rgba(165,180,252,.95); background: linear-gradient(135deg, rgba(34,211,238,.08), rgba(124,58,237,.12)), rgba(13,20,36,.78); box-shadow: 0 8px 24px -14px rgba(124,58,237,.6), inset 0 1px 0 rgba(255,255,255,.08); transform: translateY(-1px); }
.mh-nav-consult:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mh-nav-consult:hover { transform: none; } }
/* nav consultation icon: compact, at the logical start, height matches the primary nav CTA */
.mh-nav-consult { align-self: stretch; gap: 8px; padding-block: 0; padding-inline: 5px 16px; }
.mh-nav-consult-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; color: #a5f3fc; background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(139,92,246,.18)); box-shadow: inset 0 0 0 1px rgba(165,180,252,.35); transition: color .25s var(--ease), background .25s var(--ease); }
.mh-nav-consult:hover .mh-nav-consult-ic { color: #cffafe; background: linear-gradient(135deg, rgba(34,211,238,.22), rgba(139,92,246,.28)); }
/* narrow desktop (960–1199): keep the nav on one line — consultation shows its icon only (label stays for screen readers) */
@media (min-width: 960px) and (max-width: 1199px) {
  .mh-nav-consult { padding-inline: 5px; }
  .mh-nav-consult [data-i18n] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ═════ Delivery comparison: Website tiers ═════ */
@media (min-width: 820px) { .mh-dlv-grid-4 { grid-template-columns: repeat(2, 1fr); row-gap: 18px; } .mh-dlv-grid-4 .mh-dlv-tier:nth-child(odd) { border-inline-start: 0; padding-inline-start: 0; } }
@media (min-width: 1180px) { .mh-dlv-grid-4 { grid-template-columns: repeat(4, 1fr); } .mh-dlv-grid-4 .mh-dlv-tier:nth-child(odd):not(:first-child) { border-inline-start: 1px solid var(--border-soft); padding-inline-start: 20px; } }
.mh-dlv-best { font-size: .78rem; color: var(--text-dim); line-height: 1.55; margin: 0 0 4px; }
.mh-dlv-tier-custom .mh-dlv-price strong { font-size: .9rem; color: #c4b5fd; }
.mh-dlv-tier-custom li::before { background: #a78bfa; }
.mh-dlv-extra { margin-top: 18px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.025); border: 1px solid var(--border-soft); }
.mh-dlv-extra .mh-dlv-k { margin-top: 0; }
.mh-dlv-extra ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px 24px; }
@media (min-width: 820px) { .mh-dlv-extra ul { grid-template-columns: 1fr 1fr; } }
.mh-dlv-extra li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 7px 0; border-bottom: 1px dashed rgba(148,163,184,.12); font-size: .8rem; color: var(--text-dim); line-height: 1.5; }
.mh-dlv-extra li strong { flex: none; max-width: 52%; text-align: end; font-size: .78rem; font-weight: 700; color: var(--text); }
.mh-dlv-launch { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; font-size: .78rem; line-height: 1.65; color: #bfdbfe; background: rgba(59,130,246,.07); border: 1px solid rgba(96,165,250,.22); }
.mh-dlv-launch i { margin-top: 4px; color: #67e8f9; }

/* ═════ Website tab: scannable tiers, launch-support highlight ═════ */
#dlv-panel-web .mh-dlv-grid-4 { gap: 12px; row-gap: 12px; }
#dlv-panel-web .mh-wt { display: flex; flex-direction: column; padding: 16px 16px 12px !important; border: 1px solid rgba(148,163,184,.13) !important; border-radius: 16px; background: rgba(255,255,255,.022); }
#dlv-panel-web .mh-wt-custom, #dlv-panel-web .mh-dlv-tier-custom { background: linear-gradient(170deg, rgba(124,58,237,.1), rgba(255,255,255,.02)); border-color: rgba(167,139,250,.28) !important; }
#dlv-panel-web .mh-dlv-name { font-size: 1rem; }
#dlv-panel-web .mh-dlv-price { margin: 2px 0 10px; }
#dlv-panel-web .mh-dlv-price strong { font-size: 1.15rem; }
#dlv-panel-web .mh-dlv-tier-custom .mh-dlv-price strong { font-size: .95rem; }
#dlv-panel-web .mh-dlv-best { font-size: .77rem; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.mh-dlv-best-k { color: var(--text-faint); font-weight: 700; }
#dlv-panel-web .mh-wt-list { gap: 5px; flex-grow: 1; }
#dlv-panel-web .mh-wt-list li { font-size: .8rem; color: #d3dbe6; }
.mh-wt-more { margin-top: 10px; }
.mh-wt-more > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 700; color: #93c5fd; padding: 4px 0; }
.mh-wt-more > summary::-webkit-details-marker { display: none; }
.mh-wt-more > summary i { font-size: .6rem; transition: transform .2s ease; }
.mh-wt-more[open] > summary i { transform: rotate(180deg); }
.mh-wt-more > summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }
.mh-wt-more ul { margin-top: 6px !important; }
.mh-wt-more li { font-size: .76rem !important; color: var(--text-dim) !important; }
@media (min-width: 820px) { #dlv-panel-web .mh-dlv-grid-4 .mh-dlv-tier { border-inline-start: 1px solid rgba(148,163,184,.13) !important; } }
@media (min-width: 1180px) { #dlv-panel-web .mh-dlv-grid-4 { align-items: start; } }

.mh-sup14 { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 16px 18px; border-radius: 16px; border: 1px solid rgba(34,211,238,.32);
  background: radial-gradient(70% 140% at 0% 0%, rgba(34,211,238,.13), transparent 60%), linear-gradient(135deg, rgba(37,99,235,.12), rgba(15,23,40,.55)); }
[dir="rtl"] .mh-sup14 { background: radial-gradient(70% 140% at 100% 0%, rgba(34,211,238,.13), transparent 60%), linear-gradient(225deg, rgba(37,99,235,.12), rgba(15,23,40,.55)); }
.mh-sup14-ic { position: relative; flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #67e8f9; background: rgba(34,211,238,.12); box-shadow: inset 0 0 0 1px rgba(103,232,249,.35); }
.mh-sup14-ck { position: absolute; font-size: .5rem; color: #0b1324; top: 50%; left: 50%; transform: translate(-50%, -45%); }
.mh-sup14-h { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 4px; }
[dir="ltr"] .mh-sup14-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.mh-sup14-p { font-size: .84rem; color: #dbeafe; line-height: 1.65; margin: 0 0 6px; }
.mh-sup14-n { font-size: .74rem; color: var(--text-faint); line-height: 1.6; margin: 0; }
#dlv-panel-web .mh-dlv-extra { margin-top: 12px; padding: 12px 14px; background: transparent; }
#dlv-panel-web .mh-dlv-extra li { padding: 6px 0; font-size: .78rem; }
#dlv-panel-web .mh-dlv-extra li strong { font-weight: 600; color: #e2e8f0; }
.mh-dlv-foot-web { margin-top: 12px !important; }
/* the shared disclaimer is replaced by the website one while the Website tab is open */
.mh-dlv-body:has(#dlv-panel-web:not([hidden])) > .mh-dlv-foot:not(.mh-dlv-foot-web) { display: none; }

/* ═════ Compare Service Options: accordion trigger card ═════ */
.mh-dlv { border-color: rgba(129,140,248,.28); background: linear-gradient(135deg, rgba(37,99,235,.06), rgba(124,58,237,.05)), rgba(13,20,36,.6); transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.mh-dlv > summary.mh-dlv-trigger { justify-content: flex-start; gap: 14px; padding: 16px 18px; border-radius: var(--radius-l); transition: background .25s var(--ease); }
.mh-dlv:hover, .mh-dlv:has(> summary:focus-visible) { border-color: rgba(165,180,252,.55); box-shadow: 0 14px 40px -26px rgba(99,102,241,.7); }
.mh-dlv > summary.mh-dlv-trigger:hover { background: rgba(99,102,241,.06); }
.mh-dlv[open] { border-color: rgba(165,180,252,.45); }
.mh-dlv[open] > summary.mh-dlv-trigger { border-radius: var(--radius-l) var(--radius-l) 0 0; }
.mh-dlv-t-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; color: #a5f3fc; background: linear-gradient(135deg, rgba(34,211,238,.14), rgba(139,92,246,.2)); box-shadow: inset 0 0 0 1px rgba(165,180,252,.35); }
.mh-dlv > summary .mh-dlv-t-ic i { font-size: .95rem; color: inherit; transform: none !important; }
.mh-dlv-t-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: start; }
.mh-dlv-t-h { font-size: 1rem; font-weight: 800; color: #fff; }
[dir="ltr"] .mh-dlv-t-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.mh-dlv-t-sub { font-size: .8rem; font-weight: 500; color: var(--text-dim); line-height: 1.5; }
.mh-dlv-t-badge { flex: none; font-size: .72rem; font-weight: 700; color: #c7d2fe; padding: 5px 11px; border-radius: 999px; background: rgba(99,102,241,.14); border: 1px solid rgba(165,180,252,.32); white-space: nowrap; }
.mh-dlv-t-chev { flex: none; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.05); border: 1px solid rgba(148,163,184,.22); transition: background .25s var(--ease), border-color .25s var(--ease); }
.mh-dlv > summary .mh-dlv-t-chev i { font-size: .72rem; color: #c7d2fe; transition: transform .3s var(--ease); }
.mh-dlv[open] > summary .mh-dlv-t-chev i { transform: rotate(180deg); }
.mh-dlv > summary.mh-dlv-trigger:hover .mh-dlv-t-chev { background: rgba(99,102,241,.16); border-color: rgba(165,180,252,.5); }
.mh-dlv > summary.mh-dlv-trigger:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.mh-dlv[open] > .mh-dlv-body { animation: mhDlvIn .35s var(--ease); }
@keyframes mhDlvIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mh-dlv[open] > .mh-dlv-body { animation: none; } .mh-dlv > summary .mh-dlv-t-chev i { transition: none; } }
@media (max-width: 520px) {
  .mh-dlv > summary.mh-dlv-trigger { gap: 12px; padding: 14px; }
  .mh-dlv-t-ic { width: 38px; height: 38px; }
  .mh-dlv-t-badge { display: none; }
  .mh-dlv-t-sub { font-size: .76rem; }
}

/* ═════ Website tab: optional add-ons feature block ═════ */
.mh-wx { margin-top: 14px; padding: 18px; border-radius: 18px; border: 1px solid rgba(167,139,250,.32);
  background: radial-gradient(70% 140% at 100% 0%, rgba(139,92,246,.14), transparent 60%), linear-gradient(135deg, rgba(34,211,238,.05), rgba(13,20,36,.6)); }
[dir="rtl"] .mh-wx { background: radial-gradient(70% 140% at 0% 0%, rgba(139,92,246,.14), transparent 60%), linear-gradient(225deg, rgba(34,211,238,.05), rgba(13,20,36,.6)); }
.mh-wx-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.mh-wx-badge { flex: none; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #ddd6fe; background: rgba(139,92,246,.18); box-shadow: inset 0 0 0 1px rgba(196,181,253,.38); }
.mh-wx-h { font-size: 1rem; font-weight: 800; color: #fff; margin: 0 0 3px; }
[dir="ltr"] .mh-wx-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.mh-wx-sub { font-size: .8rem; color: var(--text-dim); margin: 0; line-height: 1.55; }
.mh-wx-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) { .mh-wx-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1180px) { .mh-wx-list { grid-template-columns: repeat(4, 1fr); } }
.mh-wx-list li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center; padding: 12px; border-radius: 14px; background: rgba(8,14,26,.5); border: 1px solid rgba(148,163,184,.16); }
.mh-wx-ic { grid-row: 1 / 3; width: 32px; height: 32px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: #67e8f9; background: rgba(34,211,238,.1); box-shadow: inset 0 0 0 1px rgba(103,232,249,.28); }
.mh-wx-t { font-size: .84rem; font-weight: 700; color: #f1f5f9; line-height: 1.4; }
.mh-wx-list li strong { font-size: .78rem; font-weight: 700; color: #c4b5fd; }
.mh-wx-all > summary { list-style: none; display: inline-flex; min-height: 42px; font-size: .84rem; }
.mh-wx-all > summary::-webkit-details-marker { display: none; }
.mh-wx-all > summary .mh-arw { width: 30px; height: 30px; }
.mh-wx-all > summary .mh-arw i { transition: transform .25s var(--ease); }
.mh-wx-all[open] > summary .mh-arw i { transform: rotate(180deg); }
.mh-wx-all > summary:hover .mh-arw { transform: none; }
.mh-wx-all[open] > .mh-dlv-extra { animation: mhDlvIn .3s var(--ease); }
#dlv-panel-web .mh-wx-all .mh-dlv-extra { margin-top: 12px; background: rgba(8,14,26,.4); }
@media (prefers-reduced-motion: reduce) { .mh-wx-all[open] > .mh-dlv-extra { animation: none; } }

/* ═════ Website add-ons: prominent feature card with expandable full list ═════ */
#dlv-panel-web .mh-wx { position: relative; overflow: hidden; margin-top: 16px; padding: clamp(18px, 2.4vw, 26px); border-radius: 22px; border: 1px solid transparent;
  background: linear-gradient(150deg, #151c38, #0e1529 55%, #121331) padding-box, linear-gradient(120deg, rgba(103,232,249,.7), rgba(139,92,246,.75) 50%, rgba(59,130,246,.55)) border-box;
  box-shadow: 0 24px 60px -36px rgba(124,58,237,.7); }
.mh-wx-glow { position: absolute; inset: -40% -10% auto auto; width: 60%; height: 120%; pointer-events: none; background: radial-gradient(closest-side, rgba(139,92,246,.22), transparent); }
[dir="rtl"] .mh-wx-glow { inset: -40% auto auto -10%; }
.mh-wx > *:not(.mh-wx-glow) { position: relative; }
.mh-wx-top { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; margin-bottom: 18px; }
.mh-wx-badge { position: relative; width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #ede9fe; background: linear-gradient(135deg, rgba(34,211,238,.25), rgba(139,92,246,.45)); box-shadow: 0 10px 26px -12px rgba(139,92,246,.9), inset 0 0 0 1px rgba(221,214,254,.35); }
.mh-wx-plus { position: absolute; top: -5px; inset-inline-end: -5px; width: 20px; height: 20px; border-radius: 50%; font-size: .55rem; display: inline-flex; align-items: center; justify-content: center; color: #0b1324; background: #67e8f9; box-shadow: 0 0 0 3px #121a33; }
.mh-wx-kicker { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: #67e8f9; margin-bottom: 4px; }
[dir="ltr"] .mh-wx-kicker { text-transform: uppercase; }
#dlv-panel-web .mh-wx-h { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 800; color: #fff; margin: 0 0 4px; }
[dir="ltr"] #dlv-panel-web .mh-wx-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.01em; }
#dlv-panel-web .mh-wx-sub { font-size: .88rem; color: #cbd5e1; margin: 0; line-height: 1.6; }
.mh-wx-btn { grid-column: 1 / -1; justify-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 6px 8px 6px 8px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; color: #fff;
  border: 1px solid rgba(196,181,253,.6); background: linear-gradient(135deg, rgba(124,58,237,.42), rgba(37,99,235,.32)); box-shadow: 0 12px 30px -16px rgba(124,58,237,.9), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.mh-wx-btn:hover { transform: translateY(-1px); border-color: rgba(221,214,254,.9); background: linear-gradient(135deg, rgba(124,58,237,.55), rgba(37,99,235,.42)); box-shadow: 0 16px 36px -14px rgba(124,58,237,1), inset 0 1px 0 rgba(255,255,255,.18); }
.mh-wx-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.mh-wx-btn-ic { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; background: rgba(255,255,255,.14); }
.mh-wx-btn-t { flex: 1; text-align: center; padding-inline: 4px; }
.mh-wx-chev { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; background: rgba(255,255,255,.1); }
.mh-wx-chev i { transition: transform .3s var(--ease); }
.mh-wx-btn[aria-expanded="true"] .mh-wx-chev i { transform: rotate(180deg); }
@media (min-width: 900px) { .mh-wx-top { grid-template-columns: auto 1fr auto; } .mh-wx-btn { grid-column: auto; justify-self: end; padding: 6px 8px; } .mh-wx-btn-t { white-space: nowrap; } }
#dlv-panel-web .mh-wx-list { margin: 0; gap: 10px; }
#dlv-panel-web .mh-wx-list li { background: rgba(255,255,255,.04); border-color: rgba(165,180,252,.22); transition: border-color .2s ease, background .2s ease; }
#dlv-panel-web .mh-wx-list li:hover { border-color: rgba(165,180,252,.45); background: rgba(139,92,246,.08); }
#dlv-panel-web .mh-wx-list li strong { color: #ddd6fe; font-size: .8rem; }
.mh-wx-note { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; font-size: .78rem; color: #a5b4fc; line-height: 1.6; }
.mh-wx-note i { margin-top: 3px; color: #fcd34d; }
.mh-wx-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease), margin-top .4s var(--ease), opacity .3s ease; opacity: 0; }
.mh-wx-panel.is-open { grid-template-rows: 1fr; margin-top: 16px; opacity: 1; }
.mh-wx-panel-in { overflow: hidden; min-height: 0; }
.mh-wx-ph { font-size: .72rem; font-weight: 700; letter-spacing: .05em; color: var(--text-faint); margin: 0 0 10px; padding-top: 16px; border-top: 1px dashed rgba(165,180,252,.25); }
[dir="ltr"] .mh-wx-ph { text-transform: uppercase; }
.mh-wx-full { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) { .mh-wx-full { grid-template-columns: 1fr 1fr; } .mh-wx-full .mh-wx-wide { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .mh-wx-full { grid-template-columns: repeat(3, 1fr); } }
.mh-wx-full li { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 3px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(8,14,26,.55); border: 1px solid rgba(148,163,184,.16); }
.mh-wx-fic { grid-row: 1 / 3; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; color: #c4b5fd; background: rgba(139,92,246,.14); box-shadow: inset 0 0 0 1px rgba(196,181,253,.28); }
.mh-wx-ft { font-size: .82rem; font-weight: 700; color: #f1f5f9; line-height: 1.45; }
.mh-wx-full li strong { font-size: .78rem; font-weight: 700; color: #67e8f9; line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .mh-wx-panel, .mh-wx-chev i, .mh-wx-btn { transition: none; } }

/* ═════ Service comparison entry card (outer trigger) ═════ */
.mh-dlv { position: relative; border: 1px solid transparent !important; border-radius: 24px;
  background: linear-gradient(160deg, #141d36, #0f1629 60%, #131430) padding-box, linear-gradient(120deg, rgba(103,232,249,.45), rgba(129,140,248,.5) 45%, rgba(139,92,246,.45)) border-box !important;
  box-shadow: 0 22px 50px -38px rgba(99,102,241,.8), inset 0 1px 0 rgba(255,255,255,.05); transition: box-shadow .3s var(--ease), transform .3s var(--ease); }
.mh-dlv:hover, .mh-dlv:has(> summary:focus-visible) { box-shadow: 0 26px 60px -34px rgba(99,102,241,.95), inset 0 1px 0 rgba(255,255,255,.07); background: linear-gradient(160deg, #172142, #111a31 60%, #16173a) padding-box, linear-gradient(120deg, rgba(103,232,249,.75), rgba(129,140,248,.8) 45%, rgba(167,139,250,.75)) border-box !important; }
.mh-dlv:not([open]):hover { transform: translateY(-1px); }
.mh-dlv > summary.mh-cmp { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ic txt act" "pills pills pills"; align-items: center; gap: 14px 18px; padding: clamp(16px, 2.2vw, 22px) clamp(16px, 2.4vw, 26px); background: none !important; border-radius: 24px; }
.mh-cmp-ic { grid-area: ic; position: relative; width: 56px; height: 56px; border-radius: 17px; display: inline-flex; align-items: center; justify-content: center; color: #e0f2fe; background: linear-gradient(140deg, rgba(34,211,238,.3), rgba(99,102,241,.4) 55%, rgba(139,92,246,.45)); box-shadow: 0 12px 30px -12px rgba(99,102,241,.85), inset 0 0 0 1px rgba(199,210,254,.35); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.mh-dlv > summary .mh-cmp-ic i { font-size: 1.2rem; color: inherit; transform: none !important; }
.mh-dlv:hover .mh-cmp-ic { transform: scale(1.04); box-shadow: 0 14px 34px -10px rgba(99,102,241,1), inset 0 0 0 1px rgba(199,210,254,.5); }
.mh-cmp-txt { grid-area: txt; min-width: 0; display: flex; flex-direction: column; gap: 3px; text-align: start; }
.mh-cmp-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: #67e8f9; }
[dir="ltr"] .mh-cmp-eyebrow { text-transform: uppercase; }
.mh-cmp-h { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 800; color: #fff; line-height: 1.3; }
[dir="ltr"] .mh-cmp-h { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; letter-spacing: -.01em; }
.mh-cmp-sub { font-size: .82rem; font-weight: 500; color: #b6c2d4; line-height: 1.55; }
.mh-cmp-pills { grid-area: pills; display: flex; flex-wrap: wrap; gap: 6px; }
.mh-cmp-pill { display: inline-flex; align-items: center; gap: 7px; font-size: .74rem; font-weight: 600; color: #d6deeb; padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(148,163,184,.18); white-space: nowrap; }
.mh-cmp-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mh-cmp-dot.d1 { background: #60a5fa; } .mh-cmp-dot.d2 { background: #a78bfa; } .mh-cmp-dot.d3 { background: #22d3ee; } .mh-cmp-dot.d4 { background: #d8a14d; } .mh-cmp-dot.d5 { background: #f472b6; }
.mh-cmp-act { grid-area: act; display: flex; align-items: center; gap: 10px; }
.mh-cmp-badge { font-size: .72rem; font-weight: 700; color: #c7d2fe; padding: 5px 11px; border-radius: 999px; background: rgba(99,102,241,.14); border: 1px solid rgba(165,180,252,.32); white-space: nowrap; }
.mh-cmp-go { display: inline-flex; align-items: center; gap: 10px; padding: 5px 5px 5px 16px; min-height: 44px; border-radius: 999px; font-size: .86rem; font-weight: 700; color: #fff; border: 1px solid rgba(165,180,252,.5); background: linear-gradient(135deg, rgba(99,102,241,.22), rgba(139,92,246,.18)); transition: border-color .25s var(--ease), background .25s var(--ease); white-space: nowrap; }
[dir="rtl"] .mh-cmp-go { padding: 5px 16px 5px 5px; }
.mh-dlv:hover .mh-cmp-go { border-color: rgba(221,214,254,.85); background: linear-gradient(135deg, rgba(99,102,241,.32), rgba(139,92,246,.26)); }
.mh-cmp-chev { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.12); }
.mh-dlv > summary .mh-cmp-chev i { font-size: .72rem; color: #fff; transition: transform .3s var(--ease); }
.mh-dlv[open] > summary .mh-cmp-chev i { transform: rotate(180deg); }
.mh-cmp-close-t { display: none; }
.mh-dlv[open] .mh-cmp-open-t { display: none; }
.mh-dlv[open] .mh-cmp-close-t { display: inline; }
.mh-dlv[open] > summary.mh-cmp { border-radius: 24px 24px 0 0; border-bottom: 1px solid rgba(148,163,184,.12); }
.mh-dlv[open] > .mh-dlv-body { border-top: 0; }
@media (min-width: 1180px) {
  .mh-dlv > summary.mh-cmp { grid-template-columns: auto minmax(220px, 1fr) auto auto; grid-template-areas: "ic txt pills act"; }
  .mh-cmp-pills { max-width: 380px; justify-content: center; }
}
@media (max-width: 640px) {
  .mh-dlv > summary.mh-cmp { grid-template-columns: auto 1fr; grid-template-areas: "ic txt" "pills pills" "act act"; gap: 12px 14px; }
  .mh-cmp-ic { width: 46px; height: 46px; border-radius: 14px; }
  .mh-cmp-act { justify-content: space-between; }
  .mh-cmp-go { flex: 1; justify-content: space-between; }
  .mh-cmp-pill { font-size: .7rem; padding: 5px 9px; }
}
@media (prefers-reduced-motion: reduce) { .mh-dlv, .mh-cmp-ic { transition: none; } .mh-dlv:not([open]):hover, .mh-dlv:hover .mh-cmp-ic { transform: none; } }

/* mobile: compact 3-pill preview + summary pill */
.mh-cmp-more { display: none; }
@media (max-width: 640px) {
  .mh-cmp-pills { flex-wrap: wrap; gap: 6px 5px; }
  .mh-cmp-pills .mh-cmp-pill:nth-child(4), .mh-cmp-pills .mh-cmp-pill:nth-child(5) { display: none; }
  .mh-cmp-more { display: inline-flex; color: #c7d2fe; background: rgba(99,102,241,.14); border-color: rgba(165,180,252,.32); }
  .mh-cmp-pill { font-size: .68rem; padding: 5px 8px; gap: 5px; }
  .mh-cmp-dot { width: 6px; height: 6px; }
  .mh-dlv > summary.mh-cmp { gap: 10px 12px; padding: 14px; }
}
@media (max-width: 640px) { .mh-cmp-pills { gap: 5px 4px; } .mh-cmp-pill { padding: 5px 7px; gap: 4px; letter-spacing: -.005em; } .mh-cmp-dot { width: 5px; height: 5px; } }
@media (max-width: 640px) { .mh-cmp-pills .mh-cmp-dot { display: none; } .mh-cmp-pill { padding: 5px 7px; font-size: .66rem; } .mh-cmp-pills { justify-content: flex-start; } }
@media (max-width: 640px) { .mh-dlv > summary.mh-cmp { padding: 14px 10px; } .mh-cmp-pill { padding: 5px 6px; } .mh-cmp-pills { gap: 5px 3px; } }

/* ═════ Website card: "View Website Details" secondary CTA ═════ */
.mh-price-card a.mh-web-details, .mh-xa-side a.mh-web-details { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 9px 9px 9px 10px; border-radius: 18px; text-decoration: none; color: #fff; font-size: inherit; font-weight: 400;
  border: 1px solid transparent; background: linear-gradient(135deg, rgba(34,211,238,.10), rgba(139,92,246,.16)) padding-box, linear-gradient(120deg, rgba(103,232,249,.55), rgba(167,139,250,.6)) border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease); }
.mh-web-details-ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; color: #ede9fe; background: linear-gradient(135deg, rgba(34,211,238,.28), rgba(139,92,246,.45)); box-shadow: inset 0 0 0 1px rgba(221,214,254,.3); transition: transform .3s var(--ease); }
.mh-web-details-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: start; }
.mh-web-details-t strong { font-size: .86rem; font-weight: 800; color: #fff; line-height: 1.35; }
[dir="ltr"] .mh-web-details-t strong { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 600; }
.mh-web-details-t small { font-size: .72rem; color: #c7d2fe; line-height: 1.4; }
.mh-web-details-arw { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; color: #fff; background: rgba(255,255,255,.12); transition: transform .25s var(--ease), background .25s var(--ease); }
[dir="ltr"] .mh-web-details-arw i { transform: scaleX(-1); }
.mh-price-card a.mh-web-details:hover, .mh-xa-side a.mh-web-details:hover { color: #fff; transform: translateY(-2px);
  background: linear-gradient(135deg, rgba(34,211,238,.16), rgba(139,92,246,.26)) padding-box, linear-gradient(120deg, #67e8f9, #c4b5fd) border-box;
  box-shadow: 0 14px 32px -16px rgba(139,92,246,.9), 0 0 0 1px rgba(103,232,249,.12), inset 0 1px 0 rgba(255,255,255,.1); }
.mh-web-details:hover .mh-web-details-ic { transform: rotate(-8deg) scale(1.06); }
.mh-web-details:hover .mh-web-details-arw { transform: translateX(-3px); background: rgba(255,255,255,.2); }
[dir="ltr"] .mh-web-details:hover .mh-web-details-arw { transform: translateX(3px); }
.mh-price-card a.mh-web-details:active, .mh-xa-side a.mh-web-details:active { transform: translateY(0) scale(.985); box-shadow: 0 6px 16px -12px rgba(139,92,246,.9); }
.mh-price-card a.mh-web-details:focus-visible, .mh-xa-side a.mh-web-details:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mh-price-card a.mh-web-details, .mh-xa-side a.mh-web-details, .mh-web-details-ic, .mh-web-details-arw { transition: none; } .mh-price-card a.mh-web-details:hover, .mh-xa-side a.mh-web-details:hover, .mh-web-details:hover .mh-web-details-ic, .mh-web-details:hover .mh-web-details-arw, .mh-price-card a.mh-web-details:active, .mh-xa-side a.mh-web-details:active { transform: none; } }

/* ═════ Service cards: body / primary CTA / extra rows aligned across each row ═════ */
.mh-pc-body { display: flex; flex-direction: column; flex-grow: 1; }
.mh-pc-extra:empty { display: none; }
.mh-pc-extra { display: flex; flex-direction: column; align-items: center; }
.mh-pc-extra a.mh-price-alt { display: inline-flex; font-size: 0.76rem; }
@media (min-width: 720px) {
  .mh-pricing-grid { grid-auto-rows: auto; }
  .mh-pricing-grid > .mh-price-card { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .mh-pc-extra:empty { display: block; }
  .mh-price-card > a.mh-svc-btn { margin-top: 0; align-self: end; }
}

/* Mobile App card details CTA: same family, blue accent */
.mh-price-card a.mh-app-details { background: linear-gradient(135deg, rgba(59,130,246,.14), rgba(37,99,235,.08)) padding-box, linear-gradient(120deg, rgba(96,165,250,.7), rgba(103,232,249,.45)) border-box; }
.mh-app-details .mh-web-details-ic { background: linear-gradient(135deg, rgba(59,130,246,.5), rgba(34,211,238,.3)); color: #e0f2fe; }
.mh-app-details .mh-web-details-t small { color: #bfdbfe; }
.mh-price-card a.mh-app-details:hover { background: linear-gradient(135deg, rgba(59,130,246,.22), rgba(37,99,235,.12)) padding-box, linear-gradient(120deg, #93c5fd, #67e8f9) border-box; box-shadow: 0 14px 32px -16px rgba(59,130,246,.95), inset 0 1px 0 rgba(255,255,255,.1); }

/* AI Platform card details CTA: cyan / violet accent */
.mh-price-card a.mh-ai-details { background: linear-gradient(135deg, rgba(34,211,238,.13), rgba(139,92,246,.14)) padding-box, linear-gradient(120deg, rgba(103,232,249,.75), rgba(167,139,250,.6)) border-box; }
.mh-ai-details .mh-web-details-ic { background: linear-gradient(135deg, rgba(34,211,238,.45), rgba(139,92,246,.4)); color: #ecfeff; }
.mh-ai-details .mh-web-details-t small { color: #a5f3fc; }
.mh-price-card a.mh-ai-details:hover { background: linear-gradient(135deg, rgba(34,211,238,.2), rgba(139,92,246,.22)) padding-box, linear-gradient(120deg, #67e8f9, #c4b5fd) border-box; box-shadow: 0 14px 32px -16px rgba(34,211,238,.85), inset 0 1px 0 rgba(255,255,255,.1); }

/* Business System card details CTA: gold / blue accent */
.mh-price-card a.mh-bs-details { background: linear-gradient(135deg, rgba(216,161,77,.12), rgba(59,130,246,.10)) padding-box, linear-gradient(120deg, rgba(243,201,139,.7), rgba(96,165,250,.55)) border-box; }
.mh-bs-details .mh-web-details-ic { background: linear-gradient(135deg, rgba(216,161,77,.5), rgba(59,130,246,.35)); color: #fff7ed; }
.mh-bs-details .mh-web-details-t small { color: #f3d19c; }
.mh-price-card a.mh-bs-details:hover { background: linear-gradient(135deg, rgba(216,161,77,.2), rgba(59,130,246,.16)) padding-box, linear-gradient(120deg, #f3c98b, #93c5fd) border-box; box-shadow: 0 14px 32px -16px rgba(216,161,77,.8), inset 0 1px 0 rgba(255,255,255,.1); }
.mh-pc-extra .mh-bs-details + a.mh-price-alt { margin-top: 10px; }

/* Homepage add-ons block: secondary details link under the primary CTA */
.mh-xa-details { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #ddd6fe; text-decoration: none; border: 1px solid rgba(167,139,250,.38); background: rgba(139,92,246,.08); transition: border-color .2s ease, background .2s ease, color .2s ease; }
.mh-xa-details i { font-size: .7rem; transition: transform .2s ease; }
[dir="ltr"] .mh-xa-details i { transform: scaleX(-1); }
.mh-xa-details:hover { color: #fff; border-color: rgba(196,181,253,.75); background: rgba(139,92,246,.16); }
.mh-xa-details:hover i { transform: translateX(-3px); } [dir="ltr"] .mh-xa-details:hover i { transform: scaleX(-1) translateX(-3px); }
.mh-xa-details:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }


/* Custom Add-ons block: details CTA in the same family, violet / cyan accent */
.mh-xa-side a.mh-web-details { margin-top: 0; }
.mh-xa-side a.mh-ad-details { background: linear-gradient(135deg, rgba(139,92,246,.16), rgba(34,211,238,.06)) padding-box, linear-gradient(120deg, rgba(196,181,253,.75), rgba(103,232,249,.4)) border-box; }
.mh-ad-details .mh-web-details-ic { background: linear-gradient(135deg, rgba(139,92,246,.6), rgba(34,211,238,.28)); color: #f5f3ff; }
.mh-ad-details .mh-web-details-t small { color: #ddd6fe; }
.mh-xa-side a.mh-ad-details:hover { background: linear-gradient(135deg, rgba(139,92,246,.26), rgba(34,211,238,.1)) padding-box, linear-gradient(120deg, #c4b5fd, #67e8f9) border-box; box-shadow: 0 14px 32px -16px rgba(139,92,246,.9), inset 0 1px 0 rgba(255,255,255,.1); }

/* ── Project request submission (honeypot + send error) ── */
.onb-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.onb-send-err { margin: 18px 0 0; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(252,165,165,.35); background: rgba(252,165,165,.07); }
.onb-send-err p { margin: 0 0 8px; font-size: 0.84rem; line-height: 1.6; color: #fecaca; }
.onb-send-err a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.84rem; font-weight: 600; color: var(--text, #fff); text-decoration: underline; text-underline-offset: 3px; }
.onb-submit[disabled] { opacity: .75; cursor: progress; }

/* ── Consultation booking (booking.js) ── */
.bk { width: min(820px, calc(100vw - 32px)); }
.bk-step { margin: 22px 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.bk-tz { text-transform: none; letter-spacing: 0; font-weight: 500; }
.bk-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bk-type { position: relative; font: inherit; color: var(--text); text-align: start; display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.03); cursor: pointer; min-width: 0; transition: border-color .2s ease, background .2s ease; }
.bk-type > i { font-size: 1.05rem; color: var(--text-dim); margin-top: 3px; }
.bk-type span:not(.onb-opt-check) { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bk-type b { font-size: .92rem; } .bk-type small { font-size: .78rem; color: var(--text-dim); }
.bk-type[aria-checked="true"] .onb-opt-check { background: var(--blue-2); border-color: transparent; color: #fff; }
.bk-type { padding-inline-end: 44px; }
.bk-type.is-on, .bk-day.is-on, .bk-time.is-on { border-color: rgba(96,165,250,.75); background: rgba(37,99,235,.14); }
.bk-type:focus-visible, .bk-day:focus-visible, .bk-time:focus-visible { outline: 2px solid var(--cyan, #38bdf8); outline-offset: 2px; }
.bk-pay { margin: 12px 0 0; display: flex; gap: 8px; align-items: flex-start; font-size: .8rem; line-height: 1.6; color: #fcd9a5; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(245,185,66,.3); background: rgba(245,185,66,.07); }
.bk-pay i { margin-top: 4px; }
.bk-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; overscroll-behavior-x: contain; }
.bk-day { flex: 0 0 auto; font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 62px; padding: 9px 10px; border-radius: 14px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.03); cursor: pointer; }
.bk-day small { font-size: .68rem; color: var(--text-dim); } .bk-day b { font-size: 1.05rem; }
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 10px; }
.bk-time { font: inherit; color: var(--text); display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 8px; border-radius: 12px; border: 1px solid var(--border-strong); background: rgba(255,255,255,.03); cursor: pointer; font-weight: 600; font-size: .88rem; }
.bk-time small { font-size: .66rem; font-weight: 500; color: var(--text-faint); }
.bk-loading { display: flex; gap: 8px; align-items: center; color: var(--text-dim); font-size: .85rem; padding: 10px 0; }
.bk-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #fcd9a5; }
.bk-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.bk-done .bk-pay { text-align: start; }
@media (max-width: 560px) { .bk-types { grid-template-columns: 1fr; } }

/* ── Promotions on the pricing cards (promotions.js). Original price stays visible; text labels, not colour alone. ── */
.mh-promo-banner { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin: 0 0 22px; padding: 16px 20px; border-radius: 18px;
  border: 1px solid rgba(214,167,87,.34); background: linear-gradient(100deg, rgba(214,167,87,.12), rgba(42,212,238,.07) 60%, rgba(47,107,255,.06)); box-shadow: 0 18px 50px -40px rgba(214,167,87,.6); }
.mh-promo-banner[hidden] { display: none; }
.mh-promo-orbit { position: absolute; inset-inline-end: -60px; top: -90px; width: 220px; height: 220px; border-radius: 50%; border: 1px dashed rgba(240,205,138,.28); pointer-events: none; animation: mh-promo-spin 60s linear infinite; }
.mh-promo-orbit::after { content: ""; position: absolute; top: 18%; left: 12%; width: 7px; height: 7px; border-radius: 50%; background: #F0CD8A; box-shadow: 0 0 12px #F0CD8A; }
.mh-promo-bt { position: relative; display: grid; gap: 2px; } .mh-promo-bt b { font-size: 1.05rem; color: var(--text); } .mh-promo-bt span { color: var(--text-dim, #A6B0C3); font-size: .92rem; }
.mh-promo-bm { position: relative; display: flex; flex-wrap: wrap; gap: 8px; }
.mh-promo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: #F0CD8A; border: 1px solid rgba(240,205,138,.32); background: rgba(240,205,138,.08); font-variant-numeric: tabular-nums; }
.mh-price-card.mh-promo, .mh-xa.mh-promo { border-color: rgba(214,167,87,.38); box-shadow: 0 0 0 1px rgba(214,167,87,.10), 0 28px 70px -48px rgba(214,167,87,.55); }
.mh-price-card.mh-promo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: .7;
  background: conic-gradient(from var(--mh-promo-a, 0deg), transparent 0 70%, rgba(240,205,138,.85) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: mh-promo-shimmer 7s linear infinite; }
@property --mh-promo-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.mh-promo-tag { position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2; padding: 5px 12px; border-radius: 999px; font-size: .8rem; font-weight: 800; letter-spacing: .02em; color: #1B1405;
  background: linear-gradient(180deg, #F0CD8A, #D6A757); box-shadow: 0 0 22px rgba(214,167,87,.55); animation: mh-promo-glow 3.2s ease-in-out infinite; }
.mh-xa.mh-promo { position: relative; }
.mh-promo .mh-price-value-row .mh-price-value, .mh-promo .mh-xa-price .mh-xa-amount { color: var(--text-dim, #A6B0C3); text-decoration: line-through; text-decoration-thickness: 1px; font-weight: 600; }
.mh-promo .mh-price-value-row, .mh-promo .mh-xa-price { display: none; }
.mh-promo-box { display: grid; gap: 4px; margin-bottom: 16px; padding: 14px; border-radius: 14px; border: 1px solid rgba(214,167,87,.28); background: linear-gradient(160deg, rgba(214,167,87,.08), rgba(255,255,255,.02)); }
.mh-promo-was { margin: 0; font-size: .85rem; color: var(--text-dim, #A6B0C3); } .mh-promo-was s { text-decoration-thickness: 1px; }
.mh-promo-now { margin: 0; display: grid; gap: 2px; } .mh-promo-now span { font-size: .8rem; color: var(--text-dim, #A6B0C3); }
.mh-promo-now b { font-size: 1.55rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; animation: mh-promo-reveal .7s ease both; }
[dir="ltr"] .mh-promo-now b { font-family: 'Space Grotesk','Inter',sans-serif; font-weight: 700; }
.mh-promo-note { margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: #F0CD8A; }
@keyframes mh-promo-spin { to { transform: rotate(360deg); } }
@keyframes mh-promo-shimmer { to { --mh-promo-a: 360deg; } }
@keyframes mh-promo-glow { 50% { box-shadow: 0 0 30px rgba(214,167,87,.75); } }
@keyframes mh-promo-reveal { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .mh-promo-orbit, .mh-price-card.mh-promo::after, .mh-promo-tag, .mh-promo-now b { animation: none !important; } }

/* Client Login — a quiet text link beside the language toggle (desktop); the mobile menu lists it last */
.mh-nav-login { display: none; align-items: center; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--text-dim); text-decoration: none; padding: 6px 4px; border-radius: 8px; transition: color .2s ease; white-space: nowrap; }
.mh-nav-login:hover { color: var(--text); } .mh-nav-login:focus-visible { outline: 2px solid var(--accent, #2F6BFF); outline-offset: 2px; }
@media (min-width: 960px) { .mh-nav-login { display: inline-flex; } }
.mh-mobile-menu .mh-mobile-login { opacity: .85; }
/* How we work — project terms + estimated timelines (reuses the comparison drawer) */
.mh-terms { margin-top: 14px; }
.mh-terms-grid { display: grid; gap: 18px 32px; padding-top: 14px; }
@media (min-width: 900px) { .mh-terms-grid { grid-template-columns: 1.4fr 1fr; } }
.mh-terms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mh-terms-list li { position: relative; padding-inline-start: 18px; font-size: .88rem; line-height: 1.7; color: var(--text-dim); }
.mh-terms-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: rgba(129,140,248,.7); }
.mh-terms-time .mh-dlv-k { margin-top: 0; }
.mh-terms-time dl { margin: 0; display: grid; gap: 0; }
.mh-terms-time dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(148,163,184,.1); font-size: .84rem; }
.mh-terms-time dt { color: var(--text-dim); } .mh-terms-time dd { margin: 0; color: var(--text); font-weight: 600; white-space: nowrap; }