/* PigmentApp — estilos. Cores no :root (claro) e :root[data-t=dark] (escuro). */
:root {
    --bg: #f4f8f5;
    --card: #fff;
    --tx: #10281c;
    --mut: #5a6f63;
    --g: #14573a;
    --g2: #4caf7d;
    --bd: #d9e6de
}

:root[data-t=dark] {
    --bg: #08130d;
    --card: #10241a;
    --tx: #eef6f1;
    --mut: #9db3a5;
    --g: #4caf7d;
    --g2: #4caf7d;
    --bd: #1d3a2b
}

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

html {
    scroll-behavior: smooth
}

body {
    font: 16px/1.6 Poppins, system-ui, sans-serif;
    background: var(--bg);
    color: var(--tx);
    transition: .3s
}

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

.w {
    max-width: 1080px;
    margin: auto;
    padding: 0 20px
}

nav {
    position: sticky;
    top: 0;
    z-index: 9;
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    border-bottom: 1px solid var(--bd)
}

nav .w {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 12px
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600
}

.logo img {
    width: 34px;
    height: 34px;
    border-radius: 9px
}

.nl {
    display: flex;
    gap: 20px;
    align-items: center;
    font-size: 14px;
    color: var(--mut)
}

.nl a:hover {
    color: var(--g2)
}

.tg {
    border: 1px solid var(--bd);
    background: var(--card);
    color: var(--tx);
    border-radius: 99px;
    padding: 6px 14px;
    font: 500 13px Poppins;
    cursor: pointer
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--g);
    color: #fff;
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 600;
    transition: .2s
}

:root[data-t=dark] .btn {
    background: var(--g2);
    color: #06150d
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px #4caf7d44
}

.hero {
    padding: 70px 0 80px;
    overflow: hidden
}

.hero .w {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 40px;
    align-items: center
}

.eyebrow {
    color: var(--g2);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase
}

h1 {
    font-size: clamp(34px, 5vw, 56px);
    line-height: 1.1;
    margin: 14px 0 18px;
    font-weight: 700
}

h2 {
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.2;
    font-weight: 600
}

.lead {
    color: var(--mut);
    max-width: 480px;
    margin-bottom: 26px
}

.sm {
    font-size: 13px;
    color: var(--mut);
    margin-top: 12px
}

.ph {
    width: min(290px, 80%);
    margin: auto;
    border: 8px solid #0b1a12;
    border-radius: 34px;
    overflow: hidden;
    box-shadow: 0 30px 60px #0004;
    animation: fl 6s ease-in-out infinite;
    background: #0b1a12
}

.ph img {
    display: block;
    width: 100%
}

@keyframes fl {
    50% {
        transform: translateY(-12px)
    }
}

.hv {
    position: relative
}

.hv:before {
    content: "";
    position: absolute;
    inset: 10% 5%;
    background: radial-gradient(#4caf7d55, transparent 70%);
    filter: blur(30px)
}

section {
    padding: 70px 0
}

.c {
    text-align: center;
    margin-bottom: 40px
}

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

.cd {
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 18px;
    padding: 26px;
    transition: .25s
}

.cd:hover {
    transform: translateY(-6px);
    border-color: var(--g2)
}

.cd i {
    font-style: normal;
    font-size: 28px;
    display: block;
    margin-bottom: 10px
}

.cd h3 {
    font-size: 18px;
    margin-bottom: 6px
}

.cd p {
    color: var(--mut);
    font-size: 14.5px
}

.st {
    counter-reset: s
}

.st .cd:before {
    counter-increment: s;
    content: counter(s);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--g2);
    color: #06150d;
    font-weight: 700;
    margin-bottom: 12px
}

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

.pdf {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 20px 50px #0003;
    border: 1px solid var(--bd);
    transform: rotate(-2deg);
    transition: .3s
}

.pdf:hover {
    transform: none
}

.two p {
    color: var(--mut);
    margin-top: 14px
}

.ck {
    list-style: none;
    padding: 0;
    margin-top: 18px
}

.ck li {
    padding: 5px 0 5px 28px;
    position: relative
}

.ck li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--g2);
    font-weight: 700
}

.tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 28px
}

.tabs button {
    border: 1px solid var(--bd);
    background: var(--card);
    color: var(--tx);
    padding: 9px 18px;
    border-radius: 99px;
    font: 500 14px Poppins;
    cursor: pointer
}

.tabs button.on {
    background: var(--g2);
    color: #06150d;
    border-color: var(--g2)
}

.show {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 40px;
    align-items: center;
    max-width: 760px;
    margin: auto
}

.show .ph {
    animation: none;
    width: 260px
}

.show h3 {
    font-size: 24px;
    margin-bottom: 8px
}

.show p {
    color: var(--mut)
}

.cta {
    background: linear-gradient(135deg, #14573a, #2f8f5f);
    color: #fff;
    border-radius: 26px;
    padding: 56px 24px;
    text-align: center
}

.cta .btn {
    background: #fff;
    color: #14573a;
    margin-top: 22px
}

.cta p {
    opacity: .9;
    margin-top: 10px
}

footer {
    padding: 40px 0;
    border-top: 1px solid var(--bd);
    margin-top: 70px;
    font-size: 14px;
    color: var(--mut)
}

footer .w {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px
}

footer nav {
    all: unset
}

.fl {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.fl a:hover {
    color: var(--g2)
}

.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: .7s
}

.rv.in {
    opacity: 1;
    transform: none
}

@media(max-width:800px) {

    .hero .w,
    .two,
    .show {
        grid-template-columns: 1fr
    }

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

    .nl a.h {
        display: none
    }

    .hero {
        padding-top: 40px
    }

    .show {
        text-align: center
    }

    .show .ph {
        margin: auto
    }
}

.dev {
    padding: 20px 0 0;
    scroll-margin-top: 70px
}

.dev-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    background: var(--card);
    border: 1px solid var(--bd);
    border-radius: 20px;
    padding: 28px
}

.dev-box h3 {
    font-size: 20px;
    margin: 6px 0 4px
}

.dev-box p {
    color: var(--mut);
    font-size: 14.5px
}

.soc {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.soc a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--bd);
    border-radius: 99px;
    padding: 10px 18px;
    font-weight: 500;
    font-size: 14px;
    transition: .2s
}

.soc a:hover {
    border-color: var(--g2);
    color: var(--g2);
    transform: translateY(-2px)
}

.soc svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round
}