
/* EcoKrai — Emerald New Year + Garland + Mobile */
*{box-sizing:border-box}html,body{margin:0;padding:0}
:root{--bg:#0b1f17;--bg2:#0f2b1f;--text:#f7f7f7;--muted:#c9d0d7;--gold1:#FFD400;--gold2:#FFB800;--ring:rgba(255,212,0,.34);--card:#132e22;--border:rgba(255,255,255,.08)}
body{font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg2)) fixed;min-height:100vh}
a{color:var(--gold1)}
.container{max-width:1100px;margin:0 auto;padding:24px 20px}
header{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);position:sticky;top:0;backdrop-filter:blur(6px);z-index:60}
.logo-img{height:42px;vertical-align:middle}
.nav{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.nav a{color:var(--text);text-decoration:none;font-weight:700}
.btn{display:inline-block;border-radius:12px;padding:12px 16px;text-decoration:none;font-weight:800}
.btn-yellow{background:linear-gradient(90deg,var(--gold1),var(--gold2));color:#121212;border:1px solid var(--gold1)}
.btn-outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.2)}

.garland{position:relative;height:22px}
.garland::before{content:'';position:absolute;left:0;right:0;top:8px;height:2px;background:linear-gradient(90deg,rgba(255,215,0,.6),rgba(0,0,0,0),rgba(0,0,0,0),rgba(255,215,0,.6))}
.bulbs{display:flex;justify-content:space-between;gap:10px;padding:6px 10px}
.bulb{width:10px;height:10px;border-radius:50%;box-shadow:0 0 10px rgba(255,255,255,.5);animation:twinkle 1.8s ease-in-out infinite}
.b-g{background:#25d366}.b-y{background:#FFD400}.b-r{background:#e64545}
@keyframes twinkle{0%,100%{opacity:.8}50%{opacity:1;filter:brightness(1.35)}}

.ek-hero .ek-pill{display:inline-flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font:700 12px/1 system-ui}
.ek-hero h1{font:900 34px/1.1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;margin:14px 0 10px}
.glow{animation:ekGlow 3.6s ease-in-out infinite}
@keyframes ekGlow{0%{text-shadow:0 0 0 rgba(255,212,0,0)}50%{text-shadow:0 0 18px rgba(255,212,0,.35)}100%{text-shadow:0 0 0 rgba(255,212,0,0)}}
.ek-sub{color:#cae0d5;max-width:760px}.ek-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
@media (max-width:640px){.ek-hero h1{font-size:26px}}

.wrap{max-width:1100px;margin:0 auto;padding:24px 20px}
.title{font:800 28px/1.2 system-ui;margin:0 0 12px}.sub{color:#cae0d5;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}
.card{background:var(--card);border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.22);padding:18px;border:1px solid var(--border);opacity:0;transform:translateY(10px);animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.badge{display:inline-flex;gap:8px;background:#0f261d;padding:6px 10px;border-radius:999px;font:700 13px/1 system-ui}
.price{font:900 26px/1.1 system-ui}
.bullets{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;color:#a9c4b7;font-size:13px}
.cta{margin-top:auto;display:flex;gap:10px;flex-wrap:wrap}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gallery img{width:100%;height:200px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}
@media (max-width:960px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery img{height:180px}}
@media (max-width:560px){.gallery{grid-template-columns:1fr}.gallery img{height:220px}}

footer{border-top:1px solid var(--border);color:#bed5ca}
.small{font-size:14px;color:#a9c4b7}
.hr{height:1px;background:var(--border);margin:14px 0}

/* FABs 60px on mobile */
.wa-fab, .call-fab {position:fixed;z-index:80;display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;box-shadow:0 10px 22px rgba(0,0,0,.25)}
.wa-fab { right: 18px; bottom: 18px; background: #25D366; border: 1px solid rgba(0,0,0,.12) }
.call-fab { left: 18px; bottom: 18px; background: linear-gradient(90deg,#FFD400,#FFB800); border: 1px solid #FFD400; color:#121212 }
@media (min-width: 561px) { .wa-fab, .call-fab { display:none } }

/* Snow canvas */
#snow{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.6}

/* Logo intro */
@keyframes ekLogoIn { 0%{opacity:0;transform:translateY(-8px) scale(.98)} 60%{opacity:1;transform:translateY(0) scale(1)} 100%{opacity:1;transform:none} }
.logo-anim { opacity:0; animation: ekLogoIn .9s ease-out .15s forwards }
