/* ============================================================================
   Homepage hero preview — "one question" hero in four takes (see hero-q.php).
   Shared form pieces are .hv-*, the hero itself .hq-*.
   ========================================================================== */

/* ---------- shared ---------- */
.hv { position: relative; overflow: hidden; isolation: isolate; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.hv *, .hv *::before, .hv *::after { box-sizing: border-box; }
.hv-tag {
  position: absolute; z-index: 20; top: 16px; left: 16px; margin: 0;
  padding: 6px 12px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: #E8590C; box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.hq-a .hv-tag { top: 86px; }

.hv-step-q { margin: 0 0 12px; padding: 0; font-size: 1.05rem; font-weight: 800; color: #0B1324; }
.hv-step-q small, .hv-field label small { font-size: .75rem; font-weight: 600; color: #8090A8; margin-left: 4px; }
.hv-q { margin-bottom: 12px; }
.hv-q-label { margin: 0 0 8px; font-size: .8rem; font-weight: 700; color: #4A5876; }
.hv-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.hv-pill { position: relative; cursor: pointer; }
.hv-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hv-pill span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: .86rem; font-weight: 600; color: #22304A; background: #F3F6FB; border: 1.5px solid #E0E6F0; transition: background .18s, border-color .18s, color .18s, transform .18s; }
.hv-pill kbd { display: none; }
.hv-pill:hover span { border-color: #9DBBF5; }
.hv-pill input:checked + span { color: #fff; background: #0B5FFF; border-color: #0B5FFF; }
.hv-pill input:focus-visible + span { outline: 3px solid #9DBBF5; outline-offset: 2px; }

.hv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hv-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.hv-field label { font-size: .8rem; font-weight: 700; color: #22304A; }
.hv-field label span { color: #0B5FFF; }
.hv .hv-field input, .hv .hv-phone select {
  width: 100%; min-height: 46px; margin: 0; padding: 11px 13px; border-radius: 11px;
  font: inherit; font-size: .93rem; color: #0B1324; background: #F5F7FB; border: 1.5px solid #E0E6F0;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.hv .hv-field input:focus, .hv .hv-phone select:focus { outline: 0; background: #fff; border-color: #0B5FFF; box-shadow: 0 0 0 4px rgba(11,95,255,.13); }
.hv .hv-phone { display: flex; flex-wrap: nowrap; gap: 8px; }
.hv .hv-phone > select, .hv .hv-phone > .wm-cc { flex: 0 0 92px; width: 92px; }
.hv .hv-phone > input { flex: 1 1 0; width: auto; min-width: 0; }
.hv-consent { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; font-size: .78rem; line-height: 1.5; color: #56637C; }
.hv-consent input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #0B5FFF; }
.hv-consent a { color: #0B5FFF; }
.hv-err { margin: 10px 0 0; font-size: .82rem; font-weight: 600; color: #C2410C; }
.hv-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hv-summary button { padding: 5px 11px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; color: #0B5FFF; background: #E8F0FF; }
.hv-summary button:hover { background: #D5E4FF; }

[data-wz-price][hidden] { display: none !important; }

/* JS on: show only the chosen service's questions and the chosen currency. */
.hv-js .hv-ask { display: none; }
.hv-js .hv-ask.is-on { display: block; }
.hv-js .hv-budget { display: none; }
.hv-js .hv-budget.is-on { display: block; }

/* ============================================================================
   "One question" hero — four takes (.hq-a Aurora, .hq-b Midnight, .hq-c Studio,
   .hq-d Fullscreen). Shared layout first, then each take's palette and extras.
   ========================================================================== */
.hq {
  --bg: #F7F9FC; --ink: #0B1324; --muted: #55627B; --card: #fff; --cardink: #0B1324;
  --line: #E3E8F1; --opt: #fff; --optline: #DDE4F0; --soft: #F3F6FB; --accent: #0B5FFF; --accent2: #22C79A;
  position: relative; overflow: hidden; isolation: isolate;
  padding-block: 92px 64px; background: var(--bg); color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.hq *, .hq *::before, .hq *::after { box-sizing: border-box; }
.hq-a { padding-top: 128px; }
.hq-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hq-inner { max-width: 940px; margin: 0 auto; padding-inline: 20px; }
.hq-head { text-align: center; }
.hq-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: var(--card); border: 1px solid var(--line); }
.hq-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 0 0 rgba(34,199,154,.5); animation: hq-ping 2.2s ease-out infinite; }
.hq-title { margin: 18px auto 0; max-width: 20ch; font-family: "Bricolage Grotesque", Inter, sans-serif; font-weight: 800; font-size: clamp(2.1rem, 1.2rem + 3vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; animation: hq-rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hq-sub { margin: 16px auto 0; max-width: 60ch; font-size: 1.04rem; line-height: 1.65; color: var(--muted); animation: hq-rise .8s .08s cubic-bezier(.2,.8,.2,1) both; }

.hq-card { position: relative; margin: 34px auto 0; max-width: 860px; padding: 26px 32px 22px; border-radius: 28px; color: var(--cardink); background: var(--card); border: 1px solid var(--line); box-shadow: 0 40px 90px rgba(16,32,72,.12); animation: hq-rise .9s .14s cubic-bezier(.2,.8,.2,1) both; }
.hq-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.hq-ftitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; font-size: .9rem; font-weight: 800; color: var(--accent); }
.hq-ftitle span { font-weight: 500; color: var(--muted); }
.hq-count { flex: 0 0 auto; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cardink); }
.hq-track { height: 6px; margin: 14px 0 24px; border-radius: 6px; background: var(--soft); overflow: hidden; }
.hq-track i, .hq .topbar b { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .5s cubic-bezier(.2,.8,.2,1); }

.hq-step { margin: 0; padding: 0; border: 0; min-width: 0; min-height: 270px; }
.hv-js .hq-step:not(.is-on) { display: none; }
.hv-js .hq-step.is-on { animation: hq-in .5s cubic-bezier(.2,.8,.2,1) both; }
.hv-js .hq-step.from-back { animation-name: hq-in-back; }
.hq-q { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem); font-weight: 800; letter-spacing: -.02em; color: var(--cardink); }
.hq-q b { display: grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px; font-size: .9rem; color: #fff; background: var(--accent); }

.hq-tabs { position: relative; display: inline-flex; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 13px; background: var(--soft); }
.hq-tab { position: relative; z-index: 1; padding: 9px 18px; border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; color: var(--muted); background: transparent; transition: color .2s, background .25s, box-shadow .25s; }
.hq-tab[aria-selected="true"] { color: var(--cardink); background: var(--card); box-shadow: 0 4px 12px rgba(16,32,72,.12); }
.hq-tab:focus-visible { outline: 3px solid #9DBBF5; outline-offset: 2px; }
.hq-tab-ink { display: none; }
.hq:not(.hv-js) .hq-tabs { display: none; }
.hq[data-cat="web"] .hq-opt[data-cat="mkt"], .hq[data-cat="mkt"] .hq-opt[data-cat="web"] { display: none; }
.hq:not(.hv-js) .hq-opt[data-cat] { display: flex; }

.hq-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hq-opt { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer; background: var(--opt); border: 1.5px solid var(--optline); transition: border-color .15s, background .15s, transform .15s, box-shadow .15s; }
.hq-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.hq-opt:hover { border-color: var(--accent); transform: translateY(-1px); }
.hq-opt:hover .hq-opt-ic svg { animation: hq-wiggle .5s ease; }
.hv-js .hq-step.is-on .hq-opt { animation: hq-rise .45s cubic-bezier(.2,.8,.2,1) both; }
.hv-js .hq-step.is-on .hq-opt:nth-child(2) { animation-delay: .03s; } .hv-js .hq-step.is-on .hq-opt:nth-child(3) { animation-delay: .06s; }
.hv-js .hq-step.is-on .hq-opt:nth-child(4) { animation-delay: .09s; } .hv-js .hq-step.is-on .hq-opt:nth-child(5) { animation-delay: .12s; }
.hv-js .hq-step.is-on .hq-opt:nth-child(6) { animation-delay: .15s; } .hv-js .hq-step.is-on .hq-opt:nth-child(7) { animation-delay: .18s; }
.hv-js .hq-step.is-on .hq-opt:nth-child(8) { animation-delay: .21s; }
.hq-opt kbd, .hq .hv-pill kbd { display: grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 7px; font: inherit; font-size: .76rem; font-weight: 800; color: var(--accent); background: var(--card); border: 1.5px solid var(--optline); }
.hq-opt-ic { flex: 0 0 auto; display: grid; place-items: center; color: var(--accent); }
.hq-opt-t { display: grid; font-size: .95rem; font-weight: 700; line-height: 1.25; color: var(--cardink); }
.hq-opt-t small { font-size: .76rem; font-weight: 500; color: var(--muted); }
.hq-opt:has(input:checked) { background: var(--accent); border-color: var(--accent); box-shadow: 0 12px 26px rgba(11,95,255,.28); }
.hq-opt:has(input:checked) .hq-opt-t, .hq-opt:has(input:checked) .hq-opt-t small, .hq-opt:has(input:checked) .hq-opt-ic { color: #fff; }
.hq-opt:has(input:checked) kbd { border-color: #fff; color: var(--accent); background: #fff; }
.hq-opt:has(input:focus-visible) { outline: 3px solid #9DBBF5; outline-offset: 2px; }
.hq-options-sm .hq-opt { padding: 12px 14px; }

.hq .hv-q-label { color: var(--muted); }
.hq .hv-pill span { padding: 8px 14px 8px 8px; border-radius: 12px; color: var(--cardink); background: var(--opt); border-color: var(--optline); }
.hq .hv-pill kbd { display: grid; }
.hq .hv-pill input:checked + span { color: #fff; background: var(--accent); border-color: var(--accent); }
.hq .hv-pill input:checked + span kbd { border-color: #fff; }
.hq-price { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: -4px 0 16px; padding: 10px 14px; border-radius: 12px; font-size: .88rem; color: var(--cardink); background: var(--soft); }
.hq-price span { font-weight: 800; color: var(--accent); }
.hq-price b { font-weight: 600; }

.hq-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; padding: 17px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); box-shadow: 0 14px 34px rgba(11,95,255,.35); }
.hq-submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-20deg); animation: hq-shine 4s ease-in-out 1s infinite; }
.hq-submit svg { transition: transform .2s; }
.hq-submit:hover svg { transform: translateX(4px); }
.hq-nav { display: flex; align-items: center; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.hq-back { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; cursor: pointer; color: var(--muted); background: transparent; border: 1.5px solid var(--optline); }
.hq-back:hover { color: var(--accent); border-color: var(--accent); }
.hq-hint { flex: 1; font-size: .78rem; color: var(--muted); }
.hq-hint kbd { padding: 1px 6px; border-radius: 5px; font: inherit; font-weight: 700; border: 1px solid var(--optline); }
.hq-next { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-weight: 800; color: #fff; background: var(--cardink); transition: background .2s; }
.hq-next:hover { background: var(--accent); }
.hq:not(.hv-js) .hq-nav { display: none; }
.hq[data-step="1"] .hq-back { visibility: hidden; }
.hq[data-step="4"] .hq-next, .hq[data-step="4"] .hq-hint { visibility: hidden; }

.hq-below { display: grid; justify-items: center; gap: 14px; margin-top: 26px; text-align: center; }
.hq .hq-wa { display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 999px; font-weight: 700; color: var(--cardink); background: var(--card); border: 1px solid var(--line); text-decoration: none; box-shadow: 0 10px 26px rgba(16,32,72,.1); transition: transform .2s; }
.hq .hq-wa svg { color: #128C4A; }
.hq .hq-wa:hover { transform: translateY(-2px); color: var(--cardink); }
.hq-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.hq-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: var(--muted); }
.hq-chips svg { color: var(--accent2); }
.hq-foot { margin: 0; font-size: .76rem; color: var(--muted); opacity: .8; }

/* fields inside the card follow the take's palette */
.hq .hv-field label { color: var(--cardink); }
.hq .hv-consent { color: var(--muted); }

/* ---------- 4A (chosen) — white top, brand-blue stage under the card ---------- */
.hq-a { --bg: #FFFFFF; padding-bottom: 72px; }
.hq-a .top-glow { position: absolute; left: 50%; top: -260px; width: 900px; height: 520px; margin-left: -450px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,95,255,.10), transparent); }
.hq-a .stage { position: absolute; left: 16px; right: 16px; top: 600px; bottom: 0; border-radius: 40px 40px 0 0; background: linear-gradient(160deg, #1D6BFF 0%, #0B5FFF 45%, #0A3FC0 100%); }
.hq-a .stage-dots { position: absolute; left: 16px; right: 16px; top: 600px; bottom: 0; border-radius: 40px 40px 0 0; background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%); mask-image: linear-gradient(180deg, #000, transparent 85%); animation: hq-dots 30s linear infinite; }
.hq-a .stage-glow { position: absolute; left: 6%; bottom: -140px; width: 520px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(46,230,181,.45), transparent); filter: blur(10px); animation: hq-breathe 9s ease-in-out infinite; }
.hq-a .hq-card { border: 0; box-shadow: 0 50px 110px rgba(8,36,120,.28), 0 0 0 1px rgba(11,95,255,.08); }
.hq-a .hq-below .hq-wa { border: 0; box-shadow: 0 14px 30px rgba(4,20,80,.25); }
.hq-a .hq-chips li { color: rgba(255,255,255,.92); }
.hq-a .hq-chips svg { color: #7DF0CF; }
.hq-a .hq-foot { color: rgba(255,255,255,.75); opacity: 1; }
.hq-brand { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; text-transform: none; color: #0B5FFF; }
.hq-brand b { color: #0B1324; font-weight: 800; }
.hq-eyebrow .hq-brand + i { margin-left: 4px; }
.hq-mark { background: linear-gradient(90deg, #0B5FFF, #2F7BFF 60%, #0B5FFF); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: hq-sheen 6s ease-in-out infinite; }
.hq-rail { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 14px 0 24px; padding: 0; }
.hq-rail li { display: grid; gap: 7px; font-size: .74rem; font-weight: 700; color: var(--muted); }
.hq-rail i { position: relative; display: block; height: 5px; border-radius: 5px; background: var(--soft); overflow: hidden; }
.hq-rail i::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hq-rail li.is-on, .hq-rail li.is-done { color: var(--cardink); }
.hq-rail li.is-done i::after { transform: scaleX(1); }
.hq-rail li.is-on i::after { transform: scaleX(.5); }

/* ---------- 4B Midnight ---------- */
.hq-b { --bg: #05070D; --ink: #F3F6FF; --muted: #95A2BF; --card: rgba(255,255,255,.04); --cardink: #F3F6FF; --line: rgba(255,255,255,.1); --opt: rgba(255,255,255,.03); --optline: rgba(255,255,255,.12); --soft: rgba(255,255,255,.06); --accent: #3B82FF; --accent2: #2EE6B5; }
.hq-b .spot { position: absolute; left: 50%; top: -340px; width: 1100px; height: 700px; margin-left: -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(59,130,255,.32), transparent); animation: hq-breathe 8s ease-in-out infinite; }
.hq-b .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%); }
.hq-b .noise { position: absolute; inset: 0; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hq-b .hq-eyebrow { background: rgba(255,255,255,.05); }
.hq-b .hq-title { background: linear-gradient(180deg, #fff 30%, #9DB4E6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hq-b .hq-card { -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 40px 100px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.hq-b .hq-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(59,130,255,.16), transparent 60%); }
.hq-b .hq-opt::before { content: ""; position: absolute; inset: -1.5px; border-radius: 15px; padding: 1.5px; opacity: 0; background: conic-gradient(from var(--hq-a, 0deg), #3B82FF, #2EE6B5, #3B82FF); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .2s; }
.hq-b .hq-opt:hover::before { opacity: 1; animation: hq-spin 2.4s linear infinite; }
.hq-b .hq-opt:hover { border-color: transparent; background: rgba(255,255,255,.05); }
.hq-b .hq-next { color: #05070D; background: #fff; }
.hq-b .hq-next:hover { color: #fff; }
.hq-b .hq-tab[aria-selected="true"] { background: rgba(255,255,255,.12); box-shadow: none; }
.hq-b .hv-field input, .hq-b .hv-phone select, .hq-b .wm-cc-btn { color: #F3F6FF !important; background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.14) !important; }
.hq-b .hv-field input::placeholder { color: #6F7C99; }
.hq-b .hv-summary button { color: #CFE0FF; background: rgba(59,130,255,.2); }
.hq-b .hq .hq-wa, .hq-b .hq-wa { background: rgba(255,255,255,.06); }
@property --hq-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- 4C Studio ---------- */
.hq-c { --bg: #EEF3FF; }
.hq-c { background: linear-gradient(180deg, #EAF1FF 0%, #F8FAFF 100%); }
.hq-c .blob { position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,95,255,.16), transparent); animation: hq-breathe 10s ease-in-out infinite; }
.hq-c .ring { position: absolute; border: 1px solid rgba(11,95,255,.12); border-radius: 50%; }
.hq-c .r1 { left: -160px; bottom: -220px; width: 520px; height: 520px; animation: hq-turn 60s linear infinite; border-style: dashed; }
.hq-c .r2 { left: -60px; bottom: -120px; width: 320px; height: 320px; }
.hq-c .hq-inner { max-width: 1100px; }
.hq-c .hq-card { display: grid; grid-template-columns: 320px minmax(0, 1fr); max-width: 1060px; padding: 0; overflow: hidden; }
.hq-c .hq-main { padding: 26px 32px 22px; }
.hq-art { position: relative; display: grid; align-content: space-between; padding: 26px; color: #fff; background: linear-gradient(160deg, #2F7BFF 0%, #0B5FFF 55%, #0A3FC0 100%); overflow: hidden; }
.hq-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(260px 200px at 80% 10%, rgba(255,255,255,.22), transparent 70%); pointer-events: none; }
.hq-art .scene { position: absolute; inset: 26px 26px 90px; display: grid; place-items: center; opacity: 0; transform: scale(.94); transition: opacity .45s, transform .45s; }
.hq-c[data-step="1"] .s1, .hq-c[data-step="2"] .s2, .hq-c[data-step="3"] .s3, .hq-c[data-step="4"] .s4, .hq-c:not(.hv-js) .s1 { opacity: 1; transform: none; }
.hq-art .tiles { display: grid; grid-template-columns: repeat(3, 56px); gap: 12px; }
.hq-art .tiles span { height: 56px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); animation: hq-tile 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); }
.hq-art svg { width: 100%; max-width: 220px; height: auto; overflow: visible; }
.hq-art .globe { fill: rgba(255,255,255,.1); stroke: rgba(255,255,255,.6); stroke-width: 1.5; }
.hq-art .mer, .hq-art .lat { fill: none; stroke: rgba(255,255,255,.35); stroke-width: 1.2; }
.hq-art .m1 { animation: hq-mer 6s ease-in-out infinite; transform-origin: 100px 100px; }
.hq-art .m2 { animation: hq-mer 6s ease-in-out -3s infinite; transform-origin: 100px 100px; }
.hq-art .pin { fill: #FFD166; animation: hq-pop 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hq-art .p2 { fill: #7DF0CF; animation-delay: .6s; } .hq-art .p3 { fill: #fff; animation-delay: 1.2s; }
.hq-art .bars { display: flex; align-items: flex-end; gap: 12px; height: 160px; }
.hq-art .bars span { width: 28px; height: var(--h); border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #7DF0CF, rgba(255,255,255,.35)); transform-origin: bottom; animation: hq-bar 3s ease-in-out infinite; animation-delay: calc(var(--i) * .15s); }
.hq-art .trail { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-dasharray: 6 7; }
.hq-art .plane path { fill: #fff; }
.hq-art .plane { offset-path: path("M20 130 C70 120 90 40 170 30"); offset-rotate: auto; animation: hq-fly 3.2s ease-in-out infinite; }
.hq-art .inbox { fill: none; stroke: #7DF0CF; stroke-width: 2; }
.hq-art-cap { position: relative; z-index: 1; list-style: none; margin: auto 0 0; padding: 0; }
.hq-art-cap li { display: none; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.25rem; font-weight: 800; line-height: 1.25; }
.hq-c[data-step="1"] [data-cap="1"], .hq-c[data-step="2"] [data-cap="2"], .hq-c[data-step="3"] [data-cap="3"], .hq-c[data-step="4"] [data-cap="4"], .hq-c:not(.hv-js) [data-cap="1"] { display: block; animation: hq-rise .5s cubic-bezier(.2,.8,.2,1) both; }

/* ---------- 4D Fullscreen ---------- */
.hq-d { --bg: #FBFBFD; padding-block: 96px 64px; }
.hq-d .ghost { position: absolute; right: -2vw; top: 40px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-style: normal; font-size: clamp(12rem, 26vw, 24rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; color: #EDF1F8; transition: opacity .3s; }
.hq-d .topbar { position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #EDF1F8; }
.hq-d .hq-inner { max-width: 1160px; }
.hq-d .hq-head { text-align: left; }
.hq-d .hq-title { margin-left: 0; max-width: 18ch; font-size: clamp(2.2rem, 1.2rem + 3.2vw, 4rem); }
.hq-d .hq-sub { margin-left: 0; }
.hq-d .hq-card { max-width: none; margin-top: 36px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hq-d .hq-top { padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.hq-d .hq-q { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); margin-bottom: 22px; }
.hq-d .hq-q b { width: 40px; height: 40px; border-radius: 12px; font-size: 1rem; }
.hq-d .hq-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hq-d .hq-opt { padding: 16px 16px; border-radius: 16px; background: #fff; box-shadow: 0 2px 0 rgba(16,32,72,.04); }
.hq-d .hq-opt-t { font-size: 1.02rem; }
.hq-d .hq-below { justify-items: start; text-align: left; }
.hq-d .hq-chips { justify-content: flex-start; }
.hq-d .hv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
.hq-d .hq-submit { max-width: 760px; }

/* ---------- motion ---------- */
@keyframes hq-rise     { from { opacity: 0; transform: translateY(14px); } }
@keyframes hq-dots     { to { background-position: 22px 22px; } }
@keyframes hq-sheen    { 50% { background-position: 100% 0; } }
@keyframes hq-in       { from { opacity: 0; transform: translateY(22px); } }
@keyframes hq-in-back  { from { opacity: 0; transform: translateY(-22px); } }
@keyframes hq-ping     { 0% { box-shadow: 0 0 0 0 rgba(34,199,154,.5); } 100% { box-shadow: 0 0 0 10px rgba(34,199,154,0); } }
@keyframes hq-shine    { 0%, 70% { left: -60%; } 100% { left: 130%; } }
@keyframes hq-wiggle   { 30% { transform: rotate(-12deg) scale(1.1); } 60% { transform: rotate(8deg); } }
@keyframes hq-aur1     { to { transform: translateX(12%) rotate(-2deg); } }
@keyframes hq-aur2     { to { transform: translateX(-14%) rotate(4deg); } }
@keyframes hq-breathe  { 50% { opacity: .65; transform: scale(1.06); } }
@keyframes hq-spin     { to { --hq-a: 360deg; } }
@keyframes hq-turn     { to { transform: rotate(360deg); } }
@keyframes hq-tile     { 0%, 70%, 100% { background: rgba(255,255,255,.14); transform: none; } 15%, 35% { background: rgba(255,255,255,.95); transform: scale(1.06); } }
@keyframes hq-mer      { 50% { transform: scaleX(.3); } }
@keyframes hq-pop      { 50% { transform: scale(1.5); } }
@keyframes hq-bar      { 50% { transform: scaleY(.6); } }
@keyframes hq-fly      { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hq-c .hq-card { grid-template-columns: minmax(0, 1fr); }
  .hq-art { min-height: 0; padding: 18px 22px; }
  .hq-art .scene { display: none; }
  .hq-art-cap li { font-size: 1.05rem; }
  .hq-d .hq-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .hq { padding-block: 72px 48px; }
  .hq-a { padding-top: 108px; }
  .hq-card { padding: 20px 18px; border-radius: 22px; }
  .hq-c .hq-main { padding: 20px 18px; }
  .hq-options, .hq-d .hq-options { grid-template-columns: minmax(0, 1fr); }
  .hq-hint, .hq-ftitle span { display: none; }
  .hq-step { min-height: 0; }
  .hq-rail li { font-size: .66rem; }
  .hq-d .ghost { font-size: 9rem; top: 20px; }
  .hq-d .hv-fields { grid-template-columns: minmax(0, 1fr); }
}
/* Chosen hero on phones: brand line and heading, then the form straight away;
   the longer subtitle, WhatsApp and promises follow the form. */
@media (max-width: 720px) {
  .hq-a { padding-top: 96px; }
  .hq-a .hq-inner { display: flex; flex-direction: column; }
  .hq-a .hq-head { display: contents; }
  .hq-a .hq-eyebrow { order: 1; align-self: center; font-size: .66rem; padding: 6px 12px; gap: 7px; }
  .hq-a .hq-brand { font-size: .9rem; }
  .hq-a .hq-title { order: 2; margin-top: 14px; font-size: clamp(1.75rem, 1.2rem + 3vw, 2.2rem); text-align: center; }
  .hq-a .hq-card { order: 3; margin-top: 20px; }
  .hq-a .hq-sub { order: 4; margin-top: 24px; text-align: center; color: rgba(255,255,255,.9); }
  .hq-a .hq-below { order: 5; }
  .hq-a .stage, .hq-a .stage-dots { top: 330px; left: 0; right: 0; border-radius: 28px 28px 0 0; }
  .hq-a .hq-q { font-size: 1.25rem; }
  .hq-a .hq-step { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hq *, .hq *::before, .hq *::after { animation: none !important; transition: none !important; }
}

/* Steps move focus to their question for screen readers; no ring for that. */
.hq-q:focus, .hq-q:focus-visible { outline: none; }
.hq-d .ghost { right: 1vw; }
/* Decorative shapes sit outside the box; clip (not just hide) so focusing a
   field can never scroll the section sideways. */
.hq { overflow: hidden; overflow: clip; }

/* ============================================================================
   "Sentence" hero (concept 1) — four light takes: .hs-a Classic+, .hs-b Chat,
   .hs-c Big type, .hs-d Live quote.
   ========================================================================== */
.hs { --ink: #0B1324; --muted: #55627B; --blue: #0B5FFF; --mint: #18B47B; --line: #E5EAF2; --soft: #F3F6FB;
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding-block: 92px 72px; background: #F7F9FC; color: var(--ink); }
.hs-a { padding-top: 132px; }
.hs-a .hv-tag { top: 86px; }
.hs-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hs-inner { max-width: 1000px; margin: 0 auto; padding-inline: 20px; }
.hs-head { text-align: center; }
.hs-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); background: #fff; border: 1px solid var(--line); animation: hq-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.hs-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); animation: hq-ping 2.2s ease-out infinite; }
.hs-title { margin: 20px auto 0; max-width: 17ch; font-family: "Bricolage Grotesque", Inter, sans-serif; font-weight: 800; font-size: clamp(2.3rem, 1.2rem + 3.8vw, 4.4rem); line-height: 1.03; letter-spacing: -.04em; color: var(--ink); text-wrap: balance; animation: hq-rise .7s .05s cubic-bezier(.2,.8,.2,1) both; }
.hs-mark { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--blue); }
.hs-sub { margin: 18px auto 0; max-width: 58ch; font-size: clamp(1rem, .95rem + .3vw, 1.13rem); line-height: 1.7; color: var(--muted); animation: hq-rise .7s .1s cubic-bezier(.2,.8,.2,1) both; }

.hs-card { position: relative; margin: 38px auto 0; max-width: 900px; text-align: left; padding: 26px 32px 28px; border-radius: 28px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(16,32,72,.10); animation: hq-rise .8s .16s cubic-bezier(.2,.8,.2,1) both; }
.hs-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.hs-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: .82rem; font-weight: 800; color: var(--blue); background: #ECF3FF; }
.hs-card-sub { font-size: .86rem; color: #7A879E; }

/* sentence + blanks */
.hs-sentence { margin-top: 18px; font-size: clamp(1.3rem, 1rem + 1.5vw, 2.05rem); font-weight: 600; line-height: 1.85; letter-spacing: -.01em; color: var(--ink); }
.hs-part { display: inline; }
.hs-part label { margin-right: .3em; }
.hs-dot { margin: 0 .3em 0 .05em; }
.hs-hold { white-space: nowrap; }
.hs-blank, .hs .hv-select { position: relative; display: inline-block; white-space: nowrap; }
.hs .hs-blank select, .hs .hv-select select {
  -webkit-appearance: none; appearance: none; max-width: 100%; margin: 0; padding: 0 1.1em 0 .08em; border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; color: var(--blue); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B5FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .05em center / .62em;
  transition: background-color .2s;
}
.hs .hs-blank select:hover { background-color: #F1F6FF; }
.hs .hs-blank select:focus-visible, .hs .hv-select select:focus-visible { outline: 3px solid #B7C8EA; outline-offset: 3px; }
.hs .hs-blank option, .hs .hv-select option, .hs optgroup { color: var(--ink); font-size: 1rem; }
.hs-ink { position: absolute; left: 0; right: 0; bottom: -4px; width: 100%; height: 10px; overflow: visible; pointer-events: none; }
.hs-ink path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 230; stroke-dashoffset: 230; }
.hs-blank:has(select option[value=""]:checked) select { color: #9AAAC4; }
.hs-blank:has(select option[value=""]:checked)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; border-bottom: 2.5px dashed #B7C8EA; }
.hs-part.is-on .hs-blank:has(select option[value=""]:checked)::after { animation: hs-blink 1.5s ease-in-out infinite; }
.hs-blank:not(:has(select option[value=""]:checked)) .hs-ink path { animation: hs-draw .7s cubic-bezier(.4,0,.2,1) forwards; }
.hs .hv-inline { font-size: 1.05rem; font-weight: 600; color: var(--ink); white-space: nowrap; }
.hs .hv-inline-q { color: var(--muted); font-weight: 500; }
.hs .hv-select select { font-size: 1.05rem; padding-bottom: 1px; border-bottom: 2px dashed #B7C8EA; border-radius: 0; }
.hs .hv-select select:not(:has(option[value=""]:checked)) { border-bottom: 2px solid var(--blue); }
.hs .hv-select select:has(option[value=""]:checked) { color: #9AAAC4; }

.hs-details { margin-top: 6px; }
.hs-details .hv-ask.is-on, .hs:not(.hv-js) .hs-details .hv-ask { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.hs-details .hv-budget.is-on { display: contents; }
.hs-price { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 18px 0 0; padding: 9px 14px; border-radius: 12px; font-size: .9rem; color: var(--ink); background: #F0F6FF; border: 1px solid #DCE8FF; animation: hq-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.hs-price span { font-weight: 800; color: var(--blue); }
.hs-price b { font-weight: 600; }
.hs-start { margin: 14px 0 0; font-size: .82rem; color: #8A97AE; }
.hs:not([data-step="1"]) .hs-start { display: none; }

.hs-contact { margin-top: 22px; padding-top: 22px; border-top: 1px solid #EDF1F7; }
.hs .hv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hs-submit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 16px; padding: 17px 24px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; font-size: 1.02rem; font-weight: 700; color: #fff; background: var(--ink); transition: background .2s, transform .2s; }
.hs-submit:hover { background: var(--blue); transform: translateY(-1px); }
.hs-submit::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); animation: hq-shine 4.5s ease-in-out 1.5s infinite; }
.hs-submit svg { transition: transform .2s; }
.hs-submit:hover svg { transform: translateX(4px); }

.hv-js.hs [data-wz-step]:not(.is-on):not(.is-past) { display: none; }
.hv-js.hs .hs-part.is-on, .hv-js.hs .hs-details.is-past, .hv-js.hs .hs-contact.is-on, .hv-js.hs .hs-turn.is-on { animation: hq-rise .55s cubic-bezier(.2,.8,.2,1) both; }

.hs-after { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 22px; margin-top: 22px; }
.hs-wa { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #128C4A; text-decoration: none; }
.hs-wa:hover { color: #0B6B37; }
.hs-foot { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: #8A97AE; }
.hs-chips { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; }
.hs-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: .9rem; font-weight: 600; color: #3A475F; animation: hq-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.3s + var(--i) * .07s); }
.hs-chips svg { color: var(--blue); }

/* ---------- 1A Classic+ ---------- */
.hs-a .o1, .hs-a .o2, .hs-d .o1 { position: absolute; border-radius: 50%; filter: blur(70px); }
.hs-a .o1 { width: 560px; height: 560px; left: 50%; top: -220px; margin-left: -540px; background: rgba(11,95,255,.15); animation: hs-orbit 22s ease-in-out infinite alternate; }
.hs-a .o2 { width: 460px; height: 460px; left: 50%; top: 140px; margin-left: 120px; background: rgba(24,180,123,.13); animation: hs-orbit 26s ease-in-out infinite alternate-reverse; }
.hs-a .dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(11,19,36,.09) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000, transparent 75%); mask-image: radial-gradient(ellipse 60% 55% at 50% 35%, #000, transparent 75%); }

/* ---------- 1B Chat ---------- */
.hs-b { background: linear-gradient(180deg, #F4F8FF 0%, #F9FBFE 100%); }
.hs-b .wave { position: absolute; width: 140%; height: 320px; left: -20%; border-radius: 50%; filter: blur(60px); }
.hs-b .w1 { top: 10%; background: rgba(11,95,255,.10); animation: hs-wave 18s ease-in-out infinite alternate; }
.hs-b .w2 { bottom: -5%; background: rgba(24,180,123,.10); animation: hs-wave 22s ease-in-out infinite alternate-reverse; }
.hs-b .hs-mark { font-family: inherit; font-style: normal; font-weight: 800; letter-spacing: -.04em; background: linear-gradient(90deg, #0B5FFF, #18B47B); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hs-b .hs-card { max-width: 760px; }
.hs-chat { display: grid; gap: 18px; margin-top: 18px; }
.hs-turn { display: grid; gap: 12px; }
.hs-bot { display: flex; align-items: flex-end; gap: 10px; margin: 0; }
.hs-bot > span:last-child { max-width: 85%; padding: 12px 16px; border-radius: 18px 18px 18px 6px; font-size: 1.02rem; font-weight: 600; color: var(--ink); background: var(--soft); animation: hs-pop .45s cubic-bezier(.2,1.3,.4,1) both; }
.hs-avatar { flex: 0 0 auto; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-size: .85rem; font-weight: 800; color: #fff; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); }
.hs-replies { margin-left: 44px; }
.hs-replies-k { margin: 6px 0 6px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8A97AE; }
.hs-b .hv-pill span { background: #fff; }
.hs-me { justify-self: end; margin: 0; padding: 11px 16px; border-radius: 18px 18px 6px 18px; font-size: 1rem; font-weight: 700; color: #fff; background: var(--blue); cursor: pointer; animation: hs-pop .4s cubic-bezier(.2,1.3,.4,1) both; }
.hs-me::after { content: " ✎"; opacity: .7; font-weight: 500; }
.hs-turn.is-answered .hs-replies { display: none; }
.hs-b .hs-price { margin: 0 0 0 44px; }
.hs-b .hv-ask { margin-left: 44px; }
.hs-b .hs-contact { border-top: 0; padding-top: 0; margin-top: 0; display: grid; gap: 14px; }
.hs-b .hs-contact .hv-fields, .hs-b .hs-contact .hv-consent, .hs-b .hs-contact .hs-submit, .hs-b .hs-contact .hv-err { margin-left: 44px; }
.hs-b .hs-contact .hs-submit { width: calc(100% - 44px); }

/* ---------- 1C Big type ---------- */
.hs-c { background: #FBFCFE; padding-block: 96px 72px; }
.hs-c .glow { position: absolute; right: -10%; top: -20%; width: 70%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,95,255,.12), transparent); animation: hs-orbit 20s ease-in-out infinite alternate; }
.hs-c .lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(11,19,36,.045) 1px, transparent 1px); background-size: calc(100% / 12) 100%; }
.hs-c .hs-inner { max-width: 1180px; }
.hs-c .hs-head { text-align: left; }
.hs-c .hs-title { margin-left: 0; max-width: 15ch; font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.2rem); }
.hs-c .hs-sub { margin-left: 0; }
.hs-c .hs-card { max-width: none; padding: 0; border: 0; background: transparent; box-shadow: none; margin-top: 40px; }
.hs-c .hs-card-head { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hs-c .hs-sentence { font-size: clamp(1.6rem, 1rem + 2.6vw, 3.2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.55; }
.hs-c .hs-ink path { stroke-width: 4; }
.hs-c .hs-contact { margin-top: 28px; padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 20px 50px rgba(16,32,72,.07); max-width: 820px; }
.hs-c .hs-after, .hs-c .hs-chips { justify-content: flex-start; }

/* ---------- 1D Live quote ---------- */
.hs-d { background: linear-gradient(180deg, #F2F6FD 0%, #FAFBFE 100%); }
.hs-d .o1 { width: 620px; height: 620px; right: -200px; top: -240px; background: rgba(11,95,255,.12); animation: hs-orbit 24s ease-in-out infinite alternate; }
.hs-d .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(11,19,36,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(11,19,36,.04) 1px, transparent 1px); background-size: 40px 40px; -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.hs-d .hs-mark { font-family: inherit; font-style: normal; font-weight: 800; color: inherit; background: linear-gradient(transparent 62%, rgba(11,95,255,.18) 62%); animation: hs-mark 1.2s .4s cubic-bezier(.2,.8,.2,1) both; background-size: 100% 100%; background-repeat: no-repeat; }
.hs-d .hs-card { max-width: 1000px; }
.hs-body { display: grid; gap: 24px; }
.hs-d .hs-body { grid-template-columns: minmax(0, 1fr) 290px; align-items: start; }
.hs-ticket { position: relative; padding: 20px 20px 16px; border-radius: 18px; background: #F7FAFF; border: 1.5px dashed #C9D7F2;
  -webkit-mask: radial-gradient(circle 10px at 0 62%, transparent 98%, #000), radial-gradient(circle 10px at 100% 62%, transparent 98%, #000); -webkit-mask-composite: source-in;
          mask: radial-gradient(circle 10px at 0 62%, transparent 98%, #000), radial-gradient(circle 10px at 100% 62%, transparent 98%, #000); mask-composite: intersect; }
.hs-ticket-k { margin: 0 0 12px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.hs-ticket dl { margin: 0; display: grid; gap: 10px; }
.hs-ticket dl div { display: flex; justify-content: space-between; gap: 10px; font-size: .88rem; }
.hs-ticket dt { color: #7A879E; }
.hs-ticket dd { margin: 0; font-weight: 700; color: var(--ink); text-align: right; }
.hs-ticket dd.is-new { animation: hs-flash .7s ease; }
.hs-ticket-price { display: grid; gap: 4px; margin-top: 14px; padding-top: 14px; border-top: 1.5px dashed #C9D7F2; font-size: .86rem; line-height: 1.45; }
.hs-ticket-price span { font-weight: 800; color: var(--blue); }
.hs-ticket-price b { font-weight: 600; color: var(--ink); }
.hs-ticket-foot { display: flex; align-items: center; gap: 6px; margin: 14px 0 0; font-size: .74rem; color: #6B7891; }
.hs-ticket-foot svg { color: var(--mint); }

@keyframes hs-draw  { to { stroke-dashoffset: 0; } }
@keyframes hs-blink { 0%, 100% { border-bottom-color: #B7C8EA; } 50% { border-bottom-color: #0B5FFF; } }
@keyframes hs-orbit { to { transform: translate(70px, 50px) scale(1.08); } }
@keyframes hs-wave  { to { transform: translateX(10%) translateY(20px); } }
@keyframes hs-pop   { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@keyframes hs-flash { 0% { color: var(--blue); transform: translateX(-4px); opacity: 0; } 100% { opacity: 1; transform: none; } }
@keyframes hs-mark  { from { background-size: 0 100%; } }

@media (max-width: 860px) {
  .hs-d .hs-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .hs { padding-block: 72px 52px; }
  .hs-a { padding-top: 112px; }
  .hs-card { padding: 20px 18px 22px; border-radius: 22px; }
  .hs .hv-fields { grid-template-columns: minmax(0, 1fr); }
  .hs-sentence { line-height: 1.95; }
  .hs .hv-inline { white-space: normal; }
  .hs-replies, .hs-b .hs-price, .hs-b .hv-ask, .hs-b .hs-contact .hv-fields, .hs-b .hs-contact .hv-consent, .hs-b .hs-contact .hs-submit, .hs-b .hs-contact .hv-err { margin-left: 0; }
  .hs-c .hs-contact { padding: 18px; }
  .hs-b .hs-contact .hs-submit { width: 100%; }
  .hs-hold { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .hs *, .hs *::before, .hs *::after { animation: none !important; transition: none !important; }
  .hs-ink path { stroke-dashoffset: 0; }
}
.hq-next { margin-left: auto; }
.hq-a .hq-below .hq-wa { background: #fff; color: #0B1324; opacity: 1; filter: none; }

/* ---------- chosen hero (4A): compact, step-by-step card ---------- */
.hq-a { padding-top: 104px; }
.hq-a .hq-title { margin-top: 14px; font-size: clamp(2.1rem, 1.2rem + 2.3vw, 3.05rem); }
.hq-a .hq-sub { margin-top: 12px; font-size: 1rem; }
.hq-a .stage, .hq-a .stage-dots { top: 520px; }

/* card: animated gradient hairline instead of a plain border */
.hq-a .hq-card { max-width: 960px; margin-top: 26px; padding: 22px 28px 18px; isolation: isolate; }
.hq-a .hq-card::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--hq-a, 0deg), rgba(11,95,255,.55), rgba(46,230,181,.55), rgba(11,95,255,.08) 40%, rgba(11,95,255,.55));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: hq-spin 8s linear infinite; }

/* header row: "Service 1 / 4" and a four-part bar */
.hq-a .hq-count { display: inline-flex; align-items: baseline; gap: 8px; }
.hq-a .hq-count em { font-family: Inter, sans-serif; font-style: normal; font-size: .78rem; font-weight: 700; color: #6B7891; }
.hq-a .hq-rail { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 14px; }
.hq-a .hq-rail i { height: 4px; }
.hq-a .hq-rail li.is-on i::after { transform: scaleX(1); background: #0B5FFF; animation: hq-pulsebar 1.6s ease-in-out infinite; }

/* answers so far */
.hq-trail { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.hq-crumb { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .76rem; font-weight: 700; color: #0B5FFF; background: #EEF4FF; animation: hq-rise .35s cubic-bezier(.2,.8,.2,1) both; }
.hq-crumb::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #0B5FFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat; }
.hq-crumb:hover { background: #DCE8FF; }
.hq-a .hv-summary { display: none !important; }

/* question and the Website / Marketing switch on one line */
.hq-a .hq-step:first-of-type { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; }
.hv-js.hq-a .hq-step:first-of-type:not(.is-on) { display: none; }
.hq-a .hq-step:first-of-type .hq-q { margin: 0; }
.hq-a .hq-step:first-of-type .hq-tabs { margin: 0; }
.hq-a .hq-step:first-of-type .hq-options, .hq-a .hq-step:first-of-type .hv-err { grid-column: 1 / -1; margin-top: 14px; }
.hq-a .hq-q { margin-bottom: 14px; }
.hq-a .hq-step { min-height: 0; }
.hv-js.hq-a .hq-step.is-on { animation: hq-slide .45s cubic-bezier(.2,.8,.2,1) both; }
.hv-js.hq-a .hq-step.from-back { animation-name: hq-slide-back; }

/* tiles: four across, icon in a tinted square, tick when chosen */
.hq-a .hq-step:first-of-type .hq-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hq-a .hq-step:first-of-type .hq-opt { flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
.hq-a .hq-step:first-of-type .hq-opt kbd { position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; font-size: .7rem; }
.hq-a .hq-opt-ic { width: 34px; height: 34px; border-radius: 10px; background: #EEF4FF; transition: transform .2s; }
.hq-a .hq-opt:hover .hq-opt-ic { transform: scale(1.08); }
.hq-a .hq-opt:has(input:checked) .hq-opt-ic { background: rgba(255,255,255,.18); }
.hq-tick { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #0B5FFF; background: #fff; transform: scale(0); transition: transform .3s cubic-bezier(.2,1.4,.4,1); }
.hq-opt:has(input:checked) .hq-tick { transform: scale(1); }
.hq-opt:has(input:checked) kbd { opacity: 0; }
.hq-a .hq-options-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hq-a .hq-options-sm .hq-tick { top: 50%; margin-top: -11px; }
.hq-a .hq-nav { margin-top: 14px; padding-top: 12px; }

@keyframes hq-pulsebar  { 50% { opacity: .55; } }
@keyframes hq-slide      { from { opacity: 0; transform: translateX(28px); } }
@keyframes hq-slide-back { from { opacity: 0; transform: translateX(-28px); } }

/* phones: brand + heading, then the card; slim one-line tiles, two per row */
@media (max-width: 720px) {
  .hq-a { padding-top: 84px; }
  .hq-a .hq-eyebrow { font-size: .6rem; padding: 5px 11px; }
  .hq-a .hq-brand { font-size: .82rem; }
  .hq-a .hq-title { margin-top: 10px; font-size: clamp(1.45rem, 1.05rem + 2.2vw, 1.8rem); line-height: 1.08; }
  .hq-a .hq-card { margin-top: 14px; padding: 14px 14px 12px; border-radius: 20px; }
  .hq-a .hq-ftitle { font-size: .8rem; }
  .hq-a .hq-count em { display: none; }
  .hq-a .hq-count b { font-size: .9rem; }
  .hq-a .hq-rail { margin: 10px 0 12px; }
  .hq-a .hq-q { gap: 9px; font-size: 1.1rem; }
  .hq-a .hq-q b { width: 26px; height: 26px; border-radius: 8px; font-size: .78rem; }
  .hq-a .hq-step:first-of-type { grid-template-columns: 1fr; row-gap: 10px; }
  .hq-a .hq-step:first-of-type .hq-options { margin-top: 0; }
  .hq-a .hq-tab { padding: 6px 13px; font-size: .8rem; }
  .hq-a .hq-step:first-of-type .hq-options, .hq-a .hq-options-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .hq-a .hq-step:first-of-type .hq-opt, .hq-a .hq-opt { flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; min-height: 48px; }
  .hq-a .hq-opt kbd, .hq-a .hq-opt-t small { display: none; }
  .hq-a .hq-opt-ic { width: 28px; height: 28px; border-radius: 8px; }
  .hq-a .hq-opt-ic svg { width: 15px; height: 15px; }
  .hq-a .hq-opt-t { font-size: .8rem; line-height: 1.2; padding-right: 14px; }
  .hq-tick { top: 50%; right: 6px; width: 18px; height: 18px; margin-top: -9px; }
  .hq-a .hq-nav { margin-top: 10px; padding-top: 10px; }
  .hq-a .hq-next { padding: 9px 16px; }
  .hq-a .hq-back { width: 36px; height: 36px; }
  .hq-a .stage, .hq-a .stage-dots { top: 240px; }
}

.hq-next { margin-left: auto; }
.hq-a .hq-below .hq-wa { background: #fff; color: #0B1324; opacity: 1; filter: none; }

/* ============================================================================
   Three-choice hero (.hc) — message, three cards, form sheet.
   ========================================================================== */
.hc { --accent: #0B5FFF; --accent2: #22C79A; --cardink: #0B1324; --muted: #55627B; --line: #E3E8F1; --opt: #fff; --optline: #DDE4F0; --soft: #F3F6FB; --card: #fff;
  position: relative; overflow: hidden; overflow: clip; isolation: isolate; padding-block: 104px 56px; color: #0B1324;
  background: linear-gradient(180deg, #EEF4FF 0%, #F8FAFE 55%, #FFFFFF 100%); }
.hc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hc-bg .glow { position: absolute; left: 50%; top: -280px; width: 1100px; height: 620px; margin-left: -550px; border-radius: 50%; background: radial-gradient(closest-side, rgba(11,95,255,.16), transparent); }
.hc-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(11,19,36,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(11,19,36,.045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000, transparent 75%); }
.hc-bg .blob { position: absolute; width: 380px; height: 380px; border-radius: 50%; filter: blur(70px); }
.hc-bg .a { left: -120px; top: 120px; background: rgba(11,95,255,.14); animation: hs-orbit 20s ease-in-out infinite alternate; }
.hc-bg .b { right: -120px; top: 60px; background: rgba(34,199,154,.13); animation: hs-orbit 24s ease-in-out infinite alternate-reverse; }
.hc-inner { max-width: 1100px; margin: 0 auto; padding-inline: 20px; }
.hc-head { text-align: center; }
.hc-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #55627B; background: #fff; border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(16,32,72,.06); }
.hc-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: #18B47B; animation: hq-ping 2.2s ease-out infinite; }
.hc-title { margin: 18px auto 0; max-width: 18ch; font-family: "Bricolage Grotesque", Inter, sans-serif; font-weight: 800; font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); line-height: 1.02; letter-spacing: -.04em; color: #0B1324; text-wrap: balance; animation: hq-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.hc-mark { position: relative; white-space: nowrap; background: linear-gradient(90deg, #0B5FFF, #2F7BFF 60%, #0B5FFF); -webkit-background-clip: text; background-clip: text; color: transparent; background-size: 200% 100%; animation: hq-sheen 6s ease-in-out infinite; }
.hc-sub { margin: 16px auto 0; max-width: 60ch; font-size: clamp(1rem, .95rem + .3vw, 1.12rem); line-height: 1.65; color: #55627B; animation: hq-rise .7s .08s cubic-bezier(.2,.8,.2,1) both; }

.hc-step1 { display: flex; justify-content: center; align-items: center; gap: 10px; margin: 30px 0 0; font-size: .95rem; font-weight: 700; color: #0A47C9; }
.hc-step1 span { padding: 4px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: #0B5FFF; }
.hc-step1 svg { animation: hc-nudge 1.6s ease-in-out infinite; }

.hc-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 16px; }
.hc-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 26px; text-align: left; cursor: pointer; font: inherit; color: #0B1324; background: #fff; border: 1.5px solid var(--line); box-shadow: 0 20px 50px -30px rgba(16,32,72,.35); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s; animation: hq-rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(.15s + var(--i) * .08s); }
.hc-card:hover { transform: translateY(-4px); border-color: #9DBBF5; box-shadow: 0 30px 60px -30px rgba(11,95,255,.45); }
.hc-card:focus-visible { outline: 3px solid #9DBBF5; outline-offset: 3px; }
.hc-card.is-main { border: 2px solid #0B5FFF; box-shadow: 0 30px 60px -28px rgba(11,95,255,.55); }
.hc-flag { position: absolute; top: -12px; left: 22px; padding: 4px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; color: #fff; background: #0B5FFF; }
.hc-card-top { display: block; }
.hc-ic { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 16px; color: #0B5FFF; background: #EEF4FF; transition: transform .25s; }
.hc-card.is-main .hc-ic { color: #fff; background: #0B5FFF; }
.hc-card:nth-child(3) .hc-ic { color: #0E9F6E; background: #E8F8F1; }
.hc-card:hover .hc-ic { transform: rotate(-6deg) scale(1.06); }
.hc-card-txt { display: grid; gap: 6px; margin-top: 18px; }
.hc-card-txt b { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; }
.hc-card-txt span { font-size: .95rem; line-height: 1.55; color: #55627B; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hc-tags span { padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #33415C; background: #F3F6FB; }
.hc-price { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; font-size: .86rem; color: #6B7891; }
.hc-price b { display: block; margin-top: 2px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: #0B1324; }
.hc-go { display: none; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: #0B5FFF; }
.hc-cta { display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: 14px; font-size: .95rem; font-weight: 700; color: #0B1324; border: 1.5px solid var(--line); transition: background .2s, color .2s, border-color .2s; }
.hc-card.is-main .hc-cta { color: #fff; background: #0B5FFF; border-color: #0B5FFF; }
.hc-card:hover .hc-cta { border-color: #0B5FFF; }
.hc-card:hover .hc-cta svg { transform: translateX(4px); }
.hc-cta svg { transition: transform .2s; }

.hc-note { margin: 22px 0 0; text-align: center; font-size: .9rem; color: #6B7891; }
.hc-note a { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: #128C4A; text-decoration: none; }
.hc-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.hc-chips li { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 600; color: #3A475F; }
.hc-chips svg { color: #18B47B; }

/* sheet */
html.hc-lock { overflow: hidden; }
.hc-sheet { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; padding: 20px; }
.hc-sheet[hidden] { display: none; }
.hc-backdrop { position: absolute; inset: 0; background: rgba(8,16,40,.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity .3s; }
.hc-panel { position: relative; width: min(680px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 22px 26px 18px; border-radius: 26px; color: #0B1324; background: #fff; box-shadow: 0 40px 100px rgba(8,16,40,.35); opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .3s, transform .35s cubic-bezier(.2,.8,.2,1); }
.hc-sheet.is-open .hc-backdrop { opacity: 1; }
.hc-sheet.is-open .hc-panel { opacity: 1; transform: none; }
.hc-grab { display: none; }
.hc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding-bottom: 14px; border-bottom: 1px solid #EEF1F6; }
.hc-kicker { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #0B5FFF; }
.hc-panel-title { margin: 4px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; }
.hc-panel-title span { color: #6B7891; font-weight: 700; }
.hc-close { flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; color: #33415C; background: #F1F4F9; }
.hc-close:hover { background: #E4E9F2; }
.hc-top { margin-top: 12px; }
.hc-panel-sub { margin: 0; font-size: .84rem; color: #6B7891; }
.hc .hq-count { display: inline-flex; align-items: baseline; gap: 8px; flex: 0 0 auto; font-family: "Bricolage Grotesque", Inter, sans-serif; font-weight: 800; }
.hc .hq-count em { font-family: Inter, sans-serif; font-style: normal; font-size: .76rem; font-weight: 700; color: #6B7891; }
.hc .hq-rail { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 12px 0 14px; padding: 0; }
.hc .hq-rail i { position: relative; display: block; height: 4px; border-radius: 4px; background: #EEF1F6; overflow: hidden; }
.hc .hq-rail i::after { content: ""; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, #0B5FFF, #22C79A); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.hc .hq-rail li.is-done i::after, .hc .hq-rail li.is-on i::after { transform: scaleX(1); }
.hc .hq-rail li.is-on i::after { background: #0B5FFF; animation: hq-pulsebar 1.6s ease-in-out infinite; }
.hc .hq-step { min-height: 0; }
.hv-js.hc .hq-step.is-on { animation: hq-slide .4s cubic-bezier(.2,.8,.2,1) both; }
.hv-js.hc .hq-step.from-back { animation-name: hq-slide-back; }
.hc .hq-q { font-size: 1.3rem; margin-bottom: 14px; }
.hc .hq-opt[data-cat] { display: none; }
.hc[data-cat="care"] .hq-opt[data-cat="care"], .hc[data-cat="build"] .hq-opt[data-cat="build"], .hc[data-cat="mkt"] .hq-opt[data-cat="mkt"], .hc:not(.hv-js) .hq-opt[data-cat] { display: flex; }
.hc .hq-opt-ic { width: 34px; height: 34px; border-radius: 10px; background: #EEF4FF; }
.hc .hq-opt:has(input:checked) .hq-opt-ic { background: rgba(255,255,255,.18); }
.hc .hq-options-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc .hq-options-sm .hq-tick { top: 50%; margin-top: -11px; }
.hc .hq-nav { margin-top: 16px; padding-top: 12px; }
.hc .hv-summary { display: none !important; }
.hc-panel-foot { margin: 12px 0 0; text-align: center; font-size: .76rem; color: #8A97AE; }
.hc-panel-foot a { font-weight: 700; color: #128C4A; }

@keyframes hc-nudge { 50% { transform: translateY(4px); } }

/* phones: cards become rows with an arrow; the sheet slides up from the bottom */
@media (max-width: 760px) {
  .hc { padding-block: 88px 44px; }
  .hc-eyebrow { font-size: .6rem; padding: 5px 11px; }
  .hc-eyebrow .hq-brand { font-size: .82rem; }
  .hc-title { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.4rem); }
  .hc-sub { font-size: .98rem; }
  .hc-step1 { margin-top: 22px; font-size: .9rem; }
  .hc-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hc-card { gap: 10px; padding: 18px 18px 16px; border-radius: 22px; }
  .hc-card-top { display: flex; gap: 14px; align-items: flex-start; }
  .hc-ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 14px; }
  .hc-card-txt { margin-top: 0; }
  .hc-card-txt b { font-size: 1.12rem; }
  .hc-card-txt span { font-size: .88rem; }
  .hc-tags, .hc-cta { display: none; }
  .hc-go { display: grid; }
  .hc-card:not(.is-main) .hc-go { color: #0B1324; background: #F1F4F9; }
  .hc-price b { font-size: 1.15rem; }
  .hc-sheet { place-items: end stretch; padding: 0; }
  .hc-panel { width: 100%; max-height: 92vh; padding: 10px 18px 16px; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .2s; }
  .hc-sheet.is-open .hc-panel { transform: none; }
  .hc-grab { display: block; width: 44px; height: 5px; margin: 0 auto 10px; border-radius: 5px; background: #D5DDEA; }
  .hc-panel-title { font-size: 1.15rem; }
  .hc-panel-sub, .hc .hq-count em, .hc .hq-hint { display: none; }
  .hc-top { justify-content: flex-end; }
  .hc .hq-q { font-size: 1.1rem; }
  .hc .hq-q b { width: 26px; height: 26px; border-radius: 8px; font-size: .78rem; }
  .hc .hq-options, .hc .hq-options-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .hc .hq-opt { flex-direction: row; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 12px; min-height: 48px; }
  .hc .hq-opt kbd, .hc .hq-opt-t small { display: none; }
  .hc .hq-opt-ic { width: 28px; height: 28px; border-radius: 8px; }
  .hc .hq-opt-ic svg { width: 15px; height: 15px; }
  .hc .hq-opt-t { font-size: .8rem; line-height: 1.2; padding-right: 14px; }
  .hc .hq-tick { top: 50%; right: 6px; width: 18px; height: 18px; margin-top: -9px; }
  .hc .hv-fields { grid-template-columns: minmax(0, 1fr); }
}
/* The open sheet is a modal: it sits above every fixed element of the page. */
.hc-sheet { z-index: 2147483000; }
.hc-card > * { align-self: stretch; }
.hc-title { font-size: clamp(2.2rem, 1.2rem + 3vw, 3.6rem); }
@media (max-width: 760px) {
  .hc-title { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.4rem); }
  .hc-panel-head { padding-bottom: 10px; }
  .hc-top { margin-top: 8px; }
  .hc .hq-rail { margin: 8px 0 12px; }
}
/* No stacking context on the section, so the fixed sheet can rise above the
   site header, the call bar and the floating WhatsApp button. */
.hv.hc { isolation: auto; }
.hc-bg { z-index: 0; }
.hc-inner { position: relative; z-index: 1; }

/* ---------- four cards, no prices, clearly "tap to open" ---------- */
.hc[data-cat="fix"] .hq-opt[data-cat="fix"] { display: flex; }
.hc-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hc-card { gap: 12px; padding: 22px 20px 18px; overflow: hidden; }
.hc-card::after { content: ""; position: absolute; top: 0; bottom: 0; left: -70%; width: 45%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(11,95,255,.07), transparent); transform: skewX(-18deg); animation: hc-hint 8s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * .9s); }
.hc-card:active { transform: scale(.98); }
.hc-card .hc-card-txt { margin-top: 6px; }
.hc-card-txt b { font-size: 1.2rem; }
.hc-card-txt span { font-size: .9rem; }
.hc-card:nth-child(2) .hc-ic { color: #C2410C; background: #FFF1E6; }
.hc-card:nth-child(3) .hc-ic { color: #0B5FFF; background: #EEF4FF; }
.hc-card:nth-child(4) .hc-ic { color: #0E9F6E; background: #E8F8F1; }
.hc-foot { display: grid; gap: 10px; margin-top: auto; }
.hc-steps { display: inline-flex; align-items: center; gap: 6px; font-size: .76rem; font-weight: 700; color: #6B7891; }
.hc-cta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 13px; font-size: .92rem; font-weight: 700; color: #0B1324; border: 1.5px solid var(--line); background: #fff; transition: background .2s, color .2s, border-color .2s; }
.hc-cta-s { display: none; }
.hc-card.is-main .hc-cta { color: #fff; background: #0B5FFF; border-color: #0B5FFF; }
.hc-card:hover .hc-cta { border-color: #0B5FFF; color: #0B5FFF; }
.hc-card.is-main:hover .hc-cta { color: #fff; }
@keyframes hc-hint { 0%, 80%, 100% { left: -70%; } 92% { left: 130%; } }

@media (max-width: 1080px) and (min-width: 761px) {
  .hc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phones: a 2 × 2 grid so all four fit on the first screen */
@media (max-width: 760px) {
  .hc-sub { font-size: .92rem; line-height: 1.55; margin-top: 12px; }
  .hc-step1 { margin-top: 16px; }
  .hc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
  .hc-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 12px 12px; border-radius: 18px; }
  .hc-card.is-main { padding-top: 18px; }
  .hc-flag { top: -10px; left: 12px; padding: 3px 9px; font-size: .62rem; }
  .hc-ic { width: 38px; height: 38px; border-radius: 12px; }
  .hc-ic svg { width: 19px; height: 19px; }
  .hc-card-txt { margin-top: 0; gap: 3px; }
  .hc-card-txt b { font-size: .98rem; line-height: 1.2; }
  .hc-card-txt span { font-size: .76rem; line-height: 1.35; }
  .hc-tags, .hc-steps { display: none; }
  .hc-cta { padding: 8px 10px; border-radius: 10px; font-size: .8rem; }
  .hc-cta-l { display: none; }
  .hc-cta-s { display: inline; }
  .hc-note { font-size: .82rem; margin-top: 14px; }
}
/* phones: heading, then the four cards; the longer subtitle follows them */
@media (max-width: 760px) {
  .hc-inner { display: flex; flex-direction: column; }
  .hc-head { display: contents; }
  .hc-eyebrow { order: 1; align-self: center; }
  .hc-title { order: 2; }
  .hc-inner > .wm-form-notice, .hc-inner > [class*="notice"] { order: 3; }
  .hc-step1 { order: 4; }
  .hc-cards { order: 5; }
  .hc-sub { order: 6; margin-top: 18px; text-align: center; }
  .hc-note { order: 7; }
  .hc-chips { order: 8; }
}
/* keep the "Our main service" flag visible: the shine stays inside the card
   by moving a background, so the card itself need not clip */
.hc-card { overflow: visible; }
.hc-card::after { left: 0; right: 0; width: auto; transform: none; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(11,95,255,.08) 50%, transparent 70%) no-repeat;
  background-size: 60% 100%; background-position: -150% 0; animation: hc-hint2 8s ease-in-out infinite; animation-delay: calc(1.2s + var(--i) * .9s); }
@keyframes hc-hint2 { 0%, 80%, 100% { background-position: -150% 0; } 92% { background-position: 250% 0; } }

/* ============================================================================
   .hc polish — neat and clean: calm background, one highlighted card,
   lighter card contents, cleaner sheet header.
   ========================================================================== */
.hc { background: #FFFFFF; }
.hc-bg .grid, .hc-bg .blob { display: none; }
.hc-bg .glow { top: -340px; width: 1300px; height: 720px; margin-left: -650px; background: radial-gradient(closest-side, rgba(11,95,255,.13), rgba(11,95,255,.04) 60%, transparent); }
.hc-bg::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, #E3E8F1 20%, #E3E8F1 80%, transparent); }
.hc-eyebrow { box-shadow: none; }
.hc-title { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.4rem); letter-spacing: -.045em; }
.hc-sub { color: #5B6780; }
.hc-step1 { margin-top: 26px; font-size: .88rem; font-weight: 600; color: #55627B; }
.hc-step1 span { background: #0B1324; }

.hc-cards { gap: 14px; margin-top: 14px; }
.hc-card { gap: 10px; padding: 22px 20px 18px; border: 1px solid #E6EAF1; border-radius: 22px; box-shadow: 0 1px 2px rgba(16,32,72,.04), 0 12px 32px -18px rgba(16,32,72,.18); }
.hc-card::after { display: none; }
.hc-card:hover { transform: translateY(-3px); border-color: #C9D7F2; box-shadow: 0 1px 2px rgba(16,32,72,.04), 0 24px 44px -22px rgba(11,95,255,.35); }
.hc-ic { width: 44px; height: 44px; border-radius: 13px; }
.hc-card .hc-card-txt { margin-top: 8px; gap: 5px; }
.hc-card-txt b { font-size: 1.14rem; }
.hc-card-txt span { font-size: .88rem; line-height: 1.5; color: #5B6780; }
.hc-meta { font-size: .76rem; font-weight: 600; color: #8A97AE; }
.hc-tags { display: none; }
.hc-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #EEF1F6; font-size: .9rem; font-weight: 700; color: #0B1324; }
.hc-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #0B1324; background: #F1F4F9; transition: background .2s, color .2s, transform .2s; }
.hc-card:hover .hc-arrow { color: #fff; background: #0B5FFF; transform: translateX(3px); }
.hc-cta-s { display: none; }

/* the highlighted card */
.hc-card.is-main { color: #fff; border: 0; background: linear-gradient(155deg, #2F7BFF 0%, #0B5FFF 55%, #0846C9 100%); box-shadow: 0 24px 50px -22px rgba(11,95,255,.65); }
.hc-card.is-main .hc-card-txt span, .hc-card.is-main .hc-meta { color: rgba(255,255,255,.82); }
.hc-card.is-main .hc-ic { color: #0B5FFF; background: #fff; }
.hc-card.is-main .hc-foot { color: #fff; border-top-color: rgba(255,255,255,.22); }
.hc-card.is-main .hc-arrow { color: #0B5FFF; background: #fff; }
.hc-card.is-main:hover .hc-arrow { color: #0B5FFF; background: #fff; }
.hc-card.is-main::after { display: block; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.16) 50%, transparent 70%) no-repeat; background-size: 60% 100%; }
.hc-flag { top: 14px; left: auto; right: 14px; padding: 4px 9px; font-size: .64rem; letter-spacing: .02em; color: #0B5FFF; background: #fff; }

.hc-note { margin-top: 18px; font-size: .86rem; }
.hc-chips { gap: 6px 0; margin-top: 12px; }
.hc-chips li { padding-inline: 12px; font-size: .84rem; color: #55627B; }
.hc-chips li + li { border-left: 1px solid #E3E8F1; }
.hc-chips svg { display: none; }

/* sheet header */
.hc-panel-title { font-size: 1.3rem; }
.hc-catpill { display: inline-flex; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: #0B5FFF; background: #EEF4FF; }
.hc-catpill:empty { display: none; }

@media (max-width: 760px) {
  .hc { padding-block: 84px 40px; }
  .hc-title { font-size: clamp(1.85rem, 1.2rem + 3.4vw, 2.3rem); }
  .hc-step1 { margin-top: 16px; font-size: .82rem; }
  .hc-cards { gap: 10px; }
  .hc-card { gap: 6px; padding: 14px 13px 12px; border-radius: 18px; }
  .hc-ic { width: 36px; height: 36px; border-radius: 11px; }
  .hc-card .hc-card-txt { margin-top: 4px; }
  .hc-card-txt b { font-size: .96rem; }
  .hc-card-txt span { font-size: .75rem; line-height: 1.4; }
  .hc-meta { display: none; }
  .hc-foot { padding-top: 9px; font-size: .8rem; }
  .hc-cta-l { display: none; }
  .hc-cta-s { display: inline; }
  .hc-arrow { width: 28px; height: 28px; }
  .hc-arrow svg { width: 14px; height: 14px; }
  .hc-flag { top: 10px; right: 10px; padding: 3px 7px; font-size: .56rem; }
  .hc-card.is-main { padding-top: 14px; }
  .hc-chips li { padding-inline: 9px; font-size: .78rem; }
  .hc-panel-title { font-size: 1.15rem; }
}

/* ============================================================================
   .hc v3 — four equal cards (all are main services), each with its own soft
   accent; calm light background; tidy contact step.
   ========================================================================== */
.hc { background: linear-gradient(180deg, #F2F6FF 0%, #F9FBFF 45%, #FFFFFF 100%); }
.hc-card { --ac: #0B5FFF; --ac-soft: #EEF4FF; overflow: hidden; }
.hc-card:nth-child(1) { --ac: #0B5FFF; --ac-soft: #EEF4FF; }
.hc-card:nth-child(2) { --ac: #E8590C; --ac-soft: #FFF1E6; }
.hc-card:nth-child(3) { --ac: #7C3AED; --ac-soft: #F3EEFF; }
.hc-card:nth-child(4) { --ac: #0E9F6E; --ac-soft: #E8F8F1; }
.hc-card::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(closest-side, var(--ac-soft), transparent); pointer-events: none; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.hc-card:hover::before { transform: scale(1.35); }
.hc-card > * { position: relative; }
.hc-card .hc-ic, .hc-card:nth-child(n) .hc-ic { color: var(--ac); background: var(--ac-soft); }
.hc-card:hover { border-color: color-mix(in srgb, var(--ac) 45%, #fff); box-shadow: 0 1px 2px rgba(16,32,72,.04), 0 24px 44px -24px color-mix(in srgb, var(--ac) 55%, transparent); }
.hc-card:hover .hc-arrow { color: #fff; background: var(--ac); }
.hc-foot .hc-cta-l, .hc-foot .hc-cta-s { color: var(--ac); }
.hc-card::after { display: none !important; }
.hc-card { border-top: 3px solid var(--ac); }

/* last step: the submit button is the only action; no extra Continue */
.hc[data-step="4"] .hq-next, .hc[data-step="4"] .hq-hint { display: none; }

/* phone: one tidy field — country code and number share a single box */
.hc .hv-phone { display: flex; align-items: stretch; gap: 0; min-height: 48px; border-radius: 12px; background: #F5F7FB; border: 1.5px solid #E0E6F0; transition: border-color .18s, box-shadow .18s, background .18s; }
.hc .hv-phone:focus-within { background: #fff; border-color: #0B5FFF; box-shadow: 0 0 0 4px rgba(11,95,255,.13); }
.hc .hv-phone > .wm-cc { flex: 0 0 auto; width: auto; position: relative; display: flex; }
.hc .hv-phone .wm-cc-btn { display: inline-flex; align-items: center; gap: 6px; height: 100%; min-height: 0; margin: 0; padding: 0 10px 0 13px; border: 0; border-right: 1.5px solid #E0E6F0; border-radius: 11px 0 0 11px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 700; color: #0B1324; background: transparent; box-shadow: none; }
.hc .hv-phone .wm-cc-btn:focus-visible { outline: 0; background: #EEF4FF; }
.hc .hv-phone > input { flex: 1 1 0; min-width: 0; min-height: 0; padding: 11px 13px; border: 0 !important; border-radius: 0 11px 11px 0; background: transparent !important; box-shadow: none !important; }
.hc .hv-field label { font-size: .78rem; letter-spacing: .01em; }
.hc .hv-field input { min-height: 48px; border-radius: 12px; }
.hc .hv-consent { padding: 10px 12px; border-radius: 12px; background: #F7F9FC; }
.hc .hq-submit { margin-top: 14px; }
@media (max-width: 760px) {
  .hc-card::before { width: 120px; height: 120px; right: -40px; top: -40px; }
}

/* ---------- hero: international line (flags + rotating country) ---------- */
.hc-tops { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.hc-world { display: inline-flex; align-items: center; gap: 10px; padding: 5px 15px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 6px 18px -10px rgba(16,32,72,.25); }
.hc-flags { display: inline-flex; }
.hc-flags img { width: 24px; height: 24px; margin-left: -7px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .35s cubic-bezier(.2,1.4,.4,1), box-shadow .3s; animation: hc-flag-in .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(.2s + var(--i) * .08s); }
.hc-flags img:first-child { margin-left: 0; }
.hc-flags img.is-on { transform: translateY(-3px) scale(1.15); box-shadow: 0 4px 10px rgba(11,95,255,.35); position: relative; z-index: 2; }
.hc-world:hover .hc-flags img { margin-left: 2px; }
.hc-world:hover .hc-flags img:first-child { margin-left: 0; }
.hc-world-t { display: inline-flex; align-items: center; gap: 5px; font-size: .8rem; font-weight: 600; color: #55627B; white-space: nowrap; }
.hc-rot { position: relative; display: inline-grid; min-width: 4.6em; height: 1.3em; overflow: hidden; }
.hc-rot b { grid-area: 1 / 1; font-weight: 800; color: #0B5FFF; opacity: 0; transform: translateY(100%); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); }
.hc-rot b.is-on { opacity: 1; transform: none; }
@keyframes hc-flag-in { from { opacity: 0; transform: scale(.4); } }
@media (max-width: 760px) {
  .hc-tops { order: 1; align-self: center; }
  .hc-tops .hc-eyebrow { display: none; }
  .hc-world { padding: 4px 12px 4px 5px; gap: 8px; }
  .hc-flags img { width: 21px; height: 21px; margin-left: -6px; }
  .hc-world-t { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) { .hc-flags img, .hc-rot b { animation: none !important; transition: none !important; } }
.hc-world-t { line-height: 1.25; }
.hc-rot { min-width: 0; height: 1.25em; line-height: 1.25em; vertical-align: middle; align-items: center; justify-items: start; }
.hc-rot b { display: block; line-height: 1.25em; white-space: nowrap; }
.hc-rot { width: 4.9em; }

/* ============================================================================
   Portfolio showcase (.pf2) — right after the hero. Dark stage so the work
   stands out; a browser frame where the selected site scrolls by itself.
   ========================================================================== */
.pf2 { position: relative; overflow: hidden; overflow: clip; padding-block: 88px 80px; color: #fff; background: #0A1022; font-family: Inter, ui-sans-serif, system-ui, sans-serif; }
.pf2-bg { position: absolute; inset: 0; pointer-events: none; }
.pf2-bg .g1 { position: absolute; left: -10%; top: -20%; width: 60%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(47,123,255,.35), transparent); }
.pf2-bg .g2 { position: absolute; right: -10%; bottom: -25%; width: 55%; height: 70%; border-radius: 50%; background: radial-gradient(closest-side, rgba(34,211,166,.18), transparent); }
.pf2-bg .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000, transparent 80%); }
.pf2-inner { position: relative; max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.pf2-head { text-align: center; }
.pf2-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #9CC2FF; background: rgba(47,123,255,.15); border: 1px solid rgba(120,160,255,.3); }
.pf2-title { margin: 16px auto 0; max-width: 20ch; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; color: #fff; text-wrap: balance; }
.pf2-sub { margin: 12px auto 0; max-width: 56ch; font-size: 1.02rem; line-height: 1.6; color: #A9B6D3; }
.pf2-facts { display: flex; justify-content: center; gap: 10px; margin: 18px 0 0; }
.pf2-facts span { padding: 5px 12px; border-radius: 999px; font-size: .8rem; color: #C9D5EE; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.pf2-facts b { color: #fff; font-weight: 800; }

.pf2-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 40px; }
.pf2-frame { position: relative; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 100px -30px rgba(47,123,255,.55), 0 0 0 1px rgba(255,255,255,.12); transform: perspective(1400px) rotateY(4deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.pf2-frame:hover { transform: perspective(1400px) rotateY(0); }
.pf2-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #EEF1F6; border-bottom: 1px solid #DDE3EC; }
.pf2-chrome .d { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; }
.pf2-chrome .d:nth-child(2) { background: #FEBC2E; }
.pf2-chrome .d:nth-child(3) { background: #28C840; }
.pf2-url { flex: 1; display: inline-flex; align-items: center; gap: 6px; min-width: 0; margin-left: 10px; padding: 5px 12px; border-radius: 999px; font-size: .76rem; font-weight: 600; color: #475569; background: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pf2-url svg { flex: 0 0 auto; color: #16A34A; }
.pf2-live { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font-size: .7rem; font-weight: 800; color: #16A34A; }
.pf2-live i { width: 7px; height: 7px; border-radius: 50%; background: #22C55E; animation: hq-ping 2s ease-out infinite; }
.pf2-view { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #E9EEF6; }
.pf2-view img { display: block; width: 100%; height: auto; transform: translateY(0); will-change: transform; }
.pf2-view.is-scrolling img { animation: pf2-scroll var(--pf2-dur, 18s) ease-in-out infinite alternate; }
.pf2-view.is-swap img { animation: none; opacity: 0; }
.pf2-view img { transition: opacity .35s; }
@keyframes pf2-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-1 * var(--pf2-dist, 0px))); } }

.pf2-info { min-width: 0; }
.pf2-count { margin: 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: .95rem; font-weight: 700; color: #7C8BAA; }
.pf2-count b { font-size: 1.6rem; color: #fff; }
.pf2-tag { display: inline-block; margin-top: 14px; padding: 4px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0A1022; background: #7DF0CF; }
.pf2-name { margin: 12px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.pf2-desc { margin: 10px 0 0; font-size: .96rem; line-height: 1.65; color: #B7C3DD; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pf2-info.is-swap .pf2-tag, .pf2-info.is-swap .pf2-name, .pf2-info.is-swap .pf2-desc { animation: pf2-txt .5s cubic-bezier(.2,.8,.2,1) both; }
.pf2-info.is-swap .pf2-name { animation-delay: .05s; }
.pf2-info.is-swap .pf2-desc { animation-delay: .1s; }
@keyframes pf2-txt { from { opacity: 0; transform: translateY(10px); } }
.pf2-open { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; padding: 13px 20px; border: 0; border-radius: 13px; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 800; color: #0A1022; background: #fff; box-shadow: 0 12px 30px -12px rgba(255,255,255,.5); transition: transform .2s; }
.pf2-open:hover { transform: translateY(-2px); }
.pf2-nav { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.pf2-arrow { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); transition: background .2s; }
.pf2-arrow:hover { background: rgba(255,255,255,.18); }
.pf2-timer { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.pf2-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #2F7BFF, #7DF0CF); }
.pf2-timer i.run { animation: pf2-timer var(--pf2-every, 9s) linear forwards; }
@keyframes pf2-timer { to { width: 100%; } }

.pf2-thumbs { display: flex; gap: 12px; margin: 36px -20px 0; padding: 4px 20px 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pf2-thumbs::-webkit-scrollbar { display: none; }
.pf2-thumb { flex: 0 0 200px; scroll-snap-align: start; display: grid; gap: 8px; padding: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; cursor: pointer; font: inherit; text-align: left; color: #fff; background: rgba(255,255,255,.04); transition: transform .25s, border-color .25s, background .25s; }
.pf2-thumb:hover { transform: translateY(-3px); border-color: rgba(156,194,255,.5); }
.pf2-thumb.is-on { border-color: #7DF0CF; background: rgba(125,240,207,.08); box-shadow: 0 0 0 1px #7DF0CF inset; }
.pf2-thumb-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; background: #1A2340; }
.pf2-thumb-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s; }
.pf2-thumb:hover .pf2-thumb-img img { transform: scale(1.06); }
.pf2-thumb-t { display: grid; gap: 1px; padding: 0 2px 2px; }
.pf2-thumb-t b { font-size: .86rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-thumb-t small { font-size: .7rem; color: #8FA0C4; }
.pf2-thumb:focus-visible, .pf2-open:focus-visible, .pf2-arrow:focus-visible { outline: 3px solid #9CC2FF; outline-offset: 3px; }

.pf2-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.pf2-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 14px; font-weight: 800; font-size: .95rem; text-decoration: none; color: #fff; border: 1.5px solid rgba(255,255,255,.25); transition: all .2s; }
.pf2-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
.pf2-btn-main { border-color: transparent; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); box-shadow: 0 14px 30px -12px rgba(11,95,255,.8); }

@media (max-width: 900px) {
  .pf2 { padding-block: 64px 56px; }
  .pf2-stage { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 28px; }
  .pf2-frame { transform: none; }
  .pf2-desc { -webkit-line-clamp: 3; }
  .pf2-thumb { flex-basis: 160px; }
}
@media (max-width: 560px) {
  .pf2-title { font-size: 1.8rem; }
  .pf2-sub { font-size: .94rem; }
  .pf2-live { display: none; }
  .pf2-name { font-size: 1.45rem; margin-top: 8px; }
  .pf2-open { width: 100%; justify-content: center; }
  .pf2-cta .pf2-btn { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) { .pf2 *, .pf2-view img { animation: none !important; transition: none !important; } }

/* ============================================================================
   Portfolio variants P2 Wall · P3 Carousel · P4 Index list (preview only)
   ========================================================================== */
.pfv { position: relative; overflow: hidden; overflow: clip; padding-block: 84px 72px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #0B1324; }
.pfv-inner { max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.pfv-head { text-align: center; }
.pfv-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #0B5FFF; background: #EEF4FF; }
.pfv-title { margin: 14px auto 0; max-width: 20ch; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); font-weight: 800; line-height: 1.06; letter-spacing: -.035em; text-wrap: balance; }
.pfv-sub { margin: 12px auto 0; max-width: 56ch; font-size: 1rem; line-height: 1.6; color: #5B6780; }
.pfv-flag { width: 14px; height: 14px; margin-right: 5px; border-radius: 50%; object-fit: cover; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.pfv-go { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #0B1324; background: #F1F4F9; transition: background .2s, color .2s, transform .25s; }
.pfv-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.pfv-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 22px; border-radius: 14px; font-weight: 800; font-size: .95rem; text-decoration: none; color: #0B1324; border: 1.5px solid #DCE3EE; background: #fff; transition: all .2s; }
.pfv-btn:hover { border-color: #0B5FFF; color: #0B5FFF; }
.pfv-btn-main { color: #fff; border-color: transparent; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); box-shadow: 0 14px 30px -14px rgba(11,95,255,.8); }
.pfv-btn-main:hover { color: #fff; }

/* P2 Wall */
.pfv-wall { background: #F5F7FB; }
.pfv-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 26px; }
.pfv-filters button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1.5px solid #E0E6F0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .86rem; font-weight: 700; color: #33415C; background: #fff; transition: all .2s; }
.pfv-filters button span { padding: 1px 7px; border-radius: 999px; font-size: .7rem; color: #6B7891; background: #F1F4F9; }
.pfv-filters button.is-on { color: #fff; background: #0B1324; border-color: #0B1324; }
.pfv-filters button.is-on span { color: #0B1324; background: #fff; }
.pfv-masonry { columns: 3 300px; column-gap: 18px; margin-top: 28px; }
.pfv-tile { break-inside: avoid; margin-bottom: 18px; overflow: hidden; border-radius: 20px; cursor: pointer; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 14px 30px -22px rgba(16,32,72,.4); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s, opacity .3s; animation: hq-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .05s); }
.pfv-tile:hover, .pfv-tile:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 46px -24px rgba(11,95,255,.45); outline: 0; }
.pfv-tile.is-hidden { display: none; }
.pfv-tile-shot { position: relative; height: 240px; overflow: hidden; background: #E9EEF6; }
.pfv-tile-shot.tall { height: 360px; }
.pfv-tile-shot img { display: block; width: 100%; height: auto; transform: translateY(0); transition: transform 6s ease-in-out; }
.pfv-tile:hover .pfv-tile-shot img { transform: translateY(calc(-100% + 240px)); }
.pfv-tile:hover .pfv-tile-shot.tall img { transform: translateY(calc(-100% + 360px)); }
.pfv-tile-shot::after { content: "Hover to scroll"; position: absolute; right: 10px; top: 10px; padding: 4px 9px; border-radius: 999px; font-size: .66rem; font-weight: 800; color: #fff; background: rgba(11,19,36,.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: opacity .3s; }
.pfv-tile:hover .pfv-tile-shot::after { opacity: 0; }
.pfv-tile-info { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 14px 16px; }
.pfv-tile-info b { display: block; font-size: 1rem; font-weight: 800; }
.pfv-tile-info span { display: block; margin-top: 3px; font-size: .74rem; font-weight: 700; color: #6B7891; }
.pfv-tile:hover .pfv-go { color: #fff; background: #0B5FFF; transform: rotate(45deg); }

/* P3 Carousel */
.pfv-car { background: linear-gradient(180deg, #FFFFFF 0%, #EEF4FF 100%); }
.pfv-car-top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 20px; }
.pfv-car .pfv-head { text-align: left; }
.pfv-car .pfv-title, .pfv-car .pfv-sub { margin-left: 0; }
.pfv-car-arrows { display: flex; gap: 8px; }
.pfv-car-arrows button { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; color: #0B1324; background: #fff; border: 1.5px solid #DCE3EE; transition: all .2s; }
.pfv-car-arrows button:hover { color: #fff; background: #0B5FFF; border-color: #0B5FFF; }
.pfv-track { display: flex; gap: 20px; margin-top: 30px; padding: 6px max(20px, calc((100vw - 1160px) / 2)) 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: max(20px, calc((100vw - 1160px) / 2)); }
.pfv-track::-webkit-scrollbar { display: none; }
.pfv-slide { position: relative; flex: 0 0 min(540px, 82vw); aspect-ratio: 16 / 11; overflow: hidden; border-radius: 26px; cursor: pointer; scroll-snap-align: start; box-shadow: 0 30px 60px -30px rgba(16,32,72,.5); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pfv-slide:hover { transform: translateY(-4px); }
.pfv-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.pfv-slide:hover img { transform: scale(1.06); }
.pfv-slide-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,10,25,0) 35%, rgba(5,10,25,.88) 100%); }
.pfv-slide-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px; color: #fff; }
.pfv-slide-num { position: absolute; right: 22px; bottom: 22px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; color: rgba(255,255,255,.18); }
.pfv-slide-tag { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0B1324; background: #7DF0CF; }
.pfv-slide-info b { display: block; margin-top: 10px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; }
.pfv-slide-info p { margin: 6px 0 0; max-width: 46ch; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.8); }
.pfv-slide-open { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 7px 12px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: #0B1324; background: #fff; }
.pfv-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.pfv-dots i { width: 7px; height: 7px; border-radius: 999px; background: #C9D5EC; transition: width .3s, background .3s; }
.pfv-dots i.is-on { width: 26px; background: #0B5FFF; }

/* P4 Index list */
.pfv-idx { background: #fff; }
.pfv-idx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; margin-top: 34px; }
.pfv-idx-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E6EAF1; }
.pfv-row { position: relative; display: flex; align-items: center; gap: 16px; padding: 16px 6px; border-bottom: 1px solid #E6EAF1; cursor: pointer; transition: padding .3s, background .3s; }
.pfv-row::before { content: none; }
.pfv-row-n { flex: 0 0 auto; width: 34px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: .9rem; font-weight: 800; color: #A0AEC6; }
.pfv-row-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.pfv-row-t b { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.15rem, 1rem + .7vw, 1.6rem); font-weight: 800; letter-spacing: -.02em; color: #0B1324; transition: color .25s; }
.pfv-row-t small { font-size: .78rem; color: #7A879E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfv-row-img { display: none; }
.pfv-row.is-on, .pfv-row:hover, .pfv-row:focus-visible { padding-left: 14px; background: linear-gradient(90deg, #F2F7FF, transparent); outline: 0; }
.pfv-row.is-on .pfv-row-n, .pfv-row:hover .pfv-row-n { color: #0B5FFF; }
.pfv-row.is-on .pfv-row-t b, .pfv-row:hover .pfv-row-t b { color: #0B5FFF; }
.pfv-row.is-on .pfv-go, .pfv-row:hover .pfv-go { color: #fff; background: #0B5FFF; transform: rotate(45deg); }
.pfv-idx-stage { position: sticky; top: 100px; }
.pfv-idx-frame { overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 40px 80px -36px rgba(16,32,72,.45); }
.pfv-idx-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F1F4F9; border-bottom: 1px solid #E6EAF1; }
.pfv-idx-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; }
.pfv-idx-bar i:nth-child(2) { background: #FEBC2E; }
.pfv-idx-bar i:nth-child(3) { background: #28C840; }
.pfv-idx-bar span { margin-left: 8px; padding: 3px 12px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #475569; background: #fff; }
.pfv-idx-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; transition: opacity .25s, transform .5s cubic-bezier(.2,.8,.2,1); }
.pfv-idx-frame img.is-swap { opacity: 0; transform: scale(1.03); }

@media (max-width: 860px) {
  .pfv { padding-block: 64px 56px; }
  .pfv-masonry { columns: 2 160px; column-gap: 12px; }
  .pfv-tile { margin-bottom: 12px; border-radius: 16px; }
  .pfv-tile-shot { height: 180px; } .pfv-tile-shot.tall { height: 260px; }
  .pfv-tile:hover .pfv-tile-shot img { transform: translateY(calc(-100% + 180px)); }
  .pfv-tile:hover .pfv-tile-shot.tall img { transform: translateY(calc(-100% + 260px)); }
  .pfv-tile-shot::after { content: "Tap to preview"; }
  .pfv-tile-info { padding: 10px 12px; }
  .pfv-tile-info b { font-size: .88rem; }
  .pfv-tile-info .pfv-go { display: none; }
  .pfv-car-top { grid-template-columns: 1fr; }
  .pfv-car-arrows { display: none; }
  .pfv-slide-info b { font-size: 1.3rem; }
  .pfv-slide-info p { display: none; }
  .pfv-idx-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .pfv-idx-stage { display: none; }
  .pfv-row { flex-wrap: wrap; padding: 14px 4px; }
  .pfv-row-img { display: block; order: 5; flex: 1 1 100%; margin-top: 10px; border-radius: 14px; overflow: hidden; border: 1px solid #E3E8F1; }
  .pfv-row-img img { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; object-position: top; }
  .pfv-row.is-on, .pfv-row:hover { padding-left: 4px; }
}
@media (prefers-reduced-motion: reduce) { .pfv * { animation: none !important; transition: none !important; } }
.pfv .pfv-flag { display: inline-block; }
.pfv-slide-shade { background: linear-gradient(180deg, rgba(5,10,25,.05) 20%, rgba(5,10,25,.7) 55%, rgba(5,10,25,.95) 100%); }

/* ============================================================================
   Portfolio round two: Q1 coverflow · Q2 marquee · Q3 zigzag · Q4 bento
   ========================================================================== */
.pfx { position: relative; overflow: hidden; overflow: clip; padding-block: 84px 72px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #0B1324; }

/* Q1 coverflow (chosen): modern head, glow + reflection, tilt, description, dots */
.pfx-cf { color: #fff; background: #070C1C; padding-block: 96px 80px; }
.pfx-cf-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pfx-cf-bg i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; }
.pfx-cf-bg .a { width: 620px; height: 620px; left: -160px; top: -220px; background: #1D4ED8; animation: pfx-orb 18s ease-in-out infinite alternate; }
.pfx-cf-bg .b { width: 560px; height: 560px; right: -180px; bottom: -200px; background: #7C3AED; opacity: .38; animation: pfx-orb 22s ease-in-out infinite alternate-reverse; }
.pfx-cf-bg .stars { inset: 0; width: auto; height: auto; border-radius: 0; filter: none; opacity: .5; background-image: radial-gradient(rgba(255,255,255,.55) 1px, transparent 1.4px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 75%); }
@keyframes pfx-orb { to { transform: translate(120px, 80px) scale(1.15); } }
.pfx-cf .pfv-inner { position: relative; }

.pfx-cf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.pfx-cf-headl { max-width: 720px; }
.pfx-cf-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #BFD6FF; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pfx-cf-kicker i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pfx-ping 2s infinite; }
@keyframes pfx-ping { 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.pfx-cf-title { margin: 18px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(2.3rem, 1.5rem + 3.2vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; color: #fff; }
.pfx-cf-title span { display: block; padding-bottom: .08em; background: linear-gradient(90deg, #60A5FA 0%, #34D399 45%, #A78BFA 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: pfx-shine 8s ease-in-out infinite alternate; }
@keyframes pfx-shine { to { background-position: 100% 0; } }
.pfx-cf-sub { margin: 18px 0 0; max-width: 520px; font-size: 1.06rem; line-height: 1.65; color: #A9B6D3; }
.pfx-cf-stats { display: flex; gap: 12px; flex: 0 0 auto; }
.pfx-cf-stat { display: grid; align-content: end; gap: 2px; min-width: 150px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.03)); border: 1px solid rgba(255,255,255,.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pfx-cf-stat b { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 2.3rem; font-weight: 800; line-height: 1; letter-spacing: -.03em; }
.pfx-cf-stat span { font-size: .8rem; font-weight: 600; color: #A9B6D3; }
.pfx-cf-stat .pfx-cf-flags { display: flex; margin-bottom: 8px; }
.pfx-cf-flags img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 2px solid #0E1630; margin-left: -6px; }
.pfx-cf-flags img:first-child { margin-left: 0; }

.pfx-cf-stage { position: relative; height: clamp(320px, 36vw, 500px); margin-top: 56px; perspective: 1700px; touch-action: pan-y; }
.pfx-cf-stage::before { content: ""; position: absolute; left: 50%; top: 8%; width: min(760px, 90vw); height: 80%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(59,130,246,.55), rgba(124,58,237,.25) 55%, transparent); filter: blur(30px); pointer-events: none; }
.pfx-cf-card { position: absolute; left: 50%; top: 0; width: min(660px, 80vw); margin-left: calc(min(660px, 80vw) / -2); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.8); transition: transform .8s cubic-bezier(.2,.8,.2,1), opacity .6s; cursor: pointer; }
.pfx-cf-card.is-tilt { transition: transform .18s ease-out, opacity .6s, filter .6s; }
.pfx-cf-card.is-front { box-shadow: 0 50px 120px -30px rgba(59,130,246,.7), 0 0 0 1px rgba(255,255,255,.25); }
.pfx-cf-bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; background: #EEF1F6; }
.pfx-cf-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .pfx-cf-bar i:nth-child(2) { background: #FEBC2E; } .pfx-cf-bar i:nth-child(3) { background: #28C840; }
.pfx-cf-bar span { margin-left: 8px; padding: 3px 11px; border-radius: 999px; font-size: .72rem; font-weight: 600; color: #475569; background: #fff; }
.pfx-cf-view { position: relative; aspect-ratio: 16 / 9.5; overflow: hidden; background: #E9EEF6; }
.pfx-cf-view img { display: block; width: 100%; height: auto; min-height: 100%; object-fit: cover; object-position: top; }
.pfx-cf-card.is-front.is-scroll .pfx-cf-view img { animation: pf2-scroll var(--pf2-dur, 16s) ease-in-out infinite alternate; }
.pfx-cf-play { position: absolute; right: 14px; bottom: 14px; padding: 8px 14px; border-radius: 999px; font-size: .8rem; font-weight: 800; color: #fff; background: rgba(7,12,28,.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.2); opacity: 0; transform: translateY(8px); transition: all .35s; }
.pfx-cf-card.is-front .pfx-cf-play { opacity: 1; transform: none; }
.pfx-cf-card.is-front:hover .pfx-cf-play { background: #2563EB; }

.pfx-cf-info { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 24px; max-width: 860px; margin: 64px auto 0; }
.pfx-cf-text { display: grid; justify-items: center; gap: 14px; text-align: center; }
/* every project's text is in the page; all share one grid cell so the height
   never jumps, and only the front project's text is shown */
.pfx-cf-slides { display: grid; width: 100%; }
.pfx-cf-slide { grid-area: 1 / 1; display: grid; justify-items: center; align-content: start; gap: 10px; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
.pfx-cf-slide.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.pfx-cf-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.pfx-cf-count { font-size: .8rem; font-weight: 700; color: #7D8BAA; font-variant-numeric: tabular-nums; }
.pfx-cf-count b { color: #fff; }
.pfx-cf-tag { padding: 4px 11px; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #052E22; background: #6EE7B7; }
.pfx-cf-country { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: #DCE6FA; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
.pfx-cf-country img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.pfx-cf-name { margin: 0; color: #fff; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.pfx-cf-desc { margin: 0; max-width: 700px; font-size: .98rem; line-height: 1.65; color: #A9B6D3; }
.pfx-cf-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 12px 20px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 800; color: #070C1C; background: #fff; box-shadow: 0 10px 30px -10px rgba(255,255,255,.4); transition: transform .2s, box-shadow .2s; }
.pfx-cf-open:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(96,165,250,.7); }
.pfx-cf-arrow { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .2s, border-color .2s; }
.pfx-cf-arrow:hover { background: #2563EB; border-color: #2563EB; transform: scale(1.06); }
.pfx-cf-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 30px; }
.pfx-cf-dots button { position: relative; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; transition: width .4s cubic-bezier(.2,.8,.2,1); }
.pfx-cf-dots button i { position: absolute; left: 3px; right: 3px; top: 9px; height: 4px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,.22); }
.pfx-cf-dots button:hover i { background: rgba(255,255,255,.45); }
.pfx-cf-dots button.is-on { width: 56px; }
.pfx-cf-dots button.is-on i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #60A5FA, #34D399); transform-origin: left; }
.pfx-cf.is-auto .pfx-cf-dots button.is-on i::after { animation: pfx-prog var(--pfx-int, 7s) linear forwards; }
.pfx-cf.is-paused .pfx-cf-dots button.is-on i::after { animation-play-state: paused; }
@keyframes pfx-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.pfx-cf .pfv-cta { margin-top: 36px; }
.pfx-cf .pfv-btn { color: #fff; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.22); }
.pfx-cf .pfv-btn:hover { color: #fff; background: rgba(255,255,255,.1); }
.pfx-cf .pfv-btn-main { border-color: transparent; background: linear-gradient(135deg, #3B82F6, #2563EB); }
@media (max-width: 860px) {
  .pfx-cf { padding-block: 64px 56px; }
  .pfx-cf-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .pfx-cf-sub { font-size: .98rem; margin-top: 14px; }
  .pfx-cf-stats { width: 100%; }
  .pfx-cf-stat { flex: 1 1 0; min-width: 0; padding: 12px 14px; }
  .pfx-cf-stat b { font-size: 1.8rem; }
  .pfx-cf-stage { height: 250px; margin-top: 34px; }
  .pfx-cf-play { right: 10px; bottom: 10px; padding: 6px 11px; font-size: .72rem; }
  .pfx-cf-info { gap: 8px; margin-top: 46px; }
  .pfx-cf-arrow { width: 42px; height: 42px; }
  .pfx-cf-desc { font-size: .9rem; }
  .pfx-cf-dots { margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .pfx-cf-bg i, .pfx-cf-title span, .pfx-cf-kicker i { animation: none; } }

/* Q2 marquee */
.pfx-mq { background: linear-gradient(180deg, #F3F7FF 0%, #FFFFFF 100%); }
.pfx-mq-rows { display: grid; gap: 18px; margin-top: 40px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pfx-mq-row { overflow: hidden; }
.pfx-mq-track { display: flex; gap: 18px; width: max-content; animation: pfx-mq 55s linear infinite; }
.pfx-mq-row.rev .pfx-mq-track { animation-direction: reverse; animation-duration: 62s; }
.pfx-mq-rows:hover .pfx-mq-track { animation-play-state: paused; }
.pfx-mq-card { position: relative; flex: 0 0 auto; width: 340px; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 18px; cursor: pointer; background: #E9EEF6; box-shadow: 0 16px 36px -20px rgba(16,32,72,.45); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pfx-mq-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s; }
.pfx-mq-card:hover { transform: translateY(-6px) scale(1.03); z-index: 2; }
.pfx-mq-card:hover img { transform: scale(1.05); }
.pfx-mq-label { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(8px); opacity: 0; transition: all .3s; }
.pfx-mq-card:hover .pfx-mq-label { transform: none; opacity: 1; }
.pfx-mq-label b { font-size: .88rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pfx-mq-label small { flex: 0 0 auto; font-size: .7rem; font-weight: 700; color: #6B7891; }
@keyframes pfx-mq { to { transform: translateX(calc(-50% - 9px)); } }

/* Q3 zigzag */
.pfx-zz { background: #fff; }
.pfx-zz-list { display: grid; gap: 56px; margin-top: 46px; }
.pfx-zz-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 46px; align-items: center; }
.pfx-zz-row.flip .pfx-zz-media { order: 2; }
.pfx-zz-media { overflow: hidden; border-radius: 20px; cursor: pointer; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 40px 80px -40px rgba(16,32,72,.5); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.pfx-zz-media:hover { transform: translateY(-4px); }
.pfx-zz-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #F1F4F9; border-bottom: 1px solid #E6EAF1; }
.pfx-zz-bar i { width: 9px; height: 9px; border-radius: 50%; background: #FF5F57; } .pfx-zz-bar i:nth-child(2) { background: #FEBC2E; } .pfx-zz-bar i:nth-child(3) { background: #28C840; }
.pfx-zz-bar span { margin-left: 8px; padding: 3px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #475569; background: #fff; }
.pfx-zz-view { aspect-ratio: 16 / 10; overflow: hidden; background: #E9EEF6; }
.pfx-zz-view img { display: block; width: 100%; height: auto; }
.pfx-zz-row.in .pfx-zz-view.is-scroll img { animation: pf2-scroll var(--pf2-dur, 16s) ease-in-out infinite alternate; }
.pfx-zz-num { display: block; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 3.4rem; font-weight: 800; line-height: 1; color: #E4EAF5; }
.pfx-zz-tag { display: inline-flex; align-items: center; margin-top: 10px; padding: 4px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #0B5FFF; background: #EEF4FF; }
.pfx-zz-text h3 { margin: 12px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; }
.pfx-zz-text p { margin: 10px 0 0; font-size: .97rem; line-height: 1.7; color: #55627B; }
.pfx-zz-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 12px 18px; border: 0; border-radius: 12px; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 800; color: #fff; background: #0B1324; transition: background .2s, gap .2s; }
.pfx-zz-open:hover { background: #0B5FFF; gap: 12px; }
.pfx-js .pfx-zz-row { opacity: 0; transform: translateY(46px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.pfx-js .pfx-zz-row.in { opacity: 1; transform: none; }
.pfx-zz-more { margin: 40px 0 0; text-align: center; font-size: .9rem; font-weight: 600; color: #6B7891; }

/* Q4 bento */
.pfx-bn { background: #F2F4F8; }
.pfx-bn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 190px; grid-auto-flow: dense; gap: 14px; margin-top: 36px; }
.pfx-bn-tile { position: relative; overflow: hidden; border-radius: 22px; cursor: pointer; background: #E3E8F1; box-shadow: 0 16px 36px -24px rgba(16,32,72,.5); animation: hq-rise .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i, 0) * .06s); }
.pfx-bn-tile.xl { grid-column: span 2; grid-row: span 2; }
.pfx-bn-tile.tall { grid-row: span 2; }
.pfx-bn-tile.wide { grid-column: span 2; }
.pfx-bn-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.pfx-bn-tile.xl img, .pfx-bn-tile.tall img { height: auto; min-height: 100%; }
.pfx-bn-tile.xl img.is-scroll { animation: pf2-scroll var(--pf2-dur, 16s) ease-in-out infinite alternate; }
.pfx-bn-tile.tall:hover img { transform: translateY(calc(-100% + 394px)); transition: transform 6s ease-in-out; }
.pfx-bn-tile:not(.tall):not(.xl):hover img { transform: scale(1.06); }
.pfx-bn-over { position: absolute; inset: auto 0 0 0; display: grid; gap: 4px; padding: 16px; color: #fff; background: linear-gradient(180deg, transparent, rgba(5,10,25,.85)); transform: translateY(20%); opacity: .0; transition: all .35s cubic-bezier(.2,.8,.2,1); }
.pfx-bn-tile.xl .pfx-bn-over { opacity: 1; transform: none; }
.pfx-bn-tile:hover .pfx-bn-over, .pfx-bn-tile:focus-visible .pfx-bn-over { opacity: 1; transform: none; }
.pfx-bn-tag { justify-self: start; display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0B1324; background: #7DF0CF; }
.pfx-bn-over b { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.15rem; font-weight: 800; }
.pfx-bn-tile.xl .pfx-bn-over b { font-size: 1.6rem; }
.pfx-bn-open { display: inline-flex; align-items: center; gap: 5px; font-size: .78rem; font-weight: 800; color: #9CC2FF; }
.pfx-bn-more { display: grid; place-content: center; text-align: center; color: #fff; text-decoration: none; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); }
.pfx-bn-more b { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 2.6rem; font-weight: 800; line-height: 1; }
.pfx-bn-more span { font-size: .88rem; font-weight: 700; opacity: .9; }
.pfx-bn-more:hover { color: #fff; filter: brightness(1.08); }

@media (max-width: 860px) {
  .pfx { padding-block: 64px 56px; }
  .pfx-mq-card { width: 240px; }
  .pfx-mq-label { opacity: 1; transform: none; padding: 6px 10px; }
  .pfx-zz-list { gap: 40px; margin-top: 30px; }
  .pfx-zz-row { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pfx-zz-row.flip .pfx-zz-media { order: 0; }
  .pfx-zz-num { font-size: 2.4rem; }
  .pfx-bn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .pfx-bn-tile.wide { grid-column: span 2; }
  .pfx-bn-over { opacity: 1; transform: none; padding: 10px; }
  .pfx-bn-over b { font-size: .9rem; }
  .pfx-bn-open { display: none; }
  .pfx-bn-tile.tall:hover img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pfx * { animation: none !important; transition: none !important; } .pfx-js .pfx-zz-row { opacity: 1; transform: none; } }
/* bento: the "more" tile is a full-width banner so no row is left half empty */
.pfx-bn-more { grid-column: 1 / -1; grid-row: span 1; display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 0; }
.pfx-bn-more b { font-size: 2rem; }
.pfx-bn-more span { font-size: 1rem; }
.pfx-bn-more i { font-style: normal; margin-left: 8px; padding: 8px 14px; border-radius: 999px; font-size: .85rem; font-weight: 800; color: #0B5FFF; background: #fff; }
.pfx-bn-grid { grid-auto-rows: 190px; }
.pfx-bn-grid > .pfx-bn-more { height: 96px; align-self: start; }
@media (max-width: 860px) { .pfx-bn-grid > .pfx-bn-more { height: 80px; } .pfx-bn-more span { font-size: .85rem; } .pfx-bn-more i { display: none; } }
.pfx-bn > .pfv-inner > .pfx-bn-more { margin-top: 14px; height: 96px; border-radius: 22px; box-shadow: 0 16px 36px -24px rgba(11,95,255,.6); }
@media (max-width: 860px) { .pfx-bn > .pfv-inner > .pfx-bn-more { margin-top: 10px; height: 76px; border-radius: 18px; } }
/* flags inside cards keep their own small size (card image rules target img) */
.pfx-bn-tile img.pfv-flag, .pfx-mq-card img.pfv-flag, .pfx .pfv-flag { position: static; inset: auto; width: 14px; height: 14px; min-height: 0; margin-right: 5px; transform: none !important; animation: none !important; object-fit: cover; }

/* hero: texts kept from the old hero (status pills, "What do you need?", fields to go) */
.hq-q-hint { margin: -4px 0 12px; font-size: .8rem; font-weight: 600; color: #8592AC; }
.hc-status { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0; padding: 0; }
.hc-status li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 6px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #3A475F; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 6px 16px -12px rgba(16,32,72,.4); animation: hq-rise .6s cubic-bezier(.2,.8,.2,1) both; }
.hc-status li:nth-child(2) { animation-delay: .08s; } .hc-status li:nth-child(3) { animation-delay: .16s; } .hc-status li:nth-child(4) { animation-delay: .24s; }
.hc-status svg { box-sizing: content-box; padding: 4px; border-radius: 50%; }
.hc-status .b svg { color: #2563EB; background: #EAF1FF; }
.hc-status .g svg { color: #059669; background: #E7F8F1; }
.hc-status .o svg { color: #D97706; background: #FFF4E0; }
.hq-left { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-size: .78rem; font-weight: 700; color: #55627B; }
.hq-left-bar { position: relative; flex: 1 1 auto; height: 5px; border-radius: 5px; overflow: hidden; background: #E8EDF5; }
.hq-left-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 5px; background: linear-gradient(90deg, #2F7BFF, #18B47B); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.hq-left.is-done { color: #059669; }
@media (max-width: 860px) { .hc-status { order: 9; gap: 6px; margin-top: 12px; } .hc-status li { font-size: .7rem; padding: 4px 9px 4px 5px; } }

/* ============================================================================
   Pricing, four layouts (R1 cards · R2 plan picker · R3 staircase · R4 spotlight)
   ========================================================================== */
.prv { position: relative; overflow: hidden; overflow: clip; padding-block: 92px 76px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #0B1324; background: #fff; }
.prv *, .prv *::before, .prv *::after { box-sizing: border-box; }
.prv-inner { position: relative; max-width: 1200px; margin: 0 auto; padding-inline: 20px; }
.prv-head { max-width: 700px; margin: 0 auto; text-align: center; }
.prv-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #0B5FFF; background: #EEF4FF; }
.prv-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.prv-title { margin: 16px 0 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: clamp(2.1rem, 1.5rem + 2.4vw, 3.5rem); font-weight: 800; line-height: 1.04; letter-spacing: -.035em; color: inherit; }
.prv-sub { margin: 14px auto 0; max-width: 600px; font-size: 1.02rem; line-height: 1.65; color: #55627B; }

/* currency switch: one sliding pill */
.prv-cur { display: grid; justify-items: center; gap: 8px; margin-top: 26px; }
.prv .wm-currency-switch { position: relative; display: inline-flex; gap: 2px; margin: 0; padding: 4px; border-radius: 999px; background: #F1F4F9; border: 1px solid #E3E8F1; }
.prv .wm-currency-switch button { position: relative; z-index: 1; padding: 8px 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .82rem; font-weight: 700; color: #55627B; background: transparent; box-shadow: none; transition: color .25s, background .25s; }
.prv .wm-currency-switch button.is-active { color: #fff; background: #0B1324; box-shadow: 0 6px 16px -8px rgba(11,19,36,.6); }
.prv-cur-note { margin: 0; font-size: .78rem; color: #6B7891; text-align: center; }

.prv-name { margin: 0; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: inherit; }
.prv-tag { margin: 4px 0 0; font-size: .88rem; line-height: 1.5; color: #6B7891; }
.prv-pricebox { margin-top: 18px; }
.prv-price { display: flex; align-items: flex-start; gap: 2px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 3rem; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.prv-price .wm-cur-sym { margin-top: .12em; font-size: .5em; letter-spacing: 0; }
.prv-period { margin: 6px 0 0; font-size: .82rem; font-weight: 600; color: #6B7891; }
.prv-period span { color: #8592AC; font-weight: 500; }
.prv .wm-price-yearly { display: inline-block; margin-top: 8px; padding: 4px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: #047857; background: #E7F8F1; }
.prv .wm-price-yearly[hidden] { display: none; }
.prv-incl { margin: 22px 0 10px; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #8592AC; }
.prv-items { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.prv-items li { display: flex; align-items: flex-start; gap: 10px; font-size: .92rem; line-height: 1.45; color: #2B3850; }
.prv-items li > i { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; color: #059669; background: #E7F8F1; }
.prv-items li.is-inherit { font-weight: 700; color: #0B1324; }
.prv-items li.is-inherit > i { color: #0B5FFF; background: #EEF4FF; }
.prv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 20px; padding: 14px 18px; border-radius: 14px; font-size: .95rem; font-weight: 800; text-decoration: none; color: #0B1324; background: #fff; border: 1.5px solid #D6DDE9; transition: transform .2s, box-shadow .2s, background .2s, border-color .2s, gap .2s; }
.prv-btn:hover { gap: 12px; color: #0B1324; border-color: #0B1324; transform: translateY(-2px); }
.prv-btn.is-main { color: #fff; border-color: transparent; background: linear-gradient(135deg, #2F7BFF, #0B5FFF); box-shadow: 0 14px 30px -14px rgba(11,95,255,.8); }
.prv-btn.is-main:hover { color: #fff; box-shadow: 0 18px 36px -14px rgba(11,95,255,.95); }
.prv-btn.is-light { color: #0B1324; background: #fff; border-color: transparent; }
.prv-pop { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #3B2600; background: linear-gradient(135deg, #FFD66B, #FFB020); }
.prv-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; max-width: 760px; margin: 34px auto 0; font-size: .86rem; line-height: 1.6; color: #55627B; text-align: left; }
.prv-note svg { flex: 0 0 auto; margin-top: 3px; color: #0B5FFF; }
.prv-note a { font-weight: 800; color: #0B5FFF; white-space: nowrap; }
.prv-note a::after { content: " →"; }

/* R1 cards */
.prv-r1 { background: linear-gradient(180deg, #F6F8FC 0%, #FFFFFF 70%); }
.prv-r1::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#E9EEF6 1px, transparent 1px), linear-gradient(90deg, #E9EEF6 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 70%); }
.prv-r1-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; margin-top: 44px; }
.prv-r1-card { position: relative; padding: 30px 28px; border-radius: 26px; background: #fff; border: 1px solid #E3E8F1; box-shadow: 0 24px 50px -36px rgba(16,32,72,.45); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; animation: hq-rise .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .1s); }
.prv-r1-card:hover { transform: translateY(-6px); box-shadow: 0 34px 60px -34px rgba(16,32,72,.55); }
.prv-r1-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; border-radius: 14px; color: #0B5FFF; background: #EEF4FF; }
.prv-r1-card.is-pop { color: #fff; background: #0B1324; border-color: transparent; margin-top: -14px; padding-block: 44px 34px; box-shadow: 0 40px 80px -36px rgba(11,95,255,.65); }
.prv-r1-card.is-pop::before { content: ""; position: absolute; inset: -1.5px; z-index: -1; border-radius: 27px; background: conic-gradient(from var(--prv-a, 0deg), #2F7BFF, #34D399, #A78BFA, #2F7BFF); animation: prv-spin 6s linear infinite; }
@property --prv-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes prv-spin { to { --prv-a: 360deg; } }
.prv-r1-card.is-pop { isolation: isolate; }
.prv-r1-card.is-pop::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 26px; background: radial-gradient(400px 200px at 50% 0%, #1B2E66, #0B1324 70%); }
.prv-r1-card.is-pop .prv-r1-ic { color: #fff; background: rgba(255,255,255,.1); }
.prv-r1-card.is-pop .prv-tag, .prv-r1-card.is-pop .prv-period { color: #A9B6D3; }
.prv-r1-card.is-pop .prv-items li { color: #DCE6FA; }
.prv-r1-card.is-pop .prv-items li.is-inherit { color: #fff; }
.prv-r1-card.is-pop .prv-items li > i { color: #6EE7B7; background: rgba(110,231,183,.14); }
.prv-r1-card.is-pop .prv-items li.is-inherit > i { color: #9CC2FF; background: rgba(47,123,255,.2); }
.prv-r1-card.is-pop .prv-incl { color: #7D8BAA; }
.prv-r1 .prv-pop { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 8px 20px -8px rgba(255,176,32,.8); }

/* R2 plan picker */
.prv-r2 { background: #F4F6FA; }
.prv-r2-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: start; margin-top: 44px; }
.prv-r2-list { display: grid; gap: 12px; }
.prv-r2-opt { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border-radius: 20px; cursor: pointer; text-align: left; font: inherit; color: inherit; background: #fff; border: 1.5px solid #E3E8F1; transition: border-color .25s, box-shadow .25s, transform .25s; }
.prv-r2-opt:hover { border-color: #B9C7E0; transform: translateX(3px); }
.prv-r2-opt.is-on { border-color: #0B5FFF; box-shadow: 0 0 0 4px rgba(11,95,255,.12), 0 20px 40px -26px rgba(11,95,255,.6); }
.prv-r2-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C6D0E1; transition: all .25s; }
.prv-r2-opt.is-on .prv-r2-radio { border: 7px solid #0B5FFF; }
.prv-r2-t { display: grid; gap: 3px; min-width: 0; }
.prv-r2-t b { font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 1.15rem; font-weight: 800; }
.prv-r2-t b em { margin-left: 6px; padding: 3px 8px; border-radius: 999px; font-style: normal; font-family: Inter, sans-serif; font-size: .62rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #3B2600; background: #FFD66B; vertical-align: 3px; }
.prv-r2-t small { font-size: .82rem; color: #6B7891; }
.prv-r2-opt .prv-pricebox { margin: 0; text-align: right; }
.prv-r2-opt .prv-price { justify-content: flex-end; font-size: 1.8rem; }
.prv-r2-opt .prv-period { margin-top: 3px; font-size: .72rem; }
.prv-r2-opt .wm-price-yearly { font-size: .66rem; padding: 3px 8px; margin-top: 4px; }
.prv-r2-panels { display: grid; }
.prv-r2-panel { grid-area: 1 / 1; padding: 30px; border-radius: 24px; color: #fff; background: radial-gradient(500px 260px at 100% 0%, #1E4FD8 0%, #0B1324 65%); box-shadow: 0 40px 80px -40px rgba(11,19,36,.7); opacity: 0; visibility: hidden; transform: translateY(10px) scale(.99); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), visibility 0s .35s; }
.prv-r2-panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.prv-r2-top { display: flex; align-items: center; gap: 14px; }
.prv-r2-ic { display: grid; place-items: center; flex: 0 0 auto; width: 50px; height: 50px; border-radius: 15px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14); }
.prv-r2-panel .prv-tag { color: #A9B6D3; }
.prv-r2-panel .prv-incl { color: #7D8BAA; }
.prv-r2-panel .prv-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.prv-r2-panel .prv-items li { color: #DCE6FA; }
.prv-r2-panel .prv-items li.is-inherit { grid-column: 1 / -1; color: #fff; }
.prv-r2-panel .prv-items li > i { color: #6EE7B7; background: rgba(110,231,183,.14); }
.prv-r2-panel .prv-items li.is-inherit > i { color: #9CC2FF; background: rgba(47,123,255,.22); }
.prv-r2-panel.is-on .prv-items li { animation: hq-rise .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * .04s); }
.prv-r2-panel .prv-btn { margin-top: 26px; }

/* R3 staircase */
.prv-r3 { background: #fff; }
.prv-r3-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; margin-top: 50px; }
.prv-r3-step { position: relative; display: flex; flex-direction: column; padding: 28px 26px; border-radius: 26px 26px 18px 18px; background: #F2F6FD; border: 1px solid #E1E9F7; }
.prv-r3-step.s1 { min-height: 560px; }
.prv-r3-step.s2 { min-height: 640px; background: #E6EEFE; border-color: #CFDDFB; }
.prv-r3-step.s3 { min-height: 720px; color: #fff; border-color: transparent; background: linear-gradient(165deg, #2F7BFF 0%, #0B3FC4 100%); box-shadow: 0 40px 80px -40px rgba(11,63,196,.8); }
.prv-r3-step .prv-btn { margin-top: auto; }
.prv-r3-step .prv-items { margin: 22px 0 24px; }
.prv-r3-num { position: absolute; top: 18px; right: 22px; font-family: "Bricolage Grotesque", Inter, sans-serif; font-size: 3.6rem; font-weight: 800; line-height: 1; color: rgba(11,95,255,.12); }
.prv-r3-step.s3 .prv-r3-num { color: rgba(255,255,255,.16); }
.prv-r3-nameline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-right: 56px; }
.prv-r3-step .prv-items li > i { color: #0B5FFF; background: #fff; }
.prv-r3-step.s3 .prv-tag, .prv-r3-step.s3 .prv-period, .prv-r3-step.s3 .prv-period span { color: #CFE0FF; }
.prv-r3-step.s3 .prv-items li { color: #EAF1FF; }
.prv-r3-step.s3 .prv-items li.is-inherit { color: #fff; }
.prv-r3-step.s3 .prv-items li > i { color: #fff; background: rgba(255,255,255,.18); }
.prv-r3-step.s3 .wm-price-yearly { color: #0B3FC4; background: #fff; }
.prv-js .prv-r3-step { opacity: 0; transform: translateY(60px); transition: opacity .8s, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * .15s); }
.prv-js .prv-r3-steps.in .prv-r3-step { opacity: 1; transform: none; }

/* R4 spotlight */
.prv-r4 { color: #fff; background: #0A0F1E; }
.prv-r4-bg { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(700px 360px at 50% -10%, rgba(47,123,255,.35), transparent 70%), radial-gradient(500px 300px at 90% 100%, rgba(124,58,237,.22), transparent 70%); }
.prv-r4 .prv-eyebrow { color: #9CC2FF; background: rgba(47,123,255,.14); }
.prv-r4 .prv-sub, .prv-r4 .prv-cur-note { color: #A9B6D3; }
.prv-r4 .wm-currency-switch { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.prv-r4 .wm-currency-switch button { color: #A9B6D3; }
.prv-r4 .wm-currency-switch button.is-active { color: #0A0F1E; background: #fff; }
.prv-r4-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.prv-r4-card { --mx: 50%; --my: 0%; position: relative; padding: 1.5px; border-radius: 24px; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(125,170,255,.75), rgba(255,255,255,.08) 45%); transition: transform .3s; }
.prv-r4-card.is-pop { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(110,231,183,.9), rgba(47,123,255,.45) 50%, rgba(167,139,250,.4)); }
.prv-r4-in { position: relative; height: 100%; padding: 28px 26px; border-radius: 23px; overflow: hidden; background: #0E1528; }
.prv-r4-in::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(47,123,255,.16), transparent 60%); }
.prv-r4-nameline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.prv-r4-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #9CC2FF; background: rgba(47,123,255,.14); }
.prv-r4 .prv-tag, .prv-r4 .prv-period { color: #8E9BBA; }
.prv-r4 .prv-price { background: linear-gradient(180deg, #fff, #A9C4F5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prv-r4 .prv-items { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.08); }
.prv-r4 .prv-items li { color: #C9D4EA; }
.prv-r4 .prv-items li.is-inherit { color: #fff; }
.prv-r4 .prv-items li > i { color: #6EE7B7; background: rgba(110,231,183,.12); }
.prv-r4 .prv-items li.is-inherit > i { color: #9CC2FF; background: rgba(47,123,255,.2); }
.prv-btn.is-ghost { color: #fff; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.prv-btn.is-ghost:hover { color: #fff; border-color: rgba(255,255,255,.4); }
.prv-r4 .prv-note { color: #A9B6D3; }
.prv-r4 .prv-note svg, .prv-r4 .prv-note a { color: #9CC2FF; }
.prv-r4 .wm-price-yearly { color: #6EE7B7; background: rgba(110,231,183,.12); }
.prv-r4-dots { display: none; }

@media (max-width: 960px) {
  .prv { padding-block: 66px 56px; }
  .prv-r1-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 520px; margin-inline: auto; }
  .prv-r1-card.is-pop { margin-top: 0; padding-block: 38px 30px; }
  .prv-r2-wrap { grid-template-columns: minmax(0, 1fr); }
  .prv-r2-opt { padding: 16px; gap: 12px; }
  .prv-r2-opt:hover { transform: none; }
  .prv-r2-opt .prv-price { font-size: 1.45rem; }
  .prv-r2-t small { display: none; }
  .prv-r2-panel { padding: 24px 20px; }
  .prv-r2-panel .prv-items { grid-template-columns: minmax(0, 1fr); }
  .prv-r3-steps { grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 520px; margin-inline: auto; }
  .prv-r3-step.s1, .prv-r3-step.s2, .prv-r3-step.s3 { min-height: 0; }
  .prv-r3-step.s2 { margin-left: 14px; } .prv-r3-step.s3 { margin-left: 28px; }
  .prv-r4-row { display: flex; gap: 14px; margin-inline: -20px; padding: 0 20px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .prv-r4-row::-webkit-scrollbar { display: none; }
  .prv-r4-card { flex: 0 0 84%; scroll-snap-align: center; }
  .prv-r4-dots { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
  .prv-r4-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(255,255,255,.25); transition: width .3s, background .3s; }
  .prv-r4-dots i.is-on { width: 22px; background: #6EE7B7; }
  .prv-note { font-size: .82rem; }
}
@media (prefers-reduced-motion: reduce) { .prv *, .prv *::before { animation: none !important; } .prv-js .prv-r3-step { opacity: 1; transform: none; } }
.prv-r3-head .prv-tag { padding-right: 56px; }

/* Coverflow speed (2026-11-06, owner: scrolling felt slow at this section).
   Measured: this section took ~90 ms a frame against ~17 ms for every other one.
   Cheaper versions of the same look: no CSS filter, reflection or big shadow on
   the side cards (a dark overlay instead), no blur filters on the background
   glows (plain radial gradients), no backdrop blur, and loops pause off screen. */
.pfx-cf-card { box-shadow: 0 30px 60px -34px rgba(0,0,0,.8); will-change: transform; }
.pfx-cf-card::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: #070C1C; opacity: var(--dim, 0); pointer-events: none; transition: opacity .6s; }
.pfx-cf-card.is-front { box-shadow: 0 50px 100px -40px rgba(59,130,246,.7), 0 0 0 1px rgba(255,255,255,.25); }
.pfx-cf-stage::before { filter: none; background: radial-gradient(closest-side, rgba(59,130,246,.42), rgba(124,58,237,.18) 60%, transparent); }
.pfx-cf-stage::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: min(640px, 82vw); height: 90px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(96,165,250,.32), transparent); pointer-events: none; }
.pfx-cf-bg i.a, .pfx-cf-bg i.b { filter: none; will-change: transform; }
.pfx-cf-bg .a { opacity: .5; background: radial-gradient(closest-side, #1D4ED8, transparent); }
.pfx-cf-bg .b { opacity: .35; background: radial-gradient(closest-side, #7C3AED, transparent); }
.pfx-cf-kicker, .pfx-cf-stat, .pfx-cf-play, .pfx-cf-arrow { -webkit-backdrop-filter: none; backdrop-filter: none; }
.pfx-cf-stat { background: linear-gradient(160deg, rgba(255,255,255,.1), rgba(255,255,255,.04)); }
.pfx-cf-play { background: rgba(7,12,28,.82); }
.pfx-cf.is-off *, .pfx-cf.is-off *::before, .pfx-cf.is-off *::after { animation-play-state: paused !important; }