/* --------------------------------------------------------------------------
   iSaive — buttons, device frames, cards, form
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.1rem;
	padding: 0.75rem 1.4rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: transform 0.2s var(--isaive-ease), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn:focus-visible {
	outline: 3px solid rgba(0, 174, 239, 0.5);
	outline-offset: 3px;
}

.btn--primary {
	background: var(--isaive-blue);
	color: #fff;
	box-shadow: 0 10px 24px rgba(0, 174, 239, 0.28);
}

.btn--primary:hover {
	background: #005494;
}

.btn--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, 0.28);
}

.btn--ghost:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.06);
}

.btn--small {
	min-height: 2.6rem;
	padding: 0.45rem 1.1rem;
	font-size: 0.92rem;
}

.device {
	width: min(100%, 18rem);
	margin: 0;
}

.device--md {
	width: min(100%, 16.5rem);
}

.device--sm {
	width: min(100%, 13.5rem);
}

.device--hero {
	width: min(100%, 19rem);
}

.device__bezel {
	background: #000d1c;
	border-radius: 2.1rem;
	padding: 0.62rem;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.08),
		var(--isaive-shadow);
}

.device__bezel img {
	width: 100%;
	height: auto;
	aspect-ratio: 945 / 2048;
	object-fit: cover;
	object-position: top center;
	border-radius: 1.55rem;
	background: #e8eef5;
}

.device--tilt-left {
	transform: rotate(-6deg) translateY(0.6rem);
}

.device--tilt-right {
	transform: rotate(6deg) translateY(-0.4rem);
}

.info-card,
.category-card,
.steps__item,
.flow__step,
.cta__form-wrap {
	background: var(--isaive-white);
	border: 1px solid var(--isaive-border);
	border-radius: var(--isaive-radius);
}

.info-card {
	padding: 1.5rem 1.4rem 1.55rem;
	transition: transform 0.25s var(--isaive-ease), box-shadow 0.25s ease;
}

.info-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--isaive-shadow);
}

.info-card__icon {
	width: 2.8rem;
	height: 2.8rem;
	display: grid;
	place-items: center;
	margin-bottom: 1rem;
	border-radius: 0.85rem;
	background: var(--isaive-green-soft);
	color: var(--isaive-green-dark);
}

.info-card h3 {
	margin-bottom: 0.45rem;
}

.info-card p,
.steps__item p,
.flow__step p {
	color: var(--isaive-muted);
	font-size: 0.98rem;
}

.category-card {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	padding: 1.05rem 1.1rem;
	font-weight: 700;
	transition: transform 0.2s var(--isaive-ease);
}

.category-card:hover {
	transform: translateY(-3px);
}

.category-card__dot {
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	flex-shrink: 0;
}

.category-card--mint { background: #e4f6fd; color: #005494; }
.category-card--mint .category-card__dot { background: #00aeef; }
.category-card--salmon { background: #fdecea; color: #9a3b32; }
.category-card--salmon .category-card__dot { background: #e06a5c; }
.category-card--blue { background: #e5f0fa; color: #005494; }
.category-card--blue .category-card__dot { background: #0071bc; }
.category-card--orange { background: #fff1e6; color: #9a4a12; }
.category-card--orange .category-card__dot { background: #ef7d2f; }
.category-card--sky { background: #e8f5ff; color: #1a5f8a; }
.category-card--sky .category-card__dot { background: #3b9ad9; }
.category-card--yellow { background: #fff7dc; color: #8a5b00; }
.category-card--yellow .category-card__dot { background: #e2b00b; }
.category-card--lavender { background: #f1eaff; color: #5c3d9e; }
.category-card--lavender .category-card__dot { background: #8b6ad4; }
.category-card--purple { background: #eee8fb; color: #4d3480; }
.category-card--purple .category-card__dot { background: #7a5cc8; }
.category-card--teal { background: #e5f6f4; color: #1b6b63; }
.category-card--teal .category-card__dot { background: #2aa89a; }
.category-card--pink { background: #fde8f0; color: #8e3558; }
.category-card--pink .category-card__dot { background: #e56b96; }

.contact-form {
	display: grid;
	gap: 1rem;
}

.contact-form__field {
	margin: 0;
}

.contact-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.88rem;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.82);
}

.contact-form input,
.contact-form textarea,
.contact-form select {
	width: 100%;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 0.9rem;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	padding: 0.8rem 0.95rem;
}

.contact-form select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 1.2rem, calc(100% - 0.85rem) 1.2rem;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.contact-form select option {
	color: var(--isaive-text);
}

.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
	outline: 2px solid var(--isaive-cyan);
	border-color: transparent;
}

.contact-form textarea {
	resize: vertical;
	min-height: 8rem;
}

.form-notice {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border-radius: var(--isaive-radius-sm);
	font-size: 0.95rem;
}

.form-notice--ok {
	background: var(--isaive-green-soft);
	color: var(--isaive-green-dark);
}

.form-notice--error {
	background: #fdecea;
	color: #9a3b32;
}

.contact-form__submit {
	margin: 0.25rem 0 0;
}

@media (max-width: 720px) {
	.device--hero,
	.device--md {
		width: min(100%, 15.5rem);
	}

	.device--sm {
		width: min(46%, 11.5rem);
	}
}