/* Sangam Skin — homepage sections. */

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 88px 0 100px;
  background: linear-gradient(180deg, #FDF6EE 0%, #F6E3D7 55%, #F9F0E8 100%);
}
.hero__glow {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.55; pointer-events: none;
}
.hero__glow--a { width: 480px; height: 480px; background: #E7C6BA; top: -160px; right: -120px; }
.hero__glow--b { width: 360px; height: 360px; background: #C9A227; opacity: 0.18; bottom: -140px; left: -100px; }
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center;
}
.hero__copy h1 {
  font-size: 56px; letter-spacing: -1.2px; margin-top: 16px; color: var(--ink);
}
.hero__sub { font-size: 18px; color: var(--ink-soft); margin-top: 20px; max-width: 520px; line-height: 1.6; }
.hero__ctas { display: flex; gap: 16px; margin-top: 36px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 40px; margin-top: 56px; }
.hero__stats div { display: flex; flex-direction: column; }
.hero__stats strong { font-family: var(--font-serif); font-size: 30px; color: var(--green); }
.hero__stats span { font-size: 12.5px; color: var(--ink-faint); margin-top: 2px; }
.hero__min { font-size: 15px; }

.hero__visual { position: relative; height: 420px; }
.hero__card {
  position: absolute; background: #fff; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-raised); padding: 32px;
}
.hero__card--main {
  width: 300px; left: 50%; top: 10px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px;
}
.hero__card-title { font-family: var(--font-serif); font-size: 19px; font-weight: 700; margin-top: 6px; }
.hero__ring { position: relative; display: flex; align-items: center; justify-content: center; margin: 14px 0; }
.hero__ring span { position: absolute; font-family: var(--font-serif); font-weight: 700; font-size: 20px; color: var(--ink); }
.hero__card-note { font-size: 13px; color: var(--ink-faint); }
.hero__card--float {
  width: 220px; right: -8px; bottom: 12px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.hero__float-title { font-size: 14px; font-weight: 600; }

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 56px; }
  .hero__copy h1 { font-size: 40px; }
  .hero__visual { height: 340px; }
  .hero__card--main { width: 260px; }
  .hero__card--float { width: 190px; right: 0; }
}
@media (max-width: 560px) {
  .hero { padding: 56px 0 72px; }
  .hero__copy h1 { font-size: 32px; }
  .hero__stats { gap: 24px; flex-wrap: wrap; }
}

/* ---------- how it works ---------- */
.how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.how__step { padding: 8px 0; }
.how__num { font-family: var(--font-serif); font-size: 32px; color: var(--gold); opacity: 0.7; }
.how__step h3 { font-size: 18px; margin-top: 12px; }
.how__step p { font-size: 14.5px; color: var(--ink-soft); margin-top: 10px; line-height: 1.6; }
@media (max-width: 860px) { .how__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .how__grid { grid-template-columns: 1fr; } }

/* ---------- skin lens teaser ---------- */
.lens-teaser { background: var(--cream); }
.lens-teaser__inner { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 72px; align-items: center; }
.lens-mock {
  position: relative; width: 260px; height: 320px; margin: 0 auto;
  background: linear-gradient(160deg, #2A211D, #14100E); border-radius: 28px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-raised);
}
.lens-mock__frame { position: absolute; top: 30px; left: 30px; }
.lens-mock__scan {
  position: absolute; left: 12%; right: 12%; height: 2px;
  background: linear-gradient(90deg, transparent, #A47764, transparent);
  animation: lens-scan 2.6s ease-in-out infinite;
}
@keyframes lens-scan { 0%, 100% { top: 14%; } 50% { top: 82%; } }
.lens-mock__score {
  position: absolute; bottom: 26px; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-md);
  padding: 12px 22px; text-align: center; backdrop-filter: blur(6px);
}
.lens-mock__score span { display: block; font-family: var(--font-serif); font-size: 30px; color: #F3EFE7; }
.lens-mock__score small { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #B9AFA0; }
.lens-teaser__copy h2 { font-size: 34px; margin-top: 12px; letter-spacing: -0.4px; }
.lens-teaser__copy > p { font-size: 16px; color: var(--ink-soft); margin-top: 16px; line-height: 1.65; max-width: 480px; }
.lens-teaser__list { margin: 24px 0 32px; display: flex; flex-direction: column; gap: 12px; }
.lens-teaser__list li {
  font-size: 14.5px; color: var(--ink); padding-left: 26px; position: relative;
}
.lens-teaser__list li::before {
  content: '✓'; position: absolute; left: 0; top: 0; color: var(--accent); font-weight: 700;
}
@media (max-width: 860px) {
  .lens-teaser__inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .lens-teaser__list { align-items: center; }
  .lens-teaser__list li { padding-left: 0; }
  .lens-teaser__list li::before { position: static; margin-right: 8px; }
}

/* ---------- featured products ---------- */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.product-card {
  display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.product-card:hover { box-shadow: var(--shadow-raised); transform: translateY(-3px); border-color: var(--line-mid); }
.product-card__tile { width: 56px; height: 56px; font-size: 16px; letter-spacing: 0.3px; }
.product-card__body h4 { font-size: 15.5px; margin-top: 10px; line-height: 1.3; }
.product-card__body p {
  font-size: 13px; color: var(--ink-faint); margin-top: 6px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 980px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .product-grid { grid-template-columns: 1fr; } }

/* ---------- ingredient science ---------- */
.science__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.science h2 { font-size: 34px; margin-top: 12px; }
.science__body { font-size: 16px; color: var(--ink-soft); margin: 18px 0 28px; line-height: 1.65; max-width: 460px; }
.science__pills { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .science__inner { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- founder ---------- */
.founder { background: var(--green); color: #F3EFE7; }
.founder__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.founder__mark { font-family: var(--font-serif); font-size: 72px; color: var(--gold-soft); line-height: 0; margin-bottom: 8px; }
.founder__quote { font-family: var(--font-serif); font-size: 26px; line-height: 1.5; font-style: italic; }
.founder__name { margin-top: 28px; font-weight: 600; font-size: 15px; }
.founder__role { font-size: 13px; color: #C9BDAE; margin-top: 4px; }

/* ---------- app cta ---------- */
.app-cta { background: var(--cream); }
.app-cta__inner { text-align: center; max-width: 620px; margin: 0 auto; }
.app-cta h2 { font-size: 32px; margin-top: 12px; }
.app-cta p { font-size: 16px; color: var(--ink-soft); margin-top: 16px; line-height: 1.6; }
.app-cta__ctas { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 32px; }
.app-cta__soon { font-size: 12.5px; color: var(--ink-faint); }