/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #111214;
  --bg-card: #1a1a1f;
  --bg-elevated: #222228;
  --amber: #E8A84C;
  --amber-dim: rgba(232, 168, 76, 0.12);
  --amber-glow: rgba(232, 168, 76, 0.06);
  --cream: #FAF3E8;
  --cream-dim: rgba(250, 243, 232, 0.65);
  --cream-muted: rgba(250, 243, 232, 0.35);
  --border: rgba(232, 168, 76, 0.15);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { background: var(--bg); color: var(--cream); font-family: var(--font-body); font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--amber); text-decoration: none; }
a:hover { text-decoration: underline; }

/* === NAV === */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 20px 32px; }
.nav-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.2rem; font-weight: 600; color: var(--cream); text-decoration: none; letter-spacing: -0.01em; }
.nav-logo:hover { text-decoration: none; }
.nav-tagline { font-size: 0.8rem; color: var(--cream-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 300; }

/* === HERO === */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 120px 32px 80px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); }
.hero-orb-1 { width: 500px; height: 500px; background: radial-gradient(circle, rgba(232, 168, 76, 0.15) 0%, transparent 70%); top: -100px; right: -100px; }
.hero-orb-2 { width: 400px; height: 400px; background: radial-gradient(circle, rgba(232, 168, 76, 0.08) 0%, transparent 70%); bottom: 50px; left: -80px; }
.hero-texture { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23E8A84C' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
.hero-content { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.hero-overline { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); font-weight: 500; margin-bottom: 24px; }
.hero-headline { font-family: var(--font-display); font-size: clamp(2.6rem, 4.5vw, 4rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--cream); margin-bottom: 28px; }
.hero-headline em { color: var(--amber); font-style: italic; }
.hero-sub { font-size: 1.05rem; line-height: 1.7; color: var(--cream-dim); max-width: 440px; font-weight: 300; }
.hero-visual { display: flex; flex-direction: column; gap: 16px; }

/* Memory cards */
.memory-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 20px 22px; position: relative; overflow: hidden; transition: transform 0.2s ease; }
.memory-card:hover { transform: translateY(-2px); }
.memory-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); opacity: 0.4; }
.memory-card-label { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--amber); margin-bottom: 8px; letter-spacing: 0.01em; }
.memory-card-dots { display: flex; gap: 4px; margin-bottom: 12px; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cream-muted); }
.dot.active { background: var(--amber); }
.memory-card-items { display: flex; flex-direction: column; gap: 5px; }
.item { font-size: 0.78rem; color: var(--cream-dim); font-weight: 400; }
.memory-card-2 { margin-left: 20px; }
.memory-card-3 { margin-left: 40px; }

/* === HOW === */
.how { padding: 100px 32px; background: var(--bg); }
.how-inner { max-width: 1100px; margin: 0 auto; }
.section-label { font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--amber); font-weight: 500; margin-bottom: 20px; }
.how-steps { display: grid; grid-template-columns: auto 1px auto 1px auto; gap: 0; align-items: start; }
.how-step { padding-right: 48px; }
.how-step-num { font-family: var(--font-display); font-size: 3rem; font-weight: 400; color: var(--amber); opacity: 0.3; margin-bottom: 16px; line-height: 1; }
.how-step h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 500; color: var(--cream); margin-bottom: 12px; line-height: 1.3; }
.how-step p { font-size: 0.9rem; color: var(--cream-dim); line-height: 1.7; font-weight: 300; }
.how-divider { width: 1px; background: var(--border); align-self: stretch; margin: 0 32px; }

/* === FEATURES === */
.features { padding: 100px 32px; background: #0e0e12; }
.features-inner { max-width: 1100px; margin: 0 auto; }
.features-headline { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; color: var(--cream); margin-bottom: 64px; line-height: 1.2; max-width: 520px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 28px 28px 32px; transition: border-color 0.2s ease; }
.feature-card:hover { border-color: rgba(232, 168, 76, 0.35); }
.feature-icon { width: 44px; height: 44px; background: var(--amber-dim); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.feature-card h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; color: var(--cream); margin-bottom: 10px; }
.feature-card p { font-size: 0.875rem; color: var(--cream-dim); line-height: 1.65; font-weight: 300; }

/* === MOMENTS === */
.moments { padding: 100px 32px; background: var(--bg); }
.moments-inner { max-width: 800px; margin: 0 auto; text-align: center; }
.moments-quote blockquote { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.2rem); font-style: italic; font-weight: 400; color: var(--cream); line-height: 1.4; margin-bottom: 28px; }
.moments-quote p { font-size: 1rem; color: var(--cream-dim); line-height: 1.7; font-weight: 300; }

/* === CLOSING === */
.closing { padding: 100px 32px 120px; background: #0e0e12; }
.closing-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.closing h2 { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 500; color: var(--cream); line-height: 1.15; margin-bottom: 24px; }
.closing p { font-size: 1.05rem; color: var(--cream-dim); line-height: 1.7; max-width: 500px; margin: 0 auto 40px; font-weight: 300; }
.closing-pill-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.closing-pill { background: var(--amber-dim); border: 1px solid var(--border); color: var(--amber); font-size: 0.78rem; padding: 8px 18px; border-radius: 100px; font-weight: 400; letter-spacing: 0.03em; }

/* === FOOTER === */
.footer { padding: 48px 32px; border-top: 1px solid var(--border); }
.footer-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--cream-dim); }
.footer-note { font-size: 0.8rem; color: var(--cream-muted); }
.footer-polsia { font-size: 0.78rem; color: var(--cream-muted); }
.footer-polsia a { color: var(--amber); opacity: 0.7; }

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .hero-content { grid-template-columns: 1fr; gap: 48px; }
  .hero-visual { display: none; }
  .hero-headline { font-size: 2.4rem; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .how-steps { grid-template-columns: 1fr;; gap: 40px; }
  .how-divider { display: none; }
  .how-step { padding-right: 0; }
  .footer-inner { flex-direction: column; gap: 12px; text-align: center; }
}

@media (max-width: 600px) {
  .nav { padding: 16px 20px; }
  .nav-tagline { display: none; }
  .hero { padding: 100px 20px 60px; }
  .hero-headline { font-size: 2rem; }
  .features-grid { grid-template-columns: 1fr; }
  .how, .features, .moments, .closing { padding: 72px 20px; }
  .moments-quote blockquote { font-size: 1.4rem; }
}