/* ═══════════════════════════════════════════════════════
   WEB3DUNIA — Premium Design System
   Direction: Modern SaaS — depth, grain, vivid accents
═══════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:              #F5F4FF;
  --bg-2:            #EEEEFF;
  --surface:         #ffffff;
  --surface-2:       #F7F7FE;
  --surface-3:       #F0F0FC;
  --surface-glass:   rgba(255,255,255,0.72);
  --text:            #0A0818;
  --text-2:          #2D2B45;
  --text-muted:      #7C79A0;
  --text-soft:       #4E4B6A;
  --border:          #E2E1F5;
  --border-light:    #EEEEFF;
  --border-indigo:   rgba(79,70,229,0.14);
  --accent:          #4F46E5;
  --accent-2:        #7C3AED;
  --accent-hover:    #3730D4;
  --accent-soft:     rgba(79,70,229,0.07);
  --accent-glow:     rgba(79,70,229,0.25);
  --header-bg:       rgba(245,244,255,0.85);
  --footer-bg:       #0A0818;
  --card-shadow:     0 4px 6px -1px rgba(79,70,229,0.06), 0 20px 40px -8px rgba(79,70,229,0.12);
  --card-shadow-hover: 0 8px 16px -4px rgba(79,70,229,0.15), 0 32px 56px -8px rgba(79,70,229,0.2);
  --input-bg:        #ffffff;
  --notify-bg:       linear-gradient(135deg,#EEEEFF,#F3F0FF);
  --notify-border:   rgba(79,70,229,0.2);
  --tag-bg:          #EEEEFF;
  --tag-text:        #4F46E5;
  --modal-overlay:   rgba(10,8,24,0.6);
  --scrollbar-color: rgba(79,70,229,0.25);
  --radius-card:     20px;
  --radius-pill:     999px;
}

body.dark {
  --bg:              #07060F;
  --bg-2:            #0F0D1E;
  --surface:         #13112A;
  --surface-2:       #1A1835;
  --surface-3:       #201E3C;
  --surface-glass:   rgba(19,17,42,0.82);
  --text:            #F0EEFF;
  --text-2:          #C8C4E8;
  --text-muted:      #7A779A;
  --text-soft:       #9E9BBF;
  --border:          #2A2848;
  --border-light:    #1F1D3A;
  --border-indigo:   rgba(99,102,241,0.22);
  --accent:          #6366F1;
  --accent-2:        #A78BFA;
  --accent-hover:    #818CF8;
  --accent-soft:     rgba(99,102,241,0.1);
  --accent-glow:     rgba(99,102,241,0.3);
  --header-bg:       rgba(7,6,15,0.88);
  --footer-bg:       #07060F;
  --card-shadow:     0 4px 6px -1px rgba(0,0,0,0.3), 0 20px 40px -8px rgba(0,0,0,0.4);
  --card-shadow-hover: 0 8px 16px -4px rgba(99,102,241,0.2), 0 32px 56px -8px rgba(0,0,0,0.5);
  --input-bg:        #1A1835;
  --notify-bg:       linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1));
  --notify-border:   rgba(99,102,241,0.25);
  --tag-bg:          rgba(99,102,241,0.15);
  --tag-text:        #A5B4FC;
  --modal-overlay:   rgba(0,0,0,0.75);
  --scrollbar-color: rgba(99,102,241,0.35);
}

/* ── RESET ───────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
a{text-decoration:none}

/* ── BASE ────────────────────────────────────────────── */
body {
  font-family:'DM Sans',sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.3s, color 0.3s;
  /* Subtle grain texture overlay */
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  min-height: 100vh;
}
body.dark {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.055'/%3E%3C/svg%3E");
}
h1,h2,h3,h4 { font-family:'Outfit',sans-serif; letter-spacing:-0.02em; }
button { font-family:'DM Sans',sans-serif; cursor:pointer; }

/* ── HEADER ──────────────────────────────────────────── */
.glass-header {
  background: var(--header-bg);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-bottom: 1px solid var(--border-indigo);
  position: sticky; top: 0; z-index: 100;
  transition: background 0.3s;
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  padding: 12px 24px;
  display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-text {
  font-family:'Outfit',sans-serif; font-weight:800; font-size:16px;
  color: var(--text); letter-spacing:-0.03em;
}
.logo-text span { color: var(--accent); }

/* Nav pill */
.nav {
  display:flex; align-items:center; gap:2px;
  padding: 4px; border-radius: var(--radius-pill);
  background: var(--surface-glass);
  border: 1px solid var(--border-indigo);
  backdrop-filter: blur(12px);
}
.nav-btn {
  padding: 7px 18px; border-radius: var(--radius-pill);
  border: none; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--text-muted);
  cursor: pointer; transition: all 0.18s;
  font-family:'DM Sans',sans-serif;
}
.nav-btn:hover { color: var(--text); background: var(--accent-soft); }
.nav-btn.active {
  background: var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 2px 8px var(--accent-glow);
}

/* ── BUTTONS ─────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff; border: none; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.2s; font-family:'DM Sans',sans-serif;
  box-shadow: 0 2px 8px var(--accent-glow);
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content:''; position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15), transparent);
  opacity:0; transition: opacity 0.2s;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--accent-glow); }
.btn-primary:hover::after { opacity: 1; }
.btn-primary:disabled { opacity:0.4; cursor:not-allowed; transform:none; box-shadow:none; }

.btn-outline {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:transparent; color:var(--accent);
  border:1.5px solid var(--accent); border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-outline:hover { background:var(--accent); color:#fff; }

.btn-ghost {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:transparent; color:var(--text-muted);
  border:1.5px solid var(--border); border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

.btn-danger {
  display:inline-flex; align-items:center; gap:6px; padding:8px 16px;
  background:#EF4444; color:#fff; border:none; border-radius:var(--radius-pill);
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.btn-danger:hover { background:#DC2626; }
.btn-sm { padding:6px 14px; font-size:12px; }

/* ── PILLS / TAGS ────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:4px;
  padding:3px 12px; border-radius:var(--radius-pill);
  font-size:12px; font-weight:600;
}
.pill-indigo { background:var(--tag-bg); color:var(--accent); }
.pill-green  { background:#DCFCE7; color:#16A34A; }
.pill-amber  { background:#FEF3C7; color:#D97706; }
.pill-purple { background:#F3E8FF; color:#9333EA; }
.pill-gray   { background:var(--surface-2); color:var(--text-2); }
.pill-yellow { background:#FEF3C7; color:#92400E; }
.tag {
  background:var(--tag-bg); color:var(--tag-text);
  padding:3px 10px; border-radius:var(--radius-pill);
  font-size:11px; font-weight:600;
}

/* ── SEARCH / FILTERS ────────────────────────────────── */
.search-bar { position:relative; flex:1; min-width:220px; }
.search-icon {
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--text-muted); pointer-events:none;
}
.search-input {
  width:100%; height:46px; padding:0 16px 0 46px;
  border:1.5px solid var(--border); border-radius:var(--radius-pill);
  font-size:14px; font-family:'DM Sans',sans-serif; outline:none;
  background:var(--surface); color:var(--text);
  transition: all 0.2s;
}
.search-input:focus {
  border-color:var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.filter-btn {
  padding:8px 18px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border); background:var(--surface);
  font-size:13px; font-weight:600; color:var(--text-muted);
  cursor:pointer; transition:all 0.18s; white-space:nowrap;
  font-family:'DM Sans',sans-serif;
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--accent); background:var(--accent); color:#fff;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.filter-btn.featured-active { border-color:#F59E0B; background:#FEF3C7; color:#92400E; }

/* ── HERO ────────────────────────────────────────────── */
.hero {
  padding: 96px 24px 80px;
  background:
    radial-gradient(ellipse 70% 80% at 10% 20%, rgba(79,70,229,0.15) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 90% 10%, rgba(124,58,237,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 50% 50% at 50% 100%, rgba(99,102,241,0.08) 0%, transparent 60%),
    var(--bg);
  position: relative; overflow: hidden;
}
/* Decorative grid */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(79,70,229,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,70,229,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, black 40%, transparent 100%);
  pointer-events: none;
}
.hero-inner { max-width:860px; margin:0 auto; text-align:center; position:relative; }
.hero h1 {
  font-size: clamp(2.4rem,6vw,4rem);
  font-weight: 900; line-height: 1.08; margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.hero-gradient {
  background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #EC4899 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p {
  font-size: 18px; color: var(--text-soft);
  max-width: 520px; margin: 0 auto 40px; line-height: 1.75;
}
.hero-stats { display:flex; gap:48px; justify-content:center; margin-top:56px; flex-wrap:wrap; }
.stat-num {
  font-family:'Outfit',sans-serif; font-size:32px; font-weight:900;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing:-0.03em;
}
.stat-label { font-size:13px; color:var(--text-muted); margin-top:4px; font-weight:500; }

/* ── CARDS (AI Tools) ────────────────────────────────── */
.cards-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.tool-card {
  background: var(--surface);
  border: 1px solid var(--border-indigo);
  border-radius: var(--radius-card);
  padding: 24px; cursor: pointer;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.tool-card::before {
  content: '';
  position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(135deg, rgba(79,70,229,0.04), rgba(124,58,237,0.04));
  transition: opacity 0.25s;
}
.tool-card:hover {
  border-color: rgba(99,102,241,0.4);
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
}
.tool-card:hover::before { opacity: 1; }
.tool-logo {
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, var(--tag-bg), #F3F0FF);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; flex-shrink:0;
}
.tool-tags { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }

/* ── HR TOOL CARDS ───────────────────────────────────── */
.tool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; margin-bottom:40px; }
.hr-tool-card {
  background: var(--surface);
  border-radius: var(--radius-card); padding:24px;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  position: relative; overflow: hidden;
}
.hr-tool-card::after {
  content: '';
  position: absolute; bottom:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  opacity: 0; transition: opacity 0.2s;
}
.hr-tool-card.live {
  border: 1.5px solid var(--border-indigo); cursor:pointer;
}
.hr-tool-card.live:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-shadow-hover);
  border-color: rgba(99,102,241,0.4);
}
.hr-tool-card.live:hover::after { opacity: 1; }
.hr-tool-card.soon { border:1.5px solid var(--border-light); opacity:0.6; cursor:default; }

/* ── MODAL ───────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; background:var(--modal-overlay);
  backdrop-filter:blur(8px); z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px; animation:fadeIn 0.2s ease;
}
.modal-box {
  background:var(--surface); border-radius:28px;
  max-width:780px; width:100%; max-height:90vh; overflow-y:auto;
  animation:fadeUp 0.28s cubic-bezier(0.34,1.56,0.64,1);
  border: 1px solid var(--border-indigo);
  box-shadow: 0 40px 80px rgba(0,0,0,0.2);
}
.modal-header {
  padding:28px 28px 20px;
  border-bottom:1px solid var(--border-light);
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:16px;
}
.modal-body { padding:24px 28px; display:grid; gap:20px; }
.feature-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:8px; }
.feature-item {
  background:var(--surface-2); border-radius:12px; padding:10px 14px;
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--text);
  border: 1px solid var(--border-light);
}
.pros-cons { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pros-box { background:#F0FDF4; border-radius:14px; padding:14px 16px; border:1px solid #BBF7D0; }
.cons-box { background:#FFF5F5; border-radius:14px; padding:14px 16px; border:1px solid #FECACA; }

/* ── TOOL WRAP (prompt UI) ───────────────────────────── */
.jg-wrap {
  background:var(--surface); border:1px solid var(--border-indigo);
  border-radius:28px; padding:28px;
  box-shadow: var(--card-shadow);
}
.jg-banner {
  background: linear-gradient(135deg, var(--surface-2), var(--bg-2));
  border:1px solid var(--border-indigo); border-radius:20px;
  padding:24px; margin-bottom:24px;
  display:flex; align-items:flex-start; gap:16px;
}
.jg-banner-icon {
  width:52px; height:52px; border-radius:16px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  font-size:24px; flex-shrink:0;
  box-shadow: 0 4px 12px var(--accent-glow);
}
.prompt-box {
  border:1.5px solid var(--border); border-radius:18px;
  overflow:hidden; transition:all 0.2s;
}
.prompt-box:focus-within {
  border-color:var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.prompt-textarea {
  width:100%; min-height:120px; padding:18px;
  font-size:15px; line-height:1.75; color:var(--text);
  border:none; outline:none; resize:none;
  font-family:'DM Sans',sans-serif; background:var(--surface);
}
.prompt-textarea::placeholder { color:var(--text-muted); }
.prompt-footer {
  display:flex; align-items:center; justify-content:flex-end;
  padding:12px 16px; border-top:1px solid var(--border-light);
  background:var(--surface-2);
}
.ex-chip {
  padding:5px 14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border); background:var(--surface);
  font-size:12px; font-weight:500; color:var(--text-soft);
  cursor:pointer; transition:all 0.15s; font-family:'DM Sans',sans-serif;
}
.ex-chip:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* ── OUTPUT ──────────────────────────────────────────── */
.output-card {
  background:var(--surface); border:1px solid var(--border-indigo);
  border-radius:18px; overflow:hidden; margin-top:20px;
  box-shadow: var(--card-shadow);
}
.output-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-bottom:1px solid var(--border-light);
  background:var(--surface-2);
}
.copy-btn {
  padding:5px 14px; border-radius:var(--radius-pill);
  border:1.5px solid var(--border); background:var(--surface);
  font-size:12px; font-weight:600; color:var(--text-2);
  cursor:pointer; transition:all 0.15s; font-family:'DM Sans',sans-serif;
}
.copy-btn:hover { border-color:var(--accent); color:var(--accent); }
.copy-btn.ok { border-color:#16A34A; color:#16A34A; }
.output-text {
  font-size:14px; line-height:1.9; color:var(--text-2);
  white-space:pre-wrap; padding:24px; font-family:'DM Sans',sans-serif;
}
.loading-row { padding:24px; display:flex; align-items:center; gap:12px; font-size:14px; color:var(--text-muted); }
.error-text { padding:16px 24px; font-size:13px; color:#EF4444; }
.spinner {
  width:18px; height:18px;
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 0.7s linear infinite; flex-shrink:0;
}

/* ── ADMIN ───────────────────────────────────────────── */
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th {
  background:var(--surface-2); font-family:'Outfit',sans-serif;
  font-size:10px; text-transform:uppercase; letter-spacing:0.1em;
  color:var(--text-muted); padding:12px 14px; text-align:left;
}
.admin-table td {
  padding:13px 14px; border-bottom:1px solid var(--border-light);
  font-size:13px; vertical-align:middle; color:var(--text);
}
.admin-table tr:hover td { background:var(--surface-2); }
.form-input {
  width:100%; border:1.5px solid var(--border); border-radius:12px;
  padding:10px 14px; font-family:'DM Sans',sans-serif; font-size:14px;
  outline:none; transition:all 0.2s; background:var(--input-bg); color:var(--text);
}
.form-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.form-label { font-size:13px; font-weight:600; color:var(--text-2); margin-bottom:6px; display:block; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-full { grid-column:1/-1; }

/* ── MISC SECTIONS ───────────────────────────────────── */
.suite-header { display:flex; align-items:center; gap:12px; margin-bottom:20px; padding-bottom:16px; border-bottom:2px solid var(--border-light); }
.suite-icon { width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.notify-box {
  background:var(--notify-bg); border:1.5px solid var(--notify-border);
  border-radius:24px; padding:40px; text-align:center;
}
.stat-card {
  background:var(--surface); border:1px solid var(--border-indigo);
  border-radius:var(--radius-card); padding:32px; text-align:center;
  transition:all 0.2s;
}
.stat-card:hover { transform:translateY(-3px); box-shadow:var(--card-shadow); }
.stats-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:16px; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
.story-float {
  background:linear-gradient(135deg,var(--tag-bg),#F3F0FF);
  border-radius:28px; padding:40px; text-align:center; font-size:64px;
  animation:float 4s ease-in-out infinite;
  border:1px solid var(--border-indigo);
}
.values-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; }
.value-card {
  background:var(--surface); border:1px solid var(--border-indigo);
  border-radius:var(--radius-card); padding:28px;
  transition:all 0.2s;
}
.value-card:hover { transform:translateY(-3px); box-shadow:var(--card-shadow); }
.contact-card {
  background:linear-gradient(135deg,var(--surface-2),var(--bg-2));
  border:1.5px solid var(--border-indigo);
  border-radius:28px; padding:48px 40px; text-align:center;
  max-width:520px; margin:0 auto; transition:all 0.25s;
}
.contact-card:hover { transform:translateY(-4px); box-shadow:var(--card-shadow-hover); }
.mail-icon-wrap {
  width:76px; height:76px; border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  box-shadow: 0 8px 24px var(--accent-glow);
}

/* ── FOOTER ──────────────────────────────────────────── */
.footer {
  border-top:1px solid var(--border-indigo);
  padding:40px 24px;
  background:var(--footer-bg);
  margin-top:80px; transition:background 0.3s;
}
.footer-inner {
  max-width:1280px; margin:0 auto;
  display:flex; align-items:center;
  justify-content:space-between; flex-wrap:wrap; gap:16px;
}
.footer .logo-text { color:#fff; }
.footer .logo-text span { color:#818CF8; }
.footer-links { display:flex; gap:20px; }
.footer-links a {
  font-size:13px; color:rgba(255,255,255,0.45);
  text-decoration:none; font-weight:500; transition:color 0.15s;
}
.footer-links a:hover { color:#fff; }
.footer p { color:rgba(255,255,255,0.3); }

/* ── LAYOUT ──────────────────────────────────────────── */
.page     { max-width:1280px; margin:0 auto; padding:48px 24px; }
.page-mid { max-width:900px;  margin:0 auto; padding:48px 24px; }
.white-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; }

/* ── UTILITY ─────────────────────────────────────────── */
.flex{display:flex}.items-center{align-items:center}.gap-2{gap:8px}.gap-3{gap:12px}
.flex-wrap{flex-wrap:wrap}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}.mb-8{margin-bottom:32px}.mb-10{margin-bottom:40px}
.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-6{margin-top:24px}.mt-8{margin-top:32px}
.text-center{text-align:center}.text-sm{font-size:13px}.text-xs{font-size:11px}
.text-muted{color:var(--text-muted)}.text-indigo{color:var(--accent)}
.fw-bold{font-weight:700}.section-gap{display:grid;gap:72px}
.back-btn {
  display:inline-flex; align-items:center; gap:8px;
  background:transparent; border:1.5px solid var(--border);
  border-radius:var(--radius-pill); padding:8px 18px;
  font-size:13px; font-weight:600; color:var(--text-muted);
  cursor:pointer; font-family:'DM Sans',sans-serif; transition:all 0.2s; margin-bottom:24px;
}
.back-btn:hover { border-color:var(--accent); color:var(--accent); }
.powered-badge {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(22,163,74,0.08); border:1.5px solid rgba(22,163,74,0.2);
  border-radius:var(--radius-pill); padding:7px 18px; margin-bottom:16px;
}

/* ── ANIMATIONS ──────────────────────────────────────── */
@keyframes fadeUp  { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes fadeIn  { from{opacity:0} to{opacity:1} }
@keyframes float   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes spin    { to{transform:rotate(360deg)} }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── SCROLLBAR ───────────────────────────────────────── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--scrollbar-color); border-radius:999px; }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media(max-width:640px) {
  .form-grid{grid-template-columns:1fr}
  .pros-cons{grid-template-columns:1fr}
  .story-grid{grid-template-columns:1fr}
  .story-float{display:none}
  .hero{padding:64px 20px 56px}
}

/* ── DARK MODE OVERRIDES ─────────────────────────────── */
body.dark .pros-box  { background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.2); }
body.dark .cons-box  { background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.2); }
body.dark .contact-card { background:linear-gradient(135deg,rgba(99,102,241,0.1),rgba(139,92,246,0.1)); }
body.dark .story-float  { background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.12)); }
body.dark .jg-banner    { background:linear-gradient(135deg,rgba(99,102,241,0.08),rgba(139,92,246,0.08)); }
body.dark .tool-logo    { background:linear-gradient(135deg,rgba(99,102,241,0.12),rgba(139,92,246,0.12)); }
body.dark .powered-badge { background:rgba(22,163,74,0.08); border-color:rgba(22,163,74,0.2); }
body.dark input,body.dark textarea,body.dark select {
  background:var(--input-bg)!important; color:var(--text)!important; border-color:var(--border)!important;
}
body.dark .pill-green  { background:rgba(22,163,74,0.15); color:#4ADE80; }
body.dark .pill-amber  { background:rgba(217,119,6,0.15); color:#FCD34D; }
body.dark .pill-purple { background:rgba(147,51,234,0.15); color:#C084FC; }
body.dark .footer      { background:var(--footer-bg); }