:root {
    --bg:#070707;
    --bg2:#0d0d0d;
    --card:#111111;
    --card2:#151515;
    --gold:#d6a72d;
    --gold2:#f0c24f;
    --silver:#d9d9d9;
    --text:#f4f4f4;
    --muted:#a9a9a9;
    --line:rgba(214,167,45,.24);
    --green:#43d17a;
    --radius:18px;
    --max:1240px;
}

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

html {
    scroll-behavior:smooth
}

body {
    font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6
}

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

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

.container {
    width:min(var(--max),calc(100% - 40px));
    margin:auto
}

.topbar {
    height:4px;
    background:linear-gradient(90deg,transparent,var(--gold),transparent)
}

.navbar {
    position:sticky;
    top:0;
    z-index:100;
    background:rgba(7,7,7,.86);
    backdrop-filter:blur(18px);
    border-bottom:1px solid rgba(255,255,255,.06)
}

.nav-inner {
    height:78px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:28px
}

.brand {
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    letter-spacing:.06em
}

.brand img {
    width:58px;
    height:58px;
    object-fit:cover;
    border-radius:10px
}

.brand-text {
    font-size:15px;
    line-height:1.05
}

.brand-text b {
    color:#fff
}

.brand-text span {
    display:block;
    color:var(--gold);
    font-size:9px;
    letter-spacing:.35em;
    margin-top:4px;
    text-align:center;
}

.nav-links {
    display:flex;
    gap:25px;
    align-items:center;
    font-size:13px;
    color:#ddd
}

.nav-links a {
    position:relative;
    padding:28px 0
}

.nav-links a:hover {
    color:#fff
}


.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:13px 20px;
    border-radius:9px;
    border:1px solid var(--gold);
    font-weight:800;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.04em;
    transition:.25s
}

.btn-gold {
    background:linear-gradient(135deg,var(--gold2),var(--gold));
    color:#080808;
    box-shadow:0 8px 30px rgba(214,167,45,.15)
}

.btn-gold:hover {
    transform:translateY(-2px);
    box-shadow:0 12px 40px rgba(214,167,45,.28)
}

.btn-outline {
    background:transparent;
    color:#fff;
    border-color:#555
}

.btn-outline:hover {
    border-color:var(--gold);
    color:var(--gold)
}

.menu {
    display:none;
    background:none;
    border:0;
    color:#fff;
    font-size:27px;
    cursor:pointer
}

.hero {
    min-height:720px;
    position:relative;
    overflow:hidden;
    background:
 radial-gradient(circle at 76% 42%,rgba(214,167,45,.18),transparent 28%),
 radial-gradient(circle at 92% 15%,rgba(255,255,255,.06),transparent 25%),
 linear-gradient(90deg,#070707 0%,#080808 44%,rgba(8,8,8,.55) 70%,#070707 100%)
}

.hero:before {
    content:"";
    position:absolute;
    inset:0;
    opacity:.22;
    background-image:linear-gradient(rgba(214,167,45,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(214,167,45,.12) 1px,transparent 1px);
    background-size:70px 70px;
    mask-image:linear-gradient(to right,transparent,black 30%,black 70%,transparent)
}

.hero-grid {
    min-height:720px;
    display:grid;
    grid-template-columns:1fr 1.05fr;
    align-items:center;
    gap:40px;
    position:relative
}

.eyebrow {
    color:var(--gold2);
    font-size:12px;
    font-weight:900;
    letter-spacing:.18em;
    text-transform:uppercase;
    margin-bottom:18px
}

.hero h1 {
    font-size:clamp(42px,5.2vw,76px);
    line-height:.98;
    letter-spacing:-.04em;
    max-width:760px
}

.hero h1 span {
    color:var(--gold2)
}

.hero p {
    color:#c6c6c6;
    max-width:610px;
    font-size:18px;
    margin:24px 0 30px
}

.actions {
    display:flex;
    gap:12px;
    flex-wrap:wrap
}

.trust-row {
    display:flex;
    gap:26px;
    flex-wrap:wrap;
    margin-top:38px
}

.trust {
    display:flex;
    gap:10px;
    align-items:center;
    font-size:12px;
    color:#c9c9c9
}

.trust i {
    width:30px;
    height:30px;
    border:1px solid var(--gold);
    border-radius:50%;
    display:grid;
    place-items:center;
    color:var(--gold);
    font-style:normal
}

.hero-visual {
    height:530px;
    position:relative;
    display:grid;
    place-items:center
}

.shield {
    width:350px;
    height:410px;
    border:3px solid var(--gold);
    clip-path:polygon(50% 0,92% 17%,92% 57%,50% 100%,8% 57%,8% 17%);
    background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(214,167,45,.05));
    box-shadow:0 0 100px rgba(214,167,45,.22);
    display:grid;
    place-items:center;
    position:relative;
    z-index:2
}

.lock {
    width:105px;
    height:105px;
    border:5px solid var(--gold2);
    border-radius:20px;
    position:relative
}

.lock:before {
    content:"";
    position:absolute;
    left:25px;
    top:-60px;
    width:48px;
    height:75px;
    border:7px solid var(--gold2);
    border-bottom:0;
    border-radius:30px 30px 0 0
}

.lock:after {
    content:"";
    position:absolute;
    width:15px;
    height:30px;
    border-radius:8px;
    background:var(--gold2);
    left:40px;
    top:34px
}

.server {
    position:absolute;
    width:145px;
    height:220px;
    background:linear-gradient(145deg,#272727,#0b0b0b);
    border:1px solid #555;
    border-radius:13px;
    box-shadow:0 20px 60px #000
}

.server:after {
    content:"";
    position:absolute;
    left:20px;
    right:20px;
    top:28px;
    height:4px;
    background:var(--gold);
    box-shadow:0 35px var(--gold),0 70px var(--gold),0 105px #555,0 140px #555
}

.s1 {
    left:8%;
    bottom:70px;
    transform:perspective(700px) rotateY(18deg) rotateZ(-3deg)
}

.s2 {
    right:4%;
    top:70px;
    transform:perspective(700px) rotateY(-18deg) rotateZ(3deg)
}

.orbit {
    position:absolute;
    width:600px;
    height:180px;
    border:1px solid rgba(214,167,45,.35);
    border-radius:50%;
    transform:rotate(-18deg);
    box-shadow:0 0 60px rgba(214,167,45,.08)
}

section {
    padding:92px 0
}

.section-head {
    text-align:center;
    max-width:760px;
    margin:0 auto 42px
}

.section-head h2 {
    font-size:clamp(30px,4vw,48px);
    line-height:1.05;
    letter-spacing:-.03em
}

.section-head p {
    color:var(--muted);
    margin-top:14px
}

.gold {
    color:var(--gold2)
}

.grid4 {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px
}

.grid6 {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}

.card {
    background:linear-gradient(145deg,#151515,#0e0e0e);
    border:1px solid rgba(255,255,255,.09);
    border-radius:var(--radius);
    padding:28px;
    transition:.25s;
    position:relative;
    overflow:hidden
}

.card:hover {
    transform:translateY(-5px);
    border-color:rgba(214,167,45,.55);
    box-shadow:0 20px 60px rgba(0,0,0,.35)
}

.icon {
    width:48px;
    height:48px;
    border:1px solid var(--gold);
    border-radius:13px;
    display:grid;
    place-items:center;
    color:var(--gold2);
    font-size:22px;
    margin-bottom:20px
}

.card h3 {
    font-size:18px;
    margin-bottom:9px
}

.card p {
    font-size:13px;
    color:var(--muted)
}

.more {
    display:inline-block;
    color:var(--gold2);
    font-size:12px;
    font-weight:800;
    margin-top:18px
}

.dark-section {
    background:#0b0b0b;
    border-top:1px solid rgba(255,255,255,.04);
    border-bottom:1px solid rgba(255,255,255,.04)
}

.split {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center
}

.visual-box {
    min-height:420px;
    border:1px solid var(--line);
    border-radius:24px;
    background:radial-gradient(circle at 50% 45%,rgba(214,167,45,.18),transparent 35%),linear-gradient(145deg,#141414,#080808);
    position:relative;
    overflow:hidden
}

.visual-box:after {
    content:"";
    position:absolute;
    inset:35px;
    border:1px dashed rgba(214,167,45,.25);
    border-radius:50%
}

.list {
    display:grid;
    gap:13px;
    margin:24px 0
}

.list li {
    list-style:none;
    color:#d2d2d2;
    font-size:14px
}

.list li:before {
    content:"✓";
    color:var(--gold2);
    font-weight:900;
    margin-right:10px
}

.metrics {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1px;
    background:rgba(214,167,45,.18);
    border:1px solid rgba(214,167,45,.2);
    border-radius:18px;
    overflow:hidden
}

.metric {
    background:#0e0e0e;
    padding:30px;
    text-align:center
}

.metric strong {
    font-size:38px;
    color:var(--gold2);
    display:block
}

.metric span {
    font-size:12px;
    color:#aaa
}

.cta {
    padding:50px;
    border:1px solid var(--gold);
    border-radius:24px;
    background:radial-gradient(circle at 80% 50%,rgba(214,167,45,.18),transparent 40%),linear-gradient(100deg,#121212,#090909);
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px
}

.cta h2 {
    font-size:34px;
    line-height:1.05
}

.cta p {
    color:#aaa;
    margin-top:10px
}

.page-hero {
    padding:120px 0 80px;
    background:radial-gradient(circle at 70% 30%,rgba(214,167,45,.14),transparent 30%),#090909;
    border-bottom:1px solid rgba(255,255,255,.06)
}

.page-hero h1 {
    font-size:clamp(42px,6vw,70px);
    line-height:1.02
}

.page-hero p {
    max-width:720px;
    color:#aaa;
    font-size:17px;
    margin-top:20px
}

.service-detail {
    display:grid;
    grid-template-columns:260px 1fr;
    gap:50px
}



.form {
    display:grid;
    gap:16px
}

.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px
}

.field label {
    display:block;
    font-size:12px;
    color:#bbb;
    margin-bottom:7px
}

.field input,.field textarea,.field select {
    width:100%;
    background:#101010;
    border:1px solid #333;
    color:#fff;
    border-radius:10px;
    padding:14px;
    outline:none
}

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

.field input:focus,.field textarea:focus,.field select:focus {
    border-color:var(--gold)
}

footer {
    background:#050505;
    border-top:1px solid rgba(255,255,255,.08);
    padding:60px 0 24px
}

.footer-grid {
    display:grid;
    grid-template-columns:minmax(360px,1.6fr) repeat(3,minmax(0,1fr));
    gap:32px
}

.footer-col h4 {
    font-size:12px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:.1em;
    margin-bottom:16px
}

.footer-col a {
    display:block;
    color:#aaa;
    font-size:13px;
    margin:8px 0
}

.footer-col a:hover {
    color:#fff
}

/*
 * A regra genérica ".footer-col a" usa display:block e sobrescrevia o
 * display:flex da marca. Isso fazia o SECURITY usar a largura inteira da
 * coluna e parecer deslocado. A correção é aplicada SOMENTE ao rodapé.
 */
.footer-col a.footer-brand {
    display:inline-flex;
    align-items:center;
    width:auto;
    margin:0
}

.footer-brand .brand-text {
    display:flex;
    flex-direction:column;
    align-items:center;
    width:max-content
}

.footer-bottom {
    border-top:1px solid #1d1d1d;
    margin-top:40px;
    padding-top:20px;
    color:#777;
    font-size:11px;
    display:flex;
    justify-content:space-between;
    gap:20px
}

.reveal {
    opacity:0;
    transform:translateY(18px);
    transition:.7s
}

.reveal.show {
    opacity:1;
    transform:none
}

@media(max-width:1000px) {
    .nav-links {
        display:none
    }

    .menu {
        display:block
    }

    .grid4 {
        grid-template-columns:repeat(2,1fr)
    }

    .grid6 {
        grid-template-columns:repeat(2,1fr)
    }

    .hero-grid,.split {
        grid-template-columns:1fr
    }

    .hero {
        min-height:auto
    }

    .hero-grid {
        padding:80px 0
    }

    .hero-visual {
        order:-1;
        height:390px
    }

    .shield {
        width:250px;
        height:300px
    }

    .server {
        width:100px;
        height:160px
    }

    .s1 {
        left:8%
    }

    .s2 {
        right:8%
    }

    .metrics {
        grid-template-columns:repeat(2,1fr)
    }

    .footer-grid {
        grid-template-columns:repeat(2,1fr)
    }

    .service-detail {
        grid-template-columns:1fr
    }

    .nav-inner {
        position:relative
    }

    .desktop-cta {
        display:none
    }

    .nav-links.open {
        position:absolute;
        top:78px;
        left:0;
        right:0;
        z-index:110;
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:10px 20px 18px;
        background:#090909;
        border-bottom:1px solid #222;
        box-shadow:0 20px 40px rgba(0,0,0,.35)
    }

    .nav-links.open a {
        width:100%;
        padding:11px 0
    }

}



/* ==========================================================================
   QUEM SOMOS — EQUIPE
   ========================================================================== */
.about-hero {
    background:
        radial-gradient(circle at 78% 32%,rgba(214,167,45,.16),transparent 30%),
        linear-gradient(180deg,#090909,#070707);
}

.team-section {
    position:relative;
    overflow:hidden;
    background:
        radial-gradient(circle at 50% 38%,rgba(214,167,45,.08),transparent 34%),
        #080808;
}

.team-section:before {
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.16;
    background-image:
        linear-gradient(rgba(214,167,45,.09) 1px,transparent 1px),
        linear-gradient(90deg,rgba(214,167,45,.09) 1px,transparent 1px);
    background-size:72px 72px;
    mask-image:linear-gradient(to bottom,transparent,black 24%,black 76%,transparent);
}

.team-section > .container {
    position:relative;
    z-index:1;
}

.team-section-head {
    max-width:850px;
}

.team-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:28px;
    max-width:1050px;
    margin:0 auto;
}

.team-card {
    overflow:hidden;
    background:linear-gradient(145deg,#121212,#0a0a0a);
    border:1px solid rgba(214,167,45,.42);
    border-radius:22px;
    box-shadow:0 22px 70px rgba(0,0,0,.28);
}

.team-photo-wrap {
    position:relative;
    overflow:hidden;
    background:#0d0d0d;
    border-bottom:1px solid rgba(214,167,45,.4);
}

.team-photo-wrap:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:22%;
    pointer-events:none;
    background:linear-gradient(to top,rgba(8,8,8,.26),transparent);
}

.team-photo {
    width:100%;
    height:auto;
    aspect-ratio:3 / 4;
    object-fit:cover;
    object-position:center center;
}

.team-content {
    padding:28px 30px 32px;
}

.team-heading {
    text-align:center;
    padding-bottom:20px;
    margin-bottom:20px;
    border-bottom:1px solid rgba(214,167,45,.22);
}

.team-heading h3 {
    font-size:clamp(26px,3vw,34px);
    line-height:1.08;
    letter-spacing:-.025em;
}

.team-role {
    margin-top:7px;
    color:var(--gold2);
    font-size:14px;
    font-weight:800;
}

.team-credentials {
    display:grid;
    gap:11px;
}

.team-credentials li {
    position:relative;
    list-style:none;
    padding-left:28px;
    color:#d0d0d0;
    font-size:14px;
    line-height:1.5;
}

.team-credentials li:before {
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    width:19px;
    height:19px;
    display:grid;
    place-items:center;
    border:1px solid rgba(214,167,45,.7);
    border-radius:50%;
    color:var(--gold2);
    font-size:10px;
    font-weight:900;
}

/* ==========================================================================
   FORMULÁRIOS
   ========================================================================== */

.muted-copy {
    color:#aaa;
    margin-top:16px
}

.field-error {
    display:block;
    min-height:16px;
    margin-top:5px;
    color:#ff7b7b;
    font-size:11px
}

.field.has-error input,.field.has-error textarea,.field.has-error select {
    border-color:#d65c5c;
    box-shadow:0 0 0 2px rgba(214,92,92,.08)
}

.character-counter {
    margin-top:5px;
    color:#777;
    font-size:11px;
    text-align:right
}

.form-security-note {
    color:#777;
    font-size:11px;
    line-height:1.5
}

.form-status {
    min-height:20px;
    font-size:12px
}

.form-status.success {
    color:var(--green)
}

.form-status.error {
    color:#ff7b7b
}

.btn:disabled {
    cursor:not-allowed;
    opacity:.65;
    transform:none
}


/* ==========================================================================
   REDES SOCIAIS
   Os links ficam diretamente no HTML para manter o site mais estático.
   ========================================================================== */
.footer-about {
    max-width:360px;
    margin-top:18px;
    color:#888;
    font-size:13px;
    line-height:1.7
}

.footer-about strong {
    color:var(--gold2)
}

.footer-contact {
    margin-top:18px
}

.footer-contact>a {
    color:#cfcfcf;
    font-size:12px
}

.social-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:12px
}

.social-link {
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    min-height:34px;
    margin:0!important;
    padding:7px 10px;
    border:1px solid #2c2c2c;
    border-radius:8px;
    color:#aaa!important;
    font-size:11px!important;
    transition:.2s
}

.social-link:hover {
    border-color:var(--gold)!important;
    color:var(--gold2)!important;
    transform:translateY(-1px)
}



/* ==========================================================================
   AJUSTES RESPONSIVOS PARA TELAS PEQUENAS
   ========================================================================== */
@media(max-width:620px) {
    .container {
        width:min(var(--max),calc(100% - 28px))
    }

    .nav-inner {
        height:68px
    }

    .nav-links.open {
        top:68px
    }

    .brand img {
        width:48px;
        height:48px
    }

    .hero h1 {
        font-size:42px
    }

    .hero p {
        font-size:16px
    }

    .hero-visual {
        height:300px
    }

    .shield {
        width:190px;
        height:235px
    }

    .lock {
        transform:scale(.7)
    }

    .server {
        width:72px;
        height:125px
    }

    .grid4,.grid6,.metrics,.form-grid,.footer-grid {
        grid-template-columns:1fr
    }

    .cta {
        padding:30px;
        align-items:flex-start;
        flex-direction:column
    }

    .cta h2 {
        font-size:28px
    }

    .footer-bottom {
        flex-direction:column
    }
}

/* ==========================================================================
   PRODUÇÃO: ACESSIBILIDADE E CAMPO ANTI-BOT
   ========================================================================== */
.hp-field {
    position:absolute!important;
    left:-10000px!important;
    top:auto!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
    pointer-events:none!important
}

a:focus-visible,.btn:focus-visible,.menu:focus-visible,.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible {
    outline:2px solid var(--gold2);
    outline-offset:3px
}



@media(max-width:900px) {
    .team-grid {
        grid-template-columns:1fr;
        max-width:620px;
    }
}

@media(max-width:620px) {
    .team-content {
        padding:22px 20px 26px;
    }

    .team-heading h3 {
        font-size:26px;
    }

    .team-role,
    .team-credentials li {
        font-size:13px;
    }
}