:root {
  /* Brand palette derived from the mellowaffle logo */
  --navy-900: #0d0a22;
  --navy-800: #14102e;
  --navy-700: #1b1640;
  --light:    #fbfaff;
  --light-2:  #f1eefb;
  --ink:      #14102e;
  --ink-soft: #5b556f;

  --c-purple:  #7c2fd6;
  --c-magenta: #e0218a;
  --c-pink:    #ff3d6e;
  --c-orange:  #ff8a1e;

  --grad: linear-gradient(120deg, #7c2fd6 0%, #e0218a 45%, #ff3d6e 72%, #ff8a1e 100%);

  --font-body: "Heebo", system-ui, sans-serif;
  --font-display: "Poppins", "Heebo", system-ui, sans-serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  background: var(--navy-900);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Layout ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.panel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 6vw;
}

/* ---------- Left / brand ---------- */
.panel--brand {
  background:
    radial-gradient(120% 90% at 18% 12%, rgba(124, 47, 214, 0.10), transparent 60%),
    radial-gradient(120% 90% at 90% 95%, rgba(255, 138, 30, 0.10), transparent 55%),
    var(--light);
  color: var(--ink);
}

.brand-inner { max-width: 520px; width: 100%; }

.logo { margin-bottom: 22px; }
.logo__img {
  display: block;
  width: clamp(220px, 24vw, 330px);
  height: auto;
}

.headline {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -1px;
  color: var(--ink);
  margin-bottom: 22px;
}

/* ---------- Subheader ambient video ---------- */
.brand-video {
  width: 100%; /* fill the brand content column (its natural/default size) */
  margin: 2px 0 24px;
  line-height: 0;
  pointer-events: none; /* cannot click, drag, or expand */
}
.brand-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  opacity: 0.9;
  /* feather the edges so the clip melts into the panel background */
  -webkit-mask-image: radial-gradient(130% 130% at 50% 50%, #000 52%, transparent 90%);
          mask-image: radial-gradient(130% 130% at 50% 50%, #000 52%, transparent 90%);
}

/* ---------- Services: animated spotlight rotator ---------- */
.services { margin-bottom: 18px; }
.rotator { width: 100%; }

.rot-stage {
  position: relative;
  min-height: 92px;
}

.rot-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  pointer-events: none;
}
.rot-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.ico { width: 62px; height: 62px; flex: none; overflow: visible; }

.rot-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.1vw, 2.15rem);
  line-height: 1.05;
  letter-spacing: -0.5px;
  color: var(--ink);
}
.rot-sub {
  margin-top: 5px;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  font-weight: 500;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* progress dots */
.rot-dots { display: flex; gap: 8px; margin-top: 18px; }
.rot-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  background: rgba(20, 16, 46, 0.16);
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.35s ease;
}
.rot-dot:hover { background: rgba(20, 16, 46, 0.3); }
.rot-dot.is-active { width: 28px; background: var(--grad); }

/* icon part base (hidden) states */
.ico .stroke { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ico .grow-x { transform: scaleX(0); transform-origin: left center; transform-box: fill-box; }
.ico .grow-y { transform: scaleY(0); transform-origin: bottom center; transform-box: fill-box; }
.ico .pop    { opacity: 0; transform: scale(0.2); transform-origin: center; transform-box: fill-box; }

/* run icon animations only while the slide is on screen */
.rot-slide.is-active .ico .stroke { animation: ico-draw 0.8s ease forwards; animation-delay: var(--sd, 0s); }
.rot-slide.is-active .ico .grow-x { animation: ico-growx 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--sd, 0s); }
.rot-slide.is-active .ico .grow-y { animation: ico-growy 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--sd, 0s); }
.rot-slide.is-active .ico .pop    { animation: ico-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; animation-delay: var(--sd, 0s); }

@keyframes ico-draw  { to { stroke-dashoffset: 0; } }
@keyframes ico-growx { to { transform: scaleX(1); } }
@keyframes ico-growy { to { transform: scaleY(1); } }
@keyframes ico-pop   { to { opacity: 1; transform: scale(1); } }

.services-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.7vw, 1.25rem);
  letter-spacing: 0.2px;
  color: var(--ink);
  opacity: 0;
  animation: pill-in 0.7s ease forwards;
  animation-delay: 0.8s;
}
@keyframes pill-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  /* accessible fallback: show all four as a static stacked list */
  .rot-stage { position: static; min-height: 0; }
  .rot-slide { position: static; opacity: 1; transform: none; margin-bottom: 14px; pointer-events: auto; }
  .ico .stroke { stroke-dashoffset: 0; }
  .ico .grow-x, .ico .grow-y, .ico .pop { transform: none; opacity: 1; }
  .rot-dots { display: none; }
  .services-tag { animation: none; opacity: 1; }
}

.clients {
  margin-top: 64px;
  border-top: 1px solid rgba(20, 16, 46, 0.08);
  padding-top: 26px;
}
.clients__label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 14px;
}
.clients__logos { display: flex; gap: 34px; flex-wrap: wrap; align-items: center; }
.client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: #b9b3c9;
  filter: grayscale(1);
}

/* ---------- Right / contact ---------- */
.panel--contact {
  background: var(--navy-800);
  overflow: hidden;
  color: #fff;
}
.particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.contact-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 520px;
}

.contact-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.5px;
  color: #fff;
  margin-bottom: 30px;
}

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; }

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 15px 18px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 120px; }

.field input::placeholder,
.field textarea::placeholder { color: rgba(255, 255, 255, 0.45); }

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--c-magenta);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(224, 33, 138, 0.18);
}

.field--phone { gap: 10px; }
.field--phone select {
  width: auto;
  flex: none;
  min-width: 110px;
  cursor: pointer;
  background-color: var(--navy-700);
}
.field--phone select option { color: #fff; background: var(--navy-700); }

.btn-send {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  color: #fff;
  background: var(--grad);
  background-size: 160% 160%;
  border: none;
  border-radius: 12px;
  padding: 16px 22px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .25s ease, background-position .5s ease;
  box-shadow: 0 10px 28px rgba(224, 33, 138, 0.28);
}
.btn-send:hover {
  transform: translateY(-2px);
  background-position: 100% 0;
  box-shadow: 0 14px 36px rgba(224, 33, 138, 0.42);
}
.btn-send:active { transform: translateY(0); }

.form-status {
  font-size: 0.9rem;
  min-height: 1.1em;
  color: #ffb86b;
}
.form-status.success { color: #5be0a0; }

/* ---------- Contact info ---------- */
.contact-info {
  list-style: none;
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contact-info li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.82);
}
.contact-info svg {
  width: 20px; height: 20px; flex: none;
  fill: var(--c-pink);
}
.contact-info a { color: inherit; text-decoration: none; transition: color .2s; }
.contact-info a:hover { color: var(--c-orange); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .panel { padding: 44px 28px; }
  .panel--brand {
    order: 1;
    /* keep the brand panel a touch under full-screen so the top of the
       lead-form peeks above the fold — signals there's more below */
    min-height: 90vh;
    min-height: 90dvh; /* dvh accounts for the mobile browser toolbar */
  }
  .panel--contact { order: 2; }
  .clients { margin-top: 40px; }
}