/* Brand palette extracted from your image:
   primary: #C96925 (vibrant orange)
   accent:  #6C3213 (deep burnt orange)
   dark:    #090404 (near-black)
   cocoa:   #361206 (rich cocoa)
*/
:root{
  --brand-primary:#C96925;
  --brand-accent:#6C3213;
  --brand-dark:#090404;
  --brand-cocoa:#361206;

  --text:#ffffff;
  --muted:rgba(255,255,255,.78);
  --surface:rgba(255,255,255,.04);
  --border:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background:var(--brand-dark);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.container{max-width:1160px;margin-inline:auto;padding:0 1.25rem}
.section{padding:4.5rem 0}
.section__head{margin-bottom:1.25rem}
.section__head h2{margin:0 0 .25rem;font-size:2rem;font-weight:800}
.section__head p{margin:0;color:var(--muted)}

/* HERO */
.hero{position:relative;padding:3.5rem 0 2rem;overflow:hidden}
.hero__bg{
  position:absolute;inset:0;z-index:-1;opacity:.12;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-cocoa),#000);
}
.hero__grid{display:grid;gap:2rem;align-items:center;grid-template-columns:1.2fr 1fr}
@media (max-width: 900px){.hero__grid{grid-template-columns:1fr}}
.hero__copy h1{font-size:2.6rem;line-height:1.1;margin:1rem 0 .5rem;font-weight:900}
.hero__copy p{color:var(--muted);font-size:1.1rem;max-width:42rem}
.pill{
  display:inline-flex;gap:.5rem;align-items:center;
  background:rgba(255,255,255,.08);
  padding:.35rem .75rem;border-radius:999px;font-size:.9rem
}
.pill .dot{width:.45rem;height:.45rem;border-radius:50%;background:var(--brand-primary)}

.hero__image img{width:100%;display:block;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45)}

.actions{display:flex;gap:.75rem;margin-top:1.25rem;flex-wrap:wrap}

/* Buttons */
.btn{
  --bg:transparent; --fg:var(--text);
  display:inline-block; text-decoration:none; padding:.9rem 1.25rem;
  border-radius:14px; border:1px solid var(--border); color:var(--fg);
  background:var(--bg); font-weight:700; text-align:center; transition:.2s ease;
}
.btn--primary{--bg:var(--brand-primary);border-color:transparent;box-shadow:0 12px 24px rgba(54,18,6,.35)}
.btn--primary:hover{filter:brightness(1.1)}
.btn--ghost:hover{background:rgba(255,255,255,.08)}
.btn--soft{background:var(--surface)}
.btn--block{display:block;width:100%}

/* Cards & grids */
.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:1rem;box-shadow:0 18px 36px rgba(0,0,0,.18)}
.card img{width:100%;border-radius:14px;margin-bottom:.75rem}
.card h3{margin:.25rem 0 .35rem;font-size:1.15rem}
.card p{margin:0;color:var(--muted)}

.grid{display:grid;gap:1rem}
.grid--4{grid-template-columns:repeat(4,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--2{grid-template-columns:repeat(2,1fr)}
@media (max-width: 1000px){.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 760px){.grid--3,.grid--2,.grid--4{grid-template-columns:1fr}}

.card--promo,
.card--promo *{box-sizing:border-box}
.card--promo{display:grid;grid-template-columns:2fr 1fr;gap:1rem;padding:1.25rem;border-radius:20px;background:rgba(255,255,255,.05);border:1px solid var(--border)}
@media (max-width: 760px){.card--promo{grid-template-columns:1fr}}
.promo__text h2{margin:.25rem 0;font-size:1.6rem}
.promo__text p{margin:0;color:var(--muted)}
.promo__cta{display:flex;align-items:center;justify-content:flex-end}
@media (max-width: 760px){.promo__cta{justify-content:flex-start}}

.brand{color:var(--brand-primary)}

.plan{background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:20px;padding:1rem;box-shadow:0 16px 30px rgba(0,0,0,.18)}
.plan--featured{border-color:color-mix(in oklab, var(--brand-primary) 60%, transparent);background:linear-gradient(180deg, rgba(108,50,19,.12), transparent)}
.plan img{width:100%;border-radius:14px;margin-bottom:.75rem}
.plan h3{margin:.25rem 0 .5rem}
.plan ul{margin:.25rem 0 .5rem 1.15rem;color:var(--muted)}
.plan__earn{margin:.5rem 0 .75rem}
.plan__badge{
  position:absolute;transform:translateY(-12px);right:1rem;
  background:color-mix(in oklab,var(--brand-primary) 25%, transparent);
  color:var(--brand-primary);padding:.35rem .6rem;border-radius:999px;
  font-size:.72rem;font-weight:800;border:1px solid color-mix(in oklab,var(--brand-primary) 60%, transparent)
}

.h2{font-size:1.8rem;margin:.25rem 0 .5rem}

.img-rounded{border-radius:22px;box-shadow:0 28px 70px rgba(0,0,0,.4)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.8rem}
.chip{background:rgba(255,255,255,.06);border:1px solid var(--border);padding:.5rem .7rem;border-radius:999px}

.center{text-align:center}

/* Testimonials */
.testimonial{
  max-width:760px;margin:1rem auto 0;padding:1.25rem 1.5rem;
  background:var(--surface);border:1px solid var(--border);border-radius:22px;text-align:center
}
.testimonial__quote{font-size:1.25rem;line-height:1.6;margin:.25rem 0}
.testimonial__meta{color:var(--muted);margin:.25rem 0 .75rem}
.dots{display:flex;gap:.35rem;justify-content:center}
.dots button{width:22px;height:6px;border-radius:999px;border:0;background:rgba(255,255,255,.25);cursor:pointer;transition:.2s}
.dots button.is-active{background:var(--brand-primary)}

.faq{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1rem;margin:.5rem 0}
.faq summary{cursor:pointer;font-weight:800}
.faq p{color:var(--muted);margin:.4rem 0 .2rem}

.cta{position:relative;padding:2.5rem 0;background:linear-gradient(180deg, color-mix(in oklab,var(--brand-accent) 45%, transparent), transparent)}
.cta__box{
  text-align:center;background:rgba(255,255,255,.05);border:1px solid var(--border);
  border-radius:20px;padding:1.75rem
}
.cta__box h3{margin:.25rem 0 .25rem;font-size:1.8rem}
.cta__box p{color:var(--muted);margin:.25rem 0 .75rem}

.footer{border-top:1px solid var(--border);padding:1.25rem;text-align:center;color:rgba(255,255,255,.6)}

/* Base: responsive by default */
.media-img{
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile: limit height so it doesn't dominate the screen */
@media (max-width: 760px){
  .grid--2{ grid-template-columns: 1fr; }       /* stack columns (already in your CSS, but safe) */
  .media-img{
    max-height: 240px;       /* tweak to taste: 200–300px */
    aspect-ratio: 16 / 10;   /* keeps a nice rectangle */
    object-fit: cover;       /* crops edges instead of shrinking awkwardly */
    border-radius: 16px;     /* optional: slightly smaller corners on mobile */
  }
}


/* Stats row */
.stats{
  display:grid;gap:.75rem;margin:1rem 0 1.5rem;
  grid-template-columns:repeat(3,1fr);
}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
.stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:1rem 1.25rem;
  text-align:center;
}
.stat__num{
  font-size:1.6rem;font-weight:900;line-height:1;
  color:var(--brand-primary);
}
.stat__label{color:var(--muted);margin-top:.35rem}

/* Reasons grid */
.reasons .reason-card{
  position:relative;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:20px;
  padding:1rem;
  box-shadow:0 18px 36px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.reasons .reason-card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 48px rgba(0,0,0,.22);
}
.reasons .reason-card img{
  width:100%;display:block;border-radius:14px;margin-bottom:.75rem
}
.reasons .reason-card h3{margin:.25rem 0 .35rem;font-size:1.15rem}
.reasons .reason-card p{margin:0 0 .5rem;color:var(--muted)}

/* Tick list */
.ticks{list-style:none;padding-left:0;margin:.25rem 0 0}
.ticks li{
  position:relative;padding-left:1.4rem;margin:.35rem 0;color:var(--muted)
}
.ticks li::before{
  content:\"\";position:absolute;left:0;top:.35rem;width:.9rem;height:.9rem;border-radius:50%;
  background:color-mix(in oklab, var(--brand-primary) 85%, white 15%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--brand-primary) 20%, transparent);
}

/* Responsive */
@media (max-width:1000px){ .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .grid--3{grid-template-columns:1fr} }

/* Make Earning Potential image full and uncropped on mobile */
@media (max-width: 760px){
  .media-img{
    max-height: none !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important; /* show full image */
    border-radius: 16px;            /* keeps your rounded look */
    display: block;
  }
}

/* Pop Notification — move to bottom-right (where the scroll button was) */
.pop-note{
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;   /* was left; place it bottom-right */
  left: auto;
  z-index: 9999;
  background: var(--brand-primary);
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: 14px;
  box-shadow: 0 12px 24px rgba(0,0,0,.3);
  font-weight: 600;
  max-width: 280px;
  line-height: 1.4;
  animation: slideIn .5s ease, fadeOut .5s ease 4.5s forwards;
}
.pop-note.hidden{display:none}
@keyframes slideIn{
  from{transform:translateY(40px);opacity:0}
  to{transform:translateY(0);opacity:1}
}
@keyframes fadeOut{
  to{opacity:0;transform:translateY(40px)}
}


/* Scroll to Top Button — centered at bottom */
#scrollTopBtn{
  position:fixed;
  bottom:2rem;
  left:50%;           /* center horizontally */
  right:auto;         /* override previous right */
  transform:translate(-50%, 20px); /* start slightly lowered */
  width:48px;
  height:48px;
  border:none;
  border-radius:50%;
  background:var(--brand-primary);
  color:#fff;
  font-size:1.5rem;
  font-weight:bold;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  transition:opacity .3s ease, transform .3s ease;
  z-index:9999;
}
#scrollTopBtn.show{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%, 0); /* animate up while staying centered */
}
#scrollTopBtn:hover{
  filter:brightness(1.1);
}

/* Scroll to Top Button — above pop-note, right-aligned */
#scrollTopBtn{
  left: auto !important;
  right: 1.5rem !important;                   /* align with pop-note */
  bottom: calc(1.5rem + 48px + 12px) !important; /* pop-note bottom + btn height + 12px gap */
  transform: none !important;                 /* undo centered transform */
}
#scrollTopBtn.show{
  transform: none !important;
}



/* Floating Powered By Button — MAGNUS branding */
.powered-by-btn{
  position: fixed;
  bottom: 15px;
  left: 15px; /* stays on the left */
  z-index: 9998; /* just under pop notes/scroll-to-top if needed */

  /* Brand look */
  background: color-mix(in oklab, var(--brand-primary) 92%, white 8%);
  color: #fff;
  border: 1px solid color-mix(in oklab, var(--brand-primary) 60%, transparent);
  box-shadow: 0 6px 18px rgba(9,4,4,.35); /* uses dark brand tone */

  /* Size & shape (compact) */
  padding: 6px 12px;
  border-radius: 999px;
  line-height: 1.15;
  font-size: 10px;
  font-weight: 800;
  text-decoration: none;
  text-align: center;

  /* Smooth feel */
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.powered-by-btn small{display:block;letter-spacing:.2px;opacity:.95}
.powered-by-btn strong{color:#fff}

/* Hover/active states */
.powered-by-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.08);
  box-shadow: 0 10px 24px rgba(9,4,4,.45);
  background: color-mix(in oklab, var(--brand-primary) 86%, var(--brand-accent) 14%);
}
.powered-by-btn:active{
  transform: translateY(0);
  filter: brightness(1.0);
}

/* Focus-visible for accessibility */
.powered-by-btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--brand-primary) 35%, transparent),
    0 6px 18px rgba(9,4,4,.35);
}

/* Optional: subtle badge accent */
.powered-by-btn::after{
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in oklab, var(--brand-accent) 80%, var(--brand-primary) 20%);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-accent) 25%, transparent);
  vertical-align: middle;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .powered-by-btn{ transition: none }
}

/* ========== Header (brand + write-up + logo placeholder) ========== */
.site-head{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.site-head__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:.6rem 0;
}
.site-head__brand{
  display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none;
}
.site-logo{height:40px; width:auto; display:block; border-radius:6px}
.site-head__text{line-height:1}
.site-name{font-size:1.05rem; letter-spacing:.4px}
.site-tagline{color:var(--muted)}

.site-nav{display:flex; align-items:center; gap:.9rem}
.site-nav__link{
  color:var(--text); text-decoration:none; opacity:.9; padding:.35rem .2rem;
}
.site-nav__link:hover{opacity:1}
.site-nav__link--active{color:var(--brand-primary); font-weight:800}

.site-menu-btn{
  display:none; background:var(--surface); color:#fff; border:1px solid var(--border);
  border-radius:10px; padding:.4rem .55rem; font-size:1.1rem;
}

@media (max-width: 900px){
  .site-nav{display:none}
  .site-menu-btn{display:inline-block}
}
/* Optional simple mobile toggle (no JS framework) */
.site-head.open .site-nav{
  position:absolute; inset:56px 0 auto 0; display:flex; flex-direction:column; gap:.5rem;
  background:rgba(0,0,0,.85); padding:1rem; border-bottom:1px solid var(--border);
}

/* Rotating Testimonials */
.tst{
  max-width: 820px;
  margin: 1rem auto 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 18px 36px rgba(0,0,0,.18);
}
.tst__quote{font-size:1.2rem; line-height:1.6; margin:.25rem 0}
.tst__meta{color:var(--muted); margin:.35rem 0 .75rem}

.tst__controls{
  display:flex; align-items:center; justify-content:center; gap:.5rem;
}
.tst__btn{
  background: rgba(255,255,255,.08);
  color:#fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: .35rem .65rem;
  cursor: pointer;
}
.tst__btn:hover{background: rgba(255,255,255,.12)}

.tst__dots{display:flex; gap:.35rem; align-items:center}
.tst__dots button{
  width:22px; height:6px; border-radius:999px; border:0;
  background: rgba(255,255,255,.28); cursor:pointer; transition:.18s;
}
.tst__dots button.is-active{background: var(--brand-primary)}

/* Floating Support Widget (bottom-left, branded) */
.support-fab{
  position: fixed;
  left: 1.5rem;
  bottom: calc(15px + 42px + 12px); /* sits above your .powered-by-btn */
  z-index: 9998;
}

/* Round trigger button */
.support-fab__btn{
  width: 54px;
  height: 54px;
  border: none;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(9,4,4,.35);
  transition: transform .18s ease, filter .18s ease;
}
.support-fab__btn:hover{ filter: brightness(1.08) }
.support-fab__btn:active{ transform: scale(.98) }
.support-fab__btn:focus-visible{
  outline: 0;
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--brand-primary) 35%, transparent),
    0 10px 24px rgba(9,4,4,.35);
}

/* Panel */
.support-panel{
  position: absolute;
  left: 0;
  bottom: 66px; /* above the button */
  width: 300px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 22px 48px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  animation: panelIn .18s ease;
}
@keyframes panelIn{
  from { opacity: 0; transform: translateY(8px) }
  to   { opacity: 1; transform: translateY(0) }
}
.support-panel__title{
  margin: 0 0 .25rem;
  font-weight: 900;
  letter-spacing: .2px;
}
.support-panel__text{
  margin: 0 0 .75rem;
  color: var(--muted);
  font-size: .95rem;
}
.support-actions{ display: grid; gap: .5rem }
.support-actions__btn{ text-align: center }

/* Close (top-right of panel) */
.support-close{
  position: absolute;
  right: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  color: #fff;
  cursor: pointer;
}
.support-close:hover{ background: rgba(255,255,255,.12) }

/* Mobile: keep it comfy above edges */
@media (max-width: 560px){
  .support-panel{ width: min(92vw, 320px) }
}

/* 1) Move floating support to bottom-right (where scroll-up was) */
.support-fab{
  left: auto !important;
  right: 1.5rem !important;
  bottom: calc(1.5rem + 48px + 12px) !important; /* same vertical line as previous scroll-up */
  z-index: 9998 !important;
}

/* 1b) Make the support panel open inward from the right edge */
.support-panel{
  left: auto !important;
  right: 0 !important;     /* avoid off-screen overflow on the right */
}

/* 2) Lift scroll-up button higher so it won't merge with support */
#scrollTopBtn{
  left: auto !important;
  right: 1.5rem !important;
  /* pop-note (bottom:1.5rem) + 48px gap + 12px + support-fab(54px) + 12px gap */
  bottom: calc(1.5rem + 48px + 12px + 54px + 12px) !important;
  transform: none !important;  /* keep its animation stable */
}
#scrollTopBtn.show{ transform: none !important; }