/* ========================================================= Tregoon — black & white theme One big rounded white sheet on a black background. Tregoon texts only; layout & motion follow the reference video. ========================================================= */ :root{ --lav-a:#000000; --lav-b:#0b0b0b; --lav-c:#000000; --sheet:#ffffff; --card:#ffffff; --card-2:#f4f4f5; --ink:#0f0f0f; --ink-2:#2b2b2b; --muted:#6b7280; --muted-2:#9aa0a6; --line:rgba(0,0,0,.11); --line-2:rgba(0,0,0,.20); --purple:#111111; --purple-2:#242424; --purple-deep:#000000; --purple-ink:#000000; --purple-soft:#f0f0f0; --up:#111111; --down:#8a8a8a; --shadow-sm:0 2px 12px rgba(0,0,0,.08); --shadow:0 22px 55px -22px rgba(0,0,0,.30); --r:20px; --r-lg:28px; --sheet-r:42px; --font:"Sora",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif; --wrap:1150px; } *{box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip} body{ margin:0; font-family:var(--body); color:var(--ink); background: radial-gradient(1000px 520px at 50% -8%, #1a1a1a 0%, transparent 60%), linear-gradient(168deg, var(--lav-a) 0%, var(--lav-b) 48%, var(--lav-c) 100%); background-attachment:fixed; -webkit-font-smoothing:antialiased; line-height:1.6; overflow-x:clip; /* NOT `hidden` — hidden turns into a scroll container and breaks window scroll events, scrollTo and sticky */ padding:24px clamp(14px,3vw,56px); } :lang(fa){font-family:"Vazirmatn",var(--body)} :lang(fa) h1,:lang(fa) h2,:lang(fa) h3,:lang(fa) h4{font-family:"Vazirmatn",var(--font)} a{color:inherit;text-decoration:none} img,svg{max-width:100%} h1,h2,h3,h4,h5{font-family:var(--font);color:var(--ink);line-height:1.12;margin:0;font-weight:700;letter-spacing:-.02em} p{margin:0} .globe-bg,.globe-bg *{display:none!important} /* ===================== SHEET ===================== */ .sheet{ max-width:1400px;margin:0 auto;background:var(--sheet); border-radius:var(--sheet-r); box-shadow:0 60px 140px -55px rgba(0,0,0,.65); overflow:hidden;position:relative; } .wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px} .sec{padding:88px 0} .accent,.g{color:var(--purple)} .muted{color:var(--muted)} /* ===================== BUTTONS ===================== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:var(--font);font-weight:600;font-size:14px; padding:10px 20px;border-radius:999px;border:1px solid transparent;cursor:pointer; transition:transform .18s ease,box-shadow .25s ease,background .2s ease;white-space:nowrap} .btn-primary{background:linear-gradient(180deg,var(--purple-2),var(--purple-deep));color:#fff;box-shadow:0 10px 24px -10px rgba(0,0,0,.75)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 32px -10px rgba(0,0,0,.85)} .btn-ghost{background:#fff;color:var(--ink);border-color:var(--line-2);box-shadow:var(--shadow-sm)} .btn-ghost:hover{transform:translateY(-2px);border-color:var(--purple);color:var(--purple)} .btn-lg{padding:14px 28px;font-size:15.5px} /* ===================== NAV ===================== */ .nav{position:sticky;top:0;z-index:60;padding:16px 0} .nav::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,0);backdrop-filter:blur(0);transition:.3s;pointer-events:none} .nav.scrolled::before{background:rgba(255,255,255,.85);backdrop-filter:blur(14px)} .nav-inner{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:700;font-size:18px;color:var(--ink)} .brand .mark{display:grid;place-items:center;width:30px;height:26px;color:var(--ink)} .brand .mark svg{width:100%;height:100%;display:block;fill:currentColor} .nav-links{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:2px;align-items:center;background:#fff;border-radius:999px;padding:5px 7px;box-shadow:var(--shadow-sm)} .nav-links a{font-family:var(--body);font-weight:500;font-size:13.5px;color:var(--ink-2);padding:8px 13px;border-radius:999px;transition:.18s} .nav-links a:hover{color:var(--purple);background:var(--purple-soft)} .nav-right{display:flex;align-items:center;gap:9px} .lang{position:relative} .lang-btn{display:inline-flex;align-items:center;gap:6px;font-family:var(--font);font-weight:600;font-size:13px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 13px;cursor:pointer;box-shadow:var(--shadow-sm)} .lang-btn .fl{font-size:14px} .lang-menu{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:166px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s;z-index:70} .lang-menu.open{opacity:1;visibility:visible;transform:none} .lang-menu button{display:flex;align-items:center;gap:9px;width:100%;background:none;border:0;padding:9px 11px;border-radius:9px;font-family:var(--body);font-size:14px;color:var(--ink-2);cursor:pointer;text-align:left} .lang-menu button:hover{background:var(--purple-soft);color:var(--purple)} :lang(fa) .lang-menu{left:0;right:auto;text-align:right} .nav-toggle{display:none;background:#fff;border:1px solid var(--line-2);border-radius:10px;width:40px;height:40px;font-size:18px;color:var(--ink);cursor:pointer} .mmenu{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:18px;display:none} .mmenu.open{display:flex} .mmenu a{font-family:var(--font);font-weight:600;font-size:21px;color:var(--ink)} .mmenu .close{position:absolute;top:22px;right:22px;background:#fff;border:1px solid var(--line-2);width:44px;height:44px;border-radius:12px;font-size:18px;cursor:pointer} /* ===================== HERO ===================== */ .hero{position:relative;text-align:center;padding:26px 40px 66px;overflow:hidden} .hero .rings{position:absolute;left:50%;top:210px;width:1080px;height:1080px;margin-left:-540px;border-radius:50%;pointer-events:none; background: radial-gradient(circle, rgba(0,0,0,.045) 0 24.8%, rgba(0,0,0,.10) 25%, transparent 25.4%), radial-gradient(circle, transparent 0 35.8%, rgba(0,0,0,.08) 36%, transparent 36.4%), radial-gradient(circle, transparent 0 46.8%, rgba(0,0,0,.06) 47%, transparent 47.4%), radial-gradient(circle at 50% 42%, #f2f2f2 0%, transparent 58%)} .hero>.hz{position:relative;z-index:1} /* orbit — positioning via left/top+margins only; animations own transform */ .orbit{position:relative;width:min(560px,86vw);height:300px;margin:0 auto} .orbit-center{position:absolute;left:50%;top:62%;width:0;height:0} .orbit-core{position:absolute;left:-53px;top:-53px;width:106px;height:106px;border-radius:50%; background:radial-gradient(circle at 50% 34%,#ffffff,#f3f3f3 62%,#e2e2e2); border:6px solid rgba(255,255,255,.9);display:grid;place-items:center; box-shadow:0 26px 55px -18px rgba(0,0,0,.55),0 0 0 14px rgba(0,0,0,.07),0 0 0 30px rgba(0,0,0,.04)} .orbit-core svg{width:40px;height:40px;color:var(--purple)} .orbit-arc{position:absolute;left:-64px;top:-64px;width:128px;height:128px;animation:spin 9s linear infinite} .orbit-arc circle{fill:none;stroke:var(--purple);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:70 300;opacity:.6} @keyframes spin{to{transform:rotate(360deg)}} .coin-node{position:absolute;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;display:grid;place-items:center; font-family:var(--font);font-weight:700;font-size:19px;color:var(--purple); box-shadow:0 10px 24px -10px rgba(90,50,180,.35)} .coin-node.big{width:54px;height:54px;margin:-27px 0 0 -27px;font-size:22px} html.js .coin-node{opacity:0;animation:coinPop .7s cubic-bezier(.3,1.4,.4,1) forwards,coinBob 4.5s ease-in-out infinite alternate} @keyframes coinPop{0%{opacity:0;transform:scale(.3) translateY(14px)}70%{opacity:1;transform:scale(1.08) translateY(-2px)}100%{opacity:1;transform:scale(1) translateY(0)}} @keyframes coinBob{from{transform:translateY(0)}to{transform:translateY(-7px)}} @media(prefers-reduced-motion:no-preference){ html.js .orbit-core{animation:coreBob 5s ease-in-out infinite alternate} } @keyframes coreBob{from{transform:translateY(0)}to{transform:translateY(-6px)}} .pill{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-family:var(--font);font-weight:600;font-size:12.5px;color:var(--purple-ink);box-shadow:var(--shadow-sm)} .pill .dot{width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 0 4px rgba(0,0,0,.18);animation:pulse 1.8s infinite} @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(0,0,0,0)}} .hero h1{font-size:clamp(38px,6vw,72px);margin:10px auto 0;max-width:16ch;font-weight:600} .hero .sub{color:var(--muted);font-size:clamp(14px,1.6vw,16.5px);max-width:560px;margin:18px auto 0} .hero-cta{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:26px} .rely{display:inline-flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:8px 14px;box-shadow:var(--shadow-sm);font-family:var(--font);font-weight:600;font-size:12.5px;color:var(--ink-2);text-align:left;line-height:1.25} .rely .rv{font-size:20px;font-weight:800;color:var(--ink)} .hero-note{color:var(--muted-2);font-size:13px;margin-top:16px} .scroll-hint{margin-top:30px;font-family:var(--font);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted-2)} html.js .scroll-hint{animation:hintBob 2.2s ease-in-out infinite alternate} @keyframes hintBob{to{transform:translateY(5px)}} /* word morph (variable font weight) */ html.js [data-morph] .w{display:inline-block;opacity:0;transform:translateY(.35em);font-weight:200} html.js [data-morph].go .w{animation:wordIn .85s cubic-bezier(.2,.7,.15,1) forwards;animation-delay:calc(var(--i,0)*.07s)} @keyframes wordIn{0%{opacity:0;transform:translateY(.35em);font-weight:200}55%{opacity:1}100%{opacity:1;transform:none;font-weight:650}} h1[data-morph] .w{font-weight:600} @keyframes wordInH1{0%{opacity:0;transform:translateY(.35em);font-weight:150}55%{opacity:1}100%{opacity:1;transform:none;font-weight:600}} html.js h1[data-morph].go .w{animation-name:wordInH1} /* ===================== MARQUEE ===================== */ .trusted{padding:4px 40px 12px;text-align:center} .trusted .t{color:var(--muted-2);font-size:12.5px;letter-spacing:.05em;margin-bottom:16px} .marquee{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)} .marquee-track{display:inline-flex;gap:46px;white-space:nowrap;animation:marq 26s linear infinite} .marquee-track span{font-family:var(--font);font-weight:700;font-size:18px;color:var(--muted-2);opacity:.6} @keyframes marq{to{transform:translateX(-50%)}} /* ===================== SECTION HEAD ===================== */ .sec-head{max-width:640px;margin-bottom:44px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--purple);background:#fff;border:1px solid var(--line);padding:7px 15px;border-radius:999px;margin-bottom:16px;box-shadow:var(--shadow-sm)} .sec-head h2{font-size:clamp(28px,4.2vw,44px);font-weight:600} .sec-head p{color:var(--muted);font-size:clamp(14px,1.5vw,16px);margin-top:14px} /* ===================== WHY BENTO ===================== */ .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .b-card{background:var(--card);border-radius:var(--r-lg);padding:24px;position:relative;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .25s ease} .b-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .b-card h3{font-size:18px;margin:16px 0 6px;font-weight:700} .b-card p{color:var(--muted);font-size:13.5px} .span2{grid-column:span 2} .b-art{position:relative;border-radius:16px;min-height:150px;background:linear-gradient(170deg,#fbfbfb,#f0f0f0);overflow:hidden;flex:0 0 auto} .b-card.lg .b-art{min-height:190px} /* art: layered waves */ .art-wave svg{position:absolute;inset:0;width:100%;height:100%} .tagchip{position:absolute;background:#fff;border:1px solid var(--purple);color:var(--purple-ink);border-radius:999px;font-family:var(--font);font-weight:600;font-size:10.5px;padding:4px 11px;box-shadow:var(--shadow-sm)} html.js .tagchip{animation:coinBob 3.6s ease-in-out infinite alternate} /* art: glow ring */ .art-glow{display:grid;place-items:center} .glow-ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 36%,#fff,#f2f2f2 60%,#dcdcdc);box-shadow:0 16px 34px -12px rgba(0,0,0,.5),0 0 0 12px rgba(0,0,0,.08),0 0 0 26px rgba(0,0,0,.05)} .glow-ring svg{width:34px;height:34px;color:var(--purple)} /* art: document + sticky note */ .art-doc .doc{position:absolute;left:50%;top:24px;width:150px;margin-left:-75px;background:#fff;border-radius:12px;box-shadow:var(--shadow-sm);padding:14px 14px 18px} .art-doc .doc i{display:block;height:7px;border-radius:4px;background:#eee9f8;margin:7px 0} .art-doc .doc i:nth-child(1){width:60%} .art-doc .note{position:absolute;right:26%;bottom:18px;width:44px;height:44px;background:#d7d7d7;border-radius:8px;box-shadow:0 8px 18px -8px rgba(0,0,0,.45);transform:rotate(8deg)} /* art: chat bubbles */ .art-chat .bub{position:absolute;left:14px;right:14px;background:#fff;border-radius:14px;box-shadow:var(--shadow-sm);padding:10px 12px;font-size:11px;color:var(--muted)} .art-chat .bub b{display:block;font-family:var(--font);font-size:11.5px;color:var(--ink)} .art-chat .bub.b1{top:18px} .art-chat .bub.b2{top:76px;left:34px;right:26px;background:var(--purple-soft)} .art-chat .av{position:absolute;width:22px;height:22px;border-radius:50%;background:linear-gradient(140deg,var(--purple-2),var(--purple-deep));top:-8px;left:-8px} /* art: radar */ .art-radar::before{content:"";position:absolute;left:50%;top:58%;width:280px;height:280px;margin:-140px;border-radius:50%; background: radial-gradient(circle, transparent 0 29.5%, rgba(0,0,0,.14) 30%, transparent 30.8%), radial-gradient(circle, transparent 0 44.5%, rgba(0,0,0,.10) 45%, transparent 45.8%), radial-gradient(circle, transparent 0 59.5%, rgba(0,0,0,.07) 60%, transparent 60.8%)} .art-radar .cpill{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);background:#fff;border-radius:999px;padding:7px 15px;font-family:var(--font);font-weight:700;font-size:15px;color:var(--purple);box-shadow:var(--shadow)} .art-radar .dotp{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--purple-2);opacity:.6} /* art: token cards */ .art-tokens .tok{position:absolute;background:#fff;border-radius:12px;box-shadow:var(--shadow-sm);padding:9px 13px;font-family:var(--font);font-weight:600;font-size:12px;color:var(--ink)} .art-tokens .tok small{display:block;color:var(--muted-2);font-weight:500;font-size:10px} .art-tokens .tok .pv{color:var(--up);font-size:11px;font-weight:700} html.js .art-tokens .tok{animation:coinBob 4s ease-in-out infinite alternate} /* ===================== 9 LAYER CHIPS ===================== */ .lgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px} .lchip{display:flex;gap:14px;align-items:flex-start;background:var(--card);border-radius:var(--r);padding:18px;box-shadow:var(--shadow-sm);transition:.2s} .lchip:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .lchip .num{flex:0 0 auto;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--font);font-weight:700;font-size:14px;color:#fff;background:linear-gradient(140deg,var(--purple-2),var(--purple-deep))} .lchip h4{font-size:14.5px;margin-bottom:3px;font-weight:700} .lchip p{color:var(--muted);font-size:12.5px;line-height:1.5} /* ===================== STACKED MARKET CARDS ===================== */ .mkts{display:grid;grid-template-columns:.72fr 1.28fr;gap:56px;align-items:start} .mkts-left{position:sticky;top:150px} .mkts-left h2{font-size:clamp(30px,4.4vw,52px);font-weight:600} .mkts-left p{color:var(--muted);margin-top:16px;font-size:15px;max-width:36ch} .mcard{position:sticky;top:110px;min-height:460px;border-radius:26px;padding:36px;margin-bottom:46px;overflow:hidden; background:#fff;box-shadow:var(--shadow);display:flex;flex-direction:column;justify-content:flex-end} .mcard:nth-of-type(2){top:126px} .mcard:nth-of-type(3){top:142px;margin-bottom:0} .mcard.tint{background:linear-gradient(150deg,#242424,#000000)} .mcard .bignum{position:absolute;top:14px;right:28px;font-family:var(--font);font-weight:800;font-size:104px;line-height:1;color:rgba(0,0,0,.08)} .mcard.tint .bignum{color:rgba(255,255,255,.15)} .mpill{position:absolute;top:44px;left:36px;width:min(320px,60%);height:150px;border-radius:80px;background:#fff;box-shadow:0 30px 60px -25px rgba(40,15,90,.45);display:grid;place-items:center;overflow:hidden} .mcard.tint .mpill{background:rgba(255,255,255,.96)} .mpill svg{width:78%;height:60%} .mcard .badge{display:inline-block;width:fit-content;font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;background:var(--purple-soft);color:var(--purple-ink);margin-bottom:12px} .mcard.tint .badge{background:rgba(255,255,255,.18);color:#fff} .mcard h3{font-size:clamp(22px,2.6vw,30px);font-weight:600;margin-bottom:10px} .mcard.tint h3{color:#fff} .mcard p{color:var(--muted);font-size:14.5px;max-width:52ch} .mcard.tint p{color:rgba(255,255,255,.82)} /* ===================== STEPS ===================== */ .steps{display:grid;grid-template-columns:1fr 1.1fr;gap:52px;align-items:center} .steps-media{border-radius:26px;overflow:hidden;aspect-ratio:1/1.05;position:relative;background: radial-gradient(circle at 50% 58%,#fff 0%,#cfcfcf 22%,#555555 52%,#111111 100%)} .steps-media::before{content:"";position:absolute;left:50%;top:52%;width:74%;aspect-ratio:1;border:1.5px solid rgba(255,255,255,.4);border-radius:50%;transform:translate(-50%,-50%)} .steps-media::after{content:"";position:absolute;left:50%;top:52%;width:52%;aspect-ratio:1;border:1.5px solid rgba(255,255,255,.55);border-radius:50%;transform:translate(-50%,-50%)} .steps-media .road{position:absolute;left:0;right:0;bottom:0;height:44%;background:linear-gradient(180deg,transparent,rgba(30,8,70,.55));clip-path:polygon(38% 0,62% 0,100% 100%,0 100%)} .steps-media .badge-float{position:absolute;left:50%;top:40%;width:max-content;margin-left:-90px;background:#fff;border-radius:12px;padding:10px 16px;font-family:var(--font);font-weight:600;font-size:13px;color:var(--ink);box-shadow:var(--shadow);display:flex;align-items:center;gap:9px} html.js .steps-media .badge-float{animation:coinBob 4s ease-in-out infinite alternate} .steps-media .badge-float .d{width:8px;height:8px;border-radius:50%;background:var(--purple)} .steps-right .kicker{font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted);margin-bottom:18px} .step{padding:14px 0;cursor:pointer} .step .st{font-family:var(--font);font-weight:600;font-size:clamp(26px,3.4vw,42px);color:#cfcfcf;transition:color .35s;letter-spacing:-.02em} .step.active .st{color:var(--ink)} .step .prog{height:2.5px;background:var(--line);border-radius:2px;margin-top:12px;overflow:hidden;opacity:0;transition:.3s} .step.active .prog{opacity:1} .step .prog span{display:block;height:100%;width:0;background:var(--purple)} @keyframes prog{to{width:100%}} .step .sd{max-height:0;overflow:hidden;opacity:0;transition:.35s;color:var(--muted);font-size:14px} .step.active .sd{max-height:110px;opacity:1;margin-top:9px} .steps-cta{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .steps-cta .big{font-family:var(--font);font-weight:700;font-size:16px;color:var(--ink)} /* ===================== PRICING ===================== */ .plans{display:grid;grid-template-columns:repeat(2,minmax(0,380px));gap:20px;justify-content:center} .plan{position:relative;background:var(--card);border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow-sm);transition:.2s} .plan:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .plan.featured{background:linear-gradient(155deg,#242424,#000000);color:#fff;box-shadow:var(--shadow)} .plan.featured .pname{color:#fff} .plan.featured .price,.plan.featured li{color:#fff} .plan.featured .price small,.plan.featured .pdesc{color:rgba(255,255,255,.75)} .plan.featured .ck{background:rgba(255,255,255,.2);color:#fff} .ptag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:#fff;color:var(--purple-ink);font-family:var(--font);font-weight:600;font-size:12px;padding:6px 16px;border-radius:999px;box-shadow:var(--shadow-sm)} .pname{font-family:var(--font);font-weight:700;font-size:16px;color:var(--purple)} .price{font-family:var(--font);font-weight:800;font-size:44px;margin:8px 0 2px;color:var(--ink)} .price small{font-size:16px;font-weight:600;color:var(--muted)} .pdesc{color:var(--muted);font-size:14px;margin-bottom:18px} .plan ul{list-style:none;padding:0;margin:0 0 24px;display:flex;flex-direction:column;gap:11px} .plan li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-2)} .plan .ck{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--purple-soft);color:var(--purple);font-size:12px;font-weight:700} .plan .btn{width:100%} .plan.featured .btn-primary{background:#fff;color:var(--purple-deep)} .pay-row{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:34px} .pchip{display:inline-flex;align-items:center;gap:9px;background:#fff;border-radius:999px;padding:9px 17px;font-family:var(--font);font-weight:600;font-size:13.5px;box-shadow:var(--shadow-sm)} .pchip .ci{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:13px} .pchip.btc .ci{background:#1a1a1a}.pchip.eth .ci{background:#3a3a3a}.pchip.usdt .ci{background:#585858} .pay-note{text-align:center;color:var(--muted);font-size:13.5px;margin-top:16px} /* ===================== FAQ ===================== */ .faq{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:960px;margin:0 auto;align-items:start} .qa{background:var(--card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)} .qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 22px;font-family:var(--font);font-weight:600;font-size:14.5px;color:var(--ink)} .qa summary::-webkit-details-marker{display:none} .qa .pl{font-size:21px;color:var(--ink);transition:.25s;line-height:1;font-weight:300} .qa[open] .pl{transform:rotate(45deg);color:var(--purple)} .qa .a{padding:0 22px 20px;color:var(--muted);font-size:14px} /* ===================== FINALE (floating cloud) ===================== */ .fin{position:relative;min-height:600px} .fin-head{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;z-index:3;width:min(560px,92%)} .fin-head h2{font-size:clamp(30px,4.6vw,48px);font-weight:600} .fin-head p{color:var(--muted);margin-top:14px} .fin-head .btn{margin-top:22px} .fin-cloud{position:absolute;inset:0;z-index:1} .fin-card{position:absolute;background:var(--card);border-radius:18px;padding:16px 18px;box-shadow:var(--shadow)} html.js .fin-card{animation:coinBob 5s ease-in-out infinite alternate} .fin-card .fv{font-family:var(--font);font-weight:800;font-size:24px;color:var(--ink)} .fin-card .fv.up{color:var(--up)} .fin-card .fv.acc{color:var(--purple)} .fin-card .fl2{color:var(--muted);font-size:12px;margin-top:2px} .fin-card.pcard-promo{background:linear-gradient(155deg,#242424,#000000);color:#fff;max-width:210px} .fin-card.pcard-promo .pv{font-family:var(--font);font-weight:700;font-size:16px;line-height:1.35} .fin-card svg.spark{width:150px;height:44px;display:block;margin-top:8px} .fin-card .trow{display:flex;align-items:center;gap:10px;font-family:var(--font);font-weight:600;font-size:13px} .fin-card .trow .tag{font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.14);color:var(--up)} .fin-card .trow .up{color:var(--up)} .f1{left:2%;top:6%} .f2{left:6%;bottom:10%} .f3{right:3%;top:9%} .f4{right:7%;bottom:8%} .f5{left:26%;top:-2%} .f6{right:24%;top:0} .fin-card:nth-child(2){animation-delay:.6s} .fin-card:nth-child(3){animation-delay:1.1s} .fin-card:nth-child(4){animation-delay:1.7s} .fin-card:nth-child(5){animation-delay:2.2s} .fin-card:nth-child(6){animation-delay:2.8s} .fin-note{text-align:center;color:var(--muted-2);font-size:12px;margin-top:26px} /* ===================== FOOTER ===================== */ footer{padding:64px 0 0;background:linear-gradient(180deg,transparent,rgba(0,0,0,.04))} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px} .foot-brand p{color:var(--muted);font-size:13.5px;margin:14px 0 18px;max-width:300px} .socials{display:flex;gap:10px} .socials a{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--muted);transition:.18s;box-shadow:var(--shadow-sm)} .socials a:hover{color:var(--purple);transform:translateY(-2px)} .socials a svg{width:17px;height:17px} .foot-col h5{font-family:var(--font);font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);margin-bottom:14px;font-weight:600} .foot-col a{display:block;color:var(--ink-2);font-size:13.5px;padding:5px 0;transition:.15s} .foot-col a:hover{color:var(--purple)} .disclaimer{color:var(--muted-2);font-size:11.5px;line-height:1.7;margin:38px 0 0;padding-top:24px;border-top:1px solid var(--line)} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:20px 0 28px;color:var(--muted-2);font-size:12.5px} .to-top{font-family:var(--font);font-weight:600;color:var(--ink);font-size:13px} .to-top:hover{color:var(--purple)} .foot-band{background:linear-gradient(120deg,#242424,#000000);text-align:center;padding:30px 24px} .foot-band a{font-family:var(--font);font-weight:600;font-size:clamp(20px,3vw,30px);color:#fff;display:inline-flex;align-items:center;gap:14px} .foot-band a .arw{font-size:26px;transition:.22s} .foot-band a:hover .arw{transform:translateX(8px)} /* ===================== BLOG ===================== */ .page-hero{text-align:center;padding:52px 40px 18px} .page-hero h1{font-size:clamp(32px,5vw,50px);font-weight:600} .page-hero p{color:var(--muted);max-width:620px;margin:16px auto 0;font-size:16px} .breadcrumb{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted);margin-bottom:16px} .breadcrumb a:hover{color:var(--purple)} .breadcrumb .sep{opacity:.5} .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .post-card{background:var(--card);border-radius:var(--r-lg);overflow:hidden;transition:.2s;box-shadow:var(--shadow-sm)} .post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .post-card .thumb{display:block;aspect-ratio:16/9;background:linear-gradient(150deg,#f2ecfe,#e4d7fc)} .post-card .thumb svg{width:100%;height:100%} .pc-body{padding:22px} .chip{display:inline-block;font-family:var(--font);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--purple);background:var(--purple-soft);padding:5px 12px;border-radius:999px;margin-bottom:12px} .pc-body h3{font-size:18px;line-height:1.3;margin-bottom:9px;font-weight:700} .pc-body h3 a:hover{color:var(--purple)} .pc-body p{color:var(--muted);font-size:13.5px} .post-meta{display:flex;align-items:center;gap:9px;color:var(--muted-2);font-size:12.5px;margin:14px 0} .dotsep{opacity:.5} .read{font-family:var(--font);font-weight:600;font-size:13.5px;color:var(--purple)} .article{max-width:760px;margin:0 auto;background:var(--card);border-radius:var(--r-lg);padding:clamp(24px,4vw,48px);box-shadow:var(--shadow-sm)} .article h1{font-size:clamp(28px,4.4vw,44px);margin:12px 0 4px;font-weight:600} .article .lead{font-size:18px;color:var(--ink-2);margin:22px 0 28px} .article-body h2{font-size:25px;margin:36px 0 12px;font-weight:600} .article-body h3{font-size:18px;margin:26px 0 8px;color:var(--purple-ink);font-weight:700} .article-body p{color:var(--ink-2);margin:12px 0;font-size:15.5px} .article-body em{color:var(--purple-ink)} .article-body blockquote{margin:22px 0;padding:16px 22px;border-left:3px solid var(--purple);background:var(--purple-soft);border-radius:0 14px 14px 0;color:var(--ink-2);font-style:italic} .article-cta{margin:40px 0 0;text-align:center;background:linear-gradient(160deg,#fff,#f0e8fe);border-radius:var(--r-lg);padding:36px;box-shadow:var(--shadow-sm)} :lang(fa) .article-body blockquote{border-left:0;border-right:3px solid var(--purple);border-radius:14px 0 0 14px} /* ===================== REVEAL ===================== */ html.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} html.js .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s} /* ===================== RESPONSIVE ===================== */ @media(max-width:1020px){ body{padding:12px} .sheet{border-radius:30px} .wrap{padding:0 22px} .nav-links{display:none} .nav-toggle{display:grid;place-items:center} .bento{grid-template-columns:1fr 1fr} .span2{grid-column:span 2} .lgrid{grid-template-columns:1fr 1fr} .mkts{grid-template-columns:1fr;gap:24px} .mkts-left{position:static} .steps{grid-template-columns:1fr;gap:30px} .faq{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} .blog-grid{grid-template-columns:1fr} .fin{min-height:0} .fin-head{position:static;transform:none;margin:0 auto 26px} .fin-cloud{position:static;display:grid;grid-template-columns:1fr 1fr;gap:12px} .fin-card{position:static} .fin-card.pcard-promo{max-width:none} } @media(max-width:560px){ body{padding:8px} .sheet{border-radius:22px} .sec{padding:56px 0} .lgrid{grid-template-columns:1fr} .plans{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .fin-cloud{grid-template-columns:1fr} .lang-btn span:not(.fl){display:none} .mcard{min-height:400px;padding:26px} .mpill{left:26px;top:36px;height:120px} .orbit{height:230px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} html.js .reveal{opacity:1!important;transform:none!important} html.js [data-morph] .w{opacity:1!important;transform:none!important;font-weight:inherit!important} .coin-node{opacity:1!important} }