*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	--teal: #5ecece;
	--teal-light: #a8ecec;
	--teal-dark: #3aadad;
	--bg-deep: #0e1c2a;
	--white: #ffffff;
	--white-80: rgba(255,255,255,0.80);
	--white-08: rgba(255,255,255,0.08);
	--glass-border:rgba(255,255,255,0.22);
	--shadow: 0 8px 48px rgba(0,0,0,0.35);
	--radius: 20px;
	--ff-head: "Cormorant Garamond", Georgia, serif;
	--text-muted:  #9ecece;
	--margin: 20px;
	--padding: 20px;
	
	scroll-behavior: smooth;
	min-height: 100vh;
	font-family: "Raleway", sans-serif;
	font-weight: 400;
	color: #e8f4f4;
	background-color: #0e1c2a;
	line-height: 1.7;
	overflow-x: hidden;
	position: relative;
}

strong {
	color: var(--teal-light);
	font-weight: 600;
}

.tagline {
	font-family: var(--ff-head);
	font-style: italic;
	font-size: clamp(1.1rem, 2.5vw, 1.35rem);
	color: var(--teal-light);
	letter-spacing: 0.02em;
}

.subtagline {
	font-size: 0.95rem;
	font-weight: 300;
	color: var(--white-80);
	letter-spacing: 0.03em;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background-image:
	  repeating-linear-gradient(
	    135deg,
	    transparent,
	    transparent 60px,
	    rgba(94,206,206,0.025) 60px,
	    rgba(94,206,206,0.025) 61px
	  );
	pointer-events: none;
}

#bg-animation {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.bubble {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	animation: floatUp linear infinite;
}

#b1 {
	width: 420px; height: 420px;
	bottom: -200px; left: 8%;
	background: radial-gradient(circle at 40% 40%, rgba(94,206,206,0.18), transparent 70%);
	animation-duration: 22s; animation-delay: 0s;
}
#b2 {
	width: 260px; height: 260px;
	bottom: -130px; left: 35%;
	background: radial-gradient(circle at 50% 40%, rgba(94,206,206,0.14), transparent 70%);
	animation-duration: 17s; animation-delay: 4s;
}
#b3 {
	width: 340px; height: 340px;
	bottom: -170px; right: 10%;
	background: radial-gradient(circle at 40% 40%, rgba(168,236,236,0.12), transparent 70%);
	animation-duration: 26s; animation-delay: 2s;
}
#b4 {
	width: 160px; height: 160px;
	bottom: -80px; left: 55%;
	background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08), transparent 70%);
	animation-duration: 19s; animation-delay: 7s;
}
#b5 {
	width: 500px; height: 500px;
	bottom: -250px; left: -80px;
	background: radial-gradient(circle at 40% 60%, rgba(58,173,173,0.10), transparent 65%);
	animation-duration: 30s; animation-delay: 1s;
}
#b6 {
	width: 200px; height: 200px;
	bottom: -100px; right: 28%;
	background: radial-gradient(circle at 50% 40%, rgba(94,206,206,0.10), transparent 70%);
	animation-duration: 21s; animation-delay: 9s;
}
#b7 {
	width: 280px; height: 280px;
	bottom: -140px; left: 72%;
	background: radial-gradient(circle at 50% 40%, rgba(168,236,236,0.09), transparent 70%);
	animation-duration: 24s; animation-delay: 5s;
}

@keyframes floatUp {
	0%   { transform: translateY(0)   scale(1);    opacity: 0; }
	8%   { opacity: 1; }
	90%  { opacity: 0.85; }
	100% { transform: translateY(-110vh) scale(1.1); opacity: 0; }
}

@keyframes logoPulse {
		0%, 100% { filter: drop-shadow(0 4px 24px rgba(94,206,206,0.35)); }
		50%       { filter: drop-shadow(0 4px 36px rgba(94,206,206,0.60)); }
	}

.glass {
	background: rgba(255,255,255,0.10);
	backdrop-filter: blur(18px) saturate(1.4);
	-webkit-backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

section {
	max-width: 900px;
	margin: var(--margin) auto;
	padding: var(--padding);
	h2 {
		text-decoration: underline;
		font-family: var(--ff-head);
		font-size: clamp(1.8rem, 4vw, 2.6rem);
		font-weight: 600;
		color: var(--white);
		margin-bottom: 18px;
		letter-spacing: 0.02em;
	}
	h3 {
		font-family: var(--ff-head);
		font-style: italic;
		font-size: 1.2rem;
		color: var(--teal-light);
		margin-bottom: 14px;
		font-weight: 400;
	}
}

section#start {
	text-align: center;
	#logo {
		height: 200px;
		animation: logoPulse 5s ease-in-out infinite;
	}
	h1 {
		font-family: var(--ff-head);
		font-size: clamp(3rem, 8vw, 5.2rem);
		font-weight: 700;
		letter-spacing: 0.06em;
		color: var(--white);
		line-height: 1.1;
		text-shadow: 0 2px 24px rgba(94,206,206,0.4);
	}
	#cta {
		display: inline-block;
		margin-top: 10px;
		padding: 10px 30px;
		background: linear-gradient(135deg, var(--teal-dark), var(--teal));
		color: var(--bg-deep);
		font-family: var(--ff-body);
		font-weight: 750;
		font-size: 0.66rem;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		text-decoration: none;
		border-radius: 60px;
		box-shadow: 0 4px 28px rgba(94,206,206,0.45);
		transition: box-shadow 0.3s, transform 0.3s, background 0.3s;
		position: relative;
		overflow: hidden;
	}
	#cta:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 40px rgba(94,206,206,0.65);
	}
}

section#contact {
	display: flex;
	gap: var(--margin);
	#portrait {
		text-align: center;
		color: var(--text-muted);
		img {
			border-radius: var(--radius);
			flex: 1;
			width: 200px;
		}
	}
	#contact-details {
		padding: 0px;
	}
	.contact-links {
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
		justify-content: center;
	}
	.contact-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 14px 28px;
		background: var(--white-08);
		border: 1px solid var(--glass-border);
		border-radius: 60px;
		text-decoration: none;
		color: var(--text);
		font-size: 0.95rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		transition: background 0.25s, transform 0.25s, border-color 0.25s;
	}
	.contact-item:hover {
		background: rgba(94,206,206,0.15);
		border-color: var(--teal);
		transform: translateY(-1px);
	}
}

footer {
	text-align: center;
	font-size: 0.82rem;
	font-weight: 300;
	color: var(--text-muted);
	letter-spacing: 0.05em;
	border-top: 1px solid var(--white-08);
}

@media (max-width: 900px) {
	section#start {
		margin-top: 0px;
	}
	section#contact {
		flex-direction: column;
		flex-direction: column-reverse;
		#portrait img {
			width: 75%;
		}
	}
}