/* U1 "Refined premium" - hero buttons, section tiles and hero typography only (2026-10-03).
   Loads LAST in <head>. Layout, art, copy and positions are untouched.
   Selectors are the live chains prefixed with `html` so every rule out-ranks the late layers
   (hero-photo-links, section-nav, network) by one type selector; !important only where the live rule has it.
   Lifts and nudges use the `translate` property because the live CSS pins `transform: none !important`. */

body.sc-network[data-net-page="home"] #top {
  --u1-ink: #EAF0F7;
  --u1-hot: #F7FAFF;
  --u1-hair: rgba(214, 228, 245, .14);
  --u1-blurple: #5865F2;
  --u1-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Typography ---------- */

html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker {
  color: #C5D2E0;
  font: 600 12px/18px "Chakra Petch", Inter, system-ui, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
}
html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker::before,
html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker::after {
  content: "";
  display: inline-block;
  width: 37px;
  height: 2px;
  vertical-align: middle;
  margin: -2px 14px 0 0;
  border-radius: 1px;
  background:
    linear-gradient(90deg, #E8414D 0 7px, transparent 7px 10px,
      #4DA3FF 10px 17px, transparent 17px 20px,
      #35E0A1 20px 27px, transparent 27px 30px,
      #F2A93B 30px 37px);
}
html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker::after {
  margin: -2px 0 0 calc(14px - .3em);
  transform: scaleX(-1);
}

html body.sc-network[data-net-page="home"] #top #hero .sc-brand-title {
  color: var(--u1-ink);
  letter-spacing: .014em;
  filter: drop-shadow(0 2px 18px rgba(2, 6, 14, .55));
}
/* Ink gradient only where text clipping exists, so the title can never render invisible. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  html body.sc-network[data-net-page="home"] #top #hero .sc-brand-title {
    background: linear-gradient(180deg, #FBFDFF 0%, #EDF2F8 48%, #C3D0DF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

html body.sc-network[data-net-page="home"] #top #hero .hero__sub {
  color: var(--u1-ink);
  font: 500 21px/30px Inter, system-ui, sans-serif;
  letter-spacing: -.012em;
}

html body.sc-network[data-net-page="home"] #top #hero .hero-welcome-description {
  color: #AEBDCE;
  font: 400 15.5px/25px Inter, system-ui, sans-serif;
  letter-spacing: .01em;
}

/* ---------- Hero buttons (shared) ---------- */

html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a {
  min-width: 208px;
  min-height: 50px;
  gap: 12px;
  border-radius: 7px !important;
  font: 600 13px/20px "Chakra Petch", Inter, system-ui, sans-serif;
  letter-spacing: .12em !important;
  translate: 0 0;
  transition: translate .22s var(--u1-ease), background .2s ease, border-color .2s ease,
    box-shadow .22s ease, color .2s ease !important;
}

/* Primary: solid ice white, lit top edge, soft shadow, arrow nudges on hover. */
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero-brand-primary {
  padding: 14px 20px 14px 22px;
  font-weight: 700;
  color: #0B1220 !important;
  border: 1px solid #F2F6FB !important;
  background: linear-gradient(180deg, #F7FAFF 0%, #E4EBF3 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(96, 116, 142, .22),
    0 1px 2px rgba(0, 0, 0, .35),
    0 10px 26px -10px rgba(0, 0, 0, .7) !important;
}
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero-brand-primary > .vector-icon {
  color: #0B1220;
  translate: 0 0;
  transition: translate .26s var(--u1-ease);
}
@media (hover: hover) {
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero-brand-primary:hover {
    color: #0B1220 !important;
    border-color: #FFFFFF !important;
    background: linear-gradient(180deg, #FFFFFF 0%, #EDF2F8 100%) !important;
    box-shadow:
      inset 0 1px 0 #FFFFFF,
      inset 0 -1px 0 rgba(96, 116, 142, .18),
      0 2px 4px rgba(0, 0, 0, .3),
      0 16px 34px -10px rgba(0, 0, 0, .78),
      0 0 0 4px rgba(214, 234, 255, .16),
      0 0 46px -2px rgba(214, 234, 255, .6) !important;
    translate: 0 -3px;
  }
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero-brand-primary:hover > .vector-icon {
    translate: 0 3px;
  }
}
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero-brand-primary:active {
  border-color: #DCE5EF !important;
  background: linear-gradient(180deg, #D9E2EC 0%, #E7EDF4 100%) !important;
  box-shadow:
    inset 0 2px 4px rgba(11, 18, 32, .26),
    inset 0 -1px 0 rgba(255, 255, 255, .6),
    0 1px 1px rgba(0, 0, 0, .35) !important;
  translate: 0 1px;
  transition-duration: .06s !important;
}

/* Discord: frosted glass, subtle blurple tint. */
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero__discord {
  padding: 14px 22px;
  color: var(--u1-ink) !important;
  border: 1px solid rgba(152, 162, 255, .3) !important;
  border-top-color: rgba(190, 196, 255, .46) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .015) 100%),
    linear-gradient(180deg, rgba(118, 130, 255, .17) 0%, rgba(88, 101, 242, .07) 100%),
    linear-gradient(rgba(9, 14, 26, .42), rgba(9, 14, 26, .42)) !important;
  box-shadow:
    inset 0 1px 0 rgba(214, 220, 255, .16),
    0 10px 26px -12px rgba(0, 0, 0, .7) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero__discord .ex-icon {
  color: #B4BBFF;
  transition: color .2s ease;
}
@media (hover: hover) {
  /* 2026-10-03 (owner OK): the hover turns full Discord blurple - the clearest state of the three concepts. */
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero__discord:hover {
    color: #F7FAFF !important;
    border-color: #8F98FF !important;
    background: linear-gradient(180deg, #6571F4 0%, #4F5BE6 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .28),
      inset 0 -1px 0 rgba(20, 24, 80, .35),
      0 14px 30px -12px rgba(0, 0, 0, .75),
      0 0 34px -6px rgba(88, 101, 242, .75) !important;
    translate: 0 -2px;
  }
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero__discord:hover .ex-icon { color: #F7FAFF; }
}
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero__discord:active {
  border-color: rgba(166, 175, 255, .5) !important;
  background:
    linear-gradient(180deg, rgba(88, 101, 242, .3) 0%, rgba(88, 101, 242, .22) 100%),
    linear-gradient(rgba(9, 14, 26, .55), rgba(9, 14, 26, .55)) !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .4), 0 1px 1px rgba(0, 0, 0, .3) !important;
  translate: 0 1px;
  transition-duration: .06s !important;
}

/* Keyboard focus: ice ring for the primary, blurple ring for Discord. */
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero-brand-primary:focus-visible {
  outline: 2px solid #E9F2FA !important;
  outline-offset: 3px !important;
}
html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a.hero__discord:focus-visible {
  outline: 2px solid #B9C0FF !important;
  outline-offset: 3px !important;
}

/* ---------- Section tiles ---------- */

html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a {
  --u1-acc: #E9F2FA;
  gap: 12px;
  padding: 6px 14px 6px 9px;
  border: 1px solid var(--u1-hair) !important;
  border-top-color: rgba(226, 236, 248, .22) !important;
  border-radius: 8px !important;
  color: var(--u1-ink) !important;
  background: linear-gradient(180deg, rgba(26, 36, 54, .6) 0%, rgba(10, 16, 28, .74) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(233, 242, 250, .09),
    0 2px 4px rgba(0, 0, 0, .22),
    0 12px 26px -14px rgba(0, 0, 0, .75) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  font: 600 14px/20px "Chakra Petch", Inter, system-ui, sans-serif;
  letter-spacing: .03em !important;
  translate: 0 0;
  transition: translate .24s var(--u1-ease), background .2s ease, border-color .2s ease,
    box-shadow .24s ease, color .2s ease !important;
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[href="#servers"] { --u1-acc: #F0848C; }
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[href="#features"] { --u1-acc: #7FB8F6; }
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[href="#deploy"] { --u1-acc: #6FDCB2; }
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[href="#discord"] { --u1-acc: #ABA0FF; }
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[href="#downloads"] { --u1-acc: #6DD2E4; }
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[href="#feed"] { --u1-acc: #F2A66E; }

/* The section photo stays, veiled to a hint on the right so the card reads as glass. */
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a::before {
  background-image: var(--nav-photo, none);
  background-size: cover;
  background-position: var(--nav-photo-position, center);
  opacity: .34;
  -webkit-mask-image: linear-gradient(90deg, transparent 34%, rgba(0, 0, 0, .85) 100%);
  mask-image: linear-gradient(90deg, transparent 34%, rgba(0, 0, 0, .85) 100%);
  transition: opacity .24s ease;
}

/* Accent underline sits on the bottom hairline. */
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a::after {
  inset: auto 14px -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--u1-acc) 0%, var(--u1-acc) 55%, color-mix(in srgb, var(--u1-acc) 0%, transparent) 100%);
  opacity: .9;
  transform: scaleX(.26);
  transform-origin: left;
  transition: transform .3s var(--u1-ease), opacity .2s ease, box-shadow .2s ease;
}

html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a > .vector-host {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid color-mix(in srgb, var(--u1-acc) 24%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--u1-acc) 10%, transparent) !important;
  color: var(--u1-acc);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a > .vector-host > svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

@media (hover: hover) {
  html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a:hover {
    color: var(--u1-hot) !important;
    border-color: color-mix(in srgb, var(--u1-acc) 40%, rgba(214, 228, 245, .2)) !important;
    background: linear-gradient(180deg, rgba(34, 46, 66, .66) 0%, rgba(14, 22, 36, .8) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(233, 242, 250, .14),
      0 4px 8px rgba(0, 0, 0, .22),
      0 18px 30px -14px rgba(0, 0, 0, .8),
      0 10px 24px -14px color-mix(in srgb, var(--u1-acc) 55%, transparent) !important;
    translate: 0 -2px;
  }
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a:focus-visible {
  color: var(--u1-hot) !important;
  border-color: color-mix(in srgb, var(--u1-acc) 40%, rgba(214, 228, 245, .2)) !important;
  background: linear-gradient(180deg, rgba(34, 46, 66, .66) 0%, rgba(14, 22, 36, .8) 100%) !important;
  outline: 2px solid var(--u1-acc) !important;
  outline-offset: 3px !important;
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[aria-current="location"] {
  color: var(--u1-hot) !important;
  border-color: color-mix(in srgb, var(--u1-acc) 52%, transparent) !important;
  background: linear-gradient(180deg, rgba(30, 42, 60, .66) 0%, rgba(12, 20, 33, .8) 100%) !important;
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a:is(:hover, :focus-visible, [aria-current="location"])::after {
  opacity: 1;
  transform: scaleX(1);
  box-shadow: 0 0 10px color-mix(in srgb, var(--u1-acc) 50%, transparent);
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a:is(:hover, :focus-visible)::before { opacity: .5; }
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a:is(:hover, :focus-visible) > .vector-host {
  border-color: color-mix(in srgb, var(--u1-acc) 42%, transparent);
  background: color-mix(in srgb, var(--u1-acc) 18%, transparent) !important;
  color: var(--u1-acc);
  transform: none;
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a[aria-current="location"] > .vector-host {
  border-color: transparent;
  background: var(--u1-acc) !important;
  color: #0B1220;
}
html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a:active {
  background: linear-gradient(180deg, rgba(12, 18, 30, .8) 0%, rgba(20, 30, 46, .7) 100%) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 1px rgba(0, 0, 0, .3) !important;
  translate: 0 0;
  transition-duration: .06s !important;
}

/* ---------- Narrow screens ---------- */

@media (max-width: 700px) {
  /* LT kicker is 36 characters: the dashes move above the text instead of flanking it. */
  html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker { font-size: 11px; letter-spacing: .16em; }
  /* 2026-10-03: no dashes on narrow screens - stacked above the text they pushed the whole hero down 16px. */
  html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker::before { display: none; }
  html body.sc-network[data-net-page="home"] #top #hero .sc-hero-kicker::after { display: none; }
  html body.sc-network[data-net-page="home"] #top #hero .hero__sub { font-size: 19px; line-height: 27px; }
  html body.sc-network[data-net-page="home"] #top #hero .hero-welcome-description { font-size: 15px; line-height: 24px; }
}
@media (max-width: 600px) {
  html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a {
    padding: 8px 10px 8px 8px;
    gap: 10px;
    font-size: 13px !important;
    line-height: 18px !important;
    letter-spacing: .02em !important;
  }
  html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a > .vector-host {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }
}
@media (max-width: 520px) {
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a {
    width: 260px;
    min-width: 0;
    letter-spacing: .08em !important;
  }
}

/* ---------- Motion and forced colours ---------- */

@media (prefers-reduced-motion: reduce) {
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a,
  html body.sc-network[data-net-page="home"] #top #hero .hero-brand-actions > a > .vector-icon,
  html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a,
  html body.sc-network[data-net-page="home"] #top:has(#hero) .ex-section-nav.section > a::after {
    translate: none !important;
    transition: background .01s, border-color .01s, color .01s, box-shadow .01s, opacity .01s !important;
  }
}
@media (forced-colors: active) {
  html body.sc-network[data-net-page="home"] #top #hero .sc-brand-title {
    background: none;
    -webkit-text-fill-color: currentColor;
    filter: none;
  }
}