:root {
  --ink-900: #121319;
  --ink-850: #16181f;
  --ink-800: #1a1d25;
  --ink-750: #20232d;
  --ink-700: #262a35;
  --ink-600: #333845;
  --graphite: #3a3d42;
  --gold-300: #ffd987;
  --gold-400: #f6c453;
  --gold-500: #f0a93e;
  --amber-500: #ea8a32;
  --orange-600: #e0632a;
  --grad-gold: linear-gradient(102deg,  #f6c453 0%,  #ea8a32 52%,  #e0632a 100%);
  --grad-gold-soft: linear-gradient(102deg,  #f6c45322 0%,  #e0632a14 100%);
  --paper: #f7f3ea;
  --paper-2: #efe9dc;
  --paper-line: #ddd3c1;
  --on-dark: #f4f1ea;
  --on-dark-dim: #b6b3ab;
  --on-dark-faint: #7b7d84;
  --on-light: #23252b;
  --on-light-dim: #5c5e66;
  --line-dark: #ffffff14;
  --line-gold: #f0a93e40;
  --shadow-lg: 0 34px 80px -30px rgba(0,  0,  0,  .7);
  --shadow-gold: 0 24px 60px -24px rgba(224,  99,  42,  .5);
  --maxw: 1240px;
  --pad: clamp(1.25rem,  5vw,  4.5rem);
  --radius: 4px;
  --font-display: "Fraunces",  Georgia,  serif;
  --font-body: "Instrument Sans",  system-ui,  sans-serif;
  --font-mono: "IBM Plex Mono",  ui-monospace,  monospace
}

* {
  margin:0;
  padding:0;
  box-sizing:border-box
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  -webkit-text-size-adjust:100%
}

body {
  font-family:var(--font-body);
  background:var(--ink-900);
  color:var(--on-dark);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden
}

::selection {
  background:var(--gold-500);
  color:var(--ink-900)
}

a {
  color:inherit;
  text-decoration:none
}

img {
  max-width:100%;
  display:block
}

button {
  font-family:inherit;
  cursor:pointer;
  border:none;
  background:none;
  color:inherit
}

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

.wrap {
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad)
}

.section {
  position:relative;
  padding-block:clamp(5rem, 11vw, 9rem)
}

.kicker {
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--gold-500)
}

.kicker:before {
  content:"";
  width:26px;
  height:1px;
  background:var(--grad-gold)
}

.kicker--center:after {
  content:"";
  width:26px;
  height:1px;
  background:var(--grad-gold)
}

.h-display {
  font-family:var(--font-display);
  font-weight:500;
  font-optical-sizing:auto;
  line-height:1.04;
  letter-spacing:-.015em
}

.gold-text {
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.lead {
  color:var(--on-dark-dim);
  font-size:clamp(1.02rem, 1.6vw, 1.18rem);
  max-width:60ch
}

.btn {
  --_pad-y: .92rem;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:var(--_pad-y) 1.5rem;
  font-size:.9rem;
  font-weight:600;
  letter-spacing:.01em;
  border-radius:var(--radius);
  transition:transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background .35s, color .35s, border-color .35s;
  will-change:transform
}

.btn svg {
  width:17px;
  height:17px
}

.btn:hover {
  transform:translateY(-3px)
}

.btn-primary {
  background:var(--grad-gold);
  color:#2a1608;
  box-shadow:var(--shadow-gold)
}

.btn-primary:hover {
  box-shadow:0 28px 66px -22px #e0632ab8
}

.btn-ghost {
  color:var(--on-dark);
  border:1px solid var(--line-dark);
  background:#ffffff05;
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px)
}

.btn-ghost:hover {
  border-color:var(--line-gold);
  background:#f0a93e0f
}

.btn-dark {
  background:var(--ink-900);
  color:var(--on-dark)
}

.btn-dark:hover {
  background:var(--ink-800)
}

.grain {
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  pointer-events:none;
  opacity:.04;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}

.nav {
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  transition:background .4s, border-color .4s, backdrop-filter .4s;
  border-bottom:1px solid transparent
}

.nav.scrolled {
  background:#121319d1;
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--line-dark)
}

.nav__inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  height:76px
}

.nav__logo img {
  height:40px;
  width:auto
}

.nav__links {
  display:flex;
  align-items:center;
  gap:2.1rem;
  list-style:none
}

.nav__links a {
  font-size:.9rem;
  font-weight:500;
  color:var(--on-dark-dim);
  position:relative;
  transition:color .3s
}

.nav__links a:after {
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  height:1.5px;
  width:0;
  background:var(--grad-gold);
  transition:width .35s cubic-bezier(.2, .8, .2, 1)
}

.nav__links a:hover {
  color:var(--on-dark)
}

.nav__links a:hover:after {
  width:100%
}

.nav__cta {
  display:flex;
  align-items:center;
  gap:1rem
}

.nav__menu>li:last-child {
  display:none
}

.nav__burger {
  display:none;
  flex-direction:column;
  gap:5px;
  padding:8px
}

.nav__burger span {
  width:24px;
  height:2px;
  background:var(--on-dark);
  transition:transform .3s, opacity .3s
}

.nav.open .nav__burger span:nth-child(1) {
  transform:translateY(7px) rotate(45deg)
}

.nav.open .nav__burger span:nth-child(2) {
  opacity:0
}

.nav.open .nav__burger span:nth-child(3) {
  transform:translateY(-7px) rotate(-45deg)
}

.hero {
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:center;
  padding-top:96px;
  padding-bottom:4rem;
  overflow:hidden;
  background:radial-gradient(120% 90% at 88% -10%, rgba(240, 169, 62, .16), transparent 55%), radial-gradient(90% 80% at 0% 100%, rgba(224, 99, 42, .1), transparent 55%), var(--ink-900)
}

.hero__grid {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  pointer-events:none;
  background-image:linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 100% at 70% 30%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(120% 100% at 70% 30%, #000 20%, transparent 78%)
}

.hero__inner {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:center;
  width:100%
}

.hero__partner {
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  padding:.5rem .95rem .5rem .6rem;
  border:1px solid var(--line-dark);
  border-radius:100px;
  background:#ffffff08;
  margin-bottom:1.9rem
}

.hero__partner .dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold-400);
  box-shadow:0 0 0 4px #f6c4532e;
  animation:pulse 2.6s ease-in-out infinite
}

@keyframes pulse {
50% {
  box-shadow:0 0 0 8px #f6c45300
}
}

.hero__partner img {
  height:15px;
  width:auto;
  opacity:.92
}

.hero__partner span {
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--on-dark-dim)
}

.hero h1 {
  font-size:clamp(2.4rem, 5.6vw, 4.5rem);
  margin-bottom:1.6rem
}

.hero h1 em {
  font-style:italic;
  font-weight:400
}

.hero__lead {
  font-size:clamp(1.05rem, 1.7vw, 1.24rem);
  color:var(--on-dark-dim);
  max-width:46ch;
  margin-bottom:2.4rem
}

.hero__actions {
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  margin-bottom:2.6rem
}

.hero__checks {
  display:flex;
  flex-direction:column;
  gap:.7rem;
  border-top:1px solid var(--line-dark);
  padding-top:1.8rem
}

.hero__checks li {
  display:flex;
  align-items:center;
  gap:.8rem;
  font-size:.95rem;
  color:var(--on-dark-dim);
  list-style:none
}

.hero__checks .tick {
  flex:none;
  width:20px;
  height:20px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--grad-gold);
  color:#2a1608
}

.hero__checks .tick svg {
  width:11px;
  height:11px
}

.panel {
  position:relative;
  background:linear-gradient(180deg, var(--ink-750), var(--ink-850));
  border:1px solid var(--line-dark);
  border-radius:10px;
  padding:1.6rem;
  box-shadow:var(--shadow-lg);
  transform:perspective(1600px) rotateY(-9deg) rotateX(3deg);
  transform-style:preserve-3d
}

.panel:before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  border-radius:10px;
  padding:1px;
  background:linear-gradient(150deg, var(--line-gold), transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none
}

.panel__head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-bottom:1.1rem;
  border-bottom:1px solid var(--line-dark);
  margin-bottom:1.3rem
}

.panel__head .title {
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--on-dark-dim)
}

.panel__dots {
  display:flex;
  gap:6px
}

.panel__dots i {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--ink-600)
}

.panel__dots i:first-child {
  background:var(--gold-500)
}

.panel__metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem;
  margin-bottom:1.2rem
}

.metric {
  background:#ffffff05;
  border:1px solid var(--line-dark);
  border-radius:6px;
  padding:1rem 1rem .9rem
}

.metric .label {
  font-size:.72rem;
  color:var(--on-dark-faint);
  margin-bottom:.5rem
}

.metric .val {
  font-family:var(--font-display);
  font-size:1.9rem;
  font-weight:600;
  line-height:1
}

.metric .val span {
  font-size:1.1rem
}

.metric.up .val {
  color:var(--gold-400)
}

.metric .bar {
  margin-top:.7rem;
  height:5px;
  border-radius:3px;
  background:var(--ink-700);
  overflow:hidden
}

.metric .bar i {
  display:block;
  height:100%;
  border-radius:3px;
  background:var(--grad-gold);
  transform-origin:left;
  animation:grow 1.4s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay:.6s
}

@keyframes grow {
0% {
  transform:scaleX(0)
}
}

.panel__rows {
  display:flex;
  flex-direction:column;
  gap:.55rem
}

.panel__rows .row {
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.82rem;
  color:var(--on-dark-dim);
  padding:.55rem .7rem;
  border-radius:5px;
  background:#ffffff04
}

.panel__rows .row b {
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:.72rem;
  color:var(--gold-400);
  font-weight:500
}

.panel__rows .row .ic {
  width:22px;
  height:22px;
  border-radius:5px;
  display:grid;
  place-items:center;
  background:#f0a93e1f;
  color:var(--gold-400)
}

.panel__rows .row .ic svg {
  width:12px;
  height:12px
}

.panel__badge {
  position:absolute;
  bottom:-22px;
  left:-26px;
  display:flex;
  align-items:center;
  gap:.7rem;
  background:var(--paper);
  color:var(--on-light);
  padding:.7rem 1rem;
  border-radius:8px;
  box-shadow:var(--shadow-lg);
  transform:translateZ(60px)
}

.panel__badge .big {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.35rem;
  line-height:1
}

.panel__badge small {
  display:block;
  font-size:.66rem;
  letter-spacing:.04em;
  color:var(--on-light-dim);
  max-width:12ch
}

.marquee {
  border-block:1px solid var(--line-dark);
  background:var(--ink-850);
  overflow:hidden;
  padding-block:1.05rem
}

.marquee__track {
  display:flex;
  gap:3.2rem;
  white-space:nowrap;
  width:max-content;
  animation:slide 34s linear infinite
}

.marquee:hover .marquee__track {
  animation-play-state:paused
}

@keyframes slide {
to {
  transform:translate(-50%)
}
}

.marquee__item {
  display:inline-flex;
  align-items:center;
  gap:.9rem;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-dark-dim)
}

.marquee__item:before {
  content:"◆";
  color:var(--gold-500);
  font-size:.6rem
}

.sobre {
  background:var(--paper);
  color:var(--on-light)
}

.sobre__grid {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(2.5rem, 6vw, 5.5rem);
  align-items:center
}

.sobre .kicker {
  color:var(--orange-600)
}

.sobre__aside {
  position:relative
}

.sobre__figure {
  position:relative;
  border-radius:12px;
  background:linear-gradient(160deg, var(--ink-800), var(--ink-900));
  padding:clamp(2.2rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem) clamp(4.5rem, 7vw, 6rem);
  overflow:hidden;
  box-shadow:0 40px 80px -40px #3a3d4280
}

.sobre__figure:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-image:linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size:40px 40px;
  mask-image:radial-gradient(80% 80% at 50% 0%, #000, transparent 75%);
  -webkit-mask-image:radial-gradient(80% 80% at 50% 0%, #000, transparent 75%)
}

.sobre__figure img {
  position:relative;
  z-index:1;
  width:min(260px, 70%);
  margin-inline:auto;
  filter:drop-shadow(0 12px 24px rgba(0, 0, 0, .4))
}

.sobre__figure .rep {
  position:relative;
  z-index:1;
  margin-top:1.6rem;
  text-align:center;
  font-family:var(--font-mono);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold-400)
}

.sobre__badges {
  position:absolute;
  bottom:-26px;
  right:-14px;
  left:-14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.9rem
}

.sobre__badge {
  background:#fff;
  border:1px solid var(--paper-line);
  border-radius:10px;
  padding:1rem 1.1rem;
  box-shadow:0 20px 40px -24px #3a3d4266
}

.sobre__badge b {
  font-family:var(--font-display);
  display:block;
  font-size:1.05rem;
  color:var(--on-light);
  margin-bottom:.15rem
}

.sobre__badge span {
  font-size:.78rem;
  color:var(--on-light-dim);
  line-height:1.35
}

.sobre h2 {
  font-size:clamp(1.9rem, 3.6vw, 3rem);
  color:var(--on-light);
  margin:1.3rem 0 1.5rem
}

.sobre p {
  color:var(--on-light-dim);
  margin-bottom:1.1rem;
  max-width:56ch
}

.sobre strong {
  color:var(--on-light);
  font-weight:600
}

.dif {
  background:var(--ink-900)
}

.dif__head {
  max-width:760px;
  margin-bottom:clamp(2.5rem, 5vw, 4rem)
}

.dif__head h2 {
  font-size:clamp(1.9rem, 3.8vw, 3rem);
  margin:1.3rem 0 1.2rem
}

.dif__grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.4rem
}

.difcard {
  position:relative;
  padding:2.2rem 1.9rem 2rem;
  border:1px solid var(--line-dark);
  border-radius:10px;
  background:linear-gradient(180deg, var(--ink-800), var(--ink-850));
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2, .8, .2, 1), border-color .45s
}

.difcard:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:var(--grad-gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .5s cubic-bezier(.2, .8, .2, 1)
}

.difcard:hover {
  transform:translateY(-6px);
  border-color:var(--line-gold)
}

.difcard:hover:before {
  transform:scaleX(1)
}

.difcard__num {
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.2em;
  color:var(--gold-500);
  margin-bottom:1.5rem;
  display:block
}

.difcard__ic {
  width:52px;
  height:52px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#f0a93e1a;
  border:1px solid var(--line-gold);
  color:var(--gold-400);
  margin-bottom:1.4rem
}

.difcard__ic svg {
  width:24px;
  height:24px
}

.difcard h3 {
  font-family:var(--font-display);
  font-weight:600;
  font-size:1.28rem;
  margin-bottom:.75rem;
  line-height:1.2
}

.difcard p {
  color:var(--on-dark-dim);
  font-size:.94rem
}

.sis {
  background:var(--ink-850);
  position:relative
}

.sis__head {
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:2.5rem;
  align-items:end;
  margin-bottom:clamp(2.5rem, 5vw, 3.5rem)
}

.sis__head h2 {
  font-size:clamp(1.9rem, 3.8vw, 3rem);
  margin-top:1.3rem
}

.sis__head p {
  color:var(--on-dark-dim)
}

.sis__grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
  gap:1.2rem
}

.syscard {
  position:relative;
  display:flex;
  flex-direction:column;
  padding:1.7rem 1.6rem 1.5rem;
  border:1px solid var(--line-dark);
  border-radius:10px;
  background:var(--ink-800);
  overflow:hidden;
  transition:transform .4s cubic-bezier(.2, .8, .2, 1), border-color .4s, background .4s
}

.syscard:after {
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:radial-gradient(120% 90% at 100% 0%, rgba(240, 169, 62, .08), transparent 55%);
  opacity:0;
  transition:opacity .4s
}

.syscard:hover {
  transform:translateY(-5px);
  border-color:var(--line-gold);
  background:var(--ink-750)
}

.syscard:hover:after {
  opacity:1
}

.syscard__top {
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:1.2rem
}

.syscard__code {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.02em;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

.syscard__area {
  font-family:var(--font-mono);
  font-size:.64rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-faint);
  border:1px solid var(--line-dark);
  border-radius:100px;
  padding:.3rem .7rem
}

.syscard h3 {
  position:relative;
  z-index:1;
  font-size:1.05rem;
  font-weight:600;
  margin-bottom:.7rem;
  line-height:1.25
}

.syscard p {
  position:relative;
  z-index:1;
  font-size:.85rem;
  color:var(--on-dark-dim);
  margin-bottom:1.3rem;
  flex-grow:1
}

.syscard__link {
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--gold-400)
}

.syscard__link svg {
  width:13px;
  height:13px;
  transition:transform .3s
}

.syscard:hover .syscard__link svg {
  transform:translate(3px, -3px)
}

.stats {
  margin-top:clamp(3rem, 6vw, 4.5rem);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  border:1px solid var(--line-dark);
  border-radius:12px;
  overflow:hidden;
  background:linear-gradient(180deg, var(--ink-800), var(--ink-850))
}

.stat {
  padding:2.2rem 2rem;
  border-right:1px solid var(--line-dark)
}

.stat:last-child {
  border-right:none
}

.stat__val {
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem, 4vw, 3.2rem);
  line-height:1;
  background:var(--grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-bottom:.8rem
}

.stat__label {
  color:var(--on-dark-dim);
  font-size:.92rem;
  max-width:26ch
}

.cta {
  position:relative;
  background:radial-gradient(100% 120% at 0% 0%, rgba(240, 169, 62, .14), transparent 50%), radial-gradient(90% 100% at 100% 100%, rgba(224, 99, 42, .12), transparent 55%), var(--ink-900);
  overflow:hidden
}

.cta__grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2.5rem, 6vw, 5rem);
  align-items:start
}

.cta h2 {
  font-size:clamp(2.1rem, 4.4vw, 3.4rem);
  margin:1.3rem 0 1.4rem;
  max-width:15ch
}

.cta__lead {
  color:var(--on-dark-dim);
  margin-bottom:2.2rem;
  max-width:46ch
}

.cta__channels {
  display:flex;
  flex-direction:column;
  gap:1rem
}

.channel {
  display:flex;
  align-items:center;
  gap:1rem;
  padding:1.1rem 1.3rem;
  border:1px solid var(--line-dark);
  border-radius:10px;
  background:#ffffff05;
  transition:border-color .35s, transform .35s, background .35s
}

.channel:hover {
  border-color:var(--line-gold);
  transform:translate(4px);
  background:#f0a93e0d
}

.channel__ic {
  flex:none;
  width:44px;
  height:44px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--grad-gold);
  color:#2a1608
}

.channel__ic svg {
  width:20px;
  height:20px
}

.channel small {
  display:block;
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--on-dark-faint);
  margin-bottom:.2rem
}

.channel b {
  font-size:1rem;
  font-weight:600
}

.channel .arrow {
  margin-left:auto;
  color:var(--on-dark-faint);
  transition:transform .3s, color .3s
}

.channel:hover .arrow {
  color:var(--gold-400);
  transform:translate(3px)
}

.form {
  background:linear-gradient(180deg, var(--ink-800), var(--ink-850));
  border:1px solid var(--line-dark);
  border-radius:14px;
  padding:clamp(1.6rem, 3vw, 2.4rem);
  box-shadow:var(--shadow-lg)
}

.form__head {
  display:flex;
  align-items:center;
  gap:.8rem;
  padding-bottom:1.3rem;
  margin-bottom:1.6rem;
  border-bottom:1px solid var(--line-dark)
}

.form__head img {
  height:26px
}

.form__head .div {
  width:1px;
  height:22px;
  background:var(--line-dark)
}

.form__head span {
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-dark-faint)
}

.field {
  margin-bottom:1.1rem
}

.field label {
  display:block;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--on-dark-dim);
  margin-bottom:.5rem
}

.field label i {
  color:var(--gold-500);
  font-style:normal
}

.field input, .field textarea {
  width:100%;
  font-family:inherit;
  font-size:.94rem;
  color:var(--on-dark);
  background:#ffffff08;
  border:1px solid var(--line-dark);
  border-radius:7px;
  padding:.8rem .9rem;
  transition:border-color .3s, background .3s, box-shadow .3s
}

.field input::placeholder, .field textarea::placeholder {
  color:var(--on-dark-faint)
}

.field input:focus, .field textarea:focus {
  outline:none;
  border-color:var(--gold-500);
  background:#f0a93e0d;
  box-shadow:0 0 0 3px #f0a93e1f
}

.field textarea {
  resize:vertical;
  min-height:96px
}

.field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem
}

.form .btn {
  width:100%;
  justify-content:center;
  margin-top:.4rem
}

.form__note {
  margin-top:1rem;
  font-size:.76rem;
  color:var(--on-dark-faint);
  text-align:center
}

.footer {
  background:var(--ink-850);
  border-top:1px solid var(--line-dark);
  padding-block:clamp(3rem, 6vw, 4.5rem) 2rem
}

.footer__grid {
  display:grid;
  grid-template-columns:1.6fr 1fr 1.4fr;
  gap:clamp(2rem, 5vw, 4rem);
  padding-bottom:2.6rem;
  border-bottom:1px solid var(--line-dark)
}

.footer__brand img.logo {
  height:46px;
  margin-bottom:1.3rem
}

.footer__brand p {
  color:var(--on-dark-dim);
  font-size:.92rem;
  max-width:34ch;
  margin-bottom:1.4rem
}

.footer__partner {
  display:inline-flex;
  align-items:center;
  gap:.8rem;
  padding:.6rem 1rem;
  border:1px solid var(--line-dark);
  border-radius:8px
}

.footer__partner img {
  height:20px;
  filter:brightness(0) invert(1);
  opacity:.9
}

.footer__partner span {
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--on-dark-faint)
}

.footer h4 {
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-bottom:1.3rem
}

.footer__links {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.75rem
}

.footer__links a {
  color:var(--on-dark-dim);
  font-size:.92rem;
  transition:color .3s, padding-left .3s
}

.footer__links a:hover {
  color:var(--gold-400);
  padding-left:5px
}

.footer__official p {
  color:var(--on-dark-dim);
  font-size:.88rem;
  line-height:1.6
}

.footer__bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:1rem;
  padding-top:1.8rem
}

.footer__bottom p {
  font-size:.8rem;
  color:var(--on-dark-faint)
}

.footer__bottom .credit {
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.04em
}

.wa-float {
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:90;
  width:58px;
  height:58px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg, #2bd66a, #1eae53);
  color:#fff;
  box-shadow:0 16px 36px -12px #1eae5399;
  transition:transform .35s cubic-bezier(.2, .8, .2, 1);
  animation:floaty 3.4s ease-in-out infinite
}

.wa-float:hover {
  transform:scale(1.08) translateY(-2px)
}

.wa-float svg {
  width:30px;
  height:30px
}

@keyframes floaty {
50% {
  transform:translateY(-6px)
}
}

[data-reveal] {
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
  transition-delay:var(--d,  0ms)
}

[data-reveal].is-visible {
  opacity:1;
  transform:none
}

@media (max-width: 980px) {
.hero__inner, .sobre__grid, .sis__head, .cta__grid {
  grid-template-columns:1fr
}

.hero__visual {
  display:none
}

.dif__grid {
  grid-template-columns:1fr
}

.sis__head {
  align-items:start
}
}

@media (max-width: 760px) {
.nav__links, .nav__cta .btn {
  display:none
}

.nav__burger {
  display:flex
}

.nav__menu {
  display: flex !important;
  position: fixed;
  inset: 76px 0 auto 0;
  background: #121319f7;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-dark);
  flex-direction: column;
  align-items: flex-start;
  gap: 0!important;
  padding: 1rem var(--pad) 1.6rem;
  transform: translateY(-140%);
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
  z-index: 999 !important;
}

.nav.open .nav__menu,
#nav-bar.open #nav-menu {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

.nav__menu li {
  width:100%;
  border-bottom:1px solid var(--line-dark)
}

.nav__menu>li:last-child {
  display:block;
  border-bottom:none
}

.nav__menu a {
  display:block;
  padding:1rem 0;
  font-size:1rem
}

.nav__menu .btn {
  display:inline-flex;
  margin-top:1.2rem;
  width:100%;
  justify-content:center
}

.stats, .field-row {
  grid-template-columns:1fr
}

.stat {
  border-right:none;
  border-bottom:1px solid var(--line-dark)
}

.stat:last-child {
  border-bottom:none
}

.footer__grid {
  grid-template-columns:1fr
}

.sobre__badges {
  position:static;
  margin-top:1.5rem
}
}

@media (prefers-reduced-motion: reduce) {
*, *:before, *:after {
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:.001ms!important;
  scroll-behavior:auto!important
}
}

/* Feedback do Formulário */
.form-feedback {
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease, display 0.4s ease;
}
.form-feedback.success {
  display: block;
  opacity: 1;
  background-color: rgba(43, 214, 106, 0.1);
  border: 1px solid rgba(43, 214, 106, 0.3);
  color: #2bd66a;
}
.form-feedback.error {
  display: block;
  opacity: 1;
  background-color: rgba(224, 99, 42, 0.1);
  border: 1px solid rgba(224, 99, 42, 0.3);
  color: #e0632a;
}