/* ============================================================
   AAPRO — Global Marketing Site
   Design system: tactical-precision dark theme
   Palette derived from the AAPRO app (crosshair red on near-black)
   ============================================================ */

:root{
  /* — base surfaces — */
  --bg:            #08080a;
  --bg-elevated:   #0d0d10;
  --bg-card:       rgba(22,22,26,0.55);
  --bg-card-solid: #141418;
  --bg-glass:      rgba(18,18,22,0.6);

  /* — brand accent: crosshair red — */
  --accent:        #E33B39;
  --accent-2:      #ff5a4d;
  --accent-rgb:    227,59,57;
  --accent-soft:   rgba(227,59,57,0.12);
  --accent-glow:   rgba(227,59,57,0.35);

  /* — supporting — */
  --gold:          #E0A24B;
  --green:         #4FB286;
  --cyan:          #5BC0DE;

  /* — text — */
  --text:          #F4F4F6;
  --text-2:        #A8A8B0;
  --text-3:        rgba(255,255,255,0.55);

  /* — lines & light — */
  --line:          rgba(255,255,255,0.08);
  --line-2:        rgba(255,255,255,0.14);

  /* — type — */
  --f-display: 'Sora', 'Noto Sans SC', sans-serif;
  --f-body:    'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* — layout — */
  --maxw: 1240px;
  --nav-h: 72px;
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;

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

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 20px);-webkit-text-size-adjust:100%;}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  font-size:16px;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
ul{list-style:none;}
::selection{background:var(--accent);color:#fff;}

/* — ambient background field — */
.bg-field{
  position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 900px 700px at 12% -5%, rgba(var(--accent-rgb),0.10) 0%, transparent 55%),
    radial-gradient(ellipse 800px 600px at 95% 8%, rgba(91,150,180,0.06) 0%, transparent 50%),
    radial-gradient(ellipse 700px 900px at 50% 120%, rgba(var(--accent-rgb),0.05) 0%, transparent 60%),
    var(--bg);
}
.bg-grid{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.5;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 30%, transparent 80%);
}
.bg-noise{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* — shared layout — */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;}
.section{padding:clamp(72px,10vw,140px) 0;position:relative;}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:12px;font-weight:500;
  letter-spacing:2.5px;text-transform:uppercase;color:var(--accent);
  margin-bottom:20px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);opacity:0.6;}

h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.08;letter-spacing:-0.02em;}
.h-sec{font-size:clamp(32px,4.4vw,56px);}
.h-sub{font-size:clamp(15px,1.5vw,19px);color:var(--text-2);max-width:60ch;line-height:1.7;font-weight:400;}
.section-head{margin-bottom:clamp(40px,5vw,68px);max-width:760px;}
.center{text-align:center;margin-left:auto;margin-right:auto;}

.gradient-text{
  background:linear-gradient(120deg, #fff 20%, var(--accent-2) 60%, var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* — buttons — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 28px;border-radius:var(--r-sm);font-weight:600;font-size:15px;
  letter-spacing:0.2px;transition:all .25s var(--ease);white-space:nowrap;
  position:relative;overflow:hidden;
}
.btn svg{width:17px;height:17px;}
.btn-primary{
  background:linear-gradient(135deg, var(--accent-2), var(--accent));
  color:#fff;box-shadow:0 8px 28px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 38px -8px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.25);}
.btn-ghost{background:rgba(255,255,255,0.04);color:var(--text);border:1px solid var(--line-2);}
.btn-ghost:hover{background:rgba(255,255,255,0.09);border-color:var(--line-2);transform:translateY(-2px);}
/* pressed state: settle back to baseline so click/tap reads as a physical press
   (P9-4). Mirrors the P7 hover language; reduced-motion users get no transform. */
.btn-primary:active,.btn-ghost:active{transform:translateY(0);}
.btn-lg{padding:17px 36px;font-size:16px;}

/* — reveal-on-scroll — */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s var(--ease), transform .55s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal[data-delay="1"]{transition-delay:.06s;}
.reveal[data-delay="2"]{transition-delay:.12s;}
.reveal[data-delay="3"]{transition-delay:.18s;}
.reveal[data-delay="4"]{transition-delay:.24s;}
.reveal[data-delay="f1"]{transition-delay:.5s;}
.reveal[data-delay="f2"]{transition-delay:.7s;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  html{scroll-behavior:auto;}
  /* silence the looping ambient animations for motion-sensitive users */
  .hero-float .hf-inner,
  .hero-badge .dot,
  .hero-badge .shiny,
  .play-btn,
  .video-poster.shake .play-btn,
  .marquee-track{animation:none !important;}
  /* shiny badge: drop the gradient-text trick so it stays plain accent colour */
  .hero-badge .shiny{-webkit-text-fill-color:currentColor;color:var(--accent-2);background:none;}
  /* drop hover/press lift transforms for motion-sensitive users (P9-4) */
  .btn-primary:hover,.btn-ghost:hover,.btn-primary:active,.btn-ghost:active,
  .pcard:hover,.pcard:active,.comm-card:hover,.comm-card:active,
  .fcard:hover,.fcard:active{transform:none;}
}

/* — skip link (keyboard / screen-reader entry point) — */
.skip-link{
  position:absolute;left:50%;top:0;transform:translate(-50%,-150%);
  z-index:2000;padding:12px 22px;border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--accent);color:#fff;font-weight:600;font-size:14px;
  transition:transform .2s var(--ease);
}
.skip-link:focus{transform:translate(-50%,0);outline:2px solid #fff;outline-offset:2px;}
main:focus{outline:none;}

/* — global keyboard focus ring (visible only for keyboard users) — */
:focus-visible{outline:2px solid var(--accent-2);outline-offset:3px;border-radius:4px;}
.btn:focus-visible,.lang-btn:focus-visible,.nav-toggle:focus-visible{outline-offset:2px;}
/* mouse users keep the clean look; focus-visible handles keyboard only */
:focus:not(:focus-visible){outline:none;}