/* Makeen marketing homepage — page-specific layout only.
   Component look (buttons, cards, nav, footer, inputs, links) comes from
   bundle.css; palette/spacing/type values come from tokens.css. This file
   is only the homepage's own section grids and one-off patterns, built on
   those tokens so it inherits the system automatically. */

#mkw { --mkw-container: 1180px; min-height: 100vh; background: var(--surface-page); }
#mkw .mkw-container { max-width: var(--mkw-container); margin-inline: auto; padding-inline: var(--space-8); position: relative; }
@media (max-width: 640px) { #mkw .mkw-container { padding-inline: var(--space-4); } }

#mkw section { padding-block: var(--space-24); position: relative; }
@media (max-width: 640px) { #mkw section { padding-block: var(--space-16); } }
#mkw .mkw-sunken { background: var(--surface-sunken); }
#mkw .mkw-inverse { background: var(--surface-inverse); color: var(--ink-on-inverse); overflow: clip; }
#mkw .mkw-tint { background: var(--brand-primary-soft); overflow: clip; }

/* reveal-on-scroll */
#mkw [data-mk-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--mk-duration-slow) var(--mk-ease), transform var(--mk-duration-slow) var(--mk-ease); }
#mkw [data-mk-reveal].is-visible { opacity: 1; transform: none; }

/* decorative chevron motif — used sparingly, never the logo mark */
#mkw .mkw-chevron { position: absolute; pointer-events: none; z-index: 0; opacity: .10; }
#mkw[dir="rtl"] .mkw-chevron { transform: scaleX(-1); }
#mkw .mkw-chevron svg { width: 100%; height: 100%; }

/* eyebrow */
#mkw .mkw-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-en); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-primary-strong); margin-bottom: var(--space-4); }
#mkw .mkw-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-primary); flex: none; }
#mkw[dir="rtl"] .mkw-eyebrow { font-family: var(--font-ar); font-size: 14px; letter-spacing: 0; text-transform: none; }
#mkw .mkw-inverse .mkw-eyebrow, #mkw .mkw-inverse .mkw-eyebrow::before { color: var(--brand-primary); }

/* section head */
#mkw .mkw-head { max-width: 640px; margin-bottom: var(--space-12); position: relative; z-index: 1; }
#mkw .mkw-head--center { max-width: 680px; margin-inline: auto; text-align: center; }
#mkw .mkw-head h2 { font-family: var(--font-en); font-size: 32px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--space-3); }
#mkw[dir="rtl"] .mkw-head h2 { font-family: var(--font-ar); font-size: 28px; line-height: 1.5; font-weight: 700; }
#mkw .mkw-head p { font-family: var(--font-en); font-size: 17px; line-height: 1.65; color: var(--ink-secondary); margin: 0; }
#mkw[dir="rtl"] .mkw-head p { font-family: var(--font-ar); font-size: 17px; line-height: 1.9; }
#mkw .mkw-inverse .mkw-head h2 { color: var(--ink-on-inverse); }
#mkw .mkw-inverse .mkw-head p { color: var(--ink-on-inverse-secondary); }

/* ---------- hero ---------- */
#mkw .mkw-hero { padding-block: var(--space-32) var(--space-24); }
@media (max-width: 640px) { #mkw .mkw-hero { padding-block: var(--space-16); } }
#mkw .mkw-hero__chevron { inset-inline-end: -60px; top: -40px; width: 260px; height: 420px; color: var(--brand-primary); }
#mkw .mkw-hero__grid { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--space-16); align-items: center; position: relative; z-index: 1; }
@media (max-width: 980px) { #mkw .mkw-hero__grid { grid-template-columns: 1fr; } #mkw .mkw-hero__art { display: none; } }
#mkw .mkw-hero__headline { font-family: var(--font-en); font-size: clamp(34px, 5.2vw, 54px); line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 var(--space-6); }
#mkw[dir="rtl"] .mkw-hero__headline { font-family: var(--font-ar); font-size: clamp(32px, 6vw, 48px); line-height: 1.3; letter-spacing: 0; font-weight: 700; }
#mkw .mkw-hero__sub { font-family: var(--font-en); font-size: 18px; line-height: 1.65; color: var(--ink-secondary); max-width: 50ch; margin: 0 0 var(--space-3); }
#mkw[dir="rtl"] .mkw-hero__sub { font-family: var(--font-ar); font-size: 19px; line-height: 1.9; max-width: 42ch; }
#mkw .mkw-hero__sub2 { font-family: var(--font-en); font-size: 16px; line-height: 1.6; color: var(--ink-muted); max-width: 50ch; margin: 0 0 var(--space-8); }
#mkw[dir="rtl"] .mkw-hero__sub2 { font-family: var(--font-ar); font-size: 16px; line-height: 1.85; max-width: 42ch; }
#mkw .mkw-hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
#mkw .mkw-hero__art { position: relative; aspect-ratio: 1/1.1; }
#mkw .mkw-hero__art svg { width: 100%; height: 100%; }

/* ---------- philosophy split (software built around your business) ---------- */
#mkw .mkw-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
@media (max-width: 860px) { #mkw .mkw-split { grid-template-columns: 1fr; gap: var(--space-8); } }
#mkw .mkw-split h2 { font-family: var(--font-en); font-size: 30px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 var(--space-5); }
#mkw[dir="rtl"] .mkw-split h2 { font-family: var(--font-ar); font-size: 27px; line-height: 1.5; }
#mkw .mkw-split p { font-family: var(--font-en); font-size: 17px; line-height: 1.7; color: var(--ink-secondary); margin: 0 0 var(--space-4); }
#mkw[dir="rtl"] .mkw-split p { font-family: var(--font-ar); font-size: 18px; line-height: 1.95; }
#mkw .mkw-split strong { color: var(--ink); font-weight: 700; }

/* ---------- principles (4 cards) ---------- */
#mkw .mkw-principles__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); position: relative; z-index: 1; }
@media (max-width: 980px) { #mkw .mkw-principles__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #mkw .mkw-principles__grid { grid-template-columns: 1fr; } }

/* ---------- what we build ---------- */
#mkw .mkw-build__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
@media (max-width: 980px) { #mkw .mkw-build__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { #mkw .mkw-build__grid { grid-template-columns: 1fr; } }
#mkw .mkw-build__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
#mkw .mkw-build__list li { font-family: var(--font-en); font-size: 14px; line-height: 1.5; color: var(--ink-secondary); padding-inline-start: var(--space-4); position: relative; }
#mkw[dir="rtl"] .mkw-build__list li { font-family: var(--font-ar); font-size: 15px; line-height: 1.8; }
#mkw .mkw-build__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--brand-primary); }
#mkw[dir="rtl"] .mkw-build__list li::before { top: 10px; }

/* ---------- process (5 steps) ---------- */
#mkw .mkw-process__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-6); }
@media (max-width: 1080px) { #mkw .mkw-process__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { #mkw .mkw-process__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { #mkw .mkw-process__grid { grid-template-columns: 1fr; } }
#mkw .mkw-step__num { font-family: var(--font-en); font-size: 30px; font-weight: 800; color: var(--brand-primary); line-height: 1; margin-bottom: var(--space-4); }
#mkw .mkw-step__title { font-family: var(--font-en); font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-2); }
#mkw[dir="rtl"] .mkw-step__title { font-family: var(--font-ar); font-size: 19px; }
#mkw .mkw-step__body { font-family: var(--font-en); font-size: 14px; line-height: 1.6; color: var(--ink-secondary); margin: 0; }
#mkw[dir="rtl"] .mkw-step__body { font-family: var(--font-ar); font-size: 15px; line-height: 1.85; }

/* ---------- existing system ---------- */
#mkw .mkw-existing__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
@media (max-width: 860px) { #mkw .mkw-existing__grid { grid-template-columns: 1fr; gap: var(--space-8); } }
#mkw .mkw-existing__lede { font-family: var(--font-en); font-size: 20px; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-4); }
#mkw[dir="rtl"] .mkw-existing__lede { font-family: var(--font-ar); font-size: 20px; }
#mkw .mkw-existing__body { font-family: var(--font-en); font-size: 16px; line-height: 1.65; color: var(--ink-secondary); margin: 0 0 var(--space-7); max-width: 46ch; }
#mkw[dir="rtl"] .mkw-existing__body { font-family: var(--font-ar); font-size: 17px; line-height: 1.9; max-width: 40ch; }
#mkw .mkw-check__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-7); box-shadow: var(--shadow-sm); }
@media (max-width: 520px) { #mkw .mkw-check__list { grid-template-columns: 1fr; } }
#mkw .mkw-check__list li { display: flex; align-items: flex-start; gap: var(--space-3); font-family: var(--font-en); font-size: 15px; line-height: 1.5; color: var(--ink); }
#mkw[dir="rtl"] .mkw-check__list li { font-family: var(--font-ar); font-size: 16px; line-height: 1.7; }
#mkw .mkw-check__list svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--brand-primary-strong); }

/* ---------- AI philosophy (inverse, bold moment) ---------- */
#mkw .mkw-ai { padding-block: var(--space-32); }
@media (max-width: 640px) { #mkw .mkw-ai { padding-block: var(--space-16); } }
#mkw .mkw-ai__chevron { inset-inline-start: -80px; bottom: -60px; width: 320px; height: 480px; color: var(--brand-primary); opacity: .16; }
#mkw .mkw-ai__inner { max-width: 720px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
#mkw .mkw-ai__q { font-family: var(--font-en); font-size: clamp(24px, 3.4vw, 34px); line-height: 1.35; font-weight: 700; color: var(--ink-on-inverse); margin: 0 0 var(--space-6); }
#mkw[dir="rtl"] .mkw-ai__q { font-family: var(--font-ar); font-size: clamp(23px, 3.6vw, 30px); line-height: 1.6; }
#mkw .mkw-ai__q span { color: var(--brand-primary); }
#mkw .mkw-ai__body { font-family: var(--font-en); font-size: 17px; line-height: 1.7; color: var(--ink-on-inverse-secondary); margin: 0 0 var(--space-4); }
#mkw[dir="rtl"] .mkw-ai__body { font-family: var(--font-ar); font-size: 18px; line-height: 1.9; }
#mkw .mkw-ai__goal { font-family: var(--font-en); font-size: 15px; font-weight: 600; color: var(--ink-on-inverse); margin: var(--space-6) 0 0; }
#mkw[dir="rtl"] .mkw-ai__goal { font-family: var(--font-ar); font-size: 16px; }

/* ---------- solutions chips ---------- */
#mkw .mkw-chips { display: flex; flex-wrap: wrap; gap: var(--space-3); position: relative; z-index: 1; }
#mkw .mkw-chip { display: inline-flex; align-items: center; font-family: var(--font-en); font-size: 14px; font-weight: 500; color: var(--ink); background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-full); padding: var(--space-3) var(--space-5); }
#mkw[dir="rtl"] .mkw-chip { font-family: var(--font-ar); font-size: 15px; }

/* ---------- why makeen (5 items) ---------- */
#mkw .mkw-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-8); }
@media (max-width: 860px) { #mkw .mkw-why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { #mkw .mkw-why__grid { grid-template-columns: 1fr; } }
#mkw .mkw-why__item { display: flex; gap: var(--space-4); }
#mkw .mkw-why__icon { flex: none; width: 44px; height: 44px; border-radius: var(--radius-xs); background: var(--brand-primary-soft); color: var(--brand-primary-strong); display: inline-flex; align-items: center; justify-content: center; }
#mkw .mkw-why__icon svg { width: 20px; height: 20px; }
#mkw .mkw-why__title { font-family: var(--font-en); font-size: 16px; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-1); }
#mkw[dir="rtl"] .mkw-why__title { font-family: var(--font-ar); font-size: 17px; }
#mkw .mkw-why__body { font-family: var(--font-en); font-size: 14px; line-height: 1.6; color: var(--ink-secondary); margin: 0; }
#mkw[dir="rtl"] .mkw-why__body { font-family: var(--font-ar); font-size: 15px; line-height: 1.85; }

/* ---------- idea panel ---------- */
#mkw .mkw-idea__inner { max-width: 640px; margin-inline: auto; text-align: center; position: relative; z-index: 1; }
#mkw .mkw-idea__title { font-family: var(--font-en); font-size: 26px; font-weight: 700; color: var(--ink); margin: 0 0 var(--space-4); }
#mkw[dir="rtl"] .mkw-idea__title { font-family: var(--font-ar); font-size: 24px; }
#mkw .mkw-idea__body { font-family: var(--font-en); font-size: 16px; line-height: 1.65; color: var(--ink-secondary); margin: 0 0 var(--space-7); }
#mkw[dir="rtl"] .mkw-idea__body { font-family: var(--font-ar); font-size: 17px; line-height: 1.9; }

/* ---------- final cta ---------- */
#mkw .mkw-final { padding-block: var(--space-32); text-align: center; }
@media (max-width: 640px) { #mkw .mkw-final { padding-block: var(--space-20); } }
#mkw .mkw-final__chevron-a { inset-inline-start: -40px; top: -50px; width: 220px; height: 340px; color: var(--brand-primary); }
#mkw .mkw-final__chevron-b { inset-inline-end: -50px; bottom: -70px; width: 260px; height: 400px; color: var(--brand-primary); }
#mkw .mkw-final__inner { max-width: 680px; margin-inline: auto; position: relative; z-index: 1; }
#mkw .mkw-final__title { font-family: var(--font-en); font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; color: var(--ink-on-inverse); margin: 0 0 var(--space-5); letter-spacing: -0.01em; }
#mkw[dir="rtl"] .mkw-final__title { font-family: var(--font-ar); font-size: clamp(25px, 3.8vw, 32px); font-weight: 700; }
#mkw .mkw-final__body { font-family: var(--font-en); font-size: 17px; line-height: 1.65; color: var(--ink-on-inverse-secondary); margin: 0 0 var(--space-8); }
#mkw[dir="rtl"] .mkw-final__body { font-family: var(--font-ar); font-size: 18px; line-height: 1.9; }

/* ---------- language switch (cross-page link, styled as a pill) ---------- */
#mkw .mkw-lang { display: inline-flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-full); padding: 3px; gap: 2px; }
#mkw .mkw-lang > * { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; padding: 5px 12px; border-radius: var(--radius-full); font-family: var(--font-en); font-size: 12px; font-weight: 600; text-decoration: none; }
#mkw .mkw-lang > span { background: var(--brand-primary-strong); color: var(--ink-on-primary); }
#mkw .mkw-lang > a { color: var(--ink-secondary); }
#mkw .mkw-lang > a:hover { color: var(--ink); }
#mkw .mkw-inverse .mkw-lang, #mkw .mk-footer .mkw-lang { border-color: var(--border-inverse); }
#mkw .mkw-inverse .mkw-lang > a, #mkw .mk-footer .mkw-lang > a { color: var(--ink-on-inverse-secondary); }
#mkw .mkw-inverse .mkw-lang > a:hover, #mkw .mk-footer .mkw-lang > a:hover { color: var(--ink-on-inverse); }

/* nav collapse */
@media (max-width: 900px) {
  #mkw .mk-nav__links { display: none; }
  #mkw .mk-nav__actions .mkw-nav-cta { display: none; }
  #mkw .mk-nav__toggle { display: inline-flex; }
}
#mkw .mkw-mobile-panel { display: none; }
#mkw .mkw-mobile-panel[data-open="true"] { display: block; position: fixed; inset: 0; z-index: 50; background: rgba(32,28,22,0.5); }
#mkw .mkw-mobile-panel__sheet { position: absolute; inset-inline: 16px; top: 88px; background: var(--surface-raised); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
#mkw .mkw-mobile-panel__links { display: flex; flex-direction: column; gap: var(--space-4); }

/* contact — embedded Tally form (CTA scroll target) */
#mkw .mkw-contact { scroll-margin-top: 80px; }
#mkw .mkw-contact .mkw-head { margin-bottom: var(--space-6); }
#mkw .mkw-contact iframe { display: block; width: 100%; border: 0; }

/* keep the off-edge decorative chevrons from causing horizontal page scroll (mobile) */
#mkw { overflow-x: clip; }