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

:root {
  --gray: #1F2937;
  --gray-light: #6B7280;
  --gray-lighter: #F9FAFB;
  --mint: #10B981;
  --mint-light: #D1FAE5;
  --hexTeal: #97D7C3;
  --logoMain: #4A5568;
  --logoAccent: #ff8000;
  --white: #FFFFFF;
  --accent: #8B5CF6;
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

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

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--gray);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
}

/* Header */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 100;
  transition: all 0.3s ease;
}

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

.logo img {
  height: 40px;
  transition: opacity 0.3s ease;
}

.logo .logo-first {
  display: block;
  margin-top: -10px;
  margin-bottom: -10px;
  margin-left: -15px;
  height: 60px
}

nav {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  font-weight: bold;
}

.desktop-nav {
  margin-right: 1rem;
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

nav a {
  margin-left: 2rem;
  text-decoration: none;
  color: var(--gray);
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

nav a:hover {
  color: var(--mint);
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}


.lang-switch {
  display: flex;
  gap: 0.5rem;
  margin-left: 1rem;
  padding-left: 1rem;
  border-left: 1px solid #E5E7EB;
}

.lang-switch a {
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--gray);
  position: relative;
}


.lang-switch a:hover {
  background: var(--mint-light);
}

.lang-switch a.active {
  display: none;
}



/* Hamburger Menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 101;
}

.hamburger span {
  display: block;
  width: 25px;
  height: 3px;
  background: var(--gray);
  transition: all 0.3s ease;
  border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 5px);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -5px);
}

/* Mobile Navigation */
.mobile-nav {
  display: none;
  position: fixed;
  top: 73px;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  padding: 1rem 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 99;
  flex-direction: column;
  gap: 0;
}

.mobile-nav.active {
  display: flex;
}

.mobile-nav a {
  padding: 1rem 2rem;
  margin: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-weight: 600;
}

.mobile-nav a:last-child {
  border-bottom: none;
}

li {
  color: var(--gray-light)
}

/* Hero Section */
.intro-animation {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
  margin-top: 80px;
}

.intro-animation svg {
  width: 100%;
  height: auto;
  display: block;
}

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem 6rem;
  background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%);
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,5 85,25 85,75 50,95 15,75 15,25" fill="none" stroke="%2310B981" stroke-width="0.5" opacity=".1"/></svg>') repeat;
  background-size: 80px 80px;
  animation: float 20s ease-in-out infinite;
  z-index: 0;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
}

.hero h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--logoMain);
  line-height: 1.2;
}

.hero h1[lang="ja"] {
  font-size: clamp(2rem, 4vw, 3.2rem);
}
.hero .highlight {
  color: var(--logoAccent);
}

.hero p {
  font-size: 1.25rem;
  color: var(--logoMain);
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.hero-eyebrow {
  font-size: 0.875rem!important;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 0.75rem!important;
  display: inline-block;
  background: var(--mint-light);
  padding: 0.4rem 1rem;
  border-radius: 20px;
}

.hero-eyebrow.ja {
    margin-bottom: 1.25rem!important;


}

/* Buttons */
.button-primary {
  background: var(--logoAccent);
  color: #fff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  text-decoration: none;

}

.button-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: #e76f00;
}

.button-secondary, .button-demo {
  background: transparent;
  color: var(--gray);
  padding: 1rem 2rem;
  border: 2px solid var(--gray-light);
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-left: 1rem;
}

.button-secondary:hover, .button-demo:hover {
  background: var(--gray);
  color: white;
}


/* Sections */
.section {
  padding: 5rem 2rem;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.section#videos {
  max-width: unset;
}

.divider {
  display: block;
  width: 100%;
  border-bottom: 2px solid var(--hexTeal);
}

.section h2,
.pricing-section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1rem;
  color: var(--gray);
}

.section-subtitle {
  font-size: 1.2rem;
  color: var(--logoMain);
  text-align: center;
  margin-bottom: 1rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

summary.toggle-details {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

summary.toggle-details .arrow {
  transition: transform 0.2s ease;
}

details[open] summary.toggle-details .arrow {
  transform: rotate(180deg);
}

/* Features Section */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

.feature-card {
  background: var(--white);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: var(--shadow);
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.feature-card:nth-of-type(2) {
  background-color: rgba(79, 195, 247, 0.05);
}

.feature-card:nth-of-type(1) {
  background-color: rgba(129, 199, 132, 0.05);
}

.feature-card:nth-of-type(3) {
  background-color: rgba(255, 213, 79, 0.05);
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
}

.feature-card:hover::before {
  transform: scale(2);
  opacity: 0.05;
}

.feature-header {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.5rem
}


/* Shared formatting so both lists look identical */
.feature-preview,
.feature-details {
  list-style: none;
  padding-left: 0;
  margin: 0 0 0 0;
}

.feature-preview {
  margin-top: 1rem;
}

.feature-details {
  margin-bottom: 1rem;
}

.feature-preview li::before,
.feature-details li::before {
  content: "⬢";
  color: var(--logoMain);
  font-weight: bold;
  margin-right: 0.5rem;
  vertical-align: middle;
  position: relative;
  top: -0.1em; /* Adjust this value to fine-tune */
}

/* But only hide the expandable list */
.feature-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

.feature-card.expanded .feature-details {
  max-height: 700px;
  /* or whatever fits your longest list */
  opacity: 1;
}

.toggle-details {
  background: none;
  border: none;
  color: var(--logoMain);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
  margin-top: 0.5rem;
  display: inline-block;
  transition: color 0.3s ease;
}


.toggle-details:hover {
  /* slightly darker shade for hover */
  color: var(--mint);
  text-decoration: none;
  /* ensure no underline on hover */
}

.toggle-details:focus {
  outline: none;
  /* removes browser outline */
  text-decoration: none;
  /* prevents underline after click */
}


.hexagon-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.feature-card h3 {
  /*font-size: 1.5rem;*/
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--gray);
  position: relative;
  z-index: 2;
}

.feature-card p {
  color: var(--gray);
  line-height: 1.6;
  position: relative;
  z-index: 2;
  font-weight: 500;
}

/* Pricing Section */
.pricing-section {
  background: #E8F5F2;
  padding: 6rem 2rem;
  position: relative;
  overflow: hidden;
}

.pricing-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.pricing-table {
  background: var(--white);
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  margin-top: 3rem;
}

.pricing-table table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
  width: 25%;
  /* Features column wider for text */
}


.pricing-table thead {
  background: linear-gradient(135deg, var(--hexTeal) 0%, #90CAF9 100%);
  color: var(--logoMain);
}


.pricing-table .merged-row td {
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  position: relative;
}

.pricing-table .merged-row td:first-child {
  text-align: left;
  padding: 1.5rem;
}

.table-subtext {
  font-size: 0.85em;
  color: var(--gray-light);
}

.pricing-table .primary-row td:not(:first-of-type) {
  border-bottom: none;
  padding-bottom: 0;
}

.pricing-table .secondary-row {
  text-align: center;
}
.pricing-table .secondary-row td {
  padding-top: 0;
}

/* Make merged rows more distinct */
.pricing-table .merged-row td[colspan] {
  background: linear-gradient(90deg, rgba(151, 215, 195, 0.08), rgba(144, 202, 249, 0.08));
  font-weight: 500;
  font-size: 1rem;
}


/* Add full-height left border to merged content */
.pricing-table .merged-row td[colspan]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: linear-gradient(to bottom, var(--hexTeal), #90CAF9);
  border-radius: 0 2px 2px 0;
  opacity: 0.5;
}

/* All Plans Badge */
.all-plans-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--hexTeal), #90CAF9);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 10px;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.merged-content {
  display: inline-block;
  text-align: left;
  width: 280px;
}


.tier-tagline {
  font-size: 0.85em;
  font-weight: normal;
  margin-top: 4px;
}

.pricing-table th {
  padding: 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
}

.pricing-table th:first-child {
  text-align: left;
  background: #F0F9F9;
  color: var(--logoMain);
  border-right: 3px solid #f0f9f9;
}

/* Save tag styling */
.save-tag {
  display: inline-block;
  background: #E0F7E9;
  color: #2E7D32;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.5rem;
}

/* Column-specific header gradients */
.pricing-table th:nth-child(2) {
  background: linear-gradient(135deg, #81C784, #66BB6A);
  color: #fff;
}

.pricing-table th:nth-child(3) {
  background: linear-gradient(135deg, #90CAF9, #64B5F6);
  color: #fff;
}

.pricing-table th:nth-child(4) {
  background: linear-gradient(135deg, #B39DDB, #9575CD);
  color: #fff;
}


.pricing-table td {
  padding: 1.2rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.pricing-table .spacer-row td {
  padding: 1rem 0;
  background: white;
  border: none;
}

.pricing-table .price-row {
  background: #FFF9F5;
  font-weight: 600;
  font-size: 1.1rem;
}

.pricing-table tr:last-child,
.pricing-table tr:last-child:hover {
  background: #fff !important;
}


.pricing-table .price-row:hover {
  background: #F8F9FA;
}

.pricing-table .price-row td {
  color: var(--gray);
  font-size: 1.2rem;
  font-weight: 600;
}

.pricing-table .price-row.monthly td:first-child,
.pricing-table .price-row.annual td:first-child {
  font-weight: 700;
  color: var(--gray);
  background-color: var(--white);
}

.pricing-table .price-row td:nth-child(2) {
  position: relative;
}

.pricing-table .price-row td:nth-child(2)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--logoAccent);
  border-radius: 0 2px 2px 0;
  opacity: 0.5;
}

.pricing-table .price-row.annual td .save-tag {
  display: inline-block;
  background: #E0F7E9;
  color: #2E7D32;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  margin-left: 0.5rem;
}

.pricing-table .price-row.monthly {
  border-top: 1px solid #E5E7EB;
}

.pricing-table .price-row.annual {
  border-bottom: 1px solid #E5E7EB;
}

.pricing-table .price-row td .cycle {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.9rem;
  color: #5BAFA1;
  font-weight: 500;
}

.pricing-table .price-row td .cycle em {
  font-style: normal;
  color: var(--logoAccent);
  margin-left: 0.25rem;
  font-size: 0.8rem;
}

.pricing-table .price-row td:first-child {
  color: var(--gray);
}

.pricing-table .button-row {
  background: var(--white);
}


.pricing-table .button-small {
  color: #fff;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 25px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Starter plan button */
.pricing-table td:nth-child(2) .button-small {
  background: #81C784;
}

.pricing-table td:nth-child(2) .button-small:hover {
  background: #66BB6A;
}

/* Growth plan button */
.pricing-table td:nth-child(3) .button-small {
  background: #90CAF9;
}

.pricing-table td:nth-child(3) .button-small:hover {
  background: #64B5F6;
}

/* Pro plan button */
.pricing-table td:nth-child(4) .button-small {
  background: #B39DDB;
}

.pricing-table td:nth-child(4) .button-small:hover {
  background: #9575CD;
}


.pricing-table .button-small:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Pricing Table Mobile Responsiveness */
@media (max-width: 968px) {
  .pricing-table {
    overflow-x: auto;
  }
  
  .pricing-table table {
    min-width: 700px;
  }
  
  .pricing-table th,
  .pricing-table td {
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  .tier-tagline {
    font-size: 0.75em;
  }
  
  .pricing-table .button-small {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }
  
  .all-plans-badge {
    font-size: 0.6rem;
    padding: 0.15rem 0.4rem;
  }
}

@media (max-width: 640px) {
  .pricing-section {
    padding: 4rem 1rem;
  }
  
  .pricing-table table {
    min-width: 650px;
  }
  
  .pricing-table th,
  .pricing-table td {
    padding: 0.75rem 0.5rem;
    font-size: 0.85rem;
  }
  
  .pricing-table th {
    font-size: 1rem;
  }
  
  .tier-tagline {
    font-size: 0.7em;
  }
  
  .save-tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
  }

}

/* Gallery Container with Arrows */
.gallery-container {
  position: relative;
  max-width: 100%;
  margin: 2rem auto;
  padding: 0 60px;
}

.scroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--hexTeal);
  padding-bottom: 3px;
  color: var(--dark);
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  font-size: 2rem;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 300;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.scroll-arrow:hover {
  background: var(--mint);
  transform: translateY(-50%) scale(1.1);
}

.scroll-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.scroll-arrow:disabled:hover {
  background: var(--hexTeal);
  transform: translateY(-50%) scale(1);
}

.scroll-left {
  left: 0;
}

.scroll-right {
  right: 0;
}

/* Thumbnail Gallery */
.gallery-thumbnails {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 0 2rem 0;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}


.gallery-thumbnails::-webkit-scrollbar {
  display: none;
}

.thumbnail-item {
  flex: 0 0 280px;
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.thumbnail-item:hover {
  transform: scale(1.02);
}

.thumbnail-item img,  .thumbnail-item video {
  height: 260px;
}

.thumbnail-item .thumbnail-title {
  text-align: center;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gray);
  margin: 0;
  line-height: 1.3;
}


/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.95);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  max-width: 90%;
  max-height: 85vh;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.lightbox-content img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.lightbox-info {
  background: rgba(255, 255, 255, 0.95);
  padding: 1rem 2rem;
  border-radius: 8px;
  text-align: center;
  max-width: 600px;
}

.lightbox-info h3 {
  margin: 0 0 0.5rem 0;
  color: var(--gray);
  font-size: 1.3rem;
}

.lightbox-info p {
  margin: 0;
  color: #666;
  font-size: 1rem;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 50px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  line-height: 1;
  z-index: 10001;
  transition: transform 0.2s ease;
}

.lightbox-close:hover {
  transform: scale(1.1);
  color: var(--hexTeal);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  padding-bottom: 5px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  font-size: 3rem;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 300;
  backdrop-filter: blur(10px);
}

.lightbox-nav:hover {
  background: var(--hexTeal);
  color: var(--gray);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-prev {
  left: 30px;
}

.lightbox-next {
  right: 30px;
}

.lightbox-counter {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-weight: 600;
  color: var(--gray);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Video Gallery Styles */
.thumbnail-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #000;  
}

.thumbnail-wrapper video {
  width: 100%;
  max-height: 280px;
  display: block;
  pointer-events: none;
  object-fit: cover;

}
.thumbnail-item[data-video-src*="student-site"] video {
  object-fit: cover;
  object-position: top; 
}


.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s ease;
}

.video-item:hover .play-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.play-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--logoAccent);
  font-size: 28px;
  padding-left: 6px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-item:hover .play-icon {
  background: var(--logoAccent);
  color: white;
  transform: scale(1.1);
}

/* Video in lightbox */
.lightbox-content video {
  max-width: 90%;
  max-height: 70vh;
  border-radius: 8px;
  background: #000;
}

#video-lightbox .lightbox-content {
  max-width: 95%;
}

/* FAQ Section */
.faq-section {
  background: #f9fafc;
  padding: 6rem 2rem;
}

.faq-container {
  max-width: 900px;
  margin: 0 auto;
}

.faq-item {
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: var(--shadow-lg);
}

.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.2rem 1.5rem;
  font-size: 1.1rem;
  font-weight: 600;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question:hover {
  color: var(--primary);
}

.faq-icon {
  font-size: 1.5rem;
  transition: transform 0.3s;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 1.5rem;
  transition: max-height 0.4s ease, padding 0.3s ease;
}

.faq-answer p {
  margin: 1rem 0;
  line-height: 1.6;
}

.faq-item.active .faq-answer {
  max-height: 300px;
  /* adjust if you expect longer answers */
  padding: 0 1.5rem 1rem;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg);
  /* turns + into × */
}

/* CTA Section */
.cta-section {
  background: linear-gradient(135deg, #64B5F6 0%, #8B5CF6 100%);
  color: white;
  text-align: center;
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><polygon points="50,5 85,25 85,75 50,95 15,75 15,25" fill="none" stroke="white" stroke-width="0.5" opacity="0.1"/></svg>') repeat;
  background-size: 100px 100px;
  animation: rotate 60s linear infinite;
  z-index: 0;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}


.cta-content p {
  font-size: 1.1rem;
  margin: 1rem 0 2rem;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  flex-wrap: wrap;
}


.cta-note {
  font-size: 0.9rem;
  margin-top: 1.5rem;
  opacity: 0.8;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
}

.cta-section h2 {
  color: white;
  margin-bottom: 1rem;
}

.cta-section p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.cta-section .button-primary {
  background: var(--logoAccent);
  color: #fff;
  padding: 1rem 2rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.cta-section .button-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: #e76f00;
}

.cta-section .button-secondary {
  background-color: var(--hexTeal);
  border: none;
  margin-left: 0;
}

.cta-section .button-secondary:hover {
  background-color: var(--hexTeal);
  transform: translateY(-2px);
  color: var(--gray);
}

/* Footer */
footer {
  background: var(--gray);
  color: white;
  padding: 3rem 2rem;
  text-align: center;
}

/* Mobile Responsiveness */

@media (max-width: 1090px) {
  .features-grid {
    grid-template-columns: 1fr;
  }

  .hexagon-icon {
    height: 64px;
    width: 64px;
  }

  .feature-card h3 {
    font-size: 1.5rem;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  header {
    padding: 1rem;
  }

  .desktop-nav {
    display: none;
  }

  .hamburger {
    display: flex;
  }
  
  .lang-switch {
    margin-left: auto;
    margin-right: 1rem;
    padding-right: 1rem;
    padding-left: unset;
    border-right: 1px solid #E5E7EB;
    border-left: unset;
  }

  .hero {
    padding: 3rem 1rem 4rem;
  }

  .section {
    padding: 3rem 1rem;
  }

  .pricing-table {
    overflow-x: auto;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
  }
  .gallery-container {
    padding: 0 50px;
  }
  
  .scroll-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
  }
  
  .thumbnail-item {
    flex: 0 0 220px;
  }
  
  .thumbnail-item .thumbnail-title {
    font-size: 0.85rem;
  }

  .thumbnail-item video, .thumbnail-item img  {
    max-height: 220px;
  }
  
  .lightbox-nav {
    width: 50px;
    height: 50px;
    font-size: 2rem;
  }
  
  .lightbox-prev {
    left: 15px;
  }
  
  .lightbox-next {
    right: 15px;
  }
  
  .lightbox-close {
    top: 15px;
    right: 15px;
    font-size: 40px;
  }
  
  .lightbox-info {
    padding: 0.75rem 1rem;
  }
  
  .lightbox-info h3 {
    font-size: 1.1rem;
  }
  
  .lightbox-info p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .gallery-container {
    padding: 0 40px;
  }
  
  .scroll-arrow {
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
  }
  
  .thumbnail-item {
    flex: 0 0 200px;
  }
  
  .thumbnail-item .thumbnail-title {
    font-size: 0.8rem;
  }
}


/* Animation classes */
.fade-in {
  opacity: 1;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

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

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

/* Multi-layer pseudo-random hex texture for pricing section */
.pricing-section {
  background: #E8F5F2;
  /* mint-tinted base */
  position: relative;
  overflow: hidden;
}

.pricing-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cpolygon%20points%3D%2755.34%2C125.00%2049.00%2C134.28%2037.80%2C133.43%2032.93%2C123.30%2039.27%2C114.02%2050.48%2C114.87%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2790.03%2C36.05%2078.41%2C42.64%2066.89%2C35.87%2066.99%2C22.51%2078.61%2C15.92%2090.13%2C22.69%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2797.72%2C31.97%2092.86%2C38.79%2084.53%2C38.00%2081.05%2C30.38%2085.90%2C23.56%2094.24%2C24.35%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27164.21%2C42.64%20155.80%2C51.54%20143.88%2C48.71%20140.38%2C36.97%20148.80%2C28.07%20160.71%2C30.91%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27184.69%2C118.10%20173.17%2C126.53%20160.11%2C120.77%20158.57%2C106.58%20170.09%2C98.15%20183.15%2C103.91%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2744.41%2C162.66%2031.34%2C174.69%2014.38%2C169.38%2010.50%2C152.05%2023.57%2C140.02%2040.52%2C145.33%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2745.05%2C76.48%2035.78%2C78.29%2029.58%2C71.16%2032.65%2C62.23%2041.92%2C60.43%2048.11%2C67.55%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27122.13%2C125.95%20114.36%2C131.95%20105.29%2C128.22%20103.99%2C118.50%20111.75%2C112.51%20120.82%2C116.23%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2743.21%2C32.42%2034.13%2C42.38%2020.97%2C39.50%2016.88%2C26.65%2025.96%2C16.69%2039.13%2C19.58%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27100.52%2C78.78%2087.09%2C85.01%2074.98%2C76.49%2076.31%2C61.74%2089.74%2C55.52%20101.85%2C64.04%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2777.28%2C155.48%2065.37%2C159.36%2056.05%2C150.99%2058.64%2C138.73%2070.56%2C134.84%2079.88%2C143.22%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27118.26%2C112.32%20107.91%2C113.68%20101.56%2C105.39%20105.55%2C95.75%20115.90%2C94.39%20122.26%2C102.67%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cpolygon%20points%3D%27158.29%2C110.81%20145.41%2C118.04%20132.71%2C110.51%20132.88%2C95.74%20145.76%2C88.50%20158.47%2C96.04%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27191.28%2C68.14%20183.79%2C77.43%20172.00%2C75.59%20167.70%2C64.45%20175.19%2C55.16%20186.98%2C57.01%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2771.87%2C75.32%2064.22%2C82.68%2054.03%2C79.74%2051.47%2C69.44%2059.12%2C62.08%2069.31%2C65.02%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2779.59%2C74.87%2071.42%2C78.82%2063.91%2C73.73%2064.57%2C64.67%2072.74%2C60.72%2080.25%2C65.81%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2739.77%2C57.80%2030.88%2C62.41%2022.44%2C57.03%2022.88%2C47.02%2031.77%2C42.40%2040.21%2C47.79%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27148.14%2C153.49%20138.42%2C160.33%20127.64%2C155.33%20126.57%2C143.49%20136.29%2C136.65%20147.08%2C141.65%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27144.71%2C144.53%20137.46%2C149.85%20129.23%2C146.22%20128.25%2C137.28%20135.50%2C131.97%20143.73%2C135.59%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2777.22%2C177.56%2062.85%2C180.08%2053.49%2C168.91%2058.48%2C155.21%2072.84%2C152.68%2082.21%2C163.86%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27186.02%2C65.86%20171.87%2C73.16%20158.48%2C64.55%20159.23%2C48.65%20173.38%2C41.35%20186.77%2C49.96%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27163.39%2C84.66%20153.89%2C96.67%20138.74%2C94.46%20133.08%2C80.23%20142.58%2C68.22%20157.73%2C70.43%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2751.01%2C132.96%2043.78%2C145.26%2029.52%2C145.16%2022.48%2C132.75%2029.70%2C120.45%2043.96%2C120.56%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27107.75%2C45.21%2097.02%2C51.71%2086.03%2C45.66%2085.77%2C33.12%2096.50%2C26.63%20107.49%2C32.67%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27200%27%20viewBox%3D%270%200%20200%20200%27%3E%3Cpolygon%20points%3D%2738.00%2C67.34%2028.12%2C77.80%2014.11%2C74.46%2010.00%2C60.67%2019.89%2C50.21%2033.89%2C53.54%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27143.57%2C164.15%20134.71%2C176.70%20119.41%2C175.30%20112.97%2C161.35%20121.83%2C148.80%20137.13%2C150.20%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2735.32%2C61.15%2024.70%2C67.20%2014.15%2C61.03%2014.22%2C48.81%2024.84%2C42.76%2035.38%2C48.93%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2758.77%2C128.45%2051.43%2C132.24%2044.47%2C127.77%2044.86%2C119.52%2052.20%2C115.73%2059.16%2C120.19%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27124.49%2C149.58%20119.32%2C158.38%20109.12%2C158.31%20104.08%2C149.44%20109.24%2C140.64%20119.44%2C140.71%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27147.55%2C77.04%20137.37%2C89.46%20121.53%2C86.86%20115.86%2C71.84%20126.03%2C59.42%20141.88%2C62.02%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2791.34%2C36.62%2081.06%2C50.87%2063.58%2C49.09%2056.37%2C33.06%2066.65%2C18.81%2084.13%2C20.59%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27128.49%2C160.54%20112.67%2C165.14%20100.78%2C153.74%20104.70%2C137.74%20120.52%2C133.14%20132.42%2C144.54%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27186.89%2C87.87%20174.97%2C93.91%20163.78%2C86.61%20164.51%2C73.26%20176.43%2C67.22%20187.62%2C74.52%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%27132.37%2C167.14%20117.64%2C174.11%20104.24%2C164.85%20105.56%2C148.61%20120.28%2C141.63%20133.69%2C150.89%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2741.69%2C60.95%2030.62%2C71.14%2016.26%2C66.65%2012.97%2C51.97%2024.04%2C41.78%2038.40%2C46.27%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3Cpolygon%20points%3D%2765.67%2C38.69%2059.27%2C44.72%2050.85%2C42.20%2048.82%2C33.64%2055.22%2C27.60%2063.65%2C30.12%27%20fill%3D%27%2390CAF9%27%20fill-opacity%3D%270.04%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: repeat, repeat, repeat;
  background-size: 220px 220px, 280px 280px, 340px 340px;
  background-position: 0 0, 80px 40px, 140px 110px;
  z-index: 0;
}

.pricing-section .container {
  position: relative;
  z-index: 1;
}

/* svg animation*/
.tile {
  opacity: 0;
  animation: slideAndShrink 3.2s ease-in-out forwards;
  animation-delay: var(--delay, 0s);
  transform-origin: 825.196px 436.372px;
  will-change: transform, opacity;
}

@keyframes slideAndShrink {
  0% {
    transform: translate(var(--from-x), var(--from-y)) scale(1);
    opacity: 0;
    filter: brightness(1);
  }

  40% {
    opacity: 1;
    filter: brightness(1.05);
    /* arrival pop */
  }

  60% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: brightness(1);
  }

  80% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
    filter: brightness(1.08);
    /* hold + twinkle */
  }

  100% {
    transform: translate(0, 0) scale(0.1);
    opacity: 0;
    filter: brightness(1);
  }
}

#CenterHex,
#Text {
  opacity: 0;
  animation:
    fadeCenterIn 1s ease-in-out 3s forwards,
    centerGrow 1s ease-in-out 3s forwards;
  transform-origin: center;
  will-change: transform, opacity;
}

#Background {
  opacity: 0;
  animation:
    fadeBackgroundIn 1s ease-in-out 3s forwards,
    centerGrow 1s ease-in-out 3s forwards;
  transform-origin: center;
  will-change: transform, opacity;
}

@keyframes fadeCenterIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes centerGrow {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.1);
  }
}

@keyframes fadeBackgroundIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 0.14;
  }
}