/* ================================
   Global Styles & Variables
=================================== */
:root{
  --my5-purple: #1b1b5f;
  --my5-purple-soft: #25257a;
  --my5-pink: #ff2e8b;
  --bg-light: #f6f4ff;
  --bg-white: #ffffff;
  --text-main: #111827;
  --text-muted: #6b7280;
  --border-soft: #e5e7eb;

  /* Type scale */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 32px;
  --container-max: 1120px;
  --gap: 24px;
}

/* Reset / box-sizing */
*,
*::before,
*::after { box-sizing: border-box; }

/* Base */
html,body{ margin:0; padding:0; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg-white);
  color: var(--text-main);
  line-height: 1.6;
  font-size: var(--fs-md);
  -webkit-text-size-adjust: 100%;
}

/* Layout helpers */
.container{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* Small utility */
.u-center{ text-align:center; }

/* ================================
   Top Bar
=================================== */
.top-bar{
  background: var(--my5-purple);
  color:#fff;
  font-size: var(--fs-sm);
  text-align:center;
  padding:8px 12px;
}

/* ================================
   Header / Navbar
=================================== */
.site-header{
  background: var(--my5-purple);
  padding: 12px 0;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: var(--gap);
  padding: 0 16px;
}

/* logo area */
.site-logo-wrap{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.site-logo{ width:40px; height:40px; display:block; }
.site-name-left{ font-size: var(--fs-lg); font-weight:700; color:#fff; text-decoration:none; }

/* nav */
.main-nav{
  display:flex;
  align-items:center;
  gap: 12px;
  flex:1;
  justify-content:center;
  flex-wrap:wrap; /* allow wrap on narrow screens */
  padding: 6px 0;
}

.main-nav a{
  color:#ffffff;
  text-decoration:none;
  font-size:var(--fs-sm);
  padding:6px 12px;
  border-radius:999px;
  transition: none;
}

.nav-btn{
  background:#ffffff;
  color:var(--my5-purple);
  padding:8px 16px;
  border-radius:999px;
  font-weight:600;
  border:1px solid #ffffff;
  text-decoration:none;
  display:inline-block;
  white-space:nowrap;
}

/* ================================
   Hero
=================================== */
.hero{
  background: #ffffff;
  color:var(--text-main);
  padding: 48px 0 56px;
  border-bottom: 1px solid var(--border-soft);
}

.hero-inner-centered,
.hero-centered .hero-content{
  max-width:760px;
  margin: 0 auto;
  text-align:center;
  padding: 0 8px;
}

.hero-title-tag{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  font-size:12px;
  background: rgba(27,27,95,0.06);
  color:var(--my5-purple);
  margin-bottom:14px;
}

.hero h1{
  font-size:var(--fs-xl);
  line-height:1.15;
  margin: 8px 0 14px;
  color:var(--my5-purple);
}

.hero p.hero-subtitle{
  font-size:var(--fs-md);
  color:var(--text-muted);
  margin-bottom:22px;
}

.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
}

/* ================================
   Buttons
=================================== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 20px;
  border-radius:999px;
  font-size:var(--fs-sm);
  font-weight:500;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  min-height:40px;
}

.btn-primary{
  background:var(--my5-pink);
  color:#fff;
  border-color:var(--my5-pink);
}

.btn-secondary{
  background:transparent;
  color:var(--my5-purple);
  border:1px solid var(--my5-purple);
}

/* Make buttons full width on small devices for touch targets */
@media (max-width:640px){
  .hero-actions .btn{ min-width: 100%; width:100%; max-width: 420px; }
  .hero-actions{ gap:12px; padding:0 12px; }
}

/* ================================
   Sections / Spacing
=================================== */
.section{ padding:48px 0; background:transparent; }
.section h2{ color:var(--my5-purple); margin-bottom:12px; font-size:var(--fs-lg); }
.section-intro{ color:var(--text-muted); margin-bottom:18px; font-size:var(--fs-md); }

/* grid helpers */
.two-column{
  display:grid;
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr);
  gap: var(--gap);
}

/* Steps grid: 3 columns desktop, then 2, then 1 */
.steps-grid{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:18px;
}

.step-card{
  background:#ffffff;
  padding:16px;
  border-radius:16px;
  border:1px solid var(--border-soft);
  position:relative;
}

.step-card h3{ color:var(--my5-purple); margin:8px 0 6px; font-size:16px; }
.step-card p{ color:var(--text-muted); font-size:14px; }

.step-number{
  position:absolute;
  top:12px;
  right:12px;
  width:28px; height:28px;
  border-radius:999px;
  background:var(--my5-pink);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
}

/* FAQ */
.faq-list{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:18px;
}

.faq-item{
  background:#ffffff;
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:16px;
}

/* Callout box */
.callout-box{
  background:var(--my5-purple-soft);
  color:#fff;
  padding:16px;
  border-radius:16px;
}

.callout-box a{ color:#ffe6f5; text-decoration:underline; }

/* Note / info box */
.note-box{
  margin-top:16px;
  background:#fff7fb;
  border-radius:12px;
  padding:12px 14px;
  border:1px solid #ffd0eb;
  color:#9d174d;
  font-size:14px;
}

/* Contact box */
.contact-box{
  background:#ffffff;
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:16px;
}

/* ================================
   Split layout with left-panel background
   (App Stuck section) — reusable
=================================== */
.split-bg{
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:24px;
  align-items:start;
}

.split-bg .left-panel{
  background: var(--bg-light);
  padding:28px;
  border-radius:12px;
  border:1px solid var(--border-soft);
  color:var(--text-main);
  min-height:160px;
}

.split-bg .left-panel h3{ margin-top:0; color:var(--my5-purple); font-size:18px; }
.split-bg .left-panel ul{ margin:12px 0 0; padding-left:20px; font-size:15px; line-height:1.6; color:var(--text-main); }
.split-bg .right-panel .callout-box{ margin:0; padding:16px; border-radius:12px; }

/* ================================
   Footer
=================================== */
.site-footer{
  background:#050516;
  color:#e5e7eb;
  padding:40px 0 28px;
  margin-top:40px;
}

.footer-container{
  max-width:var(--container-max);
  margin:0 auto;
  padding:0 16px;
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:40px;
}

.footer-title{ font-size:18px; color:#fff; margin-bottom:8px; }
.footer-text{ color:#cbd5e1; line-height:1.6; }
.footer-col a{ color:#cbd5e1; text-decoration:none; }
.footer-copy{ text-align:center; margin-top:32px; color:#9ca3af; padding-top:16px; border-top:1px solid rgba(255,255,255,0.04); }

/* ================================
   Utility: readable focus states
=================================== */
a:focus, button:focus, .btn:focus{
  outline:3px solid rgba(27,27,95,0.12);
  outline-offset:2px;
  box-shadow:none;
}

/* ================================
   Responsive breakpoints
   - large desktop: default
   - laptop/tablet: <= 1024px -> tweak spacing & grid
   - narrow tablet / large phone: <= 880px -> 2 columns for steps/faq, header stacks
   - phone: <= 640px -> single column everywhere, touch-friendly sizes
=================================== */

/* medium screens: reduce hero padding and grid counts */
@media (max-width:1024px){
  .hero{ padding:40px 0 48px; }
  .steps-grid{ grid-template-columns: repeat(2, 1fr); }
  .faq-list{ grid-template-columns: repeat(2, 1fr); }
  .footer-container{ grid-template-columns: repeat(2, 1fr); }
  .split-bg{ grid-template-columns: 1fr 320px; }
}

/* tablet / small laptop */
@media (max-width:880px){
  /* header stacks */
  .header-inner{ flex-direction:column; align-items:flex-start; gap:12px; padding: 12px; }
  .main-nav{ justify-content:flex-start; }
  .nav-btn{ margin-top:8px; }

  /* columns collapse */
  .two-column, .steps-grid, .faq-list{ grid-template-columns: 1fr; }
  .footer-container{ grid-template-columns: 1fr; text-align:left; padding: 24px 16px; }

  /* split background stacks */
  .split-bg{ grid-template-columns: 1fr; }
  .split-bg .right-panel{ margin-top:12px; }

  /* hero sizing */
  .hero{ padding: 36px 0 40px; }
}

/* phones */
@media (max-width:640px){
  :root{ --fs-md: 15px; --fs-sm: 13px; --fs-lg: 18px; --fs-xl: 26px; }
  .hero h1{ font-size:var(--fs-xl); }
  .hero{ padding: 28px 0 32px; }
  .container{ padding: 0 12px; }

  .steps-grid, .faq-list{ grid-template-columns: 1fr; gap:14px; }
  .step-card{ padding:14px; border-radius:12px; }

  /* footer compact */
  .footer-container{ gap:20px; padding: 16px; }
  .footer-copy{ font-size:13px; }

  /* buttons full width */
  .btn{ width:100%; justify-content:center; max-width:100%; }

  /* reduce side padding on panels */
  .split-bg .left-panel{ padding:18px; }
  .split-bg .right-panel .callout-box{ padding:14px; }
}

/* very small phones */
@media (max-width:420px){
  .hero h1{ font-size:22px; }
  .hero p.hero-subtitle{ font-size:14px; }
  .site-name-left{ font-size:18px; }
  .step-number{ width:26px; height:26px; font-size:12px; }
}