/**
 * EcomHutsy.org LIVE theme — blue crystal (authoritative)
 * Source: https://ecomhutsy.org /_next/static/chunks/*.css :root + crystal-site
 * Load AFTER app.css
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

:root,
body.crystal-site,
body.crystal-site.object-glass,
body.automation-premium {
  --ink: #09142c;
  --muted: #3a4660;
  --blue: #095cff;
  --blue-2: #4c3bff;
  --orange: #ff7a00;
  --green: #17b879;
  --violet: #7b43f2;
  --cyan: #15a9d9;
  --purple: #6f3fde;
  --red: #ff4f64;
  --corp-blue: var(--blue);
  --surface: #ffffff;
  --ice: #f4f7ff;
  --canvas: #f8faff;
  --line: #1d43971f;
  --line-strong: #2759d533;
  --glass: #ffffffd1;
  --shadow: 0 24px 70px #1833701f;
  --shadow-soft: 0 14px 40px #18337017;
  --shadow-card: var(--shadow-soft);
  --shadow-cta: 0 13px 28px #224eff40, inset 0 1px #ffffff73;
  --radius: 28px;
  --site-width: min(1440px, calc(100% - 48px));
  --accent: var(--blue);
  --brown: #154ff3;
  --border: #1d43971f;
  --hero-wash:
    radial-gradient(circle at 12% 22%, #4158ff22, transparent 34%),
    radial-gradient(circle at 88% 18%, #095cff18, transparent 36%),
    linear-gradient(135deg, #ffffff, #f3f6ff);
  --dark-band:
    radial-gradient(ellipse at 20% 0%, rgba(9, 92, 255, 0.28), transparent 50%),
    linear-gradient(160deg, #0b1220 0%, #122044 55%, #081018 100%);
  --crystal-clear: #ffffff8a;
  --crystal-soft: #f8fbffb0;
  --crystal-frost: #eff5ffc2;
  --crystal-deep: #0a1c47c2;
  --crystal-line: #ffffffe0;
  --crystal-line-blue: #4b7bff40;
  --crystal-blue: #2665ffc7;
  --crystal-violet: #5b39ffc2;
  --crystal-orange: #ff7e14b8;
  --crystal-shadow:
    0 28px 80px #1c3a8929,
    0 8px 24px #22479c17,
    inset 0 1px 0 #fffffff5,
    inset 0 -1px 0 #5275cd1f;
  --crystal-shadow-hover:
    0 36px 95px #1c3d973b,
    0 14px 34px #3250ad21,
    inset 0 1px 0 #fff,
    inset 0 -1px 0 #4b70d62e;
}

html {
  color-scheme: light;
}

html,
body,
body.crystal-site,
body.automation-premium {
  font-family: "Segoe UI", Inter, Arial, sans-serif !important;
  color: var(--muted) !important;
  -webkit-font-smoothing: antialiased;
  background-color: var(--canvas) !important;
}

h1, h2, h3, h4, h5,
.font-display,
.section-kicker + h2,
.v3-section-title,
.hero-copy h1,
.home-hero h1,
.universe-hero h1,
.services-hero h1,
.product-hero h1,
.page-pro-hero__title,
.svc-hero__title,
.auto-hero__title,
.auto-section-title,
.auto-hero__brand {
  font-family: "Segoe UI", Inter, Arial, sans-serif !important;
  color: var(--ink) !important;
  letter-spacing: -0.045em !important;
  font-weight: 740 !important;
}

p, li, label, small, .muted, .lede,
.text-muted-text,
.text-on-surface-variant {
  color: var(--muted);
}

.section-kicker,
.eyebrow,
.section-label,
.v3-kicker,
.v3-eyebrow,
.page-pro-hero__eyebrow,
.svc-section-label,
.auto-section-label,
[class*="tracking-[0.1em]"][class*="uppercase"].text-primary-container {
  color: #154ff3 !important;
  background: #f4f6ffdb !important;
  border: 1px solid #395cff30 !important;
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 850 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 0 13px !important;
}

/* Crystal page atmosphere (live .org) */
body.crystal-site,
body.crystal-site.object-glass,
body.automation-premium {
  background-color: #f8faff !important;
  background-image: none !important;
  position: relative;
}

body.crystal-site::before,
body.automation-premium::before {
  content: "" !important;
  display: block !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -2 !important;
  background:
    radial-gradient(circle 310px at 50vw 28vh, #3784ff1f, transparent 72%),
    radial-gradient(circle at 18% 82%, #ff892014, transparent 28%),
    radial-gradient(circle at 82% 72%, #7043ff1a, transparent 31%) !important;
}

body.crystal-site::after,
body.automation-premium::after {
  content: "" !important;
  display: block !important;
  pointer-events: none !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: 0.34 !important;
  background-image:
    linear-gradient(#305cb40b 1px, transparent 1px),
    linear-gradient(90deg, #305cb40b 1px, transparent 1px) !important;
  background-size: 68px 68px !important;
  -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 88%);
  mask-image: radial-gradient(circle, #000 15%, transparent 88%);
}

body.crystal-site .site-header-stack,
body.crystal-site .site-nav,
body.automation-premium .auto-topbar,
body.automation-premium header.auto-nav {
  position: relative;
  z-index: 10000;
}

body.crystal-site main,
body.crystal-site footer,
body.automation-premium main,
body.automation-premium footer {
  position: relative;
  z-index: 1;
}

.home-hero,
.universe-hero,
.services-hero,
.product-hero,
.page-hero,
.hero-reveal,
.page-pro-hero,
.svc-hero,
.founder-pro-hero,
.about-corp-hero,
.auto-hero,
.auto-page-hero {
  background: var(--hero-wash) !important;
}

/* Nav */
.site-nav,
body.crystal-site .site-nav {
  background: #fffffff2 !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.site-nav.is-scrolled,
body.crystal-site .site-nav.is-scrolled,
body.crystal-site .site-nav--transparent.is-scrolled {
  border-bottom-color: #17357517 !important;
  box-shadow: 0 10px 32px #0f235112 !important;
  background: #fffffff2 !important;
}

.site-nav__link,
.site-nav > a:not(.site-dashboard) {
  color: #16213b !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

.site-nav__link:hover,
.site-nav > a:not(.site-dashboard):hover,
.site-nav__link.bg-soft-wash {
  color: var(--blue) !important;
  background: #eff4ff !important;
}

.site-nav__brand-ecom,
.site-nav__brand-text {
  color: #09142c !important;
}
.site-nav__brand-hutsy {
  color: #ff6a00 !important;
}

.site-nav__cta,
.site-dashboard,
.site-nav a[class*="bg-primary-container"],
.auto-nav__cta {
  background: linear-gradient(110deg, #075cff, #4f35ff) !important;
  background-image: linear-gradient(110deg, #075cff, #4f35ff) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 11px !important;
  font-size: 13px !important;
  font-weight: 760 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  box-shadow: 0 14px 28px #204fff45 !important;
}

.site-nav__cta:hover,
.site-dashboard:hover,
.auto-nav__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 36px #224eff57 !important;
  filter: none;
}

.nav-dropdown__menu,
.auto-nav-dropdown__menu {
  background: #ffffffee !important;
  border: 1px solid #2f4c961f !important;
  border-radius: 18px !important;
  box-shadow: var(--crystal-shadow) !important;
}

/* Buttons — live .org primary gradient */
.button-primary,
.v3-btn-primary,
a.v3-btn-primary,
button.v3-btn-primary,
.svc-btn--primary,
.auto-btn--primary,
.founder-pro-btn--primary,
.careers-btn-primary,
.page-pro-btn--primary,
a[class*="bg-primary-container"],
button[class*="bg-primary-container"],
.bg-primary-container {
  background: linear-gradient(110deg, #075cff, #4d38ff) !important;
  background-image: linear-gradient(110deg, #075cff, #4d38ff) !important;
  background-color: #095cff !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 11px !important;
  box-shadow: 0 13px 28px #224eff40, inset 0 1px #ffffff73 !important;
  font-weight: 760 !important;
}

.button-secondary,
.v3-btn-ghost,
.svc-btn--ghost,
.auto-btn--ghost,
.founder-pro-btn--ghost {
  color: var(--ink) !important;
  background: #ffffffdb !important;
  border: 1px solid #1f439126 !important;
  border-radius: 11px !important;
  box-shadow: 0 8px 24px #19346f0f, inset 0 1px #fff !important;
}

em {
  color: var(--orange);
  font-style: normal;
}

/* Tailwind utility remaps used across PHP templates */
.text-primary-container,
.text-primary,
.text-on-primary-container {
  color: var(--blue) !important;
}

.bg-background,
.bg-surface,
.bg-surface-container-low {
  background-color: var(--canvas) !important;
}

.bg-soft-wash {
  background-color: rgba(9, 92, 255, 0.1) !important;
}

.text-on-surface,
.text-ink-text {
  color: var(--ink) !important;
}

.text-muted-text,
.text-on-surface-variant {
  color: var(--muted) !important;
}

.border-outline-variant,
.border-border-dark {
  border-color: var(--line) !important;
}

.selection\:bg-primary-container::selection,
::selection {
  background: rgba(9, 92, 255, 0.22);
  color: var(--ink);
}