/* =========================================================
   WES.IR REDESIGN — DESIGN SYSTEM
   Subject: Iran Welding Engineering & NDT Society
   Signature devices: weld-seam bead dividers + analog gauge dials
   ========================================================= */

:root{
  /* -- color tokens -- */
  --ink-steel:      #0F1E2A;
  --ink-steel-2:    #16293C;
  --ink-steel-3:    #1D3348;
  --blueprint:      #1F4C74;
  --blueprint-light:#3E7CA6;
  --arc-amber:      #E8871E;
  --arc-amber-deep: #C1440E;
  --gauge-gray:     #8792A0;
  --line-soft:      rgba(255,255,255,.14);
  --line-soft-2:    rgba(255,255,255,.08);
  --plate-mist:     #F3F6F8;
  --plate-white:    #FFFFFF;
  --charcoal-text:  #1B2530;
  --muted-text:     #5C6773;
  --success:        #23795A;
  --success-bg:     #E7F4EE;
  --error:          #C0392B;
  --error-bg:       #FBEAE8;

  /* -- typography -- */
  --font-fa: 'Vazirmatn', 'Tahoma', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* -- shape / motion -- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --ease: cubic-bezier(.22,.8,.32,1);
  --container-w: 1200px;
}

/* ---------- reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0;
  font-family: var(--font-fa);
  color: var(--charcoal-text);
  background: var(--plate-white);
  font-size: 16px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; line-height:1.3; }
p{ margin:0 0 1em; color: var(--muted-text); }
ul{ margin:0; padding:0; }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
button{ font-family:inherit; cursor:pointer; }
input, select, textarea{ font-family:inherit; }

.skip-link{
  position:absolute; right:-999px; top:0; z-index:999;
  background:var(--arc-amber); color:#161616; padding:.75em 1.25em; border-radius:0 0 8px 8px;
}
.skip-link:focus{ right:1rem; }

:focus-visible{ outline:3px solid var(--arc-amber); outline-offset:2px; border-radius:4px; }

.container{ max-width: var(--container-w); margin:0 auto; padding:0 24px; }

/* ---------- eyebrow / section heads ---------- */
.eyebrow{
  font-family: var(--font-mono);
  direction:ltr; unicode-bidi:isolate; display:inline-block;
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--arc-amber-deep); font-weight:600; margin:0 0 .75em;
}
.section__head{ max-width:640px; margin:0 auto 2.75rem; text-align:center; }
.section__head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.section__head--split{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem;
  max-width:none; text-align:right; margin-bottom:2rem;
}
.section__head--split .eyebrow, .section__head--split h2{ margin-bottom:0; }
.lead{ font-size:1.08rem; color:var(--muted-text); }

.section{ padding: 5.5rem 0; }
.section--tinted{ background: var(--plate-mist); }
@media (max-width: 720px){ .section{ padding: 3.25rem 0; } }

.narrow-content{ max-width:760px; margin:0 auto; }

/* ---------- weld-seam divider (signature device) ---------- */
.weld-divider{
  height: 26px;
  background-image: radial-gradient(circle at 50% 0, var(--arc-amber) 0 3px, transparent 4px 100%);
  background-size: 34px 26px;
  background-repeat: repeat-x;
  background-position: center top;
  opacity:.9;
}
.site-footer .weld-divider{ opacity:.5; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.75em 1.5em; border-radius: 999px; font-weight:700; font-size:.95rem;
  border:2px solid transparent; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn--primary{ background: var(--arc-amber); color:#191008; box-shadow: 0 8px 20px -8px rgba(232,135,30,.7); }
.btn--primary:hover{ background: var(--arc-amber-deep); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px -8px rgba(193,68,14,.55); }
.btn--ghost{ border-color: var(--line-soft); color: var(--ink-steel); }
.btn--ghost-light{ border-color: rgba(255,255,255,.4); color:#fff; }
.btn--ghost-light:hover{ background:rgba(255,255,255,.08); border-color:#fff; }
.btn--outline-dark{ border-color: var(--ink-steel); color: var(--ink-steel); }
.btn--outline-dark:hover{ background: var(--ink-steel); color:#fff; transform:translateY(-2px); }
.btn--outline-amber{ border-color: var(--arc-amber); color: var(--arc-amber-deep); }
.btn--outline-amber:hover{ background: var(--arc-amber); color:#191008; }
.btn--lg{ padding:.95em 1.9em; font-size:1rem; }
.btn--block{ width:100%; }
.header-only{ display:inline-flex; }

/* ================= HEADER ================= */
.topbar{ background: var(--ink-steel); color:#c7d0d8; font-size:.82rem; border-bottom:1px solid var(--line-soft-2); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; height:38px; }
.topbar__info{ display:flex; gap:1.25rem; }
.topbar__item{ display:flex; align-items:center; gap:.4em; direction:ltr; unicode-bidi:isolate; }
.topbar__links a{ opacity:.9; }
.topbar__links a:hover{ color: var(--arc-amber); }
.topbar__links .dot{ margin:0 .5em; opacity:.5; }
@media (max-width: 720px){ .topbar__info{ display:none; } }

.site-header{
  position: sticky; top:0; z-index:60;
  border-bottom: 1px solid var(--line-soft-2);
  transition: box-shadow .3s var(--ease);
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background: rgba(15,30,42,.92); backdrop-filter: blur(10px);
}
.site-header.is-scrolled{ box-shadow: 0 12px 30px -18px rgba(0,0,0,.6); }
.header__inner{ display:flex; align-items:center; justify-content:space-between; height:78px; gap:1.5rem; flex-wrap:wrap; row-gap:.5rem; }

.brand{ display:flex; align-items:center; gap:.7rem; color:#fff; flex-shrink:0; min-width:0; }
.brand__mark{ width:42px; height:42px; color: var(--arc-amber); flex-shrink:0; }
.brand__mark svg{ width:100%; height:100%; }
.brand__text{ display:flex; flex-direction:column; line-height:1.3; }
.brand__text strong{ font-size:1rem; font-weight:800; }
.brand__text small{ font-size:.68rem; color: var(--gauge-gray); font-family:var(--font-mono); direction:ltr; letter-spacing:.02em; }

.main-nav{ flex:1; display:flex; justify-content:center; }
.main-nav__head{ display:none; }
.main-nav > ul{ display:flex; align-items:center; gap:.25rem; list-style:none; }
.main-nav > ul > li{ position:relative; }
.main-nav > ul > li > a{
  display:flex; align-items:center; gap:.3em; color:#dbe2e8; font-size:.92rem; font-weight:600;
  padding:.6em .85em; border-radius:8px; transition: color .2s, background .2s;
  position:relative;
}
.main-nav > ul > li > a::after{
  content:''; position:absolute; right:.85em; left:.85em; bottom:.3em; height:2px;
  background: var(--arc-amber); transform:scaleX(0); transform-origin:center; transition: transform .25s var(--ease);
}
.main-nav > ul > li > a:hover, .main-nav > ul > li > a.is-active{ color:#fff; }
.main-nav > ul > li > a:hover::after, .main-nav > ul > li > a.is-active::after{ transform:scaleX(1); }
.main-nav .ic-chevron{ width:.65em; height:.65em; margin-right:.15em; }
.main-nav .ic-chevron svg{ width:100%; height:100%; }

.dropdown{
  position:absolute; top:calc(100% + 10px); right:0; min-width:220px;
  background: var(--ink-steel-2); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  list-style:none; padding:.5rem; opacity:0; visibility:hidden; transform: translateY(8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.6);
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown li a{ display:block; padding:.6em .8em; border-radius:8px; color:#d7dee4; font-size:.88rem; }
.dropdown li a:hover{ background: rgba(232,135,30,.12); color: var(--arc-amber); }

.header__actions{ display:flex; align-items:center; gap:.5rem; }
.header__actions .btn--ghost-light{ padding:.55em .95em; font-size:.84rem; }
.header__actions .btn--primary{ padding:.6em 1.1em; font-size:.84rem; }

.nav-backdrop{ display:none; }

.nav-toggle{ display:none; flex-direction:column; gap:5px; background:none; border:none; padding:8px; }
.nav-toggle span{ width:24px; height:2px; background:#fff; border-radius:2px; transition: transform .25s, opacity .25s; }
.nav-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1240px){
  .header__inner{ gap:.75rem; height:66px; }
  .brand__mark{ width:34px; height:34px; }
  .brand__text small{ display:none; }
  .brand__text strong{ font-size:.9rem; }
  .header__actions{ gap:.4rem; }
  .header__actions .btn--primary{ padding:.55em .9em; font-size:.82rem; }

  /* off-canvas drawer */
  .main-nav{
    position: fixed; top:0; bottom:0; right:0; width:min(86vw, 340px);
    background: var(--ink-steel); display:flex; flex-direction:column;
    transform: translateX(105%); transition: transform .35s var(--ease);
    z-index:70; box-shadow: -24px 0 60px -20px rgba(0,0,0,.55);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .main-nav__head{
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
    padding:1.1rem 1.25rem; border-bottom:1px solid var(--line-soft-2);
  }
  .main-nav__head-title{ color:#fff; font-weight:700; font-size:.92rem; }
  .main-nav__close{
    display:flex; align-items:center; justify-content:center; width:36px; height:36px;
    background: rgba(255,255,255,.08); border:none; border-radius:10px; color:#fff; cursor:pointer;
    transition: background .2s var(--ease), transform .2s var(--ease);
  }
  .main-nav__close:hover{ background: rgba(255,255,255,.18); transform: rotate(90deg); }
  .main-nav__close svg{ width:18px; height:18px; }

  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:.15rem; list-style:none; padding:1rem; margin:0; overflow-y:auto; flex:1; }
  .main-nav > ul > li > a{ padding:.9em 1em; font-size:.95rem; }
  .main-nav > ul > li > a::after{ display:none; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; margin-right:1rem; display:none; background:transparent; border:none; }
  .has-dropdown.is-open .dropdown{ display:block; }
  .has-dropdown.is-open > a .ic-chevron{ transform: rotate(180deg); }
  .ic-chevron{ transition: transform .2s var(--ease); }

  .nav-toggle{ display:flex; }
  .header-only{ display:none; }

  .nav-backdrop{
    display:block; position:fixed; inset:0; background: rgba(8,15,21,.6); backdrop-filter: blur(2px);
    opacity:0; visibility:hidden; transition: opacity .3s var(--ease), visibility .3s;
    z-index:65;
  }
  body.nav-open{ overflow:hidden; }
  body.nav-open .nav-backdrop{ opacity:1; visibility:visible; }
}

@media (max-width: 360px){
  .brand__text strong{ font-size:.8rem; }
  .header__actions .btn--primary{ padding:.5em .7em; font-size:.76rem; }
}

/* ================= HERO ================= */
.hero{
  position:relative; overflow:hidden;
  background: radial-gradient(120% 140% at 15% -10%, var(--ink-steel-3) 0%, var(--ink-steel) 55%, #0A1721 100%);
  color:#fff; padding: 7.5rem 0 6.5rem;
  min-height: 78vh; display:flex; flex-direction:column; justify-content:center;
}
.page-hero{
  position:relative; overflow:hidden;
  background: linear-gradient(160deg, var(--ink-steel) 0%, var(--ink-steel-3) 100%);
  color:#fff; padding: 4.5rem 0 3.75rem;
}
.page-hero--sm h1{ font-size:clamp(1.7rem,3vw,2.4rem); }
.hero__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-soft-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft-2) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(120% 100% at 70% 20%, #000 40%, transparent 85%);
}
.hero__spark{
  position:absolute; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,135,30,.55), transparent 70%);
  filter: blur(10px); opacity:.55; animation: spark-pulse 6s ease-in-out infinite;
}
.hero__spark--1{ top:-40px; left:10%; }
.hero__spark--2{ bottom:-60px; left:55%; width:340px; height:340px; animation-delay:-3s; }
@keyframes spark-pulse{ 0%,100%{ transform:scale(1); opacity:.45;} 50%{ transform:scale(1.25); opacity:.7;} }

.hero__inner{ position:relative; z-index:2; max-width:760px; }
.hero__title{ font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
.hero__actions{ display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }
.hero__scroll-cue{ position:relative; z-index:2; margin:3rem auto 0; width:26px; height:42px; border:2px solid rgba(255,255,255,.4); border-radius:20px; }
.hero__scroll-cue span{ position:absolute; top:6px; right:50%; width:4px; height:8px; background: var(--arc-amber); border-radius:3px; transform:translateX(50%); animation: scroll-cue 1.8s ease-in-out infinite; }
@keyframes scroll-cue{ 0%{ opacity:1; top:6px;} 70%{ opacity:0; top:22px;} 100%{ opacity:0; top:6px;} }

@media (max-width:720px){ .hero{ padding:5.5rem 0 4rem; min-height:auto; } }

/* reveal-on-scroll (progressive enhancement; content visible without JS) */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--d, 0) * 70ms); }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero__spark, .hero__scroll-cue span{ animation:none; }
}

/* ================= GAUGE (signature stat dial) ================= */
.panel-strip{ background: var(--ink-steel-2); padding: 3rem 0; border-top:1px solid var(--line-soft-2); }
.panel-strip__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.gauge{ text-align:center; color:#dbe2e8; }
.gauge__svg{ width:112px; height:112px; margin:0 auto; transform: scaleY(1); }
.gauge__track{ fill:none; stroke: rgba(255,255,255,.12); stroke-width:9; stroke-linecap:round; }
.gauge__fill{ fill:none; stroke: var(--arc-amber); stroke-width:9; stroke-linecap:round; transition: stroke-dashoffset 1.6s var(--ease); }
.gauge__readout{ margin-top:-2.6rem; font-family: var(--font-mono); direction:ltr; unicode-bidi:isolate; }
.gauge__value{ font-size:1.6rem; font-weight:700; color:#fff; }
.gauge__unit{ font-size:1rem; color: var(--arc-amber); }
.gauge__label{ margin:.6rem 0 0; font-size:.86rem; color: var(--gauge-gray); }
@media (max-width:860px){ .panel-strip__grid{ grid-template-columns:repeat(2,1fr); row-gap:2rem; } }

/* ================= QUICK ACCESS ================= */
.quick-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.quick-card{
  position:relative; display:block; background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md);
  padding:1.9rem 1.6rem 2.2rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.quick-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(15,30,42,.28); border-color: transparent; }
.quick-card__icon{ display:inline-flex; width:52px; height:52px; align-items:center; justify-content:center; border-radius:14px; background: rgba(31,76,116,.09); color: var(--blueprint); margin-bottom:1rem; }
.quick-card__icon svg{ width:26px; height:26px; }
.quick-card h3{ font-size:1.05rem; }
.quick-card p{ font-size:.9rem; margin-bottom:0; }
.quick-card__arrow{ position:absolute; left:1.6rem; bottom:1.6rem; width:20px; height:20px; color: var(--arc-amber); opacity:0; transform: translateX(6px); transition: opacity .25s, transform .25s; }
html[dir="rtl"] .quick-card__arrow{ transform: translateX(-6px); }
.quick-card:hover .quick-card__arrow{ opacity:1; transform:none; }
@media (max-width:980px){ .quick-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .quick-grid{ grid-template-columns:1fr; } }

/* ================= ABOUT TEASER ================= */
.about-teaser__grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:3rem; align-items:center; }
.check-list{ list-style:none; margin:1.25rem 0; display:flex; flex-direction:column; gap:.6rem; }
.check-list li{ display:flex; align-items:center; gap:.6em; color: var(--charcoal-text); font-weight:600; font-size:.95rem; }
.check-list svg{ width:20px; height:20px; color: var(--success); flex-shrink:0; }
.weld-seam-art{ background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-lg); padding:1.5rem; }
.draw-path{ stroke-dasharray:400; stroke-dashoffset:400; animation: draw 2.4s var(--ease) .3s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){ .draw-path{ animation:none; stroke-dashoffset:0; } }
@media (max-width:860px){ .about-teaser__grid{ grid-template-columns:1fr; } .about-teaser__visual{ max-width:320px; margin:0 auto; } }

/* ================= NEWS ================= */
.news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.news-card{
  display:block; background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md); padding:1.6rem;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); position:relative; overflow:hidden;
}
.news-card::before{ content:''; position:absolute; top:0; right:0; width:4px; height:100%; background: var(--arc-amber); transform:scaleY(0); transform-origin:top; transition: transform .3s var(--ease); }
.news-card:hover{ transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(15,30,42,.28); }
.news-card:hover::before{ transform:scaleY(1); }
.news-card__cat{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; color: var(--blueprint); text-transform:uppercase; }
.news-card h3{ font-size:1.05rem; margin:.6rem 0; }
.news-card p{ font-size:.9rem; }
.news-card__date{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; font-size:.78rem; color: var(--gauge-gray); display:inline-block; }
@media (max-width:980px){ .news-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .news-grid{ grid-template-columns:1fr; } }

.link-more{ display:inline-flex; align-items:center; gap:.4em; font-weight:700; color: var(--blueprint); white-space:nowrap; }
.link-more svg{ width:16px; height:16px; transition: transform .25s; }
.link-more:hover svg{ transform: translateX(-4px); }
html[dir="rtl"] .link-more:hover svg{ transform: translateX(4px); }

/* ================= EVENTS ================= */
.event-list{ display:flex; flex-direction:column; gap:1rem; }
.event-row{
  display:flex; align-items:center; gap:1.5rem; background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md);
  padding:1.2rem 1.5rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.event-row:hover{ transform: translateX(-4px); box-shadow: 0 20px 34px -22px rgba(15,30,42,.25); border-color:transparent; }
html[dir="rtl"] .event-row:hover{ transform: translateX(4px); }
.event-row__date{ font-family: var(--font-mono); direction:ltr; unicode-bidi:isolate; display:flex; flex-direction:column; align-items:center; justify-content:center; width:64px; height:64px; border-radius:12px; background: rgba(31,76,116,.08); color: var(--blueprint); flex-shrink:0; }
.event-row__date strong{ font-size:1.3rem; line-height:1; }
.event-row__date small{ font-size:.68rem; letter-spacing:.04em; }
.event-row__body{ flex:1; min-width:0; }
.event-row__type{ font-size:.72rem; font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color: var(--arc-amber-deep); }
.event-row__body h3{ margin:.3rem 0; font-size:1rem; }
.event-row__meta{ display:flex; align-items:center; gap:.4em; font-size:.85rem; color: var(--muted-text); }
.event-row__meta svg{ width:14px; height:14px; flex-shrink:0; }
.event-row__arrow{ width:18px; height:18px; color: var(--gauge-gray); flex-shrink:0; }
.event-row--past{ opacity:.75; }

/* ================= CTA BAND ================= */
.cta-band{ background: linear-gradient(120deg, var(--blueprint) 0%, var(--ink-steel) 100%); color:#fff; padding:3.5rem 0; }
.cta-band__inner{ display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cta-band__inner h2{ margin-bottom:.4rem; font-size:1.6rem; }
.cta-band__inner p{ color:#c7d3dc; margin:0; max-width:520px; }
@media (max-width:720px){ .cta-band__inner{ flex-direction:column; text-align:center; } }

/* ================= CONTENT BLOCKS (about pages) ================= */
.content-block h2{ font-size:1.4rem; color:var(--ink-steel); }
.content-block p{ font-size:1rem; }
.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin:2.5rem 0; text-align:center; }
.stat-row div{ background: var(--plate-mist); border-radius: var(--radius-md); padding:1.4rem .5rem; }
.stat-row strong{ display:block; font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; font-size:1.5rem; color: var(--blueprint); }
.stat-row span{ font-size:.82rem; color: var(--muted-text); }
@media (max-width:640px){ .stat-row{ grid-template-columns:repeat(2,1fr); } }

.notice-box{ background: #FFF4E6; border:1px solid #F1D3A6; color:#8A5A17; border-radius: var(--radius-sm); padding:1rem 1.25rem; font-size:.9rem; margin-bottom:2rem; }

.article-list{ display:flex; flex-direction:column; gap:1.25rem; margin-bottom:2rem; }
.article-item{ display:flex; gap:1.25rem; padding-bottom:1.25rem; border-bottom:1px dashed #DDE2E7; }
.article-item__num{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; flex-shrink:0; width:88px; color: var(--arc-amber-deep); font-weight:700; }
.article-item h3{ font-size:1rem; margin-bottom:.35rem; }
.article-item p{ font-size:.92rem; margin:0; }

.link-cards{ display:flex; gap:1rem; flex-wrap:wrap; }
.link-card{ display:flex; align-items:center; gap:.6em; background:#fff; border:1px solid #E7EAEE; border-radius:999px; padding:.7em 1.3em; font-weight:700; font-size:.9rem; transition: transform .25s, box-shadow .25s; }
.link-card svg{ width:20px; height:20px; color: var(--blueprint); }
.link-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 28px -18px rgba(15,30,42,.3); }

/* ================= BOARD ================= */
.board-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.board-card{ background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md); padding:1.75rem; text-align:center; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.board-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 38px -22px rgba(15,30,42,.28); }
.board-card__badge{ display:inline-flex; width:56px; height:56px; align-items:center; justify-content:center; border-radius:50%; background: var(--ink-steel); color: var(--arc-amber); font-family:var(--font-mono); font-weight:700; margin-bottom:1rem; }
.board-card h3{ font-size:1rem; margin-bottom:.2rem; }
.board-card__role{ color: var(--arc-amber-deep); font-weight:700; font-size:.85rem; margin-bottom:.6rem; }
.board-card__bio{ font-size:.85rem; margin:0; }
@media (max-width:860px){ .board-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .board-grid{ grid-template-columns:1fr; } }

/* ================= LICENSE ================= */
.license-card{ display:flex; gap:1.5rem; align-items:flex-start; background: var(--plate-mist); border-radius: var(--radius-md); padding:1.75rem; margin-bottom:2rem; }
.license-card__icon{ width:52px; height:52px; flex-shrink:0; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; color: var(--blueprint); }
.license-card__icon svg{ width:26px; height:26px; }
.license-card h3{ font-size:1.05rem; }
.license-card p{ font-size:.9rem; margin:0 0 .4rem; }
.muted{ color: var(--gauge-gray); font-size:.85rem !important; }

/* ================= ORG CHART (pure-CSS tree) ================= */
.org-section{ overflow-x:auto; }
.org-scroll{ overflow-x:auto; padding-bottom:1rem; }
.org-hint{ text-align:center; font-size:.82rem; color: var(--gauge-gray); }
.org-tree, .org-tree ul{ display:table; margin:0 auto; padding-top:24px; position:relative; }
.org-tree li{ display:table-cell; text-align:center; list-style:none; vertical-align:top; padding:24px 14px 0; position:relative; }
.org-tree li::before, .org-tree li::after{ content:''; position:absolute; top:0; right:50%; border-top:2px solid var(--gauge-gray); width:50%; height:24px; }
.org-tree li::after{ right:auto; left:50%; border-right:none; border-left:2px solid var(--gauge-gray); }
.org-tree li:only-child::after, .org-tree li:only-child::before{ display:none; }
.org-tree li:only-child{ padding-top:0; }
.org-tree li:first-child::before, .org-tree li:last-child::after{ border:0 none; }
.org-tree li:last-child::before{ border-left:0; border-right:2px solid var(--gauge-gray); border-radius:0 6px 0 0; }
.org-tree li:first-child::after{ border-radius:6px 0 0 0; }
.org-tree > li{ padding-top:0; }
.org-tree > li::before, .org-tree > li::after{ display:none; }
.org-tree ul::before{ content:''; position:absolute; top:0; right:50%; height:24px; border-right:2px solid var(--gauge-gray); }
.org-node{ display:inline-block; min-width:150px; background:#fff; border:2px solid var(--blueprint); border-radius: var(--radius-sm); padding:.8rem 1rem; }
.org-node--top{ background: var(--ink-steel); border-color: var(--arc-amber); color:#fff; }
.org-node--top span{ color: var(--gauge-gray); }
.org-node--sm{ min-width:130px; border-color:#C7D3DC; }
.org-node strong{ display:block; font-size:.88rem; }
.org-node span{ font-size:.74rem; color: var(--muted-text); }

/* ================= MEMBERSHIP ================= */
.membership-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; }
.membership-card{ position:relative; background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md); padding:1.9rem 1.6rem; display:flex; flex-direction:column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.membership-card.is-featured{ border-color: var(--arc-amber); box-shadow: 0 20px 40px -24px rgba(232,135,30,.4); }
.membership-card:hover{ transform: translateY(-6px); }
.membership-card__tag{ position:absolute; top:-12px; right:1.5rem; background: var(--arc-amber); color:#191008; font-size:.7rem; font-weight:800; padding:.3em .8em; border-radius:999px; }
.membership-card h3{ font-size:1.1rem; }
.membership-card__fee{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; text-align:right; color: var(--blueprint); font-weight:700; font-size:.92rem; }
.membership-card ul{ list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:1rem 0 1.5rem; flex:1; }
.membership-card ul li{ display:flex; align-items:flex-start; gap:.5em; font-size:.85rem; color: var(--charcoal-text); }
.membership-card ul svg{ width:16px; height:16px; color: var(--success); flex-shrink:0; margin-top:.2em; }
@media (max-width:980px){ .membership-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .membership-grid{ grid-template-columns:1fr; } }

/* ================= FORMS ================= */
.alert{ padding:1em 1.25em; border-radius: var(--radius-sm); font-size:.9rem; margin-bottom:1.5rem; }
.alert:empty{ display:none; }
.alert--success{ background: var(--success-bg); color: var(--success); }
.alert--error{ background: var(--error-bg); color: var(--error); }
.form-card{ background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-lg); padding:2rem; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.5rem; }
.form-field{ display:flex; flex-direction:column; gap:.4rem; }
.form-field--full{ grid-column:1 / -1; }
.form-field label{ font-size:.86rem; font-weight:700; color: var(--ink-steel); }
.form-field input, .form-field select, .form-field textarea{
  border:1.5px solid #DDE2E7; border-radius: var(--radius-sm); padding:.75em .9em; font-size:.95rem;
  background:#fff; color: var(--charcoal-text); transition: border-color .2s, box-shadow .2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  border-color: var(--blueprint); box-shadow: 0 0 0 3px rgba(31,76,116,.14); outline:none;
}
.field-error{ color: var(--error); font-size:.8rem; }
.form-row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; font-size:.88rem; }
.checkbox-label{ display:flex; align-items:center; gap:.5em; }
.link-inline{ color: var(--blueprint); font-weight:700; }
@media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } }

.auth-section{ display:flex; justify-content:center; }
.auth-card{ max-width:460px; margin:0 auto; }
.auth-switch{ text-align:center; margin:1.25rem 0 0; font-size:.9rem; }
.auth-switch a{ color: var(--blueprint); font-weight:700; }

/* ================= RESEARCH / COURSES ================= */
.research-list{ display:flex; flex-direction:column; gap:1.5rem; }
.research-item{ display:flex; gap:1.5rem; border-bottom:1px solid #E7EAEE; padding-bottom:1.5rem; }
.research-item__year{ font-family:var(--font-mono); direction:ltr; unicode-bidi:isolate; width:70px; flex-shrink:0; font-size:1.1rem; font-weight:700; color: var(--blueprint); }
.research-item__body h3{ font-size:1.05rem; margin:.4rem 0; }
.research-item__body p{ font-size:.92rem; margin:0; }
.tag{ display:inline-block; font-size:.72rem; font-weight:700; padding:.25em .8em; border-radius:999px; background:#EEF1F4; color: var(--muted-text); }
.tag--live{ background:#FFF1DC; color: var(--arc-amber-deep); }
.tag--done{ background: var(--success-bg); color: var(--success); }

.course-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.course-card{ background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md); padding:1.75rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.course-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 38px -22px rgba(15,30,42,.25); }
.course-card h3{ font-size:1.05rem; }
.course-card__meta{ list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:1rem 0 1.5rem; }
.course-card__meta li{ display:flex; align-items:center; gap:.5em; font-size:.87rem; color: var(--muted-text); }
.course-card__meta svg{ width:16px; height:16px; color: var(--blueprint); flex-shrink:0; }
@media (max-width:720px){ .course-grid{ grid-template-columns:1fr; } }

/* ================= PUBLICATIONS ================= */
.filter-row{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:2.5rem; }
.filter-chip{ padding:.5em 1.2em; border-radius:999px; border:1.5px solid #DDE2E7; font-size:.85rem; font-weight:700; color: var(--muted-text); transition: all .2s; }
.filter-chip:hover{ border-color: var(--blueprint); color: var(--blueprint); }
.filter-chip.is-active{ background: var(--ink-steel); border-color: var(--ink-steel); color:#fff; }

.pub-list{ display:flex; flex-direction:column; gap:1rem; }
.pub-row{ display:flex; align-items:center; gap:1.25rem; background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md); padding:1.1rem 1.4rem; transition: box-shadow .25s, transform .25s; }
.pub-row:hover{ box-shadow: 0 18px 32px -22px rgba(15,30,42,.25); transform: translateY(-3px); }
.pub-row__icon{ width:44px; height:44px; flex-shrink:0; border-radius:10px; background: rgba(31,76,116,.08); color: var(--blueprint); display:flex; align-items:center; justify-content:center; }
.pub-row__icon svg{ width:22px; height:22px; }
.pub-row__body{ flex:1; min-width:0; }
.pub-row__body h3{ font-size:.98rem; margin:.35rem 0; }
.pub-row__meta{ font-size:.8rem; color: var(--gauge-gray); font-family:var(--font-mono); }
.empty-state{ text-align:center; color: var(--gauge-gray); padding:2rem 0; }

/* ================= GALLERY + LIGHTBOX ================= */
.gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.25rem; }
.gallery-item{ position:relative; border:none; padding:0; aspect-ratio:1/1; border-radius: var(--radius-md); overflow:hidden; background: var(--ink-steel); }
.gallery-item--tone1{ background: linear-gradient(135deg, #1F4C74, #0F1E2A); }
.gallery-item--tone2{ background: linear-gradient(135deg, #E8871E, #7A3B0C); }
.gallery-item--tone3{ background: linear-gradient(135deg, #3E7CA6, #16293C); }
.gallery-item--tone4{ background: linear-gradient(135deg, #8792A0, #1B2530); }
.gallery-item__glyph{ position:absolute; inset:0; background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 55%); transition: transform .4s var(--ease); }
.gallery-item:hover .gallery-item__glyph{ transform: scale(1.15); }
.gallery-item__info{ position:absolute; inset-inline:0; bottom:0; padding:1rem; text-align:right; background: linear-gradient(to top, rgba(0,0,0,.65), transparent); color:#fff; display:flex; flex-direction:column; }
.gallery-item__info strong{ font-size:.9rem; }
.gallery-item__info small{ font-size:.74rem; color: var(--gauge-gray); }
@media (max-width:980px){ .gallery-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } }

.lightbox{ position:fixed; inset:0; background: rgba(10,17,25,.92); z-index:200; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: opacity .3s, visibility .3s; }
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__panel{ max-width:520px; width:90%; text-align:center; color:#fff; }
.lightbox__visual{ aspect-ratio:16/10; border-radius: var(--radius-md); margin-bottom:1.25rem; background: linear-gradient(135deg, var(--blueprint), var(--ink-steel)); }
.lightbox__visual--tone1{ background: linear-gradient(135deg, #1F4C74, #0F1E2A); }
.lightbox__visual--tone2{ background: linear-gradient(135deg, #E8871E, #7A3B0C); }
.lightbox__visual--tone3{ background: linear-gradient(135deg, #3E7CA6, #16293C); }
.lightbox__visual--tone4{ background: linear-gradient(135deg, #8792A0, #1B2530); }
.lightbox__close{ position:absolute; top:2rem; left:2rem; background:none; border:2px solid rgba(255,255,255,.3); color:#fff; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.lightbox__close svg{ width:20px; height:20px; }

/* ================= BRANCHES ================= */
.branch-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.branch-card{ background:#fff; border:1px solid #E7EAEE; border-radius: var(--radius-md); padding:1.75rem; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.branch-card:hover{ transform: translateY(-5px); box-shadow: 0 22px 38px -22px rgba(15,30,42,.25); }
.branch-card h3{ font-size:1.05rem; }
.branch-card ul{ list-style:none; display:flex; flex-direction:column; gap:.5rem; margin:1rem 0; }
.branch-card ul li{ display:flex; align-items:flex-start; gap:.5em; font-size:.87rem; color: var(--muted-text); }
.branch-card ul svg{ width:16px; height:16px; color: var(--blueprint); flex-shrink:0; margin-top:.2em; }
.branch-card__contact{ display:flex; flex-direction:column; gap:.3rem; direction:ltr; unicode-bidi:isolate; text-align:left; font-family:var(--font-mono); font-size:.85rem; }
.branch-card__contact a:hover{ color: var(--arc-amber-deep); }
@media (max-width:860px){ .branch-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .branch-grid{ grid-template-columns:1fr; } }

/* ================= CONTACT ================= */
.contact-grid{ display:grid; grid-template-columns: .8fr 1.2fr; gap:2.5rem; }
.contact-info{ display:flex; flex-direction:column; gap:1.5rem; }
.contact-info__item{ display:flex; gap:1rem; }
.contact-info__item svg{ width:24px; height:24px; color: var(--arc-amber-deep); flex-shrink:0; }
.contact-info__item strong{ display:block; font-size:.92rem; margin-bottom:.2rem; }
.contact-info__item span{ font-size:.87rem; color: var(--muted-text); }
.ic-wrap{ width:24px; height:24px; flex-shrink:0; display:inline-flex; }
.contact-map{ position:relative; height:200px; border-radius: var(--radius-md); overflow:hidden; background: var(--plate-mist); border:1px solid #E7EAEE; }
.contact-map__grid{ position:absolute; inset:0; background-image: linear-gradient(#DDE2E7 1px, transparent 1px), linear-gradient(90deg, #DDE2E7 1px, transparent 1px); background-size:24px 24px; }
.contact-map__pin{ position:absolute; top:45%; right:48%; width:32px; height:32px; color: var(--arc-amber-deep); }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; } }

/* ================= EVENT DETAIL ================= */
.event-detail-meta{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin:2rem 0; }
.event-detail-meta > div{ display:flex; gap:.8rem; background: var(--plate-mist); border-radius: var(--radius-md); padding:1.1rem; }
.event-detail-meta svg{ width:22px; height:22px; color: var(--blueprint); flex-shrink:0; }
.event-detail-meta strong{ display:block; font-size:.85rem; }
.event-detail-meta span{ font-size:.85rem; color: var(--muted-text); }
@media (max-width:720px){ .event-detail-meta{ grid-template-columns:1fr; } }

/* ================= FOOTER ================= */
.site-footer{ background: var(--ink-steel); color: #c7d0d8; margin-top:0; }
.footer__grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap:2.5rem; padding:3.5rem 0 2.5rem; }
.footer__about p{ font-size:.88rem; color: var(--gauge-gray); }
.brand--footer{ margin-bottom:1rem; }
.social-row{ display:flex; gap:.75rem; margin-top:1rem; }
.social-row a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; transition: background .2s, border-color .2s; }
.social-row a:hover{ background: var(--arc-amber); border-color: var(--arc-amber); color:#191008; }
.footer__col h4{ color:#fff; font-size:.95rem; margin-bottom:1.1rem; }
.footer__col ul{ list-style:none; display:flex; flex-direction:column; gap:.7rem; }
.footer__col ul a{ font-size:.87rem; color: var(--gauge-gray); transition: color .2s; }
.footer__col ul a:hover{ color: var(--arc-amber); }
.contact-list{ margin-bottom:1.25rem; }
.contact-list li{ display:flex; align-items:flex-start; gap:.5em; font-size:.85rem; }
.footer__bottom{ border-top:1px solid var(--line-soft-2); }
.footer__bottom-inner{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem 0; font-size:.8rem; color: var(--gauge-gray); flex-wrap:wrap; gap:.5rem; }
@media (max-width:980px){ .footer__grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

/* ================= BACK TO TOP ================= */
.back-to-top{
  position:fixed; bottom:1.75rem; left:1.75rem; width:48px; height:48px; border-radius:50%;
  background: var(--ink-steel); color: var(--arc-amber); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transform: translateY(10px);
  transition: opacity .25s, visibility .25s, transform .25s; z-index:70;
}
.back-to-top.is-visible{ opacity:1; visibility:visible; transform:none; }
.back-to-top svg{ width:20px; height:20px; }

/* ================= ICONS (fallback text-glyphs for topbar) ================= */
.ic{ display:inline-block; width:1em; }
.ic-phone::before{ content:'\260E'; }
.ic-mail::before{ content:'\2709'; }
.ic-insta::before{ content:'\25CE'; }
.ic-linkedin::before{ content:'in'; font-weight:700; font-size:.8em; }
.ic-telegram::before{ content:'\27A4'; }