:root {
  --white: #f8f8f6;
  --ink: #1b2224;
  --muted: #6f7779;
  --line: #d9dddc;
  --cyan: #13b8bd;
  --rust: #db6b47;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: "Noto Sans SC", sans-serif; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.topbar {
  height: 100px;
  padding: 0 clamp(24px, 3.5vw, 64px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 30px;
  background: rgba(248,248,246,.97);
  position: relative;
  z-index: 20;
}
.identity { display: inline-flex; align-items: center; gap: 16px; width: max-content; font-size: 17px; letter-spacing: .03em; }
.crest { width: 50px; height: 58px; display: grid; place-items: center; position: relative; color: var(--ink); border: 1px solid var(--ink); clip-path: polygon(50% 0, 92% 13%, 86% 79%, 50% 100%, 14% 79%, 8% 13%); background: var(--white); }
.crest::before { content:""; position:absolute; inset:5px; border:1px solid rgba(27,34,36,.35); clip-path:inherit; }
.crest i { font-family: Georgia, serif; font-size: 24px; font-style: italic; line-height: 1; }.crest b { position:absolute; bottom:8px; font: 500 7px "DM Mono"; letter-spacing:.14em; }
nav { display: flex; align-items: center; gap: clamp(24px, 3.5vw, 58px); height: 100%; }
nav a { height: 100%; display: grid; place-items: center; font-size: 15px; font-weight: 400; position: relative; }
nav a::after { content:""; position:absolute; bottom:24px; left:50%; right:50%; height:1px; background:var(--cyan); transition:.25s; }
nav a:hover::after, nav a.active::after { left:0; right:0; }
nav a:hover, nav a.active { color: var(--cyan); }
.nav-copy { justify-self: end; border: 0; background: transparent; display: grid; grid-template-columns: auto auto; column-gap: 9px; cursor: pointer; text-align: left; padding: 8px 0; }
.nav-copy > span:nth-child(2) { font: 500 13px "DM Mono"; letter-spacing: .08em; }.nav-copy small { grid-column:2; color:var(--muted); font-size:10px; }
.status-dot { width:8px; height:8px; background:var(--cyan); border-radius:50%; grid-row:1/3; align-self:center; box-shadow:0 0 0 4px rgba(19,184,189,.12); }
.menu-toggle { display:none; border:0; background:transparent; width:34px; padding:8px 0; }.menu-toggle span { display:block; height:1px; background:var(--ink); margin:7px 0; }

.hero { height: calc(100vh - 100px); min-height: 640px; position: relative; color: white; background: url("assets/abnt-hero.png") center 58% / cover no-repeat; overflow:hidden; }
.hero-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,18,23,.28), rgba(12,17,20,.1) 43%, rgba(7,11,13,.62)); }
.hero-shade::after { content:""; position:absolute; inset:0; background:rgba(125,155,165,.08); backdrop-filter:saturate(.8); }
.hero-content { position:relative; height:100%; z-index:2; display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(55px,8vh,100px) 20px 100px; }
.overline { font:400 11px "DM Mono"; letter-spacing:.35em; opacity:.78; margin:0 0 15px; }
.typing-title { margin:0; font:300 clamp(34px,4.2vw,68px) "DM Mono"; letter-spacing:.1em; text-shadow:0 2px 18px rgba(0,0,0,.3); min-height:1.2em; }
.typing-title em { font-style:normal; font-weight:300; opacity:.8; }
.typing-title .typed-char { opacity:0; display:inline-block; animation:typeIn .35s forwards; }
@keyframes typeIn { from { opacity:0; transform:translateY(6px); filter:blur(4px); } to { opacity:1; transform:none; filter:none; } }
.hero-crest { margin:clamp(36px,7vh,74px) 0 22px; width:102px; height:112px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.85); clip-path:polygon(50% 0,94% 15%,87% 78%,50% 100%,13% 78%,6% 15%); background:rgba(12,19,22,.2); backdrop-filter:blur(4px); position:relative; }
.hero-crest::after { content:""; position:absolute; inset:7px; border:1px solid rgba(255,255,255,.45); clip-path:inherit; }.hero-crest span { font:italic 47px Georgia,serif; }.hero-crest i { font:500 7px "DM Mono"; font-style:normal; letter-spacing:.16em; }
.tagline { margin:0 0 27px; font-size:16px; font-weight:300; letter-spacing:.16em; text-shadow:0 2px 10px #000; }
.hero-copy { display:grid; grid-template-columns:1fr auto; gap:2px 22px; border:1px solid rgba(255,255,255,.65); color:white; background:rgba(10,18,22,.35); backdrop-filter:blur(8px); padding:13px 17px; cursor:pointer; text-align:left; transition:.25s; }
.hero-copy:hover { background:rgba(19,184,189,.74); border-color:transparent; }.hero-copy small { grid-column:1; font-size:10px; letter-spacing:.12em; opacity:.75; }.hero-copy strong { grid-column:1; font:500 19px "DM Mono"; letter-spacing:.12em; }.hero-copy span { grid-column:2; grid-row:1/3; align-self:center; font-size:12px; }
.hero-footer { position:absolute; left:clamp(24px,4vw,65px); right:clamp(24px,4vw,65px); bottom:28px; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; font:300 11px "DM Mono"; letter-spacing:.16em; color:rgba(255,255,255,.75); }
.hero-footer a { color:white; }.hero-footer a b { color:var(--cyan); }.hero-footer > span:last-child { justify-self:end; }

.section { padding: clamp(95px,12vw,180px) clamp(24px,8vw,140px); }
.section-label { font:500 12px "DM Mono"; letter-spacing:.17em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:12px; }.section-label span { color:var(--cyan); }.section-label::after { content:""; width:42px; height:1px; background:var(--line); }
.intro { display:grid; grid-template-columns:.35fr 1.15fr .5fr; gap:6vw; align-items:start; }
.intro-copy h2, .support-copy h2 { font-size:clamp(39px,5.2vw,78px); line-height:1.24; letter-spacing:-.05em; font-weight:300; margin:0 0 50px; }.intro-copy h2 span,.support-copy h2 span { color:var(--cyan); }
.intro-copy p { max-width:700px; margin:0 0 18px; color:var(--muted); font-size:16px; line-height:2; font-weight:300; }
.server-note { border-top:1px solid var(--ink); margin-top:14px; }.server-note > div { border-bottom:1px solid var(--line); padding:18px 0; display:flex; flex-direction:column; gap:5px; }.server-note small { color:var(--muted); font-size:11px; }.server-note strong { font:400 16px "DM Mono"; }
.plain-copy { border:0; border-bottom:1px solid var(--ink); padding:14px 0 7px; margin-top:18px; background:transparent; cursor:pointer; text-align:left; font-size:13px; width:100%; }.plain-copy:hover { color:var(--cyan); border-color:var(--cyan); }

.stack { color:var(--white); background:var(--ink); display:grid; grid-template-columns:.35fr .65fr 1fr; gap:6vw; }.section-label.light { color:rgba(255,255,255,.5); }.section-label.light::after { background:rgba(255,255,255,.18); }
.stack-heading p { color:rgba(255,255,255,.55); font-size:14px; line-height:1.8; margin:0 0 30px; }.stack-heading h2 { font-weight:300; font-size:clamp(38px,4.3vw,68px); line-height:1.2; letter-spacing:-.05em; margin:0; }
.route { display:grid; grid-template-columns:1fr 42px 1fr; gap:0; align-items:stretch; }
.route-entry { grid-column:1/4; border:1px solid rgba(255,255,255,.45); padding:17px 21px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; }.route-entry span { color:var(--cyan); font:9px "DM Mono"; }.route-entry small { font:8px "DM Mono"; letter-spacing:.12em; margin-left:12px; color:rgba(255,255,255,.4); }.route-entry strong { font:400 18px "DM Mono"; }
.route-line { grid-column:1/4; height:52px; display:grid; grid-template-columns:1fr 42px 1fr; }.route-line i,.route-line b { position:relative; }.route-line i::before { content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:rgba(255,255,255,.35); }.route-line b::after { content:""; position:absolute; left:-50%; right:-50%; bottom:0; height:1px; background:rgba(255,255,255,.35); }
.route article { border:1px solid rgba(255,255,255,.45); padding:27px; }.route article:nth-of-type(2) { grid-column:3; }.route article > span { color:var(--cyan); font:10px "DM Mono"; }.route h3 { font:400 clamp(25px,3vw,42px) "DM Mono"; margin:35px 0 4px; }.route article p { font:300 14px "DM Mono"; margin:0 0 28px; }.route article small { color:rgba(255,255,255,.55); font-size:11px; }
.route-foot { grid-column:1/4; background:var(--cyan); color:var(--ink); padding:12px 15px; font:500 11px "DM Mono"; letter-spacing:.1em; }

.support { display:grid; grid-template-columns:.35fr 1fr .65fr; gap:6vw; align-items:center; }.support-copy h2 { font-size:clamp(37px,4.7vw,70px); }.support-copy p { color:var(--muted); max-width:700px; line-height:2; font-weight:300; font-size:16px; }.support-copy a { display:inline-block; margin-top:35px; color:var(--cyan); border-bottom:1px solid var(--cyan); padding-bottom:8px; font-size:15px; }
.support-ticket { background:#e4e5df; padding:28px; transform:rotate(2deg); box-shadow:12px 12px 0 #ccd1ce; }.ticket-top { display:flex; justify-content:space-between; padding-bottom:18px; border-bottom:1px dashed var(--ink); font:8px "DM Mono"; }.support-ticket > strong { display:block; font:500 clamp(35px,4vw,59px)/.92 "DM Mono"; margin:35px 0; }.ticket-perks { display:flex; flex-wrap:wrap; gap:7px; border-top:1px dashed var(--ink); padding-top:18px; }.ticket-perks span { border:1px solid var(--ink); padding:5px 7px; font:7px "DM Mono"; }.support-ticket > small { display:block; margin-top:25px; color:var(--muted); font-size:8px; }

.join { height:70vh; min-height:550px; position:relative; display:grid; place-items:center; text-align:center; color:white; overflow:hidden; }.join-bg { position:absolute; inset:-10%; background:linear-gradient(rgba(13,20,23,.55),rgba(13,20,23,.8)),url("assets/abnt-hero.png") center 80%/cover; filter:saturate(.6); }.join-content { position:relative; z-index:2; }.join-content p { font:9px "DM Mono"; letter-spacing:.25em; opacity:.7; }.join h2 { font-size:clamp(45px,7vw,100px); font-weight:300; letter-spacing:-.06em; margin:15px 0 40px; }.join button { border:0; background:transparent; color:white; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:9px; }.join button span { font:300 clamp(27px,3vw,46px) "DM Mono"; letter-spacing:.16em; border-bottom:1px solid var(--cyan); padding-bottom:8px; }.join button small { opacity:.55; }

footer { min-height:130px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:25px clamp(24px,4vw,65px); font-size:11px; color:var(--muted); }.footer-brand { transform:scale(.84); transform-origin:left center; }.footer-brand + p { text-align:center; }.footer-brand ~ span { justify-self:end; font-family:"DM Mono"; }
.toast { position:fixed; left:50%; bottom:26px; z-index:50; transform:translate(-50%,100px); background:var(--ink); color:white; padding:12px 18px; font:10px "DM Mono"; box-shadow:0 8px 30px rgba(0,0,0,.2); transition:.3s; }.toast.show { transform:translate(-50%,0); }
.reveal { opacity:0; transform:translateY(25px); transition:opacity .7s ease,transform .7s ease; }.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1000px) {
  .topbar { grid-template-columns:1fr auto; height:82px; }.topbar nav { position:absolute; top:82px; left:0; right:0; height:auto; background:var(--white); flex-direction:column; gap:0; padding:15px 25px 25px; transform:translateY(-120%); opacity:0; pointer-events:none; transition:.25s; }.topbar nav.open { transform:none; opacity:1; pointer-events:auto; }.topbar nav a { height:auto; width:100%; padding:15px; }.topbar nav a::after { bottom:8px; }.nav-copy { display:none; }.menu-toggle { display:block; justify-self:end; }
  .hero { height:calc(100vh - 82px); }.intro,.stack,.support { grid-template-columns:1fr; }.intro-copy,.stack-heading,.support-copy { max-width:800px; }.server-note { max-width:500px; }.route { max-width:720px; }.support-ticket { max-width:520px; }
}
@media (max-width: 600px) {
  .identity { font-size:14px; gap:10px; }.crest { width:40px; height:47px; }.topbar { padding:0 18px; }
  .hero-content { padding-top:65px; }.typing-title { font-size:27px; letter-spacing:.04em; }.hero-crest { margin-top:48px; }.hero-footer { grid-template-columns:1fr 1fr; }.hero-footer a { display:none; }
  .section { padding-left:22px; padding-right:22px; }.intro-copy h2,.support-copy h2 { font-size:38px; }.stack-heading h2 { font-size:40px; }
  .route { grid-template-columns:1fr; gap:10px; }.route-entry,.route-foot { grid-column:1; }.route-line { display:none; }.route article,.route article:nth-of-type(2) { grid-column:1; }.support-ticket { transform:none; }
  footer { grid-template-columns:1fr 1fr; } footer p { display:none; }
}
@media (prefers-reduced-motion: reduce) { html{scroll-behavior:auto}.typing-title .typed-char{animation:none;opacity:1}.reveal{opacity:1;transform:none;transition:none} }