/* Extracted inline styles from index.html */

:root{
  --bg:#0a0f14; --fg:#e9edf3; --muted:#a4b0c2; --line:#17202b; --card:#0f1720;
  --accent:#3B82F6; --accent2:#60A5FA; --accent3:#A78BFA;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg:#f6f9fc; --fg:#0f172a; --muted:#475569; --line:#e2e8f0; --card:#ffffff;
  /* Light-mode navy palette */
  --accent:#0b2340;   /* primary navy */
  --accent2:#1b4a73;  /* secondary navy */
  --accent3:#2f558f;  /* tertiary navy */
  --shadow: 0 10px 28px rgba(15,23,42,.08);
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{background:var(--bg); color:var(--fg); font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; overflow-x:hidden;}
.container{max-width:1240px;margin:0 auto;padding:0 24px}
nav{position:sticky; top:0; z-index:80; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--bg) 88%, transparent); border-bottom: 1px solid var(--line)}
.nav-inner{height:68px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:38px; height:38px; border-radius:999px; object-fit:cover}
.brand .name{font-weight:800; letter-spacing:.3px}
.menu{display:flex; gap:12px; align-items:center}
.menu a{padding:10px 12px; border-radius:10px; color:var(--fg); text-decoration:none}
.menu a:hover{background: color-mix(in oklab, var(--fg) 10%, transparent)}
.lang-toggle,.theme-toggle{border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:10px; padding:8px 12px; cursor:pointer}
.main{scroll-snap-type: y mandatory;}
.section{position:relative; min-height: 100svh; display:flex; align-items:center; border-bottom:1px solid var(--line); scroll-snap-align: start; overflow: clip;}
.bg-art{position:absolute; inset: -30vh -20vw auto -20vw; height:80svh; filter: blur(42px); opacity:.65; transform: translateZ(0);
  background: radial-gradient(1200px 600px at 25% 35%, color-mix(in oklab, var(--accent) 38%, transparent), transparent),
              radial-gradient(900px 500px at 75% 25%, color-mix(in oklab, var(--accent2) 30%, transparent), transparent),
              radial-gradient(800px 500px at 55% 80%, color-mix(in oklab, var(--accent3) 22%, transparent), transparent);}
.hero h1{font-size: clamp(36px, 6vw, 64px); line-height:1.06; margin:0 0 14px 0}
.lead{max-width: 980px; color: var(--muted); font-size: clamp(16px, 2.1vw, 20px)}
.cta{display:flex; gap:12px; margin-top:20px; flex-wrap:wrap}
.btn{position:relative; display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; border:1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 80%, transparent), var(--card)); color:var(--fg); text-decoration:none; box-shadow: var(--shadow); will-change: transform;}
.btn.primary{background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 45%, transparent), var(--accent))}
.btn .arrow{margin-inline-start:8px; transition: transform .25s ease}
.btn:hover .arrow{transform: translateX(4px)}
.notice{margin-top:16px; font-size:14px; color:var(--muted); border:1px dashed var(--line); padding:10px 12px; border-radius:10px;}
.section .grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; width:100%; max-width:1040px; margin:0 auto;}
@media (max-width: 1000px){ .section .grid{grid-template-columns: repeat(2,1fr)}}
@media (max-width: 640px){ .section .grid{grid-template-columns: 1fr}}
.card{min-height:180px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; transform-style: preserve-3d; transition: transform .2s ease, box-shadow .3s ease; will-change: transform;}
.card h3{margin:0 0 8px 0}
.card p{margin:0; color:var(--muted)}
.highlight .bullets{display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; margin-top:16px;}
.highlight .tile{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px;}
.highlight h3{font-size: clamp(22px, 2.6vw, 28px); margin:0 0 8px 0}
.kicker{letter-spacing:.2em; text-transform:uppercase; font-weight:700; color: color-mix(in oklab, var(--muted) 74%, var(--fg));}
.about .cols{display:grid; grid-template-columns: 1.1fr .9fr; gap:18px;}
@media (max-width: 920px){ .about .cols{grid-template-columns: 1fr} }
.reveal{opacity:0; transform: translateY(18px); clip-path: inset(12% 16% 12% 16% round 14px); filter: saturate(.8) blur(.2px); transition: opacity .7s ease, transform .7s ease, clip-path .9s ease;}
.reveal.in{opacity:1; transform:none; clip-path: inset(0 0 0 0 round 14px); filter:none}
.footer{padding:28px 0; color:var(--muted); font-size:14px}
.cursor-blob{position: fixed; z-index: 0; pointer-events:none; width: 40vmin; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent) 40%, transparent), transparent 60%),
              radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--accent2) 35%, transparent), transparent 60%);
  filter: blur(30px); opacity:.38; mix-blend-mode: screen; transform: translate(-50%, -50%);}
.rtl{direction: rtl} .ltr{direction: ltr}
.small{font-size:13px}


.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


body{font-family:Vazirmatn, Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif} 
.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* magic-underline */
    .nav, .rn-nav{position:sticky;top:0;z-index:1000}
    .nav-wrap, .rn-nav-wrap{position:relative}
    .nav a, .rn-nav a{position:relative; display:inline-flex; align-items:center; padding:8px 12px; text-decoration:none}
    .nav-underline{position:absolute; bottom:4px; height:2px; background:linear-gradient(90deg,#6cc4ff,#ffd66c); border-radius:2px; transition: left .25s ease, width .25s ease, opacity .2s ease; pointer-events:none; opacity:.9}
    
.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* magic-underline-v2 */
    .nav, .rn-nav{position:sticky;top:0;z-index:1000}
    .nav-wrap, .rn-nav-wrap{position:relative}
    .nav a, .rn-nav a{
      position:relative; display:inline-flex; align-items:center;
      padding:8px 12px; text-decoration:none; border-radius:8px;
    }
    /* remove hover box background */
    .nav a:hover, .rn-nav a:hover{background:transparent !important}
    .nav-underline{position:absolute; bottom:4px; height:2px;
      background:linear-gradient(90deg,#6cc4ff,#ffd66c); border-radius:2px;
      transition:left .22s ease,width .22s ease,opacity .2s ease; pointer-events:none; opacity:.95}
    
.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* remove old active underline duplication */
.nav a.active::after,
.rn-nav a.active::after,
.nav a.rn-active::after,
.rn-nav a.rn-active::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
  background: none !important;
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* --- forced linear navbar override --- */
nav.navbar-linear, header.navbar-linear { position: sticky; top: 0; z-index: 1000; }
.navbar-linear .nav-inner { display:flex; align-items:center; gap:1rem; flex-wrap:nowrap; }
.navbar-linear .brand { display:flex; align-items:center; gap:.5rem; text-decoration:none; }
.navbar-linear .brand img { height:40px; width:auto; }
.navbar-linear .menu { margin-left:auto; display:flex; align-items:center; gap:1rem; list-style:none; padding:0; }
.navbar-linear .menu li { display:inline-block; }
.navbar-linear .menu a { text-decoration:none; }
.navbar-linear .cta { margin-left: .5rem; }
@media (max-width: 768px){
  /* keep linear look but allow slight shrink */
  .navbar-linear .brand img{ height:32px; }
  .navbar-linear .menu{ gap:.75rem; }
}
/* remove underlines globally for nav */
nav a, header a { text-decoration: none; }
.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* === rnosrat mobile hamburger patch v14 (boxed + theme-aware + link filter) === */
:root{
  --rn-menu-bg-dark: rgba(18,22,28,.96);
  --rn-menu-bg-light: rgba(255,255,255,.98);
  --rn-menu-fg-dark: #ffffff;
  --rn-menu-fg-light: #0f141a;
  --rn-shadow: 0 12px 32px rgba(0,0,0,.28);
}

@media (min-width: 992px){[data-menu-toggle].rn-patch-btn{display:none!important}}

@media (max-width: 991px){
  .rn-mobile-menu[hidden]{display:none!important}
  .rn-mobile-menu{
    position:fixed; top:var(--rn-top,72px); right:12px;
    height:auto; max-height:calc(100dvh - var(--rn-top,72px) - 24px);
    width:min(84vw,360px);
    background:var(--rn-menu-bg, var(--rn-menu-bg-dark));
    color:var(--rn-menu-fg, var(--rn-menu-fg-dark));
    -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
    border-radius:18px; box-shadow:var(--rn-shadow);
    transform:translateX(120%); transition:transform .22s ease;
    z-index:2147483000; overflow:auto; padding:10px 8px 12px; direction:rtl;
  }
  body[data-menu-open="true"] .rn-mobile-menu{ transform:translateX(0) }

  /* Theme awareness */
  body.dark .rn-mobile-menu, html.dark .rn-mobile-menu, [data-theme="dark"] .rn-mobile-menu{
    --rn-menu-bg: var(--rn-menu-bg-dark); --rn-menu-fg: var(--rn-menu-fg-dark);
  }
  body.light .rn-mobile-menu, html.light .rn-mobile-menu, [data-theme="light"] .rn-mobile-menu{
    --rn-menu-bg: var(--rn-menu-bg-light); --rn-menu-fg: var(--rn-menu-fg-light);
  }

  .rn-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.38);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); z-index:2147482999 }
  .rn-backdrop[hidden]{ display:none!important }

  body[data-menu-open="true"]{ overflow:hidden; touch-action:none }
  body[data-menu-open="true"] header { pointer-events:none }

  .rn-mobile-menu a,.rn-mobile-menu button{
    display:block; position:relative; z-index:2147483002;
    text-decoration:none; padding:14px 12px; font-size:16px; line-height:1.55;
    color:var(--rn-menu-fg, #fff) !important; -webkit-tap-highlight-color: transparent;
  }

  [data-menu-toggle].rn-patch-btn{
    display:inline-flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.06); cursor:pointer; z-index:2147483001
  }
}


.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


@media (min-width: 1024px) {
  html, body { height: 100%; }
  body.home-snap {
    scroll-behavior: smooth;
    overscroll-behavior-y: none;
  }
  body.home-snap, body.home-snap main {
    scroll-snap-type: y mandatory;
  }
  body.home-snap section,
  body.home-snap .section,
  body.home-snap .snap-section,
  body.home-snap footer {
    scroll-snap-align: start;
    min-height: 100vh;
  }
  /* keep navbar fixed */
  body.home-snap header,
  body.home-snap nav,
  body.home-snap .navbar {
    position: fixed !important;
    top: 0; left: 0; right: 0;
    z-index: 1000;
  }
  body.home-snap section:first-of-type {
    padding-top: 80px; /* adjust to your navbar height */
  }
  /* footer reachable and not stretched */
  body.home-snap footer {
    scroll-snap-align: end;
    min-height: auto;
  }
}
@media (pointer: coarse) {
  body.home-snap, body.home-snap main { scroll-snap-type: none; }
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* Force Luxury Serif on brand text with high specificity */
.glass-nav .brand .brand-text,
.navbar .brand .brand-text,
.brand .brand-text{
  font-family: 'Marcellus', serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  line-height: 1.1;
  color: #2b2b2b !important;    /* visible on light */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
:root[data-theme="dark"] .glass-nav .brand .brand-text,
:root[data-theme="dark"] .navbar .brand .brand-text{
  color: #e5e7eb !important;    /* readable in dark */
}
/* size control */
.glass-nav .brand .brand-text{ font-size: clamp(17px, 2.4vw, 25px); }
/* keep Latin shaping */
.brand .brand-text{ unicode-bidi: plaintext; }

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* Tech HexOrb v2 — smaller, lower, side depends on page direction */
.hero, section:first-of-type{position:relative}

/* Base position & size */
#techHexOrb{
  position:absolute;
  top: 38%; /* a bit lower */
  width: min(28vw, 360px); /* smaller */
  aspect-ratio: 1/1;
  z-index:0;
  pointer-events:none;
  filter: drop-shadow(0 10px 24px rgba(2,6,23,.15));
}

/* English (LTR) — place on the right of text */
html[dir="ltr"] #techHexOrb{
  right: 24px;
}

/* Persian (RTL) — place on the left of text */
html[dir="rtl"] #techHexOrb{
  left: 24px;
}

/* Mobile adjustments */
@media (max-width: 960px){
  #techHexOrb{
    position:relative;
    top: 12px;
    left: auto; right: auto;
    margin: 10px auto 0;
    width: min(70vw, 340px);
  }
}

#techHexCanvas{ width:100%; height:100%; display:block; border-radius:24px; }

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* v6: Centered hero content with Tech HexOrb on top */
.hero, section:first-of-type{position:relative; text-align:center;}
#techHexOrb{
  position:relative;
  width:min(32vw, 380px);
  max-width:380px;
  margin: 0 auto 14px auto;
  aspect-ratio:1/1;
  z-index:0;
  pointer-events:none;
  filter: drop-shadow(0 10px 24px rgba(2,6,23,.15));
}
#techHexOrb canvas{ width:100%; height:100%; display:block; border-radius:24px; }
section:first-of-type h1{ font-weight:800; margin: 6px 0 8px; }
section:first-of-type .subtitle{ font-weight:400; opacity:.95; margin: 2px 0 12px; }
.hero-actions{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin:12px 0 10px; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 18px; border-radius:14px; font-weight:600; border:1px solid transparent; }
.btn-primary{ background: var(--accent, #2563eb); color: var(--accent-contrast, #fff); }
.btn-ghost{ background: transparent; border: 1px solid var(--border, #e2e8f0); color: inherit; }
@media (max-width: 960px){
  #techHexOrb{ width:min(70vw, 360px); margin-bottom: 12px; }
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* v7: Background video for hero */
.hero, section[first-of-type]{ position:relative; overflow:hidden; }
#heroBgVideo{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; z-index:0; filter: saturate(1.05) contrast(1.05);
}
/* Keep tech orb and text above video */
#techHexOrb, section:first-of-type > *:not(#heroBgVideo){ position:relative; z-index:1; }

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* Force white text in the hero section (global) */
.section.hero, .section.hero * {
  color: #ffffff !important;
}
/* Keep buttons' backgrounds intact; only enforce text color */
.section.hero .btn, 
.section.hero .btn .arrow { color: #ffffff !important; }
.section.hero .notice { color: #ffffff !important; border-color: rgba(255,255,255,0.35) !important; }

/* === USER REQUEST: in LIGHT MODE, make all first-section text WHITE except resume buttons === */
/* Make entire hero text white in light mode */
[data-theme="light"] .section.hero, 
[data-theme="light"] .section.hero * {
  color: #ffffff !important;
}

/* But keep the resume buttons (both FA and EN) using navy accent in light mode */
[data-theme="light"] .section.hero .btn[href*="resume"] {
  color: var(--accent) !important;
  border-color: rgba(11,35,64,0.28) !important;
  background: linear-gradient(180deg, color-mix(in oklab, var(--card) 88%, transparent), var(--card)) !important;
}

/* If the resume button uses .primary variant, ensure it also shows navy text */
[data-theme="light"] .section.hero .btn.primary[href*="resume"] {
  color: var(--accent) !important;
}

/* Ensure notices in hero keep readable look in light mode (white text on navy background as before) */
[data-theme="light"] .notice[data-lang="fa"],
[data-theme="light"] .notice[data-lang="en"] {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* Standardize English hero section text */
.section.hero [data-lang="en"] {
  text-align: left !important;
  direction: ltr !important;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}
.section.hero [data-lang="en"] h1,
.section.hero [data-lang="en"] p,
.section.hero [data-lang="en"] a {
  text-align: left !important;
}
.section.hero [data-lang="en"] .cta {
  justify-content: flex-start !important;
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* Standardize Persian hero section text */
.section.hero [data-lang="fa"] {
  text-align: right !important;
  direction: rtl !important;
  font-family: 'Vazirmatn', 'Yekan', sans-serif !important;
}
.section.hero [data-lang="fa"] h1,
.section.hero [data-lang="fa"] p,
.section.hero [data-lang="fa"] a {
  text-align: right !important;
}
.section.hero [data-lang="fa"] .cta {
  justify-content: flex-end !important;
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}


/* Resume button color in light mode: navy (overridden explicitly for hero above) */
[data-theme="light"] .btn[href*="resume"] {
  color: var(--accent) !important;   /* navy in light mode */
  border-color: rgba(11,35,64,0.4) !important;
}
[data-theme="light"] .btn[href*="resume"]:hover {
  color: #062236 !important;
  border-color: rgba(6,34,54,0.5) !important;
}

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.35);
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:10px;
  margin:0 auto 18px auto;
}

.matrix-box .matrix-grid{
  width:100%;
  height:100%;
  display:grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 1fr;
  align-items:center;
  justify-items:center;
  font-family:monospace;
  font-size:14px;
}

.matrix-box .matrix-grid span{
  color:#02263d;           /* خاموش: آبی خیلی تیره */
  text-shadow:none;
  opacity:0.3;
  animation:flicker 1.8s infinite ease-in-out;
}

/* تنوع در سرعت و تاخیر برای شبه-رندوم شدن */
.matrix-box .matrix-grid span:nth-child(3n){
  animation-duration:1.2s;
}
.matrix-box .matrix-grid span:nth-child(4n){
  animation-duration:2.2s;
}
.matrix-box .matrix-grid span:nth-child(5n){
  animation-delay:0.4s;
}
.matrix-box .matrix-grid span:nth-child(7n){
  animation-delay:0.7s;
}
.matrix-box .matrix-grid span:nth-child(11n){
  animation-duration:2.6s;
}

/* انیمیشن چشمک‌زن */
@keyframes flicker{
  0%,100%{
    color:#02263d;
    text-shadow:none;
    opacity:0.25;
  }
  40%{
    color:#00b0ff;
    text-shadow:0 0 8px #00b0ff;
    opacity:1;
  }
  60%{
    color:#0084c9;
    text-shadow:0 0 4px #0084c9;
    opacity:0.7;
  }
}


@media (max-width: 768px){
  /* Center hero; keep DOM order intact */
  .section.hero, section.hero { text-align: center !important; }
  .section.hero .container, section.hero .container {
    position: relative !important;
    align-items: center !important;
    padding-top: 36px !important; /* push block down overall */
  }

  /* Orb a bit higher; compact size */
  #techHexOrb{
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 38px !important;   /* slightly higher */
    margin: 0 !important;
    z-index: 2 !important;
    pointer-events: none;
    height: auto !important;
    max-width: min(46vw, 210px) !important; /* compact */
  }

  /* Push titles further down while keeping uniform spacing */
  .section.hero h1, section.hero h1{
    margin-top: 58px !important;     /* lower start so orb has clear space */
    margin-bottom: 14px !important;  /* match EN spacing under title */
  }

  /* Ensure FA lead spacing matches EN */
  .section.hero .lead[data-lang="fa"],
  .section.hero .lead[data-lang="en"]{
    margin-top: 0 !important;
  }

  /* CTA centered */
  .section.hero .cta{ justify-content: center !important; }

  /* Background layers behind */
  #heroBgVideo, .section.hero .bg-art { z-index: 0 !important; }
}


@media (max-width: 768px){
  .section.hero, .section.hero .container { text-align:center !important; }
  .section.hero h1[data-lang="fa"],
  .section.hero h1[data-lang="en"],
  .section.hero p.lead[data-lang="fa"],
  .section.hero p.lead[data-lang="en"] {
    text-align:center !important;
    width:100%;
    margin-left:auto !important;
    margin-right:auto !important;
  }
  .section.hero .cta { justify-content:center !important; }
}


/* Scope strictly to the hero section (section with id="home") in light theme */
[data-theme="light"] section#home,
[data-theme="light"] section#home * {
  color: #ffffff !important;
}

/* Exception: keep resume links (Persian/English) in navy in light mode */
[data-theme="light"] section#home a.btn[href*="resume"] {
  color: var(--accent) !important;
  /* keep original look: don't change backgrounds or borders except ensuring contrast */
  border-color: rgba(11,35,64,0.28) !important;
}

/* If resume button has primary class, ensure it also shows navy text */
[data-theme="light"] section#home a.btn.primary[href*="resume"] {
  color: var(--accent) !important;
}

/* Keep notice readable: navy background + white text in light mode */
[data-theme="light"] section#home .notice[data-lang] {
  background-color: var(--accent) !important;
  color: #ffffff !important;
}


@media (max-width: 768px) {
  /* Make the matrix-box smaller and add vertical spacing so it doesn't crowd cards */
  section#services .matrix-box {
    width: 140px !important;
    height: 140px !important;
    padding: 6px !important;
    margin: 18px auto 28px auto !important; /* space from top and push cards away below */
  }

  /* Reduce internal text size slightly to fit the smaller box while preserving layout */
  section#services .matrix-box .matrix-grid {
    grid-template-columns: repeat(9, 1fr) !important;
    gap: 4px !important;
    font-size: 11px !important;
    align-items: center;
    justify-items: center;
  }

  /* Keep individual digits compact */
  section#services .matrix-box .matrix-grid span {
    line-height: 1 !important;
    padding: 0 !important;
  }
}


@media (max-width: 768px){
  section#services .container{
    padding-bottom: 60px !important;
  }
}


/* Grid config for services section: keep 3 columns desktop, 2 tablet, 1 mobile */
section#services .grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: flex-start;
}
@media (max-width: 1000px){
  section#services .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  section#services .grid{
    grid-template-columns: 1fr;
  }
}

/* Cards themselves: کوچک‌تر، بدون min-height اجباری */
section#services .card{
  min-height: auto;              /* اجازه بده ارتفاع بر اساس محتوا باشه */
  padding: 14px 14px 16px;       /* پدینگ کمتر نسبت به کارت‌های دیگه */
  border-radius: 16px;
}

/* تیتر کارت‌ها کمی جمع‌وجورتر */
section#services .card h3{
  margin-bottom: 6px;
  font-size: 0.98rem;
}

/* متن کارت‌ها ریزتر و فشرده‌تر برای کاهش ارتفاع کلی */
section#services .card p{
  font-size: 0.9rem;
  line-height: 1.6;
}

/* خود سکشن سرویس‌ها کمی پدینگ عمودی کمتر داشته باشه تا کامل توی دسکتاپ جا بشه */
section#services .container{
  padding-top: 40px;
  padding-bottom: 32px;
}


.cursor-blob{
    position:fixed; top:0; left:0; width:40vmin; aspect-ratio:1; border-radius:50%;
    transform:translate(-50%,-50%); pointer-events:none; z-index:2147483647; will-change:transform,filter,opacity;
  }
  /* Dark mode — original colorful screen-blend */
  .cursor-blob.blob-dark{
    background:
      radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--accent,#60A5FA) 40%, transparent), transparent 60%),
      radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--accent2,#A78BFA) 35%, transparent), transparent 60%);
    filter: blur(30px);
    opacity:.38;
    mix-blend-mode: screen;
  }
  /* Light mode — balanced: sharper, center brighter, no soft edge (adapted to navy) */
  .cursor-blob.blob-light{
    width:48vmin;
    background:
      radial-gradient(circle at 50% 50%,
        rgba(11,35,64,.52) 0%,
        rgba(27,74,115,.24) 30%,
        rgba(120,120,120,.10) 50%,
        rgba(120,120,120,0) 72%);
    filter: blur(14px);
    opacity:.90;
    mix-blend-mode: normal;
    box-shadow: 0 8px 18px rgba(0,0,0,.15);
  }
  @media (prefers-reduced-motion: reduce){ .cursor-blob{ animation:none } }

.matrix-box{
  width:190px;
  height:190px;
  background:rgba(0,15,35,0.45);
  border:1px solid rgba(0,150,255,0.3);
  border-radius:18px;
  overflow:hidden;
  margin:0 auto 18px auto;
  position:relative;
  box-shadow:0 0 22px rgba(0,150,255,0.25);
  padding:8px;
}

/* Hide fallback mobile rn-patch-btn button on small screens (auto-injected mobile patch). */
@media (max-width: 991px){
  .rn-patch-btn{
    display: none !important;
  }
}