/* 3D Printed Candy - Material Design 3 Expressive Theme */

/* ==================== CSS CUSTOM PROPERTIES (M3 TOKENS) ==================== */
:root {
  /* Color System - Material Design 3 Expressive */
  --md-sys-color-primary: #00d4ff; /* Electric Cyan */
  --md-sys-color-on-primary: #001f2a; /* Deep Indigo */
  --md-sys-color-primary-container: #004d66;
  --md-sys-color-on-primary-container: #9ee7ff;
  
  --md-sys-color-secondary: #ed2310; /* Cosmic Magenta */
  --md-sys-color-on-secondary: #2a1430;
  --md-sys-color-secondary-container: #754282;
  --md-sys-color-on-secondary-container: #f0d4ff;
  
  --md-sys-color-tertiary: #f48907; /* Lime-Teal fusion */
  --md-sys-color-on-tertiary: #003d36;
  --md-sys-color-tertiary-container: #00695c;
  --md-sys-color-on-tertiary-container: #a7ffeb;
  
  --md-sys-color-error: #ff5449;
  --md-sys-color-on-error: #ffffff;
  
  --md-sys-color-surface: #0f1419; /* Cool Dark Surface */
  --md-sys-color-surface-rgb: 15, 20, 25; /* RGB values for rgba() */
  --md-sys-color-on-surface: #e1e8f0;
  --md-sys-color-surface-variant: #1a2329;
  --md-sys-color-on-surface-variant: #bfc9d1;
  --md-sys-color-surface-container: #1e252b;
  --md-sys-color-surface-container-low: #171e23;
  --md-sys-color-surface-container-high: #252c33;
  --md-sys-color-surface-container-highest: #303740;
  
  --md-sys-color-background: #0a0e13;
  --md-sys-color-on-background: #e1e8f0;
  
  --md-sys-color-outline: #8a9499;
  --md-sys-color-outline-variant: #3f484d;
  
  /* Typography Scale - Material Design 3 */
  --md-sys-typescale-display-large-font: 'Inter', sans-serif;
  --md-sys-typescale-display-large-size: 3.5rem; /* 56px */
  --md-sys-typescale-display-large-line-height: 4rem; /* 64px */
  --md-sys-typescale-display-large-weight: 700;
  --md-sys-typescale-display-large-tracking: -0.025em;
  
  --md-sys-typescale-headline-medium-font: 'Inter', sans-serif;
  --md-sys-typescale-headline-medium-size: 1.75rem; /* 28px */
  --md-sys-typescale-headline-medium-line-height: 2.25rem; /* 36px */
  --md-sys-typescale-headline-medium-weight: 600;
  --md-sys-typescale-headline-medium-tracking: 0;
  
  --md-sys-typescale-title-large-font: 'Inter', sans-serif;
  --md-sys-typescale-title-large-size: 1.375rem; /* 22px */
  --md-sys-typescale-title-large-line-height: 1.75rem; /* 28px */
  --md-sys-typescale-title-large-weight: 500;
  --md-sys-typescale-title-large-tracking: 0;
  
  --md-sys-typescale-body-medium-font: 'Inter', sans-serif;
  --md-sys-typescale-body-medium-size: 0.875rem; /* 14px */
  --md-sys-typescale-body-medium-line-height: 1.25rem; /* 20px */
  --md-sys-typescale-body-medium-weight: 400;
  --md-sys-typescale-body-medium-tracking: 0.025em;
  
  --md-sys-typescale-label-large-font: 'Inter', sans-serif;
  --md-sys-typescale-label-large-size: 0.875rem; /* 14px */
  --md-sys-typescale-label-large-line-height: 1.25rem; /* 20px */
  --md-sys-typescale-label-large-weight: 500;
  --md-sys-typescale-label-large-tracking: 0.1em;
  
  /* Shape Scale - Material Design 3 Large/Extra Large */
  --md-sys-shape-corner-extra-large: 1.75rem; /* 28px */
  --md-sys-shape-corner-large: 1rem; /* 16px */
  --md-sys-shape-corner-medium: 0.75rem; /* 12px */
  --md-sys-shape-corner-small: 0.5rem; /* 8px */
  --md-sys-shape-corner-extra-small: 0.25rem; /* 4px */
  
  /* Elevation - Minimal for flat aesthetic */
  --md-sys-elevation-level0: none;
  --md-sys-elevation-level1: 0 1px 2px rgba(0, 212, 255, 0.15);
  --md-sys-elevation-level2: 0 1px 2px rgba(0, 212, 255, 0.15), 0 2px 6px rgba(0, 212, 255, 0.1);
  
  /* Motion - Standard M3 Easing */
  --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-sys-motion-duration-short1: 50ms;
  --md-sys-motion-duration-short2: 100ms;
  --md-sys-motion-duration-short3: 150ms;
  --md-sys-motion-duration-short4: 200ms;
  --md-sys-motion-duration-medium1: 250ms;
  --md-sys-motion-duration-medium2: 300ms;
  --md-sys-motion-duration-medium3: 350ms;
  --md-sys-motion-duration-medium4: 400ms;
  
  /* Grid System */
  --grid-margin-mobile: 1rem;
  --grid-margin-tablet: 1.5rem;
  --grid-margin-desktop: 2rem;
  --grid-gutter: 1.5rem;
  --grid-columns-mobile: 4;
  --grid-columns-tablet: 8;
  --grid-columns-desktop: 12;
  
  /* Custom Brand Variables */
  --neon-glow-cyan: 0 0 20px rgba(0, 212, 255, 0.6);
  --neon-glow-magenta: 0 0 20px rgba(220, 8, 5, 0.606);
  --neon-glow-teal: 0 0 20px rgba(255, 101, 6, 0.6);
  --neon-glow-lime: 0 0 20px rgba(251, 243, 13, 0.781);
}

/* ==================== RESET & BASE STYLES ==================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  font-weight: var(--md-sys-typescale-body-medium-weight);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  color: var(--md-sys-color-on-background);
  background-color: var(--md-sys-color-background);
  overflow-x: hidden;
}

/* ==================== TYPOGRAPHY ==================== */
h1 {
  font-family: var(--md-sys-typescale-display-large-font);
  font-size: var(--md-sys-typescale-display-large-size);
  line-height: var(--md-sys-typescale-display-large-line-height);
  font-weight: var(--md-sys-typescale-display-large-weight);
  letter-spacing: var(--md-sys-typescale-display-large-tracking);
}

h2 {
  font-family: var(--md-sys-typescale-headline-medium-font);
  font-size: var(--md-sys-typescale-headline-medium-size);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  font-weight: var(--md-sys-typescale-headline-medium-weight);
  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}

h3 {
  font-family: var(--md-sys-typescale-title-large-font);
  font-size: var(--md-sys-typescale-title-large-size);
  line-height: var(--md-sys-typescale-title-large-line-height);
  font-weight: var(--md-sys-typescale-title-large-weight);
  letter-spacing: var(--md-sys-typescale-title-large-tracking);
}

/* ==================== GRID SYSTEM ==================== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--grid-margin-mobile);
}

@media (min-width: 768px) {
  .container {
    padding: 0 var(--grid-margin-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 0 var(--grid-margin-desktop);
  }
}

/* ==================== APP BAR ==================== */
.app-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--md-sys-color-surface-container);
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
  backdrop-filter: blur(20px);
  transition: background-color var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.app-bar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem var(--grid-margin-mobile);
  max-width: 1200px;
  margin: 0 auto;
}

.brand-logo {
  height: 2.5rem;
  width: auto;
  filter: drop-shadow(0 0 8px var(--md-sys-color-primary));
  transition: filter 0.3s ease;
}

.brand-logo:hover {
  filter: drop-shadow(0 0 12px var(--md-sys-color-primary));
}

.app-bar__nav {
  display: none;
  gap: 2rem;
}

.nav-link {
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-weight: 500;
  padding: 0.5rem 0;
  border-bottom: 2px solid transparent;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--md-sys-color-primary);
  border-bottom-color: var(--md-sys-color-primary);
}

.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.menu-toggle:hover,
.menu-toggle:focus {
  background-color: var(--md-sys-color-surface-variant);
}

@media (min-width: 768px) {
  .app-bar__nav {
    display: flex;
  }
  
  .menu-toggle {
    display: none;
  }
  
  .app-bar__container {
    padding: 1rem var(--grid-margin-tablet);
  }
}

@media (min-width: 1024px) {
  .app-bar__container {
    padding: 1rem var(--grid-margin-desktop);
  }
}

/* ==================== NAVIGATION DRAWER ==================== */
.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 200;
  visibility: hidden;
  opacity: 0;
  transition: all var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-standard);
}

.nav-drawer.active {
  visibility: visible;
  opacity: 1;
}

.nav-drawer__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.nav-drawer__content {
  position: absolute;
  top: 0;
  right: 0;
  width: 280px;
  height: 100%;
  background-color: var(--md-sys-color-surface-container-high);
  transform: translateX(100%);
  transition: transform var(--md-sys-motion-duration-medium2) var(--md-sys-motion-easing-emphasized);
}

.nav-drawer.active .nav-drawer__content {
  transform: translateX(0);
}

.nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1rem;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.nav-drawer__title {
  color: var(--md-sys-color-primary);
  font-size: 1.25rem;
  font-weight: 600;
}

.nav-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  color: var(--md-sys-color-on-surface);
  border-radius: var(--md-sys-shape-corner-medium);
  cursor: pointer;
}

.nav-drawer__list {
  list-style: none;
  padding: 1rem 0;
}

.nav-drawer__link {
  display: block;
  padding: 1rem 1.5rem;
  color: var(--md-sys-color-on-surface);
  text-decoration: none;
  font-weight: 500;
  transition: background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.nav-drawer__link:hover,
.nav-drawer__link:focus {
  background-color: var(--md-sys-color-surface-variant);
}

.nav-drawer__link--primary {
  color: var(--md-sys-color-primary);
  font-weight: 600;
}

/* ==================== BUTTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  font-family: var(--md-sys-typescale-label-large-font);
  font-size: var(--md-sys-typescale-label-large-size);
  font-weight: var(--md-sys-typescale-label-large-weight);
  letter-spacing: var(--md-sys-typescale-label-large-tracking);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.btn:hover::before,
.btn:focus::before {
  opacity: 0.08;
}

.btn:active::before {
  opacity: 0.12;
}

/* Button Variants */
.btn--filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  box-shadow: var(--md-sys-elevation-level1);
}

.btn--filled:hover {
  box-shadow: var(--md-sys-elevation-level2);
}

.btn--tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.btn--text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
}

.btn--outlined {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  border: 2px solid var(--md-sys-color-outline);
  box-shadow: var(--md-sys-elevation-level1);
  backdrop-filter: blur(8px);
}

.btn--outlined:hover {
  background-color: var(--md-sys-color-surface-container-highest);
  border-color: var(--md-sys-color-primary);
  box-shadow: var(--md-sys-elevation-level2);
}

.btn--large {
  padding: 1rem 2rem;
  font-size: 1rem;
}

.btn--small {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}

/* ==================== HERO SECTION ==================== */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--md-sys-color-background) 0%, var(--md-sys-color-surface-container-low) 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(0, 212, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(217, 70, 239, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.hero__container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem var(--grid-margin-mobile);
  position: relative;
  z-index: 1;
}

.hero__title {
  color: var(--md-sys-color-on-background);
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--md-sys-color-primary), var(--md-sys-color-secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}

.hero__subtitle {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 2rem;
  max-width: 600px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-width: 768px) {
  .hero__container {
    grid-template-columns: 1fr 1fr;
    padding: 2rem var(--grid-margin-tablet);
  }
  
  .hero__title {
    font-size: 4rem;
    line-height: 4.5rem;
  }
}

@media (min-width: 1024px) {
  .hero__container {
    padding: 2rem var(--grid-margin-desktop);
  }
}

/* ==================== 3D VIEWER ==================== */
.three-d-viewer {
  position: relative;
  width: 100%;
  height: 400px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.three-d-viewer__placeholder {
  position: relative;
  width: 200px;
  height: 200px;
}

.orbital-pattern {
  position: relative;
  width: 100%;
  height: 100%;
  animation: rotate 20s linear infinite;
}

.orbit {
  position: absolute;
  border: 2px solid;
  border-radius: 50%;
  opacity: 0.6;
}

.orbit--1 {
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
  border-color: var(--md-sys-color-primary);
  animation: rotate 10s linear infinite reverse;
}

.orbit--2 {
  width: 150px;
  height: 150px;
  top: 25px;
  left: 25px;
  border-color: var(--md-sys-color-secondary);
  animation: rotate 15s linear infinite;
}

.orbit--3 {
  width: 200px;
  height: 200px;
  top: 0;
  left: 0;
  border-color: var(--md-sys-color-tertiary);
  animation: rotate 25s linear infinite reverse;
}

.candy-shape {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(45deg, var(--md-sys-color-primary), var(--md-sys-color-secondary));
  border-radius: var(--md-sys-shape-corner-medium);
  box-shadow: var(--neon-glow-cyan);
  animation: pulse 3s ease-in-out infinite;
}

.lattice-pattern {
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(45deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 55%),
    linear-gradient(-45deg, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 55%, transparent 55%);
  background-size: 10px 10px;
}

.three-d-viewer__controls {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.5rem;
}

.control-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: var(--md-sys-color-surface-container-high);
  border: none;
  border-radius: var(--md-sys-shape-corner-medium);
  color: var(--md-sys-color-on-surface);
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.control-chip:hover,
.control-chip:focus {
  background-color: var(--md-sys-color-surface-container-highest);
  transform: scale(1.05);
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* ==================== SECTIONS ==================== */
.flavors,
.configurator,
.about {
  padding: 4rem 0;
  position: relative;
}

/* Background for bottom half of page (starting from flavors section) */
.flavors {
  background: url('../abstract-sciencece-or-technology-with-neon-light-and-empty-space-for-text-futuristic-background-vector.png') center/cover no-repeat;
  background-attachment: fixed;
}

.flavors::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(var(--md-sys-color-surface-rgb), 0.85);
  z-index: 1;
}

.flavors > * {
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-title {
  color: var(--md-sys-color-on-background);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--md-sys-color-on-surface-variant);
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ==================== CHIPS ==================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--md-sys-color-outline);
  border-radius: var(--md-sys-shape-corner-small);
  background-color: transparent;
  color: var(--md-sys-color-on-surface);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.chip:hover,
.chip:focus {
  background-color: var(--md-sys-color-surface-variant);
}

.chip--selected,
.chip--filter.selected {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
  border-color: var(--md-sys-color-secondary);
}

.chip--assist {
  background-color: var(--md-sys-color-surface-container);
  border-color: var(--md-sys-color-outline-variant);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 3rem;
}

/* ==================== FLAVOR CARDS ==================== */
.flavor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.flavor-card {
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  border: 1px solid var(--md-sys-color-outline-variant);
}

.flavor-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--md-sys-elevation-level2);
}

.flavor-card__image {
  position: relative;
  height: 220px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.model-preview {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.model-preview:hover {
  transform: scale(1.05);
}

.model-preview model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  --progress-bar-color: var(--md-sys-color-primary);
}

/* 3D/2D Model Switching */
.model-3d,
.model-2d {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.model-3d.active,
.model-2d.active {
  opacity: 1;
}

.model-2d {
  object-fit: contain;
  background: transparent;
  border-radius: var(--md-sys-shape-corner-medium);
}

.model-overlay {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  pointer-events: none;
}

.model-preview:hover .model-overlay {
  opacity: 1;
}

.model-overlay .material-symbols-rounded {
  color: white;
  font-size: 20px;
}

.neon-glow {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.8;
  animation: glow 4s ease-in-out infinite;
}

.neon-glow--cyan {
  background: radial-gradient(circle, var(--md-sys-color-primary) 0%, transparent 70%);
  box-shadow: var(--neon-glow-cyan);
}

.neon-glow--magenta {
  background: radial-gradient(circle, var(--md-sys-color-secondary) 0%, transparent 70%);
  box-shadow: var(--neon-glow-magenta);
}

.neon-glow--teal {
  background: radial-gradient(circle, var(--md-sys-color-tertiary) 0%, transparent 70%);
  box-shadow: var(--neon-glow-teal);
}

.neon-glow--lime {
  background: radial-gradient(circle, #f0f00b 0%, transparent 70%);
  box-shadow: var(--neon-glow-lime);
}

.flavor-card__content {
  padding: 1.5rem;
}

.flavor-card__title {
  color: var(--md-sys-color-on-surface);
  margin-bottom: 0.5rem;
}

.clickable-title {
  cursor: pointer;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  user-select: none;
  position: relative;
}

.clickable-title:hover {
  color: var(--md-sys-color-primary);
  transform: translateX(4px);
}

.clickable-title:active {
  transform: translateX(2px) scale(0.98);
}

.flavor-card__description {
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 1rem;
  line-height: 1.5;
}

.flavor-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.spec-chip {
  padding: 0.25rem 0.75rem;
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
  border-radius: var(--md-sys-shape-corner-small);
  font-size: 0.75rem;
  font-weight: 500;
}

@keyframes glow {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* ==================== CONFIGURATOR ==================== */
.configurator {
  background-color: var(--md-sys-color-surface-container-low);
}

.configurator__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 2rem;
}

.config-group {
  margin-bottom: 2rem;
}

.config-group__title {
  color: var(--md-sys-color-on-surface);
  margin-bottom: 1rem;
}

.shape-chips,
.enhancement-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.slider-container {
  margin-bottom: 1rem;
}

.material-slider {
  width: 100%;
  height: 4px;
  background-color: var(--md-sys-color-outline-variant);
  border-radius: 2px;
  appearance: none;
  cursor: pointer;
}

.material-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: var(--md-sys-color-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level1);
}

.material-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background-color: var(--md-sys-color-primary);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level1);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: var(--md-sys-color-on-surface-variant);
}

.configurator__preview {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-viewer {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.microchip-pattern {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, transparent 48%, var(--md-sys-color-outline-variant) 48%, var(--md-sys-color-outline-variant) 52%, transparent 52%),
    linear-gradient(0deg, transparent 48%, var(--md-sys-color-outline-variant) 48%, var(--md-sys-color-outline-variant) 52%, transparent 52%);
  background-size: 20px 20px;
  opacity: 0.3;
}

.preview-shape {
  position: relative;
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
  border-radius: var(--md-sys-shape-corner-large);
  animation: float 6s ease-in-out infinite;
}

.preview-glow {
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  background: linear-gradient(45deg, var(--md-sys-color-primary), var(--md-sys-color-tertiary));
  border-radius: var(--md-sys-shape-corner-large);
  opacity: 0.3;
  filter: blur(10px);
  z-index: -1;
}

.configurator__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

@media (min-width: 768px) {
  .configurator__content {
    grid-template-columns: 1fr 1fr;
  }
}

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

/* ==================== ABOUT SECTION ==================== */
.about__content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  align-items: center;
}

.about__description {
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--md-sys-color-on-surface-variant);
  margin-bottom: 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--md-sys-color-primary);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
}

.tech-diagram {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: var(--md-sys-color-surface-container);
  border-radius: var(--md-sys-shape-corner-extra-large);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.circuit-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(90deg, transparent 0%, var(--md-sys-color-tertiary) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, var(--md-sys-color-primary) 50%, transparent 100%);
  background-size: 60px 60px;
  opacity: 0.4;
  animation: scan 8s linear infinite;
}

.data-nodes {
  position: relative;
  width: 200px;
  height: 200px;
}

.node {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: var(--md-sys-color-surface-variant);
  border: 2px solid var(--md-sys-color-outline);
  border-radius: 50%;
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
}

.node--active {
  background-color: var(--md-sys-color-secondary);
  border-color: var(--md-sys-color-secondary);
  box-shadow: var(--neon-glow-magenta);
  animation: pulse-node 2s ease-in-out infinite;
}

.node:nth-child(1) { top: 20px; left: 20px; }
.node:nth-child(2) { top: 20px; right: 20px; }
.node:nth-child(3) { bottom: 20px; left: 20px; }
.node:nth-child(4) { bottom: 20px; right: 20px; }

@media (min-width: 768px) {
  .about__content {
    grid-template-columns: 1fr 1fr;
  }
}

@keyframes scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes pulse-node {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

/* ==================== FOOTER ==================== */
.footer {
  background-color: var(--md-sys-color-surface-container-high);
  padding: 2rem 0;
  border-top: 1px solid var(--md-sys-color-outline-variant);
}

.footer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.footer__title {
  color: var(--md-sys-color-primary);
  margin-bottom: 0.5rem;
}

.footer__tagline {
  color: var(--md-sys-color-on-surface-variant);
  font-style: italic;
}

.footer__links {
  display: flex;
  gap: 2rem;
}

.footer__link {
  color: var(--md-sys-color-on-surface-variant);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);
}

.footer__link:hover,
.footer__link:focus {
  color: var(--md-sys-color-primary);
}

@media (min-width: 768px) {
  .footer__content {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* ==================== FAB ==================== */
.fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-large);
  cursor: pointer;
  box-shadow: var(--md-sys-elevation-level2);
  transition: all var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fab:hover,
.fab:focus {
  transform: scale(1.05);
  box-shadow: 
    var(--md-sys-elevation-level2),
    var(--neon-glow-cyan);
}

/* ==================== UTILITY CLASSES ==================== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hidden {
  display: none;
}

/* ==================== RESPONSIVE DESIGN ==================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --md-sys-color-outline: #ffffff;
    --md-sys-color-outline-variant: #cccccc;
  }
  
  .btn--filled {
    border: 2px solid currentColor;
  }
  
  .flavor-card,
  .three-d-viewer,
  .preview-viewer {
    border: 2px solid var(--md-sys-color-outline);
  }
}

/* Focus styles for accessibility */
*:focus {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

button:focus,
a:focus {
  outline-offset: 4px;
}

/* Print styles */
@media print {
  .app-bar,
  .nav-drawer,
  .fab,
  .three-d-viewer__controls {
    display: none;
  }
  
  body {
    background: white;
    color: black;
  }
  
  .hero,
  .flavors,
  .configurator,
  .about {
    page-break-inside: avoid;
  }
}

/* ==================== ORDER PAGE STYLES ==================== */

/* Order Page Layout */
.order-page {
  background: var(--md-sys-color-background);
  min-height: 100vh;
  padding-top: 80px;
}

.order-header {
  background: linear-gradient(135deg, var(--md-sys-color-surface-container) 0%, var(--md-sys-color-surface-container-high) 100%);
  padding: 2rem 0;
  border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.order-header__content {
  text-align: center;
}

.order-header__title {
  font: var(--md-sys-typescale-display-medium-font);
  font-size: var(--md-sys-typescale-display-medium-size);
  font-weight: var(--md-sys-typescale-display-medium-weight);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 0.5rem 0;
}

.order-header__subtitle {
  font: var(--md-sys-typescale-body-large-font);
  font-size: var(--md-sys-typescale-body-large-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

.order-content {
  padding: 2rem 0 4rem 0;
}

.order-grid {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 2rem;
  align-items: start;
}

/* Cart Section */
.cart-section {
  background: var(--md-sys-color-surface-container);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.cart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.cart-title {
  font: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.cart-count {
  background: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
}

.cart-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Cart Item */
.cart-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 12px;
  border: 1px solid var(--md-sys-color-outline-variant);
  transition: all 0.3s ease;
}

.cart-item:hover {
  border-color: var(--md-sys-color-primary);
  box-shadow: 0 2px 8px rgba(0, 212, 255, 0.1);
}

.cart-item__image {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background: var(--md-sys-color-surface-container-high);
  border-radius: 8px;
  overflow: hidden;
}

.cart-item__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cart-item__name {
  font: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.cart-item__description {
  font: var(--md-sys-typescale-body-small-font);
  font-size: var(--md-sys-typescale-body-small-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

.cart-item__specs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.cart-item__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  min-width: 120px;
}

.quantity-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--md-sys-color-surface-container);
  border-radius: 8px;
  padding: 0.25rem;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.quantity-btn {
  background: none;
  border: none;
  color: var(--md-sys-color-primary);
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.quantity-btn:hover {
  background: var(--md-sys-color-primary-container);
}

.quantity {
  min-width: 2rem;
  text-align: center;
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
}

.cart-item__price {
  font: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-primary);
}

.remove-btn {
  background: none;
  border: none;
  color: var(--md-sys-color-error);
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.remove-btn:hover {
  background: rgba(255, 84, 73, 0.1);
}

/* Checkout Section */
.checkout-section {
  position: sticky;
  top: 100px;
}

.checkout-card {
  background: var(--md-sys-color-surface-container);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.checkout-header {
  margin-bottom: 1.5rem;
}

.checkout-title {
  font: var(--md-sys-typescale-headline-small-font);
  font-size: var(--md-sys-typescale-headline-small-size);
  font-weight: var(--md-sys-typescale-headline-small-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

/* Order Summary */
.order-summary {
  margin-bottom: 1.5rem;
}

.summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font: var(--md-sys-typescale-body-medium-font);
  color: var(--md-sys-color-on-surface-variant);
}

.summary-line:first-child {
  padding-top: 0;
}

.summary-total {
  font-weight: 600;
  color: var(--md-sys-color-on-surface);
  font-size: 1.125rem;
}

.summary-divider {
  height: 1px;
  background: var(--md-sys-color-outline-variant);
  margin: 0.75rem 0;
}

/* Delivery Info */
.delivery-info {
  background: var(--md-sys-color-surface-container-low);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--md-sys-color-outline-variant);
}

.delivery-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.delivery-option .material-symbols-rounded {
  color: var(--md-sys-color-primary);
  font-size: 1.5rem;
}

.delivery-title {
  font-weight: 500;
  color: var(--md-sys-color-on-surface);
  margin-bottom: 0.25rem;
}

.delivery-subtitle {
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
}

/* Payment Section */
.payment-section {
  margin-top: 1.5rem;
}

.payment-title {
  font: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0 0 1rem 0;
}

.payment-options {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.payment-btn {
  background: var(--md-sys-color-surface-container-high);
  border: 2px solid var(--md-sys-color-outline-variant);
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
}

.payment-btn:hover {
  border-color: var(--md-sys-color-primary);
  background: var(--md-sys-color-surface-container-highest);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 212, 255, 0.1);
}

.payment-btn:active {
  transform: translateY(0);
}

.payment-logo {
  height: 32px;
  width: auto;
  object-fit: contain;
}

.apple-pay-logo {
  filter: invert(1);
}

.apple-pay-btn {
  background: #000000;
  border-color: #333333;
}

.apple-pay-btn:hover {
  background: #1a1a1a;
  border-color: var(--md-sys-color-primary);
}

.google-pay-btn {
  background: #ffffff;
  border-color: #dadce0;
}

.google-pay-btn:hover {
  background: #f8f9fa;
  border-color: var(--md-sys-color-primary);
}

.payment-security {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--md-sys-color-on-surface-variant);
  justify-content: center;
  padding: 0.75rem;
  background: var(--md-sys-color-surface-container-low);
  border-radius: 8px;
}

.payment-security .material-symbols-rounded {
  color: var(--md-sys-color-primary);
  font-size: 1rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .order-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .checkout-section {
    position: static;
  }
  
  .cart-item {
    flex-direction: column;
    gap: 1rem;
  }
  
  .cart-item__image {
    width: 100%;
    height: 200px;
  }
  
  .cart-item__controls {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  
  .payment-options {
    gap: 1rem;
  }
}

/* ==================== CART BANNER STYLES ==================== */

.cart-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface-container-high);
  border-top: 2px solid var(--md-sys-color-primary);
  padding: 1rem;
  z-index: 2000;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(100%);
  transition: transform 0.3s ease-in-out;
}

.cart-banner.show {
  transform: translateY(0);
}

.cart-banner__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  gap: 1rem;
}

.cart-banner__info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cart-banner__info .material-symbols-rounded {
  color: var(--md-sys-color-primary);
  font-size: 2rem;
  animation: cartPulse 0.6s ease-in-out;
}

.cart-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cart-banner__title {
  font: var(--md-sys-typescale-title-medium-font);
  font-size: var(--md-sys-typescale-title-medium-size);
  font-weight: var(--md-sys-typescale-title-medium-weight);
  color: var(--md-sys-color-on-surface);
  margin: 0;
}

.cart-banner__subtitle {
  font: var(--md-sys-typescale-body-medium-font);
  font-size: var(--md-sys-typescale-body-medium-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 0;
}

.cart-banner__actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

/* Cart pulse animation */
@keyframes cartPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* Mobile responsive cart banner */
@media (max-width: 768px) {
  .cart-banner__content {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .cart-banner__info {
    justify-content: center;
  }
  
  .cart-banner__actions {
    justify-content: center;
  }
  
  .cart-banner__actions .btn {
    flex: 1;
  }
}