/* =============================================================
   Viralspace — "Modern Tech Corporate" design system
   Sky-blue gradients · lime accents · navy ink · glassmorphism
   Built on Bootstrap 5.3 ([data-bs-theme] dark mode supported)
   ============================================================= */

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

:root {
  /* Sky */
  --sky-50:#f0f9ff; --sky-100:#e0f2fe; --sky-200:#bae6fd; --sky-300:#7dd3fc;
  --sky-400:#38bdf8; --sky-500:#0ea5e9; --sky-600:#0284c7; --sky-700:#0369a1;
  /* Lime accent */
  --lime:#a3e635; --lime-bright:#bef264; --lime-soft:#ecfccb; --lime-ink:#1a2e05;
  /* Ink / neutrals */
  --navy:#0b1220; --ink:#0f172a; --ink-2:#1e293b; --muted:#64748b; --line:#e7edf3;

  /* Brand role */
  --brand:#0ea5e9;
  --brand-rgb:14,165,233;
  --accent:#a3e635;
  --accent-rgb:163,230,53;

  --topbar-h:66px;
  --sidebar-w:256px;
  --radius:18px;
  --shadow-sm:0 2px 8px rgba(15,23,42,.06);
  --shadow:0 14px 40px rgba(2,32,71,.12);
  --shadow-lg:0 30px 70px rgba(2,32,71,.18);

  /* Surfaces (light) */
  --app-bg:#f6f9fc;
  --card-bg:#ffffff;
  --sidebar-bg:#ffffff;
  --topbar-bg:rgba(255,255,255,.82);
  --hairline:#e8eef4;

  /* Bootstrap overrides */
  --bs-primary:#0ea5e9;
  --bs-primary-rgb:14,165,233;
  --bs-body-bg:#f6f9fc;
  --bs-body-color:#0f172a;
  --bs-body-font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --bs-border-color:#e8eef4;
}

[data-bs-theme="dark"] {
  --brand:#38bdf8; --brand-rgb:56,189,248;
  --app-bg:#070b14;
  --card-bg:#0f1726;
  --sidebar-bg:#0c1320;
  --topbar-bg:rgba(10,16,28,.78);
  --hairline:#1d2840;
  --line:#1d2840;
  --muted:#93a4bd;
  --ink:#e8eef7;
  --bs-primary:#38bdf8;
  --bs-primary-rgb:56,189,248;
  --bs-body-bg:#070b14;
  --bs-body-color:#dbe5f3;
  --bs-border-color:#1d2840;
  --shadow:0 18px 48px rgba(0,0,0,.5);
  --shadow-lg:0 30px 80px rgba(0,0,0,.6);
}

* { scroll-behavior:smooth; }
body{
  background:var(--app-bg);
  color:var(--bs-body-color);
  font-family:var(--bs-body-font-family);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,.fw-bold,.navbar-brand,.page-title,.display-1,.display-2,.display-3,.display-4{
  font-family:'Plus Jakarta Sans',sans-serif;
  letter-spacing:-.02em;
}
a{text-decoration:none;}

/* ---------- Brand mark ---------- */
.brand-dot{
  display:inline-block;width:16px;height:16px;border-radius:6px;
  background:linear-gradient(135deg,var(--sky-400),var(--lime));
  box-shadow:0 0 0 4px rgba(var(--brand-rgb),.14);
}
.brand-logo{color:var(--ink)!important;font-weight:800;}
[data-bs-theme="dark"] .brand-logo{color:#fff!important;}

/* ---------- Buttons ---------- */
.btn{border-radius:12px;font-weight:600;}
.btn-lg{border-radius:14px;}
.btn-primary{
  --bs-btn-bg:var(--brand);--bs-btn-border-color:var(--brand);
  --bs-btn-hover-bg:var(--sky-600);--bs-btn-hover-border-color:var(--sky-600);
  --bs-btn-active-bg:var(--sky-700);
  box-shadow:0 8px 22px rgba(var(--brand-rgb),.32);
}
.btn-accent{
  --bs-btn-color:var(--lime-ink);--bs-btn-bg:var(--lime);--bs-btn-border-color:var(--lime);
  --bs-btn-hover-color:var(--lime-ink);--bs-btn-hover-bg:var(--lime-bright);--bs-btn-hover-border-color:var(--lime-bright);
  color:var(--lime-ink);background:var(--lime);border:1px solid var(--lime);
  font-weight:700;border-radius:12px;
  box-shadow:0 8px 22px rgba(var(--accent-rgb),.4);
}
.btn-accent:hover{background:var(--lime-bright);color:var(--lime-ink);transform:translateY(-1px);}
.btn-outline-primary{--bs-btn-color:var(--brand);--bs-btn-border-color:var(--brand);--bs-btn-hover-bg:var(--brand);--bs-btn-hover-border-color:var(--brand);}
.btn,.btn-icon{transition:transform .18s ease, box-shadow .18s ease, background .18s ease;}
.btn:hover{transform:translateY(-1px);}

.btn-icon{
  border:1px solid var(--hairline);background:var(--card-bg);color:var(--bs-body-color);
  width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
}
.btn-icon:hover{background:rgba(var(--brand-rgb),.10);color:var(--brand);border-color:transparent;}
.btn-icon.d-flex{width:auto;padding:0 .65rem;}

.avatar-sm{
  width:30px;height:30px;border-radius:9px;
  background:linear-gradient(135deg,var(--sky-400),var(--lime));
  color:#07223a;font-weight:800;font-size:.8rem;display:inline-flex;align-items:center;justify-content:center;
}

/* ---------- Cards ---------- */
.card{
  background:var(--card-bg);border:1px solid var(--hairline);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
.lift{transition:transform .25s ease, box-shadow .25s ease;}
.lift:hover{transform:translateY(-6px);box-shadow:var(--shadow);}

/* Stat cards */
.stat-card{position:relative;overflow:hidden;border-radius:16px;}
.stat-card .stat-icon{
  width:48px;height:48px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.35rem;background:rgba(var(--brand-rgb),.12);color:var(--brand);
}
.stat-card .stat-value{font-size:1.7rem;font-weight:800;line-height:1.05;font-family:'Plus Jakarta Sans',sans-serif;}
.stat-card .stat-label{color:var(--muted);font-size:.82rem;}
.stat-card.accent{background:linear-gradient(135deg,var(--lime),var(--lime-bright));border-color:transparent;color:var(--lime-ink);}
.stat-card.accent .stat-icon{background:rgba(0,0,0,.10);color:var(--lime-ink);}
.stat-card.accent .stat-label{color:rgba(26,46,5,.75);}

/* ---------- Glassmorphism ---------- */
.glass{
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border:1px solid rgba(255,255,255,.65);
  box-shadow:var(--shadow);
}
[data-bs-theme="dark"] .glass{
  background:rgba(18,26,42,.6);border-color:rgba(255,255,255,.08);
}

.page-title{font-weight:800;}
.gradient-text{
  background:linear-gradient(110deg,var(--sky-500),var(--sky-400) 40%,var(--lime) 110%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--sky-700);background:var(--sky-100);
  padding:.4rem .8rem;border-radius:999px;
}
[data-bs-theme="dark"] .eyebrow{background:rgba(var(--brand-rgb),.14);color:var(--sky-200);}

/* =============================================================
   APP SHELL (dashboard)
   ============================================================= */
.app-shell .topbar{
  height:var(--topbar-h);background:var(--topbar-bg);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:1030;
}
.app-body{display:flex;min-height:calc(100vh - var(--topbar-h));}
.sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);background:var(--sidebar-bg);
  border-right:1px solid var(--hairline);padding-top:.5rem;
  position:sticky;top:var(--topbar-h);height:calc(100vh - var(--topbar-h));overflow-y:auto;
}
.sidebar .nav-link{
  color:var(--bs-body-color);border-radius:12px;padding:.62rem .85rem;margin:.12rem 0;
  display:flex;align-items:center;font-weight:600;font-size:.94rem;transition:.16s;
}
.sidebar .nav-link:hover{background:rgba(var(--brand-rgb),.10);color:var(--brand);transform:translateX(2px);}
.sidebar .nav-link.active{
  background:linear-gradient(135deg,var(--sky-500),var(--sky-400));color:#fff;
  box-shadow:0 10px 22px rgba(var(--brand-rgb),.32);
}
.soon-badge{background:var(--lime-soft);color:var(--lime-dark,#3f6212);font-weight:700;font-size:.6rem;}
[data-bs-theme="dark"] .soon-badge{background:rgba(var(--accent-rgb),.15);color:var(--lime-bright);}
.content{flex:1 1 auto;min-width:0;}

/* Tables */
.table{--bs-table-bg:transparent;}
.table thead th{font-weight:700;color:var(--muted);border-color:var(--hairline);}
.table td,.table th{border-color:var(--hairline);}

/* Forms */
.form-control,.form-select{
  border-radius:12px;border-color:var(--hairline);background:var(--card-bg);color:var(--bs-body-color);
  padding:.6rem .85rem;
}
.form-control:focus,.form-select:focus{
  border-color:var(--sky-400);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.15);
}
.form-label{color:var(--bs-body-color);}

/* =============================================================
   AUTH
   ============================================================= */
.auth-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(var(--accent-rgb),.20), transparent),
    radial-gradient(1000px 560px at 110% 0%, rgba(56,189,248,.35), transparent),
    linear-gradient(180deg,var(--sky-200),var(--sky-50) 60%, #fff);
}
[data-bs-theme="dark"] .auth-page{
  background:
    radial-gradient(900px 460px at 12% -8%, rgba(var(--accent-rgb),.12), transparent),
    radial-gradient(1000px 560px at 110% 0%, rgba(56,189,248,.18), transparent),
    linear-gradient(180deg,#08101e,#070b14);
}
.auth-wrap{width:100%;max-width:460px;position:relative;z-index:2;}
.auth-card{border-radius:22px;background:var(--card-bg);box-shadow:var(--shadow-lg);border:1px solid var(--hairline);}
.auth-brand{color:var(--ink);}
[data-bs-theme="dark"] .auth-brand{color:#fff;}
.theme-toggle-fixed{position:fixed;top:18px;right:18px;z-index:5;}

.role-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.role-pick input{position:absolute;opacity:0;}
.role-pick label{
  border:1.5px solid var(--hairline);border-radius:14px;padding:16px;cursor:pointer;text-align:center;display:block;transition:.18s;
}
.role-pick label .bi{font-size:1.6rem;color:var(--brand);}
.role-pick input:checked + label{
  border-color:var(--brand);background:rgba(var(--brand-rgb),.08);box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14);transform:translateY(-2px);
}

/* =============================================================
   PUBLIC SITE NAV
   ============================================================= */
.site-nav{
  position:sticky;top:0;z-index:1030;height:var(--topbar-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s ease, box-shadow .4s ease, border-color .4s ease, backdrop-filter .4s ease;
}
/* Scrolled: stay transparent (no solid bar) — just a light frosted blur so
   menu items remain readable over page content. Blends into the design. */
.site-nav.scrolled{
  background:transparent;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom-color:transparent;
  box-shadow:0 6px 20px rgba(2,32,71,.05);
}
.site-nav .nav-link{color:var(--ink);font-weight:600;border-radius:10px;padding:.45rem .8rem;transition:.16s;}
.site-nav .nav-link:hover{color:var(--brand);background:rgba(var(--brand-rgb),.08);}
[data-bs-theme="dark"] .site-nav .nav-link{color:#cfe0f2;}
/* Desktop: center the menu across the whole bar; keep CTAs + theme toggle on the right. */
@media (min-width:992px){
  .site-nav > .container-fluid{position:relative;}
  .site-nav .offcanvas-body{justify-content:flex-end;}
  .site-nav .navbar-nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;}
}

/* =============================================================
   HERO (sky + clouds + floating cards)
   ============================================================= */
.hero-sky{
  position:relative;overflow:hidden;
  /* Pull the hero up behind the transparent sticky nav so it blends on load. */
  margin-top:calc(-1 * var(--topbar-h));
  padding:calc(96px + var(--topbar-h)) 0 120px;
  background:linear-gradient(180deg,#1c9ee6 0%, #38bdf8 30%, #7dd3fc 62%, #e8f6ff 100%);
}
[data-bs-theme="dark"] .hero-sky{
  background:linear-gradient(180deg,#0a1830 0%, #0d2c52 38%, #0a1424 100%);
}
.hero-sky .clouds{position:absolute;left:0;right:0;bottom:-2px;width:100%;pointer-events:none;opacity:.95;}
.hero-sky .cloud-blob{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);filter:blur(30px);}
.hero-sky .cb1{width:280px;height:280px;top:8%;left:-60px;}
.hero-sky .cb2{width:200px;height:200px;top:20%;right:6%;background:rgba(255,255,255,.35);}
.hero-sky .cb3{width:160px;height:160px;bottom:24%;left:30%;background:rgba(255,255,255,.3);}
.hero-content{position:relative;z-index:3;}
.hero-sky h1{color:#06243d;font-weight:800;line-height:1.04;}
[data-bs-theme="dark"] .hero-sky h1{color:#eaf4ff;}
.hero-sky .lead{color:#0b3a5c;}
[data-bs-theme="dark"] .hero-sky .lead{color:#bcd6ef;}
.hero-sky .gradient-text{
  background:linear-gradient(110deg,#06325a,#0a6fb0 40%,#3f6212 120%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
[data-bs-theme="dark"] .hero-sky .gradient-text{
  background:linear-gradient(110deg,#7dd3fc,#bef264);-webkit-background-clip:text;background-clip:text;color:transparent;
}

/* Floating mock UI cards */
.float-stack{position:relative;min-height:420px;}
.float-card{
  position:absolute;border-radius:18px;padding:16px 18px;
  background:rgba(255,255,255,.78);backdrop-filter:blur(16px) saturate(150%);-webkit-backdrop-filter:blur(16px) saturate(150%);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 50px rgba(3,38,71,.22);
  animation:floaty 6s ease-in-out infinite;
}
[data-bs-theme="dark"] .float-card{background:rgba(18,28,46,.72);border-color:rgba(255,255,255,.1);color:#e7f0fb;}
.float-card .fc-label{font-size:.72rem;color:var(--muted);font-weight:600;}
.float-card .fc-value{font-size:1.4rem;font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);}
[data-bs-theme="dark"] .float-card .fc-value{color:#fff;}
.fc-a{top:0;left:4%;width:230px;animation-delay:0s;}
.fc-b{top:120px;right:0;width:210px;animation-delay:1.2s;}
.fc-c{bottom:0;left:18%;width:250px;animation-delay:.6s;}
.fc-chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--lime);color:var(--lime-ink);font-weight:700;font-size:.72rem;padding:.2rem .55rem;border-radius:999px;}
.mini-bars{display:flex;align-items:flex-end;gap:5px;height:46px;margin-top:8px;}
.mini-bars span{flex:1;background:linear-gradient(180deg,var(--sky-400),var(--sky-600));border-radius:4px 4px 0 0;opacity:.9;}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

/* ---- Entrance delays ---- */
.fade-up.delay-1{animation-delay:.12s}
.fade-up.delay-2{animation-delay:.24s}
.fade-up.delay-3{animation-delay:.36s}
.fade-up.delay-4{animation-delay:.48s}
.fade-up.delay-5{animation-delay:.60s}

/* ---- Extra motion keyframes ---- */
@keyframes floatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatB{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}
@keyframes pulseDot{0%,100%{opacity:.45;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@keyframes barGrow{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

/* =============================================================
   HERO SHOWCASE — animated device mockups
   ============================================================= */
.hero-showcase{position:relative;min-height:500px;}
.hero-showcase .mock{
  position:absolute;background:#fff;border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-lg);will-change:transform;
}
[data-bs-theme="dark"] .hero-showcase .mock{background:#0f1726;border-color:rgba(255,255,255,.08);}

/* Desktop / browser window */
.mock-desktop{width:340px;left:0;top:14px;border-radius:16px;overflow:hidden;z-index:1;animation:floatA 7s ease-in-out infinite;}
.mock-desktop .winbar{display:flex;align-items:center;gap:6px;padding:10px 12px;background:linear-gradient(180deg,#f1f5f9,#e2e8f0);}
[data-bs-theme="dark"] .mock-desktop .winbar{background:#0b1322;}
.mock-desktop .dot{width:9px;height:9px;border-radius:50%;}
.mock-desktop .urlpill{margin-left:8px;flex:1;height:18px;border-radius:9px;background:#fff;border:1px solid #e2e8f0;font-size:.58rem;display:flex;align-items:center;padding:0 8px;color:#64748b;}
[data-bs-theme="dark"] .mock-desktop .urlpill{background:#0f1726;border-color:#1d2840;color:#93a4bd;}
.mock-desktop .winbody{padding:14px;}
.ad-banner{border-radius:10px;height:92px;background:linear-gradient(120deg,var(--sky-500),var(--lime));position:relative;overflow:hidden;padding:12px;color:#06243d;}
.ad-banner .tag{font-size:.58rem;font-weight:800;background:rgba(255,255,255,.75);padding:2px 8px;border-radius:999px;display:inline-block;}
.ad-banner .ad-h{font-weight:800;font-size:.95rem;margin-top:8px;}
.perf-bars{display:flex;align-items:flex-end;gap:6px;height:52px;margin-top:12px;}
.perf-bars span{flex:1;border-radius:4px 4px 0 0;background:linear-gradient(180deg,var(--sky-400),var(--sky-600));transform-origin:bottom;animation:barGrow 2.4s ease-in-out infinite;}

/* Tablet */
.mock-tablet{width:228px;left:118px;top:158px;border-radius:16px;padding:8px;background:#0b1220;z-index:2;transform:rotate(-5deg);animation:floatA 8s ease-in-out infinite .3s;}
.mock-tablet .tscreen{border-radius:10px;overflow:hidden;background:#fff;}
[data-bs-theme="dark"] .mock-tablet .tscreen{background:#0f1726;}
.mock-tablet .timg{height:84px;background:linear-gradient(135deg,#8b5cf6,#0ea5e9);}
.mock-tablet .tbody{padding:10px;}

/* Phone */
.mock-phone{width:168px;right:6px;top:92px;border-radius:30px;padding:9px;background:#0b1220;z-index:3;animation:floatB 6s ease-in-out infinite .5s;}
.mock-phone .pscreen{border-radius:22px;overflow:hidden;background:#fff;position:relative;}
[data-bs-theme="dark"] .mock-phone .pscreen{background:#0f1726;}
.mock-phone .pnotch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:46px;height:5px;border-radius:999px;background:rgba(0,0,0,.25);z-index:2;}
.post-head{display:flex;align-items:center;gap:8px;padding:10px 10px 8px;}
.post-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--sky-400),var(--lime));flex:none;}
.post-handle{font-size:.66rem;font-weight:700;line-height:1.1;}
.post-sub{font-size:.55rem;color:var(--muted);}
.post-img{height:118px;background:linear-gradient(135deg,#ec4899,#8b5cf6);position:relative;}
.post-spons{position:absolute;top:6px;right:6px;background:rgba(255,255,255,.85);color:#06243d;font-size:.5rem;font-weight:800;padding:2px 6px;border-radius:999px;}
.post-body{padding:9px 10px 11px;}
.post-cta{display:block;text-align:center;background:var(--lime);color:var(--lime-ink);font-weight:800;font-size:.68rem;border-radius:8px;padding:7px;}

/* Floating glass chips */
.hero-chip{
  position:absolute;display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(255,255,255,.85);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.7);border-radius:999px;padding:.45rem .8rem;
  font-weight:700;font-size:.74rem;color:var(--ink);box-shadow:var(--shadow);will-change:transform;z-index:4;
}
[data-bs-theme="dark"] .hero-chip{background:rgba(18,28,46,.82);color:#fff;border-color:rgba(255,255,255,.1);}
.hero-chip .bi{color:var(--brand);}
.hero-chip .pos{color:#16a34a;font-weight:800;}
.chip-1{top:-6px;right:54px;animation:floatA 5.5s ease-in-out infinite;}
.chip-2{bottom:54px;left:-8px;animation:floatB 6.5s ease-in-out infinite .4s;}
.chip-3{bottom:2px;right:26px;animation:floatA 6s ease-in-out infinite .8s;}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;animation:pulseDot 1.6s ease-in-out infinite;}

/* =============================================================
   LIVE PERFORMANCE SECTION
   ============================================================= */
.perf-card{border-radius:18px;}
.bar-track{height:8px;border-radius:999px;background:rgba(var(--brand-rgb),.14);overflow:hidden;}
.bar-fill{
  height:100%;width:100%;border-radius:999px;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--sky-500),var(--lime));
  transition:transform 1.3s cubic-bezier(.2,.7,.2,1);
}
.reveal.in .bar-fill{transform:scaleX(var(--w,1));}
.metric-pill{font-weight:800;font-family:'Plus Jakarta Sans',sans-serif;}

/* Showcase responsive */
@media (max-width:1199.98px){
  .mock-tablet{display:none;}
  .mock-desktop{width:300px;}
}
@media (max-width:991.98px){
  .hero-showcase{min-height:auto;display:flex;justify-content:center;align-items:flex-start;margin-top:34px;}
  .hero-showcase .mock{position:relative;inset:auto;animation:none;transform:none;}
  .mock-desktop{display:none;}
  .mock-phone{width:210px;}
  .hero-chip{display:none;}
}

/* Trust logos */
.trust-row{filter:grayscale(1);opacity:.7;}
.trust-row .trust-logo{font-weight:800;font-size:1.15rem;color:var(--muted);letter-spacing:-.02em;}

/* Section helpers */
.section{padding:84px 0;}
.section-tight{padding:56px 0;}
.bg-soft{background:linear-gradient(180deg,#fff, var(--sky-50));}
[data-bs-theme="dark"] .bg-soft{background:linear-gradient(180deg,#070b14,#0a1322);}

/* Feature card */
.feature-icon{
  width:54px;height:54px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:#06243d;background:linear-gradient(135deg,var(--sky-300),var(--lime));
}
.feature-card{border-radius:18px;height:100%;}

/* Featured campaign / ad banner */
.promo-band{
  border-radius:22px;overflow:hidden;position:relative;
  background:linear-gradient(120deg,var(--sky-600),var(--sky-400) 55%, var(--lime));
  color:#06243d;
}
.promo-card{
  border-radius:16px;overflow:hidden;background:var(--card-bg);border:1px solid var(--hairline);
}
.promo-card .promo-img{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--sky-100);}
.cpm-pill{
  background:var(--lime);color:var(--lime-ink);font-weight:800;border-radius:999px;padding:.25rem .7rem;font-size:.8rem;
  display:inline-flex;align-items:center;gap:.3rem;
}

/* Testimonials */
.testi-card{border-radius:18px;height:100%;}
.stars{color:#f5b301;}

/* CTA band */
.cta-band{
  border-radius:26px;position:relative;overflow:hidden;color:#06243d;
  background:linear-gradient(125deg,var(--sky-500),var(--sky-300) 50%, var(--lime));
}
.cta-band::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 200px at 90% 10%, rgba(255,255,255,.35), transparent);}

/* Marketplace */
.market-card{border-radius:18px;overflow:hidden;height:100%;}
.market-card .mc-img{aspect-ratio:16/9;width:100%;object-fit:cover;background:var(--sky-100);}
.filter-bar{border-radius:16px;}
.chip-toggle{
  border:1px solid var(--hairline);background:var(--card-bg);color:var(--bs-body-color);
  border-radius:999px;padding:.4rem .9rem;font-weight:600;font-size:.85rem;cursor:pointer;transition:.15s;
}
.chip-toggle:hover{border-color:var(--brand);color:var(--brand);}
.chip-toggle.active{background:var(--brand);border-color:var(--brand);color:#fff;}

/* ---- Featured hero banner ---- */
.featured-hero{
  position:relative;border-radius:22px;overflow:hidden;min-height:280px;
  display:flex;align-items:flex-end;box-shadow:var(--shadow);
}
.featured-hero .fh-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.featured-hero .fh-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(3,18,33,.86) 0%, rgba(3,18,33,.55) 45%, rgba(3,18,33,.15) 100%);
}
.featured-hero .fh-content{position:relative;z-index:2;padding:28px 32px;color:#fff;max-width:640px;}
.fh-tag{
  display:inline-flex;align-items:center;gap:.4rem;background:var(--lime);color:var(--lime-ink);
  font-weight:800;font-size:.74rem;padding:.32rem .7rem;border-radius:999px;margin-bottom:.7rem;
}
.fh-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.9rem;margin:0 0 .35rem;color:#fff;}
.fh-desc{color:rgba(255,255,255,.82);margin-bottom:.8rem;max-width:520px;}
.fh-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;}
.fh-chip{
  display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.16);
  color:#fff;font-weight:600;font-size:.78rem;padding:.3rem .65rem;border-radius:999px;backdrop-filter:blur(6px);
}

/* ---- Marketplace list view ---- */
.market-list{display:flex;flex-direction:column;gap:14px;}
.market-row{
  display:flex;align-items:center;gap:18px;background:var(--card-bg);
  border:1px solid var(--hairline);border-radius:16px;padding:14px 16px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.market-row:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(var(--brand-rgb),.4);}
.mr-thumb{flex:0 0 168px;width:168px;}
.mr-thumb img{width:168px;height:96px;object-fit:cover;border-radius:12px;display:block;background:var(--sky-100);}
.mr-main{flex:1 1 auto;min-width:0;}
.mr-title{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:1.06rem;}
.mr-desc{
  color:var(--muted);font-size:.88rem;margin:.15rem 0 .55rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.mr-meta{display:flex;flex-wrap:wrap;gap:.4rem;}
.meta-chip{
  display:inline-flex;align-items:center;gap:.35rem;background:rgba(var(--brand-rgb),.08);
  color:var(--bs-body-color);font-weight:600;font-size:.76rem;padding:.28rem .6rem;border-radius:999px;
}
.meta-chip .bi{color:var(--brand);}
.mr-side{
  flex:0 0 184px;width:184px;display:flex;flex-direction:column;gap:.55rem;align-items:stretch;
  padding-left:18px;border-left:1px solid var(--hairline);
}
.mr-cpm{text-align:center;line-height:1.05;}
.mr-cpm-val{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:1.5rem;color:var(--sky-600);}
[data-bs-theme="dark"] .mr-cpm-val{color:var(--sky-300);}
.mr-cpm-label{display:block;font-size:.72rem;color:var(--muted);}
.mr-actions{display:flex;flex-direction:column;gap:.4rem;}

@media (max-width:767.98px){
  .featured-hero .fh-overlay{background:linear-gradient(180deg, rgba(3,18,33,.45) 0%, rgba(3,18,33,.85) 100%);}
  .featured-hero .fh-title{font-size:1.45rem;}
  .featured-hero{min-height:320px;align-items:flex-end;}
  .market-row{flex-direction:column;align-items:stretch;gap:12px;}
  .mr-thumb,.mr-thumb img{flex:none;width:100%;height:auto;aspect-ratio:16/9;}
  .mr-side{
    flex:none;width:100%;flex-direction:row;align-items:center;justify-content:space-between;
    padding-left:0;border-left:0;border-top:1px solid var(--hairline);padding-top:12px;
  }
  .mr-cpm{text-align:left;}
  .mr-actions{flex-direction:row;flex:1;justify-content:flex-end;max-width:60%;}
}

/* =============================================================
   ANIMATIONS — scroll reveal & utilities
   ============================================================= */
/* Reveal only hides content once JS has confirmed it can reveal it again (.js-reveal on <html>). */
.js-reveal .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.js-reveal .reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.fade-up{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) both;}

/* ---------- Toast notifications ---------- */
.toast-stack{
  position:fixed;top:calc(var(--topbar-h) + 14px);right:18px;z-index:1090;
  display:flex;flex-direction:column;gap:10px;width:360px;max-width:calc(100% - 36px);pointer-events:none;
}
.vs-toast{
  pointer-events:auto;position:relative;display:flex;align-items:flex-start;gap:11px;
  background:var(--card-bg);border:1px solid var(--hairline);border-left:4px solid var(--brand);
  border-radius:14px;padding:13px 14px;box-shadow:var(--shadow-lg);overflow:hidden;
  animation:toastIn .35s cubic-bezier(.2,.8,.2,1);
}
.vs-toast.hide{animation:toastOut .3s forwards;}
.vs-toast-ic{font-size:1.2rem;line-height:1.2;flex:none;}
.vs-toast-msg{flex:1;font-size:.9rem;font-weight:600;line-height:1.35;color:var(--bs-body-color);}
.vs-toast-close{border:0;background:transparent;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;padding:0 2px;flex:none;}
.vs-toast-close:hover{color:var(--bs-body-color);}
.vs-toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;transform-origin:left;opacity:.55;animation:toastBar 5s linear forwards;}
.vs-toast.paused .vs-toast-bar{animation-play-state:paused;}
.vs-toast-success{border-left-color:#16a34a;} .vs-toast-success .vs-toast-ic{color:#16a34a;} .vs-toast-success .vs-toast-bar{background:#16a34a;}
.vs-toast-danger,.vs-toast-error{border-left-color:#dc2626;} .vs-toast-danger .vs-toast-ic,.vs-toast-error .vs-toast-ic{color:#dc2626;} .vs-toast-danger .vs-toast-bar,.vs-toast-error .vs-toast-bar{background:#dc2626;}
.vs-toast-warning{border-left-color:#d97706;} .vs-toast-warning .vs-toast-ic{color:#d97706;} .vs-toast-warning .vs-toast-bar{background:#d97706;}
.vs-toast-info   {border-left-color:var(--brand);} .vs-toast-info .vs-toast-ic{color:var(--brand);} .vs-toast-info .vs-toast-bar{background:var(--brand);}
@keyframes toastIn{from{opacity:0;transform:translateX(44px)}to{opacity:1;transform:none}}
@keyframes toastOut{to{opacity:0;transform:translateX(44px);max-height:0;margin-top:-10px;padding-top:0;padding-bottom:0}}
@keyframes toastBar{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media (max-width:575.98px){ .toast-stack{right:10px;left:10px;width:auto;max-width:none;top:calc(var(--topbar-h) + 8px);} }

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
.sidebar-backdrop{
  position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(3,18,33,.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:1031;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s ease,visibility .28s ease;
}
.sidebar-backdrop.show{opacity:1;visibility:visible;pointer-events:auto;}
body.nav-open{overflow:hidden;}
@media (max-width:991.98px){
  .sidebar{
    position:fixed;left:0;top:var(--topbar-h);z-index:1032;
    width:min(86vw,var(--sidebar-w));height:calc(100dvh - var(--topbar-h));
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
    box-shadow:var(--shadow-lg);will-change:transform;overscroll-behavior:contain;
  }
  .sidebar.open{transform:translateX(0);}
  .hero-sky{padding:calc(64px + var(--topbar-h)) 0 80px;}
  .float-stack{min-height:auto;margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .float-card{position:relative;inset:auto;width:auto!important;animation:none;}
  .fc-c{grid-column:1 / -1;}
  .section{padding:60px 0;}
}
@media (max-width:575.98px){
  .float-stack{grid-template-columns:1fr;}
  .hero-sky h1{font-size:2.1rem;}
}