:root {
    --spring-primary: #5b47d8;
    --spring-primary-dark: #4030a8;
    --spring-primary-soft: #f0edff;
    --spring-green: #45c69a;
    --spring-orange: #ffb45d;
    --spring-pink: #ee80b6;
    --spring-text: #24233b;
    --spring-muted: #77758c;
    --spring-border: #eae8f4;
    --spring-bg: #faf9ff;
    --spring-white: #ffffff;
    --spring-radius: 23px;
    --spring-shadow: 0 16px 45px rgba(55, 42, 130, 0.08);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    direction: rtl;
    overflow-x: clip;
    color: var(--spring-text);
    background: var(--spring-white);
    font-family: "Vazirmatn", Tahoma, sans-serif;
    line-height: 1.9;
}

a {
    text-decoration: none;
}

h1,
h2,
h3 {
    font-weight: 800;
    line-height: 1.7;
}

p {
    color: var(--spring-muted);
}

.container {
    max-width: 1160px;
}

section {
    scroll-margin-top: 90px;
}

/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(234, 232, 244, 0.9);
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);
}

.site-header .navbar {
    padding: 13px 0;
}

.navbar-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--spring-text);
    font-weight: 900;
    font-size: 1.1rem;
}

.navbar-brand:hover {
    color: var(--spring-primary);
}

.brand-logo {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--spring-primary), #9786ff);
    box-shadow: 0 7px 18px rgba(91, 71, 216, 0.23);
    color: #fff;
    font-size: 1.35rem;
}

.navbar-nav {
    gap: 8px;
}

.navbar .nav-link {
    padding: 9px 12px !important;
    color: #66647a;
    font-size: 0.9rem;
    font-weight: 600;
}

.navbar .nav-link:hover {
    color: var(--spring-primary);
}

.navbar-toggler {
    padding: 7px 12px;
    border: 1px solid var(--spring-border);
    border-radius: 12px;
    color: var(--spring-primary);
    font-size: 1.5rem;
    box-shadow: none !important;
}

.btn-primary-custom,
.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 21px;
    border-radius: 14px;
    font-weight: 800;
    transition: transform 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.btn-primary-custom {
    border: 1px solid var(--spring-primary);
    background: var(--spring-primary);
    box-shadow: 0 8px 20px rgba(91, 71, 216, 0.2);
    color: #fff;
}

.btn-primary-custom:hover {
    transform: translateY(-2px);
    border-color: var(--spring-primary-dark);
    background: var(--spring-primary-dark);
    box-shadow: 0 12px 24px rgba(91, 71, 216, 0.25);
    color: #fff;
}

.btn-outline-custom {
    border: 1px solid #dcd6ff;
    background: #fff;
    color: var(--spring-primary);
}

.btn-outline-custom:hover {
    transform: translateY(-2px);
    border-color: var(--spring-primary);
    background: var(--spring-primary-soft);
    color: var(--spring-primary-dark);
}

/* Breadcrumb */

.breadcrumb-section {
    padding-top: 17px;
    background: #fff;
}

.breadcrumb {
    margin-bottom: 0;
    font-size: 0.82rem;
}

.breadcrumb-item a {
    color: var(--spring-muted);
}

.breadcrumb-item a:hover,
.breadcrumb-item.active {
    color: var(--spring-primary);
}

/* Hero */

.spring-hero {
    position: relative;
    padding: 65px 0 85px;
    overflow: hidden;
    background:
            radial-gradient(
                    circle at 88% 12%,
                    rgba(185, 174, 255, 0.25),
                    transparent 30%
            ),
            linear-gradient(145deg, #fff 10%, #faf9ff 100%);
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 7px 14px;
    border: 1px solid #e3ddff;
    border-radius: 50px;
    background: #fff;
    color: var(--spring-primary);
    font-size: 0.85rem;
    font-weight: 800;
}

.spring-hero h1 {
    margin-bottom: 22px;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: -1px;
}

.spring-hero h1 span {
    display: block;
    color: var(--spring-primary);
}

.hero-description {
    max-width: 640px;
    margin-bottom: 23px;
    font-size: 1rem;
    line-height: 2.15;
}

.hero-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
}

.hero-pills span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--spring-border);
    border-radius: 11px;
    background: #fff;
    color: #626078;
    font-size: 0.8rem;
    font-weight: 700;
}

.hero-pills i {
    color: var(--spring-primary);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    margin-bottom: 0;
    font-size: 0.87rem;
}

.hero-note i {
    color: var(--spring-orange);
}

/* Code illustration */

.code-visual {
    position: relative;
    display: grid;
    min-height: 440px;
    place-items: center;
    isolation: isolate;
}

.code-visual::before {
    position: absolute;
    z-index: -2;
    width: 345px;
    height: 345px;
    border-radius: 50%;
    background: linear-gradient(145deg, #e9e4ff, #f4efff);
    content: "";
}

.tech-orbit {
    position: absolute;
    z-index: -1;
    border: 1px dashed #d5cdfb;
    border-radius: 50%;
    pointer-events: none;
}

.orbit-one {
    width: 410px;
    height: 410px;
}

.orbit-two {
    width: 295px;
    height: 295px;
    border-color: #e4d8f9;
}

.editor-window {
    position: relative;
    z-index: 2;
    width: min(100%, 385px);
    overflow: hidden;
    border: 6px solid #fff;
    border-radius: 19px;
    background: #242338;
    box-shadow: 0 28px 70px rgba(44, 35, 104, 0.22);
    transform: rotate(-2deg);
}

.editor-topbar {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 43px;
    padding: 0 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    background: #2d2b43;
}

.window-dots {
    display: flex;
    gap: 5px;
}

.window-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f27e9e;
}

.window-dots span:nth-child(2) {
    background: #ffbd66;
}

.window-dots span:nth-child(3) {
    background: #54d9a6;
}

.editor-filename {
    flex: 1;
    overflow: hidden;
    color: #c4c0e2;
    font-family: monospace;
    font-size: 0.7rem;
    text-align: center;
    white-space: nowrap;
}

.editor-topbar > i {
    color: #aaa5ca;
}

.editor-content {
    padding: 19px 8px 20px;
    font-family: Consolas, "Courier New", monospace;
    font-size: clamp(0.59rem, 1vw, 0.72rem);
    line-height: 2.5;
    text-align: left;
    direction: ltr;
}

.code-line {
    display: flex;
    align-items: baseline;
    min-height: 25px;
    white-space: pre;
}

.line-number {
    width: 31px;
    flex-shrink: 0;
    padding-right: 12px;
    color: #77748f;
    text-align: right;
    user-select: none;
}

.code-line code {
    color: #e8e5fa;
    font-family: inherit;
    white-space: pre;
}

.code-purple {
    color: #c6a0ff;
}

.code-blue {
    color: #79c9ff;
}

.code-yellow {
    color: #f9d78b;
}

.code-green {
    color: #80e6b5;
}

.indent {
    padding-left: 19px;
}

.indent-two {
    padding-left: 38px;
}

.indent-three {
    padding-left: 57px;
}

.editor-status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 13px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    background: #2d2b43;
    color: #aaa5ca;
    font-family: monospace;
    font-size: 0.68rem;
}

.editor-status span:first-child i {
    margin-left: 4px;
    color: #54d9a6;
}

.terminal-card {
    position: absolute;
    z-index: 3;
    right: -5px;
    bottom: 9px;
    width: 265px;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 15px;
    background: #fff;
    box-shadow: var(--spring-shadow);
    transform: rotate(2deg);
}

.terminal-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 9px;
    color: #79758f;
    font-family: monospace;
    font-size: 0.65rem;
    font-weight: 900;
}

.terminal-card p {
    margin-bottom: 5px;
    color: #66647b;
    font-family: monospace;
    font-size: 0.67rem;
    direction: ltr;
    text-align: left;
}

.terminal-card p:last-child {
    margin-bottom: 0;
}

.terminal-check {
    color: #25ad7c;
}

.terminal-prompt {
    color: var(--spring-primary);
}

.floating-tech {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    border: 1px solid var(--spring-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--spring-shadow);
    color: var(--spring-text);
    font-size: 0.8rem;
    font-weight: 800;
}

.tech-java {
    top: 28px;
    right: -2px;
    transform: rotate(5deg);
}

.tech-api {
    top: 76px;
    left: -8px;
    color: #269a76;
    transform: rotate(-5deg);
}

.tech-symbol {
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    background: #fff0df;
    color: #d97529;
    font-family: Georgia, serif;
    font-size: 1rem;
    font-weight: 900;
}

/* Facts */

.course-facts {
    position: relative;
    z-index: 5;
    margin-top: -23px;
}

.fact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 95px;
    height: 100%;
    padding: 16px;
    border: 1px solid var(--spring-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: var(--spring-shadow);
}

.fact-icon,
.feature-icon {
    display: grid;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: 15px;
    font-size: 1.25rem;
}

.purple {
    background: #f0edff;
    color: #6855e8;
}

.green {
    background: #ddfff1;
    color: #219a73;
}

.orange {
    background: #fff0dc;
    color: #df8a2a;
}

.pink {
    background: #ffebf5;
    color: #d94f93;
}

.fact-card strong,
.fact-card small {
    display: block;
}

.fact-card strong {
    margin-bottom: 3px;
    font-size: 0.92rem;
}

.fact-card small {
    color: var(--spring-muted);
    font-size: 0.74rem;
}

/* Shared sections */

.content-section,
.projects-section,
.faq-section {
    padding: 90px 0;
}

.section-heading {
    max-width: 770px;
    margin: 0 auto 42px;
    text-align: center;
}

.section-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--spring-primary);
    font-size: 0.87rem;
    font-weight: 900;
}

.section-heading h2,
.skills-section h2,
.prerequisite-content h2 {
    margin-bottom: 15px;
    font-size: clamp(1.65rem, 3vw, 2.3rem);
    letter-spacing: -0.5px;
}

.section-heading p {
    margin-bottom: 0;
    font-size: 0.96rem;
    line-height: 2.1;
}

.feature-card {
    height: 100%;
    padding: 29px 25px;
    border: 1px solid var(--spring-border);
    border-radius: var(--spring-radius);
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.feature-card:hover,
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(55, 42, 130, 0.12);
}

.feature-card h3 {
    margin: 19px 0 9px;
    font-size: 1.1rem;
}

.feature-card p {
    margin-bottom: 0;
    font-size: 0.89rem;
    line-height: 2.05;
}

/* Architecture */

.architecture-section {
    padding: 85px 0;
    background: var(--spring-bg);
}

.architecture-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    max-width: 1000px;
    margin: 0 auto;
}

.architecture-node {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 10px;
    border: 1px solid var(--spring-border);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(55, 42, 130, 0.04);
    text-align: center;
}

.architecture-icon {
    display: grid;
    width: 57px;
    height: 57px;
    place-items: center;
    border-radius: 17px;
    font-size: 1.55rem;
}

.user-node {
    background: #f0edff;
    color: #6855e8;
}

.controller-node {
    background: #e5f5ff;
    color: #3089c4;
}

.service-node {
    background: #ddfff1;
    color: #219a73;
}

.database-node {
    background: #fff0dc;
    color: #df8a2a;
}

.architecture-node strong {
    font-size: 0.89rem;
}

.architecture-node small {
    color: var(--spring-muted);
    font-size: 0.73rem;
}

.flow-connector {
    flex-shrink: 0;
    color: #a49abf;
    font-size: 1.4rem;
}

.architecture-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    max-width: 850px;
    margin: 25px auto 0;
    padding: 16px 20px;
    border: 1px solid #e4ddff;
    border-radius: 15px;
    background: #fff;
}

.architecture-note > i {
    margin-top: 5px;
    color: var(--spring-primary);
    font-size: 1.2rem;
}

.architecture-note p {
    margin-bottom: 0;
    font-size: 0.85rem;
}

/* Skills */

.skills-section {
    padding: 90px 0;
}

.skills-visual {
    position: relative;
    display: grid;
    min-height: 340px;
    place-items: center;
}

.skills-code-card {
    width: min(100%, 380px);
    overflow: hidden;
    border: 5px solid #fff;
    border-radius: 20px;
    background: #242338;
    box-shadow: 0 25px 60px rgba(55, 42, 130, 0.17);
    transform: rotate(2deg);
}

.skills-code-header {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #302d47;
}

.skills-code-header > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f27e9e;
}

.skills-code-header > span:nth-child(2) {
    background: #ffbd66;
}

.skills-code-header > span:nth-child(3) {
    background: #54d9a6;
}

.skills-code-header small {
    flex: 1;
    color: #c4c0e2;
    font-family: monospace;
    font-size: 0.68rem;
    text-align: right;
}

.skills-code-body {
    padding: 20px 18px;
    direction: ltr;
    text-align: left;
    font-family: Consolas, "Courier New", monospace;
    font-size: 0.79rem;
    line-height: 2.1;
}

.skills-code-body p {
    margin-bottom: 3px;
    color: #e8e5fa;
    white-space: nowrap;
}

.syntax-purple {
    color: #c6a0ff;
}

.syntax-green {
    color: #80e6b5;
}

.syntax-blue {
    color: #79c9ff;
}

.syntax-yellow {
    color: #f9d78b;
}

.code-indent {
    padding-left: 20px;
}

.skills-badge {
    position: absolute;
    right: 0;
    bottom: 6px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 15px;
    border: 1px solid var(--spring-border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--spring-shadow);
    color: #259c78;
    font-family: monospace;
    font-size: 0.77rem;
    font-weight: 800;
}

.section-description {
    margin-bottom: 26px;
    line-height: 2.1;
}

.skill-list {
    display: grid;
    gap: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.skill-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.skill-list > li > i {
    margin-top: 5px;
    color: var(--spring-green);
    font-size: 1.2rem;
}

.skill-list strong,
.skill-list small {
    display: block;
}

.skill-list strong {
    margin-bottom: 3px;
    font-size: 0.96rem;
}

.skill-list small {
    color: var(--spring-muted);
    font-size: 0.84rem;
    line-height: 1.9;
}

/* Curriculum */

.curriculum-section {
    padding: 90px 0;
    background: var(--spring-bg);
}

.curriculum-list {
    display: grid;
    gap: 13px;
    max-width: 850px;
    margin: 0 auto;
}

.curriculum-item {
    overflow: hidden;
    border: 1px solid var(--spring-border);
    border-radius: 18px;
    background: #fff;
    transition: border-color 0.2s ease;
}

.curriculum-item[open] {
    border-color: #d7ceff;
}

.curriculum-item summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    cursor: pointer;
    list-style: none;
}

.curriculum-item summary::-webkit-details-marker {
    display: none;
}

.module-number {
    display: grid;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: var(--spring-primary-soft);
    color: var(--spring-primary);
    font-family: monospace;
    font-size: 1rem;
    font-weight: 900;
}

.module-main {
    flex: 1;
    display: block;
}

.module-main strong,
.module-main small {
    display: block;
}

.module-main strong {
    font-size: 0.94rem;
}

.module-main small {
    margin-top: 3px;
    color: var(--spring-muted);
    font-size: 0.77rem;
}

.module-arrow {
    color: var(--spring-muted);
    transition: transform 0.2s ease;
}

.curriculum-item[open] .module-arrow {
    transform: rotate(180deg);
    color: var(--spring-primary);
}

.module-body {
    padding: 0 82px 22px 25px;
}

.module-body ul {
    margin: 0;
    padding-right: 20px;
    color: var(--spring-muted);
    font-size: 0.88rem;
}

.module-body li {
    padding: 4px 0;
}

.module-body li::marker {
    color: var(--spring-primary);
}

.curriculum-footnote {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    max-width: 850px;
    margin: 20px auto 0;
    font-size: 0.81rem;
}

.curriculum-footnote i {
    margin-top: 5px;
    color: var(--spring-primary);
}

/* Projects */

.project-card {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--spring-border);
    border-radius: 22px;
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-art {
    position: relative;
    display: grid;
    height: 190px;
    overflow: hidden;
    place-items: center;
}

.todo-art {
    background: linear-gradient(135deg, #e7e1ff, #c9c0ff);
}

.mock-window {
    width: 78%;
    padding: 12px;
    border: 4px solid #fff;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 15px 30px rgba(55, 42, 130, 0.13);
    transform: rotate(-3deg);
}

.mock-window-bar {
    display: flex;
    gap: 4px;
    padding-bottom: 10px;
}

.mock-window-bar span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f27e9e;
}

.mock-window-bar span:nth-child(2) {
    background: #ffbd66;
}

.mock-window-bar span:nth-child(3) {
    background: #54d9a6;
}

.mock-task {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px;
    border-radius: 7px;
    background: #f8f7ff;
    color: #696680;
    font-size: 0.7rem;
}

.mock-task i {
    color: #aaa4c7;
}

.checked-task i {
    color: #39bd91;
}

.blog-art {
    background: linear-gradient(135deg, #ddfff1, #a8ebd2);
}

.mock-blog {
    display: flex;
    width: 125px;
    height: 145px;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 4px solid #fff;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 15px 30px rgba(55, 42, 130, 0.12);
    transform: rotate(4deg);
}

.mock-blog-cover {
    height: 49px;
    border-radius: 6px;
    background: linear-gradient(135deg, #6755df, #a394ff);
}

.mock-blog-line {
    width: 78%;
    height: 5px;
    border-radius: 5px;
    background: #e4e1f0;
}

.mock-blog-line.long {
    width: 100%;
}

.mock-blog-line.short {
    width: 55%;
}

.mock-blog-button {
    width: 50px;
    height: 12px;
    margin-top: auto;
    border-radius: 5px;
    background: #5bcda2;
}

.blog-floating {
    position: absolute;
    right: 17%;
    bottom: 23px;
    color: #289a75;
    font-size: 2.2rem;
    transform: rotate(-10deg);
}

.school-art {
    background: linear-gradient(135deg, #fff0dc, #ffdca7);
}

.school-card {
    display: flex;
    width: 80%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 20px;
    border: 4px solid #fff;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 15px 30px rgba(55, 42, 130, 0.12);
    transform: rotate(-2deg);
}

.school-card > i {
    color: #e89a40;
    font-size: 1.7rem;
}

.school-card strong {
    font-family: monospace;
    font-size: 0.84rem;
}

.school-card > span {
    color: var(--spring-muted);
    font-size: 0.58rem;
}

.school-bars {
    display: flex;
    width: 100%;
    gap: 6px;
}

.school-bars span {
    height: 6px;
    flex: 1;
    border-radius: 5px;
    background: #e4defe;
}

.school-bars span:nth-child(2) {
    background: #b5f0d9;
}

.school-bars span:nth-child(3) {
    background: #ffd8a4;
}

.project-content {
    padding: 22px;
}

.project-label {
    display: inline-block;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 8px;
    background: var(--spring-primary-soft);
    color: var(--spring-primary);
    font-size: 0.73rem;
    font-weight: 800;
}

.project-content h3 {
    margin-bottom: 8px;
    font-size: 1.08rem;
}

.project-content p {
    margin-bottom: 0;
    font-size: 0.86rem;
    line-height: 2.05;
}

/* Prerequisite */

.prerequisite-section {
    padding: 80px 0;
}

.prerequisite-card {
    display: flex;
    align-items: flex-start;
    gap: 23px;
    padding: 34px;
    border: 1px solid #e2dcff;
    border-radius: 26px;
    background: linear-gradient(135deg, #f6f4ff, #fff8fc);
}

.prerequisite-icon {
    display: grid;
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    place-items: center;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--spring-shadow);
    color: var(--spring-primary);
    font-size: 1.8rem;
}

.prerequisite-content h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
}

.prerequisite-content p {
    margin-bottom: 13px;
    line-height: 2.1;
}

.prerequisite-links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 24px;
    margin-top: 18px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--spring-primary);
    font-weight: 800;
    font-size: 0.88rem;
}

.text-link:hover {
    color: var(--spring-primary-dark);
}

/* Sample teaching */

.sample-section {
    padding: 0 0 85px;
}

.sample-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 23px;
    min-height: 220px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid var(--spring-border);
    border-radius: 25px;
    background: #fff;
    box-shadow: var(--spring-shadow);
}

.sample-icon {
    display: grid;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
    place-items: center;
    border-radius: 21px;
    background: var(--spring-primary-soft);
    color: var(--spring-primary);
    font-size: 1.8rem;
}

.sample-content {
    position: relative;
    z-index: 2;
    max-width: 610px;
}

.sample-content h2 {
    margin-bottom: 10px;
    font-size: 1.6rem;
}

.sample-content p {
    margin-bottom: 15px;
    font-size: 0.9rem;
}

.sample-decoration {
    position: absolute;
    left: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    color: #e5e0ff;
    font-size: 3rem;
    transform: rotate(-12deg);
}

.sample-decoration i:nth-child(2) {
    color: #d7f7e9;
}

.sample-decoration i:nth-child(3) {
    color: #ffe9ca;
}

/* FAQ */

.faq-section {
    background: var(--spring-bg);
}

.faq-list {
    display: grid;
    gap: 12px;
    max-width: 850px;
    margin: 0 auto;
}

.faq-item {
    padding: 0 22px;
    border: 1px solid var(--spring-border);
    border-radius: 16px;
    background: #fff;
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
    font-size: 0.93rem;
    font-weight: 800;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary i {
    flex-shrink: 0;
    color: var(--spring-primary);
    transition: transform 0.2s ease;
}

.faq-item[open] summary i {
    transform: rotate(45deg);
}

.faq-item p {
    padding: 0 0 20px;
    margin: 0;
    font-size: 0.87rem;
    line-height: 2.1;
}

/* CTA */

.final-cta {
    padding: 80px 0;
}

.cta-card {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    background: linear-gradient(125deg, #4230b5, #6752e5 60%, #9886ff);
    color: #fff;
}

.cta-content {
    position: relative;
    z-index: 2;
    padding: 55px 25px;
    text-align: center;
}

.cta-decoration {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    pointer-events: none;
}

.cta-decoration-one {
    top: -110px;
    right: -40px;
    width: 250px;
    height: 250px;
}

.cta-decoration-two {
    bottom: -180px;
    left: -40px;
    width: 350px;
    height: 350px;
}

.cta-icon {
    display: grid;
    width: 65px;
    height: 65px;
    margin: 0 auto 18px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.14);
    font-size: 1.8rem;
}

.cta-content h2 {
    margin-bottom: 12px;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.cta-content p {
    max-width: 650px;
    margin: 0 auto 25px;
    color: rgba(255, 255, 255, 0.86);
}

.cta-content .btn {
    border: 0;
    border-radius: 14px;
    padding: 13px 25px;
    color: var(--spring-primary-dark);
    font-weight: 900;
}

.cta-content .btn:hover {
    background: #f1edff;
}

/* Footer */

.site-footer {
    padding: 45px 0 20px;
    border-top: 1px solid var(--spring-border);
    background: #fbfaff;
}

.footer-main {
    text-align: center;
}

.footer-brand {
    justify-content: center;
    margin-bottom: 13px;
}

.footer-main > p {
    max-width: 570px;
    margin: 0 auto 22px;
    font-size: 0.87rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 23px;
    margin-bottom: 26px;
}

.footer-links a {
    color: #66647b;
    font-size: 0.85rem;
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--spring-primary);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding-top: 19px;
    border-top: 1px solid var(--spring-border);
    color: var(--spring-muted);
    font-size: 0.76rem;
}

/* Responsive */

@media (max-width: 991.98px) {
    .site-header .navbar-collapse {
        padding-top: 17px;
    }

    .navbar-nav {
        gap: 2px;
    }

    .navbar .nav-link {
        padding: 10px 8px !important;
    }

    .spring-hero {
        padding: 45px 0 65px;
    }

    .code-visual {
        min-height: 405px;
        max-width: 500px;
        margin: 10px auto 0;
    }

    .architecture-flow {
        flex-wrap: wrap;
        gap: 10px;
    }

    .architecture-node {
        flex-basis: 18%;
    }

    .flow-connector {
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .container {
        padding-right: 20px;
        padding-left: 20px;
    }

    .spring-hero {
        padding: 35px 0 48px;
    }

    .spring-hero h1 {
        font-size: clamp(1.85rem, 7vw, 2.55rem);
        letter-spacing: -0.5px;
    }

    .hero-description {
        font-size: 0.93rem;
    }

    .hero-pills {
        gap: 8px;
    }

    .hero-pills span {
        font-size: 0.75rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .code-visual {
        min-height: 365px;
    }

    .code-visual::before {
        width: 270px;
        height: 270px;
    }

    .orbit-one {
        width: 330px;
        height: 330px;
    }

    .orbit-two {
        width: 235px;
        height: 235px;
    }

    .editor-window {
        width: min(100%, 350px);
    }

    .editor-content {
        padding: 14px 5px;
        font-size: 0.59rem;
    }

    .line-number {
        width: 27px;
        padding-right: 9px;
    }

    .terminal-card {
        right: 0;
        bottom: 0;
        width: 230px;
    }

    .floating-tech {
        padding: 8px 10px;
        font-size: 0.72rem;
    }

    .tech-java {
        top: 15px;
        right: 0;
    }

    .tech-api {
        top: 57px;
        left: 0;
    }

    .course-facts {
        margin-top: -12px;
    }

    .fact-card {
        min-height: 86px;
        gap: 9px;
        padding: 11px;
    }

    .fact-icon {
        width: 39px;
        height: 39px;
        border-radius: 12px;
        font-size: 1.05rem;
    }

    .fact-card strong {
        font-size: 0.79rem;
    }

    .fact-card small {
        font-size: 0.68rem;
    }

    .content-section,
    .projects-section,
    .faq-section,
    .curriculum-section {
        padding: 60px 0;
    }

    .section-heading {
        margin-bottom: 30px;
    }

    .section-heading h2,
    .skills-section h2 {
        font-size: 1.65rem;
    }

    .feature-card {
        padding: 23px;
    }

    .architecture-section {
        padding: 60px 0;
    }

    .architecture-flow {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .architecture-node {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        padding: 12px 15px;
    }

    .architecture-icon {
        width: 43px;
        height: 43px;
        border-radius: 13px;
        font-size: 1.15rem;
    }

    .architecture-node strong {
        min-width: 90px;
        text-align: right;
    }

    .architecture-node small {
        margin-right: auto;
        text-align: left;
    }

    .flow-connector {
        display: grid;
        height: 18px;
        place-items: center;
        transform: rotate(-90deg);
        font-size: 1rem;
    }

    .architecture-note {
        padding: 14px;
    }

    .skills-section {
        padding: 60px 0;
    }

    .skills-visual {
        min-height: 300px;
    }

    .skills-code-card {
        width: min(100%, 350px);
    }

    .skills-code-body {
        padding: 15px 10px;
        font-size: 0.69rem;
    }

    .skills-badge {
        bottom: 0;
        right: 0;
    }

    .curriculum-item summary {
        gap: 11px;
        padding: 14px;
    }

    .module-number {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        font-size: 0.85rem;
    }

    .module-main strong {
        font-size: 0.83rem;
    }

    .module-main small {
        font-size: 0.7rem;
    }

    .module-body {
        padding: 0 25px 19px 15px;
    }

    .module-body ul {
        font-size: 0.82rem;
    }

    .project-art {
        height: 175px;
    }

    .prerequisite-section {
        padding: 55px 0;
    }

    .prerequisite-card {
        flex-direction: column;
        gap: 18px;
        padding: 24px;
    }

    .prerequisite-links {
        flex-direction: column;
        gap: 12px;
    }

    .sample-section {
        padding-bottom: 60px;
    }

    .sample-card {
        align-items: flex-start;
        flex-direction: column;
        gap: 17px;
        padding: 24px;
    }

    .sample-content h2 {
        font-size: 1.4rem;
    }

    .sample-decoration {
        left: 12px;
        bottom: 8px;
        opacity: 0.35;
        font-size: 2rem;
    }

    .faq-item {
        padding: 0 16px;
    }

    .faq-item summary {
        font-size: 0.85rem;
        line-height: 1.9;
    }

    .faq-item p {
        font-size: 0.82rem;
    }

    .final-cta {
        padding: 55px 0;
    }

    .cta-card {
        border-radius: 23px;
    }

    .cta-content {
        padding: 40px 20px;
    }

    .cta-content h2 {
        font-size: 1.6rem;
    }

    .cta-content p {
        font-size: 0.9rem;
    }

    .footer-bottom {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 380px) {
    .navbar-brand {
        gap: 7px;
        font-size: 0.95rem;
    }

    .brand-logo {
        width: 38px;
        height: 38px;
    }

    .hero-pills span {
        font-size: 0.7rem;
    }

    .editor-window {
        border-width: 4px;
    }

    .editor-content {
        font-size: 0.53rem;
    }

    .terminal-card {
        width: 205px;
        padding: 11px;
    }

    .architecture-node strong {
        min-width: 78px;
        font-size: 0.8rem;
    }

    .architecture-node small {
        font-size: 0.68rem;
    }

    .module-main strong {
        font-size: 0.77rem;
    }

    .module-main small {
        font-size: 0.66rem;
    }
}

/* Accessibility */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
/* ظرف اصلی ویرایشگر کد */
.code-editor {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    direction: ltr;
    text-align: left;
    background: #111827;
    border: 1px solid #273449;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    font-family: Consolas, "Courier New", monospace;
}

/* نوار بالای ویرایشگر */
.editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #1f2937;
    border-bottom: 1px solid #374151;
}

.editor-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.editor-dots .dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 50%;
}

.editor-dots .red {
    background: #ff5f57;
}

.editor-dots .yellow {
    background: #febc2e;
}

.editor-dots .green {
    background: #28c840;
}

.editor-filename {
    color: #cbd5e1;
    font-family: Consolas, "Courier New", monospace;
    font-size: 13px;
}

/* محتوای کد */
.editor-content {
    padding: 20px 0;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: #475569 #111827;
}

.code-line {
    display: flex;
    align-items: flex-start;
    min-height: 32px;
    width: max-content;
    min-width: 100%;
    padding-right: 24px;
    box-sizing: border-box;
    white-space: pre;
    line-height: 1.8;
    font-size: 14px;
}

.line-number {
    display: inline-block;
    width: 48px;
    min-width: 48px;
    padding-right: 16px;
    color: #64748b;
    text-align: right;
    user-select: none;
    box-sizing: border-box;
}

.code-line code {
    display: block;
    color: #e5e7eb;
    background: transparent;
    font-family: Consolas, "Courier New", monospace;
    font-size: inherit;
    line-height: inherit;
    white-space: pre;
    direction: ltr;
    unicode-bidi: isolate;
}

/* تورفتگی خطوط */
.code-line code.indent {
    padding-left: 4ch;
}

.code-line code.indent-two {
    padding-left: 8ch;
}

/* رنگ‌بندی سینتکس جاوا */
.code-purple {
    color: #c084fc;
}

.code-blue {
    color: #60a5fa;
}

.code-yellow {
    color: #facc15;
}

.code-green {
    color: #4ade80;
}

/* نمایش در موبایل */
@media (max-width: 576px) {
    .code-editor {
        border-radius: 12px;
    }

    .editor-header {
        padding: 12px;
    }

    .editor-content {
        padding: 16px 0;
    }

    .code-line {
        min-height: 29px;
        font-size: 12px;
        padding-right: 16px;
    }

    .line-number {
        width: 36px;
        min-width: 36px;
        padding-right: 10px;
    }

    .editor-filename {
        font-size: 12px;
    }
}