/* Hero scenes (build/heroart.py): a tilted glass device with a product moment, and cards that drift out of it.
   Loaded on every page (CORE_CSS). Decorative only; reduced motion keeps the picture and drops the movement. */

.hero-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-5); align-items: center; }
.hero-split > .hero-copy { min-width: 0; }
.page-hero:has(.hero-split), .vz-hero:has(.sc), .hub-hero:has(.sc), .bx-hero:has(.sc) { padding-bottom: var(--sp-6); }
.hub-hero:has(.sc) { background: var(--grad-hero); color: #fff; }
.hub-hero:has(.sc) .hub-title { color: #fff; }
.hub-hero:has(.sc) p { color: var(--on-dark); }

.sc { position: relative; height: 430px; perspective: 1400px; --px: 0; --py: 0; isolation: isolate; }
.sc-glow { position: absolute; inset: 8% 6%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(43, 214, 210, 0.45), rgba(70, 110, 230, 0.25) 55%, transparent 75%); filter: blur(30px); }

/* the device */
.sc-dev { position: absolute; border-radius: 34px; padding: 10px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.9), rgba(220, 236, 250, 0.55));
  box-shadow: 0 40px 80px -30px rgba(9, 22, 52, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.7) inset, 0 0 0 1px rgba(255, 255, 255, 0.25);
  transform: rotateY(calc(-16deg + var(--px) * 6deg)) rotateX(calc(7deg - var(--py) * 5deg)) rotateZ(1.5deg);
  transform-style: preserve-3d; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.sc-phone .sc-dev { width: 250px; height: 410px; left: 50%; top: 10px; margin-left: -110px; }
.sc-laptop .sc-dev { width: min(430px, 92%); height: 300px; left: 50%; top: 56px; transform-origin: 50% 60%; translate: -50% 0; border-radius: 22px; }
.sc-panel .sc-dev { width: min(380px, 92%); height: 330px; left: 50%; top: 46px; translate: -50% 0; border-radius: 26px; }
.sc-screen { position: relative; height: 100%; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #F7FBFD, #EEF5FA); color: #1A2332; }
.sc-laptop .sc-screen, .sc-panel .sc-screen { border-radius: 14px; }
.sc-laptop .sc-dev::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -16px; height: 14px; border-radius: 0 0 14px 14px;
  background: linear-gradient(180deg, #E8F0F7, #C9D8E6); box-shadow: 0 18px 30px -18px rgba(9, 22, 52, 0.7); }

/* screen furniture */
.sc-bar { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.sc-bar.is-dark { background: #0F1A2B; }
.sc-dots { display: inline-flex; gap: 5px; } .sc-dots i { width: 7px; height: 7px; border-radius: 50%; background: #CBD7E3; }
.sc-bar.is-dark .sc-dots i { background: #33445C; }
.sc-search { flex: 1; height: 22px; border-radius: 999px; background: #fff; border: 1px solid #DCE6EF; }
.sc-avatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 700 9px var(--font-head); color: #fff; background: var(--grad-band); }
.sc-crumb { font: 600 11px var(--font-head); color: #5B6B80; } .sc-bar.is-dark .sc-crumb { color: #8FA3BC; }
.sc-label { margin: 6px 14px 8px; font: 700 10px var(--font-head); letter-spacing: 0.08em; text-transform: uppercase; color: #6A7B90; }
.sc-apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; padding: 0 14px; }
.sc-app { display: grid; justify-items: center; gap: 5px; padding: 10px 4px 7px; border-radius: 14px; background: #fff; border: 1px solid #E3ECF4;
  box-shadow: 0 6px 14px -10px rgba(26, 35, 50, 0.4); }
.sc-app i { font-style: normal; font: 600 9px var(--font-head); color: #4A586B; }
.sc-app.is-hot { box-shadow: 0 0 0 2px var(--accent), 0 10px 20px -10px rgba(10, 143, 141, 0.7); }
.sc-pass { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px solid #DCE6EF; }
.sc-pass b { display: block; font: 600 11px var(--font-head); } .sc-pass small { font-size: 9px; color: #6A7B90; }
.sc-fp { width: 26px; height: 26px; border-radius: 8px; background: var(--grad-band); position: relative; }
.sc-fp::after { content: ""; position: absolute; inset: 7px; border: 2px solid rgba(255, 255, 255, 0.9); border-radius: 50% 50% 40% 40%; }

.sc-lesson { padding: 4px 16px 14px; }
.sc-prog { height: 6px; border-radius: 6px; background: #DCE6EF; margin: 0 0 10px; overflow: hidden; }
.sc-prog i { display: block; height: 100%; background: var(--grad-line); border-radius: 6px; }
.sc-rows, .sc-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.sc-rows li, .sc-checks li { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; background: #fff; border: 1px solid #E3ECF4; font: 500 11px var(--font-body); }
.sc-rows em { margin-left: auto; font-style: normal; font-size: 9px; color: #6A7B90; }
.sc-tick, .sc-box { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #C3D1DE; flex: none; }
.sc-box { border-radius: 4px; }
.is-done > .sc-tick, .is-done > .sc-box { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px #fff; }
.sc-rows li.is-now, .sc-checks li.is-now { border-color: var(--accent); box-shadow: 0 6px 16px -10px rgba(10, 143, 141, 0.7); }
.sc-checks li.is-done span:last-child { color: #6A7B90; text-decoration: line-through; }
.sc-quiz { margin-top: 8px; display: grid; gap: 5px; font: 500 10px var(--font-body); }
.sc-quiz b { font: 700 10px var(--font-head); } .sc-quiz span { padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid #E3ECF4; }
.sc-quiz .is-pick { border-color: #0B6E43; background: #E9F7EF; }
.sc-code { margin: 0; padding: 12px 16px; height: calc(100% - 38px); background: #0F1A2B; color: #C9D6E6; font: 500 10.5px/1.7 ui-monospace, "SFMono-Regular", Menlo, monospace; white-space: pre-wrap; overflow: hidden; }
.sc-ln { display: block; min-height: 1.7em; }
.t-c { color: #6F86A3; } .t-k { color: #7EE7C9; font-weight: 700; } .t-s { color: #FFD38A; } .t-p { color: #9CC8FF; } .t-o { color: #C9D6E6; }
.sc-term { margin: 8px 0 4px; font: 700 26px var(--font-head); letter-spacing: -0.02em; background: var(--grad-band); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-def { margin: 0 0 10px; font-size: 11px; line-height: 1.5; color: #3B4A5E; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .sc-chips span { padding: 3px 8px; border-radius: 999px; background: #E3F5F4; color: #066E6B; font: 600 9.5px var(--font-head); }
.sc-mini { display: flex; align-items: center; gap: 6px; font: 600 10px var(--font-head); } .sc-mini span { padding: 6px 9px; border-radius: 8px; background: #fff; border: 1px solid #DCE6EF; }
.sc-mini i { flex: 1; height: 2px; background: var(--grad-line); border-radius: 2px; }
.sc-trust { padding: 18px; display: grid; gap: 12px; }
.sc-shield { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: var(--grad-band); box-shadow: 0 12px 26px -12px rgba(11, 94, 150, 0.8); }
.sc-shield svg { width: 30px; height: 30px; }
.sc-trows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sc-trows li { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid #E3ECF4; }
.sc-trows b { display: block; font: 600 11.5px var(--font-head); } .sc-trows small { font-size: 9.5px; color: #6A7B90; }
.sc-ok { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #E3F5F4; color: #066E6B; flex: none; }

/* floating cards: drift out of the device on load, then bob gently */
.sc-f { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 10px 14px 10px 10px; border-radius: 16px; max-width: 230px;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #1A2332;
  box-shadow: 0 24px 44px -22px rgba(9, 22, 52, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  translate: calc(var(--px) * var(--depth, 14px)) calc(var(--py) * var(--depth, 14px)); transition: translate 900ms cubic-bezier(0.22, 1, 0.36, 1); }
.sc-fi { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: var(--grad-band); }
.sc-f.is-ok:nth-of-type(odd) .sc-fi { background: linear-gradient(135deg, #0B9E73, #0A8F8D); }
.sc-ft b { display: block; font: 600 13px/1.25 var(--font-head); } .sc-ft small { display: block; font-size: 11.5px; color: #5B6B80; margin-top: 2px; }
.sc-f1 { left: -3%; top: 8px; --depth: 22px; --fx: 130px; --fy: 120px; }
.sc-f2 { right: -3%; top: 44%; --depth: 30px; --fx: -130px; --fy: 0px; }
.sc-f3 { left: 0; bottom: 0; --depth: 18px; --fx: 110px; --fy: -110px; }

@media (prefers-reduced-motion: no-preference) {
  .sc-dev { animation: sc-rise 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .sc-f { animation: sc-out 1.1s cubic-bezier(0.22, 1, 0.36, 1) both, sc-bob 7s ease-in-out 1.4s infinite; }
  .sc-f1 { animation-delay: 0.35s, 1.5s; } .sc-f2 { animation-delay: 0.6s, 2.3s; animation-duration: 1.1s, 8s; } .sc-f3 { animation-delay: 0.85s, 3.1s; animation-duration: 1.1s, 6.5s; }
  .sc-app.is-hot { animation: sc-pulse 3.2s ease-in-out 1.6s infinite; }
  .sc-prog i { animation: sc-fill 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both; }
  .sc-glow { animation: sc-breathe 9s ease-in-out infinite; }
}
@keyframes sc-rise { from { opacity: 0; translate: 0 26px; } }
.sc-laptop .sc-dev, .sc-panel .sc-dev { animation-name: sc-rise-c; }
@keyframes sc-rise-c { from { opacity: 0; translate: -50% 26px; } to { translate: -50% 0; } }
@keyframes sc-out { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(0.55); } }  /* each card starts at the device's centre */
@keyframes sc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes sc-pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 10px 20px -10px rgba(10, 143, 141, 0.7); } 50% { box-shadow: 0 0 0 5px rgba(10, 191, 188, 0.35), 0 10px 24px -8px rgba(10, 143, 141, 0.8); } }
@keyframes sc-fill { from { width: 0; } }
@keyframes sc-breathe { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

@media (max-width: 960px) {
  .hero-split { grid-template-columns: 1fr; gap: var(--sp-3); }
  .sc { height: 360px; max-width: 520px; width: 100%; margin: 0 auto; }
  .sc-phone .sc-dev { transform: rotateY(-10deg) rotateX(5deg) scale(0.85); transform-origin: 50% 0; }
}
@media (max-width: 520px) {
  .sc { height: 300px; }
  .sc-f { max-width: 190px; padding: 8px 10px 8px 8px; } .sc-ft b { font-size: 12px; } .sc-ft small { font-size: 10.5px; }
  .sc-fi { width: 28px; height: 28px; }
  .sc-f2 { display: none; }
  .sc-phone .sc-dev { transform: rotateY(-8deg) rotateX(4deg) scale(0.72); }
  .sc-laptop .sc-dev, .sc-panel .sc-dev { width: 92%; height: 250px; top: 30px; }
}

/* invoice (pricing) */
.sc-inv { padding: 16px 18px; display: grid; gap: 12px; }
.sc-inv-h { display: flex; align-items: center; gap: 10px; }
.sc-inv-h b { display: block; font: 700 13px var(--font-head); } .sc-inv-h small { font-size: 10px; color: #6A7B90; }
.sc-inv-logo { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--grad-band); color: #fff; font: 700 11px var(--font-head); }
.sc-inv-paid { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: #E3F5F4; color: #066E6B; font: 700 10px var(--font-head); }
.sc-inv-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.sc-inv-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; border-radius: 11px; background: #fff; border: 1px solid #E3ECF4; }
.sc-inv-rows b { display: block; font: 600 11.5px var(--font-head); } .sc-inv-rows small { font-size: 9.5px; color: #6A7B90; }
.sc-inv-rows em { font-style: normal; font: 600 12px var(--font-head); font-variant-numeric: tabular-nums; }
.sc-inv-tot { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 4px 0; border-top: 1px dashed #C9D7E4; font: 600 11px var(--font-head); color: #4A586B; }
.sc-inv-tot b { font: 700 22px var(--font-head); letter-spacing: -0.02em; background: var(--grad-band); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sc-inv-bar { height: 5px; border-radius: 5px; background: #DCE6EF; overflow: hidden; } .sc-inv-bar i { display: block; height: 100%; width: 100%; background: var(--grad-line); }
@media (prefers-reduced-motion: no-preference) {
  .sc-inv-rows li { animation: sc-line 700ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(0.5s + var(--r) * 0.28s); }
  .sc-inv-tot { animation: sc-line 700ms cubic-bezier(0.22, 1, 0.36, 1) 1.45s both; }
  .sc-inv-bar i { animation: sc-fill 1.8s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }
}
@keyframes sc-line { from { opacity: 0; transform: translateX(-14px); } }