/* ============================================================
   MODERN DERMA AND SPA — Hero Site
   Standalone styles. No dependency on parent /styles.css.
   Font: Inter (Google Fonts, 300/400/500).
   ============================================================ */

/* ── Reset ──────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Design tokens ──────────────────────────────────────────── */
:root {
  --color-bg:          #f0f0f0;
  --color-text:        #1E2B4A;
  --color-text-mid:    rgba(30, 43, 74, 0.80);
  --color-text-soft:   rgba(30, 43, 74, 0.50);
  --color-glass:       rgba(255, 255, 255, 0.30);
  --color-glass-badge: rgba(255, 255, 255, 0.62);
  --color-border:      rgba(255, 255, 255, 0.22);
  --font-body:         'Inter', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  min-height: 100dvh;
  min-height: 100vh;
}

/* ── Page wrapper ────────────────────────────────────────────── */
.page-wrapper {
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: stretch;
  padding: clamp(12px, 1.5vw, 20px);
  background: var(--color-bg);
}

/* ── Hero card ───────────────────────────────────────────────── */
.hero-card {
  flex: 1;
  position: relative;
  border-radius: clamp(1.5rem, 3vw, 3rem);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.10);
}

/* ── Background video ───────────────────────────────────────── */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 65% center;
}

@media (min-width: 1024px) {
  .bg-video {
    object-position: center;
  }
}

/* ── Content layer ──────────────────────────────────────────── */
.content-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ── Navbar ──────────────────────────────────────────────────── */
.navbar {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  padding: clamp(16px, 2.2vw, 28px) clamp(20px, 3vw, 40px);
}

.nav-spacer {
  display: none;
}

.nav-mobile-brand {
  flex: 1;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.01em;
  user-select: none;
}

.nav-links {
  display: none;
  list-style: none;
  align-items: center;
  gap: clamp(20px, 2.5vw, 36px);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links a {
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  opacity: 0.68;
  transition: opacity 0.18s ease;
}

.nav-links a:hover {
  opacity: 1;
}

.nav-cta-wrap {
  flex-shrink: 0;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: #ffffff;
  text-decoration: none;
  border-radius: 9999px;
  padding: 10px 18px 10px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.nav-cta:hover {
  opacity: 0.84;
  transform: scale(1.02);
}

.nav-cta-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .nav-mobile-brand {
    display: none;
  }
  .nav-links {
    display: flex;
  }
  .nav-spacer {
    display: block;
    flex: 1;
  }
}

/* ── Text container ──────────────────────────────────────────── */
.text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding: clamp(40px, 9vh, 96px) clamp(20px, 5vw, 60px) 0;
  max-width: 700px;
  width: 100%;
}

/* ── Hero badge ──────────────────────────────────────────────── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-glass-badge);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  padding: 8px 16px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* ── Hero heading ────────────────────────────────────────────── */
.hero-heading {
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--color-text);
}

/* ── Hero subtext ────────────────────────────────────────────── */
.hero-subtext {
  font-size: clamp(0.875rem, 1.5vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--color-text-mid);
  max-width: 520px;
}

/* ── Bottom-left glassmorphism card ──────────────────────────── */
.bottom-left-card {
  position: absolute;
  bottom: 104px;
  right: 16px;
  background: var(--color-glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--color-border);
  border-radius: clamp(1.2rem, 2vw, 2.2rem);
  padding: clamp(14px, 1.8vw, 22px) clamp(16px, 2vw, 24px);
  display: flex;
  align-items: center;
  gap: 20px;
}

@media (min-width: 768px) {
  .bottom-left-card {
    left: 24px;
    right: auto;
    bottom: 24px;
  }
}

@media (min-width: 1024px) {
  .bottom-left-card {
    left: 40px;
    bottom: 40px;
  }
}

.card-stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-number {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -0.04em;
  color: var(--color-text);
  line-height: 1;
}

.stat-plus {
  font-size: 0.6em;
  vertical-align: super;
  margin-left: 1px;
}

.stat-label {
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--color-text-soft);
  text-transform: uppercase;
}

.card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-text);
  color: #ffffff;
  text-decoration: none;
  border-radius: 9999px;
  padding: 11px 18px 11px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.card-btn:hover {
  opacity: 0.84;
  transform: scale(1.02);
}

.card-btn-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* ── Bottom-right faux-cutout corner ─────────────────────────── */
.bottom-right-corner {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--color-bg);
  border-top-left-radius: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px 20px 20px;
}

/* Corner mask dimensions must match border-top-left-radius */
.corner-mask {
  position: absolute;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

.corner-mask-top {
  top: -24px;
  right: 0;
}

.corner-mask-left {
  bottom: 0;
  left: -24px;
}

@media (min-width: 640px) {
  .bottom-right-corner {
    border-top-left-radius: 32px;
    gap: 16px;
    padding: 18px 24px 24px 24px;
  }
  .corner-mask { width: 32px; height: 32px; }
  .corner-mask-top  { top: -32px; }
  .corner-mask-left { left: -32px; }
}

@media (min-width: 768px) {
  .bottom-right-corner {
    border-top-left-radius: 56px;
    gap: 20px;
    padding: 22px 28px 28px 28px;
  }
  .corner-mask { width: 56px; height: 56px; }
  .corner-mask-top  { top: -56px; }
  .corner-mask-left { left: -56px; }
}

.corner-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-text);
  color: #ffffff;
  flex-shrink: 0;
}

.corner-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.corner-title {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-soft);
}

.corner-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: opacity 0.18s ease;
}

.corner-link:hover {
  opacity: 0.65;
}

/* ── Animation helpers ───────────────────────────────────────── */
.anim-d0 { animation-delay: 0s;    }
.anim-d1 { animation-delay: 0.2s;  }
.anim-d2 { animation-delay: 0.4s;  }

@media (prefers-reduced-motion: no-preference) {
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes scaleIn {
    from { opacity: 0; transform: scale(0.98); }
    to   { opacity: 1; transform: scale(1);    }
  }
  @keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0);     }
  }

  .anim-fade-up      { animation: fadeUp      0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .anim-fade-in      { animation: fadeIn      0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .anim-scale-in     { animation: scaleIn     0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
  .anim-slide-in-left { animation: slideInLeft 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; }
}