/* =========================================================
   SaaS-style home page (scoped under .lc-home)
   ========================================================= */
.lc-home {
  --lc-ink: #0b1220;
  --lc-body: #475467;
  --lc-muted: #667085;
  --lc-line: #e6e8ee;
  --lc-soft: #f6f7fb;
  --lc-brand: #2563eb;
  --lc-brand-2: #7c3aed;
  --lc-accent: #10b981;
  --lc-radius: 18px;
  --lc-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -8px rgba(16, 24, 40, .08);
  --lc-shadow-lg: 0 24px 60px -20px rgba(37, 99, 235, .28);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--lc-body);
  background: #fff;
}
.lc-home h1, .lc-home h2, .lc-home h3, .lc-home h4 {
  font-family: inherit;
  color: var(--lc-ink);
  letter-spacing: -0.02em;
}
.lc-home a { text-decoration: none; }

.lc-section { padding: 96px 0; }
.lc-section.lc-soft { background: var(--lc-soft); }
.lc-head { max-width: 680px; margin: 0 auto 56px; text-align: center; }
.lc-head.lc-left { margin-left: 0; text-align: left; }
.lc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: #eef4ff; color: var(--lc-brand);
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  margin-bottom: 16px;
}
.lc-head h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; line-height: 1.15; margin-bottom: 14px; }
.lc-head p { font-size: 17px; line-height: 1.65; color: var(--lc-muted); margin: 0; }
.lc-grad {
  background: linear-gradient(90deg, var(--lc-brand), var(--lc-brand-2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Buttons */
.lc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; padding: 0 24px; border-radius: 12px;
  font-weight: 600; font-size: 15px; transition: all .2s ease;
  border: 1px solid transparent; white-space: nowrap;
}
.lc-btn-primary { background: var(--lc-ink); color: #fff; }
.lc-btn-primary:hover { background: var(--lc-brand); color: #fff; transform: translateY(-1px); box-shadow: var(--lc-shadow-lg); }
.lc-btn-ghost { background: #fff; color: var(--lc-ink); border-color: var(--lc-line); }
.lc-btn-ghost:hover { border-color: var(--lc-ink); color: var(--lc-ink); }
.lc-btn-light { background: #fff; color: var(--lc-ink); }
.lc-btn-light:hover { background: #eef4ff; color: var(--lc-brand); }
.lc-btn-outline-light { color: #fff; border-color: rgba(255,255,255,.35); }
.lc-btn-outline-light:hover { background: rgba(255,255,255,.1); color: #fff; }

.lc-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: #eef4ff; color: var(--lc-brand); font-size: 22px; flex-shrink: 0;
}
.lc-ico.green { background: #ecfdf5; color: var(--lc-accent); }
.lc-ico.violet { background: #f5f3ff; color: var(--lc-brand-2); }

/* Categories */
.lc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.lc-cat {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 22px 14px; border: 1px solid var(--lc-line); border-radius: var(--lc-radius);
  background: #fff; transition: all .2s ease; text-align: center;
}
.lc-cat:hover { border-color: #c7d7fe; box-shadow: var(--lc-shadow); transform: translateY(-3px); }
.lc-cat-img { width: 84px; height: 84px; border-radius: 14px; background: var(--lc-soft); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lc-cat-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.lc-cat span { font-size: 14px; font-weight: 600; color: var(--lc-ink); }

/* Feature / service cards */
.lc-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lc-card {
  position: relative; padding: 28px; border-radius: var(--lc-radius);
  background: #fff; border: 1px solid var(--lc-line);
  transition: all .25s ease; height: 100%;
}
.lc-card:hover { border-color: #c7d7fe; box-shadow: var(--lc-shadow-lg); transform: translateY(-4px); }
.lc-card h3 { font-size: 19px; font-weight: 650; margin: 20px 0 10px; }
.lc-card p { font-size: 15px; line-height: 1.65; color: var(--lc-muted); margin: 0; }
.lc-card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-size: 14px; font-weight: 600; color: var(--lc-brand); }
.lc-card-link i { transition: transform .2s; }
.lc-card:hover .lc-card-link i { transform: translateX(3px); }

/* About split */
.lc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.lc-media {
  border-radius: 24px; overflow: hidden; background: var(--lc-ink);
  box-shadow: 0 40px 80px -30px rgba(11, 18, 32, .35);
  display: flex; justify-content: center;
}
.lc-media iframe { width: 100%; max-width: 420px; height: 620px; border: 0; display: block; }
.lc-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0 32px; padding: 0; list-style: none; }
.lc-checks li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--lc-ink); font-size: 15px; }
.lc-checks i { color: var(--lc-accent); font-size: 18px; }
.lc-split p { font-size: 16px; line-height: 1.75; color: var(--lc-muted); }

/* Steps */
.lc-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.lc-step { padding: 28px; border-radius: var(--lc-radius); background: #fff; border: 1px solid var(--lc-line); position: relative; }
.lc-step::before {
  counter-increment: step; content: "0" counter(step);
  font-size: 13px; font-weight: 700; color: var(--lc-brand);
  display: inline-block; padding: 4px 10px; border-radius: 999px; background: #eef4ff; margin-bottom: 18px;
}
.lc-step h4 { font-size: 17px; font-weight: 650; margin-bottom: 8px; }
.lc-step p { font-size: 14px; line-height: 1.6; color: var(--lc-muted); margin: 0; }

/* Products */
.lc-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.lc-row-head h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 700; margin: 0; }
.lc-row-head p { margin: 6px 0 0; color: var(--lc-muted); }
.lc-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.lc-products .card-product {
  border: 1px solid var(--lc-line); border-radius: var(--lc-radius); background: #fff;
  padding: 14px; height: 100%; transition: all .25s ease; overflow: hidden;
}
.lc-products .card-product:hover { box-shadow: var(--lc-shadow-lg); border-color: #c7d7fe; }
.lc-products .card-product-wrapper { border-radius: 12px; overflow: hidden; background: var(--lc-soft); }
.lc-products .card-product-info { padding: 14px 4px 4px; }
.lc-products .name-product { color: var(--lc-ink) !important; font-family: inherit; }
.lc-products .new-price { color: var(--lc-ink); font-weight: 700; font-family: inherit; }

/* Testimonials */
.lc-home #testimonials { padding: 0; background: transparent; }
.lc-home .testimonial-wrapper .bg-left, .lc-home .testimonial-wrapper .bg-right { display: none; }
.lc-home .testimonial-card {
  background: #fff; border: 1px solid var(--lc-line); border-radius: var(--lc-radius);
  padding: 28px; box-shadow: none; height: 100%; text-align: left;
}
.lc-home .testimonial-card p { font-size: 16px; line-height: 1.7; color: var(--lc-ink); }
.lc-home .testimonial-card .stars { color: #f59e0b; letter-spacing: 2px; }
.lc-home .testi-avatar { background: linear-gradient(135deg, var(--lc-brand), var(--lc-brand-2)); color: #fff; }
.lc-home .testimonialSwiper { padding-bottom: 48px; }
.lc-home .testimonialSwiper .swiper-pagination-bullet-active { background: var(--lc-brand); }

/* CTA band */
.lc-cta {
  position: relative; overflow: hidden; border-radius: 28px; padding: 64px;
  background: radial-gradient(600px 300px at 90% 0%, rgba(124, 58, 237, .55), transparent 60%),
              linear-gradient(135deg, #0b1220, #1e3a8a);
  color: #cbd5e1; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.lc-cta h2 { color: #fff; font-size: clamp(26px, 3vw, 38px); font-weight: 700; margin-bottom: 10px; }
.lc-cta p { margin: 0; font-size: 17px; max-width: 520px; }
.lc-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* Responsive */
@media (max-width: 1199px) {
  .lc-products { grid-template-columns: repeat(3, 1fr); }
  .lc-steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 991px) {
  .lc-section { padding: 72px 0; }
  .lc-split { grid-template-columns: 1fr; gap: 40px; }
  .lc-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .lc-products { grid-template-columns: repeat(2, 1fr); }
  .lc-cta { padding: 40px 28px; }
}
@media (max-width: 575px) {
  .lc-grid-3, .lc-steps, .lc-checks { grid-template-columns: 1fr; }
  .lc-products { gap: 12px; }
  .lc-products .card-product { padding: 10px; }
  .lc-media iframe { height: 520px; }
}


/* =========================================================
   Hero, stats & brand strip — navy → teal, continuous with header
   (single source of truth; this stylesheet only loads on the home page)
   ========================================================= */
.lc-home { --lc-navy: #06143a; --lc-navy-2: #0b2a6f; --lc-teal: #0e8f9c; --lc-cyan: #5eead4; }
#header-full,
.lc-hero,
.lc-brands {
  background: #0b1f5c !important;
  animation: none !important;
}
/* Let the shared background show through the header's inner bars */
#header-full .topbar,
#header-full .tf-header { background: transparent !important; }

/* Hero */
.lc-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    none;
}
.lc-hero .container { position: relative; }
.lc-hero .lc-eyebrow {
  padding: 8px 16px; margin-bottom: 22px;
  background: rgba(255,255,255,.08); color: #e0f2fe; border: 1px solid rgba(255,255,255,.18);
}
.lc-hero .lc-eyebrow i { color: var(--lc-cyan); }
.lc-hero h1 {
  color: #fff; font-size: clamp(36px, 4.4vw, 60px); font-weight: 800;
  line-height: 1.08; letter-spacing: -0.03em; margin-bottom: 22px;
}
.lc-hero-accent {
  color: var(--lc-cyan);
}
.lc-hero-lead { font-size: 18px; line-height: 1.7; color: rgba(226, 238, 255, .86); max-width: 520px; margin-bottom: 34px; }
.lc-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 34px; }
.lc-hero-cta .lc-btn { height: 54px; padding: 0 28px; border-radius: 14px; }
.lc-hero .lc-btn-primary { background: linear-gradient(135deg, #22d3ee, #14b8a6); color: #04203a; box-shadow: none; }
.lc-hero .lc-btn-primary:hover { background: linear-gradient(135deg, #67e8f9, #2dd4bf); color: #04203a; transform: translateY(-2px); }
.lc-hero .lc-btn-ghost { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.35); }
.lc-hero .lc-btn-ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; color: #fff; }
.lc-trust { display: flex; flex-wrap: wrap; gap: 12px 24px; font-size: 15px; color: rgba(226, 238, 255, .9); }
.lc-trust span { display: inline-flex; align-items: center; gap: 8px; }
.lc-trust i { color: var(--lc-cyan); }

/* Laptop visual */
.lc-hero-stage { position: relative; min-height: 500px; display: flex; align-items: flex-end; justify-content: center; }
.lc-hero-laptop {
  position: relative; z-index: 1; width: 92%; max-width: 620px; margin-bottom: 26px;
  filter: drop-shadow(0 34px 40px rgba(2, 8, 30, .6));
}

/* Floating feature cards */
.lc-glass {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px 12px 12px; border-radius: 16px; max-width: 240px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: 0 18px 40px -18px rgba(2, 8, 30, .65);
  font-size: 12px; line-height: 1.35; color: #526077;
  animation: lcFloat 6s ease-in-out infinite;
}
.lc-glass strong { display: block; font-size: 14px; font-weight: 700; color: var(--lc-ink); }
.lc-glass i {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px; font-size: 19px;
  background: linear-gradient(135deg, #0b2a6f, #0e8f9c); color: #fff;
}
.lc-glass-1 { left: -8px; top: 24px; }
.lc-glass-2 { right: -8px; top: 0; animation-delay: -2s; }
.lc-glass-3 { right: 0; top: 52%; animation-delay: -4s; }
@keyframes lcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Stats bar */
.lc-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(2, 8, 30, .6);
  margin-top: 20px;
}
.lc-stat { display: flex; align-items: center; gap: 16px; padding: 24px 28px; border-right: 1px solid var(--lc-line); }
.lc-stat:last-child { border-right: 0; }
.lc-stat > i {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 52px; height: 52px; border-radius: 14px; font-size: 24px;
  background: #e8f6f8; color: #0c5a8c;
}
.lc-stat b { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; color: var(--lc-ink); letter-spacing: -0.02em; }
.lc-stat span { font-size: 14px; color: var(--lc-muted); }

/* Trusted-brand strip — continues the hero band, then eases into the page */
.lc-brands { position: relative; padding: 8px 0 44px; }
.lc-brands .container { border-top: 1px solid rgba(255,255,255,.12); padding-top: 32px; }
.lc-brands p { text-align: center; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: rgba(226, 238, 255, .7); margin-bottom: 22px; }
.lc-brand-row { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 52px; }
.lc-brand-row img { height: 28px; width: auto; filter: brightness(0) invert(1); opacity: .65; transition: opacity .2s, transform .2s; }
.lc-brand-row img:hover { opacity: 1; transform: translateY(-2px); }

@media (max-width: 1199px) {
  .lc-hero-stage { min-height: 440px; }
  .lc-stat { padding: 22px 20px; gap: 12px; }
  .lc-stat b { font-size: 24px; }
}
@media (max-width: 991px) {
  .lc-hero { padding: 56px 0 48px; text-align: center; }
  .lc-hero-lead { margin-left: auto; margin-right: auto; }
  .lc-hero-cta, .lc-trust { justify-content: center; }
  .lc-hero-stage { margin-top: 44px; min-height: 420px; max-width: 640px; margin-left: auto; margin-right: auto; }
  .lc-glass, .lc-stats { text-align: left; }
  .lc-glass-1 { left: 0; }
  .lc-glass-2 { right: 0; }
  .lc-glass-3 { top: auto; bottom: 120px; }
  .lc-stats { grid-template-columns: repeat(2, 1fr); }
  .lc-stat:nth-child(2) { border-right: 0; }
  .lc-stat:nth-child(-n+2) { border-bottom: 1px solid var(--lc-line); }
}
@media (max-width: 575px) {
  .lc-hero { padding: 40px 0 36px; }
  .lc-hero-lead { font-size: 16px; }
  .lc-hero-cta .lc-btn { flex: 1 1 100%; }
  .lc-trust { font-size: 13px; gap: 8px 16px; }
  /* Cards drop below the laptop as a tidy grid instead of covering it */
  .lc-hero-stage { min-height: 0; flex-wrap: wrap; gap: 10px; margin-top: 32px; padding-bottom: 0; }
  .lc-hero-laptop { width: 100%; margin-bottom: 12px; }
  .lc-glass { position: static; flex: 1 1 calc(50% - 5px); max-width: none; padding: 10px; animation: none; }
  .lc-glass-3 { flex-basis: 100%; }
  .lc-glass i { width: 34px; height: 34px; font-size: 16px; }
  .lc-glass strong { font-size: 13px; }

  .lc-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 16px; }
  .lc-stat > i { width: 42px; height: 42px; font-size: 20px; }
  .lc-stat b { font-size: 22px; }
  .lc-stat span { font-size: 13px; }
  .lc-brand-row { gap: 18px 32px; }
  .lc-brand-row img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .lc-glass { animation: none; } }

/* Hero slider */
.lc-hero-swiper { overflow: hidden; padding-bottom: 36px; }
.lc-hero-swiper .lc-hero-pagination { bottom: 0; }
.lc-hero-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: rgba(255,255,255,.45); opacity: 1; transition: width .3s; }
.lc-hero-swiper .swiper-pagination-bullet-active { width: 28px; border-radius: 6px; background: var(--lc-cyan, #5eead4); }

/* Hero spacing */
.lc-hero { padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 575px) { .lc-hero { padding-top: 28px; padding-bottom: 28px; } }

/* Hero slide video */
.lc-hero-stage .lc-hero-video {
  width: 100%; max-width: 560px; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 20px; align-self: center;
  box-shadow: 0 30px 60px -30px rgba(2, 8, 30, .7);
  border: 1px solid rgba(255, 255, 255, .15);
}

/* Hero slider layout: keep text unclipped and tighten the middle gap */
.lc-hero-swiper .row { margin-left: 0; margin-right: 0; --bs-gutter-x: 48px; }
@media (min-width: 992px) {
  .lc-hero-swiper .row > .col-lg-6:first-child { padding-left: 0; }
  .lc-hero-swiper .row > .col-lg-6:last-child { padding-right: 0; }
  .lc-hero-stage { justify-content: flex-start; }
  .lc-hero-stage .lc-hero-video { max-width: 100%; }
}

/* Brand without an uploaded logo: show its name as a wordmark */
.lc-brand-row .lc-brand-name { font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #fff; opacity: .65; transition: opacity .2s; }
.lc-brand-row .lc-brand-name:hover { opacity: 1; }

/* ===== Shop by category ===== */
.lc-catsec { --cat-accent: #5eead4; --cat-accent-ink: #0f9f8f; --cat-navy: #0b1f5c; position: relative; overflow: hidden;
}
.lc-catsec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 34px; }
.lc-catsec-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border: 1px solid var(--cat-accent); border-radius: 999px; background: #fff; color: var(--cat-accent-ink); font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.lc-catsec-head h2 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; color: #0b1f5c; letter-spacing: -.02em; margin-bottom: 8px; }
.lc-catsec-head h2 span { color: var(--cat-accent-ink); }
.lc-catsec-head p { font-size: 17px; color: #64748b; margin: 0; }
.lc-catsec-all { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; border-radius: 14px; background: #fff; border: 1px solid #e2e8f0; color: #0b1f5c; font-weight: 700; box-shadow: 0 6px 18px -10px rgba(15, 23, 42, .25); transition: .2s; }
.lc-catsec-all i { color: var(--cat-accent-ink); }
.lc-catsec-all:hover { border-color: var(--cat-accent); background: var(--cat-accent); color: var(--cat-navy); transform: translateY(-2px); }

.lc-catgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 16px; }
.lc-catcard { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 12px 22px; background: #fff; border: 1px solid #edf1f7; border-radius: 18px; box-shadow: 0 10px 30px -22px rgba(15, 23, 42, .35); transition: border-color .2s, box-shadow .2s, transform .2s, background .2s; }
.lc-catcard-media { width: 124px; height: 124px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; font-size: 46px; color: #0b1f5c; }
.lc-catcard-media img { width: 118%; max-width: none; height: 85%; object-fit: contain; filter: drop-shadow(0 10px 12px rgba(15, 23, 42, .18)); }
.lc-catcard-media.tint-blue   { background: #e6fbf7; }
.lc-catcard-media.tint-sky    { background: #e3f3fd; }
.lc-catcard-media.tint-violet { background: #efe9fd; }
.lc-catcard-media.tint-green  { background: #e3f7e8; }
.lc-catcard-media.tint-pink   { background: #fde7ec; }
.lc-catcard-media.tint-amber  { background: #fdf1df; }
.lc-catcard-name { font-size: 17px; font-weight: 700; color: #0b1f5c; line-height: 1.35; }
.lc-catcard-count { font-size: 14px; color: #64748b; margin-top: 4px; }
.lc-catcard-go { margin-top: auto; padding-top: 0; width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #f1f5fb; color: #0b1f5c; transition: .2s; }
.lc-catcard-count { margin-bottom: 18px; }
.lc-catcard:hover { border-color: var(--cat-accent); background: #f0fdfa; box-shadow: 0 18px 40px -22px rgba(15, 159, 143, .55); transform: translateY(-4px); }
.lc-catcard:hover .lc-catcard-go { background: var(--cat-accent); color: var(--cat-navy); }

@media (max-width: 1199px) { .lc-catgrid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .lc-catgrid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .lc-catcard-media { width: 96px; height: 96px; font-size: 36px; } .lc-catcard-name { font-size: 15px; } }

/* ===== Why Laptop Clinic ===== */
.lc-why { --why-accent: #5eead4; --why-ink: #0f9f8f; --why-navy: #0b1f5c; position: relative; overflow: hidden; }

/* Left: video card */
.lc-why-media { position: relative; padding: 24px 40px 24px 24px; }
.lc-why-deco { position: absolute; border-radius: 24px; background: var(--why-accent); z-index: 0; }
.lc-why-deco-1 { top: 0; left: 0; width: 120px; height: 200px; }
.lc-why-deco-2 { right: 18px; bottom: 0; width: 110px; height: 110px; }
.lc-why-frame { position: relative; z-index: 1; border-radius: 22px; overflow: hidden; aspect-ratio: 6 / 5; background: var(--why-navy); box-shadow: 0 30px 60px -30px rgba(11, 31, 92, .55); }
.lc-why-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lc-why-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,31,92,.15), rgba(11,31,92,.35)); pointer-events: none; transition: opacity .3s; }
.lc-why-tag { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(11, 31, 92, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.4; }
.lc-why-tag strong { display: block; color: #fff; font-size: 14px; }
.lc-why-tag-top { top: 18px; left: 18px; }
.lc-why-tag-bottom { bottom: 18px; left: 18px; }
.lc-why-tag-ico { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--why-accent); color: var(--why-navy); font-size: 18px; flex-shrink: 0; }
.lc-why-tag-ico.light { background: #fff; }
.lc-why-play { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; border: 0; background: #fff; color: var(--why-navy); font-size: 40px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 12px rgba(255,255,255,.25); transition: transform .2s; }
.lc-why-play i { margin-left: 5px; }
.lc-why-play:hover { transform: translate(-50%, -50%) scale(1.06); }
.lc-why-script { position: absolute; z-index: 2; right: 26px; bottom: 26px; color: #fff; font-style: italic; font-weight: 600; font-size: 18px; line-height: 1.3; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.lc-why-frame.is-playing::after,
.lc-why-frame.is-playing .lc-why-tag,
.lc-why-frame.is-playing .lc-why-play,
.lc-why-frame.is-playing .lc-why-script { opacity: 0; pointer-events: none; }

.lc-why-stats { position: absolute; z-index: 3; top: 70px; right: 0; display: flex; flex-direction: column; gap: 18px; padding: 22px 24px; background: #fff; border-radius: 18px; box-shadow: 0 24px 50px -24px rgba(11, 31, 92, .45); }
.lc-why-stats > div, .lc-why-features > div { display: flex; align-items: center; gap: 14px; }
.lc-why-stats p, .lc-why-features p { margin: 0; font-size: 13px; color: #64748b; line-height: 1.45; }
.lc-why-stats b { display: block; font-size: 18px; color: var(--why-navy); }

.lc-why .ico { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.lc-why .ico.teal   { background: #e6fbf7; color: var(--why-ink); }
.lc-why .ico.green  { background: #e3f7e8; color: #16a34a; }
.lc-why .ico.amber  { background: #fdf1df; color: #f59e0b; }
.lc-why .ico.violet { background: #efe9fd; color: #7c3aed; }

/* Right: content */
.lc-why-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: #e6fbf7; color: var(--why-ink); font-size: 14px; font-weight: 600; margin-bottom: 18px; }
.lc-why-title { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--why-navy); margin-bottom: 20px; }
.lc-why-title span { color: var(--why-ink); }
.lc-why-lead { font-size: 17px; line-height: 1.7; color: #64748b; margin-bottom: 28px; }
.lc-why-features { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 0; margin-bottom: 34px; }
.lc-why-features > div:nth-child(odd) { padding-right: 24px; border-right: 1px solid #e2e8f0; }
.lc-why-features > div:nth-child(even) { padding-left: 32px; }
.lc-why-features .ico { width: 58px; height: 58px; font-size: 24px; }
.lc-why-features b { display: block; font-size: 17px; color: var(--why-navy); }
.lc-why-features p { font-size: 15px; }
.lc-why-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; }
.lc-why-btn { display: inline-flex; align-items: center; gap: 12px; padding: 18px 36px; border-radius: 12px; background: var(--why-navy); color: #fff; font-size: 17px; font-weight: 700; transition: .2s; }
.lc-why-btn:hover { background: var(--why-accent); color: var(--why-navy); transform: translateY(-2px); }
.lc-why-watch { display: flex; align-items: center; gap: 16px; padding: 0; border: 0; background: none; text-align: left; font-size: 14px; color: #64748b; }
.lc-why-watch b { display: block; font-size: 16px; color: var(--why-navy); }
.lc-why-watch .ring { width: 58px; height: 58px; border-radius: 50%; border: 2px solid var(--why-accent); display: flex; align-items: center; justify-content: center; color: var(--why-ink); font-size: 26px; transition: .2s; }
.lc-why-watch:hover .ring { background: var(--why-accent); color: var(--why-navy); }

@media (max-width: 991px) {
  .lc-why-media { max-width: 640px; margin: 0 auto; }
}
@media (max-width: 575px) {
  .lc-why-media { padding: 14px 0 0 14px; }
  .lc-why-stats { position: static; flex-direction: row; flex-wrap: wrap; justify-content: space-between; margin-top: 16px; gap: 14px; padding: 16px; }
  .lc-why-script { display: none; }
  .lc-why-tag { padding: 8px 12px; }
  .lc-why-tag-top div { display: none; }
  .lc-why-play { width: 64px; height: 64px; font-size: 30px; }
  .lc-why-features { grid-template-columns: 1fr; }
  .lc-why-features > div:nth-child(odd) { border-right: 0; padding-right: 0; }
  .lc-why-features > div:nth-child(even) { padding-left: 0; }
}

/* ===== Featured laptops (tabs + slider) ===== */
.lc-feat { --f-accent: #5eead4; --f-ink: #0f9f8f; --f-navy: #0b1f5c; --f-muted: #64748b; --f-line: #e8edf4;
  position: relative; overflow: hidden; }
.lc-feat-head { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-bottom: 26px; }
.lc-feat-head > div:first-child { flex: 1 1 320px; }
.lc-feat-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #e6fbf7; color: var(--f-ink); font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.lc-feat-head h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -.02em; color: var(--f-navy); margin-bottom: 6px; }
.lc-feat-head h2 span { color: var(--f-ink); }
.lc-feat-head > div p { font-size: 17px; color: var(--f-muted); margin: 0; }
.lc-feat-trust { display: flex; flex-wrap: wrap; gap: 18px 26px; list-style: none; margin: 0; padding: 0; }
.lc-feat-trust li { display: flex; align-items: center; gap: 12px; }
.lc-feat-trust li > span { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: #e6fbf7; color: var(--f-navy); font-size: 20px; }
.lc-feat-trust p { margin: 0; font-size: 12px; color: var(--f-muted); line-height: 1.35; }
.lc-feat-trust b { display: block; font-size: 15px; color: var(--f-navy); }
.lc-feat-browse { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 12px; border: 1.5px solid var(--f-navy); color: var(--f-navy); font-weight: 700; font-size: 14px; background: #fff; transition: .2s; }
.lc-feat-browse:hover { background: var(--f-navy); color: #fff; }

.lc-feat-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.lc-feat-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.lc-feat-tabs::-webkit-scrollbar { display: none; }
.lc-feat-tab { flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--f-line); background: #fff; color: var(--f-navy); font-size: 14px; font-weight: 600; transition: .2s; }
.lc-feat-tab small { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: var(--f-muted); font-size: 12px; }
.lc-feat-tab:hover { border-color: var(--f-accent); }
.lc-feat-tab.is-active { background: var(--f-navy); border-color: var(--f-navy); color: #fff; }
.lc-feat-tab.is-active small { background: var(--f-accent); color: var(--f-navy); }
.lc-feat-arrows { display: flex; gap: 10px; flex-shrink: 0; }
.lc-feat-arrow { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--f-accent); color: var(--f-navy); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.lc-feat-arrow:hover:not(:disabled) { background: var(--f-navy); color: #fff; }
.lc-feat-arrow:disabled { background: #eef2f7; color: #b6c2d2; cursor: default; }

.lc-feat-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 4); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 6px 2px 24px; }
.lc-feat-track::-webkit-scrollbar { display: none; }
.lc-feat-empty { text-align: center; padding: 56px 20px; border: 1px dashed #cbd5e1; border-radius: 18px; background: #fff; color: var(--f-muted); }
.lc-feat-empty i { font-size: 40px; color: var(--f-ink); }
.lc-feat-empty p { margin: 10px 0 6px; }
.lc-feat-empty a { font-weight: 700; color: var(--f-navy); }

/* Card */
.lc-lap { position: relative; scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 18px; box-shadow: 0 14px 34px -26px rgba(11, 31, 92, .45); transition: border-color .2s, box-shadow .2s, transform .2s; }
.lc-lap:hover { border-color: var(--f-accent); box-shadow: 0 22px 44px -26px rgba(15, 159, 143, .55); transform: translateY(-3px); }
.lc-lap-badge { position: absolute; z-index: 2; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; color: #fff; }
.lc-lap-badge.off { background: #ef4444; }
.lc-lap-badge.popular { background: var(--f-navy); }
.lc-lap-badge.new { background: var(--f-accent); color: var(--f-navy); }
.lc-lap-heart { position: absolute; z-index: 2; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; color: var(--f-navy); font-size: 18px; display: flex; align-items: center; justify-content: center; transition: .2s; }
.lc-lap-heart:hover { background: #fef2f2; color: #ef4444; }
.lc-lap-heart .bi-heart-fill, .lc-lap-heart.is-active .bi-heart { display: none; }
.lc-lap-heart.is-active .bi-heart-fill { display: inline; color: #ef4444; }
.lc-lap-heart.is-busy { opacity: .55; pointer-events: none; }
.lc-lap-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; margin: 14px 0 12px; }
.lc-lap-img img { width: 100%; height: 100%; object-fit: contain; transition: transform .3s; }
.lc-lap:hover .lc-lap-img img { transform: scale(1.04); }
.lc-lap-body { display: flex; flex-direction: column; flex: 1; }
.lc-lap-cat { align-self: flex-start; padding: 3px 10px; border-radius: 6px; background: #e6fbf7; color: var(--f-ink); font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.lc-lap h3 { font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lc-lap h3 a { color: var(--f-navy); }
.lc-lap h3 a:hover { color: var(--f-ink); }
.lc-lap-rating { margin: 0 0 6px; font-size: 14px; color: var(--f-navy); font-weight: 600; }
.lc-lap-rating i { color: #f59e0b; }
.lc-lap-rating span { color: var(--f-muted); font-weight: 400; }
.lc-lap-price { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 4px; }
.lc-lap-price b { font-size: 24px; font-weight: 800; color: var(--f-navy); }
.lc-lap-price s { font-size: 14px; color: #94a3b8; }
.lc-lap-stock { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; font-size: 13px; font-weight: 600; }
.lc-lap-stock i { font-size: 7px; }
.lc-lap-stock.in  { color: #16a34a; }
.lc-lap-stock.low { color: #d97706; }
.lc-lap-stock.out { color: #dc2626; }
.lc-lap-actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lc-lap-cart, .lc-lap-view { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border-radius: 10px; font-size: 14px; font-weight: 700; white-space: nowrap; transition: .2s; }
.lc-lap-cart { background: var(--f-navy); color: #fff; }
.lc-lap-cart:hover { background: var(--f-accent); color: var(--f-navy); }
.lc-lap-cart.is-disabled { background: #eef2f7; color: #94a3b8; cursor: not-allowed; }
.lc-lap-view { border: 1.5px solid #d6dee9; color: var(--f-navy); background: #fff; }
.lc-lap-view:hover { border-color: var(--f-accent); color: var(--f-ink); }

@media (max-width: 1199px) { .lc-feat-track { grid-auto-columns: calc((100% - 2 * 20px) / 3); } }
@media (max-width: 991px)  { .lc-feat-track { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 575px)  {
  .lc-feat-track { grid-auto-columns: 82%; gap: 14px; }
  .lc-feat-arrows { display: none; }
  .lc-feat-trust { gap: 14px 18px; }
  .lc-lap-actions { grid-template-columns: 1fr; }
}

/* No box shadows anywhere on the home page */
.lc-home *, .lc-home *::before, .lc-home *::after { box-shadow: none !important; }

/* ===== How it works + Services ===== */
.lc-proc { --p-accent: #5eead4; --p-ink: #0f9f8f; --p-navy: #0b1f5c; --p-muted: #64748b; }
.lc-proc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border-radius: 999px; background: #e6fbf7; color: var(--p-ink); font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.lc-proc h2 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.02em; color: var(--p-navy); margin-bottom: 8px; }
.lc-proc h2 span { color: var(--p-ink); }
.lc-proc-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.lc-proc-head p, .lc-proc-svhead p { font-size: 17px; color: var(--p-muted); margin: 0; }

/* Steps with dashed arrows between them */
.lc-proc-steps { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 64px; }
.lc-proc-step { position: relative; background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 20px 22px 24px; }
.lc-proc-step:not(:last-child)::after { content: ""; position: absolute; top: 70px; right: -54px; width: 44px; height: 22px;
  border-top: 2px dashed var(--p-ink); border-radius: 50% 50% 0 0; }
.lc-proc-step:not(:last-child)::before { content: ""; position: absolute; top: 76px; right: -56px; border: 5px solid transparent; border-top-color: var(--p-ink); transform: rotate(-30deg); }
.lc-proc-num { position: absolute; top: 18px; left: 18px; width: 40px; height: 40px; border-radius: 50%; background: var(--p-navy); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lc-proc-art { display: flex; align-items: center; justify-content: center; height: 120px; margin: 0 0 16px 40px; border-radius: 16px; background: #e6fbf7; color: var(--p-navy); font-size: 52px; }
.lc-proc-step h3 { font-size: 18px; font-weight: 700; color: var(--p-navy); margin-bottom: 6px; }
.lc-proc-step p { font-size: 15px; line-height: 1.55; color: var(--p-muted); margin: 0; }

/* Services panel */
.lc-proc-services { background: #f2fbfa; border-radius: 26px; padding: 34px 32px 32px; }
.lc-proc-svhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; }
.lc-proc-all { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 14px; border: 1.5px solid var(--p-navy); background: #fff; color: var(--p-navy); font-weight: 700; transition: .2s; }
.lc-proc-all:hover { background: var(--p-navy); color: #fff; }
.lc-proc-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.lc-svc { display: flex; flex-direction: column; background: #fff; border: 1px solid #eef2f7; border-radius: 18px; padding: 14px 14px 18px; transition: border-color .2s, transform .2s; }
.lc-svc:hover { border-color: var(--p-accent); transform: translateY(-3px); }
.lc-svc-art { display: flex; align-items: center; justify-content: center; height: 104px; border-radius: 14px; font-size: 46px; margin-bottom: 14px; }
.lc-svc-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.lc-svc-ico { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.lc-svc-row b { display: block; font-size: 15px; color: var(--p-navy); margin-bottom: 4px; }
.lc-svc-row small { display: block; font-size: 13px; line-height: 1.5; color: var(--p-muted); }
.lc-svc-go { margin: auto auto 0; width: 42px; height: 42px; border-radius: 50%; background: #f1f5f9; color: var(--p-navy); display: flex; align-items: center; justify-content: center; transition: .2s; }
.lc-svc:hover .lc-svc-go { background: var(--p-accent); }
.lc-proc .tint-teal   { background: #e6fbf7; color: var(--p-ink); }
.lc-proc .tint-green  { background: #e3f7e8; color: #16a34a; }
.lc-proc .tint-violet { background: #efe9fd; color: #7c3aed; }
.lc-proc .tint-pink   { background: #fde7ec; color: #e11d48; }
.lc-proc .tint-amber  { background: #fdf1df; color: #f59e0b; }
.lc-proc .lc-svc-art { color: var(--p-navy); }

@media (max-width: 1199px) {
  .lc-proc-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .lc-proc-step::after, .lc-proc-step::before { display: none; }
  .lc-proc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .lc-proc-steps { grid-template-columns: 1fr; }
  .lc-proc-services { padding: 24px 16px; border-radius: 20px; }
  .lc-proc-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .lc-svc-row { flex-direction: column; gap: 8px; }
  .lc-svc-art { height: 84px; font-size: 36px; }
}

/* Brand logos link to the shop filtered by brand */
.lc-brand-link { display: inline-flex; align-items: center; }
.lc-brand-link:hover img, .lc-brand-link:hover .lc-brand-name { opacity: 1; transform: translateY(-2px); }

/* Bigger brand logos */
.lc-brand-row img { height: 40px; max-width: 120px; object-fit: contain; }
.lc-brand-row .lc-brand-name { font-size: 26px; }
@media (max-width: 575px) { .lc-brand-row img { height: 30px; max-width: 90px; } .lc-brand-row .lc-brand-name { font-size: 20px; } }

/* ===== Responsive polish ===== */
/* Six service cards only fit side by side on wide screens */
@media (max-width: 1399px) { .lc-proc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px)  { .lc-proc-grid { grid-template-columns: repeat(2, 1fr); } }

/* Why Laptop Clinic on phones: drop the floating decoration, stats become a tidy card */
@media (max-width: 575px) {
  .lc-why-deco-2 { display: none; }
  .lc-why-deco-1 { width: 90px; height: 140px; }
  .lc-why-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; border: 1px solid #eef2f7; }
  .lc-why-stats > div { flex-direction: column; text-align: center; gap: 6px; }
  .lc-why-stats b { font-size: 16px; }
  .lc-why-stats p { font-size: 11px; }
  .lc-why-stats .ico { width: 38px; height: 38px; font-size: 16px; }
}
