/* =====================================================================
   QAYD — BASE
   Reset, document defaults, typography, layout primitives & utilities.
   Depends on theme.css tokens. No component styling here.
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* Belt + suspenders: even if a child element (decorative halo, off-screen
     honeypot, etc.) extends past the viewport, the root cannot scroll
     sideways. Critical on RTL pages where iOS Safari may otherwise allow a
     leftward scroll past the start edge. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* `clip` doesn't create a scroll container yet still kills overflow,
     so the page can't be scrolled sideways on any device. */
  overflow-x: clip;
}

/* Honeypot — hidden from humans but real to bots that crawl the DOM.
   Uses the sr-only pattern so it stays INSIDE viewport bounds; positioning
   it off-screen with `left:-10000px` breaks horizontal scroll on RTL pages. */
.honeypot {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Scroll lock while the mobile drawer is open */
html.nav-locked, html.nav-locked body { overflow: hidden; }

/* Make every image/media stay inside its parent — single biggest source of
   right-edge overflow at small widths. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }

::selection { background: var(--primary); color: #fff; }

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

/* ---- Focus + skip-link ---- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.skip-link {
  position: absolute;
  inset-inline-start: var(--sp-4);
  top: -100px;
  z-index: 100;
  background: var(--primary);
  color: #fff;
  font-weight: var(--fw-bold);
  padding: 12px 18px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: var(--sp-3); outline-offset: 0; }

img[loading="lazy"] { background: var(--primary-tint); }

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: var(--lh-tight);
  margin: 0;
  color: var(--text);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1 { font-size: var(--fs-h1); line-height: 1.18; }
h2 { font-size: var(--fs-h2); line-height: 1.25; }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-semi); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semi); }
p  { margin: 0; }

/* ---- Layout primitives ---- */
.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 32px);
  width: 100%;
}
.container--narrow { max-width: var(--container-narrow); }

.section { padding-block: clamp(56px, 9vw, 96px); }
.section--tight { padding-block: clamp(48px, 7vw, 80px); }

/* Section eyebrow + heading block */
.eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--primary);
  font-weight: var(--fw-semi);
  margin-bottom: var(--sp-3);
}
.section-head { text-align: center; margin-bottom: var(--sp-12); }
.section-head h2 { margin-bottom: 0; }
.section-head p {
  font-size: 17px; color: var(--text-soft);
  max-width: 56ch; margin-inline: auto;
  margin-top: clamp(16px, 1.8vw, 24px);
  line-height: 1.7;
}
.accent { color: var(--primary); }

/* ---- Grid helpers ---- */
.grid { display: grid; gap: var(--sp-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); }

/* ---- Chip / badge ---- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--primary-tint);
  color: var(--primary-dark);
  font-weight: var(--fw-semi);
  font-size: 12.5px;
  padding: 6px 13px;
  border-radius: var(--r-pill);
}
.chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--primary); }

/* ---- Buttons ----
   Sizing matrix — every variant inherits these from .btn so heights line up:
     default → 48px tall, 24px x-pad, 15px text
     .btn--sm → 38px tall, 14px x-pad, 13.5px text   (header / dense rows)
     .btn--lg → 54px tall, 28px x-pad, 16px text     (hero CTAs)
   Variants only change color/border/icon — never padding or font-size.
   Icons inside buttons use 18px square, no exceptions. */
.btn {
  --_btn-h:    48px;
  --_btn-px:   24px;
  --_btn-text: 15px;
  --_btn-icon: 18px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--_btn-h);
  padding-inline: var(--_btn-px);
  font-family: var(--font-body);
  font-weight: var(--fw-semi);
  font-size: var(--_btn-text);
  line-height: 1;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    transform var(--dur) var(--ease-out),
    background var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.btn > svg, .btn .btn__icon {
  flex: none;
  width: var(--_btn-icon);
  height: var(--_btn-icon);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.20) 50%, transparent 70%);
  transform: translateX(-110%);
  transition: transform .6s var(--ease-out);
  pointer-events: none;
  z-index: -1;
}
.btn:hover { transform: translateY(-1px); }
.btn:hover::before { transform: translateX(110%); }
.btn:active { transform: translateY(0); transition-duration: var(--dur-fast); }

/* Size variants — change only the three sizing vars */
.btn--sm { --_btn-h: 38px; --_btn-px: 14px; --_btn-text: 13.5px; --_btn-icon: 16px; gap: 8px; }
.btn--lg { --_btn-h: 54px; --_btn-px: 28px; --_btn-text: 16px;   --_btn-icon: 20px; gap: 12px; }

/* Color variants */
.btn--primary  { background: var(--primary); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover  { background: var(--primary-dark); box-shadow: var(--shadow-glow); }

.btn--ghost    { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn--ghost:hover    { border-color: var(--primary); color: var(--primary-dark); }

.btn--dark     { background: var(--qayd-ink); color: #fff; }
.btn--dark:hover     { background: #1a3148; }

/* Platform / channel buttons collapse to a single ghost treatment so the page
   has ONE primary CTA (emerald) and one secondary (ghost). The icon retains its
   brand color as a recognition cue but the button itself no longer competes. */
.btn--android,
.btn--whatsapp,
.btn--call {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.btn--android:hover,
.btn--whatsapp:hover,
.btn--call:hover {
  border-color: var(--primary);
  color: var(--primary-dark);
}
.btn--android > svg, .btn--android .btn__icon  { color: var(--qayd-android-d); }
.btn--whatsapp > svg, .btn--whatsapp .btn__icon { color: var(--qayd-wa-d); }
.btn--call > svg, .btn--call .btn__icon { color: var(--qayd-call); }

/* On dark surfaces (contact section, mobile dock), keep the channels readable
   as filled chips since they need to stand against an ink background. */
.contact .btn--whatsapp,
.cta-dock .btn--whatsapp,
.mobile-menu .btn--whatsapp,
.mobile-menu .btn--call {
  background: var(--qayd-wa);
  color: #fff;
  border-color: transparent;
}
.contact .btn--whatsapp:hover,
.cta-dock .btn--whatsapp:hover,
.mobile-menu .btn--whatsapp:hover { background: var(--qayd-wa-d); color: #fff; }
.contact .btn--whatsapp > svg,
.cta-dock .btn--whatsapp > svg,
.mobile-menu .btn--whatsapp > svg,
.mobile-menu .btn--call > svg { color: #fff; }

.contact .btn--call,
.mobile-menu .btn--call {
  background: var(--qayd-call);
  color: #fff;
  border-color: transparent;
}
.contact .btn--call:hover,
.mobile-menu .btn--call:hover { background: var(--qayd-call-d); color: #fff; }

.btn--link     { color: var(--primary-dark); background: none; padding-inline: var(--sp-4); height: auto; }
.btn--link::before { display: none; }
.btn--link:hover { color: var(--primary); transform: none; }

.btn--block    { display: flex; width: 100%; }

/* Icon-only square — used for nav theme/lang toggles. Same height as siblings. */
.btn--icon     { padding-inline: 0; width: var(--_btn-h); }

/* ---- Stars ---- */
.stars { display: inline-flex; gap: 2px; color: var(--qayd-gold); }

/* ---- Utility ---- */
.numeric { font-family: var(--font-display); font-feature-settings: "tnum"; }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Reveal on scroll ----
   Content is VISIBLE by default. JS sets .js-motion on <html> only when the
   page is actually being viewed (visible tab, real user agent), and only then
   does the entrance state kick in. Bots, social-preview renderers, and any
   pre-JS paint see content, never a blank page. */
.reveal {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out),
    filter var(--dur-slow) var(--ease-out);
}
.js-motion .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}
/* Stagger children with a CSS custom property index (set by JS or markup) */
.reveal--stagger > * {
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js-motion .reveal--stagger:not(.is-in) > * {
  opacity: 0;
  transform: translateY(14px);
}
/* Visual-card scale-in variant (used inside feature rows) */
.reveal--scale .reveal__visual {
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js-motion .reveal--scale:not(.is-in) .reveal__visual {
  opacity: 0; transform: scale(.96);
}

/* ---- Animations ---- */
@keyframes floaty   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulsering { 0%,100% { opacity: .45; transform: scale(1); } 50% { opacity: .85; transform: scale(1.04); } }
@keyframes spin     { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal, .reveal--stagger > *, .reveal--scale .reveal__visual {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ---- Responsive base ---- */
@media (max-width: 1024px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .section { padding-block: var(--sp-16); }
  .section-head { margin-bottom: var(--sp-10); }
}