/* ==========================================================================
   RAZORBLED GROUP — HUB PAGE STYLES
   css/hub.css  (index.html only)
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Hero + orbital carousel                                                 */
/* ---------------------------------------------------------------------- */
.hero{
  position: relative;
  padding: 172px 0 100px;
  min-height: 92vh;
  display:flex;
  align-items:center;
  overflow: hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 40px;
  align-items:center;
  position:relative;
  z-index:2;
}
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; text-align:center; }
  .hero-copy{ order:2; }
  .orbital-wrap{ order:1; }
}

.hero-copy h1{
  font-size: clamp(2.4rem, 4.6vw, 3.9rem);
  line-height: 1.08;
  margin: 20px 0 22px;
}
.hero-copy p.lede{
  color: var(--ink-dim);
  font-size: 17.5px;
  max-width: 520px;
  margin-bottom: 34px;
}
@media (max-width: 980px){ .hero-copy p.lede{ margin-inline:auto; } }

.hero-ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-bottom: 46px; }
@media (max-width: 980px){ .hero-ctas{ justify-content:center; } }

.hero-stats{ display:flex; gap: 34px; flex-wrap:wrap; }
@media (max-width: 980px){ .hero-stats{ justify-content:center; } }
.hero-stats .stat b{ display:block; font-family: var(--font-display); font-size: 26px; color:var(--gold-soft); }
.hero-stats .stat span{ font-size: 12.5px; color: var(--ink-faint); letter-spacing:0.04em; }

.orbital-wrap{
  position: relative;
  height: 480px;
  perspective: 1400px;
  --scroll-tilt: 8deg;
}
.orbital-stage{
  width:100%; height:100%;
  position:relative;
  transform-style: preserve-3d;
  transform: rotateX(var(--scroll-tilt, 8deg));
  transition: transform .3s ease-out;
}
.orbital-ring{
  position:absolute; inset:0;
  transform-style: preserve-3d;
  animation: co-spin 46s linear infinite;
}
.orbital-stage:hover .orbital-ring,
.orbital-stage:hover .card-global{ animation-play-state: paused; }

@keyframes co-spin{ from{ transform: rotateY(0deg);} to{ transform: rotateY(360deg);} }
@keyframes co-counterspin{ from{ transform: rotateY(0deg);} to{ transform: rotateY(-360deg);} }

.orbital-center{
  position:absolute; top:50%; left:50%;
  width:104px; height:104px; margin:-52px 0 0 -52px;
  border-radius:50%;
  display:grid; place-items:center;
  background: radial-gradient(circle at 35% 30%, rgba(var(--gold-rgb),0.35), rgba(10,10,13,0.7) 70%);
  border: 1px solid rgba(var(--gold-rgb),0.45);
  box-shadow: 0 0 60px rgba(var(--gold-rgb),0.35);
  animation: co-pulse 5s ease-in-out infinite;
  z-index:1;
}
.orbital-center img{ width:48px; height:48px; object-fit:contain; filter: drop-shadow(0 0 10px rgba(var(--gold-rgb),0.5)); }
@keyframes co-pulse{ 0%,100%{ box-shadow:0 0 40px rgba(var(--gold-rgb),0.28);} 50%{ box-shadow:0 0 76px rgba(var(--gold-rgb),0.5);} }

.orbital-card{
  position:absolute; top:50%; left:50%;
  width:148px; height:148px; margin:-74px 0 0 -74px;
  transform-style: preserve-3d;
}
/* Second, aria-hidden copy of the cards (see js/orbital.js) — only used to
   give the mobile marquee a seamless loop; inert on the desktop 3D ring. */
.orbital-card--dup{ display:none; }
/* js/orbital.js only builds .orbital-track on mobile layouts, so this
   normally never exists at desktop widths — this rule is just insurance:
   transform-style defaults to "flat", which would silently flatten the
   ring's nested 3D cards if this wrapper ever ends up in the desktop DOM
   (e.g. a resize across the breakpoint without a reload). */
.orbital-track{ transform-style: preserve-3d; }
.card-local{ width:100%; height:100%; transform-style: preserve-3d; }
.card-global{ width:100%; height:100%; transform-style: preserve-3d; animation: co-counterspin 46s linear infinite; }

.card-glass{
  width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding: 18px 14px;
  border-radius: 22px;
  text-align:center;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%);
  box-shadow: 0 0 0 1px rgba(var(--co-rgb),0.18) inset, 0 24px 50px -24px rgba(var(--co-rgb),0.55);
  transition: transform .55s var(--ease-out), box-shadow .45s ease, border-color .45s ease;
}
.card-glass:hover{
  transform: translateZ(26px) scale(1.07);
  border-color: rgba(var(--co-rgb),0.55);
  box-shadow: 0 0 0 1px rgba(var(--co-rgb),0.6) inset, 0 30px 70px -18px rgba(var(--co-rgb),0.85);
}
.card-logo{
  width:60px; height:60px; border-radius:14px;
  display:grid; place-items:center; overflow:hidden; padding:10px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.card-logo img{ width:100%; height:100%; object-fit:contain; }
.card-name{ font-family: var(--font-display); font-size:12px; font-weight:600; letter-spacing:0.01em; color: var(--ink); }

.orbital-floor{
  position:absolute; left:50%; bottom:-6%; width:78%; height:34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(var(--gold-rgb),0.28), transparent 72%);
  filter: blur(6px);
}

@media (max-width: 900px){
  /* Full 3D perspective either overflows the page or shrinks the cards to
     the point of being unreadable on narrow viewports, so below 900px the
     spinning ring becomes a horizontally looping "marquee" strip instead —
     same continuous motion, same card design, no 3D. min-width:0 +
     overflow:hidden on .orbital-wrap stop the marquee track's own content
     width from pushing this grid column wider than the viewport (the
     original overflow bug this block exists to prevent). The Razorbled
     mark moves from the (now removed) center-of-the-ring position to a
     small static badge above the strip, rather than disappearing. */
  .orbital-wrap{ height:auto; perspective:none; min-width:0; overflow:hidden; }
  .orbital-stage{
    transform:none !important;
    display:flex; flex-direction:column; align-items:center;
  }
  .orbital-center{ position:static; margin: 0 auto 18px; }
  .orbital-floor{ display:none; }
  .orbital-ring{
    position:relative; inset:auto; animation:none;
    width:100%; overflow:hidden; padding: 6px 0 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .orbital-track{
    display:flex; gap:16px; width:max-content;
    animation: co-marquee 32s linear infinite;
  }
  .orbital-wrap:hover .orbital-track,
  .orbital-track:focus-within{ animation-play-state: paused; }
  .orbital-card{
    position:relative; top:auto; left:auto; margin:0;
    flex: 0 0 148px;
    /* Each card still carries its desktop-ring inline transform
       (rotateY(angle) translateZ(radius), set by js/orbital.js) — without
       this override every card past the first stays rotated by its raw
       3D-ring angle with no perspective to sell it, which mirrors/flips
       whichever ones land past 90°/270° (this is what made MGI render
       backwards). Cards must be fully flat in the mobile marquee. */
    transform:none !important;
  }
  .orbital-card--dup{ display:block; }
  .card-local, .card-global{ transform:none !important; animation:none !important; }
}

@keyframes co-marquee{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }

@media (max-width: 900px) and (prefers-reduced-motion: reduce){
  /* Motion-sensitive users get the old static, manually-scrollable row
     instead of the auto-looping marquee. */
  .orbital-track{ animation:none; width:auto; }
  .orbital-ring{
    overflow-x:auto; -webkit-mask-image:none; mask-image:none;
    scroll-snap-type: x mandatory;
  }
  .orbital-card--dup{ display:none; }
  .orbital-card{ scroll-snap-align:center; }
}

.scroll-cue{
  position:absolute; left:50%; bottom:28px; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  color: var(--ink-faint); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background: linear-gradient(var(--gold), transparent); animation: co-scrollline 2.2s ease-in-out infinite; }
@keyframes co-scrollline{ 0%{ transform:scaleY(0); transform-origin:top;} 50%{ transform:scaleY(1); transform-origin:top;} 51%{transform-origin:bottom;} 100%{ transform:scaleY(0); transform-origin:bottom;} }
@media (max-width: 900px){ .scroll-cue{ display:none; } }

/* ---------------------------------------------------------------------- */
/* Marquee strip under hero                                                 */
/* ---------------------------------------------------------------------- */
.stat-bar{
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 30px 0;
}
.stat-bar .wrap{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.stat-bar-item{ display:flex; align-items:center; gap:10px; color: var(--ink-dim); font-size:13.5px; }
.stat-bar-item b{ color: var(--gold-soft); font-family: var(--font-display); }

/* ---------------------------------------------------------------------- */
/* About the Group                                                         */
/* ---------------------------------------------------------------------- */
.about-head{ max-width: 720px; margin-bottom: 56px; }
.about-head h2{ font-size: clamp(2rem,3.4vw,2.7rem); margin: 18px 0 18px; }
.about-head p{ color: var(--ink-dim); font-size:16.5px; }

.about-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-bottom: 64px; }
@media (max-width: 900px){ .about-grid{ grid-template-columns:1fr; } }
.about-card{ padding: 34px 28px; position:relative; overflow:hidden; }
.about-card .num{ font-family: var(--font-display); font-size:42px; color: rgba(255,255,255,0.08); font-weight:700; position:absolute; top:14px; right:22px; }
.about-card h3{ font-size:19px; margin: 30px 0 12px; }
.about-card p{ color: var(--ink-dim); font-size:14.5px; }

.about-copy{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:start; }
@media (max-width:860px){ .about-copy{ grid-template-columns:1fr; } }
.about-copy p{ color: var(--ink-dim); font-size:16px; margin-bottom:16px; }
.about-copy .pull{ font-family: var(--font-display); font-size: 22px; color: var(--ink); line-height:1.4; }

/* ---------------------------------------------------------------------- */
/* Portfolio grid                                                           */
/* ---------------------------------------------------------------------- */
.portfolio-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom: 50px; flex-wrap:wrap; }
.portfolio-head h2{ font-size: clamp(2rem,3.4vw,2.7rem); margin-top:18px; max-width:560px; }
.portfolio-head p{ color: var(--ink-dim); max-width:380px; font-size:15px; }

.portfolio-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 980px){ .portfolio-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px){ .portfolio-grid{ grid-template-columns: 1fr; } }

.co-card{
  position:relative;
  padding: 32px 28px;
  display:flex; flex-direction:column; gap:16px;
  transition: transform .5s var(--ease-out), box-shadow .5s ease, border-color .5s ease;
  overflow:hidden;
}
.co-card::before{
  content:""; position:absolute; inset:0; opacity:0; transition: opacity .5s ease;
  background: radial-gradient(320px circle at 30% 0%, rgba(var(--co-rgb),0.22), transparent 60%);
}
.co-card:hover{ transform: translateY(-6px); border-color: rgba(var(--co-rgb),0.45); box-shadow: 0 26px 60px -24px rgba(var(--co-rgb),0.55); }
.co-card:hover::before{ opacity:1; }
.co-card-top{ display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.co-card-logo{ width:56px; height:56px; border-radius:14px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); display:grid; place-items:center; padding:9px; flex-shrink:0; }
.co-card-logo img{ width:100%; height:100%; object-fit:contain; }
.co-card-name{ font-family: var(--font-display); font-weight:600; font-size:16.5px; }
.co-card-sector{ font-size:12px; color: var(--ink-faint); }
.co-card-tag{ font-family: var(--font-display); font-size:13.5px; font-weight:600; color: var(--co-soft, var(--gold-soft)); position:relative; z-index:1; }
.co-card p.desc{ color: var(--ink-dim); font-size:14.5px; position:relative; z-index:1; }
.co-card-link{
  margin-top:auto; display:inline-flex; align-items:center; gap:8px;
  font-size:13.5px; font-weight:600; color: var(--ink);
  position:relative; z-index:1;
}
.co-card-link svg{ transition: transform .3s ease; }
.co-card:hover .co-card-link svg{ transform: translateX(4px); }

/* ---------------------------------------------------------------------- */
/* CTA band                                                                 */
/* ---------------------------------------------------------------------- */
.cta-band{
  position:relative; overflow:hidden;
  padding: 76px 0;
  text-align:center;
}
.cta-band h2{ font-size: clamp(1.8rem, 3.2vw, 2.4rem); max-width:680px; margin: 0 auto 18px; }
.cta-band p{ color: var(--ink-dim); max-width:520px; margin: 0 auto 32px; }
.cta-band .btn{ margin: 0 auto; }