.spk-landing *, .spk-landing *::before, .spk-landing *::after { box-sizing: border-box; margin: 0; padding: 0; }.spk-landing {
      --bg:      #0A0A0F;
      --bg2:     #0F0D19;
      --pink:    #FF0055;
      --orange:  #FF4400;
      --purple:  #8800FF;
      --grad:    linear-gradient(135deg, #FF0055 0%, #FF4400 50%, #8800FF 100%);
      /* match the sidebar "New order" button gradient — also overrides the theme's --sp-grad
         (used by the forced a[href*="signup"] CTA style) so signup-link buttons match too */
      --sp-grad: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);
      --text:    #FFFFFF;
      --muted:   rgba(255,255,255,0.52);
      --border:  rgba(255,255,255,0.09);
    }.spk-landing { scroll-behavior: smooth; }.spk-landing {
      font-family: 'Inter', system-ui, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.5;
      overflow-x: hidden;
    }.spk-landing a { color: inherit; text-decoration: none; }.spk-landing ul { list-style: none; }.spk-landing /* ── PAGE WRAPPER ── */
    .page { max-width: 1280px; margin: 0 auto; padding: 0 32px; }.spk-landing /* ════════════════════════════
       NAVBAR
    ════════════════════════════ */
    /* Perfect Panel wraps content in main.sp-main with 24px top padding — remove on landing so nav sits flush at the very top (hero fits viewport exactly) */
    main.sp-main { padding-top: 0 !important; }.spk-landing nav {
      position: sticky; top: 0; z-index: 100;
      padding: 16px 0;
      background: rgba(10,10,15,0.80);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-bottom: 1px solid var(--border);
    }.spk-landing .nav-inner {
      max-width: 1280px; margin: 0 auto; padding: 0 32px;
      /* 3-col grid: logo | centered menu | button — equal 1fr sides keep the menu at the true center */
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    }.spk-landing .nav-inner > .nav-logo { justify-self: start; }.spk-landing .nav-inner > .nav-links { justify-self: center; }.spk-landing .nav-inner > .btn-explore { justify-self: end; }.spk-landing .nav-logo { display: flex; align-items: center; gap: 8px; }.spk-landing .logo-icon {
      width: 36px; height: 36px;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }.spk-landing .logo-icon svg { width: 32px; height: 32px; }.spk-landing .logo-name { font-size: 26px; font-weight: 900; letter-spacing: -0.8px; color: #fff; }.spk-landing .nav-links { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; align-self: center; }.spk-landing .nav-links a {
      display: flex; align-items: center; line-height: 1;
      color: var(--muted); font-size: 14px; font-weight: 500;
      padding: 8px 16px; border-radius: 40px;
      transition: color 0.2s, background 0.2s;
    }.spk-landing .nav-links a:hover { color: #fff; background: rgba(255,255,255,0.07); }.spk-landing .btn-explore {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.20);
      color: #fff; padding: 9px 22px; border-radius: 40px;
      font-size: 13px; font-weight: 700;
      transition: background 0.2s, border-color 0.2s;
    }.spk-landing .btn-explore:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.35); }.spk-landing /* match Sign Up button size to the Sign In button on /signup (PP global shrinks it to 7px/18px — force 9px/22px) */
    body nav .nav-inner > a.btn-explore { padding: 9px 22px !important; }.spk-landing /* ── Hamburger toggle (tablet/mobile) ── */
    .sp-nav-toggle {
      display: none; justify-self: end;
      width: 40px; height: 40px; padding: 0; border: 0; background: transparent;
      cursor: pointer; position: relative;
    }.spk-landing .sp-nav-toggle span {
      position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px; background: #fff;
      transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), opacity 0.2s ease, top 0.3s cubic-bezier(0.16,1,0.3,1);
    }.spk-landing .sp-nav-toggle span:nth-child(1) { top: 14px; }.spk-landing .sp-nav-toggle span:nth-child(2) { top: 19px; }.spk-landing .sp-nav-toggle span:nth-child(3) { top: 24px; }.spk-landing .sp-nav-toggle.is-open span:nth-child(1) { top: 19px; transform: rotate(45deg); }.spk-landing .sp-nav-toggle.is-open span:nth-child(2) { opacity: 0; }.spk-landing .sp-nav-toggle.is-open span:nth-child(3) { top: 19px; transform: rotate(-45deg); }.spk-landing /* ── Backdrop (blurs page behind menu) ── */
    .sp-nav-backdrop {
      display: none; position: fixed; inset: 0; z-index: 99;
      background: rgba(10,8,18,0.45);
      backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }.spk-landing .sp-nav-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; }.spk-landing /* ── Mobile dropdown menu (liquid glass) ── */
    .sp-mobile-nav {
      display: none;
      position: absolute; left: 10px; right: 10px; top: calc(100% + 8px);
      flex-direction: column; gap: 2px;
      background: rgba(26,22,40,0.55);
      backdrop-filter: blur(30px) saturate(170%); -webkit-backdrop-filter: blur(30px) saturate(170%);
      border: 1px solid rgba(255,255,255,0.12); border-radius: 20px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(255,255,255,0.04), 0 28px 56px rgba(0,0,0,0.50);
      padding: 10px 14px 18px;
      opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none;
      transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1), visibility 0.25s;
    }.spk-landing .sp-mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }.spk-landing .sp-mobile-nav a {
      position: relative; display: flex; align-items: center;
      padding: 14px 14px; font-size: 15px; font-weight: 500;
      color: rgba(255,255,255,0.74) !important; text-decoration: none !important;
      border-radius: 10px; transition: color 0.18s ease, background 0.18s ease;
    }.spk-landing .sp-mobile-nav a:not(.sp-mobile-cta)::after {
      content: ""; position: absolute; left: 14px; right: 14px; bottom: 0;
      height: 1px; background: rgba(255,255,255,0.06);
    }.spk-landing .sp-mobile-nav a:hover { color: #fff !important; background: rgba(255,255,255,0.05); }.spk-landing .sp-mobile-nav .sp-mobile-cta {
      margin-top: 14px; justify-content: center; text-align: center;
      padding: 14px; border-radius: 40px; font-weight: 700; color: #fff !important;
      background: var(--sp-grad);
      box-shadow: 0 4px 18px rgba(255,32,104,0.32), 0 2px 8px rgba(170,32,255,0.24);
      transition: filter 0.2s ease;
    }.spk-landing .sp-mobile-nav .sp-mobile-cta:hover { filter: brightness(1.08); background: var(--sp-grad); }

    /* collapse horizontal nav → hamburger at tablet width */
    @media (max-width: 860px) {.spk-landing .nav-links, .spk-landing .btn-explore { display: none !important; }.spk-landing .nav-inner { grid-template-columns: 1fr auto; }.spk-landing .sp-nav-toggle { display: block; }.spk-landing .sp-mobile-nav { display: flex; }.spk-landing .sp-nav-backdrop { display: block; }
    }.spk-landing /* ════════════════════════════
       HERO CARD  (big rounded gradient card)
    ════════════════════════════ */
    /* Full-viewport hero section */
    .hero-section {
      width: 100%;
      height: calc(100vh - 65px);
      display: flex; align-items: stretch; justify-content: center;   /* stretch → wrap fills full height so the ticker can sit at the very bottom */
      padding: 24px 0 0;   /* no bottom padding → ticker flush with viewport bottom. horizontal 0 (gutter from .hero-card-inner) */
      box-sizing: border-box;
    }.spk-landing .hero-wrap {
      width: 100%;
      max-width: 1280px;
      flex-shrink: 0;
      display: flex; flex-direction: column;   /* stack: card (fills) then ticker pinned at bottom */
    }.spk-landing .hero-card {
      /* pink gradient card removed — content now sits directly on the dark page bg (cleaner) */
      border-radius: 0; overflow: visible;
      position: relative;
      background: transparent;
      width: 100%;
      flex: 1;   /* fill hero-wrap height so the inner content + bottom ticker span the viewport */
      display: flex; flex-direction: column;
      align-items: stretch;
      padding: 0;
      gap: 0;
      cursor: default;
    }.spk-landing /* inner content gets the padding */

    /* Ticker inside hero card */
    .hero-ticker {
      overflow: hidden;
      border-top: 1px solid rgba(255,255,255,0.15);
      background: rgba(0,0,0,0.12);
      padding: 14px 0;
      /* full-bleed: break out of the 1280px container → span the whole viewport width (responsive) */
      width: 100vw;
      max-width: 100vw;
      position: relative;
      left: 50%;
      margin-left: -50vw;
      margin-top: 32px;
      box-sizing: border-box;
    }.spk-landing .hero-ticker-track {
      display: flex; gap: 52px; white-space: nowrap;
      animation: tickAnim 28s linear infinite;
    }.spk-landing .hero-ticker .ticker-item {
      color: rgba(255,255,255,0.80);
    }.spk-landing .hero-ticker .tdot {
      background: rgba(255,255,255,0.9);
      box-shadow: 0 0 6px rgba(255,255,255,0.6);
    }

    @keyframes heroGradShift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }.spk-landing /* mesh glow disabled — pink card removed, .spk-landing page bg provides ambient glow */
    .hero-card::before { display: none; }.spk-landing /* inner constraint for very wide screens */
    .hero-card > * { position: relative; z-index: 2; }.spk-landing .hero-card-inner {
      width: 100%;
      flex: 1;   /* grow to fill → content stays centered above, ticker drops to the bottom */
      display: flex; align-items: center; gap: 64px;
      padding: 48px 32px 40px;   /* L/R 32px = matches .nav-inner / .section-wrap / .page (1280 wrap with 32px gutter) */
      position: relative; z-index: 2;
    }.spk-landing /* LEFT text */
    .hero-text {
      position: relative; z-index: 2;
      flex: 1;
      min-width: 0;
    }.spk-landing .hero-live-badge {
      display: inline-flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
      border-radius: 40px; padding: 6px 14px; margin-bottom: 16px;
      font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.85);
    }.spk-landing .live-dot {
      width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
      box-shadow: 0 0 8px rgba(74,222,128,0.8);
      animation: pulse 2s infinite;
    }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }.spk-landing .hero-text h1 {
      font-size: clamp(32px, 3.8vw, 52px);
      font-weight: 900; line-height: 1.06;
      letter-spacing: -2px; margin-bottom: 18px;
      color: #fff;
    }.spk-landing .hero-text p {
      font-size: 15px; color: rgba(255,255,255,0.70); line-height: 1.72;
      max-width: none; margin-bottom: 24px;   /* fill the column = same width as the headline (was 340px → wrapped too much) */
    }.spk-landing /* Hero stats row */
    .hero-stats {
      display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 28px;
    }.spk-landing .hero-stat-num {
      font-size: 26px; font-weight: 900; color: #fff; letter-spacing: -1px; line-height: 1;
    }.spk-landing .hero-stat-label {
      font-size: 11px; color: rgba(255,255,255,0.55); font-weight: 500; margin-top: 3px;
    }.spk-landing .hero-stat-divider { display: none; }.spk-landing /* dividers between stats removed */
    .hero-btns { display: flex; gap: 12px; align-items: center; }.spk-landing .btn-hero-primary {
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      color: #fff; padding: 13px 28px; border-radius: 40px;
      font-size: 14px; font-weight: 800;
      /* base glow — same pink+purple language as the panel sidebar active item */
      box-shadow: 0 4px 20px rgba(255,10,84,0.35), 0 2px 8px rgba(154,0,255,0.20);
      transition: box-shadow 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out;
      white-space: nowrap;
    }.spk-landing /* hover = lights up (brighter + stronger glow), .spk-landing like hovering the sidebar — no dimming */
    .btn-hero-primary:hover {
      transform: translateY(-2px); filter: brightness(1.06);
      box-shadow: 0 8px 30px rgba(255,10,84,0.55), 0 4px 18px rgba(170,32,255,0.45);
    }.spk-landing .btn-hero-primary:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing .btn-hero-secondary {
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(255,255,255,0.28);
      color: #fff; padding: 12px 26px; border-radius: 40px;
      font-size: 14px; font-weight: 700;
      transition: background 160ms ease-out, transform 160ms ease-out;
      white-space: nowrap;
    }.spk-landing .btn-hero-secondary:hover { background: rgba(255,255,255,0.20); }.spk-landing .btn-hero-secondary:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing /* RIGHT: Login Card */
    /* Liquid glass — matches the viewticket page: translucent surface + blur+saturate +
       colored mesh-gradient refraction (pink/purple/orange) + inset edge highlight */
    .hero-login-card {
      position: relative; z-index: 2;
      flex-shrink: 0;
      width: 480px;
      background:
        radial-gradient(ellipse 60% 50% at 12% 8%,   rgba(245,63,106,0.16) 0%, transparent 55%),
        radial-gradient(ellipse 55% 45% at 90% 6%,   rgba(139,43,226,0.17) 0%, transparent 55%),
        radial-gradient(ellipse 50% 35% at 50% 2%,   rgba(255,107,43,0.10) 0%, transparent 50%),
        radial-gradient(ellipse 65% 40% at 50% 102%, rgba(139,43,226,0.11) 0%, transparent 60%),
        rgba(22,17,36,0.94);   /* near-opaque so it stays defined without backdrop-filter */
      border: 0;
      border-radius: 22px;
      padding: 36px 32px;
      overflow: hidden;
      /* backdrop-filter REMOVED — blur+saturate at the rounded edge created a faint bright rim.
         Card sits on a dark, near-static bg so the blur was barely visible anyway. */
      box-shadow: 0 24px 64px rgba(0,0,0,0.45);   /* dark drop shadow only — no white inset highlight */
    }.spk-landing .hlc-title { font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 4px; letter-spacing: -0.5px; }.spk-landing .hlc-sub { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 28px; }.spk-landing .hlc-field { margin-bottom: 16px; }.spk-landing .hlc-field label {
      display: block; font-size: 12px; font-weight: 700;
      color: rgba(255,255,255,0.6); margin-bottom: 7px;
    }.spk-landing /* Liquid-glass inputs — CI dark-purple tint. !important overrides theme style.css (which forces light bg) */
    .hlc-field input {
      width: 100%; padding: 12px 16px; border-radius: 12px !important;
      background: rgb(38,27,50) !important;            /* CI dark fill (opaque) */
      /* backdrop-filter REMOVED — it created a bright rim at the rounded corners (same issue as the card).
         Useless here anyway: the opaque box-shadow fill covers the input, so the blur was never visible. */
      border: 0 !important;   /* no real border (a real border lets the Chrome-autofill light bg leak at the edge) */
      color: #F5F0FF !important; font-size: 14px; font-family: 'Inter', sans-serif;
      /* NO border line — just the 1000px fill that hides Chrome autofill bg. Pure dark field, zero white edge. */
      box-shadow: inset 0 0 0 1000px rgb(38,27,50) !important;
      outline: none;
      /* AUTOFILL ROOT FIX: Chrome paints its light bg via a transition on background-color.
         A 600000s delay means that transition never visibly completes → the light autofill bg
         NEVER appears (so it can't leak at the rounded corners like the box-shadow trick did). */
      transition: background-color 600000s 0s, color 600000s 0s, box-shadow 0.2s !important;
    }.spk-landing .hlc-field input::placeholder { color: rgba(245,240,255,0.40) !important; }.spk-landing /* Chrome autofill can't be styled normally — paint CI dark over it via inset box-shadow + text-fill */
    .hlc-field input:-webkit-autofill, .spk-landing .hlc-field input:-webkit-autofill:hover, .spk-landing .hlc-field input:-webkit-autofill:focus {
      -webkit-box-shadow: inset 0 0 0 1000px rgb(38,27,50) !important;
      background-color: rgb(38,27,50) !important;
      -webkit-text-fill-color: #F5F0FF !important;
      caret-color: #F5F0FF !important;
      border: 0 !important;   /* no border strip → autofill light bg can't leak at the edge */
      border-radius: 12px !important;
      transition: background-color 600000s 0s, color 600000s 0s !important;   /* block the autofill light bg entirely */
    }.spk-landing .hlc-field input:focus {
      box-shadow: inset 0 0 0 1000px rgb(38,27,50), 0 0 0 3px rgba(245,63,106,0.22) !important;  /* fill + CI pink ring only (no line) */
    }.spk-landing .hlc-pw-wrap { position: relative; }.spk-landing .hlc-pw-wrap input { padding-right: 44px; }.spk-landing .hlc-pw-toggle {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.40);
      padding: 4px; line-height: 0;
      display: flex; align-items: center; justify-content: center;
      transition: color 0.2s;
    }.spk-landing .hlc-pw-toggle:hover { color: rgba(255,255,255,0.85); }.spk-landing .hlc-pw-toggle svg { display: block; width: 18px; height: 18px; }.spk-landing .hlc-row {
      display: flex; justify-content: space-between; align-items: center;
      margin-bottom: 22px; font-size: 12px;
    }.spk-landing .hlc-row label { display: flex; align-items: center; gap: 7px; color: rgba(255,255,255,0.5); cursor: pointer; }.spk-landing .hlc-row input[type=checkbox] { accent-color: var(--pink); width: 14px; height: 14px; }.spk-landing .hlc-forgot { color: rgba(255,255,255,0.45); font-weight: 600; transition: color 0.2s; }.spk-landing .hlc-forgot:hover { color: #fff; }.spk-landing .btn-hlc-submit {
      width: 100%; padding: 14px;
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      color: #fff; border: none; border-radius: 12px;
      font-size: 15px; font-weight: 800;
      cursor: pointer; letter-spacing: 0.1px;
      font-family: 'Inter', sans-serif;
      box-shadow: 0 4px 20px rgba(255,10,84,0.35), 0 2px 8px rgba(154,0,255,0.20);
      transition: box-shadow 200ms ease-out, transform 200ms ease-out, filter 200ms ease-out;
    }.spk-landing /* hover = lights up like the sidebar active item — brighter + stronger pink/purple glow */
    .btn-hlc-submit:hover {
      transform: translateY(-2px); filter: brightness(1.06);
      box-shadow: 0 8px 30px rgba(255,10,84,0.55), 0 4px 18px rgba(170,32,255,0.45);
    }.spk-landing .btn-hlc-submit:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing .btn-google {
      width: 100%; padding: 12px 16px;
      background: #fff; color: #3c4043;
      border: none; border-radius: 12px;
      font-size: 14px; font-weight: 600;
      font-family: 'Inter', sans-serif;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
      transition: background 160ms ease-out, box-shadow 160ms ease-out, transform 160ms ease-out;
      letter-spacing: 0.1px;
    }.spk-landing .btn-google:hover {
      background: #f8f8f8;
      box-shadow: 0 4px 16px rgba(0,0,0,0.30);
      transform: translateY(-1px);
    }.spk-landing .btn-google:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing /* Google login — REAL GSI button kept VISIBLE (opacity:1, .spk-landing required by FedCM anti-clickjacking)
       but visually covered by our opaque custom button on top. Custom is pointer-events:none, .spk-landing so the click passes THROUGH it down to the (visible) GSI button → Google popup fires. */
    .g-login-wrap { position: relative; width: 100%; cursor: pointer; }.spk-landing .g-login-btn {
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: 100%; height: 46px;
      background: #fff; color: #1f1f1f !important;   /* !important: theme style.css forces a light text color with !important — must override */
      border-radius: 12px; font-size: 14px; font-weight: 600;
      font-family: 'Inter', system-ui, sans-serif;
      position: relative; z-index: 2; pointer-events: none;   /* on top (visual), clicks pass through */
      box-shadow: 0 1px 2px rgba(0,0,0,0.18);
      /* NOTE: must stay fully OPAQUE (never opacity < 1) — any transparency reveals the GSI button behind → "stacked" look */
      transition: background-color 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s ease-out;
    }.spk-landing .g-login-wrap:hover .g-login-btn { background: #f6f7f9; box-shadow: 0 4px 14px rgba(0,0,0,0.22); transform: translateY(-1px); }.spk-landing .g-login-wrap:active .g-login-btn { transform: translateY(0) scale(0.98); transition-duration: 100ms; }.spk-landing /* GSI button: behind (z-index 1), .spk-landing visible to Google (opacity 1) but fully hidden under the opaque custom button */
    .g-overlay {
      position: absolute; top: 0; left: 0; width: 100%; height: 100%;
      z-index: 1; display: flex; align-items: center; justify-content: center;
      overflow: hidden; border-radius: 12px;   /* clip the 376px GSI iframe to match the 12px-rounded custom button — kills side bleed + blue corners */
    }.spk-landing .g-overlay > div { width: 100% !important; }.spk-landing /* Footer signup link — plain text (no top line, .spk-landing no pill).
       NOTE: theme global forces a[href*="signup"] into a gradient PILL with !important, .spk-landing so we override with higher specificity (.hlc-footer a[href*="signup"]) + !important. */
    .hlc-footer {
      text-align: center; margin-top: 20px;
      font-size: 13.5px; color: rgba(255,255,255,0.45);
    }.spk-landing .hlc-footer a, .spk-landing .hlc-footer a[href*="signup"] {
      display: inline !important; margin-left: 3px;
      padding: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important;
      font-weight: 800; text-decoration: none;
      background: linear-gradient(90deg, #FF3D7F 0%, #FF6B2B 50%, #8B2BE2 100%) !important;
      -webkit-background-clip: text !important; background-clip: text !important;
      -webkit-text-fill-color: transparent !important; color: transparent !important;
      transition: filter 0.25s ease-out;
    }.spk-landing /* hover = glows like the Spikable button (luminous pink/purple halo around the gradient text) */
    .hlc-footer a:hover {
      filter: drop-shadow(0 0 8px rgba(245,63,106,0.85)) drop-shadow(0 0 18px rgba(139,43,226,0.55));
    }

    /* ── ENTRANCE ANIMATIONS ── */
    @keyframes fadeSlideUp {
      from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
      to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    }
    @keyframes fadeSlideRight {
      from { opacity: 0; transform: translateX(32px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    /* premium card entrance — fade + rise + subtle scale + blur (Linear/Stripe feel) */
    @keyframes cardEnter {
      from { opacity: 0; transform: translateY(24px) scale(0.985); filter: blur(10px); }
      to   { opacity: 1; transform: translateY(0)    scale(1);     filter: blur(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to   { opacity: 1; }
    }
    @keyframes floatY {
      0%, 100% { transform: translateY(0px); }
      50%       { transform: translateY(-10px); }
    }
    @keyframes floatSpin {
      0%   { transform: translateY(0px) rotate(0deg); opacity: 0.45; }
      50%  { transform: translateY(-12px) rotate(20deg); opacity: 0.7; }
      100% { transform: translateY(0px) rotate(0deg); opacity: 0.45; }
    }
    @keyframes glowPulse {
      0%, 100% { opacity: 0.18; transform: scale(1); }
      50%       { opacity: 0.30; transform: scale(1.08); }
    }.spk-landing /* ── HERO HIGHLIGHT ── */
    .hero-highlight {
      position: relative;
      display: inline;
      background: linear-gradient(90deg, #FF1466 0%, #FF6A00 35%, #B81FFF 65%, #FF1466 100%);   /* CI brand gradient */
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmerText 3s linear infinite;
    }
    @keyframes shimmerText {
      0%   { background-position: 0% center; }
      100% { background-position: 200% center; }
    }.spk-landing /* Hero text staggered entrance */
    .hero-live-badge { animation: fadeSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.08s; }.spk-landing .hero-text h1 { animation: fadeSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.16s; }.spk-landing .hero-text p { animation: fadeSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.26s; }.spk-landing .hero-stats { animation: fadeSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.36s; }.spk-landing .hero-btns { animation: fadeSlideUp 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.46s; }.spk-landing /* Login card slides in from right */
    .hero-login-card { animation: cardEnter 0.95s cubic-bezier(0.16,1,0.3,1) both; animation-delay: 0.22s; }

    /* Accessibility: honor reduced-motion — no entrance transforms/blur, no tilt */
    @media (prefers-reduced-motion: reduce) {.spk-landing .hero-live-badge, .spk-landing .hero-text h1, .spk-landing .hero-text p, .spk-landing .hero-stats, .spk-landing .hero-btns, .spk-landing .hero-login-card { animation: fadeIn 0.4s ease both !important; filter: none !important; }.spk-landing .hero-login-card { transition: none !important; }
    }.spk-landing /* Sparkle decorations */
    .sparkle {
      position: absolute; z-index: 3; pointer-events: none;
      font-size: 18px;
    }.spk-landing .sp-1 { top: 14%; left: 3%;  font-size: 24px; color: var(--pink);   animation: floatSpin 5.5s ease-in-out infinite; }.spk-landing .sp-2 { top: 10%; right: 8%; font-size: 15px; color: #fff;          animation: floatSpin 4.2s ease-in-out infinite 0.8s; }.spk-landing .sp-3 { bottom: 16%; right: 36%; font-size: 20px; color: var(--orange); animation: floatSpin 6.1s ease-in-out infinite 1.4s; }.spk-landing /* Ambient glow blobs disabled — pink card removed, .spk-landing kept clean on dark page bg */
    .hero-glow-1, .spk-landing .hero-glow-2 { display: none; }.spk-landing .hero-glow-1_off, .spk-landing .hero-glow-2_off {
      position: absolute; pointer-events: none; border-radius: 50%;
      filter: blur(80px); z-index: 0;
    }.spk-landing .hero-glow-1 {
      width: 380px; height: 380px;
      background: rgba(245,63,106,0.22);
      top: -80px; left: -60px;
      animation: glowPulse 6s ease-in-out infinite;
    }.spk-landing .hero-glow-2 {
      width: 320px; height: 320px;
      background: rgba(255,107,43,0.18);
      bottom: -60px; right: 100px;
      animation: glowPulse 7s ease-in-out infinite 2s;
    }.spk-landing /* ════════════════════════════
       TICKER
    ════════════════════════════ */
    .ticker-wrap {
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      padding: 14px 0; overflow: hidden;
      background: rgba(255,255,255,0.018);
      margin-top: 28px;
    }.spk-landing .ticker-track {
      display: flex; gap: 52px; white-space: nowrap;
      animation: tickAnim 30s linear infinite;
    }.spk-landing .ticker-item {
      display: flex; align-items: center; gap: 9px;
      font-size: 12px; font-weight: 600; color: var(--muted); flex-shrink: 0;
    }.spk-landing .tdot {
      width: 5px; height: 5px; border-radius: 50%;
      background: var(--grad); flex-shrink: 0;
    }
    @keyframes tickAnim { from{transform:translateX(0)} to{transform:translateX(-50%)} }.spk-landing /* ════════════════════════════
       SECTION BASE
    ════════════════════════════ */
    .section-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }.spk-landing .section-gap { margin-top: 60px; }.spk-landing .section-gap-lg { margin-top: 80px; }.spk-landing /* ════════════════════════════
       REVIEWS MARQUEE
    ════════════════════════════ */
    .rv-section { margin: 60px 0 0; }.spk-landing /* top 60 to why-choose; FAQ controls its own top gap */
    .rv-head-block { text-align: center; max-width: 960px; margin: 0 auto 20px; padding: 0 24px; }.spk-landing .rv-section-title {
      font-size: clamp(32px, 4vw, 54px); font-weight: 900; letter-spacing: -0.5px;
      line-height: 1.05; color: #fff; margin: 0 0 12px;
      white-space: nowrap;   /* one line on desktop */
    }.spk-landing .rv-section-sub { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 auto; max-width: 600px; }
    /* one line on wide desktop; wraps below */
    @media (min-width: 1080px) {.spk-landing .rv-section-sub { max-width: none; white-space: nowrap; }
    }.spk-landing .rv-marquee {
      width: 100vw; position: relative; left: 50%; margin-left: -50vw;
      overflow: hidden; padding: 20px 0;
    }.spk-landing /* edge fade removed per request */
    .rv-marquee::before, .spk-landing .rv-marquee::after { content: none; }.spk-landing .rv-track {
      display: flex; gap: 22px; width: max-content; align-items: stretch;
      animation: rvScroll 70s linear infinite;
      will-change: transform;
    }
    @keyframes rvScroll {
      from { transform: translateX(0); }       /* moves right → left, runs continuously */
      to   { transform: translateX(-50%); }
    }.spk-landing .rv-card {
      flex: 0 0 340px; width: 340px;
      display: flex; flex-direction: column;
      background: rgba(255,255,255,0.045);
      /* backdrop-filter REMOVED — blur+saturate caused the white fade on the scrolling marquee
         (same rounded-edge bright rim issue as the hero card). Translucent bg alone = true liquid glass. */
      border: 1px solid rgba(255,255,255,0.055);
      border-radius: 20px; padding: 26px 26px 24px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
      white-space: normal;
    }.spk-landing .rv-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }.spk-landing .rv-avatar {
      flex: 0 0 auto; width: 50px; height: 50px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 21px; font-weight: 800; color: #fff;
      background: var(--sp-grad);
      box-shadow: 0 4px 14px rgba(255,32,104,0.30);
    }.spk-landing .rv-title { font-size: 15px; font-weight: 700; color: #fff; line-height: 1.3; }.spk-landing .rv-role { font-size: 13px; color: var(--muted); margin-top: 3px; }.spk-landing .rv-quote { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.80); margin: 0 0 18px; flex: 1; }.spk-landing .rv-name { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.62); }

    @media (prefers-reduced-motion: reduce) {.spk-landing .rv-track { animation: none; }.spk-landing .rv-marquee { overflow-x: auto; }
    }
    @media (max-width: 860px) {.spk-landing .rv-section { margin: 70px 0; }.spk-landing .rv-head-block { margin-bottom: 32px; }.spk-landing .rv-card { flex: 0 0 320px; width: 320px; padding: 24px 22px; }.spk-landing .rv-track { gap: 18px; }
    }
    @media (max-width: 560px) {.spk-landing .rv-section { margin: 56px 0; }.spk-landing .rv-head-block { margin-bottom: 28px; padding: 0; }.spk-landing /* L/R 0 → full-bleed match hero */
      .rv-section-title { white-space: normal; }.spk-landing /* wrap on phones */
      .rv-card { flex-basis: 84vw; width: 84vw; padding: 22px 20px; }.spk-landing .rv-track { gap: 14px; }
    }.spk-landing /* ── VIDEO SECTION ── */
    .video-section { text-align: center; }.spk-landing .video-label {
      display: inline-block;
      font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
      text-transform: uppercase; color: rgba(255,255,255,0.45);
      margin-bottom: 14px;
    }.spk-landing .video-title {
      font-size: clamp(28px, 3.5vw, 46px);
      font-weight: 900; color: #fff;
      line-height: 1.1; margin-bottom: 40px;
    }.spk-landing .video-title span {
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }.spk-landing .video-frame-wrap {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,0.1);
      box-shadow:
        0 0 0 1px rgba(255,0,85,0.15),
        0 40px 120px rgba(0,0,0,0.7),
        0 0 80px rgba(136,0,255,0.12);
    }.spk-landing .video-frame-wrap::before {
      content: '';
      position: absolute; inset: 0;
      border-radius: 20px;
      background: linear-gradient(135deg, rgba(255,0,85,0.06), transparent 40%, rgba(136,0,255,0.06));
      pointer-events: none; z-index: 1;
    }.spk-landing .video-frame-wrap video {
      display: block; width: 100%; height: auto;
      border-radius: 20px;
    }.spk-landing .video-glow {
      position: absolute;
      bottom: -60px; left: 50%; transform: translateX(-50%);
      width: 70%; height: 120px;
      background: radial-gradient(ellipse, rgba(136,0,255,0.25) 0%, transparent 70%);
      pointer-events: none; z-index: 0;
    }.spk-landing .sec-label {
      display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
      text-transform: uppercase; color: var(--muted);
      margin-bottom: 14px;
    }.spk-landing .sec-title {
      font-size: clamp(36px, 4.5vw, 58px); font-weight: 900;
      letter-spacing: 0px; line-height: 1.05;
      word-break: keep-all; overflow-wrap: normal;
    }.spk-landing /* ════════════════════════════
       BUILD HABITS SECTION
       (text left, .spk-landing stacked cards right)
    ════════════════════════════ */
    .habits-grid {
      display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
    }.spk-landing .habits-text { padding-right: 20px; }.spk-landing .habits-text p { font-size: 15px; color: var(--muted); margin: 14px 0 28px; line-height: 1.72; max-width: 360px; }.spk-landing .store-btns { display: flex; gap: 12px; flex-wrap: wrap; }.spk-landing .btn-store {
      display: flex; align-items: center; gap: 9px;
      background: #1A1730; border: 1px solid rgba(255,255,255,0.12);
      color: #fff; padding: 10px 18px; border-radius: 12px;
      font-size: 12px; font-weight: 700;
      transition: background 0.2s, border-color 0.2s;
    }.spk-landing .btn-store:hover { background: rgba(245,63,106,0.10); border-color: rgba(245,63,106,0.3); }.spk-landing .btn-store svg { width: 18px; height: 18px; flex-shrink: 0; }.spk-landing .btn-store-sub { font-size: 9px; font-weight: 400; color: var(--muted); display: block; }.spk-landing /* Stacked chart cards — Tilted Card Stack (brand) */
    .chart-stack { position: relative; height: 360px; perspective: 1200px; }.spk-landing .chart-card { position: absolute; border-radius: 24px; padding: 26px; }.spk-landing /* back card: dark liquid glass, .spk-landing peeking lower-left */
    .cc-back {
      width: 72%; left: 0; bottom: 0; height: 250px;
      background: rgba(13,10,22,0.62);
      backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 24px 60px rgba(0,0,0,0.45);
      transform: rotate(-6deg);
      z-index: 1;
    }.spk-landing /* front card: brand gradient, .spk-landing upper-right, .spk-landing gently floating */
    .cc-front {
      width: 80%; right: 0; top: 0; height: 290px;
      background: linear-gradient(135deg,#FF1466 0%,#FF6A00 48%,#B81FFF 100%);
      box-shadow: 0 30px 70px rgba(184,31,255,0.35), inset 0 1px 0 rgba(255,255,255,0.20);
      transform: rotate(4deg);
      z-index: 2;
      animation: ccFloat 5s ease-in-out infinite;
    }
    @keyframes ccFloat { 0%,100% { transform: rotate(4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-12px); } }.spk-landing .cc-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; }.spk-landing .cc-back  .cc-title { color: rgba(255,255,255,0.5); }.spk-landing .cc-front .cc-title { color: rgba(255,255,255,0.92); margin-top: 6px; }.spk-landing .cc-value { font-size: 46px; font-weight: 900; color: #fff; letter-spacing: -1.5px; line-height: 1; }.spk-landing .cc-chart { margin-top: 22px; display: flex; align-items: flex-end; gap: 8px; height: 96px; }.spk-landing .cc-bar { flex: 1; border-radius: 8px 8px 3px 3px; background: rgba(255,255,255,0.45);
      transform-origin: bottom; animation: ccGrow 3.2s cubic-bezier(0.23,1,0.32,1) infinite; }.spk-landing .cc-bar.hi { background: rgba(255,255,255,0.88); }
    @keyframes ccGrow { 0% { transform: scaleY(0); } 55%,100% { transform: scaleY(1); } }.spk-landing .cc-front .cc-bar:nth-child(1) {animation-delay:0s}.spk-landing .cc-front .cc-bar:nth-child(2) {animation-delay:.08s}.spk-landing .cc-front .cc-bar:nth-child(3) {animation-delay:.16s}.spk-landing .cc-front .cc-bar:nth-child(4) {animation-delay:.24s}.spk-landing .cc-front .cc-bar:nth-child(5) {animation-delay:.32s}.spk-landing .cc-front .cc-bar:nth-child(6) {animation-delay:.40s}.spk-landing .cc-front .cc-bar:nth-child(7) {animation-delay:.48s}.spk-landing /* back card only peeks its title */
    .cc-back .cc-value, .spk-landing .cc-back .cc-chart, .spk-landing .cc-days { display: none; }.spk-landing .habit-spark { position: relative; }.spk-landing /* ════════════════════════════
       BENTO GRID
    ════════════════════════════ */
    .bento-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-auto-rows: 200px;
      gap: 14px;
    }.spk-landing .bento-card {
      border-radius: 24px; overflow: hidden;
      padding: 28px 28px 24px;
      position: relative;
      display: flex; flex-direction: column; justify-content: flex-end;
    }.spk-landing /* Self-aware card — purple */
    .bc-aware {
      grid-column: span 5; grid-row: span 2;
      background: #7C3AED;
    }.spk-landing .bc-aware::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(circle at 70% 30%, rgba(245,63,106,0.3), transparent 60%);
      pointer-events: none;
    }.spk-landing /* Features card — dark */
    .bc-features {
      grid-column: span 7; grid-row: span 1;
      background: #1A1730;
      border: 1px solid var(--border);
    }.spk-landing /* SaaS card — dark gradient */
    .bc-saas {
      grid-column: span 4; grid-row: span 1;
      background: linear-gradient(135deg, #12101E 0%, #1e1440 100%);
      border: 1px solid var(--border);
    }.spk-landing /* Join card — pink */
    .bc-join {
      grid-column: span 3; grid-row: span 1;
      background: linear-gradient(135deg, #F53F6A, #c8144a);
    }.spk-landing .bento-label {
      font-size: 9px; font-weight: 800; letter-spacing: 1.5px;
      text-transform: uppercase; color: rgba(255,255,255,0.45);
      margin-bottom: 8px;
    }.spk-landing .bento-title {
      font-size: clamp(26px, 3vw, 36px); font-weight: 900; letter-spacing: -1px;
      line-height: 1.05; color: #fff;
    }.spk-landing .bento-sub {
      font-size: 13px; color: rgba(255,255,255,0.5); margin-top: 8px; line-height: 1.6;
    }.spk-landing .btn-bento {
      display: inline-block; margin-top: 18px;
      background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
      color: #fff; padding: 9px 22px; border-radius: 40px;
      font-size: 12px; font-weight: 700; width: fit-content;
      transition: background 0.2s;
    }.spk-landing .btn-bento:hover { background: rgba(255,255,255,0.25); }.spk-landing .btn-bento-dark {
      background: #0A0A0F; border: 1px solid rgba(255,255,255,0.12);
      color: #fff;
    }.spk-landing /* Blob character in aware card */
    .blob-char {
      position: absolute; top: 20px; right: 20px;
      width: 90px; height: 90px;
      font-size: 80px; line-height: 1;
      pointer-events: none;
    }.spk-landing /* Floaty tag in aware card */
    .aware-tag {
      position: absolute; top: 28px; left: 28px;
      background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.18);
      border-radius: 30px; padding: 5px 14px;
      font-size: 10px; font-weight: 800; color: rgba(255,255,255,0.8);
      letter-spacing: 0.5px;
    }.spk-landing /* Watch/device visual in features card */
    .features-right {
      position: absolute; right: 0; top: 0; bottom: 0;
      width: 48%; display: flex; align-items: center; justify-content: center;
    }.spk-landing .watch-mock {
      width: 120px; height: 140px; border-radius: 28px;
      background: #0A0A0F; border: 2px solid rgba(245,63,106,0.3);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 6px; position: relative;
      box-shadow: 0 8px 32px rgba(245,63,106,0.2);
    }.spk-landing .watch-strap { width: 60px; height: 30px; background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */ border-radius: 8px; }.spk-landing .watch-body {
      width: 100px; height: 120px; border-radius: 24px;
      background: #12101E; border: 2px solid rgba(245,63,106,0.25);
      display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 10px; position: relative;
    }.spk-landing .watch-time { font-size: 22px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }.spk-landing .watch-date { font-size: 10px; color: var(--muted); margin-top: 2px; }.spk-landing .watch-ring {
      width: 40px; height: 40px; border-radius: 50; margin-top: 6px;
      border: 4px solid transparent;
      border-image: linear-gradient(135deg,#F53F6A,#8B2BE2) 1;
      display: flex; align-items: center; justify-content: center;
    }.spk-landing /* Task list in features */
    .task-list { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; width: 100%; }.spk-landing .task-item {
      display: flex; align-items: center; gap: 7px;
      background: rgba(255,255,255,0.05); border-radius: 8px; padding: 6px 8px;
    }.spk-landing .task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }.spk-landing .task-dot.pink { background: var(--pink); }.spk-landing .task-dot.green { background: #4ade80; }.spk-landing .task-dot.ora { background: var(--orange); }.spk-landing .task-txt { font-size: 10px; font-weight: 600; color: rgba(255,255,255,0.65); }.spk-landing /* ════════════════════════════
       NEWSLETTER / CTA
    ════════════════════════════ */
    .newsletter-band {
      position: relative; z-index: 0;
      text-align: center; overflow: hidden;
    }.spk-landing .newsletter-inner {
      background: #0F0D19; border: 1px solid var(--border);
      border-radius: 28px; padding: 72px 40px;
      position: relative; overflow: hidden;
    }.spk-landing .newsletter-inner::before {
      content: '';
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse at 20% 50%, rgba(245,63,106,0.08) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(139,43,226,0.10) 0%, transparent 60%);
    }.spk-landing .nl-title {
      font-size: clamp(30px,4vw,50px); font-weight: 900; letter-spacing: -1.5px;
      margin-bottom: 14px; position: relative; z-index: 1;
    }.spk-landing .nl-sub { font-size: 16px; color: var(--muted); margin-bottom: 36px; position: relative; z-index: 1; }.spk-landing .nl-form {
      display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
      position: relative; z-index: 1;
    }.spk-landing .nl-input {
      width: 320px; padding: 14px 20px;
      background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 40px; color: #fff; font-size: 14px; font-family: inherit;
      outline: none; transition: border-color 0.2s;
    }.spk-landing .nl-input::placeholder { color: rgba(255,255,255,0.28); }.spk-landing .nl-input:focus { border-color: rgba(245,63,106,0.5); }.spk-landing .btn-subscribe {
      background: linear-gradient(135deg,#F53F6A 0%,#FF6B2B 55%,#8B2BE2 100%);
      color: #fff; padding: 14px 32px; border-radius: 40px;
      font-size: 14px; font-weight: 800; border: none; cursor: pointer; font-family: inherit;
      box-shadow: 0 6px 24px rgba(245,63,106,0.35);
      transition: opacity 160ms ease-out, transform 160ms ease-out;
    }.spk-landing .btn-subscribe:hover { opacity: 0.9; transform: translateY(-1px); }.spk-landing .btn-subscribe:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing .nl-help { font-size: 12px; color: var(--muted); margin-top: 14px; position: relative; z-index: 1; }.spk-landing /* ════════════════════════════
       STATS BAND
    ════════════════════════════ */
    .stats-band {
      display: grid; grid-template-columns: repeat(4, 1fr);
      border: 1px solid var(--border); border-radius: 24px;
      overflow: hidden; background: var(--bg2);
    }.spk-landing .stat-block {
      padding: 32px 28px;
      border-right: 1px solid var(--border);
      position: relative;
    }.spk-landing .stat-block:last-child { border-right: none; }.spk-landing .stat-block::after {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 2px;
      background: var(--grad); opacity: 0;
      transition: opacity 0.3s;
    }.spk-landing .sb-num {
      font-size: 40px; font-weight: 900; letter-spacing: -1px;
      background: var(--grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text; line-height: 1;
    }.spk-landing .sb-label { font-size: 13px; color: var(--muted); margin-top: 6px; font-weight: 500; }.spk-landing /* ════════════════════════════
       ADAPTABILITY (laptop section)
    ════════════════════════════ */
    .adapt-card {
      background: linear-gradient(140deg, #1A0B2E 0%, #2D1460 50%, #8B2BE2 100%);
      border-radius: 28px; overflow: hidden;
      position: relative; padding: 56px 56px 0;
      min-height: 440px;
    }.spk-landing .adapt-card::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 80% 20%, rgba(245,63,106,0.20), transparent 55%);
    }.spk-landing .adapt-text { position: relative; z-index: 2; max-width: 400px; padding-bottom: 56px; }.spk-landing .adapt-text h2 {
      font-size: clamp(30px, 3.5vw, 44px); font-weight: 900; letter-spacing: -1.5px;
      line-height: 1.08; margin-bottom: 14px; color: #fff;
    }.spk-landing .adapt-text p { font-size: 15px; color: rgba(255,255,255,0.60); line-height: 1.70; margin-bottom: 28px; }.spk-landing .adapt-btns { display: flex; gap: 12px; }.spk-landing .btn-adapt-primary {
      background: linear-gradient(135deg,#F53F6A 0%,#FF6B2B 55%,#8B2BE2 100%);
      color: #fff; padding: 12px 26px; border-radius: 40px;
      font-size: 13px; font-weight: 800;
      box-shadow: 0 4px 18px rgba(245,63,106,0.35);
      transition: opacity 0.2s;
    }.spk-landing .btn-adapt-primary:hover { opacity: 0.88; }.spk-landing .btn-adapt-secondary {
      background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
      color: #fff; padding: 12px 24px; border-radius: 40px;
      font-size: 13px; font-weight: 700;
    }.spk-landing /* Dashboard mockup */
    .dashboard-mock {
      position: absolute; right: 40px; bottom: 0; z-index: 2;
      width: 500px;
    }.spk-landing .dash-laptop {
      background: #12101E; border: 2px solid rgba(255,255,255,0.12);
      border-radius: 18px 18px 0 0;
      padding: 12px; padding-bottom: 0;
    }.spk-landing .dash-topbar {
      display: flex; align-items: center; gap: 6px;
      margin-bottom: 10px;
    }.spk-landing .dash-dot { width: 10px; height: 10px; border-radius: 50%; }.spk-landing .dash-dot.r { background: #FF5F57; }.spk-landing .dash-dot.y { background: #FEBC2E; }.spk-landing .dash-dot.g { background: #28C840; }.spk-landing .dash-screen { background: #0D0B16; border-radius: 8px; padding: 14px; }.spk-landing .ds-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }.spk-landing .ds-title { font-size: 11px; font-weight: 800; color: #fff; }.spk-landing .ds-period { font-size: 9px; font-weight: 700; color: var(--muted); background: rgba(255,255,255,0.06); padding: 3px 8px; border-radius: 6px; }.spk-landing .ds-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-bottom: 10px; }.spk-landing .ds-stat-box { background: rgba(255,255,255,0.04); border-radius: 8px; padding: 9px; border: 1px solid rgba(255,255,255,0.06); }.spk-landing .ds-stat-label { font-size: 8px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }.spk-landing .ds-stat-val { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -0.3px; margin-top: 1px; }.spk-landing .ds-stat-val.grad {
      background: var(--grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent;
      background-clip: text;
    }.spk-landing .ds-chart { display: flex; align-items: flex-end; gap: 4px; height: 56px; }.spk-landing .ds-bar { flex: 1; border-radius: 4px 4px 0 0; background: rgba(255,255,255,0.07); }.spk-landing .ds-bar.active { background: linear-gradient(180deg, #F53F6A, #8B2BE2); }.spk-landing .ds-bar.semi { background: linear-gradient(180deg, rgba(245,63,106,0.5), rgba(139,43,226,0.5)); }.spk-landing /* ════════════════════════════
       FLOATING CHAT (learn section)
    ════════════════════════════ */
    .chat-section {
      display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
    }.spk-landing .chat-mock { position: relative; }.spk-landing .chat-card {
      background: #13111F; border: 1px solid var(--border);
      border-radius: 20px; padding: 16px; max-width: 340px;
    }.spk-landing .chat-bubble {
      border-radius: 14px; padding: 11px 14px;
      font-size: 12px; line-height: 1.6; margin-bottom: 6px;
      max-width: 240px;
    }.spk-landing .cb-bot {
      background: rgba(139,43,226,0.15); border: 1px solid rgba(139,43,226,0.22);
      color: rgba(255,255,255,0.8);
    }.spk-landing .cb-user {
      background: rgba(245,63,106,0.15); border: 1px solid rgba(245,63,106,0.22);
      color: rgba(255,255,255,0.8); margin-left: auto;
    }.spk-landing .chat-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--grad); display: inline-flex; align-items: center; justify-content: center;
      font-size: 12px; margin-bottom: 4px; flex-shrink: 0;
    }.spk-landing .chat-bot-row { display: flex; align-items: flex-end; gap: 7px; margin-bottom: 8px; }.spk-landing .chat-user-row { display: flex; flex-direction: column; align-items: flex-end; margin-bottom: 8px; }.spk-landing .chat-typing {
      display: flex; gap: 4px; align-items: center;
      background: rgba(139,43,226,0.10); border: 1px solid rgba(139,43,226,0.18);
      border-radius: 14px; padding: 9px 14px; width: fit-content;
    }.spk-landing .typing-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(255,255,255,0.4);
      animation: typingBounce 1.2s ease-in-out infinite;
    }.spk-landing .typing-dot:nth-child(2) { animation-delay: 0.15s; }.spk-landing .typing-dot:nth-child(3) { animation-delay: 0.3s; }
    @keyframes typingBounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-5px)} }.spk-landing /* Floating emoji in chat section */
    .chat-emoji {
      position: absolute; font-size: 24px;
      animation: floatEmoji 4s ease-in-out infinite;
    }.spk-landing .ce-1 { top: -20px; right: 10px; animation-delay: 0s; }.spk-landing .ce-2 { bottom: 10px; right: -10px; animation-delay: 1.5s; font-size: 20px; }
    @keyframes floatEmoji { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }.spk-landing .chat-text { padding-left: 10px; }.spk-landing .chat-text h2 { font-size: clamp(28px, 3.2vw, 42px); font-weight: 900; letter-spacing: -1.2px; line-height: 1.08; margin-bottom: 14px; }.spk-landing .chat-text p { font-size: 15px; color: var(--muted); line-height: 1.72; margin-bottom: 24px; max-width: 380px; }.spk-landing /* ════════════════════════════
       FINAL CTA BANNER (green-ish)
    ════════════════════════════ */
    .final-cta {
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);
      border-radius: 28px; padding: 52px;
      text-align: center; position: relative; overflow: hidden;
    }.spk-landing .final-cta::before {
      content: '';
      position: absolute; inset: 0;
      background: radial-gradient(ellipse at 30% 50%, rgba(255,255,255,0.12), transparent 60%);
    }.spk-landing .fc-title { font-size: clamp(28px,4vw,46px); font-weight: 900; letter-spacing: -1.5px; margin-bottom: 12px; position: relative; z-index: 1; }.spk-landing .fc-sub { font-size: 16px; color: rgba(255,255,255,0.75); margin-bottom: 32px; position: relative; z-index: 1; }.spk-landing .fc-btns { display: flex; gap: 12px; justify-content: center; position: relative; z-index: 1; flex-wrap: wrap; }.spk-landing .btn-fc-primary {
      background: #fff; color: #0A0A0F; padding: 14px 32px; border-radius: 40px;
      font-size: 15px; font-weight: 900;
      transition: opacity 160ms ease-out, transform 160ms ease-out;
      box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    }.spk-landing .btn-fc-primary:hover { opacity: 0.9; transform: translateY(-1px); }.spk-landing .btn-fc-primary:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing .btn-fc-secondary {
      background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.35);
      color: #fff; padding: 13px 28px; border-radius: 40px;
      font-size: 15px; font-weight: 700;
      transition: background 160ms ease-out, transform 160ms ease-out;
    }.spk-landing .btn-fc-secondary:hover { background: rgba(255,255,255,0.25); }.spk-landing .btn-fc-secondary:active { transform: scale(0.97); transition-duration: 100ms; }.spk-landing /* ════════════════════════════
       WHY SPIKABLE SECTION
    ════════════════════════════ */
    .why-wrap {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding-top: 80px;   /* normal section spacing (was min-height:100vh → left big empty gap) */
    }.spk-landing .why-content {
      padding-top: 60px;
      padding-bottom: 60px;
    }.spk-landing .why-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 72px;
      align-items: center;
      min-height: calc(100vh - 200px);
    }.spk-landing .why-left {
      display: flex; flex-direction: column;
      justify-content: center; gap: 0;
    }.spk-landing .why-left-title {
      font-size: clamp(36px, 4.5vw, 58px);
      font-weight: 900; line-height: 1.05;
      letter-spacing: 0px; color: #fff;
      margin-bottom: 20px;
    }.spk-landing .why-title-anim .smm-letter, .spk-landing .video-title .smm-letter {
      -webkit-text-fill-color: currentColor;
      background: none;
      -webkit-background-clip: unset;
      background-clip: unset;
    }.spk-landing .why-left-desc {
      font-size: 15px; color: var(--muted); line-height: 1.8;
      margin-bottom: 14px; max-width: 100%;
    }.spk-landing .why-feature-list {
      display: flex; flex-direction: column;
    }.spk-landing .why-feature-item {
      display: flex; align-items: flex-start; gap: 14px;
      padding: 18px 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
                  transform 0.55s cubic-bezier(0.22,1,0.36,1);
    }.spk-landing .why-feature-item.why-item-visible {
      transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
                  transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    }.spk-landing .why-feature-item:first-child { border-top: 1px solid rgba(255,255,255,0.07); }.spk-landing .why-feature-item.why-item-visible {
      opacity: 1;
      transform: translateY(0);
    }.spk-landing /* Left headline also animates in */
    .why-left {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1),
                  transform 0.6s cubic-bezier(0.22,1,0.36,1);
    }.spk-landing .why-left.why-item-visible {
      opacity: 1;
      transform: translateY(0);
    }.spk-landing .why-feature-emoji {
      width: 42px; height: 42px; flex-shrink: 0; margin-top: 1px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 12px;
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);
      box-shadow: 0 6px 16px rgba(184,31,255,0.30), inset 0 1px 0 rgba(255,255,255,0.18);
      transition: filter 0.28s ease, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    }.spk-landing .why-feature-emoji svg { width: 22px; height: 22px; stroke: #fff; fill: none; }.spk-landing .why-feature-item {
      cursor: default;
    }.spk-landing .why-feature-title {
      font-size: 17px; font-weight: 800; color: #fff;
      margin-bottom: 3px; line-height: 1.3;
      transition: -webkit-text-fill-color 0.25s;
    }.spk-landing .why-feature-desc {
      font-size: 15px; color: var(--muted); line-height: 1.65;
    }

    @media (max-width: 860px) {.spk-landing .why-grid { grid-template-columns: 1fr; gap: 36px; min-height: unset; }
    }.spk-landing /* ════════════════════════════
       HOW IT WORKS
    ════════════════════════════ */
    .how-section { text-align: center; }.spk-landing .how-eyebrow {
      display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: 0.4px;
      color: rgba(255,255,255,0.5); text-transform: uppercase; margin-bottom: 14px;
    }.spk-landing .how-title {
      font-size: clamp(32px, 4vw, 54px); font-weight: 900; line-height: 1.05;
      letter-spacing: -0.5px; color: #fff; margin: 0 0 12px;
    }.spk-landing .how-sub { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 780px; margin: 0 auto; }.spk-landing .how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 48px; }.spk-landing .how-card {
      position: relative; text-align: left; overflow: hidden;
      background: rgba(13,10,22,0.58);
      backdrop-filter: blur(26px) saturate(155%); -webkit-backdrop-filter: blur(26px) saturate(155%);
      border: 1px solid rgba(255,255,255,0.09);
      border-radius: 22px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), inset 0 -1px 0 rgba(255,255,255,0.03), 0 26px 64px rgba(0,0,0,0.45);
      transition: transform 0.25s cubic-bezier(0.23,1,0.32,1), border-color 0.25s, background 0.25s, box-shadow 0.25s;
      display: flex; flex-direction: column;
    }.spk-landing .how-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--sp-grad); z-index: 3; }.spk-landing .how-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,0.18); background: rgba(20,15,32,0.64); box-shadow: inset 0 1px 0 rgba(255,255,255,0.13), 0 32px 74px rgba(0,0,0,0.52); }.spk-landing .how-visual {
      height: 230px; position: relative; overflow: visible;
      display: flex; align-items: center; justify-content: center;
      background: radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255,20,102,0.06), transparent 66%);
    }.spk-landing .how-body { padding: 22px 24px 26px; }.spk-landing .how-card h3 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 8px; letter-spacing: -0.2px; }.spk-landing .how-card p { font-size: 13.5px; line-height: 1.6; color: var(--muted); }.spk-landing /* Visual 1 — sign up button */
    .hv-signup {
      position: relative; z-index: 1;
      width: 88%; max-width: 280px; padding: 16px 0; text-align: center; border-radius: 999px; background: var(--sp-grad);
      color: #fff; font-size: 18px; font-weight: 800; letter-spacing: 0.2px;
      box-shadow: 0 0 0 9px rgba(255,255,255,0.035);   /* faint white ring only — colored glow removed (Golf) */
      animation: hvPress 2.8s cubic-bezier(0.23,1,0.32,1) infinite;
    }.spk-landing /* white ring ripples outward on each "press" (Golf) — no gradient glow, .spk-landing just the ring */
    .hv-signup::before, .spk-landing .hv-signup::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      box-shadow: 0 0 0 9px rgba(255,101,0,0.22);   /* CI orange #FF6500 ripple */
      filter: blur(2px);
      z-index: -1; opacity: 0;
      animation: hvRing 2.8s ease-out infinite;
    }.spk-landing .hv-signup::after { animation-delay: 0.2s; }
    @keyframes hvPress { 0%,72%,100% { transform: scale(1); } 80% { transform: scale(0.9); } 88% { transform: scale(1); } }
    @keyframes hvRing { 0%,74% { transform: scale(1); opacity: 0; } 82% { opacity: 0.35; transform: scale(1.02); } 100% { transform: scale(1.18); opacity: 0; } }.spk-landing /* Visual 2 — payment orbs */
    .hv-orbs { position: relative; width: 230px; height: 188px; perspective: 700px; }.spk-landing .hv-orb {
      position: absolute; border-radius: 50%; overflow: hidden;
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 10px 26px rgba(0,0,0,0.35),               /* neutral shadow — colored glow removed (Golf) */
                  inset 0 0 0 2.5px rgba(255,255,255,0.30),   /* coin rim */
                  inset 0 3px 9px rgba(255,255,255,0.28),     /* top face highlight */
                  inset 0 -6px 13px rgba(0,0,0,0.22);         /* bottom face shadow */
      animation: hvCoin var(--d,6s) ease-in-out var(--dl,0s) infinite;
    }.spk-landing .hv-shine {
      position: absolute; top: 0; bottom: 0; left: 0; width: 55%; pointer-events: none;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
      transform: translateX(-160%) skewX(-12deg);
      animation: hvShine var(--d,6s) ease-in-out var(--dl,0s) infinite;
    }
    @keyframes hvShine { 0%,32% { transform: translateX(-160%) skewX(-12deg); } 68%,100% { transform: translateX(260%) skewX(-12deg); } }.spk-landing .hv-orb svg { width: 42%; height: 42%; color: #fff; }.spk-landing .hv-orb span { color: #fff; font-weight: 800; line-height: 1; }.spk-landing .hv-orb.o-c { width: 94px; height: 94px; left: 68px; top: 44px;  font-size: 42px; --d:7s;   --dl:0s; }.spk-landing .hv-orb.o-1 { width: 62px; height: 62px; left: 0;    top: 2px;   --d:6.4s; --dl:.4s; font-size: 28px; }.spk-landing .hv-orb.o-2 { width: 48px; height: 48px; right: 4px; top: 22px;  --d:7.6s; --dl:1.1s; font-size: 22px; }.spk-landing .hv-orb.o-3 { width: 44px; height: 44px; left: 18px; bottom: 4px;--d:6.8s; --dl:.7s; font-size: 22px; }.spk-landing .hv-orb.o-4 { width: 66px; height: 66px; right: 0;   bottom: 0;  --d:8s;   --dl:1.5s; font-size: 30px; }
    @keyframes hvFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
    @keyframes hvCoin {
      0%,100% { transform: translateY(0) rotate(-4deg); }
      50%     { transform: translateY(-12px) rotate(4deg); }
    }.spk-landing /* Visual 3 — order form */
    .hv-form { width: 84%; position: relative; }.spk-landing .hv-flabel { font-size: 11px; color: rgba(255,255,255,0.5); margin: 0 0 6px 2px; }.spk-landing .hv-field {
      height: 38px; border-radius: 11px; margin-bottom: 13px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      display: flex; align-items: center; padding: 0 13px;
      font-size: 12px; color: rgba(255,255,255,0.68); white-space: nowrap; overflow: hidden;
    }.spk-landing .hv-submit {
      position: relative; height: 40px; border-radius: 11px; margin-top: 2px;
      background: var(--sp-grad); color: #fff; font-size: 14px; font-weight: 800;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 8px 24px rgba(255,20,102,0.40);
    }.spk-landing /* ── Launch-a-campaign sequence (9s loop): cursor -> type Link -> type Qty -> click Submit ── */
    .hv-field-link, .spk-landing .hv-field-qty { display: block !important; }.spk-landing .hv-typed { display: inline-block; white-space: nowrap; vertical-align: middle; line-height: 38px; }.spk-landing .hv-typed::after { content: ""; display: inline-block; width: 2px; height: 15px; margin-left: 1px; vertical-align: -2px; background: rgba(255,255,255,0.8); opacity: 0; }.spk-landing .hv-typed.tw-on::after { opacity: 1; animation: hvBlink 0.7s steps(1) infinite; }
    @keyframes hvBlink { 0%,50% { opacity: 1; } 50.01%,100% { opacity: 0; } }.spk-landing .hv-submit { animation: hvSubmitPress 6.5s ease-out infinite; }
    @keyframes hvSubmitPress {
      0%,66% { transform: scale(1); }
      70% { transform: scale(0.84); }    /* quick press down */
      75% { transform: scale(1.1); }     /* cute bounce-up overshoot */
      80%,100% { transform: scale(1); }  /* settle */
    }.spk-landing /* ── success state: submit -> Sent! ── */
    .hv-submit { overflow: hidden; }.spk-landing .hv-btn-submit, .spk-landing .hv-btn-sent { display: inline-flex; align-items: center; justify-content: center; gap: 5px; }.spk-landing .hv-btn-sent { position: absolute; inset: 0; opacity: 0; }.spk-landing .hv-btn-sent svg { width: 14px; height: 14px; }.spk-landing .hv-btn-submit { animation: hvTxtSubmit 6.5s steps(1,end) infinite; }.spk-landing .hv-btn-sent { animation: hvTxtSent  6.5s steps(1,end) infinite; }
    @keyframes hvTxtSubmit { 0%,70% { opacity: 1; } 71%,93% { opacity: 0; } 95%,100% { opacity: 1; } }
    @keyframes hvTxtSent   { 0%,70% { opacity: 0; } 71%,93% { opacity: 1; } 95%,100% { opacity: 0; } }.spk-landing /* field focus glow synced to cursor arrival */
    .hv-field-link { animation: hvFocusL 6.5s ease-in-out infinite; }.spk-landing .hv-field-qty { animation: hvFocusQ 6.5s ease-in-out infinite; }
    @keyframes hvFocusL {
      0%,3% { border-color: rgba(255,255,255,0.12); box-shadow: none; }
      6%,20% { border-color: rgba(255,106,0,0.55); box-shadow: 0 0 0 3px rgba(255,106,0,0.12); }
      25%,100% { border-color: rgba(255,255,255,0.12); box-shadow: none; }
    }
    @keyframes hvFocusQ {
      0%,33% { border-color: rgba(255,255,255,0.12); box-shadow: none; }
      36%,50% { border-color: rgba(255,106,0,0.55); box-shadow: 0 0 0 3px rgba(255,106,0,0.12); }
      54%,100% { border-color: rgba(255,255,255,0.12); box-shadow: none; }
    }.spk-landing /* submit click ripple */
    .hv-submit::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      background: var(--sp-grad); z-index: -1; opacity: 0; filter: blur(7px);
      animation: hvSubmitRing 6.5s ease-out infinite;
    }
    @keyframes hvSubmitRing {
      0%,67% { transform: scale(1); opacity: 0; }
      72% { opacity: 0.55; transform: scale(1.03); }
      88% { transform: scale(1.45); opacity: 0; }
      100% { opacity: 0; }
    }.spk-landing .hv-cursor {
      position: absolute; z-index: 6; left: 80%; top: 30px;
      width: 24px; height: 24px; color: #fff;
      filter: drop-shadow(0 2px 5px rgba(0,0,0,0.55));
      animation: hvCursor 6.5s cubic-bezier(0.5,0,0.25,1) infinite;
    }
    @keyframes hvCursor {
      0%,20%  { top: 34px;  left: 80%; transform: scale(1); }   /* START at Link */
      28%     { top: 124px; left: 80%; transform: scale(1.14); }/* overshoot Qty +6 + pop */
      33%     { top: 118px; left: 80%; transform: scale(1); }   /* settle */
      50%     { top: 118px; left: 80%; transform: scale(1); }
      59%     { top: 184px; left: 64%; transform: scale(1.14); }/* SMALL overshoot Submit +4 */
      64%     { top: 180px; left: 64%; transform: scale(1); }   /* settle */
      69%     { top: 182px; left: 64%; transform: scale(0.78); }/* click */
      74%     { top: 180px; left: 64%; transform: scale(1); }
      90%     { top: 180px; left: 64%; transform: scale(1); }
      96%     { top: 28px;  left: 80%; transform: scale(1.12); }/* overshoot back to Link */
      100%    { top: 34px;  left: 80%; transform: scale(1); }
    }.spk-landing /* Visual 4 — dashboard */
    /* ── Track performance: Toast Stack ── */
    .hv-toasts { width: 86%; display: flex; flex-direction: column; gap: 10px; }.spk-landing .hv-toast {
      display: flex; align-items: center; gap: 10px;
      background: rgba(13,10,22,0.85); border: 1px solid rgba(255,255,255,0.10);
      border-radius: 12px; padding: 10px 13px; box-shadow: 0 10px 28px rgba(0,0,0,0.4);
      opacity: 0; transform: translateY(14px) scale(0.96);
      animation: hvToast 4.5s cubic-bezier(0.23,1,0.32,1) infinite;
    }.spk-landing .hv-toast.t1 { animation-delay: 0s; }.spk-landing .hv-toast.t2 { animation-delay: 0.5s; }.spk-landing .hv-toast.t3 { animation-delay: 1s; }
    @keyframes hvToast {
      0% { opacity: 0; transform: translateY(14px) scale(0.96); }
      12%,82% { opacity: 1; transform: translateY(0) scale(1); }
      100% { opacity: 0; transform: translateY(-6px) scale(0.98); }
    }.spk-landing .hv-tic { width: 26px; height: 26px; border-radius: 8px; background: var(--sp-grad); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }.spk-landing .hv-tic svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; }.spk-landing .hv-ttx { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.3; }.spk-landing .hv-ttx small { display: block; font-size: 9px; font-weight: 500; color: rgba(255,255,255,0.45); margin-top: 1px; }.spk-landing .hv-plus { margin-left: auto; font-size: 12px; font-weight: 800; color: #28E07B; white-space: nowrap; }

    @media (max-width: 900px) {.spk-landing .how-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
    @media (max-width: 540px) {.spk-landing .how-grid { grid-template-columns: 1fr; } }
    /* coins: scale the whole cluster down on narrow cards so they don't crowd */
    /* mobile: keep ALL visuals the same height so the 4 cards match (and the campaign form's "Link" isn't glued to the top edge) */
    @media (max-width: 700px) {.spk-landing .hv-orbs { transform: scale(0.84); }.spk-landing .how-visual { height: 216px; } }
    @media (max-width: 420px) {.spk-landing .hv-orbs { transform: scale(0.72); } }.spk-landing /* ════════════════════════════
       FAQ SECTION
    ════════════════════════════ */
    .faq-section { text-align: center; }.spk-landing .faq-title {
      font-size: clamp(32px, 4vw, 54px);
      font-weight: 900; line-height: 1.05;
      letter-spacing: -0.5px; color: #fff;
      margin-bottom: 32px;
    }.spk-landing .faq-tabs {
      display: inline-flex; gap: 8px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 999px; padding: 5px;
      margin-bottom: 48px;
    }.spk-landing .faq-tab {
      padding: 10px 24px; border-radius: 999px;
      font-size: 14px; font-weight: 600;
      color: rgba(255,255,255,0.5);
      border: none; background: none;
      cursor: pointer;
      transition: background 0.25s, color 0.25s;
    }.spk-landing .faq-tab.active {
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      color: #fff;
    }.spk-landing .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      text-align: left;
      align-items: start;
    }.spk-landing .faq-item {
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 16px;
      overflow: hidden;
      transition: border-color 0.25s;
    }.spk-landing .faq-item.open { border-color: rgba(255,0,85,0.25); }.spk-landing .faq-question {
      display: flex; align-items: center; justify-content: space-between;
      gap: 16px; padding: 20px 24px;
      font-size: 15px; font-weight: 700; color: #fff;
      cursor: pointer; user-select: none;
      transition: color 0.25s;
    }.spk-landing .faq-item.open .faq-question { color: #fff; }.spk-landing .faq-icon {
      position: relative;          /* anchor for the two bars */
      width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
      background: rgba(255,255,255,0.07);
      color: rgba(255,255,255,0.5);
      transition: background 0.25s, color 0.25s, transform 0.3s;
    }.spk-landing /* CSS-drawn cross → mathematically centered (no font-glyph offset) */
    .faq-icon::before, .spk-landing .faq-icon::after {
      content: ''; position: absolute; top: 50%; left: 50%;
      width: 11px; height: 1.5px; border-radius: 1px;
      background: currentColor;
      transform: translate(-50%, -50%);            /* horizontal bar */
    }.spk-landing .faq-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);   /* vertical bar → forms "+" */
    }.spk-landing .faq-item.open .faq-icon {
      background: linear-gradient(135deg, #FF0055, #8800FF);
      color: #fff; transform: rotate(45deg);            /* "+" → "×" */
    }.spk-landing /* smooth open: grid 0fr→1fr (exact height) + spring overshoot on content */
    .faq-answer { display: grid; grid-template-rows: 0fr;
      transition: grid-template-rows 0.5s cubic-bezier(0.34,1.56,0.64,1); }.spk-landing .faq-ans-clip { overflow: hidden; }.spk-landing .faq-ans-text {
      padding: 0 24px 20px;
      font-size: 14px; color: var(--muted); line-height: 1.75;
      opacity: 0; transform: translateY(10px) scale(0.98);
      transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
    }.spk-landing .faq-item.open .faq-answer { grid-template-rows: 1fr; }.spk-landing .faq-item.open .faq-ans-text { opacity: 1; transform: translateY(0) scale(1); }.spk-landing .faq-panel { display: none; }.spk-landing .faq-panel.active { display: grid; }

    @media (max-width: 768px) {.spk-landing .faq-grid { grid-template-columns: 1fr; }.spk-landing /* keep on ONE line: shrink font + padding so long label fits (fits ~360px comfortably, .spk-landing ~320px tight) */
      .faq-tabs { gap: 5px; padding: 5px; max-width: 100%; }.spk-landing .faq-tab { padding: 11px 20px; font-size: 13px; white-space: nowrap; }
    }

    /* ════════════════════════════
       CALL TO ACTION  (Asymmetric + phone bleeds out top, flush bottom)
    ════════════════════════════ */
    @property --cta-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }.spk-landing .cta-section { margin: 110px 0 96px; }.spk-landing /* extra top room for the phone bleeding above */
    .cta-card {
      position: relative; isolation: isolate;
      display: grid; grid-template-columns: 1.1fr 0.9fr;
      gap: 44px; align-items: center;
      max-width: 1060px; margin: 0 auto;
      padding: 56px 56px; border-radius: 30px;
      background:
        radial-gradient(ellipse 70% 130% at 8% 0%,     rgba(255,20,102,0.13) 0%, transparent 55%),
        radial-gradient(ellipse 70% 130% at 100% 100%, rgba(184,31,255,0.14) 0%, transparent 55%),
        rgba(20,16,30,0.55);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 40px 90px rgba(0,0,0,0.45);
      overflow: visible;   /* let the phone bleed out the top */
    }.spk-landing .cta-card::before {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      padding: 1px; pointer-events: none; z-index: 0; opacity: 0.6;
      background: conic-gradient(from var(--cta-angle),
        transparent 0deg, #FF1466 90deg, #FF6A00 150deg, #B81FFF 210deg, transparent 300deg);
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: ctaSpin 7s linear infinite;
    }
    @keyframes ctaSpin { to { --cta-angle: 360deg; } }
    @supports not (background: conic-gradient(from var(--cta-angle), red)) {.spk-landing .cta-card::before { background: none; padding: 0; border: 1px solid rgba(255,255,255,0.12); -webkit-mask: none; mask: none; }
    }.spk-landing .cta-card > * { position: relative; z-index: 2; }.spk-landing .cta-eyebrow {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 12px; font-weight: 600; letter-spacing: 0.3px; color: rgba(255,255,255,0.66);
      padding: 6px 13px; border-radius: 999px;
      background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10); margin-bottom: 18px;
    }.spk-landing .cta-eyebrow::before {
      content: ""; width: 7px; height: 7px; border-radius: 50%; background: #28E07B;
      box-shadow: 0 0 0 0 rgba(40,224,123,0.45); animation: ctaPulse 2.4s ease-out infinite;
    }
    @keyframes ctaPulse { 0% { box-shadow: 0 0 0 0 rgba(40,224,123,0.45); } 70%,100% { box-shadow: 0 0 0 6px rgba(40,224,123,0); } }.spk-landing .cta-title { font-size: clamp(28px, 3.4vw, 46px); font-weight: 900; line-height: 1.07; letter-spacing: -0.5px; color: #fff; margin: 0 0 14px; }.spk-landing .cta-br { display: none; }.spk-landing /* forced line break — mobile only */
    .cta-sub { font-size: 16px; line-height: 1.62; color: var(--muted); max-width: 460px; margin: 0 0 28px; }.spk-landing .cta-btns { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }.spk-landing .cta-magnetic { display: inline-block; }.spk-landing /* match Sign up free height to Sign in (theme forces signup pill smaller — override) */
    .cta-card .cta-magnetic a[href*="signup"] { padding: 15px 26px !important; font-size: 14px !important; border-radius: 40px !important; }.spk-landing /* RIGHT — phone bleeds above the card, .spk-landing bottom flush with card bottom edge */
    .cta-visual { position: relative; align-self: stretch; min-height: 300px; }.spk-landing .cta-phone-wrap {
      position: absolute; right: -6px; bottom: -56px;   /* -56 cancels card bottom padding → flush with card outer bottom */
      width: 100%; max-width: 440px;
    }.spk-landing .cta-phone-wrap::before {
      content: ""; position: absolute; inset: 8% 6% 4%; z-index: 0;
      background: radial-gradient(circle at 50% 42%, rgba(255,20,102,0.22), rgba(184,31,255,0.16) 45%, transparent 68%);
      filter: blur(28px);
    }.spk-landing .cta-phone-wrap img { position: relative; z-index: 1; width: 100%; height: auto; display: block; filter: drop-shadow(0 26px 46px rgba(0,0,0,0.55)); }.spk-landing .cta-float-card {
      position: absolute; z-index: 3;
      display: flex; align-items: center; gap: 11px;
      padding: 12px 15px; border-radius: 14px; white-space: nowrap;
      background: rgba(30,24,46,0.92);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: 0 18px 42px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10);
      animation: ctaFloat 4.4s ease-in-out infinite;
    }.spk-landing .cf-1 { left: -16%; top: 44%;  animation-duration: 4.4s; }.spk-landing .cf-2 { right: -13%; top: 22%;  animation-duration: 5.2s; animation-delay: -1.4s; }.spk-landing .cf-3 { left: -8%;  bottom: 6%; animation-duration: 4.8s; animation-delay: -2.6s; }
    @keyframes ctaFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }.spk-landing .cta-fc-icon { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: rgba(40,224,123,0.16); color: #28E07B; }.spk-landing .cta-fc-icon.is-bolt { background: rgba(255,138,30,0.16); color: #FF9A2E; }.spk-landing .cta-fc-icon.is-star { background: rgba(255,20,102,0.18); color: #FF4D8A; }.spk-landing .cta-fc-icon svg { width: 16px; height: 16px; }.spk-landing .cta-fc-title { font-size: 12px; font-weight: 700; color: #fff; line-height: 1.2; }.spk-landing .cta-fc-sub { font-size: 11px; color: rgba(255,255,255,0.6); margin-top: 2px; }

    @media (max-width: 820px) {.spk-landing .cta-section { margin: 60px 0 68px; }.spk-landing .cta-card { grid-template-columns: 1fr; gap: 18px; padding: 44px 30px 0; text-align: center; }.spk-landing .cta-eyebrow, .spk-landing .cta-sub { margin-left: auto; margin-right: auto; }.spk-landing .cta-btns { justify-content: center; }.spk-landing .cta-br { display: inline; }.spk-landing .cta-visual { align-self: auto; min-height: 0; }.spk-landing /* no order -> phone sits at bottom */
      .cta-phone-wrap { position: static; right: auto; bottom: auto; margin: 0 auto; max-width: 360px; }.spk-landing .cf-1 { left: -6%; top: 46%; }.spk-landing .cf-2 { right: 2%; top: 9%; }.spk-landing .cf-3 { left: -4%; bottom: 8%; }
    }
    @media (max-width: 560px) {.spk-landing .cta-card { padding: 38px 22px 0; border-radius: 24px; }.spk-landing .cta-btns { flex-direction: column; }.spk-landing .cta-magnetic, .spk-landing .cta-btns .btn-hero-secondary { width: 100%; }.spk-landing .cta-magnetic .btn-hero-primary { display: flex; width: 100%; text-align: center; justify-content: center; }.spk-landing .cf-1 { left: -2%; padding: 10px 13px; }
    }.spk-landing /* ════════════════════════════
       FOOTER
    ════════════════════════════ */
    footer {
      border-top: 1px solid var(--border);
      padding: 56px 24px 0;
    }.spk-landing .footer-inner {
      max-width: 1280px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr auto auto; gap: 160px; align-items: start;
      margin-bottom: 48px;
    }.spk-landing .footer-brand p { font-size: 13px; color: var(--muted); margin-top: 14px; line-height: 1.7; max-width: 480px; }.spk-landing .footer-col h4 { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 18px; }.spk-landing .footer-col ul { display: flex; flex-direction: column; gap: 11px; }.spk-landing .footer-col a, .spk-landing .footer-col a:visited { font-size: 13px; color: rgba(255,255,255,0.52) !important; transition: color 0.2s; }.spk-landing .footer-col a:hover { color: #fff !important; }.spk-landing .footer-col a[data-platform] { cursor: pointer; }.spk-landing /* footer social icons */
    .footer-soc { display: flex; gap: 10px; margin-top: 20px; }.spk-landing .footer-soc a, .spk-landing .footer-soc a:visited { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.09); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.52) !important; transition: color 0.25s, background 0.25s, border-color 0.25s, transform 0.25s cubic-bezier(0.23,1,0.32,1); }.spk-landing .footer-soc a:hover { color: #fff !important; border-color: transparent; background: linear-gradient(135deg,#FF1466,#FF6A00,#B81FFF); transform: translateY(-3px); }.spk-landing .footer-soc svg { width: 17px; height: 17px; fill: currentColor; }.spk-landing .footer-soc a[aria-label="Instagram"] svg { fill: none; stroke: currentColor; stroke-width: 2; }.spk-landing .footer-bottom {
      max-width: 1280px; margin: 0 auto;
      border-top: 1px solid var(--border); padding-top: 24px;
      display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
    }.spk-landing .footer-bottom p { font-size: 12px; color: var(--muted); }.spk-landing .footer-bottom-links { display: flex; gap: 18px; }.spk-landing .footer-bottom-links a, .spk-landing .footer-bottom-links a:visited { font-size: 12px; color: rgba(255,255,255,0.52) !important; transition: color 0.2s; }.spk-landing .footer-bottom-links a:hover { color: #fff !important; }

    /* ════════════════════════════
       SMM RESPONSIVE
    ════════════════════════════ */
    /* Tablet & below (≤1080px) — stack to one column.
       NOTE: this block sits BEFORE the base SMM rules in source, so use !important to win. */
    @media (max-width: 1080px) {.spk-landing .smm-section { min-height: unset !important; }.spk-landing /* Tablet: 2-col — left = text + price card (stacked), .spk-landing right = phone (centered) */
      .smm-panel-content {
        display: grid !important;
        grid-template-columns: 1fr clamp(220px, 34vw, 320px) !important;
        grid-template-areas: "text phone" "card phone" !important;
        column-gap: 28px !important; row-gap: 22px !important;
        align-items: start !important;
        padding: 30px 28px !important; border-radius: 22px !important;
        overflow: hidden !important; max-height: unset !important;
      }.spk-landing .smm-panel-left { grid-area: text !important; }.spk-landing .smm-panel-desc { max-width: none !important; }.spk-landing .smm-features { max-width: 520px !important; }.spk-landing .smm-panel-right {
        grid-area: card !important; width: 100% !important; max-width: none !important;
        margin: 0 !important;
      }.spk-landing .smm-phone-wrap {
        grid-area: phone !important; align-self: stretch !important;
        display: flex !important; align-items: flex-end !important; justify-content: flex-end !important;
        width: 100% !important; margin: 0 -44px -30px 0 !important;   /* phone bleeds off the right + flush bottom */
      }.spk-landing .smm-iphone {
        display: block !important; width: clamp(290px, 46vw, 420px) !important; max-width: none !important; margin: 0 !important;
      }.spk-landing .smm-float-stat, .spk-landing .smm-float-graph, .spk-landing .smm-float-badge { display: none !important; }.spk-landing .smm-orb { display: none !important; }
    }
    /* Small mobile (≤560px) */
    @media (max-width: 560px) {.spk-landing /* mobile: single column (phone hidden) — collapse the tablet grid */
      .smm-panel-content {
        grid-template-columns: 1fr !important;
        grid-template-areas: "text" "card" !important;
        padding: 22px 16px !important; row-gap: 20px !important; border-radius: 18px !important;
      }.spk-landing .smm-phone-wrap { display: none !important; }.spk-landing /* hide phone mockup on mobile */
      .smm-panel-title { font-size: 22px !important; }.spk-landing .smm-tabs { gap: 6px !important; flex-wrap: wrap !important; }.spk-landing .smm-tab { padding: 9px 14px !important; font-size: 12px !important; gap: 6px !important; }.spk-landing .smm-tab svg { width: 14px !important; height: 14px !important; }.spk-landing .why-grid { gap: 28px; }.spk-landing .why-left-title { font-size: 36px; }
    }.spk-landing /* ════════════════════════════
       SCROLL FADE
    ════════════════════════════ */
    .fade-up {
      opacity: 0; transform: translateY(16px);
      transition: opacity 0.5s cubic-bezier(0.23,1,0.32,1), transform 0.5s cubic-bezier(0.23,1,0.32,1);
    }.spk-landing .fade-up.visible { opacity: 1; transform: translateY(0); }.spk-landing /* ════════════════════════════
       SMM SERVICES TABS
    ════════════════════════════ */
    .smm-section {
      width: 100%;
      min-height: calc(100vh - 80px);
      display: flex; flex-direction: column; justify-content: center;
      position: relative; z-index: 1;
    }.spk-landing .smm-header { text-align: center; margin-bottom: 24px; }.spk-landing .smm-sub { font-size: 15px; color: var(--muted); max-width: 720px; margin: 10px auto 0; }.spk-landing /* Letter-reveal animation (JS-driven) */
    .smm-letter {
      display: inline;          /* inline (not inline-block) → words don't break mid-letter; wrap only at spaces */
      color: #0A0A0F;
    }.spk-landing .smm-letter.lit {
      animation: letterReveal 1.1s cubic-bezier(0.23, 1, 0.32, 1) var(--letter-delay, 0s) both;
    }
    @keyframes letterReveal {
      0%   { color: #0A0A0F; }
      45%  { color: var(--letter-color); }
      100% { color: #ffffff; }
    }.spk-landing /* Variant: ends at gradient color (for "Spikable?") */
    .smm-letter.lit-colored {
      animation: letterRevealColored 1.1s cubic-bezier(0.23, 1, 0.32, 1) var(--letter-delay, 0s) both;
    }
    @keyframes letterRevealColored {
      0%   { color: #0A0A0F; }
      100% { color: var(--letter-color); }
    }.spk-landing .smm-letter.space { color: transparent !important; }.spk-landing /* ── Tab bar — floating pills, .spk-landing no container ── */
    .smm-tabs {
      display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap;
      background: none; border: none; box-shadow: none;
      padding: 0;
      margin-bottom: 20px;
    }.spk-landing .smm-tab {
      display: flex; align-items: center; gap: 9px;
      padding: 11px 24px; border-radius: 999px; /* pill */
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.09);
      cursor: pointer;
      color: rgba(255,255,255,0.5); font-size: 14px; font-weight: 600;
      font-family: 'Inter', sans-serif;
      transition: background 0.22s, color 0.22s, box-shadow 0.22s, border-color 0.22s;
      white-space: nowrap;
    }.spk-landing .smm-tab:hover {
      color: #fff;
      background: rgba(255,255,255,0.12);
      border-color: rgba(255,255,255,0.18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
    }.spk-landing .smm-tab.active {
      background: rgba(255,255,255,0.07);
      backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%);
      color: #fff;
      border-color: transparent;
      box-shadow:
        0 0 16px 3px rgba(255,0,85,0.30),
        0 0 36px 8px rgba(136,0,255,0.18),
        inset 0 1px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(255,255,255,0.06);
      position: relative;
    }.spk-landing .smm-tab.active::before {
      content: '';
      position: absolute; inset: -1.5px;
      border-radius: 999px;
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      z-index: -1;
    }.spk-landing .smm-tab.active svg { opacity: 1; color: #fff; }.spk-landing .smm-tab svg { flex-shrink: 0; width: 17px; height: 17px; }.spk-landing .smm-tab:not(.active) svg { opacity: 0.55; }

    /* ── Panels ── */
    @keyframes panelReveal {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }.spk-landing .smm-panel { display: none; }.spk-landing .smm-panel.active { display: block; animation: panelReveal 0.25s cubic-bezier(0.23,1,0.32,1) both; }.spk-landing .smm-panel-content {
      display: flex; gap: 32px; align-items: stretch;
      /* liquid glass panel */
      background: rgba(15,13,25,0.55);
      backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
      border: 1px solid rgba(255,255,255,0.10);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 20px 60px rgba(0,0,0,0.35);
      border-radius: 28px; padding: 32px 36px;
      position: relative; overflow: visible;
      /* Viewport-aware height */
      max-height: calc(100vh - 300px);
    }.spk-landing .smm-panel-content::before {
      content: '';
      position: absolute; inset: 0; pointer-events: none;
      background:
        radial-gradient(ellipse at 5% 60%, rgba(245,63,106,0.09) 0%, transparent 50%),
        radial-gradient(ellipse at 95% 15%, rgba(139,43,226,0.08) 0%, transparent 50%);
    }.spk-landing .smm-panel-left { flex: 1; min-width: 0; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }.spk-landing .smm-panel-right { flex-shrink: 0; width: 300px; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; }.spk-landing .smm-platform-badge {
      display: inline-flex; align-items: center; gap: 10px;
      align-self: flex-start;
      padding: 7px 16px 7px 10px; border-radius: 999px;
      color: #fff; font-size: 13px; font-weight: 700;
      margin-bottom: 16px;
      box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    }.spk-landing .smm-panel-title {
      font-size: clamp(22px, 2.2vw, 32px); font-weight: 900;
      letter-spacing: -0.8px; color: #fff; margin-bottom: 10px;
    }.spk-landing .smm-panel-desc {
      font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 22px; max-width: 420px;
    }.spk-landing .smm-features { display: flex; flex-direction: column; gap: 4px; margin-bottom: 28px; }.spk-landing .smm-feature {
      display: flex; align-items: center; gap: 10px;
      font-size: 13px; font-weight: 500;
      padding: 7px 12px 7px 8px; border-radius: 10px;
      cursor: default; position: relative;
      /* Gradient text base setup */
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      -webkit-background-clip: text; background-clip: text;
      -webkit-text-fill-color: rgba(255,255,255,0.72);
      transition: -webkit-text-fill-color 0.28s, transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
    }.spk-landing .smm-feat-dot {
      width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      transition: box-shadow 0.22s, transform 0.22s;
    }.spk-landing .btn-smm-cta {
      display: inline-block;
      align-self: flex-start;
      background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
      color: #fff; padding: 12px 28px; border-radius: 999px;
      font-size: 14px; font-weight: 700;
      box-shadow: 0 6px 20px rgba(245,63,106,0.35);
      transition: opacity 160ms ease-out, transform 160ms ease-out;
      white-space: nowrap;
    }.spk-landing .btn-smm-cta:hover { opacity: 0.88; transform: translateY(-1px); }.spk-landing .btn-smm-cta:active { transform: scale(0.97); transition-duration: 100ms; }

    /* ── Glow Orbs around iPhone ── */
    @keyframes orbFloat {
      0%,100% { transform: translate(0,0) scale(1); }
      33%      { transform: translate(10px,-14px) scale(1.08); }
      66%      { transform: translate(-8px,10px) scale(0.94); }
    }
    @keyframes orbPulse {
      0%,100% { opacity: 0.55; }
      50%      { opacity: 0.90; }
    }.spk-landing .smm-orb {
      position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
      filter: blur(28px);
      animation: orbFloat var(--orb-dur,7s) ease-in-out var(--orb-delay,0s) infinite,
                 orbPulse var(--orb-pulse,4s) ease-in-out var(--orb-delay,0s) infinite;
    }.spk-landing .smm-orb-1 {
      width: 120px; height: 120px;
      background: radial-gradient(circle, var(--orb-color-1,#FF0055) 0%, transparent 70%);
      top: -20px; right: 30px;
      --orb-dur: 8s; --orb-delay: 0s; --orb-pulse: 4s;
    }.spk-landing .smm-orb-2 {
      width: 90px; height: 90px;
      background: radial-gradient(circle, var(--orb-color-2,#8800FF) 0%, transparent 70%);
      bottom: 60px; right: 0;
      --orb-dur: 10s; --orb-delay: 1.5s; --orb-pulse: 5s;
    }.spk-landing .smm-orb-3 {
      width: 70px; height: 70px;
      background: radial-gradient(circle, var(--orb-color-3,#FF4400) 0%, transparent 70%);
      top: 50%; left: 0;
      --orb-dur: 6s; --orb-delay: 0.8s; --orb-pulse: 3.5s;
    }.spk-landing /* ── iPhone Mockup ── */
    .smm-phone-wrap {
      flex-shrink: 0;
      width: clamp(310px, 44vh, 390px);
      display: flex; align-items: flex-end; justify-content: center;
      position: relative; z-index: 1;
      margin-bottom: -32px;
    }.spk-landing .smm-iphone {
      position: relative;
      /* panel inner height ≈ (100vh-300px)-64px padding, phone width = height/1.634 ≈ 36.5vh */
      width: clamp(270px, 36.5vh, 340px);
      filter: drop-shadow(0 28px 56px rgba(0,0,0,0.60));
    }.spk-landing .smm-iphone-frame {
      width: 100%; display: block;
      position: relative; z-index: 2;
      pointer-events: none;
    }.spk-landing .smm-iphone-screen {
      position: absolute;
      top: 9px; left: 8px; right: 8px; bottom: 9px;
      border-radius: 44px;
      background: linear-gradient(160deg, #1a0830 0%, #0d0520 40%, #000 100%);
      display: none; flex-direction: column;
      padding: 46px 18px 18px;
      gap: 14px;
      z-index: 1;
      overflow: hidden;
    }.spk-landing /* ── Floating cards ── */
    .smm-float-card {
      position: absolute;
      background: rgba(12, 9, 24, 0.88);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: 18px;
      z-index: 30;
      box-shadow: 0 10px 36px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
      font-family: 'Inter', sans-serif;
    }.spk-landing /* Left floating stat card */
    .smm-float-stat {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      top: clamp(48px, 7vh, 72px); left: 0;
      min-width: 138px;
    }.spk-landing .sfs-dot {
      width: 9px; height: 9px; border-radius: 50%;
      background: #4ade80; flex-shrink: 0;
      box-shadow: 0 0 8px rgba(74,222,128,0.8);
    }.spk-landing .sfs-num { font-size: 16px; font-weight: 900; color: #fff; line-height: 1.1; }.spk-landing .sfs-lbl { font-size: 10px; color: rgba(255,255,255,0.42); margin-top: 1px; }.spk-landing .sfs-trend { font-size: 11px; font-weight: 700; color: #4ade80; white-space: nowrap; }.spk-landing /* Left floating chart card */
    .smm-float-graph {
      padding: 10px 12px;
      bottom: clamp(100px, 16vh, 155px); left: 0;
      min-width: 120px;
    }.spk-landing .sfg-head { font-size: 10px; color: rgba(255,255,255,0.42); margin-bottom: 8px; letter-spacing: 0.3px; }.spk-landing .sfg-bars { display: flex; align-items: flex-end; gap: 3px; height: 40px; }.spk-landing .sfg-bar { flex: 1; border-radius: 3px 3px 0 0; background: rgba(255,255,255,0.10); }.spk-landing .sfg-bar.hi { background: linear-gradient(180deg, #FF0055 0%, #FF4400 60%, #8800FF 100%); }.spk-landing /* On-screen pill badge */
    .smm-float-badge {
      position: absolute;
      display: flex; align-items: center; gap: 7px;
      padding: 8px 14px;
      border-radius: 999px;
      top: clamp(130px, 20vh, 195px); left: 18px;
      font-size: 12px; font-weight: 700; color: #fff;
      background: rgba(12, 9, 24, 0.88);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.14);
      z-index: 30;
      box-shadow: 0 6px 20px rgba(0,0,0,0.45);
      white-space: nowrap;
    }.spk-landing .sfb-dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: #f43f5e;
      box-shadow: 0 0 6px rgba(244,63,94,0.8);
    }

    /* ── Float card animations ─────────────────────────────── */
    @keyframes floatCardIn {
      from { opacity: 0; transform: translateX(-22px) scale(0.94); }
      to   { opacity: 1; transform: translateX(0)     scale(1);    }
    }
    @keyframes badgeSlideIn {
      from { opacity: 0; transform: translateX(-14px) scale(0.90); }
      to   { opacity: 1; transform: translateX(0)     scale(1);    }
    }
    @keyframes dotPulseGreen {
      0%, 100% { box-shadow: 0 0 6px rgba(74,222,128,0.65), 0 0 0 0   rgba(74,222,128,0.3); }
      55%       { box-shadow: 0 0 10px rgba(74,222,128,1),  0 0 0 8px rgba(74,222,128,0);   }
    }
    @keyframes dotPulseRed {
      0%, 100% { box-shadow: 0 0 5px rgba(244,63,94,0.65), 0 0 0 0   rgba(244,63,94,0.3); }
      55%       { box-shadow: 0 0 10px rgba(244,63,94,1),  0 0 0 8px rgba(244,63,94,0);   }
    }
    @keyframes barGrow {
      from { transform: scaleY(0); }
      to   { transform: scaleY(1); }
    }
    @keyframes bobStat  { 0%,100% { top: clamp(48px,7vh,72px);    } 50% { top: calc(clamp(48px,7vh,72px) - 6px);    } }
    @keyframes bobBadge { 0%,100% { top: clamp(130px,20vh,195px); } 50% { top: calc(clamp(130px,20vh,195px) - 6px); } }
    @keyframes bobGraph { 0%,100% { bottom: clamp(100px,16vh,155px); } 50% { bottom: calc(clamp(100px,16vh,155px) + 6px); } }.spk-landing /* Initial hidden state */
    .smm-float-stat, .spk-landing .smm-float-graph, .spk-landing .smm-float-badge { opacity: 0; }.spk-landing /* Entry + continuous bob (triggered when panel is active) */
    .smm-panel.active .smm-float-stat {
      animation: floatCardIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.10s both,
                 bobStat     3.5s  ease-in-out                    0.80s infinite;
    }.spk-landing .smm-panel.active .smm-float-badge {
      animation: badgeSlideIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.28s both,
                 bobBadge     3.5s  ease-in-out                     1.30s infinite;
    }.spk-landing .smm-panel.active .smm-float-graph {
      animation: floatCardIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.46s both,
                 bobGraph    3.5s  ease-in-out                    1.80s infinite;
    }.spk-landing /* Continuous dot pulses */
    .sfs-dot { animation: dotPulseGreen 2s ease-in-out         infinite; }.spk-landing .sfb-dot { animation: dotPulseRed  2s ease-in-out 0.5s    infinite; }.spk-landing /* Chart bars grow up (staggered) */
    .sfg-bar { transform-origin: bottom; }.spk-landing .smm-panel.active .sfg-bar:nth-child(1) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.44s both; }.spk-landing .smm-panel.active .sfg-bar:nth-child(2) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.50s both; }.spk-landing .smm-panel.active .sfg-bar:nth-child(3) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.56s both; }.spk-landing .smm-panel.active .sfg-bar:nth-child(4) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.62s both; }.spk-landing .smm-panel.active .sfg-bar:nth-child(5) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.68s both; }.spk-landing .smm-panel.active .sfg-bar:nth-child(6) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.74s both; }.spk-landing .smm-panel.active .sfg-bar:nth-child(7) { animation: barGrow 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.80s both; }.spk-landing /* ─────────────────────────────────────────────────────── */

    /* Screen gradient glow */
    .smm-iphone-screen::before {
      content: '';
      position: absolute; top: 30px; left: 50%; transform: translateX(-50%);
      width: 120px; height: 120px;
      background: radial-gradient(circle, rgba(var(--phone-glow, 255,0,85), 0.30) 0%, transparent 70%);
      pointer-events: none;
    }.spk-landing /* Profile row */
    .smm-phone-profile {
      display: flex; align-items: center; gap: 7px; margin-top: 4px;
    }.spk-landing .smm-phone-avatar {
      width: 36px; height: 36px; border-radius: 50%;
      background: linear-gradient(135deg, #FF0055 0%, #FF4400 55%, #8800FF 100%);
      flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; border: 2px solid rgba(255,255,255,0.2);
    }.spk-landing .smm-phone-username { font-size: 13px; font-weight: 700; color: #fff; line-height: 1.2; }.spk-landing .smm-phone-handle { font-size: 11px; color: rgba(255,255,255,0.38); }.spk-landing /* Stats — inline row */
    .smm-phone-stats {
      display: flex; gap: 18px; padding: 2px 0;
    }.spk-landing .smm-phone-stat { display: flex; align-items: baseline; gap: 5px; }.spk-landing .sps-num { font-size: 15px; font-weight: 900; color: #fff; letter-spacing: -0.5px; }.spk-landing .sps-lbl { font-size: 10px; color: rgba(255,255,255,0.38); }.spk-landing /* Divider */
    .smm-phone-divider { height: 1px; background: rgba(255,255,255,0.07); }.spk-landing /* Chart bars */
    .smm-phone-chart {
      display: flex; align-items: flex-end; gap: 4px; height: 80px;
      padding: 0 1px;
    }.spk-landing .smm-phone-bar {
      flex: 1; border-radius: 4px 4px 0 0;
      background: rgba(255,255,255,0.08);
    }.spk-landing .smm-phone-bar.hi {
      background: linear-gradient(180deg, #FF0055 0%, #FF4400 60%, #8800FF 100%);
      box-shadow: 0 0 8px rgba(255,0,85,0.4);
    }.spk-landing /* Notification card */
    .smm-phone-notif {
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.08);
      border-radius: 13px; padding: 10px 12px;
      display: flex; align-items: center; gap: 9px;
    }.spk-landing .spn-dot {
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      background: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.7);
    }.spk-landing .spn-text { font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.4; }.spk-landing .spn-text strong { color: #fff; }.spk-landing /* ── Stat card — liquid glass ── */
    .smm-stat-card {
      background: rgba(255,255,255,0.05);
      backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(255,255,255,0.12);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.10), 0 8px 32px rgba(0,0,0,0.25);
      border-radius: 22px; padding: 28px 24px;
      display: flex; flex-direction: column; gap: 0;
      position: relative;
      overflow: hidden;                 /* clip the shine sweep at the rounded corners */
      animation: smmBobY 3.5s ease-in-out -1.2s infinite;   /* bob — desynced from the float cards */
    }.spk-landing .smm-stat-card::after {
      content: '';
      position: absolute; top: 0; bottom: 0; left: -160px; width: 72px;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,0.11), transparent);
      transform: skewX(-18deg);
      pointer-events: none;
      animation: smmShine 5.6s ease-in-out infinite;
    }.spk-landing .ssc-row {
      display: flex; justify-content: space-between; align-items: center;
      padding: 8px 0;
    }.spk-landing .ssc-label { font-size: 12px; color: var(--muted); font-weight: 500; }.spk-landing .ssc-price {
      font-size: 24px; font-weight: 900; letter-spacing: -0.5px;
      background: var(--grad);
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }.spk-landing .ssc-val { font-size: 14px; color: #fff; font-weight: 700; }.spk-landing .ssc-divider { height: 1px; background: rgba(255,255,255,0.10); margin: 12px 0; }.spk-landing .ssc-services { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 4px; }.spk-landing .ssc-tag {
      /* liquid glass pill tags */
      padding: 6px 14px; border-radius: 999px;
      background: rgba(245,63,106,0.10);
      border: 1px solid rgba(245,63,106,0.25);
      backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
      color: rgba(255,255,255,0.80); font-size: 12px; font-weight: 600;
      transition: background 0.2s, border-color 0.2s;
    }

    /* ════════════════════════════
       RESPONSIVE
    ════════════════════════════ */

    /* Tablet */
    @media (max-width: 900px) {.spk-landing /* Hero */
      .hero-section { padding: 20px 16px; height: auto !important; }.spk-landing .hero-card { overflow: visible; }.spk-landing .hero-card-inner { flex-direction: column; gap: 32px; padding: 36px 32px 32px; }.spk-landing .hero-text h1 { font-size: 38px; letter-spacing: -1.5px; }.spk-landing .hero-text p { max-width: 100%; }.spk-landing .hero-login-card { width: 100%; max-width: 100%; animation: fadeSlideUp 0.7s ease both; animation-delay: 0.5s; }.spk-landing .hero-stats { gap: 20px; flex-wrap: wrap; }.spk-landing /* Rest */
      .habits-grid { grid-template-columns: 1fr; }.spk-landing .habits-text { padding-right: 0; }.spk-landing .chart-stack { height: 320px; max-width: 440px; margin: 8px auto 0; }.spk-landing .bento-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; }.spk-landing .bc-aware, .spk-landing .bc-features, .spk-landing .bc-saas, .spk-landing .bc-join { grid-column: span 1; grid-row: span 1; }.spk-landing .bc-aware { min-height: 220px; }.spk-landing .features-right { display: none; }.spk-landing .chat-section { grid-template-columns: 1fr; }.spk-landing .dashboard-mock { display: none; }.spk-landing .stats-band { grid-template-columns: repeat(2,1fr); }.spk-landing .sb-num { font-size: clamp(40px, 6vw, 56px); }.spk-landing .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px 40px; }.spk-landing .footer-brand { grid-column: 1 / -1; }.spk-landing .smm-tabs { border-radius: 24px; }.spk-landing .smm-panel-content { flex-direction: column; padding: 28px 24px; }.spk-landing .smm-panel-right { width: 100%; }.spk-landing .smm-stat-card { height: auto; }.spk-landing .smm-phone-wrap { display: none; }
    }

    /* Mobile */
    @media (max-width: 600px) {.spk-landing /* Navbar */
      .nav-links { display: none; }.spk-landing .btn-explore { display: none; }.spk-landing .nav-inner { padding-left: 0; padding-right: 0; }.spk-landing /* Hero */
      .hero-section { padding: 12px 0 20px; }.spk-landing /* L/R 0 → hero full-bleed */
      .section-wrap { padding-left: 0; padding-right: 0; }.spk-landing /* match hero L/R (0) */
      .hero-card { border-radius: 20px; overflow: visible; }.spk-landing .hero-card-inner { padding: 0; gap: 26px; align-items: stretch; }.spk-landing /* L/R 0 → hero gutter = hero-section 12px */
      /* mobile reorder: badge → headline → login card → stats → description → Sign up free */
      .hero-text { display: contents; }.spk-landing .hero-live-badge { order: 1; align-self: flex-start; margin-bottom: 0; }.spk-landing .hero-text h1 { order: 2; margin-bottom: 0; }.spk-landing .hero-stats { order: 3; margin-bottom: 0; }.spk-landing .hero-login-card { order: 4; }.spk-landing .hero-text p { order: 5; margin-bottom: 0; }.spk-landing .hero-btns { display: none; }.spk-landing /* hide "Sign up free" on mobile */
      .hero-live-badge { font-size: 11px; padding: 5px 12px; }.spk-landing .hero-text h1 { font-size: clamp(28px, 8.5vw, 40px); letter-spacing: -1px; word-break: break-word; text-align: center; }.spk-landing .hero-text p { font-size: 14px; max-width: 100%; }.spk-landing .hero-stats { gap: 6px; flex-wrap: nowrap; justify-content: space-between; }.spk-landing .hero-stat-num { font-size: 20px; }.spk-landing .hero-stat-divider { display: none; }.spk-landing .hero-btns { flex-wrap: wrap; gap: 10px; }.spk-landing .btn-hero-primary, .spk-landing .btn-hero-secondary { width: 100%; text-align: center; justify-content: center; }.spk-landing /* Login card */
      .hero-login-card { padding: 28px 20px; border-radius: 16px; }.spk-landing .hlc-title { font-size: 19px; }.spk-landing .hlc-field input { font-size: 16px; }.spk-landing /* prevent zoom on iOS */

      /* Sparkles — hide on mobile to reduce clutter */
      .sparkle { display: none; }.spk-landing /* Other sections */
      .bento-grid { grid-template-columns: 1fr; }.spk-landing .stats-band { grid-template-columns: 1fr 1fr; }.spk-landing .stat-block { padding: 22px 16px; }.spk-landing .sb-num { font-size: clamp(24px, 6.5vw, 38px); }.spk-landing .sb-label { font-size: 12px; }.spk-landing /* "Why choose Spikable?" → one line on mobile */
      .why-left-title { font-size: clamp(22px, 8vw, 34px); white-space: nowrap; }.spk-landing .why-left-title br { display: none; }.spk-landing .why-line-1 { margin-right: 0.28em; }.spk-landing /* Tilted card stack — tighten on phones */
      .chart-stack { height: 270px; max-width: 360px; }.spk-landing .chart-card { padding: 20px; }.spk-landing .cc-front { width: 84%; }.spk-landing .cc-back { width: 76%; height: 220px; }.spk-landing .cc-value { font-size: 38px; }.spk-landing .cc-chart { height: 76px; margin-top: 16px; }.spk-landing .final-cta { padding: 40px 24px; }.spk-landing .footer-inner { grid-template-columns: 1fr 1fr; gap: 30px 24px; }.spk-landing footer { padding-left: 16px; padding-right: 16px; }.spk-landing .adapt-card { padding: 40px 24px; }.spk-landing .smm-tabs { padding: 4px; gap: 4px; }.spk-landing .smm-tab { padding: 9px 16px; font-size: 12px; gap: 7px; }.spk-landing .smm-tab svg { width: 15px; height: 15px; }.spk-landing .smm-panel-content { padding: 22px 18px; gap: 24px; }.spk-landing .smm-panel-right { width: 100%; }.spk-landing .smm-stat-card { height: auto; }.spk-landing .smm-panel-content { padding: 24px 20px; }
    }

    /* Very small phones */
    @media (max-width: 380px) {.spk-landing .hero-card-inner { padding: 24px 0; }.spk-landing /* full-bleed on very small phones too */
      .hero-text h1 { font-size: 24px; }
    }

    /* SMM mobile: bring back phone mockup + floating cards, price card floats over
       the phone's right side (Golf's mock). ≤560 only — tablet/desktop untouched.
       Must sit AFTER the earlier SMM responsive blocks to win the !important fights. */
    @media (max-width: 560px) {.spk-landing .smm-panel-content {
        grid-template-areas: "text" "phone" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        row-gap: 10px !important;   /* text -> phone gap: 20 -> 10 (Golf) */
      }.spk-landing .smm-phone-wrap {
        display: flex !important;
        grid-area: phone !important;
        align-items: flex-start !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 6px 0 -120px !important;   /* phone crops at the card's bottom edge */
      }.spk-landing .smm-iphone { width: 250px !important; }.spk-landing /* price card: same grid cell as the phone → overlaps it, .spk-landing anchored right */
      .smm-panel-right {
        grid-area: phone !important;
        width: auto !important;
        justify-self: end;
        align-self: start;
        margin: 140px 2px 0 0 !important;
        z-index: 5;
      }.spk-landing .smm-stat-card {
        width: 190px;
        padding: 15px 14px;
        border-radius: 16px;
        background: rgba(12,9,24,0.90);   /* opaque like the float cards — sits on the phone */
        border-color: rgba(255,255,255,0.14);
        box-shadow: 0 10px 36px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
      }.spk-landing .ssc-price { font-size: 18px; }.spk-landing .ssc-val { font-size: 12px; }.spk-landing .ssc-row { padding: 4px 0; }.spk-landing .ssc-divider { margin: 8px 0; }.spk-landing /* floating cards back on (hidden since the tablet block) — compacted */
      .smm-float-stat, .spk-landing .smm-float-badge { display: flex !important; }.spk-landing .smm-float-graph { display: block !important; }.spk-landing /* head above bars — NOT flex */
      .smm-float-badge { top: 38px;  left: calc(50% - 107px); padding: 7px 12px; }.spk-landing .smm-float-stat { top: 86px;  left: max(calc(50% - 148px), -8px);  padding: 8px 11px; gap: 8px; min-width: 0; }.spk-landing .smm-float-graph { top: 196px; bottom: auto; left: max(calc(50% - 159px), -10px); padding: 8px 10px; min-width: 104px; }.spk-landing .sfs-num { font-size: 14px; }.spk-landing .sfs-trend { font-size: 10px; }.spk-landing .sfg-bars { height: 32px; }.spk-landing /* desktop bob keyframes animate top/bottom with desktop offsets — swap for a transform bob */
      .smm-panel.active .smm-float-stat {
        animation: floatCardIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.10s both,
                   smmBobY 3.5s ease-in-out 0.80s infinite !important;
      }.spk-landing .smm-panel.active .smm-float-badge {
        animation: badgeSlideIn 0.45s cubic-bezier(0.34,1.56,0.64,1) 0.28s both,
                   smmBobY 3.5s ease-in-out 1.30s infinite !important;
      }.spk-landing .smm-panel.active .smm-float-graph {
        animation: floatCardIn 0.55s cubic-bezier(0.34,1.56,0.64,1) 0.46s both,
                   smmBobY 3.5s ease-in-out 1.80s infinite !important;
      }
    }
    @keyframes smmBobY {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-6px); }
    }
    @keyframes smmShine {
      0%   { left: -160px; }
      40%  { left: calc(100% + 90px); }
      100% { left: calc(100% + 90px); }
    }

    /* ════════════════════════════
       HOVER GUARD — touch devices
    ════════════════════════════ */
    @media (hover: hover) and (pointer: fine) {.spk-landing .why-feature-item:hover { transform: translateX(6px) !important; }.spk-landing .why-feature-item:hover .why-feature-emoji {
        filter: drop-shadow(0 0 10px rgba(255,0,85,0.80));
        transform: scale(1.22);
      }.spk-landing .why-feature-item:hover .why-feature-title {
        background: linear-gradient(135deg, #FF1466 0%, #FF6A00 48%, #B81FFF 100%);   /* --sp-grad — official Spikable brand gradient */
        -webkit-background-clip: text; background-clip: text;
        -webkit-text-fill-color: transparent;
      }.spk-landing .smm-feature:hover {
        -webkit-text-fill-color: transparent;
        transform: translateX(6px);
      }.spk-landing .smm-feature:hover .smm-feat-dot {
        box-shadow: 0 0 10px rgba(255,0,85,0.7), 0 0 20px rgba(136,0,255,0.4);
        transform: scale(1.35);
      }.spk-landing .stat-block:hover::after { opacity: 1; }.spk-landing .ssc-tag:hover { background: rgba(245,63,106,0.20); border-color: rgba(245,63,106,0.45); }
    }

    /* ════════════════════════════
       REDUCED MOTION
    ════════════════════════════ */
    @media (prefers-reduced-motion: reduce) {.spk-landing *, .spk-landing *::before, .spk-landing *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }
    }

/* ---- inline keyframes/styles from signin tail ---- */

@keyframes ripple { to { transform:scale(1); opacity:0; } }