/* ===================
   BUTTONS
=================== */
.button-primary,#form1467469771 > div.t-form__inputsbox > div.tn-form__submit > button {
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.70);
  background: linear-gradient(266deg, #27C8D9 3.37%, #6B84F7 93.5%); /* Keep original gradient */
  box-shadow:
    0 10px 4.8px 0 rgba(72, 166, 231, 0.50) inset,
    -5px 6px 7.8px 0 rgba(35, 43, 71, 0.28) inset,
    5px 6px 7.8px 0 rgba(35, 43, 71, 0.28) inset;
  color: #0B0F14 !important;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: box-shadow .6s cubic-bezier(0.4, 0, 0.2, 1), 
              filter .6s cubic-bezier(0.4, 0, 0.2, 1), 
              transform .6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Glow layer using ::after */
.button-primary::after,
#form1467469771 > div.t-form__inputsbox > div.tn-form__submit > button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: 
    radial-gradient(ellipse 80% 35% at center, 
      rgba(235, 248, 252, 0.48) 0%, 
      transparent 58%),
    radial-gradient(ellipse 110% 45% at center, 
      rgba(200, 220, 255, 0.38) 5%, 
      transparent 65%),
    radial-gradient(ellipse 140% 55% at center, 
      rgba(170, 210, 255, 0.25) 10%, 
      transparent 72%);
  opacity: 0; /* Hidden by default */
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth fade-in */
  pointer-events: none;
  z-index: 0;
}

/* Show glow on hover */
.button-primary:hover::after,
#form1467469771 > div.t-form__inputsbox > div.tn-form__submit > button:hover::after {
  opacity: 1; /* Fade in smoothly */
}


/* Hover effects */
.button-primary:hover,
#form1467469771 > div.t-form__inputsbox > div.tn-form__submit > button:hover {
  box-shadow:
    0 12px 6px rgba(72, 166, 231, 0.55) inset,
    -6px 8px 8px rgba(35, 43, 71, 0.25) inset,
    6px 8px 8px rgba(35, 43, 71, 0.25) inset,
    0 0 14px rgba(124, 139, 255, 0.45);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

/* Ensure text stays above glow (if needed) */
/* Make text appear above ::after glow */
.button-primary .tn-atom,
#form1467469771 > div.t-form__inputsbox > div.tn-form__submit > button {
  position: relative;
  z-index: 9; /* Above the glow */
}


/* Smooth Secondary (same look, smoother hover) */
.button-secondary {
  border-radius: 36px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);

  /* baseline shadows with 0 alpha => smooth interpolation */
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0),
    0 0 8px rgba(124,115,255,0);

  /* smooth tweens */
  transition:
    background .35s cubic-bezier(.4,0,.2,1),
    border-color .35s cubic-bezier(.4,0,.2,1),
    box-shadow .45s cubic-bezier(.4,0,.2,1),
    transform .35s cubic-bezier(.4,0,.2,1);

  /* micro-optimizations (no layout shift) */
  will-change: background, box-shadow, transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* creates its own layer */
}

.button-secondary:hover {
  background: rgba(255,255,255,0.10);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.25),
    0 0 8px rgba(124,115,255,0.25);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px); /* lift without layout shift */
}

/* optional: accessible, calm focus ring */
.button-secondary:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.25),
    0 0 0 4px rgba(124,115,255,0.28);
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .button-secondary { transition: none; }
}


#rec1462042151 .tn-elem[data-elem-id="1761103979247"] .tn-atom {
  font-weight: 200 !important;
}
#rec1462042151 .tn-elem[data-elem-id="1761103979245"] .tn-atom {
  font-weight: 600 !important;
}
/* ===================
   HERO GLASS PANEL
=================== */
.hero-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 873px;
  height: 800px;
  background: rgba(26, 32, 45, 0.65);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  clip-path: polygon(0 0, 624px 0, 875px 800px, 0 800px);
}
/* Gradient edge on right diagonal */
.hero-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(#A7B7CB, #495766);
  clip-path: polygon(624px 0, 875px 800px, 874px 800px, 623px 0);
}
/* ===================
   WIDE GLASS PANEL
=================== */
.w-glass-panel {
  position: absolute;
  left: 100px;
  border-radius: 50px;
  border: 2px solid #E2EFFF;
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
/* Center vertically on large screens */
#rec1462282471 > div > div > div.t396__group.tn-group.w-glass-panel.tn-group__1462282471176111244168959170.t396__group-flex {
  position: absolute !important;
  top: 50% !important;
  left: 0;
  right: 0;
  transform: translateY(-50%) !important;
}

/* ===================
   CARD GRID (DESKTOP)
=================== */
/* CARD STYLE - Base */
#rec1462885331 .tn-group[data-group-id="176112062308886140"] .glass-card {
  box-sizing: border-box;
  margin: 0 !important;
  border-radius: 40px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Add padding only to text content inside cards, not images */
#rec1462885331 .tn-group[data-group-id="176112062308886140"] .glass-card .tn-atom {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 2px !important;
}

/* CARD CONTAINER - All desktop screens (1400px+) */
@media (min-width: 1400px) {
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] {
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 94% !important; /* Responsive container */
    max-width: 1680px !important; /* Cap at reasonable size */
    gap: 30px !important; /* Fixed gap */
  }
  
  /* Flexible cards - equal width */
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] .glass-card {
    flex: 1 1 0; /* Equal flexible width */
    min-width: 0; /* Allow shrinking */
    max-width: 385px; /* Cap individual card size */
  }
  
  /* Text adjustments */
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] .glass-card .tn-atom {
    font-size: 100% !important;
    line-height: 1.3 !important;
  }
  
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] .tn-molecule {
    row-gap: 4px !important;
  }
  
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] .tn-molecule .t396__elem:nth-child(2) {
    margin-top: -6px !important;
  }
}


/* ===================
   CENTER SECTION TITLE
=================== */
#rec1462885331 .tn-group[data-group-id="176112062307584410"] {
  left: 50% !important;
  transform: translateX(-50%) !important;
}




/* ===================
   FOOTER GLASS PANEL
=================== */
.footer-glass-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  
  /* Glass effect */
  background: 
    linear-gradient(0deg, rgba(35, 44, 64, 0.65) 0%, rgba(35, 44, 64, 0.65) 100%),
    rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4.3px);
  -webkit-backdrop-filter: blur(4.3px);
}

/* DESKTOP (641px+) - Trapezoid with slopes */
@media (min-width: 641px) {
  .footer-glass-panel {
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - 250px) 100%,
      250px 100%
    );
  }

  /* Left slope stroke */
  .footer-glass-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #A7B7CB;
    clip-path: polygon(
      0 0,
      1px 0,
      250px 100%,
      249px 100%
    );
  }

  /* Right slope stroke */
  .footer-glass-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: #A7B7CB;
    clip-path: polygon(
      100% 0,
      calc(100% - 1px) 0,
      calc(100% - 250px) 100%,
      calc(100% - 249px) 100%
    );
  }
}

/* MOBILE (640px and below) - Regular rectangle, no slopes */
@media (max-width: 640px) {
  .footer-glass-panel {
    clip-path: none; /* Remove slopes */
    border: 1px solid #A7B7CB; /* Optional: add simple border on mobile */
  }
  
  /* Remove slope strokes on mobile */
  .footer-glass-panel::before,
  .footer-glass-panel::after {
    display: none;
  }
}



/* ===================
   RESPONSIVE
=================== */
/* ===================
   TABLET (641px - 1199px)
=================== */
@media (max-width: 1199px) {
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] {
    width: 90% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] .glass-card {
    flex: 0 0 calc(50% - 15px); /* 2 columns with gap */
  }
}

/* ===================
   MOBILE (max 640px)
=================== */
@media (max-width: 640px) {
  /* Glass panel full width with gaps */
  .w-glass-panel {
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    border-radius: 30px;
    border-width: 1.5px;
  }
  #rec1462282471 > div > div > div.t396__group.w-glass-panel {
    gap: 16px;
  }
  
  /* Cards - single column on mobile */
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] {
    width: 90% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    padding-bottom: 50px !important;
    height: auto !important;
  }
  
  #rec1462885331 .tn-group[data-group-id="176112062308886140"] .glass-card {
    flex: 0 0 100%; /* Full width - single column */
  }
}

@media (max-width: 640px) {
  /* Force the entire block to have flexible height */
  #rec1462885331 .t396__artboard {
    min-height: auto !important;
    padding-bottom: 50px !important;
  }
}

/* ===================
   IMAGE FADE EFFECT
=================== */

/* DESKTOP (641px+) - Horizontal fades */
@media (min-width: 641px) {
  /* Right image 1 - transparent on LEFT */
  #rec1467162751 .tn-elem[data-elem-id="176119390520063520"] .t-bgimg {
    mask-image: linear-gradient(to right, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
    -webkit-mask-image: linear-gradient(to right, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
  }

  /* Left image 1 - transparent on RIGHT */
  #rec1467162751 .tn-elem[data-elem-id="176119390519064980"] .t-bgimg {
    mask-image: linear-gradient(to left, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
    -webkit-mask-image: linear-gradient(to left, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
  }

  /* Left image 2 - transparent on RIGHT */
  #rec1467162751 .tn-elem[data-elem-id="1761185040060"] .t-bgimg {
    mask-image: linear-gradient(to left, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
    -webkit-mask-image: linear-gradient(to left, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
  }

  /* Right image 2 - transparent on LEFT */
  #rec1467162751 .tn-elem[data-elem-id="1761185040078"] .t-bgimg {
    mask-image: linear-gradient(to right, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
    -webkit-mask-image: linear-gradient(to right, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
  }
}

/* MOBILE (640px and below) - Vertical fades */
@media (max-width: 640px) {
  /* Right images (upper pics) - transparent on BOTTOM */
  #rec1467162751 .tn-elem[data-elem-id="176119390520063520"] .t-bgimg,
  #rec1467162751 .tn-elem[data-elem-id="1761185040078"] .t-bgimg {
    mask-image: linear-gradient(to top, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
    -webkit-mask-image: linear-gradient(to top, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
  }

  /* Left images (lower pics) - transparent on TOP */
  #rec1467162751 .tn-elem[data-elem-id="176119390519064980"] .t-bgimg,
  #rec1467162751 .tn-elem[data-elem-id="1761185040060"] .t-bgimg {
    mask-image: linear-gradient(to bottom, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
    -webkit-mask-image: linear-gradient(to bottom, 
      transparent 0%, 
      rgba(0,0,0,0.5) 17%, 
      black 36%, 
      black 100%
    );
  }
}

/* ===================
   POPUP CONTAINER GLASSMORPHISM
=================== */
#rec1467469771 .tn-elem[data-elem-id="1761199293509"] .tn-atom {
  /* Glass background gradient */
  background: rgba(20, 22, 36, 0.85) !important; !important;
  
  /* Glass blur effect */
  backdrop-filter: blur(14px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
  
  /* Border */
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 28px !important; /* calc(22px + 6px) */
  
  /* Shadow for depth */
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.45) !important;
  
  /* Optional: padding if needed */
  padding: clamp(22px, 4.6vw, 32px) !important;
}


/* ===================
   POPUP INPUT FIELD STYLING
=================== */

/* Label */
#rec1467469771 .t-input-title {
  color: #dfe6ff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding-bottom: 6px !important;
}

/* Input field - glass style */
#rec1467469771 .t-input {
  appearance: none !important;
  width: 100% !important;
  padding: 14px 14px !important;
  font-size: 15px !important;
  color: #eaf0ff !important;
  
  /* Glass background */
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  
  /* Remove default styles */
  outline: none !important;
  box-shadow: none !important;
  
  /* Smooth transitions */
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}

/* Placeholder text */
#rec1467469771 .t-input::placeholder {
  color: #9fb0ce !important;
}

/* Focus state - purple glow */
#rec1467469771 .t-input:focus {
  border-color: rgba(124, 115, 255, 0.5) !important;
  box-shadow: 0 0 0 4px rgba(124, 115, 255, 0.25) !important;
}

/* Remove margin if needed */
#rec1467469771 .t-input-group {
  margin-bottom: 14px !important;
}

/* Error message styling (optional) */
#rec1467469771 .t-input-error {
  color: #ffb2c0 !important;
  font-size: 12px !important;
  margin-top: 4px !important;
}

/* ===================
   CLOSE BUTTON HOVER
=================== */

/* Close button container */
#rec1467469771 .tn-elem[data-elem-id="1761199499429"] {
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

/* Optional: Add glow effect */
#rec1467469771 .tn-elem[data-elem-id="1761199499429"]:hover img {
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.4)) !important;
}