/* Homepage interactions. The original shared stylesheet stays intact. */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; padding-inline: max(24px, calc((100% - 1200px) / 2)); }
.hero__content { width: 100%; min-width: 0; }
.hero__title { font-size: clamp(44px, 6.1vw, 88px); }
.hero__lead { max-width: 520px; }
.hero__actions { margin-bottom: 40px; }
.hero__art { position: relative; min-width: 0; align-self: center; }
.hero__canvas { position: relative; inset: auto; width: 100%; height: auto; aspect-ratio: 1; mask-image: none; opacity: 1; touch-action: pan-y; }
.hero__art-caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font: 400 11px var(--font-mono); border-top: 1px solid var(--border); padding-top: 18px; }
.bloom-trigger { color: var(--sun); border: 0; background: transparent; padding: 10px 0 10px 10px; font: inherit; cursor: pointer; white-space: nowrap; }
.bloom-trigger span { display: inline-block; transition: transform .3s; }
.bloom-trigger:hover span { transform: rotate(45deg); }
.cards--products { column-gap: 24px; row-gap: 0; }
.product[data-status] { display: grid; grid-template-rows: subgrid; grid-row: span 4; row-gap: 0; margin-bottom: 24px; background: rgba(20,19,31,.78); }
.product[data-status]:hover { background: rgba(28,26,41,.9); }
.product[data-status].is-hidden { display: none; }
.product__heading { padding-bottom: 18px; }
.product .product__cat { margin-bottom: 8px; font-size: 10px; letter-spacing: .1em; }
.product .product__tagline { margin: 10px 0 0 !important; line-height: 1.6; }
.product__description { padding-bottom: 22px; }
.product .product__tags { margin: 0; padding-bottom: 24px; align-content: start; align-items: start; }
.product .tag { font-size: 10px; padding: 4px 8px; background: rgba(255,255,255,.025); }
.product__actions { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--border); padding-top: 20px; }
.product__actions:has(.product__links:empty):not(:has(.product-demo)) { border-top: 0; padding-top: 0; }
.product__links { flex-wrap: wrap; gap: 12px 20px; align-items: start; justify-content: space-between; margin-top: 0; font-size: 14px; }
.product__links > .link-arrow { padding: 8px 0; }
.product-access { text-align: right; color: var(--muted); font-size: 13px; }
.product-access summary { padding: 8px 0; cursor: pointer; }
.product-access > div { display: grid; gap: 12px; padding-top: 12px; }
.product-access .link-arrow { color: var(--muted); font-weight: 400; }
.product-access .link-arrow:hover { color: var(--sun); }
.product--cta { grid-row: span 4; margin-bottom: 24px; }
.product__links a { white-space: nowrap; }
.product:focus-within::before, .product:focus-within::after { opacity: 1; }
.product-demo { margin: 0; border: 1px solid var(--border-strong); border-radius: 10px; background: rgba(10,10,18,.5); overflow: hidden; }
.product-demo summary { list-style: none; cursor: pointer; padding: 14px 16px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 500; color: var(--text); }
.product-demo summary:hover { color: var(--sun); }
.product-demo summary::-webkit-details-marker { display: none; }
.product-demo summary::after { content: '+'; transition: transform .3s; }
.product-demo[open] summary::after { transform: rotate(45deg); }
.demo-body { padding: 0 16px 18px; }
.demo-caption { display: block; font: 400 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.demo-reading { display: flex; align-items: baseline; gap: 8px; margin: 14px 0; }
.demo-reading strong { font: 600 34px var(--font-display); color: var(--text); }
.demo-reading span { font-size: 12px; color: var(--muted); }
.demo-track { height: 6px; background: var(--surface-2); border-radius: 9px; overflow: hidden; margin: 12px 0; }
.demo-track i { display: block; height: 100%; width: var(--fill,70%); background: var(--sun); transition: width .5s, background .5s; }
.demo-body.is-done .demo-track i { background: var(--teal); }
.demo-status { min-height: 40px; font-size: 13px !important; }
.demo-body.is-done .demo-status { color: var(--teal); }
.demo-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.demo-actions button { border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); color: var(--text); font: 500 12px var(--font-body); padding: 11px 12px; cursor: pointer; }
.demo-actions button:first-child { color: #1a1024; background: var(--sun); border-color: var(--sun); }
.demo-actions button:disabled { opacity: .6; cursor: default; }
.demo-body.is-done .demo-reading strong { color: var(--teal); }
.timeline { --journey: 0; }
.timeline::before { opacity: .2; }
.timeline::after { content: ''; position: absolute; left: 28px; right: 28px; top: 27px; height: 2px; background: var(--grad); transform: scaleX(var(--journey)); transform-origin: left; pointer-events: none; }
.timeline li { z-index: 1; }
.timeline__num { border: 1px solid var(--border-strong); cursor: pointer; transition: box-shadow .4s, transform .4s, background .4s; }
.timeline li:not(.is-current) .timeline__num { background: var(--bg-2); color: var(--muted); box-shadow: 0 0 0 8px var(--bg); }
.timeline li.is-current .timeline__num { transform: scale(1.08); }
.timeline li h3 { transition: color .3s; }
.timeline li.is-current h3 { color: var(--sun); }
.journey-note { margin: 28px 0 0; max-width: 660px; min-height: 74px; border-left: 2px solid var(--sun); padding: 12px 20px; color: var(--muted); font-size: 15px; }
.project-visual { margin-top: 32px; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(10,10,18,.55); }
.project-visual__label { font: 400 11px var(--font-mono); color: var(--sun); text-transform: uppercase; letter-spacing: .08em; }
.project-visual h3 { margin: 10px 0; font-size: 23px; }
.project-visual p { font-size: 14px; color: var(--muted); margin-bottom: 0; }
.project-scene { height: 140px; display: grid; place-items: center; perspective: 700px; margin: 12px 0 24px; }
.project-device { width: 180px; height: 108px; padding: 18px 12px 12px; position: relative; border: 1px solid var(--sun); border-radius: 9px; background: linear-gradient(135deg,rgba(255,200,61,.12),rgba(139,92,246,.15)); transform: rotateY(-12deg) rotateX(8deg); transition: width .65s var(--ease), height .65s var(--ease), border-radius .65s, transform .65s; }
.project-device::before { content: '•••'; position: absolute; top: -2px; left: 10px; color: var(--sun); font-size: 13px; letter-spacing: 2px; }
.project-device i { display: block; height: 8px; margin: 8px 0; width: 70%; border-radius: 4px; background: var(--sun); opacity: .6; transition: width .6s, height .6s, background .6s; }
.project-device i:nth-child(2) { width: 95%; opacity: .25; }
.project-device i:nth-child(3) { width: 50%; background: var(--violet); }
.project-visual[data-kind='app'] .project-device { width: 78px; height: 134px; border-radius: 17px; transform: rotateY(12deg) rotateZ(5deg); }
.project-visual[data-kind='webapp'] .project-device i { width: 32%; height: 48px; display: inline-block; margin: 6px 0; }
.project-visual[data-kind='care'] .project-device { transform: rotateY(0) rotateZ(-4deg); border-color: var(--teal); }
.project-visual[data-kind='care'] .project-device i { background: var(--teal); }
.project-visual[data-kind='idea'] .project-device { width: 110px; height: 110px; border-radius: 50%; transform: rotateZ(12deg); padding: 20px; }
.project-visual[data-kind='idea'] .project-device::before { content: ''; }
.form .project-visual { margin: 0; padding: 16px; display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 8px 14px; }
.form .project-visual__label { grid-column: 1 / -1; font-size: 9px; }
.form .project-scene { width: 72px; height: 100px; margin: 0; }
.form .project-device { scale: .48; }
.form .project-visual h3 { font-size: 18px; }
.form .project-visual p { font-size: 12px; }
.btn:active, .demo-actions button:active { scale: .97; }
@media (max-width: 1100px) { .hero__art-caption { flex-direction: column; gap: 0; } }
@media (max-width: 960px) {
 .hero { grid-template-columns: minmax(0,1fr); gap: 24px; padding: calc(var(--nav-h) + 36px) 24px 56px; }
 .hero__title { font-size: clamp(44px, 9vw, 72px); }
 .hero__content { max-width: 650px; margin: auto; }
 .hero__art { width: min(100%,480px); margin: auto; }
 .hero__art-caption { flex-direction: row; }
 .scroll-hint { display: none; }
 .timeline { grid-template-columns: 1fr; gap: 30px; }
 .timeline li { padding-left: 84px; min-height: 100px; }
 .timeline__num { position: absolute; left: 0; top: 0; }
 .timeline::before, .timeline::after { display: block; left: 27px; top: 28px; bottom: 72px; right: auto; width: 2px; height: auto; }
 .timeline::after { transform: scaleY(var(--journey)); transform-origin: top; }
}
@media (max-width: 480px) {
 .hero { padding-inline: 20px; }
 .hero__title { font-size: clamp(38px,10.5vw,50px); }
 .hero__lead { font-size: 16px; margin-bottom: 26px; }
 .hero__actions { gap: 10px; margin-bottom: 30px; }
 .hero__actions .btn { padding: 13px 17px; font-size: 14px; }
 .hero__art-caption { font-size: 9px; }
 .cards--4 { grid-template-columns: 1fr; }
 .product { padding: 24px; }
 .timeline li { padding-left: 76px; }
}
@media (prefers-reduced-motion: reduce) { .project-device, .timeline li.is-current .timeline__num { transform: none; } }