:root {
  --ink: #2d2836;
  --muted: #6f6878;
  --lavender: #8f73bd;
  --lavender-dark: #6e5599;
  --lavender-soft: #f3eef9;
  --cream: #fffdf9;
  --white: #ffffff;
  --border: rgba(91, 70, 115, 0.14);
  --shadow: 0 24px 70px rgba(73, 55, 92, 0.13);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Raleway", sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.7;
}

h1, h2, h3 {
  font-family: "Alike", serif;
  color: var(--ink);
  line-height: 1.15;
}

p { color: var(--muted); }
a { text-decoration: none; }

.site-header {
  background: rgba(255, 253, 249, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(91, 70, 115, 0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.brand-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.nav-link {
  color: var(--ink);
  font-weight: 600;
  padding: .65rem .8rem !important;
}

.nav-link:hover { color: var(--lavender-dark); }

.btn-soft {
  border-radius: 999px;
  padding: .7rem 1.25rem;
  background: var(--lavender-soft);
  color: var(--lavender-dark);
  font-weight: 700;
}

.hero {
  padding: 88px 0 96px;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 12%, rgba(184, 156, 220, .22), transparent 32%),
    linear-gradient(180deg, #fffdf9 0%, #fbf8ff 100%);
}

.eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  color: var(--lavender-dark);
  text-transform: uppercase;
  letter-spacing: .15em;
  font-size: .78rem;
  font-weight: 800;
}

.hero h1 {
  font-size: clamp(2.7rem, 5vw, 5rem);
  max-width: 780px;
  margin-bottom: 1.4rem;
}

.hero-copy {
  font-size: 1.15rem;
  max-width: 650px;
  margin-bottom: 1.7rem;
}

.trust-points {
  display: grid;
  gap: .8rem;
  margin: 1.7rem 0 2rem;
  color: #51495c;
  font-weight: 600;
}

.trust-points span {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  margin-right: .55rem;
  border-radius: 50%;
  background: #eee6f9;
  color: var(--lavender-dark);
  font-size: .9rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.btn-primary-custom {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  background: var(--lavender-dark);
  color: white;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(110, 85, 153, .22);
  transition: .2s ease;
}

.btn-primary-custom:hover {
  color: white;
  background: #5f4886;
  transform: translateY(-2px);
}

.btn-link-custom {
  color: var(--ink);
  font-weight: 700;
}

.btn-link-custom:hover { color: var(--lavender-dark); }

.book-note {
  max-width: 610px;
  border-left: 4px solid #bfa6de;
  background: rgba(255,255,255,.72);
  padding: .9rem 1rem;
  border-radius: 0 12px 12px 0;
  color: #5f5868;
  font-size: .95rem;
}

.hero-image-wrap {
  position: relative;
  padding: 18px;
}

.hero-image {
  width: 100%;
  aspect-ratio: 1.05 / 1;
  object-fit: cover;
  border-radius: 34px 34px 120px 34px;
  box-shadow: var(--shadow);
}

.floating-quote {
  position: absolute;
  left: -8px;
  bottom: 42px;
  max-width: 270px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  box-shadow: 0 15px 35px rgba(59, 46, 72, .12);
  font-family: "Alike", serif;
  color: var(--lavender-dark);
  font-size: 1.05rem;
}

.section { padding: 96px 0; }

.founder-section { background: white; }

.portrait-frame {
  position: relative;
  max-width: 470px;
  margin: 0 auto;
}

.portrait-frame::before {
  content: "";
  position: absolute;
  inset: 22px -18px -22px 18px;
  border-radius: 30px;
  background: #efe7f7;
}

.founder-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 620px;
  object-fit: cover;
  object-position: center 20%;
  border-radius: 30px;
  box-shadow: var(--shadow);
}

.founder-section h2,
.values-section h2,
.product-section h2,
.connect-section h2 {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  margin-bottom: 1.4rem;
}

.founder-section p,
.product-section p {
  font-size: 1.08rem;
}

.lead-quote {
  color: #4d4458;
  font-family: "Alike", serif;
  font-size: 1.35rem !important;
  line-height: 1.6;
}

.founder-message {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  border-radius: 18px;
  background: var(--lavender-soft);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  color: var(--lavender-dark);
}

.founder-message strong { color: var(--ink); }

.values-section {
  background: linear-gradient(180deg, #f7f1fc 0%, #fbf9fd 100%);
}

.section-heading { max-width: 760px; }
.section-heading p { font-size: 1.08rem; }

.value-card {
  padding: 2rem;
  background: rgba(255,255,255,.83);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 12px 40px rgba(68, 49, 86, .07);
  transition: transform .2s ease, box-shadow .2s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 45px rgba(68, 49, 86, .11);
}

.value-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.2rem;
  border-radius: 14px;
  background: var(--lavender-soft);
  color: var(--lavender-dark);
  font-weight: 800;
}

.value-card h3 { font-size: 1.65rem; margin-bottom: .8rem; }

.product-section { background: white; }

.product-image-card {
  padding: 14px;
  border-radius: 30px;
  background: #f2eaf8;
  box-shadow: var(--shadow);
}

.product-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 22px;
}

.product-lead {
  color: #4d4458 !important;
  font-family: "Alike", serif;
  font-size: 1.35rem !important;
}

.product-points {
  display: grid;
  gap: .8rem;
  margin-top: 1.4rem;
}

.product-points div {
  padding: .8rem 1rem;
  border-left: 3px solid #c3addd;
  background: #fbf8fd;
  color: #5b5365;
  font-weight: 600;
}

.connect-section {
  padding: 72px 0 88px;
  background: #2f2937;
}

.connect-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 3.4rem 2rem;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(245,238,251,.96));
  box-shadow: 0 28px 70px rgba(0,0,0,.18);
}

.connect-card p {
  max-width: 680px;
  margin: 0 auto 1.8rem;
  font-size: 1.05rem;
}

.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.social-links a {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 150px;
  padding: .8rem 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  color: var(--ink);
  font-weight: 700;
  transition: .2s ease;
}

.social-links a:hover {
  transform: translateY(-2px);
  border-color: rgba(110,85,153,.3);
}

.social-links img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 8px;
}

.site-footer {
  padding: 24px 0;
  background: #241f2a;
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-footer p {
  color: rgba(255,255,255,.65);
  font-size: .86rem;
}

@media (max-width: 991.98px) {
  .brand-logo { width: 72px; height: 72px; }
  .hero { padding-top: 60px; }
  .hero-image-wrap { margin-top: 1rem; }
  .floating-quote { left: 4px; bottom: 25px; }
}

@media (max-width: 767.98px) {
  .section { padding: 72px 0; }
  .hero { padding: 54px 0 72px; }
  .hero h1 { font-size: clamp(2.45rem, 12vw, 3.6rem); }
  .hero-image { border-radius: 26px 26px 70px 26px; }
  .floating-quote { position: static; margin: -18px 18px 0; max-width: none; }
  .portrait-frame::before { inset: 14px -10px -14px 10px; }
  .connect-card { padding: 2.4rem 1.25rem; }
}