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

:root {
  --background: hsl(40,33%,96%);
  --foreground: hsl(150,30%,15%);
  --card: hsl(40,30%,98%);
  --card-fg: hsl(150,30%,15%);
  --primary: hsl(150,35%,25%);
  --primary-fg: hsl(40,33%,96%);
  --secondary: hsl(40,50%,88%);
  --muted: hsl(40,25%,92%);
  --muted-fg: hsl(150,10%,45%);
  --gold: hsl(38,65%,55%);
  --gold-light: hsl(40,60%,75%);
  --saffron: hsl(30,80%,55%);
  --cream-dark: hsl(40,25%,90%);
  --border: hsl(40,20%,85%);
  --forest: hsl(150,35%,25%);
  --forest-light: hsl(150,25%,35%);
}

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Nunito',system-ui,sans-serif; background:var(--background); color:var(--foreground); -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5,h6 { font-family:'Playfair Display',Georgia,serif; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; }

.container { max-width:1200px; margin:0 auto; padding:0 1rem; }

/* NAV */
nav { position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(245,241,233,.95); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); }
nav .inner { display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1200px; margin:0 auto; padding:0 1rem; }
nav .logo { font-family:'Playfair Display',serif; font-weight:700; font-size:1.4rem; color:var(--primary); }
nav .logo span { color:var(--gold); }
nav .links { display:flex; gap:1.2rem; align-items:center; }
nav .links a { font-size:.875rem; font-weight:500; color:var(--foreground); opacity:.7; transition:opacity .2s; }
nav .links a:hover, nav .links a.active { opacity:1; color:var(--primary); }
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1.4rem; border-radius:.75rem; font-weight:600; font-size:.875rem; cursor:pointer; border:none; transition:all .2s; }
.btn-primary { background:linear-gradient(135deg,var(--gold),var(--saffron)); color:#fff; }
.btn-primary:hover { filter:brightness(1.05); }
.btn-outline { border:2px solid var(--primary); color:var(--primary); background:transparent; }
.btn-outline:hover { background:var(--primary); color:var(--primary-fg); }

/* HERO */
.hero { min-height:calc(100vh - 4rem); display:flex; align-items:center; justify-content:center; text-align:center; padding:5rem 1rem 3rem; position:relative; }
.hero .subtitle { font-size:.8rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.hero h1 { font-size:clamp(2rem,5vw,3.5rem); font-weight:700; color:var(--primary); line-height:1.2; margin-bottom:1.5rem; max-width:700px; margin-left:auto; margin-right:auto; }
.hero h1 .gold { background:linear-gradient(135deg,var(--saffron),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.hero p { font-size:1.1rem; color:var(--muted-fg); max-width:600px; margin:0 auto 2rem; line-height:1.7; }
.hero .buttons { display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-bottom:2rem; }
.hero .tags { display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; font-size:.875rem; color:var(--muted-fg); }
.hero .tags span::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--gold); margin-right:.5rem; vertical-align:middle; }
.hero .line { position:absolute; bottom:0; left:0; right:0; height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); opacity:.3; }

/* SECTIONS */
section { padding:5rem 0; }
section.alt { background:rgba(230,222,210,.3); }
.section-label { font-size:.8rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); margin-bottom:.75rem; text-align:center; }
.section-title { font-size:clamp(1.6rem,3.5vw,2.2rem); font-weight:700; color:var(--primary); text-align:center; margin-bottom:1rem; }
.section-desc { text-align:center; color:var(--muted-fg); max-width:600px; margin:0 auto 3rem; line-height:1.6; }
.divider { margin-top:4rem; height:1px; background:linear-gradient(to right,transparent,var(--gold),transparent); opacity:.2; }

/* GRID */
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:2rem; max-width:900px; margin:0 auto; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; max-width:1000px; margin:0 auto; }

/* CARDS */
.card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.5rem; transition:border-color .2s,box-shadow .2s; }
.card:hover { border-color:var(--gold); box-shadow:0 4px 12px rgba(0,0,0,.05); }
.card .icon { width:44px; height:44px; border-radius:.5rem; background:rgba(190,150,60,.1); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color:var(--gold); font-size:1.2rem; }
.card h3 { font-weight:600; color:var(--primary); margin-bottom:.5rem; font-size:1rem; }
.card p { font-size:.875rem; color:var(--muted-fg); line-height:1.6; }

/* VALUES */
.value { text-align:center; }
.value .icon { width:56px; height:56px; border-radius:50%; background:rgba(190,150,60,.1); display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; color:var(--gold); font-size:1.3rem; }
.value h3 { font-size:1.1rem; font-weight:600; color:var(--primary); margin-bottom:.5rem; }
.value p { font-size:.875rem; color:var(--muted-fg); line-height:1.6; }

/* BENEFITS */
.benefit { display:flex; gap:1rem; }
.benefit .icon { flex-shrink:0; width:40px; height:40px; border-radius:50%; background:rgba(50,80,55,.1); display:flex; align-items:center; justify-content:center; color:var(--primary); }
.benefit h3 { font-weight:600; color:var(--primary); margin-bottom:.25rem; }
.benefit p { font-size:.875rem; color:var(--muted-fg); line-height:1.5; }

/* TESTIMONIALS */
.testimonial { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:1.5rem; }
.testimonial .stars { color:var(--gold); margin-bottom:.75rem; letter-spacing:2px; }
.testimonial .quote { font-size:.875rem; color:var(--muted-fg); line-height:1.6; font-style:italic; margin-bottom:1rem; }
.testimonial .name { font-weight:600; color:var(--primary); font-size:.875rem; }
.testimonial .loc { font-size:.75rem; color:var(--muted-fg); }

/* FAQ */
.faq-item { background:var(--card); border:1px solid var(--border); border-radius:.75rem; margin-bottom:.75rem; overflow:hidden; }
.faq-item summary { padding:1rem 1.25rem; cursor:pointer; font-family:'Playfair Display',serif; font-weight:600; font-size:.9rem; color:var(--primary); } 
.faq-item summary::-webkit-details-marker { display:none; } 
.faq-item summary::before { content:'▸'; margin-right:.5rem; } 
.faq-item[open] summary::before { content:'▾'; } 
.faq-item .answer { padding:0 1.25rem 1rem; font-size:.875rem; color:var(--muted-fg); line-height:1.6; }

/* CONTACT FORM */
.form-card { background:var(--card); border:1px solid var(--border); border-radius:.75rem; padding:2rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.25rem; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:.6rem .75rem; border:1px solid var(--border); border-radius:.5rem; font-family:inherit; font-size:.875rem; background:var(--background); }
.form-group textarea { resize:vertical; min-height:80px; }
.contact-info h3 { font-weight:600; color:var(--primary); margin-bottom:1rem; }
.contact-info .item { display:flex; align-items:center; gap:.75rem; margin-bottom:1rem; font-size:.875rem; color:var(--muted-fg); }
.contact-info .item .ci-icon { width:36px; height:36px; border-radius:50%; background:rgba(190,150,60,.1); display:flex; align-items:center; justify-content:center; color:var(--gold); flex-shrink:0; }
.demo-box { background:rgba(50,80,55,.05); border:1px solid rgba(50,80,55,.1); border-radius:.75rem; padding:1.25rem; margin-top:2rem; }
.demo-box h4 { font-weight:600; color:var(--primary); font-size:.9rem; margin-bottom:.5rem; }
.demo-box ul { font-size:.875rem; color:var(--muted-fg); }
.demo-box li { margin-bottom:.35rem; }
.contact-grid { display:grid; grid-template-columns:3fr 2fr; gap:3rem; max-width:1000px; margin:0 auto; }

/* FOOTER */
footer { background:var(--primary); color:var(--primary-fg); padding:3rem 0 1.5rem; }
footer .grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:2rem; margin-bottom:2.5rem; }
footer .logo { font-family:'Playfair Display',serif; font-weight:700; font-size:1.2rem; margin-bottom:.75rem; }
footer .logo span { color:var(--gold-light); }
footer h4 { font-size:.875rem; font-weight:600; margin-bottom:1rem; }
footer p, footer li, footer a { font-size:.875rem; opacity:.7; line-height:1.6; }
footer a:hover { opacity:1; color:var(--gold-light); }
footer .bottom { border-top:1px solid rgba(255,255,255,.1); padding-top:1.5rem; text-align:center; font-size:.75rem; opacity:.5; }

@media(max-width:768px) {
  nav .links { display:none; }
  .form-row { grid-template-columns:1fr; }
  .contact-grid { grid-template-columns:1fr; }
  .grid-3 { grid-template-columns:1fr; }
}