/*
Theme Name:  Balance Buddy
Theme URI:   https://balancebuddy.app/
Author:      Balance Buddy Team
Author URI:  https://balancebuddy.app/
Description: Official Balance Buddy app landing page theme — aurora backgrounds, bento feature grid, full pricing breakdown.
Version:     1.0.0
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: balancebuddy
Tags:        app-landing, one-page, dark, custom-colors, full-width-template
*/

/* ─────────────────────────────────────────
   Balance Buddy · WordPress Theme Styles
   ───────────────────────────────────────── */

:root {
  --bg:        #04050f;
  --surface:   #0b0d1f;
  --glass:     rgba(255,255,255,0.04);
  --glass-b:   rgba(255,255,255,0.08);
  --border:    rgba(255,255,255,0.07);
  --border-hi: rgba(255,255,255,0.15);
  --purple: #7c3aed; --blue: #2563eb;
  --pink:   #ec4899; --amber: #f59e0b;
  --cyan:   #06b6d4; --green: #10b981;
  --text:   #f1f5f9; --muted: #64748b; --subtle: #1e293b;
  --shadow-card: 0 24px 64px rgba(0,0,0,.55);
  --glow-purple: 0 0 80px rgba(124,58,237,.22);
  --glow-blue:   0 0 80px rgba(37,99,235,.18);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:15px; scroll-behavior:smooth; }
body {
  font-family:'Korolev','Inter',system-ui,sans-serif;
  background:var(--bg); color:var(--text);
  overflow-x:hidden; line-height:1.6;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ── WordPress admin bar offset ── */
.admin-bar nav { top:32px; }
@media screen and (max-width:782px) { .admin-bar nav { top:46px; } }

/* ── Aurora background ── */
.aurora { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.aurora::before,.aurora::after {
  content:''; position:absolute; border-radius:50%; filter:blur(140px); opacity:.17;
  animation:drift 22s ease-in-out infinite alternate;
}
.aurora::before { width:900px; height:700px; top:-220px; right:-200px; background:radial-gradient(ellipse,var(--purple),var(--blue)); }
.aurora::after  { width:700px; height:600px; bottom:-180px; left:-180px; background:radial-gradient(ellipse,var(--pink),var(--purple)); animation-delay:-9s; }
.aurora-mid { position:fixed; width:560px; height:560px; top:38%; left:28%; border-radius:50%; filter:blur(150px); opacity:.09; background:radial-gradient(ellipse,var(--cyan),transparent); animation:drift 30s ease-in-out infinite alternate-reverse; pointer-events:none; z-index:0; }
@keyframes drift {
  0%   { transform:translate(0,0)   scale(1); }
  50%  { transform:translate(70px,-60px) scale(1.1); }
  100% { transform:translate(-40px,40px) scale(.95); }
}

/* ── Nav ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:999;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 6%; height:68px;
  background:rgba(4,5,15,.72); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-size:1.5rem; font-weight:900; letter-spacing:-.5px;
  background:linear-gradient(135deg,var(--amber) 0%,#fff 65%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.nav-links { display:flex; align-items:center; gap:2.2rem; }
.nav-links a { font-size:.9rem; font-weight:600; color:var(--muted); transition:color .25s; }
.nav-links a:hover { color:var(--text); }
.nav-right { display:flex; align-items:center; gap:1.2rem; }
.lang-row { display:flex; gap:2px; background:var(--glass); border:1px solid var(--border); padding:3px; border-radius:30px; }
.lang-btn { background:none; border:none; color:var(--muted); font-size:.72rem; font-weight:700; cursor:pointer; padding:5px 9px; border-radius:20px; transition:all .2s; font-family:inherit; }
.lang-btn:hover { color:var(--text); background:var(--glass-b); }
.lang-btn.active { background:var(--amber); color:#000; }
.btn-nav-dl {
  background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff !important;
  padding:.55rem 1.4rem; border-radius:50px; font-size:.9rem; font-weight:700;
  box-shadow:0 4px 20px rgba(124,58,237,.35); transition:all .3s; white-space:nowrap;
}
.btn-nav-dl:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(124,58,237,.5); }
.menu-toggle { display:none; font-size:1.5rem; cursor:pointer; color:var(--amber); background:none; border:none; font-family:inherit; }

/* ── Hero ── */
.hero {
  position:relative; z-index:1; min-height:100vh;
  display:grid; grid-template-columns:1.15fr .85fr;
  align-items:center; gap:3rem; padding:130px 8% 100px;
}
.hero-eyebrow {
  display:inline-flex; align-items:center; gap:.6rem;
  background:var(--glass); border:1px solid var(--border-hi); border-radius:50px;
  padding:.45rem 1.1rem; font-size:.78rem; font-weight:700; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--amber); margin-bottom:2rem; backdrop-filter:blur(8px);
}
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--amber); animation:pulse-dot 2s infinite; display:inline-block; }
@keyframes pulse-dot { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.3;transform:scale(.5)} }
.hero h1 { font-size:clamp(2.8rem,5.5vw,5.2rem); font-weight:900; line-height:1.05; letter-spacing:-2px; color:var(--text); margin-bottom:1.6rem; }
.grad-text {
  background:linear-gradient(135deg,var(--amber) 0%,var(--pink) 50%,var(--purple) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% auto; animation:grad-shift 6s linear infinite;
}
@keyframes grad-shift { to{background-position:200% center} }
.hero-sub { font-size:1.15rem; color:var(--muted); max-width:540px; line-height:1.75; margin-bottom:2.8rem; }
.hero-cta { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.btn-primary {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 2.2rem; background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff; border-radius:50px; font-weight:700; font-size:1rem; font-family:inherit;
  cursor:pointer; border:none; box-shadow:0 8px 32px rgba(124,58,237,.4); transition:all .3s;
}
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 48px rgba(124,58,237,.55); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:1rem 2rem; background:var(--glass); color:var(--text); border-radius:50px;
  font-weight:600; font-size:1rem; border:1px solid var(--border-hi); backdrop-filter:blur(8px); transition:all .3s;
}
.btn-ghost:hover { background:var(--glass-b); transform:translateY(-2px); }
.hero-stats { display:flex; gap:2.8rem; margin-top:3.5rem; flex-wrap:wrap; }
.stat-num { font-size:2rem; font-weight:900; color:var(--text); letter-spacing:-1px; display:block; }
.stat-label { font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1px; }

/* Hero visual */
.hero-visual { position:relative; display:flex; align-items:center; justify-content:center; }
.phone-wrap { position:relative; z-index:2; }
.phone-wrap img { width:270px; border-radius:44px; border:7px solid rgba(255,255,255,.08); box-shadow:var(--shadow-card),var(--glow-purple); animation:float-phone 7s ease-in-out infinite; }
@keyframes float-phone { 0%,100%{transform:translateY(0) rotate(-1.5deg)} 50%{transform:translateY(-24px) rotate(1.5deg)} }
.hero-chip {
  position:absolute; background:var(--glass); border:1px solid var(--border-hi);
  backdrop-filter:blur(20px); border-radius:16px; padding:.9rem 1.2rem; box-shadow:var(--shadow-card);
}
.chip-1 { top:8%; right:-14%; animation:float-c1 6s ease-in-out infinite; }
.chip-2 { bottom:14%; left:-16%; animation:float-c2 8s ease-in-out infinite; }
@keyframes float-c1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes float-c2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(10px)} }
.chip-label { font-size:.65rem; color:var(--muted); font-weight:700; letter-spacing:1px; text-transform:uppercase; margin-bottom:.25rem; }
.chip-val { font-size:1.3rem; font-weight:900; color:var(--text); }
.chip-val.green { color:var(--green); }
.chip-sub { font-size:.7rem; color:var(--muted); margin-top:.15rem; }
.chip-bar { height:3px; border-radius:2px; background:var(--subtle); margin-top:.6rem; overflow:hidden; }
.chip-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--green),var(--cyan)); width:68%; }

/* ── Ticker ── */
.ticker {
  position:relative; z-index:1; overflow:hidden;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--glass); backdrop-filter:blur(8px); padding:1.1rem 0;
}
.ticker-track {
  display:flex; gap:4rem; white-space:nowrap;
  animation:ticker-run 35s linear infinite; width:max-content;
}
.ticker-track:hover { animation-play-state:paused; }
.ticker-item { display:inline-flex; align-items:center; gap:.7rem; font-size:.82rem; font-weight:700; letter-spacing:.5px; color:var(--muted); text-transform:uppercase; }
.ticker-item i { color:var(--amber); font-size:.88rem; }
@keyframes ticker-run { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── Section helpers ── */
section { position:relative; z-index:1; }
.s-label { display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:800; letter-spacing:2.5px; text-transform:uppercase; color:var(--purple); margin-bottom:1rem; }
.s-label::before { content:''; width:18px; height:2px; background:var(--purple); border-radius:2px; }
.s-title { font-size:clamp(2rem,4vw,3.2rem); font-weight:900; letter-spacing:-1.5px; line-height:1.1; color:var(--text); margin-bottom:1.2rem; }
.s-sub { color:var(--muted); font-size:1.05rem; max-width:560px; line-height:1.75; }

/* ── Bento Features ── */
.features { padding:120px 8%; }
.features-head { margin-bottom:5rem; }
.bento { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:115px; gap:1.1rem; }
.bc {
  background:var(--glass); border:1px solid var(--border); border-radius:28px; padding:2rem;
  transition:all .4s cubic-bezier(.175,.885,.32,1.275); overflow:hidden; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
}
.bc::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(135deg,transparent 55%,rgba(124,58,237,.06)); opacity:0; transition:opacity .4s; }
.bc:hover { border-color:var(--border-hi); transform:translateY(-5px); box-shadow:var(--shadow-card); }
.bc:hover::after { opacity:1; }
.bc-icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; font-size:1.3rem; flex-shrink:0; }
.bc h3 { font-size:1.05rem; font-weight:800; color:var(--text); margin-bottom:.4rem; letter-spacing:-.3px; }
.bc p  { font-size:.84rem; color:var(--muted); line-height:1.5; }
.ic-purple { background:linear-gradient(135deg,#4c1d95,var(--purple)); box-shadow:0 6px 20px rgba(124,58,237,.3); }
.ic-blue   { background:linear-gradient(135deg,#1e3a8a,var(--blue));   box-shadow:0 6px 20px rgba(37,99,235,.3);  }
.ic-pink   { background:linear-gradient(135deg,#831843,var(--pink));   box-shadow:0 6px 20px rgba(236,72,153,.3);  }
.ic-amber  { background:linear-gradient(135deg,#78350f,var(--amber));  box-shadow:0 6px 20px rgba(245,158,11,.3);  }
.ic-cyan   { background:linear-gradient(135deg,#164e63,var(--cyan));   box-shadow:0 6px 20px rgba(6,182,212,.3);   }
.ic-green  { background:linear-gradient(135deg,#064e3b,var(--green));  box-shadow:0 6px 20px rgba(16,185,129,.3);  }
.b1  { grid-column:span 5; grid-row:span 3; background:linear-gradient(145deg,var(--surface),#150d3a); border-color:rgba(124,58,237,.18); }
.b2  { grid-column:span 4; grid-row:span 2; }
.b3  { grid-column:span 3; grid-row:span 2; }
.b4  { grid-column:span 4; grid-row:span 2; }
.b5  { grid-column:span 3; grid-row:span 2; }
.b6  { grid-column:span 5; grid-row:span 3; background:linear-gradient(145deg,var(--surface),#0b1f38); border-color:rgba(6,182,212,.14); }
.b7  { grid-column:span 4; grid-row:span 2; }
.b8  { grid-column:span 3; grid-row:span 2; }
.b9  { grid-column:span 4; grid-row:span 2; }
.b10 { grid-column:span 3; grid-row:span 2; }
.b11 { grid-column:span 5; grid-row:span 2; }
.b12 { grid-column:span 7; grid-row:span 2; }
.bento-bg-icon { position:absolute; top:10px; right:16px; font-size:7rem; opacity:.07; pointer-events:none; color:var(--text); line-height:1; }

/* ── Pricing ── */
.pricing { padding:120px 8%; background:linear-gradient(180deg,transparent,var(--surface) 20%,var(--surface) 80%,transparent); }
.pricing-head { text-align:center; margin-bottom:5rem; }
.pricing-head .s-label { justify-content:center; }
.pricing-head .s-label::before { display:none; }
.pricing-head .s-sub { margin-left:auto; margin-right:auto; }
.pricing-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; align-items:start; }
.plan { border-radius:28px; padding:2.4rem 1.9rem; border:1px solid var(--border); background:var(--glass); position:relative; transition:all .4s; display:flex; flex-direction:column; }
.plan:hover { transform:translateY(-7px); border-color:var(--border-hi); box-shadow:var(--shadow-card); }
.plan.featured { background:linear-gradient(145deg,rgba(124,58,237,.13),rgba(37,99,235,.06)); border-color:rgba(124,58,237,.4); box-shadow:var(--glow-purple); }
.plan.elite    { background:linear-gradient(145deg,rgba(236,72,153,.09),rgba(124,58,237,.07)); border-color:rgba(236,72,153,.3); }
.plan-badge { position:absolute; top:-14px; left:50%; transform:translateX(-50%); font-size:.68rem; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; padding:.4rem 1.2rem; border-radius:50px; white-space:nowrap; }
.badge-pop { background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; box-shadow:0 6px 20px rgba(124,58,237,.4); }
.badge-pow { background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; box-shadow:0 6px 20px rgba(236,72,153,.4); }
.plan-name { font-size:.72rem; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--muted); margin-bottom:.8rem; }
.plan-price { font-size:3.2rem; font-weight:900; letter-spacing:-2px; color:var(--text); line-height:1; margin-bottom:.3rem; }
.plan-price sup { font-size:1.5rem; letter-spacing:0; vertical-align:super; }
.plan-price.muted { color:var(--muted); }
.plan-term { font-size:.75rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:2rem; }
.plan-hr { width:100%; height:1px; background:var(--border); margin-bottom:2rem; }
.group-label { font-size:.65rem; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--purple); margin:1.1rem 0 .6rem; opacity:.8; }
.plan-feats { flex:1; margin-bottom:2.2rem; }
.plan-feats li { display:flex; align-items:flex-start; gap:.65rem; font-size:.86rem; color:var(--text); margin-bottom:.72rem; line-height:1.4; }
.fi { flex-shrink:0; margin-top:2px; font-size:.82rem; }
.fi-y { color:var(--green); }
.fi-n { color:rgba(255,255,255,.18); }
.plan-btn { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem; border-radius:50px; font-weight:700; font-size:.92rem; font-family:inherit; cursor:pointer; transition:all .3s; border:none; width:100%; text-align:center; }
.pb-solid { background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; box-shadow:0 8px 24px rgba(124,58,237,.35); }
.pb-solid:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(124,58,237,.5); }
.pb-ghost { background:transparent; color:var(--text); border:1.5px solid var(--border-hi); }
.pb-ghost:hover { background:var(--glass-b); transform:translateY(-2px); }
.pb-elite { background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff; box-shadow:0 8px 24px rgba(236,72,153,.3); }
.pb-elite:hover { transform:translateY(-2px); box-shadow:0 14px 36px rgba(236,72,153,.45); }

/* ── Download CTA ── */
.download-cta { padding:140px 8% 80px; text-align:center; position:relative; }
.download-glow { position:absolute; width:700px; height:400px; background:radial-gradient(ellipse,rgba(124,58,237,.18),transparent 70%); top:50%; left:50%; transform:translate(-50%,-50%); pointer-events:none; }
.download-cta h2 { font-size:clamp(2.2rem,4.5vw,4rem); font-weight:900; letter-spacing:-2px; line-height:1.1; color:var(--text); margin-bottom:1.2rem; }
.download-cta p { font-size:1.15rem; color:var(--muted); margin-bottom:3rem; max-width:500px; margin-left:auto; margin-right:auto; }
.dl-btns { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; }

/* ── Footer ── */
.footer-bar { padding:2rem 8%; border-top:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.footer-logo { font-size:1.1rem; font-weight:900; background:linear-gradient(135deg,var(--amber),#fff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.footer-copy { font-size:.82rem; color:var(--muted); }
.footer-links { display:flex; gap:1.5rem; }
.footer-links a { font-size:.82rem; color:var(--muted); transition:color .2s; }
.footer-links a:hover { color:var(--text); }

/* ── Reveal animation ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── Responsive ── */
@media(max-width:1280px){
  .bento { grid-template-columns:repeat(6,1fr); }
  .b1,.b6,.b11,.b12 { grid-column:span 6; grid-row:span 2; }
  .b2,.b3,.b4,.b5,.b7,.b8,.b9,.b10 { grid-column:span 3; grid-row:span 2; }
  .pricing-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:992px){
  .hero { grid-template-columns:1fr; text-align:center; padding-top:130px; }
  .hero-sub { margin-left:auto; margin-right:auto; }
  .hero-cta,.hero-stats { justify-content:center; }
  .hero-visual { display:none; }
  .nav-links,.lang-row { display:none; }
  .menu-toggle { display:block; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:rgba(4,5,15,.97); backdrop-filter:blur(20px); padding:2rem; gap:1.5rem; border-bottom:1px solid var(--border); }
}
@media(max-width:768px){
  .bento { grid-template-columns:1fr; grid-auto-rows:auto; }
  .b1,.b2,.b3,.b4,.b5,.b6,.b7,.b8,.b9,.b10,.b11,.b12 { grid-column:span 1; grid-row:span 1; }
  .bc { min-height:170px; padding:1.6rem; }
  .pricing-grid { grid-template-columns:1fr; }
  .plan { max-width:440px; margin:0 auto; width:100%; }
  .footer-bar { flex-direction:column; text-align:center; }
}