/* ===========================================================
   اهورا · AHURA — بنتوِ نور  (Bento of Light)
   Premium dark startup · live product tiles · ask-the-AI
   =========================================================== */

/* Fonts + design tokens live in tokens.css (loaded first on every page). */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
*{-webkit-tap-highlight-color:transparent}
/* visually hidden but crawlable / screen-reader content */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* trust strip under the topbar */
.trust-strip{position:fixed;top:74px;left:0;right:0;z-index:20;display:flex;gap:9px;justify-content:center;align-items:center;
  pointer-events:none;color:var(--faint);font-size:11px;letter-spacing:.02em}
.trust-strip i{opacity:.45;font-style:normal}
.trust-strip span{white-space:nowrap}
@media(max-width:600px){.trust-strip{top:64px;font-size:10px;gap:7px}}
@media(max-width:360px){.trust-strip{display:none}}
/* while grabbing a planet, fade the chrome so the space reads cleanly */
.topbar,.corner-cards,.mini-wall,.site-foot,.trust-strip{transition:opacity .35s ease}
body.grabbing .topbar,body.grabbing .corner-cards,body.grabbing .mini-wall,body.grabbing .site-foot,body.grabbing .trust-strip{opacity:0;pointer-events:none}
body{
  font-family:'Vazirmatn','Inter',system-ui,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow:hidden;position:fixed;inset:0;display:flex;flex-direction:column;
}
body[dir="ltr"]{font-family:'Inter','Vazirmatn',system-ui,sans-serif}
.lat{font-family:'Inter',sans-serif;font-feature-settings:"tnum" 1;letter-spacing:.01em}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;color:inherit}
::selection{background:rgba(244,180,94,.3);color:#fff}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:9px}

/* ambient backdrop glow */
.backdrop{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 8%, rgba(244,180,94,.08), transparent 60%),
    radial-gradient(50% 50% at 88% 96%, rgba(143,168,255,.06), transparent 60%),
    radial-gradient(50% 50% at 8% 92%, rgba(52,215,200,.05), transparent 60%);}

/* ===========================================================
   TOP BAR
   =========================================================== */
.topbar{position:relative;z-index:30;height:68px;flex:none;
  display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,40px)}
.brand{display:flex;align-items:center;gap:11px}
.brand .mark{width:32px;height:32px;position:relative;flex:none;color:var(--amber);opacity:0}
html.seen .brand .mark{opacity:1}
.glyph-svg{width:100%;height:100%;overflow:visible;display:block}
.glyph-svg .g-ring,.glyph-svg .g-dash,.glyph-svg .g-rays line{stroke:currentColor;fill:none}
.glyph-svg .g-ring{stroke-width:3.4}
.glyph-svg .g-dash{stroke-width:1.4;opacity:.5}
.glyph-svg .g-rays line{stroke-width:2.6;stroke-linecap:round}
.glyph-svg .g-core{fill:var(--core);stroke:none;filter:drop-shadow(0 0 5px var(--amber))}
/* the topbar logo is always gently alive */
.brand .mark .g-rays{transform-origin:50% 50%;transform-box:fill-box;animation:glyphSpin calc(36s / var(--motion,1)) linear infinite}
.brand .mark .g-dash{transform-origin:50% 50%;transform-box:fill-box;animation:glyphSpin calc(52s / var(--motion,1)) linear infinite reverse}
.brand .mark .g-core{transform-origin:50% 50%;transform-box:fill-box;animation:glyphPulse calc(3.4s / var(--motion,1)) ease-in-out infinite}
.brand .mark .g-ring{transform-origin:50% 50%;transform-box:fill-box;animation:glyphBreathe calc(5s / var(--motion,1)) ease-in-out infinite}
@keyframes glyphSpin{to{transform:rotate(360deg)}}
@keyframes glyphPulse{0%,100%{opacity:.82;filter:drop-shadow(0 0 3px var(--amber))}50%{opacity:1;filter:drop-shadow(0 0 9px var(--amber))}}
@keyframes glyphBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.brand .word{font-weight:800;font-size:21px;color:var(--ink);line-height:1}
.brand .word small{display:block;font-family:'Inter';font-weight:600;font-size:8.5px;letter-spacing:.34em;color:var(--faint);margin-top:4px}
.topnav{display:flex;align-items:center;gap:4px}
.topnav a{font-size:13.5px;color:var(--muted);padding:8px 14px;border-radius:9px;transition:.25s}
.topnav a:hover{color:var(--ink);background:rgba(255,255,255,.05)}
.topright{display:flex;align-items:center;gap:12px}
.lang-toggle{display:flex;align-items:center;border:1px solid var(--line-2);border-radius:999px;padding:3px;
  font-family:'Inter';font-size:12px;font-weight:600;background:rgba(12,12,18,.6)}
.lang-toggle button{background:none;border:none;color:var(--faint);padding:5px 11px;border-radius:999px;transition:.25s}
.lang-toggle button.on{background:var(--grad-primary);color:#1A1206}
.snd-toggle{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);
  background:rgba(12,12,18,.6);color:var(--ink);cursor:pointer;position:relative;flex:none;transition:.25s}
.snd-toggle svg{width:18px;height:18px}
.snd-toggle:hover{border-color:var(--amber);color:var(--amber)}
.snd-toggle.muted{color:var(--faint)}
.snd-toggle.muted .snd-wave{opacity:0}
.acct-link{display:grid;place-items:center;height:34px;padding:0 14px;border-radius:17px;border:1px solid var(--line-2);
  background:rgba(12,12,18,.6);color:var(--ink);font:inherit;font-size:13px;font-weight:600;text-decoration:none;flex:none;white-space:nowrap;transition:.25s}
.acct-link:hover{border-color:var(--amber);color:var(--amber)}
@media(max-width:600px){.acct-link{padding:0 11px;font-size:12px}}
.snd-toggle.muted::after{content:"";position:absolute;width:22px;height:2px;background:currentColor;transform:rotate(-45deg);border-radius:2px}

/* token pill in topbar */
.token-pill{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);border-radius:999px;
  padding:5px 13px 5px 7px;background:rgba(124,92,255,.08);font-family:'Inter';font-size:12px;color:var(--ink);transition:.25s;white-space:nowrap}
.token-pill:hover{border-color:#B79BFF;background:rgba(124,92,255,.16);transform:translateY(-1px)}
.token-pill img{width:22px;height:22px;object-fit:contain;filter:drop-shadow(0 2px 7px rgba(124,92,255,.55));animation:coinFloat 5.5s ease-in-out infinite}
.token-pill .lat b{color:#fff;font-weight:700}

/* ===========================================================
   APP SHELL — fixed hero band + scrolling catalog
   =========================================================== */
.shell{flex:1;min-height:0;display:flex;flex-direction:column;
  transition:transform .6s var(--ease-out),opacity .45s var(--ease),filter .45s var(--ease)}
body.panel-open .shell{transform:scale(.99);opacity:0;filter:blur(6px) brightness(.7);pointer-events:none}

.hero-band{flex:none;position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  padding:clamp(16px,2.4vw,30px) clamp(18px,4vw,48px) clamp(16px,2vw,24px) !important;
  justify-content:flex-start !important;
  animation:heroIn .7s var(--ease-out)}
@keyframes heroIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.hero-band .hcontent{max-width:1320px;margin:0 auto;width:100%}
.hero-band .kicker{margin-bottom:12px !important}
.hero-band h1{font-size:clamp(25px,3.4vw,44px) !important;margin-bottom:10px}
.hero-band p.sub{font-size:clamp(13.5px,1.05vw,15.5px);margin-bottom:16px;max-width:60ch}
.hero-band .hero-trust{margin-top:16px;padding-top:14px}

.workspace{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.toolbar{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px clamp(18px,4vw,48px);background:rgba(8,8,12,.84);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.search{display:flex;align-items:center;gap:8px;flex:1 1 200px;max-width:340px;
  background:var(--tile);border:1px solid var(--line-2);border-radius:11px;padding:9px 13px;transition:border-color .25s}
.search:focus-within{border-color:var(--amber)}
.search svg{width:16px;height:16px;color:var(--faint);flex:none}
.search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--ink);font-family:inherit;font-size:14px}
.search input::placeholder{color:var(--faint)}
.filterseg{flex:0 0 auto;width:auto}
.filterseg button{flex:0 0 auto;padding:7px 15px;font-size:12.5px}
.rescount{margin-inline-start:auto;font-family:'Inter';font-size:12.5px;color:var(--faint);white-space:nowrap}

.catalog{max-width:1320px;margin:0 auto;padding:clamp(16px,2.4vw,26px) clamp(18px,4vw,48px) 56px}
.cat-sec{margin-bottom:30px}
.cat-sec.hidden{display:none}
.cat-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.cat-head h3{font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.cat-head .cat-count{font-size:11px;color:var(--faint);background:var(--tile);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.cat-head .cat-line{flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;align-items:start}

.pcard{position:relative;text-align:start;border-radius:18px;overflow:hidden;cursor:pointer;
  background:linear-gradient(180deg,var(--tile-2),var(--tile));border:1px solid var(--line);padding:16px;
  display:flex;flex-direction:column;animation:cardIn .5s var(--ease-out);
  transition:transform .4s var(--ease-out),border-color .4s,box-shadow .4s}
@keyframes cardIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.pcard::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%,var(--glow),transparent 58%);opacity:0;transition:opacity .4s}
.pcard:hover{transform:translateY(-4px);border-color:var(--tint);box-shadow:0 22px 50px -24px var(--glow)}
.pcard:hover::after{opacity:1}
.pcard.hidden{display:none}
.pcard.feat{border-color:color-mix(in oklab,var(--tint) 28%,var(--line))}
.pcard .viz{height:62px;border-radius:12px;margin-bottom:13px;position:relative;overflow:hidden;
  background:radial-gradient(120% 130% at 50% 130%,var(--glow),rgba(255,255,255,.015));
  border:1px solid var(--line);display:grid;place-items:center}
.pcard.feat .viz{height:92px}
.pcard .ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.pcard .pname{display:flex;align-items:baseline;gap:7px}
.pcard .pname b{font-size:19px;font-weight:800;color:var(--ink);line-height:1.2}
.pcard .pname .lat{font-size:11px;color:var(--faint);font-weight:500}
.pcard .prole{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.pcard .pstat{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;white-space:nowrap}
.pcard .pstat i{width:6px;height:6px;border-radius:50%;display:inline-block}
.pcard .ask-hint{margin-top:11px;font-size:11.5px;color:var(--tint);display:inline-flex;align-items:center;gap:6px;opacity:.85}
.pcard .ask-hint svg{width:13px;height:13px}
.noresult{display:none;text-align:center;color:var(--faint);font-size:14px;padding:54px 20px}
.noresult.show{display:block}

/* ===========================================================
   BENTO STAGE
   =========================================================== */
.stage{position:fixed;top:68px;inset-inline:0;bottom:0;z-index:5;
  padding:clamp(12px,2vw,22px) clamp(18px,4vw,40px) clamp(16px,2.4vw,26px);
  transition:transform .7s var(--ease-out), opacity .5s var(--ease), filter .5s var(--ease)}
body.panel-open .stage{transform:scale(.975);opacity:0;filter:blur(6px) brightness(.7);pointer-events:none}

.bento{height:100%;display:grid;gap:clamp(10px,1.4vw,16px);
  grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);
  grid-template-areas:
    "hero hero parto arzhang"
    "hero hero manshoor nava"
    "hero hero sina negar"
    "token token guya soon";
  max-width:1320px;margin:0 auto}

.tile{position:relative;border-radius:20px;overflow:hidden;
  background:linear-gradient(180deg,var(--tile-2),var(--tile));
  border:1px solid var(--line);padding:clamp(14px,1.6vw,22px);
  transition:transform .42s var(--ease-out),border-color .4s,box-shadow .4s,background .4s}
.tile.clickable{cursor:pointer}
.tile.clickable::after{content:"";position:absolute;inset:0;border-radius:20px;pointer-events:none;
  background:radial-gradient(120% 90% at 50% -10%, var(--glow,rgba(244,180,94,.14)), transparent 58%);opacity:0;transition:opacity .4s}
.tile.clickable:hover{transform:translateY(-5px);border-color:var(--tint,var(--line-gold));
  box-shadow:0 24px 56px -24px var(--glow,rgba(244,180,94,.4))}
.tile.clickable:hover::after{opacity:1}

/* ===========================================================
   HERO TILE  (the world opens)
   =========================================================== */
.t-hero{grid-area:hero;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(24px,3.4vw,46px);overflow:hidden}
.t-hero .worldviz{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;will-change:transform}
/* drifting light auras — warm, premium, alive */
.t-hero .worldviz .aura{position:absolute;border-radius:50%;filter:blur(46px);mix-blend-mode:screen}
.t-hero .worldviz .a1{width:52%;height:64%;top:-16%;inset-inline-end:-8%;
  background:radial-gradient(closest-side,rgba(244,180,94,.5),transparent 72%);
  animation:auraDrift calc(15s / var(--motion,1)) ease-in-out infinite}
.t-hero .worldviz .a2{width:46%;height:56%;bottom:-18%;inset-inline-start:2%;
  background:radial-gradient(closest-side,rgba(214,99,58,.42),transparent 72%);
  animation:auraDrift calc(19s / var(--motion,1)) ease-in-out infinite reverse}
.t-hero .worldviz .a3{width:38%;height:46%;top:26%;inset-inline-start:42%;
  background:radial-gradient(closest-side,rgba(150,120,255,.32),transparent 72%);
  animation:auraDrift2 calc(23s / var(--motion,1)) ease-in-out infinite}
@keyframes auraDrift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6%,8%) scale(1.16)}}
@keyframes auraDrift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8%,-7%) scale(1.12)}}
/* slow conic light sweep (lighthouse) */
.t-hero .worldviz .sweep{position:absolute;inset:-45%;mix-blend-mode:screen;opacity:.7;
  background:conic-gradient(from 0deg at 50% 50%, transparent 0 64deg, rgba(255,244,222,.1) 84deg, rgba(244,180,94,.04) 96deg, transparent 110deg 360deg);
  animation:sweepRot calc(20s / var(--motion,1)) linear infinite}
@keyframes sweepRot{to{transform:rotate(360deg)}}
/* fine floating motes */
.t-hero .worldviz .mote{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 8px var(--amber);opacity:.5;animation:moteFloat calc(var(--md,9s) / var(--motion,1)) ease-in-out infinite}
@keyframes moteFloat{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-22px);opacity:.7}}
.t-hero .worldviz .grain{position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 60% at 72% 18%, rgba(244,180,94,.1), transparent 60%)}

.t-hero .hcontent{position:relative;z-index:3}
.t-hero .kicker{display:inline-flex;align-items:center;gap:9px;font-size:11.5px;font-weight:600;
  color:var(--amber);letter-spacing:.18em;text-transform:uppercase;font-family:'Inter';margin-bottom:18px}
.t-hero .kicker i{width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 9px var(--amber)}
.t-hero h1{font-weight:800;font-size:clamp(30px,4.2vw,58px);line-height:1.16;letter-spacing:-.01em;text-wrap:balance;margin-bottom:16px}
.t-hero h1 .lit{
  background:linear-gradient(110deg,#fff 0%,var(--amber) 34%,#ffe9c8 50%,var(--amber) 66%,#fff 100%);
  background-size:240% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(244,180,94,.28));
  animation:litShimmer calc(7s / var(--motion,1)) linear infinite}
@keyframes litShimmer{to{background-position:-240% 0}}
.t-hero p.sub{font-size:clamp(14px,1.15vw,17px);color:var(--muted);max-width:44ch;margin-bottom:24px;line-height:1.8}
.t-hero .cta-row{display:flex;gap:12px;flex-wrap:wrap}
.t-hero .hero-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.t-hero .hero-trust .ht{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);white-space:nowrap;flex:0 0 auto}
.t-hero .hero-trust .ht svg{width:16px;height:16px;color:var(--amber);flex:none}

/* ===========================================================
   BUTTONS
   =========================================================== */
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:12px;font-weight:600;font-size:14.5px;
  padding:13px 24px;transition:transform .3s var(--ease),box-shadow .3s,background .3s,border-color .3s;white-space:nowrap}
.btn-primary{background:var(--grad-primary);color:#1A1206;
  box-shadow:0 10px 30px rgba(244,180,94,.28),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 44px rgba(244,180,94,.44)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--ink);border:1px solid var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.09);transform:translateY(-2px)}
.btn svg{width:16px;height:16px}

/* ===========================================================
   PRODUCT TILES (live)
   =========================================================== */
.t-prod{display:flex;flex-direction:column;justify-content:space-between;min-height:0}
.t-prod.t-parto{grid-area:parto;--tint:#5BC0FF;--glow:rgba(91,192,255,.2)}
.t-prod.t-arzhang{grid-area:arzhang;--tint:#C78BFF;--glow:rgba(199,139,255,.2)}
.t-prod.t-manshoor{grid-area:manshoor;--tint:#FF5C72;--glow:rgba(255,92,114,.2)}
.t-prod.t-nava{grid-area:nava;--tint:var(--c-nava);--glow:rgba(52,215,200,.2)}
.t-prod.t-sina{grid-area:sina;--tint:var(--c-sina);--glow:rgba(95,214,140,.2)}
.t-prod.t-negar{grid-area:negar;--tint:var(--c-negar);--glow:rgba(255,138,107,.2)}
.t-prod.t-guya{grid-area:guya;--tint:var(--c-guya);--glow:rgba(143,168,255,.2)}
.t-prod .viz{flex:1;min-height:34px;border-radius:13px;margin-bottom:12px;position:relative;overflow:hidden;
  background:radial-gradient(120% 120% at 50% 130%, var(--glow), rgba(255,255,255,.015));
  border:1px solid var(--line);display:grid;place-items:center}
.t-prod .ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.t-prod .pname{display:flex;align-items:baseline;gap:7px}
.t-prod .pname b{font-size:clamp(18px,1.5vw,23px);font-weight:800;color:var(--ink);line-height:1.2}
.t-prod .pname .lat{font-size:11px;color:var(--faint);font-weight:500}
.t-prod .prole{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.t-prod .pstat{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600}
.t-prod .pstat i{width:6px;height:6px;border-radius:50%;display:inline-block}
.t-prod .ask-hint{margin-top:10px;font-size:11.5px;color:var(--tint);display:inline-flex;align-items:center;gap:6px;opacity:.85}
.t-prod .ask-hint svg{width:13px;height:13px}
.st-available{color:var(--c-sina)} .st-available i{background:var(--c-sina);box-shadow:0 0 8px var(--c-sina)}
.st-prototype,.st-building{color:var(--amber)} .st-prototype i,.st-building i{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.st-soon{color:var(--faint)} .st-soon i{background:var(--faint)}

/* live motifs */
.viz-eq{display:flex;align-items:flex-end;gap:3px;height:60%}
.viz-eq span{width:3px;background:linear-gradient(180deg,var(--tint),transparent);border-radius:2px;animation:eq calc(1.1s / var(--motion,1)) ease-in-out infinite}
.viz-eq span:nth-child(2){animation-delay:.15s}.viz-eq span:nth-child(3){animation-delay:.3s}.viz-eq span:nth-child(4){animation-delay:.45s}
.viz-eq span:nth-child(5){animation-delay:.6s}.viz-eq span:nth-child(6){animation-delay:.22s}.viz-eq span:nth-child(7){animation-delay:.5s}
.viz-eq span:nth-child(8){animation-delay:.35s}.viz-eq span:nth-child(9){animation-delay:.12s}
@keyframes eq{0%,100%{height:18%}50%{height:92%}}
.viz-svg{width:80%;height:60%}
.viz-svg path{fill:none;stroke:var(--tint);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:150;stroke-dashoffset:150;animation:draw calc(2.6s / var(--motion,1)) linear infinite}
@keyframes draw{0%{stroke-dashoffset:150}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-150}}
.viz-frames{display:flex;gap:6px}
.viz-frames span{width:17px;height:26px;border-radius:4px;background:linear-gradient(180deg,var(--glow),transparent);border:1px solid var(--tint);opacity:.4;animation:shim calc(1.7s / var(--motion,1)) ease-in-out infinite}
.viz-frames span:nth-child(2){animation-delay:.22s}.viz-frames span:nth-child(3){animation-delay:.44s}.viz-frames span:nth-child(4){animation-delay:.66s}
@keyframes shim{0%,100%{opacity:.35}50%{opacity:1;box-shadow:0 0 12px var(--glow)}}
.viz-bars{display:flex;align-items:flex-end;gap:5px;height:64%}
.viz-bars span{width:9px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--tint),var(--glow));animation:grow calc(2.3s / var(--motion,1)) var(--ease) infinite}
.viz-bars span:nth-child(2){animation-delay:.25s}.viz-bars span:nth-child(3){animation-delay:.5s}.viz-bars span:nth-child(4){animation-delay:.75s}.viz-bars span:nth-child(5){animation-delay:1s}
@keyframes grow{0%,100%{height:16%;opacity:.5}45%,60%{opacity:1}50%{height:96%}}
/* streaming chat (Parto) */
.viz-stream{display:flex;flex-direction:column;gap:5px;width:62%}
.viz-stream span{height:4px;border-radius:3px;background:linear-gradient(90deg,var(--tint),transparent);
  transform-origin:right center;animation:stream calc(2.6s / var(--motion,1)) ease-in-out infinite}
.viz-stream span:nth-child(1){width:100%}
.viz-stream span:nth-child(2){width:84%;animation-delay:.35s}
.viz-stream span:nth-child(3){width:62%;animation-delay:.7s}
@keyframes stream{0%{transform:scaleX(.12);opacity:.4}55%{opacity:1}100%{transform:scaleX(1);opacity:.85}}
/* generate frame (Arzhang) */
.viz-gen{position:relative;width:58px;height:36px;border-radius:7px;border:1px solid var(--tint);overflow:hidden;
  background:linear-gradient(180deg,var(--glow),transparent)}
.viz-gen .scan{position:absolute;top:0;bottom:0;width:34%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:scan calc(2.3s / var(--motion,1)) ease-in-out infinite}
@keyframes scan{0%{transform:translateX(-130%)}100%{transform:translateX(360%)}}
.viz-gen .spark{position:absolute;top:6px;inset-inline-end:8px;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 9px var(--tint);animation:twk calc(1.9s / var(--motion,1)) ease-in-out infinite}
@keyframes twk{0%,100%{opacity:.3;transform:scale(.6)}50%{opacity:1;transform:scale(1)}}
/* persona / influencer (Negar) */
.viz-face{position:relative;width:40px;height:42px;display:grid;place-items:center}
.viz-face .head{width:18px;height:18px;border-radius:50%;border:1.8px solid var(--tint);position:relative;
  animation:facePulse calc(2.8s / var(--motion,1)) ease-in-out infinite}
.viz-face .head::after{content:"";position:absolute;left:50%;top:22px;transform:translateX(-50%);
  width:30px;height:16px;border-radius:15px 15px 0 0;border:1.8px solid var(--tint);border-bottom:none}
.viz-face .sp{position:absolute;top:2px;inset-inline-end:4px;width:6px;height:6px;border-radius:50%;background:#fff;
  box-shadow:0 0 9px var(--tint);animation:twk calc(2s / var(--motion,1)) ease-in-out infinite}
@keyframes facePulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 7px var(--tint))}}
/* presentation slide build (Guya) */
.viz-slide{width:58px;height:38px;border-radius:6px;border:1px solid var(--tint);padding:8px;
  display:flex;flex-direction:column;gap:4px;background:linear-gradient(180deg,var(--glow),transparent)}
.viz-slide .bar{height:4px;border-radius:2px;background:var(--tint);transform-origin:right center;
  animation:slideb calc(2.6s / var(--motion,1)) ease-in-out infinite}
.viz-slide .bar.t{width:60%;background:linear-gradient(90deg,var(--tint),transparent)}
.viz-slide .bar:nth-child(2){width:100%;animation-delay:.3s;opacity:.7}
.viz-slide .bar.s{width:82%;animation-delay:.6s;opacity:.7}
@keyframes slideb{0%{transform:scaleX(.18);opacity:.35}55%{opacity:1}100%{transform:scaleX(1)}}
/* media spectrum meter (Parto Media) */
.viz-spectrum{display:flex;align-items:flex-end;gap:6px;height:64%}
.viz-spectrum .s{width:11px;border-radius:3px;animation:spec calc(2.4s / var(--motion,1)) ease-in-out infinite}
.viz-spectrum .s.g{background:linear-gradient(180deg,#5FD68C,rgba(95,214,140,.2));animation-delay:0s}
.viz-spectrum .s.y{background:linear-gradient(180deg,#F4C95E,rgba(244,201,94,.2));animation-delay:.4s}
.viz-spectrum .s.r{background:linear-gradient(180deg,#FF5C72,rgba(255,92,114,.2));animation-delay:.8s}
@keyframes spec{0%,100%{height:30%;opacity:.55}50%{height:100%;opacity:1}}

/* ===========================================================
   TOKEN / TRUST / SOON tiles
   =========================================================== */
.t-token{grid-area:token;--tint:var(--c-token);--glow:rgba(150,110,255,.22);
  display:flex;align-items:center;gap:clamp(16px,2vw,30px)}
.t-token .coinlogo{width:clamp(70px,8vw,96px);aspect-ratio:1;flex:none;position:relative;display:grid;place-items:center;margin:6px}
.t-token .coinlogo .halo{position:absolute;inset:-15%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(150,110,255,.55),rgba(124,92,255,.12) 56%,transparent 72%);
  filter:blur(11px);animation:coinHalo calc(4.5s / var(--motion,1)) ease-in-out infinite}
.t-token .coinlogo .ring{position:absolute;inset:-4%;border-radius:50%;pointer-events:none;z-index:1;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(205,170,255,.55) 40deg, transparent 96deg, transparent 360deg);
  -webkit-mask:radial-gradient(closest-side, transparent 64%, #000 67%, #000 99%, transparent);
          mask:radial-gradient(closest-side, transparent 64%, #000 67%, #000 99%, transparent);
  opacity:.7;animation:coinRing calc(8s / var(--motion,1)) linear infinite}
.t-token .coinlogo img{width:100%;height:100%;object-fit:contain;position:relative;z-index:2;
  filter:drop-shadow(0 6px 16px rgba(124,92,255,.45));
  animation:coinFloat calc(5.5s / var(--motion,1)) ease-in-out infinite}
.t-token .coinlogo .shine{position:absolute;inset:13%;border-radius:50%;overflow:hidden;pointer-events:none;z-index:3}
.t-token .coinlogo .shine::before{content:"";position:absolute;top:-50%;left:-45%;width:40%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:rotate(20deg);mix-blend-mode:screen;
  animation:coinShine calc(5.2s / var(--motion,1)) ease-in-out infinite}
@keyframes coinFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}
@keyframes coinHalo{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.92;transform:scale(1.1)}}
@keyframes coinRing{to{transform:rotate(360deg)}}
@keyframes coinShine{0%{transform:translateX(-260%) rotate(18deg)}55%,100%{transform:translateX(360%) rotate(18deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.t-token .coin{animation:none}
.t-token .tk-body{min-width:0}
.t-token .tk-body .lbl{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);font-family:'Inter'}
.t-token .tk-body h3{font-size:clamp(17px,1.5vw,22px);font-weight:800;margin:3px 0 4px}
.t-token .tk-body .price{font-family:'Inter';font-size:13.5px;color:var(--muted)}
.t-token .tk-body .price b{color:var(--ink)}
.t-token .ask-hint{margin-top:8px;font-size:11.5px;color:var(--amber);display:inline-flex;align-items:center;gap:6px;opacity:.85}
.t-token .ask-hint svg{width:13px;height:13px}

.t-trust{grid-area:trust;display:flex;flex-direction:column;justify-content:center;gap:11px}
.t-trust .ti{display:flex;align-items:center;gap:11px;font-size:13.5px;color:var(--ink)}
.t-trust .ti .ic{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;color:var(--amber);
  background:rgba(244,180,94,.1);border:1px solid var(--line-gold)}
.t-trust .ti .ic svg{width:16px;height:16px}

.t-soon{grid-area:soon;border-style:dashed;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;text-align:center}
.t-soon .ap{width:38px;height:38px;border-radius:50%;border:1px dashed var(--line-2);display:grid;place-items:center;color:var(--faint);font-size:20px;
  animation:pulseDot calc(3s / var(--motion,1)) var(--ease) infinite}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(244,180,94,.16)}50%{box-shadow:0 0 0 9px rgba(244,180,94,0)}}
.t-soon b{font-size:15px;font-weight:700;color:var(--muted)}
.t-soon span{font-size:11.5px;color:var(--faint)}

/* ===========================================================
   INTRO LOADER — light particles converge → glyph → flies up
   =========================================================== */
.loader{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--bg);overflow:hidden;
  animation:loaderAutohide 0s linear forwards 5.4s}
@keyframes loaderAutohide{to{opacity:0;visibility:hidden;pointer-events:none}}
html.seen .loader{display:none}
.loader.gone{opacity:0;visibility:hidden;transition:opacity .6s ease, visibility 0s .6s;pointer-events:none;animation:none}
.loader-glow{position:absolute;width:54vmin;height:54vmin;border-radius:50%;
  background:radial-gradient(closest-side,rgba(244,180,94,.2),rgba(232,146,60,.05) 55%,transparent 72%);
  filter:blur(18px);opacity:0;animation:lglow 1.8s ease forwards .5s}
@keyframes lglow{to{opacity:1}}
.loader-particles{position:absolute;inset:0;pointer-events:none}
.loader-particles i{position:absolute;left:50%;top:50%;width:3px;height:3px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 8px var(--amber);opacity:0;
  animation:converge var(--d,1.7s) cubic-bezier(.3,.7,.2,1) forwards var(--delay,0s)}
@keyframes converge{
  0%{opacity:0;transform:translate(calc(-50% + var(--sx)),calc(-50% + var(--sy))) scale(.5)}
  22%{opacity:1}80%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
.loader-glyph{position:relative;width:clamp(108px,17vmin,140px);aspect-ratio:1;color:var(--amber);opacity:0;
  animation:glyphIn 1s var(--ease-out) forwards 1.45s}
@keyframes glyphIn{
  0%{opacity:0;transform:scale(.5);filter:brightness(2.4) drop-shadow(0 0 18px var(--amber))}
  55%{opacity:1}100%{opacity:1;transform:scale(1);filter:none}}
.loader-glyph.fly{transition:transform .85s var(--ease-out), opacity .4s ease}
.loader-word{position:absolute;top:calc(50% + clamp(76px,11vmin,96px));font-weight:800;font-size:24px;color:var(--ink);
  letter-spacing:.02em;opacity:0;animation:lword .7s var(--ease-out) forwards 2s}
@keyframes lword{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.loader-word.out{opacity:0;transition:opacity .35s ease}

/* ===========================================================
   INTRO TIMELINE  (auto-playing — end-state always visible)
   =========================================================== */
@keyframes tileIn{from{opacity:0;transform:translateY(24px) scale(.985);filter:blur(3px)}
  to{opacity:1;transform:none;filter:none}}
@keyframes barIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.tile{animation:tileIn .8s var(--ease-out)}
.t-hero{animation-delay:.12s}
.t-token{animation-delay:.3s}
.t-nava{animation-delay:.42s}
.t-sina{animation-delay:.52s}
.t-negar{animation-delay:.62s}
.t-guya{animation-delay:.72s}
.t-trust{animation-delay:.82s}
.t-soon{animation-delay:.9s}
.topbar .reveal{animation:barIn .7s var(--ease-out) .1s}

/* ===========================================================
   TWEAKS
   =========================================================== */
/* appearance-settings gear — lives in the top bar next to the sound toggle */
.tw-toggle svg{width:18px;height:18px;transition:transform .5s var(--ease)}
.tw-toggle:hover svg,.tw-toggle.on svg{transform:rotate(45deg)}
.tw-toggle.on{color:var(--amber);border-color:var(--line-gold)}
/* panel drops down from the top-right, right under the header near its trigger */
.tweaks{position:fixed;top:62px;inset-inline-end:14px;z-index:95;width:236px;
  background:rgba(18,18,26,.97);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:16px;padding:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.65);font-size:13px;display:none;animation:twIn .28s var(--ease-out)}
@keyframes twIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.tweaks.show{display:block}
.tweaks h6{font-size:11px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase;font-family:'Inter';
  margin-bottom:14px;display:flex;justify-content:space-between;align-items:center}
.tweaks .tw{margin-bottom:13px}
.tweaks label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
.seg{display:flex;gap:4px;background:var(--bg);border-radius:10px;padding:3px;border:1px solid var(--line)}
.seg button{flex:1;border:none;background:none;color:var(--faint);font-size:11px;padding:6px 4px;border-radius:7px;transition:.2s}
.seg button.on{background:var(--grad-primary);color:#1A1206}
.tw-close{background:none;border:none;color:var(--faint);font-size:16px}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width:1000px){
  .topnav{display:none}
  .stage{position:absolute;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;height:auto;min-height:100%;
    grid-template-areas:
      "hero hero" "parto arzhang" "manshoor nava" "sina negar" "guya soon" "token token"}
  .t-hero{min-height:42vh}
  .t-prod{min-height:158px}
  .t-token{min-height:120px}
}
@media (max-width:600px){
  .topbar{height:60px;padding:0 18px}
  .stage{top:60px;padding:14px 16px 22px}
  .bento{grid-template-columns:1fr;gap:12px;
    grid-template-areas:"hero" "parto" "arzhang" "manshoor" "nava" "sina" "negar" "guya" "token" "soon"}
  .t-hero{min-height:auto;padding:28px 22px}
  .t-hero h1{font-size:clamp(30px,9vw,42px)}
  .t-hero .kicker{margin-bottom:14px}
  .t-prod{min-height:150px}
  .t-token{gap:18px}
  .tweaks{top:58px;inset-inline-end:10px;bottom:auto;width:min(230px,78vw)}
  .loader-word{font-size:21px}
}
@media (max-width:480px){
  /* the header gained a settings gear — tighten spacing so all controls fit one row */
  .topbar{padding:0 12px}
  .topright{gap:7px}
  .lang-toggle{padding:2px}
  .lang-toggle button{padding:5px 8px}
  .acct-link{padding:0 9px;font-size:11.5px}
  .snd-toggle{width:32px;height:32px}
}
@media (max-width:430px){
  .brand .word small{display:none}
  .brand .word{font-size:19px}
  .t-hero h1{font-size:clamp(26px,9.5vw,36px)}
  .t-hero p.sub{font-size:14px}
  .t-token{flex-direction:column;text-align:center;align-items:center}
  .t-token .tk-body .price{justify-content:center}
  .btn{padding:12px 20px;font-size:14px}
}
@media (max-width:380px){
  .t-prod .viz{min-height:30px}
  .cta-row{width:100%}
  .t-hero .cta-row .btn{flex:1}
}
@media (max-width:640px){
  .token-pill .lat{display:none}
  .token-pill{padding:6px}
  .toolbar{gap:10px;padding:12px 16px}
  .search{flex:1 1 100%;max-width:none;order:1}
  .filterseg{order:2}
  .rescount{order:3;margin-inline-start:0}
  .catalog{padding:18px 16px 50px}
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:11px}
  .pcard.feat .viz{height:72px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important}
  .tile,.topbar .reveal,.pcard,.hero-band{opacity:1 !important;transform:none !important;filter:none !important}
}