/* ============================================================
   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:120px 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:1cm
}
.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-product-card:hover .lp-price{ color:#0877c9; }
.lp-product-btn{
  display:inline-flex; align-items:center; gap:6px;
  font: size 16px; 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
   ============================================================ */
.lp-brands{ padding:100px 6vw; max-width:1280px; margin:0 auto; }
.lp-brand-grid{
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px; margin-bottom:50px;
}
.lp-brand-card{
  position:relative; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:18px;
  padding:28px 14px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-weight:800; font-size:15px; color:#0f172a;
  transition:transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, background .4s ease, color .4s ease, border-color .4s ease;
}
.lp-brand-card::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(135deg, rgba(8,119,201,.12), rgba(90,184,255,.06));
  opacity:0; transition:opacity .4s ease;
}
.lp-brand-card span, .lp-brand-card{ position:relative; }
.lp-brand-card:hover{
  transform:translateY(-8px) scale(1.05);
  box-shadow:0 24px 50px rgba(8,119,201,.2);
  border-color:rgba(8,119,201,.3);
  color:#0877c9;
}
.lp-brand-card:hover::before{ opacity:1; }
.lp-brand-grid .lp-brand-card:nth-child(1){ animation:lpTileIn .55s ease .04s backwards; }
.lp-brand-grid .lp-brand-card:nth-child(2){ animation:lpTileIn .55s ease .1s backwards; }
.lp-brand-grid .lp-brand-card:nth-child(3){ animation:lpTileIn .55s ease .16s backwards; }
.lp-brand-grid .lp-brand-card:nth-child(4){ animation:lpTileIn .55s ease .22s backwards; }
.lp-brand-grid .lp-brand-card:nth-child(5){ animation:lpTileIn .55s ease .28s backwards; }
.lp-brand-grid .lp-brand-card:nth-child(6){ animation:lpTileIn .55s ease .34s backwards; }
.lp-brand-badges{ 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:900px){ .lp-brand-grid{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:520px){ .lp-brand-grid{ grid-template-columns:repeat(2,1fr); } }
@media (prefers-reduced-motion: reduce){
  .lp-partner::before, .lp-glass-stat, .lp-step-card, .lp-brand-card{ animation:none !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; }
}

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