/* =========================
   FINAL FULL style.css
   ========================= */

/* === Variables === */
:root{
  --bg: #ffffff;
  --text: #2f2f33;
  --muted: #151515;

  /* UPDATED BLUE COLORS */
  --purple-500: #0050d8;
  --purple-600: #003ca5;
  --purple-100: rgba(0,80,216,0.06);

  --green: #31c46c;
  --badge-bg: #f6f3ff;
}

/* === Reset === */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* === HERO SECTION === */
.hero{
  max-width:1400px;
  margin:0 auto;
  padding:72px 28px 40px;
  text-align:center;
}

/* === Discount Badge === */
.discount-badge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 22px;
  border-radius:40px;
  background: var(--badge-bg);

  /* UPDATED BORDER COLOR */
  border: 1px solid rgba(0,80,216,0.08);

  color:var(--text);
  font-weight:600;
  font-size:13px;
  letter-spacing:0.5px;
  margin-bottom:36px;
}

/* Blinking Dot */
.discount-badge .dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background: var(--green);
  box-shadow:0 0 0 4px rgba(49,196,108,0.12);
  animation:dotPulse 1.2s infinite ease-in-out;
}

/* === Title === */
.hero-title{
  font-size:56px;
  line-height:1.08;
  font-weight:800;
  color:var(--text);
  margin:6px 0 18px;
  letter-spacing:-0.6px;
}

/* UPDATED BLUE TITLE */
.hero-title .purple{ color:#0050d8 }

/* === Subtitle === */
.subtext{
  max-width:980px;
  margin:0 auto 36px;
  font-size:19px;
  color:var(--muted);
  font-weight:500;
}

/* =========================
     BUTTON LAYOUT (SPREAD)
   ========================= */

.hero-buttons{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width:1200px;
  margin:30px auto 0;
  padding:0 20px;
}

.hero-buttons .left{  justify-self:start; }
.hero-buttons .center{ justify-self:center; }
.hero-buttons .right{ justify-self:end; }

/* === Button Base === */
.btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  text-decoration:none;
  font-weight:700;
  border-radius:20px;
  padding:16px 40px;
  font-size:17px;
  min-height:56px;
  cursor:pointer;
  transition:0.15s ease;
  user-select:none;
  min-width:220px;
  max-width:340px;
}

/* === OUTLINE BUTTONS === */
.btn.outline{
  background: var(--purple-100);

  /* UPDATED BORDER + TEXT BLUE */
  color:#0050d8;
  border:3.2px solid var(--purple-500);

  box-shadow:0 2px 0 rgba(0,80,216,0.12);
}

.left{ border-radius:28px; }
.right{ border-radius:28px; }

/* === SOLID BUTTON === */
.btn.solid{
  background:linear-gradient(90deg, var(--purple-500), var(--purple-600));
  color:#fff;
  border:none;
  border-radius:14px;
  padding-left:48px;
  padding-right:48px;

  /* REMOVED blue glow */
  box-shadow:none;
}


/* Hover */
.btn:hover{ transform:translateY(-4px); }
.btn:active{ transform:translateY(-1px); }

/* === Divider Line === */
.divider{
  height:2px;
  width:100%;
  max-width:1400px;
  margin:40px auto 0;

  /* UPDATED BLUE GRADIENT */
  background:linear-gradient(90deg, rgba(0,80,216,0.06), rgba(0,80,216,0.18));
}

/* =========================
     RESPONSIVE
   ========================= */
@media(max-width:1100px){
  .hero-title{ font-size:46px }
  .subtext{ font-size:17px }
}

@media(max-width:900px){
  .hero-buttons{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:720px;
  }
  .btn{
    width:100%;
    max-width:100%;
  }
  .hero-title{ font-size:34px }
  .subtext{ font-size:15px }
}

@media(max-width:420px){
  .hero{ padding:44px 16px 28px }
  .hero-title{ font-size:28px }
  .btn{ padding:12px 20px; font-size:15px }
}

/* =========================
      DOT BLINK
   ========================= */
@keyframes dotPulse{
  0%{ transform:scale(0.95); opacity:0.92; box-shadow:0 0 0 4px rgba(49,196,108,0.12); }
  55%{ transform:scale(1.18); opacity:1; box-shadow:0 0 18px 6px rgba(49,196,108,0.09); }
  100%{ transform:scale(0.96); opacity:0.95; box-shadow:0 0 0 4px rgba(49,196,108,0.12); }
}

/* support code */
