@keyframes Waves {
			0% {
				background-position: 0% 50%;
			}
			50% {
				background-position: 100% 50%;
			}
			100% {
				background-position: 0% 50%;
			}
		}

    :root {
        --accent: #D6454A;
        --muted: #6B7280;
        --light-font: #222;
        --theme-green: #008753;
        --link_blue: #0000ee;
        --dimmed-bg: #f5e7e7;
		--card: #ffffff;
		--glass: #f3f4f6;
		--panel-bg: rgba(255,255,255,0.82);
		--line-soft: rgba(0, 0, 0, 0.22);
        --max-width: 1200px;
        --gap: 1.25rem;
        --radius: 12px;
		--wave_color: #6d7483;
    }

	html[data-theme="dark"] {
		--accent: #ff8d8d;
		--muted: #9ca3af;
		--light-font: #fff;
		--theme-green: #00a86b;
		--link_blue: #7ab7ff;
		--dimmed-bg: #111827;
		--card: #0b1220;
		--glass: #1f2937;
		--panel-bg: rgba(17, 24, 39, 0.9);
		--line-soft: rgba(148, 163, 184, 0.35);
		--wave_color: #00301f;
	}

	p {
		color: var(--light-font);
	}

		* {
			box-sizing: border-box;
		}

		html, body {
			height: 100%;
		}

		header {
			max-width: var(--max-width);
			margin: 0 auto;
			width: 90%;
		}

		.site {
			padding: calc(var(--gap) * 2);
			max-width: var(--max-width);
			display: grid;
			margin: 0 auto;
			grid-template-columns: 1fr 380px;
			gap: var(--gap);
			align-items: start;
		}







		/* HERO SECTION */
		.hero {
			background: linear-gradient(275deg, var(--dimmed-bg) 0%, var(--wave_color) 30%, var(--dimmed-bg) 100%);
			background-size: 800% 800%;
			padding: var(--gap);
			border: 1px solid rgba(255, 255, 255, 0.03);
			border-radius: var(--radius);
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--gap);
			box-shadow: 0 8px 14px rgba(2, 6, 23, 0.6);
			animation: Waves 9s infinite alternate;
		}

		.hero img {
			width: 240px;
			height: 240px;
			object-fit: cover;
			border-radius: var(--radius);
			border: 1px solid var(--accent);
			pointer-events: none;
		}

		.hero__text h1 {
			font-size: 1.6rem;
			letter-spacing: -0.01em;
		}

		.hero__text .headline {
			color: var(--accent);
			font-weight: 600;
			display: inline-block;
		}

		.hero__text p {
			margin: 0;
			font-size: 0.98rem;
			color: var(--light-font);
		}






		/* ABOUT CONTENT */
		.main {
			background: var(--card);
			padding: var(--gap);
			margin: var(--gap) auto;
			border-radius: var(--radius);
			border: 1px solid rgba(255,255,255,0.02);
		}

		h2 {
			margin: 8px 0 12px 0;
			font-size: 1.2rem;
		}

		p.lead {
			color: var(--light-font);
			margin: 0 0 16px 0;
		}

		.stats {
			display: flex;
			gap: 12px;
			flex-wrap: wrap;
			margin-bottom: 18px;
		}

		.stat {
			background: var(--glass);
			padding: 10px 12px;
			border-radius: 10px;
			min-width: 120px;
			text-align: center;
			border: 1px solid rgba(255,255,255,0.02);
		}

		.stat strong {
			display: block;
			font-size: 1.05rem;
		}


		/* TIMELINE */
		.timeline {
			margin: 18px 0;
		}
		.timeline .item {
			display: flex;
			gap: 12px;
			margin: 12px 0;
			align-items: flex-start;
		}

		.timeline .dot {
			width: 10px;
			height: 10px;
			border-radius: 50%;
			background: var(--accent);
			margin-top: 6px;
			flex: 0 0 10px;
		}
		.timeline .what {
			background: var(--panel-bg);
			padding: 10px 12px;
			border-bottom: 1px solid var(--line-soft);
		}


		/* RIGHT: SIDEBAR */
		aside {
			position: sticky;
			top: var(--gap);
			align-self: start;
		}

		.card {
			background: linear-gradient(180deg, var(--panel-bg), transparent);
			padding: var(--gap);
			border-radius: 12px;
			margin-bottom: 18px;
		}

        .card form input {
            border: 1px solid var(--line-soft);
        }

		.card strong {
			color: var(--accent);
		}

		.cta {
			display: flex;
			gap: 10px;
			flex-wrap: wrap;
		}

		.btn {
			background: transparent;
			color: var(--accent);
			border: 1px solid rgba(124,58,237,0.16);
			padding: 10px 14px;
			border-radius: 10px;
			cursor: pointer;
			font-weight: 600;
			text-decoration: none;
		}

		




		/* credentials accordion */
		.acc {
			margin-top: 10px;
		}
		.acc summary {
			list-style: none;
			cursor: pointer;
			padding: var(--gap);
			border-radius: var(--radius);
			border:1px solid var(--line-soft);
			background: var(--theme-green);
            color: #fff;
            font-size: 1rem;
            text-align: center;
			outline:none;
		}

        .acc summary:hover {
			background: var(--card);
            color: var(--theme-green);
            border: 1px solid var(--theme-green);
        }

		.acc[open] summary {
			box-shadow: inset 0 -2px 0 rgba(124,58,237,0.08);
		}

		.acc p {
			margin: 8px 12px;
			color: var(--muted);
		}





		.works {
			display: grid;
			grid-template-columns: repeat(2,1fr);
			gap: 10px;
			margin-top: 12px
		}

		.work {
			background: rgba(255,255,255,0.02);
			padding: 10px;
			border-radius: 10px;
			font-size: 0.95rem;
		}

		.work small {
			display: block;
			color: var(--muted);
			margin-top: 6px;
			font-size :0.85rem
		}




		.fineprint {
			color: var(--muted);
			font-size: 0.85rem;
			margin-top: var(--gap);
		}


		



		/* MOBILE OVERRIDES */
		@media (max-width: 960px) {
			.site {
				width: 90%;
				grid-template-columns: 1fr;
				padding-bottom: 40px;
			}
			section {
				width: 90%;
				margin: 0;
				text-align: justify;
			}
			p {
				margin: 0;
				line-height: 1.4;
			}
			aside {
				position: static;
			}
			.works {
				grid-template-columns: 1fr;
			}
		}

		@media (max-width: 620px) {
			.site {
				width: 90%;
				padding: 3px;
			}
			section {
				width: 100%;
				margin: 1rem 0;
			}
			.hero {
        		flex-direction: column; 
       			gap: 0;
        		padding: 0;
        		overflow: hidden; 
    		}

    		.hero img {
        		width: 100%;
        		height: 250px;
        		border-radius: var(--radius) var(--radius) 0 0; 
        		border: none;
        		border-bottom: 1px solid var(--accent);
    		}

    		.hero__text {
        		padding: var(--gap); 
        		text-align: left;
    		}

    		.hero__text h1 {
        		font-size: 1.4rem;
        		margin-top: 0;
    		}
		}