@font-face {  font-family: "YekanBakh";  src: url("../fonts/YekanBakh-Regular.woff") format("woff");  font-weight: 400;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: "YekanBakh";  src: url("../fonts/YekanBakh-Medium.woff") format("woff");  font-weight: 500;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: "YekanBakh";  src: url("../fonts/YekanBakh-SemiBold.woff") format('woff'); font-weight: 600; font-style: normal;  font-display: swap;   }
@font-face {  font-family: "YekanBakh";  src: url("../fonts/YekanBakh-Bold.woff") format("woff");  font-weight: 700;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: "YekanBakh";  src: url("../fonts/YekanBakh-Fat.woff") format("woff");  font-weight: 900;  font-style: normal;  font-display: swap;  }

html{scroll-behavior:smooth}
    body{overflow-x:hidden}

    /* Hero: only custom motion/image-crop logic lives outside Tailwind. */
    .hero-shell{
      --orbit-center-y:62%;
      --orbit-rx:29%;
      --orbit-ry:15%;
      isolation:isolate;
      perspective:1100px;
    }
    .hero-hand{
      animation:handFloat 5.8s ease-in-out infinite;
      transform-origin:50% 100%;
      filter:drop-shadow(0 22px 28px rgba(12,65,38,.13));
      pointer-events:none;
    }
    .finger-glow{
      position:absolute;
      left:50%;
      top:54%;
      width:11%;
      aspect-ratio:1;
      transform:translate(-50%,-50%);
      border-radius:9999px;
      z-index:4;
      pointer-events:none;
      background:radial-gradient(circle,rgba(103,255,163,.28) 0%,rgba(87,189,132,.14) 30%,rgba(87,189,132,.04) 52%,transparent 72%);
      filter:blur(5px);
      animation:fingerPulse 4.8s ease-in-out infinite;
    }
    .coin-orbit{position:absolute;inset:0;z-index:6;pointer-events:none}
    .coin-orbit::before{
      content:"";
      position:absolute;
      left:50%;
      top:var(--orbit-center-y);
      width:58%;
      height:30%;
      transform:translate(-50%,-50%) rotate(-4deg);
      border:1px solid rgba(87,189,132,.14);
      border-radius:50%;
      box-shadow:0 0 34px rgba(87,189,132,.06);
      opacity:.72;
      -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
      mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%);
    }
    .coin-crop{
      position:absolute;
      left:0;
      top:0;
      overflow:hidden;
      offset-path:ellipse(var(--orbit-rx) var(--orbit-ry) at 50% var(--orbit-center-y));
      offset-anchor:center;
      offset-rotate:0deg;
      transform-origin:50% 50%;
      backface-visibility:hidden;
      will-change:offset-distance,transform,opacity;
      animation:safeCoinOrbit 44s linear infinite,safeCoinDepth 44s linear infinite;
      animation-delay:var(--phase),var(--phase);
      filter:drop-shadow(0 13px 17px rgba(15,88,45,.16));
    }
    .coin-crop img{position:absolute;display:block;max-width:none}
    .c1{--phase:0s;width:7.1%;height:11.1%}.c1 img{height:347.56%;width:501.28%;left:-83.55%;top:-16.17%}
    .c2{--phase:-7.33s;width:9.2%;height:14.8%}.c2 img{height:377.78%;width:554.61%;left:-358.98%;top:-26.27%}
    .c3{--phase:-14.66s;width:9.3%;height:14.7%}.c3 img{height:363.12%;width:542.76%;left:-92.23%;top:-134.4%}
    .c4{--phase:-22s;width:7.2%;height:8.8%}.c4 img{height:390.84%;width:455.79%;left:-329.67%;top:-279.77%}
    .c5{--phase:-29.33s;width:8.2%;height:13.7%}.c5 img{height:271.53%;width:436.87%;left:-160.17%;top:-22.17%}
    .c6{--phase:-36.66s;width:8.3%;height:13.8%}.c6 img{height:401.03%;width:630.65%;left:-372.46%;top:-146.03%}

    @keyframes handFloat{
      0%,100%{transform:translate(-50%,0) rotate(-.25deg)}
      50%{transform:translate(-50%,-7px) rotate(.35deg)}
    }
    @keyframes fingerPulse{
      0%,100%{opacity:.65;transform:translate(-50%,-50%) scale(.92)}
      50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
    }
    @keyframes safeCoinOrbit{from{offset-distance:0%}to{offset-distance:100%}}
    @keyframes safeCoinDepth{
      0%,100%{transform:scale(.82);opacity:.7}
      25%{transform:scale(.95);opacity:.9}
      50%{transform:scale(1.06);opacity:1}
      75%{transform:scale(.94);opacity:.88}
    }

    /* Feature art is exported as a single sprite, so crop coordinates remain custom CSS. */
    .feature-art{position:absolute;left:50%;transform:translateX(-50%);overflow:hidden;filter:drop-shadow(0 15px 20px rgba(16,185,129,.11));pointer-events:none}
    .feature-art img{position:absolute;display:block;max-width:none}
    .feature-art.square{width:180px;height:180px}.feature-art.tall{width:161px;height:180px}
    .feature-art.top{top:-88px}.feature-art.bottom{bottom:-88px}
    .feature-interface img{width:256%;height:391.84%;left:-28.75%;top:-24.74%}
    .feature-speed img{width:256%;height:391.84%;left:-135.74%;top:-24.74%}
    .feature-security img{width:256%;height:391.84%;left:-25.96%;top:-138.74%}
    .feature-fees img{width:256%;height:391.84%;left:-137.69%;top:-141.62%}
    .feature-crypto img{width:256%;height:351.42%;left:-26.01%;top:-222.18%}
    .feature-support img{width:256%;height:351.42%;left:-138.12%;top:-222.18%}

    /* Market rows: logo | stacked price | change | buy button */
    .market-row{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
      align-items:center;
      column-gap:clamp(.5rem,2vw,1.5rem);
      row-gap:.375rem;
      min-height:68px;
      padding:.5rem .375rem;
      border-radius:.75rem;
      background:#fff;
      box-shadow:0 12px 32px rgba(16,24,40,.06);
    }
    .market-price{
      display:flex;
      min-width:0;
      width:100%;
      flex-direction:column;
      align-items:center;
      gap:.15rem;
      text-align:center;
      line-height:1.25;
    }
    .market-price-line{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:.2rem;
      white-space:nowrap;
    }
    .market-price-toman{
      font-size:.8125rem;
      font-weight:600;
      color:#111;
    }
    .market-price-usd{
      font-size:.75rem;
      font-weight:500;
      color:#6b7280;
    }
    .market-price-usd [data-usd-price]{
      font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
    }
    .market-price-unit{
      font-size:.6875rem;
      font-weight:400;
      color:#9ca3af;
    }
    .market-row [data-change]{
      justify-self:center;
    }
    .market-row [data-trade-link],
    .market-row [data-market-skel-trade]{
      display:flex;
      width:100%;
      max-width:9.5rem;
      height:2.25rem;
      align-items:center;
      justify-content:center;
      justify-self:end;
      padding:0 .5rem;
      font-size:.75rem;
      white-space:nowrap;
    }
    @media (min-width:640px){
      .market-row{padding:.5rem .75rem}
    }
    @media (min-width:768px){
      .market-row{
        column-gap:clamp(1rem,3vw,2rem);
        padding:1rem 1.25rem;
      }
      .market-price-toman{font-size:1rem}
      .market-price-usd{font-size:.875rem}
      .market-price-unit{font-size:.8125rem}
      .market-row [data-trade-link],
      .market-row [data-market-skel-trade]{
        max-width:11rem;
        height:2.5rem;
        padding:0 .75rem;
        font-size:.875rem;
      }
    }

    @media (max-width:767px){
      .hero-shell{--orbit-center-y:69%;--orbit-rx:36%;--orbit-ry:10.5%}
      .finger-glow{top:61%;width:19%}
      .coin-orbit::before{top:var(--orbit-center-y);width:76%;height:21%}
      .c1{width:11.5%;height:9%}.c2{width:14.5%;height:11.5%}.c3{width:14.5%;height:11.5%}
      .c4{width:11.5%;height:7%}.c5{width:13.5%;height:10.5%}.c6{width:13.5%;height:10.5%}
      .feature-art.square{width:150px;height:150px}.feature-art.tall{width:136px;height:150px}
      .feature-art.top{top:-68px}.feature-art.bottom{bottom:-68px}
    }

    @media (prefers-reduced-motion:reduce){
      .hero-hand,.finger-glow,.coin-crop{animation:none!important}
      .coin-crop{opacity:.9}
    }