/* =========================================================
 * Smart Punch - Top page
 * ========================================================= */

/* Hero */
.hero {
	position: relative;
	overflow: hidden;
	padding: 84px 20px 96px;
	background:
		radial-gradient(circle at 85% 18%, rgba(34,184,170,.18), transparent 240px),
		linear-gradient(135deg, #f7fbff 0%, #fff 45%, #eef4ff 100%);
}
.hero::before {
	content: "";
	position: absolute;
	top: -180px;
	right: -140px;
	width: 460px;
	height: 460px;
	background: radial-gradient(circle, rgba(28,63,148,.15), transparent 68%);
	border-radius: 50%;
	pointer-events: none;
}
.hero-inner {
	position: relative;
	z-index: 1;
	display: grid;
	width: min(var(--content-width), 100%);
	margin: 0 auto;
	grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
	gap: 64px;
	align-items: center;
}
.hero-eyebrow {
	margin: 0 0 16px;
	color: var(--accent-dark);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.hero-title {
	margin: 0;
	color: var(--text);
	font-size: clamp(38px, 5.6vw, 74px);
	font-weight: 900;
	letter-spacing: -.04em;
	line-height: 1.06;
}
.hero-title span { display: block; }
.hero-title span + span { margin-top: 8px; }
.hero-title span:last-child { margin-top: 24px; font-size: .66em; line-height: 1.25; }
.hero-lead { margin: 34px 0 0; font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; }
.hero-emphasis { margin: 14px 0 0; color: var(--brand); font-size: 21px; font-weight: 900; }
.hero-description, .hero-conclusion {
	max-width: 680px;
	margin: 12px 0 0;
	color: #576074;
	font-size: 16px;
	line-height: 1.9;
}
.hero-conclusion { color: var(--text); font-weight: 800; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-visual {
	position: relative;
	display: flex;
	min-height: 570px;
	align-items: center;
	justify-content: center;
}
.hero-capture-frame {
	position: relative;
	width: min(360px, 88vw);
	padding: 10px;
	background: #10182a;
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 38px;
	box-shadow: 0 34px 80px rgba(20,48,111,.28);
	transform: rotate(2deg);
}
.hero-capture-frame::before {
	content: "";
	position: absolute;
	top: 10px;
	left: 50%;
	width: 84px;
	height: 6px;
	background: rgba(255,255,255,.15);
	border-radius: 999px;
	transform: translateX(-50%);
}
.hero-capture { width: 100%; height: auto; border-radius: 28px; }
.touch-badge {
	position: absolute;
	right: -4px;
	bottom: 42px;
	display: flex;
	width: 138px;
	height: 138px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 3px solid var(--accent);
	border-radius: 50%;
	box-shadow: 0 18px 42px rgba(20,48,111,.18);
	transform: rotate(-8deg);
}
.touch-badge-main { color: var(--accent-dark); font-size: 22px; font-weight: 1000; letter-spacing: .08em; }
.touch-badge-sub { margin-top: 4px; color: #454d5c; font-size: 12px; font-weight: 800; }

.section-problem {
	background: radial-gradient(circle at 50% 42%, rgba(34,184,170,.08), transparent 320px), #10182a;
	color: #fff;
}
.section-problem .section-heading h2 { color:#fff; }
.section-problem .section-heading > p:last-child { color:#abb5c8; }

.comparison {
	display: grid;
	max-width: 1080px;
	margin: 0 auto;
	grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1.12fr);
	gap: 24px;
	align-items: center;
}

.comparison-before,
.comparison-after {
	position:relative;
	min-height:520px;
	overflow:hidden;
	border-radius:34px;
}
.comparison-before {
	padding:34px;
	background:linear-gradient(145deg,#18233a,#111a2d);
	border:1px solid rgba(255,255,255,.10);
}
.comparison-after {
	display:flex;
	padding:34px 46px 0;
	flex-direction:column;
	background:radial-gradient(circle at 90% 55%, rgba(34,184,170,.13), transparent 210px), linear-gradient(145deg,#fff,#edf4ff);
	border:1px solid rgba(255,255,255,.72);
	color:var(--text);
}
.comparison-panel-title {
	position:relative;
	z-index:3;
	margin:0 0 28px;
	color:#fff;
	font-size:30px;
	font-weight:900;
	line-height:1.25;
	text-align:center;
}
.comparison-panel-title-after { color:var(--brand); }
.comparison-before-grid {
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:30px 20px;
}
.comparison-before-item { position:relative; z-index:1; text-align:center; }
.comparison-icon {
	display:flex;
	width:min(150px,100%);
	aspect-ratio:1;
	margin:0 auto;
	align-items:center;
	justify-content:center;
	background:#fff;
	border-radius:24px;
	box-shadow:0 16px 30px rgba(0,0,0,.18);
}
.comparison-icon svg {
	width:58%; height:58%; fill:none; stroke:var(--brand); stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round;
}
.comparison-before-item p { margin:12px 0 0; color:#fff; font-size:16px; font-weight:800; line-height:1.45; }
.comparison-cross::before,
.comparison-cross::after {
	content:"";
	position:absolute;
	z-index:2;
	top:53%; left:50%;
	width:82%; height:18px;
	background:rgba(255,103,124,.54);
	border-radius:999px;
	box-shadow:0 0 18px rgba(255,103,124,.12);
	transform-origin:center;
	pointer-events:none;
}
.comparison-cross::before { transform:translate(-50%,-50%) rotate(45deg); }
.comparison-cross::after { transform:translate(-50%,-50%) rotate(-45deg); }

.comparison-arrow {
	position: relative;
	width: 70px;
	height: 52px;
	margin: 0 auto;
	background: linear-gradient(
		90deg,
		var(--accent-dark),
		var(--accent)
	);
	border-radius: 6px 0 0 6px;
	filter: drop-shadow(0 8px 14px rgba(34,184,170,.20));
}

.comparison-arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -34px;

	width: 0;
	height: 0;

	border-top: 44px solid transparent;
	border-bottom: 44px solid transparent;
	border-left: 40px solid var(--accent);

	transform: translateY(-50%);
}

.comparison-after-copy { position:relative; z-index:2; margin-top:8px; }
.comparison-after-small { margin:0; color:var(--brand-dark); font-size:20px; font-weight:800; }
.comparison-after-main { margin:8px 0 0; color:var(--brand); font-size:clamp(40px,5vw,64px); font-weight:900; letter-spacing:-.04em; line-height:1.08; }
.comparison-touch-image { width:calc(100% + 40px); max-width:none; margin:auto -20px 0; align-self:center; mix-blend-mode:multiply; }

@media (max-width:900px) {
	.comparison { grid-template-columns:1fr; }
	.comparison-arrow { width:52px; height:88px; border-radius:6px 6px 0 0; }
	.comparison-arrow::after {
		top:auto; right:50%; bottom:-34px;
		border-top:40px solid var(--accent);
		border-right:44px solid transparent;
		border-bottom:0;
		border-left:44px solid transparent;
		transform:translateX(50%);
	}
	.comparison-before,
	.comparison-after { min-height:auto; }
	.comparison-after { min-height:560px; }
}

@media (max-width:640px) {
	.comparison-before { padding:26px 18px; }
	.comparison-panel-title { font-size:25px; }
	.comparison-before-grid { gap:24px 12px; }
	.comparison-icon { border-radius:18px; }
	.comparison-before-item p { font-size:13px; }
	.comparison-cross::before,
	.comparison-cross::after { width:92%; height:13px; }
	.comparison-after { min-height:470px; padding:26px 26px 0; }
	.comparison-after-small { font-size:17px; }
	.comparison-after-main { font-size:40px; }
	.comparison-touch-image { width:calc(100% + 28px); margin-right:-14px; margin-left:-14px; }
}



/* Features */
.section-features { background: var(--surface); }
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.feature-card { padding: 30px; border-radius: 24px; }
.feature-number { margin: 0 0 26px; color: var(--accent-dark); font-size: 12px; font-weight: 900; letter-spacing: .14em; }
.feature-card h3 { margin: 0; color: var(--text); font-size: 22px; }
.feature-card p:last-child { margin: 14px 0 0; color: var(--muted); line-height: 1.8; }

/* Flow */
.flow-list { display: grid; margin: 0; padding: 0; grid-template-columns: repeat(3,1fr); gap: 20px; list-style: none; }
.flow-list li { display: flex; gap: 18px; padding: 28px; border-radius: 24px; }
.flow-number {
	display: flex;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	background: var(--brand);
	color: #fff;
	border-radius: 50%;
	font-size: 18px;
	font-weight: 900;
}
.flow-list h3 { margin: 2px 0 0; color: var(--text); font-size: 19px; }
.flow-list p { margin: 10px 0 0; color: var(--muted); line-height: 1.75; }

/* Use cases */
.section-usecase { background: linear-gradient(180deg,rgba(28,63,148,.05),transparent 280px), #fff; }
.usecase-tags { display: flex; max-width: 880px; margin: 0 auto; flex-wrap: wrap; justify-content: center; gap: 12px; }
.usecase-tags span {
	padding: 12px 18px;
	background: #fff;
	color: #414959;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-weight: 800;
	box-shadow: var(--shadow-small);
}

@media (max-width: 900px) {
	.hero-inner { grid-template-columns: 1fr; }
	.hero-copy { text-align: center; }
	.hero-description, .hero-conclusion { margin-right: auto; margin-left: auto; }
	.hero-actions { justify-content: center; }
	.hero-visual { min-height: auto; }
	.feature-grid { grid-template-columns: repeat(2,1fr); }
	.flow-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.hero { padding: 64px 18px 74px; }
	.hero-inner { gap: 44px; }
	.hero-title { font-size: 40px; }
	.hero-title span:last-child { font-size: .64em; }
	.hero-description br { display: none; }
	.hero-actions { flex-direction: column; }
	.hero-capture-frame { width: min(320px,88vw); }
	.touch-badge { right: -4px; bottom: 28px; width: 116px; height: 116px; }
	.comparison { grid-template-columns: 1fr; }
	.comparison-arrow { transform: rotate(90deg); text-align: center; }
	.feature-grid { grid-template-columns: 1fr; }
	.comparison-card, .feature-card, .flow-list li { padding: 24px; }
}