/* ============================================
   LottoHaus Portal — Custom Homepage Styles
   BRANDING: change only the :root variables below
   to re-skin the entire page.
   ============================================ */

:root {
  /* Declared here as well as in portal.css so this file is usable on its own.
     Identical values; portal.css simply wins when both are loaded. */
  --font-ui: Calibri, Carlito, 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: 'Cascadia Mono', Consolas, 'SF Mono', ui-monospace, monospace;

  /* ---- Brand colors (swap these to re-theme) ---- */
  --brand-primary: #0b3d91;      /* deep blue   */
  --brand-accent: #fb7185;      /* bright rose */
  --brand-accent-dark: #f43f5e;
  --brand-accent-light: #fda4af;
  --brand-accent-text: #b3122b;   /* text on light surfaces */
  --brand-primary-deep: #0a1f3c;

  --accent: var(--brand-accent);

  --dark: #06121f;
  --text-dark: #16283d;
  --text-muted: #5c6f85;
  --text-light: #f2f7fd;
  --white: #ffffff;
  --bg-light: #f8fbff;
  --bg-section: #eef4fc;
  --border: #d9e4f2;

  --shadow-sm: 0 2px 8px rgba(11, 61, 145, 0.08);
  --shadow-md: 0 8px 32px rgba(11, 61, 145, 0.12);
  --shadow-lg: 0 20px 60px rgba(11, 61, 145, 0.18);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-dark);
  background: var(--white);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.25;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ============================================
   CONTAINER
   ============================================ */

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================
   NAVIGATION
   ============================================ */

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: var(--transition);
}

.site-nav.scrolled {
  background: rgba(10, 31, 60, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 12px 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The supplied LottoHaus logo is dark artwork on white, so it sits on a white
   plate to stay legible against the dark navy navigation. */
.nav-logo {
  height: 62px;
  width: auto;
  object-fit: contain;
  padding: 9px 18px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: var(--transition);
}

.nav-brand:hover .nav-logo {
  transform: scale(1.05);
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  font-weight: 500;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  letter-spacing: 0.01em;
}

.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.13);
}

.nav-link-login {
  display: none;
}

/* Glass surface: a translucent white fill, a blurred backdrop and a bright
   top hairline. The inset highlight is what reads as "glass" rather than
   "faded" -- light catching the upper bevel. */
.btn-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
              0 6px 18px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  transition: var(--transition);
}

/* The sheen sits over the whole button and slides across on hover. */
.btn-glass::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%,
                                     rgba(255, 255, 255, 0.28) 50%,
                                     rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
  transition: left 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45),
              0 12px 30px rgba(0, 0, 0, 0.24);
}

.btn-glass:hover::after {
  left: 120%;
}

.btn-glass:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.85);
  outline-offset: 3px;
}

.nav-cta {
  font-size: 15px;
  font-weight: 700;
  padding: 11px 28px;
  margin-left: 10px;
  letter-spacing: 0.01em;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

.nav-toggle span {
  display: block;
  width: 26px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
  transform-origin: center;
}

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

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

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

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
  position: relative;
  height: 100vh;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--brand-primary);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  transform: scale(1.04);
  transition: transform 8s ease;
}

.hero:hover .hero-image {
  transform: scale(1.0);
}

/* The hero art is a square 640x640 animated composition, so it is floated whole
   over the navy backdrop rather than cropped to fill a wide hero. */
.hero-art {
  object-fit: contain;
  object-position: center;
  transform: none;
  opacity: 0.72;
}
.hero:hover .hero-art { transform: none; }

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(11, 61, 145, 0.82) 0%,
    rgba(10, 31, 60, 0.70) 45%,
    rgba(0, 0, 0, 0.52) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  max-width: 860px;
  padding: 0 24px;
  padding-top: 88px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(251, 113, 133, 0.18);
  border: 1px solid rgba(251, 113, 133, 0.45);
  color: var(--brand-accent);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 22px;
  border-radius: 100px;
  margin-bottom: 32px;
}

.hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.hero-title {
  font-size: clamp(2.5rem, 6.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.13;
  margin-bottom: 24px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
  letter-spacing: -0.02em;
}

.hero-highlight {
  /* Pink through to orange. The flat accent colour stays as the fallback so
     the line still reads correctly where background clipping is unsupported. */
  color: var(--brand-accent);
  background: linear-gradient(95deg, #f43f5e 0%, #fb5c7d 34%, #fb8c3c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block;
  /* text-shadow cannot be clipped to the glyphs, so it would show as a dark
     duplicate behind the gradient. A drop-shadow filter follows the letters. */
  text-shadow: none;
  filter: drop-shadow(0 2px 14px rgba(244, 63, 94, 0.28));
}

.hero-subtitle {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto 48px;
}

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.btn-primary-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Rose into red, so the button is the warmest thing on a dark blue hero. */
  background: linear-gradient(120deg, #fb5c7d 0%, #f43f5e 58%, #e11d48 100%);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 16px 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: var(--transition);
  /* Two shadows: a tight one to lift the button off the background, a wider
     one for the coloured glow. */
  box-shadow: 0 6px 18px rgba(225, 29, 72, 0.34),
              0 0 22px rgba(244, 63, 94, 0.22);
  letter-spacing: 0.01em;
}

.btn-primary-hero:hover {
  background: linear-gradient(120deg, #fb7185 0%, #f43f5e 55%, #be123c 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(225, 29, 72, 0.46),
              0 0 34px rgba(251, 113, 133, 0.38);
}

.btn-primary-hero:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(225, 29, 72, 0.34);
}

.btn-primary-hero:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
}

.btn-secondary-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 38px;
  letter-spacing: 0.01em;
}

.btn-secondary-hero:hover {
  transform: translateY(-2px);
}

.hero-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-md);
  padding: 24px 0;
  width: fit-content;
  margin: 0 auto;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 40px;
}

.stat-number {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--brand-accent);
  line-height: 1;
  font-family: var(--font-display);
}

.stat-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.stat-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
}

.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.55);
  z-index: 1;
  animation: bounce-arrow 2.4s ease-in-out infinite;
  transition: var(--transition);
}

.hero-scroll:hover {
  color: var(--brand-accent);
}

@keyframes bounce-arrow {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(10px); }
}

/* ============================================
   FEATURES (ROLES) SECTION
   ============================================ */

.features {
  padding: 110px 0;
  background: var(--white);
}

.section-header {
  text-align: center;
  margin-bottom: 72px;
}

.section-tag {
  display: inline-block;
  background: rgba(11, 61, 145, 0.09);
  color: var(--brand-primary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 7px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.section-title {
  font-size: clamp(1.85rem, 4vw, 2.85rem);
  color: var(--text-dark);
  margin-bottom: 18px;
  letter-spacing: -0.02em;
}

.section-subtitle {
  font-size: 1.05rem;
  color: var(--text-muted);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.75;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

/* ============================================
   ROLE CARDS — premium enterprise surface
   ============================================ */

.feature-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 34px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(11, 61, 145, 0.05),
              0 10px 26px rgba(11, 61, 145, 0.07);
}

/* Glass highlight: a diagonal sheen across the upper half, kept at zero
   opacity until hover so the resting card stays clean. */
.feature-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%,
                                     rgba(255, 255, 255, 0) 46%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.feature-card:hover::before {
  opacity: 1;
}

/* Accent rail that wipes in along the top edge on hover. */
.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary-deep), var(--brand-primary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.feature-card:hover::after {
  opacity: 1;
}

.feature-card:hover {
  transform: translateY(-10px);
  border-color: rgba(11, 61, 145, 0.18);
  box-shadow: 0 8px 18px rgba(11, 61, 145, 0.08),
              0 28px 60px rgba(11, 61, 145, 0.16);
}

/* Keeps card content above both pseudo-element layers. */
.feature-card > * {
  position: relative;
  z-index: 1;
}

.featured-card {
  background: linear-gradient(155deg, #10357f 0%, var(--brand-primary) 55%,
                                     #16418f 100%);
  border-color: transparent;
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(11, 61, 145, 0.22),
              0 26px 56px rgba(11, 61, 145, 0.26);
}

.featured-card::after {
  background: linear-gradient(90deg, var(--brand-accent), rgba(251, 113, 133, 0.6));
  opacity: 1;
}

.featured-card:hover {
  transform: translateY(-14px);
  box-shadow: 0 12px 26px rgba(11, 61, 145, 0.28),
              0 36px 76px rgba(11, 61, 145, 0.34);
}

/* The sheen above is tuned for the white cards, where it reads as glass. On
   this dark card it washes out the white body text, so it runs far weaker here
   and stays a faint light sweep. */
.featured-card::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%,
                                     rgba(255, 255, 255, 0) 44%);
}

/* Small uppercase pill; one hue per card so the three read as a set. */
.card-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.card-badge-blue {
  background: rgba(11, 61, 145, 0.08);
  border: 1px solid rgba(11, 61, 145, 0.16);
  color: var(--brand-primary);
}

.card-badge-rose {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(251, 113, 133, 0.5);
  color: #ffd7de;
}

.card-badge-slate {
  background: linear-gradient(135deg, rgba(11, 61, 145, 0.08), rgba(11, 61, 145, 0.02));
  border: 1px solid rgba(11, 61, 145, 0.14);
  color: #40607f;
}

/* Large icon tile: 24px radius to match the card, a soft gradient wash, and a
   hairline so it reads as its own surface rather than a flat swatch. */
.card-icon {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 26px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}

.card-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.6;
}

.feature-card:hover .card-icon {
  transform: translateY(-5px) scale(1.05);
}

.operator-icon {
  background: linear-gradient(140deg, rgba(11, 61, 145, 0.14) 0%,
                                     rgba(11, 61, 145, 0.05) 100%);
  border: 1px solid rgba(11, 61, 145, 0.12);
  color: var(--brand-primary);
  box-shadow: 0 6px 16px rgba(11, 61, 145, 0.12);
}

.writer-icon {
  background: linear-gradient(140deg, rgba(15, 118, 110, 0.14) 0%,
                                     rgba(15, 118, 110, 0.04) 100%);
  border: 1px solid rgba(15, 118, 110, 0.16);
  color: #0f766e;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.14);
}

/* On the dark featured card the tile is glass rather than tinted. */
.agent-icon {
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.24) 0%,
                                     rgba(255, 255, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
}

.card-title {
  font-size: 1.4rem;
  margin-bottom: 14px;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

.featured-card .card-title {
  color: #fff;
}

.card-text {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 28px;
  line-height: 1.7;
}

.featured-card .card-text {
  color: rgba(255, 255, 255, 0.72);
}

.card-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-list li {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dark);
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-list li::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px;
}

.featured-card .card-list li {
  color: rgba(255, 255, 255, 0.88);
}

.featured-card .card-list li::before {
  background-color: var(--brand-accent);
}

/* ============================================
   MODULES GRID
   ============================================ */

.feature-section {
  background: var(--bg-section);
}

.modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

/* Same surface treatment as the role and plan cards: 24px corners, two-layer
   soft shadow, a glass sheen and an accent rail on hover. */
.module-item {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 34px;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
  box-shadow: 0 2px 6px rgba(11, 61, 145, 0.05),
              0 10px 26px rgba(11, 61, 145, 0.07);
}

.module-item::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%,
                                     rgba(255, 255, 255, 0) 46%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.module-item:hover::before {
  opacity: 1;
}

.module-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary-deep), var(--brand-primary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.module-item:hover::after {
  opacity: 1;
}

.module-item > * {
  position: relative;
  z-index: 1;
}

.module-item:hover {
  transform: translateY(-10px);
  border-color: rgba(11, 61, 145, 0.18);
  box-shadow: 0 8px 18px rgba(11, 61, 145, 0.08),
              0 28px 60px rgba(11, 61, 145, 0.16);
}

/* Six modules need more separation than three cards do, so the tile hue
   carries the distinction and the badge names it. */
.module-icon {
  width: 84px;
  height: 84px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.45s ease;
}

.module-icon svg {
  width: 40px;
  height: 40px;
  stroke-width: 1.6;
}

.module-item:hover .module-icon {
  transform: translateY(-5px) scale(1.05);
}

/* One hue per module. Every tile is a tinted gradient with a hairline and its
   own shadow, matching the shape of the role-card and plan-card tiles. */
.module-blue {
  background: linear-gradient(140deg, rgba(11, 61, 145, 0.14) 0%, rgba(11, 61, 145, 0.05) 100%);
  border: 1px solid rgba(11, 61, 145, 0.12);
  color: var(--brand-primary);
  box-shadow: 0 6px 16px rgba(11, 61, 145, 0.12);
}

.module-teal {
  background: linear-gradient(140deg, rgba(15, 118, 110, 0.14) 0%, rgba(15, 118, 110, 0.04) 100%);
  border: 1px solid rgba(15, 118, 110, 0.16);
  color: #0f766e;
  box-shadow: 0 6px 16px rgba(15, 118, 110, 0.14);
}

.module-violet {
  background: linear-gradient(140deg, rgba(124, 58, 237, 0.13) 0%, rgba(124, 58, 237, 0.04) 100%);
  border: 1px solid rgba(124, 58, 237, 0.16);
  color: #6d28d9;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.13);
}

.module-amber {
  background: linear-gradient(140deg, rgba(217, 131, 36, 0.16) 0%, rgba(217, 131, 36, 0.05) 100%);
  border: 1px solid rgba(217, 131, 36, 0.18);
  color: #b45309;
  box-shadow: 0 6px 16px rgba(217, 131, 36, 0.14);
}

.module-rose {
  background: linear-gradient(140deg, rgba(244, 63, 94, 0.14) 0%, rgba(244, 63, 94, 0.04) 100%);
  border: 1px solid rgba(244, 63, 94, 0.16);
  color: #e11d48;
  box-shadow: 0 6px 16px rgba(244, 63, 94, 0.13);
}

.module-slate {
  background: linear-gradient(140deg, rgba(71, 85, 105, 0.14) 0%, rgba(71, 85, 105, 0.04) 100%);
  border: 1px solid rgba(71, 85, 105, 0.16);
  color: #334155;
  box-shadow: 0 6px 16px rgba(71, 85, 105, 0.12);
}

/* Matching badge hues, keyed to the tile above each one. */
.module-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 100px;
  margin-bottom: 22px;
}

.module-tag-blue { background: rgba(11, 61, 145, 0.08); border: 1px solid rgba(11, 61, 145, 0.16); color: var(--brand-primary); }
.module-tag-teal { background: rgba(15, 118, 110, 0.09); border: 1px solid rgba(15, 118, 110, 0.18); color: #0f766e; }
.module-tag-violet { background: rgba(124, 58, 237, 0.08); border: 1px solid rgba(124, 58, 237, 0.18); color: #6d28d9; }
.module-tag-amber { background: rgba(217, 131, 36, 0.1); border: 1px solid rgba(217, 131, 36, 0.2); color: #b45309; }
.module-tag-rose { background: rgba(244, 63, 94, 0.08); border: 1px solid rgba(244, 63, 94, 0.18); color: #e11d48; }
.module-tag-slate { background: rgba(71, 85, 105, 0.09); border: 1px solid rgba(71, 85, 105, 0.16); color: #334155; }

.module-title {
  font-size: 1.12rem;
  margin-bottom: 10px;
  color: var(--text-dark);
  letter-spacing: -0.01em;
}

.module-text {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* ============================================
   INTEGRATIONS SECTION
   ============================================ */

.partners {
  padding: 80px 0;
  background: var(--white);
}

.partners-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 52px;
}

.partner-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 40px;
  background: #fff;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border);
  transition: var(--transition);
  min-width: 190px;
}

.partner-item:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-5px);
  border-color: var(--brand-primary);
}

.partner-item img {
  max-height: 50px;
  max-width: 150px;
  object-fit: contain;
  transition: var(--transition);
}

.partner-fallback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-primary);
  letter-spacing: -0.02em;
}

/* ============================================
   PRICING
   ============================================ */

.pricing-section {
  background: var(--bg-light);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}

.plan-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 40px 34px;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease, border-color 0.4s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(11, 61, 145, 0.05),
              0 10px 26px rgba(11, 61, 145, 0.07);
}

/* Same glass sheen the role cards use, so the two sections read as one
   system rather than two separate card designs. */
.plan-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%,
                                     rgba(255, 255, 255, 0) 46%);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.plan-card:hover::before {
  opacity: 1;
}

.plan-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-primary-deep), var(--brand-primary));
  opacity: 0;
  transition: opacity 0.4s ease;
}

.plan-card:hover::after {
  opacity: 1;
}

.plan-card > * {
  position: relative;
  z-index: 1;
}

.plan-card:hover {
  transform: translateY(-10px);
  border-color: rgba(11, 61, 145, 0.18);
  box-shadow: 0 8px 18px rgba(11, 61, 145, 0.08),
              0 28px 60px rgba(11, 61, 145, 0.16);
}

.plan-featured {
  background: linear-gradient(155deg, #10357f 0%, var(--brand-primary) 55%,
                                     #16418f 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 8px 20px rgba(11, 61, 145, 0.22),
              0 26px 56px rgba(11, 61, 145, 0.26);
  transform: translateY(-6px);
}

.plan-featured:hover {
  transform: translateY(-14px);
  box-shadow: 0 12px 26px rgba(11, 61, 145, 0.28),
              0 36px 76px rgba(11, 61, 145, 0.34);
}

/* Same dark card, same contrast problem as .featured-card above. */
.plan-featured::before {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1) 0%,
                                     rgba(255, 255, 255, 0) 44%);
}

/* Plan icon tile inherits the role-card tile look; only the spacing differs,
   because a plan card carries more text below it. */
.plan-icon {
  margin-bottom: 22px;
}

.plan-card:hover .plan-icon {
  transform: translateY(-5px) scale(1.05);
}

.plan-name {
  font-size: 1.25rem;
  margin-bottom: 14px;
  color: var(--text-dark);
}

.plan-featured .plan-name {
  color: #fff;
}

.plan-price {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 14px;
  color: var(--text-dark);
}

.plan-featured .plan-price {
  color: #fff;
}

.plan-featured .plan-currency {
  /* The featured card is navy, so the bright accent is the readable choice. */
  color: var(--brand-accent);
}

.plan-currency {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--brand-accent-text);
  align-self: flex-start;
  margin-top: 6px;
  /* Calibri does carry U+20B5, but the sans-serif fallback at the end of
     --font-ui may be a face without it, so keep a named cedi-capable face in
     the chain or the sign renders as an empty box. */
  font-family: var(--font-ui), 'Noto Sans', 'DejaVu Sans', sans-serif;
}

.plan-amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-family: var(--font-display);
}

.plan-amount-custom {
  font-size: 2.4rem;
}

.plan-period {
  font-size: 1rem;
  color: var(--text-muted);
  font-weight: 500;
}

.plan-featured .plan-period {
  color: rgba(255, 255, 255, 0.65);
}

.plan-desc {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 26px;
}

.plan-featured .plan-desc {
  color: rgba(255, 255, 255, 0.72);
}

.plan-list {
  margin-bottom: 32px;
  flex-grow: 1;
}

/* Matches the hero's primary button: rose-to-red gradient, white text,
   fully rounded, with a soft glow. */
.plan-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: linear-gradient(120deg, #fb5c7d 0%, #f43f5e 58%, #e11d48 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: var(--transition);
  letter-spacing: 0.01em;
  box-shadow: 0 6px 16px rgba(225, 29, 72, 0.28),
              0 0 18px rgba(244, 63, 94, 0.16);
}

.plan-btn:hover {
  background: linear-gradient(120deg, #fb7185 0%, #f43f5e 55%, #be123c 100%);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(225, 29, 72, 0.38),
              0 0 28px rgba(251, 113, 133, 0.3);
}

.plan-btn:focus-visible {
  outline: 3px solid rgba(11, 61, 145, 0.55);
  outline-offset: 3px;
}

/* Secondary treatment for the enterprise tier, which routes to sales rather
   than self-service signup. */
.plan-btn-outline {
  background: transparent;
  color: var(--brand-primary);
  border: 1.5px solid var(--border);
  box-shadow: none;
}

.plan-btn-outline:hover {
  background: var(--brand-primary);
  color: #fff;
  border-color: var(--brand-primary);
  box-shadow: 0 8px 20px rgba(11, 61, 145, 0.24);
}

/* ============================================
   CTA SECTION
   ============================================ */

.cta-section {
  padding: 110px 0;
  background: linear-gradient(140deg, var(--brand-primary-deep) 0%, var(--brand-primary) 100%);
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -15%;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}

.cta-section::after {
  content: '';
  position: absolute;
  bottom: -45%;
  left: -8%;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}

.cta-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  color: var(--brand-accent);
  margin-bottom: 28px;
}

.cta-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 18px;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.cta-subtitle {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto 48px;
  max-width: 560px;
  line-height: 1.7;
}

.cta-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-accent);
  color: var(--dark);
  font-size: 16px;
  font-weight: 700;
  padding: 18px 48px;
  border-radius: var(--radius-sm);
  transition: var(--transition);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
  letter-spacing: 0.01em;
}

.cta-btn-primary:hover {
  background: var(--brand-accent-dark);
  color: var(--dark);
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28);
}

.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  padding: 18px 48px;
  border-radius: var(--radius-sm);
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  transition: var(--transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
  transform: translateY(-3px);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background: var(--dark);
  color: rgba(255, 255, 255, 0.65);
  padding: 70px 0 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-logos {
  display: inline-flex;
  align-items: center;
  margin-bottom: 22px;
}

.footer-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
  padding: 7px 14px;
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  transition: var(--transition);
}

.footer-logos:hover .footer-logo {
  transform: scale(1.04);
}


.footer-tagline {
  font-size: 14px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.45);
  max-width: 300px;
}

.footer-links h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}

.footer-links ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-links ul li a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.footer-links ul li a:hover {
  color: var(--brand-accent);
  padding-left: 4px;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 0;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
}

.footer-badges {
  display: flex;
  gap: 10px;
}

.badge-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(11, 61, 145, 0.2);
  border: 1px solid rgba(11, 61, 145, 0.4);
  color: rgba(255, 255, 255, 0.55);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
}

.badge-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-accent);
  flex-shrink: 0;
}

/* ============================================
   SCROLL REVEAL
   ============================================ */

.reveal-init {
  opacity: 0;
  transform: translateY(24px);
}

.reveal-init.revealed {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-init {
    opacity: 1;
    transform: none;
  }
  html {
    scroll-behavior: auto;
  }
  /* The glass sheen sweeps across on hover; without motion it simply stays
     at rest, which still leaves the highlight and blurred backdrop. */
  .btn-glass,
  .btn-glass:hover,
  .btn-glass::after {
    transition: none;
    transform: none;
  }

  .btn-glass::after {
    display: none;
  }

  /* The cards keep every visual state, just without the movement. */
  .feature-card,
  .feature-card:hover,
  .featured-card,
  .featured-card:hover,
  .card-icon,
  .feature-card:hover .card-icon,
  .plan-card,
  .plan-card:hover,
  .plan-featured,
  .plan-featured:hover,
  .plan-card:hover .plan-icon,
  .plan-btn:hover,
  .module-item,
  .module-item:hover,
  .module-icon,
  .module-item:hover .module-icon {
    transform: none;
    transition: none;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
  .cards-grid,
  .modules-grid,
  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-card,
  .plan-featured {
    grid-column: span 2;
    transform: none;
  }

  .featured-card:hover,
  .plan-featured:hover {
    transform: translateY(-10px);
  }
}

@media (max-width: 768px) {
  /* Without JavaScript the off-canvas panel can never be opened, so the links
     stay in flow and remain clickable. The burger is hidden to match. */
  .nav-toggle {
    display: none;
  }

  .nav-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .nav-link-login {
    display: inline-block;
  }

  /* The row is tight once the links wrap, so the logo eases back down. */
  .nav-logo {
    height: 48px;
    padding: 7px 14px;
  }

  /* Push hero content well clear of the fixed navbar on mobile */
  .hero-content {
    padding-top: 210px;
  }

  .has-js .nav-toggle {
    display: flex;
  }

  .has-js .nav-links {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(300px, 85vw);
    height: 100vh;
    background: var(--brand-primary-deep);
    flex-direction: column;
    align-items: flex-start;
    padding: 90px 24px 40px;
    gap: 4px;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 40px rgba(0, 0, 0, 0.25);
    z-index: 999;
  }

  .has-js .nav-links.open {
    right: 0;
  }

  .nav-link, .nav-cta {
    width: 100%;
    padding: 14px 18px;
    margin: 0;
    border-radius: var(--radius-sm);
  }

  .nav-cta {
    margin-top: 12px;
    text-align: center;
    justify-content: center;
  }

  .hero-stats {
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px;
  }

  .stat {
    padding: 0 20px;
    min-width: 80px;
  }

  .stat-divider {
    display: none;
  }

  .cards-grid,
  .modules-grid,
  .plans-grid {
    grid-template-columns: 1fr;
  }

  .featured-card,
  .plan-featured {
    grid-column: span 1;
    transform: translateY(-4px);
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .partners-grid {
    gap: 16px;
  }

  .partner-item {
    min-width: 150px;
    padding: 20px 28px;
  }

  .features,
  .cta-section {
    padding: 80px 0;
  }
}

@media (max-width: 480px) {
  .hero-content {
    padding-top: 190px;
  }

  .hero-title {
    font-size: 2.1rem;
  }

  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-primary-hero,
  .btn-secondary-hero,
  .cta-btn-primary,
  .cta-btn-secondary {
    justify-content: center;
    width: 100%;
    max-width: 320px;
    padding-left: 20px;
    padding-right: 20px;
  }

  .section-title {
    font-size: 1.7rem;
  }

  .stat-number {
    font-size: 1.7rem;
  }
}

/* ============================================
   TOASTS (public pages)
   ============================================ */

.toast-stack {
  position: fixed;
  top: 78px;
  right: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 400px;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 15px;
  background: var(--white);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  font-size: 13.5px;
  color: var(--text-dark);
  animation: toast-in 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.toast.is-leaving { opacity: 0; transform: translateX(24px); transition: all 0.25s; }

.toast-icon {
  display: grid; place-items: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
  color: #fff;
  background: var(--brand-primary);
}

.toast-text { flex: 1; line-height: 1.5; }

.toast-close {
  background: none; border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--text-dark); background: var(--bg-section); }

.toast-success { border-left-color: #0f9d58; }
.toast-success .toast-icon { background: #0f9d58; }
.toast-error { border-left-color: #dc2626; }
.toast-error .toast-icon { background: #dc2626; }
.toast-warning { border-left-color: #d98324; }
.toast-warning .toast-icon { background: #d98324; }

@media (max-width: 640px) {
  .toast-stack { right: 12px; left: 12px; max-width: none; }
}