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

html {
  width: 100%;
  height: 100%;
}

body {
  min-height: 100svh; /* iPhone safe viewport */
  width: 100%;
  font-family: 'Poppins', sans-serif;

  background: #000 url('accelerate.is+-+building+and+marketing+your+online+presence+and+beyond.jpg') center / cover no-repeat;

  /* True centering everywhere */
  display: flex;
  justify-content: center;
  align-items: center;

  padding: calc(clamp(1rem, 5vw, 4rem) + env(safe-area-inset-top)) calc(clamp(1rem, 5vw, 4rem) + env(safe-area-inset-right))
    calc(clamp(1rem, 5vw, 4rem) + env(safe-area-inset-bottom)) calc(clamp(1rem, 5vw, 4rem) + env(safe-area-inset-left));

  text-align: center;

  /* Allow scroll if content grows */
  overflow-y: auto;
}

/* Remove hyperlink defaults */

a {
  text-decoration: none;
  color: inherit;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus,
a:active,
a:hover {
  outline: none;
}

/* Wrapper */

.content-wrapper {
  width: 100%;
  max-width: 1100px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: clamp(1.5rem, 4vw, 3rem);
}

/* Typography */

h1,
h2,
p {
  color: white;
  animation: fadeIn 1s ease forwards;
}

/* Fluid headline */

h1 {
  width: 100%;
  font-weight: 700;
  line-height: 1.05;
  font-size: clamp(2.2rem, 8vw, 5rem);
}

/* Paragraph */

p {
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 200;
  margin-top: 0.75rem;
}

/* Subheadline */

h2 {
  max-width: 800px;
  font-weight: 700;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  margin-top: 1.5rem;
}

/* Logo */

.logo img {
  width: clamp(70px, 15vw, 100px);
}

/* Social */

.social {
  margin-top: clamp(2rem, 6vw, 4rem);
}

.social svg {
  animation: fadeIn 2s ease forwards;
  margin-top: 1rem;
  width: 32px;
  height: 32px;
  color: white;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.social svg:hover {
  transform: scale(1.1);
  opacity: 0.8;
}

/* Animation */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}