/* ====================================================================
 FILE: /assets/02-home-page/w04-css-launch-hmpg/jzhmpg-w04-desktop.css
 LINK: <link rel="stylesheet" href="/assets/02-home-page/w04-css-launch-hmpg/jzhmpg-w04-desktop.css">
 PURPOSE: JUXTAZONE.COM - Final Homepage Launch CSS (Brat Tweak Optimized)
 VERSION: v2.0  DATE MODIFIED: 2026-04-16 - Full Variable Injection
 ==================================================================== */

/* ========================================== */
/* SECTION 0: THE BRAT CONTROL PANEL          */
/* ========================================== */
:root {
  /* --- 🚀 BUTTON CONTROLS --- */
  --mvp-btn-bg: #0800ff;         /* <-- Brat Tweak: Notify Button Background */
  --mvp-btn-border: #ffffff;     /* <-- Brat Tweak: Notify Button Border */
  --mvp-btn-text: #ffffff;       /* <-- Brat Tweak: Notify Button Text Color */
  --mvp-btn-hover: #1a365d;      /* <-- Brat Tweak: Button Color on Hover */

  /* --- ⚪ OUTER INDUSTRIAL FRAME (3PX WHITE) --- */
  --jux-main-border-w: 3px;      /* <-- Brat Tweak: Thickness of the main outer box border */
  --jux-main-border-c: #ffffff;  /* <-- Brat Tweak: Color of the main outer box border */
  --jux-main-bg-opacity: 0.15;   /* <-- Brat Tweak: Transparency of the main glass box */

  /* --- 🔵 THE COBALT VAULT (NESTED CONTAINER) --- */
  --cobalt-border-w: 2px;        /* <-- Brat Tweak: Thickness of the Blue Vault border */
  --cobalt-border-c: rgba(0, 80, 255, 0.6); /* <-- Brat Tweak: Color of the Blue Vault border */
  --cobalt-glow-intensity: 20px; /* <-- Brat Tweak: Spread of the blue outer glow */
  --cobalt-pulse-speed: 4s;      /* <-- Brat Tweak: Speed of the blue border breathing animation */

  /* --- 🌈 THE TOOL CARDS (RGB FLOW) --- */
  --card-rgb-thickness: 2px;     /* <-- Brat Tweak: Thickness of the RGB borders on cards */
  --card-rgb-speed: 16s;         /* <-- Brat Tweak: Speed of the rainbow rotation */
  --card-bg: rgba(0, 0, 0, 0.5); /* <-- Brat Tweak: Darkness of the card backgrounds */
  --card-hover-lift: -5px;       /* <-- Brat Tweak: How high cards jump on hover */

  /* --- 📏 LAYOUT SPACING --- */
  --stage-margin-top: 0px;       /* <-- Brat Tweak: Manual offset from the top if needed */
  --box-inner-padding: 50px 40px;/* <-- Brat Tweak: Breathing room inside the white box */
}

/* --- 🚀 BUTTON CONTROLS --- */
--form-gap: 3px; /* <-- Brat Tweak: Spacing between input and button */

/* ========================================== */
/* SECTION 1: MASTER ALIGNMENT RESET          */
/* ========================================== */
#jux-universal-tool-stage {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--stage-margin-top) !important; 
  padding: 0 !important;
}

.jz-mvp-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 0; 
  animation: mvpFadeIn 0.8s ease;
}

/* ========================================== */
/* SECTION 2: THE MAIN BOX (WHITE INDUSTRIAL) */
/* ========================================== */
.jz-waitlist-box {
  max-width: 650px;
  width: 100%;
  padding: var(--box-inner-padding); 
  text-align: center;

  /* Glass Logic */
  background: rgba(0, 0, 0, var(--jux-main-bg-opacity));
  border: var(--jux-main-border-w) solid var(--jux-main-border-c) !important; /* <-- The 3px White Frame */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 16px;
  position: relative;
  overflow: visible; 
}

.jz-waitlist-box h3 {
  font-family: var(--jzn-active-heading-font);
  font-size: var(--jzn-size-h2); 
  color: var(--jzn-heading-color);
  margin: 0 0 20px 0; /* Zeroed top to prevent ghost pushing */
  font-weight: 800;
  line-height: 1.3;
}

/* ========================================== */
/* SECTION 3: THE COBALT VAULT WRAPPER        */
/* ========================================== */
.jz-mvp-showcase-wrapper {
  margin-top: 40px;
  padding: 25px;
  
  /* The Blue Frame encompassing the cards */
  border: var(--cobalt-border-w) solid var(--cobalt-border-c);
  background: linear-gradient(180deg, rgba(0, 10, 40, 0.4) 0%, rgba(0, 80, 255, 0.1) 100%);
  border-radius: 16px;
  box-shadow: 0 0 var(--cobalt-glow-intensity) rgba(0, 80, 255, 0.15);
  
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  animation: cobaltPulse var(--cobalt-pulse-speed) infinite alternate;
}

/* AES-256 VAULT Badge sitting on the Blue Border */
.jz-mvp-showcase-wrapper::before {
  content: "AES-256 VAULT";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #000000; /* <-- Brat Tweak: Badge Background Color */
  color: #0088ff;      /* <-- Brat Tweak: Badge Text Color */
  padding: 2px 12px;
  font-family: var(--jzn-active-font);
  font-size: 10px;
  font-weight: 800;
  border: 1px solid var(--cobalt-border-c);
  border-radius: 50px;
  z-index: 2;
}

/* ========================================== */
/* SECTION 4: THE CARDS (RGB FLOW)            */
/* ========================================== */
.jz-showcase-grid {
  display: flex;
  gap: 15px; /* <-- Brat Tweak: Space between the two cards */
  justify-content: center;
}

.jz-tool-card {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: var(--card-bg);
  border-radius: 12px;
  text-align: left;
  z-index: 1;
  transition: transform 0.3s ease;
}

.jz-tool-card:hover {
  transform: translateY(var(--card-hover-lift));
}

/* THE RGB FLOW BORDER */
.jz-tool-card::before {
  content: ""; 
  position: absolute; 
  inset: calc(var(--card-rgb-thickness) * -1); 
  border-radius: inherit; 
  padding: var(--card-rgb-thickness);
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, magenta, red);
  background-size: 400% 400%; 
  animation: jz-rgbFlow var(--card-rgb-speed) linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  z-index: -1; 
}

/* ========================================== */
/* SECTION 5: FORM & BUTTON STYLING           */
/* ========================================== */

/* The Container handling the 3px gap */
.jz-waitlist-form {
  display: flex;
  gap: 3px; /* <-- Brat Tweak: Industrial tight spacing between input & button */
  flex-direction: row; 
  width: 100%;
  justify-content: center;
  align-items: stretch; /* Keeps heights perfectly synced */
}

/* The Input Field Reset for tight gap */
.jz-waitlist-input {
  flex: 1;
  max-width: 400px;
  padding: 16px 20px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4); 
  font-family: var(--jzn-active-font);
  color: var(--jzn-text);
  outline: none;
}

/* The Notify Me Button */
.jz-waitlist-btn {
  padding: 16px 32px;
  border-radius: 10px;
  background: var(--mvp-btn-bg);
  color: var(--mvp-btn-text);
  border: 2px solid var(--mvp-btn-border); /* <-- Brat Tweak: Industrial White Border */
  font-family: var(--jzn-active-font);
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap; /* Prevents text from wrapping in the tight gap */
}

.jz-waitlist-btn:hover {
  background: var(--mvp-btn-hover);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Status Message Below Form */
.jz-form-status {
  min-height: 24px;
  margin-top: 10px;
  font-family: var(--jzn-active-font);
  font-size: var(--jzn-size-sub);
  font-weight: 500;
}
.jz-form-status.success { color: #00ff88; } /* Neon Green Success */
.jz-form-status.error { color: #ff4757; }   /* Alert Red Error */

/* ========================================== */
/* SECTION 6: KEYFRAMES                       */
/* ========================================== */
@keyframes jz-rgbFlow { 
  0% { background-position: 0% 50%; } 
  100% { background-position: 400% 50%; } 
}

@keyframes cobaltPulse {
  0% { border-color: rgba(0, 80, 255, 0.3); opacity: 0.8; }
  100% { border-color: rgba(0, 136, 255, 1); opacity: 1; }
}

@keyframes mvpFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}