/* ---- Base / Theme (pulled from your logo) ---- */
* { box-sizing: border-box; }
:root {
  --bg:#0a0f1f;        /* deep navy */
  --card:#101528;      /* slightly lighter card */
  --ink:#e9f0ff;       /* off-white text */
  --muted:#a8b1c7;     /* muted text */
  --accent:#24e2f2;    /* neon cyan */
  --accent-2:#ff4db8;  /* neon pink */
  --border:#1a2238;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Inter,sans-serif;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.container { 
  max-width: 1200px; 
  margin: 0 auto; 
  padding: 24px; 
}

/* Narrow container (use only on pages you want tighter, e.g., Contact/Privacy) */
.container--narrow {
  max-width: 1200px;   /* more comfy than 820px */
  margin: 0 auto;
  padding: 0 24px;
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35),
              0 0 24px rgba(36,226,242,.05);
  width: 100%; /* make sure cards fill container */
}

/* === Sticky footer setup === */
html, body { height: 100%; }
body { display: flex; flex-direction: column; }
main { flex: 1; } /* pushes footer down if page is short */

/* ---- Header/Nav ---- */
header {
  position: sticky; top: 0; z-index: 10;
  background: linear-gradient(180deg, rgba(10,15,31,.95), rgba(10,15,31,.80));
  border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(120%) blur(6px);
}

.nav { display: flex; gap: 18px; align-items: center; padding: 14px 24px; }
.brand { display: flex; align-items: center; gap: 10px; margin-right: auto; font-weight: 700; letter-spacing: .4px; }
.brand img { height: 28px; width: 28px; filter: drop-shadow(0 0 6px rgba(255,77,184,.6)); }
.nav a { color: var(--ink); opacity: .9; }
.nav a.active { color: var(--accent-2); text-shadow: 0 0 8px rgba(255,77,184,.35); }

/* ---- Typography ---- */
h1 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; margin: 4px 0 14px; }
h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 8px; }
p.lead { color: var(--muted); font-size: 18px; }

/* ---- Footer ---- */
footer {
  background-color: #0c0d16;  /* dark background */
  padding: 16px 24px;
  border-top: 1px solid var(--border);
  margin-top: 40px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #ccc;
  font-size: 0.9rem;
}

.footer-links { display: flex; gap: 20px; }
.footer-links a {
  color: #00d4ff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-links a:hover { color: #ffffff; }

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid #2a3150;
  background: #121a33;
  color: var(--ink);
  box-shadow: 0 0 0 rgba(255,77,184,0);
  transition: box-shadow .2s ease, transform .06s ease;
}
.btn:hover {
  background: #162044;
  box-shadow: 0 0 14px rgba(36,226,242,.35),
              0 0 6px rgba(255,77,184,.25);
  transform: translateY(-1px);
}

/* ---- Utilities ---- */
.stack { display: grid; gap: 16px; }
.center { text-align: center; }

/* --- HERO REFINEMENT --- */
.hero { padding: 56px 24px 48px; }
.card--hero {
  border-radius: 24px;
  padding: 48px 32px;
  box-shadow:
    0 20px 60px rgba(0,0,0,.45),
    0 0 32px rgba(36,226,242,.08);
}
.logo-hero {
  width: 150px; height: auto; margin: 0 auto 12px;
  filter: drop-shadow(0 0 22px rgba(255,77,184,.25))
          drop-shadow(0 0 10px rgba(36,226,242,.25));
  border-radius: 16px; /* soft edges if the image is square */
}
.hero-title {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 6px 0 10px;
}
.hero-subtitle {
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 20px);
  margin: 0 auto;
  max-width: 48ch; /* shorter line length for readability */
}
.btn-pill {
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid #2a3150;
  background: radial-gradient(120% 120% at 50% 0%, #121a33 0%, #0f162c 60%, #0d1427 100%);
}
.btn-row { display: inline-flex; gap: 12px; justify-content: center; align-items: center; margin-top: 18px; }
.btn.secondary { background: transparent; }

/* ---- Contact layout ---- */
.contact-card { padding: 32px; border-radius: 18px; }
.contact-items { display: grid; gap: 14px; margin-top: 18px; }
.contact-item { display: flex; gap: 10px; align-items: center; }
.contact-item .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px rgba(36,226,242,.35);
}

/* Force full-width layout for main sections/cards */
main.container, 
main.container .section, 
main.container .card {
  display: block;
  width: 100%;
}

/* Grid utilities (prevents collapsed columns) */
.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

.footer-links .icon {
  height: 28px;            /* same size for all icons */
  width: 28px;             /* force a square box */
  object-fit: contain;     /* keeps proportions inside the box */
  display: inline-block;
  vertical-align: middle;  /* keeps aligned with text */
  margin-bottom: 2px;      /* tiny nudge if needed */
  margin-right: 6px;       /* space between icon and text */
  filter: drop-shadow(0 0 4px rgba(36, 226, 242, .25));
}


.footer-links {
  display: flex;
  align-items: center;   /* vertically centers icons + text */
  gap: 32px;             /* space between email and Instagram */
}

.footer-links a {
  display: inline-flex; 
  align-items: center;   /* centers icon with its text */
  gap: 10px;             /* space between icon and text */
  line-height: 1.2; 
}

.footer-links .icon {
  height: 35px;          /* keep large size */
  width: auto;
  display: block;
}


/* Base icon style (Instagram keeps this size) */
.footer-links .icon {
  height: 35px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  margin-bottom: 2px;
  margin-right: 6px;
  filter: drop-shadow(0 0 4px rgba(36, 226, 242, .25));
}

/* Gmail-specific tweak */
.footer-links .gmail-icon {
  height: 22px;   /* smaller size */
  width: auto;    /* keeps proportions */
}

.qr-section {
  margin: 20px 0;
  text-align: center;
}

.qr-code {
  width: 180px;    /* adjust size as needed */
  height: auto;
  border-radius: 8px; /* optional, smooth edges */
  box-shadow: 0 0 12px rgba(36, 226, 242, 0.4); /* glow effect */
}

.appstore-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;              /* space between logo and text */
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  color: #24E2F2;        /* match your brand cyan */
}

.appstore-link:hover {
  opacity: 0.8;          /* subtle hover effect */
}

.appstore-icon {
  height: 28px;          /* adjust to look balanced */
  width: auto;
}