/*=============== GOOGLE FONTS ===============*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap");
/*================fonts=======================*/
@font-face {
  font-family: 'yekan';
  src: url(../font/yekan/woff/IRANYekanWebBold.woff);
}
@font-face {
  font-family: 'yekan-1';
  src: url(../font/yekan/woff/IRANYekanWebRegular.woff);
}
@font-face {
  font-family: 'yekan-1-n';
  src: url(../font/yekan/ttf/iranyekanwebregularfanum.ttf);
}


/*=============== VARIABLES CSS ===============*/
:root {
  --header-height: 3.5rem;

  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  /*
        Purple: hsl(250, 66%, 75%)
        Blue: hsl(207, 90%, 72%)
        Pink: hsl(356, 66%, 75%)
        Teal: hsl(174, 63%, 62%)
  */
  /* Brand: electric purple + metallic silver on deep black (dark is the default theme) */
  --first-hue: 273;
  --sat: 100%;
  --lig: 59%;
  --second-hue: 228;
  --first-color: #922EFF;            /* electric purple */
  --first-color-alt: #C56BFF;        /* neon violet (hover) */
  --accent-color: #C56BFF;           /* neon violet */
  --link-color: #C56BFF;             /* purple used for TEXT on dark (readable contrast) */
  --brand-gradient: linear-gradient(135deg, #922EFF, #C56BFF);
  --title-color: #E5E7EF;            /* metallic silver */
  --text-color: color-mix(in srgb, #E5E7EF 74%, #9295A5);
  --text-color-light: #9295A5;       /* soft silver */
  --body-color: #090B10;             /* deep black */
  --container-color: #171923;        /* charcoal */
  --border-color: #292D39;
  --dark-purple: #302044;
  --glow-color: rgba(177, 74, 255, .35);   /* #B14AFF */

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  --body-font: 'yekan-1', sans-serif;
  --biggest-font-size: 1.75rem;
  --h1-font-size: 1.5rem;
  --h2-font-size: 1.25rem;
  --h3-font-size: 1rem;
  --normal-font-size: .938rem;
  --small-font-size: .813rem;
  --smaller-font-size: .75rem;
  --tiny-font-size: .625rem;

  /*========== Font weight ==========*/
  --font-medium: 500;
  --font-semibold: 600;

  /*========== z index ==========*/
  --z-tooltip: 10;
  --z-fixed: 100;
  --z-modal: 1000;
}

/* Responsive typography */
@media screen and (min-width: 968px) {
  :root {
    --biggest-font-size: 2.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
  }
}

/*=============== BASE ===============*/
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  scroll-behavior: smooth;
}

body,
button,
input,
textarea {
  font-family: var(--body-font);
  font-size: var(--normal-font-size);
  direction:ltr!important;
}

body {
  background-color: var(--body-color);
  color: var(--text-color);
  transition: .4s; /* for light mode animation */
}

h1, h2, h3 {
  color: var(--title-color);
  font-weight: var(--font-semibold);
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
  border: none;
  outline: none;
}

img {
  max-width: 100%;
  height: auto;
}

/*=============== THEME ===============*/
.change-theme {
  font-size: 1.25rem;
  cursor: pointer;
  transition: 0.3s;
}
.change-theme:hover {
  color: var(--link-color);
}

/*========== Variables Dark theme ==========*/
body.light-theme {
  --first-hue: 271;
  --sat: 82%;
  --lig: 54%;
  --first-color: #7B2BEA;
  --first-color-alt: #922EFF;
  --accent-color: #922EFF;
  --link-color: #7B2BEA;
  --title-color: #20212A;
  --text-color: color-mix(in srgb, #20212A 48%, #686B78);
  --text-color-light: #686B78;
  --body-color: #F8F9FC;
  --container-color: #FFFFFF;
  --border-color: #E4E5EC;
  --glow-color: rgba(123, 43, 234, .25);
}


/*========== 
    Color changes in some parts of 
    the website, in light theme
==========*/
.light-theme .scroll-header {
  box-shadow: 0 2px 4px hsla(0, 0%, 1%, 0.1);
}
.light-theme .nav__menu {
  background-color: hsl(var(--second-hue), 32%, 90%, 0.8);
}
.light-theme .home__social-link {
  box-shadow: 0 2px 8px hsl(var(--second-hue), 48%, 8%, 0.1);
}
.light-theme .home__social-link,
.light-theme .home__scroll,
.light-theme .button,
.light-theme .button:hover,
.light-theme .active-work,
.light-theme .footer__title,
.light-theme .footer__link,
.light-theme .footer__copy {
  color: var(--title-color);
}
.light-theme .footer__social-link {
  background-color: var(--title-color);
}
.light-theme .about-box{
  box-shadow: 0 2px 8px hsl(var(--second-hue), 48%, 8%, 0.1);
}
.light-theme .skills__content,
.light-theme .services__card,
.light-theme .work__card,
.light-theme .testimonial__card,
.light-theme .contact__card{
  box-shadow: 0 2px 16px hsl(var(--second-hue), 48%, 8%, 0.1);

}
/*=============== REUSABLE CSS CLASSES ===============*/
.container {
  max-width: 968px;
  margin-left: 1rem;
  margin-right: 1rem;
}

.grid {
  display: grid;
  gap: 1.25rem;
}

.main {
  overflow: hidden;
}

.section {
  padding: 4.5rem 0 1rem;
}

.section__title, 
.section__subtitle {
  text-align: center;
}

.section__title {
  font-size: var(--h2-font-size);
  color: var(--link-color);
  margin-bottom: 2rem;
}

.section__subtitle {
  display: block;
  font-size: var(--smaller-font-size);
  color: var(--text-color-light);
}

/*=============== HEADER & NAV===============*/
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--body-color);
  z-index: var(--z-fixed);
}
.nav {
  height: var(--header-height);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav__logo {
  font-family: 'Poppins';
  color: var(--link-color);
  transition: 4s;
  font-size: 1.5rem;
  font-weight: 600;
}
.nav__logo:hover {
  color: var(--first-color-alt);
}
.nav__menu {
  position: fixed;
  bottom: 1rem;
  background-color: hsl(var(--second-hue), 32%, 16%, 0.8);
  width: 90%;
  border-radius: 4rem;
  padding: 1rem 2.25rem;
  backdrop-filter: blur(10px);
  transition: .4s; /* for light mode animation */

}
.nav__list {
  display: flex;
  justify-content: space-between;
  align-items: center;

}
.nav__link{
  color: var(--text-color);
  font-size: 1.5rem;
  padding: 0.4rem;
  display: flex;
  border-radius: 5rem;
}
/* Active link */
.active-link {
  background: linear-gradient(180deg,
               hsl(var(--first-hue), var(--sat), var(--lig), 1),
               hsl(var(--first-hue), var(--sat), var(--lig), 0.2)
  );
  box-shadow: 0 0 16px hsl(var(--first-hue), var(--sat), var(--lig), 0.4);
  color: var(--title-color);
}

/* Change background header */
.scroll-header {
  box-shadow: 0 0 16px hsla(0, 0%, 4%, 0.3);
}


/*=============== HOME ===============*/
.home__container {
  position: relative;
  row-gap: 4.5rem;
  padding-top: 2rem;
}
.home__data {
  text-align: center;
}
.home__greeting,
.home__education
 {
   font-family: 'yekan';
   font-size: 1.2rem;

}
.home__greeting {
  display: block;
  color: var(--title-color);
  margin-bottom: 0.25rem;
}
.home__education {
  font-family: 'yekan';
  margin-bottom: 2.5rem;
}
.home__name {
  font-size: var(--biggest-font-size);
  margin-bottom: 0.50rem;
}
.home__img {
  width: 160px;
}
.home__handle {
  justify-self: center;
  width: 190px;
  height: 293px;
  background: linear-gradient(180deg,
              hsl(var(--first-hue), var(--sat), var(--lig), 1),
              hsl(var(--first-hue), var(--sat), var(--lig), 0.2)
  );
  border-radius: 10rem 10rem 1rem 1rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.home__buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.home__social,
.home__scroll {
  position: absolute;
}
.home__social {
  bottom: 5rem;
  right: 0;
  display: grid;
  row-gap: 0.5rem;
}
.home__social-link {
  width: max-content;
  background-color: var(--container-color);
  color: var(--link-color);
  padding: 0.25rem;
  border-radius: 0.25rem;
  display: flex;
  font-size: 1rem;
  transition: 0.4s;
}
.home__social-link:hover {
  background-color: var(--first-color);
  color: #fff;
}
.home__scroll {
  color: var(--link-color);
  left: 1rem;
  bottom: 5rem;
  display: grid;
  row-gap: 2.25rem;
  justify-items: center;
}
.home__scroll-icon{
  font-size: 1.25rem;
}
.home__scroll-name {
  font-size: var(--smaller-font-size);
  transform: rotate(-90deg);
}
/*=============== BUTTONS ===============*/
.button {
  display: inline-block;
  background-color: var(--first-color);
  color: var(--body-color);
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-weight: var(--font-medium);
  transition: 0.4s;
}
.button:hover {
  background-color: var(--first-color-alt);
  color: var(--body-color);
}
.button--ghost {
  background-color: transparent;
  border: 2px solid var(--first-color);
  color: var(--link-color);
}
/*=============== ABOUT ===============*/
.about__container {
  row-gap: 2.5rem;
}
.about-img {
  width: 220px;
  border-radius: 1.5rem;
  justify-self: center;
}
.about__data {
  text-align: center;
}
.about__info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 2rem;
}
.about-box {
  background-color: var(--container-color);
  border-radius: 0.75rem;
  padding: 0.75rem 0.5rem;
}
.about-icon {
  font-size: 1.5rem;
  color: var(--link-color);
  margin-bottom: 0.5rem;
}
.about__title {
  font-family: 'yekan-1-n';
  font-size: var(--small-font-size);
}
.about__subtitle {
  font-family: 'yekan-1-n';
  font-size: var(--tiny-font-size);
}
.about__description {
  font-family: 'yekan-1';
  text-align: justify;
  margin-bottom: 1.3rem;
}
/*=============== SKILLS ===============*/
.skills__container {
  row-gap: 2rem;
  padding-top: 1rem;
}
.skills__content {
  background-color: var(--container-color);
  padding: 1.5rem;
  border-radius: 1.25rem;
}
.skills__title {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  color: var(--link-color);
  text-align: center;
  margin-bottom: 1.5rem;
}
.skills__box {
  display: flex;
  justify-content: center;
  column-gap: 2.5rem;
}
.skills__group {
  display: grid;
  row-gap: 1rem;
}
.skills__data {
  display: flex;
  column-gap: 0.5rem;
}
.skills .bxs-badge-check {
  font-size: 1rem;
  color: var(--link-color);
}
.skills__name {
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  line-height: 18px;
}
.skills__level {
  font-family: 'yekan-1';
  font-size: var(--tiny-font-size);

}
/*=============== SERVICES ===============*/
.services__container {
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  padding-top: 1rem;
}
.services__card {
  background-color: var(--container-color);
  padding: 3rem 1.5rem;
  border-radius: 1rem;
  text-align: center;
}
.services__title {
  font-family: 'yekan-1';
  font-size: var(--h3-font-size);
  margin-bottom: 2.5rem;
}
.services__button {
  color: var(--link-color);
  font-size: var(--small-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.25rem;
  cursor: pointer;
}
.services__button:hover .services__icon {
  transform: translateX(0.25rem);

}
.services__icon {
  font-size: 1rem;
  transition: 0.4s;
}

/* Services modal */
.services__modal {
  position: fixed;
  inset: 0;
  background-color: hsla(var(--second-hue), 28%, 16%, 0.7);
  padding: 2rem 1rem;
  display: grid;
  place-items: center;
  visibility: hidden;
  opacity: 0;
 transition: 0.4s;
 z-index: var(--z-modal);
}
.services__modal-content {
  position: relative;
  background-color: var(--body-color);
  padding: 4.5rem 1.5rem 2.5rem;
  border-radius: 1.5rem;
}
.services__modal-title {
  font-size: var(--h3-font-size);
  color: var(--link-color);
  margin-bottom: 1rem;
}
.services__modal-description {
  font-family: 'yekan-1';
  font-size: var(--small-font-size);
  margin-bottom: 2rem;
  text-align: justify;
}
.services__modal-list {
  display: grid;
  row-gap: 0.75rem;
}
.services__modal-item{
  display: flex;
  align-items: flex-start;
  column-gap: 0.5rem;
}
.services__modal-icon {
  font-size: 1.5rem;
  color: var(--link-color);
}
.services__modal-info {
  font-family: 'yekan-1';
  font-size: var(--small-font-size);
  text-align: justify;
}
.services__modal-close {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 1.5rem;
  color: var(--link-color);
  cursor: pointer;
}
/*Active modal*/
.active-modal{
  opacity: 1;
  visibility: visible;
}


/*=============== WORK ===============*/
.work__container {
  padding-top: 1rem;
}
.work__filters {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.work__item {
  cursor: pointer;
  color: var(--title-color);
  padding: 0.25rem 0.75rem;
  font-weight: var(--font-medium);
  border-radius: 0.5rem;

}
.work__card {
  background-color: var(--container-color);
  padding: 1rem;
  border-radius: 1rem;
}
.work__img {
  border-radius: 1rem;
  margin-bottom: 0.75rem;
}
.work__title {
  font-family: 'yekan-1';
  font-size: var(--normal-font-size);
  font-weight: var(--font-medium);
  margin-bottom: 0.5rem;
}
.work__button {
  width: max-content;
  color: var(--link-color);
  font-size: var(--small-font-size);
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}
.work__button:hover .work__icon  {
  transform: translateX(-0.25rem);
}
.work__icon {
  font-size: 1rem;
  transition: 0.4s;
}
/* Active item work*/
.active-work {
  background-color: var(--first-color);
  color: var(--body-color);
}
/*=============== TESTIMONIAL ===============*/
.testimonial__card {
  background-color: var(--container-color);
  padding: 1.25rem 1.5rem;
  border-radius: 1.5rem;
  margin-bottom: 3rem;
}
.testimonial__img {
  width: 60px;
  border-radius: 3rem;
  margin-bottom: 1rem;
}
.testimonial__name {
    font-family: 'yekan-1';
    font-size: var(--normal-font-size);
    margin-bottom: 0.25rem;
    height: 55px;
}
.testimonial__description {
    font-size: var(--small-font-size);
    text-align: justify;
    max-height: 125px;
    overflow: auto;
    padding: 10px;
}

/* Swiper class */
.swiper-pagination-bullet {
  background-color: var(--text-color-light);
}
.swiper-pagination-bullet-active{
  background-color: var(--first-color);
}
/*=============== CONTACT ===============*/
.contact__container {
  row-gap: 3rem;
  padding-bottom: 3rem;
}
.contact__title {
  text-align: center;
  font-size: var(--h3-font-size);
  margin-bottom: 1.5rem;
}
.contacr__info {
  display: grid;
  gap: 1rem;
}
.contact__card {
  background-color: var(--container-color);
  padding: 1rem;
  border-radius: 0.75rem;
  text-align: center;
}
.contact__card-icon {
  font-size: 2rem;
  color: var(--title-color);
  margin-bottom: 0.25rem;
}
.contact__card-title,
.contact__card_data {
  font-size: var(--small-font-size);
  margin-bottom: 0.75rem;

}
.contact__card-title {
  font-weight: var(--font-medium);
}
.contact__card_data {
  display: block;
}
.contact__button {
  color: var(--link-color);
  font-size: var(--small-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.25rem;
}
.contact__button:hover .contact__button-icon{
  transform: translateX(-0.25rem)
}
.contact__button-icon {
  font-size: 1rem;
  transition: 0.4s;
}
.contact__form-div {
  position: relative;
  margin-bottom: 2rem;
  height: 4rem;
}
.contact__form-input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: 2px solid var(--text-color-light);
  background: none;
  color: var(--text-color);
  outline: none;
  padding: 1.5rem;
  border-radius: 0.75rem;
  z-index: 1;
}
.contact__form-tag {
  position: absolute;
  top: -0.75rem;
  right: 1.25rem;
  font-size: var(--smaller-font-size);
  padding: 0.25rem;
  background-color: var(--body-color);
  z-index: 10;
}
.contact__form-area {
  height: 11rem;
}
.contact__form-area textarea {
  resize: none;
}
/*=============== FOOTER ===============*/
.footer {
  background-color: var(--first-color);
}
.footer__container {
  padding: 2rem 0 6rem;
}
.footer__title,
.footer__link {
  color: var(--body-color);
}
.footer__title {
  text-align: center;
  margin-bottom: 2rem;
}
.footer__list {
  display: flex;
  justify-content: center;
  column-gap: 1.5rem;
  margin-bottom: 2rem;
}
.footer__social {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 1.25rem;
}
.footer__social-link {
  background-color: var(--body-color);
  color: var(--link-color);
  padding: 0.25rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  display: inline-flex;
}
.footer__copy {
  display: block;
  margin-top: 4rem;
  color: var(--container-color);
  text-align: center;
  font-size: var(--small-font-size);
}
/*=============== SCROLL BAR ===============*/
::-webkit-scrollbar {
  width: 0.6rem;
  border-radius: 0.5rem;
  background-color: hsl(var(--second-hue), 8%, 38%);
}
::-webkit-scrollbar-thumb {
  background-color: hsl(var(--second-hue), 8%, 26%);
  border-radius: 0.5rem;
}


/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 320px) {
  .nav__menu {
    padding: 1rem 1.5rem;
  }
  .home__buttons {
    flex-direction: column;
  }
  .home__handle {
    width: 150px;
    height: 253px;
  }
  .home__img {
    width: 130px;
  }
  .services__container {
    grid-template-columns: 165px;
    justify-content: center;
  }
  
}
/* For medium devices */
@media screen and (min-width: 576px) {
  .nav__menu {
    width: 328px;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .about__info {
    grid-template-columns: repeat(3, 140px);
    justify-content: center;
  }
  .about__description {
    padding: 0 5rem;
  }
  .skills__container {
    justify-content: center;
  }
  .skills__content {
    padding: 2rem 4rem;
  }
  .services__container {
    grid-template-columns: repeat(2, 180px);
    justify-content: center;
  }
  .services__modal-content {
    width: 500px;
    padding: 4.5rem 2.5rem;
  }
  .services__modal-description {
    padding: 0 3.5rem;
  }
  .work__container {
    justify-content: center;
  }
  .work__img {
    width: 295px;
  }
  .contacr__info {
    grid-template-columns: 300px;
    justify-content: center;
  }
  .contact__form {
    width: 360px;
    margin: 0 auto;
  }

}
@media screen and (min-width: 767px) {
  .work__container {
    grid-template-columns: repeat(2, max-content);
  }
  .contact__container {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: 3rem;
  }
}

/* For large devices */
@media screen and (min-width: 992px) {
  .container {
    margin-left: auto;
    margin-right: auto;
  }
  .section {
    padding: 6.5rem 0 1rem;
  }
  .nav {
    height: calc(var(--header-height) + 1rem);
  }
  .home__handle {
    width: 290px;
    height: 400px;
  }
  .home__img {
    width: 220px;
  }
  .home__social-link {
    padding: 0.4rem;
    font-size: 1.25rem;
  }
  .home__scroll-icon {
    font-size: 2rem;
  }
  .about__container {
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    column-gap: 4rem;
  }
  .about-img {
    width: 350px;
  }
  .about__data {
    text-align: initial;
  }
  .about__info {
    justify-content: center;
  }
  .about-box {
    text-align: center;
  }
  .about__description {
    padding: 0 0 0 4rem;
    margin-bottom: 1.3rem;
  }
  .skills__container {
    grid-template-columns: repeat(2, 350px);
    column-gap: 3rem;
  }
  .services__container {
    grid-template-columns: repeat(4, 215px);
    column-gap: 3rem;
  }
  .work__container {
    gap: 3rem;
  }
  .work__card {
    padding: 1.25rem;
  }
  .testimonial__container {
    width: 750px;
  }
  .testimonial__card {
    padding: 1.5rem 2rem;
  }
  .contact__container {
    column-gap: 6rem;
  }
  .footer__social-link {
    font-size: 1.25rem;
    padding: 0.4rem;
    border-radius: 0.5rem;
  }
}

.shadow-yelloow {
    text-align: right;
    border: 1px solid;
    border-radius: 20px;
    padding: 5px 18px;
    box-shadow: 0 0 13px 0 #fbbd00;
    background: #ffffff;
    color: white;
    background-color: #0b111e;
    margin-left: 11px;
}
.videos {
    width: 400px;
    height: 324px;
}

/*=============== USABILITY ADDITIONS ===============*/
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
section[id] { scroll-margin-top: 4.5rem; }
.skip-link { position: absolute; top: -4rem; inset-inline-start: 1rem; z-index: 1000; padding: .6rem 1rem; border-radius: .5rem; background: var(--first-color); color: #fff; transition: top .2s; }
.skip-link:focus { top: .75rem; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, .nav__link:focus-visible { outline: 2px solid var(--first-color); outline-offset: 3px; border-radius: .4rem; }
.change-theme-btn { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; display: inline-flex; }
.nav__logo img { max-width: 100%; height: auto; max-height: 3rem; width: auto; }
.work__filters button.work__item, .services__button, .services__modal-close-btn { background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.services__modal-close-btn { position: absolute; top: 1rem; inset-inline-end: 1rem; padding: 0; line-height: 1; }
.work__img, .about-img, .home__img, .testimonial__img { max-width: 100%; height: auto; }
.contact__alert { padding: .9rem 1.1rem; border-radius: .75rem; margin-bottom: 1.25rem; font-size: var(--small-font-size); }
.contact__alert--ok { background: hsla(145, 60%, 40%, .18); border: 1px solid hsl(145, 55%, 45%); }
.contact__alert--error { background: hsla(0, 70%, 50%, .15); border: 1px solid hsl(0, 65%, 55%); }
.contact__hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.contact__form-input:focus { outline: 2px solid var(--first-color); outline-offset: 2px; }
.footer__list, .footer__social { list-style: none; padding: 0; }
.footer__tools { display: flex; gap: 1.25rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; font-size: var(--smaller-font-size); }
.footer__tool { color: var(--text-color-light); display: inline-flex; align-items: center; gap: .25rem; }
.footer__tool:hover { color: var(--link-color); }
.notfound { text-align: center; padding-top: 8rem; }
.notfound__code { font-size: 5rem; color: var(--link-color); line-height: 1; }
.notfound__text { margin: 1rem 0 2rem; }
@media screen and (max-width: 400px) { .nav__menu { padding: .8rem 1.1rem; } .nav__link { font-size: 1.3rem; } }
.services__modal-close-btn .services__modal-close { position: static; }


/*=============== ARTICLES (list + detail) — redesign ===============*/
.articles, .article { --a-border: var(--border-color); --a-glow: var(--glow-color); }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; font-size: var(--small-font-size); color: var(--text-color-light); margin-bottom: 1.5rem; }
.crumbs a { color: var(--text-color-light); transition: color .2s; }
.crumbs a:hover { color: var(--link-color); }
.crumbs i { font-size: 1rem; opacity: .7; }
.crumbs span[aria-current] { color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.articles .container, .article .container { max-width: 1120px; }

/* hero */
.articles__head { position: relative; text-align: center; margin-bottom: 2.5rem; padding: 2.5rem 1rem 2rem; border-radius: 2rem; border: 1px solid var(--a-border); background: radial-gradient(70% 140% at 50% -10%, hsla(var(--first-hue), var(--sat), var(--lig), .2), transparent 70%), var(--container-color); overflow: hidden; }
.articles__head::before, .articles__head::after { content: ""; position: absolute; width: 14rem; height: 14rem; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; }
.articles__head::before { top: -7rem; inset-inline-start: -5rem; background: hsl(var(--first-hue), var(--sat), var(--lig)); }
.articles__head::after { bottom: -8rem; inset-inline-end: -5rem; background: var(--accent-color); }
.articles__head > * { position: relative; z-index: 1; }
.articles__eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem; border-radius: 3rem; background: hsla(var(--first-hue), var(--sat), var(--lig), .14); border: 1px solid hsla(var(--first-hue), var(--sat), var(--lig), .35); color: var(--link-color); font-size: var(--smaller-font-size); font-weight: var(--font-semibold); margin-bottom: .9rem; }
.articles__title { font-size: 2rem; line-height: 1.5; margin-bottom: .5rem; background: linear-gradient(90deg, var(--first-color), var(--accent-color)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.articles__sub { color: var(--text-color); margin: 0 auto 1.5rem; max-width: 34rem; }
.asearch { display: flex; align-items: center; gap: .5rem; max-width: 520px; margin: 0 auto; background: var(--body-color); border: 1px solid var(--a-border); border-radius: 3rem; padding: .35rem; padding-inline-start: 1.1rem; transition: border-color .25s, box-shadow .25s; }
.asearch:focus-within { border-color: var(--first-color); box-shadow: 0 0 0 4px hsla(var(--first-hue), var(--sat), var(--lig), .18); }
.asearch__input:focus, .asearch__input:focus-visible { outline: 0 !important; box-shadow: none; }
.asearch__icon { font-size: 1.25rem; color: var(--text-color-light); }
.asearch__input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--title-color); font: inherit; padding: .6rem .25rem; }
.asearch__btn { background: linear-gradient(135deg, var(--first-color), var(--accent-color)); color: #fff; border: 0; border-radius: 3rem; padding: .6rem 1.3rem; font: inherit; font-weight: var(--font-semibold); cursor: pointer; transition: transform .2s, box-shadow .2s; }
.asearch__btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--a-glow); }
.articles__clear { display: inline-flex; align-items: center; gap: .15rem; margin-top: 1rem; font-size: var(--small-font-size); color: var(--link-color); }
.articles__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.articles__empty { text-align: center; padding: 3rem 1rem; color: var(--text-color-light); }
.articles__empty i { font-size: 3.5rem; color: var(--link-color); opacity: .6; }

/* card */
.acard { position: relative; display: flex; flex-direction: column; background: var(--container-color); border: 1px solid var(--a-border); border-radius: 1.25rem; overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .35s; }
.acard:hover { transform: translateY(-6px); border-color: hsla(var(--first-hue), var(--sat), var(--lig), .5); box-shadow: 0 18px 40px hsla(0, 0%, 0%, .32), 0 0 0 1px hsla(var(--first-hue), var(--sat), var(--lig), .15); }
.acard__media { position: relative; aspect-ratio: 16 / 9; background: hsl(var(--second-hue), 32%, 16%); overflow: hidden; }
.acard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, hsla(var(--second-hue), 48%, 6%, .55)); pointer-events: none; }
.acard__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2, .8, .2, 1); }
.acard:hover .acard__img { transform: scale(1.07); }
.acard__ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 3rem; color: var(--link-color); opacity: .55; background: linear-gradient(135deg, hsla(var(--first-hue), var(--sat), var(--lig), .15), transparent); }
.acard__badge { position: absolute; z-index: 2; top: .85rem; inset-inline-end: .85rem; display: inline-flex; align-items: center; gap: .25rem; background: linear-gradient(135deg, var(--first-color), var(--accent-color)); color: #fff; font-size: var(--smaller-font-size); font-weight: var(--font-semibold); padding: .3rem .8rem; border-radius: 3rem; box-shadow: 0 4px 14px var(--a-glow); }
.acard__date { position: absolute; z-index: 2; bottom: .8rem; inset-inline-start: .85rem; display: inline-flex; align-items: center; gap: .3rem; font-size: var(--smaller-font-size); color: #fff; background: hsla(var(--second-hue), 40%, 10%, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: .28rem .7rem; border-radius: 3rem; border: 1px solid hsla(0, 0%, 100%, .15); }
.acard__body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.15rem 1.1rem; flex: 1; }
.acard__title { font-size: 1rem; line-height: 1.75; color: var(--title-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acard__link { color: inherit; }
.acard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.acard:hover .acard__link { color: var(--link-color); }
.acard__excerpt { color: var(--text-color); font-size: var(--small-font-size); line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.acard__foot { margin-top: auto; padding-top: .9rem; border-top: 1px dashed var(--a-border); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.acard__read { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--smaller-font-size); color: var(--text-color-light); }
.acard__read i { color: var(--link-color); font-size: 1rem; }
.acard__more { display: inline-flex; align-items: center; gap: .4rem; color: var(--link-color); font-weight: var(--font-semibold); font-size: var(--small-font-size); }
.acard__more i { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: hsla(var(--first-hue), var(--sat), var(--lig), .15); font-size: 1.1rem; transition: background .3s, color .3s, transform .3s; }
.acard:hover .acard__more i { background: var(--first-color); color: #fff; transform: translateX(-3px); }
[dir="ltr"] .acard:hover .acard__more i { transform: translateX(3px); }

/* featured card */

/* pager */
.apager { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 2.5rem; }
.apager__num, .apager__btn { min-width: 2.7rem; height: 2.7rem; padding: 0 1rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; background: var(--container-color); border: 1px solid var(--a-border); color: var(--text-color); font-size: var(--small-font-size); transition: .25s; }
.apager__num:hover, .apager__btn:hover { color: var(--link-color); border-color: var(--first-color); transform: translateY(-2px); }
.apager__num.is-active { background: linear-gradient(135deg, var(--first-color), var(--accent-color)); border-color: transparent; color: #fff; font-weight: var(--font-semibold); box-shadow: 0 6px 16px var(--a-glow); }
.apager__dots { color: var(--text-color-light); }

/* ----- article detail ----- */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--first-color), var(--accent-color)); transform: scaleX(0); transform-origin: 0 50%; z-index: calc(var(--z-fixed) + 1); box-shadow: 0 0 10px hsla(var(--first-hue), var(--sat), var(--lig), .35); }
[dir="rtl"] .reading-progress { transform-origin: 100% 50%; }
.article__wrap { max-width: 820px !important; }
.article__head { margin-bottom: 1.75rem; }
.article__tag { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .9rem; border-radius: 3rem; background: hsla(var(--first-hue), var(--sat), var(--lig), .14); border: 1px solid hsla(var(--first-hue), var(--sat), var(--lig), .35); color: var(--link-color); font-size: var(--smaller-font-size); font-weight: var(--font-semibold); margin-bottom: 1rem; }
.article__title { font-size: 1.7rem; line-height: 1.6; color: var(--title-color); margin-bottom: .75rem; }
.article__lead { font-size: 1.08rem; color: var(--text-color); line-height: 1.95; margin-bottom: 1.25rem; padding-inline-start: 1rem; border-inline-start: 3px solid var(--first-color); }
.article__meta { display: flex; flex-wrap: wrap; gap: .5rem; font-size: var(--smaller-font-size); color: var(--text-color); }
.article__meta > span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 3rem; background: var(--container-color); border: 1px solid var(--a-border); }
.article__meta i { color: var(--link-color); font-size: 1rem; }
.article__cover { margin: 0 0 2rem; border-radius: 1.75rem; overflow: hidden; background: var(--container-color); border: 1px solid var(--a-border); box-shadow: 0 20px 50px hsla(0, 0%, 0%, .35); }
.article__cover img { width: 100%; height: auto; max-height: 480px; object-fit: cover; display: block; }

.toc { background: var(--container-color); border: 1px solid var(--a-border); border-inline-start: 4px solid var(--first-color); border-radius: 1.25rem; padding: 1.1rem 1.4rem; margin-bottom: 2rem; }
.toc summary { cursor: pointer; font-weight: var(--font-semibold); color: var(--title-color); display: flex; align-items: center; gap: .5rem; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; padding: 0; margin: .9rem 0 0; display: grid; gap: .1rem; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc li a { display: flex; gap: .6rem; padding: .35rem .5rem; border-radius: .6rem; color: var(--text-color); font-size: var(--small-font-size); transition: .2s; }
.toc li a::before { content: counter(toc); min-width: 1.5rem; height: 1.5rem; display: inline-grid; place-items: center; border-radius: 50%; background: hsla(var(--first-hue), var(--sat), var(--lig), .15); color: var(--link-color); font-size: .7rem; font-weight: var(--font-semibold); }
.toc li a:hover { background: hsla(var(--first-hue), var(--sat), var(--lig), .1); color: var(--link-color); }
.toc .toc__l3 { padding-inline-start: 1.5rem; }

.article__content { font-size: 1rem; line-height: 2.15; color: var(--text-color); overflow-wrap: anywhere; text-align: start; }
.article__content > * + * { margin-top: 1.15rem; }
.article__content h2, .article__content h3, .article__content h4 { color: var(--title-color); line-height: 1.7; margin-top: 2.2rem; scroll-margin-top: 5rem; }
.article__content h2 { font-size: 1.35rem; display: flex; align-items: center; gap: .6rem; }
.article__content h2::before { content: ""; flex: none; width: .35rem; height: 1.5rem; border-radius: 1rem; background: linear-gradient(180deg, var(--first-color), var(--accent-color)); }
.article__content h3 { font-size: 1.15rem; }
.article__content a { color: var(--link-color); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.article__content a:hover { text-decoration-thickness: 2px; }
.article__content img { max-width: 100%; height: auto; border-radius: 1.1rem; margin-inline: auto; display: block; }
.article__content figure { margin: 1.75rem 0; }
.article__content figcaption { text-align: center; font-size: var(--small-font-size); color: var(--text-color-light); margin-top: .5rem; }
.article__content ul, .article__content ol { padding-inline-start: 1.5rem; }
.article__content ul { list-style: disc; } .article__content ol { list-style: decimal; }
.article__content li::marker { color: var(--link-color); }
.article__content li + li { margin-top: .4rem; }
.article__content blockquote { position: relative; border-inline-start: 4px solid var(--first-color); background: linear-gradient(135deg, hsla(var(--first-hue), var(--sat), var(--lig), .1), var(--container-color)); padding: 1rem 1.3rem; border-radius: 1rem; color: var(--title-color); }
.article__content pre, .article__content code { direction: ltr; text-align: left; font-family: Consolas, 'Courier New', monospace; }
.article__content pre { background: hsl(var(--second-hue), 48%, 5%); border: 1px solid var(--a-border); padding: 1.1rem 1.3rem; border-radius: 1.1rem; overflow-x: auto; line-height: 1.7; font-size: .9rem; color: hsl(var(--second-hue), 15%, 85%); }
.article__content :not(pre) > code { background: var(--container-color); border: 1px solid var(--a-border); padding: .1rem .45rem; border-radius: .45rem; font-size: .88em; }
.article__content .table-wrap { overflow-x: auto; border-radius: 1rem; border: 1px solid var(--a-border); }
.article__content table { border-collapse: collapse; width: 100%; min-width: 480px; }
.article__content th, .article__content td { padding: .7rem 1rem; border-bottom: 1px solid var(--a-border); text-align: start; }
.article__content th { background: var(--container-color); color: var(--title-color); }
.article__content iframe, .article__content video { max-width: 100%; border-radius: 1.1rem; }
.article__content hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--first-color), transparent); margin: 2rem 0; }

.share { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; margin-top: 3rem; padding: 1rem 1.25rem; background: var(--container-color); border: 1px solid var(--a-border); border-radius: 1.25rem; }
.share__label { color: var(--title-color); font-size: var(--small-font-size); font-weight: var(--font-semibold); margin-inline-end: auto; }
.share__btn { width: 2.6rem; height: 2.6rem; display: inline-grid; place-items: center; background: var(--body-color); color: var(--text-color); border: 1px solid var(--a-border); border-radius: 50%; font-size: 1.25rem; cursor: pointer; transition: .25s; }
.share__btn:hover { background: var(--first-color); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 18px var(--a-glow); }

.related { margin-top: 4rem; padding-top: 2.5rem; border-top: 1px solid var(--a-border); }
.related__title { font-size: var(--h2-font-size); color: var(--title-color); text-align: center; margin-bottom: 1.75rem; }
.related__title::after { content: ""; display: block; width: 3.5rem; height: 4px; border-radius: 1rem; margin: .7rem auto 0; background: linear-gradient(90deg, var(--first-color), var(--accent-color)); }
.related__all { text-align: center; margin-top: 2rem; }
.pages__all { text-align: center; margin-top: 1rem; }

@media screen and (min-width: 576px) {
  .articles__grid { grid-template-columns: repeat(2, 1fr); }
  .articles__title { font-size: 2.5rem; }
  .article__title { font-size: 2.1rem; }
}
@media screen and (min-width: 992px) {
  .articles__grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
  .articles__head { padding: 3.25rem 2rem 2.5rem; }
  .articles__title { font-size: 3rem; }
  .article__title { font-size: 2.5rem; }
  .article__content { font-size: 1.06rem; }
}
@media screen and (max-width: 575px) {
  .share__label { width: 100%; }
}
.light-theme .acard:hover { box-shadow: 0 18px 40px hsla(var(--second-hue), 40%, 20%, .16); }
.light-theme .article__cover { box-shadow: 0 20px 50px hsla(var(--second-hue), 40%, 20%, .18); }
.light-theme .article__content pre { background: hsl(var(--second-hue), 20%, 96%); color: hsl(var(--second-hue), 30%, 20%); }
.light-theme .asearch, .light-theme .share__btn { background: #fff; }
.light-theme .acard__date { background: hsla(0, 0%, 100%, .75); color: hsl(var(--second-hue), 30%, 15%); border-color: hsla(0, 0%, 0%, .08); }
@media (prefers-reduced-motion: reduce) { .acard, .acard__img, .acard__more i, .share__btn { transition: none; } .acard:hover { transform: none; } }

/*=============== FOOTER (redesign) ===============*/
.ft { --f-border: var(--border-color); position: relative; margin-top: 3rem; padding: 3.5rem 0 7rem; background: radial-gradient(60% 80% at 50% 0%, hsla(var(--first-hue), var(--sat), var(--lig), .12), transparent 70%), var(--container-color); color: var(--text-color); overflow: hidden; }
.ft::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--first-color), var(--accent-color), transparent); }
.ft__grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
.ft__logo { display: inline-block; color: var(--link-color); font-family: 'Poppins'; font-size: 1.5rem; font-weight: 600; margin-bottom: .9rem; }
.ft__logo img { height: 2.75rem; width: auto; max-width: 100%; }
.ft__about { font-size: var(--small-font-size); line-height: 2; color: var(--text-color); max-width: 26rem; margin-bottom: 1.1rem; }
.ft__social, .ft__links, .ft__contact, .ft__posts { list-style: none; margin: 0; padding: 0; }
.ft__social { display: flex; flex-wrap: wrap; gap: .6rem; }
.ft__social-link { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: var(--body-color); border: 1px solid var(--f-border); color: var(--text-color); font-size: 1.25rem; transition: .25s; }
.ft__social-link:hover { background: var(--first-color); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: 0 8px 18px hsla(var(--first-hue), var(--sat), var(--lig), .35); }
.ft__heading { position: relative; font-size: 1.05rem; color: var(--title-color); margin-bottom: 1.1rem; padding-bottom: .7rem; }
.ft__heading::after { content: ""; position: absolute; bottom: 0; inset-inline-start: 0; width: 2.5rem; height: 3px; border-radius: 1rem; background: linear-gradient(90deg, var(--first-color), var(--accent-color)); }
.ft__links { display: grid; gap: .55rem; }
.ft__link { color: var(--text-color); font-size: var(--small-font-size); transition: color .2s, padding .25s; }
.ft__links .ft__link::before { content: "\2039"; margin-inline-end: .45rem; color: var(--link-color); }
[dir="ltr"] .ft__links .ft__link::before { content: "\203A"; }
.ft__links .ft__link:hover { color: var(--link-color); padding-inline-start: .3rem; }
.ft__contact { display: grid; gap: .8rem; font-size: var(--small-font-size); line-height: 1.8; }
.ft__contact li { display: flex; gap: .65rem; align-items: flex-start; }
.ft__contact i { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem; background: hsla(var(--first-hue), var(--sat), var(--lig), .14); color: var(--link-color); font-size: 1.1rem; }
.ft__contact a:hover { color: var(--link-color); }
.ft__posts { display: grid; gap: .85rem; }
.ft__post { display: flex; align-items: center; gap: .8rem; color: var(--text-color); }
.ft__post img, .ft__post-ph { flex: none; width: 3.5rem; height: 3.5rem; border-radius: .9rem; object-fit: cover; }
.ft__post-ph { display: grid; place-items: center; background: hsla(var(--first-hue), var(--sat), var(--lig), .14); color: var(--link-color); font-size: 1.4rem; }
.ft__post-text { display: grid; gap: .2rem; min-width: 0; }
.ft__post-title { font-size: var(--small-font-size); line-height: 1.6; color: var(--title-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.ft__post time { font-size: var(--smaller-font-size); color: var(--text-color-light); }
.ft__post:hover .ft__post-title { color: var(--link-color); }
.ft__bar { margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--f-border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .9rem; font-size: var(--smaller-font-size); color: var(--text-color-light); }
.ft__tools { display: flex; gap: 1.25rem; margin-inline-start: auto; }
.ft__tool { display: inline-flex; align-items: center; gap: .3rem; color: var(--text-color-light); transition: color .2s; }
.ft__tool:hover { color: var(--link-color); }
.ft__top { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--first-color), var(--accent-color)); color: #fff; font-size: 1.4rem; box-shadow: 0 6px 16px hsla(var(--first-hue), var(--sat), var(--lig), .35); transition: transform .25s; }
.ft__top:hover { transform: translateY(-3px); }
@media screen and (min-width: 576px) { .ft__grid { grid-template-columns: repeat(2, 1fr); } .ft__brand { grid-column: 1 / -1; } }
@media screen and (min-width: 992px) { .ft__grid { grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr; gap: 2.5rem; } .ft__brand { grid-column: auto; } }
.light-theme .ft__social-link { background: #fff; }
.light-theme .ft__about, .light-theme .ft__link, .light-theme .ft__post { color: hsl(var(--second-hue), 14%, 32%); }
@media (prefers-reduced-motion: reduce) { .ft__social-link, .ft__top, .ft__link { transition: none; } }

/*=============== ARTICLE DETAIL — page layout redesign ===============*/
.article { padding: 0; }
.ahero { --h-title: var(--title-color); --h-text: var(--text-color); --h-soft: var(--text-color-light); position: relative; isolation: isolate; padding: 6rem 0 2.5rem; margin-bottom: 2.5rem; background: radial-gradient(70% 120% at 50% -20%, hsla(var(--first-hue), var(--sat), var(--lig), .22), transparent 70%), var(--container-color); border-bottom: 1px solid var(--a-border, hsla(var(--second-hue), 20%, 60%, .16)); overflow: hidden; }
.ahero--img { --h-title: #fff; --h-text: hsla(0, 0%, 100%, .86); --h-soft: hsla(0, 0%, 100%, .7); min-height: 26rem; display: flex; align-items: flex-end; background: #0b1020; }
.ahero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); }
.ahero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ahero--img .ahero__shade { background: linear-gradient(180deg, hsla(var(--second-hue), 48%, 6%, .45) 0%, hsla(var(--second-hue), 48%, 6%, .55) 40%, hsla(var(--second-hue), 48%, 6%, .92) 100%); }
.ahero__in { width: 100%; max-width: 920px; }
.ahero .crumbs { margin-bottom: 1.1rem; }
.ahero .crumbs a, .ahero .crumbs i { color: var(--h-soft); }
.ahero .crumbs a:hover { color: var(--link-color); }
.ahero .crumbs span[aria-current] { color: var(--h-text); max-width: 22rem; }
.ahero--img .article__tag { background: hsla(0, 0%, 100%, .14); border-color: hsla(0, 0%, 100%, .3); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ahero__title { font-size: 1.75rem; line-height: 1.6; color: var(--h-title); margin: .3rem 0 .75rem; text-shadow: 0 2px 18px hsla(0, 0%, 0%, .25); }
.ahero__lead { font-size: 1.08rem; line-height: 1.95; color: var(--h-text); max-width: 46rem; margin-bottom: 1.25rem; }
.ahero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .6rem; font-size: var(--smaller-font-size); color: var(--h-text); }
.ahero__meta > span { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 3rem; background: hsla(0, 0%, 100%, .08); border: 1px solid hsla(0, 0%, 100%, .14); }
.ahero:not(.ahero--img) .ahero__meta > span { background: var(--body-color); border-color: var(--a-border, hsla(var(--second-hue), 20%, 60%, .16)); }
.ahero__meta i { color: var(--link-color); font-size: 1rem; }
.ahero__author { font-weight: var(--font-semibold); padding-inline-start: .3rem !important; }
.ahero__avatar, .author__avatar { display: inline-grid; place-items: center; border-radius: 50%; background: linear-gradient(135deg, var(--first-color), var(--accent-color)); color: #fff; font-weight: 700; font-family: 'Poppins', sans-serif; }
.ahero__avatar { width: 1.6rem; height: 1.6rem; font-size: .8rem; }

/* layout: content + sticky table of contents */
.article__layout { display: flex; flex-direction: column; gap: 1.75rem; max-width: 1120px; }
.article__layout--single { max-width: 800px; }
.article__main { min-width: 0; }
.article__side { order: -1; }
.article__side .toc { margin-bottom: 0; }
.toc li a.is-active { background: hsla(var(--first-hue), var(--sat), var(--lig), .16); color: var(--link-color); font-weight: var(--font-semibold); }
.article__content > p:first-of-type { font-size: 1.12em; color: var(--title-color); }

/* author card */
.author { display: flex; gap: 1.1rem; align-items: flex-start; margin-top: 2rem; padding: 1.4rem; border-radius: 1.5rem; background: linear-gradient(135deg, hsla(var(--first-hue), var(--sat), var(--lig), .1), var(--container-color)); border: 1px solid var(--a-border, hsla(var(--second-hue), 20%, 60%, .16)); }
.author__avatar { flex: none; width: 3.6rem; height: 3.6rem; font-size: 1.5rem; box-shadow: 0 8px 20px hsla(var(--first-hue), var(--sat), var(--lig), .35); }
.author__label { font-size: var(--smaller-font-size); color: var(--link-color); font-weight: var(--font-semibold); }
.author__name { font-size: 1.1rem; color: var(--title-color); margin: .1rem 0 .4rem; }
.author__bio { font-size: var(--small-font-size); line-height: 1.95; color: var(--text-color); margin-bottom: .6rem; }
.author__link { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--small-font-size); font-weight: var(--font-semibold); color: var(--link-color); }

/* previous / next */
.anav { display: grid; grid-template-columns: 1fr; gap: .9rem; margin-top: 1.5rem; }
.anav__item { display: grid; gap: .35rem; padding: 1rem 1.2rem; border-radius: 1.25rem; background: var(--container-color); border: 1px solid var(--a-border, hsla(var(--second-hue), 20%, 60%, .16)); transition: transform .3s, border-color .3s, box-shadow .3s; }
.anav__item:hover { transform: translateY(-3px); border-color: hsla(var(--first-hue), var(--sat), var(--lig), .5); box-shadow: 0 12px 28px hsla(0, 0%, 0%, .25); }
.anav__item--next { text-align: end; }
.anav__item--next .anav__dir { justify-content: flex-end; }
.anav__dir { display: flex; align-items: center; gap: .3rem; font-size: var(--smaller-font-size); color: var(--link-color); font-weight: var(--font-semibold); }
.anav__title { color: var(--title-color); font-size: var(--small-font-size); line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media screen and (min-width: 576px) {
  .ahero { padding-top: 7rem; }
  .ahero--img { min-height: 30rem; }
  .ahero__title { font-size: 2.2rem; }
  .anav { grid-template-columns: 1fr 1fr; }
  .anav__item:only-child { grid-column: 1 / -1; }
}
@media screen and (min-width: 992px) {
  .ahero--img { min-height: 34rem; }
  .ahero { padding-bottom: 3.25rem; }
  .ahero__title { font-size: 2.7rem; }
  .article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 3rem; align-items: start; }
  .article__layout--single { display: block; margin-inline: auto; }
  .article__side { order: 0; position: sticky; top: 5.5rem; max-height: calc(100vh - 7rem); overflow: auto; }
}
.light-theme .ahero:not(.ahero--img) { background: radial-gradient(70% 120% at 50% -20%, hsla(var(--first-hue), var(--sat), var(--lig), .25), transparent 70%), #fff; }
.light-theme .anav__item:hover { box-shadow: 0 12px 28px hsla(var(--second-hue), 40%, 20%, .14); }
@media (prefers-reduced-motion: reduce) { .anav__item { transition: none; } .anav__item:hover { transform: none; } }

/*=============== LOGIN ===============*/
body.is-bare .main { padding: 0; }
.is-bare .skip-link { display: none; }
.lg { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem 1rem; position: relative; background: radial-gradient(60% 50% at 15% 10%, hsla(var(--first-hue), var(--sat), var(--lig), .18), transparent 70%), radial-gradient(50% 45% at 90% 95%, hsla(calc(var(--first-hue) + 50), 70%, 65%, .14), transparent 70%), var(--body-color); }
.lg__card { width: 100%; max-width: 980px; display: grid; grid-template-columns: 1fr; border-radius: 2rem; overflow: hidden; background: var(--container-color); border: 1px solid hsla(var(--second-hue), 20%, 60%, .18); box-shadow: 0 30px 70px hsla(0, 0%, 0%, .4); }
.lg__brand { position: relative; isolation: isolate; display: none; flex-direction: column; justify-content: center; gap: 1.5rem; padding: 3rem 2.5rem; color: #fff; background: linear-gradient(145deg, #922EFF, #7a27d6 45%, #302044); overflow: hidden; }
.lg__orb { position: absolute; z-index: -1; border-radius: 50%; background: hsla(0, 0%, 100%, .12); }
.lg__orb--a { width: 16rem; height: 16rem; top: -6rem; inset-inline-end: -5rem; }
.lg__orb--b { width: 11rem; height: 11rem; bottom: -4rem; inset-inline-start: -3rem; background: hsla(0, 0%, 100%, .08); }
.lg__logo { color: #fff; font-family: 'Poppins'; font-size: 1.5rem; font-weight: 600; width: fit-content; }
.lg__logo img { height: 2.75rem; width: auto; filter: brightness(0) invert(1); }
.lg__tagline { font-size: 1.6rem; line-height: 1.7; color: #fff; }
.lg__points { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.lg__points li { display: flex; align-items: center; gap: .65rem; font-size: var(--small-font-size); color: hsla(0, 0%, 100%, .92); }
.lg__points i { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .7rem; background: hsla(0, 0%, 100%, .16); font-size: 1.1rem; }

.lg__panel { padding: 2.25rem 1.5rem 1.75rem; display: flex; flex-direction: column; justify-content: center; }
.lg__head { text-align: center; margin-bottom: 1.5rem; }
.lg__icon { display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 1.2rem; font-size: 1.8rem; margin-bottom: .9rem; background: linear-gradient(135deg, var(--first-color), var(--accent-color)); color: #fff; box-shadow: 0 10px 24px hsla(var(--first-hue), var(--sat), var(--lig), .35); }
.lg__title { font-size: 1.5rem; color: var(--title-color); margin-bottom: .35rem; }
.lg__sub { font-size: var(--small-font-size); color: var(--text-color); }
.lg__alert { display: flex; align-items: flex-start; gap: .6rem; padding: .8rem 1rem; margin-bottom: 1.1rem; border-radius: 1rem; font-size: var(--small-font-size); background: hsla(0, 70%, 50%, .14); border: 1px solid hsl(0, 65%, 55%); color: var(--title-color); animation: lg-shake .4s; }
.lg__alert i { font-size: 1.3rem; color: hsl(0, 75%, 62%); flex: none; }
.lg__alert ul { list-style: none; margin: 0; padding: 0; }
.lg__form { display: grid; gap: 1.1rem; }
.lg__label { display: block; font-size: var(--small-font-size); color: var(--title-color); font-weight: var(--font-medium); margin-bottom: .4rem; }
.lg__input { display: flex; align-items: center; gap: .6rem; padding: 0 .4rem 0 1rem; background: var(--body-color); border: 1px solid hsla(var(--second-hue), 20%, 60%, .22); border-radius: 1rem; transition: border-color .25s, box-shadow .25s; }
[dir="rtl"] .lg__input { padding: 0 1rem 0 .4rem; }
.lg__input:focus-within { border-color: var(--first-color); box-shadow: 0 0 0 4px hsla(var(--first-hue), var(--sat), var(--lig), .18); }
.lg__input > i { color: var(--text-color-light); font-size: 1.25rem; }
.lg__input:focus-within > i { color: var(--link-color); }
.lg__input input { flex: 1; min-width: 0; height: 3.2rem; background: none; border: 0; outline: 0 !important; box-shadow: none; color: var(--title-color); font: inherit; letter-spacing: .03em; }
.lg__input input::placeholder { color: var(--text-color-light); opacity: .7; letter-spacing: 0; }
.lg__eye { width: 2.4rem; height: 2.4rem; display: grid; place-items: center; background: none; border: 0; border-radius: .7rem; color: var(--text-color-light); font-size: 1.25rem; cursor: pointer; transition: .2s; }
.lg__eye:hover { color: var(--link-color); background: hsla(var(--first-hue), var(--sat), var(--lig), .12); }
.lg__remember { display: inline-flex; align-items: center; gap: .55rem; font-size: var(--small-font-size); color: var(--text-color); cursor: pointer; width: fit-content; }
.lg__remember input { width: 1.1rem; height: 1.1rem; accent-color: var(--first-color); }
.lg__submit { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 3.2rem; border: 0; border-radius: 1rem; font: inherit; font-weight: var(--font-semibold); font-size: 1rem; color: #fff; cursor: pointer; background: linear-gradient(135deg, var(--first-color), var(--accent-color)); box-shadow: 0 10px 24px hsla(var(--first-hue), var(--sat), var(--lig), .35); transition: transform .2s, box-shadow .2s, opacity .2s; }
.lg__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px hsla(var(--first-hue), var(--sat), var(--lig), .45); }
.lg__submit i { font-size: 1.25rem; }
.lg__submit.is-loading { opacity: .75; pointer-events: none; }
.lg__submit.is-loading i { animation: lg-spin 1s linear infinite; }
.lg__submit.is-loading i::before { content: "\ebdb"; }
.lg__back { display: inline-flex; align-items: center; gap: .3rem; justify-content: center; margin-top: 1.25rem; font-size: var(--small-font-size); color: var(--text-color-light); transition: color .2s; }
.lg__back:hover { color: var(--link-color); }
@keyframes lg-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
@keyframes lg-spin { to { transform: rotate(360deg); } }
@media screen and (min-width: 768px) {
  .lg__card { grid-template-columns: 1fr 1fr; }
  .lg__brand { display: flex; }
  .lg__panel { padding: 3rem 2.75rem; }
}
.light-theme .lg__card { box-shadow: 0 30px 70px hsla(var(--second-hue), 40%, 20%, .18); }
.light-theme .lg__input { background: #fff; }
@media (prefers-reduced-motion: reduce) { .lg__alert, .lg__submit.is-loading i { animation: none; } .lg__submit { transition: none; } }

/*=============== CONTACT (redesign) ===============*/
.cx { --c-border: var(--border-color); --c-grad: var(--brand-gradient); --c-glow: var(--glow-color); }
.cx .container { max-width: 1080px; }
.cx__head { text-align: center; margin-bottom: 2.25rem; }
.cx__eyebrow { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .9rem; border-radius: 3rem; background: hsla(var(--first-hue), var(--sat), var(--lig), .14); border: 1px solid hsla(var(--first-hue), var(--sat), var(--lig), .35); color: var(--link-color); font-size: var(--smaller-font-size); font-weight: var(--font-semibold); margin-bottom: .9rem; }
.cx__title { font-size: 2rem; line-height: 1.5; background: linear-gradient(90deg, var(--first-color), var(--accent-color)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cx__lead { max-width: 34rem; margin: .6rem auto 0; color: var(--text-color); line-height: 2; }
.cx__grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.cx__sub { font-size: 1rem; color: var(--title-color); margin-bottom: 1rem; }
.cx__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }

/* channel rows */
.cc { position: relative; display: flex; align-items: center; gap: 1rem; padding: .9rem 1.1rem; border-radius: 1.25rem; background: var(--container-color); border: 1px solid var(--c-border); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.cc:hover { transform: translateY(-3px); border-color: hsla(var(--first-hue), var(--sat), var(--lig), .5); box-shadow: 0 14px 30px hsla(0, 0%, 0%, .28); }
.cc__icon { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 1rem; background: var(--c-grad); color: #fff; font-size: 1.45rem; box-shadow: 0 8px 18px var(--c-glow); transition: transform .3s; }
.cc:hover .cc__icon { transform: rotate(-6deg) scale(1.06); }
.cc__text { display: grid; gap: .15rem; min-width: 0; flex: 1; }
.cc__name { font-size: var(--small-font-size); font-weight: var(--font-semibold); color: var(--title-color); }
.cc__data { unicode-bidi: isolate; justify-self: start; max-width: 100%; font-size: var(--small-font-size); color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc__go { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: hsla(var(--first-hue), var(--sat), var(--lig), .14); color: var(--link-color); font-size: 1.2rem; transition: background .3s, color .3s, transform .3s; }
.cc:hover .cc__go { background: var(--first-color); color: #fff; transform: translateX(-3px); }
[dir="ltr"] .cc:hover .cc__go { transform: translateX(3px); }

/* form card */
.cx__form { position: relative; padding: 1.5rem 1.25rem; border-radius: 1.75rem; background: radial-gradient(80% 60% at 100% 0%, hsla(var(--first-hue), var(--sat), var(--lig), .12), transparent 70%), var(--container-color); border: 1px solid var(--c-border); box-shadow: 0 24px 50px hsla(0, 0%, 0%, .25); }
.cx__form--solo { max-width: 680px; margin-inline: auto; width: 100%; }
.cf { display: grid; gap: 1.1rem; }
.cf__row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.cf__label { display: block; font-size: var(--small-font-size); color: var(--title-color); font-weight: var(--font-medium); margin-bottom: .4rem; }
.cf__label b { color: var(--link-color); margin-inline-start: .15rem; }
.cf__input { display: flex; align-items: center; gap: .6rem; padding: 0 1rem; background: var(--body-color); border: 1px solid var(--c-border); border-radius: 1rem; transition: border-color .25s, box-shadow .25s; }
.cf__input:focus-within { border-color: var(--first-color); box-shadow: 0 0 0 4px hsla(var(--first-hue), var(--sat), var(--lig), .18); }
.cf__input > i { color: var(--text-color-light); font-size: 1.2rem; flex: none; }
.cf__input:focus-within > i { color: var(--link-color); }
.cf__input input, .cf__input textarea { flex: 1; min-width: 0; background: none; border: 0; outline: 0 !important; box-shadow: none; color: var(--title-color); font: inherit; height: 3.1rem; }
.cf__input input::placeholder, .cf__input textarea::placeholder { color: var(--text-color-light); opacity: .7; }
.cf__input--area { position: relative; align-items: stretch; padding: 0; }
.cf__input--area textarea { height: auto; min-height: 9rem; resize: vertical; padding: .9rem 1rem 2rem; line-height: 1.9; }
.cf__count { position: absolute; bottom: .5rem; inset-inline-end: .9rem; font-size: var(--smaller-font-size); color: var(--text-color-light); pointer-events: none; }
.cf__foot { display: flex; flex-direction: column; gap: .9rem; align-items: stretch; }
.cf__note { display: flex; align-items: center; gap: .4rem; font-size: var(--smaller-font-size); color: var(--text-color-light); }
.cf__note i { color: var(--link-color); font-size: 1.1rem; }
.cf__submit { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; height: 3.1rem; padding: 0 1.8rem; border: 0; border-radius: 1rem; font: inherit; font-weight: var(--font-semibold); color: #fff; cursor: pointer; background: var(--c-grad); box-shadow: 0 10px 24px var(--c-glow); transition: transform .2s, box-shadow .2s, opacity .2s; }
.cf__submit:hover { transform: translateY(-2px); box-shadow: 0 14px 30px hsla(var(--first-hue), var(--sat), var(--lig), .5); }
.cf__submit i { font-size: 1.2rem; transition: transform .3s; }
.cf__submit:hover i { transform: translateX(-3px) rotate(-8deg); }
[dir="ltr"] .cf__submit:hover i { transform: translateX(3px) rotate(8deg); }
.cf__submit.is-loading { opacity: .75; pointer-events: none; }
.contact__alert { display: flex; align-items: center; gap: .6rem; }
.contact__alert i { font-size: 1.4rem; flex: none; }
.contact__alert--ok i { color: hsl(145, 60%, 55%); }
.contact__alert--error i { color: hsl(0, 75%, 62%); }
@media screen and (min-width: 576px) {
  .cx__title { font-size: 2.4rem; }
  .cx__form { padding: 2rem; }
  .cf__row { grid-template-columns: 1fr 1fr; }
  .cf__foot { flex-direction: row; align-items: center; justify-content: space-between; }
}
@media screen and (min-width: 992px) {
  .cx__grid { grid-template-columns: 2fr 3fr; gap: 2rem; }
  .cx__side { position: sticky; top: 2rem; }
  .cx__title { font-size: 2.8rem; }
}
.light-theme .cx__form { box-shadow: 0 24px 50px hsla(var(--second-hue), 40%, 20%, .12); }
.light-theme .cf__input { background: #fff; }
.light-theme .cc:hover { box-shadow: 0 14px 30px hsla(var(--second-hue), 40%, 20%, .14); }
@media (prefers-reduced-motion: reduce) { .cc, .cc__icon, .cc__go, .cf__submit, .cf__submit i { transition: none; } .cc:hover { transform: none; } }

/*=============== EXPERIENCE TIMELINE ===============*/
.exp { --x-border: var(--border-color); --x-grad: var(--brand-gradient); --x-glow: var(--glow-color); }
.exp .container { max-width: 1080px; }
.exp__sub { text-align: center; max-width: 36rem; margin: -1.5rem auto 1.75rem; color: var(--text-color); line-height: 2; padding: 0 1rem; }

/* stats */
.exp__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; margin-bottom: 2.5rem; }
.exp__stat { text-align: center; padding: 1rem .5rem; border-radius: 1.25rem; background: var(--container-color); border: 1px solid var(--x-border); }
.exp__stat strong { display: block; font-size: 1.5rem; line-height: 1.3; background: var(--x-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.exp__stat span { font-size: var(--smaller-font-size); color: var(--text-color-light); }

/* timeline: line + nodes */
.exp__timeline { position: relative; list-style: none; margin-block: 0; padding-block: 0; }
.exp__timeline::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; inset-inline-start: 1.65rem; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--first-color), hsla(var(--first-hue), var(--sat), var(--lig), .15)); }
.exp__item { position: relative; display: grid; grid-template-columns: 3.3rem minmax(0, 1fr); column-gap: 1rem; padding-bottom: 2.25rem; }
.exp__item:last-child { padding-bottom: 0; }
.exp__node { grid-column: 1; grid-row: 1 / span 2; width: 3.3rem; height: 3.3rem; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 3px solid var(--first-color); box-shadow: 0 0 0 5px var(--body-color), 0 8px 20px var(--x-glow); overflow: hidden; z-index: 1; }
.exp__node img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }
.exp__node b { font: 700 1.3rem/1 'Poppins', sans-serif; background: var(--x-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.is-current .exp__node { animation: exp-pulse 2.4s ease-out infinite; }
@keyframes exp-pulse { 0% { box-shadow: 0 0 0 5px var(--body-color), 0 0 0 5px var(--x-glow); } 70% { box-shadow: 0 0 0 5px var(--body-color), 0 0 0 16px transparent; } 100% { box-shadow: 0 0 0 5px var(--body-color), 0 0 0 5px transparent; } }

/* dates (diagram axis label) */
.exp__when { grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .75rem; margin-bottom: .6rem; }
.exp__years { font-size: 1.25rem; color: var(--title-color); letter-spacing: .02em; }
.exp__years span { color: var(--link-color); margin-inline: .1rem; }
.exp__months { font-size: var(--small-font-size); color: var(--text-color-light); }
.exp__dur { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .65rem; border-radius: 3rem; font-size: var(--smaller-font-size); color: var(--link-color); background: hsla(var(--first-hue), var(--sat), var(--lig), .14); border: 1px solid hsla(var(--first-hue), var(--sat), var(--lig), .3); }

/* card */
.exp__card { grid-column: 2; grid-row: 2; position: relative; padding: 1.25rem 1.3rem; border-radius: 1.4rem; background: var(--container-color); border: 1px solid var(--x-border); transition: transform .3s cubic-bezier(.2, .8, .2, 1), border-color .3s, box-shadow .3s; }
.exp__card::before { content: ""; position: absolute; top: 1.4rem; inset-inline-start: -.45rem; width: .9rem; height: .9rem; transform: rotate(45deg); background: var(--container-color); border-inline-start: 1px solid var(--x-border); border-block-end: 1px solid var(--x-border); }
[dir="rtl"] .exp__card::before { transform: rotate(-135deg); }
.exp__item:hover .exp__card { transform: translateY(-3px); border-color: hsla(var(--first-hue), var(--sat), var(--lig), .5); box-shadow: 0 16px 36px hsla(0, 0%, 0%, .28); }
.exp__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.exp__role { font-size: 1.08rem; line-height: 1.6; color: var(--title-color); }
.exp__company { margin-top: .1rem; font-size: var(--small-font-size); font-weight: var(--font-semibold); color: var(--link-color); }
.exp__company a { color: inherit; display: inline-flex; align-items: center; gap: .3rem; }
.exp__company a:hover { text-decoration: underline; text-underline-offset: 4px; }
.exp__company i { font-size: .95rem; opacity: .8; }
.exp__badge { flex: none; padding: .2rem .75rem; border-radius: 3rem; font-size: var(--smaller-font-size); font-weight: var(--font-semibold); color: #0b2a17; background: linear-gradient(135deg, hsl(145, 60%, 62%), hsl(165, 55%, 58%)); }
.exp__meta { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: var(--smaller-font-size); color: var(--text-color-light); }
.exp__meta li { display: inline-flex; align-items: center; gap: .3rem; }
.exp__meta i { color: var(--link-color); font-size: 1rem; }
.exp__summary { margin-top: .8rem; font-size: var(--small-font-size); line-height: 2; color: var(--text-color); }
.exp__list { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .45rem; font-size: var(--small-font-size); line-height: 1.9; color: var(--text-color); }
.exp__list li { position: relative; padding-inline-start: 1.3rem; }
.exp__list li::before { content: ""; position: absolute; top: .7rem; inset-inline-start: .1rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--x-grad); }
.exp__more { margin-top: .5rem; }
.exp__more summary { cursor: pointer; width: fit-content; font-size: var(--smaller-font-size); font-weight: var(--font-semibold); color: var(--link-color); list-style: none; }
.exp__more summary::-webkit-details-marker { display: none; }
.exp__more summary::after { content: " \25BE"; }
.exp__more[open] summary { display: none; }
.exp__tags { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.exp__tags li { padding: .2rem .7rem; border-radius: 3rem; font-size: var(--smaller-font-size); color: var(--text-color); background: var(--body-color); border: 1px solid var(--x-border); }

/* scroll reveal (only when JS marked the section) */
.exp--anim .exp__item { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.exp--anim .exp__item.is-in { opacity: 1; transform: none; }

/* desktop: centered line, card and date on opposite sides, alternating */
@media screen and (min-width: 860px) {
  .exp__stat strong { font-size: 2rem; }
  .exp__timeline::before { inset-inline-start: 50%; transform: translateX(-50%); }
  [dir="rtl"] .exp__timeline::before { transform: translateX(50%); }
  .exp__item { grid-template-columns: minmax(0, 1fr) 3.8rem minmax(0, 1fr); column-gap: 1.75rem; padding-bottom: 2.75rem; align-items: start; }
  .exp__node { grid-column: 2; grid-row: 1; width: 3.8rem; height: 3.8rem; }
  .exp__when { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-end; text-align: end; margin: .35rem 0 0; gap: .35rem; }
  .exp__card { grid-column: 3; grid-row: 1; }
  .exp__years { font-size: 1.5rem; }
  /* even items: mirrored */
  .exp__item:nth-child(even) .exp__when { grid-column: 3; align-items: flex-start; text-align: start; }
  .exp__item:nth-child(even) .exp__card { grid-column: 1; }
  .exp__item:nth-child(even) .exp__card::before { inset-inline-start: auto; inset-inline-end: -.45rem; transform: rotate(-135deg); }
  [dir="rtl"] .exp__item:nth-child(even) .exp__card::before { transform: rotate(45deg); }
}
.light-theme .exp__node { box-shadow: 0 0 0 5px var(--body-color), 0 8px 20px hsla(var(--first-hue), var(--sat), var(--lig), .3); }
.light-theme .exp__item:hover .exp__card { box-shadow: 0 16px 36px hsla(var(--second-hue), 40%, 20%, .14); }
.light-theme .exp__tags li { background: #fff; }
@media (prefers-reduced-motion: reduce) { .is-current .exp__node { animation: none; } .exp--anim .exp__item { opacity: 1; transform: none; transition: none; } .exp__card { transition: none; } .exp__item:hover .exp__card { transform: none; } }