/* ============ Tokens ============ */
:root{
  --brand-bg:#101b33;
  --brand-accent:#ff6f61;
  --brand-accent-2:#7c3aed;
  --surface:#ffffff;
  --muted:#f3f6fa;
  --card:#ffffff;
  --text:#0f172a;
  --text-2:#334155;
  --border:rgba(15,23,42,.08);
  --shadow:0 10px 30px rgba(2,6,23,.08);

  --radius-xl:22px;
  --radius-lg:16px;
  --radius:12px;
  --radius-sm:10px;

  --header-h:80px;
}

html{scroll-behavior:smooth}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(900px 600px at 15% -20%, rgba(124,58,237,.10), transparent 60%),
    radial-gradient(1200px 800px at 85% -10%, rgba(255,111,97,.10), transparent 60%),
    var(--surface);
  line-height:1.6;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px,92%);margin-inline:auto}

/* ============ Header / Nav ============ */
header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.6));backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
nav{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:1rem}
.logo-image{height:48px;width:auto}
.nav-toggle{display:none;background:transparent;border:1px solid var(--border);border-radius:10px;padding:.6rem}
.hamburger{display:inline-block;width:22px;height:2px;background:currentColor;position:relative}
.hamburger::before,.hamburger::after{content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor}
.hamburger::before{top:-6px}.hamburger::after{top:6px}

.nav-links{list-style:none;display:flex;gap:1.2rem;align-items:center}
.nav-links a{padding:.45rem .6rem;border-radius:10px}
.nav-links a:hover{background:rgba(15,23,42,.06)}
.nav-links a.active{background:rgba(124,58,237,.10);outline:1px solid rgba(124,58,237,.25)}
.nav-links .divider{display:none}
.theme-toggle,.auth-button{
  background:rgba(124,58,237,.10);
  border:1px solid rgba(124,58,237,.25);
  padding:.45rem .65rem;border-radius:10px;cursor:pointer
}
.theme-toggle:hover,.auth-button:hover{filter:brightness(1.05)}

/* ============ Hero ============ */
.hero{
  position:relative;
  min-height:86vh;
  display:grid;
  place-items:center;
  text-align:center;
  background:linear-gradient(135deg,#1a2a44,#0f172a);
  color:#fff;
  overflow:hidden;
}
.hero-inner{padding:4rem 0}
.hero-badge{
  display:inline-block;
  padding:.4rem .7rem;
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  font-weight:600;
  opacity:.9;
  margin-bottom:1rem;
  backdrop-filter:blur(6px)
}
.hero-title{font-size:clamp(2rem,4vw,3.5rem);font-weight:800;margin:0 0 .6rem}
.hero-title span{background:linear-gradient(135deg, var(--brand-accent), var(--brand-accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-subtitle{max-width:740px;margin:0 auto 1.2rem;opacity:.92}
.hero-actions{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap}
.hero-glow{position:absolute;inset:auto -20% -35% -20%;height:60%;filter:blur(80px);background:radial-gradient(closest-side, rgba(255,255,255,.15), transparent 70%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--brand-accent),var(--brand-accent-2));color:#fff;
  padding:.8rem 1rem;border-radius:12px;box-shadow:var(--shadow);font-weight:600}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn.sm{padding:.55rem .8rem;font-size:.95rem}

/* ============ Sections / Cards ============ */
.section{padding:4rem 0}
.section.alt{background:var(--muted)}
.section-header{text-align:center;margin-bottom:1.6rem}
.section-header h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.2rem 0}
.section-header p{color:var(--text-2);max-width:720px;margin:.2rem auto 0}

.card{background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.75));backdrop-filter:blur(8px);
  border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow)}

/* Properties */
.property-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem}
@media (max-width: 900px){.property-gallery{grid-template-columns:1fr}}
.property-card{overflow:hidden;border-radius:16px;border:1px solid var(--border);background:var(--card);box-shadow:var(--shadow);transform:translateZ(0)}
.property-card .media{aspect-ratio:16/10;overflow:hidden}
.property-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.property-card:hover img{transform:scale(1.05)}
.property-card .content{padding:1rem}
.property-card h3{margin:.2rem 0}
.property-card .meta{color:var(--text-2);margin-bottom:.8rem}

/* Services */
.service-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.2rem}
@media (max-width: 1100px){.service-list{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.service-list{grid-template-columns:1fr}}
.service-item{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:1.2rem}
.service-item h3{margin-top:.3rem}

/* Testimonials */
.testimonial-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media (max-width: 900px){.testimonial-list{grid-template-columns:1fr}}
.testimonial-item{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:1.2rem}
.testimonial-item blockquote{margin:0 0 .6rem;font-weight:600}

/* Gallery */
.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.8rem}
@media (max-width: 1100px){.gallery-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width: 640px){.gallery-grid{grid-template-columns:repeat(2,1fr)}}
.gallery-grid img{width:100%;height:220px;object-fit:cover;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .25s ease}
.gallery-grid img:hover{transform:translateY(-2px)}

/* Blog */
.blog-posts{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}
@media (max-width: 900px){.blog-posts{grid-template-columns:1fr}}
.blog-post{background:var(--card);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:1.2rem}
.blog-post h3{margin-top:.2rem}

/* Forms */
.form{padding:1.2rem}
.form-row{display:grid;gap:.35rem;margin:.8rem 0}
.form-row input,.form-row textarea{
  width:100%;padding:.8rem .9rem;border-radius:12px;border:1px solid var(--border);background:#fff
}
.form-actions{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
.form-status{font-size:.95rem;color:var(--text-2)}

/* Subscribe */
.subscribe-form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.subscribe-form input{max-width:320px}

/* Footer */
#footer{background:#0f172a;color:#cbd5e1}
.footer-inner{padding:1.4rem 0;text-align:center}
.tiny{opacity:.8;font-size:.9rem}

/* Ad Banner */
.ad-banner{width:100%;text-align:center;background:var(--muted);padding:1rem 0;border-bottom:1px solid var(--border)}
.ad-image{max-height:200px;width:auto;margin-inline:auto;border-radius:12px;box-shadow:var(--shadow)}

/* Sticky offset for anchors */
section{scroll-margin-top:var(--header-h)}

/* Modal */
.modal{border:none;border-radius:16px;padding:0;width:min(92vw,440px)}
.modal::backdrop{background:rgba(0,0,0,.45)}
.modal-content{padding:1rem 1.25rem 1.25rem;background:var(--surface);color:var(--text)}
.modal-header{display:flex;justify-content:space-between;align-items:center}
.modal .close{background:transparent;border:none;font-size:1.6rem;cursor:pointer}
.tabs{display:grid;grid-auto-flow:column;gap:.5rem;margin:.6rem 0 1rem}
.tabs [role="tab"]{padding:.5rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);cursor:pointer}
.tabs [aria-selected="true"]{background:var(--muted);font-weight:600}

/* Reveal on scroll */
.reveal > *{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.reveal.is-visible > *{opacity:1;transform:none}
.reveal.is-visible > *:nth-child(2){transition-delay:.06s}
.reveal.is-visible > *:nth-child(3){transition-delay:.12s}
.reveal.is-visible > *:nth-child(4){transition-delay:.18s}

/* Dark mode */
@media (prefers-color-scheme: dark){:root{color-scheme:dark}}
[data-theme="dark"]{
  --surface:#0b1020;
  --muted:#0f172a;
  --card:#0b1222;
  --text:#e5e7eb;
  --text-2:#cbd5e1;
  --border:rgba(148,163,184,.18);
  --shadow:0 12px 28px rgba(0,0,0,.45);
  background:
    radial-gradient(900px 600px at 15% -20%, rgba(124,58,237,.20), transparent 60%),
    radial-gradient(1200px 800px at 85% -10%, rgba(255,111,97,.18), transparent 60%),
    #070b15;
}
[data-theme="dark"] header{background:linear-gradient(180deg, rgba(11,16,32,.8), rgba(11,16,32,.6));border-color:var(--border)}
[data-theme="dark"] .btn.ghost{border-color:rgba(255,255,255,.35)}
[data-theme="dark"] .hero{background:linear-gradient(135deg,#0b1020,#0f172a)}
[data-theme="dark"] .gallery-grid img{border-color:rgba(255,255,255,.08)}

/* Responsive Nav */
@media (max-width: 860px){
  .nav-toggle{display:inline-grid;place-items:center}
  .nav-links{
    position:absolute;right:1rem;top:calc(var(--header-h) - 6px);
    background:var(--surface);border:1px solid var(--border);border-radius:16px;
    box-shadow:var(--shadow);padding:.8rem;display:flex;flex-direction:column;gap:.5rem;width:min(86vw,360px)
  }
  .nav-links[data-visible="false"]{display:none}
  .nav-links a{background:transparent}
  .nav-links .divider{display:block;height:1px;background:var(--border);width:100%;margin:.2rem 0}
}
/* WhatsApp Floating Button */
.whatsapp-fab{
  position:fixed;
  right:clamp(12px, 3vw, 22px);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.8rem 1rem;
  border-radius:999px;
  background:#25D366; /* WhatsApp brand green */
  color:#0b2814;
  font-weight:700;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  z-index:1200;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

@media (max-width: 480px){
  .whatsapp-fab{
    padding:.7rem .85rem;
  }
  .whatsapp-fab .wa-label{ display:none; } /* Icon-only on very small screens */
}

/* Dark mode contrast tweak */
[data-theme="dark"] .whatsapp-fab{
  color:#05210f;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}
/* Social Dock (WhatsApp + Instagram) */
.social-dock{
  position:fixed;
  right:clamp(12px, 3vw, 22px);
  bottom:calc(16px + env(safe-area-inset-bottom));
  display:grid;
  gap:12px;
  z-index:1200;
}

.fab{
  width:52px; height:52px;
  border-radius:999px;
  display:inline-grid; place-items:center;
  color:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.fab:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(0,0,0,.22); filter:brightness(1.02) }
.fab:active{ transform:translateY(0) }

.fab--wa{ background:#25D366; color:#05210f; }
.fab--ig{ background:#E4405F; }

@media (max-width:480px){
  .fab{ width:48px; height:48px; }
}

/* Dark mode shadow tweak */
[data-theme="dark"] .fab{
  border-color:rgba(255,255,255,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.5);
}

/* --- Form visibility fix (light, dark & autofill) --- */
.form-row input,
.form-row textarea {
  background-color: var(--surface) !important;
  color: var(--text) !important;
  -webkit-text-fill-color: var(--text) !important; /* Safari/Chrome */
  caret-color: currentColor;
  border: 1px solid #cfd8e3;
}

.form-row input::placeholder,
.form-row textarea::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}

/* Focus style so you can see the field is active */
.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--brand-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,111,97,0.18);
}

/* Autofill background/text (Chrome) */
.form-row input:-webkit-autofill,
.form-row textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text) !important;
  box-shadow: 0 0 0 1000px var(--surface) inset !important;
}

/* Dark mode overrides */
[data-theme="dark"] .form-row input,
[data-theme="dark"] .form-row textarea {
  background-color: #0b1020 !important;
  color: #e5e7eb !important;
  -webkit-text-fill-color: #e5e7eb !important;
  border-color: #334155;
}

[data-theme="dark"] .form-row input:-webkit-autofill,
[data-theme="dark"] .form-row textarea:-webkit-autofill {
  -webkit-text-fill-color: #e5e7eb !important;
  box-shadow: 0 0 0 1000px #0b1020 inset !important;
}