:root { --bg:#0b0f16; --bg2:#0a0d14; --card:#0f1622; --muted:#b9c2cf; --text:#eaf0f8; --line:#1b2738; --shadow:0 20px 50px rgba(0,0,0,.45); --radius:16px; }
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg2)) fixed;}
.container{width:min(1120px,90%);margin-inline:auto}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.9rem 1.2rem;border-radius:14px;border:1px solid var(--line);color:var(--text);text-decoration:none;font-weight:700;letter-spacing:.2px;background:transparent;box-shadow:var(--shadow);transition:transform .15s ease,background .2s ease,border-color .2s ease,opacity .2s ease}
.btn:hover{transform:translateY(-2px)} .btn--primary{background:#fff;color:#000;border-color:transparent} .btn--ghost{background:transparent}
/* Header */
.header{position:sticky;top:0;z-index:40;background:rgba(10,13,20,.75);backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.header img{width:160px}.header__inner{display:flex;align-items:center;justify-content:space-between;padding:.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none}
.brand svg{height:34px;width:34px;border-radius:8px;display:block}.brand span{font-weight:800;letter-spacing:.3px}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{color:var(--muted);text-decoration:none;padding:.6rem .8rem;border-radius:10px;border:1px solid transparent}
.nav a:hover{border-color:var(--line);color:var(--text)} .nav #ors{color:var(--bg)} .nav #ors:hover{border-color:var(--line);color:var(--muted)}
.nav-toggle{display:none;background:none;border:0;width:44px;height:44px;position:relative}
.nav-toggle span{position:absolute;left:10px;right:10px;height:2px;background:var(--text);transition:transform .2s ease,opacity .2s ease}
.nav-toggle span:nth-child(1){top:14px}.nav-toggle span:nth-child(2){top:21px}.nav-toggle span:nth-child(3){top:28px}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}.nav-open .nav-toggle span:nth-child(2){opacity:0}.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:900px){.nav-toggle{display:block}
.nav{position:fixed;inset:60px 0 auto 0;background:rgba(10,13,20,.96);display:grid;gap:.2rem;padding:1rem;transform:translateY(-120%);transition:transform .25s ease;border-bottom:1px solid var(--line)}
.nav a{padding:1rem;font-size:1.05rem}.nav.show{transform:translateY(0)}}
/* Hero */
.hero{position:relative;padding:6.5rem 0 4.5rem;overflow:hidden}
.hero__bg{position:absolute;inset:-20% -10% -20% -10%;background:radial-gradient(1200px 500px at 75% 10%,rgba(255,255,255,.08),transparent 60%),radial-gradient(1000px 500px at 15% 70%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,#0d1320,#0a0d14);transform:translateY(0);will-change:transform;opacity:.95;z-index:0}
.hero__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;z-index:1}
.hero__copy h1{font-size:clamp(2.2rem,4.2vw,3.6rem);margin:.5rem 0 1rem}
.hero__copy p{color:var(--muted);font-size:1.1rem}
.hero__cta{display:flex;gap:1rem;margin:1.5rem 0}
.hero__bullets{display:flex;gap:1.2rem;list-style:none;padding:0;color:var(--muted)}
.hero__mockup{position:relative;height:360px;perspective:1000px}
.panel{position:absolute;width:70%;height:50%;background:linear-gradient(180deg,#0f1622,#0b1320);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);opacity:0;transform:translateY(20px);display:flex;align-items:center;justify-content:center}
.panel img{max-width:100%;max-height:100%;object-fit:contain}
.panel:nth-child(1){right:6%;top:0;transform:rotateY(-14deg) rotateX(10deg)}
.panel:nth-child(2){left:0;bottom:10%;transform:rotateY(12deg) rotateX(8deg)}
.panel:nth-child(3){right:16%;bottom:-2%;transform:rotateY(-8deg) rotateX(6deg)}
@media (max-width:900px){.hero__grid{grid-template-columns:1fr}.hero__mockup{height:280px}}
/* Sections */
.section{padding:4rem 0}.section.alt{background:rgba(255,255,255,.02)}
.section__head{text-align:center;margin-bottom:2rem}
.section__head h2{font-size:2rem;margin:0 0 .5rem}.section__head p{color:var(--muted)}
/* Cards */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
.card h3{margin-top:.2rem}.card p{color:var(--muted)}
@media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.cards{grid-template-columns:1fr}}
/* Portfólio */
/* ==== Portfolio: layout lado a lado garantido ==== */
#portfolio .gallery-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.2rem;
    align-items: start;
}

#portfolio .gallery-card {
    margin: 0 !important;
    /* zera margem padrão do figure */
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: transform .15s ease, border-color .2s ease, filter .2s ease;
}

#portfolio .gallery-card img {
    width: 100% !important;
    aspect-ratio: 16/10;
    object-fit: cover;
    display: block;
}

#portfolio .gallery-card figcaption {
    padding: .9rem 1rem;
}

#portfolio .gallery-card h3 {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
}

#portfolio .gallery-card p {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
}

#portfolio .gallery-card:hover {
    transform: translateY(-4px);
    border-color: #2a3a52;
    filter: brightness(1.05);
}

/* Opcional: deixar essa seção um pouco mais larga */
#portfolio .container {
    width: min(1280px, 95%);
}
/* Sobre */
.about{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem;align-items:start}
.about__counters{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.counter{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;text-align:center}
.counter .val{display:block;font-size:2rem;font-weight:800}
.counter small{color:var(--muted)}
@media (max-width:900px){.about{grid-template-columns:1fr}.about__counters{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.about__counters{grid-template-columns:1fr 1fr 1fr}}
/* Formulário */
.form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem}
.field--full{grid-column:1/-1}
.field span{font-weight:600}
input,textarea{background:#0c1320;border:1px solid var(--line);border-radius:12px;padding:.9rem;color:var(--text);outline:none}
input:focus,textarea:focus{border-color:#fff}
.actions{display:flex;gap:1rem;margin-top:1rem;flex-wrap:wrap}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:560px){.grid{grid-template-columns:1fr}}
/* Footer */
.footer{border-top:1px solid var(--line);padding:2rem 0;background:#080b11}
.footer__grid{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer__brand{display:flex;align-items:center;gap:.6rem}
.footer__brand p{color:var(--muted)}
.footer__nav{display:flex;gap:1rem}
.footer__nav a{color:var(--muted);text-decoration:none}.footer__nav a:hover{color:var(--text)}
/* Flutuantes */
.whats-float{position:fixed;right:18px;bottom:20px;width:52px;height:52px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow);transition:transform .2s ease,filter .2s ease;z-index:30}
.whats-float:hover{transform:translateY(-2px);filter:brightness(1.2)}
.to-top{position:fixed;right:18px;bottom:86px;width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--text);display:grid;place-items:center;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:30}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-2px)}
/* Reveal */
html.no-js [data-reveal]{opacity:1;transform:none}
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].show{opacity:1;transform:translateY(0)}