/* css/style.css - Premium Glassmorphic Dark UI */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  --gold: #ffd700;
  --gold-dim: rgba(255, 215, 0, 0.08);
  --gold-glow: rgba(255, 215, 0, 0.25);
  --gold-dark: #b39700;
  --gold-gradient: linear-gradient(135deg, #ffe55c 0%, #ffd700 100%);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-gold: 0 8px 25px rgba(255, 215, 0, 0.15);
  --border: rgba(255, 255, 255, 0.1);
  --primary-bg: #0a0a2a;      /* deep navy */
  --secondary-bg: #11113b;    /* navy card background */
  --accent-color: #ffd700;    /* gold */
  --text-color: #ffffff;
  --text-muted: #8a8ab9;
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.1);
  --glass-hover: rgba(255, 255, 255, 0.09);
  --font-family: 'Inter', sans-serif;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Global Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background: radial-gradient(circle at top right, #18184f 0%, var(--primary-bg) 60%);
  color: var(--text-color);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--primary-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--glass-border);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-color);
}

/* Common Layout Containers */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.fade-in {
  animation: fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

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

/* Forms & Inputs */
input, select, textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 1rem;
  transition: var(--transition);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  gap: 0.5rem;
}

.btn-primary {
  background: var(--accent-color);
  color: #000;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 215, 0, 0.4);
}

.btn-secondary {
  background: var(--glass-bg);
  color: #fff;
  border: 1px solid var(--glass-border);
}
.btn-secondary:hover {
  background: var(--glass-hover);
  transform: translateY(-2px);
}

.btn-danger {
  background: #ff4757;
  color: #fff;
}
.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255, 71, 87, 0.4);
}

/* Glass Card */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  transition: var(--transition);
}

/* Login Page UI */
.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login-card {
  width: 100%;
  max-width: 400px;
  text-align: center;
}

.brand-logo {
  max-width: 80px;
  margin: 0 auto 1.5rem auto;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.3));
}

.login-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, #fff 0%, #a2a2d0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-subtitle {
  color: var(--text-muted);
  margin-bottom: 2rem;
}

.form-group {
  margin-bottom: 1.25rem;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--text-muted);
}

.login-footer {
  margin-top: 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.login-footer a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 600;
}

/* Dashboard Layout */
.dashboard-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  border-right: 1px solid var(--glass-border);
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
}

/* Mobile Hamburger Button & Responsive Sidebar Overlay */
.hamburger-btn {
  display: none;
  position: fixed;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 2100;
  background: var(--accent-color);
  color: #000;
  border: none;
  border-radius: 10px;
  width: 44px;
  height: 44px;
  font-size: 1.35rem;
  font-weight: bold;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.4);
  transition: transform 0.2s ease;
}
.hamburger-btn:active {
  transform: scale(0.92);
}

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1950;
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.sidebar-overlay.open {
  display: block;
  opacity: 1;
}

@media (max-width: 900px) {
  .hamburger-btn {
    display: flex !important;
    position: fixed !important;
    top: 0.85rem !important;
    left: 0.85rem !important;
    z-index: 99999 !important;
    width: 44px !important;
    height: 44px !important;
    background: var(--accent-color) !important;
    color: #000 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 18px rgba(255, 215, 0, 0.5) !important;
    cursor: pointer !important;
    user-select: none !important;
    touch-action: manipulation !important;
    border: none !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.35rem !important;
  }
  .dashboard-layout {
    grid-template-columns: 1fr !important;
  }
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: 285px !important;
    height: 100vh !important;
    z-index: 90000 !important;
    background: rgba(7, 7, 32, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-right: 1px solid var(--glass-border) !important;
    box-shadow: 15px 0 45px rgba(0, 0, 0, 0.85) !important;
    transform: translateX(-105%) !important;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    padding: 2rem 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
  }
  .sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.72) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 89000 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease !important;
    display: block !important;
  }
  .sidebar-overlay.open {
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .main-content {
    padding: 0.85rem !important;
    padding-top: 4.25rem !important;
  }
  .dashboard-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }

  /* Responsive Customer Record Cards */
  .table-responsive-wrapper table, 
  .table-responsive-wrapper thead, 
  .table-responsive-wrapper tbody, 
  .table-responsive-wrapper th, 
  .table-responsive-wrapper td, 
  .table-responsive-wrapper tr {
    display: block !important;
  }
  .table-responsive-wrapper thead tr {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
  }
  .table-responsive-wrapper tr {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 14px !important;
    margin: 0.85rem !important;
    padding: 1.1rem !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important;
  }
  .table-responsive-wrapper td {
    border: none !important;
    position: relative !important;
    padding: 0.5rem 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.9rem !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.08) !important;
  }
  .table-responsive-wrapper td:last-child {
    border-bottom: none !important;
    padding-top: 0.75rem !important;
  }
  .table-responsive-wrapper td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
  }
}

/* ── Green Liquid Scan Fill Animation ── */
.liquid-scan-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0%;
  background: linear-gradient(180deg, #2ecc71 0%, #1abc9c 100%);
  z-index: 100;
  transition: height 0.65s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -10px 30px rgba(46, 204, 113, 0.6);
  pointer-events: none;
}

.liquid-scan-fill.fill-up {
  height: 100%;
}

.liquid-wave {
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 25px;
  background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
  animation: waveMotion 1.6s linear infinite;
}

@keyframes waveMotion {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.liquid-content {
  position: relative;
  z-index: 110;
  text-align: center;
  color: #000;
  padding: 1rem;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease 0.3s;
}

.liquid-scan-fill.fill-up .liquid-content {
  opacity: 1;
  transform: translateY(0);
}

.liquid-badge {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #fff;
  color: #2ecc71;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 900;
  margin: 0 auto 0.5rem auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  animation: badgePop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.4s forwards;
}

@keyframes badgePop {
  0% { transform: scale(0.4); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.liquid-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #000;
}

.liquid-count {
  font-size: 1.85rem;
  font-weight: 900;
  background: rgba(0, 0, 0, 0.15);
  color: #000;
  padding: 0.3rem 1.1rem;
  border-radius: 30px;
  display: inline-block;
  margin-bottom: 0.25rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.liquid-sub {
  font-size: 0.85rem;
  font-weight: 700;
  opacity: 0.85;
  color: #000;
}  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table th, .table td {
    padding: 0.7rem 0.5rem;
    font-size: 0.82rem;
  }
  .action-btns {
    gap: 0.25rem;
  }
  .btn-xs {
    padding: 0.3rem 0.5rem;
    font-size: 0.73rem;
  }
  .search-bar-wrap {
    max-width: 100% !important;
    width: 100%;
  }
}

/* ── Live Scanner Camera Green Flash & Laser Line ── */
#reader.scan-success {
  border-color: #2ecc71 !important;
  box-shadow: 0 0 35px rgba(46, 204, 113, 0.7), inset 0 0 20px rgba(46, 204, 113, 0.3) !important;
  animation: greenPulse 0.6s ease forwards;
}

@keyframes greenPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.scanner-laser {
  display: none;
  position: absolute;
  left: 5%;
  right: 5%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent-color), #fff, var(--accent-color), transparent);
  box-shadow: 0 0 15px var(--accent-color);
  z-index: 10;
  animation: laserScan 2.2s ease-in-out infinite alternate;
}

.scanner-active .scanner-laser {
  display: block;
}

@keyframes laserScan {
  0% { top: 15%; }
  100% { top: 85%; }
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--accent-color);
}

.sidebar-menu {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
}

.sidebar-link:hover, .sidebar-link.active {
  color: #fff;
  background: var(--glass-bg);
}

.sidebar-link.active {
  border-left: 3px solid var(--accent-color);
  background: var(--glass-hover);
}

.main-content {
  padding: 2rem 3rem;
  overflow-y: auto;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

/* Data Table UI */
.table-wrapper {
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.2);
}

.table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.table th {
  background: var(--secondary-bg);
  padding: 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--glass-border);
}

.table td {
  padding: 1rem;
  border-bottom: 1px solid var(--glass-border);
  font-size: 0.95rem;
}

.table tr:last-child td {
  border-bottom: none;
}

.table tr:hover td {
  background: var(--glass-bg);
}

.badge {
  display: inline-flex;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-available {
  background: rgba(255, 215, 0, 0.2);
  color: var(--accent-color);
  border: 1px solid rgba(255, 215, 0, 0.4);
}

.badge-redeemed {
  background: rgba(46, 204, 113, 0.2);
  color: #2ecc71;
  border: 1px solid rgba(46, 204, 113, 0.4);
}

.badge-none {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-muted);
}

/* Customer Card View */
.customer-card-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
}

.loyalty-card {
  width: 100%;
  max-width: 420px;
  background: linear-gradient(145deg, #11113b 0%, #060618 100%);
  border: 1.5px solid var(--glass-border);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.loyalty-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,215,0,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
  padding: 1.5rem;
}

.card-body {
  padding: 2rem 1.5rem;
  text-align: center;
}

.stamp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

.stamp-slot {
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--text-muted);
  transition: var(--transition);
}

.stamp-slot.stamped {
  background: radial-gradient(circle, var(--accent-color) 0%, #b89700 100%);
  border-style: solid;
  border-color: var(--accent-color);
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4);
}

.stamp-slot.reward-slot {
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.stamp-slot.reward-slot.unlocked {
  background: #ffd700;
  color: #000;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.qr-box {
  background: #fff;
  padding: 1rem;
  border-radius: 12px;
  display: inline-block;
  margin: 1.5rem 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

/* Modals */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(8px);
}

.modal-content {
  background: var(--secondary-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  width: 100%;
  max-width: 450px;
  padding: 2rem;
  position: relative;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}

/* Removed duplicate 768px responsive grid */

/* --- Real-Time Card Designer UI --- */
.designer-modal-content {
  max-width: 950px;
  width: 95%;
  padding: 1.5rem;
}

.designer-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2rem;
  align-items: start;
}

/* Liquid Wave Image Uploader */
.liquid-uploader {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 215, 0, 0.4);
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  transition: var(--transition);
  text-align: center;
  padding: 0.15rem;
}

.liquid-uploader:hover {
  border-color: var(--accent-color);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
}

.liquid-uploader img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: none;
}

.liquid-uploader .upload-prompt {
  font-size: 0.55rem;
  color: var(--text-muted);
  font-weight: 600;
  z-index: 2;
  pointer-events: none;
  text-transform: uppercase;
}

.liquid-uploader .wave-container {
  position: absolute;
  bottom: -110%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--accent-color);
  z-index: 4;
  pointer-events: none;
  transition: bottom 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Liquid filling animation helper */
.liquid-uploader.uploading .wave-container {
  bottom: 0%;
}

.liquid-uploader .wave {
  position: absolute;
  top: -15px;
  left: -50%;
  width: 200%;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V120H0V0C26.9,8.75,57.05,18.3,90.41,26.85,173.64,48.12,248.8,62.84,321.39,56.44Z' fill='%23ffd700'/%3E%3C/svg%3E") repeat-x;
  background-size: 50% 100%;
  animation: wave-move 2s linear infinite;
}

@keyframes wave-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Scaled-down preview wrapper */
.preview-card-wrapper {
  transform: scale(0.85);
  transform-origin: top center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 440px;
  height: 240px;
}

@media (max-width: 900px) {
  .designer-layout {
    grid-template-columns: 1fr;
  }
  .preview-card-wrapper {
    transform: scale(1);
    margin-top: 2rem;
  }
}

/* Floating Action Button (FAB) */
.fab-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #000;
  border: none;
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7), 0 10px 25px rgba(0, 0, 0, 0.5);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 999;
  text-decoration: none;
  animation: fabPulse 2s infinite;
}

.fab-btn:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 0 0 0 10px rgba(255, 215, 0, 0), 0 15px 30px rgba(0, 0, 0, 0.6);
  background: #ffea70;
}

@keyframes fabPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.6), 0 10px 25px rgba(0, 0, 0, 0.5); }
  70% { box-shadow: 0 0 0 12px rgba(255, 215, 0, 0), 0 10px 25px rgba(0, 0, 0, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0), 0 10px 25px rgba(0, 0, 0, 0.5); }
}

/* Custom Alert / Delete Card UI */
.warning-badge {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(255, 71, 87, 0.15);
  border: 1px solid rgba(255, 71, 87, 0.4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #ff4757;
  margin-bottom: 1.25rem;
}

.setup-details-row {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--glass-border);
  padding: 0.75rem 0;
  font-size: 0.9rem;
}

.setup-details-row:last-child {
  border-bottom: none;
}

.setup-details-label {
  color: var(--text-muted);
  font-weight: 500;
}

.setup-details-val {
  font-weight: 600;
  color: #fff;
}

/* Custom styling for html5-qrcode library buttons and selects */
#qr-reader button,
#html5-qrcode-button-camera-start,
#html5-qrcode-button-camera-stop,
#html5-qrcode-button-file-selection {
  background: var(--accent-color) !important;
  color: #000 !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  border: none !important;
  padding: 0.5rem 1.25rem !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  margin: 0.5rem !important;
  display: inline-block !important;
  font-size: 0.9rem !important;
}

#qr-reader button:hover,
#html5-qrcode-button-camera-start:hover,
#html5-qrcode-button-camera-stop:hover,
#html5-qrcode-button-file-selection:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4) !important;
  background: #ffea70 !important;
}

#qr-reader select,
#html5-qrcode-select-camera {
  padding: 0.5rem !important;
  border-radius: 6px !important;
  border: 1px solid var(--glass-border) !important;
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  margin: 0.5rem !important;
  outline: none !important;
}

/* Card Pattern Textures */
.pattern-carbon {
  background-color: #121212 !important;
  background-image: linear-gradient(45deg, #1d1d1d 25%, transparent 25%, transparent 75%, #1d1d1d 75%, #1d1d1d),
                    linear-gradient(45deg, #1d1d1d 25%, transparent 25%, transparent 75%, #1d1d1d 75%, #1d1d1d) !important;
  background-size: 12px 12px !important;
  background-position: 0 0, 6px 6px !important;
}

.pattern-grid {
  background-color: #0b0b1a !important;
  background-size: 16px 16px !important;
  background-image: linear-gradient(to right, rgba(255, 215, 0, 0.05) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255, 215, 0, 0.05) 1px, transparent 1px) !important;
}

.pattern-stripes {
  background-color: #111122 !important;
  background: repeating-linear-gradient(45deg, #0d0d18, #0d0d18 10px, #141426 10px, #141426 20px) !important;
}

.pattern-dots {
  background-color: #0d0d0d !important;
  background-image: radial-gradient(rgba(255, 215, 0, 0.08) 1px, transparent 0),
                    radial-gradient(rgba(255, 215, 0, 0.08) 1px, transparent 0) !important;
  background-size: 10px 10px !important;
  background-position: 0 0, 5px 5px !important;
}

.pattern-hex {
  background-color: #0a0a14 !important;
  background-image: radial-gradient(circle, #151528 10%, transparent 11%),
                    radial-gradient(circle, #10101c 10%, transparent 11%),
                    radial-gradient(circle, #080812 10%, transparent 11%) !important;
  background-size: 24px 24px !important;
  background-position: 0 0, 12px 12px, 0 12px !important;
}

/* Swatch Theme Selectors */
.theme-selector-grid {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 1rem;
}
.theme-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent-color);
  margin-bottom: 0.6rem;
  letter-spacing: 1px;
}
.swatches-grid {
  display: flex;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.swatches-grid:last-child {
  margin-bottom: 0;
}
.swatch {
  width: 46px;
  height: 46px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}
.swatch.solid, .swatch.gradient {
  border-radius: 50%;
}
.swatch.pattern {
  border-radius: 10px;
}
.swatch:hover {
  transform: scale(1.12) translateY(-2px);
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 6px 12px rgba(255, 215, 0, 0.2);
}
.swatch.active {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 16px rgba(255, 215, 0, 0.6) !important;
  transform: scale(1.1) translateY(-1px);
}

/* Premium Wizard Step Indicators */
.wizard-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  width: 100%;
}
.indicator-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.45;
  transition: var(--transition);
}
.indicator-step.active {
  opacity: 1;
}
.indicator-step .step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--glass-bg);
  border: 1.5px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #fff;
  transition: var(--transition);
}
.indicator-step.active .step-num {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: #000;
  box-shadow: 0 0 10px rgba(255,215,0,0.4);
}
.indicator-step .step-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
}
.indicator-step.active .step-label {
  color: #fff;
}
.indicator-line {
  flex: 1;
  height: 2px;
  background: var(--glass-border);
  margin: 0 1rem;
  position: relative;
}
.indicator-line::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: var(--accent-color);
  transition: width 0.4s ease;
}
.wizard-indicator.step2-active .indicator-line::after {
  width: 100%;
}

/* Custom slider tab switcher for QR Scanner */
.scanner-tab-switcher {
  position: relative;
  display: flex;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 0.25rem;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
.scanner-tab {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem;
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s ease;
  outline: none;
}
.scanner-tab.active {
  color: #000;
}
.tab-slider {
  position: absolute;
  top: 0.25rem;
  left: 0.25rem;
  bottom: 0.25rem;
  width: calc(50% - 0.25rem);
  background: var(--accent-color);
  border-radius: 10px;
  z-index: 1;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}
.scanner-viewport-card {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.scanner-slide-wrapper {
  display: flex;
  width: 200%;
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.scanner-slide {
  width: 50%;
  flex-shrink: 0;
  padding: 0 0.5rem;
  transition: opacity 0.3s ease;
}
.scanner-slide-wrapper.slide-active {
  transform: translateX(-50%);
}

/* Drag and Drop Zone styling */
.qr-dropzone {
  width: 100%;
  aspect-ratio: 1.5;
  border: 2px dashed rgba(255, 215, 0, 0.35);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  padding: 1.5rem;
}
.qr-dropzone:hover, .qr-dropzone.dragover {
  border-color: var(--accent-color);
  background: rgba(255, 215, 0, 0.04);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.1);
}

/* Staff Manager Profile Cards Grid */
.staff-grid-view {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  margin-top: 1rem;
}
.staff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  border: 1px solid var(--glass-border);
}
.staff-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 215, 0, 0.25);
}
.staff-avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-color) 0%, #b89700 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
  border: 2px solid rgba(255, 255, 255, 0.1);
}
.staff-info {
  margin-bottom: 1.25rem;
  width: 100%;
}
.staff-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.25rem;
}
.staff-email {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.staff-role-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 215, 0, 0.1);
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border: 1px solid rgba(255, 215, 0, 0.2);
}
.staff-actions {
  width: 100%;
}
.staff-actions .btn {
  width: 100%;
  font-size: 0.85rem;
  padding: 0.55rem;
}





/* === ADDED BUILDER CSS === */
/* ================================================================
   ROYALTY POINTS — Design System (Website 2.0 OVERHAUL)
   Premium Light Theme with Smooth Glassmorphism
   ================================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ── */
:root {
    --bg-primary: #f4f7fa;
    --bg-secondary: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.65);
    --bg-glass: rgba(255, 255, 255, 0.7);
    --bg-glass-hover: rgba(255, 255, 255, 0.95);

    --gold: #b38f38;
    --gold-dim: rgba(179, 143, 56, 0.08);
    --gold-glow: rgba(179, 143, 56, 0.25);
    --gold-dark: #8c6d26;
    --gold-gradient: linear-gradient(135deg, #c5a059 0%, #b38f38 100%);

    --text-primary: #0b1a30;
    --text-secondary: #4a5d78;
    --text-muted: #8c9cb3;

    --border: rgba(11, 26, 48, 0.08);
    --border-gold: rgba(179, 143, 56, 0.18);
    --border-hover: rgba(11, 26, 48, 0.22);

    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 50px;

    --shadow-sm: 0 4px 12px rgba(11, 26, 48, 0.03);
    --shadow-md: 0 10px 30px rgba(11, 26, 48, 0.06);
    --shadow-lg: 0 25px 60px rgba(11, 26, 48, 0.1);
    --shadow-gold: 0 8px 25px rgba(179, 143, 56, 0.15);

    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Outfit', sans-serif;

    --container: 1480px;
    --nav-height: 80px;
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

ul { list-style: none; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: rgba(255, 215, 0, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

/* ── Star Canvas Background ── */
#starCanvas {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

/* ── Container ── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 2rem;
}

/* ================================================================
   NAVIGATION
   ================================================================ */
.nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    padding: 0 2rem;
    height: var(--nav-height);
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-bottom: 1px solid var(--border);
    transition: var(--transition);
}
.nav.scrolled {
    background: rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-sm);
}
.nav-brand {
    display: flex; align-items: center; gap: 0.75rem;
    text-decoration: none; color: var(--text-primary);
}
.nav-brand img {
    height: 40px; border-radius: 6px;
    filter: drop-shadow(0 4px 10px rgba(179, 143, 56, 0.25));
}
.nav-brand span {
    font-family: var(--font-heading);
    font-weight: 800; font-size: 1.4rem;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-links {
    display: flex; align-items: center; gap: 0.25rem;
}
.nav-links a {
    color: var(--text-muted); font-weight: 500; font-size: 0.92rem;
    padding: 0.55rem 1.1rem; border-radius: var(--radius-sm);
    transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active {
    color: var(--text-primary); background: rgba(17, 19, 24, 0.05);
}
.nav-cta {
    background: var(--gold-gradient) !important;
    color: #fff !important; font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    padding: 0.6rem 1.6rem !important;
    box-shadow: var(--shadow-gold);
}
.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(179, 143, 56, 0.35) !important;
}

/* Favicon top-right floating */
.nav-favicon {
    width: 36px; height: 36px;
    border-radius: 8px;
    filter: drop-shadow(0 4px 10px rgba(179, 143, 56, 0.4));
    animation: floatFavicon 3s ease-in-out infinite;
}
@keyframes floatFavicon {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

/* Mobile hamburger */
.nav-toggle {
    display: none;
    background: none; border: none; color: var(--gold);
    font-size: 1.5rem; cursor: pointer; padding: 0.5rem;
}
.mobile-menu {
    display: none;
    position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    padding: 2rem;
    flex-direction: column; gap: 0.5rem;
    animation: slideDown 0.3s ease;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
    color: var(--text-muted); font-size: 1.15rem; font-weight: 600;
    padding: 1rem 1.25rem; border-radius: var(--radius-md);
    border-bottom: 1px solid var(--border);
}
.mobile-menu a:hover { color: var(--text-primary); background: var(--glass-bg); }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   HERO SECTION
   ================================================================ */
.hero {
    position: relative;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 3.5rem;
    align-items: center;
    max-width: var(--container);
    margin: 0 auto;
    padding: calc(var(--nav-height) + 2.5rem) 2rem 4rem;
    z-index: 10;
    overflow: hidden;
}
.hero::before {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(ellipse at 40% 20%, rgba(179, 143, 56, 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 80% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 60%);
    animation: heroGlow 8s ease-in-out infinite alternate;
    z-index: -1;
}
@keyframes heroGlow {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(20px, -20px) rotate(2deg); }
}
.hero-content {
    text-align: left;
    max-width: 100%;
}
.hero-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    padding: 0.45rem 1.25rem;
    border-radius: var(--radius-full);
    font-size: 0.85rem; font-weight: 600;
    margin-bottom: 2rem;
    animation: fadeInUp 0.6s ease both;
}
.hero-title {
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 5vw, 4.2rem);
    font-weight: 900; line-height: 1.1;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease 0.1s both;
}
.hero-title .gold { color: var(--gold); }
.hero-title .gradient {
    background: linear-gradient(135deg, var(--gold), var(--text-primary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-subtitle {
    font-size: 1.15rem; color: var(--text-muted);
    max-width: 580px; margin: 0 0 2.5rem 0;
    line-height: 1.7;
    animation: fadeInUp 0.8s ease 0.2s both;
}
.hero-actions {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    animation: fadeInUp 0.8s ease 0.3s both;
}

/* ── Hero floating card preview ── */
.hero-card-preview {
    margin-top: 4rem;
    perspective: 1200px;
    animation: fadeInUp 1s ease 0.5s both;
}
.hero-card-float {
    width: 380px; height: 240px;
    margin: 0 auto;
    transform: rotateY(-8deg) rotateX(5deg);
    animation: cardFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 30px 60px rgba(179, 143, 56, 0.15));
}
@keyframes cardFloat {
    0%, 100% { transform: rotateY(-8deg) rotateX(5deg) translateY(0); }
    50% { transform: rotateY(8deg) rotateX(-5deg) translateY(-15px); }
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.85rem 2rem;
    border-radius: var(--radius-md);
    font-size: 1rem; font-weight: 700;
    font-family: var(--font-family);
    cursor: pointer; border: none;
    transition: var(--transition);
    text-decoration: none;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: scale(0.97); }

.btn-gold {
    background: var(--gold-gradient);
    color: #fff;
    box-shadow: var(--shadow-gold);
}
.btn-gold:hover {
    box-shadow: 0 12px 40px rgba(179, 143, 56, 0.35);
    color: #fff;
}
.btn-outline {
    background: transparent;
    border: 1.5px solid rgba(17, 19, 24, 0.12);
    color: var(--text-muted);
}
.btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: var(--gold-dim);
}
.btn-lg { padding: 1rem 2.5rem; font-size: 1.1rem; border-radius: var(--radius-lg); }
.btn-sm { padding: 0.55rem 1.2rem; font-size: 0.88rem; }

/* ================================================================
   SECTION STYLES
   ================================================================ */
.section {
    position: relative;
    padding: 6rem 2rem;
    z-index: 10;
}
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}
.section-badge {
    display: inline-flex; align-items: center; gap: 0.4rem;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    color: var(--gold);
    padding: 0.35rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.25rem;
}
.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900; line-height: 1.15;
    margin-bottom: 1rem;
}
.section-subtitle {
    font-size: 1.1rem; color: var(--text-muted);
    line-height: 1.7;
}

/* ================================================================
   GLASS CARDS
   ================================================================ */
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: var(--transition);
}
.glass-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ================================================================
   FEATURES GRID
   ================================================================ */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: var(--container);
    margin: 0 auto;
}
.feature-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}
.feature-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gold-gradient);
    opacity: 0; transition: var(--transition);
}
.feature-card:hover {
    border-color: var(--border-gold);
    transform: translateY(-8px);
    box-shadow: var(--shadow-lg);
}
.feature-card:hover::before { opacity: 1; }
.feature-icon {
    width: 64px; height: 64px;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto 1.5rem;
}
.feature-title {
    font-family: var(--font-heading);
    font-size: 1.25rem; font-weight: 700;
    margin-bottom: 0.75rem;
}
.feature-desc {
    color: var(--text-muted); font-size: 0.95rem;
    line-height: 1.6;
}

/* ================================================================
   HOW IT WORKS — Steps
   ================================================================ */
.steps-container {
    display: flex; align-items: flex-start; gap: 2rem;
    max-width: 1000px; margin: 0 auto;
    position: relative;
}
.steps-container::before {
    content: '';
    position: absolute; top: 45px; left: 45px; right: 45px;
    height: 2px;
    background: linear-gradient(to right, var(--gold), var(--border-gold), var(--gold));
    z-index: 0;
}
.step-item {
    flex: 1; text-align: center;
    position: relative; z-index: 1;
}
.step-number {
    width: 90px; height: 90px;
    background: var(--glass-bg);
    border: 2px solid var(--border-gold);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading);
    font-size: 2rem; font-weight: 900;
    color: var(--gold);
    margin: 0 auto 1.5rem;
    transition: var(--transition);
}
.step-item:hover .step-number {
    background: var(--gold-gradient);
    color: #fff;
    border-color: var(--gold);
    box-shadow: var(--shadow-gold);
    transform: scale(1.1);
}
.step-title {
    font-family: var(--font-heading);
    font-size: 1.2rem; font-weight: 700;
    margin-bottom: 0.5rem;
}
.step-desc {
    color: var(--text-muted); font-size: 0.92rem;
    line-height: 1.5;
}

/* ================================================================
   PRICING CARDS
   ================================================================ */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch;
}
.plan-card {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    display: flex; flex-direction: column;
    transition: var(--transition);
    position: relative; overflow: hidden;
}
.plan-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gold-gradient);
    opacity: 0; transition: var(--transition);
}
.plan-card:hover {
    transform: translateY(-8px);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-lg), 0 0 30px rgba(179, 143, 56, 0.05);
}
.plan-card:hover::before { opacity: 1; }
.plan-card.popular {
    border: 2px solid rgba(179, 143, 56, 0.4);
    box-shadow: 0 15px 40px rgba(179, 143, 56, 0.1);
    transform: scale(1.03);
}
.plan-card.popular::before { opacity: 1; }
.plan-card.popular:hover { transform: scale(1.03) translateY(-8px); }
.popular-badge {
    position: absolute; top: 1.2rem; right: 1.2rem;
    background: var(--gold-gradient);
    color: #fff; font-size: 0.7rem; font-weight: 800;
    padding: 0.25rem 0.85rem; border-radius: var(--radius-full);
    text-transform: uppercase; letter-spacing: 1px;
    box-shadow: var(--shadow-gold);
}
.plan-name {
    font-family: var(--font-heading);
    font-size: 1.5rem; font-weight: 800;
    margin-bottom: 0.5rem;
}
.plan-price {
    display: flex; align-items: baseline; gap: 0.2rem;
    margin-bottom: 1rem;
}
.plan-price .currency {
    font-size: 1.2rem; font-weight: 800;
    color: var(--gold);
}
.plan-price .amount {
    font-family: var(--font-heading);
    font-size: 3rem; font-weight: 900;
    background: var(--gold-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1;
}
.plan-price .period {
    color: var(--text-muted); font-size: 0.85rem;
}
.plan-desc {
    color: var(--text-muted); font-size: 0.92rem;
    margin-bottom: 1.5rem; line-height: 1.5;
}
.plan-features {
    flex: 1; margin-bottom: 2rem;
}
.plan-features li {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 0.6rem 0;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(17, 19, 24, 0.05);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features .check {
    color: var(--success); font-weight: 700; flex-shrink: 0;
}
.btn-plan {
    width: 100%; padding: 0.95rem;
    background: var(--gold-dim);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    color: var(--gold); font-weight: 700; font-size: 0.95rem;
    cursor: pointer; transition: var(--transition);
    font-family: var(--font-family);
}
.btn-plan:hover, .plan-card.popular .btn-plan {
    background: var(--gold-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--shadow-gold);
}

/* ================================================================
   LAUNCH COUNTDOWN BANNER
   ================================================================ */
.launch-banner {
    background: linear-gradient(135deg, rgba(179, 143, 56, 0.08), rgba(179, 143, 56, 0.02));
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-xl);
    padding: 2.5rem;
    text-align: center;
    max-width: 800px;
    margin: 0 auto 3rem;
    position: relative;
    overflow: hidden;
}
.launch-banner::before {
    content: '';
    position: absolute; top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(179, 143, 56, 0.05) 0%, transparent 70%);
    animation: launchGlow 4s ease-in-out infinite alternate;
}
@keyframes launchGlow {
    0% { transform: translate(-10%, -10%); }
    100% { transform: translate(10%, 10%); }
}
.launch-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--gold-gradient);
    color: #fff; font-weight: 800; font-size: 0.75rem;
    padding: 0.3rem 1rem;
    border-radius: var(--radius-full);
    text-transform: uppercase; letter-spacing: 1.5px;
    margin-bottom: 1rem;
    position: relative; z-index: 1;
    animation: pulse 2s ease-in-out infinite;
}
.launch-title {
    font-family: var(--font-heading);
    font-size: 1.8rem; font-weight: 900;
    color: var(--gold);
    margin-bottom: 0.5rem;
    position: relative; z-index: 1;
}
.launch-subtitle {
    color: var(--text-muted); font-size: 0.95rem;
    margin-bottom: 1.5rem;
    position: relative; z-index: 1;
}
.countdown {
    display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
    position: relative; z-index: 1;
}
.countdown-item {
    background: var(--glass-bg);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
    min-width: 80px; text-align: center;
}
.countdown-value {
    font-family: var(--font-heading);
    font-size: 2.2rem; font-weight: 900;
    color: var(--gold); line-height: 1;
}
.countdown-label {
    font-size: 0.7rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 1px;
    margin-top: 0.3rem; font-weight: 600;
}

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
    position: relative; z-index: 10;
    border-top: 1px solid var(--border);
    padding: 4rem 2rem 2rem;
    background: rgba(255, 255, 255, 0.45);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 3rem;
    max-width: var(--container);
    margin: 0 auto 3rem;
}
.footer-brand img { height: 45px; margin-bottom: 1rem; border-radius: 6px; }
.footer-brand p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.6; max-width: 300px; }
.footer-col h4 {
    color: var(--gold); font-size: 0.85rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 1rem;
}
.footer-col a {
    display: block; color: var(--text-muted); font-size: 0.9rem;
    padding: 0.35rem 0; transition: var(--transition);
}
.footer-col a:hover { color: var(--gold); padding-left: 0.5rem; }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 2rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    max-width: var(--container);
    margin: 0 auto;
}
.footer-bottom a { color: var(--gold); }

/* ================================================================
   SCROLL ANIMATIONS
   ================================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ================================================================
   UTILITY ANIMATIONS
   ================================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ================================================================
   FORM INPUTS
   ================================================================ */
.form-group { margin-bottom: 1.25rem; }
.form-label {
    display: block; margin-bottom: 0.5rem;
    font-size: 0.85rem; color: var(--text-muted); font-weight: 500;
}
.form-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    padding: 0.85rem 1rem;
    color: #fff;
    font-size: 1rem;
    font-family: var(--font-family);
    transition: var(--transition);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.15), inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.form-input::placeholder { color: rgba(255, 255, 255, 0.35); }

/* ================================================================
   LOADING / SPINNER
   ================================================================ */
.spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--gold);
    border-radius: 50%;
    animation: spinRing 0.8s linear infinite;
}
@keyframes spinRing {
    to { transform: rotate(360deg); }
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-toggle { display: block; }
    .hero { padding-top: calc(var(--nav-height) + 2rem); }
    .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }
    .hero-card-float { width: 300px; height: 190px; }
    .steps-container {
        flex-direction: column; gap: 1.5rem;
        align-items: center;
    }
    .steps-container::before { display: none; }
    .section { padding: 4rem 1.25rem; }
    .section-header { margin-bottom: 2.5rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
    .countdown { gap: 0.6rem; }
    .countdown-item { min-width: 65px; padding: 0.75rem; }
    .countdown-value { font-size: 1.6rem; }
}

@media (max-width: 480px) {
    :root { --nav-height: 65px; }
    .container { padding: 0 1rem; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-card-float { width: 260px; height: 165px; }
    .features-grid { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .plan-card.popular { transform: none; }
    .plan-card.popular:hover { transform: translateY(-8px); }
}

/* ================================================================
   VISION FLIP CARD
   ================================================================ */
.vision-card-container {
    perspective: 1200px;
    width: 100%;
    max-width: 440px;
    height: 270px;
    margin: 0 auto;
}
.vision-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    cursor: pointer;
}
.vision-card-container:hover .vision-card-inner {
    transform: rotateY(180deg);
}
.vision-card-face {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.vision-card-front {
    background: linear-gradient(135deg, #1a1a3e, #0a0a2a);
    padding: 2.5rem;
}
.vision-card-back {
    background: linear-gradient(135deg, #0a0a2a, #11113b);
    transform: rotateY(180deg);
    padding: 2rem;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
}

/* ================================================================
   EMBEDDED CARD BUILDER
   ================================================================ */
.builder-layout {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 3rem;
    align-items: start;
    margin-top: 2rem;
}
.controls-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-md);
}

/* Uploader */
.logo-upload-zone {
    width: 85px; height: 85px; border-radius: 50%;
    background: var(--gold-dim); border: 2px dashed var(--border-gold);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: var(--transition); overflow: hidden; position: relative;
    flex-shrink: 0;
}
.logo-upload-zone:hover { border-color: var(--gold); background: rgba(255,215,0,0.15); transform: scale(1.05); }
.logo-upload-zone img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: none; }
.logo-upload-zone .upload-text { font-size: 0.65rem; color: var(--gold); text-align: center; font-weight: 700; line-height: 1.2; }
.logo-upload-zone.has-logo .upload-text { display: none; }
.logo-upload-zone.has-logo img { display: block; }

/* Swatches Grid */
.theme-section-title {
    font-size: 0.75rem; color: var(--text-muted); font-weight: 700;
    margin: 1.5rem 0 0.5rem; text-transform: uppercase; letter-spacing: 1px;
}
.swatches-grid { display: flex; gap: 0.65rem; flex-wrap: wrap; margin-bottom: 1rem; }
.swatch {
    width: 54px; height: 54px; border-radius: 12px;
    border: 2.5px solid transparent; cursor: pointer;
    transition: var(--transition); position: relative;
    overflow: hidden !important;
}
.swatch:hover { transform: scale(1.18); }

/* Swatch pattern container overrides to contain textures */
.swatch.pattern-sparks::after {
    inset: 0 !important;
    animation: none !important;
    opacity: 0.8 !important;
}
.swatch.pattern-radar::after {
    width: 48px !important;
    height: 48px !important;
    margin-top: -24px !important;
    margin-left: -24px !important;
    animation: none !important;
}
.swatch.pattern-radar::before {
    width: 100% !important;
    height: 100% !important;
    inset: 0 !important;
    transform: none !important;
}
.swatch.pattern-matrix::before {
    font-size: 5px !important;
    line-height: 1.1 !important;
    letter-spacing: 0px !important;
    animation: none !important;
    opacity: 0.65 !important;
}
.swatch.pattern-spheres {
    animation: none !important;
    background-size: 6px 10.39px, 6px 10.39px, 100% 100%, 100% 100%, 100% 100%, 100% 10.39px !important;
}
.swatch.active {
    border-color: var(--gold);
    box-shadow: 0 0 15px var(--gold-glow);
    transform: scale(1.1);
}
.swatch.active::after {
    content: '✓'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--gold); font-weight: 900; font-size: 1rem;
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

/* Step Bar */
.step-indicator-bar { display: flex; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; }
.step-indicator-item { display: flex; align-items: center; gap: 0.5rem; flex: 1; opacity: 0.4; transition: var(--transition); }
.step-indicator-item.active { opacity: 1; }
.step-indicator-item .step-num {
    width: 24px; height: 24px; border-radius: 50%;
    background: var(--border); display: flex; align-items: center;
    justify-content: center; font-size: 0.75rem; font-weight: 700;
}
.step-indicator-item.active .step-num { background: var(--gold); color: #000; }
.step-indicator-item .step-lbl { font-size: 0.8rem; font-weight: 700; }

/* 3D Preview Card */
.preview-panel { text-align: center; position: sticky; top: calc(var(--nav-height) + 2rem); }
.preview-label {
    font-size: 0.8rem; color: var(--gold); font-weight: 700;
    text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 1rem;
}
.card-container { perspective: 1200px; width: 100%; max-width: 420px; height: 260px; margin: 0 auto 1.5rem; }
.card-inner {
    position: relative; width: 100%; height: 100%;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d; cursor: pointer;
}
.card-inner.flipped { transform: rotateY(180deg); }
.card-back { position: relative; }

/* Social icons overlay inside QR code area */
.previewQrSocials {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.4rem;
    font-size: 0.6rem;
    color: var(--text-primary);
    pointer-events: auto;
}

/* Prevent hover effects from affecting layout */
.previewQrSocials a {
    text-decoration: none;
    color: inherit;
}
.previewQrSocials a:hover {
    opacity: 0.85;
}

.card-face {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    border-radius: 20px; border: 1.5px solid rgba(255,215,0,0.15);
    box-shadow: 0 15px 45px rgba(17, 19, 24, 0.25);
    padding: 1.15rem 1.25rem; display: flex; flex-direction: column;
    justify-content: space-between; overflow: hidden;
    text-shadow: 0 1.5px 3px rgba(0,0,0,0.85), 0 0 10px rgba(0,0,0,0.5);
}
.card-face::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, transparent 45%, rgba(0,0,0,0.45) 100%);
    z-index: 1; pointer-events: none;
}
.card-face > * {
    position: relative; z-index: 2;
}
.card-front { background: linear-gradient(135deg, #12122b, #050514); }
.card-back { background: linear-gradient(135deg, #0d0d21, #03030b); transform: rotateY(180deg); }

/* Back card grid layout */
.back-grid { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 0.75rem; height: 100%; align-items: center; }
.back-stamps { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.back-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; border-left: 1px solid var(--border); padding-left: 0.75rem; height: 100%; }

/* Stamps grid */
.mini-stamp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.mini-stamp-grid.grid-10 { grid-template-columns: repeat(5, 1fr); gap: 0.3rem; }
.mini-stamp {
    aspect-ratio: 1; border-radius: 50%;
    background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,215,0,0.25);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 600; color: var(--text-muted);
}
.mini-stamp.stamped {
    background: radial-gradient(circle, var(--gold) 0%, #b89700 100%);
    border-style: solid; border-color: var(--gold); color: #000;
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.mini-stamp.reward { border-color: var(--gold); color: var(--gold); }

/* Download Actions */
.download-actions { display: flex; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; justify-content: center; }
.download-actions .btn { flex: 1; min-width: 150px; }
.cta-online {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--gold-gradient); color: #000; font-weight: 700;
    padding: 0.85rem 2rem; border-radius: var(--radius-md);
    font-size: 0.95rem; transition: var(--transition); text-decoration: none;
    box-shadow: var(--shadow-gold);
}
.cta-online:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(255,215,0,0.5); color: #000; }
.flip-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; animation: pulse 2s ease-in-out infinite; }

/* ── PREMIUM TEXTURE PATTERNS ── */
.pattern-carbon { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0px, rgba(255,255,255,0.02) 1px, transparent 1px, transparent 4px), linear-gradient(135deg, #0a0a1e, #050510) !important; }
.pattern-grid { background: repeating-linear-gradient(0deg, rgba(255,215,0,0.03) 0px, transparent 1px, transparent 30px), repeating-linear-gradient(90deg, rgba(255,215,0,0.03) 0px, transparent 1px, transparent 30px), linear-gradient(135deg, #0a0a1e, #050510) !important; }
.pattern-stripes { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.015) 0px, rgba(255,255,255,0.015) 2px, transparent 2px, transparent 12px), linear-gradient(135deg, #0a0a1e, #050510) !important; }
.pattern-dots { background: radial-gradient(rgba(255,215,0,0.06) 1px, transparent 1px), linear-gradient(135deg, #0a0a1e, #050510) !important; background-size: 12px 12px, 100% 100% !important; }
.pattern-hex { background: radial-gradient(circle at 50% 50%, rgba(255,215,0,0.04) 0%, transparent 70%), linear-gradient(135deg, #0a0a1e, #050510) !important; background-size: 20px 20px, 100% 100% !important; }


/* Royal Diamonds */
.pattern-diamonds {
    background-color: #0b0b1a !important;
    background-image: linear-gradient(135deg, rgba(255,215,0,0.06) 25%, transparent 25%), 
                      linear-gradient(225deg, rgba(255,215,0,0.06) 25%, transparent 25%), 
                      linear-gradient(45deg, rgba(255,215,0,0.06) 25%, transparent 25%), 
                      linear-gradient(315deg, rgba(255,215,0,0.06) 25%, #0b0b1a 25%) !important;
    background-position: 20px 0, 20px 0, 0 0, 0 0 !important;
    background-size: 40px 40px !important;
}

/* Custom Conic Cubes */
.pattern-cubes {
    --s: 110px;
    --c1: #151515;
    --c2: #303030;
    --c3: #222222;
    background: repeating-conic-gradient(from 30deg, #0000 0 120deg, var(--c3) 0 180deg) calc(0.5 * var(--s)) calc(0.5 * var(--s) * 0.577),
                repeating-conic-gradient(from 30deg, var(--c1) 0 60deg, var(--c2) 0 120deg, var(--c3) 0 180deg) !important;
    background-size: var(--s) calc(var(--s) * 0.577) !important;
    opacity: 0.95;
}

/* Diagonal Cyber Stripes */
.pattern-diagonal-cyber {
    background: repeating-linear-gradient(135deg, #1e2022 0px, #1e2022 40px, #2c2f33 40px, #2c2f33 80px) !important;
}

/* Premium 3D Conic */
.pattern-conic-boxes {
    --s: 37px;
    --c: #0000, #222222 0.5deg 119.5deg, #0000 120deg;
    --g1: conic-gradient(from 60deg at 56.25% calc(425% / 6), var(--c));
    --g2: conic-gradient(from 180deg at 43.75% calc(425% / 6), var(--c));
    --g3: conic-gradient(from -60deg at 50% calc(175% / 12), var(--c));
    background: var(--g1), var(--g1) var(--s) calc(1.73 * var(--s)), var(--g2),
      var(--g2) var(--s) calc(1.73 * var(--s)), var(--g3) var(--s) 0,
      var(--g3) 0 calc(1.73 * var(--s)) #121212 !important;
    background-size: calc(2 * var(--s)) calc(3.46 * var(--s)) !important;
}

/* Radial Glowing Spheres Matrix */
.pattern-spheres {
    position: relative;
    --c: 7px;
    background-color: #050505 !important;
    background-image: radial-gradient(circle at 50% 50%, #0000 1.5px, #000 0 var(--c), #0000 var(--c)),
      radial-gradient(circle at 50% 50%, #0000 1.5px, #000 0 var(--c), #0000 var(--c)),
      radial-gradient(circle at 50% 50%, #ff5e00, #ff5e0000 60%),
      radial-gradient(circle at 50% 50%, #ffd700, #ffd70000 60%),
      radial-gradient(circle at 50% 50%, #00f2fe, #00f2fe00 60%),
      radial-gradient(ellipse at 50% 50%, #ff007f, #ff007f00 60%) !important;
    background-size: 12px 20.78px, 12px 20.78px, 200% 200%, 200% 200%, 200% 200%, 200% 20.78px !important;
    --p: 0px 0px, 6px 10.39px;
    background-position: var(--p), 0% 0%, 0% 0%, 0% 0px !important;
    animation: wee 45s linear infinite, filt 8s linear infinite;
    opacity: 0.9;
}

/* Concentric Radar Sweep */
.pattern-radar {
    background-color: #070709 !important;
    background-image: linear-gradient(rgba(139, 92, 246, 0.08) 0.1em, transparent 0.1em),
                      linear-gradient(90deg, rgba(139, 92, 246, 0.08) 0.1em, transparent 0.1em) !important;
    background-size: 2.5em 2.5em !important;
    position: relative;
}
.pattern-radar::before {
    content: ""; position: absolute; top: 50%; left: 50%; width: 150%; height: 150%;
    transform: translate(-50%, -50%);
    background: repeating-radial-gradient(circle, transparent 0, transparent 2.9em, rgba(139, 92, 246, 0.15) 3em);
    z-index: 1;
}
.pattern-radar::after {
    content: ""; position: absolute; top: 50%; left: 50%; width: 28em; height: 28em;
    margin-top: -14em; margin-left: -14em; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 75%, rgba(139, 92, 246, 0.35) 100%);
    animation: radar-spin 4s linear infinite;
    z-index: 2;
}

/* Sparks Starfield */
.pattern-sparks {
    background: #030303 !important;
    position: relative;
}
.pattern-sparks::after {
    content: ""; position: absolute; inset: -145%; rotate: -45deg;
    background: #000000;
    background-image: radial-gradient(4px 100px at 0px 235px, rgb(255, 140, 17), #0000),
      radial-gradient(4px 100px at 300px 235px, rgb(255, 119, 0), #884e2800),
      radial-gradient(1.5px 1.5px at 150px 117.5px, rgb(255, 144, 9) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 252px, rgb(156, 14, 137), #0000),
      radial-gradient(4px 100px at 300px 252px, rgb(23, 41, 206), #0000),
      radial-gradient(1.5px 1.5px at 150px 126px, rgb(247, 102, 18) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 150px, rgb(249, 121, 16), #0000),
      radial-gradient(4px 100px at 300px 150px, rgb(255, 128, 18), #0000),
      radial-gradient(1.5px 1.5px at 150px 75px, rgb(255, 116, 10) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 253px, rgb(249, 137, 17), #0000),
      radial-gradient(4px 100px at 300px 253px, rgb(248, 107, 14), #0000),
      radial-gradient(1.5px 1.5px at 150px 126.5px, rgb(252, 129, 14) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 204px, rgb(234, 115, 18), #0000),
      radial-gradient(4px 100px at 300px 204px, rgb(255, 139, 6), #0000),
      radial-gradient(1.5px 1.5px at 150px 102px, rgb(255, 128, 9) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 134px, rgb(249, 133, 9), #0000),
      radial-gradient(4px 100px at 300px 134px, rgb(251, 125, 15), #0000),
      radial-gradient(1.5px 1.5px at 150px 67px, rgb(255, 146, 13) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 179px, rgb(249, 137, 17), #0000),
      radial-gradient(4px 100px at 300px 179px, rgb(253, 122, 6), #0000),
      radial-gradient(1.5px 1.5px at 150px 89.5px, rgb(234, 132, 7) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 299px, rgb(255, 115, 0), #0000),
      radial-gradient(4px 100px at 300px 299px, rgb(255, 136, 0), #0000),
      radial-gradient(1.5px 1.5px at 150px 149.5px, rgb(255, 123, 0) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 215px, rgb(255, 145, 0), #0000),
      radial-gradient(4px 100px at 300px 215px, rgb(255, 132, 0), #0000),
      radial-gradient(1.5px 1.5px at 150px 107.5px, rgb(255, 136, 0) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 281px, rgb(255, 170, 0), #0000),
      radial-gradient(4px 100px at 300px 281px, rgb(255, 115, 0), #0000),
      radial-gradient(1.5px 1.5px at 150px 140.5px, rgb(255, 119, 0) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 158px, rgb(255, 123, 0), #0000),
      radial-gradient(4px 100px at 300px 158px, rgb(255, 132, 0), #0000),
      radial-gradient(1.5px 1.5px at 150px 79px, rgb(255, 149, 0) 100%, #0000 150%),
      radial-gradient(4px 100px at 0px 210px, rgb(255, 123, 0), #0000),
      radial-gradient(4px 100px at 300px 210px, rgb(255, 162, 0), #0000),
      radial-gradient(1.5px 1.5px at 150px 105px, rgb(255, 136, 0) 100%, #0000 150%);
    background-size: 300px 235px, 300px 235px, 300px 235px, 300px 252px, 300px 252px, 300px 252px, 300px 150px, 300px 150px, 300px 150px, 300px 253px, 300px 253px, 300px 253px, 300px 204px, 300px 204px, 300px 204px, 300px 134px, 300px 134px, 300px 134px, 300px 179px, 300px 179px, 300px 179px, 300px 299px, 300px 299px, 300px 299px, 300px 215px, 300px 215px, 300px 215px, 300px 281px, 300px 281px, 300px 281px, 300px 158px, 300px 158px, 300px 158px, 300px 210px, 300px 210px, 300px 210px;
    animation: hi 150s linear infinite;
    opacity: 0.35;
    z-index: 1; pointer-events: none;
}

/* Falling Digital Matrix Rain */
.pattern-matrix {
    background-color: #020202 !important;
    position: relative;
}
.pattern-matrix::before {
    content: "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
    position: absolute; inset: 0;
    writing-mode: vertical-lr; letter-spacing: 2px;
    font-family: monospace; font-size: 9px; font-weight: bold;
    color: #39ff14; opacity: 0.14;
    animation: matrix-fall 25s linear infinite;
    word-break: break-all;
    overflow: hidden; pointer-events: none;
}
@keyframes matrix-fall {
    0% { transform: translateY(-30%); }
    100% { transform: translateY(0%); }
}

/* Animations for patterns */
@keyframes filt { 0% { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
@keyframes wee {
  0% { background-position: var(--p), 800% 400%, 1000% -400%, -1200% -600%, 400% 41.5px; }
  to { background-position: var(--p), 0% 0%, 0% 0%, 0% 0%, 0% 0%; }
}
@keyframes radar-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hi {
  0% {
    background-position: 0px 220px, 3px 220px, 151.5px 337.5px, 25px 24px, 28px 24px, 176.5px 150px, 50px 16px, 53px 16px, 201.5px 91px, 75px 224px, 78px 224px, 226.5px 350.5px, 100px 19px, 103px 19px, 251.5px 121px, 125px 120px, 128px 120px, 276.5px 187px, 150px 31px, 153px 31px, 301.5px 120.5px, 175px 235px, 178px 235px, 326.5px 384.5px, 200px 121px, 203px 121px, 351.5px 228.5px, 225px 224px, 228px 224px, 376.5px 364.5px, 250px 26px, 253px 26px, 401.5px 105px, 275px 75px, 278px 75px, 426.5px 180px;
  }
  to {
    background-position: 0px 6800px, 3px 6800px, 151.5px 6917.5px, 25px 13632px, 28px 13632px, 176.5px 13758px, 50px 5416px, 53px 5416px, 201.5px 5491px, 75px 17175px, 78px 17175px, 226.5px 17301.5px, 100px 5119px, 103px 5119px, 251.5px 5221px, 125px 8428px, 128px 8428px, 276.5px 8495px, 150px 9876px, 153px 9876px, 301.5px 9965.5px, 175px 13391px, 178px 13391px, 326.5px 13540.5px, 200px 14741px, 203px 14741px, 351.5px 14848.5px, 225px 18770px, 228px 18770px, 376.5px 18910.5px, 250px 5082px, 253px 5082px, 401.5px 5161px, 275px 6375px, 278px 6375px, 426.5px 6480px;
  }
}

.btn-full { width: 100%; display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
    #showcase .reveal {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
    }
    #showcase .reveal div {
        order: initial !important;
    }
}

@media (max-width: 1100px) {
    .builder-layout { grid-template-columns: 1fr; }
    .preview-panel { position: static; order: -1; }
}