/* ============================================================
   HELLOW PARTNERS — styles.css
   Desktop-first (1920×1440 base), fully responsive
   Font: Rubik | Accent: #DBF844 | BG: #FFFFFF
   ============================================================ */

/* ── Custom Properties ── */
:root {
  --accent:       #DBF844;
  --accent-dark:  #b8d400;
  --black:        #111111;
  --grey-mid:     #555555;
  --grey-light:   #888888;
  --white:        #FFFFFF;
  --font:         'Rubik', sans-serif;

  /* Spacing scale */
  --space-xs:   0.5rem;
  --space-sm:   1rem;
  --space-md:   2rem;
  --space-lg:   3rem;
  --space-xl:   5rem;

  /* Layout */
  --page-h-pad: clamp(2rem, 4vw, 6rem);
}

/* ── Reset & Base ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  line-height: 1.5;
  overflow-x: hidden;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img, svg {
  display: block;
  max-width: 100%;
}

/* ── Page Wrapper ── */
.page {
  display: grid;
  grid-template-rows: 1fr auto auto;
  min-height: 100vh;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.page.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 0;
  padding: clamp(2.5rem, 4vw, 5rem) var(--page-h-pad) 0;
  position: relative;
  overflow: hidden;
}

/* ── Hero Content (left) ── */
.hero__content {
  padding-top: clamp(1rem, 2vw, 2.5rem);
  padding-right: clamp(1rem, 2vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5vw, 1.5rem);
  position: relative;
  z-index: 2;
}

.hero__headline {
  font-size: clamp(2.8rem, 6.5vw, 9rem);
  font-weight: 800;
  line-height: 0.97;
  letter-spacing: -0.02em;
  color: var(--black);
}

.hero__subheadline {
  font-size: clamp(1rem, 1.4vw, 1.6rem);
  font-weight: 400;
  color: var(--black);
  line-height: 1.4;
}

/* Bullet list */
.hero__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.35rem, 0.6vw, 0.6rem);
  margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
}

.hero__list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: clamp(0.9rem, 1.15vw, 1.25rem);
  font-weight: 400;
  color: var(--black);
}

.bullet {
  display: inline-block;
  width: clamp(6px, 0.55vw, 9px);
  height: clamp(6px, 0.55vw, 9px);
  background: var(--accent);
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Hero Visual (right) ── */
.hero__visual {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.maze-wrapper {
  width: 100%;
  position: relative;
}

.maze {
  position: relative;
  width: 100%;
}

/* Drone */
.drone {
  position: absolute;
  top: -2%;
  right: 8%;
  width: clamp(80px, 10vw, 150px);
  z-index: 10;
  animation: droneFloat 4s ease-in-out infinite;
}

.drone__svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.15));
}

/* Light beam from drone */
.drone__beam {
  position: absolute;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 28px solid transparent;
  border-right: 28px solid transparent;
  border-top: 90px solid rgba(219, 248, 68, 0.25);
  filter: blur(6px);
  pointer-events: none;
}

/* Isometric maze SVG */
.maze__iso {
  width: 100%;
  height: auto;
  margin-top: clamp(-1rem, -2vw, -3rem);
}

/* Beam overlay on maze */
.beam-overlay {
  position: absolute;
  top: 10%;
  right: 22%;
  width: clamp(60px, 8vw, 120px);
  height: clamp(100px, 14vw, 200px);
  background: linear-gradient(180deg, rgba(219,248,68,0.20) 0%, rgba(219,248,68,0.0) 100%);
  clip-path: polygon(35% 0%, 65% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}

/* Drone float animation */
@keyframes droneFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25%       { transform: translateY(-8px) rotate(1deg); }
  75%       { transform: translateY(4px) rotate(-0.5deg); }
}

/* ============================================================
   BOTTOM SECTION
   ============================================================ */
.bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  padding: 0 var(--page-h-pad);
  gap: clamp(1rem, 4vw, 4rem);
  margin-top: clamp(-2rem, -3vw, -4rem);
}

/* ── Launch Block ── */
.launch__title {
  font-size: clamp(0.8rem, 1.05vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--black);
  margin-bottom: 0.4rem;
}

.launch__sub {
  font-size: clamp(0.75rem, 0.85vw, 0.95rem);
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0.8rem;
}

.launch__body {
  font-size: clamp(0.7rem, 0.8vw, 0.9rem);
  font-weight: 300;
  color: var(--grey-mid);
  line-height: 1.65;
}

/* ── Services List ── */
.bottom__services {
  display: flex;
  justify-content: flex-end;
  align-self: end;
}

.services__list {
  display: flex;
  flex-direction: column;
  gap: clamp(0.1rem, 0.35vw, 0.4rem);
  align-items: flex-end;
}

.services__list li {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 0.6vw, 0.8rem);
}

.services__name {
  font-size: clamp(0.75rem, 0.95vw, 1.05rem);
  font-weight: 400;
  color: var(--black);
  text-align: right;
}

.services__plus {
  font-size: clamp(0.9rem, 1vw, 1.1rem);
  font-weight: 700;
  color: var(--black);
  line-height: 1;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(1rem, 2vw, 3rem);
  padding: clamp(1.2rem, 2vw, 2.2rem) var(--page-h-pad);
  margin-top: clamp(1.5rem, 2.5vw, 3rem);
  border-top: 1px solid #f0f0f0;
}

/* ── CTA Button ── */
.btn-stay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--black);
  font-family: var(--font);
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  font-weight: 600;
  padding: clamp(0.7rem, 1vw, 1rem) clamp(1.2rem, 1.8vw, 2rem);
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.btn-stay:hover {
  background: var(--accent-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(219, 248, 68, 0.5);
}

.btn-stay:active {
  transform: translateY(0);
}

/* ── Social Nav ── */
.footer__social {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 1.2vw, 1.5rem);
  justify-content: flex-start;
  padding-left: clamp(0.5rem, 1.5vw, 2rem);
}

.footer__divider {
  color: #ccc;
  font-size: 1rem;
  font-weight: 300;
  user-select: none;
}

.social-link {
  font-size: clamp(0.8rem, 1vw, 1.05rem);
  font-weight: 500;
  color: var(--black);
  position: relative;
  transition: color 0.2s ease;
}

.social-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 1px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.social-link:hover {
  color: var(--black);
}

.social-link:hover::after {
  width: 100%;
}

/* ── Logo ── */
.footer__logo {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 0.8vw, 1rem);
  justify-content: flex-end;
}

/* Logo mark: the two-bar + plus icon */
.logo-mark {
  display: flex;
  align-items: flex-end;
  gap: 0;
  position: relative;
}

.logo-mark__bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.2vw, 4px);
}

.bar {
  display: inline-block;
  width: clamp(10px, 1vw, 16px);
  border-radius: 2px 2px 0 0;
}

.bar--dark {
  background: var(--black);
  height: clamp(28px, 3vw, 48px);
}

.bar--short {
  height: clamp(20px, 2.1vw, 34px) !important;
}

.bar--accent {
  background: var(--accent);
  height: clamp(14px, 1.5vw, 24px);
}

.logo-plus {
  font-family: var(--font);
  font-size: clamp(1rem, 1.2vw, 1.6rem);
  font-weight: 900;
  color: var(--black);
  line-height: 1;
  margin-left: clamp(1px, 0.15vw, 3px);
  margin-bottom: 0;
  align-self: flex-end;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.logo-text__top {
  font-size: clamp(1rem, 1.35vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--black);
}

.logo-text__plus {
  color: var(--accent);
  font-weight: 900;
}

.logo-text__bottom {
  font-size: clamp(1rem, 1.35vw, 1.85rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--black);
}

/* ============================================================
   RESPONSIVE — TABLET (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-bottom: 1rem;
  }

  .hero__content {
    padding-right: 0;
    gap: 1rem;
  }

  .hero__visual {
    order: -1;
    max-height: 380px;
    overflow: hidden;
  }

  .drone {
    width: clamp(70px, 12vw, 110px);
    top: -3%;
    right: 5%;
  }

  .bottom {
    grid-template-columns: 1fr;
    margin-top: 1rem;
    gap: 2rem;
  }

  .bottom__services {
    justify-content: flex-start;
  }

  .services__list {
    align-items: flex-start;
  }

  .footer {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem 1.5rem;
  }

  .footer__logo {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
  :root {
    --page-h-pad: 1.25rem;
  }

  .hero {
    padding-top: 2rem;
    gap: 1rem;
  }

  .hero__visual {
    max-height: 260px;
  }

  .maze__iso {
    margin-top: 0;
  }

  .drone {
    width: 70px;
    top: -5%;
    right: 2%;
  }

  .bottom {
    padding-bottom: 0.5rem;
    gap: 1.5rem;
  }

  .footer {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 1rem;
  }

  .footer__social {
    padding-left: 0;
  }

  .footer__logo {
    grid-column: 1;
    justify-content: flex-start;
  }
}

/* ============================================================
   ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .page {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .drone {
    animation: none;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}