/* Copyright (c) 2026 Peakora. All rights reserved. Licensed under the MIT License; see NOTICE and LICENSE. */
/* ------------------------------------------------------
   PEAKORA - EMOTIONAL LUXURY WELLNESS THEME
   Deep Dark Atmosphere, Warm Glowing Accents, Centered Editorial Layout
------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* RESET & BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-main: #0c0a15;
  --bg-card: #151122;
  --bg-card-hover: #1d182e;
  --bg-glass: rgba(21, 17, 34, 0.85);
  
  --primary: #e07a5f;
  --primary-glow: rgba(224, 122, 95, 0.35);
  --accent-amber: #f4a261;
  --accent-violet: #a78bfa;
  --accent-emerald: #34d399;
  
  --primary-gradient: linear-gradient(135deg, #e07a5f 0%, #f4a261 50%, #a78bfa 100%);
  --dark-gradient: linear-gradient(180deg, #0c0a15 0%, #130f24 50%, #0c0a15 100%);
  --glow-gradient: radial-gradient(circle at center, rgba(224, 122, 95, 0.18) 0%, rgba(167, 139, 250, 0.09) 50%, transparent 75%);

  --text-primary: #f8fafc;
  --text-muted: #a0aec0;
  --text-light: #cbd5e1;
  
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glow: rgba(224, 122, 95, 0.3);
  
  --shadow-sm: 0 6px 24px -2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 20px 48px -6px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 16px 40px -4px rgba(224, 122, 95, 0.28), 0 0 28px -2px rgba(167, 139, 250, 0.2);
  --shadow-frame: 0 20px 50px -10px rgba(0, 0, 0, 0.85), 0 0 38px rgba(224, 122, 95, 0.3), 0 0 20px rgba(167, 139, 250, 0.2);
  --shadow-frame-hover: 0 28px 64px -8px rgba(0, 0, 0, 0.9), 0 0 55px rgba(224, 122, 95, 0.45), 0 0 28px rgba(167, 139, 250, 0.3);
  --shadow-card: 0 22px 50px -8px rgba(0, 0, 0, 0.8), 0 0 36px rgba(224, 122, 95, 0.35);
  
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 26px;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--text-primary);
  background-color: var(--bg-main);
  background-image: var(--dark-gradient);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Scroll Offset */
[id] {
  scroll-margin-top: 80px;
}

.container {
  width: 92%;
  max-width: 1200px;
  margin: 0 auto;
}

/* ------------------------------------------------------
   ANIMATIONS & KEYFRAMES
------------------------------------------------------ */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pulseGlow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
  animation: fadeIn 1s ease forwards;
}

.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }

/* UNFRAMED ELEGANT SECTION EYEBROW / HEADER */
.section-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  color: var(--accent-amber);
  border: none;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 14px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
}

/* ------------------------------------------------------
   HEADER — STICKY GLASSMORPHISM DARK
------------------------------------------------------ */
.header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(12, 10, 21, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: all 0.3s ease;
}

.header-inner {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  margin-right: 16px;
  flex-shrink: 0;
}

header .brand img.brand-logo,
.footer-logo img {
  height: 40px !important;
  width: auto !important;
  object-fit: contain;
  filter: brightness(0) invert(1) drop-shadow(0 0 2px rgba(244, 162, 97, 0.9)) drop-shadow(0 0 12px rgba(224, 122, 95, 0.6));
  transition: transform 0.3s ease, filter 0.3s ease;
}

header .brand img.brand-logo:hover,
.footer-logo img:hover {
  transform: scale(1.04);
  filter: brightness(0) invert(1) drop-shadow(0 0 4px rgba(244, 162, 97, 1)) drop-shadow(0 0 20px rgba(224, 122, 95, 0.85));
}

.header-right-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

/* NAVIGATION LINKS */
.nav {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.nav-link {
  text-decoration: none;
  color: var(--text-light);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  position: relative;
  transition: color 0.25s ease;
  padding: 6px 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-gradient);
  border-radius: 2px;
  transition: width 0.3s ease;
}

.nav-link:hover {
  color: #ffffff;
}

.nav-link:hover::after {
  width: 100%;
}

/* SOCIAL ICONS */
.header-social,
.footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-social a,
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  transition: all 0.25s ease;
}

.header-social a:hover,
.footer-social a:hover {
  background: rgba(224, 122, 95, 0.2);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(224, 122, 95, 0.3);
}

/* ------------------------------------------------------
   HERO SECTION — CENTER ALIGNED EDITORIAL LAYOUT
------------------------------------------------------ */
.hero {
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.hero-bg-glow {
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(224, 122, 95, 0.22) 0%, rgba(167, 139, 250, 0.12) 45%, transparent 70%);
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  animation: pulseGlow 10s ease-in-out infinite;
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 36px;
}

.hero-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
  text-align: center;
}

.hero-eyebrow {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent, #f4a261);
  background: rgba(244, 162, 97, 0.12);
  border: 1px solid rgba(244, 162, 97, 0.3);
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero-title span.highlight {
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero-sub {
  font-size: 19px;
  line-height: 1.7;
  color: var(--text-muted);
  margin-bottom: 32px;
  max-width: 680px;
  text-align: center;
}

.hero-ctas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

/* HERO BUTTON */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 44px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 17px;
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-glow);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-hero-primary:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 48px -4px rgba(224, 122, 95, 0.45), 0 0 32px rgba(167, 139, 250, 0.35);
}

.btn-hero-primary:active {
  transform: translateY(-1px);
}

/* HERO IMAGE WRAPPER WITH GLOW FRAME */
.hero-image-wrap {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}

.hero-img-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-frame);
  border: 1px solid rgba(224, 122, 95, 0.35);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.hero-img-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, transparent 65%, rgba(12, 10, 21, 0.55) 100%);
  pointer-events: none;
}

.hero-img-frame:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-frame-hover);
  border-color: rgba(224, 122, 95, 0.5);
}

.hero-img-frame img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* ------------------------------------------------------
   WHY PEAKORA SECTION
------------------------------------------------------ */
.why {
  padding: 64px 0;
  position: relative;
}

.section-header-center {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}

.section-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
  text-align: center;
}

.section-lead {
  font-size: 18px;
  line-height: 1.65;
  color: var(--text-muted);
  text-align: center;
}

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

/* Differentiation section ("Not a content library") */
.diff-eyebrow {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(244, 162, 97, 0.12);
  border: 1px solid rgba(244, 162, 97, 0.3);
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.diff-section .what-card {
  /* keep the standard card; the section is distinguished by the eyebrow */
}

.diff-signature {
  position: relative;
}

.diff-signature::after {
  content: 'Signature';
  position: absolute;
  top: 14px;
  right: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0c0a15;
  background: var(--theme-primary-grad, linear-gradient(135deg, #e07a5f, #f4a261, #a78bfa));
  padding: 4px 10px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .diff-section .what-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .diff-section .what-grid {
    grid-template-columns: 1fr;
  }
}

.what-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 36px 28px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background 0.4s ease;
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.what-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.what-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-card);
  border-color: rgba(224, 122, 95, 0.4);
}

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

/* UNFRAMED CLEAN ORGANIC ICONS */
.icon-wrap-new {
  width: auto;
  height: auto;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.icon-wrap-new svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 0 10px rgba(244, 162, 97, 0.45));
}

.what-card:hover .icon-wrap-new {
  transform: scale(1.15) translateY(-3px);
  filter: drop-shadow(0 0 20px rgba(224, 122, 95, 0.75));
}

.what-card h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
  text-align: center;
}

.what-card p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.8;
  text-align: center;
}

/* ------------------------------------------------------
   REAL LIFE SECTION
------------------------------------------------------ */
.real-life {
  padding: 64px 0;
  position: relative;
}

.real-life-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: center;
}

.real-life-illustration {
  position: relative;
}

.real-life-illustration img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-frame);
  border: 1px solid rgba(224, 122, 95, 0.35);
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.real-life-illustration:hover img {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-frame-hover);
  border-color: rgba(224, 122, 95, 0.5);
}

.real-life-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.real-life-point {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.real-life-point:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 122, 95, 0.35);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.6), 0 0 24px rgba(224, 122, 95, 0.2);
}

.real-life-point h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  text-align: center;
}

.real-life-point p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
}

.real-life-reassurance {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.14), rgba(167, 139, 250, 0.12));
  border: 1.5px dashed rgba(224, 122, 95, 0.38);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  font-size: 16px;
  color: #ffffff;
  line-height: 1.65;
  box-shadow: 0 0 30px rgba(224, 122, 95, 0.1);
  text-align: center;
}

.real-life-reassurance strong {
  color: var(--accent-amber);
  font-weight: 700;
}

/* ------------------------------------------------------
   INSIDE THE ASSISTANT DASHBOARD SECTION
------------------------------------------------------ */
.assistant-showcase {
  padding: 72px 0;
  background: linear-gradient(180deg, rgba(21, 17, 34, 0.6) 0%, rgba(12, 10, 21, 0.95) 100%);
  position: relative;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  margin-top: 36px;
}

.showcase-feature-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background 0.4s ease;
}

.showcase-feature-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(224, 122, 95, 0.4);
  box-shadow: var(--shadow-card);
}

.showcase-img-frame {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid rgba(224, 122, 95, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.7), 0 0 24px rgba(224, 122, 95, 0.25);
  margin-bottom: 24px;
  width: 100%;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.showcase-feature-card:hover .showcase-img-frame {
  transform: scale(1.02);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.8), 0 0 36px rgba(224, 122, 95, 0.4);
  border-color: rgba(224, 122, 95, 0.5);
}

.showcase-img-frame img {
  width: 100%;
  height: auto;
  display: block;
}

.showcase-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  justify-content: center;
}

.showcase-pill {
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-amber);
}

/* ------------------------------------------------------
   PEAKORA CROWN CTA
------------------------------------------------------ */
.peakora-crown-cta {
  padding: 64px 0;
  text-align: center;
  position: relative;
}

.peakora-crown-card {
  background: linear-gradient(135deg, #181329 0%, #251c3d 100%);
  border-radius: var(--radius-lg);
  padding: 56px 40px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(224, 122, 95, 0.28);
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.85), 0 0 50px rgba(224, 122, 95, 0.22);
  text-align: center;
}

.peakora-crown-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(224, 122, 95, 0.2) 0%, transparent 60%);
  animation: pulseGlow 12s linear infinite;
  pointer-events: none;
}

.peakora-crown-content {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.peakora-crown-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 16px;
  letter-spacing: -0.6px;
  color: #ffffff;
  text-align: center;
}

.peakora-crown-sub {
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 30px;
  line-height: 1.65;
  text-align: center;
}

.peakora-crown-button-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--primary-gradient);
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  padding: 18px 46px;
  border-radius: var(--radius-md);
  text-decoration: none;
  box-shadow: var(--shadow-glow);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.peakora-crown-button-new:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 56px rgba(224, 122, 95, 0.5), 0 0 40px rgba(167, 139, 250, 0.35);
}

/* ------------------------------------------------------
   STORIES SECTION
------------------------------------------------------ */
.stories {
  padding: 64px 0 72px;
}

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

.story-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 34px 28px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease, background 0.4s ease;
  position: relative;
}

.story-card:hover {
  background: var(--bg-card-hover);
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-card);
  border-color: rgba(224, 122, 95, 0.4);
}

.story-quote-mark {
  font-size: 34px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.5;
  font-family: Georgia, serif;
  margin-bottom: 4px;
  text-align: center;
}

.story-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-light);
  margin-bottom: 24px;
  text-align: center;
}

.story-author-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
}

.story-avatar-initial {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--primary-gradient);
  color: #ffffff;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(224, 122, 95, 0.35);
}

.story-author {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
}

/* ------------------------------------------------------
   FOOTER — MULTI-COLUMN CATEGORIES LAYOUT
------------------------------------------------------ */
.footer {
  background: linear-gradient(180deg, #0a0814 0%, #05040a 100%);
  border-top: 1px solid rgba(224, 122, 95, 0.2);
  color: #ffffff;
  padding: 64px 0 36px;
  position: relative;
  overflow: hidden;
}

.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 162, 97, 0.6), transparent);
}

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

.footer-col-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 18px;
  letter-spacing: 0.2px;
}

.footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-links a {
  color: var(--text-light);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.25s ease;
}

.footer-col-links a:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(244, 162, 97, 0.6);
  transform: translateX(3px);
}

.footer-col-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.footer-brand-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 14px 0 20px 0;
  line-height: 1.6;
  max-width: 280px;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 13px;
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
}

@media (max-width: 540px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }
}

/* FLOATING ASK PEAKORA BUTTON & ASSISTANT MODAL */
.peakora-btn {
  position: fixed;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: 28px;
  padding: 14px 26px;
  background: rgba(21, 17, 34, 0.94);
  border: 1.5px solid var(--primary);
  border-radius: 999px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  z-index: 1200;
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.65), 0 0 24px rgba(224, 122, 95, 0.35);
  transition: all 0.3s ease;
}

.peakora-btn:hover {
  background: var(--primary-gradient);
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 18px 40px rgba(224, 122, 95, 0.45);
}

.assistant-modal-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 1100;
  background: rgba(8, 6, 14, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0 28px calc(96px + env(safe-area-inset-bottom, 0px)) 28px;
}

.assistant-modal-overlay.open {
  display: flex;
}

.assistant-modal {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: 75vh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(224, 122, 95, 0.25);
  border: 1px solid var(--border-glow);
  text-align: center;
}

/* STANDARDIZED POP-UP MODAL SYSTEM */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 6, 14, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-box, .peakora-modal-standard {
  background: var(--bg-card, #151122);
  color: var(--text-primary, #f8fafc);
  border-radius: var(--radius-lg);
  max-width: 540px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 32px 28px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.9), 0 0 40px var(--primary-glow, rgba(224, 122, 95, 0.25));
  border: 1px solid var(--border-glow, rgba(224, 122, 95, 0.3));
  position: relative;
  transition: all 0.35s ease;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.assistant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.assistant-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 20px;
  font-weight: 800;
  color: var(--accent-amber);
}

.assistant-close {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-light);
  transition: all 0.2s ease;
}

.assistant-close:hover {
  background: var(--primary-gradient);
  color: #ffffff;
  border-color: transparent;
}

.assistant-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.assistant-message {
  background: rgba(255, 255, 255, 0.06);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  color: var(--text-primary);
  max-width: 85%;
  border: 1px solid var(--border-subtle);
  text-align: left;
}

.assistant-message.user {
  margin-left: auto;
  background: var(--primary-gradient);
  color: #ffffff;
  border: none;
}

/* GLASSMORPHISM TYPING INDICATOR */
.assistant-typing {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(244, 162, 97, 0.35) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px rgba(224, 122, 95, 0.2);
  border-radius: var(--radius-md);
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  animation: typingFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.typing-indicator-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}

.typing-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-amber);
  letter-spacing: 0.2px;
}

.typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
  box-shadow: 0 0 8px rgba(244, 162, 97, 0.85);
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dots span:nth-child(1) {
  animation-delay: 0s;
}

.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1.25);
    opacity: 1;
    background: #ffffff;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.95), 0 0 18px rgba(244, 162, 97, 0.9);
  }
}

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

.assistant-input-area {
  display: flex;
  gap: 8px;
}

.assistant-input-area input {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  font-size: 14px;
  outline: none;
}

.assistant-input-area input:focus {
  border-color: var(--accent-amber);
  box-shadow: 0 0 12px rgba(244, 162, 97, 0.25);
}

.assistant-send {
  padding: 12px 20px;
  background: var(--primary-gradient);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.assistant-send:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

/* SMART REPLIES IN ASSISTANT MODAL */
.assistant-smart-replies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  margin-bottom: 4px;
  justify-content: flex-start;
  align-items: center;
}

.assistant-smart-reply-btn,
.assistant-smart-replies button {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(224, 122, 95, 0.4);
  border-radius: 999px;
  color: #ffffff;
  padding: 8px 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: inline-flex;
  align-items: center;
}

.assistant-smart-reply-btn:hover,
.assistant-smart-replies button:hover {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(224, 122, 95, 0.4);
}

/* MOBILE HAMBURGER MENU TOGGLE & GLASSMORPHISM DRAWER */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  cursor: pointer;
  z-index: 1005;
  transition: all 0.3s ease;
}

.mobile-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--primary);
}

.hamburger-bar {
  width: 22px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 2px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-menu-toggle.open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  background-color: var(--accent-amber);
}

.mobile-menu-toggle.open .hamburger-bar:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  background-color: var(--accent-amber);
}

/* RESPONSIVE DESIGN */
@media (max-width: 1024px) {
  .real-life-layout,
  .aff-teaser-layout,
  .showcase-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .what-grid,
  .stories-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1080px) {
  .mobile-menu-toggle {
    display: flex;
  }

  .nav {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    background: rgba(12, 10, 21, 0.96);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid var(--border-glow);
    padding: 24px 20px 28px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.88), 0 0 30px rgba(224, 122, 95, 0.2);
    z-index: 1001;
    transform: translateY(-12px);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .nav.open {
    display: flex !important;
    transform: translateY(0);
    opacity: 1;
  }

  .nav-link {
    font-size: 16px;
    padding: 10px 20px;
    width: 100%;
    text-align: center;
    border-radius: 12px;
    border: 1px solid transparent;
  }

  .nav-link:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(224, 122, 95, 0.25);
    color: var(--accent-amber);
  }

  .hero-title {
    font-size: 32px;
  }

  .section-title {
    font-size: 26px;
  }

  .what-grid,
  .stories-grid {
    grid-template-columns: 1fr;
  }

  .peakora-crown-card {
    padding: 44px 24px;
  }

  .peakora-crown-button-new {
    font-size: 16px;
    padding: 16px 32px;
  }
}

/* ------------------------------------------------------
   ENHANCED STORIES SECTION & CTA STYLES
------------------------------------------------------ */
.story-filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.story-filter-btn:hover {
  background: rgba(224, 122, 95, 0.12);
  border-color: rgba(224, 122, 95, 0.3);
  color: #ffffff;
}

.story-filter-btn.active {
  background: var(--primary-gradient);
  border-color: transparent;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(224, 122, 95, 0.35);
}

.story-tag-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-amber);
  background: rgba(244, 162, 97, 0.12);
  border: 1px solid rgba(244, 162, 97, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.2px;
}

.story-verified-badge {
  font-size: 10px;
  font-weight: 700;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 1px 6px;
  border-radius: 999px;
}

.stories-cta-banner {
  margin-top: 56px;
  background: linear-gradient(135deg, rgba(24, 18, 38, 0.8) 0%, rgba(38, 26, 56, 0.85) 100%);
  border: 1.5px solid rgba(224, 122, 95, 0.35);
  border-radius: var(--radius-lg);
  padding: 44px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(224, 122, 95, 0.15);
}

.stories-cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(224, 122, 95, 0.2) 0%, transparent 70%);
  pointer-events: none;
}

.stories-cta-title {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.stories-cta-sub {
  font-size: 15px;
  color: var(--text-light);
  max-width: 580px;
  margin: 0 auto 28px;
  line-height: 1.6;
}

.stories-cta-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.stories-cta-trust {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ------------------------------------------------------
   CTA BUTTON PULSE ANIMATION
------------------------------------------------------ */
@keyframes ctaPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.5), 0 8px 24px rgba(224, 122, 95, 0.35);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(224, 122, 95, 0), 0 8px 28px rgba(224, 122, 95, 0.5);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(224, 122, 95, 0), 0 8px 24px rgba(224, 122, 95, 0.35);
  }
}

.peakora-crown-button-new,
.btn.primary,
.cta-pulse-button,
#assistantButton {
  animation: ctaPulse 2.8s infinite ease-in-out !important;
}

/* ------------------------------------------------------
   STANDARDIZED GLASSMORPHISM TOAST NOTIFICATIONS
------------------------------------------------------ */
.toast-container {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 380px;
  width: calc(100% - 48px);
}

.toast-item {
  pointer-events: auto;
  background: rgba(18, 14, 30, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid rgba(244, 162, 97, 0.4);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(224, 122, 95, 0.25);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transition: all 0.3s ease;
}

.toast-item.toast-success {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(16, 185, 129, 0.25);
}

.toast-item.toast-warning {
  border-color: rgba(245, 158, 11, 0.5);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), 0 0 24px rgba(245, 158, 11, 0.25);
}

.toast-item.fade-out {
  opacity: 0;
  transform: translateX(30px) scale(0.95);
}

.toast-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.toast-text {
  flex: 1;
}

.toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  transition: color 0.2s ease;
}

.toast-close:hover {
  color: #ffffff;
}

@keyframes toastSlideIn {
  from {
    opacity: 0;
    transform: translateY(-16px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ------------------------------------------------------
   MORE FEATURES & CAPABILITIES — PREMIUM PLUS TILES
------------------------------------------------------ */
.more-features-panel {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  margin-top: 32px;
  position: relative;
  overflow: hidden;
}

.more-features-panel::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 60%;
  background: radial-gradient(ellipse at center, rgba(224, 122, 95, 0.10) 0%, rgba(167, 139, 250, 0.06) 45%, transparent 75%);
  pointer-events: none;
  z-index: 0;
}

.more-features-header {
  text-align: center;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

.more-features-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}

.more-features-lead {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.5;
}

/* Free vs Plus legend */
.plan-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-top: 20px;
}

.plan-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-light);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  padding: 7px 16px;
}

.plan-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.plan-legend-dot-free {
  background: var(--accent-emerald);
  box-shadow: 0 0 10px rgba(52, 211, 153, 0.55);
}

.plan-legend-dot-plus {
  background: var(--primary-gradient);
  box-shadow: 0 0 12px rgba(224, 122, 95, 0.6);
}

/* Grid */
.more-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  position: relative;
  z-index: 1;
  align-items: stretch;
}

/* Premium Spotlight tile (signature Plus feature, same size as others) */
.feature-tile-spotlight {
  background: linear-gradient(135deg, rgba(224, 122, 95, 0.18) 0%, rgba(167, 139, 250, 0.14) 50%, rgba(244, 162, 97, 0.12) 100%);
  border: 1px solid rgba(244, 162, 97, 0.5);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6), 0 0 42px rgba(224, 122, 95, 0.28);
}

.feature-tile-spotlight::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-md);
  padding: 1px;
  background: linear-gradient(135deg, rgba(244, 162, 97, 0.8), rgba(167, 139, 250, 0.55), rgba(224, 122, 95, 0.7));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Base tile */
.feature-tile {
  position: relative;
  border-radius: var(--radius-md);
  padding: 22px 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease, background 0.4s ease;
}

/* Free tiles — calm glass */
.feature-tile-free {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
}

.feature-tile-free:hover {
  transform: translateY(-4px);
  border-color: rgba(52, 211, 153, 0.35);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.55), 0 0 22px rgba(52, 211, 153, 0.16);
}

/* Plus tiles — gradient glow + premium border */
.feature-tile-plus {
  background: linear-gradient(155deg, rgba(224, 122, 95, 0.12) 0%, rgba(167, 139, 250, 0.08) 100%);
  border: 1px solid rgba(224, 122, 95, 0.35);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 26px rgba(224, 122, 95, 0.18);
}

.feature-tile-plus:hover {
  transform: translateY(-6px);
  border-color: rgba(244, 162, 97, 0.6);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 0 38px rgba(224, 122, 95, 0.4);
}

/* Animated ambient glow layer inside Plus tiles */
.feature-tile-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 0%, rgba(244, 162, 97, 0.22) 0%, transparent 55%),
              radial-gradient(circle at 100% 100%, rgba(167, 139, 250, 0.18) 0%, transparent 55%);
  opacity: 0.7;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}

.feature-tile-plus:hover .feature-tile-glow {
  opacity: 1;
}

/* PEAKORA+ badge */
.peakora-plus-badge {
  display: inline-flex;
  align-items: center;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #1a1206;
  background: var(--primary-gradient);
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(224, 122, 95, 0.45);
  position: relative;
  z-index: 1;
}

/* Tile flags */
.feature-tile-flag {
  display: inline-block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-amber);
  margin-left: 10px;
  position: relative;
  z-index: 1;
}

.feature-tile-flag-free {
  color: var(--accent-emerald);
  margin-left: 0;
}

.feature-tile-name {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin: 14px 0 6px;
  position: relative;
  z-index: 1;
}

.feature-tile-desc {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.55;
  position: relative;
  z-index: 1;
}

.feature-tile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  position: relative;
  z-index: 1;
}

.feature-tag {
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-amber);
}

.feature-tile-free .feature-tag {
  color: var(--accent-emerald);
  border-color: rgba(52, 211, 153, 0.25);
}

/* Plus upsell line */
.more-features-upsell {
  display: none;
}

.upsell-text,
.upsell-cta {
  display: none;
}

@media (max-width: 600px) {
  .more-features-panel {
    padding: 28px 18px;
  }

  .plan-legend {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
}


/* ===== AFFILIATE PROGRAM TEASER (landing page) ===== */
.peakora-affiliate-teaser {
  padding: 64px 0;
  text-align: center;
  position: relative;
}

.aff-teaser-layout {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 52px;
  align-items: center;
}

.aff-teaser-illustration {
  position: relative;
}

.aff-teaser-illustration img,
.aff-dash-mock {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-frame);
  border: 1px solid rgba(224, 122, 95, 0.35);
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.aff-teaser-illustration:hover img,
.aff-teaser-illustration:hover .aff-dash-mock {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-frame-hover);
  border-color: rgba(224, 122, 95, 0.5);
}

/* Affiliate dashboard mockup (mirrors the real partner portal aesthetic) */
.aff-dash-mock {
  background: linear-gradient(160deg, #151122 0%, #0c0a15 100%);
  padding: 26px 24px 22px;
  box-sizing: border-box;
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  overflow: hidden;
}

.aff-dash-mock::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 122, 95, 0.28) 0%, transparent 70%);
  pointer-events: none;
}

.aff-dash-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

.aff-dash-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a0aec0;
}

.aff-dash-badge {
  font-size: 11px;
  font-weight: 700;
  color: #0c0a15;
  background: linear-gradient(135deg, #e07a5f, #f4a261);
  padding: 4px 10px;
  border-radius: 999px;
}

.aff-dash-balance {
  margin-bottom: 22px;
}

.aff-dash-balance small {
  display: block;
  font-size: 12px;
  color: #a0aec0;
  margin-bottom: 4px;
}

.aff-dash-balance strong {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 38px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.01em;
}

.aff-dash-balance span {
  font-size: 12px;
  color: #34d399;
  margin-left: 8px;
  font-weight: 600;
}

.aff-dash-link {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 22px;
}

.aff-dash-link code {
  font-family: 'SFMono-Regular', Menlo, monospace;
  font-size: 12px;
  color: #f4a261;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}

.aff-dash-link svg {
  flex-shrink: 0;
}

.aff-dash-chart-label {
  font-size: 11px;
  color: #a0aec0;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.aff-dash-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 80px;
  margin-bottom: 18px;
}

.aff-dash-bar {
  flex: 1;
  background: linear-gradient(180deg, #f4a261 0%, #e07a5f 100%);
  border-radius: 4px 4px 0 0;
  opacity: 0.85;
}

.aff-dash-bar:last-child {
  opacity: 1;
  box-shadow: 0 0 12px rgba(244, 162, 97, 0.5);
}

.aff-dash-foot {
  display: flex;
  gap: 18px;
  font-size: 12px;
  color: #a0aec0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.aff-dash-foot b {
  color: #ffffff;
  font-weight: 700;
}

@media (max-width: 520px) {
  .aff-dash-balance strong { font-size: 30px; }
  .aff-dash-mock { padding: 22px 18px 18px; }
}

.aff-teaser-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aff-teaser-point {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.aff-teaser-point:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 122, 95, 0.35);
  box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.6), 0 0 24px rgba(224, 122, 95, 0.2);
}

.aff-teaser-point h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  text-align: center;
}

.aff-teaser-point p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
}

.aff-teaser-btn {
  padding: 16px 38px;
  font-size: 16px;
  margin-top: 6px;
}

@media (max-width: 600px) {
  .aff-teaser-btn {
    padding: 14px 28px;
    font-size: 15px;
  }
}


/* ============================================================
   PRICING SECTION
   ============================================================ */
.pricing-section {
  padding: 88px 0 72px;
  background: radial-gradient(circle at 50% 0%, rgba(224, 122, 95, 0.08), transparent 55%);
}
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 24px;
  margin-top: 40px;
}
.pricing-card {
  position: relative;
  background: var(--theme-card-bg, #151122);
  border: 1px solid var(--theme-card-border, rgba(255, 255, 255, 0.08));
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  min-width: 0;
}
.pricing-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244, 162, 97, 0.4);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(224, 122, 95, 0.18);
}
.pricing-card-featured {
  border-color: rgba(244, 162, 97, 0.5);
  background: linear-gradient(165deg, rgba(224, 122, 95, 0.08), var(--theme-card-bg, #151122) 65%);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.45), 0 0 44px rgba(224, 122, 95, 0.2);
}
.pricing-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--theme-primary-grad, linear-gradient(135deg, #e07a5f, #f4a261, #a78bfa));
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Plus Jakarta Sans', sans-serif;
}
.pricing-card-head { margin-bottom: 24px; }
.pricing-name {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--theme-text-muted, #a0aec0);
  margin-bottom: 8px;
}
.pricing-price {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
}
.pricing-card-featured .pricing-price {
  background: var(--theme-primary-grad, linear-gradient(135deg, #e07a5f, #f4a261, #a78bfa));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.pricing-period {
  display: block;
  font-size: 13px;
  color: var(--theme-text-muted, #a0aec0);
  margin-top: 6px;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  flex: 1;
}
.pricing-features li {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #e8e8ef;
  padding: 9px 0 9px 28px;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  line-height: 1.5;
}
.pricing-features li:last-child { border-bottom: none; }
.pricing-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 16px;
  height: 8px;
  border-left: 2px solid #f4a261;
  border-bottom: 2px solid #f4a261;
  transform: rotate(-45deg);
}
.pricing-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 22px;
  /* Reset UA button chrome so a <button> renders like the old <a> did */
  border: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  border-radius: var(--radius-md);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.25s ease;
  box-sizing: border-box;
}
.pricing-btn-primary {
  background: var(--theme-primary-grad, linear-gradient(135deg, #e07a5f, #f4a261, #a78bfa));
  color: #fff;
  box-shadow: 0 8px 22px rgba(224, 122, 95, 0.3);
}
.pricing-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(224, 122, 95, 0.42);
}
.pricing-btn-ghost {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
}
.pricing-btn-ghost:hover {
  border-color: rgba(244, 162, 97, 0.5);
  background: rgba(244, 162, 97, 0.08);
}
.pricing-trust {
  text-align: center;
  font-size: 12px;
  color: var(--theme-text-muted, #a0aec0);
  margin-top: 28px;
}

/* Compact pricing CTA on the landing page (full plans live on pricing.html) */
.pricing-cta-section {
  padding: 72px 0;
  background: radial-gradient(circle at 50% 0%, rgba(224, 122, 95, 0.08), transparent 55%);
}
.pricing-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.pricing-cta-inner .section-lead { margin: 16px auto 28px; max-width: 480px; }

/* Standalone pricing page hero (uses the same cards as the old section) */
.pricing-hero {
  padding: 72px 0 64px;
  background: radial-gradient(circle at 50% 0%, rgba(224, 122, 95, 0.08), transparent 55%);
  min-height: 60vh;
}
@media (max-width: 640px) {
  .pricing-section { padding: 56px 0 48px; }
  .pricing-hero { padding: 56px 0 48px; }
  .pricing-price { font-size: 34px; }
  .pricing-card { padding: 28px 22px; }
}

/* ===== MOBILE CARD TIGHTENING =====
   Landing cards keep desktop padding on phones by default, which makes them
   look oversized and pushes content too far apart. This block reduces card
   padding, gaps, and font sizes on small screens, and forces word-break so
   long strings never overflow card edges. */
@media (max-width: 600px) {
  .what-card { padding: 22px 16px; }
  .showcase-feature-card { padding: 20px 16px; }
  .story-card { padding: 22px 16px; }
  .aff-teaser-point { padding: 18px 16px; }
  .more-features-panel { padding: 22px 16px; }
  .why-card { padding: 22px 16px; }

  /* Prevent text from clipping card edges. */
  .what-card p,
  .showcase-feature-card p,
  .story-card p,
  .aff-teaser-point p,
  .why-card p {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
  }

  /* Slightly smaller card headings on phones. */
  .what-card h3,
  .showcase-feature-card h3,
  .story-card h3 { font-size: 1.1rem; }

  /* Grid items must not exceed their track width (prevents overflow). */
  .what-grid,
  .showcase-grid,
  .stories-grid,
  .more-features-grid,
  .aff-teaser-content {
    gap: 16px;
  }
}

@media (max-width: 400px) {
  .what-card,
  .showcase-feature-card,
  .story-card,
  .aff-teaser-point,
  .why-card { padding: 18px 14px; }
  .what-card h3,
  .showcase-feature-card h3,
  .story-card h3 { font-size: 1rem; }
}

/* ===== MOBILE TIGHTENING PASS =====
   Aggressive phone reductions so cards/sections are not "annoyingly big"
   and no text or edges clip on small screens (<=600px). Safe to layer on
   top of the existing per-component rules above. */
@media (max-width: 600px) {
  /* Section vertical rhythm: 64/72/88px is far too tall on phones. */
  .hero,
  .why,
  .real-life,
  .assistant-showcase,
  .peakora-crown-cta,
  .stories,
  .peakora-affiliate-teaser,
  .pricing-section,
  .pricing-hero,
  .pricing-cta-section,
  .more-features-section,
  .peakora-crown-section { padding-top: 36px; padding-bottom: 36px; }

  /* Headings scale down further than the 1080px breakpoint. */
  .hero-title { font-size: 26px; line-height: 1.15; }
  .section-title { font-size: 22px; line-height: 1.2; }
  .section-lead { font-size: 15px; }

  /* Inner card padding stays compact (overrides larger defaults). */
  .what-card,
  .showcase-feature-card,
  .story-card,
  .aff-teaser-point,
  .why-card,
  .more-features-panel,
  .peakora-crown-card { padding: 18px 15px; }

  /* Buttons: smaller tap targets that still meet 44px min height via line-height. */
  .btn-primary,
  .peakora-crown-button-new,
  .aff-teaser-btn { padding: 13px 24px; font-size: 14px; }

  /* Guarantee nothing inside cards forces horizontal overflow. */
  .what-card *,
  .showcase-feature-card *,
  .story-card *,
  .aff-teaser-point *,
  .why-card *,
  .more-features-panel *,
  .peakora-crown-card * {
    max-width: 100%;
  }
  .what-card h3,
  .showcase-feature-card h3,
  .story-card h3,
  .why-card h3,
  .aff-teaser-point h3 { font-size: 1.05rem; }

  /* Illustration mockups must shrink with their card. */
  .aff-dash-mock { padding: 18px 14px 14px; }
  .aff-dash-balance strong { font-size: 26px; }
}

@media (max-width: 380px) {
  .hero-title { font-size: 23px; }
  .section-title { font-size: 20px; }
  .what-card,
  .showcase-feature-card,
  .story-card,
  .aff-teaser-point,
  .why-card { padding: 15px 12px; }
  .hero,
  .why,
  .real-life,
  .assistant-showcase,
  .peakora-crown-cta,
  .stories,
  .peakora-affiliate-teaser,
  .pricing-section,
  .pricing-hero,
  .pricing-cta-section,
  .more-features-section,
  .peakora-crown-section { padding-top: 28px; padding-bottom: 28px; }
}