@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600&family=Unbounded:wght@400;600;700&display=swap');

:root{
  --bg-deep:#0b1020;
  --bg-mid:#141a31;
  --bg-glow:#2a1f45;
  --card:#101726;
  --card-strong:#141c30;
  --text:#eef2ff;
  --muted:#9aa8c7;
  --accent:#ffb84d;
  --accent-2:#ff6f61;
  --ring-track:#2a3352;
  --ring-glow:rgba(255,184,77,.35);
}

*{box-sizing:border-box}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(900px 500px at 15% 10%, rgba(255,111,97,.22), transparent 60%),
    radial-gradient(700px 400px at 85% 15%, rgba(255,184,77,.18), transparent 55%),
    radial-gradient(800px 500px at 40% 85%, rgba(70,114,255,.18), transparent 60%),
    linear-gradient(145deg, var(--bg-deep), var(--bg-mid) 55%, var(--bg-glow));
  color:var(--text);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
}

.clock{
  width:min(880px,92vw);
  padding:2.75rem clamp(1.5rem,3vw,3rem);
  border-radius:28px;
  background:linear-gradient(160deg, rgba(16,23,38,.95), rgba(14,18,32,.95));
  box-shadow:0 30px 70px rgba(6,8,15,.45), inset 0 0 0 1px rgba(255,255,255,.05);
  position:relative;
  overflow:hidden;
}

.clock::after{
  content:"";
  position:absolute;
  inset:18% -10% auto;
  height:220px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent);
  transform:rotate(-5deg);
  pointer-events:none;
}

.clock-header h1{
  font-family:"Unbounded","Space Grotesk",sans-serif;
  font-size:clamp(1.6rem,2.6vw,2.6rem);
  margin:0 0 .4rem;
  letter-spacing:.02em;
}

.subtitle{
  margin:0 auto 2.2rem;
  color:var(--muted);
  font-size:clamp(.95rem,1.3vw,1.1rem);
  max-width:520px;
}

.ring-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  margin:1.2rem 0 2rem;
}

.ring{
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(20,28,48,.95), rgba(12,16,30,.95));
  box-shadow:0 25px 50px rgba(7,10,20,.5), inset 0 0 0 1px rgba(255,255,255,.05);
  position:relative;
  display:grid;
  place-items:center;
}

.ring-svg{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}

.ring-track,
.ring-progress{
  fill:none;
  stroke-width:14;
}

.ring-track{
  stroke:var(--ring-track);
}

.ring-progress{
  stroke:url(#ringGradient);
  stroke-linecap:round;
  filter:drop-shadow(0 0 12px var(--ring-glow));
  transition:stroke-dashoffset .4s ease;
}

.ring-center{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
}

.ring-caption{
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.25em;
  color:var(--muted);
}

.ring-time{
  font-family:"Unbounded","Space Grotesk",sans-serif;
  font-size:clamp(1.6rem,3.8vw,2.7rem);
  letter-spacing:.06em;
}

.segments{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem;
  margin-bottom:1.8rem;
}

.segment{
  background:linear-gradient(165deg, rgba(20,28,48,.9), rgba(15,21,36,.9));
  border-radius:18px;
  padding:1.2rem 1rem 1rem;
  border:1px solid rgba(255,255,255,.05);
  box-shadow:0 16px 30px rgba(7,10,20,.35);
  position:relative;
  overflow:hidden;
}

.segment::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.08), transparent);
  transform:translateX(-120%);
  animation:segment-sheen 6s ease-in-out infinite;
  pointer-events:none;
}

.segment-value{
  display:block;
  font-family:"Unbounded","Space Grotesk",sans-serif;
  font-size:clamp(1.8rem,3vw,2.3rem);
  margin-bottom:.25rem;
  font-variant-numeric:tabular-nums;
}

.segment-label{
  color:var(--muted);
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.18em;
}

.target{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

@keyframes segment-sheen{
  0%,80%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}

@media (max-width:640px){
  .clock{padding:2.2rem 1.4rem}
  .ring{width:260px;height:260px}
  .ring-track,.ring-progress{stroke-width:12}
  .segments{grid-template-columns:repeat(2,minmax(120px,1fr))}
}