/* ═══ Frame 25 v3 — Creative Playground ═══ */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }
body {
  background:#0d0d0d; color:#fff;
  font-family:'Helvetica Neue',Arial,sans-serif;
  overflow-x:hidden; cursor:none;
}
::selection { background:#d8ff3e; color:#111; }

/* film grain */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* custom cursor */
.cursor {
  position:fixed; width:16px; height:16px; background:#d8ff3e; border-radius:50%;
  pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
  transition:transform .18s ease;
}
.cursor.big { transform:translate(-50%,-50%) scale(3.5); }
.cursor.play { transform:translate(-50%,-50%) scale(5); background:#ff6ec7; }
.cursor.play::after {
  content:'▶'; position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; font-size:5px; color:#111;
}
@media (hover:none), (max-width:768px) {
  body { cursor:auto; }
  .cursor { display:none; }
}

/* shared */
.logo { font-weight:900; font-size:18px; color:#fff; }
.logo .star { color:#d8ff3e; display:inline-block; animation:spin 6s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* footer */
.footer-v3 { border-top:1px solid rgba(255,255,255,.1); padding:40px 28px; position:relative; z-index:5; }
.footer-inner { max-width:1200px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.footer-links { display:flex; gap:24px; }
.footer-links a { color:#aaa; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:1px; text-decoration:none; }
.footer-links a:hover { color:#d8ff3e; }
.footer-copy { color:#666; font-size:12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* nav */
.nav-v3 {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; position:sticky; top:0; z-index:100;
  background:rgba(13,13,13,.85); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.nav-v3 .logo { text-decoration:none; }
.nav-links { display:flex; gap:24px; }
.nav-links a { color:#fff; font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-decoration:none; }
.nav-links a:hover { color:#d8ff3e; }
.nav-right { display:flex; align-items:center; gap:18px; }
.lang-switch { display:flex; gap:6px; font-size:12px; font-weight:700; color:#666; }
.lang-switch button { background:none; border:none; color:inherit; font:inherit; cursor:none; }
.lang-switch button.active { color:#d8ff3e; }
.nav-btn {
  background:#d8ff3e; color:#111; font-weight:900; font-size:12px;
  padding:10px 18px; border-radius:30px; text-decoration:none;
  transition:transform .25s; display:inline-block;
}
.nav-btn:hover { transform:rotate(-3deg) scale(1.08); }
#mobile-menu-btn { display:none; background:none; border:none; flex-direction:column; gap:5px; padding:8px; cursor:pointer; }
#mobile-menu-btn span { width:24px; height:2px; background:#fff; display:block; transition:all .3s; }
.mobile-menu-v3 {
  position:fixed; inset:0; background:rgba(13,13,13,.97); backdrop-filter:blur(16px);
  z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:36px;
}
.mobile-menu-v3.hidden { display:none; }
.mobile-menu-v3 a { color:#fff; font-size:30px; font-weight:900; text-transform:uppercase; text-decoration:none; }
.mobile-menu-v3 a:hover { color:#d8ff3e; }
.mobile-menu-v3 .lang-switch { font-size:18px; }
@media (max-width:768px) {
  .nav-links, .nav-btn { display:none; }
  #mobile-menu-btn { display:flex; }
}

/* hero */
.hero-v3 { padding:70px 28px 50px; position:relative; text-align:center; }
.sticker {
  position:absolute; font-weight:900; font-size:14px; padding:10px 20px; z-index:5;
  animation:wobble 3.5s ease-in-out infinite;
}
.st1 { background:#d8ff3e; color:#111; top:50px; left:6%; transform:rotate(-8deg); border-radius:6px; }
.st2 { background:#ff6ec7; color:#111; top:90px; right:7%; transform:rotate(6deg); border-radius:30px; animation-delay:.7s; }
.st3 { background:#fff; color:#111; bottom:90px; left:10%; transform:rotate(4deg); border-radius:6px; animation-delay:1.2s; }
.st4 { border:2px dashed #d8ff3e; color:#d8ff3e; bottom:70px; right:9%; transform:rotate(-5deg); border-radius:30px; animation-delay:.4s; }
@keyframes wobble { 0%,100% { margin-top:0; } 50% { margin-top:-12px; } }
h1#hero-title {
  font-size:clamp(56px,10vw,130px); font-weight:900; line-height:.92;
  letter-spacing:-4px; text-transform:uppercase;
}
#hero-title .row { display:block; overflow:hidden; }
#hero-title .ch { display:inline-block; transform:translateY(120%) scale(.8); animation:pop .6s cubic-bezier(.34,1.56,.64,1) forwards; }
#hero-title .lime { color:#d8ff3e; }
#hero-title .script { font-family:Georgia,serif; font-style:italic; font-weight:400; text-transform:none; letter-spacing:-1px; }
@keyframes pop { to { transform:translateY(0) scale(1); } }
.hero-sub { margin-top:28px; font-size:16px; color:#aaa; opacity:0; animation:fadeUp .8s 1.3s forwards; }
.hero-sub b { color:#fff; }
@keyframes fadeUp { from{opacity:0;transform:translateY(25px);} to{opacity:1;transform:translateY(0);} }
@media (max-width:768px) {
  .sticker { font-size:10px; padding:6px 12px; }
  .st1 { top:10px; left:3%; } .st2 { top:30px; right:3%; }
  .st3 { bottom:30px; left:4%; } .st4 { bottom:14px; right:4%; }
  h1#hero-title { letter-spacing:-2px; }
}

/* marquee */
.marquee {
  background:#d8ff3e; color:#111; padding:12px 0; overflow:hidden; white-space:nowrap;
  transform:rotate(-1.5deg) scale(1.02); margin:30px -10px; position:relative; z-index:5;
}
.marquee-track { display:inline-block; animation:scroll 16s linear infinite; font-weight:900; font-size:20px; }
@keyframes scroll { from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* reels */
.reels-sec { padding:60px 28px; position:relative; z-index:5; }
.sec-head { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:40px; flex-wrap:wrap; }
.sec-head h2 { font-size:clamp(30px,5vw,52px); font-weight:900; letter-spacing:-2px; text-transform:uppercase; }
.badge { background:#ff6ec7; color:#111; font-weight:900; font-size:12px; padding:8px 14px; border-radius:30px; transform:rotate(5deg); }
.reels { display:flex; gap:28px; justify-content:center; flex-wrap:wrap; }
.reel {
  width:230px; aspect-ratio:9/16; border-radius:18px; overflow:hidden; position:relative;
  border:3px solid #fff; opacity:0; transform:translateY(70px) rotate(0deg);
  transition:opacity .7s, transform .7s cubic-bezier(.34,1.56,.64,1);
  flex-shrink:0;
}
.reel.vis { opacity:1; transform:translateY(0) rotate(var(--r)); }
.reel:hover { transform:translateY(-14px) rotate(0deg) scale(1.05); border-color:#d8ff3e; z-index:10; transition:opacity .7s, transform .4s cubic-bezier(.34,1.56,.64,1); }
.reel video, .reel img { width:100%; height:100%; object-fit:cover; }
.reel-label {
  position:absolute; bottom:12px; left:12px; right:12px; background:rgba(13,13,13,.8);
  backdrop-filter:blur(8px); border-radius:10px; padding:10px 12px; font-weight:800; font-size:13px;
}
.reel-label small { display:block; color:#d8ff3e; font-size:10px; font-weight:700; letter-spacing:1px; margin-top:2px; }
.reel-views {
  position:absolute; top:12px; right:12px; background:#d8ff3e; color:#111;
  font-weight:900; font-size:11px; padding:5px 10px; border-radius:20px; transform:rotate(3deg);
}
.see-all-wrap { text-align:center; margin-top:40px; }
.see-all {
  display:inline-block; border:2px solid #d8ff3e; color:#d8ff3e; font-weight:900;
  font-size:14px; padding:14px 32px; border-radius:40px; text-decoration:none;
  text-transform:uppercase; letter-spacing:1px; transition:all .25s;
}
.see-all:hover { background:#d8ff3e; color:#111; transform:rotate(-2deg) scale(1.05); }
@media (max-width:768px) {
  .reels { flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:14px; -webkit-overflow-scrolling:touch; }
  .reel { width:200px; scroll-snap-align:center; }
}

/* services */
.svc-sec { padding:60px 28px; position:relative; z-index:5; }
.svc-cloud { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; max-width:760px; margin:0 auto 60px; }
.chip {
  font-size:clamp(18px,3vw,30px); font-weight:900; text-transform:uppercase; letter-spacing:-1px;
  border:2px solid #fff; border-radius:50px; padding:14px 28px; color:#fff; text-decoration:none;
  opacity:0; transform:scale(.6) rotate(var(--r));
  transition:background .25s, color .25s, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.chip.vis { animation:chipIn .55s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes chipIn { to { opacity:1; transform:scale(1) rotate(var(--r)); } }
.chip:hover { background:#d8ff3e; color:#111; border-color:#d8ff3e; transform:scale(1.1) rotate(0deg); }
.chip.pink:hover { background:#ff6ec7; border-color:#ff6ec7; }
.svc-details-wrap { max-width:1100px; margin:0 auto; }
.v3-card {
  background:#161616; border:1px solid rgba(255,255,255,.1); border-radius:18px;
  transition:transform .3s, border-color .3s;
}
.v3-card:hover { transform:rotate(-1deg) translateY(-4px); border-color:#d8ff3e; }

/* ── Pricing tabs ── */
.pricing-tab { transition: all .2s; }
.pricing-tab.active { background: #d8ff3e; color: #000; }

/* ── Pricing details collapse ── */
.pricing-details { transition: max-height .35s ease, opacity .25s ease; overflow: hidden; }

/* ── Constructor builder ── */
.svc-item {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(58,73,75,.4);
    margin-bottom: 8px; cursor: pointer; transition: border-color .15s, background .15s;
    background: rgba(28,27,27,.4);
}
.svc-item:hover { border-color: rgba(58,73,75,.8); }
.svc-item.active { border-color: #d8ff3e; background: rgba(42,53,0,.4); }
.svc-checkbox {
    width: 18px; height: 18px; min-width: 18px; border: 1.5px solid rgba(58,73,75,.8);
    border-radius: 5px; display: flex; align-items: center; justify-content: center;
    margin-top: 2px; transition: all .15s; flex-shrink: 0;
}
.svc-item.active .svc-checkbox { border-color: #d8ff3e; background: #d8ff3e; }
.svc-check-icon { display: none; }
.svc-item.active .svc-check-icon { display: block; }
.svc-qty { display: none; align-items: center; gap: 8px; margin-top: 8px; }
.svc-qty.visible { display: flex; }
.svc-qty-btn {
    width: 26px; height: 26px; border: 1px solid rgba(58,73,75,.8);
    background: transparent; color: #95d1d6; border-radius: 6px; cursor: pointer;
    font-size: 16px; display: flex; align-items: center; justify-content: center; transition: all .15s;
}
.svc-qty-btn:hover { border-color: #555; color: #e5e2e1; }
.svc-price-tag { font-size: 13px; font-weight: 700; color: rgba(58,73,75,1); white-space: nowrap; padding-top: 3px; flex-shrink: 0; transition: color .15s; }
.svc-item.active .svc-price-tag { color: #d8ff3e; }
.total-sidebar-box {
    background: rgba(28,27,27,.7); border: 1px solid rgba(58,73,75,.4);
    border-radius: 20px; padding: 24px; position: sticky; top: 24px;
}

/* pricing v3 extras */
.hit-sticker {
  position:absolute; top:-14px; right:18px; background:#ff6ec7; color:#111;
  font-weight:900; font-size:12px; padding:7px 14px; border-radius:6px;
  transform:rotate(5deg); z-index:6;
}
.popular-v3 { position:relative; border-color:#ff6ec7 !important; }

/* team polaroids */
.team-sec { padding:60px 28px; position:relative; z-index:5; }
.team-grid { display:flex; gap:32px; justify-content:center; flex-wrap:wrap; }
.polaroid {
  background:#fff; padding:12px 12px 18px; border-radius:8px; width:260px;
  transform:rotate(var(--r)); transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .6s;
  opacity:0;
}
.polaroid.vis { opacity:1; }
.polaroid:hover { transform:rotate(0deg) translateY(-10px) scale(1.04); z-index:10; }
.polaroid .photo { aspect-ratio:4/5; overflow:hidden; border-radius:4px; position:relative; }
.polaroid .photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:filter .5s; }
.polaroid:hover .photo img { filter:grayscale(0%); }
.polaroid .role-sticker {
  position:absolute; bottom:10px; left:10px; background:#d8ff3e; color:#111;
  font-weight:900; font-size:11px; text-transform:uppercase; padding:6px 12px;
  border-radius:4px; transform:rotate(-3deg); letter-spacing:1px;
}
.polaroid h4 { color:#111; font-weight:800; font-size:17px; margin-top:12px; text-align:center; }
@media (max-width:768px) { .polaroid { width:210px; } }

/* contact */
.contact-sec { padding:60px 28px 80px; position:relative; z-index:5; max-width:1100px; margin:0 auto; }
.contact-sec input, .contact-sec select, .contact-sec textarea {
  background:transparent; border:2px solid rgba(255,255,255,.2); border-radius:12px;
  color:#fff; padding:16px; width:100%; transition:border-color .25s; font:inherit;
}
.contact-sec input:focus, .contact-sec select:focus { border-color:#d8ff3e; outline:none; }
.contact-sec select option { background:#161616; color:#fff; }
.contact-sec button[type="submit"] {
  background:#d8ff3e; color:#111; font-weight:900; text-transform:uppercase;
  letter-spacing:1px; padding:18px 40px; border-radius:40px; border:none;
  transition:transform .25s; width:100%;
}
.contact-sec button[type="submit"]:hover { transform:rotate(-1.5deg) scale(1.03); }

/* ═══ Wow Pass ═══ */
.scroll-progress {
  position:fixed; top:0; left:0; height:4px; width:100%;
  background:#d8ff3e; transform-origin:0 50%; transform:scaleX(0);
  z-index:200; pointer-events:none;
}
.float-shape { position:absolute; pointer-events:none; z-index:2; }
.fs-star { font-size:90px; color:#d8ff3e; top:120vh; left:4%; opacity:.7; }
.fs-star2 { font-size:54px; color:#ff6ec7; top:280vh; right:6%; opacity:.6; }
.fs-blob {
  width:220px; height:220px; border-radius:48% 52% 60% 40% / 50% 44% 56% 50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,110,199,.5), rgba(255,110,199,.08));
  top:200vh; left:-60px; filter:blur(2px);
}
@media (max-width:768px) { .float-shape { display:none; } }

/* reel 3D tilt */
.reel { transform-style:preserve-3d; will-change:transform; }

/* big footer logo */
.footer-giant {
  overflow:hidden; padding:60px 0 0; position:relative; z-index:5;
}
.footer-giant .giant-text {
  font-size:clamp(70px,14vw,220px); font-weight:900; letter-spacing:-6px;
  text-transform:uppercase; text-align:center; line-height:.85; white-space:nowrap;
  color:transparent; -webkit-text-stroke:2px rgba(216,255,62,.5);
  background:linear-gradient(90deg,#d8ff3e,#d8ff3e);
  background-repeat:no-repeat; background-size:0% 100%;
  -webkit-background-clip:text; background-clip:text;
}

/* services rows (wow pass) */
.svc-rows { max-width:1100px; margin:0 auto; }
.svc-row {
  display:flex; align-items:center; gap:28px; padding:34px 16px;
  border-bottom:2px solid rgba(255,255,255,.15); position:relative;
  transition:background .3s, padding-left .35s; overflow:hidden; cursor:pointer;
}
.svc-row:first-child { border-top:2px solid rgba(255,255,255,.15); }
.svc-num { font-size:13px; font-weight:900; color:#d8ff3e; letter-spacing:2px; flex-shrink:0; }
.svc-row-main { flex:1; }
.svc-row h3 {
  font-size:clamp(28px,5vw,58px); font-weight:900; text-transform:uppercase;
  letter-spacing:-2px; line-height:1; transition:color .3s;
}
.svc-row p { color:#888; font-size:14px; margin-top:8px; max-width:520px; transition:color .3s; }
.svc-arrow { font-size:clamp(28px,4vw,48px); font-weight:900; transition:transform .35s; flex-shrink:0; }
.svc-row:hover { background:#d8ff3e; padding-left:36px; }
.svc-row:hover h3, .svc-row:hover .svc-num { color:#111; }
.svc-row:hover p { color:#333; }
.svc-row:hover .svc-arrow { transform:rotate(45deg) scale(1.25); color:#111; }
@media (max-width:768px) {
  .svc-row { gap:14px; padding:24px 8px; }
  .svc-row p { font-size:12px; }
}

/* pink reversed marquee */
.marquee-pink { background:#ff6ec7; transform:rotate(1.5deg) scale(1.02); }
@keyframes scrollRev { from{transform:translateX(-50%);} to{transform:translateX(0);} }
.marquee-track-rev { animation:scrollRev 18s linear infinite; }

/* music player */
.music-btn {
  position:fixed; bottom:24px; right:24px; z-index:150;
  width:56px; height:56px; border-radius:50%;
  background:#d8ff3e; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(216,255,62,.35);
  transition:transform .25s;
}
.music-btn:hover { transform:rotate(-6deg) scale(1.1); }
.music-bars { display:flex; align-items:flex-end; gap:3px; height:20px; }
.music-bars i {
  width:3px; background:#111; border-radius:2px; height:6px;
  transition:height .3s;
}
.music-btn.playing .music-bars i { animation:eq .9s ease-in-out infinite; }
.music-btn.playing .music-bars i:nth-child(1) { animation-delay:0s; }
.music-btn.playing .music-bars i:nth-child(2) { animation-delay:.22s; }
.music-btn.playing .music-bars i:nth-child(3) { animation-delay:.45s; }
.music-btn.playing .music-bars i:nth-child(4) { animation-delay:.12s; }
@keyframes eq { 0%,100% { height:6px; } 50% { height:18px; } }
.music-btn:not(.playing) .music-bars i { height:6px; }
@media (max-width:768px) { .music-btn { bottom:16px; right:16px; width:48px; height:48px; } }