@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Caveat:wght@500;600&display=swap');

:root {
  --white: #fff;
  --muted: rgba(255,255,255,.82);
  --accent: #ffad78;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  background: #111b29;
  color: var(--white);
  font-family: Inter, system-ui, sans-serif;
}

.scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background: #111b29;
}

.background {
  position: fixed;
  inset: 0%;
  z-index: -3;
  background: url("background.png") center center / cover no-repeat;
  will-change: transform;
}

.shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(5,13,23,.76) 0%, rgba(5,13,23,.42) 48%, rgba(5,13,23,.06) 100%),
    linear-gradient(0deg, rgba(4,9,15,.55), transparent 45%);
  pointer-events: none;
}

.ambient {
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(45px);
  opacity: .18;
  pointer-events: none;
  z-index: -1;
  will-change: transform;
}
.ambient-one { background: #ffad78; left: 4%; top: 18%; }
.ambient-two { background: #5fa6ff; right: 12%; top: 12%; }

.content {
  width: min(1440px, 100%);
  min-height: 100vh;
  margin: auto;
  padding: 48px clamp(28px, 6vw, 96px) 30px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  will-change: transform;
}

.brand {
  color: white;
  text-decoration: none;
  font-size: clamp(38px, 4vw, 64px);
  font-weight: 700;
  letter-spacing: -2.8px;
}
.brand span { color: var(--accent); }

.descriptor {
  margin-top: 14px;
  font-size: 12px;
  letter-spacing: 4px;
  color: rgba(255,255,255,.88);
}

.hand-note {
  position: absolute;
  right: 0;
  top: 0;
  font: 600 27px/1.05 Caveat, cursive;
  transform: rotate(-7deg);
  text-align: left;
}
.hand-note b { color: var(--accent); }

.hero {
  width: min(710px, 100%);
  margin-top: clamp(80px, 11vh, 150px);
  will-change: transform;
}

.eyebrow {
  margin: 0 0 22px;
  font-size: 22px;
  color: var(--muted);
}
.eyebrow span { font-size: 26px; }

h1 {
  margin: 0;
  font-size: clamp(48px, 5.7vw, 86px);
  line-height: .98;
  letter-spacing: -3.5px;
  font-weight: 800;
}
h1 em {
  color: var(--accent);
  font-style: normal;
}

.intro {
  max-width: 650px;
  margin: 32px 0 38px;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 21px);
  line-height: 1.6;
}

.line {
  width: 80px;
  height: 3px;
  background: var(--accent);
  margin-bottom: 28px;
}
.connect p { margin: 0 0 18px; font-size: 18px; }

.socials { display: flex; gap: 16px; }
.social {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  text-decoration: none;
  font-size: 28px;
  font-weight: 800;
  transition: transform .25s ease, filter .25s ease;
}
.social:hover { transform: translateY(-5px) scale(1.04); filter: brightness(1.12); }
.linkedin { background: #0a66c2; }
.youtube { background: #ff0033; font-size: 21px; }

.follow-note {
  margin-top: 15px;
  margin-left: 8px;
  color: white;
  font: 600 26px/1.05 Caveat, cursive;
  transform: rotate(-5deg);
}


.footer {
  margin-top: auto;
  padding-top: 55px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 25px;
  font-size: 11px;
  letter-spacing: 3px;
  color: rgba(255,255,255,.9);
}
.footer strong { color: var(--accent); }

@media (max-width: 900px) {
  .content { padding: 30px 24px 24px; }
  .hand-note { display: none; }
  .hero { margin-top: 18vh; }
  .sign-labels { right: 5%; top: 47%; opacity: .75; }
  .footer { flex-wrap: wrap; font-size: 9px; letter-spacing: 2px; }
}

@media (max-width: 560px) {
  .background { background-position: 64% center; }
  .descriptor { font-size: 9px; letter-spacing: 2px; line-height: 1.8; }
  .hero { margin-top: 17vh; }
  h1 { letter-spacing: -2px; }
  .intro { line-height: 1.5; }
  .sign-labels { display: none; }
  .footer { gap: 18px; }
}