/* ================= Base ================= */
:root{
  --bg:#000;
  --cream:#FFFFE3;
  --text:#ffffff;
  --muted:#dfdfdf;
  --overlay: rgba(0,0,0,.78);
  --radius: 14px;

  /* Figma desktop canvas baseline (used to compute absolute offsets) */
  --canvas-w: 1920;
}

/* Page */
*{box-sizing:border-box}
html, body {
  height: auto;          /* allow body to grow with content */
  margin: 0;
  padding: 0;
}

body{
  margin:0;
  color:var(--text);
  font-family:"GeneralSans-Regular";
    background-image: linear-gradient(
    180deg,
    rgba(0,0,0,0.30) 50%,
    rgba(138,56,245,0.20) 100%
  );
  background-color: black;
  background-repeat: no-repeat;
  background-attachment: scroll;   /* <-- important: allow it to move with page scroll */
  background-position: top center;
  /* ensure the gradient stretches to the body's full height */
  background-size: 100% 100%;
}
main {
  flex: 1; /* ensures main content fills height */
}

#page-loader {
  position: fixed;
  inset: 0;
  background: #000; /* or your theme color */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999999999;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.btn, .btn-large, .btn-small {
    text-decoration: none;
    color: #fff;
    background-color: transparent !important;
    text-align: center;
    height: unset;
        line-height: 22px;
        text-transform: none;
    letter-spacing: .5px;
    -webkit-transition: background-color .2s 
ease-out;
    transition: background-color .2s 
ease-out;
    cursor: pointer;
}

/* Utility to convert figma px → vw that scales with screen width */
@media (min-width:1200px){
  .vw { /* not used directly; calculation happens in rules below */ }
}

/* =============== NAV (matches tiny top-bar in figma) =============== */
.nav-wrap{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: #000;
  padding-block: 10px;
}
.nav-inner{
  width: min(1200px, 92%);
  margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-expand-lg .navbar-nav {
      flex-direction: row;
      align-items: center;
  }
.brand{
  font-weight:700;
  letter-spacing:.2px;
  font-size: 14px;
  opacity:.92;
}
.logo{
    position: absolute;
    top: 3%;
    left: 3%;
    color: white;
    z-index: 99999999;
    font-size: 44px;
  font-family: var(--font-mono);
  }
  .logo-img{
      height: 50px;
      /* filter: invert(100); */
  }
  .navbar{
    width: 100% !important;
    top: 4%;
    z-index: 999999;
    padding: 0% 2%;
    box-shadow: none;
    text-shadow: none;
  }
  .navbar-expand-lg .navbar-nav .nav-link{
    font-size: 24px;
    font-family: 'DM Sans';
    font-weight: 400;
    padding: 10px 15px;
    color: white;
    word-wrap: break-word;
  }

  .navbar-nav .nav-link:hover{
    text-decoration: none;
    color: #fb2525;
  }
 .navbar-nav .nav-item .active{
    text-decoration: none;
    color: #fb2525;
  }
.contactus_btn{
  border: 1px solid #ffffff;
  border-radius: 20px;
  font-size: 22px !important;
}
.contactus_btn:hover{
  border: 1px solid #fb2525;
}

.navbar-toggler-icon{
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    /* background-image: url('../menu.svg'); */
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

@media(max-width: 767px){
  .navbar {
        width: 96% !important;
        top: 1%;
        padding: 0% 4%;
        z-index: 999999;
        box-shadow: none;
        text-shadow: none;
}
.navbar-toggler{
    right: 0%;
    position: absolute;
    top: 1%;
    padding: 1%;
    background: none !important;
}
.navbar-expand-lg .navbar-nav{
    flex-direction: column !important;
}
.navbar-collapse{
  margin-top: 1%;
  background: black;
  padding: 5%;
  height: 65vh;
}
.nav-item{
  margin: 5% 5%;
}
  .logo{
    font-size: 30px;
  }
  .logo-img{
    height: 30px;
  }
}
.menu-btn{
  background:none; border:none; color:#fff; font-size:14px; cursor:pointer;
  opacity:.9;
}
.menu-btn:hover{ opacity:1 }

.menu-btn{
  position: absolute;
  top: 3% !important;
  right: 2.2% !important;
  z-index: 99999999;
  background: none;
  border: none;
}
.menu-btn span{
  font-size: 32px;
    font-family: var(--font-mono);
  color: white;
}
/* ===================== SHARED CAT HEADER ===================== */
/* Used on all pages: logo on left, centered pill nav.
   Property values are written explicitly so they survive any global
   element-level rules from third-party CSS (e.g. Materialize on index.html
   sets `nav { height: 56px; line-height: 56px; width: 100% }`). */
.cat-header,
.cat-header * {
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  box-sizing: border-box;
}
.cat-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 18px 48px;
  background: #000;
  width: 100%;
  height: auto;
  margin: 0;
  line-height: normal;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
/* Subtle shadow once the page is scrolled (applies to every page) */
.cat-header.scrolled {
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* Compensate for the fixed header so first-section content isn't hidden under it */
body { padding-top: 78px; }
@media (max-width: 768px) { body { padding-top: 64px; } }

/* Home page uses the default solid header + body padding-top — no transparent
   overlay, since the new home design has a content hero, not a full-screen video. */
.cat-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  justify-self: start;
  height: auto;
  line-height: normal;
}
.cat-logo:hover { text-decoration: none; }
.cat-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.cat-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  background: #050505;
  width: auto;
  height: auto;
  line-height: normal;
  color: inherit;
  margin: 0;
  list-style: none;
}
.cat-header .cat-nav a {
  font-size: 19px;
  color: #d8d8d8;
  text-decoration: none;
  padding: 8px 22px;
  border-radius: 999px;
  transition: color .2s ease;
  font-family: 'Figtree', sans-serif;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
  height: auto;
  background: transparent;
}
.cat-header .cat-nav a:hover { color: #fff; background: transparent; }
.cat-header .cat-nav a.active {
  color: #FB6B2B;
  text-decoration: underline;
  text-underline-offset: 4px;
  background: transparent;
}

/* "Connect with us" button on the right side of the header */
.cat-header .cat-cta {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  padding: 10px 22px;
  border-radius: 999px;
  border: 1px solid #FB6B2B;
  color: #FB6B2B;
  font-size: 15px;
  font-weight: 500;
  font-family: 'Figtree', sans-serif;
  text-decoration: none;
  background: transparent;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease;
}
.cat-header .cat-cta:hover {
  background: rgba(251, 107, 43, 0.1);
  color: #FB6B2B;
  text-decoration: none;
}

.cat-header .cat-mobile-toggle {
  display: none;
  background: none;
  background-image: none;
  border: 0;
  outline: 0;
  box-shadow: none;
  text-shadow: none;
  width: 40px;
  height: 40px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
  justify-self: end;
  cursor: pointer;
  padding: 0;
  margin: 0;
  text-transform: none;
}
.cat-header .cat-mobile-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.cat-header .cat-mobile-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.cat-header .cat-mobile-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.cat-header .cat-mobile-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
  .cat-logo-img{
    height: 32px;
  }
  .cat-header {
    grid-template-columns: 1fr auto auto;
    gap: 10px;
    padding: 14px 14px;
    position: fixed;
  }
  .cat-header .cat-mobile-toggle { display: flex; }
  .cat-header .cat-cta {
    padding: 8px 14px;
    font-size: 12px;
  }
  .cat-header .cat-nav {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 16px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border-radius: 14px;
    background: #0a0a0a;
    border: 1px solid #2a2a2a;
    min-width: 200px;
    z-index: 200;
    width: auto;
    height: auto;
  }
  .cat-header .cat-nav.open { display: flex; }
  .cat-header .cat-nav a {
    font-size: 16px;
    padding: 10px 14px;
    border-radius: 8px;
  }
  .cat-header .cat-nav a.active {
    text-decoration: none;
    background: rgba(251, 107, 43, 0.1);
  }
}

/* ============================ HERO ============================ */
.hero{
  position: relative;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter: brightness(.7) contrast(1);
  z-index:-2;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.75) 45%, rgba(0,0,0,.82) 100%);
  z-index:0;
}

/* Frame that holds hero texts; absolute to match figma placement on desktop */
.hero-frame{
  position: absolute;
  justify-self: anchor-center;
  top: 30%;
}
.eyebrow{
  color: #FFFFE3;
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 .4rem 0;
  text-align: center;
  line-height: 44px;
  word-break: break-all;
}
.hero-title{
  color: #FFFFE3;
  font-weight: 600;
  line-height: 200px;
  font-size: 200px;
  margin: 0 0 .35rem 0;
  word-break: break-all;
}
.hero-sub{
  color: #FFFFE3;
  font-family:"Instrument Serif", serif;
  max-width: 100%;
  font-size: 34px;
  margin: 0;
  text-align: center;
}

@media (min-width: 1350px){
.eyebrow{
  color: #FFFFE3;
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 .4rem 0;
  text-align: center;
  line-height: 44px;
  word-break: break-all;
}
.hero-title{
  color: #FFFFE3;
  font-weight: 600;
  line-height: 155px;
  font-size: 155px;
  margin: 0 0 .35rem 0;
  word-break: break-all;
}
.hero-sub{
  color: #FFFFE3;
  font-family:"Instrument Serif", serif;
  max-width: 100%;
  font-size: 24px;
  margin: 0;
  text-align: center;
}
.languages-items {
    margin-top: 3.5%;
    width: 93% !important;
    max-width: 93% !important;
}
}

@media (min-width: 1400px){
.eyebrow{
  color: #FFFFE3;
  font-size: 54px;
  font-weight: 600;
  margin: 0 0 .4rem 0;
  text-align: center;
  line-height: 54px;
  word-break: break-all;
}
.hero-title{
  color: #FFFFE3;
  font-weight: 600;
  line-height: 220px;
  font-size: 220px;
  margin: 0 0 .35rem 0;
  word-break: break-all;
}
.hero-sub{
  color: #FFFFE3;
  font-family:"Instrument Serif", serif;
  max-width: 100%;
  font-size: 34px;
  margin: 0;
  text-align: center;
}
}
@media (min-width: 1700px){
.eyebrow{
  color: #FFFFE3;
  font-size: 64px;
  font-weight: 600;
  margin: 0 0 .4rem 0;
  text-align: center;
  line-height: 64px;
  word-break: break-all;
}
.hero-title{
  color: #FFFFE3;
  font-weight: 600;
  line-height: 260px;
  font-size: 260px;
  margin: 0 0 .35rem 0;
  word-break: break-all;
}
.hero-sub{
  color: #FFFFE3;
  font-family:"Instrument Serif", serif;
  max-width: 100%;
  font-size: 44px;
  margin: 0;
  text-align: center;
}

}
/* =================== STORIES SECTION =================== */
.stories{
  position: relative;
  padding-block: clamp(48px, 8vw, 96px);
}
.stories-frame{
  /* Centered block constrained like figma */
  width: 90%;
  margin-inline: auto;
  text-align: center;
}
.stories-title{
  color: var(--cream);
  font-weight: 600;
  font-size: 48px;
  word-break: break-all;
  max-width: 25ch;
  margin: 0 auto 20px;
}
.stories-sub{
  font-family:"Instrument Serif", serif;
  color: var(--cream);
  opacity:.9;
  font-size: 32px;
  max-width: 50ch;
  margin: 0 auto 20px;
}
.btn-ghost{
  display:inline-block;
  color:#fff;
  border:1px solid rgba(255,255,255,.6);
  border-radius: 999px;
  padding: 1rem 1.2rem;
  text-decoration:none;
  font-size: 20px;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.btn-ghost:hover{
  background: rgba(255,255,255,.08);
  border-color:#fff;
  transform: translateY(-1px);
}
.languages-items{
  margin-top: 3.5%;width: 85%; max-width: 85%;
  justify-content: center; align-items: flex-start; gap: 64px; display: inline-flex; flex-wrap: wrap; align-content: flex-start"
}
.language-card{
  padding-left: 48px; padding-right: 48px; padding-top: 24px; padding-bottom: 24px; border-radius: 32px; outline: 1px #FFFFE3 solid; outline-offset: -1px; flex-direction: column; justify-content: center; align-items: center; gap: 10px; display: inline-flex;
  /* background: rgba(255, 255, 255, 0.05); */
  backdrop-filter: blur(4px);
  transition: all 0.3s ease;
}
.language-card:hover{
transform: translateY(-6px) scale(1.03);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 25px rgba(138, 56, 245, 0.35);
  outline: 1px solid #8a38f5;
}
.lang-card-text{
  text-align: center; color: #FFFFE3; font-size: 32px;  font-weight: 400; word-wrap: break-word"
}
/* === Rail exact layout (desktop absolute), fluid on small screens === */
.rail-wrap{
  position: relative;
  width: 100%;
  height: 320px; /* base canvas for posters */
  margin-top: clamp(24px, 4vw, 40px);
}

/* Set poster cards; sizes based on your screenshot */
.poster{
  position: absolute;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.35);
}
.poster img{ display:block; width:100%; height:100%; object-fit:cover }

/* Figma-like fixed placement (desktop) */
.p1{ left: 0px;    top: 110px; width: 140px; height: 190px; }
.p2{ left: 160px;  top: 80px;  width: 160px; height: 210px; }
.p3{ left: 340px;  top: 48px;  width: 220px; height: 260px; } /* center big */
.p4{ left: 580px;  top: 80px;  width: 160px; height: 210px; }
.p5{ left: 760px;  top: 110px; width: 140px; height: 190px; }

/* Center white card overlapping posters */
.featured-card{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  width: 160px; height: 210px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
}

/* ======================== ABOUT ======================== */
.about{
  padding-top: 6%;
}
.about-frame{
  /* width: min(1200px, 92%); */
  margin-inline:auto;
  padding: 10px 55px;
}
.about-title{
  color:#FFFFE3;
  font-weight:600;
  font-size: 72px;
  line-height: 72px;
}
.series-title{
 color:#fff;
  font-weight:500;
  text-align: left;
  font-size: 80px;
  margin-top: 4%;
  font-family:"GeneralSans-Regular";
}
.about-content{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items:center;
}
.about-text{
  color:#FFFFE3;
  font-size: 44px;
  font-weight: 400;
  line-height: 44px;
  gap: 80px;
  display: grid;
}

.about-image{
  justify-items: center;
  border-bottom: 1px solid #545454;
}
.about-image img{ display:block; width:80%; height:auto }

.footer{
    padding-top: 5% !important;
    padding-bottom: 0%;
    background: #0F0F0F;
}
.footer h5{
    font-weight: 600;
    color: #FFFFE3;
}
.footer ul li{
  margin: 10px 0px;
  color: #FFFFE3;
  font-size: 22px;
  line-height: 24px;
}
.footer-logo{
  font-size: 60px;
}
.footer-logo-img{
      height: 40px;
      filter: invert(100);
}
.footer-text{
  color: #FFFFE3;     
  font-size: 220px;
  font-weight: 700; 
  margin-top: 5%;
  line-height: 190px; 
  word-wrap: break-word; text-align: center;
  overflow: hidden;
   -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
/* .footer-text::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;  
  color: #FFFFE3;
  filter: blur(8px);
  mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
} */

.footer-text2{
  color: #FFFFE3; font-size: 65px; font-weight: 600; line-height: 75px; word-wrap: break-word; text-align: left;
}
.footer .contactus_btn{
  border: 1px solid #ffffff;
    border-radius: 28px;
  font-size: 22px !important;
  width: fit-content;
  padding: 10px 30px;
  margin-top: 4%;
  margin-bottom: 1%;
  text-decoration: none;
  background: transparent;
}
.footer .contactus_btn:hover{
  border: 1px solid #fb2525;
}
.footer .connect{
  color: #FFFFE3; font-size: 44px; font-family: 'Instrument Serif'; font-weight: 400; word-wrap: break-word;
}
/* ================== RESPONSIVE RULES ================== */
/* Tablet: loosen spacings, keep proportions */
@media (max-width: 1199px){
  .hero-frame{
    left: 6vw;
    top: 18vh;
    width: 88%;
  }

  .eyebrow{
  color: #FFFFE3;
  font-size: 34px;
  font-weight: 600;
  margin: 0 0 .4rem 0;
  text-align: center;
  line-height: 64px;
  word-break: break-all;
}
.hero-title{
  color: #FFFFE3;
  font-weight: 600;
  line-height: 160px;
  font-size: 260px;
  margin: 0 0 .35rem 0;
  word-break: break-all;
}
.hero-sub{
  color: #FFFFE3;
  font-family:"Instrument Serif", serif;
  max-width: 100%;
  font-size: 30px;
  margin: 0;
  text-align: center;
}

  .rail-wrap{
    height: 280px;
  }
  .p1{ left: 0;    top: 110px; width: 120px; height: 170px; }
  .p2{ left: 135px; top: 80px;  width: 140px; height: 190px; }
  .p3{ left: 295px; top: 48px;  width: 200px; height: 240px; }
  .p4{ left: 510px; top: 80px;  width: 140px; height: 190px; }
  .p5{ left: 660px; top: 110px; width: 120px; height: 170px; }
  .featured-card{ width: 140px; height: 190px; }
}

.mobile-break {
  display: none;
}

/* Overlay base */
#center-control {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    opacity: 1;
    pointer-events: auto; /* clickable by default */
    transition: opacity 0.25s ease;
}

/* When hidden → DO NOT BLOCK VIDEO */
#center-control.hidden {
    opacity: 0;
    pointer-events: none; /* 🔥 THIS FIXES CONTROLS */
}
.play-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
}
.icon-play::before {
    content: "▶";
    color: #fff;
    font-size: 36px;
    margin-left: 4px;
}

.icon-pause::before {
    content: "❚❚";
    color: #fff;
    font-size: 32px;
}
/* Show pause icon ONLY on hover */
.video-wrapper:hover #center-control.show-on-hover {
    opacity: 1;
    pointer-events: auto;
}
@media (max-width: 768px) {
  .mobile-break {
    display: block;
  }
  .lang-card-text{
    font-size: 22px;
  }
  .language-card {
    padding-left: 12px;
    padding-right: 12px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 20px;
    outline: 1px #FFFFE3 solid;
    outline-offset: -1px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    display: flex;
    flex-direction: row;
  }
  .languages-items {
    margin-top: 3.5%;
    width: 100%;
    max-width: 100%;
    justify-content: center;
    align-items: flex-start;
    gap: 8px;
    display: grid;
    grid-template-columns: 2fr 1fr;
  }
  .language-card svg{
    height: 45px;
    width: 45px;
  }
 
}
/* Mobile: rail becomes horizontal scroll; white card hidden (optional) */
@media (max-width: 768px){
  .footer-logo{
  font-size: 40px;
}
.footer-logo-img{
      height: 25px;
      filter: invert(100);
}
.footer {
    padding-top: 10% !important;
    padding-bottom: 5%;
    background: #0F0F0F;
}
   .about-frame {
    margin-inline: auto;
    padding: 0px 20px;
}
  .hero{
    height: 100vh;
  }
  .hero-frame{
    position: absolute;
    left: 20px; 
    right: 20px;
    top: 25vh;
  }
.hero-video{
  width: -webkit-fill-available; 
  height: 100vh;
  object-fit: cover;
}
  .rail-wrap{
    height: auto;
    margin-top: 20px;
    display: grid;
  }
  .rail-wrap::after{ content:""; } /* to keep grid flow clean */

  .poster,
  .p1,.p2,.p3,.p4,.p5{
    position: relative;
    left: auto; top: auto;
    width: 48vw; height: 68vw;
    min-width: 180px; min-height: 240px;
    margin-right: 12px;
  }
  .rail-wrap{
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 6px;
  }
  .poster{ scroll-snap-align: start; }
  .featured-card{ display:none; } /* optional on small screens */

  .about-content{
    grid-template-columns: 1fr;
  }
  .hero-title{
    line-height: 1;
    letter-spacing: .2px;
    font-size: 95px;
    text-align: center;
}
.about-text{
      font-size: 18px;
      line-height: 22px;
      gap: 0px;
    }
.about-title{
    font-size: 30px;
    margin-bottom: 10px;
    text-align: center;
}
#creativity-text{
  text-align: center;
}
.about-image{
  border-bottom: none;
}
.hero-sub{
  font-size: 26px;
  margin-top: 20px;
  line-height: 30px;
}
.stories-title{
  font-size: 30px;
  width: 65%;
}
.stories-title2{
  font-size: 30px;
  width: 75%;
}
.series-title{
    font-size: 30px;
    width: 65%;
}
.stories-sub{
  font-size: 18px;
}
.btn-ghost{
    padding: 1rem 1.2rem;
    text-decoration: none;
    font-size: 18px;
}
.slide-track img{
  height: 275px !important;
}
.slide-track{
  padding-top: 30px;
}
.slider{
   height: 330px !important;
  margin-top: 2% !important;
}
.about{
  padding-top: 40px;
}
}

.gallery {
  position: absolute;
  width: 70%;
  height: 50vh;
  overscroll-behavior: contain; /* stop scroll bubbling to page */
  overflow-y: auto;
  margin-top: 5%;
}
.cards-wrap{
  position: relative;
  height: 100%;
  /* Optional: soft fade on the far left/right edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12vw, #000 calc(100% - 12vw), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 12vw, #000 calc(100% - 12vw), transparent 100%);
}
.gallery::-webkit-scrollbar { display: none; }

/* optional: avoid iOS bounce chain */
@supports (-webkit-touch-callout: none) {
  .gallery { overscroll-behavior: none; }
}
/* expand the stage wider than the viewport and center it, so neighbors are visible */
.slider {
  overflow: hidden;
  width: 100%;
  height: 450px;
  display: flex;
  align-items: center;
  margin-top: 5%;
}

.slide-track {
  display: flex;
  animation: scroll 120s linear infinite;
}

/* rank-based scaling (0 = center/active) */
.slide-track img[data-rank="0"]{ transform: scale(1); z-index: 5; opacity: 1;   filter: saturate(1); }
.slide-track img[data-rank="1"]{ transform: scale(0.95); z-index: 4; opacity: .9;}
.slide-track img[data-rank="2"]{ transform: scale(0.85); z-index: 3; opacity: .9; }
.slide-track img[data-rank="3"]{ transform: scale(0.75); z-index: 2; opacity: .85; }
.slide-track img[data-rank="4"]{ transform: scale(0.65); z-index: 1; opacity: .8; }

/* optional: cap min size for very far items */
/* .slide-track img:not([data-rank]){ transform: scale(0.60); opacity: .8; } */

.slide-track img {
  height: 400px;
  margin: 0 10px;
  border-radius: 10px;
  object-fit: cover;
  transition:transform .25s ease, opacity .25s ease;
  transform-origin: center;
}

.slide-track img.active {
  transform: scale(1.1);
  z-index: 2;
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}


.actions {
  position: absolute;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
}

button {
  display:inline-block;
  outline: none;
  border: none;
  padding: 8px 14px;
  background: #414141;
  background-image: -webkit-linear-gradient(top, #575757, #414141);
  background-image: -moz-linear-gradient(top, #575757, #414141);
  background-image: -ms-linear-gradient(top, #575757, #414141);
  background-image: -o-linear-gradient(top, #575757, #414141);
  background-image: linear-gradient(to bottom, #575757, #414141);
  text-shadow: 0px 1px 0px #414141;
  -webkit-box-shadow: 0px 1px 0px 414141;
  -moz-box-shadow: 0px 1px 0px 414141;
  box-shadow: 0px 1px 0px 414141;
  color: #ffffff;
  text-decoration: none;
  margin: 0 auto 10px;
  -webkit-border-radius: 4;
  -moz-border-radius: 4;
  border-radius: 4px;
  padding: 12px 25px;
  font-family: "Signika Negative", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  line-height: 18px;
}
/* 
button:hover {
  background: #57a818;
  background-image: -webkit-linear-gradient(top, #57a818, #4d9916);
  background-image: -moz-linear-gradient(top, #57a818, #4d9916);
  background-image: -ms-linear-gradient(top, #57a818, #4d9916);
  background-image: -o-linear-gradient(top, #57a818, #4d9916);
  background-image: linear-gradient(to bottom, #57a818, #4d9916);
  text-shadow: 0px 1px 0px #32610e;
  -webkit-box-shadow: 0px 1px 0px fefefe;
  -moz-box-shadow: 0px 1px 0px fefefe;
  box-shadow: 0px 1px 0px fefefe;
  color: #ffffff;
  text-decoration: none;
} */

button {
  font-size: 20px;
  font-weight: 400;
}

a {
  color: #88ce02;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* .canvas-container {
  grid-column: 7 / span 6;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  align-self: flex-end;
  padding-bottom: 2rem;
  opacity: 0; 
  transition: opacity 0.8s ease-in-out; 
}

.canvas-container.visible {
  opacity: 1; 
} */

/* canvas {
  width: 100%;
  height: 85%;
  background: black;
  touch-action: none;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
} */

/* custom accordion using <button> + content to control animations and accessibility */
.wrap{
    max-width:var(--container-w);
    margin:0 auto;
    text-align:center;
    padding:7% 5% 7% 5%;
  }
  .wrap h1{
    font-weight: 600;
  }
  .faq{
    width:100%;
    max-width: 850px;
    border-radius: 28px;
    border: 1px solid #FFFFE3;
    /* outline-offset: -1px; */
    /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); */
    overflow: hidden;
  }

  .faq-list{
    justify-items: center;
    margin-top: 4%;
    display: grid;
    gap: 30px;
  }
  .faq-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:18px 26px;
    cursor:pointer;
  }

  .faq-button{
    all:unset; /* reset button look */
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    gap:16px;
  }

  .faq-title{
    text-align:left;
    font-size:30px;
    font-weight:500;
    color:var(--text);
    line-height:1.1;
  }

  .faq-summary{
    color:var(--muted);
    font-size:18px;
    margin-top:6px;
    display:block;
    font-weight:400;
  }

  /* plus/minus icon */
  .faq-icon{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:10px;
    display:inline-grid;
    place-items:center;
    color:#FFFFE3;
    scale: 1.5;
    font-weight:700;
    transition:transform .28s ease, box-shadow .3s ease, background .25s ease;
  }

  .faq[aria-expanded="true"] .faq-icon{
    transform: rotate(180deg);
    scale: 1.2;
    box-shadow: 0 0px 10px rgba(138,56,245,0.22);
    background: linear-gradient(180deg, rgb(4 4 4), rgb(10 10 10))
  }

  /* content area with height animation */
  .faq-panel{
    padding:0 26px;
    /* start collapsed */
    height:0;
    overflow:hidden;
    transition: height 320ms cubic-bezier(.2,.9,.2,1);
  }

  .faq-panel-inner{
    padding:0px 0 22px;
    color:var(--muted);
    text-align:left;
    font-size:18px;
    line-height:1.4;
  }

  /* small shadow/hover effect for header */
  .faq:hover{
    transform:translateY(-4px);
    transition:transform .25s ease;
  }
  /* mobile layout */
  @media (max-width: 640px){
    /* :root{ --container-w: 100%; } */
    /* body{ padding:28px 14px; } */
    h1.section-title{ font-size:30px; margin-bottom:30px; }
    .faq{ border-radius:18px; }
    .faq-header{ padding:10px 16px; }
    .faq-title{ font-size:15px; }
    .faq-icon{ width:34px;height:34px;border-radius:9px; }
    .faq-panel-inner{ padding-bottom:18px; font-size:14px; }
    .faq-panel{
      padding: 0 18px!important;
    }
    .faq-list {
      justify-items: center;
      margin-top: 4%;
      display: grid;
      gap: 20px;
  }
  .faq[aria-expanded="true"] .faq-icon {
        transform: rotate(180deg);
        scale: 1;
    }
    .footer-text2 {
    color: #FFFFE3;
    font-size: 30px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
  }
  .list-unstyled {
    padding-left: 0;
    list-style: none;
    display: flex;
    gap: 20px;
    text-align: center;
    justify-content: center;
  }
  .footer-nav{
    margin: 0%;
    justify-items: center;
    text-align: center;
  }
  .footer .connect {
    color: #FFFFE3;
    font-size: 24px;
  }
  .footer .contactus_btn {
    border: 1px solid #ffffff;
        border-radius: 28px;
        font-size: 20px !important;
        width: fit-content;
        padding: 15px 25px;
        margin-top: 10%;
        margin-bottom: 8%;
  }
.footer ul li {
    margin: 10px 0px;
    color: #FFFFE3;
    font-size: 16px;
    line-height: 18px;
}
.footer-text {
      color: #FFFFE3;
      font-size: 96px;
      font-weight: 700;
      line-height: 100px;
      word-wrap: break-word;
      text-align: center;
      width: 90%;
      margin-left: 5%;
}
}
  /* optional: focus styles for accessibility */
  .faq-button:focus .faq{
    outline: 2px solid rgba(138,56,245,0.22);
    outline-offset: 2px;
  }

.carousel {
  height: 500px !important;
  margin-top: 2%;
   transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  perspective: 450px;
}
.carousel-item {
  display: flex;
  align-items: start;
  justify-content: center;
  margin-right: 0%;
  width: 330px !important;
  height: 400px !important;
}

.carousel-item img {
  width: 330px !important;
  height: 400px !important;
}

/* hint what will change on child items */
.carousel .carousel-item {
  will-change: transform, opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 480ms cubic-bezier(.2,.9,.2,1), opacity 360ms ease; /* fallback smoothness */
}

/* ensure images don't cause relayout during animation */
.carousel .carousel-item img {
  display: block;
  width: 100%;
  height: 400px;           
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  image-rendering: auto;
}

/* Override Materialize .container */
.container {
  max-width: 80% !important;
  width: 80% !important;
} 

@media only screen and (min-width: 1200px) {
    .container {
        width: 90% !important;
        min-width: 90% !important;
    }
}
  @media (max-width: 640px){
  .library-container
  {
    width: 100% !important;
    min-width: 100% !important;
    padding: 0% !important;
  }
  .carousel {
    height: 400px !important;
    margin-top: 3%;
    perspective: 400px;
  }
.carousel-item {
    align-items: start;
    justify-content: center;
    margin-right: 0%;
    width: 275px !important;
    height: 360px !important;
}
.carousel-item img {
    width: 275px !important;
    height: 360px !important;
}
.footer-left-div{
  text-align: center !important;
  justify-items: center !important;
}
.container {
    max-width: 94% !important;
    width: 94% !important;
}

  }

/* =================================================================
   HOME PAGE — new redesign (index.html)
   ================================================================= */

/* All home-page text in Figtree */
body.home,
body.home * {
  font-family: 'Figtree', sans-serif;
}

body.home .home-main {
  background: #000;
  color: #fff;
  overflow: hidden;
  width: 100%;
}

/* Pill buttons used in hero / cta */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 28px;
  border-radius: 999px;
  font-family: 'Figtree', sans-serif;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  background-image: none;
  text-shadow: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.2;
  border: 1px solid transparent;
}
.btn-pill-orange {
  background: #FB6B2B;
  color: #fff;
  border-color: #FB6B2B;
}
.btn-pill-orange:hover {
  background: #ff7a3c;
  color: #fff;
  text-decoration: none;
}
.btn-pill-ghost {
  background: transparent;
  color: #fff;
  border: 1px solid #3a3a3a;
}
.btn-pill-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: #5a5a5a;
  color: #fff;
  text-decoration: none;
}

/* ----- HERO ----- */
.home-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 60px 0px 80px;
  max-width: 94%;
  margin: 0 auto;
  position: relative;
}
.home-hero-text { max-width: 100%; margin-top: -15%;}
.home-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.home-eyebrow-line {
  width: 36px;
  height: 1px;
  background: #FB6B2B;
}
.home-eyebrow-text {
  font-size: 12px;
  letter-spacing: 1.5px;
  color: #FB6B2B;
  font-weight: 500;
  text-transform: uppercase;
}
.home-hero-title {
  font-size: 85px;
  line-height: 1.02;
  font-weight: 600;
  color: #fff;
  margin: 0 0 28px;
  letter-spacing: -2px;
}
.home-hero-sub {
  font-size: 24px;
  line-height: 1.3;
  color: #b0b0b0;
  margin: 0 0 36px;
  max-width: 650px;
}
.home-hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero — smaller background mockup on the right, larger foreground phone with
   playing video (using mobile-frame.png as the bezel overlay) on the left. */
/* Mockup stage: aspect-ratio locked, fluid width. All children use percentages
   of this stage so the whole composition scales as one rigid unit at every
   viewport width and every browser zoom level. */
.home-hero-mockup {
  position: relative;
  width: 100%;
  max-width: 494px;
  aspect-ratio: 520 / 689;
  margin-left: auto;
  margin-right: 0;
  isolation: isolate;
}
/* Warm yellow / amber radial glow behind both phones — strong centre, soft
   fade to black, extends past the stage so it bleeds into the dark background. */
.home-hero-mockup::before {
  content: "";
    position: absolute;
    inset: -10% -40%;
    background: radial-gradient(55% 55% at 50% 50%, rgba(255, 180, 50, 0.78) 20%, rgba(245, 150, 35, 0.45) 10%, rgba(180, 95, 21, 0.18) 70%, rgba(0, 0, 0, 0) 15%);
    z-index: 0;
    pointer-events: none;
    filter: blur(60px);
}
.hero-mockup-img {
  position: absolute;
  right: 0;
  top: 54%;
  transform: translateY(-50%);
  /* Slightly bigger so it looks closer to the foreground phone */
  width: 60%;
  height: auto;
  display: block;
  object-fit: contain;
  z-index: 1;
}
/* mobile-frame.png is 371×759 (aspect 0.489). The PNG provides the bezel +
   notch + edge styling, so the .phone-foreground container has no border or
   background of its own — just a positioning shell holding the video + frame.
   Sized noticeably bigger than the background mockup so it dominates. */
.phone-foreground {
  position: absolute;
  left: 0;
  top: 46%;
  transform: translateY(-50%);
  /* Foreground sits slightly higher than the background image, matching the
     figma's overlapping composition */
  width: 62%;
  aspect-ratio: 371 / 759;
  z-index: 2;
  filter: drop-shadow(0 25px 50px rgba(0, 0, 0, 0.55));
}
/* mobile-frame.png is fully opaque (no transparent screen window). So we
   put the frame underneath and the video ON TOP of it, sized only to the
   screen area of the phone. The bezel pixels of the PNG remain visible
   around the video, and the video sits at z-index 999999. */
.phone-frame-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.phone-foreground video {
  position: absolute;
  /* Inset to match the frame's screen area (≈ 3% top, 5% sides, 4% bottom) */
  top: 1.6%;
  left: 4%;
  width: 92%;
  height: 97%;
  object-fit: cover;
  border-radius: 36px;
  display: block;
  background: #000;
  z-index: 999999999;
}

/* ----- STATS ----- */
.home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #0c0c0d;
  border: 1px solid #1f1f20;
  border-radius: 8px;
  margin: 0 80px 80px;
  max-width: 94%;
  margin-left: auto;
  margin-right: auto;
}
.home-stat {
  padding: 28px 32px;
  border-right: 1px solid #1f1f20;
}
.home-stat:last-child { border-right: 0; }
.home-stat-label {
  font-size: 16px;
  color: #9c9c9c;
  margin: 0 0 14px;
  font-weight: 400;
}
.home-stat-value {
  font-size: 54px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: -1px;
  font-family: 'GeneralSans-Medium', 'GeneralSans-Regular', sans-serif;
  line-height: 1;
}

/* ----- SECTION HEADINGS ----- */
.home-section-title {
  font-size: 64px;
  line-height: 1.08;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -1px;
}
.home-section-sub {
  font-size: 15px;
  color: #a0a0a0;
  line-height: 1.6;
  margin: 0;
  max-width: 625px;
}

/* ----- EXPLORE / CAROUSEL ----- */
.home-explore {
  padding: 0 0px 80px;
  max-width: 94%;
  margin: 0 auto;
}
.home-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.home-carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 0;
  scroll-snap-type: x mandatory;
  /* Hide scrollbar across browsers */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.home-carousel::-webkit-scrollbar { display: none; height: 0; width: 0; }

/* 4 catalog-style cards visible + 25% peek of the 5th card */
.home-carousel .cat-card {
  flex: 0 0 calc((100% - 64px) / 4.25);
  width: calc((100% - 64px) / 4.25);
  max-width: calc((100% - 64px) / 4.25);
  scroll-snap-align: start;
}

.home-card {
  flex: 0 0 240px;
  width: 240px;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.home-card:hover { text-decoration: none; }
.home-card-thumb {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 6px;
  overflow: hidden;
  background: #111;
}
.home-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.home-card:hover .home-card-thumb img { transform: scale(1.04); }
.home-card-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 4px;
  font-size: 11px;
  color: #fff;
  letter-spacing: 0.4px;
}
.home-card-meta {
  padding-top: 12px;
}
.home-card-title {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.home-card-lang {
  font-size: 12px;
  color: #9a9a9a;
  margin: 0;
}

/* ----- WHY PARTNER ----- */
.home-why {
  padding: 0px 0px 30px;
  max-width: 94%;
  margin: 0 auto;
}
.home-why-head { margin-bottom: 40px; }
.home-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.why-card {
  background: #0C0C0D;
  border: 1px solid #1f1f20;
  border-radius: 12px;
  padding: 28px 26px 24px;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.why-card-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid #FB6B2B;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 18px;
}
.why-card-title {
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: -0.3px;
}
.why-card-desc {
  font-size: 18px;
  line-height: 1.2;
  color: #a0a0a0;
  margin: 0 0 20px;
  flex: 1;
}
.why-card-foot {
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #959595;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid #1f1f20;
}

/* ----- FAQs ----- */
.home-faqs {
  padding: 60px 0px 80px;
  max-width: 75%;
  margin: 0 auto;
}
.home-faqs-eyebrow {
  font-size: 12px;
  color: #FB6B2B;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 14px;
  font-weight: 500;
}
.home-faqs-title {
  font-size: 44px;
  line-height: 1.1;
  font-weight: 600;
  text-align: center;
  margin: 0 0 40px;
  color: #fff;
  letter-spacing: -0.5px;
}
.home-faqs .faq-list {
  background: #0c0c0d;
  border: 1px solid #1f1f20;
  border-radius: 12px;
  padding: 0;
  display: block;
  margin: 0;
  gap: 0;
}
/* Override the older `.faq { border: 1px solid #FFFFE3; border-radius: 28px }`
   rule from style.css that gives every FAQ item a cream-coloured card. */
.home-faqs .faq {
  width: 100%;
  max-width: none;
  border: 0;
  border-bottom: 1px solid #1f1f20;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  margin: 0;
}
.home-faqs .faq:last-child { border-bottom: 0; }
.home-faqs .faq:hover { transform: none; }

.home-faqs .faq-header {
  padding: 0;
  background: transparent;
}
.home-faqs .faq-button {
  width: 100%;
  background: transparent;
  background-image: none;
  border: 0;
  padding: 22px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  text-shadow: none;
  box-shadow: none;
  text-transform: none;
  letter-spacing: 0;
}
.home-faqs .faq-title {
  font-size: 17px;
  color: #fff;
  font-weight: 500;
  line-height: 1.3;
  text-align: left;
}
.home-faqs .faq-icon {
  font-size: 22px;
  color: #FB6B2B;
  font-weight: 400;
  width: auto;
  height: auto;
  min-width: 0;
  border-radius: 0;
  scale: 1;
  background: transparent;
  box-shadow: none;
}
.home-faqs .faq[aria-expanded="true"] .faq-icon {
  transform: none;
  scale: 1;
  box-shadow: none;
  background: transparent;
}
.home-faqs .faq-panel {
  overflow: hidden;
  transition: height .3s ease;
  padding: 0;
}
.home-faqs .faq-panel-inner {
  padding: 0 32px 22px;
  font-size: 14px;
  line-height: 1.6;
  color: #a0a0a0;
  text-align: left;
}

/* ----- CTA / FOOTER ----- */
.home-cta {
  position: relative;
  padding: 60px 80px 80px;
  margin: 10px 0px 60px;
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
  border-radius: 16px;
  background:
    radial-gradient(80% 100% at 30% 50%, rgba(251, 107, 43, 0.18), transparent 60%),
    #0c0c0d;
  border: 1px solid #2a1a14;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.home-cta-title {
  font-size: 44px;
  line-height: 1.15;
  font-weight: 600;
  color: #fff;
  margin: 0 0 18px;
  letter-spacing: -0.5px;
}
.home-cta-title em {
  color: #FB6B2B;
  font-style: italic;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
}
.home-cta-sub {
  font-size: 15px;
  line-height: 1.6;
  color: #b0b0b0;
  max-width: 480px;
  margin: 0 0 28px;
}
.home-cta-btn { letter-spacing: 0.5px; }
.home-cta-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta-option {
  background: rgba(20, 20, 21, 0.6);
  border: 1px solid #2a2a2a;
  border-radius: 999px;
  padding: 16px 28px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .2s ease, border-color .2s ease;
  cursor: pointer;
}
.cta-option:hover {
  background: rgba(251, 107, 43, 0.08);
  border-color: rgba(251, 107, 43, 0.4);
}
.cta-arrow { color: #6a6a6a; }

/* ----- RESPONSIVE — < 1100px ----- */
@media (max-width: 1100px) {
  .home-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 40px 60px; }
  .home-hero-title { font-size: 64px; letter-spacing: -1.5px; }
  .home-hero-sub { font-size: 20px; }
  /* Mockup is fluid via percentages — just adjust the cap. */
  .home-hero-mockup { max-width: 440px; }
  .home-stats { margin-left: 40px; margin-right: 40px; }
  .home-explore, .home-why, .home-faqs { max-width: 100%; padding-left: 40px; padding-right: 40px; }
  .home-cta { margin-left: 40px; margin-right: 40px; padding: 50px 50px; grid-template-columns: 1fr; gap: 40px; }
  .home-why-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ----- RESPONSIVE — Mobile (≤768px) ----- */
@media (max-width: 768px) {
  body.home { padding-top: 64px; }
  .home-main { padding: 0; }
  .phone-foreground video {
    border-radius: 25px !important;
  }
  .home-hero-text { max-width: 100%; margin-top: 0%;}
  .home-hero {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 24px 20px 40px;
    text-align: left;
    max-width: 100%;
  }
  .home-eyebrow { gap: 10px; margin-bottom: 18px; }
  .home-eyebrow-text { font-size: 10px; letter-spacing: 1.2px; }
  .home-hero-title { font-size: 38px; line-height: 1.08; margin-bottom: 16px; letter-spacing: -1px; }
  .home-hero-sub { font-size: 17px; margin-bottom: 22px; }
  .home-hero-cta { display: flex; }
  .home-hero-cta .btn-pill { padding: 10px 20px; font-size: 13px; }

  /* Mobile: percentages keep both phones locked together; centre the stage. */
  .home-hero-mockup {
    order: 1;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }

  .home-stats {
    grid-template-columns: repeat(2, 1fr);
    margin: 0 20px 60px;
    max-width: 100%;
  }
  .home-stat { padding: 18px 18px; border-right: 1px solid #1f1f20; }
  .home-stat:nth-child(2n) { border-right: 0; }
  .home-stat:nth-child(1), .home-stat:nth-child(2) { border-bottom: 1px solid #1f1f20; }
  .home-stat-label { font-size: 11px; margin-bottom: 8px; }
  .home-stat-value { font-size: 32px; }

  .home-section-title { font-size: 36px; letter-spacing: -0.5px; }
  .home-section-sub { font-size: 13px; }
  .home-section-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
  .home-section-cta { display: none; }

  .home-explore { max-width: 100%; padding: 0 20px 60px; }
  .home-carousel { gap: 12px; }
  /* Mobile: ~2 cards + 30% peek of next */
  .home-carousel .cat-card {
    flex: 0 0 calc((100% - 12px) / 1.75);
    width: calc((100% - 12px) / 1.75);
    max-width: calc((100% - 12px) / 1.75);
  }
  .home-carousel .cat-card-title { font-size: 14px; }
  .home-carousel .cat-card-meta { font-size: 11px; letter-spacing: 0.3px; }

  .home-why { max-width: 100%; padding: 0px 20px; }
  .home-why-grid { grid-template-columns: 1fr; gap: 14px; }
  .why-card { padding: 22px 20px; min-height: auto; }
  .why-card-title { font-size: 18px; }
  .why-card-desc { font-size: 13px; margin-bottom: 14px; }
  .why-card-foot { font-size: 10px; padding-top: 12px; }

  .home-faqs { max-width: 100%; padding: 30px 20px 60px; }
  .home-faqs-title { font-size: 28px; margin-bottom: 24px; }
  .home-faqs .faq-button { padding: 18px 20px; }
  .home-faqs .faq-title { font-size: 14px; }
  .home-faqs .faq-panel-inner { padding: 0 0px 18px; font-size: 13px; }

  .home-cta {
    margin: 0px 20px 40px;
    padding: 40px 28px;
    grid-template-columns: 1fr;
    gap: 30px;
    max-width: 100%;
  }
  .home-cta-title { font-size: 30px; }
  .home-cta-sub { font-size: 13px; }
  .home-cta-btn { font-size: 12px; padding: 12px 20px; }
  .cta-option { padding: 14px 22px; font-size: 11px; }
}

/* =================================================================
   SHARED SITE FOOTER (used on all pages)
   Desktop: huge "Eonix Stories" wordmark on the left, two link columns
   on the upper right, "Connect with us" pill below them.
   Mobile: button on top → link columns → wordmark at the bottom.
   ================================================================= */
.site-footer {
  background: #000;
  color: #d0d0d0;
  padding: 60px 80px;
  border-top: 1px solid #0e0e0e;
  font-family: 'Figtree', sans-serif;
}
.site-footer * { font-family: 'Figtree', sans-serif; }
.footer-inner {
  max-width: 1500px;
  margin: 0 auto;
  display: grid;
  grid-template-areas:
    "brand apps cols"
    "brand apps btn";
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  column-gap: 60px;
  row-gap: 32px;
  align-items: end;
}
.footer-apps {
  grid-area: apps;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-self: start;
  justify-self: start;
}
.footer-apps .footer-col-title {
  margin: 0 0 2px;
}
.footer-app-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  width: 200px;
  height: 56px;
  box-sizing: border-box;
  font-family: 'Figtree', sans-serif;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.footer-app-badge:hover {
  border-color: #FB6B2B;
  background: #0a0a0a;
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}
.footer-app-badge svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: #fff;
}
.footer-app-badge .fab-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.footer-app-badge .fab-small {
  font-size: 9px;
  letter-spacing: 0.6px;
  color: #cfcfcf;
  text-transform: uppercase;
  font-weight: 400;
}
.footer-app-badge .fab-big {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.2px;
}
.footer-brand-mark {
  grid-area: brand;
  font-family: 'Figtree', sans-serif;
  font-size: clamp(80px, 14vw, 180px);
  line-height: 0.92;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -3px;
  user-select: none;
  align-self: end;
  margin: 0;
}
.footer-cols {
  grid-area: cols;
  display: grid;
  grid-template-columns: auto auto;
  gap: 80px;
  align-self: start;
  justify-self: end;
}
.footer-col-title {
  font-size: 13px;
  letter-spacing: 0.4px;
  color: #6a6a6a;
  margin: 0 0 14px;
  font-weight: 400;
  text-transform: none;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { margin-bottom: 8px; }
.footer-col li:last-child { margin-bottom: 0; }
.footer-col a {
  color: #f0f0f0;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: color .2s ease;
  font-family: 'Figtree', sans-serif;
  white-space: nowrap;
}
.footer-col a:hover { color: #FB6B2B; text-decoration: none; }

.footer-connect-btn {
  grid-area: btn;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 32px;
  background: #2a1410;
  background: linear-gradient(180deg, #3a1f18, #2a1410);
  color: #f0f0f0;
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  text-align: center;
  width: 100%;
  justify-self: stretch;
  min-width: 0;
  transition: background .2s ease, border-color .2s ease;
}
.footer-connect-btn:hover {
  background: linear-gradient(180deg, #4a2820, #3a1c14);
  border-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .site-footer { padding: 48px 40px; }
  .footer-cols { gap: 50px; }
  .footer-inner {
    grid-template-areas:
      "brand cols"
      "brand apps"
      "brand btn";
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
  }
  .footer-apps { justify-self: end; }
}
@media (max-width: 768px) {
  .site-footer { padding: 36px 20px; }
  .footer-inner {
    grid-template-areas:
      "btn"
      "apps"
      "cols"
      "brand";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    row-gap: 28px;
    column-gap: 0;
    align-items: start;
  }
  .footer-connect-btn {
    justify-self: stretch;
    min-width: 0;
  }
  .footer-cols {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    justify-self: start;
  }
  .footer-apps {
    flex-direction: column;
    justify-self: start;
    gap: 10px;
    width: 100%;
    max-width: 220px;
  }
  .footer-app-badge {
    width: 100%;
    height: 52px;
  }
  .footer-brand-mark {
    align-self: start;
    line-height: 0.9;
    margin-top: 8px;
  }
}

/* =================================================================
   LEGAL PAGES (privacy-policy.html, terms-of-service.html)
   ================================================================= */
body.legal-page {
  background: #000;
  color: #fff;
  font-family: 'Figtree', sans-serif;
}
body.legal-page * { font-family: 'Figtree', sans-serif; }
.legal-main {
  max-width: 80%;
  margin: 0 auto;
  padding: 60px 32px 80px;
  color: #d8d8d8;
}
.legal-hero {
  text-align: left;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #1a1a1a;
}
.legal-eyebrow {
  font-size: 13px;
  letter-spacing: 1.5px;
  color: #FB6B2B;
  text-transform: uppercase;
  margin: 0 0 12px;
  font-weight: 500;
}
.legal-title {
  font-size: 48px;
  line-height: 1.1;
  font-weight: 600;
  color: #fff;
  margin: 0 0 12px;
  letter-spacing: -0.5px;
}
.legal-meta {
  font-size: 14px;
  color: #888;
  margin: 0;
}
.legal-body {
  font-size: 15px;
  line-height: 1.7;
  color: #c8c8c8;
}
.legal-body p { margin: 0 0 18px; }
.legal-body strong { color: #fff; font-weight: 500; }
.legal-body a {
  color: #FB6B2B;
  text-decoration: none;
  border-bottom: 1px solid rgba(251, 107, 43, 0.4);
  transition: border-color .2s ease;
}
.legal-body a:hover { border-bottom-color: #FB6B2B; }
.legal-body h2 {
  font-size: 24px;
  line-height: 1.25;
  color: #fff;
  margin: 40px 0 16px;
  font-weight: 600;
  letter-spacing: -0.3px;
}
.legal-body h3 {
  font-size: 17px;
  line-height: 1.35;
  color: #f0f0f0;
  margin: 24px 0 10px;
  font-weight: 500;
}
.legal-body ul {
  margin: 0 0 18px;
  padding-left: 22px;
}
.legal-body li {
  margin-bottom: 8px;
  color: #c8c8c8;
}
.legal-body li::marker { color: #FB6B2B; }
.legal-contact {
  margin-top: 16px;
  padding: 20px 24px;
  background: #0c0c0d;
  border: 1px solid #1f1f20;
  border-radius: 12px;
}
.legal-contact p { margin: 0 0 8px; }
.legal-contact p:last-child { margin-bottom: 0; }
.legal-contact a {
  color: #FB6B2B;
  border-bottom: 0;
}

@media (max-width: 768px) {
  .legal-main { padding: 32px 20px 60px; }
  .legal-hero { margin-bottom: 32px; padding-bottom: 22px; }
  .legal-title { font-size: 32px; }
  .legal-eyebrow { font-size: 11px; letter-spacing: 1.2px; }
  .legal-meta { font-size: 13px; }
  .legal-body { font-size: 14px; line-height: 1.6; }
  .legal-body h2 { font-size: 20px; margin: 28px 0 12px; }
  .legal-body h3 { font-size: 15px; margin: 20px 0 8px; }
  .legal-contact { padding: 16px 18px; }
}

/* =================================================================
   CONNECT-WITH-US MODAL (home page CTA)
   Note: Materialize CSS is loaded on this page and aggressively styles
   .modal and select. The overrides on .modal.connect-modal + select
   below are intentional to undo that interference.
   ================================================================= */
.modal.connect-modal {
  background-color: transparent;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  top: 0;
  left: 0;
  border-radius: 0;
  overflow-x: hidden;
  overflow-y: auto;
  will-change: auto;
}
.connect-modal .modal-dialog {
  max-width: 540px;
}
.connect-modal .modal-content {
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: #f0f0f0;
  font-family: 'Figtree', sans-serif;
  padding: 36px 36px 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  position: relative;
}
.connect-modal .cm-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #cfcfcf;
  font-family: 'Figtree', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  box-shadow: none;
  text-shadow: none;
  text-transform: none;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.connect-modal .cm-close:hover,
.connect-modal .cm-close:focus,
.connect-modal .cm-close:focus-visible {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
  box-shadow: none;
  transform: scale(1.06);
}
.connect-modal .cm-header {
  margin-bottom: 22px;
}
.connect-modal .cm-title {
  font-family: 'Figtree', sans-serif;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
.connect-modal .cm-title em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: #FB6B2B;
}
.connect-modal .cm-sub {
  font-size: 14px;
  color: #9a9a9a;
  margin: 0;
}
.connect-modal .cm-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.connect-modal .cm-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.connect-modal .cm-field label {
  font-size: 12px;
  letter-spacing: 0.4px;
  color: #9a9a9a;
  font-weight: 400;
  text-transform: uppercase;
}
.connect-modal .cm-field input,
.connect-modal .cm-field select,
.connect-modal .cm-field textarea {
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  color: #f0f0f0;
  font-family: 'Figtree', sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  outline: none;
  transition: border-color .2s ease, background .2s ease;
  width: 100%;
  box-sizing: border-box;
}
.connect-modal .cm-field input::placeholder,
.connect-modal .cm-field textarea::placeholder {
  color: #5a5a5a;
}
.connect-modal .cm-field input:focus,
.connect-modal .cm-field select:focus,
.connect-modal .cm-field textarea:focus {
  border-color: #FB6B2B;
  background: #1f1f1f;
}
.connect-modal .cm-field select {
  display: block;
  height: auto;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%239a9a9a'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  cursor: pointer;
}
.connect-modal .cm-field select option {
  background: #1a1a1a;
  color: #f0f0f0;
}
.connect-modal .cm-field textarea {
  resize: vertical;
  min-height: 90px;
  font-family: 'Figtree', sans-serif;
}
.connect-modal .cm-status {
  margin: 4px 0 0;
  text-align: center;
  font-size: 14px;
  color: #9a9a9a;
}
.connect-modal .cm-status:empty {
  display: none;
  margin: 0;
}
.connect-modal .cm-status-ok { color: #4ade80; }
.connect-modal .cm-status-warn { color: #fbbf24; }
.connect-modal .cm-status-err { color: #f87171; }
.connect-modal .cm-submit {
  margin-top: 6px;
  align-self: flex-start;
  padding: 12px 28px;
  font-size: 14px;
  letter-spacing: 0.3px;
}
.connect-modal .cm-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 576px) {
  .connect-modal .modal-content { padding: 28px 22px 24px; border-radius: 14px; }
  .connect-modal .cm-title { font-size: 24px; }
  .connect-modal .cm-sub { font-size: 13px; }
}

/* Raise-a-complaint modal — wider (75%) with a 2-column form */
#complaintModal .modal-dialog {
  max-width: 55vw;
  width: 55vw;
}
#complaintModal .cm-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
}
/* Message field, status line and submit button span the full width */
#complaintModal .cm-form > .cm-field:has(textarea),
#complaintModal .cm-form > .cm-status,
#complaintModal .cm-form > .cm-submit {
  grid-column: 1 / -1;
}
/* Payment screenshot file input */
#complaintModal .cm-field input[type="file"] {
  padding: 9px 12px;
  font-size: 13px;
  color: #cfcfcf;
  cursor: pointer;
}
#complaintModal .cm-field input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: rgba(251, 107, 43, 0.15);
  color: #FB6B2B;
  font-family: 'Figtree', sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
#complaintModal .cm-field input[type="file"]::file-selector-button:hover {
  background: rgba(251, 107, 43, 0.28);
}
@media (max-width: 768px) {
  #complaintModal .modal-dialog { max-width: 92vw; width: 92vw; }
  #complaintModal .cm-form { grid-template-columns: 1fr; }
}