:root{
  --bg:#f7fafc;--surface:#ffffff;--surface2:#eef6ff;--lav:#f3f0ff;--cyan:#ecfeff;
  --text:#15243b;--muted:#607089;--primary:#2563eb;--primary2:#0ea5e9;--accent:#7c3aed;
  --border:#dce6f0;--success:#15803d;--danger:#b91c1c;--shadow:0 18px 50px rgba(21,36,59,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.6}
h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;line-height:1.16;margin:0 0 14px}
h1{font-size:clamp(2.7rem,6vw,5.4rem);letter-spacing:-.045em}
h2{font-size:clamp(2rem,4vw,3.3rem);letter-spacing:-.03em}
h3{font-size:1.25rem}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.container{width:min(1180px,92%);margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(247,250,252,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(220,230,240,.8)}
.navbar{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-family:Poppins;font-weight:800;font-size:1.35rem}
.gear{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:linear-gradient(135deg,var(--primary),var(--primary2));color:white}
.nav-wrap{display:flex;align-items:center;gap:20px;font-weight:600;font-size:.94rem}
.nav-wrap>a:not(.primary-btn):not(.ghost-btn):hover{color:var(--primary)}
.menu-toggle{display:none;border:1px solid var(--border);background:white;border-radius:12px;padding:8px 12px}
.primary-btn,.ghost-btn,.outline-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:14px 20px;font-weight:700;border:0}
.primary-btn{color:white;background:linear-gradient(135deg,var(--primary),var(--primary2));box-shadow:0 10px 28px rgba(37,99,235,.22)}
.primary-btn:hover{transform:translateY(-2px)}
.primary-btn.small{padding:10px 15px;border-radius:11px}
.ghost-btn{border:1px solid var(--border);background:white}
.outline-btn{border:1px solid var(--primary);color:var(--primary);background:white}
.hero{padding:96px 0 72px;background:
radial-gradient(circle at 80% 10%,#dbeafe 0,transparent 30%),
radial-gradient(circle at 10% 80%,#ede9fe 0,transparent 28%)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.eyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:#e0f2fe;color:#0369a1;font-weight:800;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:20px}
.gradient-text{background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.15rem;color:var(--muted);max-width:700px}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-card{background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.9);box-shadow:var(--shadow);border-radius:30px;padding:30px;min-height:420px;display:grid;place-items:center}
.engineering-visual{width:100%;aspect-ratio:1/.78;border-radius:24px;background:
linear-gradient(135deg,rgba(37,99,235,.12),rgba(124,58,237,.12)),repeating-linear-gradient(0deg,transparent,transparent 23px,rgba(37,99,235,.06) 24px),repeating-linear-gradient(90deg,transparent,transparent 23px,rgba(37,99,235,.06) 24px);
display:grid;place-items:center;text-align:center;padding:24px}
.engineering-visual .big-gear{font-size:6rem}
.section{padding:84px 0}
.section.soft{background:var(--surface2)}
.section.lav{background:var(--lav)}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px}
.section-head p{max-width:680px;color:var(--muted);margin:0}
.grid{display:grid;gap:20px}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:24px;box-shadow:0 12px 32px rgba(21,36,59,.06);transition:.25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card p,.muted{color:var(--muted)}
.icon{width:52px;height:52px;border-radius:15px;background:#e8f1ff;color:var(--primary);display:grid;place-items:center;font-size:1.45rem;font-weight:800;margin-bottom:18px}
.stat{text-align:center;padding:24px}.stat strong{display:block;font-size:2.2rem;color:var(--primary);font-family:Poppins}.stat span{color:var(--muted)}
.video-card{overflow:hidden;padding:0}
.video-thumb{position:relative;aspect-ratio:16/9;background:#dbeafe;overflow:hidden}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-thumb::after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:rgba(15,23,42,.86);color:white;font-size:1.2rem}
.video-body{padding:22px}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 16px}.tag{font-size:.78rem;font-weight:800;padding:6px 9px;border-radius:999px;background:#eef2ff;color:#4338ca}
.search-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.search-row input,.form input,.form select,.form textarea{width:100%;border:1px solid var(--border);border-radius:13px;padding:14px;background:white;color:var(--text);outline:none}
.search-row input{flex:1;min-width:240px}
.filter-btn{border:1px solid var(--border);background:white;padding:10px 13px;border-radius:999px;font-weight:700}
.filter-btn.active{background:var(--primary);color:white;border-color:var(--primary)}
.download-card .filetype{font-size:.75rem;font-weight:800;color:var(--primary);letter-spacing:.1em}
.calc-layout{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.calc-card{background:white;border:1px solid var(--border);border-radius:22px;padding:24px}
.calc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.calc-card label{font-weight:700;font-size:.9rem}.calc-card input,.calc-card select{width:100%;margin-top:7px;padding:12px;border:1px solid var(--border);border-radius:11px}
.result{margin-top:14px;padding:14px;border-radius:12px;background:#eff6ff;font-weight:800;color:#1d4ed8;min-height:52px}
.form{background:white;border:1px solid var(--border);border-radius:22px;padding:26px;box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form textarea{min-height:150px;resize:vertical}.span-2{grid-column:1/-1}
.notice{border-radius:14px;padding:14px 16px;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.success{background:#ecfdf5;color:#166534;border-color:#bbf7d0}
.dashboard-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.metric{background:white;border:1px solid var(--border);border-radius:18px;padding:22px}.metric strong{font-size:2rem;color:var(--primary)}
.progress{height:10px;background:#e2e8f0;border-radius:999px;overflow:hidden}.progress>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary2))}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse;background:white}.table th,.table td{text-align:left;padding:13px;border-bottom:1px solid var(--border);white-space:nowrap}
.footer{background:#0f172a;color:white;padding:58px 0 22px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:30px}.footer a{display:block;color:#cbd5e1;margin:8px 0}.footer-bottom{border-top:1px solid #334155;margin-top:28px;padding-top:20px;color:#94a3b8}
.auth-shell{min-height:78vh;padding:70px 0;background:linear-gradient(135deg,#eff6ff,#f5f3ff)}.auth-card{width:min(520px,92%);margin:auto}
.code-note{background:#0f172a;color:#dbeafe;border-radius:18px;padding:20px;overflow:auto}
.hidden{display:none!important}
@media(max-width:980px){.hero-grid,.grid-4,.grid-3,.dashboard-grid{grid-template-columns:repeat(2,1fr)}.hero-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.nav-wrap{display:none;position:absolute;left:4%;right:4%;top:70px;background:white;border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-wrap.open{display:flex}.menu-toggle{display:block}}
@media(max-width:680px){.grid-4,.grid-3,.grid-2,.calc-layout,.form-grid,.dashboard-grid,.footer-grid,.calc-row{grid-template-columns:1fr}.section{padding:62px 0}.hero{padding-top:70px}.span-2{grid-column:auto}.section-head{align-items:flex-start;flex-direction:column}}
/* =========================================
   PROFILE NAVBAR
========================================= */

.profile-menu{
    position:relative;
}

.profile-trigger{

    display:flex;
    align-items:center;
    gap:10px;

    border:none;
    background:white;

    padding:7px 12px;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    color:var(--text);

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

}

.profile-avatar{

    width:34px;
    height:34px;

    border-radius:50%;

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

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary2)
        );

    color:white;

    font-weight:800;

}

.profile-name{
    max-width:120px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.profile-arrow{
    font-size:12px;
    color:var(--muted);
}

.profile-dropdown{

    display:none;

    position:absolute;

    top:calc(100% + 12px);
    right:0;

    min-width:190px;

    background:white;

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

    border-radius:16px;

    padding:8px;

    box-shadow:var(--shadow);

    z-index:100;

}

.profile-dropdown.show{
    display:block;
}

.profile-dropdown a,
.profile-dropdown button{

    display:block;

    width:100%;

    padding:11px 12px;

    border:none;

    background:none;

    border-radius:10px;

    text-align:left;

    color:var(--text);

    font-weight:600;

    cursor:pointer;

}

.profile-dropdown a:hover,
.profile-dropdown button:hover{

    background:#EFF6FF;

    color:var(--primary);

}
/* =========================================
   ADMIN MESSAGE DELETE
========================================= */

.delete-message-btn {

    border: none;

    background: #fee2e2;

    color: #b91c1c;

    padding: 9px 14px;

    border-radius: 10px;

    font-weight: 700;

    cursor: pointer;

}

.delete-message-btn:hover {

    background: #fecaca;

}
/* =========================================
   DOWNLOAD RESOURCE CARD GRID FIX
========================================= */

/* Resource grids */
.grid.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}

.grid.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.grid.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}


/* Download cards */
.resource-card {
    width: 100%;
    min-width: 0;
    height: 100%;

    display: flex;
    flex-direction: column;

    padding: 24px;
    border-radius: 22px;
}


/* Keep button near bottom of card */
.resource-card .primary-btn,
.resource-card .outline-btn {
    margin-top: auto;
    align-self: flex-start;
}


/* Tablet */
@media (max-width: 1000px) {

    .grid.grid-4,
    .grid.grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* Mobile */
@media (max-width: 650px) {

    .grid.grid-4,
    .grid.grid-3,
    .grid.grid-2 {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   POLISHED DOWNLOAD RESOURCE CARDS
========================================= */

.resource-card{
    position:relative;
    overflow:hidden;

    min-height:320px;

    padding:26px;

    border-radius:24px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );

    border:1px solid #dbe6f2;

    box-shadow:
        0 10px 28px
        rgba(15, 23, 42, 0.06);

    display:flex;
    flex-direction:column;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

.resource-card:hover{
    transform:translateY(-5px);

    box-shadow:
        0 18px 42px
        rgba(15, 23, 42, 0.11);

    border-color:#bfdbfe;
}


/* soft accent line */
.resource-card::before{
    content:"";

    position:absolute;

    top:0;
    left:0;
    right:0;

    height:4px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}


/* file type badge */
.resource-card .filetype{
    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:6px 10px;

    margin-bottom:16px;

    border-radius:999px;

    background:#eef6ff;

    color:#1d4ed8;

    font-size:.72rem;

    font-weight:800;

    letter-spacing:.08em;

    text-transform:uppercase;
}


/* icon */
.resource-card .icon{
    width:50px;
    height:50px;

    border-radius:16px;

    margin-bottom:18px;

    display:grid;
    place-items:center;

    background:
        linear-gradient(
            135deg,
            #eaf2ff,
            #f4f0ff
        );

    color:#2563eb;

    font-weight:800;

    font-size:1.15rem;
}


/* heading */
.resource-card h3{
    font-size:1.18rem;

    line-height:1.35;

    margin-bottom:12px;

    color:#17233b;
}


/* description */
.resource-card p{
    color:#61708a;

    line-height:1.7;

    margin-bottom:24px;

    flex-grow:1;
}


/* buttons */
.resource-card .outline-btn,
.resource-card .primary-btn{
    margin-top:auto;

    align-self:flex-start;

    padding:11px 16px;

    border-radius:12px;
}


/* grid polish */
.grid.grid-3{
    gap:24px;
}

.grid.grid-3 > .resource-card{
    min-width:0;
}


/* make last row look better */
@media(min-width:1000px){

    .grid.grid-3 > .resource-card:nth-last-child(2):first-child,
    .grid.grid-3 > .resource-card:nth-last-child(2):first-child ~ .resource-card{
        max-width:none;
    }

}


/* tablet */
@media(max-width:1000px){

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

}


/* mobile */
@media(max-width:650px){

    .grid.grid-3{
        grid-template-columns:1fr;
    }

    .resource-card{
        min-height:auto;
    }

}
/* =========================================
   FINAL AUTOCAD CARD LAYOUT FIX
========================================= */

.autocad-resource-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100%;
}


/* TOP ROW — 3 CARDS */

.autocad-resource-grid > .resource-card:nth-child(1),
.autocad-resource-grid > .resource-card:nth-child(2),
.autocad-resource-grid > .resource-card:nth-child(3) {
    grid-column: span 2 !important;
}


/* SECOND ROW — 2 CENTERED CARDS */

.autocad-resource-grid > .resource-card:nth-child(4) {
    grid-column: 2 / span 2 !important;
}

.autocad-resource-grid > .resource-card:nth-child(5) {
    grid-column: 4 / span 2 !important;
}


/* CARDS */

.autocad-resource-grid > .resource-card {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 315px;

    display: flex;
    flex-direction: column;

    padding: 26px;

    border-radius: 22px;
}


/* BUTTON AT BOTTOM */

.autocad-resource-grid .outline-btn,
.autocad-resource-grid .primary-btn {
    margin-top: auto;
    align-self: flex-start;
}


/* TABLET */

@media (max-width: 1000px) {

    .autocad-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .autocad-resource-grid > .resource-card:nth-child(n) {
        grid-column: auto !important;
    }

}


/* MOBILE */

@media (max-width: 650px) {

    .autocad-resource-grid {
        grid-template-columns: 1fr !important;
    }

}
/* =========================================
   SOLIDWORKS RESOURCE GRID
========================================= */

.solidworks-resource-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.solidworks-resource-grid > .resource-card {
    width: 100%;
    min-width: 0;
    min-height: 320px;

    display: flex;
    flex-direction: column;
}

.solidworks-resource-grid .outline-btn,
.solidworks-resource-grid .primary-btn {
    margin-top: auto;
    align-self: flex-start;
}

@media (max-width: 1000px) {

    .solidworks-resource-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .solidworks-resource-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   FINAL CREO CARD FIX
========================================= */

.creo-resource-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
    width: 100% !important;
}

.creo-resource-grid > .resource-card {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    min-height: 320px;
    box-sizing: border-box;
}

/* button bottom aligned */
.creo-resource-grid > .resource-card .outline-btn {
    margin-top: auto;
    align-self: flex-start;
}

/* Tablet */
@media (max-width: 1000px) {
    .creo-resource-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media (max-width: 650px) {
    .creo-resource-grid {
        grid-template-columns: 1fr !important;
    }
}
/* =========================================
   PREMIUM RESOURCE CARDS - ALL DOWNLOADS
========================================= */

.resource-card {
    position: relative;
    overflow: hidden;

    min-height: 340px;
    padding: 28px;

    border-radius: 26px;

    border: 1px solid rgba(37, 99, 235, 0.12);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(59, 130, 246, 0.11),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );

    box-shadow:
        0 12px 30px
        rgba(15, 23, 42, 0.07);

    display: flex;
    flex-direction: column;

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}


/* Top gradient accent */

.resource-card::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}


/* Decorative glow */

.resource-card::after {

    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -55px;
    right: -55px;

    border-radius: 50%;

    background:
        rgba(99, 102, 241, 0.07);

    pointer-events: none;
}


/* Hover */

.resource-card:hover {

    transform: translateY(-7px);

    border-color:
        rgba(37, 99, 235, 0.28);

    box-shadow:
        0 22px 50px
        rgba(15, 23, 42, 0.13);
}


/* =========================================
   FILE TYPE BADGE
========================================= */

.resource-card .filetype {

    display: inline-flex;

    align-items: center;

    width: fit-content;

    padding: 7px 11px;

    margin-bottom: 18px;

    border-radius: 999px;

    background: #eef4ff;

    color: #1d4ed8;

    font-size: .7rem;

    font-weight: 800;

    letter-spacing: .08em;

    text-transform: uppercase;
}


/* =========================================
   ICON
========================================= */

.resource-card .icon {

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    margin-bottom: 22px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-size: 1rem;

    font-weight: 900;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, 0.12);
}


/* =========================================
   TITLE
========================================= */

.resource-card h3 {

    margin-bottom: 12px;

    font-size: 1.22rem;

    line-height: 1.35;

    color: #17233b;
}


/* =========================================
   DESCRIPTION
========================================= */

.resource-card p {

    flex-grow: 1;

    margin-bottom: 24px;

    color: #64748b;

    line-height: 1.7;
}


/* =========================================
   BUTTONS
========================================= */

.resource-card .outline-btn,
.resource-card .primary-btn {

    margin-top: auto;

    align-self: flex-start;

    padding: 11px 16px;

    border-radius: 12px;

    font-weight: 750;

    transition: .2s ease;
}


.resource-card .outline-btn {

    background: white;

    border: 1px solid #bfdbfe;

    color: #2563eb;
}


.resource-card .outline-btn:hover {

    color: white;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    border-color: transparent;

    transform: translateY(-2px);
}


/* =========================================
   SOFTWARE-SPECIFIC ACCENTS
========================================= */


/* AutoCAD */

.resource-card[data-download-category*="autocad"]::before {

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #38bdf8
        );
}


/* SolidWorks */

.resource-card[data-download-category*="solidworks"]::before {

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #6366f1
        );
}


/* Creo */

.resource-card[data-download-category*="creo"]::before {

    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #4f46e5
        );
}


/* ANSYS */

.resource-card[data-download-category*="ansys"]::before {

    background:
        linear-gradient(
            90deg,
            #0f766e,
            #06b6d4
        );
}


/* Practice files */

.resource-card[data-download-category*="practice"] .filetype {

    background: #ecfdf5;

    color: #047857;
}


/* PDFs */

.resource-card[data-download-category*="pdf"] .filetype {

    background: #fff1f2;

    color: #be123c;
}


/* Software */

.resource-card[data-download-category*="software"] .filetype {

    background: #f3e8ff;

    color: #7e22ce;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .resource-card {

        min-height: auto;

        padding: 24px;
    }

}
/* =========================================
   ANSYS RESOURCE GRID
========================================= */

.ansys-resource-grid {

    display: grid !important;

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

    gap: 24px !important;

    width: 100%;

}


.ansys-resource-grid > .resource-card {

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    min-height: 340px;

    display: flex !important;

    flex-direction: column !important;

}


.ansys-resource-grid
.outline-btn,

.ansys-resource-grid
.primary-btn {

    margin-top: auto;

    align-self: flex-start;

}


/* TABLET */

@media (max-width: 1000px) {

    .ansys-resource-grid {

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

    }

}


/* MOBILE */

@media (max-width: 650px) {

    .ansys-resource-grid {

        grid-template-columns:
            1fr !important;

    }

}
/* =========================================
   MECHANICAL RESOURCE GRID
========================================= */

.mechanical-resource-grid {

    display: grid !important;

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

    gap: 24px !important;

    width: 100%;
}


.mechanical-resource-grid > .resource-card {

    width: 100% !important;

    max-width: none !important;

    min-width: 0 !important;

    min-height: 340px;

    display: flex !important;

    flex-direction: column !important;
}


.mechanical-resource-grid .outline-btn,
.mechanical-resource-grid .primary-btn {

    margin-top: auto;

    align-self: flex-start;
}


/* Mechanical cards use a slightly different accent */

.resource-card[
    data-download-category*="mechanical"
]::before {

    background:
        linear-gradient(
            90deg,
            #0284c7,
            #14b8a6,
            #6366f1
        );
}


@media (max-width: 1000px) {

    .mechanical-resource-grid {

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

    }

}


@media (max-width: 650px) {

    .mechanical-resource-grid {

        grid-template-columns:
            1fr !important;

    }

}
/* Tutorial cards */

#tutorial-grid {
    align-items: stretch;
}

#tutorial-grid .video-card {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 390px;
    transition: transform .25s ease, box-shadow .25s ease;
}

#tutorial-grid .video-card:hover {
    transform: translateY(-6px);
}

#tutorial-grid .video-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

#tutorial-grid .video-body p {
    flex-grow: 1;
}

#tutorial-grid .video-thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #eaf1fa;
}

#tutorial-grid .video-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-resource-icon {
    min-height: 185px;

    display: grid;
    place-items: center;

    font-size: 2.2rem;
    font-weight: 900;

    color: #2563eb;

    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(139, 92, 246, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #eaf4ff,
            #f4efff
        );
}
/* =========================================
   PREMIUM TUTORIAL FILTER BAR
========================================= */

.tutorial-controls {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 22px;

    margin: 0 0 42px;
    padding: 24px;

    border-radius: 24px;
    border: 1px solid rgba(37, 99, 235, 0.12);

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(124, 58, 237, 0.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f5f9ff
        );

    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.07);
}


/* Labels */

.tutorial-search-box label,
.tutorial-select-box label {
    display: block;

    margin-bottom: 9px;

    color: #475569;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/* Search wrapper */

.tutorial-search-box,
.tutorial-select-box {
    position: relative;
}


/* Search input */

#tutorial-search {
    width: 100%;
    height: 56px;

    padding: 0 18px 0 50px;

    border: 1px solid #dbe5f0;
    border-radius: 16px;

    background: #ffffff;

    color: #17233b;

    font-size: 0.96rem;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}


/* Search icon */

.tutorial-search-box::after {
    content: "⌕";

    position: absolute;

    left: 18px;
    bottom: 13px;

    color: #2563eb;

    font-size: 1.3rem;

    pointer-events: none;
}


/* Dropdown */

#software-filter {
    width: 100%;
    height: 56px;

    padding: 0 48px 0 18px;

    border: 1px solid #dbe5f0;
    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fbff
        );

    color: #17233b;

    font-size: 0.96rem;
    font-weight: 700;

    outline: none;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
}


/* Custom dropdown arrow */

.tutorial-select-box::after {
    content: "⌄";

    position: absolute;

    right: 18px;
    bottom: 13px;

    color: #2563eb;

    font-size: 1.3rem;
    font-weight: 900;

    pointer-events: none;
}


/* Focus */

#tutorial-search:focus,
#software-filter:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.10);

    transform: translateY(-1px);
}


/* Placeholder */

#tutorial-search::placeholder {
    color: #94a3b8;
}


/* =========================================
   SOFTWARE HEADING CARD
========================================= */

.tutorial-category-heading {
    position: relative;

    overflow: hidden;

    margin-bottom: 30px;

    padding: 26px 28px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #eef6ff,
            #f5f1ff
        );

    border: 1px solid rgba(37, 99, 235, 0.10);
}


.tutorial-category-heading::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    right: -60px;
    top: -70px;

    border-radius: 50%;

    background:
        rgba(99, 102, 241, 0.08);
}


.tutorial-category-heading .eyebrow {
    margin-bottom: 12px;
}


.tutorial-category-heading h2 {
    margin: 0 0 8px;

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


.tutorial-category-heading p {
    max-width: 700px;

    margin: 0;

    color: #64748b;

    font-size: 1rem;
}


/* Tablet */

@media (max-width: 850px) {

    .tutorial-controls {
        grid-template-columns: 1fr;
    }

}


/* Mobile */

@media (max-width: 650px) {

    .tutorial-controls {
        padding: 18px;
        border-radius: 20px;
    }

    .tutorial-category-heading {
        padding: 22px;
    }

}

/* =========================================
   PREMIUM TUTORIAL CARDS
========================================= */

#tutorial-grid {
    gap: 26px;
    align-items: stretch;
}

#tutorial-grid .video-card {
    position: relative;
    overflow: hidden;

    min-height: 440px;

    display: flex;
    flex-direction: column;

    border-radius: 26px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );

    border: 1px solid rgba(37, 99, 235, 0.12);

    box-shadow:
        0 14px 34px
        rgba(15, 23, 42, 0.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;
}

#tutorial-grid .video-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}

#tutorial-grid .video-card:hover {
    transform: translateY(-7px);

    border-color:
        rgba(37, 99, 235, 0.28);

    box-shadow:
        0 24px 52px
        rgba(15, 23, 42, 0.13);
}


/* =========================================
   VIDEO THUMBNAILS
========================================= */

#tutorial-grid .video-thumb {
    position: relative;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    background: #eaf1fa;
}

#tutorial-grid .video-thumb img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .35s ease;
}

#tutorial-grid .video-card:hover
.video-thumb img {
    transform: scale(1.04);
}


/* Play button */

#tutorial-grid .video-thumb::after {
    content: "▶";

    position: absolute;

    top: 50%;
    left: 50%;

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

    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background:
        rgba(15, 23, 42, 0.86);

    color: white;

    font-size: 1rem;

    box-shadow:
        0 8px 24px
        rgba(15, 23, 42, .25);
}


/* =========================================
   NON-VIDEO RESOURCE VISUAL
========================================= */

#tutorial-grid .video-resource-icon {
    min-height: 205px;

    display: grid;
    place-items: center;

    position: relative;
    overflow: hidden;

    font-size: 2.5rem;
    font-weight: 900;

    color: #2563eb;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(124, 58, 237, .18),
            transparent 30%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(14, 165, 233, .14),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #eaf4ff,
            #f4efff
        );
}

#tutorial-grid .video-resource-icon::after {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    right: -45px;
    top: -45px;

    border-radius: 50%;

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


/* =========================================
   CARD BODY
========================================= */

#tutorial-grid .video-body {
    padding: 24px;

    display: flex;
    flex-direction: column;

    flex: 1;
}

#tutorial-grid .tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 16px;
}

#tutorial-grid .tag {
    padding: 6px 10px;

    border-radius: 999px;

    background: #eef2ff;

    color: #4338ca;

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .02em;
}

#tutorial-grid .video-body h3 {
    margin-bottom: 12px;

    min-height: 56px;

    font-size: 1.2rem;
    line-height: 1.35;

    color: #17233b;
}

#tutorial-grid .video-body p {
    flex-grow: 1;

    margin-bottom: 22px;

    color: #64748b;

    line-height: 1.65;
}


/* =========================================
   CTA BUTTON
========================================= */

#tutorial-grid .primary-btn {
    width: 100%;

    margin-top: auto;

    padding: 12px 16px;

    border-radius: 13px;

    box-shadow: none;
}

#tutorial-grid .primary-btn:hover {
    transform: translateY(-2px);
}


/* =========================================
   SOFTWARE ACCENTS
========================================= */

#tutorial-grid
.video-card[data-category="autocad"]::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #38bdf8
        );
}

#tutorial-grid
.video-card[data-category="solidworks"]::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #6366f1
        );
}

#tutorial-grid
.video-card[data-category="creo"]::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #4f46e5
        );
}

#tutorial-grid
.video-card[data-category="ansys"]::before {
    background:
        linear-gradient(
            90deg,
            #0f766e,
            #06b6d4
        );
}


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

@media (max-width: 1000px) {

    #tutorial-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    #tutorial-grid {
        grid-template-columns: 1fr;
    }

    #tutorial-grid .video-card {
        min-height: auto;
    }

}
/* =========================================
   SOFTWARE HUB
========================================= */

.software-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.software-hub-card {
    position: relative;
    overflow: hidden;

    min-height: 440px;
    padding: 30px;

    display: flex;
    flex-direction: column;

    border-radius: 28px;
    border: 1px solid rgba(37, 99, 235, .12);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99, 102, 241, .11),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f8fbff
        );

    box-shadow:
        0 16px 40px rgba(15, 23, 42, .08);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

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

    box-shadow:
        0 24px 55px rgba(15, 23, 42, .14);
}

.software-hub-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}


/* Header */

.software-top {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-bottom: 24px;
}

.software-logo {
    width: 64px;
    height: 64px;

    display: grid;
    place-items: center;

    flex-shrink: 0;

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-size: 1.15rem;
    font-weight: 900;
}

.software-company {
    display: block;

    margin-bottom: 4px;

    color: #64748b;

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .10em;
}

.software-top h2 {
    margin: 0;

    font-size: 1.7rem;
}


/* Description */

.software-description {
    color: #64748b;

    line-height: 1.75;

    margin-bottom: 22px;
}


/* Tags */

.software-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-bottom: 28px;
}

.software-tags span {
    padding: 7px 11px;

    border-radius: 999px;

    background: #eef2ff;

    color: #4338ca;

    font-size: .75rem;
    font-weight: 800;
}


/* Buttons */

.software-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: auto;
}

.software-actions .primary-btn,
.software-actions .outline-btn {
    padding: 11px 15px;

    border-radius: 12px;
}


/* Software accents */

.software-autocad::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #38bdf8
        );
}

.software-solidworks::before {
    background:
        linear-gradient(
            90deg,
            #2563eb,
            #6366f1
        );
}

.software-creo::before {
    background:
        linear-gradient(
            90deg,
            #7c3aed,
            #4f46e5
        );
}

.software-ansys::before {
    background:
        linear-gradient(
            90deg,
            #0f766e,
            #06b6d4
        );
}


/* =========================================
   QUICK GUIDE
========================================= */

.software-use-grid {
    display: grid;

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

    gap: 20px;
}

.software-use-grid .card {
    position: relative;

    min-height: 230px;

    padding: 26px;
}

.software-use-number {
    display: block;

    margin-bottom: 20px;

    color: #2563eb;

    font-size: .75rem;
    font-weight: 900;

    letter-spacing: .12em;
}

.software-use-grid h3 {
    margin-bottom: 10px;
}

.software-use-grid p {
    color: #64748b;

    line-height: 1.65;
}


/* Responsive */

@media (max-width: 1000px) {

    .software-hub-grid {
        grid-template-columns: 1fr;
    }

    .software-use-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}

@media (max-width: 650px) {

    .software-use-grid {
        grid-template-columns: 1fr;
    }

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

    .software-actions a {
        width: 100%;
        text-align: center;
    }

}
/* =========================================
   SYSTEM REQUIREMENTS ACCORDION
========================================= */

.requirements-list {
    display: grid;
    gap: 16px;
}

.requirement-item {
    overflow: hidden;

    border-radius: 22px;
    border: 1px solid #dce6f0;

    background: white;

    box-shadow:
        0 10px 28px rgba(15, 23, 42, .05);
}


.requirement-toggle {
    width: 100%;

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

    padding: 20px 22px;

    border: 0;
    background: transparent;

    cursor: pointer;

    color: #17233b;
}


.requirement-software {
    display: flex;
    align-items: center;

    gap: 15px;

    text-align: left;
}


.requirement-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-weight: 900;
}


.requirement-software strong {
    display: block;

    font-size: 1.05rem;
}


.requirement-software small {
    display: block;

    margin-top: 3px;

    color: #64748b;
}


.requirement-arrow {
    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: #eff6ff;

    color: #2563eb;

    font-size: 1.35rem;

    transition: transform .25s ease;
}


/* Hidden by default */

.requirement-content {
    display: none;

    padding:
        0 22px 24px;
}


.requirement-item.open
.requirement-content {
    display: block;
}


.requirement-item.open
.requirement-arrow {
    transform: rotate(45deg);
}


/* Specs */

.requirement-specs {
    display: grid;

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

    gap: 12px;

    margin:
        4px 0 22px;
}


.requirement-specs > div {
    padding: 17px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f5f3ff
        );

    border: 1px solid #e5edf6;
}


.requirement-specs span {
    display: block;

    margin-bottom: 7px;

    color: #64748b;

    font-size: .72rem;
    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: .06em;
}


.requirement-specs strong {
    color: #17233b;

    font-size: .88rem;

    line-height: 1.45;
}


.requirement-content p {
    max-width: 750px;

    margin-bottom: 18px;

    color: #64748b;

    line-height: 1.65;
}


@media(max-width: 900px) {

    .requirement-specs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media(max-width: 550px) {

    .requirement-specs {
        grid-template-columns: 1fr;
    }

}
/* =========================================
   STUDENT DASHBOARD
========================================= */

.dashboard-hero {
    padding: 72px 0 48px;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(124, 58, 237, .12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #edf6ff,
            #f6f1ff
        );
}


.dashboard-hero-inner {
    display: flex;

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

    gap: 40px;
}


.dashboard-hero h1 {
    max-width: 720px;

    margin:
        12px 0 16px;

    font-size:
        clamp(2.5rem, 5vw, 4.7rem);

    line-height: 1.03;
}


.dashboard-hero p {
    max-width: 650px;

    color: #64748b;

    font-size: 1.05rem;

    line-height: 1.7;
}


.dashboard-email {
    display: inline-flex;

    gap: 7px;

    margin-top: 18px;

    padding: 9px 13px;

    border-radius: 999px;

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

    border:
        1px solid rgba(37,99,235,.10);

    color: #64748b;

    font-size: .84rem;
}


.dashboard-email strong {
    color: #17233b;
}


.dashboard-hero-badge {
    min-width: 210px;

    padding: 28px;

    text-align: center;

    border-radius: 28px;

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

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

    box-shadow:
        0 20px 50px
        rgba(15,23,42,.08);

    backdrop-filter: blur(14px);
}


.dashboard-avatar {
    width: 78px;
    height: 78px;

    margin:
        0 auto 14px;

    display: grid;
    place-items: center;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color: white;

    font-size: 2rem;
}


.dashboard-hero-badge span {
    font-weight: 800;

    color: #17233b;
}


/* =========================================
   DASHBOARD STATS
========================================= */

.dashboard-stats {
    display: grid;

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

    gap: 20px;
}


.dashboard-stat {
    display: flex;

    align-items: center;

    gap: 17px;

    min-height: 150px;

    padding: 22px;

    border-radius: 22px;

    background: white;

    border:
        1px solid #dfe8f2;

    box-shadow:
        0 12px 30px
        rgba(15,23,42,.06);
}


.dashboard-stat-icon {
    width: 52px;
    height: 52px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-weight: 900;

    font-size: 1.05rem;
}


.dashboard-stat span {
    display: block;

    color: #64748b;

    font-size: .8rem;

    font-weight: 700;
}


.dashboard-stat strong {
    display: block;

    margin: 3px 0;

    color: #17233b;

    font-size: 1.8rem;
}


.dashboard-stat small {
    color: #94a3b8;
}


/* =========================================
   DASHBOARD ACTIONS
========================================= */

.dashboard-action-grid {
    display: grid;

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

    gap: 24px;
}


.dashboard-action-card {
    position: relative;

    overflow: hidden;

    min-height: 260px;

    padding: 28px;

    display: flex;

    gap: 20px;

    border-radius: 26px;

    border:
        1px solid rgba(37,99,235,.12);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99,102,241,.10),
            transparent 32%
        ),
        white;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 14px 35px
        rgba(15,23,42,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}


.dashboard-action-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 22px 48px
        rgba(15,23,42,.12);
}


.dashboard-action-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}


.dashboard-action-icon {
    width: 58px;
    height: 58px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-weight: 900;
}


.dashboard-card-label {
    color: #2563eb;

    font-size: .7rem;

    font-weight: 900;

    letter-spacing: .1em;
}


.dashboard-action-card h3 {
    margin:
        7px 0 9px;

    font-size: 1.35rem;
}


.dashboard-action-card p {
    margin-bottom: 20px;

    color: #64748b;

    line-height: 1.65;
}


.dashboard-action-card strong {
    color: #2563eb;
}


/* =========================================
   LEARNING PATH
========================================= */

.learning-path {
    display: grid;

    gap: 14px;
}


.learning-step {
    display: grid;

    grid-template-columns:
        58px 1fr 40px;

    align-items: center;

    gap: 18px;

    padding: 20px 22px;

    border-radius: 20px;

    border: 1px solid #dfe8f2;

    background: white;

    color: inherit;

    text-decoration: none;

    transition: .2s ease;
}


.learning-step:hover {
    transform:
        translateX(5px);

    border-color:
        #bfdbfe;

    box-shadow:
        0 12px 28px
        rgba(15,23,42,.06);
}


.learning-number {
    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background: #eff6ff;

    color: #2563eb;

    font-size: .75rem;

    font-weight: 900;
}


.learning-step h3 {
    margin-bottom: 4px;
}


.learning-step p {
    margin: 0;

    color: #64748b;
}


.learning-arrow {
    color: #2563eb;

    font-size: 1.4rem;

    font-weight: 900;
}


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

@media(max-width: 1000px) {

    .dashboard-stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media(max-width: 800px) {

    .dashboard-hero-inner {
        flex-direction: column;

        align-items: flex-start;
    }


    .dashboard-hero-badge {
        width: 100%;
    }


    .dashboard-action-grid {
        grid-template-columns: 1fr;
    }

}


@media(max-width: 600px) {

    .dashboard-stats {
        grid-template-columns: 1fr;
    }


    .learning-step {
        grid-template-columns:
            48px 1fr;
    }


    .learning-arrow {
        display: none;
    }

}
/* =========================================
   PREMIUM HOMEPAGE
========================================= */

.home-hero {
    padding: 90px 0 80px;

    background:
        radial-gradient(
            circle at 88% 20%,
            rgba(124, 58, 237, .14),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 80%,
            rgba(14, 165, 233, .10),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #eef7ff,
            #f7f3ff
        );
}

.home-hero-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(360px, .85fr);

    align-items: center;

    gap: 65px;
}

.home-hero h1 {
    max-width: 760px;

    margin: 14px 0 20px;

    font-size:
        clamp(3.2rem, 7vw, 6.3rem);

    line-height: .98;

    letter-spacing: -.045em;
}

.home-hero-copy > p {
    max-width: 680px;

    color: #64748b;

    font-size: 1.08rem;
    line-height: 1.75;
}

.home-trust-row {
    display: flex;
    flex-wrap: wrap;

    gap: 18px;

    margin-top: 28px;

    color: #64748b;

    font-size: .82rem;
    font-weight: 700;
}


/* Hero visual */

.hero-engineering-card {
    position: relative;
    overflow: hidden;

    min-height: 420px;

    padding: 36px;

    display: flex;
    flex-direction: column;

    justify-content: flex-end;

    border-radius: 34px;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(99,102,241,.22),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #16223b,
            #1e3154
        );

    color: white;

    box-shadow:
        0 30px 70px
        rgba(15,23,42,.22);
}

.hero-engineering-card::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -80px;
    top: -80px;

    border-radius: 50%;

    border:
        35px solid
        rgba(255,255,255,.04);
}

.hero-gear {
    position: absolute;

    top: 38px;
    left: 38px;

    font-size: 4.2rem;

    opacity: .95;
}

.hero-engineering-card > span {
    margin-bottom: 10px;

    color: #93c5fd;

    font-size: .75rem;
    font-weight: 900;

    letter-spacing: .13em;
}

.hero-engineering-card h2 {
    max-width: 400px;

    margin-bottom: 24px;

    color: white;

    font-size: 2.1rem;
    line-height: 1.2;
}

.hero-mini-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.hero-mini-tags span {
    padding: 7px 11px;

    border-radius: 999px;

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

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

    font-size: .75rem;
}


/* =========================================
   OVERVIEW
========================================= */

.home-overview {
    padding: 24px 0;

    border-top: 1px solid #e4ebf4;
    border-bottom: 1px solid #e4ebf4;

    background: white;
}

.home-overview-grid {
    display: grid;

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

.home-overview-grid > div {
    padding: 18px 26px;

    border-right:
        1px solid #e8eef5;
}

.home-overview-grid > div:last-child {
    border-right: none;
}

.home-overview strong {
    display: block;

    margin-bottom: 5px;

    color: #2563eb;

    font-size: 1.35rem;
}

.home-overview span {
    color: #64748b;

    font-size: .82rem;
}


/* =========================================
   SOFTWARE CARDS
========================================= */

.home-software-grid {
    display: grid;

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

    gap: 20px;
}

.home-software-card {
    position: relative;
    overflow: hidden;

    min-height: 330px;

    padding: 25px;

    display: flex;
    flex-direction: column;

    border-radius: 25px;

    border:
        1px solid rgba(37,99,235,.11);

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99,102,241,.10),
            transparent 31%
        ),
        white;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 13px 32px
        rgba(15,23,42,.06);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.home-software-card::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}

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

    box-shadow:
        0 23px 48px
        rgba(15,23,42,.12);
}

.home-software-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-weight: 900;
}

.home-software-company {
    color: #64748b;

    font-size: .68rem;
    font-weight: 900;

    letter-spacing: .09em;
}

.home-software-card h3 {
    margin:
        5px 0 12px;

    font-size: 1.3rem;
}

.home-software-card p {
    flex-grow: 1;

    color: #64748b;

    line-height: 1.65;
}

.home-software-card strong {
    margin-top: 20px;

    color: #2563eb;
}


/* =========================================
   FEATURE CARDS
========================================= */

.home-feature-grid {
    display: grid;

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

    gap: 24px;
}

.home-feature-card {
    position: relative;

    min-height: 320px;

    padding: 28px;

    border-radius: 26px;

    border: 1px solid #dfe8f2;

    background: white;

    color: inherit;

    text-decoration: none;

    box-shadow:
        0 13px 32px
        rgba(15,23,42,.06);

    transition: .25s ease;
}

.home-feature-card:hover {
    transform:
        translateY(-6px);

    box-shadow:
        0 22px 46px
        rgba(15,23,42,.11);
}

.home-feature-number {
    position: absolute;

    top: 25px;
    right: 25px;

    color: #cbd5e1;

    font-size: .75rem;
    font-weight: 900;
}

.home-feature-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-weight: 900;
}

.home-feature-card h3 {
    margin-bottom: 12px;

    font-size: 1.3rem;
}

.home-feature-card p {
    min-height: 80px;

    margin-bottom: 24px;

    color: #64748b;

    line-height: 1.65;
}

.home-feature-card strong {
    color: #2563eb;
}


/* =========================================
   STUDENT PANEL
========================================= */

.home-student-section {
    background:
        linear-gradient(
            135deg,
            #eff7ff,
            #f5f1ff
        );
}

.home-student-panel {
    padding: 48px;

    border-radius: 32px;

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

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

    box-shadow:
        0 20px 55px
        rgba(15,23,42,.08);

    backdrop-filter: blur(12px);
}

.home-student-panel > div:first-child {
    max-width: 760px;
}

.home-student-panel h2 {
    margin:
        12px 0 15px;

    font-size:
        clamp(2.2rem, 5vw, 4rem);
}

.home-student-panel > div:first-child p {
    color: #64748b;

    line-height: 1.75;
}

.home-student-benefits {
    display: grid;

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

    gap: 16px;

    margin: 35px 0;
}

.home-student-benefits > div {
    padding: 21px;

    border-radius: 19px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f7f4ff
        );

    border:
        1px solid #e3eaf3;
}

.home-student-benefits span {
    display: block;

    margin-bottom: 11px;

    color: #2563eb;

    font-size: 1.1rem;
    font-weight: 900;
}

.home-student-benefits strong {
    display: block;

    margin-bottom: 7px;
}

.home-student-benefits p {
    margin: 0;

    color: #64748b;

    font-size: .86rem;
    line-height: 1.55;
}


/* =========================================
   FINAL CTA
========================================= */

.home-final-cta {
    padding: 55px;

    text-align: center;

    border-radius: 32px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(14,165,233,.18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #17243d,
            #22385e
        );

    color: white;
}

.home-final-cta h2 {
    margin:
        12px 0 14px;

    color: white;

    font-size:
        clamp(2.2rem, 5vw, 4rem);
}

.home-final-cta > p {
    max-width: 660px;

    margin:
        0 auto 28px;

    color: #cbd5e1;

    line-height: 1.7;
}

.home-final-cta .actions {
    justify-content: center;
}


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

@media(max-width: 1050px) {

    .home-software-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .home-hero-grid {
        grid-template-columns: 1fr;
    }

}


@media(max-width: 800px) {

    .home-overview-grid,
    .home-student-benefits {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

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

}


@media(max-width: 600px) {

    .home-software-grid,
    .home-overview-grid,
    .home-student-benefits {
        grid-template-columns: 1fr;
    }

    .home-overview-grid > div {
        border-right: 0;

        border-bottom:
            1px solid #e8eef5;
    }

    .home-student-panel,
    .home-final-cta {
        padding: 30px 22px;
    }

}
/* =========================================
   ABOUT VALUES
========================================= */

.about-values-grid {
    gap: 24px;
}

.about-value-card {
    position: relative;
    overflow: hidden;

    min-height: 260px;

    padding: 28px;

    border-radius: 26px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99,102,241,.10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f9fbff
        );

    border:
        1px solid rgba(37,99,235,.12);

    box-shadow:
        0 14px 34px
        rgba(15,23,42,.07);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.about-value-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}

.about-value-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 22px 46px
        rgba(15,23,42,.12);
}

.about-value-icon {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 22px;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-size: .75rem;
    font-weight: 900;
}

.about-value-card h3 {
    margin-bottom: 12px;

    font-size: 1.25rem;
}

.about-value-card p {
    margin: 0;

    color: #64748b;

    line-height: 1.7;
}
/* =========================================
   PREMIUM CONTACT PAGE
========================================= */

.contact-hero {
    padding: 80px 0 70px;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(124, 58, 237, .13),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #eef7ff,
            #f6f2ff
        );
}


.contact-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(330px, .8fr);

    gap: 60px;

    align-items: center;
}


.contact-hero h1 {
    max-width: 760px;

    margin: 14px 0 18px;

    font-size:
        clamp(3rem, 6vw, 5.8rem);

    line-height: 1;

    letter-spacing: -.04em;
}


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

    color: #64748b;

    line-height: 1.75;

    font-size: 1.05rem;
}


/* Contact information card */

.contact-info-card {
    padding: 30px;

    border-radius: 28px;

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

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

    box-shadow:
        0 20px 50px
        rgba(15,23,42,.08);
}


.contact-info-icon {
    width: 58px;
    height: 58px;

    margin-bottom: 22px;

    display: grid;
    place-items: center;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-size: 1.4rem;
}


.contact-info-card > span {
    color: #2563eb;

    font-size: .72rem;

    font-weight: 900;

    letter-spacing: .1em;
}


.contact-info-card h3 {
    margin:
        8px 0 10px;

    word-break: break-word;
}


.contact-info-card p {
    margin-bottom: 20px;

    font-size: .9rem;
}


/* =========================================
   FORM LAYOUT
========================================= */

.contact-layout {
    display: grid;

    grid-template-columns:
        minmax(0, .8fr)
        minmax(0, 1.2fr);

    gap: 55px;

    align-items: start;
}


.contact-copy h2 {
    margin:
        10px 0 13px;

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


.contact-copy > p {
    margin-bottom: 30px;

    color: #64748b;

    line-height: 1.7;
}


/* Contact points */

.contact-points {
    display: grid;

    gap: 14px;
}


.contact-points > div {
    display: flex;

    gap: 16px;

    padding: 17px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #f8fbff,
            #f7f4ff
        );

    border: 1px solid #e2eaf3;
}


.contact-points > div > span {
    width: 40px;
    height: 40px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 13px;

    background: #eff6ff;

    color: #2563eb;

    font-size: .72rem;

    font-weight: 900;
}


.contact-points strong {
    display: block;

    margin-bottom: 5px;
}


.contact-points p {
    margin: 0;

    color: #64748b;

    line-height: 1.55;

    font-size: .88rem;
}


/* =========================================
   FORM CARD
========================================= */

.contact-form {
    padding: 30px;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

    border:
        1px solid rgba(37,99,235,.12);

    box-shadow:
        0 18px 45px
        rgba(15,23,42,.08);
}


.contact-form-head {
    margin-bottom: 25px;
}


.contact-form-head h2 {
    margin-top: 8px;
}


.form-grid-2 {
    display: grid;

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

    gap: 16px;
}


.contact-form label {
    display: block;

    margin-bottom: 18px;

    color: #334155;

    font-size: .86rem;

    font-weight: 750;
}


.contact-form input,
.contact-form textarea {
    width: 100%;

    margin-top: 8px;

    padding: 14px 15px;

    border-radius: 14px;

    border: 1px solid #dbe5f0;

    background: white;

    color: #17233b;

    font: inherit;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.contact-form input {
    height: 52px;
}


.contact-form textarea {
    resize: vertical;

    min-height: 165px;
}


.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 4px
        rgba(59,130,246,.10);
}


.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #94a3b8;
}


.contact-submit {
    min-width: 170px;
}
.contact-hero-grid {
    grid-template-columns: 1fr !important;
}

.contact-hero-grid > div:first-child {
    max-width: 850px;
}

/* Responsive */

@media(max-width: 900px) {

    .contact-hero-grid,
    .contact-layout {
        grid-template-columns: 1fr;
    }

}


@media(max-width: 600px) {

    .form-grid-2 {
        grid-template-columns: 1fr;
    }


    .contact-form {
        padding: 22px;
    }

}
/* Calculator feedback */

.calc-success {
    color: #166534 !important;

    background: #ecfdf3 !important;

    border:
        1px solid #bbf7d0 !important;
}


.calc-error {
    color: #b42318 !important;

    background: #fff4f2 !important;

    border:
        1px solid #fecaca !important;
}
/* =========================================
   CALCULATOR WORKSPACE
========================================= */

.calculator-workspace {
    display: grid;

    grid-template-columns:
        280px minmax(0, 1fr);

    gap: 28px;

    align-items: start;
}


/* Sidebar */

.calculator-sidebar {
    position: sticky;

    top: 105px;

    padding: 24px;

    border-radius: 26px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7faff
        );

    border:
        1px solid #dfe8f2;

    box-shadow:
        0 15px 38px
        rgba(15,23,42,.07);
}


.calculator-sidebar h2 {
    margin:
        8px 0 22px;

    font-size: 1.55rem;
}


.calc-tab {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 13px;

    margin-bottom: 9px;

    padding: 12px;

    border: 0;
    border-radius: 15px;

    background: transparent;

    color: #475569;

    font: inherit;
    font-weight: 750;

    text-align: left;

    cursor: pointer;

    transition: .2s ease;
}


.calc-tab > span {
    width: 38px;
    height: 38px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 12px;

    background: #eff6ff;

    color: #2563eb;

    font-size: .78rem;
    font-weight: 900;
}


.calc-tab:hover {
    background: #f3f7ff;

    color: #17233b;
}


.calc-tab.active {
    background:
        linear-gradient(
            135deg,
            #eaf3ff,
            #f1edff
        );

    color: #17233b;
}


/* =========================================
   PANEL
========================================= */

.calculator-panel {
    display: none;

    position: relative;

    overflow: hidden;

    padding: 36px;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(99,102,241,.10),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #fbfdff
        );

    border:
        1px solid rgba(37,99,235,.12);

    box-shadow:
        0 18px 46px
        rgba(15,23,42,.08);
}


.calculator-panel.active {
    display: block;

    animation:
        calcPanelIn .25s ease;
}


@keyframes calcPanelIn {

    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.calculator-panel::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 5px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #0ea5e9,
            #7c3aed
        );
}


/* Header */

.calculator-panel-head {
    display: flex;

    gap: 20px;

    margin-bottom: 34px;
}


.calculator-big-icon {
    width: 68px;
    height: 68px;

    flex-shrink: 0;

    display: grid;
    place-items: center;

    border-radius: 21px;

    background:
        linear-gradient(
            135deg,
            #dbeafe,
            #ede9fe
        );

    color: #2563eb;

    font-weight: 900;

    font-size: 1.15rem;
}


.calc-category {
    display: block;

    margin-bottom: 6px;

    color: #2563eb;

    font-size: .7rem;
    font-weight: 900;

    letter-spacing: .1em;
}


.calculator-panel-head h2 {
    margin:
        0 0 7px;

    font-size:
        clamp(1.8rem, 3vw, 2.5rem);
}


.calculator-panel-head p {
    max-width: 620px;

    margin: 0;

    color: #64748b;

    line-height: 1.6;
}


/* =========================================
   INPUTS
========================================= */

.calculator-form-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 24px;
}


.calculator-form-grid-3 {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


.calculator-form-grid label {
    position: relative;

    color: #334155;

    font-size: .86rem;

    font-weight: 800;
}


.calculator-form-grid label > span {
    float: right;

    color: #94a3b8;

    font-size: .72rem;
    font-weight: 700;
}


.calculator-form-grid input {
    width: 100%;

    height: 56px;

    margin-top: 9px;

    padding: 0 15px;

    border-radius: 15px;

    border:
        1px solid #dbe5f0;

    background: white;

    color: #17233b;

    font: inherit;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.calculator-form-grid input:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 4px
        rgba(59,130,246,.10);
}


/* =========================================
   FORMULA
========================================= */

.calculator-formula {
    display: flex;

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

    gap: 20px;

    margin-bottom: 22px;

    padding: 17px 19px;

    border-radius: 16px;

    background:
        linear-gradient(
            135deg,
            #eef6ff,
            #f5f2ff
        );

    border:
        1px solid #dfe7f2;
}


.calculator-formula span {
    color: #64748b;

    font-size: .7rem;

    font-weight: 900;

    letter-spacing: .1em;
}


.calculator-formula strong {
    color: #2563eb;

    font-size: 1.05rem;
}


/* =========================================
   RESULT
========================================= */

.calc-main-btn {
    margin-bottom: 20px;
}


.calculator-result {
    min-height: 74px;

    display: flex;
    align-items: center;

    padding: 20px;

    border-radius: 17px;

    background:
        #f8fafc;

    border:
        1px dashed #cbd5e1;

    color: #64748b;

    font-size: 1rem;

    font-weight: 700;
}


/* Preserve result states */

.calculator-result.calc-success {
    color: #166534 !important;

    background: #ecfdf3 !important;

    border:
        1px solid #bbf7d0 !important;
}


.calculator-result.calc-error {
    color: #b42318 !important;

    background: #fff4f2 !important;

    border:
        1px solid #fecaca !important;
}


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

@media(max-width: 900px) {

    .calculator-workspace {
        grid-template-columns: 1fr;
    }


    .calculator-sidebar {
        position: static;

        display: flex;
        flex-wrap: wrap;

        gap: 8px;
    }


    .calculator-sidebar .eyebrow,
    .calculator-sidebar h2 {
        width: 100%;
    }


    .calc-tab {
        width: auto;

        margin: 0;
    }

}


@media(max-width: 650px) {

    .calculator-panel {
        padding: 25px 20px;
    }


    .calculator-form-grid,
    .calculator-form-grid-3 {
        grid-template-columns: 1fr;
    }


    .calculator-panel-head {
        flex-direction: column;
    }


    .calculator-formula {
        align-items: flex-start;

        flex-direction: column;
    }

}
/* =========================================
   PREMIUM AUTH PAGES
========================================= */

.premium-auth {
    min-height: calc(100vh - 90px);

    display: grid;
    place-items: center;

    padding: 70px 20px;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(124, 58, 237, .12),
            transparent 28%
        ),
        radial-gradient(
            circle at 10% 90%,
            rgba(14, 165, 233, .10),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #edf6ff,
            #f6f1ff
        );
}


.premium-auth-card {
    width: min(100%, 520px);

    padding: 36px;

    border-radius: 30px;

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

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

    box-shadow:
        0 24px 60px
        rgba(15,23,42,.12);

    backdrop-filter: blur(14px);
}


.auth-brand-mark {
    width: 60px;
    height: 60px;

    display: grid;
    place-items: center;

    margin-bottom: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            #2563eb,
            #0ea5e9
        );

    color: white;

    font-size: 1.5rem;
}


.premium-auth-card h2 {
    margin:
        10px 0 10px;

    font-size:
        clamp(2.2rem, 5vw, 3.4rem);

    line-height: 1.05;
}


.auth-subtitle {
    margin-bottom: 28px;

    color: #64748b;

    line-height: 1.65;
}


.premium-auth-form label {
    display: block;

    margin-bottom: 18px;

    color: #334155;

    font-size: .86rem;

    font-weight: 800;
}


.premium-auth-form input {
    width: 100%;

    height: 54px;

    margin-top: 8px;

    padding: 0 15px;

    border-radius: 15px;

    border:
        1px solid #dbe5f0;

    background: white;

    color: #17233b;

    font: inherit;

    outline: none;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


.premium-auth-form input:focus {
    border-color: #3b82f6;

    box-shadow:
        0 0 0 4px
        rgba(59,130,246,.10);
}


.premium-auth-form input::placeholder {
    color: #94a3b8;
}


/* Password field */

.password-field {
    position: relative;
}


.password-field input {
    padding-right: 78px;
}


.password-toggle {
    position: absolute;

    right: 10px;
    top: 50%;

    transform: translateY(-38%);

    border: 0;

    background: transparent;

    color: #2563eb;

    font-size: .78rem;
    font-weight: 800;

    cursor: pointer;
}


/* Forgot row */

.auth-row {
    display: flex;

    justify-content: space-between;

    margin:
        -2px 0 20px;
}


.auth-row a {
    color: #2563eb;

    font-size: .85rem;
    font-weight: 750;

    text-decoration: none;
}


.auth-row a:hover {
    text-decoration: underline;
}


/* Main button */

.auth-main-btn {
    width: 100%;

    min-height: 52px;

    border-radius: 14px;
}


/* Auth error/success box */

#auth-msg:not(.hidden) {
    display: block;

    margin-top: 16px;

    padding: 14px 15px;

    border-radius: 14px;
}


/* Divider */

.auth-divider {
    position: relative;

    margin: 26px 0 20px;

    text-align: center;
}


.auth-divider::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 50%;

    height: 1px;

    background: #e2e8f0;
}


.auth-divider span {
    position: relative;

    padding: 0 12px;

    background: white;

    color: #94a3b8;

    font-size: .78rem;
}


/* Sign-up button */

.auth-secondary-btn {
    width: 100%;

    min-height: 50px;

    display: flex;

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

    border-radius: 14px;
}


/* Mobile */

@media(max-width: 600px) {

    .premium-auth {
        padding:
            45px 16px;
    }


    .premium-auth-card {
        padding:
            28px 22px;
    }

}
/* =========================================
   SIGNUP EXTRAS
========================================= */

.signup-password-note {
    margin:
        -8px 0 20px;

    color: #94a3b8;

    font-size: .76rem;
    line-height: 1.5;
}

.signup-password-toggle {
    top: 50%;
}
/* =========================================
   BUTTON LOADING STATE
========================================= */

button.is-loading,
.primary-btn.is-loading {
    opacity: .75;
    cursor: wait;
    pointer-events: none;
}

button.is-loading::after,
.primary-btn.is-loading::after {
    content: "";

    width: 14px;
    height: 14px;

    margin-left: 9px;

    display: inline-block;

    border: 2px solid rgba(255,255,255,.45);
    border-top-color: white;
    border-radius: 50%;

    vertical-align: -2px;

    animation: buttonSpin .7s linear infinite;
}

@keyframes buttonSpin {
    to {
        transform: rotate(360deg);
    }
}
/* =========================================
   BUTTON LOADING
========================================= */

button:disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.btn-spinner {
    width: 16px;
    height: 16px;

    display: inline-block;

    border: 2px solid rgba(255,255,255,0.45);
    border-top-color: white;

    border-radius: 50%;

    margin-right: 8px;

    vertical-align: -3px;

    animation: buttonSpin 0.7s linear infinite;
}

@keyframes buttonSpin {

    to {
        transform: rotate(360deg);
    }

}
/* =========================================
   TUTORIAL SAVE / COMPLETE
========================================= */

.tutorial-progress-actions {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 10px;

    margin-top: 15px;

    padding-top: 15px;

    border-top:
        1px solid #e5edf7;
}


.tutorial-save-btn,
.tutorial-complete-btn {
    min-height: 42px;

    padding:
        9px 12px;

    border-radius: 12px;

    font: inherit;

    font-size: .78rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform .18s ease,
        background .18s ease,
        border-color .18s ease;
}


.tutorial-save-btn {
    background:
        #f8fafc;

    border:
        1px solid #dbe5f0;

    color:
        #475569;
}


.tutorial-save-btn:hover {
    transform:
        translateY(-1px);

    border-color:
        #93c5fd;
}


.tutorial-save-btn.saved {
    color:
        #7c3aed;

    border-color:
        #c4b5fd;

    background:
        #f5f3ff;
}


.tutorial-complete-btn {
    color:
        #2563eb;

    border:
        1px solid #bfdbfe;

    background:
        #eff6ff;
}


.tutorial-complete-btn:hover {
    transform:
        translateY(-1px);

    background:
        #dbeafe;
}


.tutorial-complete-btn.completed {
    color:
        #166534;

    border-color:
        #bbf7d0;

    background:
        #ecfdf3;
}


.tutorial-save-btn:disabled,
.tutorial-complete-btn:disabled {
    opacity: .6;

    cursor: wait;

    transform: none;
}


@media(max-width: 500px) {

    .tutorial-progress-actions {
        grid-template-columns:
            1fr;
    }

}
/* =========================================
   DASHBOARD MY LEARNING
========================================= */

.my-learning-section {
    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #f4f7ff 100%
        );
}

.my-learning-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 28px;
}

.learning-tab {
    border: 1px solid #dbe5f2;
    background: #ffffff;
    color: #52617a;

    padding: 11px 18px;

    border-radius: 999px;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition: .2s ease;
}

.learning-tab:hover {
    transform: translateY(-1px);
    border-color: #9bbcff;
}

.learning-tab.active {
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #4f46e5
        );

    color: white;
    border-color: transparent;

    box-shadow:
        0 8px 22px
        rgba(37, 99, 235, .18);
}


.my-learning-grid {
    display: grid;

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

    gap: 20px;
}


.my-learning-card {
    background: white;

    border:
        1px solid #dde6f2;

    border-radius: 22px;

    padding: 23px;

    box-shadow:
        0 14px 35px
        rgba(15, 23, 42, .05);
}


.my-learning-card-top,
.my-learning-card-footer {
    display: flex;

    justify-content:
        space-between;

    align-items: center;

    gap: 15px;
}


.my-learning-software {
    color: #2563eb;

    font-size: .78rem;
    font-weight: 800;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}


.my-learning-percent {
    background: #eef4ff;

    color: #4f46e5;

    padding: 6px 10px;

    border-radius: 999px;

    font-size: .8rem;
    font-weight: 800;
}


.my-learning-card h3 {
    margin:
        18px 0 20px;

    font-size: 1.05rem;

    line-height: 1.4;
}


.my-learning-progress {
    width: 100%;
    height: 8px;

    overflow: hidden;

    border-radius: 999px;

    background: #eaf0f8;

    margin-bottom: 20px;
}


.my-learning-progress span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #6d4aff
        );
}


.my-learning-card-footer {
    font-size: .86rem;
    color: #64748b;
}


.my-learning-card-footer a {
    color: #2563eb;

    font-weight: 800;

    text-decoration: none;
}


.my-learning-empty {
    text-align: center;

    background: white;

    border:
        1px dashed #cbd8e8;

    border-radius: 24px;

    padding: 45px 25px;
}


.my-learning-empty.hidden {
    display: none;
}


.my-learning-empty-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin:
        0 auto 15px;

    border-radius: 18px;

    background:
        #eef4ff;

    font-size: 1.4rem;
}


@media(max-width: 900px) {

    .my-learning-grid {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );
    }

}


@media(max-width: 600px) {

    .my-learning-grid {
        grid-template-columns:
            1fr;
    }

}
.my-learning-card-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.dashboard-unsave-btn {
    border: 0;
    background: transparent;
    color: #64748b;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.dashboard-unsave-btn:hover {
    color: #dc2626;
    text-decoration: underline;
}

.dashboard-unsave-btn:disabled {
    opacity: .55;
    cursor: wait;
}
.resource-save-btn {
    width: 100%;
    margin-top: 14px;
    padding: 11px 14px;

    border: 1px solid #dbe4f0;
    border-radius: 12px;

    background: #ffffff;
    color: #334155;

    font: inherit;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.resource-save-btn:hover {
    transform: translateY(-1px);
    border-color: #2563eb;
}

.resource-save-btn.saved {
    background: #eef2ff;
    border-color: #8b5cf6;
    color: #6d28d9;
}

.resource-save-btn:disabled {
    opacity: .6;
    cursor: wait;
}
/* =====================================================
   MECHGENZ CINEMATIC INTRO
===================================================== */

.mech-intro {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100vh;

    z-index: 99999;

    overflow: hidden;

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

    background:
        radial-gradient(
            circle at center,
            #102747 0%,
            #071426 40%,
            #020711 100%
        );

    color: white;

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease;
}


/* Intro disappears */

.mech-intro.intro-finished {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}


/* =====================================================
   TECH GRID
===================================================== */

.intro-grid {
    position: absolute;
    inset: 0;

    opacity: 0.22;

    background-image:

        linear-gradient(
            rgba(0, 174, 255, 0.13) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(0, 174, 255, 0.13) 1px,
            transparent 1px
        );

    background-size:
        55px 55px;

    perspective: 600px;

    animation:
        introGridMove 8s linear infinite;
}


@keyframes introGridMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            0 55px;
    }

}


/* =====================================================
   MECHANICAL DOORS
===================================================== */

.intro-door {
    position: absolute;

    top: 0;

    width: 50.5%;
    height: 100%;

    z-index: 20;

    background:

        linear-gradient(
            90deg,
            #020711,
            #0d1b2f,
            #020711
        );

    transition:
        transform 1.4s
        cubic-bezier(
            .75,
            0,
            .25,
            1
        );

    box-shadow:
        0 0 40px
        rgba(0, 174, 255, 0.25);
}


.intro-door::after {

    content: "";

    position: absolute;

    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            #008cff,
            #66e7ff,
            #008cff
        );

    box-shadow:
        0 0 25px
        #00bfff;
}


.intro-door-left {

    left: 0;

}


.intro-door-left::after {

    right: 0;

}


.intro-door-right {

    right: 0;

}


.intro-door-right::after {

    left: 0;

}


/* Open doors */

.mech-intro.doors-open
.intro-door-left {

    transform:
        translateX(-100%);

}


.mech-intro.doors-open
.intro-door-right {

    transform:
        translateX(100%);

}


/* =====================================================
   MECHBOT
===================================================== */

.mechbot-wrap {

    position: absolute;

    left: -320px;
    bottom: 7%;

    width: 260px;

    z-index: 10;

    opacity: 0;

    transition:
        left 1.8s
        cubic-bezier(
            .25,
            .75,
            .25,
            1
        ),
        opacity 0.5s ease,
        transform 1s ease;
}


.mechbot-img {

    display: block;

    width: 100%;

    position: relative;

    z-index: 2;

    filter:
        drop-shadow(
            0 15px 25px
            rgba(0,0,0,.6)
        )
        drop-shadow(
            0 0 18px
            rgba(0,180,255,.25)
        );

}


.mechbot-shadow {

    position: absolute;

    bottom: -5px;
    left: 15%;

    width: 70%;
    height: 20px;

    border-radius: 50%;

    background:
        rgba(0,0,0,.55);

    filter:
        blur(8px);

}


/* Robot enters */

.mech-intro.robot-enter
.mechbot-wrap {

    left: 12%;

    opacity: 1;

    animation:
        robotIdle 2s
        ease-in-out infinite;
}


@keyframes robotIdle {

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

    50% {
        transform:
            translateY(-9px);
    }

}


/* Robot exits */

.mech-intro.robot-leave
.mechbot-wrap {

    left: 110%;

    opacity: 0;

}


/* =====================================================
   WELCOME MESSAGE
===================================================== */

.intro-message {

    position: absolute;

    left: 42%;
    top: 28%;

    z-index: 9;

    opacity: 0;

    transform:
        translateY(25px)
        scale(.96);

    text-align: left;

    transition:
        0.8s ease;
}


.mech-intro.show-message
.intro-message {

    opacity: 1;

    transform:
        translateY(0)
        scale(1);

}


.intro-small {

    display: inline-block;

    margin-bottom: 12px;

    color: #3edcff;

    font-size: 12px;

    letter-spacing: 4px;

    font-weight: 800;
}


.intro-message h1 {

    margin: 0;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        clamp(
            42px,
            6vw,
            82px
        );

    line-height: .95;

    letter-spacing:
        -3px;
}


.intro-message h1 span {

    display: block;

    background:
        linear-gradient(
            90deg,
            #2e7cff,
            #20d5ff
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.intro-message p {

    margin-top:
        18px;

    color:
        #93a9c9;

    letter-spacing:
        4px;

    font-size:
        13px;

}


/* =====================================================
   ENTER BUTTON
===================================================== */

.intro-enter-btn {

    position: absolute;

    left: 52%;
    bottom: 21%;

    z-index: 12;

    padding:
        18px 48px;

    border-radius:
        14px;

    border:
        1px solid
        #3ce2ff;

    background:
        linear-gradient(
            90deg,
            #006dff,
            #00c2ff
        );

    color:
        white;

    font-family:
        "Poppins",
        sans-serif;

    font-weight:
        800;

    font-size:
        18px;

    letter-spacing:
        2px;

    cursor:
        pointer;

    opacity:
        0;

    transform:
        translateY(20px);

    box-shadow:
        0 0 25px
        rgba(0,191,255,.45);

    transition:
        .5s ease;
}


.mech-intro.show-button
.intro-enter-btn {

    opacity:
        1;

    transform:
        translateY(0);

}


.intro-enter-btn:hover {

    transform:
        translateY(-3px)
        scale(1.03);

    box-shadow:
        0 0 40px
        rgba(0,191,255,.8);

}


/* =====================================================
   ROBOT ENERGY BEAM
===================================================== */

.robot-beam {

    position:
        absolute;

    left:
        31%;

    bottom:
        28%;

    width:
        0;

    height:
        3px;

    z-index:
        11;

    opacity:
        0;

    transform:
        rotate(-6deg);

    transform-origin:
        left center;

    background:
        linear-gradient(
            90deg,
            #79efff,
            #00a8ff
        );

    box-shadow:
        0 0 12px
        #00c8ff;

}


.mech-intro.robot-click
.robot-beam {

    opacity:
        1;

    animation:
        beamShoot
        .45s ease forwards;

}


@keyframes beamShoot {

    from {

        width:
            0;

    }

    to {

        width:
            24%;

    }

}


/* =====================================================
   GEAR TRANSITION
===================================================== */

.gear-transition {

    position:
        absolute;

    inset:
        0;

    z-index:
        30;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    opacity:
        0;

    visibility:
        hidden;

    background:
        radial-gradient(
            circle,
            #0d2848,
            #020711 65%
        );

    transition:
        opacity .6s ease;
}


.mech-intro.show-gears
.gear-transition {

    opacity:
        1;

    visibility:
        visible;

}


.gear {

    position:
        absolute;

    color:
        #087cff;

    text-shadow:
        0 0 30px
        #00bfff;

}


.gear-big {

    font-size:
        270px;

    animation:
        spinGear 4s
        linear infinite;

}


.gear-small {

    font-size:
        90px;

    transform:
        translate(
            150px,
            -100px
        );

    animation:
        spinGearReverse
        2.5s linear infinite;

}


@keyframes spinGear {

    to {
        transform:
            rotate(360deg);
    }

}


@keyframes spinGearReverse {

    from {
        transform:
            translate(
                150px,
                -100px
            )
            rotate(360deg);
    }

    to {
        transform:
            translate(
                150px,
                -100px
            )
            rotate(0);
    }

}


/* MG Logo */

.mg-logo {

    position:
        relative;

    z-index:
        5;

    font-family:
        "Poppins",
        sans-serif;

    font-size:
        75px;

    font-weight:
        900;

    letter-spacing:
        -8px;

}


.mg-logo span:first-child {

    color:
        white;

}


.mg-logo span:last-child {

    color:
        #1eb5ff;

}


.gear-transition p {

    position:
        relative;

    z-index:
        5;

    margin-top:
        85px;

    color:
        #9bdfff;

    font-size:
        11px;

    letter-spacing:
        4px;

}


/* Loader */

.intro-loader {

    width:
        230px;

    height:
        7px;

    margin-top:
        14px;

    border:
        1px solid
        #1477bb;

    border-radius:
        20px;

    overflow:
        hidden;

    position:
        relative;

    z-index:
        5;

}


.intro-loader span {

    display:
        block;

    width:
        0;

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #0078ff,
            #45e9ff
        );

}


.mech-intro.show-gears
.intro-loader span {

    animation:
        introLoading
        1.9s ease forwards;

}


@keyframes introLoading {

    to {
        width:
            100%;
    }

}


/* =====================================================
   SKIP BUTTON
===================================================== */

.skip-intro {

    position:
        absolute;

    right:
        28px;

    bottom:
        25px;

    z-index:
        50;

    background:
        transparent;

    border:
        0;

    color:
        #7f96b7;

    font:
        inherit;

    cursor:
        pointer;

}


.skip-intro:hover {

    color:
        white;

}


/* =====================================================
   MOBILE
===================================================== */

@media (
    max-width: 768px
) {

    .mechbot-wrap {

        width:
            170px;

    }


    .mech-intro.robot-enter
    .mechbot-wrap {

        left:
            5%;

    }


    .intro-message {

        left:
            42%;

        top:
            28%;

        width:
            52%;

    }


    .intro-message h1 {

        font-size:
            36px;

        letter-spacing:
            -2px;

    }


    .intro-message p {

        font-size:
            9px;

        letter-spacing:
            2px;

    }


    .intro-enter-btn {

        left:
            42%;

        bottom:
            18%;

        padding:
            13px 26px;

        font-size:
            14px;

    }


    .gear-big {

        font-size:
            190px;

    }

}
/* =========================================
   ROBOT POINT + AUTO PRESS
========================================= */

.mech-intro.robot-point
.mechbot-wrap {
    transform:
        translateX(35px)
        rotate(-2deg);
}


/* simulated arm direction */

.mech-intro.robot-point
.mechbot-img {
    animation:
        robotPointPulse
        .9s ease-in-out
        infinite alternate;
}


@keyframes robotPointPulse {

    from {
        transform:
            rotate(0deg)
            translateY(0);
    }

    to {
        transform:
            rotate(-2deg)
            translateY(-5px);
    }

}


/* ENTER gets "pressed" automatically */

.mech-intro.enter-pressed
.intro-enter-btn {

    transform:
        translateY(4px)
        scale(.96);

    box-shadow:
        0 0 60px
        rgba(0, 225, 255, .95);

    filter:
        brightness(1.35);
}


/* button flash */

.mech-intro.enter-pressed
.intro-enter-btn::after {

    content: "";

    position: absolute;
    inset: -10px;

    border-radius: 18px;

    border:
        2px solid
        rgba(75, 225, 255, .85);

    animation:
        enterShockwave
        .55s ease-out forwards;
}


@keyframes enterShockwave {

    from {
        opacity: 1;
        transform:
            scale(.9);
    }

    to {
        opacity: 0;
        transform:
            scale(1.45);
    }

}
/* =========================================
   LAYERED MECHBOT
========================================= */

.mechbot-wrap {
    position: absolute;
    left: -320px;
    bottom: 7%;
    width: 260px;
    height: 360px;
    z-index: 12;
    opacity: 0;
    transition:
        left 1.8s cubic-bezier(.25,.75,.25,1),
        opacity .5s ease;
}

.mechbot-body {
    position: relative;
    width: 100%;
    height: 100%;
}

.robot-part {
    position: absolute;
    user-select: none;
    pointer-events: none;
}

.mechbot-shadow-img {
    position: absolute;
    left: 15%;
    bottom: 0;
    width: 70%;
    opacity: .55;
}


/* BODY */

.robot-body {
    left: 50%;
    bottom: 0;
    width: 62%;
    transform: translateX(-50%);
    z-index: 4;
}


/* HEAD */

.robot-head {
    width: 45%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 7;
    transform-origin: 50% 75%;
}


/* LEFT ARM */

.robot-arm-left {
    width: 30%;
    left: 4%;
    top: 31%;
    z-index: 3;
    transform-origin: 80% 20%;
}


/* RIGHT ARM */

.robot-arm-right {
    width: 32%;
    right: 0;
    top: 30%;
    z-index: 6;

    transform-origin: 15% 20%;

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


/* HAND */

.robot-hand {
    width: 18%;
    right: -8%;
    top: 46%;
    z-index: 8;

    transform-origin: 20% 50%;

    transition:
        transform .55s ease,
        opacity .25s ease;
}


.robot-hand-point {
    opacity: 1;
}


.robot-hand-press {
    opacity: 0;
}


/* =========================================
   ROBOT ENTERS
========================================= */

.mech-intro.robot-enter
.mechbot-wrap {
    left: 11%;
    opacity: 1;
}


.mech-intro.robot-enter
.mechbot-body {
    animation:
        mechbotIdle
        1.8s ease-in-out infinite;
}


@keyframes mechbotIdle {

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

    50% {
        transform:
            translateY(-7px);
    }

}


/* =========================================
   HEAD LOOKS TOWARDS ENTER
========================================= */

.mech-intro.robot-point
.robot-head {
    animation:
        headLookRight
        .6s ease forwards;
}


@keyframes headLookRight {

    to {
        transform:
            translateX(-50%)
            rotate(7deg);
    }

}


/* =========================================
   RIGHT ARM POINTS TO ENTER
========================================= */

.mech-intro.robot-point
.robot-arm-right {
    transform:
        rotate(-38deg)
        translate(15px, -5px);
}


.mech-intro.robot-point
.robot-hand-point {
    transform:
        translate(48px, -26px)
        rotate(-10deg);
}


/* =========================================
   ROBOT PRESSES ENTER
========================================= */

.mech-intro.robot-click
.robot-arm-right {
    transform:
        rotate(-46deg)
        translate(34px, -8px);
}


.mech-intro.robot-click
.robot-hand-point {
    opacity: 0;
}


.mech-intro.robot-click
.robot-hand-press {
    opacity: 1;

    transform:
        translate(88px, -28px)
        rotate(-6deg);

    animation:
        robotPressButton
        .45s ease forwards;
}


@keyframes robotPressButton {

    0% {
        transform:
            translate(70px, -28px)
            rotate(-6deg);
    }

    55% {
        transform:
            translate(100px, -28px)
            rotate(-6deg);
    }

    100% {
        transform:
            translate(88px, -28px)
            rotate(-6deg);
    }

}


/* =========================================
   ENTER BUTTON REACTION
========================================= */

.mech-intro.robot-click
.intro-enter-btn {
    animation:
        introButtonPress
        .45s ease forwards;
}


@keyframes introButtonPress {

    0% {
        transform:
            translateY(0)
            scale(1);
    }

    55% {
        transform:
            translateY(5px)
            scale(.94);
    }

    100% {
        transform:
            translateY(0)
            scale(1);
    }

}


/* =========================================
   ROBOT LEAVES
========================================= */

.mech-intro.robot-leave
.mechbot-wrap {
    left: 110%;
    opacity: 0;
    transition:
        left 1.4s ease-in,
        opacity .8s ease;
}