/* Homepage + product/technology section styles. */

.homepage section, .site-main > .flow-section, .site-main > .tech-section { padding-block: var(--space-7); }
.homepage section + section { border-top: 1px solid var(--border); }

/* -------------------------------------------------------------------- */
/* Hero                                                                   */
/* -------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--space-8) var(--space-7); border-top: none !important; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-hex-grid {
	position: absolute; inset: 0;
	background-image:
		radial-gradient(circle at 1px 1px, var(--border-strong) 1.4px, transparent 0);
	background-size: 34px 34px; opacity: 0.5;
	mask-image: radial-gradient(ellipse 70% 60% at 60% 20%, #000 40%, transparent 90%);
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.35; }
.hero-orb-1 { width: 420px; height: 420px; background: var(--primary); top: -140px; left: -100px; opacity: 0.18; }
.hero-orb-2 { width: 360px; height: 360px; background: var(--accent); top: 60px; right: -100px; opacity: 0.22; }

.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 1fr; gap: var(--space-6); align-items: center; }
.hero-title { font-size: clamp(2.1rem, 1.6rem + 2.4vw, 3.4rem); color: var(--ink); margin-top: var(--space-3); }
.hero-sub { color: var(--ink-muted); font-size: 1.1rem; max-width: 36rem; }
.hero-ctas { display: flex; gap: var(--space-3); margin-top: var(--space-4); flex-wrap: wrap; }

.reader-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); overflow: hidden; max-width: 380px; margin-inline: auto; }
.reader-chrome { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: var(--primary-dark); color: #fff; }
.reader-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.reader-title { font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; }
.reader-body { padding: var(--space-4); }
.reader-label { font-size: 0.8rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; margin-bottom: var(--space-2); }
.reader-strip { height: 46px; border-radius: 999px; background: linear-gradient(90deg, #fff3ec, #ffcbb3, var(--accent), #c23d1f); margin-bottom: var(--space-3); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.reader-readout { display: flex; align-items: center; justify-content: space-between; background: var(--teal-soft); border-radius: var(--radius-sm); padding: 12px var(--space-3); margin-bottom: var(--space-2); }
.reader-value { font-family: var(--font-display); font-weight: 700; color: var(--primary-dark); }
.reader-readout .icon-sm { width: 18px; height: 18px; color: var(--primary); }
.reader-meta { font-size: 0.82rem; color: var(--ink-faint); margin: 0; }

@media (max-width: 980px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero-visual { order: -1; }
}

/* -------------------------------------------------------------------- */
/* Technologies                                                          */
/* -------------------------------------------------------------------- */
.tech-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.tech-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.tech-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.tech-card-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--teal-soft); margin-bottom: var(--space-3); }
.tech-card-icon .icon-md { width: 26px; height: 26px; color: var(--primary); }
.tech-card h3 { font-size: 1.1rem; }
.tech-card-desc { color: var(--ink-muted); font-size: 0.94rem; }
.tech-card-desc p { margin: 0; }
@media (max-width: 980px) { .tech-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .tech-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Process flow                                                          */
/* -------------------------------------------------------------------- */
.flow-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-5); }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 130px; text-align: center; }
.flow-step-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); display: grid; place-items: center; }
.flow-step-icon .icon-md { width: 26px; height: 26px; color: var(--primary); }
.flow-step-label { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.flow-arrow { color: var(--accent); font-size: 1.4rem; font-weight: 700; }
@media (max-width: 780px) {
	.flow-steps { flex-direction: column; }
	.flow-arrow { transform: rotate(90deg); }
}

/* -------------------------------------------------------------------- */
/* Focus areas                                                           */
/* -------------------------------------------------------------------- */
.focus-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.focus-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); display: block; transition: transform 0.2s ease, border-color 0.2s ease; }
.focus-card:hover { transform: translateY(-3px); border-color: var(--primary); text-decoration: none; }
.focus-card-icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--accent-soft); margin-bottom: var(--space-3); }
.focus-card-icon .icon-md { width: 26px; height: 26px; color: var(--accent); }
.focus-card h3 { font-size: 1.05rem; }
.focus-card p { color: var(--ink-muted); font-size: 0.9rem; }
.focus-card-count { font-size: 0.8rem; font-weight: 700; color: var(--primary); }
@media (max-width: 980px) { .focus-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .focus-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------- */
/* Products                                                               */
/* -------------------------------------------------------------------- */
.products-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: var(--space-3); }
.link-more { font-family: var(--font-display); font-weight: 700; color: var(--primary); }
.product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-4); display: flex; gap: var(--space-3); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.product-card-icon { flex-shrink: 0; width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--teal-soft); display: grid; place-items: center; }
.product-card-icon .icon-lg { width: 26px; height: 26px; color: var(--primary); }
.product-card-body { display: flex; flex-direction: column; gap: 6px; }
.product-card-tag { align-self: flex-start; font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 3px 10px; }
.product-card-title { font-size: 1.1rem; margin: 0; }
.product-card-title a { color: var(--ink); }
.product-card-title a:hover { color: var(--primary); text-decoration: none; }
.product-card-excerpt { color: var(--ink-muted); font-size: 0.92rem; margin: 0; }
.product-card-stage { font-size: 0.76rem; font-weight: 700; color: var(--ink-faint); }
.product-card-link { font-weight: 700; font-size: 0.88rem; color: var(--primary); margin-top: auto; }
.product-card[hidden] { display: none; }
@media (max-width: 980px) { .product-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .product-grid { grid-template-columns: 1fr; } }

.area-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-5); justify-content: center; }
.area-filter-btn { font-family: var(--font-display); font-size: 0.85rem; font-weight: 700; background: transparent; border: 1px solid var(--border-strong); color: var(--ink-muted); border-radius: 999px; padding: 8px 18px; transition: all 0.15s ease; }
.area-filter-btn:hover { border-color: var(--primary); color: var(--ink); }
.area-filter-btn.is-active { background: var(--gradient-brand); color: #fff; border-color: transparent; }

/* -------------------------------------------------------------------- */
/* Why us pillars                                                         */
/* -------------------------------------------------------------------- */
.pillar-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-3); }
.pillar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); text-align: center; }
.pillar-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--teal-soft); margin: 0 auto var(--space-2); }
.pillar-icon .icon-md { width: 20px; height: 20px; color: var(--primary); }
.pillar-card span:last-child { font-size: 0.85rem; font-weight: 700; }
@media (max-width: 980px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------------- */
/* Vision                                                                  */
/* -------------------------------------------------------------------- */
.vision-section { background: var(--primary-dark); color: #cfe3e6; }
.vision-inner { max-width: 46rem; text-align: center; }
.vision-quote { font-family: var(--font-display); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-weight: 800; color: #fff; margin: 0 0 var(--space-4); }
.vision-section .eyebrow { color: var(--accent); justify-content: center; }
.vision-section .section-title { color: #fff; }
.vision-text { color: #b9d4d7; }
.vision-section .link-more { color: #fff; }

/* -------------------------------------------------------------------- */
/* Closing CTA                                                            */
/* -------------------------------------------------------------------- */
.closing-cta-inner { text-align: center; max-width: 40rem; margin-inline: auto; }
.closing-cta-inner p { color: var(--ink-muted); }
.closing-cta-inner .btn { margin-top: var(--space-3); }

/* -------------------------------------------------------------------- */
/* Pipeline (development approach)                                        */
/* -------------------------------------------------------------------- */
.pipeline-mini { padding-block: var(--space-6) var(--space-5); }
.pipeline-steps { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0; }
.pipeline-step { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: 0.85rem; font-weight: 700; }
.pipeline-num { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient-brand); color: #fff; display: grid; place-items: center; font-size: 0.72rem; }
.pipeline-arrow { color: var(--ink-faint); }

/* -------------------------------------------------------------------- */
/* Contact section                                                        */
/* -------------------------------------------------------------------- */
.contact-section { padding-block: var(--space-6); }
.contact-card { max-width: 34rem; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow); }
.contact-form { margin-top: var(--space-4); }
.contact-direct { margin-top: var(--space-4); color: var(--ink-muted); }
.contact-direct a { font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Single product                                                         */
/* -------------------------------------------------------------------- */
.single-product .entry-header { max-width: var(--measure); }
.product-hero-icon { width: 72px; height: 72px; border-radius: var(--radius); background: var(--teal-soft); display: grid; place-items: center; margin: 0 auto var(--space-3); }
.product-hero-icon .icon-xl { width: 36px; height: 36px; color: var(--primary); }
.single-product .product-card-tag { display: inline-block; margin-bottom: var(--space-2); }
.single-product .product-card-stage { display: block; margin-top: var(--space-2); }
.feature-list { list-style: none !important; padding-left: 0 !important; display: flex; flex-direction: column; gap: 10px; }
.feature-list li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); }
.feature-list .icon-sm { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.product-cta { margin-top: var(--space-6); text-align: center; background: var(--teal-soft); border-radius: var(--radius); padding: var(--space-5); max-width: var(--measure); margin-inline: auto; }
.back-link { text-align: center; margin-top: var(--space-6); font-weight: 700; }

/* -------------------------------------------------------------------- */
/* Empty state                                                            */
/* -------------------------------------------------------------------- */
.empty-note { color: var(--ink-faint); text-align: center; padding: var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-sm); }