/* ==========================================================================
   base.css — tokens, reset, typography, utilities
   Felix Marco Alforque · Apple HIG design system (light-first)

   Surfaces are light (#fbfbfd / #f5f5f7) with near-black panels for the hero,
   approach and contact — the alternating rhythm Apple product pages use.
   One accent only (#0071e3). No gradient text anywhere.
   ========================================================================== */

:root {
  /* ---- surfaces ---- */
  --paper:         #fbfbfd;
  --paper-2:       #f5f5f7;
  --paper-3:       #ececee;
  --card:          #ffffff;
  --card-solid:    #ffffff;
  --dark:          #101014;
  --dark-2:        #1a1a1f;

  /* ---- text ---- */
  --ink:           #1d1d1f;
  --ink-2:         #6e6e73;
  /* Apple's caption grey (#86868b) measures ~3.5:1 on --paper, which fails
     WCAG AA for the 12-13px labels that use it. Held at #6e6e73 (4.8:1). */
  --ink-3:         #6e6e73;
  --on-dark:       #f5f5f7;
  --on-dark-2:     #a1a1a6;

  /* ---- accent ---- */
  --blue:          #0071e3;
  --blue-hover:    #0077ed;
  --blue-dark:     #2997ff;   /* same accent, tuned for dark panels */
  --green:         #30d158;

  /* ---- lines ---- */
  --hair:          rgba(0, 0, 0, .10);
  --hair-2:        rgba(0, 0, 0, .16);
  --hair-d:        rgba(255, 255, 255, .12);
  --hair-d2:       rgba(255, 255, 255, .18);

  /* ---- effects ---- */
  --shadow-card:   0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lift:   0 18px 44px -22px rgba(0, 0, 0, .26);

  /* ---- glass material ----
     Two tints of one material. The saturation and brightness lift is what
     separates real glass from a grey panel: the layer picks up colour from
     whatever is behind it instead of just dimming it. The blur has to be wide
     enough that type behind the sheet dissolves into tone — a narrow blur
     leaves readable glyph shapes and the panel looks dirty rather than frosted. */
  --glass-blur:    saturate(200%) brightness(1.06) blur(40px);
  --glass-blur-d:  saturate(180%) brightness(1.35) blur(40px);
  --glass-light:   rgba(255, 255, 255, .68);
  --glass-dark:    rgba(22, 22, 28, .55);
  /* thick variant for the menu sheet. A bar only has to soften what passes
     under it; a sheet has to hold body copy over a 60px headline, so it takes
     a wider blur and more tint — Apple's thin vs thick material split. */
  --glass-blur-thick:   saturate(200%) brightness(1.06) blur(56px);
  --glass-blur-thick-d: saturate(180%) brightness(1.22) blur(56px);
  --glass-light-thick:  rgba(255, 255, 255, .78);
  --glass-dark-thick:   rgba(22, 22, 28, .76);
  /* specular rim: bright along the top edge, faint along the bottom */
  --glass-rim:     inset 0 1px 0 rgba(255, 255, 255, .85),
                   inset 0 -1px 0 rgba(255, 255, 255, .28),
                   inset 1px 0 0 rgba(255, 255, 255, .35),
                   inset -1px 0 0 rgba(255, 255, 255, .35);
  --glass-rim-d:   inset 0 1px 0 rgba(255, 255, 255, .3),
                   inset 0 -1px 0 rgba(255, 255, 255, .08),
                   inset 1px 0 0 rgba(255, 255, 255, .12),
                   inset -1px 0 0 rgba(255, 255, 255, .12);

  /* ---- type ---- */
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
          'Helvetica Neue', Inter, system-ui, sans-serif;
  --display: var(--sans);
  --mono: ui-monospace, SFMono-Regular, 'JetBrains Mono', Menlo, monospace;

  /* ---- layout ---- */
  --wrap: 1180px;
  --wrap-narrow: 1040px;
  --gutter: 24px;
  /* the floating header: --nav-cap is the capsule itself, --nav-inset the gap
     above it, --nav-h the total block both app.js and scroll-padding read */
  --nav-cap: 52px;
  --nav-inset: 14px;
  --nav-h: 66px;               /* read by app.js — keep this token */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --pill: 980px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.28, .11, .32, 1);
  --ease-out: cubic-bezier(.28, .11, .32, 1);
  --spring: cubic-bezier(.28, .11, .32, 1);
}

/* ==========================================================================
   reset
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 24px);
  background: var(--paper);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.012em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ==========================================================================
   typography
   ========================================================================== */

.h-display {
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.04;
  letter-spacing: -.028em;
  font-weight: 600;
}

.h-section {
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 600;
}

.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.008em;
  color: var(--ink-2);
  margin-bottom: 12px;
}

.lede {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.42;
  letter-spacing: -.014em;
  color: var(--ink-2);
  font-weight: 400;
}

/* Apple never ships a gradient headline. The .grad spans stay in the markup
   so the HTML needs no edits; here they simply inherit. */
.grad {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: currentColor;
  color: inherit;
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   tags
   ========================================================================== */

.tag-row { display: flex; flex-wrap: wrap; gap: 7px; }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid transparent;
  padding: 5px 11px;
  border-radius: var(--pill);
  letter-spacing: -.004em;
  white-space: nowrap;
}

/* ==========================================================================
   layout utilities
   ========================================================================== */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: 104px; position: relative; }

.section-head { max-width: 660px; margin-inline: auto; text-align: center; }
.section-head .lede { margin-top: 14px; }

.section-head--row {
  max-width: none;
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.section-head--row > div { max-width: 660px; }

/* decorative layers from the previous dark build — the Apple direction takes
   its depth from surface steps instead, so these stay out of the way */
.aura, .grid-bg, .hero__light, .hero__floor { display: none; }

.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;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  background: var(--ink);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--pill);
  font-size: 15px;
}

.ico { width: 18px; height: 18px; flex: none; }

.pulse {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  display: inline-block;
  flex: none;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(48, 209, 88, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

/* ==========================================================================
   scroll reveal — app.js adds .in to .reveal / .stagger
   ========================================================================== */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-d1 { transition-delay: .07s; }
.reveal-d2 { transition-delay: .14s; }
.reveal-d3 { transition-delay: .21s; }
.reveal-d4 { transition-delay: .28s; }

.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.stagger.in > * { opacity: 1; transform: none; }
.stagger.in > *:nth-child(1) { transition-delay: .04s; }
.stagger.in > *:nth-child(2) { transition-delay: .10s; }
.stagger.in > *:nth-child(3) { transition-delay: .16s; }
.stagger.in > *:nth-child(4) { transition-delay: .22s; }
.stagger.in > *:nth-child(5) { transition-delay: .28s; }
.stagger.in > *:nth-child(6) { transition-delay: .34s; }

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