/* ==========================================================================
   باران پیام | Baran Payam — Design System
   Pure CSS3 · RTL · No frameworks
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --orange:#ff7a18;
  --orange-light:#ff9a3d;
  --orange-dark:#e5620a;
  --turquoise:#10c9a5;
  --turquoise-light:#7cf5d9;
  --turquoise-dark:#00bfa5;

  /* Neutrals */
  --dark:#071312;
  --dark-2:#081c1b;
  --dark-3:#061011;
  --light:#f7faf9;
  --white:#ffffff;
  --light-2:#eef7f4;

  /* Semantic (theme-aware, default = light) */
  --bg:#f7faf9;
  --bg-elev:#ffffff;
  --bg-soft:#eef7f4;
  --text:#0a1614;
  --muted:#516260;
  --border:rgba(7,19,18,.09);
  --glass:rgba(255,255,255,.65);
  --glass-brd:rgba(255,255,255,.55);

  --shadow-sm:0 2px 8px rgba(7,19,18,.06);
  --shadow:0 14px 40px -12px rgba(7,19,18,.18);
  --shadow-lg:0 30px 70px -20px rgba(7,19,18,.28);
  --glow-orange:0 12px 40px -8px rgba(255,122,24,.55);
  --glow-turq:0 12px 40px -8px rgba(16,201,165,.5);

  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:22px;
  --radius-xl:28px;
  --radius-btn:16px;

  --grad-brand:linear-gradient(135deg,#ff7a18,#10c9a5);
  --grad-brand-soft:linear-gradient(135deg,#ff9a3d,#00bfa5);
  --grad-dark:linear-gradient(135deg,#06100f,#092421,#101713);

  /* Type scale (modular ~1.22 · clamp based) */
  --fs-900:clamp(2rem,5vw,3.5rem);
  --fs-800:clamp(1.65rem,3.8vw,2.65rem);
  --fs-700:clamp(1.3rem,2.6vw,1.8rem);
  --fs-600:clamp(1.12rem,2.1vw,1.35rem);
  --fs-500:1.06rem;
  --fs-400:clamp(.95rem,1.6vw,1.02rem);
  --fs-300:.88rem;
  --fs-200:.78rem;

  /* Spacing scale */
  --s-1:6px;--s-2:10px;--s-3:16px;--s-4:22px;--s-5:30px;--s-6:44px;--s-7:64px;--s-8:96px;

  /* Hairline for premium inner edges */
  --hairline:inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 .5px rgba(7,19,18,.04);
  --inner-hi:inset 0 1px 0 rgba(255,255,255,.35);

  --container:1200px;
  --header-h:74px;
  --font:"Vazirmatn",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg:#071312;
  --bg-elev:#0b1a19;
  --bg-soft:#081c1b;
  --text:#eafaf6;
  --muted:#8fb0aa;
  --border:rgba(255,255,255,.09);
  --glass:rgba(11,26,25,.6);
  --glass-brd:rgba(255,255,255,.08);
  --shadow-sm:0 2px 10px rgba(0,0,0,.4);
  --shadow:0 18px 50px -12px rgba(0,0,0,.6);
  --shadow-lg:0 40px 90px -24px rgba(0,0,0,.75);
  --light-2:#0e2321;
  --hairline:inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 .5px rgba(255,255,255,.05);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{direction:rtl;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);overflow-x:clip;height:100%}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.85;
  font-size:var(--fs-400);
  font-weight:400;
  overflow-x:clip;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}
img,svg,video{max-width:100%;display:block}
/* base inline icon (line icons) — sized + stroke inheritance */
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:middle;overflow:visible}
svg svg{vertical-align:baseline}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;font-size:inherit}
ul{list-style:none}
h1,h2,h3,h4{line-height:1.35;font-weight:800;letter-spacing:-.4px;overflow-wrap:anywhere}
h1{font-size:var(--fs-900);font-weight:900}
h2{font-size:var(--fs-800)}
h3{font-size:var(--fs-600);font-weight:700}
p{overflow-wrap:anywhere}
::selection{background:var(--orange);color:#fff}

/* Persian numerals nicety + tabular for counters */
.num{font-variant-numeric:tabular-nums;font-weight:800}

/* Scrollbar */
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-soft)}
::-webkit-scrollbar-thumb{background:var(--grad-brand);border-radius:20px;border:3px solid var(--bg-soft)}

/* ---------- Layout helpers ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:22px}
.container-wide{width:100%;max-width:1360px;margin-inline:auto;padding-inline:22px}
.section{padding-block:clamp(58px,9vw,110px);position:relative}
.section-tight{padding-block:clamp(40px,6vw,70px)}
.center{text-align:center}
.hidden{display:none!important}
[hidden]{display:none!important}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.82rem;font-weight:700;letter-spacing:.3px;
  padding:7px 15px;border-radius:999px;
  background:linear-gradient(135deg,rgba(255,122,24,.12),rgba(16,201,165,.12));
  border:1px solid var(--border);color:var(--orange);
}
[data-theme="dark"] .eyebrow{color:var(--orange-light)}
.eyebrow svg{width:16px;height:16px}

.section-head{max-width:800px;margin-inline:auto;margin-bottom:clamp(30px,5vw,52px);text-align:center}
.section-head p{color:var(--muted);margin-top:14px;font-size:1.02rem}
.grad-text{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* ---------- Buttons ---------- */
.btn{
  --btn-h:48px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--btn-h);min-width:44px;padding:0 22px;border-radius:14px;
  font-weight:700;font-size:.95rem;line-height:1;letter-spacing:-.1px;white-space:nowrap;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease),border-color .25s var(--ease),color .25s,opacity .2s;
  position:relative;overflow:hidden;isolation:isolate;
}
.btn svg{width:18px;height:18px}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#ff8a2a,#ff7a18 35%,#12bfa0);color:#fff;box-shadow:0 8px 24px -8px rgba(255,122,24,.5),var(--inner-hi)}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);transform:translateX(-130%);z-index:-1;transition:transform .7s var(--ease)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 18px 42px -10px rgba(255,122,24,.6),0 6px 22px -8px rgba(16,201,165,.45),var(--inner-hi)}
.btn-primary:hover::after{transform:translateX(130%)}
.btn-ghost{background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.06));border:1px solid var(--glass-brd);color:var(--text);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--hairline)}
.btn-ghost:hover{transform:translateY(-3px);border-color:var(--turquoise);box-shadow:var(--glow-turq)}
.btn-outline{background:var(--bg-elev);border:1.5px solid var(--border);color:var(--text);box-shadow:var(--hairline)}
.btn-outline:hover{border-color:var(--turquoise);color:var(--turquoise-dark);transform:translateY(-3px);box-shadow:0 10px 26px -12px rgba(16,201,165,.5)}
[data-theme="dark"] .btn-outline:hover{color:var(--turquoise-light)}
.btn-lg{--btn-h:56px;padding:0 30px;font-size:1.02rem;border-radius:17px}
.btn-sm{--btn-h:40px;padding:0 15px;font-size:.84rem;border-radius:11px}
.btn-block{width:100%}
.btn-icon{width:46px;height:46px;min-height:46px;padding:0;border-radius:13px}
.btn-white{background:#fff;color:#071312;box-shadow:0 10px 26px -12px rgba(0,0,0,.4)}
.btn-white:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(0,0,0,.45)}
.btn.is-copied{background:var(--turquoise);color:#fff}

/* ---------- Cards / glass ---------- */
.glass{
  background:var(--glass);
  border:1px solid var(--glass-brd);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
.card{
  background:var(--bg-elev);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm),var(--hairline);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  position:relative;overflow:hidden;contain:layout paint;
}
.card-hover:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(16,201,165,.4)}

.grad-border{position:relative;background:var(--bg-elev);border-radius:var(--radius-lg)}
.grad-border::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;
  background:var(--grad-brand);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.55;
  transition:opacity .35s var(--ease);
}
.grad-border:hover::before{opacity:1}

/* ---------- Pills / badges / chips ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700}
.badge-orange{background:rgba(255,122,24,.14);color:var(--orange-dark)}
.badge-turq{background:rgba(16,201,165,.14);color:var(--turquoise-dark)}
[data-theme="dark"] .badge-orange{color:var(--orange-light)}
[data-theme="dark"] .badge-turq{color:var(--turquoise-light)}
.badge-solid{background:var(--grad-brand);color:#fff}
.chip{padding:9px 16px;border-radius:12px;font-size:.9rem;font-weight:600;background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);transition:.25s var(--ease);cursor:pointer;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--turquoise)}
.chip.active{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--glow-turq)}

/* icon box */
.icon-box{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;flex:none;
  background:linear-gradient(145deg,rgba(255,122,24,.16),rgba(16,201,165,.16));
  color:var(--orange);border:1px solid var(--border);box-shadow:var(--hairline);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.icon-box svg{width:26px;height:26px}
.icon-box.turq{color:var(--turquoise-dark)}
[data-theme="dark"] .icon-box{color:var(--orange-light)}
[data-theme="dark"] .icon-box.turq{color:var(--turquoise-light)}

/* Grid min-width safety to prevent blowout */
.grid>*,.split>*,.hero-grid>*,.otp-grid>*,.discount-grid>*,.contact-grid>*,.footer-top>*{min-width:0}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header{position:sticky;top:0;z-index:9990;transition:box-shadow .3s var(--ease),background .3s var(--ease),padding .3s var(--ease)}
.header-inner{position:relative}
.header-glass{
  margin-top:12px;border-radius:var(--radius-xl);
  height:var(--header-h);display:flex;align-items:center;
  padding-inline:16px 10px;gap:14px;
  background:var(--glass);border:1px solid var(--glass-brd);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);
  box-shadow:var(--shadow-sm);position:relative;overflow:visible;
}
.header-glass::after{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--grad-brand);opacity:.6}
.site-header.scrolled .header-glass{box-shadow:var(--shadow);background:var(--glass);height:64px}
.site-header.scrolled .header-glass{margin-top:8px}

.brand{display:flex;align-items:center;gap:10px;flex:none;font-weight:800;font-size:1.16rem}
.brand img{height:42px;width:auto;object-fit:contain}
.brand .brand-txt{display:flex;flex-direction:column;line-height:1.1}
.brand .brand-txt small{font-size:.66rem;color:var(--muted);font-weight:500}

/* Desktop nav */
.main-nav{margin-inline-start:auto}
.main-nav ul{display:flex;align-items:center;gap:2px}
.main-nav a{
  position:relative;display:inline-block;padding:9px 14px;border-radius:11px;
  font-weight:600;font-size:.96rem;color:var(--muted);transition:color .25s,background .25s;
}
.main-nav a::after{content:"";position:absolute;bottom:3px;inset-inline:14px;height:2px;border-radius:2px;background:var(--grad-brand);transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease)}
.main-nav a:hover{color:var(--text)}
.main-nav a:hover::after,.main-nav a.active::after{transform:scaleX(1)}
.main-nav a.active{color:var(--text);font-weight:700}
.main-nav a.external::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--turquoise);margin-inline-end:6px;vertical-align:middle}

.header-actions{display:flex;align-items:center;gap:9px;flex:none}

/* Theme switcher */
.theme-switch{display:flex;align-items:center;gap:3px;padding:4px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--border)}
.theme-switch button{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--muted);font-size:1rem;transition:.25s var(--ease)}
.theme-switch button svg{width:18px;height:18px}
.theme-switch button:hover{color:var(--text)}
.theme-switch button.active{background:var(--grad-brand);color:#fff;box-shadow:var(--glow-turq)}

/* Hamburger */
.hamburger{display:none;width:46px;height:46px;border-radius:13px;background:var(--bg-soft);border:1px solid var(--border);place-items:center;flex:none}
.hamburger span{display:block;width:22px;height:2px;border-radius:2px;background:var(--text);margin:2.4px auto;transition:.3s var(--ease)}
.hamburger.open span:nth-child(1){transform:translateY(4.4px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-4.4px) rotate(-45deg)}

/* Mobile top bar */
@supports (position:sticky){}.mobile-header{display:none}

/* theme cycle icon visibility */
button[data-theme-cycle] svg{display:none}
button[data-theme-cycle] svg.t-light{display:inline-block}
button[data-theme-cycle].m-light .t-light{display:inline-block}
button[data-theme-cycle].m-light .t-dark,button[data-theme-cycle].m-light .t-auto{display:none}
button[data-theme-cycle].m-dark .t-dark{display:inline-block}
button[data-theme-cycle].m-dark .t-light,button[data-theme-cycle].m-dark .t-auto{display:none}
button[data-theme-cycle].m-auto .t-auto{display:inline-block}
button[data-theme-cycle].m-auto .t-light,button[data-theme-cycle].m-auto .t-dark{display:none}
.brand .brand-txt{white-space:nowrap}

/* ==========================================================================
   MOBILE DRAWER
   ========================================================================== */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s;z-index:1000}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:1001;
  background:var(--bg-elev);border-inline-start:1px solid var(--border);
  box-shadow:var(--shadow-lg);transform:translateX(100%);visibility:hidden;
  transition:transform .4s var(--ease),visibility .4s;
  display:flex;flex-direction:column;padding:18px 18px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;
}
[data-theme="dark"] .drawer{background:var(--dark-2)}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.drawer-top img{height:38px}
.drawer-close{width:42px;height:42px;border-radius:12px;background:var(--bg-soft);border:1px solid var(--border);display:grid;place-items:center}
.drawer-close svg{width:20px;height:20px}
.drawer-nav{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;font-weight:600;color:var(--text);transition:.2s var(--ease)}
.drawer-nav a svg{width:20px;height:20px;color:var(--turquoise)}
.drawer-nav a:hover,.drawer-nav a.active{background:linear-gradient(135deg,rgba(255,122,24,.1),rgba(16,201,165,.1));color:var(--orange)}
[data-theme="dark"] .drawer-nav a:hover,[data-theme="dark"] .drawer-nav a.active{color:var(--orange-light)}
.drawer-nav a small{margin-inline-start:auto;color:var(--muted);font-size:.78rem}
.drawer-cta{display:grid;gap:10px;margin-top:auto;padding-top:18px}
.drawer-social{display:flex;gap:9px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.drawer-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);transition:.25s}
.drawer-social a:hover{color:#fff;background:var(--grad-brand);transform:translateY(-3px)}
.drawer-social svg{width:20px;height:20px}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative;overflow:hidden;padding-block:clamp(40px,7vw,90px) clamp(60px,9vw,110px);isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;animation:float 14s ease-in-out infinite}
.hero-bg .orb.o1{width:420px;height:420px;background:radial-gradient(circle,rgba(255,122,24,.5),transparent 70%);top:-80px;left:-60px}
.hero-bg .orb.o2{width:460px;height:460px;background:radial-gradient(circle,rgba(16,201,165,.45),transparent 70%);bottom:-120px;right:-80px;animation-delay:-6s}
.hero-bg .grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:44px 44px;-webkit-mask:radial-gradient(circle at 70% 30%,#000,transparent 75%);mask:radial-gradient(circle at 70% 30%,#000,transparent 75%);opacity:.6}
#particle-canvas{position:absolute;inset:0;z-index:-1;pointer-events:none}

.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;justify-items:center;}
.hero-copy{max-width:600px}
.hero h1{margin-top:18px}
.hero .lead{color:var(--muted);font-size:clamp(1rem,2.1vw,1.16rem);margin-top:18px;max-width:540px}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero-trust{display:flex;flex-wrap:wrap;gap:22px;margin-top:32px}
.hero-trust .titem{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.9rem;font-weight:500}
.hero-trust .titem svg{width:20px;height:20px;color:var(--turquoise);flex:none}

/* Hero visual — 3D */
.hero-visual{position:relative;perspective:1400px;display:grid;place-items:center;min-height:440px}
.hero-visual img.hero-3d{width:100%;max-width:520px;filter:drop-shadow(0 40px 60px rgba(0,0,0,.35));position:relative;z-index:3;animation:float 7s ease-in-out infinite}
/* CSS fallback phone */
.phone-stage{position:relative;width:280px;height:520px;transform-style:preserve-3d;animation:float 7s ease-in-out infinite}
.phone{position:absolute;inset:0;border-radius:44px;background:linear-gradient(160deg,#12312d,#081514);border:2px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg),inset 0 0 0 8px rgba(0,0,0,.4);overflow:hidden;transform:rotateY(-14deg) rotateX(6deg)}
.phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:90px;height:22px;border-radius:12px;background:#04100e;z-index:5}
.phone-screen{position:absolute;inset:12px;border-radius:34px;background:var(--grad-dark);overflow:hidden;padding:44px 14px 14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:82%;padding:11px 14px;border-radius:16px;font-size:.8rem;line-height:1.6;box-shadow:var(--shadow-sm);animation:msgin .5s var(--ease) both}
.msg.in{background:rgba(255,255,255,.09);color:#e7f7f3;border-end-end-radius:5px;align-self:flex-start}
.msg.out{background:var(--grad-brand);color:#fff;border-end-start-radius:5px;align-self:flex-end}
.msg.otp{background:rgba(16,201,165,.16);border:1px dashed var(--turquoise);color:#d6fff5}
.otp-code{font-size:1.5rem;letter-spacing:6px;font-weight:900;color:var(--turquoise-light);text-align:center;margin-top:4px;direction:ltr}
.hero-float{position:absolute;z-index:4;border-radius:16px;padding:11px 14px;display:flex;align-items:center;gap:10px;font-size:.82rem;font-weight:600;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.hero-float svg{width:20px;height:20px;flex:none}
.hf-1{top:8%;right:-6%;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);animation-delay:-1s}
.hf-1 svg{color:var(--orange)}
.hf-2{bottom:16%;left:-10%;background:var(--grad-brand);color:#fff;animation-delay:-3s}
.hf-3{bottom:40%;right:-12%;background:var(--bg-elev);border:1px solid var(--border);color:var(--text);animation-delay:-5s}
.hf-3 svg{color:var(--turquoise)}

/* ==========================================================================
   STATS / TRUST CARDS
   ========================================================================== */
.stats-band{margin-top:-46px;position:relative;z-index:5}
.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.stat-card{padding:22px 18px;text-align:center;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.stat-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.stat-card .sc-ic{width:46px;height:46px;border-radius:13px;margin:0 auto 12px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,122,24,.15),rgba(16,201,165,.15));color:var(--orange)}
.stat-card .sc-ic svg{width:24px;height:24px}
.stat-card .num{font-size:1.7rem;font-weight:900;display:block}
.stat-card .lbl{font-size:.86rem;color:var(--muted);margin-top:4px;font-weight:500}

/* ==========================================================================
   GENERIC GRID
   ========================================================================== */
.grid{display:grid;gap:22px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Feature card */
.feature-card{padding:24px;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);contain:layout paint}
.feature-card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(16,201,165,.16),transparent 70%);opacity:0;transition:opacity .4s}
.feature-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,122,24,.4)}
.feature-card:hover::after{opacity:1}
.feature-card h3{font-size:1.08rem}
.feature-card p{color:var(--muted);font-size:.92rem;line-height:1.75}
.feature-card .fc-top{display:flex;align-items:center;justify-content:space-between}
.feature-card .arrow{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--bg-soft);color:var(--muted);transition:.3s var(--ease)}
.feature-card:hover .arrow{background:var(--grad-brand);color:#fff;transform:translateX(-4px)}
.feature-card .arrow svg{width:18px;height:18px;transform:rotate(180deg)}

/* Tabs */
.tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:34px}
.tabs.scroll-x{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;justify-content:flex-start}
.tab-panel{display:none;animation:fadein .5s var(--ease)}
.tab-panel.active{display:grid}

/* ==========================================================================
   INTRO / SPLIT
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
.split .media{position:relative;perspective:1200px}
.split .media img,.split .media .visual-frame{width:100%;border-radius:var(--radius-xl)}
.visual-frame{background:var(--grad-dark);border:1px solid var(--border);border-radius:var(--radius-xl);padding:26px;box-shadow:var(--shadow-lg);position:relative;overflow:hidden;min-height:340px;display:grid;place-items:center;color:#cfeee7}
.check-list{display:grid;gap:14px;margin-top:22px}
.check-list li{display:flex;align-items:flex-start;gap:12px;font-weight:500}
.check-list li svg{width:22px;height:22px;color:var(--turquoise);flex:none;margin-top:3px}
.check-list li small{display:block;color:var(--muted);font-weight:400}

/* ==========================================================================
   OTP SECTION
   ========================================================================== */
.otp-wrap{position:relative;border-radius:var(--radius-xl);padding:clamp(28px,5vw,60px);background:var(--grad-dark);color:#eafaf6;overflow:hidden;isolation:isolate}
.otp-wrap::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(16,201,165,.35),transparent 70%);top:-120px;right:-60px;z-index:-1}
.otp-wrap::after{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,24,.28),transparent 70%);bottom:-140px;left:-60px;z-index:-1}
.otp-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.otp-grid h2{color:#fff}
.otp-grid p{color:#a9c9c3}
.otp-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:rgba(16,201,165,.16);border:1px solid rgba(16,201,165,.4);color:var(--turquoise-light);font-weight:700;font-size:.88rem;margin-bottom:16px}
.otp-visual{display:flex;flex-direction:column;gap:14px;align-items:center}
.otp-box{display:flex;gap:10px;direction:ltr}
.otp-box span{width:46px;height:58px;border-radius:12px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:1.5rem;font-weight:900;color:#fff}
.otp-box span.done{border-color:var(--turquoise);background:rgba(16,201,165,.18);color:var(--turquoise-light)}
.otp-check{width:56px;height:56px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;color:#fff;box-shadow:var(--glow-turq);animation:pop .5s var(--ease) both}
.otp-check svg{width:30px;height:30px}

/* ==========================================================================
   DEVELOPER / CODE
   ========================================================================== */
.dev-band{background:var(--bg-soft);border-block:1px solid var(--border)}
.code-window{border-radius:var(--radius-lg);overflow:hidden;background:#04100f;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08);direction:ltr}
.code-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.code-bar .dot{width:12px;height:12px;border-radius:50%}
.code-bar .r{background:#ff5f56}.code-bar .y{background:#ffbd2e}.code-bar .g{background:#27c93f}
.code-bar .fname{margin-inline-start:12px;color:#7fa8a1;font-size:.82rem;font-weight:500}
.code-bar .copy-code{margin-inline-start:auto}
.code-body{padding:20px;font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.9;color:#cfeee7;overflow-x:auto}
.code-body .c{color:#5f7d78}
.code-body .k{color:var(--orange-light)}
.code-body .s{color:var(--turquoise-light)}
.code-body .key{color:#8fd0ff}
.code-body .method{color:#fff;background:var(--turquoise-dark);padding:2px 8px;border-radius:6px;font-weight:700}
.dev-note{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:8px 14px;border-radius:10px;background:rgba(255,122,24,.1);border:1px solid rgba(255,122,24,.3);color:var(--orange-dark);font-size:.82rem;font-weight:600}
[data-theme="dark"] .dev-note{color:var(--orange-light)}

/* ==========================================================================
   PLUGINS
   ========================================================================== */
.plugin-card{padding:26px;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);display:flex;flex-direction:column;gap:14px;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.plugin-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(16,201,165,.45)}
.plugin-logo{width:64px;height:64px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,122,24,.12),rgba(16,201,165,.12));border:1px solid var(--border);font-weight:900;font-size:1.4rem;color:var(--orange)}
.plugin-meta{display:flex;flex-wrap:wrap;gap:8px}
.plugin-meta .tag{font-size:.74rem;font-weight:600;padding:4px 10px;border-radius:8px;background:var(--bg-soft);color:var(--muted);border:1px solid var(--border)}
.plugin-card p{color:var(--muted);font-size:.92rem}

/* ==========================================================================
   PRICING
   ========================================================================== */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.price-card{border-radius:var(--radius-xl);background:var(--bg-elev);border:1px solid var(--border);padding:30px 26px;display:flex;flex-direction:column;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.price-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.price-card.popular{border:1.5px solid transparent;background:linear-gradient(var(--bg-elev),var(--bg-elev)) padding-box,var(--grad-brand) border-box;box-shadow:var(--shadow-lg)}
.price-card.free{background:var(--bg-soft)}
.ribbon{position:absolute;top:20px;left:-42px;transform:rotate(-45deg);background:var(--grad-brand);color:#fff;font-size:.72rem;font-weight:700;padding:6px 46px;box-shadow:var(--shadow-sm)}
.pop-badge{position:absolute;top:16px;left:16px;background:var(--grad-brand);color:#fff;font-size:.74rem;font-weight:700;padding:5px 13px;border-radius:999px;box-shadow:var(--glow-turq)}
.price-name{font-weight:800;font-size:1.15rem}
.price-desc{color:var(--muted);font-size:.88rem;margin-top:4px}
.price-amount{margin:20px 0 6px;display:flex;align-items:baseline;gap:8px}
.price-amount .big{font-size:2.3rem;font-weight:900;font-variant-numeric:tabular-nums}
.price-amount .cur{color:var(--muted);font-weight:600}
.price-tariff{font-size:.85rem;color:var(--turquoise-dark);font-weight:700;background:rgba(16,201,165,.12);padding:5px 10px;border-radius:8px;display:inline-block}
[data-theme="dark"] .price-tariff{color:var(--turquoise-light)}
.price-gift{font-size:.82rem;color:var(--orange-dark);font-weight:600;margin-top:6px}
[data-theme="dark"] .price-gift{color:var(--orange-light)}
.price-feats{display:grid;gap:11px;margin:22px 0 26px;padding-top:18px;border-top:1px dashed var(--border)}
.price-feats li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem}
.price-feats li svg{width:19px;height:19px;color:var(--turquoise);flex:none;margin-top:3px}
.price-card .btn{margin-top:auto}
.tariff-note{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}
.tariff-note .ti{display:flex;align-items:center;gap:10px;padding:12px 18px;border-radius:14px;background:var(--bg-soft);border:1px solid var(--border);font-weight:600;font-size:.92rem}
.tariff-note .ti b{font-weight:900;font-variant-numeric:tabular-nums;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.tariff-note .ti svg{width:20px;height:20px;color:var(--turquoise)}

/* ==========================================================================
   DISCOUNT / COUPON
   ========================================================================== */
.discount-band{position:relative;border-radius:var(--radius-xl);overflow:hidden;padding:clamp(28px,5vw,58px);background:var(--grad-dark);color:#fff;isolation:isolate}
.discount-band::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 15% 20%,rgba(255,122,24,.3),transparent 45%),radial-gradient(circle at 85% 80%,rgba(16,201,165,.3),transparent 45%);z-index:-1}
.discount-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.discount-grid h2{color:#fff}
.discount-grid p{color:#a9c9c3;margin-top:12px}
.coupon{position:relative;background:var(--bg-eval,#fff);border-radius:var(--radius-lg);padding:28px;text-align:center;background:var(--bg-elev);border:2px dashed var(--orange);position:relative;overflow:visible}
[data-theme="dark"] .coupon{background:var(--bg-elev)}
.coupon::before,.coupon::after{content:"";position:absolute;top:50%;width:34px;height:34px;border-radius:50%;background:var(--dark-2);transform:translateY(-50%)}
.coupon::before{left:-18px}.coupon::after{right:-18px}
.coupon .off{font-size:1.9rem;font-weight:900;background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.coupon .code{font-size:1.7rem;font-weight:900;letter-spacing:4px;margin:12px 0;direction:ltr;font-family:"JetBrains Mono",monospace}
.coupon .cp-btn{width:100%}
.coupon.copied{animation:shake .4s var(--ease)}
.countdown{display:flex;gap:10px;justify-content:center;margin-top:16px}
.countdown .cd{min-width:52px;padding:8px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.countdown .cd b{/* display:block; */font-size:1.3rem;font-variant-numeric:tabular-nums}
.countdown .cd small{font-size:.68rem;color:#a9c9c3}

/* ==========================================================================
   ACCOUNT / BLOG / ACADEMY / JOBS
   ========================================================================== */
.cta-band{border-radius:var(--radius-xl);padding:clamp(28px,5vw,54px);background:var(--grad-brand);color:#fff;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--glow-orange)}
.cta-band::after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;background:rgba(255,255,255,.14);top:-120px;left:-40px}
.cta-band h2{color:#fff;position:relative;z-index:1}
.cta-band p{opacity:.92;position:relative;z-index:1;margin-top:6px}
.cta-band .btn{position:relative;z-index:1}

.blog-card{border-radius:var(--radius-lg);overflow:hidden;background:var(--bg-elev);border:1px solid var(--border);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.blog-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.blog-thumb{aspect-ratio:16/10;background:linear-gradient(135deg,rgba(255,122,24,.18),rgba(16,201,165,.18));display:grid;place-items:center;color:var(--orange);position:relative;overflow:hidden}
.blog-thumb svg{width:44px;height:44px}
.blog-body{padding:20px}
.blog-body .meta{font-size:.8rem;color:var(--muted);display:flex;gap:12px;margin-bottom:8px}
.blog-body h3{font-size:1.05rem}
.blog-body p{color:var(--muted);font-size:.9rem;margin-top:8px}

.edu-card{padding:24px;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px;transition:.35s var(--ease)}
.edu-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--turquoise)}
.edu-card .n{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--grad-brand);color:#fff;font-weight:900}

.job-card{padding:26px;border-radius:var(--radius-lg);background:var(--bg-elev);border:1px solid var(--border);text-align:center;transition:.35s var(--ease)}
.job-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--orange)}
.job-card .icon-box{margin:0 auto 14px}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,50px);align-items:start}
.contact-info{display:grid;gap:16px}
.contact-line{display:flex;align-items:center;gap:16px;padding:18px;border-radius:var(--radius-md);background:var(--bg-elev);border:1px solid var(--border);transition:.3s var(--ease)}
.contact-line:hover{transform:translateX(-5px);border-color:var(--turquoise);box-shadow:var(--shadow-sm)}
.contact-line .icon-box{width:48px;height:48px}
.contact-line b{display:block;font-size:1.05rem}
.contact-line small{color:var(--muted)}
.contact-line .val{margin-inline-start:auto;font-weight:700;direction:ltr;font-variant-numeric:tabular-nums}
.social-row{display:flex;flex-wrap:wrap;gap:10px}
.social-row a{flex:1;min-width:64px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;border-radius:14px;background:var(--bg-elev);border:1px solid var(--border);font-size:.78rem;font-weight:600;color:var(--muted);transition:.3s var(--ease)}
.social-row a svg{width:26px;height:26px}
.social-row a:hover{color:#fff;background:var(--grad-brand);border-color:transparent;transform:translateY(-4px)}
.form{display:grid;gap:16px}
.field label{display:block;font-weight:600;font-size:.9rem;margin-bottom:7px}
.field input,.field textarea,.field select{width:100%;padding:14px 16px;border-radius:14px;background:var(--bg-elev);border:1.5px solid var(--border);color:var(--text);transition:.25s var(--ease);font-size:.96rem}
.field textarea{resize:vertical;min-height:130px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--turquoise);box-shadow:0 0 0 4px rgba(16,201,165,.14)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--dark);color:#cfeee7;margin-top:60px;position:relative;overflow:hidden;direction:rtl}
.site-footer::before{content:"";position:absolute;top:0;inset-inline:0;height:2px;background:var(--grad-brand)}
.footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:34px;padding-block:56px 40px}
.footer-brand img{height:46px;margin-bottom:16px}
.footer-brand p{color:#8fb0aa;font-size:.92rem;max-width:320px}
.footer-col h4{color:#fff;font-size:1rem;margin-bottom:16px;font-weight:700}
.footer-col ul{display:grid;gap:11px}
.footer-col a{color:#8fb0aa;font-size:.92rem;transition:.2s;display:inline-flex;align-items:center;gap:7px}
.footer-col a:hover{color:var(--turquoise-light);padding-inline-start:5px}
.footer-col a svg{width:15px;height:15px}
.footer-social{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.footer-social a{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:#8fb0aa;transition:.3s}
.footer-social a:hover{background:var(--grad-brand);color:#fff;transform:translateY(-4px)}
.footer-social svg{width:20px;height:20px}
.footer-theme{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:6px;border-radius:14px;margin-top:18px;width:max-content}
.footer-theme button{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:#8fb0aa}
.footer-theme button.active{background:var(--grad-brand);color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);padding-block:22px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;color:#8fb0aa;font-size:.86rem}
.footer-trust{display:flex;gap:10px;flex-wrap:wrap}
.trust-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:11px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:.8rem;color:#a9c9c3}
.trust-badge svg{width:16px;height:16px;color:var(--turquoise)}

/* ==========================================================================
   MOBILE ACTION BAR
   ========================================================================== */
.action-bar{position:fixed;bottom:0;inset-inline:0;z-index:880;display:none;
  padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--glass);border-top:1px solid var(--glass-brd);
  backdrop-filter:blur(20px) saturate(170%);-webkit-backdrop-filter:blur(20px) saturate(170%);box-shadow:0 -8px 30px -12px rgba(0,0,0,.3)}
.action-bar ul{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.action-bar a{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:14px;color:var(--muted);font-size:.68rem;font-weight:600;transition:.25s var(--ease);min-height:48px;justify-content:center}
.action-bar a svg{width:22px;height:22px}
.action-bar a.active{color:var(--orange)}
.action-bar a.active svg{filter:drop-shadow(0 3px 10px rgba(255,122,24,.5))}
.action-bar a.active::after{content:"";position:absolute;top:1px;width:22px;height:3px;border-radius:3px;background:var(--grad-brand)}
.action-bar a .ic-wrap.active-grad svg{stroke:url(#gradStroke)}

/* ==========================================================================
   TOAST
   ========================================================================== */
.toast-region{position:fixed;bottom:24px;inset-inline-end:24px;z-index:2000;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:center;gap:12px;min-width:250px;max-width:min(360px,86vw);padding:14px 18px;border-radius:16px;background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow-lg);color:var(--text);font-weight:600;font-size:.92rem;transform:translateX(120%);opacity:0;transition:transform .45s var(--ease),opacity .45s var(--ease);overflow:hidden;position:relative}
.toast.show{transform:translateX(0);opacity:1}
.toast .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:none;color:#fff}
.toast.success .ti{background:var(--turquoise)}
.toast.error .ti{background:#ff5f56}
.toast.info .ti{background:var(--orange)}
.toast .ti svg{width:18px;height:18px}
.toast .progress{position:absolute;bottom:0;inset-inline-start:0;height:3px;background:var(--grad-brand);animation:tprog 3.2s linear forwards}
@keyframes tprog{from{width:100%}to{width:0}}

/* ==========================================================================
   ANIMATIONS / REVEAL
   ========================================================================== */
.reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease);will-change:opacity,transform}
.reveal{transform:translateY(34px)}
.reveal-left{transform:translateX(40px)}
.reveal-right{transform:translateX(-40px)}
.reveal-scale{transform:scale(.9)}
.is-visible{opacity:1!important;transform:none!important}
.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out}

@keyframes float{0%,100%{transform:translateY(0) rotate(var(--rot,0deg))}50%{transform:translateY(-16px) rotate(var(--rot,0deg))}}
@keyframes msgin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ==========================================================================
   PREMIUM POLISH — cards, glows, edges (21st.dev-inspired depth)
   ========================================================================== */
.feature-card,.plugin-card,.price-card,.stat-card,.edu-card,.job-card,.blog-card,.contact-line{will-change:transform}
.feature-card::before,.plugin-card::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad-brand);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease);z-index:2}
.feature-card:hover::before,.plugin-card:hover::before{transform:scaleX(1)}
.feature-card:hover .icon-box,.plugin-card:hover .icon-box,.edu-card:hover .icon-box{transform:translateY(-2px);box-shadow:var(--glow-turq)}
.stat-card{box-shadow:var(--shadow)}
.price-card.popular{box-shadow:var(--shadow-lg),0 0 0 4px rgba(255,122,24,.08)}
.price-card.popular:hover{transform:translateY(-10px)}
.grad-border,.price-card.popular::after{backface-visibility:hidden}

/* soft light source top-corner on dark frames */
.otp-wrap,.discount-band,.visual-frame{position:relative}
.otp-wrap .spark,.discount-band .spark{position:absolute;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);top:10%;left:12%;filter:blur(6px);z-index:-1}

/* gradient outline for key interactive chips on focus */
.chip:focus-visible,.tabs button:focus-visible,.theme-switch button:focus-visible,.action-bar a:focus-visible{outline:2px solid var(--turquoise);outline-offset:2px}

/* nicer code/inline */
code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;background:transparent;border:1px solid var(--border);padding:1px 7px;border-radius:8px;font-size:.9em}

/* scrollbar for horizontal scroll rows (thin) */
.hscroll::-webkit-scrollbar,.tabs.scroll-x::-webkit-scrollbar{height:5px}
.hscroll::-webkit-scrollbar-thumb,.tabs.scroll-x::-webkit-scrollbar-thumb{background:var(--grad-brand);border:0;border-radius:9px}

/* button glow pulse for primary CTA in coupon */
.coupon .btn-primary{box-shadow:0 0 0 0 rgba(255,122,24,.5);animation:cpPulse 2.6s var(--ease) infinite}
@keyframes cpPulse{0%{box-shadow:0 0 0 0 rgba(255,122,24,.45)}70%{box-shadow:0 0 0 14px rgba(255,122,24,0)}100%{box-shadow:0 0 0 0 rgba(255,122,24,0)}}

/* Page hero (interior) */
.page-hero{position:relative;padding-block:clamp(40px,8vw,86px);text-align:center;overflow:hidden;isolation:isolate;background:var(--bg-soft);border-bottom:1px solid var(--border)}
.page-hero::before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(16,201,165,.18),transparent 70%);top:-200px;left:50%;transform:translateX(-50%);z-index:-1}
.page-hero h1{margin-top:14px}
.page-hero p{color:var(--muted);max-width:640px;margin:16px auto 0}
.breadcrumb{display:flex;gap:8px;justify-content:center;align-items:center;font-size:.85rem;color:var(--muted);margin-top:20px;flex-wrap:wrap}
.breadcrumb a:hover{color:var(--orange)}
.breadcrumb span.sep{opacity:.5}

/* Skip link */
.skip-link{position:absolute;top:-60px;inset-inline-start:16px;z-index:3000;background:var(--grad-brand);color:#fff;padding:10px 18px;border-radius:12px;font-weight:700;transition:top .25s}
.skip-link:focus{top:12px}

/* ---------- Comparison table ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--border);background:var(--bg-elev);box-shadow:var(--shadow-sm);-webkit-overflow-scrolling:touch}
.cmp-table{min-width:640px;width:100%;border-collapse:collapse;font-size:.92rem}
.cmp-table th,.cmp-table td{padding:14px 16px;text-align:center;border-bottom:1px solid var(--border)}
.cmp-table th:first-child,.cmp-table td:first-child{text-align:start;font-weight:600}
.cmp-table thead th{background:var(--bg-soft);font-weight:800;position:sticky;top:0}
.cmp-table thead th.hl{background:var(--grad-brand);color:#fff}
.cmp-table td.hl{background:rgba(255,122,24,.05)}
.cmp-table tr:last-child td{border-bottom:none}
.cmp-table svg{width:19px;height:19px;margin-inline:auto}
.cmp-table .yes{color:var(--turquoise)}
.cmp-table .no{color:var(--muted);opacity:.5}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-inline:auto;display:grid;gap:12px}
.faq details{background:var(--bg-elev);border:1px solid var(--border);border-radius:var(--radius-md);padding:4px 20px;transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--shadow-sm);border-color:rgba(16,201,165,.4)}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:15px 0;font-weight:700;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:var(--bg-soft);color:var(--orange);font-weight:900;flex:none;transition:.3s var(--ease)}
.faq details[open] summary::before{content:"–";background:var(--grad-brand);color:#fff}
.faq details p{color:var(--muted);padding-bottom:16px;line-height:1.9}

/* ---------- Steps ---------- */
.steps{counter-reset:st}
.steps .edu-card{position:relative}
.steps .edu-card .n{position:static}

/* ---------- Info boxes ---------- */
.note-box{display:flex;gap:12px;align-items:flex-start;padding:16px 18px;border-radius:var(--radius-md);background:rgba(16,201,165,.08);border:1px solid rgba(16,201,165,.3);font-size:.92rem;color:var(--muted)}
.note-box svg{width:20px;height:20px;color:var(--turquoise);flex:none;margin-top:3px}
[data-theme="dark"] .note-box{color:#a9c9c3}


:focus-visible{outline:3px solid var(--turquoise);outline-offset:2px;border-radius:6px}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1;transform:none}
}

/* ==========================================================================
   BaranPayam WP additions — topbar, search, academy, buybox, comments
   ========================================================================== */
.bp-topbar{background:var(--grad-dark);color:#cfeee7;font-size:.8rem;padding-block:8px;border-bottom:1px solid rgba(255,255,255,.06)}
.bp-topbar a{color:#cfeee7;transition:.2s}
.bp-topbar a:hover{color:var(--turquoise-light)}
.bp-topbar .tb-links{display:flex;gap:16px;align-items:center}

.bp-search-overlay{position:fixed;inset:0;z-index:950;background:rgba(4,12,11,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:grid;place-items:start center;padding:12vh 18px 18px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility .35s}
.bp-search-overlay.open{opacity:1;visibility:visible}
.bp-search-panel{width:min(640px,96vw);border-radius:26px;padding:26px;background:var(--bg-elev);border:1px solid var(--border);box-shadow:var(--shadow-lg);position:relative;transform:translateY(-14px);transition:transform .35s var(--ease)}
.bp-search-overlay.open .bp-search-panel{transform:none}
.bp-search-panel::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--grad-brand);border-radius:26px 26px 0 0}
.bp-search-panel .drawer-close{position:absolute;top:18px;inset-inline-end:18px}
.bp-search-form{display:flex;gap:10px;flex-wrap:wrap}
.bp-search-form input[type=search]{flex:1;min-width:200px;min-height:52px;border-radius:16px;border:1.5px solid var(--border);background:var(--bg-soft);padding:0 18px;font-size:1rem;color:var(--text)}
.bp-search-form input:focus{outline:none;border-color:var(--turquoise);box-shadow:0 0 0 4px rgba(16,201,165,.14)}
.bp-search-hint{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.84rem;margin-top:12px}
.bp-search-inline{display:flex;gap:10px;margin-bottom:26px}
.bp-search-inline input{flex:1;min-height:48px;border-radius:14px;border:1.5px solid var(--border);background:var(--bg-elev);color:var(--text);padding:0 16px}

.bp-course-card{display:flex;flex-direction:column;overflow:hidden}
.bp-course-thumb{display:block;position:relative;aspect-ratio:16/10;background:linear-gradient(135deg,rgba(255,122,24,.15),rgba(16,201,165,.15));overflow:hidden}
.bp-course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.bp-course-card:hover .bp-course-thumb img{transform:scale(1.05)}
.bp-course-noimg{position:absolute;inset:0;display:grid;place-items:center;color:var(--orange)}
.bp-course-thumb > .badge{position:absolute;top:12px;right:12px}
.bp-course-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.bp-course-meta{display:flex;gap:8px;flex-wrap:wrap}
.bp-course-meta .tag{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;padding:4px 10px;border-radius:8px;background:var(--bg-soft);border:1px solid var(--border);color:var(--muted)}
.bp-course-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px}
.bp-course-price{font-weight:900;font-size:1.05rem;color:var(--turquoise-dark)}
[data-theme="dark"] .bp-course-price{color:var(--turquoise-light)}
.bp-course-price small{font-size:.7rem;font-weight:600}

.bp-course-hero{position:relative;padding-block:clamp(26px,5vw,56px);background:var(--grad-dark);color:#eafaf6;overflow:hidden}
.bp-course-hero::before{content:"";position:absolute;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(16,201,165,.25),transparent 70%);top:-160px;left:-80px}
.bp-course-hero .breadcrumb{color:#8fb0aa}
.bp-course-hero .breadcrumb a{color:#a9c9c3}
.bp-course-hero-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:clamp(22px,4vw,44px);align-items:start;position:relative;margin-top:16px}
.bp-course-hero h1{color:#fff;font-size:clamp(1.6rem,3.6vw,2.5rem)}
.bp-course-hero .lead{color:#a9c9c3;margin-top:10px;font-size:1.02rem}
.bp-course-cats a{color:#fff}
.bp-course-cats{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.bp-course-cats a{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.14);padding:5px 12px;border-radius:99px;font-size:.78rem}
.bp-course-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.chip-static{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 14px;font-size:.84rem;font-weight:600}
.chip-static svg{color:var(--turquoise-light)}
.bp-buybox{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:24px;padding:24px;color:#eafaf6;box-shadow:0 30px 70px -30px rgba(0,0,0,.5)}
.bp-buy-price{display:flex;align-items:baseline;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.bp-buy-price .big{font-size:2rem;font-weight:900}
.bp-buy-price s{color:#7a928d;font-size:.9rem;font-weight:600}
.bp-buy-list{display:grid;gap:10px;margin:16px 0 0;padding:14px 0 0;border-top:1px dashed rgba(255,255,255,.14);list-style:none}
.bp-buy-list li{display:flex;gap:9px;align-items:center;font-size:.86rem;color:#cfeee7}
.bp-buy-list svg{color:var(--turquoise-light);flex:none}
.bp-buy-form{margin:0}
.bp-curriculum{padding:22px}
.bp-curriculum h3{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.bp-curriculum ol{display:grid;gap:10px}
.bp-curriculum li{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:14px;background:var(--bg-soft);list-style:none}
.bp-curriculum li div{flex:1}
.bp-curriculum .cnum{width:28px;height:28px;border-radius:9px;background:var(--grad-brand);color:#fff;display:grid;place-items:center;font-size:.78rem;font-weight:900;flex:none}
.bp-academy-filter{margin-top:22px}
.bp-academy-filter .tabs{justify-content:center}

.bp-cart-link{position:relative;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:13px;border:1px solid var(--border);background:var(--bg-elev);color:var(--text);transition:.25s var(--ease)}
.bp-cart-link:hover{transform:translateY(-2px);border-color:var(--turquoise);box-shadow:var(--glow-turq)}
.bp-cart-count{position:absolute;top:-7px;left:-7px;min-width:20px;height:20px;border-radius:11px;background:var(--grad-brand);color:#fff;font-size:.68rem;font-weight:900;display:grid;place-items:center;padding:0 5px;box-shadow:0 4px 10px rgba(255,122,24,.5);transition:transform .3s var(--ease)}

.single-post .entry-content,.page-content{font-size:1.02rem;line-height:2.1}
.entry-content h2{margin-top:34px}
.entry-content ul{list-style:disc;padding-inline-start:24px;margin-block:14px}
.entry-content ol{padding-inline-start:24px;margin-block:14px}
.entry-content a{text-decoration:underline;text-decoration-color:rgba(255,122,24,.4);text-underline-offset:4px}
.entry-content a:hover{text-decoration-color:var(--orange)}
.comments-area{margin-top:26px}
.comments-area ol.comment-list{list-style:none;padding:0;display:grid;gap:14px}
.comments-area .comment-body{border:1px solid var(--border);border-radius:16px;padding:14px 18px;background:var(--bg-soft)}
.comments-area .comment-form input,.comments-area .comment-form textarea{width:100%;border:1.5px solid var(--border);border-radius:12px;background:var(--bg-elev);color:var(--text);padding:12px 14px;min-height:44px}
/* ==========================================================================
   BaranPayam 1.0.3 — dropdown nav, action-bar glass, color lock, links
   ========================================================================== */
/* --- no underlines anywhere by default --- */
body a,.entry-content a,.elementor-widget-theme-post-content a,.woocommerce-breadcrumb a,.comment-content a{text-decoration:none!important}
.entry-content a:hover,.comment-content a:hover{text-decoration:none!important;color:var(--orange)}
.bp-underline-links .entry-content a{text-decoration:underline!important;text-underline-offset:4px;text-decoration-color:rgba(255,122,24,.35)}

/* --- buttons always read on their background --- */
.btn,.btn-primary,.wp-block-button .wp-block-button__link,.elementor a.elementor-button,.elementor .elementor-button span,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.bp-chip-btn{color:#fff!important}
.btn-ghost,.btn-outline,.btn-white{color:var(--text)!important}
.elementor a.elementor-button{background-image:var(--grad-brand);background-color:transparent!important;border-radius:14px;font-weight:800;box-shadow:0 8px 24px -8px rgba(255,122,24,.5)}
.wp-block-button .wp-block-button__link{background:var(--grad-brand);border:none;border-radius:14px}

/* --- desktop dropdown menus --- */
.main-nav > ul{display:flex;gap:2px;align-items:center}
.main-nav ul li{position:relative}
.main-nav ul ul{
  position:absolute;top:calc(100% + 10px);inset-inline-start:0;min-width:225px;margin:0;padding:9px;list-style:none;
  background:var(--bg-elev);border:1px solid var(--border);border-radius:18px;box-shadow:0 30px 70px -24px rgba(7,19,18,.4);
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.97);transition:.28s cubic-bezier(.22,.61,.36,1);z-index:99;
}
.main-nav ul ul::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;background:var(--grad-brand);border-radius:18px 18px 0 0}
.main-nav li.menu-item-has-children:hover > ul,.main-nav li.menu-item-has-children:focus-within > ul{opacity:1;visibility:visible;transform:none}
.main-nav ul ul a{display:flex;align-items:center;gap:9px;padding:11px 13px!important;border-radius:12px;font-size:.9rem;color:var(--muted)}
.main-nav ul ul a:hover{background:linear-gradient(135deg,rgba(255,122,24,.1),rgba(16,201,165,.12));color:var(--orange);transform:translateX(-3px)}
.main-nav ul ul .sub-dot{width:6px;height:6px;border-radius:50%;background:var(--grad-brand);flex:none;opacity:.7}
.main-nav a .caret{display:inline-flex;margin-inline-start:5px;opacity:.55;transition:.25s}
.main-nav a .caret svg{transform:rotate(-90deg);transition:transform .25s}
.main-nav li:hover > a .caret{opacity:1}
.main-nav li:hover > a .caret svg{transform:rotate(-270deg)}
.main-nav li.current > a{color:var(--text);font-weight:700}

/* --- mobile action bar: premium glass --- */
.action-bar{padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.action-bar ul{grid-template-columns:repeat(5,1fr);gap:6px}
.action-bar a{position:relative;overflow:hidden;min-height:52px;padding:9px 4px;border-radius:16px;color:var(--muted);font-size:.68rem;gap:5px}
.action-bar a::before{content:"";position:absolute;inset:0;border-radius:16px;background:var(--grad-brand);opacity:0;transition:opacity .3s;z-index:-1}
.action-bar a svg{width:21px;height:21px;transition:transform .25s}
.action-bar a.active{color:#fff!important}
.action-bar a.active::before{opacity:1}
.action-bar a.active::after{display:none}
.action-bar a.active svg{filter:none;transform:translateY(-1px)}
.action-bar a:active{transform:scale(.94)}

/* --- color lock vs Elementor/Woo globals --- */
.bp-color-lock :root,.bp-color-lock{--e-global-color-primary:var(--turquoise);--e-global-color-secondary:var(--orange);--e-global-color-text:var(--text);--e-global-color-accent:var(--orange-light)}
.bp-color-lock .elementor-widget-heading .elementor-heading-title:not([style*="color"]){color:inherit}
.bp-color-lock h1,.bp-color-lock h2,.bp-color-lock h3,.bp-color-lock h4{color:var(--text)}
.bp-color-lock .elementor-widget-text-editor{color:var(--muted)}

/* --- header height vars --- */
.site-header .header-glass{height:var(--header-h,74px)}
.site-header.scrolled .header-glass{height:calc(var(--header-h,74px) - 8px)}
@supports (position:sticky){}.mobile-header{height:var(--m-header-h,60px)}

/* --- topbar compact --- */
.bp-topbar .container{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.bp-topbar .tb-links{display:flex;gap:16px;align-items:center}
.bp-topbar .tb-links .menu,.bp-topbar .tb-links > div{display:flex;gap:16px;list-style:none;margin:0;padding:0}
.bp-topbar .tb-links a{font-weight:600}
@media (max-width:768px){.bp-topbar{display:none}}
/* ==========================================================================
   BaranPayam 1.1 — actionbar styles, popup, player, hub cards, login modal
   ========================================================================== */
/* action bar */
.action-bar{--bar-normal:#7a8c87;--bar-active-grad:var(--grad-brand)}
.action-bar a{color:var(--bar-normal)}
.action-bar a:hover{color:var(--bar-hover,var(--turquoise-dark))}
.action-bar a.active::before{background:var(--bar-active,none)}
.action-bar a.active{color:var(--bar-active-text,#fff)}
body[data-theme="dark"] .action-bar a{color:#7d9c95}
.action-bar.bar-solid{background:var(--bg-elev);backdrop-filter:none;-webkit-backdrop-filter:none;border-top:1px solid var(--border)}
.action-bar.bar-float{margin:0 12px calc(10px + env(safe-area-inset-bottom));border-radius:22px;border:1px solid var(--glass-brd);overflow:hidden}
.action-bar.bar-float ul{padding:4px}

/* popup */
.bp-popup{position:fixed;z-index:9998;width:var(--bp-popup-w,420px);max-width:94vw;bottom:96px;inset-inline-end:20px;border-radius:24px;box-shadow:0 40px 90px -24px rgba(0,0,0,.5);opacity:0;transform:translateY(24px) scale(.96);transition:.4s cubic-bezier(.22,.61,.36,1);color:#fff;overflow:hidden}
.bp-popup--bl{inset-inline-end:auto;inset-inline-start:20px}
.bp-popup--center{inset-inline:auto;left:50%;top:50%;transform:translate(-50%,-46%) scale(.95);bottom:auto}
.bp-popup.open{opacity:1;transform:translateY(0) scale(1)}
.bp-popup--center.open{transform:translate(-50%,-50%) scale(1)}
.bp-popup:not([hidden]){display:block}
.bp-popup[hidden]{display:none}
.bp-popup::before{content:"";position:absolute;inset:0;z-index:-1}
.bp-popup--brand::before{background:linear-gradient(135deg,#ff7a18,#10c9a5)}
.bp-popup--night::before{background:var(--grad-dark)}
.bp-popup--night{border:1px solid rgba(255,255,255,.12)}
.bp-popup--turq::before{background:linear-gradient(135deg,#10c9a5,#7cf5d9)}
.bp-popup--turq,.bp-popup--turq h3,.bp-popup--turq p{color:#04211c}
.bp-popup-inner{padding:26px 24px 22px;text-align:center}
.bp-popup-ic{width:56px;height:56px;border-radius:18px;display:inline-grid;place-items:center;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25);margin-bottom:12px}
.bp-popup--turq .bp-popup-ic{background:rgba(4,33,28,.08);border-color:rgba(4,33,28,.15)}
.bp-popup h3{color:inherit;font-size:1.25rem;margin-bottom:6px}
.bp-popup p{opacity:.92;font-size:.9rem;line-height:1.8;margin-bottom:16px}
.bp-popup-close{position:absolute;top:12px;inset-inline-start:14px;width:34px;height:34px;border-radius:11px;background:rgba(0,0,0,.18);color:#fff;font-size:.8rem;display:grid;place-items:center;cursor:pointer;border:1px solid rgba(255,255,255,.2)}
.bp-popup--turq .bp-popup-close{background:rgba(4,33,28,.1);color:#04211c;border-color:rgba(4,33,28,.15)}
.bp-popup-no{display:block;margin:10px auto 0;background:none;border:none;color:inherit;opacity:.75;font-size:.8rem;text-decoration:underline;cursor:pointer;font-weight:600}
.bp-popup-btn{box-shadow:0 12px 30px -10px rgba(0,0,0,.4)}

/* player modal */
.bp-player{position:fixed;inset:0;z-index:10000;background:rgba(4,12,11,.85);backdrop-filter:blur(10px);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .3s}
.bp-player.open{opacity:1}
.bp-player[hidden]{display:none}
.bp-player-head{position:absolute;top:14px;inset-inline:16px;display:flex;align-items:center;gap:12px;z-index:2}
.bp-player-head h4{color:#eafaf6;font-size:.95rem;margin-inline-end:auto;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bp-player-dl,.bp-player-fs{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#cfeee7;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none}
.bp-player-dl:hover,.bp-player-fs:hover{background:var(--grad-brand);color:#fff;border-color:transparent}
.bp-player-close{position:absolute;top:18px;inset-inline-end:18px;z-index:3;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#fff;cursor:pointer}
.bp-player-stage{width:min(980px,94vw);aspect-ratio:16/9;max-height:76vh;border-radius:22px;overflow:hidden;background:#000;box-shadow:0 50px 120px -30px rgba(0,0,0,.7)}
.bp-player-stage video,.bp-player-stage iframe{width:100%;height:100%;border:0;display:block}
.bp-player-stage audio{width:100%}
.bp-audio-ctrl{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);width:min(620px,92vw);display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:20px;background:rgba(8,28,27,.85);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.12);color:#eafaf6}
.bp-ap{width:46px;height:46px;border-radius:50%;background:var(--grad-brand);color:#fff;display:grid;place-items:center;border:none;cursor:pointer;flex:none;box-shadow:0 10px 26px -8px rgba(255,122,24,.6)}
.bp-ap-seek{flex:1;accent-color:#10c9a5}
.bp-ap-rate{background:rgba(255,255,255,.08);color:#eafaf6;border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:6px 8px}
.bp-ap-time{font-size:.78rem;font-variant-numeric:tabular-nums;direction:ltr}

/* media/hub cards */
.bp-media-card .blog-thumb{position:relative;overflow:hidden}
.bpm-badge{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(8,28,27,.55);backdrop-filter:blur(6px);border:1.5px solid rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;cursor:pointer;transition:.3s cubic-bezier(.22,.61,.36,1);z-index:2}
.bpm-badge:hover,.blog-card:hover .bpm-badge{background:var(--grad-brand);border-color:transparent;transform:scale(1.1);box-shadow:0 14px 40px -8px rgba(255,122,24,.65)}
.bpm-badge--audio{top:auto;inset:auto 12px 12px auto;width:44px;height:44px}
.bpm-cat{position:absolute;top:12px;inset-inline-start:12px;background:rgba(8,28,27,.65);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.18);color:#d6fff5;font-size:.68rem;font-weight:800;padding:5px 11px;border-radius:99px;z-index:2}
.blog-card .btn{margin-top:12px}
.bp-hub-group{margin-bottom:clamp(34px,5vw,56px)}
.bp-hub-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.bp-hub-head h3{font-size:var(--fs-700);display:flex;align-items:baseline;gap:10px}
.bp-hub-head h3 small{color:var(--muted);font-size:.8rem;font-weight:500}
.bp-hub-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:min(310px,82vw);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:16px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.bp-hub-scroll>*{scroll-snap-align:start}
.bp-hub .bp-hub-scroll .blog-card{height:100%}

/* login modal */
.bp-login-modal{position:fixed;inset:0;z-index:10001;background:rgba(4,12,11,.7);backdrop-filter:blur(8px);display:grid;place-items:center;padding:16px}
.bp-login-modal[hidden]{display:none}
.bp-login-modal-card{position:relative;width:min(460px,94vw);border-radius:26px;padding:26px 24px;background:var(--bg-elev);border:1px solid var(--border);box-shadow:0 50px 110px -30px rgba(0,0,0,.55)}
.bp-login-modal-card .bp-auth-card{padding:0;border:none;background:transparent;box-shadow:none}
.bp-login-modal-card .drawer-close{position:absolute;top:14px;inset-inline-end:14px;z-index:2}

@media (max-width:768px){
  .bp-popup{bottom:calc(92px + env(safe-area-inset-bottom));inset-inline:12px;width:auto}
  .bp-player-stage{aspect-ratio:16/10}
  .bp-audio-ctrl{position:static;transform:none;margin-top:14px;width:100%}
  .bp-player{grid-template-rows:auto auto auto;place-items:stretch;align-content:center}
}
/* ==========================================================================
   BaranPayam 1.1 — refined dark/light separation (default: light)
   ========================================================================== */
:root{--bar-normal:#5f736d;--bar-active-text:#fff}
[data-theme="dark"]{
  --bg:#06100f;
  --bg-elev:#0c1d1c;
  --bg-soft:#0a1918;
  --text:#eef7f4;
  --muted:#93aca6;
  --border:rgba(148,222,205,.14);
  --glass:rgba(9,22,21,.66);
  --glass-brd:rgba(148,222,205,.12);
  --bar-normal:#7d9c95;
}
/* light mode: surfaces read warmer/cleaner */
[data-theme="light"],:root:not([data-theme]){
  --border:rgba(7,29,26,.10);
  --shadow-sm:0 1px 2px rgba(7,19,18,.05),0 6px 18px -8px rgba(7,19,18,.10);
}
[data-theme="dark"] .btn-ghost{background:linear-gradient(180deg,rgba(148,222,205,.10),rgba(148,222,205,.04))}
[data-theme="dark"] .card,[data-theme="dark"] .feature-card,[data-theme="dark"] .price-card,
[data-theme="dark"] .plugin-card,[data-theme="dark"] .edu-card,[data-theme="dark"] .job-card,
[data-theme="dark"] .blog-card,[data-theme="dark"] .contact-line,[data-theme="dark"] .bp-toc,
[data-theme="dark"] .bpc-item,[data-theme="dark"] .comment-respond,[data-theme="dark"] .bp-author-card{
  box-shadow:var(--shadow-sm),inset 0 1px 0 rgba(255,255,255,.05);
}
[data-theme="dark"] .stat-card,[data-theme="dark"] .bp-course-card,[data-theme="dark"] .bp-toc a.active{border-color:rgba(148,222,205,.16)}
[data-theme="dark"] ::selection{background:var(--orange-light);color:#04211c}
[data-theme="dark"] .bplive input,[data-theme="dark"] .field input,[data-theme="dark"] .field select,[data-theme="dark"] .field textarea,
[data-theme="dark"] .bp-search-form input,[data-theme="dark"] .comment-form input,[data-theme="dark"] .comment-form textarea{background:#0a1918;border-color:rgba(148,222,205,.16)}
[data-theme="dark"] .chip{background:#0a1918}
[data-theme="dark"] .tabs{background:transparent}
[data-theme="dark"] code{background:#0a1918;border-color:rgba(148,222,205,.14);color:#cfeee7}
[data-theme="dark"] .faq details{background:var(--bg-elev)}
[data-theme="dark"] .cmp-table thead th,[data-theme="dark"] .cmp-table td.hl{background:#0a1918}
[data-theme="dark"] .cmp-table thead th.hl{background:var(--grad-brand)}
[data-theme="dark"] .bp-login-modal-card{background:#0c1d1c}
[data-theme="dark"] .bp-search-panel{background:#0c1d1c}
[data-theme="dark"] .bp-steps li{background:#0c1d1c}
@media (max-width:768px){
  .bpc-vote{min-height:44px}
  .bp-player-head{top:auto;bottom:14px;flex-wrap:wrap}
}
/* ==========================================================================
   BaranPayam 1.1.1 — mega menu, drawer tree, font lock, neon dark, polish
   ========================================================================== */
/* ---- typography consistency vs Elementor kit ---- */
:root{--font-app:Vazirmatn,system-ui,sans-serif}
body,body[class*="elementor-page"],.elementor-widget-heading .elementor-heading-title{font-family:var(--font-app)!important}
[data-theme="dark"] .elementor-widget-text-editor,[data-theme="dark"] .elementor-widget-theme-post-content{color:var(--text)}

/* ---- header/logo fit ---- */
.brand img{height:55px;width:auto;max-width:min(168px,36vw);object-fit:contain;overflow:hidden}
.mh-brand{min-width:0}.mh-brand img.icon{width:38px;height:38px;border-radius:11px;object-fit:cover;flex:none;max-width:38px}.mh-brand .brand-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.header-glass{gap:10px}
.header-actions{gap:7px}

/* ---- mega dropdown: gradient spectrum, 3D, tidy ---- */
.main-nav > ul{gap:2px}
.main-nav li{position:relative}
.main-nav ul ul{
  background:linear-gradient(160deg,#0d2724 0%,#081c1b 55%,#061211 100%);
  border:1px solid rgba(124,245,217,.18);
  box-shadow:0 34px 80px -24px rgba(2,10,9,.75),0 0 26px -12px rgba(16,201,165,.4),inset 0 1px 0 rgba(255,255,255,.06);
  min-width:238px;width:max-content;max-width:min(320px,86vw);padding:10px;
  perspective:900px;
  opacity:0;visibility:hidden;transform:translateY(12px) rotateX(-10deg);transform-origin:top;
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.main-nav li.menu-item-has-children > a::after{display:none}
.main-nav li:hover > ul,.main-nav li:focus-within > ul{opacity:1;visibility:visible;transform:translateY(0) rotateX(0)}
.main-nav ul ul li{margin:0}
.main-nav ul ul a{
  color:#d6fff5!important;border-radius:13px;padding:11px 13px!important;display:flex;align-items:center;gap:10px;
  border:1px solid transparent;transition:.25s var(--ease);
}
.main-nav ul ul a:hover{
  background:linear-gradient(135deg,rgba(255,122,24,.18),rgba(16,201,165,.16));
  border-color:rgba(124,245,217,.35);color:#fff!important;transform:translateX(-4px) translateZ(24px);
  box-shadow:0 12px 28px -14px rgba(16,201,165,.7);
}
.main-nav ul ul .sub-dot{width:7px;height:7px;border-radius:50%;background:linear-gradient(135deg,#ff7a18,#10c9a5);flex:none;box-shadow:0 0 10px rgba(16,201,165,.8)}
.main-nav .caret svg{transform:rotate(-90deg)}
.main-nav li:hover .caret svg{transform:rotate(-270deg)}

/* ---- drawer accordion tree ---- */
.drawer-tree,.drawer-sub{list-style:none;margin:0;padding:0}
.drawer-tree > li{position:relative}
.drawer-tree li > a{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:14px;font-weight:600;color:var(--text);transition:.25s var(--ease)}
.drawer-tree li > a .di{width:20px;height:20px;color:var(--turquoise);flex:none}
.drawer-tree li.active > a{background:linear-gradient(135deg,rgba(255,122,24,.12),rgba(16,201,165,.14));color:var(--orange)}
[data-theme="dark"] .drawer-tree li.active > a{color:var(--orange-light)}
.dtoggle{position:absolute;top:8px;inset-inline-start:8px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--bg-soft);border:1px solid var(--border);color:var(--muted);cursor:pointer;transition:.3s var(--ease)}
.dtoggle svg{transform:rotate(-90deg);transition:transform .3s var(--ease)}
li.open > .dtoggle svg{transform:rotate(90deg)}
li.open > .dtoggle{background:var(--grad-brand);color:#fff;border-color:transparent;box-shadow:var(--glow-turq)}
.drawer-sub{
  margin:2px 10px 10px 22px;max-height:0;overflow:hidden;opacity:0;
  border-inline-start:2px solid transparent;border-image:linear-gradient(180deg,#ff7a18,#10c9a5) 1;
  background:linear-gradient(160deg,rgba(16,201,165,.09),rgba(255,122,24,.05));
  border-radius:0 0 16px 16px;
  transition:max-height .38s var(--ease),opacity .3s var(--ease);
  transform-style:preserve-3d;
}
li.open > .drawer-sub{opacity:1}
[data-theme="dark"] .drawer-sub{background:linear-gradient(160deg,rgba(16,201,165,.1),rgba(255,122,24,.06))}
.drawer-sub a{padding:10px 16px!important;font-size:.9rem;color:var(--muted)!important;gap:10px}
.drawer-sub a:hover{color:var(--turquoise-dark)!important}
[data-theme="dark"] .drawer-sub a:hover{color:var(--turquoise-light)!important}
.drawer-sub .sub-dot{width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,#ff7a18,#10c9a5);flex:none}

/* ---- action bar fixes ---- */
[data-theme="dark"] .action-bar a{color:var(--bar-normal,#7d9c95)}
.action-bar a{min-height:56px;padding:9px 2px 8px}
.action-bar a svg{width:21px;height:21px}
.action-bar a span.lbl{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-align:center;max-width:100%;line-height:1.3;font-size:.64rem;word-break:break-word}
.action-bar a{display:flex}
.action-bar a > *{min-width:0}
.action-bar li{min-width:0}
.action-bar a{flex-direction:column;line-height:1.35;word-break:normal}
.action-bar a{font-size:.64rem}

/* ---- popup centered on mobile ---- */
@media (max-width:768px){
  .bp-popup,.bp-popup--br,.bp-popup--bl{inset-inline:auto!important;left:50%!important;top:50%!important;bottom:auto!important;
    width:min(var(--bp-popup-w,420px),calc(100vw - 30px));transform:translate(-50%,-46%) scale(.94)}
  .bp-popup.open,.bp-popup--center.open{transform:translate(-50%,-50%) scale(1)!important}
}

/* ---- neon dark card system ---- */
[data-theme="dark"] .feature-card,[data-theme="dark"] .plugin-card,[data-theme="dark"] .price-card,
[data-theme="dark"] .stat-card,[data-theme="dark"] .edu-card,[data-theme="dark"] .job-card,[data-theme="dark"] .blog-card,
[data-theme="dark"] .bpc-item,[data-theme="dark"] .bp-toc,[data-theme="dark"] .bp-curriculum,[data-theme="dark"] .bp-author-card,
[data-theme="dark"] .bp-course-card,[data-theme="dark"] .contact-line,[data-theme="dark"] .comment-respond{
  background:linear-gradient(170deg,#0c1d1c,#081413);
  border:1px solid rgba(16,201,165,.22);
  box-shadow:0 0 0 1px rgba(16,201,165,.05),0 18px 44px -20px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="dark"] .feature-card:hover,[data-theme="dark"] .plugin-card:hover,[data-theme="dark"] .bp-course-card:hover,
[data-theme="dark"] .edu-card:hover,[data-theme="dark"] .blog-card:hover{border-color:rgba(124,245,217,.55);box-shadow:0 0 26px -8px rgba(16,201,165,.5),0 24px 50px -20px rgba(0,0,0,.7)}
[data-theme="dark"] .feature-card h3,[data-theme="dark"] .plugin-card h3,[data-theme="dark"] .edu-card h3,
[data-theme="dark"] .blog-card h3,[data-theme="dark"] .price-name,[data-theme="dark"] .bp-course-body h3 a{color:var(--text)}
[data-theme="dark"] .price-card.popular{border:1.5px solid transparent;background:linear-gradient(#0c1d1c,#0a1716) padding-box,var(--grad-brand) border-box}
[data-theme="dark"] .tag,[data-theme="dark"] .bp-course-meta .tag{color:#a9c9c3}

/* ---- header/footer tidy ---- */
.site-footer .footer-brand img{height:42px;width:auto;max-width:190px;object-fit:contain}
.footer-col ul{gap:10px}
.footer-col a{min-height:32px}
.footer-top{grid-template-columns:1.5fr repeat(4,minmax(0,1fr));gap:28px}
@media (max-width:1120px){.footer-top{grid-template-columns:1.4fr repeat(2,minmax(0,1fr))}}
@media (max-width:768px){.footer-top{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
.site-footer{color:#9db4ae}
.footer-bottom span{color:#87a49c}

/* ---- product cards (3 styles) ---- */
.bp-prod{position:relative}
.bp-prod-media{position:relative;overflow:hidden;border-radius:18px 18px 0 0}
.bp-prod--h .bp-prod-media{border-radius:20px 0 0 20px;flex:none;width:42%}
.woocommerce ul.products li.product.bp-prod--h,.woocommerce-page ul.products li.product.bp-prod--h{display:flex;gap:18px;align-items:stretch}
.bp-prod--h .bp-prod-media img{height:100%;min-height:190px;object-fit:cover}
.bp-prod-info{padding:16px 18px}
.bp-prod-title{font-size:1rem;font-weight:800;margin:0 0 6px}
.bp-prod-title a{color:var(--text)}
.bp-prod-ex{color:var(--muted);font-size:.84rem;line-height:1.8;margin:0 0 10px}
.bp-prod-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.bp-prod-price{font-weight:900;color:var(--turquoise-dark)}
[data-theme="dark"] .bp-prod-price{color:var(--turquoise-light)}
.bp-prod-price del{color:var(--muted);font-weight:500}
.bp-prod-price ins{text-decoration:none}
.bp-prod .button{border-radius:13px!important;min-height:42px!important;padding:0 16px!important;font-size:.84rem!important}
.bp-prod-flag{position:absolute;top:12px;inset-inline-start:12px;background:linear-gradient(135deg,#ff5f56,#ff7a18);color:#fff;font-size:.7rem;font-weight:900;padding:6px 12px;border-radius:10px;box-shadow:0 8px 20px -8px rgba(255,95,86,.6);z-index:2}
.bp-prod-q{position:absolute;bottom:12px;inset-inline-end:12px;opacity:0;transform:translateY(10px);transition:.3s var(--ease);z-index:2}
.bp-prod:hover .bp-prod-q{opacity:1;transform:none}
.bp-prod-x{display:block;position:relative;height:100%;border-radius:22px;overflow:hidden;background:linear-gradient(165deg,rgba(16,201,165,.12),rgba(255,122,24,.08));border:1px solid var(--border);transition:.35s var(--ease)}
.bp-prod-x:hover{transform:translateY(-6px) rotateX(4deg)}
.bp-prod-x-glow{position:absolute;inset:-40%;background:conic-gradient(from 180deg,rgba(255,122,24,.35),rgba(16,201,165,.35),transparent 60%);filter:blur(50px);opacity:.35;animation:bpSpin 9s linear infinite;z-index:0}
@keyframes bpSpin{to{transform:rotate(1turn)}}
.bp-prod-x .bp-prod-media{border-radius:0;aspect-ratio:16/10}
.bp-prod-x-body{position:relative;z-index:1;padding:16px 18px 20px}
.bp-prod-cat{display:inline-block;font-size:.68rem;font-weight:800;color:#7cf5d9;background:rgba(16,201,165,.14);border:1px solid rgba(124,245,217,.3);padding:4px 10px;border-radius:8px;margin-bottom:8px}
.bp-prod-cta{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;border-radius:12px;background:var(--grad-brand);color:#fff;font-size:.8rem;font-weight:800}
.woocommerce ul.products li.product.bp-prod--x .bp-prod-x{width:100%;height:100%}

/* ---- cart added modal ---- */
.bp-cartpop{position:fixed;inset:0;z-index:10002;background:rgba(4,12,11,.6);backdrop-filter:blur(8px);display:grid;place-items:center;padding:18px;opacity:0;transition:opacity .3s}
.bp-cartpop.open{opacity:1}
.bp-cartpop[hidden]{display:none}
.bp-cartpop-card{position:relative;width:min(440px,94vw);border-radius:26px;padding:30px 26px;text-align:center;background:var(--bg-elev);border:1px solid var(--border);box-shadow:0 50px 110px -30px rgba(0,0,0,.55);transform:translateY(18px) scale(.94);transition:transform .35s var(--ease)}
.bp-cartpop.open .bp-cartpop-card{transform:none}
.bp-cartpop-card::before{content:"";position:absolute;inset:0;border-radius:26px;padding:1.4px;background:var(--grad-brand);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.6}
.bp-cartpop-ic{width:64px;height:64px;margin:0 auto 12px;border-radius:50%;background:var(--grad-brand);display:grid;place-items:center;color:#fff;box-shadow:0 16px 40px -12px rgba(16,201,165,.65);animation:pop .5s var(--ease) both}
.bp-cartpop-ic svg{width:30px;height:30px}
.bp-cartpop-card h4{font-size:1.15rem;margin-bottom:4px;color:var(--text)}
.bp-cartpop-card p{color:var(--muted);font-size:.88rem;margin-bottom:16px}
.bp-cartpop-btns{display:flex;gap:10px}
.bp-cartpop-btns .btn{flex:1}
.bp-cartpop-x{margin-top:12px;background:none;border:none;color:var(--muted);font-size:.8rem;cursor:pointer;font-weight:700}
.bp-cartpop-x:hover{color:var(--orange)}
.bp-cartpop .drawer-close{position:absolute;top:14px;inset-inline-end:14px}

/* ---- admin panel mobile hero ---- */
@media (max-width:782px){
  .bp-admin-hero{flex-direction:column;align-items:flex-start;gap:12px}
  .bp-hero-actions{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .bp-chip-btn{flex:none}
}
/* ==========================================================================
   BaranPayam 1.1.2 — drawer spectrum, mobile footer, woo polish, cart FX
   ========================================================================== */
/* drawer: toggle at LEFT, title at right, spectrum glass submenu */
.drawer-tree li{margin:2px 0}
.drawer-tree li > a{padding-inline-end:56px;position:relative}
.dtoggle{inset-inline-end:6px;inset-inline-start:auto}
.drawer-subwrap{max-height:0;overflow:hidden;opacity:0;transition:max-height .42s var(--ease),opacity .3s var(--ease);margin:2px 6px 8px}
li.open > .drawer-subwrap{opacity:1}
.drawer-subwrap ul,.drawer-sub{list-style:none;margin:0;padding:8px;border-radius:18px}
.drawer-subwrap.sub-lv-1 ul,.drawer-sub.sub-lv-1{background:linear-gradient(160deg,rgba(16,201,165,.14),rgba(16,201,165,.04));border:1px solid rgba(16,201,165,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.drawer-sub .drawer-sub.sub-lv-2,li.open > .drawer-subwrap .sub-lv-2{background:linear-gradient(160deg,rgba(255,122,24,.13),rgba(255,122,24,.04));border:1px solid rgba(255,122,24,.28);margin:6px 8px}
.drawer-sub .drawer-sub.sub-lv-3{background:linear-gradient(160deg,rgba(124,245,217,.12),rgba(99,102,241,.08));border:1px solid rgba(124,245,217,.3);margin:6px 8px}
.drawer-subwrap a{border-radius:12px}
li.open > a,.dtoggle{--x:1}
li.open > .dtoggle{background:var(--grad-brand);color:#fff;border-color:transparent}
li.open > a{color:var(--turquoise-dark);font-weight:800}
[data-theme="dark"] li.open > a{color:var(--turquoise-light)}
.drawer-showall{display:flex;align-items:center;justify-content:center;gap:6px;margin:6px 6px 2px;padding:11px;border-radius:13px;font-size:.82rem;font-weight:800;color:#fff!important;background:linear-gradient(135deg,#10c9a5,#0aa78a);box-shadow:0 10px 24px -10px rgba(16,201,165,.6)}
.dtoggle--nav{background:linear-gradient(135deg,rgba(255,122,24,.18),rgba(16,201,165,.18))}
li.open .dttoggle--nav{transform:none}

/* audio art in player */
.bp-audio-art{width:min(240px,60vw);aspect-ratio:1;border-radius:26px;margin:0 auto;background:linear-gradient(135deg,rgba(255,122,24,.2),rgba(16,201,165,.2)) center/cover no-repeat;display:grid;place-items:center;color:#7cf5d9;box-shadow:0 30px 70px -24px rgba(0,0,0,.6);position:relative}
.bp-audio-art::after{content:"";position:absolute;inset:-14px;border-radius:36px;background:conic-gradient(from 0deg,transparent 60%,rgba(16,201,165,.5));animation:bpSpin 5s linear infinite;z-index:-1;filter:blur(14px)}
.bp-player-stage:has(.bp-audio-art){aspect-ratio:auto;height:64vh;min-height:380px;display:grid;place-content:center;gap:24px;padding:30px}

/* ---------- FOOTER 3 themes ---------- */
.site-footer{--f-bg:#040a09;--f-head:#fff;--f-text:#9db4ae;--f-link:#9db4ae;background:var(--f-bg);color:var(--f-text)}
.site-footer::before{background:var(--grad-brand)}
.site-footer.fs-night{background:linear-gradient(150deg,#030807 0%,#07211f 48%,#0a2a26 100%)}
.site-footer.fs-night::after{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(16,201,165,.14),transparent 70%);top:-220px;inset-inline-start:-120px;pointer-events:none}
.site-footer.fs-classic{background:#050b0a}
.site-footer.fs-minimal{background:#061210}
.site-footer.fs-minimal .footer-top{border-bottom:none}
.site-footer h4{color:var(--f-head,rgb(255 190 36))}
.site-footer .footer-col a,.site-footer .footer-brand p{color:var(--f-text)}
.site-footer .footer-col a:hover{color:var(--turquoise-light)}
.site-footer img{max-width:min(190px,44vw);height:auto;max-height:48px;object-fit:contain}
.footer-bottom{color:var(--f-text)}
.site-footer.fs-minimal .footer-top{gap:22px}
.site-footer.fp-bar{padding-bottom:74px}
@media (max-width:768px){.site-footer.fp-bar{padding-bottom:calc(84px + env(safe-area-inset-bottom))}}

/* mobile footer: glass accordion columns */
@media (max-width:768px){
  .footer-cols{display:grid;gap:10px}
  .footer-col{background:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.09);border-radius:18px;overflow:hidden}
  [data-theme="light"] .footer-col{background:linear-gradient(160deg,rgba(255,255,255,.7),rgba(255,255,255,.4));border-color:rgba(7,19,18,.08)}
  .footer-col h4{cursor:pointer;position:relative;margin:0;padding:15px 16px;display:flex;align-items:center;justify-content:space-between;font-size:.95rem}
  .footer-col h4::after{content:"";width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237cf5d9' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .3s var(--ease);flex:none}
  .footer-col.fopen h4::after{transform:rotate(180deg)}
  .footer-col ul{max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--ease),opacity .3s;padding-inline:16px;padding-bottom:0}
  .footer-col.fopen ul{max-height:420px;opacity:1;padding-bottom:14px}
  body:not(.bp-footer-acc) .footer-col ul{max-height:none;opacity:1;padding-bottom:6px}
}

/* mobile footer hide option */
body.bp-footer-hide-mob .site-footer{display:none}
@media (min-width:769px){body.bp-footer-hide-mob .site-footer{display:block}}

/* ---------- woo single product + related + cart FX ---------- */
.woocommerce div.product{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(22px,4vw,48px);align-items:start}
.woocommerce div.product .woocommerce-product-gallery{width:100%;position:sticky;top:calc(var(--header-h) + 20px)}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:24px;border:1px solid var(--border);box-shadow:var(--shadow)}
.woocommerce div.product .product_title{font-size:clamp(1.4rem,3vw,2rem)}
.woocommerce div.product .price{font-size:1.5rem}
.woocommerce div.product form.cart{margin:18px 0}
.woocommerce div.product .woocommerce-tabs{grid-column:1/-1;margin-top:34px}
.woocommerce .related ul.products,.woocommerce .up-sells ul.products{grid-template-columns:repeat(3,1fr)!important}
@media (max-width:768px){
  .woocommerce div.product{grid-template-columns:1fr}
  .woocommerce div.product .woocommerce-product-gallery{position:static}
  .woocommerce .related ul.products,.woocommerce .up-sells ul.products{grid-template-columns:1fr 1fr!important}
}
@media (max-width:560px){.woocommerce .related ul.products,.woocommerce .up-sells ul.products{grid-template-columns:1fr!important}}
@keyframes bpShake{0%,100%{transform:none}25%{transform:rotate(-12deg) scale(1.15)}60%{transform:rotate(10deg) scale(1.1)}}
.bp-cart-link.bump svg,.bp-cart-link.bump{animation:bpShake .55s var(--ease)}
.bp-cart-count.pop{animation:pop .45s var(--ease)}
/* ==========================================================================
   BaranPayam 1.1.3 — nav layout, current pill, header styles, contact modal
   ========================================================================== */
/* nav right after the logo with gap */
.main-nav{margin-inline-start:6px!important}
.main-nav > ul{gap:8px}
.main-nav a{border-radius:13px}
.main-nav li.current > a{background:linear-gradient(135deg,rgba(255,122,24,.16),rgba(16,201,165,.18));color:var(--orange);font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,122,24,.25)}
[data-theme="dark"] .main-nav li.current > a{color:var(--orange-light);background:linear-gradient(135deg,rgba(255,122,24,.22),rgba(16,201,165,.2))}
/* creative staggered open */
.main-nav ul ul{perspective:1100px}
.main-nav li:hover > ul > li,.main-nav li:focus-within > ul > li{animation:bpItemIn .5s var(--ease) both}
.main-nav li:hover > ul > li:nth-child(2){animation-delay:.05s}
.main-nav li:hover > ul > li:nth-child(3){animation-delay:.1s}
.main-nav li:hover > ul > li:nth-child(4){animation-delay:.15s}
.main-nav li:hover > ul > li:nth-child(5){animation-delay:.2s}
.main-nav li:hover > ul > li:nth-child(6){animation-delay:.25s}
@keyframes bpItemIn{from{opacity:0;transform:translateY(10px) rotateX(-14deg) scale(.96)}to{opacity:1;transform:none}}

/* header styles */
body.hs-strip .header-glass{border-radius:0;margin-top:0;border-inline:none;border-top:none;box-shadow:0 10px 30px -18px rgba(0,0,0,.4)}
body.hs-strip .container.header-inner{max-width:100%;padding-inline:18px}
body.hs-hero .header-glass{margin-inline:auto;max-width:980px;padding-inline:14px}
body.hs-hero .main-nav > ul{gap:2px}
body.hs-hero .main-nav a{padding:8px 11px;font-size:.9rem}

/* ---------- social unified component ---------- */
.bp-socials{--soc-gap:10px;--soc-size:20px;--soc-pad:10px;display:flex;gap:var(--soc-gap);align-items:center;justify-content:center;flex-wrap:wrap}
.bp-socials.sp-start{justify-content:flex-start}
.bp-socials.sp-end{justify-content:flex-end}
.bp-socials .bp-soc{display:inline-grid;place-items:center;padding:var(--soc-pad);border-radius:14px;background:rgba(16,201,165,.1);border:1px solid var(--border);color:var(--turquoise-dark);transition:.26s var(--ease);min-width:calc(var(--soc-size) + var(--soc-pad) * 2);min-height:calc(var(--soc-size) + var(--soc-pad) * 2)}
[data-theme="dark"] .bp-socials .bp-soc{color:var(--turquoise-light);background:rgba(16,201,165,.08)}
.bp-socials .bp-soc svg{width:var(--soc-size);height:var(--soc-size);color:var(--soc-ic,currentColor)}
.bp-socials .bp-soc img{width:var(--soc-size);height:var(--soc-size);object-fit:contain;display:block}
.bp-socials .bp-soc:hover{transform:translateY(-4px) scale(1.06);box-shadow:0 14px 30px -12px rgba(16,201,165,.55)}
.bp-socials.ss-circle .bp-soc{border-radius:50%}
.bp-socials.ss-square .bp-soc{border-radius:16px}
.bp-socials.ss-chip .bp-soc{border-radius:13px;display:inline-flex;gap:8px;padding:0 14px;min-height:44px;min-width:0}
.bp-socials.ss-chip .bp-soc span{font-size:.82rem;font-weight:800;white-space:nowrap}
.bp-socials.sb-solid .bp-soc{background:var(--soc-bg1,#0f2a27);border-color:transparent;color:var(--soc-ic,#eafaf6)}
.bp-socials.sb-gradient .bp-soc{background:linear-gradient(135deg,var(--orange),var(--turquoise));border-color:transparent;color:var(--soc-ic,#fff)}
.bp-socials.sb-gradient .bp-soc svg{color:#fff}
.drawer-socs{margin-top:14px}
.footer-socs{margin-top:16px}

/* ---------- 3D contact modal ---------- */
.bp-contact-modal{position:fixed;inset:0;z-index:10003;background:rgba(4,12,11,.78);backdrop-filter:blur(14px);display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .32s;perspective:1400px}
.bp-contact-modal.open{opacity:1}
.bp-contact-modal[hidden]{display:none}
.bpc-card{position:relative;width:min(560px,96vw);max-height:92vh;overflow:auto;border-radius:30px;padding:30px 28px 26px;background:linear-gradient(165deg,#0d2422,#081c1b 60%,#0a201d);color:#eafaf6;border:1px solid rgba(124,245,217,.22);box-shadow:0 60px 130px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.08);transform:translateY(26px) rotateX(9deg) scale(.95);transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.bp-contact-modal.open .bpc-card{transform:none}
.bpc-card::before{content:"";position:absolute;top:0;inset-inline:0;height:4px;background:var(--grad-brand)}
.bpc-card::after{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(16,201,165,.28),transparent 65%);top:-160px;inset-inline-start:-100px;pointer-events:none}
[data-theme="light"] body:not([data-theme]) .bpc-card{background:linear-gradient(165deg,#ffffff,#f2faf7 60%,#eaf6f2);color:#0a1614;border-color:rgba(16,201,165,.3)}
[data-theme="light"] .bpc-item{background:#fff}
.bpc-close{position:absolute;top:16px;inset-inline-end:16px;width:40px;height:40px;border-radius:13px;background:rgba(148,222,205,.1);border:1px solid rgba(148,222,205,.2);color:inherit;font-size:.9rem;cursor:pointer;z-index:2}
.bpc-head{text-align:center;margin-bottom:20px;position:relative}
.bpc-head h3{font-size:1.25rem}
.bpc-head p{color:inherit;opacity:.75;font-size:.88rem;margin-top:6px}
.bpc-orb{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;background:var(--grad-brand);box-shadow:0 18px 44px -12px rgba(16,201,165,.7);animation:float 5s ease-in-out infinite}
.bpc-orb::after{content:"";width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.9);display:block}
.bpc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:560px){.bpc-grid{grid-template-columns:1fr}}
.bpc-item{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(148,222,205,.16);color:inherit;transition:.3s var(--ease);transform-style:preserve-3d}
.bpc-item:hover{transform:translateY(-4px) rotateX(6deg);border-color:rgba(124,245,217,.5);box-shadow:0 22px 44px -18px rgba(0,0,0,.6)}
.bpc-ic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(255,122,24,.2),rgba(16,201,165,.2));color:var(--orange-light)}
[data-theme="light"] .bpc-ic{color:var(--orange)}
.bpc-item b{font-size:.85rem;opacity:.85}
.bpc-val{font-weight:900;font-size:1.02rem;direction:ltr;letter-spacing:.5px}
.bpc-socials{margin:18px 0 6px}
.bpc-cta{width:100%;margin-top:12px}

/* floating chips text fully visible */
.hero-float{white-space:normal;line-height:1.5;text-align:center;max-width:230px;border-radius:18px}
.hf-1,.hf-2,.hf-3{padding:9px 12px}
@media (max-width:768px){
  .hero-float{max-width:170px;font-size:.66rem!important;padding:7px 10px!important}
}
/* ==========================================================================
   BaranPayam 1.1.5 — header zones, widths, topbar, scroll-top, colors
   ========================================================================== */
/* header three zones */
.header-glass{gap:10px}
.hz{display:flex;align-items:center;min-width:0}
.hz-logo{width:var(--hz-logo,20%);flex:none}
.hz-nav{width:var(--hz-nav,52%);justify-content:flex-start}
.hz-act{width:var(--hz-act,28%);justify-content:flex-end;gap:8px;margin-inline-start:0}
.hz-act .btn,.hz-act .btn-icon,.hz-act .theme-switch,.hz-act .hamburger{flex:none}
.main-nav{margin-inline-start:0!important}
.main-nav>ul{overflow:visible}

/* widths */
.site-header .header-inner{max-width:var(--w-header,var(--container))}
.site-footer .container{max-width:var(--w-footer,var(--container))}
main .section>.container,main .section-tight>.container,main .stats-band .container{max-width:var(--w-content,var(--container))}

/* desktop dropdown: stacked rows */
.main-nav ul ul{display:block;padding:10px}
.main-nav ul ul li{display:block;width:100%}

/* ---------- announcement topbar (3 designs) ---------- */
.tb-bar{position:relative;z-index:9995;color:#fff;font-family:inherit}
.tb-in{max-width:var(--container);margin:0 auto;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 18px;flex-wrap:wrap}
.tb-left{display:flex;align-items:center;gap:12px;min-width:0}
.tb-txt{display:flex;flex-direction:column;line-height:1.5;min-width:0}
.tb-txt b{font-size:.95rem}
.tb-txt span{font-size:.76rem;opacity:.85}
.tb-pulse{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:rgba(255,255,255,.14);animation:tbFloat 3.2s ease-in-out infinite}
.tb-pulse svg{width:19px;height:19px}
@keyframes tbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.tb-right{display:flex;align-items:center;gap:10px}
.tb-x{width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;cursor:pointer}
.tb-x:hover{background:rgba(0,0,0,.25)}
.tb-timer{display:flex;gap:8px;align-items:center}
.tb-td{display:grid;justify-items:center;min-width:52px;padding:5px 6px;border-radius:13px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.15)}
.tb-td i{font-style:normal;font-weight:900;font-size:1.05rem;font-variant-numeric:tabular-nums}
.tb-td small{font-size:.6rem;opacity:.75}
.tb-g1{background:linear-gradient(120deg,#ff7a18,#ff9a3d 55%,#10c9a5)}
.tb-g1 .tb-btn{background:#0a1614;color:#fff}
.tb-g2{background:linear-gradient(150deg,#06100f,#0a2320 60%,#081c1b);border-bottom:1px solid rgba(124,245,217,.25)}
.tb-g2::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 60px at 85% 50%,rgba(16,201,165,.25),transparent);pointer-events:none}
.tb-g2 .tb-pulse{background:linear-gradient(135deg,rgba(255,122,24,.3),rgba(16,201,165,.3))}
.tb-g2 .tb-btn{background:var(--grad-brand)}
.tb-g3{background:rgba(255,255,255,.82);color:#0a1614;backdrop-filter:blur(14px);border-bottom:1px solid rgba(7,19,18,.08)}
[data-theme="dark"] .tb-g3{background:rgba(8,24,22,.75);color:#eafaf6;border-color:rgba(255,255,255,.08)}
.tb-g3 .tb-x{background:rgba(7,19,18,.06);border-color:rgba(7,19,18,.12);color:inherit}
.tb-g3 .tb-btn{background:var(--grad-brand);color:#fff}
.tb-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:12px;font-weight:800;font-size:.84rem;color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:.25s var(--ease)}
.tb-btn:hover{transform:translateY(-2px) scale(1.03)}
.tb-dev-d .tb-in{}
.tb-tb-hidden,.tb-bar.tb-closed{display:none!important}
@media (max-width:768px){
  .tb-dev-d{display:none}
  .tb-in{flex-direction:column;align-items:stretch;text-align:center;padding:9px 14px}
  .tb-left{justify-content:center}
  .tb-timer{justify-content:center}
  .tb-right{justify-content:center}
  .tb-x{position:absolute;top:6px;inset-inline-end:8px}
}
@media (min-width:769px){.tb-dev-m{display:none}}
body.has-topbar .site-header .header-glass{margin-top:8px}

/* ---------- scroll top ---------- */
.bp-top{position:fixed;bottom:24px;inset-inline-end:22px;z-index:940;width:48px;height:48px;border-radius:16px;display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(14px);transition:.35s var(--ease);background:var(--grad-brand);color:#fff;border:none;box-shadow:0 16px 38px -12px rgba(255,122,24,.6)}
.bp-top.show{opacity:1;visibility:visible;transform:none}
.bp-top svg{width:20px;height:20px;transform:rotate(90deg)}
.bp-top:hover{transform:translateY(-3px)}
@media (max-width:768px){
  .bp-top{bottom:calc(76px + env(safe-area-inset-bottom));inset-inline-end:auto;inset-inline-start:14px}
  body:not(.bp-has-actionbar) .bp-top{bottom:20px}
}

/* ---------- blog 4-up compact ---------- */
.bp-grid-4 .blog-card h3{font-size:.92rem;line-height:1.7}
.bp-grid-4 .blog-card p{font-size:.78rem}
.bp-grid-4 .blog-thumb svg{width:32px;height:32px}

/* ---------- CTA pair side by side ---------- */
.cta-pair{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cta-pair .cta-band{margin:0}
@media (max-width:820px){.cta-pair{grid-template-columns:1fr}}

/* ---------- footer zones: brand + 4 columns ---------- */
.footer-top{grid-template-columns:minmax(240px,1.35fr) minmax(0,4fr);align-items:start}
.footer-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px}
@media (max-width:1120px){.footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-top{grid-template-columns:1fr}}
@media (max-width:768px){.footer-top{display:block}.footer-brand{margin-bottom:18px}}

/* ---------- color fixes (light/dark contrast) ---------- */
.code-window .copy-code{color:#fff!important;background:rgba(255,255,255,.09)!important;border:1px solid rgba(255,255,255,.22)!important;box-shadow:none}
.code-window .copy-code:hover{background:var(--grad-brand)!important;border-color:transparent!important}
.otp-wrap h2,.otp-wrap h2 *{color:#fff!important}
.otp-wrap .btn-ghost{color:#fff;background: #00a49e;border-color:rgba(255,255,255,.28)}
.otp-wrap .btn-ghost:hover{border-color:var(--turquoise-light);box-shadow:0 12px 30px -12px rgba(16,201,165,.5)}
.discount-band h2,.discount-band h2 *{color:#fff!important}
.discount-band .btn-ghost{color:#fff}
.visual-frame .hero-float{color:#eafaf6!important;background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,255,255,.16)!important}
/* --- overrides (user-specified, v1.1.6) --- */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;justify-items:center;}
.section-head{max-width:800px;margin-inline:auto;margin-bottom:clamp(30px,5vw,52px);text-align:center}
code{font-family:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;background:transparent;border:1px solid var(--border);padding:1px 7px;border-radius:8px;font-size:.9em}
.otp-wrap .btn-ghost{color:#fff;background:#00a49e;border-color:rgba(255,255,255,.28)}
.countdown .cd b{font-size:1.3rem;font-variant-numeric:tabular-nums}
.site-footer h4{color:rgb(255 190 36)}
.brand img{height:55px;width:auto;max-width:min(168px,36vw);object-fit:contain;overflow:hidden}
.bp-featured img{width:min(600px,100%);height:auto}
.page-hero .bplive input{color:var(--text);background:var(--bg-elev);border-color:var(--border)}
.page-hero .bplive .bpl-ic{color:var(--turquoise-dark)}
.page-hero .bpa-count{background:var(--bg-soft);border:1px solid var(--border);color:var(--muted)}