/*
 * Google Professional Styling for Lagom CMS Sections
 * Based on Material Design 3 and Google's design principles
 */

/* ================================
   GOOGLE DESIGN SYSTEM VARIABLES
   ================================ */

:root {
  /* Google Brand Colors */
  --google-blue: #1a73e8;
  --google-blue-dark: #1557b0;
  --google-blue-light: #4285f4;
  --google-green: #34a853;
  --google-red: #ea4335;
  --google-yellow: #fbbc04;
  
  /* Material Design 3 Colors */
  --md-primary: #1a73e8;
  --md-primary-container: #e8f0fe;
  --md-secondary: #5f6368;
  --md-surface: #ffffff;
  --md-surface-variant: #f8f9fa;
  --md-outline: #dadce0;
  --md-outline-variant: #e8eaed;
  
  /* Typography - Google Sans */
  --google-font-family: 'Google Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --google-font-display: 'Google Sans Display', var(--google-font-family);
  
  /* Typography Scale */
  --google-text-display-large: 57px;
  --google-text-display-medium: 45px;
  --google-text-display-small: 36px;
  --google-text-headline-large: 32px;
  --google-text-headline-medium: 28px;
  --google-text-headline-small: 24px;
  --google-text-title-large: 22px;
  --google-text-title-medium: 16px;
  --google-text-body-large: 16px;
  --google-text-body-medium: 14px;
  --google-text-label-large: 14px;
  
  /* Spacing - 8px grid system */
  --google-space-xs: 4px;
  --google-space-sm: 8px;
  --google-space-md: 16px;
  --google-space-lg: 24px;
  --google-space-xl: 32px;
  --google-space-2xl: 48px;
  --google-space-3xl: 64px;
  --google-space-4xl: 80px;
  
  /* Elevation Shadows */
  --google-shadow-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --google-shadow-2: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
  --google-shadow-3: 0 4px 8px 3px rgba(60, 64, 67, 0.15), 0 1px 3px 0 rgba(60, 64, 67, 0.3);
  --google-shadow-4: 0 6px 10px 4px rgba(60, 64, 67, 0.15), 0 2px 3px 0 rgba(60, 64, 67, 0.3);
  --google-shadow-5: 0 8px 12px 6px rgba(60, 64, 67, 0.15), 0 4px 4px 0 rgba(60, 64, 67, 0.3);
  
  /* Border Radius */
  --google-radius-xs: 4px;
  --google-radius-sm: 8px;
  --google-radius-md: 12px;
  --google-radius-lg: 16px;
  --google-radius-xl: 24px;
  --google-radius-full: 9999px;
  
  /* Transitions */
  --google-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --google-transition-standard: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --google-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================
   GOOGLE BANNER SECTION STYLES
   ================================ */

.google-banner-section {
  padding: var(--google-space-4xl) 0;
  position: relative;
  overflow: hidden;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.google-clean-bg {
  background: #ffffff;
}

.google-gradient-bg {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.google-colored-bg {
  background: var(--md-primary-container);
}

.google-full-width .container-fluid {
  max-width: none;
  padding-left: var(--google-space-lg);
  padding-right: var(--google-space-lg);
}

/* Banner Content */
.google-banner-content {
  position: relative;
  z-index: 2;
}

.google-banner-text {
  padding: var(--google-space-lg) 0;
}

/* Eyebrow Text */
.google-eyebrow {
  margin-bottom: var(--google-space-md);
}

.google-eyebrow-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--google-space-xs) var(--google-space-md);
  background: var(--md-primary-container);
  color: var(--md-primary);
  border-radius: var(--google-radius-full);
  font-family: var(--google-font-family);
  font-size: var(--google-text-label-large);
  font-weight: 500;
  letter-spacing: 0.1px;
  text-transform: uppercase;
}

/* Headlines */
.google-headline {
  font-family: var(--google-font-display);
  font-size: clamp(2rem, 5vw, var(--google-text-display-medium));
  font-weight: 400;
  line-height: 1.2;
  margin-bottom: var(--google-space-lg);
  color: #202124;
  letter-spacing: -0.5px;
}

.google-headline-centered {
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.google-gradient-bg .google-headline {
  color: white;
}

/* Subheadlines */
.google-subheadline {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-large);
  line-height: 1.5;
  color: #5f6368;
  margin-bottom: var(--google-space-xl);
  max-width: 600px;
}

.google-subheadline-centered {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.google-gradient-bg .google-subheadline {
  color: rgba(255, 255, 255, 0.9);
}

/* CTA Buttons */
.google-cta-buttons {
  display: flex;
  gap: var(--google-space-md);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--google-space-xl);
}

.google-btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--google-space-md) var(--google-space-xl);
  background: var(--google-blue);
  color: white;
  border: none;
  border-radius: var(--google-radius-lg);
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-large);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--google-transition-fast);
  box-shadow: var(--google-shadow-2);
  overflow: hidden;
}

.google-btn-primary:hover {
  background: var(--google-blue-dark);
  box-shadow: var(--google-shadow-3);
  transform: translateY(-1px);
  color: white;
  text-decoration: none;
}

.google-btn-secondary {
  display: inline-flex;
  align-items: center;
  padding: var(--google-space-md) var(--google-space-xl);
  background: transparent;
  color: var(--google-blue);
  border: 1px solid var(--md-outline);
  border-radius: var(--google-radius-lg);
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-large);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--google-transition-fast);
}

.google-btn-secondary:hover {
  background: var(--md-primary-container);
  border-color: var(--google-blue);
  color: var(--google-blue);
  text-decoration: none;
}

/* Ripple Effect */
.google-btn-ripple {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}

/* Trust Indicators */
.google-trust-indicators {
  margin-top: var(--google-space-xl);
}

.google-trust-text {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: #5f6368;
  margin: 0;
}

/* Hero Visual */
.google-banner-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--google-space-lg) 0;
}

.google-hero-container {
  position: relative;
  max-width: 100%;
  border-radius: var(--google-radius-lg);
  overflow: hidden;
  box-shadow: var(--google-shadow-3);
}

.google-hero-container img {
  width: 100%;
  height: auto;
  display: block;
}

.google-hero-full-width {
  margin-top: var(--google-space-3xl);
  text-align: center;
}

/* Decorative Shapes */
.google-decorative-shapes {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.google-shape {
  position: absolute;
  border-radius: var(--google-radius-full);
  opacity: 0.1;
}

.google-shape-1 {
  width: 200px;
  height: 200px;
  background: var(--google-blue);
  top: 10%;
  right: 10%;
  animation: float 6s ease-in-out infinite;
}

.google-shape-2 {
  width: 150px;
  height: 150px;
  background: var(--google-green);
  bottom: 20%;
  left: 5%;
  animation: float 8s ease-in-out infinite reverse;
}

.google-shape-3 {
  width: 100px;
  height: 100px;
  background: var(--google-yellow);
  top: 60%;
  right: 20%;
  animation: float 10s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* ================================
   GOOGLE FEATURES SECTION STYLES
   ================================ */

.google-features-section {
  padding: var(--google-space-4xl) 0;
  background: var(--md-surface);
}

/* Section Header */
.google-section-header {
  margin-bottom: var(--google-space-3xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.google-section-title {
  font-family: var(--google-font-display);
  font-size: var(--google-text-headline-large);
  font-weight: 400;
  line-height: 1.25;
  color: #202124;
  margin-bottom: var(--google-space-md);
}

.google-section-description {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-large);
  line-height: 1.5;
  color: #5f6368;
}

/* Features Grid */
.google-features-grid {
  margin-top: var(--google-space-2xl);
}

.google-feature-col {
  margin-bottom: var(--google-space-xl);
}

/* Feature Cards */
.google-feature-card {
  position: relative;
  height: 100%;
  padding: var(--google-space-xl);
  border-radius: var(--google-radius-lg);
  transition: all var(--google-transition-standard);
  cursor: pointer;
}

.google-card-material {
  background: white;
  box-shadow: var(--google-shadow-1);
}

.google-card-material.google-hover-enabled:hover {
  box-shadow: var(--google-shadow-3);
  transform: translateY(-4px);
}

.google-card-outlined {
  background: white;
  border: 1px solid var(--md-outline);
}

.google-card-outlined.google-hover-enabled:hover {
  border-color: var(--google-blue);
  box-shadow: var(--google-shadow-1);
}

.google-card-minimal {
  background: transparent;
  padding: var(--google-space-lg);
}

.google-card-minimal.google-hover-enabled:hover {
  background: var(--md-surface-variant);
  border-radius: var(--google-radius-md);
}

/* Feature Icons */
.google-feature-icon {
  margin-bottom: var(--google-space-lg);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.google-icon-container {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--google-radius-md);
}

.google-icon-material .google-icon-container {
  background: var(--md-primary-container);
  color: var(--md-primary);
}

.google-icon-colored .google-icon-container {
  background: linear-gradient(135deg, var(--google-blue), var(--google-blue-light));
  color: white;
}

.google-icon-simple .google-icon-container {
  background: transparent;
  color: var(--md-primary);
}

.google-material-icon {
  font-size: 24px;
}

/* Feature Content */
.google-feature-content {
  flex: 1;
}

.google-feature-title {
  font-family: var(--google-font-family);
  font-size: var(--google-text-title-large);
  font-weight: 500;
  line-height: 1.3;
  color: #202124;
  margin-bottom: var(--google-space-md);
}

.google-feature-description {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  line-height: 1.5;
  color: #5f6368;
  margin-bottom: var(--google-space-md);
}

/* Feature Links */
.google-feature-link {
  margin-top: var(--google-space-md);
}

.google-link-button {
  display: inline-flex;
  align-items: center;
  gap: var(--google-space-xs);
  color: var(--google-blue);
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--google-transition-fast);
}

.google-link-button:hover {
  color: var(--google-blue-dark);
  text-decoration: none;
}

.google-arrow-icon {
  font-style: normal;
  transition: transform var(--google-transition-fast);
}

.google-link-button:hover .google-arrow-icon {
  transform: translateX(2px);
}

/* Animation */
.google-staggered-animation .google-feature-col {
  opacity: 0;
  animation: fadeInUp var(--google-transition-slow) forwards;
}

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

/* Responsive Design */
@media (max-width: 768px) {
  .google-banner-section {
    padding: var(--google-space-2xl) 0;
    min-height: auto;
  }
  
  .google-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  
  .google-btn-primary,
  .google-btn-secondary {
    justify-content: center;
    width: 100%;
  }
  
  .google-features-section {
    padding: var(--google-space-2xl) 0;
  }
  
  .google-feature-card {
    padding: var(--google-space-lg);
  }
  
  .google-section-header {
    margin-bottom: var(--google-space-2xl);
  }
}

/* ================================
   GOOGLE PRODUCTS SECTION STYLES
   ================================ */

.google-products-section {
  padding: var(--google-space-4xl) 0;
  background: var(--md-surface);
  color: var(--google-text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Theme variations */
.google-products-section.section-default {
  background: #ffffff;
  color: #202124;
}

.google-products-section.section-primary {
  background: var(--primary-color, #1a73e8);
  color: white;
}

.google-products-section.section-secondary {
  background: var(--secondary-color, #5f6368);
  color: white;
}

.google-products-section.section-light {
  background: #f8f9fa;
  color: #202124;
}

.google-products-section.section-dark {
  background: #202124;
  color: white;
}

/* Overlay support */
.google-products-section.section-overlay::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

.google-products-section.section-overlay {
  position: relative;
}

/* Products Header */
.google-products-header {
  margin-bottom: var(--google-space-3xl);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.google-products-title {
  font-family: var(--google-font-display);
  font-size: 48px;
  font-weight: 400;
  color: inherit;
  line-height: 1.2;
  margin: 0 0 16px 0;
  letter-spacing: -0.5px;
}

.google-products-subtitle {
  font-family: var(--google-font-family);
  font-size: 18px;
  font-weight: 400;
  color: inherit;
  opacity: 0.8;
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Theme-specific text colors */
.section-default .google-products-title,
.section-light .google-products-title {
  color: #202124;
}

.section-default .google-products-subtitle,
.section-light .google-products-subtitle {
  color: #5f6368;
  opacity: 1;
}

.section-primary .google-products-title,
.section-secondary .google-products-title,
.section-dark .google-products-title {
  color: white;
}

.section-primary .google-products-subtitle,
.section-secondary .google-products-subtitle,
.section-dark .google-products-subtitle {
  color: rgba(255, 255, 255, 0.8);
  opacity: 1;
}

.google-products-subtitle p {
  margin: 0 0 16px 0;
}

.google-products-subtitle p:last-child {
  margin-bottom: 0;
}

/* Billing Toggle Styling */
.google-billing-toggle {
  display: flex;
  justify-content: center;
  margin: 48px 0;
}

.google-toggle-container {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #f8f9fa;
  padding: 8px;
  border-radius: 32px;
  border: 1px solid #e8eaed;
}

.toggle-label {
  font-family: var(--google-font-family);
  font-size: 14px;
  font-weight: 500;
  color: #5f6368;
  transition: color 0.2s ease;
}

.toggle-label.active {
  color: #1a73e8 !important;
}

.google-switch {
  position: relative;
}

.google-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background-color: #dadce0;
  border-radius: 24px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.switch-handle {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 2px;
  top: 2px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.google-switch input:checked + .switch-slider {
  background-color: #1a73e8;
}

.google-switch input:checked + .switch-slider .switch-handle {
  transform: translateX(20px);
}

.savings-badge {
  background: #34a853;
  color: white;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  margin-left: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Google Product Cards */
.google-product-card {
  background: #ffffff;
  border: 1px solid #e8eaed;
  border-radius: 8px;
  padding: 32px 24px;
  height: 100%;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.08), 0 4px 8px 3px rgba(60, 64, 67, 0.04);
}

/* Card theme variations */
.section-primary .google-product-card,
.section-secondary .google-product-card {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

.section-dark .google-product-card {
  background: #2d2d2d;
  border-color: #3c4043;
  color: white;
}

.section-light .google-product-card {
  background: #ffffff;
  border-color: #e8eaed;
}

.google-product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px 0 rgba(60, 64, 67, 0.12), 0 6px 10px 4px rgba(60, 64, 67, 0.06) !important;
}

/* Product Header */
.google-product-header {
  text-align: center;
  margin-bottom: 24px;
}

.google-product-name {
  font-family: var(--google-font-display);
  font-size: 24px;
  font-weight: 500;
  color: #202124;
  margin: 16px 0 8px 0;
  line-height: 1.2;
}

.google-product-description {
  color: #5f6368;
  font-size: 14px;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Dark theme card text */
.section-dark .google-product-name {
  color: white;
}

.section-dark .google-product-description {
  color: rgba(255, 255, 255, 0.7);
}

.section-dark .price-amount,
.section-dark .price-currency {
  color: white;
}

.section-dark .price-period {
  color: rgba(255, 255, 255, 0.7);
}

.section-dark .feature-text {
  color: white;
}

/* Pricing */
.google-product-pricing {
  text-align: center;
  margin: 32px 0;
  padding: 24px 0;
  border-bottom: 1px solid #e8eaed;
}

.google-price-recurring,
.google-price-onetime,
.google-price-free {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 8px;
}

.price-currency {
  font-size: 20px;
  font-weight: 400;
  color: #202124 !important;
  margin-right: 2px;
}

.price-amount {
  font-family: var(--google-font-display);
  font-size: 48px;
  font-weight: 500;
  color: #202124 !important;
  line-height: 1;
}

.price-period {
  font-size: 16px;
  color: #5f6368 !important;
  margin-left: 4px;
  align-self: flex-end;
  margin-bottom: 8px;
}

/* Features List */
.google-product-features {
  margin: 24px 0;
}

.google-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.google-feature-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 0;
}

.feature-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #34a853;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-check svg {
  width: 12px;
  height: 12px;
  fill: white;
}

.feature-text {
  color: #202124 !important;
  font-size: 14px;
  line-height: 1.5;
  flex: 1;
}

/* CTA Button */
.google-product-cta {
  text-align: center;
  margin-top: auto;
  padding-top: 24px;
}

.google-product-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1a73e8 !important;
  color: white !important;
  border: none;
  border-radius: 24px;
  padding: 12px 32px;
  font-family: var(--google-font-family);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-width: 140px;
  height: 48px;
}

.google-product-button:hover {
  background: #1557b0 !important;
  color: white !important;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(26, 115, 232, 0.3);
}

.google-btn-featured {
  background: #34a853 !important;
}

.google-btn-featured:hover {
  background: #2d8f47 !important;
}

.google-compare-btn {
  display: block;
  background: none;
  border: none;
  color: #1a73e8 !important;
  font-size: 14px;
  margin-top: 16px;
  cursor: pointer;
  text-decoration: underline;
}

.google-compare-btn:hover {
  color: #1557b0 !important;
}

/* Popular Badge */
.google-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  background: #34a853;
  color: white;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Featured Product Styling */
.google-product-featured {
  border: 2px solid #34a853 !important;
  position: relative;
}

.google-product-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #34a853, #4285f4);
}

.google-products-title {
  font-family: var(--google-font-display);
  font-size: var(--google-text-headline-large);
  font-weight: 400;
  line-height: 1.25;
  color: #202124;
  margin-bottom: var(--google-space-md);
}

.google-products-subtitle {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-large);
  line-height: 1.5;
  color: #5f6368;
}

/* Billing Toggle */
.google-billing-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: var(--google-space-3xl);
}

.google-toggle-container {
  display: flex;
  align-items: center;
  gap: var(--google-space-md);
  padding: var(--google-space-sm);
  background: var(--md-surface-variant);
  border-radius: var(--google-radius-full);
}

.toggle-label {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  font-weight: 500;
  color: #5f6368;
  transition: color var(--google-transition-fast);
}

.toggle-label.active {
  color: #202124;
}

.savings-badge {
  display: inline-block;
  padding: var(--google-space-xs) var(--google-space-sm);
  background: var(--google-green);
  color: white;
  border-radius: var(--google-radius-sm);
  font-size: 12px;
  font-weight: 500;
  margin-left: var(--google-space-xs);
}

/* Google Switch */
.google-switch {
  position: relative;
}

.google-switch input {
  display: none;
}

.switch-slider {
  display: block;
  width: 52px;
  height: 28px;
  background: #dadce0;
  border-radius: var(--google-radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--google-transition-fast);
}

.switch-handle {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: transform var(--google-transition-fast);
  box-shadow: var(--google-shadow-1);
}

.google-switch input:checked + .switch-slider {
  background: var(--google-blue);
}

.google-switch input:checked + .switch-slider .switch-handle {
  transform: translateX(24px);
}

/* Products Grid */
.google-products-grid {
  margin-bottom: var(--google-space-3xl);
}

.google-product-col {
  margin-bottom: var(--google-space-xl);
}

/* Product Cards */
.google-product-card {
  position: relative;
  height: 100%;
  background: white;
  border-radius: var(--google-radius-lg);
  padding: var(--google-space-xl);
  transition: all var(--google-transition-standard);
  border: 1px solid var(--md-outline);
  overflow: hidden;
}

.google-products-cloud .google-product-card {
  box-shadow: var(--google-shadow-2);
  border: none;
}

.google-products-workspace .google-product-card {
  border: 2px solid var(--md-outline);
}

.google-products-minimal .google-product-card {
  background: transparent;
  border: 1px solid transparent;
}

.google-product-card.google-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--google-shadow-4);
}

.google-product-featured {
  border-color: var(--google-blue) !important;
  position: relative;
}

.google-products-cloud .google-product-featured {
  box-shadow: 0 8px 24px rgba(26, 115, 232, 0.15);
}

/* Popular Badge */
.google-popular-badge {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.badge-text {
  display: inline-block;
  padding: var(--google-space-xs) var(--google-space-md);
  background: var(--google-blue);
  color: white;
  font-family: var(--google-font-family);
  font-size: 12px;
  font-weight: 500;
  border-radius: 0 0 var(--google-radius-sm) var(--google-radius-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Product Header */
.google-product-header {
  text-align: center;
  margin-bottom: var(--google-space-xl);
}

.google-product-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto var(--google-space-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-product-name {
  font-family: var(--google-font-family);
  font-size: var(--google-text-title-large);
  font-weight: 500;
  color: #202124;
  margin-bottom: var(--google-space-sm);
}

.google-product-description {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: #5f6368;
  line-height: 1.5;
}

/* Product Pricing */
.google-product-pricing {
  text-align: center;
  margin-bottom: var(--google-space-xl);
  padding-bottom: var(--google-space-lg);
  border-bottom: 1px solid var(--md-outline);
}

.google-price-recurring,
.google-price-onetime,
.google-price-free {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}

.price-currency {
  font-family: var(--google-font-family);
  font-size: var(--google-text-title-medium);
  font-weight: 400;
  color: #202124;
}

.price-amount {
  font-family: var(--google-font-display);
  font-size: var(--google-text-display-small);
  font-weight: 400;
  color: #202124;
  line-height: 1;
}

.price-period {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: #5f6368;
  margin-left: 2px;
}

.google-price-free .price-amount {
  font-size: var(--google-text-headline-medium);
  color: var(--google-green);
}

/* Savings Indicator */
.google-savings-indicator {
  margin-top: var(--google-space-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--google-space-sm);
}

.original-price {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: #5f6368;
  text-decoration: line-through;
}

.savings-text {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  font-weight: 500;
  color: var(--google-green);
}

/* Product Features */
.google-product-features {
  margin-bottom: var(--google-space-xl);
}

.google-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.google-feature-item {
  display: flex;
  align-items: flex-start;
  gap: var(--google-space-sm);
  margin-bottom: var(--google-space-md);
}

.feature-check {
  width: 16px;
  height: 16px;
  color: var(--google-green);
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-text {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: #202124;
  line-height: 1.5;
}

/* Product CTA */
.google-product-cta {
  text-align: center;
}

.google-product-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--google-space-md) var(--google-space-xl);
  border-radius: var(--google-radius-lg);
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-large);
  font-weight: 500;
  text-decoration: none;
  transition: all var(--google-transition-fast);
  overflow: hidden;
}

.google-btn-standard {
  background: transparent;
  color: var(--google-blue);
  border: 1px solid var(--md-outline);
}

.google-btn-standard:hover {
  background: var(--md-primary-container);
  border-color: var(--google-blue);
  color: var(--google-blue);
  text-decoration: none;
}

.google-btn-featured {
  background: var(--google-blue);
  color: white;
  border: 1px solid var(--google-blue);
  box-shadow: var(--google-shadow-2);
}

.google-btn-featured:hover {
  background: var(--google-blue-dark);
  box-shadow: var(--google-shadow-3);
  color: white;
  text-decoration: none;
}

.google-compare-btn {
  background: transparent;
  border: none;
  color: var(--google-blue);
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  margin-top: var(--google-space-sm);
  cursor: pointer;
  transition: color var(--google-transition-fast);
}

.google-compare-btn:hover {
  color: var(--google-blue-dark);
}

/* Products Footer */
.google-products-footer {
  margin-top: var(--google-space-3xl);
}

.google-footer-text {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: #5f6368;
  margin-bottom: var(--google-space-md);
}

.google-footer-links {
  display: flex;
  justify-content: center;
  gap: var(--google-space-lg);
  flex-wrap: wrap;
}

.google-footer-link {
  font-family: var(--google-font-family);
  font-size: var(--google-text-body-medium);
  color: var(--google-blue);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--google-transition-fast);
}

.google-footer-link:hover {
  color: var(--google-blue-dark);
  text-decoration: none;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --md-surface: #1f1f1f;
    --md-surface-variant: #2d2d2d;
    --md-outline: #3c4043;
    --md-outline-variant: #5f6368;
  }
  
  .google-features-section,
  .google-products-section {
    background: var(--md-surface);
  }
  
  .google-section-title,
  .google-feature-title,
  .google-products-title,
  .google-product-name,
  .feature-text {
    color: #e8eaed;
  }
  
  .google-section-description,
  .google-feature-description,
  .google-products-subtitle,
  .google-product-description,
  .google-footer-text {
    color: #9aa0a6;
  }
  
  .google-card-material,
  .google-card-outlined {
    background: var(--md-surface-variant);
    border-color: var(--md-outline);
  }
  
  /* Google products now respect theme settings */
  
  .toggle-label.active {
    color: #e8eaed;
  }
}

/* ================================
   GOOGLE HERO SECTION STYLES
   ================================ */

.google-hero-section {
  padding: var(--google-space-5xl) 0;
  min-height: 80vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.google-hero-content {
  position: relative;
  z-index: 2;
}

.min-vh-80 {
  min-height: 80vh;
}

/* Hero Text */
.google-hero-headline {
  font-family: var(--google-font-display);
  font-size: 56px;
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.google-hero-subheadline {
  font-family: var(--google-font-family);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 32px;
  opacity: 0.9;
}

/* Trust Indicator */
.google-trust-indicator {
  margin-bottom: 24px;
}

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(52, 168, 83, 0.1);
  color: #34a853;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

/* Hero Features */
.google-hero-features {
  margin: 32px 0;
}

.google-hero-features .google-features-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.google-hero-features .google-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-hero-features .feature-icon {
  color: #34a853;
  font-size: 16px;
}

.google-hero-features .feature-text {
  font-size: 16px;
  font-weight: 500;
}

/* Hero CTA */
.google-hero-cta {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  flex-wrap: wrap;
}

/* Hero Visual */
.google-hero-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.google-hero-image-container {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.google-hero-image {
  width: 100%;
  height: auto;
  border-radius: 12px;
}

.google-default-illustration {
  width: 100%;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-svg {
  width: 100%;
  height: 100%;
  max-width: 400px;
}

/* Floating Elements */
.google-floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.floating-card {
  position: absolute;
  background: white;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  animation: float 3s ease-in-out infinite;
}

.uptime-card {
  top: 10%;
  right: -10%;
  color: #34a853;
  animation-delay: 0s;
}

.speed-card {
  top: 60%;
  left: -15%;
  color: #fbbc04;
  animation-delay: 1s;
}

.support-card {
  bottom: 20%;
  right: 10%;
  color: #4285f4;
  animation-delay: 2s;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

/* Particles Background */
.google-particles-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* ================================
   GOOGLE HOSTING PLANS STYLES
   ================================ */

.google-hosting-plans-section {
  padding: var(--google-space-4xl) 0;
}

.google-hosting-plans-grid {
  margin-top: var(--google-space-3xl);
}

.google-hosting-plan-card {
  background: white;
  border: 1px solid #e8eaed;
  border-radius: 12px;
  padding: 32px 24px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.google-hosting-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.plan-header {
  text-align: center;
  margin-bottom: 24px;
}

.plan-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, #4285f4, #34a853);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  font-size: 24px;
  color: white;
}

.plan-name {
  font-family: var(--google-font-display);
  font-size: 24px;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: #202124;
}

.plan-description {
  color: #5f6368;
  font-size: 16px;
  margin: 0 0 16px 0;
}

.plan-price {
  margin: 16px 0;
}

.price-text {
  display: block;
  font-size: 14px;
  color: #5f6368;
  margin-bottom: 4px;
}

.price-amount {
  font-family: var(--google-font-display);
  font-size: 32px;
  font-weight: 500;
  color: #1a73e8;
}

.plan-best-for {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 24px 0;
  text-align: center;
}

.best-for-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #5f6368;
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.best-for-text {
  font-size: 14px;
  color: #202124;
}

.plan-features {
  margin: 24px 0;
}

.plan-features .features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features .feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 8px 0;
}

.plan-features .feature-check {
  color: #34a853;
  font-size: 16px;
  flex-shrink: 0;
}

.plan-features .feature-text {
  font-size: 14px;
  color: #202124;
}

.plan-cta {
  margin-top: auto;
  padding-top: 24px;
}

/* ================================
   GOOGLE PRICING TABLE STYLES
   ================================ */

.google-pricing-table-section {
  padding: var(--google-space-4xl) 0;
}

.google-pricing-table {
  margin-top: var(--google-space-3xl);
}

.pricing-table-wrapper {
  overflow-x: auto;
  margin: 0 -15px;
  padding: 0 15px;
}

.google-pricing-plan {
  background: white;
  border: 2px solid #e8eaed;
  border-radius: 12px;
  padding: 32px 24px;
  height: 100%;
  transition: all 0.3s ease;
  position: relative;
  margin-bottom: 24px;
}

.google-pricing-plan.plan-popular {
  border-color: #4285f4;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(66, 133, 244, 0.15);
}

.google-pricing-plan:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.google-pricing-plan.plan-popular:hover {
  transform: scale(1.05) translateY(-4px);
}

.plan-header {
  text-align: center;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e8eaed;
}

.plan-name {
  font-family: var(--google-font-display);
  font-size: 28px;
  font-weight: 500;
  margin: 0 0 8px 0;
  color: #202124;
}

.plan-description {
  color: #5f6368;
  font-size: 16px;
  margin: 0 0 24px 0;
}

.plan-pricing {
  margin: 24px 0;
}

.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 8px;
}

.currency {
  font-size: 24px;
  font-weight: 500;
  color: #202124;
  margin-right: 4px;
}

.price-amount {
  font-family: var(--google-font-display);
  font-size: 48px;
  font-weight: 500;
  color: #202124;
  line-height: 1;
}

.price-period {
  font-size: 18px;
  color: #5f6368;
  margin-left: 4px;
}

.annual-savings {
  text-align: center;
  font-size: 14px;
}

.original-price {
  color: #5f6368;
  text-decoration: line-through;
  margin-right: 8px;
}

.savings-text {
  color: #34a853;
  font-weight: 500;
}

.plan-features {
  margin: 32px 0;
}

.plan-features .features-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features .feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 8px 0;
}

.feature-indicator {
  flex-shrink: 0;
  margin-top: 2px;
}

.feature-included .feature-indicator {
  color: #34a853;
}

.feature-not_included .feature-indicator {
  color: #ea4335;
}

.feature-limited .feature-indicator {
  color: #fbbc04;
}

.feature-content {
  flex: 1;
}

.feature-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #202124;
  margin-bottom: 2px;
}

.feature-value {
  display: block;
  font-size: 13px;
  color: #5f6368;
}

.plan-cta {
  margin-top: auto;
  padding-top: 24px;
}

/* Guarantee Badge */
.google-pricing-guarantee {
  margin-top: var(--google-space-2xl);
}

.guarantee-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #e8f0fe;
  color: #1a73e8;
  padding: 12px 24px;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 500;
}

/* Footer */
.google-pricing-footer,
.google-hosting-plans-footer {
  margin-top: var(--google-space-3xl);
  padding-top: var(--google-space-2xl);
  border-top: 1px solid #e8eaed;
}

.footer-text {
  font-size: 16px;
  color: #5f6368;
  margin-bottom: 16px;
}

.footer-actions {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.footer-links {
  display: flex;
  gap: 32px;
  justify-content: center;
  flex-wrap: wrap;
}

.google-link {
  color: #1a73e8;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
}

.google-link:hover {
  color: #1557b0;
  text-decoration: none;
}

/* Google Buttons */
.google-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 24px;
  font-family: var(--google-font-family);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  min-height: 48px;
}

.google-btn-large {
  padding: 16px 32px;
  font-size: 16px;
  min-height: 56px;
}

.google-btn-block {
  width: 100%;
}

.google-btn-primary {
  background: #1a73e8;
  color: white;
}

.google-btn-primary:hover {
  background: #1557b0;
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26, 115, 232, 0.3);
}

.google-btn-outline {
  background: transparent;
  border: 2px solid #1a73e8;
  color: #1a73e8;
}

.google-btn-outline:hover {
  background: #1a73e8;
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
}

.btn-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.google-btn:active .btn-ripple {
  width: 300px;
  height: 300px;
}

/* Mobile responsive for all Google sections */
@media (max-width: 768px) {
  .google-hero-headline {
    font-size: 40px;
  }
  
  .google-hero-subheadline {
    font-size: 18px;
  }
  
  .google-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }
  
  .google-hero-features .google-features-list {
    flex-direction: column;
    gap: 16px;
  }
  
  .floating-card {
    display: none;
  }
  
  .google-pricing-plan.plan-popular {
    transform: none;
    margin-bottom: 32px;
  }
  
  .google-pricing-plan.plan-popular:hover {
    transform: translateY(-4px);
  }
  
  .footer-actions,
  .footer-links {
    flex-direction: column;
    gap: 16px;
  }
  
  .google-products-title {
    font-size: 36px !important;
    margin-bottom: 12px;
  }
  
  .google-products-subtitle {
    font-size: 16px !important;
  }
  
  .google-toggle-container {
    gap: 12px;
    padding: 6px;
  }
  
  .toggle-label {
    font-size: 13px;
  }
  
  .google-product-card {
    padding: 24px 20px !important;
  }
  
  .price-amount {
    font-size: 36px !important;
  }
  
  .google-product-name {
    font-size: 20px !important;
  }
}