/* ==========================================================================
   Famlcare LP — Bootstrap 5 brand layer
   Keep only what Bootstrap cannot express (tokens, hero atmosphere, motion)
   ========================================================================== */

:root {
	--fc-teal: #0f6b6e;
	--fc-teal-deep: #0a4f52;
	--fc-teal-soft: #1a8a8e;
	--fc-mist: #e8f4f4;
	--fc-sand: #f7f3ee;
	--fc-warm: #c4784a;
	--fc-ink: #1c2a2b;
	--fc-ink-muted: #5a6b6c;
	--fc-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--fc-font: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	--fc-display: "Outfit", "Zen Kaku Gothic New", sans-serif;
	--fc-navbar-h: 4.25rem;

	--bs-primary: #0f6b6e;
	--bs-primary-rgb: 15, 107, 110;
	--bs-link-color: #0f6b6e;
	--bs-link-hover-color: #0a4f52;
	--bs-body-font-family: var(--fc-font);
	--bs-body-color: var(--fc-ink);
	--bs-body-bg: var(--fc-sand);
	--bs-secondary-color: var(--fc-ink-muted);
	--bs-border-radius: 0.5rem;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--fc-navbar-h) + 0.75rem);
}

body.fc-page {
	font-family: var(--fc-font);
	background: var(--fc-sand);
	overflow-x: hidden;
}

/* ---- Navbar (Bootstrap + light product chrome) ---- */
.fc-navbar {
	min-height: var(--fc-navbar-h);
	background: rgba(255, 255, 255, 0.86);
	border-bottom: 1px solid rgba(15, 107, 110, 0.1);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: background 0.3s var(--fc-ease), box-shadow 0.3s var(--fc-ease);
}

.fc-navbar.is-scrolled {
	background: rgba(255, 255, 255, 0.96);
	box-shadow: 0 8px 24px rgba(28, 42, 43, 0.08);
}

.fc-brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
	gap: 0.1rem;
}

.fc-brand__en {
	font-family: var(--fc-display);
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--fc-teal-deep);
}

.fc-brand__ja {
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--fc-ink-muted);
}

.fc-navbar .nav-link {
	font-weight: 600;
	color: var(--fc-ink-muted);
}

.fc-navbar .nav-link:hover,
.fc-navbar .nav-link:focus {
	color: var(--fc-teal-deep);
}

/* ---- Hero atmosphere ---- */
.fc-hero {
	position: relative;
	isolation: isolate;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding: calc(var(--fc-navbar-h) + 2rem) 0 4rem;
	overflow: hidden;
	background:
		radial-gradient(ellipse 70% 55% at 85% 15%, rgba(232, 180, 138, 0.28), transparent 55%),
		radial-gradient(ellipse 60% 50% at 10% 80%, rgba(26, 138, 142, 0.18), transparent 50%),
		linear-gradient(165deg, #fbf8f4 0%, var(--fc-mist) 48%, #dceeee 100%);
}

.fc-hero__glow {
	position: absolute;
	inset: auto -10% -20% 40%;
	height: 55%;
	background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.7), transparent 65%);
	pointer-events: none;
	z-index: 0;
}

.fc-hero__grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(15, 107, 110, 0.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15, 107, 110, 0.045) 1px, transparent 1px);
	background-size: 48px 48px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 20%, transparent 75%);
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}

.fc-hero .container {
	z-index: 1;
}

.fc-hero__kana {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.28em;
	color: var(--fc-teal-soft);
}

.fc-hero__brand {
	font-family: var(--fc-display);
	font-size: clamp(3rem, 10vw, 5.25rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
	color: var(--fc-teal-deep);
}

.fc-hero__visual {
	position: relative;
	min-height: 16rem;
}

.fc-hero__frame {
	border-radius: 1.25rem 1.25rem 1.25rem 0.35rem;
	overflow: hidden;
	box-shadow: 0 24px 48px rgba(10, 79, 82, 0.16);
	transform: rotate(-1.5deg);
	animation: fc-hero-float 7s var(--fc-ease) infinite alternate;
}

.fc-hero__frame img {
	width: 100%;
	aspect-ratio: 5 / 4;
	object-fit: cover;
}

.fc-hero__frame--offset {
	display: none;
}

@media (min-width: 768px) {
	.fc-hero__visual {
		min-height: 22rem;
		padding: 1rem 0 2rem 2rem;
	}

	.fc-hero__frame {
		width: 88%;
		margin-left: auto;
	}

	.fc-hero__frame--offset {
		display: block;
		position: absolute;
		left: 0;
		bottom: 0;
		width: 48%;
		border-radius: 0.35rem 1rem 1rem 1rem;
		box-shadow: 0 18px 36px rgba(28, 42, 43, 0.18);
		animation: fc-hero-float-offset 8s var(--fc-ease) 0.8s infinite alternate;
		border: 4px solid rgba(255, 255, 255, 0.9);
	}

	.fc-hero__frame--offset img {
		aspect-ratio: 4 / 3;
	}
}

@keyframes fc-hero-float {
	from { transform: translateY(0) rotate(-1.5deg); }
	to { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes fc-hero-float-offset {
	from { transform: translateY(0) rotate(2.5deg); }
	to { transform: translateY(-8px) rotate(3deg); }
}

/* ---- Brand accents Bootstrap cannot express ---- */
.fc-tint {
	background: var(--fc-mist);
}

.fc-eyebrow {
	font-family: var(--fc-display);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--fc-teal-soft);
}

.fc-pain__num {
	font-family: var(--fc-display);
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--fc-teal-soft);
	opacity: 0.55;
	line-height: 1;
}

.fc-checklist > li {
	padding-left: 1rem;
	border-left: 3px solid var(--fc-teal);
}

.fc-photo {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
}

.fc-badge {
	background: rgba(15, 107, 110, 0.12);
	color: var(--fc-teal-deep);
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0.5rem 0.9rem;
}

.fc-accent-border {
	border-color: var(--fc-warm) !important;
}

.fc-price {
	border-top: 4px solid var(--fc-teal) !important;
}

.fc-price--alt {
	border-top-color: var(--fc-warm) !important;
}

.fc-warm-text {
	color: var(--fc-warm);
}

.fc-form-status.is-success {
	display: block;
	background: rgba(15, 107, 110, 0.12);
	color: var(--fc-teal-deep);
	border: none;
}

.fc-form-status.is-error {
	display: block;
	background: rgba(196, 120, 74, 0.15);
	color: #8a4a28;
	border: none;
}

.fc-footer {
	background: var(--fc-teal-deep);
	color: rgba(255, 255, 255, 0.85);
}

.btn-primary {
	--bs-btn-bg: var(--fc-teal);
	--bs-btn-border-color: var(--fc-teal);
	--bs-btn-hover-bg: var(--fc-teal-deep);
	--bs-btn-hover-border-color: var(--fc-teal-deep);
	--bs-btn-active-bg: var(--fc-teal-deep);
	--bs-btn-active-border-color: var(--fc-teal-deep);
	font-weight: 700;
}

.btn-outline-primary {
	--bs-btn-color: var(--fc-teal-deep);
	--bs-btn-border-color: rgba(15, 107, 110, 0.4);
	--bs-btn-hover-bg: rgba(15, 107, 110, 0.08);
	--bs-btn-hover-border-color: var(--fc-teal);
	--bs-btn-hover-color: var(--fc-teal-deep);
	--bs-btn-active-bg: rgba(15, 107, 110, 0.12);
	--bs-btn-active-border-color: var(--fc-teal);
	--bs-btn-active-color: var(--fc-teal-deep);
	font-weight: 700;
}

.text-primary {
	color: var(--fc-teal-deep) !important;
}

.border-primary {
	border-color: var(--fc-teal) !important;
}

/* ---- Reveal ---- */
[data-reveal] {
	opacity: 0;
	transform: translateY(1.1rem);
	transition: opacity 0.7s var(--fc-ease), transform 0.7s var(--fc-ease);
}

[data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fc-hero__frame,
	.fc-hero__frame--offset { animation: none; }
	[data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media (max-width: 575.98px) {
	.fc-hero {
		min-height: auto;
		padding-bottom: 3rem;
	}

	.fc-hero .btn {
		width: 100%;
	}
}