/* ═══════════════════════════════════════════════════════════
   Cc's Meow Cattery — Shared Stylesheet
   Palette: cream #F7F3EE | gold #8B7B2F | dark #2C2C2C | warm #6B5E3E
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@300;400;500;600&display=swap');

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

:root {
  --cream:    #F7F3EE;
  --cream2:   #EDE8E0;
  --gold:     #8B7B2F;
  --gold-lt:  #B8A84E;
  --dark:     #2C2C2C;
  --warm:     #6B5E3E;
  --muted:    #8A8070;
  --white:    #FFFFFF;
  --border:   #DDD5C8;
  --success:  #4A7C59;
  --radius:   8px;
  --shadow:   0 2px 16px rgba(0,0,0,.08);
  --shadow-lg:0 8px 40px rgba(0,0,0,.12);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--dark); background: var(--white); line-height: 1.6; }

h1,h2,h3,h4 { font-family: 'Playfair Display', serif; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.4rem; }

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── NAV ─────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(247,243,238,.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
  height: 68px;
}
.nav-logo { font-family:'Playfair Display',serif; font-size:1.15rem; font-weight:700; color:var(--dark); letter-spacing:.02em; }
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-size:.875rem; font-weight:500; color:var(--warm); transition:color .2s; position:relative; }
.nav-links a:hover, .nav-links a.active { color:var(--dark); }
.nav-links a.active::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--gold); border-radius:2px; }
.nav-btn { background:var(--gold); color:var(--white); border:none; padding:.6rem 1.4rem; border-radius:var(--radius); font-size:.875rem; font-weight:600; cursor:pointer; transition:background .2s; }
.nav-btn:hover { background:var(--gold-lt); }
.nav-hamburger { display:none; background:none; border:none; cursor:pointer; flex-direction:column; gap:5px; }
.nav-hamburger span { width:24px; height:2px; background:var(--dark); border-radius:2px; transition:.3s; display:block; }

/* ── SECTIONS ────────────────────────────────────────────── */
.section { padding:5rem 2rem; }
.section-sm { padding:3rem 2rem; }
.container { max-width:1100px; margin:0 auto; }
.section-tag { display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); background:rgba(139,123,47,.1); padding:.35rem .8rem; border-radius:20px; margin-bottom:1rem; }
.section-title { margin-bottom:1rem; color:var(--dark); }
.section-sub { color:var(--muted); font-size:1rem; max-width:680px; line-height:1.8; }
.text-center { text-align:center; }
.text-center .section-sub { margin:0 auto; }

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.75rem 1.75rem; border-radius:var(--radius); font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s; border:2px solid transparent; }
.btn-primary { background:var(--gold); color:var(--white); }
.btn-primary:hover { background:var(--gold-lt); transform:translateY(-1px); }
.btn-outline { background:transparent; color:var(--dark); border-color:var(--dark); }
.btn-outline:hover { background:var(--dark); color:var(--white); }
.btn-sm { padding:.5rem 1.1rem; font-size:.8rem; }

/* ── CARDS ───────────────────────────────────────────────── */
.card { background:var(--white); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); transition:box-shadow .2s; }
.card:hover { box-shadow:var(--shadow-lg); }

/* ── BADGE ───────────────────────────────────────────────── */
.badge { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold); }

/* ── ACHIEVEMENT ITEM ────────────────────────────────────── */
.achievement { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; background:var(--cream); border-radius:var(--radius); border-left:3px solid var(--gold); font-size:.85rem; }
.achievement-icon { color:var(--gold); font-size:1rem; flex-shrink:0; }

/* ── FOOTER ──────────────────────────────────────────────── */
.footer { background:var(--cream2); padding:3rem 2rem 2rem; border-top:1px solid var(--border); }
.footer-grid { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:2.5rem; }
.footer-brand .footer-logo { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:700; margin-bottom:.6rem; }
.footer-brand p { font-size:.85rem; color:var(--muted); line-height:1.7; }
.footer-col h4 { font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--warm); margin-bottom:1rem; }
.footer-col ul { list-style:none; }
.footer-col li + li { margin-top:.5rem; }
.footer-col a { font-size:.875rem; color:var(--muted); transition:color .2s; }
.footer-col a:hover { color:var(--dark); }
.footer-bottom { max-width:1100px; margin:0 auto; padding-top:1.5rem; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; }
.footer-bottom p { font-size:.8rem; color:var(--muted); }
.social-links { display:flex; gap:.75rem; }
.social-link { width:36px; height:36px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; transition:background .2s; }
.social-link:hover { background:var(--gold); color:var(--white); }

/* ── PRICE BOX ───────────────────────────────────────────── */
.price-box { border:1px solid var(--border); border-radius:var(--radius); padding:1.2rem 1.4rem; margin-bottom:.75rem; }
.price-box.highlight { border-color:var(--gold); background:rgba(139,123,47,.04); }
.price-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.price-name { font-weight:600; font-size:.95rem; }
.price-amount { font-weight:700; color:var(--gold); font-size:.95rem; }
.price-desc { font-size:.82rem; color:var(--muted); line-height:1.6; }

/* ── STAT ROW ────────────────────────────────────────────── */
.stats-row { display:flex; gap:3rem; padding:2rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:2rem 0; flex-wrap:wrap; }
.stat { text-align:center; flex:1; min-width:100px; }
.stat-num { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--gold); }
.stat-label { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:.25rem; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:768px) {
  .nav-links { display:none; }
  .nav-links.open { display:flex; flex-direction:column; position:absolute; top:68px; left:0; right:0; background:var(--cream); padding:1.5rem 2rem; border-bottom:1px solid var(--border); gap:1rem; }
  .nav-hamburger { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
  .stats-row { gap:1.5rem; }
}
@media(max-width:480px) {
  .footer-grid { grid-template-columns:1fr; }
}