:root{
  --ink:#0B0B0D;
  --obsidian:#16171C;
  --obsidian-2:#1D1F26;
  --slate:#6E7278;
  --moss:#4C5F46;
  --clay:#C2703D;
  --gold:#B98A2E;
  --gold-lit:#E9C86B;
  --violet:#8B5CF6;
  --electric:#3AB6F0;
  --jade:#31C48D;
  --cream:#F3EFE6;
  --line:rgba(243,239,230,.12);
  --line-soft:rgba(243,239,230,.07);
  --shell:1280px;
  --sp:clamp(16px,3vw,40px);
  --r-lg:22px;
  --r-md:14px;
  --r-sm:8px;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  --font-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:var(--slate) var(--ink);
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.75;
  letter-spacing:.012em;
  overflow-x:hidden;
}

img,svg,video{display:block;max-width:100%;}
a{color:inherit;}
p{margin:0 0 1em;}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15;}
ul,ol{margin:0;padding:0;list-style:none;}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}

::selection{background:var(--violet);color:#fff;}

:focus-visible{
  outline:2px solid var(--gold-lit);
  outline-offset:3px;
  border-radius:6px;
}

.gb-skip{
  position:fixed;
  top:-80px;
  left:16px;
  z-index:200;
  display:inline-block;
  padding:12px 20px;
  background:var(--gold-lit);
  color:#1A1405;
  font-weight:700;
  font-size:14px;
  text-decoration:none;
  border-radius:0 0 var(--r-sm) var(--r-sm);
  transition:top .22s ease;
}
.gb-skip:focus{top:0;}

.gb-shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--sp);
}

.gb-main{display:block;min-height:60vh;}

/* ============ HEADER ============ */
.gb-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(11,11,13,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}

.gb-progress{
  position:absolute;
  left:0;
  bottom:-1px;
  width:100%;
  height:2px;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg,var(--violet),var(--electric) 48%,var(--gold-lit));
  pointer-events:none;
  z-index:3;
}

.gb-header__top{
  background:linear-gradient(90deg,#0B0B0D 0%,#191A21 50%,#0B0B0D 100%);
  border-bottom:1px solid var(--line-soft);
}

.gb-header__topinner{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:70px;
}

.gb-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  flex:none;
}

.gb-brand__mark{
  position:relative;
  flex:none;
  width:36px;
  height:36px;
  border-radius:50%;
  background:conic-gradient(from 210deg,#E9C86B,#B98A2E 38%,#6E7278 68%,#E9C86B);
  box-shadow:0 0 20px rgba(185,138,46,.45),inset 0 0 0 1px rgba(233,200,107,.55);
}
.gb-brand__mark::before,
.gb-brand__mark::after{
  content:"";
  position:absolute;
  top:-4px;
  width:10px;
  height:14px;
  border:2px solid var(--gold-lit);
  border-bottom-color:transparent;
  border-radius:50% 50% 0 0;
}
.gb-brand__mark::before{left:1px;transform:rotate(-26deg);}
.gb-brand__mark::after{right:1px;transform:rotate(26deg);}

.gb-brand__text{display:flex;flex-direction:column;line-height:1.2;}

.gb-brand__name{
  font-size:17px;
  font-weight:800;
  letter-spacing:.05em;
  background:linear-gradient(100deg,#E9C86B,#B98A2E 42%,#F3EFE6 78%,#E9C86B);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.gb-brand__sub{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.18em;
  color:var(--slate);
  text-transform:uppercase;
}

.gb-ticker{
  margin:0 0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.1em;
  color:var(--gold-lit);
  background:rgba(185,138,46,.09);
  border:1px solid rgba(233,200,107,.26);
  border-radius:999px;
  white-space:nowrap;
}

.gb-ticker__dot{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:var(--jade);
  animation:gb-pulse 2.8s ease-out infinite;
}

@keyframes gb-pulse{
  0%{box-shadow:0 0 0 0 rgba(49,196,141,.55);}
  70%{box-shadow:0 0 0 9px rgba(49,196,141,0);}
  100%{box-shadow:0 0 0 0 rgba(49,196,141,0);}
}

.gb-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 20px;
  font-size:14px;
  font-weight:600;
  line-height:1;
  letter-spacing:.04em;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .22s ease,color .22s ease,border-color .22s ease,transform .22s ease,filter .22s ease;
}

.gb-cta--gold{
  background:linear-gradient(135deg,#E9C86B,#B98A2E);
  color:#1A1405;
  box-shadow:0 8px 24px rgba(185,138,46,.3);
}
.gb-cta--gold:hover{filter:brightness(1.08);transform:translateY(-1px);}

.gb-cta--ghost{
  border-color:rgba(233,200,107,.38);
  background:rgba(233,200,107,.06);
  color:var(--gold-lit);
}
.gb-cta--ghost:hover{
  background:rgba(139,92,246,.18);
  border-color:var(--violet);
  color:var(--cream);
}

.gb-header__bottom{background:rgba(22,23,28,.86);}

.gb-header__botinner{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:56px;
  position:relative;
}

.gb-navtoggle{
  display:none;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:11px 14px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.06em;
  background:rgba(139,92,246,.1);
  border:1px solid rgba(139,92,246,.42);
  border-radius:12px;
  cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.gb-navtoggle:hover{background:rgba(139,92,246,.2);border-color:var(--violet);}

.gb-navtoggle__bars{display:inline-flex;flex-direction:column;gap:4px;width:18px;flex:none;}
.gb-navtoggle__bar{
  display:block;
  height:2px;
  width:100%;
  border-radius:2px;
  background:var(--gold-lit);
  transition:transform .25s ease,opacity .2s ease;
}
.gb-navtoggle[aria-expanded="true"] .gb-navtoggle__bar:nth-child(1){transform:translateY(6px) rotate(45deg);}
.gb-navtoggle[aria-expanded="true"] .gb-navtoggle__bar:nth-child(2){opacity:0;}
.gb-navtoggle[aria-expanded="true"] .gb-navtoggle__bar:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.gb-nav{flex:1 1 auto;}
.gb-nav__list{display:flex;align-items:center;gap:4px;}
.gb-nav__item{list-style:none;}

.gb-nav__link{
  position:relative;
  display:block;
  padding:11px 15px;
  font-size:15px;
  font-weight:500;
  letter-spacing:.03em;
  text-decoration:none;
  color:var(--cream);
  border-radius:10px 10px 0 0;
  transition:color .2s ease,background .2s ease;
}
.gb-nav__link::after{
  content:"";
  position:absolute;
  left:15px;
  right:15px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg,var(--gold-lit),var(--violet));
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s ease;
}
.gb-nav__link:hover{color:var(--gold-lit);background:rgba(243,239,230,.04);}
.gb-nav__link:hover::after{transform:scaleX(1);}
.gb-nav__link[aria-current="page"]{color:var(--gold-lit);}
.gb-nav__link[aria-current="page"]::after{transform:scaleX(1);}

/* ============ FOOTER ============ */
.gb-footer{
  position:relative;
  background:linear-gradient(180deg,#0B0B0D 0%,#131419 58%,#0B0B0D 100%);
  border-top:1px solid var(--line);
}

.gb-footer__ruling{
  height:4px;
  background:linear-gradient(90deg,var(--moss) 0%,var(--clay) 28%,var(--gold) 54%,var(--violet) 78%,var(--electric) 100%);
}

.gb-footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.6fr 1fr;
  gap:clamp(20px,3vw,46px);
  padding-block:clamp(38px,5vw,68px);
}

.gb-footer__col{min-width:0;}

.gb-footer__name{
  font-size:19px;
  font-weight:800;
  letter-spacing:.06em;
  margin:0 0 12px;
  background:linear-gradient(100deg,#E9C86B,#B98A2E 45%,#F3EFE6 85%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.gb-footer__desc{
  margin:0 0 16px;
  font-size:14px;
  line-height:1.8;
  color:var(--slate);
  max-width:30em;
}

.gb-footer__stamp{
  margin:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.24em;
  color:rgba(194,112,61,.75);
}

.gb-footer__title{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  padding-bottom:10px;
  border-bottom:1px solid var(--line-soft);
  margin:0;
}

.gb-footer__list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:16px;
}

.gb-footer__list--plain{
  font-size:13.5px;
  line-height:1.7;
  color:var(--slate);
}

.gb-footer__link{
  display:inline-block;
  font-size:14.5px;
  text-decoration:none;
  color:var(--cream);
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.gb-footer__link:hover{color:var(--gold-lit);border-bottom-color:var(--gold-lit);}

.gb-footer__icp{
  margin:18px 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  color:var(--slate);
}

.gb-footer__base{
  border-top:1px solid var(--line-soft);
  background:rgba(11,11,13,.7);
  padding-block:18px;
}

.gb-footer__baseinner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 26px;
}

.gb-footer__note{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.12em;
  color:var(--gold-lit);
}

.gb-footer__copy{
  margin:0;
  font-size:13px;
  color:var(--slate);
}

/* ============ SHARED CONTENT BLOCKS ============ */
.gb-band{
  height:4px;
  width:100%;
  border-radius:2px;
  background:var(--slate);
}
.gb-band--content{background:linear-gradient(90deg,var(--moss),rgba(76,95,70,0));}
.gb-band--service{background:linear-gradient(90deg,var(--clay),rgba(194,112,61,0));}
.gb-band--rule{background:linear-gradient(90deg,var(--slate),rgba(110,114,120,0));}
.gb-band--interactive{background:linear-gradient(90deg,var(--violet),rgba(139,92,246,0));}

.gb-section{padding-block:clamp(44px,6vw,92px);}

.gb-section__head{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:clamp(22px,3vw,38px);
}

.gb-section__num{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--clay);
}

.gb-section__title{
  font-size:clamp(22px,3vw,34px);
  font-weight:700;
  letter-spacing:.01em;
  color:var(--cream);
}

.gb-prose{
  max-width:38em;
  color:rgba(243,239,230,.86);
  font-size:16px;
  line-height:1.75;
}

.gb-crumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--slate);
}
.gb-crumb a{color:var(--slate);text-decoration:none;transition:color .2s ease;}
.gb-crumb a:hover{color:var(--gold-lit);}
.gb-crumb__sep{color:var(--clay);}

.gb-grid{display:grid;gap:clamp(14px,2vw,24px);}
.gb-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.gb-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.gb-grid--sidebar{grid-template-columns:minmax(0,2fr) minmax(260px,1fr);}

.gb-card{
  position:relative;
  padding:clamp(16px,2vw,24px);
  background:linear-gradient(160deg,#16171C 0%,#0F1013 100%);
  border:1px solid var(--line-soft);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .24s ease,transform .24s ease;
}
.gb-card::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:3px;
  background:linear-gradient(90deg,var(--gold),rgba(185,138,46,0));
}
.gb-card:hover{border-color:rgba(233,200,107,.38);transform:translateY(-2px);}

.gb-card__meta{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.14em;
  color:var(--slate);
}

.gb-figure{
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.gb-figure__media{
  position:relative;
  width:100%;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:
    radial-gradient(120% 90% at 18% 0%,rgba(139,92,246,.18),transparent 62%),
    radial-gradient(90% 80% at 92% 100%,rgba(58,182,240,.14),transparent 66%),
    linear-gradient(160deg,#16171C 0%,#0B0B0D 72%);
}
.gb-figure__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.gb-figure__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(60% 60% at 78% 100%,rgba(185,138,46,.16),transparent 72%);
  pointer-events:none;
}

.gb-figure--wide .gb-figure__media{aspect-ratio:21/9;}
.gb-figure--tall .gb-figure__media{aspect-ratio:3/4;}

.gb-figure__cap{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.08em;
  color:var(--slate);
}

.gb-filter{
  border-top:1px solid var(--line-soft);
  padding-top:clamp(16px,2vw,26px);
}

.gb-filter__bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}

.gb-filter__btn{
  padding:8px 16px;
  font-size:13.5px;
  font-weight:500;
  letter-spacing:.04em;
  color:rgba(243,239,230,.78);
  background:rgba(22,23,28,.9);
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.gb-filter__btn:hover{color:var(--gold-lit);border-color:rgba(233,200,107,.44);}
.gb-filter__btn.is-active{
  color:#fff;
  background:linear-gradient(120deg,rgba(139,92,246,.9),rgba(58,182,240,.75));
  border-color:transparent;
  box-shadow:0 6px 20px rgba(139,92,246,.3);
}

.gb-filter__count{
  margin:0 0 0 auto;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--slate);
}

.gb-empty{
  margin:22px 0 0;
  padding:22px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--slate);
  border:1px dashed rgba(110,114,120,.5);
  border-radius:var(--r-md);
}

[data-reveal]{transition:opacity .6s ease,transform .6s ease;}
html.gb-js [data-reveal]{opacity:0;transform:translateY(12px);}
html.gb-js [data-reveal].is-in{opacity:1;transform:none;}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .gb-footer__grid{grid-template-columns:1.3fr 1fr 1.4fr;}
  .gb-footer__col:last-child{grid-column:span 3;}
}

@media (max-width:1024px){
  .gb-grid--3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gb-grid--sidebar{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:900px){
  .gb-ticker{display:none;}
  .gb-header__topinner{min-height:62px;gap:12px;}
  .gb-navtoggle{display:inline-flex;}
  .gb-header__botinner{min-height:auto;padding-block:9px;}
  .gb-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    max-height:0;
    overflow:hidden;
    visibility:hidden;
    background:linear-gradient(180deg,#16171C 0%,#0B0B0D 100%);
    border-top:1px solid var(--line-soft);
    border-bottom:1px solid var(--line);
    transition:max-height .34s ease,visibility .34s ease;
  }
  .gb-nav[data-open]{
    max-height:74vh;
    overflow-y:auto;
    visibility:visible;
  }
  .gb-nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--sp) 20px;
  }
  .gb-nav__link{
    padding:14px 4px;
    font-size:16px;
    border-radius:0;
    border-bottom:1px solid var(--line-soft);
  }
  .gb-nav__link::after{left:0;right:auto;width:46px;bottom:-1px;}
}

@media (max-width:820px){
  .gb-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gb-footer__col:last-child{grid-column:span 2;}
}

@media (max-width:640px){
  .gb-brand__sub{font-size:10px;letter-spacing:.14em;}
  .gb-footer__grid{grid-template-columns:minmax(0,1fr);gap:30px;}
  .gb-footer__col:last-child{grid-column:span 1;}
  .gb-footer__baseinner{flex-direction:column;align-items:flex-start;}
  .gb-grid--2,.gb-grid--3{grid-template-columns:minmax(0,1fr);}
  .gb-filter__count{margin-left:0;width:100%;}
}

@media (max-width:560px){
  .gb-brand__sub{display:none;}
  .gb-brand__mark{width:30px;height:30px;}
  .gb-cta{padding:9px 14px;font-size:13px;}
  .gb-footer__desc{font-size:13.5px;}
}

/* ============ PREFERENCES ============ */
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth;}
  .gb-brand__name,
  .gb-footer__name{
    background-size:220% 100%;
    animation:gb-sheen 20s linear infinite;
  }
  @keyframes gb-sheen{
    0%{background-position:0% 50%;}
    100%{background-position:200% 50%;}
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html.gb-js [data-reveal]{opacity:1;transform:none;}
  .gb-ticker__dot{box-shadow:none !important;}
}