/*
Theme Name: Vaneska Realtor
Theme URI: https://vaneska-realtor.example
Author: Vaneska Soares
Description: Luxury real estate landing page theme for Vaneska Soares — Realtor in Fayetteville, NC. Navy & gold palette, Cormorant Garamond serif headings, Inter body type, fully self-contained.
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: vaneska-realtor
*/

/* ===== Fonts ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== Design tokens (mirrors the original Tailwind theme) ===== */
:root{
  --background:#fefdf9;
  --foreground:#0d1b3a;
  --card:#ffffff;
  --muted:#f3f0e8;
  --muted-foreground:#6b7280;
  --border:#e6e2d6;
  --primary:#1a2a52;
  --primary-foreground:#fefdf9;
  --secondary:#f3f0e8;
  --secondary-foreground:#1a2a52;
  --destructive:#c0392b;
  --gold:#c9a44b;
  --gold-soft:#e3c578;
  --navy:#1a2a52;
  --navy-deep:#0d1b3a;
  --gradient-luxe:linear-gradient(135deg,#1a2a52,#0d1b3a);
  --gradient-gold:linear-gradient(135deg,#e3c578,#b88f33);
  --shadow-luxe:0 30px 80px -20px rgba(13,27,58,.35);
  --shadow-soft:0 10px 40px -10px rgba(26,42,82,.15);
  --font-serif:'Cormorant Garamond',Georgia,serif;
  --font-sans:'Inter',system-ui,sans-serif;
  --radius:.5rem;
}

/* ===== Reset & base ===== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
h1,h2,h3,h4{font-family:var(--font-serif);letter-spacing:-.01em;margin:0;line-height:1.1;color:var(--navy)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
input,select,textarea{font:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===== Layout helpers ===== */
.container{max-width:80rem;margin-inline:auto;padding-inline:1.5rem}
.container-sm{max-width:48rem;margin-inline:auto;padding-inline:1.5rem}
.container-md{max-width:64rem;margin-inline:auto;padding-inline:1.5rem}
.section{padding:6rem 1.5rem}
.section-tight{padding:4rem 1.5rem}
.text-center{text-align:center}
.eyebrow{color:var(--gold);text-transform:uppercase;letter-spacing:.2em;font-size:.75rem;font-weight:600}
.h2{font-family:var(--font-serif);font-size:clamp(2.25rem,4vw,3rem);margin:1rem 0 1.5rem;color:var(--navy)}
.h3{font-family:var(--font-serif);font-size:1.5rem;color:var(--navy)}
.lead{color:var(--muted-foreground);font-size:1.125rem;line-height:1.7}
.italic{font-style:italic}
.gold{color:var(--gold)}
.navy{color:var(--navy)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:1rem 1.75rem;font-size:.875rem;font-weight:600;transition:transform .2s,background .2s,color .2s,box-shadow .2s}
.btn-gold{background:var(--gradient-gold);color:var(--navy);box-shadow:var(--shadow-luxe)}
.btn-gold:hover{transform:translateY(-1px)}
.btn-outline-navy{border:1px solid rgba(13,27,58,.4);color:var(--navy-deep)}
.btn-outline-navy:hover{background:rgba(13,27,58,.08)}
.btn-whatsapp{background:#25D366;color:#fff;box-shadow:0 6px 20px -4px rgba(37,211,102,.4)}
.btn-whatsapp:hover{background:#1ebe57}

/* ===== Header ===== */
.site-header{position:fixed;top:0;inset-inline:0;z-index:50;backdrop-filter:blur(12px);background:rgba(254,253,249,.8);border-bottom:1px solid var(--border)}
.site-header .inner{max-width:80rem;margin-inline:auto;padding:0 1.5rem;height:4rem;display:flex;align-items:center;justify-content:space-between}
.brand{font-family:var(--font-serif);font-size:1.25rem;color:var(--navy);font-weight:600}
.brand .dot{color:var(--gold)}
.brand small{color:var(--muted-foreground);font-family:var(--font-sans);font-size:.875rem;font-weight:400}
.nav-links{display:none;gap:2rem;font-size:.875rem;color:var(--muted-foreground)}
.nav-links a:hover{color:var(--navy)}
.menu-toggle{display:inline-flex;width:2.5rem;height:2.5rem;border:1px solid var(--border);border-radius:.5rem;color:var(--navy);align-items:center;justify-content:center}
.menu-toggle:hover{background:var(--secondary)}
.mobile-nav{display:none;border-top:1px solid var(--border);background:rgba(254,253,249,.95);backdrop-filter:blur(12px)}
.mobile-nav.open{display:block}
.mobile-nav .links{max-width:80rem;margin-inline:auto;padding:1rem 1.5rem;display:flex;flex-direction:column}
.mobile-nav a{padding:.75rem 0;font-size:1rem;color:var(--foreground);border-bottom:1px solid var(--border)}
.mobile-nav a:last-child{border-bottom:0}
.mobile-nav a:hover{color:var(--gold)}
@media(min-width:768px){.nav-links{display:flex}.menu-toggle{display:none}.mobile-nav{display:none!important}}

/* ===== Hero ===== */
.hero{position:relative;padding:8rem 1.5rem 5rem;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;background-size:cover;background-position:center}
.hero-grid{max-width:80rem;margin-inline:auto;display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.hero-grid{grid-template-columns:1fr 1fr}}
.badge{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;border:1px solid rgba(201,164,75,.4);background:rgba(201,164,75,.1);padding:.375rem 1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.2em;color:var(--gold);margin-bottom:1.5rem}
.hero h1{font-family:var(--font-serif);font-size:clamp(2.5rem,5vw,3.75rem);line-height:1.05;margin-bottom:1.5rem;color:var(--navy-deep)}
.hero h1 .accent{font-style:italic;color:var(--gold-soft)}
.hero .lead{color:rgba(13,27,58,.8);max-width:36rem;margin-bottom:2rem}
.hero ul.bullets{display:grid;gap:.75rem;margin-bottom:2.5rem;font-size:.875rem}
@media(min-width:640px){.hero ul.bullets{grid-template-columns:1fr 1fr}}
.hero ul.bullets li{display:flex;gap:.5rem;align-items:flex-start;color:var(--navy-deep)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:1rem}
.hero .meta{display:flex;align-items:center;gap:1.5rem;margin-top:2.5rem;font-size:.875rem;color:var(--navy-deep);flex-wrap:wrap}
.stars{display:inline-flex;gap:.125rem;align-items:center}
.stars svg{width:1rem;height:1rem;fill:var(--gold);color:var(--gold)}
.hero-card{position:relative}
.hero-card .glow{position:absolute;inset:-1rem;border-radius:2rem;background:rgba(201,164,75,.2);filter:blur(40px)}
.hero-card .frame{position:relative;border-radius:2rem;overflow:hidden;border:1px solid rgba(201,164,75,.3);box-shadow:var(--shadow-luxe)}
.hero-card img{width:100%;height:560px;object-fit:cover}
.hero-card .caption{position:absolute;inset:auto 0 0 0;padding:1.5rem;background:linear-gradient(to top,var(--navy-deep),rgba(13,27,58,.7),transparent);color:var(--primary-foreground)}
.hero-card .caption p:first-child{font-family:var(--font-serif);font-size:1.5rem}
.hero-card .caption p:last-child{color:var(--gold);font-size:.875rem;letter-spacing:.15em;text-transform:uppercase}

/* ===== Social proof ===== */
.social-proof{background:var(--secondary);padding:2.5rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.social-proof .row{max-width:80rem;margin-inline:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 3rem;color:var(--muted-foreground);font-size:.875rem}
.social-proof span{font-weight:500;letter-spacing:.05em}

/* ===== Problem ===== */
.problem-grid{display:grid;gap:.75rem;margin:0 auto 3rem;max-width:40rem;text-align:left}
@media(min-width:640px){.problem-grid{grid-template-columns:1fr 1fr}}
.problem-item{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border-radius:.5rem;background:var(--secondary);border:1px solid var(--border)}
.problem-item .dot{width:.5rem;height:.5rem;border-radius:999px;background:var(--destructive);margin-top:.5rem;flex-shrink:0}
.italic-quote{font-family:var(--font-serif);font-size:1.5rem;color:var(--navy);font-style:italic}

/* ===== About ===== */
.about{background:var(--secondary)}
.about .grid{max-width:72rem;margin-inline:auto;display:grid;gap:3rem;align-items:center}
@media(min-width:1024px){.about .grid{grid-template-columns:2fr 3fr}}
.about img{border-radius:1rem;width:100%;object-fit:cover;aspect-ratio:4/5;box-shadow:var(--shadow-soft)}
.about .features{display:grid;gap:.75rem}
@media(min-width:640px){.about .features{grid-template-columns:1fr 1fr}}
.feature{display:flex;align-items:flex-start;gap:.5rem;color:var(--foreground)}

/* ===== Home Value ===== */
.home-value{position:relative;padding:6rem 1.5rem;overflow:hidden;background:linear-gradient(to bottom right,var(--navy),var(--navy-deep),var(--navy));color:var(--primary-foreground)}
.home-value .radial{position:absolute;inset:0;opacity:.2;pointer-events:none;background:radial-gradient(circle at 20% 20%,var(--gold) 0%,transparent 40%),radial-gradient(circle at 80% 80%,var(--gold-soft) 0%,transparent 45%)}
.home-value .inner{position:relative;max-width:48rem;margin-inline:auto;text-align:center}
.home-value h2{color:var(--primary-foreground);font-family:var(--font-serif);font-size:clamp(2.25rem,4vw,3rem);margin:1rem 0 2rem;line-height:1.2}
.home-value form{max-width:36rem;margin-inline:auto}
.home-value .field-row{display:flex;flex-direction:column;gap:.75rem}
@media(min-width:640px){.home-value .field-row{flex-direction:row}}
.home-value input[type=email]{flex:1;height:3rem;border-radius:.5rem;padding:0 1rem;background:var(--background);color:var(--foreground);border:0}
.home-value button[type=submit]{height:3rem;padding:0 1.5rem;border-radius:.5rem;background:var(--gold);color:var(--navy);font-weight:600;white-space:nowrap}
.home-value button[type=submit]:hover{background:var(--gold-soft)}
.home-value .confirm{max-width:36rem;margin-inline:auto;background:rgba(255,255,255,.1);border:1px solid rgba(201,164,75,.4);border-radius:.75rem;padding:1.5rem;backdrop-filter:blur(4px)}
.home-value .confirm svg{width:2.5rem;height:2.5rem;color:var(--gold);margin-inline:auto;display:block;margin-bottom:.75rem}
.home-value .confirm p{margin-bottom:.5rem;font-weight:500}
.home-value .confirm small{color:rgba(254,253,249,.7);display:block;margin-top:.5rem}
.home-value .confirm button{margin-top:1rem;color:var(--gold);text-decoration:underline;font-size:.875rem}
.home-value .error{color:var(--gold);font-size:.875rem;margin-top:.75rem}

/* ===== Method ===== */
.method-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.method-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){.method-grid{grid-template-columns:repeat(3,1fr)}}
.pillar{padding:2rem;border-radius:1rem;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-soft);transition:transform .2s,border-color .2s}
.pillar:hover{transform:translateY(-4px);border-color:rgba(201,164,75,.5)}
.pillar .top{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.pillar .icon{width:3rem;height:3rem;border-radius:.75rem;display:flex;align-items:center;justify-content:center;background:var(--gradient-gold);color:var(--navy)}
.pillar .num{font-family:var(--font-serif);font-size:1.875rem;color:rgba(201,164,75,.4)}
.pillar h3{font-family:var(--font-serif);font-size:1.5rem;color:var(--navy);margin-bottom:.5rem}
.pillar p{color:var(--muted-foreground);line-height:1.7}

/* ===== Testimonials ===== */
.testimonials{background:var(--navy);color:var(--primary-foreground);padding:6rem 1.5rem}
.testimonials h2{color:var(--primary-foreground)}
.tgrid{display:grid;gap:1.5rem}
@media(min-width:768px){.tgrid{grid-template-columns:repeat(3,1fr)}}
.tcard{padding:2rem;border-radius:1rem;background:var(--navy-deep);border:1px solid rgba(201,164,75,.2)}
.tcard .quote{color:rgba(254,253,249,.9);line-height:1.7;margin:1rem 0 1.5rem;font-style:italic}
.tcard .author{color:var(--gold);font-size:.875rem;font-weight:600;text-transform:uppercase;letter-spacing:.1em}

/* ===== Stats ===== */
.stats{padding:4rem 1.5rem;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.stats .grid{max-width:72rem;margin-inline:auto;display:grid;grid-template-columns:1fr 1fr;gap:2rem;text-align:center}
@media(min-width:768px){.stats .grid{grid-template-columns:repeat(4,1fr)}}
.stats .n{font-family:var(--font-serif);font-size:clamp(2.25rem,3vw,3rem);color:var(--navy)}
.stats .l{color:var(--muted-foreground);font-size:.875rem;margin-top:.5rem}

/* ===== Offer / Contact ===== */
.offer .grid{max-width:64rem;margin-inline:auto;display:grid;gap:3rem;align-items:start}
@media(min-width:1024px){.offer .grid{grid-template-columns:1fr 1fr}}
.offer ul{display:grid;gap:.75rem;margin-bottom:2rem}
.offer ul li{display:flex;align-items:center;gap:.75rem;color:var(--foreground)}
.contact-info{display:grid;gap:.5rem;font-size:.875rem;color:var(--muted-foreground)}
.contact-info a:hover{color:var(--gold)}
.contact-info p{display:flex;align-items:center;gap:.5rem}
.contact-form{padding:2rem;border-radius:1rem;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow-luxe)}
.contact-form h3{font-family:var(--font-serif);font-size:1.5rem;margin-bottom:1.5rem;color:var(--navy)}
.contact-form .field{margin-bottom:1rem}
.contact-form label{display:block;font-size:.875rem;font-weight:500;color:var(--foreground);margin-bottom:.25rem}
.contact-form input,.contact-form select{width:100%;border-radius:.5rem;border:1px solid var(--border);background:var(--background);padding:.75rem 1rem;font-size:.875rem;color:var(--foreground)}
.contact-form input:focus,.contact-form select:focus{outline:none;box-shadow:0 0 0 2px var(--gold)}
.contact-form input[aria-invalid=true]{border-color:var(--destructive)}
.contact-form .err{margin-top:.25rem;font-size:.75rem;color:var(--destructive)}
.contact-form button[type=submit]{width:100%;margin-top:.5rem;justify-content:center}
.thankyou{text-align:center;padding:3rem 0}
.thankyou svg{width:3rem;height:3rem;color:var(--gold);margin-inline:auto;display:block;margin-bottom:1rem}
.thankyou h3{font-family:var(--font-serif);font-size:1.5rem;color:var(--navy);margin-bottom:.5rem}
.thankyou p{color:var(--muted-foreground)}

/* ===== FAQ ===== */
.faq{background:var(--secondary)}
.faq .list{max-width:48rem;margin-inline:auto;display:grid;gap:.75rem}
.faq-item{border-radius:.75rem;background:var(--card);border:1px solid var(--border);overflow:hidden}
.faq-item summary{display:flex;justify-content:space-between;gap:1rem;padding:1.25rem;font-weight:500;color:var(--navy);cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary svg{flex-shrink:0;color:var(--gold);transition:transform .2s}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item .a{padding:0 1.25rem 1.25rem;color:var(--muted-foreground)}

/* ===== Final CTA ===== */
.final-cta{position:relative;padding:6rem 1.5rem;overflow:hidden}
.final-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient-luxe)}
.final-cta .inner{max-width:48rem;margin-inline:auto;text-align:center}
.final-cta h2{color:var(--navy-deep);font-family:var(--font-serif);font-size:clamp(2.25rem,4vw,3rem);margin-bottom:1.5rem}
.final-cta p{color:var(--navy-deep);font-size:1.125rem;line-height:1.7;margin-bottom:2.5rem}
.final-cta .row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem}

/* ===== Footer ===== */
.site-footer{padding:2.5rem 1.5rem;background:var(--navy-deep);color:rgba(254,253,249,.7);font-size:.875rem;padding-right:11rem}
@media(min-width:1024px){.site-footer{padding-right:12rem}}
.site-footer .inner{max-width:80rem;margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem}
@media(min-width:640px){.site-footer .inner{flex-direction:row}}
.site-footer .brandline{font-family:var(--font-serif);font-size:1.125rem;color:var(--primary-foreground)}

/* ===== Floating actions ===== */
.floating{position:fixed;bottom:1.5rem;right:1.5rem;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:.75rem}
.to-top{display:inline-flex;width:2.75rem;height:2.75rem;border-radius:999px;background:var(--navy);color:var(--primary-foreground);box-shadow:0 10px 25px -10px rgba(0,0,0,.4);align-items:center;justify-content:center;opacity:0;pointer-events:none;transform:translateY(.5rem);transition:opacity .2s,transform .2s}
.to-top.show{opacity:1;pointer-events:auto;transform:none}
.to-top:hover{background:var(--navy-deep);transform:scale(1.05)}
.fab-wa{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;background:#25D366;color:#fff;padding:.75rem 1.25rem .75rem 1rem;font-size:.875rem;font-weight:600;box-shadow:0 10px 25px -10px rgba(0,0,0,.4)}
.fab-wa:hover{background:#1ebe57;transform:scale(1.05)}
.fab-wa .label{display:none}
@media(min-width:640px){.fab-wa .label{display:inline}}

/* ===== Icons ===== */
svg.icon{width:1.25rem;height:1.25rem;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
svg.icon-sm{width:1rem;height:1rem}
svg.icon-xs{width:.875rem;height:.875rem}
svg.icon-lg{width:1.5rem;height:1.5rem}
.gold svg{color:var(--gold)}