@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    text-decoration:none;
    border:none;
    outline:none;
    scroll-behavior:smooth;
    font-family:'Poppins',sans-serif;
}
:root {
    --bg-color:#081b29;
    --second-bg-color:#112e42;
    --text-color:#ededed;
    --muted-color:#b9c5cf;
    --main-color:#00abf0;
    --main-color-soft:rgba(0,171,240,.14);
    --border-color:rgba(0,171,240,.55);
    --shadow-color:rgba(0,0,0,.28);
    --header-bg:rgba(8,27,41,.88);
}
html {
    font-size:62.5%;
    overflow-x:hidden;
    scroll-padding-top:8rem;
}
body {
    background:var(--bg-color);
    color:var(--text-color);
    line-height:1.6;
}
body.modal-open {
    overflow:hidden;
}
button,input,textarea {
    font:inherit;
}
button {
    cursor:pointer;
}
section {
    min-height:100vh;
    padding:7.2rem 9% 5.5rem;
}
.heading {
    font-size:clamp(3.4rem,5vw,5rem);
    margin:0 0 1rem;
    text-align:center;
    line-height:1.2;
}
.section-description {
    max-width:72rem;
    margin:0 auto 2.8rem;
    text-align:center;
    color:var(--muted-color);
    font-size:1.35rem;
    line-height:1.7;
}
.heading span,
.logo span,
.footer-logo span {
    color:var(--main-color);
}
.header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:1.55rem 9%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
    background:transparent;
    transition:padding .4s ease,box-shadow .4s ease,backdrop-filter .4s ease;
}
.header::before {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,var(--header-bg),rgba(8,27,41,.82));
    transform:translateY(-105%);
    transition:transform .5s cubic-bezier(.2,.7,.2,1);
    z-index:-1;
}
.header.scrolled {
    padding-top:1.15rem;
    padding-bottom:1.15rem;
    box-shadow:0 .8rem 2.5rem var(--shadow-color);
    backdrop-filter:blur(14px);
}
.header.scrolled::before {
    transform:translateY(0);
}
.logo {
    font-size:2.5rem;
    color:var(--text-color);
    font-weight:700;
}
.navbar {
    display:flex;
    align-items:center;
    gap:2.8rem;
}
.navbar>a {
    position:relative;
    font-size:1.6rem;
    color:var(--text-color);
    font-weight:500;
    transition:color .25s ease;
}
.navbar>a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-.65rem;
    width:0;
    height:.2rem;
    border-radius:1rem;
    background:var(--main-color);
    transition:width .25s ease;
}
.navbar>a:hover,.navbar>a.active {
    color:var(--main-color);
}
.navbar>a:hover::after,.navbar>a.active::after {
    width:100%;
}
.menu-toggle {
    display:none;
    width:4.2rem;
    height:4.2rem;
    background:transparent;
    color:var(--text-color);
    font-size:3.4rem;
}
/* Theme control */
.theme-picker {
    position:relative;
    margin-left:.2rem;
}
.theme-toggle {
    width:3.2rem;
    height:3.2rem;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:transparent;
    color:var(--text-color);
    transition:color .25s ease,transform .25s ease;
}
.theme-toggle i {
    font-size:2rem;
}
.theme-toggle:hover,.theme-toggle[aria-expanded="true"] {
    color:var(--main-color);
    transform:scale(1.08);
}
.theme-menu {
    position:absolute;
    top:calc(100% + 1.25rem);
    right:0;
    width:24.5rem;
    padding:1rem;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:.55rem;
    background:#f8f8f6;
    border:1px solid rgba(0,0,0,.08);
    border-radius:.8rem;
    box-shadow:0 1.4rem 3.5rem rgba(0,0,0,.28);
    opacity:0;
    visibility:hidden;
    transform:translateY(-.7rem) scale(.98);
    transition:.22s ease;
    transform-origin:top right;
}
.theme-menu::before {
    content:"";
    position:absolute;
    right:.75rem;
    top:-.6rem;
    width:1.2rem;
    height:1.2rem;
    background:#f8f8f6;
    transform:rotate(45deg);
}
.theme-menu.open {
    opacity:1;
    visibility:visible;
    transform:translateY(0) scale(1);
}
.color-option,.custom-color {
    position:relative;
    width:2.45rem;
    height:2.45rem;
    border-radius:.45rem;
    background:var(--swatch);
    border:.2rem solid rgba(255,255,255,.8);
    box-shadow:0 .2rem .45rem rgba(0,0,0,.15);
    transition:transform .2s ease,box-shadow .2s ease;
}
.color-option.selected::after,
.custom-color.selected::after {
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:.65rem;
    height:.65rem;
    background:#000;
    border-radius:50%;
    transform:translate(-50%,-50%);
    box-shadow:0 0 .15rem rgba(255,255,255,.55);
    pointer-events:none;
}

.color-option:hover,.custom-color:hover {
    transform:translateY(-.2rem);
    box-shadow:0 .5rem 1rem rgba(0,0,0,.22);
}
.custom-color {
    background:linear-gradient(135deg,#fff,#ddd);
    display:grid;
    place-items:center;
    color:#333;
    overflow:hidden;
}
.custom-color i {
    font-size:2rem;
}
.custom-color input {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    opacity:0;
    cursor:pointer;
}
.home {
    position:relative;
    display:flex;
    align-items:center;
    padding:8rem 9% 5rem;
    isolation:isolate;
    overflow:hidden;
    background:var(--bg-color);
}
.home::before {
    content:"";
    position:absolute;
    z-index:-2;
    inset:-2.5%;
    background:url("home.png") center/cover no-repeat;
    transform:scale(1.02);
    animation:homeImageFloat 12s ease-in-out infinite alternate;
}
.home::after {
    content:"";
    position:absolute;
    z-index:-1;
    inset:0;
    background:linear-gradient(90deg,rgba(8,27,41,.8),rgba(8,27,41,.38) 52%,rgba(8,27,41,.58));
}
@keyframes homeImageFloat {
    0% {
        transform:scale(1.02) translate3d(0,0,0);
    }
    100% {
        transform:scale(1.05) translate3d(.35%,-.25%,0);
    }
}
.home-content {
    max-width:78rem;
    position:relative;
    z-index:2;
}
.eyebrow {
    color:var(--main-color);
    font-size:1.3rem;
    font-weight:700;
    letter-spacing:.22rem;
    margin-bottom:1rem;
}
.home-content h1 {
    font-size:clamp(4.2rem,6vw,6.2rem);
    font-weight:700;
    line-height:1.12;
}
.home-content h1 span {
    color:var(--main-color);
}
.role-animate {
    height:5.8rem;
    display:flex;
    align-items:center;
    margin:1rem 0 1.7rem;
    font-size:clamp(2.8rem,4vw,4rem);
    font-weight:800;
    color:var(--main-color);
    letter-spacing:.02rem;
}
#role-text {
    display:inline-block;
    min-width:12ch;
}
.typing-cursor {
    width:.25rem;
    height:4rem;
    background:var(--main-color);
    display:inline-block;
    margin-left:.35rem;
    animation:cursorBlink .72s steps(1) infinite;
    box-shadow:0 0 .8rem var(--main-color);
}
@keyframes cursorBlink {
    50% {
        opacity:0;
    }
}
.role-animate.typing #role-text {
    animation:rolePop .22s ease;
}
@keyframes rolePop {
    from {
        transform:translateY(.25rem);
        opacity:.3;
    }
    to {
        transform:translateY(0);
        opacity:1;
    }
}
.home-content>p:not(.eyebrow) {
    max-width:70rem;
    font-size:1.65rem;
    color:#e5edf2;
    margin:1.5rem 0 2.8rem;
}
.btn-box {
    position:relative;
    display:flex;
    gap:1.4rem;
    width:min(34.5rem,100%);
    height:5.2rem;
}
.btn-box .btn,.btn {
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:15rem;
    height:100%;
    padding:0 2rem;
    background:var(--main-color);
    border:.2rem solid var(--main-color);
    border-radius:.8rem;
    font-size:1.65rem;
    font-weight:600;
    color:var(--bg-color);
    z-index:1;
    overflow:hidden;
    transition:color .3s ease,transform .2s ease,box-shadow .3s ease;
}
.btn::before {
    content:"";
    position:absolute;
    inset:0;
    width:0;
    background:var(--bg-color);
    z-index:-1;
    transition:width .35s ease;
}
.btn:hover {
    color:var(--main-color);
    transform:translateY(-.2rem);
    box-shadow:0 .8rem 2.2rem var(--main-color-soft);
}
.btn:hover::before {
    width:100%;
}
.btn-box .btn:nth-child(2) {
    background:transparent;
    color:var(--main-color);
}
.btn-box .btn:nth-child(2)::before {
    background:var(--main-color);
}
.btn-box .btn:nth-child(2):hover {
    color:var(--bg-color);
}
.home-sci {
    position:relative;
    display:flex;
    gap:1.7rem;
    margin-top:2.7rem;
    width:max-content;
    z-index:3;
}
.home-sci a {
    position:relative;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:4.4rem;
    height:4.4rem;
    background:rgba(8,27,41,.3);
    border:.2rem solid var(--main-color);
    border-radius:50%;
    font-size:2rem;
    color:var(--main-color);
    overflow:hidden;
    transition:.3s ease;
}
.home-sci a::before {
    content:"";
    position:absolute;
    inset:0;
    width:0;
    background:var(--main-color);
    z-index:-1;
    transition:width .3s ease;
}
.home-sci a:hover {
    color:var(--bg-color);
    transform:translateY(-.35rem);
}
.home-sci a:hover::before {
    width:100%;
}
.about {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:1.4rem;
    background:var(--second-bg-color);
}
.about-img {
    position:relative;
    width:25rem;
    height:25rem;
    display:flex;
    justify-content:center;
    align-items:center;
}
.about-img img {
    width:90%;
    height:90%;
    object-fit:cover;
    border-radius:50%;
    border:.2rem solid var(--main-color);
}
.about-img .circle-spin {
    position:absolute;
    inset:0;
    margin:auto;
    width:100%;
    height:100%;
    border-radius:50%;
    border-top:.2rem solid var(--second-bg-color);
    border-bottom:.2rem solid var(--second-bg-color);
    border-left:.2rem solid var(--main-color);
    border-right:.2rem solid var(--main-color);
    animation:spin 8s linear infinite;
}
@keyframes spin {
    to {
        transform:rotate(360deg);
    }
}
.about-content {
    max-width:95rem;
    text-align:center;
}
.about-content h3 {
    font-size:2.6rem;
}
.about-content p {
    font-size:1.6rem;
    color:var(--muted-color);
    margin:1.5rem 0 2.5rem;
}
.btn-box.btns {
    width:auto;
    display:inline-flex;
}
.education {
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    min-height:auto;
}
.education-row {
    width:100%;
    max-width:120rem;
    display:flex;
    flex-wrap:wrap;
    gap:4rem;
}
.education-column {
    flex:1 1 40rem;
}
.education-column .title {
    font-size:2.5rem;
    margin:0 0 1.3rem 2rem;
}
.education-box {
    border-left:.2rem solid var(--main-color);
}
.education-content {
    position:relative;
    padding-left:2rem;
}
.education-content::before {
    content:"";
    position:absolute;
    top:1.8rem;
    left:-1.1rem;
    width:2rem;
    height:2rem;
    background:var(--main-color);
    border-radius:50%;
    box-shadow:0 0 1.4rem var(--main-color-soft);
}
.education-content .content {
    position:relative;
    padding:1.6rem;
    border:.15rem solid var(--border-color);
    border-radius:1rem;
    margin-bottom:1.6rem;
    background:rgba(8,27,41,.18);
    transition:.3s ease;
}
.education-content .content:hover {
    transform:translateY(-.3rem);
    border-color:var(--main-color);
    background:var(--main-color-soft);
}
.education-content .year {
    font-size:1.4rem;
    color:var(--main-color);
    padding-bottom:.4rem;
}
.education-content .year i {
    padding-right:.5rem;
}
.education-content .content h3 {
    font-size:2rem;
}
.education-content .content p {
    font-size:1.5rem;
    color:var(--muted-color);
    padding-top:.4rem;
}
.skills {
    min-height:auto;
    background:var(--second-bg-color);
    padding-bottom:6.5rem;
}
.skills-row {
    width:100%;
    max-width:125rem;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:2.3rem;
    align-items:start;
}
.skills-column .title {
    font-size:2.25rem;
    margin:0 0 1.2rem;
    text-align:center;
}
.skills-box {
    position:relative;
    height:31rem;
    border:.15rem solid var(--border-color);
    border-radius:1.2rem;
    background:rgba(8,27,41,.35);
    overflow:hidden;
    box-shadow:0 1.5rem 3rem rgba(0,0,0,.12);
}
.skills-scroll {
    height:100%;
    overflow-y:hidden;
    padding:1rem 1.7rem 3.8rem;
    scrollbar-width:thin;
    scrollbar-color:var(--main-color) transparent;
}
.skills-box.expanded .skills-scroll {
    overflow-y:auto;
}
.skills-scroll::-webkit-scrollbar {
    width:.55rem;
}
.skills-scroll::-webkit-scrollbar-thumb {
    background:var(--main-color);
    border-radius:1rem;
}
.progress {
    padding:1rem 0;
}
.progress h3 {
    font-size:1.5rem;
    display:flex;
    justify-content:space-between;
    gap:1rem;
}
.progress h3 span {
    color:var(--main-color);
    font-size:1.3rem;
}
.bar {
    height:1.1rem;
    border-radius:1rem;
    border:.1rem solid var(--border-color);
    padding:.15rem;
    margin-top:.7rem;
    overflow:hidden;
}
.bar span {
    display:block;
    width:var(--skill-width);
    height:100%;
    border-radius:1rem;
    background:linear-gradient(90deg,var(--main-color),rgba(255,255,255,.75));
    transform-origin:left;
    animation:growBar .9s ease both;
}
@keyframes growBar {
    from {
        transform:scaleX(0);
    }
    to {
        transform:scaleX(1);
    }
}
.extra-skills {
    display:none;
}
.skills-box.expanded .extra-skills {
    display:block;
}
.skills-dropdown {
    width:3.2rem;
    height:3.2rem;
    margin:1rem auto 0;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--bg-color);
    color:var(--main-color);
    border:.1rem solid var(--main-color);
    transition:.25s ease;
}
.skills-dropdown:hover {
    background:var(--main-color);
    color:var(--bg-color);
}
.skills-dropdown i {
    font-size:2rem;
    transition:transform .25s ease;
}
.skills-box.expanded .skills-dropdown i {
    transform:rotate(180deg);
}
.contact {
    min-height:auto;
    padding-bottom:6.5rem;
}
.contact-heading-row {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:1.4rem;
    margin-bottom:2rem;
}
.contact-heading-row .heading {
    margin:0;
}
.contact form {
    max-width:76rem;
    margin:0 auto;
    text-align:center;
}
.contact-switch {
    position:relative;
    width:fit-content;
    margin:0;
    padding:.35rem;
    display:flex;
    gap:.25rem;
    background:var(--second-bg-color);
    border:.1rem solid var(--border-color);
    border-radius:3rem;
}
.contact-mode {
    width:3.8rem;
    height:3.8rem;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:transparent;
    color:var(--text-color);
    font-size:1.35rem;
    font-weight:600;
    transition:color .3s ease,background .35s ease,transform .35s ease;
}
.contact-mode:hover {
    transform:translateY(-.1rem);
}
.contact-mode.active {
    background:var(--main-color);
    color:var(--bg-color);
}
.contact-mode i {
    font-size:2rem;
}

.contact .hidden-field {
    display:none !important;
}
.contact-help {
    text-align:center;
    color:var(--muted-color);
    font-size:1.35rem;
    margin:0 auto 2rem;
    transition:opacity .2s ease,transform .35s ease;
}
.contact-switch.switching .contact-mode {
    animation:softSwitch .42s ease;
}
@keyframes softSwitch {
    0% {
        transform:scale(.96);
        filter:blur(.5px);
    }
    55% {
        transform:scale(1.04);
    }
    100% {
        transform:scale(1);
        filter:none;
    }
}
.input-box {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
}
.input-field {
    position:relative;
    width:49%;
    margin:.65rem 0;
}
.input-field input,.textarea-field textarea {
    width:100%;
    padding:1.5rem;
    font-size:1.5rem;
    color:var(--text-color);
    background:rgba(8,27,41,.3);
    border-radius:.8rem;
    border:.15rem solid var(--border-color);
    transition:border-color .25s ease,background .25s ease;
}
.input-field input {
    height:5.5rem;
}
.textarea-field textarea {
    min-height:16rem;
    resize:vertical;
}
.input-field input:focus,.textarea-field textarea:focus {
    border-color:var(--main-color);
    background:var(--main-color-soft);
}
.input-field input::placeholder,.textarea-field textarea::placeholder {
    color:#aebbc5;
}
.textarea-field {
    margin:.65rem 0 2.2rem;
}
.contact .btn-box.btns {
    justify-content:center;
}
#contact-submit {
    gap:.7rem;
}
/* Footer */
.footer  {
    background: #061620;
    border-top: .1rem solid rgba(255, 255, 255, .08);
    padding: 5rem 9% 2rem;
}
.footer-inner  {
    max-width: 125rem;
    margin: 0 auto;
}
.footer-support-heading  {
    max-width: 78rem;
    margin: 0 auto 2.8rem;
    text-align: center;
}
.footer-support-heading h2  {
    margin: 0;
    color: var(--text-color);
    font-size: 2.05rem;
    font-weight: 500;
    line-height: 1.4;
}
.footer-links  {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 0 0 3.5rem;
    padding: 2.5rem 0;
}
.footer-links > div  {
    min-height: 14rem;
    padding: 0 2.6rem;
    background: transparent;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-links > div + div  {
    border-left: .1rem solid rgba(255, 255, 255, .09);
}
.footer-links h3  {
    margin-bottom: 1.2rem;
    color: var(--main-color);
    font-size: 1.6rem;
}
.footer-links a,.footer-address  {
    display: block;
    width: fit-content;
    margin: .65rem auto;
    color: var(--muted-color);
    font-size: 1.35rem;
    text-align: center;
    transition: color .2s ease;
}
.footer-links a:hover  {
    color: var(--main-color);
}
.footer-address  {
    max-width: 28rem;
}
.footer-bottom  {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2rem;
    padding-top: 1.8rem;
    border-top: .1rem solid rgba(255, 255, 255, .1);
}
.footer-logo  {
    justify-self: start;
    color: var(--text-color);
    font-size: 2.8rem;
    font-weight: 700;
}
.footer-bottom p  {
    color: var(--muted-color);
    font-size: 1.4rem;
    text-align: center;
}
.footer-iconTop  {
    justify-self: end;
}
.footer-iconTop a  {
    width: 4.4rem;
    height: 3.4rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: var(--main-color);
    border: .2rem solid var(--main-color);
    border-radius: .7rem;
    color: var(--bg-color);
    transition: .25s ease;
}
.footer-iconTop a:hover  {
    background: transparent;
    color: var(--main-color);
}
.footer-iconTop a i  {
    font-size: 2.5rem;
}
.modal {
    position:fixed;
    inset:0;
    display:grid;
    place-items:center;
    padding:2rem;
    z-index:2000;
    opacity:0;
    visibility:hidden;
    transition:opacity .25s ease,visibility .25s ease;
}
.modal.open {
    opacity:1;
    visibility:visible;
}
.modal-overlay {
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(7px);
}
.modal-card {
    position:relative;
    width:min(72rem,100%);
    max-height:90vh;
    overflow-y:auto;
    padding:3rem;
    background:var(--bg-color);
    border:.1rem solid var(--border-color);
    border-radius:1.5rem;
    box-shadow:0 2rem 7rem rgba(0,0,0,.4);
    transform:translateY(2rem) scale(.98);
    transition:transform .3s ease;
}
.modal.open .modal-card {
    transform:translateY(0) scale(1);
}
.modal-close {
    position:absolute;
    top:1.3rem;
    right:1.3rem;
    width:3.8rem;
    height:3.8rem;
    border-radius:50%;
    background:var(--second-bg-color);
    color:var(--text-color);
    font-size:2.5rem;
}
.modal-close:hover {
    color:var(--main-color);
}
.modal-kicker {
    color:var(--main-color);
    font-size:1.2rem;
    font-weight:700;
    letter-spacing:.2rem;
}
.modal-card h2 {
    font-size:2.8rem;
    line-height:1.25;
    margin:.7rem 3rem 1rem 0;
}
.modal-intro,.agreement-note {
    color:var(--muted-color);
    font-size:1.35rem;
}
.work-steps {
    display:grid;
    gap:1rem;
    margin:2rem 0;
}
.work-steps article {
    display:flex;
    gap:1.3rem;
    padding:1.3rem;
    border:.1rem solid rgba(255,255,255,.1);
    border-radius:1rem;
    background:rgba(255,255,255,.025);
}
.work-steps article>span {
    flex:0 0 3.5rem;
    height:3.5rem;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--main-color);
    color:var(--bg-color);
    font-size:1.2rem;
    font-weight:700;
}
.work-steps h3 {
    font-size:1.5rem;
}
.work-steps p {
    color:var(--muted-color);
    font-size:1.25rem;
    margin-top:.2rem;
}
.agreement {
    margin:1.5rem 0;
    padding:1.2rem;
    border-radius:1rem;
    background:var(--second-bg-color);
}
.agreement label {
    display:flex;
    align-items:flex-start;
    gap:1rem;
    cursor:pointer;
    color:var(--text-color);
    font-size:1.25rem;
}
.agreement input {
    width:1.8rem;
    height:1.8rem;
    accent-color:var(--main-color);
    flex:0 0 auto;
}
.agreement-btn {
    width:100%;
    min-height:5rem;
}
.agreement-btn:disabled {
    opacity:.45;
    cursor:not-allowed;
    transform:none;
    box-shadow:none;
}
.agreement-note {
    margin-top:1rem;
    font-size:1.1rem;
}
.toast {
    position:fixed;
    left:50%;
    bottom:2.5rem;
    transform:translate(-50%,2rem);
    z-index:3000;
    padding:1rem 1.5rem;
    border-radius:.8rem;
    background:var(--second-bg-color);
    border:.1rem solid var(--main-color);
    color:var(--text-color);
    font-size:1.25rem;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
}
.toast.show {
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}
.page-shell {
    min-height:100vh;
    padding:12rem 9% 7rem;
}
.page-container {
    max-width:105rem;
    margin:0 auto;
}
.page-card {
    padding:3rem;
    border:.1rem solid var(--border-color);
    border-radius:1.5rem;
    background:var(--second-bg-color);
    margin-bottom:2rem;
}
.page-card h1 {
    font-size:clamp(3rem,5vw,5rem);
    line-height:1.2;
    margin-bottom:1rem;
}
.page-card h2 {
    font-size:2.2rem;
    color:var(--main-color);
    margin:2.5rem 0 .8rem;
}
.page-card h3 {
    font-size:1.7rem;
    margin:1.3rem 0 .4rem;
}
.page-card p,.page-card li {
    font-size:1.45rem;
    color:var(--muted-color);
    line-height:1.85;
}
.page-card ul {
    padding-left:2rem;
}
.page-lead {
    font-size:1.55rem!important;
}
.page-actions {
    display:flex;
    gap:1rem;
    flex-wrap:wrap;
    margin-top:2rem;
}
.info-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.3rem;
    margin-top:2rem;
}
.info-tile {
    padding:1.5rem;
    border:.1rem solid rgba(255,255,255,.1);
    border-radius:1rem;
    background:rgba(255,255,255,.025);
}
.info-tile strong {
    display:block;
    color:var(--main-color);
    font-size:1.4rem;
    margin-bottom:.4rem;
}
.info-tile span {
    font-size:1.3rem;
    color:var(--muted-color);
}
.policy-container,.blog-container {
    max-width:95rem;
    margin:0 auto;
    padding:3rem;
    background:var(--second-bg-color);
    border:.1rem solid var(--border-color);
    border-radius:1.5rem;
}
@media(max-width:1050px) {
    .header,section,.footer {
        padding-left:5%;
        padding-right:5%;
    }
    .home-sci {
        left:0;
    }
    .skills-row {
        grid-template-columns:1fr 1fr;
    }
    .skills-column:last-child {
        grid-column:1/-1;
        width:calc(50% - 1.15rem);
        justify-self:center;
    }
}
@media(max-width:820px) {
    .menu-toggle {
        display:inline-flex;
        justify-content:center;
        align-items:center;
        z-index:1002;
    }
    .navbar {
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        padding:2rem 5%;
        display:none;
        flex-direction:column;
        align-items:stretch;
        gap:1.2rem;
        background:rgba(8,27,41,.98);
        border-top:.1rem solid rgba(255,255,255,.08);
        box-shadow:0 1.5rem 3rem rgba(0,0,0,.25);
    }
    .navbar.open {
        display:flex;
    }
    .navbar>a {
        padding:.7rem 0;
        font-size:1.7rem;
    }
    .navbar>a::after {
        bottom:0;
    }
    .theme-picker {
        margin:.5rem 0 0;
        width:100%;
    }
    .theme-toggle {
        margin-left:.3rem;
    }
    .theme-menu {
        position:relative;
        top:auto;
        right:auto;
        margin-top:1rem;
        width:100%;
        grid-template-columns:repeat(8,1fr);
        padding:.9rem;
        max-width:none;
    }
    .theme-menu::before {
        display:none;
    }
    .color-option,.custom-color {
        width:2.6rem;
        height:2.6rem;
        justify-self:center;
    }
    .home {
        padding-top:11rem;
        padding-bottom:6rem;
    }
    .home-content {
        max-width:95%;
    }
    .skills-row {
        grid-template-columns:1fr;
    }
    .skills-column:last-child {
        grid-column:auto;
        width:auto;
    }
    .footer-links {
        grid-template-columns:1fr 1fr;
    }
}
@media(max-width:600px) {
    html {
        font-size:58%;
    }
    section {
        padding-top:6.8rem;
    }
    .home {
        align-items:center;
        padding-left:6%;
        padding-right:6%;
    }
    .home-content {
        max-width:100%;
    }
    .home-content>p:not(.eyebrow) {
        font-size:1.5rem;
    }
    .role-animate {
        height:5.2rem;
    }
    .typing-cursor {
        height:3.5rem;
    }
    .btn-box {
        width:100%;
        height:auto;
        flex-wrap:wrap;
    }
    .btn-box .btn,.btn {
        min-width:14rem;
        flex:1;
        min-height:5rem;
    }
    .home-sci {
        gap:1.1rem;
        margin-top:2.3rem;
    }
    .home-sci a {
        width:3.9rem;
        height:3.9rem;
        font-size:1.8rem;
    }
    .input-field {
        width:100%;
    }
    .contact-heading-row {
        gap:.8rem;
    }
    .contact-heading-row .heading {
        font-size:3rem;
    }
    .footer-links {
        grid-template-columns:1fr;
    }
    .footer-links>div {
        padding:0;
    }
    .footer-links>div+div {
        border-left:0;
        padding-top:2rem;
        margin-top:2rem;
    }
    .footer-bottom {
        grid-template-columns:1fr;
        justify-items:center;
    }
    .footer-logo,.footer-iconTop {
        justify-self:center;
    }
    .footer-bottom p {
        order:2;
    }
    .modal-card {
        padding:2rem;
    }
    .info-grid {
        grid-template-columns:1fr;
    }
    .page-shell {
        padding-left:6%;
        padding-right:6%;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}


/* ================================================================
   HOME ROLE TEXT — outline + left-to-right filling animation
   Inspired by the original Web Developer / Data Analyst / YouTuber effect.
   ================================================================ */
.role-animate {
    position:relative;
    display:block;
    height:5.8rem;
    min-width:min(100%, 58rem);
    margin:1rem 0 1.7rem;
    font-size:clamp(2.8rem,4vw,4rem);
    font-weight:800;
    line-height:1.35;
    color:transparent;
    white-space:nowrap;
}

.role-animate .role-word {
    position:absolute;
    left:0;
    top:0;
    display:inline-block;
    color:transparent;
    -webkit-text-stroke:.8px var(--main-color);
    text-shadow:0 0 0 transparent;
    opacity:0;
    white-space:nowrap;
    animation:roleDisplay 12s linear infinite;
    animation-delay:calc(-4s * var(--i));
}

.role-animate .role-word::before {
    content:attr(data-text);
    position:absolute;
    left:0;
    top:0;
    width:0;
    color:var(--main-color);
    -webkit-text-stroke:0 transparent;
    border-right:.22rem solid var(--main-color);
    white-space:nowrap;
    overflow:hidden;
    animation:roleFill 4s linear infinite;
    animation-delay:calc(-4s * var(--i));
    filter:drop-shadow(0 0 .45rem var(--main-color-soft));
}

/* Keep the old cursor element harmless if it is present in cached markup. */
.typing-cursor {
    display:none!important;
}

@keyframes roleDisplay {
    0%,31% {
        opacity:1;
    }
    32%,100% {
        opacity:0;
    }
}

@keyframes roleFill {
    0%,10%,100% {
        width:0;
    }
    70%,90% {
        width:100%;
    }
}

@media(max-width:600px) {
    .role-animate {
        height:5.2rem;
        min-width:0;
        width:100%;
        font-size:clamp(2.5rem,8vw,3.4rem);
    }
}

@media(prefers-reduced-motion:reduce) {
    .role-animate .role-word {
        opacity:1;
        animation:none!important;
    }
    .role-animate .role-word:not(:first-child) {
        display:none;
    }
    .role-animate .role-word::before {
        width:100%;
        animation:none!important;
    }
}