:root{--gold:#c9a227;--gold2:#a8841f;--gold3:#a8841f;--black:#fff;--ink:#fbf8f1;--card:#fff;--line:#ecdfb8;--txt:#111;--mute:#555;--r:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Vazirmatn,Tahoma,sans-serif;background:var(--black);color:var(--txt);line-height:1.9;direction:rtl}
a{color:var(--gold2);text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:1200px;margin:auto;padding:0 16px}
.narrow{max-width:860px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:700;font-family:inherit;font-size:15px;border:0;cursor:pointer;transition:.2s}
.btn-gold{background:var(--gold);color:#111;}
.btn-gold:hover{transform:translateY(-2px);box-shadow:none;background:var(--gold2)}
.btn-line{border:1px solid var(--gold);color:var(--gold2)}
.btn-line:hover{background:#d4af3715}
.btn-dark{background:#111;color:#fff}
.btn.sm{padding:8px 16px;font-size:14px}
.btn.block{width:100%;justify-content:center}

.site-head{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt)}
.brand b{display:block;font-size:20px;color:var(--gold2);line-height:1.3}
.brand small{color:var(--mute);font-size:12px}
.brand-ico{width:42px;height:42px;object-fit:contain}
.nav{display:flex;align-items:center;gap:20px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav ul a{color:var(--txt);font-weight:500}
.nav ul a:hover{color:var(--gold)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--gold);font-size:20px;border-radius:8px;padding:6px 12px;cursor:pointer}

.hero{background:#fff;padding:70px 0 90px}
.hero-in{display:grid;grid-template-columns:1fr 1.1fr;gap:50px;align-items:center}
.tag{display:inline-flex;gap:8px;align-items:center;color:var(--gold2);background:#d4af3718;border:1px solid #d4af3740;padding:4px 14px;border-radius:30px;font-size:13px}
.hero h1{font-size:46px;line-height:1.5;margin:18px 0}
.hero h1 em{font-style:normal;background:var(--gold);background:none;color:var(--gold2)}
.hero p{color:var(--mute);font-size:17px}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.hero-pts{display:flex;flex-wrap:wrap;gap:18px;list-style:none;padding:0;color:var(--mute);font-size:14px}
.hero-pts i{color:var(--gold)}
.hero-img{position:relative}
.hero-img>img:first-child{border-radius:var(--r);border:1px solid #d4af3755;box-shadow:0 10px 30px #0001}
.hero-img .float{position:absolute;width:55%;left:-30px;bottom:-50px;border-radius:10px;border:3px solid var(--gold);box-shadow:0 10px 30px #0002}

.stats{border-block:1px solid var(--line);background:var(--ink)}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 16px}
.stats-in div{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
.stats-in i{grid-row:span 2;font-size:28px;color:var(--gold)}
.stats-in span{color:var(--mute);font-size:13px}

.sec{padding:90px 0}
.sec.dark{background:var(--ink)}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head span{color:var(--gold);font-weight:700;font-size:14px}
.sec-head h2{font-size:32px;margin:6px 0 0}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;transition:.25s}
.feat:hover{border-color:var(--gold);transform:translateY(-4px)}
.feat i{font-size:24px;width:52px;height:52px;display:grid;place-items:center;border-radius:12px;background:#d4af3718;color:var(--gold2)}
.feat h3,.feat .h3{margin:14px 0 6px;font-size:18px}
.feat p{margin:0;color:var(--mute);font-size:14px}

.shot-main{background:#fff;border:1px solid #d4af3755;border-radius:var(--r);padding:12px;cursor:zoom-in}
.shot-main img{margin:auto;max-height:560px;object-fit:contain;border-radius:8px;background:#fff}
.shot-main p{text-align:center;margin:10px 0 0;color:var(--gold2);font-weight:700}
.shot-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin-top:16px}
.thumb{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:6px;cursor:pointer;color:var(--txt);font-family:inherit;font-size:12px}
.thumb img{height:80px;width:100%;object-fit:cover;object-position:top;border-radius:6px;background:#fff}
.thumb.on,.thumb:hover{border-color:var(--gold);color:var(--gold2)}

.plan-switch{display:flex;justify-content:center;gap:6px;background:var(--card);border:1px solid var(--line);border-radius:40px;padding:6px;width:max-content;max-width:100%;margin:0 auto 34px;flex-wrap:wrap}
.plan-switch button{border:0;background:none;color:var(--txt);font-family:inherit;font-size:15px;padding:8px 20px;border-radius:30px;cursor:pointer}
.plan-switch button.on{background:var(--gold);color:#111;font-weight:700}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}
.plan{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;transition:.25s}
.plan.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);transform:translateY(-6px)}
.plan h3{margin:0;font-size:22px;color:var(--gold2)}
.plan-desc{color:var(--mute);font-size:14px;min-height:50px}
.price{margin:16px 0;border-block:1px dashed var(--line);padding:14px 0}
.price b{font-size:32px}
.price b.ask{font-size:22px;color:var(--gold2)}
.price del{display:block;color:var(--mute);font-size:14px}
.price small{color:var(--mute)}
.plan ul{list-style:none;padding:0;margin:0 0 24px}
.plan li{padding:5px 0;font-size:14px}
.plan li i{color:var(--gold)}
.ribbon{position:absolute;top:-13px;left:24px;background:var(--gold);color:#111;font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px}
.compare{width:100%;border-collapse:collapse;margin-top:50px;background:var(--card);border-radius:var(--r);overflow:hidden}
.compare th,.compare td{padding:12px;border-bottom:1px solid var(--line);text-align:center;font-size:14px}
.compare th{background:#d4af3718;color:var(--gold2)}
.compare td:first-child,.compare th:first-child{text-align:right}
.yes{color:var(--gold)}.no{color:#555}

.cta{background:var(--gold);color:#111;padding:50px 0}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cta h2{margin:0}.cta p{margin:6px 0 0}
.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 20px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700}
.faq summary i{color:var(--gold)}
.faq p{color:var(--mute);margin:10px 0 0}
.content{background:var(--card);border-radius:var(--r);padding:30px}

.site-foot{background:var(--ink);border-top:1px solid var(--line);padding-top:50px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px}
.foot-grid p{color:var(--mute);font-size:14px}
.foot-grid h4{color:var(--gold2);margin:0 0 10px}
.links{list-style:none;padding:0;margin:0}
.links li{padding:4px 0;color:var(--mute)}
.links a{color:var(--mute)}.links a:hover{color:var(--gold)}
.links i{color:var(--gold);width:18px}
.copy{text-align:center;color:var(--mute);font-size:13px;border-top:1px solid var(--line);margin-top:30px;padding:16px}

.lightbox{position:fixed;inset:0;background:#000e;z-index:99;display:grid;place-items:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-height:85vh;border:2px solid var(--gold);border-radius:8px;background:#fff}
.lightbox p{color:var(--gold2);margin:8px 0 0;text-align:center}
.lb-close{position:absolute;top:16px;left:16px;background:var(--gold);border:0;border-radius:50%;width:42px;height:42px;font-size:20px;cursor:pointer}

@media(max-width:960px){
  .hero-in,.plans,.foot-grid{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .stats-in{grid-template-columns:1fr 1fr}
  .hero h1{font-size:34px}
  .hero-img .float{left:0;bottom:-30px}
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:72px;right:0;left:0;background:#fff;flex-direction:column;align-items:stretch;padding:16px;border-bottom:1px solid var(--line)}
  .nav.open{display:flex}
  .nav ul{flex-direction:column;gap:6px}
  .compare{display:block;overflow-x:auto}
}
@media(max-width:560px){.feat-grid,.stats-in{grid-template-columns:1fr}.sec{padding:60px 0}.sec-head h2{font-size:24px}}

/* تکه‌های طلا */
.gold-band{position:relative;height:260px;background:#14130f url(../img/gold-hero2.jpg) left center/auto 100% no-repeat;overflow:hidden;border-block:3px solid var(--gold)}
.gold-band .wrap{height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.gold-band h2{margin:0;font-size:30px}.gold-band p{margin:4px 0 16px;color:#eee}
.gold-band hr{width:60px;border:0;border-top:3px solid var(--gold);margin:0 0 12px}
.cta{position:relative;overflow:hidden}
.cta-in{position:relative;padding-left:240px}
.sec-head span::before,.sec-head span::after{content:"◆";margin:0 8px;font-size:10px;vertical-align:middle}
.hero h1 em{border-bottom:3px solid var(--gold)}
@media(max-width:960px){.gold-band{height:200px}.gold-band h2{font-size:22px}}
.deco{position:relative;overflow:hidden}
.deco-bars{position:absolute;left:4%;bottom:0;width:220px;opacity:.95}
@media(max-width:960px){.cta-in{padding-left:0}.deco-bars{display:none}}

/* سربرگ برگه‌ها با عکس طلا */
.page-hero{position:relative;background:#14130f center/cover no-repeat;padding:80px 0;color:#fff;border-bottom:3px solid var(--gold)}
.page-hero::before{content:"";position:absolute;inset:0;background:#000a}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:38px;margin:14px 0 6px}.page-hero p{color:#eee;margin:0}
.page-hero .tag{background:var(--gold);color:#111;border:0}

/* قیمت روز */
.rate-time{color:var(--mute);margin:0 0 20px}.rate-time b{color:var(--txt)}
.rate-group{font-size:20px;margin:30px 0 14px;color:var(--gold2)}
.rate-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.rate{background:#fff;border:1px solid var(--line);border-right:4px solid var(--gold);border-radius:12px;padding:16px 18px;display:grid;gap:4px}
.rate-name{font-weight:700}.rate-name small{color:var(--mute);font-weight:400}
.rate-p{font-size:26px;letter-spacing:.5px}
.rate-sub{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12px;color:var(--mute)}.rate-sub i{font-style:normal;color:var(--txt)}
.rate-d.low{color:#c0392b}.rate-d.high{color:#1e8449}
.rate-src{font-size:13px;color:var(--mute);margin-top:30px}
.rate-cta{display:flex;gap:12px;flex-wrap:wrap}

/* ابزارها */
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.tool{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px}
.tool h3,.tool .h3{margin:0 0 12px;font-size:17px}.tool h3 i,.tool .h3 i{color:var(--gold)}
.tool label{display:block;font-size:12px;color:var(--mute);margin-bottom:8px}
.tool input,.tool select{width:100%;font-family:inherit;font-size:15px;border:1px solid var(--line);border-radius:8px;padding:7px 9px;margin-top:3px;background:#fff;color:var(--txt)}
.tool input:focus,.tool select:focus{outline:0;border-color:var(--gold)}
.tool .g2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.tool .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.tool .hint{font-size:13px;color:var(--mute)}
.out{margin:12px 0 0;border-top:1px dashed var(--line);padding-top:8px}
.out div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.out dt{color:var(--mute)}.out dd{margin:0;font-weight:700}
.out .big{background:#faf3dc;border-radius:8px;padding:8px 10px;margin-top:4px}.out .big dd{font-size:17px}

/* عکس‌های طلا در صفحه اصلی */
.gold-pics{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}
.gold-pic{position:relative;border-radius:var(--r);overflow:hidden;border:2px solid var(--gold);min-height:240px;color:#fff;display:flex;align-items:flex-end}
.gold-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s}
.gold-pic:hover img{transform:scale(1.05)}
.gold-pic span{position:relative;width:100%;padding:40px 18px 16px;background:linear-gradient(transparent,#000c);font-weight:700;font-size:18px}
.gold-pic small{display:block;font-weight:400;font-size:13px;color:#eee}
@media(max-width:960px){.gold-pics{grid-template-columns:1fr}.page-hero h1{font-size:28px}}

/* برگه هر ابزار */
.tool-page{display:grid;grid-template-columns:1fr 300px;gap:24px;align-items:start}
.tool-page .tool{max-width:none}
.tool-side{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:18px;position:sticky;top:90px}
.tool-side h3{margin:0 0 10px;font-size:16px}.tool-side h3 i{color:var(--gold)}
.tool-side a{display:flex;gap:10px;align-items:center;padding:8px 6px;border-top:1px solid var(--line);color:var(--txt)}
.tool-side a i{color:var(--gold);width:18px}.tool-side a:hover{color:var(--gold2)}
.tool-card{color:var(--txt);display:block}
.tool-card .go{display:inline-flex;gap:6px;align-items:center;margin-top:12px;color:var(--gold2);font-weight:700;font-size:14px}
.tool-card .go i{all:unset}
@media(max-width:960px){.tool-page{grid-template-columns:1fr}.tool-side{position:static}}
.gold-band::before{content:"";position:absolute;top:0;bottom:0;left:0;width:calc(260px * 552 / 162);background:linear-gradient(to left,#14130f 0,#14130f00 45%)}
.gold-band .wrap{position:relative}
@media(max-width:960px){.gold-band::before{width:calc(200px * 552 / 162)}}

/* Tool editorial guides */
.tool-guide{margin-top:36px;line-height:2.15;overflow-wrap:anywhere}
.tool-guide h2{font-size:clamp(21px,3vw,28px);line-height:1.7;margin:0 0 20px}
.tool-guide h3{font-size:19px;line-height:1.8;margin:30px 0 12px}
.tool-guide p{margin:0 0 18px}
.tool-guide a{text-decoration:underline;text-underline-offset:4px}
.tool-faq{border-bottom:1px solid var(--line,#e5e0d4);padding:16px 0}
.tool-faq summary{cursor:pointer;font-weight:700;line-height:1.9}
.tool-faq p{margin:14px 0 0}
.sec-head h1.h2{font-size:32px;margin:6px 0 0}
.rate-stale{background:#fff6e0;border:1px solid var(--gold);color:#7a5a00;border-radius:10px;padding:8px 12px;font-size:14px}
img{max-width:100%;height:auto}
.crumbs{font-size:14px;margin:0 0 12px;color:#ddd}
.crumbs a{color:var(--gold);text-decoration:none}.crumbs a:hover{text-decoration:underline}
.crumbs i{font-size:11px;margin:0 6px;opacity:.7}
/* بیشتر بخوانید */
.more.js-clip{max-height:340px;overflow:hidden;position:relative}
.more.js-clip::after{content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,var(--bg,#fff))}
.more-btn{display:flex;align-items:center;gap:8px;margin:14px auto 0;padding:10px 22px;border:1px solid var(--gold);border-radius:999px;background:none;color:inherit;font:inherit;cursor:pointer}
.more-btn[aria-expanded=true] i{transform:rotate(180deg)}
/* دیدگاه‌ها */
.comments{margin-top:44px;padding-top:28px;border-top:1px solid rgba(0,0,0,.08)}
.comments .h3{font-size:20px;margin:0 0 16px}.comments .h3 i{color:var(--gold)}
.comment-list{list-style:none;padding:0;margin:0 0 24px}.comment-list .children{list-style:none;padding-right:28px}
.cmt{padding:16px 18px;margin:0 0 12px;border:1px solid rgba(0,0,0,.08);border-radius:14px;background:#fff}
.cmt-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.cmt-ava{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#f3ecd6;color:#8a6d12;font-weight:700;overflow:hidden}.cmt-ava img{width:100%;height:100%;object-fit:contain;background:#fff}
.cmt-head time{margin-inline-start:auto;font-size:13px;opacity:.6}
.cmt-badge{font-size:12px;padding:2px 10px;border-radius:999px;background:var(--gold);color:#111}
.cmt-text p{margin:4px 0}.comment-reply-link{font-size:14px;color:#8a6d12;text-decoration:none}
.is-staff>.cmt{background:#fbf7ea;border-color:rgba(201,162,39,.35)}
.comment-list .children{padding-right:34px;border-right:2px solid rgba(201,162,39,.35);margin-right:12px}
#cancel-comment-reply-link{font-size:14px;margin-right:10px}
.comment-form p{margin:0 0 14px}.comment-form label{display:block;margin-bottom:6px}
.comment-form input[type=text],.comment-form input[type=email],.comment-form textarea{width:100%;padding:10px 12px;border:1px solid rgba(0,0,0,.15);border-radius:10px;font:inherit;background:#fff}
.comment-form .cg-cap input{max-width:140px;direction:ltr;text-align:center}
/* لوگوی متحرک: ورود چرخشی، هالهٔ طلایی تپنده، برق، جرقه و هاور */
.brand-motion{position:relative;display:inline-block;width:42px;height:42px;flex:none;isolation:isolate}
.brand-motion::before{content:"";position:absolute;inset:-6px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(212,175,55,.45),rgba(212,175,55,0) 70%);animation:cg-logo-glow 3s ease-in-out 1s infinite}
.brand-motion img{width:100%;height:100%;display:block;object-fit:contain;
  animation:cg-logo-in 1s cubic-bezier(.2,.8,.2,1.2) both,cg-logo-float 6s ease-in-out 1.2s infinite;
  transition:transform .6s cubic-bezier(.2,.8,.2,1.4),filter .4s}
.brand-motion::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,250,220,.95) 50%,transparent 65%) no-repeat;background-size:250% 100%;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;
  animation:cg-logo-shine 4.5s ease-in-out 1s infinite}
.brand-spark{position:absolute;top:-3px;right:-2px;width:9px;height:9px;pointer-events:none;opacity:0;
  background:radial-gradient(circle,#fff 0 18%,transparent 20%),conic-gradient(from 45deg,transparent 0 10%,#ffe9a8 12% 13%,transparent 15% 35%,#ffe9a8 37% 38%,transparent 40% 60%,#ffe9a8 62% 63%,transparent 65% 85%,#ffe9a8 87% 88%,transparent 90%);
  border-radius:50%;animation:cg-logo-spark 4.5s ease-in-out 1s infinite}
.brand:hover .brand-motion img{animation-play-state:paused;transform:rotateY(180deg) scale(1.08);filter:drop-shadow(0 0 6px rgba(212,175,55,.7))}
.brand:hover .brand-motion::after{animation-duration:1.2s}
@keyframes cg-logo-in{0%{opacity:0;transform:rotate(-180deg) scale(.3);filter:blur(4px)}70%{opacity:1;filter:none}100%{opacity:1;transform:none}}
@keyframes cg-logo-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(-4deg)}}
@keyframes cg-logo-glow{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:1;transform:scale(1.1)}}
@keyframes cg-logo-shine{0%,60%{background-position:150% 0}85%,100%{background-position:-60% 0}}
@keyframes cg-logo-spark{0%,80%{opacity:0;transform:scale(0) rotate(0)}88%{opacity:1;transform:scale(1.3) rotate(90deg)}100%{opacity:0;transform:scale(0) rotate(180deg)}}
@media(prefers-reduced-motion:reduce){.brand-motion img,.brand-motion::before,.brand-motion::after,.brand-spark{animation:none}.brand:hover .brand-motion img{transform:none}}
