/* =========================================================
   Lead-gen landing pages (Oct 2026) — body.home-v2.lp
   Builds on the homepage v2 editorial system in home.css;
   only adds the hero form, service cards and work strip.
   ========================================================= */

/* ---------- Hero: copy left, lead form right ---------- */
.lp-hero { overflow: hidden; padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.lp-hero::after { display: none; }
.lp-hero > .container { position: relative; z-index: 1; }
.lp-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }

/* Drifting aurora + faint grid */
.lp-sky { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(12, 23, 48, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(12, 23, 48, 0.04) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, #000 25%, transparent 75%); }
.lp-sky span { position: absolute; border-radius: 50%; filter: blur(80px); }
.lp-sky .b1 { width: 560px; height: 560px; right: -8%; top: -130px; background: rgba(56, 189, 248, 0.32); animation: lpDrift 16s ease-in-out infinite alternate; }
.lp-sky .b2 { width: 460px; height: 460px; right: 22%; top: 220px; background: rgba(36, 87, 214, 0.18); animation: lpDrift 20s ease-in-out infinite alternate-reverse; }
.lp-sky .b3 { width: 380px; height: 380px; left: -10%; top: 36px; background: rgba(165, 180, 252, 0.28); animation: lpDrift 18s ease-in-out infinite alternate; }
@keyframes lpDrift { to { transform: translate(-70px, 60px) scale(1.12); } }

/* Load-in stagger */
.lp-enter { transform: translateY(10px); animation: lpEnter 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) forwards; animation-delay: calc(0.1s + var(--e, 0) * 0.11s); }
@keyframes lpEnter { to { opacity: 1; transform: none; filter: none; } }

.lp-pill { display: inline-flex; align-items: center; gap: 10px; font-size: 0.82rem; font-weight: 500; color: var(--hv-ink-2); padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid var(--hv-line); backdrop-filter: blur(8px); margin-bottom: 1.4rem; }
.lp-hero h1 { font-size: clamp(2.5rem, 4.6vw, 4.1rem); }

/* Rotating service word */
.lp-rotator { display: block; height: 1.12em; overflow: hidden; clip-path: inset(0 -0.2em 0 0); }
.lp-rot-track { display: flex; flex-direction: column; animation: lpRotate 12.5s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.lp-rot-track span { display: block; height: 1.12em; line-height: 1.12; white-space: nowrap; padding-bottom: 0.08em;
  background: linear-gradient(90deg, #2457d6, #0ea5e9 55%, #6d5bd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes lpRotate {
  0%, 16% { transform: translateY(0); }
  20%, 36% { transform: translateY(-1.12em); }
  40%, 56% { transform: translateY(-2.24em); }
  60%, 76% { transform: translateY(-3.36em); }
  80%, 96% { transform: translateY(-4.48em); }
  100% { transform: translateY(-5.6em); }
}
.lp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.lp-makers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; margin: 0 0 1.6rem; font-size: 0.85rem; color: var(--hv-ink-3); }
.lp-makers a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--hv-ink); }
.lp-makers img { border-radius: 7px; box-shadow: 0 4px 10px -4px rgba(12, 23, 48, 0.3); }
.lp-makers a:hover { color: var(--hv-accent); }

.lp-assure { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem 1.2rem; margin: 0 0 2rem; }
.lp-assure li { display: flex; align-items: center; gap: 10px; color: var(--hv-ink-2); font-size: 0.92rem; font-weight: 500; }
.lp-assure i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #fff; border: 1px solid var(--hv-line); color: var(--hv-accent); font-size: 0.8rem; box-shadow: 0 4px 10px -6px rgba(12, 23, 48, 0.2); }
.lp-hero .hv-textlink .fa-whatsapp { color: #16a34a; font-size: 1.1em; }
.lp-hide-desktop { display: none; }

/* ---------- Lead form: glass card with a slow light around its edge ---------- */
@property --lp-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lp-form-shell { position: relative; padding: 1.5px; border-radius: 26px; scroll-margin-top: 110px;
  background: conic-gradient(from var(--lp-angle), rgba(36, 87, 214, 0.08) 0deg, rgba(56, 189, 248, 0.9) 60deg, rgba(36, 87, 214, 0.08) 120deg, rgba(36, 87, 214, 0.08) 360deg);
  animation: lpEnter 0.9s cubic-bezier(0.16, 0.8, 0.3, 1) forwards calc(0.1s + var(--e, 0) * 0.11s), lpSpin 6s linear infinite;
  box-shadow: 0 50px 90px -45px rgba(12, 23, 48, 0.4), 0 20px 40px -30px rgba(36, 87, 214, 0.35); }
@keyframes lpSpin { to { --lp-angle: 360deg; } }
.lp-form-card { position: relative; padding: clamp(1.4rem, 2.6vw, 2rem); border-radius: 25px; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.lp-form-head { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.4rem; }
.lp-form-head img { width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: #fff; border: 1px solid var(--hv-line); box-shadow: 0 6px 14px -8px rgba(36, 87, 214, 0.5); }
.lp-form-head h2 { font-size: 1.3rem; letter-spacing: -0.02em; margin: 0 0 0.1rem; }
.lp-form-head p { color: var(--hv-ink-3); font-size: 0.8rem; margin: 0; }

.lp-form { display: grid; gap: 1rem; }
.lp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.lp-field { display: grid; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.lp-field label, .lp-field legend { padding: 0; font-size: 0.78rem; font-weight: 600; color: var(--hv-ink-2); }
.lp-field > label > span, .lp-field > legend > span { color: var(--hv-accent); }
.lp-field legend { margin-bottom: 0.5rem; }
.lp-field input, .lp-field select, .lp-field textarea {
  width: 100%; font: inherit; font-size: 0.93rem; color: var(--hv-ink);
  padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid transparent; background: #f2f5fa;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.lp-field select { appearance: none; padding-right: 2.2rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7689' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.9rem center; }
.lp-field select:invalid { color: #9aa4b5; }
.lp-field textarea { resize: vertical; min-height: 64px; }
.lp-field input::placeholder, .lp-field textarea::placeholder { color: #a3adbd; }
.lp-field input:hover, .lp-field select:hover, .lp-field textarea:hover { background: #edf1f8; }
.lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { outline: none; background: #fff; border-color: rgba(36, 87, 214, 0.55); box-shadow: 0 0 0 4px rgba(36, 87, 214, 0.1); }
.lp-field.is-invalid input, .lp-field.is-invalid select { border-color: #ef4444; background: #fff; box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08); }

/* Chips */
.lp-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.lp-chip { position: relative; cursor: pointer; }
.lp-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lp-chip span { display: inline-block; font-size: 0.83rem; font-weight: 500; color: var(--hv-ink-2); padding: 0.5rem 0.85rem; border-radius: 999px; background: #fff; border: 1px solid #dde3ed; transition: all 0.2s cubic-bezier(0.16, 0.8, 0.3, 1); user-select: none; }
.lp-chip:hover span { border-color: #b9c6dc; color: var(--hv-ink); }
.lp-chip input:checked + span { background: var(--hv-ink); border-color: var(--hv-ink); color: #fff; box-shadow: 0 8px 16px -10px rgba(12, 23, 48, 0.7); }
.lp-chip input:focus-visible + span { outline: 2px solid var(--hv-accent); outline-offset: 2px; }
.lp-chips-sm .lp-chip span { font-size: 0.78rem; padding: 0.4rem 0.75rem; }
.lp-chips-field.is-invalid .lp-chip span { border-color: #f5a3a3; }

/* Optional extras */
.lp-more summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--hv-accent); }
.lp-more summary::-webkit-details-marker { display: none; }
.lp-more summary i { font-size: 0.7rem; transition: transform 0.25s; }
.lp-more[open] summary i { transform: rotate(45deg); }
.lp-more summary span { font-weight: 400; color: var(--hv-ink-3); }
.lp-more-body { display: grid; gap: 1rem; margin-top: 1rem; animation: lpEnter 0.4s ease forwards; }

.lp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lp-submit { margin-top: 0.2rem; padding-top: 1rem; padding-bottom: 1rem; position: relative; overflow: hidden; }
.lp-submit::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent); animation: lpShine 4.5s ease-in-out 2s infinite; }
@keyframes lpShine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.lp-submit[disabled] { opacity: 0.7; cursor: progress; }
.lp-form-note { font-size: 0.85rem; color: #b91c1c; margin: 0; }
.lp-form-note:empty { display: none; }
.lp-legal { font-size: 0.76rem; color: var(--hv-ink-3); text-align: center; margin: 0; }
.lp-legal i { font-size: 0.7rem; margin-right: 3px; }
.lp-legal a, .lp-thanks a { color: var(--hv-accent); text-decoration: underline; text-underline-offset: 3px; }

.lp-thanks { text-align: center; padding: 2.5rem 0.5rem; outline: none; }
.lp-thanks > i { font-size: 2.6rem; color: #16a34a; margin-bottom: 1rem; display: block; }
.lp-thanks h2 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.lp-thanks p { color: var(--hv-ink-2); line-height: 1.6; max-width: 38ch; margin: 0 auto 0.8rem; }

/* ---------- Services marquee ---------- */
.lp-marquee { position: relative; z-index: 1; margin-top: clamp(3rem, 6vw, 4.5rem); overflow: hidden; padding: 1.1rem 0; border-block: 1px solid var(--hv-line); background: rgba(255, 255, 255, 0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.lp-marquee-track { display: flex; width: max-content; animation: lpMarquee 38s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee span { display: inline-flex; align-items: center; gap: 10px; padding: 0 2rem; font-size: 1.02rem; font-weight: 600; color: var(--hv-ink-2); white-space: nowrap; }
.lp-marquee span i { color: var(--hv-accent); font-size: 0.9rem; }
.lp-marquee span::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #c7d0df; margin-left: 2rem; }
@keyframes lpMarquee { to { transform: translateX(-50%); } }
.lp-hero .hv-proof { margin-top: clamp(1.5rem, 3vw, 2rem); border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .lp-enter, .lp-form-shell { animation: none !important; opacity: 1; transform: none; filter: none; }
  .lp-sky span, .lp-rot-track, .lp-marquee-track, .lp-submit::after { animation: none !important; }
}

/* ---------- Service cards ---------- */
.lp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem; }
.lp-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2.6vw, 2rem); border-radius: 18px; background: #fff; border: 1px solid var(--hv-line); color: inherit; text-decoration: none; transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s; }
.lp-card:hover { transform: translateY(-4px); box-shadow: var(--hv-shadow); border-color: #d3dbe8; }
.lp-card-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; background: var(--hv-accent-soft); color: var(--hv-accent); font-size: 1.05rem; margin-bottom: 1.3rem; }
.lp-card h3 { font-size: 1.18rem; letter-spacing: -0.02em; margin-bottom: 0.6rem; }
.lp-card p { color: var(--hv-ink-2); font-size: 0.95rem; line-height: 1.62; margin-bottom: 1.4rem; }
.lp-card .hv-textlink { margin-top: auto; font-size: 0.9rem; }

/* ---------- Service groups: Build / Make it intelligent / Grow it ---------- */
.lp-group { display: flex; align-items: center; gap: 14px; margin: 2.6rem 0 1.1rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv-ink-3); }
.lp-group:first-of-type { margin-top: 0; }
.lp-group::after { content: ''; flex: 1; height: 1px; background: var(--hv-line); }
.lp-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lp-card-ai { background: linear-gradient(180deg, #fff 0%, #f6f8ff 100%); border-color: #dde4f5; }
.lp-card-ai .lp-card-icon { background: var(--hv-ink); color: #fff; }

/* ---------- Services: three stages of animated cards ----------
   Each card's mini animation runs only while .is-live (on screen),
   toggled by js/services-fx.js. */
.sx-head h2 .sx-shine { background: linear-gradient(90deg, #2457d6, #0ea5e9, #6d5bd0, #2457d6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sxShine 6s linear infinite; }
@keyframes sxShine { to { background-position: 300% 0; } }

.sx-stage { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(2rem, 4vw, 3rem) 0; border-top: 1px solid var(--hv-line); }
.sx-stage-label { position: sticky; top: 120px; align-self: start; }
.sx-stage-label b { display: block; font-size: 3.4rem; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(36, 87, 214, 0.45); margin-bottom: 0.6rem; }
.sx-stage-label span { display: block; font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: var(--hv-ink); margin-bottom: 0.4rem; }
.sx-stage-label p { font-size: 0.92rem; color: var(--hv-ink-3); line-height: 1.55; max-width: 26ch; }

.sx-dark { margin: 0.5rem calc(clamp(1rem, 3vw, 2.5rem) * -1); padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.5rem); border: 0; border-radius: 28px; color: #dbe3f3; position: relative; overflow: hidden;
  background: radial-gradient(90% 120% at 100% 0%, #1d3b8f 0%, #0c1730 55%, #0a1226 100%); box-shadow: 0 40px 80px -40px rgba(12, 23, 48, 0.55); }
.sx-dark::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 20%, #000 20%, transparent 70%); }
.sx-dark > .sx-grid { position: relative; }
.sx-dark > .sx-stage-label { position: relative; top: auto; z-index: 1; }
.sx-dark .sx-stage-label b { -webkit-text-stroke-color: rgba(125, 211, 252, 0.6); }
.sx-dark .sx-stage-label span { color: #fff; }
.sx-dark .sx-stage-label p { color: #93a3c4; }
.sx-dark + .sx-stage { border-top: 0; }

.sx-grid { display: grid; gap: 1.1rem; }
.sx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sx-card { --mx: 50%; --my: 0%; position: relative; display: flex; flex-direction: column; padding: 0.75rem 0.75rem 1.4rem; border-radius: 20px; background: #fff; border: 1px solid var(--hv-line); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate;
  transition: translate 0.4s cubic-bezier(0.16, 0.8, 0.3, 1), box-shadow 0.4s, border-color 0.4s; }
.sx-card::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(56, 189, 248, 0.14), transparent 60%); }
.sx-card:hover { translate: 0 -6px; box-shadow: 0 30px 60px -34px rgba(12, 23, 48, 0.35); border-color: #cfdaf0; }
.sx-card:hover::before { opacity: 1; }
.sx-card h3 { font-size: 1.12rem; letter-spacing: -0.02em; margin: 1.15rem 0.55rem 0.5rem; }
.sx-card p { color: var(--hv-ink-2); font-size: 0.92rem; line-height: 1.6; margin: 0 0.55rem 1.2rem; }
.sx-card .hv-textlink { margin: auto 0.55rem 0; font-size: 0.88rem; }
.sx-dark .sx-card { background: rgba(255, 255, 255, 0.045); border-color: rgba(255, 255, 255, 0.09); backdrop-filter: blur(10px); }
.sx-dark .sx-card:hover { border-color: rgba(125, 211, 252, 0.35); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.sx-dark .sx-card::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(56, 189, 248, 0.18), transparent 60%); }
.sx-dark .sx-card h3 { color: #fff; }
.sx-dark .sx-card p { color: #a9b6d0; }
.sx-dark .sx-card .hv-textlink { color: #7dd3fc; }

.sx-vis { position: relative; height: 160px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #f5f8fd, #eef3fb); border: 1px solid #e6ecf5; }
.sx-dark .sx-vis { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.07); }
.sx-vis *, .sx-vis *::before, .sx-vis *::after { animation-play-state: paused; }
.sx-card.is-live .sx-vis *, .sx-card.is-live .sx-vis *::before, .sx-card.is-live .sx-vis *::after { animation-play-state: running; }

/* Dashboard */
.v-dash { display: flex; gap: 10px; padding: 14px; }
.vd-side { width: 16%; display: grid; align-content: start; gap: 9px; padding: 10px 6px; border-radius: 9px; background: #0c1730; }
.vd-side i { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.vd-side i:first-child { background: #38bdf8; }
.vd-main { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.vd-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.vd-kpis span { height: 26px; border-radius: 7px; background: linear-gradient(90deg, #fff 30%, #e8f0fc 50%, #fff 70%) 0 0 / 300% 100%; border: 1px solid #e3e9f3; animation: vdShimmer 2.4s linear infinite; }
.vd-kpis span:nth-child(2) { animation-delay: 0.3s; } .vd-kpis span:nth-child(3) { animation-delay: 0.6s; }
@keyframes vdShimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }
.vd-bars { flex: 1; display: flex; align-items: flex-end; gap: 7%; padding: 8px 10px 0; border-radius: 9px; background: #fff; border: 1px solid #e3e9f3; }
.vd-bars b { flex: 1; height: var(--h); border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #38bdf8, #2457d6); transform-origin: bottom; animation: vdGrow 4.5s cubic-bezier(0.16, 0.8, 0.3, 1) infinite; }
.vd-bars b:nth-child(2) { animation-delay: 0.1s; } .vd-bars b:nth-child(3) { animation-delay: 0.2s; } .vd-bars b:nth-child(4) { animation-delay: 0.3s; } .vd-bars b:nth-child(5) { animation-delay: 0.4s; } .vd-bars b:nth-child(6) { animation-delay: 0.5s; }
@keyframes vdGrow { 0% { transform: scaleY(0.08); } 30%, 82% { transform: scaleY(1); } 100% { transform: scaleY(0.08); } }

/* Phone */
.v-phone { display: flex; justify-content: center; }
.vp-phone { position: relative; width: 108px; height: 190px; margin-top: 20px; border-radius: 20px; border: 3px solid #0c1730; background: #fff; overflow: hidden; box-shadow: 0 18px 30px -18px rgba(12, 23, 48, 0.5); }
.vp-notif { position: absolute; top: 6px; left: 5px; right: 5px; display: flex; align-items: center; gap: 5px; padding: 6px; border-radius: 8px; background: #0c1730; color: #7dd3fc; font-size: 0.55rem; transform: translateY(-140%); animation: vpNotif 4.5s cubic-bezier(0.16, 0.8, 0.3, 1) infinite; z-index: 2; }
.vp-notif span { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.4); }
@keyframes vpNotif { 0%, 12% { transform: translateY(-140%); } 22%, 70% { transform: translateY(0); } 80%, 100% { transform: translateY(-140%); } }
.vp-map { position: absolute; inset: 0 0 50px; background: #e9f1fb; background-image: linear-gradient(#dbe6f5 1px, transparent 1px), linear-gradient(90deg, #dbe6f5 1px, transparent 1px); background-size: 16px 16px; }
.vp-route { position: absolute; left: 18%; top: 62%; width: 60%; height: 2px; border-top: 2px dashed #2457d6; transform: rotate(-24deg); transform-origin: left; }
.vp-pin { position: absolute; left: 66%; top: 38%; width: 12px; height: 12px; border-radius: 50%; background: #2457d6; border: 2px solid #fff; }
.vp-pin::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid #2457d6; animation: vpPing 1.8s ease-out infinite; }
@keyframes vpPing { to { transform: scale(2.6); opacity: 0; } }
.vp-tabs { position: absolute; left: 0; right: 0; bottom: 28px; height: 22px; display: flex; justify-content: space-around; align-items: center; background: #fff; border-top: 1px solid #e3e9f3; }
.vp-tabs i { width: 9px; height: 9px; border-radius: 3px; background: #cbd5e1; }
.vp-tabs i:first-child { background: #2457d6; }

/* Web */
.v-web { padding: 14px 14px 0; }
.vw-browser { width: 74%; height: 100%; border-radius: 10px 10px 0 0; background: #fff; border: 1px solid #e3e9f3; border-bottom: 0; box-shadow: 0 14px 30px -20px rgba(12, 23, 48, 0.4); overflow: hidden; }
.vw-bar { display: flex; gap: 4px; padding: 7px 8px; border-bottom: 1px solid #eef2f8; }
.vw-bar i { width: 6px; height: 6px; border-radius: 50%; background: #d5dbe6; }
.vw-page { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; }
.vw-page span { height: 10px; border-radius: 4px; background: #e8eef7; transform-origin: left; animation: vwBuild 5s cubic-bezier(0.16, 0.8, 0.3, 1) infinite; }
.vw-page .w1 { grid-column: 1 / -1; height: 14px; width: 70%; background: #0c1730; }
.vw-page .w2 { grid-column: 1 / -1; width: 90%; animation-delay: 0.15s; }
.vw-page .w3 { height: 34px; background: linear-gradient(135deg, #bfe3fb, #c7d6f6); animation-delay: 0.3s; }
.vw-page .w4 { height: 34px; animation-delay: 0.45s; }
.vw-page .w5 { grid-column: 1 / -1; width: 40%; height: 12px; border-radius: 6px; background: #2457d6; animation-delay: 0.6s; }
@keyframes vwBuild { 0% { transform: scaleX(0); opacity: 0; } 18%, 85% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.vw-ring { position: absolute; right: 12px; bottom: 14px; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 12px 26px -14px rgba(12, 23, 48, 0.45); }
.vw-ring svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); transform: rotate(-90deg); }
.vw-ring circle { fill: none; stroke: #e6ecf5; stroke-width: 3.5; }
.vw-ring .vw-arc { stroke: #22c55e; stroke-linecap: round; stroke-dasharray: 94.2; stroke-dashoffset: 94.2; animation: vwArc 5s cubic-bezier(0.16, 0.8, 0.3, 1) infinite; }
.vw-ring i { color: #22c55e; font-size: 0.85rem; }
@keyframes vwArc { 0%, 15% { stroke-dashoffset: 94.2; } 50%, 88% { stroke-dashoffset: 6; } 100% { stroke-dashoffset: 94.2; } }

/* AI chat (dark) */
.v-chat > span { position: absolute; font-size: 0.74rem; line-height: 1.35; padding: 7px 11px; border-radius: 12px; white-space: nowrap; opacity: 0; }
.vc-user { top: 16px; right: 14px; background: #2457d6; color: #fff; border-bottom-right-radius: 4px; animation: vcUser 6s ease infinite; }
.vc-typing { top: 58px; left: 14px; display: flex; gap: 4px; background: rgba(255, 255, 255, 0.1); animation: vcTyping 6s ease infinite; }
.vc-typing i { width: 5px; height: 5px; border-radius: 50%; background: #93a3c4; animation: vcDot 0.9s ease-in-out infinite; }
.vc-typing i:nth-child(2) { animation-delay: 0.15s; } .vc-typing i:nth-child(3) { animation-delay: 0.3s; }
.vc-bot { top: 58px; left: 14px; background: rgba(255, 255, 255, 0.1); color: #e8edf7; border-bottom-left-radius: 4px; animation: vcBot 6s ease infinite; }
.vc-ok { top: 104px; left: 14px; color: #86efac !important; background: rgba(34, 197, 94, 0.14); border: 1px solid rgba(34, 197, 94, 0.3); font-weight: 600; animation: vcOk 6s ease infinite; }
@keyframes vcUser { 0% { opacity: 0; transform: translateY(6px); } 6%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vcTyping { 0%, 12% { opacity: 0; } 15%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes vcBot { 0%, 32% { opacity: 0; transform: translateY(6px); } 37%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vcOk { 0%, 55% { opacity: 0; transform: scale(0.9); } 60%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes vcDot { 50% { transform: translateY(-3px); opacity: 0.5; } }

/* Automation flow (dark) */
.v-flow { display: flex; align-items: center; justify-content: center; padding: 0 12px; }
.vf-node { display: grid; justify-items: center; gap: 6px; font-size: 0.68rem; font-weight: 600; color: #93a3c4; }
.vf-node i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; font-size: 0.95rem; color: #7dd3fc; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); animation: vfGlow 3.6s ease infinite; }
.vf-node.n2 i { animation-delay: 1.2s; } .vf-node.n3 i { animation-delay: 2.4s; }
@keyframes vfGlow { 0%, 25%, 100% { background: rgba(255, 255, 255, 0.06); color: #7dd3fc; box-shadow: none; } 8%, 18% { background: linear-gradient(135deg, #2457d6, #0ea5e9); color: #fff; box-shadow: 0 0 24px rgba(14, 165, 233, 0.6); } }
.vf-link { position: relative; flex: 1; height: 2px; margin: 0 6px 22px; background: rgba(255, 255, 255, 0.12); }
.vf-link b { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 12px #38bdf8; opacity: 0; animation: vfTravel 3.6s ease-in-out infinite; }
.vf-link.l2 b { animation-delay: 1.2s; }
@keyframes vfTravel { 0%, 15% { left: 0; opacity: 0; } 18% { opacity: 1; } 40% { left: calc(100% - 8px); opacity: 1; } 44%, 100% { left: calc(100% - 8px); opacity: 0; } }

/* Document scan (dark) */
.v-scan { display: flex; align-items: center; justify-content: center; gap: 16px; }
.vs-doc { position: relative; width: 82px; height: 108px; padding: 12px 10px; display: grid; align-content: start; gap: 8px; border-radius: 8px; background: #f1f5fb; overflow: hidden; }
.vs-doc span { height: 6px; border-radius: 3px; background: #c9d4e6; }
.vs-doc span:first-child { width: 55%; height: 18px; border-radius: 4px; background: #94a8c9; }
.vs-doc span:nth-child(3) { width: 80%; } .vs-doc span:nth-child(5) { width: 60%; }
.vs-beam { position: absolute; left: 0; right: 0; top: 0; height: 26px; background: linear-gradient(180deg, transparent, rgba(56, 189, 248, 0.55)); border-bottom: 2px solid #38bdf8; animation: vsBeam 3.6s ease-in-out infinite; }
@keyframes vsBeam { 0% { transform: translateY(-30px); } 50% { transform: translateY(100px); } 100% { transform: translateY(-30px); } }
.vs-fields { display: grid; gap: 7px; }
.vs-fields span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 600; color: #e8edf7; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; animation: vsField 3.6s ease infinite; }
.vs-fields i { color: #4ade80; font-size: 0.6rem; }
.vs-fields .f2 { animation-delay: 0.35s; } .vs-fields .f3 { animation-delay: 0.7s; }
@keyframes vsField { 0%, 20% { opacity: 0; transform: translateX(-8px); } 30%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* SEO */
.v-seo { padding: 16px; display: grid; gap: 12px; align-content: start; }
.vse-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid #e3e9f3; box-shadow: 0 8px 18px -14px rgba(12, 23, 48, 0.4); font-size: 0.78rem; color: var(--hv-ink); }
.vse-search i { color: #2457d6; font-size: 0.75rem; }
.vse-q { overflow: hidden; white-space: nowrap; border-right: 2px solid #2457d6; width: 0; animation: vseType 6s steps(22) infinite; }
@keyframes vseType { 0% { width: 0; } 25%, 92% { width: 22ch; } 100% { width: 0; } }
.vse-results { position: relative; height: 84px; }
.vse-results span { position: absolute; left: 0; right: 0; height: 24px; border-radius: 7px; background: #fff; border: 1px solid #e3e9f3; }
.vse-results .r-a { top: 0; animation: vseDownA 6s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.vse-results .r-b { top: 30px; animation: vseDownB 6s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.vse-results .r-a::before, .vse-results .r-b::before { content: ''; position: absolute; left: 10px; top: 9px; width: 45%; height: 5px; border-radius: 3px; background: #d5dde9; }
.vse-results .r-you { top: 60px; display: flex; align-items: center; padding-left: 10px; font-size: 0.72rem; color: #2457d6; border-color: rgba(36, 87, 214, 0.35); z-index: 1; animation: vseUp 6s cubic-bezier(0.7, 0, 0.2, 1) infinite; }
.vse-results .r-you::after { content: '#1'; position: absolute; right: 8px; font-size: 0.65rem; font-weight: 700; color: #fff; background: #22c55e; padding: 1px 6px; border-radius: 999px; opacity: 0; animation: vseBadge 6s ease infinite; }
@keyframes vseUp { 0%, 35% { top: 60px; box-shadow: none; } 55%, 92% { top: 0; box-shadow: 0 10px 22px -12px rgba(36, 87, 214, 0.55); } 100% { top: 60px; } }
@keyframes vseDownA { 0%, 35% { top: 0; } 55%, 92% { top: 30px; } 100% { top: 0; } }
@keyframes vseDownB { 0%, 35% { top: 30px; } 55%, 92% { top: 60px; } 100% { top: 30px; } }
@keyframes vseBadge { 0%, 55% { opacity: 0; } 62%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* Social */
.v-social { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 0 16px 16px; }
.vso-post { position: relative; width: 64px; height: 82px; border-radius: 10px; background: #fff; border: 1px solid #e3e9f3; padding: 6px; box-shadow: 0 12px 24px -16px rgba(12, 23, 48, 0.4); animation: vsoRise 5s cubic-bezier(0.16, 0.8, 0.3, 1) infinite; }
.vso-post span { display: block; height: 48px; border-radius: 6px; background: linear-gradient(135deg, #bfe3fb, #c7d6f6); }
.vso-post.p2 { height: 98px; animation-delay: 0.2s; } .vso-post.p2 span { height: 62px; background: linear-gradient(135deg, #c7d6f6, #ddd6fe); }
.vso-post.p3 { animation-delay: 0.4s; } .vso-post.p3 span { background: linear-gradient(135deg, #a5f3fc, #bfdbfe); }
.vso-post b { position: absolute; top: -9px; right: -9px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #ef4444; color: #fff; font-size: 0.55rem; transform: scale(0); animation: vsoHeart 5s cubic-bezier(0.34, 1.56, 0.64, 1) infinite; }
.vso-post.p2 b { animation-delay: 0.35s; } .vso-post.p3 b { animation-delay: 0.7s; }
@keyframes vsoRise { 0% { transform: translateY(24px); opacity: 0; } 15%, 88% { transform: none; opacity: 1; } 100% { transform: translateY(24px); opacity: 0; } }
@keyframes vsoHeart { 0%, 30% { transform: scale(0); } 38%, 85% { transform: scale(1); } 100% { transform: scale(0); } }
.vso-trend { position: absolute; left: 14px; right: 14px; top: 14px; width: calc(100% - 28px); height: 36px; }
.vso-trend path { fill: none; stroke: #22c55e; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 200; stroke-dashoffset: 200; animation: vsoDraw 5s ease infinite; }
@keyframes vsoDraw { 0%, 20% { stroke-dashoffset: 200; } 60%, 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 200; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .sx-vis *, .sx-vis *::before, .sx-vis *::after, .sx-shine { animation: none !important; }
  .vp-notif, .vc-user, .vc-bot, .vc-ok, .vs-fields span { opacity: 1; transform: none; }
  .vc-typing { display: none; }
  .vse-q { width: auto; border-right: 0; }
  .vso-post b { transform: none; }
  .vso-trend path, .vw-ring .vw-arc { stroke-dashoffset: 0; }
}
@media (max-width: 1080px) {
  .sx-stage { grid-template-columns: 1fr; gap: 1.4rem; }
  .sx-stage-label { position: static; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 0.8rem; }
  .sx-stage-label b { font-size: 2.4rem; margin: 0; }
  .sx-stage-label p { flex-basis: 100%; max-width: none; }
  .sx-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .sx-grid-3, .sx-grid-2 { grid-template-columns: 1fr; }
  .sx-dark { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; border-radius: 22px; }
}

/* ---------- AI agent showcase: quiet, light, one accent ----------
   Default (no JS / reduced motion) is the finished state.
   js/agent-demo.js adds .js-ready (start state) and .is-playing. */
.ag-wrap { position: relative; padding: clamp(1rem, 3vw, 2.2rem); }
.ag-aura { position: absolute; inset: 6% 4%; border-radius: 40px; filter: blur(60px); opacity: 0.55; pointer-events: none;
  background: radial-gradient(50% 60% at 30% 30%, rgba(56, 189, 248, 0.35), transparent 70%), radial-gradient(50% 60% at 75% 70%, rgba(36, 87, 214, 0.28), transparent 70%); }
.ag { position: relative; margin: 0 auto; max-width: 520px; border-radius: 24px; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(12, 23, 48, 0.07); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 40px 80px -40px rgba(12, 23, 48, 0.28), 0 12px 30px -20px rgba(12, 23, 48, 0.12); }
.ag-head { display: flex; align-items: center; gap: 10px; padding: 1.15rem 1.5rem; border-bottom: 1px solid rgba(12, 23, 48, 0.06); }
.ag-orb { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #fff; border: 1px solid rgba(12, 23, 48, 0.08); box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1), 0 6px 14px -8px rgba(36, 87, 214, 0.5); animation: agBreathe 3.6s ease-in-out infinite; }
.ag-orb img { width: 30px; height: 30px; display: block; }
.ag-name { font-weight: 600; font-size: 0.95rem; color: var(--hv-ink); letter-spacing: -0.01em; }
.ag-status { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--hv-ink-3); }
.ag-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; }
.ag-body { display: grid; gap: 1.3rem; padding: 1.6rem 1.5rem 1.7rem; min-height: 470px; align-content: start; }

.ag-user { justify-self: end; max-width: 82%; margin: 0; padding: 0.8rem 1.05rem; border-radius: 18px 18px 6px 18px; background: var(--hv-ink); color: #fff; font-size: 0.9rem; line-height: 1.5; }

.ag-trail { position: relative; list-style: none; display: grid; gap: 0.95rem; padding-left: 1.6rem; margin: 0; }
.ag-trail::before { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: rgba(12, 23, 48, 0.1); }
.ag-trail::after { content: ''; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: linear-gradient(var(--hv-accent), #38bdf8); transform-origin: top; }
.ag-trail li { position: relative; display: flex; align-items: baseline; gap: 0.6rem; font-size: 0.86rem; color: var(--hv-ink-2); }
.ag-trail em { margin-left: auto; font-style: normal; font-size: 0.78rem; color: var(--hv-ink-3); }
.ag-dot { position: absolute; left: -1.6rem; top: 0.42em; width: 11px; height: 11px; border-radius: 50%; background: var(--hv-accent); box-shadow: 0 0 0 4px #fff; }

.ag-card { padding: 1.15rem 1.2rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid rgba(12, 23, 48, 0.08); box-shadow: 0 18px 40px -26px rgba(12, 23, 48, 0.35); }
.ag-card-kicker { margin: 0 0 0.3rem; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv-accent); }
.ag-card-title { margin: 0 0 0.9rem; font-size: 1rem; font-weight: 600; color: var(--hv-ink); letter-spacing: -0.01em; }
.ag-card dl { display: grid; gap: 0.45rem; margin: 0; padding: 0.8rem 0; border-top: 1px solid rgba(12, 23, 48, 0.06); border-bottom: 1px solid rgba(12, 23, 48, 0.06); }
.ag-card dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.82rem; }
.ag-card dt { color: var(--hv-ink-3); }
.ag-card dd { margin: 0; color: var(--hv-ink); font-weight: 500; text-align: right; }
.ag-actions { position: relative; display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.95rem; min-height: 34px; }
.ag-btn { font-size: 0.8rem; font-weight: 600; padding: 0.45rem 1.05rem; border-radius: 999px; opacity: 0; }
.ag-cancel { color: var(--hv-ink-2); }
.ag-ok { background: var(--hv-ink); color: #fff; }
.ag-done { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: #15803d; padding: 0.45rem 1rem; border-radius: 999px; background: rgba(34, 197, 94, 0.1); }

.ag-reply { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--hv-ink-2); }
.ag-note { margin-top: 0.4rem; font-size: 0.8rem; color: var(--hv-ink-3); text-align: center; }

/* Start state (only when JS drives it) */
.ag.js-ready .ag-step { opacity: 0; transform: translateY(6px); filter: blur(4px); }
.ag.js-ready .ag-trail::after { transform: scaleY(0); }
.ag.js-ready .ag-dot { background: #fff; box-shadow: 0 0 0 4px #fff, inset 0 0 0 1.5px rgba(12, 23, 48, 0.2); }
.ag.js-ready .ag-btn { opacity: 1; }
.ag.js-ready .ag-done { opacity: 0; transform: translateY(-50%) scale(0.96); }

/* Timeline */
.ag.is-playing .ag-step { animation: agIn 0.7s cubic-bezier(0.16, 0.8, 0.3, 1) var(--d) forwards; }
.ag.is-playing .ag-trail::after { animation: agLine 2s cubic-bezier(0.45, 0, 0.2, 1) 1s forwards; }
.ag.is-playing .ag-dot { animation: agDot 0.4s ease var(--d2) forwards; }
.ag.is-playing .ag-ok { animation: agPress 0.4s ease 5.1s, agFade 0.3s ease 5.45s forwards; }
.ag.is-playing .ag-cancel { animation: agFade 0.3s ease 5.45s forwards; }
.ag.is-playing .ag-done { animation: agDone 0.5s cubic-bezier(0.16, 0.8, 0.3, 1) 5.55s forwards; }

@keyframes agIn { to { opacity: 1; transform: none; filter: none; } }
@keyframes agLine { to { transform: scaleY(1); } }
@keyframes agDot { to { background: var(--hv-accent); box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(36, 87, 214, 0.12); } }
@keyframes agPress { 50% { transform: scale(0.95); } }
@keyframes agFade { to { opacity: 0; } }
@keyframes agDone { to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes agBreathe { 50% { box-shadow: 0 0 0 7px rgba(56, 189, 248, 0.06), 0 6px 18px -6px rgba(36, 87, 214, 0.55); } }
@media (prefers-reduced-motion: reduce) { .ag-orb { animation: none; } }

/* ---------- Page rhythm: same spacing and heads for every section ---------- */
.lp .hv-section { padding: clamp(4rem, 7vw, 6.5rem) 0; }
.lp .hv-section.lp-tight { padding-top: 0; }
.lp #ai { padding: clamp(3rem, 6vw, 5rem) 0; }
.lp .hv-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.lp .hv-head h2 { font-size: clamp(2rem, 3.4vw, 2.85rem); }

/* ---------- Work: two product cards ---------- */
.lp-work { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.1rem; }
.lp-work-item { padding: 0.75rem 0.75rem 1.5rem; }
.lp-work-media { height: 300px; display: flex; align-items: flex-start; justify-content: center; padding: 1.6rem 1.6rem 0; border-radius: 14px; overflow: hidden; background: linear-gradient(160deg, #eef4fe, #e3ecfa); border: 1px solid #e6ecf5; }
.lp-work-media .hv-shot { width: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); }
.lp-work-phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; align-items: start; padding: 1.6rem 1.8rem 0; background: linear-gradient(160deg, #f1eeff, #e6e9fb); }
.lp-work-phones figure:not(.hv-phone-raised) { margin-top: 1.6rem; }
.lp-work-phones .hv-phone-raised { transform: none; }
.lp-work-phones figure { transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); }
.lp-work-item:hover .hv-shot { transform: scale(1.03); }
.lp-work-item:hover .lp-work-phones figure:nth-child(1) { transform: translateY(-6px) rotate(-2deg); }
.lp-work-item:hover .lp-work-phones figure:nth-child(3) { transform: translateY(-6px) rotate(2deg); }
.lp-work-meta { padding: 1.3rem 0.55rem 0; display: flex; flex-direction: column; flex: 1; }
.lp-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 600; color: var(--hv-accent); background: var(--hv-accent-soft); padding: 4px 10px; border-radius: 999px; }
.lp-work-meta h3 { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; letter-spacing: -0.02em; margin: 0.8rem 0 0.45rem; }
.lp-work-meta h3 img { border-radius: 8px; box-shadow: 0 4px 10px -4px rgba(12, 23, 48, 0.3); }
.lp-work-meta p { color: var(--hv-ink-2); font-size: 0.93rem; line-height: 1.6; margin: 0 0 1.2rem; }
.lp-work-meta .hv-textlink { margin-top: auto; font-size: 0.88rem; }

/* ---------- Technology: dark panel, matches the AI stage ---------- */
.sx-dark.lp-tech { margin: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(2rem, 5vw, 3.5rem); }
.lp-tech .hv-head { margin: 0; }
.lp-tech .hv-head h2 { color: #fff; }
.lp-tech .hv-head > p:not(.hv-label) { color: #a9b6d0; }
.lp-tech .hv-label { color: #7dd3fc; }
.lp-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.lp-stack-item { display: grid; grid-template-columns: 40px 1fr; gap: 0.25rem 0.9rem; padding: 1rem 1.1rem; border-radius: 14px; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.08); transition: border-color 0.3s, background 0.3s, translate 0.3s; }
.lp-stack-item:hover { border-color: rgba(125, 211, 252, 0.35); background: rgba(255, 255, 255, 0.07); translate: 0 -3px; }
.lp-stack-item i { grid-row: span 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 11px; color: #fff; font-size: 0.9rem; background: linear-gradient(135deg, #2457d6, #0ea5e9); box-shadow: 0 8px 18px -8px rgba(14, 165, 233, 0.7); }
.lp-stack-item h3 { font-size: 0.98rem; color: #fff; margin: 0.1rem 0 0; }
.lp-stack-item p { font-size: 0.8rem; line-height: 1.5; color: #a9b6d0; margin: 0; }

/* ---------- Feature cards (Why, Engagement) ---------- */
.sx-card.lp-feat { padding: 1.6rem 1.5rem 1.5rem; }
.lp-feat h3 { margin: 1.1rem 0 0.45rem; font-size: 1.08rem; }
.lp-feat p { margin: 0; font-size: 0.92rem; }
.lp-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 1rem; background: linear-gradient(135deg, #2457d6, #0ea5e9); box-shadow: 0 10px 22px -10px rgba(36, 87, 214, 0.7); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.lp-feat:hover .lp-ico { transform: rotate(-8deg) scale(1.08); }
.lp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lp-fit { margin-top: 1.2rem; align-self: flex-start; font-size: 0.74rem; font-weight: 600; color: var(--hv-ink-2); background: var(--hv-tint); border: 1px solid var(--hv-line); padding: 4px 10px; border-radius: 999px; }
.lp-grid-4 .lp-fit { margin-top: auto; }
.lp-grid-4 .lp-feat p { flex: 0 0 auto; margin-bottom: 1.2rem; }

/* ---------- Process timeline: line draws in on scroll ---------- */
.lp-timeline { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; }
.lp-timeline::before, .lp-timeline::after { content: ''; position: absolute; top: 27px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 2px; }
.lp-timeline::before { background: var(--hv-line); }
.lp-timeline::after { background: linear-gradient(90deg, #2457d6, #0ea5e9); transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(0.45, 0, 0.2, 1) 0.2s; }
.lp-timeline.is-drawn::after { transform: scaleX(1); }
.lp-timeline li { position: relative; z-index: 1; text-align: center; padding: 0 0.6rem; }
.lp-node { width: 56px; height: 56px; margin: 0 auto 1.1rem; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--hv-line); color: var(--hv-ink-3); font-size: 1rem; box-shadow: 0 0 0 6px var(--hv-tint); transition: background 0.4s, border-color 0.4s, color 0.4s, box-shadow 0.4s, transform 0.4s; }
.lp-timeline.is-drawn .lp-node { background: linear-gradient(135deg, #2457d6, #0ea5e9); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px var(--hv-tint), 0 12px 24px -10px rgba(36, 87, 214, 0.7); }
.lp-timeline.is-drawn li:nth-child(1) .lp-node { transition-delay: 0.2s; }
.lp-timeline.is-drawn li:nth-child(2) .lp-node { transition-delay: 0.75s; }
.lp-timeline.is-drawn li:nth-child(3) .lp-node { transition-delay: 1.3s; }
.lp-timeline.is-drawn li:nth-child(4) .lp-node { transition-delay: 1.85s; }
.lp-timeline li:hover .lp-node { transform: translateY(-4px); }
.lp-timeline b { display: block; font-size: 0.75rem; font-weight: 700; color: var(--hv-accent); letter-spacing: 0.08em; margin-bottom: 0.3rem; }
.lp-timeline h3 { font-size: 1.08rem; margin: 0 0 0.4rem; }
.lp-timeline p { color: var(--hv-ink-2); font-size: 0.92rem; line-height: 1.6; max-width: 26ch; margin: 0 auto; }

/* ---------- FAQ accordion ---------- */
.lp-faq { display: grid; gap: 0.7rem; }
.lp-faq details { border-radius: 16px; background: #fff; border: 1px solid var(--hv-line); transition: box-shadow 0.3s, border-color 0.3s; }
.lp-faq details[open] { border-color: #cfdaf0; box-shadow: 0 20px 40px -28px rgba(12, 23, 48, 0.3); }
.lp-faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.3rem; cursor: pointer; font-weight: 600; font-size: 1rem; color: var(--hv-ink); }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: ''; flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--hv-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2v8M2 6h8' stroke='%232457d6' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: transform 0.3s, background-color 0.3s; }
.lp-faq details[open] summary::after { transform: rotate(45deg); background-color: var(--hv-accent-soft); }
.lp-faq details p { margin: 0; padding: 0 1.3rem 1.25rem; color: var(--hv-ink-2); line-height: 1.7; font-size: 0.95rem; animation: lpEnter 0.4s ease forwards; }
.lp-faq a { color: var(--hv-accent); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Final CTA: drifting glow ---------- */
.lp-cta::after { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; bottom: -200px; border-radius: 50%; background: rgba(56, 189, 248, 0.25); filter: blur(70px); animation: lpDrift 14s ease-in-out infinite alternate; pointer-events: none; }
.lp-cta > * { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .lp-timeline::after { transition: none; transform: scaleX(1); }
  .lp-cta::after { animation: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .sx-dark.lp-tech { grid-template-columns: 1fr; }
  .lp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.2rem; }
  .lp-timeline::before, .lp-timeline::after { display: none; }
  .lp-hero-grid { grid-template-columns: 1fr; }
  .lp-hero-copy { padding-top: 0; }
  .lp-hide-desktop { display: inline-flex; }
  .lp-cards, .lp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-work { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .lp-cards, .lp-cards-2, .lp-why { grid-template-columns: 1fr; }
  .lp-stack, .lp-grid-4 { grid-template-columns: 1fr; }
  .lp-work-media { height: 220px; }
}
@media (max-width: 520px) {
  .lp-timeline { grid-template-columns: 1fr; }
  .lp-assure { grid-template-columns: 1fr; }
  .lp-chip span { font-size: 0.8rem; padding: 0.45rem 0.75rem; }
  .ag-wrap { padding: 0.4rem 0; }
  .ag-body { padding: 1.3rem 1.1rem 1.4rem; min-height: 0; }
  .ag-trail em { display: none; }
  .lp-row { grid-template-columns: 1fr; }
  .lp-form-card { padding: 1.25rem; border-radius: 21px; }
  .lp-form-shell { border-radius: 22px; }
}

/* ---------- Homepage hero accents (index.html uses body.lp) ---------- */
.lp-hero h1 em { background: linear-gradient(90deg, #2457d6, #0ea5e9 55%, #6d5bd0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-tech .hv-head a { color: #7dd3fc; text-decoration-color: rgba(125, 211, 252, 0.4); }

/* Homepage cards pick up the landing card treatment */
.lp .hv-case, .lp .hv-model { --mx: 50%; --my: 0%; position: relative; overflow: hidden; isolation: isolate; border-radius: 20px; transition: translate 0.4s cubic-bezier(0.16, 0.8, 0.3, 1), box-shadow 0.4s, border-color 0.4s; }
.lp .hv-case:hover, .lp .hv-model:hover { transform: none; translate: 0 -6px; border-color: #cfdaf0; box-shadow: 0 30px 60px -34px rgba(12, 23, 48, 0.35); }
.lp .hv-case::before, .lp .hv-model::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 0.35s; pointer-events: none; background: radial-gradient(340px circle at var(--mx) var(--my), rgba(56, 189, 248, 0.14), transparent 60%); }
.lp .hv-case:hover::before, .lp .hv-model:hover::before { opacity: 1; }
.lp .hv-model i { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px; color: #fff; font-size: 1rem; background: linear-gradient(135deg, #2457d6, #0ea5e9); box-shadow: 0 10px 22px -10px rgba(36, 87, 214, 0.7); }
.lp .hv-case-tag { align-self: flex-start; font-size: 0.72rem; color: var(--hv-accent); background: var(--hv-accent-soft); padding: 4px 10px; border-radius: 999px; }

/* =========================================================
   Homepage (index.html, body.lp) — hero, products, principles,
   selected work. Prefixed hp-.
   ========================================================= */
.hp-pill { padding: 7px 14px 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.75); border: 1px solid var(--hv-line); backdrop-filter: blur(8px); color: var(--hv-ink-2) !important; }

/* Hero scene: aura, pointer tilt (js/home-fx.js), floating devices, live toasts */
.hp-visual { --rx: 0deg; --ry: 0deg; perspective: 1600px; }
.hp-aura { position: absolute; inset: 4% 0 10%; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none;
  background: radial-gradient(45% 55% at 40% 40%, rgba(56, 189, 248, 0.4), transparent 70%), radial-gradient(40% 50% at 70% 70%, rgba(109, 91, 208, 0.28), transparent 70%); animation: hpAura 9s ease-in-out infinite alternate; }
@keyframes hpAura { to { transform: scale(1.1) translate(-20px, 10px); } }
.hp-visual > .laptop, .hp-visual > .hv-phone { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); transform-style: preserve-3d; }
.hp-visual > .laptop { animation: hpFloat 8s ease-in-out infinite; }
.hp-visual > .hv-phone { animation: hpFloat 7s ease-in-out -3s infinite reverse; }
@keyframes hpFloat { 50% { translate: 0 -10px; } }
.hp-visual .hv-tag { animation: hpBob 6s ease-in-out infinite; }
.hp-visual .hv-tag-b { animation-delay: -3s; }
@keyframes hpBob { 50% { translate: 0 -7px; } }

.hp-toast { position: absolute; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px; background: rgba(255, 255, 255, 0.95); border: 1px solid var(--hv-line); backdrop-filter: blur(10px);
  box-shadow: 0 20px 40px -20px rgba(12, 23, 48, 0.45); opacity: 0; translate: 0 10px; scale: 0.96; animation: hpToast 9s cubic-bezier(0.16, 0.8, 0.3, 1) infinite; }
.hp-toast b { display: block; font-size: 0.8rem; color: var(--hv-ink); line-height: 1.2; }
.hp-toast small { font-size: 0.68rem; color: var(--hv-ink-3); }
.hp-toast-ico { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 0.8rem; background: linear-gradient(135deg, #2457d6, #0ea5e9); }
.hp-violet { background: linear-gradient(135deg, #6d4bd8, #a78bfa); }
.hp-ok { color: #16a34a; margin-left: 4px; }
.hp-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: hpRing 1.6s infinite; flex: 0 0 auto; }
@keyframes hpRing { 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
.hp-toast-a { top: 22%; left: -9%; }
.hp-toast-b { bottom: 30%; right: -3%; animation-delay: 4.5s; }
@keyframes hpToast { 0% { opacity: 0; translate: 0 10px; scale: 0.96; } 6%, 42% { opacity: 1; translate: 0 0; scale: 1; } 50%, 100% { opacity: 0; translate: 0 -6px; scale: 0.98; } }

/* ---------- Product panels ---------- */
.hp-panel { position: relative; overflow: hidden; isolation: isolate; border-radius: 32px; padding: clamp(1.8rem, 4vw, 3.2rem); border: 1px solid; }
.hv-story.hp-panel + .hv-story.hp-panel { margin-top: 1.4rem; padding-top: clamp(1.8rem, 4vw, 3.2rem); border-top: 1px solid; }
.hp-edu { background: linear-gradient(135deg, #f5f8ff 0%, #e7efff 100%); border-color: #dbe6fb !important; --hp-c1: #2457d6; --hp-c2: #0ea5e9; }
.hp-con { background: linear-gradient(135deg, #f8f5ff 0%, #ede7ff 100%); border-color: #e3dcfb !important; --hp-c1: #6d4bd8; --hp-c2: #a78bfa; }
.hp-panel-glow { position: absolute; z-index: -1; width: 520px; height: 520px; right: -140px; top: -200px; border-radius: 50%; filter: blur(80px); opacity: 0.45; background: var(--hp-c2); animation: lpDrift 14s ease-in-out infinite alternate; pointer-events: none; }
.hp-con .hp-panel-glow { right: auto; left: -160px; }
.hp-panel .hv-story-brand img { box-shadow: 0 10px 22px -10px var(--hp-c1); }
.hp-panel .hv-live { padding: 4px 10px; border-radius: 999px; background: rgba(34, 197, 94, 0.12); }
.hp-panel .hv-live::before { animation: hpRing 1.6s infinite; }
.hp-panel .hv-story-media > figure, .hp-panel .hv-story-media > .laptop { animation: hpFloat 8s ease-in-out infinite; }
.hp-panel .hv-media-phones > figure:nth-child(2) { animation-delay: -2.5s; }
.hp-panel .hv-media-phones > figure:nth-child(3) { animation-delay: -5s; }
.hp-panel .device-scene > .device { animation-delay: -3s; }
.hp-feats { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin: 1.4rem 0 1.8rem; padding: 0; }
.hp-feats li { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 0.8rem; border-radius: 14px; font-size: 0.86rem; line-height: 1.4; color: var(--hv-ink-2); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 8px 18px -14px rgba(12, 23, 48, 0.3); transition: translate 0.3s, box-shadow 0.3s; }
.hp-feats li:hover { translate: 0 -2px; box-shadow: 0 14px 24px -14px rgba(12, 23, 48, 0.35); }
.hp-feats i { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #fff; font-size: 0.75rem; background: linear-gradient(135deg, var(--hp-c1), var(--hp-c2)); }
.hp-btn-edu { background: #2457d6 !important; box-shadow: 0 12px 24px -12px rgba(36, 87, 214, 0.7) !important; }
.hp-btn-con { background: #6d4bd8 !important; box-shadow: 0 12px 24px -12px rgba(109, 75, 216, 0.7) !important; }
.hp-btn-edu:hover, .hp-btn-con:hover { background: var(--hv-ink) !important; }

/* CappsAI Business: dark card with a light running around the border */
.hp-upcoming { border: 1.5px solid transparent !important; border-style: solid !important; color: #c9d4ea;
  background: linear-gradient(120deg, #0c1730, #13245a) padding-box, conic-gradient(from var(--lp-angle), rgba(56, 189, 248, 0.15) 0deg, #38bdf8 50deg, rgba(56, 189, 248, 0.15) 100deg, rgba(56, 189, 248, 0.15) 360deg) border-box !important;
  animation: lpSpin 6s linear infinite; }
.hp-upcoming .hv-upcoming-text strong { color: #fff; }
.hp-upcoming .hv-upcoming-icon { background: linear-gradient(135deg, #2457d6, #0ea5e9); color: #fff; }
.hp-upcoming .hv-soon { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.15); color: #7dd3fc; }
.hp-upcoming .hv-upcoming-arrow { color: #7dd3fc; }

/* ---------- Principles grid + IoT radar card ---------- */
.hp-principles { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin: 0; padding: 0; }
.sx-card.hp-pr { padding: 1.7rem 1.5rem 1.6rem; }
.hp-pr h3 { margin: 1.1rem 0 0.4rem; font-size: 1.15rem; }
.hp-pr p { margin: 0; font-size: 0.93rem; }
.hp-num { position: absolute; top: 1rem; right: 1.2rem; font-size: 2.6rem; line-height: 1; font-weight: 700; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(36, 87, 214, 0.25); transition: -webkit-text-stroke-color 0.3s; }
.hp-pr:hover .hp-num { -webkit-text-stroke-color: rgba(36, 87, 214, 0.6); }
.hp-pr:hover .lp-ico { transform: rotate(-8deg) scale(1.08); }
.hp-next { grid-column: 1 / -1; position: relative; overflow: hidden; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; padding: clamp(1.6rem, 3vw, 2.2rem) clamp(1.6rem, 4vw, 2.8rem); border-radius: 24px; color: #a9b6d0;
  background: radial-gradient(90% 140% at 100% 0%, #1d3b8f 0%, #0c1730 60%); box-shadow: 0 40px 80px -44px rgba(12, 23, 48, 0.6); }
.hp-next h3 { color: #fff; font-size: 1.45rem; letter-spacing: -0.02em; margin: 0.7rem 0 0.4rem; }
.hp-next p { margin: 0; line-height: 1.65; max-width: 62ch; }
.hp-soon { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 600; color: #7dd3fc; padding: 5px 12px; border-radius: 999px; background: rgba(125, 211, 252, 0.1); border: 1px solid rgba(125, 211, 252, 0.25); }
.hp-radar { position: relative; width: 170px; height: 170px; border-radius: 50%; overflow: hidden; border: 1px solid rgba(125, 211, 252, 0.3);
  background: repeating-radial-gradient(circle, transparent 0 27px, rgba(125, 211, 252, 0.18) 27px 28px), radial-gradient(circle, rgba(56, 189, 248, 0.12), transparent 70%); }
.hp-radar::before, .hp-radar::after { content: ''; position: absolute; background: rgba(125, 211, 252, 0.18); }
.hp-radar::before { left: 50%; top: 0; bottom: 0; width: 1px; } .hp-radar::after { top: 50%; left: 0; right: 0; height: 1px; }
.hp-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(56, 189, 248, 0.55), rgba(56, 189, 248, 0) 70deg); animation: v3SpinHp 3.6s linear infinite; }
@keyframes v3SpinHp { to { transform: rotate(360deg); } }
.hp-blip { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #f87171; box-shadow: 0 0 10px #f87171; opacity: 0; animation: hpBlip 3.6s ease-out infinite; }
.hp-blip.b1 { left: 64%; top: 26%; animation-delay: 0.3s; } .hp-blip.b2 { left: 30%; top: 62%; animation-delay: 1.9s; background: #fbbf24; box-shadow: 0 0 10px #fbbf24; } .hp-blip.b3 { left: 72%; top: 70%; animation-delay: 2.6s; }
@keyframes hpBlip { 0%, 5% { opacity: 0; transform: scale(0.4); } 10% { opacity: 1; transform: scale(1.3); } 40% { opacity: 0.8; transform: scale(1); } 70%, 100% { opacity: 0; } }
.hp-cam { position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px; display: grid; place-items: center; border-radius: 12px; color: #fff; font-size: 0.85rem; background: linear-gradient(135deg, #2457d6, #0ea5e9); box-shadow: 0 0 24px rgba(14, 165, 233, 0.6); }

/* ---------- Selected work cases ---------- */
.lp .hp-case { padding: 0.75rem 0.75rem 1.7rem; }
.lp .hp-case > *:not(.hp-case-media) { margin-left: 0.85rem; margin-right: 0.85rem; }
.hp-case-media { height: 210px; margin-bottom: 1.3rem; border-radius: 14px; overflow: hidden; border: 1px solid #e6ecf5; }
.hp-case-edu { padding: 1.4rem 1.6rem 0; background: linear-gradient(160deg, #eef4fe, #e3ecfa); }
.hp-case-edu img { width: 100%; height: auto; border-radius: 10px 10px 0 0; box-shadow: 0 18px 40px -20px rgba(12, 23, 48, 0.45); transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); }
.hp-case-con { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem; padding: 1.4rem 1.8rem 0; background: linear-gradient(160deg, #f3efff, #e8e3fb); }
.hp-case-con img { width: 100%; height: auto; border-radius: 16px 16px 0 0; border: 4px solid #0c1730; border-bottom: 0; transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); }
.hp-case-con picture:nth-child(2) img { transform: translateY(-10px); }
.hp-case:hover .hp-case-edu img { transform: scale(1.03); }
.hp-case:hover .hp-case-con picture:nth-child(1) img { transform: translateY(-6px) rotate(-2deg); }
.hp-case:hover .hp-case-con picture:nth-child(3) img { transform: translateY(-6px) rotate(2deg); }
.lp .hp-case dl { grid-template-columns: 110px 1fr; }
.lp .hp-case dt { display: flex; align-items: center; gap: 6px; }
.lp .hp-case dt .fa-exclamation-triangle { color: #d97706; }
.lp .hp-case dt .fa-check-circle { color: #16a34a; }

@media (prefers-reduced-motion: reduce) {
  .hp-aura, .hp-visual > .laptop, .hp-visual > .hv-phone, .hp-visual .hv-tag, .hp-panel-glow, .hp-panel .hv-story-media > *, .hp-upcoming, .hp-sweep, .hp-blip, .hp-live-dot { animation: none !important; }
  .hp-toast { animation: none; opacity: 1; translate: none; scale: none; }
  .hp-toast-b { display: none; }
}
@media (max-width: 1080px) {
  .hp-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-toast-a { left: 0; }
  .hp-toast-b { right: 0; }
}
@media (max-width: 640px) {
  .hp-principles, .hp-feats { grid-template-columns: 1fr; }
  .hp-next { grid-template-columns: 1fr; justify-items: start; }
  .hp-radar { width: 140px; height: 140px; }
  .hp-toast { padding: 7px 10px 7px 7px; }
  .hp-toast-ico { width: 26px; height: 26px; }
  .hp-toast-b { display: none; }
  .hp-case-media { height: 170px; }
  .lp .hp-case dl { grid-template-columns: 1fr; }
}

/* Homepage hero copy: animated "We build …" line, tighter rhythm */
.lp-hero .hv-hero-copy h1 { font-size: clamp(2.5rem, 4.4vw, 4rem); margin-bottom: 0.9rem; }
.hp-rotline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4em; margin: 0 0 1.2rem; font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; color: var(--hv-ink); }
.hp-rot { display: inline-block; height: 1.12em; line-height: 1.12; }
.hp-rot .lp-rot-track span { height: 1.12em; line-height: 1.12; padding-bottom: 0; }
.hp-makers { margin: 1.6rem 0 0; }
.hp-livepill { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: #15803d; padding: 4px 11px; border-radius: 999px; background: rgba(34, 197, 94, 0.1); }

/* ---------- Homepage hero: extra motion layer ---------- */
/* Headline words rise in (js/home-fx.js adds .hp-split) */
.hp-split .hp-w { display: inline-block; transform: translateY(0.3em); animation: hpWord 0.85s cubic-bezier(0.16, 0.8, 0.3, 1) forwards; animation-delay: calc(0.15s + var(--i) * 0.07s); }
@keyframes hpWord { to { opacity: 1; transform: none; filter: none; } }
.lp-hero .hp-split em { background: none; color: inherit; }
.lp-hero .hp-h1 em .hp-w, .lp-hero .hp-h1:not(.hp-split) em { background: linear-gradient(90deg, #2457d6, #0ea5e9, #6d5bd0, #2457d6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hpWord 0.85s cubic-bezier(0.16, 0.8, 0.3, 1) forwards calc(0.15s + var(--i, 0) * 0.07s), sxShine 7s linear 1.2s infinite; }
.lp-hero .hp-h1:not(.hp-split) em { animation: sxShine 7s linear infinite; }

/* Cursor spotlight and drifting particles */
.hp-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(520px circle at var(--hx, 50%) var(--hy, 30%), rgba(56, 189, 248, 0.16), transparent 60%); }
.hp-lit .hp-spot { opacity: 1; }
.hp-particles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hp-particles i { position: absolute; bottom: -12px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(56, 189, 248, 0.7); box-shadow: 0 0 10px rgba(56, 189, 248, 0.8); opacity: 0; animation: hpRise var(--t) linear var(--d) infinite; }
.hp-particles i:nth-child(3n) { background: rgba(109, 91, 208, 0.6); box-shadow: 0 0 10px rgba(109, 91, 208, 0.7); }
@keyframes hpRise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 0.8; } 85% { opacity: 0.4; } 100% { transform: translateY(-900px) translateX(30px); opacity: 0; } }

/* Glowing ring behind the devices + floating glass tiles with depth */
.hp-ring { position: absolute; z-index: -1; left: 12%; top: -8%; width: 78%; aspect-ratio: 1; border-radius: 50%; filter: blur(46px); opacity: 0.7; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(56, 189, 248, 0.55) 60deg, transparent 130deg, rgba(109, 91, 208, 0.45) 220deg, transparent 300deg); animation: v3SpinHp 18s linear infinite; }
.hp-float { position: absolute; z-index: 4; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; font-size: 1.1rem; color: #2457d6;
  background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); box-shadow: 0 18px 36px -18px rgba(36, 87, 214, 0.55);
  transform: translate(calc(var(--px, 0px) * 1.6), calc(var(--py, 0px) * 1.6)); transition: transform 0.6s cubic-bezier(0.16, 0.8, 0.3, 1); animation: hpBob 6s ease-in-out infinite; }
.hp-float i { background: linear-gradient(135deg, #2457d6, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hp-float.f1 { top: -6%; left: 18%; animation-delay: -1s; }
.hp-float.f2 { top: 40%; right: -5%; width: 46px; height: 46px; animation-delay: -3s; transform: translate(calc(var(--px, 0px) * 2.4), calc(var(--py, 0px) * 2.4)); }
.hp-float.f2 i { background-image: linear-gradient(135deg, #6d4bd8, #a78bfa); }
.hp-float.f3 { bottom: 0; right: 12%; width: 44px; height: 44px; font-size: 0.95rem; animation-delay: -4.5s; transform: translate(calc(var(--px, 0px) * 1.1), calc(var(--py, 0px) * 1.1)); }

/* Primary CTA glow + light sweep */
.hp-cta { position: relative; overflow: hidden; box-shadow: 0 16px 32px -14px rgba(36, 87, 214, 0.65) !important; }
.hp-cta::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.28), transparent); animation: lpShine 4.5s ease-in-out 2s infinite; }
.hp-cta i { transition: transform 0.25s; }
.hp-cta:hover i { transform: translateX(4px); }

/* Stats strip: gradient numbers, lift on hover */
.lp-hero .hv-proof b { background: linear-gradient(90deg, #0c1730 30%, #2457d6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-hero .hv-proof li { transition: translate 0.3s; }
.lp-hero .hv-proof li:hover { translate: 0 -3px; }

@media (prefers-reduced-motion: reduce) {
  .hp-particles, .hp-spot { display: none; }
  .hp-ring, .hp-float, .hp-cta::after, .lp-hero .hp-h1 em { animation: none !important; }
}
@media (max-width: 720px) {
  .hp-float.f2 { right: 0; }
  .hp-float { width: 42px; height: 42px; font-size: 0.9rem; border-radius: 13px; }
}
@media (max-width: 480px) { .hp-pill-extra { display: none; } }

/* ---------- Homepage hero visual: layout pass (Oct 2026) ----------
   Laptop is the anchor; phone hangs off its bottom-left, the Studio window off its bottom-right,
   each with its own label on its corner. Both toasts share one "notification" slot over the
   laptop screen and take turns (hpToast already offsets them by 4.5s), so neither covers the
   phone or hides behind the Studio window. Nothing pokes past the visual's edges, so it can't
   be clipped by the viewport. Scoped to .hp-visual (homepage only). */
.hp-visual .hv-phone.device { width: 25%; left: -3%; right: auto; bottom: 0; z-index: 2; }
.hp-visual .hp-studio-win { width: 40%; right: -1%; bottom: -5%; }
.hp-visual .hv-tag-a { top: -16px; right: 8%; }
.hp-visual .hv-tag-b { left: -1%; bottom: -3%; z-index: 4; }
.hp-visual .hp-toast-a, .hp-visual .hp-toast-b { top: 20%; left: 26%; right: auto; bottom: auto; z-index: 4; }
.hp-visual .hp-float.f1 { top: -7%; left: 14%; }
.hp-visual .hp-float.f2 { top: 34%; right: -1%; }
.hp-visual .hp-float.f3 { display: none; }
.hp-studio-tag-extra { display: contents; }
@media (min-width: 1081px) and (max-width: 1240px) { .hp-visual .hp-studio-tag-extra { display: none; } }
@media (prefers-reduced-motion: reduce) { .hp-visual .hp-toast-b { display: none; } }
@media (max-width: 1080px) {
  .hp-visual .hp-toast-a, .hp-visual .hp-toast-b { left: 28%; }
}
@media (max-width: 720px) {
  .home-v2 .hp-visual { padding-bottom: 14%; }
  .hp-visual .hv-phone.device { width: 27%; left: 0; }
  .hp-visual .hp-studio-win { width: 50%; right: 0; bottom: -6%; }
  .hp-visual .hv-tag-b { left: 0; bottom: -6%; }
  .hp-visual .hp-toast-a, .hp-visual .hp-toast-b { top: 14%; left: 24%; }
  .hp-visual .hp-float.f1 { left: 4%; top: -8%; }
  .hp-visual .hp-float.f2 { top: 30%; right: 0; }
}
@media (max-width: 640px) {
  .hp-visual .hp-studio-tag { left: -10px; right: auto; bottom: -12px; }
  .hp-visual .hp-studio-tag-extra { display: none; }
  .hp-visual .hp-toast-b { display: flex; }
  .hp-visual .hp-toast b { font-size: 0.72rem; }
  .hp-visual .hp-toast small { font-size: 0.62rem; }
}