/* zone — product UI (Linear / Stripe / Vercel language) */
:root{
  --ink:#f4f4f5;
  --ink2:#a1a1aa;
  --ink3:#71717a;
  --line:rgba(255,255,255,.08);
  --line2:rgba(255,255,255,.14);
  --fill:#242736;
  --fill2:#2c3042;
  --jade:#34d399;
  --jade-2:#6ee7b7;
  --or:#34d399;
  --or-l:#6ee7b7;
  --or-ll:#a7f3d0;
  --gold:#34d399;
  --gold-l:#6ee7b7;
  --gg:linear-gradient(180deg,#34d399,#10b981);
}

html,body{
  background:
    radial-gradient(980px 560px at 88% -12%, rgba(196,165,116,.22), transparent 58%),
    radial-gradient(780px 520px at -8% 18%, rgba(99,102,241,.18), transparent 52%),
    radial-gradient(720px 480px at 55% 108%, rgba(56,189,248,.10), transparent 58%),
    #1a1c28 !important;
  color:var(--ink);
  cursor:auto !important;
  font-family:'Tajawal',ui-sans-serif,system-ui,sans-serif !important;
}
body,body *{cursor:auto !important}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 10%,transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 10%,transparent 72%);
}
.vignette{display:none !important}
#key-cursor,.cur-ring,.cur-dot,
.cinema-aurora,.cinema-spot,.cinema-grain,#cinema-veil,
.luxe-cube-scene,.space-rings,.hero-coin-bg,.hero-key-icon,
.nebula,.stars-layer,.shoot-wrap,.falling-keys-wrap,#space-dust,
.orb,#bg-canvas,#zone-depth,.cinema-trail,.cinema-ticker{display:none !important}

#fall-stars{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:.55}
.fall-star{
  position:absolute;top:-12px;width:2px;height:2px;border-radius:50%;
  background:#fff;box-shadow:0 0 5px rgba(255,255,255,.5);
  animation:fallStar var(--d,12s) linear infinite;animation-delay:var(--dl,0s);opacity:0;
}
.fall-star.gold{background:#d4d4d8;box-shadow:0 0 6px rgba(212,212,216,.5)}
.fall-star.mint{background:#6ee7b7;box-shadow:0 0 6px rgba(52,211,153,.45)}
.fall-star.streak{
  width:1px;height:38px;border-radius:99px;
  background:linear-gradient(180deg,#fff,transparent);box-shadow:none;
}
@keyframes fallStar{
  0%{transform:translate3d(0,-16px,0);opacity:0}
  12%{opacity:var(--o,.6)}
  90%{opacity:var(--o,.45)}
  100%{transform:translate3d(var(--x,12px),110vh,0);opacity:0}
}

#pg-load{background:#1a1c28 !important}
.pl-logo{
  font-family:'Tajawal',sans-serif !important;letter-spacing:.28em !important;
  background:none !important;-webkit-text-fill-color:#fafafa !important;color:#fafafa !important;
  animation:none !important;filter:none !important;
}
.pl-spin{border-color:rgba(255,255,255,.1) !important;border-top-color:#34d399 !important;box-shadow:none !important}

html body .topbar{
  height:60px !important;
  background:rgba(22,24,38,.82) !important;
  backdrop-filter:blur(18px) saturate(1.2) !important;
  border-bottom:1px solid var(--line) !important;
  box-shadow:none !important;
}
html body .topbar::after{display:none !important}
html body .logo-name{
  font-family:'Tajawal',sans-serif !important;letter-spacing:.02em !important;font-size:15px !important;
  background:none !important;-webkit-text-fill-color:#fafafa !important;animation:none !important;
}
html body .logo-sub{display:none !important}
html body .logo-coin{
  width:34px !important;height:34px !important;border-radius:10px !important;
  animation:none !important;border:1px solid var(--line2) !important;box-shadow:none !important;
}
html body .nav-pills{
  background:rgba(255,255,255,.04) !important;border:1px solid var(--line) !important;
  border-radius:12px !important;padding:3px !important;box-shadow:none !important;
}
html body .npill{
  color:#a1a1aa !important;border:none !important;border-radius:9px !important;
  box-shadow:none !important;font-weight:600 !important;
}
html body .npill:hover{color:#fafafa !important;background:rgba(255,255,255,.06) !important}
html body .npill.active,
html body .npill.fix-pill.active,
html body .npill.admin-pill.active{
  color:#09090b !important;
  background:#f4f4f5 !important;
  border:none !important;box-shadow:none !important;
}
html body .login-topbar-btn{
  background:#34d399 !important;color:#052e1c !important;border-radius:10px !important;
  box-shadow:none !important;
}
html body .login-topbar-btn:hover{filter:brightness(1.06);transform:none !important}

html body .hero{
  max-width:1120px !important;margin:0 auto !important;
  display:grid !important;grid-template-columns:1.05fr .95fr !important;
  gap:56px !important;align-items:center !important;text-align:start !important;
  padding:88px 28px 48px !important;perspective:none !important;
}
html body .hero-copy{position:relative;z-index:2}
html body .hero-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px}
html body .hero-badge,html body .hero-live,html body .hero-eyebrow{
  margin:0 !important;padding:5px 10px !important;border-radius:999px !important;
  font:600 11px/1 'JetBrains Mono',monospace !important;letter-spacing:.12em !important;
  background:rgba(255,255,255,.04) !important;border:1px solid var(--line) !important;
  color:#a1a1aa !important;box-shadow:none !important;
}
html body .hero-title{
  font-family:'Tajawal',sans-serif !important;font-weight:800 !important;
  font-size:clamp(34px,5vw,58px) !important;line-height:1.12 !important;
  letter-spacing:-.04em !important;color:#fafafa !important;
  background:none !important;-webkit-text-fill-color:#fafafa !important;
  filter:none !important;animation:none !important;text-shadow:none !important;
  overflow:visible !important;margin:0 0 16px !important;
}
html body .hero-title::after{display:none !important}
html body .hero-sub{
  margin:0 0 28px !important;max-width:460px !important;
  margin-left:0 !important;margin-right:0 !important;
  font-size:16px !important;color:#a1a1aa !important;line-height:1.7 !important;
}
html body .hero-btns,html body .hero-actions-top{
  display:flex !important;justify-content:flex-start !important;flex-wrap:wrap !important;
  gap:8px !important;margin:0 0 14px !important;
}
html body .btn-gold,html body .act-chip.primary,html body .act-btn,html body .act-btn:not(.fix-act),html body .local-btn{
  background:#34d399 !important;color:#052e1c !important;border:none !important;
  border-radius:10px !important;box-shadow:none !important;animation:none !important;font-weight:700 !important;
}
html body .btn-outline-gold,html body .btn-ghost,html body .act-chip:not(.primary){
  background:transparent !important;border:1px solid var(--line2) !important;
  color:#e4e4e7 !important;border-radius:10px !important;box-shadow:none !important;
}
html body .btn-gold:hover,html body .btn-outline-gold:hover,html body .btn-ghost:hover,html body .act-chip:hover,html body .act-btn:not(:disabled):hover{
  transform:translateY(-1px) !important;
}
html body .act-btn.fix-act,#tab-fix .act-btn.fix-act{
  background:#f4f4f5 !important;color:#09090b !important;
}
.shield-bar{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;
  background:transparent;border:1px solid var(--line);color:#71717a;
  font:600 11px/1 'JetBrains Mono',monospace;
}
.shield-bar i{color:#34d399}

.hero-stage{position:relative;min-height:340px;perspective:1000px}
.stage-card{
  position:relative;min-height:340px;padding:22px;border-radius:20px;
  background:#242736;border:1px solid var(--line2);
  box-shadow:0 30px 80px rgba(0,0,0,.45);
  overflow:hidden;transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .2s ease;
}
.stage-card.is-tilt{border-color:rgba(52,211,153,.35);transition:border-color .2s}
.stage-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(380px circle at var(--gx,50%) var(--gy,40%), rgba(255,255,255,.1), transparent 42%);
  opacity:0;transition:opacity .2s;
}
.stage-card.is-tilt::after{opacity:1}
.stage-orb{
  position:absolute;width:200px;height:200px;right:-40px;bottom:-50px;
  background:radial-gradient(circle,rgba(52,211,153,.16),transparent 68%);
  filter:blur(10px);pointer-events:none;
}
.stage-top{
  display:flex;justify-content:space-between;align-items:center;
  font:11px/1 'JetBrains Mono',monospace;letter-spacing:.16em;color:#71717a;margin-bottom:22px;
}
.stage-dots{display:flex;gap:6px}
.stage-dots i{width:8px;height:8px;border-radius:50%;background:#27272a;display:block}
.stage-dots i:first-child{background:#f87171}
.stage-dots i:nth-child(2){background:#fbbf24}
.stage-dots i:nth-child(3){background:#34d399}
.stage-file,.stage-row{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:12px;margin-bottom:14px;
  background:#2c3042;border:1px solid var(--line);
}
.stage-file{transform:translateZ(24px)}
.stage-file b{display:block;font-size:13px}
.stage-file span{display:block;margin-top:3px;font:10px/1 'JetBrains Mono',monospace;color:#71717a}
.stage-bar{
  height:4px;border-radius:99px;margin:4px 2px 18px;background:#27272a;overflow:hidden;transform:translateZ(18px);
}
.stage-bar em{
  display:block;height:100%;width:12%;border-radius:99px;position:relative;
  background:linear-gradient(90deg,#52525b,#34d399);
  animation:stageFill 3.2s ease-in-out infinite;
}
.stage-bar em::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  animation:stageSheen 1.6s linear infinite;
}
@keyframes stageFill{0%{width:10%}60%{width:88%}80%{width:100%}100%{width:12%}}
@keyframes stageSheen{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.stage-rows{display:flex;flex-direction:column;gap:8px;transform:translateZ(20px)}
.stage-row{justify-content:space-between;margin:0;font-size:13px}
.stage-row strong{font:600 11px/1 'JetBrains Mono',monospace;color:#34d399;text-transform:lowercase}

html body .main,html body .login-page,html body .site-footer{position:relative;z-index:1}
html body .stats-strip{
  max-width:1120px;margin:0 auto 40px;border:1px solid var(--line) !important;
  border-radius:16px;background:#242736 !important;backdrop-filter:none;
  overflow:hidden;
}
html body .stats-strip::before{display:none !important}
html body .stat-block:hover{background:rgba(255,255,255,.03) !important}
html body .stat-n{
  background:none !important;-webkit-text-fill-color:#fafafa !important;color:#fafafa !important;
  text-shadow:none !important;font-size:30px !important;
}
html body .stat-l{color:#71717a !important}
html body .section{max-width:1120px}
html body .sec-tag{
  color:#a1a1aa !important;background:transparent !important;border:1px solid var(--line) !important;
}
html body .sec-title{font-family:'Tajawal',sans-serif !important;font-weight:800 !important}

html body .feat-card,html body .step-card,html body .plan-card,html body .card,html body .sc,
html body .gate-box,html body .login-box,html body .panel,html body .astat,
html body .zone-recover-card,html body .footer-member,html body .plan-limit-card{
  background:#242736 !important;backdrop-filter:none !important;
  border:1px solid rgba(255,255,255,.12) !important;box-shadow:none !important;border-radius:16px !important;
}
html body .feat-card::after,html body .plan-card::after,html body .step-card::after{display:none !important}
html body .feat-card:hover,html body .plan-card:hover,html body .step-card:hover{
  transform:translateY(-2px) !important;border-color:var(--line2) !important;
}
html body .plan-card.popular{
  transform:none !important;border-color:rgba(52,211,153,.4) !important;background:#242736 !important;
}
html body .plan-pop{background:#34d399 !important;color:#052e1c !important;box-shadow:none !important}
html body .plan-price{background:none !important;-webkit-text-fill-color:#fafafa !important;color:#fafafa !important}
html body .fc-ico,html body .step-num,html body .panel-ico,html body .gate-ico{
  animation:none !important;background:#2c3042 !important;color:#34d399 !important;
  border:1px solid var(--line) !important;box-shadow:none !important;
}
html body .inp,html body .input-group input{
  background:#2c3042 !important;border:1px solid var(--line2) !important;color:#fafafa !important;border-radius:10px !important;
}
html body .inp:focus,html body .input-group input:focus{
  border-color:#34d399 !important;box-shadow:0 0 0 3px rgba(52,211,153,.15) !important;
}
html body .km{border-radius:12px !important;background:#1a1c28 !important}
html body .km.sel{border-color:rgba(52,211,153,.4) !important;background:rgba(52,211,153,.08) !important}
html body .upzone,html body .gen-up-zone{
  animation:none !important;background:#1a1c28 !important;
  border:1px dashed var(--line2) !important;border-radius:16px !important;
}
html body .upzone:hover,html body .upzone.drag,html body .gen-up-zone:hover{
  border-color:#34d399 !important;background:rgba(52,211,153,.05) !important;
}
html body .upzone::before,html body .gen-up-zone::before{display:none !important}
html body .site-footer{
  background:transparent !important;border-top:1px solid var(--line) !important;
}
html body .site-footer::before{display:none !important}
html body .hist-item{background:#2c3042 !important;border-color:var(--line) !important}
html body .tab.active{animation:suiteIn .28s ease both}
@keyframes suiteIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

html body.access-body .login-page.access-shell{
  display:block !important;min-height:auto !important;padding:72px 24px 12px !important;
}
.access-grid{
  width:min(1040px,100%);margin:0 auto;
  display:grid;grid-template-columns:1fr min(400px,100%);gap:72px;align-items:center;
}
.access-brand{text-align:start}
.access-kicker{
  font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.22em;color:#71717a;margin-bottom:16px;text-transform:uppercase;
}
html body.access-body .login-logo-text{text-align:start;margin-bottom:28px}
html body.access-body .login-coin{
  margin:0 0 16px;width:56px;height:56px;border-radius:14px;animation:none !important;box-shadow:none !important;
  border:1px solid var(--line2);
}
html body.access-body .login-brand{
  font-size:40px !important;letter-spacing:-.03em !important;
  color:#fafafa !important;-webkit-text-fill-color:#fafafa !important;background:none !important;
}
html body.access-body .login-tagline{font-size:15px;max-width:380px;color:#a1a1aa}
html body.access-body .login-feat{
  background:#242736;border:1px solid var(--line);border-radius:14px;padding:12px 14px;
}
html body.access-body .login-feat:hover{transform:none;border-color:var(--line2)}
html body.access-body .login-wrap{max-width:none;animation:none}
.access-chip{font:600 11px/1 'Tajawal',sans-serif;letter-spacing:.02em;color:#a1a1aa;margin-bottom:12px}
html body.access-body .login-box{
  background:#242736 !important;border:1px solid var(--line) !important;border-radius:18px !important;padding:24px !important;
}
html body .lang-card{border-radius:12px !important;background:#242736 !important}
html body .lang-card.active,html body .auth-tab.active{
  border-color:rgba(52,211,153,.4) !important;background:rgba(52,211,153,.1) !important;color:#6ee7b7 !important;
}
html body .auth-tab{border-radius:10px !important}
html body .dc-btn{border-radius:10px !important}

#tab-decrypt .vault-panel,#tab-fix .mesh-panel,#tab-files .panel,#tab-admin .panel{
  background:transparent !important;box-shadow:none !important;border:none !important;padding-top:20px;
}
html body .gate-wrap{justify-content:center;width:100%}
html body .gate-wrap.is-off,
html body #dgate[style*="none"],
html body #fgate[style*="none"]{display:none !important}
html body .gate-box{
  max-width:420px !important;margin:48px auto !important;text-align:center !important;
}
html body .gate-box::before{display:none !important}
.vault-rail{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px}
.vault-rail span{
  font:600 11px/1 'Tajawal',sans-serif;padding:6px 12px;border-radius:999px;
  background:#242736;border:1px solid var(--line);color:#a1a1aa;
}
.vault-drop{
  min-height:200px !important;background:#1a1c28 !important;
  border:1px dashed var(--line2) !important;border-radius:16px !important;
}
.vault-keys{display:grid !important;grid-template-columns:repeat(3,1fr);gap:8px}
.vault-keys .km{flex-direction:column;align-items:flex-start;min-height:88px}
.vault-run{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vault-run .act-btn{margin-top:8px;border-radius:10px !important}

.mesh-pipe{
  display:grid;grid-template-columns:auto repeat(3,1fr);gap:8px;align-items:center;
  margin-bottom:20px;padding:12px;border-radius:16px;background:#242736;border:1px solid var(--line);
}
.mesh-pipe-title{font:700 12px/1 'Tajawal',sans-serif;color:#a1a1aa;padding:0 8px}
.mesh-step{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#2c3042}
.mesh-step b{
  width:22px;height:22px;border-radius:7px;flex:none;display:grid;place-items:center;
  background:#f4f4f5;color:#09090b;font-size:11px;
}
.mesh-step div{font-size:12px;font-weight:700}
.mesh-step small{display:block;margin-top:3px;font-size:11px;color:#71717a;font-weight:500}
.mesh-drop{
  min-height:220px !important;background:#1a1c28 !important;
  border:1px dashed var(--line2) !important;border-radius:16px !important;
}
#tab-fix .panel-ico.fix,#tab-fix .upzone-ico.o{color:#e4e4e7 !important}

@media (max-width:900px){
  html body .hero{grid-template-columns:1fr !important;padding:56px 18px 36px !important;text-align:center !important;gap:28px !important}
  html body .hero-sub,html body .hero-btns,html body .hero-actions-top,html body .hero-kicker{justify-content:center !important;margin-left:auto !important;margin-right:auto !important}
  html body .hero-stage{order:-1}
  .access-grid{grid-template-columns:1fr;gap:28px}
  html body.access-body .login-logo-text,html body.access-body .access-brand{text-align:center}
  html body.access-body .login-coin{margin:0 auto 16px}
  html body.access-body .login-tagline{margin-inline:auto}
  .vault-keys,.vault-run,.mesh-pipe{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html body .tab.active{animation:none !important}
  .stage-bar em{animation:none;width:78%}
  .stage-card,.stage-card.is-tilt{transform:none !important}
  .fall-star{animation:none !important;opacity:.4}
}