/* ================================================================
   GigXee — Coming Soon Page
   ================================================================ */

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

/* ---- Design tokens ---- */
:root {
  --color-gold:       #ffbb00;
  --color-navy:       #051742;
  --color-navy-muted: rgba(5, 23, 66, 0.5);
  --color-bg:         #ffffff;
  --font:             'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- Body ---- */
body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-navy);
  overflow-x: hidden;
}

/* ================================================================
   Page wrapper
   ================================================================ */

.page {
  position: relative;
  min-height: 100vh;
  background:url(assets/background.webp) no-repeat bottom center;
  background-size: contain;
  overflow: hidden;
}

/* ================================================================
   Main content
   ================================================================ */

.content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  min-height: 100vh;
  padding: 3rem 2rem clamp(220px, 50vh, 640px);
}

.logo {
  display: block;
  height: clamp(28px, 4vw, 45px);
  width: auto;
}

/* ---- Announcement block ---- */
.announcement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
}

.helmet {
  display: block;
  width: auto;
  margin-bottom: 0.4rem;
}

.title {
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--color-gold);
  line-height: 1.1;
  white-space: nowrap;
}

.divider {
  width: clamp(200px, 28vw, 366px);
  border: none;
  border-top: 1px solid var(--color-navy-muted);
  margin: 0.25rem 0;
}

.subtitle {
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  color: var(--color-navy-muted);
  font-weight: 400;
  margin: 15px auto;
}

/* ================================================================
   Bottom waves
   ================================================================ */

.waves-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: clamp(220px, 56vh, 640px);
  pointer-events: none;
}

.waves-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ================================================================
   Decorative elements
   ================================================================ */

.decorations {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.deco {
  position: absolute;
  display: block;
}

/* Paint brush — left edge, rotated */
.paint {
  height: clamp(160px, 32vh, 433px);
  width: auto;
  left: -8%;
  top: 15%;
  transform: rotate(49.43deg);
  transform-origin: center center;
}

/* Wrench — center-left, slightly rotated */
.wrench {
  height: clamp(160px, 38vh, 477px);
  width: auto;
  left: 17.4%;
  top: 36%;
  transform: rotate(17.84deg);
  transform-origin: center center;
}

/* Hammer — center-right */
.hammer {
  height: clamp(160px, 44vh, 560px);
  width: auto;
  right: 14.5%;
  bottom: 12%;
}

/* Screwdriver — right edge, rotated */
.screwdriver {
  height: clamp(160px, 44vh, 584px);
  width: auto;
  right: -4%;
  top: 17%;
  transform: rotate(-47.8deg);
  transform-origin: center center;
}

/* Nuts & bolts */
.nut {
  height: clamp(30px, 3.5vw, 61px);
  width: auto;
}

/* Left side — original positions from design (% of 1920×1117) */
.nut-1 { left: 13.6%; top: 45.7%; transform: rotate(60deg); }
.nut-2 { left:  1.1%; top: 12.5%; transform: rotate(74.6deg); }
.nut-3 { left: 18.3%; top: 12.4%; transform: rotate(74.6deg); }

/* Right side — mirrored variant */
.nut-4 { right: 12.8%; top: 45.4%; transform: scaleY(-1) rotate(105.4deg); }
.nut-5 { right:  4.9%; top: 14.2%; transform: scaleY(-1) rotate(105.4deg); }
.nut-6 { right: 11.6%; top: 11.5%; transform: scaleY(-1) rotate(105.4deg); }

/* ================================================================
   Responsive — Tablet (≤ 1024px)
   ================================================================ */

@media (max-width: 1024px) {
  /* Hide edge tools, pull side tools inward */
  .paint,
  .screwdriver {
    display: none;
  }

  .wrench {
    height: clamp(130px, 26vh, 300px);
    left: 2%;
    top: 30%;
  }

  .hammer {
    height: clamp(130px, 26vh, 300px);
    right: 2%;
    bottom: 20%;
  }

  /* Keep only one nut per side at this breakpoint */
  .nut-5,
  .nut-6 {
    display: none;
  }
}

/* ================================================================
   Responsive — Mobile (≤ 640px)
   ================================================================ */

@media (max-width: 640px) {
  .wrench,
  .hammer {
    display: none;
  }

  .nut-1,
  .nut-4 {
    display: none;
  }

  /* Reposition remaining nuts to corners */
  .nut-2 { left: 3%;  top: 6%; }
  .nut-3 { left: 76%; top: 6%; transform: rotate(-74.6deg); }

  .content {
    padding-bottom: clamp(180px, 42vh, 480px);
  }

  .waves-wrapper {
    height: clamp(180px, 44vh, 520px);
  }
}

/* ================================================================
   Screen-reader utility
   ================================================================ */

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

/* ================================================================
   Waitlist / lead capture
   ================================================================ */

.waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 400px;
}

.waitlist-label {
  font-size: 20px;
  color: #1a6dd1;
  font-weight: 700;
  text-align: center;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 100%;
}

/* Role toggle */
.role-group {
  border: none;
  display: flex;
  gap: 0.75rem;
}

.role-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1rem;
  border: 1.5px solid rgba(5, 23, 66, 0.12);
  border-radius: 12px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  background: #ffffff;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}

.role-option:has(input:checked) {
  border-color: transparent;
  background: #d5edf5;
}

.role-option input[type="radio"] {
  display: none;
}

/* Text fields */
.field {
  width: 100%;
  padding: 0.9rem 1.2rem;
  border: 1.5px solid rgba(5, 23, 66, 0.12);
  border-radius: 12px;
  font-family: var(--font);
  font-size: 1rem;
  color: var(--color-navy);
  background: rgba(5, 23, 66, 0.03);
  outline: none;
  transition: border-color 0.15s;
}

.field::placeholder {
  color: rgba(5, 23, 66, 0.32);
}

.field:focus {
  border-color: rgba(5, 23, 66, 0.3);
  background: #ffffff;
}

.field--error {
  border-color: #e53e3e;
}

/* Submit button */
.btn-submit {
  width: 100%;
  padding: 1rem 1.5rem;
  background: var(--color-gold);
  color: var(--color-navy);
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
}

.btn-submit:hover  { opacity: 0.88; }
.btn-submit:active { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* Success message */
.waitlist-success {
  font-size: 0.9rem;
  color: var(--color-navy);
  text-align: center;
  background: rgba(255, 187, 0, 0.12);
  border: 1.5px solid var(--color-gold);
  border-radius: 8px;
  padding: 0.75rem 1.25rem;
  line-height: 1.5;
  max-width: 400px;
}

/* ================================================================
   FAQ / answer-engine optimised section
   ================================================================ */

.faq {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 400px;
}

.faq-item {
  border-bottom: 1px solid rgba(5, 23, 66, 0.12);
}

.faq-item summary {
  list-style: none;
  padding: 0.9rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
  user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after       { content: ' +'; color: var(--color-gold); font-weight: 400; }
.faq-item[open] summary::after { content: ' \2212'; color: var(--color-gold); font-weight: 400; }

.faq-item[open] summary {
  border-bottom: 1px solid rgba(5, 23, 66, 0.12);
}

.faq-body {
  overflow: hidden;
  transition: height 0.32s ease;
}

.faq-item p {
  padding: 0.8rem 0 0.9rem;
  font-size: 0.875rem;
  color: var(--color-navy-muted);
  line-height: 1.6;
}

/* ================================================================
   Responsive — Small mobile (≤ 380px)
   ================================================================ */

@media (max-width: 380px) {
  .nut-2,
  .nut-3 {
    display: none;
  }

  .title {
    white-space: normal;
    font-size: 2.25rem;
  }

  .divider {
    width: 80%;
  }
}