:root{
  /* brand swatches — constant across all themes, used for the Fox gradient/wordmark */
  --pearl-light:#FBF6EF;
  --pearl-cream:#F5DFC9;
  --pearl-warm:#EDC9A9;
  --pearl-deep:#C98F63;
  --fox-bright:#FFB245;
  --fox-orange:#FC8215;
  --fox-amber:#F45A08;
  --fox-deep:#D92802;
  --fox-dark:#8A1204;

  /* semantic tokens — these are what actually change per theme below */
  --bg:#0B0B0B;
  --text:#FBF6EF;
  --text-muted:#F5DFC9;
  --surface-a:rgba(255,255,255,0.05);
  --surface-b:rgba(255,255,255,0.02);
  --border:rgba(255,255,255,0.08);
  --border-strong:rgba(255,255,255,0.25);
  --nav-bg:rgba(11,11,11,0.85);
}

/* ---- Bright theme ---- */
:root[data-theme="bright"]{
  --bg:#FFFFFF;
  --text:#1A1310;
  --text-muted:#5A4E44;
  --surface-a:rgba(20,10,0,0.035);
  --surface-b:rgba(20,10,0,0.012);
  --border:rgba(20,10,0,0.10);
  --border-strong:rgba(20,10,0,0.22);
  --nav-bg:rgba(255,255,255,0.85);
}

/* ---- Grey theme ---- */
:root[data-theme="grey"]{
  --bg:#E7E3DD;
  --text:#221E1A;
  --text-muted:#5C5750;
  --surface-a:rgba(20,15,5,0.05);
  --surface-b:rgba(20,15,5,0.02);
  --border:rgba(20,15,5,0.12);
  --border-strong:rgba(20,15,5,0.28);
  --nav-bg:rgba(231,227,221,0.85);
}

*{box-sizing:border-box;}

/* ---- a11y utility ----
   WCAG-standard visually-hidden pattern — element is invisible on screen but
   still announced by screen readers and picked up by SEO crawlers. Used for
   the page's primary <h1> (which sits above the visual hero) and Section 2's
   heading (which is represented visually by the giant wordmark image). */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
/* Nav "Company"/"Products" links jump to these two sections on the home
   page — offset by the sticky nav's height so the section isn't hidden
   underneath it when scrolled to. */
#company,#products,#contact{scroll-margin-top:64px;}
/* Scroll-snap removed entirely — the hero used to snap to center, but even
   proximity-mode snapping fought the scroll-position-driven flying logo
   handoff and felt grabby on mobile. Plain free scrolling wins. */
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background 0.2s ease,color 0.2s ease;
}
.wrap{max-width:1040px;margin:0 auto;padding:0 24px;}

/* ---- theme switcher ---- */
.theme-switch{display:inline-flex;align-items:center;gap:2px;background:var(--surface-a);border:1px solid var(--border);border-radius:999px;padding:3px;}
.theme-switch button{
  border:none;background:none;cursor:pointer;
  font-size:12px;font-weight:700;letter-spacing:0.2px;
  color:var(--text-muted);padding:6px 12px;border-radius:999px;
}
.theme-switch button.active{background:linear-gradient(135deg,var(--fox-bright),var(--fox-orange));color:#1a0e04;}

/* ---- nav ---- */
nav{
  position:sticky;top:0;z-index:10;
  background:transparent;
  backdrop-filter:none;
  border-bottom:1px solid transparent;
  transition:background 0.25s ease,backdrop-filter 0.25s ease,border-color 0.25s ease;
}
nav.nav-solid{
  background:var(--nav-bg);
  border-bottom-color:var(--border);
}
nav .wrap{display:flex;align-items:center;position:relative;height:64px;gap:16px;}
/* Nav logo target — doubles as two things:
   1. The landing-page logo: a separate, standalone copy of the icon+word-
      mark (via the <img class="nav-landing-img"> children), visible from
      the top of the page all the way through section 2 — hidden the
      instant section 3 starts to scroll into view (progress > 0 in the
      flying-logo handoff), see nav.nav-past-hero below, toggled in
      shared.js. This is entirely independent from section 2's icon/word-
      mark.
   2. The landing spot for section 2's flying icon+wordmark to fly into and
      dock — same box, same position, just not visible at the same time as
      #1 (the landing logo hides right as the flight begins, so the flying
      logo has a clean empty slot to dock into).
   opacity, not visibility:hidden or display:none — this <a> must stay
   clickable (home link) at all times regardless of which state it's in;
   visibility:hidden/display:none would remove it from hit-testing. No
   transition on purpose — the landing logo must vanish INSTANTLY the
   moment section 3 starts scrolling in, not fade. */
.nav-logo-target{display:flex;align-items:center;gap:0;width:244px;height:50px;opacity:var(--landing-logo-opacity,1);}
/* Flight sets --landing-logo-opacity continuously from 1 → 0 across the
   second half of the flight so the static landing logo cross-fades out as
   the flying one approaches. .nav-past-hero is the belt-and-braces hard-
   off once docking completes, ensuring the slot is cleanly empty for the
   fixed-positioned flying logo to sit in. */
nav.nav-past-hero .nav-logo-target{opacity:0;}
.nav-logo-target-icon{width:47px;height:47px;flex-shrink:0;}
.nav-logo-target-word{width:188px;height:31px;margin-left:-34px;}
.nav-landing-img{display:block;width:100%;height:100%;object-fit:contain;}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px;letter-spacing:-0.2px;text-decoration:none;}
.brand img{height:32px;width:auto;}
/* Nav text is hardcoded bright white (not theme-aware) since it always floats
   over the hero photo — same "always fixed" exception as the hero's own text. */
.brand .pearl{color:#FFFFFF;text-shadow:0 2px 6px rgba(0,0,0,0.55);}
.brand .fox{background:linear-gradient(135deg,var(--fox-bright),var(--fox-deep));-webkit-background-clip:text;background-clip:text;color:transparent;}
/* Centered independent of the brand's width, via absolute positioning within
   the relatively-positioned nav wrap, rather than flex space-between. */
.navlinks{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:20px;}
.navlinks a{color:#FFFFFF;text-decoration:none;font-size:14.5px;font-weight:600;opacity:0.9;text-shadow:0 1px 2px rgba(0,0,0,0.85),0 4px 14px rgba(0,0,0,0.7);}
.navlinks a:hover{opacity:1;}

/* ---- brand mark (logo, moved below the hero photo for more presence) ---- */
.brand-mark{
  min-height:1000px;display:flex;align-items:center;justify-content:center;
  position:relative;text-align:center;
}
/* No z-index here on purpose — position:relative alone doesn't create a
   stacking context, so .brand-mark-icon/.brand-mark-word's own z-index:9999
   (see below) can compete directly against the nav's z-index:10 at the top
   level. Giving THIS element its own z-index would trap their high z-index
   inside it instead, capping them at whatever this element's z-index is —
   exactly the bug that kept the flying logo rendering behind the nav. */
.brand-mark > .wrap{width:100%;position:relative;}
/* Faint circuit-board pattern behind the section 2 content — many small
   scattered component clusters (not a few long traces), each node given its
   own animation-delay inline (see the SVG) so they breathe out of sync —
   at any given moment several are near peak brightness together, several
   are dim, which is what makes multiple dots read as visible at once
   instead of one uniform pulse. Brand orange rather than the usual PCB-
   photo cyan, kept mild/subtle overall since it's a background texture,
   not the focal point. Purely decorative (aria-hidden) — never competes
   with the logo/wordmark/text above it. */
/* contain:paint = paint-containment hint: tells the browser that nothing
   inside this box needs to paint outside its bounds, so the compositor
   can skip repaints of the (heavy, animated) circuit-board SVG when the
   rest of the page changes. Real perf win on scroll frames. */
.brand-mark-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:paint;}
/* Pause section-2 background SVG animations while the page is actively
   scrolling — frees up the frame budget for the scroll-driven flying-logo
   handoff. The .is-scrolling class is toggled from shared.js. Explicitly
   does NOT touch nav, .nav-logo-target*, or .brand-mark-icon/.brand-mark-word,
   or any heart-level dimensions/z-indexes. */
body.is-scrolling .brand-mark-bg *{animation-play-state:paused!important;}
.brand-mark-circuit{width:100%;height:100%;display:block;}
.brand-mark-circuit .circuit-lines path{opacity:0.15;}
.brand-mark-circuit .circuit-nodes circle{opacity:0.25;animation:circuitBreathe 4s ease-in-out infinite;}
.brand-mark-circuit .circuit-pulses circle{opacity:0.85;}
@keyframes circuitBreathe{0%,100%{opacity:0.2;}50%{opacity:0.75;}}
@media (prefers-reduced-motion:reduce){
  .brand-mark-circuit .circuit-pulses{display:none;}
  .brand-mark-circuit .circuit-nodes circle{animation:none;opacity:0.4;}
}
.brand-mark-logo{display:inline-block;}
/* These are the actual elements that fly to the nav (see shared.js) — each
   gets its own translate/scale every scroll frame, computed independently
   from its own center point to its own nav-logo-target-icon/-word center
   point, which is what lets the pair morph from stacked (here) to inline
   (at the nav) during the flight. z-index:9999 keeps each on top of
   absolutely everything else on the page — the nav (z-index:10) included —
   for the whole flight, not just once docked; position:relative gives each
   its own stacking context for that z-index to apply. pointer-events:none
   lets clicks pass through to whatever's underneath — namely the real
   .nav-logo-target link once docked, which should be the only thing that
   actually receives the click here. */
.brand-mark-icon{
  position:relative;z-index:9999;will-change:transform;pointer-events:none;
  width:220px;max-width:46vw;height:auto;filter:drop-shadow(0 18px 46px rgba(252,130,21,0.4));margin-bottom:-24px;
}
.brand-mark-word{
  position:relative;z-index:9999;will-change:transform;pointer-events:none;
  width:280px;max-width:60vw;height:auto;display:block;margin:0 auto 28px;
}
.brand-mark p.lead{font-size:18px;color:var(--text-muted);max-width:560px;margin:0 auto 32px;opacity:0.9;}
.brand-mark-next{position:absolute;left:0;right:0;top:0;z-index:1;font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:42px;letter-spacing:0.6px;color:#FFFFFF;text-align:center;margin:0;}
@media (max-width:720px){
  /* Full-viewport Section 2 on mobile so the flying-logo flight has a clean
     scroll zone to animate across. Without this (min-height:auto) the
     section is already short enough that its bottom edge sits INSIDE the
     viewport at scroll=0, which makes the flight progress start partially
     complete — logo appears clipped in the nav from the first paint.
     100svh (small viewport height, excludes mobile browser chrome) is the
     stable-against-iOS-address-bar unit; 100vh is the fallback. */
  .brand-mark{min-height:100vh;min-height:100svh;padding:40px 0 60px;}
  .brand-mark-icon{width:150px;margin-bottom:-16px;}
  .brand-mark-word{width:190px;margin-bottom:20px;}
  .brand-mark p.lead{font-size:16px;}
  .brand-mark-next{font-size:32px;}
}

/* ---- hero ---- */
header.hero{padding:88px 0 64px;text-align:center;position:relative;}
header.hero img{width:200px;max-width:60vw;height:auto;filter:drop-shadow(0 8px 30px rgba(252,130,21,0.25));margin-bottom:28px;}
header.hero h1{font-size:44px;line-height:1.15;margin:0 0 16px;letter-spacing:-0.5px;}
header.hero h1 .fox{background:linear-gradient(135deg,var(--fox-bright),var(--fox-deep));-webkit-background-clip:text;background-clip:text;color:transparent;}
header.hero p.lead{font-size:18px;color:var(--text-muted);max-width:560px;margin:0 auto 32px;opacity:0.9;}

/* Scenic hero — a fixed dark illustrated background regardless of the page's
   Dark/Bright/Grey theme, same "always-fixed" exception pattern as Eagle View's
   own Welcome screen gradient. Text here is deliberately hardcoded light, not
   var(--text), since it must stay legible against the fixed-dark image, not
   flip to dark text when the Bright theme is active. */
header.hero.hero-scenic{padding:0;overflow:hidden;margin-top:-64px;}
.hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;}
.hero-bg svg{width:100%;height:100%;display:block;}
.hero-bg img.hero-photo{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;display:block;margin-bottom:0;filter:none;}
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(to bottom,rgba(11,11,11,0),var(--bg));}
.hero-content{position:relative;z-index:1;padding:150px 24px 90px;}
.hero-scenic .hero-content h1,
.hero-scenic .hero-content .pearl{color:#FBF6EF;}
.hero-scenic .hero-content p.lead{color:#F5DFC9;opacity:0.92;}
@media (max-width:720px){
  .hero-content{padding:110px 24px 64px;}
}

/* Photo hero variant — full width like before, but the image's own height is
   never cropped: the image sits in normal flow at its natural aspect ratio
   (width:100%, height:auto) and drives the header's height, instead of being
   stretched/cover-cropped to fill a height set independently by the text. */
.hero-photo-mode{position:relative;min-height:420px;}
.hero-photo-mode .hero-bg{position:relative;top:auto;left:auto;right:auto;bottom:auto;height:auto;}
.hero-photo-mode .hero-bg img.hero-photo{width:100%;height:auto;max-width:none;object-fit:unset;object-position:unset;display:block;margin-bottom:0;filter:none;}
.hero-photo-mode .hero-content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;}
.hero-tagline{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;transform:translateY(-150px);}
.hero-tagline h2{margin:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;font-family:'Marcellus',Georgia,serif;font-weight:400;font-size:56px;letter-spacing:0.5px;color:#FFFFFF;text-shadow:0 2px 14px rgba(0,0,0,0.5);}
.hero-tagline .tagline-dot{color:#FFFFFF;font-weight:800;line-height:1;transform:translateY(-0.28em);}
@media (max-width:720px){
  /* Mobile hero: switch from the desktop "image dictates height" layout
     (relative hero-bg, image at natural landscape ratio — which shrinks
     to a thin 137px strip on a 320px phone) to a fixed-height section
     with the image cover-filling it. object-position pushes the frame
     left-of-center so the chair + laptop + fox stay in view when the
     wide landscape gets cropped on the sides. */
  .hero-photo-mode{min-height:460px;}
  .hero-photo-mode .hero-bg{position:absolute;top:0;left:0;right:0;bottom:0;height:100%;}
  .hero-photo-mode .hero-bg img.hero-photo{
    width:100%;height:100%;max-width:none;
    object-fit:cover;object-position:35% center;
  }
  .hero-photo-mode .hero-content{padding:32px 20px;}
  /* Lifted tagline sits closer to the top third of the hero — keeps the
     scenic foreground (fox, chair, waterfall base) visible underneath. */
  .hero-tagline{transform:translateY(-100px);padding:16px;}
  .hero-tagline h2{font-size:30px;gap:8px;}
}
@media (max-width:480px){
  .hero-photo-mode{min-height:420px;}
  .hero-photo-mode .hero-bg img.hero-photo{object-position:38% center;}
  .hero-tagline{transform:translateY(-90px);padding:12px;}
  .hero-tagline h2{font-size:24px;gap:6px;}
}
@media (max-width:360px){
  .hero-photo-mode{min-height:380px;}
  .hero-tagline{transform:translateY(-80px);}
}
.btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.btn-primary{
  background:linear-gradient(135deg,var(--fox-bright),var(--fox-orange));
  color:#1a0e04;font-weight:700;font-size:15px;padding:14px 28px;border-radius:999px;
  text-decoration:none;box-shadow:0 4px 18px rgba(252,130,21,0.35);
}
.btn-secondary{
  border:1px solid var(--border-strong);color:var(--text);
  font-weight:600;font-size:15px;padding:13px 27px;border-radius:999px;text-decoration:none;
}
/* Layout variant of .btn-secondary used for the Section 3 "Explore & Download" CTA:
   pulled up under the feature list and left-aligned inside its flex column. */
.btn-explore{display:inline-block;align-self:flex-start;margin-top:-24px;padding:9px 27px;}

/* ---- generic page header (Products / Contact) ---- */
header.pagehead{padding:56px 0 40px;text-align:center;border-bottom:1px solid var(--border);}
header.pagehead img{width:88px;max-width:30vw;height:auto;filter:drop-shadow(0 6px 20px rgba(252,130,21,0.22));margin-bottom:20px;}
header.pagehead h1{font-size:36px;margin:0 0 12px;letter-spacing:-0.4px;}
header.pagehead p.lead{font-size:16px;color:var(--text-muted);max-width:520px;margin:0 auto;opacity:0.9;}

/* ---- product section ---- */
section.product{padding:64px 0;border-top:1px solid var(--border);}
section.product:first-of-type{border-top:none;}
.product-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.product-card{
  background:linear-gradient(160deg,var(--surface-a),var(--surface-b));
  border:1px solid var(--border);
  border-radius:20px;padding:40px;
}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--fox-orange);margin-bottom:10px;}
.product h2{font-size:28px;margin:0 0 14px;}
.product p{color:var(--text-muted);opacity:0.9;line-height:1.6;font-size:15px;}
.feature-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;}
.feature-list li{display:flex;gap:10px;font-size:14.5px;color:var(--text);opacity:0.92;}
.feature-list li::before{content:"●";color:var(--fox-orange);font-size:10px;line-height:1.8;}

/* ---- about ---- */
section.about{padding:64px 0;border-top:1px solid var(--border);text-align:center;}
section.about h2{font-size:26px;margin:0 0 14px;}
section.about p{max-width:600px;margin:0 auto;color:var(--text-muted);opacity:0.9;line-height:1.7;font-size:15px;}
/* Extra breathing room above the About-section CTA button. */
.about-cta{margin-top:20px;}

/* ---- contact ---- */
section.contact{padding:64px 0;text-align:center;}
.contact-card{
  max-width:480px;margin:0 auto;
  background:linear-gradient(160deg,var(--surface-a),var(--surface-b));
  border:1px solid var(--border);
  border-radius:20px;padding:48px 32px;
}
.contact-card p{color:var(--text-muted);opacity:0.9;line-height:1.6;font-size:15px;margin:0 0 24px;}
.contact-email{
  display:inline-block;font-size:20px;font-weight:700;color:var(--text);
  text-decoration:none;margin-bottom:24px;
}
.contact-email .fox{background:linear-gradient(135deg,var(--fox-bright),var(--fox-deep));-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ---- feature grid (4-up value prop cards) ---- */
section.feature-grid{padding:64px 0;border-top:1px solid var(--border);}
.fg-head{text-align:center;max-width:600px;margin:0 auto 44px;}
.fg-head h2{font-size:30px;margin:0 0 12px;letter-spacing:-0.3px;}
.fg-head p{color:var(--text-muted);opacity:0.9;font-size:15.5px;margin:0;}
.fg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.fg-card{background:linear-gradient(160deg,var(--surface-a),var(--surface-b));border:1px solid var(--border);border-radius:16px;padding:26px 22px;}
.fg-card .fg-icon{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--fox-bright),var(--fox-orange));display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:16px;}
.fg-card h3{font-size:15.5px;margin:0 0 8px;color:var(--text);}
.fg-card p{font-size:13.5px;color:var(--text-muted);opacity:0.9;line-height:1.55;margin:0;}

/* ---- app preview (left: feature text, right: animated app mock-up) ---- */
section.app-preview{
  padding:88px 0;border-top:1px solid var(--border);overflow:hidden;position:relative;
  background:url('forest-table.webp') center/cover no-repeat;
}
/* Fade at the top, mirroring the hero's own fade at its bottom — transitions
   from the previous section's solid background into the photo. */
section.app-preview::before{
  content:'';position:absolute;top:0;left:0;right:0;height:220px;
  background:linear-gradient(to bottom,var(--bg),rgba(11,11,11,0));
  pointer-events:none;
}
.ap-grid{position:relative;}
.ap-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
/* Height matched to .ap-panel's own rendered height (190px wide × the real
   screenshot's 416:1298 aspect ≈ 593px), and vertically centered the same
   way .ap-visual centers the panel, so the two line up as a pair. */
.ap-text{background:rgba(0,0,0,0.7);border-radius:20px;padding:36px;height:593px;margin-top:-100px;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;}
.ap-text .eyebrow{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--fox-orange);margin-bottom:14px;}
.ap-text .eyebrow-icon{flex-shrink:0;}
.ap-text h2,.ap-text h3{font-size:30px;margin:0 0 12px;letter-spacing:-0.3px;font-weight:800;}
.ap-text > p{color:var(--text-muted);opacity:0.9;font-size:15.5px;line-height:1.6;margin:0 0 30px;}
.ap-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:20px;}
.ap-list li{display:flex;align-items:flex-start;gap:14px;}
.ap-ico{flex-shrink:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;}
.ap-ico-stack{flex-direction:column;width:26px;height:48px;gap:4px;}
.ap-ico-stack svg{width:22px;height:22px;flex-shrink:0;}
.ap-ico-stack-wide{gap:10px;height:54px;}
.ap-ico-stack-lg{width:30px;}
.ap-ico-stack-lg svg{width:26px;height:26px;}
.ap-list li > div{display:flex;flex-direction:column;gap:2px;}
.ap-list strong{font-size:15px;color:var(--text);}
.ap-list span{font-size:13.5px;color:var(--text-muted);opacity:0.9;line-height:1.5;}

.ap-visual{position:relative;min-height:640px;display:flex;align-items:center;justify-content:center;}
.ap-ring{position:absolute;border-radius:50%;border:1px solid var(--border);pointer-events:none;}
.ap-ring1{top:50%;left:50%;width:340px;height:340px;margin:-170px 0 0 -170px;animation:apPulseRing 4s ease-in-out infinite;}
.ap-ring2{top:50%;left:50%;width:400px;height:400px;margin:-200px 0 0 -200px;animation:apPulseRing 4s 1.5s ease-in-out infinite;}

.ap-panel{
  position:relative;z-index:1;width:190px;margin-top:-100px;
  background:linear-gradient(160deg,#1A1410,#0B0704);
  border:1px solid var(--border-strong);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,0.55),0 0 60px rgba(252,130,21,0.08);
}
.ap-panel-shot{width:100%;height:auto;display:block;}
.ap-panel::before{
  content:'';position:absolute;left:0;right:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--fox-bright) 40%,var(--fox-bright) 60%,transparent);
  box-shadow:0 0 16px var(--fox-bright),0 0 32px rgba(252,130,21,0.5);
  animation:apScanDown 5s linear infinite;
}
.ap-panel-head{display:flex;align-items:center;gap:10px;padding:16px 16px 14px;}
.ap-panel-icon{width:26px;height:26px;border-radius:7px;}
.ap-panel-title{font-size:13.5px;font-weight:800;color:var(--pearl-light);letter-spacing:0.2px;}
.ap-panel-sub{font-size:8px;font-weight:700;color:var(--fox-bright);letter-spacing:1.4px;text-transform:uppercase;opacity:0.85;}
.ap-rows{background:rgba(0,0,0,0.18);}
.ap-row{display:flex;align-items:center;gap:10px;padding:8px 16px;border-bottom:1px solid rgba(255,255,255,0.05);}
.ap-row-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10.5px;color:#fff;font-weight:800;flex-shrink:0;}
.ap-row-l{font-size:12px;color:var(--pearl-cream);opacity:0.85;flex:1;}
.ap-row-b{font-size:11px;font-weight:700;color:var(--pearl-cream);opacity:0.6;}
.ap-row-b.ap-orange{color:var(--fox-bright);opacity:1;}
.ap-row-b.ap-warn{color:#FFD166;opacity:1;}
.ap-panel-footer{
  display:flex;align-items:center;gap:6px;padding:10px 16px;
  background:rgba(0,0,0,0.15);border-top:1px solid rgba(255,255,255,0.05);
  font-size:10px;color:var(--pearl-cream);opacity:0.55;font-variant-numeric:tabular-nums;
}
.ap-status-dot{width:5px;height:5px;border-radius:50%;background:#4ADE80;box-shadow:0 0 6px #4ADE80;animation:apPulseDot 2s ease-in-out infinite;}

.ap-chip{
  position:absolute;z-index:2;background:rgba(0,0,0,0.7);
  border:1px solid var(--border-strong);border-radius:12px;padding:10px 14px;
  backdrop-filter:blur(10px);box-shadow:0 14px 36px rgba(0,0,0,0.4);
  font-size:11px;white-space:nowrap;
}
.ap-chip-l{color:var(--text-muted);opacity:0.7;font-size:10px;}
.ap-chip-v{color:var(--pearl-light);font-weight:700;font-size:12px;margin-top:2px;}
.ap-chip-v.ap-red{color:#FF6B5A;}
.ap-chip-s{color:var(--text-muted);opacity:0.6;font-size:10px;margin-top:2px;}
.ap-chip-top{display:flex;align-items:center;gap:6px;}
.ap-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--fox-bright);box-shadow:0 0 6px var(--fox-bright);animation:apPulseDot 1.6s ease-in-out infinite;}
.ap-chip3 .ap-chip-v{color:var(--fox-bright);font-size:10px;letter-spacing:1px;}
.ap-chip1{top:14%;left:2%;margin-top:-50px;animation:apFloat2 5s ease-in-out infinite;}
/* chip2/chip3 are bottom-anchored (top:auto) — margin-top is a no-op there,
   since the browser just re-solves the auto top to keep the bottom-anchored
   position fixed, cancelling the margin out. Folding the offset into the
   bottom value itself (increasing bottom moves the box up) is what actually
   works for a bottom-anchored element. */
.ap-chip2{bottom:calc(26% + 150px);right:0%;animation:apFloat1 6s ease-in-out infinite;}
.ap-chip3{bottom:calc(6% + 100px);left:calc(-6% + 40px);animation:apFloat3 5.5s ease-in-out infinite;}

@keyframes apFloat1{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
@keyframes apFloat2{0%,100%{transform:translateY(0);}50%{transform:translateY(12px);}}
@keyframes apFloat3{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
@keyframes apPulseRing{0%,100%{transform:scale(1);opacity:0.5;}50%{transform:scale(1.04);opacity:0.9;}}
@keyframes apPulseDot{0%,100%{opacity:1;}50%{opacity:0.35;}}
@keyframes apScanDown{0%{top:0%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{top:100%;opacity:0;}}

@media (prefers-reduced-motion:reduce){
  .ap-ring,.ap-panel,.ap-panel::before,.ap-chip,.ap-status-dot,.ap-chip-dot{animation:none!important;}
}

@media (max-width:900px){
  .ap-grid{grid-template-columns:1fr;gap:40px;}
  .ap-visual{min-height:520px;}
  /* Fixed desktop height + negative margin only make sense when ap-text sits
     next to the panel. Once stacked, let it size to content. */
  .ap-text{height:auto;margin-top:0;}
  .ap-panel{margin-top:0;}
}
@media (max-width:720px){
  section.app-preview{padding:64px 0;}
  .ap-text{padding:24px;border-radius:16px;}
  .ap-text .eyebrow{font-size:18px;}
  .ap-text h2,.ap-text h3{font-size:24px;}
  .ap-text > p{font-size:14.5px;}
  /* Panel scales up on mobile — at 180px it was overshadowed by the
     rings/background. Bumped so the Eagle View screenshot reads clearly
     as the hero of this section. Rings grown proportionally so the panel
     still sits inside their outer glow instead of poking out. */
  .ap-visual{min-height:620px;}
  .ap-ring1{width:300px;height:300px;margin:-150px 0 0 -150px;}
  .ap-ring2{width:360px;height:360px;margin:-180px 0 0 -180px;}
  .ap-panel{width:280px;}
}
@media (max-width:480px){
  .ap-chip{display:none;}
  .ap-text{padding:20px;}
  .ap-text .eyebrow{font-size:16px;gap:8px;}
  .ap-text h2,.ap-text h3{font-size:20px;}
  .ap-list{gap:14px;margin-bottom:24px;}
  .ap-visual{min-height:560px;}
  .ap-ring1{width:260px;height:260px;margin:-130px 0 0 -130px;}
  .ap-ring2{width:320px;height:320px;margin:-160px 0 0 -160px;}
  .ap-panel{width:250px;}
  .btn-explore{margin-top:0;}
}
@media (max-width:360px){
  .ap-visual{min-height:520px;}
  .ap-ring1{width:230px;height:230px;margin:-115px 0 0 -115px;}
  .ap-ring2{width:280px;height:280px;margin:-140px 0 0 -140px;}
  .ap-panel{width:220px;}
}

/* ---- alternating showcase blocks ---- */
section.showcase{padding:72px 0;border-top:1px solid var(--border);}
.showcase-row{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.showcase-row.reverse .showcase-text{order:2;}
.showcase-row.reverse .showcase-visual{order:1;}
.showcase-text h2{font-size:26px;margin:0 0 14px;letter-spacing:-0.3px;}
.showcase-text p{color:var(--text-muted);opacity:0.9;line-height:1.65;font-size:15px;margin:0 0 18px;}
.visual-placeholder{
  aspect-ratio:16/10;border-radius:18px;
  border:1.5px dashed rgba(252,130,21,0.4);
  background:linear-gradient(160deg,var(--surface-a),var(--surface-b));
  display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;
}
.visual-placeholder span{font-size:13px;font-weight:700;color:var(--fox-orange);opacity:0.85;letter-spacing:0.3px;}

/* ---- stat strip ---- */
section.stats{padding:56px 0;border-top:1px solid var(--border);}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center;}
.stat-grid .num{font-size:32px;font-weight:800;letter-spacing:-0.5px;background:linear-gradient(135deg,var(--fox-bright),var(--fox-deep));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat-grid .lbl{font-size:13px;color:var(--text-muted);opacity:0.85;margin-top:6px;}
.stat-grid .placeholder-tag{display:block;font-size:10px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--fox-orange);opacity:0.7;margin-top:4px;}

/* ---- multi-column footer ---- */
footer{padding:40px 0;border-top:1px solid var(--border);}
footer .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
footer .copy{font-size:13px;color:var(--text-muted);opacity:0.75;}
footer a{color:var(--text-muted);opacity:0.9;text-decoration:none;font-size:13px;}
footer a:hover{opacity:1;}
.footer-links{display:flex;gap:22px;}

footer.footer-big{padding:56px 0 32px;}
.footer-big .fcols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:24px;margin-bottom:40px;}
.footer-big .fcol h3,.footer-big .fcol h4{font-size:12px;font-weight:800;letter-spacing:0.6px;text-transform:uppercase;color:var(--text-muted);opacity:0.65;margin:0 0 14px;}
.footer-big .fcol a{display:block;font-size:14px;color:var(--text-muted);opacity:0.9;text-decoration:none;margin-bottom:10px;}
.footer-big .fcol a:hover{opacity:1;color:var(--fox-orange);}
.footer-big .fbrand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;margin-bottom:10px;}
.footer-big .fbrand img{height:24px;width:auto;}
/* Footer wordmark: "Pearl" span uses the light cream tone (not the default
   hero-nav bright white) since the footer already sits on a dark surface. */
.footer-big .fbrand .pearl{color:var(--pearl-light);}
.footer-big .ftagline{font-size:13px;color:var(--text-muted);opacity:0.75;max-width:220px;line-height:1.5;}
.footer-big .fbottom{border-top:1px solid var(--border);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;}

@media (max-width:900px){
  .fg-grid{grid-template-columns:1fr 1fr;}
  .footer-big .fcols{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  .product-inner{grid-template-columns:1fr;}
  header.hero h1{font-size:32px;}
  header.hero p.lead{font-size:16px;}
  /* Nav collapses to a single row with a hamburger (injected in shared.js).
     Keep brand on the left, hamburger on the right, drawer slides below. */
  nav .wrap{height:56px;padding:0 16px;gap:12px;}
  .nav-logo-target{width:165px;height:36px;}
  .nav-logo-target-icon{width:33px;height:33px;}
  .nav-logo-target-word{width:132px;height:22px;margin-left:-24px;}
  header.hero.hero-scenic{margin-top:-56px;}
  header.pagehead h1{font-size:28px;}
  .fg-grid{grid-template-columns:1fr;}
  .showcase-row{grid-template-columns:1fr;gap:28px;}
  .showcase-row.reverse .showcase-text{order:1;}
  .showcase-row.reverse .showcase-visual{order:2;}
  .stat-grid{grid-template-columns:1fr 1fr;gap:28px 16px;}
  .footer-big .fcols{grid-template-columns:1fr;gap:28px;}
}

/* ============================================================
   TEAM section
   ------------------------------------------------------------
   • Pyramid layout: 2 (Leadership) / 3 (Core Team) / 4 (Mentors).
   • Circular photo slots. Default state renders elegant initials on
     a fox-gradient — the moment a real <img> is dropped inside
     .team-photo the :has(img) rule hides the initials and the photo
     takes over. Zero HTML churn when swapping in real photos.
   • Grayscale-to-color on hover, with a soft fox-orange glow ring —
     consistent with the .ap-chip-dot glow language already in use.
   • Role pill uses a gradient border via the classic
     background-clip:padding-box + border:transparent + linear-gradient
     border-image trick — matches the fox-bright→fox-deep gradient used
     elsewhere (.stat-grid .num, .brand-mark-word, etc.).
   • Uses semantic tokens (--surface-a/--border/--text-muted) so it
     inherits all three themes (dark / bright / grey) for free.
   ============================================================ */
section.team{
  position:relative;
  padding:88px 0 96px;
  border-top:1px solid var(--border);
  overflow:hidden;
  isolation:isolate;
}
section.team::before{
  /* Subtle tech-y atmosphere — soft radial glow tucked behind the pyramid.
     Kept as a pseudo-element so it never traps anything above it in a
     stacking context that would fight the (safely far-away) flying-logo
     handoff up in section 2. */
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(252,130,21,0.08), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 100%, rgba(255,178,69,0.05), transparent 70%);
}
section.team::after{
  /* Fine dotted grid — evokes PCB pads without shipping another 800-node SVG. */
  content:"";
  position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0.35;
  background-image:radial-gradient(circle at 1px 1px, var(--border-strong) 1px, transparent 0);
  background-size:32px 32px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 90%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 90%);
}

.team-intro{text-align:center;max-width:640px;margin:0 auto 56px;}
.team-intro .eyebrow-simple{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--fox-orange);margin-bottom:12px;
}
.team-intro h2{
  font-family:"Marcellus", Georgia, serif;
  font-size:38px;font-weight:400;letter-spacing:-0.5px;margin:0 0 14px;color:var(--text);
}
.team-intro .team-lede{
  color:var(--text-muted);opacity:0.9;line-height:1.7;font-size:15.5px;margin:0;
}

.team-tier{margin-top:56px;}
.team-tier:first-of-type{margin-top:0;}
.team-tier-label{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin-bottom:32px;
}
.team-tier-label::before,
.team-tier-label::after{
  content:"";flex:0 0 60px;height:1px;
  background:linear-gradient(90deg, transparent, var(--border-strong), transparent);
}
.team-tier-label span{
  font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--text-muted);opacity:0.85;
}

.team-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:32px 40px;
  margin:0 auto;
}
.team-row-2{max-width:680px;}
.team-row-3{max-width:920px;}
.team-row-4{max-width:1120px;}

.team-card{
  margin:0;
  flex:0 0 200px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:16px;
  transition:transform 0.35s ease;
}
.team-card:hover{transform:translateY(-4px);}

.team-photo{
  position:relative;
  width:160px;height:160px;border-radius:50%;
  background:linear-gradient(135deg, var(--fox-bright), var(--fox-deep));
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.08);
  transition:box-shadow 0.4s ease, transform 0.4s ease;
}
/* Professional silhouette illustration — the default placeholder inside every
   .team-photo. Uses currentColor so a single CSS rule controls the tint,
   sits on the fox-gradient bg, and is hidden the moment a real <img> lands
   inside the same .team-photo (see :has(img) rule below). */
.team-photo-placeholder{
  position:absolute;left:0;right:0;bottom:0;
  width:100%;height:100%;
  color:rgba(251,246,239,0.92); /* pearl-light with a whisper of transparency */
  transition:transform 0.55s ease, color 0.4s ease;
  pointer-events:none;
}
.team-photo::after{
  /* Fox-orange glow ring — off by default, blooms on hover. */
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid var(--fox-bright);
  opacity:0;transform:scale(0.9);
  transition:opacity 0.35s ease, transform 0.35s ease;
  pointer-events:none;
}
.team-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:50%;
  filter:grayscale(100%) contrast(1.02);
  transition:filter 0.5s ease, transform 0.6s ease;
}
/* When a real photo lands, hide the silhouette placeholder. */
.team-photo:has(img) .team-photo-placeholder{display:none;}

.team-card:hover .team-photo{
  box-shadow:0 8px 32px rgba(252,130,21,0.28), inset 0 0 0 1px rgba(255,255,255,0.12);
  transform:scale(1.02);
}
.team-card:hover .team-photo::after{opacity:1;transform:scale(1);}
.team-card:hover .team-photo img{filter:grayscale(0%) contrast(1);transform:scale(1.04);}
.team-card:hover .team-photo-placeholder{transform:scale(1.05);color:rgba(251,246,239,1);}

.team-card figcaption{display:flex;flex-direction:column;align-items:center;gap:8px;}
.team-name{
  font-family:"Marcellus", Georgia, serif;
  font-size:19px;font-weight:400;letter-spacing:0.2px;margin:0;color:var(--text);
}
.team-role{
  display:inline-block;position:relative;
  padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:0.6px;text-transform:uppercase;
  color:var(--text-muted);
  background:var(--surface-a);
  /* Gradient border via the padding-box + linear-gradient border-image trick. */
  border:1px solid transparent;
  background-image:
    linear-gradient(var(--surface-a), var(--surface-a)),
    linear-gradient(135deg, var(--fox-bright), var(--fox-deep));
  background-origin:border-box;
  background-clip:padding-box, border-box;
}

/* --- Responsive --- */
@media (max-width:900px){
  .team-intro h2{font-size:30px;}
  .team-tier{margin-top:44px;}
  .team-row{gap:28px 24px;}
  .team-card{flex:0 0 160px;}
  .team-photo{width:132px;height:132px;}
  .team-name{font-size:17px;}
}
@media (max-width:520px){
  section.team{padding:64px 0 72px;}
  .team-intro{margin-bottom:40px;}
  .team-intro h2{font-size:26px;}
  .team-row{gap:24px 20px;}
  .team-card{flex:0 0 140px;gap:12px;}
  .team-photo{width:120px;height:120px;}
  .team-tier-label::before,.team-tier-label::after{flex-basis:36px;}
}
@media (prefers-reduced-motion:reduce){
  .team-card,.team-photo,.team-photo img,.team-photo::after,.team-photo-placeholder{transition:none;}
  .team-card:hover{transform:none;}
  .team-card:hover .team-photo{transform:none;}
  .team-card:hover .team-photo img{transform:none;}
  .team-card:hover .team-photo-placeholder{transform:none;}
}

/* ============================================================
   TEMP — section boundary markers, for layout reference only.
   Currently disabled (commented out) — uncomment to bring them back.
   ============================================================ */
/*
body > header, body > section, body > footer{
  border-top:2px solid red;
}
section.app-preview{
  border-top:4px solid red;
}
*/

/* ============================================================
   MOBILE NAV — hamburger + slide-down drawer (<=720px)
   ------------------------------------------------------------
   The button itself is INJECTED by shared.js so every page gets
   it for free without duplicating markup. Below 720px the
   .navlinks row flips into an absolutely-positioned drawer that
   drops out from under the nav. Drawer uses its own dark panel
   so the hardcoded-white nav links stay readable across all
   three themes (dark / bright / grey).
   ============================================================ */
.nav-toggle{
  display:none;
  margin-left:auto;
  background:none;border:0;padding:10px;
  cursor:pointer;z-index:11;
  -webkit-tap-highlight-color:transparent;
}
.nav-toggle span{
  display:block;width:24px;height:2px;
  background:#FFFFFF;border-radius:2px;margin:5px 0;
  box-shadow:0 1px 3px rgba(0,0,0,0.55);
  transition:transform 0.25s ease,opacity 0.2s ease;
}
.nav-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-active span:nth-child(2){opacity:0;}
.nav-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:720px){
  .nav-toggle{display:block;}
  .navlinks{
    position:absolute;top:100%;left:0;right:0;
    display:flex;flex-direction:column;align-items:stretch;
    transform:none;gap:0;padding:0;
    background:rgba(11,11,11,0.96);
    backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
    border-top:1px solid var(--border);
    max-height:0;overflow:hidden;
    transition:max-height 0.3s ease,padding 0.3s ease;
  }
  .navlinks.is-open{
    max-height:min(80vh,480px);
    padding:6px 0 10px;
  }
  .navlinks a{
    padding:14px 24px;font-size:16px;
    opacity:0.95;text-shadow:none;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .navlinks a:last-child{border-bottom:0;}
}
@media (prefers-reduced-motion:reduce){
  .nav-toggle span,
  .navlinks{transition:none;}
}

/* ============================================================
   NARROW PHONE REFINEMENTS (<=420px / <=360px)
   Small-device polish: tighter gutters, smaller contact card,
   tagline that doesn't crowd the hero photo on iPhone SE.
   ============================================================ */
@media (max-width:420px){
  .wrap{padding:0 16px;}
  .contact-card{padding:36px 22px;border-radius:16px;}
  .contact-card h2{font-size:22px;}
  .contact-email{font-size:17px;}
  .btn-primary,.btn-secondary{font-size:14px;padding:12px 22px;}
  header.pagehead{padding:40px 0 28px;}
  header.pagehead h1{font-size:24px;}
  .fg-head h2{font-size:24px;}
}
@media (max-width:360px){
  .nav-logo-target{width:148px;height:32px;}
  .nav-logo-target-icon{width:30px;height:30px;}
  .nav-logo-target-word{width:118px;height:20px;margin-left:-22px;}
  .hero-tagline h2{font-size:20px;}
}