@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Special+Elite&display=swap');

:root {
    --black: #0b0c09;
    --deep: #11150f;
    --screen: #172117;
    --metal: #292c22;
    --metal-light: #3a3c2c;
    --edge: #55563b;
    --rust: #875235;
    --rust-dark: #4c3022;
    --phosphor: #a4c98b;
    --bright: #d0e7ae;
    --dim: #6f8961;
    --amber: #c29b55;
    --danger: #c66d48;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    min-height: 100vh;
    overflow-x: hidden;
    color: var(--phosphor);
    background:
        linear-gradient(rgba(9, 11, 8, .92), rgba(9, 11, 8, .92)),
        repeating-linear-gradient(35deg, #25251c 0 2px, #181a14 2px 8px);
    font-family: "Share Tech Mono", monospace;
    font-size: 16px;
    line-height: 1.55;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    opacity: .28;
    background:
        radial-gradient(circle at 12% 18%, #6f4229 0 1px, transparent 2px),
        radial-gradient(circle at 76% 63%, #6f4229 0 1px, transparent 2px);
    background-size: 91px 73px, 137px 113px;
}
.noise, .scanline { position: fixed; inset: 0; z-index: 99; pointer-events: none; }
.noise {
    opacity: .14;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}
.scanline {
    opacity: .22;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 0, 0, .5) 3px 4px);
    animation: crt 10s linear infinite;
}
@keyframes crt { to { transform: translateY(4px); } }
.wrapper { width: min(1220px, 100%); margin: 0 auto; padding: 18px; }
.container { display: grid; grid-template-columns: minmax(0, 2fr) minmax(270px, 1fr); gap: 14px; }

.header, .nav, .main, .sidebar-top, .sidebar-bottom {
    position: relative;
    border: 3px solid var(--edge);
    outline: 1px solid #090a08;
    background: var(--metal);
    box-shadow: inset 0 0 0 2px #191b15, inset 0 0 24px rgba(0,0,0,.6), 5px 7px 0 rgba(0,0,0,.35);
}
.header::before, .nav::before, .main::before, .sidebar-top::before, .sidebar-bottom::before,
.header::after, .nav::after, .main::after, .sidebar-top::after, .sidebar-bottom::after {
    content: "";
    position: absolute;
    z-index: 5;
    width: 7px;
    height: 7px;
    border: 1px solid #0b0c09;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #77785d, #29291e 55%, #111);
    box-shadow: 0 1px 2px #000;
}
.header::before, .nav::before, .main::before, .sidebar-top::before, .sidebar-bottom::before { top: 7px; left: 7px; }
.header::after, .nav::after, .main::after, .sidebar-top::after, .sidebar-bottom::after { right: 7px; bottom: 7px; }

.header {
    grid-column: 1 / -1;
    min-height: 132px;
    display: flex;
    align-items: center;
    padding: 22px 30px;
    overflow: hidden;
    background:
        linear-gradient(100deg, rgba(30,34,25,.88), rgba(15,18,13,.92)),
        repeating-linear-gradient(90deg, transparent 0 28px, rgba(255,255,255,.025) 29px 30px);
}
.header h1 {
    color: var(--bright);
    font: 400 clamp(3.2rem, 8vw, 6rem)/.85 "Special Elite", serif;
    letter-spacing: .08em;
    text-shadow: 0 0 7px var(--phosphor), 3px 3px #172016;
    animation: flicker 5s infinite;
}
@keyframes flicker { 92% { opacity: 1; } 93% { opacity: .72; } 94% { opacity: 1; } }
.brand-mark {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    margin-right: 24px;
    border: 4px double var(--rust);
    border-radius: 50%;
    color: var(--amber);
    background: #171811;
    box-shadow: inset 0 0 13px #000, 0 0 0 4px #1a1b14;
    font: 400 1.6rem/1 "Special Elite", serif;
    transform: rotate(-5deg);
}
.brand-copy { position: relative; z-index: 2; }
.eyebrow { display: block; margin-bottom: 6px; color: var(--amber); font-size: .68rem; letter-spacing: .14em; }
.header p { margin-top: 8px; color: var(--dim); font-size: .72rem; }
.signal-status {
    position: relative;
    z-index: 2;
    margin-left: auto;
    padding: 11px 14px 10px 34px;
    border: 2px inset var(--edge);
    color: var(--amber);
    background: #13150f;
    transform: rotate(1deg);
}
.signal-status strong, .signal-status small { display: block; }
.signal-status strong { font-size: .7rem; }
.signal-status small { color: var(--dim); font-size: .58rem; }
.status-light { position: absolute; left: 13px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: #9fba72; box-shadow: 0 0 8px #a4c98b; animation: blink 1.7s infinite; }
@keyframes blink { 50% { opacity: .25; } }

.nav { grid-column: 1 / 2; min-height: 180px; overflow: hidden; background: linear-gradient(#20231c, #171a15); }
.nav::selection { background: transparent; }
.nav ul { position: relative; z-index: 3; min-height: 64px; display: flex; align-items: stretch; padding: 8px 42px; list-style: none; }
.nav li { flex: 1; }
.nav a {
    height: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-right: 1px dashed #4b5038;
    color: var(--dim);
    text-decoration: none;
    text-transform: uppercase;
    transition: .2s;
}
.nav a span { color: var(--rust); }
.nav a:hover, .nav a.active { color: var(--bright); background: rgba(164,201,139,.07); text-shadow: 0 0 6px var(--phosphor); }
.nav a.active { box-shadow: inset 0 -2px var(--rust); }
.nav-frequency { position: absolute; z-index: 1; inset: 57px 9px 2px; display: flex; align-items: end; gap: 4px; opacity: .25; border-bottom: 2px solid var(--phosphor); pointer-events: none; }
.nav-frequency::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(164,201,139,.18), transparent 65%);
    box-shadow: inset 0 -18px 22px rgba(164,201,139,.07);
}
.nav-frequency i {
    flex: 1;
    height: var(--h);
    min-width: 5px;
    background: linear-gradient(90deg, rgba(164,201,139,.5), var(--phosphor), rgba(164,201,139,.45));
    box-shadow: 0 0 5px rgba(164,201,139,.28);
    transform-origin: bottom;
    animation: frequency var(--d) ease-in-out var(--delay) infinite alternate;
}
@keyframes frequency { from { transform: scaleY(.32); opacity: .45; } to { transform: scaleY(1); opacity: .9; } }
.frequency-scale {
    position: absolute;
    z-index: 4;
    inset: auto 14px 4px;
    display: flex;
    justify-content: space-between;
    padding-top: 5px;
    border-top: 1px solid rgba(164,201,139,.45);
    color: rgba(164,201,139,.56);
    font-size: .47rem;
    pointer-events: none;
}
.frequency-scale span::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 5px;
    margin-top: -6px;
    background: rgba(164,201,139,.55);
}
.frequency-scale b {
    position: absolute;
    left: 42%;
    bottom: 9px;
    padding: 1px 4px;
    border: 1px solid rgba(194,155,85,.55);
    color: var(--amber);
    background: rgba(17,21,15,.8);
    font-size: .5rem;
    font-weight: normal;
    transform: translateX(-50%);
}
.frequency-scale b::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    height: 9px;
    border-left: 1px solid var(--amber);
}

.main {
    grid-column: 1 / 2;
    padding: 32px;
    color: var(--phosphor);
    background:
        radial-gradient(circle at 50% 20%, rgba(74,102,68,.12), transparent 55%),
        linear-gradient(#172117, #101710);
    box-shadow: inset 0 0 55px #050805, 5px 7px 0 rgba(0,0,0,.35);
}
.main::after { box-shadow: 0 0 6px rgba(164,201,139,.16); }
.main h2, .main h3, .sidebar-bottom h3 { color: var(--bright); font-family: "Share Tech Mono", monospace; text-shadow: 0 0 7px rgba(164,201,139,.55); }
.main h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
.main p { max-width: 72ch; }
.section-header, .posts-header { margin-bottom: 26px; padding-bottom: 13px; border-bottom: 2px dashed #46543d; }
.section-kicker { display: block; margin-bottom: 8px; color: var(--amber); font-size: .68rem; letter-spacing: .12em; }
.hero-copy { max-width: 720px; padding: 4px 0 20px; }
.hero-copy h2 { margin-bottom: 20px; font-size: clamp(2.25rem, 5vw, 4.1rem); line-height: 1.08; }
.hero-copy h2 span { color: var(--bright); }
.hero-copy p { color: #91a984; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.telemetry-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-top: 27px; }
.telemetry { padding: 11px 13px; border: 2px inset #3d4432; color: var(--phosphor); background: #11170f; box-shadow: inset 0 0 13px #050705; }
.telemetry::before { content: "●"; float: right; color: var(--dim); font-size: .55rem; text-shadow: 0 0 4px var(--phosphor); animation: blink 2.8s infinite; }
.telemetry small, .telemetry strong { display: block; }
.telemetry small { color: var(--dim); font-size: .58rem; }
.telemetry strong { margin-top: 3px; color: var(--bright); font-size: .83rem; text-shadow: 0 0 5px rgba(164,201,139,.45); }

.cta-button, .read-more, .back-button, .page-btn {
    display: inline-block;
    padding: 9px 17px;
    border: 2px outset #555a40;
    color: var(--bright);
    background: linear-gradient(#3d4530, #252b20);
    box-shadow: 2px 3px 0 #080a07;
    font: inherit;
    font-size: .76rem;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: .15s;
}
.cta-button:hover, .read-more:hover, .back-button:hover, .page-btn:hover { color: #171b13; background: var(--phosphor); border-color: var(--bright); text-shadow: none; }
.cta-button:active, .read-more:active, .back-button:active, .page-btn:active { transform: translate(2px, 2px); box-shadow: none; }
.cta-secondary { color: var(--amber); background: linear-gradient(#3c3525, #27231a); }
.warning-box { margin: 26px 0 0; padding: 14px 17px; border: 2px dashed var(--rust); border-left: 7px solid var(--danger); color: #d6a06e; background: rgba(79,42,25,.3); box-shadow: inset 0 0 16px rgba(0,0,0,.3); }

.post-card, .spec-card {
    position: relative;
    margin-bottom: 17px;
    padding: 20px;
    border: 2px solid #414b38;
    background: rgba(4,8,4,.38);
    box-shadow: inset 0 0 18px rgba(0,0,0,.3);
    transition: .2s;
}
.post-card::after { content: "ARQUIVO"; position: absolute; right: 8px; top: 6px; color: var(--rust); font-size: .52rem; transform: rotate(2deg); }
.post-card:hover, .spec-card:hover { border-color: #708363; background: rgba(28,39,25,.7); transform: translateX(3px); }
.post-card h3, .spec-card h3 { margin: 10px 0 12px; color: var(--bright); }
.post-meta, .post-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.post-meta { color: var(--dim); font-size: .69rem; }
.post-tags { margin: 10px 0 14px; }
.tag { padding: 2px 7px; border: 1px dashed #526047; color: var(--amber); font-size: .64rem; text-transform: uppercase; }
.pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 28px; padding-top: 18px; border-top: 2px dashed #46543d; }
.page-info { color: var(--dim); font-size: .7rem; }
.post-content { color: #a9bd9a; line-height: 1.75; }
.post-content h1, .post-content h2, .post-content h3 { margin: 28px 0 11px; }
.post-content p { margin-bottom: 15px; }
.post-content img { max-width: 100%; height: auto; margin: 22px auto; border: 4px double var(--edge); filter: sepia(.12) contrast(1.05); }
.post-content a { color: var(--amber); }
.post-content blockquote { margin: 20px 0; padding: 14px 18px; border-left: 5px solid var(--amber); color: var(--bright); background: rgba(0,0,0,.28); }
.post-content hr { margin: 28px 0; border: 0; border-top: 2px dashed #46543d; }
.post-content ul, .post-content ol { margin: 12px 0 18px 25px; }
.content-alert { margin: 20px 0; padding: 14px; border: 2px dashed var(--rust); color: #d6a06e; background: rgba(79,42,25,.3); }
.video-frame { position: relative; padding-top: 56.25%; margin: 22px 0; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 3px solid var(--edge); }
.public-search { display: grid; grid-template-columns: 1.5fr 1fr auto auto; gap: 9px; margin-bottom: 24px; padding: 13px; border: 1px dashed #46543d; background: rgba(0,0,0,.25); }
.public-search input, .public-search select { min-width: 0; padding: 9px; border: 2px inset #4c553e; color: var(--bright); background: #0b110a; font: inherit; }
.review-card { display: grid; grid-template-columns: 120px 1fr 1fr; gap: 16px; margin: 28px 0; padding: 18px; border: 2px solid var(--amber); background: rgba(194,155,85,.08); }
.review-score { display: grid; place-content: center; text-align: center; border: 2px inset var(--amber); background: #0b110a; }
.review-score strong { color: var(--bright); font-size: 2.5rem; }
.review-score span { color: var(--amber); }
.review-card h3 { margin-bottom: 8px; font-size: .85rem; }
.review-card ul { margin-left: 18px; }
.related-posts { margin-top: 32px; padding-top: 24px; border-top: 2px dashed #46543d; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.related-grid a { padding: 14px; border: 1px solid #46543d; color: var(--phosphor); background: rgba(0,0,0,.25); text-decoration: none; }
.related-grid a:hover { border-color: var(--amber); }
.related-grid strong, .related-grid small { display: block; }
.related-grid small { margin: 5px 0; color: var(--amber); font-size: .58rem; }
.related-grid p { color: var(--dim); font-size: .72rem; }

.sidebar-top { grid-column: 2 / 3; grid-row: 2 / 3; height: 210px; overflow: hidden; background: #111; }
.sidebar-top img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) sepia(.55) hue-rotate(55deg) brightness(.65) contrast(1.3); }
.camera-overlay { position: absolute; z-index: 4; inset: 14px 16px auto; display: flex; justify-content: space-between; color: var(--bright); font-size: .65rem; text-shadow: 1px 1px #000; }
.recording { color: var(--danger); }
.recording::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: currentColor; animation: blink 1s infinite; }
.camera-focus { position: absolute; left: 50%; top: 50%; width: 48px; height: 32px; border: 1px solid rgba(208,231,174,.5); transform: translate(-50%,-50%); }
.sidebar-bottom { grid-column: 2 / 3; grid-row: 3 / 4; align-self: start; padding: 21px; background: linear-gradient(#1c2419, #11170f); }
.sidebar-bottom::after { box-shadow: 0 0 6px rgba(194,155,85,.2); }
.sidebar-bottom h3 { margin-bottom: 14px; padding-bottom: 9px; border-bottom: 2px dashed #46543d; font-size: 1rem; }
.terminal-text { font-size: .74rem; }
.trans-link, .recent-post a { display: block; margin-bottom: 8px; padding: 9px; border-left: 3px solid #4b573f; color: var(--phosphor) !important; background: rgba(0,0,0,.28); text-decoration: none; transition: .2s; }
.trans-link:hover, .recent-post a:hover { padding-left: 13px; border-left-color: var(--amber); color: var(--bright) !important; background: rgba(85,96,65,.15); }
.link-cta, .recent-post small { display: block; margin-top: 5px; color: var(--dim); font-size: .6rem; }
.recent-post { list-style: none; }

.contact-container { display: grid; gap: 30px; }
.social-grid, .specs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 13px; }
.social-btn { position: relative; display: flex; flex-direction: column; padding: 16px; border: 2px solid #414b38; color: var(--phosphor); background: rgba(0,0,0,.3); text-decoration: none; transition: .2s; }
.social-btn:hover { border-color: var(--amber); color: var(--bright); transform: rotate(-.5deg); }
.social-btn small { color: var(--dim); }
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; color: var(--amber); font-size: .75rem; }
.stalker-input { width: 100%; padding: 11px; border: 2px inset #4c553e; outline: none; color: var(--bright); background: #0b110a; box-shadow: inset 0 0 12px #030503; font: inherit; }
.stalker-input:focus { border-color: var(--phosphor); }
.stat-row { margin-bottom: 13px; }
.stat-label, .equip-list li { display: flex; justify-content: space-between; gap: 12px; }
.stat-label { margin-bottom: 5px; color: var(--dim); font-size: .72rem; }
.progress-bg { height: 8px; border: 1px inset #333a2a; background: #080c07; }
.progress-fill { height: 100%; background: repeating-linear-gradient(90deg, var(--dim) 0 7px, transparent 7px 9px); }
.equip-list { list-style: none; }
.equip-list li { padding: 8px 0; border-bottom: 1px dashed #3e4937; font-size: .76rem; }
.status-online { color: var(--bright); text-shadow: 0 0 4px var(--phosphor); }

.comments-section { margin-top: 34px; padding-top: 25px; border-top: 2px dashed #46543d; }
.comments-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.comments-heading h3 { font-size: 1.35rem; }
.comment-count { padding: 3px 8px; border: 1px dashed var(--rust); color: var(--amber); font-size: .65rem; }
.comment-list { display: grid; gap: 10px; }
.comment-card { border: 1px solid #46543d; border-left: 4px solid #536448; background: rgba(0,0,0,.25); box-shadow: inset 0 0 14px rgba(0,0,0,.25); }
.comment-card.own-comment { border-left-color: var(--amber); }
.comment-card header { display: flex; justify-content: space-between; gap: 10px; padding: 8px 11px; border-bottom: 1px dashed #394432; color: var(--dim); font-size: .66rem; }
.comment-card header strong { color: var(--amber); font-weight: normal; }
.comment-card p { padding: 12px; color: #a9bd9a; white-space: normal; }
.empty-comments { padding: 15px; border: 1px dashed #46543d; color: var(--dim); font-size: .72rem; }
.comment-form { position: relative; margin-top: 22px; padding: 18px; border: 2px inset #3d4432; background: #11170f; box-shadow: inset 0 0 18px #050705; }
.comment-form label { display: block; margin-bottom: 7px; color: var(--amber); font-size: .72rem; }
.comment-form textarea { width: 100%; padding: 11px; resize: vertical; border: 2px inset #4c553e; outline: none; color: var(--bright); background: #0b110a; box-shadow: inset 0 0 12px #030503; font: inherit; }
.comment-form textarea:focus { border-color: var(--phosphor); }
.comment-form-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 10px; }
.comment-form-footer small { max-width: 48ch; color: var(--dim); font-size: .62rem; }
.comment-trap { position: absolute !important; left: -9999px !important; }
.comment-feedback { margin-bottom: 14px; padding: 10px 13px; border: 1px dashed; font-size: .72rem; }
.comment-feedback.success { border-color: var(--phosphor); color: var(--bright); background: rgba(80,110,66,.18); }
.comment-feedback.error { border-color: var(--danger); color: #dc8c6b; background: rgba(94,47,30,.25); }

@media (max-width: 900px) {
    .wrapper { padding: 9px; }
    .container { grid-template-columns: 1fr; gap: 10px; }
    .header, .nav, .main, .sidebar-top, .sidebar-bottom { grid-column: 1; grid-row: auto; }
    .sidebar-top { height: 220px; }
}
@media (max-width: 620px) {
    body { font-size: 14px; }
    .wrapper { padding: 4px; }
    .header { min-height: 110px; padding: 18px; }
    .brand-mark { width: 50px; height: 50px; margin-right: 13px; font-size: 1rem; }
    .header h1 { font-size: 3rem; }
    .header p, .signal-status, .eyebrow { display: none; }
    .nav { min-height: 205px; }
    .nav ul { display: grid; grid-template-columns: 1fr 1fr; padding: 7px; }
    .nav a { min-height: 42px; }
    .nav-frequency { inset: 94px 7px 2px; }
    .frequency-scale { inset: auto 10px 4px; }
    .main { padding: 22px 17px; }
    .hero-copy h2 { font-size: 2.35rem; }
    .telemetry-grid { grid-template-columns: 1fr; }
    .comments-heading, .comment-form-footer { align-items: stretch; flex-direction: column; }
    .public-search, .review-card, .related-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}