/* 8om Website 2.0 — Zoho-language dual theme.
   Colour tokens only; type/space/radius are shared.
   html[data-theme="light"|"dark"] */

:root,
html[data-theme="light"] {
  color-scheme: light;
  --color-primary: #e42527;
  --color-primary-hover: #c51f21;
  --color-secondary: #1a1a1a;
  --color-accent: #1e88e5;
  --color-accent-hover: #1565c0;
  --color-background: #ffffff;
  --color-surface: #ffffff;
  --color-surface-alt: #f7f7f7;
  --color-text: #1a1a1a;
  --color-text-muted: #5f6368;
  --color-border: #ececec;
  --color-success: #2e7d32;
  --color-warning: #b54708;
  --color-error: #e42527;
  --color-header-bg: #ffffff;
  --color-header-text: #1a1a1a;
  --color-header-muted: #5f6368;
  --color-on-primary: #ffffff;
  --color-inverse: #1a1a1a;
  --color-on-inverse: #ffffff;
  --color-placeholder: #9aa0a6;
  --color-border-strong: #dadce0;
  --color-focus-ring: #1e88e5;
  --shadow-focus: 0 0 0 3px rgba(30, 136, 229, 0.18);
  --color-pill-free-bg: #e8f5e9;
  --color-pill-paid-bg: #e3f2fd;
  --color-pill-paid-fg: #1565c0;
  --color-pill-signin-bg: #fff8e1;
  --color-theme-meta: #ffffff;
  --color-banner: #fff6d6;
  --color-banner-text: #1a1a1a;
  --color-brand-red: #EA4335;
  --color-brand-green: #34A853;
  --color-brand-blue: #4285F4;
  --color-brand-yellow: #FBBC05;
  --color-mega-shadow: 0 18px 50px rgba(26, 26, 26, 0.12);
  --color-featured: #3b1d8f;
  --color-featured-2: #1a237e;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --color-primary: #ff5a5c;
  --color-primary-hover: #ff7476;
  --color-secondary: #f2f2f2;
  --color-accent: #64b5f6;
  --color-accent-hover: #90caf9;
  --color-background: #121212;
  --color-surface: #1c1c1c;
  --color-surface-alt: #262626;
  --color-text: #f2f2f2;
  --color-text-muted: #b0b0b0;
  --color-border: #333333;
  --color-success: #81c784;
  --color-warning: #ffcc80;
  --color-error: #ff5a5c;
  --color-header-bg: #1a1a1a;
  --color-header-text: #f2f2f2;
  --color-header-muted: #b0b0b0;
  --color-on-primary: #ffffff;
  --color-inverse: #f2f2f2;
  --color-on-inverse: #121212;
  --color-placeholder: #8a8a8a;
  --color-border-strong: #4a4a4a;
  --color-focus-ring: #64b5f6;
  --shadow-focus: 0 0 0 3px rgba(100, 181, 246, 0.28);
  --color-pill-free-bg: #1c3a2c;
  --color-pill-paid-bg: #1c334d;
  --color-pill-paid-fg: #8bb8e8;
  --color-pill-signin-bg: #3a2e1c;
  --color-theme-meta: #121212;
  --color-banner: #3a3218;
  --color-banner-text: #ffe9a8;
  --color-brand-red: #EA4335;
  --color-brand-green: #34A853;
  --color-brand-blue: #4285F4;
  --color-brand-yellow: #FBBC05;
  --color-mega-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  --color-featured: #2a1568;
  --color-featured-2: #121a5c;
}

:root {
  --font-sans: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;

  --text-display: 3.75rem;
  --text-h1: 2.35rem;
  --text-h2: 1.55rem;
  --text-h3: 1.2rem;
  --text-h4: 1.05rem;
  --text-body-lg: 1.125rem;
  --text-body: 0.98rem;
  --text-small: 0.875rem;
  --text-caption: 0.75rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-8: 3.5rem;
  --space-10: 5rem;

  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --w2-max: 1180px;
  --w2-header-h: 64px;
  --w2-banner-h: 36px;
}

html:has(.w2-page) {
  background: var(--color-background);
}

html:has(.w2-page) body {
  background: var(--color-background) !important;
  color: var(--color-text);
  display: block;
  min-height: 0;
  margin: 0;
}

html:has(.w2-page) body > main {
  display: block;
  min-height: 0;
}

html:has(.w2-page) body.om8-cb-active > main {
  padding-bottom: 0 !important;
}

html:has(.w2-page) #footer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

html:has(.w2-page) #particles-js,
html:has(.w2-page) #fireworks-area {
  display: none !important;
}

/* Website 2.0 preloader — light, four-colour orbit around the 8om mark. */
html:has(.w2-page) #loader {
  display: flex !important;
  background: var(--color-background);
  color: var(--color-text);
}

html:has(.w2-page) #loader .loader-progress-bar {
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--color-brand-red),
    var(--color-brand-yellow),
    var(--color-brand-green),
    var(--color-brand-blue),
    var(--color-brand-red)
  );
  background-size: 220% 100%;
  animation: w2LoaderSweep 1.6s ease-in-out infinite;
  border-radius: 0;
}

html:has(.w2-page) #loader .loader-pulse-ring,
html:has(.w2-page) #loader .loader-logo-img:not(.loader-logo-img--brand) {
  display: none !important;
}

html:has(.w2-page) #loader .loader-logo-wrap {
  width: 118px;
  height: 118px;
}

html:has(.w2-page) #loader .loader-logo-wrap::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  z-index: 0;
}

html:has(.w2-page) #loader .loader-logo-wrap::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--color-brand-blue) 16%, transparent),
    transparent 72%
  );
  z-index: 0;
  animation: w2LoaderGlow 2.4s ease-in-out infinite;
}

html:has(.w2-page) #loader .loader-logo-img--brand {
  display: block !important;
  width: 46px;
  height: 52px;
  filter: none;
  z-index: 2;
  animation: w2LoaderBreathe 2.6s ease-in-out infinite;
}

html:has(.w2-page) #loader .w2-loader-orbit {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  animation: w2LoaderOrbit 3.4s linear infinite;
}

html:has(.w2-page) #loader .w2-loader-dot {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
}

html:has(.w2-page) #loader .w2-loader-dot--red {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--color-brand-red);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand-red) 55%, transparent);
}

html:has(.w2-page) #loader .w2-loader-dot--yellow {
  top: 50%;
  right: 0;
  transform: translate(50%, -50%);
  background: var(--color-brand-yellow);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand-yellow) 55%, transparent);
}

html:has(.w2-page) #loader .w2-loader-dot--green {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 50%);
  background: var(--color-brand-green);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand-green) 55%, transparent);
}

html:has(.w2-page) #loader .w2-loader-dot--blue {
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
  background: var(--color-brand-blue);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-brand-blue) 55%, transparent);
}

html:has(.w2-page) #loader .loader-content::after {
  content: "8om";
  margin-top: 1.2rem;
  font-family: var(--font-display) !important;
  font-weight: 800;
  font-size: 1.28rem;
  letter-spacing: 0.16em;
  color: var(--color-text);
  animation: w2LoaderFade 0.9s ease both;
}

@keyframes w2LoaderOrbit {
  to { transform: rotate(360deg); }
}

@keyframes w2LoaderBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes w2LoaderGlow {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes w2LoaderSweep {
  0% { width: 8%; background-position: 0% 0; }
  55% { width: 78%; }
  100% { width: 96%; background-position: 100% 0; }
}

@keyframes w2LoaderFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html:has(.w2-page) #loader .w2-loader-orbit,
  html:has(.w2-page) #loader .loader-logo-img--brand,
  html:has(.w2-page) #loader .loader-logo-wrap::after,
  html:has(.w2-page) #loader .loader-progress-bar,
  html:has(.w2-page) #loader .loader-content::after {
    animation: none !important;
  }

  html:has(.w2-page) #loader .loader-progress-bar {
    width: 100%;
  }
}

.w2-page {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-background);
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
}

.w2-page > .w2-main {
  grid-row: 2;
  min-width: 0;
}

.w2-page > .w2-footer {
  grid-row: 3;
}

.w2-page > :not(.w2-main):not(.w2-footer) {
  grid-row: 1;
}

.w2-page [hidden] {
  display: none !important;
}

.w2-page :not(svg):not(svg *) {
  font-family: var(--font-sans);
}

.w2-page h1,
.w2-page h2,
.w2-page h3,
.w2-page h4 {
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--color-text);
}

.w2-wrap {
  width: min(var(--w2-max), calc(100% - 2.5rem));
  margin-inline: auto;
}

.w2-main {
  padding-top: calc(var(--w2-banner-h) + var(--w2-header-h));
}

.w2-page .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}