/* Mortgage Your Coin — Nightfall+FX (drop-in v7) */
:root{
  --bg:#0b1220; --bg-2:#0d1628; --card:#0f172a; --ink:#e9f1ff; --muted:#9fb2d7; --line:rgba(255,255,255,.08);
  --brand:#5b9dff; --mint:#34d399; --cyan:#22d3ee; --gold:#fbbf24; --danger:#ef4444; --ok:#22c55e;
  --glass:rgba(255,255,255,.04); --radius:16px; --shadow:0 18px 40px rgba(0,0,0,.35);
}
body.dark{ background: radial-gradient(1200px 600px at 20% -10%, rgba(36,99,235,.15), transparent), var(--bg); color:var(--ink); }

.mort-wrap{ max-width:1100px; margin:32px auto 80px; padding:0 16px; }
.card{ background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--card); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--line); margin:18px 0; }
.card-h{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--line); }
.card-h h2{ font-size:1.1rem; letter-spacing:.3px; }

/* Hero */
.hero{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; align-items:center; margin-top:18px; }
.hero .hero-copy h1{ font-size:2rem; margin:0; display:flex; align-items:center; gap:10px; }
.hero .tag{ background:linear-gradient(90deg, #5b9dff, #22d3ee); color:#001427; font-weight:700; font-size:.8rem; padding:4px 10px; border-radius:999px; box-shadow:0 6px 18px rgba(34,211,238,.35); }
.hero .sub{ color:var(--muted); margin:10px 0 14px; }
.range-pill{ display:inline-block; padding:10px 14px; border-radius:999px; background:rgba(91,157,255,.08); border:1px solid rgba(91,157,255,.35); box-shadow:inset 0 0 0 1px rgba(91,157,255,.2); }
.hero-gfx{ position:relative; min-height:300px; }

/* Coin inside ring (no white fill) */
.coin3d{ position:absolute; inset:0; display:grid; place-items:center; transform:translateY(-28px); z-index:1; pointer-events:none; }
.coin,.ring{ grid-area:1/1; }
.ring{ width:240px; height:240px; border-radius:50%; border:1px dashed rgba(255,255,255,.20); animation:spin 18s linear infinite; opacity:.9; }
@keyframes spin{ to{ transform:rotate(360deg);} }
.coin{ width:160px; height:160px; border-radius:50%; display:grid; place-items:center; overflow:hidden; animation:spinLogo 10s linear infinite; box-shadow:0 40px 80px rgba(0,0,0,.45); background:transparent; }
.coin-logo{ width:100%; height:100%; object-fit:contain; border-radius:50%; background:transparent; }
@keyframes spinLogo{ 0%{ transform:rotateY(0deg);} 100%{ transform:rotateY(360deg);} }

.sparkline{ z-index:0; position:absolute; bottom:-6px; left:0; right:0; height:90px;
  mask:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
.sparkline canvas{ width:100%; height:100%; display:block; filter:drop-shadow(0 10px 18px rgba(91,157,255,.25)); }

/* Calculator */
.calc{ overflow:hidden; }
.grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; padding:20px; }
.cell label{ display:block; color:var(--muted); margin-bottom:22px; font-size:.95rem; transform:translateY(-8px); }

/* Slider + bubble */
.slider-wrap{ position:relative; padding-top:60px; }
#earnRange{
  width:100%; -webkit-appearance:none; appearance:none;
  background:linear-gradient(90deg, rgba(91,157,255,.35), rgba(34,211,238,.25));
  height:6px; border-radius:999px; outline:none;
  background-repeat:no-repeat;              /* for JS paintFill() */
  background-position:left center;
}
#earnRange::-webkit-slider-thumb{
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:linear-gradient(180deg,#b7d3ff,#5b9dff); border:2px solid #143;
  box-shadow:0 8px 22px rgba(91,157,255,.45); cursor:pointer;
}
#earnRange::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:linear-gradient(180deg,#b7d3ff,#5b9dff); border:2px solid #143;
  box-shadow:0 8px 22px rgba(91,157,255,.45); cursor:pointer;
}
#earnBubble{
  position:absolute; top:-36px; transform:translateX(-50%);
  background:rgba(15,23,42,.9); border:1px solid var(--line);
  padding:6px 10px; border-radius:8px; font-weight:700;
  box-shadow:0 8px 20px rgba(0,0,0,.35); pointer-events:none; white-space:nowrap; z-index:1;
}
.ticks{ display:flex; justify-content:space-between; font-size:.85rem; color:var(--muted); margin-top:8px; }

/* Terms + tiers */
.terms{ display:flex; gap:10px; }
.term{ border:1px solid var(--line); background:var(--glass); color:var(--ink); padding:10px 14px; border-radius:12px; cursor:pointer; transition:.25s transform,.25s box-shadow; }
.term.active{ outline:2px solid rgba(91,157,255,.7); box-shadow:0 8px 24px rgba(91,157,255,.25); transform:translateY(-2px); }
.hint{ color:var(--muted); margin-top:8px; font-size:.9rem; }

.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.tier{ padding:14px; border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), var(--bg-2); border-radius:14px; text-align:center; position:relative; overflow:hidden; }
.tier::after{ content:""; position:absolute; inset:0; background:radial-gradient(240px 80px at var(--x,50%) 120%, rgba(91,157,255,.15), transparent), radial-gradient(180px 60px at var(--x,50%) 10%, rgba(34,211,238,.15), transparent); opacity:.7; pointer-events:none; }
.tier.active{ outline:2px solid rgba(52,211,153,.8); box-shadow:0 10px 28px rgba(52,211,153,.28); }
.t-name{ font-weight:800; letter-spacing:.5px; }
.t-rate{ color:var(--mint); font-weight:700; font-size:1.1rem; margin-top:6px; }

/* Requirement */
.req{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; align-items:center; }
.req-val{ font-size:1.25rem; font-weight:800; }
.req-val.good{ color:var(--ok); }

/* Form */
.mort-form{ padding:0 20px 20px; display:grid; gap:12px; justify-items:center; }
.agree{ display:flex; gap:10px; align-items:flex-start; color:var(--muted); }

/* Primary button */
.mort-form .btn-primary{
  all:unset; display:inline-flex; align-items:center; justify-content:center;
  width:auto; padding:8px 16px; border-radius:8px; font-size:.9rem; font-weight:700;
  background:linear-gradient(90deg, #5b9dff, #22d3ee); color:#032133; text-align:center; cursor:pointer;
  box-shadow:0 8px 18px rgba(34,211,238,.25); transition:transform .2s ease, box-shadow .2s ease; margin-top:6px;
}
.mort-form .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 22px rgba(34,211,238,.35); }
.mort-form .btn-primary[disabled]{ filter:grayscale(1) brightness(.7); cursor:not-allowed; }
.fine{ color:var(--muted); font-size:.85rem; }

/* Steps */
.steps .stepper{ list-style:none; margin:0; padding:18px 20px; display:grid; gap:18px; counter-reset:s; }
.step{ display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; background:var(--bg-2); border:1px dashed var(--line); border-radius:12px; padding:12px; position:relative; overflow:hidden; }
.step::before{ content:""; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg, #5b9dff, #22d3ee); opacity:.6; transform:translateX(-100%); animation:bar 2.2s ease-in-out infinite; }
@keyframes bar{ 50%{ transform:translateX(0);} 100%{ transform:translateX(100%);} }
.s-num{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; font-weight:900; background:linear-gradient(180deg, rgba(91,157,255,.2), rgba(34,211,238,.15)); border:1px solid var(--line); }
.s-body h3{ margin:6px 0; }
.s-body p{ color:var(--muted); }

/* Responsive (tablet) */
@media (max-width:960px){
  .hero{ grid-template-columns:1fr; }
  .grid{ grid-template-columns:1fr; }
}

/* Topbar buttons (unchanged) */
.sd-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; }
.sd-brand{ font-weight:800; letter-spacing:.2px; }
.sd-actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }
.sd-actions .btn-ghost, .sd-actions .btn-danger{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px; font-weight:700;
  border:1px solid var(--line); text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.sd-actions .btn-ghost{ background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)); color:var(--ink); }
.sd-actions .btn-ghost:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(91,157,255,.25); background:rgba(91,157,255,.10); }
.sd-actions .btn-danger{ background:linear-gradient(90deg, #ef4444, #f59e0b); color:#0b0f1a; border-color:transparent; font-weight:800; }
.sd-actions .btn-danger:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(239,68,68,.35); }
.sd-actions .i{ font-weight:900; line-height:1; }

/* ---- HERO CARD LAYOUT base (desktop) ---- */
.card.hero{ padding:22px 24px; overflow:hidden; }  /* text edges se chipka na lage */
.hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,0.9fr);
  gap:24px; align-items:center;
}
.hero .hero-copy{ position:relative; z-index:3; }
.hero .hero-copy h1{ margin:6px 0 8px; }
.hero .sub{ max-width:52ch; }
.hero-gfx{ position:relative; min-height:320px; z-index:2; }
.coin3d{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transform:translateY(-12px);
  z-index:2; pointer-events:none;
}
.ring{ grid-area:1/1; width:240px; height:240px; border-radius:50%;
       border:1px dashed rgba(255,255,255,.20); animation:spin 18s linear infinite; opacity:.9; z-index:2; }
.coin{ grid-area:1/1; width:170px; height:170px; border-radius:50%;
       position:relative; display:grid; place-items:center; overflow:hidden;
       animation:spinLogo 10s linear infinite; z-index:3;
       background:
         radial-gradient(closest-side at 50% 45%, rgba(255,255,255,.06), rgba(255,255,255,.02) 55%, transparent 70%),
         linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.22));
       box-shadow:0 40px 80px rgba(0,0,0,.45);
       outline:1px solid rgba(255,255,255,.06);
}
.coin-logo{
  width:88%; height:88%; object-fit:contain; display:block;
  filter:drop-shadow(0 0 8px rgba(91,157,255,.35));
  mix-blend-mode:normal; opacity:1; background:transparent;
}
.sparkline{
  position:absolute; left:12px; right:12px; bottom:0; height:90px;
  z-index:1; /* behind coin+ring */
  mask:linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* ========= MOBILE HERO ORDER (≤640px) ========= */
@media (max-width: 640px){

  .card.hero{ padding:18px 14px; }

  /* Grid areas to force order:
     title -> gfx (coin + wave) -> sub (text + pill) */
  .hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "gfx"
      "sub";
    row-gap: 12px;
    align-items: start;
    text-align: center;
  }

  /* Let copy children become direct grid items */
  .hero .hero-copy{ display: contents; }

  /* Title first, centered */
  .hero-title{ grid-area: title; }
  .hero-title h1{
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
  }

  /* Gfx in the middle (coin above, wave below) */
  .hero-gfx{ grid-area: gfx; min-height: 220px; }
  .coin3d{ transform: translateY(-6px); }  /* a little less lift */

  /* Sub text + pill last */
  .hero-sub{ grid-area: sub; }
  .hero .sub{
    margin: 6px auto 8px;
    color: var(--muted);
    max-width: 34ch;
  }
  .range-pill{
    display: inline-block;
    margin-top: 2px;
    font-weight: 700;
  }
}

/* ========================= */
/* Back Button (vinodjangid07) */
/* ========================= */
.button {
  width: 110px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  cursor: pointer;
  border: 2px solid rgb(255, 239, 94);
  background-color: rgb(255, 239, 94);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  transition: transform 0.2s ease;
}
.button .text {
  width: 70%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(27, 27, 27);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px 0 0 4px;
}
.button .arrow path { fill: rgb(19, 19, 19); }
.button:hover .arrow { animation: slide-in-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; }
@keyframes slide-in-left {
  0% { transform: translateX(-8px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.button:active { transform: scale(0.96); }

.vc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: var(--card, #0f172a);
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
}
.vc-header .logo { font-weight: 700; font-size: 18px; color: var(--ink, #e9f1ff); }

/* ---- Desktop main heading center ---- */
.mort-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 800;
  margin: 24px 0;
}

/* ---- Mobile adjustments ---- */
@media (max-width: 640px) {
  /* Page heading */
  .mort-title {
    text-align: center;
    font-size: 1.8rem;
  }

  /* Hero card heading */
  .hero .hero-copy h1 {
    text-align: center;
    width: 100%;
    justify-content: center;   /* centers flex children */
  }
}