/* ===========================
   RESET & BASE STYLES
   =========================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
:root {
  --bg: #000;      /* Page background colour */
  --text: #fff;    /* Default text colour */
  --muted: #bbb;   /* Placeholder/subtext colour */
  --card: rgba(255,255,255,0.06); /* Form field background */
  --border: #333;  /* Border colour for form + icons */
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ===========================
   BACKGROUND IMAGE
   =========================== */
.bg {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(transparent, rgba(0,0,0,0.65) 70%), /* Dark overlay */
    url("bg-phone.jpg") center/cover no-repeat;        /* Background image file */
  opacity: 0.9;              /* BACKGROUND VISIBILITY - Lower for subtle, higher for strong */
  filter: brightness(0.8);   /* BACKGROUND BRIGHTNESS - Adjust 0.5 (darker) to 1.0 (lighter) */
  z-index: 0;
}

/* Keep main content above background */
.site-header,
.container,
.site-footer {
  position: relative;
  z-index: 1;
}

/* ===========================
   HEADER / LOGO
   =========================== */
.site-header {
  display: flex;
  justify-content: center;     /* Position logo horizontally (flex-start for left) */
  padding: 40px 20px 20px;     /* TOP PADDING affects how far logo is from top */
}
.logo {
  height: 140px;                /* LOGO SIZE - Increase/decrease height */
  width: auto;
  display: block;
  opacity: 0.95;
}

/* ===========================
   MAIN CONTENT
   =========================== */
.container {
  max-width: 800px;            /* Max width of main content block */
  margin: 0 auto;              /* Keep centered horizontally */
  padding: 40px 28px 20px;
  text-align: center;
  flex: 1;                     /* Allow container to grow and push footer down */
  display: flex;
  flex-direction: column;
}

/* HEADING */
h1 {
  font-size: clamp(36px, 6vw, 45px); /* Heading font size range */
  font-family: 'Montserrat', var(--font-stack);
  font-weight: 200;
  margin-top: 0;                     /* SPACE ABOVE HEADING (moves it up/down) */
  margin-bottom: 60px;               /* SPACE BELOW HEADING */
}

/* TAGLINE */
.tagline {
  font-size: clamp(18px, 2.5vw, 22px); /* Tagline font size */
  opacity: 0.9;
  margin-bottom: 36px;                 /* SPACE BELOW TAGLINE before form */
}

/* ===========================
   EMAIL FORM
   =========================== */
.inline-form {
  display: flex;
  gap: 10px;                  /* Space between input and button */
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 80px;        /* SPACE BELOW FORM before social icons */
}

/* EMAIL INPUT FIELD */
.inline-form input[type="email"] {
  width: min(480px, 90vw);    /* FORM WIDTH - Increase first value for longer field */
  padding: 16px 18px;         /* FIELD HEIGHT (vertical padding) & SIDE PADDING */
  font-size: 1.1rem;          /* TEXT SIZE inside field */
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card);
  color: var(--text);
  font-family: 'Montserrat', var(--font-stack);
  font-weight: 200;
}
.inline-form input::placeholder { color: var(--muted); }

/* SUBMIT BUTTON */
.inline-form button {
  padding: 16px 24px;         /* BUTTON HEIGHT (vertical padding) & WIDTH (side padding) */
  font-size: 1.1rem;          /* BUTTON TEXT SIZE */
  border: none;
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: 'Montserrat', var(--font-stack);
  font-weight: 100;
  cursor: pointer;
  transition: transform 0.05s ease, opacity 0.2s ease;
}
.inline-form button:hover { opacity: 0.92; }
.inline-form button:active { transform: scale(0.98); }

/* ===========================
   FORM STATUS MESSAGE
   =========================== */
.form-status {
  text-align: center;
  font-size: 0.95rem;
  margin-top: -60px;
  margin-bottom: 60px;
  opacity: 0.9;
  color: #4ade80; /* Green for success */
}

/* ===========================
   SOCIAL ICONS
   =========================== */
.socials {
  display: flex;
  justify-content: center;
  gap: 28px;                 /* SPACE BETWEEN ICONS */
  margin-top: auto;          /* Pushes icons toward bottom */
  padding-bottom: 60px;      /* SPACE ABOVE FOOTER */
}

/* SOCIAL ICON CONTAINER */
.social {
  width: 50px; height: 50px; /* ICON BACKGROUND SIZE - Bigger number = bigger icon area */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  transition: transform 0.06s ease, background 0.2s ease, border-color 0.2s ease;
}
.social:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.1);
  border-color: #555;
}

/* SVG ICONS */
.social svg {
  width: 28px; height: 28px; /* ACTUAL ICON SIZE inside the container */
  fill: #fff;
  opacity: 0.95;
}

/* ===========================
   FOOTER
   =========================== */
.site-footer {
  text-align: center;
  font-size: 12px;           /* Footer text size */
  opacity: 0.72;
  padding: 20px;
}

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