html{ scroll-behavior:smooth; }
  body{ font-family:'Vazirmatn',sans-serif; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
  ::selection{ background:#1FB6A6; color:#fff; }
  /* subtle branded scrollbar (desktop) */
  @media (pointer:fine){
    html{ scrollbar-width:thin; scrollbar-color:#1FB6A6 #e8eef1; }
    ::-webkit-scrollbar{ width:11px; height:11px; }
    ::-webkit-scrollbar-track{ background:#e8eef1; }
    ::-webkit-scrollbar-thumb{ background:linear-gradient(#1FB6A6,#009999); border-radius:9px; border:2px solid #e8eef1; }
    ::-webkit-scrollbar-thumb:hover{ background:linear-gradient(#34D0C0,#1FB6A6); }
  }
  @property --reveal{ syntax:'<number>'; inherits:true; initial-value:0; }

  /* ---- a11y helpers ---- */
  .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  :focus-visible{ outline:2px solid #34D0C0; outline-offset:3px; border-radius:6px; }
  .skip-link{ position:fixed; top:-120px; inset-inline-start:1rem; z-index:100; background:#009999; color:#fff; font-weight:700; padding:.6rem 1rem; border-radius:.6rem; box-shadow:0 8px 26px rgba(0,0,0,.4); transition:top .3s cubic-bezier(.16,1,.3,1); }
  .skip-link:focus{ top:1rem; }

  /* ---- backgrounds / depth ---- */
  .grad-navy{ background:linear-gradient(140deg,#030d18 0%,#0B2138 42%,#0E2C46 72%,#0a5d5a 145%); }
  .grad-text{ background:linear-gradient(90deg,#34D0C0,#1FB6A6 55%,#2BA579); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .grid-lines{ background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px); background-size:60px 60px; }
  .noise{ position:fixed; inset:0; z-index:9; pointer-events:none; opacity:.04;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
  .blob{ position:absolute; border-radius:9999px; filter:blur(70px); opacity:.5; animation:float 14s ease-in-out infinite;
    will-change:transform; contain:paint; }
  /* translate only — a scale() here would force the blurred layer to be re-rasterized
     every frame, which was the main source of jank in the hero. */
  @keyframes float{ 0%,100%{ transform:translate3d(0,0,0);} 50%{ transform:translate3d(20px,-30px,0);} }
  .blob.paused{ animation-play-state:paused; }
  .twinkle.paused rect{ animation-play-state:paused; }
  /* perf: skip render/paint of below-the-fold sections until near viewport */
  .cv-auto{ content-visibility:auto; contain-intrinsic-size:auto 700px; }

  /* ---- 3D depth system ---- */
  .scene{ perspective:1300px; perspective-origin:50% 42%; }
  .tilt3d{ transform-style:preserve-3d; transition:transform .5s cubic-bezier(.16,1,.3,1); }
  .lift{ transform:translateZ(40px); }
  .lift-sm{ transform:translateZ(22px); }
  .recess{ transform:translateZ(-30px); }

  /* hero stage planes */
  /* #heroBack holds the photo + blurred blobs and is deliberately NOT a 3D/animated
     context, so those layers rasterize once. #heroStage carries only cheap gradients. */
  #heroBack{ position:absolute; inset:0; overflow:hidden; }
  /* #heroStage is no longer used by the hero (see the note in home.blade.php); the rule
     is kept harmless in case a future layout re-introduces a tilted plane stack. */
  #heroStage{ position:absolute; inset:0; transform-style:preserve-3d; }
  .hplane{ position:absolute; inset:-6%; }
  .depth-floor{ position:absolute; left:50%; bottom:-18%; width:200%; height:130%;
    transform:translateX(-50%) rotateX(64deg) translateZ(-260px);
    background-image:linear-gradient(#34D0C0 1px,transparent 1px),linear-gradient(90deg,#34D0C0 1px,transparent 1px);
    background-size:46px 46px; opacity:.16;
    -webkit-mask-image:linear-gradient(to top,#000 0%,transparent 72%); mask-image:linear-gradient(to top,#000 0%,transparent 72%); }
  .light-shaft{ position:absolute; top:-30%; left:6%; width:55%; height:170%; transform:rotate(16deg); pointer-events:none;
    background:linear-gradient(90deg,transparent,rgba(52,208,192,.10),transparent); filter:blur(10px); }
  #heroGlow{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s ease; z-index:1;
    background:radial-gradient(440px circle at var(--mx,50%) var(--my,40%), rgba(52,208,192,.18), transparent 60%); }
  #home:hover #heroGlow{ opacity:1; }
  /* mouse-reactive glow for the (dark) services section */
  #svcGlow{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0; transition:opacity .6s ease;
    background:radial-gradient(480px circle at var(--sgx,50%) var(--sgy,40%), rgba(52,208,192,.14), transparent 62%); }
  #services:hover #svcGlow{ opacity:1; }

  /* glass */
  .glass{ background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.05));
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 32px 60px -28px rgba(3,13,24,.85), inset 0 1px 0 rgba(255,255,255,.20); }
  .ghost{ position:absolute; font-weight:900; color:rgba(255,255,255,.045); pointer-events:none; user-select:none; line-height:.8; }

  /* ---- reveal on scroll ---- */
  .reveal{ opacity:0; transform:translateY(34px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
  .reveal.from-r{ transform:translateX(40px); }
  .reveal.from-l{ transform:translateX(-40px); }
  .reveal.pop{ transform:translateY(40px) scale(.96); }
  .reveal.in{ opacity:1; transform:none; }

  /* ---- hero headline word reveal ---- */
  .word{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; }
  .word > span{ display:inline-block; transform:translateY(110%); transition:transform 1s cubic-bezier(.16,1,.3,1); }
  .ready .word > span{ transform:translateY(0); padding:10px 5px; }
  .glowtext{ text-shadow:0 0 38px rgba(52,208,192,.35); }

  /* ---- header ---- */
  #header{ transition:background .5s cubic-bezier(.4,0,.2,1), box-shadow .5s, border-color .5s; border-bottom:1px solid transparent; }
  #header.scrolled{ background:rgba(7,21,37,.90); backdrop-filter:blur(8px); border-bottom-color:rgba(52,208,192,.18); box-shadow:0 10px 40px -18px rgba(0,0,0,.6); }
  .navlink{ position:relative; }
  .navlink::after{ content:''; position:absolute; inset-inline-start:0; bottom:-6px; height:2px; width:0; background:linear-gradient(90deg,#34D0C0,#1FB6A6); border-radius:2px; box-shadow:0 0 10px rgba(52,208,192,.6); transition:width .35s cubic-bezier(.16,1,.3,1); }
  .navlink:hover::after, .navlink.active::after{ width:100%; }
  .navlink.active{ color:#34D0C0; }
  #mobileMenu{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.16,1,.3,1); }
  #mobileMenu.open{ grid-template-rows:1fr; }
  #mobileMenu > div{ overflow:hidden; }
  .burger span{ display:block; height:2px; width:24px; background:currentColor; border-radius:2px; transition:transform .4s cubic-bezier(.16,1,.3,1), opacity .3s; }
  .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger.open span:nth-child(2){ opacity:0; }
  .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  /* ---- cards (3D + sheen + glow) ---- */
  .card3d{ position:relative; transform-style:preserve-3d; transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s, border-color .4s, background .4s; }
  .card3d .glow{ position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .4s;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), rgba(52,208,192,.16), transparent 60%); }
  .card3d:hover .glow{ opacity:1; }
  .sheen{ position:absolute; inset:0; border-radius:inherit; overflow:hidden; pointer-events:none; }
  .sheen::before{ content:''; position:absolute; top:-60%; left:var(--sx,-40%); width:36%; height:220%; transform:rotate(18deg);
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent); opacity:0; transition:opacity .45s; }
  .card3d:hover .sheen::before{ opacity:1; }

  /* ---- buttons ---- */
  .btn-fill{ position:relative; overflow:hidden; z-index:0; }
  .btn-fill::before{ content:''; position:absolute; inset:0; z-index:-1; background:#1FB6A6; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.5,.1,.1,1); }
  .btn-fill:hover::before{ transform:scaleX(1); }
  .magnetic{ transition:transform .25s cubic-bezier(.16,1,.3,1); }

  /* ---- project card hover ---- */
  .pcard .pimg{ transition:transform .7s cubic-bezier(.2,.7,.2,1); }
  .pcard:hover .pimg{ transform:scale(1.08); }
  .pcard .pover{ transform:translateY(101%); transition:transform .5s cubic-bezier(.2,.7,.2,1); }
  .pcard:hover .pover{ transform:translateY(0); }

  /* ---- scroll progress + cursor ---- */
  #prog{ position:fixed; top:0; inset-inline-start:0; height:3px; width:0; z-index:60; background:linear-gradient(90deg,#34D0C0,#009999); }
  #cursorHalo{ position:fixed; top:0; left:0; width:120px; height:120px; border-radius:50%; pointer-events:none; z-index:78; transform:translate(-50%,-50%);
    /* The gradient already falls off smoothly, so the blur only cost a re-raster of this
       layer on every pointer frame. Softened the stops instead. */
    background:radial-gradient(circle, rgba(31,182,166,.16) 0%, rgba(31,182,166,.08) 42%, transparent 70%);
    opacity:0; transition:opacity .4s; }
  #cursor{ position:fixed; top:0; left:0; width:34px; height:34px; border:1.5px solid rgba(31,182,166,.9); border-radius:50%; pointer-events:none; z-index:80; transform:translate(-50%,-50%); transition:width .25s, height .25s, background .25s, border-color .25s; display:grid; place-items:center; }
  #cursor.big{ width:64px; height:64px; background:rgba(31,182,166,.15); }
  #cursor.label{ width:88px; height:88px; background:rgba(0,153,153,.92); border-color:transparent; }
  #cursor .ctxt{ font-size:12px; font-weight:700; color:#fff; opacity:0; transform:scale(.6); transition:opacity .25s, transform .25s; }
  #cursor.label .ctxt{ opacity:1; transform:scale(1); }
  #cursorDot{ position:fixed; top:0; left:0; width:6px; height:6px; border-radius:50%; background:#34D0C0; pointer-events:none; z-index:81; transform:translate(-50%,-50%); }
  body.cursor-on #cursorHalo{ opacity:1; }
  @media (max-width:1024px){ #cursor,#cursorDot,#cursorHalo{ display:none; } }
  @media (hover:none){ #cursor,#cursorDot,#cursorHalo{ display:none; } }

  /* ---- before/after diorama ---- */
  /* قاب مربع در همهٔ اندازه‌ها (aspect-ratio نسبت را در حالت ریسپانسیو هم نگه می‌دارد) */
  .ba-stage{ position:relative; aspect-ratio:1/1; border-radius:1.5rem; overflow:hidden; transform-style:preserve-3d;
    border:1px solid rgba(52,208,192,.20); box-shadow:0 40px 80px -30px rgba(3,13,24,.85), inset 0 1px 0 rgba(255,255,255,.10); }
  .ba-after,.ba-before{ position:absolute; inset:0; }
  .ba-after svg,.ba-before svg{ width:100%; height:100%; display:block; }
  /* عکس آپلودی جای تصویر پیش‌فرض SVG می‌نشیند و کل قاب را پر می‌کند */
  .ba-after img,.ba-before img{ width:100%; height:100%; display:block; object-fit:cover; }
  .ba-before{ clip-path:inset(0 calc(var(--reveal) * 100%) 0 0); will-change:clip-path; }
  .seam{ position:absolute; top:0; bottom:0; inset-inline-start:calc(var(--reveal) * 100%); width:2px;
    background:linear-gradient(#34D0C0,#009999); box-shadow:0 0 20px 2px rgba(52,208,192,.75); z-index:5; }
  .seam-knob{ position:absolute; top:50%; right:50%; transform:translate(50%,-50%); width:46px; height:46px; border-radius:50%;
    background:#fff; color:#0B2138; display:grid; place-items:center; font-size:18px; font-weight:700; cursor:ew-resize; box-shadow:0 8px 26px rgba(0,0,0,.4); }
  .ba-tag{ position:absolute; top:1rem; z-index:6; font-size:.7rem; font-weight:700; padding:.25rem .7rem; border-radius:9999px; }
  .ba-pct{ position:absolute; bottom:1rem; left:1rem; z-index:6; font-size:.8rem; font-weight:800; color:#34D0C0; background:rgba(3,13,24,.6); padding:.2rem .6rem; border-radius:9999px; }
  .ba-btn{ font-size:.85rem; font-weight:700; padding:.55rem 1.15rem; border-radius:9999px; border:1px solid rgba(0,153,153,.30); color:#0B2138; background:#fff; cursor:pointer; transition:background .35s, color .35s, border-color .35s, box-shadow .35s, transform .25s; }
  .ba-btn.is-active{ background:#009999; color:#fff; border-color:#009999; box-shadow:0 10px 24px -8px rgba(0,153,153,.6); }
  .ba-btn:not(.is-active):hover{ border-color:#009999; color:#009999; }
  .twinkle rect{ animation:tw 3.2s ease-in-out infinite; }
  .twinkle rect:nth-child(2){ animation-delay:-1s; } .twinkle rect:nth-child(3){ animation-delay:-2s; } .twinkle rect:nth-child(4){ animation-delay:-.5s; }
  @keyframes tw{ 0%,100%{ opacity:.35;} 50%{ opacity:1;} }

  /* energy accent badge */
  .energy-badge{ background:linear-gradient(120deg,rgba(43,165,121,.12),rgba(31,182,166,.12)); border:1px solid rgba(43,165,121,.25); }

  @media (prefers-reduced-motion:reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
    .reveal{ opacity:1 !important; transform:none !important; }
    .word > span{ transform:none !important; }
    #cursor,#cursorDot,#cursorHalo,.blob,.depth-floor,.light-shaft{ display:none !important; }
    #heroStage,.tilt3d,[data-depth]{ transform:none !important; }
  }

/* ---- direction-aware bits with no logical-property equivalent (default = RTL) ---- */
[dir="ltr"] .btn-fill::before{ transform-origin:left; }
[dir="ltr"] .ba-before{ clip-path:inset(0 0 0 calc(var(--reveal) * 100%)); }
[dir="ltr"] .seam-knob{ right:auto; left:50%; transform:translate(-50%,-50%); }

/* ---- progressive enhancement: if site.js never runs, keep content visible ---- */
html:not(.js-reveal) .reveal{ opacity:1 !important; transform:none !important; }

/* ---- image placeholder: animated skeleton shimmer while the image loads ----
   Animates the CONTAINER's own background (no ::before / no z-index changes), so
   absolutely-positioned card images and badges inside .img-ph are unaffected;
   the loaded image simply paints over it. */
.img-ph{ background:linear-gradient(115deg,#0B2138 0%,#12324f 42%,#1b4a60 50%,#12324f 58%,#0B2138 100%);
  background-size:220% 100%; animation:shimmer 2.2s ease-in-out infinite; }
.img-ph.img-ready{ animation:none; } /* stop shimmering once the image has painted */
@keyframes shimmer{ 0%{ background-position:180% 0; } 100%{ background-position:-80% 0; } }

/* ---- smooth fade-in for lazy content images (JS adds .is-loaded; visible if JS off) ---- */
html.js-reveal img[loading="lazy"]{ opacity:0; transition:opacity .8s cubic-bezier(.16,1,.3,1); }
html.js-reveal img[loading="lazy"].is-loaded{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  html.js-reveal img[loading="lazy"]{ opacity:1; transition:none; }
  .img-ph{ animation:none; }
}

/* ---- contact success popup ---- */
.cf-popup{ position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:1.5rem; }
.cf-popup.open{ display:flex; }
.cf-popup__backdrop{ position:absolute; inset:0; background:rgba(6,18,32,.62); backdrop-filter:blur(4px); animation:cfFade .25s ease; }
.cf-popup__card{ position:relative; z-index:1; width:100%; max-width:26rem; background:#fff; border-radius:1.5rem;
  padding:2.25rem 2rem 1.85rem; text-align:center; box-shadow:0 40px 80px -30px rgba(3,13,24,.65); animation:cfPop .35s cubic-bezier(.16,1,.3,1); }
.cf-popup__icon{ width:4rem; height:4rem; margin:0 auto 1.1rem; border-radius:9999px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg,#12b39f,#009999); box-shadow:0 12px 26px -8px rgba(0,153,153,.6); }
.cf-popup__icon svg{ width:2rem; height:2rem; }
.cf-popup__title{ font-size:1.35rem; font-weight:800; color:#0B2138; margin-bottom:.5rem; }
.cf-popup__msg{ color:rgba(11,33,56,.72); line-height:1.9; margin-bottom:1.4rem; }
.cf-popup__btn{ background:#009999; color:#fff; font-weight:700; border:0; border-radius:.75rem; padding:.7rem 2.2rem;
  cursor:pointer; transition:filter .2s, transform .2s; }
.cf-popup__btn:hover{ filter:brightness(1.08); transform:translateY(-1px); }
@keyframes cfFade{ from{opacity:0} to{opacity:1} }
@keyframes cfPop{ from{opacity:0; transform:translateY(16px) scale(.96)} to{opacity:1; transform:none} }

/* ---- project category filter chips ---- */
.proj-chip{ padding:.55rem 1.3rem; border-radius:9999px; font-size:.875rem; font-weight:700; color:#0B2138;
  background:#fff; border:1px solid rgba(11,33,56,.14); cursor:pointer; transition:color .25s, background .25s, border-color .25s, box-shadow .25s; }
.proj-chip:hover{ border-color:#009999; color:#009999; }
.proj-chip.is-active{ background:#009999; color:#fff; border-color:#009999; box-shadow:0 10px 22px -10px rgba(0,153,153,.65); }

/* ---- line clamp (safety fallback if Tailwind util not compiled) ---- */
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- grid col-span-full (not present in the compiled tw.css subset) — ---- */
/*      makes empty-state cards span the whole grid so they stay centred.   */
.col-span-full{ grid-column:1 / -1; }

/* ---- articles list toolbar (search + chips) ---- */
.art-toolbar{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.25rem; justify-content:space-between; }
.art-search-wrap{ position:relative; flex:1 1 16rem; max-width:24rem; }
.art-search-icon{ position:absolute; top:50%; inset-inline-start:1rem; transform:translateY(-50%); width:1.15rem; height:1.15rem; color:#009999; pointer-events:none; }
.art-search{ width:100%; border:1px solid rgba(11,33,56,.14); background:#fff; border-radius:9999px; padding:.8rem 1.1rem; padding-inline-start:2.9rem; font:inherit; color:#0B2138; outline:none; transition:border-color .2s, box-shadow .2s; }
.art-search:focus{ border-color:#009999; box-shadow:0 0 0 4px rgba(0,153,153,.12); }
.art-search::placeholder{ color:rgba(11,33,56,.4); }
.art-search::-webkit-search-cancel-button{ cursor:pointer; }

/* ---- article image gallery slider ---- */
.art-slider{ outline:none; }
.as-stage{ position:relative; }
.as-viewport{ overflow:hidden; border-radius:1.5rem; background:#0B2138; box-shadow:0 40px 80px -40px rgba(3,13,24,.55); }
.as-track{ display:flex; will-change:transform; transition:transform .6s cubic-bezier(.16,1,.3,1); }
.as-slide{ flex:0 0 100%; min-width:100%; }
.as-slide img{ display:block; width:100%; height:clamp(300px,52vh,540px); object-fit:cover; }
.as-slide.as-broken{ height:clamp(300px,52vh,540px); background:linear-gradient(135deg,#0B2138,#12324f 60%,#009999 170%); }
.as-slide.as-broken img{ display:none; }
.as-nav{ position:absolute; top:50%; transform:translateY(-50%); width:2.9rem; height:2.9rem; border:0; border-radius:9999px;
  display:grid; place-items:center; cursor:pointer; color:#0B2138; background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  box-shadow:0 10px 24px -8px rgba(3,13,24,.5); transition:background .2s, transform .2s; }
.as-nav:hover{ background:#fff; transform:translateY(-50%) scale(1.07); }
.as-nav svg{ width:1.35rem; height:1.35rem; }
.as-prev{ inset-inline-start:1rem; }
.as-next{ inset-inline-end:1rem; }
.as-counter{ position:absolute; top:1rem; inset-inline-end:1rem; background:rgba(6,18,32,.55); backdrop-filter:blur(4px);
  color:#fff; font-size:.8rem; font-weight:700; padding:.3rem .8rem; border-radius:9999px; letter-spacing:.03em; }
.as-sep{ opacity:.6; margin:0 .15rem; }
.as-dots{ display:flex; justify-content:center; gap:.5rem; margin-top:1.1rem; }
.as-dot{ width:.55rem; height:.55rem; border-radius:9999px; border:0; padding:0; cursor:pointer; background:rgba(11,33,56,.22); transition:width .3s, background .3s; }
.as-dot.is-active{ width:1.7rem; background:#009999; }
.as-thumbs{ display:flex; gap:.6rem; margin-top:1rem; overflow-x:auto; padding-bottom:.35rem; scrollbar-width:thin; }
.as-thumb{ flex:0 0 auto; width:5.25rem; height:3.6rem; padding:0; border:2px solid transparent; border-radius:.7rem; overflow:hidden;
  cursor:pointer; opacity:.55; background:#0B2138; transition:opacity .2s, border-color .2s, transform .2s; }
.as-thumb:hover{ opacity:.85; transform:translateY(-2px); }
.as-thumb.is-active{ opacity:1; border-color:#009999; }
.as-thumb img{ width:100%; height:100%; object-fit:cover; }

/* ---- share buttons ---- */
.share-btn{ width:2.5rem; height:2.5rem; border:1px solid rgba(11,33,56,.12); border-radius:9999px; display:inline-grid; place-items:center;
  color:#0B2138; background:#fff; cursor:pointer; transition:color .2s, border-color .2s, transform .2s, background .2s; }
.share-btn:hover{ color:#009999; border-color:#009999; transform:translateY(-2px); }
.share-btn svg{ width:1.15rem; height:1.15rem; }
.share-copy.copied{ color:#fff; background:#009999; border-color:#009999; }

/* ---- accessibility: bump petrol text contrast on light backgrounds to AA
   (#009999 ≈ 3.9:1 → #007a78 ≈ 4.8:1). Only affects text, not bg-petrol accents. ---- */
.text-petrol{ color:#007a78; }

/* ---- rich-text (article/project bodies) — restores typographic spacing that
   Tailwind preflight strips, since @tailwindcss/typography isn't compiled in. ---- */
.prose{ color:inherit; }
.prose > :first-child{ margin-top:0; }
.prose > :last-child{ margin-bottom:0; }
.prose p{ margin:0 0 1.25em; }
.prose h2{ font-size:1.6em; font-weight:800; line-height:1.3; margin:1.8em 0 .7em; color:#0B2138; }
.prose h3{ font-size:1.3em; font-weight:800; line-height:1.35; margin:1.5em 0 .6em; color:#0B2138; }
.prose h4{ font-size:1.1em; font-weight:700; line-height:1.4; margin:1.3em 0 .5em; color:#0B2138; }
.prose ul, .prose ol{ margin:0 0 1.25em; padding-inline-start:1.6em; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li{ margin:.4em 0; }
.prose li::marker{ color:#007a78; }
.prose a{ color:#007a78; text-decoration:underline; text-underline-offset:2px; }
.prose a:hover{ color:#0B2138; }
.prose strong, .prose b{ font-weight:800; color:inherit; }
.prose blockquote{ margin:1.5em 0; padding-inline-start:1.1em; border-inline-start:3px solid #009999; color:#334155; font-style:normal; }
.prose img{ max-width:100%; height:auto; border-radius:1rem; margin:1.5em 0; }
.prose hr{ border:0; border-top:1px solid rgba(11,33,56,.12); margin:2em 0; }
.prose pre{ background:#0B2138; color:#e2e8f0; padding:1em 1.2em; border-radius:.8rem; overflow-x:auto; margin:1.5em 0; }
.prose code{ background:rgba(11,33,56,.06); padding:.15em .4em; border-radius:.35rem; font-size:.9em; }
.prose pre code{ background:none; padding:0; }

/* ===================== logo/certificate slider (brands + certificates) =====================
   Direction-agnostic: the track is laid out with logical margins and the JS shifts it with a
   sign taken from the document direction, so the same code drives RTL and LTR. */
.lg-slider{position:relative;display:flex;align-items:center;gap:.75rem}
.lg-viewport{overflow:hidden;flex:1 1 auto;padding:15px}
.lg-track{display:flex;transition:transform .55s cubic-bezier(.4,0,.2,1);will-change:transform}
.lg-slide{flex:0 0 var(--lg-slide,25%);padding-inline:.5rem;box-sizing:border-box}
.lg-nav{flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:999px;display:grid;place-items:center;
  background:#fff;color:#0B2138;box-shadow:0 8px 24px rgba(11,33,56,.12);border:1px solid rgba(11,33,56,.08);
  transition:background .25s,color .25s,opacity .25s}
.lg-nav:hover{background:#007A78;color:#fff}
.lg-nav:disabled{opacity:.35;cursor:default;background:#fff;color:#0B2138}
[dir=rtl] .lg-prev svg,[dir=rtl] .lg-next svg{transform:scaleX(-1)}

.brand-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  height:8.5rem;padding:1.25rem;border-radius:1.25rem;background:#fff;border:1px solid rgba(11,33,56,.07);
  box-shadow:0 10px 30px rgba(11,33,56,.05);transition:transform .3s,box-shadow .3s,border-color .3s;text-align:center}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,33,56,.10);border-color:rgba(0,122,120,.35)}
/* لوگوها همیشه رنگی می‌مانند؛ قبلاً grayscale(1) بودند و فقط با هاور رنگی می‌شدند */
.brand-card img{max-height:3.5rem;max-width:100%;object-fit:contain}
.brand-name{font-size:.8rem;font-weight:700;color:#0B2138;opacity:.65;line-height:1.5}
.brand-card.is-text .brand-name{font-size:.95rem;opacity:.9}

.cert-card{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%;
  padding:1rem 1rem 1.15rem;border-radius:1.25rem;background:#fff;border:1px solid rgba(11,33,56,.07);
  box-shadow:0 10px 30px rgba(11,33,56,.05);cursor:zoom-in;transition:transform .3s,box-shadow .3s}
.cert-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(11,33,56,.12)}
.cert-card img{width:100%;height:13rem;object-fit:cover;border-radius:.85rem;background:#f1f5f9}
.cert-ph{width:100%;height:13rem;border-radius:.85rem;display:grid;place-items:center;color:#007A78;background:#e6f4f3}
.cert-title{font-size:.85rem;font-weight:700;color:#0B2138;line-height:1.6;text-align:center}

/* lightbox */
.cert-lb{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;padding:1.5rem;
  background:rgba(3,13,24,.9);backdrop-filter:blur(4px)}
.cert-lb.is-open{display:flex}
.cert-lb figure{margin:0;max-width:min(92vw,900px);max-height:90vh;display:flex;flex-direction:column;gap:1rem;align-items:center}
.cert-lb img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:1rem;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.cert-lb figcaption{color:#fff;font-weight:700;text-align:center}
.cert-lb-close{position:absolute;top:1.25rem;inset-inline-end:1.25rem;width:2.75rem;height:2.75rem;border-radius:999px;
  display:grid;place-items:center;background:rgba(255,255,255,.12);color:#fff;transition:background .25s}
.cert-lb-close:hover{background:rgba(255,255,255,.25)}

/* ===================== board of directors + org chart ===================== */
.board-card{width:15rem;padding:1.75rem 1.25rem;border-radius:1.5rem;background:#fff;text-align:center;
  border:1px solid rgba(11,33,56,.07);box-shadow:0 10px 30px rgba(11,33,56,.06);transition:transform .3s,box-shadow .3s}
.board-card:hover{transform:translateY(-5px);box-shadow:0 18px 45px rgba(11,33,56,.12)}
.board-photo{width:7rem;height:7rem;border-radius:999px;object-fit:cover;margin-inline:auto;display:block;
  border:3px solid #e6f4f3;background:#e6f4f3}
.board-photo-ph{display:grid;place-items:center;color:#007A78}
.org-chart{display:inline-block;max-width:100%;padding:.75rem;border-radius:1.25rem;background:#fff;cursor:zoom-in;
  border:1px solid rgba(11,33,56,.07);box-shadow:0 12px 36px rgba(11,33,56,.08);transition:transform .3s,box-shadow .3s}
.org-chart:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(11,33,56,.14)}
.org-chart img{max-width:100%;max-height:32rem;object-fit:contain;border-radius:.85rem;display:block}


/* ===================== low-power / touch: drop the parallax machinery =====================
   Below this width the pointer is usually coarse (no tilt to see anyway) and the GPU
   budget is much smaller, so the hero renders as a flat, still image. */
@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
  #heroStage{ transform:none !important; will-change:auto; }
  .blob{ animation:none; }          /* still used by the services / projects / contact sections */
  .light-shaft{ display:none; }
}

/* ===================== contact details cards ===================== */
.ci-card{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem;border-radius:1.25rem;background:#fff;
  border:1px solid rgba(11,33,56,.07);box-shadow:0 10px 30px rgba(11,33,56,.05)}
.ci-link{transition:transform .3s,box-shadow .3s,border-color .3s}
.ci-link:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(11,33,56,.10);border-color:rgba(0,122,120,.3)}
.ci-icon{flex:0 0 auto;width:3rem;height:3rem;border-radius:.85rem;display:grid;place-items:center;
  background:#e6f4f3;color:#007A78;transition:background .3s,color .3s}
.ci-link:hover .ci-icon{background:#007A78;color:#fff}
.ci-body{display:flex;flex-direction:column;min-width:0}
.ci-label{font-size:.75rem;color:rgba(11,33,56,.45);margin-bottom:.35rem}
.ci-value{font-weight:700;color:#0B2138;line-height:1.9;word-break:break-word}

/* ===================== about page slider ===================== */
.about-slide{margin:0;border-radius:1.5rem;overflow:hidden;background:#e6f4f3;box-shadow:0 16px 44px rgba(11,33,56,.10)}
.about-slide img{display:block;width:100%;height:clamp(16rem,42vw,28rem);object-fit:cover}
.about-slide figcaption{padding:.9rem 1.25rem;font-size:.9rem;font-weight:700;color:#0B2138;background:#fff;text-align:center}
.about-body{color:rgba(11,33,56,.72);line-height:2.15;font-size:1.075rem}
.about-body p{margin-bottom:1.15rem}
.about-body h2,.about-body h3{color:#0B2138;font-weight:800;margin:1.75rem 0 .85rem}
.about-body h2{font-size:1.5rem}
.about-body h3{font-size:1.2rem}
.about-body ul,.about-body ol{margin:0 0 1.15rem;padding-inline-start:1.35rem;list-style:disc}
.about-body ol{list-style:decimal}
.about-body li{margin-bottom:.5rem}
.about-body a{color:#007A78;font-weight:700}