/* --background-color: Background color for the entire website, including individual sections */
  /* --default-color: Default color used for the majority of the text content across the entire website */
  /* --heading-color: The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */; /* Color for headings, subheadings and title throughout the website */
  /* --accent-color: Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  /* --surface-color: The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  /* --contrast-color: Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */


/* ==================================
  Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options
  --nav-color: The default color of the main navmenu links
  --nav-hover-color: Applied to main navmenu links when they are hovered over or active 
  --nav-mobile-background-color: Used as the background color for mobile navigation menu 
  --nav-dropdown-background-color: Used as the background color for dropdown items that appear when hovering over primary navigation items
  --nav-dropdown-color: Used for navigation links of the dropdown items in the navigation menu.
  --nav-dropdown-hover-color: Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over.
  =================================== */




:root {
  --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: 'Kanit', sans-serif;
  --nav-font: "Raleway", sans-serif;
}

:root,
[data-bs-theme="light"] {
  --background-color:              #eeeeee;
  --default-color:                 #321143;
  --heading-color:                 #321143;
  --accent-color:                  #462CB2;
  --surface-color:                 #edc8fa;
  --contrast-color:                #ffffff;

  --nav-color:                     #321143;
  --nav-hover-color:               #462CB2;
  --nav-mobile-background-color:   #321143;
  --nav-dropdown-background-color: #321143;
  --nav-dropdown-color:            #ffffff;
  --nav-dropdown-hover-color:      #edc8fa;
}

[data-bs-theme="dark"] {
  --background-color:              #321143;
  --default-color:                 #eeeeee;
  --heading-color:                 #ffffff;
  --accent-color:                  #b99de8;
  --surface-color:                 #462CB2;
  --contrast-color:                #ffffff;

  --nav-color:                     #eeeeee;
  --nav-hover-color:               #b99de8;
  --nav-mobile-background-color:   #1a0a2e;
  --nav-dropdown-background-color: #1a0a2e;
  --nav-dropdown-color:            #eeeeee;
  --nav-dropdown-hover-color:      #b99de8;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}
body {
  background: var(--contrast-color);
}
[data-bs-theme="dark"] body { 
  background-color: #38204a;
}
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color) !important;
  font-family: 'Kanit', sans-serif !important;
}

.tinny {
  font-size: 0.75rem;
  color: #888;
}

.tinny a {
  color: var(--heading-color);
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* ---- Navbar ---- */
.hiw-header {
  background-color: var(--background-color);
  border-bottom: 1px solid rgba(70, 44, 178, 0.08);
  padding: 4px 0;
}

.hiw-nav-brand {
  font-family: 'Kanit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading-color);
  letter-spacing: 0.02em;
}

.navbar .nav-link {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  color: var(--nav-color);
  padding: 6px 14px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
  color: var(--accent-color);
  background: rgba(70, 44, 178, 0.06);
}

.hiw-nav-cta {
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 50px;
  padding: 9px 22px;
  font-size: 0.875rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hiw-nav-cta:hover {
  background-color: var(--surface-color);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---- Hero ---- */
.hiw-hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-top: 15vh;
  padding-bottom: 40px;
  overflow: hidden;
  background-color: var(--background-color);
}
.hiw-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(180,160,220,0.07) 0px,
    rgba(180,160,220,0.07) 1px,
    transparent 1px,
    transparent 60px
  );
  pointer-events: none;
  z-index: 0;
}

[data-bs-theme="dark"] .hiw-hero {
  background: linear-gradient(160deg, #1a0a2e 0%, #321143 50%, #2a0e3a 100%);
}

/* Soft glow blobs */
.hiw-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  pointer-events: none;
}

.hiw-hero-blob--1 {
  width: 400px;
  height: 400px;
  background: #b99de8;
  top: -100px;
  left: -80px;
}

.hiw-hero-blob--2 {
  width: 300px;
  height: 300px;
  background: #edc8fa;
  bottom: -60px;
  right: -60px;
}

.hiw-hero-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2.2rem, 5vw, 3.2rem);

  font-weight: 800;
  color: var(--heading-color) !important;
  /* margin-bottom: 16px; */
}

.hiw-hero-sub {
  font-size: 0.9rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.7;
  /* margin: 0 30px; */
}


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

.hero-section {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 30px 0 0;
  overflow: hidden;
  background-color: var(--background-color);
}

/* ---- Background: subtle vertical stripe texture ---- */
.hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(180,160,220,0.07) 0px,
    rgba(180,160,220,0.07) 1px,
    transparent 0px,
    transparent 1px
  );
  pointer-events: none;
  z-index: 0;
}

/* Lavender radial blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.hero-blob--tl {
  width: 500px; height: 500px;
  background: rgba(185,157,232,0.35);
  top: -120px; left: -100px;
}
.hero-blob--tr {
  width: 400px; height: 400px;
  background: rgba(185,157,232,0.25);
  top: -80px; right: -80px;
}
.hero-blob--br {
  width: 300px; height: 300px;
  background: rgba(237,200,250,0.3);
  bottom: 100px; right: 60px;
}

/* ---- Content layer ---- */
.hero-content {
  position: relative;
  z-index: 2;
}

/* Badge pill */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(70,44,178,0.15);
  border-radius: 50px;
  padding: 7px 18px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #333;
  margin: 15px 0;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.hero-badge-dot {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.hero-badge-dot i { font-size: 0.6rem; color: #fff; }

/* Main title */
.hero-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 900;
  color: var(--heading-color) !important;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin:15px 0;
}


.hero-sub {
  font-family: 'Rubik', sans-serif;
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  color: var(--default-color);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto 30px;
}

[data-bs-theme="dark"] .hero-sub { color: #bbb; }

/* CTA buttons */
.hero-btns {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 30px;
}

.hero-btn-outline {
  background: rgba(255,255,255,0.9);
  border: 1.5px solid rgba(0,0,0,0.12);
  color: #111;
  border-radius: 50px;
  padding: 13px 30px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
}
.hero-btn-outline:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(70,44,178,0.1);

}

.hero-btn-solid {
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 13px 30px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 24px rgba(70,44,178,0.35);
}
.hero-btn-solid:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(70,44,178,0.4);
}


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

.hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

/* ---- Center phone ---- */
.hero-phone {
  position: relative;
  z-index: 3;
  width: clamp(220px, 30vw, 320px);
  filter: drop-shadow(0 40px 80px rgba(0,0,0,0.22));
  overflow: hidden;
}

.hero-phone img {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Floating cards ---- */
.hero-float {
  position: absolute;
  z-index: 4;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 14px 18px;
  backdrop-filter: blur(10px);
  animation: floatBob 4s ease-in-out infinite;
}

/* Analytics card — bottom left */
.hero-float--analytics {
  bottom: 80px;
  left: -20px;
  width: 190px;
  animation-delay: 0s;
}

/* Song card — right */
.hero-float--song {
  top: 60px;
  right: -10px;
  width: 160px;
  padding: 12px 14px;
  animation-delay: 1s;
}

/* Listeners badge — far left */
.hero-float--listeners {
  top: 40%;
  left: -60px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  animation-delay: 0.5s;
}

/* Fans badge — bottom right */
.hero-float--fans {
  bottom: 30px;
  right: -20px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  animation-delay: 1.5s;
}

/* Avatar circle — top right */
.hero-float--avatar {
  top: 10px;
  right: -55px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 0;
  overflow: hidden;
  background: #1a1a2e;
  display: flex;
  align-items: center;
  justify-content: center;
  animation-delay: 2s;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}

.hero-float--avatar .avatar-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
}

.avatar-ring {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 3px solid var(--accent-color);
  display: flex; align-items: center; justify-content: center;
}

.avatar-ring i { font-size: 1.2rem; color: var(--accent-color); }

.avatar-m {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #e05d3a;
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  position: absolute;
  bottom: 10px; right: 10px;
}

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

/* Analytics mini card internals */
.analytics-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.analytics-label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.6rem;
  color: #999;
}
.analytics-val {
  font-family: 'Kanit', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: #111;
}
.analytics-val--green { color: #22c55e; }
.analytics-val--purple { color: var(--accent-color); }
.analytics-bar-track {
  height: 4px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 10px;
}
.analytics-bar {
  height: 100%;
  border-radius: 99px;
}
.analytics-bar--purple { background: linear-gradient(90deg,#462CB2,#b99de8); width:72%; }
.analytics-bar--green  { background: linear-gradient(90deg,#22c55e,#86efac); width:56%; }
.analytics-bar--blue   { background: linear-gradient(90deg,#462CB2,#7b2fff); width:48%; }

/* Song card internals */
.song-img {
  width: 100%;
  height: 72px;
  border-radius: 10px;
  background: linear-gradient(135deg,#ff6b6b,#feca57,#48dbfb,#a29bfe);
  margin-bottom: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
}
.song-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}
.song-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.song-play {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.55rem;
}
.song-bar {
  flex: 1;
  height: 3px;
  background: #eee;
  border-radius: 99px;
  position: relative;
}
.song-bar::before {
  content:'';
  position:absolute;
  left:0; top:0;
  width: 45%;
  height: 100%;
  background: var(--accent-color);
  border-radius: 99px;
}

/* Listeners badge internals */
.listener-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.listener-icon i { font-size: 0.85rem; color: #fff; }
.listener-count {
  font-family: 'Kanit', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #111;
}

/* Fans badge internals */
.fans-avatars {
  display: flex;
}
.fan-av {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -6px;
  background: var(--accent-color);
  color: #fff;
  font-size: 0.5rem;
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.fan-av:first-child { margin-left: 0; }
.fan-av img { width:100%; height:100%; object-fit:cover; }
.fans-count {
  font-family: 'Kanit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: #111;
}
.fans-heart { color: #f59e0b; font-size: 0.85rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* Hide some floating elements on tablet */
@media (max-width: 991px) {
  .hero-float--listeners { display: none; }
  .hero-float--avatar    { display: none; }
  .hero-float--analytics { left: 0; width: 160px; }
  .hero-float--song      { right: 0; }
  .hero-phone { width: clamp(200px, 50vw, 280px); height: 100%; }
}

/* Mobile: stack vertically */
@media (max-width: 768px) {
  .hero-section { padding-top: 40px;}
  .hero-title {font-size: clamp(2rem, 5vw, 2.3rem); margin: 30px 0;   letter-spacing: 0em;}
  .hero-sub     { font-size: 0.8rem; margin-bottom: 30px;}
  .hero-btns    { flex-direction: column; align-items: center; margin-bottom: 40px;}
  .hero-btn-outline,
  .hero-btn-solid { width: 100%; max-width: 280px; text-align: center; }

  .hero-visual  { margin-top: 10px; }
  .hero-phone   { width: clamp(200px, 100vw, 370px); }
  .hero-float--analytics {
    bottom: 70px; left: -8px;
    width: 140px; padding: 10px 12px;
  }
  .hero-float--song {
    top: 30px; right: -8px;
    width: 130px;
  }
  .hero-float--fans {
    bottom: 70px; right: -8px;
    padding: 12px 12px;
  }
  .song-img { 
    height: 72px;
  }
  .hiw-hero-sub {
    font-size: 0.6rem;
  }
}

/* @media (min-width: 360px) {
  .hero-section { padding-top: px; height: 100vh;}

  .hero-title {
    font-size: 1.6rem;
    
  }

  .hero-sub {
    font-size: 0.75rem;
  }

  .hero-phone {
    width: 90vw;
  }

  .hero-float--analytics,
  .hero-float--song,
  .hero-float--fans {
    transform: scale(0.85);
  }
} */

/* =========================================================
   VIDEO SECTION
   ========================================================= */

.video-wrapper{
  max-width: 900px;
  margin: auto;
  border-radius: 20px;
}

.video-overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.25);
  transition:0.3s;
}

.play-btn{
  width:70px;
  height:70px;
  border-radius:50%;
  border:none;
  background: #ffff;
  color: #000;
  font-size:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:0.3s;
}

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

.video-overlay.hidden{
  opacity:0;
  pointer-events:none;
}
.showcase-section {
  background-color: var(--background-color);
}
/* ---- Pill banner ---- */
.showcase-pill {
  width: 90%;
  height: 120px;
  border-radius: 20px;
  background: linear-gradient(135deg, #462CB2 0%, #c084fc 100%);
}
 
/* ---- Carousel wrapper — bleeds to edges ---- */
.showcase-carousel-wrap {
  width: 100vw;
  overflow: hidden;
}
 
/* Allow items to peek outside stage */

.showcase-carousel-wrap .owl-carousel,
.showcase-carousel-wrap .owl-stage-outer {
  overflow: visible;
}
 
/* Each image item */
.showcase-img-wrap {
  border-radius: 20px;
  overflow: hidden;
}
 
.showcase-img {
  width: 100%;
  height: clamp(130px, 18vw, 235px);
  object-fit: fill;
  display: block;
  border-radius: 20px;
  transition: transform 0.35s ease;
}
 
.showcase-img-wrap:hover .showcase-img {
  transform: scale(1.03);
}
 
/* Hide dots + nav */
.showcase-carousel .owl-dots { display: none !important; }
.showcase-carousel .owl-nav  { display: none !important; }
 
/* Mobile */
@media (max-width: 767px) {
  .showcase-carousel-wrap { padding: 0 16px; }
  .showcase-pill           { height: 72px; }
}

/* =========================================================
   WHY SPLURGE SECTION — add to assets/css/main.css
   ========================================================= */

.why-section {
  background-color: var(--background-color);
  padding: 50px 0;
}

.why-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  /* margin-bottom: 10px; */
}

.why-subtitle {
  font-size: 0.95rem;
  color: var(--default-color);
  opacity: 0.65;
}

/* ---- Base card ---- */
.why-card {
  position: relative;
  border-radius: 20px;
  padding: 36px 32px 36px;
  height: 100%;
  overflow: hidden;
  /* Default: soft purple-blue tint */
  background: linear-gradient(135deg, #eae6f8 0%, #f3eeff 100%);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.why-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(70, 44, 178, 0.12);
}

/* Colour variants */
.why-card--pink {
  background: linear-gradient(135deg, #fce8f6 0%, #f8eeff 100%);
}

.why-card--lavender {
  background: linear-gradient(135deg, #ede8fb 0%, #fce8f8 100%);
}

.why-card--blue {
  background: linear-gradient(135deg, #e8eeff 0%, #ede8fb 100%);
}

[data-bs-theme="dark"] .why-card,
[data-bs-theme="dark"] .why-card--pink,
[data-bs-theme="dark"] .why-card--lavender,
[data-bs-theme="dark"] .why-card--blue {
  /* background: linear-gradient(135deg, #1a0a2e 0%, #2c1844 100%); */
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--default-color);
}

.why-card-bg-icon {
  position: absolute;
  top: -20px;
  right: -20px;
  width: 200px;
  height: 200px;
  opacity: 4%;
  pointer-events: none;
  overflow: hidden;
}

.why-card-bg-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: saturate(0) brightness(1.2);
}

/* ---- Foreground icon ---- */
.why-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  margin-bottom: 30px; /* pushes title to bottom half like the screenshot */
  position: relative;
  z-index: 1;
}

/* ---- Title ---- */
.why-card-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: #1a0a2e !important;
  margin-bottom: 10px;
  position: relative;
  z-index: 1;
}

/* ---- Body text ---- */
.why-card-text {
  font-size: 1rem;
  color: #1a0a2e;
  opacity: 0.7;
  line-height: 1.6;
  margin: 0;
  position: relative;
  z-index: 1;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .why-card {
    padding: 28px 24px;
  }

  .why-icon {
    margin-bottom: 18px;
  }

  .why-card-bg-icon {
    width: 130px;
    height: 130px;
  }
}


/* =========================================================
   HOW IT WORKS SECTION — add to assets/css/main.css
   ========================================================= */

.hiw-section {
  background-color: var(--background-color);
  padding: 50px 0;
  overflow: hidden;
}
/* ---- Background: subtle vertical stripe texture ---- */
.hiw-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    90deg,
    rgba(180,160,220,0.07) 0px,
    rgba(180,160,220,0.07) 1px,
    transparent 1px,
    transparent 60px
  );
  pointer-events: none;
  z-index: 0;
}

/* ---- Left: headings ---- */
.hiw-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 12px;
}

.hiw-subtitle {
  font-size: 0.95rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.65;
  max-width: 440px;
  margin-bottom: 40px;
}

/* ---- Steps list ---- */
.hiw-steps {
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.hiw-step {
  display: flex;
  align-items: flex-start;
  gap: 28px;
}

/* Icon pill */
.hiw-icon-wrap {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background-color: #eae4f7;
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hiw-step:hover .hiw-icon-wrap {
  background-color: var(--accent-color);
  color: #ffffff;
  transform: scale(1.08);
}

/* Colour variants */
.hiw-icon-wrap--pink   { background-color: #fce8f3; color: #c0467a; }
.hiw-icon-wrap--blue   { background-color: #e3e8ff; color: #3b4fd4; }
.hiw-icon-wrap--lavender { background-color: #ede8fb; color: #7b56d4; }

.hiw-step:hover .hiw-icon-wrap--pink    { background-color: #c0467a; color: #fff; }
.hiw-step:hover .hiw-icon-wrap--blue    { background-color: #3b4fd4; color: #fff; }
.hiw-step:hover .hiw-icon-wrap--lavender{ background-color: #7b56d4; color: #fff; }

[data-bs-theme="dark"] .hiw-icon-wrap          { background-color: rgba(70,44,178,0.25); }
[data-bs-theme="dark"] .hiw-icon-wrap--pink    { background-color: rgba(192,70,122,0.2); }
[data-bs-theme="dark"] .hiw-icon-wrap--blue    { background-color: rgba(59,79,212,0.2); }
[data-bs-theme="dark"] .hiw-icon-wrap--lavender{ background-color: rgba(123,86,212,0.2); }

.hiw-step-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 4px;
}

.hiw-step-text {
  font-size: 1.2rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.55;
  margin: 0;
}

/* =========================================================
   FOR CREATORS / FOR FANS SECTION — add to main.css
   ========================================================= */

.audience-section {
  background-color: var(--background-color);
}

.audience-card01 {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
  background-color: #f4f3fa;
}
.audience-card02 {
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
  background-color: #faf3fe;
}


/* [data-bs-theme="dark"] .audience-card01 {
  background-color:#432eab;
  border: 2px solid rgba(255, 255, 255, 0.08);
}
[data-bs-theme="dark"] .audience-card02 {
  background-color: #d29bf6;
  border: 2px solid rgba(255, 255, 255, 0.08);
} */

/* ---- Text side ---- */
.audience-content {
  padding: clamp(32px, 5vw, 56px);
}

/* ---- Icon ---- */
.audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: #ffffff;
  font-size: 1.3rem;
  margin-bottom: 24px;
}

/* Fans icon uses the softer lavender */
.audience-icon--fans {
  background-color: #b99de8;
}

/* ---- Title ---- */
.audience-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: #1a0a2e !important;
  margin-bottom: 12px;
}

/* ---- Body text ---- */
.audience-text {
  font-size: 1.2rem;
  color: #2a0e3a;
  opacity: 0.75;
  line-height: 1.65;
  max-width: 420px;
  margin: 0;
}

/* ---- Image side ---- */
.audience-image-wrap {
  overflow: hidden;
  /* min-height so card doesn't collapse if image is missing */
  /* min-height: 320px; */
  display: flex;
  align-items: stretch;
}

.audience-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
  /* Inset from card edge to match screenshot */
  margin: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}





/* =========================================================
   TRANSPARENT MONETIZATION SECTION
   ========================================================= */

.monetization-section {
  background: linear-gradient(160deg, #f0eaff 0%, #e8d5fa 50%, #f7f0ff 100%);
  padding: 90px 0 110px;
}

[data-bs-theme="dark"] .monetization-section {
  background: linear-gradient(160deg, #1a0a2e 0%, #321143 50%, #2a0e3a 100%);
}

.monetization-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  color: var(--heading-color) !important;
  margin-bottom: 12px;
}

.monetization-subtitle {
  font-size: 0.95rem;
  color: var(--default-color);
  opacity: 0.75;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Stat cards */
.stat-card {
  background: var(--contrast-color);
  border-radius: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-bs-theme="dark"] .stat-card { background: #38204a;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(70, 44, 178, 0.15);
}

.stat-value {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--default-color);
  opacity: 0.65;
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0.01em;
}

/* =========================================================
   CTA SECTION
   ========================================================= */

.cta-section {
  /* No background — sits on top of both the section above and footer below */
  /* background-color: transparent; */
  padding: 0 0 0;
  /* Pull up into the monetization section and push down into footer */
  margin-top: 90px;
  margin-bottom: -160px;
  position: relative;
  z-index: 10;
}

.cta-card {
  background: linear-gradient(135deg, #462CB2 0%, #7b2fff 50%, #b06aff 100%);
  border-radius: 24px;
  padding: 90px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Subtle grid overlay like in the screenshot */
.cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

.cta-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  color: #ffffff !important;
  max-width: 680px;
  margin: 0 auto 14px;
  line-height: 1.25;
  position: relative;
}

.cta-subtitle {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
  position: relative;
}

.cta-buttons {
  position: relative;
}

/* App store buttons */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  padding: 12px 24px;
  color: #ffffff;
  text-decoration: none;
  backdrop-filter: blur(8px);
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.store-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.5);
  color: #ffffff;
  transform: translateY(-2px);
}

/* Google Play SVG icon */
.store-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Apple icon via Bootstrap Icons */
.store-icon-apple {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}

.store-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.1;
}

.store-label {
  font-size: 0.65rem;
  opacity: 0.8;
  letter-spacing: 0.03em;
  text-transform: none;
}

.store-name {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}



/* =========================================================
   HOW IT WORKS PAGE — assets/css/how-it-works-page.css
   ========================================================= */

/* Central vertical dashed line */
.hiw-timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-image: repeating-linear-gradient(
    to bottom,
    var(--accent-color) 0px,
    var(--accent-color) 10px,
    transparent 10px,
    transparent 20px
  );
  opacity: 0.3;
  pointer-events: none;
}

@media (max-width: 767px) {
  .hiw-timeline-line { display: none; }
}

/* Step badge pill */
.hiw-step-badge {
  display: inline-block;
  background: rgba(70, 44, 178, 0.1);
  color: var(--accent-color);
  font-family: 'Rubik', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  margin-bottom: 14px;
}


.hiw-step-desc {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Checklist */
.hiw-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hiw-checklist li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--default-color);
  opacity: 0.75;
  font-family: 'Rubik', sans-serif;
}

.hiw-checklist li i {
  color: var(--accent-color);
  font-size: 1rem;
  flex-shrink: 0;
}

.hiw-visual-card {
  background: linear-gradient(135deg, #eae6f8 0%, #f3eeff 100%);
  border-radius: 20px;
  width: 100%;
  max-width: 340px;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hiw-visual-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(70, 44, 178, 0.12);
}

[data-bs-theme="dark"] .hiw-visual-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.hiw-visual-icon {
  width: 100px;
  height: 100px;
  object-fit: contain;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background-color: var(--background-color);
  font-family: 'Rubik', sans-serif;
  color: var(--default-color);
}

.footer-logo-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

.footer-brand-name {
  font-family: 'Kanit', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: 0.02em;
}

/* Subscribe form — white pill on light, surface-purple on dark */
.footer-subscribe-form {
  background: var(--contrast-color);
  border-radius: 50px;
  padding: 6px 6px 6px 16px;
  max-width: 480px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

[data-bs-theme="dark"] .footer-subscribe-form {
  background: var(--default-color);
}
[data-bs-theme="dark"] .form-control:focus {
  background: var(--default-color);
  }

.subscribe-icon {
  color: #999;
  font-size: 1.1rem;
  margin-right: 8px;
  flex-shrink: 0;
}

.subscribe-input {
  border: none;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  font-size: 0.875rem;
  color: var(--default-color);
  flex: 1;
  padding: 0;
}

.subscribe-input::placeholder {
  color: #aaa;
}

[data-bs-theme="dark"] .subscribe-input {
  color: var(--background-color);
}

.subscribe-btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 50px;
  padding: 10px 24px;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.subscribe-btn:hover {
  background-color: #321143;
  color: var(--contrast-color);
}

/* Footer nav headings */
.footer-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 18px;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.7;
  text-decoration: none;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-links a:hover {
  color: var(--accent-color);
  opacity: 1;
}

/* Divider + bottom bar */
.footer-bottom {
  border-top: 0.7px solid var(--default-color);
  padding: 20px 0;
}

.footer-copyright {
  font-size: 0.82rem;
  color: var(--default-color);
  opacity: 0.65;
}

/* Social icons — dark pill on light, accent pill on dark */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--default-color);
  color: var(--surface-color);
  font-size: 1rem;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.social-icon:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

/* Powered by bar */
.footer-powered {
  border-top: 1px solid var(--default-color);
  font-size: 0.7rem;
  color: var(--default-color);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

.footer-powered .powered-link {
  text-decoration: none;
  opacity: 1;
}

.powered-brand    { color: #7b2fff; font-weight: 600; }
.powered-type     { color: #a855f7; font-weight: 600; }
.powered-solutions{ color: #c084fc; font-weight: 600; }

.footer-powered .powered-link:hover .powered-brand,
.footer-powered .powered-link:hover .powered-type,
.footer-powered .powered-link:hover .powered-solutions {
  opacity: 0.75;
}

/* =========================================================
   SCROLL TOP BUTTON — add to assets/css/main.css
   ========================================================= */

.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 20px;
  bottom: 20px;
  z-index: 99999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--accent-color);
  color: #ffffff;
  font-size: 1.4rem;
  transition: all 0.4s ease;
  box-shadow: 0 4px 16px rgba(70, 44, 178, 0.35);
}

.scroll-top:hover {
  background-color: var(--surface-color);
  color: #ffffff;
  transform: translateY(-3px);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}


/* -----------------feature.html------------- */
/* =========================================================
   FEATURES GRID SECTION — add to assets/css/main.css
   ========================================================= */

.features-section {
  background-color: var(--background-color);
  padding: 80px 0;
}

/* ---- Feature card ---- */
.feat-card {
  background: linear-gradient(145deg, #eee8ff 0%, #f5f0ff 100%);
  border-radius: 20px;
  padding: 48px 32px 40px;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-bs-theme="dark"] .feat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.feat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(70, 44, 178, 0.13);
}

/* Icon container — circular tinted bg */
.feat-icon-wrap{
  width: 80px;
  height: 80px;
  /* background: var(--accent-color); */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  padding: 16px;
  /* box-shadow: 0 8px 24px rgba(70, 44, 178, 0.25); */
  transition: transform 0.25s ease;
}

.feat-card:hover .feat-icon-wrap {
  transform: scale(1.5);
  
}

.feat-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  color: var(--accent-color) !important;
  /* Invert icon to white so it shows on the purple bg */
  /* filter: brightness(0) invert(1); */
}

.feat-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 12px;
}

.feat-text {
  font-size: 0.845rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.65;
  margin: 0;
  max-width: 340px;
  margin-inline: auto;
}


/* =========================================================
   UNDERSTAND YOUR AUDIENCE SECTION
   ========================================================= */

.audience-insights-section {
  background: linear-gradient(160deg, #f0eaff 0%, #e8d5fa 50%, #f7f0ff 100%);
  padding: 90px 0 100px;
  overflow: hidden;
}

[data-bs-theme="dark"] .audience-insights-section {
  background: linear-gradient(160deg, #1a0a2e 0%, #321143 50%, #2a0e3a 100%);
}

/* ---- Left text ---- */
.aud-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  color: var(--heading-color) !important;
  margin-bottom: 14px;
}

.aud-subtitle {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 380px;
}

/* Feature items list */
.aud-features {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.aud-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.aud-feat-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  flex-shrink: 0;
}

.aud-feat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.aud-feat-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 4px;
}

.aud-feat-text {
  font-size: 0.82rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.55;
  margin: 0;
}

/* ---- Right: analytics card ---- */
.aud-analytics-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  box-shadow: 0 20px 60px rgba(70, 44, 178, 0.12);
}

[data-bs-theme="dark"] .aud-analytics-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Individual metric row */
.aud-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.aud-metric-label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.82rem;
  color: #888;
}

[data-bs-theme="dark"] .aud-metric-label {
  color: #aaa;
}

.aud-metric-value {
  font-family: 'Kanit', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--heading-color);
}

.aud-metric-value--green { color: #22c55e; }
.aud-metric-value--blue  { color: #462CB2; }

/* Progress bar */
.aud-bar-track {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
}

[data-bs-theme="dark"] .aud-bar-track {
  background: rgba(255, 255, 255, 0.08);
}

.aud-bar {
  height: 100%;
  border-radius: 99px;
  /* Animate bar fill on load */
  animation: barGrow 1.2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes barGrow {
  from { width: 0 !important; }
}

.aud-bar--purple { background: linear-gradient(90deg, #462CB2, #b99de8); }
.aud-bar--green  { background: linear-gradient(90deg, #22c55e, #86efac); }
.aud-bar--blue   { background: linear-gradient(90deg, #462CB2, #7b2fff); }

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .feat-card {
    padding: 36px 24px 32px;
  }

  .aud-analytics-card {
    padding: 28px 24px;
    gap: 28px;
  }
}


/* ----------------about.html--------------- */
/* =========================================================
   ABOUT PAGE SECTIONS — add to assets/css/main.css
   ========================================================= */


/* =========================================================
   SHARED
   ========================================================= */

.about-section-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 14px;
}

.about-section-text {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.75;
  margin: 0;
}

/* Top icon circle */
.about-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #edc8fa;
  padding: 14px;
}

.about-top-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(600%) hue-rotate(240deg);
}

.about-top-icon--accent {
  filter: brightness(0) saturate(100%) invert(35%) sepia(90%) saturate(800%) hue-rotate(220deg);
}


/* =========================================================
   VISION
   ========================================================= */

.about-vision-section {
  background-color: var(--background-color);
  padding: 80px 0 60px;
}


/* =========================================================
   MISSION
   ========================================================= */

.about-mission-section {
  background-color: var(--background-color);
  padding: 40px 0 80px;
}

.mission-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 24px;
}

.mission-item-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 4px;
}

.mission-item-text {
  font-size: 0.85rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.6;
  margin: 0;
}


/* =========================================================
   OUR STORY
   ========================================================= */

.about-story-section {
  background-color: var(--background-color);
  padding: 80px 0;
}

.about-story-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.about-story-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.65;
}

/* ---- Timeline ---- */
.story-timeline {
  max-width: 640px;
  margin: 0 auto;
}

.story-step {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}

/* Left column: badge + connector line */
.story-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

/* Numbered badge */
.story-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(145deg, #6b3ff5, #462CB2);
  color: #ffffff;
  font-family: 'Kanit', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 8px 20px rgba(70, 44, 178, 0.3);
  position: relative;
  z-index: 1;
}

/* Gradient variants per step (darker as you go) */
.story-badge--2 { background: linear-gradient(145deg, #5a30e8, #3a1fa8); }
.story-badge--3 { background: linear-gradient(145deg, #4a25d4, #2e1690); }
.story-badge--4 { background: linear-gradient(145deg, #3a1ab8, #200e78); }

/* Vertical connector line below badge */
.story-connector {
  width: 2px;
  flex: 1;
  min-height: 60px;
  background: linear-gradient(to bottom, rgba(70,44,178,0.3), rgba(70,44,178,0.05));
  margin: 8px 0;
}

/* Step body */
.story-step-body {
  padding-bottom: 40px;
  flex: 1;
}

.story-step--last .story-step-body {
  padding-bottom: 0;
}

.story-step-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 8px;
  padding-top: 14px; /* align with badge center */
}

.story-step-text {
  font-size: 0.845rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.65;
  margin: 0;
}


/* =========================================================
   CORE VALUES
   ========================================================= */

.about-values-section {
  background: linear-gradient(160deg, #f0eaff 0%, #e8d5fa 50%, #f7f0ff 100%);
  padding: 90px 0 100px;
}

[data-bs-theme="dark"] .about-values-section {
  background: linear-gradient(160deg, #1a0a2e 0%, #321143 50%, #2a0e3a 100%);
}

.about-values-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.4rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.about-values-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.65;
}

/* Value card */
.value-card {
  padding: 12px 8px;
}

.value-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.value-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Match the purple icon tint in the screenshot */
  filter: brightness(0) saturate(100%) invert(28%) sepia(70%) saturate(700%) hue-rotate(240deg) opacity(0.85);
}

.value-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 8px;
}

.value-text {
  font-size: 0.78rem;
  color: var(--default-color);
  opacity: 0.65;
  line-height: 1.6;
  margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
  .story-badge {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
    border-radius: 12px;
  }

  .value-card {
    padding: 8px 4px;
  }
}



/* ----------contact page -------- */

/* =========================================================
   CREATORS PAGE SECTIONS — add to assets/css/main.css
   ========================================================= */


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

.creators-hero-section {
  background-color: var(--background-color);
  padding: 80px 0 60px;
  overflow: hidden;
}

.creators-hero-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--heading-color) !important;
  line-height: 1.15;
  margin-bottom: 18px;
}

.creators-hero-text {
  font-size: 0.9rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 8px;
}

.creators-hero-btn {
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 50px;
  padding: 11px 28px;
  font-size: 0.875rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.creators-hero-btn:hover {
  background-color: var(--default-color);
  color: #ffffff;
  transform: translateY(-2px);
}

.creators-hero-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
}

/* Gradient fade on left edge of the image */
.creators-hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--background-color) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}


/* =========================================================
   WHY CREATORS CHOOSE SPLURGE
   ========================================================= */

.why-creators-section {
  background-color: var(--background-color);
  padding: 60px 0 80px;
}

.wc-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.wc-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.65;
}

.wc-card {
  background: linear-gradient(145deg, #eae6f8 0%, #f5f0ff 100%);
  border-radius: 20px;
  padding: 40px 28px 36px;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-bs-theme="dark"] .wc-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.wc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(70, 44, 178, 0.13);
}

.wc-icon-wrap {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  margin: 0 auto 22px;
  box-shadow: 0 8px 20px rgba(70, 44, 178, 0.25);
  transition: transform 0.25s ease;
}

.wc-card:hover .wc-icon-wrap {
  transform: scale(1.08);
}

.wc-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.wc-card-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 12px;
}

.wc-card-text {
  font-size: 0.83rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.65;
  margin: 0;
}


/* =========================================================
   TRANSPARENT REVENUE SHARING
   ========================================================= */

.revenue-section {
  background: linear-gradient(160deg, #f0eaff 0%, #e8d5fa 50%, #f7f0ff 100%);
  padding: 90px 0 100px;
}

[data-bs-theme="dark"] .revenue-section {
  background: linear-gradient(160deg, #1a0a2e 0%, #321143 50%, #2a0e3a 100%);
}

.rev-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 800;
  color: var(--heading-color) !important;
  margin-bottom: 14px;
  line-height: 1.2;
}

.rev-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 380px;
}

/* Feature list */
.rev-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rev-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.rev-feat-icon {
  font-size: 1.2rem;
  color: rgba(70, 44, 178, 0.3);
  flex-shrink: 0;
  padding-top: 2px;
  transition: color 0.2s ease;
}

.rev-feat-icon--active,
.rev-feature-item:hover .rev-feat-icon {
  color: var(--accent-color);
}

.rev-feat-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 3px;
}

.rev-feat-text {
  font-size: 0.82rem;
  color: var(--default-color);
  opacity: 0.65;
  line-height: 1.55;
  margin: 0;
}

/* Earnings card */
.rev-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px 36px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 20px 60px rgba(70, 44, 178, 0.1);
}

[data-bs-theme="dark"] .rev-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.rev-card-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin: 0;
  text-align: center;
}

.rev-bar-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.rev-bar-label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.82rem;
  color: #888;
}

.rev-bar-value {
  font-family: 'Kanit', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
}

.rev-bar-value--green  { color: #22c55e; }
.rev-bar-value--muted  { color: #aaa; }

.rev-bar-track {
  width: 100%;
  height: 6px;
  background: #f0f0f0;
  border-radius: 99px;
  overflow: hidden;
}

[data-bs-theme="dark"] .rev-bar-track { background: rgba(255,255,255,0.08); }

.rev-bar {
  height: 100%;
  border-radius: 99px;
  animation: barGrow 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.rev-bar--green { background: linear-gradient(90deg, #22c55e, #86efac); }
.rev-bar--muted { background: #ddd; }


/* =========================================================
   EVERYTHING YOU NEED — MARQUEE
   ========================================================= */

.creator-tools-section {
  background-color: var(--background-color);
  padding: 80px 0 90px;
  overflow: hidden;
}

.ct-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.ct-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.65;
}



/* Individual marquee card */
.marquee-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: linear-gradient(145deg, #eae6f8 0%, #f5f0ff 100%);
  border-radius: 18px;
  padding: 24px 24px;
  width: 350px;
  height: 120px;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}

[data-bs-theme="dark"] .marquee-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.marquee-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(70, 44, 178, 0.12);
}

/* Icon in marquee card */
.mc-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  flex-shrink: 0;
}

.mc-icon-wrap--pink   { background: #c0467a; }
.mc-icon-wrap--blue   { background: #3b4fd4; }
.mc-icon-wrap--purple { background: #7b56d4; }

.mc-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.mc-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 5px;
}

.mc-text {
  font-size: 0.78rem;
  color: var(--default-color);
  opacity: 0.65;
  line-height: 1.55;
  margin: 0;
}

.creator-tools-section {
  background-color: var(--background-color);
  padding: 80px 0 90px;
}


/* Card margin so hover shadow isn't clipped */
.ct-carousel .marquee-card {
  margin: 8px 0 16px;
}

/* Hide dots and nav */
.ct-carousel .owl-dots { display: none !important; }
.ct-carousel .owl-nav  { display: none !important; }

.creator-tools-section .owl-carousel {
  overflow: visible;
}

/* But clip at the section level so it doesn't bleed into other sections */
.creator-tools-section {
  overflow: hidden;
}

/* Fade the right edge so the half-card peeks softly */
.creator-tools-section::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--background-color));
  pointer-events: none;
  z-index: 2;
}

.creator-tools-section {
  position: relative;
}



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

.fan-hero-section {
  background-color: var(--background-color);
  padding: 80px 0 60px;
  overflow: hidden;
}

.fan-hero-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--heading-color) !important;
  line-height: 1.15;
  margin-bottom: 16px;
}

.fan-hero-text {
  font-size: 0.9rem;
  color: var(--default-color);
  opacity: 0.7;
  line-height: 1.7;
  max-width: 380px;
  margin-bottom: 8px;
}

.fan-hero-btn {
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 50px;
  padding: 11px 28px;
  font-size: 0.875rem;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  border: none;
  transition: background 0.2s ease, transform 0.2s ease;
}

.fan-hero-btn:hover {
  background-color: var(--default-color);
  color: #ffffff;
  transform: translateY(-2px);
}

.fan-hero-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.fan-hero-img-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--background-color) 0%, transparent 30%);
  z-index: 1;
  pointer-events: none;
}



/* =========================================================
   WHY FANS — OWL CAROUSEL
   ========================================================= */

.why-fans-section {
  background-color: var(--background-color);
  padding: 60px 0 80px;
}

.wf-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.wf-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.65;
}

/* Owl carousel card */
.wf-card {
  background: linear-gradient(145deg, #eae6f8 0%, #f5f0ff 100%);
  border-radius: 20px;
  padding: 40px 24px 36px;
  height: 100%;
  margin: 8px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

[data-bs-theme="dark"] .wf-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.wf-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(70, 44, 178, 0.13);
}

.wf-icon-wrap {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0 auto 24px;
  box-shadow: 0 8px 20px rgba(70, 44, 178, 0.25);
  transition: transform 0.25s ease;
}

.wf-card:hover .wf-icon-wrap { transform: scale(1.08); }

.wf-icon-wrap--pink    { background: #c0467a; box-shadow: 0 8px 20px rgba(192,70,122,0.25); }
.wf-icon-wrap--lavender{ background: #7b56d4; box-shadow: 0 8px 20px rgba(123,86,212,0.25); }

.wf-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.wf-card-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 12px;
}

.wf-card-text {
  font-size: 0.83rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.65;
  margin: 0;
}

/* Owl nav dots override */
.wf-carousel .owl-dots {
  margin-top: 28px;
}

.wf-carousel .owl-dot span {
  background: rgba(70, 44, 178, 0.2) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: background 0.2s ease, width 0.2s ease !important;
}

.wf-carousel .owl-dot.active span {
  background: var(--accent-color) !important;
  width: 24px !important;
  border-radius: 99px !important;
}

/* Hide Owl prev/next arrows */
.wf-carousel .owl-nav { display: none !important; }


/* =========================================================
   ENGAGE BEYOND STREAMING
   ========================================================= */

.engage-section {
  background: linear-gradient(160deg, #f0eaff 0%, #e8d5fa 50%, #f7f0ff 100%);
  padding: 90px 0 100px;
}

[data-bs-theme="dark"] .engage-section {
  background: linear-gradient(160deg, #1a0a2e 0%, #321143 50%, #2a0e3a 100%);
}

.eng-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 800;
  color: var(--heading-color) !important;
  margin-bottom: 14px;
  line-height: 1.2;
}

.eng-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.7;
  margin-bottom: 36px;
  max-width: 380px;
}

.eng-features {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.eng-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.eng-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 11px;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(70, 44, 178, 0.25);
}

.eng-icon--pink    { background: #c0467a; box-shadow: 0 6px 16px rgba(192,70,122,0.25); }
.eng-icon--blue    { background: #3b4fd4; box-shadow: 0 6px 16px rgba(59,79,212,0.25); }
.eng-icon--lavender{ background: #7b56d4; box-shadow: 0 6px 16px rgba(123,86,212,0.25); }

.eng-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.eng-item-title {
  font-family: 'Kanit', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 4px;
}

.eng-item-text {
  font-size: 0.82rem;
  color: var(--default-color);
  opacity: 0.68;
  line-height: 1.55;
  margin: 0;
}

/* Right image */
.engage-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

/* Purple tint overlay on image */
.engage-img-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(70,44,178,0.15) 0%, transparent 60%);
  border-radius: 24px;
  pointer-events: none;
}

.engage-img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  border-radius: 24px;
}

@media (max-width: 767px) {
  .engage-img { height: 280px; }
}


/* =========================================================
   MULTIPLE WAYS TO SHOW SUPPORT
   ========================================================= */

.support-section {
  background-color: var(--background-color);
  padding: 90px 0 100px;
}

.sup-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 10px;
}

.sup-sub {
  font-size: 0.875rem;
  color: var(--default-color);
  opacity: 0.65;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Support card */
.sup-card {
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(145deg, #eae6f8 0%, #f5f0ff 100%);
  border-radius: 20px;
  padding: 28px 28px;
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sup-card--pink {
  background: linear-gradient(145deg, #fce8f6 0%, #f8eeff 100%);
}

[data-bs-theme="dark"] .sup-card,
[data-bs-theme="dark"] .sup-card--pink {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
}

.sup-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(70, 44, 178, 0.12);
}

.sup-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}

.sup-card:hover .sup-icon-wrap { transform: scale(1.08); }

.sup-icon-wrap--purple {
  background: var(--accent-color);
  box-shadow: 0 8px 20px rgba(70, 44, 178, 0.3);
}

.sup-icon-wrap--pink {
  background: #c0467a;
  box-shadow: 0 8px 20px rgba(192, 70, 122, 0.25);
}

.sup-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.sup-card-title {
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--heading-color) !important;
  margin-bottom: 4px;
}

.sup-card-text {
  font-size: 0.82rem;
  color: var(--default-color);
  opacity: 0.65;
  line-height: 1.5;
  margin: 0;
}

.sup-carousel .sup-card {
  margin: 8px 0 16px;
}

/* Owl dots — match site style */
.sup-carousel .owl-dots {
  margin-top: 28px;
}

.sup-carousel .owl-dot span {
  background: rgba(70, 44, 178, 0.2) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  transition: background 0.2s ease, width 0.2s ease !important;
}

.sup-carousel .owl-dot.active span {
  background: var(--accent-color) !important;
  width: 24px !important;
  border-radius: 99px !important;
}

.sup-carousel .owl-nav { display: none !important; }



/* ----------trust and security page----------- */

.security-section{
  background: var(--background-color);
  color: var(--default-color);
}

/* Heading */

.security-title{
  font-family: var(--heading-font) !important;
  font-size: 2.5rem;
  font-weight: 600;
}

.security-text{
  max-width: 420px;
  margin: 15px 0 25px;
  font-family: 'Kanit', sans-serif;
}

/* Button */

.security-btn{
  background: linear-gradient(135deg,var(--accent-color),var(--surface-color));
  color: var(--contrast-color);
  border-radius: 40px;
  padding: 10px 24px;
  font-weight: 500;
  border: none;
  transition: background 0.3s ease, transform 0.3s ease;
  margin-bottom: 20px;
}

/* Image */

.security-image-wrapper{
  position: relative;
  display: inline-block;
}

.security-image{
  border-radius: 20px;
  position: relative;
  z-index: 2;
}

.security-image-bg{
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg,var(--accent-color),var(--surface-color));
  border-radius: 20px;
  transform: translate(-20px,20px);
  z-index: 1;
}

/* Section title */

.security-subtitle{
  font-weight: 600;
  color: var(--heading-color);
}

.security-subtext{
  max-width: 500px;
  margin: auto;
  font-size: 0.9rem;
}

/* Cards */

.security-card{
  background: rgba(255,255,255,0.4);
  padding: 35px;
  border-radius: 20px;
  height: 100%;
  transition: 0.3s;
}

[data-bs-theme="dark"] .security-card{
  background: rgba(255,255,255,0.05);
}

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

.security-icon{
  height: 70px;
  margin-bottom: 15px;
  color: var(--accent-color);
}


/* ------------partnerships----------- */
.section-title{
font-family: var(--heading-font);
font-size: 2rem;
color: var(--heading-color);
}

.section-sub{
max-width: 600px;
margin: auto;
font-size: .9rem;
}

/* PARTNER CARDS */

.partner-card{
background: rgba(255,255,255,0.4);
padding:40px 30px;
border-radius:20px;
transition:.3s;
}

[data-bs-theme="dark"] .partner-card{
background: rgba(255,255,255,0.05);
}

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

.highlight-purple{
background: rgba(180,150,240,0.25);
}

.highlight-pink{
background: rgba(192, 70, 122, 0.25);
}

.partner-icon{
font-size: clamp(2rem, 4vw, 3rem);
width:48px;
margin-bottom:20px;
}

/* SCALE SECTION */

.scale-section{
background: linear-gradient(135deg,#eeeeee,#e6d8ff);
}

[data-bs-theme="dark"] .scale-section{
background: linear-gradient(135deg,#321143,#462CB2);
}

.scale-title{
font-family: var(--heading-font);
margin-bottom:20px;
}

.scale-feature{
display:flex;
gap:15px;
margin-top:25px;
}

.feature-icon{
width:40px;
height:40px;
display:flex;
align-items:center;
justify-content:center;
background:var(--surface-color);
border-radius:10px;
}

/* STATS */

.stat-card{
background:rgba(255,255,255,0.7);
padding:30px;
border-radius:16px;
text-align:center;
}

[data-bs-theme="dark"] .stat-card{
background: rgba(255,255,255,0.08);
}

.stat-card h3{
color:var(--accent-color);
font-weight:600;
}

/* PARTNERSHIP BOX */

.partner-box{
background: var(--background-color);
padding:40px;
border-radius:20px;
}

[data-bs-theme="dark"] .partner-box{
background: rgba(255,255,255,0.05);
}

.partner-box ul{
margin-top:15px;
padding-left:20px;
}


/* -------------waitlist------------ */

.wl-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--heading-color);
}

.wl-sub {
  color: var(--default-color);
  opacity: .7;
  line-height: 1.75;
}

.wl-label-muted {
  font-size: .8rem;
  color: var(--default-color);
  opacity: .55;
}

.wl-stat {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.wl-stat--purple {
  color: #462CB2;
}

[data-bs-theme="dark"] .wl-stat--purple {
  color: #c084fc;
}

.wl-stat--lavender {
  color: #b99de8;
}

.wl-card {
  background: #f5f2ff;
}

[data-bs-theme="dark"] .wl-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
}

.wl-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(70, 44, 178, .1);
  background: #fff;
}

[data-bs-theme="dark"] .wl-input {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

[data-bs-theme="dark"] .wl-input:focus {
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.wl-role-card {
  background: #fff;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color .2s;
}

.wl-role-card:hover {
  border-color: rgba(70, 44, 178, .3);
}

.wl-role-card--active {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(70, 44, 178, .08);
}

.wl-role-card--active .wl-role-title {
  color: var(--accent-color);
}

[data-bs-theme="dark"] .wl-role-card {
  background: rgba(255, 255, 255, .06);
}

.wl-role-icon {
  width: 36px;
  height: 36px;
  background: #1a1a2e;
  color: #fff;
  font-size: .85rem;
}

.wl-role-icon--purple {
  background: var(--accent-color);
}

.wl-submit-btn {
  background: linear-gradient(135deg, #6b3ff5, #c084fc);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  font-size: 1rem;
  border: none;
  box-shadow: 0 8px 24px rgba(107, 63, 245, .35);
  transition: opacity .2s, transform .2s;
}

.wl-submit-btn:hover {
  opacity: .9;
  transform: translateY(-2px);
  color: #fff;
}