*{margin:0;padding:0;box-sizing:border-box}
:root{
  --o:#00b4d8;--d:#0077b6;--s:#caf0f8;
  --y:#ffe800;--c:#ff3c3c;--g:#06d6a0;--m:#ff6bdf;
  --cream:#fffbf0;
}
body{font-family:'Zen Maru Gothic',sans-serif;background:#0a1628;overflow-x:hidden}

/* ===== NEON TICKER ===== */
.ticker{
  background:linear-gradient(90deg,#ff0080,#ff6b00,#ffe800,#00ff88,#00b4ff,#b44fff,#ff0080);
  background-size:400%;
  animation:tickerGrad 4s linear infinite;
  padding:10px 0; overflow:hidden; white-space:nowrap;
  position:relative; z-index:100;
  box-shadow:0 3px 20px rgba(255,100,0,0.5);
}
@keyframes tickerGrad{from{background-position:0%}to{background-position:400%}}
.ticker-inner{
  display:inline-block;
  animation:tickerMove 20s linear infinite;
  font-weight:900; font-size:1rem; color:white;
  text-shadow:0 0 10px rgba(0,0,0,0.5);
  letter-spacing:0.1em;
}
@keyframes tickerMove{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}

/* ===== HERO ===== */
.hero{
  position:relative; min-height:100vh; overflow:hidden;
  background:linear-gradient(160deg,#0a0520 0%,#0d1b6e 30%,#0a4a8a 55%,#0077b6 70%,#00b4d8 82%,#ffe800 92%,#ff8c00 100%);
  display:flex;align-items:center;justify-content:center;
}

/* starfield */
.stars{position:absolute;inset:0;pointer-events:none}
.star{
  position:absolute;background:white;border-radius:50%;
  animation:twinkle 2s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:0.2;transform:scale(1)}50%{opacity:1;transform:scale(1.5)}}

/* aurora */
.aurora{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 120% 40% at 20% 30%, rgba(0,255,180,0.15) 0%, transparent 70%),
    radial-gradient(ellipse 100% 35% at 80% 20%, rgba(100,0,255,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 80% 30% at 50% 40%, rgba(0,180,255,0.1) 0%, transparent 70%);
  animation:auroraMove 8s ease-in-out infinite alternate;
}
@keyframes auroraMove{
  from{transform:translateY(0) scaleX(1)}
  to{transform:translateY(-20px) scaleX(1.05)}
}

/* neon sun */
.sun{
  position:absolute;top:5%;right:8%;
  width:clamp(90px,13vw,160px);height:clamp(90px,13vw,160px);
  background:radial-gradient(circle at 38% 35%,#fff9a0,#FFE800 35%,#FF8C00 65%,#FF4500);
  border-radius:50%;
  box-shadow:
    0 0 0 10px rgba(255,200,0,0.2),
    0 0 0 25px rgba(255,150,0,0.15),
    0 0 0 50px rgba(255,100,0,0.08),
    0 0 120px 60px rgba(255,200,0,0.4);
  animation:sunPulse 3s ease-in-out infinite;
}
.sun-ring{
  position:absolute;inset:-30%;
  border-radius:50%;
  border:3px solid rgba(255,220,0,0.3);
  animation:ringExpand 3s ease-out infinite;
}
.sun-ring2{
  position:absolute;inset:-60%;
  border-radius:50%;
  border:2px solid rgba(255,200,0,0.15);
  animation:ringExpand 3s 1s ease-out infinite;
}
@keyframes sunPulse{0%,100%{box-shadow:0 0 0 10px rgba(255,200,0,0.2),0 0 0 25px rgba(255,150,0,0.15),0 0 0 50px rgba(255,100,0,0.08),0 0 120px 60px rgba(255,200,0,0.4)}50%{box-shadow:0 0 0 15px rgba(255,200,0,0.3),0 0 0 40px rgba(255,150,0,0.2),0 0 0 70px rgba(255,100,0,0.12),0 0 180px 90px rgba(255,200,0,0.6)}}
@keyframes ringExpand{from{opacity:0.8;transform:scale(0.8)}to{opacity:0;transform:scale(1.5)}}

/* rays */
.sun-rays{
  position:absolute;inset:-100%;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,rgba(255,220,0,0.18) 8deg,transparent 16deg,
    transparent 30deg,rgba(255,220,0,0.14) 38deg,transparent 46deg,
    transparent 60deg,rgba(255,220,0,0.18) 68deg,transparent 76deg,
    transparent 90deg,rgba(255,220,0,0.12) 98deg,transparent 106deg,
    transparent 120deg,rgba(255,220,0,0.18) 128deg,transparent 136deg,
    transparent 150deg,rgba(255,220,0,0.14) 158deg,transparent 166deg,
    transparent 180deg,rgba(255,220,0,0.18) 188deg,transparent 196deg,
    transparent 210deg,rgba(255,220,0,0.12) 218deg,transparent 226deg,
    transparent 240deg,rgba(255,220,0,0.18) 248deg,transparent 256deg,
    transparent 270deg,rgba(255,220,0,0.14) 278deg,transparent 286deg,
    transparent 300deg,rgba(255,220,0,0.18) 308deg,transparent 316deg,
    transparent 330deg,rgba(255,220,0,0.12) 338deg,transparent 346deg
  );
  animation:rayspin 25s linear infinite;
}
@keyframes rayspin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* clouds neon glow */
.clouds{position:absolute;top:0;left:0;right:0;bottom:30%;pointer-events:none;overflow:hidden}
.cloud{
  position:absolute;
  background:rgba(255,255,255,0.12);
  backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:60px;
  animation:drift linear infinite;
  box-shadow:0 0 20px rgba(100,200,255,0.2), inset 0 0 15px rgba(255,255,255,0.1);
}
.cloud::before,.cloud::after{content:'';position:absolute;background:rgba(255,255,255,0.12);border-radius:50%;border:1px solid rgba(255,255,255,0.15)}
.cl1{width:180px;height:55px;top:8%;animation-duration:30s;animation-delay:-3s}
.cl1::before{width:90px;height:90px;top:-40px;left:28px}
.cl1::after{width:60px;height:60px;top:-25px;left:85px}
.cl2{width:120px;height:38px;top:20%;animation-duration:42s;animation-delay:-18s}
.cl2::before{width:60px;height:60px;top:-27px;left:20px}
.cl2::after{width:42px;height:42px;top:-14px;left:58px}
.cl3{width:220px;height:65px;top:4%;animation-duration:35s;animation-delay:-25s}
.cl3::before{width:110px;height:110px;top:-50px;left:38px}
.cl3::after{width:75px;height:75px;top:-30px;left:110px}
@keyframes drift{from{transform:translateX(-350px)}to{transform:translateX(110vw)}}

/* floating icons */
.floatie{
  position:absolute;font-size:clamp(2rem,4vw,3.5rem);
  animation:floatUp 7s ease-in-out infinite;
  filter:drop-shadow(0 0 12px rgba(255,200,0,0.7));
}
.fl1{top:12%;left:3%;animation-delay:0s}
.fl2{top:38%;left:2%;animation-delay:2s;font-size:2rem}
.fl3{top:10%;right:25%;animation-delay:1s;font-size:clamp(1.5rem,2.5vw,2.5rem)}
.fl4{top:50%;right:3%;animation-delay:3s}
.fl5{top:22%;left:14%;animation-delay:4s;font-size:1.8rem}
.fl6{top:65%;left:8%;animation-delay:1.5s;font-size:1.5rem}
@keyframes floatUp{
  0%,100%{transform:translateY(0) rotate(-8deg) scale(1)}
  50%{transform:translateY(-22px) rotate(8deg) scale(1.1)}
}

/* palms */
.palms{position:absolute;bottom:0;width:100%;pointer-events:none}
.palm{position:absolute;bottom:0;font-size:clamp(6rem,12vw,11rem);line-height:1;
  filter:drop-shadow(4px 8px 12px rgba(0,0,0,0.5));
  animation:palmWave 6s ease-in-out infinite;transform-origin:bottom center}
.palm-l{left:-2%}
.palm-r{right:-2%;animation-delay:-3s}
@keyframes palmWave{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
.palm-r{animation:palmWaveR 6s ease-in-out infinite;animation-delay:-3s}
@keyframes palmWaveR{0%,100%{transform:scaleX(-1) rotate(-7deg)}50%{transform:scaleX(-1) rotate(7deg)}}

/* ocean */
.ocean{position:absolute;bottom:0;left:0;right:0;height:25%;overflow:hidden}
.ocean-body{
  position:absolute;bottom:0;left:0;right:0;height:80%;
  background:linear-gradient(180deg,rgba(0,150,220,0) 0%,rgba(0,120,200,0.7) 30%,#005f99 100%);
}
.wave-row{position:absolute;bottom:0;width:100%;overflow:hidden;height:100%}
.wsvg{position:absolute;width:200%;animation:wv 5s linear infinite}
.wsvg2{position:absolute;width:200%;bottom:12px;animation:wv 8s linear infinite reverse;opacity:0.5}
.wsvg3{position:absolute;width:200%;bottom:24px;animation:wv 11s linear infinite;opacity:0.3}
@keyframes wv{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.beach{
  position:absolute;bottom:0;left:0;right:0;height:14%;
  background:linear-gradient(180deg,#f4d35e,#e8b020 60%,#c8880a);
  border-radius:100% 100% 0 0/50px 50px 0 0;
  box-shadow:0 -5px 30px rgba(255,200,0,0.3);
}

/* ===== HERO CONTENT ===== */
.hero-content{
  position:relative;z-index:20;text-align:center;
  padding:20px;max-width:900px;margin:0 auto;
}
.badge-top{
  display:inline-block;
  background:linear-gradient(135deg,rgba(255,0,128,0.3),rgba(0,180,255,0.3));
  backdrop-filter:blur(12px);
  border:2px solid rgba(255,255,255,0.4);
  color:white;font-size:clamp(0.7rem,2vw,0.95rem);
  font-weight:700;padding:6px 20px;border-radius:30px;
  margin-bottom:14px;letter-spacing:0.08em;
  box-shadow:0 0 20px rgba(0,180,255,0.3);
  animation:fadeSlide 0.6s ease both;
}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

.hero-brand{
  font-size:clamp(3rem,9vw,6.5rem);font-weight:900;
  background:linear-gradient(135deg,#fff 0%,#ffe800 40%,#ff8c00 70%,#ff3c3c 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 30px rgba(255,200,0,0.8));
  line-height:1;letter-spacing:0.03em;
  animation:popBounce 0.9s 0.1s cubic-bezier(.175,.885,.32,1.275) both;
}
@keyframes popBounce{from{opacity:0;transform:scale(0.3) rotate(-10deg)}to{opacity:1;transform:scale(1) rotate(0)}}

.hero-product{
  display:inline-block;
  background:linear-gradient(135deg,#ff0080,#ff6b00,#ffe800,#00ff88);
  background-size:300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-size:clamp(1.8rem,5.5vw,4rem);font-weight:900;
  filter:drop-shadow(0 0 20px rgba(255,100,0,0.6));
  margin:8px 0 20px;letter-spacing:0.06em;
  animation:popBounce 0.9s 0.25s cubic-bezier(.175,.885,.32,1.275) both,
            gradShift 4s linear infinite;
  animation-fill-mode:both;
}
@keyframes gradShift{from{background-position:0%}to{background-position:300%}}

.hero-pkg{
  position:relative;display:inline-block;
  margin:10px 0 18px;
  animation:popBounce 0.9s 0.4s cubic-bezier(.175,.885,.32,1.275) both;
}
.hero-pkg img{
  width:clamp(180px,38vw,300px);
  border-radius:24px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,0.3),
    0 0 0 8px rgba(255,200,0,0.2),
    0 20px 60px rgba(0,0,0,0.5),
    0 0 80px rgba(0,180,255,0.3);
  animation:floatPkg 4s ease-in-out infinite;
}
@keyframes floatPkg{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-14px) rotate(2deg)}}

.hero-like{
  position:absolute;top:-16px;right:-16px;
  background:linear-gradient(135deg,#ff0080,#ff6b00);
  color:white;font-weight:900;font-size:clamp(0.7rem,2vw,0.9rem);
  padding:8px 16px;border-radius:20px;
  box-shadow:0 0 20px rgba(255,0,128,0.7),0 4px 15px rgba(255,100,0,0.5);
  white-space:nowrap;
  animation:likePulse 1.5s ease-in-out infinite;
}
@keyframes likePulse{0%,100%{transform:scale(1) rotate(-3deg)}50%{transform:scale(1.12) rotate(3deg)}}

.hero-tagline{
  display:inline-block;
  background:rgba(255,255,255,0.12);backdrop-filter:blur(14px);
  border:2px solid rgba(255,255,255,0.35);
  color:white;font-weight:700;font-size:clamp(0.85rem,2.5vw,1.15rem);
  padding:12px 28px;border-radius:40px;
  box-shadow:0 0 30px rgba(0,180,255,0.3),inset 0 0 20px rgba(255,255,255,0.05);
  animation:popBounce 0.9s 0.55s cubic-bezier(.175,.885,.32,1.275) both;
}

/* ===== SECTION BASE ===== */
.sec{padding:80px 20px;text-align:center;position:relative;overflow:hidden}
.sec-dark{background:linear-gradient(160deg,#0a1628,#0d2347,#0a1628)}
.sec-mid{background:linear-gradient(160deg,#071020,#0a1a35,#061525)}
.sec-light{background:linear-gradient(160deg,#0d2045,#0f2d5a,#0d2045)}

/* animated mesh bg */
.mesh{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 10% 20%,rgba(0,180,255,0.08) 0%,transparent 70%),
    radial-gradient(ellipse 70% 50% at 90% 80%,rgba(255,0,128,0.06) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 50% 50%,rgba(255,200,0,0.04) 0%,transparent 70%);
}

/* section headers */
.stitle{
  font-size:clamp(2rem,5.5vw,3.8rem);font-weight:900;
  background:linear-gradient(135deg,#ffe800,#ff8c00,#ff3c3c);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(255,150,0,0.5));
  margin-bottom:6px;position:relative;display:inline-block;
}
.stitle::before,.stitle::after{content:'✦';position:absolute;top:50%;transform:translateY(-50%);
  font-size:1.2rem;-webkit-text-fill-color:#ffe800;filter:drop-shadow(0 0 8px rgba(255,200,0,0.8));}
.stitle::before{left:-2.2rem}
.stitle::after{right:-2.2rem}
.sline{
  width:100px;height:4px;margin:12px auto 44px;border-radius:4px;
  background:linear-gradient(90deg,#ff0080,#ff6b00,#ffe800,#00ff88,#00b4ff,#b44fff);
  background-size:300%;animation:gradShift 3s linear infinite;
  box-shadow:0 0 15px rgba(255,100,0,0.4);
}

/* ===== PRODUCT CARDS ===== */
.pkg-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:28px;max-width:960px;margin:0 auto 60px;
}
.pkg-card{
  background:linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:28px;overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.4),inset 0 1px 0 rgba(255,255,255,0.1);
  transition:transform 0.4s cubic-bezier(.175,.885,.32,1.275),box-shadow 0.4s;
  position:relative;cursor:pointer;
  backdrop-filter:blur(10px);
}
.pkg-card:hover{
  transform:translateY(-14px) scale(1.03) rotate(-1deg);
  box-shadow:0 25px 70px rgba(0,0,0,0.5),0 0 40px rgba(0,180,255,0.3);
  border-color:rgba(0,180,255,0.4);
}
.pkg-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#ff0080,#ff6b00,#ffe800,#00ff88,#00b4ff,#b44fff);
  background-size:300%;animation:gradShift 3s linear infinite;
}
.pkg-card img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}
.pkg-body{padding:16px 20px 22px;text-align:left}
.pkg-title{font-weight:900;color:white;font-size:1.05rem;margin-bottom:5px;
  text-shadow:0 0 15px rgba(0,180,255,0.5)}
.pkg-sub{font-size:0.82rem;color:rgba(255,255,255,0.6)}
.pkg-ribbon{
  position:absolute;top:14px;left:-5px;
  background:linear-gradient(135deg,#ff0080,#ff6b00);
  color:white;font-weight:900;font-size:0.75rem;
  padding:5px 16px 5px 14px;border-radius:0 14px 14px 0;
  box-shadow:0 3px 15px rgba(255,0,128,0.5),0 0 20px rgba(255,100,0,0.3);
}

/* label */
.label-wrap{margin:20px auto 0}
.label-wrap img{
  width:clamp(160px,30vw,240px);border-radius:50%;
  box-shadow:0 0 0 4px rgba(255,255,255,0.2),0 0 0 8px rgba(0,180,255,0.2),
    0 10px 40px rgba(0,0,0,0.4),0 0 60px rgba(0,180,255,0.2);
  animation:labelSpin 20s linear infinite;
  border:4px solid rgba(255,255,255,0.2);
}
@keyframes labelSpin{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,0.2),0 0 0 8px rgba(0,180,255,0.2),0 10px 40px rgba(0,0,0,0.4),0 0 60px rgba(0,180,255,0.2)}50%{box-shadow:0 0 0 4px rgba(255,200,0,0.3),0 0 0 12px rgba(255,100,0,0.2),0 10px 40px rgba(0,0,0,0.4),0 0 80px rgba(255,150,0,0.3)}}

/* ===== BENNY SECTION ===== */
.benny-sec{
  background:linear-gradient(160deg,#060d20,#0a1a40,#060d20);
  padding:80px 20px;text-align:center;position:relative;overflow:hidden;
}
.benny-sec::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 100% 50% at 50% 0%,rgba(0,180,255,0.12) 0%,transparent 60%),
    radial-gradient(ellipse 80% 40% at 50% 100%,rgba(255,0,128,0.08) 0%,transparent 60%);
}
.benny-title{
  font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;
  background:linear-gradient(135deg,#fff 0%,#ffe800 50%,#ff8c00 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 25px rgba(255,200,0,0.6));
  margin-bottom:6px;
}
.benny-sub{
  color:#ffe800;font-size:clamp(1rem,3vw,1.4rem);
  font-weight:700;margin-bottom:40px;
  text-shadow:0 0 15px rgba(255,200,0,0.5);
  animation:textGlow 2s ease-in-out infinite alternate;
}
@keyframes textGlow{
  from{filter:drop-shadow(0 0 5px rgba(255,200,0,0.3))}
  to{filter:drop-shadow(0 0 20px rgba(255,200,0,0.8))}
}

.stats-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-bottom:40px}
.stat{
  background:linear-gradient(160deg,rgba(255,255,255,0.1),rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.2);
  border-radius:24px;padding:20px 28px;min-width:140px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 30px rgba(0,0,0,0.3),0 0 20px rgba(0,180,255,0.1);
  transition:transform 0.3s,box-shadow 0.3s;
}
.stat:hover{transform:translateY(-6px) scale(1.05);box-shadow:0 15px 40px rgba(0,0,0,0.4),0 0 30px rgba(0,180,255,0.3)}
.stat-n{
  font-size:2rem;font-weight:900;display:block;
  background:linear-gradient(135deg,#ffe800,#ff8c00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 10px rgba(255,200,0,0.5));
}
.stat-l{font-size:0.78rem;color:rgba(255,255,255,0.7);margin-top:4px}

.benny-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;max-width:920px;margin:0 auto 40px;
}
.bphoto{
  border-radius:24px;overflow:hidden;position:relative;
  border:2px solid rgba(255,255,255,0.15);
  box-shadow:0 8px 35px rgba(0,0,0,0.4);
  transition:transform 0.35s cubic-bezier(.175,.885,.32,1.275),box-shadow 0.35s;
}
.bphoto:hover{
  transform:scale(1.06) rotate(1.5deg);
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 40px rgba(0,180,255,0.4);
  border-color:rgba(0,180,255,0.5);
}
.bphoto img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
.bphoto.tall img{aspect-ratio:3/4}
.bphoto-label{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(transparent,rgba(0,0,0,0.75));
  color:white;font-weight:700;font-size:0.85rem;
  padding:24px 14px 12px;text-align:left;
  text-shadow:0 0 10px rgba(0,180,255,0.5);
}
.benny-msg{
  color:rgba(255,255,255,0.88);font-size:clamp(0.9rem,2.5vw,1.1rem);
  line-height:1.9;max-width:620px;margin:0 auto;
}
.benny-msg strong{color:#ffe800;text-shadow:0 0 12px rgba(255,200,0,0.5)}

/* ===== FEATURES ===== */
.feat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:20px;max-width:900px;margin:0 auto;
}
.feat{
  background:linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.12);
  border-radius:24px;padding:32px 22px;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 30px rgba(0,0,0,0.3);
  transition:transform 0.3s,box-shadow 0.3s,border-color 0.3s;
  position:relative;overflow:hidden;
}
.feat:hover{
  transform:translateY(-10px);
  box-shadow:0 18px 50px rgba(0,0,0,0.4),0 0 30px rgba(0,180,255,0.2);
  border-color:rgba(0,180,255,0.4);
}
.feat::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#ff0080,#ffe800,#00ff88,#00b4ff);
  background-size:300%;animation:gradShift 3s linear infinite;
}
.feat-icon{font-size:3rem;margin-bottom:14px;display:block;filter:drop-shadow(0 0 12px rgba(255,200,0,0.5))}
.feat-title{font-weight:900;color:white;font-size:1.05rem;margin-bottom:8px;
  text-shadow:0 0 10px rgba(0,180,255,0.3)}
.feat-text{font-size:0.84rem;color:rgba(255,255,255,0.65);line-height:1.7}

/* ===== ORDER ===== */
.steps-row{display:flex;flex-wrap:nowrap;gap:0;justify-content:center;align-items:center;max-width:900px;margin:44px auto}
.step{
  background:linear-gradient(160deg,rgba(255,255,255,0.08),rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:24px;padding:30px 22px;
  flex:1;min-width:0;max-width:240px;margin:10px;
  backdrop-filter:blur(8px);
  box-shadow:0 6px 30px rgba(0,0,0,0.3);
  transition:transform 0.3s,box-shadow 0.3s;
  text-align:center;
}
.step:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 45px rgba(0,0,0,0.4),0 0 25px rgba(0,180,255,0.2);
}
.step-num{
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(135deg,#ff0080,#ff6b00);
  color:white;font-weight:900;font-size:1.3rem;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
  box-shadow:0 0 20px rgba(255,0,128,0.5);
}
.step-icon{font-size:2.5rem;margin-bottom:10px;display:block;filter:drop-shadow(0 0 10px rgba(255,200,0,0.4))}
.step-ttl{font-weight:900;color:white;font-size:1rem;margin-bottom:6px}
.step-desc{font-size:0.82rem;color:rgba(255,255,255,0.6);line-height:1.6}
.arrow{font-size:2rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#ff0080,#ffe800);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  font-weight:900;padding:0 5px;margin:10px 0;
  filter:drop-shadow(0 0 8px rgba(255,100,0,0.5));
}
.arrow .arrow-v{display:none}
@media(max-width:700px){
  .steps-row{flex-direction:column;align-items:center;flex-wrap:wrap}
  .step{flex:none;width:min(85%,320px);max-width:none}
  .arrow{margin:6px 0;font-size:1.8rem}
  .arrow .arrow-h{display:none}
  .arrow .arrow-v{display:inline}
}

/* QR */
.qr-row{display:flex;flex-wrap:wrap;gap:24px;justify-content:center;margin-top:44px}
.qr-card{
  background:linear-gradient(160deg,rgba(255,255,255,0.1),rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.2);
  border-radius:24px;padding:28px 32px;
  backdrop-filter:blur(10px);
  box-shadow:0 8px 35px rgba(0,0,0,0.3);
  text-align:center;transition:transform 0.3s,box-shadow 0.3s;
}
.qr-card:hover{
  transform:scale(1.06) rotate(-1deg);
  box-shadow:0 18px 50px rgba(0,0,0,0.4),0 0 30px rgba(0,180,255,0.3);
}
.qr-card img{width:130px;height:130px;border-radius:14px;display:block;margin:0 auto;
  box-shadow:0 4px 20px rgba(0,0,0,0.3)}
.qr-platform{
  margin:12px 0 4px;font-weight:900;font-size:0.95rem;
  padding:7px 22px;border-radius:20px;display:inline-block;
  box-shadow:0 4px 15px rgba(0,0,0,0.3);
}
.qr-ig{background:linear-gradient(135deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888);color:white}
.qr-line{background:linear-gradient(135deg,#06C755,#04a344);color:white}
.qr-handle{font-size:0.8rem;color:rgba(255,255,255,0.6)}

/* ===== NOBORI ===== */
.nobori-img{
  max-width:220px;border-radius:18px;
  box-shadow:0 10px 50px rgba(0,0,0,0.4),0 0 40px rgba(0,180,255,0.2);
  transition:transform 0.3s,box-shadow 0.3s;
  border:2px solid rgba(255,255,255,0.15);
}
.nobori-img:hover{
  transform:scale(1.06) rotate(2deg);
  box-shadow:0 20px 60px rgba(0,0,0,0.5),0 0 50px rgba(0,180,255,0.3);
}

/* ===== FOOTER ===== */
footer{
  background:linear-gradient(160deg,#050c1a,#070f22,#050c1a);
  color:white;text-align:center;padding:70px 20px 40px;
  position:relative;overflow:hidden;
  border-top:1px solid rgba(255,255,255,0.08);
}
footer::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%,rgba(0,180,255,0.08) 0%,transparent 60%);
}
.footer-logo{
  font-size:2.5rem;font-weight:900;
  background:linear-gradient(135deg,#ffe800,#ff8c00);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  filter:drop-shadow(0 0 20px rgba(255,200,0,0.5));
  margin-bottom:8px;
}
.footer-tag{font-size:1rem;color:rgba(255,255,255,0.7);margin-bottom:22px}
.footer-ig{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(255,0,128,0.2),rgba(0,180,255,0.2));
  border:1.5px solid rgba(255,255,255,0.25);
  color:white;padding:12px 28px;border-radius:40px;
  text-decoration:none;font-weight:700;
  transition:all 0.3s;
  box-shadow:0 0 20px rgba(0,180,255,0.2);
}
.footer-ig:hover{
  background:linear-gradient(135deg,rgba(255,0,128,0.35),rgba(0,180,255,0.35));
  box-shadow:0 0 40px rgba(0,180,255,0.4);transform:translateY(-3px);
}
.footer-links{
  display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-bottom:8px;
}
.footer-line{
  display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(135deg,rgba(6,199,85,0.2),rgba(4,163,68,0.2));
  border:1.5px solid rgba(255,255,255,0.25);
  color:white;padding:12px 28px;border-radius:40px;
  text-decoration:none;font-weight:700;
  transition:all 0.3s;
  box-shadow:0 0 20px rgba(6,199,85,0.2);
}
.footer-line:hover{
  background:linear-gradient(135deg,rgba(6,199,85,0.35),rgba(4,163,68,0.35));
  box-shadow:0 0 40px rgba(6,199,85,0.4);transform:translateY(-3px);
}
.footer-copy{font-size:0.78rem;opacity:0.4;margin-top:24px}

/* ===== SCROLL TOP ===== */
.stbtn{
  position:fixed;bottom:24px;right:24px;z-index:999;
  width:50px;height:50px;border-radius:50%;border:none;cursor:pointer;
  background:linear-gradient(135deg,#ff0080,#ff6b00);
  color:white;font-size:1.3rem;
  box-shadow:0 0 20px rgba(255,0,128,0.5),0 4px 20px rgba(255,100,0,0.4);
  opacity:0;pointer-events:none;transition:opacity 0.3s,transform 0.3s;
  display:flex;align-items:center;justify-content:center;
}
.stbtn.show{opacity:1;pointer-events:all}
.stbtn:hover{transform:scale(1.15) translateY(-4px)}

/* ===== REVEAL ===== */
.rev{opacity:0;transform:translateY(44px);transition:opacity 0.75s ease,transform 0.75s ease}
.rev.on{opacity:1;transform:translateY(0)}
.d1{transition-delay:0.1s}.d2{transition-delay:0.2s}.d3{transition-delay:0.3s}.d4{transition-delay:0.4s}