/* ============================================================
   LAPTOPS PAGE — premium redesign
   Design tokens, navbar and footer are carried over verbatim
   from the MicroHub theme (hr-payroll.css) so the site stays
   visually consistent. Only new component styles live below
   the "NAVBAR + FOOTER" block.
   ============================================================ */

:root{
  --navy:#0f172a;
  --blue:#0877c9;
  --blue-2:#2563eb;
  --sky:#5ab8ff;
  --ink-dark:#0b0d12;
  --muted:#64748b;
  --body-text:#334155;
  --line:#eef1f6;
  --radius-xl:32px;
  --radius-lg:24px;
  --radius-md:16px;
  --shadow-soft:0 20px 60px rgba(15,23,42,.08);
  --shadow-lift:0 30px 70px rgba(37,99,235,.16);
}

*{box-sizing:border-box;}
body{ margin:0; font-family:'Inter',system-ui,sans-serif; color:var(--navy); background:#fff; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

/* ================================================================
   NAVBAR + FOOTER (identical to site theme — hr-payroll.css)
   ================================================================ */
.navbar{
  position:fixed; top:0; left:0; right:0; width:100%; top:0; z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid #eef1f6;
}
.navbar-container{
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 24px; gap:24px;
}
.logo-text{
  font-family:'JetBrains Mono',monospace; font-weight:800;
  font-size:18px; letter-spacing:.02em; color:#0f172a;
}
.logo-text span{ color:#0877c9; }
.logo-text.white{ color:#fff; }
.logo-text.white span{ color:#5ab8ff; }

.nav-menu{ display:flex; align-items:center; gap:26px; }
.nav-menu > a,
.nav-item > a{
  font-size:14.5px; font-weight:500; color:#334155;
  padding:8px 2px; transition:color .2s ease; cursor:pointer;
}
.nav-menu > a:hover,
.nav-item > a:hover{ color:#0877c9; }
.nav-item > a.active{ color:#0877c9; }

.nav-item.dropdown{ position:relative; }
.dropdown-menu{
  position:absolute; top:calc(100% + 10px); left:-14px;
  min-width:280px; background:#fff;
  border:1px solid #eef1f6; border-radius:14px;
  box-shadow:0 30px 60px -20px rgba(15,23,42,.25);
  padding:10px; opacity:0; visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  z-index:120;
}
.nav-item.dropdown:hover .dropdown-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown-menu a{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:10px;
  font-size:14px; color:#0f172a;
  transition:background .15s ease;
}
.dropdown-menu a:hover{ background:#f4f7fb; color:#0877c9; }
.dropdown-menu a.active{ background:#f4f7fb; color:#0877c9; }
.dropdown-menu a strong{ font-weight:600; font-size:14px; }
.dropdown-menu a small{ color:#64748b; font-size:12px; }

.nav-actions{ display:flex; align-items:center; gap:12px; }
.primary-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:#0f172a; color:#fff;
  padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:600;
  border:1px solid #0f172a;
  transition:transform .25s ease, background .25s ease;
}
.primary-btn.small{ padding:9px 16px; font-size:13.5px; }
.primary-btn:hover{ background:#0877c9; border-color:#0877c9; transform:translateY(-1px); }
.primary-btn span{ transition:transform .25s ease; }
.primary-btn:hover span{ transform:translateX(3px); }

.mobile-menu{
  display:none; background:transparent; border:0; cursor:pointer;
  width:36px; height:36px; padding:8px;
  flex-direction:column; justify-content:space-between;
}
.mobile-menu span{ display:block; height:2px; background:#0f172a; border-radius:2px; }

@media (max-width: 960px){
  .nav-menu{ display:none; }
  .mobile-menu{ display:flex; }
}

/* ================= FOOTER ================= */
footer{
  background:#0b0d12; color:#cbd5e1;
  padding:64px 6vw 32px;
  border-top:1px solid rgba(255,255,255,.05);
  position:relative;
}
.footer-container{
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px;
}
.footer-brand p{
  margin-top:14px; color:#94a3b8; font-size:14px; line-height:1.65;
  max-width:340px;
}
footer h4{
  color:#fff; font-size:13px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  margin:0 0 16px;
}
footer a{
  display:block; color:#94a3b8; font-size:14px;
  padding:6px 0; transition:color .2s ease;
}
footer a:hover{ color:#5ab8ff; }
.footer-bottom{
  max-width:1280px; margin:40px auto 0;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; justify-content:space-between; gap:16px;
  color:#64748b; font-size:12.5px; letter-spacing:.03em;
}
.footer-watermark{
  position:relative; overflow:hidden; background:#0b0d12;
  line-height:0; pointer-events:none;
}
.footer-watermark span{
  display:block; text-align:center;
  font-family:'JetBrains Mono',monospace; font-weight:800;
  font-size:clamp(60px,16vw,220px); line-height:.9;
  background:linear-gradient(180deg,rgba(90,184,255,.14),rgba(90,184,255,0));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  letter-spacing:.02em; padding:20px 0 30px;
}

@media (max-width: 900px){
  .footer-container{ grid-template-columns:1fr 1fr; }
  .footer-bottom{ flex-direction:column; }
}
@media (max-width: 520px){
  .footer-container{ grid-template-columns:1fr; }
}

/* ============================================================
   SHARED SECTION TOKENS (same language as rest of site)
   ============================================================ */
.section-header{max-width:750px;margin:0 auto 60px;text-align:center;}
.section-tag{ display:inline-block;padding:8px 18px; background:rgba(37,99,235,.08);color:#2563eb;
 border:1px solid rgba(37,99,235,.12); border-radius:999px;font-size:13px;font-weight:700;letter-spacing:1.5px; text-transform:uppercase;margin-bottom:18px;}
.section-header h2{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.15;color:#0f172a;margin:0 0 18px;}
.section-header p{max-width:650px;margin:0 auto;font-size:16px;line-height:1.8;color:#64748b;font-weight:400;}

/* ============================================================
   HERO — full-bleed background photo, centered content
   (same construction as the HR & Payroll page hero)
   ============================================================ */
.lp-hero{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  padding:140px 20px 70px;
  background-image:
    linear-gradient(rgba(255,255,255,.8),rgba(255,255,255,.8)),
    url("https://images.unsplash.com/photo-1517336714731-489689fd1ca8?q=80&w=1800&auto=format&fit=crop");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-attachment:fixed;
  overflow:hidden;
}
.lp-hero::before{
  content:""; position:absolute; width:700px; height:700px; border-radius:50%;
  background:radial-gradient(circle, rgba(8,119,201,.25), transparent 70%);
  filter:blur(60px); z-index:0;
}
.lp-hero-content{ position:relative; z-index:2; max-width:900px; }
.lp-trust-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:28px;
}
.lp-trust-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; background:rgba(255,255,255,.85);
  backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);
  border-radius:999px;
  font-size:12.5px; font-weight:700; color:#0877c9; letter-spacing:.02em;
}
.lp-trust-pill::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#0877c9;
}
.lp-hero h1{
  font-size:clamp(2.6rem,6vw,4.6rem); line-height:1.05; font-weight:900;
  letter-spacing:-.02em; color:#0f172a; margin:0 0 26px;
}
.lp-hero p.lp-lead{
  font-size:20px; line-height:1.8; color:#475569; max-width:700px; margin:0 auto 40px;
}
.lp-hero-cta{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:50px; }
.lp-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:17px 38px; border-radius:14px; font-weight:700; font-size:15px;
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.lp-btn.primary{ background:#0877c9; color:#fff; }
.lp-btn.primary:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(8,119,201,.28); }
.lp-btn.ghost{ background:#fff; color:#0f172a; border:1px solid #e2e8f0; }
.lp-btn.ghost:hover{ transform:translateY(-5px); box-shadow:0 20px 40px rgba(15,23,42,.1); border-color:#cbd5e1; }

.lp-mini-stats{
  position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  max-width:640px; margin:0 auto;
}
.lp-mini-stat{
  background:rgba(255,255,255,.65); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(8,119,201,.08); border-radius:18px; padding:22px 18px;
  text-align:center; box-shadow:0 12px 30px rgba(15,23,42,.05);
  transition:transform .35s ease, box-shadow .35s ease;
}
.lp-mini-stat:hover{ transform:translateY(-6px); box-shadow:0 20px 45px rgba(8,119,201,.15); }
.lp-mini-stat h3{ font-size:1.9rem; font-weight:800; color:#0877c9; margin:0 0 4px; }
.lp-mini-stat p{ font-size:14px; color:#64748b; margin:0; font-weight:500; }

@media(max-width:768px){
  .lp-hero h1{ font-size:2.4rem; }
  .lp-hero p.lp-lead{ font-size:17px; }
  .lp-mini-stats{ grid-template-columns:1fr; max-width:280px; }
}

/* ============================================================
   BRAND MARQUEE
   ============================================================ */
.lp-marquee{
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:#f8fafc; overflow:hidden; padding:20px 0;
}
.lp-marquee-track{
  display:flex; gap:52px; width:max-content;
  animation:lpScroll 32s linear infinite;
}
.lp-marquee-track span{
  font-size:14px; font-weight:600; color:#64748b; white-space:nowrap;
  display:flex; align-items:center; gap:10px;
}
.lp-marquee-track span::before{ content:"◆"; font-size:8px; color:#0877c9; }
@keyframes lpScroll{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .lp-marquee-track{ animation:none; } }

/* ============================================================
   INTRO / VALUE STRIP  ("Enterprise laptops. Ready to deploy.")
   ============================================================ */
.lp-intro{
  position:relative; padding:130px 6vw 40px; max-width:1280px; margin:0 auto;
  overflow:visible;
}
.lp-intro::before{
  content:""; position:absolute; top:-40px; right:-80px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(8,119,201,.10), transparent 70%);
  border-radius:50%; filter:blur(10px); z-index:-1; pointer-events:none;
  animation:lpDrift 9s ease-in-out infinite;
}
@keyframes lpDrift{ 50%{ transform:translate(-16px,18px) scale(1.06); } }
.lp-intro-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:60px; align-items:start;
}
.card-tag{
  display:inline-flex; align-items:center; gap:8px; width:max-content;
  padding:8px 18px; background:#eaf3ff; color:#2563eb;
  border:1px solid rgba(37,99,235,.15); border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:22px;
}
.card-tag::before{
  content:""; width:6px; height:6px; border-radius:50%; background:#2563eb;
  box-shadow:0 0 0 4px rgba(37,99,235,.15);
  animation:lpPulseDot 2s ease-in-out infinite;
}
@keyframes lpPulseDot{
  0%,100%{ box-shadow:0 0 0 4px rgba(37,99,235,.15); }
  50%{ box-shadow:0 0 0 8px rgba(37,99,235,.06); }
}
.lp-intro h2{ font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:#0f172a; margin:0 0 18px; letter-spacing:-.02em; }
.lp-intro p{ font-size:16px; line-height:1.85; color:#64748b; max-width:520px; margin:0 0 30px; }
.lp-intro ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
.lp-intro li{
  display:flex; gap:12px; align-items:flex-start; font-size:15px; font-weight:500; color:#334155;
  padding:10px 14px; margin-left:-14px; border-radius:12px;
  transition:background .3s ease, transform .3s ease;
}
.lp-intro li:hover{ background:#f4f8ff; transform:translateX(6px); }
.lp-intro li::before{
  content:"✓"; flex-shrink:0; width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#0877c9); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; margin-top:1px;
  box-shadow:0 6px 14px rgba(8,119,201,.28);
  transition:transform .3s ease;
}
.lp-intro li:hover::before{ transform:scale(1.15) rotate(-8deg); }
.lp-intro-stats{
  display:grid; gap:18px; align-content:start;margin-top: 50px;
}
.lp-stat-tile{
  position:relative; overflow:hidden;
  background:linear-gradient(145deg,#f6f9ff,#eef4ff);
  border:1px solid #e4ecfb; border-radius:20px; padding:26px 28px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.lp-stat-tile::after{
  content:""; position:absolute; top:-40%; right:-30%; width:140px; height:140px;
  background:radial-gradient(circle, rgba(8,119,201,.16), transparent 70%);
  border-radius:50%; transition:transform .5s ease;
}
.lp-stat-tile:hover{
  transform:translateY(-8px) scale(1.02);
  box-shadow:0 24px 50px rgba(8,119,201,.16);
  border-color:rgba(8,119,201,.3);
}
.lp-stat-tile:hover::after{ transform:scale(1.4); }
.lp-stat-tile h3{ position:relative; font-size:2rem; font-weight:800; color:#0877c9; margin:0 0 4px; }
.lp-stat-tile p{ position:relative; margin:0; font-size:14px; color:#475569; font-weight:600; }
.lp-intro-stats .lp-stat-tile:nth-child(1){ animation:lpTileIn .7s ease .05s backwards; }
.lp-intro-stats .lp-stat-tile:nth-child(2){ animation:lpTileIn .7s ease .18s backwards; }
.lp-intro-stats .lp-stat-tile:nth-child(3){ animation:lpTileIn .7s ease .3s backwards; }
@keyframes lpTileIn{ from{ opacity:0; transform:translateY(18px) scale(.96); } to{ opacity:1; transform:translateY(0) scale(1); } }

@media(max-width:900px){
  .lp-intro-grid{ grid-template-columns:1fr; }
}

/* ============================================================
   PRODUCT GRID — premium enterprise cards
   ============================================================ */
.lp-products{ position:relative; padding:110px 6vw; max-width:1320px; margin:0 auto; }
.lp-product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:30px;
}
.lp-product-card{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:0 14px 40px rgba(15,23,42,.05);
  transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s ease, border-color .45s ease;
  display:flex; flex-direction:column;
}
.lp-product-card::before{
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  background:linear-gradient(135deg, rgba(8,119,201,.10), transparent 55%);
  transition:opacity .45s ease;
}
.lp-product-card:hover{
  transform:translateY(-12px) scale(1.015);
  box-shadow:0 36px 75px rgba(8,119,201,.18);
  border-color:rgba(8,119,201,.28);
}
.lp-product-card:hover::before{ opacity:1; }
.lp-product-grid .lp-product-card:nth-child(1){ animation:lpCardIn .6s ease .05s backwards; }
.lp-product-grid .lp-product-card:nth-child(2){ animation:lpCardIn .6s ease .14s backwards; }
.lp-product-grid .lp-product-card:nth-child(3){ animation:lpCardIn .6s ease .23s backwards; }
.lp-product-grid .lp-product-card:nth-child(4){ animation:lpCardIn .6s ease .32s backwards; }
.lp-product-grid .lp-product-card:nth-child(5){ animation:lpCardIn .6s ease .41s backwards; }
.lp-product-grid .lp-product-card:nth-child(6){ animation:lpCardIn .6s ease .5s backwards; }
@keyframes lpCardIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }

.lp-product-media{
  position:relative; height:220px; overflow:hidden;
  background:linear-gradient(135deg,#f4f8ff,#eaf2ff);
}
.lp-product-media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 60%, rgba(15,23,42,.28));
  opacity:0; transition:opacity .45s ease;
}
.lp-product-card:hover .lp-product-media::after{ opacity:1; }
.lp-product-media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1); }
.lp-product-card:hover .lp-product-media img{ transform:scale(1.1) rotate(-.6deg); }
.lp-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  background:rgba(15,23,42,.85); color:#fff; font-size:11px; font-weight:700;
  padding:6px 12px; border-radius:999px; letter-spacing:.04em; text-transform:uppercase;
  backdrop-filter:blur(6px);
  transition:transform .35s ease;
}
.lp-product-card:hover .lp-badge{ transform:translateY(-2px); }
.lp-badge.popular{ background:#0877c9; box-shadow:0 0 0 0 rgba(8,119,201,.5); animation:lpBadgePulse 2.4s ease-in-out infinite; }
@keyframes lpBadgePulse{
  0%{ box-shadow:0 0 0 0 rgba(8,119,201,.45); }
  70%{ box-shadow:0 0 0 10px rgba(8,119,201,0); }
  100%{ box-shadow:0 0 0 0 rgba(8,119,201,0); }
}
.lp-product-body{ position:relative; z-index:1; padding:26px 26px 28px; display:flex; flex-direction:column; flex:1; }
.lp-product-brand{ font-size:12px; font-weight:700; color:#0877c9; letter-spacing:.08em; text-transform:uppercase; margin-bottom:8px; }
.lp-product-card h3{ font-size:20px; font-weight:700; color:#0f172a; margin:0 0 10px; letter-spacing:-.01em; }
.lp-product-card p.lp-desc{ font-size:14px; line-height:1.65; color:#64748b; margin:0 0 20px; flex:1; }
.lp-spec-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.lp-spec-chip{
  font-size:12px; font-weight:600; color:#334155; background:#f1f5f9;
  border:1px solid #e2e8f0; padding:6px 12px; border-radius:999px;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.lp-product-card:hover .lp-spec-chip{ background:#eaf3ff; border-color:rgba(8,119,201,.2); color:#0877c9; }
.lp-spec-chip:hover{ transform:translateY(-2px); }
.lp-product-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:18px; border-top:1px solid #f1f5f9;
}
.lp-price-label{ font-size:11px; color:#94a3b8; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.lp-price{ font-size:20px; font-weight:800; color:#0f172a; transition:color .3s ease; }
.lp-product-card:hover .lp-price{ color:#0877c9; }
.lp-product-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13.5px; font-weight:700; color:#0877c9;
  padding:10px 18px; border-radius:10px; border:1px solid rgba(8,119,201,.25);
  transition:.3s;
}
.lp-product-btn:hover{ background:#0877c9; color:#fff; border-color:#0877c9; gap:10px; box-shadow:0 12px 26px rgba(8,119,201,.3); }

@media(max-width:1100px){ .lp-product-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:640px){ .lp-product-grid{ grid-template-columns:1fr; } }
@media (prefers-reduced-motion: reduce){
  .lp-intro::before, .card-tag::before, .lp-stat-tile, .lp-product-card, .lp-badge.popular{ animation:none !important; }
}

/* ============================================================
   TRUST STAT STRIP  ("Trusted by hundreds...")
   ============================================================ */
.lp-trust-strip{ position:relative; padding:0 6vw 110px; max-width:1280px; margin:0 auto; }
.lp-trust-head{ text-align:center; max-width:640px; margin:0 auto 50px; }
.lp-trust-head h2{ font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; color:#0f172a; margin:0 0 12px; }
.lp-trust-head p{ color:#64748b; font-size:15.5px; margin:0; }
.lp-trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.lp-glass-stat{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.7); backdrop-filter:blur(16px);
  border:1px solid rgba(8,119,201,.1); border-radius:22px; padding:30px 24px;
  text-align:center; box-shadow:0 16px 40px rgba(15,23,42,.06);
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.lp-glass-stat::before{
  content:""; position:absolute; top:-50%; left:50%; translate:-50% 0; width:160px; height:160px;
  background:radial-gradient(circle, rgba(8,119,201,.14), transparent 70%);
  border-radius:50%; opacity:0; transition:opacity .4s ease, transform .5s ease;
}
.lp-glass-stat:hover{ transform:translateY(-10px) scale(1.02); box-shadow:0 26px 60px rgba(8,119,201,.18); border-color:rgba(8,119,201,.3); }
.lp-glass-stat:hover::before{ opacity:1; transform:translate(-50%,10px) scale(1.2); }
.lp-glass-stat h3{ position:relative; font-size:2.1rem; font-weight:800; color:#0877c9; margin:0 0 6px; }
.lp-glass-stat .lp-stat-label{ position:relative; font-size:14.5px; font-weight:700; color:#0f172a; margin:0 0 6px; }
.lp-glass-stat p.lp-stat-desc{ position:relative; font-size:13px; color:#64748b; margin:0; line-height:1.5; }
.lp-trust-grid .lp-glass-stat:nth-child(1){ animation:lpTileIn .6s ease .05s backwards; }
.lp-trust-grid .lp-glass-stat:nth-child(2){ animation:lpTileIn .6s ease .15s backwards; }
.lp-trust-grid .lp-glass-stat:nth-child(3){ animation:lpTileIn .6s ease .25s backwards; }
.lp-trust-grid .lp-glass-stat:nth-child(4){ animation:lpTileIn .6s ease .35s backwards; }
@media(max-width:900px){ .lp-trust-grid{ grid-template-columns:repeat(2,1fr); } }

/* ============================================================
   "ONE PARTNER" SECTION — image + copy, numbered steps below
   ============================================================ */
.lp-partner{ position:relative; background:#f6f8fb; padding:110px 6vw; overflow:hidden; }
.lp-partner::before{
  content:""; position:absolute; top:-120px; left:-120px; width:420px; height:420px;
  background:radial-gradient(circle, rgba(8,119,201,.09), transparent 70%);
  border-radius:50%; pointer-events:none; animation:lpDrift 11s ease-in-out infinite;
}
.lp-partner-inner{ position:relative; max-width:1280px; margin:0 auto; }
.lp-partner-grid{
  display:grid; grid-template-columns:.85fr 1.15fr; gap:60px; align-items:center; margin-bottom:80px;
}
.lp-partner-media{
  position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-soft);
  height:380px;
}
.lp-partner-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.22,.61,.36,1); }
.lp-partner-media:hover img{ transform:scale(1.08); }
.lp-partner-copy h2{ font-size:clamp(1.8rem,3vw,2.5rem); font-weight:800; color:#0f172a; margin:0 0 18px; letter-spacing:-.02em; }
.lp-partner-copy p{ font-size:16px; line-height:1.85; color:#64748b; max-width:560px; }

.lp-steps{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:50px;
}
.lp-step-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px 26px;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.lp-step-card::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0%;
  background:linear-gradient(90deg,#0877c9,#5ab8ff);
  transition:width .45s ease;
}
.lp-step-card:hover{ transform:translateY(-8px); box-shadow:0 24px 50px rgba(8,119,201,.14); border-color:rgba(8,119,201,.25); }
.lp-step-card:hover::after{ width:100%; }
.lp-step-num{
  display:inline-block;
  font-family:'JetBrains Mono',monospace; font-weight:800; font-size:15px;
  color:#0877c9; letter-spacing:.1em; margin-bottom:16px;
  transition:transform .4s ease;
}
.lp-step-card:hover .lp-step-num{ transform:scale(1.15) translateY(-2px); }
.lp-step-card h3{ font-size:17px; font-weight:700; color:#0f172a; margin:0 0 10px; }
.lp-step-card p{ font-size:14px; line-height:1.6; color:#64748b; margin:0; }
.lp-steps .lp-step-card:nth-child(1){ animation:lpTileIn .6s ease .05s backwards; }
.lp-steps .lp-step-card:nth-child(2){ animation:lpTileIn .6s ease .16s backwards; }
.lp-steps .lp-step-card:nth-child(3){ animation:lpTileIn .6s ease .27s backwards; }
.lp-steps .lp-step-card:nth-child(4){ animation:lpTileIn .6s ease .38s backwards; }

.lp-partner-footline{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  background:#fff; border:1px solid var(--line); border-radius:20px; padding:26px 32px;
  transition:box-shadow .4s ease, border-color .4s ease;
}
.lp-partner-footline:hover{ box-shadow:0 20px 45px rgba(8,119,201,.1); border-color:rgba(8,119,201,.2); }
.lp-partner-tags{ display:flex; flex-wrap:wrap; gap:24px; }
.lp-partner-tags span{ font-size:14px; font-weight:600; color:#334155; display:flex; align-items:center; gap:8px; transition:transform .3s ease; }
.lp-partner-tags span:hover{ transform:translateY(-2px); color:#0877c9; }
.lp-partner-tags span::before{
  content:"✓"; color:#fff; font-weight:800; font-size:11px;
  width:18px; height:18px; border-radius:50%; background:#0877c9;
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lp-partner-note{ text-align:center; margin-top:20px; font-size:14px; color:#64748b; }

@media(max-width:992px){
  .lp-partner-grid{ grid-template-columns:1fr; }
  .lp-steps{ grid-template-columns:repeat(2,1fr); }
}
@media(max-width:560px){ .lp-steps{ grid-template-columns:1fr; } }

/* ============================================================
   BRANDS — premium enterprise logo showcase
   ============================================================ */
.lp-brands{
  position:relative; overflow:hidden;
  padding:140px 6vw 150px; max-width:1280px; margin:0 auto;
}
.lp-brands::before{
  content:""; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(720px 420px at 50% 0%, rgba(8,119,201,.08), transparent 65%),
    radial-gradient(500px 340px at 85% 90%, rgba(90,184,255,.10), transparent 60%);
}
.lp-brands::after{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.5;
  background-image:radial-gradient(rgba(15,23,42,.10) 1px, transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 40%, #000, transparent 75%);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 40%, #000, transparent 75%);
}
.lp-brands .section-header{ margin-bottom:70px; }

.lp-brand-marquee{ position:relative; margin-bottom:56px; width:100%; }
.lp-brand-track{
  display:grid; grid-template-columns:repeat(6, 180px);
  justify-content:center; align-items:center; gap:28px 20px;
  width:100%; max-width:100%;
}
/* hide the duplicated set that powered the old scrolling marquee */
.lp-brand-track > .lp-brand-card:nth-child(n+7){ display:none; }

.lp-brand-card{
  position:relative; width:180px; height:100px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(248,250,252,.55); border:1px solid rgba(15,23,42,.05);
  border-radius:24px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-weight:800; font-size:16px; color:#334155;
  cursor:pointer; will-change:transform, opacity;

  opacity:0; transform:translateY(40px);
  filter:grayscale(100%);
  animation:lpLogoIn .7s cubic-bezier(.22,1,.36,1) forwards;
  animation-play-state:paused;
}
.lp-brand-marquee.in .lp-brand-card{ animation-play-state:running; }

.lp-brand-track > .lp-brand-card:nth-child(1){ animation-delay:.00s; }
.lp-brand-track > .lp-brand-card:nth-child(2){ animation-delay:.08s; }
.lp-brand-track > .lp-brand-card:nth-child(3){ animation-delay:.16s; }
.lp-brand-track > .lp-brand-card:nth-child(4){ animation-delay:.24s; }
.lp-brand-track > .lp-brand-card:nth-child(5){ animation-delay:.32s; }
.lp-brand-track > .lp-brand-card:nth-child(6){ animation-delay:.40s; }

@keyframes lpLogoIn{
  to{ opacity:.75; transform:translateY(0); filter:grayscale(100%); }
}

/* gentle continuous float once the entrance settles, staggered per card */
.lp-brand-marquee.in .lp-brand-card{
  animation:
    lpLogoIn .7s cubic-bezier(.22,1,.36,1) forwards,
    lpLogoFloat 4s ease-in-out infinite;
  animation-play-state:running, running;
}
.lp-brand-track > .lp-brand-card:nth-child(1){ animation-delay:.00s, .70s; }
.lp-brand-track > .lp-brand-card:nth-child(2){ animation-delay:.08s, 1.10s; }
.lp-brand-track > .lp-brand-card:nth-child(3){ animation-delay:.16s, 1.50s; }
.lp-brand-track > .lp-brand-card:nth-child(4){ animation-delay:.24s, 1.90s; }
.lp-brand-track > .lp-brand-card:nth-child(5){ animation-delay:.32s, 2.30s; }
.lp-brand-track > .lp-brand-card:nth-child(6){ animation-delay:.40s, 2.70s; }

@keyframes lpLogoFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.lp-brand-card:hover{
  animation-play-state:paused, paused;
  opacity:1 !important;
  filter:grayscale(0) !important;
  transform:translateY(-10px) scale(1.12) !important;
  box-shadow:0 18px 40px rgba(18,115,234,.18);
  border-color:rgba(8,119,201,.25);
  background:#fff;
  color:#0877c9;
  transition:transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1),
             opacity .4s ease, filter .4s ease, background .4s ease, border-color .4s ease;
  z-index:2;
}

.lp-brand-badges{ position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }
.lp-brand-badges span{
  font-size:13px; font-weight:700; color:#0877c9; background:#eaf3ff;
  padding:9px 18px; border-radius:999px; border:1px solid rgba(8,119,201,.15);
  transition:transform .3s ease, box-shadow .3s ease, background .3s ease;
}
.lp-brand-badges span:hover{ transform:translateY(-3px); background:#0877c9; color:#fff; box-shadow:0 12px 26px rgba(8,119,201,.28); }

@media(max-width:960px){
  .lp-brand-track{ grid-template-columns:repeat(3, 180px); }
}
@media(max-width:620px){
  .lp-brand-track{ grid-template-columns:repeat(2, 150px); gap:22px 18px; }
  .lp-brand-card{ width:150px; height:88px; font-size:14px; }
}
@media (prefers-reduced-motion: reduce){
  .lp-partner::before, .lp-glass-stat, .lp-step-card{ animation:none !important; }
  .lp-brand-card{ animation:none !important; opacity:.75 !important; transform:none !important; filter:grayscale(100%); }
  .lp-brand-card:hover{ filter:grayscale(0) !important; opacity:1 !important; transform:translateY(-4px) !important; }
}

/* ============================================================
   FAQ — accordion
   ============================================================ */
.lp-faq{ padding:100px 6vw 60px; max-width:880px; margin:0 auto; }
.lp-faq-list{ display:flex; flex-direction:column; gap:14px; }
.lp-faq-item{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  overflow:hidden; transition:border-color .3s ease, box-shadow .3s ease;
}
.lp-faq-item:hover{ border-color:rgba(8,119,201,.25); }
.lp-faq-item[open]{ box-shadow:0 20px 45px rgba(15,23,42,.07); }
.lp-faq-item summary{
  cursor:pointer; list-style:none; padding:22px 26px;
  font-size:16px; font-weight:700; color:#0f172a;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lp-faq-item summary::-webkit-details-marker{ display:none; }
.lp-faq-item summary::after{
  content:"+"; font-size:22px; font-weight:400; color:#0877c9; flex-shrink:0;
  transition:transform .3s ease;
}
.lp-faq-item[open] summary::after{ transform:rotate(45deg); }
.lp-faq-body{ padding:0 26px 24px; font-size:15px; line-height:1.8; color:#64748b; }
.lp-faq-body strong{ color:#334155; }
.lp-faq-foot{ text-align:center; margin-top:44px; }

/* ============================================================
   FINAL CTA — reuses site's dark gradient glass CTA pattern
   ============================================================ */
.cta-section{
  position:relative; padding:100px 20px; overflow:hidden;
  background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);
  border-radius:40px; margin:20px auto 120px; max-width:1320px;
}
.cta-content{ position:relative; z-index:2; max-width:700px; margin:auto; text-align:center; }
.cta-content h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:800; line-height:1.25; color:#fff; margin:0 0 16px; }
.cta-content p{ font-size:16px; line-height:1.7; color:rgba(255,255,255,.85); max-width:520px; margin:0 auto 34px; }
.cta-buttons{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }
.btn-primary{ padding:15px 32px; background:#fff; color:#2563eb; font-weight:700; border-radius:14px; transition:.35s; }
.btn-primary:hover{ transform:translateY(-5px); box-shadow:0 18px 45px rgba(255,255,255,.25); }
.btn-secondary{ padding:15px 32px; border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:14px; transition:.35s; }
.btn-secondary:hover{ background:#fff; color:#2563eb; }
.cta-bg{ position:absolute; inset:0; overflow:hidden; }
.cta-bg::before{ content:""; position:absolute; width:460px; height:460px; background:rgba(255,255,255,.12); border-radius:50%; filter:blur(80px); top:-140px; left:-90px; animation:floatOne 8s ease-in-out infinite alternate; }
.cta-bg::after{ content:""; position:absolute; width:420px; height:420px; background:rgba(125,211,252,.18); border-radius:50%; filter:blur(80px); bottom:-160px; right:-110px; animation:floatTwo 10s ease-in-out infinite alternate; }
@keyframes floatOne{ to{ transform:translate(100px,50px) scale(1.15); } }
@keyframes floatTwo{ to{ transform:translate(-100px,-70px) scale(1.1); } }
@media(max-width:768px){
  .cta-section{ padding:70px 24px; border-radius:26px; }
  .cta-buttons{ flex-direction:column; }
  .btn-primary,.btn-secondary{ text-align:center; }
}

/* ============================================================
   PRICING TIERS
   ============================================================ */
.lp-pricing{ padding:110px 6vw; max-width:1280px; margin:0 auto; }
.lp-pricing-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; align-items:stretch; }
.lp-pricing-card{
  position:relative; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius:24px;
  padding:36px 28px; transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.lp-pricing-card:hover{ transform:translateY(-10px); box-shadow:0 30px 60px rgba(15,23,42,.1); }
.lp-pricing-card.popular{
  border-color:#0877c9; box-shadow:0 24px 55px rgba(8,119,201,.18);
  transform:scale(1.03);
}
.lp-pricing-card.popular:hover{ transform:scale(1.03) translateY(-10px); }
.lp-pricing-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:#0877c9; color:#fff; font-size:11px; font-weight:700;
  padding:6px 16px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap;
}
.lp-pricing-name{ font-size:13px; font-weight:700; color:#0877c9; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px; }
.lp-pricing-price{ font-size:2.4rem; font-weight:800; color:#0f172a; line-height:1; margin-bottom:4px; }
.lp-pricing-period{ font-size:13px; color:#94a3b8; font-weight:500; margin-bottom:26px; }
.lp-pricing-features{ list-style:none; padding:0; margin:0 0 30px; display:flex; flex-direction:column; gap:12px; flex:1; }
.lp-pricing-features li{ font-size:14px; color:#334155; display:flex; gap:10px; align-items:flex-start; line-height:1.5; }
.lp-pricing-features li::before{ content:"✓"; color:#0877c9; font-weight:800; flex-shrink:0; }
.lp-pricing-btn{
  display:block; text-align:center; padding:14px; border-radius:12px;
  font-weight:700; font-size:14px; background:#f1f5f9; color:#0f172a; border:1px solid #e2e8f0;
  transition:background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.lp-pricing-btn:hover{ transform:translateY(-3px); background:#0f172a; color:#fff; border-color:#0f172a; }
.lp-pricing-card.popular .lp-pricing-btn{ background:#0877c9; color:#fff; border-color:#0877c9; }
.lp-pricing-card.popular .lp-pricing-btn:hover{ background:#065ea3; }
@media(max-width:1100px){ .lp-pricing-grid{ grid-template-columns:repeat(2,1fr); } .lp-pricing-card.popular{ transform:none; } .lp-pricing-card.popular:hover{ transform:translateY(-10px); } }
@media(max-width:600px){ .lp-pricing-grid{ grid-template-columns:1fr; } }

/* ============================================================
   BRAND CARD — premium shine variant (extra flourish for
   pages that want a richer brand showcase)
   ============================================================ */
.lp-brand-card.premium-shine{
  overflow:hidden;
  border-top:3px solid var(--accent, #0877c9);
  transform-style:preserve-3d;
}
.lp-brand-card.premium-shine::after{
  content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.65), transparent);
  transform:skewX(-20deg); transition:left .75s cubic-bezier(.22,1,.36,1); pointer-events:none; z-index:2;
}
.lp-brand-card.premium-shine:hover::after{ left:130%; }
.lp-brand-card.premium-shine:hover{
  transform:perspective(700px) rotateX(6deg) translateY(-12px) scale(1.12) !important;
  box-shadow:0 30px 55px -10px var(--accent-shadow, rgba(8,119,201,.3)) !important;
  border-top-color:var(--accent, #0877c9);
}
.lp-brand-card.premium-shine .lp-brand-dot{
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:var(--accent, #0877c9); margin-right:7px; vertical-align:middle;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent, #0877c9) 18%, transparent);
  transition:transform .4s ease;
}
.lp-brand-card.premium-shine:hover .lp-brand-dot{ transform:scale(1.4); }

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.hp-reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.hp-reveal.in{ opacity:1; transform:translateY(0); }