/** Shopify CDN: Minification failed

Line 105:0 Unexpected "}"

**/
/* AEMAI MASTER DESIGN SYSTEM V7.0 — Space Grotesk Typography */

/* ============================================
   BRAND COLOR TOKENS
   ============================================ */

:root {
  /* Core brand palette */
  --color-bg:         #0a0a0a;
  --color-bg-card:    #111111;
  --color-bg-elevated:#181818;
  --color-surface:    rgba(255,255,255,0.04);

  /* Foreground / text — IMPROVED CONTRAST */
  --color-fg:         #f5f5f7;
  --color-fg-muted:   rgba(245,245,247,0.65);   /* was 0.55 — boosted */
  --color-fg-subtle:  rgba(245,245,247,0.45);   /* was 0.35 — boosted */

  /* Brand accent */
  --color-accent:     #0071E3;
  --color-accent-h:   #0077ED;
  --color-accent-2:   #00C7FF;

  /* Borders / dividers */
  --color-border:     rgba(255,255,255,0.1);     /* was 0.08 — boosted */
  --color-border-h:   rgba(255,255,255,0.18);     /* was 0.15 — boosted */

  /* Status colors */
  --color-success:    #30d158;
  --color-error:      #ff453a;
  --color-warning:    #ffd60a;

  /* Spacing & radius */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  /* Typography scale — Anker-inspired */
  --font-hero:     clamp(48px, 8vw, 96px);
  --font-h1:       clamp(36px, 5vw, 56px);
  --font-h2:       clamp(28px, 3.5vw, 40px);
  --font-h3:       clamp(20px, 2.5vw, 28px);
  --font-h4:       18px;
  --font-body:     16px;
  --font-body-sm:  14px;
  --font-caption:  12px;
  --font-micro:    11px;

  /* Letter spacing — tight/negative like Anker */
  --ls-tight:    -0.04em;
  --ls-normal:   -0.02em;
  --ls-loose:     0.02em;

  /* Line heights */
  --lh-heading:   1.05;
  --lh-sub:       1.2;
  --lh-body:      1.5;
  --lh-caption:   1.4;

  /* Legacy aliases */
  --black:    #0a0a0a;
  --white:    #f5f5f7;
  --grey:     #1d1d1f;
  --titanium: rgba(255,255,255,0.08);
}

/* ============================================
   BASE STYLES — Space Grotesk Bold-first
   ============================================ */

body {
  background-color: var(--color-bg) !important;
  color: var(--color-fg) !important;
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: var(--font-body);
  line-height: var(--lh-body);
  margin: 0;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Fix: force GPU layer for WeChat/ios WKWebView fixed positioning */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
  /* Prevent WeChat WebView from letting this layer scroll with content */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
}

/* ============================================
   NAVIGATION
   ============================================ */

.aemai-nav-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 10000;
  padding: 20px 6%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10,10,10,0.85);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.3s ease;
}

.aemai-logo img {
  height: 32px;
  width: auto;
  transition: transform 0.3s ease;
}
.aemai-logo:hover img { transform: scale(1.05); }

.aemai-links {
  display: flex;
  gap: 36px;
  align-items: center;
}
.aemai-links a {
  color: var(--color-fg);
  text-decoration: none;
  font-size: var(--font-body-sm);
  font-weight: 700;
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  transition: color 0.3s ease;
}
.aemai-links a:hover { color: var(--color-accent); }

/* ============================================
   BUTTONS — Bold, impactful
   ============================================ */

.aemai-btn-primary,
.btn-pro,
.button {
  display: inline-block;
  padding: 15px 36px;
  background: var(--color-accent);
  color: var(--color-fg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--font-body-sm);
  font-weight: 700;
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.aemai-btn-primary:hover,
.btn-pro:hover,
.button:hover {
  background: var(--color-accent-h);
  border-color: var(--color-accent-h);
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0,113,227,0.4);
}

.aemai-btn-ghost {
  display: inline-block;
  padding: 15px 36px;
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border-h);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--font-body-sm);
  font-weight: 700;
  letter-spacing: var(--ls-loose);
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
}
.aemai-btn-ghost:hover {
  background: var(--color-surface);
  border-color: var(--color-fg-muted);
}

/* ============================================
   TYPOGRAPHY — Anker-inspired hierarchy
   ============================================ */

h1 {
  font-size: var(--font-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  margin: 0 0 0.4em;
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h2 {
  font-size: var(--font-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  margin: 0 0 0.4em;
  letter-spacing: var(--ls-tight);
  color: var(--color-fg);
}

h3 {
  font-size: var(--font-h3);
  font-weight: 700;
  line-height: var(--lh-sub);
  margin: 0 0 0.3em;
  letter-spacing: var(--ls-normal);
  color: var(--color-fg);
}

h4, h5, h6 {
  font-size: var(--font-h4);
  font-weight: 700;
  line-height: var(--lh-sub);
  margin: 0 0 0.3em;
  letter-spacing: var(--ls-normal);
  color: var(--color-fg);
}

p {
  color: var(--color-fg-muted);
  margin: 0 0 1em;
  font-weight: 500;
  line-height: var(--lh-body);
}

a { color: var(--color-accent); transition: color 0.2s ease; }
a:hover { color: var(--color-accent-h); }

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-accent { color: var(--color-accent); }
.text-muted  { color: var(--color-fg-muted); }
.text-subtle { color: var(--color-fg-subtle); }
.text-center { text-align: center; }

.bg-card     { background-color: var(--color-bg-card); }
.bg-elevated { background-color: var(--color-bg-elevated); }
.bg-surface  { background-color: var(--color-surface); }

.border-default { border: 1px solid var(--color-border); }
.border-hover   { border: 1px solid var(--color-border-h); }

/* ============================================
   HIDE DEFAULT SHOPIFY HEADER/FOOTER
   ============================================ */

#header-component,
.shopify-section-header-group,
footer:not(.aemai-pro-footer) {
  display: none !important;
}

/* ============================================
   MOBILE RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .aemai-nav-fixed {
    padding: 14px 4% !important;
  }
  .aemai-links { gap: 16px !important; }

  .aemai-btn-primary,
  .btn-pro,
  .button {
    padding: 13px 24px;
    font-size: 13px;
  }
  .aemai-btn-ghost {
    padding: 13px 24px;
    font-size: 13px;
  }

  body { font-size: 15px; }

  h1 { letter-spacing: -0.02em; }
  h2 { letter-spacing: -0.02em; }
}