:root{
  --bg:#06070d;
  --bg2:#0a0c16;
  --fg:#f3f4fb;
  --muted:#8a90a8;
  --accent:#ff5722;
  --accent2:#ffb347;
  --line:rgba(255,255,255,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--fg);
  font-family:'Space Grotesk',system-ui,sans-serif;
  overflow-x:hidden;cursor:default;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#fff}
img{max-width:100%}

/* ---------- Aurora background (GPU) ---------- */
.aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora::before,.aurora::after{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.45;
  will-change:transform;backface-visibility:hidden;
}
.aurora::before{width:52vw;height:52vw;max-width:760px;max-height:760px;
  background:radial-gradient(circle,rgba(255,87,34,.5),transparent 70%);
  top:-12%;left:-6%;animation:auroraA 20s ease-in-out infinite}
.aurora::after{width:46vw;height:46vw;max-width:680px;max-height:680px;
  background:radial-gradient(circle,rgba(255,179,71,.32),transparent 70%);
  bottom:-14%;right:-6%;animation:auroraB 26s ease-in-out infinite}
@keyframes auroraA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(9vw,7vh,0) scale(1.18)}}
@keyframes auroraB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-10vw,-5vh,0) scale(1.14)}}

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent2));z-index:200;box-shadow:0 0 14px var(--accent)}

/* ---------- Cursor glow ---------- */
.cursor-glow{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;
  pointer-events:none;z-index:1;background:radial-gradient(circle,rgba(255,87,34,.14),transparent 60%);
  transform:translate(-50%,-50%);transition:opacity .4s;will-change:transform;mix-blend-mode:screen}
@media(hover:none){.cursor-glow{display:none}}

/* ---------- Giant background wordmark ---------- */
.bg-wordmark{position:fixed;inset:0;z-index:0;display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:clamp(4rem,22vw,22rem);line-height:.8;letter-spacing:.02em;
  pointer-events:none;user-select:none;white-space:nowrap;will-change:transform}
.bw-letter{display:inline-block;color:transparent;
  -webkit-text-stroke:1.5px rgba(255,255,255,.07);text-stroke:1.5px rgba(255,255,255,.07);
  opacity:0;transform:translateY(60px) scale(.85) rotateX(40deg);
  transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1),-webkit-text-stroke-color .7s}
.bw-letter.in{opacity:1;transform:translateY(0) scale(1) rotateX(0)}
.bw-letter.flare{-webkit-text-stroke-color:rgba(255,87,34,.55);text-shadow:0 0 50px rgba(255,87,34,.35)}

/* ---------- Overlays ---------- */
.grid-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%)}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle at 50% 30%,transparent 40%,rgba(0,0,0,.7) 100%)}

section{position:relative;z-index:2}
.text-accent{color:var(--accent)}

/* ---------- Navbar ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;border-bottom:1px solid transparent;
  transition:background .4s,backdrop-filter .4s,border-color .4s}
.nav.scrolled{background:rgba(6,7,13,.82);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav-inner{max-width:1280px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--fg)}
.brand-mark{position:relative;width:40px;height:40px;border-radius:11px;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 22px rgba(255,87,34,.4);border:1px solid var(--line)}
.brand-img{width:100%;height:100%;object-fit:cover;display:block}
.brand-ph{position:absolute;inset:0;display:none;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.brand-ph svg{width:22px;height:22px;opacity:.85}
.brand-text{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:.18em;font-size:1rem}

.nav-menu{display:flex;align-items:center;gap:26px}
.nav-links{display:flex;gap:26px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:.78rem;letter-spacing:.15em;
  font-weight:600;position:relative;transition:color .3s;white-space:nowrap}
.nav-links a::after{content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--accent);transition:width .3s}
.nav-links a:hover{color:var(--fg)}
.nav-links a:hover::after{width:100%}
.nav-cta{text-decoration:none;color:#0a0e1a;font-weight:700;font-size:.76rem;letter-spacing:.12em;
  padding:11px 20px;border-radius:40px;white-space:nowrap;background:var(--fg);transition:transform .3s,box-shadow .3s}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,255,255,.2)}

.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.03);cursor:pointer;padding:0 11px}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--fg);border-radius:2px;transition:transform .35s,opacity .25s}
.nav.menu-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.menu-open .nav-toggle span:nth-child(2){opacity:0}
.nav.menu-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:959px){
  .nav-toggle{display:flex}
  .nav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(8,9,16,.97);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);
    padding:8px 20px 22px;transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s}
  .nav.menu-open .nav-menu{transform:translateY(0);opacity:1;pointer-events:auto}
  .nav-links{flex-direction:column;gap:0}
  .nav-links a{padding:16px 4px;border-bottom:1px solid var(--line);font-size:.95rem}
  .nav-links a::after{display:none}
  .nav-cta{margin-top:16px;text-align:center;padding:15px 20px;font-size:.85rem}
}

/* ---------- Hero ---------- */
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:120px 22px 80px;position:relative}
.hero-content{max-width:940px}
.hero-tag{font-size:.78rem;letter-spacing:.22em;color:var(--accent);font-weight:600;margin-bottom:20px;font-family:'Vazirmatn',sans-serif}
.hero-fa{font-family:'Vazirmatn',sans-serif;font-weight:900;
  font-size:clamp(3.6rem,15vw,10.5rem);line-height:.95;letter-spacing:-.01em;
  background:linear-gradient(120deg,#fff 0%,#ffd9a8 38%,var(--accent2) 60%,var(--accent) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:inline-flex;align-items:flex-start;gap:.2em;
  filter:drop-shadow(0 10px 50px rgba(255,87,34,.35))}
.beta-badge{font-family:'Vazirmatn',sans-serif;font-weight:800;font-size:clamp(.85rem,2.6vw,1.4rem);line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a;-webkit-text-fill-color:#0a0e1a;
  padding:.32em .68em;border-radius:.55em;margin-top:.55em;box-shadow:0 6px 24px rgba(255,87,34,.5)}
.hero-en-mark{font-family:'Anton',sans-serif;letter-spacing:.14em;text-transform:uppercase;
  font-size:clamp(1.3rem,5vw,3rem);line-height:1;margin-top:10px;color:rgba(255,255,255,.92)}
.hero-sub{color:var(--muted);font-size:clamp(.98rem,2.2vw,1.18rem);max-width:640px;margin:28px auto 0;line-height:1.75}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}

.btn{text-decoration:none;font-weight:700;letter-spacing:.08em;font-size:.85rem;padding:15px 28px;border-radius:44px;
  display:inline-flex;align-items:center;gap:10px;border:none;cursor:pointer;
  font-family:'Vazirmatn','Space Grotesk',sans-serif;will-change:transform;
  transition:transform .3s,box-shadow .3s,background .3s,color .3s,border-color .3s}
.btn .arrow{transition:transform .3s}
.btn:hover .arrow{transform:translateX(5px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a;box-shadow:0 10px 40px rgba(255,87,34,.4)}
.btn-primary:hover{transform:translateY(-3px);box-shadow:0 16px 50px rgba(255,87,34,.6)}
.btn-ghost{border:1px solid var(--line);color:var(--fg);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--accent);transform:translateY(-3px)}
.btn-lg{font-size:1rem;padding:18px 40px}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:center;gap:10px;color:var(--muted);font-size:.68rem;letter-spacing:.3em}
.scroll-line{width:1px;height:48px;background:linear-gradient(var(--accent),transparent);animation:scrollPulse 1.8s ease-in-out infinite}
@keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- Translate button ---------- */
.tr{transition:opacity .22s ease,filter .22s ease;display:inline}
.tr.translating{opacity:0;filter:blur(7px)}
.tr.show-fa{font-family:'Vazirmatn',sans-serif}
.tr-btn{margin-inline-start:9px;font-family:'Vazirmatn',sans-serif;font-size:.68rem;font-weight:700;
  padding:2px 10px;border-radius:30px;border:1px solid rgba(255,87,34,.3);background:rgba(255,87,34,.1);
  color:var(--accent);cursor:pointer;vertical-align:middle;transition:all .25s;line-height:1.6}
.tr-btn:hover{background:var(--accent);color:#0a0e1a;transform:translateY(-1px)}
.tr-btn.on{background:rgba(255,255,255,.08);border-color:var(--line);color:var(--fg)}
.tline{display:flex;align-items:flex-start;flex-wrap:wrap;gap:0}

/* ---------- Marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;background:rgba(255,255,255,.015)}
.marquee-track{display:flex;white-space:nowrap;animation:marquee 30s linear infinite;will-change:transform}
.marquee-track span{font-family:'Anton',sans-serif;font-size:1.5rem;letter-spacing:.08em;color:rgba(255,255,255,.18);padding-right:20px}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Sections ---------- */
.section{max-width:1280px;margin:0 auto;padding:120px 22px}
.section-head{margin-bottom:56px}
.section-kicker{display:inline-block;font-size:.78rem;letter-spacing:.3em;color:var(--accent);font-weight:600;margin-bottom:16px}
.section-title{font-family:'Anton',sans-serif;font-size:clamp(2.2rem,6vw,4.5rem);line-height:.95;text-transform:uppercase}

/* ---------- Showcase ---------- */
.card-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:760px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.show-card{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--bg2);
  transition:transform .5s,border-color .5s,box-shadow .5s;will-change:transform}
.show-card:hover{transform:translateY(-8px);border-color:rgba(255,87,34,.4);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.show-card-img{height:220px;background:linear-gradient(135deg,var(--c1),var(--c2));position:relative;overflow:hidden}
.show-card-img::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,.12),transparent 50%)}
.show-card-body{padding:26px}
.show-card-body h3{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:.05em;margin-bottom:10px}
.show-card-body p{color:var(--muted);line-height:1.6}

/* ---------- Platforms / Community ---------- */
.platform-grid{display:grid;grid-template-columns:1fr;gap:20px;perspective:1400px}
@media(min-width:600px){.platform-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.platform-grid{grid-template-columns:repeat(4,1fr)}}
.plat-card{position:relative;display:flex;flex-direction:column;gap:14px;padding:28px 24px 24px;border-radius:20px;
  text-decoration:none;background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);overflow:hidden;color:var(--fg);transform-style:preserve-3d;min-height:236px;will-change:transform;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,box-shadow .4s,background .4s}
.plat-card::before{content:'';position:absolute;inset:0;border-radius:20px;padding:1px;
  background:linear-gradient(135deg,rgba(255,87,34,.55),transparent 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .4s;pointer-events:none}
.plat-card:hover{transform:translateY(-10px);border-color:transparent;
  box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 40px rgba(255,87,34,.12);
  background:linear-gradient(165deg,rgba(255,87,34,.10),rgba(255,255,255,.02))}
.plat-card:hover::before{opacity:1}
.plat-glow{position:absolute;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,87,34,.35),transparent 65%);top:-90px;right:-70px;
  filter:blur(10px);opacity:0;transition:opacity .5s;pointer-events:none}
.plat-card:hover .plat-glow{opacity:.7}
.plat-top{display:flex;align-items:center;justify-content:space-between}
.plat-icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,87,34,.12);border:1px solid rgba(255,87,34,.25);color:var(--accent);transition:transform .4s,background .4s}
.plat-icon svg{width:26px;height:26px}
.plat-card:hover .plat-icon{transform:scale(1.08) rotate(-4deg);background:rgba(255,87,34,.2)}
.plat-index{font-family:'Anton',sans-serif;color:rgba(255,255,255,.18);font-size:1.1rem;letter-spacing:.05em}
.plat-name{font-family:'Archivo',sans-serif;font-weight:900;font-size:1.4rem;letter-spacing:.05em;margin-top:6px}
.plat-desc{color:var(--muted);line-height:1.8;font-family:'Vazirmatn',sans-serif;font-size:.96rem;flex:1}
.plat-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-size:.76rem;font-weight:700;letter-spacing:.16em;color:var(--accent)}
.plat-go .arrow{transition:transform .3s}
.plat-card:hover .plat-go .arrow{transform:translateX(6px)}
.plat-card-feat{background:linear-gradient(165deg,rgba(255,87,34,.14),rgba(255,179,71,.04));border-color:rgba(255,87,34,.3)}
.plat-badge{position:absolute;top:16px;right:-34px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a;font-size:.6rem;font-weight:900;
  letter-spacing:.18em;padding:5px 40px;box-shadow:0 6px 18px rgba(255,87,34,.4)}
.soc-card .soc-icon{background:color-mix(in srgb,var(--soc) 14%,transparent);
  border-color:color-mix(in srgb,var(--soc) 35%,transparent);color:var(--soc)}
.soc-card:hover .soc-icon{background:color-mix(in srgb,var(--soc) 24%,transparent)}
.soc-card .plat-go{color:var(--soc)}
.soc-card:hover{box-shadow:0 30px 70px rgba(0,0,0,.65),0 0 40px color-mix(in srgb,var(--soc) 22%,transparent)}

/* ---------- Code Nooromit ---------- */
.code-section{position:relative}
.code-lead{color:var(--muted);max-width:640px;line-height:1.85;margin-top:22px;font-size:1.02rem;font-family:'Vazirmatn',sans-serif}
.editor{border:1px solid var(--line);border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,#0c0f1c,#080a12);box-shadow:0 40px 100px rgba(0,0,0,.6);max-width:920px}
.editor-bar{display:flex;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.02)}
.dots{display:flex;gap:7px}
.dots span{width:12px;height:12px;border-radius:50%;background:#2a2f42}
.dots span:nth-child(1){background:#ff5f57}.dots span:nth-child(2){background:#febc2e}.dots span:nth-child(3){background:#28c840}
.editor-tabs{display:flex;gap:6px;margin-left:4px}
.ed-tab{background:transparent;border:none;cursor:pointer;font-family:'JetBrains Mono',monospace;color:var(--muted);
  font-size:.78rem;padding:7px 12px;border-radius:8px;transition:all .3s}
.ed-tab:hover{color:var(--fg)}
.ed-tab.active{color:var(--fg);background:rgba(255,87,34,.14);box-shadow:inset 0 -2px 0 var(--accent)}
.editor-brand{margin-left:auto;font-family:'Anton',sans-serif;letter-spacing:.14em;font-size:.78rem;color:rgba(255,255,255,.25)}
/* FIXED height so the box never grows/shrinks while code types in.
   Only the HORIZONTAL axis can scroll (for long lines); vertical is locked,
   so the wheel/touch NEVER gets trapped — it always scrolls the page like
   everywhere else. The code always fits the fixed height vertically. */
.editor-body{display:flex;height:340px;min-height:340px;max-height:340px;
  overflow-x:auto;overflow-y:hidden;position:relative;contain:layout paint;touch-action:pan-x}
.gutter{padding:18px 0;text-align:right;user-select:none;font-family:'JetBrains Mono',monospace;font-size:.84rem;line-height:1.7;
  color:rgba(255,255,255,.2);min-width:44px;border-right:1px solid var(--line);background:rgba(0,0,0,.2)}
.gutter span{display:block;padding:0 12px}
.code-area{padding:18px 20px;font-family:'JetBrains Mono',monospace;font-size:.84rem;line-height:1.7;white-space:pre;tab-size:2;flex:1;position:relative}
.code-area code{color:#cdd3e6}
.caret{display:inline-block;width:8px;height:1.1em;vertical-align:text-bottom;background:var(--accent);margin-left:1px;
  animation:blink 1s steps(1) infinite;box-shadow:0 0 10px var(--accent)}
@keyframes blink{50%{opacity:0}}
.tok-key{color:#ff7b54;font-weight:600}.tok-str{color:#9ece6a}.tok-fn{color:#7aa2f7}.tok-com{color:#565f89;font-style:italic}.tok-num{color:#ffb347}
.editor-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:15px 16px;border-top:1px solid var(--line);background:rgba(255,255,255,.02)}
.ed-status{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.78rem;font-family:'JetBrains Mono',monospace}
.ed-live{width:9px;height:9px;border-radius:50%;background:#28c840;box-shadow:0 0 10px #28c840;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.ed-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-dl,.btn-gh{font-size:.74rem;padding:12px 20px}
.dl-ico,.gh-ico{width:18px;height:18px}

/* ---------- Features ---------- */
.feature-list{display:flex;flex-direction:column}
.feature-row{display:grid;grid-template-columns:auto 1fr;gap:8px 24px;align-items:baseline;padding:32px 0;border-top:1px solid var(--line);transition:padding-left .4s,background .4s}
.feature-row:last-child{border-bottom:1px solid var(--line)}
.feature-row:hover{padding-left:14px;background:linear-gradient(90deg,rgba(255,87,34,.05),transparent)}
.feature-num{font-family:'Anton',sans-serif;color:var(--accent);font-size:1.1rem;grid-row:span 2}
.feature-row h3{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(1.4rem,4vw,2.4rem);letter-spacing:.03em}
.feature-row p{color:var(--muted);line-height:1.6;max-width:560px}
@media(min-width:760px){.feature-row{grid-template-columns:auto 340px 1fr;align-items:center}.feature-num{grid-row:auto}}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;grid-auto-rows:180px}
@media(min-width:760px){.gallery-grid{grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:16px}}
.gal-item{border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,var(--g1),var(--g2));
  position:relative;overflow:hidden;transition:transform .5s,box-shadow .5s;will-change:transform}
.gal-item::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 70% 80%,rgba(255,255,255,.1),transparent 55%)}
.gal-item:hover{transform:scale(1.03);box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:3}
.gal-tall{grid-row:span 2}.gal-wide{grid-column:span 2}

/* ---------- Stats ---------- */
.stats{max-width:1280px;margin:0 auto;padding:50px 22px 70px;display:grid;grid-template-columns:repeat(2,1fr);gap:36px 18px;text-align:center}
@media(min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:2px}
.stat-num,.stat-plus{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,7vw,4.5rem);line-height:1;
  background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{flex-basis:100%;color:var(--muted);letter-spacing:.25em;font-size:.76rem;margin-top:10px}

/* ---------- CTA ---------- */
.cta{padding:130px 22px;text-align:center;position:relative}
.cta-inner{max-width:700px;margin:0 auto}
.cta-title{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,9vw,6rem);line-height:.95;text-transform:uppercase}
.cta-inner p{color:var(--muted);font-size:1.12rem;margin:22px 0 38px;font-family:'Vazirmatn',sans-serif;line-height:1.8}

/* ---------- Footer (asymmetric) ---------- */
.footer{border-top:1px solid var(--line);padding:60px 22px 36px;position:relative;z-index:2}
.footer-mark{font-family:'Anton',sans-serif;font-size:clamp(2.6rem,15vw,11rem);line-height:.8;text-align:center;color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.1);text-stroke:1px rgba(255,255,255,.1);margin-bottom:50px}
.footer-main{max-width:1200px;margin:0 auto 44px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer-left{flex:1;min-width:240px;text-align:left;display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.footer-right{flex:1;min-width:260px;text-align:right}
.footer-brandbox{display:flex;align-items:center;gap:12px}
.footer-logo{position:relative;width:48px;height:48px;border-radius:13px;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 22px rgba(255,87,34,.4);border:1px solid var(--line)}
.footer-logo .brand-img{width:100%;height:100%;object-fit:cover;display:block}
.footer-logo .brand-ph{position:absolute;inset:0;display:none;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2))}
.footer-logo .brand-ph svg{width:24px;height:24px;opacity:.85}
.footer-name{font-family:'Archivo',sans-serif;font-weight:900;letter-spacing:.12em;font-size:1.05rem}
.footer-tag{color:var(--muted);font-size:.86rem;line-height:1.6;max-width:280px}
.footer-social{display:flex;gap:12px}
.soc-link{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--muted);transition:transform .3s,color .3s,border-color .3s,background .3s}
.soc-link svg{width:22px;height:22px}
.soc-link:hover{color:var(--accent);border-color:var(--accent);transform:translateY(-3px);background:rgba(255,87,34,.08)}
.footer-h{font-family:'Vazirmatn',sans-serif;font-weight:800;font-size:1.15rem;margin-bottom:14px;color:var(--fg)}
.about-fa{font-family:'Vazirmatn',sans-serif;color:var(--fg);line-height:2.1;font-size:.98rem;margin-bottom:14px}
.about-en{color:var(--muted);line-height:1.7;font-size:.88rem}
.footer-bottom{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;
  color:var(--muted);font-size:.78rem;letter-spacing:.06em;border-top:1px solid var(--line);padding-top:26px}
.footer-links{display:flex;gap:22px;flex-wrap:wrap}
.footer-links a{color:var(--muted);text-decoration:none;transition:color .3s}
.footer-links a:hover{color:var(--accent)}
@media(max-width:760px){
  .footer-main{flex-direction:column;gap:34px}
  .footer-right{text-align:right}
}

/* ---------- Back to top ---------- */
.to-top{position:fixed;right:20px;bottom:20px;z-index:120;width:50px;height:50px;border-radius:14px;border:1px solid var(--line);
  background:rgba(10,12,22,.8);backdrop-filter:blur(10px);color:var(--accent);font-size:1.3rem;cursor:pointer;
  display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.8);pointer-events:none;
  transition:opacity .4s,transform .4s,background .3s,border-color .3s;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.to-top.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.to-top:hover{border-color:var(--accent);background:rgba(255,87,34,.12);transform:translateY(-3px) scale(1.05)}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(30px);z-index:300;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a;font-family:'Vazirmatn',sans-serif;
  font-weight:700;font-size:.85rem;padding:13px 24px;border-radius:40px;box-shadow:0 14px 40px rgba(255,87,34,.45);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- Reveal base ---------- */
[data-reveal]{opacity:0;transform:translateY(46px);will-change:opacity,transform;
  transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
[data-reveal].in{opacity:1;transform:translateY(0)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  [data-reveal],.bw-letter{opacity:1!important;transform:none!important;filter:none!important}
  .aurora::before,.aurora::after{animation:none!important}
}


/* ===================================================================
   ENHANCEMENTS v2  —  font upgrade, wordmark, code-box fix, media boxes,
   smooth scroll + mobile tuning. (Design & structure preserved.)
   =================================================================== */

/* ---- Smooth scroll handled by JS/Lenis; avoid double-smoothing ---- */
html{scroll-behavior:auto}

/* ---- Cooler NOOROMIT font (Orbitron) ---- */
.hero-en-mark{font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase}
.brand-text{font-family:'Orbitron','Archivo',sans-serif;font-weight:800;letter-spacing:.24em;font-size:.92rem}
.footer-mark{font-family:'Orbitron',sans-serif;font-weight:800;letter-spacing:.08em}
.footer-name{font-family:'Orbitron','Archivo',sans-serif;font-weight:700;letter-spacing:.16em}

/* ---- Giant background wordmark: lower, cinematic, scroll-aware ---- */
.bg-wordmark{
  font-family:'Orbitron',sans-serif;font-weight:800;
  align-items:center;justify-content:center;
  padding-top:20vh;                 /* pushes NOOROMIT lower on screen */
  font-size:clamp(3rem,16.5vw,15rem);
  letter-spacing:.05em;line-height:.9;
  transform-origin:50% 45%;
  will-change:transform;
}
.bw-letter{
  -webkit-text-stroke:1.6px rgba(255,255,255,.085);text-stroke:1.6px rgba(255,255,255,.085);
  transform:translateY(74px) scale(.8) rotateX(46deg);
  transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1),
             -webkit-text-stroke-color .6s ease,text-shadow .6s ease;
}
.bw-letter.in{
  opacity:1;transform:translateY(0) scale(1) rotateX(0);
  animation:bwGlow 5.5s ease-in-out infinite;
}
.bw-letter.in:nth-child(2){animation-delay:.3s}
.bw-letter.in:nth-child(3){animation-delay:.6s}
.bw-letter.in:nth-child(4){animation-delay:.9s}
.bw-letter.in:nth-child(5){animation-delay:1.2s}
.bw-letter.in:nth-child(6){animation-delay:1.5s}
.bw-letter.in:nth-child(7){animation-delay:1.8s}
.bw-letter.in:nth-child(8){animation-delay:2.1s}
.bw-letter.flare{
  -webkit-text-stroke-color:rgba(255,87,34,.78);text-stroke-color:rgba(255,87,34,.78);
  text-shadow:0 0 55px rgba(255,87,34,.5),0 0 130px rgba(255,87,34,.22)!important;
}
@keyframes bwGlow{0%,100%{text-shadow:0 0 0 rgba(255,87,34,0)}50%{text-shadow:0 0 34px rgba(255,87,34,.16)}}

/* subtle sweeping light beam across the wordmark (cool, not busy) */
.bg-wordmark::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,179,71,.07) 50%,transparent 62%);
  mix-blend-mode:screen;transform:translateX(-30%);
  animation:wordSweep 9s ease-in-out infinite;
}
@keyframes wordSweep{0%,100%{transform:translateX(-35%);opacity:0}50%{transform:translateX(35%);opacity:1}}

/* ===== CODE NOOROMIT — fixed box, zero layout shift, smooth typing ===== */
.editor-body{
  height:340px;min-height:340px;max-height:340px;   /* FIXED — never reflows while typing */
  overflow:hidden;                                   /* no inner auto-scroll jump */
  contain:layout paint;
}
.code-area{overflow:hidden}
.gutter{overflow:hidden}

/* ===== Media boxes (Showcase) — support GIF / IMG + cooler look ===== */
.show-card-img{position:relative}
.card-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
  transform:scale(1.05);transition:transform .9s cubic-bezier(.16,1,.3,1),filter .6s;filter:saturate(1.05)}
.show-card:hover .card-media{transform:scale(1.13)}
.show-card-img::after{z-index:2}                     /* keep gloss above media */
.card-shine{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.20) 50%,transparent 70%);
  transform:translateX(-130%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.show-card:hover .card-shine{transform:translateX(130%)}
.show-card{position:relative}
.show-card::after{content:'';position:absolute;inset:0;border-radius:18px;pointer-events:none;
  box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .5s}
.show-card:hover::after{box-shadow:inset 0 0 0 1px rgba(255,87,34,.4),inset 0 0 40px rgba(255,87,34,.08)}

/* ===== Media boxes (Gallery) — support GIF / IMG + cooler look ===== */
.gal-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:1;
  transform:scale(1.06);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.gal-item:hover .gal-media{transform:scale(1.16)}
.gal-item::after{z-index:2}
.gal-shine{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.18) 50%,transparent 65%);
  transform:translateX(-130%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.gal-item:hover .gal-shine{transform:translateX(130%)}
.gal-item{position:relative}
.gal-item:hover{box-shadow:0 24px 60px rgba(0,0,0,.55),0 0 36px rgba(255,87,34,.12)}

/* ===== Mobile: lighter compositing => smoother, lag-free scroll ===== */
@media(max-width:760px){
  .aurora::before,.aurora::after{filter:blur(56px);opacity:.30}
  .bg-wordmark{padding-top:24vh;font-size:clamp(2.6rem,23vw,8rem);letter-spacing:.02em}
  .bg-wordmark::after{display:none}
  .cursor-glow{display:none}
  .grid-overlay{opacity:.6}
}
@media(prefers-reduced-motion:reduce){
  .bg-wordmark::after,.bw-letter.in{animation:none!important}
}


/* ===================================================================
   ENHANCEMENTS v3 — footer matte+fade, features hover, 4-box gallery,
   depth on scroll. (Design preserved.)
   =================================================================== */

/* ---- Depth: reveals settle in from slightly behind ---- */
[data-reveal]{transform:translateY(48px) scale(.978)}
[data-reveal].in{transform:translateY(0) scale(1)}

/* ---- GALLERY: clean 4-box pinwheel bento ---- */
.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:14px}
@media(min-width:760px){.gallery-grid{grid-template-columns:repeat(3,1fr);grid-auto-rows:248px;gap:16px}}
.g-a{grid-column:span 2}
.g-d{grid-column:span 2}

/* ---- FEATURES "POWER UNDER THE HOOD": stronger hover ---- */
.feature-row{position:relative;overflow:hidden;
  transition:padding .45s cubic-bezier(.16,1,.3,1),background .45s}
.feature-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(180deg,var(--accent),var(--accent2));
  box-shadow:0 0 26px rgba(255,87,34,.55);transition:width .45s cubic-bezier(.16,1,.3,1)}
.feature-row:hover{padding-left:34px;
  background:linear-gradient(90deg,rgba(255,87,34,.14),rgba(255,87,34,.02) 55%,transparent)}
.feature-row:hover::before{width:5px}
.feature-row h3{transition:color .4s,transform .4s,text-shadow .4s}
.feature-row:hover h3{color:var(--accent);transform:translateX(6px);text-shadow:0 0 32px rgba(255,87,34,.45)}
.feature-num{transition:transform .4s,color .4s,text-shadow .4s}
.feature-row:hover .feature-num{transform:scale(1.28);text-shadow:0 0 26px rgba(255,87,34,.6)}
.feature-row p{transition:color .4s}
.feature-row:hover p{color:var(--fg)}

/* ---- FOOTER: dark matte + smooth fade-in + animated mark + email ---- */
.footer{background:#04050a;position:relative;z-index:3;overflow:hidden}
.footer::before{content:'';position:absolute;left:0;right:0;top:0;height:200px;pointer-events:none;z-index:-1;
  background:linear-gradient(180deg,rgba(4,5,10,0),#04050a 78%)}
.footer-bottom{background:transparent}
.footer-mark{position:relative;
  background:linear-gradient(90deg,rgba(255,255,255,.05),rgba(255,87,34,.12),rgba(255,255,255,.05));
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  animation:footMark 9s linear infinite}
@keyframes footMark{to{background-position:220% 0}}
.footer-email{display:inline-flex;align-items:center;gap:9px;text-decoration:none;color:var(--fg);
  font-family:'JetBrains Mono',monospace;font-size:.85rem;letter-spacing:.03em;
  padding:9px 16px;border-radius:30px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:transform .3s,border-color .3s,background .3s,color .3s}
.footer-email svg{width:17px;height:17px;color:var(--accent);transition:color .3s}
.footer-email:hover{border-color:var(--accent);background:rgba(255,87,34,.1);color:var(--accent);transform:translateY(-2px)}
.footer-email:hover svg{color:var(--accent)}

/* ---- Background layers fade out near the footer (set via JS opacity) ---- */
.aurora,.bg-wordmark,.grid-overlay{transition:none}

@media(prefers-reduced-motion:reduce){
  .footer-mark{animation:none!important}
}


/* ===================================================================
   ENHANCEMENTS v4 — live particle field + cinematic NOOROMIT exit
   =================================================================== */

/* Live glowing particle field behind everything */
.fx-particles{position:fixed;inset:0;z-index:0;pointer-events:none;
  mix-blend-mode:screen;opacity:.9}
@media(max-width:760px){.fx-particles{opacity:.7}}

/* When the wordmark disperses near the footer, kill smoothing transitions */
.bg-wordmark.dispersing .bw-letter{transition:none!important;animation:none!important;will-change:transform,opacity,filter}

@media(prefers-reduced-motion:reduce){
  .fx-particles{display:none}
}


/* ===================================================================
   ENHANCEMENTS v5 — calmer/elegant background + correct mobile sizing
   =================================================================== */

/* Particle field: subtle & elegant, not busy */
.fx-particles{opacity:.55}
@media(max-width:760px){.fx-particles{opacity:.4}}

/* Desktop: keep NOOROMIT comfortably on screen the whole way */
.bg-wordmark{padding-top:14vh;font-size:clamp(3rem,15vw,13.5rem)}

/* Mobile: NOOROMIT fits the screen width and reads cleanly */
@media(max-width:760px){
  .bg-wordmark{padding-top:9vh;font-size:clamp(1.9rem,13.5vw,6rem);letter-spacing:.012em}
}
@media(max-width:420px){
  .bg-wordmark{font-size:clamp(1.7rem,13vw,4.6rem);letter-spacing:.006em}
}

/* Footer wordmark sizing for mobile (no overflow) */
@media(max-width:760px){
  .footer-mark{font-size:clamp(2.1rem,13vw,11rem);letter-spacing:.02em;margin-bottom:36px}
  .footer{padding:48px 20px 32px}
}


/* ===================================================================
   RESPONSIVE OVERHAUL v6 — full mobile / tablet / desktop polish
   Cross-browser (iOS Safari, Chrome/Android, Firefox, Edge),
   notch-safe areas, smooth lag-free scroll, zero layout breakage.
   Design, components, effects & animations all preserved.
   =================================================================== */

/* ---- Global overflow & cross-browser smoothing safety ---- */
html,body{width:100%;max-width:100%;overflow-x:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overscroll-behavior-y:none}
*{-webkit-tap-highlight-color:transparent}
/* iOS momentum scrolling inside any inner scroller */
.editor-body{-webkit-overflow-scrolling:touch}
/* media never forces horizontal scroll */
img,svg,canvas,video{max-width:100%}

/* ---- Vendor prefixes for backdrop blur (Safari / iOS) ---- */
.nav.scrolled{-webkit-backdrop-filter:blur(18px)}
.to-top{-webkit-backdrop-filter:blur(10px)}

/* ---- Dynamic viewport height: avoid mobile URL-bar jump ---- */
.hero{min-height:100vh;min-height:100svh}
/* Use STABLE svh (not dynamic dvh) so the hero never resizes while the
   mobile URL bar shows/hides — that resize was causing the page to "jump"
   when you started scrolling at the top. */

/* ---- Notch / safe-area aware fixed UI (iPhone X+ / Android cutouts) ---- */
.nav-inner{
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
}
.to-top{
  right:max(20px,env(safe-area-inset-right));
  bottom:max(20px,env(safe-area-inset-bottom));
}
.toast{bottom:max(30px,calc(env(safe-area-inset-bottom) + 18px))}
@media(max-width:959px){
  .nav-menu{-webkit-backdrop-filter:blur(20px);
    padding-left:max(20px,env(safe-area-inset-left));
    padding-right:max(20px,env(safe-area-inset-right))}
}

/* ---- Comfortable tap targets everywhere on touch ---- */
@media(hover:none){
  .nav-links a,.nav-cta,.btn,.tr-btn,.plat-go,.footer-links a,.soc-link,.to-top{
    touch-action:manipulation}
  .show-card,.gal-item,.plat-card{transform:none!important} /* no stuck hover transforms */
}

/* ===================================================================
   TABLET (max-width:1024px)
   =================================================================== */
@media(max-width:1024px){
  .section{padding:96px 24px}
  .nav-inner{max-width:100%}
  .editor,.code-lead,.editor-foot{max-width:100%}
}

/* ===================================================================
   MOBILE / SMALL TABLET (max-width:760px)
   =================================================================== */
@media(max-width:760px){
  /* Tighter, balanced vertical rhythm */
  .section{padding:72px 18px}
  .section-head{margin-bottom:36px}
  .hero{padding:104px 18px 64px}
  .cta{padding:84px 18px}
  .stats{padding:36px 18px 56px;gap:30px 14px}
  .marquee{padding:14px 0}
  .marquee-track span{font-size:1.15rem;padding-right:16px}

  /* Hero readability */
  .hero-sub{font-size:1rem;margin-top:22px;line-height:1.7}
  .hero-tag{font-size:.72rem;letter-spacing:.18em;margin-bottom:16px}
  .code-lead{font-size:1rem;line-height:1.8}

  /* Buttons: full-width stacked = easy thumb taps */
  .hero-actions{gap:12px;margin-top:30px}
  .hero-actions .btn{justify-content:center;flex:1 1 100%;width:100%}

  /* ---- CODE editor: allow horizontal scroll so lines never clip ---- */
  .editor-body{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
  .code-area{font-size:.76rem;padding:16px 16px}
  .gutter{font-size:.76rem;min-width:38px;padding:16px 0}
  .editor-foot{padding:13px 14px;gap:12px}
  .ed-actions{width:100%}
  .ed-actions .btn{flex:1 1 auto;justify-content:center}

  /* Showcase / cards spacing */
  .show-card-img{height:200px}
  .show-card-body{padding:22px}

  /* Platform cards a touch shorter */
  .plat-card{min-height:auto;padding:24px 20px 22px}

  /* Features: clean two-line layout, reduced hover shift */
  .feature-row{padding:26px 0}
  .feature-row:hover{padding-left:18px}

  /* Footer */
  .footer{padding:48px 18px 32px}
  .footer-main{flex-direction:column;gap:32px}
  .footer-left,.footer-right{min-width:0;width:100%}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:14px;text-align:left}
  .about-en{text-align:right}
}

/* ===================================================================
   PHONES (max-width:480px)
   =================================================================== */
@media(max-width:480px){
  .section{padding:56px 16px}
  .hero{padding:92px 16px 52px}
  .nav-inner{padding-top:11px;padding-bottom:11px}
  .brand-text{font-size:.82rem;letter-spacing:.18em}
  .brand-mark{width:36px;height:36px}

  /* Hero typography safe on narrow screens (no overflow) */
  .hero-fa{font-size:clamp(2.7rem,15.5vw,4.2rem);gap:.15em}
  .beta-badge{font-size:.78rem;padding:.3em .58em;margin-top:.35em}
  .hero-en-mark{letter-spacing:.16em;font-size:clamp(1.15rem,5.4vw,1.7rem)}

  .section-title{font-size:clamp(2rem,8.5vw,2.8rem)}
  .cta-title{font-size:clamp(2.3rem,11vw,3.4rem)}
  .cta-inner p{font-size:1rem}

  .btn{padding:14px 22px;font-size:.82rem}
  .btn-lg{padding:16px 28px;font-size:.92rem}

  /* Stats stay readable */
  .stat-num,.stat-plus{font-size:clamp(2.4rem,12vw,3.4rem)}

  /* Gallery: comfortable rows on tiny screens */
  .gallery-grid{grid-auto-rows:150px;gap:12px}

  /* Editor a bit denser */
  .editor-tabs{gap:4px}
  .ed-tab{font-size:.72rem;padding:6px 9px}
  .editor-brand{font-size:.68rem}

  /* Back-to-top sized for thumbs */
  .to-top{width:46px;height:46px}
}

/* ---- Extra-small (max-width:360px) — keep everything inside ---- */
@media(max-width:360px){
  .hero-fa{font-size:clamp(2.4rem,16vw,3.4rem)}
  .marquee-track span{font-size:1rem}
  .plat-name{font-size:1.25rem}
}

/* ===================================================================
   LANDSCAPE PHONES — short viewport, avoid clipped hero
   =================================================================== */
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:96px 22px 56px}
  .scroll-hint{display:none}
}

/* ===================================================================
   MOBILE PERFORMANCE — lighter compositing for buttery scroll
   =================================================================== */
@media(max-width:760px){
  /* trim heavy GPU work that isn't needed at small sizes */
  .plat-glow,.card-shine,.gal-shine{display:none}
  .show-card,.gal-item,.plat-card{will-change:auto}
  .cursor-glow{display:none}
  /* keep the wordmark calm + crisp */
  .bg-wordmark{will-change:transform}
}

/* Foldables / very wide phones in between — graceful 2-col platforms */
@media(min-width:481px) and (max-width:599px){
  .platform-grid{grid-template-columns:repeat(2,1fr)}
}


/* ===================================================================
   PRO POLISH v7 — bolder living NOOROMIT, compact desktop-like footer
   on mobile, smarter auto-sizing for phones. (Design preserved.)
   =================================================================== */

/* ---------------- Giant NOOROMIT: bolder + cinematic on every size ---- */
.bg-wordmark{
  font-family:'Orbitron',sans-serif;font-weight:800;
  padding-top:14vh;
  font-size:clamp(3rem,15vw,13.5rem);
  letter-spacing:.04em;line-height:.9;
}
/* Brighter, cooler flare as the highlight sweeps across while scrolling */
.bw-letter{-webkit-text-stroke:1.7px rgba(255,255,255,.10);text-stroke:1.7px rgba(255,255,255,.10)}
.bw-letter.flare{
  -webkit-text-stroke-width:2.2px;
  -webkit-text-stroke-color:rgba(255,120,60,.9);text-stroke-color:rgba(255,120,60,.9);
  text-shadow:0 0 42px rgba(255,87,34,.6),0 0 120px rgba(255,87,34,.3),0 0 220px rgba(255,179,71,.18)!important;
}
/* keep the sweeping light beam alive on ALL devices (cheap, GPU-only) */
.bg-wordmark::after{display:block!important}

/* MOBILE: NOOROMIT is a BIG, bold backdrop again (not tiny) */
@media(max-width:760px){
  .bg-wordmark{padding-top:17vh;font-size:clamp(3.2rem,18.5vw,8rem);letter-spacing:.005em}
  .bg-wordmark::after{display:block!important;animation-duration:7s}
}
@media(max-width:480px){
  .bg-wordmark{padding-top:18vh;font-size:clamp(3rem,19vw,6.4rem);letter-spacing:0}
}
@media(max-width:360px){
  .bg-wordmark{font-size:clamp(2.7rem,18.5vw,5.2rem)}
}

/* ===================================================================
   FOOTER on MOBILE — compact, desktop-like proportions (not super tall)
   =================================================================== */
@media(max-width:760px){
  .footer{padding:44px 18px 28px}
  .footer-mark{font-size:clamp(2.6rem,17vw,8rem);margin-bottom:28px;letter-spacing:.04em}
  .footer-main{
    display:grid;grid-template-columns:0.82fr 1.18fr;gap:26px 18px;align-items:start;margin-bottom:30px}
  .footer-left,.footer-right{min-width:0;width:auto;gap:12px}
  .footer-tag{font-size:.8rem;max-width:none;line-height:1.55}
  .footer-h{font-size:1rem;margin-bottom:9px}
  .about-fa{font-size:.82rem;line-height:1.8;margin-bottom:9px}     /* was 2.1 → much shorter */
  .about-en{font-size:.74rem;line-height:1.55}
  .footer-email{font-size:.76rem;padding:8px 13px}
  .footer-email svg{width:15px;height:15px}
  .footer-social{gap:10px}
  .soc-link{width:42px;height:42px}
  .soc-link svg{width:19px;height:19px}
  .footer-brandbox{gap:10px}
  .footer-logo{width:42px;height:42px}
  .footer-name{font-size:.95rem}
  /* bottom bar back to a tidy single row */
  .footer-bottom{flex-direction:row;flex-wrap:wrap;align-items:center;
    justify-content:space-between;gap:12px;text-align:left;padding-top:22px}
  .footer-links{gap:16px}
  .footer-bottom span{font-size:.72rem}
}
/* very small phones only: stack the two footer columns but stay compact */
@media(max-width:379px){
  .footer-main{grid-template-columns:1fr;gap:24px}
}

/* ===================================================================
   SMARTER AUTO-SIZING for phones — tighter boxes & type
   =================================================================== */
@media(max-width:480px){
  .section-head{margin-bottom:30px}
  .section-kicker{font-size:.7rem;letter-spacing:.22em;margin-bottom:10px}
  .section-title{font-size:clamp(1.9rem,8.4vw,2.6rem)}

  /* Showcase cards: shorter, neater */
  .show-card-img{height:168px}
  .show-card-body{padding:18px}
  .show-card-body h3{font-size:1.15rem;margin-bottom:8px}
  .show-card-body p{font-size:.9rem}

  /* Platform / community cards */
  .plat-card{padding:20px 18px 18px;gap:11px;border-radius:16px}
  .plat-icon{width:44px;height:44px;border-radius:12px}
  .plat-icon svg{width:22px;height:22px}
  .plat-name{font-size:1.2rem}
  .plat-desc{font-size:.88rem;line-height:1.6}
  .plat-go{font-size:.7rem}

  /* Features rows tighter */
  .feature-row{padding:20px 0;gap:6px 16px}
  .feature-row h3{font-size:clamp(1.25rem,6vw,1.7rem)}
  .feature-row p{font-size:.9rem}
  .feature-num{font-size:1rem}

  /* Gallery a touch denser */
  .gallery-grid{grid-auto-rows:138px;gap:11px}

  /* Editor compact */
  .editor-bar{padding:11px 13px;gap:10px}
  .code-area,.gutter{font-size:.72rem}
  .ed-status{font-size:.72rem}

  /* Marquee subtle */
  .marquee-track span{font-size:1.05rem}

  /* Stats */
  .stat-label{font-size:.68rem;letter-spacing:.18em;margin-top:8px}
}


/* ===================================================================
   HOTFIX v8 — eliminate mobile horizontal scroll / right-side gap
   ROOT CAUSE: `overflow-x:hidden` on <body> does NOT clip
   position:fixed children. The giant NOOROMIT wordmark (nowrap) and
   other full-bleed fixed layers spilled past the viewport on real
   phones, creating a sideways-scrollable empty gap on the right.
   FIX: clip at the root (clips fixed descendants) + clip the wordmark
   itself + size it to fit the screen width on every phone.
   =================================================================== */

/* Clip at the document root — this is what actually contains fixed overflow */
html{overflow-x:clip;max-width:100%}
body{overflow-x:clip;max-width:100%;position:relative}

/* The wordmark clips its own spill AND is constrained to the viewport */
.bg-wordmark{overflow:hidden;left:0;right:0;width:100%;max-width:100vw}

/* Fit NOOROMIT inside the screen width on phones (bold, but no overflow) */
@media(max-width:760px){
  .bg-wordmark{font-size:clamp(2.6rem,16vw,7rem);letter-spacing:0;padding-top:17vh}
}
@media(max-width:480px){
  .bg-wordmark{font-size:clamp(2.4rem,16vw,5.6rem)}
}
@media(max-width:360px){
  .bg-wordmark{font-size:clamp(2.2rem,15.5vw,4.6rem)}
}

/* Belt-and-suspenders: no decorative fixed layer may exceed the viewport */
.aurora,.fx-particles,.cursor-glow,.grid-overlay,.vignette,.scroll-progress{
  max-width:100vw;left:0;right:0}
.cursor-glow{right:auto}          /* glow is JS-positioned; don't pin it */
.marquee{overflow:hidden;max-width:100%}


/* ===================================================================
   MOBILE FPS v9 — idle-gated living background + footer wordmark fit
   Goal: buttery, high-FPS scroll on phones (esp. the CODE section),
   with the rich "alive" background returning after the page sits still.
   Desktop is untouched.
   =================================================================== */

@media(max-width:760px){
  /* All effects stay ALIVE while scrolling on phones (no pausing). The
     heavy per-frame costs were already removed (tap-to-run code editor,
     cached footer offset), so the background can animate continuously. */

  /* Lighter flare glow on phones (the 3-layer 220px blur was a paint hog) */
  .bw-letter.flare{
    text-shadow:0 0 26px rgba(255,87,34,.5)!important;
    -webkit-text-stroke-width:2px;
  }

  /* Promote the few moving layers to their own GPU layer => no repaint
     of the page behind them while they animate. */
  .aurora,.bg-wordmark,.fx-particles,.marquee-track{
    transform:translateZ(0);backface-visibility:hidden;
  }

  /* Footer NOOROMIT — shrink so the trailing "IT" stays inside the box */
  .footer-mark{font-size:clamp(2.2rem,13vw,6rem);letter-spacing:.015em}
}
@media(max-width:420px){
  .footer-mark{font-size:clamp(1.9rem,12vw,4.4rem);letter-spacing:.01em}
}
@media(max-width:360px){
  .footer-mark{font-size:clamp(1.7rem,11.5vw,3.8rem)}
}

/* Reduced-motion users: never gate (there's nothing animating anyway) */
@media(prefers-reduced-motion:reduce){
  body.bg-busy *{animation-play-state:paused!important}
}


/* ===================================================================
   MOBILE CODE BOX v10 — tap-to-run player + compact editor
   On phones the IDE no longer auto-types on scroll (that was the jank).
   It shows ready, highlighted code with a ▶ RUN overlay; tapping it
   plays the typing animation on demand. Desktop is unchanged.
   =================================================================== */

.editor-body{position:relative}

/* Play overlay (shown only on mobile via JS) */
.code-play{
  display:none;                       /* JS enables on phones */
  position:absolute;inset:0;z-index:6;
  touch-action:pan-y;                 /* let vertical scroll pass to the page; tap still = RUN */
  flex-direction:column;align-items:center;justify-content:center;gap:13px;
  border:0;cursor:pointer;padding:0;
  background:radial-gradient(circle at 50% 45%,rgba(8,10,18,.45),rgba(6,7,13,.82));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  transition:opacity .38s ease,visibility .38s ease;
}
.code-play.hide{opacity:0;visibility:hidden;pointer-events:none}
.cp-ring{
  width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a;
  box-shadow:0 12px 34px rgba(255,87,34,.5);
  animation:cpPulse 2.1s ease-in-out infinite;
}
.cp-ring svg{width:27px;height:27px;margin-left:3px}
.code-play:active .cp-ring{transform:scale(.93)}
.cp-label{font-family:'Vazirmatn',sans-serif;font-weight:700;font-size:.82rem;letter-spacing:.06em;
  color:var(--fg);background:rgba(0,0,0,.4);padding:6px 16px;border-radius:30px;border:1px solid var(--line)}
@keyframes cpPulse{
  0%,100%{box-shadow:0 12px 34px rgba(255,87,34,.5),0 0 0 0 rgba(255,87,34,.4)}
  50%{box-shadow:0 12px 34px rgba(255,87,34,.5),0 0 0 13px rgba(255,87,34,0)}
}
/* pause the pulse while scrolling, like the other live bits */
@media(max-width:760px){
  body.bg-busy .cp-ring{animation-play-state:paused!important}
}

/* ---- Compact editor box for phones ---- */
@media(max-width:760px){
  .editor{border-radius:14px}
  .editor-body{height:auto;min-height:0;max-height:none;overflow-x:auto;overflow-y:hidden;touch-action:pan-y}   /* mobile: fits static code, vertical always scrolls the page */
  .code-area,.gutter{font-size:.72rem;line-height:1.6}
  .code-area{padding:14px 15px}
  .gutter{padding:14px 0;min-width:38px}
  .gutter span{padding:0 10px}
  .editor-bar{padding:11px 13px;gap:10px}
  .editor-foot{padding:12px 13px}
}
@media(max-width:480px){
  .editor-body{height:auto;min-height:0;max-height:none}   /* fits static code on tiny screens */
  .code-area,.gutter{font-size:.68rem;line-height:1.58}
  .cp-ring{width:54px;height:54px}
  .cp-ring svg{width:23px;height:23px}
  .cp-label{font-size:.74rem}
  .editor-brand{display:none}      /* save room on tiny bars */
}


/* ===========================================================
   MOBILE BACKGROUND PERFORMANCE
   Keep every effect visible, but make the fixed background layers
   cheap to composite so scrolling stays smooth and stable.
   =========================================================== */
@media(max-width:760px){
  /* Aurora: keep the soft glow, but stop the continuous animated repaint of a
     huge blur(90px) layer (a major phone FPS killer) and lighten the blur. */
  .aurora::before,.aurora::after{
    animation:none!important;
    filter:blur(55px);
    opacity:.30;
    will-change:auto;
  }
  /* Particle canvas: normal blending instead of screen — screen-blending a
     full-screen fixed canvas every frame is very expensive to composite. */
  .fx-particles{mix-blend-mode:normal;opacity:.5}
  /* The background wordmark travels with a single GPU transform on phones,
     so keep it promoted; drop only the moving sheen overlay. */
  .bg-wordmark{will-change:transform}
  .bg-wordmark::after{display:none!important}
}


/* ===========================================================
   NOTE: NOOROMIT has NO constant/idle animation. All of its motion is
   SCROLL-DRIVEN (handled in app.js) so nothing repaints while the page is
   idle — this keeps phones smooth and the battery happy.
   =========================================================== */
@media(prefers-reduced-motion:reduce){
  .bw-letter.in{animation:none!important}
}


/* ===========================================================
   MOBILE: the CODE box IS shown, but the code is rendered STATIC
   (fully highlighted, no typing/animation) — handled in app.js.
   =========================================================== */


/* ===========================================================
   MOBILE CODE EXPERIENCE v2
   - Inline IDE box is hidden on phones.
   - A big "RUN" launch button + the two action buttons are shown.
   - Tapping launch opens a bottom-sheet modal that types the code
     (with sound + haptics, handled in app.js).
   - Top-of-page scroll lag fixed by dropping the nav backdrop-blur on
     phones (backdrop-filter:blur is a known mobile scroll-jank source).
   =========================================================== */
.code-launch{display:none}

@media(max-width:760px){
  /* hide the inline IDE box; keep launch button + foot buttons */
  .editor-bar,
  .editor-body,
  .code-play{display:none!important}

  .editor{
    border:1px solid var(--line);
    background:linear-gradient(180deg,#0c0f1c,#080a12);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 24px 60px rgba(0,0,0,.45);
  }

  .code-launch{
    display:flex;align-items:center;gap:14px;width:100%;
    padding:16px 18px;border:0;cursor:pointer;text-align:left;
    background:linear-gradient(135deg,rgba(255,87,34,.18),rgba(255,179,71,.05));
    border-bottom:1px solid var(--line);
    color:var(--fg);transition:transform .12s ease;
  }
  .code-launch:active{transform:scale(.985)}
  .cl-ring{
    width:52px;height:52px;flex:0 0 auto;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,var(--accent),var(--accent2));color:#0a0e1a;
    box-shadow:0 10px 26px rgba(255,87,34,.45);
    animation:cpPulse 2.3s ease-in-out infinite;
  }
  .cl-ring svg{width:23px;height:23px;margin-left:2px}
  .cl-text{display:flex;flex-direction:column;gap:2px}
  .cl-title{font-family:'Vazirmatn',sans-serif;font-weight:700;font-size:1.02rem}
  .cl-sub{font-family:'JetBrains Mono',monospace;font-size:.68rem;color:var(--muted);letter-spacing:.05em}

  .editor-foot{
    border:none!important;background:transparent!important;
    padding:14px!important;flex-direction:column;align-items:stretch;gap:12px;
  }
  .editor-foot .ed-status{display:none!important}
  .editor-foot .ed-actions{width:100%;display:flex;gap:10px;flex-wrap:nowrap}
  .editor-foot .ed-actions .btn{flex:1 1 0;justify-content:center;padding:13px 14px}

  /* TOP-OF-PAGE LAG FIX: no backdrop blur on phones */
  .nav.scrolled{
    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;
    background:rgba(6,7,13,.94);
  }
  /* fewer GPU layers on phones (letters are not per-letter animated here) */
  .bw-letter{will-change:auto}
}

/* ---------- CODE bottom-sheet modal (mobile) ---------- */
.code-modal{position:fixed;inset:0;z-index:300;display:none}
.code-modal.open{display:block}
.cm-backdrop{
  position:absolute;inset:0;background:rgba(3,4,8,.74);
  opacity:0;transition:opacity .32s ease;
}
.code-modal.show .cm-backdrop{opacity:1}
.cm-sheet{
  position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,#0c0f1c,#080a12);
  border-top:1px solid var(--line);
  border-radius:22px 22px 0 0;
  box-shadow:0 -24px 70px rgba(0,0,0,.6);
  transform:translateY(101%);
  transition:transform .44s cubic-bezier(.16,1,.3,1);
  max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
  padding-bottom:env(safe-area-inset-bottom);
  will-change:transform;
}
.code-modal.show .cm-sheet{transform:translateY(0)}
.cm-grip{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:10px auto 2px}
.cm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 14px 10px;border-bottom:1px solid var(--line)}
.cm-tabs{display:flex;gap:6px}
.cm-tab{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--muted);
  background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:9px;padding:8px 13px;cursor:pointer}
.cm-tab.active{color:var(--fg);border-color:rgba(255,87,34,.55);background:rgba(255,87,34,.13)}
.cm-close{width:38px;height:38px;border-radius:11px;border:1px solid var(--line);
  background:rgba(255,255,255,.04);color:var(--fg);font-size:1rem;cursor:pointer;display:grid;place-items:center}
.cm-close:active{transform:scale(.94)}
.cm-body{display:flex;overflow:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:170px}
.cm-foot{display:flex;align-items:center;gap:9px;padding:12px 14px;border-top:1px solid var(--line);
  color:var(--muted);font-size:.76rem;font-family:'JetBrains Mono',monospace}
/* keep the page locked behind the open sheet (inner modal scroll still works) */
html.modal-open,body.modal-open{overflow:hidden!important}
@media(prefers-reduced-motion:reduce){
  .cm-sheet{transition:none}
  .cm-backdrop{transition:none}
}


/* ============================================================
   ✦ NOOROMIT background v3 — traveling wave + cinematic dissolve.
     All per-letter motion is driven by wordmarkMotion() in app.js using
     transform/opacity ONLY (composited on the GPU => no repaint, no layout,
     no scroll-frame loss). This rule kills the CSS transition WHILE the JS
     loop is running so the wave reads crisp instead of lagging behind.
     Appended last so it wins the cascade.
   ============================================================ */
.bg-wordmark.js-motion .bw-letter{
  transition:none!important;
  animation:none!important;            /* JS owns transform; no CSS fighting it */
  will-change:transform,opacity;
}
/* STATIC AT REST + faster first paint: no continuous text-shadow glow on the
   giant letters (animating large blurred text-shadow was a real load-time
   repaint cost / the "lag at the top"). The background only animates on scroll
   now, driven by wordmarkMotion(). */
.bw-letter.in{animation:none!important}

/* COOL scroll highlight: a brighter, glowing "scan" sweeps letter-to-letter
   with scroll progress (class toggled cheaply in app.js). */
.bw-letter.flare{
  -webkit-text-stroke-color:rgba(255,130,70,.92)!important;
  text-stroke-color:rgba(255,130,70,.92)!important;
  text-shadow:0 0 30px rgba(255,87,34,.55),0 0 72px rgba(255,87,34,.30)!important;
}
@media(max-width:760px){
  .bg-wordmark.js-motion .bw-letter{will-change:transform,opacity}
  .bw-letter.flare{color:rgba(255,150,90,.10)!important}
}
@media(prefers-reduced-motion:reduce){
  .bg-wordmark.js-motion .bw-letter{animation:none!important;transform:none!important}
}