/* ───────────────────────────────────────────────
   BLOMWE — Landing-page styles (plain CSS)
   ─────────────────────────────────────────────── */

/* ───  COLOUR PALETTE  ───────────────────────── */
:root {
  --black:   #080103;
  --white:   #ffffff;
  --main:    #FC016B;
  --accent1: #C1FF17;
  --accent2: #177CFF;
}

/* ───  RESET & GLOBAL  ───────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family: 'Poppins', sans-serif;
  background: var(--black);
  color: var(--white);
  line-height: 1.4;
}

/* ───  HIDE HEADER WHEN MENU OPEN  ───────────── */
body.menu-open .site-header {
  display: none;
}

/* ───  TYPE  ─────────────────────────────────── */
@font-face {
  font-family: 'Bebas Kai';
  src: local('Bebas Kai');
}
h1,h2,h3,h4,
nav ul,
.mobile-menu a,
.btn-primary {
  font-family: 'Bebas Kai','Bebas Neue',sans-serif;
  text-transform: uppercase;
  letter-spacing: .5px;
}

h1 { font-size: 88px; line-height: 96px;}
h2 { font-size: 60px; line-height: 64px; padding-bottom: 24px;}
h3 { font-size: 40px; line-height: 48px; padding-bottom: 16px;}
h4 { font-size: 24px; line-height: 30px; padding-bottom: 8px;}
p, li { font-size: 20px; }

@media (max-width: 1199px) {
  h1 {font-size: 64px; line-height: 72px;}
  h2 {font-size: 48px; line-height: 52px;}
  h3 {font-size: 32px; line-height: 40px;}
  h4 {font-size: 20px; line-height: 28px;}
  p {font-size: 16xpx; line-height: 24px;}
}

/* ───  HEADER  ───────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; z-index: 1000;
  width: 100%;
  padding: 0px 24px;
  padding-top: 4px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(8,1,3,.01);
  backdrop-filter: blur(150px);
}
.logo img { height: 84px; padding-top: 4px; }

@media(max-width:1199px) {
  .logo img { height: 64px; }
}

.main-nav ul {
  display: flex; gap: 32px; list-style: none;
}
.main-nav a {
  color: var(--white); text-decoration: none;
  transition: opacity .2s;
}
.main-nav a:hover { color: var(--accent1); }

.hamburger,
.close-menu {
  background: none; border: none; cursor: pointer;
}
.hamburger { display: none; }
@media(max-width:1199px) {
  .main-nav ul { display: none; }
  .hamburger { display: block; }
}

/* ─── MOBILE SIDEBAR ───────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background: rgba(8,1,3,0.30);
  backdrop-filter: blur(64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  transition: right 0.4s ease-in-out;
  z-index: 999;
}

/* remove bullets & center the list */
.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* sidebar items */
.mobile-menu li {
  margin: 0; /* ensure no default spacing */
}

/* links and hover */
.mobile-menu a {
  color: var(--white);
  font-size: 48px;
  text-decoration: none;
  transition: color 0.2s;
}
.mobile-menu a:hover {
  color: var(--accent1);
}

/* close button (×) */
.close-menu {
  position: absolute;
  top: 34px;    /* same as your hamburger */
  right: 34px;  /* ditto */
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  display: none; /* shown only when menu-open */
}

/* slide open */
.mobile-menu.open {
  right: 0;
}

/* show × and hide header */
body.menu-open .close-menu {
  display: block;
}
body.menu-open .site-header {
  display: none;
}

/* ───  BACKGROUND SQUARES  ───────────────────── */
.background-squares{
  position:fixed;
  inset:0;
  overflow:hidden;
  z-index:-1;          /* lives behind everything */
  pointer-events:none; /* no accidental clicks   */
}
.square{
  position:absolute;
  /* half of the squares use --main, half use --accent1 (set in JS) */
  background:var(--main);
  /* ↳ no rounded corners as requested */
  opacity:0;
  --offset-x:0px;
  --offset-y:0px;
  animation:fadeMove 10s linear infinite;
}
/* keyframes copied from the demo */
@keyframes fadeMove{
  0%{
    transform:translateX(calc(var(--start-x) + var(--offset-x)))
              translateY(calc(var(--start-y) + var(--offset-y)));
    opacity:0;
  }
  10%{opacity:var(--opacity);}
  90%{opacity:var(--opacity);}
  100%{
    transform:translateX(calc(var(--end-x) + var(--offset-x)))
              translateY(calc(var(--end-y) + var(--offset-y)));
    opacity:0;
  }
}

/* ───  HERO  ─────────────────────────────────── */
.hero {
  min-height: 100vh;    /* only hero is full-height */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  gap: 24px;
  position: relative;
}

/* marquee */
.marquee {
  width: 360px; overflow: hidden; white-space: nowrap;
}
.marquee span {
  display: inline-block;
  font-family: 'Bebas Kai','Bebas Neue',sans-serif;
  font-size: 36px;
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

.hero-piggy {margin-top: -48px; height: 600px; z-index: 90;}
.hero-h1 {margin-top: -240px; z-index: 100;}
.hero-p {margin-top: -4px; z-index: 100;}

@media(max-width:1199px) {
  .hero-piggy { height: 400px; }
  .hero-h1 {margin-top: -170px; z-index: 100;}
  .hero-p {margin-top: -4px; z-index: 100;}
  .marquee span {font-size: 24px;}
}

/* scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  transition: opacity .3s ease;     /* smooth fade */
}
.scroll-indicator img {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px); }
}
.scroll-indicator p { font-size: 16px; }

/* ───  BUTTONS  ─────────────────────────────── */
.btn-primary {
  position: relative;
  display: inline-block;
  padding: 16px 64px;
  background: var(--main);
  border: none;
  cursor: pointer;
  overflow: hidden;
  text-decoration: none;
  margin-top: 32px;
}
.btn-primary span {
  position: relative; z-index: 3;
  font-size: 24px; color: var(--white);
}
/* radial highlight */
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(
    circle at var(--x,50%) var(--y,50%),
    #ffffff35 0%, transparent 40%
  );
  opacity: 0; transition: opacity .25s;
  z-index: 1;
}
/* black overlay expand */
.btn-primary::after {
  content: "";
  position: absolute; inset: 0;
  background: #1702091e;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s ease-out;
  z-index: 2;
}
.btn-primary:hover::before { opacity: 1; }
.btn-primary:hover::after  { transform: scaleX(1); }

/* ───  SECTIONS  ─────────────────────────────── */
.content-section {
  /* no more min-height: let content define the height */
  padding: 64px;
  display: flex; justify-content: center; align-items: center;
}

.inner {
  width: 100%; max-width: 1200px;
  padding: 64px;
  text-align: center;
  background: rgba(255, 255, 255, 0.01);
  backdrop-filter: blur(64px);
  margin-top: 64px;
}

@media(max-width:1199px) {
  .content-section { padding: 16px; }
  .inner {  padding: 32px 16px; }
}

/* ───  COLUMNS  ─────────────────────────────── */

.column {
color: #ffffff;
text-decoration: none;
margin-top: 72px;
margin-bottom: 32px;
transition: all 0.3s ease;
}

.column:hover {
  transform: translateY(-8px);
  cursor: pointer;
}

.column h3 {
  transition: color 0.3s ease;
}

.column:hover h3 {
  color: var(--accent1);
}

/* ───  SERVICES  ─────────────────────────────── */

.inner-services {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media(max-width:1199px) {
  .inner-services { padding: 16px; display: grid; grid-template-columns: repeat(1, 1fr);   gap: 1px; }
}

.services-img {height: 96px; margin-bottom: 24px;} 

/* ───  PRICES  ─────────────────────────────── */

.inner-prices {
display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}

.price-img {height: 450px;}
.h-prices {margin-top: -200px;}


@media(max-width:1199px) {
  .inner-prices { padding: 16px; display: grid; grid-template-columns: repeat(1, 1fr);   gap: 1px; }
  .price-img {height: 360px;}
  .h-prices {margin-top: -150px;}
}

/* ───  PRICES OVERLAY  ─────────────────────────────────────────── */
.price-overlay{
  position:fixed; inset:0; z-index:2000;
  width:100%; height:100vh;
  background:rgba(8,1,3,.85);
  backdrop-filter:blur(64px);

  /* animation */
  transform:scaleX(0);        /* NEW – overlay starts “closed”         */
  transform-origin:center;    /* NEW – expand from the middle          */
  transition:
      transform .45s cubic-bezier(.4,0,.2,1),
      opacity    .30s ease;

  display:flex; justify-content:center; align-items:center;
  opacity:0; pointer-events:none;
}
.price-overlay.open{
  opacity:1; pointer-events:auto;
  transform:scaleX(1);        /* NEW – full width when “open”          */
}

.overlay-inner{
  width:100%; max-width:1200px; max-height:100%;
  overflow-y:auto; padding:64px 32px;
  margin-inline:auto;
}

/* navigation arrows */
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer;
  padding:0; margin:0 24px;
}
.nav-prev{left:0;}
.nav-next{right:0;}

/* close button */

.logo-overlay{
  position:absolute; top:0px; left:0px; padding: 24px;
  background: var(--black);
  backdrop-filter: blur(150px); border:none;
}

.close-overlay{
  border-radius: 600px;
  position:absolute; top:16px; right:16px;
  background:var(--black); border:none; cursor:pointer; padding: 24px;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
}

/* icon-swap on hover (desktop only) */
.ico-hv{display:none;}
.nav-arrow:hover .ico,
.close-overlay:hover .ico{display:none;}
.nav-arrow:hover .ico-hv,
.close-overlay:hover .ico-hv{display:block;}
.close-overlay:hover{transform:rotate(360deg);}

/* hide arrows on small screens (swipe takes over) */
@media(max-width:1199px){
  .nav-arrow{display:none;}
}


/* ───  ABOUT ─────────────────────────────── */

.inner-about {
display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.about-img {height: 360px; border-radius: 1000px; margin-bottom: 24px;}

@media(max-width:1199px) {
  .inner-about { padding: 16px; display: grid; grid-template-columns: repeat(1, 1fr);   gap: 1px; }
  .about-img {height: 360px;}
}

/* ────────── CONTACT ──────────────────────── */

.inner-contact {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

@media(max-width:1199px) {
  .inner-contact { padding: 16px; display: grid; grid-template-columns: repeat(1, 1fr);   gap: 1px; }
}

.contact-img { width:80px; margin-bottom: 24px;} 

/* ───  FOOTER  ───────────────────────────────── */
.site-footer {
  padding: 48px 24px;
  text-align: center;
}

/* ───  Minimal scrollbar inside the overlay  ──────────────────── */

/* WebKit browsers (Chrome, Edge, Safari) */
.overlay-inner::-webkit-scrollbar{
  width:6px;                    /* slim bar */
}
.overlay-inner::-webkit-scrollbar-track{
  background:transparent;       /* invisible track */
}
.overlay-inner::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.35); /* light thumb for contrast */
  border-radius:3px;
  transition:background .2s;
}
.overlay-inner::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.55); /* slightly brighter on hover */
}

/* Firefox */
.overlay-inner{
  scrollbar-width:thin;                              /* ~6 px */
  scrollbar-color:rgba(255,255,255,.35) transparent; /* thumb / track */
}