/* ====================================================================
 FILE: /assets/02-home-page/w04-css-launch-hmpg/jzhmpg-w04-dsktp-mob.css
 LINK: <link rel="stylesheet" href="/assets/02-home-page/w04-css-launch-hmpg/jzhmpg-w04-dsktp-mob.css">
 PURPOSE: JUXTAZONE.COM - Final Homepage Launch CSS (Brat Tweak Optimized)
 VERSION: v3.0  DATE MODIFIED: 2026-04-16 - Unified Mobile Teleport Logic
 ==================================================================== */

/* ========================================== */
/* 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 */
  --form-gap: 3px;               /* <-- Brat Tweak: Spacing between input and button */

  /* --- ⚪ 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 */

  /* --- 📱 MOBILE TELEPORT DIALS --- */
  --mob-vault-side-pad: 5px;     /* <-- Brat Tweak: The 5px side squeeze you requested */
  --mob-card-h4-size: 1.4rem;   /* <-- Brat Tweak: Mobile Card Title Size */
  --mob-card-p-size: 0.9rem;     /* <-- Brat Tweak: Mobile Card Description Size */
  --mob-card-gap: 15px;          /* <-- Brat Tweak: Vertical gap between stacked cards */
}

/* ========================================== */
/* 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: 20px;

  /* 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 PDF 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: var(--form-gap); /* <-- Brat Tweak: 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); }
}

/* ====================================================================
   SECTION 7: THE MOBILE TELEPORT DICTATOR
   ==================================================================== */
@media (max-width: 768px) {

  /* 1. Mobile Container Resets */
  .jz-waitlist-box {
    padding: 30px 15px !important;
  }

  /* 2. FORCED 5PX SIDE PADDING ON VAULT */
  .jz-mvp-showcase-wrapper {
    margin-top: 25px !important;
    padding: 20px var(--mob-vault-side-pad) 15px var(--mob-vault-side-pad) !important;
  }

  /* 3. FORCED COLUMN STACK FOR CARDS */
  .jz-showcase-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--mob-card-gap) !important;
  }

  /* 4. MOBILE CARD RE-LAYOUT (Icon next to Text) */
  .jz-tool-card {
    flex-direction: row !important;
    padding: 10px !important;
    text-align: left !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .jz-tool-icon {
    font-size: 1.5rem !important;
    margin-bottom: 0 !important;
  }

  /* Mobile Card Typography Controls */
  .jz-tool-text h4 {
    font-size: var(--mob-card-h4-size) !important;
    margin: 0 !important;
    line-height: 1.2 !important;
  }

  .jz-tool-text p {
    font-size: var(--mob-card-p-size) !important;
    margin: 0 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
  }

/* ================================================ */ 

  /* 5. Mobile Form Stack */
  .jz-waitlist-form {
    flex-direction: column !important;
    gap: 10px !important;
  }
  
  .jz-waitlist-btn, .jz-waitlist-input {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px !important;
  }
}