/* ==========================================
EMAILLOOM DESIGN SYSTEM
========================================== */

:root {

  /* Brand Colors */

  --primary: #7D23FE;
  --primary-light: #A56CFF;
  --primary-soft: #F4EDFF;

  --dark: #111111;
  --dark-soft: #1B1B1B;

  --white: #FFFFFF;

  --gray-100: #F8F8F8;
  --gray-200: #EFEFEF;
  --gray-300: #DDDDDD;
  --gray-500: #777777;
  --gray-700: #444444;

  /* Shadows */

  --shadow-sm:
    0 4px 10px rgba(0,0,0,.05);

  --shadow-md:
    0 10px 30px rgba(0,0,0,.08);

  --shadow-lg:
    0 20px 60px rgba(0,0,0,.12);

  /* Radius */

  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-xl: 40px;

  /* Layout */

  --container: 1280px;

  /* Animation */

  --transition:
    all .3s ease;

}

/* ==========================================
DARK MODE
========================================== */

[data-theme="dark"] {

  --white: #111111;
  --dark: #ffffff;

  --gray-100: #181818;
  --gray-200: #222222;
  --gray-300: #333333;
  --gray-700: #DDDDDD;

}

/* ==========================================
RESET
========================================== */

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

html {
  scroll-behavior: smooth;
}

body {

  font-family:
    'Inter',
    sans-serif;

  background:
    var(--white);

  color:
    var(--dark);

  overflow-x: hidden;

  line-height: 1.6;

}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

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

.container {

  width: 90%;

  max-width:
    var(--container);

  margin: 0 auto;

}

/* ==========================================
TYPOGRAPHY
========================================== */

h1 {

  font-size:
    clamp(3rem, 6vw, 5.5rem);

  line-height: 1.05;

  font-weight: 900;

}

h2 {

  font-size:
    clamp(2rem, 4vw, 4rem);

  line-height: 1.1;

  font-weight: 800;

}

h3 {

  font-size:
    1.5rem;

  font-weight: 700;

}

p {

  color:
    var(--gray-500);

}

/* ==========================================
SECTIONS
========================================== */

section {

  padding:
    120px 0;

}

.section-header {

  text-align: center;

  max-width: 800px;

  margin: 0 auto 70px;

}

.section-header p {

  margin-top: 20px;

  font-size: 1.1rem;

}

.section-tag {

  display: inline-block;

  background:
    var(--primary-soft);

  color:
    var(--primary);

  padding:
    10px 20px;

  border-radius:
    999px;

  font-weight: 700;

  margin-bottom: 20px;

}

/* ==========================================
BUTTONS
========================================== */

.btn-primary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    16px 32px;

  background:
    var(--primary);

  color:
    white;

  border-radius:
    999px;

  font-weight: 700;

  transition:
    var(--transition);

}

.btn-primary:hover {

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 40px rgba(125,35,254,.25);

}

.btn-secondary {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding:
    16px 32px;

  border:
    2px solid var(--primary);

  color:
    var(--primary);

  border-radius:
    999px;

  font-weight: 700;

  transition:
    var(--transition);

}

.btn-secondary:hover {

  background:
    var(--primary);

  color:
    white;

}

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

.header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 999;

  backdrop-filter:
    blur(16px);

  background:
    rgba(255,255,255,.75);

  border-bottom:
    1px solid rgba(0,0,0,.05);

}

.header .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

  min-height: 80px;

}

.logo {

  font-size: 2rem;

  font-weight: 900;

}

.logo span {

  color:
    var(--primary);

}

.nav {

  display: flex;

  gap: 30px;

}

.nav a {

  color:
    var(--dark);

  font-weight: 500;

  transition:
    var(--transition);

}

.nav a:hover {

  color:
    var(--primary);

}

.nav-actions {

  display: flex;

  align-items: center;

  gap: 20px;

}

.theme-toggle {

  border: none;

  background: none;

  cursor: pointer;

  font-size: 1.2rem;

}

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

.hero {

  padding-top:
    180px;

  position: relative;

}

.hero::before {

  content: "";

  position: absolute;

  width: 600px;

  height: 600px;

  border-radius: 50%;

  background:
    rgba(125,35,254,.10);

  filter:
    blur(100px);

  right: -100px;

  top: -100px;

}

.hero-grid {

  display: grid;

  grid-template-columns:
    1.2fr .8fr;

  gap: 80px;

  align-items: center;

}

.hero-badge {

  display: inline-flex;

  gap: 10px;

  align-items: center;

  background:
    var(--primary-soft);

  padding:
    12px 20px;

  border-radius:
    999px;

  color:
    var(--primary);

  font-weight: 600;

  margin-bottom: 25px;

}

.hero p {

  font-size: 1.2rem;

  margin-top: 24px;

}

.hero-buttons {

  display: flex;

  gap: 20px;

  margin-top: 40px;

}

/* ==========================================
STATS
========================================== */

.hero-stats {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 20px;

  margin-top: 70px;

}

.stat {

  background:
    white;

  padding:
    24px;

  border-radius:
    var(--radius-md);

  box-shadow:
    var(--shadow-sm);

}

.stat h3 {

  color:
    var(--primary);

  margin-bottom: 6px;

}
/* ==========================================
AI SECTION
========================================== */

.ai-section {
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #faf7ff 100%
  );
}

.ai-grid {

  display: grid;

  grid-template-columns:
    repeat(4, 1fr);

  gap: 24px;

}

.ai-card {

  background:
    rgba(255,255,255,.75);

  backdrop-filter:
    blur(20px);

  border:
    1px solid rgba(125,35,254,.08);

  border-radius:
    28px;

  padding:
    32px;

  transition:
    var(--transition);

  box-shadow:
    var(--shadow-sm);

}

.ai-card:hover {

  transform:
    translateY(-8px);

  box-shadow:
    var(--shadow-lg);

}

.ai-card .icon {

  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    var(--primary-soft);

  border-radius:
    18px;

  font-size:
    1.5rem;

  margin-bottom: 20px;

}

.ai-card h3 {

  margin-bottom: 12px;

}

/* ==========================================
SERVICES
========================================== */

.services-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 30px;

}

.service-card {

  background:
    white;

  border-radius:
    30px;

  padding:
    40px;

  box-shadow:
    var(--shadow-sm);

  transition:
    var(--transition);

}

.service-card:hover {

  transform:
    translateY(-8px);

  box-shadow:
    var(--shadow-lg);

}

.service-icon {

  width: 70px;
  height: 70px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    var(--primary-soft);

  border-radius:
    20px;

  font-size:
    2rem;

  margin-bottom: 24px;

}

.service-card ul {

  margin-top: 20px;

}

.service-card li {

  padding:
    8px 0;

  color:
    var(--gray-500);

}

/* ==========================================
WHY EMAILLOOM
========================================== */

.why-section {

  background:
    var(--dark);

  color:
    white;

}

.why-section .section-header p {

  color:
    rgba(255,255,255,.7);

}

.comparison-table {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 40px;

}

.comparison-column {

  padding:
    50px;

  border-radius:
    30px;

  background:
    rgba(255,255,255,.04);

}

.comparison-column h3 {

  margin-bottom: 30px;

}

.comparison-column ul {

  display: flex;
  flex-direction: column;
  gap: 18px;

}

.comparison-column li {

  color:
    rgba(255,255,255,.8);

}

.comparison-column.featured {

  border:
    2px solid var(--primary);

  background:
    rgba(125,35,254,.15);

}

/* ==========================================
MODULAR SYSTEMS
========================================== */

.benefits-grid {

  display: grid;

  grid-template-columns:
    repeat(3,1fr);

  gap: 24px;

}

.benefit-card {

  background:
    white;

  border-radius:
    28px;

  padding:
    40px;

  text-align: center;

  box-shadow:
    var(--shadow-sm);

}

.benefit-card h3 {

  color:
    var(--primary);

  margin-bottom: 15px;

}

/* ==========================================
COMPARISON TABLE
========================================== */

.table-wrapper {

  overflow-x: auto;

}

table {

  width: 100%;

  border-collapse: collapse;

  background:
    white;

  border-radius:
    20px;

  overflow: hidden;

}

thead {

  background:
    var(--primary);

  color:
    white;

}

th,
td {

  padding:
    22px;

  text-align: center;

}

tbody tr:nth-child(even) {

  background:
    #fafafa;

}

/* ==========================================
ACCESSIBILITY + DARK MODE
========================================== */

.compliance-grid {

  display: grid;

  grid-template-columns:
    repeat(2,1fr);

  gap: 30px;

}

.compliance-card {

  background:
    white;

  border-radius:
    30px;

  padding:
    50px;

  box-shadow:
    var(--shadow-sm);

}

.compliance-icon {

  width: 80px;
  height: 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    var(--primary-soft);

  border-radius:
    20px;

  font-size:
    2rem;

  margin-bottom: 25px;

}

.compliance-card ul {

  margin-top: 20px;

}

.compliance-card li {

  padding:
    10px 0;

}

/* ==========================================
JOURNEY TIMELINE
========================================== */

.journey-section {

  background:
    linear-gradient(
      180deg,
      #ffffff,
      #faf7ff
    );

}

.journey-timeline {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 18px;

  margin-top: 50px;

}

.journey-step {

  min-width: 300px;

  text-align: center;

  background:
    white;

  padding:
    18px 30px;

  border-radius:
    999px;

  font-weight: 700;

  box-shadow:
    var(--shadow-sm);

}

.journey-arrow {

  color:
    var(--primary);

  font-size:
    1.5rem;

}

/* ==========================================
DASHBOARD CARD
========================================== */

.dashboard-card {

  background:
    rgba(255,255,255,.75);

  backdrop-filter:
    blur(30px);

  border:
    1px solid rgba(125,35,254,.08);

  border-radius:
    32px;

  padding:
    40px;

  box-shadow:
    var(--shadow-lg);

}

.dashboard-header {

  display: flex;
  align-items: center;
  gap: 12px;

  font-weight: 700;

  margin-bottom: 25px;

}

.status-dot {

  width: 12px;
  height: 12px;

  background:
    #18c964;

  border-radius:
    50%;

}

.metric {

  display: flex;

  justify-content: space-between;

  padding:
    18px 0;

  border-bottom:
    1px solid rgba(0,0,0,.05);

}

.metric strong {

  color:
    var(--primary);

}
/* ==========================================
CASE STUDIES
========================================== */

.case-studies-section {
  background: #faf7ff;
}

.case-study-carousel {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
}

.case-card {

  background: white;

  padding: 40px;

  border-radius: 30px;

  box-shadow: var(--shadow-sm);

  transition: var(--transition);

  position: relative;

  overflow: hidden;

}

.case-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 100%;
  height: 4px;

  background: var(--primary);

}

.case-card:hover {

  transform: translateY(-10px);

  box-shadow: var(--shadow-lg);

}

.case-logo {

  color: var(--primary);

  font-weight: 800;

  margin-bottom: 20px;

}

.case-result {

  margin-top: 20px;

  color: var(--primary);

  font-weight: 700;

}

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

.pricing-grid {

  display: grid;

  grid-template-columns:
    repeat(4,1fr);

  gap: 30px;

}

.pricing-card {

  position: relative;

  background:
    rgba(255,255,255,.75);

  backdrop-filter:
    blur(20px);

  border:
    1px solid rgba(125,35,254,.08);

  border-radius:
    32px;

  padding:
    40px;

  transition:
    var(--transition);

}

.pricing-card:hover {

  transform:
    translateY(-10px);

  box-shadow:
    var(--shadow-lg);

}

.featured-plan {

  border:
    2px solid var(--primary);

  transform:
    scale(1.03);

}

.featured-plan:hover {

  transform:
    scale(1.05);

}

.popular-badge {

  position: absolute;

  top: -12px;

  right: 20px;

  background:
    var(--primary);

  color:
    white;

  padding:
    8px 16px;

  border-radius:
    999px;

  font-size:
    .8rem;

  font-weight:
    700;

}

.ai-plan {

  background:
    linear-gradient(
      135deg,
      #111111,
      #1c1c1c
    );

  color:
    white;

}

.ai-plan li {

  color:
    rgba(255,255,255,.8);

}

.plan-label {

  color:
    var(--primary);

  font-size:
    .85rem;

  text-transform:
    uppercase;

  font-weight:
    700;

}

.price {

  font-size:
    3rem;

  font-weight:
    900;

  margin:
    20px 0;

}

.price span {

  font-size:
    1rem;

  color:
    var(--gray-500);

}

.pricing-card ul {

  margin:
    25px 0;

}

.pricing-card li {

  padding:
    10px 0;

}

/* ==========================================
PROCESS
========================================== */

.process-grid {

  display: grid;

  grid-template-columns:
    repeat(5,1fr);

  gap: 24px;

}

.process-card {

  background:
    white;

  padding:
    35px;

  border-radius:
    24px;

  text-align:
    center;

  box-shadow:
    var(--shadow-sm);

}

.process-card span {

  color:
    var(--primary);

  font-size:
    2rem;

  font-weight:
    900;

  display:
    block;

  margin-bottom:
    15px;

}

/* ==========================================
TESTIMONIALS
========================================== */

.testimonials-section {

  background:
    #faf7ff;

}

.testimonial-slider {

  display:
    grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:
    24px;

}

.testimonial-card {

  background:
    white;

  padding:
    40px;

  border-radius:
    30px;

  box-shadow:
    var(--shadow-sm);

  font-size:
    1.1rem;

  font-style:
    italic;

}

/* ==========================================
FAQ
========================================== */

.faq-container {

  max-width:
    900px;

  margin:
    auto;

}

details {

  background:
    white;

  margin-bottom:
    20px;

  border-radius:
    20px;

  overflow:
    hidden;

  box-shadow:
    var(--shadow-sm);

}

summary {

  padding:
    24px;

  cursor:
    pointer;

  font-weight:
    700;

}

details p {

  padding:
    0 24px 24px;

}

/* ==========================================
CONTACT CTA
========================================== */

.contact-cta {

  background:
    linear-gradient(
      135deg,
      var(--primary),
      #9d64ff
    );

  color:
    white;

  text-align:
    center;

}

.contact-cta h2 {

  color:
    white;

}

.contact-cta p {

  color:
    rgba(255,255,255,.8);

  margin:
    20px auto 40px;

  max-width:
    700px;

}

.cta-buttons {

  display:
    flex;

  justify-content:
    center;

  gap:
    20px;

}

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

.footer {

  background:
    #111111;

  color:
    white;

}

.footer-grid {

  display:
    grid;

  grid-template-columns:
    2fr 1fr 1fr 1fr;

  gap:
    40px;

}

.footer-logo {

  font-size:
    2rem;

  font-weight:
    900;

  color:
    var(--primary);

  margin-bottom:
    20px;

}

.footer h4 {

  margin-bottom:
    20px;

}

.footer li {

  padding:
    8px 0;

  color:
    rgba(255,255,255,.7);

}

.footer-bottom {

  border-top:
    1px solid rgba(255,255,255,.08);

  margin-top:
    50px;

  padding-top:
    30px;

  text-align:
    center;

  color:
    rgba(255,255,255,.6);

}

/* ==========================================
SCROLL ANIMATIONS
========================================== */

.fade-up {

  opacity: 0;

  transform:
    translateY(40px);

  transition:
    all .8s ease;

}

.fade-up.active {

  opacity: 1;

  transform:
    translateY(0);

}

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

@media (max-width: 1200px) {

  .pricing-grid,
  .services-grid,
  .ai-grid,
  .case-study-carousel {

    grid-template-columns:
      repeat(2,1fr);

  }

}

@media (max-width: 992px) {

  .hero-grid,
  .comparison-table,
  .compliance-grid {

    grid-template-columns:
      1fr;

  }

  .process-grid {

    grid-template-columns:
      repeat(2,1fr);

  }

  .footer-grid {

    grid-template-columns:
      1fr 1fr;

  }

}

@media (max-width: 768px) {

  .hero-stats,
  .pricing-grid,
  .services-grid,
  .benefits-grid,
  .testimonial-slider,
  .ai-grid,
  .case-study-carousel {

    grid-template-columns:
      1fr;

  }

  .nav {

    display: none;

  }

  .hero-buttons,
  .cta-buttons {

    flex-direction:
      column;

  }

  .footer-grid {

    grid-template-columns:
      1fr;

  }

  section {

    padding:
      80px 0;

  }

  .hero {

    padding-top:
      140px;

  }

}

@media (prefers-reduced-motion: reduce) {

  * {

    animation: none !important;

    transition: none !important;

    scroll-behavior: auto !important;

  }

}