/* ──────────────────────────────────────────────────────────────────────────
   pocket-cloud.org — SITE SHELL theme (website-owned).

   Design tokens + page shell (topbar, hero, ecosystem sections, footer) for
   the hand-authored org pages (index, mission, control, ai-stack, unified) and
   the per-app template shell. The App Store *listing* styles (cards, gallery,
   screenshots, per-app body) are generated separately by the pocket CLI into
   assets/storefront.css and consume these same tokens. (ADR-0048 de-enmesh.)

   This file is OWNED BY THIS REPO — edit it freely; the CLI never touches it.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  --bg:#0b0d12; --bg-soft:#12151c; --panel:#161a23; --line:#232838;
  --text:#e8ecf5; --muted:#97a0b5; --accent:#5B8DEF; --accent-2:#9b6bff;
  --radius:18px; --maxw:1080px;
  font-synthesis:none; -webkit-font-smoothing:antialiased;
}
*{box-sizing:border-box;} html{scroll-behavior:smooth;}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
main{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

/* Top bar / nav (desktop; mobile rules live near the bottom) */
.topbar{display:flex;justify-content:space-between;align-items:center;
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
  background:rgba(11, 13, 18, 0.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1000;}
.brand{font-weight:800;letter-spacing:-.02em;font-size:1.15rem;display:flex;align-items:center;gap:8px;}
.brand-logo{width:32px;height:32px;border-radius:6px;}
.topbar nav a{color:var(--muted);margin-left:20px;font-size:.95rem;}
.topbar nav a:hover,.topbar nav a[aria-current="page"]{color:var(--text);}

/* Nav Groups / Dropdowns */
.nav-group-toggle {
  background: none; border: none; color: var(--muted); font-size: .95rem;
  cursor: pointer; padding: 0; display: flex; align-items: center; font-family: inherit;
}
.nav-group-toggle:hover, .nav-group.open .nav-group-toggle { color: var(--text); }
.nav-group-toggle::after {
  content: ''; display: inline-block; margin-left: 6px;
  border-top: 4px solid currentColor; border-left: 4px solid transparent; border-right: 4px solid transparent;
}
@media (min-width: 761px) {
  .topbar nav { display: flex; align-items: center; gap: 20px; }
  .topbar nav > a { margin-left: 0; }
  .nav-group { position: relative; }
  .nav-group-menu {
    display: none; position: absolute; top: 100%; left: 0; min-width: 200px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    padding: 8px 0; margin-top: 16px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 100;
  }
  .nav-group:hover .nav-group-menu, .nav-group.open .nav-group-menu { display: flex; flex-direction: column; }
  .nav-group-menu a { padding: 10px 20px; font-size: .95rem; margin: 0; display: block; }
  .nav-group-menu a:hover { background: var(--bg-soft); color: var(--accent); }
}

/* Hamburger toggle (injected by the shared SiteNav component; hidden on desktop) */
.nav-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;justify-content:center;gap:5px;}
.nav-toggle span{display:block;width:24px;height:2px;border-radius:2px;background:var(--text,#e8ecf5);transition:.2s ease;}

/* Hero */
.hero{padding:64px 0 40px;}
.index-hero{text-align:center;padding:90px 0 60px;}
.page-hero{text-align:center;padding:80px 20px 40px;border-bottom:1px solid var(--line);margin-bottom:50px;}
.page-hero h1{font-size:clamp(2.5rem,5vw,4rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:.2em;}
.page-hero .lede{font-size:1.25rem;max-width:60ch;margin:0 auto;color:var(--muted);}
.page-hero .eyebrow{margin-bottom:20px;}
.page-hero .hero-body{max-width:72ch;margin:0 auto;}
/* A/B hero background variants (applied by js/ab-hero.js). Dark overlay is set
   inline on the element; these rules give the image room and keep text legible. */
.page-hero--ab{padding:80px 24px 60px;border-bottom:none;border-radius:18px;overflow:hidden;position:relative;}
.page-hero--ab h1{color:#fff;}
.page-hero--ab .lede{color:rgba(255,255,255,.86);}
.page-hero--ab .eyebrow{color:rgba(255,255,255,.72);}
@media (max-width:640px){.page-hero--ab{padding:84px 18px 64px;}}
.eyebrow{display:inline-block;color:var(--muted);font-size:.8rem;letter-spacing:.14em;
  text-transform:uppercase;border:1px solid var(--line);padding:6px 12px;border-radius:999px;margin-bottom:20px;}
h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.05;letter-spacing:-.03em;margin:.2em 0;font-weight:850;}
.grad{background:linear-gradient(90deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.lede{color:var(--muted);font-size:1.15rem;max-width:60ch;margin:14px auto;}
.lede.wide{max-width:70ch;margin:0 auto 30px;}
.lede.emphasis{font-weight:600;color:var(--text);}
.text-link{color:var(--accent);font-weight:600;}
.text-left{text-align:left;}

/* Buttons (shared primitive used by hero + listings) */
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;}
.cta-row.center{justify-content:center;margin-top:18px;}
.index-hero .cta-row{justify-content:center;}
.btn{display:inline-block;padding:12px 22px;border-radius:12px;font-weight:650;
  border:1px solid var(--line);background:var(--panel);transition:.18s;}
.btn:hover{transform:translateY(-1px);border-color:var(--accent);}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#fff;}
.btn.disabled{opacity:.55;cursor:default;}

/* Ecosystem / feature sections */
.ecosystem-section{padding:40px 0 60px; border-bottom:1px solid var(--line); margin-bottom: 20px;}
.ecosystem-section h2{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:16px;}
.ecosystem-section .lede{margin:0 0 40px; font-size: 1.1rem;}
.feature-blocks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;}
.feature-block{padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);}
.feature-block h3{margin:0 0 12px;font-size:1.15rem;color:var(--text);}
.feature-block p{margin:0;color:var(--muted);font-size:.95rem;}
.feature-block code{background:var(--bg-soft);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:0.9em;color:var(--accent);}
.article-content{max-width:860px;margin:0 auto;font-size:1.05rem;}
.article-content h2{font-size:1.8rem;margin-top:2em;margin-bottom:1em;color:var(--text);}
.article-content h3{font-size:1.4rem;margin-top:1.5em;margin-bottom:0.5em;color:var(--text);}
.article-content p,.article-content ul{color:var(--muted);line-height:1.8;margin-bottom:1.5em;}
.article-content ul{padding-left:20px;}
.article-content li{margin-bottom:0.5em;}
.article-content strong{color:var(--text);}
.article-content code{background:var(--bg-soft);padding:2px 6px;border-radius:4px;font-family:monospace;font-size:0.9em;color:var(--accent);}
.feature-panel{margin:60px 0;padding:40px;background:var(--panel);border-radius:var(--radius);border:1px solid var(--line);text-align:center;}
.feature-panel h2{margin-top:0;}
.feature-panel p{margin-bottom:0;}
.text-center{text-align:center;}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start;padding:10px 0 70px;}
.contact-aside .feature-block{margin-bottom:16px;}
.blueprints-content{max-width:1000px;margin:0 auto;padding:0 20px 80px;}
.fleet-badge{display:inline-block;vertical-align:middle;margin-left:8px;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;padding:3px 9px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--accent-2));}
.fleet-app-panel{text-align:left;}
.fleet-app-layout{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap;}
.fleet-app-icon{width:84px;height:84px;border-radius:20px;box-shadow:0 12px 36px rgba(0,0,0,.4);}
.fleet-app-copy{flex:1;min-width:260px;}
.fleet-app-copy h3{margin:0 0 2px;color:var(--text);font-size:1.35rem;}
.fleet-app-copy .tagline-sm{color:var(--text);font-weight:600;margin:0 0 12px;}
.fleet-app-copy ul{margin:0 0 18px;}

/* Sample-apps section wrapper (the injected cards are styled by storefront.css) */
.app-grid-section{padding:20px 0 60px;}
.app-grid-section h2{font-size:1.6rem;letter-spacing:-.02em;margin-bottom:24px;}

/* Footer */
.site-footer{max-width:var(--maxw);margin:40px auto 0;padding:30px 20px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;}
.site-footer .muted{color:var(--muted);opacity:.7;font-size:.82rem;}

@media(max-width:760px){
  .topbar{flex-wrap:wrap;align-items:center;padding:14px 20px;}
  .nav-toggle{display:inline-flex;margin-left:auto;}
  /* Collapse the nav behind the hamburger; .open (set by SiteNav) reveals it. */
  .topbar nav{display:none;flex-basis:100%;flex-direction:column;gap:0;margin-top:12px;}
  .topbar.open nav{display:flex;}
  .topbar nav > a{margin-left:0;padding:13px 4px;border-top:1px solid var(--line,#232838);font-size:1.02rem;}
  .nav-group { border-top: 1px solid var(--line); }
  .nav-group-toggle { width: 100%; justify-content: space-between; padding: 13px 4px; font-size: 1.02rem; }
  .nav-group-menu { display: none; padding-left: 12px; padding-bottom: 8px; }
  .nav-group.open .nav-group-menu { display: flex; flex-direction: column; }
  .nav-group-menu a { padding: 10px 4px; font-size: .95rem; border-top: none; margin: 0; display: block; }
  /* Hamburger → X when open */
  .topbar.open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .topbar.open .nav-toggle span:nth-child(2){opacity:0;}
  .topbar.open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  .contact-grid{grid-template-columns:1fr;}
}