:root{
  --bg:#1f1f1f;
  --accent:#3899ff;
  --white:#ffffff;
  --muted:#bdbdbd;
  --header-logo-width:100px;
  --footer-logo-width:120px;
}

/* Smooth scrolling for anchor links */
html {
  scroll-behavior: smooth;
}


/* Reset & base */
*{box-sizing:border-box}
html, body {
  height: auto;          /* allow body to grow */
  min-height: 100%;      /* optional, ensures full viewport height */
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: 'Albert Sans', system-ui, -apple-system, Segoe UI, Roboto;
}
a{color:var(--accent);text-decoration:none}

/*main*/
main {
  width: 100%;
  overflow: visible;      /* make sure scrolling isn’t trapped */
}
/* page wrap */
.wrap {
  width: 100%;          /* always fill available space */
  max-width: 1400px;    /* prevent stretching too wide on big screens */
  margin: 0 auto;       /* center when max-width is active */
  padding: 0 20px;      /* nice even gap on both sides */
  box-sizing: border-box; /* ensures padding doesn't add extra width */
}

/* NAV */
header {
    position: sticky;
    top: 0;
    z-index: 100;                 /* above everything */
    background: rgba(31, 31, 31, 0.92);
    backdrop-filter: blur(6px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    width: 100%;
}



.logo img.site-logo{width:var(--header-logo-width);height:auto}

/* Desktop nav */
.nav{display:flex;gap:18px;align-items:center}
.nav a{color:var(--white);padding:8px 10px;border-radius:8px;transition:all .18s;text-decoration:none;font-weight:600}
.nav a:hover{background:rgba(56,153,255,0.08);color:var(--white)}

/* Hamburger menu */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 3px;          /* slightly smaller gap */
  cursor: pointer;
  width: 24px;        /* optional: explicitly shrink container */
}

.hamburger div {
  width: 18px;        /* slightly smaller bars */
  height: 2.5px;      /* thinner bars */
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;  /* smooth animation for open/close */
}

/* Hamburger hover */
.hamburger:hover {
  background: #3899ff;        /* rounded square background on hover */
}

.hamburger:hover div {
  background: #fff;           /* bars stay white on hover */
}

/* Rounded square + X when nav open */
.hamburger.open {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: #3899ff;  /* background of rounded square */
  position: relative;
  gap: 0;           /* remove gaps since we use pseudo-elements for X */
}

.hamburger.open div {
  display: none;    /* hide original bars */
}

/* Add X using pseudo-elements */
.hamburger.open::before,
.hamburger.open::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2.5px;
  background: #fff;   /* X color, contrasting with white bg */
  border-radius: 2px;
  transform-origin: center;
}

.hamburger.open::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hamburger.open::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

 @media(max-width:768px){
 .links-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .nav {
    display: none;
    position: absolute;
    top: 100%;               /* drop below header/logo */
    left: 0;
    width: 100%;
    background: rgba(31,31,31,0.97);
    padding: 0 20px;
    border-radius: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    z-index: 999;  
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav.open { 
    display: flex;
    max-height: 500px;  
  }

  .hamburger {
  display: flex;
  z-index: 1001;  /* above nav overlay */
  width: 28px;     /* slightly smaller if you want */
  height: 28px;
  border-radius: 6px;  /* optional rounded square background */
  background: rgba(56,153,255,0.1); /* optional subtle background */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;   /* ensures z-index works */
  transition: all 0.2s ease;
}
}

/* HERO */

.hero .lead {
  font-size: 1.1rem;       
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin: 1rem 0 0;   /* more space above on mobile */
  line-height: 1.2;
}

.hero .sublead {
  font-size: 0.9rem;    
  font-weight: 400;
  color: #fff;
  opacity: 0.85;
  text-align: center;
  margin-top: 0.5rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .hero .lead {
    font-size: 1.2rem;   
    margin: 0.5rem 0 0;  /* slightly less top margin on desktop */
  }

  .hero .sublead {
    font-size: 1rem;
    line-height: 1.5;
  }
}


/* HERO TEXT SHADOWS */
.hero-content h1,
.hero-content .lead,
.hero-content h1 .suffix {
  text-shadow:
    0 2px 6px rgba(0,0,0,0.7),
    0 4px 12px rgba(0,0,0,0.5),
    0 8px 20px rgba(0,0,0,0.3);
}


.hero-content .lead {
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/*HERO ANIMATE*/
/* Keyframe animation for slide-up + fade-in */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Initial state for hero elements */
.hero-content h1,
.hero-content .lead,
.hero-content .cta {
  opacity: 0; /* start hidden */
  transform: translateY(20px);
}

/* Animate only when .animate class is added */
.hero-content.animate h1 {
  animation: slideUpFade 0.8s ease-out forwards;
  animation-delay: 0.2s;
}
.hero-content.animate .lead {
  animation: slideUpFade 0.8s ease-out forwards;
  animation-delay: 0.4s;
}
.hero-content.animate .cta {
  animation: slideUpFade 0.8s ease-out forwards;
  animation-delay: 0.6s;
}



/* stagger timing */
.hero-animate h1 { animation-delay: 0.2s; }
.hero-animate .lead { animation-delay: 0.4s; }
.hero-animate .cta { animation-delay: 0.6s; }

.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;      /* make sure nothing is hidden */
  margin-bottom: 40px;
}
.hero .bg-img,
.hero::after {
    z-index: 0;                   /* below header */
}

.hero .bg-img{position:absolute;inset:0;background-image:url('hero.webp');background-size:cover;background-position:center;background-repeat:no-repeat;filter:contrast(.75) saturate(.95) brightness(.80);}

/* JPEG fallback for browsers that don't support WebP */
@supports not (background-image: url("image.webp")) {
  .hero .bg-img {
    background-image: url('assets/hero.jpeg');
  }
}


.hero::after{content:'';position:absolute;inset:0;background:rgba(12,12,12,0.5)}
.hero-content{position:relative;z-index:6;width:100%;max-width:980px;text-align:center;padding:56px 20px;}
h1{font-size:clamp(42px,10vw,96px);line-height:1;margin:0;font-weight:800;white-space:nowrap}
h1 .jointly{color:var(--white)}
h1 .suffix{color:var(--accent);}
@media(max-width:720px){
  h1{white-space:normal;font-size:clamp(34px,12vw,60px)}
  .break-mobile{display:block;}
}
@media(min-width:721px){.break-mobile{display:inline;}}

.lead{color:var(--white);margin:18px 0 24px;font-size:clamp(16px,2.6vw,20px)}
.lead .jointly{color:var(--white)}
.lead .suffix{color:var(--accent)}

.cta {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.fansly-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;        /* bigger text to match site */
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 12px;
  background: linear-gradient(90deg, #3899ff, #8b5cf6); /* site-style button gradient */
  color: #fff;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.fansly-btn:hover {
  transform: translateY(-2px);
}

.fansly-btn .link-logo {
  height: 28px;           /* slightly larger than text */
  vertical-align: middle;
}


.btn-primary{background:var(--accent);border:none;color:var(--white);padding:12px 22px;border-radius:12px;font-weight:700;cursor:pointer;transition:all .18s}
.btn-primary:hover{transform:translateY(-3px)}

section{padding:50px 0}
section + section{margin-top:10px}
h2{font-size:clamp(40px,9vw,72px);line-height:1;margin:0 0 30px;font-weight:bold;text-align:center}
h2 .accent{color:var(--accent)}
.section-subtext {
  text-align: center;
  color: var(--muted);
  font-size: 1.25rem; /* same as .link-subtext */
  line-height: 1.3; /* same as .link-subtext */
  margin-top: 8px;  /* small spacing from heading */
  margin-bottom: 24px; /* spacing before the cards start */
}


/* SHOWCASE CARDS */
.showcase {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 cards per row */
  gap: 24px;
  margin: 40px 0;
  justify-items: stretch; /* cards stretch to fill column */
}

.card {
  border-radius: 14px;
  cursor: pointer;
  perspective: 1000px;
  overflow: visible;
  transition: transform 0.5s ease;  /* slower, smoother hover */
  transform-style: preserve-3d;     /* required for 3D tilt */
  perspective: 1000px;              /* gives subtle depth */
  position: relative;
  min-height: 400px; /* ensures card itself is at least 400px */
  display: flex;     /* for flipping */
}

.card:hover {transform: rotateX(3deg) rotateY(2deg) translateY(-6px);  /* subtle tilt + lift */}


.card:hover .card-face.card-front, .link-card:hover {
    background: linear-gradient(
    to bottom right,
    rgba(56, 153, 255, 0.12),  /* start color: subtle blue tint */
    rgba(56, 153, 255, 0.06)   /* end color: slightly lighter */
  );
  transition: background 0.6s ease; /* slower smooth transition */
}

.card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  
}

.card:hover .card-inner {
  transform: rotateX(3deg) rotateY(2deg);  /* subtle tilt on hover */
}

.card.flipped .card-inner {
  transform: rotateY(180deg);
}

.card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem;
  background: #2f2f2f;
  border: 1px solid rgba(56, 153, 255, 0.3);
  height: 100%;         /* fill card height */
  min-height: 350px;
}

.card-back {
  transform: rotateY(180deg);
}

/* LOGOS */
.card-logo {
  display: block;
  width: auto;         /* default: keep original width on desktop */
  max-width: 100%;     /* never exceed card width */
  max-height: 28px;    /* desktop size */
  margin: 0 auto 20px; /* center horizontally */
  object-fit: contain;
}

/* Gradual logo resizing before stacking */
@media (max-width: 1024px) {
  .card-logo {
    max-height: 24px;
    margin-bottom: 12px;
  }
}

/* Full width logos when stacked */
@media (max-width: 768px) {
  .showcase {
    grid-template-columns: 1fr; /* 1 card per row on mobile */
  }
  .card-logo {
    width: 75%;
    max-width: 75%;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 16px;
  }
}
/* Target only the last card logo on mobile */
@media (max-width: 768px) {
  .showcase .card:last-child .card-logo {
    width: 50%;        /* slightly smaller than 90% */
    max-width: 50%;
  }
}


/* CARD TEXT */
.card .subtitle {
  color: var(--accent);       /* restores #3899ff */
  font-weight: lighter;
  margin-bottom: 12px;        /* spacing */
  text-align: left;
  font-size: 17px;
}

.card .desc {
  color: var(--white);
  text-align: left;
  line-height: 1.6;
  margin-bottom: auto;
  font-size: 16px;
}

.card .readmore {
  color: var(--accent);
  font-size: 15px;
  margin-top: 8px;
  padding-bottom: 4px;
  text-align: left;
  transition: all 0.18s;
}

.card:hover .readmore {
  padding-left: 6px;
}



/* LINKS CARDS */
.links-grid{display:grid;grid-template-columns:repeat(3,1fr);;gap:18px;max-width:1400px;margin:40px auto;padding:0 20px;}
.link-card {
  background: #2f2f2f;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid rgba(56, 153, 255, 0.3);
  transition: transform 0.6s ease, box-shadow 0.6s ease, background 0.6s ease;
  transform-style: preserve-3d;
  will-change: transform;
  position: relative;
}

.link-card:hover {
  transform: perspective(800px) rotateX(6deg) rotateY(4deg) translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  background: linear-gradient(
    to bottom right,
    rgba(56, 153, 255, 0.06),
    rgba(56, 153, 255, 0.03)
  );
}

.link-card-inner {
  padding: 18px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  transform-style: preserve-3d;  /* for depth effect */
  height: 100%;
  width:100%;
}



.link-card * {
  transition: inherit;  /* inherits the transition from the parent .link-card */
}
.link-card::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cline x1='15' y1='3' x2='21' y2='3'/%3E%3Cline x1='21' y1='3' x2='21' y2='9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
.link-logo{height:34px;width:auto;border-radius:8px;background:transparent;display:block}
.link-title{font-weight:bold;font-size:20px}
.link-subtext{color:var(--muted);font-size:18px;line-height:1.3}
.visit-btn{width:100%;background:var(--accent);border:none;color:white;padding:10px;border-radius:10px;font-weight:700;cursor:pointer;margin-top:auto}
.visit-btn:hover{transform:translateY(-2px)}

/* FOOTER */
footer{padding:34px 20px;text-align:center;border-top:none;margin-top:0;background:transparent}
footer .site-logo{width:var(--footer-logo-width);height:auto;margin-bottom:12px}
@media(max-width:768px){ footer .site-logo{width:100px} }

/* small screens tweaks */
@media(max-width:980px){.showcase{justify-content:center}}
@media(max-width:560px){
  header{padding:10px}
  .wrap{padding:0 14px}
  .hero-content{padding:28px 14px}
  section{padding:40px 0}
  .card{min-height:380px;flex:1 1 90%}
  
}