/* ─── RESET ─── */
*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0
}

:root{
  --pink:#fc95c8;
  --pk7:rgba(252,149,200,0.07);
  --pk15:rgba(252,149,200,0.15);
  --dark:#1a1a1a;
  --mid:#666;
  --light:#f8f8f8;
  --white:#fff;
  --r:16px;
  --ease:cubic-bezier(0.16,1,0.3,1);
}

html{
  scroll-behavior:smooth
}

body{
  font-family:'Inter',sans-serif;
  color:var(--dark);
  background:var(--white);
  overflow-x:hidden;
  min-width:320px
}


/* ─── CURSOR ─── */

@media(pointer:fine){

  .cursor,
  .cursor-ring{
    position:fixed;
    border-radius:50%;
    pointer-events:none;
    z-index:9999;
    transform:translate(-50%,-50%)
  }

  .cursor{
    width:10px;
    height:10px;
    background:var(--pink);
    transition:width .3s,height .3s,opacity .3s
  }

  .cursor-ring{
    width:36px;
    height:36px;
    border:1.5px solid rgba(252,149,200,.45);
    transition:width .3s,height .3s,opacity .3s
  }

  .cursor.h{
    width:16px;
    height:16px;
    opacity:.65
  }

  .cursor-ring.h{
    width:52px;
    height:52px;
    opacity:.35
  }
}


/* ─── NAV ─── */

nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:500;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(252,149,200,.08);
  height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(20px,4vw,52px);
  transition:box-shadow .4s;
}

nav.sc{
  box-shadow:0 4px 40px rgba(252,149,200,.07)
}

.nav-logo{
  cursor:pointer;
  transition:opacity .2s,transform .3s var(--ease);
  line-height:1;
  display:flex;
  align-items:center;
}

.nav-logo:hover{
  opacity:.7;
  transform:scale(1.06)
}

.nav-logo img{
  height:44px;
  width:auto;
  display:block;
}

.nav-links{
  display:flex;
  gap:clamp(12px,2.5vw,32px);
  list-style:none;
  align-items:center;
  flex-wrap:wrap
}

.nav-links a{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(.65rem,.9vw,.78rem);
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--dark);
  text-decoration:none;
  cursor:pointer;
  position:relative;
  padding-bottom:2px;
  white-space:nowrap
}

.nav-links a::after{
  content:'';
  position:absolute;
  bottom:0;
  left:0;
  width:0;
  height:1.5px;
  background:var(--pink);
  transition:width .3s var(--ease)
}

.nav-links a:hover{
  color:var(--pink)
}

.nav-links a:hover::after{
  width:100%
}

.nav-cta{
  background:var(--pink)!important;
  color:var(--white)!important;
  padding:9px clamp(14px,2vw,22px)!important;
  border-radius:50px;
  white-space:nowrap
}

.nav-cta::after{
  display:none!important
}

.nav-cta:hover{
  box-shadow:0 6px 22px rgba(252,149,200,.4)!important;
  opacity:.92!important
}

.snav{
  display:flex;
  gap:12px;
  align-items:center
}

.snav a{
  color:var(--mid);
  display:flex;
  transition:color .2s,transform .2s
}

.snav a:hover{
  color:var(--pink);
  transform:translateY(-2px)
}

.snav svg{
  width:17px;
  height:17px;
  fill:currentColor;
  overflow:visible
}


/* ─── HAMBURGER ─── */

.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:38px;
  height:38px;
  cursor:pointer;
  background:none;
  border:none;
  padding:4px;
  border-radius:8px;
  transition:background .2s;
  flex-shrink:0;
}

.nav-burger:hover{
  background:var(--pk15)
}

.nav-burger span{
  display:block;
  width:22px;
  height:2px;
  background:var(--dark);
  border-radius:2px;
  transition:transform .35s var(--ease),opacity .25s,background .2s;
  transform-origin:center
}

.nav-burger.open span:nth-child(1){
  transform:translateY(7px) rotate(45deg)
}

.nav-burger.open span:nth-child(2){
  opacity:0;
  transform:scaleX(0)
}

.nav-burger.open span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg)
}


/* ─── MOBILE NAV ─── */

@media(max-width:768px){

  .nav-burger{
    display:flex
  }

  .nav-links{
    display:none;
    flex-direction:column;
    gap:0;
    position:fixed;
    top:64px;
    left:0;
    right:0;
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:2px solid var(--pk15);
    padding:16px 0 24px;
    z-index:499;
    box-shadow:0 12px 40px rgba(0,0,0,.08);
    transform:translateY(-12px);
    opacity:0;
    transition:transform .35s var(--ease),opacity .3s;
    pointer-events:none
  }

  .nav-links.open{
    display:flex;
    transform:translateY(0);
    opacity:1;
    pointer-events:all
  }

  .nav-links li{
    width:100%
  }

  .nav-links a{
    display:block;
    width:100%;
    padding:13px clamp(24px,6vw,40px);
    font-size:.78rem;
    border-radius:0
  }

  .nav-links a::after{
    display:none
  }

  .nav-links a:hover{
    background:var(--pk7);
    color:var(--pink)
  }

  .nav-links .snav{
    padding:13px clamp(24px,6vw,40px);
    border-top:1px solid var(--pk15);
    margin-top:4px;
    justify-content:flex-start
  }

  .nav-links .nav-cta{
    margin:12px clamp(24px,6vw,40px) 0;
    width:calc(100% - clamp(48px,12vw,80px));
    display:block;
    text-align:center
  }
}


/* ─── PAGES ─── */

.page{
  display:none;
  min-height:100vh;
  padding-top:64px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .5s var(--ease),transform .5s var(--ease)
}

.page.active{
  display:block
}

.page.vis{
  opacity:1;
  transform:translateY(0)
}


/* ─── HERO ─── */

.hero{
  min-height:calc(100svh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:clamp(40px,8vw,80px) clamp(20px,5vw,60px);
  position:relative;
  overflow:hidden
}

.hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(
      ellipse 80% 60% at 70% 20%,
      rgba(252,149,200,.045) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 50% at 20% 80%,
      rgba(252,149,200,.03) 0%,
      transparent 70%
    );
  pointer-events:none
}

.sf{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden
}

.sp{
  position:absolute;
  color:var(--pink);
  opacity:0;
  animation:spf linear infinite
}

@keyframes spf{
  0%{
    opacity:0;
    transform:translateY(0) rotate(0deg)
  }
  15%{
    opacity:.5
  }
  85%{
    opacity:.2
  }
  100%{
    opacity:0;
    transform:translateY(-100px) rotate(180deg)
  }
}

.hero-eyebrow{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(.65rem,.9vw,.8rem);
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:20px;
  opacity:0;
  animation:fup .6s var(--ease) .2s forwards
}

.hero h1{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2rem,5.5vw,4.8rem);
  font-weight:900;
  line-height:1.08;
  max-width:min(820px,90vw);
  margin-bottom:22px;
  opacity:0;
  animation:fup .7s var(--ease) .36s forwards;
  letter-spacing:-.02em
}

.hero h1 em{
  color:var(--pink);
  font-style:normal
}

.hero p{
  font-size:clamp(.9rem,1.5vw,1.1rem);
  color:var(--mid);
  max-width:min(500px,88vw);
  line-height:1.75;
  margin-bottom:44px;
  opacity:0;
  animation:fup .7s var(--ease) .52s forwards
}

.hero-btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  justify-content:center;
  opacity:0;
  animation:fup .7s var(--ease) .68s forwards
}

@keyframes fup{
  from{
    opacity:0;
    transform:translateY(26px)
  }
  to{
    opacity:1;
    transform:translateY(0)
  }
}


/* ─── BUTTONS ─── */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(.72rem,.85vw,.84rem);
  letter-spacing:.07em;
  text-transform:uppercase;
  border-radius:50px;
  cursor:pointer;
  transition:transform .25s,box-shadow .25s,background .25s,color .25s;
  text-decoration:none;
  white-space:nowrap;
  padding:clamp(10px,1.5vw,14px) clamp(20px,2.5vw,34px);
  border:none
}

.btn-p{
  background:var(--pink);
  color:var(--white);
  position:relative;
  overflow:hidden
}

.btn-p::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(255,255,255,.14);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease)
}

.btn-p:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(252,149,200,.45)
}

.btn-p:hover::before{
  transform:scaleX(1)
}

.btn-o{
  background:transparent;
  color:var(--pink);
  border:2px solid var(--pink)
}

.btn-o:hover{
  background:var(--pink);
  color:var(--white);
  transform:translateY(-3px);
  box-shadow:0 12px 35px rgba(252,149,200,.35)
}

.btn-w{
  background:var(--white);
  color:var(--pink)
}

.btn-w:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(0,0,0,.12)
}


/* ─── MARQUEE ─── */

.ticker{
  overflow:hidden;
  border-top:1px solid rgba(252,149,200,.1);
  border-bottom:1px solid rgba(252,149,200,.1);
  padding:16px 0;
  background:var(--pk7)
}

.ticker-track{
  display:flex;
  width:max-content;
  animation:tick 26s linear infinite
}

.ticker-track:hover{
  animation-play-state:paused
}

.ticker-item{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(.62rem,.75vw,.73rem);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
  padding:0 36px;
  white-space:nowrap
}

.ticker-dot{
  color:rgba(252,149,200,.35)
}

@keyframes tick{
  from{
    transform:translateX(0)
  }
  to{
    transform:translateX(-50%)
  }
}


/* ─── REALISTIC CONVEYOR BELT ─── */

.brands-section{
  padding:clamp(50px,7vw,80px) 0;
  background:#f0ebe6;
  overflow:hidden;
  position:relative
}

.brands-label{
  text-align:center;
  font-family:'Montserrat',sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:clamp(24px,3.5vw,38px);
  position:relative;
  z-index:1
}

.belt-outer{
  width:100%;
  overflow:hidden;
  position:relative
}

.roller-bed{
  position:relative;
  width:100%;
  height:clamp(200px,26vw,320px);
  overflow:hidden;
  background:
    repeating-linear-gradient(
      90deg,
      #b8afa8 0px,#b8afa8 3px,
      #c9c1ba 3px,#c9c1ba 6px,
      #d8d0ca 6px,#d8d0ca 10px,
      #e8e2dc 10px,#e8e2dc 16px,
      #f5f0eb 16px,#f5f0eb 22px,
      #fdfaf8 22px,#fdfaf8 26px,
      #f0ebe5 26px,#f0ebe5 30px,
      #ddd8d2 30px,#ddd8d2 34px,
      #cac3bc 34px,#cac3bc 38px
    );
  background-size:38px 100%;
  animation:rollersScroll .5s linear infinite
}

@keyframes rollersScroll{
  from{
    background-position-x:38px
  }
  to{
    background-position-x:0
  }
}

.roller-bed::before,
.roller-bed::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  z-index:5;
  pointer-events:none
}

.roller-bed::before{
  top:0;
  height:18px;
  background:linear-gradient(
    180deg,
    #7a706a 0px,#7a706a 2px,
    #9c918b 2px,#9c918b 5px,
    #b5aca6 5px,#b5aca6 9px,
    #cac3bc 9px,#cac3bc 13px,
    #ddd8d4 13px,#ddd8d4 16px,
    #ece8e5 16px,#ece8e5 18px
  );
  box-shadow:0 2px 6px rgba(0,0,0,.18)
}

.roller-bed::after{
  bottom:0;
  height:18px;
  background:linear-gradient(
    0deg,
    #7a706a 0px,#7a706a 2px,
    #9c918b 2px,#9c918b 5px,
    #b5aca6 5px,#b5aca6 9px,
    #cac3bc 9px,#cac3bc 13px,
    #ddd8d4 13px,#ddd8d4 16px,
    #ece8e5 16px,#ece8e5 18px
  );
  box-shadow:0 -2px 6px rgba(0,0,0,.18)
}

.belt-outer::before,
.belt-outer::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  width:clamp(60px,8vw,120px);
  z-index:10;
  pointer-events:none
}

.belt-outer::before{
  left:0;
  background:linear-gradient(
    90deg,
    #f0ebe6 0%,
    rgba(240,235,230,0) 100%
  )
}

.belt-outer::after{
  right:0;
  background:linear-gradient(
    270deg,
    #f0ebe6 0%,
    rgba(240,235,230,0) 100%
  )
}

.trays-track{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  display:flex;
  align-items:center;
  gap:clamp(28px,4vw,52px);
  padding:0 clamp(32px,5vw,60px);
  will-change:transform;
  z-index:3
}

.airport-tray{
  flex-shrink:0;
  position:relative;
  width:clamp(160px,20vw,240px);
  height:clamp(120px,15vw,180px);
  filter:
    drop-shadow(0 8px 16px rgba(80,60,50,.28))
    drop-shadow(0 2px 4px rgba(80,60,50,.18))
}

.tray-shell{
  position:absolute;
  inset:0;
  border-radius:clamp(10px,1.5vw,16px);
  background:linear-gradient(
    160deg,
    #f0eeeb 0%,
    #e8e4e0 40%,
    #dedad6 100%
  );
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.9),
    inset 3px 0 6px rgba(0,0,0,.06),
    inset -3px 0 6px rgba(0,0,0,.06),
    inset 0 -3px 8px rgba(0,0,0,.1)
}

.tray-well{
  position:absolute;
  inset:clamp(8px,1.2vw,14px);
  border-radius:clamp(6px,1vw,10px);
  background:linear-gradient(
    160deg,
    #edeae6 0%,
    #e4e0dc 60%,
    #dbd7d3 100%
  );
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,.12),
    inset 0 0 0 1px rgba(0,0,0,.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(4px,.8vw,8px);
  padding:clamp(8px,1.2vw,14px)
}

.tray-emoji{
  font-size:clamp(1.6rem,3vw,2.4rem);
  line-height:1;
  display:block
}

.tray-name{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(.48rem,.6vw,.6rem);
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#7a706a;
  text-align:center;
  line-height:1.3;
  white-space:nowrap
}

.tray-tag{
  display:inline-flex;
  align-items:center;
  gap:3px;
  background:var(--pink);
  color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:clamp(.38rem,.5vw,.48rem);
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:20px
}

.tray-well.sticker-well{
  background:linear-gradient(
    160deg,
    #fceef4 0%,
    #f7e0eb 60%,
    #f0d4e4 100%
  )
}

.tray-well.sticker-well .tray-name{
  color:#c4758a
}


/* ─── SECTIONS ─── */

section{
  padding:clamp(60px,8vw,100px) clamp(20px,4vw,52px)
}

.container{
  max-width:1120px;
  margin:0 auto;
  width:100%
}

/* Full-width container — touches screen edges */
.container-full{
  width:100%;
  max-width:100%;
  padding:0 clamp(20px,4vw,52px)
}

.s-label{
  font-family:'Montserrat',sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:14px
}

.s-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.7rem,3.5vw,2.8rem);
  font-weight:900;
  line-height:1.1;
  margin-bottom:16px;
  max-width:min(620px,100%);
  letter-spacing:-.02em
}

.s-sub{
  color:var(--mid);
  font-size:clamp(.88rem,1.1vw,1rem);
  line-height:1.75;
  max-width:min(540px,100%);
  margin-bottom:clamp(36px,5vw,60px)
}


/* ─── WHO ─── */

.who{
  background:var(--light)
}

.who-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:clamp(32px,6vw,90px);
  align-items:center
}

@media(max-width:768px){
  .who-grid{
    grid-template-columns:1fr
  }
}

.who-text p{
  color:var(--mid);
  line-height:1.82;
  margin-bottom:16px;
  font-size:clamp(.85rem,1.1vw,.97rem)
}

.stat-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

.stat-card{
  background:var(--white);
  border-radius:var(--r);
  padding:clamp(18px,2.5vw,28px) clamp(16px,2vw,22px);
  border:1px solid rgba(252,149,200,.1);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}

.stat-card:hover{
  transform:translateY(-6px) rotate(-.5deg);
  box-shadow:0 20px 50px rgba(252,149,200,.12)
}

.stat-num{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:900;
  color:var(--pink);
  line-height:1;
  margin-bottom:5px
}

.stat-lbl{
  font-size:clamp(.7rem,.85vw,.78rem);
  color:var(--mid);
  font-weight:500;
  line-height:1.4
}


/* ─── SERVICES / WHAT I DO — FLUID WATER CARD STACK ─── */

.card-stack-scene{
  position:relative;
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:clamp(32px,5vw,72px);
  min-height:460px;
  perspective:1400px;
  isolation:isolate;
}

.card-stack-wrapper{
  position:relative;
  flex-shrink:0;
  width:clamp(280px,38vw,460px);
  height:clamp(320px,42vw,480px);
  transform-style:preserve-3d;
}

.card-stack-hint{
  font-family:'Montserrat',sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
  opacity:.65;
  margin-bottom:28px;
  display:flex;
  align-items:center;
  gap:8px
}

.card-stack-hint::before{
  content:'';
  width:28px;
  height:1.5px;
  background:var(--pink);
  opacity:.5;
  display:block
}

.srv-stack-card{
  --mx:0;
  --my:0;
  --rx:0deg;
  --ry:0deg;
  --rz:0deg;
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 10%,rgba(255,255,255,.98),transparent 30%),
    linear-gradient(145deg,#fff 0%,#fffafd 48%,#fff 100%);
  border-radius:28px;
  padding:clamp(28px,4vw,44px) clamp(24px,3.5vw,40px);
  display:flex;
  flex-direction:column;
  gap:18px;
  box-shadow:
    0 22px 60px rgba(252,149,200,.12),
    0 5px 18px rgba(0,0,0,.055),
    inset 0 1px 0 rgba(255,255,255,.95);
  border:1px solid rgba(252,149,200,.18);
  cursor:grab;
  user-select:none;
  transform-origin:center bottom;
  transform:
    translate3d(calc(var(--mx) * 1px),calc(var(--my) * 1px),0)
    rotateX(var(--rx))
    rotateY(var(--ry))
    rotateZ(var(--rz));
  transition:
    transform .9s cubic-bezier(.16,1,.3,1),
    box-shadow .6s ease,
    opacity .45s ease;
  will-change:transform;
  overflow:hidden;
  backface-visibility:hidden;
}

/* Liquid glass / water surface */
.srv-stack-card::before{
  content:'';
  position:absolute;
  inset:-25%;
  pointer-events:none;
  opacity:.55;
  background:
    radial-gradient(ellipse 38% 24% at 22% 22%,rgba(255,255,255,.92),transparent 65%),
    radial-gradient(ellipse 30% 22% at 78% 72%,rgba(252,149,200,.13),transparent 70%),
    linear-gradient(115deg,transparent 20%,rgba(255,255,255,.5) 46%,transparent 68%);
  transform:
    translate3d(calc(var(--water-x,0) * 1px),calc(var(--water-y,0) * 1px),0)
    rotate(var(--water-rotate,0deg));
  filter:url(#beliona-water);
  animation:belionaWaterDrift 8s ease-in-out infinite alternate;
  mix-blend-mode:soft-light;
}

.srv-stack-card::after{
  content:'';
  position:absolute;
  inset:1px;
  border-radius:27px;
  pointer-events:none;
  background:
    linear-gradient(
      120deg,
      transparent 20%,
      rgba(255,255,255,.7) 42%,
      rgba(252,149,200,.07) 49%,
      transparent 66%
    );
  background-size:220% 100%;
  animation:belionaLiquidShimmer 5.5s cubic-bezier(.45,0,.55,1) infinite;
  opacity:.7;
}

.srv-stack-card > *{
  position:relative;
  z-index:2;
}

.srv-stack-card:active{
  cursor:grabbing
}

.srv-stack-card.is-top{
  z-index:10
}

.srv-stack-card.behind-1{
  z-index:9;
  transform:translate3d(0,14px,0) scale(.96) rotateZ(-1.5deg);
  pointer-events:none
}

.srv-stack-card.behind-2{
  z-index:8;
  transform:translate3d(0,26px,0) scale(.92) rotateZ(2deg);
  pointer-events:none
}

.srv-stack-card.behind-3{
  z-index:7;
  transform:translate3d(0,36px,0) scale(.88) rotateZ(-2.5deg);
  pointer-events:none
}

.srv-stack-card.throwing{
  transition:
    transform .78s cubic-bezier(.22,.9,.2,1),
    opacity .55s ease !important;
  pointer-events:none
}

.srv-stack-card .srv-icon{
  width:58px;
  height:58px;
  background:
    radial-gradient(circle at 30% 25%,#fff,transparent 34%),
    linear-gradient(135deg,#fce7f3,#ffd6ec);
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:
    0 10px 24px rgba(252,149,200,.14),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}

.srv-stack-card:hover .srv-icon{
  transform:translateY(-3px) rotate(-3deg) scale(1.04);
}

.srv-stack-card .srv-icon svg{
  width:26px;
  height:26px;
  stroke:#e879a0;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.srv-stack-card h3{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.15rem,2vw,1.65rem);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em
}

.srv-stack-card p{
  color:var(--mid);
  font-size:clamp(.82rem,1vw,.92rem);
  line-height:1.8
}

.srv-stack-card .card-num{
  font-family:'Montserrat',sans-serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--pink);
  text-transform:uppercase
}

@keyframes belionaWaterDrift{
  0%{
    transform:translate3d(-4%,-2%,0) rotate(-1deg) scale(1.02)
  }
  50%{
    transform:translate3d(3%,2%,0) rotate(1.5deg) scale(1.06)
  }
  100%{
    transform:translate3d(-1%,4%,0) rotate(-.5deg) scale(1.03)
  }
}

@keyframes belionaLiquidShimmer{
  0%,15%{background-position:180% 0}
  65%,100%{background-position:-40% 0}
}

@media(prefers-reduced-motion:reduce){
  .srv-stack-card::before,
  .srv-stack-card::after{
    animation:none
  }
}

/* ─── TOOLS GRID ─── */

.tools-wrap{
  display:grid;
  grid-template-columns:repeat(
    auto-fill,
    minmax(min(170px,100%),1fr)
  );
  gap:14px;
  margin-top:20px
}

.tool-card{
  background:var(--white);
  border:1px solid rgba(252,149,200,.1);
  border-radius:14px;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:all .3s var(--ease)
}

.tool-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(252,149,200,.1);
  border-color:rgba(252,149,200,.25)
}

.tool-logo{
  height:40px;
  display:flex;
  align-items:center
}

.tool-logo img{
  height:100%;
  width:auto;
  object-fit:contain;
  max-width:140px
}

.tool-name{
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:700;
  color:var(--dark)
}

.tool-desc{
  font-size:.72rem;
  color:var(--mid);
  line-height:1.55
}


/* ─── HOW ─── */

.how{
  background:var(--light)
}

.how-steps{
  display:grid;
  grid-template-columns:repeat(
    auto-fit,
    minmax(min(200px,100%),1fr)
  );
  gap:24px
}

.step-card{
  background:var(--white);
  border-radius:var(--r);
  padding:clamp(22px,3vw,32px) clamp(18px,2.5vw,26px);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)
}

.step-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 50px rgba(252,149,200,.1)
}

.step-num{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.5rem,4vw,3.5rem);
  font-weight:900;
  line-height:1;
  margin-bottom:16px;
  background:linear-gradient(
    120deg,
    #d1477a,
    #e8609a,
    #fc95c8,
    #f472b6,
    #d1477a,
    #ffb6d9,
    #e8609a
  );
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradFlow 8s ease-in-out infinite
}

.step-card h3{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(.85rem,1vw,.92rem);
  font-weight:700;
  margin-bottom:8px
}

.step-card p{
  font-size:clamp(.78rem,.9vw,.83rem);
  color:var(--mid);
  line-height:1.7
}


/* ═══════════════════════════════════════
   PRICING — FULL WIDTH, BIGGER, 50/50
   ═══════════════════════════════════════ */

.pricing-section-wrap{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  padding:0 clamp(20px,4vw,64px)
}

.price-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,40px);
  align-items:stretch;
  width:100%;
  max-width:1400px;
  margin:clamp(36px,5vw,56px) auto 0
}

@media(max-width:640px){
  .price-grid-2{
    grid-template-columns:1fr;
    max-width:520px
  }
}

/* Base card */
.price-card-2{
  background:#fff;
  border:1.5px solid rgba(252,149,200,.18);
  border-radius:32px;
  padding:clamp(36px,5vw,60px) clamp(28px,4vw,52px);
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:transform .35s cubic-bezier(.34,1.3,.64,1),
              box-shadow .35s ease,
              border-color .3s ease;
  position:relative;
  overflow:hidden
}

.price-card-2:hover{
  transform:translateY(-10px) scale(1.02);
  box-shadow:0 28px 72px rgba(252,149,200,.22);
  border-color:rgba(252,149,200,.45)
}

/* Premium — fully pink */
.price-card-2.premium{
  background:linear-gradient(145deg,#fc95c8 0%,#f472b6 50%,#e879a0 100%);
  border-color:transparent;
  box-shadow:0 20px 64px rgba(232,105,160,.42);
  transform:translateY(-6px)
}

.price-card-2.premium:hover{
  transform:translateY(-16px) scale(1.03);
  box-shadow:0 36px 90px rgba(232,105,160,.52)
}

/* Text overrides for premium */
.price-card-2.premium .plan-n,
.price-card-2.premium .plan-p{
  color:#fff
}

.price-card-2.premium .plan-s{
  color:rgba(255,255,255,.78)
}

.price-card-2.premium .plan-f li{
  color:rgba(255,255,255,.9)
}

.price-card-2.premium .plan-f li::before{
  color:#fff
}

.price-card-2.premium .plan-note{
  color:rgba(255,255,255,.65)
}

/* Badge */
.price-card-2 .plan-badge{
  font-family:'Montserrat',sans-serif;
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:100px;
  display:inline-block;
  margin-bottom:24px;
  width:fit-content
}

.price-card-2.premium .plan-badge{
  background:rgba(255,255,255,.22);
  color:#fff
}

/* Plan name */
.price-card-2 .plan-n{
  font-family:'Montserrat',sans-serif;
  font-size:.92rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--dark);
  margin-bottom:10px
}

/* Price */
.price-card-2 .plan-p{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(2.8rem,5vw,4rem);
  font-weight:900;
  color:var(--dark);
  line-height:1;
  margin-bottom:10px
}

/* Subtitle */
.price-card-2 .plan-s{
  font-size:.84rem;
  color:var(--mid);
  margin-bottom:32px;
  line-height:1.5
}

/* Feature list */
.price-card-2 .plan-f{
  list-style:none;
  padding:0;
  margin:0 0 36px;
  display:flex;
  flex-direction:column;
  gap:16px;
  flex:1
}

.price-card-2 .plan-f li{
  font-size:.9rem;
  color:var(--mid);
  padding-left:24px;
  position:relative;
  line-height:1.55
}

.price-card-2 .plan-f li::before{
  content:'✦';
  position:absolute;
  left:0;
  color:var(--pink);
  font-size:.6rem;
  top:5px
}

/* Note */
.price-card-2 .plan-note{
  font-size:.75rem;
  color:var(--mid);
  margin-top:16px;
  line-height:1.65
}

/* CTA button */
.price-card-2 .btn{
  width:100%;
  text-align:center;
  display:block;
  box-sizing:border-box;
  padding:16px 28px;
  font-size:.82rem
}

/* White button for premium */
.price-card-2.premium .btn-p{
  background:#fff;
  color:#e879a0;
  box-shadow:0 4px 20px rgba(0,0,0,.12)
}

.price-card-2.premium .btn-p:hover{
  background:#fff;
  opacity:.92;
  transform:translateY(-3px);
  box-shadow:0 10px 32px rgba(0,0,0,.16)
}

/* Whole-tier clickable */
.tier-clickable{
  text-decoration:none;
  color:inherit;
  display:flex;
  flex-direction:column;
  cursor:pointer
}

.tier-clickable *{cursor:pointer}
.tier-clickable .btn{pointer-events:none}


/* ─── CATEGORY FILTER ─── */

.cat-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:36px
}

.cat-btn{
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:8px 20px;
  border-radius:50px;
  border:1.5px solid rgba(252,149,200,.2);
  background:transparent;
  color:var(--mid);
  cursor:pointer;
  transition:all .25s
}

.cat-btn:hover,
.cat-btn.active{
  background:var(--pink);
  color:var(--white);
  border-color:var(--pink)
}


/* ─── WORK GRID ─── */

.work-grid{
  display:grid;
  grid-template-columns:repeat(
    auto-fill,
    minmax(min(290px,100%),1fr)
  );
  gap:22px
}

.wcard{
  border-radius:var(--r);
  overflow:hidden;
  background:var(--light);
  cursor:pointer;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
  border:1px solid rgba(252,149,200,.07);
  position:relative
}

.wcard:hover{
  transform:translateY(-9px) scale(1.01);
  box-shadow:0 28px 70px rgba(252,149,200,.14)
}

.wcard-img{
  aspect-ratio:940/788;
  width:100%;
  background:linear-gradient(
    135deg,
    var(--pk7),
    var(--pk15)
  );
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(2.5rem,4vw,3.5rem);
  overflow:hidden;
  position:relative
}

.wcard-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  transition:transform .6s var(--ease)
}

.wcard:hover .wcard-img img{
  transform:scale(1.07)
}

.wcard-img .ep{
  font-size:3rem;
  position:absolute
}

.cat-tag{
  position:absolute;
  top:12px;
  left:12px;
  background:var(--pink);
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  font-size:.6rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:4px 12px;
  border-radius:50px;
  z-index:2
}

.wcard-body{
  padding:clamp(16px,2vw,22px) clamp(18px,2.5vw,24px)
}

.wcard-body h3{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:clamp(.88rem,1.1vw,.98rem);
  margin-bottom:4px
}

.wcard-body p{
  font-size:clamp(.75rem,.85vw,.8rem);
  color:var(--mid)
}

.wcard-overlay{
  position:absolute;
  inset:0;
  background:rgba(252,149,200,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity .3s;
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase
}

.wcard:hover .wcard-overlay{
  opacity:1
}


/* ─── PROJECT PAGE ─── */

.proj-hero{
  aspect-ratio:940/788;
  width:100%;
  max-height:520px;
  background:linear-gradient(
    135deg,
    var(--pk7),
    var(--pk15)
  );
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(4rem,8vw,6rem);
  overflow:hidden;
  position:relative
}

.proj-hero img{
  width:100%;
  height:100%;
  object-fit:contain
}

.proj-content{
  max-width:min(860px,100%);
  margin:0 auto;
  padding:clamp(32px,5vw,60px) clamp(20px,4vw,48px)
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:'Montserrat',sans-serif;
  font-size:.72rem;
  font-weight:700;
  color:var(--pink);
  cursor:pointer;
  margin-bottom:32px;
  transition:gap .25s,opacity .2s;
  text-transform:uppercase;
  letter-spacing:.1em;
  background:none;
  border:none
}

.back-btn:hover{
  gap:16px;
  opacity:.7
}

.proj-meta{
  display:flex;
  gap:clamp(20px,4vw,44px);
  padding:24px 0;
  border-top:1px solid rgba(252,149,200,.1);
  border-bottom:1px solid rgba(252,149,200,.1);
  margin:24px 0;
  flex-wrap:wrap
}

.m-lbl{
  font-family:'Montserrat',sans-serif;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:4px
}

.m-val{
  font-size:.86rem;
  font-weight:600
}

.proj-imgs{
  display:grid;
  grid-template-columns:repeat(
    auto-fill,
    minmax(min(200px,100%),1fr)
  );
  gap:14px;
  margin:28px 0
}

.img-slot{
  aspect-ratio:940/788;
  width:100%;
  background:var(--light);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:2.5rem;
  position:relative;
  border:2px dashed rgba(252,149,200,.2)
}

.img-slot img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block
}

.pdf-placeholder{
  margin:36px 0;
  border:2px dashed rgba(252,149,200,.25);
  border-radius:14px;
  padding:clamp(30px,4vw,50px);
  text-align:center;
  background:var(--pk7)
}

.pdf-placeholder p{
  font-family:'Montserrat',sans-serif;
  font-size:.8rem;
  font-weight:600;
  color:var(--mid)
}

.pdf-placeholder span{
  color:var(--pink)
}

.pdf-label{
  font-family:'Montserrat',sans-serif;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--pink);
  margin-bottom:14px;
  display:block
}


/* ─── SUBSCRIBE PAGE ─── */

.sub-page{
  min-height:calc(100svh - 64px);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:clamp(40px,6vw,80px) clamp(20px,4vw,48px)
}

.sub-inner{
  max-width:min(560px,100%)
}

.warn-box{
  background:rgba(252,149,200,.06);
  border:1px solid rgba(252,149,200,.2);
  border-radius:14px;
  padding:clamp(16px,2.5vw,22px) clamp(20px,3vw,28px);
  margin:28px 0;
  font-size:clamp(.8rem,1vw,.88rem);
  color:var(--mid);
  line-height:1.65
}

.warn-box strong{
  color:var(--pink)
}


/* ─── FOOTER ─── */

footer{
  background:var(--dark);
  color:rgba(255,255,255,.4);
  text-align:center;
  padding:clamp(32px,5vw,48px) clamp(20px,4vw,48px);
  font-size:.78rem
}

.f-logo{
  display:block;
  margin-bottom:14px
}

.f-logo img{
  height:52px;
  width:auto;
  display:inline-block
}

.f-divider{
  width:36px;
  height:2px;
  background:var(--pink);
  margin:0 auto 18px;
  border-radius:1px
}

.f-socials{
  display:flex;
  gap:18px;
  justify-content:center;
  margin-bottom:20px
}

.f-socials a{
  color:rgba(255,255,255,.45);
  display:flex;
  transition:color .2s,transform .2s
}

.f-socials a:hover{
  color:var(--pink);
  transform:translateY(-3px)
}

.f-socials svg{
  width:19px;
  height:19px;
  fill:currentColor
}

footer p span{
  color:var(--pink)
}


/* ─── MODAL ─── */

.overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(26,26,26,.65);
  backdrop-filter:blur(10px);
  z-index:600;
  align-items:center;
  justify-content:center;
  padding:20px
}

.overlay.show{
  display:flex
}

.modal{
  background:var(--white);
  border-radius:24px;
  padding:clamp(32px,5vw,52px) clamp(24px,4vw,44px);
  max-width:min(440px,100%);
  text-align:center;
  box-shadow:0 40px 100px rgba(0,0,0,.18);
  animation:fup .45s var(--ease) forwards;
  width:100%
}

.modal h3{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.1rem,2vw,1.35rem);
  font-weight:900;
  margin:16px 0 10px
}

.modal p{
  color:var(--mid);
  font-size:clamp(.82rem,1vw,.9rem);
  line-height:1.7;
  margin-bottom:28px
}

.modal-btns{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap
}

.btn-cancel{
  background:var(--light);
  color:var(--dark);
  padding:12px 26px;
  border-radius:50px;
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.8rem;
  border:none;
  cursor:pointer;
  transition:background .2s
}

.btn-cancel:hover{
  background:#e5e5e5
}


/* ─── FAQ (pricing page) ─── */

.faq-item{
  border-bottom:1px solid #eee;
  padding:24px 0;
  transition:background .2s ease, padding-left .2s ease
}

.faq-item:hover{
  background:rgba(252,149,200,.03);
  padding-left:8px;
  border-radius:8px
}

.faq-q{
  font-family:'Montserrat',sans-serif;
  font-weight:700;
  font-size:.95rem;
  margin-bottom:8px;
  color:var(--dark)
}

.faq-a{
  color:var(--mid);
  font-size:.88rem;
  line-height:1.75;
  margin:0
}


/* ─── REVEAL ─── */

.rv{
  opacity:0;
  transform:translateY(40px) scale(0.97);
  filter:blur(4px);
  transition:
    opacity .75s var(--ease),
    transform .75s var(--ease),
    filter .6s var(--ease)
}

.rv.vis{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0)
}

.rv-l{
  opacity:0;
  transform:translateX(-48px) scale(0.97);
  filter:blur(4px);
  transition:
    opacity .75s var(--ease),
    transform .75s var(--ease),
    filter .6s var(--ease)
}

.rv-l.vis{
  opacity:1;
  transform:translateX(0) scale(1);
  filter:blur(0)
}

.rv-r{
  opacity:0;
  transform:translateX(48px) scale(0.97);
  filter:blur(4px);
  transition:
    opacity .75s var(--ease),
    transform .75s var(--ease),
    filter .6s var(--ease)
}

.rv-r.vis{
  opacity:1;
  transform:translateX(0) scale(1);
  filter:blur(0)
}

.tool-card.rv{
  opacity:0;
  transform:translateY(36px) scale(0.88);
  filter:blur(5px);
  transition:
    opacity .65s var(--ease),
    transform .65s var(--ease),
    filter .5s var(--ease)
}

.tool-card.rv.vis{
  opacity:1;
  transform:translateY(0) scale(1);
  filter:blur(0)
}

.d1{transition-delay:.05s}
.d2{transition-delay:.13s}
.d3{transition-delay:.21s}
.d4{transition-delay:.29s}
.d5{transition-delay:.08s}
.d6{transition-delay:.16s}
.d7{transition-delay:.24s}
.d8{transition-delay:.32s}
.d9{transition-delay:.40s}

.s-label.rv{
  opacity:0;
  transform:translateX(-20px);
  filter:blur(2px);
  transition:
    opacity .55s var(--ease),
    transform .55s var(--ease),
    filter .4s var(--ease)
}

.s-label.rv.vis{
  opacity:1;
  transform:translateX(0);
  filter:blur(0)
}


/* ─── HONEY-MIXING GRADIENT TEXT ─── */

@keyframes gradFlow{
  0%  {background-position:0% 50%}
  25% {background-position:50% 100%}
  50% {background-position:100% 50%}
  75% {background-position:50% 0%}
  100%{background-position:0% 50%}
}

.grad-text{
  background:linear-gradient(
    120deg,
    #fc95c8,
    #ffb6d9,
    #ffd6ec,
    #f9a8d4,
    #e879a0,
    #fce7f3,
    #fc95c8,
    #ffcce8,
    #f472b6
  );
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradFlow 8s ease-in-out infinite
}