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

/* Global text breaking rules for better readability */
body,
p,
h1, h2, h3, h4, h5, h6,
span,
div {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

html {
    overflow-x: hidden;
}

/* FONTES */
@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Satoshi';
    src: url('../fonts/satoshi/Satoshi-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('../fonts/bricolage-grotesque/BricolageGrotesque-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --green: #5DFF51;
    --black: #000000;
    --dark-bg: #0A0A0A;
    --dark-card: #0d1117;
    --white: #ffffff;
}

/* ===== BACKGROUND ANIMADO COM GRAIN E RAIOS DE LUZ ===== */
body {
    background-color: #000000;
    color: var(--white);
    font-family: 'Satoshi', sans-serif;
    font-weight: 400;
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    
    /* Diagonal striped pattern background */
    background-image: linear-gradient(
        32deg,
        rgba(8, 8, 8, 0.35) 30px,
        transparent
    );
    background-size: 60px 60px;
    background-position: -5px -5px;
}

/* Grain/noise texture overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.08;
    pointer-events: none;
    z-index: 1000;
}

/* Animated light rays effect - REDUZIDO */
body::after {
    content: '';
    position: fixed;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 0deg at 80% 20%,
            transparent 0deg,
            rgba(93, 255, 81, 0.03) 15deg,
            transparent 30deg,
            transparent 60deg,
            rgba(93, 255, 81, 0.02) 75deg,
            transparent 90deg,
            transparent 120deg,
            rgba(93, 255, 81, 0.025) 135deg,
            transparent 150deg,
            transparent 180deg,
            rgba(93, 255, 81, 0.02) 195deg,
            transparent 210deg,
            transparent 240deg,
            rgba(93, 255, 81, 0.03) 255deg,
            transparent 270deg,
            transparent 300deg,
            rgba(93, 255, 81, 0.02) 315deg,
            transparent 330deg,
            transparent 360deg
        );
    pointer-events: none;
    z-index: -2;
    animation: rotateRays 60s linear infinite;
}

/* Secondary light rays layer - REDUZIDO */
.light-rays {
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background:
        conic-gradient(from 180deg at 20% 80%,
            transparent 0deg,
            rgba(93, 255, 81, 0.025) 20deg,
            transparent 40deg,
            transparent 80deg,
            rgba(255, 255, 255, 0.015) 100deg,
            transparent 120deg,
            transparent 160deg,
            rgba(93, 255, 81, 0.02) 180deg,
            transparent 200deg,
            transparent 240deg,
            rgba(255, 255, 255, 0.015) 260deg,
            transparent 280deg,
            transparent 320deg,
            rgba(93, 255, 81, 0.025) 340deg,
            transparent 360deg
        );
    pointer-events: none;
    z-index: -3;
    animation: rotateRays 80s linear infinite reverse;
}

/* Static glow spots - REDUZIDO */
.light-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(ellipse 800px 800px at 70% 10%, rgba(93, 255, 81, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 600px 600px at 30% 90%, rgba(93, 255, 81, 0.03) 0%, transparent 50%),
        radial-gradient(ellipse 500px 500px at 90% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* ===== STARS ANIMATION ===== */
#stars, #stars2, #stars3 {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: -4;
}

#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: 501px 811px rgba(255,255,255,0.4), 1450px 1324px rgba(255,255,255,0.4), 1093px 1780px rgba(255,255,255,0.4), 904px 741px rgba(255,255,255,0.4), 1160px 781px rgba(255,255,255,0.4), 367px 1734px rgba(255,255,255,0.4), 1343px 156px rgba(255,255,255,0.4), 1283px 1142px rgba(255,255,255,0.4), 1395px 467px rgba(255,255,255,0.4), 137px 1114px rgba(255,255,255,0.4), 1767px 1403px rgba(255,255,255,0.4), 439px 472px rgba(255,255,255,0.4), 1491px 677px rgba(255,255,255,0.4), 34px 382px rgba(255,255,255,0.4), 1221px 1584px rgba(255,255,255,0.4), 659px 18px rgba(255,255,255,0.4), 1731px 1959px rgba(255,255,255,0.4), 80px 712px rgba(255,255,255,0.4), 574px 1502px rgba(255,255,255,0.4), 731px 647px rgba(255,255,255,0.4), 1523px 109px rgba(255,255,255,0.4), 865px 1064px rgba(255,255,255,0.4), 624px 1380px rgba(255,255,255,0.4), 955px 1196px rgba(255,255,255,0.4), 1256px 896px rgba(255,255,255,0.4), 1078px 1716px rgba(255,255,255,0.4), 1734px 413px rgba(255,255,255,0.4), 977px 1764px rgba(255,255,255,0.4), 665px 1531px rgba(255,255,255,0.4), 1084px 1183px rgba(255,255,255,0.4), 1354px 1774px rgba(255,255,255,0.4), 887px 106px rgba(255,255,255,0.4), 638px 805px rgba(255,255,255,0.4), 507px 558px rgba(255,255,255,0.4), 1077px 421px rgba(255,255,255,0.4), 704px 632px rgba(255,255,255,0.4), 890px 607px rgba(255,255,255,0.4), 1582px 1285px rgba(255,255,255,0.4), 1500px 1250px rgba(255,255,255,0.4), 728px 697px rgba(255,255,255,0.4), 1117px 966px rgba(255,255,255,0.4), 722px 976px rgba(255,255,255,0.4), 1665px 1860px rgba(255,255,255,0.4), 1183px 463px rgba(255,255,255,0.4), 1700px 347px rgba(255,255,255,0.4), 1034px 1037px rgba(255,255,255,0.4), 596px 903px rgba(255,255,255,0.4), 729px 1364px rgba(255,255,255,0.4), 1303px 646px rgba(255,255,255,0.4), 620px 948px rgba(255,255,255,0.4), 695px 687px rgba(255,255,255,0.4), 1521px 1212px rgba(255,255,255,0.4), 1446px 856px rgba(255,255,255,0.4), 736px 999px rgba(255,255,255,0.4), 1912px 142px rgba(255,255,255,0.4), 1173px 1312px rgba(255,255,255,0.4), 611px 908px rgba(255,255,255,0.4), 1047px 490px rgba(255,255,255,0.4), 1818px 1659px rgba(255,255,255,0.4), 1550px 463px rgba(255,255,255,0.4), 651px 1683px rgba(255,255,255,0.4), 1831px 2px rgba(255,255,255,0.4), 1396px 1743px rgba(255,255,255,0.4), 1456px 388px rgba(255,255,255,0.4), 1528px 1145px rgba(255,255,255,0.4), 674px 1072px rgba(255,255,255,0.4), 1088px 781px rgba(255,255,255,0.4), 1749px 364px rgba(255,255,255,0.4), 383px 1428px rgba(255,255,255,0.4), 1785px 1617px rgba(255,255,255,0.4), 1253px 1852px rgba(255,255,255,0.4), 744px 1721px rgba(255,255,255,0.4), 1679px 55px rgba(255,255,255,0.4), 838px 790px rgba(255,255,255,0.4), 1191px 568px rgba(255,255,255,0.4), 1163px 237px rgba(255,255,255,0.4), 1844px 271px rgba(255,255,255,0.4), 1373px 717px rgba(255,255,255,0.4), 991px 1414px rgba(255,255,255,0.4), 641px 1722px rgba(255,255,255,0.4), 1697px 45px rgba(255,255,255,0.4), 1060px 329px rgba(255,255,255,0.4), 1228px 1406px rgba(255,255,255,0.4), 1746px 353px rgba(255,255,255,0.4), 671px 887px rgba(255,255,255,0.4), 1094px 1405px rgba(255,255,255,0.4), 1472px 1155px rgba(255,255,255,0.4), 728px 448px rgba(255,255,255,0.4), 691px 818px rgba(255,255,255,0.4), 1981px 1133px rgba(255,255,255,0.4), 1769px 463px rgba(255,255,255,0.4), 1730px 590px rgba(255,255,255,0.4), 1613px 909px rgba(255,255,255,0.4), 699px 1682px rgba(255,255,255,0.4), 1842px 518px rgba(255,255,255,0.4), 1720px 1901px rgba(255,255,255,0.4), 933px 80px rgba(255,255,255,0.4), 681px 1063px rgba(255,255,255,0.4), 740px 1498px rgba(255,255,255,0.4);
    animation: animStar 80s linear infinite;
}

#stars2 {
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: 1925px 1320px rgba(255,255,255,0.3), 693px 1778px rgba(255,255,255,0.3), 1016px 711px rgba(255,255,255,0.3), 661px 1919px rgba(255,255,255,0.3), 1275px 140px rgba(255,255,255,0.3), 1473px 1587px rgba(255,255,255,0.3), 853px 1757px rgba(255,255,255,0.3), 1353px 428px rgba(255,255,255,0.3), 417px 1188px rgba(255,255,255,0.3), 666px 1097px rgba(255,255,255,0.3), 1425px 1278px rgba(255,255,255,0.3), 1252px 561px rgba(255,255,255,0.3), 1424px 89px rgba(255,255,255,0.3), 939px 1922px rgba(255,255,255,0.3), 1757px 50px rgba(255,255,255,0.3), 1938px 1001px rgba(255,255,255,0.3), 804px 1671px rgba(255,255,255,0.3), 1216px 511px rgba(255,255,255,0.3), 704px 1318px rgba(255,255,255,0.3), 1157px 1236px rgba(255,255,255,0.3), 1389px 1169px rgba(255,255,255,0.3), 955px 659px rgba(255,255,255,0.3), 1689px 1058px rgba(255,255,255,0.3), 1349px 1664px rgba(255,255,255,0.3), 1841px 504px rgba(255,255,255,0.3), 827px 1765px rgba(255,255,255,0.3), 1454px 1234px rgba(255,255,255,0.3), 742px 1214px rgba(255,255,255,0.3), 980px 1253px rgba(255,255,255,0.3), 1498px 1251px rgba(255,255,255,0.3), 1627px 995px rgba(255,255,255,0.3), 1674px 676px rgba(255,255,255,0.3), 1623px 563px rgba(255,255,255,0.3), 886px 239px rgba(255,255,255,0.3), 1767px 430px rgba(255,255,255,0.3), 1189px 877px rgba(255,255,255,0.3), 1560px 324px rgba(255,255,255,0.3), 1952px 1097px rgba(255,255,255,0.3), 827px 1420px rgba(255,255,255,0.3), 784px 546px rgba(255,255,255,0.3), 1273px 1255px rgba(255,255,255,0.3), 1004px 456px rgba(255,255,255,0.3), 1491px 258px rgba(255,255,255,0.3), 1134px 1382px rgba(255,255,255,0.3), 1249px 1842px rgba(255,255,255,0.3), 1665px 831px rgba(255,255,255,0.3), 1994px 523px rgba(255,255,255,0.3), 1730px 867px rgba(255,255,255,0.3), 1454px 725px rgba(255,255,255,0.3), 1980px 638px rgba(255,255,255,0.3);
    animation: animStar 120s linear infinite;
}

#stars3 {
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: 200px 981px rgba(255,255,255,0.2), 1731px 521px rgba(255,255,255,0.2), 132px 1039px rgba(255,255,255,0.2), 1888px 1547px rgba(255,255,255,0.2), 899px 1226px rgba(255,255,255,0.2), 1548px 1092px rgba(255,255,255,0.2), 1626px 689px rgba(255,255,255,0.2), 1684px 1211px rgba(255,255,255,0.2), 939px 668px rgba(255,255,255,0.2), 1126px 983px rgba(255,255,255,0.2), 476px 876px rgba(255,255,255,0.2), 1364px 1846px rgba(255,255,255,0.2), 1507px 1120px rgba(255,255,255,0.2), 1833px 832px rgba(255,255,255,0.2), 1377px 1596px rgba(255,255,255,0.2), 1348px 1410px rgba(255,255,255,0.2), 1529px 954px rgba(255,255,255,0.2), 811px 977px rgba(255,255,255,0.2), 1931px 673px rgba(255,255,255,0.2), 1772px 1567px rgba(255,255,255,0.2), 1197px 1400px rgba(255,255,255,0.2), 1103px 822px rgba(255,255,255,0.2), 1057px 1763px rgba(255,255,255,0.2), 1312px 1236px rgba(255,255,255,0.2), 1017px 1602px rgba(255,255,255,0.2), 1950px 626px rgba(255,255,255,0.2), 1358px 1618px rgba(255,255,255,0.2), 1447px 940px rgba(255,255,255,0.2), 1704px 1765px rgba(255,255,255,0.2), 1555px 1120px rgba(255,255,255,0.2);
    animation: animStar 180s linear infinite;
}

@keyframes animStar {
    from { transform: translateY(0px); }
    to { transform: translateY(-2000px); }
}

@keyframes rotateRays {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* ===== NAVBAR ===== */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 75px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 50px;
    z-index: 999;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav-icons-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.nav-icons-left a {
    color: rgba(255,255,255,0.4);
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
}

.nav-icons-left a:hover {
    color: var(--green);
}

.nav-icons-left svg {
    width: 20px;
    height: 20px;
}

.nav-logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    perspective: 400px;
}

.nav-logo img {
    height: 32px;
    width: 32px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* 3D tilt effect on logo hover - desktop only */
@media (min-width: 769px) {
    .nav-logo:hover img {
        transform: rotateY(15deg) rotateX(5deg);
    }
}

.nav-menu {
    display: flex;
    gap: 40px;
}

.nav-menu .menu-logo,
.nav-menu .menu-social {
    display: none; /* Hidden on desktop */
}

.nav-menu .menu-links {
    display: flex;
    gap: 40px;
}

.nav-menu a {
    color: var(--white);
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s;
    padding: 12px 8px;
    min-height: 44px;
    display: flex;
    align-items: center;
}

.nav-menu a:hover {
    background: linear-gradient(90deg, var(--green) 0%, var(--white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Mobile menu */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    z-index: 1001;
    background: transparent;
    border: none;
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    font: inherit;
    color: inherit;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--white);
    transition: 0.3s;
    transform-origin: center;
}

/* X animation when menu is active */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===== HERO ===== */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 100px 20px 60px;
}

/* Foto SEM borda */
.profile-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 32px;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Badge com texto gradiente */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    background: var(--black);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 36px;
}

.badge-text {
    color: var(--white);
}

.badge .star {
    background: linear-gradient(90deg, var(--green) 0%, var(--white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 12px;
}

.badge.center {
    display: inline-flex;
    margin: 0 auto 28px;
}

.hero-title {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 70px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
    background: linear-gradient(90deg, #838383 0%, #ffffff 50%, #272727 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-subtitle {
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--white);
    margin-bottom: 48px;
    line-height: 1.5;
}

/* ===== BOTAO COM EFEITO DE LUZ RODANDO ===== */
.btn-animated {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 18px 40px;
    min-height: 54px;
    background: transparent;
    color: var(--white);
    text-decoration: none;
    border-radius: 50px;
    font-family: 'Satoshi', sans-serif;
    font-size: 15px;
    font-weight: 700;
    border: none;
    z-index: 1;
    transition: transform 0.35s ease-out;
    transform: translateY(0) translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    pointer-events: auto;
}

/* Borda estatica cinza */
.btn-animated::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50px;
    padding: 1.5px;
    background: linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.1));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
}

/* Fundo preto do botao */
.btn-animated::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--black);
    border-radius: 50px;
    z-index: 1;
    pointer-events: none;
}

.btn-animated:hover {
    transform: translateY(-5px) translateZ(0);
}

.btn-text {
    position: relative;
    z-index: 3;
    pointer-events: none;
}

/* Container da luz rotativa */
.btn-border {
    position: absolute;
    inset: -1px;
    border-radius: 50px;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.btn-border::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 270deg,
        var(--green) 300deg,
        rgba(255,255,255,0.95) 320deg,
        var(--green) 340deg,
        transparent 360deg
    );
    animation: rotateBorderLight 8s linear infinite;
    transform: translate(-50%, -50%) rotate(0deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}

@keyframes rotateBorderLight {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ===== SECOES GERAIS ===== */
section {
    padding: 80px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
}

.section-desc {
    text-align: center;
    font-family: 'Bricolage Grotesque', sans-serif;
    color: rgba(255,255,255,0.6);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: 60px;
}

/* ===== O QUE EU FACO ===== */
.what-i-do {
    padding: 100px 20px;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.section-star {
    background: linear-gradient(90deg, var(--green) 0%, var(--white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 14px;
}

.section-header h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 32px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 0;
}

.section-intro {
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    color: rgba(255,255,255,0.6);
    line-height: 1.7;
    margin-bottom: 60px;
    max-width: 700px;
}

.services-list {
    display: flex;
    flex-direction: column;
}

.service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.service-row:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.service-title {
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
}

.service-tags {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.service-tags span {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    transition: color 0.3s;
}

.service-tags span:hover {
    background: linear-gradient(90deg, var(--green) 0%, var(--white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== HABILIDADES ===== */
.skills {
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
}

/* Skill tag container for tilt effect */
.skill-tag-container {
    position: relative;
    display: inline-block;
    /* Container gets its size from the skill-tag child */
}

/* Skill tag canvas with 3D perspective and tracker grid (matches feedback canvas pattern) */
.skill-tag-canvas {
    perspective: 800px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "tr-1 tr-2 tr-3 tr-4 tr-5"
        "tr-6 tr-7 tr-8 tr-9 tr-10"
        "tr-11 tr-12 tr-13 tr-14 tr-15"
        "tr-16 tr-17 tr-18 tr-19 tr-20"
        "tr-21 tr-22 tr-23 tr-24 tr-25";
}

/* Trackers for skill tags (same as feedback cards) */
.skill-tag-container .tracker {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 100%;
}

.skill-tag-container .tracker:hover {
    cursor: pointer;
}

/* 3D tilt effects for skill tags (same values as feedback cards) */
.skill-tag-container .tr-1:hover ~ .skill-tag { transform: rotateX(10deg) rotateY(-5deg); }
.skill-tag-container .tr-2:hover ~ .skill-tag { transform: rotateX(10deg) rotateY(-2.5deg); }
.skill-tag-container .tr-3:hover ~ .skill-tag { transform: rotateX(10deg) rotateY(0deg); }
.skill-tag-container .tr-4:hover ~ .skill-tag { transform: rotateX(10deg) rotateY(2.5deg); }
.skill-tag-container .tr-5:hover ~ .skill-tag { transform: rotateX(10deg) rotateY(5deg); }
.skill-tag-container .tr-6:hover ~ .skill-tag { transform: rotateX(5deg) rotateY(-5deg); }
.skill-tag-container .tr-7:hover ~ .skill-tag { transform: rotateX(5deg) rotateY(-2.5deg); }
.skill-tag-container .tr-8:hover ~ .skill-tag { transform: rotateX(5deg) rotateY(0deg); }
.skill-tag-container .tr-9:hover ~ .skill-tag { transform: rotateX(5deg) rotateY(2.5deg); }
.skill-tag-container .tr-10:hover ~ .skill-tag { transform: rotateX(5deg) rotateY(5deg); }
.skill-tag-container .tr-11:hover ~ .skill-tag { transform: rotateX(0deg) rotateY(-5deg); }
.skill-tag-container .tr-12:hover ~ .skill-tag { transform: rotateX(0deg) rotateY(-2.5deg); }
.skill-tag-container .tr-13:hover ~ .skill-tag { transform: rotateX(0deg) rotateY(0deg); }
.skill-tag-container .tr-14:hover ~ .skill-tag { transform: rotateX(0deg) rotateY(2.5deg); }
.skill-tag-container .tr-15:hover ~ .skill-tag { transform: rotateX(0deg) rotateY(5deg); }
.skill-tag-container .tr-16:hover ~ .skill-tag { transform: rotateX(-5deg) rotateY(-5deg); }
.skill-tag-container .tr-17:hover ~ .skill-tag { transform: rotateX(-5deg) rotateY(-2.5deg); }
.skill-tag-container .tr-18:hover ~ .skill-tag { transform: rotateX(-5deg) rotateY(0deg); }
.skill-tag-container .tr-19:hover ~ .skill-tag { transform: rotateX(-5deg) rotateY(2.5deg); }
.skill-tag-container .tr-20:hover ~ .skill-tag { transform: rotateX(-5deg) rotateY(5deg); }
.skill-tag-container .tr-21:hover ~ .skill-tag { transform: rotateX(-10deg) rotateY(-5deg); }
.skill-tag-container .tr-22:hover ~ .skill-tag { transform: rotateX(-10deg) rotateY(-2.5deg); }
.skill-tag-container .tr-23:hover ~ .skill-tag { transform: rotateX(-10deg) rotateY(0deg); }
.skill-tag-container .tr-24:hover ~ .skill-tag { transform: rotateX(-10deg) rotateY(2.5deg); }
.skill-tag-container .tr-25:hover ~ .skill-tag { transform: rotateX(-10deg) rotateY(5deg); }

/* Brightness increase on hover (like feedback cards) */
.skill-tag-container .tracker:hover ~ .skill-tag {
    filter: brightness(1.1);
}

.skill-tag {
    display: inline-flex;
    padding: 10px 20px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.7);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
    z-index: 0;
    grid-column: 1 / 6;
    grid-row: 1 / 6;
}

/* Rotating border effect like feedback cards */
.skill-tag::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50px;
    padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), var(--green) 0%, transparent 15%, transparent 85%, var(--green) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBorder 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Glow behind tag */
.skill-tag::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse at center, rgba(93, 255, 81, 0.1) 0%, transparent 70%);
    border-radius: 50px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.skill-tag:hover::before,
.skill-tag:hover::after {
    opacity: 1;
}

/* Tag glare effect (like feedback card glare) */
.skill-tag .tag-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
    border-radius: 50px;
}

.skill-tag-container:hover .tag-glare {
    opacity: 1;
}

.skill-tag:hover {
    border-color: rgba(93, 255, 81, 0.4);
    background: linear-gradient(90deg, var(--green) 0%, var(--white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateY(-2px);
}

/* ===== EXPERIENCIA ===== */
.experience {
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.experience-list {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
}

.experience-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.experience-row:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.exp-role {
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 700;
    color: var(--white);
}

.exp-details {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.exp-company {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    color: var(--white);
}

.exp-period {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    color: rgba(255,255,255,0.5);
}

/* ===== SOBRE ===== */
.sobre {
    text-align: center;
    padding: 100px 20px;
}

.sobre-line {
    font-family: 'Satoshi', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 2.2;
    color: rgba(255,255,255,0.85);
}

/* Pills com borda simples e texto gradiente */
.highlight-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 16px;
    background: var(--black);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50px;
    vertical-align: middle;
}

.highlight-pill span {
    background: linear-gradient(90deg, var(--green) 0%, var(--white) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 500;
    font-size: 24px;
}

/* ===== FEEDBACKS ===== */
.feedbacks {
    padding: 100px 20px;
}

/* Badge centralizado - NAO de ponta a ponta */
.feedbacks .badge {
    display: inline-flex;
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-size: 14px;
}

.feedbacks-header {
    text-align: center;
    margin-bottom: 50px;
}

.feedbacks h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 32px;
    font-weight: 700;
}

.feedbacks .section-desc {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 18px;
    font-weight: 400;
}

.feedback-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 50px;
}

/* ===== 3D FEEDBACK CARD CONTAINER ===== */
.feedback-container {
    position: relative;
    width: 100%;
    min-height: 200px;
    transition: 200ms;
}

.feedback-canvas {
    perspective: 800px;
    inset: 0;
    z-index: 200;
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px 0px;
    grid-template-areas:
        "tr-1 tr-2 tr-3 tr-4 tr-5"
        "tr-6 tr-7 tr-8 tr-9 tr-10"
        "tr-11 tr-12 tr-13 tr-14 tr-15"
        "tr-16 tr-17 tr-18 tr-19 tr-20"
        "tr-21 tr-22 tr-23 tr-24 tr-25";
    width: 100%;
    height: 100%;
}

.feedback-container .tracker {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 100%;
}

.feedback-container .tracker:hover {
    cursor: pointer;
}

.feedback-card {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--dark-bg);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 28px;
    transition: 300ms;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

/* Glow effect like button */
.feedback-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), var(--green) 0%, transparent 15%, transparent 85%, var(--green) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBorder 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
}

.feedback-container:hover .feedback-card::before {
    opacity: 1;
}

/* Glow behind card */
.feedback-card::after {
    content: '';
    position: absolute;
    inset: -15px;
    background: radial-gradient(ellipse at center, rgba(93, 255, 81, 0.08) 0%, transparent 70%);
    border-radius: 24px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.feedback-container:hover .feedback-card::after {
    opacity: 1;
}

/* Card glare effect */
.feedback-card .card-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
    border-radius: 16px;
}

.feedback-container:hover .card-glare {
    opacity: 1;
}

/* 3D rotation on hover */
.tr-1 { grid-area: tr-1; }
.tr-2 { grid-area: tr-2; }
.tr-3 { grid-area: tr-3; }
.tr-4 { grid-area: tr-4; }
.tr-5 { grid-area: tr-5; }
.tr-6 { grid-area: tr-6; }
.tr-7 { grid-area: tr-7; }
.tr-8 { grid-area: tr-8; }
.tr-9 { grid-area: tr-9; }
.tr-10 { grid-area: tr-10; }
.tr-11 { grid-area: tr-11; }
.tr-12 { grid-area: tr-12; }
.tr-13 { grid-area: tr-13; }
.tr-14 { grid-area: tr-14; }
.tr-15 { grid-area: tr-15; }
.tr-16 { grid-area: tr-16; }
.tr-17 { grid-area: tr-17; }
.tr-18 { grid-area: tr-18; }
.tr-19 { grid-area: tr-19; }
.tr-20 { grid-area: tr-20; }
.tr-21 { grid-area: tr-21; }
.tr-22 { grid-area: tr-22; }
.tr-23 { grid-area: tr-23; }
.tr-24 { grid-area: tr-24; }
.tr-25 { grid-area: tr-25; }

.tr-1:hover ~ .feedback-card { transform: rotateX(10deg) rotateY(-5deg); }
.tr-2:hover ~ .feedback-card { transform: rotateX(10deg) rotateY(-2.5deg); }
.tr-3:hover ~ .feedback-card { transform: rotateX(10deg) rotateY(0deg); }
.tr-4:hover ~ .feedback-card { transform: rotateX(10deg) rotateY(2.5deg); }
.tr-5:hover ~ .feedback-card { transform: rotateX(10deg) rotateY(5deg); }
.tr-6:hover ~ .feedback-card { transform: rotateX(5deg) rotateY(-5deg); }
.tr-7:hover ~ .feedback-card { transform: rotateX(5deg) rotateY(-2.5deg); }
.tr-8:hover ~ .feedback-card { transform: rotateX(5deg) rotateY(0deg); }
.tr-9:hover ~ .feedback-card { transform: rotateX(5deg) rotateY(2.5deg); }
.tr-10:hover ~ .feedback-card { transform: rotateX(5deg) rotateY(5deg); }
.tr-11:hover ~ .feedback-card { transform: rotateX(0deg) rotateY(-5deg); }
.tr-12:hover ~ .feedback-card { transform: rotateX(0deg) rotateY(-2.5deg); }
.tr-13:hover ~ .feedback-card { transform: rotateX(0deg) rotateY(0deg); }
.tr-14:hover ~ .feedback-card { transform: rotateX(0deg) rotateY(2.5deg); }
.tr-15:hover ~ .feedback-card { transform: rotateX(0deg) rotateY(5deg); }
.tr-16:hover ~ .feedback-card { transform: rotateX(-5deg) rotateY(-5deg); }
.tr-17:hover ~ .feedback-card { transform: rotateX(-5deg) rotateY(-2.5deg); }
.tr-18:hover ~ .feedback-card { transform: rotateX(-5deg) rotateY(0deg); }
.tr-19:hover ~ .feedback-card { transform: rotateX(-5deg) rotateY(2.5deg); }
.tr-20:hover ~ .feedback-card { transform: rotateX(-5deg) rotateY(5deg); }
.tr-21:hover ~ .feedback-card { transform: rotateX(-10deg) rotateY(-5deg); }
.tr-22:hover ~ .feedback-card { transform: rotateX(-10deg) rotateY(-2.5deg); }
.tr-23:hover ~ .feedback-card { transform: rotateX(-10deg) rotateY(0deg); }
.tr-24:hover ~ .feedback-card { transform: rotateX(-10deg) rotateY(2.5deg); }
.tr-25:hover ~ .feedback-card { transform: rotateX(-10deg) rotateY(5deg); }

.tracker:hover ~ .feedback-card {
    filter: brightness(1.1);
}

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.feedback-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.feedback-header img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.feedback-header h4 {
    font-family: 'Satoshi', sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 2px;
}

/* TEXTO ABAIXO DO NOME - CINZA, NAO VERDE */
.feedback-header p {
    font-family: 'Satoshi', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.5);
}

.feedback-card blockquote {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    font-style: normal;
}

/* ===== SEPARADOR VERDE COM DEGRADE NAS PONTAS ===== */
.separator {
    width: 100%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--green) 20%, var(--green) 80%, transparent 100%);
    margin: 0 auto;
    padding: 0;
}

/* ===== CTA FINAL ===== */
.cta-final {
    padding: 100px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cta-final h2 {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 12px;
}

.cta-final > p {
    font-family: 'Satoshi', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: rgba(255,255,255,0.6);
    margin-bottom: 40px;
}

/* Chat info - ABAIXO DO BOTAO */
.chat-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    font-family: 'Satoshi', sans-serif;
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    font-weight: 400;
}

.chat-info img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
}

/* ===== FOOTER ===== */
.footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 28px 50px;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content p {
    font-family: 'Satoshi', sans-serif;
    color: rgba(255,255,255,0.4);
    font-size: 13px;
    font-weight: 400;
}

.footer-icons {
    display: flex;
    gap: 16px;
}

.footer-icons a {
    color: rgba(255,255,255,0.4);
    transition: color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
}

.footer-icons a:hover {
    color: var(--green);
}

.footer-icons svg {
    width: 20px;
    height: 20px;
}

/* ===== RESPONSIVE - TABLET ===== */
@media (max-width: 1024px) {
    .navbar {
        padding: 0 30px;
    }

    /* Hide social icons on tablet, move to menu */
    .nav-icons-left {
        display: none;
    }

    /* Move logo to left on tablet */
    .nav-logo {
        position: static;
        transform: none;
        order: 1;
    }

    /* Show menu toggle */
    .menu-toggle {
        display: flex;
        order: 3;
    }

    /* Restructure menu for tablet */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100vh;
        background: rgba(10, 10, 10, 0.98);
        backdrop-filter: blur(40px);
        -webkit-backdrop-filter: blur(40px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 60px 30px 40px;
        gap: 0;
        transition: right 0.3s ease;
        z-index: 1000;
    }

    .nav-menu.active {
        right: 0;
    }

    /* Show logo in menu */
    .nav-menu .menu-logo {
        display: block;
        margin-bottom: 60px;
    }

    .nav-menu .menu-logo img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    /* Menu links container */
    .nav-menu .menu-links {
        flex-direction: column;
        gap: 32px;
        align-items: center;
        flex: 1;
        justify-content: center;
    }

    .nav-menu .menu-links a {
        font-size: 20px;
    }

    /* Show social icons in menu */
    .nav-menu .menu-social {
        display: flex;
        gap: 24px;
        margin-top: auto;
        padding-top: 40px;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .nav-menu .menu-social a {
        color: rgba(255,255,255,0.4);
        transition: color 0.3s;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 8px;
    }

    .nav-menu .menu-social a:hover {
        color: var(--green);
    }

    .nav-menu .menu-social svg {
        width: 24px;
        height: 24px;
    }

    .footer-icons {
        gap: 12px;
    }

    .hero-title {
        font-size: 56px;
    }

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

    .feedback-container {
        min-height: 220px;
    }

    .sobre-line {
        font-size: 20px;
    }

    .highlight-pill span {
        font-size: 20px;
    }

    /* O Que Eu Faco - Tablet */
    .what-i-do {
        padding: 80px 20px;
    }

    .service-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .service-tags {
        justify-content: flex-start;
    }

    /* Habilidades - Tablet */
    .skills {
        padding: 80px 20px;
    }

    /* Experiencia - Tablet */
    .experience {
        padding: 80px 20px;
    }
}

/* ===== RESPONSIVE - MOBILE ===== */
@media (max-width: 768px) {
    .navbar {
        padding: 0 20px;
        height: 80px;
    }

    /* Hide social icons on mobile, move to menu */
    .nav-icons-left {
        display: none;
    }

    /* Logo already positioned left from tablet styles */
    .nav-logo img {
        height: 28px;
        width: 28px;
    }

    /* Menu structure inherited from tablet, adjust for mobile */
    .nav-menu {
        width: 80%;
    }

    .nav-menu .menu-links a {
        font-size: 18px;
    }

    .nav-menu .menu-social svg {
        width: 20px;
        height: 20px;
    }

    .hero {
        padding: 80px 20px 50px;
    }

    .profile-photo {
        width: 100px;
        height: 100px;
        margin-bottom: 24px;
    }

    .badge {
        padding: 8px 16px;
        font-size: 12px;
        margin-bottom: 28px;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 36px;
    }

    .btn-animated {
        padding: 14px 28px;
        font-size: 14px;
    }

    section {
        padding: 60px 20px;
    }

    h2 {
        font-size: 26px;
    }

    .section-desc {
        font-size: 15px;
    }

    .sobre-line {
        font-size: 16px;
        line-height: 2.2;
    }

    .highlight-pill {
        padding: 2px 14px;
    }

    .highlight-pill span {
        font-size: 16px;
    }

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

    .feedback-container {
        min-height: 180px;
    }

    .feedback-card {
        padding: 20px;
    }

    .cta-final h2 {
        font-size: 26px;
    }

    .cta-final > p {
        font-size: 15px;
    }

    .footer {
        padding: 24px 20px;
    }

    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    /* Reduce footer icon spacing on mobile */
    .footer-icons {
        gap: 10px;
    }

    /* O Que Eu Faco - Mobile */
    .what-i-do {
        padding: 60px 20px;
    }

    .section-header h2 {
        font-size: 26px;
    }

    .section-intro {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .service-title {
        font-size: 20px;
    }

    .service-tags {
        gap: 16px;
    }

    .service-tags span {
        font-size: 13px;
    }

    /* Habilidades - Mobile */
    .skills {
        padding: 60px 20px;
    }

    .skills-tags {
        gap: 10px;
        margin-top: 30px;
    }

    .skill-tag {
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Experiencia - Mobile */
    .experience {
        padding: 60px 20px;
    }

    .experience-list {
        margin-top: 30px;
    }

    .experience-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 20px 0;
    }

    .exp-details {
        align-items: flex-start;
    }

    .exp-role {
        font-size: 20px;
    }

    .exp-company {
        font-size: 14px;
    }

    .exp-period {
        font-size: 13px;
    }
}

/* ===== RESPONSIVE - MOBILE PEQUENO ===== */
@media (max-width: 480px) {
    .hero-title {
        font-size: 32px;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .sobre-line {
        font-size: 14px;
    }

    .highlight-pill {
        padding: 2px 12px;
    }

    .highlight-pill span {
        font-size: 14px;
    }

    h2 {
        font-size: 22px;
    }

    .cta-final h2 {
        font-size: 22px;
    }

    /* O Que Eu Faco - Mobile Pequeno */
    .section-header h2 {
        font-size: 22px;
    }

    .section-intro {
        font-size: 14px;
    }

    .service-title {
        font-size: 18px;
    }

    .service-tags span {
        font-size: 12px;
    }

    /* Habilidades - Mobile Pequeno */
    .skill-tag {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* Experiencia - Mobile Pequeno */
    .exp-role {
        font-size: 18px;
    }

    .exp-company {
        font-size: 13px;
    }

    .exp-period {
        font-size: 12px;
    }
}

/* ===== RESPONSIVE - VERY SMALL MOBILE (320px) ===== */
@media (max-width: 360px) {
    .navbar {
        padding: 0 16px;
    }

    .hero {
        padding: 70px 16px 40px;
    }

    .hero-title {
        font-size: 28px;
    }

    .hero-subtitle {
        font-size: 15px;
        line-height: 1.6;
    }

    .btn-animated {
        padding: 16px 32px;
        font-size: 14px;
        min-height: 50px;
        width: 100%;
        max-width: 280px;
    }

    section {
        padding: 50px 16px;
    }

    .sobre-line {
        font-size: 13px;
        line-height: 2;
    }

    h2 {
        font-size: 20px;
    }

    .section-header h2 {
        font-size: 20px;
    }

    .service-title {
        font-size: 16px;
    }

    .service-tags span {
        font-size: 11px;
        padding: 4px 8px;
    }

    .skill-tag {
        padding: 6px 10px;
        font-size: 11px;
    }

    .nav-menu {
        width: 85%;
    }

    .feedback-card {
        padding: 16px;
    }

    .cta-final h2 {
        font-size: 20px;
    }
}

/* ===== CUSTOM CURSOR ===== */
.cursor {
    width: 12px;
    height: 12px;
    background: var(--white);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, width 0.1s ease, height 0.1s ease;
    display: none;
}

/* Only show custom cursor on devices with hover support (desktop) */
@media (hover: hover) and (pointer: fine) {
    .cursor {
        display: block;
    }
    
    body,
    body * {
        cursor: none !important;
    }
}

.cursor.pointer {
    width: 20px;
    height: 20px;
}

/* ===== SHINE TEXT EFFECT ===== */
.shine-text {
    background: linear-gradient(90deg, var(--green), var(--white), var(--green));
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineGreen 3s linear infinite;
}

.shine-text-gray {
    background: linear-gradient(90deg, #838383, #ffffff, #838383);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shineGray 3s linear infinite;
}

@keyframes shineGreen {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

@keyframes shineGray {
    0% { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.fade-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Stagger animation delays */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ===== BADGE WITH 3D EFFECTS ===== */
.badge-container {
    display: inline-block;
    position: relative;
}

.badge-container .skill-tag-canvas {
    perspective: 800px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px;
    width: 100%;
    height: 100%;
}

.badge-container .tracker {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 100%;
}

.badge-container .tracker:hover {
    cursor: pointer;
}

/* 3D tilt effects for badge */
.badge-container .tr-1:hover ~ .badge { transform: rotateX(10deg) rotateY(-5deg); }
.badge-container .tr-2:hover ~ .badge { transform: rotateX(10deg) rotateY(-2.5deg); }
.badge-container .tr-3:hover ~ .badge { transform: rotateX(10deg) rotateY(0deg); }
.badge-container .tr-4:hover ~ .badge { transform: rotateX(10deg) rotateY(2.5deg); }
.badge-container .tr-5:hover ~ .badge { transform: rotateX(10deg) rotateY(5deg); }
.badge-container .tr-6:hover ~ .badge { transform: rotateX(5deg) rotateY(-5deg); }
.badge-container .tr-7:hover ~ .badge { transform: rotateX(5deg) rotateY(-2.5deg); }
.badge-container .tr-8:hover ~ .badge { transform: rotateX(5deg) rotateY(0deg); }
.badge-container .tr-9:hover ~ .badge { transform: rotateX(5deg) rotateY(2.5deg); }
.badge-container .tr-10:hover ~ .badge { transform: rotateX(5deg) rotateY(5deg); }
.badge-container .tr-11:hover ~ .badge { transform: rotateX(0deg) rotateY(-5deg); }
.badge-container .tr-12:hover ~ .badge { transform: rotateX(0deg) rotateY(-2.5deg); }
.badge-container .tr-13:hover ~ .badge { transform: rotateX(0deg) rotateY(0deg); }
.badge-container .tr-14:hover ~ .badge { transform: rotateX(0deg) rotateY(2.5deg); }
.badge-container .tr-15:hover ~ .badge { transform: rotateX(0deg) rotateY(5deg); }
.badge-container .tr-16:hover ~ .badge { transform: rotateX(-5deg) rotateY(-5deg); }
.badge-container .tr-17:hover ~ .badge { transform: rotateX(-5deg) rotateY(-2.5deg); }
.badge-container .tr-18:hover ~ .badge { transform: rotateX(-5deg) rotateY(0deg); }
.badge-container .tr-19:hover ~ .badge { transform: rotateX(-5deg) rotateY(2.5deg); }
.badge-container .tr-20:hover ~ .badge { transform: rotateX(-5deg) rotateY(5deg); }
.badge-container .tr-21:hover ~ .badge { transform: rotateX(-10deg) rotateY(-5deg); }
.badge-container .tr-22:hover ~ .badge { transform: rotateX(-10deg) rotateY(-2.5deg); }
.badge-container .tr-23:hover ~ .badge { transform: rotateX(-10deg) rotateY(0deg); }
.badge-container .tr-24:hover ~ .badge { transform: rotateX(-10deg) rotateY(2.5deg); }
.badge-container .tr-25:hover ~ .badge { transform: rotateX(-10deg) rotateY(5deg); }

/* Brightness increase on hover */
.badge-container .tracker:hover ~ .badge {
    filter: brightness(1.1);
}

/* Update badge styles for 10px font and 7px 14px padding */
.badge-container .badge {
    font-size: 12px;
    padding: 8px 17px;
    z-index: 0;
    grid-column: 1 / 6;
    grid-row: 1 / 6;
}

/* Rotating border effect for badge */
.badge-container .badge::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50px;
    padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), var(--green) 0%, transparent 15%, transparent 85%, var(--green) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBorder 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Glow behind badge */
.badge-container .badge::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse at center, rgba(93, 255, 81, 0.1) 0%, transparent 70%);
    border-radius: 50px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.badge-container .badge:hover::before,
.badge-container .badge:hover::after {
    opacity: 1;
}

/* Tag glare effect for badge */
.badge-container .badge .tag-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
    border-radius: 50px;
}

.badge-container:hover .badge .tag-glare {
    opacity: 1;
}

/* ===== FEEDBACKS TITLE WITH 3D EFFECTS ===== */
.feedbacks-title-container {
    display: inline-block;
    position: relative;
}

.feedbacks-title-container .skill-tag-canvas {
    perspective: 800px;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    gap: 0px;
    width: 100%;
    height: 100%;
}

.feedbacks-title-container .tracker {
    position: absolute;
    z-index: 200;
    width: 100%;
    height: 100%;
}

.feedbacks-title-container .tracker:hover {
    cursor: pointer;
}

/* 3D tilt effects for feedbacks-title */
.feedbacks-title-container .tr-1:hover ~ .feedbacks-title { transform: rotateX(10deg) rotateY(-5deg); }
.feedbacks-title-container .tr-2:hover ~ .feedbacks-title { transform: rotateX(10deg) rotateY(-2.5deg); }
.feedbacks-title-container .tr-3:hover ~ .feedbacks-title { transform: rotateX(10deg) rotateY(0deg); }
.feedbacks-title-container .tr-4:hover ~ .feedbacks-title { transform: rotateX(10deg) rotateY(2.5deg); }
.feedbacks-title-container .tr-5:hover ~ .feedbacks-title { transform: rotateX(10deg) rotateY(5deg); }
.feedbacks-title-container .tr-6:hover ~ .feedbacks-title { transform: rotateX(5deg) rotateY(-5deg); }
.feedbacks-title-container .tr-7:hover ~ .feedbacks-title { transform: rotateX(5deg) rotateY(-2.5deg); }
.feedbacks-title-container .tr-8:hover ~ .feedbacks-title { transform: rotateX(5deg) rotateY(0deg); }
.feedbacks-title-container .tr-9:hover ~ .feedbacks-title { transform: rotateX(5deg) rotateY(2.5deg); }
.feedbacks-title-container .tr-10:hover ~ .feedbacks-title { transform: rotateX(5deg) rotateY(5deg); }
.feedbacks-title-container .tr-11:hover ~ .feedbacks-title { transform: rotateX(0deg) rotateY(-5deg); }
.feedbacks-title-container .tr-12:hover ~ .feedbacks-title { transform: rotateX(0deg) rotateY(-2.5deg); }
.feedbacks-title-container .tr-13:hover ~ .feedbacks-title { transform: rotateX(0deg) rotateY(0deg); }
.feedbacks-title-container .tr-14:hover ~ .feedbacks-title { transform: rotateX(0deg) rotateY(2.5deg); }
.feedbacks-title-container .tr-15:hover ~ .feedbacks-title { transform: rotateX(0deg) rotateY(5deg); }
.feedbacks-title-container .tr-16:hover ~ .feedbacks-title { transform: rotateX(-5deg) rotateY(-5deg); }
.feedbacks-title-container .tr-17:hover ~ .feedbacks-title { transform: rotateX(-5deg) rotateY(-2.5deg); }
.feedbacks-title-container .tr-18:hover ~ .feedbacks-title { transform: rotateX(-5deg) rotateY(0deg); }
.feedbacks-title-container .tr-19:hover ~ .feedbacks-title { transform: rotateX(-5deg) rotateY(2.5deg); }
.feedbacks-title-container .tr-20:hover ~ .feedbacks-title { transform: rotateX(-5deg) rotateY(5deg); }
.feedbacks-title-container .tr-21:hover ~ .feedbacks-title { transform: rotateX(-10deg) rotateY(-5deg); }
.feedbacks-title-container .tr-22:hover ~ .feedbacks-title { transform: rotateX(-10deg) rotateY(-2.5deg); }
.feedbacks-title-container .tr-23:hover ~ .feedbacks-title { transform: rotateX(-10deg) rotateY(0deg); }
.feedbacks-title-container .tr-24:hover ~ .feedbacks-title { transform: rotateX(-10deg) rotateY(2.5deg); }
.feedbacks-title-container .tr-25:hover ~ .feedbacks-title { transform: rotateX(-10deg) rotateY(5deg); }

/* Brightness increase on hover */
.feedbacks-title-container .tracker:hover ~ .feedbacks-title {
    filter: brightness(1.1);
}

/* Update feedbacks-title styles for 10px font and 7px 14px padding */
.feedbacks-title-container .feedbacks-title {
    font-size: 12px;
    padding: 8px 17px;
    z-index: 0;
    grid-column: 1 / 6;
    grid-row: 1 / 6;
}

/* Rotating border effect for feedbacks-title */
.feedbacks-title-container .feedbacks-title::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50px;
    padding: 1px;
    background: conic-gradient(from var(--angle, 0deg), var(--green) 0%, transparent 15%, transparent 85%, var(--green) 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: rotateBorder 3s linear infinite;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}

/* Glow behind feedbacks-title */
.feedbacks-title-container .feedbacks-title::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(ellipse at center, rgba(93, 255, 81, 0.1) 0%, transparent 70%);
    border-radius: 50px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}

.feedbacks-title-container .feedbacks-title:hover::before,
.feedbacks-title-container .feedbacks-title:hover::after {
    opacity: 1;
}

/* Tag glare effect for feedbacks-title */
.feedbacks-title-container .feedbacks-title .tag-glare {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%
    );
    opacity: 0;
    transition: opacity 300ms;
    pointer-events: none;
    border-radius: 50px;
}

.feedbacks-title-container:hover .feedbacks-title .tag-glare {
    opacity: 1;
}