/* Local Social Pro — brand styles */
:root {
  --voltage:#4B3DF0; --voltage-dark:#3B2ECC; --lilac:#A99BFF; --midnight:#0F0D1F;
  --paper:#FBFAF7; --ghost:#F7F6FD; --ghost-border:#E9E7F6; --ink:#14161C;
  --gray:#5A5F6B; --gray-light:#8A8F9C; --muted:#9A9FAB; --hairline:#E7E9F0;
  --card-border:#EFEDE6; --input-border:#E0DDD4; --divider:#F3F1EA;
  --font-display:'Plus Jakarta Sans',sans-serif; --font-body:'Instrument Sans',sans-serif;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); font-family:var(--font-body); color:var(--ink); overscroll-behavior-y:none; }
a { color:var(--voltage); text-decoration:none; } a:hover { color:var(--voltage-dark); }
input::placeholder, textarea::placeholder { color:var(--muted); }
img { max-width:100%; }

/* ---- buttons ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; cursor:pointer;
  font:600 14px var(--font-display); border-radius:10px; padding:10px 18px; transition:background .15s ease, border-color .15s ease; }
.btn-primary { background:var(--voltage); color:#fff; box-shadow:0 4px 14px rgba(75,61,240,.25); }
.btn-primary:hover { background:var(--voltage-dark); }
.btn-lg { font:700 15px var(--font-display); border-radius:12px; padding:14px 32px; box-shadow:0 6px 20px rgba(75,61,240,.3); }
.btn-outline { background:#fff; border:1.5px solid var(--input-border); color:var(--gray); }
.btn-outline:hover { border-color:var(--voltage); color:var(--voltage); }
.btn-ghost { background:var(--ghost); color:var(--voltage-dark); }
.btn-ghost:hover { background:#EEECFC; }
.btn-dark { background:var(--midnight); color:#fff; } .btn-dark:hover { background:#241F45; }

/* ---- nav ---- */
.nav { position:sticky; top:0; z-index:50; background:rgba(251,250,247,.94); backdrop-filter:blur(12px); border-bottom:1px solid var(--card-border); }
.nav-inner { max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:15px 32px; }
.nav-brand { display:flex; align-items:center; gap:9px; font:800 18px var(--font-display); letter-spacing:-.5px; color:var(--ink); }
.nav-brand em { font-style:normal; color:var(--voltage); }
.nav-links { display:flex; align-items:center; gap:22px; }
.nav-links > a { font:500 14px var(--font-body); color:var(--gray); }
.nav-phone { display:inline-flex; align-items:center; gap:7px; font:700 14px var(--font-display); color:var(--ink); }

/* mega menu */
.nav-ind { position:relative; }
.nav-ind > a { font:500 14px var(--font-body); color:var(--gray); display:inline-flex; align-items:center; gap:5px; padding:10px 0; }
.nav-ind:hover > a { color:var(--voltage); font-weight:700; }
.mega { position:absolute; top:100%; left:50%; transform:translateX(-50%); display:none; background:#fff;
  border:1px solid var(--card-border); border-radius:16px; box-shadow:0 24px 60px rgba(15,13,31,.16); padding:18px; z-index:60; }
.mega::before { content:""; position:absolute; left:0; right:0; top:-18px; height:18px; }
.nav-ind:hover .mega, .mega:hover { display:block; }
.mega-cols { display:flex; gap:8px; }
.mega-col { display:flex; flex-direction:column; gap:2px; min-width:200px; }
.mega-col h5 { font:700 11px var(--font-display); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); padding:6px 10px 8px; margin:0; }
.mega-col a { font:500 13px var(--font-body); color:var(--gray); padding:5px 10px; border-radius:7px; display:block; }
.mega-col a:hover { background:var(--ghost); color:var(--voltage-dark); font-weight:700; }
.mega-all { display:block; text-align:center; font:600 13px var(--font-body); color:var(--voltage); border-top:1px solid var(--divider); margin-top:12px; padding-top:12px; }

/* ---- marketing sections ---- */
.wrap { max-width:1180px; margin:0 auto; padding:0 32px; }
.section-label { font:700 13px var(--font-display); color:var(--voltage); letter-spacing:2px; text-transform:uppercase; }
h1.display { font:800 46px/1.1 var(--font-display); letter-spacing:-1.8px; margin:0; text-wrap:balance; }
h2.display { font:800 36px/1.15 var(--font-display); letter-spacing:-1.2px; margin:0; }
.lede { font:400 18px/1.6 var(--font-body); color:var(--gray); }
.card { background:#fff; border:1px solid var(--card-border); border-radius:18px; }
.chip { background:var(--ghost); border:1px solid var(--ghost-border); color:var(--voltage-dark); font:600 13px var(--font-body); border-radius:999px; padding:9px 18px; }
.dark-panel { background:var(--midnight); border-radius:26px; color:#fff; }
.cta-panel { background:linear-gradient(135deg,var(--voltage),var(--voltage-dark)); border-radius:26px; color:#fff; text-align:center; }
.footer { background:var(--midnight); color:#fff; }
.footer a { color:#C9C4E8; } .footer a:hover { color:#fff; }

/* ---- forms ---- */
.field label { display:block; font:600 12.5px var(--font-body); color:var(--gray); margin-bottom:6px; }
.field input, .field select, .field textarea { width:100%; border:1.5px solid var(--input-border); border-radius:11px;
  padding:12px 15px; font:500 14px var(--font-body); background:#fff; color:var(--ink); outline:none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--voltage); }
.note { background:var(--ghost); border:1px solid var(--ghost-border); border-radius:11px; padding:12px 15px; font:500 12.5px/1.6 var(--font-body); color:var(--voltage-dark); }

/* ---- portal shell ---- */
.portal { display:grid; grid-template-columns:236px 1fr; min-height:100vh; }
.sidebar { background:#fff; border-right:1px solid var(--card-border); padding:20px 14px; display:flex; flex-direction:column; gap:4px; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar .brand { display:flex; align-items:center; gap:8px; font:800 15px var(--font-display); padding:6px 10px 18px; color:var(--ink); }
.sidebar .brand em { font-style:normal; color:var(--voltage); }
.sidebar h6 { font:700 10.5px var(--font-display); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:14px 10px 6px; }
.side-link { display:flex; align-items:center; gap:10px; font:600 13.5px var(--font-body); color:var(--gray); border-radius:10px; padding:10px 12px; }
.side-link:hover { background:var(--ghost); color:var(--voltage-dark); }
.side-link.active { background:var(--voltage); color:#fff; }
.side-link.active:hover { background:var(--voltage-dark); color:#fff; }
.main { padding:0; }
.topbar { background:#fff; border-bottom:1px solid var(--card-border); padding:18px 32px; display:flex; align-items:center; justify-content:space-between; }
.topbar h1 { font:800 20px var(--font-display); letter-spacing:-.5px; margin:0; }
.content { padding:28px 32px; }

/* ---- reel cards / video grid ---- */
.reel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; }
.reel-thumb { aspect-ratio:9/12; border-radius:12px; background:linear-gradient(160deg,#241F45,#17132E);
  display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; }
.reel-play { width:44px; height:44px; border-radius:50%; background:var(--lilac); display:flex; align-items:center; justify-content:center; }
.reel-len { position:absolute; bottom:10px; right:10px; background:rgba(255,255,255,.14); color:#fff; font:600 11px var(--font-body); border-radius:5px; padding:2px 7px; }
.reel-actions { display:flex; flex-wrap:wrap; gap:6px; }
.reel-actions .btn { flex:1; min-width:58px; white-space:nowrap; font:600 11.5px var(--font-body); border-radius:8px; padding:7px 4px; }
.badge { display:inline-flex; align-items:center; font:700 10px var(--font-body); letter-spacing:.5px; text-transform:uppercase; border-radius:999px; padding:3px 10px; }
.badge-green { background:#DCF5EC; color:#0E6B4F; }
.badge-ghost { background:var(--ghost); color:var(--voltage-dark); }

/* ---- calendar ---- */
.cal { background:#fff; border:1px solid var(--card-border); border-radius:18px; }
.cal-head { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--divider); }
.cal-head div { font:700 11px var(--font-display); letter-spacing:1px; text-transform:uppercase; color:var(--muted); padding:12px 8px; text-align:center; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); }
.cal-day { border-right:1px solid var(--divider); border-bottom:1px solid var(--divider); min-height:96px; padding:8px; position:relative; }
.cal-chip { background:var(--midnight); color:var(--lilac); border-radius:7px; padding:6px 8px; cursor:grab; font:700 10.5px var(--font-body); display:flex; align-items:center; gap:6px; }
.cal-pop { position:absolute; left:50%; bottom:calc(100% - 24px); transform:translateX(-50%); z-index:40; width:150px;
  background:var(--midnight); border-radius:14px; padding:8px; box-shadow:0 18px 44px rgba(15,13,31,.4); pointer-events:none; display:none; }
.cal-day:hover .cal-pop { display:block; }

/* ---- modal ---- */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,13,31,.55); z-index:100; display:none; align-items:center; justify-content:center; padding:24px; }
.modal-backdrop.open { display:flex; }
.modal { background:#fff; border-radius:20px; max-width:560px; width:100%; max-height:90vh; overflow-y:auto; padding:28px; }
.modal h3 { font:800 19px var(--font-display); margin:0 0 6px; }

/* mini scheduler calendar */
.mini-cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.mini-cal button { border:none; background:transparent; font:500 13px var(--font-body); color:var(--ink); border-radius:8px; padding:8px 0; cursor:pointer; }
.mini-cal button:hover { background:var(--ghost); }
.mini-cal button.sel { background:var(--voltage); color:#fff; font-weight:700; }
.mini-cal button:disabled { color:#C4C0B4; cursor:default; }

/* onboarding steps */
.steps { display:flex; align-items:center; }
.step { flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.step-dot { width:34px; height:34px; border-radius:50%; border:2px solid var(--input-border); background:#F1EFE8; color:var(--muted);
  display:flex; align-items:center; justify-content:center; font:700 13px var(--font-display); cursor:pointer; }
.step.current .step-dot { border-color:var(--midnight); background:var(--midnight); color:#fff; }
.step.done .step-dot { border-color:#3D9970; background:#3D9970; color:#fff; }
.step span { font:600 10.5px var(--font-body); color:var(--muted); }
.step.current span { color:var(--ink); } .step.done span { color:#3D9970; }

/* dropdown w/ search */
.dd { position:relative; }
.dd-toggle { border:1.5px solid var(--input-border); border-radius:12px; padding:14px 16px; background:#fff;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer; font:600 15px var(--font-body); }
.dd-menu { display:none; border:1.5px solid var(--input-border); border-radius:12px; background:#fff; margin-top:8px;
  box-shadow:0 16px 40px rgba(15,13,31,.12); overflow:hidden; position:absolute; left:0; right:0; z-index:40; }
.dd.open .dd-menu { display:block; }
.dd-search { display:flex; align-items:center; gap:9px; padding:11px 14px; border-bottom:1px solid var(--divider); background:var(--paper); }
.dd-search input { flex:1; border:none; outline:none; background:transparent; font:500 14px var(--font-body); }
.dd-list { max-height:300px; overflow-y:auto; }
.dd-list h6 { font:700 11px var(--font-display); letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); padding:12px 16px 6px; margin:0; background:var(--paper); }
.dd-item { padding:11px 16px; font:500 14px var(--font-body); cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.dd-item:hover { background:var(--ghost); }
.dd-item.sel { color:var(--voltage); font-weight:700; }

@media (max-width:900px) {
  .portal { grid-template-columns:1fr; } .sidebar { position:static; height:auto; }
  .nav-links { gap:14px; } .mega-cols { flex-wrap:wrap; }
  h1.display { font-size:34px; }
}