:root{
  /* Exact black used for the page background and to match the logo background */
  --bg-black: #000000;
  --white: #ffffff;

  /* Logo sizing control (responsive): min, preferred (vw), max */
  --logo-min: 180px;
  --logo-preferred: 75vw;
  --logo-max: 900px;

  /* computed logo width used by the layout and to size the text beneath it */
  --logo-w: clamp(var(--logo-min), var(--logo-preferred), var(--logo-max));

  /* text multiplier used to derive heading size from the logo container width */
  --text-multiplier: 0.12;
}

/* Reset / base */
*{box-sizing:border-box}

html,body{
  height:100%;
  width:100%;
  background-color: var(--bg-black);
  background-image: none !important;
  color: var(--white);
  margin:0;
  padding:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* Centering the whole page */
.site{
  min-height:100vh;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: clamp(16px, 4vw, 48px);
  background-color: var(--bg-black);
}

/* Brand block: width is driven by the logo size variable */
.brand{
  width:100%;
  max-width: var(--logo-w);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  margin:0 auto;
  background-color: var(--bg-black);
  padding: 0;
}

/* Logo: fills the brand width, respects max-height on mobile */
.logo{
  display:block;
  width:100%;
  height:auto;
  max-height: min(65vh, 800px);
  background-color: var(--bg-black);
  image-rendering:optimizeQuality;
  -webkit-backface-visibility: hidden;
  border: none;
  margin: 0;
  padding: 0;
  object-fit: contain;
}

/* Social media icons container */
.social-media {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  margin: clamp(1rem, 3vw, 2rem) 0 0.5rem;
  padding: 0;
}

/* Social media icon links */
.social-media a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: opacity 0.3s ease, transform 0.2s ease;
  text-decoration: none;
}

.social-media a:hover,
.social-media a:focus {
  opacity: 0.7;
  transform: scale(1.1);
}

/* Social media icon SVGs */
.social-icon {
  width: clamp(28px, 5vw, 48px);
  height: clamp(28px, 5vw, 48px);
  display: block;
}

/* Coming Soon text: sized proportionally to logo width */
.coming{
  margin: 0.5rem 0 0;
  padding: 0;
  color: var(--white);
  font-weight:900;
  letter-spacing: 0.02em;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(16px, calc(var(--logo-w) * var(--text-multiplier)), 72px);
  line-height: 1.1;
  width:100%;
  text-align:center;
  background-color: transparent;
  word-wrap: break-word;
  /* Ensure consistent rendering across browsers */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Animation for Coming Soon text */
.coming.animated {
  opacity: 0;
  animation: fadeInUp 1.5s ease-out 0.5s forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile: extra small devices */
@media (max-width:360px){
  :root{ --text-multiplier: 0.135; }
  .site{ padding: 12px; }
  .coming{ margin-top: 0.75rem; font-size: clamp(14px, 4vw, 28px); }
}

/* Mobile: small phones */
@media (min-width:361px) and (max-width:480px){
  :root{ --text-multiplier: 0.13; }
  .site{ padding: 14px; }
  .logo{ max-height: 60vh; }
  .coming{ margin-top: 0.8rem; }
}

/* Mobile: medium phones */
@media (min-width:481px) and (max-width:768px){
  :root{ --text-multiplier: 0.12; }
  .site{ padding: 20px; }
  .logo{ max-height: 66vh; }
  .coming{ margin-top: 1rem; }
}

/* Tablet and larger */
@media (min-width:769px){
  :root{ --text-multiplier: 0.11; }
  .site{ padding: 32px; }
  .logo{ max-height: 70vh; }
}

/* Large screens */
@media (min-width:1200px){
  :root{ --text-multiplier: 0.105; }
  .site{ padding: 48px; }
}

/* Extra large screens */
@media (min-width:1600px){
  :root{ --text-multiplier: 0.1; }
}

/* High DPI devices */
@media (min-device-pixel-ratio: 2){
  .logo{ image-rendering: -webkit-optimize-contrast; }
}