:root{
  --page-pad: clamp(16px, 4vw, 32px);
  --max-w: 1100px;
  --fg: #e9f3f7;
  --fg-dim: #b9ced6;
  --chip-bg: rgba(10,18,24,.55);
  --chip-stroke: rgba(255,255,255,.10);
  --chip-blur: 10px;
}

/* === SCROLL + LAYERS =================================================== */
html { height:auto !important; min-height:100% !important; }
body { height:auto !important; min-height:100vh !important; overflow-y:auto !important;
  margin:0; color:var(--fg);
  font: 400 16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#000;
}

/* Fullscreen background video (fixed) */
.bg{
  position:fixed !important; inset:0 !important;
  width:100% !important; height:100% !important; object-fit:cover !important;
  z-index:0 !important; background:#000;
}

/* Readability layers over video */
.overlay,.tint{ position:fixed !important; inset:0 !important; z-index:1 !important; pointer-events:none; }
.overlay{
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.10) 40%, rgba(0,0,0,.50) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.10), rgba(0,0,0,.55) 60%, rgba(0,0,0,.78));
}

/* Content sits above overlays */
main.content{ position:relative !important; z-index:3 !important; padding-bottom:64px; }

/* Brand badge (top-left) */
.brand-badge{
  position: fixed; top: 18px; left: 18px; z-index:6;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; color: var(--fg); text-decoration: none;
  backdrop-filter: blur(var(--chip-blur)); -webkit-backdrop-filter: blur(var(--chip-blur));
  background: var(--chip-bg); border: 1px solid var(--chip-stroke);
  border-radius: 14px; box-shadow: 0 6px 28px rgba(0,0,0,.35);
}
.brand-icon{ width:24px; height:24px; border-radius:999px; display:block; }
.brand-text{ font-weight:600; letter-spacing:.2px; }

/* Content layout */
.content{ padding: calc(120px + var(--page-pad)) var(--page-pad) var(--page-pad);
  max-width: var(--max-w); margin: 0 auto; }
.hero .brand{
  font-size: clamp(40px, 7vw, 88px);
  margin: 0 0 10px; line-height: 1.02;
  text-shadow: 0 8px 36px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.55);
}
.tagline{ margin: 0 0 28px; color: var(--fg-dim);
  text-shadow: 0 4px 18px rgba(0,0,0,.7), 0 0 2px rgba(0,0,0,.55); }

/* Sections (no huge frosted boxes) */
section{ margin: 36px 0; }
h2{ margin: 0 0 10px; font-size: clamp(22px, 3vw, 30px); }
p{ margin: 0 0 16px; color: var(--fg-dim); }

/* Buttons – minimal glass */
.buttons{ display:flex; flex-wrap:wrap; gap:12px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px; border-radius: 12px; color: var(--fg); text-decoration: none;
  background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(2px); transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ transform: translateY(-1px); background: rgba(0,0,0,.36); border-color: rgba(255,255,255,.3); }

/* Corner logo */
.corner-logo{
  position: fixed; right: 18px; bottom: 18px; z-index:6;
  width: 46px; height: 46px; border-radius: 999px; display:grid; place-items:center;
  background: rgba(10,18,24,.6); border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.corner-logo img{ width: 30px; height: 30px; border-radius: 999px; display:block; }

.spacer{ height: 24vh; }

/* Mobile tweaks */
@media (max-width: 560px){
  .brand-text{ display:none; }
  .content{ padding-top: calc(90px + var(--page-pad)); }
}