/* ============================================================
   ELITE IMPRESSIONS — GLOBAL DESIGN SYSTEM
   ============================================================ */

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

/* ---- TOKENS ---- */
:root {
  --bg:          #1c1c1c;
  --bg2:         #141414;
  --bg3:         #0e0e0e;
  --card:        #232323;
  --card-h:      #2a2a2a;
  --border:      rgba(255,217,135,.11);
  --border-h:    rgba(255,217,135,.32);
  --gold:        #ffd987;
  --gold-b:      #ffe9a8;
  --gold-d:      #c9a84c;
  --gold-bg:     rgba(255,217,135,.07);
  --txt:         #f0ece3;
  --txt2:        #9e9890;
  --txt3:        #5c5854;
  --white:       #ffffff;
  --green:       #25d366;
  --grad-gold:   linear-gradient(135deg,#ffd987 0%,#c9a84c 100%);
  --grad-gold-h: linear-gradient(135deg,#ffe9a8 0%,#ffd987 100%);
  --grad-hero:   linear-gradient(160deg,#1c1c1c 0%,#111 55%,#0d0b07 100%);
  --grad-cta:    linear-gradient(160deg,#1a1500 0%,#1c1c1c 100%);
  --shadow-g:    0 4px 28px rgba(255,217,135,.14);
  --shadow-c:    0 2px 20px rgba(0,0,0,.55);
  --r-sm:        6px;
  --r-md:        12px;
  --r-lg:        20px;
  --r-xl:        32px;
  --max:         1120px;
  --px:          clamp(20px,5vw,60px);
  --font-d:      'Bebas Neue', sans-serif;
  --font-b:      'DM Sans', sans-serif;
}

/* ---- RESET ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--font-b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}

/* ---- LAYOUT ---- */
.container{max-width:var(--max);margin:0 auto;padding:0 var(--px)}
.section{padding:clamp(60px,8vw,100px) 0}
.section--alt{background:var(--bg2)}
.section--dark{background:var(--bg3)}

/* ---- TYPE ---- */
.label{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);background:var(--gold-bg);border:1px solid var(--border);padding:6px 14px;border-radius:40px;margin-bottom:18px}
.h1{font-family:var(--font-d);font-size:clamp(42px,7vw,90px);letter-spacing:.02em;line-height:.97;color:var(--txt)}
.h2{font-family:var(--font-d);font-size:clamp(30px,4.5vw,52px);letter-spacing:.03em;line-height:1.05;color:var(--txt)}
.h3{font-family:var(--font-d);font-size:clamp(20px,2.5vw,28px);letter-spacing:.04em;color:var(--txt)}
.gold-text{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sub{font-size:clamp(15px,2vw,17px);color:var(--txt2);line-height:1.65}
.divider{width:48px;height:3px;background:var(--grad-gold);border-radius:2px;margin:14px 0 22px}
.divider--c{margin:14px auto 22px}
.section-header{margin-bottom:clamp(36px,5vw,60px)}

/* ---- BUTTONS ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-b);font-weight:600;font-size:15px;letter-spacing:.02em;border-radius:var(--r-sm);padding:14px 28px;cursor:pointer;border:none;transition:all .22s ease;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--grad-gold);color:#1a1400;box-shadow:var(--shadow-g)}
.btn-primary:hover{background:var(--grad-gold-h);box-shadow:0 6px 32px rgba(255,217,135,.28);transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--gold);border:1.5px solid var(--gold-d)}
.btn-outline:hover{background:var(--gold-bg);border-color:var(--gold)}
.btn-wa{background:#25d366;color:#fff;font-weight:700}
.btn-wa:hover{background:#1fba59;transform:translateY(-1px);box-shadow:0 6px 24px rgba(37,211,102,.28)}
.btn-lg{padding:17px 36px;font-size:16px}

/* ---- TOPBAR ---- */
.topbar{background:var(--grad-gold);padding:9px var(--px);text-align:center;font-size:13px;font-weight:600;color:#1a1400;letter-spacing:.04em}
.topbar a{color:#1a1400;text-decoration:underline;text-underline-offset:2px}

/* ---- NAV ---- */
.nav{position:sticky;top:0;z-index:200;background:rgba(18,18,18,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--border);padding:15px var(--px)}
.nav-inner{max-width:var(--max);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo{font-family:var(--font-d);font-size:26px;letter-spacing:.08em;color:var(--txt)}
.nav-logo span{background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:26px}
.nav-links a{font-size:14px;font-weight:500;color:var(--txt2);transition:color .15s;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a.active::after{content:'';position:absolute;bottom:-4px;left:0;right:0;height:2px;background:var(--grad-gold);border-radius:1px}
.nav-menu-btn{display:none;background:none;border:none;color:var(--txt);cursor:pointer;padding:4px}
@media(max-width:720px){.nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:rgba(14,14,14,.98);border-bottom:1px solid var(--border);padding:20px var(--px);flex-direction:column;gap:18px}.nav-links.open{display:flex}.nav-menu-btn{display:block}}

/* ---- FOOTER ---- */
.footer{background:var(--bg3);border-top:1px solid var(--border);padding:clamp(40px,6vw,70px) var(--px) 30px}
.footer-grid{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand .nav-logo{font-size:22px;margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--txt3);line-height:1.65;max-width:260px;margin-bottom:18px}
.footer-col h4{font-family:var(--font-d);font-size:14px;letter-spacing:.1em;color:var(--txt);margin-bottom:14px}
.footer-col a{display:block;font-size:13px;color:var(--txt3);margin-bottom:9px;transition:color .15s}
.footer-col a:hover{color:var(--gold)}
.footer-contact-item{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--txt3);margin-bottom:10px}
.footer-contact-item svg{flex-shrink:0;color:var(--gold-d)}
.footer-bottom{max-width:var(--max);margin:0 auto;border-top:1px solid var(--border);padding-top:22px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:12px;color:var(--txt3)}
.footer-social{display:flex;gap:12px}
.footer-social a{width:34px;height:34px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--txt3);transition:all .2s}
.footer-social a:hover{border-color:var(--gold-d);color:var(--gold)}

/* ---- CARDS ---- */
.card-base{background:var(--card);border:1px solid var(--border);border-radius:var(--r-md);transition:all .22s ease}
.card-base:hover{border-color:var(--border-h);transform:translateY(-2px);box-shadow:var(--shadow-c)}

/* ---- IMAGE PLACEHOLDER ---- */
.img-placeholder{background:var(--bg2);border:2px dashed var(--border-h);border-radius:var(--r-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--txt3);font-size:13px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:20px}
.img-placeholder svg{color:var(--border-h)}

/* ---- FORM ---- */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--txt2);margin-bottom:7px}
.form-group input,.form-group textarea,.form-group select{width:100%;background:var(--bg2);border:1px solid var(--border);border-radius:var(--r-sm);padding:13px 16px;font-family:var(--font-b);font-size:15px;color:var(--txt);outline:none;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--gold-d)}
.form-group textarea{resize:vertical;min-height:120px}
.form-group select option{background:var(--bg2)}

/* ---- STATS BAR ---- */
.stats-bar{background:var(--card);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:26px var(--px)}
.stats-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;text-align:center}
.stat-num{font-family:var(--font-d);font-size:clamp(26px,4vw,40px);letter-spacing:.04em;background:var(--grad-gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.stat-label{font-size:12px;color:var(--txt3);font-weight:500;letter-spacing:.05em;text-transform:uppercase;margin-top:2px}

/* ---- HERO GRID LINES ---- */
.hero-grid::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,217,135,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,217,135,.022) 1px,transparent 1px);background-size:60px 60px;pointer-events:none}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.anim-1{animation:fadeUp .55s ease both}
.anim-2{animation:fadeUp .55s .1s ease both}
.anim-3{animation:fadeUp .55s .2s ease both}
.anim-4{animation:fadeUp .55s .3s ease both}

/* ---- FAQ ---- */
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden;margin-bottom:3px;transition:border-color .2s}
.faq-item:hover{border-color:var(--border-h)}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:19px 24px;font-family:var(--font-b);font-size:15px;font-weight:600;color:var(--txt);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-q .ch{font-size:20px;color:var(--gold-d);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q .ch{transform:rotate(45deg)}
.faq-a{display:none;padding:0 24px 18px;font-size:14px;color:var(--txt2);line-height:1.65;border-top:1px solid var(--border)}
.faq-item.open .faq-a{display:block}

/* ---- UTILITY ---- */
.text-center{text-align:center}
.text-gold{color:var(--gold)}
.mt-8{margin-top:8px}
.mt-16{margin-top:16px}
.mt-24{margin-top:24px}
.mt-40{margin-top:40px}
.mb-0{margin-bottom:0}
.gap-12{gap:12px}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.align-center{align-items:center}
.justify-center{justify-content:center}