/* =========================================================
   AVENIX  |  styles.css  v7  (whole site)
   Blue-led, white surfaces, deep-black text,
   night-sky footer, serif pages, neumorphic contact.

   TABLE OF CONTENTS
   01. Variables (colours, sizes)
   02. Base (html, body, headings, links)
   03. Two-tone border helper (.bx)
   04. Navbar (desktop) and side drawer (mobile)
   05. Buttons
   06. Hero
   07. Tools line (flat logos + night-sky background)
   08. Service cards
   09. Gallery carousel
   10. V Chess project
   11. Steps
   12. Services page
   13. CTA and accordion
   14. Footer (night sky with stars)
   15. Back to top button
   16. Devices (responsive) and reduced motion
   17. Serif pages (projects, about)
   18. Projects page
   19. About page
   20. Contact page (neumorphic)
   ========================================================= */


/* =========================================================
   01. VARIABLES
   Change colours and sizes here and the whole site follows
   ========================================================= */
:root {
	--blue: #2447A8;
	--sky: #4BA8DF;
	--ink: #0E0F12;
	--orange: #EC6608;
	--muted: #4a5062;
	--soft: #F4F7FD;
	--line: #DCE3F1;
	--r: 10px;          /* default corner radius */
	--nav-h: 76px;      /* navbar height */

	/* Two-tone border colour sets (top right bottom left) */
	--bd: var(--ink) var(--blue) var(--blue) var(--ink);
	--bd2: var(--blue) var(--ink) var(--ink) var(--blue);
}


/* =========================================================
   02. BASE
   ========================================================= */
html {
	scroll-behavior: smooth;
	font-size: 16px;
	scroll-padding-top: 92px;
	overflow-x: hidden;
	overscroll-behavior-x: none;
	max-width: 100%;
}

body {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--ink);
	background: #fff;
	line-height: 1.65;
	padding-top: var(--nav-h);
	overflow-x: hidden;
	overscroll-behavior-x: none;
	touch-action: pan-y pinch-zoom;
	max-width: 100%;
	position: relative;
}

main,
section,
footer,
header {
	max-width: 100%;
	overflow-x: clip;
}

img {
	max-width: 100%;
}

/* Headings */
h1,
h2,
h3,
h4 {
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.15;
	color: var(--ink);
}

h1 {
	font-size: clamp(2.2rem, 5vw, 4.1rem);
}

h2 {
	font-size: clamp(1.7rem, 3.2vw, 2.6rem);
}

h3 {
	font-size: 1.15rem;
	letter-spacing: -.01em;
}

/* Paragraphs and links */
p {
	color: var(--muted);
	max-width: 66ch;
}

a {
	color: var(--blue);
	text-decoration: none;
}

/* Keyboard focus ring */
:focus-visible {
	outline: 3px solid var(--sky);
	outline-offset: 3px;
	border-radius: 6px;
}

/* Layout helpers */
.container {
	max-width: 1240px;
}

.section {
	padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.section-soft {
	background: var(--soft);
}

/* Google Material icons */
.material-icons-round {
	font-size: 1.2rem;
	vertical-align: middle;
	line-height: 1;
}


/* =========================================================
   03. TWO-TONE BORDER HELPER (.bx)
   Black on two sides, blue on the other two.
   The colours swap on hover and on scroll-in (.in added by JS)
   ========================================================= */
.bx {
	border: 2px solid;
	border-color: var(--bd2);
	border-radius: var(--r);
	background: #fff;
	transition: border-color .7s ease, transform .3s, box-shadow .3s;
}

.bx.in {
	border-color: var(--bd);
}

.bx:hover {
	border-color: var(--bd2);
	box-shadow: 0 16px 30px -20px rgba(36, 71, 168, .5);
}


/* =========================================================
   04. NAVBAR (logo only, links centred on large screens)
   ========================================================= */
#mainNav {
	height: var(--nav-h);
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(12px);
	border-bottom: 2px solid transparent;
	transition: border-color .3s;
	padding: 0;
}

/* Blue line appears under the navbar after scrolling (class added by JS) */
#mainNav.scrolled {
	border-bottom-color: var(--blue);
}

#mainNav > .container {
	display: flex;
	align-items: center;
	height: 100%;
}

/* Logo */
.navbar-brand {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	margin: 0;
}

.brand-logo {
	height: 3rem;
	width: auto;
	max-width: 200px;
	object-fit: contain;
}

/* Right side of the navbar (WhatsApp button) */
.nav-end {
	flex: 1 1 0;
	justify-content: flex-end;
}

/* Mobile menu button */
.navbar-toggler {
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: .35rem .6rem;
	color: var(--ink);
	background: #fff;
}

.navbar-toggler:focus {
	box-shadow: 0 0 0 3px rgba(75, 168, 223, .45);
}

/* Menu links */
.nav-link {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-weight: 600;
	color: var(--ink) !important;
	padding: .5rem 1rem !important;
	border-radius: 999px;
	border: 2px solid transparent;
	transition: border-color .5s, background .3s, color .2s;
}

.nav-link .material-icons-round {
	font-size: 1.1rem;
	color: var(--blue);
	transition: color .2s;
}

.nav-link:hover {
	border-color: var(--ink) var(--blue) var(--blue) var(--ink);
	color: var(--blue) !important;
}

/* Current page link */
.nav-link.active {
	background: var(--blue);
	color: #fff !important;
	border-color: var(--blue);
}

.nav-link.active .material-icons-round {
	color: #fff;
}

/* Small arrow next to "Services" */
.caret {
	font-size: 1rem !important;
	margin-left: -.1rem;
}

/* Dropdown (sub menu) */
.has-sub {
	position: relative;
}

.sub {
	list-style: none;
	margin: 0;
	padding: .4rem;
	background: #fff;
}

.sub a {
	display: block;
	padding: .5rem .9rem;
	color: var(--ink);
	font-weight: 500;
	border-radius: 999px;
	font-size: .95rem;
}

.sub a:hover {
	background: var(--soft);
	color: var(--blue);
}

/* ----- Desktop only (992px and wider) ----- */
@media (min-width: 992px) {

	.dnav .navbar-nav {
		flex-direction: row;
		gap: .25rem;
	}

	/* Dropdown box appears under "Services" */
	.dnav .sub {
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		min-width: 280px;
		display: none;
		border: 2px solid;
		border-color: var(--bd);
		border-radius: 16px;
		box-shadow: 0 20px 40px -22px rgba(14, 15, 18, .5);
	}

	.dnav .has-sub:hover .sub,
	.dnav .has-sub:focus-within .sub {
		display: block;
	}

	/* Invisible bridge so the dropdown does not close when the mouse moves down */
	.dnav .has-sub::after {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		height: 12px;
	}

}

/* ----- Side drawer (small screens) -----
   Lives outside the nav so nothing traps it. */
.drawer {
	width: 300px;
	max-width: 86vw;
}

.drawer .offcanvas-header {
	border-bottom: 2px solid var(--ink);
}

.drawer .nav-link {
	padding: .75rem 1rem !important;
	border-color: var(--line);
}

.drawer .caret {
	margin-left: auto;
	transition: transform .3s;
}

/* Arrow flips when the sub menu is open */
.drawer .has-sub.open .caret {
	transform: rotate(180deg);
}

.drawer .has-sub > .nav-link {
	cursor: pointer;
}

.drawer .sub {
	display: none;
	padding: .3rem 0 .4rem 1.2rem;
}

.drawer .has-sub.open .sub {
	display: block;
}

.drawer .sub a {
	padding: .4rem .9rem;
}


/* =========================================================
   05. BUTTONS (pill shaped)
   .btn-main = solid blue   .btn-line = white with outline
   ========================================================= */
.btn-main,
.btn-line {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font-weight: 700;
	padding: .7rem 1.5rem;
	border-radius: 999px;
	border: 2px solid;
	cursor: pointer;
	transition: border-color .5s, background .3s, transform .2s;
}

.btn-main {
	background: var(--blue);
	color: #fff;
	border-color: var(--ink) var(--sky) var(--sky) var(--ink);
}

.btn-main:hover {
	color: #fff;
	border-color: var(--sky) var(--ink) var(--ink) var(--sky);
	transform: translateY(-2px);
}

.btn-line {
	background: #fff;
	color: var(--ink);
	border-color: var(--bd);
}

.btn-line:hover {
	border-color: var(--bd2);
	color: var(--blue);
	transform: translateY(-2px);
}

/* Button sizes */
.btn-big {
	padding: .9rem 1.8rem;
	font-size: 1.05rem;
}

.btn-sm-x {
	padding: .5rem 1.1rem;
	font-size: .92rem;
}


/* =========================================================
   06. HERO
   ========================================================= */
.hero {
	padding: clamp(2.5rem, 5vw, 5rem) 0 clamp(3rem, 6vw, 5rem);
	min-height: calc(100vh - var(--nav-h));
	display: flex;
	align-items: center;
	background: radial-gradient(60% 60% at 85% 20%, rgba(75, 168, 223, .16), transparent), #fff;
	overflow: hidden;
}

.hero p.lead {
	font-size: 1.15rem;
}

/* Artwork box on the right */
.hero-art {
	position: relative;
	aspect-ratio: 1;
	max-width: 520px;
	margin-inline: auto;
}

.hero-art svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* Floating chips (VS Code, GitHub, Arduino, Ubuntu) */
.chip {
	position: absolute;
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .8rem;
	font-weight: 700;
	font-size: .9rem;
}

.chip img {
	width: 24px;
	height: 24px;
}

/* Chip positions */
.c1 { top: 6%;     left: 0; }
.c2 { top: 34%;    right: 0; }
.c3 { bottom: 26%; left: 0; }
.c4 { bottom: 6%;  right: 8%; }


/* =========================================================
   07. TOOLS LINE  ("Systems and tools we work with")
   - ONE single scrolling line
   - Flat logo tiles (no 3D)
   - Night-sky background like the footer (this section only)
   HTML hooks: .tools  .tools-footer-bg  .marq  .marq-track
               .tile-wrap  .tile  .tile-flat
   ========================================================= */

/* --- Section box + night-sky background (same look as the footer) --- */
.tools {
	position: relative;
	isolation: isolate;     /* keeps the star layers behind the content */
	overflow: hidden;
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.tools-footer-bg {
	color: #aab3c9;
	background: radial-gradient(120% 100% at 50% 130%, #14245a 0%, #070a17 52%, #020309 100%);
}

/* Star layers (two layers twinkling at different speeds) */
.tools-footer-bg::before,
.tools-footer-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.tools-footer-bg::before {
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
		radial-gradient(1px 1px at 90px 80px, #cfe3ff, transparent),
		radial-gradient(2px 2px at 160px 20px, #fff, transparent),
		radial-gradient(1px 1px at 230px 120px, #ffd9a8, transparent),
		radial-gradient(1.5px 1.5px at 60px 150px, #fff, transparent),
		radial-gradient(1px 1px at 200px 170px, #fff, transparent);
	background-size: 260px 190px;
	animation: twinkle 5s ease-in-out infinite alternate;
}

.tools-footer-bg::after {
	background-image:
		radial-gradient(1px 1px at 40px 60px, #fff, transparent),
		radial-gradient(2px 2px at 140px 110px, #bcd7ff, transparent),
		radial-gradient(1px 1px at 280px 40px, #fff, transparent),
		radial-gradient(1.5px 1.5px at 100px 200px, #fff, transparent),
		radial-gradient(1px 1px at 310px 190px, #ffe2b8, transparent);
	background-size: 340px 250px;
	animation: twinkle 7s ease-in-out -2s infinite alternate;
}

/* --- Light text on the dark background --- */
.tools-footer-bg h2 {
	color: #fff;
}

.tools-footer-bg p {
	color: #aab3c9;
}

/* --- The moving line --- */
.marq {
	overflow: hidden;
	padding: 1.6rem 0;
	/* Fades the logos out at the left and right edges */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

.marq-track {
	display: flex;
	width: max-content;
	animation: marq 42s linear infinite;
}

/* Pauses when the mouse is over the line */
.marq:hover .marq-track {
	animation-play-state: paused;
}

/* One logo + its label */
.tile-wrap {
	flex: 0 0 auto;
	margin-right: 2.6rem;
	text-align: center;
}

/* Flat logo tile: plain white rounded square, no shadow, no tilt, no bobbing.
   White keeps dark logos (GitHub, Wireshark...) visible on the dark background. */
.tile,
.tile-flat {
	width: 5.4rem;
	height: 5.4rem;
	border-radius: 1.4rem;
	display: grid;
	place-items: center;
	margin: 0 auto;
	background: #fff;
	box-shadow: none;
	border: 0;
	transform: none;
	transition: transform .3s;
}

.tile img {
	width: 2.9rem;
	height: 2.9rem;
	filter: none;
	transform: none;
}

/* Small lift on hover (flat, no rotation) */
.tile-wrap:hover .tile {
	transform: translateY(-4px);
}

/* Label under each logo */
.tile-wrap small {
	display: block;
	margin-top: 1rem;
	font-weight: 700;
	font-size: .82rem;
	color: #fff;
}

/* Scroll animation (the track is duplicated by JS, so -50% loops smoothly) */
@keyframes marq {
	to {
		transform: translateX(-50%);
	}
}


/* =========================================================
   08. SERVICE CARDS ("What we do")
   ========================================================= */
.sec-head {
	max-width: 640px;
	margin-bottom: 2.5rem;
}

.card-x {
	height: 100%;
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
}

.card-x:hover {
	transform: translateY(-4px);
}

/* Row of small logos at the top of each card */
.card-x .lgs {
	display: flex;
	gap: .5rem;
	margin-bottom: 1rem;
}

.lgs img {
	width: 30px;
	height: 30px;
}

.card-x p {
	font-size: .95rem;
	margin-bottom: .8rem;
}

/* "See how it works" link pinned to the bottom of the card */
.card-x .more {
	margin-top: auto;
	font-weight: 700;
	display: inline-flex;
	gap: .3rem;
	align-items: center;
}


/* =========================================================
   09. GALLERY CAROUSEL ("From our workshop")
   No border, blue themed backdrop
   ========================================================= */
.gal {
	background: linear-gradient(135deg, #2447A8, #16296B);
	padding: clamp(.6rem, 1.6vw, 1.2rem);
	border-radius: 16px;
}

/* Each slide (shows a striped placeholder with a label until the image loads) */
.gal .slide {
	position: relative;
	aspect-ratio: 16/8;
	background: repeating-linear-gradient(135deg, #eef3fc 0 14px, #e4ecfa 14px 28px);
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 10px;
}

.gal .slide::before {
	content: attr(data-label);
	position: absolute;
	font-weight: 700;
	color: var(--blue);
	opacity: .5;
}

.gal .slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Caption bar at the bottom of the photo */
.gal .cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1.4rem 1.2rem .9rem;
	color: #fff;
	background: linear-gradient(transparent, rgba(14, 15, 18, .85));
	font-weight: 600;
}

/* Arrows */
.gal .carousel-control-prev,
.gal .carousel-control-next {
	width: 12%;
}

/* Dots */
.carousel-indicators [data-bs-target] {
	background: #fff;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 0;
}

.carousel-indicators {
	margin-bottom: .6rem;
}

/* Taller slide on phones */
@media (max-width: 767.98px) {
	.gal .slide {
		aspect-ratio: 4/3;
	}
}


/* =========================================================
   10. V CHESS PROJECT
   ========================================================= */
.app-shot {
	max-width: 360px;
	margin: 0 auto;
}

.app-shot img {
	display: block;
	width: 100%;
	height: auto;
}

/* Dashed placeholder box shown until the image exists */
.app-shot:not(.has) {
	aspect-ratio: 9/19.5;
	display: grid;
	place-items: center;
	border: 2px dashed var(--line);
	border-radius: var(--r);
	color: var(--muted);
	font-weight: 600;
	text-align: center;
	padding: 1rem;
}

.app-shot:not(.has)::before {
	content: attr(data-label);
}

/* Small tags (Chess, Stockfish engine, Android app) */
.tag {
	display: inline-flex;
	align-items: center;
	font-size: .82rem;
	font-weight: 600;
	padding: .2rem .75rem;
	border: 2px solid;
	border-color: var(--bd);
	border-radius: 999px;
	margin: 0 .35rem .35rem 0;
	color: var(--ink);
}

.tag img {
	height: 16px;
	width: auto;
	margin-right: .4rem;
}

/* Payment popup */
.modal-content.bx {
	padding: .4rem;
}

.modal-header {
	border: 0;
}

.modal-body .form-control {
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: .7rem 1.1rem;
}

/* Payment status message (JS adds .err or .ok) */
#payMsg {
	min-height: 1.5rem;
}

#payMsg.err {
	color: #b3261e;
}

#payMsg.ok {
	color: #1b6b3a;
}


/* =========================================================
   11. STEPS ("How a job goes")
   Numbered circles drawn with a CSS counter
   ========================================================= */
.steps {
	list-style: none;
	counter-reset: s;
	padding: 0;
	margin: 1rem 0;
}

.steps li {
	counter-increment: s;
	position: relative;
	padding: .1rem 0 .9rem 2.6rem;
	color: var(--muted);
}

.steps li::before {
	content: counter(s);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--blue);
	color: #fff;
	font-weight: 700;
	display: grid;
	place-items: center;
	font-size: .9rem;
}

.steps li b {
	color: var(--ink);
}


/* =========================================================
   12. SERVICES PAGE
   ========================================================= */
.page-hero {
	padding: clamp(2.5rem, 5vw, 4.5rem) 0;
	background: radial-gradient(50% 80% at 90% 0, rgba(75, 168, 223, .18), transparent), var(--soft);
	border-bottom: 2px solid var(--ink);
}

/* Currency switch (KSh / USD) */
.cur {
	display: inline-flex;
	border: 2px solid;
	border-color: var(--bd);
	border-radius: 999px;
	padding: 3px;
	background: #fff;
}

.cur button {
	border: 0;
	background: transparent;
	font-weight: 700;
	padding: .35rem 1.1rem;
	border-radius: 999px;
	color: var(--ink);
	transition: background .3s, color .3s;
}

.cur button[aria-pressed="true"] {
	background: var(--blue);
	color: #fff;
}

/* Every second service block gets a soft background */
.svc:nth-of-type(even) {
	background: var(--soft);
}

/* Service photo box */
.shot {
	margin: 0;
	overflow: hidden;
	position: relative;
	aspect-ratio: 4/3;
	background: repeating-linear-gradient(135deg, #eef3fc 0 14px, #e4ecfa 14px 28px);
	display: grid;
	place-items: center;
	padding: 0;
}

.shot::before {
	content: attr(data-label);
	font-weight: 700;
	color: var(--blue);
	opacity: .55;
	position: absolute;
}

.shot img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Row of logo pills */
.logos {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: .4rem 0 1.2rem;
}

.logos span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .85rem;
	font-weight: 600;
	color: var(--ink);
	padding: .25rem .7rem;
	border: 2px solid;
	border-color: var(--bd);
	border-radius: 999px;
	background: #fff;
}

.logos img {
	width: 20px;
	height: 20px;
}

/* Price + buy button row */
.buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.price-tag {
	font-weight: 600;
	color: var(--muted);
}

.price-tag b {
	font-size: 1.5rem;
	color: var(--ink);
	letter-spacing: -.02em;
	margin-left: .3rem;
}

.price-tag .pill-o {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--orange);
	margin-right: .4rem;
}


/* =========================================================
   13. CTA BANNER AND ACCORDION
   ========================================================= */
.cta {
	background: var(--blue);
	color: #fff;
	padding: clamp(1.8rem, 4vw, 3rem);
	border-radius: var(--r);
	border: 2px solid;
	border-color: var(--ink) var(--sky) var(--sky) var(--ink);
}

.cta h2,
.cta p {
	color: #fff;
}

.cta .btn-main {
	background: #fff;
	color: var(--ink);
	border-color: var(--ink);
}

/* FAQ accordion */
.accordion-item {
	border: 2px solid;
	border-color: var(--bd);
	border-radius: var(--r) !important;
	margin-bottom: .8rem;
	overflow: hidden;
}

.accordion-button {
	font-weight: 700;
	color: var(--ink);
}

.accordion-button:not(.collapsed) {
	background: var(--soft);
	color: var(--blue);
	box-shadow: none;
}


/* =========================================================
   14. FOOTER (night sky with stars)
   ========================================================= */
.site-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #aab3c9;
	padding: 4rem 0 1.5rem;
	background: radial-gradient(120% 100% at 50% 130%, #14245a 0%, #070a17 52%, #020309 100%);
}

/* Two star layers behind the content */
.site-footer::before,
.site-footer::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.site-footer::before {
	background-image:
		radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
		radial-gradient(1px 1px at 90px 80px, #cfe3ff, transparent),
		radial-gradient(2px 2px at 160px 20px, #fff, transparent),
		radial-gradient(1px 1px at 230px 120px, #ffd9a8, transparent),
		radial-gradient(1.5px 1.5px at 60px 150px, #fff, transparent),
		radial-gradient(1px 1px at 200px 170px, #fff, transparent);
	background-size: 260px 190px;
	animation: twinkle 5s ease-in-out infinite alternate;
}

.site-footer::after {
	background-image:
		radial-gradient(1px 1px at 40px 60px, #fff, transparent),
		radial-gradient(2px 2px at 140px 110px, #bcd7ff, transparent),
		radial-gradient(1px 1px at 280px 40px, #fff, transparent),
		radial-gradient(1.5px 1.5px at 100px 200px, #fff, transparent),
		radial-gradient(1px 1px at 310px 190px, #ffe2b8, transparent);
	background-size: 340px 250px;
	animation: twinkle 7s ease-in-out -2s infinite alternate;
}

/* Stars fade in and out (also used by the tools section) */
@keyframes twinkle {
	from { opacity: .35; }
	to   { opacity: 1; }
}

/* Shooting star */
.shoot {
	position: absolute;
	z-index: -1;
	top: 14%;
	left: 72%;
	width: 120px;
	height: 2px;
	background: linear-gradient(90deg, #fff, transparent);
	opacity: 0;
	transform: rotate(-35deg);
	animation: shoot 11s linear infinite;
}

@keyframes shoot {
	0%   { opacity: 0; transform: translate(0, 0) rotate(-35deg); }
	3%   { opacity: 1; }
	13%  { opacity: 0; transform: translate(-320px, 224px) rotate(-35deg); }
	100% { opacity: 0; }
}

/* Logo sits on a white pill so it stays readable on the dark background */
.foot-logo {
	display: inline-flex;
	background: #fff;
	border-radius: 14px;
	padding: 6px 12px;
	margin-bottom: 1rem;
}

.foot-logo .brand-logo {
	height: 2.6rem;
}

/* Footer text and links */
.site-footer h5 {
	font-size: 1rem;
	margin-bottom: 1rem;
	color: #fff;
}

.site-footer p {
	color: #aab3c9;
}

.site-footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer li {
	margin-bottom: .5rem;
}

.site-footer li a,
.site-footer .text-secondary {
	color: #aab3c9 !important;
	font-weight: 500;
}

.site-footer li a:hover {
	color: #fff !important;
}

/* Social icons */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: .55rem;
}

.social a {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-size: 1.1rem;
	border: 2px solid;
	border-color: #fff var(--sky) var(--sky) #fff;
	border-radius: var(--r);
	transition: border-color .5s, background .3s, color .3s;
}

.social a:hover {
	border-color: var(--sky) #fff #fff var(--sky);
	background: var(--blue);
	color: #fff;
}

/* Greyed-out "coming soon" icons */
.social a.soon {
	opacity: .65;
	cursor: not-allowed;
}

/* Copyright bar */
.foot-bottom {
	border-top: 1px solid rgba(255, 255, 255, .14);
	margin-top: 2rem;
	padding-top: 1.1rem;
	font-size: .9rem;
	color: #8e98b0;
}

.foot-bottom a {
	color: #aab3c9;
}


/* =========================================================
   15. BACK TO TOP BUTTON
   JS adds .show after scrolling down
   ========================================================= */
#toTop {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid var(--ink);
	background: var(--blue);
	color: #fff;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	z-index: 1030;
}

#toTop.show {
	opacity: 1;
	visibility: visible;
}


/* =========================================================
   16. DEVICES (responsive) AND REDUCED MOTION
   ========================================================= */

/* Tablets and phones: hero no longer fills the full screen height */
@media (max-width: 991.98px) {
	.hero {
		min-height: auto;
	}
}

/* Phones */
@media (max-width: 575.98px) {

	.chip {
		font-size: .78rem;
		padding: .35rem .55rem;
	}

	.hero-art {
		max-width: 360px;
	}

	.brand-logo {
		height: 2.7rem;
	}

}

/* Large screens: scale everything up a little */
@media (min-width: 1600px) {

	html {
		font-size: 17.5px;
	}

	.container {
		max-width: 1480px;
	}

}

@media (min-width: 1920px) {

	html {
		font-size: 19px;
	}

	.container {
		max-width: 1720px;
	}

	:root {
		--nav-h: 88px;
	}

}

@media (min-width: 2560px) {

	html {
		font-size: 25px;
	}

	.container {
		max-width: 2200px;
	}

	:root {
		--nav-h: 104px;
	}

}

/* Touch screens: no hover lift on cards */
@media (hover: none) {
	.card-x:hover {
		transform: none;
	}
}

/* People who prefer less motion: switch all animation off */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}


/* =========================================================
   17. SERIF PAGES (projects, about)
   Body text and headings use serif fonts; UI parts stay sans
   ========================================================= */
body.serif {
	font-family: 'Source Serif 4', Georgia, serif;
	font-size: 1.06rem;
}

.serif h1,
.serif h2,
.serif h3,
.serif h4 {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	letter-spacing: -.02em;
}

/* Parts that keep the sans-serif font */
.serif .navbar,
.serif .drawer,
.serif .site-footer,
.serif .btn-main,
.serif .btn-line,
.serif .tag,
.serif .status,
.serif .filters,
.serif .breadcrumb {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Big intro paragraph */
.lede {
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	color: var(--ink);
	line-height: 1.5;
	max-width: 60ch;
}


/* =========================================================
   18. PROJECTS PAGE
   ========================================================= */

/* Filter buttons */
.filters {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 1.6rem;
}

.filters button {
	border: 2px solid;
	border-color: var(--bd);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font-weight: 700;
	padding: .4rem 1.1rem;
	transition: border-color .5s, background .3s, color .3s;
}

.filters button:hover {
	border-color: var(--bd2);
}

.filters button[aria-pressed="true"] {
	background: var(--blue);
	color: #fff;
}

/* Project card */
.proj {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0;
	overflow: hidden;
}

.proj .thumb {
	margin: 0;
	position: relative;
	aspect-ratio: 16/10;
	background: repeating-linear-gradient(135deg, #eef3fc 0 14px, #e4ecfa 14px 28px);
	display: grid;
	place-items: center;
	border-bottom: 2px solid var(--ink);
}

.proj .thumb::before {
	content: attr(data-label);
	position: absolute;
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 700;
	color: var(--blue);
	opacity: .55;
}

.proj .thumb img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.proj .pbody {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.proj h3 {
	font-size: 1.4rem;
	margin: .9rem 0 .5rem;
}

.proj p {
	font-size: 1rem;
}

/* Status badges: done / in progress / planned */
.status {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-weight: 700;
	font-size: .82rem;
	padding: .25rem .8rem;
	border-radius: 999px;
	border: 2px solid;
	align-self: flex-start;
}

.status.done {
	background: var(--blue);
	border-color: var(--blue);
	color: #fff;
}

.status.prog {
	border-color: var(--orange);
	color: var(--ink);
	background: #fff;
}

.status.plan {
	border-color: var(--ink);
	color: var(--ink);
	background: #fff;
}

/* Tick list (done / not done items) */
.ticks {
	list-style: none;
	padding: 0;
	margin: .4rem 0 1rem;
}

.ticks li {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	margin-bottom: .35rem;
	font-size: .97rem;
	color: var(--muted);
}

.ticks li.ok {
	color: var(--ink);
}

.ticks .bi-check-circle-fill {
	color: var(--blue);
}

.ticks .bi-circle {
	color: #9aa3b8;
}

/* Buttons stay at the bottom of the card */
.proj .btn-line,
.proj .btn-main {
	margin-top: auto;
	align-self: flex-start;
}


/* =========================================================
   19. ABOUT PAGE
   ========================================================= */

/* Profile card */
.profile {
	max-width: 340px;
	margin-inline: auto;
	padding: 1.8rem 1.4rem 1.5rem;
	text-align: center;
}

/* Round photo with a green verified badge */
.avatar-wrap {
	position: relative;
	width: 9.5rem;
	height: 9.5rem;
	margin: 0 auto 1.1rem;
}

.avatar {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	border: 4px solid var(--blue);
	box-shadow: 0 0 0 4px #fff, 0 14px 26px -14px rgba(36, 71, 168, .7);
	overflow: hidden;
	background: linear-gradient(145deg, #EEF3FD, #D5E2FA);
	display: grid;
	place-items: center;
}

/* Initials shown until the photo loads */
.avatar::before {
	content: attr(data-initials);
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 2.6rem;
	color: var(--blue);
}

.avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.verified {
	position: absolute;
	right: 0;
	bottom: .25rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: grid;
	place-items: center;
	border: 3px solid #fff;
	font-size: 1.15rem;
	box-shadow: 0 4px 10px -3px rgba(0, 0, 0, .4);
}

.profile h2 {
	font-size: 1.6rem;
	margin: 0;
}

.profile .role {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	color: var(--muted);
	font-weight: 600;
	font-size: .95rem;
	margin: .2rem auto 1.1rem;
}

.profile .skills-h {
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
	font-size: .9rem;
	letter-spacing: 0;
	color: var(--muted);
	font-weight: 700;
	margin: 0 0 .8rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--line);
}

/* Skill pills */
.skills {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	justify-content: center;
	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.skills span {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .84rem;
	font-weight: 600;
	color: var(--ink);
	padding: .25rem .7rem;
	border: 2px solid;
	border-color: var(--bd);
	border-radius: 999px;
	background: #fff;
}

.skills img {
	height: 18px;
	width: auto;
	max-width: 36px;
}

/* Quick facts box */
.facts {
	padding: 1.6rem;
}

.facts dl {
	margin: 0;
}

.facts dt {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: .85rem;
	color: var(--muted);
	font-weight: 600;
}

.facts dd {
	margin: 0 0 1rem;
	font-weight: 600;
	color: var(--ink);
}

.facts dd:last-child {
	margin: 0;
}

.belief h3 {
	font-size: 1.3rem;
	margin-bottom: .5rem;
}

/* Timeline (vertical line with dots) */
.timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 1.6rem;
	border-left: 2px solid var(--ink);
}

.timeline li {
	position: relative;
	padding: 0 0 1.8rem 1.2rem;
}

.timeline li:last-child {
	padding-bottom: 0;
}

/* Dot on the line */
.timeline li::before {
	content: "";
	position: absolute;
	left: -2.15rem;
	top: .45rem;
	width: .9rem;
	height: .9rem;
	border-radius: 50%;
	background: var(--blue);
	border: 2px solid #fff;
	box-shadow: 0 0 0 2px var(--ink);
}

/* Upcoming step: empty dot */
.timeline li.next::before {
	background: #fff;
}

.timeline time {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-weight: 800;
	color: var(--blue);
	display: block;
	font-size: .9rem;
}


/* =========================================================
   20. CONTACT PAGE (neumorphic / soft UI)
   Shadows: dark #C3CAD8 bottom-right, white top-left
   ========================================================= */
body.neo {
	background: #E6EBF3;
}

.neo .page-hero {
	background: transparent;
	border: 0;
	padding-bottom: 1rem;
}

.neo .section {
	padding-top: 2rem;
}

/* Raised card */
.neo-card {
	display: block;
	background: #E6EBF3;
	border-radius: 22px;
	padding: clamp(1.3rem, 3vw, 2.1rem);
	box-shadow: 10px 10px 22px #C3CAD8, -10px -10px 22px #fff;
	color: var(--ink);
	transition: box-shadow .35s, transform .35s;
}

/* Linked cards sink in when hovered */
a.neo-card:hover {
	box-shadow: inset 6px 6px 12px #C3CAD8, inset -6px -6px 12px #fff;
	transform: none;
	color: var(--ink);
}

/* Round icon pressed into the card */
.neo-ic {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: #E6EBF3;
	box-shadow: inset 5px 5px 10px #C3CAD8, inset -5px -5px 10px #fff;
	color: var(--blue);
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.neo-card h3 {
	margin-bottom: .2rem;
}

.neo-card p {
	margin: 0;
	font-size: .95rem;
	word-break: break-word;
}

.neo-card b {
	font-weight: 700;
	color: var(--ink);
}

/* Form labels */
.neo label {
	font-weight: 600;
	font-size: .92rem;
	margin: 0 0 .4rem .4rem;
	color: var(--ink);
}

/* Form fields (pressed-in look) */
.neo-field {
	display: block;
	width: 100%;
	background: #E6EBF3;
	border: 0;
	border-radius: 16px;
	padding: .9rem 1.1rem;
	color: var(--ink);
	font: inherit;
	box-shadow: inset 6px 6px 12px #C3CAD8, inset -6px -6px 12px #fff;
	transition: box-shadow .3s;
}

.neo-field::placeholder {
	color: #6a7388;
}

.neo-field:focus {
	outline: 0;
	box-shadow: inset 6px 6px 12px #C3CAD8, inset -6px -6px 12px #fff, 0 0 0 3px rgba(75, 168, 223, .6);
}

textarea.neo-field {
	min-height: 150px;
	resize: vertical;
}

/* Raised buttons */
.neo-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	border: 0;
	border-radius: 999px;
	padding: .9rem 1.7rem;
	font-weight: 700;
	font-family: inherit;
	background: #E6EBF3;
	color: var(--blue);
	cursor: pointer;
	box-shadow: 7px 7px 14px #C3CAD8, -7px -7px 14px #fff;
	transition: box-shadow .25s, color .25s;
}

.neo-btn:hover {
	color: var(--ink);
}

/* Pressed state */
.neo-btn:active {
	box-shadow: inset 5px 5px 10px #C3CAD8, inset -5px -5px 10px #fff;
}

/* Solid blue version (Send message) */
.neo-btn.primary {
	background: var(--blue);
	color: #fff;
	box-shadow: 7px 7px 14px #B3BBCB, -7px -7px 14px #fff;
}

.neo-btn.primary:hover {
	color: #fff;
	background: #1d3c8f;
}

.neo-btn.primary:active {
	box-shadow: inset 4px 4px 8px #17307a, inset -3px -3px 6px #3a62c9;
}

/* Form result message */
#formMsg {
	min-height: 1.5rem;
	font-weight: 600;
	color: var(--blue);
}

.neo .breadcrumb a {
	color: var(--blue);
}