/* Illustrated homepage only; shared product pages keep their existing presentation. */
body[data-page="home"] { --bg: #fff; --ink: #0d1427; --muted: #6e7e93; --line: #dce3ec; --content-width: 1440px; background: var(--bg); }
body[data-page="home"] .container { width: min(var(--content-width), calc(100% - 12.5vw)); }
.portfolio-hero { display: grid; grid-template-columns: 1.12fr 1fr; gap: 36px; align-items: center; padding-block: 22px 20px; }
.portfolio-hero-copy { min-width: 0; padding-bottom: 20px; }
.portfolio-hero h1 { font-size: clamp(34px, 3.25vw, 56px); font-weight: 600; line-height: 1.12; letter-spacing: -.045em; margin-bottom: 26px; }
.portfolio-hero h1 > span { display: block; font-size: .76em; line-height: 1.16; letter-spacing: -.035em; color: #718092; font-weight: 400; }
.portfolio-hero .hero-description { font-size: clamp(16px, 1.15vw, 19px); line-height: 1.55; color: var(--muted); margin-bottom: 36px; max-width: 720px; }
.portfolio-hero .hero-actions { justify-content: flex-start; gap: 24px 34px; }
.portfolio-hero .button { font-size: 17px; min-height: 54px; padding-inline: 27px; }
.portfolio-hero .text-link { font-size: 16px; gap: 16px; }
.portfolio-hero .button-primary { background: #1c2a33; border-color: #1c2a33; border-radius: 10px; box-shadow: inset 0 1px 1px #ffffff16; }
.portfolio-hero .button-primary:hover { background: #2a3d49; }
.home-illustration { position: relative; min-width: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.home-illustration > img { display: block; width: 92%; height: auto; }
.home-annotation { position: absolute; font: italic 500 clamp(13px, 1.2vw, 19px)/1.15 var(--font-mono); letter-spacing: -.055em; text-transform: uppercase; pointer-events: none; }
.home-annotation > span { display: block; }
.home-annotation svg { display: block; width: 62px; height: 56px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-annotation-build { top: 6%; left: 0; transform: rotate(-9deg); }
.home-annotation-build svg { margin: 8px 0 0 23px; }
.home-annotation-flow { top: 31%; right: -8%; width: 95px; transform: rotate(-8deg); }
.home-annotation-flow svg { margin-top: 10px; }
.portfolio-solutions { scroll-margin-top: 105px; }
.solution-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.solution-card { display: grid; grid-template-columns: 65% 35%; grid-template-rows: 1fr auto; gap: 22px 0; min-height: 270px; padding: 34px 30px 28px 36px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.solution-card-content { grid-area: 1 / 1; min-width: 0; }
.solution-card h3 { font-size: clamp(28px, 2.3vw, 38px); letter-spacing: -.055em; margin: 15px 0 9px; }
.solution-card h3 a:hover { text-decoration: underline; text-underline-offset: 5px; }
.solution-card-content > p { color: var(--muted); font-size: clamp(17px, 1.35vw, 22px); line-height: 1.4; margin: 0; }
.solution-card-content > p.solution-card-summary { font-size: clamp(15px, 1.05vw, 17px); line-height: 1.5; margin-top: 12px; max-width: 48ch; }
.home-solution-image { grid-area: 1 / 2 / 3 / 3; width: 115%; max-width: 115%; height: auto; align-self: center; justify-self: end; }
.solution-card-actions { grid-area: 2 / 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; position: relative; }
.solution-card-actions .text-link { font-size: 14px; gap: 8px; min-height: 44px; }
@media (min-width: 801px) and (max-width: 1500px) {
 .solution-card-actions { grid-column: 1 / -1; }
 .home-solution-image { grid-row: 1; }
}
@media (max-width: 1200px) {
 .portfolio-hero { gap: 20px; padding-block: 38px 44px; }
 .portfolio-hero h1 { font-size: clamp(32px, 3.5vw, 43px); }
 .portfolio-hero .hero-actions { gap: 14px 20px; }
 .home-annotation-flow { width: 74px; }
 .solution-card { padding: 24px; grid-template-columns: 60% 40%; }
 .solution-card-actions { grid-column: 1 / -1; }
 .home-solution-image { grid-row: 1; width: 120%; max-width: 120%; }
}
@media (max-width: 800px) {
 body[data-page="home"] .container { width: calc(100% - 40px); }
 .portfolio-hero { grid-template-columns: 1fr; gap: 16px; padding-block: 38px 34px; }
 .portfolio-hero-copy { padding: 0; }
 .portfolio-hero h1 { font-size: clamp(30px, 5.4vw, 45px); max-width: 690px; margin-bottom: 20px; }
 .portfolio-hero .hero-description { max-width: 650px; margin-bottom: 26px; }
 .home-illustration { width: min(100%, 590px); justify-self: center; }
 .home-annotation { display: none; }
 .solution-grid { grid-template-columns: 1fr; }
 .solution-card { min-height: 250px; grid-template-columns: 60% 40%; }
 .solution-card h3 { font-size: 32px; }
 .solution-card-content > p { font-size: 20px; }
 .solution-card-content > p.solution-card-summary { font-size: 16px; max-width: none; }
 .home-solution-image { grid-row: 1 / 3; width: 110%; max-width: 110%; }
 .solution-card-actions { grid-column: 1; }
}
@media (max-width: 540px) {
 .portfolio-hero { padding-top: 30px; }
 .portfolio-hero .button { font-size: 16px; padding-inline: 20px; }
 .portfolio-hero .hero-actions { gap: 16px 22px; }
 .solution-card { grid-template-columns: 1fr; padding: 24px; gap: 10px; }
 .solution-card h3 { font-size: 31px; margin-top: 0; }
 .home-solution-image { grid-area: 2 / 1; width: 80%; max-width: 300px; justify-self: center; }
 .solution-card-actions { grid-area: 3 / 1; gap: 8px 16px; }
}