/* CyberPro AI OS — Marketing Website shared shell (Brand Phase 6)
   Built on top of design-system.css tokens — no new colors/spacing/type scale invented here, only
   marketing-site-specific layout (sticky nav, footer columns, hero sections) that the product's own
   app-shell (design-system/templates/dashboards/*) doesn't need. */

/* Skip link — WCAG 2.4.1, missing from the shell until this pass. Off-screen until keyboard-focused. */
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:100;
  background:var(--cy-accent); color:#fff; padding:10px 16px; border-radius:var(--cy-radius-sm);
  font-size:14px; font-weight:600; text-decoration:none; transition:top 0.15s var(--cy-ease-standard);
}
.skip-link:focus{ top:8px; }

.site-nav{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:36px;
  padding:0 var(--cy-space-8); height:72px;
  background:rgba(11,12,14,0.85); -webkit-backdrop-filter:blur(var(--cy-blur-md)); backdrop-filter:blur(var(--cy-blur-md));
  border-bottom:1px solid var(--cy-border);
}
.site-nav__logo{ display:flex; align-items:center; gap:10px; flex:none; }
.site-nav__links{ display:flex; gap:28px; flex:1; }
.site-nav__links a{ color:var(--cy-text-secondary); text-decoration:none; font-size:14px; font-weight:500; }
.site-nav__links a:hover, .site-nav__links a[aria-current="page"]{ color:var(--cy-text-primary); }
.site-nav__actions{ display:flex; align-items:center; gap:12px; flex:none; }
.site-nav__toggle{ display:none; }

/* Mobile nav panel — the actual reopen mechanism design-guidelines/Accessibility.md flagged as missing
   for the product's dashboard sidebar in Phase 4. Fixed here rather than repeated. */
.site-nav__mobile-panel{
  display:none; position:fixed; inset:72px 0 0 0; z-index:49; background:var(--cy-bg-canvas);
  padding:var(--cy-space-6) var(--cy-space-6); overflow-y:auto;
}
.site-nav__mobile-panel.is-open{ display:block; }
.site-nav__mobile-panel a{ display:block; padding:var(--cy-space-3) 0; color:var(--cy-text-primary); text-decoration:none; font-size:18px; border-bottom:1px solid var(--cy-border); }
.site-nav__mobile-actions{ display:flex; flex-direction:column; gap:var(--cy-space-3); margin-top:var(--cy-space-6); }

.site-container{ max-width:var(--cy-container-2xl); margin:0 auto; padding:0 var(--cy-space-8); }

.site-section{ padding:var(--cy-space-16) 0; }
.site-section--tight{ padding:var(--cy-space-10) 0; }

.site-footer{ border-top:1px solid var(--cy-border); padding:var(--cy-space-12) 0 var(--cy-space-8); margin-top:var(--cy-space-16); }
.site-footer__newsletter{ display:flex; justify-content:space-between; align-items:center; gap:var(--cy-space-6); flex-wrap:wrap; padding-bottom:var(--cy-space-8); margin-bottom:var(--cy-space-8); border-bottom:1px solid var(--cy-border); }
.site-footer__newsletter-title{ font-size:15px; font-weight:600; color:var(--cy-text-primary); margin:0 0 4px; }
.site-newsletter-form{ display:flex; gap:var(--cy-space-2); flex:none; }
.site-newsletter-form__input{ height:38px; padding:0 var(--cy-space-3); border-radius:var(--cy-radius-sm); border:1px solid var(--cy-border); background:var(--cy-bg-canvas); color:var(--cy-text-primary); font-size:14px; width:220px; }
.site-newsletter-form__input:focus-visible{ outline:none; box-shadow:var(--cy-shadow-focus-ring); }
.site-footer__newsletter-note{ margin:-8px 0 var(--cy-space-8); }
.site-footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--cy-space-8); margin-bottom:var(--cy-space-10); }
.site-footer__col h4{ font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--cy-text-secondary); margin:0 0 var(--cy-space-3); font-weight:600; }
.site-footer__col a{ display:block; color:var(--cy-text-secondary); text-decoration:none; font-size:14px; margin-bottom:10px; }
.site-footer__col a:hover{ color:var(--cy-text-primary); }
.site-footer__bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:var(--cy-space-6); border-top:1px solid var(--cy-border); color:var(--cy-text-secondary); font-size:13px; }
.site-footer__legal-links{ display:flex; gap:var(--cy-space-5); }
.site-footer__legal-links a{ color:var(--cy-text-secondary); text-decoration:none; }
.site-footer__legal-links a:hover{ color:var(--cy-text-primary); }

/* Hero section — Living AI Core placement per branding/premium-experience/Living-AI-Core.md */
.site-hero{ position:relative; overflow:hidden; padding:var(--cy-space-16) 0 var(--cy-space-12); }
.site-hero__atmosphere{ position:absolute; inset:0; background:radial-gradient(circle at 78% 30%, rgba(59,130,246,0.16) 0%, transparent 50%); pointer-events:none; }
.site-hero__grid{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:var(--cy-space-10); align-items:center; }
.site-hero .orbit{ animation: siteCoreOrbit 30s linear infinite; transform-origin:70px 50px; }
@keyframes siteCoreOrbit{ to { transform:rotate(360deg); } }
.site-hero .pulse{ animation: siteCorePulse 2.4s ease-in-out infinite; transform-origin:70px 50px; }
@keyframes siteCorePulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.15); opacity:0.85; } }
@media (prefers-reduced-motion: reduce){ .site-hero .orbit, .site-hero .pulse { animation:none !important; } }

.eyebrow-link{ display:inline-flex; align-items:center; gap:8px; background:var(--cy-bg-surface); border:1px solid var(--cy-border); border-radius:999px; padding:6px 14px; font-size:13px; color:var(--cy-text-secondary); margin-bottom:var(--cy-space-5); text-decoration:none; }

/* Responsive — reuses the exact breakpoint tokens design-system/design-system.css already defines
   (--cy-breakpoint-*), and the same .cy-grid-cols pattern that fixed the Phase 4 dashboard-grid bug
   (an inline grid-template-columns override can't be reached by a media query — don't repeat that here). */
@media (max-width: 1024px){
  .site-nav__links{ display:none; }
  .site-nav__toggle{ display:flex; }
  .site-hero__grid{ grid-template-columns:1fr; }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .site-container{ padding:0 var(--cy-space-4); }
  .site-nav{ padding:0 var(--cy-space-4); gap:var(--cy-space-3); }
  /* header actions duplicate the CTAs already in .site-nav__mobile-panel — showing both overflows
     the bar on phone widths and pushed the reopen toggle itself off-screen (caught by resizing to 390px). */
  .site-nav__actions{ display:none; }
  .site-footer__grid{ grid-template-columns:1fr; }
  .site-footer__bottom{ flex-direction:column; gap:12px; align-items:flex-start; }
  .site-footer__newsletter{ flex-direction:column; align-items:flex-start; }
  .site-newsletter-form{ width:100%; }
  .site-newsletter-form__input{ flex:1; width:auto; }
}