/* =========================================================
   Qingdao Tower Glass — "Periwinkle" Theme
   A lighter, airier palette built around the product itself:
   cool sky-blue and soft violet glass, with a gentle lilac
   accent — no near-black anchors and no heavy amber. Loaded
   AFTER style.css; overrides :root tokens + key sections only
   (same selectors as before, so no HTML changes are required).
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700;800&display=swap");

:root {
  /* Primary = soft sky blue */
  --brand: #4F7FE0;
  --brand-dark: #3A63B8;
  --brand-light: #E8F0FE;
  --brand-tint: #F4F8FF;
  --brand-rgb: 79, 127, 224;

  /* Secondary = soft violet · Tertiary = light orchid/lilac accent */
  --brand-b: #8F7FE8;
  --brand-b-dark: #6C5BC9;
  --brand-b-light: #EFEBFE;
  --brand-b-tint: #F8F6FF;
  --brand-c: #B98AE0;
  --brand-c-dark: #8F5FC4;
  --brand-c-light: #F5EBFC;
  --brand-c-tint: #FBF5FE;

  /* 7 category-card accents — cycling the same two hues, lighter tones throughout */
  --accent-1: #4F7FE0;
  --accent-2: #8F7FE8;
  --accent-3: #B98AE0;
  --accent-4: #6C8EEF;
  --accent-5: #A78BFA;
  --accent-6: #6C5BC9;
  --accent-7: #3A63B8;

  /* Page surface: cool, quiet paper with a faint lavender cast */
  --ink: #262B45;
  --muted: #5C6478;
  --soft: #8991A8;

  --bg: #FCFCFF;
  --bg-soft: #F6F7FC;
  --bg-soft-2: #EFF1FA;
  --line: #E3E6F2;
  --line-strong: #CDD2E8;

  --white: #ffffff;

  /* soft, periwinkle-tinted shadows — gentle depth, not a heavy drop shadow */
  --shadow-sm: 0 1px 3px rgba(60, 60, 120, .06), 0 1px 2px rgba(60, 60, 120, .04);
  --shadow-md: 0 10px 26px rgba(60, 60, 120, .08);
  --shadow-lg: 0 22px 54px rgba(60, 60, 120, .14);

  /* enable the colorful top bar on category cards */
  --catbar: 3px;

  --radius: 16px;
  --radius-sm: 11px;
  --radius-lg: 26px;
  --maxw: 1200px;
  --header-h: 72px;
  --ease: cubic-bezier(.4, 0, .2, 1);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-head: "Fraunces", "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", serif;

  /* a signature "light through glass" gradient, reused across the site for cohesion */
  --prism: linear-gradient(90deg, #3A63B8, #4F7FE0 30%, #8F7FE8 65%, #C4A6EE 100%);
}

/* Fraunces reads best a touch tighter + not too heavy for UI headings */
h1, h2, h3, h4 { letter-spacing: -.015em; font-weight: 600; }
.section-head .eyebrow, .hero-badge, .tag, .cat-card .meta .count,
.pd-info .cat-tag, .sub-product .cat-tag { font-family: var(--font); }

/* ------------------------------------------------------------------
   HEADER — light glass-panel feel
   ------------------------------------------------------------------ */
.site-header { background: rgba(252, 253, 254, .82); border-bottom: 1px solid var(--line); }
.logo small { color: var(--soft); }

/* ------------------------------------------------------------------
   HERO — sapphire → sea-glass gradient with a soft internal glow,
   plus a thin "prism" seam along the bottom edge (light dispersion)
   ------------------------------------------------------------------ */
.hero {
  position: relative;
  background: linear-gradient(135deg, #3A63B8 0%, #6C8EEF 46%, #8F7FE8 100%);
  color: #fff;
  isolation: isolate;
}
.hero h1,
.hero .hero-sub,
.hero .hero-stats strong,
.hero .hero-stats span { color: #fff; }
.hero h1 .hl { color: #E6D9FF; }

.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 90% at 88% 8%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(45% 60% at 8% 92%, rgba(255,255,255,.10), transparent 60%);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--prism);
  opacity: .9;
}
.hero-inner { position: relative; z-index: 1; }

.hero-badge {
  background: rgba(255,255,255,.95);
  border-color: rgba(255,255,255,.6);
  color: var(--brand-dark);
  box-shadow: 0 6px 18px rgba(60, 60, 130, .16);
}
.hero-badge .pulse {
  background: var(--brand-b);
  box-shadow: 0 0 0 4px rgba(143,127,232,.24);
  animation: dopamine-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes dopamine-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 4px rgba(143,127,232,.24); }
  50% { transform: scale(1.18); box-shadow: 0 0 0 8px rgba(143,127,232,.1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-badge .pulse { animation: none; }
}

/* solid white primary button reads as a clean, light pop against the gradient
   rather than adding a fourth heavy accent color */
.hero .btn-primary {
  background: #fff;
  color: var(--brand-dark);
  box-shadow: 0 8px 20px rgba(40, 50, 110, .22);
}
.hero .btn-primary:hover {
  background: var(--brand-light);
  color: var(--brand-dark);
  box-shadow: 0 12px 26px rgba(40, 50, 110, .26);
}
.hero .btn-outline {
  border-color: rgba(255,255,255,.7);
  color: #fff;
  background: rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.hero .btn-outline:hover { background: rgba(255,255,255,.22); color: #fff; }

/* hero collage: soften the tiles into little glass panes */
.hero-collage .cell {
  background: rgba(255,255,255,.9);
  border-color: rgba(255,255,255,.5);
  box-shadow: 0 10px 24px rgba(40,50,110,.16);
}

/* ------------------------------------------------------------------
   HOME SECTIONS — quiet alternating tints, never competing with photos
   ------------------------------------------------------------------ */
.section.home-cats { background: var(--brand-tint); }
.section.home-products.soft { background: #fff; }
.section.home-features { background: var(--brand-b-tint); }
.section.home-certs.soft { background: var(--bg-soft); }
.section.home-testi { background: var(--brand-tint); }
.section.home-resources.soft { background: var(--brand-b-tint); }

.home-testi .section-head .eyebrow,
.home-cats .section-head .eyebrow,
.home-features .section-head .eyebrow,
.home-resources .section-head .eyebrow { color: var(--brand-dark); }

/* Feature icons: rotate through the three hues, always on a light tint */
.home-features .feature .ico { background: var(--brand-light); color: var(--brand-dark); }
.home-features .feature:nth-child(2) .ico { background: var(--brand-b-light); color: var(--brand-b-dark); }
.home-features .feature:nth-child(3) .ico { background: var(--brand-c-light); color: var(--brand-c-dark); }
.home-features .feature:nth-child(4) .ico { background: var(--brand-light); color: var(--brand-dark); }

/* Testimonial avatars */
.home-testi .testi .who .av { background: var(--brand-light); color: var(--brand-dark); }

/* ------------------------------------------------------------------
   CTA — deep sapphire → teal, matching the hero for a cohesive close
   ------------------------------------------------------------------ */
.cta-band {
  background: linear-gradient(120deg, #3A63B8, #6C8EEF 55%, #8F7FE8);
  position: relative;
  overflow: hidden;
}
.cta-band::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--prism);
  opacity: .8;
}


/* ------------------------------------------------------------------
   FOOTER — deep ink-navy, calm and premium
   ------------------------------------------------------------------ */
.site-footer { background: linear-gradient(160deg, var(--brand-dark), var(--brand-b-dark)); }
.footer-brand p { color: rgba(255,255,255,.68); }
.footer-col a { color: rgba(255,255,255,.8); }
.footer-bottom { color: rgba(255,255,255,.55); }
.footer-contact .ic { color: #E6D9FF; }
.footer-social a:hover { background: var(--brand-c); }

/* ------------------------------------------------------------------
   GLOBAL BUTTONS / INTERACTIVE touches
   ------------------------------------------------------------------ */
.btn-light { color: var(--brand-dark); }
.btn-light:hover { background: var(--brand-light); color: var(--brand-dark); }

/* nav dropdown / lang menu hover uses a soft teal tint */
.dropdown a:hover,
.side-cat-list a:hover,
.side-cat-list a.active,
.lang-menu a:hover,
.lang-menu a.active {
  background: var(--brand-b-light);
  color: var(--brand-b-dark);
}

/* pagination current uses sapphire, matching primary buttons */
.pager span.cur {
  background: var(--brand);
  border-color: var(--brand);
}

/* form success alert */
.form-alert { background: var(--brand-b-light); color: var(--brand-b-dark); }

/* =================================================================
   SUBPAGES — restrained multi-hue treatment, same 3-color system
   ================================================================= */

/* --- page-hero: gradient header, one signature seam on every subpage --- */
.page-hero {
  position: relative;
  background: linear-gradient(120deg, #3A63B8, #6C8EEF 55%, #8F7FE8);
  color: #fff;
  border-bottom: none;
}
.page-hero h1 { color: #fff; }
.page-hero p { color: rgba(255,255,255,.86); }
.page-hero .eyebrow { color: #E6D9FF; }
.page-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(55% 100% at 90% 0%, rgba(255,255,255,.18), transparent 60%);
  pointer-events: none;
}
.page-hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--prism);
}
/* per-page hue variants — same light blue/violet family, shifted balance,
   so every subpage feels related but not identical (no dark or amber tones) */
.page-hero.ph-violet  { background: linear-gradient(120deg, #3A63B8, #4F7FE0 60%, #6C8EEF); }
.page-hero.ph-pink    { background: linear-gradient(120deg, #6C5BC9, #8F7FE8 55%, #B0A0F2); }
.page-hero.ph-magenta { background: linear-gradient(120deg, #8F5FC4, #B98AE0 55%, #D9AEE8); }
.page-hero.ph-mix1    { background: linear-gradient(120deg, #3A63B8, #6C8EEF 45%, #8F7FE8); }
.page-hero.ph-mix2    { background: linear-gradient(120deg, #8F7FE8, #6C8EEF 55%, #3A63B8); }

/* --- product detail: quiet gradient + teal/gold internal accents --- */
.sub-product {
  background: linear-gradient(180deg, var(--brand-tint) 0%, #ffffff 160px);
}
.sub-product .cat-tag {
  background: var(--brand-b-light); color: var(--brand-b-dark);
}
.pd-points { counter-reset: pt; }
.pd-points li { position: relative; padding-left: 28px; }
.pd-points li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--brand);
}
.pd-points li:nth-child(2)::before { background: var(--brand-b); }
.pd-points li:nth-child(3)::before { background: var(--brand-c); }
.pd-points li:nth-child(4)::before { background: var(--brand); }
.pd-info h1 { color: var(--ink); }
.pd-info .pd-actions .btn-primary { background: var(--brand); box-shadow: 0 8px 20px rgba(var(--brand-rgb),.28); }
.pd-info .pd-actions .btn-primary:hover { background: var(--brand-dark); }
.pd-gallery .main-img { border-color: var(--brand-light); box-shadow: var(--shadow-sm); }
.pd-gallery .thumbs button.active { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-light); }
.pd-specs th { background: var(--brand-tint); color: var(--brand-dark); }
.pd-specs td { color: var(--ink); }
.sub-rel .eyebrow { color: var(--brand-c-dark); }
.sub-rel h2 { color: var(--brand-dark); }

/* --- sidebar widgets: alternating quiet tints --- */
.side-widget { border-radius: var(--radius-sm); overflow: hidden; border-color: var(--line); }
.side-widget:nth-of-type(odd) { background: var(--brand-tint); }
.side-widget:nth-of-type(even) { background: var(--brand-b-tint); }
.side-widget h3 { color: var(--brand-dark); }
.side-cat-list a:hover,
.side-cat-list a.active { background: var(--brand-b-light); color: var(--brand-b-dark); }
.side-cat-list a.active { box-shadow: inset 3px 0 0 var(--brand-c); }
.side-prod:hover { background: var(--brand-b-tint); }
.side-prod .t { color: var(--ink); }

/* --- product cards (list / category / related): glassy lift on hover --- */
.product-card, .cat-card { border-radius: var(--radius-sm); overflow: hidden; transition: all .28s var(--ease); }
.product-card:hover, .cat-card:hover { border-color: var(--brand-b); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.product-card .cat { color: var(--brand-b-dark); }
.product-card .arrow { color: var(--brand-c); }
/* soft glass sheen sweeping over the thumbnail on hover */
.product-card .thumb, .cat-card .thumb { position: relative; }
.product-card .thumb::after, .cat-card .thumb::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  pointer-events: none;
}
.product-card:hover .thumb::after, .cat-card:hover .thumb::after { transform: translateX(120%); }

/* --- FAQ: colored left rail, cycling through the 3-hue system --- */
.faq-q { border-left: 3px solid var(--brand); border-radius: var(--radius-sm); }
.faq-item:nth-child(2) .faq-q { border-left-color: var(--brand-b); }
.faq-item:nth-child(3) .faq-q { border-left-color: var(--brand-c); }
.faq-item:nth-child(4) .faq-q { border-left-color: var(--brand); }
.faq-item:nth-child(5) .faq-q { border-left-color: var(--brand-b); }
.faq-q:hover { background: var(--brand-tint); }
.faq-q .plus { background: var(--brand-c-light); color: var(--brand-c-dark); }

/* --- contact: colored info icons, one hue per row --- */
.contact-info .info-row .ic {
  background: var(--brand-light); color: var(--brand-dark);
  border-radius: 10px; display: grid; place-items: center;
}
.contact-info .info-row:nth-child(2) .ic { background: var(--brand-b-light); color: var(--brand-b-dark); }
.contact-info .info-row:nth-child(3) .ic { background: var(--brand-c-light); color: var(--brand-c-dark); }
.map-placeholder { background: var(--brand-tint); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); }

/* --- forms: sapphire primary button (matches global button system) --- */
.form-grid .btn-primary { background: var(--brand); box-shadow: 0 8px 20px rgba(var(--brand-rgb),.26); }
.form-grid .btn-primary:hover { background: var(--brand-dark); }

/* --- resources: colored placeholder chips, cycling hues --- */
.resource-card { border-radius: var(--radius-sm); overflow: hidden; transition: all .28s var(--ease); }
.resource-card .ph { background: var(--brand-tint); color: var(--brand); }
.resource-card .ph img { transition: transform .45s var(--ease), filter .28s var(--ease); }
.resource-card:hover .ph img { filter: saturate(1.04); }
.resource-card:nth-child(2) .ph { background: var(--brand-b-tint); color: var(--brand-b-dark); }
.resource-card:nth-child(3) .ph { background: var(--brand-c-tint); color: var(--brand-c-dark); }
.resource-card:hover { border-color: var(--brand-b); box-shadow: var(--shadow-md); transform: translateY(-4px); }
.resource-card .date { color: var(--brand-c-dark); font-weight: 600; }
.article-cover { border-radius: var(--radius-sm); border-color: var(--brand-light); }

/* --- generic section headings on subpages --- */
.sub-main .section-head .eyebrow { color: var(--brand-c-dark); }