:root {

    --bg: #101114;

    --bg2: #191b20;

    --card: #202228;

    --ac: #E50925;

    --ac2: #FF3048;

    --tx: #ffffff;

    --mu: #a6a6a6;

    --bd: #34363d;

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body {

    margin: 0;

    background: var(--bg);

    color: var(--tx);

    font: 15px/1.65 Inter, Vazirmatn, system-ui, sans-serif;

    overflow-x: hidden;

}



[lang=fa] body,

[lang=fa] input,

[lang=fa] textarea,

[lang=fa] button,

[lang=fa] select {

    font-family: Vazirmatn, Inter, sans-serif;

}



a {

    color: inherit;

}



:focus-visible {

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

    outline-offset: 3px;

}



.wrap {

    max-width: 1080px;

    margin: auto;

    padding: 0 20px;

}



header {

    position: sticky;

    top: 0;

    z-index: 50;

    background: #101114ee;

    backdrop-filter: blur(12px);

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

}



header .wrap {

    display: flex;

    align-items: center;

    gap: 16px;

    min-height: 60px;

}



.logo {

    display: flex;

    gap: 10px;

    align-items: center;

    font-weight: 800;

    text-decoration: none;

    letter-spacing: .03em;

}



.mono {

    display: grid;

    place-items: center;

    width: 36px;

    height: 36px;

    border-radius: 9px;

    background: linear-gradient(135deg, var(--ac), #8a0616);

    font-weight: 800;

    font-size: 14px;

}



nav {

    display: flex;

    gap: 16px;

    margin-inline-start: auto;

}



nav a {

    text-decoration: none;

    color: var(--mu);

    font-size: 14px;

    transition: color .2s;

}



nav a:hover {

    color: var(--tx);

}



.lang {

    display: flex;

    gap: 6px;

}



.lang button,

#menu {

    background: transparent;

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

    color: var(--mu);

    padding: 5px 10px;

    cursor: pointer;

    border-radius: 7px;

    font: inherit;

    font-size: 13px;

}



.lang button[aria-pressed=true] {

    color: #fff;

    border-color: var(--ac);

}



#menu {

    display: none;

}



.hero {

    position: relative;

    padding: 48px 0 38px;

    display: grid;

    grid-template-columns: 1.2fr 1fr;

    gap: 28px;

    align-items: center;

    min-height: auto;

}



.hero:before {

    content: "";

    position: absolute;

    inset: -40px -5% auto auto;

    width: 380px;

    height: 380px;

    background: radial-gradient(

        circle,

        #e509251c,

        transparent 65%

    );

    pointer-events: none;

    z-index: -1;

}



.hero h1 {

    font-size: clamp(2rem, 4vw, 3.5rem);

    line-height: 1.2;

    margin: .2em 0;

}



.hero h1 span {

    background: linear-gradient(

        90deg,

        var(--ac),

        var(--ac2)

    );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}



.role {

    color: var(--mu);

    font-size: 1.05rem;

    margin: 10px 0;

}



.hero .row {

    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin-top: 18px;

}



.btn {

    display: inline-block;

    padding: 9px 18px;

    border-radius: 8px;

    background: var(--ac);

    color: #fff;

    text-decoration: none;

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

    cursor: pointer;

    font: inherit;

    font-size: 14px;

    transition:

        background .2s,

        transform .2s,

        border-color .2s;

}



.btn:hover {

    background: var(--ac2);

    transform: translateY(-2px);

}



.btn.ghost {

    background: transparent;

    border-color: var(--bd);

}



.btn.ghost:hover {

    border-color: var(--ac);

}



.btn.sm {

    padding: 5px 12px;

    font-size: 13px;

}



.code {

    background: var(--bg2);

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

    border-radius: 12px;

    padding: 18px;

    direction: ltr;

    font: 13px/1.8 ui-monospace, monospace;

    box-shadow: 0 0 35px #e5092515;

    animation: rise .7s ease both;

    overflow-x: auto;

}



.code b {

    color: var(--ac2);

}



.code i {

    color: var(--mu);

    font-style: normal;

}



@keyframes rise {

    from {

        opacity: 0;

        transform: translateY(14px);

    }



    to {

        opacity: 1;

        transform: translateY(0);

    }

}



section {

    padding: 36px 0;

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

}



h2 {

    display: flex;

    align-items: center;

    gap: 12px;

    font-size: 1.65rem;

    margin: 0 0 20px;

    line-height: 1.4;

}



h2:before {

    content: "";

    width: 4px;

    height: 1.1em;

    background: linear-gradient(

        var(--ac2),

        var(--ac)

    );

    border-radius: 3px;

    flex-shrink: 0;

}



h3 {

    font-size: 1.05rem;

}



p {

    margin-top: 0;

    margin-bottom: 12px;

}



.grid {

    display: grid;

    grid-template-columns: repeat(

        auto-fill,

        minmax(min(100%, 240px), 1fr)

    );

    gap: 12px;

}



.card {

    position: relative;

    overflow: hidden;

    background: var(--card);

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

    border-radius: 11px;

    padding: 17px;

    display: flex;

    flex-direction: column;

    gap: 6px;

    transition:

        transform .2s,

        border-color .2s,

        box-shadow .2s;

}



.card:before {

    content: "";

    position: absolute;

    inset: 0 0 auto;

    height: 2px;

    background: linear-gradient(

        90deg,

        var(--ac),

        transparent

    );

    opacity: 0;

    transition: opacity .2s;

}



.card:hover {

    border-color: var(--ac);

    transform: translateY(-3px);

    box-shadow: 0 8px 25px #00000025;

}



.card:hover:before {

    opacity: 1;

}



.card h3 {

    margin: .2em 0;

}



.card p {

    margin: 0;

    color: var(--mu);

    font-size: 14px;

    line-height: 1.7;

}



.card small {

    color: var(--mu);

    font-size: 12px;

}



.cert {

    border-color: #e5092545;

}



.ico {

    color: var(--ac2);

    font-weight: 700;

}



.link {

    color: var(--ac2);

    text-decoration: none;

}



.link:hover {

    text-decoration: underline;

}



.bar {

    height: 5px;

    background: var(--bd);

    border-radius: 9px;

    overflow: hidden;

    margin-top: 8px;

}



.bar i {

    display: block;

    height: 100%;

    background: linear-gradient(

        90deg,

        var(--ac),

        var(--ac2)

    );

    border-radius: 9px;

}



.empty {

    color: var(--mu);

    font-size: 14px;

    padding: 12px 0;

}



form {

    display: grid;

    gap: 11px;

    max-width: 560px;

}



input,

textarea,

select {

    width: 100%;

    padding: 10px 12px;

    background: var(--bg2);

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

    border-radius: 8px;

    color: #fff;

    font: inherit;

    font-size: 14px;

    outline: none;

    transition:

        border-color .2s,

        box-shadow .2s;

}



input:focus,

textarea:focus,

select:focus {

    border-color: var(--ac);

    box-shadow: 0 0 0 3px #e5092515;

}



textarea {

    min-height: 110px;

    resize: vertical;

}



input::placeholder,

textarea::placeholder {

    color: #777;

}



.hp {

    position: absolute;

    left: -9999px;

}



.ok {

    color: #4ade80;

}



.bad {

    color: var(--ac2);

}



.tabs {

    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin: 12px 0;

}



.tabs .btn[aria-pressed=true] {

    background: var(--ac);

}



.filters {

    display: flex;

    gap: 7px;

    flex-wrap: wrap;

    margin-bottom: 15px;

}



.filters .btn[aria-pressed=true] {

    background: var(--ac);

    border-color: var(--ac);

}



.item {

    display: flex;

    gap: 10px;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    background: var(--card);

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

    border-radius: 9px;

    padding: 11px 14px;

    margin-bottom: 8px;

}



.item.unread {

    border-color: var(--ac);

}



.toast {

    position: fixed;

    inset-block-end: 20px;

    inset-inline-start: 20px;

    z-index: 100;

    background: var(--card);

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

    padding: 10px 16px;

    border-radius: 8px;

    box-shadow: 0 8px 30px #0008;

}



.badge {

    display: inline-flex;

    gap: 8px;

    align-items: center;

    border: 1px solid #e5092566;

    padding: 4px 12px;

    border-radius: 99px;

    font-size: 13px;

}



.badge:before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #4ade80;

    box-shadow: 0 0 8px #4ade8055;

}



dialog {

    background: var(--card);

    color: #fff;

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

    border-radius: 12px;

    max-width: 520px;

    width: calc(100% - 40px);

    padding: 22px;

    box-shadow: 0 20px 60px #0009;

}



dialog::backdrop {

    background: #000c;

    backdrop-filter: blur(4px);

}



.stat {

    font-size: 2rem;

    color: var(--ac2);

    font-weight: 800;

}



.slot {

    display: block;

    width: 36px;

    height: 36px;

    border: 1.5px dashed #e5092599;

    border-radius: 8px;

    overflow: hidden;

}



.slot img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    display: block;

}



.stage {

    position: relative;

    height: 300px;

    perspective: 1000px;

    overflow: hidden;

}



.stage-in {

    position: relative;

    width: 100%;

    height: 100%;

    transform-style: preserve-3d;

    transition: transform .15s ease-out;

    display: grid;

    place-items: center;

}



.avatar {

    position: relative;

    width: 180px;

    height: 180px;

    border-radius: 50%;

    border: 3px solid var(--ac);

    box-shadow:

        0 0 0 10px #e5092516,

        0 0 55px #e5092535;

    overflow: hidden;

    background: var(--bg2);

    display: grid;

    place-items: center;

    transform: translateZ(50px);

}



.avatar img {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.ph {

    width: 82%;

    height: 82%;

    border: 2px dashed var(--bd);

    border-radius: 50%;

    display: grid;

    place-items: center;

    text-align: center;

    color: var(--mu);

    font-size: 12px;

    padding: 12px;

}



.ring {

    position: absolute;

    width: 250px;

    height: 250px;

    border-radius: 50%;

    border: 1px dashed #e5092577;

    animation: rs 20s linear infinite;

}



@keyframes rs {

    from {

        transform: rotateX(72deg) rotateZ(0);

    }



    to {

        transform: rotateX(72deg) rotateZ(360deg);

    }

}



.cube {

    position: absolute;

    width: var(--s);

    height: var(--s);

    transform-style: preserve-3d;

    animation: spin 16s linear infinite;

}



.c1 {

    --s: 65px;

    inset-inline-end: 5%;

    top: 8%;

}



.c2 {

    --s: 45px;

    inset-inline-start: 7%;

    bottom: 10%;

    animation-duration: 11s;

    animation-direction: reverse;

}



@keyframes spin {

    from {

        transform: rotateX(-22deg) rotateY(0);

    }



    to {

        transform: rotateX(-22deg) rotateY(360deg);

    }

}



.cube i {

    position: absolute;

    inset: 0;

    display: grid;

    place-items: center;

    font: 700 11px ui-monospace, monospace;

    font-style: normal;

    direction: ltr;

    background: #202228dd;

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

    box-shadow: inset 0 0 15px #e5092530;

}



.cube i:nth-child(1) {

    transform: translateZ(calc(var(--s) / 2));

}



.cube i:nth-child(2) {

    transform: rotateY(90deg) translateZ(calc(var(--s) / 2));

}



.cube i:nth-child(3) {

    transform: rotateY(180deg) translateZ(calc(var(--s) / 2));

}



.cube i:nth-child(4) {

    transform: rotateY(-90deg) translateZ(calc(var(--s) / 2));

}



.cube i:nth-child(5) {

    transform: rotateX(90deg) translateZ(calc(var(--s) / 2));

}



.cube i:nth-child(6) {

    transform: rotateX(-90deg) translateZ(calc(var(--s) / 2));

}



.slotcard {

    border-style: dashed;

    align-items: center;

    text-align: center;

    min-height: 140px;

    justify-content: center;

}



.contact-grid {

    display: grid;

    grid-template-columns: 1fr 1.4fr;

    gap: 20px;

    align-items: start;

}



.contact-grid aside {

    display: grid;

    gap: 12px;

}



.contact-grid a.card {

    text-decoration: none;

}



footer {

    background: var(--bg2);

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

    padding: 28px 0 0;

    color: var(--mu);

}



.fgrid {

    display: grid;

    grid-template-columns: 1.4fr 1fr 1fr;

    gap: 22px;

}



.fgrid div {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.fgrid a {

    color: var(--mu);

    text-decoration: none;

    font-size: 14px;

    transition: color .2s;

}



.fgrid a:hover {

    color: var(--ac2);

}



.copy {

    margin-top: 22px;

    padding: 14px 20px;

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

    font-size: 13px;

    text-align: center;

}



@media (max-width: 900px) {

    .wrap {

        padding: 0 18px;

    }



    .hero {

        gap: 20px;

    }



    .hero h1 {

        font-size: clamp(2rem, 4.5vw, 3rem);

    }



    .stage {

        height: 280px;

    }

}



@media (max-width: 780px) {

    header .wrap {

        min-height: 58px;

        gap: 10px;

    }



    #menu {

        display: block;

    }



    nav {

        display: none;

        position: absolute;

        inset-inline: 0;

        top: 58px;

        background: var(--bg);

        flex-direction: column;

        gap: 0;

        padding: 10px 20px;

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

        box-shadow: 0 12px 25px #0005;

    }



    nav.open {

        display: flex;

    }



    nav a {

        padding: 10px 0;

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

    }



    nav a:last-child {

        border-bottom: none;

    }



    .hero {

        grid-template-columns: 1fr;

        padding: 30px 0 25px;

        gap: 12px;

    }



    .hero h1 {

        font-size: clamp(2rem, 7vw, 2.8rem);

    }



    .role {

        font-size: 1rem;

    }



    .hero .row {

        margin-top: 15px;

    }



    section {

        padding: 28px 0;

    }



    h2 {

        font-size: 1.45rem;

        margin-bottom: 16px;

    }



    .stage {

        height: 250px;

    }



    .avatar {

        width: 155px;

        height: 155px;

    }



    .ring {

        width: 215px;

        height: 215px;

    }



    .c1 {

        --s: 55px;

    }



    .c2 {

        --s: 40px;

    }



    .contact-grid,

    .fgrid {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    footer {

        padding-top: 24px;

    }

}



@media (max-width: 480px) {

    body {

        font-size: 14px;

    }



    .wrap {

        padding: 0 15px;

    }



    header .wrap {

        gap: 8px;

    }



    .logo {

        font-size: 13px;

        gap: 6px;

    }



    .mono {

        width: 32px;

        height: 32px;

        font-size: 12px;

    }



    .lang button {

        padding: 4px 7px;

        font-size: 12px;

    }



    .hero {

        padding: 25px 0 20px;

    }



    .hero h1 {

        font-size: 2rem;

    }



    .hero .row {

        gap: 8px;

    }



    .btn {

        padding: 8px 14px;

        font-size: 13px;

    }



    section {

        padding: 24px 0;

    }



    h2 {

        font-size: 1.3rem;

        margin-bottom: 14px;

    }



    .grid {

        grid-template-columns: 1fr;

        gap: 10px;

    }



    .card {

        padding: 15px;

    }



    .stage {

        height: 220px;

    }



    .avatar {

        width: 140px;

        height: 140px;

    }



    .ring {

        width: 195px;

        height: 195px;

    }



    .c1 {

        --s: 48px;

    }



    .c2 {

        --s: 35px;

    }



    .contact-grid {

        gap: 14px;

    }



    .fgrid {

        gap: 18px;

    }



    .copy {

        margin-top: 18px;

        padding: 12px;

    }



    dialog {

        padding: 18px;

    }

}



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

    *,

    *::before,

    *::after {

        animation: none !important;

        transition: none !important;

        scroll-behavior: auto !important;

    }

}

/* Responsive layout corrections — mobile, tablet and admin */
html { width:100%; max-width:100%; overflow-x:clip; }
body { width:100%; max-width:100%; min-width:0; overflow-x:clip; }
img, video, iframe, svg, canvas { max-width:100%; }
img, video { height:auto; }
.wrap { width:100%; min-width:0; }
.hero, .contact-grid, .grid, .fgrid, .stage, main, section { min-width:0; }
.hero > *, .contact-grid > *, .grid > *, .fgrid > * { min-width:0; }
.code, pre { max-width:100%; overflow-x:auto; }
pre { white-space:pre; }
p, h1, h2, h3, .card, .item { overflow-wrap:anywhere; }
form, input, textarea, select { min-width:0; }
textarea { max-width:100%; }
button, input, select, textarea { font-size:16px; }
@media (max-width:780px) {
  header .wrap { min-width:0; gap:8px; }
  header .logo { min-width:0; }
  header nav { max-height:calc(100dvh - 58px); overflow-y:auto; }
  .hero, .contact-grid, .fgrid { grid-template-columns:minmax(0,1fr); }
  .grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); }
  .stage { width:100%; overflow:hidden; }
  form { width:100%; max-width:100%; }
  .item { align-items:flex-start; }
}
@media (max-width:480px) {
  .wrap { padding-inline:15px; }
  header .wrap { gap:6px; }
  .logo { flex-shrink:1; }
  .logo .mono { flex-shrink:0; }
  .lang { flex-shrink:0; }
  .hero { grid-template-columns:minmax(0,1fr); }
  .hero h1 { font-size:clamp(1.65rem,7vw,2rem); }
  .grid { grid-template-columns:minmax(0,1fr); }
  .contact-grid, .fgrid { grid-template-columns:minmax(0,1fr); }
  .card { min-width:0; }
  .toast { max-width:calc(100vw - 30px); }
  dialog { width:calc(100% - 24px); max-width:100%; }
}


/* Theme and mobile viewport improvements */
:root { color-scheme: dark; }
:root[data-theme="light"] {
    color-scheme: light;
    --bg: #f5f6f9;
    --bg2: #e9ecf2;
    --card: #ffffff;
    --ac: #d70828;
    --ac2: #bd1230;
    --tx: #171923;
    --mu: #515766;
    --bd: #d8dce5;
}
:root[data-theme="light"] header { background: rgba(245,246,249,.94); }
:root[data-theme="light"] input,
:root[data-theme="light"] textarea,
:root[data-theme="light"] select,
:root[data-theme="light"] dialog { color: var(--tx); }
:root[data-theme="light"] .cube i { background: rgba(255,255,255,.9); }
:root[data-theme="light"] .lang button[aria-pressed="true"] { color: var(--tx); }
:root[data-theme="light"] .btn:not(.ghost) { color: #fff; }
:root[data-theme="light"] .btn.ghost { color: var(--tx); }
:root[data-theme="light"] .hero h1 span { color: transparent; }
html { max-width:100%; overflow-x:clip; }
body { max-width:100%; overflow-x:clip; }
header, main, footer, section { max-width:100%; }
.wrap, .hero, .grid, .contact-grid, .fgrid { min-width:0; }
.wrap > *, .hero > *, .grid > *, .contact-grid > *, .fgrid > * { min-width:0; }
img, video, svg, canvas, iframe { max-width:100%; }
.code, pre { max-width:100%; overflow-x:auto; }
#theme-toggle {
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:5px 12px;
    border:1px solid var(--bd);
    border-radius:8px;
    background:var(--card);
    color:var(--tx);
    font:inherit;
    font-size:13px;
    cursor:pointer;
    white-space:nowrap;
}
#theme-toggle:hover { border-color:var(--ac); }
@media (max-width:780px) {
    header .wrap { flex-wrap:wrap; }
    header .wrap > * { min-width:0; }
    .hero, .contact-grid, .fgrid { grid-template-columns:minmax(0,1fr); }
    .stage { max-width:100%; overflow:hidden; }
    #theme-toggle { padding:5px 9px; }
}
@media (max-width:480px) {
    .wrap { width:100%; padding-inline:14px; }
    .grid { grid-template-columns:minmax(0,1fr); }
    .hero { grid-template-columns:minmax(0,1fr); }
    .hero h1 { overflow-wrap:anywhere; }
    .toast { max-width:calc(100% - 28px); }
    dialog { max-width:calc(100% - 24px); }
}