/* 
 * Resources Web Theme CSS 
 * Modern, dynamic, and premium design inspired by high-quality corporate websites.
 */

:root {
	--color-primary: #0A192F; /* Deep blue/navy */
	--color-secondary: #00A8E8; /* Bright accent blue */
	--color-accent: #00E5FF; /* Cyan accent for glows/hover */
	--color-text: #333333;
	--color-text-light: #666666;
	--color-bg: #FFFFFF;
	--color-bg-alt: #F4F7F6;
	--color-white: #FFFFFF;
	--font-primary: 'Inter', 'Noto Sans JP', sans-serif;
	--transition-smooth: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
	--shadow-sm: 0 4px 6px rgba(0,0,0,0.05);
	--shadow-md: 0 10px 20px rgba(0,0,0,0.08);
	--shadow-lg: 0 20px 40px rgba(0,0,0,0.12);
	--border-radius: 8px;
}

/* Reset & Basics */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
	font-family: var(--font-primary);
	color: var(--color-text);
	background-color: var(--color-bg);
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}
a { color: var(--color-primary); text-decoration: none; transition: var(--transition-smooth); }
a:hover { color: var(--color-secondary); }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.text-center { text-align: center; }

/* Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: 1.3; color: var(--color-primary); margin-bottom: 1rem; }
p { margin-bottom: 1.5rem; }

/* Buttons */
.btn {
	display: inline-block;
	padding: 0.8rem 2rem;
	border-radius: 50px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	cursor: pointer;
	transition: var(--transition-smooth);
	text-align: center;
	border: none;
}
.btn-primary {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	color: var(--color-white);
	box-shadow: 0 4px 15px rgba(0, 168, 232, 0.3);
}
.btn-primary:hover {
	color: var(--color-white);
	transform: translateY(-3px);
	box-shadow: 0 8px 25px rgba(0, 168, 232, 0.5);
}
.btn-large { padding: 1.2rem 3rem; font-size: 1.1rem; }

/* Header */
.site-header {
	position: fixed;
	top: 0; left: 0; width: 100%;
	z-index: 1000;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(0,0,0,0.05);
	transition: var(--transition-smooth);
}
.site-header.scrolled {
	padding: 10px 0;
	box-shadow: var(--shadow-sm);
}
.header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
}
.site-branding .logo {
	font-size: 1.5rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	color: var(--color-primary);
}
.main-navigation .menu {
	display: flex;
	align-items: center;
	gap: 2rem;
}
.main-navigation a {
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.05em;
	color: var(--color-primary);
	position: relative;
}
.main-navigation a::after {
	content: '';
	position: absolute;
	bottom: -5px; left: 0;
	width: 0; height: 2px;
	background: var(--color-secondary);
	transition: var(--transition-smooth);
}
.main-navigation a:not(.btn):hover::after { width: 100%; }
.menu-toggle { display: none; }

/* Sub Menu */
.has-children { position: relative; }
.sub-menu {
	position: absolute;
	top: 100%; left: 50%;
	transform: translateX(-50%) translateY(20px);
	background: var(--color-white);
	box-shadow: var(--shadow-md);
	border-radius: var(--border-radius);
	padding: 1rem 0;
	min-width: 200px;
	opacity: 0; visibility: hidden;
	transition: var(--transition-smooth);
}
.has-children:hover .sub-menu {
	transform: translateX(-50%) translateY(0);
	opacity: 1; visibility: visible;
}
.sub-menu li { padding: 0.5rem 1.5rem; }
.sub-menu a::after { display: none; }

/* Hero Section */
.hero-section {
	height: 100vh;
	display: flex;
	align-items: center;
	position: relative;
	background: var(--color-primary);
	color: var(--color-white);
	overflow: hidden;
	padding-top: 80px;
}
.hero-bg {
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
	background: linear-gradient(135deg, rgba(10,25,47,0.9) 0%, rgba(0,168,232,0.6) 100%);
	z-index: 1;
}
/* Abstract Shapes */
.shape { position: absolute; border-radius: 50%; filter: blur(80px); z-index: 0; opacity: 0.6; }
.shape-1 { width: 400px; height: 400px; background: var(--color-secondary); top: -100px; right: -100px; animation: float 10s infinite ease-in-out alternate; }
.shape-2 { width: 300px; height: 300px; background: var(--color-accent); bottom: -50px; left: -100px; animation: float 12s infinite ease-in-out alternate-reverse; }

@keyframes float {
	0% { transform: translateY(0) scale(1); }
	100% { transform: translateY(50px) scale(1.1); }
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 800px;
}
.hero-title {
	font-size: 4rem;
	font-weight: 800;
	color: var(--color-white);
	line-height: 1.2;
	margin-bottom: 1.5rem;
}
.hero-subtitle {
	font-size: 1.2rem;
	font-weight: 400;
	opacity: 0.9;
	margin-bottom: 2rem;
}

/* Sections */
.section { padding: 6rem 0; }
.section-bg-alt { background: var(--color-bg-alt); }
.section-title {
	text-align: center;
	font-size: 2.5rem;
	margin-bottom: 1rem;
	position: relative;
	padding-bottom: 1rem;
}
.section-title::after {
	content: '';
	position: absolute;
	bottom: 0; left: 50%;
	transform: translateX(-50%);
	width: 60px; height: 3px;
	background: var(--color-secondary);
}
.section-subtitle { text-align: center; color: var(--color-text-light); margin-bottom: 4rem; }

/* Service Cards */
.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
}
.service-card {
	background: var(--color-white);
	padding: 3rem 2rem;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
	transition: var(--transition-smooth);
	position: relative;
	overflow: hidden;
	border-bottom: 4px solid transparent;
}
.service-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-lg);
	border-color: var(--color-secondary);
}
.service-icon {
	font-size: 3rem;
	color: var(--color-secondary);
	margin-bottom: 1.5rem;
}
.service-title { font-size: 1.5rem; margin-bottom: 1rem; }

/* News List */
.news-list { max-width: 800px; margin: 0 auto; }
.news-item {
	display: flex;
	gap: 2rem;
	padding: 1.5rem 0;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	transition: var(--transition-smooth);
}
.news-item:hover { background: rgba(0,168,232,0.05); padding-left: 1rem; }
.news-date { font-weight: 600; color: var(--color-secondary); min-width: 120px; }
.news-title { font-weight: 500; }

/* Footer */
.site-footer {
	background: var(--color-primary);
	color: rgba(255,255,255,0.7);
	padding-top: 4rem;
}
.footer-cta {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-primary));
	padding: 4rem 0;
	margin: -8rem auto 4rem;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-lg);
	color: var(--color-white);
	position: relative;
	z-index: 10;
	width: 90%;
	max-width: 1000px;
}
.cta-title { color: var(--color-white); margin-bottom: 0.5rem; font-size: 2.5rem; }
.cta-desc { margin-bottom: 2rem; font-size: 1.1rem; }
.footer-widgets {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem;
	padding-bottom: 4rem;
	border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer-brand { flex: 1; min-width: 250px; }
.footer-logo { font-size: 2rem; font-weight: 800; color: var(--color-white); display: block; margin-bottom: 1rem; }
.footer-nav { flex: 2; display: flex; gap: 2rem; justify-content: space-between; flex-wrap: wrap; }
.footer-nav-col h3 { color: var(--color-white); font-size: 1.1rem; margin-bottom: 1.5rem; }
.footer-nav-col a { color: rgba(255,255,255,0.7); }
.footer-nav-col a:hover { color: var(--color-secondary); }
.footer-nav-col li { margin-bottom: 0.8rem; }
.site-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0;
}
.scroll-top { color: var(--color-white); font-weight: 600; letter-spacing: 0.1em; }

/* Animations */
.fade-in-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in-up.visible {
	opacity: 1;
	transform: translateY(0);
}

/* Responsive */
@media (max-width: 768px) {
	.header-inner { height: 70px; }
	.menu-toggle { display: block; background: none; border: none; font-size: 1.5rem; color: var(--color-primary); cursor: pointer; }
	.menu-icon { display: block; width: 25px; height: 2px; background: var(--color-primary); position: relative; }
	.menu-icon::before, .menu-icon::after { content: ''; position: absolute; width: 100%; height: 100%; background: var(--color-primary); left: 0; }
	.menu-icon::before { top: -8px; }
	.menu-icon::after { bottom: -8px; }
	.menu-container {
		position: absolute;
		top: 70px; left: 0; width: 100%;
		background: var(--color-white);
		box-shadow: var(--shadow-md);
		padding: 2rem;
		display: none;
	}
	.menu-container.active { display: block; }
	.main-navigation .menu { flex-direction: column; gap: 1.5rem; }
	.hero-title { font-size: 2.5rem; }
	.footer-nav { flex-direction: column; }
	.footer-cta { margin-top: -6rem; padding: 3rem 1rem; }
	.cta-title { font-size: 2rem; }
}