/*
	STYLE NOTES - Troubleshooting Guide
	- Global variables: change colors and radius in `:root`.
	- Font stack: replace with your preferred font or include a webfont in the head of `index.html`.
	- If layout shifts occur, check for conflicting box-sizing rules in other CSS files.
*/

:root{
	--bg:#000;
	--muted:#9aa3b2;
	--card:#0f1113;
	--accent:#00b4d8;
	--glass: rgba(255,255,255,0.03);
	--radius:12px;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset and global layout */
*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;background:var(--bg);color:#e6eef6;line-height:1.4;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

/*
	Header / Navigation
	- `.site-header` manages stickiness and backdrop blur. If it overlaps content, adjust z-index.
*/
.site-header{position:sticky;top:0;background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);backdrop-filter:blur(6px);z-index:40}
.nav{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{font-weight:700;color:var(--accent);font-size:1.1rem}
.nav-links{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.nav-links a{color:var(--muted);text-decoration:none;font-size:0.95rem}

/*
	Hero
	- `.hero-inner` is placed above floating visuals via z-index.
	- Adjust `min-height` here to control the hero size.
*/
.hero{position:relative;min-height:68vh;display:flex;align-items:center;overflow:hidden}
.hero-inner{max-width:1200px;margin:0 auto;padding:48px 20px;position:relative;z-index:2}
.hero-title{font-size:clamp(2rem,5vw,4rem);margin:0 0 8px}
.hero-sub{color:var(--muted);margin:0 0 18px}
.hero-cta{display:flex;gap:12px}
.btn{display:inline-block;padding:10px 16px;border-radius:10px;background:var(--accent);color:#001;text-decoration:none;font-weight:600}
.btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#e6eef6}

/*
	Floating icons
	- Animations use CSS keyframes `bob` and `floatAcross`.
	- Per-icon durations/delays are set inline via JS using CSS variables `--duration` and `--delay`.
	- To disable floatAcross, remove the second animation from `.floating-icons .icon`.
*/
.floating-icons{position:absolute;inset:0;pointer-events:none;z-index:1}
.floating-icons .icon{position:absolute;top:10%;opacity:0.95;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6));transition:transform 0.3s linear}

@keyframes bob {
	0%{transform:translateY(0) rotate(0)}
	50%{transform:translateY(-12px) rotate(6deg)}
	100%{transform:translateY(0) rotate(0)}
}

@keyframes floatAcross {
	0%{transform:translateY(0) translateX(-10vw) rotate(0);opacity:0}
	10%{opacity:1}
	100%{transform:translateY(-8vh) translateX(110vw) rotate(360deg);opacity:0}
}

.floating-icons .icon{
	animation-name: bob, floatAcross;
	animation-duration: var(--duration, 12s), var(--duration, 14s);
	animation-delay: var(--delay, 0s), var(--delay, 0s);
	animation-iteration-count: infinite, infinite;
	animation-timing-function: ease-in-out, linear;
}

/*
	Content and cards
	- `.grid` controls columns. For more columns on wide screens, change `grid-template-columns`.
*/
.content{max-width:1200px;margin:30px auto;padding:20px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:18px;border-radius:var(--radius);border:1px solid rgba(255,255,255,0.03)}
.card h2{margin:0 0 8px}
.card p{margin:0 0 12px;color:var(--muted)}
.card-link{color:var(--accent);text-decoration:none;font-weight:600}

.site-footer{max-width:1200px;margin:36px auto;padding:16px;color:var(--muted);text-align:center}

/* Responsive */
@media (max-width:800px){
	.grid{grid-template-columns:1fr}
	.nav-links{display:none}
	.hero-inner{padding:36px 16px}
}

/* helper classes */
.icon.floating{opacity:0.9}