:root {
      --primary:#6366f1;
      --secondary:#ec4899;
      --accent:#22c55e;

      --bg-main:#f6f7fb;
      --bg-glass:rgba(255,255,255,.65);
      --bg-glass-strong:rgba(255,255,255,.85);

      --text-main:#0f172a;
      --text-sub:#475569;
      --text-muted:#64748b;

      --border-glass:rgba(255,255,255,.4);
      --shadow-glass:0 20px 40px rgba(0,0,0,.08);

      --radius-lg:22px;
      --radius-md:14px;
    }

    *{box-sizing:border-box;margin:0;padding:0}

    body{
      font-family:Inter,sans-serif;
      background:radial-gradient(circle at top,#eef2ff,#f6f7fb);
      color:var(--text-main);
      line-height:1.6;
      overflow-x:hidden;
    }

    /* Background */
    .bg-orbs{position:fixed;inset:0;z-index:-1}
    .orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
    .orb.one{width:420px;height:420px;background:#c7d2fe;top:-120px;right:-120px}
    .orb.two{width:380px;height:380px;background:#fbcfe8;bottom:-120px;left:-120px}

    .container{max-width:1200px;margin:auto;padding:0 20px}
    section{padding:50px 0}

    /* Navbar */
    header{
      position:sticky;top:0;z-index:100;
      backdrop-filter:blur(20px);
      background:var(--bg-glass);
      border-bottom:1px solid var(--border-glass)
    }

    nav{
      display:flex;
      justify-content:space-between;
      align-items:center;
      height:72px;
      flex-wrap:wrap;
    }

    .logo{
      font-family:Outfit,sans-serif;
      font-size:1.25rem;
      font-weight:700
    }

    .logo span{color:var(--primary)}

    nav a{
      text-decoration:none;
      color:var(--text-sub);
      margin-left:18px;
      font-weight:500;
      font-size:.95rem
    }

    .nav-btn{
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      color:#fff;
      padding:10px 20px;
      border-radius:999px;
      font-weight:600;
      white-space:nowrap;
    }

    /* Hero */
    .hero-question{text-align:center;max-width:760px;margin:0 auto}

    .hero-eyebrow{
      display:inline-block;
      margin-bottom:10px;
      font-weight:700;
      letter-spacing:.14em;
      color:var(--text-muted);
      text-transform:uppercase;
      font-size:.75rem
    }

    h1{
      font-family:Outfit,sans-serif;
      font-size:clamp(2rem,6vw,3.2rem);
      margin-bottom:14px;
    }

    .gradient-text{
      background:linear-gradient(135deg,var(--primary),var(--secondary));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent
    }

    .hero-sub{
      font-size:1.05rem;
      color:var(--text-sub);
      padding:0 6px;
    }

    /* Decision flow */
    .decision-flow{
      margin-top:50px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      gap:26px;
    }

    .decision-path{
      background:var(--bg-glass-strong);
      backdrop-filter:blur(24px);
      border-radius:var(--radius-lg);
      padding:34px;
      border:1px solid var(--border-glass);
      box-shadow:var(--shadow-glass);
      display:flex;
      flex-direction:column;
      gap:12px
    }

    .decision-path.assist{
      background:linear-gradient(135deg,rgba(99,102,241,.15),rgba(236,72,153,.15))
    }

    .path-label{
      font-size:.7rem;
      font-weight:700;
      letter-spacing:.12em;
      color:var(--text-muted);
      text-transform:uppercase
    }

    .decision-path h3{
      font-family:Outfit,sans-serif;
      font-size:1.35rem
    }

    .path-action{
      margin-top:8px;
      font-weight:700;
      text-decoration:none;
      color:var(--primary)
    }

    .decision-separator{
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      color:var(--text-muted)
    }

    .assist-links{
      display:flex;
      gap:14px;
      flex-wrap:wrap;
    }

    .assist-btn{
      padding:10px 18px;
      border-radius:999px;
      font-weight:600;
      text-decoration:none;
      color:#fff;
      font-size:.9rem
    }

    .assist-btn.whatsapp{background:#22c55e}
    .assist-btn.telegram{background:#0ea5e9}

    /* Earnings */
    .earnings-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
      gap:26px
    }

    .glass-card{
      background:var(--bg-glass-strong);
      border-radius:var(--radius-lg);
      padding:30px;
      border:1px solid var(--border-glass);
      box-shadow:var(--shadow-glass)
    }

    .img-placeholder{
      height:160px;
      border-radius:var(--radius-md);
      background:linear-gradient(135deg,#e0e7ff,#fce7f3);
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:600;
      color:var(--text-muted);
      margin-bottom:18px
    }

    footer{
      background:var(--bg-glass);
      backdrop-filter:blur(20px);
      border-top:1px solid var(--border-glass);
      padding:36px 0;
      text-align:center;
      color:var(--text-muted);
      font-size:.9rem
    }

    /* =========================
       MOBILE FIXES
       ========================= */
    @media(max-width:900px){
      section{padding:70px 0}

      nav{
        gap:10px;
      }

      nav a{
        margin-left:10px;
        font-size:.9rem;
      }

      .decision-flow{
        grid-template-columns:1fr;
      }

      .decision-separator{
        display:none;
      }

      .decision-path{
        padding:28px;
      }

      .assist-links{
        justify-content:flex-start;
      }
    }

    @media(max-width:480px){
      h1{font-size:1.9rem}
      .hero-sub{font-size:.95rem}
      .decision-path h3{font-size:1.25rem}
      .assist-btn{width:100%;text-align:center}
    }
    /* =============================
   Hero top (SEO + image)
   ============================= */

.hero-top-layout{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:60px;
  align-items:center;
}

.hero-top-left{
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* =============================
   Mobile-safe image handling
   ============================= */

.hero-top-right{
  display:flex;
  justify-content:center;
}

/* Works for both placeholder AND real image */
.hero-image-placeholder,
.hero-top-right img{
  width:100%;
  max-width:420px;
  aspect-ratio:3 / 4;        /* controls height automatically */
  border-radius:28px;
  box-shadow:var(--shadow-glass);
}

/* Real image behaviour */
.hero-top-right img{
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Placeholder styling (unchanged) */
.hero-image-placeholder{
  background:linear-gradient(135deg,#e0e7ff,#fce7f3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-muted);
}

/* =============================
   Mobile behavior (IMPORTANT)
   ============================= */
@media(max-width:900px){
  .hero-top-layout{
    grid-template-columns:1fr;
  }

  .hero-top-right{
    order:-1;
    margin-bottom:40px;
  }

  .hero-image-placeholder,
  .hero-top-right img{
    max-width:320px;         /* fits small screens */
    aspect-ratio:4 / 5;     /* taller, nicer on phones */
  }
}
#host{
	height:50px;}

/* =============================
   Elegant Earnings Section
   ============================= */

.earnings-header{
  text-align:center;
  margin-bottom:50px;
}

.earnings-title{
  font-family:Outfit,sans-serif;
  font-size:2.2rem;
}

.earnings-glass{
  max-width:720px;
  margin:0 auto 40px;
  padding:28px 36px;
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px);
  box-shadow:var(--shadow-glass);
  display:flex;
  justify-content:space-between;
  gap:20px;
}

.earnings-rule{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.rule-label{
  font-size:.75rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:700;
}

.rule-value{
  font-size:1.25rem;
  font-weight:600;
}

.earnings-examples{
  max-width:520px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:14px;
  font-size:1.05rem;
}

.earnings-examples div{
  display:flex;
  justify-content:space-between;
  padding-bottom:6px;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.earnings-examples .highlight{
  font-weight:700;
  color:var(--primary);
}

/* Mobile refinement */
@media(max-width:768px){
  .earnings-glass{
    flex-direction:column;
    text-align:center;
  }

  .rule-value{
    font-size:1.15rem;
  }

  .earnings-title{
    font-size:1.9rem;
  }
}
.earnings-disclaimer{
  margin-top:40px;
  text-align:center;
  font-size:.95rem;
  color:var(--text-sub);
}

/* =============================
   Host Reviews (Light Glass)
   ============================= */

.reviews-header{
  text-align:center;
  margin-bottom:50px;
}

.reviews-title{
  font-family:Outfit,sans-serif;
  font-size:2.2rem;
}

.reviews-grid{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;
}

.review-card{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(22px);
  border-radius:var(--radius-lg);
  padding:28px 30px;
  box-shadow:var(--shadow-glass);
  display:flex;
  flex-direction:column;
  gap:14px;
}

.review-stars{
  color:#fbbf24;
  letter-spacing:2px;
  font-size:1.05rem;
}

.review-text{
  font-size:1rem;
  color:var(--text-sub);
  line-height:1.5;
}

.review-footer{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:1px;
}

.avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  color:white;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.review-meta{
  display:flex;
  flex-direction:column;
  font-size:.9rem;
}

.review-meta span{
  color:var(--text-muted);
}

.review-earning{
  margin-left:auto;
  font-size:.9rem;
  font-weight:600;
  color:var(--primary);
}

/* Mobile polish */
@media(max-width:768px){
  .reviews-title{
    font-size:1.9rem;
  }

  .review-card{
    padding:24px;
  }
}

/* =============================
   FAQ Accordion (Glass Style)
   ============================= */

.faq-header{
  text-align:center;
  margin-bottom:50px;
}

.faq-title{
  font-family:Outfit,sans-serif;
  font-size:2.2rem;
}

.faq-list{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.faq-item{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(24px);
  border-radius:18px;
  box-shadow:var(--shadow-glass);
  overflow:hidden;
}

.faq-question{
  width:100%;
  padding:22px 26px;
  background:none;
  border:none;
  font-size:1.05rem;
  font-weight:600;
  color:var(--text-main);
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  text-align:left;
}

.faq-icon{
  font-size:1.3rem;
  color:var(--primary);
  transition:transform .3s ease;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  padding:0 26px;
  font-size:.95rem;
  color:var(--text-sub);
  transition:max-height .35s ease, padding .35s ease;
}

.faq-item.active .faq-answer{
  max-height:200px;
  padding:0 26px 22px;
}

.faq-item.active .faq-icon{
  transform:rotate(180deg);
}

/* Mobile */
@media(max-width:768px){
  .faq-title{
    font-size:1.9rem;
  }

  .faq-question{
    font-size:1rem;
    padding:20px;
  }
}
.left-text{
  text-align:left !important;
  margin-bottom:16px; 
}
/* =============================
   Commission Ratio Section
   ============================= */

.commission-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 50px;
}

.commission-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:12px;
}

.commission-glass{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px);
  border-radius:var(--radius-lg);
  padding:26px;
  box-shadow:var(--shadow-glass);
  overflow-x:auto;
}

.commission-table{
  width:100%;
  border-collapse:collapse;
  text-align:center;
  font-size:.95rem;
}

.commission-table th{
  padding:14px 10px;
  font-weight:700;
  color:white;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
}

.commission-table th:first-child{
  border-top-left-radius:14px;
}

.commission-table th:last-child{
  border-top-right-radius:14px;
}

.commission-table td{
  padding:16px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-weight:500;
}

.commission-table td span{
  font-size:.8rem;
  color:var(--text-muted);
}

.commission-table tbody tr:last-child td{
  border-bottom:none;
}

.commission-note{
  max-width:820px;
  margin:26px auto 0;
  font-size:.95rem;
  color:var(--text-sub);
  text-align:center;
}

/* Mobile optimization */
@media(max-width:768px){
  .commission-title{
    font-size:1.9rem;
  }

  .commission-table{
    font-size:.85rem;
  }
}
/* =============================
   Agent Commission Calculation
   ============================= */

.calc-header{
  max-width:760px;
  margin:0 auto 60px;
  text-align:center;
}

.calc-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:14px;
}

.calc-layout{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

/* Image area */
.calc-image{
  display:flex;
  justify-content:center;
}

.calc-image-placeholder{
  width:100%;
  max-width:420px;
  aspect-ratio:3 / 4;
  border-radius:28px;
  background:linear-gradient(135deg,#e0e7ff,#fce7f3);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--text-muted);
  box-shadow:var(--shadow-glass);
}

/* Content */
.calc-content{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  box-shadow:var(--shadow-glass);
}

.calc-block{
  margin-bottom:26px;
}

.calc-block h3{
  font-family:Outfit,sans-serif;
  font-size:1.35rem;
  margin-bottom:10px;
}

.calc-formula{
  margin-top:8px;
  font-size:.95rem;
  color:var(--primary);
}

.calc-note{
  font-size:.9rem;
  color:var(--text-muted);
  margin-top:6px;
}

.calc-footnote{
  font-size:.9rem;
  color:var(--text-sub);
  margin-top:10px;
}

/* =============================
   Calc Image Fix (Progress Image)
   ============================= */

.calc-image{
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Image wrapper controls size */
.calc-image-placeholder{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;          /* portrait layout */
  border-radius: 28px;
  overflow: hidden;             /* CRITICAL */
  box-shadow: var(--shadow-glass);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Actual image */
.calc-image-placeholder img{
  width: 100%;
  height: 100%;
  object-fit: cover;            /* prevents giant image */
  object-position: center;
  display: block;
}

/* Mobile behavior */
@media (max-width: 900px){
  .calc-image-placeholder{
    max-width: 320px;
    aspect-ratio: 4 / 5;
  }
}

/* =============================
   Commission Example Section
   ============================= */

.example-header{
  text-align:center;
  max-width:780px;
  margin:0 auto 60px;
}

.example-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:12px;
}

/* Agent tree */
.agent-tree{
  max-width:720px;
  margin:0 auto 40px;
  padding:26px 30px;
}

.agent-row{
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-bottom:1px solid rgba(0,0,0,.08);
  font-size:.95rem;
}

.agent-row:last-child{
  border-bottom:none;
}

.main-agent{
  font-weight:700;
  color:var(--primary);
}

/* Calculation box */
.example-calc{
  max-width:820px;
  margin:0 auto;
  padding:30px 34px;
}

.example-calc h3{
  font-family:Outfit,sans-serif;
  margin-bottom:18px;
}

.calc-list{
  list-style:none;
  padding:0;
  margin:0;
}

.calc-list li{
  padding:10px 0;
  font-size:.95rem;
  color:var(--text-sub);
}

.calc-list li span{
  display:block;
  margin-top:4px;
  color:var(--text-main);
}

.calc-total{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(0,0,0,.1);
  font-size:1.1rem;
  font-weight:700;
  color:var(--primary);
}

.example-note{
  max-width:780px;
  margin:30px auto 0;
  font-size:.9rem;
  color:var(--text-muted);
  text-align:center;
}

/* Mobile */
@media(max-width:768px){
  .example-title{
    font-size:1.9rem;
  }

  .agent-row{
    flex-direction:column;
    gap:4px;
  }
}
/* =============================
   Commission Example Image
   ============================= */

.example-header{
  text-align:center;
  max-width:760px;
  margin:0 auto 40px;
}

.example-title{
  font-family:Outfit,sans-serif;
  font-size:2.2rem;
}

.example-image-wrap{
  display:flex;
  justify-content:center;
  margin:40px 0;
}

.example-image-wrap img{
  width:100%;
  max-width:900px;
  border-radius:22px;
  box-shadow:var(--shadow-glass);
}

/* Mobile */
@media(max-width:768px){
  .example-title{
    font-size:1.9rem;
  }

  .example-image-wrap img{
    max-width:100%;
  }
}

.example-note{
  max-width:820px;
  margin:0 auto;
  font-size:.9rem;
  color:var(--text-muted);
  text-align:center;
}
/* =============================
   Settlement & Payment Section
   ============================= */

.settlement-header{
  max-width:780px;
  margin:0 auto 60px;
  text-align:center;
}

.settlement-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:14px;
}

.settlement-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* Steps */
.settlement-content{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  box-shadow:var(--shadow-glass);
}

.settlement-step{
  display:flex;
  gap:18px;
  margin-bottom:22px;
}

.step-number{
  font-weight:700;
  color:white;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.settlement-step p{
  font-size:1rem;
  color:var(--text-sub);
}

.settlement-step:last-child{
  margin-bottom:0;
}

/* =============================
   Settlement & Payment Section
   ============================= */

.settlement-header{
  max-width:780px;
  margin:0 auto 60px;
  text-align:center;
}

.settlement-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:14px;
}

.settlement-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* Steps */
.settlement-content{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  box-shadow:var(--shadow-glass);
}

.settlement-step{
  display:flex;
  gap:18px;
  margin-bottom:22px;
}

.step-number{
  font-weight:700;
  color:white;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.settlement-step p{
  font-size:1rem;
  color:var(--text-sub);
}

.settlement-step:last-child{
  margin-bottom:0;
}

/* =============================
   Settlement & Payment Section
   ============================= */

.settlement-header{
  max-width:780px;
  margin:0 auto 60px;
  text-align:center;
}

.settlement-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:14px;
}

.settlement-layout{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:60px;
  align-items:center;
}

/* Steps */
.settlement-content{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  box-shadow:var(--shadow-glass);
}

.settlement-step{
  display:flex;
  gap:18px;
  margin-bottom:22px;
}

.step-number{
  font-weight:700;
  color:white;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.settlement-step p{
  font-size:1rem;
  color:var(--text-sub);
}

.settlement-step:last-child{
  margin-bottom:0;
}

/* ✅ CORRECT TARGET: image inside placeholder */

.settlement-image-placeholder {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 3 / 4;
  border-radius: 28px;
  overflow: hidden;                 /* IMPORTANT */
  box-shadow: var(--shadow-glass);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The actual image */
.settlement-image-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;                /* prevents giant phone */
  object-position: center;
  border-radius: 28px;
  display: block;
}

/* Mobile fix */
@media (max-width: 900px) {
  .settlement-image-placeholder {
    max-width: 320px;
    aspect-ratio: 4 / 5;
  }
}

/* =============================
   Step-by-Step Registration
   ============================= */

.steps-header{
  max-width:780px;
  margin:0 auto 70px;
  text-align:center;
}

.steps-title{
  font-family:Outfit,sans-serif;
  font-size:2.3rem;
  margin-bottom:12px;
}

.step-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  margin-bottom:70px;
}

.step-row.reverse{
  direction:rtl;
}

.step-row.reverse > *{
  direction:ltr;
}

.step-text{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(26px);
  border-radius:var(--radius-lg);
  padding:36px 40px;
  box-shadow:var(--shadow-glass);
}

/* =============================
   Step Number Badge Fix
   ============================= */

.step-number{
  width:36px;
  height:36px;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:.85rem;
  font-weight:700;

  color:white;
  background:linear-gradient(135deg,var(--primary),var(--secondary));
  box-shadow:0 8px 20px rgba(99,102,241,.25);

  margin-bottom:12px;
}


.step-text h3{
  font-family:Outfit,sans-serif;
  margin-bottom:10px;
}

.step-text p{
  font-size:1rem;
  color:var(--text-sub);
}

/* =============================
   Step Image Fix (Screenshots)
   ============================= */

.step-image{
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Wrapper controls size */
.step-image-placeholder{
  width:100%;
  max-width:420px;
  aspect-ratio:9 / 16;        /* phone screenshot */
  border-radius:28px;
  overflow:hidden;            /* CRITICAL */
  box-shadow:var(--shadow-glass);

  display:flex;
  align-items:center;
  justify-content:center;
}

/* Actual image */
.step-image-placeholder img{
  width:100%;
  height:100%;
  object-fit:cover;           /* prevents giant image */
  object-position:center;
  display:block;
}

/* Mobile tuning */
@media (max-width:900px){
  .step-image-placeholder{
    max-width:320px;
    aspect-ratio:9 / 16;
  }
}
.path-action{
  display:inline-block;
  margin-top:10px;
  padding:10px 16px;
}
/* =================================================
   MOBILE FINAL POLISH (SAFE OVERRIDES ONLY)
   ================================================= */

/* General spacing reduction */
@media (max-width: 900px) {
  section {
    padding: 48px 0;
  }

  .container {
    padding: 0 16px;
  }
}

/* Navbar mobile behavior */
@media (max-width: 768px) {
  nav {
    justify-content: center;
    gap: 8px;
  }

  nav > div:last-child {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  nav a {
    margin-left: 0;
    font-size: 0.85rem;
  }

  .nav-btn {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}

/* Hero text tightening */
@media (max-width: 768px) {
  .hero-question {
    padding: 0 6px;
  }

  h1 {
    margin-bottom: 10px;
  }

  .hero-sub {
    font-size: 0.95rem;
    line-height: 1.5;
  }
}

/* Step layout mobile fixes */
@media (max-width: 900px) {
  .step-row {
    gap: 28px;
    margin-bottom: 48px;
  }

  .step-text {
    padding: 26px 24px;
  }

  .step-text p {
    font-size: 0.95rem;
    line-height: 1.55;
  }

  .step-text h3 {
    font-size: 1.2rem;
  }
}

/* Step number spacing */
@media (max-width: 900px) {
  .step-number {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }
}

/* Step image safety */
@media (max-width: 900px) {
  .step-image {
    margin-bottom: 8px;
  }

  .step-image-placeholder {
    max-width: 300px;
  }
}

/* Earnings + cards tightening */
@media (max-width: 768px) {
  .glass-card {
    padding: 22px;
  }

  .earnings-glass {
    padding: 22px;
  }

  .earnings-examples {
    font-size: 0.95rem;
  }
}

/* Reviews mobile spacing */
@media (max-width: 768px) {
  .review-card {
    padding: 22px;
  }

  .review-text {
    font-size: 0.95rem;
  }
}

/* FAQ mobile tightening */
@media (max-width: 768px) {
  .faq-question {
    padding: 18px;
    font-size: 0.95rem;
  }

  .faq-answer {
    font-size: 0.9rem;
  }
}

/* Commission & calc sections */
@media (max-width: 900px) {
  .calc-layout,
  .settlement-layout {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .calc-content,
  .settlement-content {
    padding: 26px;
  }
}

/* Image-heavy sections */
@media (max-width: 900px) {
  .calc-image-placeholder,
  .settlement-image-placeholder {
    max-width: 300px;
  }
}

/* Footer mobile polish */
@media (max-width: 768px) {
  footer {
    padding: 28px 0;
    font-size: 0.85rem;
  }
}
header {
  transition: transform 0.35s ease, opacity 0.35s ease;
  will-change: transform;
}

header.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
}