/* ============================================================
   Bright Systems Group — shared styles for sub-pages
   ============================================================ */
:root{
  --ink:#0a0a0a;
  --mid:#6b6b6b;
  --line:#d4d4d4;
  --paper:#faf9f6;
  --yellow:#ffd60a;
  --yellow-soft:#fff3a8;
  --serif:'Fraunces', ui-serif, Georgia, serif;
  --sans:'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'Geist Mono', ui-monospace, Menlo, monospace;
  --maxw:1280px;
  --pad: clamp(20px, 4vw, 56px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:17px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:none; color:inherit}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--pad)}
.eyebrow{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); font-weight:500}
.serif{font-family:var(--serif); font-weight:500; letter-spacing:-0.02em}
.italic{font-style:italic}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 22px; border-radius:999px;
  font-weight:500; font-size:15px; letter-spacing:-0.01em;
  transition:transform .25s ease, box-shadow .25s ease, background .2s ease;
}
.btn-dark{background:var(--ink); color:var(--paper)}
.btn-dark:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(10,10,10,.4)}
.btn-yellow{background:var(--yellow); color:var(--ink)}
.btn-yellow:hover{transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(255,214,10,.6)}
.btn-ghost{color:var(--ink); padding-left:0; padding-right:0; border-bottom:1px solid var(--ink); border-radius:0; padding-bottom:6px}
.btn-ghost:hover{color:var(--mid); border-color:var(--mid)}
.arrow{transition:transform .25s ease}
.btn:hover .arrow{transform:translateX(4px)}

.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:translateY(0)}
.reveal-stagger > *{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.in > *{opacity:1; transform:translateY(0)}
.reveal-stagger.in > *:nth-child(1){transition-delay:.05s}
.reveal-stagger.in > *:nth-child(2){transition-delay:.15s}
.reveal-stagger.in > *:nth-child(3){transition-delay:.25s}
.reveal-stagger.in > *:nth-child(4){transition-delay:.35s}
.reveal-stagger.in > *:nth-child(5){transition-delay:.45s}
.reveal-stagger.in > *:nth-child(6){transition-delay:.55s}

/* ============= NAV ============= */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:center; pointer-events:none}
.nav-inner{
  margin-top:14px; pointer-events:auto;
  display:flex; align-items:center; gap:18px;
  padding:10px 12px 10px 18px;
  background:rgba(250,249,246,.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border:1px solid rgba(10,10,10,.08);
  border-radius:999px;
  box-shadow:0 6px 24px -12px rgba(10,10,10,.15);
}
.nav-logo{display:flex; align-items:center; gap:10px; font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:-.02em}
.nav-logo svg{width:24px; height:24px}
.nav-links{display:flex; gap:4px; padding:0 6px}
.nav-links a{padding:8px 14px; border-radius:999px; font-size:14px; font-weight:500; color:var(--ink); transition:background .2s ease}
.nav-links a:hover{background:rgba(10,10,10,.06)}
.nav-cta{background:var(--yellow); color:var(--ink); padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:transform .2s ease, box-shadow .2s ease}
.nav-cta:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(255,214,10,.7)}
@media (max-width: 820px){ .nav-links{display:none} .nav-inner{margin-top:10px} }

/* ============= PAGE HEADER ============= */
.page-hero{padding: 150px var(--pad) 80px; position:relative; overflow:hidden}
.page-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 460px at 8% 12%, rgba(255,214,10,.18), transparent 60%),
    radial-gradient(700px 460px at 95% 0%, rgba(255,214,10,.07), transparent 60%);
}
.page-hero-inner{position:relative; z-index:1; max-width:var(--maxw); margin:0 auto}
.crumb{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mid); margin-bottom: 22px}
.crumb a{color:var(--mid); transition:color .2s ease}
.crumb a:hover{color:var(--ink)}
.crumb i{display:inline-block; width:14px; height:1px; background:var(--mid)}
.page-hero h1{
  font-family:var(--serif); font-weight:500;
  font-size: clamp(46px, 7vw, 96px); line-height:1; letter-spacing:-.035em;
  margin: 0 0 22px; max-width: 14ch;
}
.page-hero h1 .em{font-style:italic; font-weight:500}
.hl{position:relative; display:inline-block}
.hl::after{
  content:""; position:absolute; left:-4px; right:-4px; bottom:.06em; height:.32em;
  background:var(--yellow); z-index:-1; border-radius:2px;
}
.page-lede{color:#3a3a3a; font-size:clamp(17px, 1.5vw, 21px); max-width:62ch; margin:0}

/* ============= FOOTER ============= */
footer{
  background:var(--ink); color:rgba(250,249,246,.85);
  padding: 70px var(--pad) 30px;
  border-top:1px solid rgba(250,249,246,.08);
}
.foot-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 48px;
}
@media (max-width: 820px){ .foot-grid{grid-template-columns: 1fr 1fr} }
@media (max-width: 540px){ .foot-grid{grid-template-columns: 1fr} }
.foot-brand{display:flex; align-items:center; gap:12px; font-family:var(--serif); font-weight:600; font-size:22px; letter-spacing:-.02em; color:var(--paper)}
.foot-brand svg{width:30px; height:30px}
.foot-tag{margin-top:12px; max-width:30ch; color:rgba(250,249,246,.65); font-size:14.5px}
.foot-col h4{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); margin: 0 0 16px; font-weight:500}
.foot-col ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px}
.foot-col a{color:rgba(250,249,246,.85); font-size:14.5px; transition: color .2s ease}
.foot-col a:hover{color:var(--yellow)}
.foot-col .ctc{display:flex; flex-direction:column; gap:8px; font-size:14.5px; color:rgba(250,249,246,.85)}
.foot-col .ctc b{color:var(--paper); font-weight:500}
.foot-cta{display:inline-flex; align-items:center; gap:6px; margin-top:4px; align-self:flex-start; padding:8px 14px; background:var(--yellow); color:#0a0a0a !important; border-radius:999px; font-size:13px; font-weight:500; transition: transform .2s ease, box-shadow .2s ease}
.foot-cta:hover{transform:translateY(-1px); box-shadow:0 10px 22px -10px rgba(255,214,10,.6)}
.foot-bot{
  max-width:var(--maxw); margin: 50px auto 0; padding-top: 22px;
  border-top:1px solid rgba(250,249,246,.1);
  display:flex; justify-content:space-between; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(250,249,246,.6);
}
.foot-bot .sig{color:var(--yellow)}
@media (max-width: 620px){ .foot-bot{flex-direction:column; align-items:flex-start} }

/* ============= SHARED CTA BAND ============= */
.cta-band{background:var(--ink); color:var(--paper); padding: clamp(80px, 10vw, 130px) var(--pad); text-align:center; position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; background: radial-gradient(700px 400px at 50% 30%, rgba(255,214,10,.16), transparent 65%); pointer-events:none}
.cta-band .inner{position:relative; z-index:1; max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:24px; align-items:center}
.cta-band h2{font-family:var(--serif); font-weight:500; font-size:clamp(36px, 5vw, 60px); letter-spacing:-.03em; line-height:1.05; margin:0; max-width:18ch}
.cta-band h2 .em{font-style:italic}
.cta-band p{color:rgba(250,249,246,.7); max-width:52ch; margin:0; font-size:17px}