:root{
  --bg:#21272a;
  --ink:#e7ecef;
  --muted:#b7c0c6;

  --red:#9c2d12;
  --green:#638372;
  --mint:#739c8c;

  --paw:#491d8b;

  --card: rgba(255,255,255,.04);
  --card2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);

  --shadow: 0 18px 70px rgba(0,0,0,.45);
  --radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink);
  background:none;              /* ✅ Bulletproof method: background moved off body */
  overflow-x:hidden;
}

/* ✅ Bulletproof Fixed background layer (STATIC while content scrolls) */
.bg-fixed{
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 18% 10%, rgba(115,156,140,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 22%, rgba(156,45,18,.16), transparent 60%),
    radial-gradient(900px 700px at 30% 95%, rgba(99,131,114,.20), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.40)),
    var(--bg);
}

/* subtle noise (STATIC) */
.noise{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:-1;
  opacity:.06;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

/* ✅ Optional Micro-Upgrade */
.wrap{
  position:relative;
  z-index:1;

  max-width: 980px;
  margin: 0 auto;
  padding: 64px 20px 80px;
}

.wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 20px 80px;
}

header{
  display:flex;
  flex-direction:column;
  gap: 18px;
  align-items:center;
  text-align:center;
  margin-bottom: 34px;
}

.kicker{
  letter-spacing:.22em;
  text-transform:uppercase;
  font-size: 12px;
  color: rgba(231,236,239,.78);
}

.title{
  font-size: clamp(28px, 4vw, 46px);
  letter-spacing:.04em;
  line-height:1.05;
  margin:0;
}

.title .accent{
  color: var(--mint);
  text-shadow: 0 0 0 transparent;
}

.sub{
  margin:0;
  max-width: 64ch;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.coming{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  margin: 18px 0 8px;
}

.coming .label{
  font-weight: 700;
  font-size: 15px;
  color: rgba(231,236,239,.92);
}

.clockShell{
  width:min(780px, 100%);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.02));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 16px 16px;
  position:relative;
  overflow:hidden;
}

.clockShell::before{
  content:"";
  position:absolute;
  inset:-60px -120px auto -120px;
  height:140px;
  background: radial-gradient(closest-side, rgba(115,156,140,.25), transparent 70%);
  transform: rotate(-6deg);
  pointer-events:none;
}

.clockTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.seal{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(99,131,114,.35);
  background: rgba(99,131,114,.10);
  color: rgba(231,236,239,.90);
  font-size: 12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  user-select:none;
  white-space:nowrap;
}

.paw{
  color: var(--paw);
  font-size: 18px;
  filter: drop-shadow(0 10px 24px rgba(73,29,139,.35));
}

.toNearYou{
  font-size: 12px;
  color: rgba(231,236,239,.72);
  letter-spacing:.12em;
  text-transform:uppercase;
  user-select:none;
  white-space:nowrap;
}

.timer{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.tBox{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  border-radius: 14px;
  padding: 12px 10px;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.tBox::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(115,156,140,.70), transparent);
  opacity:.7;
}

.num{
  font-variant-numeric: tabular-nums;
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 800;
  letter-spacing:.02em;
  margin:0;
  color: rgba(231,236,239,.94);
}
.lab{
  margin: 4px 0 0;
  font-size: 11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color: rgba(183,192,198,.90);
}

.micro{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(231,236,239,.72);
  line-height:1.5;
  display:flex;
  justify-content:center;
  gap: 10px;
  flex-wrap:wrap;
}
.micro .dot{
  color: rgba(115,156,140,.75);
}
.micro code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(231,236,239,.82);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 2px 6px;
  border-radius: 8px;
}

main{
  margin-top: 40px;
}

.sectionTitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  margin: 0 0 14px;
}

.sectionTitle h2{
  margin:0;
  font-size: 13px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color: rgba(231,236,239,.78);
  font-weight: 700;
}

.rule{
  height:1px;
  flex:1;
  background: linear-gradient(90deg, rgba(156,45,18,.35), rgba(115,156,140,.30), transparent);
  border-radius: 999px;
  opacity:.8;
}

.grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.quote{
  grid-column: span 12;
  background: linear-gradient(180deg, var(--card), rgba(255,255,255,.02));
  border: 1px solid var(--stroke);
  border-radius: var(--radius);
  padding: 18px 16px 16px;
  box-shadow: 0 12px 50px rgba(0,0,0,.25);
  position:relative;
  overflow:hidden;
}

.quote::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(closest-side at 12% 18%, rgba(156,45,18,.14), transparent 55%),
            radial-gradient(closest-side at 88% 28%, rgba(99,131,114,.14), transparent 55%);
  pointer-events:none;
  opacity:.85;
}

.qText{
  position:relative;
  margin:0 0 10px;
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(231,236,239,.92);
}

.metaRow{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

.who{
  margin:0;
  font-size: 12.5px;
  letter-spacing:.08em;
  color: rgba(183,192,198,.92);
  text-transform:uppercase;
}

.date{
  margin:0;
  font-size: 12px;
  color: rgba(231,236,239,.70);
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);
  white-space:nowrap;
}

.date.future{
  border-color: rgba(156,45,18,.30);
  background: rgba(156,45,18,.12);
  color: rgba(231,236,239,.82);
}

footer{
  margin-top: 40px;
  text-align:center;
  color: rgba(183,192,198,.70);
  font-size: 12px;
  letter-spacing:.08em;
}

/* Responsive quote columns */
@media (min-width: 740px){
  .quote{ grid-column: span 6; }
  .quote.wide{ grid-column: span 12; }
}
@media (min-width: 980px){
  .quote{ grid-column: span 4; }
  .quote.wide{ grid-column: span 6; }
}

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