/* ==========================================================================
   HOODEL homepage prototype (index2) — Design System v2, isolated, noindex.
   Loaded ONLY on /fa/index2.php. All rules here are scoped to this one page
   by virtue of that inclusion — nothing in this file is shipped to /fa/.

   This stylesheet intentionally also refines proportions of the SHARED
   header/footer/button primitives (defined in the protected hoodel-core.css)
   via higher cascade order, without editing those frozen files. Every such
   override is called out in its section comment below.

   Sections:
   1. Tokens (color, type scale, spacing, radius, container)
   2. Base / reset for this page
   3. Header + footer proportion refinements (cascade-only, files untouched)
   4. Theme toggle
   5. Hero
   6. Trust strip
   7. Capabilities
   8. Industries
   9. Transformation / approach
   10. Impact (Connected Earth)
   11. Closing CTA
   12. Motion
   13. Responsive (supplementary breakpoints beyond what's inline above)
   14. Accessibility
   ========================================================================== */

/* ---------- 0. First-paint fonts ----------
   The hero heading face is preloaded (index2.php). If it is still in flight at the very
   first frame, block (invisible, <=3s) instead of swap so a fallback face is never painted
   and then replaced (that swap changes glyph metrics = visible re-layout). Same family and
   weights as fa.css / hoodel-core.css; this page's copy is declared last so it wins. */
@font-face{font-family:"IBMPlexArabic";src:url("/assets/fonts/ibm-plex-arabic-600.woff2") format("woff2");font-style:normal;font-weight:600;font-display:block}
@font-face{font-family:"IBMPlexArabic";src:url("/assets/fonts/ibm-plex-arabic-700.woff2") format("woff2");font-style:normal;font-weight:700;font-display:block}

/* ---------- 1. Tokens ---------- */
/* Container/gutter live on :root, not .hoodel-home2: .wrap is shared by
   Header and Footer too, and both sit OUTSIDE <main class="hoodel-home2">
   (siblings in the DOM, included before/after it) -- so a custom property
   declared only on .hoodel-home2 never resolves for their .wrap, silently
   invalidating the whole `width` declaration there and falling back to
   hoodel-core.css's own narrower default. That mismatch is the root cause
   of Header/Footer using different horizontal geometry than every section
   inside main. :root is safe here (not leaking into other pages) because
   this stylesheet itself is only ever loaded on this one page. */
/* :root container/gutter/spacing/header-height tokens moved to
   hoodel-header.css (2026-10-02 shared-header migration): the shared
   header needs them on every page, and that file loads on this page too. */
.hoodel-home2{
  --page-bg:#f5f8fc;
  --surface:#ffffff;
  --surface-subtle:#edf3f9;
  --text-primary:#0b1d36;
  --text-secondary:#52627a;
  --text-tertiary:#5c6c85;
  --border:rgba(21,55,92,.14);
  --border-strong:rgba(21,55,92,.24);
  --brand-blue:#1264d7;
  --brand-cyan:#0d9fb2;
  --brand-cyan-text:#057184;
  --brand-violet:#6b5bd7;
  --brand-purple:#873dbb;
  --focus:#08a6bd;

  --h2-dark-bg:#050d1a;
  --h2-dark-surface:#0b1930;
  --h2-dark-border:rgba(148,178,214,.16);
  --h2-dark-text:#f2f6fb;
  --h2-dark-muted:#a7b8d1;

  /* type scale */
  --fs-h1:clamp(2.35rem,3.5vw,3.75rem);
  --fs-h2:clamp(2.25rem,3.2vw,2.875rem);
  --fs-h2-impact:clamp(2.4rem,3.8vw,3.25rem);
  --fs-eyebrow:clamp(.8125rem,.9vw,.9375rem);
  --fs-intro:clamp(1.0625rem,1.1vw,1.25rem);
  --fs-body:clamp(.9375rem,1vw,1.125rem);
  --fs-card-title:clamp(1.25rem,1.4vw,1.5rem);
  --fs-card-body:clamp(1rem,1vw,1.125rem);
  --fs-industry-name:clamp(1.125rem,1.2vw,1.375rem);
  --fs-nav:14px;

  --lh-heading:1.22;
  --lh-body:1.8;

  --fw-regular:400;
  --fw-medium:500;
  --fw-semibold:600;
  --fw-bold:700;

  /* Persian display face for Hero H1 / H2 only (already self-hosted and
     loaded site-wide as "IBMPlexArabic" -- no new font added). H3/body/UI
     stay on Vazirmatn. Falls back to Vazirmatn/Tahoma, never to the
     Latin-only Space Grotesk stack the shared core stylesheet uses for
     generic h1/h2/h3, which has no Persian glyph coverage and forces an
     uncontrolled system-font fallback for Persian headings. */
  --ff-display:"IBMPlexArabic","Vazirmatn",Tahoma,Arial,sans-serif;
  --ff-text:"Vazirmatn",Tahoma,Arial,sans-serif;

  /* radius scale */
  --radius-sm:10px;
  --radius-btn:10px;
  --radius-md:14px;
  --radius-lg:20px;

  color-scheme:light;
  background:var(--page-bg);
  color:var(--text-primary);
  overflow-x:hidden;
  /* clip (not hidden) so position:sticky descendants (Delivery model) can pin: hidden turns this box into a scroll container. Same visual clipping. */
  overflow-x:clip;
}

:root[data-theme="dark"] .hoodel-home2{
  --page-bg:#071321;
  --surface:#0c1c2f;
  --surface-subtle:#10243a;
  --text-primary:#f1f6fb;
  --text-secondary:#aab9cb;
  --text-tertiary:#7e8ea6;
  --border:rgba(149,180,214,.18);
  --border-strong:rgba(149,180,214,.28);
  --brand-blue:#5b9cff;
  --brand-cyan:#43c6d2;
  --brand-cyan-text:#43c6d2;
  --brand-violet:#9b8df0;
  --brand-purple:#c17be5;
  --focus:#52d5df;
  color-scheme:dark;
}

/* ---------- 2. Base ---------- */
.hoodel-home2 *{box-sizing:border-box}
.hoodel-home2 img{display:block;max-width:100%;height:auto}
/* Focus-visible ring is now a global, site-wide rule in hoodel-core.css
   (audit fix — it used to only cover .hoodel-home2, leaving header/footer
   keyboard focus visually inconsistent). Nothing page-specific needed here. */
.hoodel-home2{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-regular)}
.hoodel-home2 section{padding-block:var(--sp-10)}

.h2-eyebrow{
  display:inline-block;
  margin:0 0 var(--sp-4);
  font-size:var(--fs-eyebrow);
  font-weight:var(--fw-bold);
  letter-spacing:.08em;
  color:var(--brand-cyan-text);
}

.hoodel-home2 h2{
  margin:0 0 var(--sp-4);
  max-width:640px;
  font-family:var(--ff-display);
  font-size:var(--fs-h2);
  line-height:var(--lh-heading);
  font-weight:var(--fw-semibold);
  color:var(--text-primary);
}

.h2-sub{
  max-width:56ch;
  margin:0 0 var(--sp-8);
  font-size:var(--fs-intro);
  line-height:var(--lh-body);
  color:var(--text-secondary);
  font-weight:var(--fw-regular);
}

.h2-more{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:14px;
  font-weight:var(--fw-medium);
  color:var(--brand-blue);
}
.h2-more:hover,.h2-more:focus-visible{color:var(--brand-cyan-text)}
.h2-arrow{display:inline-flex;width:16px;height:16px;flex:0 0 auto}
.h2-arrow svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 3. Header + footer proportion refinements ----------
   header.php and footer.php are frozen and untouched. These rules only
   raise cascade order (this file loads after hoodel-core.css) to adjust
   proportions on THIS page. Structure/markup is unchanged. */

/* ---------- Sticky Header root-cause fix ----------
   header{position:sticky;top:0} (hoodel-core.css) never actually stuck:
   the shared `html,body{overflow-x:hidden}` "responsive overflow fix"
   (also hoodel-core.css) sets only the x-axis to non-visible, which per
   the CSS spec forces the y-axis to compute to `auto` on the box that
   didn't ask for it -- turning `body` into an unintended scroll container
   and breaking the containing-block chain position:sticky needs to work
   against the viewport. Confirmed directly: the Header's own
   getBoundingClientRect() moved off-screen with scroll instead of
   staying pinned. Overriding it back to visible here is safe on THIS
   page specifically because its actual horizontal-overflow safety net
   is `.hoodel-home2{overflow-x:hidden}`, already in place and verified
   (scrollWidth === clientWidth) at every required breakpoint. */
html,body.hoodel-home2-page{overflow-x:visible}
.btn{
  min-height:44px;
  padding:0 var(--sp-5);
  border-radius:11px;
  font-size:14px;
  font-weight:500;
  transition:min-height .22s ease,padding .22s ease;
}
/* one shared container/gutter system — also governs the header's own .wrap,
   so header, hero, and every section align on identical edges */
.wrap{width:min(var(--container-max),calc(100% - 2 * var(--gutter)))}


/* footer breathing room -- padding-block on both ends so the section never
   feels glued to the CTA above it or the physical bottom edge;
   group/heading spacing widened so columns read as distinct clusters
   rather than a dense block. */
footer.hoodel-footer{padding-block:var(--sp-11) 0}
.footer-grid{gap:var(--sp-10);padding-bottom:var(--sp-9)}
.footer-brand p{margin:var(--sp-4) 0 var(--sp-6);line-height:1.85}
.footer-column h3,.footer-location h3{margin-bottom:var(--sp-6)}
.footer-column a,.footer-column .footer-label{margin-bottom:16px;line-height:1.65}
.footer-bottom{min-height:64px;padding-block:var(--sp-6)}
@media(max-width:560px){
  footer.hoodel-footer{padding-top:var(--sp-9)}
  .footer-grid{gap:var(--sp-8);padding-bottom:var(--sp-7)}
  .footer-column h3,.footer-location h3{margin-bottom:var(--sp-4)}
}

:root[data-theme="dark"] body.hoodel-home2-page{background:#071321}


/* ---------- 4c. Consultation CTA — premium glass control ----------
   One control, three physical positions (Hero in-flow / floating-fixed
   mid-scroll / final-section in-flow), never a flat solid-blue .btn.
   Surface (dark vs light glass) is chosen per instance: the Hero and
   Final CTAs sit on permanently-dark surfaces (photo+scrim, and the
   closing section which is deliberately dark in both themes) so their
   data-cta-surface is a fixed "dark" in the markup; only the floating
   instance crosses varying backgrounds and has its surface attribute
   kept in sync with whatever section is currently behind it
   (hoodel-home2.js). Logo colors are used only as a restrained 1px
   gradient edge -- never a filled gradient background or glow. */
.h2-cta-glass{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:0 22px;
  min-height:50px;
  border-radius:999px;
  font-family:var(--ff-text);
  font-size:14.5px;
  font-weight:var(--fw-semibold);
  letter-spacing:0;
  text-decoration:none;
  isolation:isolate;
  backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35);
  transition:transform .22s cubic-bezier(.4,0,.2,1),box-shadow .24s ease,
             border-color .22s ease,background .22s ease,color .22s ease;
}
.h2-cta-glass__icon{display:grid;place-items:center;width:19px;height:19px;flex:0 0 auto}
.h2-cta-glass__icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.h2-cta-glass__label{white-space:nowrap}
/* Restrained logo-accent edge: a 1px gradient ring, not a filled glow --
   masked to a ring via the padding-box/border-box trick so only the
   outline itself carries color. */
.h2-cta-glass::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(120deg,var(--brand-blue) 0%,var(--brand-cyan) 38%,var(--brand-violet) 70%,var(--brand-purple) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.4;
  pointer-events:none;
  transition:opacity .24s ease;
}
.h2-cta-glass:hover{transform:translateY(-1px)}
.h2-cta-glass:hover::before,
.h2-cta-glass:focus-visible::before{opacity:.85}
.h2-cta-glass:active{transform:translateY(0)}

/* Dark-glass variant: over the Hero photo, the Impact photo, and the
   permanently-dark closing section. */
.h2-cta-glass[data-cta-surface="dark"]{
  background:rgba(9,17,31,.46);
  border:1px solid rgba(255,255,255,.16);
  color:#f4f8fc;
  box-shadow:0 10px 28px rgba(3,8,18,.38),inset 0 1px 0 rgba(255,255,255,.07);
}
.h2-cta-glass[data-cta-surface="dark"]:hover{
  background:rgba(14,24,42,.58);
  border-color:rgba(255,255,255,.26);
  box-shadow:0 14px 36px rgba(3,8,18,.46),inset 0 1px 0 rgba(255,255,255,.1);
}

/* Light-glass variant: the floating CTA only, while it crosses this
   page's light-themed sections. */
.h2-cta-glass[data-cta-surface="light"]{
  background:rgba(255,255,255,.66);
  border:1px solid rgba(21,55,92,.16);
  color:#0b1d36;
  box-shadow:0 10px 24px rgba(15,25,45,.12),inset 0 1px 0 rgba(255,255,255,.55);
}
.h2-cta-glass[data-cta-surface="light"]:hover{
  background:rgba(255,255,255,.82);
  border-color:rgba(21,55,92,.26);
  box-shadow:0 14px 32px rgba(15,25,45,.16),inset 0 1px 0 rgba(255,255,255,.65);
}

/* Floating state: fixed, physical LEFT regardless of RTL (explicit
   requirement -- logical inset-inline-start would flip with dir="rtl"
   and is deliberately not used here), positioned with real breathing
   room below the Header rather than attached to it. Hidden by default
   (Hero/Final in-flow CTAs handle those states); shown only while
   body[data-h2-cta="floating"]. */
#h2FloatCta{
  position:fixed;
  top:calc(var(--h2-header-h) + 38px);
  left:var(--gutter);
  z-index:70;
  opacity:0;
  transform:translateY(-10px) scale(.96);
  pointer-events:none;
  transition:opacity .32s ease,transform .38s cubic-bezier(.22,1,.36,1),top .22s ease;
}
body[data-h2-cta="floating"] #h2FloatCta{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
/* Closes the mobile off-canvas panel from also showing the floating CTA
   underneath it; harmless no-op in browsers without :has() support (the
   panel already fully covers this area visually in that case). */
body:has(.navlinks.mobile-open) #h2FloatCta{opacity:0;pointer-events:none}

@media(max-width:960px){
  #h2FloatCta{left:var(--gutter)}
}
@media(max-width:560px){
  .h2-cta-glass{min-height:44px;padding:0 17px;font-size:13.5px;gap:7px}
  .h2-cta-glass__icon{width:17px;height:17px}
}

@media(prefers-reduced-motion:reduce){
  .h2-cta-glass,.h2-cta-glass::before,#h2FloatCta{transition:opacity .12s linear !important;transform:none !important}
  .h2-cta-glass:hover{transform:none}
}

/* ---------- 5. Hero ---------- */
.hoodel-home2 .h2-hero{
  position:relative;
  overflow:hidden;
  min-height:82vh;
  padding:0;
  display:flex;
  align-items:center;
  color:var(--h2-dark-text);
  background:var(--h2-dark-bg);
}
.h2-hero-media{position:absolute;inset:0;z-index:0}
.h2-hero-media picture,
.h2-hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:42% 48%;
}
/* Day/night crossfade: both pictures share the exact geometry rule above
   (same position/size/object-fit/crop), so only opacity differs -- no
   layout shift is possible between them. Default (no [data-theme], or
   [data-theme="dark"]) shows night; [data-theme="light"] shows day. The
   theme is set synchronously pre-paint (see the inline <head> script),
   so the correct picture is already the visible one on first paint --
   this transition only ever plays on a live toggle click, never on load. */
.h2-hero-pic{opacity:0;transition:opacity .6s ease}
/* LTR: mirror the photographic hero image ONLY (not the scrim, the
   decorative line-art SVG, or the text/CTAs, which are separate
   siblings/layers) so the visual mass (buildings) sits opposite the
   text column, matching the RTL composition. One base asset, no
   duplicate files -- pure CSS mirror around the image's own centre,
   inset/size/crop all untouched since transform runs after layout. */
html[dir="ltr"] .h2-hero-pic{transform:scaleX(-1)}
.h2-hero-pic--night{opacity:1}
:root[data-theme="light"] .h2-hero-pic--night{opacity:0}
:root[data-theme="light"] .h2-hero-pic--day{opacity:1}
.h2-hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to left,rgba(4,9,19,.86) 0%,rgba(4,9,19,.48) 34%,rgba(4,9,19,.1) 64%,transparent 84%),
    linear-gradient(to top,rgba(2,6,14,.4) 0%,transparent 32%);
  transition:opacity .6s ease;
}
/* Daytime image is already bright and legible on its own -- the night
   scrim's strength would needlessly dim it. A lighter, more localized
   navy gradient keeps just enough contrast behind the headline/CTAs
   while leaving the sky/water/skyline clearly a daytime shot. */
:root[data-theme="light"] .h2-hero-scrim{
  background:
    linear-gradient(to left,rgba(8,18,32,.48) 0%,rgba(8,18,32,.2) 28%,rgba(8,18,32,.03) 50%,transparent 68%),
    linear-gradient(to top,rgba(8,18,32,.13) 0%,transparent 26%);
}
.h2-hero-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:.18;
  pointer-events:none;
}
.h2-path-fg{stroke:url(#h2spectrum);stroke-width:1.5;fill:none;opacity:.85}
.h2-path-mid{stroke:url(#h2spectrum);stroke-width:1.1;fill:none;opacity:.4}
.h2-path-bg{stroke:url(#h2spectrum);stroke-width:1;fill:none;opacity:.18}
.h2-node{fill:#bdeaf4}
.h2-node.is-accent{fill:#c17be5}

.h2-hero .wrap{position:relative;z-index:2}
.h2-hero-copy{max-width:640px}
.h2-hero .h2-eyebrow{color:#5fd6e6;margin-bottom:var(--sp-5)}
/* The light cyan reads fine against the dark night photo but nearly
   disappears against bright cloud/sky texture behind it on the day
   photo -- a deep navy keeps the same brand-accent character while
   actually being legible there. */
:root[data-theme="light"] .h2-hero .h2-eyebrow{color:#0a3a52}
.h2-hero h1{
  margin:0 0 var(--sp-6);
  font-family:var(--ff-display);
  font-size:var(--fs-h1);
  line-height:1.2;
  font-weight:var(--fw-bold);
  letter-spacing:-.01em;
  color:#fff;
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.h2-hero-lead{
  max-width:52ch;
  margin:0 0 var(--sp-9);
  font-size:var(--fs-intro);
  line-height:1.85;
  color:var(--h2-dark-muted);
}
/* The muted blue-gray reads fine over the dark night photo, but loses
   contrast in places over the bright day photo even behind the scrim --
   a brighter near-white keeps it legible without darkening the image
   further. */
:root[data-theme="light"] .h2-hero-lead{color:rgba(255,255,255,.92)}
.h2-hero-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.h2-hero .btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.h2-hero .btn.secondary:hover{border-color:#5fd6e6;color:#5fd6e6}
/* The day image is bright enough that a fully transparent secondary CTA
   risks disappearing over detailed sky/water texture. A faint glass
   tint (not an opaque box) restores separation without dimming the
   photo underneath it. */
:root[data-theme="light"] .h2-hero .btn.secondary{
  background:rgba(8,18,32,.22);
  border-color:rgba(255,255,255,.55);
}

@media(max-width:900px){
  .h2-hero-media img{object-position:50% 44%}
}
@media(max-width:720px){
  .hoodel-home2 .h2-hero{min-height:74vh}
  .h2-hero-scrim{
    background:
      linear-gradient(to top,rgba(4,9,19,.92) 0%,rgba(4,9,19,.5) 44%,rgba(4,9,19,.16) 68%,transparent 100%);
  }
  .h2-hero-copy{max-width:none}
}
@media(max-width:560px){
  .hoodel-home2 .h2-hero{min-height:min(680px,92vh)}
  .h2-hero-media img{object-position:40% 40%}
}

/* ---------- 6. Trust strip / "تخصص هودل در یک نگاه" ---------- */
/* Hero -> this fold: a clean, confident cut. Continuity comes from
   spacing and section rhythm (padding-block below, shared container
   geometry), not a fade strip painted over the seam.

   Deliberately NOT four boxed KPI cards: an editorial four-part grid
   using the four approved HOODEL brand images (production assets, not
   generated artwork) as the primary visual element of each item.
   min-height gives the fold real independent vertical presence (task:
   "occupy most of the available viewport when reached") without forcing
   a blind 100vh -- centered content plus responsive padding produces the
   top/bottom breathing room instead. */
.h2-trust{
  position:relative;
  min-height:min(92vh,860px);
  display:flex;
  align-items:center;
  padding-block:clamp(64px,10vh,120px);
  border-bottom:1px solid var(--border);
  background:var(--surface);
  --h2-grid-line:rgba(59,123,255,.1);
  --h2-grid-line-strong:rgba(59,123,255,.32);
}
:root[data-theme="dark"] .h2-trust{
  --h2-grid-line:rgba(34,199,217,.1);
  --h2-grid-line-strong:rgba(34,199,217,.4);
}
/* Section-level technology-grid background (Interactive Grid Pattern
   inspired) -- ONE layer behind the whole fold, never a per-card
   background, kept almost imperceptible at rest. Two pseudo-elements: a
   flat, always-faint grid (::before) and a second copy (::after) masked
   to a soft radius around the pointer that only becomes visible once
   hoodel-home2.js starts reporting real coordinates (desktop, hover-
   capable pointers only -- see the JS comment for why touch never
   attaches this listener; the mask defaults far off-screen so no glow
   is possible without it). */
.h2-trust::before,
.h2-trust::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--h2-grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--h2-grid-line) 1px,transparent 1px);
  background-size:46px 46px;
  background-position:center;
}
.h2-trust::before{opacity:.55}
.h2-trust::after{
  background-image:
    linear-gradient(var(--h2-grid-line-strong) 1px,transparent 1px),
    linear-gradient(90deg,var(--h2-grid-line-strong) 1px,transparent 1px);
  background-size:46px 46px;
  background-position:center;
  -webkit-mask-image:radial-gradient(220px circle at var(--h2-mx,50%) var(--h2-my,-9999px),#000,transparent 72%);
  mask-image:radial-gradient(220px circle at var(--h2-mx,50%) var(--h2-my,-9999px),#000,transparent 72%);
  opacity:.85;
}
.h2-trust > .wrap{position:relative;z-index:1}
.h2-trust .h2-eyebrow{display:block;text-align:center}
.h2-trust h2{
  margin-inline:auto;
  margin-bottom:clamp(var(--sp-8),6vh,var(--sp-11));
  text-align:center;
  max-width:none;
  font-size:clamp(1.3rem,1.8vw,1.6rem);
}

.h2-glance-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-8) var(--sp-6);
  align-items:start;
}
.h2-glance-item{
  text-align:center;
}

/* One consistent "image area" frame for all four items regardless of the
   source images' own differing compositions/aspect ratios (4:3 for
   three of them, 3:2 for the regional map) -- object-fit:contain never
   crops, and the shared frame (soft tint, thin border, rounded corners)
   is what keeps all four feeling like one balanced set instead of four
   oddly-shaped pictures dropped directly onto the page. Not a boxed
   SaaS card: no shadow/elevation at rest, and the text below sits
   outside the frame entirely. */
.h2-glance-visual{
  position:relative;
  overflow:hidden;
  width:100%;
  max-width:300px;
  aspect-ratio:4/3;
  margin:0 auto var(--sp-5);
  padding:var(--sp-4);
  box-sizing:border-box;
  border-radius:18px;
  background:var(--surface-subtle);
  border:1px solid var(--border);
  transition:border-color .22s ease;
}
/* Micro Border-Beam: a thin traveling edge-light around the IMAGE AREA
   only, on hover/focus -- never a permanent border, never around the
   text below. Registering the angle as an animatable custom property is
   what lets the conic-gradient actually rotate; browsers without
   @property support simply see a static soft ring on hover instead of a
   spin, which is an acceptable, restrained fallback rather than a
   missing feature. */
@property --h2-beam-angle{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}
.h2-glance-visual::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:conic-gradient(from var(--h2-beam-angle),transparent 0turn,var(--h2-glance-accent,var(--brand-cyan)) .05turn,transparent .16turn);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease;
}
@media(hover:hover){
  .h2-glance-item:hover .h2-glance-visual::before{
    opacity:.85;
    animation:h2BorderBeamSpin 2.8s linear infinite;
  }
}
.h2-glance-item:focus-within .h2-glance-visual::before{
  opacity:.85;
  animation:h2BorderBeamSpin 2.8s linear infinite;
}
@keyframes h2BorderBeamSpin{to{--h2-beam-angle:360deg}}

.h2-glance-visual picture{display:block;width:100%;height:100%}
.h2-glance-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
/* Regional Presence: bespoke light-card SVG replacing the too-dark raster
   asset -- fixed bright background baked into the SVG itself (not
   theme-dependent) so it reads clean and professional in both Light and
   Dark without needing separate per-theme treatment. */
.h2-glance-art{
  width:100%;
  height:100%;
  display:block;
  border-radius:12px;
}

/* Per-item accent: the frame border only, on hover/focus (see below) --
   restrained, never a fill/glow, and only ever ONE of the four accents
   per item. */
.h2-glance-item h3{
  margin:0 0 var(--sp-2);
  font-family:var(--ff-text);
  font-size:1.1rem;
  font-weight:var(--fw-bold);
  color:var(--text-primary);
  letter-spacing:-.01em;
}
.h2-glance-item p{
  margin:0;
  font-size:var(--fs-card-body);
  line-height:1.75;
  color:var(--text-secondary);
}

/* Hover/focus: subtly activates the image frame with its own accent
   border -- no card lift, no scale, no glow. */
@media(hover:hover){
  .h2-glance-item:hover .h2-glance-visual{border-color:var(--h2-glance-accent,var(--border-strong))}
}
.h2-glance-item:focus-within .h2-glance-visual{border-color:var(--h2-glance-accent,var(--border-strong))}
.h2-glance-item[data-accent="cyan"]{--h2-glance-accent:var(--brand-cyan)}
.h2-glance-item[data-accent="blue"]{--h2-glance-accent:var(--brand-blue)}
.h2-glance-item[data-accent="violet"]{--h2-glance-accent:var(--brand-violet)}
.h2-glance-item[data-accent="magenta"]{--h2-glance-accent:var(--brand-purple)}

/* Dark theme: the frame follows the page's own dark surface/border
   tokens automatically (no separate rule needed); only a very restrained
   lift so the frame still reads as a distinct area against the deep
   navy background. */
:root[data-theme="dark"] .h2-glance-visual{background:var(--surface)}

/* ---------- 6b. Signal motion layer (Magic-UI-inspired, vanilla) ----------
   A transparent SVG/CSS overlay ABOVE each approved image -- the artwork
   itself is never redrawn or recolored. Every animation is defined with
   animation-play-state:paused by default and only set to running while
   .h2-trust carries .h2-signals-active (a dedicated, non-one-shot
   IntersectionObserver in hoodel-home2.js, separate from the existing
   one-time .reveal-item fade), so motion genuinely stops -- not just
   invisible -- once the fold is well outside the viewport. Delays are
   deliberately long enough (.8s+) that the signal layer only starts
   after the existing reveal fade has already settled. */
.h2-glance-signal{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.6;
  transition:opacity .25s ease;
}
:root[data-theme="dark"] .h2-glance-signal{opacity:.72}
.h2-glance-item:hover .h2-glance-signal,
.h2-glance-item:focus-within .h2-glance-signal{opacity:.92}

.h2-signal-beam{
  fill:none;
  stroke-width:1.4;
  stroke-linecap:round;
  stroke-dasharray:5 46;
  stroke-dashoffset:0;
  opacity:.85;
  animation:h2BeamTravel 4.8s linear infinite;
  animation-play-state:paused;
  animation-delay:calc(var(--reveal-delay,0ms) + .9s + var(--h2-beam-delay,0s));
}
.h2-glance-item:hover .h2-signal-beam,
.h2-glance-item:focus-within .h2-signal-beam{stroke-width:1.9}
@keyframes h2BeamTravel{
  0%{stroke-dashoffset:0}
  100%{stroke-dashoffset:-102}
}

.h2-signal-hub{
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  color:var(--h2-glance-accent,var(--brand-cyan));
  transform-origin:center;
  transform-box:fill-box;
  opacity:.55;
  animation:h2HubPulse 3.2s ease-in-out infinite;
  animation-play-state:paused;
  animation-delay:calc(var(--reveal-delay,0ms) + .7s);
}
@keyframes h2HubPulse{
  0%,100%{opacity:.4;transform:scale(1)}
  50%{opacity:.85;transform:scale(1.12)}
}

/* Intelligent Ripple -- a second, LARGER, much rarer ring distinct from
   the small hub-pulse above: "integration/core node" for ICT (repeats,
   but most of its 9s cycle is spent invisible, so it reads as occasional
   rather than a loop) and "one signal before the beams" for the
   Regional hub (single play, no repeat -- see --once below). Overlay
   only; the ICT/Regional artwork itself is never touched. */
.h2-signal-ripple{
  fill:none;
  stroke:currentColor;
  color:var(--h2-glance-accent,var(--brand-cyan));
  stroke-width:1.1;
  opacity:0;
  transform-origin:center;
  transform-box:fill-box;
  animation:h2Ripple 9s ease-out infinite;
  animation-play-state:paused;
  animation-delay:calc(var(--reveal-delay,0ms) + 1.3s);
}
.h2-signal-ripple--once{
  animation-name:h2RippleOnce;
  animation-duration:1.5s;
  animation-iteration-count:1;
  animation-delay:calc(var(--reveal-delay,0ms) + .5s);
}
@keyframes h2Ripple{
  0%{opacity:.4;transform:scale(1)}
  22%{opacity:0;transform:scale(2.6)}
  100%{opacity:0;transform:scale(2.6)}
}
@keyframes h2RippleOnce{
  0%{opacity:.5;transform:scale(1)}
  100%{opacity:0;transform:scale(2.2)}
}
@media(max-width:900px){
  /* Mobile stays calmer: the ripple's peak opacity is reduced rather
     than removed, keeping the image/text dominant per the task's own
     mobile requirement. */
  .h2-signal-ripple{opacity:0}
  @keyframes h2Ripple{
    0%{opacity:.24;transform:scale(1)}
    22%{opacity:0;transform:scale(2.2)}
    100%{opacity:0;transform:scale(2.2)}
  }
  @keyframes h2RippleOnce{
    0%{opacity:.3;transform:scale(1)}
    100%{opacity:0;transform:scale(1.9)}
  }
}

/* Delivery chain: one continuous progression beam (not radial spokes) --
   a static faint track plus a moving highlighted segment reading the
   same left-to-right direction the artwork itself already draws its
   four stages in. */
.h2-signal-track{fill:none;stroke:var(--border-strong);stroke-width:1.2;opacity:.5}
.h2-signal-beam--progress{
  stroke-width:2.2;
  stroke-dasharray:70 500;
  stroke-dashoffset:70;
  opacity:.95;
  animation:h2ChainProgress 4.6s cubic-bezier(.45,0,.3,1) infinite;
  animation-play-state:paused;
  animation-delay:calc(var(--reveal-delay,0ms) + .9s);
}
@keyframes h2ChainProgress{
  0%{stroke-dashoffset:70}
  55%{stroke-dashoffset:-360}
  100%{stroke-dashoffset:-360}
}
.h2-signal-nodes circle{
  fill:var(--surface);
  stroke:var(--h2-glance-accent,var(--brand-violet));
  stroke-width:1.6;
  opacity:.5;
  animation:h2NodeWake 4.6s ease-in-out infinite;
  animation-play-state:paused;
  animation-delay:calc(var(--reveal-delay,0ms) + .9s + var(--h2-beam-delay,0s));
}
@keyframes h2NodeWake{
  0%,12%{opacity:.5;stroke-width:1.6}
  20%,40%{opacity:1;stroke-width:2.4}
  60%,100%{opacity:.5;stroke-width:1.6}
}

.h2-trust.h2-signals-active .h2-signal-beam,
.h2-trust.h2-signals-active .h2-signal-hub,
.h2-trust.h2-signals-active .h2-signal-ripple,
.h2-trust.h2-signals-active .h2-signal-beam--progress,
.h2-trust.h2-signals-active .h2-signal-nodes circle{animation-play-state:running}

/* Tehran office: a single restrained light sweep (Shine-style), not a
   node/beam system -- the campus image has no natural "network" points.
   Plays once when the fold's signal layer activates, and again on
   hover/focus; never a permanent border. */
.h2-glance-item[data-accent="magenta"] .h2-glance-visual::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(75deg,transparent 42%,rgba(139,123,240,.22) 50%,rgba(193,91,224,.2) 56%,transparent 66%);
  transform:translateX(-130%);
  pointer-events:none;
}
.h2-trust.h2-signals-active .h2-glance-item[data-accent="magenta"] .h2-glance-visual::after{
  animation:h2ShineSweep 1.5s ease-out calc(var(--reveal-delay,0ms) + .9s) 1 both;
}
.h2-glance-item[data-accent="magenta"]:hover .h2-glance-visual::after,
.h2-glance-item[data-accent="magenta"]:focus-within .h2-glance-visual::after{
  animation:h2ShineSweep 1.1s ease-out both;
}
@keyframes h2ShineSweep{
  from{transform:translateX(-130%)}
  to{transform:translateX(130%)}
}

@media(max-width:900px){
  .h2-trust{min-height:0}
  .h2-glance-grid{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-9)}
}
@media(max-width:560px){
  .h2-trust{padding-block:var(--sp-9)}
  .h2-glance-grid{grid-template-columns:1fr;row-gap:var(--sp-10)}
  .h2-glance-visual{max-width:260px}
}
@media(prefers-reduced-motion:reduce){
  .h2-glance-visual{transition:none}
  .h2-glance-signal,
  .h2-glance-item[data-accent="magenta"] .h2-glance-visual::after{display:none}
}

alexandria.woff2
ibm-plex-arabic-600.woff2
ibm-plex-arabic-700.woff2
manrope-latin-ext.woff2
manrope.woff2
noto-sans-arabic.woff2
onest-cyrillic.woff2
sora-latin-ext.woff2
space-grotesk.woff2
unbounded-cyrillic.woff2
/* ---------- 7. Capabilities — nested orbit of integrated capability domains ----------
   A glowing globe (fixed centre) with "HOODEL CORE" floating above it and the
   Persian core label floating below it (nothing on the globe itself). The four
   domains ("planets") ride ONE elliptical orbit around it, 90deg apart, ~90s per
   revolution; there are no drawn orbit, connector or guide lines -- the motion
   implies the orbit. The single active domain opens its sub-capabilities
   ("moons"), which orbit that planet locally (~72s) and travel with it. A
   scroll-pinned story (hoodel-home2.js toggles state classes only; scroll is the
   source of truth and reversible) reveals the globe first, then introduces the
   planets one by one: join -> moons open -> moons collapse -> next; it ends with
   all four orbiting and nothing open. Motion is CSS transform animation with
   nested counter-rotation so labels stay upright; only the active moon system
   animates, everything pauses offscreen. Narrow screens use a smaller, taller
   orbit and park the active planet at the top so its moons stay inside the
   viewport; reduced motion shows the static geometry with the same interaction. */
.hoodel-home2 #capabilities{padding-block:var(--sp-8) 0}
.h2-arch-intro{max-width:640px}
.h2-arch-intro .h2-sub{margin-bottom:var(--sp-5)}

.h2-orb-track{--orb-top:84px;position:relative;margin-top:var(--sp-5)}
.h2-orb-pin{position:relative;display:grid;place-items:center;container-type:inline-size;padding-block:var(--sp-5)}
.h2-orb{
  --T:90s;--Tm:72s;--ease:cubic-bezier(.22,1,.36,1);
  /* mobile orbit (em relative to the stage font-size) */
  --rx:7.375em;--k:2.1186;--Rm:7.5em;--cy:55.3%;--globe:10.6em;
  --pl:5.7em;--icon:2.9em;--tt:.8em;--pillw:5.3em;--pillf:.72em;
  --gr:calc(var(--globe) * .39);--gap:.6em;--capw:15.5em;
}
.h2-orb [data-accent="cyan"]{--ac:var(--brand-cyan)}
.h2-orb [data-accent="blue"]{--ac:var(--brand-blue)}
.h2-orb [data-accent="violet"]{--ac:var(--brand-violet)}
.h2-orb [data-accent="magenta"]{--ac:var(--brand-purple)}

.h2-orb-stage{position:relative;width:22.4em;height:45em;font-size:min(16px,calc((100cqw - 2rem) / 22.4))}

/* core (fixed) */
.h2-orb-core{position:absolute;left:50%;top:var(--cy);translate:-50% -50%;width:var(--globe);height:var(--globe);z-index:1}
.h2-orb-core::before{
  content:"";position:absolute;inset:-22%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--brand-violet) 26%,transparent),color-mix(in srgb,var(--brand-blue) 12%,transparent) 55%,transparent 100%);
}
.h2-orb-core picture,.h2-orb-core img{display:block}
.h2-orb-core img{
  position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
}

/* floating atmospheric labels: above and below the globe, never on it */
.h2-orb-cap{position:absolute;left:50%;translate:-50% 0;width:var(--capw);z-index:2;pointer-events:none;transition:opacity 1s ease .15s,scale 1.2s var(--ease)}
.h2-orb-cap svg{display:block;width:100%;height:auto;overflow:visible}
.h2-orb-cap--top{top:calc(var(--cy) - var(--gr) - var(--gap) - var(--capw) * .12)}
.h2-orb-cap--bot{top:calc(var(--cy) + var(--gr) + var(--gap))}
.h2-orb-cap text{paint-order:stroke;stroke:var(--surface);stroke-opacity:.55;stroke-width:4px;stroke-linejoin:round}
.h2-orb-cap-en{font-size:14px;font-weight:700;letter-spacing:6px;fill:var(--brand-cyan-text)}
.h2-orb-cap-fa{font-family:var(--ff-display);font-size:16px;font-weight:700;fill:var(--text-primary)}
/* scroll story: the globe (and its labels) appear first */
.h2-orb-core{transition:opacity 1.1s ease,scale 1.3s var(--ease)}
.h2-orb:not(.is-globe) .h2-orb-core{opacity:0;scale:.78}
.h2-orb:not(.is-globe) .h2-orb-cap{opacity:0}
.h2-orb:not(.is-globe) .h2-orb-cap--top{scale:1 .8}
.h2-orb:not(.is-globe) .h2-orb-cap--bot{scale:1 .8}

/* orbit system: origin = globe centre */
.h2-orb-sys{position:absolute;left:50%;top:var(--cy);width:0;height:0;z-index:4}
.h2-orb-squash{position:absolute;left:0;top:0;width:0;height:0;transform:scaleY(var(--k))}
.h2-orb-arm{list-style:none;margin:0;padding:0;position:absolute;left:0;top:0;width:0;height:0;animation:h2-orb-spin var(--T) linear infinite}
.h2-orb-domain{position:absolute;left:0;top:0;width:0;height:0}
.h2-orb-slot{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--phi)) translateX(var(--rx));transition:opacity .8s ease,scale .9s var(--ease),visibility 0s}
.h2-orb-cr{position:absolute;left:0;top:0;width:0;height:0;animation:h2-orb-unspin var(--T) linear infinite}
.h2-orb-unsq{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(calc(var(--phi) * -1)) scaleY(calc(1 / var(--k)))}
@keyframes h2-orb-spin{to{rotate:360deg}}
@keyframes h2-orb-unspin{to{rotate:-360deg}}

/* introduction: a planet grows out of the core onto its place on the orbit */
.h2-orb-domain:not(.is-shown) .h2-orb-slot{opacity:0;visibility:hidden;scale:.25;transition:opacity .5s ease,scale .6s ease,visibility 0s .6s}

/* planet */
.h2-orb-planet{
  all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:0;top:0;
  translate:-50% calc(var(--icon) / -2);width:var(--pl);
  display:flex;flex-direction:column;align-items:center;gap:.4em;text-align:center;border-radius:1em;color:var(--text-primary);
}
.h2-orb-planet:focus-visible{outline:2px solid var(--ac,var(--brand-cyan));outline-offset:.45em}
.h2-orb-icon{
  display:grid;place-items:center;width:var(--icon);height:var(--icon);flex:none;border-radius:50%;
  color:var(--ac);background:var(--surface);border:1.5px solid color-mix(in srgb,var(--ac) 50%,transparent);
  box-shadow:0 .7em 1.5em -1em color-mix(in srgb,var(--ac) 70%,transparent);
  transition:background-color .4s ease,color .4s ease,box-shadow .4s ease,translate .4s var(--ease);
}
.h2-orb-icon svg{width:54%;height:54%}
.h2-orb-planet:hover .h2-orb-icon,.h2-orb-planet:focus-visible .h2-orb-icon{translate:0 -.15em}
.h2-orb-text{display:flex;flex-direction:column;align-items:center;gap:.2em;min-width:0}
.h2-orb-text b{font-size:var(--tt);font-weight:var(--fw-bold);line-height:1.4}
.h2-orb-text small{display:none;max-width:10em;font-size:max(11px,.78em);line-height:1.6;color:var(--text-secondary)}
.h2-orb-domain.is-focus .h2-orb-icon{box-shadow:0 0 0 .4em color-mix(in srgb,var(--ac) 14%,transparent),0 .8em 1.8em -1em var(--ac)}
.h2-orb-domain.is-active .h2-orb-icon{background:var(--ac);color:#fff;box-shadow:0 0 0 .45em color-mix(in srgb,var(--ac) 16%,transparent),0 .9em 2em -1em var(--ac)}
.h2-orb-domain.is-active .h2-orb-text small{display:none}

/* moons: local orbit around the planet, travelling with it */
.h2-orb-moons{display:none;position:absolute;left:0;top:0;width:0;height:0;pointer-events:none}
.h2-orb-domain.is-open .h2-orb-moons{display:block}
.h2-orb-orbit{list-style:none;margin:0;padding:0;position:absolute;left:0;top:0;width:0;height:0;animation:h2-orb-spin var(--Tm) linear infinite}
.h2-orb-moon{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(var(--a)) translateX(var(--Rm))}
.h2-orb-moon-cr{position:absolute;left:0;top:0;width:0;height:0;animation:h2-orb-unspin var(--Tm) linear infinite}
.h2-orb-moon-unrot{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(calc(var(--a) * -1))}
.h2-orb-pill{
  position:absolute;left:0;top:0;translate:-50% -50%;pointer-events:auto;
  display:block;width:max-content;max-width:var(--pillw);padding:.4em .6em;border-radius:1em;text-align:center;
  font-size:max(11px,var(--pillf));line-height:1.35;color:var(--text-primary);
  background:color-mix(in srgb,var(--ac) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--ac) 42%,var(--border));
  box-shadow:0 .5em 1.2em -.8em color-mix(in srgb,var(--ac) 65%,transparent);
}
.h2-orb-domain.is-open .h2-orb-moon{animation:h2-orb-pop .6s var(--ease) both;animation-delay:calc(var(--i) * 70ms)}
.h2-orb-domain.is-closing .h2-orb-moons{animation:h2-orb-collapse .45s ease-in forwards}
@keyframes h2-orb-pop{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@keyframes h2-orb-collapse{to{opacity:0;scale:.2}}

/* mobile: the active planet is parked at the top of the orbit so its moons fit */
.h2-orb.is-parked .h2-orb-arm,.h2-orb.is-parked .h2-orb-cr{animation:none;transition:rotate 1.3s var(--ease)}

/* pause every orbit while the section is offscreen */
.h2-orb:not(.is-run) .h2-orb-arm,.h2-orb:not(.is-run) .h2-orb-cr,
.h2-orb:not(.is-run) .h2-orb-orbit,.h2-orb:not(.is-run) .h2-orb-moon-cr{animation-play-state:paused}

/* desktop orbit */
@media(min-width:1200px){
  .h2-orb{--rx:26.875em;--k:.6605;--Rm:9em;--cy:50%;--globe:17.2em;--pl:11em;--icon:4.4em;--tt:.98em;--pillw:6.1em;--pillf:.76em}
  .h2-orb-stage{width:75em;height:57em;font-size:min(16px,calc((100cqw - 2 * var(--gutter)) / 75))}
  .h2-orb-text small{display:block}
  .h2-orb{--capw:21em;--gap:.9em}
}

/* pinned sequence (motion allowed): scroll introduces the planets one by one */
@media(prefers-reduced-motion:no-preference){
  @supports(overflow-x:clip){
    .h2-orb-track{height:calc(100vh - var(--orb-top) + 430vh);height:calc(100svh - var(--orb-top) + 430svh)}
    .h2-orb-pin{position:sticky;top:var(--orb-top);height:calc(100vh - var(--orb-top));height:calc(100svh - var(--orb-top));container-type:size;padding-block:0}
    .h2-orb-stage{font-size:min(16px,calc((100cqh - 12px) / 45),calc((100cqw - 2rem) / 22.4))}
    @media(min-width:1200px){
      .h2-orb-stage{font-size:min(16px,calc((100cqh - 12px) / 57),calc((100cqw - 2 * var(--gutter)) / 75))}
    }
  }
}
@media(max-width:960px){.h2-orb-track{--orb-top:92px}}
@media(max-width:560px){.h2-orb-track{--orb-top:84px}}
@media(scripting:none){.h2-orb-track{height:auto}.h2-orb-pin{position:relative;height:auto}}
@media(prefers-reduced-motion:reduce){
  .h2-orb *,.h2-orb *::before{animation:none !important;transition:none !important}
}



/* ---------- 8. Industries — self-segmentation gateway ----------
   Editorial stage + selector, not a card grid (the fourth equal-card
   pattern on this page would have been one too many). One dominant
   industry visual at a time, driven entirely by explicit click/keyboard
   selection -- no autoplay, no carousel. Mobile gets its own compact
   pill-row selector under a shorter stage, not a shrunk version of the
   desktop list (see the 900px breakpoint below). */
.hoodel-home2 #industries{padding-block:var(--sp-8)}
.h2-ind-intro{max-width:640px}
.h2-cf{margin-top:var(--sp-8)}
/* Coverflow island host: reserve its final height (frame padding + 4:3 card + caption + dots)
   so mounting causes no layout shift, and map the island tokens to the site theme. */
.hoodel-home2 #industries-react-lab{
  min-height:calc(clamp(240px,28vw,420px)*.75 + 209px);
  --foreground:215 66% 12%;
  --muted:209 47% 95%;
  --muted-foreground:216 19% 40%;
}
:root[data-theme="dark"] .hoodel-home2 #industries-react-lab{
  --foreground:210 50% 97%;
  --muted:210 56% 15%;
  --muted-foreground:213 22% 73%;
  --cf-veil:9 21 37;
  --cf-veil-k:0.15;
}
@media(max-width:480px){
  .hoodel-home2 #industries-react-lab{min-height:calc(66vw*.75 + 209px)}
}
.h2-cf-fallback{max-width:640px;margin:0 auto;padding:0 var(--sp-5);color:var(--text-secondary);font-size:14px;line-height:1.9}

/* ---------- 9. Delivery model: pinned technical notes ----------
   Four notes are pinned one after another onto a quiet engineering workspace.
   Desktop (>=1025px): a sticky scene; scrolling reveals note 01 -> 04 while the
   trace between the pins is drawn. Mobile/tablet: a vertical journey, each note
   revealing as it arrives. Default (no JS / reduced motion) = the finished scene.
   Only transform/opacity/shadow transition; JS toggles classes, never per frame. */
.hoodel-home2 .h2-approach{background:var(--surface)}
.h2-dm{
  --dm-top:84px;
  --dm-ink:#0b1d36;--dm-ink2:#52627a;--dm-ink3:#6b7a91;
  --dm-paper:#ffffff;
  --dm-line:rgba(11,29,54,.09);
  --dm-dot:rgba(11,29,54,.085);
  --dm-gold:#b3872f;
  --dm-ease:cubic-bezier(.22,1,.36,1);
}
:root[data-theme="dark"] .h2-dm{
  --dm-paper:#f6f9fd;
  --dm-dot:rgba(150,185,225,.11);
  --dm-gold:#e0b45a;
}
.h2-dm-track{position:relative;margin-top:var(--sp-7);padding-block:var(--sp-4) 0}
.h2-dm-track::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(circle,var(--dm-dot) 1px,transparent 1.5px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000 30%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 62% at 50% 46%,#000 30%,transparent 100%);
}
.h2-dm-pin,.h2-dm-scene{position:relative}
.h2-dm-stage{font-size:16px}
.h2-dm-path{display:none}
.h2-dm-cards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3.6em;align-items:center}

/* card */
.h2-dm-card{
  --ac:#1a5fd0;--ex:0em;--ey:2.6em;--er:2.5deg;
  position:relative;width:min(100% - 3.4em,26em);
  padding:2.5em 1.35em 1.35em;
  background:var(--dm-paper);
  border:1px solid var(--dm-line);border-radius:.9em;
  box-shadow:0 .15em .4em rgba(11,29,54,.05),0 1.1em 2.2em -1.3em rgba(11,29,54,.3);
  color:var(--dm-ink);text-align:start;
  transform:rotate(var(--rot,0deg));
  transition:transform 1.05s var(--dm-ease),opacity .9s ease-out,box-shadow .9s ease,filter .9s ease;
}
.h2-dm-card[data-n="1"]{--ac:#1a5fd0;--ex:.8em;--ey:2.8em;--er:2.5deg}
.h2-dm-card[data-n="2"]{--ac:#6a56d6;--ex:-.8em;--ey:2.8em;--er:-2.5deg}
.h2-dm-card[data-n="3"]{--ac:#0a8fa1;--ex:.8em;--ey:2.8em;--er:2.5deg}
.h2-dm-card[data-n="4"]{--ac:#b3872f;--ex:-.8em;--ey:2.8em;--er:-2.5deg}
.h2-dm-card[data-n="1"]{--rot:1.4deg}.h2-dm-card[data-n="2"]{--rot:-1.6deg}
.h2-dm-card[data-n="3"]{--rot:1.2deg}.h2-dm-card[data-n="4"]{--rot:-1.4deg}
.h2-dm-dot{
  position:absolute;top:.85em;left:50%;width:.95em;height:.95em;margin-left:-.475em;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--ac) 45%,#fff),var(--ac) 64%);
  box-shadow:0 .25em .5em rgba(11,29,54,.32),inset 0 -.12em .2em rgba(0,0,0,.2);
  transition:transform .8s var(--dm-ease) .35s,opacity .6s ease .35s;
}
.h2-dm-num{
  display:flex;align-items:center;gap:.7em;
  font-size:.95em;font-weight:700;letter-spacing:.1em;color:var(--ac);
}
.h2-dm-num::after{content:"";flex:1;height:1px;background:linear-gradient(to left,var(--ac),transparent);opacity:.45}
.h2-dm-card h3{margin:.65em 0 .1em;font-family:var(--ff-display);font-size:1.34em;font-weight:800;line-height:1.4;color:var(--dm-ink)}
.h2-dm-en{margin:0;font-size:.78em;letter-spacing:.03em;line-height:1.5;color:var(--dm-ink3);text-align:right;unicode-bidi:isolate}
.h2-dm-desc{margin:.9em 0 1.1em;font-size:.9em;line-height:1.95;color:var(--dm-ink2)}
.h2-dm-art{display:block;aspect-ratio:16/10;overflow:hidden;border-radius:.55em;background:#f2f6fc;box-shadow:inset 0 0 0 1px rgba(11,29,54,.06)}
.h2-dm-art img{display:block;width:100%;height:100%;object-fit:cover}

/* mobile: connector between notes (drawn as each note arrives) */
.h2-dm-card + .h2-dm-card::before{
  content:"";position:absolute;left:50%;top:-3.35em;width:2px;height:calc(3.35em + 1.325em);margin-left:-1px;
  background:repeating-linear-gradient(to bottom,var(--ac) 0 .35em,transparent .35em .75em);
  opacity:.65;transform-origin:top;transition:transform .9s var(--dm-ease) .25s;
}
.h2-dm-card[data-n="2"]{translate:-.35em 0}
.h2-dm-card[data-n="3"]{translate:.35em 0}
.h2-dm-card[data-n="4"]{translate:-.35em 0}

/* animated states (class added by JS only when motion is allowed) */
.h2-dm-track.is-anim .h2-dm-card:not(.is-in){
  opacity:0;
  transform:translate(var(--ex),var(--ey)) rotate(calc(var(--rot) + var(--er)));
  box-shadow:0 0 0 rgba(11,29,54,0);
}
.h2-dm-track.is-anim .h2-dm-card:not(.is-in) .h2-dm-dot{transform:translateY(-.6em) scale(1.5);opacity:0}
.h2-dm-track.is-anim .h2-dm-card + .h2-dm-card:not(.is-in)::before{transform:scaleY(0)}
.h2-dm-track.is-anim .h2-dm-card.is-active{
  transform:translateY(-.3em) rotate(calc(var(--rot) * .45)) scale(1.012);
  box-shadow:0 .2em .5em rgba(11,29,54,.06),0 1.7em 3em -1.4em rgba(11,29,54,.38);
}
.h2-dm-track.is-anim .h2-dm-card.is-past{opacity:.97;filter:saturate(.95)}
.h2-dm-track.is-anim .h2-dm-card.is-far{opacity:.94;filter:saturate(.9)}

/* desktop composition */
@media(min-width:1025px){
  .h2-dm-scene{
    width:min(100%,1200px,calc((100vh - var(--dm-top) - 24px) * 1.5789));
    width:min(100%,1200px,calc((100svh - var(--dm-top) - 24px) * 1.5789));
    aspect-ratio:1200/760;margin-inline:auto;container-type:inline-size;
  }
  .h2-dm-stage{position:absolute;inset:0;font-size:calc(100cqw / 75)}
  .h2-dm-path{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:0;pointer-events:none}
  .h2-dm-cards{position:absolute;inset:0;display:block}
  .h2-dm-card{position:absolute;left:var(--l);top:var(--t);width:23.3333%;padding:2.5em 1.2em 1.2em}
  .h2-dm-card[data-n]{translate:none}
  .h2-dm-card + .h2-dm-card::before{display:none}
  .h2-dm-card[data-n="1"]{--ex:2.6em;--ey:2.4em;--er:3deg}
  .h2-dm-card[data-n="2"]{--ex:2.6em;--ey:1.4em;--er:-3deg}
  .h2-dm-card[data-n="3"]{--ex:2.6em;--ey:2.4em;--er:3deg}
  .h2-dm-card[data-n="4"]{--ex:2.6em;--ey:1.4em;--er:-3deg}
  .h2-dm-card[data-n="1"]{--rot:2.2deg}.h2-dm-card[data-n="2"]{--rot:-2.6deg}
  .h2-dm-card[data-n="3"]{--rot:2deg}.h2-dm-card[data-n="4"]{--rot:-2.2deg}
  .h2-dm-card[data-n="1"]{z-index:1}.h2-dm-card[data-n="2"]{z-index:2}.h2-dm-card[data-n="3"]{z-index:3}.h2-dm-card[data-n="4"]{z-index:4}
  .h2-dm-line{fill:none;stroke-width:2.4;stroke-linecap:round;stroke-dasharray:7 8;opacity:.8}
  .h2-dm-draw{fill:none;stroke:#fff;stroke-width:8;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.3s cubic-bezier(.45,.05,.25,1) .3s}
  .h2-dm-s1{stop-color:var(--brand-blue)}.h2-dm-s2{stop-color:var(--brand-violet)}
  .h2-dm-s3{stop-color:var(--brand-cyan)}.h2-dm-s4{stop-color:var(--dm-gold)}
  .h2-dm-track.is-anim .h2-dm-draw{stroke-dashoffset:1}
  .h2-dm-track.is-anim .h2-dm-draw.is-on{stroke-dashoffset:0}
  .h2-dm-track.is-anim .h2-dm-card.is-active{transform:translateY(-.3em) rotate(calc(var(--rot) * .45)) scale(1.012)}
}
/* pinned scene (desktop, motion allowed) */
@media(min-width:1025px) and (prefers-reduced-motion:no-preference){
  @supports (overflow-x:clip){
    .h2-dm-track{height:calc(100vh - var(--dm-top) + 226vh);height:calc(100svh - var(--dm-top) + 226svh)}
    .h2-dm-pin{position:sticky;top:var(--dm-top);height:calc(100vh - var(--dm-top));height:calc(100svh - var(--dm-top));display:grid;place-items:center}
  }
}
@media(scripting:none){.h2-dm-track{height:auto}.h2-dm-pin{position:relative;height:auto}}
@media(prefers-reduced-motion:reduce){
  .h2-dm-card,.h2-dm-dot,.h2-dm-card + .h2-dm-card::before,.h2-dm-draw{transition:none}
}
@media(min-width:1025px){
  .h2-dm-card[data-n="1"]{--l:74.0000%;--t:4.7368%}
  .h2-dm-card[data-n="2"]{--l:50.2500%;--t:38.4211%}
  .h2-dm-card[data-n="3"]{--l:26.5000%;--t:6.3158%}
  .h2-dm-card[data-n="4"]{--l:2.7500%;--t:40.0000%}
}

/* ---------- 10. Impact (Connected Earth) — visual climax ---------- */
.hoodel-home2 .h2-impact{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:82vh;
  padding:0;
  color:var(--h2-dark-text);
  background:var(--h2-dark-bg);
}
.h2-impact-media{position:absolute;inset:0;z-index:0}
.h2-impact-media picture,
.h2-impact-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:64% 50%;
}
/* Approach -> Earth: clean start, no bridging fade painted over the top
   of the photo. Only the existing readability scrim remains (text-side
   darkening + a bottom vignette), unrelated to the section seam above it. */
.h2-impact-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to right,rgba(3,7,15,.86) 0%,rgba(3,7,15,.5) 24%,rgba(3,7,15,.06) 48%,transparent 62%),
    linear-gradient(to bottom,transparent 82%,rgba(2,6,14,.4) 100%);
}
.h2-impact .wrap{position:relative;z-index:2;width:100%}
.h2-impact-copy{max-width:440px;margin-inline-start:auto}
.h2-impact-copy .h2-eyebrow{color:#5fd6e6}
.h2-impact-copy h2{
  color:#fff;
  max-width:none;
  margin-bottom:var(--sp-5);
  font-size:var(--fs-h2-impact);
  text-shadow:0 2px 20px rgba(0,0,0,.3);
}
.h2-impact-copy p{margin:0;max-width:48ch;font-size:var(--fs-body);line-height:1.85;color:var(--h2-dark-muted)}

@media(max-width:900px){
  .h2-impact-media img{object-position:68% 50%}
}
@media(max-width:720px){
  /* audit fix: this used to step down at 900px while Hero (its visual
     bookend) held 82vh until 720px, producing a ~226px height mismatch
     between the two full-bleed cinematic sections in the 721-900px band.
     Both now step down together. */
  .hoodel-home2 .h2-impact{min-height:60vh}
}
@media(max-width:560px){
  .hoodel-home2 .h2-impact{display:block;min-height:0}
  .h2-impact-media{position:relative;inset:auto;height:260px}
  .h2-impact-scrim{display:none}
  .h2-impact .wrap{position:static;padding-block:var(--sp-8)}
  .h2-impact-copy{max-width:none;margin-inline-start:0}
  .h2-impact-media img{object-position:60% 55%}
}

/* ---------- 11. Closing CTA ---------- */
.h2-close{
  position:relative;
  overflow:hidden;
  padding-block:clamp(100px,15vw,168px);
  min-height:420px;
  display:flex;
  align-items:center;
  text-align:center;
  color:var(--h2-dark-text);
  background:linear-gradient(160deg,#050d1a 0%,#0b1930 100%);
}
.h2-close:before,
.h2-close:after{
  content:"";
  position:absolute;
  width:44vw;
  height:44vw;
  max-width:480px;
  max-height:480px;
  border-radius:50%;
  filter:blur(64px);
  opacity:.12;
  pointer-events:none;
}
.h2-close:before{top:-24%;inset-inline-start:-20%;background:#22c7d9}
.h2-close:after{bottom:-28%;inset-inline-end:-20%;background:#9b6ae0}
.h2-close .wrap{position:relative;z-index:2;max-width:640px;margin-inline:auto}
.h2-close .h2-eyebrow{color:#5fd6e6}
.h2-close h2{margin-inline:auto;color:#fff;max-width:none;margin-bottom:var(--sp-5)}
.h2-close p{
  max-width:46ch;
  margin:0 auto var(--sp-8);
  font-size:var(--fs-intro);
  line-height:1.85;
  color:var(--h2-dark-muted);
}
.h2-close-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;justify-content:center}
.h2-close .btn.secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.h2-close .btn.secondary:hover{border-color:#5fd6e6;color:#5fd6e6}
.h2-close-info{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-3);
  flex-wrap:wrap;
  margin-top:var(--sp-6);
  font-size:13px;
  color:var(--h2-dark-muted);
}
.h2-close-email{color:var(--h2-dark-muted);text-decoration:none}
.h2-close-email:hover{color:#5fd6e6}
.h2-close-sep{opacity:.5}
@media(max-width:560px){
  .h2-close{padding-block:var(--sp-11);min-height:0}
  .h2-close-info{flex-direction:column;gap:var(--sp-2)}
  .h2-close-sep{display:none}
}

/* ---------- 12. Motion ---------- */
.hoodel-home2 .reveal-item{opacity:1;translate:0 0}
.motion-ready .hoodel-home2 .reveal-item{
  opacity:0;
  translate:0 16px;
  transition:opacity .6s cubic-bezier(.2,.7,.2,1),translate .6s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-ready .hoodel-home2 .reveal-item.is-visible{opacity:1;translate:0 0}

/* ---------- 13. Responsive: supplementary large-viewport checks ----------
   No further gutter bump at very large viewports: the :root --gutter
   clamp already tops out at 40px, which is the deliberate desktop maximum
   -- letting it grow further here would reintroduce the exact
   Header/Footer-vs-sections mismatch this file now fixes at the source. */

/* ---------- 14. Accessibility / reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .motion-ready .hoodel-home2 .reveal-item{opacity:1;translate:0 0;transition:none}
  .h2-theme-toggle,.h2-more{transition:none}
}

/* ---------- 15. "تخصص هودل در یک نگاه" — Blur-Fade choreography ----------
   Placed at the end of the file deliberately: this overrides the
   whole-item fade in section 12 above (same selector specificity --
   .motion-ready + one class + .reveal-item -- so source order is what
   decides the tie, not a specificity hack) with a per-child stagger
   instead (image -> title -> text), matching this task's "Blur Fade"
   spec without touching the shared .reveal-item rule every other
   section on the page still uses untouched. */
.motion-ready .h2-glance-item.reveal-item{opacity:1;translate:0 0;transition:none}
.motion-ready .h2-glance-visual,
.motion-ready .h2-glance-item h3,
.motion-ready .h2-glance-item p{
  opacity:0;
  translate:0 8px;
  filter:blur(6px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),
             translate .55s cubic-bezier(.2,.7,.2,1),
             filter .55s cubic-bezier(.2,.7,.2,1),
             border-color .22s ease;
}
.motion-ready .h2-glance-visual{transition-delay:var(--reveal-delay,0ms)}
.motion-ready .h2-glance-item h3{transition-delay:calc(var(--reveal-delay,0ms) + 140ms)}
.motion-ready .h2-glance-item p{transition-delay:calc(var(--reveal-delay,0ms) + 260ms)}
.motion-ready .h2-glance-item.is-visible .h2-glance-visual,
.motion-ready .h2-glance-item.is-visible h3,
.motion-ready .h2-glance-item.is-visible p{
  opacity:1;
  translate:0 0;
  filter:blur(0);
}

@media(prefers-reduced-motion:reduce){
  /* Immediate/static appearance -- no blur, no transform, no traveling
     signals of any kind. The four approved images stay fully usable. */
  .motion-ready .h2-glance-visual,
  .motion-ready .h2-glance-item h3,
  .motion-ready .h2-glance-item p{
    opacity:1;
    translate:0 0;
    filter:none;
    transition:none;
  }
  .h2-signal-beam,
  .h2-signal-hub,
  .h2-signal-ripple,
  .h2-signal-nodes circle,
  .h2-glance-item[data-accent="magenta"] .h2-glance-visual::after,
  .h2-glance-visual::before{animation:none !important}
  .h2-trust::after{transition:none}
}

/* ---------- 13. Why HOODEL ----------
   Same eyebrow/h2/wrap/reveal-item system as every other fold. Accent
   tokens reuse the exact --brand-* custom properties the "در یک نگاه"
   fold already defines per theme (see section 1 root blocks), so this
   grid stays theme-correct with zero new color values. */
.h2-why-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-6);
  margin-top:var(--sp-8);
}
.h2-why-item{
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  background:var(--surface-subtle);
}
.h2-why-icon{
  display:inline-flex;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--h2-why-accent,var(--brand-cyan));
  background:color-mix(in srgb,var(--h2-why-accent,var(--brand-cyan)) 14%,transparent);
  margin-bottom:var(--sp-4);
}
.h2-why-icon svg{width:22px;height:22px}
.h2-why-item h3{margin:0 0 var(--sp-2);font-family:var(--ff-text);font-size:var(--fs-card-title);font-weight:var(--fw-bold);color:var(--text-primary)}
.h2-why-item p{margin:0;font-size:var(--fs-card-body);line-height:1.8;color:var(--text-secondary)}
.h2-why-item[data-accent="cyan"]{--h2-why-accent:var(--brand-cyan)}
.h2-why-item[data-accent="blue"]{--h2-why-accent:var(--brand-blue)}
.h2-why-item[data-accent="violet"]{--h2-why-accent:var(--brand-violet)}
.h2-why-item[data-accent="magenta"]{--h2-why-accent:var(--brand-purple)}
@media(max-width:900px){.h2-why-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.h2-why-grid{grid-template-columns:1fr;gap:var(--sp-5)}}

/* ---------- 14. Projects / References ----------
   Editorial 3-col grid, first card featured (spans 2 cols) for asymmetry
   instead of 8 identical boxes. Same accent-token system as Why HOODEL
   (section 13) and the "در یک نگاه" fold -- zero new colors. */
.h2-refs{padding-block:var(--sp-11)}
.h2-ref-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5);
  margin-top:var(--sp-8);
}
.h2-ref-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-3);
  padding:var(--sp-6);
  border:1px solid var(--border);
  border-top:3px solid var(--h2-ref-accent,var(--brand-cyan));
  border-radius:var(--radius-lg);
  background:var(--surface-subtle);
}
.h2-ref-card--featured{grid-column:span 2}
.h2-ref-card--featured h3{font-size:calc(var(--fs-card-title) * 1.15)}
.h2-ref-sector{
  font-family:var(--ff-text);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--h2-ref-accent,var(--brand-cyan));
}
.h2-ref-card h3{margin:0;font-family:var(--ff-display);font-size:var(--fs-card-title);font-weight:var(--fw-bold);color:var(--text-primary)}
.h2-ref-scope{margin:0;font-size:var(--fs-card-body);line-height:1.8;color:var(--text-secondary)}
.h2-ref-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:var(--sp-2)}
.h2-ref-tag{
  font-family:var(--ff-text);
  font-size:11.5px;
  font-weight:600;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  color:var(--text-secondary);
}
.h2-ref-card[data-accent="cyan"]{--h2-ref-accent:var(--brand-cyan)}
.h2-ref-card[data-accent="blue"]{--h2-ref-accent:var(--brand-blue)}
.h2-ref-card[data-accent="violet"]{--h2-ref-accent:var(--brand-violet)}
.h2-ref-card[data-accent="magenta"]{--h2-ref-accent:var(--brand-purple)}
.h2-refs-cta{margin-top:var(--sp-8)}
@media(max-width:1100px){
  .h2-ref-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .h2-ref-grid{grid-template-columns:1fr;gap:var(--sp-4)}
  .h2-ref-card--featured{grid-column:span 1}
}