@import url('https\://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');



/* =========================

   DSN — DESIGN SYSTEM

\========================= */



:root {

  --bg: #101114;

  --bg-soft: #16181d;

  --surface: #1b1d23;

  --surface-light: #22252c;

  --text: #f4f3ef;

  --muted: #a4a6ad;

  --subtle: #737680;

  --line: rgba(255, 255, 255, 0.1);

  --accent: #d5f36a;

  --accent-dark: #a6c83c;

  --radius: 18px;

  --radius-large: 26px;

  --container: 1180px;

  --transition: 250ms ease;

}



* {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  scroll-padding-top: 90px;

}



body {

  font-family: 'Vazirmatn', Tahoma, sans-serif;

  background: var(--bg);

  color: var(--text);

  line-height: 1.8;

  font-size: 15px;

  overflow-x: hidden;

}



body,

button,

input,

textarea,

select {

  font-family: 'Vazirmatn', Tahoma, sans-serif;

}



button,

a {

  -webkit-tap-highlight-color: transparent;

}



button {

  color: inherit;

}



a {

  color: inherit;

  text-decoration: none;

}



img {

  display: block;

  max-width: 100%;

}



::selection {

  background: var(--accent);

  color: #111;

}



/* =========================

   HEADER

\========================= */



.site-header {

  position: sticky;

  top: 0;

  z-index: 100;

  width: 100%;

  background: rgba(16, 17, 20, 0.88);

  border-bottom: 1px solid var(--line);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

}



.header-inner {

  width: min(calc(100% - 48px), var(--container));

  height: 78px;

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 28px;

}



.brand {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  flex-shrink: 0;

}



.brand-mark {

  display: grid;

  place-items: center;

  width: 43px;

  height: 43px;

  border-radius: 12px;

  background: var(--accent);

  color: #14160e;

  font-size: 15px;

  font-weight: 900;

  letter-spacing: -1px;

}



.brand-name {

  direction: ltr;

  font-size: 11px;

  line-height: 1.3;

  font-weight: 800;

  letter-spacing: 1.2px;

  color: var(--text);

}



.main-nav {

  display: flex;

  align-items: center;

  gap: 32px;

}



.main-nav a {

  position: relative;

  padding: 8px 0;

  color: var(--muted);

  font-size: 13px;

  font-weight: 500;

  transition: color var(--transition);

}



.main-nav a::after {

  content: "";

  position: absolute;

  bottom: 0;

  right: 0;

  width: 0;

  height: 2px;

  border-radius: 5px;

  background: var(--accent);

  transition: width var(--transition);

}



.main-nav a:hover,

.main-nav a.active {

  color: var(--text);

}



.main-nav a:hover::after,

.main-nav a.active::after {

  width: 100%;

}



.menu-toggle {

  display: none;

  width: 42px;

  height: 42px;

  padding: 10px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: var(--surface);

  cursor: pointer;

}



.menu-toggle span {

  display: block;

  height: 2px;

  width: 100%;

  margin: 4px 0;

  border-radius: 3px;

  background: var(--text);

}



/* =========================

   HERO INTRO

\========================= */



.hero-intro {
  position: relative;
  padding: 58px 24px 88px;
  overflow: hidden;
  text-align: center;
}



.hero-intro::before {

  content: "";

  position: absolute;

  top: -240px;

  left: 8%;

  width: 520px;

  height: 520px;

  border-radius: 50%;

  background: rgba(213, 243, 106, 0.045);

  filter: blur(80px);

  pointer-events: none;

}



.hero-inner {
  position: relative;
  width: min(100%, 900px);
  margin: auto;
}



.eyebrow {

  margin-bottom: 14px;

  color: var(--accent);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2.4px;

  line-height: 1.6;

  direction: ltr;

}



.hero-intro h1 {
  max-width: 850px;
  margin: 0 auto;
  font-size: clamp(30px, 4.2vw, 55px);
  line-height: 1.55;
  font-weight: 800;
  letter-spacing: -1.5px;
}



.hero-intro h1 span {

  color: var(--accent);

}



.hero-description {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 2.1;
}



/* =========================

   FEATURED SLIDER

\========================= */



.featured-slider-section {
  width: min(calc(100% - 40px), 1440px);
  margin: 24px auto 0;
}



.featured-slider {
  position: relative;
  width: 100%;
  height: clamp(390px, 43vw, 570px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-large);
  background: #202127;
  isolation: isolate;
}



.featured-slide {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: flex-end;

  padding: clamp(30px, 6vw, 75px);

  opacity: 0;

  visibility: hidden;

  transition: opacity 500ms ease, visibility 500ms ease;

}



.featured-slide.active {

  opacity: 1;

  visibility: visible;

  z-index: 2;

}



.slide-art,

.slide-shade {

  position: absolute;

  inset: 0;

  z-index: -1;

}



.slide-art {

  transition: transform 900ms ease;

}



.featured-slide.active .slide-art {

  transform: scale(1.045);

}



.slide-shade {

  background:

    linear-gradient(0deg, rgba(8, 9, 12, 0.94) 0%, rgba(8, 9, 12, 0.5) 43%, rgba(8, 9, 12, 0.05) 100%),

    linear-gradient(90deg, rgba(8, 9, 12, 0.32), transparent 80%);

}



.slide-art-magazine {

  background:

    radial-gradient(ellipse at 72% 25%, rgba(242, 184, 105, 0.8), transparent 25%),

    radial-gradient(ellipse at 80% 75%, rgba(192, 93, 68, 0.55), transparent 33%),

    linear-gradient(125deg, #332b28, #71503f 48%, #1d2025);

}



.slide-art-art {

  background:

    radial-gradient(ellipse at 72% 45%, rgba(255, 195, 95, 0.8), transparent 22%),

    radial-gradient(ellipse at 48% 75%, rgba(229, 88, 103, 0.7), transparent 28%),

    linear-gradient(135deg, #34203c, #6e3e70 48%, #1b2636);

}



.slide-art-cinema {

  background:

    radial-gradient(ellipse at 68% 35%, rgba(237, 173, 84, 0.65), transparent 18%),

    linear-gradient(135deg, #121a27, #34465b 52%, #101115);

}



.slide-art-science {

  background:

    radial-gradient(circle at 72% 40%, rgba(105, 218, 213, 0.62), transparent 20%),

    radial-gradient(circle at 55% 65%, rgba(53, 116, 172, 0.55), transparent 32%),

    linear-gradient(130deg, #101e30, #183e53 55%, #151921);

}



.slide-art-music {

  background:

    radial-gradient(ellipse at 74% 38%, rgba(224, 137, 92, 0.72), transparent 20%),

    radial-gradient(ellipse at 46% 75%, rgba(123, 68, 129, 0.65), transparent 33%),

    linear-gradient(135deg, #2b2036, #51364b 52%, #14171e);

}



.slide-art-debate {

  background:

    radial-gradient(ellipse at 70% 40%, rgba(213, 243, 106, 0.35), transparent 23%),

    radial-gradient(ellipse at 28% 68%, rgba(99, 122, 173, 0.55), transparent 30%),

    linear-gradient(130deg, #171c28, #343f51 54%, #111318);

}



.slide-content {

  width: min(100%, 670px);

  padding-bottom: 32px;

}



.slide-kicker {

  display: inline-block;

  margin-bottom: 12px;

  color: var(--accent);

  font-size: 11px;

  font-weight: 800;

  letter-spacing: 2px;

  direction: ltr;

}



.slide-content h2 {

  margin-bottom: 8px;

  color: #fff;

  font-size: clamp(34px, 5vw, 58px);

  line-height: 1.4;

  font-weight: 900;

}



.slide-content p {

  max-width: 560px;

  margin-bottom: 22px;

  color: rgba(255, 255, 255, 0.78);

  font-size: 15px;

}



.slide-link,

.about-link,

.debate-link {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  color: var(--accent);

  font-size: 13px;

  font-weight: 700;

  transition: gap var(--transition), color var(--transition);

}



.slide-link:hover,

.about-link:hover,

.debate-link:hover {

  gap: 18px;

  color: #fff;

}



.slider-arrow {

  position: absolute;

  top: 50%;

  z-index: 5;

  display: grid;

  place-items: center;

  width: 46px;

  height: 46px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  border-radius: 50%;

  background: rgba(12, 13, 16, 0.4);

  color: #fff;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

  backdrop-filter: blur(8px);

  transform: translateY(-50%);

  transition: background var(--transition), color var(--transition);

}



.slider-arrow:hover {

  background: var(--accent);

  color: #111;

}



.slider-prev {

  left: 22px;

}



.slider-next {

  right: 22px;

}



.slider-bottom {

  position: absolute;

  right: clamp(30px, 6vw, 75px);

  bottom: 26px;

  left: clamp(30px, 6vw, 75px);

  z-index: 6;

  display: flex;

  align-items: center;

  justify-content: space-between;

  pointer-events: none;

}



.slider-dots {

  display: flex;

  align-items: center;

  gap: 7px;

  pointer-events: auto;

}



.slider-dot {

  width: 7px;

  height: 7px;

  padding: 0;

  border: 0;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.48);

  cursor: pointer;

  transition: width var(--transition), background var(--transition);

}



.slider-dot.active {

  width: 25px;

  background: var(--accent);

}



.slider-count {

  color: rgba(255, 255, 255, 0.75);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1px;

  direction: ltr;

}



/* =========================

   GENERAL SECTIONS

\========================= */



.section {

  width: min(calc(100% - 48px), var(--container));

  margin: 0 auto 110px;

}



.section-heading {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 24px;

  margin-bottom: 30px;

}



.section-heading .eyebrow {

  margin-bottom: 6px;

}



.section-heading h2,

.contact-heading h2 {

  font-size: clamp(24px, 3vw, 34px);

  font-weight: 800;

  line-height: 1.5;

  letter-spacing: -0.5px;

}



.section-description {

  margin-top: 5px;

  color: var(--muted);

  font-size: 13px;

}



.text-link {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

  color: var(--muted);

  font-size: 12px;

  font-weight: 600;

  transition: color var(--transition), gap var(--transition);

}



.text-link:hover {

  gap: 15px;

  color: var(--accent);

}



/* =========================

   LATEST FEATURED POST

\========================= */



.featured-post {

  display: grid;

  grid-template-columns: 1.05fr 0.95fr;

  min-height: 330px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius-large);

  background: var(--bg-soft);

}



.featured-post-visual {

  position: relative;

  display: grid;

  place-items: center;

  min-height: 300px;

  overflow: hidden;

  background:

    radial-gradient(ellipse at 65% 30%, rgba(213, 243, 106, 0.2), transparent 28%),

    radial-gradient(ellipse at 30% 75%, rgba(104, 116, 153, 0.25), transparent 35%),

    linear-gradient(135deg, #292c32, #17191e);

}



.post-visual-label {

  position: absolute;

  top: 24px;

  right: 26px;

  color: rgba(255, 255, 255, 0.55);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.8px;

  direction: ltr;

}



.post-visual-symbol {

  color: var(--accent);

  font-size: clamp(90px, 14vw, 170px);

  font-weight: 300;

  line-height: 1;

  opacity: 0.9;

  text-shadow: 0 0 70px rgba(213, 243, 106, 0.15);

}



.featured-post-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding: clamp(28px, 5vw, 58px);

}



.post-category {

  margin-bottom: 14px;

  color: var(--accent);

  font-size: 11px;

  font-weight: 700;

}



.featured-post-content h3 {

  margin-bottom: 14px;

  font-size: clamp(21px, 2.7vw, 30px);

  line-height: 1.7;

  font-weight: 800;

}



.featured-post-content p {

  margin-bottom: 23px;

  color: var(--muted);

  font-size: 13px;

  line-height: 2.2;

}



/* =========================

   TOPIC GRID

\========================= */



.topics-section {

  margin-bottom: 115px;

}



.topic-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 16px;

}



.topic-tile {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: space-between;

  min-height: 205px;

  padding: 25px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--surface);

  isolation: isolate;

  transition: transform var(--transition), border-color var(--transition), background var(--transition);

}



.topic-tile::before {

  content: "";

  position: absolute;

  z-index: -1;

  top: -65px;

  left: -55px;

  width: 190px;

  height: 190px;

  border-radius: 50%;

  background: var(--tile-glow, rgba(213, 243, 106, 0.09));

  filter: blur(30px);

  transition: transform 500ms ease;

}



.topic-tile:hover {

  transform: translateY(-5px);

  border-color: rgba(213, 243, 106, 0.35);

  background: #202229;

}



.topic-tile:hover::before {

  transform: scale(1.5);

}



.topic-magazine { --tile-glow: rgba(228, 166, 104, 0.17); }

.topic-art { --tile-glow: rgba(216, 104, 150, 0.17); }

.topic-cinema { --tile-glow: rgba(103, 143, 200, 0.2); }

.topic-science { --tile-glow: rgba(85, 202, 193, 0.17); }

.topic-music { --tile-glow: rgba(175, 113, 198, 0.18); }

.topic-debate { --tile-glow: rgba(213, 243, 106, 0.12); }



.topic-number {

  color: var(--subtle);

  font-size: 10px;

  font-weight: 700;

  letter-spacing: 1.5px;

  direction: ltr;

}



.topic-symbol {

  position: absolute;

  top: 33px;

  left: 28px;

  color: rgba(255, 255, 255, 0.72);

  font-size: 38px;

  line-height: 1;

  transition: transform var(--transition), color var(--transition);

}



.topic-tile:hover .topic-symbol {

  color: var(--accent);

  transform: rotate(-8deg) scale(1.1);

}



.topic-title {

  margin-top: auto;

  font-size: 23px;

  font-weight: 800;

}



.topic-english {

  margin-top: 1px;

  color: var(--subtle);

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  direction: ltr;

}



.topic-arrow {

  position: absolute;

  bottom: 26px;

  left: 26px;

  color: var(--muted);

  font-size: 18px;

  transition: color var(--transition), transform var(--transition);

}



.topic-tile:hover .topic-arrow {

  color: var(--accent);

  transform: translate(-3px, -3px);

}



/* =========================

   ABOUT US

\========================= */



.about-section {

  width: 100%;

  margin: 0 auto 110px;

  padding: 0 24px;

}



.about-inner {

  display: grid;

  grid-template-columns: 0.85fr 1.15fr;

  width: min(100%, var(--container));

  min-height: 350px;

  margin: auto;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius-large);

  background: #17191e;

}



.about-photo {

  position: relative;

  min-height: 350px;

  overflow: hidden;

  background:

    radial-gradient(ellipse at 50% 45%, rgba(213, 243, 106, 0.18), transparent 40%),

    linear-gradient(135deg, #34363b, #202229);

}



.about-photo img {

  position: absolute;

  inset: 0;

  z-index: 2;

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.about-photo-fallback {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: rgba(213, 243, 106, 0.75);

  font-size: 65px;

  font-weight: 900;

  letter-spacing: -4px;

  direction: ltr;

}



.about-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  padding: clamp(30px, 5vw, 65px);

}



.about-content h2 {

  margin-bottom: 14px;

  font-size: clamp(23px, 3vw, 33px);

  font-weight: 800;

  line-height: 1.6;

}



.about-content p:not(.eyebrow) {

  margin-bottom: 22px;

  color: var(--muted);

  font-size: 13px;

  line-height: 2.3;

}



/* =========================

   WEEKLY DEBATE

\========================= */



.debate-feature-section {

  margin-bottom: 115px;

}



.debate-feature {

  display: grid;

  grid-template-columns: minmax(120px, 0.75fr) minmax(0, 1.5fr) minmax(120px, 0.75fr);

  align-items: center;

  gap: 20px;

  min-height: 360px;

  padding: 35px;

  border: 1px solid var(--line);

  border-radius: var(--radius-large);

  background:

    radial-gradient(ellipse at 50% 50%, rgba(213, 243, 106, 0.045), transparent 42%),

    var(--bg-soft);

}



.debater {

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 10px;

}



.debater-photo {

  display: grid;

  place-items: center;

  width: min(100%, 170px);

  aspect-ratio: 1 / 1.15;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 16px;

  background: #252831;

  color: rgba(255, 255, 255, 0.65);

  font-size: 12px;

  text-align: center;

}



.debater-photo-one {

  background:

    radial-gradient(ellipse at 50% 40%, rgba(117, 151, 190, 0.5), transparent 38%),

    linear-gradient(145deg, #29384b, #1a202a);

}



.debater-photo-two {

  background:

    radial-gradient(ellipse at 50% 40%, rgba(199, 147, 102, 0.48), transparent 38%),

    linear-gradient(145deg, #46342e, #242026);

}



.debater-photo span {

  padding: 8px;

  border-radius: 8px;

  background: rgba(10, 11, 14, 0.35);

}



.debater-label {

  color: var(--muted);

  font-size: 12px;

  font-weight: 600;

}



.debate-center {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

}



.debate-kicker {

  margin-bottom: 8px;

  color: var(--accent);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;

  direction: ltr;

}



.debate-center h3 {

  max-width: 520px;

  font-size: clamp(19px, 2.6vw, 29px);

  font-weight: 800;

  line-height: 1.7;

}



.debate-center p {

  max-width: 470px;

  margin-top: 8px;

  color: var(--muted);

  font-size: 12px;

  line-height: 2;

}



.versus {

  display: grid;

  place-items: center;

  width: 52px;

  height: 52px;

  margin: 20px 0 15px;

  border: 1px solid rgba(213, 243, 106, 0.35);

  border-radius: 50%;

  background: rgba(213, 243, 106, 0.08);

  color: var(--accent);

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 1px;

  direction: ltr;

}



.debate-link {

  font-size: 12px;

}



/* =========================

   CONTACT

\========================= */



.contact-section {

  padding: 75px 24px;

  border-top: 1px solid var(--line);

  background: #15171b;

}



.contact-inner {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 60px;

  width: min(100%, var(--container));

  margin: auto;

}



.contact-heading h2 {

  margin-bottom: 12px;

}



.contact-heading > p:last-child {

  max-width: 430px;

  color: var(--muted);

  font-size: 13px;

  line-height: 2.2;

}



.contact-details {

  display: grid;

  gap: 22px;

}



.contact-item {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 5px;

  padding-bottom: 18px;

  border-bottom: 1px solid var(--line);

}



.contact-label {

  color: var(--subtle);

  font-size: 11px;

}



.contact-item > a,

.contact-item > span:not(.contact-label) {

  color: var(--text);

  font-size: 13px;

  direction: ltr;

  text-align: left;

}



.contact-item > a:hover,

.social-links a:hover {

  color: var(--accent);

}



.social-links {

  display: flex;

  flex-wrap: wrap;

  gap: 18px;

  direction: ltr;

}



.social-links a {

  color: var(--text);

  font-size: 12px;

  transition: color var(--transition);

}



/* =========================

   FOOTER

\========================= */



.site-footer {

  padding: 24px;

  background: #101114;

}



.footer-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  width: min(100%, var(--container));

  margin: auto;

}



.footer-brand {

  color: var(--accent);

  font-size: 16px;

  font-weight: 900;

  letter-spacing: 1px;

  direction: ltr;

}



.footer-brand span {

  color: var(--muted);

  font-size: 9px;

  font-weight: 600;

  letter-spacing: 1px;

}



.footer-inner p,

.footer-copy {

  color: var(--subtle);

  font-size: 10px;

}



/* =========================

   SHARED CONTENT PAGES

\========================= */



.page-container {

  width: min(calc(100% - 48px), var(--container));

  margin: 55px auto 100px;

}



.page-heading {

  margin-bottom: 35px;

}



.page-heading h1 {

  margin-bottom: 10px;

  font-size: clamp(28px, 4vw, 42px);

  font-weight: 800;

}



.page-heading p {

  color: var(--muted);

  font-size: 14px;

}



.posts-grid,

.content-grid {

  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 20px;

}



.post-card,

.content-card {

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: var(--radius);

  background: var(--surface);

  transition: transform var(--transition), border-color var(--transition);

}



.post-card:hover,

.content-card:hover {

  transform: translateY(-4px);

  border-color: rgba(213, 243, 106, 0.3);

}



.post-card img,

.content-card img {

  width: 100%;

  aspect-ratio: 16 / 10;

  object-fit: cover;

  background: var(--surface-light);

}



.post-card-content,

.content-card-content {

  padding: 20px;

}



.post-card h3,

.content-card h3 {

  margin-bottom: 8px;

  font-size: 17px;

  font-weight: 700;

  line-height: 1.7;

}



.post-card p,

.content-card p {

  color: var(--muted);

  font-size: 12px;

  line-height: 2;

}



.post-meta {

  margin-top: 12px;

  color: var(--subtle);

  font-size: 10px;

}



.empty-state {

  padding: 35px;

  border: 1px dashed var(--line);

  border-radius: var(--radius);

  color: var(--muted);

  text-align: center;

}



/* =========================

   FORMS / ADMIN / LOGIN

\========================= */



.form-container {

  width: min(calc(100% - 40px), 680px);

  margin: 50px auto 90px;

  padding: 30px;

  border: 1px solid var(--line);

  border-radius: var(--radius-large);

  background: var(--bg-soft);

}



.form-container h1,

.form-container h2 {

  margin-bottom: 20px;

  font-size: 25px;

  font-weight: 800;

}



.form-container label {

  display: block;

  margin: 14px 0 6px;

  color: var(--muted);

  font-size: 12px;

}



.form-container input,

.form-container textarea,

.form-container select {

  display: block;

  width: 100%;

  min-height: 45px;

  padding: 11px 13px;

  border: 1px solid var(--line);

  border-radius: 10px;

  outline: none;

  background: #111318;

  color: var(--text);

  font-size: 13px;

}



.form-container textarea {

  min-height: 140px;

  resize: vertical;

}



.form-container input:focus,

.form-container textarea:focus,

.form-container select:focus {

  border-color: var(--accent);

}



.form-container button,

.primary-button {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-height: 44px;

  margin-top: 20px;

  padding: 10px 22px;

  border: 0;

  border-radius: 10px;

  background: var(--accent);

  color: #14160e;

  font-size: 13px;

  font-weight: 800;

  cursor: pointer;

  transition: background var(--transition), transform var(--transition);

}



.form-container button:hover,

.primary-button:hover {

  transform: translateY(-2px);

  background: #e2ff83;

}



\#postMessage,

\#weeklyDebateMessage,

\#loginMessage {

  margin-top: 12px;

  color: var(--accent);

  font-size: 12px;

}



/* =========================

   MODAL

\========================= */



.modal,

.post-modal {

  position: fixed;

  inset: 0;

  z-index: 200;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 20px;

  background: rgba(0, 0, 0, 0.8);

  backdrop-filter: blur(8px);

}



.modal.active,

.post-modal.active {

  display: flex;

}



.modal-content,

.post-modal-content {

  position: relative;

  width: min(100%, 760px);

  max-height: 90vh;

  overflow: auto;

  padding: 30px;

  border: 1px solid var(--line);

  border-radius: var(--radius-large);

  background: var(--surface);

}



.modal-close,

.post-modal-close {

  position: absolute;

  top: 12px;

  left: 15px;

  display: grid;

  place-items: center;

  width: 35px;

  height: 35px;

  border: 1px solid var(--line);

  border-radius: 50%;

  background: var(--bg-soft);

  color: var(--text);

  font-size: 20px;

  cursor: pointer;

}



/* =========================

   RESPONSIVE

\========================= */



@media (max-width: 900px) {

  .header-inner {

    width: min(calc(100% - 36px), var(--container));

  }



  .main-nav {

    gap: 20px;

  }



  .brand-name {

    max-width: 145px;

    font-size: 9px;

  }



  .featured-post {

    grid-template-columns: 1fr 1fr;

  }



  .topic-tile {

    min-height: 180px;

  }



  .debate-feature {

    gap: 12px;

    padding: 25px;

  }



  .contact-inner {

    gap: 35px;

  }

}



@media (max-width: 680px) {

  .header-inner {

    height: 68px;

  }



  .brand-mark {

    width: 39px;

    height: 39px;

    font-size: 13px;

  }



  .brand-name {

    max-width: none;

    font-size: 9px;

  }



  .menu-toggle {

    display: block;

  }



  .main-nav {

    position: absolute;

    top: 68px;

    right: 0;

    left: 0;

    display: none;

    flex-direction: column;

    align-items: stretch;

    gap: 0;

    padding: 10px 22px 18px;

    border-bottom: 1px solid var(--line);

    background: rgba(16, 17, 20, 0.98);

  }



  .main-nav.open {

    display: flex;

  }



  .main-nav a {

    padding: 12px 0;

    border-bottom: 1px solid var(--line);

  }



  .main-nav a::after {

    display: none;

  }



  .hero-intro {

    padding: 55px 22px 34px;

  }



  .hero-intro h1 {

    font-size: clamp(28px, 8vw, 40px);

    letter-spacing: -0.8px;

  }



  .hero-description {

    font-size: 13px;

  }



  .featured-slider-section,

  .section {

    width: calc(100% - 32px);

  }



  .featured-slider-section {

    margin-bottom: 75px;

  }



  .featured-slider {

    height: 430px;

    border-radius: 20px;

  }



  .featured-slide {

    padding: 28px 25px 75px;

  }



  .slide-content {

    padding-bottom: 5px;

  }



  .slide-content h2 {

    font-size: 39px;

  }



  .slide-content p {

    max-width: 90%;

    font-size: 13px;

  }



  .slider-arrow {

    top: 45%;

    width: 37px;

    height: 37px;

    font-size: 23px;

  }



  .slider-prev {

    left: 12px;

  }



  .slider-next {

    right: 12px;

  }



  .slider-bottom {

    right: 25px;

    bottom: 22px;

    left: 25px;

  }



  .section {

    margin-bottom: 78px;

  }



  .section-heading {

    align-items: flex-start;

    margin-bottom: 22px;

  }



  .section-heading h2 {

    font-size: 24px;

  }



  .section-description {

    max-width: 280px;

    font-size: 12px;

  }



  .text-link {

    margin-top: 8px;

    font-size: 11px;

  }



  .featured-post {

    grid-template-columns: 1fr;

  }



  .featured-post-visual {

    min-height: 220px;

  }



  .post-visual-symbol {

    font-size: 110px;

  }



  .featured-post-content {

    padding: 25px;

  }



  .featured-post-content h3 {

    font-size: 22px;

  }



  .topic-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 11px;

  }



  .topic-tile {

    min-height: 160px;

    padding: 17px;

    border-radius: 14px;

  }



  .topic-title {

    font-size: 20px;

  }



  .topic-symbol {

    top: 25px;

    left: 18px;

    font-size: 30px;

  }



  .topic-arrow {

    bottom: 18px;

    left: 17px;

    font-size: 15px;

  }



  .about-section {

    margin-bottom: 78px;

    padding: 0 16px;

  }



  .about-inner {

    grid-template-columns: 1fr;

  }



  .about-photo {

    min-height: 230px;

  }



  .about-content {

    padding: 26px;

  }



  .about-content h2 {

    font-size: 24px;

  }



  .debate-feature-section {

    margin-bottom: 80px;

  }



  .debate-feature {

    grid-template-columns: 1fr 1fr;

    gap: 22px 12px;

    padding: 22px 15px;

  }



  .debate-center {

    grid-column: 1 / -1;

    grid-row: 1;

    padding: 0 8px 10px;

  }



  .debater-photo {

    width: min(100%, 125px);

    border-radius: 12px;

  }



  .versus {

    width: 45px;

    height: 45px;

    margin: 14px 0 10px;

  }



  .contact-section {

    padding: 55px 22px;

  }



  .contact-inner {

    grid-template-columns: 1fr;

    gap: 30px;

  }



  .footer-inner {

    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

  }



  .footer-inner p {

    max-width: 280px;

  }



  .posts-grid,

  .content-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

  }



  .post-card-content,

  .content-card-content {

    padding: 14px;

  }



  .post-card h3,

  .content-card h3 {

    font-size: 14px;

  }



  .form-container {

    padding: 22px;

  }

}



@media (max-width: 390px) {

  .brand-name {

    max-width: 145px;

    font-size: 8px;

    letter-spacing: 0.7px;

  }



  .topic-grid {

    gap: 9px;

  }



  .topic-tile {

    min-height: 145px;

  }



  .posts-grid,

  .content-grid {

    grid-template-columns: 1fr;

  }



  .featured-slider {

    height: 400px;

  }

}



/* =========================

   ACCESSIBILITY

\========================= */



a:focus-visible,

button:focus-visible {

  outline: 2px solid var(--accent);

  outline-offset: 4px;

}



@media (prefers-reduced-motion: reduce) {

  *,

  *::before,

  *::after {

    scroll-behavior: auto !important;

    transition-duration: 0.01ms !important;

    animation-duration: 0.01ms !important;

  }

}
/* =========================================================
   LATEST STORIES — NEW EDITORIAL DESIGN
========================================================= */

.latest-section {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto 145px;
  padding: 0;
  border: none;
  background: transparent;
}


/* ---------- Heading ---------- */

.latest-intro {
  text-align: center;
  margin-bottom: 58px;
}

.latest-kicker {
  display: block;
  margin-bottom: 17px;

  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;
  direction: ltr;
}

.latest-intro h2 {
  margin: 0;

  color: #f5f6f8;
  font-size: clamp(42px, 5vw, 68px);
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -1.8px;
}

.latest-intro p {
  max-width: 650px;
  margin: 20px auto 25px;

  color: #969eaf;
  font-size: 15px;
  line-height: 2.1;
}

.latest-all-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #dfe3eb;
  font-size: 12px;
  font-weight: 700;

  transition:
    color .25s ease,
    gap .25s ease;
}

.latest-all-link span {
  color: var(--accent);
  font-size: 20px;
  line-height: 1;
}

.latest-all-link:hover {
  color: var(--accent);
  gap: 15px;
}


/* ---------- Main feature ---------- */

.latest-feature {
  display: grid;
  grid-template-columns: 1.12fr .88fr;

  min-height: 510px;

  background: transparent;
  border: none;
  border-radius: 0;

  overflow: hidden;
}


/* ---------- Image ---------- */

.latest-feature-image {
  position: relative;

  min-height: 510px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(232,121,72,.18),
      transparent 32%
    ),
    linear-gradient(
      135deg,
      #191d29,
      #10131c
    );
}

.latest-feature-image::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      135deg,
      transparent 0 47%,
      rgba(255,255,255,.025) 47% 48%,
      transparent 48% 100%
    );

  opacity: .8;
}

.latest-feature-image::after {
  content: "";

  position: absolute;
  width: 360px;
  height: 360px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  border: 1px solid rgba(255,255,255,.08);
  border-radius: 50%;

  box-shadow:
    0 0 0 55px rgba(255,255,255,.015),
    0 0 0 110px rgba(255,255,255,.01);
}


.latest-image-label {
  position: absolute;
  top: 28px;
  left: 30px;

  z-index: 3;

  color: rgba(255,255,255,.42);

  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;

  direction: ltr;
}


.latest-image-center {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 2;
}

.latest-image-center span {
  color: var(--accent);

  font-size: 95px;
  font-weight: 200;

  text-shadow:
    0 0 40px rgba(232,121,72,.2);

  animation: latestSymbolFloat 5s ease-in-out infinite;
}

@keyframes latestSymbolFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(4deg);
  }

}


/* ---------- Content ---------- */

.latest-feature-content {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 55px 65px;

  background: transparent;
}


.latest-category {
  display: inline-flex;
  align-items: center;

  width: fit-content;

  margin-bottom: 20px;

  color: var(--accent);

  font-size: 11px;
  font-weight: 800;
}


.latest-category::before {
  content: "";

  width: 28px;
  height: 1px;

  margin-left: 10px;

  background: var(--accent);
}


.latest-feature-content h3 {
  max-width: 540px;

  margin: 0 0 24px;

  color: #f4f5f8;

  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.55;

  font-weight: 850;
  letter-spacing: -.8px;
}


.latest-feature-content p {
  max-width: 500px;

  margin: 0 0 30px;

  color: #9ca4b5;

  font-size: 14px;
  line-height: 2.2;
}


.latest-read-link {
  display: inline-flex;
  align-items: center;
  gap: 13px;

  width: fit-content;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(232,121,72,.5);

  color: #f2f3f5;

  font-size: 13px;
  font-weight: 800;

  transition:
    color .25s ease,
    gap .25s ease,
    border-color .25s ease;
}

.latest-read-link span {
  color: var(--accent);
  font-size: 20px;
}

.latest-read-link:hover {
  gap: 19px;
  color: var(--accent);
  border-color: var(--accent);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {

  .latest-section {
    width: min(100% - 48px, 700px);
    margin-bottom: 100px;
  }

  .latest-intro {
    margin-bottom: 42px;
  }

  .latest-intro h2 {
    font-size: clamp(38px, 8vw, 54px);
  }

  .latest-feature {
    grid-template-columns: 1fr;
  }

  .latest-feature-image {
    min-height: 360px;
  }

  .latest-feature-content {
    padding: 40px 15px 10px;
  }

  .latest-feature-content h3 {
    font-size: 30px;
  }

}


@media (max-width: 600px) {

  .latest-section {
    width: calc(100% - 36px);
    margin-bottom: 85px;
  }

  .latest-kicker {
    font-size: 9px;
    letter-spacing: 3px;
  }

  .latest-intro h2 {
    font-size: 39px;
  }

  .latest-intro p {
    font-size: 13px;
    line-height: 2;
  }

  .latest-feature-image {
    min-height: 280px;
  }

  .latest-image-center span {
    font-size: 70px;
  }

  .latest-feature-content {
    padding: 32px 4px 5px;
  }

  .latest-feature-content h3 {
    font-size: 25px;
    line-height: 1.7;
  }

  .latest-feature-content p {
    font-size: 13px;
    line-height: 2;
  }

}
/* =========================================================
   TOPICS — MINIMAL COLOR GRID
========================================================= */

.topics-section {
  width: min(1180px, calc(100% - 80px));
  margin: 0 auto 150px;
  padding: 0;
  background: transparent;
  border: none;
}


/* ---------- Intro ---------- */

.topics-intro {
  text-align: center;
  margin-bottom: 55px;
}

.topics-kicker {
  display: block;
  margin-bottom: 16px;

  color: var(--accent);

  font-size: 10px;
  font-weight: 800;
  letter-spacing: 4px;

  direction: ltr;
}

.topics-intro h2 {
  margin: 0;

  color: #f4f5f8;

  font-size: clamp(40px, 5vw, 62px);
  line-height: 1.2;

  font-weight: 900;
  letter-spacing: -1.5px;
}

.topics-intro p {
  margin: 18px auto 0;

  color: #8f97a9;

  font-size: 14px;
  line-height: 2;
}


/* ---------- Grid ---------- */

.topics-grid {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 14px;
}


/* ---------- Card ---------- */

.topic-card {
  position: relative;

  min-height: 245px;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;

  text-decoration: none;

  background: #171a23;

  border: 1px solid rgba(255,255,255,.055);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    border-color .35s ease,
    box-shadow .45s ease;
}


/* subtle atmosphere */

.topic-card::before {
  content: "";

  position: absolute;

  width: 190px;
  height: 190px;

  border-radius: 50%;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  opacity: .08;

  filter: blur(15px);

  transition:
    width .5s ease,
    height .5s ease,
    opacity .4s ease;
}


/* title */

.topic-card span {
  position: relative;
  z-index: 2;

  color: #f3f4f7;

  font-size: clamp(23px, 2.3vw, 31px);

  font-weight: 850;

  letter-spacing: -.5px;

  transition:
    transform .4s ease,
    color .3s ease;
}


/* ---------- Individual colors ---------- */

.topic-card-magazine::before {
  background: #e87948;
}

.topic-card-art::before {
  background: #d9a441;
}

.topic-card-cinema::before {
  background: #7887d8;
}

.topic-card-science::before {
  background: #52a98b;
}

.topic-card-music::before {
  background: #b36fd2;
}

.topic-card-debate::before {
  background: #d65d6d;
}


/* ---------- Hover ---------- */

.topic-card:hover {
  transform: translateY(-7px);

  border-color: rgba(255,255,255,.15);

  box-shadow:
    0 22px 55px rgba(0,0,0,.28);
}

.topic-card:hover::before {
  width: 310px;
  height: 310px;

  opacity: .16;
}

.topic-card:hover span {
  transform: scale(1.08);
}


/* ---------- Responsive ---------- */

@media (max-width: 850px) {

  .topics-section {
    width: min(100% - 48px, 700px);
    margin-bottom: 105px;
  }

  .topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .topic-card {
    min-height: 210px;
  }

}


@media (max-width: 560px) {

  .topics-section {
    width: calc(100% - 36px);
  }

  .topics-intro {
    margin-bottom: 38px;
  }

  .topics-intro h2 {
    font-size: 39px;
  }

  .topics-intro p {
    font-size: 13px;
  }

  .topics-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .topic-card {
    min-height: 150px;
  }

  .topic-card span {
    font-size: 25px;
  }

}
/* =========================================================
   ABOUT — EDITORIAL / FULL WIDTH
========================================================= */

.about-section {
  width: min(1180px, calc(100% - 80px));

  margin: 0 auto 150px;

  padding: 0;

  background: transparent;

  border: none;
}


/* ---------- Intro ---------- */

.about-intro {
  text-align: center;

  margin-bottom: 60px;
}

.about-kicker {
  display: block;

  margin-bottom: 16px;

  color: var(--accent);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 4px;

  direction: ltr;
}

.about-intro h2 {
  margin: 0;

  color: #f4f5f8;

  font-size: clamp(42px, 5vw, 65px);

  font-weight: 900;

  line-height: 1.15;

  letter-spacing: -1.8px;
}

.about-intro p {
  max-width: 620px;

  margin: 20px auto 0;

  color: #969eaf;

  font-size: 14px;

  line-height: 2.1;
}


/* ---------- Layout ---------- */

.about-layout {
  display: grid;

  grid-template-columns: 1.15fr .85fr;

  align-items: center;

  gap: 80px;
}


/* ---------- Photo ---------- */

.about-photo {
  position: relative;

  min-height: 570px;

  overflow: hidden;

  background: #171a23;
}

.about-photo img {
  display: block;

  width: 100%;
  height: 570px;

  object-fit: cover;

  object-position: center;

  transition:
    transform 1s cubic-bezier(.2,.8,.2,1),
    filter .7s ease;
}

.about-photo:hover img {
  transform: scale(1.025);

  filter: brightness(1.04);
}


/* fallback */

.about-photo-fallback {
  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  color: rgba(255,255,255,.08);

  font-size: 110px;

  font-weight: 900;

  letter-spacing: -5px;
}


/* ---------- Copy ---------- */

.about-copy {
  padding: 15px 0;
}

.about-label {
  display: inline-block;

  margin-bottom: 22px;

  color: var(--accent);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;

  direction: ltr;
}

.about-copy h3 {
  margin: 0 0 28px;

  color: #f4f5f8;

  font-size: clamp(32px, 4vw, 52px);

  line-height: 1.45;

  font-weight: 900;

  letter-spacing: -1.2px;
}

.about-copy p {
  max-width: 510px;

  margin: 0 0 18px;

  color: #9da5b6;

  font-size: 14px;

  line-height: 2.25;
}


/* ---------- Link ---------- */

.about-link {
  display: inline-flex;

  align-items: center;

  gap: 13px;

  margin-top: 18px;

  padding-bottom: 8px;

  border-bottom: 1px solid rgba(232,121,72,.45);

  color: #f1f2f5;

  font-size: 13px;

  font-weight: 800;

  transition:
    color .25s ease,
    gap .25s ease,
    border-color .25s ease;
}

.about-link span {
  color: var(--accent);

  font-size: 20px;
}

.about-link:hover {
  color: var(--accent);

  gap: 19px;

  border-color: var(--accent);
}


/* ---------- Responsive ---------- */

@media (max-width: 900px) {

  .about-section {
    width: min(100% - 48px, 700px);

    margin-bottom: 105px;
  }

  .about-layout {
    grid-template-columns: 1fr;

    gap: 45px;
  }

  .about-photo {
    min-height: 420px;
  }

  .about-photo img {
    height: 420px;
  }

  .about-copy {
    padding: 0;
  }

}


@media (max-width: 600px) {

  .about-section {
    width: calc(100% - 36px);
  }

  .about-intro {
    margin-bottom: 38px;
  }

  .about-intro h2 {
    font-size: 40px;
  }

  .about-intro p {
    font-size: 13px;
  }

  .about-photo {
    min-height: 330px;
  }

  .about-photo img {
    height: 330px;
  }

  .about-copy h3 {
    font-size: 30px;

    line-height: 1.55;
  }

  .about-copy p {
    font-size: 13px;

    line-height: 2.1;
  }

}
/* =========================================================
   CONTACT — DSN FINAL CONNECTION
========================================================= */

.contact-section {
  width: min(1180px, calc(100% - 80px));

  margin: 0 auto 110px;

  padding: 0;

  background: transparent;

  border: none;
}


/* ---------- Intro ---------- */

.contact-intro {
  text-align: center;

  margin-bottom: 60px;
}

.contact-kicker {
  display: block;

  margin-bottom: 16px;

  color: var(--accent);

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 4px;

  direction: ltr;
}

.contact-intro h2 {
  margin: 0;

  color: #f4f5f8;

  font-size: clamp(44px, 5vw, 68px);

  line-height: 1.15;

  font-weight: 900;

  letter-spacing: -2px;
}

.contact-intro p {
  max-width: 650px;

  margin: 20px auto 0;

  color: #969eaf;

  font-size: 14px;

  line-height: 2.1;
}


/* ---------- Contact Grid ---------- */

.contact-links {
  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;
}


/* ---------- Card ---------- */

.contact-card {
  position: relative;

  min-height: 280px;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  padding: 28px;

  overflow: hidden;

  text-decoration: none;

  background: #161a23;

  border: 1px solid rgba(255,255,255,.055);

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    border-color .35s ease;
}


/* top number */

.contact-card-number {
  position: absolute;

  top: 23px;
  left: 24px;

  color: rgba(255,255,255,.27);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 2px;

  direction: ltr;
}


/* icon */

.contact-card-icon {
  position: absolute;

  top: 25px;
  right: 25px;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  border-radius: 50%;

  background: rgba(255,255,255,.045);

  color: #e8e9ed;

  font-size: 16px;

  transition:
    transform .4s ease,
    background .3s ease;
}


/* name */

.contact-card-name {
  color: #f3f4f7;

  font-size: 24px;

  font-weight: 850;

  margin-bottom: 9px;
}


/* value */

.contact-card-value {
  color: #858ea1;

  font-size: 11px;

  line-height: 1.8;

  direction: ltr;

  text-align: right;
}


/* arrow */

.contact-card-arrow {
  position: absolute;

  bottom: 27px;
  left: 27px;

  color: var(--accent);

  font-size: 20px;

  transition:
    transform .35s ease;
}


/* ---------- Accent atmospheres ---------- */

.contact-email::before,
.contact-youtube::before,
.contact-telegram::before,
.contact-phone::before {

  content: "";

  position: absolute;

  width: 170px;
  height: 170px;

  border-radius: 50%;

  right: -65px;
  top: -65px;

  opacity: .07;

  transition:
    transform .5s ease,
    opacity .4s ease;
}

.contact-email::before {
  background: #e87948;
}

.contact-youtube::before {
  background: #d85b5b;
}

.contact-telegram::before {
  background: #5c9ed6;
}

.contact-phone::before {
  background: #63a77f;
}


/* ---------- Hover ---------- */

.contact-card:hover {
  transform: translateY(-8px);

  background: #1a1e28;

  border-color: rgba(255,255,255,.13);
}

.contact-card:hover::before {
  transform: scale(1.6);

  opacity: .13;
}

.contact-card:hover .contact-card-icon {
  transform: rotate(-8deg) scale(1.08);

  background: rgba(255,255,255,.09);
}

.contact-card:hover .contact-card-arrow {
  transform: translate(-4px, -4px);
}


/* ---------- Bottom signature ---------- */

.contact-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  margin-top: 28px;

  padding-top: 20px;

  border-top: 1px solid rgba(255,255,255,.06);

  color: #656d7e;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 2px;

  direction: ltr;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 950px) {

  .contact-section {
    width: min(100% - 48px, 700px);

    margin-bottom: 90px;
  }

  .contact-links {
    grid-template-columns: repeat(2, 1fr);
  }

}


@media (max-width: 600px) {

  .contact-section {
    width: calc(100% - 36px);
  }

  .contact-intro {
    margin-bottom: 38px;
  }

  .contact-intro h2 {
    font-size: 40px;

    letter-spacing: -1px;
  }

  .contact-intro p {
    font-size: 13px;
  }

  .contact-links {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .contact-card {
    min-height: 190px;

    padding: 24px;
  }

  .contact-card-name {
    font-size: 22px;
  }

  .contact-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 9px;

    line-height: 1.8;
  }

}
/* =========================================================
   ABOUT — FULL IMAGE SECTION
   ========================================================= */

.about-section {
    position: relative;
    width: 100%;
    height: 760px;
    min-height: 680px;
    margin: 0 0 150px;
    overflow: hidden;
    isolation: isolate;
    background: #10131c;
}


/* IMAGE */

.about-section .about-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
}

.about-section .about-image img {
    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    transition:
        transform 1.2s ease,
        filter .8s ease;
}


/* DARK GRADIENT */

.about-section .about-overlay {
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        linear-gradient(
            90deg,
            rgba(10, 13, 20, .88) 0%,
            rgba(10, 13, 20, .60) 27%,
            rgba(10, 13, 20, .18) 60%,
            rgba(10, 13, 20, .03) 100%
        );

    pointer-events: none;
}

.about-section .about-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(10, 13, 20, .65) 0%,
            transparent 42%
        );
}


/* CONTENT */

.about-section .about-content {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 8%;

    transform: translateY(-50%);

    width: min(540px, 42vw);

    color: #fff;
}


.about-section .about-kicker {
    display: block;

    margin-bottom: 22px;

    color: #e87948;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 4px;

    direction: ltr;
}


.about-section .about-content h2 {
    margin: 0 0 30px;

    color: #fff;

    font-size: clamp(70px, 8vw, 120px);

    line-height: .95;

    font-weight: 900;

    letter-spacing: -5px;

    text-shadow:
        0 4px 30px rgba(0, 0, 0, .5);
}


.about-section .about-content h2 span {
    color: #e87948;
}


.about-section .about-lead {
    max-width: 520px;

    margin: 0 0 25px;

    color: rgba(255, 255, 255, .94);

    font-size: 19px;

    line-height: 2;

    font-weight: 600;

    text-shadow:
        0 2px 18px rgba(0, 0, 0, .7);
}


.about-section .about-text {
    max-width: 500px;

    margin: 0 0 14px;

    color: rgba(255, 255, 255, .72);

    font-size: 13px;

    line-height: 2.15;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, .7);
}


.about-section .about-link {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 22px;

    padding-bottom: 8px;

    border-bottom:
        1px solid rgba(232, 121, 72, .6);

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition:
        gap .3s ease,
        color .3s ease,
        border-color .3s ease;
}


.about-section .about-link span {
    color: #e87948;

    font-size: 20px;
}


.about-section .about-link:hover {
    gap: 18px;

    color: #e87948;

    border-color: #e87948;
}


/* BOTTOM META */

.about-section .about-meta {
    position: absolute;

    z-index: 6;

    right: 6%;
    bottom: 35px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    color: rgba(255, 255, 255, .55);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;

    direction: ltr;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, .8);
}

.about-section .about-meta span:first-child {
    color: #e87948;
}


/* IMAGE HOVER */

.about-section:hover .about-image img {
    transform: scale(1.025);
}


/* =========================================================
   ABOUT
   ========================================================= */

.about-section {
    width: 100%;
    margin: 0 0 150px;
}


/* -------------------------
   TITLE — OUTSIDE IMAGE
   ------------------------- */

.about-section .about-intro {
    text-align: center;
    margin-bottom: 48px;
}

.about-section .about-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--accent);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 4px;
    direction: ltr;
}

.about-section .about-intro h2 {
    margin: 0;

    color: #f4f5f8;

    font-size: clamp(34px, 4vw, 50px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1px;
}


/* -------------------------
   IMAGE
   ------------------------- */

.about-section .about-visual {
    position: relative;

    width: 100%;

    height: 720px;

    overflow: hidden;

    background: #f1eee7;

    isolation: isolate;
}

.about-section .about-visual > img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 1.2s ease;
}


/* -------------------------
   IMAGE OVERLAY
   ------------------------- */

.about-section .about-overlay {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(8, 11, 17, .82) 0%,
            rgba(8, 11, 17, .48) 30%,
            rgba(8, 11, 17, .10) 65%,
            rgba(8, 11, 17, .02) 100%
        );

    pointer-events: none;
}

.about-section .about-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(8, 11, 17, .58) 0%,
            transparent 42%
        );
}


/* -------------------------
   CONTENT ON IMAGE
   ------------------------- */

.about-section .about-content {
    position: absolute;

    z-index: 4;

    top: 50%;
    left: 8%;

    transform: translateY(-50%);

    width: min(520px, 42vw);

    color: #fff;
}


/* NAME */

.about-section .about-content h3 {
    margin: 0;

    color: #fff;

    font-size: clamp(42px, 5vw, 72px);

    line-height: 1.15;

    font-weight: 900;

    letter-spacing: -2px;

    text-shadow:
        0 4px 25px rgba(0, 0, 0, .55);
}


/* ROLE */

.about-section .about-role {
    display: block;

    margin-top: 8px;
    margin-bottom: 30px;

    color: #e87948;

    font-size: 13px;

    font-weight: 700;
}


/* TEXT */

.about-section .about-text {
    max-width: 500px;

    margin: 0 0 15px;

    color: rgba(255, 255, 255, .82);

    font-size: 13px;

    line-height: 2.2;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, .7);
}


/* -------------------------
   NIETZSCHE QUOTE
   ------------------------- */

.about-section .about-quote {
    margin-top: 28px;

    padding-left: 17px;

    border-left:
        2px solid #e87948;
}

.about-section .about-quote p {
    margin: 0 0 7px;

    color: rgba(255, 255, 255, .92);

    font-size: 13px;

    line-height: 2;

    font-weight: 600;

    text-shadow:
        0 2px 15px rgba(0, 0, 0, .7);
}

.about-section .about-quote small {
    color: #e87948;

    font-size: 9px;

    font-weight: 700;
}


/* -------------------------
   BOTTOM META
   ------------------------- */

.about-section .about-meta {
    position: absolute;

    z-index: 5;

    right: 6%;
    bottom: 32px;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 6px;

    color: rgba(255, 255, 255, .55);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 2px;

    direction: ltr;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, .8);
}

.about-section .about-meta span:first-child {
    color: #e87948;
}


/* -------------------------
   HOVER
   ------------------------- */

.about-section .about-visual:hover > img {
    transform: scale(1.025);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .about-section .about-visual {
        height: 680px;
    }

    .about-section .about-content {
        left: 40px;
        right: 40px;

        top: auto;
        bottom: 90px;

        transform: none;

        width: auto;
    }

    .about-section .about-overlay {
        background:
            linear-gradient(
                to top,
                rgba(8, 11, 17, .94) 0%,
                rgba(8, 11, 17, .55) 50%,
                rgba(8, 11, 17, .08) 100%
            );
    }

    .about-section .about-meta {
        right: 40px;
        bottom: 27px;
    }
}


@media (max-width: 600px) {

    .about-section {
        margin-bottom: 100px;
    }

    .about-section .about-intro {
        margin-bottom: 35px;
    }

    .about-section .about-intro h2 {
        font-size: 35px;
    }

    .about-section .about-visual {
        height: 650px;
    }

    .about-section .about-content {
        left: 24px;
        right: 24px;

        bottom: 90px;
    }

    .about-section .about-content h3 {
        font-size: 43px;

        letter-spacing: -1px;
    }

    .about-section .about-role {
        margin-bottom: 22px;
    }

    .about-section .about-text {
        font-size: 12px;

        line-height: 2.05;
    }

    .about-section .about-quote {
        margin-top: 20px;
    }

    .about-section .about-quote p {
        font-size: 11px;
    }

    .about-section .about-meta {
        right: 24px;
        bottom: 23px;

        font-size: 7px;
    }
}
/* =========================================================
   LATEST POSTS — SECTION SEPARATOR
   ========================================================= */

.latest-section {
    position: relative;

    width: 100%;

    margin-top: 0;
    margin-bottom: 150px;

    padding-top: 115px;
    padding-bottom: 115px;

    background:
        linear-gradient(
            180deg,
            #11141d 0%,
            #171a24 50%,
            #11141d 100%
        );

    border-top:
        1px solid rgba(255, 255, 255, .06);

    border-bottom:
        1px solid rgba(255, 255, 255, .06);
}


/* یک خط بسیار ظریف تزئینی */

.latest-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: min(180px, 25%);

    height: 2px;

    background: #e87948;

    opacity: .75;
}


/* داخل بخش همچنان مرتب بماند */

.latest-section .latest-intro,
.latest-section .latest-feature {
    width: min(1180px, calc(100% - 80px));

    margin-left: auto;
    margin-right: auto;
}


@media (max-width: 600px) {

    .latest-section {
        padding-top: 80px;
        padding-bottom: 80px;

        margin-bottom: 100px;
    }

    .latest-section .latest-intro,
    .latest-section .latest-feature {
        width: calc(100% - 36px);
    }
}
/* =========================================================
   CONTACT — SMALLER / SEPARATED
   ========================================================= */

.contact-section {
    position: relative;

    width: min(1180px, calc(100% - 80px));

    margin: 0 auto 80px;

    padding-top: 95px;

    background: transparent;

    border: none;
}


/* خط جداکننده بالای Contact */

.contact-section::before {
    content: "";

    position: absolute;

    top: 0;
    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .13),
            transparent
        );
}


/* عنوان */

.contact-section .contact-intro {
    text-align: center;

    margin-bottom: 42px;
}


.contact-section .contact-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--accent);

    font-size: 9px;
    font-weight: 800;

    letter-spacing: 3px;

    direction: ltr;
}


.contact-section .contact-intro h2 {
    margin: 0;

    color: #f4f5f8;

    font-size: clamp(32px, 4vw, 48px);

    line-height: 1.2;

    font-weight: 900;

    letter-spacing: -1px;
}


.contact-section .contact-intro p {
    max-width: 560px;

    margin: 14px auto 0;

    color: #858e9f;

    font-size: 12px;

    line-height: 2;
}


/* کارت ها */

.contact-section .contact-links {
    gap: 8px;
}


.contact-section .contact-card {
    min-height: 215px;

    padding: 23px;

    background: #151821;

    border:
        1px solid rgba(255, 255, 255, .045);
}


.contact-section .contact-card-name {
    font-size: 19px;

    margin-bottom: 6px;
}


.contact-section .contact-card-value {
    font-size: 10px;
}


.contact-section .contact-card-icon {
    width: 36px;
    height: 36px;

    top: 20px;
    right: 20px;

    font-size: 14px;
}


.contact-section .contact-card-number {
    top: 20px;
    left: 20px;

    font-size: 8px;
}


.contact-section .contact-card-arrow {
    bottom: 21px;
    left: 21px;

    font-size: 17px;
}


.contact-section .contact-bottom {
    margin-top: 22px;

    padding-top: 16px;

    border-top:
        1px solid rgba(255, 255, 255, .045);

    font-size: 8px;
}


/* =========================================================
   CONTACT — RESPONSIVE
   ========================================================= */

@media (max-width: 950px) {

    .contact-section {
        width: min(100% - 48px, 700px);

        padding-top: 80px;
    }

    .contact-section .contact-links {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .contact-section {
        width: calc(100% - 36px);

        padding-top: 70px;

        margin-bottom: 60px;
    }

    .contact-section .contact-intro {
        margin-bottom: 32px;
    }

    .contact-section .contact-intro h2 {
        font-size: 34px;
    }

    .contact-section .contact-intro p {
        font-size: 11px;
    }

    .contact-section .contact-links {
        grid-template-columns: 1fr;
    }

    .contact-section .contact-card {
        min-height: 170px;
    }

    .contact-section .contact-bottom {
        flex-direction: column;

        align-items: flex-start;

        gap: 7px;
    }
}