/* ══════════════════════════════════════════════════════════════════════════
   SERI MESTIKA — WeShield Design System
   css/style.css — Single source of truth for all styles
   Version: 2.0 | June 2026
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Google Fonts ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Albert+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ── Design Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand Palette */
  --c-violet:        #7B2FBE;
  --c-violet-deep:   #3D1260;
  --c-violet-light:  #9B4FDE;
  --c-violet-pale:   #EDE0FA;
  --c-gold:          #C9A14A;
  --c-gold-light:    #E8C27A;
  --c-gold-pale:     #F9F0DC;

  /* Surfaces */
  --c-bg:            #FAF8FD;
  --c-surface:       #FFFFFF;
  --c-surface-raised:#F3EFF9;

  /* Text */
  --c-ink:           #1A1024;
  --c-muted:         #6B5F7A;
  --c-subtle:        #9B8FAA;

  /* Inverted (dark sections) */
  --c-inv-ink:       #FFFFFF;
  --c-inv-muted:     rgba(255,255,255,0.65);
  --c-inv-subtle:    rgba(255,255,255,0.40);

  /* Borders — hairline system */
  --c-border:        rgba(26,16,36,0.10);
  --c-border-med:    rgba(26,16,36,0.18);
  --c-border-strong: rgba(26,16,36,0.28);
  --c-inv-border:    rgba(255,255,255,0.14);
  --c-inv-border-med:rgba(255,255,255,0.24);

  /* Typography */
  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body:    'Albert Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Type Scale */
  --text-xs:   0.6875rem;
  --text-sm:   0.8125rem;
  --text-base: 1rem;
  --text-md:   1.0625rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;
  --text-8xl:  6rem;

  /* Spacing Scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;
  --sp-32: 8rem;

  /* Layout */
  --container:     1200px;
  --container-pad: clamp(1rem, 5vw, 2rem);
  --nav-h:         96px;

  /* Border Radius */
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* Motion */
  --dur:  180ms;
  --ease: cubic-bezier(0.4,0,0.2,1);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--c-ink);
  background: var(--c-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font: inherit; border: none; background: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

/* ── Typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; }

h1 {
  font-weight: 800;
  font-size: clamp(var(--text-4xl), 6vw, var(--text-7xl));
  line-height: 0.95;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl));
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h3 {
  font-size: clamp(var(--text-xl), 2.5vw, var(--text-3xl));
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h4 { font-size: var(--text-xl); line-height: 1.25; }
h5 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-base); line-height: 1.4; }

p { line-height: 1.7; }

/* Eyebrow / Museum Label */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: block;
  margin-bottom: var(--sp-4);
}
.eyebrow-muted { color: var(--c-muted); }
.eyebrow-inv   { color: var(--c-gold); }

/* Text Utilities */
.text-lead   { font-size: var(--text-lg); line-height: 1.65; color: var(--c-muted); }
.text-muted  { color: var(--c-muted); }
.text-subtle { color: var(--c-subtle); }
.text-inv    { color: #FFFFFF; }
.text-inv-muted { color: var(--c-inv-muted); }
.text-violet { color: var(--c-violet); }
.text-gold   { color: var(--c-gold); }
.text-center { text-align: center; }
.text-sm     { font-size: var(--text-sm); }

.stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.875rem, 4vw, 3rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section    { padding-block: clamp(4rem, 8vw, 8rem); }
.section-sm { padding-block: clamp(2.5rem, 5vw, 5rem); }
.section-xs { padding-block: clamp(1.5rem, 3vw, 3rem); }

.grid-2   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.grid-3   { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-8); }
.grid-4   { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); }
.grid-2-3 { display: grid; grid-template-columns: 2fr 3fr; gap: var(--sp-12); }
.grid-3-2 { display: grid; grid-template-columns: 3fr 2fr; gap: var(--sp-12); }

.section-light  { background: var(--c-bg);          color: var(--c-ink); }
.section-white  { background: var(--c-surface);     color: var(--c-ink); }
.section-dark   { background: var(--c-violet-deep); color: var(--c-inv-ink); }
.section-violet { background: var(--c-violet);      color: var(--c-inv-ink); }

/* Section Header */
.section-header { margin-bottom: var(--sp-12); }
.section-header.centered { text-align: center; }
.section-header.centered p { max-width: 560px; margin-inline: auto; }
.section-header h2 { margin-bottom: var(--sp-4); }
.section-header p  { color: var(--c-muted); font-size: var(--text-md); }

/* ── Navigation ───────────────────────────────────────────────────────────── */
#site-nav {
  position: sticky;
  top: 0;
  z-index: 900;
  height: var(--nav-h);
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
}

.nav-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.nav-logo { display: flex; flex-direction: column; gap: 1px; text-decoration: none; flex-shrink: 0; }
.nav-logo-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.75rem;
  line-height: 1;
  color: var(--c-ink);
  letter-spacing: -0.02em;
}
.nav-logo-name .accent { color: var(--c-violet); }
.nav-logo-tagline {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-gold);
  line-height: 1;
}

.nav-links { display: flex; align-items: center; gap: var(--sp-1); margin-left: var(--sp-4); }
.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--c-ink); background: var(--c-surface-raised); }
.nav-link-cta { color: var(--c-violet) !important; font-weight: 700 !important; }
.nav-link-cta:hover { background: var(--c-violet-pale) !important; color: var(--c-violet-deep) !important; }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--c-muted);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
}
.nav-dropdown-trigger:hover,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: var(--c-ink); background: var(--c-surface-raised); }
.nav-dropdown-trigger svg { transition: transform var(--dur) var(--ease); }
.nav-dropdown:hover .nav-dropdown-trigger svg,
.nav-dropdown.is-open .nav-dropdown-trigger svg,
.nav-dropdown:focus-within .nav-dropdown-trigger svg { transform: rotate(180deg); }

.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: 0 8px 24px rgba(26,16,36,0.12);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  z-index: 100;
  overflow: hidden;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--c-muted);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-dropdown-item:hover { background: var(--c-surface-raised); color: var(--c-ink); }
.nav-dropdown-item svg { color: var(--c-violet); flex-shrink: 0; }

.nav-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }

.lang-switcher {
  display: flex;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.lang-btn {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.6rem;
  color: var(--c-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-btn.active, .lang-btn:hover { background: var(--c-violet); color: #fff; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: var(--sp-2);
  margin-left: auto;
  cursor: pointer;
  background: none;
  border: none;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--c-ink);
  transition: all var(--dur) var(--ease);
}

.nav-mobile {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: var(--c-surface);
  flex-direction: column;
  padding: var(--sp-6) var(--sp-6) var(--sp-10);
  overflow-y: auto;
}
.nav-mobile.open { display: flex; }
.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-10);
}
.nav-mobile-close { font-size: 1.5rem; color: var(--c-muted); padding: var(--sp-2); line-height: 1; background: none; border: none; cursor: pointer; }
.nav-mobile-links { display: flex; flex-direction: column; gap: var(--sp-1); flex: 1; }
.nav-mobile-link {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-2xl);
  color: var(--c-ink);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-border);
  display: block;
}
.nav-mobile-sub { padding: var(--sp-2) 0 var(--sp-2) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.nav-mobile-sub a { font-size: var(--text-base); font-weight: 500; color: var(--c-muted); padding: var(--sp-1) 0; }
.nav-mobile-footer { padding-top: var(--sp-8); }

@media (max-width: 768px) {
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  padding: 0.75rem 1.75rem;
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  line-height: 1;
}
.btn:focus-visible { outline: 2px solid var(--c-violet); outline-offset: 2px; }

.btn-primary   { background: var(--c-violet); color: #fff; border-color: var(--c-violet); }
.btn-primary:hover { background: var(--c-violet-deep); border-color: var(--c-violet-deep); }
.btn-secondary { background: transparent; color: var(--c-violet); border-color: var(--c-violet); }
.btn-secondary:hover { background: var(--c-violet); color: #fff; }
.btn-ghost-inv { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.btn-ghost-inv:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.6); }
.btn-white { background: #fff; color: var(--c-violet); border-color: #fff; }
.btn-white:hover { background: var(--c-violet-pale); border-color: var(--c-violet-pale); }
.btn-gold  { background: var(--c-gold); color: var(--c-ink); border-color: var(--c-gold); }
.btn-gold:hover { background: #b8903f; border-color: #b8903f; }
.btn-wa    { background: #25D366; color: #fff; border-color: #25D366; }
.btn-wa:hover { background: #1ebe5a; border-color: #1ebe5a; }

.btn-sm { font-size: var(--text-sm); padding: 0.5rem 1.25rem; }
.btn-lg { font-size: var(--text-lg); padding: 1rem 2.25rem; }
.btn-xl { font-size: 1.125rem; padding: 1.125rem 2.5rem; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); padding: var(--sp-6); }

/* ── FAQ Accordion (AEO / GEO — visible Q&A that mirrors FAQPage schema) ──── */
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--sp-3); }
.faq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-5) var(--sp-6);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--c-ink);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: var(--text-xl);
  color: var(--c-violet);
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer { padding: 0 var(--sp-6) var(--sp-5); color: var(--c-muted); font-size: var(--text-sm); line-height: 1.7; margin: 0; }

.feature-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.feature-card:hover { border-color: var(--c-violet-pale); box-shadow: 0 4px 16px rgba(123,47,190,0.08); }
.feature-icon {
  width: 48px;
  height: 48px;
  background: var(--c-violet-pale);
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-violet);
  margin-bottom: var(--sp-5);
}
.feature-card h4 { margin-bottom: var(--sp-3); }
.feature-card p  { color: var(--c-muted); font-size: var(--text-sm); line-height: 1.65; }

.plan-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan-card.recommended { border-color: var(--c-violet); background: linear-gradient(180deg, rgba(123,47,190,0.04) 0%, transparent 100%); }
.plan-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-violet);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.plan-card h3 { margin-bottom: var(--sp-3); font-size: var(--text-2xl); }
.plan-card > p { color: var(--c-muted); font-size: var(--text-sm); margin-bottom: var(--sp-6); }
.plan-features { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-8); flex: 1; }
.plan-feature { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--text-sm); color: var(--c-muted); }
.plan-feature .check { color: #22C55E; flex-shrink: 0; margin-top: 2px; }

.testimonial-card {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--c-inv-border);
  border-radius: var(--r-xl);
  padding: var(--sp-8) var(--sp-6);
}
.testimonial-stars { color: var(--c-gold); font-size: var(--text-base); margin-bottom: var(--sp-4); }
.testimonial-card p { font-size: var(--text-md); color: var(--c-inv-muted); line-height: 1.7; margin-bottom: var(--sp-6); font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: var(--sp-3); }
.testimonial-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--c-violet);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-sm); color: #fff;
  flex-shrink: 0;
}
.testimonial-name  { font-weight: 600; color: #fff; font-size: var(--text-sm); }
.testimonial-title { font-size: var(--text-xs); color: var(--c-inv-muted); }

.blog-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); display: flex; flex-direction: column; }
.blog-card:hover { border-color: var(--c-violet-pale); box-shadow: 0 4px 16px rgba(123,47,190,0.08); }
.blog-card-img-link { display: block; flex-shrink: 0; }
.blog-card-img { height: 200px; background: var(--c-violet-pale); display: flex; align-items: center; justify-content: center; color: var(--c-violet); overflow: hidden; flex-shrink: 0; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.blog-card-img-link:hover img { transform: scale(1.04); }
.blog-card-body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.blog-category { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-gold); display: block; margin-bottom: var(--sp-3); }
.blog-card h3  { font-size: var(--text-xl); margin-bottom: var(--sp-3); }
.blog-card h3 a { color: inherit; text-decoration: none; }
.blog-card h3 a:hover { color: var(--c-violet); }
.blog-card p   { color: var(--c-muted); font-size: var(--text-sm); line-height: 1.65; margin-bottom: var(--sp-4); flex: 1; }
.blog-meta { font-size: var(--text-xs); color: var(--c-subtle); display: flex; gap: var(--sp-4); margin-top: auto; }

/* ── Comparison Table ─────────────────────────────────────────────────────── */
.comparison-table { width: 100%; border: 1px solid var(--c-border); border-radius: var(--r-xl); overflow: hidden; }
.comparison-table thead tr { background: var(--c-violet-deep); }
.comparison-table th { padding: var(--sp-4) var(--sp-5); text-align: left; font-size: var(--text-sm); font-weight: 600; color: #fff; }
.comparison-table td { padding: var(--sp-4) var(--sp-5); font-size: var(--text-sm); color: var(--c-muted); border-top: 1px solid var(--c-border); }
.comparison-table tbody tr:nth-child(odd)  { background: var(--c-bg); }
.comparison-table tbody tr:nth-child(even) { background: var(--c-surface); }
.comparison-table .check { color: #22C55E; font-weight: 700; }
.comparison-table .cross { color: var(--c-subtle); }
.comparison-table td:first-child { font-weight: 500; color: var(--c-ink); }

/* ── Step Flow ────────────────────────────────────────────────────────────── */
.step-flow { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-6); }
.step { text-align: center; }
.step-number {
  width: 48px; height: 48px;
  background: var(--c-violet); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
}
.step h4 { font-size: var(--text-base); margin-bottom: var(--sp-2); }
.step p  { font-size: var(--text-sm); color: var(--c-muted); }

@media (max-width: 768px) { .step-flow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .step-flow { grid-template-columns: 1fr; } }

/* ── Notice / Alert ───────────────────────────────────────────────────────── */
.notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-md); font-size: var(--text-sm); }
.notice-gold { background: var(--c-gold-pale); border-left: 3px solid var(--c-gold); color: var(--c-ink); }
.notice-violet { background: var(--c-violet-pale); border-left: 3px solid var(--c-violet); color: var(--c-ink); }

/* ── Breadcrumb ───────────────────────────────────────────────────────────── */
.breadcrumb { background: var(--c-surface); border-bottom: 1px solid var(--c-border); padding: var(--sp-3) 0; }
.breadcrumb nav { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); color: var(--c-subtle); }
.breadcrumb a { color: var(--c-muted); transition: color var(--dur) var(--ease); }
.breadcrumb a:hover { color: var(--c-violet); }
.breadcrumb span { color: var(--c-ink); font-weight: 500; }

/* ── Trust Bar ────────────────────────────────────────────────────────────── */
.trust-bar { background: var(--c-bg); border-bottom: 1px solid var(--c-border); padding: var(--sp-5) 0; }
.trust-bar-inner { display: flex; align-items: center; justify-content: center; gap: var(--sp-8); flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: 500; color: var(--c-muted); white-space: nowrap; }
.trust-item svg { color: var(--c-violet); flex-shrink: 0; }
.trust-divider { width: 1px; height: 20px; background: var(--c-border); }
@media (max-width: 768px) { .trust-divider { display: none; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  background: var(--c-violet-deep);
  position: relative;
  overflow: hidden;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(4rem, 8vw, 8rem);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--c-gold);
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-16);
  align-items: center;
  position: relative;
}
.hero-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-gold);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.hero-eyebrow::before { content: ''; display: block; width: 32px; height: 1px; background: var(--c-gold); flex-shrink: 0; }
.hero h1     { color: #fff; margin-bottom: var(--sp-6); }
.hero-sub    { font-size: var(--text-lg); color: var(--c-inv-muted); line-height: 1.65; margin-bottom: var(--sp-8); max-width: 480px; }
.hero-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.hero-stats  { display: flex; gap: var(--sp-8); padding-top: var(--sp-8); border-top: 1px solid var(--c-inv-border); }
.hero-stat-number { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); color: #fff; line-height: 1; letter-spacing: -0.02em; }
.hero-stat-number.text-gold { color: var(--c-gold); }
.hero-stat-label  { font-size: var(--text-xs); color: var(--c-inv-muted); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; margin-top: var(--sp-1); }

.hero-visual { display: flex; flex-direction: column; gap: var(--sp-5); }
.hero-badge {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--c-inv-border);
  border-radius: var(--r-xl);
  padding: var(--sp-4) var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--text-sm); color: var(--c-inv-muted);
}
.hero-badge-icon {
  width: 36px; height: 36px;
  background: var(--c-gold); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink); flex-shrink: 0;
}
.hero-badge-text strong { color: #fff; display: block; font-size: var(--text-sm); }
.hero-img-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--c-inv-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-inv-muted); font-size: var(--text-xs);
  font-family: var(--font-mono); letter-spacing: 0.06em;
}
.hero-img-card img { width: 100%; height: 100%; object-fit: cover; }

.page-hero { background: var(--c-violet-deep); padding: clamp(3rem, 6vw, 5rem) 0; }
.page-hero h1 { color: #fff; font-size: clamp(var(--text-3xl), 4vw, var(--text-5xl)); margin-bottom: var(--sp-5); }
.page-hero p  { color: var(--c-inv-muted); font-size: var(--text-lg); max-width: 600px; line-height: 1.6; }

@media (max-width: 1024px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { display: none; } }
@media (max-width: 480px)  { .hero-stats { flex-wrap: wrap; gap: var(--sp-5); } }

/* ── Product Slider ────────────────────────────────────────────────────────── */
.product-slider-wrap { position: relative; overflow: hidden; border-radius: var(--r-xl); border: 1px solid var(--c-border); }
.product-slider { display: flex; transition: transform 600ms cubic-bezier(0.25,0.46,0.45,0.94); }
.product-slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.slide-content { padding: clamp(2.5rem,5vw,4rem); display: flex; flex-direction: column; justify-content: center; background: var(--c-surface); }
.slide-content h3 { margin-bottom: var(--sp-4); font-size: clamp(var(--text-2xl),3vw,var(--text-4xl)); }
.slide-content p  { color: var(--c-muted); margin-bottom: var(--sp-6); max-width: 440px; }
.slide-img { background: var(--c-violet-pale); display: flex; align-items: center; justify-content: center; color: var(--c-violet); font-family: var(--font-mono); font-size: var(--text-sm); overflow: hidden; min-height: 360px; }
.slide-img img { width: 100%; height: 100%; object-fit: cover; }

.slider-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--c-ink); transition: all var(--dur) var(--ease); z-index: 10;
}
.slider-arrow:hover { background: var(--c-violet); color: #fff; border-color: var(--c-violet); }
.slider-arrow-prev { left: var(--sp-4); }
.slider-arrow-next { right: var(--sp-4); }
.slider-dots { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-4) 0; }
.slider-dot { width: 6px; height: 6px; background: var(--c-border-med); border-radius: 50%; transition: all var(--dur) var(--ease); cursor: pointer; border: none; }
.slider-dot.active { background: var(--c-violet); width: 20px; border-radius: var(--r-pill); }

@media (max-width: 768px) { .product-slide { grid-template-columns: 1fr; } .slide-img { min-height: 220px; } }

/* ── Quote Widget ──────────────────────────────────────────────────────────── */
.quote-section { background: var(--c-violet-deep); position: relative; overflow: hidden; }
.quote-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 60px 60px; pointer-events: none;
}
.quote-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: start; }
.quote-intro h2 { color: #fff; margin-bottom: var(--sp-5); }
.quote-intro p  { color: var(--c-inv-muted); margin-bottom: var(--sp-6); font-size: var(--text-md); }
.quote-sla { display: flex; flex-direction: column; gap: var(--sp-4); }
.quote-sla-item { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--text-sm); color: var(--c-inv-muted); }
.quote-sla-item svg { color: var(--c-gold); flex-shrink: 0; }

#quote-form { background: var(--c-surface); border-radius: var(--r-xl); padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-4); }
#quote-form h3 { font-size: var(--text-xl); margin-bottom: 0; }
#quote-form .form-sub { font-size: var(--text-sm); color: var(--c-muted); margin-top: -var(--sp-2); }

.form-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.form-label { font-size: var(--text-sm); font-weight: 600; color: var(--c-ink); }
.form-input, .form-select {
  width: 100%; padding: 0.75rem 1rem;
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--c-ink); background: var(--c-bg);
  border: 1px solid var(--c-border-med); border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  outline: none;
}
.form-input::placeholder { color: var(--c-subtle); }
.form-input:focus, .form-select:focus { border-color: var(--c-violet); box-shadow: 0 0 0 3px rgba(123,47,190,0.12); }

#quote-result { display: none; background: #f0fdf4; border: 1px solid #22C55E; border-radius: var(--r-md); padding: var(--sp-5); text-align: center; color: #16a34a; font-size: var(--text-sm); font-weight: 600; }

@media (max-width: 1024px) { .quote-inner { grid-template-columns: 1fr; } }

/* ── CTA Band ──────────────────────────────────────────────────────────────── */
.cta-band { background: var(--c-violet); text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: var(--sp-5); }
.cta-band p  { color: rgba(255,255,255,0.8); margin-bottom: var(--sp-8); font-size: var(--text-lg); }
.cta-actions { display: flex; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

/* ── Add-ons / Perils Grid ────────────────────────────────────────────────── */
.addon-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-4); }
.addon-item { border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--c-surface); }
.addon-item h5 { color: var(--c-ink); margin-bottom: var(--sp-2); }
.addon-item p  { color: var(--c-muted); font-size: var(--text-sm); }
@media (max-width: 768px) { .addon-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .addon-grid { grid-template-columns: 1fr; } }

/* ── Values ───────────────────────────────────────────────────────────────── */
.value-item { display: flex; gap: var(--sp-5); align-items: flex-start; }
.value-number { font-family: var(--font-display); font-weight: 800; font-size: var(--text-5xl); color: var(--c-violet-pale); line-height: 1; flex-shrink: 0; min-width: 60px; }
.value-item h3 { margin-bottom: var(--sp-3); }
.value-item p  { color: var(--c-muted); }

/* ── Credentials Band ─────────────────────────────────────────────────────── */
.credentials-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-8); text-align: center; }
.credential-item h4 { font-size: var(--text-3xl); color: #fff; margin-bottom: var(--sp-2); }
.credential-item p  { font-size: var(--text-sm); color: var(--c-inv-muted); }
@media (max-width: 768px) { .credentials-grid { grid-template-columns: 1fr 1fr; } }

/* ── Contact ──────────────────────────────────────────────────────────────── */
.contact-method { display: flex; gap: var(--sp-5); align-items: flex-start; padding: var(--sp-6); border: 1px solid var(--c-border); border-radius: var(--r-xl); background: var(--c-surface); transition: border-color var(--dur) var(--ease); }
.contact-method:hover { border-color: var(--c-violet-pale); }
.contact-method-icon { width: 48px; height: 48px; background: var(--c-violet-pale); border-radius: var(--r-lg); display: flex; align-items: center; justify-content: center; color: var(--c-violet); flex-shrink: 0; }
.contact-method h4 { margin-bottom: var(--sp-2); }
.contact-method p  { color: var(--c-muted); font-size: var(--text-sm); margin-bottom: var(--sp-4); }

.hours-table td { padding: var(--sp-2) 0; font-size: var(--text-sm); border-top: 1px solid var(--c-border); }
.hours-table td:first-child { color: var(--c-ink); font-weight: 500; }
.hours-table td:last-child  { color: var(--c-muted); text-align: right; }

/* ── PDPA / Legal ─────────────────────────────────────────────────────────── */
.legal-body { max-width: 720px; margin-inline: auto; }
.legal-section { margin-bottom: var(--sp-12); padding-bottom: var(--sp-12); border-bottom: 1px solid var(--c-border); }
.legal-section:last-child { border-bottom: none; }
.legal-section h2 { font-size: var(--text-2xl); margin-bottom: var(--sp-5); }
.legal-section h3 { font-size: var(--text-xl); margin-bottom: var(--sp-4); color: var(--c-violet); }
.legal-section p  { color: var(--c-muted); margin-bottom: var(--sp-4); line-height: 1.8; }
.legal-section ul { list-style: disc; padding-left: var(--sp-6); }
.legal-section li { color: var(--c-muted); font-size: var(--text-sm); line-height: 1.7; margin-bottom: var(--sp-2); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
#site-footer { background: var(--c-ink); color: #fff; }
.footer-main { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-12); padding-block: var(--sp-16); }
.footer-brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.375rem; color: #fff; letter-spacing: -0.02em; line-height: 1; }
.footer-brand-name .accent { color: var(--c-violet-light); }
.footer-tagline { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-gold); margin-bottom: var(--sp-5); margin-top: 2px; display: block; }
.footer-mtp { font-size: var(--text-sm); color: rgba(255,255,255,0.5); line-height: 1.6; margin-bottom: var(--sp-6); max-width: 280px; }
.footer-col h5 { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: var(--sp-5); }
.footer-links { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-link { font-size: var(--text-sm); color: rgba(255,255,255,0.6); transition: color var(--dur) var(--ease); }
.footer-link:hover { color: #fff; }
.footer-hours { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-hours-day  { font-size: var(--text-xs); color: rgba(255,255,255,0.4); display: block; }
.footer-hours-time { font-size: var(--text-sm); color: rgba(255,255,255,0.75); font-weight: 500; }

.footer-legal { background: rgba(0,0,0,0.3); border-top: 1px solid rgba(255,255,255,0.08); padding: var(--sp-5) 0; text-align: center; }
.footer-legal p { font-family: var(--font-mono); font-size: var(--text-xs); color: rgba(255,255,255,0.35); letter-spacing: 0.04em; line-height: 1.8; }
.footer-legal a { color: rgba(255,255,255,0.5); transition: color var(--dur) var(--ease); }
.footer-legal a:hover { color: rgba(255,255,255,0.8); }

@media (max-width: 1024px) { .footer-main { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .footer-main { grid-template-columns: 1fr; } }

/* ── Scroll Reveal ────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 150ms; }
.reveal-delay-2 { transition-delay: 300ms; }
.reveal-delay-3 { transition-delay: 450ms; }

/* ── Utilities ────────────────────────────────────────────────────────────── */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 480px) { .btn-block { width: 100%; justify-content: center; } }

/* ── Grid Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4, .grid-2-3, .grid-3-2 { grid-template-columns: 1fr; }
}