/* ===============================
   MR TRADY - FINAL BRAND COLOR SCHEME
   =============================== */

:root {
  --primary: #F4C542;     /* Logo Yellow */
  --secondary: #0a0833;   /* Navy Blue */
  --accent: #E74C3C;      /* Orange/Red */
  --dark: #0B0F14;        /* Background */
  --card: #121826;        /* Card */
  --text: #FFFFFF;        /* Text */
  --muted: #A0AEC0;       /* Muted Text */
  --border: rgba(255,255,255,0.08);

  --primary-rgb: 244, 197, 66;
  --accent-rgb: 231, 76, 60;
  --secondary-rgb: 10, 8, 51;
}

/* ===============================
   BASE / GLOBAL
   =============================== */

html { scroll-behavior: smooth; }

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--dark);
  color: var(--text);
  padding-top: 86px; /* fixed navbar space */
}

img{ max-width: 100%; height: auto; }
a{ color: inherit; }
a:hover{ color: inherit; }

.section-padding{
  padding: 90px 0;
}

@media (max-width: 991.98px){
  body{ padding-top: 76px; }
  .section-padding{ padding: 70px 0; }
}
@media (max-width: 575.98px){
  .section-padding{ padding: 60px 0; }
}

/* Small helpers (missing in your CSS) */
.section-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.72);
  font-weight: 800;
  letter-spacing: .2px;
  font-size: 13px;
}
.section-subtitle{
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
}

/* Hero top pill (missing earlier) */
.mr-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  font-weight: 800;
}
.mr-pill i{ color: var(--primary); }

/* =========================
   NAVBAR
   ========================= */

.mr-navbar{
  padding: 14px 0;
  background: linear-gradient(90deg,#08072a 0%, var(--secondary) 50%, #07061f 100%);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  transition: 0.25s ease;
}

.mr-logo{
  height: 44px;
  width: auto;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.35);
}

.mr-brand-text{
  font-weight: 900;
  letter-spacing: .2px;
  color: var(--primary);
}

/* Nav links underline animation */
.mr-navbar .nav-link{
  position: relative;
  color: rgba(255,255,255,0.75) !important;
  font-weight: 650;
  padding: 10px 14px;
  border-radius: 0;
  transition: color 0.25s ease;
}

.mr-navbar .nav-link:hover{
  color: var(--primary) !important;
  background: transparent !important;
}

.mr-navbar .nav-link::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0%;
  height: 2px;
  background: var(--primary);
  border-radius: 10px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.mr-navbar .nav-link:hover::after{ width: 70%; }
.mr-navbar .nav-link.active{ color: var(--primary) !important; }
.mr-navbar .nav-link.active::after{ width: 80%; }

/* Buttons */
.btn-mr-primary{
  background: var(--primary);
  color: var(--secondary);
  border: 2px solid var(--primary);
  border-radius: 14px;
  font-weight: 900;
  padding: 12px 26px;
  transition: all 0.3s ease;
  box-shadow: 0 15px 35px rgba(var(--primary-rgb), 0.25);
}

.btn-mr-outline{
  background: transparent;
  border: 2px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 14px;
  font-weight: 800;
  padding: 12px 26px;
  transition: all 0.3s ease;
}

.btn-mr-primary:hover,
.btn-mr-outline:hover{
  background: var(--primary);
  color: var(--secondary);
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 20px 45px rgba(var(--primary-rgb), 0.35);
}

/* Offcanvas */
.mr-offcanvas{ background: var(--secondary) !important; }
h5#mrOffcanvasLabel{ color: var(--primary); }

.mr-offcanvas .nav-link{
  color: rgba(255,255,255,0.85) !important;
  font-weight: 800;
  padding: 12px 12px;
  border-radius: 12px;
}
.mr-offcanvas .nav-link:hover{
  background: rgba(var(--primary-rgb), 0.12);
}

/* =========================
   HERO
   ========================= */

.mr-hero{
  position: relative;
  padding: 10px 0 60px;
  overflow: hidden;
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(var(--primary-rgb), .18), transparent 55%),
    radial-gradient(700px 400px at 90% 20%, rgba(var(--accent-rgb), .10), transparent 55%),
    linear-gradient(180deg, #07061f 0%, #0a0833 55%, #0B0F14 100%);
}

.mr-hero-title{
  font-weight: 1000;
  font-size: clamp(36px, 4.5vw, 56px);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 16px;
}
.mr-hero-title span{ color: var(--primary); }

.mr-hero-sub{
  font-size: 18px;
  color: rgba(255,255,255,0.75);
  line-height: 1.7;
  max-width: 540px;
}

.mr-hero-image{
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 40px 120px rgba(0,0,0,0.65),
              0 0 60px rgba(var(--primary-rgb), 0.15);
  animation: floatImage 6s ease-in-out infinite;
  transition: transform 0.4s ease;
}
.mr-hero-image:hover{ transform: translateY(-8px) scale(1.02); }

@keyframes floatImage{
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

@media (max-width: 991px){
  .mr-hero{ padding: 90px 0 40px; text-align: center; }
  .mr-hero-sub{ margin: 0 auto; }
}

/* =========================
   ABOUT
   ========================= */

.mr-about{
  position: relative;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(var(--primary-rgb), 0.14), transparent 60%),
    radial-gradient(800px 520px at 90% 0%, rgba(var(--secondary-rgb), 0.35), transparent 55%),
    linear-gradient(180deg, #0B0F14 0%, #07061f 55%, #0B0F14 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mr-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  color: rgba(255,255,255,0.78);
  letter-spacing: .3px;
}

.mr-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 22px rgba(var(--primary-rgb), 0.55);
}

.mr-title{
  font-weight: 1000;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.15;
  color: #fff;
  margin: 0;
}
.mr-title span{ color: var(--primary); }

.mr-subtitle{
  color: rgba(255,255,255,0.72);
  line-height: 1.8;
  font-size: 16.5px;
  max-width: 600px;
}

.mr-about-visual{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 26px;
  padding: 16px;
  box-shadow: 0 35px 120px rgba(0,0,0,0.65);
}

.mr-about-img{
  width: 100%;
  display: block;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  filter: saturate(1.05) contrast(1.05);
}

/* Stats */
.mr-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.mr-stat{
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
}
.mr-num{
  font-weight: 1000;
  font-size: 22px;
  color: var(--primary);
}
.mr-lbl{
  margin-top: 4px;
  color: rgba(255,255,255,0.70);
  font-weight: 900;
  font-size: 13px;
}
@media (max-width: 991.98px){
  .mr-stats{ grid-template-columns: 1fr; }
}

/* =========================
   FEATURES
   ========================= */

.mr-features{
  background:
    radial-gradient(900px 520px at 15% 10%, rgba(var(--primary-rgb), 0.10), transparent 60%),
    linear-gradient(180deg, #0B0F14 0%, #07061f 55%, #0B0F14 100%);
}

.mr-feature-card{
  height: 100%;
  padding: 26px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: .25s ease;
  box-shadow: 0 25px 70px rgba(0,0,0,0.35);
}
.mr-feature-card:hover{
  transform: translateY(-6px);
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 35px 90px rgba(0,0,0,0.45);
}
.mr-feature-card h5{
  margin: 14px 0 8px;
  font-weight: 1000;
  color: #fff;
  line-height: 1.2;
}
.mr-feature-card p{
  margin: 0;
  color: rgba(255,255,255,0.68);
  line-height: 1.7;
  font-size: 14.8px;
}

.mr-feature-icon{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(var(--primary-rgb), 0.14);
  border: 1px solid rgba(var(--primary-rgb), 0.18);
  box-shadow: 0 14px 35px rgba(0,0,0,0.25);
}
.mr-feature-icon i{
  color: var(--primary);
  font-size: 20px;
}

/* Wide blocks */
.mr-feature-wide{
  height: 100%;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  transition: .25s ease;
}
.mr-feature-wide:hover{
  transform: translateY(-4px);
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 30px 80px rgba(0,0,0,0.40);
}
.mr-feature-wide-text h5{
  margin: 0 0 6px 0;
  font-weight: 1000;
  color: #fff;
}
.mr-feature-wide-text p{
  margin: 0;
  color: rgba(255,255,255,0.68);
  line-height: 1.7;
  font-size: 14.8px;
}

/* Highlight */
.mr-feature-highlight{
  height: 100%;
  padding: 22px;
  border-radius: 22px;
  background: rgba(var(--secondary-rgb), 0.35);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.mr-feature-highlight-left{
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.mr-badge-upcoming{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.16);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  color: var(--primary);
  font-weight: 1000;
  white-space: nowrap;
}

/* Upcoming card */
.mr-upcoming-card{
  height: 100%;
  padding: 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.mr-upcoming-card h6{ color: #fff; font-weight: 1000; }
.mr-upcoming-card p{
  color: rgba(255,255,255,0.68);
  line-height: 1.7;
  font-size: 14.8px;
}

/* =========================
   PRICING
   ========================= */

.mr-pricing{
  background:
    radial-gradient(900px 520px at 15% 15%, rgba(var(--primary-rgb), 0.10), transparent 60%),
    radial-gradient(700px 420px at 85% 20%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, #0B0F14 0%, #07061f 55%, #0B0F14 100%);
}

/* Billing toggle */
.mr-billing-toggle{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}
.mr-bill-label{
  color: rgba(255,255,255,0.72);
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}
.mr-bill-label.active{ color: var(--primary); }

.mr-switch{
  width: 54px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  position: relative;
  padding: 0;
  cursor: pointer;
}
.mr-switch-knob{
  position: absolute;
  top: 3px;
  left: 3px;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 10px 25px rgba(var(--primary-rgb), 0.30);
  transition: .25s ease;
}
.mr-switch.is-yearly .mr-switch-knob{ left: 27px; }

/* Cards */
.mr-price-card{
  height: 100%;
  padding: 26px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 25px 80px rgba(0,0,0,0.35);
  transition: .25s ease;
  position: relative;
  overflow: hidden;
}
.mr-price-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 120px at 20% 0%, rgba(var(--primary-rgb),0.22), transparent 55%);
  opacity: 0;
  transition: .25s ease;
  pointer-events:none;
}
.mr-price-card:hover{
  transform: translateY(-8px);
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 40px 110px rgba(0,0,0,0.45);
}
.mr-price-card:hover::before{ opacity: 1; }

.mr-plan{ font-weight: 1000; color: #fff; margin: 0; }
.mr-plan-sub{ color: rgba(255,255,255,0.70); margin: 10px 0 0; }

.mr-price{
  display:flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 12px;
}
.mr-currency{ color: rgba(255,255,255,0.70); font-weight: 900; }
.mr-amount{ font-size: 44px; font-weight: 1000; color: var(--primary); letter-spacing: -1px; }
.mr-per{ color: rgba(255,255,255,0.60); font-weight: 900; }

/* Hover text swap */
.mr-desc-wrap{ margin-top: 14px; min-height: 46px; position: relative; }
.mr-desc{
  margin: 0;
  color: rgba(255,255,255,0.70);
  line-height: 1.65;
  font-size: 14.8px;
  transition: opacity .2s ease, transform .2s ease;
}
.mr-desc-hover{ position: absolute; left: 0; right: 0; top: 0; opacity: 0; transform: translateY(6px); }
.mr-price-card:hover .mr-desc-default{ opacity: 0; transform: translateY(-6px); }
.mr-price-card:hover .mr-desc-hover{ opacity: 1; transform: translateY(0); }

.mr-features-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.mr-features-list li{
  display:flex;
  align-items:center;
  gap: 10px;
  color: rgba(255,255,255,0.78);
  font-weight: 800;
  font-size: 14.5px;
}
.mr-features-list i{ color: var(--primary); }

/* Popular */
.mr-price-popular{
  background: rgba(var(--secondary-rgb), 0.40);
  border-color: rgba(var(--primary-rgb), 0.22);
  box-shadow: 0 45px 130px rgba(0,0,0,0.55);
}
.mr-pop-badge{
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.18);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  color: var(--primary);
  font-weight: 1000;
  z-index: 2;
}

/* =========================
   CTA / TRIAL
   ========================= */

.mr-trial{ background: #0B0F14; }

.mr-trial-wrap{
  border-radius: 28px;
  padding: 44px 38px;
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(var(--primary-rgb), 0.22), transparent 60%),
    radial-gradient(700px 420px at 65% 0%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    linear-gradient(180deg, #08061c 0%, #0B0F14 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 50px 160px rgba(0,0,0,0.65);
  position: relative;
  overflow: hidden;
}
.mr-trial-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(244,197,66,0.18) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .12;
  pointer-events:none;
}

.mr-trial-title{
  font-weight: 1000;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.05;
  margin: 0;
  color: #fff;
}
.mr-trial-title span{
  color: var(--primary);
  text-shadow: 0 0 25px rgba(var(--primary-rgb), 0.18);
}
.mr-trial-sub{
  margin-top: 14px;
  color: rgba(255,255,255,0.75);
  font-size: 16.8px;
  line-height: 1.75;
  max-width: 520px;
}

.mr-trial-list{ display: grid; gap: 12px; position: relative; z-index: 1; }
.mr-trial-li{
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,0.82);
  font-weight: 800;
}
.mr-tick{
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(var(--primary-rgb), 0.16);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  color: var(--primary);
  box-shadow: 0 14px 30px rgba(0,0,0,0.35);
}

.mr-trial-stores{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.mr-store-btn{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  text-decoration: none;
  color: #fff;
  transition: .25s ease;
  min-width: 190px;
}
.mr-store-btn i{ font-size: 24px; color: var(--primary); }
.mr-store-btn small{ display:block; color: rgba(255,255,255,0.65); font-weight: 800; line-height: 1.1; }
.mr-store-btn strong{ display:block; font-weight: 1000; line-height: 1.1; }
.mr-store-btn:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--primary-rgb), 0.25);
  box-shadow: 0 25px 70px rgba(0,0,0,0.40);
}
.mr-trial-foot{
  color: rgba(255,255,255,0.62);
  font-size: 13.5px;
  font-weight: 700;
  position: relative;
  z-index: 1;
}
.mr-trial-img{
  max-width: 100%;
  border-radius: 22px;
  box-shadow: 0 40px 140px rgba(0,0,0,0.65);
  border: 1px solid rgba(255,255,255,0.08);
}

@media (max-width: 991.98px){
  .mr-trial-wrap{ padding: 26px 18px; text-align: center; }
  .mr-trial-sub{ margin-left: auto; margin-right: auto; }
  .mr-trial-li{ justify-content: center; }
  .mr-trial-stores{ justify-content: center; }
}

/* =========================
   AUTH MODAL
   ========================= */

.mr-auth-modal .modal-content{ background: transparent; border: none; }
.mr-auth-content{
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(180deg, #07061f 0%, #0B0F14 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 60px 180px rgba(0,0,0,0.75);
}

.mr-auth-left{
  padding: 50px 40px;
  background:
    radial-gradient(600px 300px at 30% 20%, rgba(var(--primary-rgb), 0.25), transparent 60%),
    linear-gradient(180deg, #08072a 0%, #0a0833 100%);
  display: flex;
  align-items: center;
}

.mr-auth-right{
  padding: 44px 38px;
  color: #fff;
  background: var(--secondary);
  border-left: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 991px){
  .mr-auth-right{
    padding: 28px 20px;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
}

.mr-auth-title{
  font-weight: 1000;
  margin: 8px 0 6px;
  letter-spacing: -0.3px;
}
.mr-auth-sub{
  color: rgba(255,255,255,0.70);
  margin: 0 0 14px;
  line-height: 1.6;
}

.mr-auth-right .form-label{
  color: rgba(255,255,255,0.78);
  font-weight: 900;
  margin-bottom: 8px;
}

.mr-auth-input{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  transition: .25s ease;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.mr-auth-input::placeholder{ color: rgba(255,255,255,0.45); }
.mr-auth-input:focus{
  background: rgba(255,255,255,0.06);
  border-color: rgba(var(--primary-rgb), 0.55);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
  color: #fff;
  outline: none;
}

.mr-forgot{
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-weight: 900;
  transition: .2s ease;
}
.mr-forgot:hover{ color: var(--primary); text-decoration: underline; }

.mr-link{
  color: var(--primary);
  font-weight: 1000;
  text-decoration: none;
}
.mr-link:hover{ text-decoration: underline; }

/* Social divider + icons */
.mr-auth-divider{
  position: relative;
  text-align: center;
  margin: 22px 0 18px;
}
.mr-auth-divider::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
.mr-auth-divider span{
  position: relative;
  background: #0B0F14;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,0.55);
  letter-spacing: .3px;
}

.mr-social-auth{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
}
.mr-social-icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}
.mr-social-icon:hover{
  transform: translateY(-3px);
  border-color: rgba(var(--primary-rgb), 0.4);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
}
.mr-social-icon.google:hover{ background: linear-gradient(135deg,#ea4335,#fbbc05,#34a853,#4285f4); }
.mr-social-icon.facebook:hover{ background: #1877F2; }
.mr-social-icon.instagram:hover{ background: linear-gradient(135deg,#f58529,#dd2a7b,#8134af,#515bd4); }
.mr-social-icon.phone:hover{ background: var(--primary); color: var(--secondary); }

.mr-pass-wrap{ position: relative; }
.mr-pass-toggle{
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.70);
  padding: 6px 8px;
  border-radius: 10px;
  transition: .2s ease;
}
.mr-pass-toggle:hover{
  color: var(--primary);
  background: rgba(var(--primary-rgb), 0.12);
}
@media (max-width: 576px){
  .mr-social-icon{ width: 38px; height: 38px; font-size: 16px; }
}

/* =========================
   TESTIMONIALS
   ========================= */

.mr-testimonials{
  background:
    radial-gradient(900px 520px at 20% 10%, rgba(var(--primary-rgb), 0.10), transparent 60%),
    radial-gradient(700px 420px at 90% 20%, rgba(var(--accent-rgb), 0.08), transparent 60%),
    linear-gradient(180deg, #0B0F14 0%, #07061f 55%, #0B0F14 100%);
}

.mr-tcard{
  height: 100%;
  padding: 24px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 30px 90px rgba(0,0,0,0.45);
  transition: .25s ease;
  position: relative;
  overflow: hidden;
}
.mr-tcard::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(700px 140px at 20% 0%, rgba(var(--primary-rgb),0.18), transparent 55%);
  opacity: 0;
  transition: .25s ease;
  pointer-events:none;
}
.mr-tcard:hover{
  transform: translateY(-8px);
  border-color: rgba(var(--primary-rgb), 0.22);
  box-shadow: 0 45px 120px rgba(0,0,0,0.60);
}
.mr-tcard:hover::before{ opacity: 1; }

.mr-tcard-top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.mr-stars{ display:flex; gap: 4px; color: var(--primary); font-size: 14px; }
.mr-verified{
  display:inline-flex;
  align-items:center;
  gap: 7px;
  padding: 8px 10px;
  border-radius: 999px;
  font-weight: 1000;
  font-size: 12px;
  color: rgba(255,255,255,0.88);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}
.mr-verified i{ color: var(--primary); }

.mr-tquote{
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-size: 15.2px;
  line-height: 1.8;
}
.mr-tuser{ display:flex; align-items:center; gap: 12px; margin-top: 18px; }
.mr-avatar{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 1000;
  color: var(--secondary);
  background: var(--primary);
  box-shadow: 0 18px 40px rgba(var(--primary-rgb), 0.20);
}
.mr-name{ font-weight: 1000; color: #fff; line-height: 1.1; }
.mr-meta{
  margin-top: 2px;
  color: rgba(255,255,255,0.55);
  font-weight: 800;
  font-size: 13px;
}

.mr-tcard-featured{
  background: rgba(var(--secondary-rgb), 0.45);
  border-color: rgba(var(--primary-rgb), 0.22);
  box-shadow: 0 55px 150px rgba(0,0,0,0.65);
}
.mr-tbadge{
  position:absolute;
  top: 18px;
  left: 18px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(var(--primary-rgb), 0.16);
  border: 1px solid rgba(var(--primary-rgb), 0.22);
  color: var(--primary);
  font-weight: 1000;
  font-size: 12px;
}

/* Swiper controls (testimonials) */
.mr-swiper-wrap{ position: relative; }
.mr-testimonial-swiper{ padding: 10px 6px 46px; }
.mr-testimonial-swiper .swiper-slide{ height: auto; }

.mr-swiper-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-55%);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: #fff;
  display: grid;
  place-items: center;
  z-index: 10;
  transition: .25s ease;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
}
.mr-swiper-btn:hover{
  transform: translateY(-55%) translateY(-2px);
  border-color: rgba(var(--primary-rgb), 0.25);
  background: rgba(var(--primary-rgb), 0.12);
}
.mr-prev{ left: -10px; }
.mr-next{ right: -10px; }
@media (max-width: 991.98px){
  .mr-prev{ left: 0; }
  .mr-next{ right: 0; }
}
@media (max-width: 576px){
  .mr-swiper-btn{ display:none; }
}

.mr-swiper-dots .swiper-pagination-bullet{
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,0.25);
  opacity: 1;
}
.mr-swiper-dots .swiper-pagination-bullet-active{ background: var(--primary); }

/* =========================
   APP SCREENS (Center + blur)
   (CLEANED: only one definition - duplicates removed)
========================= */

.app-screens-only{
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(var(--primary-rgb), .10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(50% 50% at 50% 100%, rgba(10,8,51,.55) 0%, rgba(0,0,0,0) 60%),
    var(--dark);
  padding: 40px 0;
}
.app-screens-only .container{ overflow: visible; }

.screensCenterSwiper{
  position: relative;
  height: min(86vh, 720px);
  overflow: visible;
  padding: 0 48px 46px;
}
@media (max-width: 575.98px){
  .screensCenterSwiper{ padding: 0 18px 42px; }
}

.screensCenterSwiper .swiper-wrapper{ align-items: center; }

.screensCenterSwiper .swiper-slide{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .35s ease;
  opacity: .35;
  filter: blur(3px);
  transform: scale(.86);
}
.screensCenterSwiper .swiper-slide-active{
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
.screensCenterSwiper .swiper-slide-prev,
.screensCenterSwiper .swiper-slide-next{
  opacity: .65;
  filter: blur(2px);
  transform: scale(.92);
}

.screen-shot{
  height: 100%;
  width: 100%;
  max-width: 520px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

.screen-shot img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* ✅ full screenshot visible */
  display: block;
}

.screensCenterSwiper .swiper-slide-active .screen-shot{
  border-color: rgba(var(--primary-rgb), .30);
  box-shadow: 0 34px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(var(--primary-rgb), .10) inset;
}

/* Nav */
.screens-nav-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  transition: .25s ease;
  backdrop-filter: blur(10px);
}
.screens-nav-btn:hover{
  transform: translateY(-50%) translateY(-2px);
  border-color: rgba(var(--primary-rgb), .35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.screensOnly-prev{ left: 10px; }
.screensOnly-next{ right: 10px; }
@media (max-width: 575.98px){
  .screensOnly-prev{ left: 6px; }
  .screensOnly-next{ right: 6px; }
}

/* Pagination */
.screensOnly-pagination{ bottom: 8px !important; }
.screensOnly-pagination .swiper-pagination-bullet{
  width: 9px;
  height: 9px;
  background: rgba(255,255,255,.22);
  opacity: 1;
  margin: 0 5px !important;
}
.screensOnly-pagination .swiper-pagination-bullet-active{ background: var(--primary); }

@media (max-width: 991.98px){
  .screensCenterSwiper{ height: min(78vh, 620px); }
  .screen-shot{ max-width: 460px; }
}
@media (max-width: 575.98px){
  .screensCenterSwiper{ height: min(72vh, 520px); }
  .screen-shot{ max-width: 92vw; padding: 12px; }
}

/* =========================
   FAQ
========================= */

.faq-section{
  background:
    radial-gradient(60% 60% at 20% 10%, rgba(var(--primary-rgb), .10) 0%, rgba(0,0,0,0) 60%),
    radial-gradient(60% 60% at 80% 90%, rgba(10,8,51,.45) 0%, rgba(0,0,0,0) 60%),
    var(--dark);
}

.faq-accordion{
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.02);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}

.faq-item{ background: transparent; border: 0; }
.faq-item + .faq-item{ border-top: 1px solid var(--border); }

.faq-btn{
  background: rgba(255,255,255,0.03);
  color: var(--text);
  font-weight: 1000;
  padding: 18px 18px;
  border: 0;
  box-shadow: none !important;
}
.faq-btn:focus{ box-shadow: none !important; }
.faq-btn:not(.collapsed){
  background: rgba(255,255,255,0.05);
  color: var(--text);
}

/* custom + / - */
.faq-btn::after{
  background-image: none !important;
  content: "+";
  font-weight: 1000;
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  transition: .25s ease;
}
.faq-btn:not(.collapsed)::after{
  content: "–";
  border-color: rgba(var(--primary-rgb), .35);
  background: rgba(var(--primary-rgb), .10);
}

.faq-body{
  color: var(--muted);
  padding: 0 18px 18px;
  font-size: 1rem;
  line-height: 1.7;
}

.faq-cta{
  border-radius: 22px;
  padding: 18px 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
}

.btn-outline-soft{
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.btn-outline-soft:hover{
  border-color: rgba(var(--primary-rgb), .35);
  color: var(--text);
  background: rgba(var(--primary-rgb), .08);
}

/* =========================
   FINAL CTA
========================= */

.final-cta{
  padding: 100px 0;
  background: radial-gradient(60% 60% at 50% 50%, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%), var(--dark);
}

.cta-card{
  position: relative;
  border-radius: 28px;
  padding: 60px 50px;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
  overflow: hidden;
}
.cta-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  padding: 1px;
  background: linear-gradient(120deg, rgba(var(--primary-rgb),0.5), transparent, rgba(var(--primary-rgb),0.4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.cta-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(var(--primary-rgb), 0.12);
  border: 1px solid rgba(var(--primary-rgb), 0.35);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
}

.cta-title{ font-size: 42px; font-weight: 900; color: var(--text); line-height: 1.2; }
.cta-subtitle{ color: var(--muted); font-size: 17px; max-width: 520px; }

.cta-benefits{ display: flex; flex-wrap: wrap; gap: 16px 28px; }
.benefit-item{ color: var(--text); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.benefit-item i{ color: var(--primary); font-size: 18px; }

.cta-main-btn{
  padding: 14px 28px;
  font-weight: 800;
  border-radius: 14px;
  box-shadow: 0 15px 40px rgba(var(--primary-rgb), 0.3);
  transition: 0.3s ease;
}
.cta-main-btn:hover{
  transform: translateY(-3px);
  box-shadow: 0 25px 60px rgba(var(--primary-rgb), 0.45);
}
.cta-secondary-btn{
  border-radius: 14px;
  padding: 14px 26px;
  border: 1px solid rgba(255,255,255,0.2);
}
.cta-trust{ color: var(--muted); font-size: 14px; }

.cta-mockup{ position: relative; display: inline-block; }
.cta-mockup img{
  max-height: 420px;
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7);
}

.floating-badge{
  position: absolute;
  background: rgba(18,24,38,0.9);
  border: 1px solid var(--border);
  backdrop-filter: blur(10px);
  color: var(--text);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
  animation: floatY 4s ease-in-out infinite;
}
.badge-1{ top: 10%; left: -20px; }
.badge-2{ bottom: 15%; right: -20px; animation-delay: 1.5s; }

@keyframes floatY{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-10px); }
}

@media (max-width: 992px){
  .cta-card{ padding: 40px 25px; text-align: center; }
  .cta-title{ font-size: 32px; }
  .cta-subtitle{ margin-left: auto; margin-right: auto; }
  .cta-benefits{ justify-content: center; }
}

/* =========================
   FOOTER
========================= */

.footer-saas{
  padding: 70px 0 28px;
  background:
    radial-gradient(60% 60% at 15% 0%, rgba(var(--primary-rgb), .10) 0%, rgba(0,0,0,0) 65%),
    radial-gradient(60% 60% at 85% 100%, rgba(10,8,51,.45) 0%, rgba(0,0,0,0) 65%),
    var(--dark);
}

.footer-card{
  border-radius: 28px;
  padding: 42px 34px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(14px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.6);
}

.footer-brand-name{
  color: var(--text);
  font-weight: 1000;
  letter-spacing: .02em;
  font-size: 1.1rem;
}
.footer-logo{
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.footer-text{
  color: var(--muted);
  line-height: 1.7;
  font-size: 0.98rem;
}

.footer-title{
  color: var(--text);
  font-weight: 900;
  margin-bottom: 14px;
}

.footer-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}
.footer-links a{
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  transition: .25s ease;
}
.footer-links a:hover{
  color: var(--text);
  transform: translateX(3px);
}

.footer-social{ display: flex; gap: 10px; }
.footer-social a{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--text);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  transition: .25s ease;
}
.footer-social a:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), .35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.store-badge{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  text-decoration: none;
  transition: .25s ease;
}
.store-badge i{ font-size: 20px; color: var(--primary); }
.store-badge small{ display: block; color: var(--muted); line-height: 1; font-size: 12px; }
.store-badge strong{ display: block; line-height: 1.1; font-size: 14px; font-weight: 900; }
.store-badge:hover{
  transform: translateY(-2px);
  border-color: rgba(var(--primary-rgb), .35);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.footer-newsletter .input-group-text{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--muted);
  border-right: 0;
  border-radius: 14px 0 0 14px;
}
.footer-newsletter .form-control{
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-left: 0;
  color: var(--text);
  border-radius: 0;
  padding: 12px 12px;
}
.footer-newsletter .form-control::placeholder{ color: rgba(255,255,255,0.45); }
.footer-newsletter .form-control:focus{
  box-shadow: none;
  border-color: rgba(var(--primary-rgb), .35);
}
.footer-newsletter .btn{
  border-radius: 0 14px 14px 0;
  padding: 12px 18px;
  font-weight: 900;
}

.footer-note{
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}

.footer-mini{ display: grid; gap: 10px; }
.mini-item{
  display: flex;
  gap: 10px;
  align-items: center;
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}
.mini-item i{ color: var(--primary); }

.footer-bottom{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}
.footer-copy{ color: rgba(255,255,255,0.65); }
.footer-legal a{
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: .25s ease;
}
.footer-legal a:hover{ color: var(--text); }

/* Back to top */
.back-to-top{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  color: var(--text);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .25s ease;
  z-index: 9999;
}
.back-to-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover{ border-color: rgba(var(--primary-rgb), .35); }
/* =========================
   FORGOT PASSWORD - FINAL FIX (matches screenshot)
   Paste at END of style.css
========================= */

.mr-auth-body{
  background: radial-gradient(circle at top, #0a0833 0%, #05041a 100%);
  min-height: 100vh;
}

/* Center wrapper (fix: section not looking centered / spacing issue) */
.mr-auth-page-wrap,
.mr-auth-section{
  min-height: calc(100vh - 86px);
  display: flex;
  align-items: center;
  padding: 40px 0;
}

/* Card like screenshot */
.mr-auth-card{
  background: rgba(18, 24, 38, 0.78);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 24px;
  padding: 42px 36px;
  backdrop-filter: blur(16px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.65);
}

/* Logo box spacing */
.mr-auth-logo{
  height: 110px;              /* screenshot size */
  width: auto;
  object-fit: contain;
  border-radius: 18px;
  margin-bottom: 18px;
}

/* Title/Sub */
.mr-auth-title{
  font-weight: 1000;
  font-size: clamp(28px, 3vw, 42px);
  color: #fff;
  letter-spacing: -0.6px;
  margin: 0 0 10px;
}

.mr-auth-sub{
  color: rgba(255,255,255,0.70);
  font-size: 15.5px;
  line-height: 1.7;
  margin: 0;
}

/* Label with icon */
.mr-label{
  color: rgba(255,255,255,0.85);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px 0 10px;
}

.mr-label i{
  color: rgba(255,255,255,0.75);
  font-size: 16px;
}

/* Input exactly like screenshot */
.mr-auth-input{
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
  transition: .25s ease;
}

.mr-auth-input::placeholder{
  color: rgba(255,255,255,0.40);
}

.mr-auth-input:focus{
  outline: none;
  background: rgba(255,255,255,0.06);
  border-color: rgba(var(--primary-rgb), 0.70);
  box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.14);
}

/* Big Button like screenshot */
.mr-auth-card .btn-mr-primary{
  width: 100%;
  border-radius: 16px;
  padding: 14px 18px;
  font-weight: 900;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 18px 40px rgba(var(--primary-rgb), 0.22);
}

.mr-auth-card .btn-mr-primary:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 60px rgba(var(--primary-rgb), 0.30);
}

/* Bottom links row like screenshot */
.mr-auth-links{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 18px;
}

.mr-auth-links a{
  color: rgba(244,197,66,0.95);
  font-weight: 900;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: .2s ease;
}

.mr-auth-links a:hover{
  color: #fff;
  transform: translateY(-1px);
}

/* Security note */
.mr-auth-note{
  margin-top: 18px;
  color: rgba(255,255,255,0.60);
  font-size: 13.5px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.mr-auth-note i{
  color: rgba(255,255,255,0.70);
}

/* Mobile */
@media (max-width: 576px){
  .mr-auth-card{
    padding: 30px 20px;
    border-radius: 20px;
  }
  .mr-auth-links{
    flex-direction: column;
    justify-content: center;
  }
}