/* ════════════════════════════════════════════════════════════════
   AGENTIC INTEGRATIONS - styles.css
   Homepage (index.html) + shared tokens for privacy-policy.html.
   The 4 sub-pages (services / faq / about-us / contact) use pages.css.
   All sizing in %/vw/vh/clamp where possible so the layout holds at
   any aspect ratio.
   ════════════════════════════════════════════════════════════════ */

/* ---- Fonts ---- */
@font-face {
  font-family: 'DM Serif Display';
  src: url('assets/Fonts/DMSerifDisplay.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'TimesNR';
  /* Times New Roman ships on nearly every OS - use the locally installed copy
     first so most devices skip the 133KB download; fall back to the TTF only
     when it's missing (some Linux/Android). local() names cover Win/macOS/iOS. */
  src: local('Times New Roman'), local('TimesNewRomanPSMT'),
       url('assets/Fonts/times-new-roman-regular_ufonts.com.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

/* ---- Design tokens ---- */
:root {
  --cream: #FFEBC6;
  --brg:  #002b21;
  --mint:  #adebb3;
  --gold:  #CC9200;

  --serif: 'DM Serif Display', Georgia, serif;   /* titles / labels  */
  --body:  'TimesNR', 'Times New Roman', serif;   /* descriptions     */

  --radius: clamp(14px, 1.6vw, 22px);
  --section-pad-y: clamp(4rem, 9vh, 8rem);
  --maxw: 1400px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --badge-top: clamp(0.9rem, 2vw, 1.4rem);
  --badge-size: clamp(135px, 11.7vw, 171px);
}

/* ---- Reset ---- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  color: var(--cream);
  background: #05070d;            /* fallback behind the bg image */
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* ---- Corner logo badge (all pages) ---- */
.logo-badge {
  position: fixed;
  top: var(--badge-top);
  left: var(--badge-top);
  z-index: 50;
  width: var(--badge-size);
  height: var(--badge-size);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  /* hidden until app.js's positionLogoBadge() places it and reveals it -
     avoids a flash at this default corner spot that then jumps to its
     real (measured) position */
  visibility: hidden;
}
/* Circle housing on its own layer so it can fade independently of the
   svg, which stays at 100% opacity always (see bg-shader.js). */
.logo-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--brg);
  box-shadow: inset 0 0 0 1px var(--cream);
  opacity: var(--badge-fade, 1);
  z-index: -1;
}
.logo-badge img { width: 100%; height: 100%; position: relative; }

/* ════════════════════════════════════════════════════════════════
   BACKGROUND IMAGE (fixed - never moves) + readability veil
   ════════════════════════════════════════════════════════════════ */
.bg-image-wrap {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bg-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bg-veil {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.25) 30%, rgba(0,0,0,0.35) 70%, rgba(0,0,0,0.6) 100%);
}

/* Everything above the bg image/particles */
main, .footer { position: relative; z-index: 2; }

/* ════════════════════════════════════════════════════════════════
   SECTIONS (shared)
   ════════════════════════════════════════════════════════════════ */
.section {
  width: min(94%, var(--maxw));
  margin: 0 auto;
  padding: var(--section-pad-y) 0;
}
.section-head { margin-bottom: clamp(2rem, 5vh, 3.5rem); text-align: center; }
.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 5vw, 3.6rem);
  line-height: 1.05;
}
.section-sub {
  font-family: var(--body);
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  opacity: 0.8;
  margin-top: 0.6rem;
}

/* ════════════════════════════════════════════════════════════════
   HERO - nav links at the top, particle title
   ════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  height: 100vh;
  min-height: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;            /* nav links above the particle canvas (z-index:1) */

  /* shared geometry for the two "eyebrows" (.hero-hint above the particle
     title, .hero-eyebrow below it) so both can be pinned relative to the
     title itself instead of eyeballed absolute values. */
  --title-h: calc(min(19.44vw, 281px) + min(8.64vw, 130px));
  --title-top: calc((100vh - var(--title-h)) / 2);
  --title-bottom: calc((100vh + var(--title-h)) / 2);
  --nav-bottom: calc(clamp(1rem, 2.5vh, 2rem) + 5.58vw);
}
/* Site navigation: 4 plain text links hugging the top - no bar, no boxes.
   Fixed + vertically centered on the logo badge's own center (badge-top +
   half its height), instead of flowing in .hero, so the two stay level
   regardless of viewport size. */
.hero-pills {
  position: fixed;
  top: calc(var(--badge-top) + var(--badge-size) / 2);
  left: 0;
  transform: translateY(-50%);
  z-index: 40;
  width: 100%;
  display: flex;
  flex-wrap: nowrap;        /* always one line */
  justify-content: center;
  font-size: 3.6vw;         /* ONE scale knob - the links are em-based */
  gap: 2.5em;
}
.hero-pill {
  font-family: var(--serif);
  font-size: 1em;           /* inherits the nav's vw scale */
  color: var(--cream);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
  opacity: 0.9;
  transition: opacity 0.25s var(--ease);
  user-select: none;
  -webkit-user-drag: none;
}
.hero-pill:hover { opacity: 1; }

/* Hint pointing at the click-and-hold interaction, pinned above the particle
   title ("Agentic" line 1). Positioned twice as close to the title as before:
   originally sat 75% of the way down the nav→title gap (25% of the gap short
   of the title); now 87.5% of the way down (12.5% short - half that distance).
   Desktop/laptop only (see @media below), since touch uses a tap-explosion
   instead and has no "hold" gesture to advertise. */
.hero-hint {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(var(--title-top) - (var(--title-top) - var(--nav-bottom)) * 0.125);
  font-family: var(--body);
  color: var(--cream);
  opacity: 0.5;
  font-size: clamp(1.2rem, 1.65vw, 1.425rem);
  letter-spacing: 0.4px;
  user-select: none;
  -webkit-user-drag: none;
}

/* Sits below the particle title, twice as close to its bottom edge as
   before: was the midpoint between the title's bottom edge and the scroll
   cue (an empirically-picked 78vh); now halfway between that old position
   and the title's bottom edge, halving the gap. */
.hero-eyebrow {
  position: absolute;
  top: calc((78vh + var(--title-bottom)) / 2);
  left: 50%;
  transform: translateX(-50%);
  width: min(90%, 800px);
  white-space: nowrap;
  text-align: center;
  font-family: var(--body);
  font-weight: 700;
  color: var(--cream);
  font-size: clamp(1.9rem, 3.2vw, 2.3rem);
  letter-spacing: 0.4px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75);
  user-select: none;
  -webkit-user-drag: none;
}

/* scroll cue: cream label + chevron pinned to the hero's bottom, gentle bob */
.scroll-cue {
  margin-top: auto;                 /* flex column → pushed to the hero's bottom */
  margin-bottom: clamp(3.5rem, 9vh, 6.5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  color: var(--cream);
  animation: cue-bob 2.4s var(--ease) infinite;
  user-select: none;
  -webkit-user-drag: none;
}
.scroll-cue-text {
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.4vw, 1.15rem);
  letter-spacing: 0.4px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.scroll-cue-chevron {
  width: 0.85em;
  height: 0.85em;
  border-right: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  transform: rotate(45deg);         /* a square's corner becomes the chevron */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
/* ════════════════════════════════════════════════════════════════
   PROCESS - numbered vertical list, animated in on scroll
   ════════════════════════════════════════════════════════════════ */
.process-list {
  list-style: none;
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1.6rem, 4vh, 3rem);
}
.process-item {
  display: grid;
  grid-template-columns: clamp(3rem, 7vw, 6rem) 1fr;
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
}
.process-num {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  line-height: 1;
  opacity: 1;
}
.process-stage {
  font-family: var(--serif);
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.process-desc {
  font-family: var(--body);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  opacity: 0.86;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.footer {
  width: min(94%, var(--maxw));
  margin: 0 auto;
  padding: clamp(2.5rem, 6vh, 5rem) 0 clamp(2rem, 4vh, 3rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.4rem, 4vh, 2.4rem);
  text-align: center;
}
.footer-people {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 2vw, 1.4rem);
  justify-content: center;
}
.li-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7em 1.3em;
  border-radius: 999px;
  font-family: var(--body);
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.li-btn:hover { transform: translateY(-2px); background: rgba(255,255,255,0.16); }
.li-icon {
  display: inline-block;
  width: 1.25em; height: 1.25em;
  color: var(--cream);
  flex-shrink: 0;
}
.li-icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }

.footer-meta { display: flex; flex-direction: column; gap: 0.5rem; opacity: 0.85; font-family: var(--body); }
.footer-meta a { text-decoration: underline; text-underline-offset: 3px; }
.footer-copy { opacity: 0.7; font-size: 0.9rem; }

/* ════════════════════════════════════════════════════════════════
   SCROLL-REVEAL
   ════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: none; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
  /* desktop's clamp() floors at 135px, which is ~36% of a 375px phone
     width since 11.7vw stays below that floor on any phone screen */
  :root { --badge-size: clamp(64px, 16vw, 90px); }

  /* phones: bump the nav-link scale over desktop's 3.6vw, but not the old
     7.2vw - at real DM Serif Display widths, 4 links at that size overflowed
     the viewport instead of fitting on one line as intended */
  .hero-pills { font-size: 4.2vw; gap: 1.8em; }

  .process-item { grid-template-columns: clamp(2.4rem, 12vw, 4rem) 1fr; }

  /* skip the scroll hint on phones - the hero fits in view without prompting */
  .scroll-cue { display: none; }

  /* click-and-hold has no touch equivalent - hide the hint on phones */
  .hero-hint { display: none; }

  /* the fixed 800px nowrap box (for a single line on desktop) doesn't fit a
     narrow phone screen - let it wrap, and drop the font size (desktop's
     clamp() floor is 1.9rem, too big here - 3 wrapped lines at that size
     ran into the scroll-down cue below it) */
  .hero-eyebrow { white-space: normal; font-size: 1.1rem; }
}

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .scroll-cue { animation: none; }
  * { transition-duration: 0.001ms !important; }
}