/* ============================================================
   ROYAN — Premium futuristic theme (purple neon)
   Dark (default):  Purple + Black   — #070312 / #0B0617
   Light:           Purple + White   — #FFFFFF / #F8F8FC
   Only neutral tokens change between themes; purple branding
   (gradients, #A855F7 / #9333EA / #C084FC) is identical.
   ============================================================ */

:root {
  /* ---- core surfaces / text (DARK defaults) ---- */
  --site-bg: #070312;
  --site-surface: #0B0617;
  --site-surface-soft: #150c28;
  --site-text: #ffffff;
  --site-muted: rgba(255, 255, 255, .7);
  --site-subtle: rgba(255, 255, 255, .55);
  --site-border: rgba(168, 85, 247, .22);
  --site-primary: #A855F7;
  --site-primary-strong: #C084FC;
  --site-secondary: #9333EA;
  --site-accent: #7C3AED;
  --site-footer: #0B0617;
  --site-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --site-glow: 0 0 28px rgba(168, 85, 247, .35);

  /* ---- branding (identical in both themes) ---- */
  --site-grad: linear-gradient(135deg, #A855F7, #7C3AED);
  --site-grad-bright: linear-gradient(135deg, #C084FC, #9333EA);

  /* ---- accent text (readable purple per theme) ---- */
  --accent-text: #C084FC;

  /* ---- page background glows ---- */
  --bg-glow-1: rgba(124, 58, 237, .22);
  --bg-glow-2: rgba(147, 51, 234, .14);
  --bg-glow-3: rgba(168, 85, 247, .1);

  /* ---- cards / glass ---- */
  --glass-card-bg: linear-gradient(160deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .02));
  --card-shadow: 0 12px 34px rgba(0, 0, 0, .35);
  --card-hover-shadow: 0 24px 50px rgba(0, 0, 0, .45), 0 0 34px rgba(168, 85, 247, .22);
  --card-hover-border: rgba(192, 132, 252, .55);
  --card-glow: 0 0 36px rgba(124, 58, 237, .14);

  /* ---- nav / menus ---- */
  --nav-bg: rgba(7, 3, 18, .72);
  --nav-bg-strong: rgba(7, 3, 18, .85);
  --nav-border: rgba(168, 85, 247, .16);
  --nav-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  --nav-link: rgba(255, 255, 255, .82);
  --nav-link-hover: #ffffff;
  --link-glow: 0 0 18px rgba(192, 132, 252, .6);
  --menu-bg: rgba(15, 8, 30, .92);
  --menu-link: rgba(255, 255, 255, .85);
  --panel-bg: rgba(11, 6, 23, .92);
  --panel-hover: rgba(168, 85, 247, .14);

  /* ---- fills / chips / inputs ---- */
  --fill-soft: rgba(255, 255, 255, .07);
  --fill-softer: rgba(255, 255, 255, .05);
  --chip-bg: rgba(21, 12, 40, .8);
  --chip-border: rgba(168, 85, 247, .3);
  --chip-color: #ffffff;
  --ghost-bg: rgba(255, 255, 255, .06);
  --ghost-border: rgba(192, 132, 252, .45);
  --ghost-color: #ffffff;
  --ghost-glow: 0 0 22px rgba(168, 85, 247, .14), inset 0 1px 0 rgba(255, 255, 255, .1);
  --input-bg: rgba(255, 255, 255, .05);
  --placeholder: rgba(255, 255, 255, .38);
  --toggle-bg: rgba(255, 255, 255, .06);
  --toggle-border: rgba(168, 85, 247, .3);

  /* ---- buttons ---- */
  --btn-shadow: 0 10px 30px rgba(168, 85, 247, .32), inset 0 1px 0 rgba(255, 255, 255, .18);
  --btn-hover-shadow: 0 14px 36px rgba(168, 85, 247, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
  --action-hover-shadow: 0 14px 32px rgba(168, 85, 247, .35);
  --action-active-shadow: 0 8px 18px rgba(168, 85, 247, .28);
  --action-focus-shadow: 0 0 0 4px rgba(168, 85, 247, .3), 0 14px 28px rgba(168, 85, 247, .25);

  /* ---- hero ---- */
  --hero-glow-1: rgba(124, 58, 237, .3);
  --hero-glow-2: rgba(147, 51, 234, .16);
  --grid-line: rgba(192, 132, 252, .05);
  --grid-line-2: rgba(192, 132, 252, .04);
  --grid-opacity: .35;
  --h1-glow: 0 0 46px rgba(168, 85, 247, .35);
  --hero-img-filter: drop-shadow(0 30px 70px rgba(124, 58, 237, .5));
  --brain-filter: drop-shadow(0 14px 34px rgba(168, 85, 247, .55));
  --brain-shadow-bg: rgba(124, 58, 237, .5);

  /* ---- bands / footer ---- */
  --band-bg:
    radial-gradient(600px 300px at 80% 20%, rgba(192, 132, 252, .18), transparent 60%),
    linear-gradient(120deg, rgba(124, 58, 237, .38), rgba(88, 28, 135, .22));
  --band-border: rgba(168, 85, 247, .2);
  --footer-bg:
    radial-gradient(700px 300px at 50% 0%, rgba(124, 58, 237, .14), transparent 65%),
    #0B0617;
  --footer-border: rgba(168, 85, 247, .16);
  --footer-heading: #ffffff;

  /* ---- content / status colors ---- */
  --content-text: rgba(255, 255, 255, .78);
  --text-soft: rgba(255, 255, 255, .6);
  --success-text: #34d399;
  --danger-bg: rgba(127, 29, 29, .35);
  --danger-border: rgba(248, 113, 113, .4);
  --danger-text: #fca5a5;
  --required-mark: #f0abfc;

  /* ---- toasts ---- */
  --toast-success-bg: rgba(6, 78, 59, .55);
  --toast-success-border: rgba(52, 211, 153, .4);
  --toast-success-text: #6ee7b7;
  --toast-warn-bg: rgba(120, 53, 15, .5);
  --toast-warn-border: rgba(251, 191, 36, .4);
  --toast-warn-text: #fcd34d;
  --toast-error-bg: rgba(127, 29, 29, .55);
  --toast-error-border: rgba(248, 113, 113, .4);
  --toast-error-text: #fca5a5;
  --toast-info-bg: rgba(21, 12, 40, .85);
  --toast-info-border: rgba(168, 85, 247, .22);
  --toast-info-text: #ffffff;

  /* ---- trend indicator ---- */
  --trend-up-bg: rgba(52, 211, 153, .18);
  --trend-up-text: #6ee7b7;
  --trend-down-bg: rgba(248, 113, 113, .18);
  --trend-down-text: #fca5a5;
  --trend-steady-bg: rgba(192, 132, 252, .14);
  --trend-steady-text: rgba(255, 255, 255, .65);

  /* ---- misc ---- */
  --machine-bg: linear-gradient(145deg, #150c28, #0B0617);
  --icon-bar: #ffffff;
  --scroll-track: #0B0617;
  --theme-track-bg: rgba(168, 85, 247, .18);
  --theme-track-border: rgba(168, 85, 247, .35);

  color-scheme: dark;
}
/* ---------------------------------------------------------
   3. LAYOUT PRIMITIVES
--------------------------------------------------------- */
.container-site {
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: 24px;
  width: 100%;
}

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section-tight {
  padding-block: calc(var(--section-y) * .55);
  position: relative;
}
/* ============================================================
   LIGHT THEME TOKENS — Purple + White
   (same design language; only neutrals change)
   ============================================================ */
html[data-theme="light"],
html[data-theme="auto"][data-resolved-theme="light"] {
  --site-bg: #ffffff;
  --site-surface: #ffffff;
  --site-surface-soft: #F8F8FC;
  --site-text: #111827;
  --site-muted: #6B7280;
  --site-subtle: #9CA3AF;
  --site-border: #E5E7EB;
  --site-footer: #F8F8FC;
  --site-shadow: 0 18px 40px rgba(17, 24, 39, .08);
  --site-glow: 0 0 24px rgba(168, 85, 247, .18);

  --accent-text: #9333EA;

  --bg-glow-1: rgba(124, 58, 237, .09);
  --bg-glow-2: rgba(147, 51, 234, .05);
  --bg-glow-3: rgba(168, 85, 247, .05);

  --glass-card-bg: linear-gradient(160deg, #ffffff, #faf9ff);
  --card-shadow: 0 10px 30px rgba(17, 24, 39, .05), 0 2px 8px rgba(147, 51, 234, .04);
  --card-hover-shadow: 0 22px 44px rgba(17, 24, 39, .09), 0 0 26px rgba(168, 85, 247, .12);
  --card-hover-border: rgba(168, 85, 247, .45);
  --card-glow: 0 0 30px rgba(124, 58, 237, .08);

  --nav-bg: rgba(255, 255, 255, .72);
  --nav-bg-strong: rgba(255, 255, 255, .88);
  --nav-border: rgba(147, 51, 234, .12);
  --nav-shadow: 0 10px 30px rgba(17, 24, 39, .06);
  --nav-link: #374151;
  --nav-link-hover: #111827;
  --link-glow: 0 0 14px rgba(168, 85, 247, .25);
  --menu-bg: rgba(255, 255, 255, .94);
  --menu-link: #374151;
  --panel-bg: rgba(255, 255, 255, .96);
  --panel-hover: rgba(168, 85, 247, .1);

  --fill-soft: #F3F4F6;
  --fill-softer: #F8F8FC;
  --chip-bg: rgba(255, 255, 255, .9);
  --chip-border: rgba(168, 85, 247, .25);
  --chip-color: #111827;
  --ghost-bg: #ffffff;
  --ghost-border: rgba(168, 85, 247, .4);
  --ghost-color: #9333EA;
  --ghost-glow: 0 0 18px rgba(168, 85, 247, .08), 0 4px 14px rgba(17, 24, 39, .05);
  --input-bg: #ffffff;
  --placeholder: #9CA3AF;
  --toggle-bg: rgba(147, 51, 234, .07);
  --toggle-border: rgba(168, 85, 247, .28);

  --btn-shadow: 0 10px 26px rgba(168, 85, 247, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
  --btn-hover-shadow: 0 14px 32px rgba(168, 85, 247, .32), inset 0 1px 0 rgba(255, 255, 255, .3);
  --action-hover-shadow: 0 12px 26px rgba(168, 85, 247, .22);
  --action-active-shadow: 0 8px 16px rgba(168, 85, 247, .18);
  --action-focus-shadow: 0 0 0 4px rgba(168, 85, 247, .2), 0 12px 24px rgba(168, 85, 247, .16);

  --hero-glow-1: rgba(124, 58, 237, .12);
  --hero-glow-2: rgba(147, 51, 234, .06);
  --grid-line: rgba(147, 51, 234, .06);
  --grid-line-2: rgba(147, 51, 234, .05);
  --grid-opacity: .5;
  --h1-glow: 0 0 40px rgba(168, 85, 247, .15);
  --hero-img-filter: drop-shadow(0 30px 60px rgba(124, 58, 237, .28));
  --brain-filter: drop-shadow(0 14px 30px rgba(168, 85, 247, .35));
  --brain-shadow-bg: rgba(124, 58, 237, .35);

  --band-bg:
    radial-gradient(600px 300px at 80% 20%, rgba(233, 213, 255, .35), transparent 60%),
    linear-gradient(120deg, #A855F7, #7C3AED);
  --band-border: rgba(168, 85, 247, .25);
  --footer-bg:
    radial-gradient(700px 300px at 50% 0%, rgba(124, 58, 237, .08), transparent 65%),
    #F8F8FC;
  --footer-border: rgba(147, 51, 234, .14);
  --footer-heading: #111827;

  --content-text: #374151;
  --text-soft: #9CA3AF;
  --success-text: #059669;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --danger-text: #B91C1C;
  --required-mark: #9333EA;

  --toast-success-bg: #ECFDF5;
  --toast-success-border: #A7F3D0;
  --toast-success-text: #047857;
  --toast-warn-bg: #FFFBEB;
  --toast-warn-border: #FDE68A;
  --toast-warn-text: #92400E;
  --toast-error-bg: #FEF2F2;
  --toast-error-border: #FECACA;
  --toast-error-text: #B91C1C;
  --toast-info-bg: #ffffff;
  --toast-info-border: #E5E7EB;
  --toast-info-text: #111827;

  --trend-up-bg: rgba(16, 185, 129, .14);
  --trend-up-text: #047857;
  --trend-down-bg: rgba(239, 68, 68, .12);
  --trend-down-text: #B91C1C;
  --trend-steady-bg: rgba(147, 51, 234, .1);
  --trend-steady-text: #6B7280;

  --machine-bg: linear-gradient(145deg, #F5F2FC, #ffffff);
  --icon-bar: #111827;
  --scroll-track: #F3F4F6;
  --theme-track-bg: rgba(147, 51, 234, .12);
  --theme-track-border: rgba(168, 85, 247, .3);

  color-scheme: light;
}

* {
  box-sizing: border-box;
  letter-spacing: 0;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(1100px 620px at 85% -6%, var(--bg-glow-1), transparent 60%),
    radial-gradient(900px 560px at -12% 28%, var(--bg-glow-2), transparent 55%),
    radial-gradient(760px 520px at 55% 108%, var(--bg-glow-3), transparent 62%),
    var(--site-bg) !important;
  background-attachment: fixed;
  color: var(--site-text) !important;
  scroll-behavior: smooth;
}

::selection {
  background: rgba(168, 85, 247, .45);
  color: #fff;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #7C3AED, #4c1d95);
  border-radius: 8px;
  border: 2px solid var(--scroll-track);
}

img,
video,
iframe,
svg {
  max-width: 100%;
}

a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease; }

.site-action {
  align-items: center;
  display: inline-flex;
  justify-content: center;
}

.site-action,
main form button,
main form input[type="submit"] {
  transform: translateY(0) scale(1);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
  will-change: transform;
}

.site-action:hover,
main form button:hover,
main form input[type="submit"]:hover {
  box-shadow: var(--action-hover-shadow) !important;
  transform: translateY(-2px) scale(1.015) !important;
}

.site-action:active,
main form button:active,
main form input[type="submit"]:active {
  box-shadow: var(--action-active-shadow) !important;
  transform: translateY(0) scale(.985) !important;
}

.site-action:focus-visible,
main form button:focus-visible,
main form input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: var(--action-focus-shadow);
}

.site-action:disabled,
main form button:disabled,
main form input[type="submit"]:disabled {
  box-shadow: none;
  cursor: not-allowed;
  opacity: .65;
  transform: none !important;
}

.live-rates-stack {
  direction: ltr;
  flex: 0 0 auto;
  min-height: 2.35rem;
  width: 11.8rem;
}

.live-rates-placeholder {
  pointer-events: none;
  visibility: hidden;
}

.live-rate-row {
  align-items: center;
  column-gap: .32rem;
  direction: ltr;
  display: grid;
  grid-template-columns: 2.45rem 9rem;
}

.live-rate-label {
  display: inline-flex;
  justify-content: flex-start;
  text-align: left;
  white-space: nowrap;
}

.live-value-group {
  align-items: center;
  direction: ltr;
  display: grid;
  gap: .16rem;
  grid-template-columns: 4.25rem 4.55rem;
  justify-content: flex-start;
  min-width: 0;
  width: 100%;
}

.live-rate-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  min-width: 4.25rem;
  text-align: left;
}

.trend-indicator {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font-size: .74rem;
  font-weight: 700;
  height: 1.35rem;
  justify-content: center;
  line-height: 1;
  min-width: 4.55rem;
  padding: 0 .36rem;
  white-space: nowrap;
  transition:
    background-color .2s ease,
    color .2s ease,
    transform .2s ease,
    opacity .2s ease;
}

.trend-indicator[hidden] {
  display: inline-flex !important;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

.trend-indicator [data-trend-icon] {
  font-size: .82rem;
}

.trend-indicator [data-trend-percent] {
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

.trend-indicator[data-trend-state="up"] {
  background: var(--trend-up-bg);
  color: var(--trend-up-text);
}

.trend-indicator[data-trend-state="down"] {
  background: var(--trend-down-bg);
  color: var(--trend-down-text);
}

.trend-indicator[data-trend-state="steady"] {
  background: var(--trend-steady-bg);
  color: var(--trend-steady-text);
}

.industrial-hero {
  background:
    linear-gradient(90deg, rgba(88, 28, 135, .92), rgba(11, 6, 23, .9)),
    radial-gradient(circle at 18% 22%, rgba(192, 132, 252, .2), transparent 26%),
    repeating-linear-gradient(135deg, rgba(192, 132, 252, .08) 0 1px, transparent 1px 28px);
}
.machine-visual {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  border-radius: 16px;
  background: var(--machine-bg);
  border: 1px solid var(--site-border);
}
.machine-visual img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  object-fit: cover;
}
.icon-btn { display:grid; gap:4px; width:42px; height:42px; place-content:center; border-radius:10px; }
.icon-btn span { display:block; width:20px; height:2px; background:var(--icon-bar); border-radius:2px; }
.section-title { color:var(--site-text); font-size: clamp(1.5rem, 2.4vw, 2.25rem); font-weight: 800; }
.required-mark { color: var(--required-mark) !important; }
.form-input { width:100%; border:1px solid var(--site-border); border-radius:12px; padding:.8rem 1rem; background:var(--input-bg); color:var(--site-text); outline:none; transition: border-color .2s ease, box-shadow .2s ease; }
.form-input:focus { border-color:var(--site-primary); box-shadow:0 0 0 3px rgba(168,85,247,.22); }
.form-input::placeholder { color: var(--placeholder); }
.admin-dashboard-link { margin: 0 0 16px; }

.glass-nav nav {
  min-width: 0;
}

.glass-nav a,
[data-menu] a,
[data-menu] button {
  min-width: 0;
}

.site-theme-toggle {
  border: 1px solid var(--toggle-border);
  border-radius: 50%;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  width: 40px;
  white-space: nowrap;
}

.site-theme-toggle {
  align-items: center;
  background: var(--toggle-bg);
  color: var(--site-text);
  display: inline-flex;
  justify-content: center;
  padding: 0;
  transform: translateY(0) scale(1);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
  will-change: transform;
}

.site-theme-toggle svg {
  transform-origin: center;
  transition: transform .24s ease, opacity .18s ease;
}

.site-theme-toggle .icon-sun {
  color: #ffd43b;
}

.site-theme-toggle .icon-moon,
.site-theme-toggle .icon-sun {
  display: none;
}

.site-theme-toggle[data-theme-value="light"] .icon-moon,
.site-theme-toggle[data-theme-value="dark"] .icon-sun {
  display: block;
}

.site-theme-toggle:hover {
  box-shadow: var(--action-hover-shadow) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.site-theme-toggle:active {
  box-shadow: var(--action-active-shadow) !important;
  transform: translateY(0) scale(.96) !important;
}

.site-theme-toggle:hover .icon-sun {
  transform: rotate(35deg) scale(1.08);
}

.site-theme-toggle:hover .icon-moon {
  transform: rotate(-14deg) scale(1.08);
}

.nav-auth-action {
  border-radius: 50% !important;
  height: 40px;
  min-height: 40px;
  min-width: 40px;
  padding: 0 !important;
  transform: translateY(0) scale(1);
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    color .2s ease;
  width: 40px;
  will-change: transform;
}

.nav-auth-action svg {
  transform-origin: center;
  transition: transform .2s ease;
}

.nav-auth-action:hover {
  background: var(--site-grad-bright) !important;
  box-shadow: 0 12px 26px rgba(168, 85, 247, .4) !important;
  transform: translateY(-2px) scale(1.06) !important;
}

.nav-auth-action:hover svg {
  transform: scale(1.08);
}

.nav-auth-action:active {
  box-shadow: 0 7px 16px rgba(168, 85, 247, .3) !important;
  transform: translateY(0) scale(.95) !important;
}

.account-menu {
  flex: 0 0 auto;
}

.account-menu > summary {
  list-style: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu[open] > .nav-auth-action {
  background: var(--site-grad-bright) !important;
  box-shadow: 0 12px 26px rgba(168, 85, 247, .4) !important;
}

.account-menu-panel {
  background: var(--panel-bg);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--site-border);
  border-radius: 14px;
  box-shadow: var(--site-shadow), var(--card-glow);
  left: 0;
  padding: 6px;
  position: absolute;
  top: calc(100% + .65rem);
  width: 184px;
  z-index: 80;
}

.account-menu-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--site-text);
  cursor: pointer;
  display: flex;
  font-family: inherit;
  font-size: .875rem;
  font-weight: 600;
  gap: .65rem;
  padding: .7rem .75rem;
  text-align: right;
  width: 100%;
}

.account-menu-item:hover,
.account-menu-item:focus-visible {
  background: var(--panel-hover);
  outline: none;
}

.account-menu-item svg {
  flex: 0 0 auto;
  height: 19px;
  width: 19px;
}

.account-menu-form {
  border-top: 1px solid var(--site-border);
  margin-top: 4px;
  padding-top: 4px;
}

.account-menu-item-danger {
  color: var(--danger-text);
}

@media (min-width: 1024px) {
  .nav-menu-list {
    align-items: center;
    flex-wrap: nowrap;
    gap: .95rem !important;
    white-space: nowrap;
  }

  .nav-menu-list > li,
  .nav-menu-list > div,
  .nav-menu-list > button,
  .nav-menu-list > a {
    flex: 0 0 auto;
  }

  .nav-menu-list .nav-link {
    white-space: nowrap;
  }

  .nav-consult-link {
    margin-left: 0;
  }
}

.theme-toggle-track {
  background: var(--theme-track-bg);
  border: 1px solid var(--theme-track-border);
  border-radius: 999px;
  display: inline-flex;
  height: 22px;
  padding: 2px;
  width: 42px;
}

.theme-toggle-thumb {
  background: var(--site-primary);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(168, 85, 247, .5);
  display: block;
  height: 16px;
  transform: translateX(0);
  transition: transform .2s ease, background-color .2s ease;
  width: 16px;
}

[data-theme-toggle][data-theme-value="dark"] .theme-toggle-thumb {
  background: #f8fafc;
  transform: translateX(-18px);
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(50px);
}

.animate-on-scroll.show {
  animation: fadeUp .8s ease forwards;
}

.delay-1.show { animation-delay: .1s; }
.delay-2.show { animation-delay: .2s; }
.delay-3.show { animation-delay: .3s; }
.delay-4.show { animation-delay: .4s; }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes glowPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@media (max-width: 1024px) {
  [data-menu] {
    max-height: calc(100vh - 84px);
    overflow-y: auto;
  }

  [data-menu] > .flex {
    align-items: stretch;
  }

  [data-menu] a,
  [data-menu] button {
    justify-content: center;
    width: 100%;
  }

  [data-menu] .site-theme-toggle {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .machine-visual {
    min-height: 260px;
  }

  .industrial-hero {
    background:
      linear-gradient(180deg, rgba(88, 28, 135, .94), rgba(11, 6, 23, .92)),
      radial-gradient(circle at 18% 22%, rgba(192, 132, 252, .16), transparent 26%);
  }
}

@media (max-width: 640px) {
  .section-title {
    font-size: 1.35rem;
    line-height: 1.7;
  }

  .machine-visual {
    min-height: 220px;
  }

  .glass-nav img {
    max-height: 56px;
    object-fit: contain;
  }

  .glass-nav nav {
    padding-bottom: .8rem;
    padding-top: .8rem;
  }

  .animate-on-scroll {
    transform: translateY(24px);
  }
}


/* /////////////////////////////////////////////////////// */


.brain-wrapper{
    position:absolute;
}

.brain-shadow{
    position:absolute;
    left:50%;
    top:140px;

    width:95px;
    height:22px;

    transform:translateX(-50%);
    border-radius:50%;

    background:var(--brain-shadow-bg);
    filter:blur(18px);

    z-index:-1;
    animation: glowPulse 4s ease-in-out infinite;
}


/* /////////////////////////////////////////////////////////////////////////////////////////////////// */


.nav-link {
  position: relative;
  color: var(--nav-link);
  transition: 0.3s;
}

.nav-link:hover {
  color: var(--nav-link-hover);
  text-shadow: var(--link-glow);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 0;
  width: 0%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #C084FC, #7C3AED);
  box-shadow: 0 0 10px rgba(168, 85, 247, .7);
  transition: 0.3s;
}

.nav-link:hover::after {
  width: 100%;
}

/* Mega smooth animation */
.mega {
  transform-origin: top;
}

/* Header shrink */
header.shrink {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--nav-bg-strong) !important;
  backdrop-filter: blur(18px);
}

#menu li {
  list-style: none;
}


/* ============================================================
   THEME LAYER — remap Tailwind utilities to theme tokens
   (loaded after CDN utilities need !important to win)
   ============================================================ */

/* ---------- Header / nav ---------- */
.glass-nav {
  background: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--nav-shadow);
}

.glass-nav .text-slate-900 { color: var(--site-text) !important; }

/* dropdown + mobile menu panels become glass */
div.bg-white,
[data-menu].bg-white {
  background: var(--menu-bg) !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: var(--site-border) !important;
}

[data-menu] { color: var(--site-text); }
[data-menu] a { color: var(--menu-link); }
[data-menu] a:hover { color: var(--accent-text); }

/* ---------- Generic text remaps ---------- */
.text-black,
.text-slate-900,
.text-slate-800,
.text-slate-700 { color: var(--site-text) !important; }

.text-slate-600,
.text-slate-500,
.text-\[\#6B7280\],
.text-\[rgb\(117_117_117\)\] { color: var(--site-muted) !important; }

.text-slate-400,
.text-slate-300,
.text-slate-200 { color: var(--text-soft) !important; }

.text-steel,
.text-sky-400,
.text-sky-500,
.text-\[\#0057BB\],
.text-\[\#00429a\],
.text-\[\#0A6DFF\] { color: var(--accent-text) !important; }

.text-sky-100 { color: rgba(255, 255, 255, .72) !important; }

.hover\:text-\[\#0057BB\]:hover,
.hover\:text-\[\#00429a\]:hover { color: var(--accent-text) !important; }

.text-emerald-700 { color: var(--success-text) !important; }

/* ---------- Sections ---------- */
main section.bg-white,
main section.bg-slate-50,
main section.bg-slate-100 { background: transparent !important; }

/* deep gradient feature band (projects highlight) — identical in both
   themes: a dark purple showcase band reads as premium on light too */
section.bg-gradient-to-r {
  background:
    radial-gradient(700px 400px at 20% 50%, rgba(124, 58, 237, .3), transparent 60%),
    linear-gradient(105deg, #12081f, #1a0b2e 45%, #0B0617) !important;
  border-top: 1px solid rgba(168, 85, 247, .14);
  border-bottom: 1px solid rgba(168, 85, 247, .14);
}

div.from-transparent {
  background: linear-gradient(to right, transparent, rgba(18, 8, 31, .85), #12081f) !important;
}

/* CTA bands — purple in both themes (white text stays legible) */
section.bg-blue-700,
section.bg-sky-500 {
  background: var(--band-bg) !important;
  border-top: 1px solid var(--band-border);
  border-bottom: 1px solid var(--band-border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* CTA band text stays white on the purple band in both themes */
section.bg-blue-700 .text-slate-600,
section.bg-sky-500 .text-slate-600 { color: rgba(255, 255, 255, .75) !important; }

/* ---------- Cards (glassmorphism) ---------- */
article.bg-white,
article.bg-slate-50,
main div.bg-white,
main div.bg-slate-50,
main form.bg-white {
  background: var(--glass-card-bg) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-color: var(--site-border) !important;
  box-shadow: var(--card-shadow);
}

main article,
main .rounded-xl,
main .rounded-2xl { border-radius: 18px; }

.border-slate-200,
.border-\[\#E7EAF1\],
.border-white\/40 { border-color: var(--site-border) !important; }

.hover\:border-blue-300:hover { border-color: var(--card-hover-border) !important; }

.hover\:shadow-\[0_20px_40px_rgba\(59\,130\,246\,0\.12\)\]:hover,
article:hover {
  box-shadow: var(--card-hover-shadow) !important;
}

.bg-slate-200 { background: var(--fill-soft) !important; }
.bg-slate-100 { background: var(--fill-softer) !important; }
.text-slate-500.bg-slate-200 { color: var(--site-subtle) !important; }

/* carousel arrows / translucent chips */
.bg-white\/85,
.bg-white\/80 {
  background: var(--chip-bg) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--chip-border);
  color: var(--chip-color) !important;
}

.hover\:bg-white:hover {
  background: var(--site-grad) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(168, 85, 247, .45) !important;
}

/* ---------- Buttons ---------- */
a.bg-steel,
button.bg-steel,
a.bg-blue-700,
a.bg-\[\#0057BB\],
button.bg-\[\#0057BB\],
a.bg-\[\#00469A\],
a.bg-\[\#00429a\],
button.bg-\[\#00429a\],
a.bg-\[\#00C2FF\],
a.bg-sky-400,
main form button,
main form input[type="submit"] {
  background: var(--site-grad) !important;
  border: 1px solid rgba(192, 132, 252, .4) !important;
  border-radius: 14px !important;
  color: #fff !important;
  box-shadow: var(--btn-shadow);
}

a.bg-steel:hover,
button.bg-steel:hover,
a.bg-\[\#0057BB\]:hover,
button.bg-\[\#0057BB\]:hover,
a.bg-\[\#00C2FF\]:hover,
main form button:hover,
main form input[type="submit"]:hover,
.hover\:bg-\[\#0057BB\]:hover,
.hover\:bg-\[\#00469A\]:hover,
.hover\:bg-\[\#00429a\]:hover,
.hover\:bg-sky-400:hover {
  background: var(--site-grad-bright) !important;
  color: #fff !important;
  box-shadow: var(--btn-hover-shadow) !important;
}

/* outline / ghost buttons (previously white) */
main a.bg-white {
  background: var(--ghost-bg) !important;
  border: 1px solid var(--ghost-border) !important;
  border-radius: 14px !important;
  color: var(--ghost-color) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--ghost-glow);
}

main a.bg-white:hover {
  background: var(--site-grad) !important;
  border-color: rgba(192, 132, 252, .7) !important;
  box-shadow: 0 12px 32px rgba(168, 85, 247, .45) !important;
  color: #fff !important;
}

.border-steel,
.border-\[\#0057BB\] { border-color: rgba(192, 132, 252, .5) !important; }

a.border-steel { border-radius: 14px !important; color: var(--accent-text) !important; }

.focus\:ring-\[\#0057BB\]\/25:focus,
.focus\:ring-steel\/30:focus { --tw-ring-color: rgba(168, 85, 247, .35) !important; }

/* ---------- Footer ---------- */
footer.bg-\[\#0A1326\] {
  background: var(--footer-bg) !important;
  border-top: 1px solid var(--footer-border);
  color: var(--site-muted) !important;
}

footer .text-white { color: var(--footer-heading) !important; }
footer .text-slate-300,
footer .text-slate-200 { color: var(--site-muted) !important; }
footer a { color: var(--site-muted); }
footer a:hover { color: var(--accent-text); }

.footer-powered-by {
  margin: 0;
  padding: .15rem 1rem .8rem;
  color: var(--site-subtle);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1;
  text-align: center;
  opacity: .62;
  text-shadow: 0 1px 5px rgba(168, 85, 247, .45);
}

/* ---------- Toasts / alerts ---------- */
.js-toast {
  border-radius: 14px !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.js-toast.bg-emerald-50 {
  background: var(--toast-success-bg) !important;
  border-color: var(--toast-success-border) !important;
  color: var(--toast-success-text) !important;
}

.js-toast.bg-amber-50 {
  background: var(--toast-warn-bg) !important;
  border-color: var(--toast-warn-border) !important;
  color: var(--toast-warn-text) !important;
}

.js-toast.bg-red-50 {
  background: var(--toast-error-bg) !important;
  border-color: var(--toast-error-border) !important;
  color: var(--toast-error-text) !important;
}

.js-toast.bg-slate-50 {
  background: var(--toast-info-bg) !important;
  border-color: var(--toast-info-border) !important;
  color: var(--toast-info-text) !important;
}

/* error boxes in forms */
main .bg-red-50,
main .border-red-200 {
  background: var(--danger-bg) !important;
  border-color: var(--danger-border) !important;
}
main .text-red-700,
main .text-red-600 { color: var(--danger-text) !important; }

/* ---------- Hero (home) ---------- */
main section.text-black {
  position: relative;
  isolation: isolate;
}

main section.text-black::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(720px 460px at 76% 38%, var(--hero-glow-1), transparent 62%),
    radial-gradient(480px 340px at 12% 82%, var(--hero-glow-2), transparent 60%);
}

main section.text-black::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--grid-opacity);
  background:
    repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, var(--grid-line-2) 0 1px, transparent 1px 120px);
  -webkit-mask-image: radial-gradient(closest-side at 70% 45%, #000, transparent);
  mask-image: radial-gradient(closest-side at 70% 45%, #000, transparent);
}

/* brand label with short neon bar (like the reference) */
main section.text-black p.text-sky-500 {
  color: var(--accent-text) !important;
  font-weight: 800;
}

main section.text-black p.text-sky-500::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin-top: 10px;
  border-radius: 99px;
  background: linear-gradient(90deg, #A855F7, #7C3AED);
  box-shadow: 0 0 12px rgba(168, 85, 247, .8);
}

main section.text-black h1 {
  text-shadow: var(--h1-glow);
}

main section.text-black p.text-xl {
  color: var(--site-muted) !important;
}

main section.text-black a {
  border-radius: 14px !important;
}

/* hero visual: purple glow + gentle float */
main section.text-black img.object-contain {
  filter: var(--hero-img-filter);
  animation: floatY 8s ease-in-out infinite;
}

main section.text-black .brain-wrapper img {
  animation: none;
  filter: var(--brain-filter);
}

/* ---------- Misc content ---------- */
.rich-content { color: var(--content-text) !important; }
.rich-content a { color: var(--accent-text); }

.bg-black\/65 {
  background: rgba(7, 3, 18, .75) !important;
  border: 1px solid rgba(168, 85, 247, .25);
  border-radius: 10px;
}

main h1, main h2, main h3 { color: var(--site-text); }

/* reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  main section.text-black img.object-contain,
  .brain-shadow { animation: none !important; }
}

/* ---------- Cascade fixes (must stay last) ---------- */

/* desktop inline menu must stay transparent (mobile panel keeps glass) */
@media (min-width: 1024px) {
  [data-menu] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* keep header auth buttons circular with gradient fill */
.nav-auth-action,
a.nav-auth-action.bg-blue-700 {
  background: var(--site-grad) !important;
  border: 1px solid rgba(192, 132, 252, .4) !important;
  border-radius: 50% !important;
  box-shadow: 0 8px 22px rgba(168, 85, 247, .3);
}

/* keep hamburger icon visible on both themes */
.icon-btn span { background: var(--icon-bar) !important; }


/* injaaaaaaaaaa */

  /* ---------- رنگ‌های پیش‌فرض (لایت) ---------- */
  .tech-marquee-section {
    border-color: rgba(17, 12, 34, 0.08);
    background: #f7f5fb;
  }
  .tech-marquee-label {
    color: rgba(17, 12, 34, 0.5);
  }
  .marquee-wrap::before {
    background: linear-gradient(to left, transparent, #f7f5fb);
  }
  .marquee-wrap::after {
    background: linear-gradient(to right, transparent, #f7f5fb);
  }
  .marquee-item {
    border: 1px solid rgba(124, 58, 237, 0.2);
    background: rgba(124, 58, 237, 0.06);
    color: rgba(60, 40, 90, 0.75);
  }
  .marquee-item:hover {
    color: #3b1f66;
    border-color: rgba(124, 58, 237, 0.55);
    background: rgba(124, 58, 237, 0.14);
  }

  /* ---------- رنگ‌های دارک ---------- */
  html[data-resolved-theme="dark"] .tech-marquee-section {
    border-color: rgba(255, 255, 255, 0.08);
    background: #12081f;
  }
  html[data-resolved-theme="dark"] .tech-marquee-label {
    color: rgba(255, 255, 255, 0.5);
  }
  html[data-resolved-theme="dark"] .marquee-wrap::before {
    background: linear-gradient(to left, transparent, #12081f);
  }
  html[data-resolved-theme="dark"] .marquee-wrap::after {
    background: linear-gradient(to right, transparent, #12081f);
  }
  html[data-resolved-theme="dark"] .marquee-item {
    border: 1px solid rgba(168, 85, 247, 0.25);
    background: rgba(168, 85, 247, 0.08);
    color: rgba(230, 220, 255, 0.75);
  }
  html[data-resolved-theme="dark"] .marquee-item:hover {
    color: #fff;
    border-color: rgba(168, 85, 247, 0.7);
    background: rgba(168, 85, 247, 0.18);
  }

  /* ---------- ساختار / انیمیشن (مشترک) ---------- */
  .marquee-wrap {
    position: relative;
    overflow: hidden;
    padding: 0.9rem 0;
  }
  .marquee-wrap::before,
  .marquee-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    z-index: 2;
    pointer-events: none;
  }
  .marquee-wrap::before { left: 0; }
  .marquee-wrap::after { right: 0; }

  .marquee {
    overflow: hidden;
  }
  .marquee-track {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: max-content;
    animation: marquee-scroll 32s linear infinite;
  }
  .marquee:hover .marquee-track {
    animation-play-state: paused;
  }
  .marquee-item {
    flex-shrink: 0;
    padding: 0.55rem 1.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: 999px;
    white-space: nowrap;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  }
  .marquee-item:hover {
    transform: translateY(-2px);
  }

  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  [dir="rtl"] .marquee-track {
    animation-name: marquee-scroll-rtl;
  }
  @keyframes marquee-scroll-rtl {
    from { transform: translateX(0); }
    to   { transform: translateX(50%); }
  }

/* ---------- Shared empty state ---------- */
.empty-state {
  position: relative;
  isolation: isolate;
  grid-column: 1 / -1;
  width: 100%;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) 1.5rem;
  text-align: center;
  border: 1px dashed var(--site-border);
  border-radius: 24px;
  background: var(--glass-card-bg);
  box-shadow: var(--card-shadow);
  animation: fadeUp .55s ease both;
}

.empty-state::before,
.empty-state::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 190px;
  height: 190px;
  border-radius: 999px;
  filter: blur(55px);
  pointer-events: none;
}

.empty-state::before {
  inset-block-start: -95px;
  inset-inline-end: -55px;
  background: var(--bg-glow-1);
}

.empty-state::after {
  inset-block-end: -110px;
  inset-inline-start: -45px;
  background: var(--bg-glow-2);
}

.empty-state__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: var(--site-primary);
  border: 1px solid var(--site-border);
  border-radius: 19px;
  background: var(--ghost-bg);
  box-shadow: var(--ghost-glow);
  transform: rotate(-3deg);
}

.empty-state__icon svg {
  width: 34px;
  height: 34px;
}

.empty-state__title {
  margin-top: 1.2rem;
  color: var(--site-text);
  font-size: clamp(1.05rem, 2.5vw, 1.35rem);
  font-weight: 800;
}

.empty-state__text {
  max-width: 48ch;
  margin-top: .65rem;
  color: var(--site-muted);
  font-size: .9rem;
  line-height: 1.9;
}

@media (prefers-reduced-motion: reduce) {
  .empty-state { animation: none; }
}