/* ═══ Homepage — Fullscreen Overrides ═══ */
html, body { height: 100%; overflow: hidden; }

/* ═══ Nav Logo — Homepage (larger) ═══ */
.nav-logo-fixed svg { height: 62px; }

/* ═══ Top-Right Nav Container ═══ */
.nav-top-right {
  position: fixed; top: 36px; right: 40px; z-index: 100;
  display: flex; align-items: center; gap: 16px;
}

/* ═══ Get Started — Nav Pill ═══ */
.nav-get-started {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: #ffffff; text-decoration: none;
  padding: 8px 20px; border-radius: 50px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-purple));
  box-shadow: 0 0 20px rgba(41,151,255,0.15), 0 0 40px rgba(191,90,242,0.08);
  transition: box-shadow 0.3s ease;
}

.nav-get-started:hover {
  box-shadow: 0 0 30px rgba(41,151,255,0.25), 0 0 60px rgba(191,90,242,0.12);
  color: #ffffff;
}

.nav-get-started .cta-arrow {
  display: inline-flex;
  transition: transform 0.3s var(--ease-out-expo);
}

.nav-get-started:hover .cta-arrow { transform: translateX(4px); }

/* ═══ Client Login — Top Right ═══ */
.client-login {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 400; color: var(--color-text-tertiary);
  text-decoration: none; transition: color 0.3s;
}

.client-login:hover { color: var(--color-text-secondary); }
.client-login svg { width: 15px; height: 15px; opacity: 0.6; }

/* ═══ Slide Container ═══ */
.slides-container { position: fixed; inset: 0; z-index: 1; }

.slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 80px 80px 100px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.6s var(--ease-out-expo), transform 0.6s var(--ease-out-expo);
  transform: translateX(60px);
}

.slide.active { opacity: 1; visibility: visible; transform: translateX(0); }
.slide.exit-left { opacity: 0; visibility: visible; transform: translateX(-60px); }
.slide.exit-right { opacity: 0; visibility: visible; transform: translateX(60px); }

.slide-content { max-width: 800px; width: 100%; }

.slide-content > * {
  opacity: 0; transform: translateY(25px);
  transition: all 0.5s var(--ease-out-expo);
}

.slide.active .slide-content > *:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.slide.active .slide-content > *:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: 0.3s; }
.slide.active .slide-content > *:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: 0.45s; }
.slide.active .slide-content > *:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: 0.6s; }
.slide.active .slide-content > *:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: 0.75s; }

/* ═══ Typography — Gradient Style ═══ */
.slide h1 {
  font-family: var(--font-system);
  font-size: clamp(40px, 7vw, 72px); font-weight: 600;
  line-height: 1.1; letter-spacing: -0.035em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.65) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 20px; padding-bottom: 0.05em;
}

.slide h1 .accent {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.slide h1 .accent-purple {
  background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.slide h1 .accent-pink {
  background: linear-gradient(90deg, var(--color-accent-pink), #ff6b6b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.slide h2 .accent {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.slide h2 .accent-purple {
  background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent-pink));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.slide h2 .accent-pink {
  background: linear-gradient(90deg, var(--color-accent-pink), #ff6b6b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.guarantee-box .accent {
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-purple));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.slide h2 {
  font-family: var(--font-system);
  font-size: clamp(28px, 5vw, 48px); font-weight: 600;
  line-height: 1.15; letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 20px;
}

.slide p {
  font-size: clamp(17px, 2.5vw, 22px); font-weight: 400;
  line-height: 1.5; color: var(--color-text-secondary); max-width: 600px;
}

.slide p.large { font-size: clamp(20px, 3vw, 28px); }

.slide blockquote {
  font-size: clamp(20px, 3vw, 30px); font-weight: 500;
  line-height: 1.4; color: var(--color-text);
  border-left: 3px solid var(--color-accent);
  padding-left: 24px; margin: 16px 0; max-width: 650px;
}

.slide ul { list-style: none; padding: 0; margin: 0; }

.slide ul li {
  font-size: clamp(17px, 2.5vw, 22px); font-weight: 400;
  line-height: 1.6; color: var(--color-text-secondary);
  padding-left: 28px; position: relative; margin-bottom: 12px;
}

.slide ul li::before {
  content: ''; position: absolute; left: 0; top: 0.35em;
  width: 16px; height: 16px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-purple));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ═══ Special Elements ═══ */
.guarantee-box {
  position: relative; padding: 36px 40px; margin-top: 8px;
  border-radius: 20px; overflow: hidden;
  background: linear-gradient(135deg, rgba(41,151,255,0.08), rgba(191,90,242,0.08), rgba(255,55,95,0.05));
}

.guarantee-box::before {
  content: ''; position: absolute; inset: 0; border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-purple), var(--color-accent-pink));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

.guarantee-box p {
  font-size: clamp(20px, 3vw, 26px); font-weight: 500;
  color: var(--color-text); line-height: 1.4; max-width: none;
  position: relative; z-index: 1;
}

.price-tag {
  display: inline-block;
  font-size: 16px; font-weight: 500;
  letter-spacing: 0.03em;
  margin-bottom: 20px; padding-left: 16px;
  border-left: 2px solid var(--color-accent-purple);
  background: linear-gradient(90deg, var(--color-accent-purple), var(--color-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cta-button {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 18px; font-weight: 600; letter-spacing: 0.01em;
  color: #ffffff; text-decoration: none; margin-top: 36px;
  padding: 16px 36px; border-radius: 50px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-purple));
  transition: all 0.4s var(--ease-out-expo);
  box-shadow: 0 0 30px rgba(41,151,255,0.15), 0 0 60px rgba(191,90,242,0.1);
}

.cta-button .cta-arrow {
  display: inline-flex; transition: transform 0.4s var(--ease-out-expo);
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px rgba(41,151,255,0.25), 0 0 80px rgba(191,90,242,0.15);
  color: #ffffff;
}

.cta-button:hover .cta-arrow { transform: translateX(6px); }

/* ═══ Navigation Controls ═══ */
.nav-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 50;
  padding: 12px; border: none; background: transparent;
  cursor: pointer; transition: all 0.3s; color: rgba(255,255,255,0.2);
}

.nav-arrow:hover { color: rgba(255,255,255,0.5); }
.nav-arrow:disabled { opacity: 0; cursor: default; pointer-events: none; }

.nav-arrow.prev { left: 24px; }
.nav-arrow.next { right: 24px; }
.nav-arrow svg { width: 28px; height: 28px; stroke-width: 1; }

.slide-indicators {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; align-items: center; gap: 6px;
}

.slide-dot {
  height: 6px; border-radius: 3px; border: none; padding: 0;
  background: rgba(255,255,255,0.15); cursor: pointer;
  transition: all 0.3s; width: 6px;
}

.slide-dot.active { background: var(--color-text); width: 24px; }
.slide-dot:hover:not(.active) { background: rgba(255,255,255,0.3); }

.slide-counter {
  position: fixed; bottom: 24px; right: 24px; z-index: 50;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px; color: var(--color-text-tertiary);
}

.key-hint {
  position: fixed; bottom: 24px; left: 24px; z-index: 50;
  display: none; align-items: center; gap: 8px;
  font-size: 12px; color: rgba(255,255,255,0.2);
}

.key-hint kbd {
  padding: 3px 8px; border-radius: 4px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  font-family: 'SF Mono', monospace; font-size: 11px;
}

/* ═══ Swipe Hint — Touch Devices Only ═══ */
@keyframes swipe-nudge {
  0%   { transform: translateX(-50%); }
  6%   { transform: translateX(calc(-50% - 12px)); }
  12%  { transform: translateX(calc(-50% + 4px)); }
  16%  { transform: translateX(calc(-50% - 2px)); }
  21%  { transform: translateX(-50%); }
  100% { transform: translateX(-50%); }
}
.swipe-hint {
  position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%);
  z-index: 50; display: none;
  font-size: 12px; font-style: italic; color: var(--color-text-tertiary);
  animation: swipe-nudge 4s ease 0.8s infinite;
  transition: opacity 0.4s ease; pointer-events: none;
}
.swipe-hint.hidden { opacity: 0; }
@media (any-pointer: coarse) { .swipe-hint { display: block; } }

/* ═══ Footer Links — Homepage ═══ */
.footer-links-fixed {
  position: fixed; bottom: 52px; left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; gap: 20px;
}

.footer-links-fixed a {
  font-size: 11px; font-weight: 400; color: var(--color-text-tertiary);
  text-decoration: none; transition: color 0.3s;
}

.footer-links-fixed a:hover { color: var(--color-text-secondary); }

/* ═══ Responsive ═══ */
@media (hover: hover) { .key-hint { display: flex; } }

@media (max-width: 768px) {
  .slide { padding: 70px 24px 90px; }
  .nav-arrow { display: none; }
  .nav-logo-fixed svg { height: 50px; }
  .nav-top-right { top: 24px; right: 24px; gap: 12px; }
  .nav-get-started { font-size: 12px; padding: 7px 16px; }
  .client-login { font-size: 13px; }
  .footer-links-fixed { bottom: 48px; gap: 14px; }
  .footer-links-fixed a { font-size: 10px; }
}

@media (max-width: 480px) {
  .nav-logo-fixed svg { height: 44px; }
  .nav-top-right { top: 20px; right: 20px; gap: 10px; }
  .nav-get-started { font-size: 11px; padding: 6px 14px; }
  .client-login { font-size: 12px; }
  .client-login svg { width: 14px; height: 14px; }
  .footer-links-fixed { gap: 10px; bottom: 46px; }
  .footer-links-fixed a { font-size: 10px; }
  .swipe-hint { bottom: 86px; }
}