/* ==========================================================
   Vibe Easy — Public marketing site
   Builds on app.css's dark/teal design tokens; adds the vibrant,
   animated, parallax/slider treatment specific to public pages.
========================================================== */

.mkt-body{ overflow-x:hidden; }
.text-accent{ color:var(--accent)!important; }

/* ---- Nav ---- */
.mkt-nav{
  background:rgba(12,15,22,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;
  transition:background .25s ease, border-color .25s ease, padding .25s ease;
  padding:14px 0;
}
.mkt-nav.mkt-nav--scrolled{
  background:rgba(12,15,22,.92);
  border-bottom-color:var(--line);
  padding:8px 0;
}
.mkt-nav .nav-link{ color:var(--ink); font-weight:500; opacity:.85; }
.mkt-nav .nav-link:hover{ opacity:1; color:var(--accent); }
.mkt-brand{
  font-family:var(--sans); font-weight:700; font-size:20px; color:var(--ink);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.mkt-brand .dot{
  width:10px; height:10px; border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--amber));
  box-shadow:0 0 12px rgba(91,227,201,.7);
  display:inline-block;
}
.mkt-flash{ margin:88px 16px 0; }

/* ---- Hero ---- */
.mkt-hero{
  position:relative;
  min-height:92vh;
  display:flex; align-items:center;
  padding:140px 0 80px;
  overflow:hidden;
}
.mkt-hero-bg{
  position:absolute; inset:-10% -10% -10% -10%; z-index:0; pointer-events:none;
}
.mkt-blob{
  position:absolute; border-radius:50%; filter:blur(70px); opacity:.45;
}
.mkt-blob--1{ width:520px; height:520px; top:-120px; left:-120px; background:radial-gradient(circle, var(--accent), transparent 70%); }
.mkt-blob--2{ width:460px; height:460px; bottom:-160px; right:-80px; background:radial-gradient(circle, var(--amber), transparent 70%); }
.mkt-blob--3{ width:360px; height:360px; top:35%; right:15%; background:radial-gradient(circle, #7c6cf6, transparent 70%); }

.mkt-hero-content{ position:relative; z-index:2; }
.mkt-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); background:rgba(91,227,201,.1); border:1px solid var(--accent-dim);
  border-radius:999px; padding:6px 14px; margin-bottom:22px;
}
.mkt-hero h1{
  font-family:var(--sans); font-weight:800; line-height:1.05;
  font-size:clamp(2.4rem, 5.5vw, 4.4rem);
  background:linear-gradient(120deg, var(--ink) 40%, var(--accent) 75%, var(--amber) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom:22px;
}
.mkt-hero p.lead{ color:var(--muted); font-size:1.15rem; max-width:560px; margin-bottom:32px; }

.mkt-hero-visual{ position:relative; z-index:2; }
.mkt-hero-card{
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; box-shadow:0 30px 80px -30px rgba(0,0,0,.6);
}

/* ---- Buttons ---- */
.btn-accent{
  background:var(--accent); border-color:var(--accent); color:#0C0F16; font-weight:700;
}
.btn-accent:hover{ background:#4ed1b8; border-color:#4ed1b8; color:#0C0F16; }
.btn-outline-accent{ border-color:var(--accent-dim); color:var(--accent); font-weight:600; }
.btn-outline-accent:hover{ background:var(--accent); border-color:var(--accent); color:#0C0F16; }
.btn-lg-mkt{ padding:14px 30px; font-size:1.05rem; border-radius:12px; }

/* ---- Sections ---- */
.mkt-section{ padding:96px 0; position:relative; }
.mkt-section--alt{ background:linear-gradient(180deg, transparent, rgba(28,34,48,.4), transparent); }
.mkt-kicker{ font-family:var(--mono); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.mkt-h2{ font-family:var(--sans); font-weight:700; font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:16px; }
.mkt-section-lead{ color:var(--muted); max-width:640px; margin-bottom:48px; }

/* ---- Feature / value cards ---- */
.mkt-card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px; height:100%;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mkt-card:hover{ transform:translateY(-6px); border-color:var(--accent-dim); box-shadow:0 20px 50px -25px rgba(91,227,201,.35); }
.mkt-card-icon{
  width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(91,227,201,.18), rgba(242,179,75,.14));
  color:var(--accent); font-size:22px; margin-bottom:18px;
}

/* ---- Plan cards ---- */
.mkt-plan{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px 28px; height:100%; display:flex; flex-direction:column;
  transition:transform .3s ease, border-color .3s ease;
}
.mkt-plan:hover{ transform:translateY(-6px); }
.mkt-plan--featured{ border-color:var(--accent); box-shadow:0 25px 60px -25px rgba(91,227,201,.4); position:relative; }
.mkt-plan--featured::before{
  content:'Most popular'; position:absolute; top:-13px; left:28px;
  background:var(--accent); color:#0C0F16; font-size:11px; font-weight:700;
  padding:4px 12px; border-radius:999px; letter-spacing:.03em;
}
.mkt-plan-price{ font-family:var(--sans); font-weight:800; font-size:2.4rem; margin:8px 0 4px; }
.mkt-plan-price small{ font-size:.9rem; color:var(--muted); font-weight:500; }
.mkt-plan ul{ list-style:none; padding:0; margin:20px 0 28px; flex:1; }
.mkt-plan ul li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; color:var(--muted); font-size:14.5px; }
.mkt-plan ul li i{ color:var(--accent); margin-top:3px; }

/* ---- Swiper (testimonials / hero slider) ---- */
.mkt-swiper{ padding-bottom:46px; }
.mkt-swiper .swiper-slide{ height:auto; }
.mkt-swiper .swiper-pagination-bullet{ background:var(--muted); opacity:.5; }
.mkt-swiper .swiper-pagination-bullet-active{ background:var(--accent); opacity:1; }
.mkt-swiper .swiper-button-next, .mkt-swiper .swiper-button-prev{ color:var(--accent); }

.mkt-testimonial{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; height:100%;
}
.mkt-testimonial .stars{ color:var(--amber); letter-spacing:2px; margin-bottom:14px; }
.mkt-testimonial-person{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.mkt-avatar{
  width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--accent), var(--amber)); color:#0C0F16; font-weight:700;
}

/* ---- FAQ accordion ---- */
.mkt-faq .accordion-item{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius)!important; margin-bottom:12px; overflow:hidden; }
.mkt-faq .accordion-button{ background:var(--panel); color:var(--ink); font-weight:600; }
.mkt-faq .accordion-button:not(.collapsed){ background:var(--panel-2); color:var(--accent); box-shadow:none; }
.mkt-faq .accordion-button::after{ filter:invert(1) brightness(2); }
.mkt-faq .accordion-body{ color:var(--muted); }

/* ---- Team ---- */
.mkt-team-card{ text-align:center; }
.mkt-team-photo{
  width:120px; height:120px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--panel-2), var(--panel)); border:2px solid var(--accent-dim);
  display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:700; color:var(--accent);
}

/* ---- Forms (contact / enquiry) ---- */
.mkt-form-card{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:36px; }

/* ---- Footer ---- */
.mkt-footer{ background:var(--panel); border-top:1px solid var(--line); margin-top:60px; }
.mkt-footer a{ display:block; color:var(--muted); text-decoration:none; font-size:14px; padding:4px 0; }
.mkt-footer a:hover{ color:var(--accent); }
.mkt-footer-heading{ font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); margin-bottom:12px; }

/* ---- Stats strip ---- */
.mkt-stat{ text-align:center; }
.mkt-stat-num{ font-family:var(--sans); font-weight:800; font-size:2.4rem; color:var(--accent); }
.mkt-stat-label{ color:var(--muted); font-size:13.5px; }

@media (max-width:991px){
  .mkt-hero{ padding-top:120px; text-align:center; }
  .mkt-hero p.lead{ margin-left:auto; margin-right:auto; }
}