@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root{
	--bg-1: #000000;
	--bg-2: #000000;
	--accent: #6d00ff;
	--accent-2: #9a66ff;
	--glow: rgba(109,0,255,0.28);
	--muted: #e6e1ff;
	--card: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%;max-width:100%;overflow-x:hidden;background-color:var(--bg-1)}
/* Make images and media fluid by default for responsive layouts */
img, picture, video, svg { max-width:100%; height:auto; display:block; }
	body{
	margin:0;
	font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	color: #f6f5ff;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	overflow-y:auto;

	/* defensive fallback: use a blended gradient + image so the background
	   remains dark even in browsers that render pseudo-elements differently. */
	background:
		linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.65)),
		url('/img/null.utils.background.png') center/cover no-repeat;
	background-blend-mode: multiply;
	background-attachment: fixed;
}

/* Render the background via a fixed, full-viewport pseudo-element on the root
   so mobile browsers respect it and it won't create a sideways gutter. */
html::before{
	content: "";
	position:fixed; inset:0; z-index:-3; pointer-events:none;
	background-image: url('/img/null.utils.background.png');
	background-position: center center; background-size: cover; background-repeat: no-repeat;
	-webkit-transform: translateZ(0); transform: translateZ(0);
}

/* Dedicated dark overlay that sits directly above the background image
   but below any page content. This makes the background image darker
   while leaving UI panels and text unaffected. */
html::after{
	content: "";position:fixed;inset:0;z-index:-2;pointer-events:none;
	/* slightly darker (but not black) overlay to deepen the scene */
    background: linear-gradient(rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86));
}

/* Keep the background covering the viewport on narrower screens too (no contain)
   — using the fixed pseudo-element above avoids the earlier gutter and ensures
   the image stays put while scrolling on most devices. */
@media (max-width:900px){
	html::before{ background-position: center center; background-size: cover; }
}

/* No longer hiding the background on very small devices; the background image is forced globally. */

/* animated stars */
body::before{
	content:"";
	position:fixed;inset:0;pointer-events:none;z-index:-1;
	background-image: radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,0.12), transparent),
										radial-gradient(1px 1px at 40% 60%, rgba(255,255,255,0.08), transparent),
										radial-gradient(1px 1px at 80% 30%, rgba(255,255,255,0.06), transparent);
	opacity:0.92;mix-blend-mode:overlay;
}

/* Nebula overlay */
body::after{
	/* nebula tints and subtle glows placed above the background overlay
	   but still behind content (keeps the page darker while retaining
	   colored accents). */
	content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
	background:
		radial-gradient(600px 300px at 10% 20%, rgba(109,0,255,0.06), transparent),
		radial-gradient(500px 250px at 80% 70%, rgba(154,102,255,0.03), transparent);
	mix-blend-mode:normal;opacity:1;backdrop-filter:none;
}

/* twinkling stars animation */
@keyframes twinkle{0%,100%{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.card::before{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none;}

/* stronger hero (polished) */
.hero{padding:68px 0 40px;text-align:center;position:relative;z-index:2}
.hero .product-names{display:inline-block;padding:22px 36px;border-radius:14px;background:linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.36));box-shadow:0 28px 80px rgba(6,4,18,0.75);backdrop-filter: blur(6px);max-width:920px}
.hero .product-names h1{font-size:2.2rem;margin:0;color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));background-clip:text;-webkit-background-clip:text;font-family:'Orbitron', sans-serif;text-shadow:0 6px 28px rgba(109,0,255,0.08)}
.hero .product-names p{margin:8px 0 0;color:var(--muted);font-size:0.98rem;font-family:'Inter',system-ui,Segoe UI,Roboto}
.hero-logo{display:block;margin:0 auto 18px;width:220px;max-width:36%;height:auto;filter:drop-shadow(0 18px 36px rgba(111,43,214,0.26));}

/* cards - professional list style with watermark */
.cards{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;position:relative}
.cards::after{content:"";position:absolute;left:50%;top:48%;transform:translate(-50%,-48%);width:min(720px,90vw);height:min(420px,60vh);background:url('../img/null.utils.background.png') center/contain no-repeat;opacity:0.02;filter:blur(2px) saturate(140%);pointer-events:none}
.card{position:relative;overflow:visible;background:linear-gradient(180deg, rgba(109,0,255,0.02), rgba(0,0,0,0.56));border-radius:16px;padding:20px;display:flex;gap:18px;align-items:center;border:1px solid rgba(109,0,255,0.04);box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.card:hover{transform:translateY(-8px);transition:transform 220ms ease, box-shadow 220ms ease;box-shadow:0 40px 100px rgba(0,0,0,0.7), 0 0 60px var(--glow)}
.card h3{margin:0 0 6px;color:#fff;font-weight:700;font-size:1.05rem;text-shadow:0 6px 28px rgba(109,0,255,0.08)}
.card .muted{margin:0 0 8px;color:var(--muted)}

/* thumbnail */
.thumb{width:84px;height:84px;flex:0 0 84px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;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)}
.thumb img{width:64px;height:64px;object-fit:contain}

.card-content{flex:1}
.card-meta{display:flex;align-items:center;gap:12px;justify-content:space-between}
.badge{padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#111;font-weight:700;font-size:0.85rem}

/* product badges */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;font-weight:700;font-size:0.85rem}

/* bigger download CTA */
.download .btn.large{font-size:1.05rem;padding:16px 34px;border-radius:12px}

/* responsive tweaks */
@media(max-width:820px){
	.hero .product-names h1{font-size:1.6rem}
	.cards{grid-template-columns:1fr}
}


.container{max-width:1100px;margin:0 auto;padding:24px}

.site-header{position:relative;padding-bottom:40px;z-index:2}
.nav{display:flex;align-items:center;justify-content:space-between}
.brand{font-size:1.2rem;color:var(--accent);text-decoration:none;font-weight:700}
.nav nav{display:flex;align-items:center;gap:18px}
.nav nav a{color:var(--muted);text-decoration:none;margin-left:0}
.nav nav a:hover{color:#fff}
.nav nav .nav-dashboard{display:inline-flex;align-items:center;justify-content:center;min-width:140px;padding:10px 16px;border-radius:10px;border:1px solid rgba(162,106,255,0.38);background:linear-gradient(90deg, rgba(109,0,255,0.22), rgba(154,102,255,0.22));text-align:center;font-weight:700}

.hero{padding:56px 0;text-align:center}
.hero h1{font-size:2.2rem;margin:0 0 8px;color:transparent;background:linear-gradient(90deg,var(--accent),var(--accent-2));background-clip:text;-webkit-background-clip:text}
.hero p{color:var(--muted);margin:0 0 20px}
.hero-ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.hero-ctas .btn{margin:6px}

.btn{display:inline-block;padding:16px 36px;border-radius:10px;text-decoration:none;color:#fff;background:transparent;border:1px solid rgba(255,255,255,0.12);cursor:pointer;font-size:1.15rem;font-weight:600}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;border:none;box-shadow:0 6px 18px rgba(111,43,214,0.18)}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid rgba(109,0,255,0.18)}
.btn.large{padding:18px 40px;font-weight:700;font-size:1.25rem}
.btn.small{padding:10px 18px;border-radius:8px;font-size:1rem}

/* UI polish overrides: nicer hover, focused states and special avatars CTA */
.btn{transition:transform .18s ease,box-shadow .18s ease,filter .12s ease}
.btn.primary{box-shadow:0 10px 40px rgba(109,0,255,0.12), inset 0 -2px 6px rgba(0,0,0,0.12)}
.btn.primary:hover{transform:translateY(-4px);box-shadow:0 36px 90px rgba(109,0,255,0.18);filter:brightness(1.03)}
.btn:active{transform:translateY(-1px)}

/* Avatars CTA — standout rounded pill with icon and stronger glow */
.avatars-cta{padding:16px 40px;border-radius:999px;font-weight:800;letter-spacing:0.4px;background:linear-gradient(120deg,#ff6de9 0%, var(--accent) 45%, var(--accent-2) 100%);box-shadow:0 14px 50px rgba(109,0,255,0.18), inset 0 -3px 10px rgba(0,0,0,0.12);display:inline-flex;align-items:center;gap:10px}
.avatars-cta::before{content:"\1F47E";font-size:1.05rem;line-height:1;display:inline-block;margin-right:6px;transform:translateY(1px)}
.avatars-cta:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 48px 140px rgba(109,0,255,0.24)}
.avatars-cta:focus{outline:3px solid rgba(255,109,240,0.18);outline-offset:4px}

/* Avatars CTA card (themed, purple) */
.avatars-card { max-width:920px; margin:22px auto; display:flex; gap:18px; align-items:center; padding:18px; border-radius:12px; background:linear-gradient(135deg, rgba(6,8,18,0.65), rgba(8,12,28,0.55)); color:#fff; box-shadow:0 12px 40px rgba(6,8,20,0.6); border:1px solid rgba(109,0,255,0.06); }
.avatars-card .left { flex:0 0 72px; display:flex; align-items:center; justify-content:center; }
.avatars-card .avatars-icon { width:64px; height:64px; border-radius:10px; background:linear-gradient(135deg,var(--accent), var(--accent-2)); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 28px rgba(7,6,20,0.45); }
.avatars-card h3 { margin:0 0 6px; font-size:1.12rem; line-height:1.1; color:#fff; font-weight:700; }
.avatars-card p { margin:0; color:var(--muted); font-size:0.95rem; }
.avatars-card .actions { margin-left:auto; display:flex; gap:10px; align-items:center; }
.avatars-card .btn.primary { padding:10px 16px; border-radius:10px; font-weight:700; }
.avatars-card .btn.ghost { padding:8px 14px; border-radius:10px; }
.avatars-card .center { max-width:620px; }
@media (max-width:720px) { .avatars-card { flex-direction:column; text-align:center; gap:12px; } .avatars-card .actions { margin-left:0; width:100%; justify-content:center; } }

/* small visual tweak to ensure contrast inside cards */
.avatars-card .avatars-icon svg { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.3)); }

/* Highlight variant to draw attention (subtle and on-theme) */

.avatars-card.highlight{position:relative;overflow:visible;border:1px solid rgba(124,58,237,0.22) !important;box-shadow:0 50px 140px rgba(124,58,237,0.18), 0 18px 48px rgba(0,0,0,0.7);transform:translateY(-6px);z-index:50;background:linear-gradient(180deg, rgba(124,58,237,0.06), rgba(6,8,18,0.72));padding:18px}
.avatars-card.highlight::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:12px;border-radius:8px;background:linear-gradient(180deg,var(--accent),var(--accent-2));box-shadow:0 10px 26px rgba(109,0,255,0.22);z-index:60}
.avatars-card.highlight::after{content:"";position:absolute;right:-40px;top:-24px;width:min(300px,30vw);height:min(160px,20vh);background:radial-gradient(ellipse at center, rgba(124,58,237,0.18), rgba(109,0,255,0.08) 40%, transparent 60%);filter:blur(18px);pointer-events:none;opacity:0.95;z-index:10}

/* soft pulse animation for gentle attention */
@keyframes avatars-card-pulse{0%{box-shadow:0 30px 84px rgba(109,0,255,0.10)}50%{box-shadow:0 46px 140px rgba(109,0,255,0.18)}100%{box-shadow:0 30px 84px rgba(109,0,255,0.10)}}
.avatars-card.highlight{animation:avatars-card-pulse 6s ease-in-out infinite}

/* subtle shimmer sweep across the title (runs once) */
@keyframes shimmer-sweep{0%{transform:translateX(-140%) skewX(-20deg);opacity:0}40%{opacity:1}100%{transform:translateX(140%) skewX(-20deg);opacity:0}}
.shimmer{position:relative;display:inline-block;overflow:hidden}
.shimmer::after{content:"";position:absolute;left:-140%;top:0;bottom:0;width:60%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.06),transparent);transform:skewX(-20deg);animation:shimmer-sweep 2.6s ease-in-out 0.8s 1 forwards}

@media (prefers-reduced-motion: reduce){
	.avatars-card.highlight, .avatars-card.highlight::before, .avatars-card.highlight::after { animation: none }
	.shimmer::after{animation:none;opacity:0}
}

/* Featured badge inside the card */
.badge-feature{display:inline-block;padding:6px 10px;border-radius:999px;background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#fff;font-weight:700;font-size:0.82rem;margin-right:8px;vertical-align:middle;box-shadow:0 8px 30px rgba(109,0,255,0.10)}

/* emphasize the primary button slightly more when card highlighted */
.avatars-card.highlight .btn.primary.avatars-cta{box-shadow:0 18px 60px rgba(109,0,255,0.16);transform:translateY(-2px)}

@media (prefers-reduced-motion: reduce){
	.avatars-card.highlight, .avatars-card.highlight::before { animation: none; transition: none }
}

/* Slight improvements to card visuals and badges for better contrast */
.card{transition:transform .22s ease,box-shadow .22s ease,filter .18s ease}
.card:hover{transform:translateY(-10px);box-shadow:0 48px 120px rgba(0,0,0,0.66),0 0 90px var(--glow)}
.badge{background:linear-gradient(90deg,var(--accent-2),var(--accent));color:#fff;text-transform:none;padding:10px 20px;font-size:1.05rem;border-radius:8px;font-weight:600}
.thumb{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 22px rgba(0,0,0,0.5)}

/* Improve general text contrast and spacing */
.card-content{line-height:1.45}
.muted{color:#dcd8ff}


/* Accessibility helpers */
.visually-hidden{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px}
.form-field{display:block;margin-bottom:10px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(0,0,0,0.45);color:#fff;font-size:1rem}
.form-field label{display:block;margin-bottom:6px;font-weight:600;color:var(--muted)}
.form-help{font-size:0.92rem;color:var(--muted)}

/* stronger focus for keyboard users */
.btn:focus,.form-field input:focus,.form-field textarea:focus{outline:3px solid rgba(109,0,255,0.22);outline-offset:2px;box-shadow:0 6px 18px rgba(111,43,214,0.08)}

/* higher contrast buttons for accessibility */
.btn.high-contrast{background:#2a005a;border:none;color:#fff}

/* responsive tweaks for forms */
@media (max-width:600px){
	.form-field input,.form-field textarea{font-size:1.05rem;padding:14px}
	.hero-logo{max-width:50%}
}

.features .intro{margin-bottom:20px;text-align:center}
.tabs{display:flex;justify-content:center;gap:12px;margin-bottom:8px}
.tabs .btn{padding:8px 14px;border-radius:999px}
.tabs .btn.large{padding:14px 28px;border-radius:12px;font-size:1.05rem}
.tabs .btn:focus{outline:3px solid rgba(109,0,255,0.22);outline-offset:3px}
.features .cards{display:grid;grid-template-columns:minmax(320px,650px);justify-content:center;gap:40px;margin-bottom:48px}
.features .card{background:var(--card);border-radius:16px;padding:48px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.02),0 8px 30px rgba(11,6,25,0.6);min-height:600px;max-width:650px;display:block}
.features .card h3{Margin:0 0 12px;color:var(--accent);font-size:2rem}
.features .card .thumb{margin:0 auto 24px;min-height:300px;display:flex;align-items:center;justify-content:center;width:100%;max-width:560px;border-radius:16px;padding:24px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06)}
.features .card .thumb img{width:min(360px,88%);max-height:240px;height:auto;object-fit:contain}
.features .muted{color:var(--muted);margin:0 0 16px;font-size:1.1rem;line-height:1.6}
.features .card ul{padding-left:24px;margin:12px 0 20px;color:var(--muted);font-size:1.05rem}
.features .card ul li{margin-bottom:8px}
.features .card-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.features .card-cta .btn{min-width:220px;text-align:center}
.features .card-cta .btn.primary{min-width:260px}
.features .card-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.badge{padding:8px 16px;font-size:1rem;border-radius:6px}

.download{text-align:center;padding:40px 0}

.reviews{padding:60px 0}
.reviews h2{text-align:center;margin-bottom:12px}
.reviews>p{text-align:center;color:var(--muted);margin-bottom:40px}
.reviews-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px;margin-bottom:48px}
.review-card{background:var(--card);border-radius:12px;padding:24px;border:1px solid rgba(109,0,255,0.1);box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.review-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--accent)}
.review-info h4{margin:0;color:#fff;font-size:1.1rem}
.review-stars{color:#ffa500;font-size:1.2rem;margin-bottom:4px}
.review-purchased{font-size:0.85rem;color:rgba(109,0,255,0.9);font-style:italic;margin-top:4px}
.review-text{color:var(--muted);line-height:1.6;margin:0}
.review-date{font-size:0.85rem;color:rgba(255,255,255,0.4);margin-top:12px}
.review-form-container{background:rgba(109,0,255,0.05);border:2px solid rgba(109,0,255,0.15);border-radius:12px;padding:32px;margin-top:40px}
.review-form-container h3{margin:0 0 8px;color:var(--accent)}
.review-login-prompt{background:rgba(109,0,255,0.03);border-radius:12px;padding:24px}

.contact-form{display:grid;gap:8px;max-width:700px;margin-top:12px}
.contact-form input,.contact-form textarea{padding:12px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}

.site-footer{border-top:1px solid rgba(255,255,255,0.03);padding:24px 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1fr 160px 220px;gap:18px}
.footer-grid h4{margin:0 0 8px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid a{color:var(--muted);text-decoration:none}
.copyright{text-align:center;margin-top:18px;color:var(--muted);font-size:0.9rem}

@media(max-width:700px){
	.footer-grid{grid-template-columns:1fr}
	/* show nav links stacked on small screens (no JS toggle) */
	.nav nav{display:flex;flex-direction:column;gap:8px}
	.hero h1{font-size:1.6rem}
	.nav{position:relative}
	.nav nav{position:static;background:transparent;padding:0;display:flex;flex-direction:column;gap:8px;border-radius:0}
	.nav nav a{margin:0;padding:10px 6px;border-radius:6px;color:var(--muted);background:transparent}
	.nav nav .nav-dashboard{width:100%;justify-content:center}
	/* avoid fixed background on small devices for performance */
	body{background-attachment:scroll}
}

/* Mobile-specific background and decoration adjustments to prevent horizontal overflow */
@media (max-width:600px){
	body{
		/* make the background image fit the width and avoid creating layout overflow */
		background-size: contain !important;
		background-position: top center !important;
		background-repeat: no-repeat !important;
		background-attachment: scroll !important;
	}

	/* remove large decorative watermark and highlight glows on small screens */
	.cards::after, .avatars-card.highlight::after { display: none !important; }

	/* reduce any overly wide containers padding so they don't cause overflow */
	.container { padding-left: 14px; padding-right: 14px; }

	/* ensure hero logo scales down nicely on very small devices */
	.hero-logo { width: 60%; max-width:220px; }
}

/* Extra strict mobile rules to eliminate any horizontal overflow and improve layout */
@media (max-width:600px){
	/* make sure containers never exceed the viewport */
	.container{max-width:100%;padding-left:14px;padding-right:14px}

	/* stack and scale hero box so it never overflows */
	.hero{padding:28px 0}
	.hero .product-names{display:block;width:100%;max-width:100%;box-sizing:border-box;padding:18px;margin:0 auto;border-radius:12px}
	.hero .product-names h1{font-size:1.4rem;line-height:1.12}
	.hero .product-names p{font-size:1rem}

	/* make large CTAs easy to tap */
	.btn.large{display:block;width:100%;padding:14px 16px;border-radius:12px;font-size:1.05rem}
	.hero-ctas .btn{width:100%;box-sizing:border-box}

	/* stack nav links and increase tap targets */
	.nav nav{display:flex;flex-direction:column;gap:8px}
	.nav nav a{display:block;padding:12px;border-radius:8px}

	/* reduce heavy card hover effects on mobile to avoid layout shifts */
	.card:hover{transform:none;box-shadow:0 8px 28px rgba(0,0,0,0.6)}

	/* ensure grid collapses to single column */
	.cards{grid-template-columns:1fr}

	/* remove decorative elements that can cause overflow */
	.cards::after, .avatars-card.highlight::after { display:none }

	/* footer readability */
	.footer-grid{grid-template-columns:1fr;gap:12px}

	/* final safety net: prevent any element from forcing horizontal scroll */
	html,body{overflow-x:hidden}
	img, iframe, video { max-width:100%;height:auto }
}

/* Footer styles */
.site-footer {
	position: relative;
	z-index: 9999;
	display: block;
	visibility: visible;
	width: 100%;
	min-height: 200px;
	background: rgba(10,5,20,0.95);
	padding: 48px 0 24px;
	margin-top: 80px;
	color: #e6e1ff;
	backdrop-filter: blur(10px);
}

.footer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px;
	margin-bottom: 32px;
}

.site-footer h3 {
	color: #fff;
	font-size: 1.5rem;
	margin: 0 0 12px 0;
	font-family: 'Orbitron', sans-serif;
}

.site-footer h4 {
	color: var(--accent-2);
	font-size: 1rem;
	margin: 0 0 12px 0;
	font-family: 'Orbitron', sans-serif;
}

.site-footer p {
	margin: 0;
	line-height: 1.6;
	opacity: 0.85;
}

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

.site-footer ul li {
	margin-bottom: 8px;
}

.site-footer ul li a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.2s;
}

.site-footer ul li a:hover {
	color: var(--accent-2);
}

.subscribe {
	display: flex;
	gap: 8px;
}

.subscribe input[type="email"] {
	flex: 1;
	padding: 8px 12px;
	border: 1px solid rgba(255,255,255,0.1);
	background: rgba(255,255,255,0.05);
	color: #fff;
	border-radius: 6px;
	font-family: 'Inter', sans-serif;
}

.subscribe input[type="email"]:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--glow);
}

.copyright {
	text-align: center;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,0.05);
	font-size: 0.9rem;
	opacity: 0.7;
}

/* Mobile white-box fix: ensure sections and footers are transparent on small screens
	 so the fixed background image remains visible while scrolling. This avoids any
	 accidental white panels or large rounded white backgrounds appearing under the
	 hero when the next section peeks in during scroll. */
@media (max-width:720px){
	/* target common structural elements that might default to white */
	main, section, .section, .products, #products, .site-content, .panel, .content {
		background: transparent !important;
		background-color: transparent !important;
		border-radius: 0 !important;
	}

	/* containers should not introduce a white backing */
	.container { background: transparent !important; }

	/* footer safety: keep subtle divider but remove solid white backgrounds */
	footer, .site-footer { background: transparent !important; border-top-color: rgba(255,255,255,0.03) !important; }

	/* If there are any accidental white blocks added inline or by other CSS, hide them */
	[style*="background:#fff"]{ background: transparent !important; }
	[style*="background:white"]{ background: transparent !important; }
}