/* =========================================================
   آرمان میرزایی جهان — Personal Branding Site
   Design tokens: Premium Executive / Tech — Navy + Brass/Gold + Steel-Blue
   ========================================================= */

@font-face{
  font-family: 'YekanBakh';
  src: url('../assets/fonts/Yekan_Bakh_Fa-En_05_Medium.ttf') format('truetype');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root{
  --font-main: 'YekanBakh', Tahoma, sans-serif;

  /* ---- Dark theme (default) — Brand: Navy #25408F / White / Black ---- */
  --bg: #000000;
  --bg-elevated: #0A0C12;
  --surface: #0B0E16;
  --surface-2: #10141F;
  --border: rgba(255,255,255,0.09);
  --border-strong: rgba(255,255,255,0.17);

  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.64);
  --text-tertiary: rgba(255,255,255,0.42);

  --accent-gold: #3A5AC0;
  --accent-gold-soft: rgba(37,64,143,0.16);
  --accent-blue: #25408F;
  --accent-blue-soft: rgba(37,64,143,0.16);

  --shadow-soft: 0 20px 50px rgba(0,0,0,0.55);

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-l: 18px;

  --container-w: 1180px;
  --section-pad: clamp(4.5rem, 9vw, 7.5rem);

  --ease: cubic-bezier(.22,.61,.36,1);
}

:root[data-theme="light"]{
  --bg: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #F1F3F8;
  --border: rgba(0,0,0,0.09);
  --border-strong: rgba(0,0,0,0.16);

  --text-primary: #000000;
  --text-secondary: rgba(0,0,0,0.64);
  --text-tertiary: rgba(0,0,0,0.44);

  --accent-gold: #25408F;
  --accent-gold-soft: rgba(37,64,143,0.10);
  --accent-blue: #25408F;
  --accent-blue-soft: rgba(37,64,143,0.09);

  --shadow-soft: 0 20px 45px rgba(20,22,26,0.08);
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text-primary);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  transition: background .35s var(--ease), color .35s var(--ease);
  overflow-x: hidden;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p{ margin:0; }
button{ font-family: inherit; }

.container{
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 1.75rem;
}

.section{ padding: var(--section-pad) 0; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- Noise overlay (subtle texture, premium feel) ---------- */
.noise-overlay{
  position: fixed; inset:0; pointer-events:none; z-index: 2;
  opacity: .025; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- Header ---------- */
.site-header{
  position: fixed; inset-inline:0; top:0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.scrolled{ border-bottom-color: var(--border); }

.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 76px;
}
.brand{
  font-size: 1.05rem; font-weight: 700; letter-spacing:.2px;
  color: var(--text-primary);
}
.main-nav ul{ display:flex; gap: 2.1rem; }
.nav-link{
  position:relative; font-size:.92rem; color: var(--text-secondary);
  padding: .3rem 0; transition: color .25s var(--ease);
}
.nav-link::after{
  content:""; position:absolute; right:0; left:auto; bottom:-2px; width:0; height:1px;
  background: var(--accent-gold); transition: width .3s var(--ease);
}
.nav-link:hover{ color: var(--text-primary); }
.nav-link:hover::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap: .9rem; }

.theme-toggle{
  width:38px; height:38px; border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text-secondary); cursor:pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.theme-toggle:hover{ color: var(--accent-gold); border-color: var(--border-strong); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-icon-light{ display:none; }
:root[data-theme="light"] .theme-icon-dark{ display:none; }
:root[data-theme="light"] .theme-icon-light{ display:flex; }

.hamburger{
  display:none; width:38px; height:38px; border:none; background:none; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
.hamburger span{
  width:20px; height:1.5px; background: var(--text-primary); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.hamburger.active span:nth-child(1){ transform: translateY(6.5px) rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ transform: translateY(-6.5px) rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: .95rem 2rem; border-radius: var(--radius-s);
  font-size: .95rem; font-weight:600; letter-spacing:.2px;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  border: 1px solid transparent;
}
.btn-primary{
  background: var(--accent-gold); color: #FFFFFF;
}
.btn-primary:hover{ transform: translateY(-2px); background: color-mix(in srgb, var(--accent-gold) 85%, white 15%); }
.btn-ghost{
  border-color: var(--border-strong); color: var(--text-primary);
}
.btn-ghost:hover{ transform: translateY(-2px); border-color: var(--accent-gold); color: var(--accent-gold); }

/* ---------- Hero ---------- */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:center;
  padding-top: 76px; overflow:hidden;
}
.network-canvas{
  position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.55;
}
.hero-inner{
  position:relative; z-index:1;
  display:grid; grid-template-columns: 1.1fr .8fr; gap: 3rem; align-items:center;
}
.hero-kicker{
  font-size:.85rem; color: var(--accent-blue); letter-spacing:.2px; margin-bottom:1.4rem;
}
.hero-title{
  font-size: clamp(2.4rem, 4.6vw, 4rem); font-weight:800; line-height:1.15; letter-spacing:-.5px;
}
.hero-role{
  margin-top:.85rem; font-size: clamp(1.1rem,1.8vw,1.4rem); color: var(--text-secondary); font-weight:500;
}
.hero-lead{
  margin-top: 1.6rem; max-width: 46ch; color: var(--text-secondary); font-size:1.03rem;
}
.hero-focus{
  margin-top: 1.8rem; display:flex; flex-direction:column; gap:.55rem;
}
.hero-focus li{
  position:relative; padding-inline-start: 1.1rem; font-size:.95rem; color: var(--text-primary);
}
.hero-focus li::before{
  content:""; position:absolute; inset-inline-start:0; top:.55em; width:5px; height:5px; border-radius:50%;
  background: var(--accent-gold);
}
.hero-actions{ display:flex; gap:1rem; margin-top: 2.4rem; flex-wrap:wrap; }

.hero-media{ display:flex; justify-content:center; }

/* ---- 3D perspective scene around the portrait ---- */
.portrait-scene{
  position:relative; width: min(380px, 82vw); aspect-ratio: 1/1;
  display:flex; align-items:center; justify-content:center;
  perspective: 1000px;
}

.portrait-frame{
  position:relative; width: min(300px, 70vw); aspect-ratio: 1/1.08;
  border-radius: 999px; overflow:hidden;
  border:1px solid var(--border-strong);
  background: var(--surface);
  transform-style: preserve-3d;
  box-shadow: var(--shadow-soft);
  z-index: 2;
}
.portrait-img{ width:100%; height:100%; object-fit:cover; }
.portrait-ring{
  position:absolute; inset:-14px; border-radius:999px;
  border: 1px solid var(--accent-gold-soft);
  pointer-events:none;
}
.portrait-fallback-content{ display:none; }
.portrait-fallback{ display:flex; align-items:center; justify-content:center; }
.portrait-fallback .portrait-fallback-content{
  display:flex; width:46%; color: var(--text-tertiary);
}

/* ---- Orbit rings: abstract 3D "tori" rotating around the portrait ---- */
.orbit-ring{
  position:absolute; inset:0; margin:auto;
  border-radius:50%;
  border: 1px solid var(--border-strong);
  transform-style: preserve-3d;
  pointer-events:none;
}
.orbit-ring-1{
  width:88%; height:88%;
  border-color: var(--accent-blue-soft);
  animation: orbitSpinX 16s linear infinite;
}
.orbit-ring-2{
  width:104%; height:104%;
  border-color: var(--accent-gold-soft);
  animation: orbitSpinY 22s linear infinite reverse;
}
.orbit-ring-3{
  width:120%; height:120%;
  border-color: var(--border);
  animation: orbitSpinX 30s linear infinite;
}
@keyframes orbitSpinX{
  0%{ transform: rotateX(72deg) rotateZ(0deg); }
  100%{ transform: rotateX(72deg) rotateZ(360deg); }
}
@keyframes orbitSpinY{
  0%{ transform: rotateY(70deg) rotateZ(0deg); }
  100%{ transform: rotateY(70deg) rotateZ(360deg); }
}

/* ---- Floating tech chips: small 3D icons drifting around the portrait ---- */
.float-chip{
  position:absolute; width:44px; height:44px; border-radius: var(--radius-m);
  display:flex; align-items:center; justify-content:center;
  background: var(--surface); border:1px solid var(--border-strong);
  color: var(--accent-blue); box-shadow: var(--shadow-soft);
  z-index:3;
}
.float-chip svg{ width:20px; height:20px; }
.chip-1{ top:6%; inset-inline-start:2%; animation: floatY 6s var(--ease) infinite; }
.chip-2{ bottom:10%; inset-inline-start:-4%; color: var(--accent-gold); animation: floatY 7.5s var(--ease) infinite .6s; }
.chip-3{ top:38%; inset-inline-end:-6%; animation: floatY 5.5s var(--ease) infinite 1.1s; }
@keyframes floatY{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-12px); }
}

/* ---- Generic 3D tilt-on-hover (JS-driven via data-tilt-max) ---- */
.tilt-card{
  transform-style: preserve-3d;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}

.scroll-hint{
  position:absolute; bottom: 2.2rem; inset-inline:0; display:flex; justify-content:center; z-index:1;
}
.scroll-hint span{
  width:1px; height:34px; background: linear-gradient(var(--text-tertiary), transparent);
  display:block; animation: scrollhint 2.2s var(--ease) infinite;
}
@keyframes scrollhint{ 0%{ transform: scaleY(0); opacity:0; transform-origin: top;} 40%{ transform: scaleY(1); opacity:1; transform-origin: top;} 100%{ transform: scaleY(0); opacity:0; transform-origin: bottom;} }

/* ---------- Section heading ---------- */
.section-heading h2{
  font-size: clamp(1.7rem, 2.6vw, 2.4rem); font-weight:700; letter-spacing:-.3px;
}
.section-heading{ margin-bottom: 3rem; }

/* ---------- About ---------- */
.about-grid{
  display:grid; grid-template-columns: .8fr 1.6fr; gap: 3rem;
}
.about-body p{ color: var(--text-secondary); font-size: 1.05rem; max-width: 62ch; }
.about-body p + p{ margin-top: 1.1rem; }

/* ---------- Expertise ---------- */
.expertise-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-m); overflow:hidden;
}
.expertise-card{
  background: var(--surface); padding: 2rem 1.7rem;
  transition: background .3s var(--ease);
}
.expertise-card:hover{ background: var(--surface-2); }
.expertise-icon{
  display:inline-flex; width:34px; height:34px; color: var(--accent-blue); margin-bottom:1.1rem;
}
.expertise-icon svg{ width:100%; height:100%; }
.expertise-card h3{ font-size:1rem; font-weight:600; margin-bottom:.55rem; }
.expertise-card p{ font-size:.85rem; color: var(--text-tertiary); line-height:1.7; }

/* ---------- Approach ---------- */
.approach-layout{ display:grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items:center; }
.approach-principles{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 2rem; }
.principle{ border-inline-start: 2px solid var(--accent-gold); padding-inline-start: 1.1rem; }
.principle h3{ font-size: 1rem; font-weight:700; margin-bottom:.4rem; }
.principle p{ font-size:.9rem; color: var(--text-secondary); }

.approach-flow{ display:flex; flex-direction:column; align-items:center; gap:0; }
.flow-node{
  padding: .8rem 1.6rem; border:1px solid var(--border-strong); border-radius: 999px;
  font-size:.88rem; color: var(--text-secondary); background: var(--surface);
  min-width: 168px; text-align:center;
}
.flow-node-end{ color: var(--accent-gold); border-color: var(--accent-gold-soft); background: var(--accent-gold-soft); font-weight:600; }
.flow-connector{ width:1px; height:26px; background: var(--border-strong); }

/* ---------- Achievements ---------- */
.achievements-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--border); border:1px solid var(--border); border-radius: var(--radius-m); overflow:hidden;
}
.achievement{ background: var(--surface); padding: 2.3rem 1.8rem; }
.achievement-figure{
  display:block; font-size: 1.35rem; font-weight:700; color: var(--accent-gold); margin-bottom:.6rem;
}
.achievement p{ font-size:.88rem; color: var(--text-tertiary); }

/* ---------- Statement ---------- */
.statement{ padding: clamp(5rem, 10vw, 9rem) 0; text-align:center; }
.statement-text{
  font-size: clamp(1.6rem, 4vw, 2.9rem); font-weight:700; line-height:1.5; letter-spacing:-.4px;
}

/* ---------- Contact ---------- */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.4fr; gap:3rem; align-items:start; }
.contact-lead{ margin-top:1rem; color: var(--text-secondary); max-width: 42ch; }
.contact-links{ display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.contact-link{
  display:flex; align-items:center; gap:.9rem; padding: 1.2rem 1.3rem;
  border:1px solid var(--border); border-radius: var(--radius-m); background: var(--surface);
  transition: border-color .25s var(--ease), transform .25s var(--ease);
}
.contact-link:hover{ border-color: var(--accent-gold-soft); transform: translateY(-2px); }
.contact-icon{ width:20px; height:20px; color: var(--accent-blue); flex-shrink:0; }
.contact-icon svg{ width:100%; height:100%; }
.contact-value{ font-size:.9rem; word-break: break-word; }

/* ---------- Footer ---------- */
.site-footer{ border-top: 1px solid var(--border); padding: 2.4rem 0; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-text p{ font-size:.85rem; color: var(--text-tertiary); }
.footer-text p:first-child{ color: var(--text-secondary); margin-bottom:.2rem; }
.footer-social{ display:flex; gap:.9rem; }
.footer-social a{ width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:50%; color: var(--text-tertiary); transition: color .25s var(--ease), border-color .25s var(--ease); }
.footer-social a svg{ width:15px; height:15px; }
.footer-social a:hover{ color: var(--accent-gold); border-color: var(--accent-gold-soft); }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- Security & AI 3D pillars ---------- */
.pillars{ padding-top: 0; }
.pillars-lead{ margin-top:1rem; color: var(--text-secondary); max-width: 60ch; }
.pillars-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; margin-top: 3rem;
}
.pillar{ text-align:center; }

.cube-stage{
  width: 128px; height: 128px; margin: 0 auto 1.6rem;
  perspective: 900px;
}
.cube3d{
  position:relative; width:100%; height:100%;
  transform-style: preserve-3d;
  animation: cubeSpin 16s linear infinite;
}
.cube-ai{ animation-duration: 20s; animation-direction: reverse; }
.cube-lock{ animation-duration: 24s; }

@keyframes cubeSpin{
  from{ transform: rotateX(0deg) rotateY(0deg); }
  to{ transform: rotateX(360deg) rotateY(360deg); }
}

.cube-face{
  position:absolute; inset:0; width:128px; height:128px;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(145deg, var(--accent-blue) 0%, #0F1B42 100%);
  border: 1px solid rgba(255,255,255,0.16);
  backface-visibility: hidden;
  color: #FFFFFF;
}
.cube-face svg{ width:44px; height:44px; }
.face-front{ transform: translateZ(64px); }
.face-back{ transform: rotateY(180deg) translateZ(64px); }
.face-right{ transform: rotateY(90deg) translateZ(64px); }
.face-left{ transform: rotateY(-90deg) translateZ(64px); }
.face-top{ transform: rotateX(90deg) translateZ(64px); }
.face-bottom{ transform: rotateX(-90deg) translateZ(64px); }

.pillar h3{ font-size: 1.02rem; font-weight:700; margin-bottom:.5rem; }
.pillar p{ font-size:.88rem; color: var(--text-tertiary); max-width: 30ch; margin-inline:auto; }

/* ---------- Page hero (subpages, e.g. honors) ---------- */
.page-hero{
  position:relative; padding-top: calc(76px + 4.5rem); padding-bottom: 3.5rem;
  overflow:hidden; text-align:center;
}
.page-hero .network-canvas{ opacity:.4; }
.page-hero-inner{ position:relative; z-index:1; }
.page-kicker{ font-size:.85rem; color: var(--accent-blue); margin-bottom:1rem; }
.page-title{ font-size: clamp(2rem, 4vw, 3rem); font-weight:800; letter-spacing:-.4px; }
.page-lead{ margin: 1.1rem auto 0; max-width: 52ch; color: var(--text-secondary); }
.back-link{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:1.8rem;
  font-size:.88rem; color: var(--text-tertiary); border-bottom:1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.back-link:hover{ color: var(--accent-gold); border-color: var(--accent-gold-soft); }

/* ---------- Honors grid ---------- */
.honors-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
}
.honor-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-l);
  overflow:hidden; display:flex; flex-direction:column;
}
.honor-media{
  position:relative; aspect-ratio: 4/3; overflow:hidden; background: var(--surface-2);
  cursor: zoom-in;
}
.honor-media img{ width:100%; height:100%; object-fit:cover; transition: transform .5s var(--ease); }
.honor-card:hover .honor-media img{ transform: scale(1.05); }
.honor-fallback{
  position:absolute; inset:0; display:none; align-items:center; justify-content:center;
  color: var(--text-tertiary);
}
.honor-fallback svg{ width:38px; height:38px; }
.honor-media.no-image .honor-fallback{ display:flex; }

.honor-body{ padding: 1.4rem 1.5rem 1.6rem; }
.honor-title{ font-size:1rem; font-weight:700; margin-bottom:.35rem; }
.honor-meta{ font-size:.8rem; color: var(--accent-gold); margin-bottom:.7rem; }
.honor-desc{ font-size:.88rem; color: var(--text-secondary); line-height:1.75; }

/* ---------- Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center;
  padding: 2rem; background: rgba(6,7,9,0.86); backdrop-filter: blur(6px);
}
.lightbox.open{ display:flex; }
.lightbox-inner{ position:relative; max-width: min(900px, 92vw); max-height: 88vh; }
.lightbox-inner img{ max-width:100%; max-height: 88vh; border-radius: var(--radius-m); display:block; }
.lightbox-close{
  position:absolute; top:-46px; left:0; width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.lightbox-caption{ margin-top:1rem; text-align:center; color:#d7d8db; font-size:.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1000px){
  .hero-inner{ grid-template-columns: 1fr; text-align:center; }
  .hero-focus{ align-items:center; }
  .hero-focus li{ padding-inline-start:1.1rem; text-align:right; }
  .hero-actions{ justify-content:center; }
  .hero-media{ order:-1; margin-bottom: 1rem; }
  .portrait-scene{ width: min(260px, 68vw); }
  .float-chip{ width:36px; height:36px; }

  .about-grid{ grid-template-columns:1fr; gap:1.2rem; }
  .expertise-grid{ grid-template-columns: repeat(2,1fr); }
  .honors-grid{ grid-template-columns: repeat(2,1fr); }
  .pillars-grid{ grid-template-columns: 1fr; gap: 3rem; }
  .approach-layout{ grid-template-columns:1fr; gap:2.5rem; }
  .approach-principles{ grid-template-columns:1fr 1fr; }
  .achievements-grid{ grid-template-columns: repeat(2,1fr); }
  .contact-grid{ grid-template-columns:1fr; }
  .contact-links{ grid-template-columns:1fr; }
}

@media (max-width: 640px){
  .main-nav{
    position: fixed; inset-inline:0; top:76px; bottom:0;
    background: var(--bg); border-top:1px solid var(--border);
    transform: translateY(-8px); opacity:0; pointer-events:none;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
    display:flex; align-items:flex-start; padding-top: 2rem;
  }
  .main-nav.open{ opacity:1; transform:none; pointer-events:auto; }
  .main-nav ul{ flex-direction:column; gap:0; width:100%; }
  .main-nav a{ display:block; padding: 1.1rem 1.75rem; border-bottom:1px solid var(--border); font-size:1rem; }
  .hamburger{ display:flex; }

  .expertise-grid{ grid-template-columns: 1fr; }
  .achievements-grid{ grid-template-columns: 1fr; }
  .approach-principles{ grid-template-columns:1fr; }
  .honors-grid{ grid-template-columns: 1fr; }
}