@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400..900&display=swap');
@font-face {
    font-family: 'ModamVF';
    src: url('fonts/ModamVF.woff2') format('woff2 supports variations'),
         url('fonts/ModamVF.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* ---------- TOKENS ---------- */
/* :root {
    --bg: #050505;
    --grid-line: rgba(255, 255, 255, .04);
    --grid-size: 40px;
    --cursor-x: 50vw;
    --cursor-y: 50vh;
    --fg: #fff;
    --accent: #1dae4b;
    --font-display: "Orbitron", sans-serif;
    --font-body: "Space Grotesk", sans-serif;
    --font-display-fa: "ModamVF", sans-serif;
    --font-body-fa: "ModamVF", sans-serif;
    --acrylic-dark: rgba(20, 20, 20, .85);
    --acrylic-border: rgba(255, 255, 255, .08);
    --neon-glow: 0 0 4px var(--accent),
                 0 0 8px var(--accent),
                 0 0 12px var(--accent);

                 
} */

/* ---------- TOKENS ---------- */
/* 1.  LIGHT is now the baseline ---------------------------------- */
:root {
    --bg: #ffffff;
    --grid-line: rgba(0, 0, 0, .05);
    --grid-size: 40px;
    --cursor-x: 50vw;
    --cursor-y: 50vh;
    --fg: #050505;
    --accent: #1dae4b;
    --font-display: "Orbitron", sans-serif;
    --font-body: "Space Grotesk", sans-serif;
    --font-display-fa: "ModamVF", sans-serif;
    --font-body-fa: "ModamVF", sans-serif;
    --acrylic-dark: rgba(255, 255, 255, .85);
    --acrylic-border: rgba(0, 0, 0, .08);
    --neon-glow: 0 0 4px var(--accent),
                 0 0 8px var(--accent),
                 0 0 12px var(--accent);
    --surface-1: color-mix(in srgb, var(--accent) 3%, var(--bg));
    /*  accent-alt برای گرادیان نوار پیشرفت */
    --accent-alt:    color-mix(in srgb, var(--accent) 50%, #ffffff);
}
  
/* 2.  DARK theme overrides --------------------------------------- */
[data-theme="dark"] {
    --bg: #050505;
    --grid-line: rgba(255, 255, 255, .04);
    --fg: #ffffff;
    --acrylic-dark: rgba(20, 20, 20, .85);
    --acrylic-border: rgba(255, 255, 255, .08);
    --surface-1:     color-mix(in srgb, var(--accent) 6%, var(--bg));
    --accent-alt:    color-mix(in srgb, var(--accent) 45%, #000000);
}

@supports not (background: color-mix(in srgb, red 50%, blue)){
    :root{
      --surface-1: #f6fffe;           /* برای لایت */
      --accent-alt:#66ffe6;
    }
    [data-theme="dark"]{
      --surface-1:#0d1417;            /* برای دارک */
      --accent-alt:#2efed0;
    }
  }
/* ---------- RESET ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0
}

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden
}

/* ---------- RTL base fonts ---------- */
html[dir="rtl"] body {
    font-family: var(--font-body-fa)
}

/* ---------- GLOBAL GRID BACKGROUND ---------- */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
    background-size: var(--grid-size) var(--grid-size);
    --mask: radial-gradient(circle 350px at var(--cursor-x) var(--cursor-y), white 0, transparent 351px);
    -webkit-mask: var(--mask);
    mask: var(--mask);
    pointer-events: none;
    z-index: -1
}

/* ---------- HEADER ---------- */
header {
    position: fixed;
    top: 4%;
    left: 5%;
    width: 90%;
    right: 5%;
    height: 64px;
    margin: auto;
    max-width: 1280px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    background: var(--acrylic-dark);
    border-bottom: 1px solid var(--acrylic-border);
    z-index: 30;
    border-radius: 4rem;
    backdrop-filter: blur(8px);
    background-color: var(--acrylic-dark);
}

[data-theme="dark"] {
    --bg: #050505;
    --grid-line: rgba(255, 255, 255, .04);
    --fg: #ffffff;
    --acrylic-dark: rgba(20, 20, 20, .85);
    --acrylic-border: rgba(255, 255, 255, .08);
}

.logo-square {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: var(--fg);
}

.logo-square img {
    width: 2.5rem;
    height: 2.5rem
}

span.logo-text{
    margin-right: 1rem;
    font-family: var(--font-display)
}


/* desktop nav */
.desktop-nav {
    display: flex;
    align-items: center
}

.desktop-nav a {
    font-family: var(--font-display);
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--fg);
    margin-left: 2.5rem;
    position: relative
}

.desktop-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width .3s
}

.desktop-nav a:hover::after {
    width: 100%
}

.apply-title{
    padding-bottom: 0.5rem;
}
.apply-text{
    color: var(--fg);
}
.btn-apply {
    background: var(--accent);
    color: #000;
    padding: .4rem 1.5rem;
    border: none;
    font-weight: 700;
    font-family: var(--font-display);
    cursor: pointer;
    margin-left: 3rem;
    transition: filter .25s
}

.btn-apply:hover {
    filter: brightness(1.15)
}

/* language toggle */
.lang-toggle {
    background: none;
    border: 1px solid var(--accent);
    color: var(--accent);
    padding: .4rem .8rem;
    border-radius: 9999px;
    font-family: var(--font-display);
    font-size: .85rem;
    cursor: pointer;
    margin-left: 3rem
}

.lang-toggle:hover {
    background: var(--accent);
    color: #000
}
html[dir="ltr"] .theme-toggle{
    margin-left: 1rem;
}
.theme-toggle {
    background: none;
    border: none;
}
.theme-toggle:hover {
    cursor: pointer;
}
/* ---------- HAMBURGER ---------- */
.menu-icon {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 9px;
    padding: 6px
}

.menu-icon span {
    width: 24px;
    height: 1px;
    background: var(--fg);
    display: block
}

/* ---------- MOBILE MENU ---------- */
.mobile-menu {
    position: fixed;
    top: calc(-64px);
    left: 5%;
    width: 90%;
    background: var(--acrylic-dark);
    backdrop-filter: blur(8px);
    background-color: var(--bg);
    border: 1px solid var(--acrylic-border);
    transform: translateY(-100%);
    transition: transform .35s ease;
    z-index: 30;
    padding: 2rem 1.5rem 3rem;
    border-radius: 3rem;
}

.mobile-menu.open {
    transform: translateY(90px)
}

.close-btn {
    position: absolute;
    top: 1rem;
    right: 1.8rem;
    background: none;
    border: none;
    font-size: 1.75rem;
    color: var(--fg);
    cursor: pointer
}

.mobile-menu-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    margin-top: 2.5rem
}

.mobile-link {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--fg);
    text-decoration: none
}

/* ---------- HERO ---------- */
.hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10rem 1.25rem 4rem
}

.title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(5rem, 30vw, 12rem);
    letter-spacing: .6rem;
    margin-bottom: 1rem
}

.lead {
    font-size: 1.3rem
}

.hero_img{
    width:40%;
    margin:-8rem auto 0;
}
/* ---------- SECTIONS ---------- */
section {
    padding: 8rem 1.5rem 6rem;
    max-width: 1200px;
    margin-inline: auto
}

section h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    margin-bottom: 2rem;
}
html[dir="ltr"] section h2{
    letter-spacing: .2rem;
    text-transform: uppercase
}

.title_with_line {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .02rem;
    color: var(--accent);
    margin: 0 0 2rem;
    display: flex;
    align-items: center
}

.title_with_line::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(82, 82, 82, .4);
    margin-left: 1rem;
    opacity: .7
}

.p_container {
    margin-bottom: 2.5rem;
}

/* ---------- VERTICAL PIXEL‑LINE TIMELINE ---------- */
.timeline {
    position: relative;
    padding: 0 0 0 3.5rem;
    margin-top: 8rem;
    /* room for the line & dot   */
}

.timeline h3 {
    padding-bottom: 1rem;
    position: relative;
}

/* the thin line */




/* each copy block */
.step {
    position: relative;
    padding-bottom: 4rem;
    padding-top: 0.7rem;
    margin-bottom: 3rem;
}

.step::before {
    content: '';
    position: absolute;
    top: .25rem;
    /* starts just below the dot */
    bottom: 0;
    left: -3.5rem;
    /* aligns with padding above */
    width: 1px;
    background: var(--grid-line);
}

.timeline h3::after {
    content: '';
    position: absolute;
    left: -3.5rem;
    /* half the dot’s width      */
    top: 12px;
    width: 2px;
    height: 2px;
    background: var(--accent);
    /* same white as text        */
    /* :contentReference[oaicite:2]{index=2}:contentReference[oaicite:3]{index=3} */
}

.step h3 {
    padding-bottom: 1.2rem;
}

.process_list{
    padding-left: 2rem;
    padding-top: 0.5rem;
    list-style-type: square;
}

/* ---------- ETHICS / SAFE ENVIRONMENT ---------- */
#ethics{
    /* max-width:820px; */
    margin:6rem auto 8rem;
    padding:0 1.5rem;
}

.ethics-intro{
    margin:0 auto 2.5rem;
    line-height:1.6;
    font-size:.95rem;
}

.ethics-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:1.2rem;
    grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));
}

.ethics-list li{
    position:relative;
    padding:1rem 1.25rem;
    background:var(--acrylic-dark);
    border-bottom:1px solid var(--acrylic-border);
    backdrop-filter:blur(6px);
    font-size:.85rem;
    text-align:left;
}








/* ---------- APPLY ---------- */
#apply {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center
}

#apply>div {
    border: 1px solid rgba(82, 82, 82, .4);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    min-width: 360px
}

.join-btn {
    text-decoration: none;
    background-color: transparent;
    border: 1px solid var(--fg);
    color: var(--fg);
    font-weight: bold;
    margin-top: 2rem;
    padding: .2rem 0
}

.join-btn:hover {
    border: 1px solid var(--accent)
}

/* ---------- PARTNERS ---------- */
#partners {
    text-align: center;            /* aligns with hero + apply sections */
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 3rem 2rem;
    align-items: center;
    justify-items: center;
    margin-top: 4rem;
}

.partner img {
    max-width: 140px;
    max-height: 64px;
    object-fit: contain;
}
/* [data-theme="dark"] .partner img{
    filter: grayscale(1);
    opacity: .8;
    transition: filter .35s, opacity .35s, transform .35s;
} */
[data-theme="light"] #medrik-logo{
    /* turn white → pure black, then hue-shift to green */
    filter:
    invert(1)        /* white → black */
    sepia(1)         /* take it into the warm channel */
    hue-rotate(90deg)/* spin until it’s greenish */
    saturate(600%)   /* crank up colour */
    brightness(.75); /* back to the desired value */
}


.partner img:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}


/* ---------- TESTIMONIALS – CAROUSEL ---------- */
#testimonials { text-align:center; }

/* container ------------------------------------------------------------- */
.testimonial-carousel{
    position:relative;
    max-width:640px;
    margin-inline:auto;
    overflow:hidden;
    /* faint neon frame */
    box-shadow:0 0 40px rgba(0,0,0,.6);
    border-bottom: 1px solid var(--acrylic-border);
}

/* track ------------------------------------------------------------- */
.carousel-track{ display:flex; transition:transform .6s cubic-bezier(.25,.9,.33,1); }

/* slide ------------------------------------------------------------- */
.testimonial-slide{
    min-width:100%;
    background:var(--bg);
    backdrop-filter:blur(10px);
    padding:2.5rem 6.5rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    position:relative;
}



/* typography & avatar */
.testimonial-slide blockquote{ font-style:italic; line-height:1.6; }
.testimonial-slide .avatar{
    width:52px; height:52px; border-radius:50%;
    background:var(--grid-line); margin:1.75rem 0 .85rem;
    box-shadow:0 0 5px rgba(0,0,0,.6), var(--neon-glow);
}
.testimonial-slide figcaption{
    margin-top: 2rem;
}
.testimonial-slide .name{ font-family:var(--font-display); font-weight:600; }
.testimonial-slide .role{ font-size:.8rem; opacity:.75; margin-top:.25rem; }

/* nav buttons ------------------------------------------------------------- */
.tst-nav{
    position:absolute; top:50%;
    width:24px; height:24px;
    border:1px solid var(--accent);
    background:rgba(0,0,0,.55);
    color:var(--accent);
    cursor:pointer; z-index:10;
    display:flex; align-items:center; justify-content:center;
    box-shadow:var(--neon-glow);
    /* transition:transform .25s, box-shadow .25s, background .25s; */
}
.tst-nav.prev{ left:0rem;transform: rotate(180deg); }
.tst-nav.next{ right:0rem; }

.tst-nav svg{ fill:currentColor; width:28px; height:28px; }

.tst-nav:hover{
    background:rgba(0,0,0,.85);
    
    box-shadow:0 0 6px rgba(0,0,0,.8), var(--neon-glow);
}

/* dots ------------------------------------------------------------- */
.tst-dots{ display:flex; justify-content:center; gap:.7rem; margin-top:2rem; }
.dot{
    width:9px; height:9px;
    background:var(--grid-line); border:none; cursor:pointer;
    transition:background .25s, box-shadow .25s;
}
@keyframes pulse{ 0%{box-shadow:none;} 50%{box-shadow:var(--neon-glow);} 100%{box-shadow:none;} }
.dot.active{
    background:var(--accent);
    animation:pulse 2s infinite;
}
/* ---------- TEAM ---------- */
#team{
    text-align:center;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:3rem 2rem;
    margin-top:4rem;
    align-items:start;
}

/* card */
.team-card{
    position:relative;
    overflow:hidden;
    border:1px solid var(--acrylic-border);
    background:var(--bg);
    backdrop-filter:blur(8px);
    transition:transform .35s, box-shadow .35s;
}
.team-card:hover{
    transform:translateY(-6px) ;
    box-shadow:0 0 10px rgba(0,0,0,.8), 0 0 12px rgba(255, 255, 255, .2);
}

/* portrait */
.team-card img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
    filter: grayscale(1);
  opacity: .8;
  transition: filter .35s, opacity .35s, transform .35s;
}

/* caption */
.team-card figcaption{
    padding:1rem .75rem 1.25rem;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:.25rem;
}
.team-card .name{
    font-weight:600;
    font-size:1rem;
}
.team-card .role{
    font-size:.8rem;
    opacity:.75;
    letter-spacing:.02em;
}

/* neon corner accents */

.team-card::before{ top:-1px; left:-1px; clip-path:polygon(0 0,100% 0,0 100%); }
.team-card::after { bottom:-1px; right:-1px; clip-path:polygon(100% 100%,0 100%,100% 0); }
.team-card:hover::before,
.team-card:hover::after{ opacity:1; }



/* ---------- FOOTER ---------- */
footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 4rem 1.5rem 6rem;
    max-width: 1100px;
    margin-inline: auto;
    font-size: .875rem
}


/* buttons */
.btn-primary {
    background: var(--accent);
    color: #000;
    padding: .75rem 2rem;
    border: none;
    font-family: var(--font-display);
    font-weight: 700;
    cursor: pointer;
    transition: filter .25s, transform .25s;
}


/* ---------- MOBILE BREAKPOINT ---------- */
@media(max-width:640px) {
    .desktop-nav {
        display: none
    }

    .menu-icon {
        display: flex
    }
    .theme-toggle{
        border: 1px solid var(--accent);
        margin-right: 1rem;
        padding: 0.2rem 0.9rem;
        border-radius: 1rem;
    }
    .title {
        font-size: clamp(2rem, 10vw, 3.5rem);
        letter-spacing: .4rem
    }
    .hero_img{
        width:50%;
        margin:-1rem auto 0;
    }
    .btn-apply{
        margin-left: 0;
    }

    #ethics{ margin:5rem auto 6rem; }
    .partners-grid { gap: 2rem 1.5rem; }
    .partner img   { max-width: 110px; }
    .testimonial-slide{ padding:2rem 2.75rem; }
    .tst-nav.prev{ left:.35rem; }
    .tst-nav.next{ right:.35rem; }
    .team-grid{ gap:2rem 1.5rem; }
}

/* ------------------------------------------------------------------ */
/*  RTL‑ONLY FIXES                                                    */
/* ------------------------------------------------------------------ */
html[dir="rtl"]{
    --font-display: "ModamVF", sans-serif!important;
}
html[dir="rtl"] header {
    direction: rtl
}
html[dir="rtl"] *{
    font-family: var(--font-body-fa);
}
/* 1. Desktop menu */


html[dir="rtl"] .desktop-nav a {
    margin-left: 2.5rem;
    margin-right: 0
}

html[dir="rtl"] .desktop-nav a::after {
    left: auto;
    right: 0
}

span.logo-text{
    margin-left: 1rem;
}
/* Also fix margin for mobile links */
html[dir="rtl"] .mobile-link {
    margin-right: 0
}
html[dir="rtl"] .title{
    letter-spacing: normal;
    font-weight: 400;
}   

/* 2. “title_with_line” heading */
html[dir="rtl"] .title_with_line::after {
    margin-left: 0;
    margin-right: 1rem
}
html[dir="rtl"] .process_list{
    padding-right: 2rem;
    padding-left: 0;
}
/* 3. Timeline line & dot */
html[dir="rtl"] .timeline {
    padding: 0 3.5rem 0 0
}

html[dir="rtl"] .step::before {
    left: auto;
    right: -3.5rem
}

html[dir="rtl"] .timeline h3::after {
    left: auto;
    right: -3.5rem
}

html[dir="rtl"] .ethics-list li{
    text-align: right;
}

/* ⬇️ keep the track itself LTR even inside an RTL page */
html[dir="rtl"] .carousel-track{
    direction:ltr;        /* or: flex-direction:row; direction:ltr; */
  }