:root {
  --dark:#081b2c;
  --dark2:#102f48;
  --blue:#1b8fd3;
  --yellow:#ffca32;
  --green:#23c55e;
  --text:#0b1b2f;
  --muted:#65758b;
  --card:#ffffff;
  --soft:#f3f7fb;
  --shadow:0 20px 56px rgba(0,0,0,.16);
  --radius:28px;
  --focus:0 0 0 4px rgba(255,202,50,.38)
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--text);
  background:linear-gradient(135deg,#0b2033 0%,#173d55 38%,#081827 100%);
  line-height:1.55
}

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

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

.top-info {
  background:#071524;
  color:#dbeafe;
  padding:10px 7vw;
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:14px
}

.top-info a {
  color:#ffca32;
  font-weight:800
}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 7vw;
  background:rgba(8,27,44,.76);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.12)
}

.logo-img {
  height:112px;
  width:auto
}

.main-nav {
  display:flex;
  align-items:center;
  gap:18px;
  color:#fff;
  font-weight:800
}

.main-nav a {
  opacity:.9
}

.main-nav a:hover {
  opacity:1;
  color:#ffca32
}

.nav-cta {
  background:var(--yellow);
  color:#071524!important;
  padding:12px 18px;
  border-radius:999px
}

.nav-toggle {
  display:none;
  background:transparent;
  border:0;
  gap:5px;
  flex-direction:column
}

.nav-toggle span {
  display:block;
  width:28px;
  height:3px;
  background:#fff;
  border-radius:99px
}

.hero {
  min-height:700px;
  padding:90px 7vw;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  align-items:center;
  gap:56px;
  color:#fff;
  position:relative;
  overflow:hidden
}

.hero:before {
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 20% 20%,rgba(255,202,50,.22),transparent 32%),radial-gradient(circle at 80% 25%,rgba(27,143,211,.28),transparent 34%);
  pointer-events:none
}

.hero>* {
  position:relative
}

.hero-logo {
  width:300px;
  margin-bottom:60px
}

.eyebrow {
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:13px;
  font-weight:900;
  color:var(--yellow);
  margin:0 0 14px
}

.hero h1 {
  font-size:clamp(44px,7vw,92px);
  line-height:.96;
  margin:0 0 22px;
  letter-spacing:-.06em
}

.hero-text {
  font-size:20px;
  color:#d9e7f5;
  max-width:760px
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:30px 0
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:14px 22px;
  font-weight:900;
  cursor:pointer;
  transition:.2s
}

.btn-primary {
  background:var(--yellow);
  color:#081827;
  box-shadow:0 14px 30px rgba(255,202,50,.2)
}

.btn-primary:hover {
  transform:translateY(-2px)
}

.btn-ghost,.btn-outline {
  border:2px solid rgba(255,255,255,.45);
  color:#fff;
  background:transparent
}

.btn-outline {
  color:var(--text);
  border-color:#d7e3ee
}

.btn-whatsapp {
  background:#22c55e;
  color:#06140b
}

.proof-strip {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.proof-strip span {
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:10px 14px;
  border-radius:999px;
  color:#e8f2fb
}

.hero-showcase {
  position:relative;
  min-height:520px
}

.camera-card {
  background:linear-gradient(145deg,#eaf2f7,#fff);
  border-radius:42px;
  min-height:420px;
  padding:30px;
  box-shadow:var(--shadow);
  position:relative;
  color:var(--text);
  transform:rotate(2deg)
}

.camera-card:before {
  content:"";
  position:absolute;
  inset:18px;
  border:4px solid #0b1b2f;
  border-radius:32px
}

.flash {
  width:86px;
  height:54px;
  background:var(--yellow);
  border-radius:16px;
  position:absolute;
  right:42px;
  top:42px
}

.camera-preview {
  position:absolute;
  left:54px;
  right:54px;
  top:120px;
  height:170px;
  border-radius:28px;
  background:linear-gradient(135deg,#082033,#1b8fd3);
  display:grid;
  place-items:center;
  color:#fff
}

.camera-logo {
  width:300px
}

.camera-preview span {
  font-weight:900
}

.print-slot {
  position:absolute;
  left:72px;
  right:72px;
  bottom:52px;
  background:#061522;
  color:#fff;
  border-radius:22px;
  padding:18px
}

.print-slot strong {
  display:block;
  font-size:22px
}

.floating-card {
  position:absolute;
  background:#fff;
  color:var(--text);
  border-radius:20px;
  padding:18px 22px;
  box-shadow:var(--shadow)
}

.floating-card strong {
  display:block
}

.floating-card span {
  color:var(--muted)
}

.floating-card.left {
  left:-20px;
  bottom:90px
}

.floating-card.right {
  right:-10px;
  top:90px
}

.section {
  padding:86px 7vw;
  background:#fff
}

.stats-section {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  background:#f5f9fc
}

.stat {
  background:#fff;
  border-radius:24px;
  padding:28px;
  text-align:center;
  box-shadow:0 10px 35px rgba(10,30,50,.08)
}

.stat strong {
  display:block;
  font-size:40px;
  color:var(--blue)
}

.section-heading {
  max-width:850px;
  margin-bottom:34px
}

.section-heading.center {
  text-align:center;
  margin-left:auto;
  margin-right:auto
}

.section-heading h2 {
  font-size:clamp(32px,5vw,58px);
  line-height:1.04;
  margin:0 0 16px;
  letter-spacing:-.04em
}

.section-heading p {
  color:var(--muted);
  font-size:18px
}

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

.feature-card {
  background:var(--soft);
  border:1px solid #dfeaf2;
  border-radius:28px;
  padding:28px
}

.feature-card span {
  font-size:38px
}

.feature-card h3 {
  font-size:24px;
  margin:14px 0 8px
}

.feature-card p {
  color:var(--muted)
}

.greenscreen-section {
  background:#ecfff3
}

.greenscreen-card {
  background:#fff;
  border-radius:var(--radius);
  padding:44px;
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:34px;
  box-shadow:0 18px 60px rgba(0,0,0,.08)
}

.greenscreen-list {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin:24px 0
}

.greenscreen-list span {
  background:#ecfff3;
  padding:12px 14px;
  border-radius:16px;
  font-weight:800
}

.green-panel {
  --green-bg: url("assets/greenscreen/strand.jpg");
  position:relative;
  overflow:hidden;
  isolation:isolate;
  border-radius:28px;
  min-height:330px;
  padding:30px;
  color:#062414;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center
}

.green-panel::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:var(--green-bg), linear-gradient(135deg,#17b35b,#9cffba);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:background-image .35s ease, transform .35s ease, filter .35s ease;
  transform:scale(1.02);
  filter:saturate(1.04) contrast(1.03);
}

.green-panel::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.02))
}

.green-logo {
  width:300px
}

.green-panel span {
  text-transform:uppercase;
  font-weight:900
}

.green-panel strong {
  font-size:44px;
  line-height:1
}

.green-theme-label {
  margin-top:16px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(255,255,255,.75);
  font-size:14px;
  font-weight:800;
  color:#062414;
  box-shadow:0 10px 30px rgba(0,0,0,.08)
}

.preview-panels {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  margin-top:14px
}

.preview-btn {
  appearance:none;
  border:2px solid transparent;
  background:#082033;
  color:#fff;
  border-radius:18px;
  padding:18px;
  font-weight:900;
  text-align:center;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease
}

.preview-btn:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(8,32,51,.18)
}

.preview-btn.is-active {
  background:#ffca32;
  color:#071524;
  border-color:#ffca32
}

.dark-section {
  background:#071827;
  color:#fff
}

.dark-section .section-heading p {
  color:#bcd0df
}

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

.price-card {
  background:#fff;
  color:var(--text);
  border-radius:28px;
  padding:32px;
  position:relative
}

.price-card.featured {
  transform:scale(1.04);
  border:4px solid var(--yellow)
}

.badge {
  position:absolute;
  right:24px;
  top:24px;
  background:var(--yellow);
  padding:6px 12px;
  border-radius:999px;
  font-weight:900
}

.price {
  font-size:38px;
  font-weight:900;
  color:var(--blue);
  margin:10px 0
}

.price-card ul {
  padding-left:20px;
  color:var(--muted)
}

.comparison {
  margin-top:40px;
  background:rgba(255,255,255,.08);
  border-radius:24px;
  padding:24px
}

.comparison-table .row {
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:10px;
  padding:13px;
  border-bottom:1px solid rgba(255,255,255,.15)
}

.comparison-table .head {
  font-weight:900;
  color:var(--yellow)
}

.gallery-section {
  background:#f5f9fc
}

.gallery-grid,.event-gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:18px
}

.gallery-item,.event-photo-card {
  background:#fff;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 35px rgba(10,30,50,.1)
}

.gallery-item img,.event-photo-card img {
  width:100%;
  height:230px;
  object-fit:cover
}

.event-photo-card div {
  padding:14px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between
}

.event-photo-card span {
  font-size:13px;
  color:var(--muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.gallery-loading {
  grid-column:1/-1;
  text-align:center;
  color:var(--muted);
  padding:30px
}

.event-download-section {
  background:#fff
}

.download-cta-card,.download-box {
  border-radius:var(--radius);
  background:linear-gradient(135deg,#f4f9fc,#fff);
  padding:38px;
  box-shadow:0 14px 45px rgba(8,24,39,.1);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:28px
}

.download-box {
  display:block;
  max-width:980px;
  margin:0 auto
}

.download-box code {
  display:block;
  background:#0c1528;
  color:#fff;
  padding:16px;
  border-radius:14px;
  overflow:auto
}

.event-login-form {
  display:grid;
  gap:18px
}

.event-login-form label,.contact-form label {
  display:grid;
  gap:8px;
  font-weight:900
}

.event-login-form input,.event-login-form select,.contact-form input,.contact-form select,.contact-form textarea {
  width:100%;
  border:1px solid #d7e3ee;
  border-radius:16px;
  padding:14px;
  font:inherit
}

.error-message {
  background:#ffe8e8;
  color:#b91c1c;
  padding:12px 14px;
  border-radius:14px;
  font-weight:800
}

.form-note {
  color:var(--muted);
  font-size:14px
}

.timeline {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px
}

.timeline article {
  background:var(--soft);
  border-radius:24px;
  padding:26px
}

.timeline span {
  color:var(--blue);
  font-size:38px;
  font-weight:900
}

.image-band {
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:18px;
  background:#f5f9fc
}

.image-tile {
  min-height:230px;
  border-radius:28px;
  background:linear-gradient(135deg,#0b2033,#1b8fd3);
  display:flex;
  align-items:end;
  padding:24px;
  color:#fff;
  font-size:30px;
  font-weight:900
}

.image-tile.large {
  min-height:330px
}

.region-section {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  align-items:center
}

.faq-list {
  display:grid;
  gap:12px
}

.faq-list details {
  background:var(--soft);
  border-radius:20px;
  padding:20px
}

.faq-list summary {
  font-weight:900;
  cursor:pointer
}

.contact-section {
  background:#071827;
  color:#fff
}

.contact-shell {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px
}

.contact-logo {
  width:150px
}

.contact-copy p {
  color:#cfe0ee
}

.contact-buttons {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0
}

.contact-form {
  background:#fff;
  color:var(--text);
  border-radius:28px;
  padding:28px;
  display:grid;
  gap:16px
}

.sticky-whatsapp {
  position:fixed;
  right:22px;
  bottom:22px;
  background:#22c55e;
  color:#fff;
  font-weight:900;
  padding:14px 18px;
  border-radius:999px;
  box-shadow:var(--shadow);
  z-index:20
}

.site-footer {
  background:#061522;
  color:#cfe0ee;
  padding:38px 7vw;
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:24px
}

.footer-logo {
  width:120px
}

.site-footer nav {
  display:grid;
  gap:10px
}

.lightbox {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.86);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:50
}

.lightbox.open {
  display:flex
}

.lightbox img {
  max-width:88vw;
  max-height:84vh;
  border-radius:18px
}

.lightbox button {
  position:absolute;
  background:#fff;
  border:0;
  border-radius:999px;
  font-size:40px;
  cursor:pointer
}

.lightbox-close {
  right:28px;
  top:28px;
  width:54px;
  height:68px
}

.lightbox-nav {
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:70px
}

.lightbox-prev {
  left:28px
}

.lightbox-next {
  right:28px
}

.animated-logo {
  animation:floaty 4s ease-in-out infinite
}

.hero-logo-float {
  animation:floaty 5s ease-in-out infinite
}

@keyframes floaty {
  0%,100% {
    transform:translateY(0)
  }

  50% {
    transform:translateY(-7px)
  }

}

@media(max-width:980px) {
  .main-nav {
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#071827;
    padding:20px 7vw;
    flex-direction:column;
    align-items:flex-start
  }

  .main-nav.active {
    display:flex
  }

  .nav-toggle {
    display:flex
  }

  .hero,.greenscreen-card,.contact-shell,.region-section {
    grid-template-columns:1fr
  }

  .stats-section,.pricing-grid,.feature-grid,.timeline {
    grid-template-columns:1fr 1fr
  }

  .site-footer {
    grid-template-columns:1fr
  }

  .download-cta-card {
    display:block
  }

  .hero {
    min-height:auto
  }

  .hero-showcase {
    display:none
  }

}

@media(max-width:640px) {
  .top-info {
    display:block;
    text-align:center
  }

  .stats-section,.pricing-grid,.feature-grid,.timeline,.greenscreen-list,.image-band {
    grid-template-columns:1fr
  }

  .section {
    padding:62px 5vw
  }

  .hero {
    padding:70px 5vw
  }

  .hero h1 {
    font-size:44px
  }

  .site-header {
    padding:14px 5vw
  }

  .logo-img {
    height:64px
  }

  .comparison-table .row {
    font-size:13px
  }

  .event-photo-card div {
    display:block
  }

  .event-photo-card .btn {
    margin-top:10px;
    width:100%
  }

}

/* =========================================================
   FIX: STARTSEITEN-GALERIE FULL WIDTH
   Desktop: 6 Bilder über die gesamte Browserbreite
   Tablet: 4 Bilder
   Handy: 2 Bilder
   Hinweistext wurde in index.php entfernt.
========================================================= */
.gallery-section {
  background: #f5f9fc;
  overflow: hidden;
}

.gallery-section .section-heading {
  margin-bottom: 0;
}

#galleryGrid.gallery-grid {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 52px;
  padding: 0 4vw;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}

#galleryGrid .gallery-item {
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
  background: #ffffff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 16px 44px rgba(10, 30, 50, 0.14);
}

#galleryGrid .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform 0.28s ease, filter 0.28s ease;
}

#galleryGrid .gallery-item:hover img {
  transform: scale(1.055);
  filter: brightness(1.04);
}

@media (max-width: 1200px) {
  #galleryGrid.gallery-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

}

@media (max-width: 768px) {
  #galleryGrid.gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    padding: 0 5vw;
  }

}

/* Paket Hover Animation */
.price-card {
  transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}

.price-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}

.price-card.featured:hover {
  transform: translateY(-22px) scale(1.015);
}

/* Schöne Häkchen-Liste */
.price-card ul {
  list-style: none;
  padding: 0;
  margin: 20px 0 28px;
}

.price-card li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 10px;
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 500;
}

.price-card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #f7c948;
  font-weight: 900;
}

.price-card li strong {
  font-weight: 700;
  color: #11131c;
}

.price-card.featured li strong {
  color: #11131c;
}

/* Vergleichstabelle mit klaren Häkchen */
.comparison-table .row span:not(:first-child) {
  text-align: center;
  font-weight: 800;
}

.comparison-table .row span:not(:first-child) {
  color: rgba(255, 255, 255, 0.82);
}

.comparison-table .row span:not(:first-child):has(> .check),
.comparison-table .row span.check {
  color: #f7c948;
}

.check {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #f7c948;
  color: #11131c;
  font-weight: 900;
}

.cross {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 900;
}

/* =========================================================
   GREENSCREEN PREVIEW: Motiv-Buttons wechseln Hintergrundbild
   Bilder bitte hier ablegen:
   assets/greenscreen/strand.jpg
   assets/greenscreen/berge.jpg
   assets/greenscreen/geburtstag.jpg
   assets/greenscreen/firma.jpg
========================================================= */
.green-panel > * {
  position: relative;
  z-index: 1;
}

.green-panel::after {
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.04));
}

.preview-btn:focus-visible {
  outline: 3px solid #ffca32;
  outline-offset: 3px;
}

/* =========================================================
   GREENSCREEN TEXTFARBE JE NACH MOTIV
========================================================= */
/* Standard = dunkle Schrift */
.green-panel {
  color: #062414;
}

/* Berge = weiße Schrift */
.green-panel[data-theme="berge"] {
  color: #ffffff;
}

/* Firma = weiße Schrift */
.green-panel[data-theme="firma"] {
  color: #ffffff;
}

/* Damit auch die Untertexte weiss werden */
.green-panel[data-theme="berge"] .green-theme-label,
.green-panel[data-theme="firma"] .green-theme-label {
  color: #ffffff;
  background: rgba(0,0,0,0.35);
}

/* Optional: leichter Schatten für bessere Lesbarkeit */
.green-panel[data-theme="berge"] strong,
.green-panel[data-theme="firma"] strong,
.green-panel[data-theme="berge"] span,
.green-panel[data-theme="firma"] span {
  text-shadow: 0 2px 12px rgba(0,0,0,0.45);
}

/* =========================================================
   ACCESSIBILITY & PERFORMANCE POLISH
========================================================= */
:focus-visible {
  outline: none;
  box-shadow: var(--focus);
}

.nav-toggle {
  cursor: pointer;
}

.nav-toggle:focus-visible,
.btn:focus-visible,
.preview-btn:focus-visible,
.gallery-item:focus-visible,
.lightbox button:focus-visible {
  box-shadow: var(--focus);
}

.hero-logo,
.camera-logo,
.green-logo,
.contact-logo,
.footer-logo {
  height: auto;
}

.price-card.featured {
  will-change: transform;
}

.gallery-item img,
.event-photo-card img,
.green-panel::before {
  backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

}

@media (max-width: 980px) {
  .site-header {
    position: sticky;
  }

  .main-nav a {
    width: 100%;
  }

}


/* =========================================================
   SEO-CONTENT SECTION: lokale Suchbegriffe sichtbar & lesbar
========================================================= */
.seo-section {
  background: #ffffff;
}

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

.seo-grid article {
  background: var(--soft);
  border: 1px solid #dfeaf2;
  border-radius: 24px;
  padding: 26px;
}

.seo-grid h3 {
  margin: 0 0 10px;
  font-size: 23px;
}

.seo-grid p {
  margin: 0;
  color: var(--muted);
}

.contact-address {
  font-style: normal;
}

@media (max-width: 980px) {
  .seo-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   GOOGLE BEWERTUNGEN / MANUELLE REVIEWS
========================================================= */
.reviews-section {
  background: linear-gradient(135deg, #fff7ea 0%, #ffffff 58%, #f5f9fc 100%);
}

.review-request-card {
  max-width: 1080px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(8, 27, 44, 0.10);
  border-radius: 26px;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 18px 48px rgba(8, 27, 44, 0.14);
}

.review-request-card h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.review-request-card p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}

.review-google-btn {
  white-space: nowrap;
  background: linear-gradient(135deg, #ffca32, #ff981f);
}

.reviews-heading {
  margin-top: 70px;
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 1220px;
  margin: 0 auto;
}

.review-card {
  position: relative;
  background: #ffffff;
  border: 1px solid #dfeaf2;
  border-radius: 24px;
  padding: 26px;
  box-shadow: 0 14px 40px rgba(10, 30, 50, 0.10);
  overflow: hidden;
}

.review-card::before {
  content: "“";
  position: absolute;
  top: -24px;
  left: 18px;
  font-size: 110px;
  line-height: 1;
  color: rgba(255, 202, 50, 0.20);
  font-family: Georgia, serif;
}

.review-stars {
  position: relative;
  z-index: 1;
  color: #ffca32;
  letter-spacing: 2px;
  font-size: 18px;
  margin-bottom: 14px;
}

.review-card p {
  position: relative;
  z-index: 1;
  color: #304258;
  font-size: 16px;
  margin: 0 0 20px;
}

.review-card footer {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 3px;
}

.review-card strong {
  color: var(--text);
}

.review-card span,
.review-card small {
  color: var(--muted);
}

.review-card small {
  font-weight: 800;
}

@media (max-width: 980px) {
  .review-request-card {
    display: block;
  }

  .review-google-btn {
    margin-top: 18px;
  }

  .reviews-grid {
    grid-template-columns: 1fr;
  }
}



.google-mark::before {
  content: none !important;
  display: none !important;
}