/*
Theme Name: Yegane Portfolio
Author: یگانه نوروزی
Description: قالب شخصی پورتفولیو – فارسی، راست‌چین و ریسپانسیو
Version: 1.8.0
Text Domain: yegane
*/

@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-Thin.woff2") format("woff2");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-ExtraLight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Estedad";
  src: url("font/estedad/woff2/Estedad-FD-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palette: Sapphire · Royal Blue · Quicksand · Swan Wing · Shellstone */
  --sapphire: #3C5070;
  --royal: #112250;
  --quicksand: #E0C58F;
  --swan: #F5F0E9;
  --shell: #D9CBC2;

  --bg: var(--swan);
  --surface: #FBF8F4;
  --surface-2: #EFE7DE;
  --line: #E2D6CC;
  --text: var(--royal);
  --text-2: var(--sapphire);
  --text-3: #97A1B6;
  --dark: var(--royal);
  --dark-2: #1A2D5E;
  --dark-line: #2E4170;
  --on-dark: var(--swan);
  --on-dark-2: #B9C1D6;
  --on-dark-3: #8E9BBB;
  --accent: var(--quicksand);
  --accent-deep: #B8975A;
  --green: #C9A45C;
  --radius: 24px;
  --radius-sm: 14px;
  --container: 1200px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Estedad", Tahoma, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.8;
  font-size: 16px;
  direction: rtl;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
button { font: inherit; cursor: pointer; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: 15px; transition: transform .3s var(--ease), background .3s, color .3s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-dark { background: var(--dark); color: var(--on-dark); }
.btn-dark:hover { background: var(--sapphire); }
.btn-light { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn-white { background: var(--on-dark); color: var(--dark); }
.btn .arrow { transition: transform .3s var(--ease); }
.btn:hover .arrow { transform: translateX(-4px); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--line); font-size: 13px; color: var(--text-2); font-weight: 500;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); position: relative; }
.dot::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green);
  animation: ping 1.8s infinite;
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- Header ---------- */
.site-header {
  position: fixed; top: 16px; inset-inline: 0; z-index: 50;
}
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(251,248,244,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 8px 8px 8px;
  padding-inline-start: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.logo-mask { display: inline-block; aspect-ratio: 640 / 385; -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.brand-logo { width: 44px; background: linear-gradient(135deg, var(--sapphire), var(--royal) 60%); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 50%; background: var(--dark); color: var(--on-dark);
  display: grid; place-items: center; font-size: 15px; font-weight: 800;
}
.nav-links { display: flex; gap: 4px; }
.nav-links a {
  padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--text-2); font-weight: 500;
  transition: background .2s, color .2s;
}
.nav-links a:hover { background: var(--surface-2); color: var(--text); }
.nav-cta { padding: 10px 20px; font-size: 14px; }
.menu-toggle {
  display: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--dark);
  color: var(--on-dark); place-items: center;
}
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
  display: block; width: 16px; height: 2px; background: var(--on-dark); border-radius: 2px; position: relative;
  transition: transform .3s var(--ease), background .3s;
}
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 0; }
.menu-toggle span::before { top: -5px; }
.menu-toggle span::after { top: 5px; }
.menu-open .menu-toggle span { background: transparent; }
.menu-open .menu-toggle span::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-toggle span::after { transform: translateY(-5px) rotate(-45deg); }

.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-circle {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.nav-circle svg { width: 19px; height: 19px; }
.nav-circle--gold { background: linear-gradient(145deg, #F1E3C4, var(--accent) 45%, var(--accent-deep)); color: var(--royal); box-shadow: 0 8px 20px -8px rgba(184,151,90,.8); }
.nav-circle:hover { transform: translateY(-2px) rotate(-8deg); }

/* هدر داخل قاب هیرو (فقط صفحه اصلی، پیش از اسکرول) */
.site-header--hero:not(.is-stuck) { position: absolute; top: 14px; inset-inline: 14px; }
.site-header--hero:not(.is-stuck) .container { max-width: none; padding-inline: clamp(18px, 3vw, 44px); }
.site-header--hero:not(.is-stuck) .nav {
  display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "links brand actions"; align-items: start;
  background: none; border: 0; border-radius: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.site-header--hero:not(.is-stuck) .brand { grid-area: brand; height: 58px; color: var(--royal); font-size: 18px; }
.site-header--hero:not(.is-stuck) .nav-links { grid-area: links; justify-self: start; margin-top: 34px; }
.site-header--hero:not(.is-stuck) .nav-links a { color: var(--on-dark-2); }
.site-header--hero:not(.is-stuck) .nav-links a:hover { color: var(--on-dark); background: rgba(245,240,233,.08); }
.site-header--hero:not(.is-stuck) .nav-actions { grid-area: actions; justify-self: end; margin-top: 28px; }
.site-header--hero:not(.is-stuck) .nav-cta { background: transparent; border-color: rgba(245,240,233,.4); color: var(--on-dark); }
.site-header--hero:not(.is-stuck) .nav-cta:hover { background: rgba(245,240,233,.1); }
.site-header--hero:not(.is-stuck) .menu-toggle { background: rgba(245,240,233,.1); border: 1px solid rgba(245,240,233,.3); }
.site-header--hero.is-stuck { animation: dropIn .5s var(--ease) both; }
@keyframes dropIn { from { transform: translateY(-130%); } }

.mobile-menu {
  display: none; margin-top: 10px; background: var(--on-dark); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px;
}
.mobile-menu a { display: block; padding: 12px 16px; border-radius: 12px; font-weight: 500; }
.mobile-menu a:hover { background: var(--surface-2); }
.mobile-menu .btn { justify-content: center; margin-top: 8px; width: 100%; }

/* ---------- Sections ---------- */
section { padding-block: 96px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; flex-wrap: wrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); font-weight: 600; margin-bottom: 14px; }
.eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent-deep); border-radius: 2px; }
.h2 { font-size: clamp(24px, 2.7vw, 36px); line-height: 1.45; font-weight: 800; letter-spacing: -.3px; }
.h2 .muted { color: var(--text-3); }
.lead { color: var(--text-2); font-size: 15.5px; max-width: 460px; }

/* ---------- Hero (framed stage) ---------- */
.hero-stage { padding: 14px 0 30px; }
.hero-frame {
  --frame-pad: clamp(18px, 3vw, 44px);
  --device: clamp(170px, min(19vw, 30vh), 290px);
  position: relative; margin-inline: 14px; border-radius: 36px; overflow: hidden; isolation: isolate;
  height: calc(100svh - 28px); min-height: 680px; max-height: 980px;
  background: radial-gradient(ellipse 80% 70% at 50% 18%, #23386b 0%, var(--royal) 48%, #081232 100%);
  color: var(--on-dark);
}

/* بریدگی‌های قاب */
.notch { position: absolute; z-index: 3; background: var(--bg); pointer-events: none; }
.notch-top {
  top: -1px; left: 50%; transform: translateX(-50%);
  width: clamp(250px, 30vw, 430px); height: 66px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 58px) 100%, 58px 100%);
}
.notch-side { top: 46%; width: 42px; height: clamp(160px, 26%, 260px); }
.notch-right { right: -1px; clip-path: polygon(100% 0, 100% 100%, 0 calc(100% - 42px), 0 42px); }
.notch-left { left: -1px; clip-path: polygon(0 0, 100% 42px, 100% calc(100% - 42px), 0 100%); }

/* صحنه */
.hero-scene { position: absolute; inset: 0; z-index: 0; translate: calc(var(--mx, 0) * -6px) calc(var(--my, 0) * -4px); transition: translate .6s var(--ease); }
.scene-glow::after {
  content: ""; position: absolute; inset: 15% 25% 35%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(224,197,143,.22), rgba(60,80,112,.18) 60%, transparent);
}
.scene-glow {
  position: absolute; left: 50%; bottom: 8%; width: min(1000px, 120%); aspect-ratio: 16 / 10; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(224,197,143,.26), rgba(224,197,143,.06) 55%, transparent);
}
.arch { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 999px 999px 0 0; }
.arch-back {
  bottom: 22%; width: clamp(300px, 34vw, 520px); height: 74%;
  border: 1px solid rgba(185,193,214,.12); border-bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(245,240,233,.04) 0 2px, transparent 2px 16px),
    linear-gradient(to bottom, rgba(60,80,112,.45), rgba(17,34,80,0) 85%);
}
.arch-front {
  bottom: 22%; width: clamp(190px, 20vw, 310px); height: 58%;
  background: linear-gradient(to bottom, rgba(6,14,40,.9), rgba(10,21,52,.55));
  box-shadow: inset 0 0 0 1px rgba(224,197,143,.14), 0 0 80px rgba(6,14,40,.6);
}
.arch-front i { position: absolute; bottom: 0; width: 1px; height: 70%; background: linear-gradient(to top, rgba(224,197,143,.3), transparent); }
.arch-front i:first-child { right: 14%; }
.arch-front i:last-child { left: 14%; }
.dunes { position: absolute; left: 0; bottom: 0; width: 100%; height: 44%; }

/* متن */
.hero-copy {
  position: relative; z-index: 4; text-align: center; max-width: 1100px; margin-inline: auto;
  padding: clamp(120px, 15vh, 150px) 24px 0;
}
.hero-hello { color: var(--accent); font-weight: 600; font-size: 15px; animation: heroIn 1s var(--ease) both; }
.hero-copy h1 {
  margin-top: 12px; font-size: clamp(24px, 2.7vw, 40px); font-weight: 600; line-height: 1.55; letter-spacing: -.3px;
  background: linear-gradient(180deg, #fff 30%, #c9cfe0); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroIn 1s .1s var(--ease) both;
}
.hero-sub { margin-top: 16px; font-size: 15px; color: var(--on-dark-2); animation: heroIn 1s .2s var(--ease) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(24px); } }

/* شیء مرکزی روی سکو */
.hero-object {
  position: absolute; z-index: 2; left: 50%; bottom: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  translate: calc(var(--mx, 0) * 12px) calc(var(--my, 0) * 6px); transition: translate .6s var(--ease);
  animation: objIn 1.2s .3s var(--ease) both;
}
@keyframes objIn { from { opacity: 0; transform: translateX(-50%) translateY(60px); } }
.device {
  position: relative; z-index: 2; width: var(--device); aspect-ratio: 1; border-radius: 50%; padding: calc(var(--device) * .055);
  margin-bottom: calc(var(--device) * -.06);
  background: conic-gradient(from 210deg, #F1E3C4, #E0C58F 18%, #B8975A 38%, #7d6438 52%, #B8975A 66%, #E0C58F 82%, #F1E3C4);
  box-shadow: 0 40px 70px -25px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.35);
  animation: hover 7s ease-in-out infinite;
}
.device::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
  background: linear-gradient(90deg, #6b5530, #a88a50); transform: translateX(-7%) scale(.98);
}
@keyframes hover { 50% { transform: translateY(-10px); } }
.device-face {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; display: grid; place-items: center;
  background:
    radial-gradient(circle, rgba(245,240,233,.5) 1.1px, transparent 1.7px) 0 0 / 7px 7px,
    radial-gradient(circle at 35% 28%, #51668f, #1a2d5e 58%, #0b1638);
  box-shadow: inset 0 10px 30px rgba(0,0,0,.65), inset 0 -6px 20px rgba(224,197,143,.12);
}
.device-face::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 35%, rgba(245,240,233,.18) 48%, transparent 60%);
  background-size: 250% 100%; animation: sheen 6s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.device-logo-wrap {
  position: relative; z-index: 1; width: 74%; display: grid;
  filter: drop-shadow(0 0 12px rgba(224,197,143,.55)) drop-shadow(0 6px 18px rgba(0,0,0,.5));
  animation: logoGlow 5s ease-in-out infinite;
}
.device-logo { width: 100%; background: linear-gradient(160deg, #F1E3C4 10%, var(--accent) 45%, var(--accent-deep) 90%); }
@keyframes logoGlow { 50% { filter: drop-shadow(0 0 22px rgba(224,197,143,.8)) drop-shadow(0 6px 18px rgba(0,0,0,.5)); } }
.pedestal {
  position: relative; z-index: 1; width: calc(var(--device) * .8); height: clamp(100px, 20vh, 220px);
  background: linear-gradient(90deg, #c4a466 0%, #E0C58F 36%, #d6ba80 76%, #9c7f47 76.5%, #846a3a 100%);
  box-shadow: 0 -2px 0 rgba(255,255,255,.25) inset;
}
.pedestal::before { content: ""; position: absolute; inset: 0 0 auto; height: 10px; background: linear-gradient(to bottom, rgba(255,255,255,.35), transparent); }
.pedestal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(8,18,50,.45)); }

/* نوار پایین */
.hero-bottom {
  position: absolute; z-index: 4; bottom: 26px; inset-inline: var(--frame-pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px;
  animation: heroIn 1s .45s var(--ease) both;
}
.scroll-cue { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.ghost-pill, .ghost-circle { border: 1px solid rgba(245,240,233,.38); color: var(--on-dark); transition: background .25s, border-color .25s; }
.ghost-pill { padding: 7px 16px; border-radius: 999px; font-size: 13.5px; }
.ghost-circle { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; direction: ltr; }
.ghost-circle svg { width: 18px; height: 18px; }
.scroll-cue .ghost-circle svg { animation: nudge 1.8s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateY(4px); } }
.ghost-circle:hover, .scroll-cue:hover .ghost-pill, .scroll-cue:hover .ghost-circle { background: rgba(245,240,233,.1); border-color: var(--accent); }
.hero-social { display: flex; gap: 10px; justify-self: end; }

.hero-bar {
  display: flex; align-items: center; gap: 16px; max-width: 760px; padding: 14px 16px;
  background: rgba(8,18,50,.6); border: 1px solid rgba(245,240,233,.12); border-radius: 18px;
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.6);
}
.bar-icon { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: rgba(245,240,233,.08); display: grid; place-items: center; }
.hero-bar p { font-size: 13px; line-height: 1.85; color: var(--on-dark-2); }
.hero-bar p b { color: var(--on-dark); font-weight: 700; }
.bar-actions { display: flex; gap: 8px; flex-shrink: 0; }
.bar-btn { padding: 8px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; border: 1px solid rgba(245,240,233,.38); transition: background .25s, transform .25s; }
.bar-btn:hover { transform: translateY(-2px); background: rgba(245,240,233,.1); }
.bar-btn--solid { background: var(--swan); color: var(--royal); border-color: var(--swan); }
.bar-btn--solid:hover { background: var(--accent); border-color: var(--accent); }

.hero-actions { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  .device, .device-logo-wrap, .device-face::after, .scroll-cue svg, .hero-hello, .hero-copy h1, .hero-sub, .hero-object, .hero-bottom { animation: none; }
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 40px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.stat b { display: block; font-size: clamp(24px, 2.6vw, 32px); font-weight: 900; line-height: 1.2; }
.stat span { color: var(--text-2); font-size: 14px; }

/* ---------- Marquee ---------- */
.marquee { padding-block: 26px; border-block: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.marquee-track { display: flex; gap: 48px; width: max-content; animation: marquee 32s linear infinite; }
.marquee-track span { display: inline-flex; align-items: center; gap: 48px; font-size: clamp(17px, 1.8vw, 22px); font-weight: 800; white-space: nowrap; }
.marquee-track span::after { content: "✦"; color: var(--accent-deep); font-size: .7em; }
@keyframes marquee { to { transform: translateX(50%); } }

/* ---------- Services (light glass stack) ---------- */
.svc { position: relative; overflow: clip; isolation: isolate; }
/* لکه‌های رنگی پشت کارت‌های شیشه‌ای */
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(28% 18% at 30% 14%, rgba(224,197,143,.55), transparent 70%),
    radial-gradient(26% 16% at 18% 42%, rgba(60,80,112,.16), transparent 70%),
    radial-gradient(30% 18% at 38% 68%, rgba(217,203,194,.9), transparent 70%),
    radial-gradient(26% 16% at 15% 90%, rgba(224,197,143,.45), transparent 70%);
}
.svc-layout { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 64px; align-items: start; }
.svc-intro { position: sticky; top: 120px; }
.svc .lead { margin-top: 14px; }
.svc-index { list-style: none; margin: 28px 0 30px; padding: 0; border-top: 1px solid var(--line); }
.svc-index a {
  display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line);
  color: var(--text-3); font-weight: 600; font-size: 14.5px; border-radius: 12px; transition: color .3s, background .3s, padding .4s var(--ease);
}
.svc-index span { font-size: 13px; font-weight: 700; color: var(--text-3); min-width: 22px; transition: color .3s; }
.svc-index a:hover { color: var(--text-2); }
.svc-index .is-active a { color: var(--royal); padding-inline-start: 22px; border-bottom-color: transparent; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.svc-index .is-active span { color: var(--accent-deep); }

.svc-stack { --stick: 120px; display: grid; gap: 28px; padding-bottom: 40px; }
.svc-card { position: sticky; top: calc(var(--stick) + var(--i) * 18px); }
.svc-inner {
  --p: 0; --tint: rgba(251,248,244,.55); --edge: rgba(226,214,204,.95);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 28px; align-items: stretch;
  min-height: 340px; padding: 30px; border-radius: 28px; overflow: hidden; color: var(--royal);
  background: linear-gradient(145deg, rgba(255,255,255,.8), rgba(255,255,255,.35) 60%), var(--tint);
  border: 1px solid var(--edge);
  backdrop-filter: blur(22px) saturate(1.2); -webkit-backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: 0 -16px 40px -30px rgba(17,34,80,.35), 0 30px 60px -40px rgba(17,34,80,.45), inset 0 1px 0 #fff;
  transform-origin: 50% 0; transform: scale(calc(1 - var(--p) * .05)); filter: brightness(calc(1 - var(--p) * .1));
  will-change: transform; transition: transform .1s linear;
}
.svc-inner::after {
  content: ""; position: absolute; width: 55%; aspect-ratio: 1; top: -40%; right: -15%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--halo, rgba(224,197,143,.4)), transparent); filter: blur(10px);
}
.svc-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; }
.svc-top { display: flex; justify-content: space-between; align-items: center; }
.svc-num {
  font-size: clamp(34px, 3.4vw, 46px); font-weight: 900; line-height: 1;
  background: linear-gradient(170deg, var(--accent), var(--accent-deep)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.svc-count { font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--text-2); background: rgba(255,255,255,.6); }
.svc-card h3 { font-size: clamp(20px, 1.9vw, 25px); font-weight: 800; line-height: 1.4; margin-top: auto; }
.svc-card h3 a:hover { color: var(--accent-deep); }
.svc-card p { font-size: 14.5px; max-width: 520px; color: var(--text-2); }
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.svc-tags li { padding: 5px 13px; border-radius: 999px; font-size: 13px; font-weight: 500; background: rgba(255,255,255,.65); border: 1px solid var(--line); }
.svc-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; align-self: flex-start; padding: 10px 22px; border-radius: 999px;
  background: var(--royal); color: var(--swan); transition: transform .3s var(--ease), background .3s;
}
.svc-link:hover { transform: translateY(-2px); background: var(--sapphire); }
.svc-link .arrow { transition: transform .3s var(--ease); }
.svc-link:hover .arrow { transform: translateX(-4px); }

/* ته‌رنگ شیشه هر کارت (فقط رنگ‌های پالت) */
.tone-dark .svc-inner { --tint: rgba(245,240,233,.6); }
.tone-light .svc-inner { --tint: rgba(217,203,194,.35); --halo: rgba(217,203,194,.9); }
.tone-sapphire .svc-inner { --tint: rgba(60,80,112,.07); --halo: rgba(60,80,112,.2); }
.tone-gold .svc-inner { --tint: rgba(224,197,143,.2); --edge: rgba(224,197,143,.7); --halo: rgba(224,197,143,.55); }

/* صحنه کوچک شبیه هیرو */
.svc-visual {
  position: relative; z-index: 1; border-radius: 22px; overflow: hidden; display: grid; place-items: end center;
  background: radial-gradient(ellipse 90% 70% at 50% 25%, #23386b, #0b1638 75%);
  border: 1px solid rgba(245,240,233,.1); box-shadow: inset 0 0 40px rgba(0,0,0,.4);
}
.v-arch {
  position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); width: 62%; height: 64%; border-radius: 999px 999px 0 0;
  background: repeating-linear-gradient(90deg, rgba(245,240,233,.05) 0 1px, transparent 1px 9px), linear-gradient(to bottom, rgba(60,80,112,.6), rgba(17,34,80,0));
  border: 1px solid rgba(185,193,214,.14); border-bottom: 0;
}
.v-glow { position: absolute; left: 50%; bottom: 18%; width: 140%; aspect-ratio: 1; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(224,197,143,.28), transparent); }
.v-dunes {
  position: absolute; inset: auto 0 0; height: 36%;
  background:
    radial-gradient(70% 90% at 15% 100%, #2a3f70 60%, transparent 61%),
    radial-gradient(80% 80% at 90% 100%, #1d2f5f 60%, transparent 61%),
    linear-gradient(to top, #0a1534, transparent);
}
.svc-icon {
  position: absolute; left: 50%; bottom: calc(18% + 54px); transform: translateX(-50%); z-index: 2;
  width: 104px; aspect-ratio: 1; border-radius: 50%; padding: 7px;
  background: conic-gradient(from 210deg, #F1E3C4, #E0C58F 18%, #B8975A 38%, #7d6438 52%, #B8975A 66%, #E0C58F 82%, #F1E3C4);
  box-shadow: 0 20px 34px -14px rgba(0,0,0,.8);
  transition: transform .6s var(--ease);
}
.svc-icon-face {
  width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  background: radial-gradient(circle, rgba(245,240,233,.4) 1px, transparent 1.5px) 0 0 / 6px 6px, radial-gradient(circle at 35% 28%, #51668f, #1a2d5e 58%, #0b1638);
  box-shadow: inset 0 6px 16px rgba(0,0,0,.6);
}
.svc-icon svg { width: 38px; height: 38px; filter: drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.v-pedestal {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 1; width: 78px; height: calc(18% + 58px);
  background: linear-gradient(90deg, #c4a466 0%, #E0C58F 36%, #d6ba80 76%, #9c7f47 76.5%, #846a3a 100%);
}
.v-pedestal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 30%, rgba(8,18,50,.5)); }
.svc-card:hover .svc-icon { transform: translateX(-50%) translateY(-8px); }

@media (max-width: 1024px) {
  .svc-layout { grid-template-columns: 1fr; gap: 40px; }
  .svc-intro { position: static; }
  .svc-index { display: none; }
  .svc-stack { --stick: 90px; }
}
@media (max-width: 680px) {
  .svc { margin-inline: 8px; border-radius: 28px; }
  .svc-inner { grid-template-columns: 1fr; min-height: 0; padding: 26px; border-radius: 26px; }
  .svc-visual { display: none; }
  .svc-card { top: calc(var(--stick) + var(--i) * 12px); }
  .svc-stack { gap: 18px; }
  .svc-link { align-self: stretch; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-inner { transform: none; filter: none; }
}

/* ---------- Process (wave) ---------- */
.process-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.tag-pill { display: inline-block; padding: 5px 16px; border-radius: 999px; border: 1px solid var(--accent-deep); color: var(--accent-deep); font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.process-head .lead { margin: 14px auto 26px; max-width: 520px; }

.wave-steps {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto 190px auto;
  max-width: 1080px; margin-inline: auto;
}
.wave-line { grid-column: 1 / -1; grid-row: 2; align-self: stretch; width: 100%; height: 100%; overflow: visible; }
[dir="rtl"] .wave-line { transform: scaleX(-1); }
.wave-line path {
  fill: none; stroke: var(--accent-deep); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.4s var(--ease);
}
.wave-steps.in-view .wave-line path { stroke-dashoffset: 0; }

.ws-icon {
  grid-column: var(--c); grid-row: 2; justify-self: center; z-index: 1;
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  background: var(--surface); color: var(--royal); border: 1px solid var(--line);
  box-shadow: 0 18px 34px -16px rgba(17,34,80,.35);
  transition: transform .4s var(--ease), background .3s, color .3s;
}
.ws-icon svg { width: 28px; height: 28px; }
.ws-icon.is-low { align-self: end; transform: translateY(50%); }
.ws-icon.is-high { align-self: start; transform: translateY(-50%); }
.ws-icon:hover { background: var(--royal); color: var(--accent); }

.ws-text { grid-column: var(--c); position: relative; isolation: isolate; padding-inline: 16px; }
.ws-text.is-low { grid-row: 1; align-self: end; padding-bottom: 20px; }
.ws-text.is-high { grid-row: 3; padding-top: 28px; }
.ws-num {
  position: absolute; inset-inline-end: 12px; top: -26px; z-index: -1;
  font-size: 92px; font-weight: 900; line-height: 1;
  background: linear-gradient(to bottom, var(--shell), rgba(217,203,194,0)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ws-text.is-high .ws-num { top: -14px; }
.ws-text h3 { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.ws-text p { font-size: 13.5px; color: var(--text-2); line-height: 1.9; }

@media (max-width: 1024px) {
  .wave-steps { grid-template-columns: 1fr; grid-template-rows: none; gap: 0; max-width: 560px; }
  .wave-line { display: none; }
  .ws-icon, .ws-icon.is-low, .ws-icon.is-high, .ws-text, .ws-text.is-low, .ws-text.is-high { grid-column: 1; grid-row: auto; }
  .ws-icon { justify-self: start; transform: none !important; margin-top: 8px; width: 54px; height: 54px; }
  .ws-text, .ws-text.is-low, .ws-text.is-high {
    align-self: auto; padding: 14px 0 34px; padding-inline-start: 52px; margin-top: -62px;
    border-inline-start: 2px dashed var(--line); margin-inline-start: 26px;
  }
  .ws-text:last-child { border-inline-start-color: transparent; }
  .ws-num, .ws-text.is-high .ws-num { top: 0; font-size: 64px; }
}

/* ---------- Experience ---------- */
.exp-list { border-top: 1px solid var(--line); }
.exp {
  display: grid; grid-template-columns: 180px 1fr 1.2fr; gap: 24px; align-items: center;
  padding-block: 30px; border-bottom: 1px solid var(--line); transition: padding .4s var(--ease);
}
.exp:hover { padding-inline: 16px; }
.exp .year { color: var(--text-2); font-weight: 600; font-size: 15px; }
.exp h3 { font-size: 18px; font-weight: 800; }
.exp h3 small { display: block; font-size: 14px; font-weight: 500; color: var(--text-2); }
.exp p { color: var(--text-2); font-size: 15px; }

/* ---------- Quote / testimonials ---------- */
.philosophy { text-align: center; }
.philosophy blockquote {
  margin: 0 auto; max-width: 860px; font-size: clamp(20px, 2.4vw, 30px); font-weight: 800; line-height: 1.55;
}
.philosophy blockquote .muted { color: var(--text-3); }
/* ---------- Testimonials (vertical marquee wall) ---------- */
.philosophy { padding-bottom: 40px; }
.testi-sec { padding-top: 40px; }
.testi-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.testi-intro .h2 .hl {
  background: linear-gradient(120deg, var(--accent-deep), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.proof { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; }
.proof p { color: var(--text-2); font-size: 14.5px; max-width: 340px; }
.proof p b { color: var(--royal); }
.proof-avatars { display: flex; flex-shrink: 0; }
.proof-avatars .avatar { width: 38px; height: 38px; font-size: 14px; border: 2px solid var(--bg); }
.proof-avatars .avatar + .avatar { margin-inline-start: -12px; }
.testi-intro .hero-actions { margin-top: 26px; }

.testi-wall {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 600px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
}
.testi-wall::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .6;
  background: radial-gradient(rgba(184,151,90,.35) 1px, transparent 1.5px) 0 0 / 34px 34px;
}
.testi-col { overflow: hidden; }
.testi-track { display: flex; flex-direction: column; gap: 16px; animation: testiUp 38s linear infinite; }
.testi-col.is-reverse .testi-track { animation-name: testiDown; animation-duration: 44s; }
.testi-wall:hover .testi-track { animation-play-state: paused; }
@keyframes testiUp { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 8px)); } }
@keyframes testiDown { from { transform: translateY(calc(-50% - 8px)); } to { transform: translateY(0); } }

.testi {
  margin: 0; padding: 24px; border-radius: 20px; display: flex; flex-direction: column; gap: 16px;
  background: linear-gradient(145deg, rgba(255,255,255,.85), rgba(255,255,255,.45)), var(--surface);
  border: 1px solid var(--line); box-shadow: 0 18px 40px -30px rgba(17,34,80,.4), inset 0 1px 0 #fff;
  transition: border-color .3s, transform .3s var(--ease);
}
.testi:hover { border-color: rgba(224,197,143,.9); transform: translateY(-3px); }
.testi blockquote { margin: 0; font-size: 14.5px; line-height: 2; color: var(--text); }
.testi .stars { color: var(--accent-deep); letter-spacing: 2px; font-size: 14px; }
.testi .who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--swan); background: var(--royal); flex-shrink: 0; }
.testi .who b { display: block; font-size: 14.5px; }
.testi .who small { display: block; font-size: 12.5px; color: var(--text-2); }

@media (max-width: 1024px) {
  .testi-layout { grid-template-columns: 1fr; gap: 36px; }
  .testi-wall {
    grid-template-columns: 1fr; height: auto; gap: 14px;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
  }
  .testi-track { flex-direction: row; width: max-content; animation-name: testiSide; }
  .testi-col.is-reverse .testi-track { animation-name: testiSideRev; }
  .testi { width: 300px; }
  @keyframes testiSide { from { transform: translateX(0); } to { transform: translateX(calc(50% + 8px)); } }
  @keyframes testiSideRev { from { transform: translateX(calc(50% + 8px)); } to { transform: translateX(0); } }
}
@media (max-width: 680px) {
  .testi { width: 260px; padding: 20px; }
  .proof { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .testi-track { animation: none; }
  .testi-wall { height: auto; -webkit-mask-image: none; mask-image: none; }
  .testi-track > [aria-hidden="true"] { display: none; }
}

/* ---------- Toolkit ---------- */
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tool { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.tool-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tool-logo { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-weight: 900; color: var(--on-dark); font-size: 15px; direction: ltr; }
.tool-top b { display: block; font-size: 15.5px; }
.tool-top span { font-size: 13px; color: var(--text-2); }
.tool-top .pct { margin-inline-start: auto; font-weight: 800; font-size: 18px; }
.bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(to left, var(--royal), var(--sapphire)); transition: width 1.4s var(--ease); margin-inline-start: 0; }
.in-view .bar i { width: var(--w); }

/* ---------- Blog ---------- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.post { display: flex; flex-direction: column; gap: 16px; }
.post-thumb {
  aspect-ratio: 16 / 11; border-radius: var(--radius); overflow: hidden; background: var(--surface-2);
  display: grid; place-items: center; position: relative;
}
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.post:hover .post-thumb img, .post:hover .post-thumb .ph { transform: scale(1.05); }
.post-thumb .ph { position: absolute; inset: 0; transition: transform .6s var(--ease); }
.post-meta { display: flex; gap: 10px; font-size: 13px; color: var(--text-2); }
.post h3 { font-size: 16.5px; font-weight: 800; line-height: 1.6; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start; }
.faq-list { display: grid; gap: 12px; }
.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.faq summary {
  list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; font-size: 15px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); display: grid; place-items: center; flex-shrink: 0; transition: transform .3s var(--ease), background .3s, color .3s; font-size: 18px; }
.faq[open] summary .plus { transform: rotate(45deg); background: var(--dark); color: var(--on-dark); }
.faq .answer { padding: 0 22px 20px; color: var(--text-2); font-size: 14.5px; }

/* ---------- CTA / Footer ---------- */
.site-footer { color: var(--text); border-top: 1px solid var(--line); margin-top: 40px; padding-top: 90px; }
.cta { text-align: center; padding: 56px 24px; border-radius: 32px; background: var(--surface); border: 1px solid var(--line); position: relative; overflow: hidden; }
.cta::before { content: ""; position: absolute; inset: auto 15% -60% 15%; height: 120%; background: radial-gradient(closest-side, rgba(224,197,143,.35), transparent); pointer-events: none; }
.cta > * { position: relative; }
.cta h2 { font-size: clamp(30px, 4.2vw, 56px); font-weight: 900; line-height: 1.3; margin-block: 22px 16px; }
.cta h2 .muted { color: var(--accent-deep); }
.cta p { color: var(--text-2); max-width: 520px; margin-inline: auto; }
.cta .actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px; padding-block: 64px; }
.footer-grid h4 { font-size: 14px; color: var(--text-3); font-weight: 600; margin-bottom: 18px; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: var(--text-2); transition: color .2s; }
.footer-grid a:hover { color: var(--royal); }
.footer-grid .about p { color: var(--text-2); margin-top: 16px; max-width: 320px; font-size: 14.5px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 26px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 14px; }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in-view { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .marquee-track, .orb, .dot::after { animation: none; }
}

/* ---------- Generic pages ---------- */
.page-content { padding-top: 150px; min-height: 60vh; }
.page-content article { max-width: 780px; margin-inline: auto; }
.page-content h1 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 900; margin-bottom: 24px; line-height: 1.4; }
.page-content .entry { color: var(--text); font-size: 17px; line-height: 2.1; }
.page-content .entry p { margin-bottom: 1.2em; }
.page-content .entry img { border-radius: var(--radius-sm); height: auto; }


/* ---------- SEO pages: breadcrumbs, article, service ---------- */
.hello { margin-top: 22px; font-weight: 600; color: var(--text-2); font-size: 17px; }
.hello + h1 { margin-top: 6px; }

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13.5px; color: var(--text-2); margin: 0 0 18px; padding: 0; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-inline-start: 6px; color: var(--text-3); }
.breadcrumbs a:hover { color: var(--text); }
.breadcrumbs [aria-current] { color: var(--text-3); }

.article { max-width: 800px; margin-inline: auto; }
.article-head { max-width: 800px; margin: 0 auto 30px; }
.article-head h1 { font-size: clamp(24px, 2.8vw, 36px); font-weight: 900; line-height: 1.45; margin-bottom: 18px; }
.article-thumb { border-radius: var(--radius); overflow: hidden; margin-bottom: 30px; }
.article-thumb img { width: 100%; height: auto; }

.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 22px 26px; margin-bottom: 34px; }
.toc b { display: block; margin-bottom: 10px; font-size: 16px; }
.toc ol { margin: 0; padding-inline-start: 20px; display: grid; gap: 6px; font-size: 15px; }
.toc a { color: var(--text-2); }
.toc a:hover { color: var(--text); text-decoration: underline; text-decoration-color: var(--accent); }

.entry { font-size: 16px; line-height: 2.05; color: var(--text); }
.entry > * + * { margin-top: 1.1em; }
.entry h2 { font-size: clamp(20px, 2vw, 24px); font-weight: 900; line-height: 1.6; margin-top: 1.9em; scroll-margin-top: 110px; }
.entry h3 { font-size: 18px; font-weight: 800; margin-top: 1.5em; }
.entry a { color: var(--royal); font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.entry a:hover { color: var(--sapphire); }
.entry ul, .entry ol { padding-inline-start: 22px; }
.entry ul { list-style: disc; }
.entry li { margin-bottom: .4em; }
.entry li::marker { color: var(--accent-deep); }
.entry blockquote, .entry .note { margin-inline: 0; padding: 18px 22px; border-inline-start: 4px solid var(--accent); background: var(--surface); border-radius: var(--radius-sm); }
.entry table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.entry th, .entry td { border: 1px solid var(--line); padding: 10px 14px; text-align: right; vertical-align: top; }
.entry th { background: var(--surface-2); font-weight: 800; }
.entry img { border-radius: var(--radius-sm); height: auto; }

.article-faq { margin-top: 50px; }
.article-faq h2 { font-size: 26px; font-weight: 900; margin-bottom: 18px; }
.cta-box {
  margin-top: 50px; background: var(--surface); color: var(--text); border: 1px solid rgba(224,197,143,.7); border-radius: var(--radius); padding: 28px 30px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.cta-box b { font-size: 20px; }
.cta-box p { color: var(--text-2); margin-top: 4px; }
.cta-box .btn-light { background: transparent; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.author-box { margin-top: 24px; display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.author-box p { color: var(--text-2); font-size: 15px; margin-top: 4px; }
.author-box a { color: var(--royal); font-weight: 700; }
.related { margin-top: 90px; }

.cat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.cat-filter a { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 600; color: var(--text-2); }
.cat-filter a:hover, .cat-filter a.active { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.pagination { margin-top: 44px; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers { padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.pagination .current { background: var(--dark); color: var(--on-dark); }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.service-hero { padding-top: 150px; padding-bottom: 60px; }
.service-hero h1 { font-size: clamp(28px, 3.4vw, 44px); font-weight: 900; line-height: 1.3; margin-top: 18px; }
.service-hero .lead { margin-top: 18px; max-width: 660px; }
.service-body { padding-top: 0; }
.service-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; }
.service-layout .entry > h2:first-child { margin-top: 0; }
.service-aside { position: sticky; top: 110px; display: grid; gap: 16px; }
.aside-card { background: var(--surface); color: var(--text); border: 1px solid rgba(224,197,143,.7); border-radius: var(--radius); padding: 26px; }
.aside-card b { font-size: 19px; }
.aside-card p { color: var(--text-2); font-size: 14.5px; margin: 8px 0 18px; }
.aside-links { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.aside-links ul { margin-top: 10px; display: grid; gap: 8px; }
.aside-links a { color: var(--text-2); font-size: 15px; }
.aside-links a:hover { color: var(--text); }
.service-faq { padding-top: 0; }
.big-404 { font-size: clamp(80px, 12vw, 140px); font-weight: 900; line-height: 1; color: var(--accent); }

@media (max-width: 1024px) {
  .service-layout { grid-template-columns: 1fr; }
  .service-aside { position: static; }
}
@media (max-width: 680px) {
  .service-hero { padding-top: 120px; }
  .entry { font-size: 16px; }
  .cta-box { padding: 24px; }
  .cta-actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .notch-side { display: none; }
  .hero-bottom { grid-template-columns: 1fr; justify-items: center; }
  .scroll-cue, .hero-social { display: none; }
  .site-header--hero:not(.is-stuck) .nav-actions { margin-top: 10px; }
  .nav-cta { display: none; }
  .menu-toggle { display: grid; }
  .menu-open .mobile-menu { display: block; }
  .tools-grid { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: repeat(2, 1fr); }
  .exp { grid-template-columns: 140px 1fr; }
  .exp p { grid-column: 2; }
  .faq-wrap { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
  .container { padding-inline: 16px; }
  section { padding-block: 72px; }
  .site-header { top: 10px; }
  .hero-stage { padding-top: 8px; }
  .hero-frame { margin-inline: 8px; border-radius: 26px; height: calc(100svh - 16px); min-height: 700px; --device: clamp(150px, 46vw, 210px); }
  .notch-top { width: 236px; height: 58px; clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 100%, 38px 100%); }
  .site-header--hero:not(.is-stuck) { top: 8px; inset-inline: 8px; }
  .site-header--hero:not(.is-stuck) .container { padding-inline: 14px; }
  .site-header--hero:not(.is-stuck) .brand { height: 52px; font-size: 15px; gap: 8px; }
  .site-header--hero:not(.is-stuck) .brand-mark { width: 30px; height: 30px; font-size: 13px; }
  .site-header--hero:not(.is-stuck) .nav-actions .nav-circle--gold { display: none; }
  .hero-copy { padding-top: 104px; }
  .hero-copy h1 { font-size: clamp(24px, 7vw, 32px); }
  .hero-sub { font-size: 14px; }
  .hero-bottom { bottom: 14px; inset-inline: 12px; }
  .hero-bar { flex-wrap: wrap; padding: 14px; gap: 12px; }
  .hero-bar p { flex: 1 1 calc(100% - 56px); font-size: 12.5px; }
  .bar-actions { width: 100%; }
  .bar-btn { flex: 1; text-align: center; }
  .arch-back { width: 78vw; } .arch-front { width: 50vw; }
  .nav { padding-inline-start: 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 44px; }
  .stat { padding: 20px; }
  .tools-grid, .posts { grid-template-columns: 1fr; }
  .exp { grid-template-columns: 1fr; gap: 8px; padding-block: 24px; }
  .exp p { grid-column: auto; }
  .exp:hover { padding-inline: 0; }
  .section-head { margin-bottom: 36px; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-grid .about { grid-column: auto; }
  .site-footer { border-radius: 28px 28px 0 0; padding-top: 70px; }
  .hero-actions .btn, .cta .actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* ---------- Contact cards ---------- */
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-block: 28px; }
.entry a.contact-card { text-decoration: none; display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); transition: transform .3s var(--ease), border-color .3s; }
.entry a.contact-card:hover { transform: translateY(-3px); border-color: var(--accent); }
.contact-card span { font-size: 14px; color: var(--text-2); font-weight: 500; }
.contact-card b { font-size: 18px; color: var(--royal); }
@media (max-width: 680px) { .contact-cards { grid-template-columns: 1fr; } }

/* ---------- Consultation modal ---------- */
.consult-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; }
.consult-modal[hidden] { display: none; }
.consult-backdrop { position: absolute; inset: 0; background: rgba(17,34,80,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: fadeIn .3s ease both; }
.consult-dialog {
  position: relative; width: min(560px, 100%); max-height: calc(100svh - 32px); overflow-y: auto;
  background: var(--swan); color: var(--text); border-radius: 28px; padding: 34px 32px 30px;
  border: 1px solid rgba(224,197,143,.6); box-shadow: 0 40px 80px -30px rgba(17,34,80,.6);
  animation: popIn .45s var(--ease) both;
}
.consult-dialog::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--accent-deep), var(--accent), var(--accent-deep)); }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(24px) scale(.97); } }
.consult-close {
  position: absolute; top: 14px; left: 14px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--text-2); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background .2s, color .2s;
}
.consult-close:hover { background: var(--royal); color: var(--swan); }
.consult-dialog h2 { font-size: 22px; font-weight: 900; }
.consult-sub { color: var(--text-2); font-size: 14px; margin: 6px 0 22px; }
.consult-form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label { font-size: 13.5px; font-weight: 700; color: var(--royal); }
.field label i { color: var(--accent-deep); font-style: normal; }
.field label span { color: var(--text-3); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; font-size: 15px; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--accent-deep); box-shadow: 0 0 0 4px rgba(224,197,143,.3); }
.field.has-error input, .field.has-error select { border-color: #b4533f; }
.field-error { color: #b4533f; font-size: 12.5px; min-height: 0; }
.field-error:empty { display: none; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: 13.5px; color: var(--text-2); }
.form-status:empty { display: none; }
.form-status.is-error { color: #b4533f; }
.consult-submit { justify-content: center; width: 100%; margin-top: 4px; }
.consult-submit[disabled] { opacity: .6; pointer-events: none; }
.consult-success { text-align: center; padding: 20px 0 6px; }
.consult-success .success-icon {
  width: 68px; height: 68px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 30px; font-weight: 900; margin-bottom: 14px;
  background: linear-gradient(145deg, #F1E3C4, var(--accent) 50%, var(--accent-deep)); color: var(--royal);
}
.consult-success p { color: var(--text-2); margin: 8px auto 22px; max-width: 380px; font-size: 14.5px; }
body.modal-open { overflow: hidden; }
@media (max-width: 680px) {
  .consult-dialog { padding: 28px 20px 22px; border-radius: 22px; }
  .field-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .consult-backdrop, .consult-dialog { animation: none; }
  .wave-line path { transition: none; stroke-dashoffset: 0; }
}