/* Project Northstar public-development update — 2026-08-02 */
:root{
  --northstar-blue:#41a7ff;
  --northstar-cyan:#20e2ff;
  --northstar-violet:#8a5cff;
  --northstar-ink:#020b23;
  --northstar-panel:rgba(4,16,47,.78);
}
body.northstar-site{
  background:
    radial-gradient(circle at 50% -15%,rgba(40,102,255,.27),transparent 42rem),
    radial-gradient(circle at 8% 22%,rgba(23,218,255,.16),transparent 34rem),
    radial-gradient(circle at 96% 31%,rgba(126,75,255,.17),transparent 35rem),
    linear-gradient(180deg,#01071b 0%,#03102b 34%,#010819 100%);
}
body.northstar-site:before{
  background:
    linear-gradient(115deg,transparent 0 15%,rgba(38,219,255,.07) 24%,transparent 37%,rgba(120,74,255,.07) 52%,transparent 68%,rgba(34,128,255,.06) 82%,transparent 94%),
    radial-gradient(circle at 50% 14%,rgba(255,255,255,.06),transparent 20rem);
}
.northstar-site .header{
  background:rgba(1,8,28,.88);
  border-bottom-color:rgba(68,164,255,.28);
}
.announcement{
  position:relative;
  z-index:3;
  border-bottom:1px solid rgba(50,220,255,.2);
  background:linear-gradient(90deg,rgba(14,75,164,.28),rgba(85,42,158,.24),rgba(12,102,161,.28));
}
.announcement .wrap{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  text-align:center;
  color:#dff8ff;
  font-size:.86rem;
  font-weight:800;
  letter-spacing:.02em;
}
.status-dot{
  width:.65rem;
  height:.65rem;
  flex:0 0 auto;
  border-radius:50%;
  background:#37f0ce;
  box-shadow:0 0 0 5px rgba(55,240,206,.09),0 0 24px rgba(55,240,206,.88);
}
.ns-hero{
  position:relative;
  padding:40px 0 64px;
  overflow:hidden;
}
.ns-hero:after{
  content:"";
  position:absolute;
  left:10%;right:10%;bottom:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(46,224,255,.6),rgba(132,86,255,.6),transparent);
}
.ns-hero-art{
  position:relative;
  border:1px solid rgba(96,179,255,.34);
  border-radius:32px;
  overflow:hidden;
  background:#010a25;
  box-shadow:0 34px 110px rgba(0,0,0,.62),0 0 65px rgba(40,128,255,.19),inset 0 1px 0 rgba(255,255,255,.08);
}
.ns-hero-art:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(180deg,transparent 58%,rgba(1,7,24,.62) 84%,rgba(1,7,24,.96) 100%);
}
.ns-hero-art img{
  width:100%;
  height:auto;
  display:block;
}
.ns-hero-overlay{
  position:absolute;
  z-index:2;
  left:clamp(18px,4vw,48px);
  right:clamp(18px,4vw,48px);
  bottom:clamp(18px,3vw,34px);
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
}
.ns-status-card{
  max-width:720px;
  padding:18px 20px;
  border:1px solid rgba(118,201,255,.28);
  border-radius:20px;
  background:rgba(2,12,37,.76);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 55px rgba(0,0,0,.36);
}
.ns-status-card .label{
  display:flex;
  align-items:center;
  gap:.65rem;
  margin-bottom:.4rem;
  color:#61f4d6;
  font-size:.76rem;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.ns-status-card p{margin:0;color:#d7eeff;font-size:1.02rem}
.ns-hero-cta{display:flex;gap:.7rem;flex-wrap:wrap;justify-content:flex-end}
.ns-intro{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);
  gap:40px;
  align-items:start;
}
.ns-intro h1,.ns-intro h2{
  background:linear-gradient(180deg,#fff 10%,#d9ecff 58%,#88c8ff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 40px rgba(56,163,255,.13);
}
.ns-intro h1{font-size:clamp(3rem,6.8vw,6.6rem)}
.ns-summary{
  border:1px solid rgba(86,170,255,.24);
  border-radius:26px;
  padding:26px;
  background:linear-gradient(180deg,rgba(9,32,79,.7),rgba(3,13,39,.84));
  box-shadow:0 24px 72px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.05);
}
.ns-summary h3{margin-bottom:1rem;color:#dff6ff}
.ns-summary .list li{padding:.72rem 0}
.ns-summary .list strong{color:#fff}
.ns-glow-line{
  height:1px;
  margin:28px 0;
  background:linear-gradient(90deg,transparent,rgba(43,224,255,.75),rgba(113,79,255,.72),transparent);
  box-shadow:0 0 24px rgba(43,224,255,.3);
}
.ns-capability-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.ns-capability{
  position:relative;
  min-height:180px;
  padding:24px;
  border:1px solid rgba(101,178,255,.2);
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(160deg,rgba(10,38,90,.75),rgba(4,13,42,.85));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 52px rgba(0,0,0,.2);
}
.ns-capability:after{
  content:"";
  position:absolute;
  width:120px;height:120px;
  right:-45px;bottom:-45px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(44,173,255,.22),transparent 68%);
}
.ns-capability .index{
  display:grid;
  place-items:center;
  width:40px;height:40px;
  margin-bottom:28px;
  border:1px solid rgba(88,214,255,.42);
  border-radius:50%;
  color:#63eaff;
  font:800 .85rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  box-shadow:0 0 25px rgba(42,201,255,.15);
}
.ns-capability h3{font-size:1.15rem;margin-bottom:.6rem}
.ns-capability p{font-size:.94rem;margin:0}
.ns-architecture{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:32px;
  align-items:center;
}
.ns-poster{
  border:1px solid rgba(83,175,255,.28);
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 90px rgba(0,0,0,.48),0 0 44px rgba(46,136,255,.12);
}
.ns-poster img{display:block;width:100%;height:auto}
.ns-layer-stack{display:grid;gap:14px;margin-top:28px}
.ns-layer{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:16px;
  align-items:start;
  padding:18px;
  border:1px solid rgba(100,180,255,.18);
  border-radius:20px;
  background:rgba(4,20,57,.6);
}
.ns-layer .number{
  margin:0;
  border-radius:50%;
  background:rgba(47,145,255,.13);
  border-color:rgba(73,193,255,.32);
}
.ns-layer h3{margin:0 0 .45rem}
.ns-layer p{margin:0}
.ns-family{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.ns-family-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:320px;
  padding:28px;
  border:1px solid rgba(103,179,255,.22);
  border-radius:26px;
  background:linear-gradient(180deg,rgba(8,34,84,.7),rgba(3,13,40,.88));
  overflow:hidden;
}
.ns-family-card:before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:3px;
  background:linear-gradient(90deg,#20e2ff,#407eff,#8c5cff);
}
.ns-family-card .role{color:#59ebff;font-size:.77rem;font-weight:950;letter-spacing:.14em;text-transform:uppercase}
.ns-family-card h3{font-size:1.55rem;margin:.8rem 0 1rem}
.ns-family-card p{flex:1}
.ns-family-card a{align-self:flex-start;color:#aeeeff;font-weight:900}
.ns-family-card a:hover{color:#fff}
.ns-principles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.ns-principle{
  padding:20px;
  border-radius:20px;
  border:1px solid rgba(86,175,255,.18);
  background:rgba(5,22,61,.55);
}
.ns-principle strong{display:block;color:#fff;margin-bottom:.45rem}
.ns-principle span{display:block;color:var(--muted);font-size:.9rem}
.ns-visual-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
.ns-visual-grid .ns-poster:first-child{grid-row:span 2;align-self:stretch}
.ns-visual-grid .ns-poster:first-child img{height:100%;object-fit:cover}
.ns-visual-grid .ns-poster{border-radius:24px}
.ns-development-band{
  position:relative;
  overflow:hidden;
  border:1px solid rgba(89,188,255,.3);
  border-radius:32px;
  background:
    radial-gradient(circle at 90% 20%,rgba(126,75,255,.22),transparent 26rem),
    radial-gradient(circle at 8% 70%,rgba(31,217,255,.18),transparent 25rem),
    linear-gradient(135deg,rgba(8,35,89,.9),rgba(3,11,35,.96));
  padding:clamp(28px,5vw,54px);
  box-shadow:0 30px 95px rgba(0,0,0,.42);
}
.ns-development-band h2{max-width:900px}
.ns-development-band p{max-width:840px}
.ns-development-band .hero-actions{margin-bottom:0}
.ns-note{
  padding:18px 20px;
  border-left:3px solid #42e7ff;
  background:rgba(7,31,76,.55);
  color:#dff5ff;
  border-radius:0 16px 16px 0;
}
.ns-note strong{color:#fff}
.ns-note p{margin:0;color:#dff5ff}
@media(max-width:1050px){
  .ns-capability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ns-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ns-hero-overlay{position:relative;left:auto;right:auto;bottom:auto;padding:18px;align-items:stretch;flex-direction:column;background:linear-gradient(180deg,rgba(2,12,37,.55),rgba(2,12,37,.96))}
  .ns-hero-art:before{display:none}
  .ns-hero-cta{justify-content:flex-start}
}
@media(max-width:940px){
  .ns-intro,.ns-architecture,.ns-family,.ns-visual-grid{grid-template-columns:1fr}
  .ns-visual-grid .ns-poster:first-child{grid-row:auto}
  .ns-visual-grid .ns-poster:first-child img{height:auto;object-fit:contain}
  .ns-family-card{min-height:0}
}
@media(max-width:640px){
  .announcement .wrap{min-height:48px;font-size:.78rem}
  .ns-hero{padding-top:20px}
  .ns-hero-art{border-radius:20px}
  .ns-status-card{padding:14px 15px}
  .ns-status-card p{font-size:.93rem}
  .ns-capability-grid,.ns-principles{grid-template-columns:1fr}
  .ns-capability{min-height:0}
  .ns-layer{grid-template-columns:1fr}
  .ns-hero-cta .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}