/* Modern design: warm gradients, glassmorphism, rounded corners, clean typography */

:root {
  /* Warm gradient palette (inspired by modern app UI) */
  --gradient-start: #fff8f0;
  --gradient-mid: #ffecd2;
  --gradient-warm: #ffd9b3;
  --gradient-peach: #f5c4a8;
  --gradient-soft: #e8c4c4;
  --gradient-end: #e0d4e8;
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-border: rgba(255, 255, 255, 0.4);
  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.06);
  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.08);
  --radius-card: 1.5rem;
  --radius-input: 1rem;
  --radius-btn: 1rem;
}

/* Base */
.page-body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  background: linear-gradient(
    180deg,
    var(--gradient-start) 0%,
    var(--gradient-mid) 20%,
    var(--gradient-warm) 45%,
    var(--gradient-peach) 70%,
    var(--gradient-soft) 85%,
    var(--gradient-end) 100%
  );
  background-attachment: fixed;
}

.page-main {
  position: relative;
}

/* Hero: light text on gradient, clear hierarchy */
.hero-section h1 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.hero-section p {
  color: rgba(0, 0, 0, 0.65);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Glassmorphism section cards */
.section-card {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-card);
  padding: 1.75rem 1.5rem;
  box-shadow: var(--shadow-card);
}

@media (min-width: 640px) {
  .section-card {
    padding: 2rem 2.25rem;
  }
}

.section-card h2 {
  color: rgba(0, 0, 0, 0.9);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.section-card p,
.section-card li {
  color: rgba(0, 0, 0, 0.7);
}

.section-card strong {
  color: rgba(0, 0, 0, 0.85);
}

.section-card--cta p:last-of-type {
  color: rgba(0, 0, 0, 0.9);
}

/* List styling inside cards */
.section-card ul {
  list-style: none;
}

.section-card ul li {
  position: relative;
  padding-left: 1.25rem;
}

.section-card ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  background: var(--gradient-peach);
}

#through-srt.section-card ul li::before {
  background: var(--gradient-soft);
}

/* Form inputs: rounded, soft background, subtle border */
.form-input {
  border-radius: var(--radius-input);
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgba(255, 255, 255, 0.8);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.form-input::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

.form-input:hover {
  border-color: rgba(0, 0, 0, 0.15);
}

.form-input:focus {
  outline: none;
  border-color: var(--gradient-peach);
  box-shadow: 0 0 0 3px rgba(245, 196, 168, 0.35);
}

.form-input--textarea {
  min-height: 6rem;
}

/* Primary button: warm gradient, rounded, shadow */
.btn-primary {
  border: none;
  border-radius: var(--radius-btn);
  background: linear-gradient(
    135deg,
    var(--gradient-peach) 0%,
    var(--gradient-soft) 100%
  );
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  box-shadow: var(--shadow-soft);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 196, 168, 0.5);
}

/* Form labels in contact card */
#contact .section-card label {
  color: rgba(0, 0, 0, 0.8);
}

/* Footer: subtle on gradient */
.page-footer {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 500;
}

.page-footer p {
  margin: 0;
}