*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --orange: #F47920;
  --white:  #FFFFFF;
  /* Ring fits inside the available vertical space with room for heading + bottom */
  --ring-size: min(calc(100vh - 260px), 50vw, 320px);
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  font-family: 'Times New Roman', Times, serif;
}

/* ── Background ── */
.bg {
  position: fixed; inset: 0;
  background: url('../img/Desktop.png') center center / cover no-repeat;
  z-index: 0;
}
.bg::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.30);
}

/* ── Page layout ── */
.page {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 36px 32px 28px;
}

/* ── Heading ── */
.heading {
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  animation: fadeDown .8s .2s ease forwards;
  flex-shrink: 0;
}
.heading::before,
.heading::after {
  content: '';
  display: block;
  width: 48px; height: 2px;
  background: var(--orange);
}
.heading h1 {
  font-size: clamp(1.4rem, 3vw, 60px);
  font-weight: 700;
  font-style: italic;
  color: var(--white);
  letter-spacing: .06em;
  white-space: nowrap;
}

/* ── Ring area ── */
.ring-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  animation: fadeIn .9s .4s ease forwards;
  /* prevent it from expanding beyond what fits */
  min-height: 0;
  padding: 12px 0;
}

.ring-outer {
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  flex-shrink: 0;
}

/*
  SVG viewBox: 340×340, circle cx=cy=170, r=150, stroke-width=36
  Inner stroke edge: 150 - 18 = 132  → 132/170 = 77.6% from center
  Outer stroke edge: 150 + 18 = 168  → 168/170 = 98.8% from center
  CSS inset for inner disc: (170-132)/340 = 38/340 = 11.2%
*/

/* Glass DONUT — only the ring-border band */
.glass-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  -webkit-mask: radial-gradient(circle,
  transparent 77%,
  black 77.5%,
  black 98.5%,
  transparent 99%);
  mask: radial-gradient(circle,
  transparent 77%,
  black 77.5%,
  black 98.5%,
  transparent 99%);
}

/* Glass CENTER disc — lightly frosted so girl shows through */
.glass-center {
  position: absolute;
  inset: 11.2%;   /* matches inner stroke edge */
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* SVG — orange arc sits on top of glass ring */
.ring-svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  transform: rotate(-90deg);
  overflow: visible;
}
.ring-track {
  fill: none;
  stroke: transparent;
  stroke-width: 36;
}
.ring-progress {
  fill: none;
  stroke: var(--orange);
  stroke-width: 36;
  stroke-linecap: butt;
  transition: stroke-dashoffset .6s ease;
}

/* Logo — centered inside the inner disc */
.logo-center {
  position: absolute;
  inset: 11.2%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-center img {
  width: 52%;
  max-width: 180px;
  display: block;
}

/* ── Bottom block ── */
.bottom {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  opacity: 0;
  animation: fadeUp .8s .6s ease forwards;
  flex-shrink: 0;
}

/* Countdown */
.countdown {
  width: 100%;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  color: var(--white);
}
.cnt-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
}
.cnt-unit .num {
  font-size: clamp(2rem, 5.5vw, 64px);
  font-weight: 700;
  min-width: 2ch;
  text-align: center;
}
.cnt-unit .lbl {
  font-size: clamp(.5rem, 1.1vw, .72rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
}
.cnt-sep {
  font-size: clamp(1.4rem, 4vw, 2.8rem);
  color: var(--orange);
  padding: 0 2px;
  align-self: flex-start;
  margin-top: 3px;
}

.email-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* Email row */
.email-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 50px;
  padding: 5px 5px 5px 18px;
}
.email-row input {
  background: transparent;
  border: none; outline: none;
  color: var(--white);
  font-family: inherit;
  font-size: .85rem;
  letter-spacing: .02em;
  width: 200px;
}
.email-row input::placeholder { color: rgba(255,255,255,.4); }
.email-row button {
  background: var(--orange);
  color: var(--white);
  border: none;
  border-radius: 50px;
  padding: 9px 22px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s, transform .15s;
}
.email-row button:hover { background: #d96810; transform: scale(1.03); }

/* Contact row */
.contact-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  color: rgba(255,255,255,.70);
  font-size: .80rem;
  letter-spacing: .04em;
}
.contact-row a { color: inherit; text-decoration: none; transition: color .2s; }
.contact-row a:hover { color: var(--white); }
.social-icons { display: flex; gap: 12px; }
.social-icons a {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 50%;
  transition: background .2s, border-color .2s;
}
.social-icons a:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.55); }
.social-icons svg { width: 13px; height: 13px; fill: currentColor; }
.dot { opacity: .35; }

/* ── Animations ── */
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}

/* ── Mobile ── */
@media (max-width: 600px) {
  :root { --ring-size: min(calc(100vh - 240px), 80vw); }
  .page { padding: 28px 16px 20px; }
  .bottom { align-items: center; }
  .email-row input { width: 130px; }
}