/* =========================================================
   CDL — Sections: atmosphere, hero + core motif, marquee,
   specialties bento, solution path, channels hub, FAQ, footer
   ========================================================= */

/* ---------------- Atmosphere / aurora ---------------- */
.atmosphere { position: fixed; inset: 0; z-index: var(--ch-z-atmosphere); pointer-events: none; overflow: hidden; contain: layout paint; }
.atmosphere__field { position: absolute; border-radius: 50%; will-change: transform; }
.atmosphere__field--blue { width: min(46vw, 640px); aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ch-blue) 22%, transparent), transparent 68%); inset-block-start: -12vw; inset-inline-end: -8vw; animation: drift 22s var(--ch-ease-in-out) infinite alternate; }
.atmosphere__field--coral { width: min(40vw, 560px); aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ch-coral) 20%, transparent), transparent 68%); inset-block-end: -14vw; inset-inline-start: -10vw; animation: drift 26s var(--ch-ease-in-out) infinite alternate-reverse; }
.atmosphere__field--mid { width: min(30vw, 420px); aspect-ratio: 1; background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ch-blue) 12%, transparent), transparent 68%); inset-block-start: 40%; inset-inline-start: 38%; animation: drift 30s var(--ch-ease-in-out) infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-3%, 4%, 0) scale(1.08); } }

.noise {
  position: fixed; inset: 0;
  z-index: var(--ch-z-decor);
  pointer-events: none;
  opacity: var(--ch-noise-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- Hero ---------------- */
.hero { position: relative; padding-block: clamp(26px, 4vw, 64px) clamp(40px, 6vw, 90px); }
.hero__inner { display: grid; grid-template-columns: 1.02fr 1.14fr; align-items: center; gap: clamp(24px, 4vw, 56px); }
.hero__content { max-width: 34rem; }
.hero__title {
  margin-block: 1.1rem 0.9rem;
  font-family: var(--ch-font-hero);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.75rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
}
/* Official wordmark artwork inline inside the headline (replaces the plain word "چارنو") */
.hero__title-mark {
  display: inline-block;
  height: 0.95em;
  width: auto;
  vertical-align: -0.12em;
  margin-inline: 0.16em;
}
.hero__title-line { display: block; }

.hero__lead { max-width: 31rem; }
.hero__sub { color: var(--ch-muted); margin-block-start: 0.3rem; }

/* Slogan as styled text (replaces the raster slogan image) */
.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-start: 1.15rem;
  font-family: var(--ch-font-display);
  font-size: var(--ch-text-md);
  font-weight: 700;
  color: var(--ch-blue-strong);
}
.hero__tagline::before,
.hero__tagline::after {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 999px;
}
.hero__tagline::before { background: var(--ch-coral); }
.hero__tagline::after { background: var(--ch-blue); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 1.8rem; }

.hero__visual { position: relative; display: grid; place-items: center; min-height: clamp(340px, 42vw, 620px); }
.hero__visual::before {
  content: "";
  position: absolute;
  width: min(76%, 540px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ch-blue) 16%, transparent), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero__orbit { position: absolute; inset: 0; z-index: var(--ch-z-decor); color: var(--ch-line); }
.orbit-ring { fill: none; stroke: currentColor; stroke-width: 1.2; opacity: 0.7; }
.orbit-ring--dash { stroke-dasharray: 2 9; stroke-linecap: round; opacity: 0.9; }
.orbit-ring--coral { stroke: color-mix(in srgb, var(--ch-coral) 35%, transparent); }
.orbit-nodes circle { fill: var(--ch-blue); }
.orbit-nodes circle:nth-child(even) { fill: var(--ch-coral); }
.hero__art {
  position: relative; z-index: var(--ch-z-base);
  width: min(100%, 720px);
  filter: drop-shadow(0 34px 46px rgba(16, 38, 96, 0.18));
  animation: floatY 9s var(--ch-ease-in-out) infinite;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 0.4s var(--ch-ease-out);
}
@keyframes floatY { 0%, 100% { translate: 0 0; } 50% { translate: 0 -14px; } }

.hero__chips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.hero__chip {
  position: absolute;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--ch-r-md);
  background: var(--ch-surface);
  border: 1px solid var(--ch-line-soft);
  box-shadow: var(--ch-shadow-md);
  color: var(--ch-accent);
  animation: bob 6s var(--ch-ease-in-out) infinite;
}
.hero__chip svg { width: 24px; height: 24px; }
.hero__chip:nth-child(1) { inset-block-start: 9%; inset-inline-start: 1%; animation-delay: -0.4s; }
.hero__chip:nth-child(2) { inset-block-start: 22%; inset-inline-end: -1%; animation-delay: -1.6s; color: var(--ch-coral); }
.hero__chip:nth-child(3) { inset-block-end: 9%; inset-inline-start: 0; animation-delay: -2.8s; color: var(--ch-coral); }
.hero__chip:nth-child(4) { inset-block-end: 27%; inset-inline-end: -1%; animation-delay: -4s; color: var(--ch-blue); }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.speech { inset-block-start: 6%; inset-inline-start: 58%; }

/* ---------------- Core motif (4 specialties -> 1 solution) ---------------- */
.core { position: relative; width: min(100%, 460px); aspect-ratio: 1; margin-inline: auto; }
.core__halo { position: absolute; inset: 24%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--ch-blue) 26%, transparent), transparent 72%); }
.core__ring { position: absolute; border-radius: 50%; border: 1.5px dashed var(--ch-line); }
.core__ring--1 { inset: 3%; animation: spin 46s linear infinite; }
.core__ring--2 { inset: 20%; border-style: solid; border-color: color-mix(in srgb, var(--ch-coral) 22%, transparent); animation: spin 34s linear infinite reverse; }
.core__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--ch-line); }
.core__center {
  position: absolute; inset: 34%;
  border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--ch-blue) 16%, var(--ch-surface)), var(--ch-surface));
  border: 1px solid var(--ch-line);
  box-shadow: var(--ch-shadow-md), inset 0 0 30px color-mix(in srgb, var(--ch-blue) 18%, transparent);
  animation: corePulse 4s var(--ch-ease-in-out) infinite;
}
.core__center img { width: 52%; height: auto; }
.core__sat {
  position: absolute;
  width: 58px; height: 58px;
  border-radius: var(--ch-r-md);
  display: grid; place-items: center;
  background: var(--ch-surface);
  border: 1px solid var(--ch-line-soft);
  box-shadow: var(--ch-shadow-sm);
  color: var(--ch-accent);
}
.core__sat svg { width: 26px; height: 26px; }
.core__sat--1 { inset-block-start: -2%; inset-inline-start: 50%; transform: translateX(-50%); }
.core__sat--2 { inset-inline-end: -2%; inset-block-start: 50%; transform: translateY(-50%); color: var(--ch-coral); }
.core__sat--3 { inset-block-end: -2%; inset-inline-start: 50%; transform: translateX(-50%); color: var(--ch-coral); }
.core__sat--4 { inset-inline-start: -2%; inset-block-start: 50%; transform: translateY(-50%); }
.core__sat svg { animation: satBreathe 4s var(--ch-ease-in-out) infinite; }
.core__sat--2 svg { animation-delay: -1s; }
.core__sat--3 svg { animation-delay: -2s; }
.core__sat--4 svg { animation-delay: -3s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes corePulse { 0%, 100% { box-shadow: var(--ch-shadow-md), inset 0 0 26px color-mix(in srgb, var(--ch-blue) 14%, transparent); } 50% { box-shadow: var(--ch-shadow-lg), inset 0 0 40px color-mix(in srgb, var(--ch-blue) 30%, transparent); } }
@keyframes satBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ---------------- Marquee section ---------------- */
.marquee-section { padding-block: clamp(18px, 2.4vw, 30px); border-block: 1px solid var(--ch-line-soft); background: color-mix(in srgb, var(--ch-surface) 50%, transparent); }

/* ---------------- Specialties bento ---------------- */
.services { position: relative; }
.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(16px, 1.6vw, 22px);
}
.pillar {
  position: relative;
  grid-column: span 6;
  display: flex;
  flex-direction: column;
  gap: var(--ch-space-3);
  padding: clamp(24px, 2.6vw, 38px);
  border-radius: var(--ch-r-xl);
  background: var(--ch-surface);
  border: 1px solid var(--ch-line-soft);
  box-shadow: var(--ch-shadow-sm);
  overflow: hidden;
  transform-style: preserve-3d;
  transition: translate var(--ch-dur) var(--ch-ease-spring),
    box-shadow var(--ch-dur) var(--ch-ease-out),
    border-color var(--ch-dur) var(--ch-ease-out);
}
.pillar:hover { translate: 0 -5px; box-shadow: var(--ch-shadow-lg); border-color: color-mix(in srgb, var(--accent, var(--ch-blue)) 34%, transparent); }

.pillar__glow {
  position: absolute;
  inset-inline-end: -20%; inset-block-start: -40%;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent, var(--ch-blue)) 22%, transparent), transparent 70%);
  filter: blur(10px);
  opacity: 0; transition: opacity var(--ch-dur-slow) var(--ch-ease-out);
  pointer-events: none;
}
.pillar:hover .pillar__glow { opacity: 1; }
.pillar__num {
  position: absolute;
  inset-block-start: 18px; inset-inline-start: 22px;
  font-family: var(--ch-font-display); font-weight: 800;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1;
  color: color-mix(in srgb, var(--ch-ink) 5%, transparent);
  pointer-events: none;
}
.pillar__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--ch-r-md);
  color: #fff;
  background: linear-gradient(160deg, var(--accent, var(--ch-blue)), color-mix(in srgb, var(--accent, var(--ch-blue)) 70%, #000));
  box-shadow: 0 12px 26px -12px color-mix(in srgb, var(--accent, var(--ch-blue)) 80%, transparent);
  transform: translateZ(30px);
  transition: transform var(--ch-dur) var(--ch-ease-spring);
}
.pillar:hover .pillar__icon { transform: translateZ(40px) rotate(-6deg); }
.pillar__icon svg { width: 27px; height: 27px; }
.pillar__title { font-family: var(--ch-font-display); font-weight: 800; font-size: var(--ch-text-xl); transform: translateZ(20px); }
.pillar__text { color: var(--ch-muted); font-size: var(--ch-text-sm); max-width: 40ch; transform: translateZ(12px); }
.pillar--coral { --accent: var(--ch-coral); }

/* ---------------- Solution path ---------------- */
.solution__inner {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 68px);
  padding: clamp(26px, 3.4vw, 56px);
  border-radius: var(--ch-r-2xl);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ch-surface) 88%, transparent), color-mix(in srgb, var(--ch-bg-3) 70%, transparent));
  border: 1px solid var(--ch-line-soft);
  box-shadow: var(--ch-shadow-sm);
  position: relative;
  overflow: hidden;
}
.solution__art { position: relative; display: grid; place-items: center; }
.solution__art img { width: min(100%, 250px); filter: drop-shadow(0 22px 30px rgba(16, 38, 96, 0.16)); animation: floatY 11s var(--ch-ease-in-out) infinite; transform: translate3d(var(--px, 0), var(--py, 0), 0); }
.solution__title { margin-block-end: 1.4rem; }
.solution__body { min-width: 0; }

.steps { position: relative; display: grid; gap: var(--ch-space-4); }
.steps::before { content: ""; position: absolute; inset-block: 14px; inset-inline-start: 19px; width: 2px; background: linear-gradient(var(--ch-blue), var(--ch-coral)); opacity: 0.25; }
.step { position: relative; display: flex; align-items: center; gap: var(--ch-space-4); }
.step__dot {
  position: relative; z-index: 1;
  flex: none;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ch-font-display); font-weight: 700;
  color: var(--ch-blue);
  background: var(--ch-surface);
  border: 2px solid var(--ch-line);
  box-shadow: var(--ch-shadow-xs);
}
.step:nth-child(even) .step__dot { color: var(--ch-coral); border-color: color-mix(in srgb, var(--ch-coral) 40%, transparent); }
.step__label { font-family: var(--ch-font-display); font-weight: 700; font-size: var(--ch-text-lg); }
.step__desc { color: var(--ch-muted); font-size: var(--ch-text-sm); }

/* ---------------- Channels hub ---------------- */
.channels { position: relative; }
.channels__head { text-align: center; max-width: 46rem; margin-inline: auto; }
.channels__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-block-start: clamp(30px, 4vw, 52px);
}
.channels__note {
  margin-block-start: clamp(26px, 3.4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--ch-space-4);
  text-align: center;
}
.channels__note-text { color: var(--ch-muted); font-size: var(--ch-text-sm); }

/* ---------------- FAQ ---------------- */
.faq-section { background: color-mix(in srgb, var(--ch-bg-3) 55%, transparent); border-block: 1px solid var(--ch-line-soft); }

/* ---------------- Footer ---------------- */
.site-footer { border-block-start: 1px solid var(--ch-line-soft); background: color-mix(in srgb, var(--ch-bg-2) 60%, transparent); padding-block: clamp(34px, 4vw, 60px); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6rem 2rem; }
.site-footer__brand { display: flex; align-items: center; gap: 0.9rem; }
.site-footer__mark { height: 66px; width: auto; }
.site-footer__lockup { height: 54px; width: auto; }
.site-footer__copy { flex-basis: 100%; color: var(--ch-muted); font-size: var(--ch-text-xs); padding-block-start: 1.2rem; border-block-start: 1px solid var(--ch-line-soft); display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; justify-content: space-between; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1100px) {
  .pillar:nth-child(n) { grid-column: span 6; }
  .solution__inner { grid-template-columns: 240px 1fr; }
}

@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__content { order: 1; max-width: none; margin-inline: auto; }
  .hero__visual { order: 2; min-height: clamp(300px, 74vw, 520px); }
  .speech { inset-inline-start: auto; inset-inline-end: 8%; }
  .solution__inner { grid-template-columns: 1fr; text-align: center; }
  .solution__art { order: 0; }
  .steps { text-align: start; max-width: 30rem; margin-inline: auto; }
}

@media (max-width: 760px) {
  .site-header__inner { display: flex; }
  .brand { margin-inline-end: auto; }
  .header__actions { margin-inline-start: 0; }
  .header__cta { display: none; }
  .nav { position: static; }
  .nav__toggle { display: inline-flex; }
  .nav__list {
    position: absolute; inset-block-start: calc(100% + 10px); inset-inline: var(--ch-gutter);
    flex-direction: column; align-items: stretch; gap: 2px;
    padding: 0.6rem;
    background: var(--ch-surface);
    border: 1px solid var(--ch-line-soft);
    border-radius: var(--ch-r-lg);
    box-shadow: var(--ch-shadow-lg);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--ch-dur) var(--ch-ease-out), transform var(--ch-dur) var(--ch-ease-out), visibility var(--ch-dur);
  }
  .nav__list.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__link { display: block; padding: 0.8em 1em; font-size: var(--ch-text-md); }
  .nav__link::after { display: none; }

  .hero { padding-block-start: 6px; }
  .hero__title { font-size: clamp(1.9rem, 7.5vw, 2.7rem); }
  .hero__actions { justify-content: center; }
  .hero__actions .btn { flex: 1 1 auto; }
  .hero__art { width: min(100%, 520px); }

  .section-head { text-align: center; margin-inline: auto; }
  .bento .pillar:nth-child(n) { grid-column: span 12; }

  .site-footer__inner { flex-direction: column; text-align: center; }
  .site-footer__brand { flex-direction: column; }
  .site-footer__copy { justify-content: center; text-align: center; }
}

@media (max-width: 420px) {
  .hero__actions .btn { flex: 1 1 100%; }
  .hero__chip { width: 40px; height: 40px; }
}

/* Portrait / square tuning (1080x1920, 1080x1080) */
@media (max-aspect-ratio: 1/1) and (min-width: 861px) {
  .hero__inner { grid-template-columns: 1fr; text-align: center; gap: 1.5rem; }
  .hero__content { max-width: 46rem; margin-inline: auto; }
  .hero__actions { justify-content: center; }
  .hero__art { width: min(100%, 640px); }
  .hero__tagline { justify-content: center; }
}

/* Hide custom cursor / effects pointers on touch */
@media (hover: none) {
  .cursor, .cursor-dot { display: none; }
}