/** Shopify CDN: Minification failed

Line 5704:1 Expected "}" to go with "{"

**/
/*
  Index-driven UI Deduplication — Base Foundation Replacement
  -----------------------------------------------------------
  Purpose:
  Paste-ready CSS for assets/base.css foundation layer.

  Scope:
  - Static design tokens
  - Safe reset
  - Global layout primitives
  - PWA-safe viewport behavior
  - Accessibility / print foundations

  Ownership Rules:
  - theme.liquid owns first paint, Liquid variables, shell background, header z-index, body color/font.
  - base.css owns static design system tokens, reset, layout primitives, and accessibility.
  - section/snippet CSS owns component-specific background, hero, video gate, fixed backdrop, and section-scoped safe areas.

  Do NOT place Liquid selectors such as #shopify-section-{{ section.id }} in this asset file.
*/

/* =========================================================
   Font
   ========================================================= */

@font-face {
  font-family: Inter;
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/cdn/fonts/inter/inter_n4.b2a3f24c19b4de56e8871f609e73ca7f6d2e2bb9.woff2") format("woff2");
}

:root {
  --black: #000000;
  --white: #ffffff;
  --gray-50: #f7f7f5;
  --gray-100: #efefec;
  --gray-200: #e4e4df;
  --gray-300: #d2d2cc;
  --gray-400: #a6a6a0;
  --gray-500: #73736d;
  --gray-600: #5f5f59;
  --gray-700: #3f3f3a;
  --gray-800: #242421;
  --gray-900: #171717;
  --gc-muted: #6b6b66;
  --gc-line: rgba(17, 24, 39, .10);
  --gc-line-strong: rgba(17, 24, 39, .18);
  --gc-panel: rgba(255, 255, 255, .88);
  --gray-900-hover: #05070b;
  --gc-radius-xl: 28px;   /* 統一，原三個文件分別是 24/28/30px */
  --gc-radius-lg: 20px;
  --gc-radius-md: 14px;
  --gc-shadow: 0 20px 64px rgba(15, 23, 42, .08);
  --gc-shadow-soft: 0 10px 30px rgba(15, 23, 42, .06);
  --gc-focus: 0 0 0 3px rgba(17, 24, 39, .10);

  /* =========================================================
     Brand / Status Colors
     ========================================================= */

  --brand-primary: var(--color-brand-primary, #171717);
  --brand-primary-strong: var(--color-brand-primary-strong, #0f0f0f);
  --brand-primary-dark: #050505;

  --status-success: #2f9e44;
  --status-warning: #b7791f;
  --status-gold: #b08900;
  --status-danger: #b42318;

  --brand-accent-green: var(--status-success);
  --brand-accent-orange: var(--status-warning);
  --brand-accent-gold: var(--status-gold);


  /* =========================================================
     Semantic Text
     ========================================================= */
  --text-tertiary: #8a8a84;
  --text-hero-sub: rgba(23, 23, 23, 0.62);
  --hero-sub: var(--text-hero-sub);

  /* =========================================================
     Background / Surface Tokens
     These are tokens only. Do not use them to force body background here.
     ========================================================= */
  --bg-tertiary: #fbfbf9;
  --bg-active: rgba(0, 0, 0, 0.045);

   /* =========================================================
     GLG / LittleG Workspace Tokens
     Component CSS may consume these tokens.
     ========================================================= */
--glg-workspace-text: rgba(23, 23, 23, 0.96);
--glg-workspace-muted: rgba(23, 23, 23, 0.64);
--glg-workspace-soft: rgba(23, 23, 23, 0.48);
--glg-workspace-faint: rgba(23, 23, 23, 0.28);
/* Dark cinematic base for 4K city-model background */
--glg-workspace-bg-2: #f0f0ed;

/* Glass HUD panels */
--glg-workspace-panel: rgba(255, 255, 255, 0.62);
--glg-workspace-panel-soft: rgba(255, 255, 255, 0.46);
--glg-workspace-panel-strong: rgba(255, 255, 255, 0.78);

/* Glass borders */
--glg-workspace-line: rgba(0, 0, 0, 0.08);
--glg-workspace-line-soft: rgba(0, 0, 0, 0.055);
--glg-workspace-line-strong: rgba(0, 0, 0, 0.13);

/* Background readability overlays */
--glg-workspace-bg-dim: rgba(247, 247, 245, 0.48);
--glg-workspace-bg-dim-strong: rgba(247, 247, 245, 0.68);
--glg-workspace-bg-glow: rgba(0, 0, 0, 0.028);

/* Accent system */
--glg-workspace-accent-strong: #050505;
--glg-workspace-accent-soft: rgba(0, 0, 0, 0.055);
--glg-workspace-accent-line: rgba(0, 0, 0, 0.12);
--glg-workspace-danger: #b42318;

/* Radius */
--glg-workspace-radius-sm: 14px;
--glg-workspace-radius: 22px;
--glg-workspace-radius-lg: 28px;
--glg-workspace-radius-xl: 34px;
--glg-workspace-radius-pill: 999px;

/* Shadows tuned for dark 4K background */
--glg-workspace-shadow:
  0 14px 44px rgba(0, 0, 0, 0.085), inset 0 1px 0 rgba(255, 255, 255, 0.72);

--glg-workspace-shadow-soft:
  0 8px 28px rgba(0, 0, 0, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.66);

--glg-workspace-shadow-strong:
  0 20px 64px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.78);

/* Glass blur */
--glg-workspace-blur: blur(14px) saturate(116%);
--glg-workspace-blur-strong: blur(18px) saturate(124%);

/* Layout shell */
--glg-workspace-header-offset: calc(var(--header-height, 52px) + 12px);
--glg-workspace-appbar-height: 58px;
--glg-workspace-max-width: 1200px;
--glg-workspace-content-width: 760px;

--glg-workspace-sidebar-collapsed: 56px;
--glg-workspace-sidebar-expanded: 260px;

--glg-workspace-ease: var(--ease-apple, cubic-bezier(0.16, 1, 0.3, 1));
--glg-workspace-transition: 220ms var(--glg-workspace-ease);
  /* =========================================================
     Material / Glass Surface
     ========================================================= */
  --surface-glass: rgba(255, 255, 255, 0.62);
  --surface-glass-strong: rgba(255, 255, 255, 0.78);
  --surface-glass-hover: rgba(255, 255, 255, 0.86);

  --glass-blur: blur(14px) saturate(116%);
  --glass-border: 1px solid rgba(0, 0, 0, 0.08);
  --glass-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.66);

  --glass-bg-light: var(--surface-glass-strong);
  --glass-bg-2: rgba(247, 247, 245, 0.56);
  --glass-hover-light: var(--surface-glass-hover);
  --glass-hover: rgba(0, 0, 0, 0.045);
  --glass-active-light: rgba(240, 240, 237, 0.86);
  --glass-shadow: var(--shadow-sm);
  --glass-navy: rgba(0, 0, 0, 0.02);

  /* =========================================================
     Nav / Header Visual Tokens
     Header structural height and z-index remain owned by theme.liquid.
     ========================================================= */
  --nav-bg-dark: rgba(247, 247, 245, 0.84);
  --nav-blur: 18px;
  --nav-accent: rgb(var(--color-button, 23, 23, 23));
  --nav-hover-bg: rgba(0, 0, 0, 0.045);
  --nav-border: rgba(0, 0, 0, 0.08);

  --overlay-bg: rgba(0, 0, 0, 0.18);

  --header-height-mobile: 48px;
  --header-bg: rgba(247, 247, 245, 0.82);
  --header-bg-scrolled: rgba(247, 247, 245, 0.92);
  --header-bg-scrolled-strong: rgba(247, 247, 245, 0.98);
  --header-bg-transparent: rgba(247, 247, 245, 0.64);
  --header-border: rgba(0, 0, 0, 0.075);
  --header-border-transparent: var(--color-header-border-transparent, rgba(0, 0, 0, 0.07));
  --header-logo-height: 24px;
  --header-logo-height-mobile: 22px;
  --header-logo-width: auto;
  --header-transition: var(--transition-normal, 240ms var(--ease-apple));
  --header-height: 52px;

  /* Header layer contract — source of truth */
  --header-z-index: 1200;
  --header-overlay-z-index: 1190;
  --z-header-dropdown : 1210;
  --header-drawer-z-index: 1220;
  /* =========================================================
     Z-Index Scale
     Header z-index variables should be declared in theme.liquid.
     ========================================================= */

  --z-dropdown-l1: 100;
  --z-sticky-nav: 200;
  --z-sidebar: 2000;
  --z-cookie-banner: 3000;
  --z-chat-loader: 3100;
  --z-notification: 9000;
  --z-overlay: 10001;
  --z-pwa-prompt: 9990;
  --z-modal-backdrop: 10100;
  --z-modal: 10101;
  /* Showcase / Workspace z-index */
  --z-showcase-background: -4;
  --z-showcase-overlay: -3;
  --z-showcase-frame: 0;
  --z-showcase-hotspot: 5;
  --z-showcase-hud: 8;
  --z-showcase-dock: 9;
  --z-workspace-drawer: 1300;

  /* Dark interactive fields */
  --field-bg-dark: rgba(255, 255, 255, 0.92);
  --field-border-dark: rgba(0, 0, 0, 0.08);
  --field-text-dark: rgba(23, 23, 23, 0.96);
  --field-placeholder-dark: rgba(23, 23, 23, 0.42);

  --z-header: 1200;
    --z-mobile-overlay: var(--z-mobile-overlay, 1190);

  /* =========================================================
     Layout / Containers
     ========================================================= */

  --container-narrow: 680px;
  --container-readable: 760px;
  --container-standard: 1120px;
  --container-wide: 1360px;

  --container-padding: clamp(16px, 3vw, 32px);
  --container-padding-mobile: clamp(12px, 3vw, 16px);
  --container-padding-desktop: 36px;

  --space-xs: clamp(8px, 1vw, 10px);
  --space-sm: clamp(12px, 1.4vw, 14px);
  --space-md: clamp(18px, 2vw, 22px);
  --space-lg: clamp(28px, 3.2vw, 36px);
  --space-xl: clamp(40px, 4.8vw, 56px);
  --space-2xl: clamp(56px, 7vw, 80px);
  --space-3xl: clamp(72px, 9vw, 112px);
  --space-container: clamp(18px, 4vw, 40px);

  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --spacing-2xl: var(--space-2xl);
  --spacing-3xl: var(--space-3xl);
  --spacing-container: var(--space-container);

  --spacing: var(--space-md);
  --hero-gap: clamp(14px, 2vw, 22px);

  --max-width: var(--container-standard);
  --container-lg: 1024px;
  --hero-max: 760px;
  --lg-max: 960px;

  --spacing-xs-mobile: 10px;
  --spacing-sm-mobile: 14px;
  --spacing-md-mobile: 18px;

  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.75rem;
  --spacing-8: 2.5rem;

   /* =========================================================
     Compatibility / Bridge Tokens
     ========================================================= */

  --card-image-padding: var(--product-card-image-padding, 0px);
  --card-text-alignment: var(--product-card-text-alignment, left);
  --card-border-opacity: var(--product-card-border-opacity, 0.1);
  --card-shadow-visible: var(--product-card-shadow-visible, 1);
  --card-shadow-vertical-offset: 4px;

  --accent: var(--brand-primary);
  --accent-light: rgba(0, 0, 0, 0.055);
  --platform-shell-ink-rgb: 29, 29, 31;

  --image-padding: 0px;
  --announcement-translate-from: -1.5rem;

  /* =========================================================
     Blur Helpers
     ========================================================= */

  --blur: var(--glass-blur);
  --blur-sm: 8px;
  --blur-lg: 28px;
  --blur-xl: 40px;


  /* =========================================================
     Sub-brand Tokens: LittleG Lab
     ========================================================= */

  --geo-mountain: #625c4f;

  --littleg-border: rgba(0, 0, 0, 0.08);
  --littleg-bg: rgba(255, 255, 255, 0.72);

  --lg-bg: rgba(255, 255, 255, 0.72);
  --lg-border: rgba(0, 0, 0, 0.08);
  --lg-border-2: rgba(0, 0, 0, 0.11);
  --lg-text: rgba(23, 23, 23, 0.96);
  --lg-subtext: rgba(23, 23, 23, 0.66);
  --lg-muted: rgba(23, 23, 23, 0.52);
  --lg-shadow: 0 14px 44px rgba(0, 0, 0, 0.08);
  --lg-radius-lg: 28px;
  --lg-text-secondary: var(--lg-subtext);
  --lg-glass-blur: blur(18px) saturate(120%);
  --lg-section-pad-y: clamp(56px, 6vw, 88px);
  --lg-gap: clamp(14px, 1.8vw, 22px);

  --littleg-pink: #f4e6ea;
  --littleg-yellow: #f5efd5;
  --littleg-character: #3f3f3a;
  --littleg-leaf: #dfe9dd;
  --littleg-grass: #e5ecdf;
  --littleg-wood: #c4b89c;
  --littleg-gold: #d8c27d;
  --littleg-accent-pink: #f2e3e8;
  --littleg-accent-blue: #e3e8ee;
  --littleg-accent-green: #e3ece2;
  --littleg-accent-peach: #f1e4d4;
  --littleg-accent-blue-dark: #3f4b5a;

  /* =========================================================
     Border System
     ========================================================= */

  --border-default: rgba(0, 0, 0, 0.08);
  --border-subtle: rgba(0, 0, 0, 0.055);
  --border-focus: rgba(23, 23, 23, 0.36);
  --border-width: 1px;
  --border-offset: 0.25px;

  --color-border: var(--border-default);
  --card-border: rgba(0, 0, 0, 0.075);
  --hero-border: rgba(0, 0, 0, 0.06);

  /* =========================================================
     Shadow System
     ========================================================= */

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.025);
  --shadow-md:
    0 4px 16px rgba(0, 0, 0, 0.045), 0 1px 4px rgba(0, 0, 0, 0.025);
  --shadow-lg:
    0 10px 28px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.025);
  --shadow-xl:
    0 18px 48px rgba(0, 0, 0, 0.075), 0 4px 14px rgba(0, 0, 0, 0.025);
  --shadow-2xl: 0 24px 64px rgba(0, 0, 0, 0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.78);

  --card-shadow: var(--shadow-md);
  --card-shadow-hover: var(--shadow-lg);
  --hero-shadow: var(--shadow-xl);
  --shadow-pillar: var(--shadow-xl);
  --shadow-glass: var(--shadow-md);
  --shadow-glass-hover: var(--shadow-lg);
  --shadow-float: var(--shadow-xl);
  --shadow-lg-dark: 0 18px 48px rgba(0, 0, 0, 0.14);
  --platform-shadow: var(--shadow-sm);
  --platform-hover-shadow: var(--shadow-lg);
  --hero-focus: 0 0 0 4px rgba(23, 23, 23, 0.08);
  --shadow-glow: 0 0 0 rgba(0, 0, 0, 0);
  --shadow-card: var(--shadow-md);

  /* =========================================================
     Radius
     ========================================================= */

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-2xl: 34px;
  --radius-full: 999px;
  /* =========================================================
     Legacy Color / Gradient Tokens
     ========================================================= */

  --gradient-primary: var(--brand-primary);
  --gradient-hero: var(--brand-primary);
  --heading-gradient: var(--text-primary);

  --error: var(--status-danger);
  --slogan-bg: rgba(0, 0, 0, 0.045);
  --slogan-glass-bg: rgba(255, 255, 255, 0.76);
  --slogan-glass-border: rgba(0, 0, 0, 0.08);
  --slogan-blur: 18px;

  /* =========================================================
     Motion
     ========================================================= */

  --ease-apple: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.4, 0.64, 1);

  --duration-fast: 160ms;
  --duration-base: 220ms;
  --duration-normal: 240ms;
      --duration-slow: 420ms;
  --duration-slower: 560ms;
  --reveal-delay: 60ms;

  --transition-normal: var(--duration-normal) var(--ease-apple);
  --transition-fast: var(--duration-fast) var(--ease-apple);
  --transition-slow: var(--duration-slow) var(--ease-apple);

  --duration-short: 90ms;
  --duration-default: 180ms;
  --duration: var(--duration-normal);
  --duration-long: var(--duration-slow);
  --slow-duration: var(--duration-slow);

  /* =========================================================
     Grid / Content Metrics
     ========================================================= */

  --columns: 1;
  --gutter-width: 12px;
  --gutter-half-width: 6px;
  --gutter-and-half-width: 18px;
  --content-height: 600px;

  --safe-area-inset-lt: env(safe-area-inset-left, 0px);
  --safe-area-inset-rt: env(safe-area-inset-right, 0px);

  /* =========================================================
     Typography
     ========================================================= */

  --font-heading: var(
    --font-heading-family,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Helvetica Neue",
    "PingFang TC",
    "Microsoft JhengHei",
    sans-serif
  );

  --font-body: var(
    --font-body-family,
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif
  );

  --font-main: var(--font-body);
  --font-display: var(--font-heading);
  --font-mono: "SF Pro Mono", "Menlo", monospace;

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 0.96875rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.1875rem;
  --font-size-2xl: 1.375rem;
  --font-size-3xl: 1.75rem;
  --font-size-4xl: 2.125rem;
  --text-5xl: 2.75rem;

  --line-height-tight: 1.18;
  --line-height-normal: 1.56;
  --line-height-relaxed: 1.68;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 580;
  --font-weight-bold: 650;
  --font-weight-extrabold: 700;

  /* =========================================================
     Typography Spacing
     ========================================================= */

  --default-stacked-margin: 0.36em;
  --paragraph-plus-element-margin: 0.75em;
  --headline-plus-first-element-margin: 0.72em;
  --headline-plus-headline-margin: 0.36em;
  --paragraph-plus-headline-margin: 1.45em;

  /* =========================================================
     Responsive Text
     ========================================================= */

  --text-responsive-xs: clamp(0.72rem, 0.9vw, 0.75rem);
  --text-responsive-sm: clamp(0.82rem, 1vw, 0.875rem);
  --text-responsive-base: clamp(0.92rem, 1.1vw, 0.96875rem);
  --text-responsive-lg: clamp(1rem, 1.35vw, 1.0625rem);
  --text-responsive-xl: clamp(1.08rem, 1.6vw, 1.1875rem);
  --text-responsive-2xl: clamp(1.25rem, 2vw, 1.375rem);
  --text-responsive-3xl: clamp(1.5rem, 2.6vw, 1.75rem);
  --text-responsive-4xl: clamp(1.85rem, 3.2vw, 2.125rem);
  --text-responsive-5xl: clamp(2.15rem, 4.4vw, 2.75rem);

 /* =========================================================
     Form Fields
     ========================================================= */

  --field-pad-y: 11px;
  --field-pad-x: 14px;
  --field-bg: rgba(255, 255, 255, 0.94);
  --field-text: var(--text-primary);
  --field-ring: 0 0 0 4px rgba(23, 23, 23, 0.14);
  --field-shadow: var(--shadow-sm);

    /* =========================================================
     Buttons
     ========================================================= */

  --btn-pad-y: 10px;
  --btn-pad-x: 16px;
  --btn-font: 500;
  --btn-font-size: 0.9375rem;
  --btn-ring: 0 0 0 4px rgba(23, 23, 23, 0.16);
  --btn-shadow: none;
  --btn-shadow-hover: var(--shadow-sm);
  --btn-bg: var(--text-primary);
  --btn-bg-hover: #0f0f0f;
 /* =========================================================
     Focus / Links
     ========================================================= */

  --focus-color: rgb(var(--color-button, 23, 23, 23));
  --focus-offset: 3px;
  --focus-outline: 2px solid rgba(var(--color-button, 23, 23, 23), 0.36);
  --focus-outline-offset: 0.2rem;
  --focus-shadow: 0 0 0 4px rgba(var(--color-button, 23, 23, 23), 0.12);

  --focused-base-outline: var(--focus-outline);
  --focused-base-outline-offset: var(--focus-outline-offset);
  --link-hover-color: var(--text-primary);
  --link-visited-color: var(--text-primary);
  --footer-link-hover: var(--text-primary);

  /* =========================================================
     Breakpoints
     ========================================================= */

  --breakpoint-sm: 734px;
  --breakpoint-md: 1068px;
  --breakpoint-lg: 1440px;
  --breakpoint-xl: 1920px;
  --breakpoint-2xl: 2560px;

  /* =========================================================
     Alpha Helpers
     ========================================================= */

  --alpha-button-background: 1;
  --alpha-button-border: 1;
  --alpha-link: 0.78;
  --alpha-badge-border: 0.08;

  /* =========================================================
     Legacy / Module-specific Tokens
     Keep for backward compatibility only.
     ========================================================= */

  --rics-blue: #003087;
  --rics-gold: #d4af37;
  --dark-bg-2: #242421;
  --divider-color: rgba(0, 0, 0, 0.08);
  --color-primary: 23, 23, 23;
  --color-accent: 107, 107, 102;
  --drg-avatar-url: url("/cdn/shop/files/LittleG.png?v=1759053513");
  /* =========================================================
     Legacy Media Gallery Tokens
     ========================================================= */

  --media-gallery-tile-gap: 20px;
  --media-gallery-slide-duration: 620ms;
  --media-gallery-bottom-copy-duration: 420ms;
  --media-gallery-tile-width: 672px;
  --media-gallery-tile-height: 360px;
  --media-gallery-headline-margin-bottom: 14px;
  --media-gallery-bottom-content-padding-left: 32px;
  --media-gallery-bottom-content-padding-bottom: 28px;
  --media-gallery-bottom-content-padding-right: 32px;

  /* =========================================================
     Legacy FAQ Search Tokens
     ========================================================= */

  --faq-search-placeholder-light: rgba(23, 23, 23, 0.42);
  --faq-search-placeholder-dark: rgba(247, 247, 245, 0.46);
  --faq-search-focus-shadow-light: 0 0 0 4px rgba(23, 23, 23, 0.12);
  --faq-search-focus-shadow-dark:
    0 0 0 3px rgba(247, 247, 245, 0.14), inset 0 0 0 1px rgba(247, 247, 245, 0.18);
  --faq-search-border-dark: rgba(247, 247, 245, 0.14);
}
/* =========================================================
   Safe Reset
   Do not use global margin/padding reset. It is too aggressive for Shopify.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  font-size: 16px;
}

body {
  min-width: 320px;
  min-height: 100%;
  padding: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-normal, 1.5);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* =========================================================
   Safe Reset
   Do not use global margin/padding reset. It is too aggressive for Shopify.
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-height: 100%;
  overflow-x: clip;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-x: none;
  font-size: 16px;
}

body {
  min-width: 320px;
  min-height: 100%;
  padding: 0;
  overflow-x: clip;
  overscroll-behavior-x: none;
  font-size: var(--font-size-base, 1rem);
  line-height: var(--line-height-normal, 1.5);
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Keep theme.liquid as owner of:
   - body margin
   - body background
   - body color
   - body font-family
   - html background
   - scroll-behavior if already declared there
*/
/* =========================================================
   PWA / Mobile Viewport Behavior
   ========================================================= */

@supports (-webkit-overflow-scrolling: touch) {
  body {
    -webkit-overflow-scrolling: touch;
  }
}

html.is-pwa-standalone,
html.is-standalone {
  min-height: 100%;
}

html.is-ios,
html.is-ios body {
  min-height: 100%;
}

html.is-ios body {
  -webkit-overflow-scrolling: touch;
}

html.prefers-reduced-motion,
html.prefers-reduced-motion *,
html.prefers-reduced-motion *::before,
html.prefers-reduced-motion *::after {
  scroll-behavior: auto !important;
}

/* =========================================================
   Global Layout Shells
   ========================================================= */

main,
.main-content,
.shopify-section {
  width: 100%;
  overflow-x: hidden;
}

main,
.main-content {
  position: relative;
  z-index: 1;
}

.page-width,
.container,
.section__inner {
  width: 100%;
  max-width: var(--page-width, var(--container-standard, 1200px));
  margin-inline: auto;
  padding-inline: var(--container-padding, clamp(16px, 4vw, 40px));
}


@media screen and (max-width: 767px) {
  body {
    line-height: 1.58;
  }

  .page-width,
  .container,
  .section__inner {
    padding-inline: var(--container-padding-mobile, clamp(12px, 3vw, 20px));
  }

  .immersive,
  .dashboard-fullscreen {
    padding: 0.5rem;
  }
}

@media screen and (max-height: 500px) and (orientation: landscape) {
  body {
    min-height: auto;
  }

  .immersive {
    height: 100%;
    overflow-y: auto;
  }
}
/* =========================================================
   Low-data / Static Fallback Hooks
   These classes intentionally do not define body pseudo backgrounds.
   They only provide hooks for component CSS to respond.
   ========================================================= */

html.glg-static-fallback *,
html.prefers-low-data *,
html.prefers-low-power * {
  animation-duration: 0.01ms !important;
}
/* =========================================================
   Canonical Card Primitive
   Shared base only. Component internals stay in sections/components.
   ========================================================= */
/* ─── SERVICE CARD — GLG Light / OpenAI Style ─── */
.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--glg-workspace-line);
  border-radius: var(--gc-radius-xl);
  box-shadow: var(--gc-shadow-soft);
  transition:
    transform 220ms var(--glg-workspace-ease),
    box-shadow 220ms var(--glg-workspace-ease),
    border-color 220ms var(--glg-workspace-ease);
}

.service-card:hover {
  transform: translateY(-2px);
  border-color: var(--glg-workspace-line-strong);
  box-shadow: var(--gc-shadow);
}

.ui-card:focus-visible,
.service-card:focus-visible {
  outline: none;
  box-shadow: var(--gc-focus);
}

/* =========================================================
   Glass Card Primitive
   Material-only shell. Keep component internals outside foundation.
   ========================================================= */
/* ─── GLASS CARD — GLG Light Style v2 ─── */
.glass-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(24px, 3.2vw, 36px);
  background: var(--glg-workspace-panel-strong);        /* rgba(255,255,255,0.88) */
  border: var(--glass-border);                          /* 1px solid rgba(0,0,0,0.08) */
  border-radius: var(--gc-radius-xl);                   /* 28px */
  backdrop-filter: var(--glass-blur);                   /* blur(18px) saturate(120%) */
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    var(--gc-shadow-soft),                              /* 0 10px 30px rgba(15,23,42,.06) */
    var(--glass-inset-highlight);                       /* inset 0 1px 0 rgba(255,255,255,0.82) */
  transition:
    transform 220ms var(--glg-workspace-ease),
    box-shadow 220ms var(--glg-workspace-ease),
    border-color 220ms var(--glg-workspace-ease);
}

.glass-card:hover {
  transform: translateY(-2px);
  border-color: var(--glg-workspace-line-strong);       /* rgba(0,0,0,0.13) */
  box-shadow:
    var(--gc-shadow),                                   /* 0 20px 64px rgba(15,23,42,.08) */
    var(--glass-inset-highlight);
}

.glass-card:focus-visible {
  outline: none;
  box-shadow:
    var(--gc-focus),                                    /* 0 0 0 3px rgba(17,24,39,.10) */
    var(--glass-inset-highlight);
}

.glass-card.clickable {
  cursor: pointer;
}

/* selected 狀態：去掉藍色，改用黑色系 */
.glass-card.selected {
  border-color: var(--glg-workspace-line-strong);       /* rgba(0,0,0,0.13) */
  box-shadow:
    var(--gc-shadow),
    var(--gc-focus),                                    /* 0 0 0 3px rgba(17,24,39,.10) */
    var(--glass-inset-highlight);
}

/* lg variant — 統一用 gc-radius-xl */
.glass-card-lg {
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--glg-workspace-radius-xl);        /* 34px，比 gc-radius-xl 大一級 */
}

/* sm / lg utility variants */
.glass-sm {
  background: var(--surface-glass);                     /* rgba(255,255,255,0.72) */
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: var(--gc-radius-md);                   /* 14px */
  border: var(--glass-border);
}

.glass-lg {
  background: var(--surface-glass);
  backdrop-filter: var(--glg-workspace-blur-strong);    /* blur(22px) saturate(130%) */
  -webkit-backdrop-filter: var(--glg-workspace-blur-strong);
  border-radius: var(--glg-workspace-radius-xl);        /* 34px */
  border: var(--glass-border);
  box-shadow: var(--glg-workspace-shadow-strong);       /* 0 20px 64px rgba(0,0,0,0.12)... */
}
   
/* ============================================
   SHARE BUTTON — Apple-grade canonical version
   base.css safe / component-level
   ============================================ */
/* ─── SHARE BUTTON — GLG Light Style v2 ─── */
.share-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--glg-workspace-line);          /* rgba(0,0,0,0.08) */
  border-radius: var(--glg-workspace-radius-pill);      /* 999px */
  background: var(--glg-workspace-panel-strong);        /* rgba(255,255,255,0.88) */
  color: var(--text-primary);
  box-shadow: var(--gc-shadow-soft);                    /* 0 10px 30px rgba(15,23,42,.06) */
  transition:
    transform 220ms var(--glg-workspace-ease),
    box-shadow 220ms var(--glg-workspace-ease),
    border-color 220ms var(--glg-workspace-ease),
    background-color 220ms var(--glg-workspace-ease);
}

.share-button:hover {
  transform: translateY(0);                             /* 保留原設計：無位移 */
  border-color: var(--glg-workspace-line-strong);       /* rgba(0,0,0,0.13) */
  background: var(--surface-glass-hover);               /* rgba(255,255,255,0.94) */
  box-shadow: var(--gc-shadow);                         /* 0 20px 64px rgba(15,23,42,.08) */
}

.share-button:focus-within {
  outline: none;
  box-shadow: var(--gc-focus);                          /* 0 0 0 3px rgba(17,24,39,.10) */
}

.share-button details { width: fit-content; }

.share-button__button {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: 1rem;
  color: var(--text-primary);
  margin-left: 0;
  padding-left: 0;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition:
    color 220ms var(--glg-workspace-ease),
    transform 220ms var(--glg-workspace-ease);
}

.share-button__button:hover { transform: translateX(1px); }

/* icon sizing — 保留不變 */
.share-button__button .icon,
.share-button__button .svg-wrapper,
.share-button__fallback .icon,
.share-button__fallback .svg-wrapper {
  height: 1.25rem; width: 1.25rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.share-button__button .icon,
.share-button__button .svg-wrapper {
  min-width: 1.25rem; margin-right: 0.75rem;
}
.share-button__button .icon svg,
.share-button__button .svg-wrapper svg,
.share-button__fallback .icon svg,
.share-button__fallback .svg-wrapper svg {
  width: 100%; height: 100%;
}

details[open] > .share-button__fallback {
  animation: animateMenuOpen 200ms var(--glg-workspace-ease); /* 替換 --duration-default */
}

.share-button__fallback {
  display: flex;
  align-items: center;
  position: absolute;
  top: calc(100% + 12px);
  left: var(--share-fallback-left, 0);
  right: var(--share-fallback-right, auto);
  z-index: 10;
  width: var(--share-fallback-width, 100%);
  margin: var(--share-fallback-margin, 0);
  min-width: max-content;
  border-radius: var(--gc-radius-md);                   /* 14px，統一 token */
  background: var(--gc-panel);                          /* rgba(255,255,255,.94) */
  border: var(--glass-border);                          /* 1px solid rgba(0,0,0,0.08) */
  box-shadow: var(--gc-shadow);                         /* 0 20px 64px rgba(15,23,42,.08) */
}

.share-button__fallback button {
  width: var(--share-fallback-button-size, auto);
  height: var(--share-fallback-button-size, auto);
  transition:
    color 200ms var(--glg-workspace-ease),
    background 200ms var(--glg-workspace-ease),
    transform 200ms var(--glg-workspace-ease);
}

.share-button__fallback button:hover {
  background: var(--bg-active);                         /* rgba(0,0,0,0.045) */
}

.share-button__fallback button:active { transform: scale(0.98); }

.share-button__fallback button:focus-visible {
  outline: none;
  box-shadow: var(--gc-focus);
  border-radius: var(--gc-radius-md);                   /* 14px */
}

/* 其餘 .share-button__close / __copy / __message / __fallback .field 保留不變 */
.share-button__close:not(.hidden) + .share-button__copy { display: none; }
.share-button__close,
.share-button__copy { background-color: transparent; color: var(--text-primary); }

.share-button__copy:focus-visible,
.share-button__close:focus-visible,
.share-button__copy:focus,
.share-button__close:focus {
  background-color: var(--bg-active);                   /* rgba(0,0,0,0.045) */
  box-shadow: var(--gc-focus);
  outline: none;
  z-index: 2;
}

.share-button__message:not(:empty) {
  display: flex; align-items: center;
  width: 100%; height: 100%;
  margin: 0 var(--inputs-border-width, 1px);
  padding: 0.8rem 0 0.8rem 1.5rem;
  color: var(--text-primary);
  font-weight: 600;
  animation: fadeIn 220ms var(--glg-workspace-ease);   /* 替換 --duration */
}
.share-button__message:not(:empty):not(.hidden) ~ * { display: none; }

/* ─── MEDIA — 分拆 gproperty 到獨立 block ─── */
@media screen and (max-width: 749px) {
  :root {
    --share-fallback-left: 0;
    --share-fallback-right: 0;
    --share-fallback-width: calc(100% - 2rem);
    --share-fallback-margin: 0 1rem;
    --share-fallback-button-size: 5rem;
  }
}

/* ⚠️ 建議移至 gproperty 專屬 CSS 文件 */
@media screen and (max-width: 749px) {
  .gproperty-grid { grid-template-columns: 1fr; }
  .gproperty-wrap { padding: 0 16px 40px; }
}


/* =========================================================
   CTA Button Primitive
   Global action buttons only. Section-level CTA panels stay outside foundation.
   ========================================================= */
/* ─── CTA BUTTONS — GLG Light Style v2 ─── */
.cta-button,
.cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 22px;
  border-radius: var(--glg-workspace-radius-pill);      /* 999px */
  text-decoration: none;
  font-size: var(--btn-font-size, 0.95rem);
  font-weight: var(--btn-font, 600);
  line-height: 1;
  letter-spacing: -0.01em;
  transition:
    transform 180ms var(--glg-workspace-ease),
    box-shadow 180ms var(--glg-workspace-ease),
    border-color 180ms var(--glg-workspace-ease),
    background-color 180ms var(--glg-workspace-ease),
    color 180ms var(--glg-workspace-ease);
}

/* ── Primary ── */
.cta-button {
  border: 1px solid var(--glg-workspace-line);          /* rgba(0,0,0,0.08) */
  background: var(--btn-bg, var(--brand-primary));      /* #171717 */
  color: var(--white);
  box-shadow: var(--gc-shadow-soft);                    /* 0 10px 30px rgba(15,23,42,.06) */
}

.cta-button:hover {
  transform: translateY(-1px);
  border-color: var(--glg-workspace-line-strong);       /* rgba(0,0,0,0.13) */
  background: var(--btn-bg-hover, var(--gray-900-hover)); /* #05070b */
  box-shadow: var(--gc-shadow);                         /* 0 20px 64px rgba(15,23,42,.08) */
}

.cta-button:active {
  transform: translateY(0);
  box-shadow: var(--gc-shadow-soft);
}

.cta-button:focus-visible {
  outline: none;
  box-shadow:
    var(--gc-shadow-soft),
    var(--gc-focus);                                    /* 0 0 0 3px rgba(17,24,39,.10) */
}

.cta-button .cta-icon {
  font-size: 1.1rem;
  line-height: 1;
}

/* ── Secondary ── 去掉藍色，改純灰系 */
.cta-secondary {
  border: 1px solid var(--glg-workspace-line-strong);   /* rgba(0,0,0,0.13) */
  background: var(--glg-workspace-panel-strong);        /* rgba(255,255,255,0.88) */
  color: var(--brand-primary);                          /* #171717 */
  box-shadow: none;
}

.cta-secondary:hover {
  transform: translateY(0);
  border-color: var(--gc-line-strong);                  /* rgba(17,24,39,.18) */
  background: var(--surface-glass-hover);               /* rgba(255,255,255,0.94) */
  box-shadow: var(--gc-shadow-soft);
}

.cta-secondary:focus-visible {
  outline: none;
  box-shadow: var(--gc-focus);                          /* 0 0 0 3px rgba(17,24,39,.10) */
}

/* =========================================================
   CTA Section System
   Component-level. Do not place in base.css foundation.
   ========================================================= */

.cta-section,
.cta {
  margin-top: clamp(60px, 12vw, 100px);
  padding: clamp(48px, 8vw, 72px) clamp(20px, 4vw, 32px);
  text-align: center;
  background:
    linear-gradient(180deg, var(--bg-tertiary, #fbfbfd) 0%, var(--white) 100%);
  border: 1px solid var(--glg-workspace-line);

  border-radius: var(--radius-xl, 36px);
  box-shadow: var(--shadow-md);
}

.cta-section p,
.cta p {
  max-width: 620px;
  margin: 0 auto var(--space-lg, 40px);
  color: var(--gc-muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.65;
}

.cta-buttons,
.all-services-cta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm, 16px);
  flex-wrap: wrap;
  margin-top: var(--space-lg, 40px);
}



.lg-caseCard__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--gc-radius-xl);
  transition: transform 220ms var(--glg-workspace-ease);
}


.case-content h3 {
  margin: 0 0 12px;
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
}
/* ============================================
   FORM SYSTEM — Apple-grade canonical version
   base.css safe / global fields layer
   ============================================ */

.form-container,
form {
  padding: var(--spacing-md);
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* unified field targets */
.search-box,
.route-input,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.input,
.select,
[class*="Input"],
[class*="Select"],
.field__input,
.text-area {
  width: 100%;
  margin-bottom: 0.5rem;
  padding: var(--field-pad-y) var(--field-pad-x);
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: rgba(255, 255, 255, 0.96);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.35;
  box-shadow: none;
  outline: none;
  transition:
    border-color 220ms var(--ease-apple),
    box-shadow 220ms var(--ease-apple),
    background-color 220ms var(--ease-apple);
}

.search-box:hover,
.route-input:hover,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover,
select:hover,
textarea:hover,
.input:hover,
.select:hover,
[class*="Input"]:hover,
[class*="Select"]:hover,
.field__input:hover,
.text-area:hover {
  border-color: rgba(15, 23, 42, 0.16);
}

.search-box:focus,
.route-input:focus,
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
[class*="Input"]:focus,
[class*="Select"]:focus,
.field__input:focus,
.text-area:focus {
  border-color: rgba(0, 122, 255, 0.5);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.12);
  background: #ffffff;
}

input:disabled,
select:disabled,
textarea:disabled,
.field__input:disabled,
.text-area:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}


.field__input::placeholder,
.text-area::placeholder {
  color: #8e8e93;
}

.field__label {
  display: none;
}

/* ============================================
   Layout modes
   ============================================ */
[data-layout="normal"] .container,
[data-layout="normal"] .page-width {
  width: 100%;
  max-width: min(1600px, calc(100vw - (var(--container-padding, 40px) * 2)));
  margin-inline: auto;
}

[data-layout="immersive"] .container,
[data-layout="immersive"] .page-width {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

body[data-layout="immersive"] {
  overflow: clip;
}

/* ============================================
   Wide-screen refinement
   ============================================ */
@media (min-width: 2560px) {
  .container,
  .page-width {
    max-width: 1920px;
  }
}

/* ============================================
   Portrait fullscreen media
   ============================================ */
@media (orientation: portrait) {
  .game-canvas--fullscreen {
    object-fit: cover;
  }
}

/* ============================================
   Performance hints
   ============================================ */
.container,
.page-width,
.immersive {
  contain: layout;
}

.immersive,
.game-canvas,
.video-player--fullscreen {
  will-change: transform;
  transform: translateZ(0);
}

.animation-complete {
  will-change: auto !important;
}

/* ============================================
   Decoration opt-out
   ============================================ */
body.template-page.no-decorations::before,
body.template-page.no-decorations::after {
  content: none;
  display: none;
}

/* ============================================
   Unified product grid
   ============================================ */
.unified-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(20px, 2.8vw, 32px);
  margin: clamp(32px, 5vw, 48px) 0;
}

.unified-product-image {
  display: block;
  width: 100%;
  max-width: 120px;
  height: auto;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  border-radius: var(--radius-xl, 24px);
}

.unified-icon {
  margin: 1rem 0 4px;
  font-size: clamp(2.75rem, 4vw, 4rem);
  line-height: 1;
  filter: drop-shadow(0 8px 18px rgba(56, 189, 248, 0.18));
}

.unified-arrow {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  color: var(--cyan) !important;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.46;
  transition:
    opacity 220ms var(--ease-apple),
    transform 220ms var(--ease-apple);
}

/* ============================================
   Unified product card
   ============================================ */
.unified-product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(20px, 2.6vw, 28px);
  background: color-mix(in srgb, var(--glass-bg-light, rgba(255,255,255,0.88)) 92%, #ffffff 8%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-xl, 24px);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 12px 30px rgba(15, 23, 42, 0.08);
  transition:
    transform 220ms var(--ease-apple),
    box-shadow 220ms var(--ease-apple),
    border-color 220ms var(--ease-apple),
    background 220ms var(--ease-apple);
}

.unified-product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(56, 189, 248, 0.16);
  box-shadow:
    0 2px 6px rgba(15, 23, 42, 0.06),
    0 18px 38px rgba(15, 23, 42, 0.1);
}

/* ============================================
   Glass layout containers
   ============================================ */
.glass-container,
.content-wrapper {
  position: relative;
  z-index: 1;
  max-width: min(var(--container-wide), calc(100vw - (var(--container-padding, 40px) * 2)));
  margin: var(--spacing-lg) auto;
  padding: clamp(24px, 3vw, 32px);
  background: var(--glass-bg-light, rgba(255, 255, 255, 0.86));
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-glass);
  transition:
    transform 220ms var(--ease-apple),
    box-shadow 220ms var(--ease-apple),
    border-color 220ms var(--ease-apple),
    background 220ms var(--ease-apple);
}

.glass-container--dark,
.content-wrapper--dark {
  background: rgba(15, 23, 42, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
}

.glass-container:hover,
.content-wrapper:hover {
  transform: translateY(-2px);
  border-color: rgba(15, 23, 42, 0.12);
  box-shadow: var(--shadow-lg);
}

/* ============================================
   Hero ambient light
   ============================================ */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, var(--cyan) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, var(--magenta) 0%, transparent 50%);
  opacity: 0.035;
  z-index: 0;
  pointer-events: none;
}

/* ============================================
   Layering utility
   ============================================ */
.isolate {
  position: relative;
  z-index: 0;
  isolation: isolate;
}

/* ============================================
   Section rhythm
   ============================================ */
.section + .section {
  margin-top: var(--spacing-md);
}

@media screen and (min-width: 750px) {
  .section + .section {
    margin-top: var(--spacing-lg);
  }

  .title-wrapper--self-padded-mobile {
    padding-left: 0;
    padding-right: 0;
  }

  .element-margin {
    margin-top: calc(5rem + var(--spacing));
  }
}

/* ============================================
   Mobile utilities
   ============================================ */
@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
    gap: var(--spacing-md, 1rem) !important;
  }

  .mobile-full-width {
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-center {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .mobile-hide {
    display: none !important;
    visibility: hidden !important;
  }

  .mobile-no-padding {
    padding: 0 !important;
  }

  .mobile-small-padding {
    padding: clamp(0.75rem, 3vw, 1rem) !important;
  }

  .mobile-order-first {
    order: -1 !important;
  }

  .mobile-order-last {
    order: 999 !important;
  }

  .mobile-gap-sm {
    gap: 0.5rem !important;
  }
}

/* ============================================
   Tablet utilities
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-stack {
    flex-direction: column !important;
  }

  .tablet-half-width {
    width: 50% !important;
  }
}

/* ============================================
   Aside stats modifiers
   ============================================ */
.aside-stats dl > div.stat-highlight {
  background: linear-gradient(
    135deg,
    rgba(56, 189, 248, 0.08) 0%,
    rgba(217, 70, 239, 0.05) 100%
  );
  border-color: rgba(56, 189, 248, 0.18);
}

.aside-stats.compact {
  padding: clamp(12px, 2vw, 14px);
  gap: clamp(6px, 1.2vw, 8px);
}

.aside-stats.compact dl {
  gap: 6px;
}

.aside-stats.compact dl > div {
  padding: 8px;
}

.aside-stats.spacious {
  padding: clamp(20px, 3.5vw, 24px);
  gap: clamp(14px, 2.5vw, 16px);
}

.aside-stats.spacious dl {
  gap: 14px;
}

.aside-stats.spacious dl > div {
  padding: 16px;
}

/* ============================================
   Multicolumn modifiers
   ============================================ */
body.template-page .multicolumn .multicolumn-list__item.featured {
  border-color: rgba(56, 189, 248, 0.28);
  background: linear-gradient(
    180deg,
    rgba(56, 189, 248, 0.1) 0%,
    rgba(217, 70, 239, 0.05) 100%
  );
}

body.template-page .multicolumn.compact .multicolumn-list {
  gap: 16px;
}

body.template-page .multicolumn.compact .multicolumn-card__info {
  padding: 14px !important;
}

body.template-page .multicolumn.spacious .multicolumn-list {
  gap: 32px;
}

body.template-page .multicolumn.spacious .multicolumn-card__info {
  padding: 24px !important;
}

/* ============================================
   Spacing utilities
   ============================================ */
.mt-20 { margin-top: 20px !important; }
.mb-20 { margin-bottom: 20px !important; }
.p-20  { padding: 20px !important; }
.w-full { width: 100% !important; }

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

.mt-sm { margin-top: var(--spacing); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }

.mb-sm { margin-bottom: var(--spacing); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }

.pt-sm { padding-top: var(--spacing); }
.pt-md { padding-top: var(--spacing-md); }
.pt-lg { padding-top: var(--spacing-lg); }

.pb-sm { padding-bottom: var(--spacing); }
.pb-md { padding-bottom: var(--spacing-md); }
.pb-lg { padding-bottom: var(--spacing-lg); }

.section-head {
  max-width: 760px;
  margin: 0 auto 28px;
}

/* ============================================
   Label system
   ============================================ */
















.quantity__label {
  margin-right: 1rem;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  line-height: 1.3;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}







/* ============================================
   Note / helper message system
   ============================================ */


.platform-impact h3 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}
.modal-content h3 {
  text-align: center;
  margin: 0 0 var(--spacing-3);
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-primary);
}
.control-section h4 {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

.business-card p,
.module-card p {
  font-size: clamp(14px, 1.8vw, 16px);
  line-height: 1.7;
  color: var(--gc-muted);
  margin: 0 0 16px 0;
  letter-spacing: 0.01em;
}
.business-card h4,
.business-card h5,
.business-card h6 {
  color: var(--text-primary);
  font-weight: 600;
  margin-bottom: 8px;
}

.card h4 {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  line-height: 1.3;
}

/* Scroll reveal note */
.advanced-application-note {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity var(--duration-base) var(--ease-apple),
    transform var(--duration-base) var(--ease-apple);
}

.advanced-application-note.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .enterprise-extension-note {
    flex-direction: column;
  }
}

@media print {
   body {
    padding: 0;
  }
  main,
  .main-content,
  .shopify-section {
    overflow: visible !important;
  }

  .page-width,
  .container,
  .section__inner {
    max-width: none !important;
    padding-inline: 0 !important;
  }
  .enterprise-footer-banner,
  .enterprise-modal-invite,
  .enterprise-extension-note,
  .advanced-application-note,
  .city-step-enterprise-prompt {
    display: none !important;
  }
}

/* ============================================
   Scrollbar System — Canonical Global
   base.css safe / subtle / Apple-like
   ============================================ */

/* Firefox baseline */
.slider,
.stats-inline,
.badges-grid,
.collection-list.slider,

.anchor-sidebar,
.gcitymap-sidebar,
.search-results-dropdown {
  scrollbar-width: thin;
}
/* --------------------------------------------
   A. Horizontal scroll surfaces
   -------------------------------------------- */

.slider,

.stats-inline,
.badges-grid,
.collection-list.slider {
  -webkit-overflow-scrolling: touch;
}

/* Default horizontal scrollbar */
.horizontal-scroll-container::-webkit-scrollbar,
.tab-container::-webkit-scrollbar,
.stats-inline::-webkit-scrollbar,
.badges-grid::-webkit-scrollbar,
.collection-list.slider::-webkit-scrollbar {
  height: 6px;
}

.slider::-webkit-scrollbar-track,
.horizontal-scroll-container::-webkit-scrollbar-track,
.tab-container::-webkit-scrollbar-track,
.stats-inline::-webkit-scrollbar-track,
.badges-grid::-webkit-scrollbar-track,
.collection-list.slider::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 999px;
}

.slider::-webkit-scrollbar-thumb,
.horizontal-scroll-container::-webkit-scrollbar-thumb,
.tab-container::-webkit-scrollbar-thumb,
.stats-inline::-webkit-scrollbar-thumb,
.badges-grid::-webkit-scrollbar-thumb,
.collection-list.slider::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  transition: background 180ms var(--ease-apple, ease);
}

.slider:hover::-webkit-scrollbar-thumb,
.horizontal-scroll-container:hover::-webkit-scrollbar-thumb,
.tab-container:hover::-webkit-scrollbar-thumb,
.stats-inline:hover::-webkit-scrollbar-thumb,
.badges-grid:hover::-webkit-scrollbar-thumb,
.collection-list.slider:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
}

/* Firefox horizontal */
.slider,



.stats-inline,
.badges-grid,
.collection-list.slider {
  scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

/* --------------------------------------------
   B. Hidden horizontal navigation rails
   -------------------------------------------- */

.map-filters,
.glg-nav,
.TabNav_mask {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.map-filters::-webkit-scrollbar,
.glg-nav::-webkit-scrollbar,
.TabNav_mask::-webkit-scrollbar {
  display: none;
}

/* --------------------------------------------
   D. Specific surface overrides
   -------------------------------------------- */

/* badges grid on light surfaces */
.badges-grid::-webkit-scrollbar-thumb {
  background: #e5e7eb;
}

.badges-grid:hover::-webkit-scrollbar-thumb {
  background: #cfd4dc;
}

.badges-grid {
  scrollbar-color: #d7dce4 transparent;
}

/* collection sliders use brand tint */
.collection-list.slider::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.3);
}

.collection-list.slider:hover::-webkit-scrollbar-thumb {
  background: rgba(56, 189, 248, 0.5);
}

.collection-list.slider {
  scrollbar-color: rgba(56, 189, 248, 0.38) transparent;
}

/* sidebars can inherit scene tint if available */
.anchor-sidebar::-webkit-scrollbar-thumb {
  background: var(--scene-primary, rgba(255, 255, 255, 0.22));
}

/* --------------------------------------------
   E. Responsive refinement
   -------------------------------------------- */

@media (max-width: 768px) {
  .horizontal-scroll-container > * {
    max-width: 90vw;
  }

  
  .horizontal-scroll-container::-webkit-scrollbar,
  .tab-container::-webkit-scrollbar,
  .stats-inline::-webkit-scrollbar,
  .badges-grid::-webkit-scrollbar,
  .collection-list.slider::-webkit-scrollbar {
    height: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slider::-webkit-scrollbar-thumb,
  .horizontal-scroll-container::-webkit-scrollbar-thumb,
  .tab-container::-webkit-scrollbar-thumb,
  .stats-inline::-webkit-scrollbar-thumb,
  .badges-grid::-webkit-scrollbar-thumb,
  .collection-list.slider::-webkit-scrollbar-thumb,
  .anchor-sidebar::-webkit-scrollbar-thumb,
  .gcitymap-sidebar::-webkit-scrollbar-thumb,
  .search-results-dropdown::-webkit-scrollbar-thumb,
  .list-menu--disclosure.localization-selector::-webkit-scrollbar-thumb {
    transition: none !important;
  }
}

/* Subtitle system */
.subtitle {
  margin-bottom: 0.8em;
  color: var(--text-secondary, rgba(29, 29, 31, 0.68));
  font-family: var(--font-sans, var(--font-body, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif));

  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.01em;
}

.subtitle--small {
  margin-bottom: 0.4em;
  color: var(--blue, #007aff);
  font-size: clamp(0.85rem, 1vw, 0.95rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: none;
}

.subtitle--medium {
  max-width: 600px;
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

/* Mobile refinement */
@media (max-width: 749px) {
  .page-hero__eyebrow {
    padding: 0.42rem 0.75rem;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
  }
    .locale__list {
    right: auto;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 160px;
  }

  .locale__dropdown.is-open .locale__list {
    transform: translateX(-50%) translateY(0);
  }
}

/* Reduced motion: eyebrow scope only */
@media (prefers-reduced-motion: reduce) {
  .page-hero__eyebrow,
  .page-hero__eyebrow::after {
    transition: none !important;
  }

  .page-hero__eyebrow:hover {
    transform: none;
  }

  .page-hero__eyebrow:hover::after {
    left: -120%;
  }
}

/* Dark mode refinement */
@media (prefers-color-scheme: dark) {
  .feature-eyebrow {
    color: var(--cyan, #38bdf8);
  }

  .page-hero__eyebrow {
    background: rgba(14, 165, 233, 0.14);
    border-color: rgba(14, 165, 233, 0.28);
    color: #7dd3fc;
  }

  .subtitle {
    color: rgba(255, 255, 255, 0.72);
  }

  .subtitle--small {
    color: #4da3ff;
  }
}


/* ============================================
   🔄 混合模式 - 部分全屏突破
   ============================================ */

/* 在限宽页面中插入全屏组件 */
.breakout {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  padding-left: 0;
  padding-right: 0;
}


/* 3. 视频播放器模式 */
.video-player {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.video-player--fullscreen {
  width: 100vw;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

/* 4. 数据可视化大屏 */
.datavis-dashboard {
  width: 100vw;
  min-height: 100%;
  padding: clamp(1rem, 2vw, 2rem);
  background: linear-gradient(135deg, #0a0f1c 0%, #1a2332 100%);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1rem, 2vw, 2rem);
}

/* ============================================
   🎛️ 工具类 - 快速切换模式
   ============================================ */

/* 移除所有内边距 */
.no-padding {
  padding: 0 !important;
}

/* 移除最大宽度限制 */
.no-max-width {
  max-width: none !important;
}

/* 全宽 */
.full-width {
  width: 100% !important;
}

/* 全视口宽 */
.full-vw {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

/* 全视口高 */
.full-vh {
  min-height: 100% !important;
}

/* 固定全屏 */
.fixed-fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100dvh !important;
  z-index: 9999 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ============================================
   🖼️ IMAGE & MEDIA RESPONSIVENESS
   ============================================ */
img,
video,
iframe,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: block;
  width: 100%;
}


/* ============================================
   🐛 BROWSER-SPECIFIC FIXES
   ============================================ */

/* iOS Safari 修復：防止點擊延遲 */
a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation;
}

/* iOS Safari：防止自動縮放 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
textarea {
  font-size: 16px; /* 防止 iOS 自動縮放 */
}


/* ============================================
   🎨 littleg-lab 横向滚动画廊
   ============================================ */

/* 横向滚动容器 */


.image-gallery-horizontal {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  padding: 1rem 0;
  
  /* 隐藏滚动条但保持功能 */
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, 0.3) transparent;
}

/* 画廊图片项 */
.horizontal-scroll-container > * {
  flex: 0 0 auto;
  scroll-snap-align: start;
  max-width: 80vw;
}

/* Header scroll effect */
.chapternav.is-scrolled,
.lg-header.is-scrolled,
.littleg-hud-global.is-scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* ─────────────────────────────────────────────────────
   FULL-WIDTH CARD - Apple Style
   ───────────────────────────────────────────────────── */
.full-width-card {
  width: 100%;
  background: var(--glass-bg-light);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: clamp(60px, 6vw, 80px) 0;
  margin: 0;
  position: relative;
  z-index: 1;
}
/* Spin Animation (Continuous Rotation) */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Glow Animation (Subtle Shadow Breathing) */
@keyframes glow {
  0%, 100% { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); }
  50%      { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); }
}

/* GFun Pulse Animation (Scale + Opacity) */
@keyframes gfunPulse {
  0%, 100% { 
    transform: scale(1); 
    opacity: 1;
  }
  50% { 
    transform: scale(1.05); 
    opacity: 0.9;
  }
}

   @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    
    
    @keyframes toastSlideIn {
      from {
        opacity: 0;
        transform: translateX(100%);
      }
      to {
        opacity: 1;
        transform: translateX(0);
      }
    }
    
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-10px);
      }
    }


/* Pulse Data (Subtle Scale Breathing) */
@keyframes pulseData {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.02); opacity: 0.92; }
}

/* Menu Open Animation */
@keyframes animateMenuOpen {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade In (General Purpose) */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}



/* 更轻的浮动，用于 icon / hint（避免过"飘"） */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* 轻微呼吸闪烁（用于 skeleton / subtle highlight） */
@keyframes shimmer-pulse {
   0%, 100% { opacity: 1; }
  50% { opacity: 0.88; }
}


/* 录音状态小红点闪烁（保留，语义明确） */
.record-button.recording::after {
  content: '●';
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ff1744;
  font-size: 20px;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
/* GCityPartners Products */
.gcitypartners-product,
.gcitypartners-page,
[data-brand="gcitypartners"] {
  font-family: var(--font-display);
}
.core-enterprise-hero__button--primary,
section[id^="cta-stack-standard-"] [class*="cta-stack-premium-"][class*="__button--primary"] {
  font-weight: 700;
}

@media (max-width: 768px) {
  .core-enterprise-hero__shell,
  .rns-shell,
  section[id^="cta-stack-standard-"] [class*="cta-stack-premium-"][class*="__card"] {
    padding-inline: clamp(14px, 4vw, 20px);
  }
}



/* Mobile (480px - 768px) */
@media (max-width: 768px) {
  :root {
    --mc-padding-desktop: var(--mc-padding-mobile);
    --mc-gap-desktop: var(--mc-gap-mobile);
    --button-width: 100%;
    --mc-list-gap: var(--mc-gap-mobile);
  }
  
  .title-wrapper-with-link {
    margin-bottom: var(--mc-padding-mobile);
    flex-direction: column;
    gap: var(--mc-gap-mobile);
  }
  
  .link.underlined-link.large-up-hide {
    display: inline-block;
  }
  
  .small-hide {
    /* display: none !important;  // 移除无条件隐藏，保留原生Shopify价格可见 */
  }
  
  .medium-hide {
    display: none !important;
  }
  
  .content-container {
    padding: var(--mc-padding-mobile);
  }
  .center {
    margin-top: var(--mc-padding-mobile);
  }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
  :root {
    --mc-padding-mobile: 0.75rem;
  }
  
  .title {
    font-size: 20px;
  }
  
}
/* Buttons */
  .button {
    display: inline-block;
    width: var(--button-width, auto);
    padding: 10px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s var(--ease-apple);
    border: none;
  }

  .button-primary {
    background: var(--color-primary);
    color: white;
  }

  .button-primary:hover {
    background: #0051D5;
    transform: translateX(2px);
  }

  .button-secondary {
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
  }

  .button-secondary:hover {
    background: rgba(0, 122, 255, 0.1);
  }
/* Animations */
  @keyframes slideInDown {
    from {
      opacity: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

/* Button Styles */
/* Button Styles */
    .button-group {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 60px;
      animation: fadeInUp 0.8s ease-out 0.4s both;
    }

.shell {
  max-width: var(--max-width);
  margin: 0 auto;
  position:relative;
  z-index:2;
}

/* ========================================
   Media Gallery Container
   ======================================== */

media-gallery {
  display: block;
  position: relative;
  width: 100%;
} 

/* ========================================
   4. Product Image & Card Media
   ======================================== */

/* 產品圖片 - 保持比例 */
.product-image,
.card__media img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing);
  transition: transform var(--duration) var(--ease-apple);
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
}

  .image-container img,
  .product-single__media-wrapper img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
  
    .product-icon {
      width: 80px;
      height: 80px;
      margin: 0 auto 1.5rem;
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      background: linear-gradient(135deg, var(--cyan), var(--magenta));
      box-shadow: 0 10px 30px rgba(56,189,248,0.3);
    }

.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(56, 189, 248, 0.2);
}

.product-name {
  background: linear-gradient(135deg, var(--cyan, #38bdf8), var(--gold, #fbbf24));
  font-weight: 800;
}

 .product-tagline {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.65);
      margin-bottom: 1.5rem;
}

 .product-gfun {
      display: inline-block;
      background: rgba(251,191,36,0.2);
      color: var(--gold);
      padding: 0.5rem 1.2rem;
      border-radius: 50px;
      font-size: 0.9rem;
      font-weight: 700;
      margin-top: 1rem;
      border: 1px solid rgba(251,191,36,0.3);
}

  


/* ============================================================
   📱 iOS Safari Sticky Fix
   ============================================================ */

@supports (-webkit-touch-callout: none) {
 .header-wrapper,
  sticky-header,
  .sticky-header {
    position: -webkit-sticky;
    position: sticky;
  }
}
  /* iOS 輸入框縮放修復 */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
/* ========================================
   🎯 橫屏模式優化
   ======================================== */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: 2rem 1rem !important;
  }
  /* Property Valuation */
  .property-form,
  .valuation-results {
    padding: 1rem !important;
  }
  
  .property-image {
    height: 200px !important;
  }

    table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  thead {
    display: none !important;
  }
   /* 減少動畫以提升性能 */
  * {
    animation-duration: 0.2s !important;
    transition-duration: 0.2s !important;
     margin: 0;
padding: 0;
  box-sizing: border-box;
  }

  /* 增加觸控目標大小 */
  button,
  a,
  .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* 增加行高以提升可讀性 */
  p,
  li {
    line-height: 1.6 !important;
  }
}


  
  .sidebar-navigation {
    position: relative !important;
    width: 100% !important;
  }
  /* AI Generator Hub */
  .ai-generator-tabs {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .tab-button {
    min-width: 100px !important;
    font-size: 0.85rem !important;
  }
  
  .generator-form {
    padding: 1rem !important;
  }


/* ═══════════════════════════════════════════════════════════════
   GFUN DASHBOARD - Responsive Container
   ═══════════════════════════════════════════════════════════════ */


@keyframes shimmer-skeleton {
  0%, 100% { background-position: -200% 0; }
  50% { background-position: 200% 0; }
}

.balance-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 
    0 20px 60px -15px rgba(0, 0, 0, 0.15),
    0 8px 24px -8px rgba(0, 0, 0, 0.1);
}

/* ═══════════════════════════════════════════════════════════════
   VOICE RECORDER - LittleG語音日記
   ═══════════════════════════════════════════════════════════════ */

.voice-recorder,
.recording-interface {
  padding: clamp(0.875rem, 3vw, 1.5rem) !important;
  background: var(--bg-surface, #ffffff);
  border-radius: var(--radius, 16px);
  position: relative;
}

.recording-button {
  width: clamp(70px, 15vw, 100px) !important;
  height: clamp(70px, 15vw, 100px) !important;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    var(--primary, #ff4757),
    var(--primary-dark, #c0392b)
  );
  border: none;
  cursor: pointer;
  position: relative;
  box-shadow: 
    0 8px 32px -4px rgba(255, 71, 87, 0.4),
    0 4px 16px -2px rgba(255, 71, 87, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.recording-button::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(
    145deg,
    rgba(255, 71, 87, 0.3),
    transparent
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recording-button:hover {
  transform: scale(1.08);
  box-shadow: 
    0 12px 40px -4px rgba(255, 71, 87, 0.5),
    0 6px 20px -2px rgba(255, 71, 87, 0.35),
    inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.recording-button:hover::before {
  opacity: 1;
}

.recording-button:active {
  transform: scale(0.95);
}

/* Recording Animation State */
.recording-button.recording {
  animation: pulse-record 1.5s ease-in-out infinite;
}

@keyframes pulse-record {
  0%, 100% {
    box-shadow: 
      0 8px 32px -4px rgba(255, 71, 87, 0.4),
      0 0 0 0 rgba(255, 71, 87, 0.4);
  }
  50% {
    box-shadow: 
      0 8px 32px -4px rgba(255, 71, 87, 0.4),
      0 0 0 20px rgba(255, 71, 87, 0);
  }
}
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  
/* ============================================
   littleg-lab - Interactive Island Map CSS
   Apple-Grade Design System Integration
   ============================================ */

/* === Main Wrapper === */
.littleg-game-section-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  font-family: var(--font-main, -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif);
}

.littleg-game-section-wrapper[data-fullscreen="true"] {
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}


 .icon-wrapper {
      font-size: 2rem;
    }

.card-title {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 16px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════
   🔒 LOCKED FEATURE BUTTONS - 鎖定功能按鈕
   ═══════════════════════════════════════════════════════════════ */

.control-btn.locked {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}

.control-btn.locked .lock-icon {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.8rem;
  background: rgba(239, 68, 68, 0.9);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.4);
}

.control-btn.locked:hover {
  opacity: 0.7;
  transform: translateY(-2px);
}

.control-btn.locked:hover .lock-icon {
  animation: shake 0.5s ease;
}
/* 連結 */
a,
[class*="Link"] {
  color: var(--cyan) !important;
  transition: color var(--duration) var(--ease) !important;
  text-decoration: none;
}
a:active,
button:active,
[role="button"]:active {
  background-color: transparent !important;
}
/* 訂單卡片 hover 效果 */
[class*="OrderCard"]:hover,
[class*="order"]:hover {
  background: var(--glass-hover) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 0 25px rgba(255,255,255,0.15) !important;
}

/* Intersection Observer 動畫 */
[data-animate] {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s var(--ease);
}

[data-animate].visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes geoShift {
  0%, 100% { 
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
  33% { 
    transform: translate3d(-5%, 3%, 0) scale(1.1) rotate(2deg);
  }
  66% { 
    transform: translate3d(4%, -4%, 0) scale(1.08) rotate(-2deg);
  }
}

@keyframes gridFloat {
  from { 
    background-position: 0 0; 
  }
  to { 
    background-position: 60px 60px; 
  }
}


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


/* ═══════════════════════════════════════════════════════════
   ✨ Apple-Style Animation (Scroll Trigger)
   ═══════════════════════════════════════════════════════════ */
.scroll-trigger.animate--slide-in {
  opacity: var(--scroll-slidein-opacity, 0);
  transform: translateY(var(--scroll-slidein-y, 30px));
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.scroll-trigger.scroll-trigger--offscreen {
  opacity: 1;
  transform: translateY(0);
}
#ui-overlays {
  position: relative;
  z-index: var(--z-overlay, 9999);
}

[data-gcity-ready="false"] [data-lg-gfun] {
  opacity: 0;
  transition: opacity 0.3s;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 📡 網路狀態指示器 - 非首屏關鍵 */
/* ═══════════════════════════════════════════════════════════════ */
.network-indicator {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: var(--z-notification, 9000);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--glg-workspace-radius-pill);
  background: var(--status-danger);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(100px);
  box-shadow: var(--gc-shadow);
  -webkit-backdrop-filter: var(--glg-workspace-blur);
  backdrop-filter: var(--glg-workspace-blur);
  transition:
    opacity 220ms var(--glg-workspace-ease),
    transform 220ms var(--glg-workspace-ease);
}

.network-indicator.offline {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  background: var(--status-danger);
}

.network-indicator.online {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  background: var(--status-success);
}

/* shake animation removed — undefined keyframe */
.network-indicator.offline .indicator-icon {
  opacity: 0.9;
}

/* ═══════════════════════════════════════════════════════════════ */
/* 💬 聊天載入指示器 */
/* ═══════════════════════════════════════════════════════════════ */
.chat-loader {
  position: fixed;
  bottom: var(--chat-loader-bottom, 24px);
  right: var(--chat-loader-right, 24px);
  width: var(--chat-loader-size, 64px);
  height: var(--chat-loader-size, 64px);
  background: linear-gradient(135deg, #38bdf8, #fbbf24);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9997;
  animation: chatPulse 2s infinite;
  box-shadow: 0 8px 32px rgba(56, 189, 248, 0.3);
}

.chat-loader-icon {
  font-size: var(--chat-loader-icon-size, 2rem);
}

/* ═══════════════════════════════════════════════════════════════ */
/* 🍪 Cookie Banner */
/* ═══════════════════════════════════════════════════════════════ */
/* Cookie Banner */
.cookie-content {
  max-width: var(--glg-workspace-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

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

.cookie-content p {
  margin: 0;
  color: var(--glg-workspace-text);
  font-size: 0.95rem;
}

/* cookie-actions = single button class in theme.liquid */
.cookie-actions {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: var(--glg-workspace-radius-pill);
  background: var(--brand-primary);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 220ms var(--glg-workspace-ease),
    transform 220ms var(--glg-workspace-ease);
}

.cookie-actions:hover {
  background: var(--gray-900-hover);
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════
   🎨 API SHOWCASE - API 展示
   ═══════════════════════════════════════════════════════════ */
.knowledge-category,
.api-category {
  margin: 4rem 0;
}
.api-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
}
.api-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-md);
  padding: 32px;
  border: 1px solid var(--header-border);
  transition:
  background-color 0.4s var(--ease-apple),
  border-color 0.4s var(--ease-apple),
  box-shadow 0.4s var(--ease-apple),
  transform 0.4s var(--ease-apple);
  cursor: pointer;
}

.api-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 48px rgba(56, 189, 248, 0.3);
  background: var(--glass-hover);
}

.api-icon {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}

.api-desc {
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.hkd-equivalent {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}
.type {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
}

.fog-bg {
  background: radial-gradient(circle at 30% 30%, #0b1120, #020617);
  position: relative;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   🎨 GRADIENT BORDER - 漸層邊框
   ═══════════════════════════════════════════════════════════ */
.gradient-border {
  position: relative;
  border-radius: var(--radius-lg, 18px); /* 繼承你之前的變數 */
  background: var(--glass-bg); /* 背景必須是半透明才能透出質感 */
}


/* 玻璃質感卡片 */
.card,
.section,
[class*="Card"],
[class*="Section"] {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(var(--blur)) !important;
  border-radius: var(--radius) !important;
  border: 1px solid var(--header-border) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.1);
}


/* ═══════════════════════════════════════════════════════════
   🔢 CHAPTER & STEP NUMBERS - 章節編號
   ═══════════════════════════════════════════════════════════ */
.step-number,
.section-number {
  border-radius: var(--radius-xl);
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  color: #fff;
  font-weight: 800;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(56, 189, 248, 0.4);
  margin-bottom: 1.5rem;
}

 
/* ========================================
   2. Product Grid & Collection Grid
   ======================================== */


/* Secondary CTA Button */
.collection-card-secondary-cta {
  background: var(--glass-bg-light);
  backdrop-filter: var(--blur);
  color: var(--white);
  border: 1px solid var(--header-border);
  border-radius: var(--radius-full);
  padding: var(--spacing) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: all var(--duration) var(--ease-apple);
  margin-bottom: var(--spacing-md);
  width: 100%;
}

.collection-card-secondary-cta:hover {
  background: var(--nav-hover-bg);
  transform: scale(1.02);
}

/* Collection Info Container */
.collection-card-info {
  margin-top: auto;
}

/* Scrim Background */
.collection-card-scrim {
  background: var(--glass-bg);
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--header-border);
}

/* Price Row */
.collection-card-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing);
}


/* Visually Hidden (Accessibility) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tab-navigation {
  display: flex;
  justify-content: center;
  gap: clamp(2rem, 5vw, 3rem);
  margin-bottom: clamp(3rem, 6vw, 4rem);
  padding-bottom: 0;
  
  /* Visual */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
}



/* CTA / Price */
.service-price {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;

  color: var(--brand-primary);
  opacity: 0.96;
}

/* Arrow hint */
.service-price::after {
  content: "→";
  font-size: 12px;
  transition: transform 0.22s var(--ease-out);
}


/* Modal (Strong) */
.enterprise-modal-invite{
  position:fixed;
  inset:0;
  z-index: var(--z-modal) !important; /* 10101 */
  display:flex;align-items:center;justify-content:center}
.modal-overlay{
  position:absolute;inset:0;background:rgba(15,23,42,.78);
    z-index: var(--z-modal-backdrop) !important; /* 10100 */
    backdrop-filter:blur(8px)}
    
.modal-content{position:relative;background:var(--gray-900);border-radius:var(--radius-2xl);padding:var(--spacing-8);max-width:520px;width:92%}
.modal-close{position:absolute;top:var(--spacing-4);right:var(--spacing-4);background:none;border:none;font-size:2rem;color:rgba(255,255,255,.72);cursor:pointer}
.modal-close:hover{color:rgba(255,255,255,.95)}
.modal-icon{font-size:3rem;text-align:center;margin-bottom:var(--spacing-4)}
.modal-content p{text-align:center;color:var(--gc-muted);margin:0 0 var(--spacing-4)}
.modal-content ul{list-style:none;padding:0;margin:var(--spacing-4) 0}
.modal-content li{padding:var(--spacing-2) 0;color:var(--gc-muted)}
.modal-actions{display:flex;gap:var(--spacing-3);margin-top:var(--spacing-6)}



/* Step >=3 prompt */
.city-step-enterprise-prompt{
  background:rgba(251,191,36,.05);
  border:2px solid rgba(251,191,36,.2);
  border-radius:var(--radius-xl);
  padding:var(--spacing-6);
  margin:var(--spacing-8) 0;
}

.feature-comparison{background:rgba(255,255,255,.03);border-radius:var(--radius);padding:var(--spacing-4);margin:var(--spacing-4) 0}
.comparison-item{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-2) 0}
.comparison-item.gap{margin-top:var(--spacing-2);padding-top:var(--spacing-3);border-top:1px solid rgba(255,255,255,.10)}
.comparison-item .value{color:var(--text-primary);font-weight:700}
.comparison-item .value.highlight{color:var(--gold);font-weight:900}



.bridge-line{
font-size:clamp(1.3rem,3.2vw,2rem);
font-weight:700;
line-height:1.6;
margin:0 0 12px;
color:var(--text-primary);
}

.chapter-title {
  font-size: clamp(2rem, 4.6vw, 2.7rem);
  font-weight: 800;
  margin-bottom: 24px;
  background: linear-gradient(135deg,
    var(--cyan),
    var(--magenta),
    var(--gold)
  );
}


/* 章節內左右兩張卡（市民 / 專業） */
.chapter-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

/* 快速重點列表 */
.quick-points{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.1rem;
}

.quick-points span{
  font-size: 0.85rem;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.4);
  background: rgba(15,23,42,0.7);
}
.lg-card {
  grid-column: span 4;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 0.5px solid rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.04),
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);  /* ✅ 內光澤 */
}

.card::before{
content:"";
position:absolute;
inset:-20%;
opacity:0;
background:radial-gradient(circle at 0 0, rgba(56,189,248,0.14), transparent 55%);
transition:opacity .45s cubic-bezier(0.4,0,0.2,1);
pointer-events:none;
}
.card:hover::before{opacity:1;}

   /* Final CTA */
/* Final CTA */
.final-cta-wrap{
  max-width:var(--max-width);
  margin:0 auto;
  text-align:center;
  background:var(--glass-bg);
  border:1px solid var(--header-border);
  border-radius:var(--radius);
  padding:28px 22px 30px;
  backdrop-filter:blur(var(--blur));
  box-shadow:0 18px 40px rgba(0,0,0,0.55);
}


  reveal{
    opacity:0;
    transform:translateY(24px) scale(0.98);
    transition:opacity .6s cubic-bezier(0.4,0,0.2,1),
               transform .6s cubic-bezier(0.4,0,0.2,1);
    will-change:opacity, transform;
  }

  .reveal.is-visible{
    opacity:1;
    transform:translateY(0) scale(1);
  }

  /* ============================================
   💊 PILL COMPONENT
   ============================================ */


.pill:hover {
  background: rgba(0, 102, 204, 0.12);
  border-color: rgba(0, 102, 204, 0.25);
  transform: translateY(-2px) scale(1.05);
}

.pill {
  /* Flexbox 布局 */
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  
  /* 字体 */
  font-size: 0.82rem;
    transition: 
    background-color 0.2s ease,
    transform 0.2s ease;
  cursor: default;

  /* 外观 */
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  
  /* 间距 */
  padding: 0.28rem 0.5rem;
  margin: 0.15rem 0.35rem 0.15rem 0;
}


  .zh{font-size:.95rem;line-height:1.7;margin-bottom:4px;color:var(--text-primary)}
  .en{font-size:.82rem;line-height:1.55;color:var(--text-medium)}
/* 章節底部 CTA */
.chapter-cta{
  margin: 2.5rem auto 0;
  text-align: center;
}

.chapter-cta .cta-btn{
  display: inline-block;
  padding: 0.9rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--cyan), var(--gold));
  color: #000;
  font-size: 0.95rem;
  line-height: 1.5;
}

.chapter-cta::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:999px;
  background:radial-gradient(circle at 0 0, rgba(56,189,248,0.24), transparent 60%);
  opacity:0;
  filter:blur(18px);
  transition:opacity .35s cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
  z-index:-1;
}

.chapter-cta:hover::before{opacity:1;}

.text-zh {
  font-size: 0.95rem;
  line-height: 1.7;
  margin-bottom: 4px;
  color: var(--text-primary);
}
/* 🪟 Glass Button - Dark Backgrounds */
/* Glass Button */



/* ========================================
       敘事橋接區
    ======================================== */
/* Bridge */
.bridge-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 40px;
}


.bridge-col {
  padding: 28px;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
  border: 1px solid rgba(29,29,31,0.06);
  box-shadow: 0 14px 40px rgba(15,23,42,0.05);
}

.bridge-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 0;
  text-decoration: none;
  border-top: 1px solid rgba(29,29,31,0.06);
  color: inherit;
  transition: transform .25s ease, opacity .25s ease;
}
.bridge-item:first-of-type {
  margin-top: 10px;
}
.bridge-item:hover {
  transform: translateX(2px);
}
.bridge-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: #f5f5f7;
  font-size: 20px;
}
.bridge-item strong {
  color: #1d1d1f;
  font-size: 1rem;
  line-height: 1.4;
}

    .narrative-bridge {
  margin-top: 28px;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(56,189,248,0.03), rgba(217,70,239,0.02));
}



.narrative-bridge .muted {
  color: #64748b;
  font-size: 1.1rem;
  text-align: center;
  margin-bottom: 1.5rem;
}



/* 强调文字 */
strong {
  font-weight: 600; /* Semibold，Apple 常用 600 而非 700 来做正文强调 */
  color: var(--apple-text);
}

/* 全球通用的滑动容器 (Wrapper) */
  .apple-scroll-wrapper, .horizontal-scroll-snap {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 20px 0 40px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
/* ========================================
       平台影響力區域
       ======================================== */
    .platform-impact {
      text-align: center;
      padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem);
      max-width: 1200px;
      margin: 0 auto;
    }


    .platform-impact p {
      font-size: 1.1rem;
      line-height: 1.8;
      color: rgba(255,255,255,0.85);
    }



/* ========== 18. module-nav ========== */

/* Module Nav 模組導航 */
.module-nav a {
  display: inline-block;
  margin-right: 1rem;
  padding: 0.6rem 1.2rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
}

.module-nav a:hover {
  background: linear-gradient(135deg, #38bdf8, #d946ef) !important;
  color: #fff !important;
}


/* 統一價格標籤 */
.unified-price {
  color: rgba(255,255,255,0.6);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

/* 統一描述文字 */
.unified-desc {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   🎨 CARD CONTENT STYLES
   ═══════════════════════════════════════════════════════════ */


/* Card 內容 */
.card img {
  border-radius: var(--radius-sm);
  margin-bottom: var(--spacing);
  width: 100%;
  height: auto;
}

  
/* ═══════════════════════════════════════════════════════════
   💰 PRICE SYSTEM - 統一價格系統
   ═══════════════════════════════════════════════════════════ */
.product-price,
.price {
  color: var(--gold, #fbbf24);
  font-weight: 700;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   ✨ ANIMATIONS - 動畫效果
   ═══════════════════════════════════════════════════════════ */



.card .price {
  color: #8e8e93;
  font-size: clamp(14px, 2vw, 16px);
  margin: 0 0 12px 0;
  font-weight: 400;
}
/* ========================================
   5. Product Title & Card Heading
   ======================================== */


/* 錄音按鈕 */
.record-button,
.handle-button {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 30px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(16px, 2.5vw, 20px);
  line-height: 1.6;
  background: linear-gradient(135deg, var(--littleg-pink), #fff7b0);
  border: 4px solid var(--littleg-character);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: all var(--duration) var(--ease-apple);
  position: relative;
  overflow: hidden;
}


.record-button:hover,
.handle-button:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 32px rgba(139, 75, 140, 0.3);
}

.record-button:active {
  transform: scale(0.95);
}

.handle-button svg {
  color: #000;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* 錄音中狀態 */
.record-button.recording {
  animation: pulse 1.5s infinite;
  background: linear-gradient(135deg, #ff6b9d, #ffd700);
  border-color: #ff1744;
}


/* 波形容器 */
.waveform-container {
  height: 100px;
  margin: 20px 0;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.voice-controls {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: 20px;
}

.voice-controls button {
  width: 100%;
  min-height: 50px;
}
    /* ========== 右側面板 - 功能區 ========== */
    .control-panel {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      border: 1px solid var(--header-border);
      padding: 2rem;
      overflow-y: auto;
    }

    .control-section {
      margin-bottom: 2rem;
    }




    .search-box,
    .route-input {
      width: 100%;
      padding: 0.75rem;
      margin-bottom: 0.5rem;
      background: var(--glass-bg);
      border: 1px solid var(--header-border);
      border-radius: var(--radius-lg);
      color: #fff;
      font-family: inherit;
    }

/* placeholder */
.search-box::placeholder,
.route-input::placeholder,
input::placeholder,
textarea::placeholder{
  color: var(--field-placeholder);
}

.map-container {
    height: 400px;
    background: linear-gradient(135deg, #0f1729 0%, #1a2f4a 50%);
  width: 100%;
    border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.map-controls {
  position: absolute;
  bottom: 90px;
  left: var(--spacing-md);
  right: var(--spacing-md);
  background: rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(var(--blur));
  backdrop-filter: blur(var(--blur));
  border-radius: var(--radius-md);
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.map-search {
  width: 100%;
  padding: 12px 15px;
  font-size: var(--font-size-base);
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  margin-bottom: 10px;
}



/* ============================================
   交付通知樣式
   ============================================ */
.delivery-notification {
  position: fixed;
  top: calc(var(--header-height, 52px) + 16px);
  right: 20px;
  padding: 16px 20px;
  border-radius: var(--radius-lg, 12px);
  backdrop-filter: blur(var(--blur-md, 20px));
  box-shadow: var(--shadow-glass, 0 8px 32px rgba(0,0,0,0.1));
  z-index: var(--z-notification, 9000);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 500;
  animation: slideIn 0.3s ease-out;
  max-width: 400px;
}

.delivery-notification.success {
  background: rgba(16, 185, 129, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.delivery-notification.error {
  background: rgba(239, 68, 68, 0.95);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.delivery-notification.fade-out {
  animation: slideOut 0.3s ease-in forwards;
}

.delivery-notification svg {
  flex-shrink: 0;
}


/* 響應容器 */
.response-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 800px;
  max-height: 80vh;
  overflow: auto;
  background: var(--glass-bg, rgba(255, 255, 255, 0.95));
  backdrop-filter: blur(var(--blur-lg, 30px));
  border-radius: var(--radius-xl, 16px);
  box-shadow: var(--shadow-2xl, 0 25px 50px rgba(0,0,0,0.15));
  z-index: 9999;
  padding: 24px;
}

.api-response-header,
.instant-content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.response-container pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 16px;
  border-radius: var(--radius-md, 8px);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.6;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}
.notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 9999;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.notification.show {
  transform: translateY(0);
  opacity: 1;
}

.notification-icon {
  font-size: 1.25rem;
  flex-shrink: 0;
}

.notification-success { 
  border-left: 4px solid #22c55e; 
  color: #166534;
}

.notification-error { 
  border-left: 4px solid #ef4444; 
  color: #991b1b;
}

.notification-warning { 
  border-left: 4px solid #fbbf24; 
  color: #92400e;
}

.notification-info { 
  border-left: 4px solid#0F2A4A; 
  color: #075985;
}



/* ═══════════════════════════════════════════════════════════
   🎨 SPECIAL COMPONENTS - 特殊組件
   ═══════════════════════════════════════════════════════════ */
.littleg-card {
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
}



/* ═══════════════════════════════════════════════════════════
   🏠 HOME SECTIONS - 首頁區塊
   ═══════════════════════════════════════════════════════════ */
.home-intro-banner {
  position: relative;
  overflow: hidden;
}

.home-intro-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
  pointer-events: none;
}
.home-intro-banner.glow {
  box-shadow: 
    0 0 30px rgba(251, 191, 36, 0.3), 
    0 0 60px rgba(37, 99, 235, 0.2);
}

.home-core-business {
  text-align: center;
  padding: 100px 100%;
  max-width: var(--home-core-business-max, none);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
}


.home-core-business > p {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: #6b6b66;
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}


.module-grid,
.feature-grid {
  /* 网格布局 */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  
  /* 容器样式 */
  padding: 0;
  margin: 0;
  
  /* 对齐 */
  align-items: stretch;
  justify-items: stretch;
}



/* ═══════════════════════════════════════════════════════════
   💡 TOOLTIPS & HINTS
   ═══════════════════════════════════════════════════════════ */
.floating-tip,
.tooltip,
.ai-hint-bar {
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  padding: 0.8rem 1.5rem;
  border: 1px solid var(--header-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  animation: pulseGlow 5s infinite;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  opacity: 0;
  visibility: hidden;
  background: rgba(26, 54, 93, 0.95);
  color: white;
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-size: 13px;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  transition: transform var(--duration) var(--ease-apple),
              opacity var(--duration) var(--ease-apple);
  pointer-events: none;
  z-index: var(--z-modal, 1000);
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after,
[data-tooltip]:hover::before {
  transform: translateX(-50%) scale(1);
  opacity: 1;
}


.floating-tip::before {
  content: '💡';
  margin-right: 0.5rem;
}
/* ═══════════════════════════════════════════════════════════
   🪟 GLASS PANELS
   ═══════════════════════════════════════════════════════════ */
/* 2. 玻璃面板：優化間距與大小 */
.glass-panel {
  position: absolute;
  /* 移除原本過大的 margin: 60px auto */
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(30px) saturate(180%);
  
  /* 優化間距：70px 太寬了，改為 24px-32px */
  padding: 24px; 
  
  transition:
  background-color var(--duration-normal, 280ms) var(--ease-apple),
  border-color var(--duration-normal, 280ms) var(--ease-apple),
  box-shadow var(--duration-normal, 280ms) var(--ease-apple),
  transform var(--duration-normal, 280ms) var(--ease-apple);
  max-width: 1150px;
  
  /* 移除硬編碼的 border-left，改用更精緻的全局邊框 */
  border: var(--border-light);
  border-radius: 20px;
  box-shadow: var(--shadow-premium);
  z-index: 500;
}

/* 3. 增加一個特定的浮窗定位 (例如用於結果展示) */
.route-box.glass-panel {
  top: 100px; /* 避開頂部導航 */
  left: 20px;
  padding: 20px;
}
    
.glass-panel:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-lg);
}

/* ═══════════════════════════════════════════════════════════
   🏷️ STATUS PILL
   ═══════════════════════════════════════════════════════════ */
.status-pill {
  margin-top: 25px;
  display: inline-block;
  background: rgba(0, 76, 69, 0.3);
  color: #fff;
  padding: 14px 30px;
  border-radius: 50px;
  font-weight: 500;
  box-shadow: inset 0 0 25px rgba(0, 76, 69, 0.3);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition:
  background-color var(--duration-normal, 280ms) var(--ease-apple),
  border-color var(--duration-normal, 280ms) var(--ease-apple),
  box-shadow var(--duration-normal, 280ms) var(--ease-apple),
  transform var(--duration-normal, 280ms) var(--ease-apple);
}

.status-pill:hover {
  background: rgba(0, 76, 69, 0.5);
   transform: scale(1.05) translateY(-2px);
}



/* ═══════════════════════════════════════════════════════════
   ⭐ SOCIAL PROOF
   ═══════════════════════════════════════════════════════════ */
.social-proof {
  font-size: 1.05rem;
  margin-top: 40px;
  background: linear-gradient(90deg, #dbeafe, #fef3c7);
  padding: 20px;
  border-radius: 20px;
  font-weight: 600;
  color: #1e3a8a;
  animation: glow 3s ease-in-out infinite alternate;
}

.social-proof:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
}



/* ═══════════════════════════════════════════════════════════
   🎴 SHOPIFY CARD SYSTEM VARIABLES
   ═══════════════════════════════════════════════════════════ */
.card-wrapper,
.contains-card--product {
  --card-radius: var(--card-corner-radius);
  --border-width: var(--card-border-width);
  --border-opacity: var(--card-border-opacity);
  --shadow-horizontal-offset: var(--card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--card-shadow-vertical-offset);
  --shadow-blur-radius: var(--card-shadow-blur-radius);
  --shadow-opacity: var(--card-shadow-opacity);
  --shadow-visible: var(--card-shadow-visible);
  --shadow-light: 0 6px 20px rgba(139, 75, 140, 0.1);
  --shadow-medium: 0 12px 35px rgba(139, 75, 140, 0.15);
  --shadow-heavy: 0 20px 45px rgba(139, 75, 140, 0.25);
  --image-padding: var(--card-image-padding);
  --text-alignment: var(--card-text-alignment);
}

.collection-card-wrapper,
.contains-card--collection {
  --collection-radius: var(--collection-card-corner-radius);
  --border-width: var(--collection-card-border-width);
  --border-opacity: var(--collection-card-border-opacity);
  --shadow-horizontal-offset: var(--collection-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--collection-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--collection-card-shadow-blur-radius);
  --shadow-opacity: var(--collection-card-shadow-opacity);
  --shadow-visible: var(--collection-card-shadow-visible);
  --image-padding: var(--collection-card-image-padding);
  --text-alignment: var(--collection-card-text-alignment);
}
  /* Optional: keep cards clean on white bg */
  .card-wrapper .glg-card{
    background: #fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 16px;
  }

.article-card-wrapper,
.contains-card--article {
  --article-radius: var(--blog-card-corner-radius);
  --border-width: var(--blog-card-border-width);
  --border-opacity: var(--blog-card-border-opacity);
  --shadow-horizontal-offset: var(--blog-card-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--blog-card-shadow-vertical-offset);
  --shadow-blur-radius: var(--blog-card-shadow-blur-radius);
  --shadow-opacity: var(--blog-card-shadow-opacity);
  --shadow-visible: var(--blog-card-shadow-visible);
  --image-padding: var(--blog-card-image-padding);
  --text-alignment: var(--blog-card-text-alignment);
}
.contains-content-container,
.content-container {
  --content-radius: var(--text-boxes-radius);
  --border-width: var(--text-boxes-border-width);
  --border-opacity: var(--text-boxes-border-opacity);
  --shadow-horizontal-offset: var(--text-boxes-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--text-boxes-shadow-vertical-offset);
  --shadow-blur-radius: var(--text-boxes-shadow-blur-radius);
  --shadow-opacity: var(--text-boxes-shadow-opacity);
  --shadow-visible: var(--text-boxes-shadow-visible);
}

.contains-media,
.global-media-settings {
  --media-radius-custom: var(--media-radius);
  --border-width: var(--media-border-width);
  --border-opacity: var(--media-border-opacity);
  --shadow-horizontal-offset: var(--media-shadow-horizontal-offset);
  --shadow-vertical-offset: var(--media-shadow-vertical-offset);
  --shadow-blur-radius: var(--media-shadow-blur-radius);
  --shadow-opacity: var(--media-shadow-opacity);
  --shadow-visible: var(--media-shadow-visible);
}

/* ═══════════════════════════════════════════════════════════
   🧭 SIDEBAR NAVIGATION
   ═══════════════════════════════════════════════════════════ */
    /* ========== 側邊欄 - 圖層控制 ========== */
    .sidebar {
      background: var(--glass-bg);
      backdrop-filter: blur(var(--blur));
      border-radius: 24px;
      border: 1px solid var(--header-border);
      padding: 2rem;
      overflow-y: auto;
    }



/* Sidebar Navigation */
.sidebar-nav {
 position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--header-border);
  height: var(--header-height, 52px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sidebar-title {
  background: linear-gradient(90deg, var(--cyan), var(--gold));
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255,255,255,0.5);
    margin-bottom: 1rem;
    padding: 0 1rem;
  }

.sidebar-nav ul {
  list-style: none;
}

.sidebar-nav a {
  display: block;
  padding: 0.75rem 1.5rem;
  color: var(--glass-bg);
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
  color: #fff;
  background: var(--glass-hover);
}

.sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
}

.product-desc {
  color: rgba(255, 255, 255, 0.85);
  max-width: 600px;
  margin: 10px auto 30px;
  font-size: 1.15em;
  text-align: center;
}

.divider-gold {
  border: none;
  height: 2px;
  background: linear-gradient(90deg, #f5b800, transparent);
  margin: 25px 0;
  opacity: 0.9;
}



/* ─────────────────────────────────
   Capability Card - Main Container
   ───────────────────────────────── */
.capability-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Card hover effect */
.capability-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border-color: rgba(102, 126, 234, 0.3);
}


/* Link：維持你原本互動，只把 motion 更克制 */
.capability-link{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color: var(--accent-color, #38bdf8);
  font-weight:600;
  font-size:.9rem;
  text-decoration:none;
  margin-top:.5rem;
  transition: gap 220ms var(--ease-apple, cubic-bezier(.28,.11,.32,1)),
              color 220ms var(--ease-apple, cubic-bezier(.28,.11,.32,1));
}

.capability-link:hover{
  gap:.7rem;
  color:#0ea5e9;
}

.capability-link .capability-arrow{
  transition: transform 220ms var(--ease-apple, cubic-bezier(.28,.11,.32,1));
}

.capability-link:hover .capability-arrow{
  transform: translateX(3px);
}

/* Right icon block 保留 */
.capability-icon{
  width:120px;
  height:120px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}


/* (5) Emoji motion：微微、不要浮誇 */
.capability-emoji{
  display:inline-block;
  font-size:3rem;
  filter:none;  /* 移除 heavy drop-shadow */
  transition: transform 220ms var(--ease-apple, cubic-bezier(.28,.11,.32,1));
}

.capability-card:hover .capability-emoji,
.capability-card-two-column:hover .capability-emoji{
  transform: translateY(-1px) scale(1.03);
}

/* ✅ 修正：你原本最後那段把 body-copy 變白 + 加陰影，會破壞白卡 Apple 感
   這裡直接用更乾淨的預設（不再覆蓋成白字） */
.icon-card-body-copy{
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-muted, #64748b);
  text-shadow: none;
}
/* ① 背景更乾淨：保留 dark，但加超淡層次（Apple 常見的 "quiet depth"） */
.capabilities-section{
  padding: clamp(48px, 6vw, 72px) 20px; /* ② spacing 用 clamp，更高級更穩定 */
  background:
    radial-gradient(900px 360px at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    var(--dark-bg, #0f172a);
}

/* container 不變（保持版面邏輯） */
.capabilities-container{
  max-width: 1200px;
  margin: 0 auto;
}

/* ③ 去重 + 更精準：overlay 全部確定移除（避免 hover 時又被其他 rule 蓋返） */
.capability-card::before,
.capability-card.overlay-light::before,
.capability-card.overlay-medium::before,
.capability-card.overlay-dark::before{
  content: none !important;
  display: none !important;
}

/* Subtle gradient overlay on hover */
.capability-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.capability-card:hover::before {
  opacity: 1;
}

.capability-card::before,
.capability-card::after{
  content: none !important;
  display: none !important;
  background: transparent !important;
  opacity: 0 !important;
}
/* ④ hover 文字：唔再改成 cyan（Apple 更少「變色」），改做輕微提亮 + 保持 crisp */
.capability-card:hover .icon-card-headline,
.capability-card:hover .icon-card-body-copy{
  text-shadow: none !important;
  filter: none !important;
}

/* headline hover：只提升對比，不"發光" */
.capability-card:hover .icon-card-headline{
  color: rgba(234, 244, 255, 0.94) !important;
}

/* ⑤ icon 動畫：更 Apple（短、穩、帶 easing），用 translateZ 避免抖動 */
.capability-card .capability-icon img{
  transform: translateZ(0);
  transition: transform 220ms var(--ease-apple, cubic-bezier(.28,.11,.32,1));
  will-change: transform;
}

.capability-card:hover .capability-icon img{
  transform: translateZ(0) scale(1.04);
}

/* ═══════════════════════════════════════════════════════════════ */
/* ⬆️ Back-to-top Button */
/* ═══════════════════════════════════════════════════════════════ */
#back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: linear-gradient(135deg, #38bdf8, #d946ef);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 998;
  transition: all var(--duration) var(--ease);
  display: none;
  align-items: center;
  justify-content: center;
}

#back-to-top:hover {
  transform: translateY(-4px) scale(1.1);
  box-shadow: 0 8px 24px rgba(56, 189, 248, 0.5);
}

#back-to-top.visible {
  display: flex;
}



/* ------------------------------
   6) Top Navigation
------------------------------ */
.navbar {
  position: sticky;
  top: 0;
  z-index: 1100;
  border-bottom: 1px solid rgba(17, 24, 39, 0.06);
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
/* ========================================
   📱 平板 (481px - 768px)
   ======================================== */
@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --chat-loader-size: 56px;
    --chat-loader-bottom: 70px;
    --chat-loader-right: 10px;
    --chat-loader-icon-size: 1.75rem;
  }
  .navbar {
    padding: 0.75rem 1rem !important;
  }
  .indicator-text {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


.indicator-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
}

.indicator-icon {
  font-size: var(--font-size-2xl);
}

.indicator-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  text-align: center;
}

.indicator-text strong {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-lg);
}

.indicator-action {
  font-size: var(--font-size-sm);
  opacity: 0.9;
}


.element-margin-top {
  margin-top: 5rem;
}

.grid-auto-flow {
  display: grid;
  grid-auto-flow: column;
}

.page-margin,
.shopify-challenge__container {
  margin: 7rem auto;
}

.rte-width {
  max-width: 82rem;
  margin: 0 auto 2rem;
}

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

.overflow-hidden {
  overflow: hidden;
}

.full-width-link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}



.link-with-icon {
  display: inline-flex;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-decoration: none;
  margin-bottom: 4.5rem;
  white-space: nowrap;
}

.link-with-icon .icon {
  width: 1.5rem;
  margin-left: 1rem;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

a:not([href]) {
  cursor: not-allowed;
}

.full-unstyled-link {
  text-decoration: none;
  color: currentColor;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   🎭 PLACEHOLDER & HELPERS
   ═══════════════════════════════════════════════════════════ */

details > * {
  box-sizing: border-box;
}

.break {
  word-break: break-word;
}

.visibility-hidden {
  visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════
   ♿ ACCESSIBILITY
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion) {
  .motion-reduce {
    transition: none !important;
    animation: none !important;
  }
}
/* ═══════════════════════════════════════════════════════════
   🎨 DIVIDERS & SEPARATORS
   ═══════════════════════════════════════════════════════════ */
.circle-divider::after {
  content: '\2022';
  margin: 0 1.3rem 0 1.5rem;
}

.circle-divider:last-of-type::after {
  display: none;
}

hr {
  border: none;
  height: 0.1rem;
  background-color: rgba(var(--color-foreground), 0.2);
  display: block;
  margin: 5rem 0;
}

@media screen and (min-width: 750px) {
  hr {
    margin: 7rem 0;
  }
}




/* ═══════════════════════════════════════════════════════════
   📝 FORM ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
#valuation-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 15px;
  animation: fadeSlide 1.8s ease-out;
}

.live-pulse {
  animation: pulseData 3s infinite ease-in-out;
}
/* ═══════════════════════════════════════════════════════════
   ➡️ ARROW ANIMATION
   ═══════════════════════════════════════════════════════════ */
.animate-arrow .icon-arrow path {
  transform: translateX(-0.25rem);
  transition: transform var(--duration-short) ease;
}

.animate-arrow:hover .icon-arrow path {
  transform: translateX(-0.05rem);
}

/* ═══════════════════════════════════════════════════════════
   🎨 SVG ALIGNMENT
   ═══════════════════════════════════════════════════════════ */
svg {
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   🎯 FOCUS STATES - Apple "Blue Halo" System
   Apple 的特點：統一藍色、柔和擴散、僅在鍵盤操作時顯示
   ═══════════════════════════════════════════════════════════ */

/* 1. 移除預設的生硬外框，但確保 A11y 合規 */
:focus {
  outline: none;
}

/* 2. Apple 標準焦點：使用 box-shadow 營造光暈感而非線條 */
:focus-visible {
  outline: none;
  /* 第一層是背景間隔色，第二層是藍色光暈 */
  box-shadow: 0 0 0 2px var(--white, #fff), 
              0 0 0 4px var(--blue, #007aff);
  transition: box-shadow 0.2s ease-out;
  border-radius: inherit; /* 自動適應父級圓角 */
}

/* 針對輸入框的特殊優化：藍色邊框 + 內陰影 */
input:focus-visible,
textarea:focus-visible {
  border-color: var(--blue, #007aff);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.2);
}

/* ═══════════════════════════════════════════════════════════
   📰 TITLE COMPONENT - 標題組件系統
   ═══════════════════════════════════════════════════════════ */


    
/* ⭐ Tab Button */
.tab-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0 1rem;
  
/* ═══════════════════════════════════════════════════════════
   🔘 BUTTON COMPONENT - 按鈕組件（合併版本）
   ═══════════════════════════════════════════════════════════ */

/* Secondary Button */
.button--secondary {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: none;
}
.button--secondary:hover {
  background: rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.button--tertiary {
  --alpha-button-background: 0;
  --alpha-button-border: 0.2;
}

/* Button Base Styles - 合併所有基礎樣式 */
.button,
.shopify-challenge__button,
.customer button,
.shopify-payment-button__button--unbranded {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px; /* 增加高级感的内边距 */
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: var(--radius-md, 8px); /* 保持你的变量名称 */
  background-color: var(--color-button, #007aff); /* 优先使用 Apple 蓝 */
  color: var(--color-button-text, #ffffff);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); /* 升级为 Apple 动画曲线 */
  -webkit-appearance: none;
  appearance: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 极细微底阴影 */
}
.button:after,
.shopify-challenge__button:after,
.customer button:after,
.shopify-payment-button__button--unbranded:after {
  display: none !important;
  content: none !important;
}

/* 3. Button Hover State - 悬浮升级 */
.button:not([disabled]):hover,
.shopify-challenge__button:hover,
.customer button:hover,
.shopify-payment-button__button--unbranded:hover {
  background-color: #0077ed; /* 亮度微调 */
  transform: translateY(-1px); /* 向上轻微浮动 */
  box-shadow: 0 5px 15px rgba(0, 113, 227, 0.2); /* 柔和的扩散阴影 */
}
/* 点击反馈 */
.button:active,
.customer button:active {
  transform: translateY(0) scale(0.97);
}

/* 5. 文字选择颜色 */
.button::selection,
.shopify-challenge__button::selection,
.customer button::selection {
  background-color: rgba(var(--color-button-text, 255, 255, 255), 0.3);
}

/* Shopify Accelerated Checkout */

shopify-accelerated-checkout {
  --shopify-accelerated-checkout-button-border-radius: var(--radius);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
shopify-accelerated-checkout-cart {
  --shopify-accelerated-checkout-button-border-radius: var(--radius);
  --shopify-accelerated-checkout-button-box-shadow: var(--shadow-horizontal-offset) var(--shadow-vertical-offset) var(--shadow-blur-radius)
  rgba(var(--color-shadow), var(--shadow-opacity));
}
.title--primary {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--brand-primary);
  text-align: center;
  margin: 0 0 3rem;
  font-family: var(--font-display);
}


/* ═══════════════════════════════════════════════════════════
   🔘 BUTTON STATES - 按鈕狀態
   ═══════════════════════════════════════════════════════════ */
.button:disabled,
.button[aria-disabled='true'],
.button.disabled,
.customer button:disabled,
.customer button[aria-disabled='true'],
.customer button.disabled,
.quantity__button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.template-product .product__info-container .price,
.template-product .product__info-container .product__price,
.template-product .product__info-container .price__container,
.template-product .product__info-container .price-item {
  display: none !important;
}


@media (prefers-reduced-motion: no-preference) {
  :root {
    --scroll-slidein-opacity: 0.01;
    --scroll-slidein-y: 2rem;
  }
  .animate--ambient > img,
  .animate--ambient > .svg-wrapper {
    animation: animateAmbient 30s linear infinite;
  }



    .scroll-trigger.animate--fade-in {
    opacity: 0.01;
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--fade-in {
    opacity: 1;
    animation: var(--animation-fade-in);
  }

  .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in {
    animation: var(--fadeUp);
    animation-delay: calc(var(--fadeUp) * 75ms);
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--fade-in,
  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in,
  .scroll-trigger.scroll-trigger--design-mode .slider,
  .scroll-trigger:not(.scroll-trigger--offscreen).scroll-trigger--cancel {
    opacity: 1;
    animation: none;
    transition: none;
    transform: none;
  }

  .scroll-trigger.scroll-trigger--design-mode.animate--slide-in {
    transform: translateY(0);
  }


.nav-links {
      display: flex;
      gap: 2rem;
      list-style: none;
    }

.nav-links a {
      color: var(--white);
      text-decoration: none;
      font-weight: 600;
      transition: all var(--duration);
    }



/* ═══════════════════════════════════════════════════════════
   🎭 MODAL COMPONENT - 模態框組件
   ═══════════════════════════════════════════════════════════ */

.modal,
.dialog,
.popup {
  border-radius: var(--radius-xl);
  background: var(--bg-primary);
  border: 1px solid var(--header-border);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}


.modal__close-button.link {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  height: 4.4rem;
  width: 4.4rem;
}

.modal__close-button .icon {
  width: 1.7rem;
  height: 1.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}





.section-header.animate {
  transition: top 0.15s ease-out;
}

details[open] > .search-modal {
  opacity: 1;
  animation: animateMenuOpen var(--duration-default) ease;
}

details[open] .modal-overlay {
  display: block;
}

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: rgba(var(--color-foreground), 0.5);
  top: 100%;
  left: 0;
  right: 0;
  height: 100%;
}

.search-modal {
  opacity: 0;
  border-bottom: 0.1rem solid rgba(var(--color-foreground), 0.08);
  min-height: calc(100% + var(--inputs-margin-offset) + (2 * var(--inputs-border-width)));
  height: 100%;
}
.search-modal__content-bottom {
  bottom: calc(var(--inputs-margin-offset) / 2);
}

.search-modal__content-top {
  top: calc(var(--inputs-margin-offset) / 2);
}

.search-modal__form {
  width: 100%;
  max-width: var(--search-modal-form-max, none);
}

.search-modal__close-button {
  position: var(--search-modal-close-position, absolute);
  right: var(--search-modal-close-right, clamp(0.3rem, 2vw, 1rem));
  margin-left: var(--search-modal-close-ml, 0);
}

@media screen and (min-width: 750px) {
  .search-modal {
    --search-modal-content-padding: 0 6rem;
  }
}

@media screen and (min-width: 990px) {
  .search-modal {
    --search-modal-form-max: 74.2rem;
    --search-modal-close-position: initial;
    --search-modal-close-right: auto;
    --search-modal-close-ml: 0.5rem;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .animate--hover-3d-lift .card-wrapper .card--card,
  .animate--hover-3d-lift .card-wrapper .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not(.glg-gateway__btn),
  .animate--hover-3d-lift .shopify-challenge__button,
  .animate--hover-3d-lift .customer button,
  .animate--hover-3d-lift .shopify-payment-button__button,
  .animate--hover-3d-lift .deferred-media .deferred-media__poster-button {
    transition: transform var(--duration-slow) ease, box-shadow var(--duration-slow) ease;
    transform-origin: center;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner,
  .animate--hover-3d-lift .button:not(.button--tertiary):not(.glg-gateway__btn):not([disabled]):hover,
  .animate--hover-3d-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-3d-lift .customer button:not([disabled]):hover,
  .animate--hover-3d-lift .shopify-payment-button__button:hover,
  .animate--hover-3d-lift .deferred-media:hover .deferred-media__poster-button {
    transition: transform var(--duration-extended) ease, box-shadow var(--duration-slow) ease;
    transform: rotate(1deg);
    box-shadow: -1rem -1rem 1rem -1rem rgba(0, 0, 0, 0.05), 1rem 1rem 1rem -1rem rgba(0, 0, 0, 0.05), 0 0 0.5rem 0 rgba(255, 255, 255, 0), 0 2rem 3.5rem -2rem rgba(0, 0, 0, 0.5);
  }

  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--card,
  .animate--hover-3d-lift .collage__item .card-wrapper:hover .card--standard .card__inner {
    transform: rotate(0.5deg);
  }

  .animate--hover-3d-lift .product-grid .grid__item:hover,
  .animate--hover-3d-lift .collection-list .grid__item:hover,
  .animate--hover-3d-lift .collage__item:hover,
  .animate--hover-3d-lift .blog-articles .article:hover,
  .animate--hover-3d-lift .complementary-slide li:hover {
    z-index: 2;
  }

  .animate--hover-3d-lift .product-grid {
    isolation: isolate;
  }

  .animate--hover-3d-lift .card-wrapper .card--shape.card--standard:not(.card--text) .card__inner {
    box-shadow: none;
    transition: transform var(--duration-slow) ease, filter var(--duration-slow) ease;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner {
    transition: transform calc(2 * var(--duration-extended)) ease, filter var(--duration-slow) ease;
    filter: drop-shadow(0rem 2rem 2rem rgba(0, 0, 0, 0.15)) drop-shadow(0rem 1rem 1rem rgba(0, 0, 0, 0.15));
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card::after,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__inner::after,
  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: background-position calc(2 * var(--duration-extended)) ease, opacity var(--duration-default) ease;
    background-position: 90% 0;
    background-repeat: no-repeat !important;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 55%);
    background-size: 250px 250px;
    mix-blend-mode: color-dodge;
    pointer-events: none;
    z-index: 2;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--shape.card--standard:not(.card--text) .card__inner .card__media::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .animate--hover-3d-lift .card-wrapper:hover .card--card::before,
  .animate--hover-3d-lift .card-wrapper:hover .card--standard .card__media::after {
    opacity: 0.2;
    transition: background-position 6s ease, opacity var(--duration-slow) ease;
    background-position: left;
    z-index: 2;
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not(.glg-gateway__btn),
  .animate--hover-vertical-lift .shopify-challenge__button,
  .animate--hover-vertical-lift .customer button,
  .animate--hover-vertical-lift .shopify-payment-button__button {
    transition: transform var(--duration-default) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper .card--card,
  .animate--hover-vertical-lift .card-wrapper .card--standard .card__inner {
    transition: transform var(--duration) var(--ease-out-slow);
  }

  .animate--hover-vertical-lift .card-wrapper:hover .card--card,
  .animate--hover-vertical-lift .card-wrapper:hover .card--standard .card__inner {
    transform: translateY(-0.75rem);
  }

  .animate--hover-vertical-lift .card-wrapper:active .card--card,
  .animate--hover-vertical-lift .card-wrapper:active .card--standard .card__inner {
    transform: translateY(-0.5rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not(.glg-gateway__btn):not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):hover,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover,
  .animate--hover-vertical-lift .shopify-payment-button__button:hover {
    transform: translateY(-0.25rem);
  }

  .animate--hover-vertical-lift .button:not(.button--tertiary):not(.glg-gateway__btn):not([disabled]):active,
  .animate--hover-vertical-lift .shopify-challenge__button:not([disabled]):active,
  .animate--hover-vertical-lift .customer button:not([disabled]):active,
  .animate--hover-vertical-lift .shopify-payment-button__button:active {
    transform: translateY(0);
  }

  .animate--hover-vertical-lift .button:not(.glg-gateway__btn):not([disabled]):hover::after,
  .animate--hover-vertical-lift .customer button:not([disabled]):hover::after,
  .animate--hover-vertical-lift .shopify-payment-button__button:not([disabled]):hover::after {
    --border-offset: 0.3px;
    box-shadow: 0 0 0 calc(var(--buttons-border-width) + var(--border-offset)) rgba(var(--accent-color-text), var(--border-opacity)), 0 0 0 var(--buttons-border-width) rgba(var(--accent-color), var(--alpha-button-background));
  }

  .animate--hover-vertical-lift .button:not(.glg-gateway__btn):not([disabled]).button--secondary:hover::after {
    --border-offset: 0px;
  }
}


/* ===== 錯誤提示 ===== */
.error-banner {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 24px;
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  display: none;
  align-items: center;
  gap: 2rem;
}

.error-banner.show {
  display: flex;
  animation: fadeUp 0.5s var(--ease);
}

.error-icon {
  font-size: 1.5rem;
}
.error-retry {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 600;
  transition: all var(--duration) var(--ease);
}

.error-retry:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: scale(1.05);
}


@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 280;
  stroke-dashoffset: 0;
  transform-origin: center;
  stroke: rgb(var(--color-foreground));
  animation: dash 1.4s ease-in-out infinite;
}

@media screen and (forced-colors: active) {
  .path {
    stroke: CanvasText;
  }
}

@keyframes dash {
  0% {
    stroke-dashoffset: 280;
  }
  50% {
    stroke-dashoffset: 75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 280;
    transform: rotate(450deg);
  }
}


/* ═══════════════════════════════════════════════════════════
   💡 SCENE LIGHT CONTROL - 場景光線控制
   ═══════════════════════════════════════════════════════════ */
.scene-light-control {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.9rem;
  color: #1e293b;
}


.scene-light-control input[type="range"] {
  width: 160px;
  accent-color: #60a5fa;
  cursor: pointer;
  transition: opacity var(--duration) ease;
}

.scene-light-control input[type="range"]:hover {
  opacity: 0.9;
}

  .feature-section {
    padding: 4rem 2rem;
    background: var(--dark-bg, #0f172a);
    color: #fff;
  }

   .feature-container {
    max-width: 1200px;
    margin: 0 auto;
  }
  .feature-grid:last-child {
    margin-bottom: 0;
  }
  /* 左右交替佈局 */
  .feature-grid.reverse {
    direction: rtl;
  }

  .feature-grid.reverse > * {
    direction: ltr;
  }

  .feature-content {
    padding: 2rem 0;
  }

  .feature-headline {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(90deg, var(--cyan, #38bdf8), var(--gold, #fbbf24));
    margin-bottom: 1.5rem;
  }

  .feature-copy {
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
  }

  .feature-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
  }

  .feature-list-item {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: rgba(255,255,255,0.85);
  }

  .feature-list-item::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--cyan, #38bdf8);
    font-weight: bold;
    font-size: 1.25rem;
  }

  .feature-link {
    display: inline-block;
    color: var(--cyan, #38bdf8);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.125rem;
    transition: all 0.3s ease;
    position: relative;
  }

  .feature-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan, #38bdf8), var(--gold, #fbbf24));
    transition: width 0.3s ease;
  }

  .feature-link:hover::after {
    width: 100%;
  }

  .feature-image-wrapper {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  }

  .feature-image-wrapper:hover .feature-image {
    transform: scale(1.05);
  }

  /* 響應式設計 */
  @media (max-width: 768px) {
    .feature-grid,
    .feature-grid.reverse {
      grid-template-columns: 1fr;
      gap: 2rem;
      direction: ltr;
    }

    .feature-headline {
      font-size: 2rem;
    }

    .feature-copy {
      font-size: 1rem;
    }
  }
/* Alternate Section: 微妙對比 */
.alternate-section {
  background: #fafafa;
  position: relative;
  z-index: 1;
}

.navbar.scrolled {
  padding: 0.5rem 2rem;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.gproperty-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 48px;
}

.gproperty-section {
  margin: 48px 0;
}

.gproperty-section h2 {
  margin-bottom: 12px;
}

.gproperty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.gproperty-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 24px;
  height: 100%;
}

.gproperty-card h3 {
  margin-top: 0;
  margin-bottom: 12px;
}

.gproperty-card p {
  margin-bottom: 12px;
}

.gproperty-card ul {
  padding-left: 18px;
  margin: 0;
}

.gproperty-card li {
  margin-bottom: 8px;
}

@media screen and (max-width: 989px) {
  .gproperty-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* 圖標統一樣式 */
.icon, svg-wrapper {
  font-size: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.user-details{ margin-bottom: 10px; }
.user-name{ margin: 0; font-weight: 800; }
.user-email{ margin: 2px 0 0 0; font-size: 12px; opacity: .75; }

/* 重置按钮和链接的点击高亮与鼠标手势 */
button,
a {
  cursor: pointer; 
  -webkit-tap-highlight-color: transparent; 
  outline: none;
}

/* 统一焦点环样式 */
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgb(var(--color-button, 0, 113, 227));
  outline-offset: 2px;
}

/* 列表項目對齊 */
.header li, 
.globalnav li,
.list-menu__item,
.list-social__item {
  display: flex;
  align-items: center;
}

/* 统计仪表板 */
.stats-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto 4rem;
}

.billing-toggle {
  display: inline-flex;
  gap: 8px;
  background: var(--billing-toggle-bg, rgba(0, 0, 0, 0.04));
  border-radius: 10px;
  padding: 4px;
  backdrop-filter: blur(10px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}



/* 服务对比表 */
.comparison-section {
  background: var(--glass-bg);
   -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(var(--blur));
  border-radius: 24px;
  padding: 3rem;
  margin-bottom: 5rem;
  border: 1px solid var(--header-border);
}

.comparison-table th,
.comparison-table td {
  padding: clamp(1rem, 2vw, 2rem);
  text-align: left;
  border-bottom: 1px solid var(--header-border);
}

.comparison-table th {
  background: rgba(56,189,248,0.1);
  font-weight: 700;
  color: var(--cyan) !important;
}

.comparison-table tr:hover {
  background: var(--glass-hover);
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 900px){ .grid-3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }


/* ===== Icon dot (emoji) ===== */
.cap-ico{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
  line-height: 1;
  font-size: 2.5rem;
  margin-bottom: 16px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}


.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin: var(--spacing-md) 0;
}

.service-name {
  font-weight: 600;
  color: #fff;
}

.service-cost {
  color: var(--gold);
  font-weight: 700;
  font-size: 1.1rem;
}

/* ============================================
   🛠️ GLOBAL UTILITIES (全局工具类)
   ============================================ */
/* 通用结果容器 Padding */
.result-body { 
  padding: 4px 6px; 
}

/* 文本阅读容器 (类似 Medium 的阅读体验) */
.g-body {
  margin: 0 auto;
  max-width: 48rem;
  font-size: 1.05rem;
  line-height: 1.6;
  opacity: 0.78;
}

/* 2. 缩放进场效果 */
.animate--zoom-in {
  --zoom-in-ratio: 1;
}

.animate--zoom-in > img,
.animate--zoom-in > .svg-wrapper {
  transition: scale var(--duration-short, 200ms) linear;
  scale: var(--zoom-in-ratio);
}

/* 定义缺失的关键帧 (防止动画失效) */
@keyframes slideOutLeft {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(-20px); opacity: 0; }
}

@keyframes slideOutRight {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(20px); opacity: 0; }
}

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

/* ============================================
   🗺️ SPECIFIC COMPONENTS (特定组件)
   ============================================ */

/* 城市规划 Hub 布局 */
.urban-planning-hub { 
  display: flex; 
  height: 100vh; 
  width: 100vw; 
}

/* 地图脉冲标记 */
.map-pulse-marker {
  position: relative;
}

  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: all .25s ease;
}
#backToTop.visible{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.summary-strip {
  background: linear-gradient(135deg, var(--cyan) 0%, var(--magenta) 50%, var(--gold) 100%);
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 3vw, 2rem);
  text-align: center;
  margin-top: 6rem;
}


.summary-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================================
   Apple-grade Page Transition Layer
   Owner: assets/page-transition.js
   Purpose: reversible, reduced-motion-aware navigation transition
   ============================================================ */
body.page-transition-active {
  pointer-events: none;
}
body.page-transition-active main,
body.page-transition-active .shopify-section {
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform, filter;
}
body.page-transition-left main,
body.page-transition-left .shopify-section {
  opacity: 0;
  transform: translate3d(-18px, 0, 0) scale(0.992);
  filter: blur(8px);
}
body.page-transition-right main,
body.page-transition-right .shopify-section {
  opacity: 0;
  transform: translate3d(18px, 0, 0) scale(0.992);
  filter: blur(8px);
}
body.page-transition-cancelled main,
body.page-transition-cancelled .shopify-section {
  opacity: 1;
  transform: none;
  filter: none;
}
@media (prefers-reduced-motion: reduce) {
  body.page-transition-active main,
  body.page-transition-active .shopify-section {
    transition: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}