/* =============================================
   SUGANDHA BAZAR — assets/style.css
   ============================================= */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --gold: #C9A84C;
  --gold-light: #F0D080;
  --gold-dark: #8B6914;
  --cream: #FAF5EC;
  --deep: #1A120B;
  --brown: #3E1F00;
  --muted: #7A6652;
  --accent: #D45B2A;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Tajawal', sans-serif;
  color: var(--cream);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(201,168,76,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 90% 80%, rgba(212,91,42,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 90%, rgba(201,168,76,0.08) 0%, transparent 60%);
  z-index: 0; pointer-events: none;
}

.container { position:relative; z-index:1; max-width:900px; margin:0 auto; padding:0 2rem; }

nav {
  position:relative; z-index:10; padding:2rem 0 1rem;
  display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid rgba(201,168,76,0.15);
}
.nav-brand { text-align: center; }
.nav-logo-img { max-height:70px; max-width:220px; object-fit:contain; margin-bottom:0.3rem; }
.nav-logo { font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:900; letter-spacing:0.08em; background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-tagline { font-size:0.75rem; letter-spacing:0.25em; text-transform:uppercase; color:var(--muted); }

.hero { text-align:center; padding:5rem 0 3rem; animation:fadeUp 1s ease both; }

@keyframes fadeUp { from{opacity:0;transform:translateY(32px)} to{opacity:1;transform:translateY(0)} }

.badge { display:inline-flex; align-items:center; gap:0.5rem; background:rgba(201,168,76,0.12); border:1px solid rgba(201,168,76,0.30); border-radius:999px; padding:0.4rem 1.2rem; font-size:0.7rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); margin-bottom:2.5rem; animation:fadeUp 1s 0.15s ease both; }
.badge-dot { width:7px; height:7px; background:var(--accent); border-radius:50%; animation:pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.5;transform:scale(1.5)} }

h1 { font-family:'Playfair Display',serif; font-size:clamp(3rem,8vw,6rem); font-weight:900; line-height:1.05; margin-bottom:0.5rem; animation:fadeUp 1s 0.25s ease both; }
h1 span.gold { background:linear-gradient(135deg,var(--gold-light) 0%,var(--gold) 40%,var(--gold-dark) 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.subtitle { font-family:'Playfair Display',serif; font-size:clamp(1rem,3vw,1.5rem); color:var(--muted); font-style:italic; letter-spacing:0.04em; margin-bottom:2rem; animation:fadeUp 1s 0.35s ease both; }

.divider { display:flex; align-items:center; gap:1rem; justify-content:center; margin:2rem auto; max-width:360px; animation:fadeUp 1s 0.4s ease both; }
.divider-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,rgba(201,168,76,0.5),transparent); }
.divider-icon { color:var(--gold); font-size:1.2rem; }

.under-construction { background:rgba(255,255,255,0.03); border:1px solid rgba(201,168,76,0.20); border-radius:20px; padding:3rem 2.5rem; text-align:center; margin:2rem 0 3rem; position:relative; overflow:hidden; animation:fadeUp 1s 0.5s ease both; }
.stripe-bar { position:absolute; top:0; left:0; right:0; height:6px; background:repeating-linear-gradient(90deg,var(--gold) 0px,var(--gold) 20px,var(--accent) 20px,var(--accent) 40px); border-radius:20px 20px 0 0; }
.construct-icon { font-size:4rem; margin-bottom:1rem; display:block; animation:bounce 2.5s ease-in-out infinite; }
@keyframes bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.construct-title { font-family:'Playfair Display',serif; font-size:2rem; font-weight:700; color:var(--cream); margin-bottom:0.75rem; }
.construct-desc { font-size:1rem; color:var(--muted); line-height:1.8; max-width:500px; margin:0 auto 2rem; }

.progress-wrap { margin:1.5rem auto; max-width:420px; }
.progress-label { display:flex; justify-content:space-between; font-size:0.78rem; color:var(--muted); margin-bottom:0.5rem; }
.progress-track { background:rgba(255,255,255,0.08); border-radius:999px; height:10px; overflow:hidden; }
.progress-fill { height:100%; width:0%; border-radius:999px; background:linear-gradient(90deg,var(--gold-dark),var(--gold),var(--gold-light)); transition:width 2s cubic-bezier(0.22,1,0.36,1); }

.countdown { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.5rem 0; animation:fadeUp 1s 0.6s ease both; }
.count-box { background:rgba(255,255,255,0.04); border:1px solid rgba(201,168,76,0.18); border-radius:14px; padding:1.2rem 0.5rem; text-align:center; transition:border-color 0.3s,transform 0.3s; }
.count-box:hover { border-color:rgba(201,168,76,0.45); transform:translateY(-4px); }
.count-num { font-family:'Playfair Display',serif; font-size:2.4rem; font-weight:900; background:linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; display:block; }
.count-label { font-size:0.65rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--muted); margin-top:0.4rem; }

.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:2.5rem 0; animation:fadeUp 1s 0.7s ease both; }
.feature-card { background:rgba(255,255,255,0.03); border:1px solid rgba(201,168,76,0.12); border-radius:14px; padding:1.5rem 1rem; text-align:center; transition:background 0.3s,border-color 0.3s,transform 0.3s; }
.feature-card:hover { background:rgba(201,168,76,0.07); border-color:rgba(201,168,76,0.30); transform:translateY(-5px); }
.feature-icon { font-size:2rem; margin-bottom:0.75rem; }
.feature-name { font-size:0.85rem; font-weight:500; color:var(--cream); margin-bottom:0.3rem; }
.feature-desc { font-size:0.72rem; color:var(--muted); line-height:1.6; }

.notify-section { margin:3rem 0 2rem; text-align:center; animation:fadeUp 1s 0.8s ease both; }
.notify-title { font-family:'Playfair Display',serif; font-size:1.4rem; margin-bottom:0.4rem; }
.notify-sub { font-size:0.85rem; color:var(--muted); margin-bottom:1.5rem; }
.notify-form { display:flex; gap:0.75rem; max-width:440px; margin:0 auto; }
.notify-input { flex:1; background:rgba(255,255,255,0.06); border:1px solid rgba(201,168,76,0.25); border-radius:10px; padding:0.75rem 1rem; font-family:'Tajawal',sans-serif; font-size:0.9rem; color:var(--cream); outline:none; transition:border-color 0.3s; }
.notify-input::placeholder { color:var(--muted); }
.notify-input:focus { border-color:var(--gold); }
.notify-btn { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); border:none; border-radius:10px; padding:0.75rem 1.4rem; font-family:'Tajawal',sans-serif; font-size:0.9rem; font-weight:500; color:var(--deep); cursor:pointer; transition:opacity 0.3s,transform 0.2s; white-space:nowrap; }
.notify-btn:hover { opacity:0.88; transform:scale(1.03); }
.success-msg { font-size:0.9rem; color:var(--gold); margin-top:1rem; min-height:1.5rem; }

footer { border-top:1px solid rgba(201,168,76,0.12); padding:2rem 0; text-align:center; }
.footer-logo { font-family:'Playfair Display',serif; font-size:1.1rem; font-weight:900; background:linear-gradient(135deg,var(--gold-light),var(--gold)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin-bottom:0.5rem; }
.footer-copy { font-size:0.75rem; color:var(--muted); }
.socials { display:flex; gap:1rem; justify-content:center; margin:1rem 0; }
.social-link { width:38px; height:38px; border:1px solid rgba(201,168,76,0.20); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; color:var(--muted); text-decoration:none; transition:border-color 0.3s,color 0.3s,transform 0.3s; }
.social-link:hover { border-color:var(--gold); color:var(--gold); transform:translateY(-3px); }

.particles { position:fixed; inset:0; pointer-events:none; z-index:0; }
.particle { position:absolute; border-radius:50%; background:var(--gold); opacity:0; animation:floatUp var(--dur) var(--delay) ease-in infinite; }
@keyframes floatUp { 0%{opacity:0;transform:translateY(0) scale(0.5)} 20%{opacity:0.5} 80%{opacity:0.2} 100%{opacity:0;transform:translateY(-120vh) scale(1.5)} }

@media(max-width:600px) {
  .features { grid-template-columns:1fr 1fr; }
  .countdown { grid-template-columns:repeat(2,1fr); }
  .notify-form { flex-direction:column; }
  .notify-btn { width:100%; }
}