/* ---------- Design Tokens ---------- */
:root {
   --bg: #05070B;
   --surface: #10131A;
   --card: #151922;
   --border: rgba(255, 255, 255, .08);
   --border-strong: rgba(255, 255, 255, .14);
   --primary: #3B82F6;
   --accent: #60A5FA;
   --text: #FFFFFF;
   --secondary: #94A3B8;
   --muted: #64748B;
   --radius-sm: 12px;
   --radius: 20px;
   --radius-lg: 28px;
   --radius-xl: 36px;
   --ease: cubic-bezier(.22, 1, .36, 1);
   --ease-out: cubic-bezier(.16, 1, .3, 1);
   --maxw: 1280px;
   --pad: clamp(20px, 5vw, 48px);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%
}

body {
   background: var(--bg);
   color: var(--text);
   line-height: 1.6;
   font-weight: 400;
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   letter-spacing: -0.011em;
   direction: rtl;
}

img {
   max-width: 100%;
   display: block
}

button,
input,
textarea,
select {
   font: inherit;
   color: inherit
}

a {
   color: inherit;
   text-decoration: none
}

ul {
   list-style: none
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar {
   width: 10px;
   height: 10px
}

::-webkit-scrollbar-track {
   background: var(--bg)
}

::-webkit-scrollbar-thumb {
   background: #1e2330;
   border-radius: 10px;
   border: 2px solid var(--bg)
}

::-webkit-scrollbar-thumb:hover {
   background: var(--primary)
}

::selection {
   background: rgba(59, 130, 246, .35);
   color: #fff
}

/* ---------- Utilities ---------- */
.container {
   max-width: var(--maxw);
   margin: 0 auto;
   padding: 0 var(--pad)
}

section {
   position: relative;
   padding: clamp(80px, 12vw, 160px) 0
}

.eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   font-weight: 600;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--accent);
   padding: 6px 14px;
   background: rgba(59, 130, 246, .08);
   border: 1px solid rgba(59, 130, 246, .18);
   border-radius: 100px;
}

.eyebrow::before {
   content: '';
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--primary);
   box-shadow: 0 0 10px var(--primary);
}

.section-title {
   font-size: clamp(32px, 5vw, 56px);
   font-weight: 700;
   letter-spacing: -.03em;
   line-height: 1.3;
   margin: 24px 0 16px;
}

.section-sub {
   color: var(--secondary);
   font-size: clamp(15px, 1.4vw, 18px);
   max-width: 620px;
   line-height: 1.7;
}

.section-head {
   margin-bottom: clamp(48px, 7vw, 80px)
}

.section-head.center {
   text-align: center
}

.section-head.center .section-sub {
   margin: 0 auto
}

/* ---------- Reveal Animation ---------- */
.reveal {
   opacity: 0;
   transform: translateY(40px);
   transition: opacity .9s var(--ease-out), transform .9s var(--ease-out)
}

.reveal.in {
   opacity: 1;
   transform: none
}

.reveal.delay-1 {
   transition-delay: .1s
}

.reveal.delay-2 {
   transition-delay: .2s
}

.reveal.delay-3 {
   transition-delay: .3s
}

.reveal.delay-4 {
   transition-delay: .4s
}

/* ---------- Loader ---------- */
.loader {
   position: fixed;
   inset: 0;
   background: var(--bg);
   z-index: 9999;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 28px;
   transition: opacity .6s ease, visibility .6s ease;
}

.loader.hidden {
   opacity: 0;
   visibility: hidden
}

.loader-logo {
   font-size: 30px;
   font-weight: 700;
   letter-spacing: -.03em;
   display: flex;
   align-items: center;
   gap: 10px;
}

.loader-logo span {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background: var(--primary);
   box-shadow: 0 0 20px var(--primary);
   animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {

   0%,
   100% {
      transform: scale(1);
      opacity: 1
   }

   50% {
      transform: scale(1.4);
      opacity: .6
   }
}

.loader-bar {
   width: 180px;
   height: 2px;
   background: rgba(255, 255, 255, .08);
   border-radius: 2px;
   overflow: hidden
}

.loader-bar::after {
   content: '';
   display: block;
   width: 40%;
   height: 100%;
   border-radius: 2px;
   background: linear-gradient(90deg, transparent, var(--primary), transparent);
   animation: loaderSlide 1.2s var(--ease) infinite;
}

@keyframes loaderSlide {
   0% {
      transform: translateX(-100%)
   }

   100% {
      transform: translateX(350%)
   }
}

/* ---------- Mouse Glow ---------- */
.mouse-glow {
   position: fixed;
   width: 600px;
   height: 600px;
   border-radius: 50%;
   background: radial-gradient(circle, rgba(59, 130, 246, .10) 0%, rgba(59, 130, 246, .03) 35%, transparent 70%);
   pointer-events: none;
   z-index: 1;
   transform: translate(-50%, -50%);
   transition: opacity .4s ease;
   filter: blur(20px);
   opacity: 0;
}

@media (hover:hover) {
   .mouse-glow {
      opacity: 1
   }
}

/* ---------- Navbar ---------- */
.navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1000;
   padding: 22px 0;
   transition: all .5s var(--ease);
}

.navbar.scrolled {
   background: rgba(5, 7, 11, .72);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border-bottom: 1px solid var(--border);
   padding: 14px 0;
}

.navbar.hidden {
   transform: translateY(-100%)
}

.nav-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 32px
}

.logo {
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 22px;
   font-weight: 700;
   letter-spacing: -.03em
}

.logo-mark {
   width: 30px;
   height: 30px;
   border-radius: 9px;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   display: grid;
   place-items: center;
   font-size: 14px;
   font-weight: 800;
   color: #fff;
   box-shadow: 0 4px 20px rgba(59, 130, 246, .4);
}

.nav-links {
   display: flex;
   gap: 2px;
}

.nav-links a {
   font-size: 14px;
   font-weight: 500;
   color: var(--secondary);
   padding: 8px 16px;
   border-radius: 10px;
   transition: all .3s ease;
   position: relative;
}

.nav-links a:hover {
   color: var(--text);
   background: rgba(255, 255, 255, .04)
}

.nav-links a.active {
   color: var(--text)
}

.nav-links a.active::after {
   content: '';
   position: absolute;
   bottom: 2px;
   left: 50%;
   transform: translateX(-50%);
   width: 4px;
   height: 4px;
   background: var(--primary);
   border-radius: 50%;
   box-shadow: 0 0 8px var(--primary);
}

.nav-cta {
   padding: 11px 22px;
   background: var(--text);
   color: var(--bg);
   border: none;
   border-radius: 100px;
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
   transition: all .3s ease;
   display: inline-flex;
   align-items: center;
   gap: 8px;
}

.nav-cta:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 30px rgba(255, 255, 255, .18)
}

.nav-toggle {
   display: none;
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   flex-direction: column;
   gap: 5px
}

.nav-toggle span {
   width: 22px;
   height: 2px;
   background: var(--text);
   transition: all .3s ease;
   border-radius: 2px
}

.nav-toggle.open span:nth-child(1) {
   transform: translateY(7px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2) {
   opacity: 0
}

.nav-toggle.open span:nth-child(3) {
   transform: translateY(-7px) rotate(-45deg)
}

/* ---------- Hero ---------- */
.hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding-top: 50px;
   padding-bottom: 80px;
   position: relative;
   overflow: hidden;
}

.hero-bg {
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none
}

.hero-bg::before {
   content: '';
   position: absolute;
   top: -20%;
   left: 50%;
   transform: translateX(-50%);
   width: 1200px;
   height: 800px;
   border-radius: 50%;
   background: radial-gradient(ellipse at center, rgba(59, 130, 246, .18) 0%, rgba(59, 130, 246, .05) 30%, transparent 70%);
   filter: blur(40px);
}

.hero-bg::after {
   content: '';
   position: absolute;
   inset: 0;
   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: 60px 60px;
   mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
   -webkit-mask-image: radial-gradient(ellipse at center top, black 0%, transparent 70%);
}

.orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(60px);
   opacity: .4;
   animation: float 14s ease-in-out infinite;
}

.orb-1 {
   width: 300px;
   height: 300px;
   background: rgba(59, 130, 246, .25);
   top: 10%;
   right: 5%
}

.orb-2 {
   width: 240px;
   height: 240px;
   background: rgba(96, 165, 250, .18);
   bottom: 15%;
   left: 8%;
   animation-delay: -7s
}

@keyframes float {

   0%,
   100% {
      transform: translate(0, 0)
   }

   50% {
      transform: translate(30px, -30px)
   }
}

.hero-inner {
   position: relative;
   z-index: 2;
   text-align: center;
   max-width: 1000px;
   margin: 0 auto
}

.hero-eyebrow {
   margin-bottom: 32px;
   animation: fadeUp .8s var(--ease-out) both
}

.hero h1 {
   font-size: clamp(40px, 7vw, 84px);
   font-weight: 700;
   line-height: 1.4;
   letter-spacing: -.04em;
   margin-bottom: 28px;
   animation: fadeUp .8s var(--ease-out) .1s both;
}

.hero h1 .accent {
   background: linear-gradient(135deg, #fff 0%, var(--accent) 60%, var(--primary) 100%);
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hero p.lead {
   font-size: clamp(17px, 1.8vw, 21px);
   color: var(--secondary);
   max-width: 680px;
   margin: 0 auto 44px;
   line-height: 1.6;
   animation: fadeUp .8s var(--ease-out) .2s both;
}

.hero-cta {
   display: flex;
   gap: 14px;
   justify-content: center;
   flex-wrap: wrap;
   animation: fadeUp .8s var(--ease-out) .3s both;
}

.btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   padding: 14px 28px;
   border-radius: 100px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all .35s var(--ease);
   border: none;
   font-family: inherit;
   text-decoration: none;
}

.btn-primary {
   background: var(--text);
   color: var(--bg);
}

.btn-primary:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 36px rgba(255, 255, 255, .2)
}

.btn-ghost {
   background: rgba(255, 255, 255, .04);
   color: var(--text);
   border: 1px solid var(--border);
}

.btn-ghost:hover {
   background: rgba(255, 255, 255, .08);
   border-color: var(--border-strong);
   transform: translateY(-2px)
}

.btn svg {
   width: 16px;
   height: 16px;
   transition: transform .3s ease
}

.btn:hover svg {
   transform: translateX(3px)
}

.hero-stats {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-top: 80px;
   animation: fadeUp .8s var(--ease-out) .4s both;
}

.stat {
   padding: 28px 24px;
   background: rgba(21, 25, 34, .6);
   backdrop-filter: blur(10px);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   text-align: left;
   transition: all .4s var(--ease);
}

.stat:hover {
   border-color: rgba(59, 130, 246, .3);
   transform: translateY(-4px);
   background: rgba(21, 25, 34, .9)
}

.stat-num {
   font-size: clamp(32px, 4vw, 44px);
   font-weight: 700;
   letter-spacing: -.03em;
   line-height: 1
}

.stat-num .plus {
   color: var(--primary)
}

.stat-label {
   color: var(--secondary);
   font-size: 13px;
   margin-top: 8px;
   letter-spacing: .02em
}

.scroll-indicator {
   position: absolute;
   bottom: 100px;
   left: 50%;
   transform: translateX(-50%) !important;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   color: var(--muted);
   font-size: 11px;
   letter-spacing: .2em;
   text-transform: uppercase;
   animation: fadeUp .8s var(--ease-out) .6s both;
}

.scroll-mouse {
   width: 22px;
   height: 36px;
   border: 1.5px solid var(--muted);
   border-radius: 14px;
   position: relative;
}

.scroll-mouse::after {
   content: '';
   position: absolute;
   top: 6px;
   left: 50%;
   transform: translateX(-50%);
   width: 3px;
   height: 7px;
   background: var(--accent);
   border-radius: 2px;
   animation: scrollDot 1.6s ease-in-out infinite;
}

@keyframes scrollDot {
   0% {
      opacity: 0;
      transform: translate(-50%, 0)
   }

   40% {
      opacity: 1
   }

   80% {
      opacity: 0;
      transform: translate(-50%, 10px)
   }
}

@keyframes fadeUp {
   from {
      opacity: 0;
      transform: translateY(30px)
   }

   to {
      opacity: 1;
      transform: none
   }
}

/* ---------- About ---------- */
.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 80px;
   align-items: center
}

.about-text p {
   color: var(--secondary);
   font-size: 17px;
   line-height: 1.8;
   margin-bottom: 20px
}

.about-text p strong {
   color: var(--text);
   font-weight: 600
}

.about-philosophy {
   margin-top: 36px;
   padding: 28px;
   border-right: 2px solid var(--primary);
   background: linear-gradient(90deg, rgba(59, 130, 246, .06), transparent);
   border-radius: 16px 0 0 16px;
}

.about-philosophy p {
   font-size: 18px;
   font-style: italic;
   color: var(--text);
   margin: 0
}

.about-philosophy span {
   display: block;
   margin-top: 10px;
   font-size: 13px;
   color: var(--secondary);
   font-style: normal
}

.portrait-wrap {
   position: relative
}

.portrait {
   aspect-ratio: 4/5;
   border-radius: var(--radius-lg);
   overflow: hidden;
   background: linear-gradient(135deg, var(--card), var(--surface));
   border: 1px solid var(--border);
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
}

.portrait::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 30% 20%, rgba(59, 130, 246, .15), transparent 60%);
}

.portrait-label {
   position: relative;
   font-size: 13px;
   color: var(--muted);
   letter-spacing: .2em;
   text-transform: uppercase;
   z-index: 1;
}

.portrait-deco {
   position: absolute;
   inset: 20px;
   border: 1px dashed rgba(255, 255, 255, .06);
   border-radius: calc(var(--radius-lg) - 12px);
   pointer-events: none;
   overflow: hidden;
}

.portrait-badge {
   position: absolute;
   bottom: -20px;
   left: -20px;
   padding: 18px 22px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   backdrop-filter: blur(20px);
   display: flex;
   align-items: center;
   gap: 14px;
   box-shadow: 0 20px 60px rgba(0, 0, 0, .4);
   z-index: 10;
}

.portrait-badge-icon {
   width: 42px;
   height: 42px;
   border-radius: 12px;
   background: rgba(59, 130, 246, .12);
   display: grid;
   place-items: center;
   color: var(--accent);
}

.portrait-badge strong {
   display: block;
   font-size: 15px
}

.portrait-badge span {
   font-size: 12px;
   color: var(--secondary)
}

.about-timeline {
   margin-top: 80px;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
}

.about-tl-item {
   padding: 24px;
   border: 1px solid var(--border);
   border-radius: var(--radius);
   background: rgba(21, 25, 34, .4);
   transition: all .4s var(--ease);
   position: relative;
}

.about-tl-item::before {
   content: '';
   position: absolute;
   top: 0;
   left: 24px;
   right: 24px;
   height: 2px;
   background: linear-gradient(90deg, var(--primary), transparent);
   border-radius: 2px;
}

.about-tl-item:hover {
   border-color: rgba(59, 130, 246, .3);
   transform: translateY(-4px)
}

.about-tl-year {
   font-size: 13px;
   color: var(--accent);
   font-weight: 600;
   letter-spacing: .05em
}

.about-tl-title {
   font-size: 17px;
   font-weight: 600;
   margin: 8px 0 6px
}

.about-tl-desc {
   font-size: 13px;
   color: var(--secondary);
   line-height: 1.6
}

/* ---------- Skills ---------- */
.skills-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 20px
}

.skill-card {
   padding: 32px 24px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: all .5s var(--ease);
   position: relative;
   overflow: hidden;
}

.skill-card::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 0%, rgba(59, 130, 246, .1), transparent 60%);
   opacity: 0;
   transition: opacity .4s ease;
}

.skill-card:hover {
   border-color: rgba(59, 130, 246, .25);
   transform: translateY(-6px)
}

.skill-card:hover::before {
   opacity: 1
}

.skill-icon {
   width: 48px;
   height: 48px;
   border-radius: 14px;
   background: rgba(59, 130, 246, .1);
   border: 1px solid rgba(59, 130, 246, .18);
   display: grid;
   place-items: center;
   color: var(--accent);
   margin-bottom: 20px;
   transition: all .4s ease;
}

.skill-card:hover .skill-icon {
   background: rgba(59, 130, 246, .18);
   transform: scale(1.08)
}

.skill-icon svg {
   width: 24px;
   height: 24px
}

.skill-card h3 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 10px;
   letter-spacing: -.01em
}

.skill-card p {
   font-size: 13px;
   color: var(--secondary);
   line-height: 1.6;
   margin-bottom: 18px
}

.skill-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   position: relative;
   z-index: 1
}

.skill-tag {
   font-size: 11px;
   padding: 4px 10px;
   background: rgba(255, 255, 255, .04);
   border: 1px solid var(--border);
   border-radius: 6px;
   color: var(--secondary);
   font-weight: 500;
}

/* ---------- Services ---------- */
.services-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px
}

.service-card {
   padding: 36px 32px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: all .5s var(--ease);
   position: relative;
   overflow: hidden;
   cursor: default;
}

.service-card::after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .5), transparent);
   transform: translateX(-100%);
   transition: transform .8s var(--ease);
}

.service-card:hover {
   border-color: rgba(59, 130, 246, .25);
   transform: translateY(-6px);
   background: #171c26
}

.service-card:hover::after {
   transform: translateX(100%)
}

.service-num {
   position: absolute;
   top: 24px;
   right: 28px;
   font-size: 13px;
   color: var(--muted);
   font-weight: 500;
   letter-spacing: .1em;
}

.service-icon {
   width: 56px;
   height: 56px;
   border-radius: 16px;
   background: rgba(59, 130, 246, .08);
   border: 1px solid rgba(59, 130, 246, .15);
   display: grid;
   place-items: center;
   color: var(--accent);
   margin-bottom: 24px;
   transition: all .4s ease;
}

.service-card:hover .service-icon {
   background: rgba(59, 130, 246, .15);
   transform: scale(1.05) rotate(-3deg)
}

.service-icon svg {
   width: 28px;
   height: 28px
}

.service-card h3 {
   font-size: 21px;
   font-weight: 600;
   margin-bottom: 12px;
   letter-spacing: -.02em
}

.service-card p {
   font-size: 14px;
   color: var(--secondary);
   line-height: 1.7
}

.service-arrow {
   margin-top: 24px;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--accent);
   font-weight: 600;
   opacity: 0;
   transform: translateX(-10px);
   transition: all .4s ease;
}

.service-card:hover .service-arrow {
   opacity: 1;
   transform: none
}

/* ---------- Portfolio ---------- */
.portfolio-filters {
   display: flex;
   gap: 8px;
   justify-content: center;
   flex-wrap: wrap;
   margin-bottom: 48px;
}

.filter-btn {
   padding: 10px 20px;
   background: transparent;
   border: 1px solid var(--border);
   border-radius: 100px;
   font-size: 13px;
   font-weight: 500;
   color: var(--secondary);
   cursor: pointer;
   transition: all .3s ease;
   font-family: inherit;
}

.filter-btn:hover {
   color: var(--text);
   border-color: var(--border-strong)
}

.filter-btn.active {
   background: var(--text);
   color: var(--bg);
   border-color: var(--text);
}

.portfolio-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 24px;
}

.project {
   border-radius: var(--radius);
   overflow: hidden;
   background: var(--card);
   border: 1px solid var(--border);
   transition: all .5s var(--ease);
   position: relative;
}

.project.hide {
   display: none
}

.project:hover {
   border-color: rgba(59, 130, 246, .25);
   transform: translateY(-6px);
   box-shadow: 0 20px 60px rgba(0, 0, 0, .4)
}

.project-img {
   aspect-ratio: 16/10;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #1a1f2b, #0f131a);
   display: flex;
   align-items: center;
   justify-content: center;
   background-position: top;
   background-repeat: no-repeat;
   background-size: cover;
}

.project-img::before {
   content: '';
   position: absolute;
   inset: 0;
   background-image:
      linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
   background-size: 24px 24px;
}

.project-img::after {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, .1), transparent 70%);
}

.project-img-label {
   position: relative;
   color: var(--muted);
   font-size: 12px;
   letter-spacing: .2em;
   text-transform: uppercase;
   font-weight: 500;
}

.project-cat {
   position: absolute;
   top: 16px;
   left: 16px;
   z-index: 2;
   padding: 6px 12px;
   background: rgba(5, 7, 11, .7);
   backdrop-filter: blur(10px);
   border: 1px solid var(--border);
   border-radius: 100px;
   font-size: 11px;
   font-weight: 600;
   color: var(--accent);
   letter-spacing: .08em;
   text-transform: uppercase;
}

.project-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(5, 7, 11, .4) 0%, rgba(5, 7, 11, .95) 100%);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   padding: 24px;
   opacity: 0;
   transition: opacity .4s ease;
}

.project:hover .project-overlay {
   opacity: 1
}

.project-overlay p {
   font-size: 13px;
   color: var(--secondary);
   margin-bottom: 16px;
   line-height: 1.5
}

.project-links {
   display: flex;
   gap: 8px;
   flex-wrap: wrap
}

.project-link {
   padding: 8px 14px;
   background: rgba(255, 255, 255, .08);
   border: 1px solid var(--border);
   border-radius: 8px;
   font-size: 12px;
   font-weight: 500;
   color: var(--text);
   display: inline-flex;
   align-items: center;
   gap: 6px;
   transition: all .3s ease;
   z-index: 10;
}

.project-link:hover {
   background: var(--primary);
   border-color: var(--primary)
}

.project-link svg {
   width: 13px;
   height: 13px
}

.project-info {
   padding: 22px 24px
}

.project-info h3 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 6px;
   letter-spacing: -.01em
}

.project-stack {
   font-size: 12px;
   color: var(--secondary);
   display: flex;
   flex-wrap: wrap;
   gap: 6px
}

.project-stack span {
   display: inline-flex;
   align-items: center
}

.project-stack span:not(:last-child)::after {
   content: '·';
   margin-left: 6px;
   color: var(--muted)
}

/* ---------- Process ---------- */
.process-wrap {
   position: relative
}

.process-line {
   position: absolute;
   left: 50%;
   top: 0;
   bottom: 0;
   width: 2px;
   background: linear-gradient(180deg, transparent, var(--border) 10%, var(--border) 90%, transparent);
   transform: translateX(-50%);
}

.process-steps {
   display: flex;
   flex-direction: column;
   gap: 0
}

.process-step {
   display: grid;
   grid-template-columns: 1fr 80px 1fr;
   gap: 0;
   align-items: center;
   margin-bottom: 20px;
}

.process-step:nth-child(even) {
   direction: rtl
}

.process-step:nth-child(even)>* {
   direction: ltr
}

.process-card {
   padding: 28px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: all .4s var(--ease);
}

.process-step:nth-child(odd) .process-card {
   text-align: right
}

.process-card:hover {
   border-color: rgba(59, 130, 246, .25);
   transform: translateY(-3px)
}

.process-num {
   font-size: 12px;
   color: var(--accent);
   font-weight: 600;
   letter-spacing: .15em;
   margin-bottom: 8px
}

.process-card h3 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 8px
}

.process-card p {
   font-size: 13px;
   color: var(--secondary);
   line-height: 1.6
}

.process-dot {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: var(--bg);
   border: 2px solid var(--border);
   display: grid;
   place-items: center;
   margin: 0 auto;
   position: relative;
   z-index: 2;
   transition: all .4s ease;
}

.process-dot-inner {
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: rgba(59, 130, 246, .1);
   display: grid;
   place-items: center;
   color: var(--accent);
   font-size: 14px;
   font-weight: 700;
}

.process-step:hover .process-dot {
   border-color: var(--primary);
   box-shadow: 0 0 30px rgba(59, 130, 246, .3)
}

.process-empty {}

/* ---------- Experience ---------- */
.exp-wrap {
   position: relative;
   max-width: 880px;
   margin: 0 auto
}

.exp-wrap::before {
   content: '';
   position: absolute;
   left: 20px;
   top: 8px;
   bottom: 8px;
   width: 2px;
   background: linear-gradient(180deg, var(--primary), var(--border) 30%, var(--border));
}

.exp-item {
   position: relative;
   padding-left: 60px;
   margin-bottom: 40px
}

.exp-item:last-child {
   margin-bottom: 0
}

.exp-dot {
   position: absolute;
   left: 11px;
   top: 8px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--bg);
   border: 2px solid var(--primary);
   box-shadow: 0 0 0 4px rgba(59, 130, 246, .15);
}

.exp-dot::after {
   content: '';
   position: absolute;
   inset: 3px;
   border-radius: 50%;
   background: var(--primary);
}

.exp-card {
   padding: 28px 32px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: all .4s var(--ease);
}

.exp-card:hover {
   border-color: rgba(59, 130, 246, .25);
   transform: translateX(6px)
}

.exp-period {
   font-size: 12px;
   color: var(--accent);
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase
}

.exp-card h3 {
   font-size: 20px;
   font-weight: 600;
   margin: 8px 0 4px
}

.exp-company {
   font-size: 14px;
   color: var(--secondary);
   margin-bottom: 14px
}

.exp-card p {
   font-size: 14px;
   color: var(--secondary);
   line-height: 1.7;
   margin-bottom: 14px
}

.exp-achievements {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
}

.exp-ach {
   font-size: 12px;
   padding: 5px 12px;
   background: rgba(59, 130, 246, .08);
   border: 1px solid rgba(59, 130, 246, .15);
   border-radius: 6px;
   color: var(--accent);
   font-weight: 500;
}

/* ---------- Testimonials ---------- */
.testimonials-wrap {
   position: relative;
   overflow: hidden
}

.testimonials-track {
   display: flex;
   transition: transform .8s var(--ease);
}

.testimonial {
   flex: 0 0 100%;
   padding: 0 12px;
}

.testimonial-card {
   max-width: 820px;
   margin: 0 auto;
   padding: 48px clamp(28px, 5vw, 56px);
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
   text-align: center;
   position: relative;
}

.testimonial-quote {
   font-size: 80px;
   line-height: 1;
   color: var(--primary);
   opacity: .2;
   font-family: Georgia, serif;
   position: absolute;
   top: 24px;
   left: 32px;
}

.testimonial-text {
   font-size: clamp(18px, 2vw, 24px);
   line-height: 1.6;
   font-weight: 400;
   letter-spacing: -.01em;
   margin-bottom: 32px;
   position: relative;
}

.testimonial-author {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 14px
}

.testimonial-avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   background: linear-gradient(135deg, var(--primary), var(--accent));
   display: grid;
   place-items: center;
   font-weight: 700;
   font-size: 18px;
}

.testimonial-meta {
   text-align: left
}

.testimonial-name {
   font-size: 15px;
   font-weight: 600
}

.testimonial-role {
   font-size: 13px;
   color: var(--secondary)
}

.testimonial-nav {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
   margin-top: 36px;
}

.t-nav-btn {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: transparent;
   border: 1px solid var(--border);
   cursor: pointer;
   display: grid;
   place-items: center;
   color: var(--secondary);
   transition: all .3s ease;
}

.t-nav-btn:hover {
   background: var(--card);
   color: var(--text);
   border-color: var(--border-strong)
}

.t-dots {
   display: flex;
   gap: 8px
}

.t-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--border-strong);
   cursor: pointer;
   transition: all .3s ease;
}

.t-dot.active {
   background: var(--primary);
   width: 24px;
   border-radius: 4px
}

/* ---------- FAQ ---------- */
.faq-wrap {
   max-width: 820px;
   margin: 0 auto
}

.faq-item {
   border-bottom: 1px solid var(--border);
}

.faq-q {
   width: 100%;
   padding: 24px 0;
   background: none;
   border: none;
   text-align: left;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   font-size: clamp(16px, 1.5vw, 19px);
   font-weight: 500;
   color: var(--text);
   transition: color .3s ease;
}

.faq-q:hover {
   color: var(--accent)
}

.faq-icon {
   width: 32px;
   height: 32px;
   flex-shrink: 0;
   border-radius: 8px;
   background: rgba(59, 130, 246, .08);
   border: 1px solid rgba(59, 130, 246, .15);
   display: grid;
   place-items: center;
   transition: all .4s var(--ease);
   color: var(--accent);
}

.faq-icon svg {
   width: 14px;
   height: 14px;
   transition: transform .4s ease
}

.faq-item.open .faq-icon {
   background: var(--primary);
   color: #fff
}

.faq-item.open .faq-icon svg {
   transform: rotate(45deg)
}

.faq-a {
   max-height: 0;
   overflow: hidden;
   transition: max-height .5s var(--ease);
}

.faq-a-inner {
   padding: 0 0 24px;
   color: var(--secondary);
   font-size: 15px;
   line-height: 1.8
}

/* ---------- Contact ---------- */
.contact-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 60px;
   align-items: start
}

.contact-info h3 {
   font-size: 24px;
   font-weight: 600;
   margin-bottom: 16px;
   letter-spacing: -.02em
}

.contact-info p {
   color: var(--secondary);
   font-size: 15px;
   line-height: 1.7;
   margin-bottom: 36px
}

.contact-methods {
   display: flex;
   flex-direction: column;
   gap: 14px;
   margin-bottom: 36px
}

.contact-method {
   display: flex;
   align-items: center;
   gap: 16px;
   padding: 18px 20px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   transition: all .3s ease;
}

.contact-method:hover {
   border-color: rgba(59, 130, 246, .25);
   transform: translateX(4px)
}

.contact-method-icon {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: rgba(59, 130, 246, .1);
   display: grid;
   place-items: center;
   color: var(--accent);
   flex-shrink: 0;
}

.contact-method-icon svg {
   width: 20px;
   height: 20px
}

.contact-method-label {
   font-size: 12px;
   color: var(--secondary)
}

.contact-method-value {
   font-size: 15px;
   font-weight: 500
}

.social-links {
   display: flex;
   gap: 10px
}

.social-link {
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: var(--card);
   border: 1px solid var(--border);
   display: grid;
   place-items: center;
   color: var(--secondary);
   transition: all .3s ease;
}

.social-link:hover {
   background: var(--primary);
   color: #fff;
   border-color: var(--primary);
   transform: translateY(-3px)
}

.social-link svg {
   width: 18px;
   height: 18px
}

.contact-form {
   padding: 36px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: var(--radius-lg);
}

.form-group {
   margin-bottom: 20px
}

.form-group label {
   display: block;
   font-size: 13px;
   font-weight: 500;
   color: var(--secondary);
   margin-bottom: 8px;
   letter-spacing: .02em;
}

.form-group input,
.form-group textarea,
.form-group select {
   width: 100%;
   padding: 14px 16px;
   background: var(--bg);
   border: 1px solid var(--border);
   border-radius: 12px;
   font-size: 14px;
   color: var(--text);
   transition: all .3s ease;
   font-family: inherit;
}

.footer-brand {
   margin-bottom: 35px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
   color: var(--muted)
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
   outline: none;
   border-color: var(--primary);
   background: rgba(59, 130, 246, .03);
}

.form-group textarea {
   resize: vertical;
   min-height: 120px
}

.form-row {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 16px
}

.form-submit {
   width: 100%;
   padding: 16px;
   background: var(--text);
   color: var(--bg);
   border: none;
   border-radius: 12px;
   font-size: 15px;
   font-weight: 600;
   cursor: pointer;
   transition: all .3s ease;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.form-submit:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 30px rgba(255, 255, 255, .15)
}

.form-msg {
   margin-top: 14px;
   padding: 12px 16px;
   border-radius: 10px;
   font-size: 13px;
   background: rgba(59, 130, 246, .1);
   border: 1px solid rgba(59, 130, 246, .25);
   color: var(--accent);
   display: none;
}

.form-msg.show {
   display: block
}

/* ---------- Footer ---------- */
.footer {
   padding: 80px 0 40px;
   border-top: 1px solid var(--border);
   background: linear-gradient(180deg, var(--bg), #02040a);
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 48px;
   margin-bottom: 60px;
}

.footer-brand p {
   color: var(--secondary);
   font-size: 14px;
   line-height: 1.7;
   margin-top: 16px;
   max-width: 320px
}

.footer-col h4 {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--text);
   margin-bottom: 18px
}

.footer-col ul {
   display: flex;
   flex-direction: column;
   gap: 10px
}

.footer-col a {
   font-size: 14px;
   color: var(--secondary);
   transition: color .3s ease
}

.footer-col a:hover {
   color: var(--accent)
}

.footer-bottom {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 32px;
   border-top: 1px solid var(--border);
   gap: 20px;
   flex-wrap: wrap;
   flex-direction: column;
}

p.recaptcha-legal {
   width: 100%;
}

.grecaptcha-badge {
   visibility: hidden !important;
   opacity: 0 !important;
}

.footer-bottom .first {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top: 32px;
   gap: 20px;
   flex-wrap: wrap;
   width: 100%;
}

.footer-bottom p {
   font-size: 13px;
   color: var(--muted)
}

.back-to-top {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 10px 18px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 100px;
   font-size: 13px;
   font-weight: 500;
   color: var(--text);
   cursor: pointer;
   transition: all .3s ease;
   font-family: inherit;
}

.back-to-top:hover {
   background: var(--primary);
   border-color: var(--primary);
   transform: translateY(-2px)
}

.back-to-top svg {
   width: 14px;
   height: 14px;
   transition: transform .3s ease
}

.back-to-top:hover svg {
   transform: translateY(-3px)
}

/* ---------- Toast ---------- */
.toast {
   position: fixed;
   bottom: 32px;
   left: 50%;
   transform: translateX(-50%) translateY(120px);
   padding: 14px 24px;
   background: var(--card);
   border: 1px solid var(--border);
   border-radius: 100px;
   font-size: 14px;
   display: flex;
   align-items: center;
   gap: 10px;
   z-index: 5000;
   transition: transform .5s var(--ease);
   box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
   backdrop-filter: blur(20px);
}

.toast.show {
   transform: translateX(-50%) translateY(0)
}

.toast::before {
   content: '';
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #10b981;
   box-shadow: 0 0 10px #10b981;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px) {
   .skills-grid {
      grid-template-columns: repeat(3, 1fr)
   }

   .services-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .portfolio-grid {
      grid-template-columns: repeat(2, 1fr)
   }

   .hero-stats {
      grid-template-columns: repeat(2, 1fr)
   }

   .about-timeline {
      grid-template-columns: repeat(2, 1fr)
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr;
      gap: 32px
   }
}

@media (max-width:768px) {
   .nav-links {
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      width: 80%;
      max-width: 340px;
      background: rgba(5, 7, 11, .95);
      backdrop-filter: blur(30px);
      flex-direction: column;
      padding: 100px 32px;
      gap: 8px;
      transform: translateX(100%);
      transition: transform .5s var(--ease);
      border-left: 1px solid var(--border);
   }

   .nav-links.open {
      transform: translateX(0)
   }

   .nav-links a {
      font-size: 18px;
      padding: 14px 0
   }

   .nav-toggle {
      display: flex;
      z-index: 1001
   }

   .nav-cta {
      display: none
   }

   .about-grid {
      grid-template-columns: 1fr;
      gap: 48px
   }

   .contact-grid {
      grid-template-columns: 1fr;
      gap: 40px
   }

   .skills-grid {
      grid-template-columns: 1fr 1fr
   }

   .services-grid {
      grid-template-columns: 1fr
   }

   .portfolio-grid {
      grid-template-columns: 1fr
   }

   .hero-stats {
      grid-template-columns: 1fr 1fr
   }

   .about-timeline {
      grid-template-columns: 1fr
   }

   .footer-grid {
      grid-template-columns: 1fr 1fr 1fr;
      gap: 32px;
      justify-items: center;
   }

   .reverse-grid {
      display: flex;
      flex-direction: column-reverse;
   }

   .reverse-grid .portrait-wrap {
      width: 100%;
   }

   .footer-brand a {
      justify-content: center;
      font-size: 45px;
   }

   .footer-brand span {
      font-size: 45px;
      width: 70px;
      height: 70px;
      border-radius: 20px;
   }



   .process-step {
      grid-template-columns: 50px 1fr;
      gap: 16px;
      display: flex;
   }

   .process-step:nth-child(even) {
      direction: ltr
   }

   .process-step:nth-child(odd) .process-card {
      text-align: left
   }

   .process-line {
      left: 25px
   }

   .process-empty {
      display: none
   }

   .process-step:nth-child(even) .process-empty {
      display: none
   }

   .form-row {
      grid-template-columns: 1fr
   }

   .portrait-badge {
      position: relative;
      bottom: 0;
      left: 0;
      margin-top: 16px
   }
}

@media (max-width:480px) {
   .skills-grid {
      grid-template-columns: 1fr
   }

   .hero-stats {
      grid-template-columns: 1fr
   }

   .btn {
      width: 100%;
      justify-content: center
   }

   .hero-cta {
      flex-direction: column
   }

   .testimonial-card {
      padding: 36px 24px
   }

   .testimonial-quote {
      font-size: 60px;
      top: 16px;
      left: 20px
   }
}

@media (prefers-reduced-motion:reduce) {
   * {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important
   }

   .reveal {
      opacity: 1;
      transform: none
   }
}

body.admin-bar .navbar {
   top: 32px;
}

@media screen and (max-width: 782px) {
   body.admin-bar .navbar {
      top: 46px;
   }
}

#about .container {
   margin-bottom: 100px;
}

.portrait-badge {
   direction: ltr;
}


#katoonistore {
   background-image: url(../img/portfolio/katooni-thum.webp);
}

#noblealliancetrade {
   background-image: url(../img/portfolio/noblealliancetrade.webp);
}

#sheet-sync {
   background-image: url(../img/portfolio/sheet-sync.webp);
}

#apololand {
   background-image: url(../img/portfolio/apololand-thum.webp);
}

#atatel {
   background-image: url(../img/portfolio/atatel-thum.webp);
}

#mashadkala {
   background-image: url(../img/portfolio/mashadkala-thum.webp);
}

#sync-api {
   background-image: url(../img/portfolio/sync-api-thum.webp);
}

#partchemical {
   background-image: url(../img/portfolio/partchemical-thum.webp);
}

#quantom {
   background-image: url(../img/portfolio/quantom.webp);
}

/* Language-aware layout. Keep timelines and technical samples in their original geometry. */
html[dir="ltr"] body { direction: ltr; }
html[dir="rtl"] body { direction: rtl; }
html[dir="ltr"] .about-grid,
html[dir="ltr"] .reverse-grid { direction: ltr; }
html[dir="ltr"] .about-text,
html[dir="ltr"] .contact-info,
html[dir="ltr"] .contact-form { text-align: left; }
html[dir="rtl"] .about-text,
html[dir="rtl"] .contact-info,
html[dir="rtl"] .contact-form { text-align: right; }
html[dir="ltr"] .about-philosophy { border-right: 0; border-left: 2px solid var(--primary); }
input[type="email"], .contact-method-value { direction: ltr; }
.language-switch { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.language-switch a { font-size: 13px; color: var(--text); text-decoration: none; }
.language-switch a[aria-current="true"] { color: var(--primary); text-decoration: underline; text-underline-offset: 5px; }
.wordflow-honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form-submit:disabled { opacity: .6; cursor: wait; }
@media(max-width: 600px) { .nav-inner { gap: 10px; } .language-switch { gap: 6px; } }
html[dir="ltr"] .process-card { direction: ltr; text-align: left; }
html[dir="rtl"] .process-card { direction: rtl; text-align: right; }

@font-face { font-family: WordFlowPersian; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: WordFlowPersian; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }
html[dir="rtl"] body { font-family: WordFlowPersian, Tahoma, sans-serif; }
html[dir="ltr"] body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }

/* Not-found page */
.wf-not-found { min-height: 85svh; display: grid; align-items: center; padding: 160px 0 90px; }
.wf-not-found-panel { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: clamp(32px, 6vw, 88px); padding: clamp(28px, 5vw, 72px); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); background: radial-gradient(ellipse at 15% 15%, rgba(59,130,246,.09), transparent 60%), var(--surface); overflow: hidden; }
.wf-not-found-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 420px; width: 100%; margin-inline: auto; direction: ltr; isolation: isolate; }
.wf-not-found-art::before { content: ""; position: absolute; inset: 5%; background: radial-gradient(circle, rgba(59,130,246,.2), transparent 68%); z-index: -1; }
.wf-not-found-code { font-family: system-ui, sans-serif; font-size: clamp(110px, 15vw, 206px); font-weight: 800; letter-spacing: -.08em; padding-inline-end: .08em; line-height: 1; color: var(--accent); text-shadow: 0 10px 70px rgba(59,130,246,.2); }
.wf-not-found-orbit { position: absolute; inset: 6%; border: 1px solid rgba(96,165,250,.25); border-radius: 50%; transform: rotate(-30deg) scaleY(.65); z-index: -1; }
.wf-not-found-orbit-inner { inset: 0; transform: rotate(35deg) scaleY(.65); border-style: dashed; border-color: rgba(96,165,250,.14); }
.wf-not-found-dot { position: absolute; top: 20%; right: 15%; width: 12px; height: 12px; background: var(--accent); border-radius: 50%; box-shadow: 0 0 0 7px rgba(59,130,246,.12), 0 0 30px rgba(59,130,246,.4); }
.wf-not-found-star { position: absolute; bottom: 22%; left: 12%; height: 6px; width: 6px; border-radius: 50%; background: var(--secondary); }
.wf-not-found-copy h1 { font-size: clamp(30px, 3.8vw, 50px); font-weight: 700; line-height: 1.3; letter-spacing: -.035em; margin: 18px 0; text-wrap: balance; }
.wf-not-found-copy > p { color: var(--secondary); font-size: 16px; line-height: 1.9; max-width: 48ch; }
.wf-not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.wf-not-found-actions svg { width: 18px; height: 18px; }
html[dir="rtl"] .wf-not-found-actions svg { transform: rotate(180deg); }
.wf-not-found-help { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; color: var(--secondary); font-size: 13px; }
.wf-not-found-help a { color: var(--accent); text-underline-offset: 4px; }
.wf-not-found-help-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); }
.wf-not-found a:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
@media (max-width: 900px) {
   .wf-not-found { padding-top: 120px; }
   .wf-not-found-panel { grid-template-columns: 1fr; gap: 12px; text-align: center; }
   .wf-not-found-art { max-width: 270px; }
   .wf-not-found-code { font-size: 136px; }
   .wf-not-found-copy > p { margin-inline: auto; }
   .wf-not-found-actions, .wf-not-found-help { justify-content: center; }
}
@media (max-width: 480px) {
   .wf-not-found-panel { padding: 24px 18px 32px; border-radius: var(--radius-lg); }
   .wf-not-found-art { max-width: 210px; }
   .wf-not-found-code { font-size: 112px; }
   .wf-not-found-actions { flex-direction: column; }
   .wf-not-found-actions .btn { justify-content: center; width: 100%; }
}

.portrait-deco {
   max-width: 100%;
   overflow: hidden; /* جلوگیری از بیرون زدگی احتمالی */
}

.portrait-deco .portrait-label {
   max-width: 100%;
   height: auto; /* بسیار مهم: نسبت تصویر را حفظ می‌کند و ارتفاع ثابت ۶۵۳ را نادیده می‌گیرد */
   display: block;
   object-fit: cover;
}

@media (max-width: 768px) {
   .portrait-deco .portrait-label {
      max-width: 310px;
      margin: 0 auto;
   }
}