/* ============================================
   SCARLET CITY - TEBEX ULTRA THEME
   ============================================ */

:root {
  --bg: #050507;
  --bg2: #0a0a0c;
  --fg: #ededed;
  --fg-m: #a1a1aa;
  --fg-d: #71717a;
  --accent: #d80000;
  --accent-l: #ff2020;
  --accent-g: rgba(216,0,0,.15);
  --glass: rgba(255,255,255,.025);
  --glass-h: rgba(255,255,255,.055);
  --glass-b: rgba(255,255,255,.06);
  --glass-bh: rgba(255,255,255,.12);
  --r: 16px;
  --r-sm: 12px;
  --r-full: 9999px;
  --ease: .35s cubic-bezier(.4,0,.2,1);
}

/* === Reset === */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:rgba(216,0,0,.3) transparent}
html::-webkit-scrollbar{width:6px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{background:rgba(216,0,0,.3);border-radius:3px}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font-family:inherit}

/* === Custom Cursor === */
.cursor-glow{position:fixed;width:500px;height:500px;border-radius:50%;pointer-events:none;z-index:0;background:radial-gradient(circle,rgba(216,0,0,.06) 0%,transparent 70%);transform:translate(-50%,-50%);transition:opacity .4s ease;opacity:0}
.cursor-glow.active{opacity:1}
.cursor-dot{position:fixed;width:6px;height:6px;border-radius:50%;background:var(--accent-l);pointer-events:none;z-index:10001;transform:translate(-50%,-50%);transition:width .2s,height .2s,background .2s;mix-blend-mode:difference}
.cursor-dot.hovering{width:40px;height:40px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}

/* === Noise + Grid === */
body::after{content:'';position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.018;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)'/%3E%3C/svg%3E");background-size:256px 256px}
.grid-bg{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,#000 20%,transparent 100%)}

.page-wrapper{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column}
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
main{flex:1}

/* === NAVBAR (Premium style) === */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;background:rgba(5,5,7,.8);backdrop-filter:blur(20px) saturate(1.3);-webkit-backdrop-filter:blur(20px) saturate(1.3);border-bottom:1px solid rgba(255,255,255,.04);transition:all .4s ease}
.navbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,0,0,.08),transparent);pointer-events:none}
.navbar-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:72px;padding:0 24px;gap:16px}

/* Brand */
.navbar-brand{display:flex;align-items:center;gap:10px;transition:var(--ease);flex-shrink:0}
.navbar-brand:hover{opacity:.85}
.navbar-brand img{height:40px;width:40px;border-radius:10px;}
.navbar-brand-text{display:flex;flex-direction:column;line-height:1}
.navbar-brand-name{font-size:18px;font-weight:800;letter-spacing:-.4px;background:linear-gradient(135deg,#fff 40%,var(--accent-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.navbar-brand-sub{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.25em;color:var(--fg-d);margin-top:2px}

/* Nav Links */
.navbar-nav{display:flex;align-items:center;gap:2px;list-style:none}
.navbar-nav a{padding:8px 18px;font-size:16px;font-weight:500;color:var(--fg-m);border-radius:var(--r-full);transition:all .3s ease;position:relative}
.navbar-nav a::after{content:'';position:absolute;bottom:1px;left:50%;width:0;height:2px;background:var(--accent);border-radius:1px;transition:all .3s ease;transform:translateX(-50%);box-shadow:0 0 6px rgba(216,0,0,0)}
.navbar-nav a:hover{color:var(--fg);background:rgba(255,255,255,.04)}
.navbar-nav a:hover::after{width:20px;box-shadow:0 0 8px rgba(216,0,0,.3)}

/* Right Actions */
.navbar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.lang-toggle{display:flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 12px;border-radius:var(--r-full);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:var(--fg-m);font-size:11px;font-weight:700;cursor:pointer;transition:var(--ease);letter-spacing:.04em}
.lang-toggle:hover{background:rgba(255,255,255,.08);color:var(--fg);border-color:rgba(255,255,255,.12)}
.lang-toggle svg,.lang-toggle i{width:14px;height:14px;flex-shrink:0}
.nav-cart-btn{position:relative;display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-full);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:var(--fg-m);transition:var(--ease)}
.nav-cart-btn:hover{color:var(--fg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.nav-cart-btn svg{width:15px;height:15px}
.cart-badge{position:absolute;top:-3px;right:-3px;width:16px;height:16px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;box-shadow:0 0 8px rgba(216,0,0,.5)}

/* Auth Button in Navbar */
.nav-auth-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 20px;font-size:13px;font-weight:600;border-radius:var(--r-full);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:var(--fg-m);transition:all .3s ease;position:relative;overflow:hidden}
.nav-auth-btn svg{width:15px;height:15px}
.nav-auth-btn:hover{color:var(--fg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);transform:translateY(-1px)}
.nav-auth-btn--login{background:var(--accent);border-color:var(--accent);color:#fff}
.nav-auth-btn--login:hover{background:var(--accent-l);border-color:var(--accent-l);box-shadow:0 0 24px rgba(216,0,0,.35);color:#fff}
.nav-auth-btn--login::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent)}
.nav-auth-btn--login:hover::before{animation:btn-shine .6s ease forwards}

/* Mobile right (lang + hamburger) */
.navbar-mobile-right{display:none;align-items:center;gap:8px}
.lang-toggle--mobile{display:none}

/* Mobile Toggle */
.nav-toggle{display:none;flex-direction:column;gap:4px;width:36px;height:36px;align-items:center;justify-content:center;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-sm);cursor:pointer;padding:0;transition:all .3s ease;overflow:visible}
.nav-toggle:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.12)}
.nav-toggle span{display:block;width:16px;height:1.5px;background:var(--fg);border-radius:2px;transition:all .3s ease;transform-origin:center}
.nav-toggle.active span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:scaleX(0)}
.nav-toggle.active span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* Mobile Menu */
.mobile-menu{display:none;position:absolute;top:72px;left:0;right:0;background:rgba(5,5,7,.97);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.06);box-shadow:0 24px 48px rgba(0,0,0,.4);max-height:0;overflow:hidden;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.mobile-menu.open{max-height:500px}
.mobile-menu-inner{padding:16px 20px 20px}
.mobile-menu-nav{display:flex;flex-direction:column;gap:2px}
.mobile-menu-link{display:flex;align-items:center;gap:12px;padding:13px 16px;font-size:14px;font-weight:500;color:var(--fg-m);border-radius:var(--r-sm);transition:all .25s ease;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.04);margin-bottom:4px}
.mobile-menu-link:hover,.mobile-menu-link:active{color:var(--fg);background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.mobile-menu-link svg,.mobile-menu-link i{width:16px;height:16px;color:var(--accent-l);flex-shrink:0}
.mobile-menu-divider{height:1px;background:rgba(255,255,255,.06);margin:10px 0}
.mobile-menu-actions{display:flex;flex-direction:column;gap:2px}
.mobile-menu-login{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;font-size:14px;font-weight:600;color:#fff;background:linear-gradient(135deg,var(--accent),#b00000);border:1px solid rgba(255,255,255,.1);border-radius:var(--r-sm);cursor:pointer;font-family:inherit;transition:all .25s ease}
.mobile-menu-login:hover{background:linear-gradient(135deg,var(--accent-l),var(--accent))}
.mobile-menu-login svg,.mobile-menu-login i{width:16px;height:16px;flex-shrink:0}

@media(max-width:768px){
  .navbar-nav--desktop{display:none!important}
  .navbar-actions--desktop{display:none!important}
  .navbar-mobile-right{display:flex}
  .nav-toggle{display:flex}
  .lang-toggle--mobile{display:flex}
  .mobile-menu{display:block}
  .navbar-brand-text{display:none}
}

/* === GLASS CARD with Spotlight === */
.glass-card{background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:all .4s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;}
.glass-card .card-spotlight{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;pointer-events:none;border-radius:inherit;z-index:0}
.glass-card:hover .card-spotlight{opacity:1}
.glass-card:hover{border-color:var(--glass-bh);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.05)}
.glass-card>*{position:relative;z-index:1}

/* Gradient border on hover */
.glow-card{position:relative}
.glow-card::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--r) + 1px);background:conic-gradient(from var(--card-angle,0deg),transparent 60%,rgba(216,0,0,.2) 75%,transparent 90%);z-index:-1;opacity:0;transition:opacity .5s ease}
.glow-card:hover::before{opacity:1;animation:card-rotate 4s linear infinite}

/* === BUTTONS === */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 24px;font-size:13px;font-weight:600;border-radius:var(--r-full);border:none;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 0 0 rgba(216,0,0,0)}
.btn-primary:hover{background:var(--accent-l);box-shadow:0 0 32px rgba(216,0,0,.4),0 4px 16px rgba(216,0,0,.2);transform:translateY(-2px) scale(1.02)}
.btn-primary::before{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);transition:none}
.btn-primary:hover::before{animation:btn-shine .7s ease forwards}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--fg-m);border:1px solid var(--glass-b)}
.btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--fg);border-color:var(--glass-bh);transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2)}
.btn-sm{padding:7px 16px;font-size:12px}

/* Magnetic button wrapper */
.magnetic-wrap{display:inline-block;transition:transform .3s cubic-bezier(.4,0,.2,1)}

/* === SECTION === */
.section{position:relative;padding:72px 0}
.section--compact{padding:32px 0 72px}
.section-header{text-align:center;margin-bottom:44px}
.section-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.15em;color:var(--accent-l);background:rgba(216,0,0,.04);border:1px solid rgba(216,0,0,.08);padding:5px 14px;border-radius:var(--r-full);margin-bottom:14px}
.section-label svg{width:13px;height:13px}
.section-title{font-size:clamp(24px,3.5vw,40px);font-weight:800;letter-spacing:-1px;line-height:1.1;margin-bottom:10px}
.section-desc{font-size:14px;color:var(--fg-m);max-width:460px;margin:0 auto;line-height:1.7}
.section-glow{position:absolute;width:400px;height:400px;border-radius:50%;filter:blur(130px);opacity:.04;pointer-events:none}
.section-glow--left{left:-200px;top:40%;background:var(--accent);animation:drift-slow 30s ease-in-out infinite reverse}
.section-glow--right{right:-200px;top:30%;background:#8b5cf6;animation:drift 22s ease-in-out infinite}
.gradient-text{background:linear-gradient(135deg,#fff 0%,#ff2020 50%,#d80000 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* === HERO === */
.hero{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;min-height:100vh;padding:80px 20px 48px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}

/* Aurora Background */
.aurora{position:absolute;inset:0;overflow:hidden;filter:blur(80px)}
.aurora-band{position:absolute;width:200%;height:60%;opacity:.07;border-radius:50%;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.aurora-band--1{background:linear-gradient(90deg,transparent,var(--accent),var(--accent-l),transparent);top:-20%;left:-50%;animation:aurora-1 15s infinite}
.aurora-band--2{background:linear-gradient(90deg,transparent,rgba(139,92,246,.4),var(--accent),transparent);top:10%;left:-30%;animation:aurora-2 20s infinite;opacity:.04}
.aurora-band--3{background:linear-gradient(90deg,transparent,var(--accent-l),rgba(139,92,246,.3),transparent);bottom:-10%;left:-40%;animation:aurora-3 18s infinite;opacity:.03}

/* Mesh Gradient */
.hero-mesh{position:absolute;inset:0;background:radial-gradient(ellipse 50% 50% at 20% 60%,rgba(216,0,0,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 80% 30%,rgba(139,92,246,.06) 0%,transparent 60%),radial-gradient(ellipse 60% 40% at 50% 80%,rgba(6,182,212,.04) 0%,transparent 60%)}

/* Rings */
.hero-ring{position:absolute;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}
.hero-ring--1{width:650px;height:650px;border:1px solid rgba(255,255,255,.02);animation:spin-slow 80s linear infinite}
.hero-ring--2{width:450px;height:450px;border:1px solid rgba(255,255,255,.025);animation:spin-slow 100s linear infinite reverse}
.hero-ring--3{width:250px;height:250px;border:1px solid rgba(216,0,0,.04);animation:spin-slow 50s linear infinite;box-shadow:0 0 40px rgba(216,0,0,.02)}

/* Floating orbs */
.hero-orb{position:absolute;border-radius:50%}
.hero-orb--1{width:8px;height:8px;background:var(--accent);opacity:.3;top:20%;left:15%;animation:orb-float-1 8s ease-in-out infinite;box-shadow:0 0 12px rgba(216,0,0,.4)}
.hero-orb--2{width:5px;height:5px;background:var(--accent-l);opacity:.15;top:60%;right:20%;animation:orb-float-2 10s ease-in-out infinite;box-shadow:0 0 10px rgba(216,0,0,.3)}
.hero-orb--3{width:6px;height:6px;background:var(--accent);opacity:.12;bottom:25%;left:30%;animation:orb-float-3 12s ease-in-out infinite;box-shadow:0 0 10px rgba(216,0,0,.2)}
.hero-orb--4{width:4px;height:4px;background:var(--accent-l);opacity:.2;top:35%;right:10%;animation:orb-float-1 9s ease-in-out infinite reverse;box-shadow:0 0 8px rgba(255,32,32,.3)}
.hero-orb--5{width:7px;height:7px;background:#f59e0b;opacity:.15;bottom:35%;right:35%;animation:orb-float-2 11s ease-in-out infinite reverse;box-shadow:0 0 10px rgba(245,158,11,.3)}

/* Hero scan lines */
.hero-scanlines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,255,255,.008) 2px,rgba(255,255,255,.008) 4px);pointer-events:none;animation:scanline-move 8s linear infinite}

.hero-content{position:relative;z-index:1;max-width:860px;padding:0 16px;width:100%}
.hero-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 14px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--accent-l);background:rgba(216,0,0,.05);border:1px solid rgba(216,0,0,.1);border-radius:var(--r-full);margin-bottom:20px;animation:badge-glow 3s ease-in-out infinite}
.hero-badge svg{width:13px;height:13px}
.hero-title{font-size:clamp(40px,7.5vw,80px);font-weight:800;letter-spacing:-2.5px;line-height:1.1;margin-bottom:20px}

/* Glow effect on gradient text */
.hero-title .gradient-text{position:relative;display:inline-block;filter:drop-shadow(0 0 30px rgba(216,0,0,.2))}

.hero-subtitle{font-size:clamp(14px,3.5vw,17px);color:var(--fg-m);max-width:500px;margin:0 auto 32px;line-height:1.7;padding:0 8px}
.hero-buttons{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:40px}

/* Recent Payments */
.recent-payments{display:flex;flex-direction:column;align-items:center;gap:10px}
.recent-payments-label{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-d)}
.recent-payments-label svg{width:13px;height:13px;color:var(--accent-l)}
.payments-marquee{overflow:hidden;max-width:560px;width:100%;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.payments-inner{display:flex;gap:10px;width:max-content;animation:marquee 30s linear infinite}
.payments-inner:hover{animation-play-state:paused}
.payment-pill{display:flex;align-items:center;gap:5px;padding:5px 12px;background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.04);border-radius:var(--r-full);font-size:11px;color:var(--fg-m);white-space:nowrap;transition:var(--ease)}
.payment-pill:hover{background:rgba(255,255,255,.05);border-color:rgba(216,0,0,.1)}
.payment-user{font-weight:600;color:var(--fg)}
.payment-pkg{color:var(--accent-l);font-weight:600}

/* === VALUE STRIP === */
.section--tight{padding:48px 0}
.container-wide{max-width:1400px;margin:0 auto;padding:0 20px}
.value-strip{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.value-line{display:none}
.value-block{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;padding:32px 24px;border-radius:var(--r);cursor:default;transition:all .4s ease;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.05)}
.value-block:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1);transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.value-block:hover .value-icon{transform:scale(1.1);box-shadow:0 0 28px var(--icon-glow,rgba(216,0,0,.15))}
.value-block:hover .value-num{color:var(--accent-l)}
.value-block:hover .value-content h3{color:var(--accent-l)}
.value-num{font-size:28px;font-weight:800;color:#ffffff5b;letter-spacing:-1px;transition:var(--ease)}
.value-content{flex:1}
.value-content h3{font-size:16px;font-weight:700;margin-bottom:6px;letter-spacing:-.3px;transition:var(--ease)}
.value-content p{font-size:13px;color:var(--fg-m);line-height:1.65}
@media(max-width:768px){.value-strip{grid-template-columns:1fr;gap:12px}.value-block{flex-direction:row;text-align:left;padding:20px}}
.value-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:all .4s ease}
.value-icon svg{width:22px;height:22px}
.value-card:hover .value-icon{transform:scale(1.1) translateY(-2px)}
.value-icon--red{background:rgba(216,0,0,.06);border:1px solid rgba(216,0,0,.1);color:#ff2020}
.value-card:hover .value-icon--red{box-shadow:0 0 24px rgba(216,0,0,.15);background:rgba(216,0,0,.1)}
.value-icon--blue{background:rgba(59,130,246,.06);border:1px solid rgba(59,130,246,.1);color:#3b82f6}
.value-card:hover .value-icon--blue{box-shadow:0 0 24px rgba(59,130,246,.15);background:rgba(59,130,246,.1)}
.value-icon--emerald{background:rgba(16,185,129,.06);border:1px solid rgba(16,185,129,.1);color:#10b981}
.value-card:hover .value-icon--emerald{box-shadow:0 0 24px rgba(16,185,129,.15);background:rgba(16,185,129,.1)}
.value-icon--violet{background:rgba(139,92,246,.06);border:1px solid rgba(139,92,246,.1);color:#8b5cf6}
.value-card:hover .value-icon--violet{box-shadow:0 0 24px rgba(139,92,246,.15);background:rgba(139,92,246,.1)}
.value-icon--amber{background:rgba(245,158,11,.06);border:1px solid rgba(245,158,11,.1);color:#f59e0b}
.value-card:hover .value-icon--amber{box-shadow:0 0 24px rgba(245,158,11,.15);background:rgba(245,158,11,.1)}
.value-icon--pink{background:rgba(236,72,153,.06);border:1px solid rgba(236,72,153,.1);color:#ec4899}
.value-card:hover .value-icon--pink{box-shadow:0 0 24px rgba(236,72,153,.15);background:rgba(236,72,153,.1)}

/* === PRODUCT GRID === */
/* Styled to match the Features section: glass-card base, left accent stripe,
   subtle lift + border/background highlight on hover. Tech-handle styled as
   monospace pill for that developer-product aesthetic. */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:1024px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.product-grid{grid-template-columns:1fr}}

.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:14px;
  cursor:pointer;
  overflow:hidden;
  transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .35s ease,background .35s ease;
}
.product-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:rgba(216,0,0,.45);
  opacity:.5;
  transition:opacity .35s ease,width .35s ease;
  z-index:2;
}
.product-card:hover{
  transform:translateY(-3px);
  border-color:var(--glass-bh);
  background:rgba(255,255,255,0.025);
}
.product-card:hover::before{opacity:1;width:3px}

.product-img{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:10px;
  background:linear-gradient(180deg,#0d0d10 0%,#06060a 100%);
  margin-bottom:14px;
}
.product-img img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s ease;
  will-change:transform;
}
.product-card:hover .product-img img{transform:scale(1.05);filter:brightness(1.04)}
.product-img::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(5,5,7,.5) 100%);
  pointer-events:none;
}
.product-img-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--fg-d)}
.product-img-placeholder svg{width:36px;height:36px}

.product-body{
  display:flex;flex-direction:column;
  padding:2px 4px 2px;
}
.product-handle{
  font-family:inherit;
  font-size:15.5px;font-weight:700;
  letter-spacing:-.2px;
  color:var(--fg);
  background:transparent;
  border:0;
  padding:0;
  transition:color .35s ease;
}
.product-card:hover .product-handle{color:var(--accent-l)}
.product-name{
  font-size:13.5px;font-weight:500;
  letter-spacing:-.1px;line-height:1.35;
  color:var(--fg-m);
  margin:0;
  transition:color .35s ease;
}
.product-card:hover .product-name{color:var(--fg)}

.product-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;
  margin-top:14px;
  padding:12px 4px 2px;
  border-top:1px solid var(--glass-b);
}
.product-price{
  font-size:16px;font-weight:700;
  letter-spacing:-.3px;color:var(--fg);
  font-variant-numeric:tabular-nums;
}
.product-cta{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  border-radius:8px;
  background:rgba(216,0,0,.08);
  border:1px solid rgba(216,0,0,.18);
  color:var(--accent-l);
  font-size:12px;font-weight:600;
  letter-spacing:.01em;
  transition:background .35s ease,border-color .35s ease,color .35s ease,transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s ease;
}
.product-cta svg{width:12px;height:12px;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.product-card:hover .product-cta{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  box-shadow:0 6px 20px rgba(216,0,0,.28);
}
.product-card:hover .product-cta svg{transform:translateX(2px)}

/* === REVIEWS SLIDER === */
#reviews{overflow:hidden}
.reviews-slider{position:relative;overflow:clip;cursor:grab;padding-top:8px;padding-bottom:8px;margin-top:-8px;margin-bottom:-8px}
.reviews-slider.dragging{cursor:grabbing}
.reviews-slider.dragging .reviews-track{transition:none}
.reviews-track{display:flex;gap:16px;transition:transform .5s cubic-bezier(.25,.46,.45,.94);user-select:none;-webkit-user-select:none}
.review-card{padding:24px;display:flex;flex-direction:column;flex-shrink:0;cursor:default;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:var(--r);transition:border-color .3s,background .3s,box-shadow .3s}
.review-card:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.review-stars{display:flex;gap:3px;margin-bottom:16px}
.star-filled{width:14px;height:14px;color:#f59e0b;fill:#f59e0b}
.review-text{font-size:13px;color:var(--fg-m);line-height:1.7;flex:1;margin-bottom:16px;font-style:normal}
.review-text::before{content:'\201C';font-size:28px;font-weight:800;color:var(--accent);line-height:1;display:block;margin-bottom:4px}
.review-author{display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(255,255,255,.06)}
.review-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,rgba(216,0,0,.1),rgba(216,0,0,.04));border:1px solid rgba(216,0,0,.15);color:var(--accent-l);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--ease)}
.review-card:hover .review-avatar{box-shadow:0 0 16px rgba(216,0,0,.15);border-color:rgba(216,0,0,.25)}
.review-author strong{display:block;font-size:13px;font-weight:600;color:var(--fg)}
.review-author span{font-size:11px;color:var(--fg-d)}
.slider-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.slider-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--fg-m);cursor:pointer;transition:var(--ease)}
.slider-btn:hover{color:var(--fg);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);transform:scale(1.08)}
.slider-btn:active{transform:scale(.95)}
.slider-btn svg{width:16px;height:16px}
.slider-dots{display:flex;gap:6px}
.slider-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);border:none;cursor:pointer;transition:all .35s ease;padding:0}
.slider-dot:hover{background:var(--fg-d)}
.slider-dot.active{background:var(--accent);width:28px;border-radius:4px;box-shadow:0 0 10px rgba(216,0,0,.3)}

/* === STATS === */
.stats-row{display:flex;align-items:center;justify-content:center;gap:36px;margin-bottom:44px;flex-wrap:wrap}
.stat-item{text-align:center;transition:var(--ease)}
.stat-item:hover{transform:translateY(-2px)}
.stat-value{display:block;font-size:36px;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(135deg,#fff,var(--accent-l));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:var(--ease)}
.stat-item:hover .stat-value{filter:drop-shadow(0 0 12px rgba(216,0,0,.3))}
.stat-label{font-size:12px;color:var(--fg-d);font-weight:500}
.stat-divider{width:1px;height:44px;background:linear-gradient(to bottom,transparent,var(--glass-b),transparent)}
@media(max-width:600px){.stat-divider{display:none}.stats-row{gap:24px}}

/* === FEATURES GRID === */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:900px){.features-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.features-grid{grid-template-columns:1fr}}
.feature-card{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:22px 22px 22px 20px;
  cursor:default;
  transition:transform .35s cubic-bezier(.4,0,.2,1),border-color .35s ease,background .35s ease;
  overflow:hidden;
}
.feature-card::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:var(--feat-accent,rgba(255,255,255,0.04));
  opacity:.5;
  transition:opacity .35s ease,width .35s ease;
}
.feature-card:hover{
  transform:translateY(-2px);
  border-color:var(--glass-bh);
  background:rgba(255,255,255,0.025);
}
.feature-card:hover::before{opacity:1;width:3px}
.feature-card .value-icon{margin:0;flex-shrink:0;width:42px;height:42px;border-radius:12px}
.feature-card .value-icon svg{width:20px;height:20px}
.feature-card-content{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:2px}
.feature-card h4{font-size:15.5px;font-weight:700;margin:0;letter-spacing:-.2px;color:var(--fg);transition:var(--ease);line-height:1.25}
.feature-card:hover h4{color:var(--accent-l)}
.feature-card p{font-size:13px;color:var(--fg-m);line-height:1.55;margin:0}

/* Brand-consistent accent stripe (all cards use Scarlet red) */
.feature-card{--feat-accent:rgba(216,0,0,.45)}

/* === FAQ === */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:600px){.faq-grid{grid-template-columns:1fr}}
.faq-col{display:flex;flex-direction:column;gap:12px}
.faq-item{overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;background:none;border:none;color:var(--fg);font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:var(--ease)}
.faq-q:hover{color:var(--accent-l)}
.faq-q svg{width:16px;height:16px;color:var(--fg-d);flex-shrink:0;transition:all .3s ease}
.faq-item--open .faq-q{color:var(--accent-l)}
.faq-item--open .faq-q svg{transform:rotate(180deg);color:var(--accent-l)}
.faq-a{overflow:hidden;padding:0 20px;height:0;transition:height .3s ease}
.faq-a.measured{transition:height .3s ease}
.faq-a p{font-size:13px;color:var(--fg-m);line-height:1.7;text-align:left;padding-bottom:16px}

/* === HELP BOX === */
.help-box{position:relative;display:flex;align-items:center;gap:28px;padding:36px 44px;overflow:hidden;text-align:left}
.help-glow{position:absolute;width:500px;height:500px;border-radius:50%;filter:blur(140px);background:var(--accent);opacity:.035;top:-200px;right:-100px;pointer-events:none;animation:glow-pulse 6s ease-in-out infinite}
.help-icon{width:52px;height:52px;border-radius:14px;background:rgba(216,0,0,.06);border:1px solid rgba(216,0,0,.1);color:var(--accent-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--ease)}
.help-box:hover .help-icon{box-shadow:0 0 30px rgba(216,0,0,.15);transform:scale(1.05)}
.help-icon svg{width:24px;height:24px}
.help-box-text{flex:1;min-width:0}
.help-box h2{font-size:20px;font-weight:800;margin-bottom:4px;letter-spacing:-.4px}
.help-box p{font-size:13px;color:var(--fg-m);margin:0;line-height:1.6}
.help-box .btn{flex-shrink:0;white-space:nowrap}
@media(max-width:768px){.help-box{flex-direction:column;text-align:center;padding:28px 20px;gap:16px}}

/* === MINIMAL FOOTER === */
.footer-min{
  position:relative;
  z-index:5;
  background:linear-gradient(to bottom, rgba(5,5,7,0.65), rgba(5,5,7,0.92));
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-top:1px solid rgba(255,255,255,.07);
  padding:22px 0;
}

.footer-min-inner{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--fg-m);flex-wrap:wrap;gap:12px}
.footer-min-links{display:flex;gap:20px;flex-wrap:wrap}
.footer-min-links a{color:var(--fg-m);transition:var(--ease);font-size:12.5px}
.footer-min-links a:hover{color:var(--fg)}

/* === ALERTS === */
.alert{padding:14px 18px;border-radius:var(--r-sm);font-size:13px;margin-bottom:20px}
.alert-success{background:rgba(16,185,129,.05);border:1px solid rgba(16,185,129,.1);color:#6ee7b7}
.alert-error{background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.1);color:#fca5a5}
.alert-info{background:rgba(59,130,246,.05);border:1px solid rgba(59,130,246,.1);color:#93c5fd}

/* === SUBPAGES === */
.page-section{padding:140px 0 64px}
.page-title{font-size:clamp(24px,3.5vw,36px);font-weight:800;letter-spacing:-1px;margin-bottom:8px}
.breadcrumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--fg-d);margin-bottom:24px;flex-wrap:wrap}
.breadcrumbs a{color:var(--fg-m);transition:var(--ease)}
.breadcrumbs a:hover{color:var(--accent-l)}
.breadcrumbs .sep{opacity:.4}
.breadcrumbs .current{color:var(--fg);font-weight:500}

/* ====== CATEGORY PAGE ====== */

/* BG - Aurora + Orbs + Pulses + Streaks */
.cat-bg{position:fixed;inset:0 0 50px 0;z-index:0;pointer-events:none;overflow:hidden}
.cat-aurora{position:absolute;inset:0;filter:blur(90px);overflow:hidden}
.cat-aurora-band{position:absolute;width:220%;height:50%;opacity:.06;border-radius:50%}
.cat-aurora-band--1{background:linear-gradient(90deg,transparent,var(--accent),var(--accent-l),transparent);top:-15%;left:-60%;animation:cat-aurora-a 18s ease-in-out infinite}
.cat-aurora-band--2{background:linear-gradient(90deg,transparent,var(--accent-l),var(--accent),transparent);bottom:-10%;left:-40%;animation:cat-aurora-b 22s ease-in-out infinite}
@keyframes cat-aurora-a{0%,100%{transform:translateX(-8%) rotate(-4deg)}50%{transform:translateX(8%) rotate(4deg)}}
@keyframes cat-aurora-b{0%,100%{transform:translateX(6%) rotate(3deg)}50%{transform:translateX(-10%) rotate(-3deg)}}

.cat-orb{position:absolute;border-radius:50%;filter:blur(100px)}
.cat-orb--1{width:450px;height:450px;background:var(--accent);opacity:.06;top:-8%;right:-4%;animation:drift 22s ease-in-out infinite}
.cat-orb--2{width:350px;height:350px;background:var(--accent-l);opacity:.05;bottom:5%;left:-6%;animation:drift-slow 28s ease-in-out infinite reverse}
.cat-orb--3{width:280px;height:280px;background:var(--accent-l);opacity:.035;top:45%;left:55%;animation:drift 18s ease-in-out infinite reverse}
.cat-orb--4{width:200px;height:200px;background:var(--accent);opacity:.03;top:20%;left:20%;animation:drift-slow 24s ease-in-out infinite}

.cat-pulse{position:absolute;border-radius:50%;border:1px solid rgba(216,0,0,.04)}
.cat-pulse--1{width:600px;height:600px;top:10%;right:-15%;animation:cat-pulse-anim 6s ease-in-out infinite}
.cat-pulse--2{width:400px;height:400px;bottom:15%;left:-10%;animation:cat-pulse-anim 8s ease-in-out infinite 2s}
@keyframes cat-pulse-anim{0%,100%{transform:scale(1);opacity:.04}50%{transform:scale(1.15);opacity:0}}

.cat-streak{position:absolute;height:1px;width:250%;opacity:.05}
.cat-streak--1{background:linear-gradient(90deg,transparent,var(--accent) 30%,var(--accent-l) 50%,transparent 70%);top:25%;left:-80%;transform:rotate(-4deg);animation:cat-streak-m 14s ease-in-out infinite}
.cat-streak--2{background:linear-gradient(90deg,transparent,var(--accent-l) 35%,var(--accent) 55%,transparent 75%);top:60%;left:-70%;transform:rotate(3deg);animation:cat-streak-m 18s ease-in-out infinite reverse}
.cat-streak--3{background:linear-gradient(90deg,transparent,var(--accent) 40%,var(--accent-l) 60%,transparent);top:80%;left:-60%;transform:rotate(-2deg);animation:cat-streak-m 16s ease-in-out infinite 4s}
@keyframes cat-streak-m{0%,100%{transform:rotate(-4deg) translateX(-6%)}50%{transform:rotate(-4deg) translateX(6%)}}

/* Page */
.cat-page{position:relative;z-index:1;padding:130px 0 48px}

/* Hero Title */
.cat-hero{text-align:center;margin-bottom:36px}
.cat-title{font-size:clamp(38px,5.5vw,60px);font-weight:800;letter-spacing:-2px;line-height:1.5;margin-bottom:10px;color:var(--fg);text-shadow:0 0 50px rgba(216,0,0,.3),0 0 100px rgba(216,0,0,.12),0 2px 4px rgba(0,0,0,.5);position:relative;display:inline-block}
.cat-title::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:60px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent-l));border-radius:2px;box-shadow:0 0 16px rgba(216,0,0,.3)}
.cat-subtitle{font-size:15px;color:var(--fg-m);max-width:480px;margin:16px auto 0;line-height:1.7}

/* Controls */
.cat-controls{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.cat-search{position:relative;width:100%;max-width:400px}
.cat-search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--fg-d);pointer-events:none;transition:color .3s ease}
.cat-search input{width:100%;padding:10px 16px 10px 42px;font-size:13px;font-family:inherit;background:rgba(255,255,255,.025);border:1px solid var(--glass-b);border-radius:var(--r-full);color:var(--fg);outline:none;transition:all .35s ease}
.cat-search input:focus{border-color:rgba(216,0,0,.3);box-shadow:0 0 0 4px rgba(216,0,0,.06),0 0 30px rgba(216,0,0,.05)}
.cat-search:focus-within .cat-search-icon{color:var(--accent-l)}
.cat-search input::placeholder{color:var(--fg-d)}
@media(max-width:768px){.cat-search{max-width:100%}}

/* Grid */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
@media(max-width:640px){.cat-grid{grid-template-columns:1fr;gap:24px}}

/* Card */
.cat-card{position:relative;display:flex;flex-direction:column;background:var(--bg);border:1px solid rgba(255,255,255,.06);border-radius:var(--r);overflow:hidden;transition:all .45s cubic-bezier(.4,0,.2,1)}
.cat-card-glow{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none;z-index:0;border-radius:inherit;background:radial-gradient(circle at 50% 0%,rgba(216,0,0,.06) 0%,transparent 60%)}
.cat-card:hover{transform:translateY(-8px);border-color:rgba(216,0,0,.15);box-shadow:0 28px 60px rgba(0,0,0,.45),0 0 50px rgba(216,0,0,.06)}
.cat-card:hover .cat-card-glow{opacity:1}

/* Image */
.cat-card-img{display:block;position:relative;aspect-ratio:2/1.18;overflow:hidden;background:#080808;border-bottom:1px solid rgba(255,255,255,.04)}
.cat-card-img img{width:100%;height:100%;object-fit:contain;padding:12px;transition:transform .5s cubic-bezier(.4,0,.2,1)}
.cat-card:hover .cat-card-img img{transform:scale(1.04)}
.cat-card-ph{display:flex;align-items:center;justify-content:center;height:100%;color:var(--fg-d)}
.cat-card-ph svg{width:32px;height:32px}
.cat-card-shine{position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.05) 46%,rgba(255,255,255,.05) 54%,transparent 60%);transform:translateX(-110%);pointer-events:none}
.cat-card:hover .cat-card-shine{animation:img-shine .7s ease forwards}
@keyframes img-shine{to{transform:translateX(110%)}}

/* Body */
.cat-card-body{position:relative;z-index:1;padding:18px 22px 22px;display:flex;flex-direction:column;gap:12px;flex:1;background:var(--bg)}

/* Name + Price row */
.cat-card-header{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Name */
.cat-card-name{font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--fg);transition:all .3s ease;line-height:1.3;flex:1}
.cat-card-name:hover{color:var(--accent-l);text-shadow:0 0 24px rgba(216,0,0,.2)}

/* Price */
.cat-card-price-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}
.cat-price{font-size:13px;font-weight:800;letter-spacing:-.4px;color:#66ff00;padding:3px 13px;background:rgba(70,255,0,.07);border:1px solid rgba(92,255,0,.12);border-radius:var(--r-full);display:inline-flex;align-items:center;gap:6px;box-shadow:0 0 12px rgba(34,197,94,.06)}
.cat-price--new{color:#fff;background:linear-gradient(135deg,var(--accent),#b00000);border-color:rgba(255,255,255,.1);box-shadow:0 0 16px rgba(216,0,0,.35);animation:sale-pulse 2s ease-in-out infinite}
@keyframes sale-pulse{0%,100%{box-shadow:0 0 16px rgba(216,0,0,.35)}50%{box-shadow:0 0 24px rgba(216,0,0,.55)}}
.cat-price--old{font-size:12px;font-weight:500;color:var(--fg-d);text-decoration:line-through;text-decoration-color:var(--accent);background:none;border:none;padding:0;box-shadow:none;opacity:.6}
.cat-card-sale-badge{position:absolute;top:10px;right:10px;z-index:2;font-size:11px;font-weight:800;color:#fff;background:var(--accent);padding:4px 10px;border-radius:var(--r-full);letter-spacing:.3px;box-shadow:0 4px 16px rgba(216,0,0,.4)}

/* Tags */
.cat-card-tags{display:flex;gap:4px;justify-content:space-between;}
.fw-tag{display:flex;align-items:center;gap:4px;padding:2px 7px;font-size:13px;font-weight:600;border-radius:var(--r-full);letter-spacing:.02em;flex:0 0 calc(33.333% - 4px);justify-content:center}
.fw-tag svg{width:10px;height:10px}
.fw-tag--on{color:#22c55e;background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.1)}
.fw-tag--off{color:#ef4444;background:rgba(239,68,68,.05);border:1px solid rgba(239,68,68,.1)}

/* Actions */
.cat-card-actions{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:8px}
.cat-action-btn{flex:1;padding:10px 18px;font-size:13px}
.cat-action-btn svg{width:14px;height:14px}
.cat-cart-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--r-sm);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);color:var(--fg);transition:all .3s ease;flex-shrink:0}
.cat-cart-btn svg{width:16px;height:16px}
.cat-cart-btn:hover{color:#22c55e;background:rgba(34,197,94,.06);border-color:rgba(34,197,94,.15);box-shadow:0 0 20px rgba(34,197,94,.1);transform:scale(1.08)}

/* FAQ on category */
.cat-faq{margin-top:72px;padding-top:48px;border-top:1px solid var(--glass-b)}

/* === Package Detail Layout === */
.pkg-layout{display:grid;grid-template-columns:380px 1fr;gap:40px;align-items:start}
@media(max-width:900px){.pkg-layout{grid-template-columns:1fr;gap:24px}}
.pkg-left{display:flex;flex-direction:column;gap:16px}
.cat-card--detail{pointer-events:auto}
.cat-card--detail .cat-card-img{cursor:default}
.cat-card--detail .cat-card-body{padding:16px 20px 20px}

/* Showcase Video */
.pkg-showcase{margin-top:8px}
.pkg-video-wrap{position:relative;width:100%;padding-bottom:56.25%;border-radius:var(--r);overflow:hidden;background:#0a0a0a;border:1px solid rgba(255,255,255,.06)}
.pkg-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

/* Description Card */
.pkg-desc-card{padding:28px;position:sticky;top:100px}
.pkg-desc-content{font-size:17px;color:var(--fg-m);line-height:1.8}
.pkg-desc-content p{margin-bottom:12px}
.pkg-desc-content strong{color:var(--fg);font-weight:700}
.pkg-desc-content em{color:var(--fg-m);font-style:italic}
.pkg-desc-content h1,.pkg-desc-content h2,.pkg-desc-content h3,.pkg-desc-content h4{color:var(--fg);font-weight:700;margin:24px 0 8px;letter-spacing:-.3px}
.pkg-desc-content h1{font-size:28px}.pkg-desc-content h2{font-size:24px}.pkg-desc-content h3{font-size:21px}.pkg-desc-content h4{font-size:19px}
.pkg-desc-content ul+h3,.pkg-desc-content ul+h4,.pkg-desc-content ol+h3,.pkg-desc-content ol+h4,.pkg-desc-content p+h3,.pkg-desc-content p+h4{margin-top:24px}
.pkg-desc-content h3+h4{margin-top:12px}
.pkg-desc-content ul,.pkg-desc-content ol{margin:8px 0 0 20px;color:var(--fg-m)}
.pkg-desc-content ul{list-style:none;padding:0;margin-left:0}
.pkg-desc-content ul li{position:relative;padding-left:18px;margin-bottom:6px}
.pkg-desc-content ul li::before{content:'';position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent-l)}
.pkg-desc-content ol li{margin-bottom:6px}
.pkg-desc-content a{color:var(--accent-l);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.pkg-desc-content a:hover{color:#fff}
.pkg-desc-content hr{border:none;height:1px;background:rgba(255,255,255,.06);margin:20px 0}
.pkg-desc-content blockquote{border-left:3px solid var(--accent);padding:8px 16px;margin:12px 0;background:rgba(216,0,0,.04);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--fg-m);font-style:italic}
.pkg-desc-content code{font-size:12px;background:rgba(255,255,255,.06);padding:2px 6px;border-radius:4px;color:var(--accent-l)}
.pkg-desc-content pre{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:var(--r-sm);padding:14px;margin:12px 0;overflow-x:auto}
.pkg-desc-content pre code{background:none;padding:0}
.pkg-desc-content img{max-width:100%;border-radius:var(--r-sm);margin:12px 0}
.pkg-desc-content table{width:100%;border-collapse:collapse;margin:12px 0;font-size:13px}
.pkg-desc-content th,.pkg-desc-content td{padding:8px 12px;border:1px solid rgba(255,255,255,.06);text-align:left}
.pkg-desc-content th{background:rgba(255,255,255,.04);color:var(--fg);font-weight:600}

.form-group{margin-bottom:14px}
.form-label{display:block;font-size:12px;font-weight:500;color:var(--fg-m);margin-bottom:5px}
.form-input,.form-select{width:100%;padding:10px 14px;font-size:13px;font-family:inherit;color:var(--fg);background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-sm);outline:none;transition:var(--ease)}
.form-input:focus,.form-select:focus{border-color:rgba(216,0,0,.2);box-shadow:0 0 0 3px rgba(216,0,0,.05)}
.form-input::placeholder{color:var(--fg-d)}

.qty-wrap{display:flex;align-items:center;margin-bottom:20px}
.qty-wrap button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--glass);border:1px solid var(--glass-b);color:var(--fg);font-size:16px;cursor:pointer;transition:var(--ease)}
.qty-wrap button:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.qty-wrap button:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.qty-wrap button:hover{background:var(--glass-h)}
.qty-wrap input{width:52px;height:40px;text-align:center;background:var(--glass);border:1px solid var(--glass-b);border-left:none;border-right:none;color:var(--fg);font-size:14px;font-weight:600;outline:none}

.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
@media(max-width:900px){.checkout-grid{grid-template-columns:1fr;gap:24px}}
.order-summary{position:sticky;top:80px;padding:24px}
.order-summary h3{font-size:16px;font-weight:600;margin-bottom:16px}
.oi-img{width: 150px;border-radius:var(--r-sm);overflow:hidden;background:#0a0a0a;flex-shrink:0}
.oi-img img{width:100%;height:100%;object-fit:cover}
.order-item{display:flex;align-items:center;gap:12px;padding:8px 0}
.order-item+.order-item{border-top:1px solid var(--glass-b)}
.order-item:last-of-type{padding-bottom:0}
.order-item .oi-info{flex:1}
.order-item .oi-name{font-size:13px;font-weight:600}
.order-item .oi-qty{font-size:11px;color:var(--fg-d)}
.order-item .oi-price{font-size:14px;font-weight:600;white-space:nowrap}
.order-items-list{display:flex;flex-direction:column;gap:0}
.order-row{display:flex;justify-content:space-between;align-items:baseline;padding:6px 0;font-size:13px}
.order-row-name{color:var(--fg-m);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px;text-align:left}
.order-row-price{font-weight:600;color:var(--fg);white-space:nowrap}
.order-divider{height:1px;background:var(--glass-b);margin:8px 0}
.order-total{display:flex;justify-content:space-between;align-items:center}
.order-total .ot-label{font-size:14px;color:var(--fg-m)}
.order-total .ot-value{font-size:22px;font-weight:800;letter-spacing:-.5px}

.empty-state{text-align:center;padding:64px 20px}
.empty-state svg{width:48px;height:48px;color:var(--fg-d);margin-bottom:16px}
.empty-state h3{font-size:18px;font-weight:600;margin-bottom:6px}
.empty-state p{font-size:13px;color:var(--fg-d);margin-bottom:20px}

.search-bar{position:relative;margin-bottom:24px}
.search-bar input{width:100%;padding:12px 16px 12px 42px;font-size:13px;font-family:inherit;background:var(--glass);border:1px solid var(--glass-b);border-radius:var(--r-full);color:var(--fg);outline:none;transition:var(--ease)}
.search-bar input:focus{border-color:rgba(216,0,0,.2);box-shadow:0 0 0 3px rgba(216,0,0,.05)}
.search-bar input::placeholder{color:var(--fg-d)}
.search-bar .si{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--fg-d);pointer-events:none}
.search-bar .si svg{width:16px;height:16px}

.pagination{display:flex;align-items:center;justify-content:center;gap:4px;margin-top:40px}
.pagination a,.pagination span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 10px;font-size:13px;font-weight:500;border-radius:var(--r-sm);color:var(--fg-m);transition:var(--ease)}
.pagination a:hover{color:var(--fg);background:var(--glass)}
.pagination .active{color:#fff;background:var(--accent)}

.tebex-footer-wrapper {
  z-index: 100;
}
/* === ANIMATIONS === */
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(200%)}}
@keyframes btn-shine{0%{left:-100%}100%{left:200%}}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-20px) scale(1.05)}50%{transform:translate(-20px,20px) scale(.95)}75%{transform:translate(20px,10px) scale(1.02)}}
@keyframes drift-slow{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-25px,15px) scale(1.03)}66%{transform:translate(15px,-25px) scale(.97)}}
@keyframes spin-slow{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes glow-pulse{0%,100%{opacity:.025}50%{opacity:.06}}
@keyframes fade-in-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes card-rotate{0%{--card-angle:0deg}100%{--card-angle:360deg}}
@keyframes badge-glow{0%,100%{box-shadow:0 0 0 rgba(216,0,0,0)}50%{box-shadow:0 0 20px rgba(216,0,0,.08)}}
@keyframes underline-shimmer{0%,100%{transform:scaleX(1);opacity:.6}50%{transform:scaleX(.6);opacity:1}}
@keyframes scanline-move{0%{transform:translateY(0)}100%{transform:translateY(4px)}}
@keyframes float-particle{0%,100%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.6}90%{opacity:.6}100%{transform:translateY(-100vh) translateX(40px);opacity:0}}
@keyframes aurora-1{0%,100%{transform:translateX(-10%) rotate(-5deg)}50%{transform:translateX(10%) rotate(5deg)}}
@keyframes aurora-2{0%,100%{transform:translateX(5%) rotate(3deg)}50%{transform:translateX(-15%) rotate(-3deg)}}
@keyframes aurora-3{0%,100%{transform:translateX(-5%) rotate(2deg)}50%{transform:translateX(10%) rotate(-4deg)}}
@keyframes orb-float-1{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,-30px)}}
@keyframes orb-float-2{0%,100%{transform:translate(0,0)}50%{transform:translate(-25px,20px)}}
@keyframes orb-float-3{0%,100%{transform:translate(0,0)}50%{transform:translate(15px,25px)}}

.animate-in{animation:fade-in-up .6s cubic-bezier(.4,0,.2,1) forwards}
.animate-on-scroll{opacity:0}

@media(max-width:768px){
  .hero-ring--1{width:400px;height:400px}
  .hero-ring--2{width:280px;height:280px}
  .hero-ring--3{width:160px;height:160px}
}

/* Hide cursor on touch */
@media(hover:none){.cursor-glow,.cursor-dot{display:none!important}}

/* ====== RECOLOR SECTION (INDEX) — v3 ====== */
.recolor-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 36px;
  padding: 32px;
  align-items: stretch;
  overflow: hidden;
}
.recolor-card-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(216, 0, 0, 0.18), transparent 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

/* Image showcase with auto-cycling layers */
.recolor-showcase {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 18px;
  overflow: hidden;
  background: #0a0a0d;
  border: 1px solid rgba(255, 255, 255, 0.06);
  z-index: 1;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}
.recolor-showcase-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: recolor-cycle 14s ease-in-out infinite;
}
.recolor-showcase-layer:nth-child(1) { animation-delay: 0s; }      /* red */
.recolor-showcase-layer:nth-child(2) { animation-delay: 3.5s; }    /* blue */
.recolor-showcase-layer:nth-child(3) { animation-delay: 7s; }      /* green */
.recolor-showcase-layer:nth-child(4) { animation-delay: 10.5s; }   /* violet */

@keyframes recolor-cycle {
  0%   { opacity: 0; }
  3%   { opacity: 1; }
  21%  { opacity: 1; }
  25%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Color dot indicators below the image */
.recolor-dots {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 2;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.recolor-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  opacity: 0.35;
  animation: recolor-dot 14s ease-in-out infinite;
}
.recolor-dot:nth-child(1) { background: #d80000; animation-delay: 0s; }
.recolor-dot:nth-child(2) { background: #3b82f6; animation-delay: 3.5s; }
.recolor-dot:nth-child(3) { background: #10b981; animation-delay: 7s; }
.recolor-dot:nth-child(4) { background: #8b5cf6; animation-delay: 10.5s; }

@keyframes recolor-dot {
  0%   { opacity: 0.35; transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  3%   { opacity: 1;    transform: scale(1.4); box-shadow: 0 0 12px currentColor; }
  21%  { opacity: 1;    transform: scale(1.4); box-shadow: 0 0 12px currentColor; }
  25%  { opacity: 0.35; transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
  100% { opacity: 0.35; transform: scale(1); box-shadow: 0 0 0 rgba(0,0,0,0); }
}

/* Right column: live indicator + steps + CTA + trust */
.recolor-side {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* === Live color indicator (cycles synchronously with image) === */
.recolor-live-stage {
  position: relative;
  height: 84px;
}
.recolor-live-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, var(--c-soft), rgba(255,255,255,0.015) 60%),
    rgba(255,255,255,0.02);
  border: 1px solid var(--c-strong);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 18px 48px -16px var(--c-soft);
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  animation: recolor-live-cycle 14s ease-in-out infinite;
}
.recolor-live-item:nth-child(1) { animation-delay: 0s; }
.recolor-live-item:nth-child(2) { animation-delay: 3.5s; }
.recolor-live-item:nth-child(3) { animation-delay: 7s; }
.recolor-live-item:nth-child(4) { animation-delay: 10.5s; }

@keyframes recolor-live-cycle {
  0%   { opacity: 0; transform: translateY(8px) scale(0.985); }
  3%   { opacity: 1; transform: translateY(0)  scale(1); }
  21%  { opacity: 1; transform: translateY(0)  scale(1); }
  25%  { opacity: 0; transform: translateY(-8px) scale(0.985); }
  100% { opacity: 0; transform: translateY(-8px) scale(0.985); }
}

.recolor-live-swatch {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--c);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 0 1px rgba(0,0,0,0.25),
    0 8px 24px -4px var(--c),
    0 0 32px -8px var(--c);
  flex-shrink: 0;
  overflow: hidden;
}
.recolor-live-swatch::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.recolor-live-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.recolor-live-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
  letter-spacing: -0.005em;
}
.recolor-live-hex {
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fg-d);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* === Steps === */
.recolor-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.recolor-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.recolor-step-num {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(216, 0, 0, 0.18), rgba(216, 0, 0, 0.06));
  color: var(--accent-l);
  font-weight: 700;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(216, 0, 0, 0.25);
  box-shadow: 0 4px 12px rgba(216, 0, 0, 0.10);
}
.recolor-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.recolor-step-title {
  font-size: 15px;
  color: var(--fg);
  font-weight: 600;
  line-height: 1.3;
}
.recolor-step-desc {
  font-size: 13px;
  color: var(--fg-d);
  line-height: 1.4;
}

/* === CTA === */
.recolor-cta {
  align-self: flex-start;
  margin-top: 4px;
}

/* === Trust line === */
.recolor-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--fg-d);
}
.recolor-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.recolor-trust-item i {
  width: 13px;
  height: 13px;
  color: #22c55e;
}
.recolor-trust-sep {
  opacity: 0.35;
}

@media (prefers-reduced-motion: reduce) {
  .recolor-showcase-layer,
  .recolor-dot,
  .recolor-live-item {
    animation: none;
  }
  .recolor-showcase-layer:first-child { opacity: 1; }
  .recolor-dot:first-child { opacity: 1; transform: scale(1.4); box-shadow: 0 0 12px currentColor; }
  .recolor-live-item:first-child { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 768px) {
  .recolor-card {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
  .recolor-live-stage {
    height: 76px;
  }
  .recolor-live-item {
    padding: 14px 16px;
    gap: 14px;
  }
  .recolor-live-swatch {
    width: 40px;
    height: 40px;
  }
  .recolor-live-name {
    font-size: 16px;
  }
}

/* ====== RECOLOR PACKAGE CARD (PACKAGE PAGE SIDEBAR) ====== */
.recolor-pkg-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.recolor-pkg-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(139, 92, 246, 0.08), transparent 60%);
  pointer-events: none;
}
.recolor-pkg-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.05));
  border: 1px solid rgba(139, 92, 246, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(196, 181, 253);
  position: relative;
  z-index: 1;
}
.recolor-pkg-icon i {
  width: 18px;
  height: 18px;
}
.recolor-pkg-text {
  position: relative;
  z-index: 1;
}
.recolor-pkg-text h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  margin: 0 0 4px 0;
}
.recolor-pkg-text p {
  font-size: 12.5px;
  color: var(--fg-m);
  line-height: 1.5;
  margin: 0;
}
.recolor-pkg-btn {
  width: 100%;
  position: relative;
  z-index: 1;
  justify-content: center;
  font-size: 13px;
  padding: 10px;
}

/* ====== CUSTOM WORK SECTION — v2 ====== */
.custom-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  padding: 48px 32px;
  overflow: hidden;
}
.custom-card-glow {
  position: absolute;
  top: -80px;
  left: -80px;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.10), transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.custom-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 880px;
}

.custom-card-v2 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 28px 24px 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012) 60%),
    rgba(0,0,0,0.15);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 20px;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), border-color 0.35s ease, box-shadow 0.35s ease;
  text-align: left;
  overflow: hidden;
}
.custom-card-v2::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-accent, rgba(255,255,255,0.18)), transparent);
  opacity: 0.7;
}
.custom-card-v2:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 48px -12px rgba(0, 0, 0, 0.5);
}

/* Card head: icon + numbered badge */
.custom-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.custom-card-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 22px;
  font-weight: 700;
  color: rgba(255,255,255,0.10);
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}

.custom-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.custom-card-icon i {
  width: 22px;
  height: 22px;
}

/* Examples list (replaces generic feel with specifics) */
.custom-card-examples {
  list-style: none;
  margin: 4px 0 0;
  padding: 14px 0 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.custom-card-examples li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--fg-d);
  line-height: 1.3;
}
.custom-card-examples li i {
  width: 13px;
  height: 13px;
  color: var(--card-accent-icon, #22c55e);
  flex-shrink: 0;
}

/* Brand-consistent accent (all cards use Scarlet red) */
.custom-card-v2 { --card-accent: rgba(216,0,0,0.55); --card-accent-icon: #ff4040; }
.custom-card-icon--red    { background: rgba(216, 0, 0, 0.12);   color: var(--accent-l); }
.custom-card-icon--violet { background: rgba(139, 92, 246, 0.14); color: rgb(196, 181, 253); }
.custom-card-icon--amber  { background: rgba(245, 158, 11, 0.14); color: rgb(252, 211, 77); }

.custom-card-v2 h4 {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg);
  margin: 0;
}
.custom-card-v2 p {
  font-size: 14px;
  color: var(--fg-d);
  line-height: 1.55;
  margin: 0;
}

.custom-card .btn {
  position: relative;
  z-index: 1;
}

@media (max-width: 768px) {
  .custom-grid {
    grid-template-columns: 1fr;
  }
  .custom-card {
    padding: 32px 20px;
  }
}

/* ====== HELP-BOX CUSTOM LINK ====== */
.help-custom-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--fg-d);
  text-decoration: none;
  margin-top: 8px;
  transition: color 0.2s ease;
}
.help-custom-link:hover {
  color: var(--accent-l);
}