:root {

  --bg: #ffffff;

  --surface: #ffffff;

  --surface-alt: #f8fafc;

  --text: #111827;

  --muted: #6b7280;

  --primary: #2563eb;

  --secondary: #10b981;

  --accent: #f59e0b;

  --card: #ffffff;

  --border: #e5e7eb;



  /* Unified Edge Light Algorithm */

  /* Physics: Constant Sharpness */

  --el-border-width: 0.5px;

  --el-inset-fix: calc(var(--el-border-width) * -1);

  

  /* Top-Left Highlight (Sharp & Bright) */

  --el-tl-offset: 1.5px;

  --el-tl-blur: 2px;

  --el-tl-color: rgba(255, 255, 255, 0.95);

  

  /* Bottom-Right Reflection (Soft & Subtle) */

  --el-br-offset: -1px;

  --el-br-blur: 4px;

  --el-br-color: rgba(255, 255, 255, 0.3);

  

  /* The Algorithm: Cap the highlight reach to ensure visual unity across sizes */

  /* min(120px, 45%) means:

     - On small items (<266px), it uses 45% (Proportional)

     - On large items (>266px), it caps at 120px (Consistent Corner Detail) */

  --el-mask-size: min(120px, 45%);

}



* {

  box-sizing: border-box;

}



html, body {

  height: 100%;

}



body {

  margin: 0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  background: var(--bg);

  color: var(--text);

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.container {

  max-width: 1120px;

  margin: 0 auto;

  padding: 0 24px;

}



.site-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background: rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border-bottom: 1px solid rgba(229, 231, 235, 0.5);

  z-index: 100;

  transition: all 0.3s ease;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  height: 64px;

}



.brand {

  display: flex;

  align-items: center;

}



.brand-text {

  font-weight: 700;

  font-size: 20px;

  letter-spacing: -0.02em;

}



.brand-highlight {

  color: var(--primary);

  margin-right: 6px;

}



.nav a {

  display: inline-block;

  padding: 8px 12px;

  color: var(--text);

  text-decoration: none;

  border-radius: 10px;

  transition: background 240ms ease, color 240ms ease;

}



.nav a:hover {

  background: var(--surface-alt);

  color: var(--text);

}



.hero {

  position: relative;

  min-height: 100vh;

  min-height: 100dvh;

  display: flex;

  align-items: center;

  justify-content: center;

  background: var(--surface);

  overflow: hidden;

  padding: 0;

}



.hero-bg {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 0;

  overflow: hidden;

}



.blob {

  position: absolute;

  border-radius: 50%;

  filter: blur(80px);

  opacity: 0.6;

  animation: float 20s infinite ease-in-out;

}



.blob-1 {

  width: 500px;

  height: 500px;

  background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);

  top: -100px;

  left: -100px;

  animation-delay: 0s;

}



.blob-2 {

  width: 400px;

  height: 400px;

  background: linear-gradient(135deg, #34d399 0%, #10b981 100%);

  bottom: -50px;

  right: -50px;

  animation-delay: -5s;

}



.blob-3 {

  width: 300px;

  height: 300px;

  background: linear-gradient(135deg, #a78bfa 0%, #8b5cf6 100%);

  top: 40%;

  left: 40%;

  animation-delay: -10s;

}



@keyframes float {

  0%, 100% { transform: translate(0, 0) scale(1); }

  33% { transform: translate(30px, -50px) scale(1.1); }

  66% { transform: translate(-20px, 20px) scale(0.9); }

}



.hero-content {

  position: relative;

  z-index: 1;

  text-align: center;

  width: 100%;

}



.headline {

  font-size: clamp(32px, 6vw, 64px);

  line-height: 1.1;

  letter-spacing: -0.03em;

  margin: 0 0 32px;

  background: linear-gradient(135deg, var(--text) 0%, #4b5563 100%);

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.subhead {

  font-size: clamp(16px, 3vw, 24px);

  line-height: 1.5;

  color: var(--muted);

  max-width: 600px;

  margin: 0 auto 40px;

  font-weight: 500;

}



.blur-in {

  animation: blurIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;

  animation-delay: 0.5s; /* Delay for performance */

  opacity: 0;

}



.blur-in-delay {

  animation: blurIn 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;

  animation-delay: 0.8s; /* Staggered delay */

  opacity: 0;

}



@keyframes blurIn {

  0% {

    filter: blur(20px);

    opacity: 0;

    transform: translateY(20px) scale(0.9);

  }

  100% {

    filter: blur(0);

    opacity: 1;

    transform: translateY(0) scale(1);

  }

}



.scroll-indicator {

  position: absolute;

  bottom: 40px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 8px;

  opacity: 0;

  animation: fadeIn 1s ease-out 1.5s forwards;

}



@keyframes fadeIn {

  to { opacity: 1; }

}



.mouse {

  width: 26px;

  height: 40px;

  border: 2px solid var(--muted);

  border-radius: 20px;

  position: relative;

}



.wheel {

  position: absolute;

  top: 6px;

  left: 50%;

  transform: translateX(-50%);

  width: 4px;

  height: 4px;

  background: var(--muted);

  border-radius: 50%;

  animation: scrollWheel 1.5s infinite;

}



.arrow {

  width: 12px;

  height: 12px;

  border-right: 2px solid var(--muted);

  border-bottom: 2px solid var(--muted);

  transform: rotate(45deg);

  animation: scrollArrow 1.5s infinite;

}



@keyframes scrollWheel {

  0% { top: 6px; opacity: 1; }

  100% { top: 20px; opacity: 0; }

}



@keyframes scrollArrow {

  0% { transform: rotate(45deg) translate(0, 0); opacity: 0; }

  50% { opacity: 1; }

  100% { transform: rotate(45deg) translate(6px, 6px); opacity: 0; }

}



.btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 14px 24px;

  border-radius: 14px;

  text-decoration: none;

  font-weight: 600;

  font-size: clamp(14px, 2vw, 16px);

  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);

  will-change: transform, box-shadow;

}



.btn-sm {

  padding: 10px 20px;

  font-size: 14px;

  border-radius: 10px;

}



.btn-primary {

  background: var(--primary);

  color: #fff;

  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1), 0 2px 4px -1px rgba(37, 99, 235, 0.06);

}



.btn-primary:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2), 0 4px 6px -2px rgba(37, 99, 235, 0.1);

}



.btn-secondary {

  background: #fff;

  color: var(--text);

  border: 1px solid var(--border);

  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);

}



.btn-secondary:hover {

  transform: translateY(-2px);

  border-color: var(--muted);

  background: var(--surface-alt);

}



.section {

  padding: 48px 0;

}



/* Products Section */

.developer-section {

  overflow: hidden;

}



.products-section {

  height: 100vh;

  height: 100dvh;

  min-height: 600px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  position: relative;

  padding-top: 80px; /* Account for fixed header */

}



.products-section .container {

  height: 100%;

  width: 100%;

  max-width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

}



.products-section .section-title {

  margin-bottom: 2rem;

  z-index: 20;

  position: relative;

  flex-shrink: 0;

}



.section-title {

  font-size: 32px;

  font-weight: 700;

  letter-spacing: -0.02em;

  margin: 0 0 48px;

  text-align: center;

}



/* 3D Carousel Styles */

.carousel-container {

  width: 100%;

  flex: 1; /* Take remaining height */

  position: relative;

  perspective: 800px; /* Stronger perspective */

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: visible; /* Allow 3D elements to extend if needed */

  padding: 20px 0;

}



.carousel-track {

  width: 100%;

  height: 100%;

  position: relative;

  transform-style: preserve-3d;

  display: grid;

  place-items: center;

}



/* Smooth Squircle Radius (Bezier Curve Simulation) */

.carousel-card,

.btn,

.badge,

.icon-main,

.card-icon {

  border-radius: 24px; /* Fallback */

  /* This is a complex clip-path approximating a superellipse (squircle) */

  /* Note: True squircles require SVG clip-path or Houdini, but 'round' radius is standard web.

     We will use a larger radius and specific property to emulate Apple's smoothness. */

  border-radius: 32px; 

  border-top-left-radius: 32px;

  border-top-right-radius: 32px;

  border-bottom-left-radius: 32px;

  border-bottom-right-radius: 32px;

  

  /* Apple-style smooth corner smoothing if supported (iOS/Safari feature) */

  corner-smoothing: 100%; /* Experimental */

}



.carousel-card {

  position: relative;

  grid-area: 1 / 1;

  /* Uniform Padding Logic (Apple Style) */

  /* Instead of fixed w/h, we use aspect ratio and padding-based sizing */

  width: 85vw;

  max-width: 900px;

  height: auto;

  aspect-ratio: 16/10; /* Golden-ish ratio for cards */

  min-height: 400px;

  max-height: 70vh;

  

  padding: 40px; /* Uniform padding */

  box-sizing: border-box;



  background: rgba(255, 255, 255, 0.9);

  backdrop-filter: blur(20px);

  -webkit-backdrop-filter: blur(20px);

  border: 1px solid rgba(255, 255, 255, 0.8);

  box-shadow: 

    0 25px 50px -12px rgba(0, 0, 0, 0.15),

    0 0 0 1px rgba(0, 0, 0, 0.02);

  display: flex;

  align-items: center;

  justify-content: center;

  opacity: 0;

  /* Enhanced transition for motion blur feel */

  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);

  transform: scale(0.8) translateZ(-400px);

  filter: blur(10px); /* Initial blur for hidden items */

  pointer-events: none;

}



/* Mobile Scroll/Swipe Hint */

.gesture-hint {

  display: none;

  font-size: 12px;

  margin-top: 8px;

  color: var(--muted); /* Fixed: Use dark color for white theme */

  letter-spacing: 2px;

  font-weight: 500;

}



@media (max-width: 768px) {

  .mouse {

    display: none; /* Hide mouse icon on touch devices */

  }

  

  .gesture-hint {

    display: block;

    animation: fadeUp 2s infinite;

  }

  

  .carousel-card {

    width: 85vw;

    height: auto; /* Fixed: Allow height to grow with content */

    min-height: 400px;

    max-height: none; /* Remove restrictive max-height */

    aspect-ratio: auto; /* Remove aspect ratio constraint */

    padding: 0; /* Remove padding from card, let content handle it */

  }



  .card-content {

    padding: 32px 20px 88px; /* Increased bottom padding for controls */

    justify-content: center; /* Center content vertically */

    overflow: visible; /* Disable internal scrolling and allow glow */

  }



  /* Aggressively shrink elements for mobile fit */

  .icon-wrapper {

    width: 64px;

    height: 64px;

    margin-bottom: 12px;

  }

  

  .card-content h3 {

    font-size: clamp(20px, 5.5vw, 24px);

    margin-bottom: 8px;

  }

  

  .card-desc {

    font-size: clamp(14px, 3.5vw, 16px);

    margin-bottom: 20px;

    line-height: 1.5;

    display: block; /* Remove line clamp to show full text */

    max-width: 100%; /* Use full width */

    overflow: visible;

  }

  

  .badge-row {

    margin-bottom: 12px;

    gap: 6px;

  }

  

  .badge {

    font-size: clamp(11px, 2.8vw, 12px);

    padding: 2px 8px;

  }

  

  .card-actions {

    margin-top: 12px;

  }

}



@keyframes fadeUp {

  0% { opacity: 0; transform: translateY(10px); }

  50% { opacity: 1; transform: translateY(0); }

  100% { opacity: 0; transform: translateY(-10px); }

}



.carousel-card.active {

  opacity: 1;

  transform: scale(1) translateZ(0) rotateY(0deg);

  filter: blur(0px); /* Clear focus */

  pointer-events: auto;

  z-index: 10;

}



.carousel-card.prev {

  opacity: 0.6;

  transform: translateX(-110%) scale(0.8) rotateY(25deg) translateZ(-200px);

  z-index: 5;

  filter: blur(5px); /* Stronger depth blur */

  cursor: pointer;

  pointer-events: auto;

}



.carousel-card.next {

  opacity: 0.6;

  transform: translateX(110%) scale(0.8) rotateY(-25deg) translateZ(-200px);

  z-index: 5;

  filter: blur(5px); /* Stronger depth blur */

  cursor: pointer;

  pointer-events: auto;

}



/* Base Reset for Tap Highlight */

* {

  -webkit-tap-highlight-color: transparent;

}



.card-content {

  text-align: center;

  /* Increased horizontal padding to prevent carousel buttons from overlapping text on smaller desktop screens */

  padding: 48px 88px;

  width: 100%;

  max-width: 800px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100%;

  /* Ensure content doesn't overflow on very small screens */

  overflow: visible;

}



.card-content::-webkit-scrollbar {

  display: none; /* Chrome/Safari */

}



/* Icon Wrapper System */

.icon-wrapper {

  position: relative;

  width: clamp(80px, 15vw, 120px);

  height: clamp(80px, 15vw, 120px);

  margin-bottom: clamp(16px, 3vh, 24px);

  flex-shrink: 0;

  display: flex;

  align-items: center;

  justify-content: center;

}



.icon-main {

  width: 100%;

  height: 100%;

  object-fit: contain;

  position: relative;

  z-index: 2;

  border-radius: 24px;

}



.icon-blur {

  position: absolute;

  top: 25%; /* Move glow significantly lower */

  left: 0;

  width: 100%;

  height: 100%;

  object-fit: contain;

  filter: blur(40px);

  opacity: 0.4; /* Slightly visible to counteract the distance */

  z-index: 1;

  transform: scale(1.2) translateY(10px); /* Expand and push down */

  mix-blend-mode: multiply;

}



/* Legacy support for emoji icons (like 'More Products') */

.card-icon {

  font-size: clamp(40px, 8vw, 64px);

  margin-bottom: clamp(16px, 3vh, 24px);

  display: inline-block;

  flex-shrink: 0;

}



.card-content h3 {

  font-size: clamp(20px, 5vw, 28px);

  margin-bottom: clamp(8px, 2vh, 16px);

  flex-shrink: 0;

}



.card-desc {

  font-size: clamp(14px, 2.5vw, 18px);

  color: var(--muted);

  line-height: 1.6;

  margin-bottom: clamp(16px, 3vh, 32px);

  max-width: 90%;

}



.card-actions {

  margin-top: clamp(16px, 3vh, 32px);

  flex-shrink: 0;

}



.carousel-controls {

  position: absolute;

  top: 50%;

  left: 24px;

  right: 24px;

  transform: translateY(-50%);

  display: flex;

  justify-content: space-between;

  pointer-events: none;

  z-index: 20;

}



.control-btn {

  pointer-events: auto;

  width: 56px;

  height: 56px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.8);

  backdrop-filter: blur(10px);

  border: 1px solid var(--border);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  color: var(--primary);

  /* Mobile optimization: prevent selection and callouts */

  -webkit-tap-highlight-color: transparent;

  -webkit-touch-callout: none;

  -webkit-user-select: none;

  user-select: none;

  outline: none; /* Remove default focus outline */

}



/* Hover effects ONLY for devices that support hover (Mouse) */

@media (hover: hover) {

  .control-btn:hover {

    transform: scale(1.1);

    background: var(--primary);

    color: white;

    border-color: var(--primary);

    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.25);

  }

}



/* Remove focus styles for mouse users/touch, keep for keyboard if needed (browser default usually ok for tab) */

.control-btn:focus {

  outline: none;

}



/* Active state for touch/click feedback */

.control-btn:active {

  transform: scale(0.95);

  background: #f1f5f9 !important; /* Force light gray background (Tailwind slate-100) */

  color: #2563eb !important; /* Force primary blue text */

  border-color: #2563eb !important;

  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); /* Inner shadow for pressed effect */

}



.badge-row {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  justify-content: center;

  margin-bottom: 16px;

}



.badge {

  font-size: 13px;

  font-weight: 500;

  padding: 4px 10px;

  border-radius: 999px;

  background: var(--surface-alt);

  color: var(--text);

  border: 1px solid var(--border);

}



.reveal {

  opacity: 0;

  transform: translateY(24px);

  transition: all 800ms cubic-bezier(0.2, 0.8, 0.2, 1);

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

}



/* Initial hidden state for cards before entry */

.carousel-track.waiting-entry .carousel-card {

  opacity: 0 !important;

  /* Start from right, rotated slightly to emphasize 3D nature */

  transform: translateX(120%) translateZ(-500px) rotateY(-30deg) !important;

  pointer-events: none;

}



/* Stagger logic for entry */

.carousel-track.stagger-entry .carousel-card:nth-child(1) { transition-delay: 0.1s; }

.carousel-track.stagger-entry .carousel-card:nth-child(2) { transition-delay: 0.25s; }

.carousel-track.stagger-entry .carousel-card:nth-child(3) { transition-delay: 0.4s; }



.grid {

  display: grid;

  gap: 24px;

}



.two-col {

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

}



.info-card {

  padding: 24px;

  background: var(--surface-alt);

  border-radius: 16px;

}



.cta-card {

  text-align: center;

  padding: 48px 24px;

  background: var(--surface-alt);

  border-radius: 24px;

}



.site-footer {

  padding: 32px 0;

  border-top: 1px solid var(--border);

  color: var(--muted);

  font-size: 14px;

}



.footer-inner {

  display: flex;

  justify-content: space-between;

}



@media (max-width: 768px) {

  .headline {

    font-size: clamp(32px, 10vw, 42px); /* Increased size range */

    margin-bottom: 20px;

    padding: 0 16px;

  }



  .subhead {

    font-size: 18px; /* Increased from 16px */

    padding: 0 24px;

    margin-bottom: 32px;

  }

  

  .carousel-container {

    height: auto;

    flex: 1;

    max-width: 100%;

    padding-bottom: 80px; /* Space for controls */

  }

  

  .carousel-controls {

    top: auto;

    bottom: 12px;

    left: 0;

    right: 0;

    justify-content: space-between;

    padding: 0 16px;

    gap: 0;

    transform: none;

    width: 100%;

  }



  .control-btn {

    width: 44px;

    height: 44px;

  }

  

  /* Landscape Mobile Adaptation */

  @media (max-height: 600px) and (orientation: landscape) {

    .hero,

    .products-section {

      height: auto;

      min-height: 100dvh;

      padding-top: 80px;

      padding-bottom: 40px;

    }



    .carousel-container {

      height: auto;

      min-height: 400px;

      overflow: visible;

    }



    .carousel-card {

      height: auto;

      min-height: 300px;

    }



    /* 优化横屏下的标题大小，防止占满屏�?*/

    .headline {

      font-size: clamp(24px, 5vw, 36px);

      margin-bottom: 16px;

    }

    .subhead {

      margin-bottom: 24px;

    }

  }



  /* Header Mobile Adaptation */

  .header-inner {

    height: 56px;

  }



  .brand-text {

    font-size: 18px;

  }



  /* Hide navigation links on mobile to avoid layout issues */

  .nav {

    display: none;

  }



  .products-section {

    padding-top: 70px;

  }

  

  .carousel-indicators {

      bottom: 40px;

  }

}



/* Carousel Indicators */

.carousel-indicators {

  position: absolute;

  bottom: 30px; /* Adjusted to avoid card overlap */

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 8px;

  z-index: 20;

}



.indicator-dot {

  width: 8px;

  height: 8px;

  border-radius: 50%;

  background: rgba(0, 0, 0, 0.2);

  cursor: pointer;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* Ensure smooth entry/exit */

  opacity: 1;

  transform: scale(1);

  margin: 0; 

}



.indicator-dot.hidden-dot {

  width: 0;

  height: 0;

  opacity: 0;

  margin: 0;

  padding: 0;

  transform: scale(0);

  pointer-events: none;

}



.indicator-dot.active {

  background: var(--primary);

  transform: scale(1.1);

  width: 20px; /* Pill shape for active */

  border-radius: 4px;

}



/* Developer Carousel (Restored & Mobile Optimized) */

.dev-carousel .carousel-track {

  perspective: none; /* Disable 3D perspective */

}



.dev-carousel .carousel-card {

  width: 90%; /* Wider card for events */

  max-width: 1000px;

  height: auto;

  min-height: 450px;

  aspect-ratio: 21/9;

  

  /* Reset 3D transforms */

  transform: scale(0.9) translateX(100px); /* Default hidden state (right) */

  opacity: 0;

  filter: blur(5px);

  

  /* Simplified styling */

  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);

  border: 1px solid rgba(37, 99, 235, 0.1);

  box-shadow: 0 20px 40px -10px rgba(37, 99, 235, 0.15);

  padding: 0; /* Content handles padding */

  

  /* Flex layout for banner content */

  display: flex;

  flex-direction: row; /* Horizontal layout if possible */

  align-items: stretch;

}



.dev-carousel .card-content {

  width: 100%;

  height: 100%;

  padding: 48px;

  display: flex;

  flex-direction: column;

  align-items: flex-start; /* Left align text */

  justify-content: center;

  text-align: left;

}



.dev-carousel .card-icon {

  font-size: 48px;

  margin-bottom: 24px;

  background: var(--surface-alt);

  width: 80px;

  height: 80px;

  border-radius: 20px;

  display: grid;

  place-items: center;

}



.dev-carousel .carousel-card h3 {

  font-size: 32px;

  margin-bottom: 16px;

}



.dev-carousel .carousel-card p {

  font-size: 18px;

  max-width: 600px;

  margin-bottom: 24px;

}



/* Override Active State */

.dev-carousel .carousel-card.active {

  opacity: 1;

  transform: scale(1) translateX(0);

  z-index: 10;

  filter: blur(0);

}



/* Override Prev/Next States */

.dev-carousel .carousel-card.prev {

  opacity: 0; /* Hide completely or fade out */

  transform: scale(0.9) translateX(-100px);

  z-index: 1;

  pointer-events: none;

}



.dev-carousel .carousel-card.next {

  opacity: 0;

  transform: scale(0.9) translateX(100px);

  z-index: 1;

  pointer-events: none;

}



/* Mobile Adaptation for Dev Carousel - Strict Fixes */

@media (max-width: 768px) {

  .dev-carousel {

    overflow: visible; /* Allow shadows to show */

    padding-bottom: 100px; /* Space for controls */

    padding-top: 20px; /* Space for top shadow */

  }



  .dev-carousel .carousel-card {

    width: calc(100% - 32px); /* Leave space for shadows */

    max-width: none;

    margin: 0 auto; /* Center the card */

    left: 0;

    right: 0;

    aspect-ratio: auto; /* Reset aspect ratio */

    min-height: 400px;

    flex-direction: column;

    

    /* Ensure only active card is visible and interactive */

    position: absolute; /* Stack them */

  }

  

  /* Reset Transforms for Mobile to be simpler */

  .dev-carousel .carousel-card.active {

    position: relative; /* Let active card take space */

    transform: none;

  }

  

  .dev-carousel .carousel-card.prev,

  .dev-carousel .carousel-card.next {

    position: absolute;

    top: 0;

    opacity: 0;

    pointer-events: none;

  }



  .dev-carousel .card-content {

    padding: 32px 24px; /* Standard padding */

    align-items: center;

    text-align: center;

  }

  

  .dev-carousel .card-icon {

    margin: 0 auto 24px;

  }

  

  .dev-carousel .carousel-card h3 {

    font-size: 24px;

  }

  

  .dev-carousel .carousel-card p {

    font-size: 16px;

  }

  

  /* Position controls below the content */

  .dev-carousel .carousel-controls {

    bottom: 20px;

  }

  

  .dev-carousel .carousel-indicators {

    bottom: 35px;

  }

}



/* Philosophy Section */

.philosophy-section {

  background: var(--surface-alt);

}



.philosophy-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 32px;

  padding: 0 16px;

}



.philosophy-card {

  background: var(--surface);

  border-radius: 24px;

  padding: 32px;

  text-align: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

  border: 1px solid var(--border);

}



.philosophy-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);

}



/* Glow Motion Wrappers - Follow the object animations */

.glow-motion-wrapper {

  position: absolute;

  top: 50%;

  left: 50%;

  z-index: 0;

  pointer-events: none;

  display: flex;

  align-items: center;

  justify-content: center;

}



/* 1. Bounce Glow (Non-linear Response) */

.bounce-glow {

  width: 40px;

  height: 40px;

  margin-top: -20px;

  margin-left: -20px;

  animation: bounceDemo 2s infinite cubic-bezier(0.16, 1, 0.3, 1);

}



/* 2. Stretch Glow (Natural Deformation) */

.stretch-glow {

  width: 80px;

  height: 80px;

  margin-top: -40px;

  margin-left: -40px;

  /* Sync with stretch-box animation */

  animation: smoothJellyMove 3.5s infinite cubic-bezier(0.4, 0, 0.2, 1);

  transform-origin: center bottom;

}



/* 3. Spring Glow (Spring Rebound) */

.spring-glow {

  width: 60px;

  height: 60px;

  margin-top: -30px;

  margin-left: -30px;

  /* Sync with spring-circle animation */

  animation: rubberBandSnap 3s infinite linear;

}



/* New Philosophy Icon Structure with Diffuse & Glass */

.philosophy-icon-wrapper {

  position: relative;

  width: 80px;

  height: 80px;

  margin: 0 auto 24px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.ph-diffuse-glow {

  position: absolute;

  width: 40px;

  height: 40px;

  background: var(--primary);

  border-radius: 50%;

  filter: blur(15px);

  opacity: 0.5;

  z-index: 0;

  animation: phBreathe 4s infinite ease-in-out;

}



@keyframes phBreathe {

  0%, 100% { transform: scale(0.9); opacity: 0.4; }

  50% { transform: scale(1.1); opacity: 0.6; }

}



.ph-glass-plate {

  position: relative;

  width: 100%;

  height: 100%;

  z-index: 1;

  

  /* Glassmorphism Essentials */

  background: rgba(37, 99, 235, 0.08); /* Light Blue Tint (Primary) */

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  

  /* REMOVED: Old Border & Shadow properties */

  border: 0.5px solid rgba(255, 255, 255, 0.3) !important; /* Force override to restore micro-border */

  border-radius: 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--primary);

}



/* 

   ==========================================================================

   UNIFIED EDGE LIGHT SYSTEM (Global)

   ========================================================================== 

   Applies the standardized "Soft yet Sharp" Edge Light to all glass/premium elements.

   Includes: Philosophy Cards, Glass Demo, Diffuse Demo, Edge Light Demo, Product Icons, CTA Buttons.

*/



/* 1. Base Border & Positioning */

.ph-glass-plate,

.glass-pane,

.diffuse-source,

.light-demo-object,

.icon-wrapper,

.btn-primary {

  position: relative; /* Ensure relative positioning for pseudo-element */

  border: 0.5px solid rgba(255, 255, 255, 0.3) !important; /* Unified micro-border */

}



/* 2. The Edge Light Pseudo-element */

.ph-glass-plate::after,

.glass-pane::after,

.diffuse-source::after,

.light-demo-object::after,

.icon-wrapper::after,

.btn-primary::after {

  content: "";

  position: absolute;

  /* Algorithm: Fix Gap using calculated negative inset */

  inset: var(--el-inset-fix);

  border-radius: inherit; /* Inherit parent's border-radius (crucial for buttons/icons) */

  padding: 0;

  background: transparent;

  

  /* Algorithm: Unified Parameters */

  box-shadow: 

    inset var(--el-tl-offset) var(--el-tl-offset) var(--el-tl-blur) var(--el-tl-color),

    inset var(--el-br-offset) var(--el-br-offset) var(--el-br-blur) var(--el-br-color);

  

  /* Algorithm: Unified Mask Size (Capped) */

  -webkit-mask: 

    radial-gradient(circle at top left, black 0%, transparent var(--el-mask-size)),

    radial-gradient(circle at bottom right, black 0%, transparent var(--el-mask-size));

  -webkit-mask-composite: source-over;

  mask-composite: add;

  

  pointer-events: none;

  z-index: 10; /* Ensure it sits on top of content (images/text) */

}



/* Specific Fixes for New Targets */

.icon-wrapper {

  border-radius: 24px; /* Ensure wrapper has radius for the border to follow */

}



/* 

   ==========================================================================

   END UNIFIED EDGE LIGHT SYSTEM

   ========================================================================== 

*/







.ph-glass-plate svg {

  width: 40px;

  height: 40px;

  stroke-width: 1.5;

  /* Removed drop-shadow to eliminate "icon diffuse light" */

  z-index: 2;

}



/* Specific Glow for Philosophy Cards - Resized to back the plate */

.philosophy-icon-wrapper .ph-diffuse-glow {

  width: 70px;

  height: 70px;

  filter: blur(25px);

  opacity: 0.4;

}



.philosophy-card h3 {

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 12px;

  color: var(--text);

}



.philosophy-card p {

  font-size: 15px;

  line-height: 1.6;

  color: var(--muted);

  margin: 0;

}



/* Staggered animation for philosophy cards */

.philosophy-card.reveal:nth-child(1) { transition-delay: 0.1s; }

.philosophy-card.reveal:nth-child(2) { transition-delay: 0.25s; }

.philosophy-card.reveal:nth-child(3) { transition-delay: 0.4s; }



.developer-section {

  overflow: hidden; /* Fix for carousel overflow causing horizontal scroll */

  position: relative;

}



@media (max-width: 768px) {

  /* Header Mobile Optimization */

  .header-inner {

    padding: 0 16px;

  }

  .brand-text {

    font-size: 18px;

  }

  .nav a {

    font-size: 13px;

    padding: 6px 8px;

  }



  .philosophy-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  

  .philosophy-card {

    padding: 24px;

  }

}



/* ==========================================================================

   Reveal Animations (Restored & Enhanced)

   ========================================================================== */

.reveal {

  opacity: 0;

  transform: translateY(60px);

  filter: blur(20px);

  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease-out;

  will-change: opacity, transform, filter;

}



.reveal.visible {

  opacity: 1;

  transform: translateY(0);

  filter: blur(0);

}



/* FIX: Specific conflict resolution for Philosophy Cards to ensure reveal works */

/* We merge the hover transition (box-shadow) with the reveal transition properties */

.philosophy-card.reveal {

  transition: opacity 0.8s ease-out, 

              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 

              filter 0.8s ease-out,

              box-shadow 0.3s ease;

}



/* ==========================================================================

   CLEAR Design Section

   ========================================================================== */

.design-section {

  background: var(--surface);

  padding-bottom: 80px;

}



.design-header {

  text-align: center;

  max-width: 700px;

  margin: 0 auto 64px;

}



/* FIX: Ensure design-header animates correctly */

.design-header.reveal {

  opacity: 0;

  transform: translateY(30px);

  filter: blur(10px);

  transition: opacity 1s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;

}



.design-header.reveal.visible {

  opacity: 1;

  transform: translateY(0);

  filter: blur(0);

}



.design-intro {

  font-size: 18px;

  color: var(--muted);

  line-height: 1.6;

}



.design-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 32px;

  padding: 0 16px;

}



.design-card {

  background: var(--surface-alt);

  border-radius: 32px;

  overflow: hidden;

  border: 1px solid var(--border);

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

}



.design-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.1);

}



.design-visual {

  height: 200px;

  background: var(--surface-alt); /* Use variable for better theme adaptation */

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.design-content {

  padding: 32px;

}



.design-content h3 {

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 12px;

  color: var(--text);

}



.design-content p {

  font-size: 15px;

  line-height: 1.6;

  color: var(--muted);

  margin: 0;

}



/* --- Visual Demos --- */



/* Bezier Curve Demo */

.bezier-visual .bezier-svg {

  width: 100%;

  height: 100%;

  max-width: 240px;

}



.bezier-visual .frame-line {

  fill: none;

  stroke: var(--border);

  stroke-width: 2;

  stroke-dasharray: 4 4;

}



.bezier-visual .handle-line {

  stroke: var(--muted);

  stroke-width: 2;

  stroke-dasharray: 4 4;

  opacity: 0.5;

}



.bezier-visual .main-curve {

  fill: none;

  stroke: var(--primary);

  stroke-width: 4;

  stroke-linecap: round;

  /* Animate drawing */

  stroke-dasharray: 300;

  stroke-dashoffset: 300;

  animation: drawCurve 6s infinite;

}



.bezier-visual .control-point {

  fill: #fff;

  stroke: var(--primary);

  stroke-width: 2;

  animation: pulsePoint 6s infinite;

}



.bezier-visual .anchor-point {

  fill: var(--primary);

}



@keyframes drawCurve {

  /* Draw in - Slower and smoother */

  0% { stroke-dashoffset: 300; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }

  40% { stroke-dashoffset: 0; }

  

  /* Hold longer */

  70% { stroke-dashoffset: 0; animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1); }

  

  /* Erase out (backwards) */

  100% { stroke-dashoffset: 300; }

}



@keyframes pulsePoint {

  0%, 100% { r: 5; stroke-width: 2; }

  /* Sync with the curve holding phase */

  40%, 70% { r: 7; stroke-width: 3; }

}



/* Motion Demo */

.motion-visual .motion-dot {

  width: 24px;

  height: 24px;

  background: var(--accent);

  border-radius: 50%;

  position: relative;

  z-index: 2;

  animation: bounceDemo 2s infinite cubic-bezier(0.16, 1, 0.3, 1);

}



.motion-visual .motion-path {

  position: absolute;

  width: 100%;

  height: 2px;

  background: rgba(0,0,0,0.05);

  top: 50%;

}



@keyframes bounceDemo {

  0%, 100% { transform: translateY(0) scale(1); }

  50% { transform: translateY(-40px) scale(1.1); }

}



/* Depth Demo */

.depth-visual .depth-layer {

  position: absolute;

  border-radius: 24px;

  transition: all 0.5s ease;

}



.depth-visual .layer-1 {

  width: 120px;

  height: 120px;

  background: rgba(255,255,255,0.8);

  border: 1px solid rgba(0,0,0,0.05);

  z-index: 1;

  transform: translate(-20px, 20px);

}



.depth-visual .layer-2 {

  width: 120px;

  height: 120px;

  background: rgba(255,255,255,0.4);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(255,255,255,0.8);

  box-shadow: 0 20px 40px rgba(0,0,0,0.1);

  z-index: 2;

  transform: translate(20px, -20px);

}



.design-card:hover .layer-1 { transform: translate(-10px, 10px); }

.design-card:hover .layer-2 { transform: translate(10px, -10px) scale(1.05); }



/* Pure Aesthetics Demo */

.pure-visual .pure-circle {

  width: 120px;

  height: 120px;

  background: white;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: inset 0 0 20px rgba(0,0,0,0.02);

}



.pure-visual .pure-circle::after {

  content: '';

  width: 60px;

  height: 60px;

  background: var(--text);

  border-radius: 50%;

}



/* Stretch Demo - Enhanced with Inertia & Finger Simulation */

.stretch-visual .stretch-track {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

}



.stretch-visual .stretch-box {

  width: 80px;

  height: 80px;

  background: var(--secondary);

  border-radius: 20px;

  position: relative;

  box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);

  /* 

     Smoother "Jelly" Animation 

     Simulates a high-speed movement with material deformation

  */

  animation: smoothJellyMove 3.5s infinite cubic-bezier(0.4, 0, 0.2, 1);

  transform-origin: center bottom;

}



/* Simulated Finger Touch Indicator */

.stretch-visual .finger-indicator {

  position: absolute;

  width: 40px;

  height: 40px;

  background: rgba(255, 255, 255, 0.5);

  border: 2px solid rgba(255, 255, 255, 0.8);

  border-radius: 50%;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%) scale(0);

  opacity: 0;

  pointer-events: none;

  animation: fingerTouchSmooth 3.5s infinite cubic-bezier(0.4, 0, 0.2, 1);

  z-index: 10;

}



@keyframes smoothJellyMove {

  0% { transform: translateX(-50px) scale(1, 1) skewX(0deg); }

  

  /* Start Moving: Slight Anticipation/Tilt back */

  12% { transform: translateX(-50px) scale(1.02, 0.98) skewX(-2deg); }

  

  /* Acceleration Phase: Stretch & Lean Forward */

  /* Reduced skew and scale for more natural feel */

  35% { transform: translateX(10px) scale(1.15, 0.9) skewX(6deg); }

  

  /* Deceleration Phase: Overshoot & Squash (Impact) */

  /* Smoother transition to stop */

  55% { transform: translateX(60px) scale(0.95, 1.05) skewX(-3deg); }

  

  /* Settle Phase: Small oscillations */

  /* Extended settle time for physics realism */

  70% { transform: translateX(52px) scale(1.01, 0.99) skewX(1deg); }

  80% { transform: translateX(55px) scale(1, 1) skewX(0deg); }

  

  /* Hold Position */

  90% { transform: translateX(55px) scale(1, 1); opacity: 1; }

  

  /* Quick Fade Out & Reset */

  100% { transform: translateX(55px) scale(1, 1); opacity: 0; } 

}



@keyframes fingerTouchSmooth {

  0% { opacity: 0; transform: translate(calc(-50% - 50px), -50%) scale(1.5); }

  

  /* Touch Down */

  10% { opacity: 1; transform: translate(calc(-50% - 50px), -50%) scale(1); }

  

  /* Dragging */

  35% { opacity: 1; transform: translate(-50%, -50%) scale(0.9); }

  

  /* Release at end */

  55% { opacity: 0; transform: translate(calc(-50% + 55px), -50%) scale(1.2); }

  

  100% { opacity: 0; transform: translate(calc(-50% + 55px), -50%) scale(1.2); }

}



/* Spring Rebound Demo - Rubber Band Effect */

.spring-visual .spring-circle {

  width: 60px;

  height: 60px;

  background: var(--primary);

  border-radius: 50%;

  position: relative;

  /* Simulating a "Pull & Snap" interaction */

  animation: rubberBandSnap 3s infinite linear;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);

}



@keyframes rubberBandSnap {

  /* Phase 1: Resting */

  0% { transform: translateY(0) scale(1); }

  

  /* Phase 2: Pull Down (Building Tension) - Slow & Heavy */

  /* Imagine a finger pulling it down */

  35% { transform: translateY(80px) scale(0.9, 1.1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

  

  /* Phase 3: Release & Snap Back (The "Spring") */

  /* Fast snap upward, overshooting center */

  /* Target: -25px (Overshoot top) */

  45% { transform: translateY(-25px) scale(1.1, 0.9); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }

  

  /* Phase 4: Drop Back (Gravity/Restoring Force) - CRITICAL FIX */

  /* Slowed down this phase significantly to avoid "jarring" drop */

  /* Target: 10px (Overshoot bottom) */

  60% { transform: translateY(10px) scale(0.98, 1.02); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

  

  /* Phase 5: Final Damped Oscillation */

  /* Target: -4px (Slight Overshoot top) */

  75% { transform: translateY(-4px) scale(1.01, 0.99); animation-timing-function: ease-in-out; }

  

  /* Phase 6: Settle */

  85% { transform: translateY(0) scale(1); }

  100% { transform: translateY(0) scale(1); }

}



/* Reveal Stagger for Design Cards */

.design-card.reveal:nth-child(1) { transition-delay: 0.1s; }

.design-card.reveal:nth-child(2) { transition-delay: 0.2s; }

.design-card.reveal:nth-child(3) { transition-delay: 0.3s; }

.design-card.reveal:nth-child(4) { transition-delay: 0.4s; }

.design-card.reveal:nth-child(5) { transition-delay: 0.5s; }

.design-card.reveal:nth-child(6) { transition-delay: 0.6s; }



/* Diffuse Light Demo - Solid Color Implementation */

.diffuse-visual {

  background: #f8fafc;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.diffuse-source {

  width: 80px;

  height: 80px;

  /* Solid Brand Color with Glass effect */

  background: rgba(37, 99, 235, 0.4); /* Primary blue with opacity */

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  /* REMOVED: Old Border */

  border: 0.5px solid rgba(255, 255, 255, 0.3) !important;

  border-radius: 20px;

  position: relative;

  z-index: 2;

  /* Updated to include Edge Light */

  /* FLATTENED: Removed inset shadow */

  box-shadow: 

    0 4px 6px rgba(0, 0, 0, 0.05);

}



/* Gradient Mask Border (Smooth Diagonal Light) */

.diffuse-source::after {

  content: "";

  position: absolute;

  /* Fix Gap: Expand pseudo-element slightly to cover border seam */

  inset: -0.5px;

  border-radius: inherit;

  padding: 0; /* No physical border width */

  background: transparent; /* No background */

  

  /* The Light: Thinner, Sharper, Inset Shadow */

  box-shadow: 

    /* Top Left: 1.5px offset (increased), 2px blur (sharp), Bright (0.95) */

    inset 1.5px 1.5px 2px rgba(255, 255, 255, 0.95),

    /* Bottom Right: -1px offset (doubled), 4px blur (softer), Strong opacity (0.3) */

    inset -1px -1px 4px rgba(255, 255, 255, 0.3);

  

  /* The Mask: Restrict visibility to corners - Tighter Focus (45%) */

  -webkit-mask: 

    radial-gradient(circle at top left, black 0%, transparent 45%),

    radial-gradient(circle at bottom right, black 0%, transparent 45%);

  -webkit-mask-composite: source-over;

  mask-composite: add;

  

  pointer-events: none;

  z-index: 3;

}



.diffuse-glow {

  position: absolute;

  width: 80px;

  height: 80px;

  background: var(--primary);

  border-radius: 20px;

  /* The core "Diffuse" effect: Heavy blur expanding into the environment */

  filter: blur(40px);

  opacity: 0.6;

  z-index: 1;

  /* Shift glow downwards to simulate top-down lighting like the music icon */

  transform: scale(1.5) translateY(15px);

  animation: diffuseBreathe 4s infinite ease-in-out;

}



@keyframes diffuseBreathe {

  /* Maintain the downward offset during animation */

  0%, 100% { opacity: 0.5; transform: scale(1.4) translateY(15px); }

  50% { opacity: 0.7; transform: scale(1.6) translateY(15px); }

}



/* Glassmorphism Demo - Solid Shapes Background */

.glass-visual {

  background: #f1f5f9;

  position: relative;

  overflow: hidden;

}



/* Add solid shapes behind the glass to show blur */

.glass-visual::before,

.glass-visual::after {

  content: '';

  position: absolute;

  border-radius: 50%;

}



.glass-visual::before {

  width: 100px;

  height: 100px;

  background: var(--primary); /* Solid Blue */

  top: 30px;

  left: 40px;

}



.glass-visual::after {

  width: 80px;

  height: 80px;

  background: var(--secondary); /* Solid Green */

  bottom: 30px;

  right: 50px;

}



.glass-pane {

  width: 180px;

  height: 100px;

  background: rgba(255, 255, 255, 0.6);

  /* Enhanced Saturation for better color transmission */

  backdrop-filter: blur(12px) saturate(180%);

  -webkit-backdrop-filter: blur(12px) saturate(180%);

  

  /* REMOVED: Old Border */

  border: 0.5px solid rgba(255, 255, 255, 0.3) !important;

  

  /* Rim Light High-Light Effect */

  /* FLATTENED: Removed inset shadow */

  box-shadow: 

    0 8px 32px 0 rgba(0, 0, 0, 0.05);

  

  border-radius: 20px;

     

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 2;

  transition: transform 0.4s ease;

  position: relative;

}







.glass-pane span {

  font-weight: 600;

  color: var(--text);

  font-size: 16px;

  letter-spacing: 0.5px;

}



.design-card:hover .glass-pane {

  transform: scale(1.05) rotate(-2deg);

}



/* Light & Hierarchy Demo (Edge Light) */

.light-visual {

  background: var(--surface-alt);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.light-demo-object {

  width: 90px;

  height: 90px;

  /* Solid Blue Object */

  background: rgba(37, 99, 235, 0.9); 

  border-radius: 26px;

  position: relative;

  z-index: 2;

  

  /* Glass Overlay simulation on the object itself for "Edge Light" */

  backdrop-filter: blur(12px);

  -webkit-backdrop-filter: blur(12px);

  

  /* REMOVED: Old Border */

  border: 0.5px solid rgba(255, 255, 255, 0.3) !important;

  

  /* The "Rim Light" - Inner white highlight */

  /* FLATTENED: Removed inset shadow to fix artifacts and reduce 3D heaviness */

  box-shadow: 

    0 12px 24px rgba(37, 99, 235, 0.25);      /* Colored Shadow Only */

    

  display: flex;

  align-items: center;

  justify-content: center;

  color: white;

}







.light-visual .ph-diffuse-glow {

  position: absolute;

  width: 100px;

  height: 100px;

  background: var(--primary);

  border-radius: 50%;

  filter: blur(40px);

  opacity: 0.5;

  z-index: 1;

  /* Centered perfectly - Removed offset to fix "misalignment" */

  transform: translateY(0);

  animation: phBreathe 5s infinite ease-in-out;

}



/* Conflict Fix for Design Cards */

.design-card.reveal {

  transition: opacity 0.8s ease-out, 

              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 

              filter 0.8s ease-out,

              box-shadow 0.4s ease;

}



@media (max-width: 768px) {

  .design-header {

    margin-bottom: 40px;

  }

  .design-intro {

    font-size: 16px;

    padding: 0 16px;

  }

  .design-visual {

    height: 160px;

  }

}



/* Homothetic Corners Demo */

.homothetic-visual {

  background: var(--surface-alt);

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.capsule-container {

  width: 138px; /* Initial Start Width (5/8 of 220px) */

  height: 42px; /* Reduced from 48px */

  background: #000;

  border-radius: 21px; /* R = Height / 2 = 21px */

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-start; /* Align left */

  /* 

     Alignment Logic (Updated for H=42px, Icon=20px):

     Target Margin = 8px.

     Outer Radius R = 21px.

     Inner Radius r = 21px - 8px = 13px.

     Inner Circle Center X = 8px (Margin) + 13px (Radius) = 21px.

     Icon Width = 20px.

     Icon Left = 21px (Center) - 10px (Half Width) = 11px.

     Adjustment: Increased padding to 13px to avoid icon being too close to edge during move.

  */

  padding-left: 13px;

  /* Add subtle shadow */

  box-shadow: 0 10px 30px rgba(0,0,0,0.1);

  overflow: hidden; /* Ensure content stays inside */

  /* Split animations for Width and Scale to match iOS physics */

  animation: 

    capsuleWidth 10s infinite,

    capsuleScale 10s infinite;

}



/* Inner Guide: Visualizes the uniform margin scaling */

.inner-guide {

  position: absolute;

  /* Start State handled by animation */

  inset: -5px; 

  border-radius: 26px; /* R + 5px padding approx */

  border: 1.5px solid rgba(255, 255, 255, 0.3);

  pointer-events: none;

  z-index: 2;

  opacity: 0;

  /* Animation: Wait -> Fade In -> Shrink -> Green -> Fade Out */

  animation: guideShrinkFit 10s infinite cubic-bezier(0.4, 0, 0.2, 1);

}



.homothetic-icon {

  width: 20px; /* Scaled down from 24px */

  height: 20px;

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  z-index: 1;

  position: relative;

  /* Animation: Wait -> Move -> Align -> Hold -> Reset */

  animation: iconMove 10s infinite cubic-bezier(0.4, 0, 0.2, 1);

}



.homothetic-icon svg {

  width: 100%;

  height: 100%;

  overflow: visible; /* Allow stroke to bleed out */

  stroke: white; /* Ensure stroke color matches */

  stroke-linejoin: round; /* Soft corners for the blur blob */

  stroke-linecap: round;

  /* Rotate to point right */

  transform: rotate(90deg);

  /* Animation: Appear -> Thicken & Blur -> Disappear */

  animation: iconVolumeBlur 10s infinite cubic-bezier(0.4, 0, 0.2, 1);

}



.info-text {

  position: absolute;

  right: 12px; /* Adjusted to 12px for better balance with guide inset */

  display: flex;

  align-items: center;

  /* 字母比例贴合线：使用稍大字号并垂直居中 */

  height: 100%; 

  z-index: 5;

  pointer-events: none;

  /* Handle simultaneous exit for all chars */

  animation: infoContainerExit 10s infinite;

}



@keyframes infoContainerExit {

  0%, 84% { opacity: 1; }

  /* Exit during first half of island shrink (85-89.8) */

  /* Must be fully gone by 87.4% */

  87% { opacity: 0; }

  100% { opacity: 0; }

}



.digit-char {

  color: white; /* 纯白 */

  font-family: "SF Pro Rounded", system-ui, -apple-system, sans-serif;

  font-weight: 700; /* 加粗以更好贴合 */

  font-size: 16px; /* 进一步缩小字号适配小岛 */

  letter-spacing: 0.5px;

  /* 

     Blur Weight Alignment:

     Simulate the "volume" of the plane icon using text-shadow.

     This creates a soft glow/halo that matches the plane's blur stroke visual weight.

  */

  text-shadow: 0 0 1px rgba(255, 255, 255, 0.8), 0 0 8px rgba(255, 255, 255, 0.4);

  opacity: 0;

  /* 默认隐藏，动画控制显示 */

  transform: translateY(20px);

  filter: blur(10px);

  /* Added 'both' to fill-mode to ensure 0% keyframe applies during delay */

  animation: infoCharAnim 10s infinite cubic-bezier(0.4, 0, 0.2, 1) both;

}



/* 逐个出现的延迟 (Staggered Delay) - Restored for Enter Phase */

.char-1 { animation-delay: 0s; }

.char-2 { animation-delay: 0.1s; }

.char-3 { animation-delay: 0.2s; }

.char-4 { animation-delay: 0.3s; }



@keyframes capsuleWidth {

  /* Phase 1: Pause Collapsed (0% - 5%) */

  0%, 5% { 

    width: 138px;

    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

  }

  

  /* Phase 2: Expand (5% - 9.8%) - Duration 0.48s */

  9.8% { 

    width: 220px; 

  }

  

  /* Phase 3: Hold Expanded (9.8% - 85%) */

  85% { 

    width: 220px;

    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);

  }

  

  /* Phase 4: Shrink (85% - 89.8%) - Duration 0.48s */

  89.8% { 

    width: 138px; 

  }

  

  /* Phase 5: Pause Collapsed (89.8% - 100%) */

  100% { 

    width: 138px; 

  }

}



@keyframes capsuleScale {

  /* Phase 1: Wait (0% - 5%) */

  0%, 5% { transform: scale(1); }

  

  /* Phase 2: iOS Spring Animation (5% - 11.5%) - Duration 0.65s */

  /* Start: Jump to 1.018 */

  5.1% { transform: scale(1.018); }

  

  /* 35% of spring: 1.002 */

  7.3% { transform: scale(1.002); }

  

  /* 60% of spring: 1.005 */

  8.9% { transform: scale(1.005); }

  

  /* 85% of spring: 0.998 */

  10.5% { transform: scale(0.998); }

  

  /* 100% of spring: 1 */

  11.5% { transform: scale(1); }

  

  /* Phase 3: Hold & Close (No scale on close) */

  100% { transform: scale(1); }

}



@keyframes guideShrinkFit {

  /* Phase 1: Wait (0% - 5%) */

  0%, 5% {

    opacity: 0;

    inset: 2px; 

    border-radius: 19px;

    border-color: rgba(255, 255, 255, 0.5);

  }

  

  /* Phase 2: Fade In (5% - 10%) */

  10% {

    opacity: 1;

    inset: 2px;

    border-radius: 19px;

    border-color: rgba(255, 255, 255, 0.5);

    box-shadow: none;

  }

  

  /* Phase 3: Shrink to Fit (10% - 18%) */

  18% {

    inset: 8px; 

    border-radius: 13px; 

    border-color: #10b981; 

    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);

    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  

  /* Phase 4: Hold Green (18% - 42%) */

  42% {

    opacity: 1;

    inset: 8px;

    border-radius: 13px;

    border-color: #10b981;

    box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);

  }

  

  /* Phase 5: Return to Shape THEN Fade (42% - 50%) */

  /* Step 1: Return to fitting shape (Visible) - Clearer Reverse Animation */

  46% {

    opacity: 1;

    inset: 2px;

    border-radius: 19px;

    border-color: rgba(255, 255, 255, 0.5);

    box-shadow: none;

    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  

  /* Step 2: Fade Out (Disappear) */

  50% {

    opacity: 0;

    inset: 2px; 

    border-radius: 19px;

  }

  

  100% {

    opacity: 0;

    inset: 2px;

    border-radius: 19px;

  }

}



@keyframes iconMove {

  /* Phase 1: Hold Wrong Position (0% - 18%) */

  0%, 18% {

    transform: translateX(-8px);

  }

  

  /* Phase 2: Move to Align (18% - 30%) - Smooth Glide */

  30% {

    transform: translateX(0);

    animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);

  }

  

  /* Phase 3: Hold Aligned (30% - 85%) */

  /* Must hold until island starts shrinking or fade starts */

  85% {

    transform: translateX(0);

  }

  

  /* Phase 4: Reset (Immediate or during fade) */

  /* Since it fades out by 87%, we can reset position after 87% */

  90% {

    transform: translateX(-8px);

  }

  

  100% {

    transform: translateX(-8px);

  }

}



@keyframes iconVolumeBlur {

  /* Phase 1: Appear during Expand (0% - 15%) */

  0% { opacity: 0; filter: blur(10px); }

  15% { opacity: 1; filter: blur(0); }

  

  /* Phase 2: Hold Sharp (15% - 18%) */

  18% { filter: blur(0); stroke-width: 0; }

  

  /* Phase 3: Motion Blur (18% - 30%) - Synced with Move */

  18.1% { filter: blur(0); stroke-width: 0; }

  24% { filter: blur(3px); stroke-width: 3px; opacity: 0.9; }

  30% { filter: blur(0); stroke-width: 0; opacity: 1; }

  

  /* Phase 4: Hold Sharp (30% - 84%) */

  84% { opacity: 1; filter: blur(0); }

  

  /* Phase 5: Fade Out (84% - 87%) - First half of island shrink */

  87% { opacity: 0; filter: blur(10px); }

  

  100% { opacity: 0; }

}



@keyframes infoCharAnim {

  /* Phase 1: Wait (0% - 32%) - Wait for plane */

  0%, 32% {

    opacity: 0;

    transform: translateY(12px); 

    filter: blur(8px);

  }

  

  /* Phase 2: Pop Up with Spring Bounce (32% - 42%) */

  42% {

    opacity: 1;

    transform: translateY(0); 

    filter: blur(0);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  }

  

  /* Phase 3: Hold Visible (42% - 90%) 

     We hold opacity 1 LONGER than the container.

     The container (.info-text) fades out at 87%, taking all chars with it simultaneously.

     This allows chars to have individual start delays without affecting the unified exit time.

  */

  90% {

    opacity: 1;

    transform: translateY(0);

    filter: blur(0);

  }

  

  /* Phase 4: Reset (90% - 100%)

     Reset to hidden state while the parent container is invisible.

     This ensures that when the parent becomes visible again at 0%,

     the chars are already in their hidden starting state.

  */

  95%, 100% {

    opacity: 0;

    transform: translateY(12px); 

    filter: blur(8px);

  }

}



.design-card.reveal:nth-child(7) { transition-delay: 0.7s; }



/* 

   FORCE OVERRIDES FOR MOBILE CAROUSEL 

   (Fixing issue where styles.css is locked and has bad mobile styles)

*/

@media (max-width: 768px) {

  .carousel-card {

    height: auto !important;

    max-height: none !important;

    aspect-ratio: auto !important;

    padding: 0 !important;

    min-height: 380px !important;

  }



  .card-content {

    justify-content: center !important;

    overflow: visible !important;

    padding: 32px 24px !important;

  }

  

  .card-desc {

    display: block !important;

    -webkit-line-clamp: unset !important;

    line-clamp: unset !important;

    overflow: visible !important;

    margin-bottom: 24px !important;

  }



  .icon-wrapper {

    width: 64px !important;

    height: 64px !important;

    margin-bottom: 16px !important;

  }

  

  .card-content h3 {

    margin-bottom: 12px !important;

  }

}



/* Developer Section Styles */

.developer-section {

  position: relative;

  overflow: hidden; /* Fixes horizontal scrollbar issue caused by off-screen carousel cards */

  padding: 80px 0;

  min-height: 800px; /* Ensure enough height for absolute positioned cards */

  display: flex;

  flex-direction: column;

}



.developer-section .carousel-container {

  flex: 0 0 auto;

  height: 500px; /* Explicit height for the carousel area */

  margin-bottom: 40px;

}



.dev-architecture {

  margin-top: 20px;

  text-align: center;

  background: var(--surface-alt);

  padding: 40px;

  border-radius: 24px;

  border: 1px solid var(--border);

  position: relative;

  z-index: 2; /* Ensure it sits above any carousel overflow */

}



.dev-architecture h3 {

  font-size: 24px;

  margin-bottom: 16px;

  color: var(--text);

}



.dev-architecture p {

  color: var(--muted);

  font-size: 16px;

}



.arch-placeholder {

  margin-top: 24px;

  height: 200px;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 2px dashed var(--border);

  border-radius: 12px;

  color: var(--muted);

  background: rgba(255, 255, 255, 0.5);

}



.arch-placeholder span {

  opacity: 0.5;

}



@media (max-width: 768px) {

  .developer-section {

    min-height: auto;

    padding-bottom: 40px;

  }

  

  .developer-section .carousel-container {

    height: 450px; /* Mobile height for carousel */

    margin-bottom: 20px;

  }



  /* Fix overflow on mobile specifically */

  body {

    overflow-x: hidden;

    width: 100%;

  }

}



/* =========================================
   One-Shot Fullscreen Animation & Layout
   ========================================= */

/* Default State: Hidden Elements */
.product-sidebar {
  display: none;
  opacity: 0;
}

.fullscreen-close-btn {
  position: absolute;
  top: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 10001;
  color: var(--text);
  backdrop-filter: blur(10px);
}

.fullscreen-close-btn:hover {
  background: rgba(0,0,0,0.1);
  transform: scale(1.1);
}

/* Fullscreen State */
.products-section.is-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9999;
  background: #ffffff;
  padding: 0;
  margin: 0;
  border-radius: 0;
  overflow: hidden;
  /* Transition handled by JS FLIP, but base properties need defaults */
}

.products-section.is-fullscreen .container {
  height: 100%;
  max-width: 1120px;
  padding: 80px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.products-section.is-fullscreen .section-title {
  display: none;
}

.products-section.is-fullscreen .fullscreen-close-btn {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition-delay: 0.6s; /* Appear after expansion */
}

/* Sidebar Styling */
.products-section.is-fullscreen .product-sidebar {
  display: none;
}

@media (min-width: 769px) {
  .products-section.is-fullscreen {
    overflow: visible;
  }

  .products-section.is-fullscreen .container {
    max-width: none;
    width: 100%;
  }

  .products-section.is-fullscreen .carousel-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: translateX(24px);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .products-section.is-fullscreen .carousel-track {
    place-items: center end;
  }

  .products-section.is-fullscreen .product-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 48px;
    top: 96px;
    width: 340px;
    max-height: calc(100vh - 160px);
    overflow: auto;
    z-index: 10000;
    opacity: 0;
    transform: translateX(-18px);
    pointer-events: none;
    transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .products-section.is-fullscreen.is-fullscreen-layout .carousel-container {
    transform: translateX(0);
    padding-left: calc(48px + 340px + 56px);
    padding-right: clamp(16px, 4vw, 72px);
    box-sizing: border-box;
  }
  
  .products-section.is-fullscreen.is-fullscreen-layout .product-sidebar {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
  }
 
  .products-section.is-fullscreen.is-fullscreen-layout .carousel-card {
    width: min(85vw, calc(100vw - 420px));
    max-width: min(900px, calc(100vw - 420px));
    max-height: 78vh;
    min-height: 360px;
    padding: 0;
    overflow: hidden;
  }
  
  .products-section.is-fullscreen.is-fullscreen-layout .carousel-card .card-content {
    padding: clamp(24px, 3.8vw, 44px) clamp(20px, 5.2vw, 72px);
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    transform: scale(var(--card-content-scale, 1));
    transform-origin: center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
 
  .products-section.is-fullscreen.is-fullscreen-layout .product-sidebar .product-item {
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
  }
 
  .products-section.is-fullscreen.is-fullscreen-layout .product-sidebar .product-item:hover {
    background: rgba(0, 0, 0, 0.04);
    transform: none;
  }
 
  .products-section.is-fullscreen.is-fullscreen-layout .product-sidebar .product-item.active {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text);
    box-shadow: none;
    border-color: rgba(0, 0, 0, 0.06);
  }
 
  .products-section.is-fullscreen.is-fullscreen-layout .product-sidebar .product-item.active .item-desc {
    color: var(--muted);
  }
 
  .products-section.is-fullscreen.is-fullscreen-layout .product-sidebar .product-item.active .item-icon {
    background: rgba(0, 0, 0, 0.04);
  }
}

.sidebar-header h3 {
  font-size: 32px;
  margin-bottom: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.product-list {
  list-style: none;
  padding: 0;
}

.product-item {
  display: flex;
  align-items: center;
  padding: 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-bottom: 16px;
  border: 1px solid transparent;
}
 
 .product-item .flip-inner {
   width: 100%;
 }
 
 .product-item .flip-front {
   display: flex;
   align-items: center;
   width: 100%;
 }
 
 .product-item .flip-back {
   display: none;
 }

.product-item:hover {
  background: var(--surface-alt);
  transform: translateX(10px);
}
 
 .products-section.is-fullscreen .product-item:hover {
   transform: none;
   background: rgba(0, 0, 0, 0.04);
 }
 
 .products-section.is-fullscreen .product-item.active:hover {
   background: var(--primary);
 }

.product-item.active {
  background: var(--primary);
  color: white;
  box-shadow: 0 12px 30px -10px rgba(37, 99, 235, 0.4);
}

.product-item.active .item-desc {
  color: rgba(255,255,255,0.9);
}

.product-item.active .item-icon {
  background: rgba(255,255,255,0.2);
}

.item-icon {
  font-size: 28px;
  margin-right: 20px;
  width: 56px;
  height: 56px;
  background: var(--surface-alt);
  border-radius: 14px;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: all 0.3s ease;
}
 
 .item-icon img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   border-radius: inherit;
 }

.item-info {
  display: flex;
  flex-direction: column;
}

.item-name {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 4px;
}

.item-desc {
  font-size: 14px;
  color: var(--muted);
  transition: color 0.3s ease;
}

/* Vertical Carousel Transformation */
.products-section.is-fullscreen .carousel-container {
  height: 100%;
  width: 100%;
  padding: 0;
  perspective: 1200px;
  display: grid;
  place-items: center end;
}

.products-section.is-fullscreen .carousel-track {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center end;
  /* Remove horizontal logic if needed */
}

/* Override Transforms for Vertical Flow */
.products-section.is-fullscreen .carousel-card {
  /* Smoother transition for morphing */
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bouncy spring */
}

.products-section.is-fullscreen .carousel-card.active {
  transform: translateY(0) scale(1.1) translateZ(0); /* Slightly larger */
  opacity: 1;
  z-index: 10;
  filter: blur(0);
}

/* Up (Prev) */
.products-section.is-fullscreen .carousel-card.prev {
  transform: translateY(-450px) scale(0.9) translateZ(-200px) rotateX(15deg);
  opacity: 0.4;
  z-index: 5;
  filter: blur(10px);
}

/* Down (Next) */
.products-section.is-fullscreen .carousel-card.next {
  transform: translateY(450px) scale(0.9) translateZ(-200px) rotateX(-15deg);
  opacity: 0.4;
  z-index: 5;
  filter: blur(10px);
}

/* Hide Controls in Desktop Fullscreen (Sidebar controls it) */
.products-section.is-fullscreen .carousel-controls,
.products-section.is-fullscreen .carousel-indicators {
  display: none;
}

/* Mobile Adaptation */
@media (max-width: 768px) {
  .products-section.is-fullscreen {
    padding: 0;
  }

  .products-section.is-fullscreen .container {
    padding: 24px;
    padding-top: 28px;
    justify-content: flex-start;
    align-items: stretch;
  }

  /* List Mode (Default Mobile Fullscreen) */
  .products-section.is-fullscreen .product-sidebar {
    display: flex;
    flex-direction: column;
    width: 100%;
    animation: slideInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    padding-bottom: 40px;
    overflow-y: auto;
    justify-content: flex-start; /* Ensure top align */
  }
  
  /* Ensure sidebar header is visible and correct */
  .products-section.is-fullscreen .sidebar-header {
     width: 100%;
     margin-bottom: 24px;
  }
  
  .products-section.is-fullscreen .sidebar-header h3 {
     margin-bottom: 0;
     font-size: 28px;
  }
 
  .products-section.is-fullscreen .fullscreen-close-btn {
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
  }
  
  .products-section.is-fullscreen .product-list {
     display: grid;
     grid-template-columns: repeat(2, 1fr); 
     gap: 12px;
     width: 100%;
     padding: 0 4px;
  }

  /* Transform product-item into a Card on Mobile */
  .products-section.is-fullscreen .product-item {
     background: transparent;
     border: none;
     border-radius: 24px;
     padding: 0;
     box-shadow: none;
     margin: 0;
     aspect-ratio: 3/4 !important;
     perspective: 1200px;
     -webkit-tap-highlight-color: transparent;
     user-select: none;
  }
 
   .products-section.is-fullscreen .product-item:focus,
   .products-section.is-fullscreen .product-item:focus-visible {
     outline: none;
   }

  .products-section.is-fullscreen .product-item .item-icon {
     width: 60px;
     height: 60px;
     margin: 0 0 12px 0;
     border-radius: 16px;
  }

  .products-section.is-fullscreen .product-item .item-name {
     font-size: 16px;
     margin-bottom: 2px;
  }

  .products-section.is-fullscreen .product-item .item-desc {
     font-size: 12px;
     line-height: 1.4;
  }
  
  .products-section.is-fullscreen .product-item.active {
     background: #ffffff;
     color: var(--text);
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); /* Restore default shadow */
     border-color: var(--border); /* Restore default border */
     border-width: 1px;
  }

  .products-section.is-fullscreen .product-item.active .item-desc {
     color: var(--muted);
  }

  .products-section.is-fullscreen .product-item.active .item-icon {
     background: var(--surface-alt);
  }

  @keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  .products-section.is-fullscreen .carousel-container {
    display: none;
  }
  
  .products-section.is-fullscreen .flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
 
  .products-section.is-fullscreen .flip-face {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid var(--border);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: border-radius 0.55s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.55s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
 
  .products-section.is-fullscreen .flip-front {
    transform: rotateY(0deg);
    gap: 10px;
  }
 
  .products-section.is-fullscreen .flip-front .item-info {
    align-items: center;
    text-align: center;
  }
 
  .products-section.is-fullscreen .flip-back {
    display: flex;
    transform: rotateY(180deg);
    padding: 20px 18px;
  }
 
  .products-section.is-fullscreen .flip-back .card-content {
    width: 100%;
    height: 100%;
    padding: 0;
    justify-content: center;
    text-align: center;
    transform: scale(var(--content-scale, 1));
    transform-origin: center;
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 100%;
    overflow: hidden;
  }
 
  .products-section.is-fullscreen.mobile-detail-open::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(18px);
    opacity: 1;
    transition: opacity 0.25s ease;
    z-index: 110;
  }
 
  .products-section.is-fullscreen.mobile-detail-open {
    touch-action: none;
  }
 
  .products-section.is-fullscreen.mobile-detail-open .product-sidebar {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    overflow: hidden;
  }
 
  .products-section.is-fullscreen.mobile-detail-closing::after {
    opacity: 0;
  }
 
  .products-section.is-fullscreen.mobile-detail-closing .product-sidebar {
    opacity: 1;
    transform: scale(1);
    pointer-events: none;
  }
 
  .products-section.is-fullscreen .product-item.is-open {
    position: fixed;
    top: var(--open-top, 50%);
    left: var(--open-left, 50%);
    width: var(--open-w, min(86vw, 380px));
    aspect-ratio: 3/4;
    z-index: 120;
    transform: translate(-50%, -50%);
    transition: top 0.55s cubic-bezier(0.16, 1, 0.3, 1), left 0.55s cubic-bezier(0.16, 1, 0.3, 1), width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: top, left, width;
  }
 
  .products-section.is-fullscreen .product-item.is-open .flip-face {
    border-radius: 28px;
    box-shadow: 0 26px 58px rgba(0, 0, 0, 0.16), 0 10px 22px rgba(0, 0, 0, 0.08);
  }
 
  .products-section.is-fullscreen .product-item.is-open.is-closing .flip-face {
    border-radius: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  }
 
  .products-section.is-fullscreen .product-item.is-open.is-closing .flip-inner {
    transform: rotateY(0deg);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
 
  .products-section.is-fullscreen .product-item.is-open.is-closing .flip-back .card-content {
    transform: scale(1);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }
 
  .products-section.is-fullscreen .product-item.is-open.is-flipped .flip-inner {
    transform: rotateY(180deg);
  }
}