/* =========================================================
   V8 DIGITAL — STYLE.CSS
   Estilo principal
   ========================================================= */

:root {
  --v8-bg: #08080d;
  --v8-bg-soft: #0d0d14;
  --v8-card: rgba(255, 255, 255, 0.045);
  --v8-card-hover: rgba(255, 255, 255, 0.07);

  --v8-border: rgba(255, 255, 255, 0.09);
  --v8-border-hover: rgba(255, 255, 255, 0.18);

  --v8-text: #ffffff;
  --v8-text-soft: rgba(255, 255, 255, 0.72);
  --v8-text-muted: rgba(255, 255, 255, 0.48);

  --v8-primary: #8b5cf6;
  --v8-secondary: #ec4899;

  --v8-gradient:
    linear-gradient(
      135deg,
      var(--v8-primary),
      var(--v8-secondary)
    );

  --v8-radius: 20px;
  --v8-radius-small: 12px;

  --v8-container: 1180px;

  --v8-shadow:
    0 25px 80px rgba(0, 0, 0, 0.35);

  --v8-transition:
    0.3s ease;
}


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

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


html {
  scroll-behavior: smooth;
}


body {
  min-height: 100vh;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(139, 92, 246, 0.08),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 40%,
      rgba(236, 72, 153, 0.055),
      transparent 30%
    ),
    var(--v8-bg);

  color: var(--v8-text);

  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;

  overflow-x: hidden;
}


body.modal-open {
  overflow: hidden;
}


img {
  max-width: 100%;
  display: block;
}


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


button,
input,
textarea,
select {
  font: inherit;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.container {
  width: min(
    calc(100% - 40px),
    var(--v8-container)
  );

  margin-inline: auto;
}


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

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 1000;

  background:
    rgba(8, 8, 13, 0.78);

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

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.nav-container {
  min-height: 76px;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


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

.logo {
  display: inline-flex;

  align-items: center;

  gap: 9px;

  font-weight: 800;
}


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

  display: grid;

  place-items: center;

  border-radius: 12px;

  background: var(--v8-gradient);

  color: #fff;

  font-size: 15px;

  letter-spacing: -0.04em;

  box-shadow:
    0 8px 30px
    rgba(139, 92, 246, 0.25);
}


.logo-text {
  font-size: 1.05rem;

  letter-spacing: -0.03em;
}


/* =========================================================
   NAV
   ========================================================= */

.main-nav {
  display: flex;

  align-items: center;

  gap: 28px;
}


.main-nav a {
  position: relative;

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

  font-size: 0.9rem;

  font-weight: 500;

  transition:
    color var(--v8-transition);
}


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


.main-nav a:not(.nav-cta)::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -7px;

  width: 0;
  height: 2px;

  border-radius: 20px;

  background: var(--v8-gradient);

  transition:
    width var(--v8-transition);
}


.main-nav a:not(.nav-cta):hover::after {
  width: 100%;
}


.nav-cta {
  padding: 11px 18px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.05);

  color: #fff !important;
}


.nav-cta:hover {
  background:
    rgba(255, 255, 255, 0.09);
}


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

.menu-toggle {
  display: none;

  width: 44px;
  height: 44px;

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

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.04);

  cursor: pointer;
}


.menu-toggle span {
  display: block;

  width: 20px;
  height: 2px;

  margin: 4px auto;

  border-radius: 10px;

  background: #fff;
}


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

.hero {
  min-height: 100vh;

  padding-top: 130px;
  padding-bottom: 80px;

  display: flex;

  align-items: center;

  position: relative;

  overflow: hidden;
}


.hero::before {
  content: "";

  position: absolute;

  width: 650px;
  height: 650px;

  top: -260px;
  right: -180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(139, 92, 246, 0.16),
      transparent 68%
    );

  pointer-events: none;
}


.hero-content {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  gap: 70px;

  align-items: center;
}


.hero-copy {
  max-width: 720px;
}


.eyebrow {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-bottom: 20px;

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

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.14em;
}


.eyebrow::before {
  content: "";

  width: 24px;
  height: 2px;

  border-radius: 10px;

  background: var(--v8-gradient);
}


.hero h1 {
  max-width: 760px;

  margin-bottom: 24px;

  font-size:
    clamp(
      3rem,
      7vw,
      6.5rem
    );

  line-height: 0.98;

  letter-spacing: -0.065em;
}


.hero h1 span {
  display: block;

  background:
    linear-gradient(
      90deg,
      #fff 0%,
      #a78bfa 45%,
      #f472b6 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.hero p {
  max-width: 670px;

  color: var(--v8-text-soft);

  font-size: 1.08rem;

  line-height: 1.8;

  margin-bottom: 32px;
}


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

.btn {
  min-height: 48px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  padding:
    13px 21px;

  border-radius: 12px;

  border:
    1px solid
    transparent;

  font-size: 0.9rem;

  font-weight: 700;

  cursor: pointer;

  transition:
    transform var(--v8-transition),
    box-shadow var(--v8-transition),
    background var(--v8-transition),
    border-color var(--v8-transition);
}


.btn:hover {
  transform: translateY(-2px);
}


.btn-primary {
  color: #fff;

  background: var(--v8-gradient);

  box-shadow:
    0 12px 30px
    rgba(139, 92, 246, 0.22);
}


.btn-primary:hover {
  box-shadow:
    0 18px 42px
    rgba(139, 92, 246, 0.32);
}


.btn-secondary {
  color: #fff;

  background:
    rgba(255, 255, 255, 0.045);

  border-color:
    rgba(255, 255, 255, 0.11);
}


.btn-secondary:hover {
  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(255, 255, 255, 0.18);
}


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

.hero-actions {
  display: flex;

  gap: 12px;

  flex-wrap: wrap;
}


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

.hero-proof {
  display: flex;

  gap: 34px;

  margin-top: 42px;

  padding-top: 24px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.hero-proof div {
  display: flex;

  flex-direction: column;

  gap: 2px;
}


.hero-proof strong {
  font-size: 0.9rem;
}


.hero-proof span {
  color: var(--v8-text-muted);

  font-size: 0.76rem;
}


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

.hero-visual {
  min-height: 500px;

  position: relative;

  display: grid;

  place-items: center;
}


.hero-orbit {
  position: absolute;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 50%;
}


.orbit-one {
  width: 390px;
  height: 390px;

  transform: rotate(25deg);
}


.orbit-two {
  width: 290px;
  height: 290px;

  border-color:
    rgba(139, 92, 246, 0.20);

  transform: rotate(-20deg);
}


.hero-card {
  width: 280px;
  height: 330px;

  padding: 32px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  position: relative;

  z-index: 2;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(139, 92, 246, 0.22),
      rgba(236, 72, 153, 0.07)
    ),
    rgba(20, 20, 30, 0.75);

  box-shadow:
    0 30px 90px
    rgba(0, 0, 0, 0.45);

  transform:
    rotate(-5deg);

  transition:
    transform 0.5s ease;
}


.hero-card:hover {
  transform:
    rotate(0deg)
    translateY(-8px);
}


.hero-card span {
  font-size: 4rem;

  font-weight: 900;

  letter-spacing: -0.08em;

  background: var(--v8-gradient);

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}


.hero-card strong {
  font-size: 1.6rem;

  margin-bottom: 6px;
}


.hero-card small {
  color: var(--v8-text-muted);

  font-size: 0.72rem;
}


/* =========================================================
   SEÇÕES
   ========================================================= */

.section {
  padding:
    110px 0;
}


.section-heading {
  max-width: 800px;

  margin-bottom: 52px;
}


.section-heading h2 {
  margin-bottom: 18px;

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

  line-height: 1.05;

  letter-spacing: -0.055em;
}


.section-heading h2 span {
  color: #a78bfa;
}


.section-heading p {
  max-width: 680px;

  color: var(--v8-text-soft);

  line-height: 1.8;
}


.section-heading-row {
  max-width: none;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 40px;
}


.section-heading-row > p {
  max-width: 390px;
}


/* =========================================================
   SERVIÇOS
   ========================================================= */

.services-section {
  background:
    rgba(255, 255, 255, 0.015);
}


.services-grid {
  display: grid;

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

  gap: 16px;
}


.service-card {
  min-height: 245px;

  padding: 28px;

  position: relative;

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

  border-radius:
    var(--v8-radius);

  background:
    var(--v8-card);

  overflow: hidden;

  transition:
    transform var(--v8-transition),
    background var(--v8-transition),
    border-color var(--v8-transition);
}


.service-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: 0;

  width: 70px;
  height: 2px;

  background: var(--v8-gradient);
}


.service-card:hover {
  transform: translateY(-6px);

  background:
    var(--v8-card-hover);

  border-color:
    var(--v8-border-hover);
}


.service-number {
  color: #a78bfa;

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.12em;
}


.service-card h3 {
  margin:
    42px 0 12px;

  font-size: 1.15rem;
}


.service-card p {
  color: var(--v8-text-muted);

  font-size: 0.88rem;

  line-height: 1.7;
}


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

.projects-section {
  position: relative;
}


.projects-grid {
  display: grid;

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

  gap: 20px;
}


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

.project-card {
  display: flex;

  flex-direction: column;

  min-width: 0;

  overflow: hidden;

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

  border-radius:
    var(--v8-radius);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.055),
      rgba(255, 255, 255, 0.025)
    );

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


.project-card:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(167, 139, 250, 0.35);

  box-shadow:
    0 28px 70px
    rgba(0, 0, 0, 0.30);
}


/* =========================================================
   PROJECT IMAGE
   ========================================================= */

.project-image {
  min-height: 235px;

  position: relative;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #15151f,
      #242035
    );

  background-size: cover;

  background-position: center;
}


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

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 25% 20%,
      rgba(139, 92, 246, 0.38),
      transparent 35%
    );
}


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

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.78),
      transparent 65%
    );
}


/*
  Classes específicas.
  Caso você coloque screenshots reais
  depois, elas podem ser substituídas.
*/

.project-assistencia {
  background:
    linear-gradient(
      135deg,
      #17131c,
      #30243d
    );
}


.project-moments {
  background:
    linear-gradient(
      135deg,
      #21151c,
      #412437
    );
}


.project-play {
  background:
    linear-gradient(
      135deg,
      #10141f,
      #242d46
    );
}


.project-image span {
  position: absolute;

  left: 20px;
  bottom: 18px;

  z-index: 2;

  padding:
    7px 11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 999px;

  background:
    rgba(0, 0, 0, 0.35);

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

  font-size: 0.68rem;

  font-weight: 700;
}


/* =========================================================
   PROJECT CONTENT
   ========================================================= */

.project-content {
  padding: 27px;

  display: flex;

  flex-direction: column;

  flex: 1;
}


.project-category {
  margin-bottom: 10px;

  color: #a78bfa;

  font-size: 0.65rem;

  font-weight: 800;

  letter-spacing: 0.11em;
}


.project-content h3 {
  margin-bottom: 12px;

  font-size: 1.4rem;

  letter-spacing: -0.035em;
}


.project-content p {
  margin-bottom: 20px;

  color: var(--v8-text-muted);

  font-size: 0.87rem;

  line-height: 1.75;
}


/* =========================================================
   PROJECT TAGS
   ========================================================= */

.project-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: auto;

  margin-bottom: 23px;
}


.project-tags span,
.project-modal-tech span,
.project-modal-highlights span {
  padding:
    5px 9px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 7px;

  background:
    rgba(255, 255, 255, 0.035);

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

  font-size: 0.66rem;
}


/* =========================================================
   PROJECT LINK
   ========================================================= */

.project-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  width: fit-content;

  color: #fff;

  font-size: 0.82rem;

  font-weight: 700;
}


.project-link span {
  color: #a78bfa;

  transition:
    transform var(--v8-transition);
}


.project-link:hover span {
  transform:
    translateX(5px);
}


/* =========================================================
   SOBRE
   ========================================================= */

.about-section {
  background:
    linear-gradient(
      180deg,
      transparent,
      rgba(139, 92, 246, 0.035),
      transparent
    );
}


.about-grid {
  display: grid;

  grid-template-columns:
    0.9fr 1.1fr;

  gap: 90px;

  align-items: start;
}


.about-grid h2 {
  font-size:
    clamp(
      2.3rem,
      5vw,
      4.2rem
    );

  line-height: 1.02;

  letter-spacing: -0.06em;
}


.about-grid h2 span {
  color: #a78bfa;
}


.about-copy {
  padding-top: 38px;
}


.about-copy p {
  margin-bottom: 22px;

  color: var(--v8-text-soft);

  line-height: 1.9;
}


/* =========================================================
   PROCESSO
   ========================================================= */

.process-grid {
  display: grid;

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

  gap: 16px;
}


.process-card {
  padding: 28px;

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

  border-radius:
    var(--v8-radius);

  background:
    rgba(255, 255, 255, 0.025);
}


.process-card > span {
  display: inline-block;

  margin-bottom: 48px;

  color: #a78bfa;

  font-size: 0.75rem;

  font-weight: 800;
}


.process-card h3 {
  margin-bottom: 10px;

  font-size: 1.05rem;
}


.process-card p {
  color: var(--v8-text-muted);

  font-size: 0.84rem;

  line-height: 1.7;
}


/* =========================================================
   TECNOLOGIAS
   ========================================================= */

.tech-section {
  padding-top: 60px;
}


.tech-list {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;
}


.tech-list span {
  padding:
    12px 17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.035);

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

  font-size: 0.8rem;

  transition:
    background var(--v8-transition),
    border-color var(--v8-transition);
}


.tech-list span:hover {
  background:
    rgba(139, 92, 246, 0.10);

  border-color:
    rgba(139, 92, 246, 0.30);
}


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

.contact-section {
  padding-bottom: 120px;
}


.contact-grid {
  display: grid;

  grid-template-columns:
    0.85fr 1.15fr;

  gap: 70px;

  align-items: start;
}


.contact-copy h2 {
  margin-bottom: 20px;

  font-size:
    clamp(
      2.4rem,
      5vw,
      4.4rem
    );

  line-height: 1;

  letter-spacing: -0.06em;
}


.contact-copy h2 span {
  color: #a78bfa;
}


.contact-copy > p {
  max-width: 520px;

  margin-bottom: 34px;

  color: var(--v8-text-soft);

  line-height: 1.8;
}


/* =========================================================
   CONTACT LINKS
   ========================================================= */

.contact-links {
  display: flex;

  flex-direction: column;

  gap: 12px;
}


.contact-links a {
  display: flex;

  flex-direction: column;

  gap: 2px;

  padding: 15px 17px;

  border:
    1px solid
    rgba(255, 255, 255, 0.07);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    background var(--v8-transition),
    border-color var(--v8-transition);
}


.contact-links a:hover {
  background:
    rgba(255, 255, 255, 0.055);

  border-color:
    rgba(255, 255, 255, 0.14);
}


.contact-links strong {
  font-size: 0.82rem;
}


.contact-links span {
  color: var(--v8-text-muted);

  font-size: 0.78rem;
}


/* =========================================================
   FORM
   ========================================================= */

.contact-form {
  padding: 30px;

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

  border-radius:
    var(--v8-radius);

  background:
    rgba(255, 255, 255, 0.035);

  box-shadow:
    0 30px 80px
    rgba(0, 0, 0, 0.20);
}


.contact-form label {
  display: block;

  margin-bottom: 7px;

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

  font-size: 0.78rem;

  font-weight: 600;
}


.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;

  margin-bottom: 19px;

  padding:
    14px 15px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 10px;

  outline: none;

  background:
    rgba(0, 0, 0, 0.22);

  color: #fff;

  transition:
    border-color var(--v8-transition),
    box-shadow var(--v8-transition);
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color:
    rgba(255, 255, 255, 0.34);
}


.contact-form select option {
  background: #11111a;

  color: #fff;
}


.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color:
    rgba(139, 92, 246, 0.65);

  box-shadow:
    0 0 0 3px
    rgba(139, 92, 246, 0.10);
}


.contact-form textarea {
  min-height: 130px;

  resize: vertical;
}


.contact-form button {
  width: 100%;

  margin-top: 4px;
}


.contact-form small {
  display: block;

  margin-top: 12px;

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

  font-size: 0.68rem;

  line-height: 1.5;

  text-align: center;
}


/* =========================================================
   CTA FINAL
   ========================================================= */

.final-cta {
  padding:
    100px 0;

  position: relative;

  overflow: hidden;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

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

  background:
    radial-gradient(
      circle at 50% 100%,
      rgba(139, 92, 246, 0.16),
      transparent 55%
    );
}


.final-cta-content {
  text-align: center;
}


.final-cta h2 {
  max-width: 850px;

  margin:
    0 auto 30px;

  font-size:
    clamp(
      2.5rem,
      6vw,
      5rem
    );

  line-height: 1;

  letter-spacing: -0.06em;
}


.final-cta h2 span {
  color: #a78bfa;
}


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

.site-footer {
  padding:
    60px 0 25px;

  background:
    #06060a;
}


.footer-grid {
  display: grid;

  grid-template-columns:
    1.3fr 0.8fr 1fr;

  gap: 40px;

  padding-bottom: 45px;
}


.footer-grid p {
  margin-top: 15px;

  color: var(--v8-text-muted);

  font-size: 0.8rem;
}


.footer-links,
.footer-contact {
  display: flex;

  flex-direction: column;

  gap: 10px;
}


.footer-links a,
.footer-contact a {
  width: fit-content;

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

  font-size: 0.78rem;

  transition:
    color var(--v8-transition);
}


.footer-links a:hover,
.footer-contact a:hover {
  color: #fff;
}


.footer-bottom {
  padding-top: 22px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.06);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

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

  font-size: 0.68rem;
}


/* =========================================================
   WHATSAPP FLUTUANTE
   ========================================================= */

.whatsapp-float {
  position: fixed;

  right: 22px;
  bottom: 22px;

  z-index: 900;

  padding:
    12px 17px;

  border-radius: 999px;

  background:
    #25d366;

  color: #06150b;

  font-size: 0.78rem;

  font-weight: 800;

  box-shadow:
    0 12px 35px
    rgba(0, 0, 0, 0.35);

  transition:
    transform var(--v8-transition),
    box-shadow var(--v8-transition);
}


.whatsapp-float:hover {
  transform:
    translateY(-4px);

  box-shadow:
    0 17px 45px
    rgba(0, 0, 0, 0.45);
}


/* =========================================================
   MODAL DOS PROJETOS
   ========================================================= */

.project-modal {
  position: fixed;

  inset: 0;

  z-index: 2000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px;
}


.project-modal.active {
  display: flex;
}


.project-modal-backdrop {
  position: absolute;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.78);

  backdrop-filter: blur(8px);
}


.project-modal-content {
  width: min(760px, 100%);

  max-height:
    calc(100vh - 40px);

  overflow-y: auto;

  position: relative;

  z-index: 2;

  padding: 40px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 24px;

  background:
    #101019;

  box-shadow:
    0 40px 120px
    rgba(0, 0, 0, 0.55);
}


.project-modal-close {
  position: absolute;

  top: 17px;
  right: 17px;

  width: 38px;
  height: 38px;

  border:
    1px solid
    rgba(255, 255, 255, 0.08);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.04);

  color: #fff;

  font-size: 1.5rem;

  line-height: 1;

  cursor: pointer;
}


.project-modal-body h2 {
  margin-bottom: 17px;

  font-size:
    clamp(
      2rem,
      5vw,
      3.5rem
    );

  line-height: 1;

  letter-spacing: -0.05em;
}


.project-modal-description {
  margin-bottom: 32px;

  color: var(--v8-text-soft);

  line-height: 1.8;
}


.project-modal-section {
  margin-top: 28px;
}


.project-modal-section h3 {
  margin-bottom: 13px;

  font-size: 0.9rem;
}


.project-modal-section ul {
  display: grid;

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

  gap: 8px 20px;

  padding-left: 18px;
}


.project-modal-section li {
  color: var(--v8-text-muted);

  font-size: 0.82rem;
}


.project-modal-highlights,
.project-modal-tech {
  display: flex;

  flex-wrap: wrap;

  gap: 8px;
}


.project-modal-actions {
  display: flex;

  flex-wrap: wrap;

  gap: 10px;

  margin-top: 36px;
}


/* =========================================================
   SELEÇÃO
   ========================================================= */

::selection {
  background:
    rgba(139, 92, 246, 0.35);

  color: #fff;
}


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

::-webkit-scrollbar {
  width: 8px;
}


::-webkit-scrollbar-track {
  background: #08080d;
}


::-webkit-scrollbar-thumb {
  background:
    rgba(255, 255, 255, 0.15);

  border-radius: 20px;
}


::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255, 255, 255, 0.25);
}