/* ══════════════════════════════════════════════════════
   BAABIHA DIGITAL — Premium SaaS Music Agency v3.0
   Primary: #a4ce41  Secondary: #3f7116  Clean Green Theme
   ══════════════════════════════════════════════════════ */

:root {
  --primary:        #a4ce41;
  --primary-dark:   #3f7116;
  --primary-light:  #c6e570;
  --primary-glow:   rgba(164,206,65,.35);
  --secondary:      #3f7116;
  --accent:         #7ab32e;
  --bg-base:        #060e06;
  --bg-1:           #0a150a;
  --bg-2:           #0f1e0f;
  --bg-3:           #152515;
  --bg-card:        rgba(255,255,255,.03);
  --glass:          rgba(164,206,65,.05);
  --glass-border:   rgba(164,206,65,.18);
  --text-primary:   #ffffff;
  --text-secondary: #b1afaf;
  --text-muted:     rgba(177,175,175,.55);
  --text-dim:       rgba(177,175,175,.3);
  --gradient-green:     linear-gradient(135deg,#a4ce41 0%,#3f7116 100%);
  --gradient-green-rev: linear-gradient(135deg,#3f7116 0%,#a4ce41 100%);
  --gradient-card:      linear-gradient(135deg,rgba(164,206,65,.05) 0%,rgba(63,113,22,.03) 100%);
  --shadow-glow:    0 0 20px rgba(164,206,65,.25),0 0 40px rgba(164,206,65,.1);
  --shadow-card:    0 4px 24px rgba(0,0,0,.4);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.5);
  --border-radius:    12px;
  --border-radius-sm: 8px;
  --border-radius-lg: 20px;
  --transition:     all .25s cubic-bezier(.4,0,.2,1);
  --font-heading:   'Outfit',sans-serif;
  --font-body:      'Inter',sans-serif;
  --font-mono:      'JetBrains Mono','Fira Code',monospace;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font-body);background:var(--bg-base);color:var(--text-primary);line-height:1.6;overflow-x:hidden}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-light)}
img{max-width:100%;height:auto}
::selection{background:var(--primary);color:#000}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg-base)}
::-webkit-scrollbar-thumb{background:var(--gradient-green);border-radius:4px}

/* ── SUBTLE BG GLOW ── */
body::before{
  content:'';position:fixed;inset:0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%,rgba(164,206,65,.07) 0%,transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,rgba(63,113,22,.05) 0%,transparent 60%);
  pointer-events:none;z-index:0
}

/* ── CONTAINER ── */
.container{max-width:1240px;margin:0 auto;padding:0 24px}
section{position:relative;z-index:1}

/* ══════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════ */
@keyframes fadeUp   {from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fadeIn   {from{opacity:0}to{opacity:1}}
@keyframes float    {0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse-glow{0%,100%{box-shadow:0 0 0 0 var(--primary-glow)}50%{box-shadow:var(--shadow-glow)}}
@keyframes spin-slow {from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes scroll-x {from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes waveform {
  0%,100%{height:6px}
  50%{height:30px}
}
@keyframes note-float {
  0%   {opacity:0;transform:translateY(0) rotate(-10deg)}
  15%  {opacity:.8}
  85%  {opacity:.8}
  100% {opacity:0;transform:translateY(-70px) rotate(10deg)}
}
@keyframes ring-expand{0%{transform:scale(1);opacity:.5}100%{transform:scale(2.2);opacity:0}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}

.reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.reveal.visible{opacity:1;transform:none}

/* ══════════════════════════════════════════════
   TYPOGRAPHY
══════════════════════════════════════════════ */
h1,h2,h3,h4,h5{font-family:var(--font-heading);font-weight:700;line-height:1.2;color:var(--text-primary)}
h1{font-size:clamp(2.4rem,5vw,3.8rem);letter-spacing:-.02em}
h2{font-size:clamp(1.8rem,3.5vw,2.8rem);letter-spacing:-.01em}
h3{font-size:clamp(1.1rem,2.2vw,1.5rem)}
p{color:var(--text-secondary);line-height:1.7}

.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--primary);background:rgba(164,206,65,.1);
  padding:6px 16px;border-radius:100px;border:1px solid rgba(164,206,65,.2);
  margin-bottom:16px
}
.section-tag::before{content:'';width:6px;height:6px;background:var(--primary);border-radius:50%}
.text-center{text-align:center}
.text-primary-clr{color:var(--primary)!important}
.text-white{color:#fff!important}
.text-muted{color:var(--text-muted)!important}
.highlight{background:var(--gradient-green);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ══════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-size:.9rem;font-weight:600;
  padding:10px 24px;border-radius:var(--border-radius-sm);
  border:none;cursor:pointer;transition:var(--transition);
  white-space:nowrap;text-decoration:none;line-height:1.4
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:var(--gradient-green);color:#000;
  box-shadow:0 4px 20px rgba(164,206,65,.28)
}
.btn-primary:hover{box-shadow:0 6px 28px rgba(164,206,65,.42);color:#000}
.btn-outline{
  background:transparent;color:var(--primary);
  border:1.5px solid var(--primary)
}
.btn-outline:hover{background:rgba(164,206,65,.08);color:var(--primary)}
.btn-glass{
  background:rgba(164,206,65,.07);color:var(--primary);
  border:1px solid rgba(164,206,65,.2)
}
.btn-glass:hover{background:rgba(164,206,65,.14);color:var(--primary)}
.btn-dark{background:rgba(255,255,255,.06);color:var(--text-primary);border:1px solid rgba(255,255,255,.1)}
.btn-dark:hover{background:rgba(164,206,65,.08);border-color:rgba(164,206,65,.25);color:var(--primary)}
.btn-sm{padding:7px 16px;font-size:.8rem}
.btn-lg{padding:13px 32px;font-size:1rem;border-radius:var(--border-radius)}
.btn-xl{padding:16px 40px;font-size:1.05rem;border-radius:var(--border-radius)}

/* ══════════════════════════════════════════════
   GLASS / CARD PANELS
══════════════════════════════════════════════ */
.glass-panel{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--border-radius);
  padding:28px;box-shadow:var(--shadow-card)
}
.glass-panel:hover{border-color:rgba(164,206,65,.18)}

.card{
  background:var(--gradient-card);
  border:1px solid var(--glass-border);
  border-radius:var(--border-radius);
  padding:28px;transition:var(--transition);
  box-shadow:var(--shadow-card)
}
.card:hover{
  border-color:rgba(164,206,65,.38);
  transform:translateY(-3px);
  box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 20px rgba(164,206,65,.08)
}

/* ══════════════════════════════════════════════
   BADGES
══════════════════════════════════════════════ */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:.72rem;font-weight:600;letter-spacing:.03em}
.badge-success{background:rgba(164,206,65,.14);color:var(--primary);border:1px solid rgba(164,206,65,.28)}
.badge-warning{background:rgba(255,193,7,.1);color:#ffc107;border:1px solid rgba(255,193,7,.22)}
.badge-danger {background:rgba(220,53,69,.1);color:#ef5350;border:1px solid rgba(220,53,69,.22)}
.badge-info   {background:rgba(33,150,243,.1);color:#64b5f6;border:1px solid rgba(33,150,243,.22)}
.badge-secondary{background:rgba(177,175,175,.08);color:var(--text-secondary);border:1px solid rgba(177,175,175,.18)}

/* ══════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════ */
.form-group{margin-bottom:18px}
.form-label{
  display:block;font-size:.84rem;font-weight:500;
  color:var(--text-secondary);margin-bottom:7px;letter-spacing:.01em
}
.form-control{
  width:100%;padding:11px 16px;
  background:rgba(255,255,255,.04);
  border:1.5px solid rgba(255,255,255,.09);
  border-radius:var(--border-radius-sm);
  color:var(--text-primary);font-family:var(--font-body);font-size:.9rem;
  transition:var(--transition);outline:none
}
.form-control:focus{border-color:var(--primary);background:rgba(164,206,65,.04);box-shadow:0 0 0 3px rgba(164,206,65,.1)}
.form-control::placeholder{color:var(--text-muted)}
textarea.form-control{resize:vertical;min-height:100px}
select.form-control{appearance:none;cursor:pointer}

/* ══════════════════════════════════════════════
   FLASH MESSAGES
══════════════════════════════════════════════ */
.flash-msg{
  padding:14px 18px;border-radius:var(--border-radius-sm);
  margin-bottom:20px;display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:500
}
.flash-success{background:rgba(164,206,65,.1);border:1px solid rgba(164,206,65,.28);color:var(--primary)}
.flash-error  {background:rgba(220,53,69,.08);border:1px solid rgba(220,53,69,.25);color:#ef5350}
.flash-info   {background:rgba(33,150,243,.08);border:1px solid rgba(33,150,243,.22);color:#64b5f6}

/* ══════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0 24px;height:66px;
  display:flex;align-items:center;
  background:rgba(6,14,6,.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(164,206,65,.1);
  transition:var(--transition)
}
.navbar.scrolled{background:rgba(6,14,6,.96);border-bottom-color:rgba(164,206,65,.18)}
.navbar-inner{
  max-width:1240px;width:100%;margin:0 auto;
  display:flex;align-items:center;gap:28px
}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
.logo-icon{
  width:38px;height:38px;background:var(--gradient-green);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:800;font-size:.8rem;color:#000;
  box-shadow:0 2px 12px rgba(164,206,65,.28)
}
.logo-text{font-family:var(--font-heading);font-size:1.1rem;font-weight:700;color:#fff;letter-spacing:-.01em}
.logo-text span{color:var(--primary)}
.nav-links{display:flex;list-style:none;gap:2px;margin:0 auto}
.nav-links a{
  font-size:.875rem;font-weight:500;color:var(--text-secondary);
  padding:7px 13px;border-radius:var(--border-radius-sm);transition:var(--transition)
}
.nav-links a:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--primary);background:rgba(164,206,65,.08)}
.nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
.menu-toggle{
  display:none;background:transparent;border:none;cursor:pointer;
  padding:8px 6px;flex-direction:column;justify-content:center;align-items:center;
  gap:5px;width:38px;height:38px;flex-shrink:0;
  border-radius:8px;transition:background .2s;
}
.menu-toggle:hover{ background:rgba(164,206,65,.1); }
.menu-toggle span{
  display:block;width:22px;height:2px;
  background:var(--text-primary);border-radius:2px;
  transition:transform .3s ease,opacity .3s ease,width .3s ease;
}
/* X state when menu is open */
.nav-links.open ~ * .menu-toggle span:nth-child(1),
.menu-toggle[aria-expanded="true"] span:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
.menu-toggle[aria-expanded="true"] span:nth-child(2){
  opacity:0; width:0;
}
.menu-toggle[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

/* ══════════════════════════════════════════════
   HERO
══════════════════════════════════════════════ */
.hero{
  min-height:100vh;display:flex;align-items:center;
  padding:100px 0 60px;position:relative;overflow:hidden
}
.hero-canvas{position:absolute;inset:0;width:100%;height:100%}
.hero-content{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--primary);background:rgba(164,206,65,.1);
  padding:7px 18px;border-radius:100px;border:1px solid rgba(164,206,65,.22);
  margin-bottom:22px
}
.hero-eyebrow-dot{width:6px;height:6px;background:var(--primary);border-radius:50%;animation:pulse-glow 2s infinite}
.hero-title{
  font-family:var(--font-heading);
  font-size:clamp(2.8rem,5vw,4.2rem);font-weight:800;
  line-height:1.1;letter-spacing:-.03em;margin-bottom:22px;color:#fff
}
.hero-desc{font-size:1.05rem;color:var(--text-secondary);line-height:1.75;margin-bottom:34px;max-width:520px}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:44px}
.hero-stats{
  display:flex;gap:28px;flex-wrap:wrap;
  padding-top:28px;border-top:1px solid rgba(255,255,255,.07)
}
.hero-stat-num{font-family:var(--font-heading);font-size:1.7rem;font-weight:800;color:var(--primary);line-height:1}
.hero-stat-label{font-size:.76rem;color:var(--text-muted);margin-top:4px;font-weight:500}

/* Hero Visual */
.hero-visual{position:relative;display:flex;align-items:center;justify-content:center}
.hero-visual-inner{position:relative;width:420px;height:420px;display:flex;align-items:center;justify-content:center}
.hero-sphere{
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,rgba(164,206,65,.18),rgba(63,113,22,.12),transparent 70%);
  border:1px solid rgba(164,206,65,.18);
  box-shadow:0 0 60px rgba(164,206,65,.12),inset 0 0 60px rgba(164,206,65,.04);
  animation:float 6s ease-in-out infinite;position:relative
}
.hero-ring{position:absolute;border-radius:50%;border:1px solid rgba(164,206,65,.12)}
.hero-ring-1{width:320px;height:320px;animation:spin-slow 22s linear infinite}
.hero-ring-2{width:390px;height:390px;border-style:dashed;animation:spin-slow 35s linear infinite reverse;border-color:rgba(164,206,65,.07)}
.hero-icon-center{
  position:absolute;font-size:3.5rem;color:var(--primary);
  animation:float 4s ease-in-out infinite;
  filter:drop-shadow(0 0 16px rgba(164,206,65,.45))
}
.float-card{
  position:absolute;background:rgba(10,21,10,.92);
  border:1px solid rgba(164,206,65,.22);
  border-radius:var(--border-radius);padding:12px 16px;
  display:flex;align-items:center;gap:12px;
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-card)
}
.float-card-1{top:50px;right:-10px;animation:float 5s ease-in-out infinite}
.float-card-2{bottom:70px;right:0;animation:float 6s ease-in-out infinite .5s}
.float-card-3{bottom:10px;left:0;animation:float 7s ease-in-out infinite 1s}
.float-card-icon{
  width:36px;height:36px;background:rgba(164,206,65,.12);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:.95rem;flex-shrink:0
}
.float-card .label{font-size:.66rem;color:var(--text-muted);font-weight:500}
.float-card .value{font-size:.8rem;color:#fff;font-weight:700}

/* Waveform */
.waveform{display:flex;align-items:center;gap:3px;height:36px}
.waveform-bar{
  width:4px;background:var(--primary);border-radius:2px;min-height:4px;
  animation:waveform .7s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * 0.07s)
}

/* Floating Notes */
.music-notes{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.music-note{position:absolute;color:var(--primary);animation:note-float 4s ease-in-out infinite;opacity:0}

/* ══════════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════════ */
.marquee-strip{background:var(--gradient-green);padding:13px 0;overflow:hidden;position:relative;z-index:2}
.marquee-track{
  display:flex;gap:48px;white-space:nowrap;
  animation:scroll-x 24s linear infinite;
  font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#000
}

/* ══════════════════════════════════════════════
   SECTION HEADERS
══════════════════════════════════════════════ */
.section-header{text-align:center;margin-bottom:56px}
.section-header h2{margin-bottom:14px}
.section-header p{color:var(--text-secondary);max-width:550px;margin:0 auto;font-size:1.02rem}

/* ══════════════════════════════════════════════
   SERVICES GRID
══════════════════════════════════════════════ */
.services-section{padding:96px 0;background:var(--bg-1)}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:22px}
.service-card{
  background:var(--gradient-card);border:1px solid var(--glass-border);
  border-radius:var(--border-radius);padding:30px;transition:var(--transition);
  position:relative;overflow:hidden
}
.service-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--gradient-green);opacity:0;transition:var(--transition)
}
.service-card:hover{
  border-color:rgba(164,206,65,.4);transform:translateY(-4px);
  box-shadow:0 16px 48px rgba(0,0,0,.45),0 0 25px rgba(164,206,65,.08)
}
.service-card:hover::before{opacity:1}
.service-icon{
  width:54px;height:54px;background:rgba(164,206,65,.1);
  border:1px solid rgba(164,206,65,.2);border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;color:var(--primary);margin-bottom:18px
}
.service-title{font-size:1.1rem;font-weight:700;color:#fff;margin-bottom:8px}
.service-desc{font-size:.86rem;color:var(--text-secondary);line-height:1.65;margin-bottom:18px}
.service-price{font-family:var(--font-heading);font-size:1.45rem;font-weight:800;color:var(--primary);margin-bottom:18px}
.service-price small{font-size:.72rem;color:var(--text-muted);font-weight:500}
.service-tag{
  font-size:.68rem;font-weight:700;color:var(--primary);
  background:rgba(164,206,65,.09);border:1px solid rgba(164,206,65,.2);
  padding:3px 10px;border-radius:100px;display:inline-block;margin-bottom:16px
}

/* ══════════════════════════════════════════════
   STATS SECTION
══════════════════════════════════════════════ */
.stats-section{padding:80px 0;background:var(--bg-2)}
.stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(164,206,65,.07);border-radius:var(--border-radius);
  overflow:hidden;border:1px solid rgba(164,206,65,.12)
}
.stat-item{background:var(--bg-2);padding:36px 28px;text-align:center;transition:var(--transition)}
.stat-item:hover{background:rgba(164,206,65,.03)}
.stat-num{font-family:var(--font-heading);font-size:2.6rem;font-weight:800;color:var(--primary);line-height:1;margin-bottom:8px}
.stat-label{font-size:.86rem;color:var(--text-secondary);font-weight:500}

/* ══════════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════════ */
.how-section{padding:96px 0;background:var(--bg-1)}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.step-card{text-align:center;padding:24px;position:relative}
.step-card::after{
  content:'';position:absolute;top:27px;left:calc(50% + 30px);
  width:calc(100% - 60px);height:1px;
  background:linear-gradient(90deg,rgba(164,206,65,.35),rgba(164,206,65,.05))
}
.step-card:last-child::after{display:none}
.step-num{
  width:54px;height:54px;background:var(--gradient-green);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:800;font-size:.95rem;color:#000;
  margin:0 auto 18px;box-shadow:0 4px 18px rgba(164,206,65,.28)
}
.step-title{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:8px}
.step-desc{font-size:.84rem;color:var(--text-secondary);line-height:1.6}

/* ══════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════ */
.features-section{padding:96px 0;background:var(--bg-base)}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feature-item{
  padding:26px;border-radius:var(--border-radius);
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  transition:var(--transition)
}
.feature-item:hover{border-color:rgba(164,206,65,.22);background:rgba(164,206,65,.03)}
.feature-icon{color:var(--primary);font-size:1.4rem;margin-bottom:14px}
.feature-title{font-size:.98rem;font-weight:700;color:#fff;margin-bottom:8px}
.feature-desc{font-size:.85rem;color:var(--text-secondary);line-height:1.62}

/* ══════════════════════════════════════════════
   REVIEWS
══════════════════════════════════════════════ */
.reviews-section{padding:96px 0;background:var(--bg-1)}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.review-card{
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--border-radius);padding:26px;transition:var(--transition)
}
.review-card:hover{border-color:rgba(164,206,65,.2);transform:translateY(-2px)}
.review-stars{color:var(--primary);font-size:.88rem;margin-bottom:12px;letter-spacing:2px}
.review-text{font-size:.88rem;color:var(--text-secondary);line-height:1.7;margin-bottom:18px;font-style:italic}
.review-author{display:flex;align-items:center;gap:12px}
.review-avatar{
  width:38px;height:38px;background:var(--gradient-green);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-heading);font-weight:700;font-size:.78rem;color:#000;flex-shrink:0
}
.review-name{font-size:.88rem;font-weight:700;color:#fff}
.review-role{font-size:.73rem;color:var(--text-muted)}

/* ══════════════════════════════════════════════
   CTA
══════════════════════════════════════════════ */
.cta-section{
  padding:96px 0;background:var(--bg-2);
  background-image:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(164,206,65,.06) 0%,transparent 70%)
}
.cta-box{
  text-align:center;max-width:680px;margin:0 auto;
  padding:56px 48px;background:rgba(164,206,65,.04);
  border:1px solid rgba(164,206,65,.18);border-radius:var(--border-radius-lg);
  box-shadow:0 0 80px rgba(164,206,65,.04)
}
.cta-box h2{font-size:clamp(1.8rem,3vw,2.4rem);margin-bottom:14px}
.cta-box p{font-size:1.02rem;margin-bottom:32px}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ══════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════ */
.footer{background:var(--bg-1);border-top:1px solid rgba(164,206,65,.1);padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:48px;margin-bottom:52px}
.footer-about{font-size:.86rem;color:var(--text-secondary);line-height:1.7;margin-bottom:20px}
.footer-social{display:flex;gap:9px}
.footer-social a{
  width:36px;height:36px;background:rgba(164,206,65,.07);
  border:1px solid rgba(164,206,65,.18);border-radius:var(--border-radius-sm);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:.85rem;transition:var(--transition)
}
.footer-social a:hover{background:rgba(164,206,65,.18);transform:translateY(-2px)}
.footer-col h5{
  font-size:.78rem;font-weight:700;color:#fff;text-transform:uppercase;
  letter-spacing:.1em;margin-bottom:18px
}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:9px}
.footer-col a{font-size:.86rem;color:var(--text-secondary);transition:var(--transition)}
.footer-col a:hover{color:var(--primary)}
.footer-contact .contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.footer-contact .contact-item i{color:var(--primary);font-size:.85rem;margin-top:3px;flex-shrink:0}
.footer-contact .contact-item span{font-size:.84rem;color:var(--text-secondary);line-height:1.5}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.05);padding:18px 0;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px
}
.footer-bottom p,.footer-bottom a{font-size:.78rem;color:var(--text-muted)}
.footer-bottom a:hover{color:var(--primary)}
.footer-bottom-links{display:flex;gap:20px}

/* ══════════════════════════════════════════════
   PAGE HERO (inner pages)
══════════════════════════════════════════════ */
.page-hero{
  padding:120px 0 56px;
  background:linear-gradient(180deg,rgba(164,206,65,.05) 0%,transparent 100%)
}
.page-hero h1{margin-bottom:14px}

/* Services filter */
.services-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:36px}
.filter-btn{
  padding:7px 18px;border-radius:100px;font-size:.8rem;font-weight:600;cursor:pointer;
  background:rgba(255,255,255,.04);color:var(--text-secondary);
  border:1px solid rgba(255,255,255,.08);transition:var(--transition)
}
.filter-btn:hover,.filter-btn.active{
  background:rgba(164,206,65,.1);color:var(--primary);border-color:rgba(164,206,65,.28)
}

/* ══════════════════════════════════════════════
   SERVICE DETAIL
══════════════════════════════════════════════ */
.service-detail-grid{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:start}
.order-box{
  background:var(--gradient-card);border:1px solid var(--glass-border);
  border-radius:var(--border-radius);padding:28px;position:sticky;top:86px
}
.order-box-title{font-family:var(--font-heading);font-size:1.05rem;font-weight:700;color:#fff;margin-bottom:20px}
.price-display{font-family:var(--font-heading);font-size:2rem;font-weight:800;color:var(--primary);margin-bottom:4px}
.price-sub{font-size:.78rem;color:var(--text-muted);margin-bottom:22px}

/* ══════════════════════════════════════════════
   CHECKOUT
══════════════════════════════════════════════ */
.checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:36px;align-items:start}
.checkout-summary{
  background:rgba(164,206,65,.04);border:1px solid rgba(164,206,65,.15);
  border-radius:var(--border-radius);padding:22px;position:sticky;top:86px
}
.summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.88rem
}
.summary-row:last-child{border-bottom:none}
.summary-total{font-family:var(--font-heading);font-size:1.35rem;font-weight:800;color:var(--primary)}
.payment-method-card{
  border:2px solid rgba(255,255,255,.07);border-radius:var(--border-radius);
  padding:14px 18px;cursor:pointer;transition:var(--transition);
  display:flex;align-items:center;gap:14px;margin-bottom:10px
}
.payment-method-card:hover{border-color:rgba(164,206,65,.28)}
.payment-method-card.selected{border-color:var(--primary);background:rgba(164,206,65,.06)}
.payment-method-card input[type=radio]{accent-color:var(--primary);width:16px;height:16px}

/* ══════════════════════════════════════════════
   CLIENT PANEL
══════════════════════════════════════════════ */
.client-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh;padding-top:66px}
.client-sidebar{
  background:var(--bg-1);border-right:1px solid rgba(255,255,255,.06);
  padding:28px 16px;position:sticky;top:66px;height:calc(100vh - 66px);overflow-y:auto;
  display:flex;flex-direction:column;
}
.client-nav a{
  display:flex;align-items:center;gap:11px;
  padding:9px 13px;border-radius:var(--border-radius-sm);
  color:var(--text-secondary);font-size:.865rem;font-weight:500;
  transition:var(--transition);margin-bottom:3px
}
.client-nav a:hover,.client-nav a.active{background:rgba(164,206,65,.1);color:var(--primary)}
.client-nav a.active{font-weight:600}
.client-nav a i{width:17px;text-align:center;font-size:.88rem}
.client-main{padding:36px;background:var(--bg-base)}

/* ══════════════════════════════════════════════
   ADMIN PANEL
══════════════════════════════════════════════ */
.admin-layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.admin-sidebar{
  background:var(--bg-1);border-right:1px solid rgba(164,206,65,.1);
  position:sticky;top:0;height:100vh;overflow-y:auto;
  display:flex;flex-direction:column
}
.admin-logo{
  padding:20px 22px;border-bottom:1px solid rgba(164,206,65,.1);
  display:flex;align-items:center;gap:10px
}
.admin-logo .logo-text{font-size:1rem}
.admin-nav{padding:14px 10px;flex:1}
.admin-nav a{
  display:flex;align-items:center;gap:10px;
  padding:9px 13px;border-radius:var(--border-radius-sm);
  color:var(--text-secondary);font-size:.84rem;font-weight:500;
  transition:var(--transition);margin-bottom:2px;text-decoration:none
}
.admin-nav a:hover{background:rgba(164,206,65,.08);color:var(--primary)}
.admin-nav a.active{background:rgba(164,206,65,.12);color:var(--primary);font-weight:600}
.admin-nav a i{width:16px;text-align:center;font-size:.85rem}
.admin-nav-sep{
  font-size:.62rem;font-weight:700;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:.12em;padding:14px 13px 5px
}
.admin-main{background:var(--bg-base);padding:28px;min-height:100vh;overflow-y:auto}
.admin-topbar{
  display:none;align-items:center;justify-content:space-between;
  padding:13px 18px;background:var(--bg-1);
  border-bottom:1px solid rgba(164,206,65,.1);
  position:sticky;top:0;z-index:100
}
.page-header-bar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:24px
}
.page-title-bar{
  font-family:var(--font-heading);font-size:1.35rem;font-weight:700;
  color:#fff;display:flex;align-items:center;gap:10px
}

/* Admin Table */
table{width:100%;border-collapse:collapse;font-size:.865rem}
thead th{
  padding:11px 15px;text-align:left;font-size:.7rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);
  border-bottom:1px solid rgba(255,255,255,.06)
}
tbody td{
  padding:13px 15px;border-bottom:1px solid rgba(255,255,255,.04);
  color:var(--text-secondary);vertical-align:middle
}
tbody tr:hover{background:rgba(164,206,65,.025)}
tbody tr:last-child td{border-bottom:none}

/* Admin Stats */
.admin-stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.admin-stat-card{
  background:var(--gradient-card);border:1px solid var(--glass-border);
  border-radius:var(--border-radius);padding:22px;transition:var(--transition)
}
.admin-stat-card:hover{border-color:rgba(164,206,65,.32);transform:translateY(-2px)}
.admin-stat-icon{
  width:44px;height:44px;background:rgba(164,206,65,.1);
  border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:1.1rem;margin-bottom:14px
}
.admin-stat-num{font-family:var(--font-heading);font-size:1.85rem;font-weight:800;color:#fff;margin-bottom:3px}
.admin-stat-label{font-size:.78rem;color:var(--text-muted);font-weight:500}
.admin-stat-change{font-size:.73rem;margin-top:5px;display:flex;align-items:center;gap:4px}
.admin-stat-change.up{color:var(--primary)}
.admin-stat-change.down{color:#ef5350}

/* Toggle Switch */
.toggle-switch{position:relative;display:inline-block;width:48px;height:26px}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;cursor:pointer;inset:0;
  background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);
  border-radius:100px;transition:.3s
}
.toggle-slider:before{
  content:'';position:absolute;height:18px;width:18px;
  left:3px;bottom:3px;background:rgba(255,255,255,.35);border-radius:50%;transition:.3s
}
.toggle-switch input:checked + .toggle-slider{background:rgba(164,206,65,.3);border-color:var(--primary)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(22px);background:var(--primary)}

/* Sidebar overlay (mobile) */
#sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.58);z-index:199;backdrop-filter:blur(2px)}

/* ══════════════════════════════════════════════
   CONTACT / ABOUT
══════════════════════════════════════════════ */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact-info-item{
  display:flex;align-items:flex-start;gap:14px;
  padding:18px;border-radius:var(--border-radius);
  background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);
  margin-bottom:14px;transition:var(--transition)
}
.contact-info-item:hover{border-color:rgba(164,206,65,.22)}
.contact-info-icon{
  width:42px;height:42px;background:rgba(164,206,65,.1);
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:.95rem;flex-shrink:0
}
.contact-info-label{font-size:.72rem;color:var(--text-muted);margin-bottom:2px;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.contact-info-value{font-size:.9rem;color:#fff;font-weight:500}

/* ══════════════════════════════════════════════
   INVOICE
══════════════════════════════════════════════ */
.invoice-paper{background:#fff;color:#111;padding:48px;border-radius:var(--border-radius);max-width:800px;margin:0 auto}
.invoice-paper h1,.invoice-paper h2,.invoice-paper h3{color:#111;font-family:var(--font-heading)}
.invoice-paper p{color:#555}
.invoice-logo-text{font-family:var(--font-heading);font-size:1.3rem;font-weight:800;color:#111}
.invoice-logo-text span{color:var(--primary)}

/* ══════════════════════════════════════════════
   UTILITY
══════════════════════════════════════════════ */
.mt-0{margin-top:0!important}.mt-1{margin-top:8px!important}.mt-2{margin-top:16px!important}.mt-3{margin-top:24px!important}.mt-4{margin-top:32px!important}
.mb-0{margin-bottom:0!important}.mb-1{margin-bottom:8px!important}.mb-2{margin-bottom:16px!important}.mb-3{margin-bottom:24px!important}.mb-4{margin-bottom:32px!important}
.d-flex{display:flex}.align-center{align-items:center}.justify-between{justify-content:space-between}.flex-wrap{flex-wrap:wrap}.gap-2{gap:16px}.gap-3{gap:24px}
.w-100{width:100%!important}.divider{height:1px;background:rgba(255,255,255,.07);margin:22px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.pass-toggle{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:4px}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media(max-width:1100px){
  .hero-grid{gap:48px}
  .hero-visual-inner{width:360px;height:360px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .admin-stat-grid{grid-template-columns:repeat(2,1fr)}
  .checkout-grid{grid-template-columns:1fr}
  .service-detail-grid{grid-template-columns:1fr}
}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{display:none}
  .steps-grid{grid-template-columns:repeat(2,1fr)}
  .step-card::after{display:none}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .about-grid,.contact-grid{grid-template-columns:1fr}
  .client-layout{grid-template-columns:1fr}
  .client-sidebar{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  /* Left-side drawer */
  .nav-links{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:flex-start;
    gap:4px;
    position:fixed;
    top:0;left:0;bottom:0;
    width:280px;
    background:rgba(6,14,6,.98);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-right:1px solid rgba(164,206,65,.15);
    z-index:1100;
    padding:80px 24px 40px;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:4px 0 40px rgba(0,0,0,.5);
  }
  .nav-links.open{
    transform:translateX(0);
  }
  /* Nav link styles inside drawer */
  .nav-links li{ width:100%; }
  .nav-links a{
    display:flex;align-items:center;gap:10px;
    width:100%;padding:12px 16px;
    border-radius:10px;font-size:.95rem;font-weight:500;
    color:var(--text-secondary);
    transition:background .2s,color .2s;
  }
  .nav-links a:hover,.nav-links a.active{
    background:rgba(164,206,65,.1);
    color:var(--primary);
  }
  /* Backdrop overlay behind drawer */
  .nav-backdrop{
    display:none;position:fixed;inset:0;
    background:rgba(0,0,0,.6);z-index:1099;
    backdrop-filter:blur(2px);
    transition:opacity .3s;opacity:0;
  }
  .nav-backdrop.open{ display:block;opacity:1; }

  .menu-toggle{display:flex}
  /* Desktop-only auth buttons hidden on mobile */
  .nav-desktop-only{display:none !important}
  /* Mobile-only nav items visible only in overlay */
  .nav-mobile-only{display:list-item}
  /* Navbar logo text visible on mobile */
  .navbar .logo-text{display:block;font-size:.95rem}
  /* Navbar inner no overflow */
  .navbar-inner{overflow:visible}
  /* nav-right tight on mobile */
  .nav-right{gap:6px}
  .hero{padding:88px 0 48px;text-align:center}
  .hero-desc,.hero-btns,.hero-stats{margin-left:auto;margin-right:auto;justify-content:center}
  .services-grid{grid-template-columns:1fr}
  .features-grid{grid-template-columns:1fr}
  .steps-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;text-align:center}
  .admin-layout{grid-template-columns:1fr}
  .admin-sidebar{display:none;position:fixed;left:0;top:0;bottom:0;z-index:200;width:240px}
  .admin-sidebar.open{display:flex}
  .admin-topbar{display:flex}
  .admin-stat-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .admin-stat-grid{grid-template-columns:1fr}
  .cta-box{padding:36px 20px}
  .stats-grid{grid-template-columns:1fr 1fr}
}

/* Hide mobile-only nav items on desktop */
@media(min-width:769px){
  .nav-mobile-only{display:none !important}
  .nav-desktop-only{display:inline-flex}
  .navbar .logo-text{display:block}
  .navbar .logo{position:static !important;transform:none !important}
}

/* ── Services filter bar: horizontal scroll on mobile ── */
.services-filter{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
@media(max-width:768px){
  .services-filter{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    justify-content:flex-start !important;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .services-filter::-webkit-scrollbar{display:none}
  .filter-btn{
    flex-shrink:0;
    scroll-snap-align:start;
    white-space:nowrap;
  }
}

/* Prevent any page-level horizontal overflow */
html{overflow-x:hidden}
body{overflow-x:hidden;max-width:100%}

/* ════════════════════════════════════════════════════════════════
   HOMEPAGE HERO — Named class layout (reliable vs inline overrides)
   ════════════════════════════════════════════════════════════════ */

/* Desktop: 2-col hero */
.hero-main-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
/* Desktop: 2-col bento mini-grid */
.hero-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  animation: fadeUp .8s ease both .3s;
}
/* Trust badge row */
.hero-trust-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* CTA button row */
.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Tablet (≤900px): collapse hero 2-col → 1-col ── */
@media(max-width:900px) {
  .hero-main-grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .hero-cta-row { justify-content: center; }
  .hero-trust-row { justify-content: center; }
  .hero-bento-grid { max-width: 520px; margin: 0 auto; }
}

/* ── Mobile (≤768px): hide bento, clean hero layout ── */
@media(max-width:768px) {
  /* Hide bento dashboard on mobile — keeps hero clean */
  .hero-bento-grid { display: none !important; }

  .hero-section {
    padding: 100px 0 56px !important;
    min-height: auto !important;
  }
  .hero-main-grid {
    grid-template-columns: 1fr;
    gap: 0;
    text-align: center;
  }

  /* Heading size */
  .hero-section h1 {
    font-size: clamp(2rem, 8vw, 2.8rem) !important;
    margin-bottom: 16px !important;
  }
  /* Body text center + max-width */
  .hero-section p {
    font-size: .95rem !important;
    margin-left: auto;
    margin-right: auto;
  }
  /* Platform chips center */
  .hero-section [style*="display:flex"][style*="flex-wrap:wrap"][style*="gap:8px"] {
    justify-content: center;
  }
  /* CTA buttons */
  .hero-cta-row {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }
  .hero-cta-row .btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }
  /* Trust row compact */
  .hero-trust-row {
    gap: 10px;
    justify-content: center;
  }
  /* Hide divider + waveform in trust row */
  .hero-trust-row > div[style*="width:1px"],
  .hero-trust-row .waveform { display: none; }
}

/* ── Navbar: mobile layout — hamburger | logo centered | theme ── */
@media(max-width:768px) {
  .navbar { padding: 0 16px; height: 62px; }

  .navbar-inner {
    position: relative;
    gap: 0;
    justify-content: space-between;
  }

  /* Navbar logo centred — footer logo NOT affected */
  .navbar .logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    gap: 8px;
  }

  /* Show logo text in navbar on mobile, slightly smaller */
  .navbar .logo-text { display: block !important; font-size: .9rem !important; }
  /* Footer logo-text always visible */
  .footer .logo-text { display: block !important; }

  /* nav-right: only show theme toggle on mobile, hide everything else */
  .nav-right { gap: 0; }
  .currency-switcher { display: none !important; }

  /* nav overlay z-index */
  .nav-links { z-index: 1100; }
}

/* ══════════════════════════════════════════════
   UTILITY GRID & SHARED COMPONENTS
══════════════════════════════════════════════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}

.section{padding:80px 0}
.section-alt{background:var(--bg-1)}
.section-alt-2{background:linear-gradient(180deg,rgba(164,206,65,.04) 0%,transparent 100%);padding:80px 0}
.section-header.centered{text-align:center;margin-bottom:48px}

/* Generic card sub-elements */
.card-title{font-family:var(--font-heading);font-size:1rem;font-weight:700;color:var(--text-primary);margin:12px 0 8px}
.card-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.65}

/* Stat card (about/homepage) */
.stat-card{background:var(--bg-1);border:1px solid rgba(255,255,255,.07);border-radius:var(--border-radius);padding:28px 20px;text-align:center;transition:var(--transition)}
.stat-card:hover{border-color:rgba(164,206,65,.25);transform:translateY(-3px)}
.stat-number{font-family:var(--font-heading);font-size:2.4rem;font-weight:800;color:var(--primary);line-height:1;margin-bottom:8px}

/* Service icon (generic) */
.icon-default{width:48px;height:48px;background:rgba(164,206,65,.1);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:var(--primary);margin-bottom:14px}

@media(max-width:900px){
  .grid-2{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:480px){
  .grid-4{grid-template-columns:1fr 1fr}
}

/* Social links (contact page) */
.social-links{display:flex;gap:10px;flex-wrap:wrap}
.social-link{
  width:38px;height:38px;border-radius:50%;
  background:rgba(164,206,65,.1);border:1px solid rgba(164,206,65,.2);
  display:flex;align-items:center;justify-content:center;
  color:var(--primary);font-size:.9rem;transition:var(--transition)
}
.social-link:hover{background:var(--primary);color:#000;border-color:var(--primary)}

/* ══════════════════════════════════════════════
   SERVICE PAGE — hero, calculator, packages, FAQ
══════════════════════════════════════════════ */

/* ── 3-col grid ── */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}}

/* ── Section helpers ── */
.section-desc{color:var(--text-secondary);max-width:560px;margin:0 auto 16px;font-size:1rem;line-height:1.7}

/* ── Hero badge ── */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(164,206,65,.1);border:1px solid rgba(164,206,65,.25);
  color:var(--primary);font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.12em;padding:6px 14px;border-radius:50px;margin-bottom:20px
}

/* ── Service Hero ── */
.service-hero{
  padding:100px 0 80px;
  background:radial-gradient(ellipse 80% 60% at 60% 40%,rgba(164,206,65,.07) 0%,transparent 65%),var(--bg-base);
  position:relative;overflow:hidden
}
.service-hero::before{
  content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23a4ce41' fill-opacity='0.03'%3E%3Ccircle cx='30' cy='30' r='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events:none
}
.service-hero-grid{
  display:grid;grid-template-columns:1fr 460px;gap:60px;align-items:center
}
@media(max-width:1024px){.service-hero-grid{grid-template-columns:1fr;gap:40px}}

/* ── Calculator card ── */
.calc-wrapper{
  background:var(--bg-2);border:1px solid rgba(164,206,65,.18);
  border-radius:var(--border-radius-lg);padding:32px;
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 1px rgba(164,206,65,.05)
}
.calc-result{
  background:rgba(164,206,65,.06);border:1px solid rgba(164,206,65,.15);
  border-radius:var(--border-radius);padding:20px 24px;
  text-align:center;margin-top:16px
}
.calc-price{
  font-family:var(--font-heading);font-size:2rem;font-weight:900;
  color:var(--primary);line-height:1;margin-bottom:6px
}
.calc-delivery{font-size:.8rem;color:var(--text-secondary)}
.calc-delivery i{color:var(--primary);margin-right:4px}

/* ── Quantity slider ── */
.qty-display{
  font-family:var(--font-mono);color:var(--primary);font-size:.9rem;margin-left:4px
}
.qty-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:2px;
  background:linear-gradient(to right,var(--primary) 0%,var(--primary) 50%,rgba(255,255,255,.1) 50%);
  outline:none;cursor:pointer;margin-top:12px
}
.qty-slider::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:20px;height:20px;border-radius:50%;
  background:var(--primary);border:3px solid var(--bg-base);
  box-shadow:0 0 0 2px var(--primary);cursor:pointer;transition:transform .15s
}
.qty-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}
.qty-slider::-moz-range-thumb{
  width:20px;height:20px;border-radius:50%;
  background:var(--primary);border:3px solid var(--bg-base);cursor:pointer
}

/* ── Pricing cards ── */
.pricing-card{
  background:var(--bg-2);border:1px solid rgba(255,255,255,.07);
  border-radius:var(--border-radius-lg);padding:36px 28px;
  display:flex;flex-direction:column;gap:0;
  transition:var(--transition);position:relative
}
.pricing-card:hover{border-color:rgba(164,206,65,.3);transform:translateY(-4px);box-shadow:0 20px 50px rgba(0,0,0,.35)}
.pricing-card.featured{
  background:linear-gradient(145deg,rgba(164,206,65,.12),rgba(63,113,22,.08));
  border-color:rgba(164,206,65,.4);
  box-shadow:0 0 0 1px rgba(164,206,65,.15),0 20px 60px rgba(0,0,0,.4)
}
.pricing-card.featured::before{
  content:'Most Popular';position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--gradient-green);color:#000;font-family:var(--font-heading);
  font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  padding:4px 16px;border-radius:50px
}
.pricing-name{
  font-family:var(--font-heading);font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;color:var(--primary);margin-bottom:16px
}
.pricing-price{
  font-family:var(--font-heading);font-size:2.4rem;font-weight:900;
  color:var(--text-primary);line-height:1;margin-bottom:6px
}
.pricing-price span{font-size:1.3rem;vertical-align:top;margin-top:6px;display:inline-block;color:var(--text-secondary)}
.pricing-period{font-size:.82rem;color:var(--text-muted);margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.06)}
.pricing-features{list-style:none;padding:0;margin:0 0 28px;display:flex;flex-direction:column;gap:10px}
.pricing-features li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--text-secondary)}
.pricing-features li i{color:var(--primary);font-size:.75rem;flex-shrink:0}

/* ── FAQ accordion ── */
.faq-item{
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:0
}
.faq-question{
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 0;cursor:pointer;
  font-family:var(--font-heading);font-weight:600;font-size:.95rem;color:var(--text-primary);
  transition:color .2s;gap:16px;user-select:none
}
.faq-question:hover{color:var(--primary)}
.faq-question i{color:var(--primary);font-size:.85rem;flex-shrink:0;transition:transform .3s}
.faq-answer{
  max-height:0;overflow:hidden;transition:max-height .35s ease,padding .3s ease
}
.faq-answer.open{max-height:300px;padding-bottom:20px}
.faq-answer p{font-size:.92rem;color:var(--text-secondary);line-height:1.7;margin:0}

/* ══════════════════════════════════════════════
   CUSTOM SELECT DROPDOWN (replaces native select)
══════════════════════════════════════════════ */
.custom-select-wrap{position:relative;display:block}
.custom-select-wrap select{display:none!important}
.cs-trigger{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;cursor:pointer;
  background:var(--bg-2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--border-radius-sm);
  padding:11px 16px;
  font-family:var(--font-body);font-size:.92rem;color:var(--text-primary);
  transition:border-color .2s,box-shadow .2s;
  user-select:none;min-height:46px
}
.cs-trigger:hover{border-color:rgba(164,206,65,.35)}
.cs-trigger.open{border-color:var(--primary);box-shadow:0 0 0 3px rgba(164,206,65,.1)}
.cs-trigger i{font-size:.7rem;color:var(--text-muted);transition:transform .25s;flex-shrink:0}
.cs-trigger.open i{transform:rotate(180deg)}
.cs-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:9999;
  background:var(--bg-2);
  border:1px solid rgba(164,206,65,.25);
  border-radius:var(--border-radius-sm);
  box-shadow:0 16px 48px rgba(0,0,0,.55);
  overflow:hidden;
  max-height:260px;overflow-y:auto;
  opacity:0;transform:translateY(-6px);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease
}
.cs-dropdown.open{opacity:1;transform:translateY(0);pointer-events:auto}
.cs-option{
  padding:11px 16px;font-size:.9rem;color:var(--text-secondary);
  cursor:pointer;transition:background .15s,color .15s
}
.cs-option:hover{background:rgba(164,206,65,.1);color:var(--text-primary)}
.cs-option.selected{background:rgba(164,206,65,.14);color:var(--primary);font-weight:600}
/* scrollbar inside dropdown */
.cs-dropdown::-webkit-scrollbar{width:4px}
.cs-dropdown::-webkit-scrollbar-track{background:transparent}
.cs-dropdown::-webkit-scrollbar-thumb{background:rgba(164,206,65,.3);border-radius:2px}

/* ================================================================
   LOGO IMAGE (rect + square variants)
   ================================================================ */
.logo-img-wrap{display:inline-flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo-img-rect{
  height:44px;width:auto;max-width:180px;
  object-fit:contain;display:block;
  /* subtle drop-shadow so logo reads on dark nav */
  filter:drop-shadow(0 0 8px rgba(164,206,65,.18))
}
.logo-img-sq{
  height:38px;width:38px;
  object-fit:cover;border-radius:9px;display:block;
  box-shadow:0 2px 12px rgba(164,206,65,.28)
}
/* Auth/admin centered logo */
.auth-logo-img{
  height:68px;width:68px;
  object-fit:cover;border-radius:14px;
  box-shadow:0 4px 20px rgba(164,206,65,.3);
  margin-bottom:4px
}
/* Footer logo */
.footer-brand .logo-img-rect{height:52px}
/* Admin sidebar logo */
.admin-logo .logo-img-sq{height:36px;width:36px;border-radius:8px}

/* ════════════════════════════════════════════════════════
   2026 DESIGN SYSTEM — Aurora, Bento, Magnetic, 3D
   ════════════════════════════════════════════════════════ */

/* ── Aurora / Mesh gradient background ── */
@keyframes aurora-move {
  0%   { transform: translate(0,0) scale(1); }
  33%  { transform: translate(60px,-40px) scale(1.1); }
  66%  { transform: translate(-40px,60px) scale(.9); }
  100% { transform: translate(0,0) scale(1); }
}
@keyframes aurora-move2 {
  0%   { transform: translate(0,0) scale(1.1); }
  50%  { transform: translate(-80px,50px) scale(.95); }
  100% { transform: translate(0,0) scale(1.1); }
}
.aurora-bg {
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden
}
.aurora-bg::before {
  content:'';position:absolute;width:70vw;height:70vw;
  background:radial-gradient(ellipse,rgba(164,206,65,.12) 0%,transparent 65%);
  top:-20%;left:-10%;border-radius:50%;
  animation:aurora-move 18s ease-in-out infinite;filter:blur(60px)
}
.aurora-bg::after {
  content:'';position:absolute;width:55vw;height:55vw;
  background:radial-gradient(ellipse,rgba(63,113,22,.1) 0%,transparent 65%);
  bottom:-10%;right:-10%;border-radius:50%;
  animation:aurora-move2 22s ease-in-out infinite;filter:blur(80px)
}

/* ── 3D Hero canvas ── */
#hero-canvas {
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:0
}
.hero-3d-wrap {
  position:relative;overflow:hidden
}

/* ── Magnetic button ── */
.btn-magnetic {
  transition:transform .15s cubic-bezier(.23,1,.32,1),box-shadow .15s;
  will-change:transform
}

/* ── Noise overlay ── */
.noise::after {
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:none;z-index:1;border-radius:inherit
}

/* ── Bento grid ── */
.bento-grid {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto;
  gap:16px
}
.bento-card {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(164,206,65,.1);
  border-radius:20px;padding:28px;
  transition:border-color .3s,transform .3s,box-shadow .3s;
  position:relative;overflow:hidden
}
.bento-card:hover {
  border-color:rgba(164,206,65,.3);
  transform:translateY(-4px);
  box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 30px rgba(164,206,65,.08)
}
.bento-card::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(164,206,65,.06) 0%,transparent 60%);
  opacity:0;transition:opacity .3s;pointer-events:none
}
.bento-card:hover::before { opacity:1 }
.bento-span-4  { grid-column:span 4 }
.bento-span-5  { grid-column:span 5 }
.bento-span-6  { grid-column:span 6 }
.bento-span-7  { grid-column:span 7 }
.bento-span-8  { grid-column:span 8 }
.bento-span-12 { grid-column:span 12 }

/* ── Glassmorphism 2.0 ── */
.glass-2 {
  background:rgba(255,255,255,.04);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:20px;
  box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)
}

/* ── Gradient border card ── */
.grad-border {
  position:relative;border-radius:20px
}
.grad-border::before {
  content:'';position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(135deg,rgba(164,206,65,.5),rgba(63,113,22,.2),rgba(164,206,65,.1));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none
}

/* ── Service card 2026 ── */
.svc-card-26 {
  position:relative;border-radius:20px;padding:28px;overflow:hidden;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(164,206,65,.1);
  transition:all .35s cubic-bezier(.23,1,.32,1)
}
.svc-card-26:hover {
  border-color:rgba(164,206,65,.35);
  transform:translateY(-6px) scale(1.01);
  box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 40px rgba(164,206,65,.1)
}
.svc-card-26 .svc-icon-26 {
  width:52px;height:52px;border-radius:14px;
  background:linear-gradient(135deg,rgba(164,206,65,.15),rgba(164,206,65,.05));
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;color:var(--primary);margin-bottom:18px;
  border:1px solid rgba(164,206,65,.2);
  transition:transform .3s,background .3s
}
.svc-card-26:hover .svc-icon-26 {
  transform:scale(1.1) rotate(5deg);
  background:linear-gradient(135deg,rgba(164,206,65,.25),rgba(164,206,65,.1))
}
.svc-card-26 .svc-price-26 {
  font-family:var(--font-heading);font-size:1.5rem;font-weight:800;
  background:var(--gradient-green);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text
}

/* ── Stats counter 2026 ── */
.stat-26 {
  text-align:center;padding:32px 20px;border-radius:20px;
  background:rgba(164,206,65,.04);border:1px solid rgba(164,206,65,.12);
  transition:all .3s
}
.stat-26:hover { background:rgba(164,206,65,.08);border-color:rgba(164,206,65,.25) }
.stat-num-26 {
  font-family:var(--font-heading);font-size:clamp(2.2rem,4vw,3.2rem);
  font-weight:900;line-height:1;
  background:var(--gradient-green);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text
}
.stat-label-26 { font-size:.82rem;color:var(--text-muted);margin-top:8px;font-weight:500;text-transform:uppercase;letter-spacing:.08em }

/* ── Marquee track ── */
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-track { display:flex;width:max-content;animation:marquee 28s linear infinite }
.marquee-wrap { overflow:hidden;mask:linear-gradient(90deg,transparent,#fff 10%,#fff 90%,transparent) }
.marquee-wrap:hover .marquee-track { animation-play-state:paused }

/* ── Testimonial card 2026 ── */
.review-26 {
  padding:24px 28px;border-radius:20px;
  background:rgba(15,30,15,.7);
  border:1px solid rgba(164,206,65,.15);
  transition:all .3s;flex-shrink:0;width:320px;
  min-height:190px;display:flex;flex-direction:column
}
.review-26:hover { border-color:rgba(164,206,65,.35);transform:translateY(-3px);background:rgba(20,40,20,.8) }
.review-26 p { color:rgba(220,220,220,.9)!important }

/* ── Section heading 2026 ── */
.section-pill {
  display:inline-flex;align-items:center;gap:8px;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--primary);
  background:rgba(164,206,65,.08);border:1px solid rgba(164,206,65,.22);
  padding:5px 14px;border-radius:100px;margin-bottom:14px
}
.section-pill i { font-size:.65rem }

/* ── Waveform bars (music theme) ── */
.waveform { display:inline-flex;align-items:flex-end;gap:3px;height:28px }
.waveform span {
  width:3px;background:var(--primary);border-radius:2px;
  animation:waveform .8s ease-in-out infinite alternate
}
.waveform span:nth-child(2){animation-delay:.1s;height:14px}
.waveform span:nth-child(3){animation-delay:.2s;height:22px}
.waveform span:nth-child(4){animation-delay:.3s;height:10px}
.waveform span:nth-child(5){animation-delay:.4s;height:26px}
.waveform span:nth-child(6){animation-delay:.15s;height:18px}
.waveform span:nth-child(7){animation-delay:.25s;height:12px}

/* ── Feature list 2026 ── */
.feature-list-26 { list-style:none;padding:0;display:grid;gap:10px }
.feature-list-26 li {
  display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--text-secondary)
}
.feature-list-26 li::before {
  content:'';width:18px;height:18px;border-radius:50%;flex-shrink:0;
  background:rgba(164,206,65,.12);border:1px solid rgba(164,206,65,.3);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23a4ce41' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px
}

/* ── Glowing border animation ── */
@keyframes border-glow {
  0%,100%{box-shadow:0 0 0 0 rgba(164,206,65,0)}
  50%{box-shadow:0 0 0 3px rgba(164,206,65,.25),0 0 20px rgba(164,206,65,.1)}
}
.glow-pulse { animation:border-glow 3s ease-in-out infinite }

/* ── Number ticker ── */
.ticker-wrap { overflow:hidden;height:1.2em;display:inline-block;vertical-align:bottom }
.ticker-inner { transition:transform .5s cubic-bezier(.23,1,.32,1) }

/* ── Platform chips ── */
.platform-chip {
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:100px;font-size:.8rem;font-weight:600;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  color:var(--text-secondary);transition:all .25s;cursor:default
}
.platform-chip:hover { background:rgba(164,206,65,.08);border-color:rgba(164,206,65,.25);color:var(--text-primary) }
.platform-chip i { font-size:.95rem }

/* ── Hero badge animated ── */
.hero-badge-26 {
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 16px;border-radius:100px;
  background:rgba(164,206,65,.06);
  border:1px solid rgba(164,206,65,.2);
  font-size:.75rem;font-weight:600;color:var(--primary);
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:24px;
  animation:fadeUp .6s ease both
}
.hero-badge-26 .dot {
  width:7px;height:7px;background:var(--primary);border-radius:50%;
  animation:pulse-glow 2s ease-in-out infinite
}

/* ── Scroll progress indicator ── */
#scroll-progress {
  position:fixed;top:0;left:0;height:2px;z-index:9999;
  background:var(--gradient-green);width:0%;transition:width .1s linear
}

/* ── Page loader ── */
#page-loader {
  position:fixed;inset:0;z-index:99999;
  background:var(--bg-base);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease
}
#page-loader .loader-logo {
  display:flex;align-items:center;gap:12px;
  animation:fadeIn .4s ease
}
#page-loader .loader-bar {
  width:200px;height:2px;background:rgba(255,255,255,.06);
  border-radius:1px;margin-top:24px;overflow:hidden
}
#page-loader .loader-bar-fill {
  height:100%;background:var(--gradient-green);
  border-radius:1px;animation:loader-fill .8s ease forwards
}
@keyframes loader-fill { from{width:0} to{width:100%} }

/* ── Mobile responsive bento ── */
@media(max-width:900px) {
  .bento-span-4,.bento-span-5,.bento-span-6,.bento-span-7,.bento-span-8{grid-column:span 12}
}
@media(max-width:600px) {
  .bento-grid{gap:12px}
  .bento-card{padding:20px}
  .svc-card-26{padding:20px}
}

/* ── 2026 Homepage Responsive ── */
@media(max-width:900px) {
  /* Hero 2-col → 1-col */
  #hero-canvas { opacity:.4 }
  /* Services 3-col → 2-col */
  section [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important
  }
  /* Stats 4-col → 2-col */
  section [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2,1fr) !important
  }
  /* Hero grid */
  section [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important
  }
  /* Hide bento dashboard on mobile hero */
  .bento-grid { gap:12px }
}
@media(max-width:640px) {
  section [style*="grid-template-columns:repeat(3,1fr)"],
  section [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important
  }
  .marquee-wrap { -webkit-mask:none; mask:none }
  .review-26 { width:280px }
  /* CTA section padding */
  .glass-2[style*="padding:64px"] { padding:36px 24px !important }
  /* Hide 3D canvas on small screens for perf */
  #hero-canvas { display:none }
  .hero-3d-wrap { min-height:auto !important; padding:100px 0 60px !important }
  .hero-badge-26 { font-size:.65rem }
}
/* Nav right — hide currency text label on small screens */
@media(max-width:480px) {
  #cur-btn span { display:none }
  #cur-btn::after { content:attr(data-cur) }
  .nav-right .btn-outline { display:none }
}
/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — PREMIUM 2026 REDESIGN
   Philosophy: Clean white base, vivid brand green accents,
   sharp shadows, warm cream tones — feels like a premium SaaS.
   ════════════════════════════════════════════════════════════════ */

[data-theme="light"] {
  --primary:        #2e7d10;
  --primary-dark:   #1b5e20;
  --primary-light:  #4caf50;
  --primary-glow:   rgba(46,125,16,.25);
  --bg-base:        #f7f9f4;
  --bg-1:           #ffffff;
  --bg-2:           #f0f5eb;
  --bg-3:           #e8f0e0;
  --bg-card:        #ffffff;
  --glass:          rgba(46,125,16,.06);
  --glass-border:   rgba(46,125,16,.16);
  --text-primary:   #1a2e0a;
  --text-secondary: #3d5c1e;
  --text-muted:     rgba(61,92,30,.55);
  --text-dim:       rgba(61,92,30,.3);
  --gradient-green:     linear-gradient(135deg,#2e7d10 0%,#4caf50 100%);
  --gradient-green-rev: linear-gradient(135deg,#4caf50 0%,#2e7d10 100%);
  --gradient-card:      linear-gradient(135deg,rgba(46,125,16,.04) 0%,rgba(76,175,80,.02) 100%);
  --shadow-glow:    0 0 20px rgba(46,125,16,.18),0 0 40px rgba(46,125,16,.08);
  --shadow-card:    0 2px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
  --shadow-lg:      0 8px 40px rgba(0,0,0,.1),0 2px 8px rgba(0,0,0,.06);
  --border:         rgba(46,125,16,.14);
}

/* ── Base ── */
[data-theme="light"] body {
  background: #f7f9f4;
  color: #1a2e0a;
}
[data-theme="light"] body::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(76,175,80,.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 90%,  rgba(46,125,16,.05) 0%, transparent 60%);
}
[data-theme="light"] ::selection { background: #4caf50; color: #fff; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f5eb; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: linear-gradient(135deg,#4caf50,#2e7d10); }

/* ── Typography ── */
[data-theme="light"] h1,
[data-theme="light"] h2,
[data-theme="light"] h3,
[data-theme="light"] h4,
[data-theme="light"] h5 { color: #1a2e0a; }
[data-theme="light"] p   { color: #3d5c1e; }
[data-theme="light"] a   { color: var(--primary); }
[data-theme="light"] a:hover { color: var(--primary-light); }
[data-theme="light"] [style*="color:#fff"],
[data-theme="light"] [style*="color: #fff"],
[data-theme="light"] [style*="color:white"] { color: #1a2e0a !important; }
[data-theme="light"] [style*="color:rgba(177"],
[data-theme="light"] [style*="color:rgba(220"],
[data-theme="light"] [style*="color:#ccc"],
[data-theme="light"] [style*="color:#b1"],
[data-theme="light"] [style*="color:#e0"] { color: #3d5c1e !important; }
[data-theme="light"] [style*="color:var(--text-muted)"] { color: rgba(61,92,30,.55) !important; }

/* ── Navbar ── */
[data-theme="light"] .navbar {
  background: rgba(247,249,244,.94);
  border-bottom: 1px solid rgba(46,125,16,.12);
  box-shadow: 0 1px 20px rgba(0,0,0,.06);
}
[data-theme="light"] .navbar.scrolled {
  background: rgba(247,249,244,.99);
  box-shadow: 0 2px 24px rgba(0,0,0,.08);
}
[data-theme="light"] .logo-icon { background: linear-gradient(135deg,#2e7d10,#4caf50); color: #fff; }
[data-theme="light"] .logo-text { color: #1a2e0a; }
[data-theme="light"] .logo-text span { color: var(--primary); }
[data-theme="light"] .nav-links a { color: #3d5c1e; }
[data-theme="light"] .nav-links a:hover { color: #1a2e0a; background: rgba(46,125,16,.07); }
[data-theme="light"] .nav-links a.active { color: var(--primary); background: rgba(46,125,16,.1); font-weight: 600; }

/* ── Buttons ── */
[data-theme="light"] .btn-primary { background: linear-gradient(135deg,#2e7d10,#4caf50); color: #fff; box-shadow: 0 4px 16px rgba(46,125,16,.3); }
[data-theme="light"] .btn-primary:hover { box-shadow: 0 6px 24px rgba(46,125,16,.4); color: #fff; }
[data-theme="light"] .btn-outline { background: transparent; color: var(--primary); border-color: var(--primary); }
[data-theme="light"] .btn-outline:hover { background: rgba(46,125,16,.07); }
[data-theme="light"] .btn-glass { background: rgba(46,125,16,.07); color: var(--primary); border: 1px solid rgba(46,125,16,.2); }
[data-theme="light"] .btn-glass:hover { background: rgba(46,125,16,.14); }
[data-theme="light"] .btn-dark { background: #fff; color: #1a2e0a; border: 1px solid rgba(46,125,16,.2); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
[data-theme="light"] .btn-dark:hover { background: rgba(46,125,16,.06); border-color: var(--primary); color: var(--primary); }
[data-theme="light"] .theme-toggle { background: rgba(46,125,16,.08); border-color: rgba(46,125,16,.2); color: var(--primary); }

/* ── Cards & Panels ── */
[data-theme="light"] .glass-panel {
  background: #ffffff;
  border: 1px solid rgba(46,125,16,.12);
  box-shadow: 0 2px 16px rgba(0,0,0,.06), 0 1px 4px rgba(0,0,0,.03);
}
[data-theme="light"] .glass-panel:hover { border-color: rgba(46,125,16,.25); }
[data-theme="light"] .card {
  background: #ffffff;
  border: 1px solid rgba(46,125,16,.12);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .card:hover { border-color: rgba(46,125,16,.3); box-shadow: 0 8px 32px rgba(0,0,0,.1); }
[data-theme="light"] .glass-2 {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(46,125,16,.15);
  box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.9);
}
[data-theme="light"] .bento-card {
  background: #ffffff;
  border: 1px solid rgba(46,125,16,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
[data-theme="light"] .bento-card:hover { border-color: rgba(46,125,16,.28); box-shadow: 0 8px 28px rgba(0,0,0,.08); }
[data-theme="light"] .svc-card-26 {
  background: #ffffff;
  border: 1px solid rgba(46,125,16,.1);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
[data-theme="light"] .svc-card-26:hover { border-color: rgba(46,125,16,.3); box-shadow: 0 12px 36px rgba(0,0,0,.1); }

/* ── Section pills & tags ── */
[data-theme="light"] .section-pill { background: rgba(46,125,16,.08); border-color: rgba(46,125,16,.2); color: var(--primary); }
[data-theme="light"] .section-tag  { background: rgba(46,125,16,.08); border-color: rgba(46,125,16,.2); color: var(--primary); }
[data-theme="light"] .hero-badge-26 { background: rgba(46,125,16,.08); border-color: rgba(46,125,16,.2); color: var(--primary); }
[data-theme="light"] .hero-badge-26 .dot { background: #4caf50; box-shadow: 0 0 8px rgba(76,175,80,.5); }

/* ── Platform chips ── */
[data-theme="light"] .platform-chip { background: #fff; border: 1px solid rgba(46,125,16,.15); color: #3d5c1e; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
[data-theme="light"] .platform-chip:hover { background: rgba(46,125,16,.07); border-color: rgba(46,125,16,.3); color: var(--primary); }

/* ── Highlight text gradient ── */
[data-theme="light"] .highlight {
  background: linear-gradient(135deg,#2e7d10,#4caf50,#66bb6a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Stats ── */
[data-theme="light"] .stat-26 { background: #fff; border: 1px solid rgba(46,125,16,.12); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
[data-theme="light"] .stat-26:hover { background: rgba(46,125,16,.04); border-color: rgba(46,125,16,.22); }
[data-theme="light"] .stat-num-26 { background: linear-gradient(135deg,#2e7d10,#4caf50); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
[data-theme="light"] .stat-label-26 { color: rgba(61,92,30,.6); }

/* ── Service cards ── */
[data-theme="light"] .svc-icon-26 { background: rgba(46,125,16,.08); border-color: rgba(46,125,16,.18); }
[data-theme="light"] .svc-card-26 h3 { color: #1a2e0a !important; }
[data-theme="light"] .svc-card-26 p  { color: #3d5c1e !important; }
[data-theme="light"] .svc-price-26 { background: linear-gradient(135deg,#2e7d10,#4caf50); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ── Bento cards ── */
[data-theme="light"] .bento-card h3 { color: #1a2e0a !important; }
[data-theme="light"] .bento-card p  { color: #3d5c1e !important; }
[data-theme="light"] .bento-card::before { background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(46,125,16,.07) 0%, transparent 60%); }

/* ── Feature list ── */
[data-theme="light"] .feature-list-26 li { color: #3d5c1e; }
[data-theme="light"] .feature-list-26 li::before {
  background-color: rgba(46,125,16,.1);
  border-color: rgba(46,125,16,.28);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%232e7d10' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Waveform ── */
[data-theme="light"] .waveform span { background: var(--primary); }

/* ── Badges ── */
[data-theme="light"] .badge-success { background: rgba(46,125,16,.1);  color: #1b5e20; border-color: rgba(46,125,16,.22); }
[data-theme="light"] .badge-info    { background: rgba(2,136,209,.1);   color: #01579b; border-color: rgba(2,136,209,.22); }
[data-theme="light"] .badge-warning { background: rgba(245,124,0,.1);   color: #e65100; border-color: rgba(245,124,0,.22); }
[data-theme="light"] .badge-danger  { background: rgba(211,47,47,.1);   color: #b71c1c; border-color: rgba(211,47,47,.22); }
[data-theme="light"] .badge-secondary{ background: rgba(0,0,0,.06);     color: #3d5c1e; border-color: rgba(0,0,0,.1); }

/* ── Flash messages ── */
[data-theme="light"] .flash-success { background: rgba(46,125,16,.08);  border-color: rgba(46,125,16,.25); color: #1b5e20; }
[data-theme="light"] .flash-error   { background: rgba(211,47,47,.07);  border-color: rgba(211,47,47,.22); color: #b71c1c; }
[data-theme="light"] .flash-info    { background: rgba(2,136,209,.07);  border-color: rgba(2,136,209,.2);  color: #01579b; }

/* ── Forms ── */
[data-theme="light"] .form-label { color: #3d5c1e; }
[data-theme="light"] .form-control {
  background: #fff;
  border: 1.5px solid rgba(46,125,16,.18);
  color: #1a2e0a;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
[data-theme="light"] .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,125,16,.12); }
[data-theme="light"] .form-control::placeholder { color: rgba(61,92,30,.38); }

/* ── Custom select ── */
[data-theme="light"] .cs-trigger { background: #fff; border-color: rgba(46,125,16,.18); color: #1a2e0a; box-shadow: 0 1px 4px rgba(0,0,0,.04); }
[data-theme="light"] .cs-trigger:hover { border-color: rgba(46,125,16,.35); }
[data-theme="light"] .cs-dropdown { background: #fff; border-color: rgba(46,125,16,.2); box-shadow: 0 8px 28px rgba(0,0,0,.12); }
[data-theme="light"] .cs-option { color: #3d5c1e; }
[data-theme="light"] .cs-option:hover { background: rgba(46,125,16,.07); color: #1a2e0a; }
[data-theme="light"] .cs-option.selected { background: rgba(46,125,16,.1); color: var(--primary); }

/* ── Tables ── */
[data-theme="light"] .table-wrap { background: #fff; border: 1px solid rgba(46,125,16,.1); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
[data-theme="light"] table { color: #1a2e0a; }
[data-theme="light"] th { background: rgba(46,125,16,.06) !important; color: #1a2e0a !important; border-bottom: 2px solid rgba(46,125,16,.15) !important; }
[data-theme="light"] td { color: #3d5c1e !important; border-bottom: 1px solid rgba(46,125,16,.07) !important; }
[data-theme="light"] tr:hover td { background: rgba(46,125,16,.03) !important; }

/* ── Currency dropdown ── */
[data-theme="light"] #cur-drop { background: #fff; border-color: rgba(46,125,16,.18); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

/* ── Review cards ── */
[data-theme="light"] .review-26 { background: #fff; border: 1px solid rgba(46,125,16,.12); box-shadow: 0 2px 12px rgba(0,0,0,.05); }
[data-theme="light"] .review-26 p { color: #3d5c1e !important; }
[data-theme="light"] .review-26:hover { border-color: rgba(46,125,16,.25); box-shadow: 0 6px 24px rgba(0,0,0,.08); }

/* ── Admin ── */
[data-theme="light"] .admin-sidebar {
  background: linear-gradient(180deg,#f0f7e8,#e8f2dc);
  border-right: 1px solid rgba(46,125,16,.12);
  box-shadow: 2px 0 16px rgba(0,0,0,.04);
}
[data-theme="light"] .admin-logo .logo-text { color: #1a2e0a; }
[data-theme="light"] .admin-nav a { color: #3d5c1e; border-radius: 8px; }
[data-theme="light"] .admin-nav a:hover { background: rgba(46,125,16,.1); color: var(--primary); }
[data-theme="light"] .admin-nav a.active { background: rgba(46,125,16,.14); color: var(--primary); font-weight: 600; }
[data-theme="light"] .admin-nav-sep { color: rgba(61,92,30,.4) !important; }
[data-theme="light"] .admin-stat-card { background: #fff; border: 1px solid rgba(46,125,16,.1); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
[data-theme="light"] .admin-stat-num { color: #1a2e0a !important; }
[data-theme="light"] .admin-stat-icon { filter: hue-rotate(0deg); }
[data-theme="light"] .page-title-bar { color: #1a2e0a !important; }
[data-theme="light"] .page-sub { color: #3d5c1e !important; }
[data-theme="light"] .admin-main { background: transparent; }

/* ── Client sidebar ── */
[data-theme="light"] .client-sidebar {
  background: linear-gradient(180deg,#f0f7e8,#e8f2dc);
  border-right: 1px solid rgba(46,125,16,.12);
}
[data-theme="light"] .client-nav a { color: #3d5c1e; }
[data-theme="light"] .client-nav a:hover,
[data-theme="light"] .client-nav a.active { background: rgba(46,125,16,.12); color: var(--primary); }

/* ── Footer ── */
[data-theme="light"] .footer { background: linear-gradient(180deg,#e8f2dc,#deebd0); border-top: 1px solid rgba(46,125,16,.14); }
[data-theme="light"] .footer h5 { color: #1a2e0a; }
[data-theme="light"] .footer-col a { color: #3d5c1e; }
[data-theme="light"] .footer-col a:hover { color: var(--primary); }
[data-theme="light"] .footer-about { color: #3d5c1e; }
[data-theme="light"] .footer-bottom { border-top-color: rgba(46,125,16,.12); }
[data-theme="light"] .footer-bottom p { color: rgba(61,92,30,.6); }
[data-theme="light"] .footer-bottom a { color: var(--primary); }
[data-theme="light"] .footer-social a { color: #3d5c1e; }
[data-theme="light"] .footer-social a:hover { color: var(--primary); transform: translateY(-2px); }
[data-theme="light"] .contact-item i { color: var(--primary); }
[data-theme="light"] .contact-item span { color: #3d5c1e; }

/* ── Hero 3D canvas – softer in light ── */
[data-theme="light"] #hero-canvas { opacity: .15; }
[data-theme="light"] #globe-canvas { opacity: .2; }
[data-theme="light"] .aurora-bg::before { background: radial-gradient(ellipse,rgba(76,175,80,.1) 0%,transparent 65%); }
[data-theme="light"] .aurora-bg::after  { background: radial-gradient(ellipse,rgba(46,125,16,.07) 0%,transparent 65%); }

/* ── CTA section ── */
[data-theme="light"] .grad-border.glass-2 { background: rgba(255,255,255,.95); }
[data-theme="light"] .grad-border::before { background: linear-gradient(135deg,rgba(46,125,16,.4),rgba(76,175,80,.15),rgba(46,125,16,.08)); }

/* ── UI elements ── */
[data-theme="light"] #scroll-progress { background: linear-gradient(90deg,#2e7d10,#4caf50); }
[data-theme="light"] #scroll-top { background: linear-gradient(135deg,#4caf50,#2e7d10); color: #fff; box-shadow: 0 4px 14px rgba(46,125,16,.3); }
[data-theme="light"] .glow-pulse { animation: border-glow-light 3s ease-in-out infinite; }
@keyframes border-glow-light {
  0%,100%{ box-shadow: 0 4px 16px rgba(46,125,16,.25); }
  50%    { box-shadow: 0 4px 24px rgba(46,125,16,.45), 0 0 30px rgba(76,175,80,.2); }
}

/* ── Auth pages ── */
[data-theme="light"] .logo-icon { background: linear-gradient(135deg,#2e7d10,#4caf50); color: #fff; }

/* ── FAQ ── */
[data-theme="light"] .faq-item { background: #fff; border-color: rgba(46,125,16,.12); }
[data-theme="light"] .faq-question { color: #1a2e0a; }
[data-theme="light"] .faq-answer p { color: #3d5c1e; }

/* ── Border overrides for inline rgba(255,255,255,...) borders ── */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.07)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.05)"],
[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"],
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"] { border-color: rgba(46,125,16,.1) !important; }

/* ── Ticket pages in light mode ── */
[data-theme="light"] .ticket-msg-client { background: rgba(46,125,16,.07); border-color: rgba(46,125,16,.18); }
[data-theme="light"] .ticket-msg-admin  { background: rgba(2,136,209,.07); border-color: rgba(2,136,209,.18); }

/* ════════════════════════════════════════════════════════════════
   BUG FIXES v5.0
   ════════════════════════════════════════════════════════════════ */

/* ── Theme toggle button — dark mode base style (was unstyled) ── */
.theme-toggle {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--border-radius-sm);
  color: var(--primary);
  font-size: .95rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(164,206,65,.12);
  border-color: rgba(164,206,65,.3);
}

/* ── FAQ chevron rotation (was missing entirely) ── */
.faq-item.open .faq-question i {
  transform: rotate(180deg);
}

/* ── Reveal transition-delay support (stagger-children fix) ── */
.reveal {
  transition: opacity .55s ease, transform .55s ease;
}

/* ── Light mode: service/checkout/order box ── */
[data-theme="light"] .service-card {
  background: #fff;
  border-color: rgba(46,125,16,.12);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
[data-theme="light"] .service-card:hover {
  border-color: rgba(46,125,16,.35);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
[data-theme="light"] .order-box,
[data-theme="light"] .checkout-summary {
  background: #fff;
  border-color: rgba(46,125,16,.15);
}
[data-theme="light"] .calc-wrapper {
  background: #f0f5eb;
  border-color: rgba(46,125,16,.2);
}
[data-theme="light"] .calc-result {
  background: rgba(46,125,16,.06);
  border-color: rgba(46,125,16,.18);
}
[data-theme="light"] .pricing-card {
  background: #fff;
  border-color: rgba(46,125,16,.12);
}
[data-theme="light"] .pricing-card.featured {
  background: linear-gradient(145deg, rgba(46,125,16,.07), rgba(76,175,80,.04));
  border-color: rgba(46,125,16,.35);
}
[data-theme="light"] .payment-method-card {
  border-color: rgba(46,125,16,.15);
}
[data-theme="light"] .payment-method-card:hover,
[data-theme="light"] .payment-method-card.selected {
  border-color: var(--primary);
  background: rgba(46,125,16,.05);
}

/* ── Light mode: admin topbar ── */
[data-theme="light"] .admin-topbar {
  background: #fff;
  border-bottom-color: rgba(46,125,16,.12);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

/* ── Light mode: toggle switches ── */
[data-theme="light"] .toggle-slider {
  background: rgba(46,125,16,.12);
  border-color: rgba(46,125,16,.2);
}
[data-theme="light"] .toggle-slider:before { background: rgba(46,125,16,.4); }
[data-theme="light"] input:checked + .toggle-slider { background: rgba(46,125,16,.25); }
[data-theme="light"] input:checked + .toggle-slider:before { background: var(--primary); }

/* ── Light mode: scrollbar ── */
[data-theme="light"] ::-webkit-scrollbar-track { background: #f0f5eb; }

/* ── Light mode: inline dark backgrounds on client/public pages ── */
[data-theme="light"] [style*="background:rgba(10,21,10"],
[data-theme="light"] [style*="background:rgba(6,14,6"],
[data-theme="light"] [style*="background:rgba(15,30,15"],
[data-theme="light"] [style*="background:rgba(20,40,20"] {
  background: rgba(46,125,16,.05) !important;
}
[data-theme="light"] [style*="background:rgba(164,206,65,.04)"],
[data-theme="light"] [style*="background:rgba(164,206,65,.06)"],
[data-theme="light"] [style*="background:rgba(164,206,65,.07)"],
[data-theme="light"] [style*="background:rgba(164,206,65,.08)"] {
  background: rgba(46,125,16,.06) !important;
}
[data-theme="light"] [style*="background:rgba(255,255,255,.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.02)"] {
  background: #ffffff !important;
}

/* ── Light mode: inline text colours ── */
[data-theme="light"] [style*="color:var(--text-primary)"]   { color: #1a2e0a !important; }
[data-theme="light"] [style*="color:var(--text-secondary)"] { color: #3d5c1e !important; }
[data-theme="light"] [style*="color:var(--text-muted)"]     { color: rgba(61,92,30,.55) !important; }
[data-theme="light"] [style*="color:#fff"]:not(.btn-primary):not(.btn) { color: #1a2e0a !important; }
[data-theme="light"] [style*="color:white"]:not(.btn)       { color: #1a2e0a !important; }

/* ── Light mode: inline border overrides (rgba green already handled; rgba white) ── */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255"] { border-color: rgba(46,125,16,.1) !important; }
[data-theme="light"] [style*="border-top:1px solid rgba(255,255,255"] { border-color: rgba(46,125,16,.1) !important; }
[data-theme="light"] [style*="border-bottom:1px solid rgba(255,255,255"] { border-color: rgba(46,125,16,.08) !important; }

/* ── Light mode: marquee strip stays dark/green ── */
[data-theme="light"] .marquee-strip { background: linear-gradient(135deg,#2e7d10,#4caf50); }

/* ── Light mode: client main background ── */
[data-theme="light"] .client-main,
[data-theme="light"] .client-layout > main { background: #f7f9f4; }

/* ── Light mode: invoice paper (already white, just ensure text) ── */
[data-theme="light"] .invoice-paper { color: #111; }

/* ── Dark mode: ensure theme toggle arrow is visible in nav on mobile overlay ── */
@media(max-width:768px) {
  .nav-links.open .theme-toggle { display: none; } /* avoid duplicate – toggle is in nav-right */
}

/* ════════════════════════════════════════════════════════════════
   BUG FIXES v5.0
   ════════════════════════════════════════════════════════════════ */

/* ── Theme toggle button — dark mode base style (was unstyled) ── */
.theme-toggle {
  width: 38px; height: 38px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--border-radius-sm);
  color: var(--primary);
  font-size: .95rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: rgba(164,206,65,.12);
  border-color: rgba(164,206,65,.3);
}

/* ── FAQ chevron rotation (was missing entirely) ── */
.faq-item.open .faq-question i {
  transform: rotate(180deg);
}

/* ── Light mode: service/checkout/order box ── */
[data-theme="light"] .service-card {
  background: #fff;
  border-color: rgba(46,125,16,.12);
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
}
[data-theme="light"] .service-card:hover {
  border-color: rgba(46,125,16,.35);
  box-shadow: 0 8px 32px rgba(0,0,0,.1);
}
[data-theme="light"] .order-box,
[data-theme="light"] .checkout-summary {
  background: #fff;
  border-color: rgba(46,125,16,.15);
}
[data-theme="light"] .calc-wrapper {
  background: #f0f5eb;
  border-color: rgba(46,125,16,.2);
}
[data-theme="light"] .calc-result {
  background: rgba(46,125,16,.06);
  border-color: rgba(46,125,16,.18);
}
[data-theme="light"] .pricing-card {
  background: #fff;
  border-color: rgba(46,125,16,.12);
}
[data-theme="light"] .pricing-card.featured {
  background: linear-gradient(145deg, rgba(46,125,16,.07), rgba(76,175,80,.04));
  border-color: rgba(46,125,16,.35);
}
[data-theme="light"] .payment-method-card {
  border-color: rgba(46,125,16,.15);
}
[data-theme="light"] .payment-method-card:hover,
[data-theme="light"] .payment-method-card.selected {
  border-color: var(--primary);
  background: rgba(46,125,16,.05);
}

/* ── Light mode: admin topbar ── */
[data-theme="light"] .admin-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(46,125,16,.12);
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
}

/* ── Light mode: toggle switches ── */
[data-theme="light"] .toggle-slider {
  background: rgba(46,125,16,.12);
  border-color: rgba(46,125,16,.2);
}
[data-theme="light"] .toggle-slider:before { background: rgba(46,125,16,.4); }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider { background: rgba(46,125,16,.25); border-color: var(--primary); }
[data-theme="light"] .toggle-switch input:checked + .toggle-slider:before { background: var(--primary); }

/* ── Light mode: inline dark backgrounds ── */
[data-theme="light"] [style*="background:rgba(10,21,10"],
[data-theme="light"] [style*="background:rgba(6,14,6"],
[data-theme="light"] [style*="background:rgba(15,30,15"],
[data-theme="light"] [style*="background:rgba(20,40,20"] {
  background: rgba(46,125,16,.04) !important;
}
[data-theme="light"] [style*="background:rgba(255,255,255,.03)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.04)"],
[data-theme="light"] [style*="background:rgba(255,255,255,.02)"] {
  background: #ffffff !important;
}

/* ── Light mode: inline text colours ── */
[data-theme="light"] [style*="color:var(--text-primary)"]   { color: #1a2e0a !important; }
[data-theme="light"] [style*="color:var(--text-secondary)"] { color: #3d5c1e !important; }
[data-theme="light"] [style*="color:var(--text-muted)"]     { color: rgba(61,92,30,.55) !important; }

/* ── Light mode: inline border overrides ── */
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.08)"],
[data-theme="light"] [style*="border:1px solid rgba(255,255,255,.06)"] { border-color: rgba(46,125,16,.1) !important; }

/* ── Light mode: marquee strip stays branded ── */
[data-theme="light"] .marquee-strip { background: linear-gradient(135deg,#2e7d10,#4caf50); }

/* ── Light mode: client main background ── */
[data-theme="light"] .client-layout > main { background: #f7f9f4; }

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE HERO ANIMATION FIX v5.1
   ════════════════════════════════════════════════════════════════ */

/* Override the near-invisible opacity (was .15 / .20) */
[data-theme="light"] #hero-canvas  { opacity: 1 !important; filter: none; }
[data-theme="light"] #globe-canvas { opacity: 1 !important; filter: none; }

/* Subtle green-tinted hero bg so dark-green particles have contrast */
[data-theme="light"] .hero-3d-wrap {
  background: linear-gradient(160deg,
    rgba(232,245,233,.5) 0%,
    rgba(241,248,233,.4) 50%,
    rgba(232,245,233,.6) 100%
  ) !important;
}

/* Stronger aurora in light mode */
[data-theme="light"] .aurora-bg::before {
  background: radial-gradient(ellipse, rgba(46,125,16,.22) 0%, transparent 65%);
}
[data-theme="light"] .aurora-bg::after {
  background: radial-gradient(ellipse, rgba(76,175,80,.18) 0%, transparent 65%);
}

/* Keep hero headline readable on the tinted bg */
[data-theme="light"] .hero-3d-wrap h1 { color: #1a2e0a; }
[data-theme="light"] .hero-3d-wrap h1 span[style*="color:#fff"] { color: #1a2e0a !important; }

/* ── Login / Signup page wider card ── */
.auth-wide { max-width: 580px !important; }

/* ════════════════════════════════════════════════════════════════
   SERVICE CARD EQUAL HEIGHT FIX
   ════════════════════════════════════════════════════════════════ */

/* Make svc-card-26 a flex column so button always sticks to bottom */
.svc-card-26 {
  display: flex;
  flex-direction: column;
}

/* Description grows to fill available space → equalises card height */
.svc-card-26 > p {
  flex: 1;
  min-height: 0;
}

/* Same fix for classic service cards on services.php */
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card .service-desc {
  flex: 1;
}

/* ════════════════════════════════════════════════════════════════
   SERVICE CATEGORY TAGS — branded per platform
   ════════════════════════════════════════════════════════════════ */
.svc-cat-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid transparent;
  transition: var(--transition);
}
.svc-cat-tag i { font-size: .72rem; }

/* Per-platform colours */
.cat-instagram  { background: rgba(225,48,108,.12);  border-color: rgba(225,48,108,.28);  color: #e1306c; }
.cat-youtube    { background: rgba(255,48,48,.10);   border-color: rgba(255,48,48,.26);   color: #ff4444; }
.cat-spotify    { background: rgba(29,185,84,.12);   border-color: rgba(29,185,84,.28);   color: #1db954; }
.cat-music      { background: rgba(164,206,65,.12);  border-color: rgba(164,206,65,.28);  color: var(--primary); }
.cat-soundcloud { background: rgba(255,85,0,.11);    border-color: rgba(255,85,0,.26);    color: #ff5500; }
.cat-traffic    { background: rgba(33,150,243,.10);  border-color: rgba(33,150,243,.26);  color: #42a5f5; }
.cat-ads        { background: rgba(255,152,0,.11);   border-color: rgba(255,152,0,.26);   color: #ffa726; }
.cat-apple      { background: rgba(180,180,180,.10); border-color: rgba(180,180,180,.22); color: #aaa; }
.cat-facebook   { background: rgba(24,119,242,.10);  border-color: rgba(24,119,242,.25);  color: #1877f2; }
.cat-tiktok     { background: rgba(255,0,80,.10);    border-color: rgba(255,0,80,.24);    color: #ff0050; }
.cat-default    { background: rgba(164,206,65,.10);  border-color: rgba(164,206,65,.24);  color: var(--primary); }

/* Light mode adjustments — slightly stronger backgrounds */
[data-theme="light"] .cat-instagram  { background: rgba(225,48,108,.09);  color: #c2185b; }
[data-theme="light"] .cat-youtube    { background: rgba(211,47,47,.09);   color: #c62828; }
[data-theme="light"] .cat-spotify    { background: rgba(27,94,32,.09);    color: #1b5e20; }
[data-theme="light"] .cat-music      { background: rgba(46,125,16,.09);   color: var(--primary); }
[data-theme="light"] .cat-soundcloud { background: rgba(230,74,25,.09);   color: #e64a19; }
[data-theme="light"] .cat-traffic    { background: rgba(13,71,161,.09);   color: #0d47a1; }
[data-theme="light"] .cat-ads        { background: rgba(230,81,0,.09);    color: #e65100; }

/* Auth pages — extra padding inside the wider card */
@media(min-width:600px) {
  .client-auth-panel { padding: 40px 52px; }
}

/* ════════════════════════════════════════════════════════════════
   BACKGROUND ANIMATION — reduced by 50%
   ════════════════════════════════════════════════════════════════ */

/* Aurora — half intensity, double duration (50% slower) */
.aurora-bg::before {
  background: radial-gradient(ellipse, rgba(164,206,65,.06) 0%, transparent 65%) !important;
  animation-duration: 36s !important;
}
.aurora-bg::after {
  background: radial-gradient(ellipse, rgba(63,113,22,.05) 0%, transparent 65%) !important;
  animation-duration: 44s !important;
}

/* body::before ambient glow — half */
body::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(164,206,65,.035) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(63,113,22,.025) 0%, transparent 60%) !important;
}

/* Light mode aurora — also halved */
[data-theme="light"] .aurora-bg::before {
  background: radial-gradient(ellipse, rgba(46,125,16,.11) 0%, transparent 65%) !important;
}
[data-theme="light"] .aurora-bg::after {
  background: radial-gradient(ellipse, rgba(76,175,80,.09) 0%, transparent 65%) !important;
}

/* ── Background animation +30% (overrides previous -50% block) ── */
.aurora-bg::before {
  background: radial-gradient(ellipse, rgba(164,206,65,.078) 0%, transparent 65%) !important;
  animation-duration: 28s !important;
}
.aurora-bg::after {
  background: radial-gradient(ellipse, rgba(63,113,22,.065) 0%, transparent 65%) !important;
  animation-duration: 34s !important;
}
body::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(164,206,65,.046) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 80%,  rgba(63,113,22,.033) 0%, transparent 60%) !important;
}
[data-theme="light"] .aurora-bg::before {
  background: radial-gradient(ellipse, rgba(46,125,16,.143) 0%, transparent 65%) !important;
}
[data-theme="light"] .aurora-bg::after {
  background: radial-gradient(ellipse, rgba(76,175,80,.117) 0%, transparent 65%) !important;
}

/* ════════════════════════════════════════════════════════════════
   REVIEWS MARQUEE FIX
   The generic .marquee-track rule inherited text-transform:uppercase
   and color:#000 from the promo-strip rule. Scope promo styles to
   .marquee-strip and reset for .marquee-wrap (reviews).
   ════════════════════════════════════════════════════════════════ */

/* Promo strip keeps its uppercase bold style */
.marquee-strip .marquee-track {
  text-transform: uppercase;
  color: #000;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .1em;
}

/* Reviews marquee — reset all inherited promo styles */
.marquee-wrap .marquee-track {
  text-transform: none !important;
  color: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: normal !important;
  gap: 20px;
}

/* Review card — better sizing and readability */
.review-26 {
  width: 340px;
  min-height: 210px;
  padding: 26px 28px;
}
.review-26 p {
  font-size: .88rem !important;
  line-height: 1.75 !important;
  font-style: italic;
  color: var(--text-secondary) !important;
}

/* Light mode review text — legible dark green */
[data-theme="light"] .review-26 p {
  color: #3d5c1e !important;
}
[data-theme="light"] .review-26 {
  background: #fff;
  border: 1px solid rgba(46,125,16,.14);
  box-shadow: 0 3px 16px rgba(0,0,0,.07);
}

/* ════════════════════════════════════════════════════════════════
   REVIEW CARDS — complete redesign
   ════════════════════════════════════════════════════════════════ */

/* Force white-space normal on the reviews marquee track */
.review-marquee-track {
  display: flex;
  width: max-content;
  gap: 24px;
  padding: 16px 0;
  animation: marquee 36s linear infinite;
  white-space: normal !important;
}
.marquee-wrap:hover .review-marquee-track { animation-play-state: paused; }

/* Card */
.review-card-new {
  width: 360px;
  flex-shrink: 0;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(164,206,65,.15);
  border-radius: 20px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  transition: border-color .3s, transform .3s, box-shadow .3s;
  white-space: normal;
}
.review-card-new:hover {
  border-color: rgba(164,206,65,.35);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,.3), 0 0 20px rgba(164,206,65,.06);
}

/* Large decorative quote */
.rcn-quote {
  font-family: Georgia, serif;
  font-size: 4rem;
  line-height: 1;
  color: var(--primary);
  opacity: .25;
  margin-bottom: -8px;
  margin-top: -8px;
}

/* Stars */
.rcn-stars {
  color: #fbbf24;
  font-size: .9rem;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

/* Review text */
.rcn-text {
  font-size: .875rem;
  line-height: 1.75;
  color: var(--text-secondary);
  flex: 1;
  margin-bottom: 20px;
  white-space: normal;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Author row */
.rcn-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(164,206,65,.1);
}
.rcn-avatar {
  width: 40px;
  height: 40px;
  background: var(--gradient-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  color: #000;
  font-size: .78rem;
  flex-shrink: 0;
}
.rcn-name {
  font-size: .85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.rcn-country {
  font-size: .72rem;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Light mode */
[data-theme="light"] .review-card-new {
  background: #fff;
  border-color: rgba(46,125,16,.14);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
[data-theme="light"] .review-card-new:hover {
  border-color: rgba(46,125,16,.32);
  box-shadow: 0 12px 36px rgba(0,0,0,.1);
}
[data-theme="light"] .rcn-text { color: #3d5c1e; }
[data-theme="light"] .rcn-name { color: #1a2e0a; }
[data-theme="light"] .rcn-country { color: rgba(61,92,30,.55); }
[data-theme="light"] .rcn-author { border-top-color: rgba(46,125,16,.12); }
[data-theme="light"] .rcn-quote { color: var(--primary); }

/* ══════════════════════════════════════════════
   LIGHT MODE — services.php fixes
══════════════════════════════════════════════ */

/* Service card text */
[data-theme="light"] .service-title {
  color: #1a2e0a !important;
}
[data-theme="light"] .service-desc {
  color: #3d5c1e !important;
}
[data-theme="light"] .service-price {
  color: var(--primary) !important;
}
[data-theme="light"] .service-price small {
  color: rgba(61,92,30,.6) !important;
}
[data-theme="light"] .service-icon {
  background: rgba(46,125,16,.1);
  color: var(--primary);
}

/* Feature section */
[data-theme="light"] .feature-title {
  color: #1a2e0a !important;
}
[data-theme="light"] .feature-desc {
  color: #3d5c1e !important;
}
[data-theme="light"] .feature-icon {
  background: rgba(46,125,16,.1);
  color: var(--primary);
}

/* Filter buttons */
[data-theme="light"] .filter-btn {
  background: rgba(46,125,16,.05);
  color: #3d5c1e;
  border-color: rgba(46,125,16,.15);
}
[data-theme="light"] .filter-btn:hover,
[data-theme="light"] .filter-btn.active {
  background: rgba(46,125,16,.12);
  color: var(--primary);
  border-color: var(--primary);
}

/* Service features list */
[data-theme="light"] .service-card ul li {
  color: #3d5c1e !important;
}

/* Page hero text */
[data-theme="light"] .page-hero p {
  color: #3d5c1e !important;
}

/* Section with bg-2 */
[data-theme="light"] [style*="background:var(--bg-2)"],
[data-theme="light"] [style*="background: var(--bg-2)"] {
  background: #f4f8ee !important;
}
[data-theme="light"] [style*="background:var(--bg-1)"],
[data-theme="light"] [style*="background: var(--bg-1)"] {
  background: #f8fbf2 !important;
}

/* General hardcoded white text override in cards */
[data-theme="light"] .service-card [style*="color:var(--text-secondary)"],
[data-theme="light"] .service-card [style*="color: var(--text-secondary)"] {
  color: #3d5c1e !important;
}
[data-theme="light"] .service-card [style*="color:var(--primary)"] {
  color: var(--primary) !important;
}

/* ══════════════════════════════════════════════
   MOBILE-FIRST RESPONSIVE — Global Overrides
   Covers inline-style grids via !important
══════════════════════════════════════════════ */

/* ── Base touch targets ── */
@media(max-width:768px) {
  .btn, button { min-height:44px; }
  input.form-control, select.form-control, textarea.form-control { font-size:16px !important; } /* prevent iOS zoom */
}

/* ── Collapse ALL inline grids on mobile ── */
@media(max-width:767px) {
  /* Any element with inline grid-template-columns inside panels/main areas */
  .glass-panel [style*="grid-template-columns"],
  .admin-main  [style*="grid-template-columns"],
  .client-main [style*="grid-template-columns"],
  main         [style*="grid-template-columns"],
  .container   [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* But keep 2-col for small badge/icon rows */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Tables: always scrollable on mobile ── */
@media(max-width:768px) {
  table { font-size:.78rem; }
  td, th { padding:8px 10px !important; white-space:normal; }
  .table-wrap, [style*="overflow-x:auto"] { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  /* Hide less-important columns */
  table td:nth-child(5),
  table th:nth-child(5) { display:none; }
}
@media(max-width:480px) {
  table td:nth-child(4),
  table th:nth-child(4) { display:none; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE-FIRST v2 — Comprehensive fixes
   ════════════════════════════════════════════════════════════════ */

/* ── Navbar: nav-right overflow on small screens ── */
@media(max-width:768px) {
  .navbar-inner { padding:0 16px; }
  .nav-right { gap:6px; }
  /* Hide Sign Up text on very small screens, keep icon */
  .nav-right .btn-primary .fa-user-plus + * { display:none; }
}
@media(max-width:480px) {
  /* Hide Logout button on tiny screens — reachable from dashboard */
  .nav-right .btn-outline { display:none; }
  /* Shrink currency button */
  .currency-switcher { font-size:.72rem; }
  #cur-btn { min-width:auto !important; padding:6px 8px !important; }
}
@media(max-width:360px) {
  /* Ultra-small: hide Sign Up button entirely */
  .nav-right .btn-primary { display:none; }
}

/* ── Typography scaling ── */
@media(max-width:768px) {
  h1 { font-size:2rem !important; }
  h2 { font-size:1.5rem !important; }
  h3 { font-size:1.15rem !important; }
  .hero h1, .page-hero h1 { font-size:2.2rem !important; }
  .section-tag { font-size:.65rem; }
}
@media(max-width:480px) {
  h1 { font-size:1.7rem !important; }
  .hero h1, .page-hero h1 { font-size:1.8rem !important; }
}

/* ── Container padding ── */
@media(max-width:480px) {
  .container { padding:0 14px; }
  section { padding-left:0 !important; padding-right:0 !important; }
}

/* ── Admin: 3-col and 2-col form grids → 1-col ── */
@media(max-width:768px) {
  /* Admin form grids */
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Admin stat grid stays 2-col on tablet */
  .admin-stat-grid { grid-template-columns: repeat(2,1fr) !important; }
  /* Admin page header */
  .page-header-bar { flex-wrap:wrap; gap:10px; }
  .page-header-bar h1, .page-title-bar { font-size:1.1rem !important; }
  /* Admin panel padding */
  .glass-panel { padding:16px !important; }
  /* Admin table action buttons */
  .admin-main table .btn { padding:5px 8px !important; font-size:.7rem; }
}
@media(max-width:480px) {
  .admin-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .admin-stat-card { padding:14px 12px !important; }
  .admin-stat-num  { font-size:1.5rem !important; }
}

/* ── Checkout: form + summary stack ── */
@media(max-width:768px) {
  .checkout-grid { grid-template-columns:1fr !important; gap:16px !important; }
  .checkout-summary { order:-1; } /* summary on top on mobile */
}

/* ── Service cards: ensure single col on mobile ── */
@media(max-width:600px) {
  .services-grid { grid-template-columns:1fr !important; }
  .service-card { padding:20px !important; }
}

/* ── Client layout (sidebar + main) ── */
@media(max-width:768px) {
  .client-layout { grid-template-columns:1fr !important; }
  .client-sidebar { display:none !important; }
  .client-main { padding:16px 12px !important; }
}

/* ── Glass panel content: inline grids inside sections ── */
@media(max-width:600px) {
  /* Pricing, stats, feature rows */
  div[style*="display:grid"][style*="repeat(auto-fill"],
  div[style*="display:grid"][style*="repeat(auto-fit"] {
    grid-template-columns: 1fr !important;
  }
  /* Summary rows on checkout/order detail */
  .summary-row { font-size:.82rem; }
  /* CTA buttons stack */
  .cta-btns { flex-direction:column !important; align-items:stretch !important; }
  .cta-btns .btn { width:100%; justify-content:center; }
  /* Hero button groups */
  .hero-btns { flex-direction:column !important; align-items:center !important; }
  .hero-btns .btn { width:100%; max-width:280px; justify-content:center; }
}

/* ── Footer ── */
@media(max-width:600px) {
  .footer-grid { grid-template-columns:1fr !important; gap:24px !important; }
  .footer-bottom { flex-direction:column !important; gap:8px !important; text-align:center; }
}

/* ── Modals / dropdowns ── */
@media(max-width:480px) {
  #cur-drop { right:auto !important; left:0 !important; min-width:140px !important; }
}

/* ── Services filter bar ── */
@media(max-width:600px) {
  .services-filter { gap:6px !important; }
  .filter-btn { font-size:.72rem !important; padding:6px 10px !important; }
}

/* ── Music promotion / service pages ── */
@media(max-width:600px) {
  .service-hero { padding:80px 0 40px !important; }
  .service-hero-grid { grid-template-columns:1fr !important; }
  .pricing-grid { grid-template-columns:1fr !important; }
}

/* ── Contact page ── */
@media(max-width:768px) {
  .contact-grid { grid-template-columns:1fr !important; }
}

/* ── About page ── */
@media(max-width:768px) {
  .about-grid { grid-template-columns:1fr !important; }
}

/* ── Client order detail: 2-col → 1-col ── */
@media(max-width:640px) {
  .client-main [style*="grid-template-columns:1fr 1fr"],
  .client-main [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns:1fr !important;
  }
}

/* ── Buttons: full-width on very small screens where stacked ── */
@media(max-width:400px) {
  .btn-lg { padding:12px 20px !important; font-size:.88rem !important; }
}

/* ── Admin layout sidebar show on desktop ── */
@media(min-width:769px) {
  .admin-sidebar { display:flex !important; }
  .admin-topbar  { display:none !important; }
  .admin-layout  { grid-template-columns:240px 1fr !important; }
}

/* ── Ensure images don't overflow ── */
img { max-width:100%; height:auto; }

/* ── Music plan checkout mobile ── */
@media(max-width:600px) {
  .music-plan-grid { grid-template-columns:1fr !important; }
}

/* ── Admin layout ── */
@media(max-width:768px) {
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-main   { padding: 16px 12px !important; }
  .admin-sidebar {
    position: fixed; left:-260px; top:0; height:100vh;
    width:240px; transition:left .28s ease;
    z-index:500; overflow-y:auto;
  }
  .admin-sidebar.open { left:0; }
  .admin-topbar { display:flex !important; }
  .page-header-bar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .page-header-bar > div:last-child {
    width: 100%; flex-wrap: wrap;
  }
}

/* ── Admin stat cards ── */
@media(max-width:768px) {
  .admin-stat-grid { grid-template-columns: 1fr 1fr !important; gap:12px !important; }
}
@media(max-width:400px) {
  .admin-stat-grid { grid-template-columns: 1fr !important; }
}

/* ── Modals: full-width on mobile ── */
@media(max-width:600px) {
  /* Target all fixed overlay modals */
  [style*="position:fixed"][style*="z-index:2000"] > .glass-panel,
  [style*="position:fixed"][style*="z-index:2000"] > div > .glass-panel {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  [style*="position:fixed"][style*="z-index:2000"] {
    align-items: flex-end !important;
    padding: 0 !important;
  }
}

/* ── Client layout ── */
@media(max-width:900px) {
  .client-layout { grid-template-columns: 1fr !important; }
  .client-sidebar { display:none; }
}

/* ── Forms ── */
@media(max-width:640px) {
  .form-group { margin-bottom:14px; }
  .glass-panel { padding:16px !important; }
  /* Stack form button rows */
  [style*="display:flex"][style*="gap:12px"] > .btn,
  [style*="display:flex"][style*="gap:10px"] > .btn {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Page headers ── */
@media(max-width:640px) {
  .page-title-bar { font-size:1rem !important; }
  h1[style*="font-size:1.5rem"] { font-size:1.2rem !important; }
  h1[style*="font-size:1.4rem"] { font-size:1.15rem !important; }
}

/* ── Public hero section ── */
@media(max-width:768px) {
  .hero { padding:80px 0 40px; text-align:center; }
  .hero-grid { grid-template-columns:1fr !important; }
  .hero-visual { display:none !important; }
  .hero h1 { font-size:clamp(1.6rem,6vw,2.4rem) !important; }
  .hero-desc { font-size:.95rem; max-width:100%; }
  .hero-btns { flex-direction:column; align-items:stretch; }
  .hero-btns .btn { justify-content:center; width:100%; }
}

/* ── Services grid ── */
@media(max-width:640px) {
  .services-grid { grid-template-columns:1fr !important; }
  .service-card { padding:20px 16px; }
  .services-filter { gap:6px; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; }
  .filter-btn { white-space:nowrap; flex-shrink:0; }
}

/* ── Checkout / payment ── */
@media(max-width:768px) {
  .checkout-grid { grid-template-columns:1fr !important; }
}

/* ── Footer ── */
@media(max-width:640px) {
  .footer-grid { grid-template-columns:1fr !important; gap:28px !important; }
  .footer-bottom { flex-direction:column; text-align:center; gap:10px; }
  .footer-bottom-links { justify-content:center; }
}

/* ── Navbar ── */
@media(max-width:768px) {
  .nav-right .btn { padding:7px 12px; font-size:.75rem; }
  .currency-switcher { display:none; } /* hide currency on very small */
}
@media(max-width:480px) {
  .navbar-inner { padding:0 16px; }
}

/* ── Music plan cards ── */
@media(max-width:640px) {
  .mpc-grid { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 360px"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 320px"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 280px"] { grid-template-columns:1fr !important; }
}

/* ── Add-order page ── */
@media(max-width:960px) {
  .ao-grid { grid-template-columns:1fr !important; }
}

/* ── Ticket view ── */
@media(max-width:640px) {
  [style*="grid-template-columns:1fr 280px"] { grid-template-columns:1fr !important; }
  [style*="grid-template-columns:1fr 1fr"] { grid-template-columns:1fr !important; }
}

/* ── Summary lines (checkout, orders) ── */
@media(max-width:480px) {
  .summary-line { font-size:.82rem; }
}

/* ── Cards / bento ── */
@media(max-width:768px) {
  .bento-card { padding:16px; }
  [style*="grid-template-columns:1fr 1fr;gap:14px"] { grid-template-columns:1fr !important; }
}

/* ── Client services cards ── */
@media(max-width:600px) {
  [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
    grid-template-columns:1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fit,minmax("] {
    grid-template-columns:1fr 1fr !important;
  }
}
@media(max-width:400px) {
  [style*="grid-template-columns:repeat(auto-fit,minmax("] {
    grid-template-columns:1fr !important;
  }
}

/* ── Settings tabs ── */
@media(max-width:640px) {
  [style*="width:fit-content"][style*="flex-wrap:wrap"] { width:100% !important; }
  [style*="padding:4px"][style*="border-radius:10px"] { flex-wrap:wrap !important; width:100% !important; }
}

/* ── Invoice ── */
@media(max-width:640px) {
  .invoice-paper { padding:24px 16px; }
  [style*="display:flex;justify-content:space-between"] {
    flex-direction:column; gap:8px;
  }
}

/* ── Orders detail ── */
@media(max-width:640px) {
  [style*="grid-template-columns:1fr 1fr;gap:24px"] { grid-template-columns:1fr !important; }
}



/* ════════════════════════════════════════════════════════════════
   MOBILE-FIRST MASTER OVERRIDES  (appended last — highest priority)
   All rules here win over earlier declarations.
   ════════════════════════════════════════════════════════════════ */

/* ── Global: no horizontal scroll on any screen ── */
html, body { overflow-x: hidden !important; }
img, video, canvas, iframe { max-width: 100%; height: auto; }

/* ════════════ NAV DRAWER ════════════ */

/* Desktop nav: normal horizontal bar */
@media (min-width: 769px) {
  .nav-backdrop  { display: none !important; }
  .menu-toggle   { display: none !important; }
  .nav-links     { display: flex !important; position: static !important;
                   transform: none !important; flex-direction: row !important;
                   background: transparent !important; width: auto !important;
                   padding: 0 !important; box-shadow: none !important; }
  .nav-links li  { width: auto !important; }
  .nav-links a   { padding: 7px 13px !important; color: var(--text-secondary) !important;
                   font-size: .875rem !important; display: block !important; }
  .logo-text     { display: block !important; }
  .nav-desktop-only { display: inline-flex !important; }
  .nav-mobile-only  { display: none !important; }
}

/* Mobile nav drawer */
@media (max-width: 768px) {
  /* Navbar shell */
  .navbar        { padding: 0 14px !important; height: 60px !important; }
  .navbar-inner  { position: relative !important; justify-content: space-between !important;
                   gap: 0 !important; }
  /* Logo centred absolutely — navbar only, not footer */
  .navbar .logo  { position: absolute !important; left: 50% !important;
                   transform: translateX(-50%) !important; gap: 8px !important; }
  .navbar .logo-text { display: none !important; }
  /* Desktop auth hidden */
  .nav-desktop-only { display: none !important; }
  .currency-switcher { display: none !important; }

  /* --- Drawer panel --- */
  .nav-links {
    /* positioning */
    position: fixed !important;
    top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 280px !important;
    z-index: 1200 !important;
    /* layout */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 2px !important;
    /* appearance */
    background: #060e06 !important;
    border-right: 1px solid rgba(164,206,65,.2) !important;
    box-shadow: 6px 0 40px rgba(0,0,0,.7) !important;
    padding: 20px 16px 40px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    /* slide animation */
    transform: translateX(-100%) !important;
    transition: transform .28s cubic-bezier(.4,0,.2,1) !important;
    list-style: none !important;
    margin: 0 !important;
  }
  .nav-links.open {
    transform: translateX(0) !important;
  }

  /* Brand header inside drawer */
  .nav-links::before {
    content: '';
    display: block;
    height: 60px;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(164,206,65,.12);
    margin: 0 -16px 12px;
  }

  /* Nav items */
  .nav-links li {
    width: 100% !important;
    list-style: none !important;
  }
  .nav-links > li > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 13px 14px !important;
    border-radius: 10px !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #e0e0e0 !important;          /* explicit white-ish — no var() risk */
    text-decoration: none !important;
    transition: background .18s, color .18s !important;
    box-sizing: border-box !important;
  }
  .nav-links > li > a:hover,
  .nav-links > li > a.active {
    background: rgba(164,206,65,.12) !important;
    color: #a4ce41 !important;
  }
  /* Divider before auth links */
  .nav-mobile-only:first-of-type {
    margin-top: 12px !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(164,206,65,.1) !important;
  }
  .nav-mobile-only { display: list-item !important; }
  /* Sign-up button inside drawer */
  .nav-links .btn.btn-primary {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    margin-top: 4px !important;
  }

  /* Hamburger */
  .menu-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 40px !important; height: 40px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border-radius: 8px !important;
    z-index: 1201 !important;          /* above drawer */
    position: relative !important;
  }
  .menu-toggle span {
    display: block !important;
    width: 22px !important; height: 2px !important;
    background: #ffffff !important;
    border-radius: 2px !important;
    transition: transform .28s ease, opacity .2s ease, width .2s ease !important;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0 !important; width: 0 !important;
  }
  .menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* Backdrop */
  .nav-backdrop {
    display: none;
    position: fixed !important; inset: 0 !important;
    background: rgba(0,0,0,.65) !important;
    z-index: 1199 !important;
    backdrop-filter: blur(3px) !important;
  }
  .nav-backdrop.open { display: block !important; }
}

/* ════════════ HERO (index.php) ════════════ */
@media (max-width: 768px) {
  .hero-section {
    padding: 90px 0 50px !important;
    min-height: auto !important;
  }
  .hero-main-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    text-align: center !important;
  }
  .hero-bento-grid { display: none !important; }
  .hero-section h1 {
    font-size: clamp(1.9rem, 7.5vw, 2.6rem) !important;
    line-height: 1.15 !important;
  }
  .hero-section p { font-size: .93rem !important; }
  .hero-cta-row {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .hero-cta-row .btn {
    width: 100% !important; max-width: 300px !important;
    justify-content: center !important;
  }
  .hero-trust-row {
    justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important;
  }
  .hero-trust-row > div[style*="width:1px"],
  .hero-trust-row .waveform { display: none !important; }

  /* Stats strip 4-col → 2×2 */
  .stat-26 { text-align: center; }
}

/* ════════════ SERVICES PAGE ════════════ */
@media (max-width: 768px) {
  /* Filter bar: horizontal scroll */
  .services-filter {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    gap: 8px !important;
  }
  .services-filter::-webkit-scrollbar { display: none !important; }
  .filter-btn { flex-shrink: 0 !important; white-space: nowrap !important; }

  /* Service cards */
  .services-grid { grid-template-columns: 1fr !important; }
  .svc-card-26, .service-card { width: 100% !important; }
}
@media (max-width: 480px) {
  .services-grid { gap: 14px !important; }
}

/* ════════════ CHECKOUT ════════════ */
@media (max-width: 768px) {
  .checkout-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .checkout-summary { order: -1 !important; }   /* summary above form */
}

/* ════════════ GENERAL GRIDS (inline style overrides) ════════════ */
@media (max-width: 768px) {
  /* Any 2/3/4-col inline grid inside container or panels → 1 col */
  .container > div[style*="grid-template-columns"],
  .glass-panel > div[style*="grid-template-columns"],
  .admin-main  > div[style*="grid-template-columns"],
  section > .container > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Repeating grids */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1fr 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:repeat(2,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Exception: keep 2-col for admin stat grid */
  .admin-stat-grid { grid-template-columns: repeat(2,1fr) !important; }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .admin-stat-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ════════════ TYPOGRAPHY ════════════ */
@media (max-width: 768px) {
  h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; }
  h2 { font-size: clamp(1.5rem, 6vw, 2rem) !important; }
  h3 { font-size: 1.15rem !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ════════════ BUTTONS & TOUCH TARGETS ════════════ */
@media (max-width: 768px) {
  .btn { min-height: 44px !important; }
  input, select, textarea {
    font-size: 16px !important;   /* prevents iOS zoom on focus */
  }
}

/* ════════════ FOOTER ════════════ */
@media (max-width: 768px) {
  .footer-grid  { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom { flex-direction: column !important; text-align: center !important; gap: 8px !important; }
}

/* ════════════ ADMIN PANEL ════════════ */
@media (max-width: 768px) {
  .admin-layout  { grid-template-columns: 1fr !important; }
  .admin-sidebar { display: none !important; position: fixed !important;
                   left: 0 !important; top: 0 !important; bottom: 0 !important;
                   z-index: 300 !important; width: 240px !important; }
  .admin-sidebar.open { display: flex !important; }
  .admin-main    { padding: 16px !important; }
  .glass-panel   { padding: 16px !important; }
  .page-header-bar { flex-wrap: wrap !important; gap: 10px !important; }
  /* Admin form grids */
  .admin-main [style*="grid-template-columns:1fr 1fr 1fr"],
  .admin-main [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Tables scroll */
  .glass-panel .overflow-x-auto,
  .glass-panel div[style*="overflow-x:auto"] { overflow-x: auto !important; }
  table { min-width: 500px; font-size: .78rem !important; }
}

/* ════════════ CLIENT AREA ════════════ */
@media (max-width: 768px) {
  .client-layout  { grid-template-columns: 1fr !important; }
  .client-sidebar { display: none !important; }
  .client-main    { padding: 16px 12px !important; }
  .client-main [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════ CTA & MISC SECTIONS ════════════ */
@media (max-width: 768px) {
  .cta-btns, [style*="display:flex"][style*="gap:14px"][style*="justify-content:center"] {
    flex-direction: column !important;
    align-items: center !important;
  }
  .cta-btns .btn { width: 100% !important; max-width: 300px !important; justify-content: center !important; }
  .glass-2[style*="padding:64px"] { padding: 36px 20px !important; }
  #hero-canvas { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   FINAL MOBILE PASS — Footer + All Pages
   ════════════════════════════════════════════════════════════════ */

/* ── FOOTER ── */
.footer { padding: 48px 0 0; }
@media(max-width:900px) {
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media(max-width:600px) {
  .footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }
  .footer-bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 10px !important;
    padding: 20px 0 !important;
  }
  .footer-bottom-links { justify-content: center !important; flex-wrap: wrap !important; gap: 14px !important; }
  .footer-about { max-width: 100% !important; }
  .footer { padding: 40px 0 0 !important; }
}

/* ── HOME PAGE — Stats strip, services, bento, CTA ── */
@media(max-width:768px) {
  /* Stats 4-col → 2-col */
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: repeat(2,1fr) !important; }
  /* Services 3-col → 1-col */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  /* 2-col grids → 1-col */
  [style*="grid-template-columns:1fr 1fr"]:not(.hero-bento-grid):not(.admin-stat-grid) {
    grid-template-columns: 1fr !important;
  }
  /* CTA section */
  [style*="padding:64px 48px"] { padding: 36px 20px !important; }
  [style*="display:flex"][style*="justify-content:center"][style*="flex-wrap:wrap"] {
    flex-direction: column !important; align-items: center !important;
  }
}
@media(max-width:480px) {
  [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  [style*="grid-template-columns:repeat(2,1fr)"] { grid-template-columns: 1fr 1fr !important; }
  /* Section padding */
  section[style*="padding:100px"] { padding: 56px 0 !important; }
  section[style*="padding:60px"] { padding: 36px 0 !important; }
}

/* ── ABOUT PAGE ── */
@media(max-width:768px) {
  /* Team/stats 3-col grid */
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:24px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media(max-width:480px) {
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:24px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── SERVICE PAGES (music-promotion etc) ── */
@media(max-width:768px) {
  [style*="grid-template-columns:repeat(auto-fill,minmax(300px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
  }
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media(max-width:480px) {
  [style*="grid-template-columns:repeat(auto-fill,minmax(200px"],
  [style*="grid-template-columns:repeat(auto-fit,minmax(200px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── MUSIC PLAN CHECKOUT ── */
@media(max-width:860px) {
  .mpc-grid { grid-template-columns: 1fr !important; }
}
@media(max-width:600px) {
  [style*="grid-template-columns:1fr 360px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 320px"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:1fr 280px"] { grid-template-columns: 1fr !important; }
}

/* ── CLIENT LAYOUT ── */
@media(max-width:900px) {
  [style*="grid-template-columns:240px 1fr"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns:260px 1fr"] { grid-template-columns: 1fr !important; }
}

/* ── BENTO GRID (why-us section on homepage) ── */
@media(max-width:768px) {
  .bento-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
  .bento-span-4,.bento-span-5,.bento-span-6,.bento-span-7,.bento-span-8,.bento-span-12 {
    grid-column: span 1 !important;
  }
  .bento-card { padding: 20px !important; }
}

/* ── SERVICES PAGE filter + cards ── */
@media(max-width:600px) {
  .services-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .service-card { padding: 18px 14px !important; }
  .svc-card-26 { padding: 18px 14px !important; }
}

/* ── CHECKOUT ── */
@media(max-width:900px) {
  .checkout-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .checkout-summary { order: -1 !important; }
}

/* ── GLASS PANELS on mobile ── */
@media(max-width:600px) {
  .glass-panel { padding: 16px !important; border-radius: 14px !important; }
}

/* ── SECTION padding mobile ── */
@media(max-width:600px) {
  .page-hero { padding: 90px 0 40px !important; }
  .cta-section { padding: 48px 0 !important; }
}

/* ── ADMIN TABLES — prevent overflow ── */
@media(max-width:900px) {
  .glass-panel div[style*="overflow-x:auto"] table,
  .admin-main div[style*="overflow-x:auto"] table {
    min-width: 480px;
  }
}
@media(max-width:600px) {
  .admin-stat-num { font-size: 1.6rem !important; }
  .page-header-bar h1,.page-title-bar { font-size: 1rem !important; }
}

/* ── TOUCH TARGETS — all buttons/inputs ── */
@media(max-width:768px) {
  .btn { min-height: 44px !important; }
  input, select, textarea { font-size: 16px !important; min-height: 44px !important; }
  textarea { min-height: 100px !important; }
}

/* ── GLOBAL overflow guard ── */
html, body { overflow-x: hidden !important; max-width: 100vw !important; }
*, *::before, *::after { box-sizing: border-box !important; }

/* ════════════════════════════════════════════════════════════════
   FOOTER — Complete Mobile Fix
   ════════════════════════════════════════════════════════════════ */

/* Auth panel logo — never gets navbar positioning */
.auth-logo, .footer .logo-in-panel {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
}

/* Footer logo always shows icon + brand text */
.footer .logo {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 11px !important;
}
.footer .logo-text {
  display: block !important;
  font-family: var(--font-heading), sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #fff !important;
}
.footer .logo-text span { color: var(--primary) !important; }

/* Tablet: 2-col footer */
@media (max-width: 1000px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 36px 28px !important;
  }
  .footer-brand { grid-column: span 2 !important; }
  .footer-about { max-width: 100% !important; }
}

/* Mobile: full single-column */
@media (max-width: 600px) {
  .footer { padding: 40px 0 0 !important; }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    margin-bottom: 32px !important;
  }
  .footer-brand {
    grid-column: span 1 !important;
    text-align: left !important;
  }
  .footer-about {
    max-width: 100% !important;
    font-size: .9rem !important;
  }
  .footer-social { flex-wrap: wrap !important; }

  /* Column headings */
  .footer-col h5 {
    font-size: .8rem !important;
    margin-bottom: 12px !important;
  }

  /* Bottom bar */
  .footer-bottom {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 8px !important;
    padding: 16px 0 !important;
  }
  .footer-bottom p { font-size: .75rem !important; }
  .footer-bottom-links {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   COMPLETE SITE MOBILE — Auth, Admin, Client, All Pages
   ════════════════════════════════════════════════════════════════ */

/* ── Auth pages: login, signup, forgot-password, reset, verify ── */
@media (max-width: 768px) {
  /* Reduce huge top padding on auth sections */
  section[style*="padding:120px 0"],
  section[style*="padding:120px 20px"],
  section[style*="padding:100px 20px"] {
    padding-top: 80px !important;
    padding-bottom: 32px !important;
  }
  /* Auth card full width on mobile */
  section[style*="min-height:100vh"] > .container > div[style*="max-width:482px"],
  section[style*="min-height:100vh"] > .container > div[style*="max-width:520px"],
  section[style*="min-height:100vh"] > .container > div[style*="max-width:560px"] {
    max-width: 100% !important;
    padding: 0 4px !important;
  }
  /* Auth glass panel padding */
  section[style*="min-height:100vh"] .glass-panel {
    padding: 24px 18px !important;
    border-radius: 16px !important;
  }
  /* Auth logo icon in panels */
  section[style*="min-height:100vh"] .logo-icon {
    width: 52px !important; height: 52px !important;
    font-size: 1.1rem !important;
  }
  /* Auth h1 */
  section[style*="min-height:100vh"] h1 {
    font-size: 1.25rem !important;
  }
  /* Flash messages wrap */
  .flash-msg { font-size: .85rem !important; line-height: 1.5 !important; word-break: break-word !important; }
  .flash-msg a { word-break: break-all !important; }
}

/* ── Checkout & Payment sections ── */
@media (max-width: 768px) {
  section[style*="padding:120px 0 80px"] {
    padding: 80px 0 40px !important;
  }
  .checkout-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .checkout-summary { order: -1 !important; }
}

/* ── Admin Panel ── */
@media (max-width: 900px) {
  /* Stat grid 3-col inline override → 2-col */
  .admin-stat-grid[style*="grid-template-columns:repeat(3,1fr)"],
  .admin-stat-grid[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 768px) {
  /* Admin layout */
  .admin-layout { grid-template-columns: 1fr !important; }
  .admin-sidebar {
    display: none !important;
    position: fixed !important; left: 0 !important; top: 0 !important;
    bottom: 0 !important; width: 260px !important;
    z-index: 500 !important; overflow-y: auto !important;
  }
  .admin-sidebar.open { display: flex !important; }
  .admin-topbar { display: flex !important; }
  .admin-main { padding: 14px !important; }

  /* Admin stat grids */
  .admin-stat-grid { grid-template-columns: repeat(2,1fr) !important; gap: 12px !important; }
  .admin-stat-card { padding: 14px 12px !important; }
  .admin-stat-num  { font-size: 1.5rem !important; }
  .admin-stat-icon { font-size: 1.3rem !important; }

  /* Admin tables: horizontal scroll */
  .glass-panel { overflow-x: visible !important; }
  .glass-panel > div[style*="overflow-x:auto"],
  .admin-main  > .glass-panel > div { overflow-x: auto !important; }
  .admin-main table { min-width: 540px !important; font-size: .78rem !important; }

  /* Admin form grids */
  .admin-main [style*="grid-template-columns:1fr 1fr 1fr"],
  .admin-main [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Admin page header */
  .page-header-bar {
    flex-direction: column !important; align-items: flex-start !important;
    gap: 10px !important;
  }
  .page-header-bar > div[style*="display:flex"] {
    flex-wrap: wrap !important; gap: 6px !important;
  }
  .page-title-bar, .page-header-bar h1 { font-size: 1.05rem !important; }

  /* Admin service detail 2-col → 1-col */
  .admin-main > .admin-layout ~ *,
  .admin-main [style*="grid-template-columns:1fr 320px"],
  .admin-main [style*="grid-template-columns:1fr 300px"],
  .admin-main [style*="grid-template-columns:1fr 280px"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 480px) {
  .admin-stat-grid { grid-template-columns: 1fr 1fr !important; }
  .admin-main table { min-width: 460px !important; }
  .admin-stat-num { font-size: 1.3rem !important; }
}

/* ── Client Panel ── */
@media (max-width: 900px) {
  .client-layout { grid-template-columns: 1fr !important; }
  .client-sidebar { display: none !important; }
}
@media (max-width: 768px) {
  .client-main { padding: 14px 12px !important; }
  /* Client stat/summary grids */
  .client-main [style*="grid-template-columns:repeat(auto-fit,minmax(160px"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .client-main [style*="grid-template-columns:repeat(auto-fill,minmax(280px"] {
    grid-template-columns: 1fr !important;
  }
  /* Client order detail 2-col → 1-col */
  .client-main [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Tables in client area */
  .client-main table { min-width: 480px !important; font-size: .8rem !important; }
  .client-main [style*="overflow-x:auto"] { overflow-x: auto !important; }
}

/* ── All form inputs: prevent iOS zoom ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="number"], input[type="search"],
select, textarea {
  font-size: max(16px, 1rem) !important;
}

/* ── All buttons: minimum touch target ── */
.btn, button[type="submit"] { min-height: 44px !important; }

/* ── Page sections: reduce padding on mobile ── */
@media (max-width: 768px) {
  .page-hero { padding: 90px 0 36px !important; }
  section { padding-left: 0 !important; padding-right: 0 !important; }
  .container { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ── Floating logo icon on login/signup (BD text icon) ── */
@media (max-width: 768px) {
  /* The BD text logo-icon inside auth panels — keep in flow */
  section[style*="min-height:100vh"] a.logo {
    position: static !important;
    transform: none !important;
    display: inline-flex !important;
  }
}

/* ── About page ── */
@media (max-width: 768px) {
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:24px"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  [style*="grid-template-columns:repeat(3,1fr)"][style*="gap:24px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Contact page ── */
@media (max-width: 768px) {
  .contact-grid { grid-template-columns: 1fr !important; }
  .about-grid { grid-template-columns: 1fr !important; }
}

/* ── Service individual pages ── */
@media (max-width: 768px) {
  .service-hero { padding: 80px 0 40px !important; }
  .service-hero-grid { grid-template-columns: 1fr !important; }
  .pricing-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .grid-3 { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 480px) {
  .grid-3 { grid-template-columns: 1fr !important; }
}

/* ── Invoice (client) ── */
@media (max-width: 640px) {
  .invoice-paper { padding: 20px 14px !important; }
  .invoice-paper [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Ticket view ── */
@media (max-width: 768px) {
  [style*="grid-template-columns:1fr 280px"],
  [style*="grid-template-columns:1fr 260px"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Summary rows ── */
@media (max-width: 480px) {
  .summary-line, .summary-row { font-size: .82rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   CLIENT PORTAL — Stat Cards & Promo (shared desktop+mobile)
   ════════════════════════════════════════════════════════════════ */

/* Stat cards grid */
.client-stat-grid {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.client-stat-card {
  background: var(--bg-card);
  border: 1px solid rgba(164,206,65,.1);
  border-radius: var(--border-radius);
  padding: 20px 14px;
  text-align: center;
  transition: var(--transition);
}
.client-stat-card:hover { border-color: rgba(164,206,65,.3); transform: translateY(-2px); }
.csc-icon { font-size: 1.6rem; margin-bottom: 8px; }
.csc-num  { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; line-height: 1; }
.csc-label{ font-size: .72rem; color: var(--text-muted); text-transform: uppercase;
            letter-spacing: .06em; margin-top: 6px; }

/* Promo banner */
.client-promo-banner {
  background: linear-gradient(135deg,rgba(164,206,65,.12),rgba(63,113,22,.08));
  border: 1px solid rgba(164,206,65,.2);
  border-radius: var(--border-radius);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════
   CLIENT PORTAL — Complete Mobile Responsive
   ════════════════════════════════════════════════════════════════ */

/* Bottom nav — hidden on desktop */
.client-bottom-nav { display: none; }
.client-mobile-topbar { display: none; }

/* ── Desktop: normal sidebar layout ── */
@media (min-width: 769px) {
  .client-layout   { grid-template-columns: 240px 1fr; padding-top: 66px; }
  .client-sidebar  { display: flex !important; flex-direction: column;
                     position: sticky; top: 66px; height: calc(100vh - 66px); }
  .client-bottom-nav { display: none !important; }
  .client-stat-grid  { grid-template-columns: repeat(4,1fr); }
}

/* ── Mobile: single column, bottom nav only ── */
@media (max-width: 768px) {
  /* Layout */
  .client-layout {
    grid-template-columns: 1fr !important;
    padding-top: 60px !important;
    padding-bottom: 72px !important;
    min-height: 100vh;
  }

  /* Sidebar hidden — desktop only */
  .client-sidebar { display: none !important; }

  /* Main content */
  .client-main { padding: 16px 14px !important; }

  /* Stat cards: 2×2 */
  .client-stat-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 20px !important;
  }
  .client-stat-card { padding: 16px 10px !important; }
  .csc-icon { font-size: 1.3rem !important; }
  .csc-num  { font-size: 1.25rem !important; }
  .csc-label{ font-size: .65rem !important; }

  /* Promo banner */
  .client-promo-banner {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 16px !important;
    gap: 12px !important;
  }
  .client-promo-banner .btn { width: 100% !important; justify-content: center !important; }

  /* Glass panels */
  .client-main .glass-panel { padding: 14px !important; border-radius: 12px !important; }

  /* Tables: horizontal scroll */
  .client-main [style*="overflow-x:auto"] {
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  }
  .client-main table { min-width: 480px !important; font-size: .78rem !important; }
  .client-main table th, .client-main table td { padding: 7px 9px !important; white-space: nowrap; }

  /* Page header */
  .client-main .page-header-bar { flex-wrap: wrap !important; gap: 10px !important; }
  .client-main .page-header-bar h1 { font-size: 1.15rem !important; }

  /* ─── BOTTOM NAV ─── */
  .client-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 62px;
    background: var(--bg-1);
    border-top: 1px solid rgba(164,206,65,.15);
    z-index: 600;
    /* Horizontal scroll when items overflow */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    align-items: stretch;
    gap: 0;
  }
  .client-bottom-nav::-webkit-scrollbar { display: none; }

  .cbn-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    min-width: 64px !important;
    flex-shrink: 0 !important;
    padding: 6px 8px !important;
    text-decoration: none !important;
    color: rgba(177,175,175,.55) !important;
    position: relative !important;
    transition: color .18s !important;
    border-top: 2px solid transparent !important;
  }
  .cbn-item.active {
    color: var(--primary) !important;
    border-top-color: var(--primary) !important;
    background: rgba(164,206,65,.05) !important;
  }
  .cbn-item:hover { color: var(--primary) !important; }
  .cbn-item.cbn-logout { color: rgba(255,68,68,.6) !important; }
  .cbn-item.cbn-logout:hover { color: #ff4444 !important; }

  .cbn-icon-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .cbn-icon-wrap i { font-size: 1.05rem !important; }
  .cbn-badge {
    position: absolute !important;
    top: -5px !important; right: -8px !important;
    background: var(--primary) !important;
    color: #000 !important;
    font-size: .55rem !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 20px !important;
    line-height: 1.4 !important;
  }
  .cbn-label {
    font-size: .6rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    white-space: nowrap !important;
  }
}

/* ── Very small screens ── */
@media (max-width: 360px) {
  .client-stat-grid { gap: 8px !important; }
  .cbn-item { min-width: 54px !important; padding: 6px 4px !important; }
  .cbn-label { font-size: .55rem !important; }
}

/* ════════════════════════════════════════════════════════════════
   CLIENT DASHBOARD — Mobile final fixes
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Ensure layout truly collapses */
  .client-layout {
    display: block !important;      /* fallback from grid */
    padding-top: 60px !important;
    padding-bottom: 72px !important;
  }

  /* Page header: stack vertically */
  .client-main .page-header-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    padding: 0 !important;
  }
  .client-main .page-header-bar h1 {
    font-size: 1.1rem !important;
    margin: 0 !important;
  }

  /* Recent orders panel header */
  .client-main .glass-panel > div[style*="display:flex"][style*="justify-content:space-between"] {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  /* Table wrapper */
  .client-main .glass-panel [style*="overflow-x:auto"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin: 0 -14px !important;
    padding: 0 14px !important;
  }
  .client-main .glass-panel table {
    min-width: 520px !important;
    width: 100% !important;
    font-size: .78rem !important;
  }
  .client-main .glass-panel td,
  .client-main .glass-panel th {
    padding: 8px 8px !important;
    white-space: nowrap !important;
  }

  /* Empty state */
  .client-main [style*="padding:52px"] {
    padding: 32px 16px !important;
  }

  /* Back-to-top button: above bottom nav */
  #scroll-top { bottom: 80px !important; right: 16px !important; }
}

/* ── Light mode ── */
[data-theme="light"] .client-bottom-nav {
  background: #fff !important;
  border-top-color: rgba(46,125,16,.12) !important;
}
[data-theme="light"] .cbn-item { color: rgba(61,92,30,.45) !important; }
[data-theme="light"] .cbn-item.active { color: var(--primary) !important; }
[data-theme="light"] .client-stat-card {
  background: #fff !important;
  border-color: rgba(46,125,16,.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
}

/* ════════════════════════════════════════════════════════════════
   ORDER LIST — Desktop table / Mobile cards toggle
   ════════════════════════════════════════════════════════════════ */

/* Desktop: show table, hide cards */
.order-table-desktop { display: block; }
.order-cards-mobile  { display: none;  }

/* Mobile: hide table, show cards */
@media (max-width: 768px) {
  .order-table-desktop { display: none  !important; }
  .order-cards-mobile  { display: block !important; }
}

/* ════════════════════════════════════════════════════════════════
   MOB-TABLE — Table → Card layout on mobile (legacy fallback)
   ════════════════════════════════════════════════════════════════ */

/* Desktop: normal table with horizontal scroll if needed */
.mob-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mob-table { width: 100%; border-collapse: collapse; }

/* Mobile: convert each row into a card */
@media (max-width: 768px) {
  .mob-table-wrap { overflow-x: visible !important; }

  .mob-table thead { display: none !important; }

  .mob-table tbody tr {
    display: block !important;
    background: rgba(255,255,255,.03) !important;
    border: 1px solid rgba(164,206,65,.12) !important;
    border-radius: 12px !important;
    padding: 4px 0 !important;
    margin-bottom: 12px !important;
  }
  .mob-table tbody tr:last-child { margin-bottom: 0; }

  .mob-table tbody td {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,.04) !important;
    font-size: .85rem !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .mob-table tbody td:last-child {
    border-bottom: none !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  /* Label on left from data-label attribute */
  .mob-table tbody td[data-label]:not([data-label=""])::before {
    content: attr(data-label) !important;
    font-size: .7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: var(--text-muted) !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
  }

  /* Value on right */
  .mob-table tbody td > * {
    text-align: right !important;
  }
  .mob-table tbody td > span[style*="font-mono"] {
    word-break: break-all !important;
    text-align: right !important;
    font-size: .78rem !important;
  }

  /* Action button full width */
  .mob-table tbody td[data-label=""] {
    padding: 10px 14px !important;
  }
  .mob-table tbody td[data-label=""] .btn {
    width: 100% !important;
    justify-content: center !important;
    display: flex !important;
  }
}

/* Light mode mob-table cards */
@media (max-width: 768px) {
  [data-theme="light"] .mob-table tbody tr {
    background: #fff !important;
    border-color: rgba(46,125,16,.1) !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.05) !important;
  }
  [data-theme="light"] .mob-table tbody td {
    border-bottom-color: rgba(46,125,16,.06) !important;
  }
}