/* Design System & Variables */
:root {
  /* Colors - Deep Teal Theme */
  --bg-color: #0b1a1c;
  /* Darker Deep Teal */
  --bg-secondary: #154b4d;
  /* Extracted Logo Color */
  --text-primary: #b69df8;
  /* Lilac (Dragonfly Color) */
  --text-secondary: #b69df8;
  /* Lilac (Dragonfly Color) */

  --primary: #2dd4bf;
  /* Bright Teal/Cyan for accents on Petrol */
  --primary-glow: rgba(45, 212, 191, 0.4);
  --secondary: #b69df8;
  /* Lilac (maintained) */
  --secondary-glow: rgba(182, 157, 248, 0.4);

  /* iPhone Glass Style */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-blur: 25px;
  /* High blur for iOS feel */
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);

  /* Typography */
  --font-main: 'Montserrat', sans-serif;
  --font-display: 'Cormorant Garamond', serif;

  /* Spacing */
  --container-width: 1200px;
  --nav-height: 80px;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-main);
  background: linear-gradient(135deg, #0b1a1c 0%, #154b4d 100%);
  /* Petrol Blue Gradient */
  background-attachment: fixed;
  /* Parallax feel */
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
}

/* Typography */
h1,
h2,
h3,
.logo {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 5rem;
  /* Increased from 3.5rem */
  line-height: 1.1;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 3.5rem;
  /* Increased from 2.5rem */
  margin-bottom: 2rem;
  letter-spacing: -0.01em;
}

h3 {
  font-family: var(--font-main);
  /* Changed to Montserrat for subtitles */
  font-weight: 600;
  font-size: 2rem;
  /* Increased from 1.5rem */
  margin-bottom: 1rem;
}

p {
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}

/* Utility Classes */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 0 20px -5px var(--primary-glow);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px -5px var(--primary-glow);
}

.btn-secondary {
  background: transparent;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(5px);
  color: white;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: white;
}

.full-width {
  width: 100%;
  text-align: center;
}

/* Glassmorphism */
.glass-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);
  background: transparent;
  /* Seamless with page */
  /* Remove blur if user wants it to look exactly like the page, but glass usually implies blur. 
     User said "transparent but with background of the same color as the page". 
     Transparent fits this best. */
  backdrop-filter: none;
  /* Removed blur to be perfectly clear/same as page */
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  /* Very subtle border or remove? Keeping subtle. */
  z-index: 1000;
  transition: all 0.3s ease;
}

.glass-nav.scrolled {
  background: rgba(182, 157, 248, 0.15);
  /* Transparent Lilac */
  backdrop-filter: blur(10px);
  /* Add blur for glass effect */
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(182, 157, 248, 0.2);
  /* Subtle lilac border */
  height: 70px;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  /* Safari support */
  border-radius: 24px;
  /* iOS rounded corners */
  padding: 1.5rem 2rem 1rem 2rem;
  /* Reduced top to 1.5rem (was ~2.5), reduced bottom to 1rem (was ~3). */
  /* User asked for less padding: -1cm top (~2.5rem -> 1.5rem) and -2cm bottom (~3rem -> 1rem). */
  /* Note: 1cm is ~38px. If original was default large padding (e.g. 3rem/48px), then cutting 1cm is removing ~1rem. Cutting 2cm is removing ~2rem. */
  /* Assuming default was generous, let's make it tighter as requested. */
  box-shadow: var(--glass-shadow);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.glass-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.05);
}

.glass-panel {
  background: rgba(10, 10, 10, 0.6);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px);
  border-radius: 24px;
}

/* Ambient Background */
.ambient-light {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.15;
  z-index: -1;
  pointer-events: none;
}

.top-left {
  top: -200px;
  left: -200px;
  background: var(--primary);
}

.bottom-right {
  bottom: -200px;
  right: -200px;
  background: var(--secondary);
}



/* Navigation */
.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: 100%;
  /* Allow full width to reach corners */
  padding: 0 3rem;
  /* Push to edges but keep some safe padding. User said "mais pra esquerda no canto mesmo" */
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand-name {
  position: relative;
  top: 3px;
  /* Nudge down slightly to visual center if font baseline is high. User requested "desce um pouco". */
  /* "2cm" is too large, but 3-5px often fixes "visual centering" with display fonts. */
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo-box {
  width: 50px;
  height: 50px;
  background: transparent;
  /* Transparent as requested */
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.1);
  /* Subtle teal glow */
}

.nav-dragonfly {
  width: 30px;
  height: auto;
  filter: drop-shadow(0 0 2px rgba(182, 157, 248, 0.5));
}

.desktop-menu {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.floating-menu {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(21, 75, 77, 0.3);
  /* Semi-transparent green/teal */
  padding: 0.5rem 1.5rem;
  border-radius: 8px;
  /* Rounded corners for floating effect */
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.nav-link {
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  opacity: 0.8;
}

.nav-link:hover {
  color: var(--primary);
  opacity: 1;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--primary);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-link.active {
  color: var(--primary);
  opacity: 1;
}

.nav-link.active::after {
  width: 100%;
}

.desktop-menu a:not(.btn) {
  font-weight: 500;
  opacity: 0.8;
}

.desktop-menu a:not(.btn):hover {
  opacity: 1;
  color: var(--primary);
}

.mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  gap: 6px;
}

.bar {
  width: 24px;
  height: 2px;
  background-color: white;
  transition: 0.3s;
}

/* Hero Section */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: var(--nav-height);
  overflow: hidden;
}

.hero .container {
  max-width: 100%;
  /* Match nav full width */
  padding: 0 3rem;
  /* Match nav padding to align with logo */
  margin: 0;
  /* Remove auto margin to keep it left */
}

.hero-title {
  margin-bottom: 1.5rem;
  /* Ensure text align left if it was centered anywhere, though default is left */
  text-align: left;
}

.hero-subtitle {
  font-size: 1.2rem;
  max-width: 600px;
  /* Keep max-width for readability but aligned left */
  margin-bottom: 2.5rem;
  text-align: left;
}

.hero-actions {
  display: flex;
  gap: 1rem;
}

/* Services */
.section {
  padding: 6rem 0;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
  max-width: 800px;
  /* Increased max-width to accommodate larger text */
  margin-left: auto;
  margin-right: auto;
}

.section-header h2 {
  font-size: 5rem;
  /* Increased from 3.5rem (approx 2 sizes up) */
  margin-bottom: 0.5rem;
  /* Reduced spacing to "1cm" (approx 38px/2.5 ~ 15px, 0.5rem is ~8px, 1rem is 16px. Let's go closer: 0.5rem) */
}

.section-header p {
  font-size: 1.6rem;
  /* Increased from default */
  line-height: 1.4;
}

.grid-3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.grid-3 .card {
  flex: 0 0 300px;
  /* Fixed width: don't grow, don't shrink, stay 300px */
  width: 300px;
  /* Explicit width */
  min-height: 380px;
  /* Enforce uniform height (tall enough for content + padding) */
  /* If content is shorter, min-height keeps it tall. If longer, it grows. */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* Or space-between if we want buttons at bottom */
}

.icon-box {
  margin-bottom: 1.5rem;
  width: 80px;
  height: 80px;
  background: var(--bg-secondary);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  /* Keep consistent or change to 0 for square? Reference looks square-ish but logo-box didn't specify radius. Let's keep a small radius or match logo-box. Logo box has no radius specified so it is square. */
  /* User said "just like the one that is together". Logo box in CSS didn't have border-radius set, so it's square. */
  /* Let's remove border-radius to match logo-box strictly, or keep small if user wants. Reference image looks square. */
  border-radius: 0;
  box-shadow: 0 0 15px rgba(45, 212, 191, 0.1);
}

.dragonfly-icon {
  width: 50px;
  /* Adjust size relative to box */
  height: auto;
  filter: drop-shadow(0 0 2px rgba(182, 157, 248, 0.5));
}

/* Specific override for service card text as per user request */
.glass-card p {
  font-size: 1rem;
  /* Reduced from 1.1rem to fit better */
  font-weight: 500;
  /* Keep weight */
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
  /* Ensure high contrast */
}

/* Service Card Title Override */
.glass-card h3 {
  font-size: 1.5rem;
  /* Reduced to prevent overflow ("Desenvolvimento" was breaking) */
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* Pricing */
.pricing-card {
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.pricing-card h3 {
  color: var(--primary);
  /* Aqua Green */
  margin-bottom: 0.5rem;
  min-height: 4.8rem;
  /* Space for 2 lines (2rem * 1.2 line-height * 2) */
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-card.featured {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(45, 212, 191, 0.3);
  /* Teal border */
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(45, 212, 191, 0.1);
  /* Teal bg */
  color: var(--primary);
  /* Teal text */
  font-size: 0.8rem;
  margin-bottom: 1rem;
  align-self: center;
}

.badge.glow {
  background: var(--primary);
  color: #0f1c24;
  /* Dark text on bright badge */
  box-shadow: 0 0 10px var(--primary-glow);
}

.price {
  font-size: 2rem;
  font-weight: 700;
  margin: 1rem 0 0.5rem;
  color: var(--text-primary);
  /* Keep Lilac or White? User said Lilac for text usually, let's keep Lilac or White for Price to stand out? User: "all writings in lilac". Okay, price is text. */
}

.sub-price {
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  height: 1.5em;
  /* Min height to align lines if missing */
}

.features {
  list-style: none;
  margin-bottom: 2rem;
  text-align: left;
  flex-grow: 1;
  /* Pushes button to bottom */
}

.features li {
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
}

.features li::before {
  content: '✓';
  color: var(--primary);
  /* Keep checkmarks Teal */
  position: absolute;
  left: 0;
}

.pricing-card .btn {
  margin-top: auto;
  border-color: var(--primary);
  color: var(--primary);
}

.pricing-card .btn:hover {
  background: var(--primary);
  color: #000;
}

.pricing-card .btn-primary {
  background: linear-gradient(135deg, var(--primary), #22d3ee);
  color: #000;
  border: none;
}

/* Contact */
.contact-container {
  display: flex;
  justify-content: center;
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  padding: 3rem;
  width: 100%;
}

.contact-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.contact-info {
  margin-top: 2rem;
}

.contact-info p {
  margin-bottom: 0.5rem;
  color: white;
}

.form-group {
  margin-bottom: 1.5rem;
}

input,
textarea {
  width: 100%;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  color: white;
  font-family: inherit;
  transition: 0.3s;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(0, 0, 0, 0.5);
}

/* Footer */
.footer {
  padding: 3rem 0;
  border-top: 1px solid var(--glass-border);
  margin-top: 4rem;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-links {
  display: flex;
  gap: 2rem;
}

.copyright {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* Animations */
.fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s forwards;
}

.delay-1 {
  animation-delay: 0.2s;
}

.delay-2 {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.fade-in-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }

  .desktop-menu {
    display: none;
  }

  .mobile-menu-btn {
    display: flex;
    z-index: 1002;
  }

  .contact-content {
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: black;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    transform: translateX(100%);
    transition: 0.3s ease;
  }

  .mobile-menu-overlay.active {
    transform: translateX(0);
  }

  .mobile-link {
    font-size: 1.5rem;
    font-weight: 600;
  }

  .footer-content {
    flex-direction: column;
    text-align: center;
  }
}

/* Manifesto Section */
.manifesto-section {
  margin-top: 6rem;
  /* Generous spacing top */
  margin-bottom: 2rem;
  text-align: left;
  /* Aligned to the left as requested */
  padding-left: 1rem;
  border-left: 1px solid rgba(182, 157, 248, 0.3);
  /* Subtle guide line for elegance */
}

.manifesto-section p {
  font-family: 'Cormorant Garamond', serif;
  /* Elegant typography */
  font-size: 2.2rem;
  /* Large, readable size */
  font-weight: 600;
  /* Slightly bold for impact */
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .manifesto-section p {
    font-size: 1.8rem;
  }
}

/* Modern Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger support provided by JS via class addition, 
   but we can also have specific stagger classes if needed 
*/

/* Scale Reveal Variant */
.reveal.scale-up {
  transform: scale(0.95) translateY(30px);
}

.reveal.scale-up.active {
  transform: scale(1) translateY(0);
}

/* Bidirectional Reveal Base */
.reveal-base {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

/* Active State */
.reveal-base.active {
  opacity: 1;
  transform: translateY(0);
}

/* Entering from Bottom (Standard) */
.reveal-base.reveal-up {
  transform: translateY(50px);
}

.reveal-base.reveal-up.active {
  transform: translateY(0);
}

/* Entering from Top (Scroll Up) */
.reveal-base.reveal-down {
  transform: translateY(-50px);
}

.reveal-base.reveal-down.active {
  transform: translateY(0);
}

/* Hero Grid Layout */
.hero .container {
  display: block;
  /* Reset or ensure default before grid applies if needed, but we used a wrapper */
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  min-height: 80vh;
  /* Ensure tall enough */
}

/* On mobile, stack them */
@media (max-width: 992px) {
  .hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 3rem;
  }

  .hero-content {
    order: 1;
    /* Content first */
  }

  .hero-visual {
    order: 2;
    /* Visual below or hide if too cluttered? User asked to fill space, imply desktop mostly. But let's keep it. */
    display: flex;
    justify-content: center;
  }

  .manifesto-section {
    text-align: center;
    /* Center manifesto on mobile to match */
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(182, 157, 248, 0.3);
    padding-top: 2rem;
    margin-top: 3rem;
  }
}

/* Hero Content Adjustment */
.hero-content {
  max-width: 650px;
  /* Limit text width */
}

/* Hero Visual & Mockup */
/* Logo Display Area */
.logo-display {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  /* Shifted down ~2cm as requested */
  margin-bottom: 2rem;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1000px;
}

.glass-mockup {
  width: 100%;
  max-width: 450px;
  background: rgba(22, 78, 99, 0.15);
  /* Very subtle petrol tint */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset;
  transform: rotateY(-10deg) rotateX(5deg);
  /* 3D Tilt */
  transition: transform 0.5s ease;
}

.glass-mockup:hover {
  transform: rotateY(0) rotateX(0) scale(1.02);
}

.floating-anim {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotateY(-10deg) rotateX(5deg);
  }

  50% {
    transform: translateY(-20px) rotateY(-5deg) rotateX(2deg);
  }

  100% {
    transform: translateY(0px) rotateY(-10deg) rotateX(5deg);
  }
}

/* Mockup Internals */
.mockup-header {
  display: flex;
  gap: 8px;
  margin-bottom: 2rem;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  opacity: 0.7;
}

.dot.red {
  background: #ff5f56;
}

.dot.yellow {
  background: #ffbd2e;
}

.dot.green {
  background: #27c93f;
}

.mockup-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.mockup-logo {
  width: 100px;
  height: auto;
  filter: drop-shadow(0 0 8px rgba(182, 157, 248, 0.6));
}

.mockup-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  opacity: 0.4;
}

.line {
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.w-75 {
  width: 75%;
}

.w-50 {
  width: 50%;
}

.w-90 {
  width: 90%;
}

.mockup-stats {
  display: flex;
  gap: 1rem;
  width: 100%;
  margin-top: 1rem;
}

.stat-box {
  flex: 1;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-box .label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 0.7;
  margin-bottom: 4px;
}

.stat-box .value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  /* Aqua */
}

/* Glow Circle */
.glow-circle {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(45, 212, 191, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  pointer-events: none;
}

/* Refined Mockup Container */
.hero-visual {
  /* Ensure 3D context is preserved */
  perspective: 1200px;
}

.glass-mockup-container {
  position: relative;
  width: 100%;
  max-width: 450px;
  transform-style: preserve-3d;
  /* Rotate the whole stack and shift right as requested (large shift ~ 240px) */
  transform: rotateY(-12deg) rotateX(6deg) translateX(240px);
  transition: transform 0.5s ease-out;
}

.glass-mockup-container:hover {
  transform: rotateY(-5deg) rotateX(2deg) scale(1.02) translateX(240px);
}

/* Base style for all layers to share glass properties */
.mockup-layer,
.glass-mockup.main-card {
  position: absolute;
  border-radius: 20px;
  /* Basic Glass */
  background: rgba(22, 78, 99, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* Edge Highlight - Subtle Base */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Back Layers (Stacked behind) */
.mockup-layer.back-2 {
  top: 30px;
  left: 30px;
  width: 100%;
  height: 100%;
  background: rgba(22, 78, 99, 0.1);
  z-index: -2;
  transform: translateZ(-40px);
}

.mockup-layer.back-1 {
  top: 15px;
  left: 15px;
  width: 100%;
  height: 100%;
  background: rgba(22, 78, 99, 0.15);
  z-index: -1;
  transform: translateZ(-20px);
}

/* Main Card Override - The "Hero" Card */
.glass-mockup.main-card {
  position: relative;
  /* Stacking context */
  /* Directional Shadow: Deep shadow bottom-right with Teal tint for "Luminous" feel */
  box-shadow:
    30px 30px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 20px 40px rgba(45, 212, 191, 0.1);
  /* Cyan/Teal glow diffuse shadow */

  /* Crystalline Gradient */
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.08) 0%,
      rgba(22, 78, 99, 0.05) 50%,
      rgba(15, 23, 42, 0.3) 100%);
  z-index: 10;
  transform: translateZ(0);
  /* Anchor */
  overflow: hidden;
  /* For rim light clip */
}

/* Rim Light / Edge Highlight (Realce de Contorno) */
.rim-light {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  pointer-events: none;
  z-index: 20;

  /* Top-Left bright highlight, fading to bottom-right */
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 40%,
      rgba(0, 0, 0, 0.1) 100%);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  padding: 1px;
  /* The width of the border rim */
}

/* Add a Glow effect on top left corner (Gloss) */
.glass-mockup.main-card::before {
  content: '';
  position: absolute;
  top: -50px;
  left: -50px;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  filter: blur(20px);
  opacity: 0.6;
  pointer-events: none;
}