/* Coming Soon Jouo — public v0.2 */
*,*::before,*::after{box-sizing:border-box}
html.jcs-html,body.jcs-body{overflow-x:hidden;
  margin:0;min-height:100%;
  font-family:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  color:#f5f0e8;
  background:#0a1814;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
}
.jcs-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(45,159,122,.22), transparent 55%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(230,57,70,.1), transparent 50%),
    linear-gradient(165deg,#0a1814 0%,#10241e 40%,#0d1f1a 100%);
}
.jcs-orb{
  position:absolute;border-radius:50%;filter:blur(40px);opacity:.55;
  animation:jcs-float 12s ease-in-out infinite;
}
.jcs-orb--a{width:280px;height:280px;top:-60px;right:-40px;background:rgba(45,159,122,.35);animation-delay:0s}
.jcs-orb--b{width:220px;height:220px;bottom:10%;left:-50px;background:rgba(26,122,92,.3);animation-delay:-4s}
.jcs-orb--c{width:160px;height:160px;top:40%;left:40%;background:rgba(230,57,70,.12);animation-delay:-7s}
.jcs-grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at center, #000 20%, transparent 75%);
  opacity:.5;
}
@keyframes jcs-float{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(12px,-18px) scale(1.05)}
}
@keyframes jcs-rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes jcs-pulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.85)}
}
.jcs-anim{opacity:0;animation:jcs-rise .7s cubic-bezier(.22,1,.36,1) forwards}
.jcs-anim-1{animation-delay:.05s}
.jcs-anim-2{animation-delay:.15s}
.jcs-anim-3{animation-delay:.28s}
.jcs-anim-4{animation-delay:.4s}
.jcs-anim-5{animation-delay:.52s}
.jcs-anim-6{animation-delay:.64s}

.jcs-main{
  position:relative;z-index:1;
  width:min(960px,100%);
  margin:0 auto;
  padding:clamp(1.75rem,5vw,3.25rem) clamp(1.15rem,3.5vw,1.85rem) 2.75rem;
  min-height:100dvh;min-height:100vh;
  display:flex;flex-direction:column;
  align-items:stretch;
  justify-content:center;
}
.jcs-top{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:clamp(2rem,5vw,3.5rem);
  width:100%;
}
.jcs-logo-badge{
  display:inline-flex;align-items:center;justify-content:center;
  height:30px;padding:0 14px;border-radius:999px;
  background:linear-gradient(135deg,#2d9f7a,#1a7a5c);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.05em;
  box-shadow:0 10px 28px rgba(45,159,122,.4);
}
.jcs-pill{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:700;color:rgba(245,240,232,.7);
  border:1px solid rgba(245,240,232,.14);
  padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(8px);
}
.jcs-pulse{
  width:8px;height:8px;border-radius:50%;
  background:#2d9f7a;box-shadow:0 0 0 0 rgba(45,159,122,.5);
  animation:jcs-pulse 1.8s ease-in-out infinite;
}

.jcs-intro{
  width:100%;
  max-width:36rem;
  margin:0 auto clamp(1.85rem,4.5vw,3rem);
  text-align:center;
}
.jcs-intro h1{
  margin:0 0 .85rem;
  font-size:clamp(1.7rem,4.8vw,2.55rem);
  font-weight:900;line-height:1.3;color:#f5f0e8;
  letter-spacing:-.01em;
}
.jcs-intro p{
  margin:0;font-size:clamp(.95rem,2.2vw,1.12rem);
  line-height:1.9;color:#c8c0b4;
}

/* Cards grid — one centered */
.jcs-cards{
  display:grid;gap:1.1rem;
  width:100%;
  margin:0 auto auto;
  padding-bottom:2rem;
  justify-content:center;
  align-items:stretch;
}
.jcs-cards--one{
  grid-template-columns:minmax(0,400px);
  justify-content:center;
  justify-items:center;
}
.jcs-cards--two{
  grid-template-columns:repeat(2,minmax(0,1fr));
  max-width:760px;
  margin-left:auto;margin-right:auto;
}
.jcs-cards--many{
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:960px;
}

.jcs-card{
  position:relative;
  width:100%;
  padding:1.45rem 1.3rem 1.35rem;
  border-radius:20px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.22);
  transition:transform .3s ease,border-color .3s ease,background .3s ease,box-shadow .3s ease;
}
.jcs-card:hover{
  transform:translateY(-5px);
  border-color:rgba(45,159,122,.5);
  background:rgba(255,255,255,.1);
  box-shadow:0 28px 60px rgba(0,0,0,.28);
}
.jcs-card-badge{
  display:inline-block;
  margin-bottom:.7rem;
  padding:4px 11px;border-radius:999px;
  font-size:10px;font-weight:800;
  background:rgba(45,159,122,.22);color:#8dffc8;
  border:1px solid rgba(45,159,122,.4);
  letter-spacing:.02em;
}
.jcs-card h2{
  margin:0 0 .5rem;font-size:1.2rem;font-weight:800;color:#f5f0e8;
}
.jcs-card p{
  margin:0 0 1.15rem;font-size:.94rem;line-height:1.75;color:#c8c0b4;
}
.jcs-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:.6rem 1.2rem;border-radius:999px;
  background:linear-gradient(135deg,#e63946,#c62828);
  color:#fff;font-size:.9rem;font-weight:800;
  text-decoration:none;
  box-shadow:0 10px 24px rgba(230,57,70,.28);
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.jcs-btn:hover{
  background:linear-gradient(135deg,#0d1f1a,#1a2e28);
  color:#fff;transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(0,0,0,.3);
}
.jcs-btn svg{transform:scaleX(-1)}

.jcs-foot{
  margin-top:1.75rem;padding-top:1.35rem;
  border-top:1px solid rgba(255,255,255,.08);
  text-align:center;width:100%;
}
.jcs-foot p{margin:0;font-size:.82rem;color:rgba(200,192,180,.5);line-height:1.65}

@media (max-width:720px){
  .jcs-main{padding:1.25rem 1rem 1.5rem;min-height:100dvh;justify-content:flex-start}
  .jcs-intro{margin-bottom:1.25rem}
  .jcs-top{margin-bottom:1.25rem}
  .jcs-cards{padding-bottom:1rem;margin-bottom:0}
  .jcs-orb{opacity:.35;filter:blur(28px)}
  .jcs-cards--two{grid-template-columns:1fr;max-width:420px}
  .jcs-cards--one{grid-template-columns:minmax(0,1fr);max-width:420px;margin-left:auto;margin-right:auto}
}
@media (prefers-reduced-motion:reduce){
  .jcs-anim,.jcs-orb,.jcs-pulse{animation:none!important;opacity:1}
}

html.jcs-html{height:100%;}
body.jcs-body{min-height:100%;min-height:100dvh;overflow-x:hidden;overflow-y:auto;}
@supports (height:100dvh){
  .jcs-main{min-height:100dvh;}
}