:root{
	--bg-1: #041023;
	--bg-2: #081733;
	--card:#071427;
	--muted:#9fb0c6;
	--accent1:#00ffd5; /* neon teal */
	--accent2:#ff4da6; /* hot pink */
	--accent-grad: linear-gradient(90deg,var(--accent1),var(--accent2));
	--glass: rgba(255,255,255,0.03);
	--maxw:1100px;
	--radius:12px;
	--shadow: 0 10px 30px rgba(2,8,23,0.7);
	font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
	color-scheme: dark;
}

/* Header height offset used to prevent the topbar and header overlapping when header is sticky */
:root{--header-offset:64px}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-1) 0%, var(--bg-2) 100%);color:#e6f6ff;-webkit-font-smoothing:antialiased}
.container{max-width:var(--maxw);margin:0 auto;padding:2rem}

/* Header */
.site-header{
	position:sticky;
	top:0;
	z-index:40;
	padding:0.6rem 0;
	background:linear-gradient(90deg, rgba(2,6,23,0.55), rgba(4,12,28,0.45));
	border-bottom:1px solid rgba(255,255,255,0.03);
	overflow:visible;
}

/* Topbar: small slim strip above header with bold contact links */
.topbar{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-bottom:1px solid rgba(255,255,255,0.02);position:relative;margin-top:0;z-index:10;padding:.25rem 0;backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(2,8,23,0.45)}
.topbar-grid{display:flex;align-items:center;justify-content:space-between;padding:.2rem 0}
.topbar-right{display:flex;gap:.75rem;align-items:center;justify-content:flex-end}
.topbar-left{display:flex;gap:.75rem;align-items:center;justify-content:flex-start}

/* topbar link base */
.topbar-link{color:#eafcff;text-decoration:none;font-size:.95rem;display:inline-flex;gap:.5rem;align-items:center;padding:.25rem .5rem;border-radius:8px;transition:transform .18s ease, background .25s ease, box-shadow .25s}
.topbar-link strong{font-weight:700;color:#fff}
.topbar-link:hover{transform:translateY(-3px);background:linear-gradient(90deg, rgba(0,255,213,0.06), rgba(255,77,166,0.04));box-shadow:0 10px 30px rgba(0,0,0,0.45)}

/* icon inside topbar */
.tb-icon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;color:var(--accent1);transition:transform .32s ease, box-shadow .32s, color .22s}
.tb-icon svg{width:18px;height:18px;display:block;stroke:currentColor}
.topbar-link:hover .tb-icon{transform:translateY(-4px) rotate(-6deg);box-shadow:0 8px 26px rgba(0,0,0,0.45);color:var(--accent2)}

/* subtle animated gradient underline */
.topbar-link::after{content:"";display:block;height:3px;width:100%;background:linear-gradient(90deg,var(--accent1),var(--accent2));border-radius:3px;opacity:0;transform:scaleX(0);transform-origin:left center;transition:transform .28s ease, opacity .28s}
.topbar-link:hover::after{opacity:0.9;transform:scaleX(1)}

/* slide-in animation for the topbar */
.topbar{transform:translateY(0);opacity:1;animation: topbarIn .6s cubic-bezier(.2,.9,.2,1) .08s forwards}
@keyframes topbarIn{to{transform:none;opacity:1}}

/* small pulsing on icons to make them lively (reduced on hover) */
@keyframes iconPulse{0%{transform:translateY(0)}50%{transform:translateY(-3px)}100%{transform:translateY(0)}}
.tb-icon{animation: iconPulse 3.5s ease-in-out infinite}
.topbar-link:hover .tb-icon{animation:none}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
	.topbar{animation:none;transform:none;opacity:1}
	.tb-icon{animation:none}
}

@media (max-width:700px){
  .topbar-grid{flex-direction:column;align-items:flex-start;gap:.35rem}
  .topbar-right{justify-content:flex-start;gap:.5rem;flex-wrap:wrap}
  .topbar-link{font-size:.92rem}
}

/* Mobile compacting: reduce paddings, font-sizes and image heights for small screens */
@media (max-width:560px){
	:root{--container-pad:0.9rem}
	html,body{font-size:15px}

	/* Reduce overall section spacing */
	.section{padding:1.6rem 0}

	/* Header / topbar compact */
	.site-header{padding:.45rem 0}
	.topbar{padding:.15rem 0}
	.topbar-link{font-size:.87rem;padding:.2rem .45rem}

	/* Container tighter */
	.container{padding:.9rem}

	/* Hero: smaller card and tighter CTAs */
	.hero{padding:1.6rem 0}
	.hero-grid{grid-template-columns:1fr;gap:1rem}
	.hero-card img{height:160px}
	.hero h1{font-size:1.35rem}
	.lead{font-size:0.95rem}
	.hero-ctas{gap:.45rem}
	.hero-ctas .btn{padding:.5rem .75rem;font-size:.95rem}

	/* About: stack and reduce card padding */
	.about-grid{grid-template-columns:1fr;gap:.6rem}
	.about-card{padding:.75rem;border-radius:10px}
	.about-stats{flex-direction:row;gap:.5rem;flex-wrap:wrap}
	.about-stats .stat{padding:.45rem .7rem}

	/* Works CTA: compact */
	.works-card{padding:1.2rem;border-radius:12px}
	.works-title{font-size:1.25rem}
	.works-cta-btn{padding:.8rem 1rem;font-size:.98rem;min-width:0}
	.works-accent{display:none}

	/* Cards and galleries: reduce image heights and spacing */
	.card img,.gallery-item img{height:160px}
	.card-body{padding:.6rem}
	.portfolio-grid{gap:.6rem}

	/* Footer: stack and make buttons full width */
	.footer-inner{flex-direction:column;align-items:flex-start;gap:.6rem}
	.footer-left{max-width:100%}
	.footer-buttons{flex-direction:column;align-items:stretch}
	.footer-buttons .btn{width:100%}
	.footer-bottom{padding-top:.6rem}

	/* Nav: compact touch targets */
	.nav a{padding:.35rem .45rem;font-size:.95rem}

	/* Reduce modal size padding */
	.modal-inner{padding:.6rem}

}

/* Adjust header offset on smaller screens where header grows taller */
@media (max-width:900px){
	:root{--header-offset:96px}
}
.header-accent{
	position:absolute;
	inset:0;
	pointer-events:none;
	opacity:0.12;
	background:linear-gradient(120deg, rgba(0,255,213,0.12), rgba(255,77,166,0.10), rgba(0,0,0,0));
	filter:blur(34px);
	animation: accentFloat 9s linear infinite;
	transform-origin:center;
}
.header-grid{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0.6rem 0}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.logo-mark{display:inline-flex;align-items:center;justify-content:center;color:var(--accent1);transition:transform .45s ease}
.logo-text{font-weight:700;color:#fff;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:Poppins,Inter}
.logo:hover .logo-mark{transform:translateY(-4px) scale(1.04)}
.logo:hover .logo-text{filter:drop-shadow(0 8px 22px rgba(0,255,213,0.06))}
.nav{display:flex;gap:1rem;align-items:center}
.nav a{position:relative;display:inline-block;padding:.45rem .6rem;border-radius:8px;transition:color .22s}
.nav a::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:2px;background:var(--accent1);transform-origin:left center;transform:scaleX(0);opacity:.9;border-radius:2px;transition:transform .25s cubic-bezier(.2,.9,.2,1)}
.nav a:hover::after{transform:scaleX(1)}
.nav a.cta{padding:.45rem .8rem}
.cta{background:var(--accent-grad);color:#071022;padding:.55rem .9rem;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.45);transition:transform .18s, box-shadow .18s}
.cta:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.5);filter:brightness(1.05)}

/* Hero */
.hero{padding:4rem 0}
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:center}
.hero h1{font-family:Poppins,Inter;font-size:2.1rem;margin:0 0 .6rem;letter-spacing:-0.4px}
.lead{color:var(--muted);line-height:1.5}
.hero-ctas{display:flex;gap:.6rem;margin-top:1rem}

/* Hero preview note overlay */
.hero-preview{position:relative;display:block}

/* Featured presentation slides on the homepage */
.featured-slides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}
.featured-slide{display:grid;gap:.65rem;align-content:start}
.featured-slides .hero-card{padding:8px}
.featured-slides .hero-card img{height:220px;object-fit:contain !important;background:rgba(4,10,22,0.9);padding:.4rem}
.featured-slides .hero-feature-copy{margin-top:0;min-height:132px}
.featured-slides .hero-feature-copy strong{font-size:1.15rem;line-height:1.25}
.hero-feature-title{display:block;font-size:1.12rem;line-height:1.2;letter-spacing:-0.2px;color:#ffffff;font-family:Poppins,Inter;margin:0 0 .25rem}
.hero-feature-subtitle{display:block;color:#d4e0ee;font-size:.95rem;line-height:1.35;margin-bottom:.2rem}
.hero-feature-status{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;line-height:1.1;text-transform:uppercase;letter-spacing:.12em;color:var(--accent1);font-weight:700;margin-bottom:.35rem}
.hero-feature-status::before{content:"";width:8px;height:8px;border-radius:999px;background:var(--accent1);box-shadow:0 0 0 4px rgba(0,255,213,0.12)}

/* New hero card styling */
.hero-card{position:relative;border-radius:18px;padding:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));box-shadow:0 18px 40px rgba(2,8,23,0.6);overflow:hidden;display:block;transition:transform .35s ease, box-shadow .35s;text-decoration:none;color:inherit}
.hero-card::before{content:"";position:absolute;inset:-2px;border-radius:20px;padding:2px;background:linear-gradient(90deg,var(--accent1),var(--accent2));-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);pointer-events:none;opacity:0.95}
.hero-card img{display:block;width:100%;height:260px;object-fit:cover;border-radius:12px;display:block;transition:transform .45s ease, filter .35s}
.hero-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px rgba(2,8,23,0.72)}
.hero-card:hover img{transform:scale(1.03);filter:brightness(1.03)}

.hero-badge{position:absolute;left:12px;top:12px;background:var(--accent-grad);color:#071022;padding:.35rem .6rem;border-radius:999px;font-weight:700;font-size:.85rem;box-shadow:0 8px 22px rgba(0,0,0,0.45)}
.hero-card-overlay{position:absolute;left:50%;transform:translateX(-50%);bottom:4.2rem;background:linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.35));padding:.5rem .7rem;border-radius:999px;backdrop-filter:blur(6px);display:flex;gap:.5rem;align-items:center;z-index:4}
.hero-card-overlay .btn{padding:.5rem .8rem;border-radius:999px}

.hero-note{position:absolute;left:1rem;bottom:1rem;}

/* small overlay badge at bottom-left of hero image */
.hero-note{
	position:absolute;
	left:1rem;
	bottom:1rem;
	background:linear-gradient(90deg, rgba(0,0,0,0.55), rgba(0,0,0,0.45));
	color:#f8ffff;
	padding:.5rem .75rem;
	border-radius:999px;
	font-size:.9rem;
	backdrop-filter:blur(6px);
	border:1px solid rgba(255,255,255,0.04);
	box-shadow:0 8px 30px rgba(0,0,0,0.45);
	transition:transform .22s, opacity .22s;
	pointer-events:none;
}

/* slightly lift on hover when pointer is over the hero preview */
.hero-preview:hover .hero-note{transform:translateY(-3px);opacity:0.98}

.hero-feature-copy{
	display:block;
	margin-top:.7rem;
	padding:.85rem .95rem;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-radius:10px;
	border:1px solid rgba(255,255,255,0.03);
	text-decoration:none;
	transition:transform .22s, box-shadow .22s, border-color .22s;
}

.hero-feature-copy strong{
	display:block;
	font-size:1.95rem;
	line-height:1.1;
	letter-spacing:-0.3px;
	color:#ffffff;
	font-family:Poppins,Inter;
}

.hero-feature-copy small{
	display:block;
	margin-top:.35rem;
	color:var(--muted);
	font-size:0.92rem;
}

.hero-feature-copy:hover{
	transform:translateY(-5px);
	box-shadow:0 16px 36px rgba(0,0,0,0.45);
	border-color:rgba(255,255,255,0.08);
}

@media (max-width:560px){
	.hero-feature-copy strong{font-size:1.35rem}
	.featured-slides{grid-template-columns:1fr;gap:.8rem}
	.featured-slides .hero-card{padding:6px}
	.featured-slides .hero-card img{height:160px;padding:.25rem;object-fit:contain !important}
	.featured-slides .hero-feature-copy{min-height:0}
	.featured-slides .hero-feature-copy strong{font-size:1.2rem}
	.hero-feature-title{font-size:1.05rem}
	.hero-feature-subtitle{font-size:.92rem}
	.hero-feature-status{font-size:.72rem}
}

@media (max-width:900px){
	.featured-slides{grid-template-columns:1fr;gap:.9rem}
	.featured-slides .hero-card{padding:7px}
	.featured-slides .hero-card img{height:180px;object-fit:contain !important}
	.featured-slides .hero-feature-copy{min-height:0}
}

/* Responsive spacing */
@media (max-width:560px){
	.hero-card-overlay{bottom:4rem}
	.hero-note{left:.6rem;right:.6rem;bottom:.8rem;font-size:.85rem;padding:.45rem .6rem}
}

.hero-preview img{width:100%;height:auto;display:block;transition:transform .32s, filter .32s}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04)}
.card:hover img{transform:scale(1.04);filter:brightness(1.02)}

/* Sections */
.section{padding:3rem 0}
.section h2{font-family:Poppins,Inter;margin:0 0 .6rem}
.section-sub{color:var(--muted);margin-bottom:1rem}

/* Portfolio grid */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:10px;overflow:hidden;box-shadow:0 8px 28px rgba(2,8,23,0.6);transition:transform .22s, box-shadow .22s, border .22s; border:1px solid rgba(255,255,255,0.02)}
.card-inner{display:block;border:0;background:transparent;width:100%;text-align:left;padding:0;cursor:pointer;color:inherit}
.card img{width:100%;height:160px;object-fit:cover;display:block;transition:transform .32s, filter .32s}
.card:hover{transform:translateY(-8px);box-shadow:0 28px 60px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.04)}
.card:hover img{transform:scale(1.04);filter:brightness(1.02)}

/* Card body accent underline */
.card-body{padding:0.85rem;border-top:1px dashed rgba(255,255,255,0.02)}
.card strong{display:block}
.card small{color:var(--muted)}

/* Buttons */
.btn{display:inline-block;padding:.65rem 1rem;border-radius:10px;text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.04);transition:all .18s}
.btn.primary{background:var(--accent-grad);color:#071022;border:0;box-shadow:0 12px 30px rgba(0,0,0,0.45)}
.btn.primary:hover{transform:translateY(-3px);filter:brightness(1.04)}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}

/* Services, testimonials, form */
.services-list{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.testimonial-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.testimonial-grid blockquote{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));padding:1rem;border-radius:8px;color:var(--muted);margin:0;border-left:4px solid rgba(0,0,0,0.25)}
.contact-form{display:grid;gap:.6rem;max-width:680px}
.contact-form input,.contact-form textarea{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));border:1px solid rgba(255,255,255,0.03);padding:.9rem;border-radius:10px;color:#e6f6ff}
.form-actions{display:flex;gap:.6rem;align-items:center}

/* Modal */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(2,6,23,0.7),rgba(2,6,23,0.85));z-index:60}
.modal[aria-hidden="false"]{display:flex}
.modal-inner{background:linear-gradient(180deg,#071427 0%, #081322 100%);padding:1rem;border-radius:10px;max-width:900px;width:94%;display:grid;grid-template-columns:1fr 320px;gap:1rem;align-items:start}
.modal img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.modal-copy{color:var(--muted)}
.modal-close{background:transparent;border:0;color:var(--muted);font-size:1.2rem;position:absolute;top:1rem;right:1rem}

/* Footer: bold animated gradient + glow */
.site-footer{
	border-top:1px solid rgba(255,255,255,0.03);
	padding:1.6rem 0;
	margin-top:2rem;
	position:relative;
	overflow:hidden;
	border-radius:8px;
}

/* animated background layer */
.site-footer::before{
	content:'';
	position:absolute;inset:0;
	background:linear-gradient(120deg,var(--accent1) 0%, rgba(0,0,0,0) 20%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0) 80%, var(--accent2) 100%);
	opacity:0.12;
	filter:blur(40px);
	transform:translateY(0);
	animation: footerShift 8s linear infinite;
	pointer-events:none;
}

/* footer inner content */
.footer-grid{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.site-footer p{margin:0;color:#eafcff;font-weight:600;letter-spacing:0.2px;transition:color .3s, transform .3s}
.socials a{color:var(--muted);text-decoration:none;margin-left:1rem;padding:.45rem;border-radius:8px;display:inline-block;transition:transform .25s, color .25s, box-shadow .25s}

/* floating neon effect on social links */
.socials a:hover{
	transform:translateY(-6px) scale(1.03);
	color: #fff;
	box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 18px rgba(0,255,213,0.08);
}

/* animated glow around copyright text */
@keyframes footerShift{
	0%{transform:translateY(0) rotate(0deg);opacity:0.10;}
	25%{transform:translateY(-6px) rotate(.5deg);opacity:0.16;}
	50%{transform:translateY(0) rotate(0deg);opacity:0.12;}
	75%{transform:translateY(6px) rotate(-.5deg);opacity:0.16;}
	100%{transform:translateY(0) rotate(0deg);opacity:0.10;}
}

/* small pulse on footer text to make it stand out */
@keyframes footerPulse{
	0%{text-shadow:0 0 0 rgba(255,255,255,0)}
	50%{text-shadow:0 6px 18px rgba(0,255,213,0.06)}
	100%{text-shadow:0 0 0 rgba(255,255,255,0)}
}
.site-footer p{animation: footerPulse 6s ease-in-out infinite}

/* floating animation for social icons to make them lively */
@keyframes floaty{
	0%{transform:translateY(0)}
	50%{transform:translateY(-4px)}
	100%{transform:translateY(0)}
}
.socials a{animation: floaty 6s ease-in-out infinite}

/* Icon utility styles */
.icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:0.6rem;flex-shrink:0;color:var(--muted)}
.btn .icon{width:20px;height:20px}
.socials a .icon{width:18px;height:18px;margin-right:0.5rem;transition:transform .18s, color .18s}
.btn .label{vertical-align:middle}
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}

/* Hover/tint effects */
a:hover .icon{color:var(--accent1)}
a:hover .label{color:#fff}

/* Slight pop on icon hover in footer */
.socials a:hover .icon{transform:translateY(-4px);filter:drop-shadow(0 8px 18px rgba(0,255,213,0.06))}

/* Minimal Services layout */
.services-grid{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:1rem;
	margin-top:1rem;
	align-items:stretch;
}
.service-card{
	display:flex;
	gap:0.9rem;
	align-items:flex-start;
	padding:0.9rem;
	border-radius:10px;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.03);
	transition:transform .18s ease, box-shadow .18s ease;
}
.service-card:hover{
	transform:translateY(-6px);
	box-shadow:0 16px 36px rgba(0,0,0,0.45);
}
.service-badge{
	flex:0 0 48px;
	height:48px;
	border-radius:10px;
	display:inline-grid;
	place-items:center;
	font-size:1.25rem;
	background:var(--accent-grad);
	color:#071022;
}
.service-body h3{
	margin:0 0 .25rem;
	font-size:1rem;
}
.service-body p{
	margin:0;
	color:var(--muted);
	font-size:0.92rem;
	line-height:1.3;
}

/* CTA spacing */
.services-cta{margin-top:1rem}

/* Large works CTA used on homepage to link to portfolio page */
.works-cta .btn-large{padding:1rem 1.6rem;font-size:1.05rem;border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,0.5);min-width:260px}
.works-cta .section-sub{max-width:60ch;margin:0 auto 1rem}
.works-cta h2{margin-bottom:.6rem}
@media (max-width:560px){.works-cta .btn-large{width:100%;min-width:0}}

/* Enhanced My Works styling */
.works-card{max-width:880px;margin:0 auto;padding:2.2rem;border-radius:18px;position:relative;overflow:hidden}
.works-accent{position:absolute;right:-6%;top:-18%;width:320px;height:320px;background:radial-gradient(circle at 30% 30%, rgba(0,255,213,0.08), rgba(255,77,166,0.06) 40%, rgba(0,0,0,0) 60%);filter:blur(36px);transform:rotate(12deg);pointer-events:none}
.works-title{font-size:2rem;letter-spacing:-0.6px;margin:0 0 .35rem;background:linear-gradient(90deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-family:Poppins,Inter}
.works-title::after{content:"";display:block;height:6px;width:120px;margin-top:12px;background:linear-gradient(90deg,var(--accent1),var(--accent2));border-radius:999px;opacity:0.95;transform-origin:left center;animation: underlineGrow 1.2s ease-out both}
.works-sub{color:var(--muted)}
.works-cta-btn{animation: btnPulse 3.6s ease-in-out infinite;box-shadow:0 18px 38px rgba(0,0,0,0.45);}
.works-cta-btn:hover{animation:none;transform:translateY(-4px)}
.works-note{font-size:.95rem}

@keyframes underlineGrow{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}
@keyframes btnPulse{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}

/* decorative micro-interactions */
.works-card:hover .works-accent{transform:translateY(-6px) rotate(8deg);filter:blur(28px)}

@media (max-width:760px){
	.works-title{font-size:1.6rem}
	.works-accent{width:220px;height:220px;right:-14%;top:-20%}
}

/* Responsive: single column on small screens */
@media (max-width:760px){
	/* keep services as multi-column on most mobile widths; only reduce badge size here */
	.service-badge{flex:0 0 44px;height:44px}
}

/* Compact services on mobile: show two cards side-by-side and reduce padding */
@media (max-width:600px){
	.services-grid{grid-template-columns:repeat(2,1fr);gap:.6rem}
	.service-card{padding:.6rem;gap:.6rem;border-radius:10px}
	.service-badge{flex:0 0 40px;height:40px;font-size:1rem}
	.service-body h3{font-size:.95rem}
	.service-body p{font-size:.88rem}
}
@media (max-width:420px){
	.services-grid{grid-template-columns:1fr}
}

/* Gallery: compact one-shot slides */
.gallery-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:0.75rem;
	margin-top:1rem;
}
.gallery-item{
	background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00));
	border:1px solid rgba(255,255,255,0.03);
	border-radius:10px;
	overflow:hidden;
	padding:0;
	cursor:pointer;
	display:block;
	transition:transform .22s, box-shadow .22s;
	position:relative;
}
.gallery-item img{
	width:100%;
	height:160px;
	object-fit:cover;
	display:block;
	transition:transform .35s, filter .35s;
}
.gallery-item:hover{
	transform:translateY(-6px);
	box-shadow:0 22px 50px rgba(0,0,0,0.55);
}
.gallery-item:hover img{transform:scale(1.04);filter:brightness(1.03)}

/* Responsive */
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr} .gallery-item img{height:200px} }

/* Early work / initial portfolio */
.early-portfolio h2{margin-top:0}
.initial-grid{margin-top:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.initial-grid .card img{height:160px;object-fit:cover;border-radius:8px}
.early-portfolio .card-body{padding:0.9rem 0.85rem 0.95rem}
.early-portfolio .card-body strong{display:block;font-size:0.98rem;line-height:1.25;letter-spacing:-0.15px}
.early-portfolio .card-body small{display:block;margin-top:.25rem;color:var(--muted);font-size:0.86rem;line-height:1.35}
@media (max-width:1100px){ .initial-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:600px){ .initial-grid{grid-template-columns:repeat(2,1fr);gap:.6rem} .initial-grid .card img{height:180px} }
@media (max-width:420px){ .initial-grid{grid-template-columns:1fr} .initial-grid .card img{height:200px} }

/* Responsive utilities and layout tweaks */
:root{
	--container-pad: 2rem;
}

/* About section: two-column layout and achievements styling */
.about-grid{display:grid;grid-template-columns:1fr 360px;gap:1.25rem;align-items:start}
.about-intro .lead{margin-bottom:.6rem}
.about-stats{display:flex;gap:1rem;margin-top:1rem}
.about-stats .stat{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:.6rem .9rem;border-radius:10px;display:flex;flex-direction:column;align-items:flex-start;border:1px solid rgba(255,255,255,0.03)}
.about-stats .stat strong{font-size:1.15rem;color:#fff;display:block}
.about-stats .stat span{font-size:.85rem;color:var(--muted);margin-top:.2rem}
.about-card{background:linear-gradient(90deg, rgba(0,255,213,0.03), rgba(255,77,166,0.02));padding:1rem;border-radius:12px;border:1px solid rgba(255,255,255,0.03);box-shadow:0 10px 30px rgba(2,8,23,0.6)}
.about-card h3{margin-top:0;margin-bottom:.6rem}
.achievements{list-style:none;padding:0;margin:0;display:grid;gap:.5rem}
.achievements li{position:relative;padding-left:2.4rem;color:var(--muted);line-height:1.4}
.achievements li::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.6rem;height:1.6rem;border-radius:6px;background:var(--accent-grad);display:inline-grid;place-items:center;color:#071022;font-weight:700;font-size:.9rem;box-shadow:0 8px 18px rgba(0,0,0,0.45)}
.achievements li:nth-child(1)::before{content:"1"}
.achievements li:nth-child(2)::before{content:"1"}
.achievements li:nth-child(3)::before{content:"R"}
.achievements li:nth-child(4)::before{content:"2"}
.achievements li:nth-child(5)::before{content:"2"}

@media (max-width:900px){ .about-grid{grid-template-columns:1fr;gap:1rem} .about-card{order:2} }

/* Make container padding a bit smaller on small screens */
.container{padding:var(--container-pad)}
@media (max-width:900px){ .container{padding:1.25rem} }
@media (max-width:560px){ .container{padding:.9rem} }

/* Scale headings slightly on small screens */
.hero h1{font-size:2.1rem}
@media (max-width:900px){ .hero h1{font-size:1.8rem} }
@media (max-width:560px){ .hero h1{font-size:1.5rem} }

/* Hero layout: collapse to single column on mobile */
.hero-grid{display:grid;grid-template-columns:1fr 360px;gap:2rem;align-items:center}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr;gap:1.25rem} }

@media (max-width:900px){
	.hero-card img{height:200px}
}

@media (max-width:560px){
	.hero-card img{height:180px}
	.hero-card-overlay{bottom:3.6rem}
	.hero-note{left:.6rem;right:.6rem;bottom:.6rem;font-size:.85rem;padding:.45rem .6rem}
}

/* Ensure hero-preview image is fluid */
.hero-preview img{width:100%;height:auto;display:block;border-radius:12px}

/* Portfolio grid responsiveness */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1100px){ .portfolio-grid{grid-template-columns:repeat(2,1fr)} }
/* On typical mobile widths keep two cards side-by-side for denser layout */
@media (max-width:600px){ .portfolio-grid{grid-template-columns:repeat(2,1fr);gap:.6rem} }
/* Collapse to single column only on very narrow devices */
@media (max-width:420px){ .portfolio-grid{grid-template-columns:1fr} }

/* Card image responsive height */
.card img{width:100%;height:160px;object-fit:cover}
@media (max-width:900px){ .card img{height:180px} }
@media (max-width:560px){ .card img{height:220px} }

/* Gallery grid responsiveness */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
@media (max-width:900px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .gallery-grid{grid-template-columns:1fr} }

/* Services grid: compact 2x2 -> single column on small */
.services-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:stretch}
@media (max-width:760px){ .services-grid{grid-template-columns:1fr} }

/* Buttons: ensure full-width stack on very small screens */
.btn{white-space:nowrap}
@media (max-width:440px){
	.hero-ctas{flex-direction:column;gap:.6rem}
	.hero-ctas .btn{width:100%;text-align:center}
	.services-cta .btn{width:100%}
	.connect-actions .btn{width:100%}
	.portfolio-actions .btn{width:100%}
}

/* Header / Nav: improved mobile panel & spacing */
.nav{display:flex;gap:1rem;align-items:center}
.nav-toggle{display:none}
@media (max-width:900px){
	.nav{display:none;position:absolute;top:64px;right:20px;width:260px;padding:0.9rem;border-radius:12px;background:linear-gradient(180deg, rgba(7,18,36,0.96), rgba(7,12,22,0.98));box-shadow:0 18px 50px rgba(2,8,23,0.6);flex-direction:column;gap:.5rem}
	body.nav-open .nav{display:flex}
	.nav-toggle{display:flex}
	.header-grid{gap:.5rem}

	/* hamburger button visuals */
	.nav-toggle{align-items:center;justify-content:center;width:46px;height:40px;background:transparent;border:0;cursor:pointer;border-radius:10px;padding:6px;color:var(--muted);z-index:60}
	.nav-toggle .bar{display:block;width:22px;height:2.5px;background:currentColor;border-radius:2px;transition:transform .28s cubic-bezier(.2,.9,.2,1), opacity .18s ease;box-shadow:0 1px 0 rgba(255,255,255,0.02)}
	.nav-toggle .bar + .bar{margin-top:5px}
	/* open state: transform into X */
	body.nav-open .nav-toggle .bar-1{transform:translateY(6px) rotate(45deg)}
	body.nav-open .nav-toggle .bar-2{opacity:0;transform:scaleX(0)}
	body.nav-open .nav-toggle .bar-3{transform:translateY(-6px) rotate(-45deg)}
	.nav-toggle:focus{outline:2px solid rgba(0,255,213,0.12);outline-offset:4px}
}

/* Header actions removed — styles cleaned up */

/* Footer: stack and center on small screens */
.footer-grid{display:flex;justify-content:space-between;align-items:center}
@media (max-width:660px){
	.footer-grid{flex-direction:column;gap:.6rem;text-align:center}
	.site-footer p{font-size:.95rem}
}

/* Modal responsiveness: ensure inner stacks on small */
.modal-inner{display:grid;grid-template-columns:1fr 320px;gap:1rem;max-width:900px;width:94%}
@media (max-width:720px){ .modal-inner{grid-template-columns:1fr;align-items:center} .modal img{height:auto} }

/* Accessibility / focus */
a:focus, button:focus { outline: 2px solid rgba(0,255,213,0.12); outline-offset:4px; }

/* Prevent background scroll when modal open */
.no-scroll{overflow:hidden}

/* Small layout cleanups */
.meta{font-size:.9rem;color:var(--muted)}
.section-sub{max-width:60ch}

/* Tweak card body spacing for small screens */
.card-body{padding:.7rem .75rem}
@media (max-width:560px){ .card-body{padding:.8rem} }

/* Keep icons aligned in small buttons */
.icon{vertical-align:middle;display:inline-block}

/* small accent animation keyframes */
@keyframes accentFloat{
	0%{transform:translateY(0) rotate(0deg);opacity:0.11}
	25%{transform:translateY(-6px) rotate(.6deg);opacity:0.16}
	50%{transform:translateY(0) rotate(0deg);opacity:0.12}
	75%{transform:translateY(6px) rotate(-.6deg);opacity:0.16}
	100%{transform:translateY(0) rotate(0deg);opacity:0.11}
}