/* MAS Landing Page — Custom Styles */

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}

/* ── Typography ── */
body{
  font-family: var(--mas-font);
  color: var(--mas-text);
  background: var(--mas-bg);
  line-height: var(--mas-leading);
  transition: background var(--mas-duration) var(--mas-ease), color var(--mas-duration) var(--mas-ease);
}
[dir="rtl"] body{ font-family: var(--mas-font-ar), var(--mas-font); }

/* ── Nav ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--mas-z-sticky);
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--mas-sp-3) var(--mas-sp-6);
  background:color-mix(in srgb, var(--mas-bg) 80%, transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--mas-border-soft);
}
.nav-brand{font-weight:700;font-size:1.25rem;color:var(--mas-primary);}
.nav-actions{display:flex;gap:var(--mas-sp-2);align-items:center;}
.nav-btn{
  border:none;background:var(--mas-bg-muted);color:var(--mas-text);
  padding:var(--mas-sp-2) var(--mas-sp-3);border-radius:var(--mas-radius);
  cursor:pointer;font-size:0.85rem;transition:var(--mas-transition);
}
.nav-btn:hover{background:var(--mas-primary-soft);color:var(--mas-primary);}

/* ── Hero ── */
.hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:var(--mas-sp-16) var(--mas-sp-6);
  background:linear-gradient(135deg, color-mix(in srgb, var(--mas-primary) 8%, var(--mas-bg)) 0%, var(--mas-bg) 50%, color-mix(in srgb, var(--mas-secondary) 5%, var(--mas-bg)) 100%);
}
.hero-title{
  font-size:clamp(2rem, 5vw, 3.5rem);font-weight:800;
  line-height:1.2;margin-bottom:var(--mas-sp-4);
  background:linear-gradient(135deg, var(--mas-primary), var(--mas-secondary));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-sub{
  font-size:clamp(1rem, 2.5vw, 1.25rem);color:var(--mas-text-soft);
  max-width:600px;margin-bottom:var(--mas-sp-8);
}
.hero-actions{display:flex;gap:var(--mas-sp-3);flex-wrap:wrap;justify-content:center;}

/* ── Buttons ── */
.btn{
  display:inline-flex;align-items:center;gap:var(--mas-sp-2);
  padding:var(--mas-sp-3) var(--mas-sp-6);border-radius:var(--mas-radius-lg);
  font-weight:600;font-size:1rem;text-decoration:none;cursor:pointer;
  border:none;transition:var(--mas-transition);
}
.btn-primary{background:var(--mas-primary);color:#fff;box-shadow:var(--mas-shadow-md);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--mas-shadow-lg);}
.btn-ghost{background:transparent;color:var(--mas-text);border:1px solid var(--mas-border);}
.btn-ghost:hover{background:var(--mas-bg-muted);}

/* ── Section ── */
.section{padding:var(--mas-sp-16) var(--mas-sp-6);max-width:1200px;margin:0 auto;}
.section-title{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:700;text-align:center;margin-bottom:var(--mas-sp-2);}
.section-sub{text-align:center;color:var(--mas-text-soft);margin-bottom:var(--mas-sp-12);max-width:600px;margin-inline:auto;}

/* ── Features Grid ── */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--mas-sp-6);}
.feature-card{
  padding:var(--mas-sp-6);border-radius:var(--mas-radius-xl);
  background:var(--mas-bg-elevated);border:1px solid var(--mas-border-soft);
  transition:var(--mas-transition);
}
.feature-card:hover{transform:translateY(-4px);box-shadow:var(--mas-shadow-lg);border-color:var(--mas-primary);}
.feature-icon{font-size:2rem;margin-bottom:var(--mas-sp-3);}
.feature-title{font-weight:600;font-size:1.1rem;margin-bottom:var(--mas-sp-2);}
.feature-desc{color:var(--mas-text-soft);font-size:0.9rem;}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--mas-sp-8);counter-reset:step;}
.step{text-align:center;}
.step::before{
  counter-increment:step;content:counter(step);
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:50%;
  background:var(--mas-primary);color:#fff;font-weight:700;font-size:1.25rem;
  margin-bottom:var(--mas-sp-3);
}
.step-title{font-weight:600;margin-bottom:var(--mas-sp-2);}
.step-desc{color:var(--mas-text-soft);font-size:0.9rem;}

/* ── Code Block ── */
.code-block{
  background:var(--mas-bg-muted);border-radius:var(--mas-radius);
  padding:var(--mas-sp-4);margin-top:var(--mas-sp-3);
  font-family:var(--mas-font-mono);font-size:0.8rem;
  overflow-x:auto;text-align:left;direction:ltr;color:var(--mas-text-soft);
}

/* ── Pricing ── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--mas-sp-6);}
.price-card{
  padding:var(--mas-sp-8);border-radius:var(--mas-radius-xl);text-align:center;
  background:var(--mas-bg-elevated);border:1px solid var(--mas-border-soft);
}
.price-card.featured{border-color:var(--mas-primary);box-shadow:0 0 0 2px var(--mas-ring);}
.price-name{font-weight:600;margin-bottom:var(--mas-sp-2);}
.price-amount{font-size:2.5rem;font-weight:800;color:var(--mas-primary);margin-bottom:var(--mas-sp-4);}
.price-amount small{font-size:0.9rem;font-weight:400;color:var(--mas-text-muted);}
.price-features{list-style:none;margin-bottom:var(--mas-sp-6);text-align:start;}
.price-features li{padding:var(--mas-sp-2) 0;border-bottom:1px solid var(--mas-border-soft);font-size:0.9rem;}
.price-features li::before{content:"✓ ";color:var(--mas-success);}

/* ── Footer ── */
.footer{
  padding:var(--mas-sp-8) var(--mas-sp-6);text-align:center;
  border-top:1px solid var(--mas-border-soft);color:var(--mas-text-muted);font-size:0.85rem;
}
.footer-links{display:flex;gap:var(--mas-sp-4);justify-content:center;margin-bottom:var(--mas-sp-4);flex-wrap:wrap;}
.footer-links a{color:var(--mas-text-soft);text-decoration:none;}
.footer-links a:hover{color:var(--mas-primary);}

/* ── Animations ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.animate{animation:fadeUp 0.6s ease forwards;opacity:0;}
.animate:nth-child(2){animation-delay:0.1s;}
.animate:nth-child(3){animation-delay:0.2s;}
.animate:nth-child(4){animation-delay:0.3s;}
.animate:nth-child(5){animation-delay:0.4s;}
.animate:nth-child(6){animation-delay:0.5s;}

/* ── Mobile ── */
@media(max-width:768px){
  .nav{padding:var(--mas-sp-3) var(--mas-sp-4);}
  .hero{padding:var(--mas-sp-12) var(--mas-sp-4);}
  .hero-actions{flex-direction:column;align-items:center;}
  .section{padding:var(--mas-sp-8) var(--mas-sp-4);}
}