/* ==========================================================================
   Kiera Concept — home page "web3" scroll story (loaded after site.css)
   Dark navy space · indigo/violet glow · glass panels · gold for the brand dots and calls to action.
   Chapters: hero → company → software (pinned device) → month → studio (3D café) → about → contact
   ========================================================================== */

.home {
  --w3-bg: #05071F;
  --w3-bg-2: #0A0E3A;
  --w3-text: #EEF0FF;
  --w3-muted: #A9AEDB;
  --w3-dim: rgba(238, 240, 255, 0.22);
  --w3-glass: rgba(255, 255, 255, 0.05);
  --w3-glass-2: rgba(255, 255, 255, 0.09);
  --w3-line: rgba(255, 255, 255, 0.12);
  --w3-indigo: #3B45E0;
  --w3-violet: #7B5CFF;
  background: var(--w3-bg);
  color: var(--w3-text);
}
.home .container { max-width: 1240px; }
.home main a:not([class]) { color: #C9CCEC; }
.home .dot { color: var(--gold); }

/* scroll progress line under the header */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--w3-violet), var(--gold)); }

/* shared type + glass */
.w3-kicker { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; color: var(--gold); }
.w3-h2 { margin: 0; font-size: clamp(34px, 4.4vw, 58px); line-height: 1.15; font-weight: 700; letter-spacing: -0.01em; }
.w3-h3 { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 600; }
.w3-lead { margin: 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--w3-muted); max-width: 640px; }
.w3-muted { color: var(--w3-muted); font-size: 14px; }
.w3-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.w3-glass { background: var(--w3-glass); border: 1px solid var(--w3-line); border-radius: var(--r-xl); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.btn--glass { background: var(--w3-glass-2); color: var(--w3-text); border-color: var(--w3-line); }
.btn--glass:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); color: #fff; }
.home .btn--gold:hover { box-shadow: 0 0 0 4px rgba(255, 195, 0, 0.18), 0 10px 40px rgba(255, 195, 0, 0.25); }
.pill--live { background: rgba(43, 196, 120, 0.15); color: #7CE3AE; border: 1px solid rgba(124, 227, 174, 0.3); }
.home .pill--soon { background: rgba(255, 195, 0, 0.1); color: var(--gold); border-color: rgba(255, 195, 0, 0.35); }
.chips--glass .chip { border-color: var(--w3-line); background: var(--w3-glass); color: var(--w3-text); }

/* ---------- hero ---------- */
.w3-hero { position: relative; min-height: calc(100vh - 64px); min-height: calc(100svh - 64px); display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.w3-hero__bg { position: absolute; inset: 0; z-index: -1; }
.orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.55; }
.orb--a { width: 46vw; height: 46vw; left: -10vw; top: -14vw; background: var(--w3-indigo); animation: drift 18s ease-in-out infinite alternate; }
.orb--b { width: 38vw; height: 38vw; right: -8vw; top: 10vh; background: var(--w3-violet); opacity: 0.4; animation: drift 22s ease-in-out infinite alternate-reverse; }
.orb--c { width: 22vw; height: 22vw; left: 42vw; bottom: -10vw; background: var(--gold); opacity: 0.16; animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(4vw, 3vw, 0) scale(1.08); } }
.w3-hero__bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 75%); }
.w3-hero__inner { display: flex; flex-direction: column; gap: 26px; padding-top: 80px; padding-bottom: 120px; position: relative; }
.w3-hero__title { margin: 0; font-size: clamp(54px, 10vw, 148px); line-height: 1; font-weight: 700; letter-spacing: -0.02em; background: linear-gradient(180deg, #fff 30%, #B9BEF5 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.w3-hero__title .dot { -webkit-text-fill-color: var(--gold); }
.w3-hero__lead { margin: 0; max-width: 640px; font-size: clamp(18px, 1.7vw, 22px); color: var(--w3-muted); }
.w3-scroll-cue { position: absolute; left: 24px; bottom: 32px; display: inline-flex; align-items: center; gap: 14px; font-size: 14px; color: var(--w3-muted); text-decoration: none; }
.w3-scroll-cue__line { width: 1px; height: 44px; background: linear-gradient(var(--gold), transparent); animation: cue 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- company: readable without a scroll sequence ---------- */
.w3-chapter { padding-top: 96px; }
.company-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; padding-bottom: 48px; }
.company-intro__heading { display: flex; flex-direction: column; gap: 20px; }
.company-intro .w3-h2 { font-size: clamp(28px, 3.1vw, 43px); line-height: 1.4; }
.company-intro__body { font-size: 18px; line-height: 1.85; color: var(--w3-muted); }
.company-intro__body p { margin: 0 0 20px; }
.company-intro__link { display: inline-flex; align-items: center; gap: 16px; color: var(--w3-text); text-decoration: none; border-bottom: 1px solid var(--w3-violet); padding-bottom: 5px; }
.company-intro__link:hover { color: var(--gold); }
@media (max-width: 900px) {
  .w3-chapter { padding-top: 64px; }
  .company-intro { grid-template-columns: 1fr; gap: 24px; }
  .company-intro__body { font-size: 17px; }
}
.w3-values { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; padding-bottom: 64px; }
.w3-value { display: flex; align-items: baseline; gap: 14px; padding: 22px 24px; background: var(--w3-glass); border: 1px solid var(--w3-line); border-radius: var(--r-md); }
.w3-value b { font-size: 24px; }
.w3-value span { color: var(--w3-muted); font-size: 15px; }

/* ---------- chapter 2: software, pinned device ---------- */
.w3-software { padding: 72px 0 56px; background: radial-gradient(ellipse 60% 40% at 75% 30%, rgba(59, 69, 224, 0.22), transparent 70%); }
.sw { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.sw-step { min-height: 66vh; padding: 40px 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; opacity: 0.75; transition: opacity 0.4s; }
.sw-step.is-active { opacity: 1; }
.sw-step__index { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 13px; color: var(--w3-muted); }
.sw-step__name { margin: 0; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.sw-step__kind { margin: -6px 0 0; font-size: 18px; color: var(--gold); }
.sw-step__text { margin: 0; font-size: 18px; color: var(--w3-muted); max-width: 30em; }
.sw__stage { position: sticky; top: 12vh; height: 78vh; align-self: start; display: flex; flex-direction: column; gap: 18px; }

/* Aluminium notebook: screen, hinge, keyboard deck and front edge share one perspective. */
.laptop-wrap { position: relative; flex: 1; min-height: 0; display: grid; place-items: center; perspective: 1600px; perspective-origin: 50% 30%; }
.laptop-wrap::after { content: ''; position: absolute; left: 8%; right: 2%; top: 82%; height: 32px; border-radius: 50%; background: rgba(0,0,0,.65); filter: blur(20px); pointer-events: none; }
.laptop-sway { width: 100%; display: flex; justify-content: center; transform-style: preserve-3d; }
.laptop { position: relative; width: min(570px, 94%); aspect-ratio: 16 / 10.6; margin-top: -20%; transform-style: preserve-3d; transform: scale(var(--laptop-zoom, 1)) rotateX(var(--rx, -8deg)) rotateY(var(--ry, -12deg)); transition: transform .45s ease; }
.laptop__lid { position: absolute; inset: 0; transform-style: preserve-3d; }
.laptop__face, .laptop__back { position: absolute; inset: 0; border-radius: 14px 14px 5px 5px; backface-visibility: hidden; }
.laptop__face { background: linear-gradient(145deg,#747b88,#d5d9e0 35%,#565e6b 72%,#c2c7d0); padding: 3.4% 1.7% 2.5%; box-shadow: 0 0 0 1px #10131c, 0 0 0 2px #727b8d, 8px 12px 35px rgba(0,0,0,.45); }
.laptop__face::before { content: ''; position: absolute; inset: 3px; border-radius: 11px 11px 3px 3px; background: #0b0d13; }
.laptop__screen { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; background: #101528; box-shadow: 0 0 0 1px #02030a; }
.laptop__camera { position: absolute; top: 1.25%; left: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%; background: #172b3c; box-shadow: 0 0 0 2px #080a0e, inset 1px 0 1px #478097; }
.laptop__glare { position: absolute; inset: 3.4% 1.7% 2.5%; border-radius: 4px; pointer-events: none; background: linear-gradient(120deg,rgba(255,255,255,.07),transparent 45%); }
.laptop__back { transform: rotateY(180deg) translateZ(2px); background: linear-gradient(130deg,#a1a8b4,#555e6d); display: grid; place-items: center; }
.laptop__back img { width: 22%; height: auto; opacity: .7; }
.laptop__hinge { position: absolute; top: 99%; left: 5%; right: 5%; height: 7px; border-radius: 4px; background: linear-gradient(#11141c,#616978,#1b202b); transform: translateZ(1px); }
.laptop__base { position: absolute; left: -1%; right: -1%; top: 100%; height: 62%; transform-origin: 50% 0; transform: rotateX(68deg); transform-style: preserve-3d; border-radius: 3px 3px 17px 17px; background: linear-gradient(115deg,#9aa2af,#d7dce3 38%,#aeb6c2 70%,#818b9a); box-shadow: inset 0 0 0 1px #e5e9ef; display: flex; flex-direction: column; align-items: center; }
.laptop__base::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; transform-origin: 50% 100%; transform: rotateX(-90deg); background: linear-gradient(#dce1e9,#929aa7 40%,#515a68); border-radius: 0 0 12px 12px; box-shadow: 0 2px 1px #303746; }
.laptop__base::before { content: ''; position: absolute; bottom: -1px; left: 42%; width: 16%; height: 4px; border-radius: 0 0 8px 8px; background: #737d8c; }
.laptop__keys { width: 82%; height: 55%; margin-top: 5%; padding: 5px; border-radius: 6px; background: #626c7b; display: grid; grid-template-columns: repeat(14,1fr); grid-template-rows: repeat(5,1fr); gap: 3px; box-shadow: inset 0 1px 4px #303744; }
.laptop__key { border-radius: 3px; background: linear-gradient(#292f3b,#161b25); border: 1px solid #414a59; box-shadow: 0 1px 1px #11151e; position: relative; }
.laptop__key::after { content: ''; position: absolute; width: 3px; height: 2px; left: 4px; top: 3px; background: #a3acbc; opacity: .65; }
.laptop__key--space { grid-column: span 5; }
.laptop__key--space::after { display: none; }
.laptop__pad { width: 33%; height: 26%; margin-top: 3%; border-radius: 6px; background: linear-gradient(120deg,#b6beca,#a3adbb); box-shadow: inset 0 0 0 1px #8792a2, 0 1px 0 #e3e7ee; }
.laptop__speaker { position: absolute; top: 12%; width: 3%; height: 42%; opacity: .6; background-image: radial-gradient(#495260 .65px,transparent .8px); background-size: 3px 3px; }
.laptop__speaker--left { left: 3%; }
.laptop__speaker--right { right: 3%; }
.sw-visual { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.sw-visual.is-active { opacity: 1; transform: none; }
.sw-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.sw-visual--mock { display: flex; align-items: flex-end; justify-content: center; gap: 1.6em; padding: 2.4em 2em 0; font-size: clamp(9px, 0.85vw, 12px); color: var(--ink); background: radial-gradient(ellipse at 50% 120%, #2A33B0, var(--deep) 70%); }
.sw-visual--mock .phone, .sw-visual--mock .panel { align-self: stretch; }
.sw-visual--mock .doc { height: auto; align-self: stretch; }
.sw-rail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sw-rail li { font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--w3-line); color: var(--w3-muted); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.sw-rail li.is-active { background: var(--gold); border-color: var(--gold); color: var(--deep); font-weight: 600; }
.sw-step__visual { display: none; }
@media (max-width: 900px) {
  .sw { grid-template-columns: 1fr; gap: 0; }
  .sw__stage { display: none; }
  .sw-step { min-height: 0; opacity: 1; padding: 40px 0; border-top: 1px solid var(--w3-line); }
  .sw-step__visual { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; border: 1px solid var(--w3-line); margin-top: 8px; background: var(--deep); }
  .sw-step__visual .sw-visual { opacity: 1; transform: none; }
}

/* ---------- chapter 3: month (dark glass version of the shared component) ---------- */
.w3-month { padding: 100px 0; }
.month__box { padding: 32px; }
.w3-month .month__note { color: var(--w3-muted); }
.home main .month__by a { background: rgba(255, 255, 255, 0.88); color: var(--deep); }
.home main .month__by a:hover { background: var(--gold); }

/* ---------- chapter 4: studio 3D ---------- */
.w3-studio { padding: 100px 0 120px; background: radial-gradient(ellipse 70% 50% at 30% 40%, rgba(255, 195, 0, 0.07), transparent 70%); }
.studio3d { height: 190vh; position: relative; }
.studio3d__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.studio3d__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.studio3d__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--photo, 0); transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1); will-change: opacity; }
.studio3d.is-fallback .studio3d__photo { opacity: 1; }
.studio3d__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 7, 31, 0.7), transparent 22%, transparent 60%, rgba(5, 7, 31, 0.92)); }
.studio3d__badge { position: absolute; top: 96px; right: 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 999px; background: rgba(5, 7, 31, 0.6); border: 1px solid var(--w3-line); backdrop-filter: blur(8px); transition: opacity 0.3s; }
.studio3d__badge--real { color: var(--gold); border-color: rgba(255, 195, 0, 0.4); opacity: var(--photo, 0); }
.studio3d [data-badge-3d] { opacity: calc(1 - var(--photo, 0)); }
.studio3d.is-fallback [data-badge-3d] { display: none; }
.studio3d__captions { position: absolute; left: 0; right: 0; bottom: 64px; max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.studio3d__cap { position: absolute; left: 24px; bottom: 0; max-width: 520px; margin: 0; padding: 22px 26px; border-radius: 20px; background: rgba(5, 7, 31, 0.62); border: 1px solid var(--w3-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 17px; color: var(--w3-muted); display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateY(16px); transition: opacity 0.45s, transform 0.45s; }
.studio3d__cap b { font-size: 24px; color: #fff; }
.studio3d__cap.is-active { opacity: 1; transform: none; }
.studio3d__progress { position: absolute; right: 24px; bottom: 64px; width: 3px; height: 120px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.studio3d__progress span { display: block; width: 100%; height: 100%; background: var(--gold); transform-origin: top; transform: scaleY(var(--p, 0)); }
@media (max-width: 700px) {
  .studio3d { height: 165vh; }
  .studio3d__badge { top: auto; bottom: 16px; right: 16px; }
  .studio3d__captions { bottom: 56px; padding: 0 16px; }
  .studio3d__cap { left: 16px; right: 16px; font-size: 15px; padding: 18px 20px; }
  .studio3d__cap b { font-size: 20px; }
  .studio3d__progress { display: none; }
}

/* other works: floating real-photo cards with pointer tilt */
.w3-works-head { margin: 96px 0 28px; }
.float-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 22px; perspective: 1200px; }
.float-card3d { position: relative; aspect-ratio: 4 / 5; margin: 0; min-height: 0; padding: 0; border: 1px solid var(--w3-line); border-radius: 22px; overflow: hidden; background: var(--w3-bg-2); color: #fff; text-align: left; cursor: zoom-in; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform 0.25s ease-out, box-shadow 0.3s; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); }
.float-card3d:hover { box-shadow: 0 30px 80px rgba(123, 92, 255, 0.35); }
.float-card3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.float-card3d:hover img { transform: scale(1.05); }
.float-card3d__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 20px 18px; display: flex; flex-direction: column; gap: 2px; background: linear-gradient(transparent, rgba(5, 7, 31, 0.92)); transform: translateZ(30px); }
.float-card3d__text small { font-family: var(--mono); font-size: 12px; color: var(--gold); }
.float-card3d__text b { font-size: 18px; font-weight: 600; }
@media (max-width: 600px) { .float-card3d { aspect-ratio: 16 / 11; } }

/* ---------- chapter 5: about ---------- */
.w3-about { padding: 120px 0; }
.w3-point { padding: 28px; border-radius: 22px; background: var(--w3-glass); border: 1px solid var(--w3-line); display: flex; flex-direction: column; gap: 10px; }
.w3-point__title { font-size: 21px; font-weight: 600; }
.w3-point__text { font-size: 15px; color: var(--w3-muted); }
.w3-point--gold { background: linear-gradient(150deg, rgba(255, 195, 0, 0.16), rgba(255, 195, 0, 0.03)); border-color: rgba(255, 195, 0, 0.35); }

/* ---------- contact ---------- */
.w3-contact { background: linear-gradient(180deg, transparent, rgba(59, 69, 224, 0.12)); border-top: 1px solid var(--w3-line); }
.home .contact-card { background: var(--w3-glass); border-color: var(--w3-line); }
.home .form a { color: var(--navy); }

/* reduced motion: no drifting, no scroll-driven transforms */
@media (prefers-reduced-motion: reduce) {
  .orb, .w3-scroll-cue__line { animation: none; }
  .laptop { transition: none; }
  .float-card3d { transform: none; }
}

/* A static studio and product layout when motion reduction is requested. */
@media (prefers-reduced-motion: reduce) {
  .studio3d { height: auto; }
  .studio3d__sticky { position: relative; height: 640px; max-height: 90svh; min-height: 460px; }
  .studio3d__cap { position: static; opacity: 1; transform: none; margin-top: 8px; }
  .studio3d__captions { bottom: 24px; }
  .studio3d__cap:not(:first-child), .studio3d__progress { display: none; }
  .sw-step { min-height: 0; opacity: 1; padding: 48px 0; }
}

/* Model-backed notebook, with a complete keyboard and hinged CSS fallback. */
.laptop-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.laptop-wrap.has-model .laptop-sway, .laptop-wrap.has-model::after { visibility: hidden; }
.laptop__lid { transform-origin: 50% 100%; transform: rotateX(0deg); transition: transform .36s ease-in-out; }
.laptop.is-closed .laptop__lid { transform: rotateX(-112deg); }
.laptop__keys { display: flex; flex-direction: column; height: 56%; padding: 5px; gap: 3px; }
.laptop__key-row { display: flex; flex: 1; gap: 3px; min-height: 0; }
.laptop__key { display: flex; align-items: center; justify-content: center; min-width: 0; color: #dce2ed; font: 6px/1 system-ui,sans-serif; }
.laptop__key::after { display: none; }
.laptop__key-row:first-child { flex: .7; }
@media (prefers-reduced-motion: reduce) {
  .laptop__lid { transition: none; }
}

.laptop__base { height: 100%; }
.laptop__keys { height: 44%; margin-top: 7%; }
.laptop__pad { height: 30%; margin-top: 4%; }

/* Pull back for the fold and orbit; push in again as the next screen opens. */
.laptop.is-closed { --laptop-zoom: .8; }
@media (prefers-reduced-motion: reduce) {
  .laptop { --laptop-zoom: 1; }
}

/* Hold a closer software view after the lid opens. */
@media (min-width: 901px) {
  .laptop { --laptop-zoom: 1.12; }
  .laptop.is-closed { --laptop-zoom: .8; }
}
@media (prefers-reduced-motion: reduce) {
  .laptop { --laptop-zoom: 1; }
}

/* Product value: everyday work as well as monthly filing dates. */
.month__by a { display: inline-flex; align-items: center; gap: 6px; }
.month__planned { font-size: 10px; font-weight: 500; border-left: 1px solid #888da5; padding-left: 6px; }
.month__scope-note { color: var(--w3-muted); font-size: 13px; margin: 24px 0 0; }
.software-value { margin-top: 56px; }
.software-value > h3 { font-size: clamp(26px, 3vw, 36px); line-height: 1.4; margin: 0 0 14px; }
.software-value__intro { color: var(--w3-muted); max-width: 780px; margin: 0 0 28px; line-height: 1.8; }
.software-value__grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.software-value__card { padding: 22px 18px; border: 1px solid var(--w3-line); border-radius: 18px; background: var(--w3-glass); display: flex; flex-direction: column; align-items: flex-start; }
.software-value__status { font-size: 11px; color: #7ce3ae; padding: 3px 8px; border-radius: 999px; background: #2bc47816; border: 1px solid #7ce3ae40; }
.software-value__status.is-planned { color: var(--gold); border-color: #ffc30040; background: #ffc30012; }
.software-value__card h4 { font-size: 19px; margin: 18px 0 12px; line-height: 1.3; }
.software-value__benefit { font-size: 17px; font-weight: 600; line-height: 1.6; margin: 0 0 16px; }
.software-value__flow { color: #c7c3ff; font-size: 13px; line-height: 1.85; border-top: 1px solid var(--w3-line); padding-top: 16px; margin: 0 0 14px; }
.software-value__description { color: var(--w3-muted); font-size: 14px; line-height: 1.8; margin: 0 0 22px; }
.software-value__card a { color: var(--w3-text); font-size: 14px; font-weight: 500; margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; text-underline-offset: 5px; }
.software-value__card a:hover { color: var(--gold); }
@media (min-width: 560px) {
  .month__tasks li { grid-template-columns: minmax(0, 1fr) minmax(120px, 42%); }
}
@media (max-width: 1049px) {
  .software-value__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px) {
  .software-value__grid { grid-template-columns: 1fr; }
  .software-value__card { padding: 24px; }
}

.sw-visual[data-visual="0"] img { object-fit: contain; background: #101528; }

/* Leave a native scroll runway for the last product to finish opening. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .sw-deployment { min-height: max(100vh, 800px); }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .sw__stage { top: 132px; height: calc(100svh - 156px); }
}

/* Product imagery moves vertically; the lid stays open between products. */
.laptop__screen .sw-visual { opacity: 1; transform: translateY(calc((var(--visual-index, 0) - var(--screen-index, 0)) * 100%)); transition: transform .55s cubic-bezier(.22,.7,.25,1); }
.home { isolation: isolate; }
.home main { position: relative; z-index: 1; }
.page-sparkles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.page-sparkle { position: absolute; left: var(--x); top: var(--y); width: var(--size); height: var(--size); fill: var(--gold); opacity: .3; filter: drop-shadow(0 0 7px #ffc30055); }
.page-sparkle path { transform-origin: 50px 50px; animation: brand-twinkle var(--duration) ease-in-out var(--delay) infinite; }
@keyframes brand-twinkle {
  0%, 100% { opacity: .2; transform: scale(.7) rotate(-8deg); }
  45% { opacity: .75; transform: scale(1.08) rotate(7deg); }
  65% { opacity: .35; transform: scale(.9) rotate(0deg); }
}
@media (max-width: 600px) {
  .page-sparkle:nth-child(n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-sparkle { opacity: .16; }
  .page-sparkle path { animation: none; }
  .laptop__screen .sw-visual { transition: none; }
}

/* One read-only screenshot, in the browser's native modal top layer. */
.laptop-preview-trigger { position: absolute; inset: 0; z-index: 3; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: zoom-in; color: var(--w3-text); }
.laptop-preview-trigger:disabled { cursor: default; visibility: hidden; }
button.sw-step__visual { width: 100%; padding: 0; cursor: zoom-in; font: inherit; }
.software-preview { width: calc(100vw - 32px); height: calc(100dvh - 32px); max-width: 1920px; max-height: none; padding: 16px 20px; margin: auto; border: 1px solid #454c72; border-radius: 16px; background: #080b20; color: #eef0ff; overflow: hidden; box-sizing: border-box; }
.software-preview:not([open]) { display: none; }
.software-preview[open] { display: flex; flex-direction: column; gap: 12px; }
.software-preview::backdrop { background: #030515ed; backdrop-filter: blur(8px); }
.software-preview__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-shrink: 0; }
.software-preview__header h2 { font-size: clamp(18px,2vw,24px); line-height: 1.4; margin: 0; }
.software-preview__close { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #717997; background: #ffffff0d; color: #fff; font: 500 14px var(--font); cursor: pointer; }
.software-preview__close:hover { border-color: var(--gold); color: var(--gold); }
.software-preview__image { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #030515; border-radius: 8px; overflow: hidden; }
.software-preview__image img { width: 100%; height: 100%; object-fit: contain; user-select: none; }
.software-preview > p { flex-shrink: 0; margin: 0; font-size: 12px; line-height: 1.6; color: #b5bddc; }
.home.is-locked .page-sparkle path { animation-play-state: paused; }
@media (max-width: 600px) {
  .software-preview { width: calc(100vw - 16px); height: calc(100dvh - 16px); padding: 12px; border-radius: 12px; }
}

/* The former empty exit runway now explains deployment while the notebook closes. */
.sw-deployment { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: 48px 0; }
.sw-deployment__title { margin: 0; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.4; }
.sw-deployment__intro { margin: 0 0 6px; font-size: 16px; line-height: 1.8; color: var(--w3-muted); }
.deployment-option { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 1px solid var(--w3-line); border-radius: 18px; background: var(--w3-glass); }
.deployment-option__icon { display: flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--gold); border-radius: 12px; background: #ffc3000f; }
.deployment-option h4 { margin: 0 0 4px; font: 500 18px/1.5 var(--mono); }
.deployment-option p { margin: 0; color: var(--w3-muted); font-size: 14px; line-height: 1.8; }
.deployment-option p.deployment-option__location { color: var(--w3-text); font-weight: 500; margin-bottom: 6px; }
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .sw-deployment { min-height: 0; border-top: 1px solid var(--w3-line); }
}