/* Import a modern font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

/* Define color variables for theming */
/*
  Colour palette
  We refined the site’s colours to align with the latest KAAASH logo.  The
  primary colour is a deep navy and the accent colour is a warm gold.  If
  you need to tweak the shades further, adjust these variables and the
  changes will propagate across the site.  Do not introduce non‑blue or
  non‑gold colours to maintain brand cohesion.
*/
:root {
   --primary-blue: #0D1B2A;
  --brand-gold: #D4A24C;
  --text-light: #fff;
  /* Added variables to ensure all CSS references resolve. These map back to the
     new palette defined above and provide sensible defaults for the rest of
     the stylesheet. */
  --primary-color: var(--primary-blue);
  --accent-color: var(--brand-gold);
  --dark-text: #0D1B2A;
  --light-bg: #F9FAFC;
  --light-text: #ffffff;
}

/* Base styles for KAAASH website */
body {
  font-family: 'Poppins', Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: var(--dark-text);
  background-color: var(--light-bg);
}

/* ===== HEADER ===== */

header {
  position: relative;
  overflow: hidden;

  background: linear-gradient(
    135deg,
    var(--primary-blue),
    var(--brand-gold)
  );

  color: var(--text-light);

  height: 178px;
  min-height: 0;
  padding: 0.15rem 1rem 0.1rem;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: 0;

  text-align: center;
}

/* Navigation bar */
nav {
  background-color: var(--light-text);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0; /* remove extra padding so the bar appears as a single stroke */
}

nav a {
  color: var(--primary-color);
  padding: 0.72rem 0.95rem;
  text-decoration: none;
  font-weight: 700;
  margin: 0 0.15rem;
}

nav a:hover {
  background-color: var(--accent-color);
  color: var(--light-text);
  border-radius: 4px;
  transition: background-color 0.3s;
}

/* Nav toggle (hamburger) for mobile */
.nav-toggle {
  display: none;
  cursor: pointer;
  padding: 1rem;
}

.nav-toggle span {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px 0;
  background-color: var(--primary-color);
  transition: all 0.3s ease;
}

.nav-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    display: none;
    width: 100%;
  }
  nav.open {
    display: flex;
  }
  nav a {
    width: 100%;
    padding: 0.75rem 1rem;
    margin: 0;
    border-top: 1px solid #eee;
  }
  .nav-toggle {
    display: block;
  }
}

/* Values grid for interactive "What KAAASH stands for" section */
.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

.value-card {
  background-color: #e3f2fd;
  padding: 1.5rem 1rem;
  border-radius: 8px;
  text-align: center;
  position: relative;
  overflow: hidden;
  cursor: default;
  transform: translateY(20px);
  opacity: 0;
  animation: fadeInUp 0.6s forwards;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.value-card h3 {
  margin-top: 0;
  font-size: 1.8rem;
  color: var(--primary-color);
}

.value-card p {
  font-size: 0.9rem;
  margin: 0.5rem 0 0;
  color: #333;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Branding wrapper */
.branding {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 135px;
  flex: 0 0 auto;
}

/* Main KAAASH logo */
img.brand-banner {
  width: min(1180px, 98vw);
  max-height: 230px;
  height: auto;
  display: block;
  object-fit: contain;
  transform: translateY(-8px);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
}

/* Header tagline */
header p {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);

  margin: 0;

  font-size: clamp(0.9rem, 1.45vw, 1.08rem);
  font-weight: 700;

  color: rgba(255, 255, 255, 0.98);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

  white-space: nowrap;
  z-index: 2;
}

.branding h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

/* Main container */
main {
  max-width: 960px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* Card‑style sections */
section {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Hero section for the home page */
/* Hero section for the home page */
.hero {
  background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
  text-align: center;
  color: var(--light-text);
  margin-bottom: 2rem;
}

.hero h1 {
  margin-top: 0;
  font-size: 2.5rem;
}

.hero p {
  font-size: 1.2rem;
  margin: 1rem 0;
}

/* Buttons */
.buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.button {
  background-color: var(--accent-color);
  color: var(--light-text);
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.button:hover {
  background-color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

/* Headings */
h2 {
  color: var(--primary-color);
  margin-top: 0;
}

h3 {
  color: var(--accent-color);
  margin-top: 1rem;
}

/* Unordered lists */
ul {
  list-style: none;
  padding-left: 1rem;
}

ul li {
  margin: 0.5rem 0;
}

/* Footer */
footer {
  background-color: var(--primary-color);
  color: var(--light-text);
  text-align: center;
  padding: 2rem 1rem;
  margin-top: 2rem;
}

/* Alternate section backgrounds to introduce gentle bands of colour.  We
   deliberately restrict the palette to light blues and pale golds to keep the
   site cohesive with the dark blue/gold branding while adding visual
   interest. */
main section:nth-of-type(odd) {
  background-color: var(--light-bg);
}

main section:nth-of-type(even) {
  background-color: var(--light-gold-bg);
}

/* Graphic slide used on the About page */
.kaash-slide {
  width: 100%;
  display: block;
  border-radius: 8px;
  margin-bottom: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/*
  Arrow‑shaped banner used on the About page to visualise the values in
  KAAASH.  Each card uses a CSS clip‑path to form an arrow pointing to the
  right.  On small screens the cards stack vertically; on larger screens
  they align in a single row.  Background colours are defined via an
  inline style variable (--bg-colour) on each card to achieve a gradient
  effect reminiscent of the original welcome slide.
*/
.arrow-values {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.arrow-card {
  position: relative;
  flex: 1 1 100%;
  padding: 1.5rem 1rem;
  color: var(--light-text);
  background-color: var(--bg-colour, var(--primary-color));
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 50%, calc(100% - 30px) 100%, 0 100%);
  margin-bottom: 0.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(20px);
  opacity: 0;
  animation: slideFadeIn 0.7s forwards;
}

.arrow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.arrow-card h3 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
}

.arrow-card p {
  margin: 0.5rem 0 0;
  font-size: 0.9rem;
  line-height: 1.3;
}

@keyframes slideFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 768px) {
  .arrow-card {
    flex: 1;
    margin: 0 0.25rem;
    margin-bottom: 0;
  }
  .arrow-card:first-child {
    margin-left: 0;
  }
  .arrow-card:last-child {
    margin-right: 0;
  }
}

/* Container for the slideshow on the About page */
.slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Logo in header */
.logo {
  width: 50px;
  height: 50px;
  vertical-align: middle;
  margin-right: 0.75rem;
}

/* Stylised KAAASH lettering */
.letter-k,
.letter-s,
.letter-h {
  color: var(--primary-color);
}
.letter-a {
  color: var(--accent-color);
}

/* Tables for pricing and data display */
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

th,
td {
  border: 1px solid #ddd;
  padding: 0.75rem;
  text-align: left;
}

th {
  background-color: var(--primary-color);
  color: var(--light-text);
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

/* Form styles for contact and login */
form.contact-form,
form.login-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

form.contact-form input,
form.contact-form textarea,
form.login-form input {
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

form.contact-form button,
form.login-form button {
  background-color: var(--accent-color);
  color: var(--light-text);
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

form.contact-form button:hover,
form.login-form button:hover {
  background-color: var(--primary-color);
}

/* Definition lists for FAQs */
dl {
  margin: 0 0 1rem;
}

dt {
  font-weight: bold;
  margin-top: 0.75rem;
}

dd {
  margin-left: 1rem;
  margin-bottom: 0.5rem;
}

/* --- SaaS footer + utilities (added) --- */
.site-footer {
  background-color: var(--primary-color);
  color: var(--light-text);
  padding: 2.25rem 1rem;
  margin-top: 2rem;
}
.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.25rem;
  align-items: start;
}
.footer-col h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1rem;
  color: var(--light-text);
}
.footer-col a {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  display: inline-block;
  margin: 0.25rem 0;
  font-weight: 500;
}
.footer-col a:hover {
  text-decoration: underline;
}
.footer-bottom {
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: center;
}
.badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.95);
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.35rem;
  vertical-align: middle;
}
.button.secondary {
  background-color: transparent;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
  box-shadow: none;
}
.button.secondary:hover {
  background-color: var(--primary-color);
  color: var(--light-text);
}
.button.dark {
  background-color: var(--primary-color);
  color: var(--light-text);
}
.button.dark:hover {
  background-color: var(--accent-color);
  color: var(--light-text);
}
.inline-links a { color: var(--accent-color); font-weight: 600; text-decoration: none; }
.inline-links a:hover { text-decoration: underline; }
.note {
  font-size: 0.95rem;
  color: #2b2b2b;
  margin-top: 0.5rem;
}
.callout {
  border-left: 4px solid var(--accent-color);
  padding: 0.75rem 1rem;
  background: rgba(212,162,76,0.10);
  border-radius: 6px;
  margin-top: 0.75rem;
}


/* --- Motion & depth (added) --- */
html { scroll-behavior: smooth; }
body { background: linear-gradient(180deg, rgba(24,59,99,0.03), rgba(255,255,255,0.0) 40%), var(--light-bg); }

/* Softer section framing */
main section {
  position: relative;
  border-radius: 14px;
  padding: 1.4rem 1.4rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(4px);
  margin: 1.25rem auto;
  max-width: 1100px;
}

/* Hero polish */
.hero {
  border-radius: 18px;
  overflow: hidden;
}
.hero h1 { letter-spacing: -0.02em; }
.hero p { max-width: 70ch; }

/* Card hover lift */
.service-card, .project-card, .pricing-table, .value-card, .card, .blog-card {
  transition: transform 180ms ease, box-shadow 180ms ease;
  will-change: transform;
}
.service-card:hover, .project-card:hover, .value-card:hover, .card:hover, .blog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
}

/* Buttons: nicer hover */
.button, button {
  transition: transform 140ms ease, box-shadow 140ms ease, background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.button:hover, button:hover { transform: translateY(-1px); box-shadow: 0 10px 20px rgba(0,0,0,0.12); }
.button:active, button:active { transform: translateY(0px); box-shadow: 0 6px 14px rgba(0,0,0,0.10); }

/* Nav: underline indicator */
nav a {
  position: relative;
  padding-bottom: 0.25rem;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: var(--accent-color);
  transition: width 180ms ease;
  opacity: 0.9;
}
nav a:hover::after { width: 100%; }

/* Reveal on scroll */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0px);
}

/* Divider line utility */
.section-divider {
  height: 1px;
  background: rgba(0,0,0,0.06);
  margin: 1.25rem 0;
}

/* Tables: subtle */
table { border-radius: 12px; overflow: hidden; }
.pricing-table th { background: rgba(24,59,99,0.07); }
.pricing-table tr:hover td { background: rgba(212,162,76,0.08); }

/* Form polish */
input, textarea, select {
  transition: box-shadow 160ms ease, border-color 160ms ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(212,162,76,0.18);
}


/* --- Live UI additions (added) --- */
header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(1200px 600px at 10% 10%, rgba(212,162,76,0.22), transparent 60%),
              radial-gradient(900px 500px at 90% 30%, rgba(67,162,211,0.22), transparent 55%),
              radial-gradient(1000px 700px at 45% 110%, rgba(24,59,99,0.18), transparent 60%);
  transform: translate3d(0,0,0);
  animation: kaaashGlow 14s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
header > * { position: relative; z-index: 1; }

@keyframes kaaashGlow {
  0%   { filter: blur(0px); opacity: 0.9; transform: scale(1.00) translateY(0px); }
  50%  { filter: blur(1px); opacity: 1.0; transform: scale(1.02) translateY(6px); }
  100% { filter: blur(0px); opacity: 0.9; transform: scale(1.00) translateY(0px); }
}

/* Carousel */
.carousel {
  display: grid;
  gap: 0.75rem;
  margin-top: 0.75rem;
}
.carousel-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
  background: #fff;
  max-height: 560px;
}
.carousel-track {
  display: flex;
  transition: transform 420ms ease;
  will-change: transform;
}
.carousel-slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.carousel-slide img {
  width: 100%;
  height: auto;
  max-height: 560px;
  object-fit: contain;
  object-position: center;
  display: block;
}
.carousel-controls {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}
.carousel-btn {
  border: 0;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}
.carousel-dots {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(24,59,99,0.22);
  cursor: pointer;
  border: 0;
}
.dot.active { background: rgba(212,162,76,0.95); width: 22px; }

/* Testimonial slider */
.slider {
  display: grid;
  gap: 0.75rem;
}
.slider-card {
  border-radius: 16px;
  padding: 1.25rem 1.25rem;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.05);
}
.quote {
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}
.quotee {
  margin-top: 0.75rem;
  font-weight: 800;
}
.quotee small {
  display: block;
  font-weight: 600;
  color: rgba(0,0,0,0.65);
  margin-top: 0.15rem;
}
.slider-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: space-between;
  align-items: center;
}

/* Pricing toggle */
.toggle-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin: 0.25rem 0 0.75rem 0;
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.65rem;
  background: rgba(24,59,99,0.06);
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.06);
  user-select: none;
}
.switch {
  width: 46px;
  height: 26px;
  border-radius: 999px;
  background: rgba(24,59,99,0.22);
  position: relative;
  cursor: pointer;
  border: 0;
}
.switch::after {
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  position: absolute;
  top: 3px;
  left: 3px;
  transition: transform 180ms ease;
  box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}
.switch.on { background: rgba(212,162,76,0.95); }
.switch.on::after { transform: translateX(20px); }
.price {
  font-weight: 900;
  font-size: 1.05rem;
  white-space: nowrap;
}
.muted { color: rgba(0,0,0,0.65); font-weight: 600; }


/* --- Sticky nav + floating CTA + counters (added) --- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.86);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
nav.compact {
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.floating-cta {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 80;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.85rem;
  border-radius: 999px;
  background: rgba(24,59,99,0.96);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 14px 30px rgba(0,0,0,0.18);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.floating-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(0,0,0,0.22);
}
.floating-cta .pill {
  background: rgba(255,255,255,0.16);
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 900;
}
.floating-cta.hide {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
}

/* Pricing highlight pulse */
.pulse {
  animation: pulseGlow 650ms ease-out;
}
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 rgba(212,162,76,0.00); transform: translateY(0px); }
  30% { box-shadow: 0 0 0 6px rgba(212,162,76,0.22); transform: translateY(-1px); }
  100% { box-shadow: 0 0 0 rgba(212,162,76,0.00); transform: translateY(0px); }
}

/* Counters */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.9rem;
  margin-top: 0.75rem;
}
.stat {
  border-radius: 16px;
  padding: 1rem 1rem;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}
.stat .num {
  font-size: 1.6rem;
  font-weight: 950;
  letter-spacing: -0.02em;
}
.stat .label {
  margin-top: 0.2rem;
  font-weight: 700;
  color: rgba(0,0,0,0.70);
}


/* --- Video, logos, modal (added) --- */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.75rem;
  align-items: center;
}
.logo-pill {
  padding: 0.45rem 0.7rem;
  border-radius: 999px;
  background: rgba(24,59,99,0.06);
  border: 1px solid rgba(0,0,0,0.06);
  font-weight: 800;
  color: rgba(0,0,0,0.78);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.logo-pill img {
  width: 18px;
  height: 18px;
  border-radius: 6px;
}

.video-embed {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,0.10);
  background: #000;
  margin-top: 0.8rem;
}
.video-embed::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}
.video-embed iframe, .video-embed .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-embed .placeholder {
  display: grid;
  place-items: center;
  background: radial-gradient(900px 420px at 15% 20%, rgba(212,162,76,0.35), transparent 60%),
              radial-gradient(800px 420px at 85% 35%, rgba(67,162,211,0.35), transparent 60%),
              rgba(24,59,99,0.95);
  color: #fff;
  padding: 1rem;
  text-align: center;
}
.video-embed .placeholder h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
}
.video-embed .placeholder p {
  margin: 0;
  max-width: 70ch;
  color: rgba(255,255,255,0.9);
}

/* Avatar initials */
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 950;
  background: rgba(212,162,76,0.18);
  color: rgba(24,59,99,0.95);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
  flex: 0 0 auto;
}
.quote-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.48);
  display: none;
  z-index: 1000;
  padding: 1.25rem;
}
.modal-backdrop.open { display: grid; place-items: center; }
.modal {
  width: min(720px, 96vw);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,0.98);
  box-shadow: 0 22px 70px rgba(0,0,0,0.25);
  border: 1px solid rgba(0,0,0,0.08);
}
.modal-head {
  padding: 1rem 1.15rem;
  background: rgba(24,59,99,0.96);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.modal-head h3 { margin: 0; font-size: 1.15rem; letter-spacing: -0.02em; }
.modal-close {
  border: 0;
  background: rgba(255,255,255,0.16);
  color: #fff;
  font-weight: 950;
  width: 40px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
}
.modal-body {
  padding: 1.1rem 1.15rem 1.25rem 1.15rem;
}
.modal-body p { margin-top: 0; }
.modal-form {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.modal-form .row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
@media (max-width: 640px) {
  .modal-form .row { grid-template-columns: 1fr; }
}
.modal-form input, .modal-form textarea, .modal-form select {
  width: 100%;
  padding: 0.75rem 0.85rem;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.16);
  background: #fff;
  font-size: 1rem;
}
.modal-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
  align-items: center;
}
.hint {
  font-size: 0.9rem;
  color: rgba(0,0,0,0.65);
}


/* ===== HEADER RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 768px) {
  header {
    height: 135px;
    min-height: 0;
    padding: 0.1rem 0.6rem;
  }

  .branding {
    height: 104px;
  }

  img.brand-banner {
    width: min(860px, 99vw);
    max-height: 175px;
    transform: translateY(-6px);
  }

  header p {
    bottom: 7px;
    font-size: 0.85rem;
  }
}

@media (max-width: 480px) {
  header {
    height: 112px;
    min-height: 0;
  }

  .branding {
    height: 87px;
  }

  img.brand-banner {
    width: 99vw;
    max-height: 145px;
    transform: translateY(-5px);
  }

  header p {
    bottom: 6px;
    font-size: 0.74rem;
  }
}

/* ===== KAAASH product website alignment ===== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin-top:1rem}.product-card{background:#fff;border:1px solid rgba(13,27,42,.12);border-radius:18px;padding:1.25rem;box-shadow:0 10px 26px rgba(0,0,0,.07);display:flex;flex-direction:column;gap:.75rem}.product-card.live{border:2px solid var(--brand-gold);box-shadow:0 14px 34px rgba(212,162,76,.16)}.product-card.product-wide{grid-column:1/-1}.product-card h3{color:var(--primary-color);margin:.3rem 0 0;font-size:1.35rem}.product-card .buttons{justify-content:flex-start;margin-top:auto}.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:1rem;width:100%;margin-top:1rem}.plan-card{background:#fff;border:1px solid rgba(13,27,42,.12);border-radius:16px;padding:1.25rem;box-shadow:0 8px 22px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:.85rem}.plan-card.featured{border:2px solid var(--brand-gold);box-shadow:0 12px 28px rgba(212,162,76,.18)}.plan-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.plan-head h3{margin:0;color:var(--primary-color);font-size:1.35rem}.plan-price{color:var(--primary-color);font-size:1.45rem;font-weight:800}.plan-badge{display:inline-block;color:var(--primary-color);background:rgba(212,162,76,.22);border:1px solid rgba(212,162,76,.45);border-radius:999px;padding:.25rem .65rem;font-size:.85rem;font-weight:700;white-space:nowrap}.plan-badge.gold{color:var(--primary-color);background:var(--brand-gold);border-color:var(--brand-gold)}.plan-badge.dark{color:#fff;background:var(--primary-color);border-color:var(--primary-color)}.plan-features{padding-left:0;margin:0}.plan-features li{list-style:none;margin:.42rem 0;line-height:1.35}


/* ===== v4 professional page polish and nav consistency ===== */
nav {
  gap: 0.15rem;
  align-items: center;
}

nav .nav-login,
nav a[href$="/signin"] {
  margin-left: 0.35rem;
  background: var(--primary-color);
  color: #ffffff !important;
  border-radius: 999px;
  padding: 0.58rem 1.05rem;
  line-height: 1;
}

nav .nav-login:hover,
nav a[href$="/signin"]:hover {
  background: var(--accent-color);
  color: #ffffff !important;
}

@media (max-width: 900px) {
  nav a {
    padding: 0.7rem 0.72rem;
    font-size: 0.92rem;
  }
  nav .nav-login,
  nav a[href$="/signin"] {
    margin-left: 0;
    border-radius: 6px;
    width: auto;
  }
}

.page-hero {
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background:
    radial-gradient(900px 420px at 15% 15%, rgba(212,162,76,0.32), transparent 58%),
    radial-gradient(800px 440px at 88% 20%, rgba(64,188,226,0.30), transparent 58%),
    linear-gradient(135deg, #0D1B2A, #123B5D 58%, #0D1B2A);
  padding: 2.7rem 2rem;
  border-radius: 22px;
  box-shadow: 0 18px 45px rgba(13,27,42,0.18);
}

.page-hero h1 {
  color: #ffffff;
  max-width: 850px;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.08;
  margin: 0.5rem 0 1rem;
  letter-spacing: -0.04em;
}

.page-hero p {
  max-width: 760px;
  color: rgba(255,255,255,0.90);
  font-size: 1.08rem;
}

.page-hero .button.secondary {
  color: #ffffff;
  border-color: rgba(255,255,255,0.75);
}

.page-hero .button.secondary:hover {
  background: #ffffff;
  color: var(--primary-color);
}

.service-grid .feature-card,
.resource-card,
.contact-card {
  border: 1px solid rgba(13, 27, 42, 0.08);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(249,250,252,0.96));
  box-shadow: 0 12px 28px rgba(13,27,42,0.08);
}

.mini-badge {
  display: inline-block;
  padding: 0.24rem 0.62rem;
  border-radius: 999px;
  background: rgba(212,162,76,0.16);
  color: var(--primary-color);
  border: 1px solid rgba(212,162,76,0.32);
  font-weight: 800;
  font-size: 0.78rem;
  margin-bottom: 0.45rem;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 1.25rem;
  align-items: center;
}

.timeline-card,
.styled-list,
.contact-card {
  padding: 1.2rem;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(13,27,42,0.08);
  border: 1px solid rgba(13,27,42,0.08);
}

.timeline-card div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 0.75rem;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(13,27,42,0.08);
}

.timeline-card div:last-child {
  border-bottom: 0;
}

.timeline-card strong {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(212,162,76,0.18);
  color: var(--primary-color);
}

.resource-grid,
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.resource-card {
  padding: 1.2rem;
}

.resource-card span {
  color: var(--accent-color);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.resource-card h3,
.contact-card h3 {
  color: var(--primary-color);
  margin-top: 0.35rem;
}

.resource-card a {
  color: var(--primary-color);
  font-weight: 800;
  text-decoration: none;
}

.resource-card a:hover {
  color: var(--accent-color);
}

.styled-list li {
  position: relative;
  padding-left: 1.7rem;
  margin: 0.75rem 0;
}

.styled-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-color);
  font-weight: 900;
}

.modern-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.modern-form input,
.modern-form textarea,
.modern-form select {
  padding: 0.85rem 0.95rem;
  border-radius: 12px;
  border: 1px solid rgba(13,27,42,0.18);
  background: #ffffff;
  font-family: inherit;
}

.modern-form button {
  border-radius: 12px;
  font-size: 1rem;
}

.social-card .button {
  display: inline-flex;
  margin-top: 0.4rem;
}

@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
  }
  .modern-form .form-row {
    grid-template-columns: 1fr;
  }
  .page-hero {
    padding: 2.1rem 1.25rem;
  }
}


/* ===== v5 consistent KAAASH theme + spacing fix ===== */
:root {
  --primary-blue: #0D1B2A;
  --brand-gold: #D4A24C;
  --deep-navy: #071525;
  --mid-navy: #113A5C;
  --soft-panel: #F7F9FC;
}

body {
  background:
    linear-gradient(180deg, rgba(13,27,42,0.035), rgba(255,255,255,0) 360px),
    var(--soft-panel);
  color: var(--primary-blue);
}

/* keep page content away from browser edge */
main {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin: 2rem auto;
  padding: 0;
}

@media (max-width: 640px) {
  main {
    width: min(100% - 28px, 1180px);
  }
}

/* One theme for all big hero panels */
.hero,
.page-hero,
.saaS-hero,
.service-hero,
.resources-hero,
.partner-hero,
.contact-hero {
  box-sizing: border-box;
  width: 100%;
  margin: 1.25rem auto 1.7rem auto;
  padding: clamp(2.25rem, 4vw, 4rem) clamp(1.75rem, 5vw, 4rem) !important;
  border-radius: 24px;
  color: #ffffff;
  background:
    radial-gradient(900px 520px at 8% 12%, rgba(212,162,76,0.26), transparent 58%),
    radial-gradient(850px 500px at 92% 18%, rgba(64,188,226,0.24), transparent 56%),
    linear-gradient(135deg, var(--deep-navy) 0%, var(--mid-navy) 58%, var(--deep-navy) 100%) !important;
  box-shadow: 0 18px 45px rgba(13, 27, 42, 0.20);
  overflow: hidden;
  text-align: left;
}

/* prevent text looking chopped */
.hero-content,
.page-hero > * {
  max-width: 920px;
}

.hero h1,
.page-hero h1,
.saaS-hero h1 {
  color: #ffffff !important;
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin: 0.45rem 0 1rem 0;
  max-width: 920px;
}

.hero p,
.page-hero p,
.saaS-hero p {
  color: rgba(255,255,255,0.90) !important;
  max-width: 820px;
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

.hero .buttons,
.page-hero .buttons,
.saaS-hero .buttons {
  justify-content: flex-start;
  margin-top: 1.25rem;
}

/* Badge consistency */
.hero-badge,
.mini-badge,
.plan-badge {
  background: rgba(212,162,76,0.18);
  border: 1px solid rgba(212,162,76,0.48);
  color: var(--primary-blue);
}

.page-hero .hero-badge,
.hero .hero-badge,
.saaS-hero .hero-badge {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.20);
  color: #ffffff;
}

/* Button consistency */
.button {
  border-radius: 12px;
  background: var(--brand-gold);
  color: #ffffff;
  border: 2px solid var(--brand-gold);
}

.button:hover {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #ffffff;
}

.button.secondary {
  background: #ffffff;
  color: var(--primary-blue);
  border: 2px solid rgba(13,27,42,0.18);
}

.button.secondary:hover {
  background: var(--primary-blue);
  color: #ffffff;
  border-color: var(--primary-blue);
}

.hero .button.secondary,
.page-hero .button.secondary,
.saaS-hero .button.secondary {
  background: transparent;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.72);
}

.hero .button.secondary:hover,
.page-hero .button.secondary:hover,
.saaS-hero .button.secondary:hover {
  background: #ffffff;
  color: var(--primary-blue) !important;
}

/* Section/card polish */
main section {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  border-radius: 20px;
  padding: clamp(1.35rem, 2.2vw, 2rem);
  margin: 1.25rem auto;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(13,27,42,0.07);
  box-shadow: 0 12px 30px rgba(13,27,42,0.08);
}

/* Fix card stacking/word-document feel */
.feature-grid,
.service-grid,
.resource-grid,
.contact-grid,
.product-grid,
.workflow-grid,
.pricing-grid {
  align-items: stretch;
}

.feature-card,
.resource-card,
.contact-card,
.product-card,
.plan-card,
.workflow-step {
  background: linear-gradient(180deg, #ffffff, #F9FAFC);
  border: 1px solid rgba(13,27,42,0.09);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(13,27,42,0.08);
  padding: 1.25rem;
}

.feature-card h3,
.resource-card h3,
.contact-card h3,
.product-card h3,
.workflow-step h3 {
  color: var(--primary-blue);
}

/* Home page hero should use same layout */
.saaS-hero {
  text-align: left !important;
}

.saaS-hero .hero-content {
  margin: 0;
}

.hero-metrics {
  justify-content: flex-start !important;
}

.hero-metrics span {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  padding: 0.4rem 0.75rem;
}

/* Nav consistency and no hidden login */
nav {
  padding: 0.25rem 1rem !important;
  gap: 0.12rem;
}

nav a {
  white-space: nowrap;
  font-size: 0.94rem;
  padding: 0.68rem 0.72rem !important;
}

nav .nav-login,
nav a[href$="/signin"] {
  margin-left: 0.35rem;
  background: var(--primary-blue);
  color: #ffffff !important;
  border-radius: 999px;
  padding: 0.58rem 1rem !important;
}

@media (max-width: 980px) {
  nav {
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  nav a {
    flex: 0 0 auto;
  }
}

/* Contact form refined */
.modern-form .form-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .modern-form .form-row,
  .split-section {
    grid-template-columns: 1fr !important;
  }
  .hero,
  .page-hero,
  .saaS-hero {
    padding: 2rem 1.25rem !important;
  }
}


/* =========================
   V6 SaaS Professional Pass
========================= */

/* Equal card heights */
.product-grid,
.pricing-grid,
.feature-grid,
.service-grid,
.resource-grid {
  display: grid;
  gap: 1.5rem;
  align-items: stretch;
}

.product-card,
.plan-card,
.feature-card,
.service-card,
.resource-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
}

/* Consistent CTA alignment */
.product-card .button,
.plan-card .button {
  margin-top: auto;
}

/* Upcoming products alignment */
.product-card p {
  min-height: 170px;
}

/* Pricing alignment */
.plan-card ul,
.plan-card .plan-features {
  min-height: 150px;
}

.plan-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.plan-card:hover,
.product-card:hover,
.feature-card:hover,
.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(13,27,42,0.14);
}

/* Better button sizing */
.button {
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Better typography rhythm */
section h2 {
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  margin-bottom: 1rem;
  letter-spacing: -0.03em;
}

section p {
  line-height: 1.7;
}

/* Professional section spacing */
section {
  margin-bottom: 2rem !important;
}

/* Better product cards */
.product-card {
  border-radius: 22px;
  padding: 1.75rem;
  background:
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

/* Popular plan stronger */
.plan-card.popular {
  border: 2px solid var(--brand-gold);
  transform: translateY(-4px);
}

/* Better badges */
.badge,
.popular-badge,
.coming-soon {
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  font-weight: 700;
}

/* SaaS trust strip */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.trust-strip span {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.95rem;
}

/* SEO content sections */
.seo-section {
  background: linear-gradient(180deg, #ffffff, #f9fbfd);
}

.seo-section h3 {
  margin-bottom: 0.75rem;
  color: var(--primary-blue);
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 1.25rem;
}

/* Footer improvement */
footer {
  margin-top: 4rem;
  padding: 3rem 1.5rem;
  background: linear-gradient(135deg, #071525, #113A5C);
  color: rgba(255,255,255,0.88);
}

footer a {
  color: #ffffff;
}

footer a:hover {
  color: #D4A24C;
}

/* Mobile refinement */
@media (max-width: 768px) {

  .product-card p,
  .plan-card ul,
  .plan-card .plan-features {
    min-height: auto;
  }

  .plan-card.popular {
    transform: none;
  }

  section {
    padding: 1.35rem !important;
  }
}



/* =========================================
   V7 Enterprise SaaS Professional Upgrade
========================================= */

/* Sticky premium navbar */
header,
.navbar,
nav {
  position: sticky;
  top: 0;
  z-index: 999;
  backdrop-filter: blur(14px);
  background: rgba(255,255,255,0.88);
  border-bottom: 1px solid rgba(13,27,42,0.06);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Strong section titles */
.section-title {
  font-size: clamp(2rem, 3vw, 3.3rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
  margin-bottom: 0.75rem;
}

/* Workflow section */
.workflow-section {
  background:
    linear-gradient(135deg, rgba(13,27,42,0.04), rgba(17,58,92,0.02));
}

.workflow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 1.25rem;
}

.workflow-step {
  position: relative;
  padding: 1.5rem;
  border-radius: 20px;
  background: white;
  border: 1px solid rgba(13,27,42,0.08);
  transition: all 0.25s ease;
}

.workflow-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(13,27,42,0.12);
}

.workflow-step .step-number {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #D4A24C;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 1rem;
}

/* Security section */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: 1.2rem;
}

.security-card {
  background: linear-gradient(180deg, #ffffff, #f8fbff);
  border-radius: 18px;
  padding: 1.35rem;
  border: 1px solid rgba(13,27,42,0.08);
}

.security-card h3 {
  margin-bottom: 0.7rem;
}

/* Pricing comparison table */
.comparison-table {
  overflow-x: auto;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.comparison-table th {
  background: #0D1B2A;
  color: white;
  padding: 1rem;
  text-align: left;
}

.comparison-table td {
  padding: 1rem;
  border-bottom: 1px solid rgba(13,27,42,0.08);
}

.comparison-table tr:nth-child(even) {
  background: rgba(13,27,42,0.025);
}

/* Footer enhancement */
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap: 2rem;
}

.footer-grid h4 {
  color: white;
  margin-bottom: 0.8rem;
}

.footer-grid a {
  display: block;
  margin-bottom: 0.55rem;
  opacity: 0.9;
}

/* Call booking section */
.booking-strip {
  background:
    linear-gradient(135deg, #0D1B2A 0%, #113A5C 100%);
  border-radius: 24px;
  color: white;
  text-align: center;
  padding: 2.5rem;
}

.booking-strip h2 {
  color: white;
}

.booking-strip p {
  color: rgba(255,255,255,0.86);
  max-width: 720px;
  margin: 0 auto 1.4rem auto;
}

/* Micro animations */
.fade-card {
  transition: all 0.3s ease;
}

.fade-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(13,27,42,0.14);
}

/* Better CTA hierarchy */
.button.primary {
  background: #D4A24C;
}

.button.dark {
  background: #0D1B2A;
  color: white;
}

.button.dark:hover {
  background: #113A5C;
}

/* Better spacing between major blocks */
main > section + section {
  margin-top: 2.2rem !important;
}


/* ===== v8 cleanup: no duplicate footer, reduced gaps, accurate tables, richer pages ===== */
.footer-grid{display:none!important}
.site-footer{background:linear-gradient(135deg,#071525,#113A5C);padding:3rem 1.5rem 1.6rem}
.footer-inner{text-align:left}
.footer-col .note{color:rgba(255,255,255,.72)}
.product-wide,.product-wide p{min-height:auto!important}
.product-wide .styled-list{margin:1rem 0}
.product-wide .card-actions{margin-top:1.2rem}
.card-actions{margin-top:auto;display:flex;gap:.75rem;flex-wrap:wrap;align-items:center}
.upcoming-products .product-card{min-height:430px}
.upcoming-products .product-card p{min-height:155px}
.aligned-pricing .plan-card{min-height:500px}
.aligned-pricing .plan-features{min-height:210px}
.section-intro{max-width:920px;font-size:1.05rem;color:rgba(13,27,42,.78);margin-bottom:1.25rem}
.comparison-table{width:100%;overflow-x:auto;border-radius:18px;border:1px solid rgba(13,27,42,.08);box-shadow:0 10px 26px rgba(13,27,42,.06)}
.comparison-table table{min-width:1120px;margin:0}
.comparison-table th,.comparison-table td{vertical-align:top}
.highlight-card{background:linear-gradient(180deg,#fff,#F7F9FC);border:1px solid rgba(13,27,42,.08);border-radius:22px;padding:1.5rem;box-shadow:0 14px 34px rgba(13,27,42,.10)}
.highlight-card h3{color:var(--primary-blue);margin-top:0}
.arrow-values{gap:.55rem}.arrow-card{min-height:180px}
.floating-cta{text-decoration:none}
@media(max-width:768px){.upcoming-products .product-card,.aligned-pricing .plan-card,.aligned-pricing .plan-features,.upcoming-products .product-card p{min-height:auto}.card-actions{flex-direction:column;align-items:stretch}.card-actions .button{width:100%}}


/* ===== v9 pricing display + richer about/home cards ===== */
.price-subtext {
  color: rgba(13,27,42,0.68);
  font-weight: 700;
  margin-top: -0.35rem;
  margin-bottom: 0.85rem;
}

.value-grid,
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

.value-card,
.why-card {
  position: relative;
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(212,162,76,0.13), transparent 55%),
    linear-gradient(180deg, #ffffff, #F8FAFC);
  border: 1px solid rgba(13,27,42,0.08);
  border-radius: 22px;
  padding: 1.6rem;
  box-shadow: 0 14px 34px rgba(13,27,42,0.08);
  min-height: 310px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-card {
  min-height: 245px;
}

.value-card:hover,
.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(13,27,42,0.14);
}

.value-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: #0D1B2A;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 900;
  margin-bottom: 1rem;
}

.value-card h3,
.why-card h3 {
  color: #0D1B2A;
  margin-top: 0;
}

.value-card ul {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.value-card li {
  margin: 0.45rem 0;
}

.aligned-pricing .plan-card {
  min-height: 455px;
}

.aligned-pricing .plan-features {
  min-height: 165px;
}

.plan-price {
  margin-bottom: 0.35rem;
}

@media(max-width:768px){
  .value-card,.why-card{min-height:auto}
  .aligned-pricing .plan-card,.aligned-pricing .plan-features{min-height:auto}
}


/* ==================================================
   V10 Final Mobile Responsiveness & Tablet Review Pass
================================================== */

/* Prevent accidental horizontal scrolling */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* Safer page width on all screens */
main {
  width: min(1180px, calc(100% - 32px));
}

@media (max-width: 768px) {
  main {
    width: min(100% - 24px, 1180px);
    margin-top: 1.25rem;
  }
}

/* Header/logo mobile scaling */
header {
  padding-left: 1rem;
  padding-right: 1rem;
}

.brand-banner {
  max-width: min(360px, 88vw);
  height: auto;
}

@media (max-width: 640px) {
  header {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
  }

  header p {
    font-size: 0.95rem;
    line-height: 1.35;
  }

  .brand-banner {
    max-width: min(280px, 86vw);
  }
}

/* Mobile nav: horizontal scroll instead of hiding links */
nav {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

nav a {
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  nav {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    gap: 0.2rem;
    padding: 0.45rem 0.75rem !important;
  }

  nav a {
    font-size: 0.9rem;
    padding: 0.58rem 0.7rem !important;
  }

  nav .nav-login,
  nav a[href$="/signin"] {
    border-radius: 999px;
    padding: 0.58rem 0.9rem !important;
  }
}

/* Hero mobile readability */
@media (max-width: 768px) {
  .hero,
  .page-hero,
  .saaS-hero {
    padding: 1.75rem 1.15rem !important;
    border-radius: 18px;
  }

  .hero h1,
  .page-hero h1,
  .saaS-hero h1 {
    font-size: clamp(2rem, 10vw, 2.8rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
  }

  .hero p,
  .page-hero p,
  .saaS-hero p {
    font-size: 1rem;
    line-height: 1.55;
  }

  .hero .buttons,
  .page-hero .buttons,
  .saaS-hero .buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .hero .button,
  .page-hero .button,
  .saaS-hero .button {
    width: 100%;
  }
}

/* Section/card mobile comfort */
@media (max-width: 768px) {
  main section {
    padding: 1.15rem !important;
    border-radius: 16px;
  }

  section h2,
  .section-title {
    font-size: clamp(1.75rem, 9vw, 2.45rem);
    line-height: 1.1;
  }

  section p,
  li {
    font-size: 0.98rem;
    line-height: 1.58;
  }

  .feature-grid,
  .service-grid,
  .resource-grid,
  .product-grid,
  .pricing-grid,
  .value-grid,
  .why-grid,
  .security-grid,
  .workflow-grid,
  .contact-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .product-card,
  .plan-card,
  .feature-card,
  .resource-card,
  .value-card,
  .why-card,
  .security-card,
  .workflow-step,
  .contact-card {
    padding: 1.15rem;
    border-radius: 16px;
  }
}

/* Pricing mobile: clean cards and table */
@media (max-width: 768px) {
  .plan-head {
    align-items: flex-start;
  }

  .plan-badge {
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .plan-price {
    font-size: 1.55rem;
  }

  .price-subtext {
    font-size: 0.95rem;
  }

  .comparison-table {
    border-radius: 14px;
    overflow-x: auto;
  }

  .comparison-table table {
    min-width: 920px;
    font-size: 0.92rem;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 0.8rem;
  }
}

/* About arrows: stack properly */
@media (max-width: 860px) {
  .arrow-values {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }

  .arrow-card {
    clip-path: none !important;
    min-height: auto;
    border-radius: 16px;
  }
}

@media (max-width: 520px) {
  .arrow-values {
    grid-template-columns: 1fr;
  }
}

/* Forms mobile */
@media (max-width: 700px) {
  .modern-form .form-row,
  .contact-form .form-row,
  .row {
    grid-template-columns: 1fr !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
  }
}

/* Footer mobile */
@media (max-width: 768px) {
  .site-footer {
    padding: 2rem 1rem 1.3rem;
  }

  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 1.4rem;
  }

  .footer-bottom {
    flex-direction: column;
    gap: 0.8rem;
    text-align: left;
    align-items: flex-start;
  }

  .inline-links {
    line-height: 1.8;
  }
}

/* Floating CTA mobile */
@media (max-width: 640px) {
  .floating-cta {
    right: 14px;
    bottom: 14px;
    font-size: 0.9rem;
    padding: 0.55rem 0.75rem;
  }

  .floating-cta .pill {
    padding: 0.25rem 0.45rem;
  }
}

/* Tablet layout: keep cards balanced */
@media (min-width: 769px) and (max-width: 1100px) {
  .pricing-grid,
  .product-grid,
  .feature-grid,
  .resource-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card,
  .plan-card {
    min-height: auto;
  }
}

/* Touch target comfort */
@media (pointer: coarse) {
  .button,
  nav a,
  .floating-cta {
    min-height: 44px;
  }
}


/* ==================================================
   KAAASH IFRS-16 Homepage Showcase Slider
================================================== */
.platform-showcase{position:relative;overflow:hidden;color:#fff;background:radial-gradient(900px 520px at 8% 12%,rgba(212,162,76,.25),transparent 58%),radial-gradient(850px 500px at 92% 18%,rgba(64,188,226,.20),transparent 56%),linear-gradient(135deg,#071525 0%,#113A5C 55%,#071525 100%)!important;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(13,27,42,.28)}
.platform-showcase:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:34px 34px;opacity:.28;pointer-events:none}
.showcase-head,.showcase-shell{position:relative;z-index:1}.showcase-head{max-width:920px;margin-bottom:1.35rem}.showcase-head h2{color:#fff!important;font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.04em;margin:.8rem 0 .85rem}.showcase-head p{color:rgba(255,255,255,.88)!important;max-width:820px;font-size:1.08rem}
.showcase-shell{border-radius:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);backdrop-filter:blur(12px);padding:clamp(.75rem,1.6vw,1.25rem);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 60px rgba(0,0,0,.24)}
.showcase-main{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;gap:.8rem;align-items:center}.showcase-window{overflow:hidden;border-radius:22px;border:1px solid rgba(255,255,255,.16);background:#eaf0f6;box-shadow:0 20px 50px rgba(0,0,0,.22)}.showcase-track{display:flex;transition:transform 520ms ease;will-change:transform}
.showcase-slide{min-width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:0;margin:0!important;padding:0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important;border:0!important;overflow:hidden}.showcase-slide img{width:100%;height:520px;object-fit:cover;object-position:top left;display:block;background:#eef3f8}
.showcase-caption{display:flex;flex-direction:column;justify-content:center;padding:clamp(1.4rem,3vw,2.4rem);background:radial-gradient(500px 320px at 10% 10%,rgba(212,162,76,.18),transparent 56%),linear-gradient(180deg,#fff,#f7f9fc);color:var(--primary-blue)}.showcase-caption span{width:fit-content;border-radius:999px;border:1px solid rgba(212,162,76,.40);background:rgba(212,162,76,.15);color:var(--primary-blue);padding:.35rem .75rem;font-size:.78rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.showcase-caption h3{color:var(--primary-blue)!important;font-size:clamp(1.55rem,2.3vw,2.35rem);line-height:1.12;letter-spacing:-.035em;margin:1rem 0 .65rem}.showcase-caption p{color:rgba(13,27,42,.75)!important;line-height:1.7;font-size:1rem;margin:0}
.showcase-arrow{width:48px;height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(8px)}.showcase-arrow:hover{background:var(--brand-gold);color:var(--primary-blue)}
.showcase-footer{margin-top:1rem;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}.showcase-dots{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}.showcase-dots button{width:10px;height:10px;min-height:10px;border-radius:999px;border:0;padding:0;background:rgba(255,255,255,.28);cursor:pointer;box-shadow:none}.showcase-dots button.active{width:28px;background:var(--brand-gold)}.showcase-actions{display:flex;gap:.75rem;flex-wrap:wrap}.platform-showcase .button.secondary{background:transparent;color:#fff!important;border-color:rgba(255,255,255,.72)}.platform-showcase .button.secondary:hover{background:#fff;color:var(--primary-blue)!important}
@media(max-width:980px){.showcase-main{grid-template-columns:1fr}.showcase-arrow{display:none}.showcase-slide{grid-template-columns:1fr}.showcase-slide img{height:auto;max-height:560px;object-fit:contain;object-position:top center}.showcase-caption{padding:1.25rem}}@media(max-width:640px){.showcase-shell{padding:.65rem;border-radius:18px}.showcase-window{border-radius:16px}.showcase-footer{align-items:stretch}.showcase-actions{width:100%;flex-direction:column}.showcase-actions .button{width:100%}}

.service-pro-card{
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:360px;
}

.service-lead{
  font-size:1.03rem;
  line-height:1.75;
  color:#4b5563;
}

.service-points{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service-points li{
  position:relative;
  padding-left:24px;
  color:#111827;
  font-weight:500;
}

.service-points li::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:#d4a63f;
  position:absolute;
  left:0;
  top:10px;
}

.service-footer{
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid rgba(15,23,42,0.08);
  color:#64748b;
  font-size:.95rem;
}