/* ============================================================
   XNEXUS Smart Systems
   Style: Linear/Vercel-grade · Dark · Refined · Bilingual
   Markets: Hospitality · Healthcare · Industrial · Infrastructure
   ============================================================ */

:root {
  /* ── Surfaces ──────────────────────────────────────────────
     Phase 21 token migration: values promoted from about.css
     which was the de-facto platform palette since its load
     order (pos 5/7) caused its :root to win site-wide.     */
  --bg:           #050816;
  --bg-2:         #0B1020;
  --bg-card:      #11162A;
  --bg-card-hi:   #161B33;

  /* ── Borders (violet-tinted — approved platform identity) */
  --border:       rgba(201,60,255,0.18);
  --border-m:     rgba(201,60,255,0.28);
  --border-s:     rgba(201,60,255,0.40);

  /* ── Text ── */
  --text:         #F5F7FF;
  --text-dim:     #CBD5E1;
  --text-muted:   #9CA3AF;

  /* ── Brand (cyan-violet palette — the approved logo identity) */
  --blue:         #2ED6FF;   /* neon cyan — information layer       */
  --blue-l:       #60A5FA;   /* soft blue glow — unchanged          */
  --purple:       #8B5CF6;   /* gradient midtone — unchanged        */
  --purple-l:     #C93CFF;   /* magenta violet — interaction layer  */
  --magenta:      #D946EF;   /* pink-magenta accent — unchanged     */
  --cyan:         #22D3EE;   /* bright teal — classification layer  */
  --green:        #10B981;
  --red:          #EF4444;

  /* ── Glows (platform-level — retained from original core) */
  --blue-glow:    rgba(59,130,246,0.20);
  --purple-glow:  rgba(139,92,246,0.20);

  /* ── Gradients (cyan → violet — approved brand signature) */
  --grad:         linear-gradient(135deg,#2ED6FF 0%,#C93CFF 100%);
  --grad-text:    linear-gradient(90deg,#2ED6FF 0%,#8B5CF6 50%,#C93CFF 100%);
  --grad-glow:    linear-gradient(135deg,rgba(46,214,255,.12),rgba(201,60,255,.12));

  /* ── Type ── */
  --font:         'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-ar:      'Cairo', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', monospace;
  --font-ui:      'Inter', 'Space Grotesk', system-ui, sans-serif;   /* Phase 21: promoted — used by resources.css */

  /* ── Layout ── */
  --radius:       16px;
  --radius-sm:    10px;
  --radius-lg:    24px;
  --nav-h:        72px;      /* Phase 21: promoted from about.css (was 68px) */
  --section-py:   120px;
  --max-w:        1280px;

  /* ── Motion ── */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);

  /* ── Heading weight scale — Phase 16A ── */
  --h-weight-default:  600;
  --h-weight-strong:   700;
  --h-weight-display:  800;
}

[dir="rtl"] body { font-family: var(--font-ar); }

* { margin:0; padding:0; box-sizing:border-box; }
*::selection { background: var(--purple-glow); color:var(--text); }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  cursor: none;
}
@media (max-width:1024px) { body { cursor: auto; } }

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:rgba(139,92,246,.4); border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--purple); }

img, svg { display:block; max-width:100%; }
button { font-family:inherit; }
a { color:inherit; text-decoration:none; }

/* ════════════════════════════════════════════════════════════
   XNEXUS Form Design System — Global Form Control Reset
   Ensures all native form elements follow the dark theme.
   Component-specific classes (.demo-input, .wn-input, .admin-field)
   layer on top of these base rules.
   ════════════════════════════════════════════════════════════ */

/* ── Base form controls ──────────────────────────────────── */
input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: var(--text);
  background-color: var(--bg-card);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 8px;
  outline: none;
}

/* ── Select + Option (the dropdown menu itself) ──────────── */
select {
  cursor: pointer;
}
option, optgroup {
  background-color: var(--bg-card-hi);
  color: var(--text);
}
option:checked {
  background-color: rgba(139,92,246,.25);
  color: var(--text);
}
option:hover {
  background-color: rgba(46,214,255,.12);
}

/* ── Focus state ─────────────────────────────────────────── */
input:focus, select:focus, textarea:focus {
  border-color: rgba(46,214,255,.4);
  box-shadow: 0 0 0 2px rgba(46,214,255,.08);
}

/* ── Placeholder ─────────────────────────────────────────── */
::placeholder {
  color: rgba(245,247,255,.2);
}
::-webkit-input-placeholder { color: rgba(245,247,255,.2); }
::-moz-placeholder { color: rgba(245,247,255,.2); opacity: 1; }

/* ── Disabled state ──────────────────────────────────────── */
input:disabled, select:disabled, textarea:disabled {
  opacity: .4;
  cursor: not-allowed;
  background-color: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.05);
}

/* ── Autofill (prevent browser yellow/white background) ──── */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill,
textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px var(--bg-card) inset;
  box-shadow: 0 0 0 1000px var(--bg-card) inset;
  border-color: rgba(139,92,246,.25);
  transition: background-color 5000s ease-in-out 0s;
}

/* ── Number input spinner ────────────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: .3;
}
input[type="number"]:hover::-webkit-inner-spin-button,
input[type="number"]:hover::-webkit-outer-spin-button {
  opacity: .6;
}

/* ── Search cancel button ────────────────────────────────── */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}

/* ── File input ──────────────────────────────────────────── */
input[type="file"] {
  background: transparent;
  border: none;
}
input[type="file"]::file-selector-button {
  font-family: inherit;
  font-size: .82rem;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(139,92,246,.25);
  background: rgba(139,92,246,.08);
  color: var(--purple-l);
  cursor: pointer;
  margin-right: 10px;
}
input[type="file"]::file-selector-button:hover {
  background: rgba(139,92,246,.15);
}

/* ── Range input (sliders) ───────────────────────────────── */
input[type="range"] {
  background: transparent;
  border: none;
}

/* ── Validation: invalid state (subtle, not aggressive) ──── */
input:user-invalid, select:user-invalid, textarea:user-invalid {
  border-color: rgba(255,107,107,.35);
}
input:user-invalid:focus, select:user-invalid:focus, textarea:user-invalid:focus {
  box-shadow: 0 0 0 2px rgba(255,107,107,.1);
}

/* ── Checkbox + Radio accent ─────────────────────────────── */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--blue);
  background: transparent;
  border: none;
}

/* ── Custom cursor ── */
.cursor-dot, .cursor-ring {
  position:fixed; top:0; left:0; pointer-events:none;
  z-index:9999; transform:translate(-50%,-50%);
  will-change:transform;
}
.cursor-dot {
  width:6px; height:6px;
  background: var(--purple-l);
  border-radius:50%;
  transition:transform .15s var(--ease), background .2s;
  box-shadow: 0 0 12px var(--purple);
}
.cursor-ring {
  width:36px; height:36px;
  border:1.5px solid rgba(167,139,250,.5);
  border-radius:50%;
  transition: width .25s var(--ease), height .25s var(--ease), border-color .2s, background .2s;
}
.cursor-ring.hover { width:56px; height:56px; border-color: var(--purple); background:rgba(139,92,246,.08); }
.cursor-dot.hover { transform:translate(-50%,-50%) scale(0); }
@media (max-width:1024px) {
  .cursor-dot, .cursor-ring { display:none; }
}

/* ── Reading progress bar ── */
.progress-bar {
  position:fixed; top:0; left:0; height:2px;
  background: var(--grad);
  z-index:1001;
  width:0%;
  box-shadow: 0 0 10px var(--purple);
}

/* ── Page loader ── */
.loader {
  position:fixed; inset:0; z-index:9998;
  background:var(--bg);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .6s ease .3s, visibility 0s .9s;
}
.loader.hidden { opacity:0; visibility:hidden; }
.loader-logo {
  width:80px; height:80px;
  animation: pulse-load 1.6s ease-in-out infinite;
}
@keyframes pulse-load {
  0%,100% { opacity:.6; transform:scale(.95); }
  50% { opacity:1; transform:scale(1.05); }
}

/* ── Containers & utilities ── */
.container { max-width: var(--max-w); margin:0 auto; padding:0 32px; }
@media (max-width:768px) { .container { padding:0 20px; } }

.grad-text {
  background: var(--grad-text);
  background-size:200% auto;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  animation: grad-move 5s linear infinite;
}
@keyframes grad-move { to { background-position:200% center; } }

/* ── Display value — Phase 16A ─────────────────────────────
   Animated gradient + maximum weight for key numbers,
   percentages and savings values. Extracted from the
   Warranty percentage card treatment (FREE / 50% / 80%).
   Use: <span class="display-value">FREE</span>
        <span class="display-value">50%</span>
   One instance per visual cluster; never on full paragraphs.
   ─────────────────────────────────────────────────────── */
.display-value {
  display: inline-block;
  font-weight: var(--h-weight-display);          /* 800 */
  background: var(--grad-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: grad-move 5s linear infinite;
}

.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-mono);
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color: var(--purple-l);
  margin-bottom:20px;
}
.eyebrow::before {
  content:''; width:24px; height:1px;
  background: var(--purple);
}
.eyebrow--center { justify-content: center; }  /* use on centered eyebrows; removes the need for inline style */

/* ── Reveal animation ── */
.reveal {
  opacity:0; transform: translateY(32px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity:1; transform: translateY(0); }
.reveal-d1 { transition-delay:.08s; }
.reveal-d2 { transition-delay:.16s; }
.reveal-d3 { transition-delay:.24s; }
.reveal-d4 { transition-delay:.32s; }
.reveal-d5 { transition-delay:.40s; }
.reveal-d6 { transition-delay:.48s; }

@keyframes fade-up {
  from { opacity:0; transform: translateY(24px); }
  to { opacity:1; transform: translateY(0); }
}

/* ── Card entrance animation — used by sc-card, prod-card, any future card grid ── */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0);    }
}