/* ================================================================
   DRON THEME — EXACT REPLICA
   Override Tailwind with correct --cl-* variable names
   ================================================================ */

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

/* ================================================================
   1. GLOBAL BACKGROUND + STARS (Dron starfield effect)
   ================================================================ */

html, body {
  background: #0d0000 !important;
  font-family: 'Inter', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* Deep red radial glow from top like Dron */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 100vh;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(180, 0, 20, 0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 20% 80%, rgba(100, 0, 10, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(100, 0, 10, 0.1) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Animated starfield dots */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 22% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 38% 22%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 52% 5%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 68% 18%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 8%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 94% 25%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(2px 2px at 5% 40%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 30% 48%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 62%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 38%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(2px 2px at 75% 52%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 88% 42%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 12% 72%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 28% 85%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 42% 78%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 58% 88%, rgba(255,255,255,0.65) 0%, transparent 100%),
    radial-gradient(1px 1px at 72% 75%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 90% 65%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 3% 90%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 96% 88%, rgba(255,255,255,0.6) 0%, transparent 100%);
  pointer-events: none;
  z-index: 100;
}

/* ================================================================
   2. LAYOUT — Full width like Dron
   ================================================================ */

#app {
  position: relative;
  z-index: 1;
}

/* ================================================================
   3. HEADER — Dron floating pill capsule style
   ================================================================ */

header.component {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

/* Hide the top card block (shop name/description banner) */
header.component > .bg-card {
  display: none !important;
}

/* Nav is the pill */
header.component nav {
  background: rgba(20, 3, 3, 0.82) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(232, 25, 44, 0.15) !important;
  border-radius: 999px !important;
  margin: 24px auto !important;
  max-width: 860px !important;
  padding: 7px 20px !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Nav inner flex container */
header.component nav > div {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Hide the scroll-gradient overlay */
header.component nav .absolute.inset-y-0 {
  display: none !important;
}

/* All nav links — transparent text style */
header.component nav a,
header.component nav button[type="button"] {
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  padding: 6px 14px !important;
  transition: color 0.2s ease !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

header.component nav a:hover,
header.component nav button[type="button"]:hover {
  color: #ffffff !important;
  background: rgba(255,255,255,0.05) !important;
  transform: none !important;
}

/* Active nav link */
header.component nav a.bg-accent-500\/10,
header.component nav .bg-accent-500\/10 {
  background: transparent !important;
  color: rgba(232, 25, 44, 1) !important;
}

/* Cart link */
header.component nav a[href*="/cart"] {
  padding: 6px 10px !important;
  background: transparent !important;
  border-radius: 8px !important;
}

/* Right side buttons: Log In (text) + Get Started (red pill) */
header.component nav > div > div:last-child {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* ================================================================
   4. HERO SECTION
   ================================================================ */

.dron-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 180px 24px 100px;
  min-height: 95vh;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background-image: 
    radial-gradient(ellipse at center, rgba(232, 25, 44, 0.1) 0%, rgba(13,0,0,1) 80%),
    linear-gradient(to bottom, rgba(13,0,0,0.6) 0%, rgba(13,0,0,1) 100%),
    url('https://images.unsplash.com/photo-1605810230434-7631ac76ec81?auto=format&fit=crop&w=2000&q=80');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

/* Global fix for invisible text on primary buttons */
.bg-accent-500.text-t-accent {
  color: #ffffff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.bg-accent-500.text-t-accent svg {
  fill: #ffffff !important;
}

/* Trustpilot badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 8px 20px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 32px;
  letter-spacing: 0.02em;
  backdrop-filter: blur(8px);
}

.hero-badge svg { flex-shrink: 0; }

/* Main title */
.hero-title {
  font-size: clamp(2.6rem, 5.5vw, 4.8rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 18px;
}

.hero-title span {
  display: block;
  color: rgba(232, 25, 44, 1);
}

/* Subtitle */
.hero-subtitle {
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.56);
  max-width: 480px;
  line-height: 1.72;
  font-weight: 400;
  margin: 0 0 44px;
}

/* Buttons */
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-dron {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.925rem;
  font-family: 'Inter', sans-serif;
  text-decoration: none !important;
  cursor: pointer;
  border: none;
  transition: all 0.22s ease;
  white-space: nowrap;
}

.btn-primary {
  background: rgba(232, 25, 44, 1) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 24px rgba(232, 25, 44, 0.45) !important;
}
.btn-primary:hover {
  background: rgba(200, 15, 30, 1) !important;
  box-shadow: 0 8px 32px rgba(232, 25, 44, 0.6) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

.btn-secondary {
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  color: #ffffff !important;
  backdrop-filter: blur(8px);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.12) !important;
  transform: translateY(-2px) !important;
  color: #fff !important;
}

/* Search bar */
.search-wrapper {
  width: 100%;
  max-width: 460px;
  position: relative;
  margin-bottom: 40px;
}

.search-wrapper input {
  width: 100%;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 12px !important;
  padding: 15px 20px 15px 50px !important;
  color: #ffffff !important;
  font-size: 0.95rem !important;
  font-family: 'Inter', sans-serif !important;
  transition: all 0.25s ease;
}

.search-wrapper input::placeholder { color: rgba(255,255,255,0.35) !important; }

.search-wrapper input:focus {
  border-color: rgba(232, 25, 44, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(232, 25, 44, 0.12) !important;
  outline: none;
  background: rgba(255,255,255,0.07) !important;
}

.search-wrapper svg {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px;
  color: rgba(255,255,255,0.4);
}

/* ================================================================
   5. PRODUCT CARDS — Dron dark cards with red hover border
   ================================================================ */

/* Override .bg-card (Tailwind class used by product cards) */
.bg-card {
  background-color: rgba(21, 5, 5, 1) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
}

/* Card hover — red border glow */
a.block.h-full.bg-card:hover {
  border-color: rgba(232, 25, 44, 0.35) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(232, 25, 44, 0.18) !important;
  transform: translateY(-6px) !important;
}

a.block.h-full.bg-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

/* Card image area */
a.block.h-full.bg-card .relative.overflow-hidden {
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}

a.block.h-full.bg-card img {
  transition: transform 0.4s ease;
}

a.block.h-full.bg-card:hover img {
  transform: scale(1.04);
}

/* Stock badge */
.badges > div {
  background: rgba(13,0,0,0.88) !important;
  border: 1px solid rgba(232,25,44,0.4) !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.7rem !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.badges > div::before {
  content: '';
  display: inline-block;
  width: 5px; height: 5px;
  background: rgba(232,25,44,1);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(232,25,44,0.9);
}

/* Buy Now button (.bg-accent-500) */
.bg-accent-500 {
  background-color: rgba(232, 25, 44, 1) !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}

.bg-accent-500:hover,
.hover\:bg-accent-500:hover {
  background-color: rgba(200, 15, 30, 1) !important;
  box-shadow: 0 4px 16px rgba(232,25,44,0.45) !important;
}

/* "Online" green dot */
.pulsating { animation: pulsating 1.25s linear infinite; }

/* Price color */
.text-accent-500 { color: rgba(232, 25, 44, 1) !important; }

/* Card product name */
a.block.h-full.bg-card h3 {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #fff !important;
}

/* "Starting at" label */
a.block.h-full.bg-card .text-t-primary\/50 {
  color: rgba(255,255,255,0.42) !important;
}

/* ================================================================
   6. COMPONENTS SECTION (Browse / Trending)
   ================================================================ */

.components-container {
  position: relative;
  z-index: 2;
}

/* Section headers — Browse our Products, etc */
.components-container h2,
.components-container .text-2xl,
.components-container .text-3xl {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Search categories input in products section */
.components-container input[type="text"],
.components-container input[type="search"] {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  padding: 10px 16px 10px 42px !important;
  font-family: 'Inter', sans-serif !important;
}

.components-container input:focus {
  border-color: rgba(232, 25, 44, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(232,25,44,0.1) !important;
  outline: none !important;
}

.components-container input::placeholder {
  color: rgba(255,255,255,0.32) !important;
}

/* Category filter pills */
.components-container button.bg-accent-500\/10 {
  background: rgba(232,25,44,0.1) !important;
  color: rgba(232,25,44,1) !important;
  border: 1px solid rgba(232,25,44,0.25) !important;
  border-radius: 100px !important;
}

.components-container button.bg-white\/5 {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 100px !important;
  color: rgba(255,255,255,0.65) !important;
}

.components-container button.bg-white\/5:hover {
  background: rgba(255,255,255,0.09) !important;
  color: #fff !important;
}

/* ================================================================
   7. FOOTER
   ================================================================ */

footer {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 0 !important;
  margin-top: 60px !important;
  position: relative;
  z-index: 2;
}

footer a {
  color: rgba(255,255,255,0.55) !important;
  font-size: 0.875rem !important;
  transition: color 0.2s !important;
}

footer a:hover { color: rgba(232,25,44,1) !important; }

footer p,
footer span {
  color: rgba(255,255,255,0.45) !important;
  font-size: 0.875rem !important;
}

footer .border-b {
  border-bottom-color: rgba(255,255,255,0.05) !important;
}

/* ================================================================
   8. SCROLLBAR
   ================================================================ */

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(232,25,44,0.45);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(232,25,44,0.85);
}

/* ================================================================
   9. SNOW — smaller, subtler dots
   ================================================================ */

#snow .snowflake {
  width: 2px !important;
  height: 2px !important;
  background: rgba(255,255,255,0.75) !important;
}

/* ================================================================
   10. DRON NAV BRAND (custom class in header.njk)
   ================================================================ */

.dron-nav-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  white-space: nowrap;
  flex-shrink: 0;
}

.dron-nav-brand img {
  height: 26px; width: 26px;
  border-radius: 7px;
  object-fit: cover;
}

.dron-nav-brand:hover { color: #fff !important; }

/* "Get Started" button styling (added inline in header.njk) */

/* ================================================================
   11. ANIMATIONS
   ================================================================ */

@keyframes pulse-dron {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: 0.55; }
}

.hero-badge .dot {
  width: 6px; height: 6px;
  background: rgba(232,25,44,1);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(232,25,44,1);
  animation: pulse-dron 2s infinite;
}

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

.dron-hero .hero-badge    { animation: fadeUp 0.5s 0.1s both ease; }
.dron-hero .hero-title    { animation: fadeUp 0.5s 0.2s both ease; }
.dron-hero .hero-subtitle { animation: fadeUp 0.5s 0.3s both ease; }
.dron-hero .search-wrapper{ animation: fadeUp 0.5s 0.4s both ease; }
.dron-hero .hero-actions  { animation: fadeUp 0.5s 0.5s both ease; }

/* ================================================================
   12. RESPONSIVE
   ================================================================ */

@media (max-width: 768px) {
  header.component nav {
    border-radius: 16px !important;
    margin: 10px 12px !important;
    padding: 6px 14px !important;
    max-width: none !important;
  }

  .dron-hero {
    padding: 80px 20px 60px;
    min-height: auto;
  }

  .hero-title { font-size: clamp(2rem, 9vw, 3rem); }
}

/* ================================================================
   13. FEATURES & REVIEWS SECTIONS
   ================================================================ */
.dron-features {
  padding: 80px 20px;
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
}
.features-header {
  text-align: center;
  margin-bottom: 50px;
}
.features-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}
.features-header p {
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.feature-card {
  background: rgba(21, 5, 5, 0.7);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}
.feature-card:hover {
  border-color: rgba(232, 25, 44, 0.3);
  box-shadow: 0 10px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(232, 25, 44, 0.15);
  transform: translateY(-5px);
}
.large-feature {
  grid-column: span 2;
  grid-row: span 2;
  flex-direction: row;
  align-items: center;
  background: linear-gradient(135deg, rgba(21,5,5,1) 0%, rgba(35,5,5,1) 100%);
  position: relative;
  overflow: hidden;
}
.large-feature::before {
  content: '';
  position: absolute;
  right: -20%;
  top: -20%;
  width: 60%;
  height: 140%;
  background: rgba(232, 25, 44, 0.1);
  transform: rotate(-15deg);
  filter: blur(40px);
}
.feature-content {
  flex: 1;
  z-index: 2;
  padding-right: 20px;
}
.feature-badge {
  display: inline-block;
  background: rgba(232,25,44,0.15);
  color: #e8192c;
  border: 1px solid rgba(232,25,44,0.3);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 15px;
}
.large-feature h3 {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 15px;
}
.large-feature p {
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}
.feature-image {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2;
}
.product-mockup {
  width: 180px;
  height: 240px;
  background: linear-gradient(to bottom, #1a1a1a, #0a0a0a);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 20px 20px 40px rgba(0,0,0,0.8), -10px -10px 20px rgba(255,255,255,0.02);
  position: relative;
  transform: perspective(800px) rotateY(-15deg) rotateX(5deg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-mockup::after {
  content: 'ZEKAA';
  font-size: 32px;
  font-weight: 900;
  color: rgba(232,25,44,0.8);
  font-style: italic;
  text-shadow: 0 0 20px rgba(232,25,44,0.4);
}
.small-feature h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.small-feature p {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  line-height: 1.5;
}
.feature-icon {
  width: 50px;
  height: 50px;
  background: rgba(232,25,44,0.1);
  border: 1px solid rgba(232,25,44,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8192c;
  margin-bottom: 20px;
  box-shadow: 0 0 20px rgba(232,25,44,0.2);
}
.delivery-steps {
  display: flex;
  align-items: center;
  margin-top: 20px;
}
.delivery-steps .step {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
}
.delivery-steps .step.active {
  background: #e8192c;
  box-shadow: 0 0 10px rgba(232,25,44,0.6);
}
.delivery-steps .line {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,0.1);
  margin: 0 5px;
}
.wide-feature {
  grid-column: span 2;
}
.wide-feature h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.wide-feature p {
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.payment-methods {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
}
.pay-icon {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 8px 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dron-reviews {
  padding: 80px 20px;
  position: relative;
  z-index: 10;
  max-width: 1200px;
  margin: 0 auto;
}
.reviews-header {
  text-align: center;
  margin-bottom: 50px;
}
.reviews-header h2 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}
.reviews-header p {
  color: rgba(255,255,255,0.6);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.review-card {
  background: rgba(21, 5, 5, 0.6);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
.review-card:hover {
  background: rgba(21, 5, 5, 0.9);
  border-color: rgba(232, 25, 44, 0.2);
  transform: translateY(-4px);
}
.review-stars {
  color: #e8192c;
  font-size: 1.2rem;
  margin-bottom: 15px;
  letter-spacing: 2px;
}
.review-text {
  color: rgba(255,255,255,0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  font-style: italic;
  margin-bottom: 25px;
  flex: 1;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.author-avatar {
  width: 40px;
  height: 40px;
  background: rgba(232,25,44,0.15);
  border: 1px solid rgba(232,25,44,0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
}
.author-info h4 {
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0 0 2px 0;
}
.author-info span {
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
}
@media (max-width: 900px) {
  .features-grid, .reviews-grid {
    grid-template-columns: 1fr;
  }
  .large-feature, .wide-feature {
    grid-column: span 1;
  }
  .large-feature {
    grid-row: span 1;
    flex-direction: column;
    text-align: center;
  }
  .feature-content {
    padding-right: 0;
    margin-bottom: 30px;
  }
}