/* =========================================
	 Ruskells Global Styles (Light Theme)
	 Single source of truth for shared styles
	 ========================================= */

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

html, body { overflow-x: hidden; }

body {
	font-family: 'Poppins', sans-serif;
	background: #FAFAFA;
	color: #1a1a1a;
	font-weight: 300;
}

/* Scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #880016; }

/* Custom Cursor */
@media (pointer: fine) { * { cursor: none; } }
.cursor {
	width: 24px; height: 24px;
	border: 1.5px solid #880016;
	border-radius: 50%;
	position: fixed;
	pointer-events: none;
	z-index: 9999;
	transition: transform 0.15s ease-out, background 0.2s ease, opacity 0.3s ease;
	transform: translate(-50%, -50%);
	opacity: 0;
	will-change: left, top, transform;
}
.cursor.visible { opacity: 1; }
.cursor-dot {
	width: 5px; height: 5px;
	background: #880016;
	border-radius: 50%;
	position: fixed;
	pointer-events: none;
	z-index: 10000;
	transform: translate(-50%, -50%);
	opacity: 0;
	will-change: left, top;
}
.cursor-dot.visible { opacity: 1; }
.cursor.hover {
	transform: translate(-50%, -50%) scale(1.5);
	background: rgba(136, 0, 22, 0.15);
	border-color: #880016;
}
@media (hover: none), (pointer: coarse) {
	.cursor, .cursor-dot { display: none !important; }
	* { cursor: auto !important; }
}

/* Scroll Progress */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	background: linear-gradient(90deg, #880016, #F43F5E, #D4A853);
	z-index: 9999;
	width: 0%;
}

/* Noise Overlay */
.noise::before {
	content: '';
	position: fixed;
	inset: 0;
	background: url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
	opacity: 0.02;
	pointer-events: none;
	z-index: 9998;
}

/* Line Accent */
.line-accent { width: 60px; height: 2px; background: #880016; }

/* Reveal Animation */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }

/* Service Card Hover */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
	content: '';
	position: absolute; top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(135deg, rgba(136,0,22,0.08) 0%, transparent 50%);
	opacity: 0; transition: opacity 0.5s ease;
}
.service-card:hover::before { opacity: 1; }
.service-card .service-num { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
.service-card:hover .service-num { color: #880016; transform: translateX(10px); }

/* Image Hover */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.7s ease; }
.img-zoom:hover img { transform: scale(1.05); }

/* Stats Counter */
.stat-num { font-variant-numeric: tabular-nums; }

/* Corner Brackets */
.corner-brackets { position: relative; }
.corner-brackets::before,
.corner-brackets::after {
	content: '';
	position: absolute;
	width: 30px; height: 30px;
	border-color: #880016;
	opacity: 0;
	transition: all 0.4s ease;
}
.corner-brackets::before { top: -8px; left: -8px; border-top: 1px solid; border-left: 1px solid; }
.corner-brackets::after { bottom: -8px; right: -8px; border-bottom: 1px solid; border-right: 1px solid; }
.corner-brackets:hover::before,
.corner-brackets:hover::after { opacity: 1; }

/* Navbar */
#navbar { background: #880016; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: none; }
#navbar.scrolled { background: #880016; box-shadow: 0 4px 20px rgba(136, 0, 22, 0.3); }

/* Mobile Menu */
#mobile-menu { transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
#mobile-menu.active { transform: translateX(0); }

/* Geometric Backgrounds - Flowy */
.geo-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.geo-shape { position: absolute; opacity: 0.08; }
.geo-square {
	width: 200px; height: 200px; border: 1px solid rgba(136, 0, 22, 0.4);
	border-radius: 61% 39% 70% 30% / 51% 65% 35% 49%;
	animation: morphBlob 25s linear infinite alternate;
}
@keyframes morphBlob {
	0% { border-radius: 61% 39% 70% 30% / 51% 65% 35% 49%; transform: rotate(0deg); }
	100% { border-radius: 39% 61% 30% 70% / 65% 35% 49% 51%; transform: rotate(180deg); }
}
.geo-circle {
	width: 300px; height: 300px; border: 1px solid rgba(244, 63, 94, 0.3);
	border-radius: 50%; animation: floatCircle 25s ease-in-out infinite;
}
@keyframes floatCircle { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(15px,-20px) scale(1.02);} }
.geo-ring {
	width: 150px; height: 150px; border: 1px solid rgba(136, 0, 22, 0.3);
	border-radius: 50%; animation: pulseRing 6s ease-in-out infinite;
}
@keyframes pulseRing { 0%,100%{transform:scale(1); opacity:0.15;} 50%{transform:scale(1.1); opacity:0.05;} }
.geo-lines {
	width: 400px; height: 400px; background: radial-gradient(circle, rgba(136,0,22,0.05) 2px, transparent 2.5px);
	background-size: 30px 30px; animation: pulseDots 10s ease-in-out infinite;
}
@keyframes pulseDots { 0%,100%{opacity:0.3;} 50%{opacity:0.6;} }
.geo-dot {
	width: 8px; height: 8px; background: rgba(212, 168, 83, 0.6);
	border-radius: 50%; filter: blur(1px); animation: floatDot 20s ease-in-out infinite;
}
@keyframes floatDot { 0%,100%{transform:translateY(0); opacity:0.4;} 50%{transform:translateY(-50px); opacity:0.1;} }
.geo-triangle {
	width: 150px; height: 150px; background: rgba(136, 0, 22, 0.03);
	border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	border: none; animation: floatOrganic 20s ease-in-out infinite alternate;
}
@keyframes floatOrganic {
	0% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: rotate(0deg) translateY(0); }
	100% { border-radius: 60% 40% 30% 70% / 60% 40% 50% 50%; transform: rotate(20deg) translateY(-20px); }
}
.geo-grid {
	width: 300px; height: 300px; background-image: radial-gradient(rgba(136, 0, 22, 0.1) 1px, transparent 1px);
	background-size: 40px 40px; animation: fadeGrid 10s ease-in-out infinite;
}
@keyframes fadeGrid { 0%,100%{opacity:0.2;} 50%{opacity:0.1;} }
.geo-hexagon {
	width: 120px; height: 69px; background: transparent; position: relative;
	animation: rotateHex 45s linear infinite;
}
.geo-hexagon::before, .geo-hexagon::after {
	content: ''; position: absolute; width: 0;
	border-left: 60px solid transparent; border-right: 60px solid transparent;
}
.geo-hexagon::before { bottom: 100%; border-bottom: 35px solid rgba(212, 168, 83, 0.15); }
.geo-hexagon::after { top: 100%; border-top: 35px solid rgba(212, 168, 83, 0.15); }
@keyframes rotateHex { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }
.geo-diamond {
	width: 80px; height: 80px; border: 1px solid rgba(136, 0, 22, 0.3);
	transform: rotate(45deg); animation: floatDiamond 12s ease-in-out infinite;
}
@keyframes floatDiamond { 0%,100%{transform:rotate(45deg) translateY(0);} 50%{transform:rotate(45deg) translateY(-30px);} }
.geo-arc {
	width: 200px; height: 100px; border: 2px solid rgba(212, 168, 83, 0.15);
	border-bottom: none; border-radius: 200px 200px 0 0;
	animation: pulseArc 6s ease-in-out infinite;
}
@keyframes pulseArc { 0%,100%{transform:scale(1); opacity:0.15;} 50%{transform:scale(1.1); opacity:0.08;} }
.geo-cross {
	width: 60px; height: 60px; position: relative;
	animation: rotateCross 25s linear infinite;
}
.geo-cross::before, .geo-cross::after { content: ''; position: absolute; background: rgba(212, 168, 83, 0.4); }
.geo-cross::before { width: 100%; height: 1px; top: 50%; left: 0; }
.geo-cross::after { width: 1px; height: 100%; left: 50%; top: 0; }
@keyframes rotateCross { from{transform:rotate(0deg);} to{transform:rotate(360deg);} }

/* Elegant Typography Utility */
.text-elegant { font-family: 'Poppins', sans-serif; font-weight: 400; letter-spacing: 0.02em; }

/* Keep footer dark with white text */
footer.bg-gray-900,
footer.bg-dark-900 { background-color: #111111 !important; }
footer .text-white { color: #FFFFFF !important; }
footer .text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; }
footer .text-white\/60 { color: rgba(255, 255, 255, 0.6) !important; }
footer .text-white\/40 { color: rgba(255, 255, 255, 0.4) !important; }

/* Ensure navbar always has white text on burgundy background */
#navbar { background: #880016 !important; }
#mobile-menu { background: #111111 !important; }
#navbar .text-white,
#navbar [class*="text-white"],
#mobile-menu .text-white,
#mobile-menu [class*="text-white"] { color: #FFFFFF !important; }
#navbar .text-white\/80,
#mobile-menu .text-white\/80 { color: rgba(255, 255, 255, 0.8) !important; }
#navbar .text-white\/60,
#mobile-menu .text-white\/60 { color: rgba(255, 255, 255, 0.6) !important; }
#navbar .text-white\/40,
#mobile-menu .text-white\/40 { color: rgba(255, 255, 255, 0.4) !important; }
#navbar .border-white\/20,
#mobile-menu .border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; }

/* Sidebar Widget */
.sidebar-widget {
	position: fixed; right: 20px; top: 50%; transform: translateY(-50%);
	z-index: 999; display: flex; flex-direction: column; gap: 12px; pointer-events: none;
}
.sidebar-widget a {
	pointer-events: auto; width: 44px; height: 44px; background: rgba(255,255,255,0.9);
	backdrop-filter: blur(5px); border: 1px solid rgba(136,0,22,0.1); border-radius: 50%;
	display: flex; align-items: center; justify-content: center; color: #880016;
	box-shadow: 0 4px 12px rgba(136,0,22,0.08);
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); position: relative;
}
.sidebar-widget a:hover { background: #880016; color: #fff; transform: scale(1.1); box-shadow: 0 8px 20px rgba(136,0,22,0.2); }
.sidebar-widget a::before {
	content: attr(data-label); position: absolute; right: 56px; top: 50%;
	transform: translateY(-50%) translateX(10px); background: #880016; color: #fff;
	padding: 6px 14px; border-radius: 20px; font-size: 11px; font-weight: 500;
	letter-spacing: 0.05em; white-space: nowrap; opacity: 0; pointer-events: none;
	transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.1); text-transform: uppercase;
}
.sidebar-widget a:hover::before { opacity: 1; transform: translateY(-50%) translateX(0); }