/* ============ reset & tokens ============ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #ffffff;
  --text: #0b0b14;
  --muted: #5b5f72;
  --accent: #6d5cff;
  --accent-2: #00b3a4;
  --accent-3: #ff4d8d;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
}

html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #fff; }
h1 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.03em; }
a { color: inherit; text-decoration: none; }

/* ============ animated background ============ */
.aurora {
  position: fixed; inset: -10%; z-index: -4; overflow: hidden;
  pointer-events: none;
}

/* slowly rotating color sheen across the whole white canvas */
.aurora::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(
    from 0deg,
    rgba(182, 172, 255, 0.16),
    rgba(168, 240, 234, 0.30),
    rgba(255, 211, 227, 0.30),
    rgba(255, 244, 214, 0.28),
    rgba(182, 188, 255, 0.30),
    rgba(168, 240, 234, 0.30),
    rgba(255, 211, 227, 0.30),
    rgba(182, 188, 255, 0.30)
  );
  filter: blur(90px);
  animation: spin 60s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ nav ============ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; }
.nav-inner {
  max-width: 1100px; margin: 0 auto; padding: 1.4rem 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
}
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.logo span { color: var(--accent-2); }

/* ============ buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 0.85rem 1.6rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--text); color: #fff;
  box-shadow: 0 8px 28px rgba(11, 11, 18, 0.22);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(109, 92, 255, 0.35);
  background: var(--accent);
}
.btn-small { padding: 0.55rem 1.15rem; font-size: 0.85rem; }
.btn-big { padding: 1rem 2.1rem; font-size: 1.02rem; }

/* ============ hero ============ */
.hero {
  /* fill the real visible viewport on mobile — fallback chain for older browsers */
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem 1.5rem 7rem;
}
.hero-inner { max-width: 1100px; margin: 0 auto; text-align: center; }

.hero-title {
  font-size: clamp(2.4rem, 6.5vw, 5.2rem);
  font-weight: 700;
  max-width: 950px;
  margin: 0 auto 1.6rem;
  display: flex; flex-wrap: wrap; justify-content: center; column-gap: 0.28em;
}
.word {
  display: inline-block;
  opacity: 0; transform: translateY(0.9em) rotate(2deg);
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 0.12s + 0.15s);
}
@keyframes rise { to { opacity: 1; transform: translateY(0) rotate(0); } }

.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-3), var(--accent-2), var(--accent));
  background-size: 300% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards,
             shimmer 8s linear infinite;
  animation-delay: calc(var(--i) * 0.12s + 0.15s), 1.2s;
}
@keyframes shimmer { to { background-position: 300% center; } }

.hero-sub {
  max-width: 520px; margin: 0 auto 2.4rem; color: var(--muted); font-size: 1.12rem;
  opacity: 0; transform: translateY(20px);
  animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.9s forwards;
}
.hero-cta {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  opacity: 0; transform: translateY(20px);
  animation: fade-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards;
}
@keyframes fade-up { to { opacity: 1; transform: none; } }

/* ============ corgi on patrol ============ */
.corgi-track {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  pointer-events: none;
}
.corgi-wrap {
  position: absolute; bottom: -2px; left: -300px;
  animation: trot-across 18s linear infinite;
  animation-delay: 1.5s;
}
.corgi {
  width: 175px; height: auto;
  display: block;
  animation: trot-bounce 0.5s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* crossing with a pause near the left, before the CTA area (~25%–37% ≈ 2.2s) */
@keyframes trot-across {
  0%   { left: -300px; }
  25%  { left: 16vw; }
  37%  { left: 16vw; }
  100% { left: 105vw; }
}

/* speech bubble — appears while the corgi is paused */
.corgi-hello {
  position: absolute; bottom: 152px; right: -14px;
  background: #fff; color: var(--text);
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
  padding: 0.45rem 0.95rem; border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px rgba(20, 16, 50, 0.16);
  white-space: nowrap;
  transform-origin: bottom right;
  opacity: 0;
  animation: say-hello 18s ease-in-out infinite;
  animation-delay: 1.5s;
}
.corgi-hello::after {
  content: ""; position: absolute;
  bottom: -7px; right: 26px;
  border: 7px solid transparent;
  border-top-color: #fff; border-bottom: 0;
  filter: drop-shadow(0 2px 1px rgba(20,16,50,0.08));
}
@keyframes say-hello {
  0%, 26%  { opacity: 0; transform: scale(0.5) translateY(10px); }
  29%, 38% { opacity: 1; transform: scale(1) translateY(0); }
  43%, 100% { opacity: 0; transform: scale(0.5) translateY(8px); }
}

/* body bounce while trotting */
@keyframes trot-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

/* legs — trot gait, diagonal pairs */
.leg { transform-box: fill-box; transform-origin: 50% 5%; animation: leg-swing 0.5s ease-in-out infinite; }
.leg-1 { animation-delay: 0s; }        /* near front  — pair A */
.leg-4 { animation-delay: 0s; }        /* far back    — pair A */
.leg-2 { animation: leg-swing-back 0.5s ease-in-out infinite; }  /* far front — pair B */
.leg-3 { animation: leg-swing-back 0.5s ease-in-out infinite; } /* near back — pair B */
@keyframes leg-swing {
  0%, 100% { transform: rotate(20deg); }
  50%      { transform: rotate(-22deg); }
}
@keyframes leg-swing-back {
  0%, 100% { transform: rotate(-20deg); }
  50%      { transform: rotate(22deg); }
}

/* tail wag (pivot where tail meets body) */
.corgi-tail { transform-box: fill-box; transform-origin: 95% 85%; animation: wag 0.45s ease-in-out infinite; }
@keyframes wag {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(16deg); }
}

/* head bob (pivot at neck) */
.corgi-head { transform-box: fill-box; transform-origin: 15% 95%; animation: head-bob 1s ease-in-out infinite; }
@keyframes head-bob {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(3deg); }
}

/* ============ inquiry modal ============ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.5rem;
  background: rgba(15, 12, 30, 0.35);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(14px);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }

.modal {
  position: relative;
  width: min(520px, 100%);
  max-height: 90vh;
  max-height: calc(100dvh - 2.5rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--line); border-radius: 24px;
  box-shadow: 0 30px 80px rgba(20, 16, 50, 0.25);
  padding: 2.4rem 2.2rem 2rem;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-overlay.open .modal { transform: none; }

.modal-close {
  position: absolute; top: 1rem; right: 1.1rem;
  background: none; border: 0; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--muted);
  width: 36px; height: 36px; border-radius: 50%;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.modal-close:hover { background: rgba(11,11,18,0.06); transform: rotate(90deg); }

.modal-title { font-size: 1.9rem; margin-bottom: 0.5rem; }
.modal-note { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.6rem; }

.field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.field label {
  font-family: var(--font-display); font-size: 0.85rem; font-weight: 600;
}
.req { color: var(--accent-3); }
.optional { color: var(--muted); font-weight: 400; font-size: 0.8rem; }

.field input, .field textarea {
  width: 100%;
  /* 16px+ prevents iOS Safari from auto-zooming when a field is focused */
  font: inherit; font-size: 1rem; color: var(--text);
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(11,11,18,0.14); border-radius: 12px;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field textarea { resize: vertical; min-height: 70px; }
.field input:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(109, 92, 255, 0.18);
}
.field input.invalid, .field textarea.invalid { border-color: #e4586b; }

.form-error { color: #d8434f; font-size: 0.85rem; margin: -0.3rem 0 0.8rem; }
.btn-submit { width: 100%; justify-content: center; }
.modal-fineprint { margin-top: 0.9rem; font-size: 0.8rem; color: var(--muted); text-align: center; }

/* success view */
.modal-success { text-align: center; padding: 1.5rem 0.5rem 0.5rem; }
.success-icon {
  width: 64px; height: 64px; margin: 0 auto 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 1.8rem; color: #fff;
  background: linear-gradient(135deg, #3ddc84, #00b3a4);
  box-shadow: 0 10px 30px rgba(0, 179, 164, 0.35);
  animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes pop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.modal-success h3 { font-family: var(--font-display); font-size: 1.5rem; margin-bottom: 0.5rem; }
.modal-success p { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.6rem; }

/* ============ responsive ============ */
@media (max-width: 760px) {
  .hero { padding: 5.5rem 1.25rem 6.5rem; }
  .hero-title { column-gap: 0.2em; }
  .hero-sub { font-size: 1.02rem; margin-bottom: 2rem; }
  .corgi-wrap { bottom: 1px; }
  .corgi { width: 120px; }
  .corgi-hello { bottom: 105px; right: -8px; font-size: 0.8rem; }

  /* modal becomes a bottom sheet on phones — thumb-friendly & edge-to-edge */
  .modal-overlay { align-items: flex-end; padding: 1rem 0.75rem 0; }
  .modal {
    width: 100%;
    max-height: calc(100dvh - 1rem);
    border-radius: 24px 24px 0 0;
    border-bottom: 0;
    padding: 2rem 1.25rem calc(1.75rem + env(safe-area-inset-bottom));
  }
  /* when the on-screen keyboard opens, dock the modal to the *visible* area */
  .kb-open .modal-overlay { align-items: flex-start; padding-top: max(0.5rem, var(--vv-top, 0px)); }
  .kb-open .modal { max-height: var(--vv-height, calc(100dvh - 1rem)); }

  .modal-title { font-size: 1.55rem; }
  .modal-note { margin-bottom: 1.3rem; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .field input, .field textarea { padding: 0.85rem 1rem; }
  .btn-submit { padding: 1rem 1.6rem; font-size: 1rem; }
  .modal-success .btn { width: 100%; justify-content: center; }
}

/* ============ reduced motion ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .word, .hero-sub, .hero-cta { opacity: 1; transform: none; }
  .corgi, .corgi-hello { display: none; }
}