/* ==================== CSS VARIABLES ==================== */
:root {
    --background: hsl(142, 45%, 8%);
    --foreground: hsl(142, 20%, 95%);
    --card: hsl(142, 40%, 10%);
    --card-foreground: hsl(142, 20%, 95%);
    --primary: hsl(142, 76%, 45%);
    --primary-foreground: hsl(0, 0%, 100%);
    --secondary: hsl(142, 50%, 15%);
    --muted: hsl(142, 30%, 20%);
    --muted-foreground: hsl(142, 15%, 65%);
    --accent-blue: hsl(199, 89%, 55%);
    --accent-violet: hsl(270, 65%, 65%);
    --accent-foreground: hsl(0, 0%, 100%);
    --border: hsl(142, 30%, 18%);
    --primary-glow: hsl(142, 76%, 65%);

    --gradient-primary: linear-gradient(135deg, hsl(199, 89%, 55%), hsl(142, 76%, 45%));
    --gradient-blue:    linear-gradient(135deg, hsl(220, 85%, 60%), hsl(199, 89%, 55%));
    --gradient-violet:  linear-gradient(135deg, hsl(290, 65%, 55%), hsl(270, 65%, 65%));
    --gradient-subtle:  linear-gradient(180deg, hsl(142, 45%, 8%), hsl(142, 40%, 12%));
    --gradient-radial:  radial-gradient(circle at 50% 50%, hsla(142, 76%, 45%, 0.15), transparent 70%);

    --shadow-elegant: 0 10px 30px -10px hsla(142, 76%, 45%, 0.4);
    --shadow-glow:    0 0 40px hsla(142, 76%, 45%, 0.3);
    --shadow-glow-blue:   0 0 40px hsla(199, 89%, 55%, 0.3);
    --shadow-glow-violet: 0 0 40px hsla(270, 65%, 65%, 0.3);

    --radius: 0.75rem;
}

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

/* overflow-x no html — não quebra position:fixed como acontece no body */
html { overflow-x: hidden; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.6;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* ==================== ANIMATIONS ==================== */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-20px); }
}
@keyframes float-slow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50%       { transform: translateY(-30px) rotate(5deg); }
}
@keyframes drift {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    33%       { transform: translateX(30px) translateY(-20px); }
    66%       { transform: translateX(-20px) translateY(20px); }
}
@keyframes pulse-glow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50%       { opacity: 0.85; transform: scale(1.06); }
}
@keyframes shimmer {
    0%   { transform: translateX(-120%) skewX(-15deg); }
    100% { transform: translateX(220%) skewX(-15deg); }
}
@keyframes scan {
    0%   { top: -4px; opacity: 0; }
    5%   { opacity: 1; }
    95%  { opacity: 1; }
    100% { top: 100%; opacity: 0; }
}
@keyframes particle-float {
    0%, 100% { transform: translateY(0px) translateX(0px); opacity: 0.4; }
    25%       { transform: translateY(-18px) translateX(8px); opacity: 0.9; }
    50%       { transform: translateY(-10px) translateX(-6px); opacity: 0.6; }
    75%       { transform: translateY(-22px) translateX(4px); opacity: 0.8; }
}
@keyframes rotate-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ==================== BUTTONS ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    text-decoration: none;
    letter-spacing: 0.01em;
}
.btn-primary {
    background: var(--primary);
    color: var(--primary-foreground);
    box-shadow: var(--shadow-glow);
    position: relative;
    overflow: hidden;
}
.btn-primary::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    animation: shimmer 3s ease-in-out infinite;
    animation-delay: 1.5s;
}
.btn-primary:hover { box-shadow: var(--shadow-elegant); transform: scale(1.05); }
.btn-primary:hover i { transform: translateX(4px); }
.btn-primary i { transition: transform 0.3s ease; }
.btn-outline {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    backdrop-filter: blur(10px);
}
.btn-outline:hover { background: var(--primary); color: var(--primary-foreground); transform: scale(1.05); }

/* ==================== HERO SECTION ==================== */
.hero-section {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--gradient-subtle);
}
.grid-background {
    position: absolute; inset: 0;
    background-image:
        linear-gradient(to right, rgba(128,128,128,0.07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(128,128,128,0.07) 1px, transparent 1px);
    background-size: 24px 24px;
}
.scan-line {
    position: absolute; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, hsla(142,76%,55%,0.4), hsla(199,89%,65%,0.4), transparent);
    pointer-events: none; z-index: 2;
    animation: scan 8s linear infinite; animation-delay: 2s;
}
.floating-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.particle { position: absolute; border-radius: 50%; animation: particle-float 6s ease-in-out infinite; pointer-events: none; }

/* Orbs */
.orb { position: absolute; border-radius: 50%; filter: blur(60px); }
.orb-1 { top:5rem; left:2.5rem; width:18rem; height:18rem; background:hsla(142,76%,45%,0.3); animation:float 6s ease-in-out infinite; }
.orb-2 { bottom:5rem; right:2.5rem; width:24rem; height:24rem; background:hsla(199,89%,55%,0.25); animation:float-slow 8s ease-in-out infinite; animation-delay:1s; }
.orb-3 { top:50%; left:33%; width:16rem; height:16rem; background:hsla(142,76%,65%,0.2); animation:pulse-glow 4s ease-in-out infinite; animation-delay:2s; }
.orb-4 { top:2.5rem; right:33%; width:20rem; height:20rem; background:hsla(142,76%,45%,0.2); animation:float 6s ease-in-out infinite; animation-delay:3s; }
.orb-5 { bottom:25%; left:5rem; width:14rem; height:14rem; background:hsla(199,89%,55%,0.3); animation:drift 10s ease-in-out infinite; animation-delay:1.5s; }
.orb-6 { top:30%; right:8%; width:12rem; height:12rem; background:hsla(270,65%,65%,0.2); animation:pulse-glow 5s ease-in-out infinite; animation-delay:0.5s; }

/* Shapes */
.shape { position: absolute; }
.shape-1 { top:25%; right:25%; width:5rem; height:5rem; border:2px solid hsla(142,76%,45%,0.4); border-radius:0.5rem; transform:rotate(45deg); animation:drift 10s ease-in-out infinite; }
.shape-2 { bottom:33%; left:25%; width:4rem; height:4rem; border:2px solid hsla(199,89%,55%,0.4); border-radius:50%; animation:float 6s ease-in-out infinite; animation-delay:0.5s; }
.shape-3 { top:33%; right:33%; width:3rem; height:3rem; background:var(--gradient-primary); opacity:0.3; border-radius:0.5rem; animation:drift 10s ease-in-out infinite; animation-delay:1.5s; }
.shape-4 { top:50%; right:20%; width:6rem; height:6rem; border:1px solid hsla(142,76%,45%,0.3); border-radius:50%; animation:float-slow 8s ease-in-out infinite; animation-delay:2s; }
.shape-5 { bottom:50%; left:33%; width:3.5rem; height:3.5rem; border:2px solid hsla(199,89%,55%,0.35); transform:rotate(12deg); animation:drift 10s ease-in-out infinite; animation-delay:2.5s; }
.shape-6 { top:75%; right:50%; width:2.5rem; height:2.5rem; background:hsla(142,76%,45%,0.25); border-radius:50%; animation:float 6s ease-in-out infinite; animation-delay:3.5s; }
.shape-7 { top:15%; left:15%; width:4.5rem; height:4.5rem; border:2px solid hsla(270,65%,65%,0.35); border-radius:0.75rem; animation:rotate-slow 20s linear infinite; }

/* Icon decorations */
.icon-decoration { position: absolute; }
.icon-decoration i { width:2rem; height:2rem; color:hsla(142,76%,45%,0.4); }
.icon-1 { top:25%; left:20%; animation:float-slow 8s ease-in-out infinite; animation-delay:2.5s; }
.icon-2 { bottom:25%; right:20%; animation:float 6s ease-in-out infinite; animation-delay:3s; }
.icon-2 i { width:2.5rem; height:2.5rem; color:hsla(199,89%,55%,0.5); }
.icon-3 { top:66%; left:50%; animation:drift 10s ease-in-out infinite; animation-delay:1s; }
.icon-3 i { width:1.5rem; height:1.5rem; color:hsla(142,76%,45%,0.5); }
.icon-4 { top:33%; left:25%; animation:float-slow 8s ease-in-out infinite; animation-delay:0.8s; }
.icon-4 i { width:1.5rem; height:1.5rem; color:hsla(270,65%,65%,0.5); }
.icon-5 { bottom:33%; right:33%; animation:drift 10s ease-in-out infinite; animation-delay:2.2s; }
.icon-5 i { width:1.75rem; height:1.75rem; color:hsla(142,76%,45%,0.45); }
.icon-6 { top:20%; right:40%; animation:float 6s ease-in-out infinite; animation-delay:1.8s; }
.icon-6 i { width:2.25rem; height:2.25rem; color:hsla(199,89%,55%,0.35); }

/* Hero content */
.hero-content {
    position: relative; z-index: 10;
    max-width: 64rem; text-align: center;
    padding: 5rem 1rem;
    animation: fade-in 0.7s ease-out;
}
.logo-container { display:inline-flex; align-items:center; gap:0.75rem; margin-bottom:2rem; }
.logo-wrapper { position: relative; }
.logo-glow { position:absolute; inset:0; background:var(--gradient-primary); filter:blur(24px); opacity:0.5; animation:pulse-glow 4s ease-in-out infinite; }
.logo-box { position:relative; background:transparent; padding:0; border-radius:1rem; box-shadow:var(--shadow-glow); display:flex; align-items:center; justify-content:center; }
.logo-box.animate-float { animation: float 6s ease-in-out infinite; }
.logo-img { width:4rem; height:4rem; border-radius:1rem; transition:transform 0.5s ease; }
.logo-img:hover { transform: scale(1.1); }

.brand-name {
    font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em;
    background: var(--gradient-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-title {
    font-size: 3rem; font-weight: 800; letter-spacing: -0.03em;
    line-height: 1.1; margin-bottom: 1.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.hero-description {
    font-size: 1.2rem; color: var(--muted-foreground);
    margin-bottom: 2rem; max-width: 42rem;
    margin-left: auto; margin-right: auto;
    font-weight: 400; line-height: 1.7;
}
.hero-buttons {
    display: flex; flex-direction: column;
    gap: 1rem; justify-content: center; align-items: center;
    margin-bottom: 3rem;
}

/* Stats */
.hero-stats { margin-top: 3rem; }
.stats-grid {
    display: flex; flex-direction: column; align-items: center;
    background: hsla(142,40%,8%,0.7);
    backdrop-filter: blur(12px);
    border: 1px solid hsla(142,40%,30%,0.25);
    border-radius: 1.25rem;
    padding: 1.75rem 1.5rem;
}
.stat-item { text-align: center; padding: 1rem 0; width: 100%; }
.hero-stats .stats-grid .stat-item .stat-number {
    font-size: 2.75rem; font-weight: 800; letter-spacing: -0.04em;
    line-height: 1; margin-bottom: 0.5rem; display: block;
    background: none;
    -webkit-background-clip: border-box; background-clip: border-box;
    -webkit-text-fill-color: currentcolor;
}
.hero-stats .stats-grid .stat-item .stat-number.stat-green {
    color: hsl(142,80%,58%); -webkit-text-fill-color: hsl(142,80%,58%);
    filter: drop-shadow(0 0 14px hsla(142,76%,45%,0.65));
}
.hero-stats .stats-grid .stat-item .stat-number.stat-blue {
    color: hsl(199,90%,68%); -webkit-text-fill-color: hsl(199,90%,68%);
    filter: drop-shadow(0 0 14px hsla(199,89%,55%,0.65));
}
.hero-stats .stats-grid .stat-item .stat-number.stat-violet {
    color: hsl(270,70%,78%); -webkit-text-fill-color: hsl(270,70%,78%);
    filter: drop-shadow(0 0 14px hsla(270,65%,65%,0.65));
}
.stat-label { font-size:0.78rem; color:hsl(142,20%,80%); text-transform:uppercase; letter-spacing:0.1em; font-weight:600; }
.stat-divider { width:60%; height:1px; background:hsla(142,40%,40%,0.2); margin:0 auto; }
.hero-gradient-bottom { position:absolute; bottom:0; left:0; right:0; height:8rem; background:linear-gradient(to top, var(--background), transparent); }

/* ==================== SERVICES SECTION ==================== */
.services-section { position:relative; padding:6rem 0; background:var(--background); overflow:hidden; }
.floating-bg { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.bg-orb { position:absolute; border-radius:50%; filter:blur(60px); }
.bg-orb-1 { top:2.5rem; right:5rem; width:16rem; height:16rem; background:hsla(142,76%,45%,0.2); animation:float-slow 8s ease-in-out infinite; }
.bg-orb-2 { bottom:5rem; left:2.5rem; width:20rem; height:20rem; background:hsla(199,89%,55%,0.15); animation:pulse-glow 4s ease-in-out infinite; }
.bg-orb-3 { top:33%; left:25%; width:13rem; height:13rem; background:hsla(142,76%,45%,0.15); animation:float 6s ease-in-out infinite; animation-delay:1.5s; }
.bg-orb-4 { top:5rem; left:33%; width:5rem; height:5rem; background:var(--gradient-primary); opacity:0.2; border-radius:0.5rem; animation:float-slow 8s ease-in-out infinite; animation-delay:0.8s; }
.bg-orb-5 { bottom:15%; right:20%; width:14rem; height:14rem; background:hsla(270,65%,65%,0.12); animation:float 7s ease-in-out infinite; animation-delay:2s; }
.bg-shape { position:absolute; }
.bg-shape-1 { top:50%; right:33%; width:10rem; height:10rem; border:1px solid hsla(142,76%,45%,0.3); border-radius:0.5rem; transform:rotate(12deg); animation:drift 10s ease-in-out infinite; }
.bg-shape-2 { bottom:25%; right:20%; width:9rem; height:9rem; border:2px solid hsla(199,89%,55%,0.25); border-radius:50%; animation:drift 10s ease-in-out infinite; animation-delay:2s; }

.section-header { text-align:center; margin-bottom:4rem; animation:fade-in 0.6s ease-out; }
.section-title { font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1rem; }
.gradient-text { background:var(--gradient-primary); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.section-description { font-size:1.15rem; color:var(--muted-foreground); max-width:42rem; margin:0 auto; line-height:1.7; }

.services-grid { display:grid; grid-template-columns:1fr; gap:1.5rem; max-width:84rem; margin:0 auto; position:relative; z-index:10; }

/* Base card */
.service-card {
    background: hsla(142,40%,10%,0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2rem;
    transition: all 0.45s cubic-bezier(0.4,0,0.2,1);
    animation: fade-in 0.6s ease-out both;
    position: relative; overflow: hidden;
}
.service-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; opacity:0; transition:opacity 0.4s ease; border-radius:var(--radius) var(--radius) 0 0; }
.service-card:hover::before { opacity:1; }

.service-card--green::before { background:var(--gradient-primary); }
.service-card--green .service-icon-wrapper { background:var(--gradient-primary); }
.service-card--green .service-icon-glow   { background:var(--gradient-primary); }
.service-card--green:hover { border-color:hsla(142,76%,45%,0.5); box-shadow:var(--shadow-glow); transform:translateY(-0.5rem); }
.service-card--green:hover .service-title { color:var(--primary); }

.service-card--blue::before { background:var(--gradient-blue); }
.service-card--blue .service-icon-wrapper { background:var(--gradient-blue); }
.service-card--blue .service-icon-glow   { background:var(--gradient-blue); }
.service-card--blue:hover { border-color:hsla(199,89%,55%,0.5); box-shadow:var(--shadow-glow-blue); transform:translateY(-0.5rem); }
.service-card--blue:hover .service-title { color:var(--accent-blue); }

.service-card--violet::before { background:var(--gradient-violet); }
.service-card--violet .service-icon-wrapper { background:var(--gradient-violet); }
.service-card--violet .service-icon-glow   { background:var(--gradient-violet); }
.service-card--violet:hover { border-color:hsla(270,65%,65%,0.5); box-shadow:var(--shadow-glow-violet); transform:translateY(-0.5rem); }
.service-card--violet:hover .service-title { color:var(--accent-violet); }

.service-icon-wrapper { position:relative; width:3.5rem; height:3.5rem; border-radius:0.75rem; display:flex; align-items:center; justify-content:center; margin-bottom:1.25rem; transition:all 0.45s ease; }
.service-card:hover .service-icon-wrapper { transform:scale(1.12); }
.service-icon-glow { position:absolute; inset:0; border-radius:0.75rem; filter:blur(12px); opacity:0; transition:opacity 0.45s ease; }
.service-card:hover .service-icon-glow { opacity:0.55; }
.service-icon { position:relative; z-index:10; width:1.75rem; height:1.75rem; color:white; }
.service-title { font-size:1.2rem; font-weight:700; margin-bottom:0.75rem; letter-spacing:-0.01em; transition:color 0.3s ease; color:var(--foreground); }
.service-description { font-size:0.95rem; line-height:1.75; color:var(--muted-foreground); }

/* ==================== CONTACT SECTION ==================== */
.contact-section { position:relative; padding:6rem 0; background:var(--gradient-subtle); overflow:hidden; }
.contact-floating { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.contact-orb { position:absolute; border-radius:50%; filter:blur(60px); }
.contact-orb-1 { top:5rem; left:25%; width:18rem; height:18rem; background:var(--gradient-radial); animation:pulse-glow 4s ease-in-out infinite; }
.contact-orb-2 { bottom:2.5rem; right:25%; width:14rem; height:14rem; background:hsla(142,76%,45%,0.2); animation:float 6s ease-in-out infinite; }
.contact-orb-3 { top:50%; left:2.5rem; width:11rem; height:11rem; background:hsla(199,89%,55%,0.2); animation:float-slow 8s ease-in-out infinite; animation-delay:1.2s; }
.contact-orb-4 { top:20%; right:8%; width:10rem; height:10rem; background:hsla(270,65%,65%,0.15); animation:drift 9s ease-in-out infinite; animation-delay:0.8s; }
.contact-shape { position:absolute; }
.contact-shape-1 { top:33%; right:5rem; width:5rem; height:5rem; border:2px solid hsla(142,76%,45%,0.4); border-radius:50%; animation:drift 10s ease-in-out infinite; }
.contact-shape-2 { bottom:25%; right:33%; width:8rem; height:8rem; border:1px solid hsla(270,65%,65%,0.3); transform:rotate(45deg); animation:drift 10s ease-in-out infinite; animation-delay:2s; }

.contact-content { position:relative; z-index:10; max-width:64rem; text-align:center; animation:fade-in 0.6s ease-out; }
.contact-icon-wrapper { position:relative; display:inline-flex; align-items:center; justify-content:center; width:5rem; height:5rem; background:var(--gradient-primary); border-radius:50%; box-shadow:var(--shadow-glow); margin-bottom:1.5rem; }
.contact-icon-glow { position:absolute; inset:0; background:var(--gradient-primary); border-radius:50%; filter:blur(24px); opacity:0.5; animation:pulse-glow 4s ease-in-out infinite; }
.contact-icon { position:relative; z-index:10; width:2.5rem; height:2.5rem; color:white; }
.contact-title { font-size:2.5rem; font-weight:800; letter-spacing:-0.03em; margin-bottom:1.5rem; line-height:1.15; }
.contact-description { font-size:1.15rem; color:var(--muted-foreground); margin-bottom:2.5rem; max-width:42rem; margin-left:auto; margin-right:auto; line-height:1.7; }
.contact-buttons { display:flex; flex-direction:column; gap:1rem; justify-content:center; margin-bottom:2.5rem; }

.footer { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); display:flex; flex-direction:column; align-items:center; gap:0.6rem; }
.footer-text { color:var(--muted-foreground); font-size:0.9rem; }
.footer-phone {
    display:inline-flex; align-items:center; justify-content:center; gap:0.45rem;
    color:#25D366; -webkit-text-fill-color:#25D366;
    font-size:1rem; font-weight:700; text-decoration:none;
    padding:0.4rem 1rem;
    border:1px solid rgba(37,211,102,0.3); border-radius:2rem;
    transition:background 0.2s;
}
.footer-phone:hover { background:rgba(37,211,102,0.08); }
.footer-copyright { font-size:0.8rem; color:var(--muted-foreground); }

/* ==================== RESPONSIVE ==================== */
@media (min-width: 640px) {
    .hero-buttons, .contact-buttons { flex-direction:row; }
    .logo-img { width:4.5rem; height:4.5rem; }
    .brand-name { font-size:3rem; }
    .hero-title, .contact-title { font-size:4rem; }
    .stats-grid { flex-direction:row; justify-content:center; padding:1.75rem 2rem; }
    .stat-item { padding:0 2.5rem; flex:1; width:auto; }
    .stat-divider { width:1px; height:56px; margin:auto 0; background:hsla(142,40%,40%,0.25); }
    .hero-stats .stats-grid .stat-item .stat-number { font-size:3.25rem; }
}
@media (min-width: 768px) {
    .services-grid { grid-template-columns:repeat(2,1fr); }
    .section-title { font-size:3rem; }
}
@media (min-width: 1024px) {
    .services-grid { grid-template-columns:repeat(3,1fr); }
    .hero-title { font-size:4.5rem; }
    .contact-title { font-size:3.5rem; }
}