/* =====================================================================
   Etusivun osiot (konseptin rakenne): toimialat, Mitä tarvitset,
   valomainostyypit, päivä/ilta-vertailu, referenssit, prosessi, loppu-CTA.
   ===================================================================== */

.t-blue { color: var(--blue); }
.center { text-align: center; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.mono-note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 8px; margin: 16px 0 0; }
.mono-note--dark { color: var(--mute); margin: 0; }
.mono-note .ic { color: var(--amber); }
@media (min-width: 900px) { .sticky-col { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; } }

/* ---------- hero: lyhyt teksti ---------- */
.hero3d h1 { font-size: clamp(34px, 4.9vw, 66px); }
.hero3d h1 span { display: block; color: var(--amber); }
.hero3d .copy p.desc { display: block; font-size: clamp(15px, 1.15vw, 17.5px); color: rgba(255, 255, 255, 0.82); max-width: 560px; margin: 0; }
.hero3d .copy .note { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); display: flex; align-items: center; gap: 8px; margin: 22px 0 0; }
.hero3d .copy .note .ic { color: var(--amber); }
.hero3d .copy { width: min(640px, 48vw); }
.hero3d #modelWrap { position: absolute; right: var(--gutter); bottom: clamp(18px, 4vh, 40px); z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.hero3d #modelWrap #models { position: static; transform: none; opacity: 1; animation: none; }
.hero3d .model-sub { margin: 0; font-size: 13px; color: rgba(255, 255, 255, 0.72); text-align: right; max-width: 420px; transition: opacity 0.42s var(--ease), transform 0.42s var(--ease); }
.hero3d .model-sub b { color: #fff; font-weight: 600; }
.hero3d .model-sub.out { opacity: 0; transform: translateY(-8px); }
.hero3d .model-sub.pre { opacity: 0; transform: translateY(8px); transition: none; }
.hero3d #modelWrap { opacity: 0; transform: translateY(14px); animation: hvRise 1s 1s var(--ease) forwards; }
.hero3d #scrollDown { left: var(--gutter); right: auto; bottom: clamp(18px, 4vh, 40px); }
@media (min-width: 1360px) { .hero3d #scrollDown { left: calc((100vw - var(--wrap)) / 2 + var(--gutter)); } }
@media (max-width: 1100px) { .hero3d #modelWrap { align-items: center; left: 50%; right: auto; transform: translateX(-50%); } .hero3d .model-sub { text-align: center; } .hero3d #modelWrap { animation-name: hvRiseC; } }
@keyframes hvRiseC { to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 820px) {
	.hero3d .copy { bottom: 150px; width: auto; }
	.hero3d .copy p.desc { display: none; }
	.hero3d .copy .note { display: none; }
	.hero3d #modelWrap { bottom: 16px; width: calc(100% - 2 * var(--gutter)); }
	.hero3d .model-sub { display: none; }
	.hero3d #models { width: 100%; justify-content: space-between; }
	.hero3d #models button { padding: 9px 10px; }
}

/* ---------- toimialat ---------- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); background: var(--paper); padding: 14px 0; }
.marquee__track { display: flex; align-items: center; gap: 22px; width: max-content; animation: hvMarquee 38s linear infinite; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee__track i { width: 5px; height: 5px; border-radius: 50%; background: var(--blue); display: block; }

/* ---------- Mitä tarvitset ---------- */
.need { display: grid; gap: 20px; }
@media (min-width: 640px) { .need { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .need { grid-template-columns: repeat(6, 1fr); } .need__card { grid-column: span 2; } .need__card--big { grid-column: span 3; } }
.need__card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: #fff; border: 1px solid var(--line); transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s; }
.need__card:hover { transform: translateY(-6px); border-color: var(--blue); box-shadow: 0 35px 70px -35px rgba(2, 18, 238, 0.45); color: #fff; }
.need__img { aspect-ratio: 16 / 10; overflow: hidden; }
.need__card--big .need__img { aspect-ratio: 16 / 9; }
.need__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.need__card:hover .need__img img { transform: scale(1.05); }
.need__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--navy) 0%, rgba(5, 10, 48, 0.25) 45%, transparent 100%); }
.need__body { position: absolute; inset: auto 0 0 0; padding: 22px 22px 24px; }
.need__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.need__row h3 { font-size: 21px; }
.need__card--big .need__row h3 { font-size: 26px; }
.need__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: var(--amber); }
.need__body p { margin: 8px 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.75); max-width: 46ch; }
.need__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); opacity: 0; transform: translateY(4px); transition: opacity 0.5s, transform 0.5s var(--ease); }
.need__card:hover .need__link { opacity: 1; transform: none; }

/* ---------- valomainostyypit ---------- */
.sec--blueprint { background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 48px 48px; }
.sec--blueprint-light { background-image: linear-gradient(rgba(5, 10, 48, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 10, 48, 0.045) 1px, transparent 1px); background-size: 48px 48px; }
.seg { display: inline-flex; border: 1px solid var(--line-dark); border-radius: var(--radius); padding: 4px; margin-top: 8px; }
.seg button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: var(--radius); font-weight: 600; font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: background 0.3s, color 0.3s; }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 6px 20px -6px rgba(2, 18, 238, 0.7); }
.seg button:hover { color: #fff; }
.st-grid { display: grid; gap: 18px; }
@media (min-width: 640px) { .st-grid { grid-template-columns: repeat(2, 1fr); } }
.st { border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.03); border-radius: var(--radius); overflow: hidden; transition: transform 0.5s var(--ease), border-color 0.5s; }
.st:hover { transform: translateY(-6px); border-color: rgba(2, 18, 238, 0.7); }
.st-group { grid-column: 1 / -1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin: 12px 0 -6px; display: flex; align-items: center; gap: 12px; }
.st-group::after { content: ""; flex: 1; height: 1px; background: var(--line-dark); }
.st-group:first-child { margin-top: 0; }
.pv { position: relative; aspect-ratio: 1; overflow: hidden; background: #0d1626; }
.pv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.8s ease; }
.pv .pv__day { opacity: 0; }
.pv[data-mode="day"] .pv__day { opacity: 1; }
.pv[data-mode="day"] .pv__night { opacity: 0; }
.pv-n { position: absolute; left: 12px; top: 10px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; color: rgba(255, 255, 255, 0.85); background: rgba(5, 10, 48, 0.55); padding: 3px 7px; border-radius: 2px; }
.st__body { padding: 20px 20px 22px; }
.st__body h3 { font-size: 19px; }
.st__fi { font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber); margin: 4px 0 10px; }
.st__desc { font-size: 13.5px; color: rgba(255, 255, 255, 0.7); margin-bottom: 12px; }
.st__rows div { display: flex; gap: 12px; border-top: 1px solid var(--line-dark); padding: 8px 0; font-size: 13px; }
.st__rows dt { width: 72px; flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); padding-top: 3px; }
.st__rows dd { margin: 0; color: rgba(255, 255, 255, 0.85); }

/* ---------- päivä/ilta-vertailu ---------- */
.points { display: grid; gap: 18px; margin-top: 8px; }
.points li { display: flex; gap: 14px; }
.points__ic { width: 36px; height: 36px; border-radius: var(--radius); background: var(--navy); color: var(--amber); display: grid; place-items: center; flex: 0 0 auto; }
.points__ic .ic { width: 16px; height: 16px; }
.points b { display: block; font-weight: 700; font-size: 15px; color: var(--navy); }
.points p { margin: 3px 0 0; font-size: 13.5px; color: var(--mute); }
.dn-head { margin-bottom: 8px; }
.points--row { margin-top: 28px; }
@media (min-width: 760px) { .points--row { grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.dnr { margin-top: 56px; }
.dnr__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dnr__head h3 { font-size: clamp(20px, 2.2vw, 26px); letter-spacing: -0.01em; margin: 0 0 4px; }
.dnr__head p { margin: 0; color: var(--mute); max-width: 620px; font-size: 15px; }
.dnr__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .dnr__grid { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.swap { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--radius); background: var(--navy); }
.swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); backface-visibility: hidden; }
.swap .swap__night { z-index: 1; opacity: 0; transition: opacity 0.7s ease, transform 0.9s var(--ease); }
.swap--dn:hover .swap__night { opacity: 1; }
.swap:hover img { transform: scale(1.035); }
.swap figcaption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 12px 10px; background: linear-gradient(to top, rgba(5, 10, 48, 0.78), transparent); color: #fff; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; pointer-events: none; }
.swap__tag { position: absolute; top: 10px; left: 10px; z-index: 2; width: 28px; height: 28px; border-radius: 50%; background: rgba(5, 10, 48, 0.6); color: var(--amber); display: grid; place-items: center; backdrop-filter: blur(3px); transition: background 0.3s; }
.swap__tag .ic { width: 14px; height: 14px; }
.swap--dn:hover .swap__tag { background: var(--blue); color: #fff; }
@keyframes hvBlink { 50% { opacity: 0.25; } }

/* ---------- referenssit ---------- */
.folio { display: grid; gap: 22px; }
@media (min-width: 1024px) { .folio { grid-template-columns: repeat(12, 1fr); } .folio__card:nth-child(4n + 1), .folio__card:nth-child(4n + 4) { grid-column: span 7; } .folio__card:nth-child(4n + 2), .folio__card:nth-child(4n + 3) { grid-column: span 5; } }
.folio__card { position: relative; display: block; overflow: hidden; border-radius: var(--radius); background: var(--navy); color: #fff; border: 1px solid var(--line); transition: transform 0.5s var(--ease), border-color 0.5s, box-shadow 0.5s; }
.folio__card:hover { transform: translateY(-6px); border-color: var(--blue); color: #fff; box-shadow: 0 35px 70px -35px rgba(2, 18, 238, 0.55); }
.folio__img { aspect-ratio: 16 / 10; overflow: hidden; }
.folio__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.folio__card:hover .folio__img img { transform: scale(1.05); }
.folio__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 10, 48, 0.9), rgba(5, 10, 48, 0.15) 50%, transparent); }
.folio__body { position: absolute; inset: auto 0 0 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 24px; }
.folio__body h3 { font-size: 24px; margin-top: 6px; }
.folio__sub { margin: 4px 0 0; font-family: var(--mono); font-size: 11px; color: rgba(255, 255, 255, 0.65); }
.folio__arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.3); display: grid; place-items: center; flex: 0 0 auto; transition: background 0.3s, border-color 0.3s, color 0.3s; }
.folio__card:hover .folio__arrow { background: var(--amber); border-color: var(--amber); color: var(--navy); }

/* ---------- prosessi (5 vaihetta) ---------- */
.proc { display: grid; gap: 32px; position: relative; }
@media (min-width: 800px) { .proc { grid-template-columns: repeat(5, 1fr); gap: 24px; } .proc::before { content: ""; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: rgba(5, 10, 48, 0.15); } }
.proc li { position: relative; }
.proc__n { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius); background: var(--navy); color: var(--amber); font-family: var(--mono); font-size: 13px; font-weight: 600; }
.proc h3 { font-size: 18px; margin: 18px 0 8px; }
.proc p { margin: 0; font-size: 13.5px; color: var(--mute); }

/* ---------- UKK ---------- */
.phone-card { background: var(--navy); color: #fff; padding: 24px; border-radius: var(--radius); margin-top: 8px; }
.phone-card a { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 800; color: var(--amber); }
.phone-card a:hover { color: #fff; }
.phone-card p { margin: 10px 0 0; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.faq__item summary .n { font-family: var(--mono); font-size: 11px; color: var(--blue); margin-right: 14px; }

/* ---------- loppu-CTA ---------- */
.final { position: relative; overflow: hidden; background: var(--navy); color: #fff; padding: clamp(64px, 9vw, 128px) 0; }
.final::before { content: ""; position: absolute; right: -140px; top: 50%; width: 520px; height: 520px; transform: translateY(-50%); border-radius: 50%; background: rgba(2, 18, 238, 0.28); filter: blur(120px); pointer-events: none; }
.final::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 48px 48px; pointer-events: none; }
.final__in { position: relative; z-index: 1; max-width: calc(var(--wrap)); }
.final h2 { font-size: clamp(36px, 5.6vw, 72px); max-width: 16ch; }
.final h2 span { color: var(--amber); text-shadow: 0 0 24px rgba(255, 181, 71, 0.55); }
.final__p { color: rgba(255, 255, 255, 0.72); max-width: 56ch; margin: 22px 0 0; font-size: 17px; }

/* ---------- hero mobiilissa (ei 3D:tä): teksti ylhäällä, kuvakortti alla ---------- */
@media (max-width: 820px) {
	.hero3d { height: auto; min-height: 0; max-height: none; }
	.hero3d .copy { position: relative; top: auto; bottom: auto; left: auto; right: auto; transform: none !important; width: auto; max-width: none; margin: 0 var(--gutter); padding: calc(var(--header-h) + 28px) 0 0; z-index: 3; }
	.hero3d .eyebrow { font-size: 10px; }
	.hero3d h1 { font-size: clamp(30px, 8.6vw, 44px); }
	.hero3d .copy p.desc { display: block; font-size: 14.5px; max-width: 34ch; margin: 0 0 4px; }
	.hero3d .copy .btns { margin-top: 18px; }
	.hero3d .copy .btns .btn { flex: 1 1 auto; justify-content: center; }
	.hero3d .copy .note { display: none; }
	.hero3d #poster { background-image: url(../hero/poster-mobile.jpg); background-position: center bottom; background-size: 100% auto; background-color: #07081a; opacity: 1 !important; }
	.hero3d #gl, .hero3d #grain { display: none; }
	.hero3d #vig { background: linear-gradient(180deg, rgba(7, 8, 26, 0.2) 0%, transparent 40%); }
	.hero3d #scrollDown, .hero3d #dn, .hero3d #modelWrap, .hero3d #modelWrap #models { display: none; }
	.hero3d .copy { width: auto; }
	.hero3d .mobile-card { position: relative; z-index: 3; margin: 26px var(--gutter) 28px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }
	.hero3d .mobile-card img { display: block; width: 100%; height: auto; }
	.hero3d .mobile-card span { position: absolute; left: 12px; bottom: 12px; background: rgba(5, 10, 48, 0.72); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; padding: 6px 10px; border-radius: 2px; }
}