/* ======================================================
   東江泉 天然飲用泉水 — TechVision UI v4
   Ultra-premium dark space · Neon cyan/indigo palette
   Holographic glass · Animated mesh · Cinematic depth
   ====================================================== */

/* ════════════════════════════════════════════════════
   DESIGN TOKENS
   ════════════════════════════════════════════════════ */
:root {
  /* Backgrounds — deep space layers */
  --bg-void:       #010812;
  --bg-deep:       #04101f;
  --bg-base:       #071628;
  --bg-mid:        #0b1e38;
  --bg-surface:    rgba(8,22,48,.82);
  --bg-surface-2:  rgba(5,16,38,.90);
  --bg-card:       rgba(12,26,52,.75);

  /* Borders */
  --border-subtle:  rgba(0,200,255,.12);
  --border-glow:    rgba(0,200,255,.38);
  --border-gold:    rgba(245,200,66,.30);

  /* Neon palette */
  --cyan:          #00d4ff;
  --cyan-soft:     rgba(0,212,255,.14);
  --cyan-mid:      rgba(0,212,255,.55);
  --cyan-glow:     rgba(0,212,255,.08);
  --blue:          #2962ff;
  --blue-soft:     rgba(41,98,255,.14);
  --indigo:        #7c4dff;
  --indigo-soft:   rgba(124,77,255,.12);
  --gold:          #ffcc33;
  --gold-soft:     rgba(255,204,51,.10);

  /* Text */
  --txt:           #ddeeff;
  --txt-dim:       #7aa8cb;
  --txt-ghost:     #3d6585;
  --heading:       #f0f8ff;

  /* Typography */
  --font-ui:    'Noto Sans TC','PingFang TC','Microsoft JhengHei',Arial,sans-serif;
  --font-mono:  'Courier New',Consolas,monospace;

  /* Radii */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  22px;
  --r-xl:  32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm:    0 2px 12px rgba(0,0,0,.45);
  --shadow-md:    0 8px 32px rgba(0,0,0,.60);
  --shadow-lg:    0 16px 56px rgba(0,0,0,.75);
  --glow-sm:      0 0 14px rgba(0,212,255,.28);
  --glow-md:      0 0 28px rgba(0,212,255,.38), 0 0 64px rgba(0,212,255,.14);
  --glow-lg:      0 0 50px rgba(0,212,255,.45), 0 0 100px rgba(0,212,255,.20);
  --glow-gold:    0 0 18px rgba(255,204,51,.40);
  --inset-top:    inset 0 1px 0 rgba(255,255,255,.06);

  /* Motion */
  --ease:    cubic-bezier(.4,0,.2,1);
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --t-fast:  .18s;
  --t-mid:   .30s;
  --t-slow:  .55s;

  /* Layout */
  --header-h:    70px;
  --mob-header:  60px;
}

/* ════════════════════════════════════════════════════
   RESET & BASE
   ════════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

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

body {
  font-family: var(--font-ui);
  background: var(--bg-void);
  color: var(--txt);
  line-height: 1.75;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
}

img  { display:block; max-width:100%; height:auto; }
a    { color:inherit; text-decoration:none; transition:color var(--t-mid) var(--ease); }
a:hover { color:var(--cyan); text-decoration:none; }
p    { margin-bottom:.45rem; }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.28;
  color: var(--heading);
  letter-spacing: -.01em;
}
ul { list-style:none; padding:0; margin:0; }

/* ────── UTILITIES ────── */
.text-center { text-align:center !important; }
.text-right  { text-align:right  !important; }
.text-left   { text-align:left   !important; }
.img-fluid   { max-width:100%; height:auto; display:block; }
.d-block     { display:block; }
.mx-auto     { margin-left:auto; margin-right:auto; }
.rounded     { border-radius:var(--r-sm); }
.mt-3        { margin-top:1rem; }
.mb-1        { margin-bottom:.25rem; }
.mb-4        { margin-bottom:1.5rem; }
.lead        { font-size:1.05rem; color:var(--txt-dim); }

.container       { max-width:1160px; margin:0 auto; padding:0 28px; }
.container-small { max-width:780px;  margin:0 auto; padding:0 28px; }

section { padding:56px 0; }

/* ────── GRADIENT TEXT ────── */
.gradient-gold {
  background: linear-gradient(135deg,#ffe566 0%,#d4930a 60%,#ffe566 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; background-size:200%;
  animation: shimmer 4s linear infinite;
}
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.text-color5 { color:var(--txt-ghost); }
.text-cyan   { color:var(--cyan); }
.neon-text {
  color:var(--cyan);
  text-shadow:0 0 12px rgba(0,212,255,.75),0 0 36px rgba(0,212,255,.35);
}

/* ────── GLOBAL BG MESH ────── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.028) 1px, transparent 1px);
  background-size: 72px 72px;
  animation: mesh-drift 60s linear infinite;
}
@keyframes mesh-drift {
  0%   { background-position: 0 0,    0 0; }
  100% { background-position: 72px 72px, 72px 72px; }
}

/* ────── RADIAL AMBIENT GLOWS ────── */
body::after {
  content:'';
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(41,98,255,.06) 0%, transparent 70%),
    radial-gradient(ellipse 40% 30% at 85% 75%, rgba(0,212,255,.07) 0%, transparent 70%),
    radial-gradient(ellipse 30% 25% at 50% 5%,  rgba(124,77,255,.05) 0%, transparent 70%);
}

/* ════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════ */
.btn-primary, .btn-contact, .btn-dunhua {
  display: inline-block;
  position: relative;
  padding: 9px 26px;
  background: transparent;
  color: var(--cyan) !important;
  border: 1px solid var(--border-glow);
  border-radius: var(--r-sm);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .10em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
  transition: all var(--t-mid) var(--ease);
  box-shadow: 0 0 10px rgba(0,212,255,.10), var(--inset-top);
}
/* Hover fill animation */
.btn-primary::after, .btn-contact::after, .btn-dunhua::after {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(0,212,255,.18), rgba(41,98,255,.18));
  opacity:0; transition: opacity var(--t-mid) var(--ease);
}
.btn-primary:hover, .btn-contact:hover, .btn-dunhua:hover {
  color:#fff !important;
  border-color: var(--cyan);
  box-shadow: var(--glow-md);
  transform: translateY(-2px);
  text-decoration: none;
}
.btn-primary:hover::after,
.btn-contact:hover::after,
.btn-dunhua:hover::after { opacity:1; }

/* ════════════════════════════════════════════════════
   HEADER / NAVBAR
   ════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  background: rgba(4,12,24,.80);
  backdrop-filter: saturate(200%) blur(20px);
  -webkit-backdrop-filter: saturate(200%) blur(20px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease);
}
/* Animated cyan underline */
.site-header::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent 0%, var(--cyan) 30%, var(--indigo) 70%, transparent 100%);
  opacity:.6;
  animation: header-line 6s ease-in-out infinite alternate;
}
@keyframes header-line {
  0%   { background-position: -100% 0; }
  100% { background-position: 200%  0; }
}
.site-header.scrolled {
  background: rgba(2,8,18,.92);
  box-shadow: 0 2px 24px rgba(0,0,0,.65), 0 0 40px rgba(0,212,255,.04);
}

.navbar-desktop { display:block; height:var(--header-h); }
.nav-container {
  max-width:1160px; margin:0 auto; padding:0 28px;
  height:100%; display:flex; align-items:center; gap:24px;
}
.navbar-brand img {
  display:block;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,212,255,.2));
  transition: filter var(--t-mid) var(--ease);
}
.navbar-brand:hover img { filter: brightness(1.3) drop-shadow(0 0 12px rgba(0,212,255,.5)); }

/* Nav links */
.nav-menu { display:flex; gap:0; flex:1; }
.nav-menu li a {
  display:block; padding:8px 13px;
  font-size:.80rem; font-weight:500;
  color:var(--txt-dim);
  letter-spacing:.07em; text-transform:uppercase;
  border-radius:var(--r-xs);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
  position:relative;
}
/* Animated underline */
.nav-menu li a::before {
  content:'';
  position:absolute; bottom:3px; left:13px; right:13px;
  height:1.5px; border-radius:2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 8px var(--cyan);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-bounce);
}
.nav-menu li a:hover { color:var(--cyan); background:var(--cyan-soft); }
.nav-menu li a:hover::before,
.nav-menu li a.active::before { transform:scaleX(1); }
.nav-menu li a.active { color:var(--cyan); font-weight:700; }

.nav-right { display:flex; align-items:center; gap:12px; flex-shrink:0; }
.nav-phone {
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; color:var(--txt-ghost); letter-spacing:.03em;
  padding:6px 10px; border-radius:var(--r-xs);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-phone:hover { color:var(--cyan); background:var(--cyan-soft); }

/* ────── MOBILE NAV ────── */
.navbar-mobile { display:none; }
.mobile-nav-top {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 20px; height:var(--mob-header);
}
.mobile-toggle {
  display:flex; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:5px;
}
.mobile-toggle span {
  display:block; width:24px; height:2px;
  background: var(--cyan); border-radius:2px;
  transition: all .3s var(--ease);
  box-shadow: 0 0 6px rgba(0,212,255,.6);
}
.mobile-toggle.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.mobile-toggle.is-active span:nth-child(2) { opacity:0; transform:scaleX(0); }
.mobile-toggle.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display:none; padding:12px 20px 24px;
  border-top:1px solid var(--border-subtle);
  background: rgba(2,8,20,.97);
  backdrop-filter: blur(20px);
}
.mobile-menu.open { display:block; animation:slide-down .25s var(--ease); }
@keyframes slide-down { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.mobile-menu li { border-bottom:1px solid rgba(0,212,255,.07); }
.mobile-menu li a {
  display:block; padding:13px 4px;
  font-size:.9rem; color:var(--txt-dim);
  letter-spacing:.05em; text-transform:uppercase;
  transition: color var(--t-fast) var(--ease), padding var(--t-fast) var(--ease);
}
.mobile-menu li a:hover { color:var(--cyan); padding-left:10px; }

body { padding-top:var(--header-h); }

/* ════════════════════════════════════════════════════
   KEYFRAME LIBRARY
   ════════════════════════════════════════════════════ */
@keyframes bounceIn {
  0%   { opacity:0; transform:scale(.45) translateY(30px); }
  55%  { opacity:1; transform:scale(1.06) translateY(-4px); }
  75%  { transform:scale(.97); }
  100% { transform:scale(1) translateY(0); }
}
@keyframes float-slow {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
@keyframes float-fast {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}
@keyframes glow-pulse {
  0%,100% { opacity:.55; }
  50%      { opacity:1; }
}
@keyframes scan-v {
  0%   { transform:translateY(-200px); }
  100% { transform:translateY(calc(100% + 200px)); }
}
@keyframes rotate-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}
@keyframes data-ticker {
  from { background-position: 0 0; }
  to   { background-position: 0 400px; }
}

/* ────── SCROLL FADE-IN ────── */
.scroll-anim {
  opacity:0; transform:translateY(28px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.scroll-anim.scroll-visible { opacity:1; transform:none; }

.web3-box.anim-bounce-in {
  animation: bounceIn 1.5s cubic-bezier(.36,.07,.19,.97) both;
}

/* ════════════════════════════════════════════════════
   SEC 1 — WEB3 BRAND BANNER
   ════════════════════════════════════════════════════ */
.section-web3 {
  padding: 40px 0 32px;
  background: var(--bg-void);
  position: relative; z-index: 1;
}

.web3-box {
  position: relative;
  border-radius: var(--r-xl);
  padding: 44px 48px 40px;
  background: linear-gradient(145deg, rgba(8,22,52,.88) 0%, rgba(4,14,36,.92) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-glow);
  box-shadow:
    var(--shadow-lg),
    0 0 0 1px rgba(0,212,255,.06),
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 -1px 0 rgba(0,0,0,.3);
  overflow: hidden;
}

/* HUD corner brackets */
.web3-box::before {
  content:'';
  position:absolute; top:14px; left:14px;
  width:28px; height:28px;
  border-top: 2px solid var(--cyan);
  border-left: 2px solid var(--cyan);
  border-radius: 4px 0 0 0;
  filter: drop-shadow(0 0 4px var(--cyan));
  animation: glow-pulse 2.4s ease-in-out infinite;
}
.web3-box::after {
  content:'';
  position:absolute; bottom:14px; right:14px;
  width:28px; height:28px;
  border-bottom: 2px solid var(--cyan);
  border-right: 2px solid var(--cyan);
  border-radius: 0 0 4px 0;
  filter: drop-shadow(0 0 4px var(--cyan));
  animation: glow-pulse 2.4s ease-in-out infinite reverse;
}

/* Vertical scan beam */
.web3-box .scanline {
  position:absolute; left:0; right:0;
  height:80px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(0,212,255,.06) 40%,
    rgba(0,212,255,.12) 50%,
    rgba(0,212,255,.06) 60%,
    transparent 100%);
  animation: scan-v 5s linear infinite;
  pointer-events:none;
}

/* Top-right corner extra brackets */
.web3-box .hud-tr {
  position:absolute; top:14px; right:14px;
  width:28px; height:28px;
  border-top: 2px solid rgba(124,77,255,.7);
  border-right: 2px solid rgba(124,77,255,.7);
  border-radius: 0 4px 0 0;
  animation: glow-pulse 2.8s ease-in-out infinite .5s;
}
.web3-box .hud-bl {
  position:absolute; bottom:14px; left:14px;
  width:28px; height:28px;
  border-bottom: 2px solid rgba(124,77,255,.7);
  border-left: 2px solid rgba(124,77,255,.7);
  border-radius: 0 0 0 4px;
  animation: glow-pulse 2.8s ease-in-out infinite .5s reverse;
}

.logo-center { margin:20px 0; }
.logo-big {
  max-width:200px; margin:0 auto;
  filter: drop-shadow(0 0 22px rgba(0,212,255,.55)) brightness(1.1);
  animation: float-slow 7s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════
   SEC 2 — BOTTLE HERO
   ════════════════════════════════════════════════════ */
.section-bottle-hero {
  padding: 36px 0 32px;
  background: linear-gradient(180deg, var(--bg-void) 0%, var(--bg-deep) 100%);
  position:relative; z-index:1;
}
.label-2025 {
  font-size:1.75rem;
  color:var(--txt-ghost);
  font-family:var(--font-mono);
  letter-spacing:.06em;
  margin-bottom:10px;
}
.bottle-title {
  font-size:1.9rem; margin-bottom:22px;
}
.bottle-title span {
  color:var(--cyan) !important;
  text-shadow: 0 0 24px rgba(0,212,255,.6);
}
.bottle-figure { text-align:center; }
.bottle-img {
  max-width:400px; margin:0 auto;
  filter:
    drop-shadow(0 0 48px rgba(0,212,255,.32))
    drop-shadow(0 28px 56px rgba(0,0,0,.70));
  animation: float-slow 8s ease-in-out infinite;
  transition: filter var(--t-mid) var(--ease);
}
.bottle-img:hover {
  filter:
    drop-shadow(0 0 72px rgba(0,212,255,.55))
    drop-shadow(0 28px 56px rgba(0,0,0,.70));
}
.section-bottle-hero figcaption p { color:var(--txt-dim); }

/* ════════════════════════════════════════════════════
   DIVIDER
   ════════════════════════════════════════════════════ */
.section-divider { padding:4px 0; }
.section-divider hr {
  border:none; height:1px;
  background: linear-gradient(90deg, transparent, var(--border-glow), var(--indigo-soft), transparent);
}

/* ════════════════════════════════════════════════════
   SEC 3 — WATER QUALITY STATS
   ════════════════════════════════════════════════════ */
.section-stats {
  padding: 72px 0 64px;
  background: var(--bg-deep);
  position:relative; z-index:1;
}
/* Top accent line */
.section-stats::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--blue), var(--cyan), var(--blue), transparent);
}

.stats-header { margin-bottom:20px; }
.stats-header h1 { color:var(--heading); }

.stats-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:0;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  overflow:hidden;
  background: var(--bg-surface);
  backdrop-filter:blur(16px);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0,212,255,.04);
  position:relative;
}
/* Subtle horizontal data-line texture */
.stats-grid::after {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0px,
    transparent 39px,
    rgba(0,212,255,.025) 40px
  );
}

.stat-item {
  padding:56px 32px 40px;
  position:relative;
  transition: background var(--t-mid) var(--ease);
  border-right:1px solid var(--border-subtle);
  z-index:1;
}
.stat-item:last-child { border-right:none; }

/* Hover top bar */
.stat-item::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px var(--cyan);
  transform: scaleX(0); transform-origin:left;
  transition: transform .45s var(--ease-bounce);
}
.stat-item:hover { background: rgba(0,212,255,.04); }
.stat-item:hover::before { transform:scaleX(1); }

.stat-number {
  display:block;
  font-size:2.8rem; font-weight:800;
  color:var(--cyan); line-height:1;
  letter-spacing:-.03em;
  font-family:var(--font-mono);
  text-shadow: 0 0 24px rgba(0,212,255,.7), 0 0 56px rgba(0,212,255,.3);
}

.stat-divider {
  width:44px; border:none;
  border-top:2px solid var(--cyan);
  margin:16px 0 24px;
  box-shadow: 0 0 10px rgba(0,212,255,.6);
}
.stat-label { margin-bottom:0; }
.stat-label span { color:var(--cyan) !important; }
.stat-item p { font-size:.97rem; color:var(--txt-dim); margin-bottom:4px; }

/* ════════════════════════════════════════════════════
   SEC 4 — IMAGE MOSAIC
   ════════════════════════════════════════════════════ */
.section-mosaic {
  padding:60px 0 40px;
  background: var(--bg-mid);
  position:relative; z-index:1;
}
.section-mosaic::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--indigo), var(--cyan), var(--blue));
  animation: header-line 8s linear infinite;
}

.mosaic-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-auto-rows:60px;
  gap:14px; align-items:center;
}
.mosaic-title-block { grid-column:1/6; grid-row:2/5; display:flex; align-items:center; justify-content:center; }
.mosaic-title-block h2 { font-size:2rem; color:var(--heading); }
.mosaic-shuriken {
  grid-column:9/13; grid-row:1/9; overflow:hidden; border-radius:50%;
  box-shadow:0 0 36px rgba(0,212,255,.28), var(--shadow-md);
  border:1px solid var(--border-glow);
  transition: box-shadow var(--t-mid) var(--ease);
}
.mosaic-shuriken:hover { box-shadow:0 0 56px rgba(0,212,255,.45), var(--shadow-md); }
.img-shuriken { width:100%; height:100%; object-fit:cover; clip-path:polygon(50% 0%,80% 20%,100% 50%,80% 80%,50% 100%,20% 80%,0% 50%,20% 20%); border-radius:50%; }
.mosaic-subtitle { grid-column:2/5; grid-row:13/15; display:flex; align-items:center; }
.mosaic-subtitle p { margin:0; font-size:1rem; color:var(--txt-dim); }
.mosaic-scene-large { grid-column:1/5; grid-row:5/11; overflow:hidden; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; box-shadow:0 0 28px rgba(0,0,0,.7), var(--shadow-md); border:1px solid var(--border-subtle); transition:box-shadow var(--t-mid) var(--ease); }
.mosaic-scene-large:hover { box-shadow:0 0 40px rgba(0,212,255,.18), var(--shadow-md); }
.img-blob-door { width:100%; height:100%; object-fit:cover; border-radius:50% 50% 50% 50%/60% 60% 40% 40%; }
.mosaic-desc { grid-column:5/9; grid-row:7/9; display:flex; align-items:center; }
.mosaic-desc p { font-size:.9rem; color:var(--txt-dim); line-height:1.6; }
.mosaic-center-img { grid-column:5/10; grid-row:9/17; overflow:hidden; border-radius:var(--r-lg); box-shadow:0 0 40px rgba(0,0,0,.8), var(--shadow-md); border:1px solid var(--border-subtle); transition:box-shadow var(--t-mid) var(--ease); }
.mosaic-center-img:hover { box-shadow:0 0 56px rgba(0,212,255,.18), var(--shadow-md); }
.img-rounded-square { width:100%; height:100%; object-fit:cover; border-radius:var(--r-lg); }
.mosaic-scene-bottom { grid-column:1/6; grid-row:14/23; overflow:hidden; border-radius:30% 70% 70% 30%/30% 30% 70% 70%; box-shadow:0 0 24px rgba(0,0,0,.6); border:1px solid var(--border-subtle); transition:box-shadow var(--t-mid) var(--ease); }
.mosaic-scene-bottom:hover { box-shadow:0 0 36px rgba(0,212,255,.14); }
.img-blob { width:100%; height:100%; object-fit:cover; border-radius:30% 70% 70% 30%/30% 30% 70% 70%; }
.mosaic-scene-circle { grid-column:9/13; grid-row:15/22; overflow:hidden; border-radius:50%; box-shadow:0 0 28px rgba(0,212,255,.22), var(--shadow-md); border:1px solid var(--border-subtle); transition:box-shadow var(--t-mid) var(--ease); }
.mosaic-scene-circle:hover { box-shadow:0 0 48px rgba(0,212,255,.38); }
.img-circle { width:100%; height:100%; object-fit:cover; border-radius:50%; }

/* ════════════════════════════════════════════════════
   SEC 5 — SOURCE TEXT
   ════════════════════════════════════════════════════ */
.section-source-text {
  padding:60px 0 88px;
  background: var(--bg-base);
  text-align:center; position:relative; z-index:1;
}
.section-source-text p {
  font-size:1rem; color:var(--txt-dim);
  max-width:720px; margin:0 auto .6rem;
}
.section-source-text p:first-child {
  font-size:1.15rem; font-weight:700; color:var(--heading);
}

/* ════════════════════════════════════════════════════
   SEC 6 — CERTIFICATION HERO
   ════════════════════════════════════════════════════ */
.section-cert-hero {
  padding:56px 0 32px;
  background: var(--bg-deep); position:relative; z-index:1;
}
.cert-hero-img { position:relative; margin-bottom:28px; }
.img-ipad {
  max-width:920px; width:100%;
  border-radius:var(--r-lg); margin:0 auto;
  border:1px solid var(--border-subtle);
  box-shadow:
    0 0 72px rgba(0,212,255,.16),
    0 32px 88px rgba(0,0,0,.85),
    var(--inset-top);
}
.cert-hero-title { padding:24px 0 16px; }
.cert-hero-title h2 { color:var(--heading); }

/* ════════════════════════════════════════════════════
   SECTION TITLES
   ════════════════════════════════════════════════════ */
.section-title { padding:72px 0 10px; text-align:center; }
.section-title h2, .section-title h6 {
  position:relative; display:inline-block; color:var(--heading);
}
.section-title h2::after, .section-title h6::after {
  content:'';
  display:block; width:56px; height:2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  border-radius:2px; margin:12px auto 0;
  box-shadow: 0 0 12px rgba(0,212,255,.7);
}

/* ════════════════════════════════════════════════════
   SEC 8 — CERT GALLERY
   ════════════════════════════════════════════════════ */
.section-gallery { padding:24px 0 72px; background:var(--bg-mid); }
.masonry-2col { display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; }
.masonry-col  { display:flex; flex-direction:column; gap:18px; }
.gallery-img {
  width:100%; height:auto;
  border-radius:var(--r-md);
  border:1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}
.gallery-img:hover {
  transform:translateY(-6px) scale(1.015);
  border-color:var(--cyan-mid);
  box-shadow:0 0 28px rgba(0,212,255,.22), var(--shadow-lg);
}

/* ════════════════════════════════════════════════════
   SEC 9 — ADVANCED PRODUCTION FEATURES
   ════════════════════════════════════════════════════ */
.section-features {
  padding:80px 0 72px;
  background: var(--bg-base);
  position:relative; z-index:1; overflow:hidden;
}
/* Ambient orbs */
.section-features::before {
  content:'';
  position:absolute; top:-160px; right:-160px;
  width:480px; height:480px; border-radius:50%;
  background: radial-gradient(circle, rgba(0,212,255,.06) 0%, transparent 70%);
  pointer-events:none; animation:float-slow 12s ease-in-out infinite;
}
.section-features::after {
  content:'';
  position:absolute; bottom:-120px; left:-120px;
  width:400px; height:400px; border-radius:50%;
  background: radial-gradient(circle, rgba(41,98,255,.07) 0%, transparent 70%);
  pointer-events:none; animation:float-slow 15s ease-in-out infinite reverse;
}

.section-features-title { font-size:2.1rem; color:var(--heading); }

.features-grid {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:26px; margin-top:44px; position:relative; z-index:1;
}

.feature-item {
  background: var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:44px 30px 38px; text-align:center;
  box-shadow: var(--shadow-md), var(--inset-top);
  backdrop-filter:blur(14px);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
  position:relative; overflow:hidden;
}
/* Holographic shimmer on hover */
.feature-item::before {
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(135deg,
    rgba(0,212,255,.0) 0%,
    rgba(124,77,255,.06) 50%,
    rgba(0,212,255,.0) 100%);
  opacity:0;
  transition:opacity var(--t-mid) var(--ease);
}
/* Top glow bar */
.feature-item::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, var(--blue), var(--cyan), var(--indigo));
  opacity:0; transform:scaleX(0);
  transition: opacity var(--t-mid) var(--ease), transform .45s var(--ease-bounce);
}
.feature-item:hover {
  transform:translateY(-10px);
  border-color:var(--cyan-mid);
  box-shadow: var(--glow-md), var(--shadow-lg);
}
.feature-item:hover::before { opacity:1; }
.feature-item:hover::after  { opacity:1; transform:scaleX(1); }

.feature-icon {
  font-size:2rem !important;
  color:var(--cyan) !important;
  border:1px solid var(--border-glow) !important;
  border-radius:var(--r-md) !important;
  padding:18px !important;
  background: rgba(0,212,255,.08) !important;
  display:inline-block; margin-bottom:6px;
  transition:
    background var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease);
  box-shadow: 0 0 14px rgba(0,212,255,.15);
}
.feature-item:hover .feature-icon {
  background: rgba(0,212,255,.18) !important;
  border-color:var(--cyan) !important;
  box-shadow: var(--glow-md) !important;
}
.feature-item h4 { font-size:1.2rem; margin-top:20px; margin-bottom:10px; color:var(--heading); }
.feature-item p  { font-size:.93rem; color:var(--txt-dim); margin-bottom:4px; }

/* ════════════════════════════════════════════════════
   SEC 11 — PRODUCTION GALLERY 2×2
   ════════════════════════════════════════════════════ */
.section-prod-gallery { padding:24px 0 72px; background:var(--bg-mid); }
.prod-gallery-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.prod-gallery-item {
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--border-subtle);
  box-shadow: var(--shadow-md);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}
.prod-gallery-item:hover {
  transform:translateY(-6px);
  border-color:var(--cyan-mid);
  box-shadow:0 0 24px rgba(0,212,255,.20), var(--shadow-lg);
}
.prod-gallery-item img { width:100%; height:auto; object-fit:cover; display:block; }

/* ════════════════════════════════════════════════════
   SEC 12 — MASONRY 4-BLOCK + FLOATING LOGO
   ════════════════════════════════════════════════════ */
.section-masonry-block {
  padding:80px 0 88px;
  background: var(--bg-deep);
  position:relative; z-index:1;
}

.masonry-block-grid {
  display:grid; grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:14px; position:relative;
}

.mb-block {
  border-radius:var(--r-lg);
  padding:36px 30px 30px;
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:178px;
  border:1px solid var(--border-subtle);
  backdrop-filter:blur(14px);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-sm), var(--inset-top);
}
/* Animated scan beam on hover */
.mb-block::after {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:0; transition:opacity var(--t-mid) var(--ease);
}
.mb-block:hover { transform:translateY(-5px); border-color:var(--cyan-mid); }
.mb-block:hover::after { opacity:1; }
.mb-block p { font-size:.95rem; margin-bottom:5px; }

/* TL */
.mb-block-tl {
  grid-column:1; grid-row:1;
  background: linear-gradient(135deg, rgba(0,212,255,.06) 0%, rgba(8,22,52,.88) 100%);
}
.mb-block-tl:hover { box-shadow:0 0 22px rgba(0,212,255,.14), var(--shadow-md); }

/* TR */
.mb-block-tr {
  grid-column:2; grid-row:1;
  background: linear-gradient(225deg, rgba(41,98,255,.08) 0%, rgba(8,22,52,.88) 100%);
  text-align:right;
}
.mb-block-tr h4, .mb-block-tr p { text-align:right; }
.mb-block-tr:hover { box-shadow:0 0 22px rgba(41,98,255,.18), var(--shadow-md); }

/* BL — neon accent */
.mb-block-bl {
  grid-column:1; grid-row:2;
  background: linear-gradient(135deg, rgba(0,90,180,.55) 0%, rgba(0,212,255,.20) 100%);
  border-color:rgba(0,212,255,.32);
}
.mb-block-bl h4  { color:var(--cyan); text-shadow:0 0 12px rgba(0,212,255,.6); }
.mb-block-bl p   { color:rgba(200,240,255,.88); }
.mb-block-bl:hover { box-shadow:var(--glow-md); border-color:var(--cyan-mid); }

/* BR */
.mb-block-br {
  grid-column:2; grid-row:2;
  background: linear-gradient(225deg, rgba(124,77,255,.08) 0%, rgba(8,22,52,.88) 100%);
  text-align:right;
}
.mb-block-br h4, .mb-block-br p { text-align:right; }
.mb-block-br:hover { box-shadow:0 0 22px rgba(124,77,255,.18), var(--shadow-md); }

/* H4 colors */
.mb-block-tl h4 span,
.mb-block-tr h4 span,
.mb-block-br h4 span {
  color:var(--cyan) !important;
  text-shadow:0 0 12px rgba(0,212,255,.45);
}

/* Floating center logo */
.mb-block-center {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%); z-index:10; pointer-events:none;
}
.img-circle-logo {
  width:116px; height:116px; object-fit:contain;
  border-radius:50%;
  background: linear-gradient(135deg, var(--bg-deep), var(--bg-mid));
  padding:10px; display:block;
  border:1px solid var(--border-glow);
  box-shadow:
    var(--glow-md),
    0 8px 40px rgba(0,0,0,.8);
  animation: glow-pulse 3.2s ease-in-out infinite;
  filter:brightness(1.1) drop-shadow(0 0 8px rgba(0,212,255,.35));
}

/* ════════════════════════════════════════════════════
   SEC 13 — REPORT IMAGE
   ════════════════════════════════════════════════════ */
.section-report { padding:60px 0 28px; background:var(--bg-void); }
.report-img {
  max-width:980px; width:100%;
  border-radius:var(--r-md); margin:0 auto;
  border:1px solid var(--border-subtle);
  box-shadow:0 0 48px rgba(0,0,0,.8), 0 0 24px rgba(0,212,255,.07);
}

/* ════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════ */
footer {
  background: var(--bg-deep);
  border-top:1px solid var(--border-subtle);
  padding:0; position:relative; overflow:hidden;
}
/* Top glow line */
footer::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), var(--indigo), var(--cyan), transparent);
  opacity:.6;
}
/* Subtle data-grid texture in footer */
footer::after {
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,212,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.018) 1px, transparent 1px);
  background-size:48px 48px;
}

.footer-main { padding:48px 24px 36px; text-align:center; position:relative; z-index:1; }
.footer-social { margin-bottom:14px; }

.social-link {
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:50%;
  background: var(--cyan-soft);
  color:var(--cyan);
  border:1px solid var(--border-glow);
  box-shadow: var(--glow-sm);
  transition: all var(--t-mid) var(--ease);
  position:relative; overflow:hidden;
}
.social-link::before {
  content:'';
  position:absolute; inset:0; border-radius:50%;
  background: var(--cyan);
  transform:scale(0); transition:transform var(--t-mid) var(--ease-bounce);
}
.social-link .fa { font-size:1.15rem; line-height:1; position:relative; z-index:1; }
.social-link:hover {
  color:#000;
  border-color:var(--cyan);
  box-shadow:var(--glow-lg);
  transform:translateY(-3px);
  text-decoration:none;
}
.social-link:hover::before { transform:scale(1); }

.slogan-text { font-size:1.1rem; margin-top:8px; color:var(--txt-dim); }
.footer-tagline { margin:6px 0 16px; }
.footer-tagline span { color:var(--cyan) !important; text-shadow:0 0 12px rgba(0,212,255,.45); }
.footer-company { font-size:1rem; color:var(--txt); font-weight:600; }
.footer-company-en { font-size:.85rem; color:var(--txt-ghost); margin-bottom:12px; }
.footer-main p { font-size:.87rem; color:var(--txt-dim); }

.footer-email-list {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:24px; margin:16px 0; padding:0;
}
.footer-email-list li { font-size:.87rem; }
.footer-email-list a { color:var(--cyan); transition:color var(--t-fast) var(--ease), text-shadow var(--t-fast) var(--ease); }
.footer-email-list a:hover { color:#fff; text-shadow:0 0 10px var(--cyan); }

.footer-logo-bar {
  padding:22px 24px 28px;
  border-top:1px solid var(--border-subtle);
  background:rgba(0,212,255,.025);
  text-align:center; position:relative; z-index:1;
}
.footer-wechat-qr {
  width:180px; height:auto; object-fit:contain;
  margin:0 auto; border-radius:var(--r-md);
  border:1px solid var(--border-subtle);
  box-shadow:0 0 24px rgba(0,212,255,.14);
  display:block; filter:brightness(.92) contrast(1.05);
}

.footer-copyright {
  padding:14px 24px;
  border-top:1px solid var(--border-subtle);
  background:rgba(0,0,0,.35);
  position:relative; z-index:1;
}
.footer-copyright p {
  font-size:.78rem; color:var(--txt-ghost);
  margin:0; letter-spacing:.05em; font-family:var(--font-mono);
}

/* ════════════════════════════════════════════════════
   SCROLL-TO-TOP
   ════════════════════════════════════════════════════ */
#scrolltop-wrapper { position:fixed; bottom:30px; right:30px; z-index:999; }
#btn-scrolltop {
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background: var(--cyan-soft);
  color:var(--cyan);
  border:1px solid var(--border-glow);
  box-shadow:var(--glow-md);
  opacity:0; pointer-events:none;
  transition:opacity .35s, transform var(--t-mid) var(--ease-bounce), box-shadow var(--t-mid) var(--ease);
  position:relative; overflow:hidden;
}
#btn-scrolltop::before {
  content:'';
  position:absolute; inset:0; border-radius:50%;
  background:var(--cyan);
  transform:scale(0); transition:transform var(--t-mid) var(--ease-bounce);
}
#btn-scrolltop:hover {
  color:#000;
  transform:scale(1.14);
  box-shadow:var(--glow-lg);
  text-decoration:none;
}
#btn-scrolltop:hover::before { transform:scale(1); }
#btn-scrolltop .fa { font-size:1rem; line-height:1; position:relative; z-index:1; }

/* ════════════════════════════════════════════════════
   HOME POPUP
   ════════════════════════════════════════════════════ */
#site-popup-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(1,5,16,.82);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
#site-popup-overlay.popup-visible { opacity:1; pointer-events:auto; }

.popup-box {
  background: linear-gradient(145deg, rgba(8,22,52,.95) 0%, rgba(4,12,32,.98) 100%);
  border:1px solid var(--border-glow);
  border-radius:var(--r-xl);
  max-width:430px; width:100%;
  padding:38px 32px 32px;
  position:relative;
  box-shadow: var(--glow-md), var(--shadow-lg), var(--inset-top);
  transform:scale(.82) translateY(20px);
  transition:transform .45s var(--ease-bounce);
  max-height:90vh; overflow-y:auto;
  backdrop-filter:blur(24px);
}
#site-popup-overlay.popup-visible .popup-box { transform:scale(1) translateY(0); }

.popup-close {
  position:absolute; top:14px; right:18px;
  background:none; border:none; font-size:1.6rem;
  color:var(--txt-ghost); cursor:pointer; line-height:1;
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.popup-close:hover { color:var(--cyan); transform:rotate(90deg); }
.popup-inner { text-align:center; }
.popup-logo { margin-bottom:14px; }
.popup-logo-img { width:96px; margin:0 auto; filter:drop-shadow(0 0 12px rgba(0,212,255,.45)); }
.popup-title { font-size:1.3rem; color:var(--heading); margin-bottom:4px; }
.popup-sub { font-size:.88rem; color:var(--txt-ghost); margin-bottom:20px; }
.popup-highlight {
  background:rgba(124,77,255,.09);
  border:1px solid rgba(124,77,255,.28);
  border-radius:var(--r-md); padding:18px 16px; margin-bottom:20px;
}
.popup-highlight p { font-size:.98rem; margin-bottom:6px; color:var(--txt); }
.popup-note { font-size:.82rem; color:var(--txt-ghost); margin-top:4px; margin-bottom:0; }
.popup-bottle { margin:12px 0 20px; }
.popup-bottle-img { width:80px; margin:0 auto; filter:drop-shadow(0 0 14px rgba(0,212,255,.35)); }
.popup-btn {
  display:inline-block;
  background:transparent; color:var(--cyan);
  border:1px solid var(--cyan);
  padding:12px 38px; border-radius:var(--r-sm);
  font-size:1rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  transition:all var(--t-mid) var(--ease); text-decoration:none;
  box-shadow:0 0 16px rgba(0,212,255,.22);
  position:relative; overflow:hidden;
}
.popup-btn::after {
  content:'';
  position:absolute; inset:0;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.popup-btn:hover { color:#000 !important; box-shadow:var(--glow-lg); transform:translateY(-2px); text-decoration:none; }
.popup-btn:hover::after { transform:scaleX(1); }
.popup-btn span { position:relative; z-index:1; }

/* ════════════════════════════════════════════════════
   CHAN-PIN POPUP
   ════════════════════════════════════════════════════ */
#chanpin-popup-overlay {
  position:fixed; inset:0; z-index:9999;
  background:rgba(1,5,16,.82);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; opacity:0; pointer-events:none;
  transition:opacity .4s var(--ease);
}
#chanpin-popup-overlay.popup-visible { opacity:1; pointer-events:auto; }
#chanpin-popup-overlay.popup-visible .popup-box { transform:scale(1) translateY(0); }

.popup-banner-style {
  background: linear-gradient(135deg, rgba(24,0,56,.92) 0%, rgba(0,20,72,.92) 60%, rgba(0,40,88,.92) 100%);
  border:1px solid var(--border-glow);
  border-radius:var(--r-md);
  padding:48px 38px; text-align:center;
  backdrop-filter:blur(14px);
  box-shadow:var(--glow-md), var(--shadow-lg);
}
.popup-banner-style p  { color:var(--txt-dim); font-size:1rem; margin-bottom:10px; }
.popup-banner-style h2 { font-size:1.2rem; font-weight:700; margin-bottom:14px; color:var(--heading); }

/* ════════════════════════════════════════════════════
   SUB-PAGE: Chan-Pin
   ════════════════════════════════════════════════════ */
.section-gallery-products { padding:60px 0 52px; background:var(--bg-void); }

/* ════════════════════════════════════════════════════
   SUB-PAGE: Our-Services
   ════════════════════════════════════════════════════ */
.section-story-gallery { padding:36px 0 72px; background:var(--bg-void); }
.story-gallery-col { display:flex; flex-direction:column; gap:22px; max-width:980px; margin:0 auto; }
.story-img {
  width:100%; height:auto;
  border-radius:var(--r-md); object-fit:cover;
  border:1px solid var(--border-subtle);
  box-shadow:var(--shadow-md);
  transition:
    transform var(--t-mid) var(--ease),
    box-shadow var(--t-mid) var(--ease),
    border-color var(--t-mid) var(--ease);
}
.story-img:hover {
  transform:translateY(-6px);
  border-color:var(--cyan-mid);
  box-shadow:0 0 28px rgba(0,212,255,.18), var(--shadow-lg);
}

/* ════════════════════════════════════════════════════
   SUB-PAGE: Jobs
   ════════════════════════════════════════════════════ */
.jobs-topbar {
  background:rgba(4,12,24,.92); backdrop-filter:blur(12px);
  border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);
  padding:16px 0;
}
.jobs-topbar-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.jobs-title { font-size:1.1rem; font-weight:700; color:var(--heading); letter-spacing:.04em; }
.jobs-search { display:flex; gap:8px; }
.search-input-wrap {
  display:flex; border:1px solid var(--border-subtle);
  border-radius:var(--r-sm); overflow:hidden; background:var(--bg-surface-2);
}
.jobs-search-input {
  border:none; background:transparent; padding:8px 13px;
  font-size:.9rem; outline:none; min-width:180px;
  color:var(--txt); font-family:var(--font-ui);
}
.jobs-search-btn {
  background:var(--cyan-soft); border:none;
  border-left:1px solid var(--border-subtle);
  padding:8px 14px; cursor:pointer; color:var(--cyan);
  transition:background var(--t-fast) var(--ease);
}
.jobs-search-btn:hover { background:rgba(0,212,255,.22); }
.jobs-container { padding:60px 0 80px; }
.jobs-empty { max-width:520px; margin:0 auto; text-align:center; }
.jobs-empty-text { font-size:1.05rem; color:var(--txt-dim); margin-bottom:30px; }
.jobs-empty-img {
  width:50%; max-width:270px; margin:0 auto 30px; display:block;
  filter:brightness(.75) hue-rotate(180deg) saturate(.55);
}

/* ════════════════════════════════════════════════════
   SUB-PAGE: Contact
   ════════════════════════════════════════════════════ */
.contact-hero {
  position:relative; height:230px;
  display:flex; align-items:center; overflow:hidden;
  background: linear-gradient(135deg, var(--bg-mid) 0%, var(--bg-base) 100%);
}
.contact-hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(0,212,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.035) 1px, transparent 1px);
  background-size:44px 44px;
}
.contact-hero::after {
  content:'';
  position:absolute; bottom:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--cyan), var(--indigo), transparent);
  opacity:.55;
}
.contact-hero-bg, .contact-hero-overlay { display:none; }
.contact-hero-content { position:relative; z-index:2; color:var(--heading); }
.contact-hero-content h1 { font-size:2.2rem; color:var(--heading); letter-spacing:.04em; }

.contact-main { padding:52px 0 96px; background:var(--bg-mid); }
.contact-map {
  margin-bottom:40px; border-radius:var(--r-md);
  overflow:hidden; border:1px solid var(--border-subtle);
  box-shadow:0 0 28px rgba(0,0,0,.65);
}
.contact-map iframe { display:block; filter:invert(1) hue-rotate(180deg) brightness(.82) saturate(.85); }
.contact-promo { margin-bottom:36px; }
.contact-promo h3 { font-size:1.15rem; font-weight:700; margin-bottom:8px; }

.contact-form-wrap {
  background: var(--bg-surface);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  padding:44px 40px;
  box-shadow:var(--shadow-lg), var(--inset-top);
  backdrop-filter:blur(18px);
}
.contact-form .form-field { margin-bottom:24px; }
.contact-form label {
  display:block; font-size:.82rem; font-weight:700;
  color:var(--txt-dim); margin-bottom:8px;
  letter-spacing:.06em; text-transform:uppercase;
}
.contact-form .required { color:#ff6b6b; }

.form-control, .form-select {
  width:100%; padding:11px 16px;
  border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);
  font-size:.9rem; font-family:var(--font-ui);
  background:var(--bg-surface-2); color:var(--txt);
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  outline:none; -webkit-appearance:none;
}
.form-control:focus, .form-select:focus {
  border-color:var(--cyan);
  box-shadow:0 0 0 3px rgba(0,212,255,.14), 0 0 14px rgba(0,212,255,.10);
}
.form-control-file { width:100%; padding:8px 0; font-size:.9rem; color:var(--txt-dim); }
.form-row-2col { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:0; }
.form-row-2col .form-field { margin-bottom:24px; }
.date-input-wrap { position:relative; }
.date-icon { position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--txt-ghost); pointer-events:none; }

.payment-qr-section {
  background:var(--cyan-glow);
  border:1px solid var(--border-subtle); border-radius:var(--r-md);
  padding:24px; margin:22px 0 30px; text-align:center;
}
.payment-qr-section strong { color:var(--cyan); letter-spacing:.04em; }
.payment-qr-img { object-fit:contain; border:1px solid var(--border-subtle); border-radius:var(--r-xs); }
.payment-qr-single {
  width:220px; height:auto; max-width:100%;
  display:block; margin:14px auto 0;
  box-shadow:0 0 24px rgba(0,212,255,.15);
  border-radius:var(--r-sm);
}
.qr-label { font-size:.85rem; color:var(--txt-ghost); margin-top:8px; }

.btn-submit {
  display:inline-block;
  background:transparent; color:var(--cyan);
  border:1px solid var(--cyan);
  padding:14px 56px; border-radius:var(--r-sm);
  font-size:1rem; font-weight:700; font-family:var(--font-ui);
  cursor:pointer; letter-spacing:.08em; text-transform:uppercase;
  transition:all var(--t-mid) var(--ease);
  box-shadow:0 0 18px rgba(0,212,255,.22);
  position:relative; overflow:hidden;
}
.btn-submit::after {
  content:'';
  position:absolute; inset:0;
  background:var(--cyan);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease);
}
.btn-submit span { position:relative; z-index:1; }
.btn-submit:hover { color:#000; box-shadow:var(--glow-lg); transform:translateY(-2px); }
.btn-submit:hover::after { transform:scaleX(1); }
.btn-submit:disabled { opacity:.5; cursor:not-allowed; transform:none; }

.form-success-msg {
  background:rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.28);
  color:var(--cyan); border-radius:var(--r-sm);
  padding:16px; text-align:center; font-size:.95rem; margin-top:22px;
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 991px
   ════════════════════════════════════════════════════ */
@media (max-width:991px) {
  .navbar-desktop { display:none; }
  .navbar-mobile  { display:block; }
  body { padding-top:var(--mob-header); }

  .stats-grid { grid-template-columns:1fr; border-radius:var(--r-md); }
  .stat-item { border-right:none; border-bottom:1px solid var(--border-subtle); padding:38px 22px 22px; }
  .stat-item:last-child { border-bottom:none; }

  .mosaic-grid { display:flex; flex-direction:column; gap:16px; }
  .mosaic-scene-large img,
  .mosaic-scene-bottom img,
  .mosaic-center-img img,
  .mosaic-scene-circle img,
  .mosaic-shuriken img {
    clip-path:none !important;
    border-radius:var(--r-md) !important;
    height:220px; width:100%; object-fit:cover;
  }

  .features-grid { grid-template-columns:1fr; gap:18px; }
  .masonry-2col  { grid-template-columns:1fr; }
  .prod-gallery-grid { grid-template-columns:1fr; }
  .masonry-block-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .mb-block { min-height:150px; padding:24px 18px; }
  .img-circle-logo { width:88px; height:88px; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 768px
   ════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .form-row-2col { grid-template-columns:1fr; }
  .contact-form-wrap { padding:28px 20px; }
  .contact-hero { height:180px; }
  .contact-hero-content h1 { font-size:1.8rem; }
  .popup-box { padding:28px 22px 24px; }
  .popup-title { font-size:1.1rem; }
  .web3-box { padding:30px 22px 26px; }
  .label-2025 { font-size:1.4rem; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE — 600px
   ════════════════════════════════════════════════════ */
@media (max-width:600px) {
  .web3-box { padding:24px 16px 20px; }
  .logo-big { max-width:160px; }
  .bottle-img { max-width:290px; }
  .stat-number { font-size:2.2rem; }
  .masonry-block-grid { grid-template-columns:1fr 1fr; gap:7px; }
  .mb-block { min-height:126px; padding:16px 12px; }
  .mb-block p { font-size:.82rem; }
  .img-circle-logo { width:74px; height:74px; padding:8px; }
  #scrolltop-wrapper { bottom:18px; right:18px; }
  .section-features { padding:52px 0 44px; }
  .feature-item { padding:30px 18px 26px; }
  .features-grid { gap:14px; }
  .section-title { padding:52px 0 8px; }
  .container, .container-small { padding:0 16px; }
}