@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

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

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

html {
scroll-behavior: smooth;
}

body {
background: #080808;
color: #eeeeee;
font-family: "Manrope", sans-serif;
min-height: 100vh;
overflow-x: hidden;
}

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

button,
a {
-webkit-tap-highlight-color: transparent;
}

/* =========================================================
VARIÁVEIS
========================================================= */

:root {
--black: #080808;
--black-soft: #0e0e0e;
--black-card: #111111;

--white: #eeeeee;
--white-muted: #a7a7a7;
--white-dark: #666666;

--scarlet: #e21b2d;
--scarlet-dark: #9f101e;
--scarlet-light: #ff3346;

--border: rgba(255, 255, 255, 0.10);
--border-red: rgba(226, 27, 45, 0.45);

}

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

.site-header {
width: 100%;
border-bottom: 1px solid var(--border);
background: rgba(8, 8, 8, 0.88);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

position: sticky;
top: 0;
z-index: 100;

}

.header-inner {
width: min(1380px, calc(100% - 80px));
height: 86px;
margin: 0 auto;

display: flex;
align-items: center;
justify-content: space-between;

}

/* LOGO */

.logo {
display: flex;
align-items: center;
gap: 14px;
}

.logo-mark {
width: 38px;
height: 38px;

display: grid;
place-items: center;

background: var(--scarlet);
color: #ffffff;

font-family: "DM Mono", monospace;
font-size: 12px;
font-weight: 500;

letter-spacing: -1px;


}

.logo-name {
font-size: 15px;
font-weight: 600;
letter-spacing: -0.3px;
}

/* NAVEGAÇÃO */

.main-nav {
display: flex;
align-items: center;
gap: 42px;
}

.main-nav a {
position: relative;


color: var(--white-muted);

font-family: "DM Mono", monospace;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;

padding: 8px 0;

transition:
    color 180ms ease,
    transform 180ms ease;


}

.main-nav a::after {
content: "";


position: absolute;
left: 0;
bottom: 0;

width: 0;
height: 1px;

background: var(--scarlet);

transition: width 220ms ease;


}

.main-nav a:hover {
color: #ffffff;
}

.main-nav a:hover::after,
.main-nav a.active::after {
width: 100%;
}

.main-nav a.active {
color: #ffffff;
}

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

.hero {
width: min(1380px, calc(100% - 80px));
min-height: calc(100vh - 86px);


margin: 0 auto;

display: grid;
grid-template-columns: 1.05fr 0.95fr;
align-items: center;

gap: 100px;

padding: 100px 0 130px;

position: relative;


}

/* detalhe vermelho lateral */

.hero::before {
content: "";


position: absolute;

left: -1px;
top: 0;

width: 1px;
height: 170px;

background: linear-gradient(
    to bottom,
    var(--scarlet),
    transparent
);


}

/* TEXTO */

.hero-content {
max-width: 680px;
}

.eyebrow {
display: flex;
align-items: center;
gap: 12px;


color: var(--scarlet);

font-family: "DM Mono", monospace;
font-size: 10px;
letter-spacing: 2px;
font-weight: 500;

margin-bottom: 34px;


}

.eyebrow::before {
content: "";


width: 28px;
height: 1px;

background: var(--scarlet);


}

.hero h1 {
font-size: clamp(70px, 9vw, 142px);
line-height: 0.84;


font-weight: 700;
letter-spacing: -7px;

margin-left: -7px;

color: #f3f3f3;


}

.hero h1 span {
color: var(--scarlet);
}

.hero-line {
width: 100%;
height: 1px;


margin: 52px 0 30px;

background: linear-gradient(
    90deg,
    var(--scarlet),
    rgba(226, 27, 45, 0.12),
    transparent
);


}

.hero-description {
max-width: 590px;


color: #a9a9a9;

font-size: 15px;
line-height: 1.9;
font-weight: 400;

margin-bottom: 18px;


}

.hero-link {
display: inline-flex;
align-items: center;
gap: 22px;


margin-top: 30px;

color: #ffffff;

font-family: "DM Mono", monospace;
font-size: 10px;
letter-spacing: 1.5px;

padding-bottom: 10px;

border-bottom: 1px solid var(--scarlet);

transition:
    gap 220ms ease,
    color 220ms ease;


}

.hero-link span {
color: var(--scarlet);
font-size: 17px;
}

.hero-link:hover {
gap: 30px;
color: var(--scarlet-light);
}

/* =========================================================
IMAGEM DO HERO
========================================================= */

.hero-image {
justify-self: end;
width: min(100%, 560px);
}

.image-frame {
width: 100%;
aspect-ratio: 1 / 1;


padding: 12px;

border: 1px solid var(--border);

position: relative;


}

/* moldura escarlate deslocada */

.image-frame::before {
content: "";


position: absolute;

top: -10px;
right: -10px;

width: 70px;
height: 70px;

border-top: 1px solid var(--scarlet);
border-right: 1px solid var(--scarlet);

pointer-events: none;


}

.image-frame::after {
content: "";


position: absolute;

bottom: -10px;
left: -10px;

width: 70px;
height: 70px;

border-bottom: 1px solid var(--scarlet);
border-left: 1px solid var(--scarlet);

pointer-events: none;


}

.image-placeholder {
width: 100%;
height: 100%;


background:
    linear-gradient(
        135deg,
        rgba(226, 27, 45, 0.10),
        transparent 45%
    ),
    linear-gradient(
        45deg,
        #151515,
        #080808
    );

display: flex;
align-items: flex-end;
justify-content: flex-start;

position: relative;
overflow: hidden;


}

/* textura */

.image-placeholder::before {
content: "";


position: absolute;
inset: 0;

background-image:
    linear-gradient(
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
    ),
    linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.025) 1px,
        transparent 1px
    );

background-size: 28px 28px;

mask-image: linear-gradient(
    to bottom right,
    black,
    transparent 75%
);


}

/* grande detalhe */

.image-placeholder::after {
content: "JM";


position: absolute;

right: -25px;
bottom: -65px;

font-size: 230px;
font-weight: 800;
line-height: 1;

color: rgba(226, 27, 45, 0.08);

letter-spacing: -20px;


}

.image-placeholder span {
position: relative;
z-index: 2;

margin: 0 0 24px 24px;

color: rgba(255, 255, 255, 0.38);

font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: 2px;

}

.image-caption {
display: flex;
justify-content: space-between;

padding-top: 12px;

color: #555555;

font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: 1px;

}

/* =========================================================
INTRO
========================================================= */

.intro {
width: min(1380px, calc(100% - 80px));

margin: 0 auto;

padding: 140px 0;

border-top: 1px solid var(--border);

display: grid;
grid-template-columns: 240px 1fr;

gap: 80px;

}

.section-label {
display: flex;
flex-direction: column;
gap: 9px;

color: #555555;

font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: 1.5px;

}

.section-label span:first-child {
color: var(--scarlet);
}

.intro-content {
max-width: 900px;
}

.intro-content h2 {
font-size: clamp(40px, 5vw, 72px);
line-height: 1.05;
letter-spacing: -3px;
font-weight: 600;

margin-bottom: 50px;

}

.intro-content h2 span {
color: var(--scarlet);
}

.intro-content p {
max-width: 650px;

color: #898989;

font-size: 16px;
line-height: 2;

}

/* =========================================================
CASOS
========================================================= */

.cases-preview {
width: min(1380px, calc(100% - 80px));

margin: 0 auto;

padding: 0 0 150px;

}

.section-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;

padding-bottom: 32px;

border-bottom: 1px solid var(--border);

margin-bottom: 35px;

}

.view-all {
color: #777777;

font-family: "DM Mono", monospace;
font-size: 9px;
letter-spacing: 1px;

transition: color 180ms ease;

}

.view-all:hover {
color: var(--scarlet);
}

/* GRID */

.cases-grid {
display: grid;

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

gap: 20px;

}

/* CARD */

.case-card {
display: block;

background: var(--black-card);

border: 1px solid var(--border);

overflow: hidden;

transition:
    border-color 250ms ease,
    transform 250ms ease;

}

.case-card:hover {
border-color: var(--border-red);
transform: translateY(-4px);
}

.case-image {
height: 330px;

background:
    linear-gradient(
        120deg,
        rgba(226, 27, 45, 0.12),
        transparent 50%
    ),
    #0d0d0d;

position: relative;

overflow: hidden;

}

.image-placeholder .case-image-hero {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        filter 300ms ease,
        transform 500ms ease;
}

.case-image-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    filter: grayscale(100%);
    
    transition:
        filter 300ms ease,
        transform 500ms ease;
}

.case-image::before {
content: "";

position: absolute;
inset: 0;

background:
    linear-gradient(
        135deg,
        transparent 48%,
        rgba(255,255,255,0.035) 49%,
        transparent 50%
    );

background-size: 18px 18px;

opacity: 0.35;

}

.case-number {
position: absolute;

top: 22px;
left: 22px;

color: var(--scarlet);

font-family: "DM Mono", monospace;
font-size: 10px;
letter-spacing: 2px;

}

.case-info {
min-height: 105px;

padding: 25px;

display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;

border-top: 1px solid var(--border);

position: relative;

}

.case-type {
color: #555555;

font-family: "DM Mono", monospace;
font-size: 8px;
letter-spacing: 1.5px;

}

.case-info h3 {
grid-column: 1;

margin-top: 8px;

color: #eeeeee;

font-size: 25px;
font-weight: 500;
letter-spacing: -0.8px;

}

.case-arrow {
grid-column: 2;
grid-row: 1 / 3;

align-self: center;

color: var(--scarlet);

font-size: 22px;

transition:
    transform 200ms ease;

}

.case-card:hover .case-arrow {
transform: translate(4px, -4px);
}

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

.site-footer {
width: min(1380px, calc(100% - 80px));

margin: 0 auto;

padding: 0 0 50px;

}

.footer-line {
width: 100%;
height: 1px;

background: #222222;

}

/* =========================================================
RESPONSIVIDADE
========================================================= */

@media (max-width: 1000px) {

.header-inner,
.hero,
.intro,
.cases-preview,
.site-footer {
    width: min(100% - 48px, 760px);
}


.hero {
    grid-template-columns: 1fr;

    gap: 70px;

    padding-top: 80px;
}


.hero-image {
    justify-self: start;
    width: min(100%, 560px);
}


.intro {
    grid-template-columns: 1fr;
    gap: 40px;
}

}

@media (max-width: 650px) {

.header-inner,
.hero,
.intro,
.cases-preview,
.site-footer {
    width: calc(100% - 32px);
}


.header-inner {
    height: 72px;
}


.logo-name {
    display: none;
}


.main-nav {
    gap: 22px;
}


.main-nav a {
    font-size: 9px;
}


.hero {
    min-height: auto;

    padding: 70px 0 100px;

    gap: 55px;
}


.hero h1 {
    font-size: clamp(64px, 19vw, 100px);
    letter-spacing: -5px;
}


.hero-line {
    margin: 38px 0 25px;
}


.hero-description {
    font-size: 14px;
    line-height: 1.8;
}


.intro {
    padding: 90px 0;
}


.intro-content h2 {
    font-size: 39px;
    letter-spacing: -2px;
}


.cases-preview {
    padding-bottom: 100px;
}


.section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 22px;
}


.cases-grid {
    grid-template-columns: 1fr;
}


.case-image {
    height: 260px;
}


.site-footer {
    padding-bottom: 30px;
}

}