/*==================================================
MRS VIDROS
BUILD 006
STYLE.CSS
PARTE 01
==================================================*/

/*==================================================
RESET
==================================================*/

*,
*::before,
*::after{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    overflow-x:hidden;

    min-height:100vh;

    font-family:"Montserrat",sans-serif;

    color:var(--text);

}

/*==================================================
DESIGN SYSTEM
==================================================*/

:root{

    /* BACKGROUND */

    --bg:#050709;

    --bg-soft:#081015;

    --bg-dark:#0d151b;

    /* GLASS */

    --glass:rgba(18,24,27,.72);

    --glass-light:rgba(255,255,255,.04);

    --glass-border:rgba(255,255,255,.10);

    /* PRIMARY */

    --primary:#84E6DC;

    --primary-light:#7FE8EF;

    --primary-dark:#6BD3D0;

    /* TEXT */

    --text:#FFFFFF;

    --text-soft:#D4DEE2;

    --text-muted:#96A4A8;

    /* SHADOW */

    --shadow-sm:
    0 10px 25px rgba(0,0,0,.25);

    --shadow-md:
    0 18px 45px rgba(0,0,0,.35);

    --shadow-lg:
    0 35px 80px rgba(0,0,0,.45);

    /* BORDER */

    --radius-sm:16px;

    --radius-md:22px;

    --radius-lg:30px;

    /* BLUR */

    --blur:28px;

    /* TRANSITION */

    --transition:.35s ease;

    /* CONTAINER */

    --container:1600px;

}

/*==================================================
BODY
==================================================*/

body{

    background:

    radial-gradient(

    circle at top left,

    rgba(132,230,220,.08),

    transparent 30%

    ),

    radial-gradient(

    circle at bottom right,

    rgba(127,232,239,.05),

    transparent 28%

    ),

    linear-gradient(

    180deg,

    var(--bg),

    var(--bg-soft) 40%,

    var(--bg)

    );

}

/*==================================================
ELEMENTOS
==================================================*/

img{

    display:block;

    width:100%;

}

a{

    color:inherit;

    text-decoration:none;

}

button{

    border:none;

    background:none;

    font-family:inherit;

    cursor:pointer;

}

ul{

    list-style:none;

}

.container{

    width:min(92%,var(--container));

    margin:auto;

}

/*==================================================
BACKGROUND GLOW
==================================================*/

.background-glow{

    position:fixed;

    left:-400px;

    top:-220px;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(132,230,220,.10),

    transparent 72%

    );

    filter:blur(45px);

    pointer-events:none;

    z-index:-10;

}

/*==================================================
SECTION
==================================================*/

section{

    position:relative;

    padding:140px 0;

}

/*==================================================
SECTION HEADER
==================================================*/

.section-header{

    max-width:760px;

    margin:auto;

    text-align:center;

    margin-bottom:80px;

}

.section-header span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(132,230,220,.08);

    border:1px solid rgba(132,230,220,.18);

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    margin-bottom:26px;

}

.section-header h2{

    font-size:clamp(2.2rem,4vw,4rem);

    line-height:1.05;

    font-weight:900;

    margin-bottom:22px;

}

.section-header p{

    font-size:1.08rem;

    line-height:1.9;

    color:var(--text-soft);

}

/*==================================================
HEADER
==================================================*/

.header{

    position:fixed;

    top:20px;

    left:0;

    width:100%;

    display:flex;

    justify-content:center;

    z-index:9999;

    pointer-events:none;

    transition:var(--transition);

}

/*==================================================
NAVBAR
==================================================*/

.navbar{

    pointer-events:auto;

    width:min(96%,1680px);

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 24px 0 34px;

    position:relative;

    overflow:hidden;

    border-radius:28px;

    background:

    linear-gradient(

    180deg,

    rgba(18,24,27,.78),

    rgba(8,12,15,.92)

    );

    backdrop-filter:blur(30px);

    -webkit-backdrop-filter:blur(30px);

 border:1px solid rgba(255,255,255,.12);

    box-shadow:
0 0 0 1px rgba(255,255,255,.03) inset,
0 20px 45px rgba(0,0,0,.45),
0 0 35px rgba(77,242,194,.08);

    transition:var(--transition);

}

/* Reflexo */

.navbar::before{

content:"";

position:absolute;

top:-120%;

left:-20%;

width:140%;

height:250%;

background:linear-gradient(
120deg,
transparent 35%,
rgba(255,255,255,.05) 50%,
transparent 65%
);

transform:rotate(-8deg);

pointer-events:none;

animation:glassMove 15s linear infinite;

}

/* Borda */

.navbar::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:

    inset 0 1px rgba(255,255,255,.08),

    inset 0 -1px rgba(132,230,220,.08);

    pointer-events:none;

}

/*==================================================
LOGO
==================================================*/

.logo{

    display:flex;

    align-items:center;

    gap:18px;

    min-width:250px;

    position:relative;

    z-index:5;

}

.logo-text{

    display:flex;

    flex-direction:column;

}

.logo-mrs{

    font-size:3rem;

    line-height:.82;

    font-weight:900;

    letter-spacing:.08em;

    color:#fff;

    text-shadow:

    0 0 18px rgba(255,255,255,.12),

    0 0 30px rgba(132,230,220,.08);

}

.logo-vidros{

    margin-top:6px;

    font-size:.90rem;

    font-weight:600;

    letter-spacing:.42em;

    color:#E3EAEC;

    text-transform:uppercase;

}

/*==================================================
MENU
==================================================*/

.menu{

    display:flex;

    align-items:center;

    gap:8px;

    margin:auto;

    z-index:5;

}

.menu a{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 18px;

    border-radius:16px;

    color:var(--text-soft);

    font-size:.95rem;

    font-weight:600;

    transition:var(--transition);

    position:relative;

}

.menu a img{

    width:18px;

    height:18px;

    opacity:.9;

}

.menu a:hover{

    background:rgba(255,255,255,.04);

    color:var(--primary);

    transform:translateY(-2px);

}

.menu a.active{

    color:var(--primary);

    background:

    linear-gradient(

    180deg,

    rgba(132,230,220,.12),

    rgba(132,230,220,.03)

    );

    border:1px solid rgba(132,230,220,.18);

    box-shadow:

    0 0 25px rgba(132,230,220,.10);

}

/*==================================================
HEADER BUTTONS
==================================================*/

.header-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    z-index:5;

}

/*==================================================
BOTÃO WHATSAPP
==================================================*/

.btn-whatsapp{

    display:flex;

    align-items:center;

    gap:10px;

    height:56px;

    padding:0 22px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(18px);

    color:var(--text);

    transition:var(--transition);

}

.btn-whatsapp img{

    width:20px;

    height:20px;

}

.btn-whatsapp:hover{

    transform:translateY(-3px);

    border-color:rgba(132,230,220,.25);

    box-shadow:

    0 18px 45px rgba(0,0,0,.25);

}

/*==================================================
BOTÃO ORÇAMENTO
==================================================*/

.btn-orcamento{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    height:58px;

    padding:0 30px;

    border-radius:18px;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.09),

    rgba(255,255,255,.04)

    );

    border:1px solid rgba(132,230,220,.22);

    backdrop-filter:blur(24px);

    color:#ffffff;

    font-weight:700;

    letter-spacing:.02em;

    transition:var(--transition);

    box-shadow:

    0 15px 35px rgba(0,0,0,.28),

    inset 0 1px rgba(255,255,255,.10);

}

.btn-orcamento::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:65%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.45),

    transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

.btn-orcamento:hover{

    transform:translateY(-3px);

    border-color:rgba(132,230,220,.35);

    box-shadow:

    0 22px 50px rgba(0,0,0,.35),

    0 0 30px rgba(132,230,220,.10);

}

.btn-orcamento:hover::before{

    left:180%;

}

/*==================================================
MENU MOBILE
==================================================*/

.menu-mobile{

    display:none;

    width:54px;

    height:54px;

    border-radius:18px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

    font-size:1.4rem;

    transition:var(--transition);

}

.menu-mobile:hover{

    border-color:rgba(132,230,220,.20);

}

/*==================================================
HEADER SCROLL
==================================================*/

.header.scrolled{

    top:10px;

}

.header.scrolled .navbar{

    height:80px;

    background:

    linear-gradient(

    180deg,

    rgba(12,18,20,.90),

    rgba(8,12,15,.95)

    );

    backdrop-filter:blur(36px);

    box-shadow:

    0 18px 45px rgba(0,0,0,.45);

}

.header.scrolled .logo-mrs{

    font-size:2.5rem;

}

.header.scrolled .logo-vidros{

    font-size:.82rem;

}

/*==================================================
HERO
==================================================*/

.hero{

    position:relative;

    display:flex;

    align-items:center;

    overflow:hidden;

    min-height:100vh;

    padding-top:180px;

    padding-bottom:120px;

    background:

    linear-gradient(

    135deg,

    rgba(5,8,10,.96),

    rgba(8,15,18,.86)

    );

}

.hero::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    radial-gradient(

    circle at 20% 25%,

    rgba(132,230,220,.12),

    transparent 32%

    ),

    radial-gradient(

    circle at 80% 70%,

    rgba(127,232,239,.08),

    transparent 28%

    );

    pointer-events:none;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(5,7,9,.92) 0%,

    rgba(5,7,9,.65) 45%,

    rgba(5,7,9,.15) 100%

    );

    z-index:1;

}

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:minmax(480px,680px) 1fr;

    gap:100px;

    align-items:center;

}

/*==================================================
HERO LEFT
==================================================*/

.hero-left{

    position:relative;

    z-index:5;

}

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    margin-bottom:34px;

    border-radius:999px;

    background:rgba(132,230,220,.08);

    border:1px solid rgba(132,230,220,.16);

    color:var(--primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:.18em;

    backdrop-filter:blur(20px);

}

.hero-tag::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--primary);

    box-shadow:

    0 0 14px rgba(132,230,220,.70);

}

/*==================================================
TÍTULO
==================================================*/

.hero-left h1{

    font-size:clamp(4rem,5vw,6.8rem);

    line-height:.92;

    font-weight:900;

    max-width:760px;

    margin-bottom:28px;

    letter-spacing:-.04em;

}

.hero-left h1 span{

    display:block;

    margin-top:14px;

    color:var(--primary);

}

/*==================================================
DESCRIÇÃO
==================================================*/

.hero-left p{

    max-width:580px;

    font-size:1.12rem;

    line-height:1.95;

    color:var(--text-soft);

    margin-bottom:46px;

}

/*==================================================
BOTÕES HERO
==================================================*/

.hero-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}

/*====================*/

.btn-primary{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:64px;

    padding:0 36px;

    border-radius:20px;

    background:

    linear-gradient(

    180deg,

    rgba(132,230,220,.18),

    rgba(132,230,220,.08)

    );

    border:1px solid rgba(132,230,220,.26);

    backdrop-filter:blur(22px);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    box-shadow:

    0 20px 45px rgba(0,0,0,.25),

    inset 0 1px rgba(255,255,255,.08);

}

.btn-primary:hover{

    transform:translateY(-4px);

    border-color:rgba(132,230,220,.40);

    box-shadow:

    0 24px 60px rgba(0,0,0,.35),

    0 0 30px rgba(132,230,220,.14);

}

/*====================*/

.btn-secondary{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:220px;

    height:64px;

    padding:0 36px;

    border-radius:20px;

    background:rgba(255,255,255,.03);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(22px);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}

.btn-secondary:hover{

    transform:translateY(-4px);

    border-color:rgba(132,230,220,.30);

}

/*==================================================
HERO RIGHT
==================================================*/

.hero-right{

    display:flex;

    justify-content:flex-end;

    position:relative;

}

/*==================================================
HERO IMAGE
==================================================*/

.hero-image{

    position:relative;

    width:100%;

    max-width:720px;

    aspect-ratio:1/1;

    overflow:hidden;

    border-radius:34px;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.04),

    rgba(255,255,255,.02)

    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(28px);

    box-shadow:

    0 45px 90px rgba(0,0,0,.45);

}

/*====================*/

.hero-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1.1s;

}

/*====================*/

.hero-image:hover img{

    transform:scale(1.05);

}

/*====================*/

.hero-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.05),

    transparent 40%,

    rgba(132,230,220,.10)

    );

    z-index:2;

    pointer-events:none;

}

/*====================*/

.hero-image::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:

    inset 0 1px rgba(255,255,255,.08),

    inset 0 -1px rgba(132,230,220,.10);

    pointer-events:none;

}

/*==================================================
HERO INFO
==================================================*/

.hero-info{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    margin-top:70px;

    overflow:hidden;

    border-radius:26px;

    background:rgba(18,24,27,.70);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(28px);

}

.hero-info div{

    padding:30px;

    text-align:center;

    border-right:1px solid rgba(255,255,255,.05);

}

.hero-info div:last-child{

    border-right:none;

}

.hero-info h3{

    font-size:2rem;

    color:var(--primary);

    margin-bottom:10px;

    font-weight:900;

}

.hero-info span{

    color:var(--text-muted);

    font-size:.92rem;

}

/*==================================================
RESPONSIVO HERO
==================================================*/

@media(max-width:1200px){

.hero-grid{

grid-template-columns:1fr;

gap:70px;

}

.hero-right{

justify-content:center;

}

}

@media(max-width:768px){

.hero{

padding-top:150px;

padding-bottom:90px;

}

.hero-left h1{

font-size:clamp(3rem,11vw,4.8rem);

}

.hero-buttons{

flex-direction:column;

}

.btn-primary,

.btn-secondary{

width:100%;

}

.hero-info{

grid-template-columns:1fr;

}

.hero-info div{

border-right:none;

border-bottom:1px solid rgba(255,255,255,.05);

}

.hero-info div:last-child{

border-bottom:none;

}

.hero-image{

max-width:100%;

}

}

/*==================================================
PRODUTOS
BUILD 006
==================================================*/

.products{

    position:relative;

    overflow:hidden;

}

/* Glow do fundo */

.products::before{

    content:"";

    position:absolute;

    left:-320px;

    top:120px;

    width:750px;

    height:750px;

    border-radius:50%;

    background:

    radial-gradient(

    circle,

    rgba(132,230,220,.08),

    transparent 72%

    );

    filter:blur(60px);

    pointer-events:none;

}

/*================================*/

.products-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:34px;

}

/*==================================
CARD
==================================*/

.product-card{

    position:relative;

    overflow:hidden;

    border-radius:30px;

    background:

    linear-gradient(

    180deg,

    rgba(20,25,28,.82),

    rgba(10,12,15,.96)

    );

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(30px);

    transition:all .45s ease;

    box-shadow:

    var(--shadow-md);

}

/*================================*/

.product-card:hover{

    transform:

    translateY(-10px);

    border-color:

    rgba(132,230,220,.25);

    box-shadow:

    var(--shadow-lg),

    0 0 45px rgba(132,230,220,.10);

}

/*==================================
REFLEXO
==================================*/

.product-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.05),

    transparent 35%,

    transparent 70%,

    rgba(132,230,220,.05)

    );

    pointer-events:none;

    z-index:3;

}

/*==================================
IMAGEM
==================================*/

.product-image{

    position:relative;

    height:320px;

    overflow:hidden;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

/*==================================
OVERLAY
==================================*/

.product-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    transparent,

    rgba(6,8,10,.30),

    rgba(6,8,10,.90)

    );

}

/*==================================
CONTEÚDO
==================================*/

.product-content{

    position:relative;

    z-index:5;

    padding:34px;

}

.product-content span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:9px 18px;

    margin-bottom:22px;

    border-radius:999px;

    background:

    rgba(132,230,220,.08);

    border:

    1px solid rgba(132,230,220,.18);

    color:var(--primary);

    font-size:.74rem;

    font-weight:700;

    letter-spacing:.18em;

}

/*==================================
TÍTULO
==================================*/

.product-content h3{

    font-size:2rem;

    line-height:1.1;

    font-weight:800;

    margin-bottom:16px;

}

/*==================================
TEXTO
==================================*/

.product-content p{

    color:var(--text-soft);

    line-height:1.8;

    margin-bottom:32px;

}

/*==================================
BOTÃO
==================================*/

.product-button{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:56px;

    padding:0 28px;

    border-radius:18px;

    overflow:hidden;

    background:

    linear-gradient(

    180deg,

    rgba(255,255,255,.08),

    rgba(255,255,255,.03)

    );

    border:1px solid rgba(132,230,220,.18);

    color:#fff;

    font-weight:700;

    backdrop-filter:blur(20px);

    transition:.35s;

}

/*================================*/

.product-button::before{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.40),

    transparent

    );

    transform:skewX(-25deg);

    transition:.8s;

}

/*================================*/

.product-button:hover{

    transform:translateY(-3px);

    border-color:

    rgba(132,230,220,.28);

    box-shadow:

    0 20px 45px rgba(0,0,0,.30);

}

.product-button:hover::before{

    left:180%;

}

/*==================================
RESPONSIVO
==================================*/

@media(max-width:1400px){

.products-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.products-grid{

grid-template-columns:1fr;

gap:24px;

}

.product-image{

height:260px;

}

.product-content{

padding:28px;

}

.product-content h3{

font-size:1.6rem;

}

}

/*==================================================
PROJETOS
==================================================*/

.projects{

    position:relative;

    overflow:hidden;

}

.projects-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:34px;

}

.project-card{

    position:relative;

    height:430px;

    overflow:hidden;

    border-radius:30px;

    background:#111;

    border:1px solid rgba(255,255,255,.08);

    transition:.45s;

    cursor:pointer;

    box-shadow:var(--shadow-md);

}

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-card:hover{

    transform:translateY(-10px);

    border-color:rgba(132,230,220,.25);

    box-shadow:

    var(--shadow-lg),

    0 0 45px rgba(132,230,220,.12);

}

.project-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    180deg,

    transparent,

    rgba(0,0,0,.25),

    rgba(0,0,0,.90)

    );

    z-index:2;

}

.project-info{

    position:absolute;

    left:30px;

    bottom:30px;

    z-index:5;

}

.project-info h3{

    font-size:2rem;

    margin-bottom:8px;

}

.project-info p{

    color:var(--text-soft);

}

/*==================================================
EMPRESA
==================================================*/

.company-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.company-image{

    overflow:hidden;

    border-radius:30px;

    border:1px solid rgba(255,255,255,.08);

    box-shadow:var(--shadow-lg);

}

.company-image img{

    transition:.8s;

}

.company-image:hover img{

    transform:scale(1.05);

}

.company-content span{

    display:inline-flex;

    padding:10px 22px;

    border-radius:999px;

    background:rgba(132,230,220,.08);

    border:1px solid rgba(132,230,220,.18);

    color:var(--primary);

    margin-bottom:28px;

}

.company-content h2{

    font-size:clamp(2.5rem,4vw,4.5rem);

    line-height:1.08;

    margin-bottom:30px;

}

.company-content p{

    line-height:2;

    color:var(--text-soft);

    margin-bottom:32px;

}

.company-list{

    display:grid;

    gap:16px;

    margin-bottom:40px;

}

.company-list li{

    color:var(--text-soft);

}

/*==================================================
CONTATO
==================================================*/

.contact-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.contact-card{

    padding:38px;

    border-radius:28px;

    background:var(--glass);

    backdrop-filter:blur(30px);

    border:1px solid rgba(255,255,255,.08);

    transition:.35s;

}

.contact-card:hover{

    transform:translateY(-8px);

    border-color:rgba(132,230,220,.22);

}

.contact-card h3{

    margin-bottom:14px;

}

.contact-card p{

    color:var(--text-muted);

    margin-bottom:18px;

}

.contact-card a,

.contact-card strong{

    color:var(--primary);

    font-size:1.15rem;

    font-weight:700;

}

/*==================================================
FORMULÁRIO
==================================================*/

.briefing-form{

    max-width:920px;

    margin:auto;

    padding:46px;

    border-radius:34px;

    background:var(--glass);

    border:1px solid rgba(255,255,255,.08);

    backdrop-filter:blur(30px);

}

.grid-2{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.input-group{

    display:flex;

    flex-direction:column;

    gap:10px;

    margin-bottom:22px;

}

.input-group label{

    font-weight:600;

}

.input-group input,

.input-group select,

.input-group textarea{

    width:100%;

    padding:18px;

    border-radius:18px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    color:#fff;

    outline:none;

    transition:.3s;

}

.input-group input:focus,

.input-group select:focus,

.input-group textarea:focus{

    border-color:rgba(132,230,220,.35);

    box-shadow:

    0 0 0 4px rgba(132,230,220,.08);

}

textarea{

    resize:vertical;

    min-height:180px;

}

/*==================================================
FOOTER
==================================================*/

.footer{

    padding:120px 0 40px;

    background:

    linear-gradient(

    180deg,

    transparent,

    rgba(5,7,9,.98)

    );

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:60px;

    padding-bottom:60px;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.footer-brand h2{

    font-size:3.5rem;

    line-height:.85;

}

.footer-brand h3{

    margin-top:6px;

    letter-spacing:.45em;

    font-weight:600;

}

.footer-description{

    margin-top:25px;

    line-height:1.9;

    color:var(--text-soft);

}

.footer-links ul{

    display:grid;

    gap:16px;

}

.footer-links a{

    color:var(--text-soft);

    transition:.3s;

}

.footer-links a:hover{

    color:var(--primary);

    padding-left:8px;

}

.footer-contact p{

    margin-top:18px;

    color:var(--text-muted);

}

.footer-contact a{

    color:var(--primary);

    font-weight:700;

}

.footer-bottom{

    padding-top:32px;

    display:flex;

    justify-content:space-between;

    gap:30px;

}

.footer-bottom p{

    color:var(--text-muted);

}

/*==================================================
ANIMAÇÕES
==================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:.8s;

}

.fade-up.show{

    opacity:1;

    transform:none;

}

.zoom{

    opacity:0;

    transform:scale(.95);

    transition:.8s;

}

.zoom.show{

    opacity:1;

    transform:scale(1);

}

/*==================================================
SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#080b0d;

}

::-webkit-scrollbar-thumb{

    background:linear-gradient(

    180deg,

    var(--primary),

    var(--primary-dark)

    );

    border-radius:50px;

}

/*==================================================
RESPONSIVO
==================================================*/

@media(max-width:1200px){

.company-grid,

.projects-grid,

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

section{

padding:90px 0;

}

.grid-2{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

}

.footer-bottom{

flex-direction:column;

text-align:center;

}

.briefing-form{

padding:28px;

}

}

/*==================================================
GLASS DESIGN SYSTEM
BUILD 007
==================================================*/

.glass{

    position:relative;

    overflow:hidden;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.02)
    );

    border:1px solid rgba(255,255,255,.10);

    backdrop-filter:blur(26px);

    -webkit-backdrop-filter:blur(26px);

    box-shadow:

    0 20px 60px rgba(0,0,0,.30),

    inset 0 1px rgba(255,255,255,.08);

}

.glass::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    135deg,

    rgba(255,255,255,.10),

    transparent 28%,

    transparent 65%,

    rgba(132,230,220,.06)

    );

    pointer-events:none;

}

.glass::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:inherit;

    box-shadow:

    inset 0 1px rgba(255,255,255,.08),

    inset 0 -1px rgba(132,230,220,.08);

    pointer-events:none;

}

.glow{

position:absolute;

width:700px;

height:700px;

border-radius:50%;

background:

radial-gradient(

circle,

rgba(132,230,220,.16),

transparent 72%

);

filter:blur(90px);

pointer-events:none;

animation:

glowMove

14s ease-in-out infinite;

}

@keyframes glowMove{

0%{

transform:

translate(-80px,-40px);

}

50%{

transform:

translate(120px,80px);

}

100%{

transform:

translate(-80px,-40px);

}

}

.light-line{

position:absolute;

top:0;

left:-120%;

width:40%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.22),

transparent

);

transform:skewX(-25deg);

animation:

lightPass

7s linear infinite;

pointer-events:none;

}

@keyframes lightPass{

0%{

left:-120%;

}

100%{

left:180%;

}

}

.menu img{
    width:20px;
    height:20px;
    opacity:.75;
    transition:.35s;
}

.menu a:hover img{
    opacity:1;
    transform:translateY(-2px) scale(1.08);
}

.menu a.active img{
    opacity:1;
    filter:
        drop-shadow(0 0 8px rgba(77,242,194,.45));
}

.logo{

animation:logoFloat 5s ease-in-out infinite;

}

@keyframes logoFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-3px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
BUILD 004
MICRO ANIMAÇÕES
==================================================*/

.btn-primary,
.btn-secondary,
.btn-orcamento{

animation:buttonGlow 4s ease-in-out infinite;

}

@keyframes buttonGlow{

0%{

box-shadow:0 0 18px rgba(77,242,194,.18);

}

50%{

box-shadow:0 0 35px rgba(77,242,194,.30);

}

100%{

box-shadow:0 0 18px rgba(77,242,194,.18);

}

}

.product-card{

animation:cardFloat 8s ease-in-out infinite;

}

@keyframes cardFloat{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-6px);

}

100%{

transform:translateY(0);

}

}

/*=========================================
HEADER PREMIUM
=========================================*/

.header{

transition:.45s;

}

.header.scrolled{

top:10px;

}

.header.scrolled .navbar{

height:78px;

background:

rgba(8,12,15,.72);

backdrop-filter:blur(34px);

-webkit-backdrop-filter:blur(34px);

box-shadow:

0 20px 50px rgba(0,0,0,.45),

0 0 35px rgba(77,242,194,.08);

}

@keyframes glassMove{

0%{

transform:
translateX(-20%)
rotate(-8deg);

}

100%{

transform:
translateX(20%)
rotate(-8deg);

}

}