/* AgentIQ Force LaunchPad — shared stylesheet for index.html + contact.html
   Light theme: white/pale-slate backgrounds with dark ink text, teal as the
   primary accent and violet/gold as secondary accents. Diverges deliberately
   from clients/agentiq-force's dark theme — LaunchPad is the only site in
   this pairing running light. */

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

:root {
  --bg:        #F8FAFC;
  --bg2:       #F1F5F9;
  --card:      #FFFFFF;
  --ink:       #0F172A;
  --muted:     #475569;
  --border:    rgba(15,23,42,0.12);
  /* Primary accent — teal. Token names kept as --blue/--blue-deep to avoid
     touching every usage site (buttons, focus rings, carousel SVGs); same
     "name no longer literally matches the color" tradeoff already accepted
     for clients/agentiq-force's --cyan token. */
  --blue:      #0F766E;
  --blue-deep: #115E59;
  --violet:    #7C3AED;
  --gold:      #F5B301;
  --gold-ink:  #B45309;
  --on-accent: #FFFFFF;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

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

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--blue);
  color: var(--on-accent);
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 8px 0;
  z-index: 1000;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
  top: 0;
}

/* ── FOCUS STATES ── */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

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

/* ── NAV ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 6vw;
  background: rgba(248,250,252,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  flex-shrink: 0;
}

.nav-logo span { color: var(--violet); }

.nav-links { display: flex; align-items: center; gap: 2rem; list-style: none; }
.nav-links a { color: var(--muted); font-size: 0.875rem; font-weight: 500; }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
.nav-cta {
  background: var(--blue);
  color: var(--on-accent) !important;
  padding: 0.5rem 1.25rem;
  border-radius: 6px;
  font-weight: 600 !important;
}
.nav-cta:hover, .nav-cta:focus-visible { background: var(--blue-deep); }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block;
  background: var(--blue);
  color: var(--on-accent);
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--blue-deep);
  transform: translateY(-2px);
  outline: 2px solid var(--violet);
  outline-offset: 2px;
}

.btn-ghost {
  display: inline-block;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 0.85rem 2rem;
  border-radius: 8px;
  font-weight: 500;
  background: transparent;
}
.btn-ghost:hover, .btn-ghost:focus-visible {
  border-color: var(--muted);
  color: var(--ink);
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* ── LAYOUT / SECTION PATTERN ── */
section { padding: 7rem 6vw; }
.section-inner { max-width: 1100px; margin: 0 auto; }

.section-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 0.75rem;
}

.section-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  letter-spacing: -0.01em;
  margin-bottom: 1rem;
}

.section-body {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 560px;
  line-height: 1.7;
}

/* ── HERO ── */
#hero {
  padding-top: 10rem;
  text-align: center;
}
.hero-inner { max-width: 780px; margin: 0 auto; }
.hero-eyebrow {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--violet);
  margin-bottom: 1.25rem;
}
.hero-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}
.hero-title em { color: var(--violet); font-style: normal; }
.hero-body {
  color: var(--muted);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto 2.5rem;
}
.hero-ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }

/* ── HOW IT WORKS (carousel) ── */
#process { background: var(--bg); }

.carousel { margin-top: 3rem; }

.carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.75rem;
  scrollbar-color: var(--border) transparent;
}
.carousel-track::-webkit-scrollbar { height: 8px; }
.carousel-track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }

.carousel-slide {
  scroll-snap-align: center;
  flex: 0 0 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 640px) {
  .carousel-slide { flex-basis: calc(50% - 0.75rem); }
}
@media (min-width: 960px) {
  .carousel-slide { flex-basis: calc(25% - 1.125rem); }
}

.carousel-svg { width: 100%; max-width: 200px; height: auto; margin-bottom: 1.5rem; }

.carousel-slide-title {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}
.carousel-slide-body { color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

.carousel-dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: 1.5rem; }
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
.carousel-dot:hover, .carousel-dot:focus-visible { background: var(--blue); }

/* Carousel illustration animations — off entirely under reduced motion,
   where each SVG keeps the static "resting" pose set in its inline style. */
@media (prefers-reduced-motion: no-preference) {
  /* Slide 1 elements all share one 4s timeline (same duration, no delay) so
     the three lines, the box and the pencil stay in lockstep on every loop
     instead of drifting apart the way independently-delayed animations do. */
  .anim-line-1 { animation: line-reveal-1 4s ease-in-out infinite; }
  .anim-line-2 { animation: line-reveal-2 4s ease-in-out infinite; }
  .anim-line-3 { animation: line-reveal-3 4s ease-in-out infinite; }
  .anim-draw { animation: draw-box 4s ease-in-out infinite; }
  .anim-pencil { animation: pencil-bob 4s ease-in-out infinite; }
  .anim-hammer { animation: hammer-tap 1s ease-in-out infinite; }
  .anim-rocket { animation: rocket-launch 2.2s ease-in infinite; }
  .anim-bar-fill { animation: fill-bar 2.2s ease-in-out infinite; }
  .anim-gear { animation: spin 4.5s linear infinite; }
  .anim-pulse { animation: pulse 1.8s ease-in-out infinite; }
}

@keyframes line-reveal-1 {
  0%, 4% { transform: scaleX(0); }
  12%, 90% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}
@keyframes line-reveal-2 {
  0%, 16% { transform: scaleX(0); }
  24%, 90% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}
@keyframes line-reveal-3 {
  0%, 28% { transform: scaleX(0); }
  36%, 90% { transform: scaleX(1); }
  96%, 100% { transform: scaleX(0); }
}
@keyframes draw-box {
  0%, 40% { stroke-dashoffset: 204; }
  75%, 92% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 204; }
}
@keyframes pencil-bob {
  0%, 40%, 100% { transform: translate(0, 0); }
  55% { transform: translate(-6px, 6px); }
  70% { transform: translate(3px, -3px); }
}
@keyframes hammer-tap {
  0%, 100% { transform: rotate(-35deg); }
  50% { transform: rotate(-72deg); }
}
@keyframes rocket-launch {
  0%, 60% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-45px); opacity: 0; }
}
@keyframes fill-bar {
  0% { transform: scaleX(0); }
  60%, 100% { transform: scaleX(1); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(1.6); }
}

/* ── PRICING ── */
#pricing { background: var(--bg2); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.75rem;
  margin-top: 3rem;
}

.pricing-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, border-color 0.2s;
}
.pricing-card:hover { transform: translateY(-4px); }

.pricing-card.featured {
  border-color: var(--gold);
  background: linear-gradient(160deg, rgba(245,179,1,0.10), var(--card) 45%);
}

.pricing-badge {
  position: absolute;
  top: -0.85rem;
  left: 2.25rem;
  background: var(--gold);
  color: var(--ink);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.pricing-plan-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.pricing-amount {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3vw, 2.3rem);
  color: var(--gold-ink);
  margin-bottom: 0.25rem;
}
.pricing-amount small {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--muted);
}

.pricing-subnote {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.pricing-card.featured .pricing-subnote { color: var(--gold-ink); }

.pricing-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 2rem;
  flex-grow: 1;
}
.pricing-features li {
  color: var(--ink);
  font-size: 0.92rem;
  padding-left: 1.4rem;
  position: relative;
}
.pricing-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--violet);
  font-weight: 700;
}

.pricing-domain-note {
  margin-top: 2.5rem;
  background: rgba(15,23,42,0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  color: var(--muted);
  font-size: 0.9rem;
}
.pricing-domain-note strong { color: var(--ink); }
.pricing-domain-note + .pricing-domain-note { margin-top: 1rem; }

.pricing-domain-note.warning {
  background: rgba(245,179,1,0.10);
  border-color: rgba(245,179,1,0.45);
}
.pricing-domain-note.warning strong { color: var(--gold-ink); }

/* ── ADD-ONS ── */
#addons { background: var(--bg); }

.addon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.addon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.75rem;
  transition: transform 0.2s, border-color 0.2s;
}
.addon-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15,118,110,0.4);
}

.addon-price {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--gold-ink);
  margin-bottom: 0.5rem;
}

.addon-name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 0.6rem;
}

.addon-desc {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ── FAQ ── */
#faq { background: var(--bg2); }

.faq-list {
  margin-top: 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 780px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  background: var(--card);
}

/* Native <details>/<summary> — collapsible with no JS. Default disclosure
   triangle is replaced with a "+" that rotates into an "×" when open. */
.faq-q {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: "+";
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--violet);
  transition: transform 0.2s;
}
.faq-item[open] .faq-q { margin-bottom: 0.5rem; }
.faq-item[open] .faq-q::after { transform: rotate(45deg); }

.faq-a {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ── CTA BANNER ── */
#cta {
  background: linear-gradient(135deg, rgba(15,118,110,0.10), rgba(124,58,237,0.06));
  text-align: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cta-inner { max-width: 620px; margin: 0 auto; }
.cta-inner .section-body { margin: 0 auto 2rem; }

/* ── CONTACT PAGE ── */
#contact-page { background: var(--bg); padding-top: 10rem; }

.contact-methods {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.contact-method-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  flex: 0 1 220px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  transition: transform 0.2s, border-color 0.2s;
}
.contact-method-card:hover {
  transform: translateY(-4px);
  border-color: rgba(15,118,110,0.4);
}
.contact-method-card:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.contact-method-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(15,118,110,0.1);
  margin-bottom: 0.5rem;
}
.contact-method-icon svg { width: 26px; height: 26px; fill: var(--blue); }
.contact-method-card.whatsapp .contact-method-icon { background: rgba(37,197,94,0.12); }
.contact-method-card.whatsapp .contact-method-icon svg { fill: #25D366; }

.contact-method-label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}
.contact-method-value { color: var(--muted); font-size: 0.92rem; }
.contact-method-card:hover .contact-method-value,
.contact-method-card:focus-visible .contact-method-value { color: var(--gold-ink); }

/* ── FOOTER ── */
footer {
  background: var(--bg2);
  border-top: 1px solid var(--border);
  padding: 2.5rem 6vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}
.footer-logo {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
}
.footer-logo span { color: var(--violet); }
.footer-links { display: flex; gap: 1.5rem; list-style: none; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 0.85rem; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--ink); }
.footer-copy { color: var(--muted); font-size: 0.8rem; }

/* ── WHATSAPP CLICK-TO-CHAT ── */
.whatsapp-fab {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 200;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(15,23,42,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.whatsapp-fab svg { width: 28px; height: 28px; fill: #FFFFFF; }
.whatsapp-fab:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 22px rgba(15,23,42,0.3);
}
.whatsapp-fab:focus-visible {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 22px rgba(15,23,42,0.3);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
@media (max-width: 480px) {
  .whatsapp-fab { right: 1rem; bottom: 1rem; width: 52px; height: 52px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }
}

/* ── SCROLL REVEAL ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
}
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .nav-links { display: none; }
  section { padding: 4.5rem 6vw; }
  #hero { padding-top: 7rem; }
  footer { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  section { padding: 3.5rem 5vw; }
  .pricing-card, .contact-method-card { padding: 1.5rem; }
}