/* Global Reset and Variables */
:root{
  --bg-1:#0f172a; /* slate-900 */
  --bg-2:#0b1324;
  --primary:#22d3ee; /* cyan-400 */
  --primary-600:#0891b2; /* cyan-700 */
  --accent:#f59e0b; /* amber-500 */
  --text:#e5e7eb; /* gray-200 */
  --muted:#94a3b8; /* slate-400 */
  --card:#111827; /* gray-900 */
  --success:#22c55e;
  --danger:#ef4444;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:radial-gradient(80rem 80rem at 50% 0%, rgba(34,211,238,.10), transparent 60%),
             radial-gradient(60rem 60rem at 50% 100%, rgba(245,158,11,.08), transparent 60%),
             repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 2px, transparent 2px 6px),
             linear-gradient(180deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  line-height:1.6;
}

/* Centered seamless ornamental backdrop */
.site-backdrop{
  position:fixed; inset:0; pointer-events:none; z-index:-1;
}
.site-backdrop::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(30rem 30rem at center, rgba(34,211,238,.12), transparent 70%),
    radial-gradient(12rem 12rem at center, rgba(245,158,11,.10), transparent 72%);
  filter: blur(20px) saturate(120%);
}

/* Layout */
.container{width:min(1200px, 92%); margin:0 auto}
header{
  position:sticky; top:0; z-index:50; backdrop-filter:saturate(140%) blur(8px);
  background: linear-gradient(180deg, rgba(2,6,23,.85), rgba(2,6,23,.55));
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand-logo{
  width:38px; height:38px; border-radius:12px;
  background: conic-gradient(from 210deg, var(--primary), var(--accent), var(--primary));
  box-shadow:0 10px 30px rgba(34,211,238,.25), inset 0 0 16px rgba(255,255,255,.2);
}
.brand-name{font-weight:800; letter-spacing:.4px; color:#fff}
.nav ul{display:flex; gap:20px; list-style:none}
.nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; transition:.2s}
.nav a:hover, .nav a.active{color:#001017; background:var(--primary)}
.nav a.active{pointer-events:none}

/* Mobile nav toggle */
.nav-toggle{display:none; width:38px; height:38px; border-radius:10px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.06); cursor:pointer; position:relative}
.nav-toggle::before, .nav-toggle::after{content:""; position:absolute; left:9px; right:9px; height:2px; background:#e5e7eb; transition:.2s}
.nav-toggle::before{top:12px}
.nav-toggle::after{bottom:12px}
header.open .nav-toggle::before{transform:translateY(7px) rotate(45deg)}
header.open .nav-toggle::after{transform:translateY(-7px) rotate(-45deg)}


/* Hero with overlay (per user preference) */
.hero{position:relative; overflow:hidden; min-height:100vh; width:100%}
.hero .media{position:absolute; inset:0; background:url('https://images.unsplash.com/photo-1581094794329-c8112a89af12?q=80&w=2000&auto=format&fit=crop') center/cover no-repeat; filter:none}
.hero--contain .media{background:none; background-color:#0b1324; filter:none}
.hero--contain .media .media-contain{position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:contain; filter:none}
.hero .media iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.hero .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,.62), rgba(2,6,23,.42)), radial-gradient(50rem 30rem at 40% 10%, rgba(34,211,238,.10), transparent 60%)}
.hero .content h1, .hero .content p, .hero .content .eyebrow{ text-shadow:0 2px 6px rgba(0,0,0,.45)}
.hero .content{position:relative; min-height:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:120px 0 80px}
.eyebrow{color:var(--primary); font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.8rem}
.hero h1{font-size:clamp(2rem, 5vw, 3.6rem); line-height:1.08; margin:.6rem 0 1rem}
.hero p{max-width:60ch; color:#ffffff; font-size:1.05rem; font-weight:500; text-shadow:0 2px 4px rgba(0,0,0,.35)}
.cta{display:inline-flex; align-items:center; gap:10px; padding:14px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.12); text-decoration:none; color:#001017; background:var(--primary); box-shadow:0 8px 30px rgba(34,211,238,.25); font-weight:700; margin-top:22px}
.cta:hover{transform:translateY(-1px); box-shadow:0 16px 40px rgba(34,211,238,.35)}
.cta.secondary{background:transparent; color:var(--text)}

/* Sections */
section{padding:70px 0; position:relative}
.section-title{font-size:1.8rem; margin-bottom:12px; text-align:center; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.3)}
.section-sub{color:var(--muted); margin-bottom:32px; text-align:center; font-weight:500; text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* Services */
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}
.card{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); padding:18px; position:relative; overflow:hidden; transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.card::after{content:""; position:absolute; inset:auto -30% -30% auto; width:180px; height:180px; background:radial-gradient(closest-side, rgba(34,211,238,.18), transparent); transform:rotate(25deg); transition:all .3s ease}
.card:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 20px 40px rgba(34,211,238,.15); border-color:rgba(34,211,238,.3); background:rgba(255,255,255,.06)}
.card:hover::after{transform:rotate(45deg); background:radial-gradient(closest-side, rgba(34,211,238,.25), transparent)}
.card h3{margin-bottom:8px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.2)}
.card img{transition:transform .3s ease, filter .3s ease}
.card:hover img{transform:scale(1.05); filter:brightness(1.1)}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; background:rgba(34,211,238,.15); color:var(--primary); font-weight:700; font-size:.8rem}

/* Gallery */
.gallery{display:grid; grid-template-columns:repeat(6, 1fr); gap:10px}
.gallery img{width:100%; height:180px; object-fit:cover; border-radius:12px; opacity:.92; transition:.25s}
.gallery img:hover{transform:translateY(-3px); opacity:1}

/* Recent Work - before/after pairs */
.work-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.work-pair{padding:0}
.work-images{display:grid; grid-template-columns:1fr 1fr; gap:10px; position:relative}
.work-images::after{content:""; position:absolute; left:50%; top:8%; bottom:8%; width:2px; background:linear-gradient(to bottom, rgba(34,211,238,.0), rgba(34,211,238,.5), rgba(34,211,238,.0))}
.work-images img{width:100%; height:400px; object-fit:cover; border-radius:12px}
.tag{position:absolute; top:8px; left:8px; background:rgba(2,6,23,.7); border:1px solid rgba(255,255,255,.14); color:#fff; font-size:.75rem; padding:4px 8px; border-radius:999px}
.tag.right{left:auto; right:8px}
.work-footer{display:flex; justify-content:center; padding-top:10px}
.cta.small{padding:10px 14px; font-size:.9rem}

/* Testimonials with fan brackets */
.testimonials{position:relative; padding:40px 0}
.fan{
  position:relative; padding:32px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:24px; overflow:hidden; backdrop-filter:blur(10px)
}
.fan::before, .fan::after{
  content:""; position:absolute; width:60px; height:60px; border:3px solid var(--accent); border-radius:60% 60% 0 60%/60% 60% 0 60%; filter:drop-shadow(0 8px 16px rgba(245,158,11,.25));
}
.fan::before{top:-15px; left:-15px; transform:rotate(45deg)}
.fan::after{bottom:-15px; right:-15px; transform:rotate(225deg)}

/* Hover animation on fan borders */
.fan{transition:all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94)}
.fan:hover{transform:translateY(-8px) scale(1.02); box-shadow:0 20px 50px rgba(34,211,238,.2), inset 0 0 0 1px rgba(245,158,11,.3); border-color:rgba(255,255,255,.3); background:rgba(255,255,255,.06)}
.fan:hover::before{transform:rotate(75deg); filter:drop-shadow(0 12px 24px rgba(245,158,11,.35))}
.fan:hover::after{transform:rotate(195deg)}

.quote{font-size:1.1rem; color:#fff; line-height:1.6; font-style:italic; margin-bottom:16px; text-shadow:0 1px 2px rgba(0,0,0,.2)}
.author{margin-top:12px; color:var(--muted); font-weight:600; font-size:.95rem; text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* Testimonial stars */
.stars{display:flex; gap:3px; margin-bottom:12px}
.star{color:var(--accent); font-size:1rem; filter:drop-shadow(0 2px 4px rgba(245,158,11,.3))}

/* Testimonial slider */
.testimonials-slider{overflow:hidden; position:relative; margin:0; padding:0}
.testimonials-track{display:flex; transition:transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); gap:0; padding:0}
.testimonials-track .fan{min-width:100%; flex-shrink:0; margin:0; border-radius:0}

/* Show only one testimonial at a time on all screen sizes */
@media (min-width: 900px){
  .testimonials-track .fan{min-width:100%; margin:0}
}

@media (min-width: 640px) and (max-width: 899px){
  .testimonials-track .fan{min-width:100%; margin:0}
}

/* FAQ */
.faq-item{border-bottom:1px solid rgba(255,255,255,.08)}
.faq-q{display:flex; justify-content:space-between; align-items:center; padding:18px 0; cursor:pointer}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease}
.faq-item.open .faq-a{max-height:220px}

/* Footer */
footer{padding:30px 0; border-top:1px solid rgba(255,255,255,.06); background:rgba(2,6,23,.6)}
.footer-grid{display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.social{display:flex; gap:10px}
.chip{padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06); color:var(--muted); font-size:.85rem}

/* Social section styling */
.social-card{text-align:center; transition:transform .3s ease, box-shadow .3s ease}
.social-card:hover{transform:translateY(-6px); box-shadow:0 16px 32px rgba(34,211,238,.12)}
.social-card h3{color:#fff; margin-bottom:8px; text-shadow:0 1px 2px rgba(0,0,0,.2)}
.social-icon{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(34,211,238,.12), rgba(245,158,11,.12)); border:1px solid rgba(34,211,238,.2); font-size:1.4rem; margin:0 auto 12px}

/* Social media specific icons */
.social-icon.facebook{background:linear-gradient(135deg, #1877f2, #0d6efd)}
.social-icon.tiktok{background:linear-gradient(135deg, #000000, #25f4ee)}
.social-icon.whatsapp{background:linear-gradient(135deg, #25d366, #128c7e)}

/* Correct social media icons using CSS content */
.social-icon.facebook::before{content:"📘"; font-size:1.6rem}
.social-icon.tiktok::before{content:"🎵"; font-size:1.6rem}
.social-icon.whatsapp::before{content:"💬"; font-size:1.6rem}

/* Utilities */
.row{display:flex; gap:12px; flex-wrap:wrap}
.center{text-align:center}
.muted{color:var(--muted); text-shadow:0 1px 2px rgba(0,0,0,.2)}
.hidden{display:none}

/* Fancy custom cursor */
body{cursor:none}
.no-custom-cursor body{cursor:auto}
.cursor-dot, .cursor-ring{position:fixed; top:0; left:0; pointer-events:none; z-index:10000; transform:translate(-50%, -50%)}
.cursor-dot{width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 10px rgba(34,211,238,.6)}
.cursor-ring{width:32px; height:32px; border-radius:50%; border:2px solid rgba(34,211,238,.7); box-shadow:0 0 20px rgba(34,211,238,.25); transition:transform .12s ease, width .12s ease, height .12s ease, border-color .12s ease}
.is-hover .cursor-ring{width:38px; height:38px; border-color:var(--accent)}

/* Ensure only one cursor shows on interactive controls */
html, body, a, button, .cta, input, select, textarea{cursor:none !important}

/* Disable custom cursor on touch devices */
@media (hover:none), (pointer:coarse){
  body{cursor:auto}
  .cursor-dot, .cursor-ring{display:none}
}

/* Form controls: improve dropdown visibility */
select, option{color:#0b1324}
select{background:#fff}

/* Stats strip (Trusted by Property Owners) */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:center}
.stat{display:flex; align-items:center; gap:14px; padding:8px 0}
.stat .icon{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:rgba(34,211,238,.12); border:1px solid rgba(34,211,238,.25); color:var(--primary)}
.stat .num{font-size:1.6rem; font-weight:800}
.stat .label{color:var(--muted); text-shadow:0 1px 2px rgba(0,0,0,.2)}

/* New enhanced stats style */
.stats-new{display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin:40px 0}
.stat-new{background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:32px 24px; text-align:center; transition:transform .3s ease, box-shadow .3s ease}
.stat-new:hover{transform:translateY(-8px); box-shadow:0 20px 40px rgba(34,211,238,.15)}
.icon-new{width:64px; height:64px; border-radius:16px; display:grid; place-items:center; background:linear-gradient(135deg, rgba(34,211,238,.15), rgba(245,158,11,.15)); border:2px solid rgba(34,211,238,.25); font-size:1.8rem; margin:0 auto 16px}
.stat-content{display:flex; flex-direction:column; gap:4px}
.num-new{font-size:2.4rem; font-weight:900; color:#fff; line-height:1}
.label-new{color:var(--muted); font-size:.95rem; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.2)}

@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(34,211,238,.0)}50%{box-shadow:0 0 0 10px rgba(34,211,238,.08)}}
.icon-anim{animation:pulseGlow 2.2s ease-in-out infinite}

@keyframes floatY{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.float-anim{animation:floatY 3.2s ease-in-out infinite}

/* Responsive */
@media (max-width: 900px){
  .grid-3{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .nav ul{display:none}
  .nav-toggle{display:block}
  header.open .nav ul{display:flex; position:absolute; top:100%; left:4%; right:4%; flex-direction:column; gap:8px; padding:12px; background:rgba(2,6,23,.9); border:1px solid rgba(255,255,255,.08); border-radius:12px}
  .grid-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .hero .content{padding:90px 0 60px}
  .stats{grid-template-columns:1fr}
  /* Force inline two-column grids to stack on small screens */
  [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1.1fr .9fr"], [style*="grid-template-columns:1.1fr 0.9fr"]{grid-template-columns:1fr !important}
}

/* Reveal animations */
[data-reveal]{opacity:0; transform:translateY(14px); transition:.6s ease}
[data-reveal].revealed{opacity:1; transform:none}
/* Directional entrance variants */
.reveal-left[data-reveal]{transform:translateX(-24px); opacity:0}
.reveal-right[data-reveal]{transform:translateX(24px); opacity:0}
.reveal-left[data-reveal].revealed,
.reveal-right[data-reveal].revealed{transform:none; opacity:1}