/* ============================================================
   yourvibetoday.com — showcase site stylesheet
   Design language deliberately extends the existing mini-app
   cards (same bg/surface/accent palette, same Space Grotesk +
   JetBrains Mono pairing) so the directory feels like the same
   product family as the 600+ apps it's showcasing, not a
   separate marketing skin bolted on top.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@500;700&display=swap');

:root{
  --bg: #0b0714;
  --surface: #150e22;
  --surface-2: #1e1430;
  --surface-3: #271b42;
  --border: #322450;
  --border-soft: #2a1f42;

  --violet: #C77DFF;
  --gold: #FFD166;
  --pink: #FF7DE1;
  --cyan: #4CC9FF;
  --green: #7CFF6B;
  --red: #FF4D4D;

  --text: #f4f2fb;
  --text-dim: #b7aed0;
  --text-mute: #8a80a8;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 18px;
  --radius-sm: 10px;
  --container: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(199,125,255,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 10%, rgba(255,209,102,.10), transparent 55%),
    var(--bg);
  color:var(--text);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
}

.wrap{max-width:var(--container);margin:0 auto;padding:0 24px;}

/* ---------- nav ---------- */
.site-nav{
  position:sticky;top:0;z-index:50;
  background:rgba(11,7,20,.82);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border-soft);
}
.site-nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.2px;}
.brand-mark{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--violet),var(--pink) 55%,var(--gold));
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 4px 14px rgba(199,125,255,.35);
}
.nav-links{display:flex;align-items:center;gap:28px;font-size:14.5px;color:var(--text-dim);}
.nav-links a{transition:color .15s ease;white-space:nowrap;}
.nav-links a:hover{color:var(--text);}
.nav-cta{
  background:var(--gold);color:#140c1c;font-weight:700;font-size:14px;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(255,209,102,.25);
  transition:transform .15s ease;
}
.nav-cta:hover{transform:translateY(-1px);}
.nav-toggle{display:none;background:none;border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:10px;font-size:18px;cursor:pointer;}

@media (max-width:860px){
  .nav-links{display:none;}
  .nav-toggle{display:block;}
}

/* ---------- buttons / chips ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:700;font-size:15px;
  font-family:var(--font-body);cursor:pointer;border:none;transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary{background:linear-gradient(120deg,var(--gold),var(--pink));color:#140c1c;box-shadow:0 10px 30px rgba(255,125,225,.25);}
.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{border-color:var(--violet);}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;border:1px solid var(--border);color:var(--text-dim);
  background:var(--surface-2);transition:all .15s ease;
}
.chip:hover, .chip.active{border-color:var(--violet);color:var(--text);background:var(--surface-3);}
.chip .count{color:var(--text-mute);}

/* ---------- section scaffolding ---------- */
.section{padding:64px 0;}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px;flex-wrap:wrap;}
.eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin:0 0 10px;
}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.12;}
h1{font-size:clamp(34px,5.4vw,58px);font-weight:700;}
h2{font-size:clamp(24px,3.2vw,34px);font-weight:700;}
.section-sub{color:var(--text-dim);font-size:16px;max-width:60ch;margin:10px 0 0;}

/* ---------- hero ---------- */
.hero{padding:64px 0 20px;position:relative;overflow:hidden;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;}
@media (max-width:920px){.hero-grid{grid-template-columns:1fr;}}
.hero h1{margin-bottom:18px;}
.hero h1 .accent{background:linear-gradient(100deg,var(--gold),var(--pink) 60%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-sub{color:var(--text-dim);font-size:18px;max-width:52ch;margin:0 0 30px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px;}
.hero-stats{display:flex;gap:34px;flex-wrap:wrap;}
.hero-stat b{display:block;font-family:var(--font-mono);font-size:26px;color:var(--gold);}
.hero-stat span{font-size:13px;color:var(--text-mute);}

/* card wall — the signature element: real generated share-cards drifting in a loose grid */
.card-wall{
  position:relative;height:460px;border-radius:24px;overflow:hidden;
  border:1px solid var(--border-soft);
  background:var(--surface);
}
.card-wall-track{
  display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:14px;
  position:absolute;inset:0;
  animation:drift 38s linear infinite;
}
.card-wall-track img{width:100%;aspect-ratio:1080/630;object-fit:cover;border-radius:12px;border:1px solid var(--border-soft);}
@keyframes drift{0%{transform:translateY(0);}100%{transform:translateY(-33.333%);}}
.card-wall::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, var(--surface) 0%, transparent 14%, transparent 86%, var(--surface) 100%);
}

/* ---------- app cards (directory grid) ---------- */
.app-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.app-card{
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius);
  overflow:hidden;transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  display:flex;flex-direction:column;
}
.app-card:hover{transform:translateY(-4px);border-color:var(--violet);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.app-card-thumb{aspect-ratio:1080/630;background:var(--surface-3);position:relative;overflow:hidden;}
.app-card-thumb img{width:100%;height:100%;object-fit:cover;}
.app-card-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.app-card-cat{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent,var(--violet));}
.app-card-title{font-family:var(--font-display);font-weight:700;font-size:16.5px;line-height:1.28;}
.app-card-desc{font-size:13.5px;color:var(--text-dim);flex:1;}
.app-card-cta{
  margin-top:6px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-mute);display:flex;align-items:center;justify-content:space-between;
}

.new-badge{
  position:absolute;top:10px;left:10px;background:var(--gold);color:#140c1c;
  font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:4px 9px;border-radius:999px;text-transform:uppercase;
}

/* ---------- category tiles ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;}
.cat-tile{
  padding:24px 22px;border-radius:var(--radius);background:var(--surface-2);border:1px solid var(--border-soft);
  transition:all .18s ease;
}
.cat-tile:hover{border-color:var(--violet);transform:translateY(-3px);}
.cat-tile .cat-count{font-family:var(--font-mono);color:var(--gold);font-size:13px;}
.cat-tile .cat-name{font-family:var(--font-display);font-weight:700;font-size:19px;margin-top:6px;}

/* ---------- search ---------- */
.search-bar{
  display:flex;align-items:center;gap:12px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:6px 6px 6px 20px;
}
.search-bar input{
  flex:1;background:transparent;border:none;color:var(--text);font-size:15px;padding:12px 0;font-family:var(--font-body);
}
.search-bar input:focus{outline:none;}
.search-bar button{border-radius:999px;}

/* ---------- pricing ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:920px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
  background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;padding:32px 28px;
  display:flex;flex-direction:column;gap:18px;position:relative;
}
.price-card.featured{border-color:var(--gold);box-shadow:0 20px 60px rgba(255,209,102,.12);}
.price-card.featured::before{
  content:'MOST POPULAR';position:absolute;top:-13px;left:28px;
  background:var(--gold);color:#140c1c;font-family:var(--font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.08em;padding:5px 12px;border-radius:999px;
}
.price-name{font-family:var(--font-display);font-weight:700;font-size:20px;}
.price-amount{font-family:var(--font-display);font-size:42px;font-weight:700;}
.price-amount span{font-size:15px;color:var(--text-mute);font-weight:500;}
.price-desc{color:var(--text-dim);font-size:14px;}
.price-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14.5px;}
.price-list li{display:flex;gap:10px;align-items:flex-start;}
.price-list li::before{content:'✓';color:var(--green);font-weight:700;flex-shrink:0;}

/* ---------- forms ---------- */
.form-card{background:var(--surface-2);border:1px solid var(--border-soft);border-radius:20px;padding:36px;max-width:520px;}
.field{margin-bottom:18px;}
.field label{display:block;font-size:13px;color:var(--text-dim);margin-bottom:7px;font-weight:600;}
.field input, .field select, .field textarea{
  width:100%;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:13px 14px;color:var(--text);font-size:15px;font-family:var(--font-body);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--violet);}
.hint{font-size:12.5px;color:var(--text-mute);margin-top:6px;}

.key-box{
  font-family:var(--font-mono);background:var(--surface);border:1px dashed var(--violet);
  border-radius:12px;padding:16px 18px;font-size:14px;color:var(--gold);word-break:break-all;
}

/* ---------- code / docs ---------- */
pre{
  background:var(--surface);border:1px solid var(--border-soft);border-radius:14px;
  padding:20px;overflow-x:auto;font-family:var(--font-mono);font-size:13px;color:var(--text);line-height:1.6;
}
code{font-family:var(--font-mono);background:var(--surface-2);padding:2px 6px;border-radius:5px;font-size:.9em;}
pre code{background:none;padding:0;}
.docs-layout{display:grid;grid-template-columns:220px 1fr;gap:44px;}
@media (max-width:820px){.docs-layout{grid-template-columns:1fr;}}
.docs-nav{position:sticky;top:96px;align-self:start;display:flex;flex-direction:column;gap:4px;font-size:14px;}
.docs-nav a{padding:8px 12px;border-radius:8px;color:var(--text-dim);}
.docs-nav a:hover{background:var(--surface-2);color:var(--text);}
.docs-section{margin-bottom:44px;}
.docs-section h3{margin-bottom:12px;}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:14px;}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border-soft);}
th{color:var(--text-mute);font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border-soft);padding:48px 0 32px;margin-top:60px;color:var(--text-mute);font-size:14px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;margin-bottom:32px;}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr;}}
.footer-grid h4{font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin:0 0 14px;}
.footer-grid a{display:block;padding:5px 0;color:var(--text-mute);}
.footer-grid a:hover{color:var(--text);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--border-soft);padding-top:24px;font-size:13px;}

/* ---------- pagination ---------- */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap;}
.pagination a, .pagination span{
  min-width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-mono);font-size:13px;
}
.pagination a:hover{border-color:var(--violet);color:var(--text);}
.pagination .current{background:var(--gold);color:#140c1c;border-color:var(--gold);font-weight:700;}

/* ---------- misc ---------- */
.empty-state{text-align:center;padding:80px 20px;color:var(--text-dim);}
.divider{height:1px;background:var(--border-soft);margin:56px 0;}
.badge-live{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);font-size:12px;color:var(--green);
}
.badge-live::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(124,255,107,.18);}