/* ============================================================================
 * MARKETING MODERN - "Copper & Petrol" Design System
 * ============================================================================
 *
 * PURPOSE
 * -------
 * Complete visual redesign of the public marketing pages (welcome, register,
 * demo, help). Loaded LAST in layouts/marketing.blade.php so it deliberately
 * overrides public_y2.css / gastro-styles.css / gastro-header.css WITHOUT
 * touching those files (they are still used by tenant booking pages!).
 *
 * DESIGN CONCEPT
 * --------------
 * The palette is derived from the product logo (img/Logo.png):
 *   - COPPER / TERRACOTTA  -> warmth, gastronomy, call-to-actions
 *   - DEEP PETROL GREEN    -> premium contrast sections ("evening mood"),
 *                             stands out from competitors (Quandoo=blue,
 *                             Resmio=teal-flat, OpenTable=red)
 *   - WARM CREAM           -> base surface, "set table" feeling
 *
 * Typography: 'Fraunces' (editorial serif for headlines, like modern
 * restaurant websites) + 'Inter' (clean body text). Both loaded in
 * layouts/marketing.blade.php via Google Fonts.
 *
 * STRUCTURE OF THIS FILE
 * ----------------------
 *   1. Design tokens (CSS custom properties)
 *   2. Base / typography overrides
 *   3. Header (shared by all marketing pages)
 *   4. Footer (shared)
 *   5. Section primitives (.hero cards, reveal animation)
 *   6. Welcome: hero stage
 *   7. Welcome: feature cards
 *   8. Welcome: screenshot slider
 *   9. Welcome: benefits (dark petrol section)
 *  10. Welcome: theme gallery
 *  11. Welcome: pricing
 *  12. Welcome: final CTA (dark petrol section)
 *  13. Shared components (buttons, badges, register card, forms)
 *  14. Responsive
 *  15. Accessibility (reduced motion)
 *
 * MAINTENANCE NOTES
 * -----------------
 * - All new class names are prefixed "mm-" (marketing modern) to avoid
 *   collisions with legacy classes.
 * - Legacy class names (.hero, .cta-button, .features, ...) are restyled
 *   here because register/demo/help still use them.
 * - The scroll-reveal animation is driven by a tiny IntersectionObserver
 *   script in layouts/marketing.blade.php (adds .mm-in-view).
 * ========================================================================== */


/* ============================================================
 * 1. DESIGN TOKENS
 * ============================================================ */
:root {
  /* Copper / terracotta (from logo plate + tischl.at drafts) */
  --mm-copper-300: #e0a37e;
  --mm-copper-400: #cf8355;
  --mm-copper-500: #bf6b3c;   /* primary accent */
  --mm-copper-600: #a5552b;
  --mm-copper-700: #8a4522;

  /* Deep petrol green (from logo cutlery segment) */
  --mm-petrol-300: #7fa9a5;
  --mm-petrol-500: #33706c;
  --mm-petrol-700: #1f4e4b;
  --mm-petrol-900: #12312f;   /* dark section background */
  --mm-petrol-950: #0c2422;

  /* Warm neutrals ("set table") */
  --mm-cream-bg:   #f6f1e8;   /* page background */
  --mm-cream-card: #fffdf9;   /* card surface */
  --mm-cream-soft: #fbf7f0;   /* alternate surface */
  --mm-line:       #e8ddcd;   /* hairline borders */
  --mm-ink:        #2b2521;   /* headings / dark text */
  --mm-ink-soft:   #5d554c;   /* body text */
  --mm-ink-mute:   #8a8177;   /* muted text */

  /* On-dark text colors (petrol sections) */
  --mm-on-dark:       #f3ede2;
  --mm-on-dark-soft:  #c3d2cf;

  /* Effects */
  --mm-radius-lg: 28px;
  --mm-radius-md: 18px;
  --mm-radius-sm: 12px;
  --mm-shadow-soft: 0 10px 30px -12px rgba(43, 37, 33, 0.18);
  --mm-shadow-lift: 0 24px 50px -20px rgba(43, 37, 33, 0.28);
  --mm-grad-copper: linear-gradient(135deg, #d0834f 0%, #b85c33 55%, #a5522c 100%);
  --mm-grad-petrol: linear-gradient(160deg, #1a4341 0%, #12312f 60%, #0c2422 100%);

  /* Fonts */
  --mm-font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
  --mm-font-body: 'Inter', 'Poppins', 'Segoe UI', sans-serif;
}


/* ============================================================
 * 2. BASE / TYPOGRAPHY
 * ============================================================ */
body {
  font-family: var(--mm-font-body);
  color: var(--mm-ink-soft);
  /* Warm cream base with a very subtle top glow - no image needed */
  background:
    radial-gradient(1200px 500px at 50% -100px, rgba(208, 131, 79, 0.10), transparent 70%),
    var(--mm-cream-bg);
}
/* NOTE: html { scroll-behavior: smooth; } and section[id] { scroll-margin-top }
   are inlined in layouts/marketing.blade.php to survive Tailwind CDN resets. */

::selection {
  background: var(--mm-copper-400);
  color: #fff;
}

.container {
  max-width: 1200px;
  padding: 1.25rem 1.5rem 2rem;
}

main h2, main h3 {
  font-family: var(--mm-font-display);
  color: var(--mm-ink);
  letter-spacing: -0.01em;
}


/* ============================================================
 * 3. HEADER (shared: welcome, register, demo, help)
 * ============================================================ */
.gastro-header-gradient,
header.public-header {
  background: rgba(255, 253, 249, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-soft);
  padding: 1.4rem 1.75rem;
  overflow: visible;
}

/* Kill legacy decorative gradient blobs */
header.public-header::before {
  display: none;
}

.header-grid {
  max-width: 100%;
}

/* Company logo (EDV Engl) - small, quiet, top-left */
.header-company-logo {
  position: static;
  padding: 0;
  opacity: 0.85;
  transition: opacity 0.25s ease;
}
.header-company-logo:hover { opacity: 1; }
.header-company-logo img { max-height: 44px; }

/* Product branding */
.header-logo img,
.header-logo-img {
  max-width: 170px;
  max-height: 110px;
  filter: drop-shadow(0 6px 14px rgba(43, 37, 33, 0.18));
  transition: transform 0.3s ease, filter 0.3s ease;
}
.header-logo-img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 8px 18px rgba(43, 37, 33, 0.25));
}

.header-text h1 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--mm-ink);
  text-shadow: none;
  letter-spacing: -0.02em;
}

.header-text p {
  color: var(--mm-ink-mute);
  font-size: 0.98rem;
  margin-top: 0.35rem;
}

/* Admin login - quiet petrol pill */
.header-admin-link h2 {
  color: var(--mm-ink-mute);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.admin-link {
  border: 1.5px solid var(--mm-petrol-500);
  color: var(--mm-petrol-700);
  background: transparent;
  border-radius: 999px;
  padding: 0.45rem 1.15rem;
  font-size: 0.9rem;
}
.admin-link:hover {
  background: var(--mm-petrol-700);
  border-color: var(--mm-petrol-700);
  color: var(--mm-on-dark);
}

/* NOTE: .mm-nav styles are inlined in layouts/marketing.blade.php
   because Tailwind CDN (loaded before this file) resets flex/padding/etc.
   See the <style> block in the layout for the authoritative rules. */


/* ============================================================
 * 4. FOOTER (shared) - dark petrol closing block
 * ============================================================ */
footer.public-footer {
  background: var(--mm-grad-petrol);
  color: var(--mm-on-dark-soft);
  border-radius: var(--mm-radius-lg);
  padding: 2.4rem 1.5rem;
  margin-top: 2rem;
}

footer.public-footer::before {
  /* replace legacy amber blobs with a faint copper glow */
  left: 0; right: 0; bottom: -120px; height: 240px;
  background: radial-gradient(50% 80% at 50% 100%, rgba(208, 131, 79, 0.22) 0%, transparent 75%);
}

footer.public-footer .footer-links { color: var(--mm-on-dark-soft); }
footer.public-footer .footer-links a {
  color: var(--mm-on-dark);
  font-weight: 500;
  border-bottom: 1px solid rgba(243, 237, 226, 0.25);
  transition: border-color 0.2s ease, color 0.2s ease;
}
footer.public-footer .footer-links a:hover {
  text-decoration: none;
  border-color: var(--mm-copper-300);
  color: var(--mm-copper-300);
}


/* ============================================================
 * 5. SECTION PRIMITIVES
 * ============================================================
 * Legacy markup wraps every section in `.hero` cards. We keep the
 * card metaphor (modern "bento" look) but restyle it: warm surface,
 * hairline border, soft shadow, generous padding.
 * ============================================================ */
.hero {
  background: var(--mm-cream-card);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-soft);
  padding: 3rem 2.5rem;
  margin: 1.5rem 0;
}

.hero h2 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--mm-ink);
  margin-bottom: 1.25rem;
}

/* Scroll reveal: sections start slightly shifted, JS adds .mm-in-view */
.mm-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.mm-reveal.mm-in-view {
  opacity: 1;
  transform: none;
}


/* ============================================================
 * 6. WELCOME: HERO STAGE
 * ============================================================
 * Uses the existing background image (img/background.png, warm
 * candle-lit table). A cream->transparent gradient keeps the left
 * side readable; a petrol vignette grounds the bottom edge.
 * ============================================================ */
.hero-marketing {
  min-height: 480px;
  display: flex;
  /* Place content at the top of the hero area on large screens */
  align-items: flex-start;
  padding: 3.5rem 3rem;
  background:
    linear-gradient(100deg,
      rgba(250, 246, 238, 0.96) 0%,
      rgba(250, 246, 238, 0.88) 34%,
      rgba(250, 246, 238, 0.42) 62%,
      rgba(38, 78, 75, 0.18) 100%),
    var(--hero-bg, none) center 40%/cover no-repeat;
  border: 1px solid rgba(232, 221, 205, 0.9);
}

.hero-marketing-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  /* Align items to the start of their grid cells so the right column sits at the top */
  align-items: start;
  /* Use the full container width on large screens so both columns share space equally.
     The container already limits overall width (see .container max-width), so set
     the grid to fill available width instead of constraining to a small fixed max-width. */
  width: 100%;
  max-width: none;
}

/* Right column: only the wizard note, aligned right, vertically centered */
.hero-marketing-right {
  display: flex;
  /* Stack note and banner vertically on top of each other */
  flex-direction: column;
  /* keep stacked items aligned to the right edge */
  align-items: flex-end;
  /* ensure items start at the top of the column */
  justify-content: flex-start;
  gap: 0.75rem;
}

.hero-kicker {
  font-family: var(--mm-font-body);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-petrol-700);
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid var(--mm-petrol-300);
  border-radius: 999px;
  padding: 0.42rem 1rem;
  margin-bottom: 1.4rem;
}

.hero-marketing h2 {
  font-size: clamp(2.3rem, 4.5vw, 3.4rem);
  line-height: 1.08;
  margin-bottom: 1.4rem;
  color: var(--mm-ink);
}

/* Copper accent on the first line via ::first-line is unreliable;
   instead a hand-drawn style underline flourish under the h2 */
.hero-marketing h2::after {
  content: "";
  display: block;
  width: 110px;
  height: 5px;
  margin-top: 1rem;
  border-radius: 999px;
  background: var(--mm-grad-copper);
}

.hero-lead {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--mm-ink-soft);
}

.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
}
.hero-actions .cta-button { max-width: 100%; }

.hero-secondary-link {
  color: var(--mm-petrol-700);
  font-weight: 600;
  padding: 0.6rem 0.2rem;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease;
}
.hero-secondary-link:hover {
  text-decoration: none;
  border-color: var(--mm-petrol-500);
}

.hero-note {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  font-size: 0.95rem;
  font-weight: 500;
  /* Strong contrast: white pill on top of the hero background */
  color: var(--mm-ink);
  background: #ffffff;
  border: 1px solid rgba(11, 76, 71, 0.12);
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
}
.hero-note svg { flex-shrink: 0; }

/* Secondary CTA on light background (hero): ghost pill in petrol */
.cta-button.cta-button-secondary {
  background: transparent;
  color: var(--mm-petrol-700);
  border: 1.5px solid rgba(11, 76, 71, 0.35);
  box-shadow: none;
}
.cta-button.cta-button-secondary:hover {
  background: rgba(11, 76, 71, 0.07);
  border-color: var(--mm-petrol-700);
  box-shadow: none;
}


/* ============================================================
 * 7. WELCOME: FEATURE CARDS
 * ============================================================ */
.features {
  gap: 1.4rem;
  margin: 2.25rem 0 0.5rem;
}

.feature-card.gastro-box {
  position: relative;
  background: var(--mm-cream-soft);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-md);
  box-shadow: none;
  padding: 2rem 1.8rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.feature-card.gastro-box:hover {
  transform: translateY(-6px);
  border-color: var(--mm-copper-300);
  box-shadow: var(--mm-shadow-lift);
}

/* Icon chip: copper tint circle, icons use currentColor */
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1.25rem;
  border-radius: 18px;
  color: var(--mm-copper-600);
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(208, 131, 79, 0.22), rgba(208, 131, 79, 0.08));
  border: 1px solid rgba(208, 131, 79, 0.35);
}
.feature-icon svg { width: 30px; height: 30px; }

.feature-card h3 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 1.28rem;
  color: var(--mm-ink);
  margin-bottom: 0.6rem;
}

.feature-card p {
  color: var(--mm-ink-soft);
  font-size: 0.96rem;
  line-height: 1.7;
}


/* ============================================================
 * 8. WELCOME: SCREENSHOT SLIDER
 * ============================================================
 * Framed like a minimal browser window (pure CSS decoration:
 * three dots, top bar) to make product screenshots feel real.
 * ============================================================ */
.screenshot-showcase .section-headline p { color: var(--mm-ink-mute); }

.app-slider {
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-md);
  background: var(--mm-cream-soft);
  box-shadow: var(--mm-shadow-soft);
  padding-top: 42px;           /* room for the fake browser bar */
  position: relative;
  overflow: hidden;
}

/* Fake browser top bar (pure decoration, no content change) */
.app-slider::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42px;
  background: linear-gradient(180deg, #efe7d8, #e9dfcd);
  border-bottom: 1px solid var(--mm-line);
}
/* Traffic-light dots */
.app-slider::after {
  content: "";
  position: absolute;
  top: 15px; left: 18px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--mm-copper-400);
  box-shadow: 20px 0 0 var(--mm-petrol-300), 40px 0 0 #d9c9ab;
}

.slide img {
  max-height: 460px;
  margin: 14px auto;
  border-radius: 8px;
}

.slider-nav {
  width: 46px;
  height: 46px;
  background: rgba(255, 253, 249, 0.92);
  border: 1px solid var(--mm-line);
  color: var(--mm-copper-600);
  box-shadow: var(--mm-shadow-soft);
  transition: transform 0.2s ease, background 0.2s ease;
}
.slider-nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}


/* ============================================================
 * 8b. WELCOME: LIVE DEMOS
 * ============================================================ */
.mm-demos-section h2 {
  margin-bottom: 0.5rem;
}

.mm-demos-intro {
  color: var(--mm-ink-soft);
  margin-bottom: 2rem;
}

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

.mm-demo-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.4rem;
  background: var(--mm-cream-soft);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-md);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.mm-demo-card:hover {
  transform: translateY(-4px);
  border-color: var(--mm-copper-300);
  box-shadow: var(--mm-shadow-lift);
}

.mm-demo-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
  border-radius: 16px;
  color: var(--mm-petrol-500);
  background: radial-gradient(120% 120% at 20% 15%, rgba(51, 112, 108, 0.18), rgba(51, 112, 108, 0.06));
  border: 1px solid rgba(51, 112, 108, 0.3);
}

.mm-demo-card strong {
  font-family: var(--mm-font-display);
  font-size: 1.15rem;
  color: var(--mm-ink);
  margin-bottom: 0.3rem;
}

.mm-demo-card span {
  font-size: 0.88rem;
  color: var(--mm-ink-mute);
}


/* ============================================================
 * 8c. WELCOME: HOMEPAGE INTEGRATION
 * ============================================================ */
.mm-integration-section {
  background: linear-gradient(135deg, var(--mm-cream-soft) 0%, rgba(208, 131, 79, 0.06) 100%);
  border: 1px solid var(--mm-copper-300);
}

.mm-integration-content {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
}

.mm-integration-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 20px;
  color: var(--mm-copper-600);
  background:
    radial-gradient(120% 120% at 20% 15%, rgba(208, 131, 79, 0.22), rgba(208, 131, 79, 0.08));
  border: 1px solid rgba(208, 131, 79, 0.35);
}

.mm-integration-content h3 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--mm-ink);
  margin-bottom: 0.6rem;
}

.mm-integration-content p {
  color: var(--mm-ink-soft);
  font-size: 0.96rem;
  line-height: 1.75;
  margin: 0;
}

.mm-integration-content a {
  color: var(--mm-copper-600);
  font-weight: 600;
  border-bottom: 1.5px solid transparent;
  transition: border-color 0.2s ease;
}

.mm-integration-content a:hover {
  text-decoration: none;
  border-color: var(--mm-copper-400);
}


/* ============================================================
 * 9. WELCOME: BENEFITS - DARK PETROL SECTION
 * ============================================================
 * The "evening mood" contrast block. Two-column checklist on
 * desktop, copper checkmarks.
 * ============================================================ */
.hero.benefits {
  background: var(--mm-grad-petrol);
  border: 1px solid var(--mm-petrol-700);
  position: relative;
  overflow: hidden;
}

/* Subtle copper glow in the corner */
.hero.benefits::before {
  content: "";
  position: absolute;
  top: -160px; right: -160px;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(208, 131, 79, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.hero.benefits h3 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--mm-on-dark);
  margin-bottom: 1.6rem;
}

.benefits ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 0.2rem 2.5rem;
  position: relative;
  z-index: 1;
}

.benefits li {
  color: var(--mm-on-dark-soft);
  font-size: 0.98rem;
  padding: 0.65rem 0 0.65rem 2.1rem;
  border-bottom: 1px solid rgba(243, 237, 226, 0.08);
}

.benefits li:before {
  content: "✓";
  color: var(--mm-copper-300);
  font-size: 1.05rem;
  top: 0.6rem;
}

.benefits li.coming-soon { color: rgba(195, 210, 207, 0.55); }
.benefits li.coming-soon:before { color: rgba(224, 163, 126, 0.5); }


/* ============================================================
 * 10. WELCOME: THEME GALLERY
 * ============================================================ */
.theme-gallery h3 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 1.9rem;
  color: var(--mm-ink);
}

.theme-gallery > p { color: var(--mm-ink-mute); }

.theme-grid { gap: 1.1rem; }

.theme-card-marketing {
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-sm);
  box-shadow: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.theme-card-marketing:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--mm-copper-300);
  box-shadow: var(--mm-shadow-lift);
}
.theme-card-marketing img { height: 120px; }
.theme-card-marketing figcaption strong { color: var(--mm-ink); }
.theme-card-marketing figcaption span { color: var(--mm-ink-mute); }


/* ============================================================
 * 11. WELCOME: PRICING
 * ============================================================ */
.pricing-wrap {
  background: var(--mm-cream-card);
}

.pricing-intro { color: var(--mm-ink-mute); }

.pricing-grid { gap: 1.4rem; align-items: start; }

.price-card {
  background: var(--mm-cream-soft);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-md);
  box-shadow: none;
  padding: 1.8rem 1.6rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mm-shadow-soft);
}

.price-card h3 {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 1.35rem;
  color: var(--mm-ink);
}

.price-tag {
  font-family: var(--mm-font-display);
  font-size: 1.5rem;
  color: var(--mm-copper-600);
  margin: 0.35rem 0 0.3rem;
}

.yearly-note { color: var(--mm-ink-mute); }

.price-card li { color: var(--mm-ink-soft); }
.price-card li::before { color: var(--mm-copper-500); }

/* Starter package: copper spotlight */
.price-card.highlight {
  background: #fff;
  border: 2px solid var(--mm-copper-400);
  box-shadow: var(--mm-shadow-lift);
  transform: scale(1.02);
}
.price-card.highlight:hover { transform: scale(1.02) translateY(-4px); }

.badge {
  background: var(--mm-grad-copper);
  color: #fff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px -6px rgba(165, 82, 44, 0.6);
}


/* ============================================================
 * 12. WELCOME: FINAL CTA - DARK PETROL SECTION
 * ============================================================
 * Legacy markup uses <section class="cta"> with inline-styled
 * children. welcome.blade.php was refactored to use the classes
 * below (texts and links unchanged).
 * ============================================================ */
.cta.mm-cta-panel {
  background: var(--mm-grad-petrol);
  border-radius: var(--mm-radius-lg);
  border: 1px solid var(--mm-petrol-700);
  padding: 3.5rem 2rem;
  margin: 1.5rem 0;
  position: relative;
  overflow: hidden;
}

/* Warm glow behind the CTA button */
.cta.mm-cta-panel::before {
  content: "";
  position: absolute;
  left: 50%; bottom: -220px;
  width: 640px; height: 380px;
  transform: translateX(-50%);
  background: radial-gradient(50% 55% at 50% 45%, rgba(208, 131, 79, 0.30) 0%, transparent 72%);
  pointer-events: none;
}

.mm-cta-title {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: 2.1rem;
  color: var(--mm-on-dark);
  margin-bottom: 1rem;
  position: relative;
}

.mm-cta-text {
  color: var(--mm-on-dark-soft);
  font-size: 1.05rem;
  max-width: 58ch;
  margin: 0 auto 1.8rem;
  position: relative;
}

.mm-cta-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
}


/* ============================================================
 * 13. SHARED COMPONENTS
 * ============================================================ */

/* Primary CTA button: copper gradient pill */
.cta-button,
.btn-primary {
  background: var(--mm-grad-copper);
  color: #fff;
  font-weight: 600;
  font-size: 1.02rem;
  padding: 0.95rem 2.4rem;
  border-radius: 999px;
  box-shadow: 0 14px 28px -12px rgba(165, 82, 44, 0.65);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.cta-button:hover,
.btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-2px);
  box-shadow: 0 20px 34px -12px rgba(165, 82, 44, 0.75);
}

/* Secondary CTA (ghost on dark petrol) - replaces old inline styles */
.cta-button.mm-cta-secondary {
  background: transparent;
  color: var(--mm-on-dark);
  border: 1.5px solid rgba(243, 237, 226, 0.45);
  box-shadow: none;
}
.cta-button.mm-cta-secondary:hover {
  background: rgba(243, 237, 226, 0.1);
  border-color: var(--mm-on-dark);
  transform: translateY(-2px);
  box-shadow: none;
}

/* "Coming soon" badge: petrol pill instead of amber */
.coming-soon-badge {
  background: var(--mm-petrol-500);
  color: #eaf3f2;
  box-shadow: none;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

/* Register card + forms (register/demo pages) */
.register-card {
  background: var(--mm-cream-card);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-lg);
  box-shadow: var(--mm-shadow-soft);
  padding: 2.5rem;
}
.register-card h1 {
  font-family: var(--mm-font-display);
  color: var(--mm-ink);
}
.form-section h2 { color: var(--mm-copper-600); }

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea {
  background: #fff;
  border: 1.5px solid var(--mm-line);
  border-radius: var(--mm-radius-sm);
}
input:focus,
textarea:focus {
  border-color: var(--mm-copper-400);
  box-shadow: 0 0 0 4px rgba(191, 107, 60, 0.14);
}

.back-link { color: var(--mm-copper-600); }
.slug-preview { background: var(--mm-cream-soft); color: var(--mm-copper-700); }
.password-requirements { background: var(--mm-cream-soft); }

/* Security question (math CAPTCHA) – register + demo form, same look on both */
.captcha-box {
  margin: 0 0 1.75rem;
  padding: 0.85rem 1rem 0.75rem;
  border: 1.5px dotted var(--mm-petrol-700);
  border-radius: var(--mm-radius-sm);
  background: rgba(31, 78, 75, 0.04);
}
.captcha-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.captcha-row label {
  margin-bottom: 0;
  white-space: nowrap;
  color: var(--mm-ink);
}
.captcha-row label strong { color: var(--mm-petrol-700); }
.captcha-row .captcha-input {
  width: 150px;
  flex: 0 0 150px;
}
.captcha-box .help-text {
  margin: 0.4rem 0 0;
}


/* ============================================================
 * 13b. FORM LAYOUT HELPERS + CONTACT CARDS (replaces inline styles)
 * Responsive behavior lives in section 14 below.
 * ============================================================ */
.register-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.register-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.password-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.password-row-field {
  flex: 1 1 0%;
  min-width: 0;
  position: relative;
}

/* Contact cards (welcome page) */
.mm-contact-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-width: 260px;
  padding: 1rem 1.5rem;
  text-decoration: none;
  color: var(--mm-ink-soft);
  background: var(--mm-cream-card);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.mm-contact-card:hover {
  border-color: var(--mm-copper-400);
  box-shadow: var(--mm-shadow-soft);
}
.mm-contact-card svg {
  color: var(--mm-copper-500);
  flex-shrink: 0;
}
.mm-contact-card-title { font-weight: 600; color: var(--mm-ink); }
.mm-contact-card-sub { font-size: 0.85rem; color: var(--mm-ink-mute); }


/* ============================================================
 * 14. RESPONSIVE
 * ============================================================ */
@media (max-width: 900px) {
  .container { padding: 0.9rem 0.9rem 1.5rem; }

  .hero { padding: 2rem 1.4rem; }
  .hero h2 { font-size: 1.7rem; }

  .hero-marketing {
    min-height: 0;
    padding: 2.4rem 1.5rem;
    background:
      linear-gradient(160deg,
        rgba(250, 246, 238, 0.95) 0%,
        rgba(250, 246, 238, 0.86) 55%,
        rgba(250, 246, 238, 0.72) 100%),
      var(--hero-bg, none) center/cover no-repeat;
  }

  .hero-marketing-content { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-marketing-right { justify-content: flex-start; }

  .header-text h1 { font-size: 1.6rem; }
  .header-logo img, .header-logo-img { max-width: 130px; max-height: 84px; }

  .hero.benefits { padding: 2rem 1.4rem; }
  .benefits ul { grid-template-columns: 1fr; }

  .price-card.highlight { transform: none; }
  .price-card.highlight:hover { transform: translateY(-4px); }

  .cta.mm-cta-panel { padding: 2.5rem 1.4rem; }
  .mm-cta-title { font-size: 1.65rem; }

  .slide img { max-height: 320px; }

  .mm-demos-grid { grid-template-columns: 1fr; }

  .mm-integration-content { flex-direction: column; align-items: center; text-align: center; }
  .mm-integration-icon { width: 64px; height: 64px; }
}

@media (max-width: 768px) {
  .register-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 480px) {
  .register-card { padding: 1.5rem; }
  .register-method-grid { grid-template-columns: 1fr; }
  .password-row-field { flex: 1 1 100%; }
  .captcha-row label { white-space: normal; }
  .captcha-row .captcha-input { width: 100%; flex: 1 1 100%; }
  .mm-contact-card { width: 100%; min-width: 0; }
}


/* ============================================================
 * 14b. LAUNCH OFFER – "Bis Ende gratis" Banner + Highlight
 * ============================================================ */
.launch-offer-banner {
  /* Match the pill style of .hero-note: compact, white background, soft hairline border */
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1.05rem;
  margin-top: 0.75rem;
  background: #ffffff;
  border: 5px solid rgba(209, 16, 16, 0.5);
  border-radius: 999px;
  color: var(--mm-ink, #1a1a1a);
}
.launch-offer-banner .launch-offer-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
}
.launch-offer-banner strong {
  display: block;
  font-size: 1.05rem;
  color: var(--mm-petrol-700, #1f4e4b);
}
.launch-offer-banner small {
  display: block;
  font-size: 0.85rem;
  color: var(--mm-ink-mute, #666);
  margin-top: 0.15rem;
}

/* Clickable banner link */
a.launch-offer-banner-link {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
a.launch-offer-banner-link:hover {
  border-color: var(--mm-copper-500, #b57533);
  box-shadow: var(--mm-shadow-soft, 0 2px 8px rgba(0,0,0,0.08));
  transform: translateY(-1px);
}

/* CTA button with launch offer pulse */
.cta-button-launch {
  position: relative;
  background: var(--mm-copper-500, #b57533);
  color: #fff;
  border: none;
  animation: launch-pulse 2.5s ease-in-out infinite;
}
.cta-button-launch:hover {
  background: var(--mm-copper-600, #9a6229);
  animation: none;
}
@keyframes launch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(181, 117, 51, 0.35); }
  50%      { box-shadow: 0 0 0 8px rgba(181, 117, 51, 0); }
}

/* Clickable pricing card */
a.price-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
a.price-card-link:hover {
  border-color: var(--mm-copper-500, #b57533);
  box-shadow: var(--mm-shadow-medium, 0 4px 16px rgba(0,0,0,0.12));
  transform: translateY(-4px);
}
a.price-card-link .price-card-cta {
  display: block;
  margin-top: auto;
  padding: 0.65rem 1rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--mm-radius-sm, 4px);
  background: var(--mm-petrol-700, #1f4e4b);
  color: #fff;
  transition: background 0.2s;
}
a.price-card-link:hover .price-card-cta {
  background: var(--mm-petrol-800, #183d3b);
}
a.price-card-link .price-card-cta.cta-button-launch {
  background: var(--mm-copper-500, #b57533);
}
a.price-card-link:hover .price-card-cta.cta-button-launch {
  background: var(--mm-copper-600, #9a6229);
}

/* Pricing highlight in launch offer mode */
.launch-offer-highlight {
  background: linear-gradient(90deg, rgba(181, 117, 51, 0.06) 0%, transparent 100%);
  border-left: 3px solid var(--mm-copper-500, #b57533);
  padding: 0.5rem 0.75rem;
  margin: 0.25rem -0.75rem;
  border-radius: 0 var(--mm-radius-sm, 4px) var(--mm-radius-sm, 4px) 0;
}
.launch-offer-highlight strong {
  color: var(--mm-petrol-700, #1f4e4b);
  font-size: 1rem;
}
.launch-offer-highlight small {
  display: block;
  font-size: 0.8rem;
  color: var(--mm-ink-mute, #666);
  margin-top: 0.1rem;
}

/* Launch offer note in pricing section */
.launch-offer-note {
  background: linear-gradient(90deg, rgba(181, 117, 51, 0.06) 0%, transparent 100%);
  border: 1px solid rgba(181, 117, 51, 0.2);
  border-radius: var(--mm-radius-sm, 4px);
  padding: 0.75rem 1rem;
}


/* ============================================================
 * 15. ACCESSIBILITY
 * ============================================================ */
@media (max-width: 768px) {
  /* Stack hero columns and center content on smaller screens */
  .hero-marketing {
    padding: 2rem 1rem;
    min-height: auto;
  }

  .hero-marketing-content {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    justify-items: center;
    text-align: center;
  }

  .hero-marketing-left {
    text-align: center;
  }

  .hero-actions {
    align-items: center;
  }

  .hero-marketing-right {
    /* center the stacked note and banner */
    align-items: center;
    justify-content: flex-start;
  }

  .hero-note,
  .launch-offer-banner {
    margin-top: 0;
    align-self: center;
    display: inline-flex;
  }

  a.launch-offer-banner-link {
    display: inline-flex;
    align-items: center;
  }

  .launch-offer-banner {
    max-width: 420px;
    width: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .feature-card.gastro-box,
  .theme-card-marketing,
  .price-card,
  .cta-button,
  .btn-primary {
    transition: none;
  }
}