/* SANDS LTD — Coming Soon Styles (improved contrast) */
:root{
  --sand-50: #fbf7f1;
  --sand-100:#f6efe3;
  --sand-200:#efe2cc;
  --sand-300:#e3cfae;
  --sand-400:#d2b58b;
  --sand-500:#b99572;
  --sand-600:#9b785b;
  --sand-700:#7d5f4b;
  --sand-800:#5d4638;
  --sand-900:#3b2d25;
  --ink:#2b2623;
  --white: #ffffff;
  --muted:#6f6259;
  --accent:#b58968; /* brand-ish brown */
  --glass: rgba(255,255,255,.65);
  --shadow: 0 10px 30px rgba(0,0,0,.1);

  /* High-contrast countdown colors */
  --counter-fg:#1d140e;
  --counter-bg: rgba(255,255,255,.92);
}

@media (prefers-color-scheme: dark){
  :root{
    --sand-50:#161413;
    --sand-100:#1b1816;
    --sand-200:#221f1c;
    --sand-300:#2a2623;
    --sand-400:#332e2a;
    --sand-500:#3d3833;
    --sand-600:#52463f;
    --ink:#efe6dd;
    --glass: rgba(30,27,25,.5);
    --shadow: 0 10px 30px rgba(0,0,0,.35);

    --counter-fg:#ffffff;
    --counter-bg: rgba(0,0,0,.55);
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--ink);
  background: linear-gradient(180deg,var(--sand-100), var(--sand-200));
  display:grid;
  place-items:center;
}

.bg{
  position:fixed; inset:0; overflow:hidden; z-index:-1;
  background: radial-gradient(1200px 600px at 80% -10%, rgba(255,245,230,.6), transparent),
              radial-gradient(800px 500px at 0% 100%, rgba(181,137,104,.15), transparent);
}
.grain{
  position:absolute; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.06'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  animation: grain 9s steps(10) infinite;
}
@keyframes grain{0%{transform:translate(0,0)}10%{transform:translate(-1%, -1%)}20%{transform:translate(1%, -1%)}30%{transform:translate(-1%,1%)}40%{transform:translate(1%,1%)}50%{transform:translate(0,0)}60%{transform:translate(1%, -1%)}70%{transform:translate(-1%, -1%)}80%{transform:translate(1%,1%)}90%{transform:translate(-1%,1%)}100%{transform:translate(0,0)}}

.sun{
  position:absolute; width:180px; height:180px; right:8vw; top:8vh; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #ffe9c7, #d2b58b);
  filter: blur(0.2px) drop-shadow(0 20px 50px rgba(210,181,139,.4));
  opacity:.85;
}

.wave{
  position:absolute; left:-50vw; right:-50vw; height:120px;
  background: radial-gradient(100% 60% at 50% 60%, rgba(181,137,104,.25), transparent 60%);
  animation: wave 14s linear infinite;
  transform: translateZ(0);
}
.wave-1{ bottom:12vh; animation-duration: 26s; opacity:.4}
.wave-2{ bottom:9vh; animation-duration: 18s; opacity:.55}
.wave-3{ bottom:6vh; animation-duration: 14s; opacity:.7}
@keyframes wave{to{transform:translateX(50vw)}}

.shell{
  width:min(1000px, 92vw);
  padding: clamp(24px, 4vw, 48px);
  backdrop-filter: blur(6px);
  background: var(--glass);
  border-radius: 28px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.04);
}

.brand{
  text-align:center;
  margin-bottom: 1rem;
}
.logo{
  width:min(240px, 60vw);
  height:auto;
  display:block;
  margin: 0 auto .2rem;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.08));
}
.title{
  letter-spacing:.18em;
  font-weight:800;
  margin:.1rem 0 0;
}
.tagline{
  color: var(--muted);
  margin:.3rem 0 0;
}

.hero{
  text-align:center;
  padding: 1rem 0 0.5rem;
}
.lead{
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  margin: 0.75rem auto 1.25rem;
  max-width: 60ch;
}

.countdown{
  display:flex; gap:10px; justify-content:center; align-items:stretch;
  margin: 1rem 0 1.25rem;
}
.block{
  min-width: 90px; border-radius: 18px; padding:.9rem .75rem;
  background: var(--counter-bg);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0,0,0,.06);
}
.num{
  display:block; font-size: clamp(1.4rem, 4vw, 2.2rem); font-weight:800; line-height:1.1;
  color: var(--counter-fg);
}
.label{
  font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}

.cta{ display:flex; justify-content:center; gap:.75rem; margin:.25rem 0 1.25rem; flex-wrap:wrap;}

.button{
  --btn-bg: var(--accent);
  --btn-fg: #fff;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.75rem 1rem; border-radius: 999px; font-weight:700; text-decoration:none;
  border: 1px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.button:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,.15); }
.button:active{ transform: translateY(0); }
.button.primary{ --btn-bg: #2b2623; --btn-fg: #fff; }
.button.ghost{ background: transparent; color: #2b2623; border-color: rgba(0,0,0,.25); }
@media (prefers-color-scheme: dark){
  .button.ghost{ color: #fff; border-color: rgba(255,255,255,.35); }
}

.notify{
  display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; align-items:center; margin-bottom: .75rem;
}
.notify input{
  min-width:min(420px, 70vw);
  padding:.8rem 1rem; border-radius: 999px; border:1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.95);
  outline:none; font-size:1rem;
}
.notify input:focus{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(181,137,104,.18); }
.msg{ min-height:1.25em; color: var(--muted); margin:.2rem 0 0; }

.social{ display:flex; justify-content:center; gap:.65rem; margin-top:.2rem; }
.icon{ width:42px; height:42px; display:grid; place-items:center; border-radius:999px; border:1px solid rgba(0,0,0,.08); background: rgba(255,255,255,.78); transition: transform .12s ease; }
.icon:hover{ transform: translateY(-1px); }
.icon svg{ width:22px; height:22px; fill: var(--ink); }

.footer{ text-align:center; color: var(--muted); margin-top:.75rem; }

/* Accessibility helpers */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}