body {
	font-family: "DM Sans", "Noto Sans JP", sans-serif;
	color: #1e293b;
	background: #fff;
}
a{
  display: block;
}
.font-display {
	font-family: "DM Sans", sans-serif;
}
.font-jp {
	font-family: "Noto Sans JP", sans-serif;
}
.font-mono {
	font-family: "DM Mono", monospace;
}

/* ── PAGE SYSTEM ── */
.page.active {
	display: block;
}
#home-page {
	display: block;
}

/* ── REVEAL — always visible (animation disabled for reliability) ── */
.reveal {
	opacity: 1;
	transform: none;
}
.reveal.visible {
	opacity: 1;
	transform: none;
}
.reveal-delay-1,
.reveal-delay-2,
.reveal-delay-3,
.reveal-delay-4,
.reveal-delay-5 {
}

/* ── GRADIENT TEXT ── */
.gradient-text {
	background: linear-gradient(135deg, #1d4ed8 0%, #0ea5e9 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.gradient-text-light {
	background: linear-gradient(135deg, #60a5fa 0%, #7dd3fc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ── HERO MESH BG ── */
.hero-mesh {
	background:
		radial-gradient(
			ellipse 80% 60% at 60% 40%,
			rgba(59, 130, 246, 0.08) 0%,
			transparent 70%
		),
		radial-gradient(
			ellipse 50% 50% at 10% 80%,
			rgba(14, 165, 233, 0.06) 0%,
			transparent 60%
		),
		linear-gradient(180deg, #f8faff 0%, #eef4ff 50%, #f0f7ff 100%);
}

/* ── GRID PATTERN ── */
.grid-pattern {
	background-image:
		linear-gradient(rgba(59, 130, 246, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(59, 130, 246, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
}

/* ── CARD HOVER ── */
.card-lift {
	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}
.card-lift:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 64px rgba(29, 78, 216, 0.12);
}

/* ── NAV GLASS ── */
/* Default: white (for all inner pages) */
.nav-glass {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid rgba(29, 78, 216, 0.08);
	transition:
		background 0.4s,
		border-color 0.4s,
		backdrop-filter 0.4s;
	box-shadow: 0 2px 16px rgba(29, 78, 216, 0.05);
}
/* Hero-transparent: applied by JS on home page before scroll */
.nav-glass.hero-transparent {
	background: rgba(10, 16, 40, 0);
	backdrop-filter: blur(0px);
	-webkit-backdrop-filter: blur(0px);
	border-bottom: 1px solid rgba(255, 255, 255, 0);
	box-shadow: none;
}
/* Nav text: dark by default */
.nav-glass nav a {
	color: #475569;
	transition: color 0.3s;
}
.nav-glass nav a:hover {
	color: #1d4ed8 !important;
}
/* Nav text: white when hero-transparent */
.nav-glass.hero-transparent nav a {
	color: rgba(255, 255, 255, 0.85);
}
.nav-glass.hero-transparent nav a:hover {
	color: #fff !important;
}
/* Logo */
.nav-logo-img {
	filter: none;
	transition: filter 0.3s;
}
.nav-glass.hero-transparent .nav-logo-img {
	filter: none;
}
/* CTA button */
.nav-cta-btn {
	background: #1d4ed8 !important;
	color: #fff !important;
	border: none !important;
}
.nav-glass.hero-transparent .nav-cta-btn {
	background: rgba(255, 255, 255, 0.18) !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
}
/* Hamburger lines: dark by default, white on hero */
.ham-line {
	display: block;
	width: 24px;
	height: 2px;
	background: #1e3a8a;
	transition:
		background 0.3s,
		margin 0.3s;
	margin: 5px 0;
}
.nav-glass.hero-transparent .ham-line {
	background: #fff;
}

/* ── ANIMATED DOTS ── */
.dot-anim {
	animation: float 5s ease-in-out infinite;
}
.dot-anim-2 {
	animation: float 7s ease-in-out 1.5s infinite;
}
.dot-anim-3 {
	animation: float 6s ease-in-out 3s infinite;
}

/* ── PROCESS LINE ── */
.process-line {
	background: linear-gradient(90deg, #1d4ed8, #0ea5e9);
}

/* ── STRENGTH CARD ── */
.strength-card {
	border: 1px solid rgba(29, 78, 216, 0.1);
	background: #fff;
	transition: all 0.3s ease;
}
.strength-card:hover {
	border-color: rgba(29, 78, 216, 0.3);
	background: linear-gradient(135deg, #eff6ff, #fff);
}

/* ── MOBILE MENU ── */
.mobile-menu {
	position: fixed;
	inset: 0;
	background: rgba(255, 255, 255, 0.98);
	z-index: 998;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	transform: translateX(100%);
	transition: transform 0.4s cubic-bezier(0.77, 0, 0.18, 1);
	overflow-y: auto;
}
.mobile-menu.open {
	transform: translateX(0);
}
.mobile-menu a {
	font-size: 1.4rem;
	font-weight: 500;
	color: #1e3a8a;
	letter-spacing: 0.05em;
	text-decoration: none;
}
.mobile-menu-close {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 44px;
	height: 44px;
	background: #f1f5f9;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 999;
}

/* ── HERO ENTRY ANIMATIONS (CSS keyframe — no JS dependency) ── */
@keyframes heroFadeUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.hero-fade-1 {
	animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.hero-fade-2 {
	animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;
}
.hero-fade-3 {
	animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
}
.hero-fade-4 {
	animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}
.hero-fade-5 {
	animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

/* ── SCROLL DROP ANIM ── */
@keyframes scrollDrop {
	0% {
		top: -100%;
		opacity: 0;
	}
	30% {
		opacity: 1;
	}
	100% {
		top: 100%;
		opacity: 0;
	}
}

/* ── HERO BG SCALE ── */
#heroImg {
	animation: heroScale 20s ease-in-out infinite alternate;
}
@keyframes heroScale {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.04);
	}
}
::-webkit-scrollbar {
	width: 4px;
}
::-webkit-scrollbar-track {
	background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
	background: #3b82f6;
	border-radius: 2px;
}

/* ── SVG CIRCLE ANIM ── */
.circle-draw {
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	animation: draw 3s ease forwards 0.5s;
}

/* ── COUNTER ── */
.count-up {
	transition: all 1s ease;
}

/* ── MARQUEE (text) ── */
.marquee-inner {
	display: flex;
	gap: 3rem;
	white-space: nowrap;
	animation: marquee 24s linear infinite;
}
@keyframes marquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ── LOGO MARQUEE ── */
.logo-marquee-inner {
	display: flex;
	align-items: center;
	gap: 4rem;
	width: max-content;
	animation: logoMarquee 36s linear infinite;
	padding: 0 2rem;
}
.logo-marquee-inner:hover {
	animation-play-state: paused;
}
.logo-item {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
@keyframes logoMarquee {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ── NAV LOGO IMAGE ── */
.nav-logo-img {
	filter: none;
	transition: filter 0.3s;
}
.nav-glass.hero-transparent .nav-logo-img {
	filter: none;
}
.section-tag {
	font-family: "DM Mono", monospace;
	font-size: 0.7rem;
	letter-spacing: 0.25em;
	color: #2563eb;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
.section-tag::before {
	content: "";
	width: 24px;
	height: 1.5px;
	background: #2563eb;
	display: block;
}

@media (max-width: 768px) {
	.hero-title {
		font-size: clamp(2.2rem, 8vw, 4rem);
	}
}