/* ============================================================
   Brand Recall — Coming Soon
   Dark, modern theme built around the banner's navy + green look.
   Fits in a single 100vh screen (no scroll) with 3% page padding.
   Tweak the variables below to adjust the whole palette/spacing.
   ============================================================ */

:root {
  /* --- Fonts --- */
  --font-title: "Montserrat", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --font-body:  "DM Sans", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;

  /* --- Colors (pulled from the banner: deep navy + brand green) --- */
  --color-bg-start: #0b1020;   /* top of background gradient */
  --color-bg-end:   #060912;   /* bottom of background gradient */
  --color-text:     #ffffff;   /* headline / primary text (bright) */
  --color-muted:    #c4cdde;   /* supporting text / footer (brighter for readability) */
  --color-accent:   #46d65f;   /* brand green */
  --color-accent-soft: rgba(70, 214, 95, 0.14);
  --color-surface:  rgba(255, 255, 255, 0.05); /* card / chips */
  --color-border:   rgba(255, 255, 255, 0.12);

  /* --- Sizing --- */
  --radius:     16px;     /* corner roundness */
  --banner-max-h: 42vh;   /* hero image height cap (keeps it fully visible) */
  --max-width:  820px;    /* content column width */
}

/* --- Reset / base --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--color-text);

  /* Deep gradient backdrop + soft green glow that echoes the banner */
  background:
    radial-gradient(900px 500px at 50% -8%, rgba(70, 214, 95, 0.12), transparent 60%),
    linear-gradient(170deg, var(--color-bg-start), var(--color-bg-end));
  background-attachment: fixed;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden; /* everything fits in one screen — no scrolling */
}

/* --- Full-height wrapper with 3% padding on all sides --- */
.page {
  height: 100vh;
  height: 100dvh;          /* accounts for mobile browser bars */
  padding: 3%;             /* 3% breathing room around all content */
  display: flex;
  flex-direction: column;
  text-align: center;
}

/* --- Main content: centered in the space above the footer --- */
.card {
  flex: 1 1 auto;
  min-height: 0;           /* lets the banner shrink to fit, never overflow */
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(0.8rem, 2.2vh, 1.6rem);   /* vertical rhythm that scales with height */
  animation: fadeInUp 0.9s ease-out both;
}

/* --- Hero banner image --- */
.hero {
  min-height: 0;
  display: flex;
  justify-content: center;
}

.banner {
  max-width: 100%;
  max-height: var(--banner-max-h);
  width: auto;
  height: auto;
  object-fit: contain;     /* show the WHOLE image — never crop the top */
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(70, 214, 95, 0.10);
}

/* --- Headline (Montserrat) --- */
.headline {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--color-text);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);  /* crisp over the dark bg */
}

.headline .accent { color: var(--color-accent); }

/* --- Supporting line (DM Sans) --- */
.subtext {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  font-weight: 500;
  color: var(--color-muted);
  line-height: 1.55;
  max-width: 42ch;
}

/* --- Thin accent divider --- */
.divider {
  width: 64px;
  height: 3px;
  border-radius: 99px;
  background: var(--color-accent);
}

/* --- Contact details --- */
.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.7rem;
  width: 100%;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.1rem;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.contact-item:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  transform: translateY(-2px);
}

.contact-text {
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--color-muted);
}

.contact-item:hover .contact-text { color: var(--color-text); }

/* Round green icon badge */
.icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-accent-soft);
}

.icon svg { width: 20px; height: 20px; }

/* --- Footer (pinned to the bottom of the 100vh frame) --- */
.footer {
  flex: 0 0 auto;
  padding-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* --- Fade-in animation --- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .card { animation: none; }
}

/* --- Responsive: stack contact chips on small screens --- */
@media (max-width: 640px) {
  :root { --banner-max-h: 30vh; }   /* smaller banner leaves room for stacked chips */
  .contact { flex-direction: column; }
  .contact-item { width: 100%; }
}