/* Basic reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.orbit-body{
  background:radial-gradient(120% 120% at 50% 30%,rgba(55,94,255,0.28),rgba(14,17,24,0)), var(--bg);
  background-color:var(--bg);
  color:var(--text);
  font:16px/1.6 system-ui,Segoe UI,Roboto,Ubuntu,sans-serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:var(--primary);text-decoration:none}
a:hover{color:var(--accent)}

.orbit-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 22px;
  border-bottom:1px solid rgba(255,255,255,0.05);
  background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(0,0,0,0));
  background-color:rgba(7,9,14,0.78);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:blur(8px);
}
.logo img{height:28px}
.logo-text{font-weight:700;letter-spacing:.3px;color:var(--text)}
.mainmenu{display:flex;align-items:center;gap:18px}
.mainmenu a{color:var(--text);opacity:.75;font-weight:500;transition:opacity .2s,color .2s}
.mainmenu a:hover{opacity:1;color:var(--accent)}

.orbital-main{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(40px,6vw,96px);
  padding:clamp(48px,7vw,120px) clamp(20px,4vw,60px);
}

.orbital-system{
  position:relative;
  width:min(1100px,92vw);
  min-height:clamp(520px,70vw,760px);
  margin:0 auto;
  padding:clamp(36px,5vw,64px);
  display:grid;
  place-items:center;
  gap:32px;
  isolation:isolate;
  animation:bloom 1s ease-out both;
  width:min(960px,90vw);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  isolation:isolate;
  animation:bloom 1.4s ease-out forwards;
}
.orbital-system::after{
  content:"";
  position:absolute;
  inset:10%;
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(31,59,255,0.28) 0%,rgba(16,19,28,0.02) 58%,rgba(10,12,18,0) 75%);
  filter:blur(20px);
  opacity:.85;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(31,59,255,0.25) 0%,rgba(16,19,28,0) 70%);
  filter:blur(18px);
  opacity:.9;
  z-index:0;
}

.orbital-core{
  grid-area:1/1;
  position:relative;
  z-index:2;
  width:min(380px,62%);
  min-height:clamp(260px,42vw,360px);
  padding:clamp(32px,5vw,56px);
  border-radius:50%;
  background:linear-gradient(150deg,rgba(22,27,40,0.92),rgba(11,14,22,0.88));
  border:1px solid rgba(87,120,255,0.42);
  box-shadow:0 28px 70px rgba(10,14,24,0.55),0 0 36px rgba(87,120,255,0.22);
  backdrop-filter:blur(18px);
  width:min(360px,70%);
  padding:clamp(32px,6vw,52px);
  border-radius:50%;
  background:linear-gradient(145deg,rgba(21,25,36,0.92),rgba(12,15,20,0.88));
  border:1px solid rgba(87,120,255,0.35);
  box-shadow:0 24px 60px rgba(12,17,30,0.45),0 0 30px rgba(87,120,255,0.2);
  backdrop-filter:blur(14px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.gateway{width:100%}
.gateway :where(h1,h2){font-size:clamp(28px,4.5vw,40px);margin-top:0}
  animation:bloom 1.2s ease-out backwards;
}
.gateway{width:100%}
.gateway :where(h1,h2){font-size:clamp(26px,4vw,36px);margin-top:0}
.gateway :where(p){margin-bottom:0;color:rgba(233,238,244,0.7)}

.orbit-halo{
  position:absolute;
  inset:0;
  border-radius:50%;
  z-index:1;
  border:1px solid rgba(87,120,255,0.24);
  opacity:0;
  animation:haloRise 2.2s ease-out forwards;
  pointer-events:none;
}
.orbit-halo.halo-1{transform:scale(1.1);animation-delay:.12s}
.orbit-halo.halo-2{transform:scale(1.32);animation-delay:.32s}
.orbit-halo.halo-3{transform:scale(1.6);animation-delay:.52s;border-color:rgba(255,122,26,0.25)}
  z-index:-1;
  border:1px solid rgba(87,120,255,0.22);
  opacity:0;
  animation:haloRise 2.2s ease-out forwards;
}
.orbit-halo.halo-1{transform:scale(1.1);animation-delay:.2s}
.orbit-halo.halo-2{transform:scale(1.32);animation-delay:.4s}
.orbit-halo.halo-3{transform:scale(1.58);animation-delay:.6s;border-color:rgba(255,122,26,0.2)}

/* Orbit ribbon */
.orbit-ribbon{
  grid-area:1/1;
  width:100%;
  max-width:min(780px,86vw);
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
  z-index:1;
  contain:layout paint;
}
.orbit-ring{
  position:relative;
  width:100%;
  height:100%;
  border-radius:50%;
  border:1px solid rgba(87,120,255,0.32);
  background:radial-gradient(circle at 50% 50%,rgba(33,44,78,0.92) 0%,rgba(16,21,37,0.68) 45%,rgba(9,12,20,0.2) 78%,rgba(6,8,14,0) 100%);
  box-shadow:0 0 70px rgba(17,32,77,0.45),inset 0 0 40px rgba(82,117,255,0.22);
  overflow:hidden;
  pointer-events:none;
}
.orbit-ring::before{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.08);
  opacity:.45;
  filter:blur(1px);
}
.orbit-ring::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.04);
  opacity:.35;
  filter:blur(2px);
}
.orbit-track{
  position:absolute;
  inset:0;
  margin:0;
  padding:0;
  list-style:none;
  font-size:14px;
  --chip-count:1;
}
.orbit-track::before{
  content:"";
  position:absolute;
  inset:calc(50% - 1px) 0 auto;
  height:2px;
  background:linear-gradient(90deg,rgba(87,120,255,0),rgba(87,120,255,0.55),rgba(87,120,255,0));
  opacity:.65;
}
.orbit-track__empty{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:18px 22px;
  max-width:260px;
  text-align:center;
  color:rgba(226,234,245,0.75);
  background:rgba(12,16,26,0.65);
  border:1px dashed rgba(87,120,255,0.3);
  border-radius:16px;
  backdrop-filter:blur(8px);
}
.orbit-chip{
  position:absolute;
  top:50%;
  left:50%;
  transform-origin:center;
  transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(var(--translate,-240px)) rotate(var(--angle-negative,0deg));
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:14px 22px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(14,18,30,0.94);
  color:var(--text);
  font-weight:500;
  letter-spacing:.03em;
  text-transform:none;
  cursor:pointer;
  pointer-events:auto;
  box-shadow:0 20px 42px rgba(6,10,18,0.48);
  transition:transform .45s cubic-bezier(.25,.8,.25,1), border-color .25s ease, background .25s ease, box-shadow .35s ease, opacity .25s ease;
  backdrop-filter:blur(14px);
  will-change:transform;
  animation:chipFloat 14s ease-in-out infinite;
  animation-delay:calc(var(--offset,0) * 0.18s);
}
.orbit-chip::before{
  content:"";
  position:absolute;
  inset:auto auto calc(100% - 6px) 50%;
  width:1px;
  height:72px;
  background:linear-gradient(180deg,rgba(87,120,255,0.4) 0%,rgba(87,120,255,0));
  transform-origin:top;
  transform:rotate(var(--angle,0deg)) translate(-50%,0);
  opacity:.55;
  transition:opacity .3s ease,height .3s ease;
  pointer-events:none;
}
.orbit-chip:hover,
.orbit-chip:focus-visible{
  transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(calc(var(--translate,-240px) - 16px)) rotate(var(--angle-negative,0deg));
  border-color:var(--accent);
  box-shadow:0 26px 60px rgba(9,14,26,0.62),0 0 22px rgba(87,120,255,0.32);
}
.orbit-chip:hover::before,
.orbit-chip:focus-visible::before{opacity:.9;height:88px}
.orbit-chip:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.orbit-chip.is-active{
  border-color:rgba(255,255,255,0.38);
  background:linear-gradient(155deg,rgba(32,44,78,0.97),rgba(56,76,140,0.97));
  box-shadow:0 30px 66px rgba(8,12,24,0.64),0 0 38px rgba(87,120,255,0.48);
}
.orbit-chip.is-active::before{opacity:1;height:96px;background:linear-gradient(180deg,rgba(255,122,26,0.55) 0%,rgba(255,122,26,0))}
.orbit-chip.is-active .orbit-dot{background:var(--accent);box-shadow:0 0 0 3px rgba(255,122,26,0.32),0 0 16px rgba(255,122,26,0.78)}
.orbit-chip[aria-disabled="true"]{cursor:not-allowed;opacity:.38}
.orbit-label{white-space:nowrap}
.orbit-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(226,234,245,0.7);
  box-shadow:0 0 0 2px rgba(226,234,245,0.18);
  flex-shrink:0;
}
  width:min(680px,88%);
  padding:clamp(14px,3vw,24px) clamp(16px,4vw,32px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(160deg,rgba(20,26,38,0.9),rgba(10,12,18,0.7));
  border:1px solid rgba(87,120,255,0.28);
  box-shadow:0 0 30px rgba(87,120,255,0.18) inset;
  backdrop-filter:blur(10px);
  animation:haloDrift 18s linear infinite;
  overflow:hidden;
}
.orbit-track{
  display:flex;
  gap:12px;
  white-space:nowrap;
  will-change:transform;
  z-index:1;
}
.orbit-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,0.05);
  background:rgba(18,20,30,0.9);
  border-radius:999px;
  cursor:pointer;
  transition:transform .2s, border-color .2s, box-shadow .2s;
  color:var(--text);
}
.orbit-chip:hover{
  transform:translateY(-2px);
  border-color:var(--primary);
  box-shadow:0 10px 20px rgba(15,18,26,0.35);
}
.orbit-dot{width:8px;height:8px;border-radius:50%;background:var(--accent)}

/* Stories */
.orbit-stories{
  grid-area:1/1;
  width:100%;
  padding:clamp(48px,6vw,72px) clamp(12px,3vw,24px);
  display:grid;
  align-items:end;
}
.stories{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
  padding:clamp(16px,3vw,26px);
  border-radius:32px;
  background:linear-gradient(180deg,rgba(17,22,33,0.92) 0%,rgba(12,16,24,0.86) 100%);
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 24px 60px rgba(8,11,18,0.55);
  transition:opacity .25s ease;
}
.stories.is-loading{opacity:.55;filter:saturate(.65);pointer-events:none}
}
.story{
  background:rgba(9,12,18,0.75);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:18px;
  overflow:hidden;
  backdrop-filter:blur(6px);
  transition:transform .25s ease, border-color .25s ease;
}
.story:hover{transform:translateY(-6px);border-color:rgba(87,120,255,0.45)}
.story:focus-within{outline:2px solid var(--accent);outline-offset:-2px;border-color:rgba(87,120,255,0.45)}
.story img{width:100%;height:150px;object-fit:cover;display:block}
.story .b{padding:12px}
.story h3{margin:0 0 6px;font-size:16px}
.story h3 a{color:inherit}
.story h3 a:hover{color:var(--accent)}
.story p{margin:0;color:#aab3bd}
.stories-empty{
  margin:0;
  padding:32px 24px;
  text-align:center;
  border:1px dashed rgba(255,255,255,0.14);
  border-radius:18px;
  color:rgba(226,234,245,0.75);
  background:rgba(9,12,18,0.6);
}

.archive{
  width:100%;
  max-width:1000px;
  padding:0 clamp(12px,5vw,60px);
}

.site-footer{
  border-top:1px solid rgba(255,255,255,0.05);
  padding:22px;
  text-align:center;
  color:#94a3b8;
  margin-top:auto;
  background:rgba(7,9,14,0.65);
  backdrop-filter:blur(6px);
}

/* Utilities */
.hidden{display:none}

@keyframes bloom{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes haloRise{0%{opacity:0;transform:scale(.8)}40%{opacity:.6}100%{opacity:.18}}
@keyframes haloDrift{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

@media (max-width: 900px){
  .orbital-system{
    min-height:auto;
    grid-template-columns:1fr;
    padding:clamp(28px,6vw,40px);
    gap:40px;
  }
  .orbital-system::after{opacity:.35}
  .orbital-core{
    width:100%;
    min-height:auto;
    border-radius:32px;
    padding:clamp(32px,7vw,48px);
  }
  .orbit-ribbon{
    max-width:none;
    width:100%;
    aspect-ratio:auto;
  }
  .orbit-ring{
    border-radius:36px;
    padding:28px 20px;
    height:auto;
  }
  .orbit-ring::before,
  .orbit-ring::after{display:none}
  .orbit-track{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    padding:6px;
  }
  .orbit-track::before{display:none}
  .orbit-track__empty{
    position:relative;
    transform:none;
    left:auto;
    top:auto;
  }
  .orbit-chip{
    position:relative;
    top:auto;
    left:auto;
    transform:none !important;
    animation:none;
    width:min(320px,100%);
    justify-content:flex-start;
    box-shadow:0 16px 30px rgba(8,12,22,0.45);
  }
  .orbit-chip::before{display:none}
  .orbit-halo{display:none}
}

@media (max-width: 600px){
  .gateway :where(h1,h2){font-size:clamp(24px,8vw,32px)}
  .orbit-chip{padding:12px 16px;font-size:14px}
  .stories{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .orbit-chip{animation:none !important}
  .orbit-chip:hover,
  .orbit-chip:focus-visible{transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(var(--translate,-240px)) rotate(var(--angle-negative,0deg)) !important}
}

@keyframes chipFloat{
  0%{transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(var(--translate,-240px)) rotate(var(--angle-negative,0deg));}
  50%{transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(calc(var(--translate,-240px) + 12px)) rotate(var(--angle-negative,0deg));}
  100%{transform:translate(-50%,-50%) rotate(var(--angle,0deg)) translateY(var(--translate,-240px)) rotate(var(--angle-negative,0deg));}
}
@media (max-width: 800px){
  .orbital-system{
    width:100%;
    aspect-ratio:auto;
    display:flex;
    flex-direction:column;
    gap:32px;
  }
  .orbital-system::after{display:none}
  .orbital-core{width:100%;border-radius:32px}
  .orbit-ribbon{width:100%;border-radius:32px}
  .orbit-stories{width:100%;padding:16px 0}
  .stories{background:transparent;border:none;box-shadow:none;padding:0}
  .orbit-halo{display:none}
}