/* Reset & base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f1722;
  background: #f6f8fb;
  line-height: 1.6;
  font-weight: 300;
}

:root {
  --container: 1200px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 96px;
  --primary: #6cf3ff;
  --primary-2: #3be3ff;
  --muted: #98a1b3;
  --surface: rgba(255,255,255,0.04);
  --surface-2: rgba(255,255,255,0.08);
  --border: rgba(255,255,255,0.12);
}

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }

/* Tema claro como padrão - sem Three.js */

/* Page Loader */
.main {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #f6f8fb;
  z-index: 9999;
}

.loaders,
.loadersB {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: #e0e0e0;
}
.loader:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15em;
  height: 5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 5px 5px 15px #d3d2d2ab,
    inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to bottom,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loader::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.15em;
  height: 4.5em;
  background: #e0e0e0;
  border-radius: 50px;
  border: 1px solid #e2e2e2;
  box-shadow:
    inset 5px 5px 15px #d3d2d2ab,
    inset -5px -5px 15px #e9e9e9ab;
  mask-image: linear-gradient(
    to top,
    black calc(100% - 48px),
    transparent 100%
  );
}
.loaderA {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: transparent;
}
.ball0,
.ball1,
.ball2,
.ball3,
.ball4,
.ball5,
.ball6,
.ball7,
.ball8,
.ball9 {
  width: 1.15em;
  height: 1.15em;
  box-shadow:
    rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px,
    0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);
  background-color: rgb(232, 232, 232, 1);
  animation: 3.63s move ease-in-out infinite;
}
.loader:nth-child(2) {
  transform: rotate(20deg);
}
.loader:nth-child(3) {
  transform: rotate(40deg);
}
.loader:nth-child(4) {
  transform: rotate(60deg);
}
.loader:nth-child(5) {
  transform: rotate(80deg);
}
.loader:nth-child(6) {
  transform: rotate(100deg);
}
.loader:nth-child(7) {
  transform: rotate(120deg);
}
.loader:nth-child(8) {
  transform: rotate(140deg);
}
.loader:nth-child(9) {
  transform: rotate(160deg);
}

.loaderA:nth-child(2) {
  transform: rotate(20deg);
}
.loaderA:nth-child(3) {
  transform: rotate(40deg);
}
.loaderA:nth-child(4) {
  transform: rotate(60deg);
}
.loaderA:nth-child(5) {
  transform: rotate(80deg);
}
.loaderA:nth-child(6) {
  transform: rotate(100deg);
}
.loaderA:nth-child(7) {
  transform: rotate(120deg);
}
.loaderA:nth-child(8) {
  transform: rotate(140deg);
}
.loaderA:nth-child(9) {
  transform: rotate(160deg);
}

.ball1 {
  animation-delay: 0.2s;
}
.ball2 {
  animation-delay: 0.4s;
}
.ball3 {
  animation-delay: 0.6s;
}
.ball4 {
  animation-delay: 0.8s;
}
.ball5 {
  animation-delay: 1s;
}
.ball6 {
  animation-delay: 1.2s;
}
.ball7 {
  animation-delay: 1.4s;
}
.ball8 {
  animation-delay: 1.6s;
}
.ball9 {
  animation-delay: 1.8s;
}

@keyframes move {
  0% {
    transform: translateY(0em);
  }
  50% {
    transform: translateY(12em);
  }
  100% {
    transform: translateY(0em);
  }
}

/* Esconder loader quando página carregar */
.main.hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Esconder todo o conteúdo durante o carregamento */
body.loading {
  overflow: hidden;
}

body.loading > *:not(.main) {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

body:not(.loading) > *:not(.main) {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Animated Button Styles */
.button {
  --primary: #ff5569;
  --neutral-1: #f7f8f7;
  --neutral-2: #e7e7e7;
  --radius: 14px;

  cursor: pointer;
  border-radius: var(--radius);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: none;
  box-shadow: 0 0.5px 0.5px 1px rgba(255, 255, 255, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.2), 0 4px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all 0.3s ease;
  min-width: 200px;
  padding: 20px;
  height: 68px;
  font-family: "Inter", Poppins, Montserrat, sans-serif;
  font-style: normal;
  font-size: 18px;
  font-weight: 400;
}
.button:hover {
  transform: scale(1.02);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.3), 0 10px 3px -3px rgba(0, 0, 0, 0.04);
}
.button:active {
  transform: scale(1);
  box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.3),
    0 10px 3px -3px rgba(0, 0, 0, 0.2);
}
.button:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  border: 2.5px solid transparent;
  background: linear-gradient(var(--neutral-1), var(--neutral-2)) padding-box,
    linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.45))
      border-box;
  z-index: 0;
  transition: all 0.4s ease;
}
.button:hover::after {
  transform: scale(1.05, 1.1);
  box-shadow: inset 0 -1px 3px 0 rgba(255, 255, 255, 1);
}
.button::before {
  content: "";
  inset: 7px 6px 6px 6px;
  position: absolute;
  background: linear-gradient(to top, var(--neutral-1), var(--neutral-2));
  border-radius: 30px;
  filter: blur(0.5px);
  z-index: 2;
}
.state p {
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  transform: scale(1.25);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.state .icon svg {
  overflow: visible;
}

/* Outline */
.outline {
  position: absolute;
  border-radius: inherit;
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s ease;
  inset: -2px -3.5px;
}
.outline::before {
  content: "";
  position: absolute;
  inset: -100%;
  background: conic-gradient(
    from 180deg,
    transparent 60%,
    white 80%,
    transparent 100%
  );
  animation: spin 2s linear infinite;
  animation-play-state: paused;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.button:hover .outline {
  opacity: 1;
}
.button:hover .outline::before {
  animation-play-state: running;
}

/* Letters */
.state p span {
  display: block;
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.03s);
}
.button:hover p span {
  opacity: 1;
  animation: wave 0.5s ease forwards calc(var(--i) * 0.02s);
}
.button:focus p span {
  opacity: 1;
  animation: disapear 0.6s ease forwards calc(var(--i) * 0.03s);
}
@keyframes wave {
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
    color: var(--primary);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-20px) translateX(5px) rotate(-90deg);
    color: var(--primary);
    filter: blur(5px);
  }
  30% {
    opacity: 1;
    transform: translateY(4px) translateX(0) rotate(0);
    filter: blur(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-3px) translateX(0) rotate(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0);
  }
}
@keyframes disapear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateX(5px) translateY(20px);
    color: var(--primary);
    filter: blur(5px);
  }
}

/* Plane */
.state--default .icon svg {
  animation: land 0.6s ease forwards;
}
.button:hover .state--default .icon {
  transform: rotate(45deg) scale(1.25);
}
.button:focus .state--default svg {
  animation: takeOff 0.8s linear forwards;
}
.button:focus .state--default .icon {
  transform: rotate(0) scale(1.25);
}
@keyframes takeOff {
  0% {
    opacity: 1;
  }
  60% {
    opacity: 1;
    transform: translateX(70px) rotate(45deg) scale(2);
  }
  100% {
    opacity: 0;
    transform: translateX(160px) rotate(45deg) scale(0);
  }
}
@keyframes land {
  0% {
    transform: translateX(-60px) translateY(30px) rotate(-50deg) scale(2);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateX(0) translateY(0) rotate(0);
    opacity: 1;
    filter: blur(0);
  }
}

/* Contrail */
.state--default .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  width: 0;
  left: -5px;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.5));
}
.button:focus .state--default .icon:before {
  animation: contrail 0.8s linear forwards;
}
@keyframes contrail {
  0% {
    width: 0;
    opacity: 1;
  }
  8% {
    width: 15px;
  }
  60% {
    opacity: 0.7;
    width: 80px;
  }
  100% {
    opacity: 0;
    width: 160px;
  }
}

/* States */
.state {
  padding-left: 29px;
  z-index: 2;
  display: flex;
  position: relative;
}
.state--default span:nth-child(4) {
  margin-right: 5px;
}
.state--sent {
  display: none;
}
.state--sent svg {
  transform: scale(1.25);
  margin-right: 8px;
}
.button:focus .state--default {
  position: absolute;
}
.button:focus .state--sent {
  display: flex;
}
.button:focus .state--sent span {
  opacity: 0;
  animation: slideDown 0.8s ease forwards calc(var(--i) * 0.2s);
}
.button:focus .state--sent .icon svg {
  opacity: 0;
  animation: appear 1.2s ease forwards 0.8s;
}
@keyframes appear {
  0% {
    opacity: 0;
    transform: scale(4) rotate(-40deg);
    color: var(--primary);
    filter: blur(4px);
  }
  30% {
    opacity: 1;
    transform: scale(0.6);
    filter: blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Header */
.site-header {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  z-index: 1000;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.site-header, .hero, .section, .site-footer { position: relative; z-index: 1; }
.header-inner { 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  padding: 16px 24px; 
  min-height: 60px;
}
.logo { 
  color: #0f1722; 
  text-decoration: none; 
  font-weight: 500; 
  letter-spacing: 0.5px; 
  font-size: 20px;
}

.nav-toggle { display: none; background: transparent; color: #0f1722; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 10px; }
.menu { list-style: none; display: flex; gap: 32px; margin: 0; padding: 0; align-items: center; }
.menu a { 
  color: #0f1722; 
  text-decoration: none; 
  font-weight: 400; 
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.menu a:hover {
  background: rgba(255, 107, 53, 0.1);
  color: #FF6B35;
}
.menu .cta-button {
  --c: #fff;
  background: #000000;
  color: #ffffff;
  border: none;
  transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
  text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0   var(--c),
    calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
  outline-offset: .1em;
  transition: 0.3s;
  font-family: system-ui, sans-serif;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 8px;
}

.menu .cta-button:hover,
.menu .cta-button:focus-visible {
  --_p: 0%;
  --_i: 1;
}

.menu .cta-button:active {
  text-shadow: none;
  color: var(--c);
  box-shadow: inset 0 0 9e9q #0005;
  transition: 0s;
}
.menu a:hover, .menu a.active { color: #0f1722; text-shadow: none; }

/* Hero */
.hero { padding: 120px 0 var(--space-8); }
.hero-inner { text-align: left; }
.hero-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: center; min-height: 70vh; }
.hero-text { display: flex; flex-direction: column; gap: var(--space-5); }
.simp-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.simp-toggle__text { font-weight: 600; color: #cfd6e4; text-align: center; font-size: 14px; letter-spacing: .2px; }
.simp-toggle__label {
  height: 60px;
  width: 120px;
  background-color: #ffffff;
  border-radius: 30px;
  -webkit-box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1), inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096), inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 5px 4px rgba(255, 255, 255, 1), inset 0 0 20px 1px rgba(0, 0, 0, 0.488), 10px 20px 30px rgba(0, 0, 0, 0.096), inset 0 0 0 3px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  transition: transform 0.4s;
}
.simp-toggle__label:hover { transform: perspective(100px) rotateX(5deg) rotateY(-5deg); }
#simp-checkbox:checked ~ .simp-toggle__label:hover { transform: perspective(100px) rotateX(-5deg) rotateY(5deg); }
#simp-checkbox { display: none; }
#simp-checkbox:checked ~ .simp-toggle__label::before {
  left: 70px;
  background-color: #000000;
  background-image: linear-gradient(315deg, #000000 0%, #414141 70%);
  transition: 0.4s;
}
.simp-toggle__label::before {
  position: absolute;
  content: "";
  height: 40px;
  width: 40px;
  border-radius: 50%;
  background-color: #000000;
  background-image: linear-gradient(130deg, #757272 10%, #ffffff 11%, #726f6f 62%);
  left: 10px;
  box-shadow: 0 2px 1px rgba(0, 0, 0, 0.3), 10px 10px 10px rgba(0, 0, 0, 0.3);
  transition: 0.4s;
}

@media (max-width: 720px) {
  .simp-toggle { gap: var(--space-2); margin-bottom: var(--space-4); }
}

.simple-mode .simp-toggle__text { color: #334155; }
.hero-title { font-size: clamp(28px, 5vw, 56px); margin: 0 0 var(--space-4); letter-spacing: -0.02em; color: #0f1722; font-weight: 300; }
.hero-title span { 
  background: linear-gradient(to right bottom, #FF6B35, #FF8C42, #FFA500, #FF8C00, #FF7F00, #FF6B00, #FF5500, #FF4500, #FF3500, #FF2500, #FF1500, #FF0500);
  background-size: 200% 200%;
  background-position: 0% 0%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  transition: all 0.6s ease-out;
  cursor: pointer;
}

.hero-title:hover span {
  background-position: 100% 100%;
}
.hero-sub { color: #334155; margin: 0 auto var(--space-6); max-width: 740px; opacity: 1; font-weight: 300; }
.hero-cta { display: flex; align-items: center; gap: var(--space-4); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 12px; text-decoration: none; cursor: pointer; transition: transform .15s ease, background .2s; }
.btn-primary { background: #000000; color: #ffffff; font-weight: 400; }
.btn-primary:hover { transform: translateY(-1px); }
.btn-ghost { border: 1px solid #e2e8f0; color: #0f1722; background: #ffffff; }
.btn-ghost:hover { background: #f8fafc; }
.trust { display: flex; gap: var(--space-6); color: var(--muted); padding: 0; margin: var(--space-6) 0 0; list-style: none; font-size: 14px; }

/* Hero Visual */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }

.phone-card {
  width: 280px;
  height: 520px;
  background: black;
  border-radius: 45px;
  border: 2px solid rgb(40, 40, 40);
  padding: 10px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  animation: phoneFloat 6s ease-in-out infinite;
}

@keyframes phoneFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(1deg);
  }
  50% {
    transform: translateY(-10px) rotate(0deg);
  }
  75% {
    transform: translateY(-20px) rotate(-1deg);
  }
}

.phone-card .card-int {
  background: #ffffff;
  height: 100%;
  border-radius: 25px;
  transition: all 0.6s ease-out;
  overflow: hidden;
}


.phone-card .top {
  position: absolute;
  top: 0px;
  right: 50%;
  transform: translate(50%, 0%);
  width: 35%;
  height: 18px;
  background-color: black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.phone-card .speaker {
  position: absolute;
  top: 2px;
  right: 50%;
  transform: translate(50%, 0%);
  width: 40%;
  height: 2px;
  border-radius: 2px;
  background-color: rgb(20, 20, 20);
}

.phone-card .camera {
  position: absolute;
  top: 6px;
  right: 84%;
  transform: translate(50%, 0%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.048);
}

.phone-card .int {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
  background-color: rgba(0, 0, 255, 0.212);
}

.phone-card .btn1, .phone-card .btn2, .phone-card .btn3, .phone-card .btn4 {
  position: absolute;
  width: 2px;
}

.phone-card .btn1, .phone-card .btn2, .phone-card .btn3 {
  height: 45px;
  top: 30%;
  right: -4px;
  background-image: linear-gradient(to right, #111111, #222222, #333333, #464646, #595959);
}

.phone-card .btn2, .phone-card .btn3 {
  transform: scale(-1);
  left: -4px;
}

.phone-card .btn2, .phone-card .btn3 {
  transform: scale(-1);
  height: 30px;
}

.phone-card .btn2 {
  top: 26%
}

.phone-card .btn3 {
  top: 36%
}

.phone-card .hello {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: 0.5s ease-in-out;
}

.phone-logo {
  width: 180px;
  height: 180px;
  object-fit: contain;
  transition: transform 0.5s ease-in-out;
  background: #ffffff;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}


.phone-card .hidden {
  display: none;
}

.phone-card:hover .hello {
  transform: translateY(-20px);
}

.phone-card:hover .phone-logo {
  transform: translateY(-20px) scale(1.1);
}


/* Floating Elements */
.floating-elements { position: absolute; inset: 0; pointer-events: none; }

/* Profile Card */
.profile-card {
  --main-color: #000;
  --submain-color: #78858F;
  --bg-color: #fff;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  position: relative;
  width: 100%;
  height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  background: var(--bg-color);
}

.profile-card__img {
  height: 192px;
  width: 100%;
  background: linear-gradient(135deg,#0000 18.75%,#2d3748 0 31.25%,#0000 0),
      repeating-linear-gradient(45deg,#2d3748 -6.25% 6.25%,#1a1a1a 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
  border-radius: 20px 20px 0 0;
}

.profile-card__avatar {
  position: absolute;
  width: 114px;
  height: 114px;
  background: var(--bg-color);
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  top: calc(50% - 60px);
}

.profile-card__avatar svg {
  width: 100px;
  height: 100px;
}

.profile-card__avatar img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
}

.profile-card__title {
  margin-top: 90px;
  font-weight: 500;
  font-size: 18px;
  color: var(--main-color);
}

.profile-card__subtitle {
  margin-top: 10px;
  font-weight: 400;
  font-size: 15px;
  color: var(--submain-color);
}

.profile-card__wrapper {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.profile-card__btn {
  margin-top: 25px;
  width: 76px;
  height: 31px;
  border: 2px solid var(--main-color);
  border-radius: 4px;
  font-weight: 700;
  font-size: 11px;
  color: var(--main-color);
  background: var(--bg-color);
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
  text-align: center;
  line-height: 27px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-card__btn-solid {
  background: var(--main-color);
  color: #ffffff !important;
}

.profile-card__btn:hover {
  background: var(--main-color);
  color: var(--bg-color);
}

.profile-card__btn-solid:hover {
  background: var(--bg-color);
  color: #ffffff !important;
  border-color: var(--main-color);
}

.brick {
  height: 2px;
  width: 2px;
  box-shadow: 2px 2px 0px #ff9999, 4px 2px 0px #ff9999, 6px 2px 0px #ff9999,
    8px 2px 0px #ff9999, 10px 2px 0px #ff9999, 12px 2px 0px #ff9999,
    14px 2px 0px #ff9999, 16px 2px 0px #ff9999, 18px 2px 0px #ff9999,
    20px 2px 0px #ff9999, 22px 2px 0px #ff9999, 24px 2px 0px #ff9999,
    26px 2px 0px #ff9999, 28px 2px 0px #ff9999, 30px 2px 0px #ff9999,
    32px 2px 0px #ff9999, 2px 4px 0px #cc3300, 4px 4px 0px #cc3300,
    6px 4px 0px #cc3300, 8px 4px 0px #cc3300, 10px 4px 0px #cc3300,
    12px 4px 0px #cc3300, 14px 4px 0px #cc3300, 16px 4px 0px #000,
    18px 4px 0px #cc3300, 20px 4px 0px #cc3300, 22px 4px 0px #cc3300,
    24px 4px 0px #cc3300, 26px 4px 0px #cc3300, 28px 4px 0px #cc3300,
    30px 4px 0px #cc3300, 32px 4px 0px #000, 2px 6px 0px #cc3300,
    4px 6px 0px #cc3300, 6px 6px 0px #cc3300, 8px 6px 0px #cc3300,
    10px 6px 0px #cc3300, 12px 6px 0px #cc3300, 14px 6px 0px #cc3300,
    16px 6px 0px #000, 18px 6px 0px #cc3300, 20px 6px 0px #cc3300,
    22px 6px 0px #cc3300, 24px 6px 0px #cc3300, 26px 6px 0px #cc3300,
    28px 6px 0px #cc3300, 30px 6px 0px #cc3300, 32px 6px 0px #000,
    2px 8px 0px #000, 4px 8px 0px #000, 6px 8px 0px #000, 8px 8px 0px #000,
    10px 8px 0px #000, 12px 8px 0px #000, 14px 8px 0px #000, 16px 8px 0px #000,
    18px 8px 0px #000, 20px 8px 0px #000, 22px 8px 0px #000, 24px 8px 0px #000,
    26px 8px 0px #000, 28px 8px 0px #000, 30px 8px 0px #000, 32px 8px 0px #000,
    2px 10px 0px #cc3300, 4px 10px 0px #cc3300, 6px 10px 0px #cc3300,
    8px 10px 0px #000, 10px 10px 0px #cc3300, 12px 10px 0px #cc3300,
    14px 10px 0px #cc3300, 16px 10px 0px #cc3300, 18px 10px 0px #cc3300,
    20px 10px 0px #cc3300, 22px 10px 0px #cc3300, 24px 10px 0px #000,
    26px 10px 0px #cc3300, 28px 10px 0px #cc3300, 30px 10px 0px #cc3300,
    32px 10px 0px #cc3300, 2px 12px 0px #cc3300, 4px 12px 0px #cc3300,
    6px 12px 0px #cc3300, 8px 12px 0px #000, 10px 12px 0px #cc3300,
    12px 12px 0px #cc3300, 14px 12px 0px #cc3300, 16px 12px 0px #cc3300,
    18px 12px 0px #cc3300, 20px 12px 0px #cc3300, 22px 12px 0px #cc3300,
    24px 12px 0px #000, 26px 12px 0px #cc3300, 28px 12px 0px #cc3300,
    30px 12px 0px #cc3300, 32px 12px 0px #cc3300, 2px 14px 0px #cc3300,
    4px 14px 0px #cc3300, 6px 14px 0px #cc3300, 8px 14px 0px #000,
    10px 14px 0px #cc3300, 12px 14px 0px #cc3300, 14px 14px 0px #cc3300,
    16px 14px 0px #cc3300, 18px 14px 0px #cc3300, 20px 14px 0px #cc3300,
    22px 14px 0px #cc3300, 24px 14px 0px #000, 26px 14px 0px #cc3300,
    28px 14px 0px #cc3300, 30px 14px 0px #cc3300, 32px 14px 0px #cc3300,
    2px 16px 0px #000, 4px 16px 0px #000, 6px 16px 0px #000, 8px 16px 0px #000,
    10px 16px 0px #000, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #000, 18px 16px 0px #000, 20px 16px 0px #000,
    22px 16px 0px #000, 24px 16px 0px #000, 26px 16px 0px #000,
    28px 16px 0px #000, 30px 16px 0px #000, 32px 16px 0px #000,
    2px 18px 0px #cc3300, 4px 18px 0px #cc3300, 6px 18px 0px #cc3300,
    8px 18px 0px #cc3300, 10px 18px 0px #cc3300, 12px 18px 0px #cc3300,
    14px 18px 0px #cc3300, 16px 18px 0px #000, 18px 18px 0px #cc3300,
    20px 18px 0px #cc3300, 22px 18px 0px #cc3300, 24px 18px 0px #cc3300,
    26px 18px 0px #cc3300, 28px 18px 0px #cc3300, 30px 18px 0px #cc3300,
    32px 18px 0px #000, 2px 20px 0px #cc3300, 4px 20px 0px #cc3300,
    6px 20px 0px #cc3300, 8px 20px 0px #cc3300, 10px 20px 0px #cc3300,
    12px 20px 0px #cc3300, 14px 20px 0px #cc3300, 16px 20px 0px #000,
    18px 20px 0px #cc3300, 20px 20px 0px #cc3300, 22px 20px 0px #cc3300,
    24px 20px 0px #cc3300, 26px 20px 0px #cc3300, 28px 20px 0px #cc3300,
    30px 20px 0px #cc3300, 32px 20px 0px #000, 2px 22px 0px #cc3300,
    4px 22px 0px #cc3300, 6px 22px 0px #cc3300, 8px 22px 0px #cc3300,
    10px 22px 0px #cc3300, 12px 22px 0px #cc3300, 14px 22px 0px #cc3300,
    16px 22px 0px #000, 18px 22px 0px #cc3300, 20px 22px 0px #cc3300,
    22px 22px 0px #cc3300, 24px 22px 0px #cc3300, 26px 22px 0px #cc3300,
    28px 22px 0px #cc3300, 30px 22px 0px #cc3300, 32px 22px 0px #000,
    2px 24px 0px #000, 4px 24px 0px #000, 6px 24px 0px #000, 8px 24px 0px #000,
    10px 24px 0px #000, 12px 24px 0px #000, 14px 24px 0px #000,
    16px 24px 0px #000, 18px 24px 0px #000, 20px 24px 0px #000,
    22px 24px 0px #000, 24px 24px 0px #000, 26px 24px 0px #000,
    28px 24px 0px #000, 30px 24px 0px #000, 32px 24px 0px #000,
    2px 26px 0px #cc3300, 4px 26px 0px #cc3300, 6px 26px 0px #cc3300,
    8px 26px 0px #000, 10px 26px 0px #cc3300, 12px 26px 0px #cc3300,
    14px 26px 0px #cc3300, 16px 26px 0px #cc3300, 18px 26px 0px #cc3300,
    20px 26px 0px #cc3300, 22px 26px 0px #cc3300, 24px 26px 0px #000,
    26px 26px 0px #cc3300, 28px 26px 0px #cc3300, 30px 26px 0px #cc3300,
    32px 26px 0px #cc3300, 2px 28px 0px #cc3300, 4px 28px 0px #cc3300,
    6px 28px 0px #cc3300, 8px 28px 0px #000, 10px 28px 0px #cc3300,
    12px 28px 0px #cc3300, 14px 28px 0px #cc3300, 16px 28px 0px #cc3300,
    18px 28px 0px #cc3300, 20px 28px 0px #cc3300, 22px 28px 0px #cc3300,
    24px 28px 0px #000, 26px 28px 0px #cc3300, 28px 28px 0px #cc3300,
    30px 28px 0px #cc3300, 32px 28px 0px #cc3300, 2px 30px 0px #cc3300,
    4px 30px 0px #cc3300, 6px 30px 0px #cc3300, 8px 30px 0px #000,
    10px 30px 0px #cc3300, 12px 30px 0px #cc3300, 14px 30px 0px #cc3300,
    16px 30px 0px #cc3300, 18px 30px 0px #cc3300, 20px 30px 0px #cc3300,
    22px 30px 0px #cc3300, 24px 30px 0px #000, 26px 30px 0px #cc3300,
    28px 30px 0px #cc3300, 30px 30px 0px #cc3300, 32px 30px 0px #cc3300,
    2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000, 8px 32px 0px #000,
    10px 32px 0px #000, 12px 32px 0px #000, 14px 32px 0px #000,
    16px 32px 0px #000, 18px 32px 0px #000, 20px 32px 0px #000,
    22px 32px 0px #000, 24px 32px 0px #000, 26px 32px 0px #000,
    28px 32px 0px #000, 30px 32px 0px #000, 32px 32px 0px #000;
}

.brick.one {
  transform: translateX(-60px);
}

.mush {
  height: 2px;
  width: 2px;
  box-shadow: 14px 2px 0px #fc9838, 16px 2px 0px #fc9838, 18px 2px 0px #fc9838,
    20px 2px 0px #fc9838, 12px 4px 0px #fc9838, 14px 4px 0px #fc9838,
    16px 4px 0px #fc9838, 18px 4px 0px #fc9838, 20px 4px 0px #d82800,
    22px 4px 0px #d82800, 10px 6px 0px #fc9838, 12px 6px 0px #fc9838,
    14px 6px 0px #fc9838, 16px 6px 0px #fc9838, 18px 6px 0px #d82800,
    20px 6px 0px #d82800, 22px 6px 0px #d82800, 24px 6px 0px #d82800,
    8px 8px 0px #fc9838, 10px 8px 0px #fc9838, 12px 8px 0px #fc9838,
    14px 8px 0px #fc9838, 16px 8px 0px #fc9838, 18px 8px 0px #d82800,
    20px 8px 0px #d82800, 22px 8px 0px #d82800, 24px 8px 0px #d82800,
    26px 8px 0px #d82800, 6px 10px 0px #fc9838, 8px 10px 0px #fc9838,
    10px 10px 0px #fc9838, 12px 10px 0px #fc9838, 14px 10px 0px #fc9838,
    16px 10px 0px #fc9838, 18px 10px 0px #fc9838, 20px 10px 0px #d82800,
    22px 10px 0px #d82800, 24px 10px 0px #d82800, 26px 10px 0px #fc9838,
    28px 10px 0px #fc9838, 4px 12px 0px #fc9838, 6px 12px 0px #fc9838,
    8px 12px 0px #d82800, 10px 12px 0px #d82800, 12px 12px 0px #d82800,
    14px 12px 0px #fc9838, 16px 12px 0px #fc9838, 18px 12px 0px #fc9838,
    20px 12px 0px #fc9838, 22px 12px 0px #fc9838, 24px 12px 0px #fc9838,
    26px 12px 0px #fc9838, 28px 12px 0px #fc9838, 30px 12px 0px #fc9838,
    4px 14px 0px #fc9838, 6px 14px 0px #d82800, 8px 14px 0px #d82800,
    10px 14px 0px #d82800, 12px 14px 0px #d82800, 14px 14px 0px #d82800,
    16px 14px 0px #fc9838, 18px 14px 0px #fc9838, 20px 14px 0px #fc9838,
    22px 14px 0px #fc9838, 24px 14px 0px #fc9838, 26px 14px 0px #fc9838,
    28px 14px 0px #fc9838, 30px 14px 0px #fc9838, 2px 16px 0px #fc9838,
    4px 16px 0px #fc9838, 6px 16px 0px #d82800, 8px 16px 0px #d82800,
    10px 16px 0px #d82800, 12px 16px 0px #d82800, 14px 16px 0px #d82800,
    16px 16px 0px #fc9838, 18px 16px 0px #fc9838, 20px 16px 0px #fc9838,
    22px 16px 0px #fc9838, 24px 16px 0px #fc9838, 26px 16px 0px #d82800,
    28px 16px 0px #d82800, 30px 16px 0px #fc9838, 32px 16px 0px #fc9838,
    2px 18px 0px #fc9838, 4px 18px 0px #fc9838, 6px 18px 0px #d82800,
    8px 18px 0px #d82800, 10px 18px 0px #d82800, 12px 18px 0px #d82800,
    14px 18px 0px #d82800, 16px 18px 0px #fc9838, 18px 18px 0px #fc9838,
    20px 18px 0px #fc9838, 22px 18px 0px #fc9838, 24px 18px 0px #fc9838,
    26px 18px 0px #d82800, 28px 18px 0px #d82800, 30px 18px 0px #d82800,
    32px 18px 0px #fc9838, 2px 20px 0px #fc9838, 4px 20px 0px #fc9838,
    6px 20px 0px #fc9838, 8px 20px 0px #d82800, 10px 20px 0px #d82800,
    12px 20px 0px #d82800, 14px 20px 0px #fc9838, 16px 20px 0px #fc9838,
    18px 20px 0px #fc9838, 20px 20px 0px #fc9838, 22px 20px 0px #fc9838,
    24px 20px 0px #fc9838, 26px 20px 0px #fc9838, 28px 20px 0px #d82800,
    30px 20px 0px #d82800, 32px 20px 0px #fc9838, 2px 22px 0px #fc9838,
    4px 22px 0px #fc9838, 6px 22px 0px #fc9838, 8px 22px 0px #fc9838,
    10px 22px 0px #fc9838, 12px 22px 0px #fc9838, 14px 22px 0px #fc9838,
    16px 22px 0px #fc9838, 18px 22px 0px #fc9838, 20px 22px 0px #fc9838,
    22px 22px 0px #fc9838, 24px 22px 0px #fc9838, 26px 22px 0px #fc9838,
    28px 22px 0px #fc9838, 30px 22px 0px #fc9838, 32px 22px 0px #fc9838,
    4px 24px 0px #fc9838, 6px 24px 0px #d82800, 8px 24px 0px #d82800,
    10px 24px 0px #d82800, 12px 24px 0px #fff, 14px 24px 0px #fff,
    16px 24px 0px #fff, 18px 24px 0px #fff, 20px 24px 0px #fff,
    22px 24px 0px #fff, 24px 24px 0px #d82800, 26px 24px 0px #d82800,
    28px 24px 0px #d82800, 30px 24px 0px #fc9838, 10px 26px 0px #fff,
    12px 26px 0px #fff, 14px 26px 0px #fff, 16px 26px 0px #fff,
    18px 26px 0px #fff, 20px 26px 0px #fff, 22px 26px 0px #fff,
    24px 26px 0px #fff, 10px 28px 0px #fff, 12px 28px 0px #fff,
    14px 28px 0px #fff, 16px 28px 0px #fff, 18px 28px 0px #fff,
    20px 28px 0px #fff, 22px 28px 0px #fc9838, 24px 28px 0px #fff,
    10px 30px 0px #fff, 12px 30px 0px #fff, 14px 30px 0px #fff,
    16px 30px 0px #fff, 18px 30px 0px #fff, 20px 30px 0px #fff,
    22px 30px 0px #fc9838, 24px 30px 0px #fff, 12px 32px 0px #fff,
    14px 32px 0px #fff, 16px 32px 0px #fff, 18px 32px 0px #fff,
    20px 32px 0px #fc9838, 22px 32px 0px #fff;
  transform: translate(-0px, -0px);
  z-index: -1;
  opacity: 0;
}

.box {
  position: absolute;
  background-color: rgba(46, 37, 37, 0);
  z-index: 3;
  width: 34px;
  height: 34px;
}

.box:hover + .mush {
  animation: mush 0.5s linear forwards;
  opacity: 1;
}

@keyframes mush {
  0% {
    transform: scale(0.8) translate(-0px, -0px);
  }
  50% {
    transform: scale(1.1) translate(-0px, -80px);
  }
  100% {
    transform: scale(1.1) translate(-0px, -35px);
  }
}

.tooltip-mario-container {
  height: 2px;
  width: 2px;
  box-shadow: 4px 2px 0px #ce3100, 6px 2px 0px #ce3100, 8px 2px 0px #ce3100,
    10px 2px 0px #ce3100, 12px 2px 0px #ce3100, 14px 2px 0px #ce3100,
    16px 2px 0px #ce3100, 18px 2px 0px #ce3100, 20px 2px 0px #ce3100,
    22px 2px 0px #ce3100, 24px 2px 0px #ce3100, 26px 2px 0px #ce3100,
    28px 2px 0px #ce3100, 30px 2px 0px #ce3100, 2px 4px 0px #ce3100,
    4px 4px 0px #ff9c31, 6px 4px 0px #ff9c31, 8px 4px 0px #ff9c31,
    10px 4px 0px #ff9c31, 12px 4px 0px #ff9c31, 14px 4px 0px #ff9c31,
    16px 4px 0px #ff9c31, 18px 4px 0px #ff9c31, 20px 4px 0px #ff9c31,
    22px 4px 0px #ff9c31, 24px 4px 0px #ff9c31, 26px 4px 0px #ff9c31,
    28px 4px 0px #ff9c31, 30px 4px 0px #ff9c31, 32px 4px 0px #000,
    2px 6px 0px #ce3100, 4px 6px 0px #ff9c31, 6px 6px 0px #000,
    8px 6px 0px #ff9c31, 10px 6px 0px #ff9c31, 12px 6px 0px #ff9c31,
    14px 6px 0px #ff9c31, 16px 6px 0px #ff9c31, 18px 6px 0px #ff9c31,
    20px 6px 0px #ff9c31, 22px 6px 0px #ff9c31, 24px 6px 0px #ff9c31,
    26px 6px 0px #ff9c31, 28px 6px 0px #000, 30px 6px 0px #ff9c31,
    32px 6px 0px #000, 2px 8px 0px #ce3100, 4px 8px 0px #ff9c31,
    6px 8px 0px #ff9c31, 8px 8px 0px #ff9c31, 10px 8px 0px #ff9c31,
    12px 8px 0px #ce3100, 14px 8px 0px #ce3100, 16px 8px 0px #ce3100,
    18px 8px 0px #ce3100, 20px 8px 0px #ce3100, 22px 8px 0px #ff9c31,
    24px 8px 0px #ff9c31, 26px 8px 0px #ff9c31, 28px 8px 0px #ff9c31,
    30px 8px 0px #ff9c31, 32px 8px 0px #000, 2px 10px 0px #ce3100,
    4px 10px 0px #ff9c31, 6px 10px 0px #ff9c31, 8px 10px 0px #ff9c31,
    10px 10px 0px #ce3100, 12px 10px 0px #ce3100, 14px 10px 0px #000,
    16px 10px 0px #000, 18px 10px 0px #000, 20px 10px 0px #ce3100,
    22px 10px 0px #ce3100, 24px 10px 0px #ff9c31, 26px 10px 0px #ff9c31,
    28px 10px 0px #ff9c31, 30px 10px 0px #ff9c31, 32px 10px 0px #000,
    2px 12px 0px #ce3100, 4px 12px 0px #ff9c31, 6px 12px 0px #ff9c31,
    8px 12px 0px #ff9c31, 10px 12px 0px #ce3100, 12px 12px 0px #ce3100,
    14px 12px 0px #000, 16px 12px 0px #ff9c31, 18px 12px 0px #ff9c31,
    20px 12px 0px #ce3100, 22px 12px 0px #ce3100, 24px 12px 0px #000,
    26px 12px 0px #ff9c31, 28px 12px 0px #ff9c31, 30px 12px 0px #ff9c31,
    32px 12px 0px #000, 2px 14px 0px #ce3100, 4px 14px 0px #ff9c31,
    6px 14px 0px #ff9c31, 8px 14px 0px #ff9c31, 10px 14px 0px #ce3100,
    12px 14px 0px #ce3100, 14px 14px 0px #000, 16px 14px 0px #ff9c31,
    18px 14px 0px #ff9c31, 20px 14px 0px #ce3100, 22px 14px 0px #ce3100,
    24px 14px 0px #000, 26px 14px 0px #ff9c31, 28px 14px 0px #ff9c31,
    30px 14px 0px #ff9c31, 32px 14px 0px #000, 2px 16px 0px #ce3100,
    4px 16px 0px #ff9c31, 6px 16px 0px #ff9c31, 8px 16px 0px #ff9c31,
    10px 16px 0px #ff9c31, 12px 16px 0px #000, 14px 16px 0px #000,
    16px 16px 0px #ff9c31, 18px 16px 0px #ce3100, 20px 16px 0px #ce3100,
    22px 16px 0px #ce3100, 24px 16px 0px #000, 26px 16px 0px #ff9c31,
    28px 16px 0px #ff9c31, 30px 16px 0px #ff9c31, 32px 16px 0px #000,
    2px 18px 0px #ce3100, 4px 18px 0px #ff9c31, 6px 18px 0px #ff9c31,
    8px 18px 0px #ff9c31, 10px 18px 0px #ff9c31, 12px 18px 0px #ff9c31,
    14px 18px 0px #ff9c31, 16px 18px 0px #ce3100, 18px 18px 0px #ce3100,
    20px 18px 0px #000, 22px 18px 0px #000, 24px 18px 0px #000,
    26px 18px 0px #ff9c31, 28px 18px 0px #ff9c31, 30px 18px 0px #ff9c31,
    32px 18px 0px #000, 2px 20px 0px #ce3100, 4px 20px 0px #ff9c31,
    6px 20px 0px #ff9c31, 8px 20px 0px #ff9c31, 10px 20px 0px #ff9c31,
    12px 20px 0px #ff9c31, 14px 20px 0px #ff9c31, 16px 20px 0px #ce3100,
    18px 20px 0px #ce3100, 20px 20px 0px #000, 22px 20px 0px #ff9c31,
    24px 20px 0px #ff9c31, 26px 20px 0px #ff9c31, 28px 20px 0px #ff9c31,
    30px 20px 0px #ff9c31, 32px 20px 0px #000, 2px 22px 0px #ce3100,
    4px 22px 0px #ff9c31, 6px 22px 0px #ff9c31, 8px 22px 0px #ff9c31,
    10px 22px 0px #ff9c31, 12px 22px 0px #ff9c31, 14px 22px 0px #ff9c31,
    16px 22px 0px #ff9c31, 18px 22px 0px #000, 20px 22px 0px #000,
    22px 22px 0px #ff9c31, 24px 22px 0px #ff9c31, 26px 22px 0px #ff9c31,
    28px 22px 0px #ff9c31, 30px 22px 0px #ff9c31, 32px 22px 0px #000,
    2px 24px 0px #ce3100, 4px 24px 0px #ff9c31, 6px 24px 0px #ff9c31,
    8px 24px 0px #ff9c31, 10px 24px 0px #ff9c31, 12px 24px 0px #ff9c31,
    14px 24px 0px #ff9c31, 16px 24px 0px #ce3100, 18px 24px 0px #ce3100,
    20px 24px 0px #ff9c31, 22px 24px 0px #ff9c31, 24px 24px 0px #ff9c31,
    26px 24px 0px #ff9c31, 28px 24px 0px #ff9c31, 30px 24px 0px #ff9c31,
    32px 24px 0px #000, 2px 26px 0px #ce3100, 4px 26px 0px #ff9c31,
    6px 26px 0px #ff9c31, 8px 26px 0px #ff9c31, 10px 26px 0px #ff9c31,
    12px 26px 0px #ff9c31, 14px 26px 0px #ff9c31, 16px 26px 0px #ce3100,
    18px 26px 0px #ce3100, 20px 26px 0px #000, 22px 26px 0px #ff9c31,
    24px 26px 0px #ff9c31, 26px 26px 0px #ff9c31, 28px 26px 0px #ff9c31,
    30px 26px 0px #ff9c31, 32px 26px 0px #000, 2px 28px 0px #ce3100,
    4px 28px 0px #ff9c31, 6px 28px 0px #000, 8px 28px 0px #ff9c31,
    10px 28px 0px #ff9c31, 12px 28px 0px #ff9c31, 14px 28px 0px #ff9c31,
    16px 28px 0px #ff9c31, 18px 28px 0px #000, 20px 28px 0px #000,
    22px 28px 0px #ff9c31, 24px 28px 0px #ff9c31, 26px 28px 0px #ff9c31,
    28px 28px 0px #000, 30px 28px 0px #ff9c31, 32px 28px 0px #000,
    2px 30px 0px #ce3100, 4px 30px 0px #ff9c31, 6px 30px 0px #ff9c31,
    8px 30px 0px #ff9c31, 10px 30px 0px #ff9c31, 12px 30px 0px #ff9c31,
    14px 30px 0px #ff9c31, 16px 30px 0px #ff9c31, 18px 30px 0px #ff9c31,
    20px 30px 0px #ff9c31, 22px 30px 0px #ff9c31, 24px 30px 0px #ff9c31,
    26px 30px 0px #ff9c31, 28px 30px 0px #ff9c31, 30px 30px 0px #ff9c31,
    32px 30px 0px #000, 2px 32px 0px #000, 4px 32px 0px #000, 6px 32px 0px #000,
    8px 32px 0px #000, 10px 32px 0px #000, 12px 32px 0px #000,
    14px 32px 0px #000, 16px 32px 0px #000, 18px 32px 0px #000,
    20px 32px 0px #000, 22px 32px 0px #000, 24px 32px 0px #000,
    26px 32px 0px #000, 28px 32px 0px #000, 30px 32px 0px #000,
    32px 32px 0px #000;
  position: absolute;
  transform: translate(-30px);
  z-index: 3;
}

/* Share Button */
.share-button-container {
  position: absolute;
  bottom: -60px;
  left: -80px;
  z-index: 10;
  pointer-events: auto;
  animation: shareFloat 3.5s ease-in-out infinite;
}

.share-button {
  height: 4em;
  width: 15em;
  border: none;
  border-radius: 40px;
  background-color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.share-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.share-button span {
  z-index: 1;
  display: inline-block;
  background-color: black;
  height: 3em;
  width: 11.5em;
  border-radius: 25px;
  color: #fff;
  line-height: 55px;
  font-size: 18px;
  letter-spacing: 3px;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}

.share-button .container {
  z-index: -1;
  width: 0;
  position: relative;
  display: flex;
  justify-content: center;
  transform: translateY(-50px);
  transition: all 0.4s;
}

.share-button .container svg {
  padding: 0 10px;
  fill: #000000;
  transition: fill 0.3s ease;
}

.share-button:hover span {
  width: 0;
}

.share-button:hover .container {
  z-index: 2;
  width: 100%;
}

.share-button:hover .container svg {
  fill: #000000;
}

/* Dark mode styles for share button */
body.dark-mode .share-button {
  background-color: #fff !important;
}

body.dark-mode .share-button span {
  background-color: #000 !important;
  color: #fff !important;
  width: 11.5em !important;
  height: 3em !important;
  border-radius: 25px !important;
}

body.dark-mode .share-button .container svg {
  fill: #000000 !important;
}

body.dark-mode .share-button:hover .container svg {
  fill: #000000 !important;
}

body.dark-mode .share-button:hover span {
  width: 0 !important;
}

body.dark-mode .share-button:hover .container {
  z-index: 2 !important;
  width: 100% !important;
}
.float-shape {
  position: absolute;
  background: rgba(108,243,255,0.1);
  border: 1px solid rgba(108,243,255,0.2);
  animation: float 6s ease-in-out infinite;
}
.float-shape--1 {
  width: 60px; height: 60px;
  border-radius: 50%;
  top: 10%; right: 15%;
  animation-delay: 0s;
}
.float-shape--2 {
  width: 40px; height: 40px;
  transform: rotate(45deg);
  top: 60%; right: 5%;
  animation-delay: 1.5s;
}
.float-shape--3 {
  width: 30px; height: 30px;
  border-radius: 50%;
  top: 20%; left: 10%;
  animation-delay: 3s;
}
.float-shape--4 {
  width: 50px; height: 2px;
  top: 80%; left: 5%;
  animation-delay: 4.5s;
}
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes floatSubtle {
  0%, 100% { transform: translateX(-50%) translateY(0px); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes phoneFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(1deg); }
}

@keyframes shareFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-25px) rotate(-2deg); }
  75% { transform: translateY(-10px) rotate(1deg); }
}

/* Floating Button */
.floating-button {
  position: absolute;
  top: -30px;
  right: -120px;
  z-index: 10;
  animation: buttonFloat 3.5s ease-in-out infinite;
}

@keyframes buttonFloat {
  0%, 100% {
    transform: translateY(0px) translateX(0px) rotate(-1deg);
  }
  25% {
    transform: translateY(-20px) translateX(5px) rotate(1deg);
  }
  50% {
    transform: translateY(-10px) translateX(-3px) rotate(-0.5deg);
  }
  75% {
    transform: translateY(-25px) translateX(8px) rotate(1.5deg);
  }
}

/* Sections */
.section { padding: var(--space-8) 0; }
.section#servicos { padding: var(--space-6) 0 var(--space-8) 0; }
.section-header { text-align: center; margin-bottom: var(--space-7); }
.section-header h2 { margin: 0 0 var(--space-2); font-size: clamp(22px, 4vw, 36px); font-weight: 300; }
.section-header p { color: #475569; margin: 0; font-weight: 300; }

/* Services Grid - Cards 3D */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  justify-items: center;
  justify-content: center;
  max-width: 1400px;
  margin: 0 auto;
}

.parent {
  width: 300px;
  padding: 20px;
  perspective: 1000px;
}

.card {
  padding-top: 50px;
  border: 3px solid rgb(255, 255, 255);
  transform-style: preserve-3d;
  background: #ffffff;
  width: 100%;
  box-shadow: rgba(142, 142, 142, 0.3) 0px 30px 30px -10px;
  transition: all 0.5s ease-in-out;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(135deg,#0000 18.75%,#2d3748 0 31.25%,#0000 0),
      repeating-linear-gradient(45deg,#2d3748 -6.25% 6.25%,#1a1a1a 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
  z-index: 1;
}

.card:hover {
  transform: rotate3d(0.5, 1, 0, 30deg);
  box-shadow: rgba(45, 55, 72, 0.4) 0px 30px 30px -10px;
}

.card:hover::before {
  background-position: -100px 100px, -100px 100px;
}

.content-box {
  background: #ffffff;
  transition: all 0.5s ease-in-out;
  padding: 60px 25px 25px 25px;
  transform-style: preserve-3d;
  position: relative;
  z-index: 2;
}

.content-box .card-title {
  display: inline-block;
  color: #0f1722;
  font-size: 25px;
  font-weight: 400;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px, 0px, 50px);
}

.content-box .card-title:hover {
  transform: translate3d(0px, 0px, 60px);
}

.content-box .card-content {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 300;
  color: #64748b;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px, 0px, 30px);
}

.content-box .card-content:hover {
  transform: translate3d(0px, 0px, 60px);
}

.content-box .see-more {
  cursor: pointer;
  margin-top: 1rem;
  display: inline-block;
  font-weight: 400;
  font-size: 9px;
  text-transform: uppercase;
  color: #FF6B35;
  background: white;
  padding: 0.5rem 0.7rem;
  transition: all 0.5s ease-in-out;
  transform: translate3d(0px, 0px, 20px);
  border: none;
  text-decoration: none;
}

.content-box .see-more:hover {
  transform: translate3d(0px, 0px, 60px);
}

.date-box {
  position: absolute;
  top: 30px;
  right: 30px;
  height: 60px;
  width: 60px;
  background: white;
  border: 1px solid #FF6B35;
  padding: 10px;
  transform: translate3d(0px, 0px, 80px);
  box-shadow: rgba(100, 100, 111, 0.2) 0px 17px 10px -10px;
  z-index: 3;
}

.date-box span {
  display: block;
  text-align: center;
}

.date-box .month {
  color: #FF6B35;
  font-size: 9px;
  font-weight: 400;
}

.date-box .date {
  font-size: 20px;
  font-weight: 400;
  color: #FF6B35;
}

/* Portfolio */
.portfolio { grid-template-columns: repeat(12, 1fr); }
.work { grid-column: span 4; margin: 0; overflow: hidden; border-radius: 16px; border: 1px solid #e6e9f0; background: #ffffff; }
.work img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4/3; filter: saturate(1.1) contrast(1.05); }
.work figcaption { padding: var(--space-4); color: #475569; font-size: 14px; }

/* Testimonials */
.testimonials-section { padding: 80px 0; background: #f8fafc; }
.testimonials-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.testimonials-header { text-align: center; margin-bottom: 40px; }
.testimonials-header h2 { font-size: 36px; color: #0f1722; margin-bottom: 12px; font-weight: 300; }
.testimonials-header p { font-size: 18px; color: #64748b; font-weight: 300; }

.testimonials-filters { display: flex; align-items: center; gap: 16px; margin-bottom: 40px; justify-content: center; flex-wrap: wrap; }
.filter-label { font-size: 16px; color: #334155; font-weight: 500; }
.filter-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-pill { 
  padding: 8px 16px; 
  border: 1px solid #e2e8f0; 
  background: #ffffff; 
  color: #64748b; 
  border-radius: 20px; 
  font-size: 14px; 
  cursor: pointer; 
  transition: all 0.2s ease; 
  font-weight: 400;
}
.filter-pill:hover { border-color: #FF6B35; color: #FF6B35; }
.filter-pill.active { background: #FF6B35; color: #ffffff; border-color: #FF6B35; }

.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 24px; }
.testimonial-card { 
  background: #ffffff; 
  border-radius: 16px; 
  padding: 32px; 
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  border: 1px solid #f1f5f9;
}
.testimonial-card:hover { 
  transform: translateY(-4px); 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.testimonial-content { position: relative; }
.quote-icon { 
  font-size: 48px; 
  color: #FF6B35; 
  line-height: 1; 
  margin-bottom: 16px; 
  font-family: serif;
}
.testimonial-text { 
  font-size: 16px; 
  line-height: 1.6; 
  color: #334155; 
  margin-bottom: 24px; 
  font-weight: 300;
}
.testimonial-author { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
}
.author-info h4 { 
  font-size: 16px; 
  color: #0f1722; 
  margin: 0 0 4px; 
  font-weight: 500;
}
.author-info span { 
  font-size: 14px; 
  color: #64748b; 
  font-weight: 400;
}
.rating { display: flex; gap: 2px; }
.star { color: #fbbf24; font-size: 16px; }

/* CTA */

/* Footer */
.site-footer { border-top: 1px solid #e9edf3; padding: var(--space-6) 0; background: #ffffff; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.footer-links { list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: 0; }
.footer-links a { color: #0f1722; text-decoration: none; }
.footer-links a:hover { color: #0f1722; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Mobile Layout - Redesigned from scratch */
@media (max-width: 768px) {
  /* Reset mobile layout */
  body { overflow-x: hidden; }
  
  /* Page Loader Mobile */
  .main {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #f6f8fb;
    z-index: 9999;
  }
  
  /* Container mobile */
  .container { 
    padding: 0 16px; 
    max-width: 100%;
  }
  
  /* Header mobile - identical to desktop */
  .site-header {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 20px);
    max-width: 1200px;
    backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }
  
  .site-header.scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }
  
  .header-inner { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    min-height: 50px;
  }
  
  .logo { 
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
  }
  
  .menu { 
    display: flex;
    gap: 8px;
    margin: 0;
    padding: 0;
    align-items: center;
  }
  
  .menu a {
    color: #0f1722;
    text-decoration: none;
    font-weight: 400;
    font-size: 11px;
    padding: 4px 6px;
    border-radius: 4px;
    transition: all 0.3s ease;
  }
  
  .menu a:hover {
    background: rgba(255, 107, 53, 0.1);
    color: #FF6B35;
  }
  
  .menu .cta-button {
    --c: #fff;
    background: #000000;
    color: #ffffff;
    border: none;
    transform: perspective(500px) rotateY(calc(20deg*var(--_i,-1)));
    text-shadow: calc(var(--_i,-1)* 0.08em) -.01em 0   var(--c),
      calc(var(--_i,-1)*-0.08em)  .01em 2px #0004;
    outline-offset: .1em;
    transition: 0.3s;
    font-family: system-ui, sans-serif;
    font-weight: bold;
    font-size: 10px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
  }
  
  .menu .cta-button:hover,
  .menu .cta-button:focus-visible {
    --_p: 0%;
    --_i: 1;
  }
  
  .menu .cta-button:active {
    text-shadow: none;
    color: var(--c);
    box-shadow: inset 0 0 9e9q #0005;
    transition: 0s;
  }
  
  .menu .cta-button::after {
    content: "Começar";
    font-size: 12px;
    font-weight: 400;
  }
  
  .menu .cta-button {
    font-size: 0;
  }
  
  .nav-toggle { 
    display: none;
  }
  
  /* Hero mobile - full screen experience */
  .hero {
    padding: 120px 0 40px;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  
  .hero-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
  }
  
  .hero-text {
    order: 2;
  }
  
  .hero-visual {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  
  .hero-title {
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 16px;
    font-weight: 300;
  }
  
  .hero-sub {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
    color: #64748b;
  }
  
  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .btn {
    width: 100%;
    max-width: 280px;
    padding: 14px 24px;
    font-size: 16px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.3s ease;
  }
  
  .btn-primary {
    background: #000000;
    color: white;
    border: none;
  }
  
  .btn-ghost {
    background: white;
    color: #0f1722;
    border: 1px solid #e2e8f0;
  }
  
  .trust {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 14px;
    color: #64748b;
    flex-wrap: wrap;
  }
  
  /* Phone card mobile - centered and prominent */
  .phone-card {
    width: 200px;
    height: 380px;
    margin: 0 auto;
    position: relative;
  }
  
  .phone-card .hello {
    font-size: 1.5rem;
  }
  
  /* Floating button mobile - positioned perfectly */
  .floating-button {
    position: absolute;
    top: -20px;
    right: -20px;
    z-index: 10;
  }
  
  .button {
    min-width: 140px;
    height: 45px;
    padding: 10px;
    font-size: 12px;
  }
  
  /* Services mobile - clean grid */
  .section {
    padding: 60px 0;
  }
  
  .section-header {
    text-align: center;
    margin-bottom: 40px;
  }
  
  .section-header h2 {
    font-size: 24px;
    margin-bottom: 8px;
    font-weight: 300;
    text-align: center;
  }
  
  .section-header p {
    font-size: 16px;
    color: #64748b;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
  }
  
  .services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 16px;
  }
  
  .parent {
    width: 100%;
    padding: 0;
    transform: none;
    opacity: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 16px;
    overflow: hidden;
  }
  
  .parent:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  }
  
  .card {
    height: 180px;
    border-radius: 16px;
  }
  
  .content-box {
    padding: 40px 20px 20px 20px;
    border-radius: 16px;
  }
  
  .content-box .card-title {
    font-size: 20px;
    margin-bottom: 8px;
  }
  
  .content-box .card-content {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 12px;
  }
  
  .see-more {
    font-size: 10px;
    padding: 0.4rem 0.6rem;
  }
  
  .date-box {
    padding: 8px;
    border-radius: 8px;
  }
  
  .date-box .month {
    font-size: 10px;
  }
  
  .date-box .date {
    font-size: 14px;
  }
  
  .card {
    width: 100%;
    height: auto;
    min-height: 200px;
  }
  
  .content-box {
    padding: 30px 20px 20px;
  }
  
  .content-box .card-title {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .content-box .card-content {
    font-size: 14px;
    line-height: 1.4;
  }
  
  .date-box {
    top: 20px;
    right: 20px;
    height: 50px;
    width: 50px;
  }
  
  .date-box .date {
    font-size: 16px;
  }
  
  .date-box .month {
    font-size: 10px;
  }
  
  /* Testimonials mobile */
  .testimonials-section { padding: 60px 0; }
  .testimonials-container { padding: 0 16px; }
  .testimonials-header h2 { font-size: 28px; }
  .testimonials-header p { font-size: 16px; }
  
  .testimonials-filters { 
    flex-direction: column; 
    align-items: center; 
    gap: 12px; 
    margin-bottom: 32px; 
  }
  .filter-pills { justify-content: center; }
  .filter-pill { font-size: 13px; padding: 6px 12px; }
  
  .testimonials-grid { 
    grid-template-columns: 1fr; 
    gap: 20px; 
  }
  .testimonial-card { padding: 24px; }
  .quote-icon { font-size: 36px; }
  .testimonial-text { font-size: 15px; }
  .testimonial-author { flex-direction: column; align-items: flex-start; gap: 12px; }
  
  /* Share Button - Hidden on Mobile */
  .share-button-container {
    display: none;
  }
}

/* New Form Styles */
.form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-left: 2em;
  padding-right: 2em;
  padding-bottom: 0.4em;
  background-color: #ffffff;
  border-radius: 25px;
  transition: .4s ease-in-out;
}

.form:hover {
  transform: scale(1.05);
  border: 1px solid black;
}

#heading {
  text-align: center;
  margin: 2em;
  color: #0f1722;
  font-size: 1.2em;
}

.field {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: 25px;
  padding: 0.6em;
  border: none;
  outline: none;
  color: #0f1722;
  background-color: #f8fafc;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.05);
}

.input-icon {
  height: 1.3em;
  width: 1.3em;
  fill: #64748b;
}

.input-field {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  color: #0f1722;
}

.form-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 2.5em;
  margin-bottom: 1em;
  width: 100%;
}

.form-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-btn-whatsapp {
  background: #000000;
  color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.form-btn-whatsapp::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.5s ease;
}

.form-btn-whatsapp:hover::before {
  left: 100%;
}

.form-btn-whatsapp:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  background: #1a1a1a;
}

.form-btn-call {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.form-btn-call::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #000000;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}

.form-btn-call .form-btn-text {
  position: relative;
  z-index: 1;
  color: #000000;
  transition: color 0.4s ease;
}

.form-btn-call:hover::before {
  width: 100%;
}

.form-btn-call:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  border-color: #000000;
}

.form-btn-call:hover .form-btn-text {
  color: #ffffff;
}

.form-btn:active {
  transform: translateY(0);
}

.form-btn-icon {
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.form-btn:hover .form-btn-icon {
  transform: scale(1.1);
}

.form-btn-text {
  position: relative;
  z-index: 1;
}

/* Hamster Animation */
.footer-hamster {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  width: 100%;
  max-width: 120px;
  margin-left: auto;
  margin-right: auto;
}

.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 6em;
  height: 6em;
  font-size: 10px;
}

.hamster,
.hamster div {
  position: absolute;
}

.hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em,1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

/* Hamster Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }
  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }
  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

/* BB-8 Card */
.bb8-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px;
  max-width: 400px;
  width: 90%;
  animation: cardSlideIn 0.6s ease-out;
}

.bb8-card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.bb8-card__close {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 18px;
  color: #666;
  cursor: pointer;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.bb8-card__close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #333;
}

.bb8-card__text {
  text-align: center;
}

.bb8-card__text h3 {
  margin: 0 0 10px 0;
  font-size: 20px;
  font-weight: 600;
  color: #333;
}

.bb8-card__text p {
  margin: 0;
  font-size: 14px;
  color: #666;
  line-height: 1.4;
}

/* BB-8 Toggle */
.bb8-toggle {
  --toggle-size: 14px;
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4) no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
  cursor: pointer;
  font-size: var(--toggle-size);
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  box-sizing: border-box;
}

.bb8-toggle__checkbox {
  appearance: none;
  display: none;
}

.bb8-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--toggle-bg);
  background-size: 100% 11.25em;
  background-position-y: -5.625em;
  border-radius: var(--radius);
  position: relative;
  transition: var(--transition);
}

.bb8 {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  transition: var(--transition);
  z-index: 2;
}

.bb8__head-container {
  position: relative;
  transition: var(--transition);
  z-index: 2;
  transform-origin: 1.25em 3.75em;
}

.bb8__head {
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
    linear-gradient(-45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent 1.25em),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8__head::before {
  content: "";
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: radial-gradient(0.125em circle at 0.25em 0.375em, red, transparent),
    radial-gradient(0.063em circle at 0.375em 0.188em, var(--bb8-bg) 50%, transparent 100%),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  transform: translate(-50%);
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  transition: var(--transition);
}

.bb8__head::after {
  content: "";
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  transition: var(--transition);
}

.bb8__antenna {
  position: absolute;
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  transition: var(--transition);
}

.bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8__body {
  width: 4.375em;
  height: 4.375em;
  background: var(--bb8-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  z-index: 1;
  transform: rotate(45deg);
  background: linear-gradient(-90deg, var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
    linear-gradient(var(--bb8-bg) 4%, var(--accent) 4% 10%, transparent 10% 90%, var(--accent) 90% 96%, var(--bb8-bg) 96%),
    linear-gradient(to right, transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em),
    linear-gradient(transparent 2.156em, silver 2.156em 2.219em, transparent 2.188em);
  background-color: var(--bb8-bg);
}

.bb8__body::after {
  content: "";
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em, 3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8__body::before {
  content: "";
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  z-index: 0.1;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: radial-gradient(1em circle at center, rgb(236, 236, 236) 50%, transparent 51%),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(-90deg, transparent 42%, var(--accent) 42% 58%, transparent 58%),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8__shadow {
  content: "";
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  transition: var(--transition);
  transform: skew(-70deg);
  z-index: 1;
}

.bb8-toggle__scenery {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}

.bb8-toggle__scenery::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae) drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  transition: var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae) drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  transition: 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae) drop-shadow(-0.625em 0.313em #ffffffae);
  transition: 0.8s;
}

.gomrassen,
.hermes,
.chenini {
  position: absolute;
  border-radius: var(--radius);
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  transition: var(--transition);
}

.gomrassen::before,
.gomrassen::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  transition: 0.6s;
}

.chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  transition: 0.8s;
}

.tatto-1,
.tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  box-shadow: 0 0 0.438em #fdf4e1;
  transition: var(--transition);
}

.tatto-2 {
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  transition: 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em, -3.125em 1.875em, 1.25em 2.813em;
  transition: 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em, -3.125em 1.25em, 1.25em -1.563em;
  transition: 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0, -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  transition: var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  transition: 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  transition: 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  transition: 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  transition: 0.8s;
}

/* BB-8 Actions */
.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(1) {
  top: 0.625em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(2) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(3) {
  top: 1.25em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(4) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(5) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(6) {
  top: 0.313em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__star:nth-child(7) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
  right: -100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
  top: 0.938em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
  top: 2.5em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
  top: 2.75em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container {
  background-position-y: 0;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
  transform: skew(70deg);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  transform: rotate(225deg);
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
  left: 100%;
}

.bb8-toggle__checkbox:not(:checked):hover + .bb8-toggle__container .bb8__antenna:nth-child(1) {
  right: 1.5em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) {
  left: 0.938em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
  background-position: 1.375em 0;
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::before {
  left: 0;
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__antenna:nth-child(2) {
  left: calc(100% - 0.938em);
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
  background-position: -1.375em 0;
}

.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  transform: rotate(25deg);
}

.bb8-toggle__checkbox:checked:active + .bb8-toggle__container .bb8__head-container {
  transform: rotate(-25deg);
}

.bb8:hover .bb8__head::before,
.bb8:hover .bb8__antenna:nth-child(2) {
  left: 50% !important;
}

.bb8:hover .bb8__antenna:nth-child(1) {
  right: 0.938em !important;
}

.bb8:hover .bb8__head::after {
  background-position: 0 0 !important;
}

/* Dark Mode Styles */
body.dark-mode {
  background: #0a0a0a;
  color: #ffffff;
}

body.dark-mode .site-header {
  background: rgba(0, 0, 0, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 1000;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  max-width: 1200px;
}

body.dark-mode .logo {
  color: #ffffff;
}

body.dark-mode .menu a {
  color: #ffffff;
}

body.dark-mode .hero {
  background: #0a0a0a;
}

body.dark-mode .hero-title {
  color: #ffffff;
}

body.dark-mode .hero-sub {
  color: #a0a0a0;
}

body.dark-mode .section {
  background: #0a0a0a;
}

body.dark-mode .section-header h2 {
  color: #ffffff;
}

body.dark-mode .section-header p {
  color: #a0a0a0;
}

body.dark-mode .card {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .card::before {
  background: linear-gradient(135deg,#0000 18.75%,#2d3748 0 31.25%,#0000 0),
      repeating-linear-gradient(45deg,#2d3748 -6.25% 6.25%,#1a1a1a 0 18.75%);
}

body.dark-mode .content-box {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .content-box .card-title {
  color: #ffffff;
}

body.dark-mode .content-box .card-content {
  color: #cbd5e1;
}

body.dark-mode .content-box .see-more {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

body.dark-mode .content-box .see-more:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.dark-mode .date-box {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.2);
}

body.dark-mode .date-box .month {
  color: #cbd5e1;
}

body.dark-mode .date-box .date {
  color: #ffffff;
}

body.dark-mode .testimonials-section {
  background: #0a0a0a;
}

body.dark-mode .testimonials-header h2 {
  color: #ffffff !important;
}

body.dark-mode .testimonials-header p {
  color: #ffffff !important;
}

body.dark-mode .filter-label {
  color: #ffffff !important;
}

body.dark-mode .filter-pill {
  background: #1a1a1a !important;
  color: #ffffff !important;
  border: 1px solid #333 !important;
}

body.dark-mode .filter-pill:hover,
body.dark-mode .filter-pill.active {
  background: #333 !important;
  color: #ffffff !important;
}

body.dark-mode .testimonial-card {
  background: #1a1a1a;
  border: 1px solid #333;
}

body.dark-mode .testimonial-text {
  color: #ffffff !important;
}

body.dark-mode .testimonial-author {
  color: #ffffff !important;
}

body.dark-mode .testimonial-author h4 {
  color: #ffffff !important;
}

body.dark-mode .testimonial-author p {
  color: #aaaaaa !important;
}

body.dark-mode .quote-icon {
  color: #666 !important;
}

body.dark-mode .site-footer {
  background: #0a0a0a;
  border-top: 1px solid #333;
}

body.dark-mode .footer-inner h3 {
  color: #ffffff;
}

body.dark-mode .footer-inner p {
  color: #a0a0a0;
}

body.dark-mode .footer-inner a {
  color: #a0a0a0;
}

/* Dark Mode Form Styles */
body.dark-mode .form {
  background-color: #171717;
}

body.dark-mode #heading {
  color: rgb(255, 255, 255);
}

body.dark-mode .field {
  color: white;
  background-color: #171717;
  box-shadow: inset 2px 5px 10px rgb(5, 5, 5);
}

body.dark-mode .input-icon {
  fill: white;
}

body.dark-mode .input-field {
  color: #d3d3d3;
}

body.dark-mode .form-btn-whatsapp {
  background: #ffffff;
  color: #000000;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

body.dark-mode .form-btn-whatsapp:hover {
  background: #f0f0f0;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
}

body.dark-mode .form-btn-call {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #ffffff;
  box-shadow: 0 4px 15px rgba(255, 255, 255, 0.1);
}

body.dark-mode .form-btn-call .form-btn-text {
  color: #ffffff;
}

body.dark-mode .form-btn-call::before {
  background: #ffffff;
}

body.dark-mode .form-btn-call:hover::before {
  width: 100%;
}

body.dark-mode .form-btn-call:hover .form-btn-text {
  color: #000000;
}

/* BB-8 Card Animations */
@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes cardSlideOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
}

/* Dark mode styles for card */
body.dark-mode .bb8-card {
  background: rgba(26, 26, 26, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .bb8-card__text h3 {
  color: #ffffff;
}

body.dark-mode .bb8-card__text p {
  color: #a0a0a0;
}

body.dark-mode .bb8-card__close {
  color: #a0a0a0;
}

body.dark-mode .bb8-card__close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

/* Profile Card Dark Mode */
body.dark-mode .profile-card {
  background: #1a1a1a;
  border: 1px solid #333;
}

body.dark-mode .profile-card__img {
  background: linear-gradient(135deg,#0000 18.75%,#1a1a1a 0 31.25%,#0000 0), repeating-linear-gradient(45deg,#1a1a1a -6.25% 6.25%,#0a0a0a 0 18.75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 0;
}

body.dark-mode .profile-card__title {
  color: #ffffff;
}

body.dark-mode .profile-card__subtitle {
  color: #a0a0a0;
}

body.dark-mode .profile-card__btn {
  border-color: #ffffff;
  color: #ffffff;
  background: transparent;
}

body.dark-mode .profile-card__btn:hover {
  background: #ffffff;
  color: #000000;
}

body.dark-mode .profile-card__btn-solid {
  background: #ffffff;
  color: #ffffff;
}

body.dark-mode .profile-card__btn-solid:hover {
  background: transparent;
  color: #ffffff;
}
  
  
  /* Footer mobile - clean layout */
  .footer-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    text-align: center;
    padding: 40px 0;
  }
  
  /* Hamster mobile */
  .footer-hamster {
    margin-top: 16px;
    max-width: 80px;
  }
  
  .wheel-and-hamster {
    width: 4em;
    height: 4em;
    font-size: 8px;
  }
  
  /* BB-8 Card Mobile */
  .bb8-card {
    padding: 20px;
    max-width: 320px;
    width: 85%;
  }
  
  .bb8-card__text h3 {
    font-size: 18px;
  }
  
  .bb8-card__text p {
    font-size: 13px;
  }
  
  .bb8-toggle {
    --toggle-size: 12px;
  }
  
  .footer-inner > div {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .footer-inner h3 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #0f1722;
  }
  
  .footer-inner nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .footer-inner a {
    color: #64748b;
    text-decoration: none;
    font-size: 14px;
  }
  
  .footer-inner p {
    color: #64748b;
    font-size: 14px;
    margin: 0;
  }

  /* Form Buttons Mobile */
  .form-buttons {
    gap: 12px;
    margin-top: 2em;
  }

  .form-btn {
    padding: 14px 20px;
    font-size: 14px;
  }

  .form-btn-icon {
    width: 18px;
    height: 18px;
  }