/* ========================================
   WEBLANCE — Home Pro  (hero = 1 viewport)
   ======================================== */

/* ── Reveal animations ── */
@keyframes wlRevealUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes wlRevealRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hero-reveal-1,.hero-reveal-2,.hero-reveal-3,
.hero-reveal-4,.hero-reveal-5 {
  animation: wlRevealUp 0.72s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-reveal-1 { animation-delay:.05s }
.hero-reveal-2 { animation-delay:.16s }
.hero-reveal-3 { animation-delay:.28s }
.hero-reveal-4 { animation-delay:.40s }
.hero-reveal-5 { animation-delay:.52s }
.hero-reveal-r {
  animation: wlRevealRight 0.80s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:.22s;
}

/* ══════════════════════════════════════════
   HERO  —  exactly one viewport tall
   ══════════════════════════════════════════ */
#hero.wl-hero {
  position: relative;
  overflow: hidden;
  height: calc(100vh - 68px);
  min-height: 580px;
  max-height: 960px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 1200px 700px at -8% -15%,  rgba(99,102,241,.32) 0%, transparent 52%),
    radial-gradient(ellipse  900px 600px at 108% 18%,  rgba(6,182,212,.22)  0%, transparent 48%),
    radial-gradient(ellipse  600px 600px at 52% 115%,  rgba(129,140,248,.20) 0%, transparent 55%),
    radial-gradient(ellipse  450px 400px at 88% 82%,   rgba(236,72,153,.12) 0%, transparent 50%),
    radial-gradient(ellipse  300px 300px at 30% 60%,   rgba(99,102,241,.08) 0%, transparent 60%),
    linear-gradient(155deg, #fafbff 0%, #f0f3ff 35%, #e8edff 70%, #eef2ff 100%);
  border-bottom: 1px solid rgba(99,102,241,.12);
}

/* animated dot grid */
#hero.wl-hero::before {
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(99,102,241,.16) 1.4px, transparent 1.4px);
  background-size: 28px 28px;
  opacity:.55;
  pointer-events:none;
  animation: gridDrift 24s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 28px 28px; }
}

/* top-right orb */
#hero.wl-hero::after {
  content:"";
  position:absolute;
  width:700px; height:700px;
  top:-180px; right:-160px;
  background: radial-gradient(circle, rgba(99,102,241,.22) 0%, rgba(6,182,212,.12) 40%, transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: orbFloat 11s ease-in-out infinite;
}
/* bottom-left orb */
.wl-hero-orb-bl {
  position:absolute;
  width:480px; height:480px;
  bottom:-140px; left:-120px;
  background: radial-gradient(circle, rgba(99,102,241,.15) 0%, rgba(236,72,153,.08) 45%, transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: orbFloat 14s ease-in-out infinite reverse;
}
/* extra mid orb for depth */
.wl-hero-orb-mid {
  position:absolute;
  width:320px; height:320px;
  top:40%; left:42%;
  background: radial-gradient(circle, rgba(129,140,248,.10) 0%, transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: orbFloat 9s ease-in-out infinite;
  animation-delay: 3s;
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-28px) scale(1.06); }
}

.wl-hero-inner { position:relative; z-index:1; width:100%; }

/* ── Badge ── */
.wl-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:7px 18px; border-radius:999px;
  background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.40);
  color:#065f46; font-weight:700; font-size:.76rem; letter-spacing:.4px;
  box-shadow:0 2px 18px rgba(34,197,94,.18), inset 0 1px 0 rgba(255,255,255,.8);
  backdrop-filter:blur(10px);
  margin-bottom:14px;
}
.wl-hero-badge-dot {
  width:8px; height:8px; border-radius:50%; background:#22c55e;
  animation:livePulse 2s infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,.6);
}
@keyframes livePulse {
  0%   { box-shadow:0 0 0 0   rgba(34,197,94,.7); }
  70%  { box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow:0 0 0 0   rgba(34,197,94,0); }
}

/* ── Headline ── */
.wl-hero-title {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.16;
  color: #0a0f1e;
  margin: 0 0 14px;
  overflow: visible;
  word-break: break-word;
}
.wl-hero-title .wl-hero-typewriter {
  display: inline;
  white-space: normal;
}
.wl-hero-title span {
  display:block;
  background:linear-gradient(130deg,#3730a3 0%,#4f46e5 22%,#6366F1 42%,#818CF8 60%,#06b6d4 80%,#22d3ee 100%);
  background-size:240% 240%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleGrad 7s ease infinite;
  filter:drop-shadow(0 4px 18px rgba(99,102,241,.30));
}
@keyframes titleGrad {
  0%   { background-position:0%   60%; }
  50%  { background-position:100% 40%; }
  100% { background-position:0%   60%; }
}

/* ── Lead ── */
.wl-hero-lead {
  color:#475569; font-size:.95rem; line-height:1.76;
  max-width:510px; margin:0 0 22px; font-weight:400;
}

/* ── CTAs ── */
.wl-hero-ctas {
  display:flex; gap:12px; flex-wrap:wrap;
  align-items:center; margin-bottom:20px;
}

/* Primary CTA — shimmer effect */
.wl-hero-ctas .btn-green {
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#6366F1 0%,#4F46E5 50%,#4338ca 100%);
  box-shadow:0 8px 28px rgba(99,102,241,.50), 0 2px 6px rgba(99,102,241,.30), inset 0 1px 0 rgba(255,255,255,.20);
  border:none; padding:13px 32px;
  font-size:.90rem; font-weight:700; border-radius:50px;
  color:#fff; letter-spacing:.02em;
  transition:all .30s cubic-bezier(.34,1.56,.64,1);
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
/* shimmer sweep */
.wl-hero-ctas .btn-green::before {
  content:"";
  position:absolute;
  top:0; left:-100%;
  width:60%; height:100%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg);
  animation:btnShimmer 3.5s ease-in-out infinite;
}
@keyframes btnShimmer {
  0%   { left:-100%; }
  40%  { left:160%; }
  100% { left:160%; }
}
.wl-hero-ctas .btn-green:hover {
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 18px 48px rgba(99,102,241,.58), 0 4px 12px rgba(99,102,241,.30);
  color:#fff;
}

/* Secondary CTA */
.wl-hero-ctas .btn-outline-indigo {
  padding:12px 28px; font-size:.88rem; font-weight:700;
  border-radius:50px; border:2px solid rgba(99,102,241,.35);
  color:#4F46E5; background:rgba(238,242,255,.75);
  backdrop-filter:blur(12px); transition:all .24s ease;
  text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  box-shadow:0 2px 12px rgba(99,102,241,.10);
}
.wl-hero-ctas .btn-outline-indigo:hover {
  background:rgba(99,102,241,.12); border-color:#6366F1;
  transform:translateY(-3px); box-shadow:0 10px 28px rgba(99,102,241,.22);
  color:#4338ca;
}

/* ── Proof pills ── */
.wl-hero-proof {
  display:flex; flex-wrap:wrap; gap:7px; margin-bottom:20px;
}
.wl-proof-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:999px;
  border:1px solid rgba(99,102,241,.16);
  background:rgba(255,255,255,.92); backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(99,102,241,.08), inset 0 1px 0 rgba(255,255,255,.9);
  color:#1e293b; font-weight:600; font-size:.76rem;
  transition:all .22s ease; cursor:default;
}
.wl-proof-pill:hover {
  border-color:rgba(99,102,241,.35);
  background:rgba(238,242,255,.98);
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(99,102,241,.14);
}
.wl-proof-pill i { color:#6366F1; font-size:.72rem; }

/* ── Stats ── */
.wl-hero-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; padding-top:18px;
  border-top:1px solid rgba(99,102,241,.14);
}
.hero-stat-item {
  padding:0 16px 0 0; position:relative;
}
.hero-stat-item:not(:last-child)::after {
  content:""; position:absolute;
  right:8px; top:4px; bottom:4px;
  width:1px; background:rgba(99,102,241,.14);
}
.hero-stat-num {
  font-size:1.55rem; font-weight:900; line-height:1;
  display:block; letter-spacing:-.04em;
  background:linear-gradient(135deg,#0a0f1e 0%,#4338ca 60%,#6366F1 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-stat-lbl {
  font-size:.62rem; color:#64748b;
  letter-spacing:.07em; text-transform:uppercase;
  margin-top:5px; display:block; font-weight:600;
}

/* ══════════════════════════════════════════
   RIGHT — browser mockup
   ══════════════════════════════════════════ */
.wl-hero-right {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:20px 8px 20px 20px;
  height:100%;
}

/* glow halo */
.wl-hero-halo {
  position:absolute; inset:-40px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(99,102,241,.24) 0%, rgba(6,182,212,.10) 42%, transparent 65%);
  pointer-events:none;
  animation:haloPulse 6s ease-in-out infinite; z-index:0;
}
@keyframes haloPulse {
  0%,100% { opacity:.75; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.06); }
}

/* browser card */
.wl-hero-browser {
  position:relative; z-index:1;
  width:100%; max-width:530px;
  background:#fff; border-radius:20px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.15),
    0 4px 8px rgba(0,0,0,.05),
    0 20px 60px rgba(99,102,241,.24),
    0 60px 120px rgba(99,102,241,.12);
  animation:browserFloat 9s ease-in-out infinite;
}
@keyframes browserFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  40%      { transform:translateY(-12px) rotate(.28deg); }
  70%      { transform:translateY(-6px) rotate(-.20deg); }
}

/* chrome bar */
.wl-browser-chrome {
  background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%);
  border-radius:20px 20px 0 0;
  padding:11px 16px 9px;
  border-bottom:1px solid rgba(99,102,241,.10);
  display:flex; align-items:center; gap:12px;
}
.wl-browser-dots { display:flex; gap:6px; flex-shrink:0; }
.wl-browser-dots span {
  width:11px; height:11px; border-radius:50%; display:block;
  transition: transform .2s ease;
}
.wl-browser-dots span:nth-child(1) { background:#fc5c65; box-shadow:0 0 6px rgba(252,92,101,.55); }
.wl-browser-dots span:nth-child(2) { background:#fed330; box-shadow:0 0 6px rgba(254,211,48,.55); }
.wl-browser-dots span:nth-child(3) { background:#26de81; box-shadow:0 0 6px rgba(38,222,129,.55); }
.wl-hero-browser:hover .wl-browser-dots span { transform: scale(1.15); }
.wl-browser-url {
  flex:1; background:rgba(255,255,255,.90);
  border:1px solid rgba(99,102,241,.14); border-radius:8px;
  padding:5px 12px; font-size:.67rem; color:#64748b; font-weight:500;
  display:flex; align-items:center; gap:6px;
  font-family:'Poppins',sans-serif;
}
.wl-browser-url i { color:#22c55e; font-size:.62rem; }

/* screenshot */
.wl-browser-screen {
  border-radius:0 0 20px 20px;
  overflow:hidden; position:relative;
  background:#0f172a; line-height:0;
}
.wl-browser-screen img {
  width:100%; height:auto;
  max-height: clamp(230px, 40vh, 380px);
  object-fit:cover; object-position:top;
  display:block; transition:transform .6s ease;
}
.wl-hero-browser:hover .wl-browser-screen img { transform:scale(1.03); }
.wl-browser-screen::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(15,23,42,.60) 100%);
  pointer-events:none;
}

/* ── Floating stat cards ── */
.wl-hero-stat-card {
  position:absolute;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(99,102,241,.20);
  border-radius:16px; padding:11px 16px;
  display:flex; align-items:center; gap:11px;
  box-shadow:0 8px 32px rgba(99,102,241,.20), 0 2px 8px rgba(0,0,0,.06);
  backdrop-filter:blur(16px); z-index:4; white-space:nowrap;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wl-hero-stat-card:hover {
  box-shadow:0 14px 44px rgba(99,102,241,.28);
  transform: translateY(-3px) !important;
}
.wl-hero-stat-card-icon {
  width:38px; height:38px; border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:.95rem; flex-shrink:0;
}
.wl-hero-stat-card-val {
  font-size:1.05rem; font-weight:900; color:#0a0f1e;
  line-height:1; display:block; letter-spacing:-.02em;
}
.wl-hero-stat-card-lbl {
  font-size:.60rem; color:#64748b; font-weight:600;
  text-transform:uppercase; letter-spacing:.07em;
  display:block; margin-top:3px;
}
.wl-hero-stat-card--tl { top:-18px; left:-18px; animation:fc1 5s ease-in-out infinite; }
.wl-hero-stat-card--tr { top:60px;  right:-22px; animation:fc2 6.5s ease-in-out infinite; }
.wl-hero-stat-card--bl { bottom:32px; left:-22px; animation:fc3 7.5s ease-in-out infinite; }
@keyframes fc1 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-8px) rotate(.5deg)} }
@keyframes fc2 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(8px) rotate(-.5deg)} }
@keyframes fc3 { 0%,100%{transform:translateY(0) rotate(0deg)} 50%{transform:translateY(-6px) rotate(.3deg)} }

/* ── Delivered pill ── */
.wl-hero-delivered {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(99,102,241,.20); border-radius:50px;
  padding:9px 20px; display:flex; align-items:center; gap:10px;
  box-shadow:0 8px 28px rgba(99,102,241,.22);
  font-size:.77rem; font-weight:500; color:#334155;
  white-space:nowrap; z-index:5; backdrop-filter:blur(12px);
  animation:delivBounce 4.5s ease-in-out infinite;
  letter-spacing:0.01em;
}
@keyframes delivBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(-6px); }
}
.wl-hero-delivered i { color:#22c55e; font-size:1rem; }
.wl-hero-delivered-sub {
  font-size:.63rem; color:#64748b; font-weight:500;
  display:block; margin-top:1px;
}

/* ══════════════════════════════════════════
   REST-OF-PAGE CARDS (unchanged)
   ══════════════════════════════════════════ */
.wl-hover-card {
  background:#fff; border:1px solid var(--border-color,#e2e8f0);
  border-radius:20px; padding:28px 24px; height:100%;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative; overflow:hidden;
}
.wl-hover-card:hover {
  border-color:rgba(79,70,229,.35); transform:translateY(-5px);
  box-shadow:0 18px 48px rgba(79,70,229,.12);
}
.wl-process-card {
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius:20px; padding:32px 24px; text-align:center;
  height:100%; position:relative; overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.wl-process-card:hover {
  border-color:rgba(79,70,229,.35); transform:translateY(-4px);
  box-shadow:0 16px 42px rgba(79,70,229,.12);
}
.wl-process-card--primary {
  background:linear-gradient(135deg,#6366F1,#4F46E5);
  border-color:transparent; box-shadow:0 16px 46px rgba(79,70,229,.28);
}
.faq-new-item {
  background:#fff; border:1px solid var(--border-color,#e2e8f0);
  border-radius:16px; overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-new-item:hover {
  border-color:rgba(79,70,229,.25); box-shadow:0 12px 34px rgba(15,23,42,.06);
}
.faq-new-q {
  width:100%; display:flex; align-items:center;
  justify-content:space-between; gap:14px; padding:18px 22px;
  border:none; background:transparent; cursor:pointer;
  font-weight:800; color:#0f172a; text-align:left;
}
.faq-new-body { display:none; padding:0 22px 18px; }
.faq-new-body p { color:#475569; font-size:.9rem; line-height:1.75; margin:0; }
.faq-new-icon {
  width:28px; height:28px; background:#eef2ff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .3s;
}
.faq-new-icon i { color:#6366F1; font-size:.7rem; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width:1199px) {
  .wl-hero-stat-card--tr { right:-8px; }
  .wl-hero-stat-card--bl { left:-8px; }
}
@media (max-width:991px) {
  #hero.wl-hero { height:auto; min-height:unset; padding:56px 0 48px; }
  .wl-hero-right { margin-top:40px; padding:16px 0; }
  .wl-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .hero-stat-item:not(:last-child)::after { display:none; }
  .hero-stat-item { padding:0; }
}
@media (max-width:767px) {
  .wl-hero-title { font-size:clamp(2.2rem,8.5vw,3.2rem); }
  .wl-hero-lead  { font-size:.92rem; }
  #hero.wl-hero::after { width:320px; height:320px; top:-90px; right:-90px; }
  .wl-hero-stat-card { display:none; }
  .wl-hero-orb-bl { display:none; }
}
@media (max-width:575px) {
  .wl-hero-ctas { flex-direction:column; }
  .wl-hero-ctas .btn { width:100%; justify-content:center; }
  .wl-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .wl-hero-delivered { font-size:.70rem; padding:7px 14px; }
}

.hero-reveal-1,.hero-reveal-2,.hero-reveal-3,
.hero-reveal-4,.hero-reveal-5 {
  animation: wlRevealUp 0.65s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-reveal-1 { animation-delay:.05s }
.hero-reveal-2 { animation-delay:.14s }
.hero-reveal-3 { animation-delay:.24s }
.hero-reveal-4 { animation-delay:.34s }
.hero-reveal-5 { animation-delay:.44s }
.hero-reveal-r {
  animation: wlRevealRight 0.75s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay:.20s;
}

/* ══════════════════════════════════════════
   HERO  —  exactly one viewport tall
   ══════════════════════════════════════════ */
#hero.wl-hero {
  position: relative;
  overflow: hidden;
  /* navbar is 68px; fill the rest */
  height: calc(100vh - 68px);
  min-height: 560px;
  max-height: 900px;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 1100px 600px at -5% -10%,  rgba(99,102,241,.30) 0%, transparent 52%),
    radial-gradient(ellipse  800px 500px at 105% 20%,  rgba(6,182,212,.20)  0%, transparent 48%),
    radial-gradient(ellipse  500px 500px at 55% 110%,  rgba(129,140,248,.18) 0%, transparent 55%),
    radial-gradient(ellipse  400px 350px at 85% 80%,   rgba(236,72,153,.10) 0%, transparent 50%),
    linear-gradient(155deg, #fff 0%, #f3f5ff 40%, #eceeff 100%);
  border-bottom: 1px solid rgba(99,102,241,.10);
}

/* dot grid */
#hero.wl-hero::before {
  content:"";
  position:absolute; inset:0;
  background-image: radial-gradient(rgba(99,102,241,.14) 1.2px, transparent 1.2px);
  background-size: 26px 26px;
  opacity:.5;
  pointer-events:none;
  animation: gridDrift 20s linear infinite;
}
@keyframes gridDrift {
  to { background-position: 26px 26px; }
}

/* top-right orb */
#hero.wl-hero::after {
  content:"";
  position:absolute;
  width:600px; height:600px;
  top:-160px; right:-150px;
  background: radial-gradient(circle, rgba(99,102,241,.20) 0%, rgba(6,182,212,.10) 42%, transparent 68%);
  border-radius:50%;
  pointer-events:none;
  animation: orbFloat 10s ease-in-out infinite;
}
/* bottom-left orb */
.wl-hero-orb-bl {
  position:absolute;
  width:420px; height:420px;
  bottom:-130px; left:-110px;
  background: radial-gradient(circle, rgba(99,102,241,.13) 0%, rgba(236,72,153,.07) 45%, transparent 65%);
  border-radius:50%;
  pointer-events:none;
  animation: orbFloat 13s ease-in-out infinite reverse;
}
@keyframes orbFloat {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-24px) scale(1.05); }
}

.wl-hero-inner { position:relative; z-index:1; width:100%; }

/* ── Badge ── */
.wl-hero-badge {
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 16px; border-radius:999px;
  background:linear-gradient(135deg,rgba(34,197,94,.14),rgba(34,197,94,.06));
  border:1px solid rgba(34,197,94,.36);
  color:#065f46; font-weight:700; font-size:.76rem; letter-spacing:.3px;
  box-shadow:0 2px 14px rgba(34,197,94,.15), inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
  margin-bottom:12px;
}
.wl-hero-badge-dot {
  width:7px; height:7px; border-radius:50%; background:#22c55e;
  animation:livePulse 2s infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow:0 0 0 0   rgba(34,197,94,.6); }
  50%      { box-shadow:0 0 0 7px rgba(34,197,94,0); }
}

/* ── Headline ── */
.wl-hero-title {
  font-size: clamp(2.4rem, 4.2vw, 4rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.18;
  color: #0a0f1e;
  margin: 0 0 12px;
  overflow: visible;
  word-break: break-word;
}
.wl-hero-title .wl-hero-typewriter {
  display: inline;
  white-space: normal;
}
.wl-hero-title span {
  display:block;
  background:linear-gradient(130deg,#4338ca 0%,#6366F1 28%,#818CF8 55%,#06b6d4 80%,#22d3ee 100%);
  background-size:220% 220%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:titleGrad 6s ease infinite;
  filter:drop-shadow(0 3px 14px rgba(99,102,241,.26));
}
@keyframes titleGrad {
  0%   { background-position:0%   60%; }
  50%  { background-position:100% 40%; }
  100% { background-position:0%   60%; }
}

/* ── Lead ── */
.wl-hero-lead {
  color:#4a5568; font-size:.93rem; line-height:1.72;
  max-width:500px; margin:0 0 18px; font-weight:400;
}

/* ── CTAs ── */
.wl-hero-ctas {
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; margin-bottom:16px;
}
.wl-hero-ctas .btn-green {
  position:relative;
  background:linear-gradient(135deg,#6366F1 0%,#4F46E5 100%);
  box-shadow:0 6px 24px rgba(99,102,241,.46), inset 0 1px 0 rgba(255,255,255,.18);
  border:none; padding:12px 30px;
  font-size:.88rem; font-weight:700; border-radius:50px;
  color:#fff; letter-spacing:.01em;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
  text-decoration:none; display:inline-flex; align-items:center; overflow:hidden;
}
.wl-hero-ctas .btn-green::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.16),transparent 60%);
  border-radius:inherit; opacity:0; transition:opacity .22s;
}
.wl-hero-ctas .btn-green:hover {
  transform:translateY(-3px) scale(1.03);
  box-shadow:0 14px 40px rgba(99,102,241,.54); color:#fff;
}
.wl-hero-ctas .btn-green:hover::before { opacity:1; }

.wl-hero-ctas .btn-outline-indigo {
  padding:11px 26px; font-size:.87rem; font-weight:700;
  border-radius:50px; border:2px solid rgba(99,102,241,.30);
  color:#4F46E5; background:rgba(238,242,255,.65);
  backdrop-filter:blur(10px); transition:all .22s ease;
  text-decoration:none; display:inline-flex; align-items:center;
}
.wl-hero-ctas .btn-outline-indigo:hover {
  background:rgba(99,102,241,.11); border-color:#6366F1;
  transform:translateY(-2px); box-shadow:0 8px 24px rgba(99,102,241,.18);
  color:#4338ca;
}

/* ── Proof pills ── */
.wl-hero-proof {
  display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px;
}
.wl-proof-pill {
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 13px; border-radius:999px;
  border:1px solid rgba(99,102,241,.14);
  background:rgba(255,255,255,.90); backdrop-filter:blur(10px);
  box-shadow:0 1px 10px rgba(99,102,241,.07);
  color:#1e293b; font-weight:600; font-size:.76rem;
  transition:all .20s ease; cursor:default;
}
.wl-proof-pill:hover {
  border-color:rgba(99,102,241,.30);
  background:rgba(238,242,255,.98);
  transform:translateY(-1px);
}
.wl-proof-pill i { color:#6366F1; font-size:.72rem; }

/* ── Stats ── */
.wl-hero-stats {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0; padding-top:16px;
  border-top:1px solid rgba(99,102,241,.12);
}
.hero-stat-item {
  padding:0 16px 0 0; position:relative;
}
.hero-stat-item:not(:last-child)::after {
  content:""; position:absolute;
  right:8px; top:6px; bottom:6px;
  width:1px; background:rgba(99,102,241,.12);
}
.hero-stat-num {
  font-size:1.45rem; font-weight:900; line-height:1;
  display:block; letter-spacing:-.03em;
  background:linear-gradient(135deg,#0a0f1e 0%,#4338ca 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero-stat-lbl {
  font-size:.62rem; color:#64748b;
  letter-spacing:.07em; text-transform:uppercase;
  margin-top:4px; display:block; font-weight:600;
}

/* ══════════════════════════════════════════
   RIGHT — browser mockup
   ══════════════════════════════════════════ */
.wl-hero-right {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  padding:16px 8px 16px 16px;
  height:100%;
}

/* glow halo */
.wl-hero-halo {
  position:absolute; inset:-30px; border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,
    rgba(99,102,241,.20) 0%, rgba(6,182,212,.08) 45%, transparent 68%);
  pointer-events:none;
  animation:haloPulse 5s ease-in-out infinite; z-index:0;
}
@keyframes haloPulse {
  0%,100% { opacity:.8; transform:scale(1); }
  50%      { opacity:1;  transform:scale(1.05); }
}

/* browser card */
.wl-hero-browser {
  position:relative; z-index:1;
  width:100%; max-width:520px;
  background:#fff; border-radius:18px;
  box-shadow:
    0 0 0 1px rgba(99,102,241,.13),
    0 4px 6px rgba(0,0,0,.04),
    0 18px 50px rgba(99,102,241,.20),
    0 50px 100px rgba(99,102,241,.10);
  animation:browserFloat 8s ease-in-out infinite;
}
@keyframes browserFloat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  40%      { transform:translateY(-10px) rotate(.25deg); }
  70%      { transform:translateY(-5px) rotate(-.18deg); }
}

/* chrome bar */
.wl-browser-chrome {
  background:linear-gradient(180deg,#f8fafc,#f1f5f9);
  border-radius:18px 18px 0 0;
  padding:10px 14px 8px;
  border-bottom:1px solid rgba(99,102,241,.08);
  display:flex; align-items:center; gap:10px;
}
.wl-browser-dots { display:flex; gap:5px; flex-shrink:0; }
.wl-browser-dots span {
  width:10px; height:10px; border-radius:50%; display:block;
}
.wl-browser-dots span:nth-child(1) { background:#fc5c65; box-shadow:0 0 5px rgba(252,92,101,.5); }
.wl-browser-dots span:nth-child(2) { background:#fed330; box-shadow:0 0 5px rgba(254,211,48,.5); }
.wl-browser-dots span:nth-child(3) { background:#26de81; box-shadow:0 0 5px rgba(38,222,129,.5); }
.wl-browser-url {
  flex:1; background:rgba(255,255,255,.85);
  border:1px solid rgba(99,102,241,.12); border-radius:7px;
  padding:4px 10px; font-size:.66rem; color:#64748b; font-weight:500;
  display:flex; align-items:center; gap:5px;
  font-family:'Poppins',sans-serif;
}
.wl-browser-url i { color:#22c55e; font-size:.60rem; }

/* screenshot */
.wl-browser-screen {
  border-radius:0 0 18px 18px;
  overflow:hidden; position:relative;
  background:#0f172a; line-height:0;
}
.wl-browser-screen img {
  width:100%; height:auto;
  max-height: clamp(220px, 38vh, 360px);
  object-fit:cover; object-position:top;
  display:block; transition:transform .5s ease;
}
.wl-hero-browser:hover .wl-browser-screen img { transform:scale(1.02); }
.wl-browser-screen::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(15,23,42,.55) 100%);
  pointer-events:none;
}

/* ── Floating stat cards ── */
.wl-hero-stat-card {
  position:absolute;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(99,102,241,.17);
  border-radius:14px; padding:10px 14px;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 6px 26px rgba(99,102,241,.16), 0 2px 6px rgba(0,0,0,.05);
  backdrop-filter:blur(12px); z-index:4; white-space:nowrap;
}
.wl-hero-stat-card-icon {
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0;
}
.wl-hero-stat-card-val {
  font-size:1rem; font-weight:900; color:#0a0f1e;
  line-height:1; display:block; letter-spacing:-.02em;
}
.wl-hero-stat-card-lbl {
  font-size:.60rem; color:#64748b; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  display:block; margin-top:2px;
}
.wl-hero-stat-card--tl { top:-16px; left:-16px; animation:fc1 5s ease-in-out infinite; }
.wl-hero-stat-card--tr { top:55px;  right:-20px; animation:fc2 6s ease-in-out infinite; }
.wl-hero-stat-card--bl { bottom:28px; left:-20px; animation:fc3 7s ease-in-out infinite; }
@keyframes fc1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes fc2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }
@keyframes fc3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ── Delivered pill ── */
.wl-hero-delivered {
  position:absolute; bottom:14px; left:50%; transform:translateX(-50%);
  background:rgba(255,255,255,.97);
  border:1px solid rgba(99,102,241,.18); border-radius:50px;
  padding:8px 18px; display:flex; align-items:center; gap:9px;
  box-shadow:0 6px 24px rgba(99,102,241,.18);
  font-size:.76rem; font-weight:700; color:#1e293b;
  white-space:nowrap; z-index:5; backdrop-filter:blur(10px);
  animation:delivBounce 4s ease-in-out infinite;
}
@keyframes delivBounce {
  0%,100% { transform:translateX(-50%) translateY(0); }
  50%      { transform:translateX(-50%) translateY(-5px); }
}
.wl-hero-delivered i { color:#22c55e; font-size:.95rem; }
.wl-hero-delivered-sub {
  font-size:.62rem; color:#64748b; font-weight:500;
  display:block; margin-top:1px;
}

/* ══════════════════════════════════════════
   REST-OF-PAGE CARDS (unchanged)
   ══════════════════════════════════════════ */
.wl-hover-card {
  background:#fff; border:1px solid var(--border-color,#e2e8f0);
  border-radius:20px; padding:28px 24px; height:100%;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  position:relative; overflow:hidden;
}
.wl-hover-card:hover {
  border-color:rgba(79,70,229,.35); transform:translateY(-5px);
  box-shadow:0 18px 48px rgba(79,70,229,.12);
}
.wl-process-card {
  background:#fff; border:1px solid rgba(15,23,42,.08);
  border-radius:20px; padding:32px 24px; text-align:center;
  height:100%; position:relative; overflow:hidden;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.wl-process-card:hover {
  border-color:rgba(79,70,229,.35); transform:translateY(-4px);
  box-shadow:0 16px 42px rgba(79,70,229,.12);
}
.wl-process-card--primary {
  background:linear-gradient(135deg,#6366F1,#4F46E5);
  border-color:transparent; box-shadow:0 16px 46px rgba(79,70,229,.28);
}
.faq-new-item {
  background:#fff; border:1px solid var(--border-color,#e2e8f0);
  border-radius:16px; overflow:hidden;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.faq-new-item:hover {
  border-color:rgba(79,70,229,.25); box-shadow:0 12px 34px rgba(15,23,42,.06);
}
.faq-new-q {
  width:100%; display:flex; align-items:center;
  justify-content:space-between; gap:14px; padding:18px 22px;
  border:none; background:transparent; cursor:pointer;
  font-weight:800; color:#0f172a; text-align:left;
}
.faq-new-body { display:none; padding:0 22px 18px; }
.faq-new-body p { color:#475569; font-size:.9rem; line-height:1.75; margin:0; }
.faq-new-icon {
  width:28px; height:28px; background:#eef2ff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:all .3s;
}
.faq-new-icon i { color:#6366F1; font-size:.7rem; }

/* ══════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════ */
@media (max-width:1199px) {
  .wl-hero-stat-card--tr { right:-8px; }
  .wl-hero-stat-card--bl { left:-8px; }
}
@media (max-width:991px) {
  /* on tablet the hero can be taller — two-column breaks */
  #hero.wl-hero { height:auto; min-height:unset; padding:52px 0 44px; }
  .wl-hero-right { margin-top:36px; padding:16px 0; }
  .wl-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  .hero-stat-item:not(:last-child)::after { display:none; }
  .hero-stat-item { padding:0; }
}
@media (max-width:767px) {
  .wl-hero-title { font-size:clamp(2.2rem,8.5vw,3.2rem); }
  .wl-hero-lead  { font-size:.90rem; }
  #hero.wl-hero::after { width:300px; height:300px; top:-80px; right:-80px; }
  .wl-hero-stat-card { display:none; }
  .wl-hero-orb-bl { display:none; }
}
@media (max-width:575px) {
  .wl-hero-ctas { flex-direction:column; }
  .wl-hero-ctas .btn { width:100%; justify-content:center; }
  .wl-hero-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .wl-hero-delivered { font-size:.68rem; padding:6px 12px; }
}