/*
Theme Name: MenfiaDigital
Theme URI: https://menfiadigital.com
Author: Jahidul Islam
Author URI: https://menfiadigital.com
Description: Custom dark modern theme for Menfia Digital
Version: 2.0
License: GPLv2 or later
Text Domain: menfiadigital
*/

/* ─── APPLE SYSTEM FONT STACK ─────────────────────────────── */

html {
    margin: 0 !important;
    padding: 0 !important;
}

nav#mainNav {
    padding: 14px;
	 z-index: 600;
}

/* ADD after .mega-panel styles: */
.nav-item:hover > .mega-panel,
.mega-panel:hover {
  display: block !important;
}
.nav-item.is-open > .mega-panel {
  display: block;
}

/* Seamless hover bridge — no gap between button and panel */
.nav-item::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  right: 0;
  height: 8px;
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

@media(hover:none){body{cursor:auto}}

/* ─── GRID BG ────────────────────────────────────────────── */
.grid-bg{position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent 80%)}

/* ══════════════════════════════════════════════════════════
   NAV + MEGA MENU
══════════════════════════════════════════════════════════ */
nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1rem,4vw,2.5rem);
  backdrop-filter:blur(24px) saturate(1.6);
  -webkit-backdrop-filter:blur(24px) saturate(1.6);
  background:rgba(8,8,14,.78);
  border-bottom:1px solid var(--border);
  gap:1rem;
}

/* LOGO */
.logo{
  font-family:var(--font-heading);font-weight:700;
  font-size:clamp(1.1rem,2.5vw,1.4rem);
  letter-spacing:-.4px;white-space:nowrap;flex-shrink:0;
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}

/* ── Desktop nav links ── */
.nav-item{position:relative}
.nav-item>a,.nav-item>button{
  font-family:var(--font-body);font-size:var(--step--1);font-weight:500;
  color:var(--muted);letter-spacing:.4px;
  background:none;border:none;cursor:pointer;
  padding:.55rem .85rem;border-radius:8px;
  display:flex;align-items:center;gap:.3rem;
  transition:color .2s,background .2s;
  white-space:nowrap;
}
.nav-item>a:hover,.nav-item>button:hover,.nav-item.open>button{color:var(--text);background:rgba(255,255,255,.05)}
.chevron{font-size:.6rem;opacity:.6;transition:transform .25s}
.nav-item.open .chevron{transform:rotate(180deg)}

/* CTA button */
.nav-cta{
  background:var(--accent);color:#000 !important;
  padding:.5rem 1.3rem;border-radius:100px;
  font-weight:600 !important;font-size:var(--step--1) !important;
  border:none;cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:all .2s;
}
.nav-cta:hover{transform:scale(1.04);box-shadow:0 0 24px rgba(0,212,255,.45)}

/* ── MEGA MENU PANEL ── */
.mega-panel{
  position:fixed;top:var(--nav-h);left:0;width:100%;
  background:#0a0a12;border-top:1px solid var(--border);
  border-bottom:1px solid rgba(255,255,255,.04);
  padding:2.2rem clamp(1rem,5vw,3rem);display:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
	box-shadow:0 28px 64px rgba(0,0,0,.85);z-index:500;}

@keyframes megaDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.nav-item.open .mega-panel{display:block}

/* Inner wrapper centres and constrains content */
.mega-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:1.5rem;
}
.mega-inner.cols-2{grid-template-columns:1fr 1fr}
.mega-inner.cols-3{grid-template-columns:1fr 1fr 1fr}

.mega-col h6{
  font-size:.62rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:.9rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.mega-link{
  display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .75rem;
  border-radius:10px;transition:background .2s;
  margin-bottom:.2rem;
}
.mega-link:hover{background:rgba(255,255,255,.05)}
.mega-link-icon{
  width:36px;height:36px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.mega-link-text strong{display:block;font-size:var(--step--1);font-weight:600;color:var(--text);margin-bottom:.2rem}
.mega-link-text span{font-size:.72rem;color:var(--muted);font-weight:400;line-height:1.4}

.mega-featured{
  background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(109,40,217,.08));
  border:1px solid rgba(0,212,255,.15);
  border-radius:14px;padding:1.2rem;
  display:flex;flex-direction:column;justify-content:space-between;
}
.mega-featured h5{font-size:var(--step-0);font-weight:700;margin-bottom:.5rem}
.mega-featured p{font-size:.78rem;color:var(--muted);line-height:1.55;flex:1}
.mega-feat-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  margin-top:1rem;font-size:.78rem;font-weight:600;color:var(--accent);
}
.mega-feat-cta svg{transition:transform .2s}
.mega-link:hover .mega-feat-cta svg,.mega-featured:hover .mega-feat-cta svg{transform:translateX(3px)}

/* ── HAMBURGER ── */
.hamburger{
  display:none;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:none;border:none;cursor:pointer;
  padding:.5rem;border-radius:8px;flex-shrink:0;
}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .3s;transform-origin:center}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ── MOBILE DRAWER ── */
.mobile-nav{
  position:fixed;top:var(--nav-h);left:0;width:100%;
  background:rgba(8,8,14,.98);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  overflow-y:auto;max-height:calc(100vh - var(--nav-h));
  transform:translateY(-100%);opacity:0;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;
  z-index:190;padding:1.5rem clamp(1rem,5vw,2rem) 2rem;
}
.mobile-nav.open{transform:translateY(0);opacity:1}

.mobile-section{margin-bottom:1.5rem}
.mobile-section-title{
  font-size:.65rem;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:.7rem;padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
}
.mobile-link{
  display:flex;align-items:center;gap:.75rem;padding:.7rem .5rem;
  border-radius:10px;transition:background .2s;font-size:var(--step-0);font-weight:500;color:var(--text);
}
.mobile-link:hover,.mobile-link:active{background:rgba(255,255,255,.05)}
.mobile-link-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.mobile-cta-wrap{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--border)}
.mobile-cta{
  display:block;text-align:center;
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  color:#000;font-weight:700;font-size:var(--step-0);
  padding:.9rem;border-radius:14px;
}

@media(max-width:900px){
  .nav-center{display:none}
  .hamburger{display:flex}
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(109,40,217,.22) 0%,transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 85%,rgba(255,45,120,.14) 0%,transparent 60%),
    radial-gradient(ellipse 40% 50% at 5%  60%,rgba(0,212,255,.08)  0%,transparent 55%);
}
.hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.2);
  color:var(--accent);padding:.38rem 1rem;border-radius:100px;
  font-size:var(--step--1);font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  margin-bottom:clamp(1.2rem,3vw,2rem);animation:fadeUp .6s ease both;
}
.hero-tag .dot{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 1.5s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

h1{
  font-family:var(--font-heading);
  font-size: 60px;
  font-weight:700;line-height:1.05;letter-spacing:-.03em;
  max-width:min(900px,95vw);
  animation:fadeUp .7s .1s ease both;
}
.grad{
  background:linear-gradient(130deg,var(--accent) 0%,var(--accent3) 55%,var(--accent2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.hero-sub{
  max-width:min(520px,90vw);color:var(--muted);
  font-size:var(--step-1);line-height:1.7;
  margin:clamp(1rem,3vw,1.8rem) auto clamp(1.5rem,4vw,2.5rem);
  animation:fadeUp .7s .2s ease both;
}
.hero-btns{
  display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;
  animation:fadeUp .7s .3s ease both;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent3));
  color:#000;padding:.85rem clamp(1.4rem,3vw,2rem);border-radius:100px;
  font-weight:700;font-size:var(--step-0);
  box-shadow:0 0 28px rgba(0,212,255,.3);
  transition:all .25s;display:inline-block;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 44px rgba(0,212,255,.5)}
.btn-ghost{
  border:1px solid var(--border);color:var(--text);
  padding:.85rem clamp(1.4rem,3vw,2rem);border-radius:100px;
  font-size:var(--step-0);background:rgba(255,255,255,.03);
  transition:all .25s;
}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* Floating pills – hidden on small screens */
.floating-pill{
  position:absolute;background:var(--card);border:1px solid var(--border);
  border-radius:100px;padding:.5rem 1.1rem;
  font-size:var(--step--1);font-weight:500;
  display:flex;align-items:center;gap:.45rem;color:var(--text);
  animation:float 4s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.pill1{bottom:22%;left:5%;animation-delay:0s}
.pill2{bottom:32%;right:5%;animation-delay:1.5s}
.pill3{top:30%;right:3%;animation-delay:.8s}
@media(max-width:768px){.floating-pill{display:none}}

/* ── STATS ── */
.stats-bar{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(2rem,4vw,3rem) clamp(1rem,5vw,5%);
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stat{text-align:center;min-width:100px}
.stat-num{
  font-family:var(--font-heading);font-size:var(--step-4);font-weight:700;line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.stat-label{color:var(--muted);font-size:var(--step--1);margin-top:.35rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:500}

/* ── SHARED SECTION ── */
section{padding:clamp(4rem,8vw,7rem) clamp(1rem,5vw,5%)}
.section-tag{color:var(--accent);font-size:var(--step--1);font-weight:600;letter-spacing:2.5px;text-transform:uppercase;margin-bottom:.8rem}
.section-title{
  font-family:var(--font-heading);font-size:var(--step-4);
  font-weight:700;line-height:1.1;letter-spacing:-.02em;max-width:680px;
}
.section-title em{font-style:italic;color:var(--accent)}
.section-sub{color:var(--muted);font-size:var(--step-0);line-height:1.75;max-width:520px;margin-top:.8rem}

/* ══════════════════════════════════════════════════════════
   SERVICES
══════════════════════════════════════════════════════════ */
.services{background:var(--surface)}
.services-header{text-align:center;margin-bottom:clamp(2rem,4vw,3.5rem)}
.services-header .section-title,.services-header .section-sub{max-width:100%;margin-left:auto;margin-right:auto}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1.2rem;max-width:1200px;margin:0 auto;
}
.service-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:clamp(1.4rem,3vw,2rem);position:relative;overflow:hidden;transition:all .35s;
}
.service-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at top left,rgba(0,212,255,.05),transparent 60%);opacity:0;transition:opacity .3s}
.service-card:hover{transform:translateY(-5px);border-color:rgba(0,212,255,.22);box-shadow:var(--glow)}
.service-card:hover::before{opacity:1}
.service-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:1.2rem}
.service-card h3{font-family:var(--font-heading);font-size:var(--step-1);font-weight:700;margin-bottom:.6rem;letter-spacing:-.02em}
.service-card p{color:var(--muted);font-size:var(--step--1);line-height:1.7}
.service-price{display:inline-block;margin-top:1.1rem;color:var(--accent);font-size:var(--step--1);font-weight:600;letter-spacing:.3px}

/* ══════════════════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════════════════ */
.how-inner{
  max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;
}
@media(max-width:840px){.how-inner{grid-template-columns:1fr}}
.steps{display:flex;flex-direction:column;gap:1.5rem;margin-top:2rem}
.step{display:flex;gap:1.2rem;align-items:flex-start}
.step-num{
  flex-shrink:0;width:40px;height:40px;border-radius:11px;
  background:linear-gradient(135deg,var(--accent3),var(--accent));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:var(--step-1);color:#000;
}
.step-content h4{font-family:var(--font-heading);font-weight:700;font-size:var(--step-1);margin-bottom:.3rem;letter-spacing:-.01em}
.step-content p{color:var(--muted);font-size:var(--step--1);line-height:1.65}

/* Result card */
.result-card{
  background:var(--card);border:1px solid var(--border);border-radius:22px;
  padding:clamp(1.5rem,3vw,2.5rem);position:relative;overflow:hidden;
}
.result-card::after{content:'';position:absolute;top:-50%;right:-30%;width:280px;height:280px;background:radial-gradient(circle,rgba(0,212,255,.07),transparent 70%);pointer-events:none}
.before-after{display:flex;gap:.8rem;margin:1.3rem 0;flex-wrap:wrap}
.ba-box{flex:1;min-width:130px;background:var(--surface);border-radius:12px;padding:1rem;border:1px solid var(--border)}
.ba-label{font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem;font-weight:600}
.ba-num{font-family:var(--font-heading);font-size:var(--step-3);font-weight:700;line-height:1}
.ba-num.bad{color:#ff4466}
.ba-num.good{color:#00e5a0}
.ba-desc{font-size:.72rem;color:var(--muted);margin-top:.25rem}
.arrow-icon{align-self:center;font-size:1.2rem;color:var(--accent);flex-shrink:0}
.result-quote{font-size:var(--step-0);font-style:italic;color:rgba(245,245,247,.72);line-height:1.6;border-left:2px solid var(--accent);padding-left:1rem;margin-top:1.3rem}
.result-author{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem}
.avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent3),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:600;color:#fff;font-size:.75rem;flex-shrink:0}
.author-info h5{font-size:var(--step--1);font-weight:600}
.author-info span{font-size:.7rem;color:var(--muted)}

/* ══════════════════════════════════════════════════════════
   VIDEO REVIEWS
══════════════════════════════════════════════════════════ */
.video-reviews{background:var(--surface)}
.video-reviews-header{text-align:center;margin-bottom:clamp(2rem,4vw,3.5rem)}
.video-reviews-header .section-title,.video-reviews-header .section-sub{max-width:100%;margin-left:auto;margin-right:auto}
.video-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
  gap:1.2rem;max-width:1200px;margin:0 auto;
}
.video-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;position:relative;transition:all .35s;cursor:pointer}
.video-card:hover{transform:translateY(-5px);border-color:rgba(255,45,120,.3);box-shadow:0 0 40px rgba(255,45,120,.1)}
.video-thumb{position:relative;aspect-ratio:16/9;overflow:hidden}
.t1{background:linear-gradient(135deg,#0d0221,#07182e)}
.t2{background:linear-gradient(135deg,#1a0025,#2a0018)}
.t3{background:linear-gradient(135deg,#011a14,#022a0d)}
.t4{background:linear-gradient(135deg,#1a1100,#1c0b00)}
.thumb-bars{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:flex-end;gap:3px;padding:0 12px 8px;height:50px}
.bar{flex:1;border-radius:2px 2px 0 0;animation:barAnim 1.4s ease-in-out infinite alternate}
.bar:nth-child(1){height:30%;animation-delay:0s}
.bar:nth-child(2){height:70%;animation-delay:.1s}
.bar:nth-child(3){height:45%;animation-delay:.2s}
.bar:nth-child(4){height:88%;animation-delay:.3s}
.bar:nth-child(5){height:38%;animation-delay:.4s}
.bar:nth-child(6){height:60%;animation-delay:.5s}
.bar:nth-child(7){height:30%;animation-delay:.15s}
.bar:nth-child(8){height:75%;animation-delay:.25s}
@keyframes barAnim{from{opacity:.18}to{opacity:.6}}
.play-btn{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.28);transition:background .3s}
.video-card:hover .play-btn{background:rgba(0,0,0,.1)}
.play-circle{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.13);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;transition:all .3s}
.video-card:hover .play-circle{background:rgba(0,212,255,.2);border-color:var(--accent);transform:scale(1.1);box-shadow:0 0 28px rgba(0,212,255,.35)}
.play-tri{width:0;height:0;border-style:solid;border-width:9px 0 9px 16px;border-color:transparent transparent transparent #fff;margin-left:4px}
.v-duration{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.72);color:#fff;font-size:.68rem;font-weight:500;padding:.18rem .45rem;border-radius:4px;letter-spacing:.4px}
.result-pill{position:absolute;top:10px;left:10px;background:rgba(0,229,160,.13);border:1px solid rgba(0,229,160,.28);color:#00e5a0;padding:.2rem .65rem;border-radius:100px;font-size:.66rem;font-weight:600;letter-spacing:.4px}
.video-info{padding:clamp(1rem,2.5vw,1.4rem) clamp(1rem,2.5vw,1.5rem) clamp(1.1rem,2.5vw,1.5rem)}
.video-stars{color:#ffd700;font-size:.8rem;letter-spacing:2px;margin-bottom:.6rem}
.video-quote{font-size:var(--step-0);font-style:italic;line-height:1.55;color:rgba(245,245,247,.82);margin-bottom:.9rem}
.video-author{display:flex;align-items:center;gap:.65rem}
.v-avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:#fff;flex-shrink:0}
.video-author-info h5{font-size:var(--step--1);font-weight:600}
.video-author-info span{font-size:.7rem;color:var(--muted)}

/* Modal */
.modal-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.88);backdrop-filter:blur(12px);display:none;align-items:center;justify-content:center;padding:1.5rem}
.modal-overlay.open{display:flex}
.modal-box{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:clamp(1.2rem,3vw,2rem);max-width:660px;width:100%;position:relative}
.modal-close{position:absolute;top:.9rem;right:.9rem;background:rgba(255,255,255,.07);border:none;color:var(--text);width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:.9rem;transition:background .2s}
.modal-close:hover{background:rgba(255,255,255,.14)}
.modal-video{aspect-ratio:16/9;border-radius:12px;overflow:hidden;margin-bottom:1rem;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem}
.modal-video span{font-size:2.6rem}
.modal-video p{font-size:var(--step--1);color:var(--muted);text-align:center;line-height:1.55}
.modal-title{font-family:var(--font-heading);font-size:var(--step-2);font-weight:700;margin-bottom:.25rem;letter-spacing:-.02em}
.modal-role{font-size:var(--step--1);color:var(--muted);margin-bottom:.9rem}
.modal-quote{font-size:var(--step-0);font-style:italic;color:rgba(245,245,247,.75);line-height:1.6;border-left:2px solid var(--accent);padding-left:.9rem}

/* ══════════════════════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════════════════════ */
.testimonials{background:var(--bg)}
.testimonials-header{text-align:center;margin-bottom:clamp(2rem,4vw,3.5rem)}
.testimonials-header .section-title,.testimonials-header .section-sub{max-width:100%;margin-left:auto;margin-right:auto}
.test-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:1.2rem;max-width:1200px;margin:0 auto;
}
.test-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:clamp(1.3rem,3vw,1.8rem);transition:all .3s}
.test-card:hover{border-color:rgba(109,40,217,.35);transform:translateY(-4px)}
.stars{color:#ffd700;font-size:.85rem;margin-bottom:.85rem;letter-spacing:1.8px}
.test-text{font-size:var(--step-0);font-style:italic;color:rgba(245,245,247,.75);line-height:1.65;margin-bottom:1.3rem}
.test-author{display:flex;align-items:center;gap:.7rem}

/* ══════════════════════════════════════════════════════════
   CTA
══════════════════════════════════════════════════════════ */
.cta-section{text-align:center;position:relative;overflow:hidden;background:var(--surface)}
.cta-section::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 80% at 50% 50%,rgba(109,40,217,.16),transparent 70%);pointer-events:none}
.cta-box{max-width:700px;margin:0 auto;position:relative}
.cta-box .section-title{max-width:100%;margin:1rem auto}
.cta-sub{color:var(--muted);font-size:var(--step-0);line-height:1.75;margin:1rem auto clamp(1.5rem,3vw,2.5rem);max-width:480px}
.cta-form{
  display:flex;gap:.6rem;max-width:460px;margin:0 auto;
  background:var(--card);border:1px solid var(--border);
  border-radius:100px;padding:.4rem;
}
.cta-form input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:var(--step-0);padding:.55rem .9rem}
.cta-form input::placeholder{color:var(--muted)}
.cta-form button{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#000;border:none;padding:.7rem clamp(1rem,2.5vw,1.6rem);border-radius:100px;font-weight:700;font-size:var(--step--1);cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}
.cta-form button:hover{transform:scale(1.04)}
@media(max-width:460px){
  .cta-form{flex-direction:column;border-radius:16px;padding:.6rem}
  .cta-form input{padding:.6rem .9rem}
  .cta-form button{border-radius:10px;padding:.8rem}
}
.trust-logos{display:flex;justify-content:center;gap:clamp(1rem,3vw,2rem);margin-top:2rem;flex-wrap:wrap}
.trust-item{color:var(--muted);font-size:var(--step--1);font-weight:500;display:flex;align-items:center;gap:.4rem}

/* BADGE */
.badge{display:inline-flex;align-items:center;gap:.4rem;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);color:#00e5a0;padding:.28rem .85rem;border-radius:100px;font-size:var(--step--1);font-weight:600;letter-spacing:.6px}
.badge-dot{width:6px;height:6px;background:#00e5a0;border-radius:50%;animation:pulse 1.5s infinite;flex-shrink:0}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
footer{background:var(--bg);border-top:1px solid var(--border);padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,5%) 2rem}
.footer-grid{
  display:grid;
  grid-template-columns:2fr repeat(3,1fr);
  gap:clamp(1.5rem,3vw,3rem);
  max-width:1200px;margin:0 auto clamp(2rem,4vw,3rem);
}
@media(max-width:820px){.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{color:var(--muted);font-size:var(--step--1);line-height:1.75;max-width:260px;margin-top:.7rem}
.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.social{width:34px;height:34px;border-radius:8px;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.82rem;color:var(--muted);transition:all .2s}
.social:hover{border-color:var(--accent);color:var(--accent)}
.footer-col h4{font-size:var(--step--1);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:1.1rem;color:var(--text)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:.6rem}
.footer-col a{color:var(--muted);font-size:var(--step--1);transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-bottom{border-top:1px solid var(--border);padding-top:1.5rem;display:flex;justify-content:space-between;align-items:center;max-width:1200px;margin:0 auto;flex-wrap:wrap;gap:.75rem}
.footer-bottom p,.footer-bottom a{color:var(--muted);font-size:var(--step--1)}
.footer-bottom a:hover{color:var(--accent)}
.footer-links {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}



/* markup for mobile */
@media screen and (max-width:768px) {
	section#hero {
    min-height: 50vh;
	padding-top: 30px;	
}
	
section#hero h1 {
    font-size: 36px;
}	
}

/* ══════════════════════════════════════════════════════════
   MOBILE HERO FIX — Replace the existing mobile media query
   at the bottom of style.css with this block
══════════════════════════════════════════════════════════ */

@media screen and (max-width: 768px) {

  /* ── Hero section ─────────────────────────────────────── */
section#hero {
    min-height: 48svh;
    padding-top: calc(var(--nav-h) + 0.2rem);
    padding-bottom: 3rem;
    padding-left: clamp(1rem, 5vw, 1.5rem);
    padding-right: clamp(1rem, 5vw, 1.5rem);
    justify-content: center;
    gap: 0;
	padding-top: 32px;
}

  /* ── Headline ─────────────────────────────────────────── */
  section#hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem);         /* fluid, never too large */
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 0;
  }

  /* ── Tag pill above headline ──────────────────────────── */
  .hero-tag {
    margin-bottom: 1rem;
    font-size: 0.65rem;
    letter-spacing: 1.2px;
    padding: 0.35rem 0.85rem;
  }

  /* ── Subheading ───────────────────────────────────────── */
  .hero-sub {
    font-size: clamp(0.875rem, 3.5vw, 1rem);
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.65;
  }

  /* ── CTA buttons ──────────────────────────────────────── */
  .hero-btns {
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
  }

  .btn-primary,
  .btn-ghost {
    width: 100%;
    max-width: 320px;
    text-align: center;
    padding: 0.85rem 1.25rem;
    font-size: 0.95rem;
  }

  /* ── Stats bar ────────────────────────────────────────── */
  .stats-bar {
    gap: 1.2rem 2rem;
    padding: 1.75rem 1rem;
  }

  .stat-num {
    font-size: clamp(1.6rem, 7vw, 2.2rem);
  }

  .stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.8px;
  }
}

/* Extra small screens (< 400px) */
@media screen and (max-width: 400px) {
  section#hero h1 {
    font-size: clamp(1.75rem, 8vw, 2.2rem);
  }

  .hero-tag {
    font-size: 0.6rem;
  }
}

/* Original rule uses (hover:none) — strengthen it */
@media (hover: none), (pointer: coarse) {
  

  body {
    cursor: auto !important;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX 2 — Hide the desktop nav CTA on mobile
   (the one already in the <nav> beside the hamburger)
══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  /* Hide the desktop nav CTA — the mobile drawer has its own */
  nav > .nav-cta {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════════
   FIX 3 — Mobile CTA wrap: make sure it's always visible
   and styled correctly inside the mobile drawer
══════════════════════════════════════════════════════════ */

.mobile-cta-wrap {
  display: block !important;   /* override any accidental hide */
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.mobile-cta {
  display: block;
  text-align: center;
  background: linear-gradient(135deg, var(--accent), var(--accent3));
  color: #000 !important;
  font-weight: 700;
  font-size: var(--step-0);
  padding: 0.9rem;
  border-radius: 14px;
  letter-spacing: 0.2px;
  transition: opacity 0.2s, transform 0.2s;
}

.mobile-cta:hover,
.mobile-cta:active {
  opacity: 0.88;
  transform: scale(0.985);
}

/* RESET inside our wrapper */
.lpb-wrap *{box-sizing:border-box;margin:0;padding:0}
.lpb-wrap a{text-decoration:none;color:inherit}
.lpb-wrap{
  font-family:var(--lpb-font-body);
  background:var(--lpb-bg);
  color:var(--lpb-text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;

}

/* GRID BACKGROUND */
.lpb-grid-bg{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent 80%);
}

/* ── INNER NAV (tab switcher only — no logo/site nav) ── */
.lpb-inner-nav{
  display:flex;align-items:center;justify-content:center;
  gap:.75rem;padding:1.2rem clamp(1rem,4vw,2.5rem);
  border-bottom:1px solid var(--lpb-border);
  background:rgba(8,8,14,.88);
  backdrop-filter:blur(24px) saturate(1.6);
  position:sticky;top:0;z-index:200;flex-wrap:wrap;
}
.lpb-tab-btn{
  background:none;border:1px solid var(--lpb-border);
  color:var(--lpb-muted);padding:.45rem 1.1rem;border-radius:100px;
  font-family:var(--lpb-font-body);font-size:.8rem;font-weight:600;
  cursor:pointer;transition:all .2s;letter-spacing:.3px;
}
.lpb-tab-btn:hover{color:var(--lpb-text);border-color:rgba(255,255,255,.2)}
.lpb-tab-btn.active{background:var(--lpb-accent);color:#000;border-color:var(--lpb-accent)}
.lpb-publish-btn{
  background:linear-gradient(135deg,var(--lpb-accent),var(--lpb-accent3));
  color:#000;padding:.5rem 1.3rem;border-radius:100px;
  font-weight:700;font-size:.82rem;border:none;cursor:pointer;transition:all .2s;
}
.lpb-publish-btn:hover{transform:scale(1.04);box-shadow:0 0 24px rgba(0,212,255,.4)}

/* ── VIEWS ── */
.lpb-view{display:none;padding-bottom:4rem}
.lpb-view.active{display:block}

/* ════════════════════════════════
   SHOWCASE VIEW
════════════════════════════════ */
.lpb-hero{
  padding:clamp(4rem,8vw,6rem) clamp(1rem,6vw,3rem) clamp(2rem,4vw,3rem);
  text-align:center;position:relative;overflow:hidden;
}
.lpb-hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%,rgba(109,40,217,.2) 0%,transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 85%,rgba(255,45,120,.12) 0%,transparent 60%);
}
.lpb-hero-tag{
  display:inline-flex;align-items:center;gap:.5rem;
  background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.2);
  color:var(--lpb-accent);padding:.38rem 1rem;border-radius:100px;
  font-size:.7rem;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;margin-bottom:1.5rem;
}
.lpb-dot{width:6px;height:6px;background:var(--lpb-accent);border-radius:50%;animation:lpb-pulse 1.5s infinite}
@keyframes lpb-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.lpb-hero h1{
  font-family:var(--lpb-font-heading);
  font-size:clamp(2.2rem,6vw,4.5rem);font-weight:800;
  line-height:1.08;letter-spacing:-.03em;
  max-width:800px;margin:0 auto .8rem;
}
.lpb-grad{
  background:linear-gradient(130deg,var(--lpb-accent) 0%,var(--lpb-accent3) 55%,var(--lpb-accent2) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.lpb-hero p{
  color:var(--lpb-muted);font-size:clamp(.9rem,2vw,1.05rem);
  line-height:1.7;max-width:520px;margin:0 auto 2rem;
}

/* FILTER BAR */
.lpb-filter-bar{
  display:flex;align-items:center;justify-content:center;gap:.6rem;
  flex-wrap:wrap;padding:0 1rem 2.5rem;position:relative;z-index:1;
}
.lpb-chip{
  background:var(--lpb-card);border:1px solid var(--lpb-border);
  color:var(--lpb-muted);padding:.4rem 1rem;border-radius:100px;
  font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s;
}
.lpb-chip:hover{color:var(--lpb-text);border-color:rgba(255,255,255,.2)}
.lpb-chip.on{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.35);color:var(--lpb-accent)}

/* STATS BAR */
.lpb-stats-bar{
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(1.5rem,4vw,3.5rem);
  padding:1.8rem clamp(1rem,5vw,5%);
  border-top:1px solid var(--lpb-border);border-bottom:1px solid var(--lpb-border);
  background:var(--lpb-surface);position:relative;z-index:1;
}
.lpb-stat{text-align:center}
.lpb-stat-num{
  font-family:var(--lpb-font-heading);
  font-size:clamp(1.6rem,4vw,2.8rem);font-weight:800;line-height:1;
  background:linear-gradient(135deg,var(--lpb-accent),var(--lpb-accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.lpb-stat-label{color:var(--lpb-muted);font-size:.7rem;margin-top:.3rem;letter-spacing:1.2px;text-transform:uppercase;font-weight:500}

/* PORTFOLIO GRID */
.lpb-portfolio-section{padding:clamp(3rem,6vw,5rem) clamp(1rem,5vw,4%)}
.lpb-section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  max-width:1300px;margin:0 auto 2rem;
}
.lpb-section-hdr h2{
  font-family:var(--lpb-font-heading);
  font-size:clamp(1.3rem,3vw,2rem);font-weight:800;letter-spacing:-.02em;
}
.lpb-count-badge{
  background:var(--lpb-card);border:1px solid var(--lpb-border);
  color:var(--lpb-muted);padding:.3rem .85rem;border-radius:100px;font-size:.75rem;font-weight:600;
}
.lpb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));
  gap:1.4rem;max-width:1300px;margin:0 auto;
}

/* CARD */
.lpb-card{
  background:var(--lpb-card);border:1px solid var(--lpb-border);
  border-radius:20px;overflow:hidden;
  transition:all .35s cubic-bezier(.4,0,.2,1);cursor:pointer;position:relative;
}
.lpb-card:hover{transform:translateY(-6px);border-color:rgba(0,212,255,.25);box-shadow:var(--lpb-glow)}
.lpb-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--lpb-surface)}
.lpb-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.lpb-card:hover .lpb-thumb img{transform:scale(1.04)}
.lpb-thumb-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:3rem;background:linear-gradient(135deg,var(--lpb-surface),var(--lpb-card));
  position:relative;overflow:hidden;
}
.lpb-thumb-ph::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 50%,rgba(0,212,255,.06),transparent 60%);
}
.lpb-card-overlay{position:absolute;top:10px;left:10px;display:flex;gap:.4rem;flex-wrap:wrap}
.lpb-badge-cat{
  background:rgba(109,40,217,.2);border:1px solid rgba(109,40,217,.4);color:#a78bfa;
  padding:.22rem .7rem;border-radius:100px;font-size:.65rem;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
}
.lpb-badge-new{
  background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.3);color:#00e5a0;
  padding:.22rem .7rem;border-radius:100px;font-size:.65rem;font-weight:600;letter-spacing:.4px;
}
.lpb-visit-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;
  align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;backdrop-filter:blur(4px);
}
.lpb-card:hover .lpb-visit-overlay{opacity:1}
.lpb-visit-btn-inner{
  background:var(--lpb-accent);color:#000;padding:.6rem 1.4rem;
  border-radius:100px;font-weight:700;font-size:.82rem;display:flex;align-items:center;gap:.4rem;
}
.lpb-card-body{padding:1.3rem 1.4rem 1.5rem}
.lpb-card-title{
  font-family:var(--lpb-font-heading);font-size:1.05rem;font-weight:700;
  margin-bottom:.4rem;letter-spacing:-.01em;line-height:1.3;
}
.lpb-card-client{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem}
.lpb-avatar{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.62rem;font-weight:700;color:#fff;flex-shrink:0;
}
.lpb-client-name{font-size:.8rem;color:var(--lpb-muted);font-weight:500}
.lpb-card-review{
  font-size:.82rem;font-style:italic;color:rgba(245,245,247,.65);line-height:1.6;
  border-left:2px solid rgba(0,212,255,.3);padding-left:.8rem;margin-bottom:1rem;
}
.lpb-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.lpb-stars{color:#ffd700;font-size:.82rem;letter-spacing:1px}
.lpb-rating-num{font-size:.78rem;color:var(--lpb-muted);font-weight:500}
.lpb-card-url{
  display:flex;align-items:center;gap:.3rem;font-size:.73rem;color:var(--lpb-accent);font-weight:500;
  background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.15);
  padding:.25rem .7rem;border-radius:100px;transition:all .2s;max-width:150px;overflow:hidden;
}
.lpb-card-url:hover{background:rgba(0,212,255,.14)}
.lpb-card-url span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lpb-empty{text-align:center;padding:5rem 2rem;color:var(--lpb-muted);max-width:1300px;margin:0 auto}
.lpb-empty-icon{font-size:3.5rem;margin-bottom:1rem;display:block}
.lpb-empty h3{font-family:var(--lpb-font-heading);font-size:1.4rem;color:var(--lpb-text);margin-bottom:.5rem}

/* ════════════════════════════════
   MODAL
════════════════════════════════ */
.lpb-modal{
  position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.75);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
  padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s;
}
.lpb-modal.open{opacity:1;pointer-events:all}
.lpb-modal-box{
  background:var(--lpb-card);border:1px solid var(--lpb-border);
  border-radius:24px;max-width:680px;width:100%;max-height:90vh;overflow-y:auto;
  transform:translateY(20px);transition:transform .3s;
}
.lpb-modal.open .lpb-modal-box{transform:translateY(0)}
.lpb-modal-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--lpb-surface)}
.lpb-modal-thumb img{width:100%;height:100%;object-fit:cover}
.lpb-modal-thumb-ph{
  width:100%;height:100%;min-height:200px;display:flex;align-items:center;
  justify-content:center;font-size:5rem;background:var(--lpb-surface);
}
.lpb-modal-close{
  position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,.6);
  border:1px solid var(--lpb-border);color:var(--lpb-text);
  width:36px;height:36px;border-radius:50%;font-size:1.1rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:all .2s;
}
.lpb-modal-close:hover{background:var(--lpb-accent);color:#000;border-color:var(--lpb-accent)}
.lpb-modal-body{padding:2rem}
.lpb-modal-cat{
  display:inline-block;background:rgba(109,40,217,.2);border:1px solid rgba(109,40,217,.4);
  color:#a78bfa;padding:.22rem .8rem;border-radius:100px;font-size:.68rem;
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;margin-bottom:1rem;
}
.lpb-modal-title{
  font-family:var(--lpb-font-heading);font-size:clamp(1.4rem,4vw,2rem);
  font-weight:800;letter-spacing:-.02em;margin-bottom:1.2rem;
}
.lpb-modal-client{
  display:flex;align-items:center;gap:.85rem;
  padding:1rem 1.2rem;background:var(--lpb-surface);
  border-radius:14px;margin-bottom:1.4rem;border:1px solid var(--lpb-border);
}
.lpb-modal-avatar{
  width:46px;height:46px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.95rem;font-weight:700;color:#fff;flex-shrink:0;
}
.lpb-modal-cn{font-weight:600;font-size:.95rem}
.lpb-modal-cr{font-size:.8rem;color:var(--lpb-muted);margin-top:.15rem}
.lpb-modal-review{
  font-size:.92rem;font-style:italic;color:rgba(245,245,247,.75);line-height:1.75;
  border-left:3px solid var(--lpb-accent);padding-left:1rem;margin-bottom:1.6rem;
}
.lpb-modal-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.lpb-modal-stars{color:#ffd700;font-size:1.1rem;letter-spacing:2px}
.lpb-modal-rn{font-size:.82rem;color:var(--lpb-muted);font-weight:500;margin-left:.4rem}
.lpb-modal-cta{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--lpb-accent);color:#000;padding:.65rem 1.5rem;
  border-radius:100px;font-weight:700;font-size:.88rem;transition:all .2s;
}
.lpb-modal-cta:hover{transform:scale(1.04);box-shadow:0 0 20px rgba(0,212,255,.4);color:#000}

/* ════════════════════════════════
   PUBLISH FORM VIEW
════════════════════════════════ */
.lpb-form-view{max-width:720px;margin:0 auto;padding:3rem clamp(1rem,5vw,2rem) 4rem}
.lpb-form-title{
  font-family:var(--lpb-font-heading);font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:800;letter-spacing:-.03em;margin-bottom:.5rem;
}
.lpb-form-sub{color:var(--lpb-muted);font-size:.9rem;margin-bottom:2.5rem;line-height:1.6}
.lpb-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
@media(max-width:540px){.lpb-form-grid{grid-template-columns:1fr}}
.lpb-field{display:flex;flex-direction:column;gap:.45rem}
.lpb-field.full{grid-column:1/-1}
.lpb-label{font-size:.78rem;font-weight:600;color:var(--lpb-muted);letter-spacing:.5px;text-transform:uppercase}
.lpb-input,.lpb-select,.lpb-textarea{
  background:var(--lpb-card);border:1px solid var(--lpb-border);
  border-radius:12px;padding:.75rem 1rem;color:var(--lpb-text);
  font-family:var(--lpb-font-body);font-size:.9rem;transition:border-color .2s;width:100%;
}
.lpb-textarea{min-height:100px;resize:vertical}
.lpb-input:focus,.lpb-select:focus,.lpb-textarea:focus{
  outline:none;border-color:var(--lpb-accent);
}
.lpb-input::placeholder,.lpb-textarea::placeholder{color:var(--lpb-muted)}
.lpb-select option{background:var(--lpb-card)}

/* image upload */
.lpb-upload-zone{
  border:2px dashed var(--lpb-border);border-radius:16px;
  padding:2rem;text-align:center;cursor:pointer;transition:all .2s;
  background:var(--lpb-card);position:relative;
}
.lpb-upload-zone:hover{border-color:rgba(0,212,255,.4);background:rgba(0,212,255,.03)}
.lpb-upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.lpb-upload-icon{font-size:2.2rem;margin-bottom:.6rem}
.lpb-upload-text{font-size:.83rem;color:var(--lpb-muted);line-height:1.5}
.lpb-img-preview{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.lpb-img-preview img{width:100%;height:100%;object-fit:cover}
.lpb-remove-img{
  position:absolute;top:.5rem;right:.5rem;background:rgba(0,0,0,.7);
  border:1px solid var(--lpb-border);color:var(--lpb-text);width:30px;height:30px;
  border-radius:50%;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lpb-remove-img:hover{background:var(--lpb-accent2);border-color:var(--lpb-accent2)}

/* star picker */
.lpb-star-pick{display:flex;gap:.3rem}
.lpb-star-pick span{font-size:1.6rem;cursor:pointer;transition:transform .15s;color:rgba(255,215,0,.25)}
.lpb-star-pick span.lit{color:#ffd700}
.lpb-star-pick span:hover{transform:scale(1.2)}

/* submit */
.lpb-submit-row{margin-top:1.8rem;display:flex;gap:1rem;flex-wrap:wrap}
.lpb-submit-btn{
  background:linear-gradient(135deg,var(--lpb-accent),var(--lpb-accent3));
  color:#000;padding:.75rem 2rem;border-radius:100px;
  font-weight:700;font-size:.95rem;border:none;cursor:pointer;transition:all .2s;
}
.lpb-submit-btn:hover{transform:scale(1.04);box-shadow:0 0 24px rgba(0,212,255,.4)}
.lpb-cancel-btn{
  background:none;border:1px solid var(--lpb-border);color:var(--lpb-muted);
  padding:.75rem 1.8rem;border-radius:100px;font-size:.9rem;cursor:pointer;transition:all .2s;
  font-family:var(--lpb-font-body);
}
.lpb-cancel-btn:hover{color:var(--lpb-text);border-color:rgba(255,255,255,.2)}

/* TOAST */
.lpb-toast{
  position:fixed;bottom:2rem;left:50%;transform:translateX(-50%) translateY(10px);
  background:var(--lpb-accent);color:#000;padding:.75rem 1.8rem;
  border-radius:100px;font-weight:700;font-size:.88rem;
  z-index:600;opacity:0;pointer-events:none;transition:all .4s;
}
.lpb-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* RESPONSIVE */
@media(max-width:600px){
  .lpb-inner-nav{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-left:1rem}
  .lpb-modal-body{padding:1.4rem}
}

.footer-links li {
    list-style: none;
}

.wplp-pending-notice h3 {
    color: #333 !important;
}

.stat-num {
    font-size: 40px;
}


.sp-hero {
    align-items: flex-start !important;
}


.wplp-auth-card h2 {
    color: #333;
}

button.wplp-tab-btn.active {
    color: #333 !important;
}

h2.section-title, p.section-sub {
    margin: 0 auto;
}

p.section-sub {
    margin-top: 10px;
}


/* ════════════════════════════════════════════════════════════
   HEADER
════════════════════════════════════════════════════════════ */

:root {
  --accent:  <?php echo esc_attr($accent); ?>;
  --accent2: <?php echo esc_attr($accent2); ?>;
  --accent3: <?php echo esc_attr($accent3); ?>;
  --nav-bg:  rgba(8,8,14,<?php echo esc_attr($nav_opacity); ?>);
  --font-h: -apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  --font-b: -apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  --bg:#08080e; --surface:#0f0f17; --card:#14141e;
  --border:rgba(255,255,255,.07); --text:#f5f5f7; --muted:#86869a;
  --s-1:clamp(.75rem,1.8vw,.875rem); --s0:clamp(.875rem,2vw,1rem);
  --s1:clamp(1rem,2.5vw,1.25rem);   --s2:clamp(1.25rem,3vw,1.6rem);
  --s3:clamp(1.6rem,4vw,2.4rem);    --s4:clamp(2rem,5vw,3.4rem);
  --s5:clamp(2.8rem,7vw,5.5rem);    --nav-h:68px; --r:16px;
  --mega-bg:#0d0d18;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  font-family:var(--font-b);font-size:var(--s0);background:var(--bg);color:var(--text);
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);
}

img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(rgba(255,255,255,.016) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.016) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black,transparent 80%);
}



/* ══════════════════════════════════════════════════════════════
   NAV BAR
══════════════════════════════════════════════════════════════ */
#mainNav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1rem,4vw,2.5rem);
  background:var(--nav-bg);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  z-index:600;transition:background .3s,border-bottom-color .3s,box-shadow .3s;
}
#mainNav.is-scrolled{
  background:rgba(8,8,14,.98);
  border-bottom-color:rgba(255,255,255,.14);
  box-shadow:0 4px 32px rgba(0,0,0,.55);
}

.nav-left{display:flex;align-items:center;gap:.65rem;flex-shrink:0;}
.site-logo{
  display:flex;align-items:center;gap:.55rem;
  font-family:var(--font-h);font-weight:700;
  font-size:clamp(1.1rem,2.5vw,1.4rem);letter-spacing:-.4px;white-space:nowrap;
  background:linear-gradient(100deg,var(--accent),var(--accent2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
}
.site-logo img{height:36px;width:auto;border-radius:6px;-webkit-text-fill-color:unset;}

.nav-center{display:flex;align-items:center;gap:.2rem;list-style:none;flex:1;justify-content:center;}
.nav-item{position:relative;}
.nav-item>a,.nav-item>button{
  font-family:var(--font-b);font-size:var(--s-1);font-weight:500;color:var(--muted);
  letter-spacing:.4px;background:none;border:none;cursor:pointer;
  padding:.55rem .85rem;border-radius:8px;
  display:flex;align-items:center;gap:.3rem;
  transition:color .2s,background .2s;white-space:nowrap;
}
.nav-item>a:hover,.nav-item>button:hover,.nav-item.is-open>button{color:var(--text);background:rgba(255,255,255,.05);}
.chevron{font-size:.6rem;opacity:.6;transition:transform .25s}
.nav-item.is-open .chevron{transform:rotate(180deg)}

.nav-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0;}
.nav-cta{
  background:var(--accent);color:#000 !important;
  padding:.48rem 1.25rem;border-radius:100px;
  font-weight:700 !important;font-size:var(--s-1) !important;
  border:none;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.3rem;
  transition:transform .2s,box-shadow .2s;
}
.nav-cta:hover{transform:scale(1.04);box-shadow:0 0 24px rgba(0,212,255,.45)}

/* ══════════════════════════════════════════════════════════════
   AVATAR DROPDOWN
══════════════════════════════════════════════════════════════ */
.nav-avatar-wrap{position:relative;display:inline-flex;align-items:center;}
.nav-avatar-btn{
  width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(0,212,255,.5);background:none;cursor:pointer;padding:0;
  overflow:hidden;flex-shrink:0;transition:border-color .2s,box-shadow .2s;display:block;
}
.nav-avatar-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,255,.18);}
.nav-avatar-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

.nav-user-dropdown{
  position:absolute;top:calc(100% + 10px);right:0;min-width:220px;
  background:var(--mega-bg);border:1px solid var(--border);border-radius:14px;padding:.5rem;
  box-shadow:0 20px 48px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);
  opacity:0;pointer-events:none;
  transform:translateY(-6px) scale(.97);transform-origin:top right;
  transition:opacity .18s ease,transform .18s ease;z-index:700;
}
.nav-avatar-wrap.is-open .nav-user-dropdown{opacity:1;pointer-events:auto;transform:translateY(0) scale(1);}
.nav-user-dropdown::before{
  content:'';position:absolute;top:-6px;right:13px;width:10px;height:10px;
  background:var(--mega-bg);border-left:1px solid var(--border);border-top:1px solid var(--border);
  transform:rotate(45deg);border-radius:2px 0 0 0;
}

/* ── Dropdown header: avatar + name + email ── */
.nav-dd-header{
  display:flex;align-items:center;gap:.65rem;
  padding:.65rem .75rem .6rem;
  border-bottom:1px solid var(--border);
  margin-bottom:.35rem;
}
.nav-dd-avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;flex-shrink:0;
  border:1.5px solid rgba(0,212,255,.35);
}
.nav-dd-info{display:flex;flex-direction:column;gap:.1rem;min-width:0;flex:1;}
.nav-dd-name{
  display:block;font-size:var(--s-1);font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav-dd-email{
  display:block;font-size:.65rem;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Dropdown items ── */
.nav-dd-item{
  display:flex;align-items:center;gap:.55rem;padding:.55rem .75rem;border-radius:9px;
  font-size:var(--s-1);font-weight:500;color:var(--muted);
  transition:background .15s,color .15s;cursor:pointer;white-space:nowrap;
}
.nav-dd-item:hover{background:rgba(255,255,255,.06);color:var(--text)}
.nav-dd-item svg{opacity:.6;flex-shrink:0;}.nav-dd-item:hover svg{opacity:1}
.nav-dd-item.is-signout:hover{background:rgba(255,45,120,.08);color:var(--accent2);}
.nav-dd-divider{height:1px;background:var(--border);margin:.35rem .75rem;}

/* ── Section label inside dropdown ── */
.nav-dd-section-label{
  font-size:.6rem;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);font-weight:600;
  padding:.4rem .75rem .2rem;opacity:.6;
}

@media(max-width:900px){
  .nav-center{display:none}
  .nav-right .nav-cta,.nav-right .nav-avatar-wrap{display:none !important;}
}

/* ══════════════════════════════════════════════════════════════
   MEGA MENU
══════════════════════════════════════════════════════════════ */
.mega-panel{
  position:fixed;top:var(--nav-h);left:0;width:100%;
  background:var(--mega-bg);
  border-top:2px solid rgba(0,212,255,.18);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:2.2rem clamp(1rem,5vw,3rem) 2.5rem;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  box-shadow:0 32px 80px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  z-index:500;display:none;opacity:0;transform:translateY(-6px);
  transition:opacity .22s ease,transform .22s ease;pointer-events:none;
}
.mega-panel.is-visible{
  display:block;opacity:1;transform:translateY(0);
  pointer-events:auto;animation:megaDrop .22s ease both;
}
@keyframes megaDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.mega-panel::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px;background:transparent;}

.mega-inner{max-width:1200px;margin:0 auto;display:grid;gap:1.5rem}
.mega-inner.c1{grid-template-columns:1fr}
.mega-inner.c2{grid-template-columns:1fr 1fr}
.mega-inner.c3{grid-template-columns:1fr 1fr 1fr}
.mega-col--empty{display:none !important;}

.mega-col h6{
  font-size:.62rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  font-weight:600;margin-bottom:.9rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);
}
.mega-link{display:flex;align-items:flex-start;gap:.75rem;padding:.65rem .75rem;border-radius:10px;transition:background .2s;margin-bottom:.2rem;}
.mega-link:hover{background:rgba(255,255,255,.06)}
.mega-link-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:1rem;}
.mega-link-text strong{display:block;font-size:var(--s-1);font-weight:600;color:var(--text);margin-bottom:.2rem}
.mega-link-text span{font-size:.72rem;color:var(--muted);line-height:1.4}
.mega-featured{
  background:linear-gradient(135deg,rgba(0,212,255,.1),rgba(109,40,217,.1));
  border:1px solid rgba(0,212,255,.2);border-radius:14px;padding:1.4rem;
  display:flex;flex-direction:column;justify-content:space-between;height:100%;
}
.mega-featured h5{font-size:var(--s0);font-weight:700;margin-bottom:.5rem;color:var(--text);}
.mega-featured p{font-size:.78rem;color:var(--muted);line-height:1.55;flex:1}
.mega-feat-cta{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-size:.78rem;font-weight:600;color:var(--accent);}
.mega-feat-cta svg{transition:transform .2s}
.mega-featured:hover .mega-feat-cta svg{transform:translateX(3px)}
@media(max-width:680px){.mega-inner.c3,.mega-inner.c2{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════
   HAMBURGER
══════════════════════════════════════════════════════════════ */
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:40px;height:40px;background:none;border:none;cursor:pointer;padding:.5rem;border-radius:8px;flex-shrink:0;}
.hamburger span{display:block;width:22px;height:2px;background:#f5f5f7;border-radius:2px;transition:all .3s;transform-origin:center;}
.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.is-open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:900px){.hamburger{display:flex}}

.mob-right-group{display:none;align-items:center;gap:6px;flex-shrink:0;}
@media(max-width:900px){
  .mob-right-group{display:flex;}
  .nav-right .nav-cta,.nav-right .nav-avatar-wrap{display:none !important;}
  .nav-left{gap:0;}
}

.mob-login-btn{
  display:none;align-items:center;
  background:var(--accent);color:#000;
  padding:.38rem .9rem;border-radius:100px;
  font-weight:700;font-size:.78rem;
  border:none;cursor:pointer;white-space:nowrap;
  transition:transform .2s,box-shadow .2s;flex-shrink:0;
}
.mob-login-btn:hover{transform:scale(1.04);box-shadow:0 0 18px rgba(0,212,255,.4)}
@media(max-width:900px){.mob-login-btn{display:inline-flex;}}

.mob-avatar-btn{width:34px;height:34px;border-radius:50%;border:2px solid rgba(0,212,255,.5);background:none;cursor:pointer;padding:0;overflow:hidden;flex-shrink:0;display:block;transition:border-color .2s,box-shadow .2s;}
.mob-avatar-btn:hover{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,255,.15);}
.mob-avatar-btn img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}

/* ══════════════════════════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════════════════════════ */
.mob-nav{
  position:fixed;top:var(--nav-h);left:0;width:100%;
  background:rgba(8,8,14,.99);border-bottom:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
  max-height:calc(100dvh - var(--nav-h));
  padding:1.5rem clamp(1rem,5vw,2rem) calc(env(safe-area-inset-bottom,0px) + 1.5rem);
  transform:translateY(-110%);opacity:0;
  transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .25s ease;
  z-index:550;pointer-events:none;
}
.mob-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto;}
@supports not (max-height:100dvh){.mob-nav{max-height:calc(100vh - var(--nav-h) - 80px);}}

.mob-user-strip{display:flex;align-items:center;gap:.75rem;padding:.9rem 1rem;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:12px;margin-bottom:1.25rem;}
.mob-user-strip img{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;box-shadow:0 0 0 1.5px var(--accent);}
.mob-user-info{display:flex;flex-direction:column;gap:.15rem;flex:1;min-width:0;}
.mob-user-info strong{font-size:var(--s-1);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mob-user-info span{font-size:.7rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mob-logout-link{margin-left:auto;font-size:.72rem;color:var(--accent2);flex-shrink:0;padding:.3rem .6rem;border:1px solid rgba(255,45,120,.25);border-radius:6px;white-space:nowrap;transition:background .2s;}
.mob-logout-link:hover{background:rgba(255,45,120,.08)}
.mob-sec{margin-bottom:1.5rem}
.mob-sec-title{font-size:.65rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.7rem;padding-bottom:.5rem;border-bottom:1px solid var(--border);}
.mob-link{display:flex;align-items:center;gap:.75rem;padding:.7rem .5rem;border-radius:10px;transition:background .2s;font-size:var(--s0);font-weight:500;color:var(--text);}
.mob-link:hover,.mob-link:active{background:rgba(255,255,255,.05)}
.mob-link-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0;}
.mob-cta-wrap{position:sticky;bottom:0;margin-top:auto;padding:1.25rem 0 .5rem;background:linear-gradient(to bottom,transparent 0%,rgba(8,8,14,.99) 30%);}
.mob-cta{display:flex;align-items:center;justify-content:center;gap:.4rem;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#000 !important;font-weight:700;font-size:var(--s0);padding:.9rem 1.5rem;border-radius:14px;transition:opacity .2s,transform .2s;}
.mob-cta:hover,.mob-cta:active{opacity:.88;transform:scale(.985)}
.mob-cta.mob-cta-dash{background:rgba(255,255,255,.07);color:var(--text) !important;border:1px solid var(--border);margin-bottom:.65rem;}
.mob-cta.mob-cta-dash:hover{background:rgba(255,255,255,.12)}

/* ══════════════════════════════════════════════════════════════
   AUTH POPUP
══════════════════════════════════════════════════════════════ */
.auth-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:1rem;opacity:0;pointer-events:none;transition:opacity .25s ease;}
.auth-overlay.is-open{opacity:1;pointer-events:auto;}
.auth-modal{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:2.2rem 2rem 2rem;position:relative;box-shadow:0 40px 80px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.04);transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.34,1.28,.64,1);}
.auth-overlay.is-open .auth-modal{transform:translateY(0) scale(1);}
.auth-close{position:absolute;top:1rem;right:1rem;width:32px;height:32px;background:rgba(255,255,255,.07);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:1.1rem;transition:background .2s,color .2s;}
.auth-close:hover{background:rgba(255,255,255,.14);color:var(--text)}
.auth-tabs{display:flex;gap:.3rem;background:rgba(255,255,255,.04);border-radius:12px;padding:.3rem;margin-bottom:1.8rem;}
.auth-tab{flex:1;text-align:center;padding:.55rem;border-radius:9px;font-size:var(--s-1);font-weight:600;color:var(--muted);cursor:pointer;border:none;background:none;transition:background .2s,color .2s;}
.auth-tab.active{background:var(--card);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.4);}
.auth-panel{display:none;}.auth-panel.active{display:block;}
.auth-title{font-size:var(--s2);font-weight:700;margin-bottom:.35rem;background:linear-gradient(100deg,var(--text),var(--muted));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.auth-subtitle{font-size:var(--s-1);color:var(--muted);margin-bottom:1.5rem;line-height:1.5}
.auth-field{margin-bottom:1rem;}
.auth-field label{display:block;font-size:.7rem;font-weight:600;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:.45rem;}
.auth-field input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:.75rem 1rem;color:var(--text);font-size:var(--s0);font-family:var(--font-b);outline:none;transition:border-color .2s,box-shadow .2s;}
.auth-field input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,255,.12);}
.auth-field input::placeholder{color:var(--muted);opacity:.6}
.auth-forgot{display:block;text-align:right;font-size:.72rem;color:var(--muted);margin-top:-.5rem;margin-bottom:1rem;transition:color .2s;}
.auth-forgot:hover{color:var(--accent)}
.auth-submit{width:100%;padding:.85rem;border-radius:12px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#000;font-weight:700;font-size:var(--s0);font-family:var(--font-b);display:flex;align-items:center;justify-content:center;gap:.4rem;transition:opacity .2s,transform .2s;margin-top:.5rem;}
.auth-submit:hover{opacity:.9;transform:scale(1.015);}.auth-submit:active{transform:scale(.99);}
.auth-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;}
.auth-msg{border-radius:10px;padding:.7rem 1rem;font-size:.8rem;margin-bottom:1rem;display:none;line-height:1.45;}
.auth-msg.error{background:rgba(255,45,120,.1);border:1px solid rgba(255,45,120,.25);color:#ff6b9d;}
.auth-msg.success{background:rgba(0,229,160,.1);border:1px solid rgba(0,229,160,.25);color:#00e5a0;}
.auth-msg.visible{display:block}


/* ════════════════════════════════════════════════════════════
   FRONT PAGE
════════════════════════════════════════════════════════════ */

/* ══ Testimonials Marquee ══ */
.tmarq-section {
    width: 100%;
    overflow: hidden;
    padding: 80px 0;
    background: var(--bg, #0a0a0f);
    /* Edge fade masks */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.tmarq-header {
    text-align: center;
    padding: 0 24px 56px;
    /* header sits outside the mask — rendered via wrapper below */
}
.tmarq-outer {
    width: 100%;
    overflow: hidden;
}
.tmarq-track {
    display: flex;
    gap: 20px;
    width: max-content;
    /* Pause on hover */
}
.tmarq-track:hover { animation-play-state: paused !important; }

/* Row 1 — scroll left (normal direction) */
.tmarq-row1 .tmarq-track {
    animation: marquee-left var(--tmarq-dur, 40s) linear infinite;
}
/* Row 2 — scroll right (reverse direction) */
.tmarq-row2 .tmarq-track {
    animation: marquee-right var(--tmarq-dur, 40s) linear infinite;
}
.tmarq-row2 { margin-top: 20px; }

@keyframes marquee-left  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes marquee-right { from { transform: translateX(-50%); } to { transform: translateX(0); }    }

/* ── Card ── */
.tmarq-card {
    flex: 0 0 340px;
    background: var(--card, #12121a);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 16px;
    padding: 26px 28px;
    transition: transform .25s, border-color .25s;
    cursor: default;
}
.tmarq-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0,212,255,.25);
}
.tmarq-stars { color: #ffc107; font-size: 13px; letter-spacing: 2px; margin-bottom: 14px; }
.tmarq-text  { font-size: .88rem; line-height: 1.7; color: var(--muted, #94a3b8); margin-bottom: 20px; }
.tmarq-author { display: flex; align-items: center; gap: 12px; }
.tmarq-avatar {
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700; color: #fff; flex-shrink: 0;
}
.tmarq-info h5 { font-size: .82rem; font-weight: 700; color: var(--fg, #f8fafc); margin: 0 0 2px; }
.tmarq-info span { font-size: .72rem; color: var(--muted, #94a3b8); }

/* ══ Blog Section ══ */
.fp-blog {
    padding: 100px 0;
    background: var(--bg-alt, #0d0d14);
}
.fp-blog-header {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 60px;
    padding: 0 24px;
}
.fp-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}
@media (max-width: 900px) { .fp-blog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fp-blog-grid { grid-template-columns: 1fr; } }

.fp-blog-card {
    background: var(--card, #12121a);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .28s cubic-bezier(.23,1,.32,1), border-color .28s, box-shadow .28s;
    text-decoration: none;
    color: inherit;
}
.fp-blog-card:hover {
    transform: translateY(-6px);
    border-color: rgba(0,212,255,.3);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.fp-blog-thumb {
    width: 100%;
    height: 200px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.fp-blog-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .5s ease;
}
.fp-blog-card:hover .fp-blog-thumb img { transform: scale(1.05); }
.fp-blog-thumb-gradient {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    position: relative;
}
.fp-blog-thumb-gradient::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,.5) 100%);
}
.fp-blog-tag {
    position: absolute;
    top: 14px; left: 14px;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 2;
}
.fp-blog-body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.fp-blog-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--fg, #f8fafc);
    line-height: 1.45;
    margin: 0 0 10px;
    font-family: var(--font-heading, inherit);
}
.fp-blog-excerpt {
    font-size: .83rem;
    color: var(--muted, #94a3b8);
    line-height: 1.65;
    flex: 1;
    margin: 0 0 20px;
}
.fp-blog-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    color: var(--muted, #94a3b8);
    border-top: 1px solid rgba(255,255,255,.06);
    padding-top: 16px;
    flex-wrap: wrap;
}
.fp-blog-meta-dot { opacity: .35; }
.fp-blog-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--accent, #00d4ff);
    text-decoration: none;
    letter-spacing: .3px;
    transition: gap .2s;
}
.fp-blog-card:hover .fp-blog-read-more { gap: 10px; }
.fp-blog-cta {
    text-align: center;
    margin-top: 52px;
}
.fp-blog-cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1.5px solid rgba(0,212,255,.5);
    border-radius: 50px;
    color: var(--accent, #00d4ff);
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s, color .2s, border-color .2s;
}
.fp-blog-cta a:hover {
    background: var(--accent, #00d4ff);
    color: #000;
    border-color: var(--accent, #00d4ff);
}
/* Blog emoji icons for gradient cards */
.fp-blog-emoji { font-size: 2.8rem; }


/* ════════════════════════════════════════════════════════════
   CONTACT PAGE
════════════════════════════════════════════════════════════ */

/* ═══ CONTACT PAGE — Dark premium aesthetic ═══ */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:wght@300;400;500&display=swap');

:root {
    --cp-bg:       #0a0a0f;
    --cp-surface:  #111118;
    --cp-card:     #16161f;
    --cp-border:   rgba(255,255,255,.07);
    --cp-accent:   #00d4ff;
    --cp-accent2:  #7c3aed;
    --cp-green:    #00e5a0;
    --cp-red:      #ff4d6d;
    --cp-text:     #f0f0f8;
    --cp-muted:    #7070a0;
    --cp-input-bg: #0e0e18;
    --cp-radius:   14px;
    --cp-font-h:   'Syne', sans-serif;
    --cp-font-b:   'DM Sans', sans-serif;
}

.cp-wrap * { box-sizing:border-box; margin:0; padding:0; }

.cp-wrap {
    font-family: var(--cp-font-b);
    background: var(--cp-bg);
    min-height: 100vh;
    color: var(--cp-text);
    padding: clamp(40px,6vw,100px) clamp(20px,4vw,60px);
}

/* ── Page header ── */
.cp-header {
    text-align: center;
    margin-bottom: clamp(40px,6vw,72px);
    position: relative;
}
.cp-header::before {
    content:'';
    position:absolute; top:-60px; left:50%; transform:translateX(-50%);
    width:500px; height:500px;
    background: radial-gradient(circle, rgba(0,212,255,.08) 0%, transparent 70%);
    pointer-events:none;
}
.cp-tag {
    display:inline-flex; align-items:center; gap:8px;
    background: rgba(0,212,255,.08); border:1px solid rgba(0,212,255,.2);
    color:var(--cp-accent); border-radius:50px; padding:6px 18px;
    font-size:.78rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    margin-bottom:20px;
}
.cp-tag-dot { width:6px; height:6px; background:var(--cp-accent); border-radius:50%; animation:cp-blink 1.4s ease infinite; }
@keyframes cp-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.cp-header h1 {
    font-family: var(--cp-font-h);
    font-size: clamp(2rem,5vw,3.6rem);
    font-weight: 800;
    line-height: 1.1;
    background: linear-gradient(135deg, #fff 30%, var(--cp-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 16px;
    text-align: center !important;
    width: 100%;
    display: block;
    margin: 14px auto;
}
.cp-header p { color:var(--cp-muted); font-size:1.05rem; max-width:480px; margin:0 auto; line-height:1.7; }

/* ── Layout ── */
.cp-layout {
    display:grid;
    grid-template-columns: 1fr 1.6fr;
    gap:clamp(24px,3vw,48px);
    max-width:1100px; margin:0 auto;
}
@media(max-width:768px){ .cp-layout{ grid-template-columns:1fr; } }

/* ── Info panel ── */
.cp-info {
    display:flex; flex-direction:column; gap:24px;
}
.cp-info-card {
    background:var(--cp-card); border:1px solid var(--cp-border);
    border-radius:var(--cp-radius); padding:24px;
    transition: border-color .3s;
}
.cp-info-card:hover { border-color:rgba(0,212,255,.2); }
.cp-info-card .ic-icon {
    width:42px; height:42px; border-radius:10px;
    background:rgba(0,212,255,.1); display:flex; align-items:center; justify-content:center;
    font-size:1.2rem; margin-bottom:14px;
}
.cp-info-card h4 { font-family:var(--cp-font-h); font-size:.9rem; font-weight:700; color:var(--cp-text); margin-bottom:6px; }
.cp-info-card p, .cp-info-card a { color:var(--cp-muted); font-size:.88rem; line-height:1.6; text-decoration:none; }
.cp-info-card a:hover { color:var(--cp-accent); }

.cp-hours { display:flex; flex-direction:column; gap:6px; }
.cp-hours-row { display:flex; justify-content:space-between; font-size:.83rem; }
.cp-hours-row span:last-child { color:var(--cp-green); font-weight:500; }

/* ── Social links ── */
.cp-social-links {
    display:flex; flex-wrap:wrap; gap:10px; margin-top:4px;
}
.cp-social-link {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(255,255,255,.04); border:1px solid var(--cp-border);
    border-radius:8px; padding:7px 14px; font-size:.82rem; color:var(--cp-muted);
    text-decoration:none; transition:all .2s; white-space:nowrap;
}
.cp-social-link:hover { background:rgba(0,212,255,.07); border-color:rgba(0,212,255,.25); color:var(--cp-accent); transform:translateY(-1px); }
.cp-social-link .sl-icon { font-size:.95rem; line-height:1; }

/* ── Map embed ── */
.cp-map-wrap {
    border-radius:12px; overflow:hidden;
    border:1px solid var(--cp-border);
    background:var(--cp-card);
    margin-top:0;
}
.cp-map-wrap iframe {
    width:100%; height:200px; display:block; border:none; filter:invert(.85) hue-rotate(180deg);
}
.cp-map-link {
    display:flex; align-items:center; gap:8px;
    padding:10px 16px; font-size:.82rem; color:var(--cp-muted);
    text-decoration:none; border-top:1px solid var(--cp-border);
    transition:color .2s;
}
.cp-map-link:hover { color:var(--cp-accent); }

/* ── Form card ── */
.cp-form-card {
    background:var(--cp-card); border:1px solid var(--cp-border);
    border-radius:var(--cp-radius); padding:clamp(24px,4vw,40px);
}

/* ── Field groups ── */
.cp-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:500px){ .cp-grid-2{ grid-template-columns:1fr; } }

.cp-field { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.cp-field:last-child { margin-bottom:0; }
.cp-field label {
    font-size:.78rem; font-weight:600; color:var(--cp-muted);
    text-transform:uppercase; letter-spacing:.06em;
}
.cp-field label .req { color:var(--cp-accent); margin-left:2px; }

.cp-input, .cp-select, .cp-textarea {
    background:var(--cp-input-bg); border:1.5px solid var(--cp-border);
    border-radius:10px; color:var(--cp-text); font-family:var(--cp-font-b);
    font-size:.95rem; padding:13px 16px; width:100%;
    transition: border-color .25s, box-shadow .25s;
    outline:none; appearance:none; -webkit-appearance:none;
}
.cp-input::placeholder, .cp-textarea::placeholder { color:rgba(112,112,160,.5); }
.cp-input:focus, .cp-select:focus, .cp-textarea:focus {
    border-color:var(--cp-accent); box-shadow:0 0 0 3px rgba(0,212,255,.1);
}
.cp-input.cp-error, .cp-select.cp-error, .cp-textarea.cp-error {
    border-color:var(--cp-red) !important; box-shadow:0 0 0 3px rgba(255,77,109,.1) !important;
}
.cp-textarea { min-height:110px; resize:vertical; }

/* Select arrow */
.cp-select-wrap { position:relative; }
.cp-select-wrap::after {
    content:'▾'; position:absolute; right:15px; top:50%; transform:translateY(-50%);
    color:var(--cp-muted); pointer-events:none; font-size:.85rem;
}
.cp-select { padding-right:36px; cursor:pointer; }
.cp-select option { background:#16161f; color:var(--cp-text); }

/* ── Package picker ── */
.cp-packages {
    display:none; margin-bottom:18px;
    animation: cp-fadein .3s ease;
}
@keyframes cp-fadein { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.cp-packages-label {
    font-size:.78rem; font-weight:600; color:var(--cp-muted);
    text-transform:uppercase; letter-spacing:.06em; margin-bottom:10px;
}
.cp-pkg-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
.cp-pkg-card {
    border:1.5px solid var(--cp-border); border-radius:12px; padding:16px 14px;
    cursor:pointer; transition:all .2s; position:relative; overflow:hidden;
    background:var(--cp-input-bg);
}
.cp-pkg-card:hover { border-color:rgba(0,212,255,.3); transform:translateY(-2px); }
.cp-pkg-card.selected { border-color:var(--cp-accent); background:rgba(0,212,255,.06); }
.cp-pkg-card.selected::before {
    content:'✓'; position:absolute; top:8px; right:10px;
    font-size:.75rem; font-weight:700; color:var(--cp-accent);
}
.cp-pkg-name  { font-family:var(--cp-font-h); font-size:.88rem; font-weight:700; color:var(--cp-text); margin-bottom:4px; }
.cp-pkg-price { font-size:1.1rem; font-weight:700; color:var(--cp-accent); margin-bottom:6px; }
.cp-pkg-desc  { font-size:.75rem; color:var(--cp-muted); line-height:1.5; }

/* ── CAPTCHA ── */
.cp-captcha-row {
    display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    background:rgba(124,58,237,.07); border:1.5px solid rgba(124,58,237,.2);
    border-radius:10px; padding:14px 18px; margin-bottom:18px;
}
.cp-captcha-q {
    font-family:var(--cp-font-h); font-size:1.2rem; font-weight:700;
    color:var(--cp-text); white-space:nowrap;
    background:var(--cp-input-bg); border-radius:8px; padding:8px 14px;
    border:1.5px solid var(--cp-border); letter-spacing:.05em;
}
.cp-captcha-eq { color:var(--cp-muted); font-size:1.1rem; font-weight:600; }
.cp-captcha-input {
    background:var(--cp-input-bg); border:1.5px solid var(--cp-border);
    border-radius:8px; color:var(--cp-text); font-family:var(--cp-font-h);
    font-size:1rem; font-weight:700; padding:10px 14px; width:90px;
    outline:none; text-align:center; transition:border-color .25s, box-shadow .25s;
}
.cp-captcha-input:focus { border-color:var(--cp-accent2); box-shadow:0 0 0 3px rgba(124,58,237,.15); }
.cp-captcha-input.cp-error { border-color:var(--cp-red) !important; box-shadow:0 0 0 3px rgba(255,77,109,.12) !important; }
.cp-captcha-hint { font-size:.78rem; color:var(--cp-muted); line-height:1.5; }

/* ── Error message ── */
.cp-field-err { font-size:.77rem; color:var(--cp-red); margin-top:4px; display:none; }
.cp-field-err.show { display:block; }

/* ── Submit button ── */
.cp-submit {
    width:100%; padding:16px; border-radius:12px; border:none; cursor:pointer;
    font-family:var(--cp-font-h); font-size:1rem; font-weight:700; letter-spacing:.03em;
    background:linear-gradient(135deg,var(--cp-accent),var(--cp-accent2));
    color:#fff; position:relative; overflow:hidden;
    transition:transform .2s, box-shadow .2s; margin-top:4px;
}
.cp-submit:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(0,212,255,.25); }
.cp-submit:active { transform:translateY(0); }
.cp-submit::before {
    content:''; position:absolute; inset:0;
    background:linear-gradient(135deg,rgba(255,255,255,.15),transparent);
    opacity:0; transition:opacity .2s;
}
.cp-submit:hover::before { opacity:1; }

/* ── Success state ── */
.cp-success {
    display:none; text-align:center; padding:48px 24px;
    animation:cp-fadein .5s ease;
}
.cp-success-icon {
    width:70px; height:70px; background:rgba(0,229,160,.12);
    border:2px solid rgba(0,229,160,.3); border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:2rem; margin:0 auto 20px;
}
.cp-success h3 { font-family:var(--cp-font-h); font-size:1.5rem; font-weight:700; color:var(--cp-text); margin-bottom:10px; }
.cp-success p  { color:var(--cp-muted); font-size:.95rem; line-height:1.7; }
.cp-success-btn {
    display:inline-block; margin-top:24px; padding:12px 28px;
    background:rgba(0,212,255,.1); border:1.5px solid rgba(0,212,255,.25);
    color:var(--cp-accent); border-radius:50px; font-size:.88rem; font-weight:600;
    cursor:pointer; text-decoration:none; transition:all .2s;
}
.cp-success-btn:hover { background:rgba(0,212,255,.2); }

/* ── Global error banner ── */
.cp-form-errors {
    background:rgba(255,77,109,.08); border:1.5px solid rgba(255,77,109,.25);
    border-radius:10px; padding:12px 18px; margin-bottom:20px;
    color:#ff8099; font-size:.88rem; display:none;
}
.cp-form-errors.show { display:block; }

/* ── Divider inside card ── */
.cp-card-divider {
    border:none; border-top:1px solid var(--cp-border); margin:18px 0;
}

/* ── Extra info row ── */
.cp-extra-row {
    display:flex; align-items:flex-start; gap:10px; margin-top:4px;
}
.cp-extra-label {
    font-family:var(--cp-font-h); font-size:.8rem; font-weight:700;
    color:var(--cp-muted); white-space:nowrap; padding-top:1px;
}
.cp-extra-value { color:var(--cp-text); font-size:.88rem; line-height:1.6; }


/* ════════════════════════════════════════════════════════════
   FAKE ORDER CHECKER
════════════════════════════════════════════════════════════ */

.foc-wrap*,.foc-wrap *::before,.foc-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.foc-wrap{
  --foc-bg:#06060f;
  --foc-light:#f0f0f5;
  --foc-muted:rgba(160,160,200,.65);
  --foc-accent:#ff2d55;
  --foc-accent2:#ff6b35;
  --foc-purple:#6d28d9;
  --foc-gold:#ffb800;
  --foc-green:#22c55e;
  --foc-red:#ff2d55;
  --foc-orange:#ff6b35;
  --foc-border:rgba(255,255,255,.07);
  --foc-card:rgba(255,255,255,.025);
  --foc-hfont:var(--font-heading,'Bebas Neue','Syne',sans-serif);
  --foc-bfont:var(--font-body,'DM Sans','Inter',sans-serif);
  font-family:var(--foc-bfont);
  background:var(--foc-bg);
  color:var(--foc-light);
  position:relative;
  overflow-x:hidden;
  isolation:isolate
}

/* BG LAYER */
.foc-bg-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.foc-grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(255,45,85,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,45,85,.04) 1px,transparent 1px);background-size:60px 60px;animation:focPT_grid 22s linear infinite}
@keyframes focPT_grid{to{transform:translate(60px,60px)}}
.foc-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.32}
.foc-orb--1{width:560px;height:560px;background:radial-gradient(circle,#6d28d9 0%,transparent 70%);top:-18%;left:-12%;animation:focPT_o1 10s ease-in-out infinite}
.foc-orb--2{width:440px;height:440px;background:radial-gradient(circle,#ff2d55 0%,transparent 70%);bottom:-12%;right:-10%;animation:focPT_o2 12s ease-in-out infinite}
.foc-orb--3{width:300px;height:300px;background:radial-gradient(circle,#ff6b35 0%,transparent 70%);top:55%;left:55%;animation:focPT_o3 8s ease-in-out infinite}
@keyframes focPT_o1{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,35px)}}
@keyframes focPT_o2{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,-28px)}}
@keyframes focPT_o3{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,22px)}}
.foc-canvas{position:absolute;inset:0}

/* LAYOUT */
.foc-container{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.foc-section{padding:100px 80px;position:relative;z-index:2}
.foc-txt-c{text-align:center}
.foc-dim{color:rgba(255,255,255,.4)!important}
.foc-light{color:var(--foc-light)!important}
.foc-red{color:var(--foc-red)!important}
.foc-green{color:var(--foc-green)!important}
.foc-orange{color:var(--foc-orange)!important}

/* REVEAL */
.foc-reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease}
.foc-reveal.foc-in{opacity:1;transform:translateY(0)}

/* EYEBROW */
.foc-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--foc-accent);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.foc-eyebrow::before{content:'';display:inline-block;width:24px;height:2px;background:var(--foc-accent)}
.foc-eyebrow--center{justify-content:center}
.foc-eyebrow--center::before{display:none}
.foc-eyebrow--gold{color:var(--foc-gold)}
.foc-eyebrow--gold::before{background:var(--foc-gold)}
.foc-eyebrow--red{color:var(--foc-red)}
.foc-eyebrow--red::before{background:var(--foc-red)}

/* TYPOGRAPHY */
.foc-section-title{font-family:var(--foc-hfont);font-size:clamp(42px,5vw,72px);line-height:.95;color:#0d0d0d;margin-bottom:16px}
.foc-section-title.foc-light{color:var(--foc-light)}
.foc-section-sub{font-size:16px;color:var(--foc-muted);line-height:1.65;max-width:500px;margin-bottom:56px}
.foc-section-sub.foc-txt-c{margin-left:auto;margin-right:auto}

/* ═══════════════════════════ HERO ═══════════════════════════ */
.foc-hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:80px;position:relative;z-index:2}
.foc-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(255,45,85,.12);border:1px solid rgba(255,45,85,.3);color:var(--foc-accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:2px;width:fit-content;margin-bottom:28px;animation:focPT_up .6s ease both}
.foc-hero-title{font-family:var(--foc-hfont);font-size:clamp(54px,7vw,100px);line-height:.9;color:var(--foc-light);margin-bottom:8px;animation:focPT_up .6s .1s ease both}
.foc-hero-title span{background:linear-gradient(90deg,var(--foc-accent),var(--foc-accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.foc-hero-sub{font-style:italic;font-size:clamp(16px,2vw,22px);color:var(--foc-muted);margin-bottom:24px;line-height:1.4;max-width:420px;animation:focPT_up .6s .2s ease both}
.foc-hero-desc{font-size:15px;color:rgba(160,160,200,.6);line-height:1.75;max-width:400px;margin-bottom:36px;animation:focPT_up .6s .3s ease both}
.foc-cta-row{display:flex;align-items:center;gap:24px;animation:focPT_up .6s .4s ease both;margin-bottom:24px}
.foc-btn-primary{background:linear-gradient(90deg,var(--foc-accent),var(--foc-accent2));color:#fff!important;font-weight:700;font-size:15px;padding:15px 34px;border:none;border-radius:3px;text-decoration:none!important;display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 28px rgba(255,45,85,.3);transition:opacity .2s,transform .2s,box-shadow .2s}
.foc-btn-primary:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 0 40px rgba(255,45,85,.5)}
.foc-btn-ghost{color:var(--foc-muted)!important;font-size:14px;font-weight:500;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid rgba(160,160,200,.3);padding-bottom:2px;transition:color .2s,border-color .2s}
.foc-btn-ghost:hover{color:var(--foc-accent)!important;border-color:var(--foc-accent)}
.foc-trust-row{display:flex;gap:20px;flex-wrap:wrap;animation:focPT_up .6s .5s ease both}
.foc-trust-row span{font-size:12px;color:rgba(255,255,255,.35);font-weight:500}

/* HERO RIGHT */
.foc-hero-right{display:flex;align-items:center;justify-content:center;animation:focPT_right .8s .3s ease both}
.foc-mockup-wrap{position:relative;width:100%;max-width:520px}
.foc-float-badge{position:absolute;z-index:3;background:rgba(5,5,20,.9);border:1px solid rgba(255,45,85,.3);backdrop-filter:blur(10px);color:var(--foc-light);padding:12px 16px;border-radius:8px;font-size:12px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
.foc-float--tr{top:-20px;right:-30px;animation:focPT_fb 3s ease-in-out infinite}
.foc-float--bl{bottom:20px;left:-40px;animation:focPT_fb 3s 1.5s ease-in-out infinite}
.foc-float-num{font-family:var(--foc-hfont);font-size:22px;display:block;line-height:1;color:var(--foc-accent)}
.foc-float-num.foc-red{color:var(--foc-red)}
@keyframes focPT_fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* BROWSER MOCKUP */
.foc-browser{background:#0d0d1a;border-radius:12px;overflow:hidden;box-shadow:20px 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,45,85,.1);transform:perspective(1000px) rotateY(-6deg) rotateX(2deg);transition:transform .4s ease;border:1px solid rgba(255,45,85,.1)}
.foc-browser:hover{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg)}
.foc-browser-bar{background:#0a0a14;padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.05)}
.foc-dots{display:flex;gap:6px}
.foc-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.foc-dot:nth-child(1){background:#ff5f57}.foc-dot:nth-child(2){background:#febc2e}.foc-dot:nth-child(3){background:#28c840}
.foc-url-bar{flex:1;background:rgba(255,255,255,.05);border-radius:4px;padding:5px 12px;font-size:11px;color:#666}
.foc-browser-content{background:#fff}
.foc-admin-header{background:#1a1a2e;padding:14px 18px;border-bottom:1px solid rgba(255,45,85,.2)}
.foc-admin-title{font-weight:700;font-size:13px;color:#fff}
.foc-admin-sub{font-size:10px;color:rgba(255,255,255,.4);margin-top:2px}
.foc-check-panel{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.foc-check-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:6px;border:1px solid transparent}
.foc-check-blocked{background:#fff5f7;border-color:#ffd6e0}
.foc-check-dup{background:#fff8f0;border-color:#ffe0c2}
.foc-check-invalid{background:#fffbf0;border-color:#ffefc2}
.foc-check-ip{background:#fff5f7;border-color:#ffd6e0}
.foc-check-ok{background:#f0fdf4;border-color:#bbf7d0}
.foc-check-icon{font-size:14px;width:22px;text-align:center;flex-shrink:0}
.foc-check-label{font-size:10px;font-weight:700;color:#222}
.foc-check-val{font-size:9px;color:#888;margin-top:1px}
.foc-check-badge{margin-left:auto;font-size:8px;font-weight:800;padding:3px 7px;border-radius:3px;letter-spacing:.06em;flex-shrink:0}
.foc-badge--red{background:#ff2d55;color:#fff}
.foc-badge--orange{background:#ff6b35;color:#fff}
.foc-badge--yellow{background:#ffb800;color:#000}
.foc-badge--green{background:#22c55e;color:#fff}
.foc-admin-footer{background:#f8f8f8;border-top:1px solid #eee;padding:10px 18px;display:flex;gap:20px}
.foc-af-item{display:flex;align-items:center;gap:6px;font-size:10px;color:#666;font-weight:600}
.foc-af-num{font-family:var(--foc-hfont);font-size:20px;line-height:1}

/* ═══════════════════════════ STATS ═══════════════════════════ */
.foc-stats{background:rgba(0,0,0,.45);border-top:1px solid var(--foc-border);border-bottom:1px solid var(--foc-border);padding:40px 80px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2}
.foc-stat-item{text-align:center;padding:20px;border-right:1px solid var(--foc-border)}
.foc-stat-item:last-child{border-right:none}
.foc-stat-num{font-family:var(--foc-hfont);font-size:64px;line-height:1;color:var(--foc-accent);display:block;letter-spacing:.02em}
.foc-stat-label{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}

/* ═══════════════════════════ FEATURES ═══════════════════════════ */
.foc-features-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:8px}
.foc-feat-card{background:var(--foc-card);border:1px solid var(--foc-border);padding:36px 30px;position:relative;overflow:hidden;transition:transform .3s,background .3s}
.foc-feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--foc-accent),var(--foc-accent2));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.foc-feat-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.05)}
.foc-feat-card:hover::before{transform:scaleX(1)}
.foc-feat--wide{grid-column:1/-1}
.foc-feat--primary{background:rgba(255,45,85,.05);border-color:rgba(255,45,85,.15)}
.foc-feat--primary::before{transform:scaleX(1)}
.foc-feat-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.foc-feat-icon{width:50px;height:50px;background:rgba(255,45,85,.1);border:1px solid rgba(255,45,85,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px}
.foc-unlocked{font-size:11px;font-weight:700;color:var(--foc-green);letter-spacing:.05em}
.foc-feat-title{font-family:var(--foc-hfont);font-size:22px;color:var(--foc-light);margin-bottom:10px}
.foc-feat-desc{font-size:13px;color:var(--foc-muted);line-height:1.65;margin-bottom:16px}
.foc-feat-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.foc-feat-list li{font-size:12px;color:rgba(255,255,255,.5);padding-left:16px;position:relative;line-height:1.5}
.foc-feat-list li::before{content:'→';position:absolute;left:0;color:var(--foc-accent);font-size:10px}
.foc-feat-tag{display:inline-block;font-size:11px;font-weight:700;color:var(--foc-accent);letter-spacing:.08em;text-transform:uppercase}

/* ORDER COLUMN DEMO TABLE */
.foc-column-demo{margin:20px 0 18px;border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden}
.foc-col-table{font-size:11px}
.foc-col-header{display:grid;grid-template-columns:60px 1fr 1fr 100px 1fr;gap:8px;padding:8px 14px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.4);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.06)}
.foc-col-row{display:grid;grid-template-columns:60px 1fr 1fr 100px 1fr;gap:8px;padding:10px 14px;align-items:center;border-bottom:1px solid rgba(255,255,255,.04);color:rgba(255,255,255,.6)}
.foc-col-row:last-child{border-bottom:none}
.foc-col-row--flagged{background:rgba(255,45,85,.06)}
.foc-status-badge{font-size:9px;font-weight:700;padding:3px 8px;border-radius:3px;display:inline-block}
.foc-s-proc{background:rgba(109,40,217,.2);color:#a78bfa}
.foc-s-hold{background:rgba(255,107,53,.2);color:#ff6b35}
.foc-s-comp{background:rgba(34,197,94,.2);color:#22c55e}
.foc-action-btns{display:flex;gap:5px}
.foc-action-btn{font-size:9px;font-weight:700;padding:4px 8px;border-radius:3px;border:none;cursor:default;letter-spacing:.03em}
.foc-action--phone{background:rgba(255,45,85,.15);color:var(--foc-accent);border:1px solid rgba(255,45,85,.3)}
.foc-action--ip{background:rgba(109,40,217,.15);color:#a78bfa;border:1px solid rgba(109,40,217,.3)}
.foc-action--active{background:var(--foc-accent)!important;color:#fff!important}

/* ═══════════════════════════ HOW IT WORKS ═══════════════════════════ */
.foc-funnel-section{background:rgba(0,0,0,.5);border-top:1px solid var(--foc-border);border-bottom:1px solid var(--foc-border);padding:100px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2;overflow:hidden}
.foc-funnel-section::after{content:'BLOCK';position:absolute;right:-60px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--foc-hfont);font-size:140px;color:rgba(255,255,255,.02);letter-spacing:.2em;pointer-events:none;user-select:none}
.foc-funnel-steps{display:flex;flex-direction:column}
.foc-funnel-step{display:flex;align-items:flex-start;gap:20px;padding:22px 26px;border:1px solid var(--foc-border);transition:background .3s}
.foc-funnel-step:not(:last-child){border-bottom:none}
.foc-funnel-step:hover{background:rgba(255,45,85,.04)}
.foc-fnum{font-family:var(--foc-hfont);font-size:38px;line-height:1;color:rgba(255,255,255,.08);min-width:38px}
.foc-ftitle{font-weight:700;color:var(--foc-light);font-size:15px;margin-bottom:5px}
.foc-fdesc{font-size:13px;color:rgba(255,255,255,.4);line-height:1.6}
.foc-pill{display:inline-block;background:var(--foc-accent);color:#fff;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:8px;letter-spacing:.05em;text-transform:uppercase}

/* ═══════════════════════════ PRICING ═══════════════════════════ */
.foc-pricing-top{border-top:1px solid var(--foc-border);border-bottom:1px solid var(--foc-border)}
.foc-pricing-top .foc-section-title{color:var(--foc-light)}
.foc-shortcode-wrap{margin-top:48px}

/* ═══════════════════════════ TESTIMONIALS ═══════════════════════════ */
.foc-testimonials{background:rgba(0,0,0,.5);border-top:1px solid var(--foc-border);padding:100px 80px;position:relative;z-index:2}
.foc-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.foc-testi-card{background:rgba(255,255,255,.03);border:1px solid var(--foc-border);padding:30px;border-radius:4px;transition:background .3s}
.foc-testi-card:hover{background:rgba(255,255,255,.06)}
.foc-result-badge{display:inline-block;background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.25);color:var(--foc-gold);font-size:11px;font-weight:700;padding:4px 10px;border-radius:3px;margin-bottom:14px}
.foc-stars{color:var(--foc-gold);font-size:12px;margin-bottom:14px}
.foc-testi-quote{font-size:15px;color:rgba(255,255,255,.8);line-height:1.65;margin-bottom:22px;font-style:italic}
.foc-testi-author{display:flex;align-items:center;gap:12px}
.foc-testi-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--foc-accent),var(--foc-purple));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.foc-testi-name{font-weight:700;color:var(--foc-light);font-size:13px}
.foc-testi-role{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px}

/* ═══════════════════════════ FINALE ═══════════════════════════ */
.foc-finale{padding:120px 80px;text-align:center;position:relative;z-index:2;background:linear-gradient(135deg,rgba(255,45,85,.07),rgba(109,40,217,.07));border-top:1px solid rgba(255,45,85,.15);overflow:hidden}
.foc-finale::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,.012) 30px,rgba(255,255,255,.012) 60px)}
.foc-finale-title{font-family:var(--foc-hfont);font-size:clamp(48px,7vw,96px);line-height:.95;background:linear-gradient(90deg,var(--foc-accent),var(--foc-accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;position:relative}
.foc-finale-sub{font-size:20px;color:rgba(255,255,255,.5);margin-bottom:44px;font-style:italic;position:relative}
.foc-finale-btn{background:linear-gradient(90deg,var(--foc-accent),var(--foc-accent2));color:#fff!important;font-weight:700;font-size:16px;padding:18px 48px;border:none;border-radius:3px;text-decoration:none!important;display:inline-flex;align-items:center;gap:10px;box-shadow:0 0 40px rgba(255,45,85,.3);transition:opacity .2s,transform .2s;position:relative}
.foc-finale-btn:hover{opacity:.88;transform:translateY(-2px)}
.foc-guarantee{margin-top:24px;font-size:13px;color:rgba(255,255,255,.4);position:relative}

/* KEYFRAMES */
@keyframes focPT_up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes focPT_right{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}

/* ═══════════════════════════ RESPONSIVE ═══════════════════════════ */
@media(max-width:1024px){
  .foc-hero{grid-template-columns:1fr;min-height:auto;padding:60px 40px;gap:40px}
  .foc-stats{grid-template-columns:repeat(2,1fr);padding:40px}
  .foc-section{padding:60px 40px}
  .foc-features-grid{grid-template-columns:1fr}
  .foc-feat--wide{grid-column:auto}
  .foc-funnel-section{grid-template-columns:1fr;padding:60px 40px;gap:40px}
  .foc-testi-grid{grid-template-columns:1fr 1fr}
  .foc-testimonials,.foc-finale{padding:60px 40px}
}
@media(max-width:640px){
  .foc-hero,.foc-section,.foc-funnel-section,.foc-testimonials,.foc-finale,.foc-pricing-top{padding:48px 24px}
  .foc-stats{grid-template-columns:1fr 1fr;padding:32px 24px}
  .foc-testi-grid{grid-template-columns:1fr}
  .foc-browser{transform:none!important}
  .foc-cta-row{flex-direction:column;align-items:flex-start;gap:16px}
  .foc-float--tr,.foc-float--bl{display:none}
  .foc-col-header,.foc-col-row{grid-template-columns:50px 1fr 80px;font-size:10px}
  .foc-col-header span:nth-child(2),.foc-col-row span:nth-child(2),
  .foc-col-header span:nth-child(3),.foc-col-row span:nth-child(3){display:none}
}


/* ════════════════════════════════════════════════════════════
   FUNNELO PAGE TEMPLATE
════════════════════════════════════════════════════════════ */

.fo-wrap*,.fo-wrap *::before,.fo-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.fo-wrap{--fo-bg:#060610;--fo-light:#f0f0f5;--fo-muted:rgba(160,160,200,.65);--fo-accent:#00d4ff;--fo-purple:#6d28d9;--fo-orange:#ff4d1c;--fo-gold:#ffb800;--fo-green:#22c55e;--fo-border:rgba(255,255,255,.07);--fo-card:rgba(255,255,255,.025);--fo-hfont:var(--font-heading,'Bebas Neue','Syne',sans-serif);--fo-bfont:var(--font-body,'DM Sans','Inter',sans-serif);font-family:var(--fo-bfont);background:var(--fo-bg);color:var(--fo-light);position:relative;overflow-x:hidden;isolation:isolate}
.fo-bg-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.fo-grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);background-size:60px 60px;animation:foPT_grid 22s linear infinite}
@keyframes foPT_grid{to{transform:translate(60px,60px)}}
.fo-orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
.fo-orb--1{width:560px;height:560px;background:radial-gradient(circle,#6d28d9 0%,transparent 70%);top:-18%;left:-12%;animation:foPT_o1 10s ease-in-out infinite}
.fo-orb--2{width:440px;height:440px;background:radial-gradient(circle,#00d4ff 0%,transparent 70%);bottom:-12%;right:-10%;animation:foPT_o2 12s ease-in-out infinite}
.fo-orb--3{width:300px;height:300px;background:radial-gradient(circle,#ff2d78 0%,transparent 70%);top:55%;left:55%;animation:foPT_o3 8s ease-in-out infinite}
@keyframes foPT_o1{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,35px)}}
@keyframes foPT_o2{0%,100%{transform:translate(0,0)}50%{transform:translate(-38px,-28px)}}
@keyframes foPT_o3{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,22px)}}
.fo-canvas{position:absolute;inset:0}
.fo-container{max-width:1200px;margin:0 auto;position:relative;z-index:2}
.fo-section{padding:100px 80px;position:relative;z-index:2}
.fo-txt-c{text-align:center}
.fo-dim{color:rgba(255,255,255,.4)!important}
.fo-reveal{opacity:0;transform:translateY(36px);transition:opacity .7s ease,transform .7s ease}
.fo-reveal.fo-in{opacity:1;transform:translateY(0)}
.fo-eyebrow{font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--fo-accent);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.fo-eyebrow::before{content:'';display:inline-block;width:24px;height:2px;background:var(--fo-accent)}
.fo-eyebrow--center{justify-content:center}
.fo-eyebrow--center::before{display:none}
.fo-eyebrow--gold{color:var(--fo-gold)}
.fo-eyebrow--gold::before{background:var(--fo-gold)}
.fo-section-title{font-family:var(--fo-hfont);font-size:clamp(42px,5vw,72px);line-height:.95;color:#0d0d0d;margin-bottom:16px}
.fo-section-title.fo-light{color:var(--fo-light)}
.fo-section-sub{font-size:16px;color:var(--fo-muted);line-height:1.65;max-width:500px;margin-bottom:56px}
.fo-section-sub.fo-txt-c{margin-left:auto;margin-right:auto}

/* HERO */
.fo-hero{min-height:100vh;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;padding:80px;position:relative;z-index:2}
.fo-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);color:var(--fo-accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:2px;width:fit-content;margin-bottom:28px;animation:foPT_up .6s ease both}
.fo-hero-title{font-family:var(--fo-hfont);font-size:clamp(64px,8vw,112px);line-height:.9;color:var(--fo-light);margin-bottom:8px;animation:foPT_up .6s .1s ease both}
.fo-hero-title span{background:linear-gradient(90deg,var(--fo-accent),var(--fo-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block}
.fo-hero-sub{font-style:italic;font-size:clamp(16px,2vw,22px);color:var(--fo-muted);margin-bottom:24px;line-height:1.4;max-width:420px;animation:foPT_up .6s .2s ease both}
.fo-hero-desc{font-size:15px;color:rgba(160,160,200,.6);line-height:1.75;max-width:400px;margin-bottom:44px;animation:foPT_up .6s .3s ease both}
.fo-cta-row{display:flex;align-items:center;gap:24px;animation:foPT_up .6s .4s ease both}
.fo-btn-primary{background:linear-gradient(90deg,var(--fo-accent),var(--fo-purple));color:#fff!important;font-weight:700;font-size:15px;padding:15px 34px;border:none;border-radius:3px;text-decoration:none!important;display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 28px rgba(0,212,255,.3);transition:opacity .2s,transform .2s,box-shadow .2s}
.fo-btn-primary:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 0 40px rgba(0,212,255,.5)}
.fo-btn-ghost{color:var(--fo-muted)!important;font-size:14px;font-weight:500;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid rgba(160,160,200,.3);padding-bottom:2px;transition:color .2s,border-color .2s}
.fo-btn-ghost:hover{color:var(--fo-accent)!important;border-color:var(--fo-accent)}
.fo-hero-right{display:flex;align-items:center;justify-content:center;animation:foPT_right .8s .3s ease both}
.fo-mockup-wrap{position:relative;width:100%;max-width:520px}
.fo-float-badge{position:absolute;z-index:3;background:rgba(5,5,20,.9);border:1px solid rgba(0,212,255,.3);backdrop-filter:blur(10px);color:var(--fo-light);padding:12px 16px;border-radius:8px;font-size:12px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);white-space:nowrap}
.fo-float--tr{top:-20px;right:-30px;animation:foPT_fb 3s ease-in-out infinite}
.fo-float--bl{bottom:20px;left:-40px;animation:foPT_fb 3s 1.5s ease-in-out infinite}
.fo-float-num{font-family:var(--fo-hfont);font-size:22px;display:block;line-height:1;color:var(--fo-accent)}
@keyframes foPT_fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.fo-browser{background:#0d0d1a;border-radius:12px;overflow:hidden;box-shadow:20px 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(0,212,255,.1);transform:perspective(1000px) rotateY(-6deg) rotateX(2deg);transition:transform .4s ease;border:1px solid rgba(0,212,255,.1)}
.fo-browser:hover{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg)}
.fo-browser-bar{background:#0a0a14;padding:10px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(255,255,255,.05)}
.fo-dots{display:flex;gap:6px}
.fo-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.fo-dot:nth-child(1){background:#ff5f57}.fo-dot:nth-child(2){background:#febc2e}.fo-dot:nth-child(3){background:#28c840}
.fo-url-bar{flex:1;background:rgba(255,255,255,.05);border-radius:4px;padding:5px 12px;font-size:11px;color:#666}
.fo-browser-content{background:#fff}
.fo-checkout-top{background:#fff;padding:16px 20px 14px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between}
.fo-checkout-logo{font-family:var(--fo-hfont);font-size:20px;color:#0d0d0d;letter-spacing:.05em}
.fo-checkout-steps{display:flex;gap:4px;align-items:center}
.fo-cs{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.fo-cs--active{background:#ff4d1c;color:#fff}.fo-cs--done{background:#22c55e;color:#fff}.fo-cs--idle{background:#e5e5e5;color:#999}
.fo-cs-line{width:18px;height:2px;background:#e5e5e5}
.fo-checkout-body{display:grid;grid-template-columns:1fr 190px}
.fo-checkout-form{padding:16px 16px 16px 20px}
.fo-form-label{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#999;margin-bottom:10px}
.fo-form-row{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px}
.fo-field{background:#fff;border:1px solid #e0e0e0;border-radius:5px;padding:8px 10px;font-size:10px;color:#333}
.fo-field--focus{border-color:#ff4d1c}.fo-field--full{grid-column:1/-1}
.fo-pay-btn{display:block;width:100%;background:#ff4d1c;color:#fff;border-radius:5px;padding:10px;font-size:12px;font-weight:700;margin-top:10px;text-align:center}
.fo-order-summary{background:#fff;border-left:1px solid #eee;padding:16px 14px}
.fo-order-item{display:flex;gap:8px;margin-bottom:12px}
.fo-item-img{width:40px;height:40px;border-radius:5px;background:linear-gradient(135deg,#fff5f2,#ffe8e0);border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.fo-item-name{font-size:10px;font-weight:600;color:#222;line-height:1.3}
.fo-item-price{font-size:11px;font-weight:700;color:#ff4d1c;margin-top:2px}
.fo-order-totals{border-top:1px solid #eee;padding-top:10px;font-size:10px;color:#666}
.fo-total-row{display:flex;justify-content:space-between;margin-bottom:5px}
.fo-total-grand{font-weight:700;font-size:12px;color:#111;margin-top:6px;border-top:1px solid #eee;padding-top:6px}
.fo-green{color:#22c55e!important}
.fo-trust-strip{background:#f0fdf4;border-top:1px solid #bbf7d0;padding:7px 20px;display:flex;align-items:center;gap:14px}
.fo-trust-item{display:flex;align-items:center;gap:4px;font-size:9px;font-weight:600;color:#166534}

/* STATS */
.fo-stats{background:rgba(0,0,0,.45);border-top:1px solid var(--fo-border);border-bottom:1px solid var(--fo-border);padding:40px 80px;display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2}
.fo-stat-item{text-align:center;padding:20px;border-right:1px solid var(--fo-border)}
.fo-stat-item:last-child{border-right:none}
.fo-stat-num{font-family:var(--fo-hfont);font-size:64px;line-height:1;color:var(--fo-accent);display:block;letter-spacing:.02em}
.fo-stat-label{font-size:12px;color:rgba(255,255,255,.4);margin-top:4px}

/* PRICING */
.fo-pricing-top{border-top:1px solid var(--fo-border);border-bottom:1px solid var(--fo-border)}
.fo-pricing-top .fo-section-title{color:var(--fo-light)}
.fo-shortcode-wrap{margin-top:48px}

/* FEATURES */
.fo-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.fo-feat-card{background:var(--fo-card);border:1px solid var(--fo-border);padding:36px 30px;position:relative;overflow:hidden;transition:transform .3s,background .3s}
.fo-feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--fo-accent),var(--fo-purple));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.fo-feat-card:hover{transform:translateY(-4px);background:rgba(255,255,255,.06)}
.fo-feat-card:hover::before{transform:scaleX(1)}
.fo-feat-icon{width:50px;height:50px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:20px}
.fo-feat-title{font-family:var(--fo-hfont);font-size:19px;color:var(--fo-light);margin-bottom:10px}
.fo-feat-desc{font-size:13px;color:var(--fo-muted);line-height:1.65}
.fo-feat-tag{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;color:var(--fo-accent);letter-spacing:.08em;text-transform:uppercase}

/* HOW IT WORKS */
.fo-funnel-section{background:rgba(0,0,0,.5);border-top:1px solid var(--fo-border);border-bottom:1px solid var(--fo-border);padding:100px 80px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;position:relative;z-index:2;overflow:hidden}
.fo-funnel-section::after{content:'FUNNEL';position:absolute;right:-60px;top:50%;transform:translateY(-50%) rotate(90deg);font-family:var(--fo-hfont);font-size:140px;color:rgba(255,255,255,.02);letter-spacing:.2em;pointer-events:none;user-select:none}
.fo-funnel-steps{display:flex;flex-direction:column}
.fo-funnel-step{display:flex;align-items:flex-start;gap:20px;padding:22px 26px;border:1px solid var(--fo-border);transition:background .3s}
.fo-funnel-step:not(:last-child){border-bottom:none}
.fo-funnel-step:hover{background:rgba(0,212,255,.04)}
.fo-fnum{font-family:var(--fo-hfont);font-size:38px;line-height:1;color:rgba(255,255,255,.1);min-width:38px}
.fo-ftitle{font-weight:700;color:var(--fo-light);font-size:15px;margin-bottom:5px}
.fo-fdesc{font-size:13px;color:rgba(255,255,255,.4);line-height:1.6}
.fo-pill{display:inline-block;background:var(--fo-accent);color:#000;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:8px;letter-spacing:.05em;text-transform:uppercase}

/* UPSELL */
.fo-upsell-section{border-top:1px solid var(--fo-border)}
.fo-upsell-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.fo-upsell-phone{display:flex;justify-content:center}
.fo-phone{width:250px;background:#0d0d1a;border-radius:34px;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,212,255,.1);transform:perspective(800px) rotateY(8deg);animation:foPT_rock 4s ease-in-out infinite;border:1px solid rgba(0,212,255,.1)}
@keyframes foPT_rock{0%,100%{transform:perspective(800px) rotateY(8deg) rotateX(2deg)}50%{transform:perspective(800px) rotateY(4deg) rotateX(0deg)}}
.fo-phone-screen{background:#fff;border-radius:26px;overflow:hidden}
.fo-phone-notch{background:#0d0d1a;height:26px;display:flex;align-items:center;justify-content:center}
.fo-notch{width:76px;height:16px;background:#000;border-radius:0 0 10px 10px}
.fo-phone-body{padding:0 0 14px}
.fo-up-header{background:linear-gradient(135deg,#ff4d1c,#ff8a00);padding:14px 14px 18px;text-align:center;color:#fff}
.fo-up-label{font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.fo-up-headline{font-family:var(--fo-hfont);font-size:18px;letter-spacing:.05em;margin:2px 0}
.fo-up-sub{font-size:10px;opacity:.85}
.fo-up-product{padding:14px;display:flex;gap:10px;align-items:center;border-bottom:1px solid #f0f0f0}
.fo-up-img{width:46px;height:46px;background:linear-gradient(135deg,#fff5f2,#ffe8e0);border-radius:9px;border:1px solid #ffd6cc;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.fo-up-name{font-size:11px;font-weight:700;color:#111}
.fo-up-meta{font-size:9px;color:#888;margin-top:2px}
.fo-up-price{margin-left:auto;text-align:right}
.fo-up-original{font-size:9px;color:#bbb;text-decoration:line-through}
.fo-up-sale{font-size:14px;font-weight:800;color:#ff4d1c}
.fo-up-actions{padding:12px 14px 4px;display:flex;flex-direction:column;gap:7px}
.fo-up-btn{width:100%;padding:10px;border-radius:7px;font-size:11px;font-weight:700;border:none;cursor:default;text-align:center}
.fo-up-btn--yes{background:#ff4d1c;color:#fff}
.fo-up-btn--no{background:#f5f5f5;color:#999;font-weight:500}
.fo-up-timer{padding:7px 14px;display:flex;align-items:center;justify-content:center;gap:5px;font-size:10px;color:#ff4d1c;font-weight:700}
.fo-uf-list{display:flex;flex-direction:column;gap:20px;margin-top:36px}
.fo-uf-item{display:flex;align-items:flex-start;gap:16px}
.fo-uf-icon{width:42px;height:42px;background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.fo-uf-title{font-weight:700;color:var(--fo-light);margin-bottom:4px;font-size:14px}
.fo-uf-desc{font-size:13px;color:var(--fo-muted);line-height:1.6}

/* TESTIMONIALS */
.fo-testimonials{background:rgba(0,0,0,.5);border-top:1px solid var(--fo-border);padding:100px 80px;position:relative;z-index:2}
.fo-testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.fo-testi-card{background:rgba(255,255,255,.03);border:1px solid var(--fo-border);padding:30px;border-radius:4px;transition:background .3s}
.fo-testi-card:hover{background:rgba(255,255,255,.06)}
.fo-result-badge{display:inline-block;background:rgba(255,184,0,.1);border:1px solid rgba(255,184,0,.25);color:var(--fo-gold);font-size:11px;font-weight:700;padding:4px 10px;border-radius:3px;margin-bottom:14px}
.fo-stars{color:var(--fo-gold);font-size:12px;margin-bottom:14px}
.fo-testi-quote{font-size:15px;color:rgba(255,255,255,.8);line-height:1.65;margin-bottom:22px;font-style:italic}
.fo-testi-author{display:flex;align-items:center;gap:12px}
.fo-testi-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--fo-accent),var(--fo-purple));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.fo-testi-name{font-weight:700;color:var(--fo-light);font-size:13px}
.fo-testi-role{font-size:11px;color:rgba(255,255,255,.35);margin-top:2px}

/* FINALE */
.fo-finale{padding:120px 80px;text-align:center;position:relative;z-index:2;background:linear-gradient(135deg,rgba(0,212,255,.07),rgba(109,40,217,.07));border-top:1px solid rgba(0,212,255,.15);overflow:hidden}
.fo-finale::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(45deg,transparent,transparent 30px,rgba(255,255,255,.012) 30px,rgba(255,255,255,.012) 60px)}
.fo-finale-title{font-family:var(--fo-hfont);font-size:clamp(48px,7vw,96px);line-height:.95;background:linear-gradient(90deg,var(--fo-accent),var(--fo-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px;position:relative}
.fo-finale-sub{font-size:20px;color:rgba(255,255,255,.5);margin-bottom:44px;font-style:italic;position:relative}
.fo-finale-btn{background:linear-gradient(90deg,var(--fo-accent),var(--fo-purple));color:#fff!important;font-weight:700;font-size:16px;padding:18px 48px;border:none;border-radius:3px;text-decoration:none!important;display:inline-flex;align-items:center;gap:10px;box-shadow:0 0 40px rgba(0,212,255,.3);transition:opacity .2s,transform .2s;position:relative}
.fo-finale-btn:hover{opacity:.88;transform:translateY(-2px)}
.fo-guarantee{margin-top:24px;font-size:13px;color:rgba(255,255,255,.4);position:relative}

/* SHARED KEYFRAMES */
@keyframes foPT_up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes foPT_right{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:translateX(0)}}

/* RESPONSIVE */
@media(max-width:1024px){
  .fo-hero{grid-template-columns:1fr;min-height:auto;padding:60px 40px;gap:40px}
  .fo-stats{grid-template-columns:repeat(2,1fr);padding:40px}
  .fo-section{padding:60px 40px}
  .fo-features-grid{grid-template-columns:1fr 1fr}
  .fo-funnel-section{grid-template-columns:1fr;padding:60px 40px;gap:40px}
  .fo-upsell-grid{grid-template-columns:1fr;gap:40px}
  .fo-testi-grid{grid-template-columns:1fr 1fr}
  .fo-testimonials,.fo-finale{padding:60px 40px}
}
@media(max-width:640px){
  .fo-hero,.fo-section,.fo-funnel-section,.fo-testimonials,.fo-finale,.fo-pricing-top{padding:48px 24px}
  .fo-stats{grid-template-columns:1fr 1fr;padding:32px 24px}
  .fo-features-grid,.fo-testi-grid{grid-template-columns:1fr}
  .fo-browser{transform:none!important}
  .fo-cta-row{flex-direction:column;align-items:flex-start;gap:16px}
  .fo-float--tr,.fo-float--bl{display:none}
}


/* ════════════════════════════════════════════════════════════
   NEUTROGENA ULTRA SHEER
════════════════════════════════════════════════════════════ */

/* ============================================================
   FUNNELO — Neutrogena Ultra Sheer Template
   Namespace .nus-* | Safe with WooCommerce / CartFlows / jQuery
   ============================================================ */
.nus-wrap*,.nus-wrap *::before,.nus-wrap *::after{box-sizing:border-box;margin:0;padding:0}
.nus-wrap{
  --bg:#06060f;
  --bg2:#0c0c1a;
  --light:#f0f0f5;
  --muted:rgba(180,180,220,.55);
  --dim:rgba(180,180,220,.35);
  --accent:#00d4ff;
  --purple:#6d28d9;
  --orange:#ff4d1c;
  --gold:#ffb800;
  --green:#22c55e;
  --border:rgba(255,255,255,.07);
  --card:rgba(255,255,255,.03);
  --hf:'Bebas Neue','Syne Condensed','Arial Narrow',sans-serif;
  --bf:'DM Sans','Inter',system-ui,sans-serif;
  font-family:var(--bf);
  background:var(--bg);
  color:var(--light);
  position:relative;
  overflow-x:hidden;
  isolation:isolate;
}

/* BG */
.nus-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.nus-grid{position:absolute;inset:-50%;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:60px 60px;animation:nus_grid 24s linear infinite}
@keyframes nus_grid{to{transform:translate(60px,60px)}}
.nus-orb{position:absolute;border-radius:50%;filter:blur(100px);opacity:.3}
.nus-orb--1{width:600px;height:600px;background:radial-gradient(circle,#6d28d9,transparent 70%);top:-15%;left:-10%;animation:nus_o1 11s ease-in-out infinite}
.nus-orb--2{width:450px;height:450px;background:radial-gradient(circle,#00d4ff,transparent 70%);bottom:-10%;right:-8%;animation:nus_o2 13s ease-in-out infinite}
.nus-orb--3{width:280px;height:280px;background:radial-gradient(circle,#ff2d78,transparent 70%);top:55%;left:55%;animation:nus_o3 9s ease-in-out infinite}
@keyframes nus_o1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}}
@keyframes nus_o2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,-25px)}}
@keyframes nus_o3{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,20px)}}
.nus-canvas{position:absolute;inset:0;pointer-events:none}

/* BANNER */
.nus-banner{background:linear-gradient(90deg,#0a0a1a,#0d1440,#0a0a1a);border-bottom:1px solid rgba(0,212,255,.15);padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:600;color:var(--light);position:relative;z-index:10;text-align:center;flex-wrap:wrap}
.nus-banner-fire{font-size:16px;animation:nus_pulse 1.4s ease-in-out infinite}
@keyframes nus_pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.nus-banner-cta{color:var(--gold);font-weight:800;text-decoration:none;border-bottom:1px solid currentColor;white-space:nowrap;margin-left:4px}
.nus-banner-cta:hover{color:#fff}

/* SHARED */
.nus-container{max-width:1200px;margin:0 auto;position:relative;z-index:2;padding:0 40px}
.nus-section{padding:100px 80px;position:relative;z-index:2}
.nus-tc{text-align:center}
.nus-light{color:var(--light)!important}
.nus-dim{color:var(--dim)!important}
.nus-reveal{opacity:0;transform:translateY(32px);transition:opacity .7s ease,transform .7s ease}
.nus-reveal.nus-in{opacity:1;transform:translateY(0)}
.nus-eyebrow{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.nus-eyebrow::before{content:'';width:22px;height:2px;background:var(--accent);display:inline-block}
.nus-eyebrow--center{justify-content:center}
.nus-eyebrow--center::before{display:none}
.nus-eyebrow--gold{color:var(--gold)}
.nus-eyebrow--gold::before{background:var(--gold)}
.nus-section-title{font-family:var(--hf);font-size:clamp(44px,5.5vw,72px);line-height:.93;color:var(--bg);margin-bottom:14px}
.nus-section-title.nus-light{color:var(--light)}
.nus-section-sub{font-size:16px;color:var(--muted);line-height:1.65;max-width:500px;margin-bottom:52px}
.nus-section-sub.nus-tc{margin-left:auto;margin-right:auto}
.nus-btn-primary{background:linear-gradient(90deg,var(--accent),var(--purple));color:#fff!important;font-weight:700;font-size:15px;padding:15px 34px;border-radius:4px;text-decoration:none!important;display:inline-flex;align-items:center;gap:8px;box-shadow:0 0 28px rgba(0,212,255,.28);transition:opacity .2s,transform .2s,box-shadow .2s}
.nus-btn-primary:hover{opacity:.85;transform:translateY(-2px);box-shadow:0 0 42px rgba(0,212,255,.5)}
.nus-btn-xl{font-size:17px;padding:18px 44px}
.nus-btn-ghost{color:var(--muted)!important;font-size:14px;font-weight:500;text-decoration:none!important;display:inline-flex;align-items:center;gap:6px;border-bottom:1px solid rgba(180,180,220,.3);padding-bottom:2px;transition:color .2s,border-color .2s}
.nus-btn-ghost:hover{color:var(--accent)!important;border-color:var(--accent)}
.nus-green{color:var(--green)!important}
.nus-pill{background:var(--accent);color:#000;font-size:9px;font-weight:800;padding:2px 8px;border-radius:20px;margin-left:8px;letter-spacing:.05em;text-transform:uppercase}

/* HERO */
.nus-hero{min-height:calc(100vh - 44px);padding:80px;position:relative;z-index:2;display:flex;align-items:center}
.nus-hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;max-width:1200px;margin:0 auto;width:100%}
.nus-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 14px;border-radius:2px;width:fit-content;margin-bottom:28px;animation:nus_up .5s ease both}
.nus-hero-h1{margin-bottom:22px;animation:nus_up .5s .1s ease both}
.nus-h1-top{display:block;font-family:var(--bf);font-size:clamp(13px,1.3vw,17px);font-weight:400;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px}
.nus-h1-main{display:block;font-family:var(--hf);font-size:clamp(60px,8vw,108px);line-height:.88;color:var(--light);letter-spacing:-.01em}
.nus-h1-sub{display:block;font-family:var(--hf);font-size:clamp(32px,4vw,52px);background:linear-gradient(90deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-top:4px}
.nus-h1-sub em{font-style:italic}
.nus-hero-desc{font-size:15px;color:rgba(200,200,230,.6);line-height:1.75;max-width:420px;margin-bottom:36px;animation:nus_up .5s .2s ease both}

/* DEAL BOX */
.nus-deal-box{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.04);border:1px solid rgba(0,212,255,.15);border-radius:8px;padding:18px 22px;margin-bottom:32px;flex-wrap:wrap;animation:nus_up .5s .3s ease both}
.nus-deal-col{text-align:center}
.nus-deal-col--price{background:rgba(0,212,255,.06);border:1px solid rgba(0,212,255,.2);border-radius:6px;padding:8px 16px}
.nus-deal-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:4px;font-weight:700}
.nus-deal-old{font-family:var(--hf);font-size:30px;color:rgba(255,255,255,.22)}
.nus-deal-divider{font-family:var(--hf);font-size:26px;color:rgba(255,255,255,.18)}
.nus-deal-fire-label{font-size:10px;font-weight:800;color:var(--gold);text-transform:uppercase;letter-spacing:.08em;margin-bottom:2px}
.nus-deal-price{font-family:var(--hf);font-size:52px;line-height:1;color:var(--accent)}
.nus-deal-note{font-size:11px;color:var(--green);font-weight:600;margin-top:2px}
.nus-cta-row{display:flex;align-items:center;gap:20px;margin-bottom:28px;animation:nus_up .5s .4s ease both}
.nus-trust-strip{display:flex;gap:20px;flex-wrap:wrap;animation:nus_up .5s .5s ease both}
.nus-trust-strip span{font-size:12px;color:var(--dim);font-weight:500;display:flex;align-items:center;gap:5px}

/* MOCKUP */
.nus-hero-right{display:flex;align-items:center;justify-content:center;animation:nus_right .8s .3s ease both}
.nus-mockup-wrap{position:relative;width:100%;max-width:500px}
.nus-float-card{position:absolute;z-index:3;background:rgba(5,5,20,.92);border:1px solid rgba(0,212,255,.25);backdrop-filter:blur(8px);padding:10px 14px;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.4);text-align:center}
.nus-float--tl{top:-18px;left:-24px;animation:nus_fb 3s ease-in-out infinite}
.nus-float--br{bottom:14px;right:-24px;animation:nus_fb 3s 1.5s ease-in-out infinite}
.nus-float-num{display:block;font-family:var(--hf);font-size:22px;color:var(--accent);line-height:1}
.nus-float-txt{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
@keyframes nus_fb{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.nus-browser{background:#0c0c1c;border-radius:12px;overflow:hidden;box-shadow:20px 20px 60px rgba(0,0,0,.55),0 0 0 1px rgba(0,212,255,.09);transform:perspective(1000px) rotateY(-6deg) rotateX(2deg);transition:transform .4s;border:1px solid rgba(0,212,255,.08)}
.nus-browser:hover{transform:perspective(1000px) rotateY(-2deg) rotateX(1deg)}
.nus-browser-bar{background:#090914;padding:10px 14px;display:flex;align-items:center;gap:10px;border-bottom:1px solid rgba(255,255,255,.05)}
.nus-dots{display:flex;gap:5px}
.nus-dots i{display:inline-block;width:10px;height:10px;border-radius:50%}
.nus-dots i:nth-child(1){background:#ff5f57}.nus-dots i:nth-child(2){background:#febc2e}.nus-dots i:nth-child(3){background:#28c840}
.nus-url{flex:1;background:rgba(255,255,255,.05);border-radius:4px;padding:5px 10px;font-size:10px;color:#555}
.nus-browser-body{background:#fff}
.nus-checkout-head{padding:14px 18px 12px;border-bottom:1px solid #eee;display:flex;align-items:center;justify-content:space-between;background:#fff}
.nus-co-logo{font-family:var(--hf);font-size:19px;color:#0d0d0d;letter-spacing:.05em}
.nus-co-logo span{font-size:10px;vertical-align:super;color:#999}
.nus-co-steps{display:flex;align-items:center;gap:3px}
.nus-cs{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700}
.nus-cs--active{background:#ff4d1c;color:#fff}.nus-cs--done{background:#22c55e;color:#fff}.nus-cs--idle{background:#eee;color:#999}
.nus-cs-line{width:16px;height:2px;background:#eee}
.nus-checkout-cols{display:grid;grid-template-columns:1fr 175px}
.nus-co-form{padding:14px 14px 14px 18px}
.nus-co-section-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#999;margin-bottom:8px}
.nus-co-row{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:6px}
.nus-co-field{background:#fff;border:1px solid #e0e0e0;border-radius:4px;padding:7px 9px;font-size:10px;color:#333}
.nus-co-field--focus{border-color:#ff4d1c}
.nus-co-field--full{grid-column:1/-1}
.nus-order-bump{background:#fff9f2;border:1px dashed #ff9a3c;border-radius:4px;padding:7px 9px;font-size:10px;color:#555;margin:8px 0;display:flex;align-items:center;gap:6px}
.nus-order-bump input{accent-color:#ff4d1c;width:12px;height:12px}
.nus-co-pay-btn{background:#ff4d1c;color:#fff;border-radius:5px;padding:9px;font-size:11px;font-weight:700;text-align:center}
.nus-co-summary{background:#fafafa;border-left:1px solid #eee;padding:14px 12px}
.nus-co-item{display:flex;gap:7px;margin-bottom:10px;align-items:flex-start}
.nus-co-item-icon{width:36px;height:36px;background:#fff5f2;border:1px solid #eee;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.nus-co-item-name{font-size:10px;font-weight:600;color:#222;line-height:1.3}
.nus-co-item-price{font-size:10px;color:#ff4d1c;font-weight:700;margin-top:2px}
.nus-co-totals{border-top:1px solid #eee;padding-top:8px;font-size:10px;color:#666}
.nus-co-total-row{display:flex;justify-content:space-between;margin-bottom:4px}
.nus-co-grand{font-weight:700;font-size:11px;color:#111;margin-top:4px;border-top:1px solid #eee;padding-top:4px}
.nus-co-trust{background:#f0fdf4;border-top:1px solid #bbf7d0;padding:7px 18px;display:flex;gap:14px;font-size:9px;font-weight:600;color:#166534}

/* STATS BAR */
.nus-stats-bar{background:rgba(0,0,0,.5);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2;padding:0 80px}
.nus-stat{text-align:center;padding:32px 20px;border-right:1px solid var(--border)}
.nus-stat:last-child{border-right:none}
.nus-stat-num{font-family:var(--hf);font-size:62px;color:var(--accent);display:block;line-height:1;letter-spacing:.02em}
.nus-stat-lbl{font-size:12px;color:var(--dim);margin-top:4px}

/* PRICING — full black background */
.nus-pricing-section{background:#000;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08);padding:100px 80px;position:relative;z-index:2}
.nus-pricing-section .nus-section-title{color:var(--light)}
.nus-pricing-section .nus-section-sub{color:var(--muted)}
.nus-shortcode-wrap{background:#000;padding:40px 0 0}
.nus-pricing-note{display:flex;align-items:center;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:44px;padding:20px;border:1px solid rgba(255,255,255,.07);border-radius:4px;background:rgba(255,255,255,.02)}
.nus-pn-item{font-size:13px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}

/* FEATURES */
.nus-feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-top:8px}
.nus-feat-card{background:var(--card);border:1px solid var(--border);padding:34px 28px;position:relative;overflow:hidden;transition:background .3s,transform .3s}
.nus-feat-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--accent),var(--purple));transform:scaleX(0);transform-origin:left;transition:transform .3s}
.nus-feat-card:hover{background:rgba(255,255,255,.055);transform:translateY(-3px)}
.nus-feat-card:hover::after{transform:scaleX(1)}
.nus-feat-num{position:absolute;top:18px;right:20px;font-family:var(--hf);font-size:46px;color:rgba(255,255,255,.05);line-height:1}
.nus-feat-icon{font-size:26px;margin-bottom:16px}
.nus-feat-title{font-family:var(--hf);font-size:21px;color:var(--light);margin-bottom:10px}
.nus-feat-desc{font-size:13px;color:var(--muted);line-height:1.65}
.nus-feat-pill{display:inline-block;margin-top:14px;font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}

/* HOW IT WORKS */
.nus-how-section{background:rgba(0,0,0,.55);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:100px 80px;position:relative;z-index:2}
.nus-how-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;max-width:1200px;margin:0 auto}
.nus-steps{display:flex;flex-direction:column}
.nus-step{display:flex;align-items:flex-start;gap:18px;padding:22px 24px;border:1px solid var(--border);transition:background .3s}
.nus-step:not(:last-child){border-bottom:none}
.nus-step:hover{background:rgba(0,212,255,.04)}
.nus-step-n{font-family:var(--hf);font-size:40px;color:rgba(255,255,255,.08);line-height:1;min-width:40px}
.nus-step-title{font-weight:700;color:var(--light);font-size:15px;margin-bottom:5px}
.nus-step-desc{font-size:13px;color:var(--dim);line-height:1.6}

/* UPSELL */
.nus-upsell-section{border-top:1px solid var(--border)}
.nus-upsell-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.nus-upsell-phone{display:flex;justify-content:center}
.nus-phone{width:248px;background:#0c0c1c;border-radius:34px;padding:10px;box-shadow:0 40px 80px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,212,255,.1);animation:nus_rock 4s ease-in-out infinite;border:1px solid rgba(0,212,255,.08)}
@keyframes nus_rock{0%,100%{transform:perspective(800px) rotateY(8deg) rotateX(2deg)}50%{transform:perspective(800px) rotateY(3deg) rotateX(0)}}
.nus-phone-screen{background:#fff;border-radius:26px;overflow:hidden}
.nus-phone-notch{background:#0c0c1c;height:24px;display:flex;align-items:center;justify-content:center}
.nus-notch-pill{width:72px;height:14px;background:#000;border-radius:0 0 10px 10px}
.nus-phone-body{padding:0 0 12px}
.nus-up-header{background:linear-gradient(135deg,#ff4d1c,#ff8a00);padding:13px 13px 16px;text-align:center;color:#fff}
.nus-up-tag{font-size:9px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.nus-up-title{font-family:var(--hf);font-size:17px;letter-spacing:.04em;margin:2px 0}
.nus-up-sub{font-size:9px;opacity:.8}
.nus-up-product{padding:12px;display:flex;gap:9px;align-items:center;border-bottom:1px solid #f0f0f0}
.nus-up-img{width:44px;height:44px;background:linear-gradient(135deg,#fff5f2,#ffe8e0);border-radius:8px;border:1px solid #ffd6cc;display:flex;align-items:center;justify-content:center;font-size:19px;flex-shrink:0}
.nus-up-name{font-size:11px;font-weight:700;color:#111}
.nus-up-meta{font-size:9px;color:#888;margin-top:2px}
.nus-up-price{margin-left:auto;text-align:right}
.nus-up-was{font-size:9px;color:#bbb;text-decoration:line-through}
.nus-up-now{font-size:14px;font-weight:800;color:#ff4d1c}
.nus-up-actions{padding:10px 12px 4px;display:flex;flex-direction:column;gap:7px}
.nus-up-yes,.nus-up-no{width:100%;padding:9px;border-radius:6px;font-size:11px;font-weight:700;text-align:center}
.nus-up-yes{background:#ff4d1c;color:#fff}
.nus-up-no{background:#f5f5f5;color:#aaa;font-weight:500}
.nus-up-timer{padding:7px 12px;text-align:center;font-size:10px;color:#ff4d1c;font-weight:700}
.nus-upsell-list{display:flex;flex-direction:column;gap:20px;margin-top:32px}
.nus-ul-item{display:flex;align-items:flex-start;gap:14px}
.nus-ul-icon{width:40px;height:40px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.18);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.nus-ul-title{font-weight:700;color:var(--light);margin-bottom:4px;font-size:14px}
.nus-ul-desc{font-size:13px;color:var(--muted);line-height:1.6}

/* REVIEWS */
.nus-reviews-section{background:rgba(0,0,0,.6);border-top:1px solid var(--border);padding:100px 80px;position:relative;z-index:2}
.nus-rating-row{display:flex;align-items:center;gap:20px;margin-bottom:52px}
.nus-rating-big{font-family:var(--hf);font-size:80px;color:var(--gold);line-height:1;font-weight:700}
.nus-rating-stars{font-size:22px;color:var(--gold);letter-spacing:3px;margin-bottom:4px}
.nus-rating-count{font-size:13px;color:var(--dim)}
.nus-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:32px}
.nus-review-card{background:rgba(255,255,255,.035);border:1px solid var(--border);border-radius:6px;padding:24px;transition:background .3s;animation:nus_up .5s ease both}
.nus-review-card:hover{background:rgba(255,255,255,.06)}
.nus-rv-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.nus-rv-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:#fff;flex-shrink:0}
.nus-rv-name{font-weight:700;color:var(--light);font-size:14px}
.nus-rv-date{font-size:11px;color:var(--dim);margin-top:2px}
.nus-rv-stars{font-size:12px;color:var(--gold);letter-spacing:1px;margin-bottom:8px}
.nus-rv-title{font-weight:700;color:var(--light);font-size:14px;margin-bottom:6px}
.nus-rv-text{font-size:13px;color:rgba(255,255,255,.5);line-height:1.65}
.nus-rv-tag{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--green);font-weight:700;margin-top:10px}
.nus-reviews-footer{text-align:center}
.nus-load-more{background:transparent;border:1px solid var(--border);color:var(--muted);padding:12px 36px;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .2s,color .2s;font-family:var(--bf)}
.nus-load-more:hover{border-color:var(--accent);color:var(--accent)}

/* FINALE */
.nus-finale{padding:120px 80px;text-align:center;position:relative;z-index:2;background:linear-gradient(135deg,rgba(0,212,255,.05),rgba(109,40,217,.05));border-top:1px solid rgba(0,212,255,.12);overflow:hidden}
.nus-finale-glow{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 50%,rgba(0,212,255,.05),transparent);pointer-events:none}
.nus-finale-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,184,0,.08);border:1px solid rgba(255,184,0,.22);color:var(--gold);font-size:11px;font-weight:700;padding:5px 14px;border-radius:2px;margin-bottom:20px;letter-spacing:.1em;text-transform:uppercase}
.nus-finale-title{font-family:var(--hf);font-size:clamp(50px,7vw,90px);line-height:.92;background:linear-gradient(90deg,var(--accent),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:20px}
.nus-finale-sub{font-size:18px;color:var(--muted);max-width:520px;margin:0 auto 32px;line-height:1.7}
.nus-finale-price-row{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:36px}
.nus-fp-item{font-size:15px;font-weight:600}
.nus-fp-item--cross{color:rgba(255,255,255,.25)}
.nus-fp-plus,.nus-fp-equals{font-family:var(--hf);font-size:28px;color:rgba(255,255,255,.15)}
.nus-fp-item--total{font-family:var(--hf);font-size:40px;color:var(--accent);line-height:1}
.nus-fp-item--total span{display:block;font-family:var(--bf);font-size:12px;color:var(--green);font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.nus-finale-trust{margin-top:22px;font-size:13px;color:var(--dim);font-weight:500}

/* KEYFRAMES */
@keyframes nus_up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
@keyframes nus_right{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}

/* RESPONSIVE */
@media(max-width:1024px){
  .nus-hero{padding:60px 40px;min-height:auto}
  .nus-hero-inner{grid-template-columns:1fr}
  .nus-stats-bar{grid-template-columns:repeat(2,1fr);padding:0 40px}
  .nus-section,.nus-pricing-section,.nus-how-section,.nus-reviews-section,.nus-finale{padding:60px 40px}
  .nus-container{padding:0 24px}
  .nus-feat-grid{grid-template-columns:repeat(2,1fr)}
  .nus-how-grid{grid-template-columns:1fr;gap:40px}
  .nus-upsell-grid{grid-template-columns:1fr;gap:40px}
  .nus-reviews-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .nus-hero,.nus-section,.nus-pricing-section,.nus-how-section,.nus-reviews-section,.nus-finale{padding:48px 24px}
  .nus-stats-bar{grid-template-columns:1fr 1fr;padding:0 24px}
  .nus-feat-grid,.nus-reviews-grid{grid-template-columns:1fr}
  .nus-deal-box{flex-direction:column;text-align:center}
  .nus-cta-row{flex-direction:column;align-items:flex-start}
  .nus-browser{transform:none!important}
  .nus-float--tl,.nus-float--br{display:none}
  .nus-finale-price-row{flex-direction:column;gap:6px}
  .nus-rating-row{flex-direction:column;align-items:flex-start}
  .nus-banner{font-size:11px}
  .nus-pricing-note{flex-direction:column;gap:14px;align-items:flex-start}
}


/* ════════════════════════════════════════════════════════════
   PAGE BLOG
════════════════════════════════════════════════════════════ */

/* ── Variables / Reset ─────────────────────────── */
.bl-container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.bl-section   { padding:clamp(4rem,7vw,6rem) 0; }
.bl-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(109,40,217,.1); border:1px solid rgba(109,40,217,.25);
  color:var(--accent,#a78bfa);
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:999px; margin-bottom:1.2rem;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.bl-hero {
  position:relative; overflow:hidden; background:var(--bg);
  padding:calc(var(--nav-h,80px) + 4rem) 1.5rem clamp(3rem,5vw,5rem);
  display:flex; align-items:center; justify-content:center;
}
.bl-hero__bg { position:absolute; inset:0; z-index:0; }
.bl-grid {
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(rgba(167,139,250,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.03) 1px, transparent 1px);
  background-size:55px 55px;
  animation:bl-grid-scroll 40s linear infinite;
}
@keyframes bl-grid-scroll { to { transform:translate(55px,55px); } }
.bl-orb { position:absolute; border-radius:50%; filter:blur(120px); opacity:.28; pointer-events:none; }
.bl-orb--1 { width:600px;height:600px; background:radial-gradient(circle,#6d28d9,transparent 70%); top:-30%;left:-15%; animation:bl-f1 16s ease-in-out infinite; }
.bl-orb--2 { width:400px;height:400px; background:radial-gradient(circle,#a78bfa,transparent 70%); bottom:-20%;right:-10%; animation:bl-f2 13s ease-in-out infinite; }
@keyframes bl-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,25px)}}
@keyframes bl-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,-20px)}}
.bl-scan { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.35),transparent); animation:bl-scan 10s ease-in-out infinite; }
@keyframes bl-scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

.bl-hero__inner { position:relative; z-index:1; text-align:center; max-width:760px; }
.bl-badge {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(167,139,250,.07); border:1px solid rgba(167,139,250,.2);
  color:#a78bfa; font-family:var(--font-h); font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.38rem 1rem; border-radius:999px; margin-bottom:1.6rem;
  animation:bl-up .6s ease .1s both;
}
.bl-badge__dot {
  width:6px; height:6px; border-radius:50%;
  background:#a78bfa; box-shadow:0 0 7px #a78bfa;
  animation:bl-blink 1.4s ease-in-out infinite;
}
@keyframes bl-blink{0%,100%{opacity:1}50%{opacity:.1}}

.bl-hero__title {
  font-family:var(--font-h); font-size:var(--s5); font-weight:900; line-height:1.05;
  margin:0 0 1.1rem; display:flex; flex-direction:column; align-items:center;
  animation:bl-up .8s ease .25s both;
}
.bl-t--eye { font-size:.36em; letter-spacing:.28em; text-transform:uppercase; color:rgba(245,245,247,.3); margin-bottom:.2em; }
.bl-t--main { background:linear-gradient(135deg,#fff 0%,#a78bfa 50%,#00d4ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.bl-hero__sub {
  font-family:var(--font-b); font-size:var(--s1); color:var(--muted);
  line-height:1.75; max-width:580px; margin:0 auto 2.2rem;
  animation:bl-up .7s ease .4s both;
}

/* ── Category pills ────────────────── */
.bl-cats {
  display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;
  animation:bl-up .7s ease .55s both;
}
.bl-cat-pill {
  font-family:var(--font-h); font-size:.72rem; font-weight:700;
  padding:.32rem .9rem; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
  color:var(--muted); transition:all .2s; display:flex; align-items:center; gap:.4rem;
  outline:none;
}
.bl-cat-pill:hover { border-color:rgba(167,139,250,.35); color:#a78bfa; background:rgba(167,139,250,.06); }
.bl-cat-pill--active { background:rgba(167,139,250,.1); border-color:rgba(167,139,250,.3); color:#a78bfa; }
.bl-cat-count { background:rgba(167,139,250,.15); border-radius:999px; padding:.05rem .45rem; font-size:.62rem; }

@keyframes bl-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   FEATURED CARD  — IMAGE FIX
════════════════════════════════════════ */
.bl-featured { padding:0 0 clamp(3rem,5vw,5rem); background:var(--bg); }
.bl-featured.bl-hidden {
  opacity:0; height:0; overflow:hidden;
  padding:0; pointer-events:none;
  transition:opacity .3s ease;
}

.bl-feat-card {
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: 1fr;        /* ← single row, both sides same height */
  gap:0;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden; /* ← clip children to border-radius */
  transition:transform .35s, box-shadow .35s;
  box-shadow:0 4px 40px rgba(0,0,0,.3);
  min-height:400px;               /* ← give the card a reliable height */
}
.bl-feat-card:hover { transform:translateY(-5px); box-shadow:0 20px 60px rgba(109,40,217,.2); }

@media(max-width:860px){
  .bl-feat-card { grid-template-columns:1fr; min-height:auto; }
}

/* Image column — acts as the clipping box */
.bl-feat-card__img {
  position:relative;
  overflow:hidden;               /* ← keeps the <img> inside the column */
  background:linear-gradient(135deg,rgba(109,40,217,.15),rgba(0,212,255,.1));
  /* No fixed height — the grid row stretches both columns equally */
}

/* The actual <img> fills the column with cover crop */
.bl-feat-card__img img {
  position:absolute;             /* ← pull out of flow so it truly fills */
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;   /* show top of image — good for screenshots */
  display:block;
  transition:transform .6s ease;
}
.bl-feat-card:hover .bl-feat-card__img img { transform:scale(1.04); }

/* Placeholder when no thumbnail */
.bl-feat-card__placeholder {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(109,40,217,.15),rgba(0,212,255,.1));
  display:flex; align-items:center; justify-content:center;
}
.bl-feat-placeholder-icon { font-size:4rem; opacity:.25; }

/* Category badge on image */
.bl-feat-card__cat-badge { position:absolute; top:1.2rem; left:1.2rem; z-index:2; }
.bl-feat-cat-link {
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.3rem .8rem; border-radius:999px;
  background:rgba(7,7,14,.65); backdrop-filter:blur(8px);
  border:1px solid rgba(167,139,250,.35); color:#a78bfa;
  transition:all .2s; display:inline-block;
}
.bl-feat-cat-link:hover { background:rgba(167,139,250,.2); }

/* Body side */
.bl-feat-card__body {
  padding:2.5rem 2.2rem;
  display:flex; flex-direction:column; justify-content:center;
  background:var(--card);
}
.bl-feat-card__meta {
  display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin-bottom:1.1rem; font-family:var(--font-b); font-size:.78rem; color:var(--muted);
}
.bl-meta-avatar {
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#a78bfa,#00d4ff);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-size:.6rem; font-weight:700; color:#fff;
}
.bl-meta-author { display:flex; align-items:center; gap:.4rem; }
.bl-meta-sep { opacity:.3; }
.bl-feat-card__title {
  font-family:var(--font-h); font-size:clamp(1.5rem,3vw,2rem);
  font-weight:800; line-height:1.2; margin:0 0 .9rem;
}
.bl-feat-card__title a { color:var(--text); transition:color .2s; }
.bl-feat-card:hover .bl-feat-card__title a { color:#a78bfa; }
.bl-feat-card__excerpt {
  font-family:var(--font-b); font-size:var(--s0); color:var(--muted);
  line-height:1.75; margin:0 0 1.8rem;
}
.bl-feat-card__cta {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-h); font-weight:700; font-size:var(--s0);
  color:#a78bfa; width:fit-content;
}
.bl-feat-arrow { transition:transform .2s; }
.bl-feat-card:hover .bl-feat-arrow { transform:translateX(5px); }

/* ════════════════════════════════════════
   LOADING SPINNER
════════════════════════════════════════ */
.bl-loading {
  display:none; justify-content:center; align-items:center;
  padding:4rem 0;
}
.bl-loading.bl-show { display:flex; }
.bl-spinner {
  width:40px; height:40px; border-radius:50%;
  border:3px solid rgba(167,139,250,.15);
  border-top-color:#a78bfa;
  animation:bl-spin .7s linear infinite;
}
@keyframes bl-spin { to { transform:rotate(360deg); } }

/* ════════════════════════════════════════
   POSTS GRID
════════════════════════════════════════ */
.bl-grid-section { background:var(--bg); border-top:1px solid var(--border); }
.bl-page-label { margin-bottom:2rem; }
.bl-posts-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:1.5rem;
  transition:opacity .25s;
}
.bl-posts-grid.bl-fading { opacity:.3; pointer-events:none; }

.bl-post-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s, border-color .3s;
}
.bl-post-card:hover {
  transform:translateY(-5px);
  border-color:rgba(167,139,250,.25);
  box-shadow:0 16px 50px rgba(0,0,0,.3);
}

.bl-post-card__img-wrap {
  display:block; position:relative; overflow:hidden;
  aspect-ratio:16/9; flex-shrink:0;
}
.bl-post-card__img {
  width:100%; height:100%; object-fit:cover;
  transition:transform .55s ease; display:block;
}
.bl-post-card:hover .bl-post-card__img { transform:scale(1.06); }
.bl-post-card__no-img {
  width:100%; height:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg,rgba(109,40,217,.12),rgba(0,212,255,.08));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-size:1.5rem; font-weight:900;
  color:rgba(167,139,250,.3); letter-spacing:.1em;
}
.bl-post-card__cat { position:absolute; top:.85rem; left:.85rem; }
.bl-post-cat-tag {
  font-family:var(--font-h); font-size:.62rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.22rem .65rem; border-radius:999px;
  background:rgba(7,7,14,.7); backdrop-filter:blur(8px);
  border:1px solid rgba(167,139,250,.3); color:#a78bfa;
  transition:all .2s;
}
.bl-post-cat-tag:hover { background:rgba(167,139,250,.2); }

.bl-post-card__body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.bl-post-card__meta {
  display:flex; align-items:center; gap:.4rem;
  font-family:var(--font-b); font-size:.72rem; color:var(--muted); margin-bottom:.7rem;
}
.bl-pcm-sep { opacity:.3; }
.bl-pcm-read { color:rgba(0,229,160,.7); }
.bl-post-card__title {
  font-family:var(--font-h); font-size:var(--s1); font-weight:700;
  color:var(--text); line-height:1.3; margin:0 0 .55rem; flex:0;
}
.bl-post-card__title a { color:inherit; transition:color .2s; }
.bl-post-card:hover .bl-post-card__title a { color:#a78bfa; }
.bl-post-card__subtitle {
  font-family:var(--font-b); font-size:var(--s-1);
  color:var(--muted); line-height:1.65; margin:0; flex:1;
}
.bl-post-card__footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--border);
}
.bl-pcf-author { display:flex; align-items:center; gap:.5rem; }
.bl-pcf-avatar {
  width:24px; height:24px; border-radius:50%;
  background:linear-gradient(135deg,#6d28d9,#a78bfa);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-weight:700; font-size:.62rem; color:#fff; flex-shrink:0;
}
.bl-pcf-name { font-family:var(--font-b); font-size:.72rem; color:var(--muted); }
.bl-pcf-link {
  font-family:var(--font-h); font-size:.72rem; font-weight:700;
  color:#a78bfa; transition:gap .2s; display:flex; align-items:center; gap:.3rem;
}
.bl-pcf-link:hover { gap:.55rem; }

/* ════════════════════════════════════════
   PAGINATION
════════════════════════════════════════ */
.bl-pagination { margin-top:3rem; }
.bl-pagination .page-numbers {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.55rem .95rem; margin:0 .2rem;
  border:1px solid var(--border); border-radius:.5rem;
  font-family:var(--font-h); font-size:.8rem; font-weight:700;
  color:var(--muted); background:var(--card);
  transition:all .2s;
}
.bl-pagination .page-numbers:hover,
.bl-pagination .page-numbers.current {
  border-color:rgba(167,139,250,.4);
  color:#a78bfa; background:rgba(167,139,250,.08);
}
.bl-pagination ul {
  list-style:none; padding:0; margin:0;
  display:flex; flex-wrap:wrap; gap:.3rem; justify-content:center;
}
.bl-pagination ul li { display:inline-flex; }

/* ════════════════════════════════════════
   EMPTY STATE
════════════════════════════════════════ */
.bl-empty { text-align:center; padding:5rem 1rem; }
.bl-empty__icon { font-size:3rem; margin-bottom:1rem; }
.bl-empty h3 { font-family:var(--font-h); font-size:var(--s2); color:var(--text); margin:0 0 .5rem; }
.bl-empty p { font-family:var(--font-b); color:var(--muted); }

/* ── Scroll reveal ─ */
.bl-reveal { opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; }
.bl-reveal.bl-visible { opacity:1; transform:translateY(0); }

@media(max-width:640px){ .bl-posts-grid { grid-template-columns:1fr; } }


/* ════════════════════════════════════════════════════════════
   PAGE CUSTOM WEBSITE
════════════════════════════════════════════════════════════ */

#cw_pricing_settings .inside { padding:0; }
      .cw-mb-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
      .cw-mb-col  { padding:16px 20px; border-right:1px solid #e0e0e0; }
      .cw-mb-col:last-child { border-right:none; }
      .cw-mb-col h4 { margin:0 0 14px; font-size:13px; font-weight:700; padding-bottom:8px; border-bottom:2px solid #eee; }
      .cw-mb-row { margin-bottom:12px; }
      .cw-mb-row label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#666; margin-bottom:4px; }
      .cw-mb-row input[type=text], .cw-mb-row textarea { width:100%; font-size:12px; border:1px solid #ddd; border-radius:4px; padding:6px 8px; box-sizing:border-box; }
      .cw-mb-row textarea { height:140px; resize:vertical; font-family:monospace; line-height:1.6; }
      .cw-mb-note { font-size:10px; color:#999; margin-top:3px; display:block; }
      @media(max-width:900px){ .cw-mb-wrap { grid-template-columns:1fr; } .cw-mb-col { border-right:none; border-bottom:1px solid #e0e0e0; } }

/* ── layout ─────────────────────────────────────────── */
.cw-container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.cw-section   { padding:clamp(4rem,8vw,7rem) 0; }

/* ── section header ──────────────────────────────────── */
.cw-section-header { text-align:center; margin-bottom:3rem; }
.cw-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(109,40,217,.1); border:1px solid rgba(109,40,217,.25);
  color:var(--accent,#a78bfa);
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:999px; margin-bottom:.85rem;
}
.cw-section-title {
  font-family:var(--font-h); font-size:var(--s3); font-weight:800;
  color:var(--text); line-height:1.2; margin:0 0 .65rem;
}
.cw-section-sub {
  font-family:var(--font-b); font-size:var(--s0);
  color:var(--muted); max-width:520px; margin:0 auto; line-height:1.7;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.cw-hero {
  position:relative; overflow:hidden; background:var(--bg);
  min-height:94vh; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 4rem) 1.5rem clamp(3rem,6vw,5rem);
}
.cw-hero__bg { position:absolute; inset:0; z-index:0; }

.cw-grid {
  position:absolute; inset:-25%;
  background-image:
    linear-gradient(rgba(0,212,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.035) 1px, transparent 1px);
  background-size:55px 55px;
  animation:cw-grid-move 32s linear infinite;
}
@keyframes cw-grid-move { to { transform:translate(55px,55px); } }

.cw-orb { position:absolute; border-radius:50%; filter:blur(115px); opacity:.32; pointer-events:none; }
.cw-orb--1 { width:700px;height:700px; background:radial-gradient(circle,#6d28d9,transparent 70%); top:-25%;left:-20%; animation:cw-f1 14s ease-in-out infinite; }
.cw-orb--2 { width:550px;height:550px; background:radial-gradient(circle,#00d4ff,transparent 70%); bottom:-20%;right:-15%; animation:cw-f2 12s ease-in-out infinite; }
.cw-orb--3 { width:280px;height:280px; background:radial-gradient(circle,#00e5a0,transparent 70%); top:30%;left:60%; animation:cw-f3 8s ease-in-out infinite; }
@keyframes cw-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(50px,35px)}}
@keyframes cw-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,-30px)}}
@keyframes cw-f3{0%,100%{transform:translate(0,0)}50%{transform:translate(-18px,18px)}}

.cw-scan { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(0,212,255,.4),transparent); animation:cw-scan 8s ease-in-out infinite; }
@keyframes cw-scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* code rain */
.cw-code-rain { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.cw-cr {
  position:absolute; font-family:monospace; font-size:.72rem;
  color:rgba(0,212,255,.14); white-space:nowrap;
  animation:cw-cr-float linear infinite;
}
.cw-cr--1{top:12%;left:3%;  animation-duration:20s;}
.cw-cr--2{top:30%;right:3%; animation-duration:25s;animation-delay:-5s;}
.cw-cr--3{top:55%;left:2%;  animation-duration:22s;animation-delay:-10s;}
.cw-cr--4{top:72%;right:4%; animation-duration:18s;animation-delay:-3s;}
.cw-cr--5{top:20%;right:18%;animation-duration:28s;animation-delay:-14s;}
.cw-cr--6{top:65%;left:18%; animation-duration:23s;animation-delay:-7s;}
@keyframes cw-cr-float{0%,100%{transform:translateY(0) rotate(-2deg);opacity:.14}50%{transform:translateY(-14px) rotate(0deg);opacity:.22}}

/* inner */
.cw-hero__inner { position:relative; z-index:1; text-align:center; max-width:860px; }

/* badge */
.cw-badge { display:inline-flex; align-items:center; gap:.45rem; background:rgba(0,229,160,.07); border:1px solid rgba(0,229,160,.2); color:#00e5a0; font-family:var(--font-h); font-size:.7rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:.38rem 1rem; border-radius:999px; margin-bottom:1.6rem; animation:cw-up .6s ease .1s both; }
.cw-badge__dot { width:6px;height:6px;border-radius:50%; background:#00e5a0; box-shadow:0 0 7px #00e5a0; animation:cw-blink 1.4s ease-in-out infinite; }
@keyframes cw-blink{0%,100%{opacity:1}50%{opacity:.1}}

/* title */
.cw-hero__title { font-family:var(--font-h); font-size:var(--s5); font-weight:900; line-height:1; margin:0 0 1.3rem; display:flex; flex-direction:column; align-items:center; animation:cw-up .8s ease .25s both; }
.cw-t--eyebrow { font-size:.38em; letter-spacing:.32em; text-transform:uppercase; color:rgba(245,245,247,.38); display:block; margin-bottom:.2em; }
.cw-t--main { background:linear-gradient(135deg,#fff 0%,#00e5a0 40%,#00d4ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:block; }

.cw-hero__sub { font-family:var(--font-b); font-size:var(--s1); color:var(--muted); line-height:1.75; max-width:600px; margin:0 auto 2rem; animation:cw-up .7s ease .4s both; }
.cw-hero__sub strong { color:var(--text); }

/* no builders strip */
.cw-no-builders { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.8rem; background:rgba(255,45,120,.04); border:1px solid rgba(255,45,120,.12); border-radius:var(--r); padding:1rem 1.8rem; margin-bottom:2.2rem; animation:cw-up .7s ease .5s both; }
.cw-nb__label { font-family:var(--font-h); font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.cw-nb__list { display:flex; flex-wrap:wrap; gap:.45rem; justify-content:center; }
.cw-nb__item { font-family:var(--font-h); font-size:.72rem; font-weight:700; padding:.22rem .75rem; border-radius:999px; }
.cw-nb--cross { background:rgba(255,45,120,.08); border:1px solid rgba(255,45,120,.2); color:rgba(255,45,120,.7); }

/* buttons */
.cw-hero__ctas { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.9rem; animation:cw-up .7s ease .6s both; }
.cw-btn-primary { background:linear-gradient(135deg,#00e5a0,#00d4ff); color:#07070e; font-family:var(--font-h); font-weight:800; font-size:var(--s0); padding:.85rem 2.2rem; border-radius:999px; border:none; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:transform .25s,box-shadow .25s; }
.cw-btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,229,160,.3); color:#07070e; }
.cw-btn-ghost { background:transparent; color:var(--muted); font-family:var(--font-h); font-weight:600; font-size:var(--s0); padding:.85rem 1.8rem; border-radius:999px; border:1px solid var(--border); cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; transition:all .25s; }
.cw-btn-ghost:hover { border-color:rgba(255,255,255,.2); color:var(--text); transform:translateY(-2px); }
@keyframes cw-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   WHY CUSTOM CODE — COMPARISON TABLE
════════════════════════════════════════ */
.cw-why { background:var(--surface); border-top:1px solid var(--border); }
.cw-compare { border:1px solid var(--border); border-radius:var(--r); overflow:hidden; }
.cw-compare__head { display:grid; grid-template-columns:1.2fr 1fr 1fr; background:rgba(255,255,255,.03); border-bottom:1px solid var(--border); }
.cw-compare__col-label { font-family:var(--font-h); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:.9rem 1.2rem; color:var(--muted); }
.cw-compare__col-label--builder { color:rgba(255,45,120,.7); border-left:1px solid var(--border); }
.cw-compare__col-label--custom  { color:#00e5a0; border-left:1px solid var(--border); }

.cw-compare__row { display:grid; grid-template-columns:1.2fr 1fr 1fr; border-bottom:1px solid var(--border); transition:background .2s; }
.cw-compare__row:last-child { border-bottom:none; }
.cw-compare__row:hover { background:rgba(255,255,255,.02); }

.cw-compare__metric { font-family:var(--font-h); font-size:var(--s-1); font-weight:700; color:var(--text); padding:.85rem 1.2rem; display:flex; align-items:center; }
.cw-compare__builder,
.cw-compare__custom  { font-family:var(--font-b); font-size:var(--s-1); padding:.85rem 1.2rem; display:flex; align-items:center; gap:.55rem; border-left:1px solid var(--border); line-height:1.5; }
.cw-compare__builder { color:rgba(255,45,120,.65); }
.cw-compare__custom  { color:rgba(0,229,160,.85); }
.cw-compare__x  { font-size:.8rem; flex-shrink:0; color:rgba(255,45,120,.5); }
.cw-compare__tick { font-size:.8rem; flex-shrink:0; color:#00e5a0; font-weight:800; }

@media(max-width:680px){
  .cw-compare__head,
  .cw-compare__row { grid-template-columns:1fr; }
  .cw-compare__builder, .cw-compare__custom { border-left:none; border-top:1px solid var(--border); }
  .cw-compare__col-label--builder, .cw-compare__col-label--custom { border-left:none; border-top:1px solid var(--border); }
}

/* ════════════════════════════════════════
   STACK / HOW WE BUILD
════════════════════════════════════════ */
.cw-how { background:var(--bg); }
.cw-stack-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:1.4rem; }
.cw-stack-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.8rem 1.6rem;
  position:relative; overflow:hidden;
  transition:all .3s;
}
.cw-stack-card::after {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; opacity:0; transition:opacity .3s;
}
.cw-stack-card--1::after { background:linear-gradient(90deg,#00d4ff,#00e5a0); }
.cw-stack-card--2::after { background:linear-gradient(90deg,#a78bfa,#00d4ff); }
.cw-stack-card--3::after { background:linear-gradient(90deg,#fbbf24,#f97316); }
.cw-stack-card--4::after { background:linear-gradient(90deg,#00e5a0,#00d4ff); }
.cw-stack-card--5::after { background:linear-gradient(90deg,#ff2d78,#a78bfa); }
.cw-stack-card--6::after { background:linear-gradient(90deg,#00d4ff,#6d28d9); }
.cw-stack-card:hover { border-color:rgba(255,255,255,.14); transform:translateY(-5px); }
.cw-stack-card:hover::after { opacity:1; }
.cw-stack-icon { font-size:1.9rem; margin-bottom:.9rem; }
.cw-stack-card h3 { font-family:var(--font-h); font-size:var(--s1); font-weight:700; color:var(--text); margin:0 0 .5rem; }
.cw-stack-card p  { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.72; margin:0; }
.cw-stack-tech { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
.cw-stack-tech span { background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.15); border-radius:999px; font-size:.65rem; font-weight:600; font-family:monospace; color:rgba(0,212,255,.8); padding:.15rem .65rem; }

/* ════════════════════════════════════════
   BACKEND SECTION
════════════════════════════════════════ */
.cw-backend { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cw-backend__grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
@media(max-width:860px){ .cw-backend__grid { grid-template-columns:1fr; gap:2.5rem; } }

.cw-backend__sub { font-family:var(--font-b); font-size:var(--s0); color:var(--muted); line-height:1.75; margin:1rem 0 2rem; }
.cw-backend__features { display:flex; flex-direction:column; gap:1.3rem; }
.cw-bf { display:flex; align-items:flex-start; gap:1rem; }
.cw-bf__icon { width:38px; height:38px; border-radius:.65rem; background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2); display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
.cw-bf h4 { font-family:var(--font-h); font-size:var(--s0); font-weight:700; color:var(--text); margin:0 0 .25rem; }
.cw-bf p  { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.65; margin:0; }

/* mockup */
.cw-mockup { border-radius:var(--r); overflow:hidden; border:1px solid var(--border); box-shadow:0 24px 60px rgba(0,0,0,.4); }
.cw-mockup__bar { background:#1a1a2e; padding:.6rem 1rem; display:flex; align-items:center; gap:.5rem; border-bottom:1px solid var(--border); }
.cw-mockup__dot { width:10px;height:10px;border-radius:50%; }
.cw-mockup__dot--r { background:#ff5f57; }
.cw-mockup__dot--y { background:#ffbd2e; }
.cw-mockup__dot--g { background:#28c840; }
.cw-mockup__url { font-family:var(--font-b); font-size:.7rem; color:var(--muted); margin-left:.5rem; }
.cw-mockup__body { display:flex; background:var(--bg); min-height:360px; }
.cw-mockup__sidebar { width:130px; background:var(--surface); border-right:1px solid var(--border); padding:.8rem 0; flex-shrink:0; }
.cw-ms { font-family:var(--font-b); font-size:.72rem; color:var(--muted); padding:.5rem 1rem; cursor:pointer; transition:all .2s; white-space:nowrap; }
.cw-ms--active { background:rgba(0,212,255,.08); color:#00d4ff; border-left:2px solid #00d4ff; }
.cw-ms:hover:not(.cw-ms--active) { background:rgba(255,255,255,.03); color:var(--text); }
.cw-mockup__content { flex:1; padding:1.2rem; overflow:hidden; }
.cw-mc__title { font-family:var(--font-h); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(0,212,255,.6); margin-bottom:.8rem; }
.cw-mc__field { margin-bottom:.7rem; }
.cw-mc__label { font-family:var(--font-b); font-size:.63rem; color:var(--muted); display:block; margin-bottom:.2rem; }
.cw-mc__input { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:.4rem; padding:.4rem .7rem; font-family:var(--font-b); font-size:.75rem; color:var(--text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cw-mc__input--active { border-color:rgba(0,212,255,.4); background:rgba(0,212,255,.05); }
.cw-mc__cursor { display:inline-block; animation:cw-blink 1s step-end infinite; color:#00d4ff; margin-left:1px; }
.cw-mc__media { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:.4rem; padding:.4rem .7rem; font-family:var(--font-b); font-size:.75rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.cw-mc__change { margin-left:auto; color:#00d4ff; font-size:.65rem; cursor:pointer; }
.cw-mc__save { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; padding-top:.8rem; border-top:1px solid var(--border); }
.cw-mc__status { font-size:.65rem; color:var(--muted); }
.cw-mc__btn { background:linear-gradient(135deg,#00d4ff,#6d28d9); color:#fff; font-family:var(--font-h); font-weight:700; font-size:.72rem; padding:.35rem .9rem; border-radius:.4rem; border:none; cursor:pointer; }

/* ════════════════════════════════════════
   PROCESS
════════════════════════════════════════ */
.cw-process { background:var(--bg); }
.cw-process-track { display:flex; flex-direction:column; gap:0; position:relative; max-width:700px; margin:0 auto; }
.cw-process-track::before { content:''; position:absolute; left:21px; top:44px; bottom:0; width:1px; background:linear-gradient(to bottom,rgba(0,212,255,.25),transparent 95%); }

.cw-ps { display:flex; gap:1.5rem; padding-bottom:2rem; position:relative; }
.cw-ps:last-child { padding-bottom:0; }
.cw-ps__dot { width:44px; height:44px; border-radius:50%; background:var(--card); border:1px solid rgba(0,212,255,.3); display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-size:.72rem; font-weight:800; color:#00d4ff; flex-shrink:0; position:relative; z-index:1; transition:all .3s; }
.cw-ps:hover .cw-ps__dot { background:rgba(0,212,255,.1); box-shadow:0 0 20px rgba(0,212,255,.25); border-color:rgba(0,212,255,.5); }
.cw-ps__connector { display:none; }
.cw-ps__card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.4rem 1.5rem; flex:1; transition:all .3s; }
.cw-ps:hover .cw-ps__card { border-color:rgba(0,212,255,.18); transform:translateX(4px); }
.cw-ps__icon { width:40px; height:40px; border-radius:.65rem; display:flex; align-items:center; justify-content:center; font-size:1.1rem; margin-bottom:.75rem; }
.cw-ps__card h3 { font-family:var(--font-h); font-size:var(--s1); font-weight:700; color:var(--text); margin:0 0 .4rem; }
.cw-ps__card p  { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.7; margin:0; }
.cw-ps__day { display:inline-flex; background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2); color:#00e5a0; font-family:var(--font-h); font-size:.63rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:.2rem .6rem; border-radius:999px; margin-top:.75rem; }

/* ════════════════════════════════════════
   RESULTS
════════════════════════════════════════ */
.cw-results { padding:4rem 1.5rem; background:rgba(0,229,160,.025); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.cw-results-grid { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:2rem; text-align:center; }
.cw-stat { display:flex; flex-direction:column; align-items:center; padding:0 1.5rem; }
.cw-stat__num { font-family:var(--font-h); font-size:var(--s4); font-weight:900; color:var(--text); line-height:1; display:flex; align-items:flex-start; }
.cw-stat__num sup { font-size:.44em; color:#00e5a0; margin-top:.1em; }
.cw-stat__label { font-size:.7rem; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:500; margin-top:.35rem; }
.cw-r-div { width:1px; height:50px; background:var(--border); }
@media(max-width:600px){ .cw-r-div{display:none;} .cw-stat{padding:.5rem 1rem;} }

/* ════════════════════════════════════════
   PRICING TABLE
════════════════════════════════════════ */
.cw-pricing { background:var(--bg); }
.cw-pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
@media(max-width:900px){ .cw-pricing-grid{ grid-template-columns:1fr; max-width:480px; margin:0 auto; } }

.cw-plan {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:2rem 1.75rem;
  position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s, box-shadow .3s;
}
.cw-plan:hover { transform:translateY(-6px); }
.cw-plan--featured {
  border-color:rgba(167,139,250,.3); background:var(--surface);
  box-shadow:0 0 0 1px rgba(167,139,250,.18), 0 28px 60px rgba(109,40,217,.18);
  transform:scale(1.04); z-index:2;
}
.cw-plan--featured:hover { transform:scale(1.04) translateY(-6px); }
.cw-plan__glow { position:absolute; inset:0; pointer-events:none; z-index:0; }
.cw-plan__badge {
  position:absolute; top:1.2rem; right:1.2rem;
  font-family:var(--font-h); font-size:.63rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.22rem .7rem; border-radius:999px; border:1px solid;
}
.cw-plan__header { position:relative; z-index:1; margin-bottom:1.2rem; }
.cw-plan__name { font-family:var(--font-h); font-size:var(--s1); font-weight:700; color:var(--text); margin:0 0 .8rem; }
.cw-plan__price-row { display:flex; align-items:flex-start; gap:.2rem; line-height:1; margin-bottom:.25rem; }
.cw-plan__currency { font-family:var(--font-h); font-size:var(--s2); font-weight:800; margin-top:.3em; }
.cw-plan__price { font-family:var(--font-h); font-size:var(--s4); font-weight:900; color:var(--text); line-height:1; }
.cw-plan__period { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); margin-bottom:.8rem; }
.cw-plan__desc { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.65; margin:0; }
.cw-plan__divider { height:1px; margin:1.2rem 0; }
.cw-plan__features { list-style:none; padding:0; margin:0 0 1.5rem; flex:1; display:flex; flex-direction:column; gap:.55rem; position:relative; z-index:1; }
.cw-plan__features li { display:flex; align-items:flex-start; gap:.6rem; font-family:var(--font-b); font-size:var(--s-1); color:rgba(245,245,247,.8); line-height:1.5; }
.cw-plan__check { font-size:.78rem; font-weight:800; flex-shrink:0; margin-top:.1em; }
.cw-plan__cta {
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-weight:700; font-size:var(--s0);
  padding:.82rem; border-radius:999px; cursor:pointer;
  transition:all .25s; position:relative; z-index:1;
}
.cw-plan__cta:not(.cw-plan__cta--featured) { background:transparent; }
.cw-plan__cta:not(.cw-plan__cta--featured):hover { background:rgba(255,255,255,.05); transform:translateY(-2px); }
.cw-plan__cta--featured:hover { opacity:.88; transform:translateY(-2px); box-shadow:0 14px 35px rgba(109,40,217,.3); }
.cw-pricing-note { text-align:center; margin-top:2.5rem; font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.7; }
.cw-pricing-note a { color:#00e5a0; text-decoration:underline; }

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.cw-testi { background:var(--surface); border-top:1px solid var(--border); }
.cw-testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
.cw-testi-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.8rem; transition:all .3s; }
.cw-testi-card:hover { border-color:rgba(0,229,160,.2); transform:translateY(-3px); }
.cw-stars { color:#fbbf24; font-size:.9rem; letter-spacing:.1em; margin-bottom:.75rem; }
.cw-testi-q { font-family:var(--font-b); font-size:var(--s-1); color:rgba(245,245,247,.8); line-height:1.75; font-style:italic; margin-bottom:1.1rem; }
.cw-testi-author { display:flex; align-items:center; gap:.75rem; }
.cw-avatar { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-h); font-weight:700; font-size:.78rem; color:#fff; flex-shrink:0; }
.cw-author-name { font-family:var(--font-h); font-size:var(--s-1); font-weight:700; color:var(--text); }
.cw-author-meta { font-size:.7rem; color:var(--muted); margin-top:.1rem; }

/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
.cw-faq { background:var(--bg); border-top:1px solid var(--border); }
.cw-faq-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; }
.cw-faq-item { background:var(--card); border:1px solid var(--border); border-radius:var(--r); padding:1.4rem 1.5rem; transition:all .25s; }
.cw-faq-item:hover { border-color:rgba(0,229,160,.2); background:rgba(0,229,160,.025); }
.cw-faq-q { font-family:var(--font-h); font-size:var(--s0); font-weight:700; color:var(--text); margin-bottom:.5rem; display:flex; align-items:flex-start; gap:.5rem; }
.cw-faq-q::before { content:'Q'; color:#00e5a0; opacity:.55; flex-shrink:0; font-size:.85em; }
.cw-faq-a { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.72; }

/* ════════════════════════════════════════
   CTA
════════════════════════════════════════ */
.cw-cta { position:relative; overflow:hidden; padding:clamp(5rem,10vw,8rem) 1.5rem; text-align:center; background:var(--bg); border-top:1px solid var(--border); }
.cw-cta__glow { position:absolute; width:700px; height:700px; border-radius:50%; background:radial-gradient(circle,rgba(0,229,160,.08),transparent 65%); top:50%;left:50%;transform:translate(-50%,-50%); pointer-events:none; }
.cw-cta__inner { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.cw-cta__title { font-family:var(--font-h); font-size:var(--s3); font-weight:900; line-height:1.15; margin:.9rem 0 .85rem; }
.cw-cta__hl { background:linear-gradient(135deg,#00e5a0,#00d4ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.cw-cta__sub { font-family:var(--font-b); font-size:var(--s0); color:var(--muted); line-height:1.7; margin-bottom:2.2rem; }
.cw-cta__form { display:flex; gap:.7rem; flex-wrap:wrap; justify-content:center; max-width:480px; margin:0 auto; }
.cw-cta__input { flex:1; min-width:200px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:.8rem 1.4rem; color:var(--text); font-family:var(--font-b); font-size:var(--s0); outline:none; transition:border-color .2s; }
.cw-cta__input::placeholder { color:rgba(134,134,154,.4); }
.cw-cta__input:focus { border-color:rgba(0,229,160,.4); }
.cw-cta__note { font-size:.72rem; color:rgba(134,134,154,.35); margin-top:.9rem; }

/* scroll reveal */
.cw-reveal { opacity:0; transform:translateY(24px); transition:opacity .55s ease, transform .55s ease; }
.cw-reveal.cw-visible { opacity:1; transform:translateY(0); }

@media(max-width:768px){
  .cw-hero__title { font-size:clamp(2.6rem,11vw,4rem); }
  .cw-cta__form { flex-direction:column; }
  .cw-cta__input { min-width:100%; }
}


/* ════════════════════════════════════════════════════════════
   PAGE ECOMMERCE SERVICE
════════════════════════════════════════════════════════════ */

#ec_pricing_settings .inside { padding:0; }
      .ec-mb-wrap { display:grid; grid-template-columns:repeat(3,1fr); gap:0; }
      .ec-mb-col  { padding:16px 20px; border-right:1px solid #e0e0e0; }
      .ec-mb-col:last-child { border-right:none; }
      .ec-mb-col h4 { margin:0 0 14px; font-size:13px; font-weight:700; padding-bottom:8px; border-bottom:2px solid #eee; }
      .ec-mb-row { margin-bottom:12px; }
      .ec-mb-row label { display:block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#666; margin-bottom:4px; }
      .ec-mb-row input[type=text], .ec-mb-row textarea {
        width:100%; font-size:12px; border:1px solid #ddd; border-radius:4px; padding:6px 8px; box-sizing:border-box;
      }
      .ec-mb-row textarea { height:180px; resize:vertical; font-family:monospace; }
      .ec-mb-note { font-size:10px; color:#999; margin-top:3px; }
      .ec-mb-hint { font-size:10px; color:#2271b1; margin-top:4px; padding:5px 8px; background:#f0f6fc; border-left:3px solid #2271b1; border-radius:2px; }
      @media(max-width:900px){ .ec-mb-wrap { grid-template-columns:1fr; } .ec-mb-col { border-right:none; border-bottom:1px solid #e0e0e0; } }

/* ── layout ──────────────────────────────────────────── */
.ec-container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.ec-section   { padding:clamp(4rem,8vw,7rem) 0; }

/* ── section header ──────────────────────────────────── */
.ec-section-header { text-align:center; margin-bottom:3rem; }
.ec-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(109,40,217,.1); border:1px solid rgba(109,40,217,.25);
  color:var(--accent,#a78bfa);
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:999px; margin-bottom:.85rem;
}
.ec-section-title {
  font-family:var(--font-h); font-size:var(--s3); font-weight:800;
  color:var(--text); line-height:1.15; margin:0 0 .65rem;
}
.ec-section-sub {
  font-family:var(--font-b); font-size:var(--s0);
  color:var(--muted); max-width:500px; margin:0 auto;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.ec-hero {
  position:relative; overflow:hidden; background:var(--bg);
  min-height:92vh; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 4rem) 1.5rem clamp(3rem,6vw,5rem);
}
.ec-hero__bg { position:absolute; inset:0; z-index:0; }
.ec-grid {
  position:absolute; inset:-25%;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg,rgba(0,212,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  animation:ec-grid 30s linear infinite;
}
@keyframes ec-grid{to{transform:translate(60px,60px)}}
.ec-orb { position:absolute; border-radius:50%; filter:blur(110px); opacity:.35; pointer-events:none; }
.ec-orb--1{width:650px;height:650px;background:radial-gradient(circle,#6d28d9,transparent 70%);top:-22%;left:-18%;animation:ec-f1 13s ease-in-out infinite;}
.ec-orb--2{width:520px;height:520px;background:radial-gradient(circle,#00d4ff,transparent 70%);bottom:-18%;right:-14%;animation:ec-f2 11s ease-in-out infinite;}
.ec-orb--3{width:300px;height:300px;background:radial-gradient(circle,#fbbf24,transparent 70%);top:35%;left:55%;animation:ec-f3 9s ease-in-out infinite;}
@keyframes ec-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,30px)}}
@keyframes ec-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,-28px)}}
@keyframes ec-f3{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,20px)}}
.ec-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.4),transparent);animation:ec-scan 7s ease-in-out infinite;}
@keyframes ec-scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
.ec-float-tags{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
.ec-ft{position:absolute;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:.65rem;padding:.4rem .85rem;font-family:var(--font-h);font-weight:700;font-size:.72rem;color:rgba(245,245,247,.35);backdrop-filter:blur(6px);animation:ec-float linear infinite;}
.ec-ft--figma   {top:15%;left:5%;   animation-duration:18s;}
.ec-ft--xd      {top:25%;right:4%;  animation-duration:22s;animation-delay:-4s;}
.ec-ft--shopify {top:60%;left:4%;   animation-duration:20s;animation-delay:-8s;}
.ec-ft--wp      {top:70%;right:6%;  animation-duration:16s;animation-delay:-2s;}
.ec-ft--woo     {top:45%;left:2%;   animation-duration:24s;animation-delay:-12s;}
.ec-ft--redesign{top:10%;right:16%; animation-duration:19s;animation-delay:-6s;}
@keyframes ec-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
.ec-hero__inner{position:relative;z-index:1;text-align:center;max-width:860px;}
.ec-badge{display:inline-flex;align-items:center;gap:.45rem;background:rgba(0,212,255,.07);border:1px solid rgba(0,212,255,.2);color:#00d4ff;font-family:var(--font-h);font-size:.7rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:.38rem 1rem;border-radius:999px;margin-bottom:1.5rem;animation:ec-up .6s ease .1s both;}
.ec-badge__dot{width:6px;height:6px;border-radius:50%;background:#00d4ff;box-shadow:0 0 6px #00d4ff;animation:ec-blink 1.4s ease-in-out infinite;}
@keyframes ec-blink{0%,100%{opacity:1}50%{opacity:.1}}
.ec-hero__title{font-family:var(--font-h);font-size:var(--s5);font-weight:900;line-height:1;margin:0 0 1.3rem;display:flex;flex-direction:column;align-items:center;animation:ec-up .8s ease .25s both;}
.ec-t--small{font-size:.4em;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,245,247,.4);display:block;margin-bottom:.15em;}
.ec-t--main{background:linear-gradient(135deg,#fff 0%,#00d4ff 45%,#6d28d9 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;}
.ec-t--sub{font-size:.46em;letter-spacing:.04em;background:linear-gradient(135deg,#fbbf24 0%,#f97316 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:block;margin-top:.1em;}
.ec-hero__sub{font-family:var(--font-b);font-size:var(--s1);color:var(--muted);line-height:1.75;max-width:580px;margin:0 auto 2rem;animation:ec-up .7s ease .4s both;}
.ec-hero__sub strong{color:var(--text);}
.ec-flow-strip{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:var(--r);padding:1.2rem 2rem;margin-bottom:2.2rem;animation:ec-up .7s ease .55s both;}
.ec-flow-group{display:flex;flex-direction:column;align-items:center;gap:.5rem;}
.ec-flow-label{font-family:var(--font-h);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.ec-flow-pills{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;}
.ec-fp{font-family:var(--font-b);font-size:var(--s-1);font-weight:500;padding:.25rem .8rem;border-radius:999px;border:1px solid;transition:all .25s;}
.ec-fp--design  {background:rgba(109,40,217,.1);border-color:rgba(109,40,217,.25);color:#a78bfa;}
.ec-fp--redesign{background:rgba(0,212,255,.08);border-color:rgba(0,212,255,.25);color:#00d4ff;}
.ec-fp--shopify {background:rgba(0,229,160,.08);border-color:rgba(0,229,160,.25);color:#00e5a0;}
.ec-fp--wp      {background:rgba(33,150,243,.08);border-color:rgba(33,150,243,.25);color:#60a5fa;}
.ec-flow-arrow{display:flex;align-items:center;gap:.5rem;color:rgba(0,212,255,.5);}
.ec-fa-line{width:32px;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.5));}
.ec-fa-icon{font-size:1rem;}
.ec-hero__ctas{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem;animation:ec-up .7s ease .65s both;}
.ec-btn-primary{background:linear-gradient(135deg,#00d4ff,#6d28d9);color:#fff;font-family:var(--font-h);font-weight:700;font-size:var(--s0);padding:.85rem 2.2rem;border-radius:999px;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:transform .25s,box-shadow .25s;}
.ec-btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,212,255,.25);color:#fff;}
.ec-btn-ghost{background:transparent;color:var(--muted);font-family:var(--font-h);font-weight:600;font-size:var(--s0);padding:.85rem 1.8rem;border-radius:999px;border:1px solid var(--border);cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;transition:all .25s;}
.ec-btn-ghost:hover{border-color:rgba(255,255,255,.2);color:var(--text);transform:translateY(-2px);}
@keyframes ec-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   SOURCES
════════════════════════════════════════ */
.ec-sources{background:var(--surface);border-top:1px solid var(--border);}
.ec-sources-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem;}
.ec-source-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.8rem 1.5rem;position:relative;overflow:hidden;transition:all .3s;}
.ec-source-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:0;transition:opacity .3s;}
.ec-sc--figma::before   {background:linear-gradient(90deg,#a78bfa,#6d28d9);}
.ec-sc--xd::before      {background:linear-gradient(90deg,#ff2d78,#a78bfa);}
.ec-sc--redesign::before{background:linear-gradient(90deg,#00d4ff,#6d28d9);}
.ec-sc--scratch::before {background:linear-gradient(90deg,#fbbf24,#f97316);}
.ec-source-card:hover{border-color:rgba(255,255,255,.15);transform:translateY(-5px);}
.ec-source-card:hover::before{opacity:1;}
.ec-sc-icon{font-size:1.8rem;margin-bottom:.9rem;}
.ec-source-card h3{font-family:var(--font-h);font-size:var(--s1);font-weight:700;color:var(--text);margin:0 0 .5rem;}
.ec-source-card p{font-family:var(--font-b);font-size:var(--s-1);color:var(--muted);line-height:1.7;margin:0;}
.ec-sc-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem;}
.ec-sc-tags span{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:.63rem;font-weight:500;color:rgba(245,245,247,.5);padding:.15rem .6rem;}

/* ════════════════════════════════════════
   PLATFORMS
════════════════════════════════════════ */
.ec-platforms{background:var(--bg);}
.ec-platform-compare{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;}
.ec-platform-card{flex:1;min-width:280px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:2rem;transition:all .3s;}
.ec-platform-card--shopify:hover{border-color:rgba(0,229,160,.3);}
.ec-platform-card--wp:hover{border-color:rgba(33,150,243,.3);}
.ec-platform-vs{width:60px;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:900;font-size:var(--s1);color:rgba(245,245,247,.2);flex-shrink:0;}
@media(max-width:700px){.ec-platform-compare{flex-direction:column;}.ec-platform-vs{width:100%;padding:.5rem 0;}}
.ec-platform-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;}
.ec-platform-logo{width:44px;height:44px;border-radius:.75rem;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.ec-pl--shopify{background:rgba(0,229,160,.12);border:1px solid rgba(0,229,160,.25);}
.ec-pl--wp     {background:rgba(33,150,243,.12);border:1px solid rgba(33,150,243,.25);}
.ec-platform-header h3{font-family:var(--font-h);font-size:var(--s1);font-weight:700;color:var(--text);margin:0 0 .15rem;}
.ec-platform-header span{font-size:var(--s-1);color:var(--muted);}
.ec-platform-list{list-style:none;padding:0;margin:0 0 1.2rem;}
.ec-platform-list li{font-family:var(--font-b);font-size:var(--s-1);color:rgba(245,245,247,.75);padding:.3rem 0;border-bottom:1px solid rgba(255,255,255,.04);}
.ec-platform-list li:last-child{border-bottom:none;}
.ec-platform-best{background:rgba(255,255,255,.03);border-radius:.75rem;padding:1rem;}
.ec-platform-best span{font-family:var(--font-h);font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
.ec-platform-best p{font-family:var(--font-b);font-size:var(--s-1);color:var(--muted);line-height:1.6;margin:.3rem 0 0;}

/* ════════════════════════════════════════
   PROCESS
════════════════════════════════════════ */
.ec-process{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ec-process-track{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
.ec-process-track::before{content:'';position:absolute;top:22px;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(0,212,255,.2) 20%,rgba(0,212,255,.2) 80%,transparent);}
@media(max-width:900px){.ec-process-track{grid-template-columns:1fr;}.ec-process-track::before{display:none;}}
.ec-ps{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 .75rem;}
.ec-ps__dot{width:44px;height:44px;border-radius:50%;background:var(--card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:.72rem;font-weight:800;color:#00d4ff;margin-bottom:1.2rem;position:relative;z-index:1;transition:all .3s;}
.ec-ps:hover .ec-ps__dot{background:rgba(0,212,255,.1);border-color:rgba(0,212,255,.4);box-shadow:0 0 20px rgba(0,212,255,.2);}
.ec-ps__card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem 1rem;transition:all .3s;width:100%;}
.ec-ps:hover .ec-ps__card{border-color:rgba(0,212,255,.18);transform:translateY(-3px);}
.ec-ps__icon{width:40px;height:40px;border-radius:.65rem;display:flex;align-items:center;justify-content:center;font-size:1.1rem;margin:0 auto .75rem;}
.ec-ps__card h3{font-family:var(--font-h);font-size:var(--s0);font-weight:700;color:var(--text);margin:0 0 .4rem;}
.ec-ps__card p{font-family:var(--font-b);font-size:.78rem;color:var(--muted);line-height:1.65;margin:0;}
.ec-ps__time{display:inline-flex;background:rgba(0,229,160,.08);border:1px solid rgba(0,229,160,.2);color:#00e5a0;font-family:var(--font-h);font-size:.63rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:.2rem .6rem;border-radius:999px;margin-top:.75rem;}

/* ════════════════════════════════════════
   RESULTS
════════════════════════════════════════ */
.ec-results{padding:4rem 1.5rem;background:rgba(0,212,255,.025);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.ec-results-grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2rem;text-align:center;}
.ec-stat{display:flex;flex-direction:column;align-items:center;padding:0 1.5rem;}
.ec-stat__num{font-family:var(--font-h);font-size:var(--s4);font-weight:900;color:var(--text);line-height:1;display:flex;align-items:flex-start;}
.ec-stat__num sup{font-size:.45em;color:#00d4ff;margin-top:.1em;}
.ec-stat__label{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:500;margin-top:.35rem;}
.ec-r-div{width:1px;height:50px;background:var(--border);}
@media(max-width:600px){.ec-r-div{display:none;}.ec-stat{padding:.5rem 1rem;}}

/* ════════════════════════════════════════
   COMPARISON TABLE  (ec-ct-*)
════════════════════════════════════════ */
.ec-pricing { background:var(--bg); }

/* Scroll wrapper for mobile */
.ec-ct-wrap {
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:0 0 60px rgba(0,0,0,.25);
}

.ec-ct {
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-family:var(--font-b);
  background:var(--card);
}

/* ── thead ──────────────────────────── */
.ec-ct thead tr {
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

/* label corner cell */
.ec-ct-lbl-head {
  width:30%;
  padding:1.6rem 1.5rem;
  vertical-align:middle;
  border-right:1px solid var(--border);
  background:rgba(0,0,0,.15);
}
.ec-ct-lbl-inner { display:flex; flex-direction:column; gap:.25rem; }
.ec-ct-lbl-title {
  font-family:var(--font-h); font-weight:800;
  font-size:var(--s1); color:var(--text);
}
.ec-ct-lbl-sub {
  font-size:.65rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}

/* plan header cells */
.ec-ct-plan-head {
  width:calc(70% / 3);
  text-align:center;
  padding:1.4rem 1rem 1.6rem;
  border-right:1px solid var(--border);
  position:relative;
  vertical-align:top;
  transition:background .2s;
}
.ec-ct-plan-head:last-child { border-right:none; }
.ec-ct-plan-head--featured {
  background:rgba(167,139,250,.06);
  border-left:1px solid rgba(167,139,250,.2);
  border-right:1px solid rgba(167,139,250,.2);
  box-shadow:inset 0 4px 0 0 #a78bfa;
}

.ec-ct-badge {
  display:inline-block;
  font-family:var(--font-h); font-size:.6rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  padding:.2rem .7rem; border-radius:999px; border:1px solid;
  margin-bottom:.5rem;
}
.ec-ct-plan-name {
  font-family:var(--font-h); font-weight:700;
  font-size:var(--s0); color:var(--text); margin-bottom:.35rem;
}
.ec-ct-starts {
  font-size:.6rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.3rem;
}
.ec-ct-price-row {
  display:flex; align-items:flex-start; justify-content:center;
  gap:.15rem; line-height:1; margin-bottom:.25rem;
}
.ec-ct-currency {
  font-family:var(--font-h); font-weight:800;
  font-size:var(--s1); color:var(--muted); margin-top:.35em;
}
.ec-ct-price {
  font-family:var(--font-h); font-weight:900;
  font-size:clamp(2rem,3.5vw,2.6rem); line-height:1;
}
.ec-ct-period {
  font-size:.7rem; color:var(--muted); font-style:italic;
}

/* ── tbody ──────────────────────────── */
.ec-ct-row {
  border-top:1px solid rgba(255,255,255,.04);
  transition:background .15s;
}
.ec-ct-row--odd { background:rgba(255,255,255,.02); }
.ec-ct-row:hover { background:rgba(0,212,255,.035); }

/* feature label column */
.ec-ct-feature-label {
  padding:.75rem 1.5rem;
  font-size:.82rem;
  color:rgba(245,245,247,.75);
  font-weight:500;
  border-right:1px solid var(--border);
  line-height:1.4;
}

/* value cells */
.ec-ct-cell {
  text-align:center;
  padding:.7rem .5rem;
  border-right:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.ec-ct-cell:last-child { border-right:none; }
.ec-ct-cell--featured {
  background:rgba(167,139,250,.04);
  border-left:1px solid rgba(167,139,250,.1);
  border-right:1px solid rgba(167,139,250,.1);
}

/* cell content renderers */
.ec-ct-check {
  font-size:1.15rem; font-weight:800; display:inline-block;
  filter:drop-shadow(0 0 6px currentColor);
}
.ec-ct-cross {
  font-size:1.1rem; color:rgba(239,68,68,.6); font-weight:700;
  display:inline-block;
}
.ec-ct-text {
  font-size:.78rem; color:rgba(245,245,247,.7);
  font-weight:500; line-height:1.35; display:inline-block;
}

/* ── tfoot CTA row ──────────────────── */
.ec-ct-cta-row {
  border-top:2px solid var(--border);
}
.ec-ct-cta-label {
  padding:1.4rem 1.5rem;
  font-family:var(--font-h); font-weight:700;
  font-size:var(--s0); color:var(--muted);
  border-right:1px solid var(--border);
}
.ec-ct-cta-cell {
  padding:1.2rem .75rem;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.04);
}
.ec-ct-cta-cell:last-child { border-right:none; }
.ec-ct-cta-cell.ec-ct-cell--featured {
  background:rgba(167,139,250,.04);
  border-left:1px solid rgba(167,139,250,.1);
  border-right:1px solid rgba(167,139,250,.1);
}

.ec-ct-cta-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:.75rem .5rem;
  font-family:var(--font-h); font-weight:700; font-size:.82rem;
  border-radius:.6rem; border:1px solid;
  transition:all .25s; cursor:pointer; white-space:nowrap;
}
.ec-ct-cta-btn:not(.ec-ct-cta-btn--featured):hover {
  background:rgba(255,255,255,.06); transform:translateY(-2px);
}
.ec-ct-cta-btn--featured:hover {
  opacity:.88; transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(109,40,217,.3);
}

/* ── tfoot Contact row ──────────────── */
.ec-ct-contact-row {
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.1);
}
.ec-ct-contact-cell {
  padding:.9rem .75rem;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.04);
}
.ec-ct-contact-cell:last-child { border-right:none; }
.ec-ct-contact-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:100%; padding:.6rem .5rem;
  font-family:var(--font-h); font-weight:700; font-size:.78rem;
  border-radius:.55rem; border:1px solid;
  transition:all .25s; cursor:pointer;
}
.ec-ct-contact-btn:hover { opacity:.8; transform:translateY(-1px); }

.ec-pricing-note {
  text-align:center; margin-top:2rem;
  font-family:var(--font-b); font-size:var(--s-1);
  color:var(--muted); line-height:1.7;
}
.ec-pricing-note a { color:#00d4ff; text-decoration:underline; }

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.ec-testi{background:var(--surface);border-top:1px solid var(--border);}
.ec-testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;}
.ec-testi-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.8rem;transition:all .3s;}
.ec-testi-card:hover{border-color:rgba(0,212,255,.18);transform:translateY(-3px);}
.ec-stars{color:#fbbf24;font-size:.9rem;letter-spacing:.1em;margin-bottom:.75rem;}
.ec-testi-q{font-family:var(--font-b);font-size:var(--s-1);color:rgba(245,245,247,.8);line-height:1.75;font-style:italic;margin-bottom:1.1rem;}
.ec-testi-author{display:flex;align-items:center;gap:.75rem;}
.ec-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;font-size:.78rem;color:#fff;flex-shrink:0;}
.ec-author-name{font-family:var(--font-h);font-size:var(--s-1);font-weight:700;color:var(--text);}
.ec-author-meta{font-size:.7rem;color:var(--muted);margin-top:.1rem;}

/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
.ec-faq{background:var(--bg);border-top:1px solid var(--border);}
.ec-faq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;}
.ec-faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:1.4rem 1.5rem;transition:all .25s;}
.ec-faq-item:hover{border-color:rgba(0,212,255,.18);background:rgba(0,212,255,.03);}
.ec-faq-q{font-family:var(--font-h);font-size:var(--s0);font-weight:700;color:var(--text);margin-bottom:.5rem;display:flex;align-items:flex-start;gap:.5rem;}
.ec-faq-q::before{content:'Q';color:#00d4ff;opacity:.5;flex-shrink:0;font-size:.85em;}
.ec-faq-a{font-family:var(--font-b);font-size:var(--s-1);color:var(--muted);line-height:1.7;}

/* ════════════════════════════════════════
   CTA
════════════════════════════════════════ */
.ec-cta{position:relative;overflow:hidden;padding:clamp(5rem,10vw,8rem) 1.5rem;text-align:center;background:var(--bg);border-top:1px solid var(--border);}
.ec-cta__glow{position:absolute;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(0,212,255,.1),transparent 65%);top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;}
.ec-cta__inner{position:relative;z-index:1;max-width:600px;margin:0 auto;}
.ec-cta__title{font-family:var(--font-h);font-size:var(--s3);font-weight:900;line-height:1.15;margin:.9rem 0 .85rem;}
.ec-cta__hl{background:linear-gradient(135deg,#fbbf24,#f97316);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.ec-cta__sub{font-family:var(--font-b);font-size:var(--s0);color:var(--muted);line-height:1.7;margin-bottom:2.2rem;}

/* scroll reveal */
.ec-reveal{opacity:0;transform:translateY(24px);transition:opacity .55s ease,transform .55s ease;}
.ec-reveal.ec-visible{opacity:1;transform:translateY(0);}

/* responsive */
@media(max-width:768px){
  .ec-hero__title{font-size:clamp(2.8rem,11vw,4rem);}
  .ec-flow-strip{padding:.9rem 1rem;gap:1rem;}
}


/* ════════════════════════════════════════════════════════════
   PAGE LANDING PORTFOLIO
════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   LPB PORTFOLIO — SELF-CONTAINED DARK STYLES
   Scoped to .lpb-wrap so nothing leaks out.
───────────────────────────────────────────── */

/* Reset */
.lpb-wrap *, .lpb-wrap *::before, .lpb-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}


/* Animated dot-grid background */
.lpb-grid-bg {
  position: fixed;
  inset: 0;
  top: var(--header-height, 80px);
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  animation: lpbGridDrift 20s linear infinite;
}
@keyframes lpbGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}


/* ── View toggles ── */
.lpb-view { display: none; position: relative; z-index: 1; }
.lpb-view.active { display: block; }

/* ── Hero ── */
.lpb-hero {
  text-align: center;
  padding: 80px 24px 52px;
  position: relative;
}
.lpb-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 700px; height: 320px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.09), transparent 65%);
  pointer-events: none;
}
.lpb-hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  color: #00d4ff;
  font-size: 11px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase;
  padding: 6px 18px; border-radius: 100px;
  margin-bottom: 28px;
}
.lpb-dot {
  width: 7px; height: 7px;
  background: #00d4ff; border-radius: 50%;
  animation: lpbPulse 1.8s ease-in-out infinite;
}
@keyframes lpbPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(1.35); }
}
.lpb-hero h1 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 800; letter-spacing: -1.5px; line-height: 1.15;
  color: #f5f5f7; margin-bottom: 20px;
}
.lpb-grad {
  background: linear-gradient(135deg, #00d4ff 0%, #6d28d9 50%, #ff2d78 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lpb-hero p {
  max-width: 520px; margin: 0 auto;
  color: #86869a; font-size: 16px; line-height: 1.75;
}

/* ── Filter chips ── */
.lpb-filter-bar {
  display: flex; flex-wrap: wrap;
  justify-content: center; gap: 8px;
  padding: 0 24px 36px;
}
.lpb-chip {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #86869a; padding: 7px 20px; border-radius: 100px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: all .2s;
}
.lpb-chip:hover  { border-color: rgba(0,212,255,0.3); color: #00d4ff; background: rgba(0,212,255,0.06); }
.lpb-chip.on     { background: rgba(0,212,255,0.12); border-color: rgba(0,212,255,0.5); color: #00d4ff; font-weight: 700; }


/* ── Section header ── */
.lpb-portfolio-section { padding: 0 32px 80px; max-width: 1280px; margin: 0 auto; }
.lpb-section-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 28px;
}
.lpb-section-hdr h2 { font-size: 22px; font-weight: 700; color: #f5f5f7; }
.lpb-count-badge {
  background: rgba(0,212,255,0.1); border: 1px solid rgba(0,212,255,0.25);
  color: #00d4ff; font-size: 12px; font-weight: 600;
  padding: 4px 14px; border-radius: 100px;
}

/* ── Card grid ── */
.lpb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

/* ── Empty state ── */
.lpb-empty {
  grid-column: 1 / -1; text-align: center;
  padding: 80px 24px; color: #86869a;
}
.lpb-empty-icon { font-size: 48px; display: block; margin-bottom: 16px; }
.lpb-empty h3   { font-size: 20px; color: #f5f5f7; margin-bottom: 8px; }
.lpb-empty p    { font-size: 14px; }

/* ── Cards ── */
.lpb-card {
  background: #14141e;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; overflow: hidden;
  cursor: pointer;
  transition: transform .25s, border-color .25s, box-shadow .25s;
  animation: lpbFadeUp .45s ease both;
}
@keyframes lpbFadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lpb-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0,212,255,0.25);
  box-shadow: 0 16px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,212,255,0.08);
}
.lpb-card:hover .lpb-visit-overlay { opacity: 1; }
.lpb-card:hover .lpb-thumb img     { transform: scale(1.04); }

/* Thumbnail */
.lpb-thumb {
  position: relative; height: 210px;
  background: linear-gradient(135deg, #0f0f17, #1a1a2e);
  overflow: hidden;
}
.lpb-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block; transition: transform .4s ease;
}
.lpb-thumb-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 48px;
  background: linear-gradient(135deg, rgba(0,212,255,0.05), rgba(109,40,217,0.08));
}

/* Badges */
.lpb-card-overlay {
  position: absolute; top: 12px; left: 12px;
  display: flex; gap: 6px; flex-wrap: wrap;
}
.lpb-badge-cat {
  background: rgba(0,0,0,0.68); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.14); color: #f5f5f7;
  font-size: 10px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 6px;
}
.lpb-badge-new  { background: rgba(255,45,120,0.88); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; letter-spacing:.5px; }
.lpb-badge-feat { background: rgba(245,158,11,0.88); color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; letter-spacing:.5px; }

/* Visit overlay */
.lpb-visit-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.52); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .22s;
}
.lpb-visit-btn-inner {
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  color: #fff; font-size: 13px; font-weight: 700;
  padding: 10px 26px; border-radius: 8px;
  box-shadow: 0 4px 24px rgba(0,212,255,0.28);
}

/* Card body */
.lpb-card-body   { padding: 20px; }
.lpb-card-title  { font-size: 15px; font-weight: 700; color: #f5f5f7; margin-bottom: 12px; line-height: 1.4; }
.lpb-card-client { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lpb-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.lpb-client-name { font-size: 12px; color: #86869a; font-weight: 500; line-height: 1.4; }
.lpb-card-review {
  font-size: 13px; color: #86869a; line-height: 1.65; font-style: italic;
  margin-bottom: 16px; padding: 10px 13px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(0,212,255,0.3);
  border-radius: 0 6px 6px 0;
}
.lpb-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lpb-stars       { color: #f59e0b; font-size: 13px; letter-spacing: 1px; }
.lpb-rating-num  { font-size: 12px; color: #86869a; font-weight: 600; }
.lpb-card-url {
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: #00d4ff; text-decoration: none;
  font-weight: 500; opacity: .8; transition: opacity .2s;
}
.lpb-card-url:hover { opacity: 1; }
.lpb-card-url span { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* ── Modal ── */
.lpb-modal {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(0,0,0,0.78); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.lpb-modal.open { opacity: 1; pointer-events: all; }
.lpb-modal-box {
  background: #14141e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px; max-width: 580px; width: 100%;
  overflow: hidden; position: relative;
  box-shadow: 0 40px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,212,255,0.1);
  transform: scale(.95) translateY(12px);
  transition: transform .28s cubic-bezier(.34,1.4,.64,1);
}
.lpb-modal.open .lpb-modal-box { transform: scale(1) translateY(0); }

.lpb-modal-thumb {
  width: 100%; overflow: hidden;
  background: linear-gradient(135deg, #0f0f17, #1a1a2e);
  line-height: 0;
}
.lpb-modal-thumb img {
  width: 100%; height: auto;
  max-height: 320px;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.lpb-modal-thumb-ph { width: 100%; height: 180px; display: flex; align-items: center; justify-content: center; font-size: 58px; }

.lpb-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: rgba(0,0,0,0.62); backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.12); color: #f5f5f7;
  border-radius: 50%; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.lpb-modal-close:hover { background: rgba(255,45,120,0.35); }

.lpb-modal-body   { padding: 26px 28px 28px; }
.lpb-modal-cat    { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #00d4ff; margin-bottom: 8px; }
.lpb-modal-title  { font-size: 20px; font-weight: 800; color: #f5f5f7; margin-bottom: 18px; line-height: 1.3; }
.lpb-modal-client { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.lpb-modal-avatar { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: #fff; flex-shrink: 0; }
.lpb-modal-cn     { font-size: 14px; font-weight: 700; color: #f5f5f7; }
.lpb-modal-cr     { font-size: 12px; color: #86869a; margin-top: 2px; }
.lpb-modal-review {
  font-size: 14px; line-height: 1.7; color: #86869a; font-style: italic;
  padding: 14px 16px; margin-bottom: 20px;
  background: rgba(255,255,255,0.03);
  border-left: 2px solid rgba(0,212,255,0.4);
  border-radius: 0 8px 8px 0;
}
.lpb-modal-footer { display: flex; align-items: center; justify-content: space-between; }
.lpb-modal-stars  { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.lpb-modal-rn     { font-size: 12px; color: #86869a; margin-left: 6px; vertical-align: middle; }
.lpb-modal-cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  color: #fff !important; text-decoration: none;
  padding: 9px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 700;
  transition: opacity .2s, transform .15s;
  box-shadow: 0 0 20px rgba(0,212,255,0.22);
}
.lpb-modal-cta:hover { opacity: .88; transform: translateY(-1px); }

/* ── Toast ── */
.lpb-toast {
  position: fixed; bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  color: #fff; padding: 12px 28px; border-radius: 100px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,212,255,0.3);
  z-index: 999999; opacity: 0; pointer-events: none;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .35s;
}
.lpb-toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .lpb-hero { padding: 48px 18px 36px; }
  .lpb-hero h1 { font-size: 2rem; }
  .lpb-portfolio-section { padding: 0 14px 60px; }
  .lpb-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════════════════════
   PAGE OUR STORY
════════════════════════════════════════════════════════════ */

/* ── Reset / base ─────────────────────── */
.os-hero, .os-section, .os-cta {
  position: relative;
  overflow: hidden;
  background: var(--bg, #0a0a0f);
}
.os-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.os-hero {
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(5rem,10vw,8rem) 1.5rem clamp(3rem,6vw,5rem);
}

/* BG layers */
.os-hero__bg { position:absolute; inset:0; z-index:0; }

.os-grid {
  position: absolute;
  inset: -30%;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size: 55px 55px;
  animation: os-grid-move 25s linear infinite;
}
@keyframes os-grid-move {
  from { transform:translate(0,0) }
  to   { transform:translate(55px,55px) }
}

.os-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: .4;
  pointer-events: none;
}
.os-orb--1 { width:600px;height:600px; background:radial-gradient(circle,#6d28d9,transparent 70%); top:-20%;left:-15%; animation:os-f1 11s ease-in-out infinite; }
.os-orb--2 { width:500px;height:500px; background:radial-gradient(circle,#00d4ff,transparent 70%); bottom:-15%;right:-12%; animation:os-f2 13s ease-in-out infinite; }
.os-orb--3 { width:320px;height:320px; background:radial-gradient(circle,#ff2d78,transparent 70%); top:50%;left:60%; animation:os-f3 9s ease-in-out infinite; }
@keyframes os-f1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} }
@keyframes os-f2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-35px,-25px)} }
@keyframes os-f3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-20px,20px)} }

.os-scan {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,.35), transparent);
  top: 0;
  animation: os-scan 6s ease-in-out infinite;
}
@keyframes os-scan {
  0%   { top:0%;   opacity:0 }
  10%  { opacity:1 }
  90%  { opacity:1 }
  100% { top:100%; opacity:0 }
}

.os-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 820px;
}

/* Badge */
.os-badge {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  background: rgba(0,212,255,.07);
  border: 1px solid rgba(0,212,255,.18);
  color: #00d4ff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .35rem .95rem;
  border-radius: 999px;
  margin-bottom: 1.4rem;
  animation: os-up .6s ease .1s both;
}
.os-badge__dot {
  width:6px;height:6px;border-radius:50%;
  background:#00d4ff;box-shadow:0 0 6px #00d4ff;
  animation: os-blink 1.4s ease-in-out infinite;
}
@keyframes os-blink { 0%,100%{opacity:1} 50%{opacity:.1} }

/* Title */
.os-hero__title {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: clamp(4rem,12vw,8rem);
  font-weight: 900;
  line-height: .95;
  margin: 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.os-title-line { display:block; overflow:hidden; }
.os-title-line--1 {
  color: rgba(240,240,245,.55);
  font-size: .55em;
  letter-spacing: .35em;
  text-transform: uppercase;
  animation: os-reveal .8s cubic-bezier(.22,1,.36,1) .3s both;
}
.os-title-line--2 {
  background: linear-gradient(135deg, #fff 0%, #00d4ff 50%, #6d28d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: os-reveal .8s cubic-bezier(.22,1,.36,1) .45s both;
}
@keyframes os-reveal {
  from{opacity:0;transform:translateY(110%)}
  to  {opacity:1;transform:translateY(0)}
}

.os-hero__sub {
  color: rgba(160,160,200,.75);
  font-size: clamp(.95rem,2vw,1.1rem);
  line-height: 1.75;
  max-width: 560px;
  margin: 0 auto 2.5rem;
  animation: os-up .7s ease .6s both;
}
.os-hero__sub strong { color: #f0f0f5; }

/* Counter strip */
.os-counter-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: 1.4rem 2rem;
  animation: os-up .7s ease .75s both;
}
.os-counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
}
.os-counter__num {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: clamp(1.6rem,3vw,2.2rem);
  font-weight: 900;
  color: #f0f0f5;
  line-height: 1;
}
.os-counter__sup {
  font-size: .55em;
  color: #00d4ff;
  vertical-align: super;
}
.os-counter__label {
  font-size: .7rem;
  color: rgba(160,160,192,.5);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-top: .3rem;
}
.os-counter-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,.08);
}
@media (max-width:600px) {
  .os-counter-divider { display:none; }
  .os-counter { padding: .6rem 1.2rem; }
  .os-counter-strip { gap: .5rem; }
}

/* ════════════════════════════════════════
   SHARED SECTION STYLES
════════════════════════════════════════ */
.os-section { padding: clamp(4rem,8vw,7rem) 0; }
.os-section-header { text-align:center; margin-bottom:3.5rem; }
.os-section-title {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: clamp(1.8rem,4vw,2.8rem);
  font-weight: 800;
  color: var(--text,#f0f0f5);
  margin: .5rem 0 .75rem;
  line-height: 1.2;
}
.os-section-sub { color:var(--muted,#a0a0c0); font-size:1rem; max-width:500px; margin:0 auto; }

/* ════════════════════════════════════════
   ORIGIN SECTION
════════════════════════════════════════ */
.os-origin__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
@media (max-width:768px) {
  .os-origin__grid { grid-template-columns:1fr; gap:2.5rem; }
}

.os-origin__text .section-tag { margin-bottom:.75rem; }
.os-origin__text h2 {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: clamp(1.6rem,3.5vw,2.4rem);
  font-weight: 800;
  color: var(--text,#f0f0f5);
  margin: 0 0 1.2rem;
  line-height: 1.2;
}
.os-origin__text p {
  color: var(--muted,#a0a0c0);
  line-height: 1.8;
  margin-bottom: 1rem;
  font-size: .98rem;
}
.os-origin__text strong { color: #f0f0f5; }

/* Founding card */
.os-founding-card {
  position: relative;
  border-radius: 1.4rem;
  padding: 2px;
  background: linear-gradient(135deg,#00d4ff,#6d28d9,#ff2d78);
  animation: os-card-glow 4s ease-in-out infinite;
}
@keyframes os-card-glow {
  0%,100% { box-shadow: 0 0 30px rgba(0,212,255,.25) }
  50%     { box-shadow: 0 0 60px rgba(109,40,217,.4) }
}
.os-founding-card__glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 50% 50%, rgba(0,212,255,.12), transparent 70%);
  pointer-events: none;
}
.os-founding-card__inner {
  background: #0d0d1a;
  border-radius: 1.3rem;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.os-founding-date {
  display: flex;
  align-items: center;
  gap: .8rem;
}
.os-founding-date__day {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  background: linear-gradient(135deg,#00d4ff,#6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.os-founding-date__month,
.os-founding-date__year {
  display: block;
  font-weight: 700;
}
.os-founding-date__month { font-size: 1.1rem; color: #f0f0f5; }
.os-founding-date__year  { font-size: .8rem;  color: rgba(160,160,192,.5); }

.os-founding-divider { height:1px; background:rgba(255,255,255,.07); }

.os-founding-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.os-founding-logo {
  width: 48px; height: 48px;
  border-radius: .75rem;
  background: linear-gradient(135deg,#00d4ff,#6d28d9);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading,'Syne',sans-serif);
  font-weight: 900;
  font-size: .95rem;
  color: #fff;
  flex-shrink: 0;
}
.os-founding-meta h3 {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #f0f0f5;
  margin: 0 0 .15rem;
}
.os-founding-meta span { font-size:.75rem; color:rgba(160,160,192,.5); }

.os-founding-quote {
  font-style: italic;
  color: rgba(160,160,200,.7);
  font-size: .88rem;
  line-height: 1.65;
  border-left: 2px solid rgba(0,212,255,.35);
  padding-left: .9rem;
  margin: 0;
}

.os-founding-age {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(0,229,160,.07);
  border: 1px solid rgba(0,229,160,.18);
  color: rgba(0,229,160,.9);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .3rem .8rem;
  border-radius: 999px;
  align-self: flex-start;
}
.os-founding-age::before {
  content: '●';
  font-size: .5rem;
  color: #00e5a0;
}

/* ════════════════════════════════════════
   TIMELINE
════════════════════════════════════════ */
.os-timeline {
  position: relative;
  padding: 1rem 0;
}

/* Centre line */
.os-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(0,212,255,.2) 10%, rgba(0,212,255,.2) 90%, transparent);
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .os-timeline::before { left: 20px; }
}

.os-tl-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3.5rem;
  position: relative;
}
.os-tl-item--left  { flex-direction: row; }
.os-tl-item--right { flex-direction: row-reverse; }

@media (max-width:768px) {
  .os-tl-item--left,
  .os-tl-item--right { flex-direction: row; padding-left: 3rem; }
}

/* Dot */
.os-tl-dot {
  position: absolute;
  left: 50%;
  top: 1rem;
  transform: translateX(-50%);
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  z-index: 2;
  flex-shrink: 0;
}
.os-tl-dot--launch { background:rgba(0,212,255,.15);  border:1px solid rgba(0,212,255,.35); }
.os-tl-dot--win    { background:rgba(0,229,160,.12);  border:1px solid rgba(0,229,160,.3);  }
.os-tl-dot--product{ background:rgba(109,40,217,.15); border:1px solid rgba(109,40,217,.35);}
.os-tl-dot--now    {
  background:rgba(0,212,255,.15);  border:1px solid rgba(0,212,255,.35);
  box-shadow: 0 0 20px rgba(0,212,255,.3);
  animation: os-dot-pulse 2s ease-in-out infinite;
}
@keyframes os-dot-pulse {
  0%,100%{ box-shadow:0 0 20px rgba(0,212,255,.3) }
  50%    { box-shadow:0 0 40px rgba(0,212,255,.6) }
}
@media (max-width:768px) {
  .os-tl-dot { left:0; transform:none; width:36px;height:36px; font-size:.9rem; }
}

/* Card */
.os-tl-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: 1.5rem;
  width: calc(50% - 3.5rem);
  transition: border-color .3s, transform .3s;
}
.os-tl-card:hover {
  border-color: rgba(0,212,255,.2);
  transform: translateY(-3px);
}
.os-tl-card--active {
  border-color: rgba(0,212,255,.25) !important;
  background: rgba(0,212,255,.04) !important;
}
@media (max-width:768px) {
  .os-tl-card { width:100%; }
}

.os-tl-date {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(0,212,255,.7);
  font-weight: 600;
  margin-bottom: .5rem;
}
.os-tl-card h3 {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: #f0f0f5;
  margin: 0 0 .6rem;
}
.os-tl-card p {
  color: rgba(160,160,192,.75);
  font-size: .88rem;
  line-height: 1.7;
  margin: 0 0 .9rem;
}

.os-tl-pill {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .2rem .65rem;
  border-radius: 999px;
}
.os-tl-pill--blue   { background:rgba(0,212,255,.1);  color:#00d4ff;  border:1px solid rgba(0,212,255,.2);  }
.os-tl-pill--green  { background:rgba(0,229,160,.1);  color:#00e5a0;  border:1px solid rgba(0,229,160,.2);  }
.os-tl-pill--purple { background:rgba(109,40,217,.1); color:#a78bfa;  border:1px solid rgba(109,40,217,.25);}
.os-tl-pill--cyan   { background:rgba(0,212,255,.1);  color:#00d4ff;  border:1px solid rgba(0,212,255,.2);  }

/* Scroll-reveal */
.os-tl-animate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.os-tl-animate.os-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ════════════════════════════════════════
   VALUES
════════════════════════════════════════ */
.os-values { background: rgba(255,255,255,.01); }
.os-values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.os-value-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 1rem;
  padding: 1.8rem 1.5rem;
  transition: border-color .3s, transform .3s;
}
.os-value-card:hover {
  border-color: rgba(0,212,255,.2);
  transform: translateY(-4px);
}
.os-value-icon {
  width: 52px; height: 52px;
  border-radius: .75rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}
.os-value-card h3 {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: 1rem;
  font-weight: 700;
  color: #f0f0f5;
  margin: 0 0 .6rem;
}
.os-value-card p {
  color: rgba(160,160,192,.7);
  font-size: .88rem;
  line-height: 1.7;
  margin: 0;
}

/* ════════════════════════════════════════
   CTA
════════════════════════════════════════ */
.os-cta {
  padding: clamp(4rem,8vw,6rem) 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
}
.os-cta__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, rgba(0,212,255,.08), transparent 65%);
  pointer-events: none;
}
.os-cta__inner { position:relative; z-index:1; }
.os-cta__title {
  font-family: var(--font-heading,'Syne',sans-serif);
  font-size: clamp(1.8rem,4vw,2.8rem);
  font-weight: 800;
  color: #f0f0f5;
  margin: 0 0 .75rem;
}
.os-cta__sub {
  color: rgba(160,160,192,.7);
  font-size: 1rem;
  margin: 0 0 2rem;
}
.os-cta__btn {
  font-size: 1.05rem;
  padding: .9rem 2.4rem;
}

/* ── Shared animations ─────────────────── */
@keyframes os-up {
  from{opacity:0;transform:translateY(20px)}
  to  {opacity:1;transform:translateY(0)}
}


/* ════════════════════════════════════════════════════════════
   PAGE PRICING
════════════════════════════════════════════════════════════ */

:root{--accent:#00d4ff;--accent2:#ff2d78;--accent3:#6d28d9;--font-h:'Syne',-apple-system,"SF Pro Display","Helvetica Neue",Arial,sans-serif;--font-b:'DM Sans',-apple-system,"SF Pro Text","Helvetica Neue",Arial,sans-serif;--bg:#08080e;--surface:#0f0f17;--card:#14141e;--border:rgba(255,255,255,.07);--text:#f5f5f7;--muted:#86869a;--s-1:clamp(.75rem,1.8vw,.875rem);--s0:clamp(.875rem,2vw,1rem);--s1:clamp(1rem,2.5vw,1.25rem);--s2:clamp(1.25rem,3vw,1.6rem);--s3:clamp(1.6rem,4vw,2.4rem);--s4:clamp(2rem,5vw,3.4rem);--s5:clamp(2.8rem,7vw,5.5rem);--nav-h:68px;--r:16px;--mega-bg:#0d0d18}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body.pricing-page{background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:var(--s0);line-height:1.6;overflow-x:hidden}

/* HERO */
.cfu-hero{position:relative;padding:calc(var(--nav-h) + 80px) 24px 80px;text-align:center;overflow:hidden}
.cfu-hero::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 60% at 50% -10%,rgba(0,212,255,.18) 0%,transparent 60%),radial-gradient(ellipse 50% 40% at 80% 60%,rgba(109,40,217,.12) 0%,transparent 55%),radial-gradient(ellipse 40% 30% at 20% 70%,rgba(255,45,120,.08) 0%,transparent 50%);pointer-events:none}
.cfu-hero::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 0%,black 30%,transparent 70%);pointer-events:none}
.hero-label{display:inline-flex;align-items:center;gap:8px;font-size:var(--s-1);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:100px;padding:6px 16px;margin-bottom:24px;position:relative;z-index:1}
.hero-label span{width:6px;height:6px;background:var(--accent);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}
.cfu-hero h1{font-family:var(--font-h);font-size:var(--s5);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin-bottom:20px;position:relative;z-index:1}
.gradient-text{background:linear-gradient(135deg,var(--accent) 0%,#a78bfa 50%,var(--accent2) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cfu-hero p{font-size:var(--s1);color:var(--muted);max-width:480px;margin:0 auto;position:relative;z-index:1}

/* STATIC PRICING */
.cfu-pricing{padding:0 24px 100px;max-width:1100px;margin:0 auto}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media(max-width:780px){.pricing-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:36px 32px 32px;position:relative;transition:transform .3s,border-color .3s,box-shadow .3s;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(255,255,255,.03) 0%,transparent 70%);pointer-events:none}
.card:hover{transform:translateY(-6px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.card.featured{border-color:rgba(0,212,255,.3);background:linear-gradient(160deg,#161625 0%,#12121e 100%);transform:scale(1.04)}
.card.featured:hover{transform:scale(1.04) translateY(-6px)}
.card.featured::after{content:'';position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:linear-gradient(90deg,var(--accent3),var(--accent),var(--accent3));border-radius:var(--r) var(--r) 0 0}
.card-badge{display:inline-block;font-size:var(--s-1);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);background:rgba(0,212,255,.1);border:1px solid rgba(0,212,255,.25);border-radius:100px;padding:4px 12px;margin-bottom:20px}
.card-tier{font-family:var(--font-h);font-size:var(--s-1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.card-price{display:flex;align-items:baseline;gap:4px;margin-bottom:8px}
.price-currency{font-family:var(--font-h);font-size:var(--s2);font-weight:600;color:var(--muted);margin-top:6px}
.price-amount{font-family:var(--font-h);font-size:var(--s4);font-weight:800;color:var(--text);letter-spacing:-.02em;line-height:1}
.price-note{font-size:var(--s-1);color:var(--muted);margin-bottom:28px}
.card-divider{height:1px;background:var(--border);margin-bottom:24px}
.features-list{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:32px}
.features-list li{display:flex;align-items:center;gap:12px;font-size:var(--s0);color:var(--text)}
.feat-icon{width:20px;height:20px;flex-shrink:0;background:rgba(0,212,255,.1);border-radius:6px;display:flex;align-items:center;justify-content:center}
.feat-icon svg{width:12px;height:12px;stroke:var(--accent)}
.card.corporate .feat-icon{background:rgba(109,40,217,.15)}
.card.corporate .feat-icon svg{stroke:#a78bfa}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px 24px;border-radius:12px;font-family:var(--font-h);font-size:var(--s0);font-weight:700;letter-spacing:.03em;cursor:pointer;border:none;transition:all .25s;text-decoration:none}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent);background:rgba(0,212,255,.05)}
.btn-primary{background:linear-gradient(135deg,var(--accent3),var(--accent));color:#fff;box-shadow:0 8px 32px rgba(0,212,255,.2)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,212,255,.35)}
.btn-corporate{background:linear-gradient(135deg,#4c1d95,var(--accent3));color:#fff;box-shadow:0 8px 32px rgba(109,40,217,.25)}
.btn-corporate:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(109,40,217,.45)}

/* DYNAMIC SHORTCODE — full width, no container */
.cfu-pricing-dynamic{width:100%;padding-bottom:80px}
.cfu-pricing-dynamic>*{width:100%!important;max-width:100%!important;box-sizing:border-box}

/* TRUST */
.cfu-trust{display:flex;align-items:center;justify-content:center;gap:32px;padding:0 24px 80px;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:var(--s-1);color:var(--muted)}
.trust-item svg{width:18px;height:18px;stroke:var(--accent);flex-shrink:0}

/* FAQ */
.cfu-faq{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:80px 24px}
.section-header{text-align:center;margin-bottom:56px}
.section-eyebrow{display:inline-block;font-size:var(--s-1);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.section-title{font-family:var(--font-h);font-size:var(--s4);font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--text)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:900px;margin:0 auto}
@media(max-width:640px){.faq-grid{grid-template-columns:1fr}}
.faq-item{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px;transition:border-color .25s;cursor:pointer}
.faq-item:hover{border-color:rgba(0,212,255,.2)}
.faq-item summary{list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-family:var(--font-h);font-size:var(--s0);font-weight:700;color:var(--text);line-height:1.4}
.faq-icon{width:24px;height:24px;flex-shrink:0;background:rgba(0,212,255,.1);border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .25s,transform .25s;margin-top:2px}
details[open] .faq-icon{background:rgba(0,212,255,.2);transform:rotate(45deg)}
.faq-icon svg{width:14px;height:14px;stroke:var(--accent)}
.faq-a{margin-top:16px;font-size:var(--s-1);color:var(--muted);line-height:1.7;border-top:1px solid var(--border);padding-top:16px}

/* CTA */
.cfu-cta-bar{padding:60px 24px;text-align:center}
.cfu-cta-bar p{font-size:var(--s1);color:var(--muted);margin-bottom:20px}
.btn-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 36px;background:transparent;border:1px solid rgba(0,212,255,.35);border-radius:12px;color:var(--accent);font-family:var(--font-h);font-size:var(--s0);font-weight:700;letter-spacing:.05em;cursor:pointer;transition:all .25s;text-decoration:none}
.btn-cta:hover{background:rgba(0,212,255,.08);border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 32px rgba(0,212,255,.15)}

/* TESTIMONIAL */
.cfu-testimonial{background:var(--mega-bg);border-top:1px solid var(--border);padding:80px 24px;text-align:center;position:relative;overflow:hidden}
.cfu-testimonial::before{content:'\275D';position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-size:200px;color:rgba(0,212,255,.04);font-family:Georgia,serif;line-height:1;pointer-events:none}
.testi-text{font-family:var(--font-h);font-size:var(--s3);font-weight:700;letter-spacing:-.02em;line-height:1.3;max-width:700px;margin:0 auto 24px;color:var(--text);position:relative;z-index:1}
.testi-text em{font-style:normal;background:linear-gradient(90deg,var(--accent),#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.testi-author{font-size:var(--s-1);color:var(--muted);letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}

/* FOOTER */
.cfu-footer{background:var(--surface);border-top:1px solid var(--border);padding:48px 24px}
.footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;align-items:center}
@media(max-width:640px){.footer-inner{grid-template-columns:1fr;text-align:center}}
.badge-ring{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,rgba(0,212,255,.15),rgba(109,40,217,.15));border:2px solid rgba(0,212,255,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.badge-ring span{font-family:var(--font-h);font-size:10px;font-weight:800;text-align:center;color:var(--accent);line-height:1.2;text-transform:uppercase;letter-spacing:.03em}
.footer-badge{display:flex;align-items:center;gap:16px}
.footer-badge-text strong{font-family:var(--font-h);font-weight:700;font-size:var(--s0);color:var(--text)}
.footer-badge-text small{display:block;font-size:var(--s-1);color:var(--muted);margin-top:4px}
.footer-partner{text-align:center}
.partner-label{font-size:var(--s-1);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.partner-logos{display:flex;flex-direction:column;gap:10px;align-items:center}
.partner-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--card);border:1px solid var(--border);border-radius:8px;font-size:var(--s-1);font-weight:600;color:var(--text);letter-spacing:.04em}
.partner-chip .dot{width:8px;height:8px;border-radius:50%}
.footer-affiliate{text-align:right}
@media(max-width:640px){.footer-affiliate{text-align:center}}
.footer-affiliate h4{font-family:var(--font-h);font-size:var(--s0);font-weight:700;color:var(--accent);margin-bottom:8px}
.footer-affiliate p{font-size:var(--s-1);color:var(--muted);margin-bottom:14px;line-height:1.6}
.btn-sm{display:inline-flex;padding:9px 20px;border:1px solid var(--border);border-radius:8px;font-size:var(--s-1);font-weight:600;color:var(--text);cursor:pointer;transition:all .2s;background:transparent;text-decoration:none}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.footer-bottom{max-width:1100px;margin:36px auto 0;padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.footer-bottom p{font-size:var(--s-1);color:var(--muted)}
.social-links{display:flex;gap:12px}
.social-link{width:36px;height:36px;background:var(--card);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;text-decoration:none;transition:all .2s;color:var(--muted);font-size:14px;font-weight:700}
.social-link:hover{border-color:var(--accent);color:var(--accent)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.animate{opacity:0;animation:fadeUp .6s ease forwards}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}.d4{animation-delay:.4s}.d5{animation-delay:.55s}
h2.animate.d1 {
    font-size: 52px;
    margin-bottom: 20px;
}	
section.cfu-pricing-dynamic.animate.d3 {
    margin-top: 0;
    padding-top: 0;
}	
	
section.cfu-hero {
    padding-bottom: 0;
}


/* ════════════════════════════════════════════════════════════
   PAGE PROCESS
════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   PROCESS PAGE — SELF-CONTAINED DARK STYLES
   Scoped to .prc-wrap
═══════════════════════════════════════════════ */


.prc-wrap *, .prc-wrap *::before, .prc-wrap *::after {
  box-sizing: border-box; margin: 0; padding: 0;
}

.prc-wrap {
  position: relative;
  background: #08080e;
  color: #f5f5f7;
  font-family: 'DM Sans', 'Segoe UI', system-ui, sans-serif;
  overflow-x: hidden;
  overflow-y: hidden	

}

/* ── Dot-grid bg (matches portfolio) ── */
.prc-grid-bg {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
  animation: prcGridDrift 20s linear infinite;
}
@keyframes prcGridDrift {
  0%   { background-position: 0 0; }
  100% { background-position: 48px 48px; }
}

/* ── Radial glow orbs ── */
.prc-orb {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(80px); z-index: 0;
}
.prc-orb-1 {
  width: 500px; height: 500px;
  background: rgba(0,212,255,0.07);
  top: -100px; left: -150px;
}
.prc-orb-2 {
  width: 400px; height: 400px;
  background: rgba(109,40,217,0.08);
  top: 400px; right: -100px;
}
.prc-orb-3 {
  width: 350px; height: 350px;
  background: rgba(255,45,120,0.06);
  bottom: 200px; left: 10%;
}


/* ══════════════════════════════
   HERO
══════════════════════════════ */
.prc-hero {
  text-align: center;
  padding: 52px 24px 48px;
  position: relative;
  padding-top: 90px;	
}
.prc-hero::before {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.1), transparent 65%);
  pointer-events: none;
}

.prc-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.22);
  color: #00d4ff;
  font-size: 11px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 6px 18px; border-radius: 100px;
  margin-bottom: 32px;
  font-family: 'DM Sans', sans-serif;
}
.prc-dot {
  width: 7px; height: 7px;
  background: #00d4ff; border-radius: 50%;
  animation: prcPulse 1.8s ease-in-out infinite;
}
@keyframes prcPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.4); }
}

.prc-hero h1 {
    font-family: 'Segoe UI', sans-serif;
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -2px;
    color: #f5f5f7;
    margin-bottom: 22px;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 25px;
}
	
.prc-grad {
  background: linear-gradient(135deg, #00d4ff 0%, #6d28d9 55%, #ff2d78 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.prc-hero p {
  max-width: 580px; margin: 0 auto 40px;
  color: #9d9db0; font-size: 18px; line-height: 1.8;
}

/* CTA button in hero */
.prc-hero-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  color: #fff; text-decoration: none;
  padding: 14px 32px; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 0 40px rgba(0,212,255,0.22);
  transition: opacity .2s, transform .15s;
}
.prc-hero-cta:hover { opacity: .88; transform: translateY(-2px); color: #fff; }
.prc-hero-cta svg { width: 16px; height: 16px; }

/* ══════════════════════════════
   INTRO METRICS ROW
══════════════════════════════ */
.prc-metrics {
  display: flex; justify-content: center; gap: 0;
  max-width: 700px; margin: 0 auto 88px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; overflow: hidden;
  position: relative; z-index: 1;
}
.prc-metric {
  flex: 1; text-align: center;
  padding: 22px 16px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.prc-metric:last-child { border-right: none; }
.prc-metric-num {
  font-family: 'Segoe UI', sans-serif;
  font-size: 26px; font-weight: 800;
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -1px;
}
.prc-metric-label { font-size: 12px; color: #86869a; margin-top: 4px; text-transform: uppercase; letter-spacing: .6px; }

/* ══════════════════════════════
   STEPS SECTION
══════════════════════════════ */
.prc-steps-section {
  max-width: 1100px; margin: 0 auto;
  padding: 0 32px 100px;
}
.prc-steps-header {
  text-align: center; margin-bottom: 72px;
}
.prc-steps-header h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #f5f5f7;
  letter-spacing: -1px; margin-bottom: 14px;
}
.prc-steps-header p { color: #9d9db0; font-size: 16px; max-width: 480px; margin: 0 auto; line-height: 1.75; }

/* Vertical timeline line */
.prc-steps { position: relative; }
.prc-steps::before {
  content: '';
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0,212,255,0.3) 10%,
    rgba(109,40,217,0.3) 50%,
    rgba(255,45,120,0.3) 90%,
    transparent 100%);
  transform: translateX(-50%);
}

/* Individual step */
.prc-step {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 0 24px;
  align-items: start;
  margin-bottom: 72px;
  animation: prcFadeUp .6s ease both;
}
.prc-step:last-child { margin-bottom: 0; }

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

/* Even steps flip content to right */
.prc-step:nth-child(odd)  .prc-step-content { grid-column: 1; text-align: right; padding-right: 16px; }
.prc-step:nth-child(odd)  .prc-step-node    { grid-column: 2; }
.prc-step:nth-child(odd)  .prc-step-card    { grid-column: 3; }

.prc-step:nth-child(even) .prc-step-content { grid-column: 3; text-align: left; padding-left: 16px; order: 3; }
.prc-step:nth-child(even) .prc-step-node    { grid-column: 2; order: 2; }
.prc-step:nth-child(even) .prc-step-card    { grid-column: 1; order: 1; text-align: right; }

/* Center node */
.prc-step-node {
  display: flex; flex-direction: column; align-items: center; gap: 0;
  padding-top: 4px;
}
.prc-step-num-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #08080e;
  border: 2px solid rgba(0,212,255,0.3);
  position: relative; z-index: 2;
  box-shadow: 0 0 0 6px #08080e, 0 0 24px rgba(0,212,255,0.15);
  transition: border-color .3s, box-shadow .3s;
}
.prc-step:hover .prc-step-num-wrap {
  border-color: rgba(0,212,255,0.8);
  box-shadow: 0 0 0 6px #08080e, 0 0 32px rgba(0,212,255,0.35);
}
.prc-step-num {
  font-family: 'Syne', sans-serif;
  font-size: 16px; font-weight: 800;
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Step label (left or right of node) */
.prc-step-content { padding-top: 14px; }
.prc-step-phase {
  font-size: 11px; font-weight: 700; letter-spacing: 1.5px;
  text-transform: uppercase; color: #00d4ff; margin-bottom: 8px;
}
.prc-step-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.75rem; font-weight: 800;
  color: #f5f5f7; line-height: 1.15;
  letter-spacing: -.5px;
}
.prc-step-duration {
  display: inline-block; margin-top: 10px;
  font-size: 12px; font-weight: 600; color: #86869a;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 3px 10px; border-radius: 100px;
}

/* Step card */
.prc-step-card {
  background: #14141e;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 16px; padding: 24px 26px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  text-align: left;
}
.prc-step:hover .prc-step-card {
  border-color: rgba(0,212,255,0.2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,212,255,0.08);
  transform: translateY(-3px);
}
.prc-step-desc {
  font-size: 15px; color: #9d9db0; line-height: 1.8; margin-bottom: 18px;
}
.prc-step-deliverables { display: flex; flex-direction: column; gap: 9px; }
.prc-deliverable {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: #c8c8d8;
}
.prc-deliverable-dot {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.prc-deliverable-dot.cyan   { background: rgba(0,212,255,0.15); color: #00d4ff; }
.prc-deliverable-dot.purple { background: rgba(109,40,217,0.2); color: #a855f7; }
.prc-deliverable-dot.pink   { background: rgba(255,45,120,0.15); color: #ff2d78; }
.prc-deliverable-dot.amber  { background: rgba(245,158,11,0.15); color: #f59e0b; }
.prc-deliverable-dot.green  { background: rgba(16,185,129,0.15); color: #10b981; }

/* ══════════════════════════════
   TOOLS SECTION
══════════════════════════════ */
.prc-tools-section {
  max-width: 1100px; margin: 0 auto;
  padding: 0 32px 100px;
}
.prc-section-label {
  text-align: center; margin-bottom: 52px;
}
.prc-section-label h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 800; color: #f5f5f7;
  letter-spacing: -1px; margin-bottom: 14px;
}
.prc-section-label p { color: #9d9db0; font-size: 16px; max-width: 460px; margin: 0 auto; line-height: 1.75; }

.prc-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.prc-tool {
  background: #14141e;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px; padding: 18px 20px;
  display: flex; align-items: center; gap: 12px;
  transition: border-color .2s, transform .2s;
  cursor: default;
}
.prc-tool:hover {
  border-color: rgba(0,212,255,0.25);
  transform: translateY(-2px);
}
.prc-tool-icon {
  width: 36px; height: 36px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; flex-shrink: 0;
}
.prc-tool-name { font-size: 14px; font-weight: 600; color: #f5f5f7; }
.prc-tool-use  { font-size: 12px; color: #86869a; margin-top: 2px; }

/* ══════════════════════════════
   FAQ SECTION
══════════════════════════════ */
.prc-faq-section {
  max-width: 760px; margin: 0 auto;
  padding: 0 32px 100px;
}
.prc-faq-item {
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  overflow: hidden; margin-bottom: 10px;
  background: #14141e;
  transition: border-color .2s;
}
.prc-faq-item.open { border-color: rgba(0,212,255,0.25); }
.prc-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; cursor: pointer;
  font-size: 16px; font-weight: 600; color: #f5f5f7;
  user-select: none;
}
.prc-faq-q:hover { color: #00d4ff; }
.prc-faq-icon {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  background: rgba(0,212,255,0.1);
  border: 1px solid rgba(0,212,255,0.2);
  color: #00d4ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 300;
  transition: transform .3s, background .2s;
}
.prc-faq-item.open .prc-faq-icon { transform: rotate(45deg); background: rgba(0,212,255,0.18); }
.prc-faq-a {
  padding: 0 24px; max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  font-size: 15px; color: #9d9db0; line-height: 1.8;
}
.prc-faq-item.open .prc-faq-a { max-height: 300px; padding: 0 24px 20px; }

/* ══════════════════════════════
   CTA BANNER
══════════════════════════════ */
.prc-cta-section {
  padding: 0 32px 100px;
  position: relative; z-index: 1;
}
.prc-cta-inner {
  max-width: 860px; margin: 0 auto;
  background: #14141e;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 24px; padding: 64px 48px;
  text-align: center;
  position: relative; overflow: hidden;
}
.prc-cta-inner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(0,212,255,0.07), transparent 60%);
  pointer-events: none;
}
.prc-cta-inner::after {
  content: '';
  position: absolute;
  top: -1px; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent);
}
.prc-cta-inner h2 {
  font-family: 'Syne', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800; letter-spacing: -1px;
  color: #f5f5f7; margin-bottom: 18px; position: relative;
}
.prc-cta-inner p {
  color: #9d9db0; font-size: 17px; line-height: 1.75;
  max-width: 500px; margin: 0 auto 36px; position: relative;
}
.prc-cta-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.prc-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, #00d4ff, #6d28d9);
  color: #fff; text-decoration: none;
  padding: 13px 30px; border-radius: 10px;
  font-size: 15px; font-weight: 600;
  box-shadow: 0 0 36px rgba(0,212,255,0.2);
  transition: opacity .2s, transform .15s;
}
.prc-btn-primary:hover { opacity: .88; transform: translateY(-2px); color: #fff; }
.prc-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: #f5f5f7; text-decoration: none;
  padding: 13px 30px; border-radius: 10px;
  font-size: 15px; font-weight: 500;
  transition: background .2s, border-color .2s, transform .15s;
}
.prc-btn-secondary:hover { background: rgba(255,255,255,0.09); border-color: rgba(0,212,255,0.3); transform: translateY(-2px); color: #f5f5f7; }

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 768px) {
  .prc-hero { padding: 40px 20px 40px; }
  .prc-hero h1 { font-size: 2.4rem; }
  .prc-metrics { max-width: calc(100% - 32px); margin: 0 16px 60px; }
  .prc-steps-section, .prc-tools-section, .prc-faq-section, .prc-cta-section { padding-left: 16px; padding-right: 16px; }

  /* Mobile: vertical single-column steps */
  .prc-steps::before { left: 24px; }
  .prc-step {
    grid-template-columns: 48px 1fr !important;
    gap: 0 16px;
    margin-bottom: 48px;
  }
  .prc-step:nth-child(odd)  .prc-step-content,
  .prc-step:nth-child(even) .prc-step-content {
    grid-column: 2; text-align: left; padding: 0; order: 2;
  }
  .prc-step:nth-child(odd)  .prc-step-node,
  .prc-step:nth-child(even) .prc-step-node   { grid-column: 1; order: 1; }
  .prc-step:nth-child(odd)  .prc-step-card,
  .prc-step:nth-child(even) .prc-step-card   {
    grid-column: 2; order: 3; text-align: left;
  }
  .prc-step-num-wrap { width: 44px; height: 44px; }
  .prc-cta-inner { padding: 40px 24px; }
  .prc-tools-grid { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════
   SCROLL REVEAL
══════════════════════════════ */
.prc-reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.prc-reveal.visible { opacity: 1; transform: translateY(0); }


/* ════════════════════════════════════════════════════════════
   PAGE REDESIGN SERVICE
════════════════════════════════════════════════════════════ */

/* ── layout helpers ─────────────────────────────────── */
.rs-container { max-width:1120px; margin:0 auto; padding:0 1.5rem; }
.rs-section   { padding: clamp(4rem,8vw,7rem) 0; }

/* ── section header ─────────────────────────────────── */
.rs-section-header { text-align:center; margin-bottom:3rem; }
.rs-tag {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(var(--accent-rgb,109,40,217),.1);
  border:1px solid rgba(var(--accent-rgb,109,40,217),.25);
  color:var(--accent,#a78bfa);
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .85rem; border-radius:999px; margin-bottom:.85rem;
}
.rs-section-title {
  font-family:var(--font-h);
  font-size:var(--s3); font-weight:800;
  color:var(--text); line-height:1.15; margin:0 0 .65rem;
}
.rs-section-sub { font-size:var(--s0); color:var(--muted); max-width:480px; margin:0 auto; }

/* ════════════════════════════════════════
   HERO
════════════════════════════════════════ */
.rs-hero {
  position:relative; overflow:hidden;
  min-height:92vh;
  display:flex; align-items:center; justify-content:center;
  padding:calc(var(--nav-h) + 4rem) 1.5rem clamp(3rem,6vw,5rem);
  background:var(--bg);
}

/* bg grid */
.rs-hero__bg { position:absolute; inset:0; z-index:0; }
.rs-grid {
  position:absolute; inset:-25%;
  background-image:
    linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
  background-size:60px 60px;
  animation:rs-grid-move 28s linear infinite;
}
@keyframes rs-grid-move { to { transform:translate(60px,60px); } }

.rs-orb {
  position:absolute; border-radius:50%;
  filter:blur(110px); opacity:.35; pointer-events:none;
}
.rs-orb--1 { width:650px;height:650px; background:radial-gradient(circle,#6d28d9,transparent 70%); top:-22%;left:-18%; animation:rs-f1 13s ease-in-out infinite; }
.rs-orb--2 { width:520px;height:520px; background:radial-gradient(circle,#00d4ff,transparent 70%); bottom:-18%;right:-14%; animation:rs-f2 11s ease-in-out infinite; }
.rs-orb--3 { width:320px;height:320px; background:radial-gradient(circle,#ff2d78,transparent 70%); top:45%;left:58%; animation:rs-f3 9s ease-in-out infinite; }
@keyframes rs-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(45px,30px)}}
@keyframes rs-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,-28px)}}
@keyframes rs-f3{0%,100%{transform:translate(0,0)}50%{transform:translate(-22px,22px)}}

.rs-scan {
  position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(0,212,255,.4),transparent);
  animation:rs-scan 7s ease-in-out infinite;
}
@keyframes rs-scan{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}

/* floating platform names */
.rs-float-logos { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.rs-fl {
  position:absolute;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.65rem;
  padding:.4rem .85rem;
  font-family:var(--font-h); font-weight:700;
  font-size:.72rem; color:rgba(240,240,255,.35);
  backdrop-filter:blur(6px);
  animation:rs-logo-float linear infinite;
}
.rs-fl:nth-child(1){top:16%;left:6%;   animation-duration:18s;}
.rs-fl:nth-child(2){top:26%;right:5%;  animation-duration:22s;animation-delay:-4s;}
.rs-fl:nth-child(3){top:62%;left:4%;   animation-duration:20s;animation-delay:-8s;}
.rs-fl:nth-child(4){top:70%;right:7%;  animation-duration:16s;animation-delay:-2s;}
.rs-fl:nth-child(5){top:48%;left:2%;   animation-duration:24s;animation-delay:-12s;}
.rs-fl:nth-child(6){top:10%;right:17%; animation-duration:19s;animation-delay:-6s;}
@keyframes rs-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}

/* hero inner */
.rs-hero__inner {
  position:relative; z-index:1;
  text-align:center; max-width:840px;
}

/* badge */
.rs-badge {
  display:inline-flex; align-items:center; gap:.45rem;
  background:rgba(0,212,255,.07);
  border:1px solid rgba(0,212,255,.2);
  color:#00d4ff;
  font-family:var(--font-h); font-size:.7rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.38rem 1rem; border-radius:999px;
  margin-bottom:1.6rem;
  animation:rs-up .6s ease .1s both;
}
.rs-badge__dot {
  width:6px; height:6px; border-radius:50%;
  background:#00d4ff; box-shadow:0 0 6px #00d4ff;
  animation:rs-blink 1.4s ease-in-out infinite;
}
@keyframes rs-blink{0%,100%{opacity:1}50%{opacity:.1}}

/* title */
.rs-hero__title {
  font-family:var(--font-h);
  font-size:var(--s5); font-weight:900;
  line-height:1; margin:0 0 1.3rem;
  display:flex; flex-direction:column; align-items:center;
  animation:rs-up .8s ease .25s both;
}
.rs-title--any {
  font-size:.42em; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(245,245,247,.4); display:block; margin-bottom:.15em;
}
.rs-title--main {
  background:linear-gradient(135deg,#fff 0%,#00d4ff 45%,#6d28d9 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; display:block;
}
.rs-title--sub {
  font-size:.5em; letter-spacing:.04em;
  background:linear-gradient(135deg,#00e5a0 0%,#00d4ff 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; display:block; margin-top:.1em;
}

.rs-hero__sub {
  font-family:var(--font-b); font-size:var(--s1);
  color:var(--muted); line-height:1.75;
  max-width:560px; margin:0 auto 2.2rem;
  animation:rs-up .7s ease .4s both;
}
.rs-hero__sub strong { color:var(--text); }

/* platform pills */
.rs-platform-pills {
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.5rem; margin-bottom:2.5rem;
  animation:rs-up .7s ease .55s both;
}
.rs-pill {
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);
  border-radius:999px; padding:.28rem .9rem;
  font-family:var(--font-b); font-size:var(--s-1); font-weight:500;
  color:rgba(245,245,247,.6);
  transition:all .25s;
}
.rs-pill:hover { background:rgba(0,212,255,.08); border-color:rgba(0,212,255,.25); color:#00d4ff; }
.rs-arrow { color:rgba(0,212,255,.4); font-size:var(--s-1); align-self:center; }

/* cta buttons */
.rs-hero__ctas {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:.9rem; animation:rs-up .7s ease .65s both;
}
.rs-btn-primary {
  background:linear-gradient(135deg,#00d4ff,#6d28d9);
  color:#fff; font-family:var(--font-h); font-weight:700;
  font-size:var(--s0); padding:.85rem 2.2rem;
  border-radius:999px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:.45rem;
  transition:transform .25s,box-shadow .25s;
}
.rs-btn-primary:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,212,255,.25); color:#fff; }
.rs-btn-ghost {
  background:transparent; color:var(--muted);
  font-family:var(--font-h); font-weight:600;
  font-size:var(--s0); padding:.85rem 1.8rem;
  border-radius:999px; border:1px solid var(--border);
  cursor:pointer; display:inline-flex; align-items:center; gap:.45rem;
  transition:all .25s;
}
.rs-btn-ghost:hover { border-color:rgba(255,255,255,.2); color:var(--text); transform:translateY(-2px); }

@keyframes rs-up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   PLATFORM MAP
════════════════════════════════════════ */
.rs-platforms { background:var(--bg); }
.rs-from-label, .rs-to-label {
  text-align:center;
  font-family:var(--font-h); font-size:.68rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:1rem;
}
.rs-from-label { color:var(--muted); }
.rs-to-label   { color:#00e5a0; }

.rs-from-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:.9rem; margin-bottom:2rem;
}
.rs-to-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.9rem; max-width:480px; margin:0 auto;
}
.rs-pf-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.2rem 1rem;
  text-align:center; transition:all .3s;
}
.rs-pf-card:hover {
  border-color:rgba(0,212,255,.25);
  background:rgba(0,212,255,.04);
  transform:translateY(-3px);
}
.rs-pf-card--dest { border-color:rgba(0,229,160,.15); background:rgba(0,229,160,.03); }
.rs-pf-card--dest:hover { border-color:rgba(0,229,160,.3); background:rgba(0,229,160,.07); }
.rs-pf-icon  { font-size:1.7rem; margin-bottom:.45rem; }
.rs-pf-name  { font-family:var(--font-h); font-size:var(--s0); font-weight:700; color:var(--text); }
.rs-pf-desc  { font-size:var(--s-1); color:var(--muted); margin-top:.2rem; }

.rs-big-arrow {
  text-align:center; padding:1.8rem 0;
  display:flex; flex-direction:column; align-items:center; gap:.45rem;
}
.rs-big-arrow__icon {
  width:56px; height:56px; border-radius:50%;
  background:linear-gradient(135deg,#00d4ff,#6d28d9);
  display:flex; align-items:center; justify-content:center;
  font-size:1.3rem;
  box-shadow:0 0 30px rgba(0,212,255,.3);
  animation:rs-pulse 2.5s ease-in-out infinite;
}
@keyframes rs-pulse{0%,100%{box-shadow:0 0 30px rgba(0,212,255,.3)}50%{box-shadow:0 0 55px rgba(0,212,255,.6)}}
.rs-big-arrow__label {
  font-family:var(--font-h); font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#00d4ff;
}

/* ════════════════════════════════════════
   PROCESS
════════════════════════════════════════ */
.rs-process { background:var(--surface); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.rs-process-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
}
.rs-process-step {
  background:var(--bg); padding:2rem 1.8rem; transition:background .3s;
}
.rs-process-step:hover { background:rgba(0,212,255,.03); }
.rs-step-num {
  font-family:var(--font-h); font-size:3.2rem; font-weight:900;
  color:rgba(0,212,255,.07); line-height:1; display:block; margin-bottom:.5rem;
}
.rs-step-icon {
  width:44px; height:44px; border-radius:.75rem;
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:.9rem;
}
.rs-step-icon--cyan   { background:rgba(0,212,255,.1);  }
.rs-step-icon--violet { background:rgba(109,40,217,.1); }
.rs-step-icon--pink   { background:rgba(255,45,120,.1); }
.rs-step-icon--green  { background:rgba(0,229,160,.1);  }
.rs-process-step h3 {
  font-family:var(--font-h); font-size:var(--s1); font-weight:700;
  color:var(--text); margin:0 0 .5rem;
}
.rs-process-step p { font-size:var(--s-1); color:var(--muted); line-height:1.7; margin:0; }
.rs-step-time {
  display:inline-flex; align-items:center; gap:.3rem;
  background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2);
  color:#00e5a0; font-family:var(--font-h);
  font-size:.65rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:.22rem .65rem; border-radius:999px; margin-top:.9rem;
}

/* ════════════════════════════════════════
   WHAT WE MIGRATE
════════════════════════════════════════ */
.rs-migrate { background:var(--bg); }
.rs-migrate-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1.4rem;
}
.rs-migrate-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.8rem 1.5rem;
  position:relative; overflow:hidden; transition:all .3s;
}
.rs-migrate-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; opacity:0; transition:opacity .3s;
}
.rs-mc--1::before { background:linear-gradient(90deg,#00d4ff,#6d28d9); }
.rs-mc--2::before { background:linear-gradient(90deg,#6d28d9,#ff2d78); }
.rs-mc--3::before { background:linear-gradient(90deg,#ff2d78,#00d4ff); }
.rs-mc--4::before { background:linear-gradient(90deg,#00e5a0,#00d4ff); }
.rs-migrate-card:hover { border-color:rgba(255,255,255,.14); transform:translateY(-5px); }
.rs-migrate-card:hover::before { opacity:1; }
.rs-mc-icon { font-size:1.8rem; margin-bottom:.9rem; }
.rs-migrate-card h3 {
  font-family:var(--font-h); font-size:var(--s1); font-weight:700;
  color:var(--text); margin:0 0 .5rem;
}
.rs-migrate-card p { font-size:var(--s-1); color:var(--muted); line-height:1.7; margin:0; }
.rs-tags { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.9rem; }
.rs-tags span {
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:999px; font-size:.65rem; font-weight:500;
  color:rgba(245,245,247,.5); padding:.15rem .6rem;
}

/* ════════════════════════════════════════
   RESULTS
════════════════════════════════════════ */
.rs-results {
  padding:4rem 1.5rem;
  background:rgba(0,212,255,.025);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.rs-results-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr) ;
  align-items:center; gap:1rem; text-align:center;
}
@media(max-width:768px){
  .rs-results-grid { grid-template-columns:repeat(2,1fr); }
  .rs-divider { display:none; }
}
.rs-stat {
  display:flex; flex-direction:column; align-items:center;
}
.rs-stat__num {
  font-family:var(--font-h);
  font-size:var(--s4); font-weight:900;
  color:var(--text); line-height:1;
}
.rs-stat__sup  { font-size:.45em; color:#00d4ff; vertical-align:super; }
.rs-stat__prefix { font-size:.6em; color:#00d4ff; vertical-align:super; }
.rs-stat__label {
  font-size:.7rem; color:var(--muted);
  text-transform:uppercase; letter-spacing:.07em;
  font-weight:500; margin-top:.35rem;
}
.rs-divider { width:1px; height:50px; background:var(--border); }

/* ════════════════════════════════════════
   TESTIMONIALS
════════════════════════════════════════ */
.rs-testi { background:var(--surface); }
.rs-testi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.4rem; }
.rs-testi-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.8rem; transition:all .3s;
}
.rs-testi-card:hover { border-color:rgba(0,212,255,.18); transform:translateY(-3px); }
.rs-stars { color:#fbbf24; font-size:.9rem; letter-spacing:.1em; margin-bottom:.75rem; }
.rs-testi-quote {
  font-family:var(--font-b); font-size:var(--s-1);
  color:rgba(245,245,247,.8); line-height:1.75;
  font-style:italic; margin-bottom:1.1rem;
}
.rs-testi-author { display:flex; align-items:center; gap:.75rem; }
.rs-avatar {
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,#00d4ff,#6d28d9);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-h); font-weight:700; font-size:.78rem; color:#fff;
}
.rs-author-name { font-family:var(--font-h); font-size:var(--s-1); font-weight:700; color:var(--text); }
.rs-author-meta { font-size:.7rem; color:var(--muted); margin-top:.1rem; }

/* ════════════════════════════════════════
   FAQ
════════════════════════════════════════ */
.rs-faq { background:var(--bg); border-top:1px solid var(--border); }
.rs-faq-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1rem; }
.rs-faq-item {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.4rem 1.5rem; transition:all .25s;
}
.rs-faq-item:hover { border-color:rgba(0,212,255,.18); background:rgba(0,212,255,.03); }
.rs-faq-q {
  font-family:var(--font-h); font-size:var(--s0); font-weight:700;
  color:var(--text); margin-bottom:.5rem;
  display:flex; align-items:flex-start; gap:.5rem;
}
.rs-faq-q::before { content:'?'; color:#00d4ff; opacity:.5; flex-shrink:0; }
.rs-faq-a { font-family:var(--font-b); font-size:var(--s-1); color:var(--muted); line-height:1.7; }

/* ════════════════════════════════════════
   CTA
════════════════════════════════════════ */
.rs-cta {
  position:relative; overflow:hidden;
  padding:clamp(5rem,10vw,8rem) 1.5rem;
  text-align:center; background:var(--bg);
  border-top:1px solid var(--border);
}
.rs-cta__glow {
  position:absolute; width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle,rgba(0,212,255,.1),transparent 65%);
  top:50%; left:50%; transform:translate(-50%,-50%);
  pointer-events:none;
}
.rs-cta__inner { position:relative; z-index:1; max-width:600px; margin:0 auto; }
.rs-cta__title {
  font-family:var(--font-h);
  font-size:var(--s4); font-weight:900;
  line-height:1.15; margin:.9rem 0 .85rem;
}
.rs-cta__highlight {
  background:linear-gradient(135deg,#00d4ff,#6d28d9);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text;
}
.rs-cta__sub { font-size:var(--s0); color:var(--muted); line-height:1.7; margin-bottom:2.2rem; }
.rs-cta__form {
  display:flex; gap:.7rem; flex-wrap:wrap;
  justify-content:center; max-width:460px; margin:0 auto;
}
.rs-cta__input {
  flex:1; min-width:180px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px; padding:.8rem 1.4rem;
  color:var(--text); font-family:var(--font-b);
  font-size:var(--s0); outline:none; transition:border-color .2s;
}
.rs-cta__input::placeholder { color:rgba(134,134,154,.4); }
.rs-cta__input:focus { border-color:rgba(0,212,255,.4); }
.rs-cta__note { font-size:.72rem; color:rgba(134,134,154,.35); margin-top:.9rem; }

/* ─── scroll-reveal base ────────────────────────── */
.rs-reveal {
  opacity:0; transform:translateY(24px);
  transition:opacity .55s ease, transform .55s ease;
}
.rs-reveal.rs-visible { opacity:1; transform:translateY(0); }

/* ─── responsive ────────────────────────────────── */
@media(max-width:768px){
  .rs-hero__title { font-size:clamp(2.8rem,12vw,4rem); }
  .rs-process-grid { grid-template-columns:1fr; gap:1px; }
  .rs-cta__form { flex-direction:column; }
  .rs-cta__input { min-width:100%; }
}


/* ════════════════════════════════════════════════════════════
   PAGE REVIEWS
════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────── */
.rev-page-hero {
  padding: clamp(4rem, 8vw, 7rem) 1.5rem clamp(3rem, 5vw, 5rem);
  text-align: center;
  background: var(--bg, #0a0a0f);
}
.rev-page-hero__inner { max-width: 720px; margin: 0 auto; }
.rev-page-hero__title {
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  margin: .6rem 0 1rem;
  color: var(--text, #f0f0f5);
}
.rev-page-hero__sub {
  color: var(--muted, #8888a8);
  font-size: var(--step-0, 1rem);
  margin-bottom: 2rem;
}
.rev-write-btn {
  font-size: 1.05rem;
  padding: .85rem 2.2rem;
  cursor: pointer;
}

/* ── No reviews placeholder ──────────── */
.rev-no-reviews {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted, #8888a8);
  font-size: 1.05rem;
  padding: 3rem 0;
}

/* ── Modal overrides ─────────────────── */
.rev-modal-box {
  max-width: 560px;
  width: 95%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 2.5rem 2rem;
  border-radius: 1.2rem;
  background: var(--card, #13131f);
  position: relative;
  scrollbar-width: thin;
}
.rev-modal-header {
  text-align: center;
  margin-bottom: 1.8rem;
}
.rev-modal-icon { font-size: 2.2rem; display: block; margin-bottom: .5rem; }
.rev-modal-header h3 {
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--text, #f0f0f5);
  margin: 0 0 .35rem;
}
.rev-modal-header p { color: var(--muted, #8888a8); font-size: .88rem; margin: 0; }

/* ── Form ────────────────────────────── */
.rev-form { display: flex; flex-direction: column; gap: 1.2rem; }
.rev-form__group { display: flex; flex-direction: column; gap: .35rem; }
.rev-form__group label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted, #8888a8);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.req { color: #ff2d78; }
.rev-form__group input,
.rev-form__group textarea {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem;
  color: var(--text, #f0f0f5);
  font-size: .95rem;
  padding: .7rem .95rem;
  outline: none;
  transition: border-color .2s;
  font-family: inherit;
  resize: vertical;
}
.rev-form__group input:focus,
.rev-form__group textarea:focus {
  border-color: var(--accent, #00d4ff);
  box-shadow: 0 0 0 3px rgba(0,212,255,.12);
}
.rev-char-count { font-size: .75rem; color: var(--muted, #8888a8); text-align: right; }
.rev-error { font-size: .78rem; color: #ff2d78; min-height: 1em; }

/* ── Star Picker ─────────────────────── */
.star-picker { display: flex; gap: .3rem; cursor: pointer; }
.star-opt {
  font-size: 1.8rem;
  color: rgba(255,255,255,.15);
  transition: color .15s, transform .15s;
  user-select: none;
}
.star-opt:hover,
.star-opt.active { color: #ffd700; transform: scale(1.15); }

/* ── Submit button ───────────────────── */
.rev-submit-btn {
  margin-top: .5rem;
  width: 100%;
  justify-content: center;
  font-size: 1rem;
  padding: .9rem;
}
.rev-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* ── Success state ───────────────────── */
.rev-success {
  text-align: center;
  padding: 2rem 1rem;
}
.rev-success span { font-size: 3rem; display: block; margin-bottom: 1rem; }
.rev-success h4 {
  font-family: var(--font-heading, 'Syne', sans-serif);
  font-size: 1.3rem;
  color: var(--text, #f0f0f5);
  margin: 0 0 .5rem;
}
.rev-success p { color: var(--muted, #8888a8); font-size: .9rem; }
	
section#testimonials {
    padding-top: 0;
}


/* ════════════════════════════════════════════════════════════
   SINGLE
════════════════════════════════════════════════════════════ */

.bl-mb { padding:4px 0; }
      .bl-mb label { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#666; margin-bottom:5px; }
      .bl-mb input[type=text], .bl-mb input[type=number], .bl-mb textarea { width:100%; font-size:13px; border:1px solid #ddd; border-radius:4px; padding:7px 9px; box-sizing:border-box; }
      .bl-mb textarea { height:100px; resize:vertical; line-height:1.6; font-family:inherit; }
      .bl-mb-note { font-size:10px; color:#aaa; margin-top:3px; display:block; }
      .bl-mb-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
      @media(max-width:700px){ .bl-mb-grid { grid-template-columns:1fr; } }

/* ── base ─────────────────────────────────────────── */
.sp-article { background:var(--bg); }

/* ════════════════════════════════════════
   HERO — gradient background, no featured image
════════════════════════════════════════ */
.sp-hero {
  position:relative; overflow:hidden;
  min-height:62vh; display:flex; align-items:flex-end;
  padding-bottom:0; background:var(--bg);
}
.sp-hero__bg { position:absolute; inset:0; z-index:0; }

/* Rich layered gradient that changes per-category via CSS */
.sp-hero__gradient {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 60% at 15% 50%, rgba(109,40,217,.28) 0%, transparent 60%),
    radial-gradient(ellipse 60% 80% at 85% 20%, rgba(0,212,255,.14) 0%, transparent 55%),
    radial-gradient(ellipse 50% 50% at 50% 90%, rgba(0,229,160,.08) 0%, transparent 60%),
    linear-gradient(160deg, #0c0818 0%, #07070e 40%, #080f1a 100%);
}
.sp-hero__grid {
  position:absolute; inset:-15%;
  background-image:
    linear-gradient(rgba(167,139,250,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(167,139,250,.04) 1px, transparent 1px);
  background-size:60px 60px;
  animation:sp-grid-scroll 35s linear infinite;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 100%);
}
@keyframes sp-grid-scroll { to { transform:translate(60px,60px); } }
.sp-hero__noise { position:absolute; inset:0; opacity:.04; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size:200px; }
.sp-hero__orb { position:absolute; border-radius:50%; filter:blur(110px); pointer-events:none; }
.sp-hero__orb--1 { width:600px;height:600px; background:radial-gradient(circle,rgba(109,40,217,.45),transparent 70%); top:-30%;left:-15%; opacity:.5; animation:sp-f1 14s ease-in-out infinite; }
.sp-hero__orb--2 { width:400px;height:400px; background:radial-gradient(circle,rgba(0,212,255,.35),transparent 70%); bottom:-10%;right:-8%; opacity:.35; animation:sp-f2 11s ease-in-out infinite; }
.sp-hero__orb--3 { width:250px;height:250px; background:radial-gradient(circle,rgba(0,229,160,.3),transparent 70%); top:20%;right:20%; opacity:.25; animation:sp-f3 9s ease-in-out infinite; }
@keyframes sp-f1{0%,100%{transform:translate(0,0)}50%{transform:translate(35px,25px)}}
@keyframes sp-f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-28px,-20px)}}
@keyframes sp-f3{0%,100%{transform:translate(0,0)}50%{transform:translate(-15px,15px)}}
.sp-hero__scan { position:absolute; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent,rgba(167,139,250,.3),transparent); animation:sp-scan 9s ease-in-out infinite; }
@keyframes sp-scan{0%{top:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}}

/* bottom fade into page bg */
.sp-hero::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:80px; z-index:1; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--bg));
}

.sp-hero__inner {
  position:relative; z-index:2;
  width:100%; max-width:800px; margin:0 auto;
  padding:calc(var(--nav-h,80px) + 3.5rem) 1.5rem 4.5rem;
}

/* breadcrumb */
.sp-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; font-family:var(--font-b); font-size:.72rem; color:rgba(245,245,247,.4); margin-bottom:1.4rem; }
.sp-breadcrumb a { color:rgba(245,245,247,.4); transition:color .2s; }
.sp-breadcrumb a:hover { color:rgba(245,245,247,.8); }
.sp-breadcrumb__current { color:rgba(245,245,247,.6); max-width:260px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* meta top */
.sp-meta-top { display:flex; align-items:center; gap:.6rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.sp-cat-badge { font-family:var(--font-h); font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:.28rem .8rem; border-radius:999px; background:rgba(167,139,250,.15); border:1px solid rgba(167,139,250,.35); color:#a78bfa; transition:all .2s; }
.sp-cat-badge:hover { background:rgba(167,139,250,.25); }
.sp-read-badge { font-family:var(--font-h); font-size:.68rem; font-weight:700; padding:.28rem .8rem; border-radius:999px; background:rgba(0,229,160,.08); border:1px solid rgba(0,229,160,.2); color:#00e5a0; }

/* title */
.sp-title {
  font-family:var(--font-h); font-size:clamp(2rem,5vw,3.4rem);
  font-weight:900; line-height:1.1; color:#fff;
  margin:0 0 .75rem; letter-spacing:-.02em;
  background:linear-gradient(135deg,#fff 0%,rgba(245,245,247,.85) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  animation:sp-up .8s ease .1s both;
}
.sp-subtitle { font-family:var(--font-b); font-size:clamp(1rem,2vw,1.2rem); color:rgba(245,245,247,.7); line-height:1.65; margin:0 0 1.8rem; animation:sp-up .8s ease .2s both; }

/* meta bar */
.sp-meta-bar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:1.2rem; animation:sp-up .7s ease .3s both; }
.sp-author-link { display:flex; align-items:center; gap:.75rem; }
.sp-author-avatar { width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid rgba(167,139,250,.4); }
.sp-author-avatar-fallback { width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#a78bfa);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:700;color:#fff;font-size:.9rem; }
.sp-author-name { font-family:var(--font-h); font-size:.85rem; font-weight:700; color:rgba(245,245,247,.9); }
.sp-author-role { font-family:var(--font-b); font-size:.7rem; color:rgba(245,245,247,.45); margin-top:.1rem; }
.sp-meta-bar__right { display:flex; align-items:center; gap:1.2rem; }
.sp-date { font-family:var(--font-b); font-size:.78rem; color:rgba(245,245,247,.45); }
.sp-share { display:flex; align-items:center; gap:.5rem; }
.sp-share-label { font-family:var(--font-h); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(245,245,247,.3); }
.sp-share-btn { width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);display:inline-flex;align-items:center;justify-content:center;color:rgba(245,245,247,.5);transition:all .2s; }
.sp-share-btn:hover { background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:#a78bfa; }

@keyframes sp-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ════════════════════════════════════════
   LAYOUT: single centred column, no TOC
════════════════════════════════════════ */
.sp-layout { background:var(--bg); padding:3rem 1.5rem 4rem; }
.sp-layout__inner { max-width:780px; margin:0 auto; }

/* ── TOC (hidden — kept in DOM for JS safety) ─────── */
.sp-toc { display:none; }

/* ════════════════════════════════════════
   KEY TAKEAWAYS
════════════════════════════════════════ */
.sp-takeaways {
  background:linear-gradient(135deg,rgba(167,139,250,.06),rgba(0,212,255,.04));
  border:1px solid rgba(167,139,250,.25); border-radius:var(--r);
  padding:1.5rem 1.75rem; margin-bottom:2.5rem;
}
.sp-takeaways__header { font-family:var(--font-h); font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#a78bfa; margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem; }
.sp-takeaways__icon { font-size:.8rem; }
.sp-takeaways__list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.55rem; }
.sp-takeaways__list li { font-family:var(--font-b); font-size:var(--s-1); color:rgba(245,245,247,.85); line-height:1.6; display:flex; align-items:flex-start; gap:.65rem; }
.sp-takeaways__list li::before { content:'→'; color:#a78bfa; font-weight:700; flex-shrink:0; margin-top:.05em; }

/* ════════════════════════════════════════
   ARTICLE BODY TYPOGRAPHY
════════════════════════════════════════ */
.sp-body { font-family:var(--font-b); color:rgba(245,245,247,.82); line-height:1.85; font-size:1.05rem; }

.sp-body h2 {
  font-family:var(--font-h); font-size:clamp(1.4rem,3vw,1.85rem);
  font-weight:800; color:var(--text); line-height:1.2;
  margin:2.8rem 0 1rem;
  padding-bottom:.6rem; border-bottom:1px solid rgba(167,139,250,.15);
  scroll-margin-top:calc(var(--nav-h,80px) + 1.5rem);
}
.sp-body h3 {
  font-family:var(--font-h); font-size:clamp(1.15rem,2.5vw,1.4rem);
  font-weight:700; color:var(--text); line-height:1.25;
  margin:2.2rem 0 .75rem;
  scroll-margin-top:calc(var(--nav-h,80px) + 1.5rem);
}
.sp-body h4 { font-family:var(--font-h); font-size:1.05rem; font-weight:700; color:var(--text); margin:1.8rem 0 .6rem; }
.sp-body p  { margin:0 0 1.4rem; }
.sp-body p:last-child { margin-bottom:0; }

/* Links */
.sp-body a { color:#a78bfa; text-decoration:underline; text-decoration-color:rgba(167,139,250,.35); text-underline-offset:3px; transition:all .2s; }
.sp-body a:hover { color:#fff; text-decoration-color:rgba(255,255,255,.4); }

/* Strong / em */
.sp-body strong { color:var(--text); font-weight:700; }
.sp-body em { color:rgba(245,245,247,.65); font-style:italic; }

/* Blockquote */
.sp-body blockquote {
  margin:2rem 0; padding:1.2rem 1.6rem;
  background:rgba(167,139,250,.05); border-left:3px solid #a78bfa;
  border-radius:0 var(--r) var(--r) 0;
  font-size:1.1rem; font-style:italic; color:rgba(245,245,247,.75);
  line-height:1.75;
}
.sp-body blockquote cite { display:block; font-size:.78rem; font-style:normal; color:var(--muted); margin-top:.6rem; }

/* Code — inline */
.sp-body code {
  font-family:monospace; font-size:.88em;
  background:rgba(0,212,255,.07); border:1px solid rgba(0,212,255,.15);
  color:rgba(0,212,255,.9); padding:.12em .45em; border-radius:.3rem;
}

/* Code — block */
.sp-body pre {
  background:#0e0e1c; border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r); padding:1.4rem 1.6rem; overflow-x:auto;
  margin:1.8rem 0; line-height:1.65; font-size:.88rem;
}
.sp-body pre code { background:none; border:none; padding:0; color:#e2e8f0; font-size:inherit; }

/* Lists */
.sp-body ul, .sp-body ol { padding-left:1.5rem; margin:0 0 1.4rem; }
.sp-body li { margin-bottom:.45rem; line-height:1.75; }
.sp-body ul li::marker { color:#a78bfa; }
.sp-body ol li::marker { color:#a78bfa; font-weight:700; }

/* Images */
.sp-body img { max-width:100%; border-radius:var(--r); border:1px solid var(--border); margin:1.5rem 0; display:block; }
.sp-body figure { margin:2rem 0; }
.sp-body figcaption { font-size:.78rem; color:var(--muted); text-align:center; margin-top:.5rem; font-style:italic; }

/* Tables */
.sp-body table { width:100%; border-collapse:collapse; margin:1.8rem 0; font-size:.9rem; }
.sp-body th { font-family:var(--font-h); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(167,139,250,.08); border:1px solid var(--border); padding:.7rem 1rem; color:#a78bfa; text-align:left; }
.sp-body td { border:1px solid var(--border); padding:.65rem 1rem; color:rgba(245,245,247,.75); }
.sp-body tr:hover td { background:rgba(255,255,255,.02); }

/* hr */
.sp-body hr { border:none; border-top:1px solid var(--border); margin:2.5rem 0; }

/* ── Tags ─────────────────────────────────────────── */
.sp-tags { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--border); }
.sp-tags__label { font-family:var(--font-h); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sp-tag-pill { font-family:var(--font-b); font-size:.75rem; padding:.25rem .75rem; border-radius:999px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); color:var(--muted); transition:all .2s; }
.sp-tag-pill:hover { border-color:rgba(167,139,250,.3); color:#a78bfa; background:rgba(167,139,250,.06); }

/* ── Post nav ─────────────────────────────────────── */
.sp-post-nav { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem; }
@media(max-width:600px){ .sp-post-nav { grid-template-columns:1fr; } }
.sp-nav-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.1rem 1.3rem;
  display:flex; flex-direction:column; gap:.3rem;
  transition:all .25s;
}
.sp-nav-card:hover { border-color:rgba(167,139,250,.3); transform:translateY(-2px); }
.sp-nav-card--next { text-align:right; }
.sp-nav-dir { font-family:var(--font-h); font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.sp-nav-title { font-family:var(--font-h); font-size:.88rem; font-weight:700; color:var(--text); line-height:1.35; }

/* ════════════════════════════════════════
   COMMENTS
════════════════════════════════════════ */
.sp-comments { margin-top:3rem; padding-top:2.5rem; border-top:1px solid var(--border); }

/* header */
.sp-cm-header { margin-bottom:1.75rem; }
.sp-cm-title { font-family:var(--font-h); font-size:var(--s2); font-weight:800; color:var(--text); margin:0; }

/* comment list */
.sp-cm-list { display:flex; flex-direction:column; gap:1.2rem; margin-bottom:3rem; }
.sp-cm-item {
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); padding:1.3rem 1.4rem;
  transition:border-color .2s;
}
.sp-cm-item:hover { border-color:rgba(167,139,250,.2); }
.sp-cm-item__avatar { flex-shrink:0; }
.sp-cm-item__avatar img { width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(167,139,250,.25); }
.sp-cm-item__initial { width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#6d28d9,#a78bfa);display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-weight:800;color:#fff;font-size:.95rem; }
.sp-cm-item__body { flex:1; min-width:0; }
.sp-cm-item__meta { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; margin-bottom:.55rem; }
.sp-cm-item__name { font-family:var(--font-h); font-size:.88rem; font-weight:700; color:var(--text); }
.sp-cm-item__sep { color:var(--muted); opacity:.4; }
.sp-cm-item__date { font-family:var(--font-b); font-size:.72rem; color:var(--muted); }
.sp-cm-item__text { font-family:var(--font-b); font-size:var(--s-1); color:rgba(245,245,247,.78); line-height:1.75; }
.sp-cm-item__text p { margin:0 0 .6rem; }
.sp-cm-item__text p:last-child { margin:0; }

/* success banner */
.sp-cm-success {
  display:flex; align-items:flex-start; gap:1rem;
  background:rgba(0,229,160,.06); border:1px solid rgba(0,229,160,.25);
  border-radius:var(--r); padding:1.2rem 1.4rem;
  font-family:var(--font-b); font-size:var(--s-1); color:rgba(245,245,247,.8);
  line-height:1.65; margin-top:1rem;
}
.sp-cm-success__icon { width:28px;height:28px;border-radius:50%;background:rgba(0,229,160,.15);border:1px solid rgba(0,229,160,.3);color:#00e5a0;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;flex-shrink:0; }

/* error banner */
.sp-cm-error {
  display:flex; align-items:center; gap:.65rem;
  background:rgba(255,45,120,.06); border:1px solid rgba(255,45,120,.2);
  border-radius:.5rem; padding:.85rem 1.1rem;
  font-family:var(--font-b); font-size:.82rem; color:rgba(255,100,140,.9);
  margin-bottom:1.25rem;
}

/* form wrapper */
.sp-cm-form-wrap { margin-top:2rem; }
.sp-cm-form-title { font-family:var(--font-h); font-size:var(--s2); font-weight:800; color:var(--text); margin:0 0 .3rem; }
.sp-cm-form-sub { font-family:var(--font-b); font-size:.78rem; color:var(--muted); margin:0 0 1.6rem; }

/* form */
.sp-cm-form { display:flex; flex-direction:column; gap:1.1rem; }
.sp-cm-form__row--two { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:560px){ .sp-cm-form__row--two { grid-template-columns:1fr; } }

.sp-cm-field { display:flex; flex-direction:column; gap:.35rem; }
.sp-cm-field label { font-family:var(--font-h); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--muted); }
.sp-cm-req { color:#a78bfa; }
.sp-cm-field input[type=text],
.sp-cm-field input[type=email],
.sp-cm-field textarea {
  background:var(--card); border:1px solid var(--border);
  border-radius:.55rem; padding:.75rem 1rem;
  color:var(--text); font-family:var(--font-b); font-size:var(--s-1);
  transition:border-color .2s, box-shadow .2s;
  width:100%; box-sizing:border-box;
}
.sp-cm-field input:focus,
.sp-cm-field textarea:focus { border-color:rgba(167,139,250,.5); outline:none; box-shadow:0 0 0 3px rgba(167,139,250,.08); }
.sp-cm-field input::placeholder,
.sp-cm-field textarea::placeholder { color:rgba(134,134,154,.35); }
.sp-cm-field textarea { height:130px; resize:vertical; line-height:1.7; }

/* ── Math captcha ─────────────────────────────── */
.sp-cm-captcha {
  background:linear-gradient(135deg,rgba(167,139,250,.05),rgba(0,212,255,.03));
  border:1px solid rgba(167,139,250,.2); border-radius:.65rem;
  padding:1.1rem 1.4rem;
  display:flex; align-items:center;
}
.sp-cm-captcha__puzzle { display:flex; flex-direction:column; gap:.55rem; }
.sp-cm-captcha__label { font-family:var(--font-h); font-size:.65rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(167,139,250,.7); }
.sp-cm-captcha__eq { display:flex; align-items:center; gap:.65rem; flex-wrap:wrap; }
.sp-cm-captcha__num {
  font-family:var(--font-h); font-size:1.55rem; font-weight:900;
  color:var(--text); background:var(--card);
  border:1px solid rgba(167,139,250,.25); border-radius:.45rem;
  width:52px; height:52px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
}
.sp-cm-captcha__op { font-family:var(--font-h); font-size:1.35rem; font-weight:800; color:#a78bfa; }
.sp-cm-captcha__input {
  font-family:var(--font-h); font-size:1.3rem; font-weight:800;
  width:72px; height:52px; text-align:center;
  background:var(--card); border:2px solid rgba(167,139,250,.35);
  border-radius:.45rem; color:var(--text);
  transition:border-color .2s, box-shadow .2s;
  -moz-appearance:textfield;
}
.sp-cm-captcha__input::-webkit-outer-spin-button,
.sp-cm-captcha__input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.sp-cm-captcha__input:focus { border-color:#a78bfa; outline:none; box-shadow:0 0 0 3px rgba(167,139,250,.12); }
.sp-cm-captcha__input::placeholder { color:rgba(134,134,154,.4); font-size:1rem; }

/* footer row */
.sp-cm-form__footer { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; }
.sp-cm-privacy { font-family:var(--font-b); font-size:.7rem; color:rgba(134,134,154,.4); margin:0; }

/* submit button */
.sp-cm-submit {
  display:inline-flex; align-items:center; gap:.55rem;
  background:linear-gradient(135deg,#a78bfa,#6d28d9);
  color:#fff; font-family:var(--font-h); font-weight:700; font-size:var(--s0);
  padding:.8rem 2rem; border-radius:999px; border:none; cursor:pointer;
  transition:all .25s; position:relative; overflow:hidden;
}
.sp-cm-submit::before { content:''; position:absolute; inset:0; background:rgba(255,255,255,0); transition:background .2s; }
.sp-cm-submit:hover { transform:translateY(-2px); box-shadow:0 12px 30px rgba(109,40,217,.35); }
.sp-cm-submit:hover::before { background:rgba(255,255,255,.06); }
.sp-cm-submit:active { transform:translateY(0); }
.sp-cm-submit__icon { transition:transform .2s; }
.sp-cm-submit:hover .sp-cm-submit__icon { transform:translateX(4px); }

/* ════════════════════════════════════════
   CTA SECTION
════════════════════════════════════════ */
.sp-cta {
  position:relative; overflow:hidden; text-align:center;
  padding:clamp(4rem,8vw,7rem) 1.5rem;
  background:var(--surface); border-top:1px solid var(--border);
}
.sp-cta__glow { position:absolute; width:600px;height:600px; border-radius:50%; background:radial-gradient(circle,rgba(109,40,217,.1),transparent 65%); top:50%;left:50%;transform:translate(-50%,-50%); pointer-events:none; }
.sp-cta__inner { position:relative; z-index:1; max-width:560px; margin:0 auto; }
.sp-cta__tag { font-family:var(--font-h); font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#a78bfa; margin-bottom:.9rem; }
.sp-cta__title { font-family:var(--font-h); font-size:clamp(1.7rem,4vw,2.8rem); font-weight:900; line-height:1.15; margin:0 0 2rem; color:var(--text); }
.sp-cta__hl { background:linear-gradient(135deg,#a78bfa,#00d4ff); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.sp-cta-btn { display:inline-flex; align-items:center; gap:.5rem; background:linear-gradient(135deg,#a78bfa,#6d28d9); color:#fff; font-family:var(--font-h); font-weight:700; font-size:var(--s1); padding:.95rem 2.5rem; border-radius:999px; transition:all .3s; }
.sp-cta-btn:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(109,40,217,.35); color:#fff; opacity:.9; }
.sp-cta-note { font-family:var(--font-b); font-size:.72rem; color:rgba(134,134,154,.4); margin-top:1rem; }

/* ════════════════════════════════════════
   RELATED
════════════════════════════════════════ */
.sp-related { background:var(--bg); border-top:1px solid var(--border); padding:clamp(3rem,6vw,5rem) 1.5rem; }
.sp-related__inner { max-width:1060px; margin:0 auto; }
.sp-related__header { margin-bottom:2rem; }
.sp-tag-label { font-family:var(--font-h); font-size:.65rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#a78bfa; margin-bottom:.5rem; }
.sp-related__header h3 { font-family:var(--font-h); font-size:var(--s3); font-weight:800; color:var(--text); margin:0; }
.sp-related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; }
.sp-rel-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:all .3s;
}
.sp-rel-card:hover { transform:translateY(-4px); border-color:rgba(167,139,250,.25); }
.sp-rel-card__img { aspect-ratio:16/9; overflow:hidden; }
.sp-rel-card__img img { width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s; }
.sp-rel-card:hover .sp-rel-card__img img { transform:scale(1.06); }
.sp-rel-card__no-img { width:100%;height:100%;background:linear-gradient(135deg,rgba(109,40,217,.1),rgba(0,212,255,.06));display:flex;align-items:center;justify-content:center;font-family:var(--font-h);font-size:1.3rem;font-weight:900;color:rgba(167,139,250,.25);letter-spacing:.1em; }
.sp-rel-card__body { padding:1.1rem; flex:1; display:flex; flex-direction:column; gap:.35rem; }
.sp-rel-cat { font-family:var(--font-h); font-size:.62rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#a78bfa; }
.sp-rel-title { font-family:var(--font-h); font-size:var(--s0); font-weight:700; color:var(--text); line-height:1.3; margin:0; }
.sp-rel-meta { font-family:var(--font-b); font-size:.7rem; color:var(--muted); }


/* ════════════════════════════════════════════════════════════
   TEMPLATE ROOT
════════════════════════════════════════════════════════════ */

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

/* ── Outer wrapper ──────────────────── */
.root-wrap {
  position: relative;
  min-height: 50vh;
  background: #060610;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* ── Animated grid ──────────────────── */
.root-grid {
  position: absolute;
  inset: -50%;
  background-image:
    linear-gradient(rgba(0,212,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,.045) 1px, transparent 1px);
  background-size: 60px 60px;
  animation: root-grid-drift 22s linear infinite;
  pointer-events: none;
}
@keyframes root-grid-drift {
  from { transform: translate(0, 0);       }
  to   { transform: translate(60px, 60px); }
}

/* ── Ambient orbs ───────────────────── */
.root-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .4;
  pointer-events: none;
}
.root-orb--1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, #6d28d9 0%, transparent 70%);
  top: -18%; left: -12%;
  animation: root-float1 10s ease-in-out infinite;
}
.root-orb--2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, #00d4ff 0%, transparent 70%);
  bottom: -12%; right: -10%;
  animation: root-float2 12s ease-in-out infinite;
}
.root-orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #ff2d78 0%, transparent 70%);
  top: 55%; left: 55%;
  animation: root-float3 8s ease-in-out infinite;
}
@keyframes root-float1 { 0%,100%{transform:translate(0,0)}   50%{transform:translate(45px,35px)}   }
@keyframes root-float2 { 0%,100%{transform:translate(0,0)}   50%{transform:translate(-38px,-28px)} }
@keyframes root-float3 { 0%,100%{transform:translate(0,0)}   50%{transform:translate(-22px,22px)}  }

/* ── Particle canvas ────────────────── */
.root-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── Centre stage ───────────────────── */
.root-stage {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-height: 50vh;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* Block position — moves the article box itself */
.root-stage[data-alignment="left"]   { justify-content: flex-start; }
.root-stage[data-alignment="center"] { justify-content: center;     }
.root-stage[data-alignment="right"]  { justify-content: flex-end;   }

/* Vertical padding */
.root-stage[data-padding="small"]  { padding-top: 2rem; padding-bottom: 2rem; }
.root-stage[data-padding="medium"] { padding-top: 4rem; padding-bottom: 4rem; }
.root-stage[data-padding="large"]  { padding-top: 8rem; padding-bottom: 8rem; }

/* ── Article shell — sized by root-content max-width ── */
.root-article {
  /* Do NOT set width:100% here — let max-width on .root-content control the size */
  min-width: 0;
  animation: root-fadein .75s cubic-bezier(.22,1,.36,1) .15s both;
}
@keyframes root-fadein {
  from { opacity:0; transform: translateY(28px); }
  to   { opacity:1; transform: translateY(0);    }
}

/* ── Content box ────────────────────── */
.root-content {
  color: #a0a0c0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(.95rem, 2vw, 1.05rem);
  line-height: 1.8;
  width: 100%;
  /* max-width is set inline via PHP */
}

/* Text alignment — independent from block position */
.root-stage[data-text-align="left"]    .root-content { text-align: left;    }
.root-stage[data-text-align="center"]  .root-content { text-align: center;  }
.root-stage[data-text-align="right"]   .root-content { text-align: right;   }
.root-stage[data-text-align="justify"] .root-content { text-align: justify; }

.root-stage[data-text-align="left"]    .root-content > * { margin-left: 0;    margin-right: auto; }
.root-stage[data-text-align="center"]  .root-content > * { margin-left: auto; margin-right: auto; }
.root-stage[data-text-align="right"]   .root-content > * { margin-left: auto; margin-right: 0;    }
.root-stage[data-text-align="justify"] .root-content > * { margin-left: 0;    margin-right: 0; width: 100%; }

/* Headings */
.root-content h1,
.root-content h2,
.root-content h3,
.root-content h4,
.root-content h5,
.root-content h6 {
  font-family: 'Syne', system-ui, sans-serif;
  color: #f0f0f5;
  line-height: 1.2;
  margin: 2rem 0 .75rem;
}
.root-content h1 {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 900;
  background: linear-gradient(90deg, #00d4ff 0%, #6d28d9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.root-content h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); font-weight: 800; }
.root-content h3 { font-size: clamp(1.2rem, 3vw, 1.55rem); font-weight: 700; }
.root-content h4 { font-size: 1.1rem; font-weight: 600; }

/* Paragraphs */
.root-content p { margin: 0 0 1.4rem; }

/* Links */
.root-content a {
  color: #00d4ff;
  text-decoration: none;
  border-bottom: 1px solid rgba(0,212,255,.3);
  transition: color .2s, border-bottom-color .2s;
}
.root-content a:hover { color: #fff; border-bottom-color: #fff; }

/* Lists */
.root-content ul,
.root-content ol {
  padding-left: 1.4rem;
  margin: 0 0 1.4rem;
}
.root-content li { margin-bottom: .5rem; }

/* Blockquote */
.root-content blockquote {
  border-left: 3px solid #00d4ff;
  margin: 1.8rem 0;
  padding: .75rem 1.25rem;
  background: rgba(0,212,255,.05);
  border-radius: 0 .5rem .5rem 0;
  color: #f0f0f5;
  font-style: italic;
  text-align: left;
}

/* Images */
.root-content img {
  max-width: 100%;
  height: auto;
  border-radius: .75rem;
  margin: 1rem auto;
  display: block;
}

/* Tables */
.root-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: .9rem;
  text-align: left;
}
.root-content th,
.root-content td {
  padding: .65rem 1rem;
  border: 1px solid rgba(255,255,255,.08);
}
.root-content th {
  background: rgba(255,255,255,.04);
  color: #f0f0f5;
  font-weight: 600;
}

/* HR */
.root-content hr {
  border: none;
  border-top: 1px solid rgba(255,255,255,.08);
  margin: 2rem 0;
}

/* Gutenberg alignment helpers */
.root-content .alignwide  { margin-left: -3rem; margin-right: -3rem; max-width: none; }
.root-content .alignfull  { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); width: 100vw; max-width: none; }
.root-content .alignleft  { float: left;  margin-right: 1.5rem; margin-bottom: 1rem; }
.root-content .alignright { float: right; margin-left: 1.5rem;  margin-bottom: 1rem; }

/* Buttons */
.root-content .wp-block-button__link,
.root-content .button,
.root-content button {
  display: inline-block;
  padding: .75rem 2rem;
  background: linear-gradient(90deg, #00d4ff, #6d28d9);
  color: #fff !important;
  border: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  border-bottom: none !important;
  transition: opacity .2s, transform .2s;
  box-shadow: 0 0 24px rgba(0,212,255,.3);
}
.root-content .wp-block-button__link:hover,
.root-content .button:hover,
.root-content button:hover { opacity: .88; transform: translateY(-2px); }
.root-content h1 {
    font-size: 40px;
    margin-bottom: 30px;
}
/* Responsive */
@media (max-width: 768px) {
  .root-stage { padding-left: 1.5rem; padding-right: 1.5rem; }
  .root-stage[data-padding="large"] { padding-top: 4rem; padding-bottom: 4rem; }
  .root-content .alignwide  { margin-left: 0; margin-right: 0; }
  .root-content .alignfull  { margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); }
}
@media (max-width: 480px) {
  .root-stage { padding-left: 1rem !important; padding-right: 1rem !important; }
}


/* ════════════════════════════════════════════════════════════
   WOOCOMMERCE: CART/CART
════════════════════════════════════════════════════════════ */

.cart-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 2rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 4rem);
  font-family: var(--font-b);
  color: var(--text);
  min-height: 60vh;
}

/* ── Title — compact ─────────────────────── */
.cart-wrap h1 {
  font-family: var(--font-h);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  margin: 0 0 1.25rem;
  color: var(--text);
}

/* ── Two column grid ─────────────────────── */
.cart-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 860px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

/* ── Left panel ──────────────────────────── */
.cart-left {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.woocommerce-cart-form table.cart {
  width: 100%;
  border-collapse: collapse;
}

.woocommerce-cart-form table.cart thead th {
  padding: .75rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-size: var(--s-1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  text-align: left;
}

/* Hide thumbnail header */
.woocommerce-cart-form table.cart thead th.product-thumbnail,
.woocommerce-cart-form table.cart thead th.product-remove {
  display: none;
}

@media (max-width: 600px) {
  /* Stack table on mobile */
  .woocommerce-cart-form table.cart thead { display: none; }

  .woocommerce-cart-form table.cart,
  .woocommerce-cart-form table.cart tbody,
  .woocommerce-cart-form table.cart tr,
  .woocommerce-cart-form table.cart td {
    display: block;
    width: 100%;
  }

  .woocommerce-cart-form table.cart tr {
    position: relative;
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--border);
  }
  .woocommerce-cart-form table.cart tr:last-child { border-bottom: none; }

  .woocommerce-cart-form table.cart td {
    padding: .2rem 0;
    border: none;
  }

  .woocommerce-cart-form table.cart td.product-thumbnail {
    float: left;
    width: 56px !important;
    margin-right: .75rem;
  }
  .woocommerce-cart-form table.cart td.product-thumbnail img {
    width: 56px !important;
    height: 56px !important;
  }

  .woocommerce-cart-form table.cart td.product-name { padding-right: 2rem; }

  .woocommerce-cart-form table.cart td.product-price::before { content: attr(data-title) ': '; color: var(--muted); font-size: var(--s-1); }
  .woocommerce-cart-form table.cart td.product-subtotal::before { content: attr(data-title) ': '; color: var(--muted); font-size: var(--s-1); }

  .woocommerce-cart-form table.cart td.product-remove {
    position: absolute;
    top: .85rem;
    right: .75rem;
    width: auto !important;
  }

  .woocommerce-cart-form table.cart td.product-quantity { clear: left; }

  .woocommerce-cart-form table.cart td.actions {
    display: block !important;
    padding: .85rem 1rem !important;
  }
}

.woocommerce-cart-form table.cart tbody tr {
  border-bottom: 1px solid var(--border);
}
.woocommerce-cart-form table.cart tbody tr:last-child {
  border-bottom: none;
}

.woocommerce-cart-form table.cart td {
  padding: .9rem 1rem;
  vertical-align: middle;
}

/* Thumbnail */
.woocommerce-cart-form table.cart td.product-thumbnail {
  width: 72px;
  padding-right: 0;
}
.woocommerce-cart-form table.cart td.product-thumbnail img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}

/* Name */
.woocommerce-cart-form table.cart td.product-name a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  font-size: var(--s0);
}
.woocommerce-cart-form table.cart td.product-name a:hover { color: var(--accent); }
.woocommerce-cart-form table.cart td.product-name .variation {
  font-size: var(--s-1);
  color: var(--muted);
  margin-top: .2rem;
}

/* Price & subtotal */
.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-subtotal {
  font-size: var(--s0);
  color: var(--text);
}
.woocommerce-cart-form table.cart td.product-subtotal { font-weight: 600; }

/* Quantity */
.woocommerce-cart-form table.cart td.product-quantity { width: 100px; }

.woocommerce-cart-form table.cart td.product-quantity .quantity {
  display: flex;
  align-items: center;
}

.woocommerce-cart-form table.cart td.product-quantity input.qty {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 58px !important;
  padding: .4rem .55rem !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  font-family: var(--font-b) !important;
  font-size: var(--s0) !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
}
.woocommerce-cart-form table.cart td.product-quantity input.qty:focus {
  outline: none !important;
  border-color: var(--accent) !important;
}
.woocommerce-cart-form table.cart td.product-quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart-form table.cart td.product-quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* Remove button */
.woocommerce-cart-form table.cart td.product-remove { width: 44px; text-align: center; }
.woocommerce-cart-form table.cart td.product-remove a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.05);
  color: var(--muted) !important;
  font-size: .9rem;
  text-decoration: none;
  transition: background .18s, color .18s;
}
.woocommerce-cart-form table.cart td.product-remove a.remove:hover {
  background: rgba(255,60,60,.15);
  color: #ff4444 !important;
}

/* Actions row */
.woocommerce-cart-form table.cart td.actions {
  padding: .9rem 1rem;
  border-top: 1px solid var(--border);
}
.woocommerce-cart-form table.cart td.actions .coupon {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  align-items: center;
}
.woocommerce-cart-form table.cart td.actions .coupon #coupon_code {
  width: 180px;
  padding: .5rem .9rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: var(--s0);
  font-family: var(--font-b);
}
@media (max-width: 400px) {
  .woocommerce-cart-form table.cart td.actions .coupon #coupon_code {
    width: 100%;
  }
}
.woocommerce-cart-form table.cart td.actions .coupon #coupon_code::placeholder { color: var(--muted); }
.woocommerce-cart-form table.cart td.actions .coupon #coupon_code:focus {
  outline: none;
  border-color: var(--accent);
}

/* Buttons */
.woocommerce-cart-form .button,
button[name="apply_coupon"],
button[name="update_cart"] {
  padding: .5rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: var(--font-b);
  font-size: var(--s-1);
  font-weight: 500;
  cursor: pointer;
  transition: background .18s, border-color .18s;
  text-decoration: none;
  display: inline-block;
}
.woocommerce-cart-form .button:hover,
button[name="apply_coupon"]:hover,
button[name="update_cart"]:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.2);
}

/* ── Right panel ─────────────────────────── */
.cart-right {
  position: sticky;
  top: calc(var(--nav-h) + 1.25rem);
}

/* Totals box — unified card with checkout + trust inside */
.cart_totals {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.cart_totals h2 {
  font-family: var(--font-h);
  font-size: var(--s1);
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.cart_totals table {
  width: 100%;
  border-collapse: collapse;
}
.cart_totals table tr { border-bottom: 1px solid var(--border); }
.cart_totals table tr:last-child { border-bottom: none; }
.cart_totals table th,
.cart_totals table td {
  padding: .75rem 1.25rem;
  font-size: var(--s0);
  text-align: left;
  vertical-align: middle;
}
.cart_totals table th { color: var(--muted); font-weight: 500; }
.cart_totals table td { color: var(--text); font-weight: 500; }

.cart_totals table .order-total th,
.cart_totals table .order-total td {
  font-size: var(--s1);
  font-weight: 700;
  background: var(--surface);
}
.cart_totals table .order-total td strong { color: var(--accent); }

/* Shipping */
.cart_totals #shipping_method { list-style: none; padding: 0; margin: 0; }
.cart_totals #shipping_method li { font-size: var(--s-1); color: var(--muted); }
.cart_totals #shipping_method input[type="radio"] { accent-color: var(--accent); margin-right: .4rem; }

/* Checkout button — directly inside totals card */
.wc-proceed-to-checkout {
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

.wc-proceed-to-checkout a.checkout-button {
  display: block !important;
  width: 100% !important;
  padding: .8rem 1.25rem !important;
  background: var(--accent) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: var(--font-h) !important;
  font-size: var(--s0) !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: filter .2s, transform .15s !important;
  box-sizing: border-box !important;
}
.wc-proceed-to-checkout a.checkout-button:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}

/* Trust badges — visually attached below the totals card */
.cart-trust {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .75rem 1.25rem 1rem;
    background: var(--card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--r) var(--r);
    margin-top: -12px;
}
.cart-trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: var(--s-1);
  color: var(--muted);
}
.cart-trust-item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: .55;
}

/* ── Empty cart ──────────────────────────── */
.cart-empty {
  text-align: center;
  padding: clamp(3rem, 8vw, 5rem) 1.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.cart-empty p {
  font-size: var(--s1);
  color: var(--muted);
  margin: 0 0 1.5rem;
}
.cart-empty .button {
  padding: .7rem 1.75rem;
  background: var(--accent);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 700;
  font-size: var(--s0);
  text-decoration: none;
  display: inline-block;
}

/* ── Notices ─────────────────────────────── */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-left: 4px solid var(--accent) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  padding: .8rem 1.1rem !important;
  margin-bottom: 1rem !important;
  font-size: var(--s0) !important;
  list-style: none !important;
}
.woocommerce-error { border-left-color: #ff4444 !important; }
.woocommerce-message::before,
.woocommerce-info::before { display: none !important; }
.wc-proceed-to-checkout {
    padding: 14px !important;
}


/* ════════════════════════════════════════════════════════════
   WOOCOMMERCE: CHECKOUT/FORM CHECKOUT
════════════════════════════════════════════════════════════ */

/* ── Reset everything inside checkout ──── */
.checkout-wrap,
.checkout-wrap * {
  box-sizing: border-box;
  text-align: left !important;
}
.checkout-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem clamp(1rem, 4vw, 2rem) 4rem;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  color: var(--text, #e5e7eb) !important;
  min-height: 70vh;
}

/* Back link */
.checkout-wrap .co-back {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem !important;
  color: var(--muted, #6b7280) !important;
  text-decoration: none !important;
  margin-bottom: 1rem;
  transition: color .15s;
}
.checkout-wrap .co-back:hover { color: var(--text, #e5e7eb) !important; }
.checkout-wrap .co-back svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Title */
.checkout-wrap .co-title {
  font-family: var(--font-h, system-ui, sans-serif) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  letter-spacing: -.03em !important;
  margin: 0 0 1.25rem !important;
  color: var(--text, #e5e7eb) !important;
  text-transform: none !important;
  background: none !important;
  -webkit-text-fill-color: unset !important;
  line-height: 1.2 !important;
}

/* ── Layout — single column, order summary below ── */
.checkout-wrap .co-layout {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 100%;
}
.checkout-wrap .co-left,
.checkout-wrap .co-right { width: 100%; }

/* ── Cards ──────────────────────────────── */
.checkout-wrap .co-card {
  background: var(--card, #111827);
  border: 1px solid var(--border, #1f2937);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}
.checkout-wrap .co-card:last-child { margin-bottom: 0; }

.checkout-wrap .co-card-title {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border, #1f2937);
  font-family: var(--font-h, system-ui, sans-serif) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--text, #e5e7eb) !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: -.01em !important;
  background: none !important;
  margin: 0 !important;
}
.checkout-wrap .co-card-body { padding: 1.25rem; }

/* ── Tabs ────────────────────────────────── */
.checkout-wrap .co-tabs {
  display: flex;
  background: var(--surface, #0d1117);
  border: 1px solid var(--border, #1f2937);
  border-radius: 9px;
  padding: 3px;
  margin-bottom: 1rem;
  gap: 3px;
}
.checkout-wrap .co-tab {
  flex: 1;
  padding: .45rem .75rem;
  text-align: center !important;
  border-radius: 7px;
  font-size: .82rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  color: var(--muted, #6b7280) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  transition: all .15s;
  line-height: 1.4;
}
.checkout-wrap .co-tab.active {
  background: var(--card, #111827) !important;
  color: var(--text, #e5e7eb) !important;
  border-color: var(--border, #1f2937) !important;
}
.checkout-wrap .co-tab-panel { display: none; }
.checkout-wrap .co-tab-panel.active { display: block; }
.checkout-wrap .co-tab-note {
  font-size: .82rem !important;
  color: var(--muted, #6b7280) !important;
  margin: 0 0 .9rem !important;
  line-height: 1.5;
}

/* ── Form fields ─────────────────────────── */
.checkout-wrap .co-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-bottom: .65rem;
}
@media (max-width: 480px) { .checkout-wrap .co-row { grid-template-columns: 1fr; } }
.checkout-wrap .co-full { margin-bottom: .65rem; }

.checkout-wrap .co-label {
  display: block !important;
  font-size: .78rem !important;
  font-weight: 500 !important;
  color: var(--muted, #6b7280) !important;
  margin-bottom: .28rem !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.checkout-wrap .co-label .req { color: var(--accent, #00cfff) !important; }

.checkout-wrap .co-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.checkout-wrap .co-input-wrap .co-icon {
  position: absolute;
  left: .7rem;
  width: 14px;
  height: 14px;
  opacity: .35;
  pointer-events: none;
  flex-shrink: 0;
  color: var(--muted, #6b7280);
}
.checkout-wrap .co-input-wrap input,
.checkout-wrap .co-input-wrap select {
  width: 100% !important;
  padding: .58rem .85rem .58rem 2.1rem !important;
  background: var(--surface, #0d1117) !important;
  border: 1px solid var(--border, #1f2937) !important;
  border-radius: 8px !important;
  color: var(--text, #e5e7eb) !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  font-size: .9rem !important;
  line-height: 1.4 !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-appearance: none;
  transition: border-color .15s !important;
  text-align: left !important;
}
.checkout-wrap .co-input-wrap input:focus,
.checkout-wrap .co-input-wrap select:focus {
  border-color: var(--accent, #00cfff) !important;
  box-shadow: 0 0 0 2px rgba(0,207,255,.1) !important;
}
.checkout-wrap .co-input-wrap input::placeholder { color: var(--muted, #6b7280) !important; opacity: .5; }

.checkout-wrap .co-pw-btn {
  position: absolute;
  right: .7rem;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: var(--muted, #6b7280);
}
.checkout-wrap .co-pw-btn svg { width: 15px; height: 15px; opacity: .4; }
.checkout-wrap .co-pw-btn:hover svg { opacity: .8; }

.checkout-wrap .co-divider {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: .9rem 0;
  font-size: .78rem !important;
  color: var(--muted, #6b7280) !important;
  text-align: center !important;
}
.checkout-wrap .co-divider::before,
.checkout-wrap .co-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border, #1f2937);
}

.checkout-wrap .co-google-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  width: 100%;
  padding: .6rem 1rem !important;
  background: var(--surface, #0d1117) !important;
  border: 1px solid var(--border, #1f2937) !important;
  border-radius: 9px !important;
  color: var(--text, #e5e7eb) !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s;
  text-align: center !important;
}
.checkout-wrap .co-google-btn:hover { background: rgba(255,255,255,.05) !important; }

.checkout-wrap .co-sign-in-btn {
  display: block !important;
  width: 100% !important;
  margin-top: .65rem !important;
  padding: .65rem !important;
  background: var(--accent, #00cfff) !important;
  border: none !important;
  border-radius: 9px !important;
  color: #000 !important;
  font-family: var(--font-h, system-ui, sans-serif) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
}

/* ── Payment methods ──────────────────────── */
.checkout-wrap .co-payment-card #payment {
  display: block !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: .85rem 1rem !important;
  margin: 0 !important;
}

/* List */
.checkout-wrap .co-payment-card #payment ul.wc_payment_methods {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: .5rem !important;
  border: none !important;
}

/* Each gateway row */
.checkout-wrap .co-payment-card #payment li.wc_payment_method {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--border, #1f2937) !important;
  border-radius: 9px !important;
  overflow: hidden !important;
  background: var(--surface, #0d1117) !important;
  transition: border-color .18s !important;
}
.checkout-wrap .co-payment-card #payment li.wc_payment_method.selected {
  border-color: var(--accent, #00cfff) !important;
  background: rgba(0, 207, 255, .04) !important;
}

.checkout-wrap .co-payment-card #payment li.wc_payment_method {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
}

/* Hide the raw radio */
.checkout-wrap .co-payment-card #payment li.wc_payment_method input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
}

/* Label */
.checkout-wrap .co-payment-card #payment li.wc_payment_method label {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: .6rem !important;
  padding: .75rem 1rem !important;
  cursor: pointer !important;
  font-size: .88rem !important;
  font-weight: 500 !important;
  color: var(--text, #e5e7eb) !important;
  background: none !important;
  width: 100% !important;
  margin: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
  position: relative !important;
}

/* Custom radio circle */
.checkout-wrap .co-payment-card #payment li.wc_payment_method label::before {
  content: '' !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  border: 2px solid var(--border, #374151) !important;
  background: var(--surface, #0d1117) !important;
  transition: border-color .15s, background .15s !important;
}
.checkout-wrap .co-payment-card #payment li.wc_payment_method.selected label::before {
  border-color: var(--accent, #00cfff) !important;
  background: var(--accent, #00cfff) !important;
  box-shadow: inset 0 0 0 3px var(--surface, #0d1117) !important;
}

/* Gateway logo */
.checkout-wrap .co-payment-card #payment li.wc_payment_method label img {
  height: 22px !important;
  width: auto !important;
  max-width: 60px !important;
  object-fit: contain !important;
  border-radius: 4px !important;
  margin-left: auto !important;
  flex-shrink: 0 !important;
}

/* Payment description box */
.checkout-wrap .co-payment-card #payment .payment_box {
  display: none !important;
  width: 100% !important;
  padding: .65rem 1rem !important;
  background: rgba(0, 207, 255, .04) !important;
  border-top: 1px solid var(--border, #1f2937) !important;
  font-size: .8rem !important;
  color: var(--muted, #9ca3af) !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}
.checkout-wrap .co-payment-card #payment .payment_box p {
  margin: 0 !important;
  color: var(--muted, #9ca3af) !important;
  font-size: .8rem !important;
}
.checkout-wrap .co-payment-card #payment .payment_box.active-box {
  display: block !important;
}

/* Hide WC's own place-order button */
.checkout-wrap .co-payment-card #payment .place-order { display: none !important; }
.checkout-wrap .co-payment-card #payment .woocommerce-info { display: none !important; }

/* ── Order Summary ──────────────────────── */
.checkout-wrap .co-right { width: 100%; }

.checkout-wrap .co-items {
  padding: .9rem 1.25rem;
  border-bottom: 1px solid var(--border, #1f2937);
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.checkout-wrap .co-item {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.checkout-wrap .co-thumb {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  object-fit: cover;
  border: 1px solid var(--border, #1f2937);
  flex-shrink: 0;
  background: var(--surface, #0d1117);
}
.checkout-wrap .co-thumb-ph {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  border: 1px solid var(--border, #1f2937);
  background: var(--surface, #0d1117);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-wrap .co-item-name {
  flex: 1;
  font-size: .88rem !important;
  font-weight: 500;
  color: var(--text, #e5e7eb) !important;
  text-align: left !important;
}
.checkout-wrap .co-item-name small {
  display: block;
  font-size: .75rem !important;
  color: var(--muted, #6b7280) !important;
  font-weight: 400;
}
.checkout-wrap .co-item-price {
  font-size: .9rem !important;
  font-weight: 600;
  color: var(--text, #e5e7eb) !important;
  white-space: nowrap;
}

/* Coupon */
.checkout-wrap .co-coupon {
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--border, #1f2937);
  display: flex;
  gap: .5rem;
}
.checkout-wrap .co-coupon input {
  flex: 1;
  padding: .52rem .85rem !important;
  background: var(--surface, #0d1117) !important;
  border: 1px solid var(--border, #1f2937) !important;
  border-radius: 8px !important;
  color: var(--text, #e5e7eb) !important;
  font-size: .82rem !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  outline: none !important;
}
.checkout-wrap .co-coupon input::placeholder { color: var(--muted, #6b7280) !important; opacity: .5; }
.checkout-wrap .co-coupon input:focus { border-color: var(--accent, #00cfff) !important; }
.checkout-wrap .co-apply-btn {
  padding: .52rem .95rem;
  background: var(--accent, #00cfff) !important;
  border: none !important;
  border-radius: 8px !important;
  color: #000 !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
  font-size: .82rem !important;
  font-weight: 700 !important;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .15s;
}
.checkout-wrap .co-apply-btn:hover { filter: brightness(1.08); }

/* Totals */
.checkout-wrap .co-totals {
  padding: .8rem 1.25rem;
  border-bottom: 1px solid var(--border, #1f2937);
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.checkout-wrap .co-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .88rem !important;
  font-family: var(--font-b, system-ui, sans-serif) !important;
}
.checkout-wrap .co-total-row .lbl { color: var(--muted, #6b7280) !important; font-weight: 400; }
.checkout-wrap .co-total-row .val { color: var(--text, #e5e7eb) !important; font-weight: 500; }
.checkout-wrap .co-total-row.grand {
  margin-top: .3rem;
  padding-top: .5rem;
  border-top: 1px solid var(--border, #1f2937);
}
.checkout-wrap .co-total-row.grand .lbl {
  color: var(--text, #e5e7eb) !important;
  font-weight: 700;
  font-size: 1rem !important;
}
.checkout-wrap .co-total-row.grand .val {
  color: var(--accent, #00cfff) !important;
  font-weight: 700;
  font-size: 1rem !important;
}

/* ── Place Order ─────────────────────────── */
.checkout-wrap .co-submit { padding: .9rem 1.25rem; }

/* ── Terms & Conditions checkbox ──────────── */
.checkout-wrap .woocommerce-terms-and-conditions-wrapper {
  margin-bottom: .75rem !important;
  display: block !important;
}
.checkout-wrap .woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: flex-start !important;
  gap: .5rem !important;
  font-size: .82rem !important;
  color: var(--muted, #9ca3af) !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
  text-align: left !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.checkout-wrap .woocommerce-form__label-for-checkbox input[type="checkbox"],
.checkout-wrap .woocommerce-terms-and-conditions-wrapper input[type="checkbox"] {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  cursor: pointer !important;
  accent-color: var(--accent, #00cfff) !important;
  border-radius: 3px !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}
.checkout-wrap .woocommerce-form__label-for-checkbox a,
.checkout-wrap .woocommerce-terms-and-conditions-wrapper a {
  color: var(--accent, #00cfff) !important;
  text-decoration: underline !important;
}
.checkout-wrap .woocommerce-form__label-for-checkbox .required,
.checkout-wrap .woocommerce-privacy-policy-text .required {
  color: #f87171 !important;
}

/* T&C inline error */
.checkout-wrap .co-terms-error {
  display: none;
  align-items: center;
  gap: .4rem;
  background: rgba(248, 113, 113, .08) !important;
  border: 1px solid rgba(248, 113, 113, .3) !important;
  border-radius: 8px !important;
  padding: .55rem .85rem !important;
  margin-bottom: .65rem !important;
  font-size: .8rem !important;
  color: #f87171 !important;
  line-height: 1.4 !important;
}
.checkout-wrap .co-terms-error.visible { display: flex !important; }
.checkout-wrap .co-terms-error svg { width: 13px; height: 13px; flex-shrink: 0; }

/* Place order button */
.checkout-wrap #co-place-order-btn {
  display: block !important;
  width: 100% !important;
  padding: .85rem !important;
  background: var(--accent, #00cfff) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #000 !important;
  font-family: var(--font-h, system-ui, sans-serif) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
  text-align: center !important;
  cursor: pointer !important;
  margin-top: .65rem !important;
  transition: filter .15s, transform .12s !important;
}
.checkout-wrap #co-place-order-btn:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
}
.checkout-wrap #co-place-order-btn:disabled {
  opacity: .6 !important;
  cursor: not-allowed !important;
  transform: none !important;
  filter: none !important;
}

.checkout-wrap .co-ssl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  font-size: .75rem !important;
  color: var(--muted, #6b7280) !important;
  margin-top: .65rem;
  text-align: center !important;
}
.checkout-wrap .co-ssl svg { width: 12px; height: 12px; opacity: .4; }

/* ── Notices ─────────────────────────────── */
.checkout-wrap .woocommerce-error,
.checkout-wrap .woocommerce-message,
.checkout-wrap .woocommerce-info {
  background: var(--surface, #0d1117) !important;
  border: 1px solid var(--border, #1f2937) !important;
  border-left: 4px solid var(--accent, #00cfff) !important;
  border-radius: 9px !important;
  color: var(--text, #e5e7eb) !important;
  padding: .75rem 1rem !important;
  margin-bottom: .9rem !important;
  font-size: .85rem !important;
  list-style: none !important;
  text-align: left !important;
}
.checkout-wrap .woocommerce-error { border-left-color: #f87171 !important; }
.checkout-wrap .woocommerce-error li { list-style: none !important; margin: .2rem 0 !important; }
.checkout-wrap .woocommerce-message::before,
.checkout-wrap .woocommerce-info::before { display: none !important; }
.checkout-wrap .woocommerce-invalid input { border-color: #f87171 !important; }
.checkout-wrap .woocommerce-validated input { border-color: #4ade80 !important; }
.blockUI.blockOverlay { background: rgba(0,0,0,.65) !important; }

/* ── Mobile ──────────────────────────────── */
@media (max-width: 480px) {
  .checkout-wrap {
    padding: 1rem .75rem 3rem !important;
  }
  .checkout-wrap .co-card-body,
  .checkout-wrap .co-items,
  .checkout-wrap .co-coupon,
  .checkout-wrap .co-totals,
  .checkout-wrap .co-submit {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }
  .checkout-wrap .co-card-title {
    font-size: .82rem !important;
    padding: .75rem .85rem !important;
  }
  .checkout-wrap .co-label { font-size: .72rem !important; }
  .checkout-wrap .co-input-wrap input,
  .checkout-wrap .co-input-wrap select {
    font-size: .82rem !important;
    padding: .5rem .75rem .5rem 1.9rem !important;
  }
  .checkout-wrap .co-input-wrap .co-icon {
    width: 12px !important;
    height: 12px !important;
    left: .6rem !important;
  }
  .checkout-wrap .co-payment-card #payment { padding: .65rem .85rem !important; }
  .checkout-wrap .co-payment-card #payment li.wc_payment_method label {
    font-size: .8rem !important;
    padding: .65rem .75rem !important;
    gap: .5rem !important;
  }
  .checkout-wrap .co-payment-card #payment li.wc_payment_method label::before {
    width: 15px !important;
    height: 15px !important;
  }
  .checkout-wrap .co-payment-card #payment li.wc_payment_method label img {
    height: 18px !important;
    max-width: 48px !important;
  }
  .checkout-wrap .co-payment-card #payment .payment_box {
    padding: .6rem .75rem !important;
    font-size: .75rem !important;
  }
  .checkout-wrap .co-payment-card #payment .payment_box p { font-size: .75rem !important; }
  .checkout-wrap .co-payment-card #payment .payment_box input,
  .checkout-wrap .co-payment-card #payment .payment_box select,
  .checkout-wrap .co-payment-card #payment .payment_box textarea {
    font-size: .78rem !important;
    padding: .4rem .6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .checkout-wrap .co-payment-card #payment .payment_box table {
    width: 100% !important;
    table-layout: fixed !important;
    font-size: .75rem !important;
  }
  .checkout-wrap .co-payment-card #payment .payment_box table td,
  .checkout-wrap .co-payment-card #payment .payment_box table th {
    padding: .35rem .4rem !important;
    font-size: .75rem !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
  }
  .checkout-wrap .co-payment-card #payment .payment_box table input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: .75rem !important;
  }
  .checkout-wrap .co-total-row { font-size: .82rem !important; }
  .checkout-wrap .co-total-row.grand .lbl,
  .checkout-wrap .co-total-row.grand .val { font-size: .92rem !important; }
  .checkout-wrap #co-place-order-btn {
    font-size: .88rem !important;
    padding: .78rem !important;
  }
  .checkout-wrap .co-item-name { font-size: .8rem !important; }
  .checkout-wrap .co-item-price { font-size: .82rem !important; }
  .checkout-wrap .co-thumb,
  .checkout-wrap .co-thumb-ph { width: 34px !important; height: 34px !important; }
  .checkout-wrap .woocommerce-form__label-for-checkbox { font-size: .75rem !important; }
}


/* ════════════════════════════════════════════════════════════
   FUNCTIONS.PHP REGISTERED STYLES
════════════════════════════════════════════════════════════ */

/* ── Base ── */
    #fp-tabs { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

    /* ── Section Enable/Disable Toggle ── */
    .fp-section-toggle {
        display:flex; align-items:center; justify-content:space-between;
        background:#f0f6fc; border:1px solid #b8d4f0; border-radius:6px;
        padding:10px 16px; margin-bottom:16px;
    }
    .fp-section-toggle .fp-toggle-title { font-size:13px; font-weight:700; color:#1d2327; }
    .fp-toggle-right { display:flex; align-items:center; gap:10px; }
    .fp-toggle-status { font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; }
    .fp-toggle-status.on  { background:#d7f0dc; color:#1a7a2a; }
    .fp-toggle-status.off { background:#fde8e8; color:#a10000; }
    .fp-switch { position:relative; display:inline-block; width:42px; height:24px; }
    .fp-switch input { opacity:0; width:0; height:0; }
    .fp-switch-slider {
        position:absolute; cursor:pointer; inset:0;
        background:#ccd0d4; border-radius:24px; transition:.25s;
    }
    .fp-switch-slider:before {
        content:""; position:absolute; height:18px; width:18px;
        left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.25s;
    }
    .fp-switch input:checked + .fp-switch-slider { background:#2271b1; }
    .fp-switch input:checked + .fp-switch-slider:before { transform:translateX(18px); }
    .fp-panel-body.fp-disabled { opacity:.38; pointer-events:none; user-select:none; }

    /* ── Tabs ── */
    #fp-tab-nav {
        display:flex; flex-wrap:wrap; gap:4px; margin-bottom:0;
        border-bottom:2px solid #2271b1; padding:0; list-style:none;
    }
    #fp-tab-nav li { margin:0; position:relative; }
    #fp-tab-nav li a {
        display:block; padding:8px 14px; background:#f0f0f1; border:1px solid #c3c4c7;
        border-bottom:none; border-radius:4px 4px 0 0; color:#1d2327; text-decoration:none;
        font-size:12px; font-weight:600; cursor:pointer; transition:background .15s;
    }
    #fp-tab-nav li a:hover { background:#fff; }
    #fp-tab-nav li.active a { background:#fff; color:#2271b1; border-color:#2271b1; border-bottom-color:#fff; margin-bottom:-2px; }
    .fp-tab-dot {
        position:absolute; top:5px; right:5px; width:7px; height:7px;
        background:#dc3232; border-radius:50%; display:none;
    }
    li.fp-tab-off .fp-tab-dot { display:block; }
    li.fp-tab-off > a { color:#aaa; }
    .fp-tab-panel { display:none; background:#fff; border:1px solid #c3c4c7; border-top:none; padding:20px; }
    .fp-tab-panel.active { display:block; }

    /* ── Form ── */
    .fp-row { margin-bottom:16px; }
    .fp-row label { display:block; font-weight:600; font-size:12px; color:#1d2327; margin-bottom:4px; text-transform:uppercase; letter-spacing:.5px; }
    .fp-row input[type=text], .fp-row input[type=date], .fp-row input[type=url], .fp-row textarea {
        width:100%; padding:8px 10px; border:1px solid #8c8f94; border-radius:4px;
        font-size:13px; color:#1d2327; background:#fff; box-sizing:border-box;
    }
    .fp-row input:focus, .fp-row textarea:focus { border-color:#2271b1; box-shadow:0 0 0 1px #2271b1; outline:none; }
    .fp-row textarea { min-height:70px; resize:vertical; }
    .fp-2col { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
    .fp-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
    .fp-section-label {
        background:#f8f9fa; border-left:3px solid #2271b1; padding:8px 12px;
        margin:20px 0 12px; font-size:13px; font-weight:700; color:#1d2327;
    }
    .fp-hint { font-size:11px; color:#787c82; margin-top:3px; }
    .fp-notice { background:#fffbe6; border:1px solid #f0c93a; border-radius:4px; padding:8px 12px; font-size:12px; color:#555; margin-bottom:14px; }

    /* ── Repeater ── */
    .fp-repeater { border:1px solid #ddd; border-radius:6px; overflow:hidden; }
    .fp-repeater-row {
        background:#fafafa; border-bottom:1px solid #eee; padding:12px 14px;
        position:relative; display:grid; gap:10px; align-items:start;
    }
    .fp-repeater-row:last-child { border-bottom:none; }
    .fp-repeater-row:nth-child(even) { background:#f4f5f7; }
    .fp-repeater-row input[type=text],
    .fp-repeater-row input[type=date],
    .fp-repeater-row input[type=url],
    .fp-repeater-row textarea {
        width:100%; padding:6px 9px; border:1px solid #c3c4c7; border-radius:3px;
        font-size:12px; box-sizing:border-box;
    }
    .fp-repeater-row input:focus, .fp-repeater-row textarea:focus { border-color:#2271b1; outline:none; }
    .row-label { font-size:11px; color:#787c82; font-weight:600; text-transform:uppercase; margin-bottom:3px; letter-spacing:.4px; }
    .fp-remove-row {
        position:absolute; top:10px; right:10px; background:#dc3232; color:#fff;
        border:none; border-radius:3px; padding:3px 8px; font-size:11px; cursor:pointer; font-weight:600;
    }
    .fp-remove-row:hover { background:#b32d2e; }
    .fp-add-row {
        display:inline-flex; align-items:center; gap:6px; margin-top:10px;
        background:#2271b1; color:#fff; border:none; border-radius:4px;
        padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer;
    }
    .fp-add-row:hover { background:#135e96; }

    /* ── Countdown ── */
    .fp-cd-wrap {
        grid-column:span 2; padding:8px 10px; border-radius:4px;
        border:1px solid #e2e4e7; background:#fafafa; margin-top:2px;
    }
    .fp-cd-wrap.fp-cd-active { background:#fffbe6; border-color:#f0c93a; }
    .fp-cd-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
    .fp-cd-row label { font-size:11px; font-weight:600; color:#555; cursor:pointer; white-space:nowrap; }
    .fp-cd-row input[type=checkbox] { width:auto !important; margin:0; }
    .fp-cd-row input[type=date] { flex:1; min-width:130px; padding:5px 8px !important; font-size:12px !important; display:none; }
    .fp-cd-badge {
        display:none; background:#ffc107; color:#333; font-size:10px; font-weight:700;
        padding:1px 7px; border-radius:20px; margin-left:4px; vertical-align:middle;
    }
    .fp-cd-active .fp-cd-badge { display:inline-block !important; }

.lpb-mb { font-family: -apple-system, sans-serif; }
        .lpb-mb .lpb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
        .lpb-mb .lpb-row.full { grid-template-columns: 1fr; }
        .lpb-mb label { display: block; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #555; margin-bottom: 5px; }
        .lpb-mb input[type=text],
        .lpb-mb input[type=url],
        .lpb-mb select,
        .lpb-mb textarea { width: 100%; border: 1.5px solid #ddd; border-radius: 6px; padding: 8px 10px; font-size: 14px; transition: border .2s; box-sizing: border-box; }
        .lpb-mb input:focus, .lpb-mb select:focus, .lpb-mb textarea:focus { border-color: #00d4ff; outline: none; box-shadow: 0 0 0 3px rgba(0,212,255,.15); }
        .lpb-mb textarea { height: 90px; resize: vertical; }
        .lpb-stars-pick span { font-size: 24px; cursor: pointer; color: #ddd; transition: color .15s; }
        .lpb-stars-pick span.on { color: #f59e0b; }
        .lpb-check-row { display: flex; align-items: center; gap: 8px; }
        .lpb-check-row input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }
        .lpb-check-row label { margin: 0; font-weight: 500; text-transform: none; letter-spacing: 0; font-size: 13px; color: #333; }
        .lpb-tip { font-size: 12px; color: #888; margin-top: 4px; }
        .lpb-section-title { font-size: 13px; font-weight: 700; color: #00d4ff; text-transform: uppercase; letter-spacing: 1px; padding: 10px 0 6px; border-bottom: 1px solid #eee; margin-bottom: 14px; }

        /* Hierarchical category checklist */
        .lpb-cat-wrap {
            border: 1.5px solid #ddd;
            border-radius: 6px;
            padding: 10px 14px;
            max-height: 200px;
            overflow-y: auto;
            background: #fafafa;
        }
        .lpb-cat-wrap ul { list-style: none; margin: 0; padding: 0; }
        .lpb-cat-wrap ul ul { padding-left: 22px; }           /* indent children */
        .lpb-cat-wrap li { padding: 3px 0; }
        .lpb-cat-wrap li label {
            display: flex; align-items: center; gap: 7px;
            font-size: 13px; font-weight: 500;
            text-transform: none; letter-spacing: 0; color: #333;
            cursor: pointer;
        }
        .lpb-cat-wrap li label input[type=checkbox] { width: 14px; height: 14px; cursor: pointer; margin: 0; }
        .lpb-cat-manage { font-size: 11px; margin-top: 7px; }
        .lpb-cat-manage a { color: #00d4ff; text-decoration: none; }
        .lpb-cat-manage a:hover { text-decoration: underline; }

.lpb-ps { font-family: -apple-system, sans-serif; }
        .lpb-ps .lpb-ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
        .lpb-ps .lpb-ps-grid.full { grid-template-columns: 1fr; }
        .lpb-ps label.lpb-lbl { display: block; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: #555; margin-bottom: 5px; }
        .lpb-ps input[type=text], .lpb-ps input[type=number], .lpb-ps textarea { width: 100%; border: 1.5px solid #ddd; border-radius: 6px; padding: 8px 10px; font-size: 14px; box-sizing: border-box; }
        .lpb-ps input:focus, .lpb-ps textarea:focus { border-color: #00d4ff; outline: none; box-shadow: 0 0 0 3px rgba(0,212,255,.15); }
        .lpb-ps textarea.sm { height: 70px; resize: vertical; }
        .lpb-ps .lpb-toggle-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
        .lpb-ps .lpb-toggle-row:last-child { border-bottom: none; }
        .lpb-ps .lpb-toggle-row input[type=checkbox] { width: 15px; height: 15px; cursor:pointer; }
        .lpb-ps .lpb-toggle-row label { margin: 0; font-weight: 500; font-size: 13px; color: #333; cursor: pointer; }
        .lpb-ps .lpb-toggle-row small { color: #888; font-size: 11px; margin-left: auto; }
        .lpb-ps-section { font-size: 12px; font-weight: 700; color: #00d4ff; text-transform: uppercase; letter-spacing: 1px; padding: 10px 0 6px; border-bottom: 1px solid #eee; margin-bottom: 14px; }

/* ── Contact Form Styles ── */
    #cp-form-wrap { max-width: 680px; margin: 0 auto; font-family: 'Segoe UI', system-ui, sans-serif; }
 
    /* Fields */
    .cp-field-group { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
    @media(max-width:560px){ .cp-field-group { grid-template-columns: 1fr; } }
    .cp-field { margin-bottom: 16px; }
    .cp-field label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 6px; }
    .cp-req { color: #ef4444; }
    .cp-field input, .cp-field textarea, .cp-field select {
        width: 100%; padding: 11px 14px; border: 1.5px solid #d1d5db; border-radius: 8px;
        font-size: 14px; color: #111827; background: #fff; box-sizing: border-box;
        transition: border-color .2s, box-shadow .2s;
    }
    .cp-field input:focus, .cp-field textarea:focus, .cp-field select:focus {
        border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.15);
    }
    .cp-field input.cp-err, .cp-field textarea.cp-err, .cp-field select.cp-err { border-color: #ef4444; }
    .cp-field-err { display: block; font-size: 12px; color: #ef4444; margin-top: 4px; min-height: 16px; }
 
    /* Package cards */
    #cp-pkg-cards { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
    .cp-pkg-card {
        border: 2px solid #e5e7eb; border-radius: 10px; padding: 12px 16px; cursor: pointer;
        transition: all .2s; background: #fff; flex: 1; min-width: 140px;
    }
    .cp-pkg-card:hover { border-color: #6366f1; box-shadow: 0 2px 12px rgba(99,102,241,.15); }
    .cp-pkg-card.selected { border-color: #6366f1; background: #eef2ff; }
    .cp-pkg-name  { font-weight: 700; font-size: 13px; color: #1f2937; }
    .cp-pkg-price { font-size: 15px; font-weight: 800; color: #6366f1; margin: 4px 0; }
    .cp-pkg-desc  { font-size: 11px; color: #6b7280; line-height: 1.4; }
 
    /* CAPTCHA */
    .cp-captcha-wrap {
        background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
        border: 1.5px solid #c7d2fe; border-radius: 12px;
        padding: 20px; margin-bottom: 20px;
    }
    .cp-captcha-header { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
    .cp-captcha-shield { font-size: 18px; }
    .cp-captcha-label  { font-size: 13px; font-weight: 700; color: #3730a3; flex: 1; }
    #cp-refresh-captcha {
        background: none; border: 1px solid #a5b4fc; border-radius: 20px;
        padding: 3px 12px; font-size: 11px; font-weight: 600; color: #6366f1;
        cursor: pointer; transition: all .2s;
    }
    #cp-refresh-captcha:hover { background: #eef2ff; border-color: #6366f1; }
    .cp-captcha-question {
        font-size: 15px; font-weight: 600; color: #1f2937;
        background: #fff; border: 1px solid #e5e7eb; border-radius: 8px;
        padding: 14px 16px; margin-bottom: 14px; line-height: 1.6;
        min-height: 52px; transition: all .3s;
    }
    .cp-captcha-question.refreshing { opacity: .4; transform: scale(.98); }
    #cp_captcha_answer {
        width: 100%; max-width: 200px; padding: 10px 14px;
        border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 15px;
        font-weight: 700; text-align: center; letter-spacing: .05em; color: #1f2937;
        background: #fff; box-sizing: border-box; transition: border-color .2s;
    }
    #cp_captcha_answer:focus { border-color: #6366f1; outline: none; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
    .cp-captcha-hint { font-size: 11px; color: #9ca3af; margin-top: 6px; }
 
    /* Color buttons */
    #cp-captcha-colors { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
    .cp-color-btn {
        padding: 10px 22px; border-radius: 8px; border: 2px solid transparent;
        font-size: 13px; font-weight: 700; color: #fff; cursor: pointer;
        transition: all .2s; text-shadow: 0 1px 2px rgba(0,0,0,.3);
    }
    .cp-color-btn:hover    { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.2); }
    .cp-color-btn.selected { border-color: #1f2937; box-shadow: 0 0 0 3px rgba(0,0,0,.15); transform: scale(1.05); }
 
    /* Progress / attempt counter */
    .cp-captcha-progress { margin-top: 10px; }
    #cp-captcha-attempts { font-size: 11px; color: #f59e0b; font-weight: 600; }
 
    /* CAPTCHA transition animation */
    @keyframes cp-slide-in {
        from { opacity: 0; transform: translateY(-8px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .cp-captcha-question.refreshed { animation: cp-slide-in .3s ease; }
 
    /* Turnstile wrapper */
    .cp-turnstile-wrap {
        background: linear-gradient(135deg, #fff8f1 0%, #fef3e2 100%);
        border: 1.5px solid #fed7aa; border-radius: 12px;
        padding: 18px 20px; margin-bottom: 16px;
    }
    .cp-turnstile-wrap .cp-captcha-header { margin-bottom: 12px; }
    .cp-turnstile-wrap .cp-captcha-label  { color: #9a3412; }
    .cf-turnstile { display: inline-block; }
 
    /* Submit button */
    #cp-submit-btn {
        width: 100%; padding: 14px; background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff; border: none; border-radius: 10px; font-size: 15px; font-weight: 700;
        cursor: pointer; transition: all .2s; letter-spacing: .02em;
        box-shadow: 0 4px 15px rgba(99,102,241,.35);
    }
    #cp-submit-btn:hover   { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.45); }
    #cp-submit-btn:active  { transform: translateY(0); }
    #cp-submit-btn:disabled { opacity: .65; cursor: not-allowed; transform: none; }
 
    /* Success state */
    #cp-success { text-align: center; padding: 48px 24px; }
    .cp-success-inner { max-width: 440px; margin: 0 auto; }
    .cp-success-icon { font-size: 3rem; margin-bottom: 16px; animation: cp-pop .4s ease; }
    @keyframes cp-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
    #cp-success h3 { font-size: 1.4rem; font-weight: 800; color: #1f2937; margin: 0 0 12px; }
    #cp-success p  { font-size: 14px; color: #6b7280; line-height: 1.6; margin: 0 0 24px; }
    #cp-send-another {
        background: #f3f4f6; border: 1.5px solid #e5e7eb; border-radius: 8px;
        padding: 10px 24px; font-size: 13px; font-weight: 600; color: #4b5563; cursor: pointer;
        transition: all .2s;
    }
    #cp-send-another:hover { background: #e5e7eb; }

.cp-settings-wrap { max-width: 780px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
    .cp-settings-wrap h1 { font-size: 1.5rem; font-weight: 800; color: #1d2327; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
    .cp-settings-wrap .cs-sub { font-size: 13px; color: #787c82; margin: 0 0 28px; }
 
    /* Saved notice */
    .cp-saved-notice { background: #d4edda; border: 1px solid #b7dfbd; border-radius: 8px; padding: 12px 18px; margin-bottom: 24px; font-size: 13px; font-weight: 600; color: #155724; display: flex; align-items: center; gap: 8px; }
 
    /* Status badge */
    .cp-ts-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 24px; }
    .cp-ts-status.active   { background: #d4edda; color: #155724; border: 1px solid #b7dfbd; }
    .cp-ts-status.inactive { background: #fff3cd; color: #856404; border: 1px solid #ffd875; }
 
    /* Cards */
    .cp-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; margin-bottom: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
    .cp-card-head { background: #f8f9fa; border-bottom: 1px solid #e8e8e8; padding: 14px 20px; display: flex; align-items: center; gap: 10px; }
    .cp-card-head h2 { font-size: 13px; font-weight: 700; color: #1d2327; margin: 0; }
    .cp-card-head .ch-badge { background: #e8f3ff; color: #135e96; border-radius: 20px; padding: 2px 10px; font-size: 11px; font-weight: 700; }
    .cp-card-body { padding: 20px; }
 
    /* Fields */
    .cs-row { margin-bottom: 20px; }
    .cs-row:last-child { margin-bottom: 0; }
    .cs-row label { display: block; font-size: 12px; font-weight: 700; color: #374151; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .04em; }
    .cs-row .cs-hint { font-size: 11px; color: #9ca3af; margin-top: 5px; line-height: 1.5; }
    .cs-key-wrap { display: flex; align-items: center; gap: 8px; }
    .cs-key-wrap input { flex: 1; padding: 10px 14px; border: 1.5px solid #d1d5db; border-radius: 8px; font-size: 13px; font-family: monospace; color: #1f2937; background: #fff; box-sizing: border-box; transition: border-color .2s; }
    .cs-key-wrap input:focus { border-color: #f6821f; outline: none; box-shadow: 0 0 0 3px rgba(246,130,31,.15); }
    .cs-key-wrap input.has-value { border-color: #22c55e; background: #f0fdf4; }
    .cs-eye { background: #f3f4f6; border: 1px solid #d1d5db; border-radius: 6px; padding: 8px 12px; font-size: 14px; cursor: pointer; transition: background .15s; }
    .cs-eye:hover { background: #e5e7eb; }
 
    /* Mode radio */
    .cs-mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
    .cs-mode-opt { position: relative; }
    .cs-mode-opt input[type=radio] { position: absolute; opacity: 0; }
    .cs-mode-opt label {
        display: flex; flex-direction: column; align-items: center; gap: 8px;
        padding: 16px 12px; border: 2px solid #e5e7eb; border-radius: 10px;
        cursor: pointer; transition: all .2s; text-align: center; background: #fff;
    }
    .cs-mode-opt input:checked + label { border-color: #f6821f; background: #fff8f1; }
    .cs-mode-opt label .mo-icon { font-size: 1.6rem; }
    .cs-mode-opt label .mo-title { font-size: 12px; font-weight: 700; color: #1f2937; }
    .cs-mode-opt label .mo-desc  { font-size: 11px; color: #9ca3af; line-height: 1.4; }
 
    /* Save button */
    .cs-save-btn { background: linear-gradient(135deg, #f6821f, #e85d04); color: #fff; border: none; border-radius: 8px; padding: 12px 32px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all .2s; box-shadow: 0 3px 12px rgba(246,130,31,.35); }
    .cs-save-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(246,130,31,.45); }
 
    /* How-to steps */
    .cs-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
    .cs-steps li { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid #f4f4f4; font-size: 13px; color: #374151; line-height: 1.5; }
    .cs-steps li:last-child { border-bottom: none; }
    .cs-steps li::before { counter-increment: step; content: counter(step); flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; background: #f6821f; color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
    .cs-steps a { color: #f6821f; font-weight: 600; }
 
    /* Test widget preview */
    .cs-test-area { background: #f8f9fa; border: 1px dashed #d1d5db; border-radius: 8px; padding: 20px; text-align: center; margin-top: 12px; }
    .cs-test-area p { font-size: 12px; color: #9ca3af; margin: 8px 0 0; }
 
    /* Divider */
    .cs-divider { border: none; border-top: 1px solid #f0f0f0; margin: 20px 0; }
 
    /* CF orange accent */
    .cf-orange { color: #f6821f; }

#cp-inbox { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; max-width:1400px; }
    #cp-inbox h1 { font-size:1.5rem; font-weight:800; color:#1d2327; margin:0 0 4px; display:flex; align-items:center; gap:10px; }
    #cp-inbox .cp-subtitle { font-size:13px; color:#787c82; margin:0 0 20px; }
    .cp-stats { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
    .cp-chip { background:#fff; border:1.5px solid #e0e0e0; border-radius:12px; padding:14px 24px; min-width:110px; text-align:center; cursor:pointer; transition:all .2s; box-shadow:0 1px 3px rgba(0,0,0,.05); }
    .cp-chip:hover  { border-color:#2271b1; box-shadow:0 2px 10px rgba(34,113,177,.15); }
    .cp-chip.active { border-color:#2271b1; background:#f0f6fc; }
    .cp-chip .ch-n  { font-size:2rem; font-weight:800; line-height:1; }
    .cp-chip .ch-l  { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#aaa; margin-top:4px; }
    .chip-all     .ch-n { color:#1d2327; }
    .chip-new     .ch-n { color:#856404; }
    .chip-read    .ch-n { color:#0c5460; }
    .chip-replied .ch-n { color:#155724; }
    .chip-spam    .ch-n { color:#721c24; }
    .cp-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:#fff; border:1px solid #e0e0e0; border-radius:8px; padding:12px 16px; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
    .cp-bar-search { flex:1; min-width:220px; padding:8px 12px; border:1px solid #c3c4c7; border-radius:6px; font-size:13px; }
    .cp-bar-search:focus { border-color:#2271b1; outline:none; box-shadow:0 0 0 1px #2271b1; }
    .cp-bar-count { font-size:12px; color:#aaa; white-space:nowrap; }
    .cp-csv-btn { margin-left:auto; background:#1a7a2a; color:#fff; border:none; border-radius:6px; padding:8px 16px; font-size:12px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:background .2s; }
    .cp-csv-btn:hover { background:#145e20; color:#fff; }
    .cp-panes { display:grid; grid-template-columns:1fr 420px; gap:18px; align-items:start; }
    @media(max-width:1100px) { .cp-panes { grid-template-columns:1fr; } }
    .cp-table-card { background:#fff; border:1px solid #e0e0e0; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.05); }
    table.cp-tbl { width:100%; border-collapse:collapse; font-size:13px; }
    table.cp-tbl thead th { background:#f8f9fa; border-bottom:2px solid #e8e8e8; padding:11px 14px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#666; }
    table.cp-tbl tbody td { padding:12px 14px; border-bottom:1px solid #f4f4f4; vertical-align:middle; }
    table.cp-tbl tbody tr:last-child td { border-bottom:none; }
    table.cp-tbl tbody tr { cursor:pointer; transition:background .1s; }
    table.cp-tbl tbody tr:hover td { background:#f5f9ff; }
    table.cp-tbl tbody tr.row-active  td { background:#e8f0fe !important; }
    table.cp-tbl tbody tr.row-new     td { background:#fffde7; }
    table.cp-tbl tbody tr.row-read    td { background:#fff; }
    table.cp-tbl tbody tr.row-replied td { background:#f0fdf4; }
    table.cp-tbl tbody tr.row-spam    td { background:#fff5f5; opacity:.7; }
    .tbl-name   { font-weight:700; color:#1d2327; line-height:1.3; }
    .tbl-email  { font-size:11px; color:#2271b1; }
    .tbl-preview { color:#aaa; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:160px; display:block; }
    .tbl-date   { font-size:11px; color:#aaa; white-space:nowrap; }
    .cp-bdg { display:inline-block; padding:3px 10px; border-radius:20px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; }
    .bdg-new     { background:#fff3cd; color:#856404; border:1px solid #ffd875; }
    .bdg-read    { background:#d1ecf1; color:#0c5460; border:1px solid #8fd4e0; }
    .bdg-replied { background:#d4edda; color:#155724; border:1px solid #7ec89a; }
    .bdg-spam    { background:#f8d7da; color:#721c24; border:1px solid #f0a0a8; }
    .tbl-sel { padding:4px 6px; border:1px solid #c3c4c7; border-radius:4px; font-size:11px; background:#fff; }
    .tbl-del { background:#dc3232; color:#fff; border:none; border-radius:4px; padding:4px 9px; font-size:11px; cursor:pointer; font-weight:700; margin-left:4px; }
    .tbl-del:hover { background:#b32d2e; }
    .cp-no-rows { text-align:center; padding:56px 24px; color:#aaa; }
    .cp-no-rows .nr-icon { font-size:3rem; display:block; margin-bottom:14px; }
    .cp-detail { background:#fff; border:1px solid #e0e0e0; border-radius:10px; overflow:hidden; position:sticky; top:32px; box-shadow:0 1px 4px rgba(0,0,0,.05); }
    .cp-detail .dh { background:#f8f9fa; border-bottom:1px solid #e8e8e8; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; }
    .cp-detail .dh h3 { font-size:13px; font-weight:700; color:#1d2327; margin:0; }
    .cp-detail .dh-close { background:#e0e0e0; border:none; border-radius:4px; padding:4px 10px; font-size:12px; cursor:pointer; font-weight:600; color:#555; }
    .cp-detail .dh-close:hover { background:#c3c4c7; }
    .cp-detail .d-empty { padding:56px 24px; text-align:center; color:#c0c0c0; }
    .cp-detail .d-empty .de-icon { font-size:2.5rem; display:block; margin-bottom:12px; }
    .cp-detail .db { padding:20px; }
    .d-person { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid #f0f0f0; }
    .d-avatar { width:54px; height:54px; border-radius:50%; background:linear-gradient(135deg,#2271b1,#7c3aed); display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; color:#fff; flex-shrink:0; }
    .d-pname  { font-size:1rem; font-weight:700; color:#1d2327; line-height:1.3; }
    .d-pemail { font-size:.82rem; color:#2271b1; }
    .d-pdate  { font-size:.75rem; color:#bbb; margin-top:2px; }
    .d-grid { display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:16px; }
    .d-field { padding:10px 0; border-bottom:1px solid #f4f4f4; }
    .d-field:nth-child(odd)  { padding-right:14px; border-right:1px solid #f4f4f4; }
    .d-field:nth-child(even) { padding-left:14px; }
    .d-fl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#bbb; margin-bottom:3px; }
    .d-fv { font-size:13px; color:#1d2327; font-weight:500; word-break:break-word; }
    .d-fv a { color:#2271b1; text-decoration:none; }
    .d-msg-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:#bbb; margin-bottom:8px; }
    .d-msg-body  { background:#f8f9fa; border:1px solid #ebebeb; border-radius:8px; padding:14px; font-size:13px; color:#1d2327; line-height:1.8; white-space:pre-wrap; max-height:220px; overflow-y:auto; }
    .d-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid #f0f0f0; }
    .d-actions label { font-size:11px; font-weight:700; color:#777; }
    .d-status-sel { padding:7px 10px; border:1px solid #c3c4c7; border-radius:6px; font-size:12px; background:#fff; font-weight:600; }
    .d-reply-btn { background:#2271b1; color:#fff; border:none; border-radius:6px; padding:7px 16px; font-size:12px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:6px; transition:background .15s; }
    .d-reply-btn:hover { background:#135e96; color:#fff; }
    .d-del-btn { margin-left:auto; background:#dc3232; color:#fff; border:none; border-radius:6px; padding:7px 14px; font-size:12px; font-weight:700; cursor:pointer; transition:background .15s; }
    .d-del-btn:hover { background:#b32d2e; }

#cp-tabs{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
    #cp-tab-nav{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:0;border-bottom:2px solid #2271b1;padding:0;list-style:none}
    #cp-tab-nav li a{display:block;padding:8px 14px;background:#f0f0f1;border:1px solid #c3c4c7;border-bottom:none;border-radius:4px 4px 0 0;color:#1d2327;text-decoration:none;font-size:12px;font-weight:600;cursor:pointer;transition:background .15s}
    #cp-tab-nav li a:hover{background:#fff}
    #cp-tab-nav li.active a{background:#fff;color:#2271b1;border-color:#2271b1;border-bottom-color:#fff;margin-bottom:-2px}
    .cp-tab-panel{display:none;background:#fff;border:1px solid #c3c4c7;border-top:none;padding:20px}
    .cp-tab-panel.active{display:block}
    .cp-row{margin-bottom:14px}
    .cp-row label{display:block;font-weight:600;font-size:11px;color:#1d2327;margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
    .cp-row input[type=text],.cp-row textarea,.cp-row input[type=email],.cp-row input[type=url]{width:100%;padding:8px 10px;border:1px solid #8c8f94;border-radius:4px;font-size:13px;color:#1d2327;box-sizing:border-box}
    .cp-row input:focus,.cp-row textarea:focus{border-color:#2271b1;outline:none;box-shadow:0 0 0 1px #2271b1}
    .cp-row textarea{min-height:80px;resize:vertical}
    .cp-2col{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .cp-3col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
    .cp-sl{background:#f8f9fa;border-left:3px solid #2271b1;padding:8px 12px;margin:18px 0 12px;font-size:12px;font-weight:700;color:#1d2327}
    .cp-hint{font-size:11px;color:#787c82;margin-top:3px}
    .cp-token{display:inline-block;background:#e8f3ff;border:1px solid #b8d4f0;border-radius:3px;padding:1px 6px;font-size:11px;font-family:monospace;color:#135e96}
    .cp-soc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .cp-soc-f{display:flex;align-items:center;gap:8px}
    .cp-soc-f input{flex:1;padding:7px 10px;border:1px solid #8c8f94;border-radius:4px;font-size:12px;color:#1d2327}
    .cp-svc-item{border:1px solid #ddd;border-radius:6px;margin-bottom:14px;overflow:hidden}
    .cp-svc-hdr{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#f4f5f7;cursor:pointer;user-select:none}
    .cp-svc-title{font-size:13px;font-weight:700;color:#1d2327;flex:1}
    .cp-svc-edit{background:#2271b1;color:#fff;border:none;border-radius:3px;padding:3px 10px;font-size:11px;font-weight:600;cursor:pointer}
    .cp-svc-del{background:#dc3232;color:#fff;border:none;border-radius:3px;padding:3px 8px;font-size:11px;cursor:pointer;font-weight:600}
    .cp-svc-body{padding:14px;display:none}
    .cp-svc-body.open{display:block}
    .cp-has-pkg{display:flex;align-items:center;gap:8px;margin-bottom:12px}
    .cp-has-pkg label{font-size:12px;font-weight:600;color:#1d2327;cursor:pointer}
    .cp-has-pkg input[type=checkbox]{width:auto}
    .cp-pkg-rep{border:1px solid #e0e0e0;border-radius:4px;overflow:hidden}
    .cp-pkg-row{display:grid;grid-template-columns:1fr 120px 2fr auto;gap:8px;align-items:start;padding:10px 12px;border-bottom:1px solid #eee;background:#fafafa}
    .cp-pkg-row:last-child{border-bottom:none}
    .cp-pkg-row input{padding:6px 9px!important;border:1px solid #c3c4c7!important;border-radius:3px;font-size:12px!important}
    .row-label{font-size:10px;color:#787c82;font-weight:600;text-transform:uppercase;margin-bottom:3px}
    .cp-pkg-rm{background:#dc3232;color:#fff;border:none;border-radius:3px;padding:3px 7px;font-size:11px;cursor:pointer;margin-top:18px}
    .cp-add-pkg{background:#f0f0f1;border:1px solid #c3c4c7;border-radius:3px;padding:5px 12px;font-size:11px;font-weight:600;cursor:pointer;margin-top:8px}
    .cp-hrs-rep{border:1px solid #ddd;border-radius:4px;overflow:hidden}
    .cp-hrs-row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;padding:8px 12px;border-bottom:1px solid #eee;background:#fafafa;align-items:end}
    .cp-hrs-row:last-child{border-bottom:none}
    .cp-hrs-row input{padding:6px 9px;border:1px solid #c3c4c7;border-radius:3px;font-size:12px;width:100%}
    .cp-hrs-rm{background:#dc3232;color:#fff;border:none;border-radius:3px;padding:5px 8px;font-size:11px;cursor:pointer;font-weight:600}
    .cp-add-btn{display:inline-flex;align-items:center;gap:6px;margin-top:10px;background:#2271b1;color:#fff;border:none;border-radius:4px;padding:7px 14px;font-size:12px;font-weight:600;cursor:pointer}
    .cp-add-btn:hover{background:#135e96}
    .cp-inbox-shortcut{display:flex;align-items:center;gap:16px;background:#f0f6fc;border:1.5px solid #b8d4f0;border-radius:10px;padding:20px 24px}
    .cp-inbox-shortcut .si-icon{font-size:2.5rem;flex-shrink:0}
    .cp-inbox-shortcut strong{font-size:14px;display:block;margin-bottom:4px;color:#1d2327}
    .cp-inbox-shortcut p{font-size:13px;color:#555;margin:0 0 12px}
    .cp-inbox-shortcut a{display:inline-flex;align-items:center;gap:6px;background:#2271b1;color:#fff;border-radius:6px;padding:8px 18px;font-size:13px;font-weight:700;text-decoration:none}
    .cp-inbox-shortcut a:hover{background:#135e96}
    /* Captcha info box */
    .cp-captcha-info{background:#f0fdf4;border:1.5px solid #86efac;border-radius:10px;padding:18px 22px;margin-bottom:16px}
    .cp-captcha-info h4{font-size:13px;font-weight:700;color:#166534;margin:0 0 10px;display:flex;align-items:center;gap:8px}
    .cp-captcha-info ul{margin:0;padding-left:20px;font-size:12px;color:#15803d;line-height:2}
    .cp-captcha-types{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
    .cp-ct-chip{background:#fff;border:1px solid #bbf7d0;border-radius:8px;padding:10px 8px;text-align:center;font-size:11px;font-weight:600;color:#166534}
    .cp-ct-chip span{display:block;font-size:1.3rem;margin-bottom:4px}

.mf-mb{padding:16px 20px}
        .mf-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
        .mf-field{display:flex;flex-direction:column;gap:5px}
        .mf-field.full{grid-column:1/-1}
        .mf-field label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#1d2327}
        .mf-field input[type=text],.mf-field input[type=url],.mf-field input[type=number],.mf-field select{padding:8px 10px;border:1px solid #c3c4c7;border-radius:6px;font-size:14px;transition:border-color .15s,box-shadow .15s}
        .mf-field input:focus,.mf-field select:focus{border-color:#00d4ff;outline:none;box-shadow:0 0 0 2px rgba(0,212,255,.15)}
        .mf-field .hint{font-size:11px;color:#787c82}
        .mf-sep{grid-column:1/-1;border:none;border-top:1px solid #efefef;margin:4px 0}
        .mf-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
        .mf-check input{width:15px;height:15px;cursor:pointer;accent-color:#00d4ff}
        .mf-head{grid-column:1/-1;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#50575e;padding:2px 0 6px;border-bottom:1px solid #e5e5e5;margin-bottom:2px}
        .mf-cd-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
        .mf-cd-box{display:flex;flex-direction:column;gap:4px}
        .mf-cd-box label{font-size:11px;font-weight:600;color:#50575e;text-transform:uppercase;letter-spacing:.06em}
        .mf-cd-box input{padding:7px 8px;border:1px solid #c3c4c7;border-radius:6px;font-size:14px;text-align:center}
        .mf-cd-toggle{grid-column:1/-1;background:#f8faff;border:1px solid #dde8ff;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
        .mf-cd-toggle-head{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:#1d2327}
        .mf-cd-inner{display:none;flex-direction:column;gap:12px}
        .mf-cd-inner.active{display:flex}
        .mf-loop-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

.mfs-wrap{max-width:800px}
        .mfs-wrap>h1{font-size:22px;margin-bottom:20px;display:flex;align-items:center;gap:8px}
        .mfs-card{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:22px 26px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.05)}
        .mfs-card h2{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#50575e;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #efefef}
        .mfs-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}
        .mfs-row.one{grid-template-columns:1fr}
        .mfs-row.three{grid-template-columns:1fr 1fr 1fr}
        .mfs-f{display:flex;flex-direction:column;gap:5px}
        .mfs-f label{font-size:13px;font-weight:600;color:#1d2327}
        .mfs-f input[type=text],.mfs-f textarea,.mfs-f select{padding:8px 10px;border:1px solid #c3c4c7;border-radius:6px;font-size:14px;font-family:inherit;transition:border-color .15s,box-shadow .15s}
        .mfs-f input:focus,.mfs-f textarea:focus,.mfs-f select:focus{border-color:#00d4ff;outline:none;box-shadow:0 0 0 2px rgba(0,212,255,.15)}
        .mfs-f textarea{resize:vertical;min-height:68px}
        .mfs-f .hint{font-size:11px;color:#787c82}
        .mfs-check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer}
        .mfs-check input{width:15px;height:15px;accent-color:#00d4ff;cursor:pointer}
        .mfs-color-row{display:flex;align-items:center;gap:8px}
        .mfs-color-row input[type=color]{width:42px;height:34px;border:1px solid #c3c4c7;border-radius:6px;padding:2px;cursor:pointer}
        .mfs-color-row input[type=text]{flex:1}
        .mfs-bar{display:flex;align-items:center;gap:14px;padding-top:6px}
        .mfs-save{background:linear-gradient(135deg,#00d4ff,#6d28d9);color:#fff;border:none;padding:10px 28px;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:opacity .2s,transform .2s}
        .mfs-save:hover{opacity:.85;transform:translateY(-1px)}
        .mfs-preview{font-size:13px;color:#2271b1;text-decoration:none}
        .mfs-shortcode{background:#f0f9ff;border:1px solid #bae6fd;border-radius:8px;padding:12px 16px;margin-bottom:18px;font-size:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
        .mfs-shortcode code{background:#0f172a;color:#00d4ff;padding:4px 12px;border-radius:5px;font-size:15px;font-weight:700;letter-spacing:.03em;cursor:pointer}
        /* cols preview */
        .mfs-cols-picker{display:flex;gap:10px;flex-wrap:wrap}
        .mfs-col-opt{display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer}
        .mfs-col-opt input{display:none}
        .mfs-col-preview{width:80px;height:48px;border:2px solid #c3c4c7;border-radius:8px;display:grid;gap:3px;padding:5px;transition:border-color .15s,box-shadow .15s;background:#f6f7f7}
        .mfs-col-preview span{background:#c3c4c7;border-radius:3px;display:block}
        .mfs-col-opt input:checked~.mfs-col-preview{border-color:#00d4ff;box-shadow:0 0 0 2px rgba(0,212,255,.2);background:#f0feff}
        .mfs-col-opt input:checked~.mfs-col-preview span{background:#00d4ff}
        .mfs-col-label{font-size:12px;font-weight:600;color:#50575e}
        .mfs-col-opt input:checked~.mfs-col-label{color:#00d4ff}

.cfu-metabox table{border-collapse:collapse;width:100%}.cfu-metabox tr{border-bottom:1px solid #f0f0f0}.cfu-metabox tr:last-child{border-bottom:none}

.cfu-mode-wrap { padding: 16px 12px; }
        .cfu-mode-options { display: flex; gap: 16px; margin-bottom: 20px; }
        .cfu-mode-option { flex: 1; border: 2px solid #ddd; border-radius: 8px; padding: 16px; cursor: pointer; transition: all .2s; }
        .cfu-mode-option:hover { border-color: #2271b1; }
        .cfu-mode-option.selected { border-color: #2271b1; background: #f0f6ff; }
        .cfu-mode-option input[type=radio] { margin-right: 8px; }
        .cfu-mode-option strong { display: block; font-size: 14px; margin-bottom: 4px; }
        .cfu-mode-option span { font-size: 12px; color: #666; }
        .cfu-mode-badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; margin-left: 6px; vertical-align: middle; }
        .cfu-mode-badge.static { background: #e8f5e9; color: #2e7d32; }
        .cfu-mode-badge.dynamic { background: #fff3e0; color: #e65100; }
        #cfu-dynamic-section { display: none; margin-top: 8px; }
        #cfu-dynamic-section textarea { width: 100%; font-family: monospace; font-size: 13px; border: 1px solid #ddd; border-radius: 4px; padding: 8px; }
        .cfu-dynamic-note { background: #fff8e1; border-left: 4px solid #ffc107; padding: 10px 14px; border-radius: 4px; font-size: 12px; color: #555; margin-top: 10px; line-height: 1.6; }
        .cfu-static-note { background: #e8f5e9; border-left: 4px solid #4caf50; padding: 10px 14px; border-radius: 4px; font-size: 12px; color: #555; margin-top: 10px; line-height: 1.6; }

/* ── Meta box panel ─────────────────────────────── */
	#root_template_settings .inside { padding: 0; }
 
	.rt-panel {
		background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
		color: #fff;
		padding: 24px 22px;
		border-radius: 10px;
		border: 1px solid rgba(0,212,255,.2);
		box-shadow: 0 8px 28px rgba(0,0,0,.45);
	}
 
	/* Header */
	.rt-header {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-bottom: 22px;
		padding-bottom: 14px;
		border-bottom: 2px solid rgba(0,212,255,.25);
	}
	.rt-header h3 {
		margin: 0;
		color: #00d4ff;
		font-size: 16px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
 
	/* Grid */
	.rt-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
		gap: 20px;
	}
 
	/* Field cards */
	.rt-field {
		background: rgba(255,255,255,.05);
		padding: 18px;
		border-radius: 10px;
		border: 1px solid rgba(255,255,255,.09);
	}
	.rt-field label {
		display: block;
		font-weight: 700;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .6px;
		color: #00d4ff;
		margin-bottom: 14px;
	}
 
	/* Width presets */
	.rt-presets {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	.rt-presets button {
		flex: 1 0 auto;
		min-width: 64px;
		padding: 9px 10px;
		background: rgba(255,255,255,.08);
		border: 1px solid rgba(255,255,255,.18);
		border-radius: 7px;
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		transition: all .18s;
	}
	.rt-presets button.active,
	.rt-presets button:hover {
		background: linear-gradient(90deg,#00d4ff,#6d28d9);
		border-color: transparent;
		box-shadow: 0 0 16px rgba(0,212,255,.35);
	}
 
	/* Custom width */
	.rt-custom {
		display: flex;
		align-items: center;
		gap: 8px;
		margin-top: 12px;
		background: rgba(0,0,0,.25);
		padding: 12px;
		border-radius: 7px;
	}
	.rt-custom input[type="number"] {
		flex: 1;
		padding: 9px 11px;
		background: rgba(255,255,255,.1);
		border: 1px solid rgba(255,255,255,.2);
		border-radius: 6px;
		color: #fff;
		font-size: 14px;
		-moz-appearance: textfield;
	}
	.rt-custom input[type="number"]::-webkit-outer-spin-button,
	.rt-custom input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
	.rt-custom input[type="number"]:focus {
		outline: none;
		border-color: #00d4ff;
		box-shadow: 0 0 8px rgba(0,212,255,.3);
	}
	.rt-custom span { color: rgba(255,255,255,.55); font-size: 13px; }
 
	/* Alignment buttons */
	.rt-align-btns {
		display: flex;
		gap: 8px;
	}
	.rt-align-btns button {
		flex: 1;
		padding: 11px 6px;
		background: rgba(255,255,255,.08);
		border: 1px solid rgba(255,255,255,.18);
		border-radius: 7px;
		color: #fff;
		font-size: 13px;
		font-weight: 600;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		transition: all .18s;
	}
	.rt-align-btns button.active,
	.rt-align-btns button:hover {
		background: linear-gradient(90deg,#00d4ff,#6d28d9);
		border-color: transparent;
		box-shadow: 0 0 16px rgba(0,212,255,.35);
	}
	.rt-align-btns button .dashicons {
		font-size: 17px;
		width: 17px;
		height: 17px;
	}
 
	/* Select */
	.rt-select {
		width: 100%;
		padding: 11px 13px;
		background: rgba(255,255,255,.09);
		border: 1px solid rgba(255,255,255,.18);
		border-radius: 7px;
		color: #fff;
		font-size: 13px;
		cursor: pointer;
		appearance: none;
		-webkit-appearance: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300d4ff' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
		background-repeat: no-repeat;
		background-position: right 12px center;
	}
	.rt-select option { background: #1a1a2e; color: #fff; }
 
	/* Live preview bar */
	.rt-preview {
		margin-top: 22px;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 12px;
		background: rgba(0,0,0,.28);
		border-radius: 10px;
		padding: 16px 18px;
		border-left: 4px solid #00d4ff;
	}
	.rt-preview-item { text-align: center; }
	.rt-preview-label { color: rgba(255,255,255,.45); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
	.rt-preview-value { color: #00d4ff; font-size: 18px; font-weight: 700; }
 
	/* Info note */
	.rt-note {
		margin-top: 16px;
		padding: 11px 14px;
		background: rgba(0,212,255,.08);
		border-radius: 7px;
		border: 1px dashed rgba(0,212,255,.28);
		color: rgba(255,255,255,.75);
		font-size: 12px;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.rt-note .dashicons { color: #00d4ff; font-size: 18px; width: 18px; height: 18px; }
 
	@media (max-width: 782px) {
		.rt-grid    { grid-template-columns: 1fr; }
		.rt-preview { grid-template-columns: 1fr; }
	}

.footer-bottom p {
    text-align: center;
    width: 100%;
}

a.button.wc-forward {
    background: black;
}
.footer-bottom p, .footer-bottom a {
    color: var(--muted);
    font-size: 12px;
}