/* ==========================================================================
   PrimeLogue — main stylesheet (light theme, Bootstrap 5.3 companion)
   Brand: blue #1b6fa0 / #3498c8, gold #c9a84b, navy ink #0b2239
   ========================================================================== */

:root {
  --pl-ink: #0b2239;            /* headings */
  --pl-body: #4a5d70;           /* body copy */
  --pl-muted: #74879a;
  --pl-bg: #ffffff;
  --pl-bg-soft: #f5f9fc;
  --pl-bg-blue: #eaf4fb;
  --pl-line: #e3ecf3;
  --pl-line-2: #d3e1ec;
  --pl-primary: #1b6fa0;
  --pl-primary-2: #3498c8;
  --pl-sky: #5cc2ef;
  --pl-gold: #c9a84b;
  --pl-gold-soft: #fbf5e4;
  --pl-green: #0fb584;
  --pl-rose: #e5687a;
  --pl-navy: #0b2239;
  --pl-navy-2: #10304f;
  --pl-whatsapp: #25d366;
  --pl-grad: linear-gradient(135deg, #1b6fa0 0%, #3498c8 55%, #5cc2ef 100%);
  --pl-grad-text: linear-gradient(90deg, #1b6fa0 0%, #3498c8 45%, #c9a84b 100%);
  --pl-font-head: 'Epilogue', system-ui, sans-serif;
  --pl-font-body: 'DM Sans', system-ui, sans-serif;
  --pl-radius: 18px;
  --pl-radius-lg: 28px;
  --pl-radius-sm: 10px;
  --pl-shadow-sm: 0 1px 2px rgba(11, 34, 57, .06), 0 2px 8px rgba(11, 34, 57, .04);
  --pl-shadow: 0 10px 30px -10px rgba(11, 34, 57, .18), 0 4px 12px -6px rgba(11, 34, 57, .08);
  --pl-shadow-lg: 0 40px 80px -30px rgba(11, 34, 57, .35), 0 18px 36px -18px rgba(27, 111, 160, .25);
  --pl-shadow-blue: 0 14px 34px -10px rgba(27, 111, 160, .55);
  --pl-ease: cubic-bezier(.22, 1, .36, 1);

  --bs-body-bg: var(--pl-bg);
  --bs-body-color: var(--pl-body);
  --bs-body-font-family: var(--pl-font-body);
  --bs-link-color: var(--pl-primary);
  --bs-link-color-rgb: 27, 111, 160;
  --bs-link-hover-color: #145680;
  --bs-link-hover-color-rgb: 20, 86, 128;
  --bs-border-color: var(--pl-line);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }
body {
  background: var(--pl-bg); color: var(--pl-body);
  font-family: var(--pl-font-body); font-size: 1.0625rem; line-height: 1.7;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5 {
  font-family: var(--pl-font-head); color: var(--pl-ink);
  font-weight: 800; line-height: 1.12; letter-spacing: -.02em;
}
h3, .h3, h4, .h4, h5, .h5 { font-weight: 700; letter-spacing: -.01em; }
a { color: var(--pl-primary); text-decoration: none; transition: color .2s var(--pl-ease); }
a:hover { color: #145680; }
img { max-width: 100%; height: auto; }
picture { display: contents; }
::selection { background: #cfe8f7; color: var(--pl-ink); }
section[id] { scroll-margin-top: 90px; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 2000; background: var(--pl-ink); color: #fff; padding: .5rem 1rem; border-radius: 8px; }
.skip-link:focus { left: 8px; color: #fff; }

/* ---------- Layout helpers ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; position: relative; }
.section-soft { background: var(--pl-bg-soft); }
.section-head { max-width: 780px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.section-head h2 { font-size: clamp(2rem, 4vw, 3.1rem); margin-bottom: 1.1rem; }
.lead-pl { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--pl-body); line-height: 1.65; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pl-primary);
  padding: .4rem .85rem; border-radius: 999px; background: var(--pl-bg-blue);
}
.eyebrow i { color: var(--pl-gold); }
.text-grad {
  background: var(--pl-grad-text); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 8s linear infinite;
}
@keyframes gradShift { to { background-position: 200% center; } }
.text-ink { color: var(--pl-ink) !important; }
.text-muted-pl { color: var(--pl-muted) !important; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: 12px; padding: .85rem 1.55rem; transition: all .3s var(--pl-ease); }
.btn-lg { padding: 1rem 1.9rem; font-size: 1.06rem; border-radius: 14px; }
.btn-pl {
  position: relative; overflow: hidden; color: #fff; border: 0;
  background: var(--pl-grad); background-size: 150% 150%; box-shadow: var(--pl-shadow-blue);
}
.btn-pl::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.45) 50%, transparent 70%);
  transition: transform .8s var(--pl-ease);
}
.btn-pl:hover, .btn-pl:focus { color: #fff; transform: translateY(-2px); box-shadow: 0 20px 40px -12px rgba(27,111,160,.6); background-position: 100% 0; }
.btn-pl:hover::after { transform: translateX(120%); }
.btn-ghost { background: #fff; color: var(--pl-ink); border: 1px solid var(--pl-line-2); box-shadow: var(--pl-shadow-sm); }
.btn-ghost:hover, .btn-ghost:focus { color: var(--pl-ink); border-color: #b9cfe0; transform: translateY(-2px); box-shadow: var(--pl-shadow); }
.btn-gold { background: var(--pl-gold); color: #231a02; border: 0; box-shadow: 0 14px 30px -12px rgba(201,168,75,.7); }
.btn-gold:hover, .btn-gold:focus { background: #d8b958; color: #231a02; transform: translateY(-2px); }
.btn-white { background: #fff; color: var(--pl-ink); border: 0; }
.btn-white:hover, .btn-white:focus { color: var(--pl-primary); transform: translateY(-2px); }
.btn-outline-white { color: #fff; border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); }
.btn-outline-white:hover, .btn-outline-white:focus { color: #fff; background: rgba(255,255,255,.18); border-color: #fff; }
.btn-whatsapp { background: var(--pl-whatsapp); color: #fff; border: 0; box-shadow: 0 12px 26px -12px rgba(37,211,102,.8); }
.btn-whatsapp:hover, .btn-whatsapp:focus { background: #1fbe5b; color: #fff; transform: translateY(-2px); }
.link-arrow { font-weight: 600; display: inline-flex; align-items: center; gap: .4rem; }
.link-arrow i { transition: transform .3s var(--pl-ease); }
.link-arrow:hover i { transform: translateX(4px); }

/* ---------- Header ---------- */
.pl-header {
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, background .3s;
}
.pl-header.is-scrolled { background: rgba(255,255,255,.9); border-bottom-color: var(--pl-line); box-shadow: 0 8px 30px -18px rgba(11,34,57,.25); }
.pl-header .navbar { padding: .8rem 0; }
.pl-header .navbar-brand img { height: 36px; width: auto; }
.pl-header .nav-link { color: #33475b; font-weight: 500; font-size: .95rem; padding: .5rem .85rem !important; border-radius: 10px; }
.pl-header .nav-link:hover, .pl-header .nav-link:focus, .pl-header .nav-link.active, .pl-header .nav-link.show { color: var(--pl-ink); background: var(--pl-bg-blue); }
.pl-header .dropdown-menu {
  border: 1px solid var(--pl-line); border-radius: 18px; box-shadow: var(--pl-shadow-lg);
  padding: .6rem; min-width: 320px; margin-top: .6rem !important;
}
.pl-header .dropdown-menu.mega { min-width: 560px; }
.menu-item { display: flex; gap: .85rem; align-items: flex-start; padding: .7rem .8rem; border-radius: 12px; color: var(--pl-ink); }
.menu-item:hover, .menu-item:focus { background: var(--pl-bg-soft); color: var(--pl-ink); }
.menu-item strong { display: block; font-weight: 600; font-size: .95rem; line-height: 1.3; }
.menu-item small { display: block; color: var(--pl-muted); font-size: .82rem; line-height: 1.4; }
.menu-item .mi-icon { flex: 0 0 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; }
.menu-label { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-muted); padding: .4rem .8rem .2rem; }
.navbar-toggler { border: 1px solid var(--pl-line-2); border-radius: 10px; padding: .45rem .6rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(52,152,200,.25); }
@media (max-width: 991.98px) {
  .pl-header .navbar-collapse { background: #fff; border: 1px solid var(--pl-line); border-radius: 18px; padding: .75rem; margin-top: .75rem; box-shadow: var(--pl-shadow); max-height: calc(100vh - 90px); overflow-y: auto; }
  .pl-header .dropdown-menu, .pl-header .dropdown-menu.mega { min-width: 0; box-shadow: none; border: 0; padding: 0 0 0 .5rem; }
}

/* colour-coded icon tiles */
.ic-blue { background: #e6f2fb; color: #1b6fa0; }
.ic-sky { background: #e4f6fd; color: #1692c7; }
.ic-gold { background: #fbf3dc; color: #a88520; }
.ic-green { background: #e2f7f0; color: #0c9a70; }
.ic-rose { background: #fdeaee; color: #cf4760; }
.ic-violet { background: #efeafd; color: #6a4fd1; }
.ic-orange { background: #fff0e3; color: #d9721d; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); isolation: isolate; }
.hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-bg::before {                       /* dotted grid that fades out */
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(27,111,160,.16) 1px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; animation: drift 18s ease-in-out infinite alternate; }
.blob-1 { width: 520px; height: 520px; background: #9fd8f5; top: -160px; right: -80px; }
.blob-2 { width: 420px; height: 420px; background: #f3e0a6; bottom: -160px; left: -120px; animation-delay: -6s; }
.blob-3 { width: 360px; height: 360px; background: #c8def8; top: 30%; left: 38%; opacity: .45; animation-delay: -12s; }
@keyframes drift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } 100% { transform: translate(30px, -20px) scale(.96); } }

.hero-badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .35rem .9rem .35rem .4rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); font-size: .88rem; color: var(--pl-ink); font-weight: 500;
}
.hero-badge .pill { background: var(--pl-grad); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; }
.hero h1 { font-size: clamp(2.4rem, 5.2vw, 4.1rem); margin: 1.4rem 0 1.3rem; letter-spacing: -.035em; }
.hero .lead-pl { max-width: 580px; }
.rotator { display: inline-flex; align-items: center; gap: .5rem; margin-top: .25rem; font-weight: 600; color: var(--pl-ink); }
.rotator .word { display: inline-block; min-width: 9ch; color: var(--pl-primary); transition: opacity .35s, transform .35s var(--pl-ease); }
.rotator .word.out { opacity: 0; transform: translateY(8px); }
.hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 2rem; font-size: .92rem; color: var(--pl-muted); }
.hero-meta i { color: var(--pl-green); margin-right: .35rem; }
.hero-checks { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; width: 100%; }
.price-chip {
  display: inline-flex; align-items: center; gap: .75rem; padding: .55rem .6rem .55rem 1rem; border-radius: 14px;
  background: #fff; border: 1px solid #efe2b8; box-shadow: 0 10px 24px -14px rgba(201,168,75,.6); color: var(--pl-ink); font-size: .95rem;
}
.price-chip del { color: var(--pl-muted); }
.price-chip strong { font-family: var(--pl-font-head); font-size: 1.15rem; }
.price-chip .tag { background: var(--pl-gold-soft); color: #8a6a12; font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .55rem; border-radius: 8px; }

.hero-visual { position: relative; perspective: 1600px; }
.hero-frame {
  position: relative; border-radius: 28px; padding: 10px; background: linear-gradient(145deg, #ffffff, #e7f1f9);
  box-shadow: var(--pl-shadow-lg); transform: rotateY(-8deg) rotateX(4deg); transform-style: preserve-3d;
  transition: transform .8s var(--pl-ease);
}
.hero-visual:hover .hero-frame { transform: rotateY(-2deg) rotateX(1deg); }
.hero-frame img { display: block; border-radius: 20px; width: 100%; }
.float-card {
  position: absolute; display: flex; align-items: center; gap: .7rem; padding: .7rem .95rem; border-radius: 16px;
  background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.9); box-shadow: var(--pl-shadow); font-size: .86rem; color: var(--pl-ink); line-height: 1.3;
  animation: floaty 6s ease-in-out infinite;
}
.float-card small { display: block; color: var(--pl-muted); font-size: .76rem; }
.float-card .fc-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 36px; }
.fc-1 { top: 8%; left: -6%; }
.fc-2 { bottom: 14%; left: -9%; animation-delay: -2s; }
.fc-3 { top: -5%; right: 6%; animation-delay: -4s; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (max-width: 991.98px) {
  .hero-frame { transform: none; }
  .fc-1 { left: 2%; top: -6%; } .fc-2 { left: 2%; bottom: -6%; } .fc-3 { display: none; }
}

/* ---------- Stats ---------- */
.stats { margin-top: clamp(40px, 6vw, 72px); }
.stat-card { text-align: center; padding: 1.4rem 1rem; border-radius: 18px; background: rgba(255,255,255,.75); border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); height: 100%; }
.stat-num { font-family: var(--pl-font-head); font-weight: 800; font-size: clamp(1.8rem, 3.2vw, 2.4rem); color: var(--pl-ink); line-height: 1; letter-spacing: -.02em; }
.stat-num .unit { color: var(--pl-primary-2); }
.stat-label { margin-top: .5rem; font-size: .9rem; color: var(--pl-muted); }

/* ---------- Before / after ---------- */
.ba-wrap { position: relative; }
.ba-card { height: 100%; border-radius: var(--pl-radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); transition: transform .5s var(--pl-ease), box-shadow .5s; }
.ba-card:hover { transform: translateY(-6px); box-shadow: var(--pl-shadow-lg); }
.ba-card .ba-img { position: relative; overflow: hidden; }
.ba-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.ba-card.old img { filter: grayscale(.55) contrast(.95); }
.ba-card .ba-tag { position: absolute; top: 16px; left: 16px; padding: .35rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ba-card.old .ba-tag { background: #fff; color: var(--pl-rose); }
.ba-card.new .ba-tag { background: var(--pl-green); color: #fff; }
.ba-card .body { padding: 1.75rem 1.9rem 2rem; }
.ba-card h3 { font-size: 1.35rem; margin-bottom: 1rem; }
.ba-card.new { border-color: #bfe9da; box-shadow: 0 30px 60px -30px rgba(15,181,132,.45); }
.vs-badge {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 3;
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  background: var(--pl-ink); color: #fff; font-family: var(--pl-font-head); font-weight: 800; letter-spacing: .02em;
  box-shadow: 0 0 0 8px #fff, var(--pl-shadow);
}
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { position: relative; padding-left: 2rem; margin-bottom: .7rem; color: var(--pl-body); }
.check-list li::before {
  font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f00c";
  position: absolute; left: 0; top: .2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .65rem; background: #dff5ee; color: var(--pl-green);
}
.check-list.cross li::before { content: "\f00d"; background: #fde8ec; color: var(--pl-rose); }

/* ---------- Steps ---------- */
.steps { position: relative; counter-reset: s; }
.steps::before {
  content: ""; position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 2px;
  background: linear-gradient(90deg, #cfe5f4, #3498c8, #c9a84b); opacity: .7;
}
.step { position: relative; text-align: center; padding: 0 .75rem; }
.step-num {
  width: 68px; height: 68px; margin: 0 auto 1.2rem; border-radius: 22px; display: grid; place-items: center; position: relative; z-index: 1;
  background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); font-size: 1.45rem; color: var(--pl-primary);
}
.step-num::after {
  counter-increment: s; content: counter(s); position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--pl-gold); color: #231a02; font: 800 .8rem/26px var(--pl-font-head); text-align: center;
}
.step h3 { font-size: 1.15rem; margin-bottom: .4rem; }
.step p { font-size: .96rem; margin: 0; }
@media (max-width: 767.98px) { .steps::before { display: none; } }
.showcase {
  margin-top: clamp(40px, 6vw, 64px); border-radius: var(--pl-radius-lg); padding: 12px;
  background: linear-gradient(145deg, #fff, #e8f2fa); border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-lg);
}
.showcase img { display: block; width: 100%; border-radius: 20px; }

/* ---------- App band ---------- */
.app-band {
  position: relative; overflow: hidden; border-radius: 36px; padding: clamp(32px, 6vw, 72px);
  background:
    radial-gradient(600px 320px at 100% 0%, rgba(92,194,239,.35), transparent 60%),
    radial-gradient(500px 300px at 0% 100%, rgba(201,168,75,.22), transparent 60%),
    linear-gradient(135deg, #0f3a5c 0%, #1b6fa0 60%, #2f8fc0 100%);
  color: #d6e9f5;
}
.app-band h2 { color: #fff; font-size: clamp(2rem, 3.8vw, 2.9rem); }
.app-band .eyebrow { background: rgba(255,255,255,.12); color: #fff; }
.app-band .lead-pl { color: #d6e9f5; }
.app-band .check-list li { color: #eaf5fb; }
.app-band .check-list li::before { background: rgba(255,255,255,.16); color: #7ff0c9; }
.app-band a.link-arrow { color: #fff; }
.app-band .device { border-radius: 22px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); border: 1px solid rgba(255,255,255,.18); }
.store-badges { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.store-badges img { height: 48px; width: auto; transition: transform .3s var(--pl-ease); }
.store-badges a:hover img { transform: translateY(-3px); }

/* ---------- Bento features ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.bento-card {
  position: relative; overflow: hidden; border-radius: 24px; padding: 1.75rem; background: #fff;
  border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); transition: transform .4s var(--pl-ease), box-shadow .4s, border-color .4s;
  --x: 50%; --y: 50%;
}
.bento-card::before {                      /* mouse-follow spotlight */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(360px circle at var(--x) var(--y), rgba(52,152,200,.12), transparent 60%);
}
.bento-card:hover { transform: translateY(-4px); box-shadow: var(--pl-shadow); border-color: var(--pl-line-2); }
.bento-card:hover::before { opacity: 1; }
.bento-card h3 { font-size: 1.2rem; margin: 1.1rem 0 .45rem; }
.bento-card p { margin: 0; font-size: .97rem; }
.bento-card .b-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; }
.b-span-2 { grid-column: span 2; }
.b-row-2 { grid-row: span 2; }
@media (max-width: 991.98px) { .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .bento { grid-template-columns: 1fr; } .b-span-2 { grid-column: auto; } .b-row-2 { grid-row: auto; } }

/* mini UI mockups inside bento cards (pure CSS, decorative) */
.mini-ui { margin-top: 1.5rem; border-radius: 16px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); padding: .9rem; }
.mini-row { display: flex; align-items: center; gap: .75rem; padding: .6rem .7rem; border-radius: 12px; background: #fff; box-shadow: var(--pl-shadow-sm); margin-bottom: .55rem; font-size: .86rem; color: var(--pl-ink); }
.mini-row:last-child { margin-bottom: 0; }
.mini-thumb { width: 36px; height: 36px; border-radius: 9px; flex: 0 0 36px; }
.mini-row .price { margin-left: auto; font-weight: 700; font-family: var(--pl-font-head); }
.toggle { width: 34px; height: 20px; border-radius: 999px; background: var(--pl-green); position: relative; flex: 0 0 34px; }
.toggle::after { content: ""; position: absolute; top: 3px; right: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.toggle.off { background: #cbd6df; } .toggle.off::after { right: auto; left: 3px; }
.mini-toast { display: flex; gap: .7rem; align-items: center; padding: .75rem .85rem; border-radius: 14px; background: #fff; box-shadow: var(--pl-shadow); font-size: .85rem; color: var(--pl-ink); animation: toastIn 4s var(--pl-ease) infinite; }
.mini-toast small { display: block; color: var(--pl-muted); }
@keyframes toastIn { 0%, 12% { opacity: 0; transform: translateY(10px); } 20%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.mini-pdf { display: flex; gap: .6rem; }
.mini-pdf .pg { flex: 1; aspect-ratio: 3 / 4; border-radius: 8px; background: #fff; box-shadow: var(--pl-shadow-sm); padding: 8px; display: grid; grid-template-rows: 55% auto auto; gap: 5px; }
.mini-pdf .pg i { display: block; border-radius: 5px; background: linear-gradient(135deg, #d8ebf7, #f3e7c4); }
.mini-pdf .pg:nth-child(2) i { background: linear-gradient(135deg, #e2f7f0, #bfe7f7); }
.mini-pdf .pg:nth-child(3) i { background: linear-gradient(135deg, #fdeaee, #f6e2b3); }
.mini-pdf .pg:nth-child(4) i { background: linear-gradient(135deg, #efeafd, #d3e9f8); }
.mini-pdf .pg b { display: block; height: 6px; border-radius: 3px; background: #dbe5ee; }
.mini-pdf .pg b + b { width: 60%; background: #c9a84b; opacity: .6; }

/* ---------- Industries ---------- */
.industry-card { position: relative; display: block; border-radius: 24px; overflow: hidden; aspect-ratio: 3 / 4; isolation: isolate; box-shadow: var(--pl-shadow); }
.industry-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--pl-ease); }
.industry-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(11,34,57,0) 45%, rgba(11,34,57,.85) 100%); }
.industry-card .caption { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 1.2rem; z-index: 2; color: #fff; }
.industry-card h3 { color: #fff; font-size: 1.2rem; margin: 0 0 .15rem; }
.industry-card span { color: #d7e7f2; font-size: .88rem; }
.industry-card .go { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--pl-ink); display: grid; place-items: center; transform: scale(.8); opacity: 0; transition: all .4s var(--pl-ease); }
.industry-card:hover img { transform: scale(1.06); }
.industry-card:hover .go { transform: none; opacity: 1; }
.chip-row { display: flex; flex-wrap: wrap; gap: .55rem; justify-content: center; margin-top: 2.25rem; }
.chip { padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--pl-line-2); background: #fff; color: var(--pl-ink); font-size: .92rem; font-weight: 500; }
a.chip:hover { border-color: var(--pl-primary-2); color: var(--pl-primary); box-shadow: var(--pl-shadow-sm); }
span.chip { color: var(--pl-muted); border-style: dashed; background: transparent; }

/* ---------- Client marquee (phone frames) ---------- */
.marquee { position: relative; overflow: hidden; padding: 12px 0 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 1.5rem; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - .75rem)); } }
.phone {
  flex: 0 0 auto; width: 220px; text-align: center; color: var(--pl-ink);
}
.phone .screen {
  display: block; position: relative; width: 220px; height: 400px; border-radius: 34px; padding: 9px; background: #0b2239;
  box-shadow: var(--pl-shadow); transition: transform .5s var(--pl-ease);
}
.phone .screen::before { content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 46px; height: 12px; border-radius: 10px; background: #0b2239; z-index: 2; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; display: block; background: #fff; }
.phone:hover .screen { transform: translateY(-8px) rotate(-1deg); }
.phone strong { display: block; margin-top: .9rem; font-size: .98rem; }
.phone small { color: var(--pl-muted); font-size: .84rem; }

/* ---------- Pricing ---------- */
.price-card { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 26px; padding: 2rem; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); transition: transform .4s var(--pl-ease), box-shadow .4s; }
.price-card:hover { transform: translateY(-6px); box-shadow: var(--pl-shadow); }
.price-card .plan { font-weight: 700; color: var(--pl-ink); font-size: 1.05rem; }
.price-card .plan-sub { color: var(--pl-muted); font-size: .9rem; }
.price-card .amount { font-family: var(--pl-font-head); font-size: 2.8rem; font-weight: 800; color: var(--pl-ink); line-height: 1; margin: 1.25rem 0 .3rem; letter-spacing: -.03em; }
.price-card .amount small { font-size: 1rem; font-weight: 500; color: var(--pl-muted); letter-spacing: 0; }
.price-card ul { margin: 1.5rem 0 1.75rem; }
.price-card .btn { margin-top: auto; }
.price-card.featured { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, conic-gradient(from var(--angle, 0deg), #1b6fa0, #5cc2ef, #c9a84b, #1b6fa0) border-box; box-shadow: var(--pl-shadow-lg); animation: spinBorder 6s linear infinite; }
@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes spinBorder { to { --angle: 360deg; } }
.price-card .ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: .35rem .9rem; border-radius: 999px; background: var(--pl-ink); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }

/* ---------- Kerala ---------- */
.kerala-panel {
  position: relative; overflow: hidden; border-radius: 36px; padding: clamp(32px, 6vw, 64px);
  background: linear-gradient(135deg, #fffaf0 0%, #fdf3da 45%, #eef6fb 100%); border: 1px solid #f1e5c3;
}
.kerala-panel::after { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; bottom: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(15,181,132,.18), transparent 65%); }
.hq-card { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.15rem; border-radius: 18px; background: #fff; box-shadow: var(--pl-shadow); margin-bottom: 1rem; position: relative; z-index: 1; }
.hq-card .pin { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--pl-gold); color: #231a02; font-size: 1.1rem; flex: 0 0 46px; }
.hq-card strong { display: block; color: var(--pl-ink); }
.hq-card small { color: var(--pl-muted); }
.city-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; position: relative; z-index: 1; }
.city-grid a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.8); border: 1px solid #efe4c6; color: var(--pl-ink); font-weight: 500; font-size: .95rem; transition: all .3s var(--pl-ease); }
.city-grid a i { color: var(--pl-gold); font-size: .85rem; transition: transform .3s var(--pl-ease); }
.city-grid a:hover { background: #fff; border-color: var(--pl-gold); box-shadow: var(--pl-shadow-sm); }
.city-grid a:hover i { transform: translateX(3px); }

/* ---------- Product family ---------- */
.product-card { height: 100%; padding: 1.75rem; border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); transition: transform .4s var(--pl-ease), box-shadow .4s; }
.product-card:hover { transform: translateY(-5px); box-shadow: var(--pl-shadow); }
.product-card .b-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1.1rem; }
.product-card h3 { font-size: 1.2rem; margin-bottom: .4rem; }

/* ---------- FAQ ---------- */
.faq .accordion {
  --bs-accordion-bg: #fff; --bs-accordion-border-color: var(--pl-line); --bs-accordion-color: var(--pl-body);
  --bs-accordion-btn-color: var(--pl-ink); --bs-accordion-active-color: var(--pl-ink); --bs-accordion-active-bg: #fff;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(52,152,200,.2);
}
.faq .accordion-item { border-radius: 16px !important; margin-bottom: .8rem; overflow: hidden; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.faq .accordion-button { font-family: var(--pl-font-head); font-weight: 700; font-size: 1.06rem; padding: 1.2rem 1.4rem; }
.faq .accordion-button:not(.collapsed) { box-shadow: none; color: var(--pl-primary); }
.faq .accordion-body { padding: 0 1.4rem 1.3rem; }

/* ---------- CTA ---------- */
.cta {
  position: relative; overflow: hidden; border-radius: 40px; padding: clamp(40px, 7vw, 88px) clamp(24px, 5vw, 64px); text-align: center; color: #e2f1fa;
  background:
    radial-gradient(700px 360px at 15% 0%, rgba(92,194,239,.55), transparent 60%),
    radial-gradient(600px 360px at 90% 100%, rgba(201,168,75,.45), transparent 60%),
    linear-gradient(135deg, #0f3a5c, #1b6fa0);
  box-shadow: var(--pl-shadow-lg);
}
.cta::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); }
.cta > * { position: relative; }
.cta h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.cta p { max-width: 640px; margin: 1.1rem auto 2.2rem; font-size: 1.12rem; }

/* ---------- Footer (navy) ---------- */
.pl-footer { background: var(--pl-navy); color: #a9c0d3; padding: 80px 0 28px; font-size: .95rem; margin-top: clamp(72px, 10vw, 128px); }
.pl-footer .brand img { height: 40px; width: auto; }
.pl-footer h2 { font-family: var(--pl-font-body); font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--pl-gold); margin-bottom: 1.15rem; }
.pl-footer ul { list-style: none; padding: 0; margin: 0; }
.pl-footer li { margin-bottom: .6rem; }
.pl-footer a { color: #c7d8e5; }
.pl-footer a:hover { color: #fff; }
.pl-footer address { font-style: normal; }
.pl-footer .social a { width: 40px; height: 40px; border-radius: 12px; display: inline-grid; place-items: center; border: 1px solid rgba(255,255,255,.14); margin-right: .4rem; }
.pl-footer .social a:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
.pl-footer .store-badges img { height: 42px; }
.pl-footer .parent-logo img { height: 30px; width: auto; }
.pl-footer .bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 52px; padding-top: 24px; color: #8aa3b8; font-size: .88rem; }

/* ---------- WhatsApp float ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--pl-whatsapp); color: #fff; font-size: 1.85rem; box-shadow: 0 14px 30px -8px rgba(37,211,102,.6); transition: transform .3s var(--pl-ease); }
.wa-float::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--pl-whatsapp); animation: ping 2.4s var(--pl-ease) infinite; }
.wa-float:hover { transform: scale(1.08); color: #fff; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--pl-ease), transform .9s var(--pl-ease); transition-delay: var(--d, 0s); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Focus & motion ---------- */
a:focus-visible, .btn:focus-visible, button:focus-visible { outline: 3px solid rgba(52,152,200,.55); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero-frame { transform: none; }
}
.b-span-full { grid-column: 1 / -1; }

/* ---------- Small-screen refinements ---------- */
@media (max-width: 575.98px) {
  .price-chip { flex-wrap: wrap; }
  .industry-card { aspect-ratio: 4 / 5; border-radius: 18px; }
  .industry-card .caption { left: .9rem; right: .9rem; bottom: .85rem; }
  .industry-card h3 { font-size: 1rem; }
  .industry-card span { font-size: .78rem; line-height: 1.35; display: block; }
  .city-grid { grid-template-columns: 1fr; }
  .phone { width: 180px; } .phone .screen { width: 180px; height: 330px; border-radius: 28px; } .phone img { border-radius: 21px; }
}

/* ---------- Client logo cloud ---------- */
.logo-cloud { padding: 8px 0 clamp(56px, 7vw, 88px); }
.logo-cloud-title { font-family: var(--pl-font-body); font-size: .85rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pl-muted); text-align: center; margin-bottom: 2rem; }
.logo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }
.logo-grid li {
  display: grid; place-items: center; height: 96px; padding: 1rem 1.25rem; border-radius: 16px;
  background: #fff; border: 1px solid var(--pl-line); transition: transform .35s var(--pl-ease), box-shadow .35s, border-color .35s;
}
.logo-grid img { max-height: 48px; width: auto; max-width: 100%; object-fit: contain; filter: grayscale(1) contrast(1.05); opacity: .7; transition: filter .35s, opacity .35s; }
.logo-grid li:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow); border-color: var(--pl-line-2); }
.logo-grid li:hover img { filter: none; opacity: 1; }
@media (max-width: 991.98px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .logo-grid li { height: 72px; padding: .6rem; } .logo-grid img { max-height: 34px; } }

/* ---------- Testimonials ---------- */
.quote-card {
  position: relative; height: 100%; margin: 0; padding: 2rem; border-radius: 24px; background: #fff;
  border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); display: flex; flex-direction: column;
  transition: transform .4s var(--pl-ease), box-shadow .4s;
}
.quote-card:hover { transform: translateY(-5px); box-shadow: var(--pl-shadow); }
.quote-card .stars { font-size: 1.6rem; line-height: 1; margin-bottom: 1.1rem; background: var(--pl-grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.quote-card blockquote { font-size: 1.08rem; line-height: 1.65; color: var(--pl-ink); margin: 0 0 1.75rem; flex-grow: 1; }
.quote-card figcaption { display: flex; align-items: center; gap: .85rem; padding-top: 1.25rem; border-top: 1px solid var(--pl-line); }
.quote-card .avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-family: var(--pl-font-head); font-weight: 800; font-size: .95rem; flex: 0 0 46px; }
.quote-card strong { display: block; color: var(--pl-ink); line-height: 1.3; }
.quote-card small { color: var(--pl-muted); font-size: .88rem; }
.logo-grid li.sq img { max-height: 62px; } @media (max-width: 575.98px) { .logo-grid li.sq img { max-height: 44px; } }

/* ---------- Anywhere in India panel ---------- */
.india-panel {
  position: relative; overflow: hidden; border-radius: 36px; padding: clamp(32px, 6vw, 64px);
  background: linear-gradient(135deg, #eef6fc 0%, #ffffff 50%, #fdf6e3 100%); border: 1px solid var(--pl-line);
}
.india-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(27,111,160,.14) 1px, transparent 1.2px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 85% 50%, #000, transparent 70%); mask-image: radial-gradient(ellipse 60% 70% at 85% 50%, #000, transparent 70%);
}
.india-panel > * { position: relative; }
.journey { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; counter-reset: j; }
.journey li { position: relative; display: flex; gap: .9rem; align-items: flex-start; padding: 1.2rem; border-radius: 18px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.journey li::after { counter-increment: j; content: "0" counter(j); position: absolute; top: .9rem; right: 1rem; font: 800 .8rem var(--pl-font-head); color: var(--pl-line-2); letter-spacing: .05em; }
.journey .j-icon { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.05rem; }
.journey strong { display: block; color: var(--pl-ink); margin-bottom: .15rem; }
.journey small { display: block; color: var(--pl-body); font-size: .9rem; line-height: 1.5; }
@media (max-width: 575.98px) { .journey { grid-template-columns: 1fr; } }

/* ==========================================================================
   Inner pages (solution / industry / compare templates)
   ========================================================================== */
.page-hero { padding-top: clamp(28px, 4vw, 48px); padding-bottom: clamp(48px, 6vw, 80px); }
.page-hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); }
.breadcrumb-pl { --bs-breadcrumb-divider-color: var(--pl-muted); --bs-breadcrumb-item-active-color: var(--pl-muted); font-size: .9rem; margin: 0; }
.breadcrumb-pl a { color: var(--pl-primary); font-weight: 500; }

/* Key-facts strip (quotable facts for people and AI assistants) */
.facts-strip { padding: clamp(28px, 3.5vw, 44px) 0 clamp(48px, 6vw, 80px); }
.facts { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; margin: 0; }
.fact { padding: 1.1rem 1.2rem; border-radius: 16px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.fact dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--pl-muted); margin-bottom: .35rem; }
.fact dd { margin: 0; font-family: var(--pl-font-head); font-weight: 700; color: var(--pl-ink); font-size: 1.02rem; line-height: 1.3; }
.fact dd small { display: block; font-family: var(--pl-font-body); font-weight: 500; font-size: .8rem; color: var(--pl-muted); margin-top: .2rem; }
@media (max-width: 1199.98px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .fact { padding: .9rem; } }

/* Larger plans row under pricing cards */
.bigger-plans { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 20px; background: #fff; border: 1px dashed var(--pl-line-2); color: var(--pl-body); }
.bigger-plans strong { color: var(--pl-ink); }
.bigger-plans > div { flex: 1 1 480px; }

/* Comparison table */
.table-card { border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); overflow-x: auto; }
.compare-table { --bs-table-bg: transparent; min-width: 560px; }
.compare-table th, .compare-table td { padding: 1rem 1.25rem; vertical-align: middle; border-color: var(--pl-line); }
.compare-table thead th { font-family: var(--pl-font-head); color: var(--pl-ink); font-size: 1rem; background: var(--pl-bg-soft); }
.compare-table tbody th { font-weight: 600; color: var(--pl-ink); }
.compare-table td { color: var(--pl-body); }
.compare-table .is-us { background: rgba(52,152,200,.06); color: var(--pl-ink); font-weight: 600; }
.compare-table thead .is-us { background: var(--pl-grad); color: #fff; }
.compare-table .yes { color: var(--pl-green); margin-right: .35rem; }
.compare-table .no { color: var(--pl-rose); margin-right: .35rem; }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }

/* Static grid of phone frames */
.phone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; justify-items: center; }
.phone-grid .phone small { display: block; }
@media (max-width: 991.98px) { .phone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Feature spotlights: custom pages + payments ---------- */
.spot-title { font-size: clamp(2rem, 3.8vw, 2.9rem); margin: 1rem 0 1.1rem; }
.spot-tag { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .85rem; border-radius: 999px; background: var(--pl-gold-soft); color: #8a6a12; font-size: .8rem; font-weight: 700; }
.app-band .spot-tag { background: rgba(201,168,75,.2); color: #f3dc9c; }
.idea-chips { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.5rem 0 0; padding: 0; }
.idea-chips li { padding: .45rem .9rem; border-radius: 999px; background: #fff; border: 1px solid var(--pl-line-2); font-size: .88rem; font-weight: 600; color: var(--pl-ink); }
.idea-chips li i { color: var(--pl-primary-2); margin-right: .4rem; }

.ui-stage { position: relative; padding: clamp(20px, 3.4vw, 40px); border-radius: 32px; border: 1px solid var(--pl-line);
  background: radial-gradient(420px 260px at 92% 0%, rgba(92,194,239,.3), transparent 60%), radial-gradient(380px 240px at 0% 100%, rgba(201,168,75,.22), transparent 60%), var(--pl-bg-blue); }
.ui-window { border-radius: 18px; background: #fff; box-shadow: var(--pl-shadow-lg); overflow: hidden; }
.ui-bar { display: flex; align-items: center; gap: .4rem; padding: .7rem .9rem; background: #f3f7fb; border-bottom: 1px solid var(--pl-line); }
.ui-bar i { width: 10px; height: 10px; border-radius: 50%; background: #f0b6be; flex: 0 0 10px; }
.ui-bar i:nth-child(2) { background: #f3d991; } .ui-bar i:nth-child(3) { background: #a8e3c8; }
.ui-bar span { margin-left: .5rem; flex: 1; min-width: 0; padding: .28rem .8rem; border-radius: 8px; background: #fff; border: 1px solid var(--pl-line); font-size: .76rem; color: var(--pl-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-body { padding: 1rem 1.1rem 5.5rem; }
.ui-nav { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; font-size: .78rem; color: var(--pl-muted); padding-bottom: .75rem; border-bottom: 1px solid var(--pl-line); }
.ui-nav b { font-family: var(--pl-font-head); color: var(--pl-ink); font-size: .92rem; margin-right: auto; }
.ui-nav .on { color: var(--pl-primary); font-weight: 700; }
.ui-banner { margin-top: 1rem; border-radius: 14px; padding: 1.1rem 1.2rem; background: linear-gradient(135deg, #0f3a5c, #1b6fa0 60%, #3498c8); color: #d6e9f5; }
.ui-banner strong { display: block; font-family: var(--pl-font-head); color: #fff; font-size: 1.1rem; margin-bottom: .2rem; }
.ui-banner small { font-size: .78rem; }
.ui-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.ui-cards span { display: grid; gap: .35rem; padding: .6rem; border-radius: 10px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); }
.ui-cards i { display: block; width: 26px; height: 26px; border-radius: 8px; background: #e6f2fb; }
.ui-cards b { display: block; height: 6px; border-radius: 3px; background: #dbe5ee; }
.ui-cards b + b { width: 65%; }
.ui-panel { position: relative; width: min(300px, 86%); margin: -4.6rem -.5rem 0 auto; padding: .9rem; border-radius: 18px; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-lg); }
.ui-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.ui-panel-head strong { font-family: var(--pl-font-head); color: var(--pl-ink); font-size: .95rem; }
.ui-add { padding: .3rem .65rem; border-radius: 8px; background: var(--pl-grad); color: #fff; font-weight: 700; font-size: .74rem; }
.ui-panel .mini-row { margin-bottom: .45rem; padding: .5rem .65rem; gap: .6rem; }
.ui-panel .mini-row > i { width: 16px; text-align: center; color: var(--pl-primary-2); }
.ui-panel .mini-row .toggle { margin-left: auto; }
.ui-panel .mini-row.is-new { background: #f2fcf8; box-shadow: 0 0 0 2px rgba(15,181,132,.35); }
.ui-panel .mini-row em { font-style: normal; font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #0c9a70; background: #e2f7f0; padding: .12rem .4rem; border-radius: 6px; }

.partner-badge { display: inline-flex; align-items: center; gap: .75rem; padding: .55rem 1.1rem .55rem .55rem; border-radius: 14px; margin-bottom: 1.25rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); }
.partner-badge .pb-icon { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: grid; place-items: center; background: #fff; color: var(--pl-primary); font-size: 1.05rem; }
.partner-badge strong { display: block; color: #fff; font-size: .98rem; line-height: 1.25; }
.partner-badge small { display: block; color: #bcd8ea; font-size: .8rem; }

.checkout { position: relative; max-width: 390px; margin: 1.5rem auto 0; padding: 1.25rem; border-radius: 22px; background: #fff; color: var(--pl-body); box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); }
.co-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.co-head strong { font-family: var(--pl-font-head); color: var(--pl-ink); font-size: 1.08rem; }
.co-head small { color: var(--pl-muted); font-size: .8rem; }
.checkout .mini-row small { display: block; color: var(--pl-muted); font-size: .74rem; }
.co-line, .co-total { display: flex; justify-content: space-between; align-items: baseline; padding: .45rem .2rem; font-size: .86rem; }
.co-line { margin-top: .3rem; border-top: 1px dashed var(--pl-line-2); }
.co-total { color: var(--pl-ink); font-size: .98rem; }
.co-total strong { font-family: var(--pl-font-head); font-size: 1.3rem; }
.co-methods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; margin: .7rem 0 .8rem; }
.co-methods span { text-align: center; padding: .55rem .2rem; border-radius: 10px; border: 1px solid var(--pl-line-2); font-size: .68rem; font-weight: 700; color: var(--pl-ink); line-height: 1.2; }
.co-methods span i { display: block; margin-bottom: .3rem; font-size: 1rem; color: var(--pl-primary); }
.co-methods span.on { border-color: var(--pl-primary-2); background: #eef7fd; box-shadow: 0 0 0 1px var(--pl-primary-2); }
.co-pay { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem; border-radius: 12px; background: var(--pl-grad); color: #fff; font-weight: 700; }
.co-secure { display: block; margin-top: .65rem; text-align: center; font-size: .76rem; color: var(--pl-muted); }
.pay-toast { position: absolute; top: -2.1rem; right: -2.6rem; z-index: 2; animation-duration: 5s; border: 1px solid #bfe9da; box-shadow: 0 22px 44px -14px rgba(0,0,0,.5); }
.pay-toast .fc-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; }
.pay-toast strong { display: block; line-height: 1.2; }
@media (max-width: 575.98px) { .pay-toast { right: -.4rem; top: -1.9rem; } .ui-panel { width: 92%; margin-right: 0; } .ui-body { padding-bottom: 6rem; } }

/* ---------- Grouped feature lists ---------- */
.feature-group { height: 100%; padding: clamp(1.25rem, 2.4vw, 1.9rem); border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.fg-head { display: flex; align-items: center; gap: .95rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--pl-line); }
.fg-head .b-icon { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.25rem; }
.fg-head h3 { font-size: 1.28rem; margin: 0; }
.fg-head small { display: block; margin-top: .15rem; color: var(--pl-muted); font-size: .9rem; }
.fg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.fg-list li { display: flex; gap: .85rem; align-items: flex-start; padding: .7rem .75rem; border-radius: 14px; transition: background .25s var(--pl-ease); }
.fg-list li:hover { background: var(--pl-bg-soft); }
.fg-list li.star { background: linear-gradient(90deg, #eaf5fc, rgba(234,245,252,0)); }
.fg-ic { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; background: var(--pl-bg-soft); color: var(--pl-primary); font-size: .92rem; }
.fg-list li.star .fg-ic { background: var(--pl-grad); color: #fff; }
.fg-list strong { display: block; color: var(--pl-ink); font-size: 1rem; line-height: 1.35; }
.fg-list strong a { color: var(--pl-ink); text-decoration: underline; text-decoration-color: var(--pl-primary-2); text-underline-offset: 3px; }
.fg-list li > div > span { display: block; margin-top: .1rem; font-size: .92rem; line-height: 1.5; color: var(--pl-body); }
.tier { display: inline-block; margin-left: .3rem; padding: .12rem .45rem; border-radius: 6px; background: var(--pl-gold-soft); color: #8a6a12; font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .02em; vertical-align: .12em; white-space: nowrap; }

/* pricing: "Everything in X, plus:" */
.price-card .plus { margin: 1.4rem 0 0; font-size: .85rem; font-weight: 700; color: var(--pl-primary); }
.price-card .plus + ul { margin-top: .8rem; }

/* ---------- Mobile admin app page ---------- */
.app-get { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-top: 2rem; }
.app-icon { width: 64px; height: 64px; border-radius: 16px; background: #fff; box-shadow: var(--pl-shadow); border: 1px solid var(--pl-line); padding: 6px; }
.app-phone { position: relative; width: 300px; max-width: 100%; margin: 0 auto; padding: 11px; border-radius: 46px; background: linear-gradient(160deg, #1b3550, #0b2239); box-shadow: var(--pl-shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08); }
.app-phone::before { content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 70px; height: 18px; border-radius: 12px; background: #0b2239; z-index: 2; }
.app-screen { border-radius: 36px; overflow: hidden; background: #f4f7fa; min-height: 540px; color: var(--pl-ink); font-size: .8rem; }
.app-status { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1.4rem .35rem; font-size: .68rem; font-weight: 700; background: #fff; }
.app-status i { font-size: .62rem; margin-left: .15rem; }
.app-top { display: flex; align-items: center; gap: .6rem; padding: .55rem 1rem .75rem; background: #fff; border-bottom: 1px solid var(--pl-line); }
.app-top img { width: 24px; height: 24px; }
.app-top strong { flex: 1; font-family: var(--pl-font-head); font-size: .95rem; }
.app-top .bell { position: relative; }
.app-top .bell::after { content: ""; position: absolute; top: -2px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: #f2545b; border: 2px solid #fff; }
.app-body { display: grid; gap: .6rem; padding: .8rem; }
.app-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.app-tile { position: relative; padding: .75rem; border-radius: 14px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.app-tile.wide { display: flex; align-items: center; gap: .75rem; }
.app-tile strong { display: block; margin-top: .5rem; font-size: .84rem; }
.app-tile.wide strong { margin-top: 0; }
.app-tile small { display: block; color: var(--pl-muted); font-size: .66rem; }
.app-ico { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; font-size: .88rem; }
.app-count { position: absolute; top: .8rem; right: .7rem; padding: .1rem .5rem; border-radius: 999px; background: #f2545b; color: #fff; font-size: .66rem; font-weight: 700; }
.app-tile.wide .app-count { position: static; margin-left: auto; }
.app-menu { list-style: none; margin: 0; padding: .5rem .6rem 1rem; background: #fff; min-height: 500px; }
.app-menu li { display: flex; align-items: center; gap: .75rem; padding: .55rem .5rem; border-radius: 12px; font-size: .82rem; font-weight: 500; }
.app-menu li > i { margin-left: auto; font-size: .65rem; color: var(--pl-muted); }
.app-menu li.sep { margin-top: .55rem; border-top: 1px solid var(--pl-line); padding-top: 1rem; border-radius: 0 0 12px 12px; }
.app-menu li.on { background: #eef7fd; box-shadow: inset 0 0 0 1px #cfe6f5; }
.app-phone-sm { width: 280px; }
.ui-stage .app-phone { margin-top: .5rem; margin-bottom: .5rem; }
.set-toast { position: absolute; right: clamp(8px, 4%, 40px); bottom: 12%; z-index: 3; border: 1px solid #bfe9da; animation-duration: 5s; }
.set-toast .fc-icon, .hv-app .fc-icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px; display: grid; place-items: center; }
.set-toast strong { display: block; line-height: 1.2; }
.hv-app { padding: 10px 0; }
.hv-app .fc-a { top: 16%; left: 2%; }
.hv-app .fc-b { bottom: 14%; right: 0; animation-delay: -3s; }
@media (max-width: 991.98px) { .hv-app .fc-a { top: 6%; left: 0; } .hv-app .fc-b { bottom: 6%; right: 0; left: auto; } }
@media (max-width: 575.98px) { .app-phone { width: 270px; } .app-screen { min-height: 500px; } .set-toast { right: 4px; bottom: 6%; } .hv-app .float-card { font-size: .78rem; padding: .55rem .7rem; } }
.app-phone-sm .app-screen { background: #fff; }
@media (max-width: 575.98px) { .app-get .app-icon { display: none; } .app-get { margin-top: 1.6rem; } }

/* ---------- Industry pages ---------- */
.hero-portrait { position: relative; border-radius: 28px; overflow: hidden; box-shadow: var(--pl-shadow-lg); border: 6px solid #fff; aspect-ratio: 4 / 5; max-width: 460px; margin: 0 auto; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.hv-portrait .fc-a { top: 12%; left: -4%; }
.hv-portrait .fc-b { bottom: 10%; right: -4%; animation-delay: -3s; }
.hv-portrait .fc-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; }
@media (max-width: 991.98px) { .hero-portrait { max-width: 420px; aspect-ratio: 1 / 1; } .hv-portrait .fc-a { left: 0; top: 6%; } .hv-portrait .fc-b { right: 0; left: auto; bottom: 6%; } }
@media (max-width: 575.98px) { .hv-portrait .float-card { font-size: .78rem; padding: .55rem .7rem; } }

.b2b-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.b2b-card { border-radius: 18px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); overflow: hidden; display: flex; flex-direction: column; }
.b2b-img { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; font-size: 2.6rem; color: rgba(11,34,57,.55); }
.b2b-tag { position: absolute; top: .6rem; left: .6rem; padding: .2rem .55rem; border-radius: 999px; background: #fff; color: #0c9a70; font-size: .68rem; font-weight: 700; box-shadow: var(--pl-shadow-sm); }
.b2b-body { display: flex; flex-direction: column; gap: .35rem; padding: .95rem 1rem 1rem; flex: 1; }
.b2b-cat { color: var(--pl-muted); font-size: .72rem; }
.b2b-body > strong { color: var(--pl-ink); font-size: .95rem; line-height: 1.3; }
.b2b-price { font-family: var(--pl-font-head); font-weight: 800; font-size: 1.35rem; color: var(--pl-ink); }
.b2b-price small { font-family: var(--pl-font-body); font-weight: 500; font-size: .78rem; color: var(--pl-muted); }
.b2b-por { display: inline-flex; align-items: center; gap: .4rem; align-self: flex-start; margin: .2rem 0 .1rem; padding: .35rem .7rem; border-radius: 10px; background: var(--pl-gold-soft); color: #8a6a12; font-weight: 700; font-size: .85rem; }
.b2b-rules { list-style: none; margin: .2rem 0 .5rem; padding: .6rem .7rem; border-radius: 12px; background: var(--pl-bg-soft); display: grid; gap: .35rem; font-size: .78rem; color: var(--pl-ink); }
.b2b-rules i { width: 16px; margin-right: .45rem; color: var(--pl-primary-2); text-align: center; }
.b2b-btn { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem; border-radius: 10px; border: 1px solid var(--pl-line-2); font-weight: 700; font-size: .82rem; color: var(--pl-ink); }
.b2b-btn.wa { background: var(--pl-whatsapp); border-color: var(--pl-whatsapp); color: #fff; }
@media (max-width: 575.98px) { .b2b-demo { gap: .6rem; } .b2b-body { padding: .75rem; } .b2b-body > strong { font-size: .85rem; } .b2b-price { font-size: 1.1rem; } .b2b-rules { font-size: .7rem; padding: .5rem; } .b2b-btn { font-size: .72rem; padding: .5rem .3rem; } .b2b-por { font-size: .74rem; padding: .3rem .5rem; } }

.compare-table.cols-4 { min-width: 760px; }
.compare-table.cols-4 th[scope="col"]:not(:first-child) { width: 26%; }

.plan-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.plan-pill { padding: 1.25rem 1rem; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); text-align: center; }
.plan-pill span { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); }
.plan-pill strong { display: block; margin: .35rem 0 .15rem; font-family: var(--pl-font-head); font-size: 1.7rem; font-weight: 800; color: var(--pl-ink); }
.plan-pill small { color: var(--pl-body); font-size: .85rem; }
.plan-pill.hl { border: 2px solid var(--pl-primary-2); box-shadow: var(--pl-shadow); }
@media (max-width: 991.98px) { .plan-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .plan-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .plan-pill strong { font-size: 1.35rem; } }
@media (max-width: 575.98px) { #trade-terms .ui-stage { padding: 12px; border-radius: 24px; } .b2b-img { aspect-ratio: 16 / 10; font-size: 2rem; } .b2b-btn i { display: none; } .b2b-rules i { margin-right: .3rem; } }

/* ---------- Manufacturers page ---------- */
.hv-product { padding: 18px 0; }
.hv-product .ui-window { box-shadow: var(--pl-shadow-lg); }
.hv-product .fc-a { top: -2%; right: -3%; }
.hv-product .fc-b { top: 48%; bottom: auto; left: -5%; animation-delay: -3s; }
.hv-product .fc-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; }
.prod-body { padding: 1.1rem; }
.prod-grid { display: grid; grid-template-columns: 42% 1fr; gap: 1.1rem; align-items: start; }
.prod-img { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; display: grid; place-items: center; font-size: 3.2rem; color: rgba(11,34,57,.45);
  background: linear-gradient(160deg, #e6f2fb, #f6ecd2); }
.prod-info { display: flex; flex-direction: column; gap: .4rem; }
.prod-info > strong { color: var(--pl-ink); font-family: var(--pl-font-head); font-size: 1.05rem; line-height: 1.3; }
.spec-table { width: 100%; margin-top: .3rem; border-collapse: collapse; font-size: .8rem; }
.spec-table th, .spec-table td { padding: .42rem .5rem; border-bottom: 1px solid var(--pl-line); text-align: left; vertical-align: top; }
.spec-table th { color: var(--pl-muted); font-weight: 600; width: 42%; }
.spec-table td { color: var(--pl-ink); font-weight: 600; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.prod-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1rem; }
.prod-btns .b2b-btn { margin-top: 0; }
@media (max-width: 991.98px) { .hv-product .fc-a { right: 0; top: -4%; } .hv-product .fc-b { left: 0; top: 34%; bottom: auto; } }
@media (max-width: 575.98px) {
  .prod-grid { grid-template-columns: 1fr; } .prod-img { aspect-ratio: 16 / 9; font-size: 2.4rem; }
  .prod-btns { grid-template-columns: 1fr; } .hv-product .float-card { font-size: .78rem; padding: .55rem .7rem; }
}

.pain-card { height: 100%; padding: 1.6rem; border-radius: 22px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.pain-card .b-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 1rem; }
.pain-card h3 { font-size: 1.12rem; margin-bottom: .45rem; }
.pain-card p { margin: 0; font-size: .95rem; }

.dealer-body { padding-bottom: 1.2rem; }
.dealer-title { margin: 1rem 0 .7rem; font-size: 1rem; }
.dealer-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.dealer-list li { display: flex; align-items: center; gap: .65rem; padding: .65rem .75rem; border-radius: 12px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); font-size: .82rem; }
.dealer-list li > i:first-child { color: var(--pl-gold); }
.dealer-list li > i:last-child { margin-left: auto; color: var(--pl-primary-2); font-size: .75rem; }
.dealer-list strong { display: block; color: var(--pl-ink); line-height: 1.2; }
.dealer-list small { color: var(--pl-muted); font-size: .72rem; }
@media (max-width: 575.98px) { .dealer-list { grid-template-columns: 1fr; } }

/* ---------- Comparison pages ---------- */
.verdict-card { padding: 1.5rem; border-radius: 26px; background: rgba(255,255,255,.92); border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-lg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.verdict-title { font-size: 1.05rem; letter-spacing: .02em; margin: 0 0 1rem; color: var(--pl-ink); }
.verdict-title i { color: var(--pl-gold); margin-right: .3rem; }
.verdict-block { padding: 1.1rem 1.15rem .6rem; border-radius: 18px; }
.verdict-block + .verdict-block { margin-top: .8rem; }
.verdict-block h3 { font-size: 1rem; margin-bottom: .8rem; }
.verdict-block .check-list li { font-size: .93rem; margin-bottom: .55rem; }
.verdict-block.wa { background: #eefbf3; border: 1px solid #cdeedb; }
.verdict-block.wa h3 i { color: var(--pl-whatsapp); }
.verdict-block.web { background: #eef6fc; border: 1px solid #d3e6f4; }
.verdict-block.web h3 i { color: var(--pl-primary); }
.sources-box { padding: 1.5rem 1.75rem; border-radius: 20px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); font-size: .92rem; }
.sources-box h2 { font-size: 1.05rem; margin-bottom: .5rem; }
.sources-box p { margin-bottom: .75rem; color: var(--pl-muted); }
.sources-box ul { margin: 0; padding-left: 1.1rem; }
.sources-box li { margin-bottom: .45rem; }

/* Comparison tables become stacked cards on phones, so every column stays visible */
@media (max-width: 575.98px) {
  .compare-table.stack-sm, .compare-table.stack-sm.cols-4 { min-width: 0; }
  .compare-table.stack-sm thead { display: none; }
  .compare-table.stack-sm, .compare-table.stack-sm tbody, .compare-table.stack-sm tr,
  .compare-table.stack-sm th, .compare-table.stack-sm td { display: block; width: 100%; }
  .compare-table.stack-sm tr { padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--pl-line); }
  .compare-table.stack-sm tbody tr:last-child { border-bottom: 0; }
  .compare-table.stack-sm th[scope="row"] { padding: 0 0 .55rem; border: 0; font-size: 1rem; }
  .compare-table.stack-sm td { padding: .5rem .75rem; border: 0; border-radius: 10px; font-size: .92rem; }
  .compare-table.stack-sm td + td { margin-top: .35rem; }
  .compare-table.stack-sm td:not(.is-us) { background: var(--pl-bg-soft); }
  .compare-table.stack-sm td::before { content: attr(data-label); display: block; margin-bottom: .15rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-muted); }
  .compare-table.stack-sm td.is-us { background: rgba(52,152,200,.09); box-shadow: inset 3px 0 0 var(--pl-primary-2); }
  .compare-table.stack-sm td.is-us::before { color: var(--pl-primary); }
}

/* ---------- Cars page ---------- */
.hero-frame-dark { background: #0b1522; }
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.kb-col { padding: .7rem; border-radius: 16px; background: rgba(255,255,255,.75); border: 1px solid var(--pl-line); min-height: 250px; }
.kb-head { display: flex; align-items: center; gap: .45rem; margin-bottom: .65rem; font-size: .78rem; font-weight: 700; color: var(--pl-ink); }
.kb-head .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.kb-head em { margin-left: auto; font-style: normal; font-size: .68rem; color: var(--pl-muted); background: var(--pl-bg-soft); border-radius: 999px; padding: .05rem .45rem; }
.kb-card { display: flex; flex-direction: column; gap: .1rem; padding: .65rem .7rem; margin-bottom: .55rem; border-radius: 12px; background: #fff; box-shadow: var(--pl-shadow-sm); border: 1px solid var(--pl-line); }
.kb-card strong { font-size: .84rem; color: var(--pl-ink); }
.kb-card small { font-size: .72rem; color: var(--pl-muted); }
.kb-tag { align-self: flex-start; margin-top: .35rem; padding: .12rem .45rem; border-radius: 6px; background: #eef6fc; color: var(--pl-primary); font-size: .66rem; font-weight: 700; }
.kb-tag i { margin-right: .25rem; }
.kb-tag.warn { background: var(--pl-gold-soft); color: #8a6a12; }
.kb-tag.ok { background: #e2f7f0; color: #0c9a70; }
.kb-card.done { opacity: .85; }
@media (max-width: 767.98px) { .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kb-col { min-height: 0; } }
.phone-grid.five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1199.98px) { .phone-grid.five { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .phone-grid.five { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Cafe page ---------- */
.hv-cafe { padding: 16px 0; max-width: 460px; margin: 0 auto; }
.hv-cafe .ui-window { box-shadow: var(--pl-shadow-lg); }
.hv-cafe .shot { aspect-ratio: 4 / 5; overflow: hidden; }
.hv-cafe .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.hv-cafe .fc-a { top: 18%; left: -12%; }
.hv-cafe .fc-b { bottom: 12%; right: -10%; animation-delay: -3s; }
.hv-cafe .fc-icon { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; display: grid; place-items: center; }
@media (max-width: 991.98px) { .hv-cafe .fc-a { left: 0; top: 10%; } .hv-cafe .fc-b { right: 0; bottom: 6%; } }

.flow-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-top: .5rem; }
.fl-card { position: relative; padding: 2.2rem 1rem 1rem; border-radius: 22px; background: var(--pl-bg-blue); border: 1px solid var(--pl-line); }
.fl-card:not(:last-child)::after { content: "\f054"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: -0.95rem; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; background: #fff; color: var(--pl-primary); box-shadow: var(--pl-shadow-sm); }
.fl-step { position: absolute; top: .75rem; left: 1rem; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-primary); }
.fl-qr, .fl-kot, .fl-bill { border-radius: 14px; background: #fff; box-shadow: var(--pl-shadow-sm); padding: .8rem; font-size: .78rem; color: var(--pl-ink); }
.fl-qr-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .6rem; margin-bottom: .4rem; border-bottom: 1px solid var(--pl-line); }
.fl-qr-head > i { font-size: 1.4rem; color: var(--pl-ink); }
.fl-qr-head strong { display: block; font-size: .85rem; }
.fl-qr-head small { color: var(--pl-muted); font-size: .7rem; }
.fl-item { display: flex; align-items: center; gap: .4rem; padding: .35rem 0; }
.fl-item span { flex: 1; }
.fl-item b { font-weight: 700; }
.fl-item i { width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: .55rem; background: #e2f7f0; color: #0c9a70; }
.fl-btn { margin-top: .5rem; padding: .5rem; border-radius: 10px; text-align: center; background: var(--pl-grad); color: #fff; font-weight: 700; font-size: .75rem; }
.fl-kot { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: #fffdf6; border: 1px dashed #e5d9b0; }
.fl-kot strong { display: block; font-size: .9rem; }
.fl-kot small { color: var(--pl-muted); font-size: .68rem; }
.fl-kot hr { margin: .45rem 0; border-top: 1px dashed #cbbd8f; opacity: 1; }
.fl-kot p { margin: 0 0 .25rem; font-size: .76rem; }
.fl-kot em { display: block; font-style: normal; color: #b0561b; font-size: .68rem; padding-left: 1.4rem; }
.fl-kds { display: grid; gap: .45rem; padding: .7rem; border-radius: 14px; background: #0f2134; box-shadow: var(--pl-shadow); }
.kds-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .1rem .6rem; padding: .55rem .65rem; border-radius: 10px; background: rgba(255,255,255,.07); border-left: 3px solid #3ecf9a; color: #e6f0f8; }
.kds-tile strong { font-size: .9rem; grid-row: span 2; }
.kds-tile small { font-size: .68rem; color: #a9bfd2; }
.kds-tile em { grid-row: span 2; grid-column: 3; font-style: normal; font-size: .72rem; font-weight: 700; color: #3ecf9a; }
.kds-tile.warn { border-left-color: #e8b64c; } .kds-tile.warn em { color: #e8b64c; }
.kds-tile.late { border-left-color: #ef6b7c; } .kds-tile.late em { color: #ef6b7c; }
.fl-bill strong { display: block; margin-bottom: .45rem; font-size: .85rem; }
.fl-bill div { display: flex; justify-content: space-between; padding: .22rem 0; font-size: .76rem; color: var(--pl-body); }
.fl-bill div.tot { margin-top: .25rem; padding-top: .45rem; border-top: 1px solid var(--pl-line); font-weight: 800; color: var(--pl-ink); font-size: .85rem; }
.fl-bill small { display: block; margin-top: .45rem; color: var(--pl-muted); font-size: .68rem; }
@media (max-width: 991.98px) { .flow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fl-card:nth-child(2)::after { display: none; } }
@media (max-width: 575.98px) { .flow-grid { grid-template-columns: 1fr; } .fl-card::after { display: none !important; } }

.no-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.no-list li { display: flex; gap: .8rem; align-items: flex-start; padding: 1rem 1.1rem; border-radius: 16px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); color: var(--pl-body); }
.no-list i { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #e2f7f0; color: #0c9a70; }
.no-list strong { color: var(--pl-ink); }

/* ===== eCom page ===== */
.partner-badge.light { background: #fff; border-color: var(--pl-line-2); box-shadow: var(--pl-shadow-sm); }
.partner-badge.light .pb-icon { background: #eef7fd; }
.partner-badge.light strong { color: var(--pl-ink); }
.partner-badge.light small { color: var(--pl-muted); }
.variant-demo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.vd-product, .vd-cart { border-radius: 18px; background: #fff; box-shadow: var(--pl-shadow-lg); padding: 1rem; }
.vd-product { display: flex; flex-direction: column; gap: .8rem; }
.vd-img { aspect-ratio: 4 / 3; border-radius: 14px; display: grid; place-items: center; font-size: 3rem; color: #1b6fa0; background: linear-gradient(135deg, #e7f3fb, #f7f1df); }
.vd-info { display: flex; flex-direction: column; gap: .3rem; }
.vd-info > strong { color: var(--pl-ink); font-size: .98rem; line-height: 1.3; }
.vd-label { margin-top: .35rem; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pl-muted); }
.vd-swatches { display: flex; gap: .45rem; }
.vd-swatches span { width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--pl-line-2); }
.vd-swatches span.on { box-shadow: 0 0 0 2px var(--pl-primary-2); }
.vd-sizes { display: flex; gap: .35rem; }
.vd-sizes span { min-width: 36px; padding: .35rem .5rem; text-align: center; border-radius: 9px; border: 1px solid var(--pl-line-2); font-size: .78rem; font-weight: 700; color: var(--pl-ink); }
.vd-sizes span.on { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
.vd-sizes span.out { color: #b7c0c9; text-decoration: line-through; }
.vd-stock { color: #c2410c; font-size: .74rem; font-weight: 600; }
.vd-stock i { margin-right: .3rem; }
.vd-add { margin-top: .6rem; }
.vd-cart { margin-top: 2.2rem; }
.vd-coupon { display: flex; align-items: center; gap: .45rem; margin: .35rem 0; padding: .5rem .65rem; border-radius: 10px; background: #e2f7f0; color: #0c7a5a; font-size: .78rem; font-weight: 600; }
.vd-coupon b { margin-left: auto; }
.vd-ship { margin: .5rem .2rem .3rem; font-size: .74rem; color: var(--pl-muted); }
.vd-ship span { display: block; margin-bottom: .3rem; }
.vd-ship::after { content: ""; display: block; height: 6px; border-radius: 6px; background: var(--pl-line); }
.vd-ship { position: relative; }
.vd-ship i { position: absolute; left: 0; bottom: 0; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #0fb584, #5cc2ef); }
.vd-cart .co-pay { margin-top: .6rem; font-size: .88rem; }
@media (max-width: 575.98px) {
  .variant-demo { grid-template-columns: 1fr; }
  .vd-cart { margin-top: 0; }
  .vd-img { aspect-ratio: 16 / 9; }
}
.phone-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; margin: 0 auto; }
.b2b-btn.vd-add { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
.vd-img { aspect-ratio: 16 / 10; }

/* ===== Portfolio ===== */
.filter-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; margin: 0 auto 2.25rem; }
.filter-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: 999px; border: 1px solid var(--pl-line-2); background: #fff; color: var(--pl-ink); font-weight: 600; font-size: .93rem; box-shadow: var(--pl-shadow-sm); transition: background .25s, color .25s, border-color .25s, transform .25s; }
.filter-btn i { color: var(--pl-primary-2); font-size: .85rem; }
.filter-btn span { min-width: 1.6rem; padding: .05rem .45rem; border-radius: 999px; background: var(--pl-bg-soft); color: var(--pl-muted); font-size: .76rem; font-weight: 700; }
.filter-btn:hover { transform: translateY(-2px); border-color: #b9cfe0; }
.filter-btn.is-on { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
.filter-btn.is-on i { color: var(--pl-gold); }
.filter-btn.is-on span { background: rgba(255,255,255,.16); color: #fff; }
.filter-btn:focus-visible { outline: 3px solid rgba(52,152,200,.45); outline-offset: 2px; }
.pager { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: 2.5rem; }
.pager[hidden] { display: none; }
.pager-btn { min-width: 2.75rem; height: 2.75rem; padding: 0 .8rem; border-radius: 999px; border: 1px solid var(--pl-line-2); background: #fff; color: var(--pl-ink); font-weight: 700; font-size: .95rem; box-shadow: var(--pl-shadow-sm); transition: background .25s, color .25s, border-color .25s, transform .25s; }
.pager-btn:hover:not(:disabled) { transform: translateY(-2px); border-color: #b9cfe0; }
.pager-btn.is-on { background: var(--pl-ink); border-color: var(--pl-ink); color: #fff; }
.pager-btn:disabled { opacity: .4; cursor: default; }
.pager-btn:focus-visible { outline: 3px solid rgba(52,152,200,.45); outline-offset: 2px; }
.work-card { height: 100%; display: flex; flex-direction: column; border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); overflow: hidden; transition: transform .4s var(--pl-ease), box-shadow .4s; }
.work-card:hover { transform: translateY(-5px); box-shadow: var(--pl-shadow); }
.wc-shot { display: block; aspect-ratio: 5 / 4; padding: 22px 26px 0; overflow: hidden; background: linear-gradient(160deg, #e3f1fa, #f6f0dd); }
.t-cars .wc-shot { background: linear-gradient(160deg, #ece7fb, #e3f1fa); }
.t-ecom .wc-shot { background: linear-gradient(160deg, #e0f6ee, #eef6fc); }
.t-cafe .wc-shot { background: linear-gradient(160deg, #fdebdc, #f6f0dd); }
.wc-shot img { width: 100%; height: auto; display: block; border-radius: 18px 18px 0 0; border: 6px solid #0b2239; border-bottom: 0; background: #fff; transition: transform .6s var(--pl-ease); }
.work-card:hover .wc-shot img { transform: translateY(-14px); }
.wc-body { display: flex; flex-direction: column; flex-grow: 1; padding: 1.15rem 1.25rem 1.3rem; }
.wc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin-bottom: .55rem; font-size: .78rem; color: var(--pl-muted); }
.wc-tag { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: #eef7fd; color: var(--pl-primary); font-weight: 700; font-size: .74rem; letter-spacing: .02em; text-decoration: none; }
.t-cars .wc-tag { background: #f1edfd; color: #6b4fd8; }
.t-ecom .wc-tag { background: #e2f7f0; color: #0c7a5a; }
.t-cafe .wc-tag { background: #fdefe3; color: #c2570c; }
.wc-body h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.wc-body p { font-size: .9rem; color: var(--pl-body); margin-bottom: .9rem; }
.wc-link { margin-top: auto; font-weight: 600; font-size: .86rem; word-break: break-all; }
.wc-link i { font-size: .72rem; margin-left: .2rem; }
@media (max-width: 575.98px) { .filter-btn { padding: .5rem .85rem; font-size: .86rem; } .wc-shot { aspect-ratio: 16 / 10; padding: 16px 40px 0; } }

/* ===== About ===== */
.md-portrait { position: relative; max-width: 400px; margin: 0 auto; }
.md-portrait img { width: 100%; height: auto; display: block; border-radius: 32px; box-shadow: var(--pl-shadow-lg); background: var(--pl-bg-blue); }
.md-portrait figcaption { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; padding: .85rem 1.1rem; border-radius: 18px; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--pl-shadow); }
.md-portrait figcaption strong { display: block; color: var(--pl-ink); font-family: var(--pl-font-head); }
.md-portrait figcaption small { color: var(--pl-muted); }
.num-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1rem; }
.num { padding: 1.2rem .8rem; border-radius: 18px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); text-align: center; }
.num strong { display: block; font-family: var(--pl-font-head); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1; color: var(--pl-ink); letter-spacing: -.02em; }
.num > span { display: block; margin-top: .45rem; font-size: .84rem; color: var(--pl-muted); line-height: 1.3; }
@media (max-width: 1199.98px) { .num-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .num-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .num-grid .num:last-child { grid-column: 1 / -1; } }
.md-letter { height: 100%; margin: 0; padding: 1.75rem; border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.md-letter p { font-size: 1.05rem; line-height: 1.85; color: var(--pl-ink); }
.md-letter[lang="ml"] p { font-family: 'Noto Sans Malayalam', 'Manjari', 'Kartika', var(--pl-font-body); font-size: 1.08rem; line-height: 2; }
.md-letter footer { margin-top: 1rem; font-weight: 700; color: var(--pl-ink); }
.md-letter footer small { display: block; font-weight: 500; color: var(--pl-muted); font-size: .85rem; }
.md-letter.en { height: auto; background: var(--pl-bg-blue); border-color: #d3e6f4; }
.md-lang { display: inline-block; margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-primary); }
.value-row { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.value-row li { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.2rem; border-radius: 999px; background: #fff; border: 1px solid var(--pl-line-2); font-weight: 700; color: var(--pl-ink); box-shadow: var(--pl-shadow-sm); }
.value-row i { color: var(--pl-gold); }
.team-card { height: 100%; display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.team-photo { width: 104px; height: 104px; flex: 0 0 104px; border-radius: 24px; object-fit: cover; object-position: top; }
.team-initials { display: grid; place-items: center; font-family: var(--pl-font-head); font-weight: 800; font-size: 1.8rem; }
.team-role { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-primary); }
.team-card h3 { font-size: 1.2rem; margin: .2rem 0 .5rem; }
.team-card p { font-size: .94rem; margin-bottom: .8rem; }
.skill-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.skill-tags li { padding: .2rem .6rem; border-radius: 8px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); font-size: .76rem; font-weight: 600; color: var(--pl-body); }
@media (max-width: 575.98px) { .team-card { flex-direction: column; } }
.service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.service { padding: 1.3rem; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.service > i { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 1.1rem; margin-bottom: .8rem; }
.service h3 { font-size: 1rem; margin-bottom: .3rem; }
.service p { font-size: .88rem; margin: 0; }
@media (max-width: 991.98px) { .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .service-grid { grid-template-columns: 1fr; } }
.cred-list { display: grid; gap: .9rem; }
.cred { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-radius: 18px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.cred .b-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; }
.cred strong { display: block; color: var(--pl-ink); }
.cred small { color: var(--pl-muted); }
.office-card { height: 100%; padding: 1.75rem; border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); }
.office-card .b-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: 1rem; }
.office-card h3 { font-size: 1.25rem; }
.office-card address { color: var(--pl-ink); line-height: 1.7; }

/* ===== Contact ===== */
.form-card { padding: clamp(1.4rem, 3vw, 2.25rem); border-radius: 28px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-lg); }
.form-card h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); margin-bottom: .4rem; }
.form-note { color: var(--pl-muted); font-size: .93rem; }
.interest-chip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 12px; background: #eef7fd; border: 1px solid #d3e6f4; color: var(--pl-body); font-size: .9rem; }
.interest-chip i { color: var(--pl-primary); }
.interest-chip strong { color: var(--pl-ink); }
.form-alert { margin-bottom: 1rem; padding: .8rem 1rem; border-radius: 12px; background: #fdeaee; color: #a3203a; font-weight: 600; font-size: .92rem; }
.pl-form .form-label { font-weight: 600; color: var(--pl-ink); font-size: .92rem; margin-bottom: .35rem; }
.pl-form .form-label small { font-weight: 500; color: var(--pl-muted); }
.pl-form .form-label span { color: var(--pl-rose); }
.pl-form .form-control, .pl-form .form-select { padding: .75rem .95rem; border-radius: 12px; border-color: var(--pl-line-2); background-color: var(--pl-bg-soft); font-size: 1rem; }
.pl-form .form-control:focus, .pl-form .form-select:focus { background-color: #fff; border-color: var(--pl-primary-2); box-shadow: 0 0 0 4px rgba(52,152,200,.15); }
.pl-form .form-control.is-invalid { border-color: #dc3545; background-color: #fff; }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sent-box { text-align: left; }
.sent-box .b-icon { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; font-size: 1.6rem; margin-bottom: 1rem; }
.contact-list { display: grid; gap: .8rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 1.15rem; border-radius: 18px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); color: var(--pl-body); text-decoration: none; transition: transform .3s var(--pl-ease), box-shadow .3s; }
a.contact-item:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow); }
.contact-item .b-icon { width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; }
.contact-item small { display: block; color: var(--pl-muted); font-size: .8rem; }
.contact-item strong { display: block; color: var(--pl-ink); font-size: 1.02rem; word-break: break-word; }
.contact-item address { font-size: .92rem; color: var(--pl-body); }
.hours-card { margin-top: .8rem; padding: 1.2rem 1.25rem; border-radius: 18px; background: var(--pl-bg-blue); border: 1px solid #d3e6f4; }
.hours-card h2 { font-size: 1rem; margin-bottom: .7rem; }
.hours-card h2 i { color: var(--pl-primary); }
.hours-card dl { margin: 0; display: grid; gap: .4rem; }
.hours-card dl div { display: flex; justify-content: space-between; gap: 1rem; font-size: .93rem; }
.hours-card dt { font-weight: 600; color: var(--pl-ink); }
.hours-card dd { margin: 0; color: var(--pl-body); }
.live-names { color: var(--pl-muted); }

/* ===== Legal pages ===== */
.legal-hero h1 { margin: .8rem 0 .6rem; }
.legal-hero .lead-pl { max-width: 760px; }
.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.legal-toc { position: sticky; top: 96px; padding: 1.2rem 1.25rem; border-radius: 18px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); font-size: .9rem; }
.legal-toc strong { display: block; margin-bottom: .6rem; color: var(--pl-ink); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; }
.legal-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .35rem; }
.legal-toc a { color: var(--pl-body); text-decoration: none; }
.legal-toc a:hover { color: var(--pl-primary); }
.legal-body { max-width: 780px; }
.legal-body h2 { font-size: 1.3rem; margin: 2.2rem 0 .7rem; scroll-margin-top: 96px; }
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { color: var(--pl-body); line-height: 1.75; }
.legal-body ul { padding-left: 1.25rem; margin-bottom: 1rem; }
.legal-body li { margin-bottom: .35rem; }
.legal-see { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--pl-line); font-size: .93rem; }
mark.todo { background: #fff3c4; color: #6b4e00; padding: .05rem .3rem; border-radius: 4px; }
.draft-note { margin-top: 1.25rem; max-width: 760px; padding: .9rem 1.1rem; border-radius: 14px; background: #fff3c4; border: 1px solid #f1d98a; color: #6b4e00; font-size: .93rem; }
@media (max-width: 991.98px) { .legal-layout { grid-template-columns: 1fr; } .legal-toc { position: static; } }
.honest-note { display: flex; gap: .9rem; align-items: flex-start; margin-top: 2.5rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--pl-gold-soft); border: 1px solid #efdfae; color: var(--pl-body); }
.honest-note i { color: #a88520; font-size: 1.2rem; margin-top: .2rem; }
.honest-note strong { color: var(--pl-ink); }
.legal-updated { font-size: .9rem; color: var(--pl-muted); margin: .4rem 0 0; }

/* ===== Kerala pages ===== */
.fit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fit-card, .city-card { height: 100%; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.25rem; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); color: var(--pl-body); text-decoration: none; transition: transform .3s var(--pl-ease), box-shadow .3s, border-color .3s; }
.fit-card:hover, .city-card:hover { transform: translateY(-3px); box-shadow: var(--pl-shadow); border-color: #b9cfe0; }
.fit-card .b-icon, .city-card .b-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; }
.fit-card > span:nth-child(2), .city-card > span:nth-child(2) { flex: 1 1 auto; }
.fit-card strong, .city-card strong { display: block; color: var(--pl-ink); font-size: 1.02rem; }
.fit-card small, .city-card small { display: block; color: var(--pl-muted); font-size: .86rem; line-height: 1.4; margin-top: .15rem; }
.fit-card > i, .city-card > i { color: var(--pl-primary-2); transition: transform .3s var(--pl-ease); }
.fit-card:hover > i, .city-card:hover > i { transform: translateX(4px); }
@media (max-width: 991.98px) { .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .fit-grid { grid-template-columns: 1fr; } }
.district-list { list-style: none; padding: 0; margin: 2rem auto 0; max-width: 900px; display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.district-list li { padding: .35rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--pl-line-2); font-size: .86rem; color: var(--pl-body); }
.local-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.local-card { padding: 1.4rem; border-radius: 22px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.local-card .lc-tag { display: inline-block; margin-bottom: .6rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pl-primary); }
.local-card h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.local-card p { font-size: .93rem; margin: 0; }
@media (max-width: 991.98px) { .local-grid { grid-template-columns: 1fr; } }
.map-embed { border-radius: 24px; overflow: hidden; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); background: var(--pl-bg-blue); aspect-ratio: 4 / 3; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.visit-steps { margin: 1.5rem 0 0; padding-left: 1.3rem; display: grid; gap: .7rem; color: var(--pl-body); }
.visit-steps strong { color: var(--pl-ink); }

/* ===== Blog ===== */
.post-card { height: 100%; display: flex; flex-direction: column; padding: 1.6rem; border-radius: 24px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); color: var(--pl-body); text-decoration: none; transition: transform .4s var(--pl-ease), box-shadow .4s; }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--pl-shadow); }
.post-card .b-icon { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; font-size: 1.2rem; margin-bottom: 1rem; }
.post-card .pc-tag { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-primary); margin-bottom: .4rem; }
.post-card h3 { font-size: 1.2rem; margin-bottom: .5rem; }
.post-card p { font-size: .93rem; }
.post-card .link-arrow { margin-top: auto; }
.post-hero { padding-bottom: clamp(32px, 4vw, 48px); }
.post-head { max-width: 800px; margin: 0 auto; }
.post-head h1 { margin: .8rem 0 1.2rem; font-size: clamp(2rem, 4.2vw, 3.2rem); }
.post-meta { display: flex; align-items: center; gap: .75rem; }
.post-meta img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: top; }
.post-meta strong { display: block; color: var(--pl-ink); font-size: .95rem; }
.post-meta small { color: var(--pl-muted); font-size: .84rem; }
.post-body { max-width: 800px; margin: 0 auto; }
.post-body h2 { font-size: clamp(1.45rem, 2.4vw, 1.85rem); margin: 2.6rem 0 .9rem; scroll-margin-top: 96px; }
.post-body > p, .post-body li { font-size: 1.06rem; line-height: 1.8; color: var(--pl-body); }
.post-body .table-card td, .post-body .table-card th { font-size: .94rem; line-height: 1.55; }
.key-box { padding: 1.4rem 1.5rem; border-radius: 20px; background: var(--pl-bg-blue); border: 1px solid #d3e6f4; }
.key-box strong { display: block; color: var(--pl-ink); margin-bottom: .45rem; }
.key-box strong i { color: var(--pl-gold); }
.key-box p { font-size: 1.08rem; line-height: 1.75; color: var(--pl-ink); }
.post-toc { margin-top: 1.75rem; padding: 1.2rem 1.4rem; border-radius: 18px; background: var(--pl-bg-soft); border: 1px solid var(--pl-line); }
.post-toc strong { display: block; margin-bottom: .5rem; color: var(--pl-ink); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.post-toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: .3rem; }
.step-no { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; margin-right: .5rem; border-radius: 10px; background: var(--pl-grad); color: #fff; font-size: 1rem; vertical-align: .15em; }
.q-list { padding-left: 1.3rem; display: grid; gap: .45rem; }
.post-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 2.5rem 0; padding: 1.4rem 1.5rem; border-radius: 20px; background: var(--pl-gold-soft); border: 1px solid #efdfae; }
.post-cta strong { display: block; color: var(--pl-ink); font-size: 1.08rem; }
.author-box { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 3rem; padding: 1.4rem 1.5rem; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.author-box img { width: 72px; height: 72px; flex: 0 0 72px; border-radius: 50%; object-fit: cover; object-position: top; }
.author-box small { display: block; color: var(--pl-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.author-box strong { display: block; color: var(--pl-ink); font-size: 1.08rem; }
.author-box .role { display: block; color: var(--pl-primary); font-size: .88rem; margin-bottom: .5rem; }
.author-box p { font-size: .93rem; margin-bottom: .4rem; }
.author-box .post-dates { color: var(--pl-muted); font-size: .84rem; margin: 0; }
@media (max-width: 575.98px) { .author-box { flex-direction: column; } .post-cta .btn { width: 100%; } }
.local-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.5rem; padding: 1.1rem 1.3rem; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow-sm); }
.local-proof .b-icon { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.15rem; }
.local-proof > div { flex: 1 1 260px; }
.local-proof strong { display: block; color: var(--pl-ink); }
.local-proof small { color: var(--pl-muted); font-size: .9rem; }

/* ===== Case studies ===== */
.cs-phones { position: relative; height: 520px; max-width: 440px; margin: 0 auto; }
.cs-phones .phone { position: absolute; width: 230px; }
.cs-phones .phone .screen { width: 230px; height: 446px; }
.cs-phones .cs-back { left: 0; top: 50px; transform: rotate(-5deg); opacity: .95; }
.cs-phones .cs-front { right: 0; top: 0; z-index: 2; }
.cs-phones .float-card { left: 10px; bottom: 10px; top: auto; z-index: 3; }
@media (max-width: 575.98px) { .cs-phones { height: 430px; max-width: 340px; } .cs-phones .phone, .cs-phones .phone .screen { width: 180px; } .cs-phones .phone .screen { height: 350px; } }
.cs-facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 991.98px) { .cs-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-about { display: grid; gap: .55rem; margin-top: .4rem; }
.cs-about div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: .75rem; font-size: .96rem; }
.cs-about dt { font-weight: 700; color: var(--pl-ink); }
.cs-about dd { margin: 0; color: var(--pl-body); }
@media (max-width: 575.98px) { .cs-about div { grid-template-columns: 1fr; gap: .1rem; } }
.cs-steps, .cs-lessons { padding-left: 1.3rem; display: grid; gap: .7rem; }
.cs-steps li, .cs-lessons li { font-size: 1.04rem; line-height: 1.7; color: var(--pl-body); }
.cs-steps strong, .cs-lessons strong { color: var(--pl-ink); }
.phone-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 2rem 0 1rem; }
.cs-shots .phone { width: 100%; max-width: 220px; }
.cs-shots .phone .screen { width: 100%; height: auto; aspect-ratio: 220 / 400; }
@media (max-width: 575.98px) { .phone-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } .cs-shots .phone .screen { border-radius: 18px; padding: 5px; } .cs-shots .phone img { border-radius: 14px; } .cs-shots .phone .screen::before { display: none; } .cs-shots strong { font-size: .8rem; } .cs-shots small { font-size: .72rem; } }
.cs-big { display: flex; align-items: center; gap: 1.25rem; margin: 1.5rem 0; padding: 1.4rem 1.6rem; border-radius: 22px; background: var(--pl-grad); color: #fff; box-shadow: var(--pl-shadow-blue); }
.cs-big strong { font-family: var(--pl-font-head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.cs-big span { font-size: 1.05rem; line-height: 1.5; }
.case-card { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; align-items: center; padding: 1.75rem; border-radius: 28px; background: #fff; border: 1px solid var(--pl-line); box-shadow: var(--pl-shadow); color: var(--pl-body); text-decoration: none; transition: transform .4s var(--pl-ease), box-shadow .4s; }
.case-card:hover { transform: translateY(-5px); box-shadow: var(--pl-shadow-lg); }
.case-card .phone { margin: 0 auto; }
.case-body { display: flex; flex-direction: column; gap: .6rem; }
.case-body .pc-tag { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-primary); }
.case-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0; }
.case-stats { display: flex; flex-wrap: wrap; gap: .75rem; margin: .4rem 0 .6rem; }
.case-stats span { padding: .7rem 1rem; border-radius: 14px; background: var(--pl-bg-blue); border: 1px solid #d3e6f4; }
.case-stats strong { display: block; font-family: var(--pl-font-head); font-size: 1.5rem; color: var(--pl-ink); line-height: 1.1; }
.case-stats small { color: var(--pl-muted); font-size: .82rem; }
@media (max-width: 767.98px) { .case-card { grid-template-columns: 1fr; text-align: left; } }
@media (max-width: 575.98px) { .cs-facts .fact:last-child { grid-column: 1 / -1; } }

/* Three live examples side by side */
.phone-grid.trio { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; }
@media (max-width: 575.98px) { .phone-grid.trio { gap: .75rem; } .phone-grid.trio .phone strong { font-size: .85rem; } .phone-grid.trio .phone small { font-size: .72rem; } }

/* Primal Codes (parent company) logo and clients */
.pl-footer .footer-parent { display: inline-flex; align-items: center; gap: .6rem; margin-top: .25rem; color: rgba(255,255,255,.7); font-size: .85rem; text-decoration: none; }
.pl-footer .footer-parent img { height: 40px; width: auto; }
.pl-footer .footer-parent:hover span { color: #fff; }
.pc-logo-link { display: inline-block; margin-bottom: 1rem; }
.pc-logo-link img { height: 56px; width: auto; }
.section-head .pc-logo-link img { height: 48px; }
.pc-clients { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
.pc-clients li { background: #fff; border: 1px solid var(--pl-line-2); border-radius: 16px; box-shadow: var(--pl-shadow-sm); display: flex; align-items: center; justify-content: center; padding: .5rem; }
.pc-clients img { width: 100%; height: auto; max-width: 200px; }
@media (max-width: 991.98px) { .pc-clients { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .pc-clients { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; } }
@media (max-width: 479.98px) { .pc-clients { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Pricing page */
.price-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 2rem auto 0; }
.price-jump a { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.15rem; border-radius: 999px; background: #fff; border: 1px solid var(--pl-line-2); box-shadow: var(--pl-shadow-sm); color: var(--pl-ink); font-weight: 700; text-decoration: none; transition: transform .25s, border-color .25s; }
.price-jump a:hover { transform: translateY(-2px); border-color: #b9cfe0; }
.price-jump a i { color: var(--pl-primary-2); }
.price-jump a span { font-weight: 600; font-size: .85rem; color: var(--pl-muted); }
.price-promises { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem; font-size: .93rem; color: var(--pl-ink); }
.price-promises i { color: #0c9a6e; margin-right: .35rem; }
.price-section { scroll-margin-top: 90px; }
/* Keep the 8-item menu on one line on small laptops */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .navbar-nav .nav-link { padding-left: .5rem !important; padding-right: .5rem !important; font-size: .92rem; }
  .navbar .btn { white-space: nowrap; padding-left: .95rem; padding-right: .95rem; font-size: .9rem; }
  .navbar .btn i { display: none; }
  .navbar-brand img { flex-shrink: 0; }
  .navbar-brand { flex-shrink: 0; }
}
@media (min-width: 992px) and (max-width: 1099.98px) {
  .navbar .navbar-nav .nav-link { padding-left: .38rem !important; padding-right: .38rem !important; font-size: .88rem; }
  .navbar-brand img { height: 34px; width: auto; }
}

/* Mobile: never scroll sideways; three phones share the width */
html { overflow-x: clip; }
@media (max-width: 767.98px) {
  .phone-grid.trio .phone { width: 100%; min-width: 0; }
  .phone-grid.trio .phone .screen { width: 100%; height: auto; aspect-ratio: 220 / 400; border-radius: 18px; padding: 5px; }
  .phone-grid.trio .phone img { border-radius: 14px; }
  .phone-grid.trio .phone .screen::before { width: 26px; height: 7px; top: 9px; }
}