/* ==========================================================================
   GURU AI TECHNOLOGIES — style.css
   Single stylesheet for the entire site.

   CONTENTS
   01. Design tokens
   02. Reset & base
   03. Typography
   04. Layout primitives
   05. Ambient light (soft glow — no particles, no graphics)
   06. Accessibility
   07. Buttons
   08. Navbar
   09. Loader · progress · to-top · floating stack
   10. Cards
   11. Home — hero
   12. Home — sections
   13. Forms
   14. Service pages
   15. Prose pages (legal)
   16. 404
   17. Footer
   18. Chatbot (GURU)
   19. Motion & reveal system
   20. Reduced motion
   ========================================================================== */

/* ==========================================================================
   01. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Surfaces — clean light corporate (white / very light, navy-tinted greys) */
  --c-void:        #FFFFFF;                    /* page background */
  --c-carbon:      #F4F7FC;                    /* alt sections + footer */
  --c-graphite:    #FFFFFF;                    /* cards / raised surfaces */
  --c-elevated:    #EDF1F9;                    /* subtle filled chips */
  --c-line:        rgba(15, 30, 61, 0.10);     /* hairline borders */
  --c-line-strong: rgba(15, 30, 61, 0.16);

  /* Content — deep navy headings on light */
  --c-white: #0E1E3D;   /* headings/strong text (token name kept for compatibility) */
  --c-body:  #47566E;   /* body copy — slate */
  --c-muted: #646F84;   /* muted labels / meta — AA on white and on --c-carbon */

  /* Brand accents */
  --c-blue:      #2F6BFF;   /* primary — electric blue */
  --c-blue-deep: #1E50D8;
  --c-blue-text: #1E50D8;   /* small accent text — 6.6:1 on white */
  --c-cyan:      #0AA6C7;   /* subtle cyan accent, legible on white */

  /* Semantic */
  --c-success: #16A34A;
  --c-error:   #DC2626;

  /* Signature gradient — tasteful blue→cyan, readable on white */
  --g-signal: linear-gradient(90deg, #2F6BFF 0%, #14B4DA 100%);

  /* Type families */
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Fluid type scale — capped so ultra-wide screens stay elegant */
  --fs-hero:  clamp(2.125rem, 1.15rem + 3.9vw, 4rem);
  --fs-h2:    clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h3:    clamp(1.1875rem, 1.08rem + 0.5vw, 1.4375rem);
  --fs-lead:  clamp(1.03125rem, 0.99rem + 0.28vw, 1.1875rem);
  --fs-body:  1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Spacing */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;
  --sp-4: 1rem;     --sp-5: 1.5rem;   --sp-6: 2rem;
  --sp-7: 3rem;     --sp-8: 4rem;     --sp-9: 6rem;
  --sp-section: clamp(4.5rem, 3rem + 5vw, 8rem);

  /* Layout */
  --w-container: 75rem;
  --w-narrow:    46rem;
  --gutter:      clamp(1.25rem, 4vw, 2.5rem);
  --nav-h:       4.5rem;

  /* Radius */
  --r-sm: 10px;  --r-md: 14px;  --r-lg: 20px;  --r-pill: 999px;

  /* Elevation — soft, navy-tinted (light corporate) */
  --shadow-soft: 0 1px 2px rgba(16, 33, 64, 0.04), 0 6px 18px rgba(16, 33, 64, 0.06);
  --shadow-card: 0 1px 2px rgba(16, 33, 64, 0.05), 0 16px 38px rgba(16, 33, 64, 0.09);
  --shadow-glow: 0 10px 26px rgba(47, 107, 255, 0.22);
  --shadow-cyan: 0 10px 26px rgba(47, 107, 255, 0.16);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.45, 0, 0.15, 1);
  --t-fast: 180ms;  --t-med: 340ms;  --t-slow: 640ms;

  /* Z-index registry */
  --z-nav: 100;  --z-progress: 110;  --z-float: 120;
  --z-chatbot: 130;  --z-loader: 200;
}

/* ==========================================================================
   02. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  /* Structural guarantee: nothing can ever produce a horizontal scrollbar.
     `clip` is used rather than `hidden` because `hidden` on the root turns
     it into a scroll container and breaks position: sticky/fixed anchoring. */
  overflow-x: clip;
}

body {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-body);
  background-color: var(--c-void);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;      /* guarantee: no horizontal scroll, any width */
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul[role="list"], ol[role="list"] { list-style: none; }

/* Long words / URLs can never force a scrollbar */
p, h1, h2, h3, h4, li, blockquote, summary, label, strong { overflow-wrap: break-word; }

::selection { background: var(--c-blue); color: #FFF; }

/* ==========================================================================
   03. TYPOGRAPHY
   ========================================================================== */
h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--c-white);
  line-height: 1.14;
  letter-spacing: -0.022em;
  font-weight: 600;
  text-wrap: balance;
}

h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; }

p { max-width: 68ch; }

.lead { font-size: var(--fs-lead); line-height: 1.62; color: var(--c-body); }
.text-small { font-size: var(--fs-small); }
.text-muted { color: var(--c-muted); }

.text-signal {
  background: var(--g-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Mono eyebrow label */
.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-blue-text);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
}

.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--g-signal);
  flex-shrink: 0;
}

/* ==========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--w-container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: var(--w-narrow); }

.section { padding-block: var(--sp-section); position: relative; }
.section--alt { background-color: var(--c-carbon); }

.section__head {
  margin-bottom: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  max-width: 44rem;
}
.section__head .eyebrow { margin-bottom: var(--sp-4); }
.section__head h2       { margin-bottom: var(--sp-4); }

.signal-line {
  height: 1px;
  border: none;
  background: linear-gradient(90deg, transparent, rgba(47,107,255,.28) 30%, rgba(20,180,218,.28) 70%, transparent);
}

/* ==========================================================================
   05. AMBIENT LIGHT
   A single, still, wide radial wash. No particles, no nodes, no drifting
   shapes — light behaves like light on a physical surface.
   ========================================================================== */
.ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.ambient::before {
  content: "";
  position: absolute;
  top: -35%;
  right: -10%;
  width: min(78rem, 130%);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(47, 107, 255, 0.06) 0%,
      rgba(47, 107, 255, 0.025) 35%,
      transparent 68%);
}

.ambient::after {
  content: "";
  position: absolute;
  bottom: -45%;
  left: -20%;
  width: min(58rem, 110%);
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(20, 180, 218, 0.05) 0%,
      transparent 62%);
}

/* Subtle top-edge sheen — the "polished glass" cue */
.ambient--hero::before { top: -28%; }

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

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-4);
  z-index: calc(var(--z-loader) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-blue);
  color: #FFF;
  font-weight: 600;
  border-radius: var(--r-sm);
  transition: top var(--t-fast) var(--ease-out);
}
.skip-link:focus { top: var(--sp-4); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.no-scroll { overflow: hidden; }

/* ==========================================================================
   07. BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 44px;                 /* touch target floor */
  padding: 0.8125rem 1.75rem;
  border-radius: var(--r-pill);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-small);
  line-height: 1;
  white-space: nowrap;
  transition:
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-med) var(--ease-out),
    background-color var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out);
}
.btn:active { transform: scale(0.975); }
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }

.btn--primary { background: var(--c-blue); color: #FFF; }
.btn--primary:hover { background: var(--c-blue-deep); box-shadow: var(--shadow-glow); transform: translateY(-2px); }

.btn--ghost { border: 1px solid var(--c-line-strong); color: var(--c-white); background: #FFFFFF; }
.btn--ghost:hover { border-color: var(--c-blue); color: var(--c-blue-text); background: rgba(47, 107, 255, 0.05); transform: translateY(-2px); }

.btn--signal {
  color: #FFFFFF;
  border: 1px solid transparent;
  background-image: var(--g-signal);
  box-shadow: 0 8px 20px rgba(47, 107, 255, 0.22);
}
.btn--signal:hover { box-shadow: 0 12px 28px rgba(47, 107, 255, 0.30); transform: translateY(-2px); }

/* ==========================================================================
   08. NAVBAR
   ========================================================================== */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-nav);
  border-bottom: 1px solid transparent;
  transition: background-color var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}

.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 0 rgba(15, 30, 61, 0.04), 0 10px 30px rgba(16, 33, 64, 0.06);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
  height: var(--nav-h);
}

.nav__logo {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: 0.01em;
  color: var(--c-white);
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
  white-space: nowrap;
}

.nav__logo-mark {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--c-blue);
  letter-spacing: 0.14em;
}

.nav__links {
  display: none;
  align-items: center;
  gap: clamp(1.25rem, 2.2vw, 2rem);
  list-style: none;
}

.nav__link {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--c-body);
  position: relative;
  padding-block: var(--sp-2);
  transition: color var(--t-fast) var(--ease-out);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--g-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease-out);
}

.nav__link:hover, .nav__link.is-active { color: var(--c-white); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }

.nav__cta { display: none; }

.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
}

.nav__toggle-bar {
  width: 20px; height: 2px;
  background: var(--c-white);
  border-radius: 2px;
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-fast);
}

.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__menu {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: calc(var(--z-nav) - 1);
  background: rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  padding: var(--sp-7) var(--gutter) var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  overflow-y: auto;               /* short landscape phones can still scroll */
  overscroll-behavior: contain;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility 0s linear var(--t-med);
}

.nav__menu.is-open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility 0s;
}

.nav__menu .nav__link {
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 5vw, 1.5rem);
  color: var(--c-white);
}
.nav__menu .btn { margin-top: var(--sp-3); align-self: flex-start; }

@media (min-width: 900px) {
  .nav__links { display: flex; }
  .nav__cta   { display: inline-flex; }
  .nav__toggle, .nav__menu { display: none; }
}

/* ==========================================================================
   09. LOADER · PROGRESS · TO-TOP · FLOATING STACK
   ========================================================================== */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: var(--z-progress);
  width: 100%; height: 2px;
  background: var(--g-signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 90ms linear;
  pointer-events: none;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: var(--z-loader);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  background: var(--c-void);
  padding: var(--sp-5);
  transition: opacity 480ms var(--ease-smooth), visibility 0s linear 480ms;
}
.loader.is-done { opacity: 0; visibility: hidden; }

.loader__word {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  letter-spacing: 0.26em;
  padding-left: 0.26em;
  color: var(--c-white);
  text-align: center;
}

.loader__beam {
  width: min(200px, 60vw);
  height: 1px;
  background: var(--c-line);
  position: relative;
  overflow: hidden;
}
.loader__beam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--g-signal);
  transform: translateX(-100%);
  animation: loader-scan 1.1s var(--ease-smooth) infinite;
}

.loader__status {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.18em;
  color: var(--c-muted);
  text-transform: uppercase;
}

@keyframes loader-scan { to { transform: translateX(100%); } }

.to-top {
  position: fixed;
  left: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-float);
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: var(--shadow-card);
  color: var(--c-blue);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              border-color var(--t-fast),
              visibility 0s linear var(--t-med);
}
.to-top.is-visible {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              border-color var(--t-fast), visibility 0s;
}
.to-top:hover { border-color: var(--c-blue); color: var(--c-blue); }
.to-top svg { width: 18px; height: 18px; }

.float-stack {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: var(--z-float);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-3);
}

.float-btn {
  width: 50px; height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: #FFFFFF;
  color: var(--c-blue);
  box-shadow: var(--shadow-card);
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-fast);
}
.float-btn:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 33, 64, 0.14); }
.float-btn svg { width: 21px; height: 21px; }

.float-btn--whatsapp { color: var(--c-success); }
.float-btn--whatsapp:hover { border-color: var(--c-success); box-shadow: 0 12px 30px rgba(22, 163, 74, 0.22); }
.float-btn--call { color: var(--c-blue); }
.float-btn--call:hover { border-color: var(--c-blue); box-shadow: var(--shadow-glow); }

/* ==========================================================================
   10. CARDS
   ========================================================================== */
.card {
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  box-shadow: var(--shadow-soft);
  transition: transform var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out);
}
.card:hover {
  transform: translateY(-4px);
  border-color: rgba(47, 107, 255, 0.35);
  box-shadow: var(--shadow-card);
}

/* Hover lift only where a pointer actually exists */
@media (hover: none) {
  .card:hover { transform: none; }
  .btn:hover, .float-btn:hover { transform: none; }
}

/* ==========================================================================
   11. HOME — HERO
   ========================================================================== */
.hero {
  min-height: min(100svh, 52rem);
  display: flex;
  align-items: center;
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4.5rem));
  padding-bottom: clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  position: relative;
}

.hero__inner {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  z-index: 1;
}

/* Text stack — one column on mobile, left column on desktop */
.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
  min-width: 0;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
  }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  max-width: 18ch;
}

.hero__lead { max-width: 54ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  width: 100%;
}

/* Phones: full-width, evenly sized CTAs read as a deliberate pair rather
   than two ragged pills, and give a much larger tap area. */
@media (max-width: 519px) {
  .hero__actions .btn,
  .svc-hero__actions .btn,
  .svc-cta__actions .btn { flex: 1 1 100%; }
  .svc-hero__actions, .svc-cta__actions { width: 100%; }
}

/* Trust row — replaces the old decorative canvas with real information */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--c-line);
  width: 100%;
  max-width: 46rem;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.hero__trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.hero__trust li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-blue);
  flex-shrink: 0;
}

/* ==========================================================================
   12. HOME — SECTIONS
   ========================================================================== */

/* --- Intro + stats --- */
.intro__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
.intro__copy h2 { margin-block: var(--sp-4); }
.intro__copy p + p { margin-top: var(--sp-4); }

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
  align-content: start;
}

.stat {
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: clamp(1rem, 3vw, 1.5rem);
  box-shadow: var(--shadow-soft);
}

.stat__num {
  font-family: var(--f-display);
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  font-weight: 700;
  color: var(--c-white);
  line-height: 1;
  letter-spacing: -0.03em;
}

.stat__num em {
  font-style: normal;
  background: var(--g-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.stat__label {
  margin-top: var(--sp-2);
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-muted);
  text-transform: uppercase;
}

@media (min-width: 900px) {
  .intro__grid { grid-template-columns: 1.25fr 1fr; align-items: center; }
}

/* --- Why grid --- */
.why-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.why-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: rgba(47, 107, 255, 0.08);
  border: 1px solid rgba(47, 107, 255, 0.16);
  color: var(--c-blue);
  margin-bottom: var(--sp-4);
}
.why-card__icon svg { width: 20px; height: 20px; }
.why-card h3 { margin-bottom: var(--sp-3); }
.why-card p { font-size: var(--fs-small); }

@media (min-width: 640px)  { .why-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .why-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Services grid --- */
.services-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

/* The whole card is a link target. Positioned so the link's stretched
   ::after can cover it, while inner content stays above that hit layer. */
.service-card { display: flex; flex-direction: column; position: relative; }

.service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}

.service-card__index {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--c-muted);
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: rgba(47, 107, 255, 0.08);
  border: 1px solid rgba(47, 107, 255, 0.14);
  color: var(--c-blue);
}
.service-card__icon svg { width: 22px; height: 22px; }

.service-card h3 { margin-bottom: var(--sp-3); }
.service-card p { font-size: var(--fs-small); margin-bottom: var(--sp-5); flex: 1; }

.service-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  align-self: flex-start;
  min-height: 44px;
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-white);
  transition: color var(--t-fast) var(--ease-out);
}
.service-card__link svg {
  width: 15px; height: 15px;
  /* Continuous attract loop — the arrow drifts to keep drawing the eye. */
  animation: explore-nudge 1.8s var(--ease-smooth) infinite;
}

/* Stretched link: expand the anchor's hit area to the entire card so a
   click (or tap) anywhere opens the service page. The real <a> stays in
   the DOM, so it remains keyboard-focusable and screen-reader friendly. */
.service-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* Card-level hover feeds the arrow, and the whole card shows it's live. */
.service-card:hover .service-card__link { color: var(--c-blue-text); }
.service-card:hover .service-card__link svg { animation: none; transform: translateX(4px); }
.service-card:hover { cursor: pointer; }

/* Keyboard focus lands on the link; show the ring on the whole card. */
.service-card:focus-within {
  border-color: rgba(47, 107, 255, 0.5);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18);
}
.service-card__link:focus-visible { outline: none; }

@keyframes explore-nudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .service-card__link svg { animation: none; }
}

@media (min-width: 640px)  { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .services-grid { grid-template-columns: repeat(3, 1fr); } }

/* --- Process --- */
.process-list {
  display: grid;
  gap: var(--sp-5);
  list-style: none;
  counter-reset: step;
}

.process-step {
  position: relative;
  padding-left: var(--sp-6);
  border-left: 1px solid var(--c-line);
  padding-bottom: var(--sp-2);
}

.process-step::before {
  content: "";
  position: absolute;
  left: -5px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--c-blue);
  border: 2px solid var(--c-void);
  box-shadow: 0 0 0 1px rgba(47, 107, 255, 0.25);
}

.process-step__num {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--c-blue-text);
  display: block;
  margin-bottom: var(--sp-2);
}

.process-step h3 { margin-bottom: var(--sp-2); }
.process-step p  { font-size: var(--fs-small); }

@media (min-width: 768px)  { .process-list { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); } }
@media (min-width: 1100px) { .process-list { grid-template-columns: repeat(5, 1fr); gap: var(--sp-4); } }

/* --- Testimonials marquee --- */
.t-marquee {
  position: relative;
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  overflow: hidden;
}

.t-marquee__viewport {
  overflow: hidden;
  cursor: grab;
  /* let vertical scroll pass through; we handle horizontal drag in JS */
  touch-action: pan-y;
}
.t-marquee__viewport.is-dragging { cursor: grabbing; }

.t-marquee__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  padding-inline: var(--gutter);
  will-change: transform;
}

/* Auto-scroll via transform driven in JS (rAF), so drag and auto share
   one positioning model and never fight each other. */

.t-card {
  flex: 0 0 auto;
  width: min(20rem, 82vw);
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  user-select: none;               /* clean dragging */
  -webkit-user-select: none;
}

.t-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-blue-text);
  background: rgba(47, 107, 255, 0.07);
  border: 1px solid rgba(47, 107, 255, 0.18);
  border-radius: var(--r-pill);
  padding: 0.25rem 0.625rem;
  margin-bottom: var(--sp-4);
}

.t-card__quote {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--c-body);
  flex: 1;
  position: relative;
  padding-top: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.t-card__quote::before {
  content: "\201C";
  position: absolute;
  top: -0.25rem; left: -0.25rem;
  font-family: var(--f-display);
  font-size: 3rem;
  line-height: 1;
  opacity: 0.28;
  background: var(--g-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.t-card__foot {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.t-card__avatar {
  width: 40px; height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--g-signal);
  color: #FFFFFF;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.875rem;
}

.t-card__meta { display: flex; flex-direction: column; min-width: 0; }
.t-card__name { font-family: var(--f-display); font-weight: 600; color: var(--c-white); font-size: var(--fs-small); }
.t-card__place { font-size: var(--fs-label); color: var(--c-muted); font-family: var(--f-mono); letter-spacing: 0.04em; }

/* Soft fade at both edges so cards enter/leave gracefully */
.t-marquee__edge {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(2rem, 8vw, 6rem);
  pointer-events: none;
  z-index: 1;
}
.t-marquee__edge--left  { left: 0;  background: linear-gradient(90deg, var(--c-void), rgba(255,255,255,0)); }
.t-marquee__edge--right { right: 0; background: linear-gradient(270deg, var(--c-void), rgba(255,255,255,0)); }
.section--alt .t-marquee__edge--left  { background: linear-gradient(90deg, var(--c-carbon), transparent); }
.section--alt .t-marquee__edge--right { background: linear-gradient(270deg, var(--c-carbon), transparent); }

/* --- FAQ --- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 52rem;
}

.faq-item {
  background: var(--c-graphite);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.faq-item:hover { border-color: var(--c-line-strong); }
.faq-item[open] { border-color: rgba(47, 107, 255, 0.28); }

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--sp-4) var(--sp-5);
  min-height: 44px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  width: 10px; height: 10px;
  flex-shrink: 0;
  border-right: 2px solid var(--c-blue);
  border-bottom: 2px solid var(--c-blue);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-med) var(--ease-out);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.faq-item p {
  padding: 0 var(--sp-5) var(--sp-5);
  font-size: var(--fs-small);
  max-width: 70ch;
}

/* --- Contact --- */
.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-line);
  background: var(--c-graphite);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--t-fast), transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast);
}
a.contact-channel:hover { border-color: rgba(47, 107, 255, 0.4); transform: translateX(3px); }

.contact-channel svg { width: 22px; height: 22px; color: var(--c-blue); flex-shrink: 0; }
.contact-channel span {
  display: block;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.contact-channel strong {
  display: block;
  font-weight: 500;
  color: var(--c-white);
  font-size: var(--fs-small);
  overflow-wrap: anywhere;      /* long emails never overflow on 320px */
}

@media (min-width: 900px) { .contact-grid { grid-template-columns: 1fr 1.15fr; } }

/* ==========================================================================
   13. FORMS
   ========================================================================== */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }

.form__row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }

.form__field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.form__field label {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.form__field input,
.form__field select,
.form__field textarea {
  width: 100%;
  padding: 0.8125rem var(--sp-4);
  min-height: 46px;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-line-strong);
  background: var(--c-void);
  color: var(--c-white);
  font-size: 1rem;              /* 16px: prevents iOS zoom-on-focus */
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.form__field textarea { min-height: 8rem; resize: vertical; }

.form__field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--c-blue) 50%),
                    linear-gradient(135deg, var(--c-blue) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 15px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}
.form__field select option { background: var(--c-graphite); color: var(--c-white); }

.form__field input:focus,
.form__field select:focus,
.form__field textarea:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.18);
}

.form__field input[aria-invalid="true"],
.form__field textarea[aria-invalid="true"] { border-color: var(--c-error); }

.form__error {
  display: none;
  font-size: var(--fs-label);
  color: var(--c-error);
}
.form__field.has-error .form__error { display: block; }

/* Honeypot — visually gone, never focusable */
.form__hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.form .btn { align-self: flex-start; }

.form__status {
  font-size: var(--fs-small);
  min-height: 1.25rem;
}
.form__status.is-success { color: var(--c-success); }
.form__status.is-error   { color: var(--c-error); }

/* ==========================================================================
   14. SERVICE PAGES
   ========================================================================== */
.svc-hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  position: relative;
  overflow: hidden;
}

.svc-hero__inner { position: relative; z-index: 1; }

.svc-hero__crumb {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-5);
}
.svc-hero__crumb a { color: var(--c-muted); transition: color var(--t-fast); }
.svc-hero__crumb a:hover { color: var(--c-blue-text); }

.svc-hero h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  letter-spacing: -0.028em;
  max-width: 20ch;
  margin-bottom: var(--sp-4);
}
.svc-hero .lead { max-width: 58ch; }

.svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.svc-overview { display: grid; gap: var(--sp-6); }
.svc-overview p + p { margin-top: var(--sp-4); }
@media (min-width: 900px) { .svc-overview { grid-template-columns: 1fr 1fr; gap: var(--sp-8); } }

.svc-features {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.svc-feature h3 {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.svc-feature h3::before {
  content: "";
  width: 6px; height: 6px;
  margin-top: 0.5rem;
  border-radius: 50%;
  background: var(--g-signal);
  flex-shrink: 0;
}

.svc-feature p { font-size: var(--fs-small); }

@media (min-width: 640px)  { .svc-features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .svc-features { grid-template-columns: repeat(3, 1fr); } }

.svc-benefits {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

.svc-benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: var(--fs-small);
}

.svc-benefit svg {
  width: 18px; height: 18px;
  color: var(--c-blue);
  flex-shrink: 0;
  margin-top: 3px;
}

@media (min-width: 640px) { .svc-benefits { grid-template-columns: repeat(2, 1fr); } }

.svc-cta {
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px solid rgba(47, 107, 255, 0.16);
  background: linear-gradient(180deg, #F7FAFF 0%, #EEF4FF 100%);
  padding: clamp(2rem, 5vw, 3.5rem) var(--gutter);
  position: relative;
  overflow: hidden;
}

.svc-cta h2 { margin-bottom: var(--sp-3); }
.svc-cta p  { margin-inline: auto; margin-bottom: var(--sp-6); }

.svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

/* ==========================================================================
   15. PROSE PAGES (legal)
   ========================================================================== */
.page-hero {
  padding-top: calc(var(--nav-h) + clamp(2.5rem, 6vw, 4rem));
  padding-bottom: var(--sp-7);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero .eyebrow { margin-bottom: var(--sp-4); }
.page-hero h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  margin-bottom: var(--sp-3);
}
.page-hero .text-muted {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
}

.prose { padding-block: var(--sp-8) var(--sp-9); }

.prose h2 { font-size: var(--fs-h3); margin-top: var(--sp-7); margin-bottom: var(--sp-4); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: var(--sp-4); }

.prose ul {
  margin: 0 0 var(--sp-5) 1.25rem;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.prose li::marker { color: var(--c-blue); }

.prose a {
  color: var(--c-blue-text);
  border-bottom: 1px solid rgba(47, 107, 255, 0.35);
  transition: border-color var(--t-fast);
  overflow-wrap: anywhere;
}
.prose a:hover { border-bottom-color: var(--c-blue); }
.prose strong { color: var(--c-white); font-weight: 600; }

/* ==========================================================================
   16. 404
   ========================================================================== */
.notfound {
  min-height: 100svh;
  display: flex;
  align-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
  padding-block: calc(var(--nav-h) + 3rem) var(--sp-8);
}

.notfound__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  position: relative;
  z-index: 1;
}

.notfound__code {
  font-family: var(--f-mono);
  font-size: clamp(4rem, 15vw, 8rem);
  font-weight: 500;
  line-height: 1;
  background: var(--g-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */
.footer {
  background: var(--c-carbon);
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-8) var(--sp-6);
}

.footer__grid {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  margin-bottom: var(--sp-8);
}

.footer__brand p {
  margin-top: var(--sp-4);
  font-size: var(--fs-small);
  max-width: 36ch;
}

.footer__title {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-4);
}

.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.footer__list a, .footer__list span {
  font-size: var(--fs-small);
  color: var(--c-body);
  transition: color var(--t-fast) var(--ease-out);
  overflow-wrap: anywhere;
}
.footer__list a:hover { color: var(--c-blue-text); }

.footer__bottom {
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.footer__legal { display: flex; flex-wrap: wrap; gap: var(--sp-5); }
.footer__bottom a:hover { color: var(--c-blue-text); }

@media (min-width: 640px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 900px) {
  .footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; }
  .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ==========================================================================
   18. CHATBOT — "GURU"
   ========================================================================== */

/* --- Launcher --- */
.gc-launcher {
  position: relative;
  width: 50px; height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background-image: var(--g-signal);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(47, 107, 255, 0.30);
  transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
}
.gc-launcher:hover { transform: translateY(-3px); box-shadow: var(--shadow-cyan); }
.gc-launcher svg { width: 22px; height: 22px; }
.gc-launcher.is-hidden { display: none; }

/* --- Teaser popup: appears after 3s, points at the launcher --- */
.gc-teaser {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-md);
  background: #FFFFFF;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--c-line-strong);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility 0s linear var(--t-med);
}

.gc-teaser.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility 0s;
  animation: gc-teaser-nudge 2.4s var(--ease-smooth) 400ms 2;
}

/* Arrow pointing right, at the launcher */
.gc-teaser::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: #FFFFFF;
}

.gc-teaser__title {
  font-family: var(--f-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--c-white);
  line-height: 1.3;
}

.gc-teaser__cta {
  font-family: var(--f-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--g-signal);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.3;
}

@keyframes gc-teaser-nudge {
  0%, 100% { transform: translateY(-50%) translateX(0); }
  50%      { transform: translateY(-50%) translateX(-4px); }
}

/* Very narrow screens: keep the teaser on-screen */
@media (max-width: 380px) {
  .gc-teaser { right: calc(100% + 10px); padding: 0.5rem 0.6875rem; }
}

/* --- Window --- */
.gc-window {
  position: fixed;
  z-index: var(--z-chatbot);
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  box-shadow: 0 24px 70px rgba(16, 33, 64, 0.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility 0s linear var(--t-med);

  /* Mobile: full screen, dvh handles the browser chrome correctly */
  inset: 0;
  height: 100dvh;
  border-radius: 0;
}

.gc-window.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  transition: opacity var(--t-med) var(--ease-out),
              transform var(--t-med) var(--ease-out),
              visibility 0s;
}

@media (min-width: 560px) {
  .gc-window {
    inset: auto var(--sp-4) calc(var(--sp-4) + 62px) auto;
    width: 390px;
    height: min(600px, calc(100dvh - 140px));
    border-radius: var(--r-lg);
  }
}

/* --- Header --- */
.gc-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-carbon);
  flex-shrink: 0;
}

.gc-head__avatar {
  width: 34px; height: 34px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--g-signal);
  color: #FFFFFF;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.gc-head__meta { flex: 1; min-width: 0; }

.gc-head__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--c-white);
  line-height: 1.2;
}

.gc-head__status {
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--c-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.gc-head__status::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--c-success);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.gc-close {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  color: var(--c-body);
  flex-shrink: 0;
  transition: color var(--t-fast), background-color var(--t-fast);
}
.gc-close:hover { color: var(--c-white); background: rgba(15, 30, 61, 0.06); }
.gc-close svg { width: 18px; height: 18px; }

/* --- Log --- */
.gc-log {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.gc-msg {
  max-width: 84%;
  padding: 0.625rem 0.875rem;
  border-radius: var(--r-md);
  font-size: var(--fs-small);
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.gc-msg--bot {
  align-self: flex-start;
  background: var(--c-carbon);
  border: 1px solid var(--c-line);
  color: var(--c-body);
  border-bottom-left-radius: 4px;
}

.gc-msg--user {
  align-self: flex-end;
  background: var(--c-blue);
  color: #FFF;
  border-bottom-right-radius: 4px;
}

.gc-msg a {
  color: var(--c-blue-text);
  border-bottom: 1px solid rgba(47, 107, 255, 0.4);
}
.gc-msg--user a { color: #FFF; border-bottom-color: rgba(255, 255, 255, 0.5); }

/* --- Typing --- */
.gc-typing {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0.75rem 0.875rem;
  border-radius: var(--r-md);
  background: var(--c-carbon);
  border: 1px solid var(--c-line);
}

.gc-typing span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-muted);
  animation: gc-blink 1.2s infinite;
}
.gc-typing span:nth-child(2) { animation-delay: 0.18s; }
.gc-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes gc-blink {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* --- Quick replies --- */
.gc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0 var(--sp-5) var(--sp-3);
  flex-shrink: 0;
}

.gc-chip {
  padding: 0.4375rem 0.75rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: #FFFFFF;
  color: var(--c-body);
  font-size: var(--fs-label);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.gc-chip:hover { border-color: var(--c-blue); color: var(--c-blue-text); background: rgba(47, 107, 255, 0.05); }

/* --- Composer --- */
.gc-composer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  border-top: 1px solid var(--c-line);
  background: var(--c-carbon);
  flex-shrink: 0;
}

.gc-composer .gc-input {
  flex: 1;
  min-width: 0;
  padding: 0.6875rem var(--sp-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: #FFFFFF;
  color: var(--c-white);
  font-size: 1rem;              /* prevents iOS zoom */
}
.gc-composer .gc-input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.16);
}

.gc-send {
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--c-blue);
  color: #FFF;
  flex-shrink: 0;
  transition: background-color var(--t-fast), transform var(--t-fast);
}
.gc-send:hover { background: var(--c-blue-deep); }
.gc-send:active { transform: scale(0.94); }
.gc-send svg { width: 17px; height: 17px; }

/* ==========================================================================
   19. MOTION & REVEAL SYSTEM
   ========================================================================== */
[data-reveal],
[data-reveal-group] > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--t-slow) var(--ease-out),
              transform var(--t-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

[data-reveal="fade"]  { transform: none; }
[data-reveal="scale"] { transform: scale(0.96); }

/* Horizontal slide-ins are a desktop affordance. On narrow screens the
   pre-animation offset would push past the viewport edge and create a
   horizontal scrollbar, so below 900px these rise like everything else. */
[data-reveal="left"],
[data-reveal="right"] { transform: translateY(22px); }

@media (min-width: 900px) {
  [data-reveal="left"]  { transform: translateX(-26px); }
  [data-reveal="right"] { transform: translateX(26px); }
}

.is-revealed,
[data-reveal-group].is-revealed > * { opacity: 1; transform: none; }

.reveal-done,
[data-reveal-group].reveal-done > * { will-change: auto; }

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }

  [data-reveal],
  [data-reveal-group] > * { opacity: 1; transform: none; }

  .gc-teaser.is-visible { animation: none; }
}

/* ==========================================================================
   22. LOGO IMAGE (navbar + footer) — official GURU AI TECHNOLOGIES logo
   ========================================================================== */
.nav__logo-img { height: 34px; width: auto; display: block; }
@media (min-width: 640px) { .nav__logo-img { height: 38px; } }

/* ==========================================================================
   23. SHOWCASE VISUAL — framed product-preview panels
   Content images (with their own baked-in UI/text) are presented inside a
   device-style frame so they read as previews, never competing heroes.
   ========================================================================== */
.showcase {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-line);
  background: var(--c-carbon);
  box-shadow: var(--shadow-card);
  /* No fixed aspect-ratio: the image defines its own height so nothing is
     ever silently cropped. Sources vary between 16:9 and 3:2. */
}
.showcase__img {
  width: 100%;
  height: auto;
  display: block;
}

/* Clickable variant — opens the full-resolution graphic in the lightbox */
.showcase--zoomable { cursor: zoom-in; }
.showcase--zoomable:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 3px; }

.showcase__zoom {
  position: absolute;
  right: var(--sp-3);
  bottom: var(--sp-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.875rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--c-line-strong);
  color: var(--c-white);
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.showcase__zoom svg { width: 13px; height: 13px; }
.showcase--zoomable:hover .showcase__zoom,
.showcase--zoomable:focus-visible .showcase__zoom { opacity: 1; transform: translateY(0); }
/* Touch devices have no hover — keep the affordance permanently visible */
@media (hover: none) {
  .showcase__zoom { opacity: 1; transform: none; }
}

/* Slow premium sheen sweep (respects reduced motion) */
.showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(47, 107, 255,0.05) 50%, transparent 60%);
  transform: translateX(-100%);
  animation: showcase-sheen 7s var(--ease-smooth) infinite;
  pointer-events: none;
}
@keyframes showcase-sheen { 0%,100%{transform:translateX(-100%);} 50%{transform:translateX(100%);} }

/* --------------------------------------------------------------------------
   Native hero preview — a lightweight, honest product mock rendered in SVG.
   No raster asset, no invented metrics: pure vector UI that scales crisply
   and costs nothing extra to download.
   -------------------------------------------------------------------------- */
.hero-preview {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-line);
  background: #FFFFFF;
  box-shadow: 0 30px 70px rgba(16, 33, 64, 0.12), 0 2px 6px rgba(16, 33, 64, 0.05);
  overflow: hidden;
}
.hero-preview svg { display: block; width: 100%; height: auto; }

/* Home hero visual — desktop only, so mobile hero layout is unchanged */
/* Hero visual — hidden on phones (the copy leads there), shown from the
   laptop breakpoint up as the grid's second column. Being a real grid item
   means it can never overlap the text at any width. */
.hero__visual { display: none; }
@media (min-width: 1024px) {
  .hero__visual { display: block; min-width: 0; pointer-events: none; }
  .hero__title  { max-width: 15ch; }
  .hero__lead   { max-width: 46ch; }
}

/* Service-page + home section visuals.
   Wider than the text column so the artwork feels impactful. On large screens
   the frame keeps growing toward the asset's native 1600px width, so the UI
   inside renders close to 1:1 instead of being shrunk to ~60%. */
.svc-showcase .showcase,
.section-visual .showcase {
  max-width: min(100%, 78rem);
  margin-inline: auto;
}
.section-visual { margin-top: clamp(2rem, 4vw, 3rem); }

/* Tablet / small-laptop range (768–1279px) is served the focused crop, whose
   native width is ~600px. Cap the frame there so the crop renders near 1:1
   and stays crisp instead of being upscaled and going soft. */
@media (min-width: 768px) and (max-width: 1279px) {
  .svc-showcase .showcase,
  .section-visual .showcase { max-width: 40rem; }
}

/* Progressive break-out past the text container on wider viewports */
@media (min-width: 1280px) {
  .svc-showcase > .container,
  .section-visual {
    max-width: 84rem;
    margin-inline: auto;
  }
  .svc-showcase .showcase,
  .section-visual .showcase { max-width: min(100%, 84rem); }
}
@media (min-width: 1600px) {
  .svc-showcase > .container,
  .section-visual {
    max-width: 100rem;
  }
  /* 100rem = 1600px, the native width of the source artwork */
  .svc-showcase .showcase,
  .section-visual .showcase { max-width: min(100%, 100rem); }
}

/* ==========================================================================
   23b. LIGHTBOX — full-resolution graphic viewer
   Opens the original (uncropped) asset so no detail is ever lost.
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2.5rem);
  background: rgba(12, 22, 44, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s linear var(--t-med);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--t-med) var(--ease-out), visibility 0s;
}
.lightbox__figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  transform: scale(0.97);
  transition: transform var(--t-med) var(--ease-out);
}
.lightbox.is-open .lightbox__figure { transform: scale(1); }

.lightbox__img {
  max-width: 100%;
  /* Leave room for the caption and close button */
  max-height: calc(100vh - 9rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--c-line-strong);
  background: var(--c-graphite);
}
.lightbox__caption {
  font-size: var(--fs-small);
  color: var(--c-body);
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
}
.lightbox__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.5rem);
  right: clamp(0.75rem, 2vw, 1.5rem);
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  color: var(--c-white);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.lightbox__close:hover { border-color: var(--c-blue); color: var(--c-blue); }
.lightbox__close svg { width: 20px; height: 20px; }

.lightbox__hint {
  display: none;
  font-family: var(--f-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}

/* On phones/tablets a 1600px graphic scaled to fit is unreadable, so the
   lightbox instead presents it at (near) native size inside a pannable,
   pinch-zoomable surface. Users drag to explore the detail. */
@media (max-width: 1023px) {
  .lightbox {
    align-items: flex-start;
    justify-content: flex-start;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 4rem 1rem 2rem;
  }
  .lightbox__figure {
    max-width: none;
    max-height: none;
    margin-inline: auto;
  }
  .lightbox__img {
    max-width: none;
    max-height: none;
    /* Near-native width: legible detail, pan to explore */
    width: 1280px;
  }
  .lightbox__caption { max-width: 1280px; }
  .lightbox__hint { display: block; }
}

/* On short/landscape phones let the image scroll rather than overflow */
@media (max-height: 520px) {
  .lightbox { overflow-y: auto; }
  .lightbox__img { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .showcase::after { animation: none; }
  .lightbox, .lightbox__figure { transition: none; }
}

/* ==========================================================================
   24. EXPAND / COLLAPSE — premium "View All" pattern
   Used on Why GURU AI, Services, and Process to shorten mobile scroll length
   without touching their existing card/grid styling. Grid-template-rows
   0fr->1fr gives a smooth height animation with no JS height calculation
   and no layout thrash.
   ========================================================================== */
.expand-region {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 480ms var(--ease-smooth);
}
.expand-region > .expand-region__inner {
  overflow: hidden;
  min-height: 0;
}
.expand-region.is-open {
  grid-template-rows: 1fr;
}

/* The revealed items inside an expand region should not wait for their own
   scroll-triggered reveal (they're already in view the moment it opens);
   animations.js flips them visible immediately when the region opens. */
.expand-region [data-reveal],
.expand-region [data-reveal-group] > * {
  transition-duration: 380ms;
}

.expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding: 0.75rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: #FFFFFF;
  color: var(--c-white);
  box-shadow: var(--shadow-soft);
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-small);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.expand-toggle:hover { border-color: var(--c-blue); color: var(--c-blue-text); background: rgba(47, 107, 255, 0.04); }
.expand-toggle svg {
  width: 16px; height: 16px;
  transition: transform var(--t-med) var(--ease-out);
}
.expand-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.expand-toggle-wrap {
  display: flex;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  .expand-region { transition: none; }
  .expand-toggle svg { transition: none; }
}