/* Home-specific */
.home-problem-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; }
.problem-list { display: grid; grid-template-columns: repeat(2,1fr); gap: 18px; }
.problem-card { padding: 24px; border-top: 3px solid var(--color-primary); }
.problem-card h3 { font-size: 1.05rem; }
.problem-card p { font-size: .86rem; margin-bottom: 0; }
.services-grid { grid-template-columns: repeat(3,1fr); }
.portfolio-grid { grid-template-columns: repeat(3,1fr); }
.blog-grid { grid-template-columns: repeat(3,1fr); }
.home-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: start; }

/* Services overview */
.services-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: end; }
.service-band { display: grid; grid-template-columns: 52px 64px minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 34px 0; border-bottom: 1px solid var(--color-border); }
.service-band .icon-box { margin-bottom: 0; }
.service-band h3 { font-size: clamp(1.5rem, 3vw, 2.4rem); margin: 0 0 12px; }
.service-band p { margin: 0; }
.service-band .feature-list { margin-bottom: 0; }
.service-band .text-link { align-self: center; white-space: nowrap; }
.service-number { color: var(--color-primary); font-weight: 900; }

/* Contact */
.contact-highlight { padding: 28px; border-radius: 16px; background: var(--color-primary-soft); margin-top: 26px; }
.contact-highlight-note { margin: 7px 0 0; }

/* Blog */
.blog-featured { display: grid; grid-template-columns: 1.1fr .9fr; overflow: hidden; }
.blog-featured .blog-image { aspect-ratio: auto; min-height: 390px; }
.blog-featured .blog-content { padding: 42px; display: flex; flex-direction: column; justify-content: center; }

/* Empty/placeholder labels */
.prototype-note { display: inline-flex; margin-top: 12px; padding: 5px 9px; border-radius: 7px; background: var(--color-placeholder-bg); color: var(--color-placeholder-text); font-size: .7rem; font-weight: 800; }

/* Final image integration */
.section-split { display: grid; grid-template-columns: 1fr .9fr; gap: 28px; align-items: center; margin-bottom: 20px; }
.section-visual { display: grid; place-items: center; min-height: 170px; }
.section-visual img { width: 100%; max-height: 300px; }
.cta-split { display: grid; grid-template-columns: 1fr .72fr; gap: 28px; align-items: center; padding: 34px; border-radius: var(--radius-lg); color: white; background: radial-gradient(circle at 85% 25%, rgba(255,255,255,.18), transparent 22%), linear-gradient(135deg, var(--color-primary-strong), var(--color-primary-deep)); box-shadow: var(--shadow-glow); transition: box-shadow var(--transition), transform var(--transition); }
.cta-split h2 { color: white; }
.cta-split p { color: var(--color-cta-text); }
.cta-split:hover { transform: translateY(-4px); box-shadow: var(--shadow-neon); }
.cta-split:hover h2, .cta-split:hover p, .cta-split:hover a { text-shadow: var(--text-neon); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .55fr); gap: 30px; align-items: center; }
.page-hero-visual { display: grid; place-items: center; min-height: 210px; }
.page-hero-visual img { width: 100%; max-height: 300px; }
.service-band { grid-template-columns: 52px 64px minmax(0, 1fr) 210px auto; align-items: center; }
.service-band-visual { min-width: 0; }
.service-band-visual img { width: 100%; max-height: 180px; }
.service-aside-image { display: grid; place-items: center; margin-bottom: 20px; }
.service-aside-image img { width: 100%; max-height: 260px; }
.contact-visual { display: grid; place-items: center; margin: -12px 0 18px; }
.contact-visual img { width: 100%; max-height: 220px; }
.blog-featured .blog-image { display: grid; place-items: center; }
.project-detail { display: grid; gap: 42px; }
.project-detail-cover { overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); background: linear-gradient(135deg, var(--color-surface-lavender), var(--color-white)); }
.project-detail-cover img { width: 100%; height: auto; display: block; object-fit: contain; padding: 14px; }
.project-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 50px; align-items: start; }
.project-detail-content p { font-size: 1.02rem; }
.project-detail-content h2 { margin-top: 34px; }
.project-detail-content h2:first-of-type { margin-top: 0; }
.project-detail-aside { display: grid; gap: 18px; }
.feature-list--columns { columns: 2; column-gap: 36px; }
.feature-list--columns li { break-inside: avoid; }
.image-contain { object-fit: contain; }
.image-cover { object-fit: contain; }

/* Icon-only visual replacements */
.hero-visual--icons { display: grid; place-items: center; }
.icon-cluster { display: grid; grid-template-columns: repeat(3, minmax(72px, 1fr)); gap: 18px; width: min(100%, 420px); }
.icon-visual-card { display: grid; place-items: center; min-height: 112px; padding: 22px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.12), rgba(255,255,255,.035)); box-shadow: 0 22px 60px rgba(0,0,0,.22); color: var(--color-primary-accent); transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition), color var(--transition); }
.icon-visual-card:hover { transform: translateY(-5px); border-color: rgba(169,159,255,.42); box-shadow: var(--shadow-neon); color: white; }
.icon-visual-card:hover svg, .icon-visual-card:hover img { filter: drop-shadow(0 0 12px rgba(169,159,255,.82)); }
.section--white .icon-visual-card,
.section-visual .icon-visual-card,
.blog-image .icon-visual-card,
.contact-visual .icon-visual-card,
.service-band-visual .icon-visual-card,
.service-aside-image .icon-visual-card { border-color: rgba(113,101,218,.16); background: var(--color-primary-soft); box-shadow: var(--shadow-sm); color: var(--color-primary-strong); }
.icon-visual-img { width: 64px; height: 64px; object-fit: contain; }
.page-hero-visual.icon-hero-visual { min-height: 150px; }
.page-hero-visual .icon-visual-card { width: 150px; min-height: 150px; }
.service-band-visual .icon-visual-card,
.service-aside-image .icon-visual-card,
.contact-visual .icon-visual-card { width: 100%; }
.icon-blog-image { display: grid; place-items: center; }