/* -------- Brand Tokens -------- */
:root{
  --primary:  #D94189;   /* Primary */
  --blush:    #F74888;   /* Soft Blush */
  --ivory:    #FFF5F5;   /* Ivory */
  --charcoal: #2B2B2B;   /* Charcoal */
  --lavender: #C2A7F2;   /* Lavender Glow (approx – update if needed) */

  --text: var(--charcoal);
  --text-muted: #5a5a5a;
  --bg: var(--ivory);
  --surface: #ffffff;
  --border: rgba(43,43,43,0.12);
  --shadow: 0 10px 25px rgba(43,43,43,0.08);
  --radius: 16px;
  --focus: 0 0 0 3px rgba(217,65,137,0.25); /* primary focus ring */
}

/* -------- Base / Typography -------- */
html,body{
  padding:0; margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: Inter, "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height:1.6;
}

h1,h2,h3,.display{
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--text);
  letter-spacing:.2px;
}

h1{ font-size: clamp(2.2rem, 4vw, 3.25rem); margin: 0.2em 0; }
h2{ font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin: 0.6em 0 0.35em; }
h3{ font-size: clamp(1.25rem, 2vw, 1.5rem);  margin: 0.8em 0 0.35em; }

p{ margin: .75rem 0; color: var(--text-muted); }

/* Slogan/Tagline accent */
.tagline{
  font-family: "Playfair Display", Georgia, serif;
  color: var(--primary);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
}

/* -------- Layout Helpers -------- */
.container{
  max-width: 1000px; margin: 0 auto; padding: 24px;
}

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

/* -------- Links & Buttons -------- */
a{ color: var(--primary); text-decoration: none; }
a:hover{ text-decoration: underline; }

.button{
  display:inline-block;
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .08s ease, box-shadow .15s ease, background .2s ease;
}

.button.primary{
  background: var(--primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(217,65,137,0.28);
}
.button.primary:hover{ transform: translateY(-1px); }
.button.primary:active{ transform: translateY(0); }

.button.secondary{
  background: var(--lavender);
  color: var(--charcoal);
}
.button.ghost{
  background: transparent;
  color: var(--primary);
  border: 2px solid var(--primary);
}

/* -------- Hero -------- */
.hero{
  padding: 72px 0;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(194,167,242,0.25), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(247,72,136,0.12), transparent 60%),
    var(--bg);
  text-align: center;
}

.hero .kicker{
  font-weight: 600;
  color: var(--blush);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* -------- Logo -------- */
.logo{
  opacity: .3;              /* requested logo opacity */
  display:inline-block;
  height: auto;
  max-width: 180px;         /* adjust as needed */
}

/* If your logo is an <img> inside a wrapper, you can also target it: */
.logo img{ opacity: .3; }

/* -------- Badges / Chips -------- */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border-radius:999px; font-size:.9rem;
  background: rgba(217,65,137,0.1); color: var(--primary);
  border:1px solid rgba(217,65,137,0.22);
}

/* -------- Forms -------- */
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  outline:none; transition: box-shadow .12s ease, border-color .12s ease;
}
input:focus, textarea:focus{
  border-color: var(--primary);
  box-shadow: var(--focus);
}

/* -------- Footer -------- */
footer{
  margin-top: 64px;
  padding: 32px 0;
  background: linear-gradient(0deg, rgba(43,43,43,0.03), rgba(43,43,43,0.03));
  color: var(--text);
}
footer a{ color: var(--primary); }

/* -------- Utilities -------- */
.text-primary{ color: var(--primary); }
.text-lavender{ color: var(--lavender); }
.bg-primary{ background: var(--primary); color:#fff; }
.bg-lavender{ background: var(--lavender); }
.bg-ivory{ background: var(--ivory); }
.border{ border:1px solid var(--border); }
.round{ border-radius: var(--radius); }
.center{ text-align:center; }
.mt-32{ margin-top:32px; }