/* =============================================================================
   UnZend Content — Multi-Style System (v1.0)
   Scope: .uz-content only — selectable via body class: .uz-theme--{style}
   Styles: neon-grid (default), terminal-matrix, cyberpunk, hex-armor, aurora, noir
   ========================================================================== */

/* ---------- Base (shared) ---------- */
.uz-content{
  --uz-bg:#0a0f14;          /* fallback */
  --uz-surface:#0c141b;
  --uz-card:#0f1a23;
  --uz-text:#d7e7e2;
  --uz-muted:#96a7a1;
  --uz-accent:#00ff88;
  --uz-accent-2:#38f6ff;
  --uz-border: color-mix(in srgb, #ffffff 9%, transparent);
  --uz-shadow: 0 20px 60px rgba(0,0,0,.55);
  position:relative; z-index:1; color:var(--uz-text); overflow-x:hidden;
}

/* Layout & Typography (Elementor-friendly) */
.uz-content .elementor-section{ position:relative; padding-block: clamp(48px, 6vw, 96px) }
.uz-content .elementor-section .elementor-container{ max-width:min(1280px, 92vw); margin-inline:auto; padding-inline: clamp(16px, 3vw, 28px) }

.uz-content h1,.uz-content .elementor-heading-title.elementor-size-xxl{font-weight:1000;letter-spacing:-.02em;line-height:1.05;font-size:clamp(2.4rem,6vw,4.8rem)}
.uz-content h2,.uz-content .elementor-heading-title.elementor-size-xl{font-weight:900; letter-spacing:-.01em;line-height:1.1;font-size:clamp(1.9rem,4.5vw,3.4rem)}
.uz-content h3,.uz-content .elementor-heading-title.elementor-size-large{font-weight:800; line-height:1.15;font-size:clamp(1.5rem,3.4vw,2.2rem)}
.uz-content .lead, .uz-content .elementor-widget-text-editor p:first-of-type{color:var(--uz-muted);font-size:clamp(1.05rem,1.4vw,1.25rem)}

/* Utilities */
.uz-content .uz-underline{ position:relative; display:inline-block; padding-bottom:.25rem }
.uz-content .uz-underline::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background: linear-gradient(90deg, var(--uz-accent), var(--uz-accent-2));
  box-shadow:0 0 16px color-mix(in srgb, var(--uz-accent) 35%, transparent) }

.uz-content .elementor-button, .uz-content .button, .uz-content .wp-block-button__link{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-weight:900; letter-spacing:.02em; padding:.9rem 1.15rem; border-radius:14px; border:1px solid var(--uz-border);
  background: linear-gradient(135deg, var(--uz-accent), var(--uz-accent-2));
  color:#00140a; box-shadow: var(--uz-shadow);
  transform: translateZ(0); transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.uz-content .elementor-button:hover, .uz-content .button:hover, .uz-content .wp-block-button__link:hover{
  filter:brightness(1.05); transform: translateY(-1px);
  box-shadow: 0 12px 40px color-mix(in srgb, var(--uz-accent) 25%, transparent);
}
.uz-content .elementor-button--link{ background: transparent; color: var(--uz-accent); border-color: transparent; box-shadow:none }
.uz-content .elementor-button--link:hover{ color: color-mix(in srgb, var(--uz-accent) 85%, #fff) }

.uz-content .uz-card,
.uz-content .elementor-widget.uz-card .elementor-widget-container{
  background: linear-gradient(180deg, color-mix(in srgb, var(--uz-surface) 85%, transparent), color-mix(in srgb, var(--uz-card) 75%, transparent));
  backdrop-filter: blur(10px) saturate(1.25);
  border:1px solid var(--uz-border); border-radius:18px; box-shadow: var(--uz-shadow);
  padding: clamp(18px, 2.6vw, 28px);
}
.uz-content .uz-card.neon{ border-color: color-mix(in srgb, var(--uz-accent) 35%, var(--uz-border));
  box-shadow: 0 16px 50px color-mix(in srgb, var(--uz-accent-2) 18%, transparent) }

.uz-content img{ border-radius: 14px }
.uz-content .elementor-image img{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--uz-border) }
.uz-content .elementor-column .elementor-widget-wrap{ gap: clamp(12px, 2vw, 20px) }

.uz-content table{ width:100%; border-collapse:separate; border-spacing:0; overflow:hidden;
  border-radius:16px; border:1px solid var(--uz-border); background: color-mix(in srgb, var(--uz-card) 80%, transparent) }
.uz-content table thead th{ text-align:left; font-weight:800; padding:14px 16px; border-bottom:1px solid var(--uz-border); color:#e9f7ef;
  background: linear-gradient(180deg, color-mix(in srgb, var(--uz-accent) 18%, transparent), transparent) }
.uz-content table tbody td{ padding:12px 16px; border-bottom:1px solid var(--uz-border) }
.uz-content table tbody tr:hover{ background: color-mix(in srgb, var(--uz-card) 60%, transparent) }

.uz-content input[type="text"], .uz-content input[type="email"], .uz-content input[type="url"], .uz-content input[type="password"],
.uz-content input[type="search"], .uz-content textarea, .uz-content select{
  width:100%; border-radius:14px; border:1px solid var(--uz-border); padding:12px 14px; color:var(--uz-text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--uz-surface) 85%, transparent), color-mix(in srgb, var(--uz-card) 70%, transparent));
  outline:none; transition:border-color .2s ease, box-shadow .2s ease;
}
.uz-content input:focus, .uz-content textarea:focus, .uz-content select:focus{
  border-color: color-mix(in srgb, var(--uz-accent) 50%, var(--uz-border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--uz-accent) 20%, transparent);
}

.uz-content .uz-pill{ display:inline-flex; gap:.45rem; align-items:center; border:1px solid var(--uz-border);
  padding:.35rem .6rem; border-radius:9999px; font-weight:700; font-size:.85rem;
  background: color-mix(in srgb, var(--uz-card) 70%, transparent) }
.uz-content .uz-pill.primary{ background: linear-gradient(135deg, var(--uz-accent), var(--uz-accent-2)); color:#00140a; border:0 }
.uz-content .uz-pill.ghost{ background: transparent }
.uz-content .uz-pill.warn{ color:#ff4976; border-color: color-mix(in srgb, #ff4976 35%, var(--uz-border)) }

.uz-content .uz-neon-border{ border:1px solid color-mix(in srgb, var(--uz-accent) 40%, var(--uz-border)); box-shadow: 0 12px 44px color-mix(in srgb, var(--uz-accent-2) 20%, transparent) }
.uz-content .uz-soft{ box-shadow: 0 12px 30px rgba(0,0,0,.4) }

/* Reveal (lightweight) */
@media (prefers-reduced-motion: no-preference){
  .uz-content .reveal-up{ opacity:0; transform: translateY(16px); animation: uz-reveal .6s ease forwards }
  .uz-content .reveal-up:nth-child(2){ animation-delay:.06s } .uz-content .reveal-up:nth-child(3){ animation-delay:.12s }
  @keyframes uz-reveal{ to{ opacity:1; transform:none } }
}

/* Responsive tweaks */
@media (max-width:1024px){
  .uz-content .elementor-section{ padding-block: clamp(42px, 6vw, 72px) }
  .uz-content .elementor-section .elementor-container{ max-width:min(1100px, 94vw) }
}
@media (max-width:767px){
  .uz-content .elementor-section{ padding-block: clamp(32px, 8vw, 54px) }
  .uz-content .elementor-section .elementor-container{ padding-inline:16px }
  .uz-content .uz-card{ padding: clamp(16px, 4vw, 22px) }
}

/* Compatibility: UnZend Elementor Plus (non-invasive) */
.uz-content .unzend-plus .uzp-hero{ margin-block: clamp(32px, 6vw, 64px) }
.uz-content .unzend-plus .uzp-hero .title{ text-shadow: 0 0 22px color-mix(in srgb, var(--uz-accent) 20%, transparent) }
.uz-content .unzend-plus .uzp-hero .cta{ gap: 12px }
.uz-content .unzend-plus .uzp-features .item,
.uz-content .unzend-plus .uzp-pricing .plan{ border-radius: 16px; border:1px solid var(--uz-border) }

/* Accessibility: reduce effects */
@media (prefers-reduced-motion: reduce){
  .uz-content, .uz-content *{ animation:none !important; transition:none !important }
}


/* ========================================================================== */
/*                                 THEMES                                     */
/* ========================================================================== */

/* ---- THEME A: Neon Grid (default) ---- */
body.uz-theme--neon-grid .uz-content, .uz-content.uz-theme--neon-grid{
  --uz-bg:#070a0d; --uz-surface:#0a1118; --uz-card:#0e1722; --uz-text:#d3e7e0; --uz-muted:#8ea39c;
  --uz-accent:#00ff88; --uz-accent-2:#38f6ff; --uz-border: color-mix(in srgb, #ffffff 8%, transparent);
  background:
    radial-gradient(1000px 420px at 50% -10%, color-mix(in srgb, var(--uz-accent) 14%, transparent), transparent 65%),
    radial-gradient(900px 500px at 90% 0%, color-mix(in srgb, var(--uz-accent-2) 10%, transparent), transparent 70%),
    linear-gradient(var(--uz-bg), var(--uz-bg));
}
body.uz-theme--neon-grid .uz-content::before,
.uz-content.uz-theme--neon-grid::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px) 0 0/24px 24px,
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0/24px 24px;
  mask-image: radial-gradient(90% 70% at 50% 35%, #000 60%, transparent 100%);
}
body.uz-theme--neon-grid .uz-content::after,
.uz-content.uz-theme--neon-grid::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; mix-blend-mode: soft-light;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.03), rgba(255,255,255,.03) 1px, transparent 2px, transparent 3px);
  opacity:.35;
}

/* ---- THEME B: Terminal Matrix ---- */
body.uz-theme--terminal-matrix .uz-content, .uz-content.uz-theme--terminal-matrix{
  --uz-bg:#040706; --uz-surface:#06100b; --uz-card:#07140d; --uz-text:#e8ffe8; --uz-muted:#8ecc8e;
  --uz-accent:#00ff6a; --uz-accent-2:#19ffa8; --uz-border: color-mix(in srgb, #00ff6a 18%, transparent);
  background:
    linear-gradient(var(--uz-bg), var(--uz-bg));
}
body.uz-theme--terminal-matrix .uz-content::before,
.uz-content.uz-theme--terminal-matrix::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.18;
  background:
    repeating-linear-gradient(90deg, rgba(0,255,106,.18) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg, rgba(0,255,106,.06) 0 2px, transparent 2px 4px);
}
@media (prefers-reduced-motion: no-preference){
  body.uz-theme--terminal-matrix .uz-content::after,
  .uz-content.uz-theme--terminal-matrix::after{
    content:""; position:fixed; inset:-200% -100%; pointer-events:none; z-index:-1; opacity:.12;
    background:
      repeating-linear-gradient( to bottom, rgba(0,255,106,.12) 0 2px, transparent 2px 12px );
    animation: uz-matrix 6s linear infinite;
  }
  @keyframes uz-matrix{ to{ transform: translateY(25%) } }
}

/* ---- THEME C: Cyberpunk ---- */
body.uz-theme--cyberpunk .uz-content, .uz-content.uz-theme--cyberpunk{
  --uz-bg:#0a0711; --uz-surface:#0f0a1a; --uz-card:#130d23; --uz-text:#f0eaff; --uz-muted:#c2b6ff;
  --uz-accent:#ff3dbb; --uz-accent-2:#00e0ff; --uz-border: color-mix(in srgb, #ffffff 10%, transparent);
  background:
    radial-gradient(1200px 520px at 20% -10%, color-mix(in srgb, var(--uz-accent) 22%, transparent), transparent 70%),
    radial-gradient(900px 520px at 100% 0%, color-mix(in srgb, var(--uz-accent-2) 18%, transparent), transparent 70%),
    linear-gradient(var(--uz-bg), var(--uz-bg));
}
body.uz-theme--cyberpunk .uz-content::before,
.uz-content.uz-theme--cyberpunk::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(135deg, rgba(255,61,187,.08) 0 1px, transparent 1px 100% ) 0 0/18px 18px,
    linear-gradient(315deg, rgba(0,224,255,.06) 0 1px, transparent 1px 100% ) 0 0/18px 18px;
  mask-image: radial-gradient(90% 70% at 50% 35%, #000 60%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference){
  body.uz-theme--cyberpunk .uz-content::after,
  .uz-content.uz-theme--cyberpunk::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.25; mix-blend-mode:screen;
    background:
      linear-gradient( -12deg, transparent 0 40%, rgba(255,61,187,.15) 50%, transparent 60% );
    filter: blur(12px);
    animation: uz-cyber 5s ease-in-out infinite alternate;
  }
  @keyframes uz-cyber{ from{ transform: translateY(-2%) } to{ transform: translateY(2%) } }
}

/* ---- THEME D: Hex Armor ---- */
body.uz-theme--hex-armor .uz-content, .uz-content.uz-theme--hex-armor{
  --uz-bg:#05070a; --uz-surface:#0a0f16; --uz-card:#0c121a; --uz-text:#d7eafd; --uz-muted:#9bb3d8;
  --uz-accent:#5cc7ff; --uz-accent-2:#3bffdf; --uz-border: color-mix(in srgb, #5cc7ff 22%, transparent);
  background:
    radial-gradient(900px 420px at 80% -10%, color-mix(in srgb, var(--uz-accent) 16%, transparent), transparent 70%),
    linear-gradient(var(--uz-bg), var(--uz-bg));
}
body.uz-theme--hex-armor .uz-content::before,
.uz-content.uz-theme--hex-armor::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.6;
  background:
    linear-gradient(30deg, rgba(255,255,255,.045) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.045) 87.5%) 0 0/46px 80px,
    linear-gradient(150deg, rgba(255,255,255,.045) 12%, transparent 12.5%, transparent 87%, rgba(255,255,255,.045) 87.5%) 0 0/46px 80px,
    linear-gradient(90deg, rgba(255,255,255,.03) 2%, transparent 2.5%, transparent 97%, rgba(255,255,255,.03) 97.5%) 0 0/48px 40px;
  mask-image: radial-gradient(90% 70% at 50% 35%, #000 60%, transparent 100%);
}
body.uz-theme--hex-armor .uz-content::after,
.uz-content.uz-theme--hex-armor::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.18;
  background: radial-gradient(600px 300px at 10% 10%, rgba(59,255,223,.35), transparent 70%);
}

/* ---- THEME E: Liquid Aurora ---- */
body.uz-theme--aurora .uz-content, .uz-content.uz-theme--aurora{
  --uz-bg:#05090f; --uz-surface:#070e15; --uz-card:#0a131c; --uz-text:#e6f7ff; --uz-muted:#a9c7d7;
  --uz-accent:#00c2ff; --uz-accent-2:#7cffc7; --uz-border: color-mix(in srgb, #ffffff 10%, transparent);
  background: linear-gradient(var(--uz-bg), var(--uz-bg));
}
body.uz-theme--aurora .uz-content::before,
.uz-content.uz-theme--aurora::before{
  content:""; position:fixed; inset:-10% -10% -10% -10%; pointer-events:none; z-index:-1;
  background:
    radial-gradient(40% 30% at 20% 10%, rgba(0,194,255,.35), transparent 60%),
    radial-gradient(35% 28% at 80% 0%, rgba(124,255,199,.28), transparent 60%),
    radial-gradient(45% 35% at 60% 30%, rgba(117,85,255,.22), transparent 60%);
  filter: blur(18px);
}
@media (prefers-reduced-motion: no-preference){
  body.uz-theme--aurora .uz-content::after,
  .uz-content.uz-theme--aurora::after{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.2;
    background: radial-gradient(50% 40% at 50% 70%, rgba(0,194,255,.35), transparent 60%);
    animation: uz-aur 8s ease-in-out infinite alternate;
  }
  @keyframes uz-aur{ from{ transform: translateY(-1%) } to{ transform: translateY(1%) } }
}

/* ---- THEME F: Mono Noir ---- */
body.uz-theme--noir .uz-content, .uz-content.uz-theme--noir{
  --uz-bg:#050505; --uz-surface:#0a0a0a; --uz-card:#0d0d0d; --uz-text:#f0f0f0; --uz-muted:#c8c8c8;
  --uz-accent:#ffffff; --uz-accent-2:#e6e6e6; --uz-border: color-mix(in srgb, #ffffff 12%, transparent);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    linear-gradient(var(--uz-bg), var(--uz-bg));
}
body.uz-theme--noir .uz-content::before,
.uz-content.uz-theme--noir::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.22;
  background:
    linear-gradient( rgba(255,255,255,.06) 1px, transparent 1px ) 0 0/20px 20px,
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px ) 0 0/20px 20px;
}
body.uz-theme--noir .uz-content::after,
.uz-content.uz-theme--noir::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.1;
  background: radial-gradient(60% 40% at 50% 10%, rgba(255,255,255,.12), transparent 60%);
}