/* ═══════════════════════════════════════════════════════════════
   درون — طراحیِ سایت (darooon.space)

   روی app.css سوار می‌شود (رنگ‌ها و فونت و تم از همان‌جاست) و فقط روی میزبانِ سایت بار می‌شود
   (dr_head). همه‌ی کلاس‌ها پیشوندِ sx- دارند تا با کلاس‌های اپ و صفحه‌های قدیمی نخورند.

   اصل‌ها: صفحه به‌جای کارت، خطِ مو به‌جای قاب، یک رنگِ تأکید (--accent) فقط برای کنش،
   چیزِ کم و جای خالیِ زیاد. هر بخش یک کار می‌کند.
   ═══════════════════════════════════════════════════════════════ */

:root{--sx-max:1080px;--sx-r:22px}

.sx-wrap{max-width:var(--sx-max);margin-inline:auto;padding-inline:var(--gut)}
.sx-sec{padding-block:88px 0}
.sx-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent);margin-bottom:14px}
.sx-tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.sx-h2{font-size:clamp(26px,3.6vw,40px);line-height:1.28;font-weight:600;letter-spacing:0}
.sx-lead{color:var(--sub);font-size:17.5px;margin-top:16px;max-width:34em}

/* ——— دکمه‌ها ——— */
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 24px;border-radius:14px;
  background:var(--accent);color:var(--accent-ink);font-size:16px;font-weight:600;border:1px solid transparent;
  transition:filter .18s,transform .18s,background .18s,border-color .18s}
.sx-btn:hover{filter:brightness(1.07)}
.sx-btn:active{transform:translateY(1px)}
.sx-btn.ghost{background:none;color:var(--fg);border-color:var(--hair-2)}
.sx-btn.ghost:hover{background:var(--bg-2);filter:none}
.sx-btn.sm{height:38px;padding:0 16px;font-size:14px;border-radius:11px}

/* ——— هدر ——— */
.sx-head{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--hair)}
.sx-bar{display:flex;align-items:center;gap:22px;height:66px}
.sx-brand{display:block;width:76px;color:var(--fg);flex:none}
.sx-brand svg{display:block;width:100%;height:auto}
.sx-nav{display:flex;align-items:center;gap:4px;margin-inline-end:auto}
.sx-nav a{color:var(--sub);font-size:15px;padding:8px 13px;border-radius:10px;transition:color .18s,background .18s}
.sx-nav a:hover{color:var(--fg);background:var(--bg-2)}
.sx-nav a[aria-current]{color:var(--fg);font-weight:600}
.sx-tools{display:flex;align-items:center;gap:10px;margin-inline-start:auto}
.sx-nav + .sx-tools{margin-inline-start:0}
.sx-link{color:var(--sub);font-size:14.5px;padding:8px 10px;border-radius:10px}
.sx-link:hover{color:var(--fg)}
.sx-ic,.sx-menu summary{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;color:var(--sub);cursor:pointer;list-style:none;transition:color .18s,background .18s}
.sx-ic:hover,.sx-menu summary:hover{color:var(--fg);background:var(--bg-2)}
.sx-ic svg{width:18px;height:18px}
.sx-menu{position:relative;display:none}
.sx-menu summary::-webkit-details-marker{display:none}
.sx-sheet{position:absolute;inset-inline-end:0;top:46px;min-width:210px;padding:8px;border-radius:16px;
  background:var(--bg-2);border:1px solid var(--hair-2);box-shadow:0 18px 50px rgba(0,0,0,.35);display:flex;flex-direction:column}
.sx-sheet a{padding:11px 14px;border-radius:10px;font-size:15px;color:var(--fg)}
.sx-sheet a:hover{background:var(--hair)}
.sx-sheet hr{border:0;height:1px;background:var(--hair);margin:6px 8px}
.sx-who{display:inline-flex}
.sx-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-size:14px;font-weight:600;
  background:color-mix(in srgb,var(--avc,#888) 24%,var(--bg-2));color:var(--avc,var(--fg))}

/* ——— هیرو ——— */
.sx-hero{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;padding-block:64px 0}
.sx-kick{font-size:14px;font-weight:600;color:var(--accent);margin-bottom:18px}
.sx-hero h1{font-size:clamp(32px,4.6vw,52px);line-height:1.22;font-weight:600;letter-spacing:0}
.sx-hero h1 em{font-style:normal;color:var(--accent)}
.sx-hero .sx-lead{font-size:18.5px;max-width:30em}
.sx-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.sx-fine{margin-top:18px;font-size:13.5px;color:var(--faint)}

/* ——— قابِ گوشی ——— */
.sx-phone{position:relative;width:var(--w,260px);flex:none;border-radius:38px;padding:7px;background:#0c0c0d;
  border:1px solid var(--hair-2);box-shadow:0 30px 80px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.03) inset}
.sx-phone img{display:block;width:100%;height:auto;border-radius:31px;background:#141416}
:root[data-theme="paper"] .sx-phone{box-shadow:0 30px 70px rgba(50,50,50,.22)}

.sx-stage{position:relative;height:600px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 78%,transparent);mask-image:linear-gradient(#000 78%,transparent)}
.sx-stage::before{content:"";position:absolute;inset:6% 4% auto;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 22%,transparent),transparent);filter:blur(10px)}
.sx-stage .sx-phone{position:absolute;left:50%;top:18px;transform:translateX(-50%)}
.sx-stage .p1{--w:272px;z-index:3}
.sx-stage .p1{transform:translateX(calc(-50% + 70px))}
.sx-stage .p2{--w:226px;z-index:2;top:84px;transform:translateX(calc(-50% - 150px))}

/* ——— قابلیت‌ها ——— */
.sx-feat{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px;padding-block:80px 0}
.sx-feat + .sx-feat{border-top:1px solid var(--hair);margin-top:80px}
.sx-feat.rev .sx-copy{order:2}
.sx-list{list-style:none;margin-top:28px;padding:0;display:flex;flex-direction:column}
.sx-list li{padding-block:15px;border-top:1px solid var(--hair)}
.sx-list li:last-child{border-bottom:1px solid var(--hair)}
.sx-list b{display:block;font-weight:600;font-size:16px}
.sx-list span{display:block;color:var(--sub);font-size:15px;margin-top:2px}
.sx-pane{position:relative;display:flex;justify-content:center;align-items:flex-start;height:520px;overflow:hidden;
  border-radius:var(--sx-r);background:var(--bg-2);border:1px solid var(--hair);padding-top:40px}
.sx-pane::before{content:"";position:absolute;inset:auto 10% -30% 10%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent)}
.sx-pane .sx-phone{--w:268px;position:relative}
.sx-pane::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(transparent,var(--bg-2))}

/* ——— و باز هم ——— */
.sx-more{display:grid;grid-template-columns:repeat(3,1fr);margin-top:36px;border-top:1px solid var(--hair)}
.sx-more > div{padding:26px 22px 26px 0;border-bottom:1px solid var(--hair)}
.sx-more .ic{display:block;width:26px;height:26px;color:var(--accent);margin-bottom:12px}
.sx-more svg{width:100%;height:100%}
.sx-more b{display:block;font-weight:600;font-size:16.5px}
.sx-more span{display:block;color:var(--sub);font-size:14.5px;margin-top:4px}

/* ——— قول ——— */
.sx-promise{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:36px}
.sx-promise b{display:block;font-size:19px;font-weight:600}
.sx-promise span{display:block;color:var(--sub);font-size:14.5px;margin-top:6px}
.sx-more-link{display:inline-block;margin-top:26px;color:var(--accent);font-weight:600;font-size:15px}
.sx-more-link:hover{text-decoration:underline;text-underline-offset:5px}

/* ——— پادپخش ——— */
.sx-pod{display:grid;grid-template-columns:200px 1fr;gap:36px;align-items:center;padding:30px;border-radius:var(--sx-r);
  background:var(--bg-2);border:1px solid var(--hair);margin-top:34px}
.sx-pod img{width:200px;height:200px;border-radius:16px;object-fit:cover}
.sx-pod .k{font-size:13px;color:var(--faint)}
.sx-pod h3{font-size:24px;font-weight:600;line-height:1.35;margin-top:4px}
.sx-pod p{color:var(--sub);margin-top:6px;font-size:15.5px}
.sx-pod .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.sx-pod-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:20px;font-size:15px}
.sx-pod-links a{color:var(--accent);font-weight:600}
.sx-pod-links a:hover{text-decoration:underline;text-underline-offset:5px}

/* ——— تیم و فراخوان ——— */
.sx-team{text-align:center;max-width:620px;margin-inline:auto}
.sx-team .sx-lead{margin-inline:auto}
.sx-final{margin-top:96px;padding:64px 28px;border-radius:28px;text-align:center;background:var(--bg-2);border:1px solid var(--hair);position:relative;overflow:hidden}
.sx-final::before{content:"";position:absolute;inset:-40% 20% auto;height:90%;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 18%,transparent),transparent)}
.sx-final > *{position:relative}
.sx-final .sx-lead{margin-inline:auto}
.sx-final .sx-cta{justify-content:center}

/* ——— پا ——— */
.sx-foot{margin-top:110px;border-top:1px solid var(--hair);padding:44px 0 40px}
.sx-foot-top{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.sx-foot-brand a{display:block;width:84px;color:var(--fg)}
.sx-foot-brand svg{display:block;width:100%;height:auto}
.sx-foot-brand p{margin-top:12px;color:var(--sub);font-size:14.5px}
.sx-soc{display:flex;gap:4px}
.sx-soc a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--sub);transition:color .18s,background .18s}
.sx-soc a:hover{color:var(--fg);background:var(--bg-2)}
.sx-soc svg{width:22px;height:22px}
.sx-foot-bot{display:flex;align-items:center;justify-content:space-between;gap:14px 24px;flex-wrap:wrap;margin-top:34px;padding-top:22px;
  border-top:1px solid var(--hair);font-size:13.5px;color:var(--faint)}
.sx-foot-bot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.sx-foot-bot a{color:var(--sub)}
.sx-foot-bot a:hover{color:var(--fg)}

/* ——— صفحه‌های متنی (درباره، تماس، حریم) ——— */
.page-doc .doc{padding-block:56px 0}
.sx-foot{margin-top:90px}

/* ——— گوشی و تبلت ——— */
@media (max-width:900px){
  .sx-nav{display:none}
  .sx-menu{display:block}
  .sx-tools{margin-inline-start:auto}
  .sx-hero{grid-template-columns:1fr;gap:20px;padding-block:44px 0}
  .sx-stage{height:480px}
  .sx-stage .p1{--w:236px}
  .sx-stage .p1{transform:translateX(calc(-50% + 40px))}
  .sx-stage .p2{--w:190px;top:64px;transform:translateX(calc(-50% - 130px))}
  .sx-feat{grid-template-columns:1fr;gap:34px;padding-block:60px 0}
  .sx-feat + .sx-feat{margin-top:60px}
  .sx-feat.rev .sx-copy{order:0}
  .sx-pane{height:440px}
  .sx-pane .sx-phone{--w:236px}
  .sx-more{grid-template-columns:repeat(2,1fr)}
  .sx-promise{grid-template-columns:repeat(2,1fr)}
  .sx-pod{grid-template-columns:1fr;gap:22px;padding:22px}
  .sx-pod img{width:100%;height:auto;aspect-ratio:1/1;max-width:260px}
  .sx-sec{padding-block:64px 0}
}
@media (max-width:520px){
  .sx-link{display:none}
  .sx-bar{gap:12px}
  .sx-cta .sx-btn{flex:1 1 auto}
  .sx-more{grid-template-columns:1fr}
  .sx-more > div{padding-inline-end:0}
  .sx-stage .p1{transform:translateX(calc(-50% + 36px))}
  .sx-stage .p2{transform:translateX(calc(-50% - 120px))}
  .sx-final{margin-top:72px;padding:48px 20px;border-radius:24px}
}