
:root{
  color-scheme:dark;
  --bg:#07101f;--bg2:#0d1730;--surface:#111b35;--surface2:#182445;--surface3:#26345e;
  --text:#f7f9ff;--muted:#adb8d4;--muted2:#7f8bad;--line:rgba(255,255,255,.10);
  --violet:#8e4cff;--violet2:#bc5cff;--pink:#eb68ff;--cyan:#7fe2ff;--ok:#8cf2cd;
  --shadow:0 24px 72px rgba(0,0,0,.34);--max:1140px;--navbg:rgba(7,16,31,.84);--chip:#151f3b;--grid:rgba(255,255,255,.022);
}
html[data-theme="light"]{
  color-scheme:light;
  --bg:#f7f9fd;--bg2:#edf2fb;--surface:#ffffff;--surface2:#f6f8ff;--surface3:#eaf0ff;
  --text:#11172c;--muted:#4d5875;--muted2:#6e7895;--line:rgba(17,23,44,.11);
  --shadow:0 18px 50px rgba(20,36,80,.10);--navbg:rgba(255,255,255,.88);--chip:#f0f4ff;--grid:rgba(10,24,52,.05);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);line-height:1.55;overflow-x:hidden;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 82% 1%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 60%),
    radial-gradient(760px 420px at 10% 18%,color-mix(in srgb,var(--violet2) 10%,transparent),transparent 62%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg2) 46%,var(--bg) 100%);
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:40px 40px;mask-image:linear-gradient(to bottom,black,transparent 78%);
}
a{text-decoration:none;color:inherit}
svg{display:block}
.ui-icon{width:22px;height:22px;stroke:currentColor;fill:none;flex:0 0 auto}
.wrap{width:min(var(--max),calc(100% - 34px));margin:0 auto}
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(15px);background:var(--navbg);border-bottom:1px solid var(--line)}
.nav-inner{min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{display:flex;align-items:center;gap:12px;font-weight:850;letter-spacing:.06em}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,color-mix(in srgb,var(--violet) 18%,var(--surface)),var(--surface));border:1px solid var(--line)}
.brand-text strong{display:block;font-size:15px}.brand-text small{font-size:10px;letter-spacing:.18em;color:var(--muted2)}
.nav-center{display:flex;gap:18px;align-items:center;font-size:13px;color:var(--muted)}
.nav-center a:hover{color:var(--text)}
.nav-right{display:flex;align-items:center;gap:10px}
.select,.segmented{min-height:40px;border:1px solid var(--line);background:var(--chip);color:var(--text);border-radius:12px}
.select{padding:0 12px;font-size:13px;font-weight:700;outline:none}
.select:focus{border-color:color-mix(in srgb,var(--violet) 58%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 12%,transparent)}
.select option{background:#10172b;color:#f7f9ff}
html[data-theme="light"] .select option{background:#fff;color:#11172c}
.segmented{display:flex;padding:4px;gap:4px}
.segmented button{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:800;border-radius:9px;padding:0 10px;min-height:30px;cursor:pointer}
.segmented button.active{background:linear-gradient(135deg,var(--violet),var(--violet2));color:#fff}
.mobile-toggle{display:none;border:0;background:none;color:var(--text);font-size:24px}
section{padding:68px 0}
.hero{padding:72px 0 48px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
.eyebrow,.kicker{display:inline-flex;align-items:center;gap:9px;font-size:12px;font-weight:850;letter-spacing:.14em;text-transform:uppercase;color:#d5c1ff}
.section-title-row{display:flex;align-items:center;gap:10px}
.section-glyph{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:#d8c5ff;background:color-mix(in srgb,var(--violet) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--violet) 25%,var(--line))}
.dot{width:8px;height:8px;border-radius:50%;background:var(--violet2);box-shadow:0 0 15px var(--violet2)}
h1,h2,h3,p{margin-top:0}
.hero h1{font-size:clamp(40px,5.2vw,68px);line-height:1.02;letter-spacing:-.055em;margin:16px 0 16px;max-width:760px}
.gradient{background:linear-gradient(96deg,var(--text) 0%,color-mix(in srgb,var(--text) 74%,var(--violet)) 46%,var(--violet2) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:17px;color:var(--muted);max-width:700px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.btn{min-height:46px;padding:0 18px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:9px;font-size:14px;font-weight:800;border:1px solid var(--line);transition:.18s ease}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--violet),var(--violet2));color:#fff;box-shadow:0 12px 28px color-mix(in srgb,var(--violet) 30%,transparent)}
.btn.secondary{background:var(--chip)}
.truth-note{
  display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;max-width:820px;color:var(--muted);margin-top:24px;
  padding:15px 16px;border:1px solid color-mix(in srgb,var(--violet) 20%,var(--line));border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--violet) 7%,var(--surface)),color-mix(in srgb,var(--surface) 94%,transparent));
}
.truth-note strong{display:block;color:var(--text);font-size:14px;margin-bottom:3px}
.truth-note .note-badge{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 24%,transparent)}
.art{min-height:420px;position:relative;display:grid;place-items:center}
.orbit{position:absolute;border:1px solid color-mix(in srgb,var(--violet) 20%,transparent);border-radius:50%}
.orbit.o1{width:420px;height:420px}.orbit.o2{width:310px;height:310px}.orbit.o3{width:510px;height:215px;transform:rotate(-12deg)}
.appliance{width:min(385px,90%);aspect-ratio:1.2;position:relative;filter:drop-shadow(0 34px 56px rgba(0,0,0,.34))}
.appliance .top{position:absolute;inset:10% 12% 37%;transform:skewX(-10deg) rotate(-4deg);background:linear-gradient(145deg,color-mix(in srgb,var(--surface3) 76%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:22px}
.appliance .top::before{content:"NIGHTFALL";position:absolute;left:30px;top:28px;font-size:16px;font-weight:900;letter-spacing:.14em}
.appliance .top::after{content:"PACKET DEFENSE FABRIC";position:absolute;left:30px;top:56px;font-size:9px;letter-spacing:.16em;color:var(--muted2)}
.appliance .front{position:absolute;left:15%;right:9%;bottom:25%;height:30%;transform:skewX(-10deg) rotate(-4deg);background:linear-gradient(180deg,color-mix(in srgb,var(--surface2) 85%,var(--surface)),var(--surface));border:1px solid var(--line);border-radius:6px 6px 18px 18px}
.ports{position:absolute;left:18%;right:15%;bottom:37%;display:grid;grid-template-columns:repeat(6,1fr);gap:8px;transform:rotate(-4deg)}
.port{height:12px;border:1px solid color-mix(in srgb,var(--violet) 20%,var(--line));border-radius:3px;background:color-mix(in srgb,var(--surface) 88%,black)}
.port.live{box-shadow:0 0 12px color-mix(in srgb,var(--violet) 70%,transparent)}
.statusline{position:absolute;left:25%;right:22%;bottom:29%;height:3px;transform:rotate(-4deg);background:linear-gradient(90deg,transparent,var(--violet),var(--pink),transparent);box-shadow:0 0 14px color-mix(in srgb,var(--violet) 80%,transparent)}
.float{position:absolute;padding:13px 14px;min-width:166px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);box-shadow:var(--shadow);font-size:12px}
.float strong{display:block;margin-bottom:3px}.float span{color:var(--muted2)}.f1{right:2%;top:18%}.f2{left:1%;bottom:13%}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:28px}
.section-head h2{font-size:clamp(30px,3.6vw,47px);line-height:1.05;letter-spacing:-.04em;margin:10px 0 0}
.section-head p{max-width:560px;color:var(--muted);margin-bottom:4px}
.grid-3,.platform-grid,.status-grid,.roadmap-grid{display:grid;gap:15px}
.grid-3,.platform-grid,.roadmap-grid{grid-template-columns:repeat(3,1fr)}
.status-grid{grid-template-columns:repeat(2,1fr)}
.card,.panel,.upload-box,.preview-pane{padding:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(145deg,color-mix(in srgb,var(--surface2) 92%,transparent),color-mix(in srgb,var(--surface) 95%,transparent));position:relative;overflow:hidden}
.card::before,.panel::before{content:"";position:absolute;right:-80px;top:-84px;width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--violet) 18%,transparent),transparent 66%)}
.icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;color:#d8c5ff;background:linear-gradient(145deg,color-mix(in srgb,var(--violet) 17%,transparent),color-mix(in srgb,var(--violet) 6%,transparent));border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);margin-bottom:32px}
.icon .ui-icon{width:23px;height:23px}
.card h3,.panel h3{font-size:18px;margin-bottom:8px}.card p,.panel p{font-size:14px;color:var(--muted);margin-bottom:0}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:var(--chip);text-transform:uppercase;letter-spacing:.06em}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--violet)}
.badge.dev::before{background:var(--ok)}.badge.proto::before{background:var(--violet2)}.badge.plan::before{background:#ffcf84}
.platform-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:23px}
.platform-top .icon{margin:0}
.phase strong{display:block;font-size:12px;letter-spacing:.12em;color:#a389e6;margin-bottom:12px}
.phase-head{display:flex;align-items:center;gap:10px;margin-bottom:13px}.phase-head .ui-icon{color:#c6a9ff}
.phase p{color:var(--muted);font-size:14px;margin:0}
.status-title{display:flex;align-items:center;gap:11px;margin-bottom:8px}.status-title .ui-icon{color:#c8adff}
.media-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.preview-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.mock{aspect-ratio:16/10;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface3) 35%,transparent),transparent),linear-gradient(145deg,color-mix(in srgb,var(--violet) 10%,transparent),color-mix(in srgb,var(--surface) 94%,transparent));position:relative;overflow:hidden}
.mock::before{content:"";position:absolute;left:12px;right:12px;top:12px;height:18px;border-radius:8px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.mock::after{content:"";position:absolute;left:12px;right:12px;bottom:12px;top:42px;border-radius:10px;border:1px dashed color-mix(in srgb,var(--violet) 26%,transparent)}
.upload-label{display:inline-flex;align-items:center;gap:9px;margin-top:18px;font-weight:800}
.upload-box input{display:block;width:100%;margin-top:11px}
.upload-note{margin-top:10px;color:var(--muted2);font-size:13px}
.preview-pane{min-height:320px}
.preview-title{display:flex;align-items:center;gap:9px}
#preview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
.preview-item{border:1px solid var(--line);border-radius:14px;background:var(--chip);padding:8px}
.preview-item img,.preview-item video{width:100%;height:210px;object-fit:cover;border-radius:10px;display:block}
.preview-item span{display:block;color:var(--muted2);font-size:12px;margin-top:8px;word-break:break-all}
.about-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:16px}
.quote{border:1px solid color-mix(in srgb,var(--violet) 28%,transparent);background:radial-gradient(420px 180px at 50% 0%,color-mix(in srgb,var(--violet) 16%,transparent),transparent 75%),color-mix(in srgb,var(--surface) 90%,transparent)}
.list{margin:0;padding-inline-start:20px}.list li{color:var(--muted);margin:.4rem 0}
.contact-box{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.email-row{display:flex;align-items:center;gap:10px}.email{font-size:20px;font-weight:850;word-break:break-word}
.footer{padding:22px 0;border-top:1px solid var(--line);margin-top:10px}
.footer-grid{display:grid;grid-template-columns:1fr 1.3fr .75fr;gap:18px;align-items:center}
.footer-grid div{font-size:12.5px;color:var(--muted2)}
.footer-grid div:nth-child(2){text-align:center}.footer-grid div:last-child{text-align:end;font-weight:750}
html[dir="rtl"] body{font-family:Tahoma,Segoe UI,Arial,sans-serif}
html[dir="rtl"] .brand{letter-spacing:.02em}
html[dir="rtl"] .footer-grid div:last-child{text-align:start}
@media(max-width:1100px){
  .nav-center{display:none}.mobile-toggle{display:block}
  .nav.open .nav-center{display:flex;position:absolute;left:16px;right:16px;top:64px;flex-direction:column;align-items:flex-start;padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow)}
  .hero-grid,.media-grid,.about-grid{grid-template-columns:1fr}
  .grid-3,.platform-grid,.roadmap-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .wrap{width:min(var(--max),calc(100% - 24px))}
  .nav-right .segmented{display:none}
  .hero{padding-top:54px}.hero h1{font-size:44px}.lead{font-size:16px}
  .art{min-height:315px}.orbit.o1{width:295px;height:295px}.orbit.o2{width:215px;height:215px}.orbit.o3{width:335px;height:155px}.float{display:none}
  .section-head{display:block}.section-title-row{margin-bottom:6px}
  .grid-3,.platform-grid,.status-grid,.roadmap-grid,#preview-grid,.preview-cards,.footer-grid{grid-template-columns:1fr}
  .footer-grid div,.footer-grid div:nth-child(2),.footer-grid div:last-child{text-align:start}
  section{padding:54px 0}
}


/* V5 — Persian mobile-only refinement.
   Desktop and every non-Persian language intentionally remain unchanged. */
@media (max-width:760px){
  html[lang="fa"] .hero{
    padding-top:42px;
  }
  html[lang="fa"] .hero-grid{
    gap:22px;
  }
  html[lang="fa"] .hero h1{
    font-size:clamp(32px,9.4vw,38px);
    line-height:1.24;
    letter-spacing:-.018em;
    text-align:right;
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
    text-wrap:balance;
  }
  html[lang="fa"] .hero .lead{
    font-size:14.5px;
    line-height:1.95;
    text-align:right;
    max-width:100%;
  }
  html[lang="fa"] .eyebrow{
    font-size:10.5px;
    letter-spacing:.055em;
    line-height:1.7;
  }
  html[lang="fa"] .actions{
    width:100%;
    gap:9px;
  }
  html[lang="fa"] .actions .btn{
    flex:1 1 0;
    min-width:0;
    min-height:44px;
    padding-inline:11px;
    font-size:12.5px;
    white-space:nowrap;
  }
  html[lang="fa"] .truth-note{
    grid-template-columns:auto minmax(0,1fr);
    gap:11px;
    padding:13px 14px;
  }
  html[lang="fa"] .truth-note strong{
    font-size:13px;
    line-height:1.85;
  }
  html[lang="fa"] .truth-note > div > span{
    font-size:12.8px;
    line-height:1.9;
  }
  html[lang="fa"] .section-head h2{
    font-size:27px;
    line-height:1.38;
    letter-spacing:-.012em;
    text-align:right;
    text-wrap:balance;
  }
  html[lang="fa"] .section-head p{
    font-size:13.8px;
    line-height:1.9;
    text-align:right;
  }
  html[lang="fa"] .about-grid h2,
  html[lang="fa"] .contact-box h2{
    font-size:27px;
    line-height:1.38;
    letter-spacing:-.012em;
  }
  html[lang="fa"] .card h3,
  html[lang="fa"] .panel h3{
    line-height:1.55;
  }
  html[lang="fa"] .art{
    margin-top:-8px;
  }
}
