/* Homepage only. Loaded after app.css by index.html; scoped under body.home so sub-pages are untouched.
           Shape rule: buttons 10px, cards and photos 16px. One accent: orange. */

        body.home { --muted: #6f6254; --bg-alt: #f5f5f4; --header-h: 72px; }

        /* Line every section up with the logo and nav (header-inner pads 1.5rem inside --max) */
        .home .section-inner, .home .home-clients-inner, .home .home-local-inner, .home .home-faq-inner,
        .home .contact-inner, .home .footer-inner, .home .footer-bottom { max-width: calc(var(--max) - 3rem); }

        /* ── Hero: brand glow + grid lines (same as the sub-page heroes), copy left, photo bleeding off the right edge ── */
        .home-hero { position: relative; display: grid; grid-template-columns: 1fr min(var(--max), 100% - 2.5rem) 1fr; margin-top: calc(-1 * var(--header-h)); padding-block: calc(var(--header-h) + clamp(2.5rem, 5vw, 4rem)) clamp(3rem, 6vw, 5rem); background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(249, 115, 22, 0.35) 0%, transparent 60%), radial-gradient(circle 700px at 80% 90%, rgba(251, 191, 36, 0.12) 0%, transparent 50%), radial-gradient(circle 500px at 10% 70%, rgba(234, 88, 12, 0.5) 0%, transparent 50%), linear-gradient(180deg, var(--hero-bg-1) 0%, var(--hero-bg-2) 60%, #2e1608 100%); color: #fff; overflow: hidden; }
        .home-hero::before { content: ''; position: absolute; inset: 0; 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: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 80%); pointer-events: none; }
        .home-hero-inner { position: relative; z-index: 1; grid-column: 2; display: grid; grid-template-columns: 54fr 46fr; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
        .home-hero-copy { padding-inline-start: 1.5rem; }
        .home-hero h1 { font-size: clamp(2.5rem, 4.8vw, 3.9rem); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: #fff; margin-block-end: 1.4rem; text-wrap: balance; }
        .home-hero h1 .accent { background: linear-gradient(135deg, var(--primary-light) 0%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; padding-block-end: 0.06em; }
        .home-hero-sub { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.6; color: rgba(255,255,255,0.78); max-width: 32em; margin-block-end: 2.25rem; text-wrap: pretty; }
        .home-hero-ctas { display: flex; flex-wrap: wrap; gap: 0.85rem; }
        .home-hero-media { margin: 0; margin-inline-end: calc((min(var(--max), 100vw - 2.5rem) - 100vw) / 2); height: 100%; min-height: 500px; border-radius: 16px 0 0 16px; overflow: hidden; }
        .home-hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }

        /* Header: fully transparent over the hero; app.js adds .scrolled past 80px, which brings back the white bar from app.css */
        .home .header:not(.scrolled) { background: transparent; border-block-end-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

        .home .btn:active { transform: scale(0.98); }

        /* ── Section heads (left-aligned, no kicker) ── */
        .home-section { padding: clamp(4rem, 8vw, 6.5rem) 1.5rem; }
        .home-section.alt { background: var(--bg-alt); }
        .home-head { max-width: 660px; margin-block-end: clamp(2.25rem, 4vw, 3.25rem); }
        .home-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin-block-end: 0.85rem; text-wrap: balance; }
        .home-head p { font-size: 1.08rem; color: var(--muted); line-height: 1.6; max-width: 58ch; text-wrap: pretty; }

        /* ── Client logos: caption on a hairline, carousel inside the page wrapper ──
           The track holds the logo set twice; sliding it by -50% loops seamlessly (each item carries its own trailing margin so both halves are equal). */
        .home-clients { padding: clamp(3.5rem, 7vw, 5.5rem) 1.5rem; background: var(--bg); }
        .home-clients-inner { margin: 0 auto; }
        .home-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
        .home-clients-label { display: flex; align-items: center; gap: 1.25rem; margin-block-end: clamp(1.5rem, 3vw, 2rem); font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; color: var(--fg-2); text-align: center; }
        .home-clients-label::before, .home-clients-label::after { content: ''; flex: 1 1 24px; min-width: 24px; height: 1px; background: var(--border-2); }
        .home-clients-label strong { color: var(--primary-deep); font-weight: 700; }
        .home-marquee-track { display: flex; align-items: center; width: max-content; list-style: none; animation: home-marquee 40s linear infinite; }
        .home-marquee:hover .home-marquee-track { animation-play-state: paused; }
        .home-marquee-track li { flex: none; display: flex; align-items: center; justify-content: center; height: 96px; margin-inline-end: clamp(2.75rem, 5vw, 4.5rem); }
        .home-marquee-track img { display: block; height: 88px; width: auto; max-width: 180px; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; opacity: 0.75; transition: opacity var(--transition), filter var(--transition); }
        .home-marquee-track img:hover { filter: none; opacity: 1; }
        @keyframes home-marquee { to { transform: translateX(-50%); } }

        /* ── Features: photo bento + compact list ── */
        .home-bento { display: grid; grid-template-columns: 7fr 5fr; gap: 1.25rem; }
        .home-tile { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 2px rgba(40,25,8,0.06), 0 8px 24px -16px rgba(40,25,8,0.18); }
        .home-tile img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
        .home-tile--lg { grid-row: span 2; }
        .home-tile--lg img { flex: 1; aspect-ratio: auto; min-height: 340px; object-position: 35% 45%; }
        .home-tile-body { padding: 1.35rem 1.6rem 1.6rem; }
        .home-tile h3 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.015em; margin-block-end: 0.4rem; }
        .home-tile p { font-size: 0.95rem; color: var(--muted); line-height: 1.6; max-width: 48ch; }

        .home-more { margin-block-start: clamp(2.75rem, 5vw, 3.75rem); }
        .home-more > h3 { font-size: 1.15rem; font-weight: 700; margin-block-end: 1.5rem; }
        .home-more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem 2.5rem; padding-block-start: 1.75rem; border-block-start: 1px solid var(--border-2); list-style: none; }
        .home-more-grid h4 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-block-end: 0.3rem; display: flex; align-items: baseline; gap: 0.5rem; }
        .home-more-grid .plan { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; color: var(--primary-deep); letter-spacing: 0.02em; }
        .home-more-grid p { font-size: 0.92rem; color: var(--muted); line-height: 1.55; }

        /* Integrations: the original logo cards (.int-grid / .int-card from app.css) */
        .home-int { margin-block-start: clamp(3.25rem, 6vw, 4.5rem); }
        .home-int > h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin-block-end: 1.5rem; }
        .home .int-card h4 { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; margin-block-end: 0.4rem; }
        .home-int-more { text-align: center; margin-block-start: 2rem; }

        /* ── Built for Iraq: photo + four points ── */
        .home-local-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 5fr 6fr; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
        .home-local-media { margin: 0; border-radius: 16px; overflow: hidden; }
        .home-local-media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 50%; }
        .home-local .home-head { margin-block-end: 2rem; }
        .home-local-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 2rem; list-style: none; }
        .home-local-points h3 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; margin-block-end: 0.35rem; }
        .home-local-points p { font-size: 0.93rem; color: var(--muted); line-height: 1.55; }

        /* ── Before vs after: two full-bleed photos, caption over a bottom scrim. Before is muted, after is full colour ── */
        .home-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
        .home-ba-panel { position: relative; margin: 0; border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1; background: var(--hero-bg-2); isolation: isolate; }
        .home-ba-panel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
        .home-ba-before img { object-position: 50% 58%; filter: saturate(0.35) brightness(0.85); }
        .home-ba-after img { object-position: 8% 50%; }
        .home-ba-panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 35%, rgba(20,10,4,0.55) 60%, rgba(20,10,4,0.92) 100%); }
        .home-ba-panel figcaption { position: absolute; inset: auto 0 0 0; padding: clamp(1.5rem, 3vw, 2.25rem); color: #fff; }
        .home-ba-tag { display: inline-block; margin-block-end: 0.9rem; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
        .home-ba-before .home-ba-tag { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
        .home-ba-after .home-ba-tag { background: var(--primary); color: #fff; }
        .home-ba-panel h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: #fff; margin-block-end: 0.6rem; }
        .home-ba-panel p { font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,0.8); max-width: 36ch; text-wrap: pretty; }
        .home-ba-after .btn { margin-block-start: 1.4rem; background: #fff; color: var(--primary-deep); box-shadow: none; }
        .home-ba-after .btn:hover { background: var(--bg-alt); transform: translateY(-1px); }

        /* ── Testimonials: dark brand band (glow + grid lines like the hero), three quote cards ── */
        .home-quotes { position: relative; overflow: hidden; color: #fff; background: radial-gradient(ellipse 60% 80% at 12% 15%, rgba(249,115,22,0.28) 0%, transparent 60%), radial-gradient(circle at 88% 90%, rgba(251,191,36,0.1) 0%, transparent 50%), linear-gradient(135deg, var(--hero-bg-2) 0%, var(--hero-bg-1) 100%); }
        .home-quotes::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 60px 60px; -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%); mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, black, transparent 80%); pointer-events: none; }
        .home-quotes .section-inner { position: relative; z-index: 1; }
        .home-quotes .home-head h2 { color: #fff; }
        .home-quotes .home-head p { color: rgba(255,255,255,0.7); }
        .home-quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
        .home-quote { margin: 0; display: flex; flex-direction: column; padding: clamp(1.5rem, 2.5vw, 2rem); border-radius: 16px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); transition: border-color var(--transition), background var(--transition); }
        .home-quote:hover { border-color: rgba(249,115,22,0.45); background: rgba(255,255,255,0.07); }
        .home-quote-mark { display: block; height: 1.75rem; margin-block-end: 1rem; font-family: var(--font-display); font-size: 3.5rem; font-weight: 800; line-height: 1; color: var(--primary-light); }
        .home-quote blockquote { flex: 1; margin-block-end: 1.75rem; font-size: 1.02rem; line-height: 1.7; color: rgba(255,255,255,0.9); text-wrap: pretty; }
        .home-quote figcaption { display: flex; align-items: center; gap: 0.85rem; padding-block-start: 1.25rem; border-block-start: 1px solid rgba(255,255,255,0.1); }
        .home-quote-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); color: #fff; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; }
        .home-quote figcaption strong { display: block; font-size: 0.95rem; font-weight: 600; color: #fff; }
        .home-quote-role { display: block; font-size: 0.85rem; color: rgba(255,255,255,0.6); }

        /* ── Pricing (reuses app.css cards) ── */
        .home .pricing-card.featured { overflow: visible; }
        .home .pricing-card.featured::before { content: none; }
        .home .pricing-card { border-radius: 16px; }
        .home .pricing-note { margin-block-start: 2rem; }

        /* ── FAQ: heading left, accordion right ── */
        .home-faq-inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 4fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
        .home-faq-inner .home-head { margin-block-end: 0; }
        .home-faq-inner .home-head a { color: var(--primary-deep); font-weight: 600; text-decoration: none; }
        .home-faq-inner .home-head a:hover { text-decoration: underline; text-underline-offset: 3px; }
        .home .faq-list { max-width: none; margin: 0; gap: 0; border-block-start: 1px solid var(--border-2); }
        .home .faq-item { background: none; border: none; border-block-end: 1px solid var(--border-2); border-radius: 0; }
        .home .faq-item[open] { border-color: var(--border-2); box-shadow: none; }
        .home .faq-item summary { padding: 1.2rem 0; font-size: 1.02rem; }
        .home .faq-answer { padding: 0 0 1.35rem; max-width: 62ch; }

        /* ── Contact: keeps the app.css glow + grid lines, matching the hero ── */
        .home .form-field input::placeholder, .home .form-field textarea::placeholder { color: rgba(255,255,255,0.45); }
        .home .submit-btn .btn-state-default { display: inline-flex; align-items: center; gap: 0.5rem; }
        .home-next { list-style: none; counter-reset: next; display: grid; gap: 0.9rem; margin-block-end: 2rem; }
        .home-next li { counter-increment: next; display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.6rem; font-size: 0.97rem; line-height: 1.5; color: rgba(255,255,255,0.86); }
        .home-next li::before { content: counter(next); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--primary-light); line-height: 1.4; }

        .home .footer-brand p { margin-block-end: 1.25rem; }

        /* ── Responsive ── */
        @media (max-width: 1024px) {
            .home-bento { grid-template-columns: 1fr 1fr; }
            .home-tile--lg { grid-column: 1 / -1; grid-row: auto; }
            .home-tile--lg img { flex: none; aspect-ratio: 16 / 8; min-height: 0; }
            .home-more-grid { grid-template-columns: 1fr 1fr; }
            .home-local-inner { grid-template-columns: 1fr; }
            .home-local-media img { aspect-ratio: 16 / 9; }
            .home-ba { grid-template-columns: 1fr; max-width: 640px; }
            .home-faq-inner { grid-template-columns: 1fr; }
            .home-quotes-grid { grid-template-columns: 1fr; max-width: 640px; }
        }
        @media (max-width: 900px) {
            .home-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
            .home-hero-copy { padding-inline-start: 0; }
            .home-hero-media { height: auto; min-height: 0; aspect-ratio: 4 / 3; }
        }
        @media (max-width: 640px) {
            .home-bento, .home-more-grid, .home-local-points { grid-template-columns: 1fr; }
            .home-tile--lg img { aspect-ratio: 4 / 3; }
            .home-ba-panel { aspect-ratio: 3 / 4; }
            .home-ba-after img { object-position: 18% 50%; }
            .home-marquee-track li { height: 72px; margin-inline-end: 2.25rem; }
            .home-marquee-track img { height: 64px; max-width: 130px; }
        }
        @media (prefers-reduced-motion: reduce) {
            .home .fade-in { opacity: 1; transform: none; transition: none; }
            .home-marquee { -webkit-mask-image: none; mask-image: none; }
            .home-marquee-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; row-gap: 1.5rem; }
            .home-marquee-track li[aria-hidden="true"] { display: none; }
            .home .btn, .home .btn:hover, .home .btn:active { transition: none; transform: none; }
        }