/* فونت اختصاصی را در پوشه assets/fonts قرار دهید و نام فایل را در url پایین جایگزین کنید. */
@font-face {
  font-family: "SanoFont";
  src: url("../fonts/dana-fanum-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #101816;
  --bg-deep: #0b100f;
  --text: #f1f3eb;
  --muted: #a0ada4;
  --soft: #77857b;
  --line: rgba(206, 226, 213, .13);
  --accent: #c7f36b;
  --accent-soft: #9fbf7a;
  --font: "SanoFont", Vazirmatn, IRANSans, Tahoma, sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { color: #111710; background: var(--accent); }
.site-shell {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 clamp(24px, 6.2vw, 100px);
  background:
    radial-gradient(ellipse at 78% 45%, rgba(43, 75, 59, .17), transparent 40%),
    linear-gradient(135deg, #111a16 0%, #101816 48%, #0e1513 100%);
}
.grid-overlay {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(202, 225, 208, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(202, 225, 208, .045) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 80%, transparent 100%);
}
.ambient { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(1px); }
.ambient-one { width: 42vw; height: 42vw; min-width: 400px; min-height: 400px; top: 15%; right: -25%; border: 1px solid rgba(199,243,107,.07); box-shadow: 0 0 0 65px rgba(199,243,107,.014), 0 0 0 130px rgba(199,243,107,.012); }
.ambient-two { width: 27vw; height: 27vw; min-width: 300px; min-height: 300px; left: -18%; bottom: -24%; background: radial-gradient(circle, rgba(74,116,83,.12), transparent 70%); }
.topbar { display: flex; align-items: center; justify-content: space-between; min-height: 112px; border-bottom: 1px solid var(--line); position: relative; z-index: 2; }
.brand { display: inline-flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.brand-mark { display: inline-flex; width: 45px; height: 45px; color: #dce8dc; }
.brand-mark svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font-size: 22px; font-weight: 750; letter-spacing: -.7px; line-height: 1.1; }
.brand-copy small { font-size: 10px; color: #97a79a; letter-spacing: .4px; }
.topbar-note { display: inline-flex; align-items: center; gap: 10px; color: #9eaea2; font-size: 11px; letter-spacing: .1px; }
.live-dot { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(199,243,107,.09); animation: blink 2s infinite; }
.hero { flex: 1; display: grid; grid-template-columns: minmax(0, .92fr) minmax(400px, 1.08fr); gap: clamp(28px, 6vw, 110px); align-items: center; padding: 48px 0 54px; min-height: 570px; }
.hero-copy { position: relative; z-index: 1; max-width: 570px; padding-bottom: 9px; animation: enter .8s .05s both; }
.eyebrow { display: flex; align-items: center; gap: 13px; color: var(--accent); font-size: 12px; margin-bottom: 26px; letter-spacing: .1px; }
.eyebrow-line { display: inline-block; width: 34px; height: 1px; background: var(--accent); }
h1 { margin: 0; font-weight: 760; font-size: clamp(58px, 6.6vw, 98px); letter-spacing: -3.8px; line-height: 1.18; }
h1 > span { color: #f1f3eb; }
.title-period { color: var(--accent); font-style: normal; }
.lead { margin: 27px 0 11px; color: #dfe7de; font-size: clamp(16px, 1.45vw, 20px); font-weight: 500; line-height: 2; }
.supporting { max-width: 470px; margin: 0; color: var(--muted); font-size: 13px; line-height: 2.35; font-weight: 350; }
.status-row { display: flex; align-items: center; gap: 13px; margin-top: 33px; padding: 16px 17px; width: min(100%, 360px); border: 1px solid rgba(199,243,107,.16); background: linear-gradient(110deg, rgba(199,243,107,.055), rgba(255,255,255,.012)); border-radius: 5px; }
.status-icon { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 4px; color: var(--accent); background: rgba(199,243,107,.09); }
.status-icon svg { width: 23px; height: 23px; }
.status-copy { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.status-copy strong { font-size: 12px; font-weight: 650; }
.status-copy small { font-size: 10px; color: #8e9c90; }
.status-pulse { display: flex; align-items: center; gap: 4px; direction: ltr; padding-inline: 5px; }
.status-pulse b { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; opacity: .45; animation: pulse-dot 1s ease-in-out infinite; }
.status-pulse b:nth-child(2) { animation-delay: .18s; }
.status-pulse b:nth-child(3) { animation-delay: .36s; }
.visual { align-self: stretch; min-height: 470px; display: flex; flex-direction: column; justify-content: space-between; position: relative; border-inline-start: 1px solid rgba(190,216,198,.09); padding-inline-start: clamp(12px, 2vw, 30px); animation: enter .9s .15s both; }
.visual-topline, .visual-bottomline { display: flex; align-items: center; color: #788a7d; font: 9px/1.4 Arial, sans-serif; letter-spacing: 2.2px; }
.visual-topline { justify-content: space-between; padding: 3px 4px 0 0; }
.visual-index { color: #a6b6aa; letter-spacing: 1.2px; }
.visual-index i { font-style: normal; color: #53645a; margin: 0 4px; }
.blueprint-wrap { flex: 1; position: relative; display: grid; place-items: center; min-height: 375px; overflow: hidden; }
.blueprint { width: min(100%, 520px); max-height: 530px; overflow: visible; position: relative; z-index: 1; filter: drop-shadow(0 0 18px rgba(199,243,107,.035)); }
.blueprint-glow { position: absolute; width: 55%; aspect-ratio: 1; border-radius: 50%; background: rgba(151,204,113,.065); filter: blur(60px); }
.axis { position: absolute; background: rgba(179,211,189,.12); z-index: 0; }
.axis-horizontal { width: 96%; height: 1px; top: 50%; right: 2%; }
.axis-vertical { height: 94%; width: 1px; right: 50%; top: 3%; }
.coordinate { position: absolute; font: 9px/1 Arial, sans-serif; color: #718679; letter-spacing: 1.5px; direction: ltr; }
.coord-one { top: 12%; right: 7%; }
.coord-two { bottom: 12%; left: 8%; }
.visual-bottomline { gap: 12px; padding: 0 4px 2px 0; }
.bottom-square { width: 5px; height: 5px; background: var(--accent); display: inline-block; }
.bottom-rule { flex: 1; height: 1px; background: var(--line); margin-inline: 5px; }
.footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; border-top: 1px solid var(--line); position: relative; z-index: 1; color: #78877c; font-size: 10px; }
.footer-center { display: flex; align-items: center; gap: 8px; color: #89988c; }
.footer-center span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.footer-code { color: #d4dfd4; font: 14px Arial, sans-serif; letter-spacing: 2px; }
.footer-code span { color: var(--accent); font-size: 8px; vertical-align: top; margin-right: 2px; }
.pointer-glow { position: fixed; z-index: 0; pointer-events: none; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(circle, rgba(199,243,107,.035), transparent 68%); transform: translate(-50%,-50%); opacity: 0; transition: opacity .3s; }

@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes pulse-dot { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-3px); opacity: 1; } }
@keyframes enter { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

@media (min-width: 1500px) { .site-shell { padding-inline: max(100px, calc((100vw - 1380px) / 2)); } }
@media (max-width: 1000px) {
  .site-shell { padding-inline: clamp(24px, 5vw, 54px); }
  .hero { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); gap: 26px; }
  h1 { font-size: clamp(56px, 7vw, 78px); letter-spacing: -2.6px; }
  .visual { min-height: 420px; }
  .blueprint-wrap { min-height: 340px; }
}
@media (max-width: 720px) {
  .site-shell { padding-inline: 22px; min-height: 100svh; }
  .topbar { min-height: 83px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 19px; }
  .topbar-note { font-size: 9px; gap: 8px; }
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: 51px 0 28px; min-height: auto; }
  .hero-copy { padding: 0; }
  .eyebrow { margin-bottom: 20px; font-size: 11px; }
  h1 { font-size: clamp(58px, 12.5vw, 82px); letter-spacing: -2.7px; line-height: 1.17; }
  .lead { font-size: 15px; margin-top: 22px; line-height: 1.95; }
  .supporting { font-size: 12px; line-height: 2.2; }
  .status-row { margin-top: 24px; width: 100%; max-width: 390px; padding: 12px 13px; }
  .visual { min-height: 330px; border-inline-start: 0; border-top: 1px solid rgba(190,216,198,.1); padding: 17px 0 0; }
  .blueprint-wrap { min-height: 280px; max-height: 360px; }
  .blueprint { width: min(100%, 330px); max-height: 350px; }
  .coord-one { top: 9%; right: 4%; }
  .coord-two { bottom: 9%; left: 5%; }
  .visual-bottomline { padding-bottom: 0; }
  .footer { min-height: 67px; flex-wrap: wrap; padding: 17px 0; font-size: 9px; }
  .footer-center { display: none; }
  .pointer-glow { display: none; }
}
@media (max-width: 380px) {
  .site-shell { padding-inline: 17px; }
  .topbar-note { max-width: 122px; line-height: 1.8; }
  h1 { font-size: 54px; }
  .visual { min-height: 290px; }
  .blueprint-wrap { min-height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}