/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*
 * ==================
 * Start Here
 * ==================
 */
*,*::before,*::after{
    padding: 0;
    margin: 0;
    box-sizing: inherit;
}
html {
    font-size: 62.5%; /* 10px of 16px */
    box-sizing: border-box;
    height: 100%;
}

body {
    color: white;
    background-color: #111111;
    position: relative;
    height: 100%;
    line-height: 1.5;
    font-size: 1.6rem; /* 16px */
    font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

/* CSS Custom Properties for theming */
:root{
    --clr-bg:#111111;
    --clr-bg-alt:#26222d;
    --clr-text:#ffffff;
    --clr-accent:#00FF94;
    --clr-accent-alt:#64fcd9;
    --clr-border:#00372b;
    --clr-danger:#ff4d4f;
    --transition-fast: .15s ease-in-out;
    --transition-medium: .35s ease-in-out;
    --shadow-soft:0 4px 18px -4px rgba(0,0,0,.4);
}
[data-theme="light"]{
    --clr-bg:#f5f7fa;
    --clr-bg-alt:#ffffff;
    --clr-text:#111111;
    --clr-accent:#00684a;
    --clr-accent-alt:#00c583;
    --clr-border:#c9e7dd;
    background-color: var(--clr-bg);
    color: var(--clr-text);
}

body, body[data-theme="light"]{
    background-color: var(--clr-bg);
    color: var(--clr-text);
}

/* ----------------------------------
     Global Responsive Enhancements
     ---------------------------------- */
/* Fluid scaling for major section titles (mobile -> desktop) */
.section__title{font-size:clamp(3rem,9vw,5rem);} /* overridden at larger breakpoints later to 8rem */

/* Fluid hero text refinements */
.header__msg{font-size:clamp(1.4rem,2.6vw,1.8rem);} /* was fixed 1.6rem */

/* Make service cards a responsive auto-fit grid instead of manual % widths */
.service-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:4rem;margin-top:8rem;}
.service-card__box{width:100%;max-width:unset;} /* override earlier width/percent settings */

/* Tighter vertical rhythm on very small screens */
@media (max-width:480px){
    .section{padding-bottom:5rem;}
    .service-cards{gap:3rem;margin-top:6rem;}
    .header__actions{gap:.9rem;}
    .btn{min-width:140px;padding:1.15rem 1.6rem;font-size:1.25rem;}
}

/* Slightly scale down root font on ultra-narrow devices */
@media (max-width:340px){
    html{font-size:58%;}
    .header__title{font-size:clamp(3.6rem,12vw,5.2rem);} /* keep hero name readable */
}

/* Improve very large screen readability: constrain hero text width */
@media (min-width:1400px){
    .header__left{max-width:760px;}
}

/* Ensure images never overflow containers */
img{max-width:100%;height:auto;}

/* Contact direct items responsive spacing refinement */
@media (max-width:520px){
    .contact-direct__items{gap:1rem;}
    .contact-direct__item{padding:1.2rem 1.3rem;font-size:1.25rem;}
}

/* ----------------------------------
     Services Layout Revert (User prefers old look)
     Restore original flex column on small screens and 3-up layout on medium
     ---------------------------------- */
.service-cards{display:flex;flex-direction:column;margin-top:10rem;gap:0;}
.service-card__box{max-width:100%;}
@media only screen and (min-width:48em){
    .service-cards{flex-direction:row;flex-wrap:wrap;justify-content:space-between;width:100%;}
    .service-card__box{width:28%;max-width:350px;}
    .service-card__illustration{width:100%;max-width:150px;height:150px;margin-left:auto;margin-right:auto;}
}

.container {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 90%;
}
.section{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 7rem;
}
.section:last-of-type{
    margin-bottom: 0;
}
.section__title{
    font-weight: 800;
    font-size: 5rem;
    position: relative;
}
.section__title::before{
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 125%;
    transform: translateX(-50%);
    border-bottom: 3px dashed #00FF94;
}

/*
 * ==================
 * Navbar Component
 * ==================
 */
.nav {
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    backdrop-filter: blur(25px);
}
.nav__list{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 0;
    overflow-y: scroll;
}
.nav__list-item {
    text-align: center;
    margin-bottom: 5rem;
}
.nav__list-link {
    color: #688277;
    position: relative;
    font-weight: 800;
    text-decoration: none;
    outline: none;
    font-size: 2rem;
}
.nav__list-link::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    border-radius: 99rem;
    background-color: #59FFB9;
    position: absolute;
    bottom: -12px;
    left: 0;
    transform-origin: center;
    transform: scaleX(0);
    transition: transform .15s ease-in-out;
}
.nav__list-link:focus,
.nav__list-link:hover {
    color: #59FFB9;
}
.nav__list-link:focus::before,
.nav__list-link:hover::before {
    transform: scaleX(1);
}
.nav__list-link.active {
    color: #59FFB9;
}
.nav__list-link.active:focus {
    color: #93ffd0;
}
.nav__list-link.active:focus::before {
    background-color: #93ffd0;
}
.nav__list-link.active::before {
    transform: scaleX(1);
}
.nav__hamburger-btn{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    width: 35px;
    height: 35px;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    overflow: hidden;
}
.nav__theme-toggle{
    margin-left:1rem;
    background: var(--clr-bg-alt);
    border:2px solid var(--clr-border);
    color:var(--clr-text);
    width:35px; height:35px; border-radius:50%; cursor:pointer; font-size:1.4rem;
    display:flex; align-items:center; justify-content:center;
    transition:background var(--transition-fast), transform var(--transition-fast);
}
.nav__theme-toggle:hover{background:var(--clr-accent); color:#111;}
.nav__theme-toggle:active{transform:scale(.9);}
.nav__hamburger-top,
.nav__hamburger-center,
.nav__hamburger-bottom{
    display: block;
    width: 95%;
    height: 3px;
    border-radius: 99rem;
    background-color: white;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}
.nav__hamburger-top{
    top: 25%;
}
.nav__hamburger-center{
    top: 50%;
}
.nav__hamburger-bottom{
    top: 75%;
}

/*
 * ==================
 * Hero Header
 * ==================
 */
.hero-header{
    position: relative;
    overflow: hidden;
}
.header__container{
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
}
.header__bg{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px;
    background: linear-gradient(to top, #111, #1110);
    z-index: -1;
}
.header__left{
    width: 100%;
    max-width: 900px;
}
.header__right{
    position: absolute;
    right: 0;
    z-index: -1;
    display: none;
}
.header__right img{
    width: 100%;
}
.header__sup-text{
    display: inline-flex;
    font-weight: 600;
    font-size: 2rem;
}
.header__title{
    text-transform: uppercase;
    font-weight: 800;
    font-size: 5rem;
    line-height: 1;
    display: flex;
    flex-direction: column;
}
.header__title-1,
.header__title-2{
    display: block;
    position: relative;
}
.header__name{font-size:clamp(5.2rem,6vw,6.5rem);font-weight:900;letter-spacing:-1px;background:linear-gradient(90deg,var(--clr-accent),var(--clr-accent-alt));-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;}
.header__subtitle{margin-top:1rem;font-size:clamp(1.6rem,3.2vw,3.2rem);font-weight:800;line-height:1;display:flex;gap:.8rem;letter-spacing:-1px;}
.header__actions{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:2.8rem;align-items:center;}
.btn{font-family:inherit;cursor:pointer;border:none;border-radius:10px;padding:1.3rem 2.2rem;font-size:1.35rem;font-weight:700;letter-spacing:.5px;position:relative;background:var(--clr-bg-alt);color:var(--clr-text);border:2px solid var(--clr-border);display:inline-flex;align-items:center;justify-content:center;min-width:165px;line-height:1;transition:background var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast);} 
.btn:hover{background:var(--clr-accent);color:#111;border-color:var(--clr-accent);} 
.btn:active{transform:translateY(2px);} 
.btn--primary{background:var(--clr-accent);color:#111;border-color:var(--clr-accent);} 
.btn--primary:hover{background:var(--clr-accent-alt);border-color:var(--clr-accent-alt);} 
.btn--ghost{background:var(--clr-bg-alt);color:var(--clr-text);} 
.btn--ghost:hover{background:var(--clr-accent);color:#111;} 
.social-links{margin-top:1rem;display:flex;gap:1.2rem;}
.social-link{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:10px;background:var(--clr-bg-alt);border:2px solid var(--clr-border);font-weight:700;font-size:1.4rem;color:var(--clr-text);text-decoration:none;transition:all var(--transition-fast);} 
.social-link:hover{background:var(--clr-accent);color:#111;border-color:var(--clr-accent);} 
.header__title-1::before,
.header__title-1::after,
.header__title-2::before,
.header__title-2::after{
    content: attr(data-role);
    position: absolute;
    left: 2px;
    top: 0;
    color: white;
    background: #111111; /* To create an illusion that the text is moving */
    overflow:hidden;
    clip: rect(0,900px,0,0); /* Only show some part of the clipped-text */
}

.header__title-1::before,
.header__title-2::before{
    text-shadow: -5px 0 #59FFB9;
    animation: distort-1 2s infinite linear alternate-reverse;
}

.header__title-1::after,
.header__title-2::after{
    text-shadow: -5px 0 #7218FA;
    animation: distort-2 2s infinite linear alternate-reverse;
}

.header__msg{
    font-weight: 300;
    font-size: 1.6rem;
    margin-top: 1.5rem;
    line-height: 1.8;
}
/* Removed custom header__resume glow; now using unified .btn styles */

/*
 * ==================
 * Services
 * ==================
 */
.service-cards{
    display: flex;
    flex-direction: column;
    margin-top: 10rem;
}
.service-card__box{
    margin-bottom: 7rem; /* original spacing restored */
    border: 2px solid var(--clr-border);
    padding: 1.5rem;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, var(--clr-bg-alt) 0%, var(--clr-bg) 100%);
    box-shadow: var(--shadow-soft);
    transition: transform var(--transition-medium), border-color var(--transition-fast);
}
.service-card__box:hover{transform:translateY(-5px); border-color:var(--clr-accent);}
.service-card__illustration{display:flex;width:250px;}
.service-card__illustration img{
    width: 100%;
    pointer-events: none;
}
.service-card__title{
    font-weight: 800;
    font-size: 2rem;
    color: var(--clr-accent);
    margin-top: 2rem;
}
.service-card__msg{
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.6;
    /* Removed experimental line-clamp due to lint error */
    height:11.2rem; /* ~5 lines: 1.4rem * 1.6 line-height * 5 */
    overflow:hidden; /* hide overflow for consistent card height */
}
.service-card__bg{
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: var(--clr-accent);
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(30px);
    transform: translate(-50%, -50%);
}

/* Skills */
.skills{display:flex; flex-direction:column; width:100%; margin-top:8rem; gap:5rem;}
/* About Section */
.about{display:grid;gap:4rem;margin-top:8rem;width:100%;}
/* About Page Refinements */
.about-page{display:flex;flex-direction:column;gap:8rem;padding-bottom:10rem;}
.about-page__header{text-align:center;display:flex;flex-direction:column;gap:1.8rem;margin-top:2rem;}
.about-page__title{margin-bottom:0;}
.about-page__tagline{font-size:1.5rem;font-weight:600;letter-spacing:.5px;opacity:.85;}
.about-intro{display:grid;gap:4rem;align-items:start;width:100%;}
@media(min-width:860px){.about-intro{grid-template-columns: minmax(0,1.4fr) minmax(0,.9fr);} }
.about-intro__bio{display:grid;gap:1.6rem;font-size:1.4rem;line-height:1.75;font-weight:500;}
.about-intro__bio p{margin:0;}
.about-intro__mission{background:var(--clr-bg-alt);border:1px solid var(--clr-border);padding:1.4rem 1.6rem;border-radius:12px;font-size:1.35rem;line-height:1.5;}
.about-intro__meta{width:100%;}
.about-meta-list{list-style:none;display:grid;gap:1.2rem;padding:0;margin:0;}
.about-meta-list li{display:grid;grid-template-columns:120px 1fr;gap:1.2rem;align-items:start;background:var(--clr-bg-alt);border:1px solid var(--clr-border);padding:1.1rem 1.4rem;border-radius:12px;font-size:1.25rem;font-weight:600;letter-spacing:.3px;}
.about-meta-list li span{font-size:1.05rem;letter-spacing:1px;text-transform:uppercase;opacity:.65;font-weight:700;}
.about-meta-list a{text-decoration:none;color:var(--clr-accent-alt);} 
.about-meta-list a:hover{text-decoration:underline;}
.about-block{margin-top:4rem;display:flex;flex-direction:column;gap:4rem;padding-top:6rem;}
.about-block:first-of-type{margin-top:2rem;}
.about-block__head{text-align:center;display:flex;flex-direction:column;gap:1rem;}
.about-block__title{font-size:clamp(3.2rem,5vw,5.2rem);font-weight:800;position:relative;padding-bottom:1.6rem;}
.about-block__title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:260px;max-width:70%;border-bottom:3px dashed var(--clr-accent);}
@media(min-width:1100px){.about-block__title::after{width:440px;}}
.timeline{margin-top:2rem;}
.edu-list{margin-top:2.5rem;}
.cert-list,.awards-list{margin-top:2.5rem;}
.about__content p{margin-bottom:1.5rem;line-height:1.7;font-weight:400;font-size:1.5rem;}
.about__content p:last-of-type{margin-bottom:0;}
.about__quick-stats{list-style:none;display:grid;gap:1.2rem;margin-top:1rem;}
.stat__label{font-size:1.1rem;text-transform:uppercase;letter-spacing:1px;font-weight:600;opacity:.7;margin-right:.6rem;}
.stat__value a{color:var(--clr-accent-alt);text-decoration:none;}
.stat__value a:hover{text-decoration:underline;}

/* Timeline */
.timeline{position:relative;margin-top:8rem;padding-left:2.2rem;border-left:3px dashed var(--clr-border);display:flex;flex-direction:column;gap:4rem;}
.timeline-item{position:relative;}
.timeline-item::before{content:"";position:absolute;left:-11px;top:.4rem;width:18px;height:18px;border-radius:50%;background:var(--clr-bg);border:3px solid var(--clr-accent);box-shadow:0 0 0 4px var(--clr-bg);}
.timeline-item__role{font-size:1.6rem;font-weight:800;color:var(--clr-accent);}
.timeline-item__company{font-size:1.4rem;font-weight:700;margin-top:.2rem;}
.timeline-item__meta{font-size:1.1rem;opacity:.7;margin-top:.2rem;font-weight:600;letter-spacing:.5px;}
.timeline-item__list{margin-top:1rem;list-style:disc;padding-left:1.6rem;display:grid;gap:.5rem;font-size:1.3rem;line-height:1.5;}

/* Education */
.edu-list{margin-top:6rem;display:grid;gap:3.5rem;width:100%;}
.edu-item{background:var(--clr-bg-alt);border:2px solid var(--clr-border);border-radius:14px;padding:2rem 2.2rem;position:relative;box-shadow:var(--shadow-soft);}
.edu-item__program{font-size:1.5rem;font-weight:800;color:var(--clr-accent);}
.edu-item__institution{font-size:1.3rem;font-weight:700;margin-top:.3rem;}
.edu-item__meta{font-size:1.1rem;opacity:.7;margin-top:.3rem;}

/* Certifications & Awards */
.cert-list,.awards-list{margin-top:6rem;list-style:none;display:grid;gap:1rem;width:100%;}
.cert-list li,.awards-list li{background:var(--clr-bg-alt);border:1px dashed var(--clr-border);padding:1.2rem 1.4rem;border-radius:10px;font-size:1.25rem;font-weight:600;line-height:1.4;display:flex;align-items:center;gap:.8rem;}
.cert-list li::before,.awards-list li::before{content:"✔";color:var(--clr-accent);font-size:1.1rem;}

/* Form feedback */
.form-error{color:var(--clr-danger);font-size:1.2rem;font-weight:600;margin:-3rem 0 3rem;min-height:1.4rem;}
.skills__group{width:100%;}
.skills__heading{font-size:2rem; font-weight:800; margin-bottom:2rem; color:var(--clr-accent);}
.skills__list{list-style:none;}
.skill{display:grid; grid-template-columns:120px 1fr 55px; align-items:center; gap:1.2rem; margin-bottom:1.4rem; position:relative;}
.skill__label{font-weight:600; font-size:1.3rem;}
.skill__bar{width:100%; height:10px; background:var(--clr-bg-alt); border-radius:99rem; overflow:hidden; position:relative; box-shadow:inset 0 0 0 2px var(--clr-border);}
.skill__bar-fill{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--clr-accent), var(--clr-accent-alt)); transition:width 1.2s cubic-bezier(.65,.05,.36,1);} 
.skill__value{font-size:1.2rem; font-weight:700; opacity:.7;}

/* Works filters */
.works__filters{display:flex; flex-wrap:wrap; gap:1rem; margin-top:4rem; justify-content:center;}
.works__filter-btn{background:var(--clr-bg-alt); border:2px solid var(--clr-border); color:var(--clr-text); padding:.8rem 1.2rem; border-radius:99rem; font-family:inherit; cursor:pointer; font-weight:600; font-size:1.2rem; letter-spacing:.5px; transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);}
.works__filter-btn:hover{background:var(--clr-accent); color:#111;}
.works__filter-btn--active{background:var(--clr-accent); color:#111; border-color:var(--clr-accent);}

/*
 * ==================
 * Works (Projects Grid)
 * ==================
 * Improved visual hierarchy, hover affordance, and responsive behavior
 */
.works{margin-top:10rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(1.8rem,2.2vw,3rem);align-items:stretch;width:100%;}
.work{padding:0;margin:0;display:flex;flex-direction:column;}
/* Card shell */
.work__box{--card-radius:16px;--card-border:1px;position:relative;display:flex;flex-direction:column;gap:1.4rem;padding:1.6rem 1.6rem 1.9rem;border-radius:var(--card-radius);background:linear-gradient(160deg,var(--clr-bg-alt) 0%,#151515 100%);border:var(--card-border) solid var(--clr-border);box-shadow:0 4px 18px -4px rgba(0,0,0,.45);overflow:hidden;isolation:isolate;transition:transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-fast);} 
/* Soft glow + subtle accent ring */
.work__box::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:linear-gradient(135deg,rgba(0,255,148,.25),rgba(0,255,148,0) 55%,rgba(255,255,255,.05));-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.35;transition:opacity var(--transition-medium);} 
.work__box::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 22%,rgba(0,255,148,.18),transparent 65%);mix-blend-mode:overlay;opacity:0;transition:opacity var(--transition-medium);} 
.work__box:hover{transform:translateY(-7px);box-shadow:0 14px 40px -8px rgba(0,0,0,.65);border-color:var(--clr-accent);} 
.work__box:hover::after{opacity:.9;} 
.work__box:hover::before{opacity:.65;} 
.work__box:focus-within{outline:2px solid var(--clr-accent);outline-offset:4px;}
/* Image wrapper */
.work__img-box{width:100%;display:block;border-radius:12px;overflow:hidden;aspect-ratio:16/9;background:#101010;border:1px solid var(--clr-border);position:relative;box-shadow:0 2px 10px -4px rgba(0,0,0,.5);}
.work__img-box::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));opacity:0;transition:opacity .6s ease;}
.work__img-box img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.16,.84,.44,1), filter .8s ease;}
.work__box:hover .work__img-box img{transform:scale(1.07);filter:brightness(1.12);} 
.work__box:hover .work__img-box::after{opacity:1;}
/* Animated reveal (JS adds .is-visible) */
.work__reveal{opacity:0;transform:translateY(40px);}
/* Content */
.work__title{margin:0;font-weight:700;font-size:clamp(1.35rem,1.1vw,1.55rem);line-height:1.3;letter-spacing:.3px;}
.work__excerpt{margin-top:.55rem;font-size:clamp(1.15rem,.9vw,1.25rem);line-height:1.55;font-weight:500;opacity:.85;}
/* Badges / tags */
.work__badges{display:flex;flex-wrap:wrap;margin-top:1.2rem;gap:.8rem;overflow:visible;}
.work__badge{background:linear-gradient(135deg,#59ffb91c,#59ffb905);border:1px solid var(--clr-border);border-radius:9px;font-weight:700;font-size:1.05rem;padding:.55rem .85rem;letter-spacing:.5px;line-height:1;position:relative;transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);} 
.work__badge::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(120deg,rgba(0,255,148,.25),transparent 70%);opacity:0;transition:opacity var(--transition-fast);} 
.work__badge:hover{background:var(--clr-accent);color:#111;border-color:var(--clr-accent);} 
.work__badge:hover::after{opacity:1;} 
/* Optional body wrapper if added later */
.work__body{display:flex;flex-direction:column;flex:1;}
/* Filter (graceful hide) */
[data-filter-hidden="true"]{pointer-events:none;opacity:0;transform:scale(.95);transition:opacity .35s ease, transform .35s ease;}
/* Compact adjustments for very narrow screens */
@media (max-width:480px){
    .works{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.6rem;}
    .work__box{padding:1.4rem 1.3rem 1.6rem;}
    .work__badges{margin-top:.9rem;}
}
/* Medium & up: slightly larger card padding */
@media (min-width:900px){
    .work__box{padding:1.8rem 1.9rem 2.1rem;}
}
/* Reduce motion preference */
@media (prefers-reduced-motion:reduce){
    .work__box, .work__img-box img, .work__badge, .work__img-box::after{transition:none !important;}
    .work__reveal{transform:none !important;}
}
.work-thumb{width:100%;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1d1a22,#171417 60%,#121212);position:relative;border:1px solid var(--clr-border);border-radius:6px;overflow:hidden;}
.work-thumb svg{width:100%;height:100%;display:block;--stroke:var(--clr-accent);}
.work-thumb .wt-bar{fill:#0e2720;stroke:var(--clr-border);stroke-width:1.5;}
.work-thumb .wt-panel{fill:#1f2630;stroke:#2c3d36;stroke-width:1.2;}
.work-thumb .wt-accent{fill:var(--clr-accent-alt);filter:drop-shadow(0 0 4px rgba(0,255,148,.35));}
.work-thumb .wt-barline{fill:#162025;}
.work-thumb .wt-ring{fill:none;stroke:var(--clr-accent);stroke-width:2;stroke-dasharray:4 6;animation:spinRing 9s linear infinite;opacity:.55;}
.work-thumb .wt-check{fill:none;stroke:var(--clr-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:26;animation:drawCheck 4s ease-in-out infinite 1s;}
.wt-float-slow{animation:floatPanels 8s ease-in-out infinite;}
.wt-grid-pulse .wt-pane{animation:pulsePanel 5s ease-in-out infinite;}
.wt-grid-pulse .wt-pane.wt-delay1{animation-delay:1s;}
.wt-grid-pulse .wt-pane.wt-delay2{animation-delay:2s;}
.wt-list .wt-row rect{animation:pulsePanel 6s ease-in-out infinite;}
.wt-stack .wt-pane.wt-delay1{animation:floatPanels 7s ease-in-out infinite 1.5s;}
.work-thumb .wt-dot{fill:#fff;opacity:.9;animation:blink 3.2s steps(2,end) infinite;}
.wt-glow-stroke{stroke:var(--clr-accent);stroke-width:1;filter:drop-shadow(0 0 6px rgba(0,255,148,.4));}
.work-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 25%,rgba(0,255,148,.18),transparent 65%);mix-blend-mode:overlay;opacity:.55;pointer-events:none;transition:opacity .5s ease;}
.work__box:hover .work-thumb::after{opacity:.8;}
.work-thumb--landing svg .wt-panel{animation:floatPanels 6s ease-in-out infinite;}
.work-thumb--ui svg .wt-panel:nth-of-type(3){animation:pulsePanel 3.2s ease-in-out infinite .4s;}
.work-thumb--task svg .wt-accent{animation:blink 2.2s steps(2,end) infinite .6s;}
.work-thumb--portfolio svg circle{animation:floatPanels 7s ease-in-out infinite .5s;}
.work-thumb--design svg .wt-accent{animation:pulseAccent 3s ease-in-out infinite;}
.work-thumb--notes svg rect:first-of-type{animation:tilt 5s ease-in-out infinite;}
@keyframes floatPanels{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulsePanel{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}
@keyframes blink{0%,40%,100%{opacity:1}50%,60%{opacity:.25}}
@keyframes pulseAccent{0%,100%{filter:drop-shadow(0 0 4px rgba(0,255,148,.35))}50%{filter:drop-shadow(0 0 10px rgba(0,255,148,.75))}}
@keyframes tilt{0%,100%{transform:rotate(0deg)}40%{transform:rotate(-2deg)}60%{transform:rotate(2deg)}}
@keyframes spinRing{to{transform:rotate(360deg)}}
@keyframes drawCheck{0%,40%{stroke-dashoffset:26}55%,100%{stroke-dashoffset:0}}

/* Interactive tilt (JS optional fallback) */
[data-tilt]{transform-style:preserve-3d;will-change:transform;transition:transform .5s cubic-bezier(.16,.84,.44,1);} 
[data-tilt]:hover{transition:transform .15s ease-out;} 
[data-tilt] .work-thumb{transform:translateZ(25px);} 
.work__title{margin-top:1rem;font-weight:700;font-size:1.4rem;line-height:1.35;}
.work__excerpt{margin-top:.8rem;font-size:1.2rem;line-height:1.5;font-weight:500;}
.work__badges{display:flex;margin-top:2rem;overflow:hidden;}
.work__badge{background-color:#59ffb91c; border:1px solid var(--clr-border); border-radius:10px; font-weight:700; font-size:1.1rem; padding:.7rem 1rem; margin-right:1rem; letter-spacing:.5px;}
.work__badge:last-child{margin-right:0;}

@media (max-width:600px){
    .works{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,.65); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity var(--transition-medium), visibility var(--transition-medium); z-index:1000; padding:2rem;}
.modal--open{opacity:1; visibility:visible;}
.modal__dialog{background:var(--clr-bg-alt); border:2px solid var(--clr-border); max-width:540px; width:100%; border-radius:18px; padding:2.5rem 2.2rem 2.8rem; position:relative; box-shadow:0 18px 55px -10px rgba(0,0,0,.7);}
.modal__close{position:absolute; top:8px; right:8px; width:40px; height:40px; border-radius:50%; border:2px solid var(--clr-border); background:var(--clr-bg); color:var(--clr-text); font-size:2rem; line-height:1; font-family:inherit; cursor:pointer; transition:background var(--transition-fast), transform var(--transition-fast);} 
.modal__close:hover{background:var(--clr-accent); color:#111;} 
.modal__close:active{transform:scale(.9);} 
.modal__title{font-size:2.2rem; font-weight:800; margin-top:.5rem;}
.modal__description{margin-top:1.5rem; line-height:1.7; font-size:1.4rem; font-weight:500;}
.modal__tech{margin-top:2rem; display:flex; flex-wrap:wrap; gap:.7rem;}
.modal__tech span{background:var(--clr-bg); border:1px solid var(--clr-border); padding:.5rem .9rem; border-radius:8px; font-size:1.1rem; font-weight:600; letter-spacing:.5px;}
.modal__features{margin-top:2rem; list-style:disc; padding-left:1.6rem; display:grid; gap:.6rem; font-size:1.25rem; line-height:1.45; max-height:240px; overflow:auto; scrollbar-width:thin;}
.modal__features li{background:var(--clr-bg); border:1px dashed var(--clr-border); padding:.55rem .9rem; border-radius:8px; list-style:disc;}
.modal__actions{margin-top:2.4rem; display:flex; justify-content:flex-end;}
.modal__actions .btn{font-size:1.2rem;}

/* Back To Top */
.back-to-top{position:fixed; bottom:2.5rem; right:2rem; width:48px; height:48px; border-radius:50%; background:var(--clr-accent); color:#111; display:flex; align-items:center; justify-content:center; border:none; font-size:2rem; cursor:pointer; box-shadow:0 10px 28px -10px rgba(0,0,0,.5); opacity:0; visibility:hidden; transform:translateY(15px); transition:opacity var(--transition-medium), transform var(--transition-medium), visibility var(--transition-medium);} 
.back-to-top--visible{opacity:1; visibility:visible; transform:translateY(0);} 
.back-to-top:active{transform:scale(.9);} 

/* Scroll reveal active state */
.is-visible{opacity:1 !important; transform:translateY(0) !important; transition:all 1s cubic-bezier(.16,.84,.44,1);}

/*
 * ==================
 * Contact
 * ==================
 */
.contact{
    display: flex;
    width: 100%;
    margin-top: 10rem;
    justify-content: space-between;
    padding-bottom: 5rem;
}
.contact__form{
    width: 100%;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}
.contact__illustration{
    display: none;
}
.contact__field-wrapper{
    margin-bottom: 5rem;
}
.contact__field-wrapper label{
    font-size: 1.6rem;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: .8rem;
    display: inline-flex;
}
.contact__field-wrapper input[type="text"],
.contact__field-wrapper input[type="email"],
.contact__field-wrapper textarea{
    font-size: 1.6rem;
    font-weight: 600;
    color: white;
    border-radius: 5px;
    background-color: transparent;
    outline: none;
    display: block;
    width: 100%;
}
.contact__field-wrapper input[type="text"]:focus,
.contact__field-wrapper input[type="email"]:focus,
.contact__field-wrapper textarea:focus,
.contact__field-wrapper input[type="text"]:hover,
.contact__field-wrapper input[type="email"]:hover,
.contact__field-wrapper textarea:hover{
    border-style: solid;
}
.contact__field-wrapper input[type="text"],
.contact__field-wrapper input[type="email"]{
    padding: 1.5rem;
    border: 2px dashed #64fcd9;
}
.contact__field-wrapper textarea{
    padding: 1rem;
    border: 2px dashed #64fcd9;
    resize: none;
    height: 150px;
    line-height: 1.6;
}
.contact__illustration{
    position: relative;
}
.contact__illustration img{
    pointer-events: none;
    width: 100%;
}
.contact__illustration--photo{display:flex;align-items:flex-end;justify-content:center;position:relative;max-width:420px;min-height:340px;padding:1rem;}
/* Neutral white glow variant replacing green */
.contact__illustration--photo::before{content:"";position:absolute;inset:0;border-radius:28px;background:radial-gradient(circle at 45% 38%,rgba(255,255,255,.55),rgba(255,255,255,0) 68%),linear-gradient(145deg,#141414,#0e0e0e);border:1px solid rgba(255,255,255,.07);filter:blur(0);opacity:.9;z-index:-2;}
.contact__illustration--photo::after{content:"";position:absolute;inset:0;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.35),transparent 65%);mix-blend-mode:overlay;opacity:.32;z-index:-1;transition:opacity .6s ease;}
.contact__illustration--photo:hover::after{opacity:.7;}
/* Contact photo animated reveal */
.contact-photo{max-height:480px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 28px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,255,255,.35));transform-origin:center bottom;opacity:0;transform:translateY(28px) scale(.95);will-change:transform,opacity;transition:opacity 1s cubic-bezier(.16,.84,.44,1), transform 1.15s cubic-bezier(.16,.84,.44,1);} 
.contact-photo.is-visible{opacity:1;transform:translateY(0) scale(1);animation:floatGentle 8s ease-in-out infinite, photoPulse 11s ease-in-out infinite;} 
@keyframes photoPulse{0%,100%{filter:drop-shadow(0 10px 28px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(255,255,255,.35));}50%{filter:drop-shadow(0 14px 34px rgba(0,0,0,.75)) drop-shadow(0 0 34px rgba(255,255,255,.55));}} 
@media (prefers-reduced-motion:reduce){.contact-photo{transition:none;} .contact-photo.is-visible{animation:none;}} 
@keyframes floatGentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.contact__illustration::before{
    content: '';
    position: absolute;
    width: 95%;
    height: 95%;
    border-radius: 50%;
    background-color: #64fcd9;
    display: block;
    z-index: -1;
    filter: blur(150px);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.contact__submit-btn{
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    padding: 2rem 2rem;
    border-radius: 7px;
    font-weight: 700;
    font-family: inherit;
    font-size: 1.6rem;
    background-color: var(--clr-accent-alt);
    width: 100%;
    position: relative;
    color: #111;
}
.contact__submit-btn:hover::before{
    transform: scale(0.3);
}
.contact__submit-btn::before{
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    background-color: #64fcd9;
    filter: blur(150px);
    left: 0;
    top: 0;
    z-index: -1;
    transform-origin: center;
    transition: all .35s ease-in-out;
}

/* Direct contact panel */
.contact-direct{width:100%;margin-top:6rem;display:flex;flex-direction:column;align-items:center;gap:2.8rem;animation:fadeSlide .9s cubic-bezier(.16,.84,.44,1);}
.contact-direct__title{font-size:3.2rem;font-weight:800;position:relative;padding-bottom:1.2rem;}
.contact-direct__title::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:200px;max-width:75%;border-bottom:3px dashed var(--clr-accent);} 
.contact-direct__items{display:grid;gap:1.5rem;width:100%;max-width:520px;} 
.contact-direct__item{--item-bg:linear-gradient(140deg,var(--clr-bg-alt) 0%,#151515 100%);text-decoration:none;display:flex;align-items:center;gap:1.2rem;padding:1.4rem 1.6rem;border:1px solid var(--clr-border);border-radius:14px;background:var(--item-bg);position:relative;overflow:hidden;font-weight:600;font-size:1.35rem;letter-spacing:.3px;color:var(--clr-text);transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-medium);} 
.contact-direct__item::before{content:attr(data-label);position:absolute;top:8px;right:12px;font-size:.95rem;font-weight:700;letter-spacing:1px;opacity:.35;text-transform:uppercase;pointer-events:none;} 
.contact-direct__item::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 25% 20%,rgba(0,255,148,.18),transparent 65%);opacity:0;transition:opacity var(--transition-medium);} 
.contact-direct__item:hover{border-color:var(--clr-accent);transform:translateY(-4px);} 
.contact-direct__item:hover::after{opacity:.85;} 
.contact-direct__icon{width:42px;height:42px;border-radius:12px;background:var(--clr-bg);display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:700;border:1px solid var(--clr-border);color:var(--clr-accent);position:relative;box-shadow:0 4px 14px -4px rgba(0,0,0,.6);transition:background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);} 
.contact-direct__item:hover .contact-direct__icon{background:var(--clr-accent);color:#111;border-color:var(--clr-accent);} 
.contact-direct__text{word-break:break-all;} 
@media (min-width:780px){
    .contact-direct__items{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
}
@keyframes fadeSlide{0%{opacity:0;transform:translateY(25px);}100%{opacity:1;transform:translateY(0);}}

/*
 * ==================
 * Footer
 * ==================
 */
.footer{
    font-size: 1.4rem;
    color: white;
    font-weight: 700;
    backdrop-filter: blur(75px);
    text-align: center;
    padding-top: 1.3rem;
    padding-bottom: 1.3rem;
}
.footer__link{color:var(--clr-accent-alt);} 
.footer__link:hover{text-decoration:underline;}

/*
 * ========================
 * Small Screen -- 576px
 * ========================
 */
@media only screen and (min-width: 36em) {
    .container {
        max-width: 540px;
    }

    /* Header */
    .header__right{
        display: block;
        opacity: 0.3;
    }
    .header__title{
        flex-direction: row;
    }
    .header__title-1{
        margin-right: 1.5rem;
    }

    /* Navbar */
    .nav__list{
        height: unset;
        flex-direction: row;
        justify-content: flex-end;
        overflow-y: unset;
    }
    .nav__list-item{
        margin-bottom: 0;
        margin-right: 2rem;
    }
    .nav__list-item:last-of-type{
        margin-right: 0;
    }
    .nav__list-link{
        font-size: 1.3rem;
    }
    .nav__hamburger-btn{
        display: none;
    }

    /* Works: remove legacy width so grid can auto-flow */
    .work{width:auto;}
}

/*
 * ========================
 * Medium Screen -- 768px
 * ========================
 */
@media only screen and (min-width: 48em) {
    .container {
        max-width: 760px;
    }
    /* Grid already handles layout; only tweak illustration sizing */
    .service-card__illustration{max-width:140px;height:140px;margin-left:auto;margin-right:auto;}
}

/* Two-column layout on small-mid screens before full 3-column (between 32em and 48em) */
@media (min-width:32em) and (max-width:47.999em){
    .service-cards{flex-direction:row;flex-wrap:wrap;gap:2.2rem;}
    .service-card__box{flex:1 1 calc(50% - 2.2rem);}
    .service-card__illustration{margin-left:auto;margin-right:auto;}
}

/*
 * ========================
 * Large Screen -- 992px
 * ========================
 */
@media only screen and (min-width: 62em) {
    .container {
        max-width: 960px;
    }
    /* Services: switch to grid for perfectly equal column widths & heights */
    .service-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4rem;align-items:stretch;}
    .service-card__box{width:auto;max-width:none;margin-bottom:0;display:flex;flex-direction:column;min-height:300px;}
    .service-card__illustration{width:100%;max-width:150px;height:150px;margin-left:auto;margin-right:auto;}
    .contact__form{
        width: 40%;
        margin-left: unset;
    }
    .contact__illustration{
        width: 60%;
        display: flex;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
    }
}

/*
 * ======================================
 * Large Screen Extended -- 1000px
 * ======================================
 */
@media only screen and (min-width: 62.5em) {
    .header__right{
        width: 500px;
        opacity: 1;
        top: 35px;
    }
}

/*
 * ========================
 * XLarge Screen -- 1200px
 * ========================
 */
@media only screen and (min-width: 75em) {
    .container {
        max-width: 1140px;
    }
    .header__title{
        font-size: 8rem;
    }
    .section{
        margin-bottom: 13rem;
    }
}

/*
 * ========================
 * XXLarge Screen -- 1400px
 * ========================
 */
@media only screen and (min-width: 87.5em) {
    .container {
        max-width: 1320px;
    }
}

/* (Removed unified grid layout override for services) */


/*
 *
 * Animations
 *
 */
@keyframes distort-1{
    0% {
        clip: rect(57px, 9999px, 46px, 0);
    }
    5% {
        clip: rect(15px, 9999px, 56px, 0);
    }
    10% {
        clip: rect(6px, 9999px, 70px, 0);
    }
    15% {
        clip: rect(40px, 9999px, 80px, 0);
    }
    20% {
        clip: rect(32px, 9999px, 44px, 0);
    }
    25% {
        clip: rect(65px, 9999px, 85px, 0);
    }
    30% {
        clip: rect(27px, 9999px, 78px, 0);
    }
    35% {
        clip: rect(59px, 9999px, 93px, 0);
    }
    40% {
        clip: rect(44px, 9999px, 77px, 0);
    }
    45% {
        clip: rect(74px, 9999px, 10px, 0);
    }
    50% {
        clip: rect(73px, 9999px, 42px, 0);
    }
    55% {
        clip: rect(32px, 9999px, 58px, 0);
    }
    60% {
        clip: rect(21px, 9999px, 54px, 0);
    }
    65% {
        clip: rect(71px, 9999px, 11px, 0);
    }
    70% {
        clip: rect(85px, 9999px, 25px, 0);
    }
    75% {
        clip: rect(83px, 9999px, 77px, 0);
    }
    80% {
        clip: rect(62px, 9999px, 52px, 0);
    }
    85% {
        clip: rect(68px, 9999px, 84px, 0);
    }
    90% {
        clip: rect(37px, 9999px, 20px, 0);
    }
    95% {
        clip: rect(10px, 9999px, 15px, 0);
    }
    100% {
        clip: rect(83px, 9999px, 28px, 0);
    }
}
@keyframes distort-2 {
    0% {
        clip: rect(20px, 9999px, 96px, 0);
    }
    5% {
        clip: rect(62px, 9999px, 2px, 0);
    }
    10% {
        clip: rect(63px, 9999px, 39px, 0);
    }
    15% {
        clip: rect(92px, 9999px, 75px, 0);
    }
    20% {
        clip: rect(54px, 9999px, 2px, 0);
    }
    25% {
        clip: rect(22px, 9999px, 96px, 0);
    }
    30% {
        clip: rect(39px, 9999px, 98px, 0);
    }
    35% {
        clip: rect(49px, 9999px, 37px, 0);
    }
    40% {
        clip: rect(90px, 9999px, 17px, 0);
    }
    45% {
        clip: rect(36px, 9999px, 57px, 0);
    }
    50% {
        clip: rect(92px, 9999px, 78px, 0);
    }
    55% {
        clip: rect(97px, 9999px, 65px, 0);
    }
    60% {
        clip: rect(69px, 9999px, 30px, 0);
    }
    65% {
        clip: rect(92px, 9999px, 13px, 0);
    }
    70% {
        clip: rect(74px, 9999px, 76px, 0);
    }
    75% {
        clip: rect(2px, 9999px, 45px, 0);
    }
    80% {
        clip: rect(30px, 9999px, 21px, 0);
    }
    85% {
        clip: rect(58px, 9999px, 34px, 0);
    }
    90% {
        clip: rect(79px, 9999px, 27px, 0);
    }
    95% {
        clip: rect(32px, 9999px, 1px, 0);
    }
    100% {
        clip: rect(87px, 9999px, 63px, 0);
    }
}