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

:root {
  --primary-color: #ff5252;
  --bg-color: #0b0f19;
  --surface-color: #161b28;
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;

  /* Clock Variables */
  --clock-size: 45rem;
  --clock-bg: rgba(22, 27, 40, 0.6);
  --clock-border: rgba(255, 255, 255, 0.1);

  /* Animations Time */
  --s-animation-time: 10s;
  --m-animation-time: 60s;
  --h-animation-time: 20s;
  /* Real Time in Seconds */
  --s-rotate-time: 60s;
  --m-rotate-time: 3600s;
  --h-rotate-time: 43200s;
  /* Rotate From (Updated by JS) */
  --s-rotate-from: 0deg;
  --m-rotate-from: 0deg;
  --h-rotate-from: 0deg;
  /* Rotate To (Updated by JS) */
  --s-rotate-to: 0deg;
  --m-rotate-to: 0deg;
  --h-rotate-to: 0deg;
}

html {
  font-size: 62.5%;
  /* 1rem = 10px */
  scroll-behavior: smooth;
}

body {
  background-color: #0b0f19;
  /* Single solid background color */
  background-image: none;
  /* Removed split gradient */
  min-height: 100vh;
  font-family: 'Inter', sans-serif;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Header */
.header {
  padding-top: 1rem;
  padding-bottom: 2rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

.logo-container {
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
}

.logo {
  height: 40rem;
  /* Increased size significantly */
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(255, 82, 82, 0.3));
}

.coming-soon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 1.4rem;
  color: var(--text-secondary);
  letter-spacing: 0.4rem;
  text-transform: uppercase;
  font-weight: 400;
  opacity: 0.8;
}

.header h1 {
  font-family: 'Outfit', sans-serif;
  font-size: 6rem;
  font-weight: 200;
  /* Thin look */
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 1rem;
  line-height: 1.1;
  text-align: center;
  margin: 0;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

/* Main Section */
section.working {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  position: relative;
}

.content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Clock Styles */
.clock {
  height: var(--clock-size);
  width: var(--clock-size);
  border-radius: 50%;
  padding: 2rem;
  background: transparent;
  /* Seamless */
  position: relative;
  /* Removed border, shadows, and background for '1 background' look */
}



.clock-center {
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: transparent;
  /* Removed solid red bg */
  position: relative;

  /* Grid Layout for Numbers */
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-template-columns: repeat(7, 1fr);
  grid-template-areas:
    ". . . n12 . . ."
    ". . n11  . n1 . ."
    ". n10 . . . n2 ."
    "n9 . . . . . n3"
    ". n8 . . . n4 ."
    ". . n7 . n5 . ."
    ". . . n6 . . .";
}

/* Decorative ring inside clock */
.clock-center::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  z-index: 0;
}

.number {
  font-family: 'Outfit', sans-serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
  align-self: center;
  justify-self: center;
  z-index: 1;
  transition: color 0.3s ease;
}

.clock:hover .number {
  color: var(--text-primary);
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.number-1 {
  grid-area: n1;
  justify-self: end;
  align-self: start;
}

.number-2 {
  grid-area: n2;
  justify-self: end;
  align-self: start;
}

.number-3 {
  grid-area: n3;
  justify-self: start;
}

.number-4 {
  grid-area: n4;
  justify-self: end;
  align-self: end;
}

.number-5 {
  grid-area: n5;
  justify-self: end;
  align-self: end;
}

.number-6 {
  grid-area: n6;
  align-self: start;
}

.number-7 {
  grid-area: n7;
  justify-self: start;
  align-self: end;
}

.number-8 {
  grid-area: n8;
  justify-self: start;
  align-self: end;
}

.number-9 {
  grid-area: n9;
  justify-self: end;
}

.number-10 {
  grid-area: n10;
  justify-self: start;
  align-self: start;
}

.number-11 {
  grid-area: n11;
  justify-self: start;
  align-self: start;
}

.number-12 {
  grid-area: n12;
  align-self: end;
  color: var(--primary-color);
  font-weight: 800;
  font-size: 2.8rem;
}

/* Hand Containers */
.clock-top {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  /* Let clicks pass through */
}

/* Hands Common */
.hours-container,
.min-container,
.sec-container {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hours-container {
  height: 100%;
  width: 100%;
  z-index: 2;
}

.sec-min-container {
  height: 2rem;
  width: 2rem;
  position: absolute;
  z-index: 5;
}

.min-container {
  height: 100%;
  width: 100%;
  z-index: 3;
}

.sec-container {
  height: 100%;
  width: 100%;
  z-index: 4;
}

/* Actual Pointers */
.hours-pointer {
  background-color: var(--text-primary);
  height: 100%;
  width: 100%;
  clip-path: polygon(-10% -10%,
      50% 50%,
      110% -10%);
  /* The original clip-path was confusing for a hand, generalizing to a simple custom shape or using simple div sizing */
  /* Re-implementing visually simple hands */
  clip-path: none;
  background: none;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Re-creating visual hands to be more standard but modern */
.hours-pointer::after {
  content: '';
  position: absolute;
  bottom: 50%;
  width: 0.6rem;
  height: 10rem;
  background-color: var(--text-primary);
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.min-pointer {
  position: absolute;
  bottom: 50%;
  /* Pivot from center */
  transform-origin: bottom center;
  /* Adjusting position logic */
  width: 0.4rem;
  height: 14rem;
  background-color: #94a3b8;
  border-radius: 1rem;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  /* Remove old absolute positioning */
}

/* Fix for containers rotation */
/* The previous CSS used containers rotating. Let's stick to that structure but clean the inner pointers */
/* Restoring original structure for minimal JS breakage */

.hours-pointer {
  /* Resetting from above attempt */
  background: transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  /* The original clip path was wierd, let's use a pseudo element for the hand visual */
}

.hours-pointer::before {
  content: '';
  /* The visual hand */
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%);
  width: 0.8rem;
  height: 10rem;
  background: var(--text-primary);
  border-radius: 4px;
}


.sec-min-container {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-color);
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(255, 82, 82, 0.6);
}

.min-container .min-pointer {
  position: absolute;
  bottom: 0;
  /* relative to container center */
  left: 50%;
  transform: translateX(-50%);
  height: 15rem;
  width: 0.4rem;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

.sec-container .sec-pointer {
  position: absolute;
  bottom: -3rem;
  /* Small tail */
  left: 50%;
  transform: translateX(-50%);
  height: 20rem;
  width: 0.2rem;
  background-color: var(--primary-color);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(255, 82, 82, 0.5);
  z-index: 12;
}

/* Center dot */
.sec-container::after {
  content: "";
  position: absolute;
  height: 1rem;
  width: 1rem;
  background-color: #fff;
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  z-index: 15;
}


/* Animation Classes */
.working .sec-container {
  animation: rotate-seconds var(--s-rotate-time) infinite linear;
}

.working .min-container {
  animation: rotate-minutes var(--m-rotate-time) infinite linear;
}

/* JS applies transforms to specific elements. 
   Original CSS applied it to .working .sec-container etc. 
   We need to ensure we match those selectors or the implementation.
*/

.working .sec-container {
  transform: rotateZ(var(--s-rotate-from));
  animation: rotate-seconds var(--s-rotate-time) infinite linear;
}

.working .min-container {
  transform: rotateZ(var(--m-rotate-from));
  animation: rotate-minutes var(--m-rotate-time) infinite linear;
}

.working .hours-container {
  transform: rotateZ(var(--h-rotate-from));
  animation: rotate-hours var(--h-rotate-time) infinite linear;
}

@keyframes rotate-seconds {
  from {
    transform: rotateZ(var(--s-rotate-from));
  }

  to {
    transform: rotateZ(var(--s-rotate-to));
  }
}

@keyframes rotate-minutes {
  from {
    transform: rotateZ(var(--m-rotate-from));
  }

  to {
    transform: rotateZ(var(--m-rotate-to));
  }
}

@keyframes rotate-hours {
  from {
    transform: rotateZ(var(--h-rotate-from));
  }

  to {
    transform: rotateZ(var(--h-rotate-to));
  }
}


/* Footer */
.footer {
  margin-top: auto;
  padding: 4rem 2rem;
  text-align: center;
  /* background removed for seamless look */
  /* border-top removed */
}

.footer-text {
  font-family: 'Outfit', sans-serif;
  font-size: 2rem;
  color: var(--text-primary);
  margin-bottom: 3rem;
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.subscribe-form {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.subscribe-form input {
  padding: 1.2rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background-color: rgba(255, 255, 255, 0.05);
  /* Glassy */
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  border-radius: 50px;
  /* Pill shape */
  min-width: 300px;
  outline: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.subscribe-form input::placeholder {
  color: var(--text-secondary);
}

.subscribe-form input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 15px rgba(255, 82, 82, 0.2);
  background-color: rgba(255, 255, 255, 0.1);
}

.subscribe-form button {
  padding: 1.2rem 3.5rem;
  background-color: var(--primary-color);
  color: #fff;
  border: none;
  font-size: 1.5rem;
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  box-shadow: 0 4px 15px rgba(255, 82, 82, 0.4);
}

.subscribe-form button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 82, 82, 0.6);
  background-color: #ff6b6b;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-bottom: 2rem;
}

.social-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.1rem;
  position: relative;
}

.social-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary-color);
  transition: width 0.3s ease;
}

.social-link:hover {
  color: var(--primary-color);
}

.social-link:hover::after {
  width: 100%;
}

.copyright {
  color: var(--text-secondary);
  font-size: 1.3rem;
  margin-top: 2rem;
  opacity: 0.7;
}

/* Responsiveness */
@media only screen and (max-width: 600px) {
  html {
    font-size: 50%;
    /* Scale down */
  }

  .header h1 {
    font-size: 4rem;
  }

  .clock {
    --clock-size: 35rem;
    /* Explicit smaller size if rem scale isn't enough */
  }

  .logo {
    height: 8rem;
    /* Cleaned up mobile logo size */
  }

  .subscribe-form input {
    min-width: 100%;
  }
}

/* Desktop Layout - Side by Side */
/* Desktop Layout - Logo Top, Split Content */
@media screen and (min-width: 768px) {
  body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto minmax(65vh, 1fr) auto;
    grid-template-areas:
      "logo logo"
      "clock text"
      "footer footer";
    align-items: center;
    justify-content: center;
    min-height: 100vh;
  }

  /* Unwrap the header to place logo and text in different grid areas */
  .header {
    display: contents;
  }

  /* Logo Section (Top Center) */
  .logo-container {
    grid-area: logo;
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 0;
    margin-top: -10rem;
    /* Pull up even more */
    margin-bottom: 0;
  }

  .logo {
    height: 35rem;
    /* Massive size */
    width: auto;
    max-width: 100%;
    object-fit: contain;
  }

  /* Clock Section (Left) */
  /* Clock Section (Left) */
  section.working {
    grid-area: clock;
    height: 100%;
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    /* Move up */
    justify-content: center;
    padding-top: 0rem;
    /* Spacing from logo */
  }

  .clock {
    --clock-size: 40rem;
    margin: 0;
  }

  /* Text Section (Right) */
  .coming-soon-container {
    grid-area: text;
    margin: 0;
    align-self: start;
    /* Move up */
    justify-self: center;
    margin-top: 8rem;
    /* Optical alignment with clock */
  }

  .header h1 {
    font-size: 8rem;
    /* Larger on desktop */
    letter-spacing: 1.2rem;
  }

  .footer {
    grid-area: footer;
  }
}