/* ═══════════════════════════════════════════════════════════════════
   ATEEF STORE — Shared Stylesheet
   Original styles preserved exactly. New additions appended at end.
   ═══════════════════════════════════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --black:#000000;--white:#ffffff;--gray1:#0a0a0a;--gray2:#111111;--gray3:#1a1a1a;
  --gray4:#242424;--gray5:#333333;--gray6:#555555;--gray7:#888888;--gray8:#bbbbbb;
  --glass:rgba(255,255,255,0.04);--glass2:rgba(255,255,255,0.08);--glass3:rgba(255,255,255,0.12);
  --border:rgba(255,255,255,0.1);--border2:rgba(255,255,255,0.2);
  --chrome1:rgba(255,255,255,0.9);--chrome2:rgba(200,200,200,0.6);
  --font-display:'Bebas Neue',cursive;
  --font-body:'DM Sans',sans-serif;
  --font-mono:'Space Mono',monospace;
  --red: #e53946;
  --text: var(--white);
  --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem;
  --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem;
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px;
  --shadow-sm: 0 4px 12px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.7);
}
html{scroll-behavior:smooth;width:100%;overflow-x:hidden;}
body{background:var(--black);color:var(--white);font-family:var(--font-body);width:100%;overflow-x:hidden;}

/* CUSTOM CURSOR — Only on desktop with a precise mouse */
@media(pointer:fine){body.custom-cursor-active{cursor:none;}}
.cursor{display:none;}
.cursor-ring{display:none;}

@media(pointer:fine){
  .cursor{display:block;position:fixed;width:10px;height:10px;background:var(--white);border-radius:50%;pointer-events:none!important;z-index:99999;mix-blend-mode:difference;top:0;left:0;transform:translate3d(var(--x, -50px), var(--y, -50px), 0) scale3d(var(--scale, 1), var(--scale, 1), 1);transition:transform .15s ease, opacity .15s ease;will-change:transform;}
  .cursor-ring{display:block;position:fixed;width:36px;height:36px;border:1px solid rgba(255,255,255,0.5);border-radius:50%;pointer-events:none!important;z-index:99998;mix-blend-mode:difference;top:0;left:0;transform:translate3d(var(--x, -50px), var(--y, -50px), 0) scale3d(var(--scale, 1), var(--scale, 1), 1);transition:transform .3s ease, opacity .3s ease;will-change:transform;}
}

/* NOISE OVERLAY */
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");opacity:0.15;pointer-events:none;z-index:1;transform:translateZ(0);will-change:transform;}
@keyframes noiseAnim{0%{transform:translate(0,0)}10%{transform:translate(-2%,-3%)}20%{transform:translate(-4%,2%)}30%{transform:translate(3%,-1%)}40%{transform:translate(-2%,4%)}50%{transform:translate(-1%,-3%)}60%{transform:translate(3%,1%)}70%{transform:translate(-3%,2%)}80%{transform:translate(2%,-4%)}90%{transform:translate(-4%,-1%)}100%{transform:translate(0,0)}}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.2rem 2.5rem;display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,0.6);-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);border-bottom:1px solid var(--border);}
.nav-logo{font-family:var(--font-display);font-size:1.4rem;letter-spacing:0.15em;color:var(--white);text-decoration:none;}
.nav-logo span{color:var(--gray7);}
.nav-links{display:flex;gap:1rem;list-style:none;align-items:center;}
.nav-links a{color:var(--gray7);text-decoration:none;font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;transition:color .3s;font-weight:500;}
.nav-links a:hover{color:var(--white);}
.nav-cta {
  background: linear-gradient(135deg, #fff, #ddd); color: var(--black);
  padding: .5rem 1.2rem; border: none; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 4px 15px rgba(255,255,255,0.2);
}
.nav-cta::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  transform: translateX(-100%); transition: transform 0.6s ease;
}
.nav-cta:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 25px rgba(255,255,255,0.4);
  background: #fff;
}
.nav-cta:hover::after { transform: translateX(100%); }
.nav-cta:active { transform: scale(0.95); box-shadow: 0 2px 8px rgba(255,255,255,0.2); }
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;z-index:200;}
.hamburger span{display:block;width:24px;height:1.5px;background:var(--white);transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left center;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(0px, -2px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(0px, 2px);}

/* SECTIONS */
section{position:relative;z-index:2;}

/* ─── 1. HERO ─── */
#hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.06) 0%,transparent 65%);}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.04) 0%,transparent 50%);}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:60px 60px;animation:gridPulse 6s ease-in-out infinite;}
@keyframes gridPulse{0%,100%{opacity:.4}50%{opacity:.8}}
.hero-content{position:relative;z-index:5;padding:2rem;margin-top:auto;margin-bottom:auto;}
.hero-eyebrow{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.35em;color:var(--gray6);text-transform:uppercase;margin-bottom:1.5rem;opacity:0;animation:fadeUp .8s ease forwards .3s;}
.hero-name{font-family:var(--font-display);font-size:clamp(4.5rem,14vw,11rem);letter-spacing:0.04em;line-height:.92;color:transparent;background:linear-gradient(135deg,#fff 30%,#888 55%,#fff 80%);-webkit-background-clip: text; background-clip: text;background-clip:text;background-size:200%;animation:fadeUp .8s ease forwards .5s,chromaSlide 5s ease-in-out infinite 1.3s;opacity:0;}
@keyframes chromaSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{font-family:var(--font-mono);font-size:clamp(0.65rem,1.5vw,0.85rem);letter-spacing:0.25em;color:var(--gray6);text-transform:uppercase;margin-top:1.2rem;opacity:0;animation:fadeUp .8s ease forwards .7s;}
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2rem;opacity:0;animation:fadeUp .8s ease forwards .9s;}
.hero-tag{font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;padding:.45rem 1rem;border:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);color:var(--gray8);transition:all .3s;}
.hero-tag:hover{border-color:var(--border2);color:var(--white);background:var(--glass2);}
.hero-scroll{position:relative;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;animation:fadeUp .8s ease forwards 1.2s;z-index:5;}
.hero-scroll span{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:.2em;color:var(--gray6);}
.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,transparent,var(--gray5));position:relative;overflow:hidden;}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;background:linear-gradient(to bottom,transparent,var(--white));animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
.hero-avatar{width:130px;height:130px;border-radius:50%;border:2px solid var(--border2);background:linear-gradient(135deg,var(--glass2),var(--glass));-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);margin:0 auto 2rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:3rem;color:var(--gray5);position:relative;opacity:0;animation:fadeUp .8s ease forwards .2s;}
.hero-avatar::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent,rgba(255,255,255,.1)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:destination-out;mask-composite:exclude;}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

/* LIQUID CHROME DIVIDER */
.chrome-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),rgba(255,255,255,.7),rgba(255,255,255,.3),transparent);position:relative;overflow:hidden;}
.chrome-divider::after{content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,1),transparent);animation:chromeSweep 3s ease-in-out infinite;}
@keyframes chromeSweep{0%{transform:translateX(-50%)}100%{transform:translateX(150%)}}

/* SECTION COMMON */
.section-inner{max-width:1200px;margin:0 auto;padding:7rem 2rem;}
.section-label{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:.3em;color:var(--gray6);text-transform:uppercase;margin-bottom:1rem;display:flex;align-items:center;gap:.8rem;}
.section-label::before{content:'';flex:0 0 30px;height:1px;background:var(--gray5);}
.section-title{font-family:var(--font-display);font-size:clamp(2.8rem,7vw,5.5rem);line-height:.9;letter-spacing:.03em;margin-bottom:1.5rem;}
.section-desc{color:var(--gray7);font-size:0.95rem;line-height:1.8;max-width:520px;}

/* GLASS CARD */
.glass-card{background:var(--glass);border:1px solid var(--border);border-radius:var(--radius-md);-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);transition:all .4s ease;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);}
.glass-card::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);transition:left .7s ease;}
.glass-card:hover::before{left:150%;}
.glass-card:hover{border-color:var(--border2);background:var(--glass2);transform:translateY(-3px);box-shadow:var(--shadow-md);}

/* CHROME BORDER CARD */
.chrome-card{position:relative;padding:2rem;}
.chrome-card::after{content:'';position:absolute;inset:0;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 50%,rgba(255,255,255,.1)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:destination-out;mask-composite:exclude;pointer-events:none;}

/* ─── 2. DEVELOPER ─── */
#developer{background:var(--gray1);}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem;}
.dev-main{grid-column:1/-1;padding:3rem;background:var(--glass);border:1px solid var(--border);position:relative;overflow:hidden;}
.dev-main-bg{position:absolute;top:-50%;right:-20%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.05),transparent 70%);pointer-events:none;}
.dev-stack{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;}
.tech-pill{font-family:var(--font-mono);font-size:0.65rem;letter-spacing:.1em;padding:.35rem .8rem;border:1px solid var(--border);color:var(--gray7);transition:all .3s;}
.tech-pill:hover{border-color:rgba(255,255,255,.4);color:var(--white);}
.dev-stat{padding:1.5rem;background:var(--glass);border:1px solid var(--border);text-align:center;}
.stat-num{font-family:var(--font-display);font-size:2.8rem;color:var(--white);line-height:1;}
.stat-label{font-size:0.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray6);margin-top:.3rem;}

/* ─── 3. VIDEO EDITOR ─── */
#videoeditor{background:var(--black);}
.timeline{background:var(--glass);border:1px solid var(--border);padding:1.5rem;margin-top:2rem;border-radius:2px;}
.tl-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.tl-dot{width:10px;height:10px;border-radius:50%;}
.tl-dot.red{background:#ff3b30;}.tl-dot.yellow{background:#ffcc00;}.tl-dot.green{background:#34c759;}
.tl-title{font-family:var(--font-mono);font-size:.65rem;color:var(--gray6);letter-spacing:.15em;}
.tl-track{height:28px;background:rgba(255,255,255,.06);border-radius:2px;position:relative;overflow:hidden;margin:6px 0;}
.tl-clip{position:absolute;top:3px;height:22px;border-radius:2px;display:flex;align-items:center;padding:0 .5rem;}
.tl-clip-label{font-family:var(--font-mono);font-size:.55rem;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;}
.clip-a{background:rgba(255,255,255,.18);left:2%;width:30%;}
.clip-b{background:rgba(255,255,255,.1);left:34%;width:20%;}
.clip-c{background:rgba(255,255,255,.18);left:56%;width:25%;}
.clip-d{background:rgba(255,255,255,.07);left:83%;width:14%;}
.clip-e{background:rgba(255,255,255,.12);left:8%;width:40%;}
.clip-f{background:rgba(255,255,255,.18);left:52%;width:30%;}
.clip-g{background:rgba(255,255,255,.06);left:0%;width:50%;}
.clip-h{background:rgba(255,255,255,.12);left:55%;width:35%;}
.tl-playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--white);left:38%;animation:playhead 6s linear infinite;}
@keyframes playhead{0%{transform:translateX(0%)}100%{transform:translateX(100%)}}
.ve-services{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;}
.ve-card{padding:1.8rem;background:var(--glass);border:1px solid var(--border);transition:all .4s;}
.ve-card:hover{border-color:var(--border2);background:var(--glass2);transform:translateY(-4px);}
.ve-icon{font-size:1.8rem;margin-bottom:1rem;display:block;}
.ve-card h3{font-family:var(--font-display);font-size:1.3rem;letter-spacing:.05em;margin-bottom:.5rem;}
.ve-card p{font-size:.8rem;color:var(--gray7);line-height:1.7;}


/* ─── VIDEO SLIDER inside Editing Section ─── */
.vs-wrapper{margin-top:3.5rem;position:relative;}
.vs-header{margin-bottom:1.8rem;}
.vs-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.04em;line-height:1;margin-bottom:.5rem;}
.vs-subtitle{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--gray6);text-transform:uppercase;}
.vs-outer{position:relative;padding:0 52px;}
.vs-track-wrap{overflow:hidden;position:relative;}
.vs-track{
  display:flex;gap:16px;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  will-change:transform;cursor:grab;align-items:flex-start;
}
.vs-track.is-dragging{transition:none !important;cursor:grabbing;}
/* ── Slide cards: fixed px widths, scale anim ── */
.vs-slide{
  flex:0 0 360px;
  border-radius:18px;overflow:hidden;
  background:#000;border:1px solid var(--border);
  transform:scale(0.92);opacity:.7;
  transition:transform .4s ease, opacity .4s ease, border-color .3s, box-shadow .3s;
  animation:vsFadeIn .5s ease both;
  contain:layout style;
}
@keyframes vsFadeIn{
  from{opacity:0;transform:scale(.88) translateY(12px)}
  to{opacity:.7;transform:scale(.92) translateY(0)}
}
.vs-slide.vs-active{
  transform:scale(1);opacity:1;
  border-color:var(--border2);
  box-shadow:0 0 36px rgba(255,255,255,.07),0 10px 36px rgba(0,0,0,.7);
}
/* ── 9:16 iframe wrap — NO crop, full vertical video ── */
.vs-iframe-wrap{
  position:relative;width:100%;
  aspect-ratio:9/16;
  background:#000;
  overflow:hidden;
  border-radius:18px 18px 0 0;
}
.vs-iframe-wrap iframe{
  position:absolute;inset:0;
  width:100%;height:100%;
  border:none;display:block;
  object-fit:contain;
}
/* skeleton placeholder while iframe loads */
.vs-iframe-wrap::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,#0a0a0a 0%,#141414 50%,#0a0a0a 100%);
  background-size:200% 200%;
  animation:vsSkeleton 1.8s ease infinite;
  z-index:0;border-radius:18px 18px 0 0;
}
@keyframes vsSkeleton{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.vs-iframe-wrap iframe{z-index:1;}
/* label */
.vs-slide-label{
  padding:.7rem 1rem;
  background:rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top:1px solid var(--border);
  border-radius:0 0 18px 18px;
}
.vs-slide-label span{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;color:var(--gray6);text-transform:uppercase;}
/* ── Arrows ── */
.vs-arrow{
  position:absolute;top:42%;transform:translateY(-50%);z-index:20;
  width:40px;height:40px;
  background:rgba(8,8,8,.88);border:1px solid var(--border);
  color:var(--white);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s,border-color .25s,transform .25s;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius:50%;font-size:.88rem;-webkit-user-select:none;user-select:none;flex-shrink:0;
}
.vs-arrow:hover{background:rgba(255,255,255,.13);border-color:var(--border2);transform:translateY(-50%) scale(1.1);}
.vs-prev{left:4px;}.vs-next{right:4px;}
.vs-arrow.disabled{opacity:.18;pointer-events:none;}
/* ── Progress bar ── */
.vs-progress{height:2px;background:var(--gray5);margin-top:1.2rem;border-radius:2px;overflow:hidden;position:relative;}
.vs-progress-bar{height:100%;background:var(--white);border-radius:2px;width:0%;transition:width .15s linear;}
/* ── Dots ── */
.vs-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.8rem;}
.vs-dot{width:20px;height:2px;background:var(--gray5);border:none;padding:0;cursor:pointer;transition:all .35s ease;border-radius:2px;}
.vs-dot.active{background:var(--white);width:38px;}
/* ── Responsive ── */
@media(max-width:1100px){.vs-slide{flex:0 0 320px;}}
@media(max-width:900px){.vs-slide{flex:0 0 300px;}.vs-outer{padding:0 46px;}}
@media(max-width:600px){.vs-slide{flex:0 0 268px;}.vs-outer{padding:0 40px;}}

/* ─── 4. MARKETING ─── */
#marketing{background:var(--gray1);}
.mkt-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:3rem;}
.mkt-analytics{padding:2rem;background:var(--glass);border:1px solid var(--border);}
.chart-bars{display:flex;align-items:flex-end;gap:6px;height:100px;margin-top:1rem;}
.bar{flex:1;background:rgba(255,255,255,.15);border-top:2px solid rgba(255,255,255,.6);border-radius:2px 2px 0 0;position:relative;transition:height .5s ease;}
.bar:hover{background:rgba(255,255,255,.25);}
.mkt-services{padding:2rem;background:var(--glass);border:1px solid var(--border);}
.mkt-item{display:flex;align-items:center;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--border);}
.mkt-item:last-child{border:none;}
.mkt-dot{width:8px;height:8px;border-radius:50%;background:var(--white);flex-shrink:0;}
.mkt-item-text h4{font-size:.85rem;font-weight:500;margin-bottom:.15rem;}
.mkt-item-text p{font-size:.72rem;color:var(--gray6);}
.growth-badge{font-family:var(--font-mono);font-size:.6rem;color:rgba(255,255,255,.8);background:rgba(255,255,255,.1);padding:.2rem .5rem;margin-left:auto;white-space:nowrap;}

/* ─── 5. GAME MAKER ─── */
#gamemaker{background:var(--black);}
.game-scene{background:var(--glass);border:1px solid var(--border);padding:2.5rem;margin-top:3rem;position:relative;overflow:hidden;}
.cube-container{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin:2rem 0;}
.cube-wrap{width:90px;height:90px;perspective:300px;cursor:pointer;}
.cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;animation:rotateCube 8s linear infinite;}
.cube-wrap:nth-child(2) .cube{animation-delay:-2s;animation-duration:10s;}
.cube-wrap:nth-child(3) .cube{animation-delay:-4s;animation-duration:12s;}
@keyframes rotateCube{from{transform:rotateX(20deg) rotateY(0deg)}to{transform:rotateX(20deg) rotateY(360deg)}}
.face{position:absolute;width:100%;height:100%;border:1px solid rgba(255,255,255,0.25);background:rgba(255,255,255,0.04);display:flex;align-items:center;justify-content:center;}
.face.front{transform:translateZ(45px);}
.face.back{transform:translateZ(-45px) rotateY(180deg);}
.face.left{transform:translateX(-45px) rotateY(-90deg);}
.face.right{transform:translateX(45px) rotateY(90deg);}
.face.top{transform:translateY(-45px) rotateX(90deg);}
.face.bottom{transform:translateY(45px) rotateX(-90deg);}
.face-label{font-family:var(--font-mono);font-size:.5rem;color:rgba(255,255,255,.6);letter-spacing:.1em;}
.game-tech{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;}
.game-tech-badge{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.08em;padding:.4rem .9rem;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.15);color:var(--gray8);}
.game-platforms{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem;}
.platform-card{padding:1.5rem;background:var(--glass);border:1px solid var(--border);text-align:center;transition:all .4s;}
.platform-card:hover{border-color:var(--border2);transform:translateY(-4px);}
.platform-card h3{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.05em;margin:.5rem 0 .3rem;}
.platform-card p{font-size:.75rem;color:var(--gray6);}
.platform-icon{font-size:2.2rem;}

/* ─── 6. ETHICAL HACKING ─── */
#ethicalhacking{background:var(--gray1);}
.terminal{background:#050505;border:1px solid var(--border);padding:1.5rem;font-family:var(--font-mono);margin-top:2rem;}
.terminal-header{display:flex;align-items:center;gap:.6rem;margin-bottom:1.2rem;padding-bottom:.8rem;border-bottom:1px solid var(--border);}
.t-prompt{font-size:.7rem;color:var(--gray6);}
.t-line{margin:.3rem 0;font-size:.72rem;line-height:1.6;}
.t-green{color:#4ade80;}.t-white{color:var(--gray8);}.t-gray{color:var(--gray6);}
.t-cursor{display:inline-block;width:7px;height:12px;background:var(--white);animation:blink .8s step-end infinite;vertical-align:middle;}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.hack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem;}
.hack-card{padding:1.8rem;background:var(--glass);border:1px solid var(--border);transition:all .4s;}
.hack-card:hover{border-color:rgba(255,255,255,.3);background:var(--glass2);transform:translateY(-3px);}
.hack-card h3{font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin:.6rem 0 .4rem;}
.hack-card p{font-size:.75rem;color:var(--gray7);line-height:1.6;}
.shield-icon{font-size:1.5rem;}

/* ─── 7. WHY CHOOSE ME ─── */
#whyme{background:var(--black);}
.why-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start;margin-top:3rem;}
.why-list{display:flex;flex-direction:column;gap:1.5rem;}
.why-item{display:flex;gap:1.2rem;padding:1.5rem;background:var(--glass);border:1px solid var(--border);transition:all .4s;position:relative;overflow:hidden;}
.why-item::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.03),transparent);pointer-events:none;}
.why-item:hover{border-color:var(--border2);transform:translateX(6px);}
.why-num{font-family:var(--font-display);font-size:2rem;color:rgba(255,255,255,.1);line-height:1;flex-shrink:0;width:40px;}
.why-item h3{font-size:.9rem;font-weight:600;margin-bottom:.4rem;letter-spacing:.03em;}
.why-item p{font-size:.78rem;color:var(--gray7);line-height:1.7;}
.why-visual{position:sticky;top:7rem;}
.why-big-text{font-family:var(--font-display);font-size:clamp(3rem,9vw,6.5rem);line-height:.88;letter-spacing:.02em;color:transparent;background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.15));-webkit-background-clip: text; background-clip: text;background-clip:text;margin-bottom:2rem;}
.why-badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.why-badge{padding:1.2rem;background:var(--glass);border:1px solid var(--border);text-align:center;}
.why-badge .num{font-family:var(--font-display);font-size:2rem;margin-bottom:.2rem;}
.why-badge .lbl{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray6);}

/* ─── 8. CONTACT ─── */
#contact{background:var(--gray1);}
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:3rem;}
.contact-info{display:flex;flex-direction:column;gap:1rem;}
.contact-item{display:flex;align-items:center;gap:1rem;padding:1.2rem 1.5rem;background:var(--glass);border:1px solid var(--border);transition:all .4s;text-decoration:none;color:inherit;}
.contact-item:hover{border-color:var(--border2);background:var(--glass2);transform:translateX(6px);}
.contact-icon{font-size:1.2rem;width:36px;text-align:center;}
.contact-item-body .lbl{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;color:var(--gray6);text-transform:uppercase;margin-bottom:.2rem;}
.contact-item-body .val{font-size:.85rem;font-weight:500;}
.contact-form{background:var(--glass);border:1px solid var(--border);padding:2rem;}
.contact-form h3{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.05em;margin-bottom:1.5rem;}
.form-group{margin-bottom:1.2rem;}
.form-group label{display:block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gray6);margin-bottom:.5rem;}
.form-group input,.form-group textarea{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);color:var(--white);padding:.75rem 1rem;font-family:var(--font-body);font-size:.85rem;outline:none;transition:border-color .3s;resize:none;}
.form-group input:focus,.form-group textarea:focus{border-color:rgba(255,255,255,.4);}
.form-group input::placeholder,.form-group textarea::placeholder{color:var(--gray5);}
.btn-send {
  width: 100%; background: linear-gradient(135deg, #fff, #eee); color: var(--black);
  border: none; border-radius: 8px; padding: 1rem;
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer; position: relative; overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 5px 20px rgba(255,255,255,0.15);
}
.btn-send::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
  transform: translateX(-100%); transition: transform 0.6s ease;
}
.btn-send:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(255,255,255,0.3);
  background: #fff;
}
.btn-send:hover::after { transform: translateX(100%); }
.btn-send:active { transform: scale(0.96); box-shadow: 0 4px 10px rgba(255,255,255,0.2); }

/* ─── 9. MEMORY FOOTER ─── */
#memory{background:var(--black);min-height:100vh;min-height:100dvh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;}
.memory-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 60%,rgba(255,255,255,.04) 0%,transparent 60%);}
.memory-content{position:relative;z-index:5;padding:2rem;}
.memory-label{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.35em;color:var(--gray6);text-transform:uppercase;margin-bottom:2rem;}
.memory-quote{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,6rem);line-height:1;letter-spacing:.03em;color:transparent;background:linear-gradient(135deg,#fff 0%,#666 50%,#fff 100%);-webkit-background-clip: text; background-clip: text;background-clip:text;background-size:200%;animation:chromaSlide 4s ease-in-out infinite;margin-bottom:1.5rem;}
.memory-name{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.3em;color:var(--gray6);text-transform:uppercase;margin-top:3rem;}
.memory-copy{font-size:.7rem;color:var(--gray6);margin-top:.5rem;}
.socials{display:flex;gap:1.2rem;justify-content:center;margin-top:2.5rem;}
.social-link{width:44px;height:44px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1rem;text-decoration:none;color:var(--gray7);transition:all .3s;background:var(--glass);}
.social-link:hover{border-color:var(--border2);color:var(--white);background:var(--glass2);}

/* SCROLL REVEAL */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s ease,transform .8s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-left{opacity:0;transform:translateX(-30px);transition:opacity .8s ease,transform .8s ease;}
.reveal-left.visible{opacity:1;transform:translateX(0);}
.reveal-right{opacity:0;transform:translateX(30px);transition:opacity .8s ease,transform .8s ease;}
.reveal-right.visible{opacity:1;transform:translateX(0);}

/* PREMIUM MOBILE NAV */
.mobile-menu{position:fixed;inset:0;background:rgba(8,8,8,0.85);-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);z-index:99;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:1.2rem;padding-top:100px;padding-bottom:60px;overflow-y:auto;overscroll-behavior:contain;opacity:0;visibility:hidden;clip-path:circle(0% at top right);transition:all .6s cubic-bezier(.65,0,.15,1);}
.mobile-menu.open{opacity:1;visibility:visible;clip-path:circle(150% at top right);}
.mobile-menu a{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.05em;color:var(--white);text-decoration:none;text-transform:uppercase;opacity:0;transform:translateY(20px);transition:opacity .4s ease, transform .4s cubic-bezier(.4,0,.2,1), text-shadow .3s, scale .3s;}
.mobile-menu.open a{opacity:1;transform:translateY(0);}
.mobile-menu a:hover{scale:1.05;text-shadow:0 0 16px rgba(255,255,255,.4);}
.mobile-menu.open a:nth-child(1){transition-delay:.1s;}
.mobile-menu.open a:nth-child(2){transition-delay:.15s;}
.mobile-menu.open a:nth-child(3){transition-delay:.2s;}
.mobile-menu.open a:nth-child(4){transition-delay:.25s;}
.mobile-menu.open a:nth-child(5){transition-delay:.3s;}
.mobile-menu.open a:nth-child(6){transition-delay:.35s;}
.mobile-menu.open a:nth-child(7){transition-delay:.4s;}
.mobile-menu.open a:nth-child(8){transition-delay:.45s;}
.mobile-menu.open a:nth-child(9){transition-delay:.5s;}
.mobile-menu.open a:nth-child(10){transition-delay:.55s;}
.mobile-menu.open a:nth-child(11){transition-delay:.6s;}
.mobile-menu.open a:nth-child(12){transition-delay:.65s;}
.mobile-menu.open a:nth-child(13){transition-delay:.7s;}
.mobile-menu::-webkit-scrollbar { width: 4px; }
.mobile-menu::-webkit-scrollbar-track { background: transparent; }
.mobile-menu::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; }

/* RESPONSIVE */
@media(max-width:1150px){
  .hamburger{display:flex;}
  .nav-links,.nav-cta{display:none;}
}
@media(max-width:900px){
  .mkt-grid,.why-layout,.contact-layout{grid-template-columns:1fr;} 
  .dev-grid{grid-template-columns:1fr 1fr;}
  .ve-services,.hack-grid{grid-template-columns:1fr 1fr;}
  .why-visual{position:static;}
}
@media(max-width:600px){
  .section-inner{padding:5rem 1.2rem;}
  .dev-grid,.ve-services,.hack-grid,.game-platforms{grid-template-columns:1fr;}
  .why-badge-grid{grid-template-columns:1fr 1fr;}
  nav{padding:1rem 1.2rem;}
}

/* ═══ 1. HERO ═══ */
#hero{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.06) 0%,transparent 65%);padding-top: 80px;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(255,255,255,0.03) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(255,255,255,0.04) 0%,transparent 50%);}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px);background-size:60px 60px;animation:gridPulse 6s ease-in-out infinite;}
@keyframes gridPulse{0%,100%{opacity:.4}50%{opacity:.8}}
.hero-content{position:relative;z-index:5;padding:1rem 2rem;margin-top:auto;margin-bottom:auto;max-width:1200px;width:100%;}
.hero-eyebrow{font-family:var(--font-mono);font-size:clamp(0.6rem, 1.5vw, 0.7rem);letter-spacing:0.35em;color:var(--gray6);text-transform:uppercase;margin-bottom:1.5rem;opacity:0;animation:fadeUp .8s ease forwards .3s;display:flex;align-items:center;justify-content:center;gap:0.5rem;}
.hero-name{font-family:var(--font-display);font-size:clamp(3.5rem,12vw,9rem);letter-spacing:0.04em;line-height:1;color:transparent;background:linear-gradient(135deg,#fff 30%,#888 55%,#fff 80%);-webkit-background-clip: text; background-clip: text;background-clip:text;background-size:200%;animation:fadeUp .8s ease forwards .5s,chromaSlide 5s ease-in-out infinite 1.3s;opacity:0;margin: 0;padding: 0;}
@keyframes chromaSlide{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero-sub{font-family:var(--font-mono);font-size:clamp(0.6rem,1.5vw,0.85rem);letter-spacing:0.25em;color:var(--gray6);text-transform:uppercase;margin-top:1rem;opacity:0;animation:fadeUp .8s ease forwards .7s;line-height:1.5;}
.hero-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;margin-top:2rem;opacity:0;animation:fadeUp .8s ease forwards .9s;max-width:800px;margin-left:auto;margin-right:auto;}
.hero-tag{font-size:clamp(0.6rem, 1.5vw, 0.7rem);letter-spacing:0.1em;text-transform:uppercase;padding:.4rem .8rem;border:1px solid var(--border);background:var(--glass);-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);color:var(--gray8);transition:all .3s;}
.hero-tag:hover{border-color:var(--border2);color:var(--white);background:var(--glass2);transform:translateY(-2px);}
.hero-scroll{position:relative;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:.5rem;opacity:0;animation:fadeUp .8s ease forwards 1.2s;z-index:5;}
.hero-scroll span{font-family:var(--font-mono);font-size:0.6rem;letter-spacing:.2em;color:var(--gray6);}
.scroll-line{width:1px;height:50px;background:linear-gradient(to bottom,transparent,var(--gray5));position:relative;overflow:hidden;}
.scroll-line::after{content:'';position:absolute;top:-100%;left:0;right:0;height:100%;background:linear-gradient(to bottom,transparent,var(--white));animation:scrollLine 2s ease-in-out infinite;}
@keyframes scrollLine{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
.hero-avatar{width:clamp(80px, 15vw, 130px);height:clamp(80px, 15vw, 130px);border-radius:50%;border:2px solid var(--border2);background:linear-gradient(135deg,var(--glass2),var(--glass));-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);margin:0 auto 1.5rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:clamp(2rem, 5vw, 3rem);color:var(--gray5);position:relative;opacity:0;animation:fadeUp .8s ease forwards .2s;}
.hero-avatar::before{content:'';position:absolute;inset:-4px;border-radius:50%;border:1px solid transparent;background:linear-gradient(135deg,rgba(255,255,255,.3),transparent,rgba(255,255,255,.1)) border-box;-webkit-mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);-webkit-mask-composite:destination-out;mask-composite:destination-out;mask-composite:exclude;}

/* ═══════════════════════════════════════════════════════════════════
   NEW ADDITIONS — Sub-page styles (appended, no existing rules modified)
   ═══════════════════════════════════════════════════════════════════ */

/* ── Page Hero (shorter variant for sub-pages) ── */
.page-hero{
  min-height:50vh;
  min-height:50dvh;
  display:flex;align-items:center;justify-content:center;text-align:center;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 0%,rgba(255,255,255,0.06) 0%,transparent 65%);
  padding-top:5rem;
}
.page-hero .hero-content{position:relative;z-index:5;padding:2rem;}
.page-hero .page-title{
  font-family:var(--font-display);
  font-size:clamp(3rem,10vw,7rem);
  letter-spacing:.04em;line-height:.92;
  color:transparent;
  background:linear-gradient(135deg,#fff 30%,#888 55%,#fff 80%);
  -webkit-background-clip: text; background-clip: text;background-clip:text;
  background-size:200%;
  animation:chromaSlide 5s ease-in-out infinite;
}
.page-hero .page-subtitle{
  font-family:var(--font-mono);
  font-size:clamp(0.6rem,1.3vw,0.8rem);
  letter-spacing:.25em;color:var(--gray6);
  text-transform:uppercase;margin-top:1rem;
}
.page-breadcrumb{
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.2em;
  color:var(--gray6);text-transform:uppercase;margin-bottom:1.5rem;
}
.page-breadcrumb a{color:var(--gray7);text-decoration:none;transition:color .3s;}
.page-breadcrumb a:hover{color:var(--white);}

/* ── Nav Dropdown ── */
.nav-dropdown-wrap{position:relative;}
.nav-dropdown-btn{
  color:var(--gray7);background:none;border:none;
  font-family:var(--font-body);font-size:0.8rem;letter-spacing:0.1em;
  text-transform:uppercase;cursor:pointer;transition:color .3s;font-weight:500;
}
.nav-dropdown-btn:hover{color:var(--white);}
.nav-dropdown{
  display:none;position:absolute;top:calc(100% + 1rem);right:0;
  min-width:auto;width:max-content;max-width:100vw;padding:1.5rem;
  background:rgba(0,0,0,0.92);-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border:1px solid var(--border);z-index:200;
}
.nav-dropdown.open{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem;}
.nav-dropdown-col h4{
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;
  color:var(--gray6);text-transform:uppercase;margin-bottom:.8rem;
  padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.nav-dropdown-col a{
  display:block;color:var(--gray7);text-decoration:none;font-size:.78rem;
  padding:.35rem 0;transition:color .3s;letter-spacing:.03em;
}
.nav-dropdown-col a:hover{color:var(--white);}

/* ── Footer Links Grid ── */
.footer-links{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  max-width:900px;margin:3rem auto 2rem;text-align:left;
  padding-top:2.5rem;border-top:1px solid var(--border);
}
.footer-col h4{
  font-family:var(--font-mono);font-size:.55rem;letter-spacing:.2em;
  color:var(--gray6);text-transform:uppercase;margin-bottom:.8rem;
}
.footer-col a{
  display:block;color:var(--gray7);text-decoration:none;font-size:.72rem;
  padding:.25rem 0;transition:color .3s;
}
.footer-col a:hover{color:var(--white);}

/* ── FAQ Accordion ── */
.faq-item{
  background:var(--glass);border:1px solid var(--border);
  margin-bottom:1rem;transition:all .4s;overflow:hidden;
}
.faq-item:hover{border-color:var(--border2);}
.faq-question{
  display:flex;justify-content:space-between;align-items:center;
  padding:1.5rem 2rem;cursor:pointer;transition:background .3s;
}
.faq-question:hover{background:var(--glass2);}
.faq-question h3{
  font-size:.9rem;font-weight:500;letter-spacing:.03em;
  flex:1;padding-right:1rem;
}
.faq-question .faq-toggle{
  font-family:var(--font-mono);font-size:1.2rem;color:var(--gray6);
  transition:transform .3s;flex-shrink:0;
}
.faq-item.open .faq-toggle{transform:rotate(45deg);}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease;
}
.faq-item.open .faq-answer{max-height:500px;padding:0 2rem 1.5rem;}
.faq-answer p{font-size:.85rem;color:var(--gray7);line-height:1.8;}

/* ── Pricing Cards ── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.pricing-card{
  padding:2.5rem 2rem;background:var(--glass);border:1px solid var(--border);
  transition:all .4s;position:relative;overflow:hidden;
}
.pricing-card:hover{border-color:var(--border2);background:var(--glass2);transform:translateY(-4px);}
.pricing-card .pricing-icon{font-size:2rem;margin-bottom:1rem;}
.pricing-card h3{
  font-family:var(--font-display);font-size:1.4rem;letter-spacing:.05em;margin-bottom:.5rem;
}
.pricing-card .pricing-range{
  font-family:var(--font-mono);font-size:1.1rem;color:var(--white);
  letter-spacing:.05em;margin-bottom:1rem;
}
.pricing-card .pricing-desc{font-size:.8rem;color:var(--gray7);line-height:1.7;}
.pricing-badge{
  display:inline-block;font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.1em;padding:.3rem .7rem;
  border:1px solid var(--border);color:var(--gray8);margin-top:1rem;
}

/* ── Audience / Service / Workflow Cards ── */
.content-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.content-card{
  padding:2rem;background:var(--glass);border:1px solid var(--border);
  transition:all .4s;position:relative;overflow:hidden;
}
.content-card:hover{border-color:var(--border2);background:var(--glass2);transform:translateY(-3px);}
.content-card .card-icon{font-size:2rem;margin-bottom:1rem;display:block;}
.content-card h3{
  font-family:var(--font-display);font-size:1.2rem;letter-spacing:.05em;margin-bottom:.5rem;
}
.content-card p{font-size:.8rem;color:var(--gray7);line-height:1.7;}
.content-card ul{list-style:none;margin-top:.8rem;}
.content-card ul li{
  font-size:.78rem;color:var(--gray7);padding:.3rem 0;
  padding-left:1rem;position:relative;
}
.content-card ul li::before{
  content:'›';position:absolute;left:0;color:var(--gray6);
}

/* ── Workflow Steps ── */
.workflow-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;}
.workflow-step{
  display:flex;gap:1.2rem;padding:1.8rem;
  background:var(--glass);border:1px solid var(--border);transition:all .4s;
}
.workflow-step:hover{border-color:var(--border2);transform:translateX(4px);}
.workflow-step .step-num{
  font-family:var(--font-display);font-size:2.5rem;
  color:rgba(255,255,255,.08);line-height:1;flex-shrink:0;width:50px;
}
.workflow-step h3{font-size:.9rem;font-weight:600;margin-bottom:.4rem;letter-spacing:.03em;}
.workflow-step p{font-size:.78rem;color:var(--gray7);line-height:1.7;}

/* ── Legal Text ── */
.legal-section{margin-top:3rem;}
.legal-section h3{
  font-family:var(--font-display);font-size:1.6rem;letter-spacing:.05em;
  margin-bottom:1rem;margin-top:2.5rem;
}
.legal-section h3:first-child{margin-top:0;}
.legal-section p{
  font-size:.88rem;color:var(--gray7);line-height:1.9;margin-bottom:1rem;
}
.legal-section ul{list-style:none;margin-bottom:1.5rem;}
.legal-section ul li{
  font-size:.85rem;color:var(--gray7);line-height:1.8;
  padding:.3rem 0 .3rem 1.2rem;position:relative;
}
.legal-section ul li::before{
  content:'•';position:absolute;left:0;color:var(--gray6);
}
.legal-card{
  padding:2.5rem;background:var(--glass);border:1px solid var(--border);
  margin-bottom:2rem;
}

/* ── Link Cards (Legal Center, etc.) ── */
.link-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem;}
.link-card{
  display:flex;align-items:center;gap:1rem;padding:1.5rem 2rem;
  background:var(--glass);border:1px solid var(--border);
  text-decoration:none;color:inherit;transition:all .4s;
}
.link-card:hover{border-color:var(--border2);background:var(--glass2);transform:translateX(6px);}
.link-card .link-icon{font-size:1.5rem;flex-shrink:0;}
.link-card h3{font-size:.9rem;font-weight:500;}
.link-card p{font-size:.72rem;color:var(--gray6);margin-top:.2rem;}

/* ── Info Highlight Box ── */
.info-box{
  padding:2rem;background:var(--glass);border:1px solid var(--border);
  margin:2rem 0;
}
.info-box h4{
  font-family:var(--font-mono);font-size:.65rem;letter-spacing:.2em;
  color:var(--gray6);text-transform:uppercase;margin-bottom:1rem;
}
.info-row{
  display:flex;gap:1rem;padding:.6rem 0;
  border-bottom:1px solid var(--border);
  align-items:baseline;
}
.info-row:last-child{border:none;}
.info-row .info-label{
  font-family:var(--font-mono);font-size:.7rem;color:var(--gray6);
  min-width:140px;flex-shrink:0;
}
.info-row .info-value{font-size:.85rem;color:var(--white);}

/* ── Select dropdown for contact form ── */
.form-group select{
  width:100%;background:rgba(255,255,255,.04);border:1px solid var(--border);
  color:var(--white);padding:.75rem 1rem;font-family:var(--font-body);
  font-size:.85rem;outline:none;transition:border-color .3s;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}
.form-group select:focus{border-color:rgba(255,255,255,.4);}
.form-group select option{background:var(--black);color:var(--white);}

/* ── Mobile Menu Sub-links ── */
.mobile-menu .mobile-divider{
  width:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);margin:.8rem 0;transition:width .6s cubic-bezier(.4,0,.2,1) .3s;
}
.mobile-menu.open .mobile-divider{width:120px;}
.mobile-menu .mobile-sub-link{
  font-family:var(--font-mono);font-size:0.85rem;
  letter-spacing:.2em;color:var(--gray6);
}
.mobile-menu .mobile-sub-link:hover{color:var(--white);text-shadow:none;}

/* ── Sub-page responsive ── */
@media(max-width:900px){
  .pricing-grid,.content-grid,.link-grid{grid-template-columns:1fr 1fr;}
  .workflow-grid{grid-template-columns:1fr;}
  .footer-links{grid-template-columns:1fr 1fr;}
  .nav-dropdown{min-width:320px;}
  .nav-dropdown.open{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .pricing-grid,.content-grid,.link-grid{grid-template-columns:1fr;}
  .footer-links{grid-template-columns:1fr 1fr;}
  .page-hero{min-height:40vh;}
}


/* ─── WEBSITE SAMPLES VIDEO SLIDER inside Developer Section ─── */
  .ws-wrapper{margin-top:3.5rem;position:relative;}
  .ws-header{margin-bottom:1.8rem;}
  .ws-title{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.8rem);letter-spacing:.04em;line-height:1;margin-bottom:.5rem;}
  .ws-subtitle{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.18em;color:var(--gray6);text-transform:uppercase;}
  .ws-outer{position:relative;padding:0 52px;}
  .ws-track-wrap{overflow:hidden;position:relative;}
  .ws-track{
    display:flex;gap:16px;
    transition:transform .4s cubic-bezier(.4,0,.2,1);
    will-change:transform;cursor:grab;align-items:flex-start;
  }
  .ws-track.is-dragging{transition:none !important;cursor:grabbing;}
  .ws-slide{
    flex:0 0 360px;
    border-radius:18px;overflow:hidden;
    background:#000;border:1px solid var(--border);
    transform:scale(0.93);opacity:.75;
    transition:transform .4s ease, opacity .4s ease, border-color .3s, box-shadow .3s;
    animation:wsFadeIn .5s ease both;
    contain:layout style;
  }
  @keyframes wsFadeIn{
    from{opacity:0;transform:scale(.88) translateY(12px)}
    to{opacity:.75;transform:scale(.93) translateY(0)}
  }
  .ws-slide.ws-active{
    transform:scale(1);opacity:1;
    border-color:var(--border2);
    box-shadow:0 0 36px rgba(255,255,255,.07),0 10px 36px rgba(0,0,0,.7);
  }
  .ws-iframe-wrap{
    position:relative;width:100%;
    aspect-ratio:9/16;
    background:#000;
    overflow:hidden;
    border-radius:18px 18px 0 0;
  }
  .ws-iframe-wrap iframe{
    position:absolute;inset:0;
    width:100%;height:100%;
    border:none;display:block;
    object-fit:contain;
  }
  .ws-iframe-wrap::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(135deg,#0a0a0a 0%,#141414 50%,#0a0a0a 100%);
    background-size:200% 200%;
    animation:wsSkeleton 1.8s ease infinite;
    z-index:0;border-radius:18px 18px 0 0;
  }
  @keyframes wsSkeleton{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
  .ws-iframe-wrap iframe{z-index:1;}
  .ws-slide-label{
    padding:.7rem 1rem;
    background:rgba(0,0,0,.6);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top:1px solid var(--border);
    border-radius:0 0 18px 18px;
  }
  .ws-slide-label span{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.14em;color:var(--gray6);text-transform:uppercase;}
  .ws-arrow{
    position:absolute;top:42%;transform:translateY(-50%);z-index:20;
    width:40px;height:40px;
    background:rgba(8,8,8,.88);border:1px solid var(--border);
    color:var(--white);display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:background .25s,border-color .25s,transform .25s;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-radius:50%;font-size:.88rem;-webkit-user-select:none;user-select:none;flex-shrink:0;
  }
  .ws-arrow:hover{background:rgba(255,255,255,.13);border-color:var(--border2);transform:translateY(-50%) scale(1.1);}
  .ws-prev{left:4px;}.ws-next{right:4px;}
  .ws-arrow.disabled{opacity:.18;pointer-events:none;}
  .ws-progress{height:2px;background:var(--gray5);margin-top:1.2rem;border-radius:2px;overflow:hidden;position:relative;}
  .ws-progress-bar{height:100%;background:var(--white);border-radius:2px;width:0%;transition:width .15s linear;}
  .ws-dots{display:flex;justify-content:center;gap:.5rem;margin-top:.8rem;}
  .ws-dot{width:20px;height:2px;background:var(--gray5);border:none;padding:0;cursor:pointer;transition:all .35s ease;border-radius:2px;}
  .ws-dot.active{background:var(--white);width:38px;}
  @media(max-width:1100px){.ws-slide{flex:0 0 320px;}}
  @media(max-width:900px){.ws-slide{flex:0 0 300px;}.ws-outer{padding:0 46px;}}
  @media(max-width:600px){.ws-slide{flex:0 0 268px;}.ws-outer{padding:0 40px;}}


/* ═══════════════════════════════════════════════════════════════════
   RAZORPAY PAYMENT — Button, Toast, Loading styles
   ═══════════════════════════════════════════════════════════════════ */

/* ── Pay Button ── */
.pay-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  width:100%;justify-content:center;
  margin-top:1.2rem;padding:.85rem 1.5rem;
  background:transparent;
  border:1px solid var(--border2);
  color:var(--white);
  font-family:var(--font-body);font-size:.8rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;overflow:hidden;
  border-radius: 8px;
}
.pay-btn::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.08),transparent 60%);
  opacity:0;transition:opacity .35s ease;
}
.pay-btn:hover{
  border-color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.1);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 12px 25px rgba(255,255,255,0.15);
}
.pay-btn:hover::before{opacity:1;}
.pay-btn:active{transform:scale(0.96);box-shadow:0 4px 10px rgba(255,255,255,0.05);}

/* Loading state */
.pay-btn-loading{
  pointer-events:none;opacity:.7;
  border-color:var(--border);
}

/* Paid state */
.pay-btn-paid{
  border-color:rgba(74,222,128,0.4);
  color:rgba(74,222,128,0.9);
  pointer-events:none;
  background:rgba(74,222,128,0.06);
}

/* ── Spinner ── */
.rzp-spinner{
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:var(--white);
  border-radius:50%;
  animation:rzpSpin .6s linear infinite;
  vertical-align:middle;
}
@keyframes rzpSpin{to{transform:rotate(360deg)}}

/* ── Toast Notifications ── */
.rzp-toast{
  position:fixed;top:1.5rem;right:1.5rem;z-index:10000;
  display:flex;align-items:center;gap:.8rem;
  padding:1rem 1.5rem;
  background:rgba(10,10,10,0.92);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border:1px solid var(--border);
  color:var(--white);
  font-family:var(--font-body);font-size:.85rem;
  max-width:420px;
  transform:translateX(120%);
  transition:transform .4s cubic-bezier(.4,0,.2,1), opacity .4s ease;
  opacity:0;
  box-shadow:0 8px 32px rgba(0,0,0,0.6);
}
.rzp-toast-show{
  transform:translateX(0);opacity:1;
}
.rzp-toast-icon{
  font-size:1.1rem;flex-shrink:0;
}
.rzp-toast-msg{
  line-height:1.4;
}

/* Toast types */
.rzp-toast-success{border-color:rgba(74,222,128,0.3);}
.rzp-toast-success .rzp-toast-icon{color:#4ade80;}
.rzp-toast-error{border-color:rgba(248,113,113,0.3);}
.rzp-toast-error .rzp-toast-icon{color:#f87171;}
.rzp-toast-info{border-color:rgba(96,165,250,0.3);}
.rzp-toast-info .rzp-toast-icon{color:#60a5fa;}

/* ── Mobile responsive ── */
@media(max-width:600px){
  .rzp-toast{
    left:1rem;right:1rem;max-width:none;
    top:auto;bottom:1.5rem;
    transform:translateY(120%);
  }
  .rzp-toast-show{transform:translateY(0);}
}

/* ═══════════════════════════════════════════════════════════════════
   PRODUCTS, AUTH, DASHBOARD — New styles appended
   ═══════════════════════════════════════════════════════════════════ */

/* ── Nav Auth State ── */
#navAuthState{display:flex;align-items:center;margin-left:.5rem;position:relative;}
/* Premium Nav Avatar CSS moved below */
.nav-auth-link{font-family:var(--font-body);font-size:.75rem;color:var(--gray7);text-decoration:none;padding:.3rem .7rem;border:1px solid var(--border);border-radius:6px;transition:all .2s;}
.nav-auth-link:hover{color:var(--text);border-color:var(--red);}

/* User Dropdown */
.nav-user-dropdown{
  display:none;position:absolute;top:calc(100% + 1rem);right:0;
  width:220px;padding:.5rem;
  background:rgba(10,10,10,0.95);-webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);z-index:200;
}
.nav-user-dropdown.open{display:flex;flex-direction:column;}
.nav-user-dropdown-header{
  padding:.75rem 1rem;border-bottom:1px solid var(--border);
  margin-bottom:.5rem;
}
.nav-user-dropdown-name{font-family:var(--font-display);font-size:1.1rem;letter-spacing:.03em;color:var(--white);}
.nav-user-dropdown-email{font-family:var(--font-mono);font-size:.65rem;color:var(--gray6);word-break:break-all;}
.nav-user-dropdown-link{
  display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;
  color:var(--gray7);text-decoration:none;font-size:.8rem;
  border-radius:var(--radius-sm);transition:all .2s;
}
.nav-user-dropdown-link:hover{background:rgba(255,255,255,0.04);color:var(--white);}
.nav-user-dropdown-divider{height:1px;background:var(--border);margin:.5rem 0;}
.nav-user-dropdown-logout{
  display:flex;align-items:center;gap:.6rem;padding:.6rem 1rem;
  color:var(--gray6);background:none;border:none;font-family:var(--font-body);
  font-size:.8rem;cursor:pointer;text-align:left;border-radius:var(--radius-sm);
  transition:all .2s;width:100%;
}
.nav-user-dropdown-logout:hover{background:rgba(229,9,20,.1);color:var(--red);}

/* Logout Confirm Dialog */
.logout-dialog-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.8);-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  z-index:10000;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.logout-dialog-overlay.show{opacity:1;pointer-events:auto;}
.logout-dialog{
  background:var(--gray1);border:1px solid var(--border);
  padding:2.5rem;border-radius:var(--radius-lg);
  max-width:400px;width:90%;text-align:center;
  transform:translateY(20px);transition:transform .3s cubic-bezier(.4,0,.2,1);
  box-shadow:var(--shadow-lg);
}
.logout-dialog-overlay.show .logout-dialog{transform:translateY(0);}
.logout-dialog h3{font-family:var(--font-display);font-size:1.8rem;letter-spacing:.05em;margin-bottom:.5rem;}
.logout-dialog p{font-size:.9rem;color:var(--gray6);margin-bottom:2rem;line-height:1.5;}
.logout-dialog-actions{display:flex;gap:1rem;justify-content:center;}
.logout-btn-cancel{
  padding:.75rem 1.5rem;background:transparent;border:1px solid var(--border);
  color:var(--gray7);font-family:var(--font-body);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-sm);
  cursor:pointer;transition:all .2s;
}
.logout-btn-cancel:hover{border-color:var(--gray5);color:var(--white);}
.logout-btn-confirm{
  padding:.75rem 1.5rem;background:var(--red);border:1px solid var(--red);
  color:var(--white);font-family:var(--font-body);font-weight:600;font-size:.8rem;
  text-transform:uppercase;letter-spacing:.05em;border-radius:var(--radius-sm);
  cursor:pointer;transition:all .2s;
}
.logout-btn-confirm:hover{background:#c81e1e;border-color:#c81e1e;}

/* ── Auth Page ── */
.auth-container{max-width:440px;margin:0 auto;}
.auth-tabs{display:flex;gap:0;margin-bottom:2rem;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.auth-tab{flex:1;padding:.75rem;background:none;border:none;color:var(--gray6);font-family:var(--font-display);font-size:1rem;letter-spacing:.05em;cursor:pointer;transition:all .2s;}
.auth-tab:hover{color:var(--gray8);}
.auth-tab.active{background:rgba(229,9,20,.1);color:var(--text);}
.auth-form .form-group{margin-bottom:1.2rem;}
.auth-message{padding:.75rem 1rem;border-radius:8px;font-size:.8rem;margin-bottom:1.5rem;}
.auth-message-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#f87171;}
.auth-message-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#4ade80;}
.auth-divider{text-align:center;margin:1.5rem 0;position:relative;}
.auth-divider::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border);}
.auth-divider span{background:var(--gray1);position:relative;padding:0 1rem;font-size:.75rem;color:var(--gray6);font-family:var(--font-mono);letter-spacing:.05em;}
.google-btn{
  display:flex;align-items:center;justify-content:center;gap:.6rem;width:100%;padding:.75rem;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);color:var(--gray8);
  font-family:var(--font-body);font-size:.85rem;cursor:pointer;border-radius:8px;
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position:relative;overflow:hidden;
}
.google-btn:hover{
  border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,.08);
  transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,0.4);
}
.google-btn:active{transform:scale(0.96);box-shadow:none;}
.auth-link-text{text-align:center;margin-top:1rem;font-size:.8rem;color:var(--gray6);}
.auth-link-text a{color:var(--gray7);text-decoration:none;border-bottom:1px solid var(--border);transition:color .2s;}
.auth-link-text a:hover{color:var(--text);}

/* ── Filter Bar (Products) ── */
.filter-bar{margin-bottom:2rem;}
.filter-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem;}
.filter-tab{padding:.4rem .9rem;background:none;border:1px solid var(--border);color:var(--gray6);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;cursor:pointer;border-radius:20px;transition:all .2s;text-transform:uppercase;}
.filter-tab:hover{border-color:var(--gray5);color:var(--gray8);}
.filter-tab.active{background:rgba(229,9,20,.1);border-color:var(--red);color:var(--text);}
.filter-controls{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;}
.search-input-wrap{position:relative;flex:1;min-width:200px;}
.search-input-wrap .search-icon-svg{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:var(--gray5);}
.search-input{width:100%;padding:.55rem .75rem .55rem 2.2rem;background:var(--gray2);border:1px solid var(--border);color:var(--text);font-family:var(--font-mono);font-size:.8rem;border-radius:8px;transition:border-color .2s;outline:none;}
.search-input:focus{border-color:var(--red);}
.search-input::placeholder{color:var(--gray5);}
.sort-select{padding:.55rem .75rem;background:var(--gray2);border:1px solid var(--border);color:var(--gray7);font-family:var(--font-mono);font-size:.75rem;border-radius:8px;cursor:pointer;outline:none;}

/* ── Product Grid ── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;}
.product-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;border-radius:12px;overflow:hidden;transition:transform .3s ease, box-shadow .3s ease;cursor:pointer;}
.product-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,.3);}
.product-card.revealed{opacity:1;transform:translateY(0);}
.product-thumb{position:relative;width:100%;padding-top:56.25%;background:var(--gray2);overflow:hidden;}
.product-thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.product-thumb-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--gray5);}
.product-body{padding:1rem 1.2rem 1.2rem;}
.product-category{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;color:var(--gray6);text-transform:uppercase;}
.product-title{font-family:var(--font-display);font-size:1.15rem;letter-spacing:.03em;margin:.35rem 0 .5rem;color:var(--text);line-height:1.15;}
.product-rating{display:flex;align-items:center;gap:.15rem;margin-bottom:.5rem;}
.star-icon{width:.85rem;height:.85rem;fill:none;stroke:var(--gray5);stroke-width:1.5;}
.star-icon.star-filled{fill:var(--red);stroke:var(--red);}
.rating-count{font-family:var(--font-mono);font-size:.65rem;color:var(--gray6);margin-left:.25rem;}
.product-price-row{display:flex;align-items:baseline;gap:.5rem;}
.product-price-current{font-family:var(--font-display);font-size:1.2rem;color:var(--text);}
.product-price-original{font-family:var(--font-mono);font-size:.8rem;color:var(--gray5);text-decoration:line-through;}
.product-badge{position:absolute;top:.5rem;left:.5rem;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.08em;padding:.2rem .5rem;border-radius:4px;z-index:1;text-transform:uppercase;}
.badge-featured{background:rgba(229,9,20,.9);color:white;}
.badge-bestseller{background:rgba(234,179,8,.9);color:black;}
.badge-new{background:rgba(34,197,94,.9);color:white;}
.badge-discount{background:var(--gray5);color:var(--white);}
.product-badge+.product-badge{left:auto;right:.5rem;}

/* Hover Preview Overlay */
.product-preview-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0.8);-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display:flex;align-items:center;justify-content:center;opacity:0;
  transition:opacity .3s ease;z-index:2;
}
.product-card:hover .product-preview-overlay{opacity:1;}
.product-preview-btn{
  padding:.6rem 1.2rem;background:var(--red);color:var(--white);
  border:none;border-radius:20px;font-family:var(--font-body);font-size:.8rem;
  font-weight:600;transform:translateY(10px);transition:all .3s ease;
}
.product-card:hover .product-preview-btn{transform:translateY(0);}

/* ── Product Loading/Empty ── */
.product-loading,.product-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;text-align:center;}

/* ── Pagination ── */
.product-pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:2rem;padding-top:1rem;border-top:1px solid var(--border);}
.pagination-btn{display:flex;align-items:center;gap:.4rem;padding:.5rem 1rem;background:none;border:1px solid var(--border);color:var(--gray7);font-family:var(--font-mono);font-size:.7rem;cursor:pointer;border-radius:6px;transition:all .2s;}
.pagination-btn:hover:not(:disabled){border-color:var(--gray5);color:var(--text);}
.pagination-btn:disabled{opacity:.3;cursor:not-allowed;}
.pagination-info{font-family:var(--font-mono);font-size:.7rem;color:var(--gray6);}

/* ── Product Detail ── */
.pd-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.pd-main-image{width:100%;border-radius:12px;overflow:hidden;background:var(--gray2);aspect-ratio:4/3;}
.pd-main-img{width:100%;height:100%;object-fit:cover;}
.pd-thumbnails{display:flex;gap:.5rem;margin-top:.75rem;}
.pd-thumb{width:60px;height:60px;border-radius:6px;object-fit:cover;cursor:pointer;border:2px solid transparent;opacity:.6;transition:all .2s;}
.pd-thumb:hover,.pd-thumb.active{opacity:1;border-color:var(--red);}
.pd-badges{display:flex;gap:.5rem;margin-bottom:.5rem;}
.pd-title{font-family:var(--font-display);font-size:2.2rem;letter-spacing:.03em;line-height:1.1;margin-bottom:.3rem;}
.pd-category-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;color:var(--gray6);text-transform:uppercase;display:inline-block;margin-bottom:.75rem;}
.pd-rating{display:flex;align-items:center;gap:.15rem;margin-bottom:1rem;}
.pd-description{font-size:.9rem;line-height:1.7;color:var(--gray7);margin-bottom:1.5rem;}
.pd-features ul{list-style:none;padding:0;margin:0 0 1.5rem;}
.pd-features li{font-size:.85rem;color:var(--gray7);padding:.3rem 0;display:flex;align-items:center;gap:.5rem;}
.pd-price-block{display:flex;align-items:baseline;gap:.75rem;margin-bottom:1.5rem;}
.pd-price-current{font-family:var(--font-display);font-size:2.5rem;color:var(--text);}
.pd-price-original{font-family:var(--font-mono);font-size:1rem;color:var(--gray5);text-decoration:line-through;}
.pd-discount-pct{font-family:var(--font-mono);font-size:.7rem;color:var(--red);border:1px solid var(--red);padding:.15rem .4rem;border-radius:4px;}
.pd-actions{display:flex;gap:.75rem;margin-bottom:1.5rem;flex-wrap:wrap;}
.pd-buy-btn{flex:1;min-width:180px;}
.pd-action-btn{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.03);border:1px solid var(--border);border-radius:8px;
  color:var(--gray6);cursor:pointer;transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink:0;position:relative;
}
.pd-action-btn:hover{
  border-color:var(--gray5);color:var(--text);
  transform:translateY(-2px) scale(1.05);
  box-shadow:0 6px 15px rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.08);
}
.pd-action-btn:active{transform:scale(0.94);}
.pd-action-btn.wishlisted{color:var(--red);border-color:var(--red);}
.pd-action-btn.wishlisted svg{fill:var(--red);}
.pd-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem;}
.pd-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;padding:.2rem .5rem;border:1px solid var(--border);border-radius:12px;color:var(--gray6);}
.pd-meta{font-family:var(--font-mono);font-size:.7rem;color:var(--gray6);display:flex;align-items:center;gap:.4rem;}
.pd-preview-video iframe,.pd-preview-pdf iframe{width:100%;height:450px;border:1px solid var(--border);border-radius:12px;background:var(--gray2);}

/* Creator Profile Card (Product Page) */
.creator-card{
  background:rgba(255,255,255,0.02);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.5rem;margin-top:2rem;
  display:flex;gap:1.2rem;align-items:center;
}
.creator-avatar{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid var(--border2);
}
.creator-info{flex:1;}
.creator-name{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.03em;margin-bottom:.2rem;}
.creator-role{font-family:var(--font-mono);font-size:.65rem;color:var(--gray6);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;}
.creator-stats{display:flex;gap:1rem;font-size:.75rem;color:var(--gray7);}
.creator-stat span{color:var(--white);font-weight:600;}
.creator-action{flex-shrink:0;}
.creator-btn{
  padding:.5rem 1rem;background:transparent;border:1px solid var(--gray5);
  color:var(--white);font-size:.8rem;border-radius:20px;cursor:pointer;
  transition:all .2s;
}
.creator-btn:hover{background:var(--white);color:var(--black);}

/* ── Reviews ── */
.review-form{padding:1.5rem;margin-bottom:2rem;}
.review-stars-input{display:flex;gap:.3rem;margin-bottom:1rem;font-size:1.5rem;cursor:pointer;color:var(--gray5);}
.review-stars-input span:hover,.review-stars-input span.active{color:var(--red);}
.review-list{display:flex;gap:1rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;}
.review-list::-webkit-scrollbar {height:6px;}
.review-list::-webkit-scrollbar-thumb {background:var(--border2);border-radius:10px;}
.review-card{padding:1rem;min-width:240px;max-width:280px;scroll-snap-align:start;border:1px solid var(--border);border-radius:12px;background:var(--glass2);}
.review-header{display:flex;flex-direction:column;margin-bottom:.5rem;}
.review-author{font-family:var(--font-display);font-size:.9rem;letter-spacing:.02em;color:var(--white);}
.review-date{font-family:var(--font-mono);font-size:.6rem;color:var(--gray5);margin-top:2px;}
.review-stars{color:var(--red);font-size:.8rem;margin-bottom:.5rem;}
.review-text{font-size:.8rem;color:var(--gray8);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
/* ── Gemini AI Chat Widget ── */
#aiChatWidget {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#aiChatBtn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(229, 57, 70, 0.4);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  display: flex;
  align-items: center;
  justify-content: center;
}
#aiChatBtn:hover {
  transform: scale(1.1) translateY(-4px);
}
#aiChatWindow {
  display: none;
  width: 380px;
  height: 550px;
  background: rgba(10,10,10,0.95);
  border: 1px solid var(--border);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  
  margin-bottom: 1rem;
  flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transform: translateY(20px) scale(0.95);
  opacity: 0;
  transform-origin: bottom right;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
}
#aiChatWindow.open {
  display: flex;
  transform: translateY(0) scale(1);
  opacity: 1;
}
#aiChatHeader {
  padding: 1.2rem;
  background: rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ai-header-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ai-header-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--red), #ff7b00);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: white;
}
#aiChatHeader h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  margin: 0;
  letter-spacing: 0.05em;
}
.ai-status {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: #4ade80;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.ai-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: #4ade80;
  border-radius: 50%;
  box-shadow: 0 0 8px #4ade80;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 0.5; } 50% { opacity: 1; } 100% { opacity: 0.5; } }
#aiChatClose {
  background: none;
  border: none;
  color: var(--gray6);
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0.5rem;
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
#aiChatClose:hover { color: var(--white); background: rgba(255,255,255,0.1); }
#aiChatMessages {
  flex: 1;
  padding: 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  scroll-behavior: smooth;
}
/* Welcome msg */
.ai-welcome {
  text-align: center;
  padding: 2rem 1rem;
}
.ai-welcome-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ff7b00, var(--red));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ai-welcome h4 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.ai-welcome p {
  font-size: 0.85rem;
  color: var(--gray6);
  line-height: 1.6;
}
.ai-msg-row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ai-msg {
  max-width: 85%;
  padding: 0.85rem 1.2rem;
  border-radius: 16px;
  font-size: 0.9rem;
  line-height: 1.6;
  position: relative;
  word-wrap: break-word;
}
.ai-msg.bot {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ai-msg.user {
  background: linear-gradient(135deg, var(--red), #d90429);
  color: var(--white);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 12px rgba(229, 9, 20, 0.2);
}
.ai-time {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--gray6);
  align-self: flex-start;
}
.ai-msg-row.user-row .ai-time {
  align-self: flex-end;
}
/* Typing Indicator */
.ai-typing {
  align-self: flex-start;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  padding: 1rem 1.2rem;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
  display: flex;
  gap: 4px;
  align-items: center;
}
.ai-dot {
  width: 6px;
  height: 6px;
  background: var(--gray6);
  border-radius: 50%;
  animation: typingDot 1.4s infinite ease-in-out both;
}
.ai-dot:nth-child(1) { animation-delay: -0.32s; }
.ai-dot:nth-child(2) { animation-delay: -0.16s; }
@keyframes typingDot { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); background: var(--white); } }

#aiChatInputWrap {
  padding: 1rem 1.2rem;
  background: rgba(0,0,0,0.6);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.8rem;
  align-items: center;
}
#aiChatInput {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--white);
  padding: 0.8rem 1.2rem;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: all 0.3s;
}
#aiChatInput:focus {
  outline: none;
  border-color: rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.09);
}
#aiChatInput::placeholder { color: var(--gray6); }
#aiChatSend {
  background: var(--red);
  color: var(--white);
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
#aiChatSend:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(229, 9, 20, 0.4);
}
#aiChatSend:disabled {
  background: var(--gray3);
  color: var(--gray6);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}
@media (max-width: 480px) {
  #aiChatWidget { bottom: 1rem; right: 1rem; z-index: 10000; }
  #aiChatWindow {
    width: calc(100vw - 2rem);
    height: calc(100vh - 6rem);
    max-height: 600px;
    border-radius: var(--radius-md);
  }
}

/* ── Dashboard ── */
.dashboard-layout{display:grid;grid-template-columns:260px 1fr;gap:2rem;align-items:start;}
.dash-sidebar{padding:1.5rem;position:sticky;top:5rem;}

/* Profile Cover & Stats */
.dash-cover{
  height:120px;background:linear-gradient(135deg, var(--gray3), var(--gray2));
  border-radius:var(--radius-md) var(--radius-md) 0 0;
  margin-bottom:-40px;position:relative;overflow:hidden;
}
.dash-cover::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at top right, rgba(229,9,20,0.2), transparent);
}
.dash-profile-wrap{
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-md);margin-bottom:1.5rem;
  overflow:hidden;
}
.dash-profile{text-align:center;padding:0 1.5rem 1.5rem;position:relative;z-index:2;}
.dash-avatar{
  width:80px;height:80px;border-radius:50%;background:var(--gray1);
  border:4px solid var(--gray1);display:flex;align-items:center;justify-content:center;
  margin:0 auto .75rem;font-family:var(--font-display);font-size:1.8rem;
  color:var(--white);overflow:hidden;position:relative;
}
.dash-avatar img{width:100%;height:100%;object-fit:cover;}
.dash-name-wrap{display:flex;align-items:center;justify-content:center;gap:.4rem;}
.dash-name{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.03em;margin-bottom:.2rem;}
.verified-badge{color:#3b82f6;font-size:1rem;display:inline-flex;align-items:center;justify-content:center;}
.dash-email{font-family:var(--font-mono);font-size:.65rem;color:var(--gray6);word-break:break-all;}
.dash-bio{font-size:.8rem;color:var(--gray7);line-height:1.5;margin-top:.75rem;}
.dash-socials{display:flex;gap:.5rem;justify-content:center;margin-top:1rem;}
.dash-social-link{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.05);
  display:flex;align-items:center;justify-content:center;color:var(--gray7);
  transition:all .2s;
}
.dash-social-link:hover{background:var(--white);color:var(--black);}

/* Stats Row */
.dash-stats-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;
  margin-bottom:2rem;
}
.dash-stat-card{
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.2rem;
  text-align:center;
}
.dash-stat-num{font-family:var(--font-display);font-size:2rem;color:var(--white);line-height:1;margin-bottom:.2rem;}
.dash-stat-label{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;color:var(--gray6);text-transform:uppercase;}

.dash-nav{display:flex;flex-direction:column;gap:.3rem;padding:0 1rem 1rem;}
.dash-tab{display:flex;align-items:center;gap:.6rem;width:100%;padding:.6rem .75rem;background:none;border:none;color:var(--gray6);font-family:var(--font-body);font-size:.8rem;cursor:pointer;border-radius:8px;transition:all .2s;text-align:left;}
.dash-tab:hover{background:rgba(255,255,255,.04);color:var(--text);}
.dash-tab.active{background:rgba(229,9,20,.1);color:var(--red);}
.dash-tab-logout{color:var(--gray5)!important;}
.dash-tab-logout:hover{color:var(--red)!important;}
.dash-content{min-height:400px;}
.dash-panel{display:none;}
.dash-panel.active{display:block;}
.dash-panel-title{font-family:var(--font-display);font-size:1.8rem;letter-spacing:.05em;margin-bottom:1.5rem;}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;}
.dash-item{padding:1.2rem;}
.dash-item h4{font-family:var(--font-display);font-size:1rem;margin-bottom:.3rem;}
.dash-item-link{display:inline-flex;align-items:center;gap:.3rem;font-size:.75rem;color:var(--red);text-decoration:none;margin-top:.5rem;font-family:var(--font-mono);letter-spacing:.05em;}
.dash-item-link:hover{text-decoration:underline;}
.dash-empty{color:var(--gray5);font-size:.8rem;padding:2rem 1rem;text-align:center;}
.dash-empty a{color:var(--red);text-decoration:none;}
.dash-form{padding:1.5rem;}
.file-input{font-size:.8rem;color:var(--gray6);}
.file-input::file-selector-button{background:var(--gray3);border:1px solid var(--border);color:var(--gray7);padding:.3rem .7rem;border-radius:6px;font-size:.75rem;cursor:pointer;margin-right:.5rem;}
.dash-table-wrap{overflow-x:auto;}
.dash-table{width:100%;border-collapse:collapse;font-size:.8rem;}
.dash-table th{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.1em;color:var(--gray6);text-transform:uppercase;text-align:left;padding:.75rem;border-bottom:1px solid var(--border);white-space:nowrap;}
.dash-table td{padding:.75rem;border-bottom:1px solid rgba(255,255,255,.03);color:var(--gray8);white-space:nowrap;}
.status-badge{font-family:var(--font-mono);font-size:.65rem;padding:.2rem .5rem;border-radius:4px;letter-spacing:.05em;}
.status-completed{background:rgba(34,197,94,.15);color:#22c55e;}
.status-pending{background:rgba(234,179,8,.15);color:#eab308;}
.status-failed{background:rgba(239,68,68,.15);color:#ef4444;}

/* ── Responsive: Products ── */
@media(max-width:768px){
  .pd-layout{grid-template-columns:1fr;gap:2rem;}
  .pd-title{font-size:1.6rem;}
  .pd-price-current{font-size:1.8rem;}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
  .dashboard-layout{grid-template-columns:1fr;}
  .dash-sidebar{position:static;}
  .filter-controls{flex-direction:column;}
  .search-input-wrap{min-width:100%;}
}
@media(max-width:480px){
  .product-grid{grid-template-columns:1fr;}
  .pd-preview-video iframe,.pd-preview-pdf iframe{height:250px;}
  .dash-grid{grid-template-columns:1fr;}
}

/* ═══════════════════════════════════════════════════════════════════
   AI CHAT WIDGET
   ═══════════════════════════════════════════════════════════════════ */
#aiChatWidget{position:fixed;bottom:1.5rem;right:1.5rem;z-index:10000;}
#aiChatBtn{
  width:60px;height:60px;border-radius:50%;border:none;
  background:linear-gradient(135deg,#e53946,#ff6b6b);color:var(--white);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(229,57,70,.5);
  transition:all .4s cubic-bezier(0.34, 1.56, 0.64, 1);
  animation: floatChatBtn 4s ease-in-out infinite;
  position: relative;
}
#aiChatBtn::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(229,57,70,.6);
  animation: pulseChatRing 2.5s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  pointer-events: none;
}
@keyframes floatChatBtn {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes pulseChatRing {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
#aiChatBtn:hover{
  transform:scale(1.15) translateY(-5px);
  box-shadow:0 15px 35px rgba(229,57,70,.7);
  animation: none;
}
#aiChatWindow{
  position:absolute;bottom:80px;right:0;width:380px;max-width:calc(100vw - 2rem);
  background:rgba(15, 15, 15, 0.85);-webkit-backdrop-filter: blur(30px) saturate(200%); backdrop-filter: blur(30px) saturate(200%);
  border:1px solid rgba(255, 255, 255, 0.1);border-radius:24px;
  display:none;flex-direction:column;overflow:hidden;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,0.05);
  max-height:min(520px, 75vh);
  transform-origin: bottom right;
}
#aiChatWindow.open{display:flex;animation:chatPopIn .5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;}
@keyframes chatPopIn{
  0%{opacity:0;transform:scale(0.8) translateY(20px);}
  100%{opacity:1;transform:scale(1) translateY(0);}
}
#aiChatHeader{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;border-bottom:1px solid var(--border);
  background:rgba(0,0,0,.4);-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);flex-shrink:0;
}
.ai-header-title{display:flex;align-items:center;gap:.6rem;}
.ai-header-avatar{
  width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#e53946,#ff6b6b);
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--white);
}
.ai-header-title h3{font-family:var(--font-display);font-size:1rem;letter-spacing:.05em;margin:0;}
.ai-status{font-family:var(--font-mono);font-size:.55rem;color:#22c55e;letter-spacing:.1em;}
#aiChatClose{
  background:none;border:none;color:var(--gray6);font-size:1.4rem;cursor:pointer;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;transition:all .2s;
}
#aiChatClose:hover{background:rgba(255,255,255,.1);color:var(--white);}
#aiChatMessages{
  flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;
  min-height:200px;scroll-behavior:smooth;
}
.ai-welcome{text-align:center;padding:2rem 1rem;color:var(--gray6);}
.ai-welcome-icon{font-size:2rem;margin-bottom:.5rem;}
.ai-welcome h4{font-family:var(--font-display);font-size:1.2rem;letter-spacing:.05em;color:var(--white);margin-bottom:.4rem;}
.ai-welcome p{font-size:.8rem;line-height:1.5;color:var(--gray7);}
.ai-msg-row{display:flex;flex-direction:column;max-width:85%;}
.ai-msg-row.user-row{align-self:flex-end;align-items:flex-end;}
.ai-msg-row.bot-row{align-self:flex-start;align-items:flex-start;}
.ai-msg{
  padding:.6rem .85rem;border-radius:12px;font-size:.82rem;line-height:1.5;
  word-break:break-word;white-space:pre-wrap;
}
.ai-msg.user{background:linear-gradient(135deg,#e53946,#ff6b6b);color:var(--white);border-bottom-right-radius:4px;}
.ai-msg.bot{background:var(--glass2);color:var(--gray8);border:1px solid var(--border);border-bottom-left-radius:4px;}
.ai-time{font-family:var(--font-mono);font-size:.55rem;color:var(--gray6);margin-top:.2rem;padding:0 .2rem;}
.ai-typing{display:flex;gap:4px;padding:.6rem .85rem;}
.ai-dot{
  width:6px;height:6px;border-radius:50%;background:var(--gray6);
  animation:dotBounce 1.4s infinite ease-in-out both;
}
.ai-dot:nth-child(2){animation-delay:.16s;}
.ai-dot:nth-child(3){animation-delay:.32s;}
@keyframes dotBounce{0%,80%,100%{transform:scale(0.5);opacity:.4}40%{transform:scale(1);opacity:1}}
#aiChatInputWrap{
  display:flex;gap:.5rem;padding:.75rem;border-top:1px solid var(--border);
  background:rgba(0,0,0,.3);flex-shrink:0;
}
#aiChatInput{
  flex:1;background:var(--glass);border:1px solid var(--border);border-radius:8px;
  padding:.5rem .75rem;color:var(--white);font-family:var(--font-body);font-size:.82rem;
  outline:none;transition:border-color .2s;
}
#aiChatInput:focus{border-color:var(--border2);}
#aiChatInput::placeholder{color:var(--gray6);}
#aiChatSend{
  width:36px;height:36px;border-radius:8px;border:none;
  background:linear-gradient(135deg,#e53946,#ff6b6b);color:var(--white);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;flex-shrink:0;
}
#aiChatSend:disabled{opacity:.4;cursor:not-allowed;}
#aiChatSend:not(:disabled):hover{transform:scale(1.05);}

/* Mobile AI Chat */
@media(max-width:640px){
  #aiChatWindow{width:calc(100vw - 3rem);bottom:64px;right:0;max-height:70vh;}
  #aiChatBtn{width:48px;height:48px;}
}

/* ═══════════════════════════════════════════════════════════════════
   NAV USER DROPDOWN
   ═══════════════════════════════════════════════════════════════════ */
.nav-user-avatar{
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15, 15, 15, 0.8);
  border: 2px solid transparent;
  background-clip: padding-box;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; position: relative; z-index: 10;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 0 10px rgba(255, 255, 255, 0.1);
}
.nav-user-avatar::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent 0%, rgba(251,191,36,0.8) 25%, transparent 50%, rgba(251,191,36,0.8) 75%, transparent 100%);
  animation: avatar-spin 4s linear infinite;
  opacity: 0.5;
  transition: opacity 0.4s ease;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
}
@keyframes avatar-spin {
  100% { transform: rotate(360deg); }
}
.nav-user-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nav-user-avatar span { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--white); z-index: 2; }
.nav-user-avatar:hover {
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 15px 25px rgba(0,0,0,0.6), 0 0 20px rgba(251,191,36,0.3);
  background: rgba(25, 25, 25, 0.9);
}
.nav-user-avatar:hover::before { opacity: 1; animation-duration: 2s; }
.nav-user-dropdown{
  position:absolute;top:calc(100% + .5rem);right:0;width:220px;
  background:var(--gray2);border:1px solid var(--border);border-radius:12px;
  padding:.5rem 0;display:none;box-shadow:0 8px 32px rgba(0,0,0,.6);z-index:200;
}
.nav-user-dropdown.open{display:block;animation:fadeUp .2s ease;}
.nav-user-dropdown-header{padding:.75rem 1rem;border-bottom:1px solid var(--border);}
.nav-user-dropdown-name{font-family:var(--font-display);font-size:.9rem;letter-spacing:.03em;}
.nav-user-dropdown-email{font-family:var(--font-mono);font-size:.6rem;color:var(--gray6);margin-top:.1rem;word-break:break-all;}
.nav-user-dropdown-link{
  display:flex;align-items:center;gap:.6rem;padding:.5rem 1rem;
  color:var(--gray7);text-decoration:none;font-size:.8rem;transition:all .15s;
}
.nav-user-dropdown-link:hover{background:rgba(255,255,255,.05);color:var(--white);}
.nav-user-dropdown-link svg{flex-shrink:0;opacity:.6;}
.nav-user-dropdown-divider{height:1px;background:var(--border);margin:.3rem 0;}
.nav-user-dropdown-logout{
  display:flex;align-items:center;gap:.6rem;width:100%;padding:.5rem 1rem;
  background:none;border:none;color:#ef4444;font-family:var(--font-body);font-size:.8rem;
  cursor:pointer;transition:all .15s;
}
.nav-user-dropdown-logout:hover{background:rgba(239,68,68,.1);}
.nav-auth-link{
  color:var(--gray7);text-decoration:none;font-size:.75rem;font-family:var(--font-mono);
  letter-spacing:.08em;text-transform:uppercase;transition:color .2s;
}
.nav-auth-link:hover{color:var(--white);}

/* ═══════════════════════════════════════════════════════════════════
   LOGOUT DIALOG
   ═══════════════════════════════════════════════════════════════════ */
.logout-dialog-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  display:none;align-items:center;justify-content:center;z-index:99999;
  opacity:0;transition:opacity .3s;
}
.logout-dialog-overlay.show{opacity:1;}
.logout-dialog{
  background:var(--gray2);border:1px solid var(--border);border-radius:16px;
  padding:2rem;max-width:360px;width:90%;text-align:center;
}
.logout-dialog h3{font-family:var(--font-display);font-size:1.4rem;letter-spacing:.05em;margin-bottom:.5rem;}
.logout-dialog p{color:var(--gray7);font-size:.85rem;margin-bottom:1.5rem;}
.logout-dialog-actions{display:flex;gap:.75rem;justify-content:center;}
.logout-btn-cancel{
  padding:.5rem 1.2rem;background:var(--glass);border:1px solid var(--border);
  color:var(--gray7);border-radius:8px;cursor:pointer;font-family:var(--font-body);
  font-size:.8rem;transition:all .2s;
}
.logout-btn-cancel:hover{background:var(--glass2);color:var(--white);}
.logout-btn-confirm{
  padding:.5rem 1.2rem;background:#ef4444;border:none;
  color:var(--white);border-radius:8px;cursor:pointer;font-family:var(--font-body);
  font-size:.8rem;font-weight:600;transition:all .2s;
}
.logout-btn-confirm:hover{background:#dc2626;}

/* ═══════════════════════════════════════════════════════════════════
   MODAL & DIALOG FIXES — Never exceed viewport
   ═══════════════════════════════════════════════════════════════════ */
.admin-modal-overlay,.admin-modal-overlay *{box-sizing:border-box;}
.admin-modal{max-height:90vh;overflow-y:auto;overscroll-behavior:contain;}
.admin-modal-actions{
  position:sticky;bottom:0;background:var(--gray2);
  padding:1rem;border-top:1px solid var(--border);
  display:flex;gap:.75rem;justify-content:flex-end;z-index:5;
}
@media(max-width:768px){
  .admin-modal{max-width:95vw!important;margin:1rem auto;max-height:85vh;}
  .nav-user-dropdown{right:0;width:200px;}
  a,button{min-height:44px;min-width:44px;}
}

.skeleton { animation: skeleton-loading 1.2s ease-in-out infinite alternate; background-color: var(--gray2); border-radius: 4px; } @keyframes skeleton-loading { 0% { opacity: 0.5; } 100% { opacity: 1; } }

/* ═══════════════════════════════════════════════════════════════════
   CUSTOM SVG ICON SIZING — Scale SVGs inside icon containers
   ═══════════════════════════════════════════════════════════════════ */

/* Video Editor service cards */
.ve-icon svg{width:1.8rem;height:1.8rem;}

/* Game platform cards */
.platform-icon svg{width:2.2rem;height:2.2rem;color:var(--gray8);}

/* Cyber security cards */
.shield-icon svg{width:1.5rem;height:1.5rem;color:var(--gray8);}

/* Contact items */
.contact-icon svg{width:1.2rem;height:1.2rem;color:var(--gray8);}

/* Stat number containers (infinity, etc.) */
.stat-num svg{width:2.8rem;height:2.8rem;}
.why-badge .num svg{width:2rem;height:2rem;}

/* Social links in footer */
.social-link svg{width:1.1rem;height:1.1rem;}

/* Hero eyebrow decorative stars */
.hero-eyebrow svg{width:0.7rem;height:0.7rem;vertical-align:baseline;color:var(--gray6);}

/* Button inline icons */
.btn-send svg{width:1em;height:1em;vertical-align:-0.1em;margin-left:0.3em;}


/* -------------------------------------------------------------------
   PREMIUM CART DRAWER
   ------------------------------------------------------------------- */
.cart-drawer-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  z-index: 99000; display: flex; justify-content: flex-end; opacity: 0; visibility: hidden;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}
.cart-drawer-overlay.show {
  opacity: 1; visibility: visible;
}
.cart-drawer {
  width: 100%; max-width: 480px; height: 100vh; background: var(--gray1);
  border-left: 1px solid var(--border); box-shadow: -10px 0 40px rgba(0,0,0,0.5);
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: auto;
}
.cart-drawer-overlay.show .cart-drawer {
  transform: translateX(0);
}
.cart-drawer-header {
  padding: 1.5rem; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  background: var(--bg);
}
.cart-drawer-title {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.05em; margin: 0; color: var(--white);
}
.cart-drawer-close {
  background: none; border: none; color: var(--gray5); font-size: 2rem; cursor: pointer;
  line-height: 1; transition: color 0.2s, transform 0.2s; padding: 0;
}
.cart-drawer-close:hover {
  color: var(--red); transform: scale(1.1);
}
.cart-drawer-body {
  flex: 1; overflow-y: auto; padding: 1.5rem; overscroll-behavior: contain;
}
.cart-drawer-actions {
  padding: 1.5rem; border-top: 1px solid var(--border); background: var(--bg);
  display: flex; flex-direction: column; gap: 1.5rem;
}
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-display); font-size: 1.4rem; color: var(--white);
}
.cart-btn-checkout {
  width: 100%; padding: 1.2rem; background: var(--red); color: var(--white);
  border: none; border-radius: 8px; font-family: var(--font-display); font-size: 1.1rem;
  letter-spacing: 0.05em; cursor: pointer; transition: background 0.3s, transform 0.2s;
  box-shadow: 0 4px 15px rgba(229, 9, 20, 0.3);
}
.cart-btn-checkout:hover {
  background: #c81e1e; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(229, 9, 20, 0.4);
}
.cart-btn-checkout:disabled {
  background: var(--gray3); color: var(--gray5); cursor: not-allowed; box-shadow: none; transform: none;
}
.cart-item {
  display: flex; gap: 1.2rem; margin-bottom: 1.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05); transition: opacity 0.3s;
}
.cart-item:last-child {
  border-bottom: none; margin-bottom: 0; padding-bottom: 0;
}
.cart-item-img {
  width: 80px; height: 80px; border-radius: 8px; background: var(--gray2);
  object-fit: cover; border: 1px solid var(--border);
}
.cart-item-info {
  flex: 1; display: flex; flex-direction: column; justify-content: space-between;
}
.cart-item-title {
  font-family: var(--font-body); font-size: 1rem; color: var(--white); margin: 0 0 0.4rem 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Review Stars ── */
@keyframes starPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.star-anim {
  animation: starPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.star-golden {
  color: #FFD700 !important;
  fill: #FFD700 !important;
  stroke: #FFD700 !important;
}
.cart-item-price {
  color: var(--accent); font-family: var(--font-display); font-size: 1.1rem;
}
.cart-item-controls {
  display: flex; align-items: center; justify-content: space-between; margin-top: 0.5rem;
}
.cart-qty-ctrl {
  display: flex; align-items: center; gap: 0.8rem; background: var(--gray2);
  padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid var(--border);
}
.cart-qty-btn {
  background: none; border: none; color: var(--white); font-size: 1.2rem;
  cursor: pointer; padding: 0 0.5rem; line-height: 1; display: flex; align-items: center;
}
.cart-qty-btn:hover { color: var(--red); }
.cart-qty-val {
  font-family: var(--font-mono); font-size: 0.9rem; min-width: 20px; text-align: center; color: var(--white);
}
.cart-del-btn {
  background: none; border: none; color: var(--gray5); cursor: pointer; transition: color 0.2s;
  display: flex; align-items: center; padding: 0.3rem;
}
.cart-del-btn:hover { color: var(--red); }

@media (max-width: 600px) {
  .cart-drawer {
    max-width: 100vw; border-left: none; border-top: 1px solid var(--border);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ULTRA PREMIUM OVERHAUL - PHASE 1
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Custom Ultra-Sleek Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray1); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 10px; border: 2px solid var(--gray1); }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); }

/* 2. Glassmorphism 2.0 Enhancements */
.glass-card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(40px); backdrop-filter: blur(40px);
  
}
.glass-card:hover {
  box-shadow: 0 20px 40px rgba(0,0,0,0.7), inset 0 0 0 1px rgba(255,255,255,0.15);
  transform: translateY(-5px) scale(1.02);
}

/* 3. Typography Glowing Accents */
.section-title, h1, h2, h3 {
  text-shadow: 0 0 20px rgba(255,255,255,0.1);
}
.hero-name {
  text-shadow: 0 0 40px rgba(255,255,255,0.2);
}

/* 4. Mobile Navigation & General Layout Fixes */
@media(max-width: 768px) {
  .nav-links {
    position: fixed; inset: 0; background: rgba(10, 10, 10, 0.95);
    -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); 
    flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.4s ease, backdrop-filter 0.4s ease;
  }
  .nav-links.active {
    opacity: 1; pointer-events: auto;
  }
  .nav-links li { transform: translateY(20px); opacity: 0; transition: all 0.4s ease; }
  .nav-links.active li { transform: translateY(0); opacity: 1; }
  .nav-links.active li:nth-child(1) { transition-delay: 0.1s; }
  .nav-links.active li:nth-child(2) { transition-delay: 0.15s; }
  .nav-links.active li:nth-child(3) { transition-delay: 0.2s; }
  .nav-links.active li:nth-child(4) { transition-delay: 0.25s; }
  .nav-links.active li:nth-child(5) { transition-delay: 0.3s; }
  
  .nav-links a { font-size: 1.5rem; letter-spacing: 0.15em; }
  .hamburger { display: flex !important; z-index: 1000; position: relative; }
  
  .section-inner { padding: 4rem 1.5rem; }
  .hero-content { padding: 1rem; }
}

/* ==========================================================================
   PREMIUM PRODUCT PAGE STYLES
   ========================================================================== */

/* Premium Purchase Card */
.premium-purchase-card {
  padding: 1.5rem;
  background: rgba(15, 15, 15, 0.6);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.premium-purchase-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  opacity: 0.5;
}

.premium-purchase-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(255,255,255,0.1);
}

/* Premium Buy Button */
.premium-buy-btn {
  background: linear-gradient(135deg, var(--primary) 0%, #b91c1c 100%);
  color: #fff;
  border: none;
  padding: 0.9rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.premium-buy-btn::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0));
  transform: rotate(30deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.premium-buy-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}

.premium-buy-btn:hover::after {
  opacity: 1;
}

/* Premium Trust Badges */
.premium-trust-badges {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(25, 25, 25, 0.5);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  justify-content: space-between;
}

@media (max-width: 600px) {
  .premium-trust-badges {
    flex-direction: column;
    gap: 1rem;
  }
}

.trust-badge-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.trust-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.trust-icon.verified {
  background: rgba(74, 222, 128, 0.1);
  color: #4ade80;
  box-shadow: 0 0 15px rgba(74, 222, 128, 0.2);
}

.trust-icon.secure {
  background: rgba(168, 85, 247, 0.1);
  color: #a855f7;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.2);
}

.trust-icon svg {
  width: 20px;
  height: 20px;
}

.trust-title {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.2rem;
  color: #fff;
}

.trust-desc {
  font-size: 0.75rem;
  color: var(--gray6);
  line-height: 1.3;
}

/* Premium Creator Card */
.premium-creator-card {
  margin-top: 2rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.02);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  transition: all 0.3s ease;
}

.premium-creator-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Skeleton Loaders for Products */
.skeleton-card {
  background: rgba(25, 25, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.skeleton-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
    transform: translateX(100%);
  }
}

.skeleton-thumb {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
}

.skeleton-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.skeleton-line {
  height: 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
}

.skeleton-line.short {
  width: 40%;
}
.skeleton-line.medium {
  width: 70%;
}

/* Skeleton Loaders for Product Detail */
.pd-skeleton-main {
  width: 100%;
  aspect-ratio: 16/10;
  border-radius: 12px;
  background: rgba(25, 25, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
}
.pd-skeleton-main::after,
.pd-skeleton-thumb::after,
.pd-skeleton-box::after {
  content: "";
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

.pd-skeleton-thumbs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.pd-skeleton-thumb {
  width: 60px;
  height: 60px;
  border-radius: 6px;
  background: rgba(25, 25, 25, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.pd-skeleton-box {
  background: rgba(25, 25, 25, 0.6);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.pd-skeleton-badge { width: 60px; height: 20px; margin-bottom: 0.5rem; }
.pd-skeleton-title { width: 80%; height: 2.2rem; margin-bottom: 0.5rem; border-radius: 6px; }
.pd-skeleton-category { width: 100px; height: 1rem; margin-bottom: 1rem; }
.pd-skeleton-rating { width: 150px; height: 1rem; margin-bottom: 1.5rem; }
.pd-skeleton-desc { width: 100%; height: 1rem; margin-bottom: 0.4rem; }
.pd-skeleton-desc.short { width: 70%; }
.pd-skeleton-price { width: 120px; height: 2rem; margin-bottom: 1rem; border-radius: 6px; }
.pd-skeleton-button { width: 100%; height: 3rem; margin-bottom: 1rem; border-radius: 8px; }

/* --- PREMIUM UI UPGRADES --- */
/* Enhanced Glassmorphism & Borders */
.premium-purchase-card, .premium-creator-card, .premium-trust-badges {
  background: rgba(15, 15, 15, 0.4);
  -webkit-backdrop-filter: blur(25px); backdrop-filter: blur(25px);
  
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.premium-purchase-card:hover, .premium-creator-card:hover {
  transform: translateY(-5px);
  background: rgba(20, 20, 20, 0.6);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Pulsing Buy Button */
@keyframes premiumPulse {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  70% { box-shadow: 0 0 0 15px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.premium-buy-btn {
  animation: premiumPulse 2s infinite;
}
.premium-buy-btn:hover {
  animation: none;
}

/* Enhanced Thumbnails */
.pd-thumb {
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.pd-thumb:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Dynamic Reveal Animations for elements that are loaded async */
.reveal.revealed, .reveal-left.revealed, .reveal-right.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) !important;
}

/* Typography refinements */
.pd-title {
  font-size: clamp(2rem, 4vw, 3rem); /* Responsive title */
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  line-height: 1.2;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
  .pd-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .pd-main-image {
    aspect-ratio: 1/1; /* Better on mobile */
  }
  .pd-actions {
    flex-direction: column;
  }
  .pd-buy-btn, .premium-buy-btn {
    width: 100%;
  }
  .pd-action-btn {
    width: 100%;
    height: 50px;
  }
  #pdCouponBlock {
    flex-direction: column;
  }
}



/* --- ULTRA PREMIUM UI UPGRADES (TEXT WRAP & MOTION) --- */

/* 1. Bulletproof Text Wrapping for Mobile */
.pd-title, .pd-description, .pd-category-label, .pd-meta {
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* 2. Cinematic Gradient Title */
.pd-title {
  font-size: clamp(1.8rem, 5vw, 3.5rem) !important;
  line-height: 1.1 !important;
  background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
  margin-bottom: 0.5rem !important;
}

/* 3. Cinematic Blur Reveals */
.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  filter: blur(10px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-40px) scale(0.98);
  filter: blur(10px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-right {
  opacity: 0;
  transform: translateX(40px) scale(0.98);
  filter: blur(10px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.reveal.visible, .reveal.revealed, 
.reveal-left.visible, .reveal-left.revealed, 
.reveal-right.visible, .reveal-right.revealed {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
  filter: blur(0) !important;
}

/* 4. Levitation Effect for Main Image */
@keyframes levitate {
  0% { transform: translateY(0); }
  50% { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,0.4); }
  100% { transform: translateY(0); }
}

.pd-main-image {
  animation: levitate 6s ease-in-out infinite;
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  transition: transform 0.3s ease;
}

/* 5. 3D Card Tilt for Purchase Card */
.premium-purchase-card {
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.6s ease, border-color 0.6s ease;
}

.premium-purchase-card:hover {
  transform: perspective(1000px) translateY(-5px) rotateX(2deg) rotateY(-2deg);
  box-shadow: -10px 30px 60px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.2);
  border-color: rgba(255, 255, 255, 0.25);
}

/* 6. Button Shimmer Effect */
@keyframes shimmerSweep {
  0% { left: -100%; }
  100% { left: 200%; }
}

.premium-buy-btn {
  position: relative;
  overflow: hidden;
}

.premium-buy-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-20deg);
  animation: shimmerSweep 3s infinite;
}



/* --- GLOBAL MOBILE FIXES --- */
html, body {
  overflow-x: hidden;
  width: 100%;
}

img, video, iframe {
  max-width: 100%;
}

.pd-description img, .pd-description video, .pd-description iframe {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .section-inner {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    width: 100%;
    box-sizing: border-box;
  }
  
  .pd-layout {
    width: 100%;
    padding: 0;
    margin: 0;
  }
}



/* ==========================================================================
   ULTRA-PREMIUM LIST VIEW REDESIGN (PRODUCTS SECTION)
   ========================================================================== */

/* 1. The Container: Single column, medium box width */
.product-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 2rem !important;
  max-width: 900px !important;
  margin: 0 auto !important;
}

/* 2. The Horizontal Card: Line by Line layout */
.product-card {
  display: grid !important;
  grid-template-columns: 320px 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 220px !important;
  padding: 0 !important; /* Remove internal padding if any so thumb can fill */
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  
  /* 3D Motion Initialization */
  transform: perspective(1000px) translateY(30px) rotateX(10deg) scale(0.95) !important;
  opacity: 0 !important;
  filter: blur(15px) !important;
  transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
              filter 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              box-shadow 0.5s ease, border-color 0.5s ease !important;
}

/* Entrance Animation Trigger */
.product-card.revealed {
  opacity: 1 !important;
  transform: perspective(1000px) translateY(0) rotateX(0deg) scale(1) !important;
  filter: blur(0) !important;
}

/* Ultra-Premium Hover Effects */
.product-card:hover {
  transform: perspective(1000px) translateY(-5px) rotateX(0deg) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05) !important;
  background: var(--glass) !important;
}

/* 3. Left Side: The Image Thumbnail */
.product-card .product-thumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-right: 1px solid var(--border) !important;
  border-bottom: none !important;
  position: relative !important;
  overflow: hidden !important;
}

.product-card .product-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Image Zoom on Hover */
.product-card:hover .product-thumb-img {
  transform: scale(1.08) !important;
}

/* Ensure badges position correctly inside the thumb */
.product-card .product-badge {
  position: absolute !important;
  top: 1rem !important;
  left: 1rem !important;
  z-index: 10 !important;
}

/* 4. Right Side: The Content Body */
.product-card .product-body {
  padding: 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.product-card .product-title {
  font-size: 1.8rem !important;
  margin: 0.5rem 0 1rem 0 !important;
  background: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  text-shadow: none !important;
}

.product-card .product-price-row {
  margin-top: auto !important; /* Push price to bottom */
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.product-card .product-price {
  font-size: 1.6rem !important;
}

/* 5. Mobile Stacking (Stack to vertical if screen is small) */
@media(max-width: 768px) {
  .product-grid {
    padding: 0 1rem !important;
  }
  
  .product-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  
  .product-card .product-thumb {
    aspect-ratio: 16/9 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }
  
  .product-card .product-body {
    padding: 1.5rem !important;
  }
  
  .product-card .product-title {
    font-size: 1.4rem !important;
  }
}



/* ==========================================================================
   ULTRA-PREMIUM LIST VIEW REDESIGN V2 (SMALL, READABLE, PREMIUM THUMBNAIL)
   ========================================================================== */

/* 1. The Container: Single column, smaller box width */
.product-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important; /* Tighter gap */
  max-width: 800px !important; /* Smaller max width */
  margin: 0 auto !important;
}

/* 2. The Horizontal Card: Small Box layout */
.product-card {
  display: grid !important;
  grid-template-columns: 220px 1fr !important; /* Smaller thumbnail column */
  gap: 0 !important;
  align-items: stretch !important;
  height: auto !important;
  min-height: 160px !important; /* Smaller height */
  padding: 0 !important; 
  background: var(--glass2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important; /* Slightly tighter radius */
  overflow: hidden !important;
  
  /* 3D Motion Initialization */
  transform: translateY(20px) scale(0.98) !important;
  opacity: 0 !important;
  filter: blur(10px) !important;
  transition: opacity 0.8s ease, 
              transform 0.8s ease, 
              filter 0.8s ease,
              box-shadow 0.4s ease, border-color 0.4s ease !important;
}

/* Entrance Animation Trigger */
.product-card.revealed {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  filter: blur(0) !important;
}

/* Ultra-Premium Hover Effects */
.product-card:hover {
  transform: translateY(-3px) scale(1.01) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  background: var(--glass) !important;
}

/* 3. Left Side: The Premium Thumbnail */
.product-card .product-thumb {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: auto !important;
  border-right: 1px solid rgba(255,255,255,0.05) !important;
  position: relative !important;
  overflow: hidden !important;
  background: #000 !important; /* Ensure no white flash */
}

.product-card .product-thumb-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  opacity: 0.9 !important; /* Slight dark tint for premium feel */
  transition: transform 0.6s ease, opacity 0.6s ease !important;
}

/* Image Zoom and Brighten on Hover */
.product-card:hover .product-thumb-img {
  transform: scale(1.1) !important;
  opacity: 1 !important; /* Brighten up */
}

/* Ensure badges position correctly inside the thumb */
.product-card .product-badge {
  position: absolute !important;
  top: 0.75rem !important;
  left: 0.75rem !important;
  z-index: 10 !important;
  backdrop-filter: blur(4px) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}

/* 4. Right Side: The Content Body (Highly Readable) */
.product-card .product-body {
  padding: 1.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.product-card .product-title {
  font-size: 1.4rem !important; /* Much more readable scale */
  line-height: 1.3 !important;
  margin: 0.3rem 0 0.8rem 0 !important;
  color: #ffffff !important; /* Solid white for maximum readability instead of gradient */
  text-shadow: 0 1px 3px rgba(0,0,0,0.8) !important; /* Crisp shadow */
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  background: none !important; /* Remove gradient */
  -webkit-text-fill-color: initial !important; /* Override gradient */
}

.product-card .product-category {
  font-size: 0.75rem !important;
  color: var(--gray5) !important;
  letter-spacing: 0.05em !important;
}

.product-card .product-price-row {
  margin-top: auto !important; /* Push price to bottom */
  padding-top: 1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.03) !important;
  display: flex !important;
  align-items: baseline !important;
}

.product-card .product-price {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}

/* 5. Mobile Stacking (Stack to vertical if screen is small) */
@media(max-width: 600px) {
  .product-grid {
    padding: 0 1rem !important;
    gap: 1rem !important;
  }
  
  .product-card {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  
  .product-card .product-thumb {
    aspect-ratio: 16/9 !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  }
  
  .product-card .product-body {
    padding: 1.2rem !important;
  }
  
  .product-card .product-title {
    font-size: 1.2rem !important;
  }
}