/*
 * EK Tender Touch — stylesheet
 * Values in this file are taken directly from the Figma source
 * (file BkKDGO5RfIW0yKGFLNrEeq): typography scale, colors, gradients,
 * spacing, radii and shadows are matched 1:1 with the design.
 */

/* ==========================================================================
   0. Fonts — self-hosted so the design's typography always renders exactly,
   with no dependency on Google Fonts being reachable.
   ========================================================================== */

@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/sora-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/sora-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter-latin-500-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/caveat-latin-400-normal.woff2') format('woff2');
}
@font-face {
	font-family: 'Caveat';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/caveat-latin-500-normal.woff2') format('woff2');
}

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Neutrals */
	--ink-900: #0b1220;
	--ink-700: #45556c;
	--ink-500: #62748e;
	--ink-400: #90a1b9;
	--border: #e2e8f0;
	--slate-100: #f1f5f9;
	--white: #ffffff;

	/* Brand */
	--teal-500: #10c1bb;
	--teal-600: #0ba7a2;
	--teal-light: #d6f5f3;
	--purple-500: #8c34b2;
	--purple-700: #6d2790;
	--pink-light: #f9e8fd;

	/* Gradients (exact angles/stops from Figma) */
	--grad-teal: linear-gradient(163.8deg, #10c1bb 0%, #0ba7a2 100%);
	--grad-teal-nav: linear-gradient(158.9deg, #10c1bb 0%, #0ba7a2 100%);
	--grad-teal-card: linear-gradient(162.32deg, #10c1bb 0%, #0ba7a2 100%);
	--grad-purple: linear-gradient(168.69deg, #8c34b2 0%, #6d2790 100%);
	--grad-step: linear-gradient(135deg, #10c1bb 0%, #7782b9 50%, #8c34b2 100%);
	--grad-icon: linear-gradient(135deg, #d6f5f3 0%, #e8eff8 50%, #f9e8fd 100%);
	--grad-callout: linear-gradient(173deg, rgba(214, 245, 243, .7) 0%, rgba(229, 240, 247, .6) 50%, rgba(249, 232, 253, .5) 100%);
	--grad-courses-bg: linear-gradient(180deg, #ffffff 0%, rgba(243, 252, 252, .7) 50%, rgba(233, 250, 248, .55) 75%, rgba(214, 245, 243, .4) 100%);
	--grad-group-bg: linear-gradient(156deg, #d6f5f3 0%, #ffffff 50%, rgba(253, 247, 254, .75) 75%, rgba(249, 232, 253, .5) 100%);
	--grad-footer: linear-gradient(163deg, #0b1220 0%, #0f1830 50%, #1a1235 100%);
	--grad-hero-scrim: linear-gradient(90deg, rgba(11, 18, 32, .92) 0%, rgba(11, 18, 32, .75) 50%, rgba(11, 18, 32, .3) 100%);
	--grad-hero-scrim-contact: linear-gradient(90deg, rgba(11, 18, 32, .9) 0%, rgba(11, 18, 32, .7) 50%, rgba(65, 32, 93, .6) 75%, rgba(140, 52, 178, .5) 100%);
	--grad-form-head: linear-gradient(90deg, #0b1220 0%, #18627a 28.5%, #0ba7a2 50%, #10c1bb 100%);
	--grad-accent-text: linear-gradient(90deg, #10c1bb 0%, #a3d6dc 50%, #f9e8fd 100%);

	/* Shadows */
	--shadow-teal: 0 10px 7.5px rgba(16, 193, 187, .25), 0 4px 3px rgba(16, 193, 187, .25);
	--shadow-purple: 0 10px 7.5px rgba(140, 52, 178, .25), 0 4px 3px rgba(140, 52, 178, .25);
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	--shadow-card: 0 20px 25px -5px rgba(11, 18, 32, .05), 0 8px 10px -6px rgba(11, 18, 32, .05);
	--ring-border: 0 0 0 1px var(--border);

	/* Type */
	--font-heading: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-script: 'Caveat', 'Segoe Script', cursive;

	/* Layout */
	--container: 1280px;
	--gutter: 32px;
	--section-y: 96px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-700);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--ink-900);
	margin: 0;
}

p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

section { padding-block: var(--section-y); }

/* Anchor targets clear the pinned header when jumped to from the nav. */
#about,
#courses,
#faq { scroll-margin-top: 88px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--white); color: var(--ink-900); padding: 12px 20px;
}
.skip-link:focus { left: 16px; top: 16px; }

/* ==========================================================================
   3. Type scale (Figma)
   ========================================================================== */

/* Eyebrow: Inter SemiBold 11.52/17.28, tracking 2.0736, uppercase, teal-600 */
.eyebrow {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 11.52px;
	line-height: 17.28px;
	letter-spacing: 2.0736px;
	text-transform: uppercase;
	color: var(--teal-600);
	margin: 0;
}

/* H2: Sora Regular 36/40, tracking -0.72 */
.section-title {
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -0.72px;
	color: var(--ink-900);
}

/* Section lead: Inter Regular 16/24, ink-700 */
.section-lead {
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-700);
}

/* Centered section header (WhyUs, HowToBook, Testimonials, FAQ) */
.section-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	max-width: 672px;
	margin-inline: auto;
}
.section-head .section-title { padding-top: 16px; }
.section-head .section-lead { padding-top: 16px; }

/* Left-aligned section header (Courses) */
.section-head--split {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	max-width: 576px;
	margin-inline: 0;
}
.section-head--split .section-lead { width: 100%; max-width: 576px; }

/* ==========================================================================
   4. Buttons
   ========================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 52px;
	padding-inline: 28px;
	border: 0;
	border-radius: 12px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	color: var(--white);
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--primary { background-image: var(--grad-teal); box-shadow: var(--shadow-teal); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 14px 20px rgba(16, 193, 187, .3), 0 6px 8px rgba(16, 193, 187, .22); }

.btn--purple { background-image: var(--grad-purple); box-shadow: var(--shadow-purple); }
.btn--purple:hover { transform: translateY(-2px); box-shadow: 0 14px 20px rgba(140, 52, 178, .3), 0 6px 8px rgba(140, 52, 178, .22); }

/* Hero outline button: 1px rgba(255,255,255,.4), transparent */
.btn--outline {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .4);
	color: var(--white);
}
.btn--outline:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .7); }

/* Nav "Book Now" + course card "Book Now": 44px tall, 20px inline */
.btn--sm {
	height: 44px;
	padding-inline: 20px;
	font-size: 15.2px;
	line-height: 22.8px;
}

/* Contact form submit: 56px, full-round */
.btn--block { width: 100%; height: 56px; border-radius: 9999px; }

.btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; }

/* ==========================================================================
   5. Header / Nav  — transparent, overlaid on the hero (as designed)
   ========================================================================== */

.site-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 60;
	background: transparent;
	transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88px;
}

/* Solid variant for pages without a dark hero, and for the scrolled state */
.site-header--solid,
.site-header.is-stuck {
	position: fixed;
	background: rgba(11, 18, 32, .92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, .08);
}
.site-header--solid { position: sticky; top: 0; }

.site-logo { display: inline-flex; align-items: center; gap: 10px; }
.site-logo__img { display: block; height: 56px; width: auto; max-width: 200px; object-fit: contain; }
.site-logo__mark svg { display: block; }
.site-logo__text {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 19px;
	letter-spacing: -0.38px;
	color: var(--white);
}

.main-nav__list { display: flex; align-items: center; gap: 4px; }
.main-nav__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 16px;
	border-radius: 8px;
	font-weight: 500;
	font-size: 14.72px;
	line-height: 22.08px;
	color: rgba(255, 255, 255, .9);
	transition: background-color .2s ease, color .2s ease;
}
.main-nav__list a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.mobile-nav-toggle {
	display: none;
	width: 44px; height: 44px;
	padding: 0;
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 12px;
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.mobile-nav-toggle span:not(.screen-reader-text) {
	display: block; width: 18px; height: 2px; border-radius: 2px; background: #fff;
}

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
	position: relative;
	background: var(--ink-900);
	padding: 0;
	overflow: hidden;
}
.hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.hero__scrim { position: absolute; inset: 0; background: var(--grad-hero-scrim); }
.hero--contact .hero__scrim { background: var(--grad-hero-scrim-contact); }

.hero__inner {
	position: relative;
	z-index: 2;
	padding-top: 176px;
	padding-bottom: 112px;
}
.hero--contact .hero__inner { padding-bottom: 128px; }

.hero__content { max-width: 672px; }

/* Badge: #f9e8fd bg, #8c34b2 text, Inter SemiBold 12/16 */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--pink-light);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: var(--purple-500);
}
.badge svg { width: 14px; height: 14px; flex: none; }

/* H1: Sora Regular 60/64.8, tracking -1.2 */
.hero h1 {
	position: relative;
	margin-top: 20px;
	font-size: 60px;
	line-height: 64.8px;
	letter-spacing: -1.2px;
	color: var(--white);
}
.hero--contact h1 { line-height: 75px; }

.hero h1 .accent {
	position: relative;
	display: inline-block;
	color: var(--teal-500);
}
/* Hand-drawn underline, sized to exactly the width of the accent word */
.hero h1 .accent .accent__underline {
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 100%;
	max-width: 100%;
	height: 14px;
	color: var(--teal-500);
	pointer-events: none;
}
.hero--contact h1 .accent {
	color: transparent;
	background-image: var(--grad-accent-text);
	-webkit-background-clip: text;
	background-clip: text;
}

.hero__lead {
	margin-top: 24px;
	max-width: 576px;
	font-size: 18px;
	line-height: 29.25px;
	color: rgba(255, 255, 255, .85);
}
.hero--contact .hero__lead { margin-top: 20px; line-height: 28px; }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* Hero feature grid: 4 × 156px, gap 16 */
.hero__features {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 156px));
	gap: 16px;
	margin-top: 40px;
	max-width: 672px;
}
.hero__feature { display: flex; align-items: center; gap: 10px; }
.hero__feature .icon-chip {
	display: grid;
	place-items: center;
	width: 36px; height: 36px;
	flex: none;
	border-radius: 8px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
	color: var(--teal-500);
}
.hero__feature .icon-chip svg { width: 18px; height: 18px; }
.hero__feature span:last-child {
	font-weight: 500;
	font-size: 12.8px;
	line-height: 16px;
	color: rgba(255, 255, 255, .85);
}

/* Contact hero inline contact links */
.hero__contact { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.hero__contact a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, .85);
	transition: color .2s ease;
}
.hero__contact a:hover { color: var(--teal-500); }
.hero__contact svg { width: 16px; height: 16px; flex: none; color: var(--teal-500); }

/* ==========================================================================
   7. Trust strip
   ========================================================================== */

.trust-bar {
	background: var(--white);
	border-top: 1px solid var(--border);
	border-bottom: 1px solid var(--border);
}
.trust-bar__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
}
.trust-bar__item {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 24px;
	border-right: 1px solid var(--border);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-900);
	text-align: left;
}
.trust-bar__item:last-child { border-right: 0; }
.trust-bar__item svg { width: 20px; height: 20px; flex: none; color: var(--teal-600); }

/* ==========================================================================
   8. Why choose us
   ========================================================================== */

.features-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 56px;
}

.feature-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease, border-color .3s ease;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #cbd5e1; }

.feature-card__icon {
	display: grid;
	place-items: center;
	width: 52px; height: 52px;
	border-radius: 12px;
	background: var(--grad-icon);
	color: var(--teal-600);
}
.feature-card__icon svg { width: 24px; height: 24px; }

.feature-card h3 {
	margin-top: 20px;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: -0.36px;
	color: var(--ink-900);
}
.feature-card p {
	margin-top: 8px;
	font-size: 14px;
	line-height: 22.75px;
	color: var(--ink-500);
}

/* ==========================================================================
   9. Courses
   ========================================================================== */

.section--courses { background: var(--grad-courses-bg); }

.courses-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 56px;
}

.course-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	overflow: hidden;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.course-card__media {
	position: relative;
	height: 208px;
	background: var(--teal-light) center/cover no-repeat;
}
.course-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(11, 18, 32, .6) 0%, rgba(11, 18, 32, 0) 100%);
}

.course-card__tag {
	position: absolute;
	top: 16px; left: 16px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--pink-light);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: var(--purple-500);
}
.course-card__num {
	position: absolute;
	left: 16px; bottom: 12px;
	z-index: 2;
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 36px;
	line-height: 40px;
	color: rgba(255, 255, 255, .9);
}

.course-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 24px;
}
.course-card__body h3 {
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.4px;
	color: var(--ink-900);
}
.course-card__desc {
	margin-top: 8px;
	font-size: 14px;
	line-height: 22.75px;
	color: var(--ink-500);
}

.course-card__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: var(--teal-light);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: var(--teal-600);
}
.chip svg { width: 14px; height: 14px; flex: none; }
.chip--neutral { background: var(--slate-100); color: var(--ink-700); }

.course-card__footer {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.course-card__foot-spacer { margin-top: 24px; }
.course-card__price { display: flex; flex-direction: column; gap: 2px; }
.course-card__price span {
	font-size: 12px;
	line-height: 16px;
	color: var(--ink-400);
}
.course-card__price strong {
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: var(--ink-900);
}
.course-card__price strong em {
	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-400);
}

/* ==========================================================================
   10. How to book / steps
   ========================================================================== */

.steps { display: flex; flex-direction: column; gap: 12px; }
.steps--home { max-width: 704px; margin-inline: auto; margin-top: 48px; }

.step {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s ease;
}
.step:hover { transform: translateX(4px); box-shadow: var(--shadow-sm); }

.step-number {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	flex: none;
	border-radius: 12px;
	background: var(--grad-step);
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: var(--white);
}

.step h4 {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-900);
}
.step p {
	margin-top: 2px;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-500);
}

/* Callout row */
.step--highlight {
	align-items: center;
	background: var(--grad-callout);
	border: 1px solid var(--border);
}
.step--highlight:hover { transform: none; }
.step--highlight .step-number {
	background: var(--white);
	color: var(--teal-600);
	box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
}
.step--highlight .step-number svg { width: 20px; height: 20px; }
.step--highlight p { font-size: 12px; line-height: 16px; }

/* ==========================================================================
   11. Founder note
   ========================================================================== */

.founder {
	display: grid;
	grid-template-columns: 460.8px minmax(0, 1fr);
	gap: 64px;
	align-items: center;
}

.founder__media { position: relative; width: 384px; max-width: 100%; }
.founder__media-frame { position: relative; padding-bottom: 24px; }
.founder__media-backdrop {
	position: absolute;
	top: -12px; left: -12px; right: -12px; bottom: 12px;
	border-radius: 32px;
	background: var(--grad-icon);
	transform: rotate(-2deg);
}
.founder__media img,
.founder__media .photo-slot {
	position: relative;
	z-index: 2;
	width: 384px;
	max-width: 100%;
	height: 458px;
	object-fit: cover;
	border-radius: 28px;
	transform: rotate(1deg);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), var(--shadow-lg);
}

.founder__badge {
	position: absolute;
	z-index: 3;
	left: 8px;
	bottom: 0;
	display: inline-block;
	padding: 8px 16px;
	background: var(--white);
	border-radius: 12px;
	box-shadow: 0 0 0 1px var(--border), var(--shadow-md);
	transform: rotate(-3deg);
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 20px;
	line-height: 20px;
	color: var(--teal-600);
}

.founder__eyebrow {
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: var(--purple-500);
}
.founder blockquote {
	margin: 12px 0 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 27.2px;
	line-height: 37.4px;
	color: var(--ink-900);
}
.founder__name {
	margin-top: 24px;
	font-family: var(--font-script);
	font-weight: 400;
	font-size: 30px;
	line-height: 30px;
	color: var(--ink-900);
}
.founder__role {
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-500);
}

/* ==========================================================================
   12. Testimonials
   ========================================================================== */

.testimonials-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 56px;
}

.testimonial-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.stars { display: flex; gap: 2px; color: #f59e0b; }
.stars svg { width: 16px; height: 16px; }

.testimonial-card p {
	flex: 1;
	margin-top: 16px;
	font-size: 15.2px;
	line-height: 24.7px;
	color: var(--ink-700);
}

.testimonial-person {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.testimonial-person img,
.testimonial-person .photo-slot {
	width: 44px; height: 44px;
	min-height: 0;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 0 0 2px var(--teal-light);
}
.testimonial-person div { display: flex; flex-direction: column; }
.testimonial-person strong {
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-900);
}
.testimonial-person span {
	font-size: 12px;
	line-height: 16px;
	color: var(--ink-500);
}

/* ==========================================================================
   13. Group training
   ========================================================================== */

.section--group { background: var(--grad-group-bg); }

.group-cta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 32px;
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.group-cta__media {
	position: relative;
	min-height: 496px;
	background: var(--teal-light) center/cover no-repeat;
}
.group-cta__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(to right, rgba(11, 18, 32, .4), rgba(11, 18, 32, 0));
}

.group-cta__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 48px;
}
.group-cta__body h2 {
	max-width: 487px;
	margin-top: 16px;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -0.72px;
}
.group-cta__body > p {
	max-width: 487px;
	margin-top: 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-700);
}

.group-cta__checks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 24px;
	width: 100%;
}
.group-cta__checks li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-900);
}
.group-cta__checks svg { width: 16px; height: 16px; flex: none; color: var(--teal-600); }

.group-cta__body .btn { margin-top: 32px; }

/* ==========================================================================
   14. FAQ
   ========================================================================== */

.faq-head { max-width: 832px; margin-inline: auto; text-align: center; }
.faq-head .eyebrow { letter-spacing: 2.5344px; }
.faq-head h2 {
	margin-top: 12px;
	font-size: 48px;
	line-height: 48px;
	letter-spacing: -0.96px;
}
.faq-head p {
	max-width: 576px;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-700);
}

/* One card containing all rows */
.faq-list {
	max-width: 832px;
	margin: 48px auto 0;
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 0; }

.faq-item__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 20px 24px;
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	line-height: 24px;
	color: var(--ink-900);
	transition: background-color .2s ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: rgba(241, 245, 249, .6); }

.faq-item__icon {
	display: grid;
	place-items: center;
	width: 32px; height: 32px;
	flex: none;
	border: 1px solid var(--border);
	border-radius: 9999px;
	color: var(--ink-500);
	transition: background-color .3s ease, border-color .3s ease, color .3s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}
.faq-item__icon svg { width: 16px; height: 16px; }
.faq-item[open] .faq-item__icon {
	background: var(--teal-500);
	border-color: var(--teal-500);
	color: var(--white);
	transform: rotate(45deg);
}

.faq-item__a {
	padding: 0 24px 20px;
	font-size: 14px;
	line-height: 22.75px;
	color: var(--ink-500);
}
.faq-item[open] .faq-item__a { animation: ektt-faq-open .35s cubic-bezier(.16, 1, .3, 1); }

@keyframes ektt-faq-open {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: translateY(0); }
}

.faq-foot {
	max-width: 832px;
	margin: 32px auto 0;
	text-align: center;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-500);
}
.faq-foot a { color: var(--teal-600); }
.faq-foot a:hover { text-decoration: underline; }

/* ==========================================================================
   15. Footer
   ========================================================================== */

.site-footer {
	position: relative;
	background: var(--grad-footer);
	overflow: hidden;
	color: rgba(202, 213, 226, .8);
}
.site-footer::before,
.site-footer::after {
	content: '';
	position: absolute;
	width: 384px; height: 384px;
	border-radius: 9999px;
	filter: blur(64px);
	pointer-events: none;
}
.site-footer::before {
	top: -128px; right: -128px;
	opacity: .3;
	background: radial-gradient(circle, rgba(16, 193, 187, 1) 0%, rgba(16, 193, 187, 0) 70%);
}
.site-footer::after {
	bottom: -96px; left: -128px;
	opacity: .25;
	background: radial-gradient(circle, rgba(140, 52, 178, 1) 0%, rgba(140, 52, 178, 0) 70%);
}

.footer__top {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 326.25px 233.05px 233.05px minmax(0, 1fr);
	gap: 48px;
	padding-top: 64px;
}

.footer__brand .site-logo__text { color: #fff; }
.footer__brand .site-logo__img { height: 64px; }

.footer__desc {
	margin-top: 20px;
	max-width: 320px;
	font-size: 14px;
	line-height: 22.75px;
	color: rgba(202, 213, 226, .8);
}

.footer__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 12px 16px;
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	color: var(--teal-500);
}
.footer__badge svg { width: 20px; height: 20px; flex: none; }
.footer__badge span { display: flex; flex-direction: column; }
.footer__badge strong {
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
	color: #fff;
}
.footer__badge em {
	font-style: normal;
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
	color: var(--teal-500);
}

.footer-col__title {
	font-family: var(--font-heading);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -0.28px;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

.footer-col__list { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.footer-col__list a,
.footer-col__list li {
	font-size: 14px;
	line-height: 20px;
	color: rgba(202, 213, 226, .8);
	transition: color .2s ease;
}
.footer-col__list a:hover { color: var(--teal-500); }

.footer-col__list--contact { gap: 12px; }
.footer-col__list--contact li { display: flex; align-items: flex-start; gap: 12px; }
.footer-col__list--contact svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--teal-500); }

.footer__social { display: flex; gap: 12px; margin-top: 20px; }
.footer__social a {
	display: grid;
	place-items: center;
	width: 40px; height: 40px;
	background: rgba(255, 255, 255, .05);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 12px;
	color: rgba(202, 213, 226, .9);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.footer__social a:hover { background: rgba(255, 255, 255, .12); color: #fff; transform: translateY(-2px); }
.footer__social svg { width: 20px; height: 20px; }

.footer__bottom { position: relative; z-index: 2; margin-top: 56px; }
.footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 24px;
	padding-bottom: 24px;
	border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__bottom p,
.footer__legal a {
	font-size: 12px;
	line-height: 16px;
	color: var(--ink-400);
}
.footer__legal { display: flex; gap: 20px; }
.footer__legal a:hover { color: #fff; }

/* ==========================================================================
   16. Contact page layout + form
   ========================================================================== */

.contact-layout {
	display: grid;
	grid-template-columns: 470.39px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-top: 80px;
}

.contact-layout h2 {
	margin-top: 12px;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: -0.48px;
}
.contact-layout .contact-intro {
	margin-top: 16px;
	font-size: 14px;
	line-height: 22.75px;
	color: var(--ink-700);
}
.contact-layout .steps { margin-top: 24px; }
.contact-layout .step { padding: 16px; }
.contact-layout .step-number { width: 40px; height: 40px; }
.contact-layout .step h4 { font-size: 14px; line-height: 20px; }

.consult-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--shadow-card);
}

.consult-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 24px 32px;
	background: var(--grad-form-head);
}
.consult-card__head .icon-chip {
	display: grid;
	place-items: center;
	width: 48px; height: 48px;
	flex: none;
	border-radius: 12px;
	background: rgba(255, 255, 255, .15);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .2);
	color: #fff;
}
.consult-card__head .icon-chip svg { width: 24px; height: 24px; }
.consult-card__head h3 {
	font-size: 20px;
	line-height: 28px;
	letter-spacing: -0.4px;
	color: #fff;
}
.consult-card__head p {
	margin-top: 2px;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, .85);
}

.consult-form { padding: 32px; }

.form-row { display: flex; flex-direction: column; margin-top: 20px; }
.form-row:first-of-type { margin-top: 0; }
.form-row label {
	padding-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-900);
}
.form-row input[type="text"],
.form-row input[type="tel"],
.form-row input[type="email"],
.form-row select,
.form-row textarea {
	width: 100%;
	padding: 14px 16px;
	background: rgba(248, 250, 252, .7);
	border: 1px solid var(--border);
	border-radius: 16px;
	font-size: 15.2px;
	line-height: 22.8px;
	color: var(--ink-900);
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--ink-400); }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
	outline: 0;
	background: #fff;
	border-color: var(--teal-500);
	box-shadow: 0 0 0 3px rgba(16, 193, 187, .15);
}
.form-row textarea { min-height: 121px; resize: vertical; }
.form-row select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230b1220' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 20px center;
	padding-right: 44px;
}

.form-row--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	padding-block: 20px;
	margin-top: 0;
}
.form-row--checkbox input {
	width: 18px; height: 18px;
	margin: 2px 0 0;
	flex: none;
	border: 1px solid #767676;
	border-radius: 2px;
	accent-color: var(--teal-500);
}
.form-row--checkbox label {
	padding: 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--ink-700);
}

.form-row.has-error input,
.form-row.has-error select,
.form-row.has-error textarea { border-color: #dc2626; }
.field-error {
	display: none;
	margin-top: 6px;
	font-size: 12px;
	line-height: 16px;
	color: #dc2626;
}
.form-row.has-error .field-error { display: block; }

.form-honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-feedback {
	display: none;
	margin-bottom: 20px;
	padding: 14px 16px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 20px;
}
.form-feedback.is-visible { display: block; }
.form-feedback--success { background: var(--teal-light); color: #0f766e; }
.form-feedback--error { background: #fee2e2; color: #b91c1c; }

.form-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
	font-size: 12px;
	line-height: 16px;
	color: var(--ink-400);
	text-align: center;
}
.form-note svg { width: 14px; height: 14px; flex: none; }

/* ==========================================================================
   17. Photo placeholders (used until real photography is uploaded)
   ========================================================================== */

.photo-slot--placeholder {
	position: relative;
	min-height: 220px;
	background: var(--grad-icon);
}
.photo-slot--placeholder::after {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	width: 44px; height: 36px;
	transform: translate(-50%, -50%);
	border: 2px solid rgba(11, 167, 162, .45);
	border-radius: 8px;
}

/* ==========================================================================
   18. Scroll reveal (mirrors the "Reveal" wrappers in the Figma prototype)
   ========================================================================== */

.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
	will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

.reveal-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal-stagger.is-visible > * { opacity: 1; transform: none; }
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 90ms; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 180ms; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 270ms; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 360ms; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 450ms; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.reveal,
	.reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (max-width: 1200px) {
	.founder { grid-template-columns: 400px minmax(0, 1fr); gap: 48px; }
	.footer__top { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap: 32px; }
	.contact-layout { grid-template-columns: 380px minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 1024px) {
	:root { --section-y: 72px; }

	.hero h1 { font-size: 48px; line-height: 54px; letter-spacing: -0.96px; }
	.hero--contact h1 { line-height: 60px; }
	.hero__inner { padding-top: 148px; padding-bottom: 88px; }
	.hero__features { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.features-grid,
	.testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.trust-bar__list { grid-template-columns: repeat(3, 1fr); }
	.trust-bar__item:nth-child(3) { border-right: 0; }

	.founder { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.founder__media { margin-inline: auto; }

	.group-cta { grid-template-columns: minmax(0, 1fr); }
	.group-cta__media { min-height: 320px; }
	.group-cta__body { padding: 32px; }
	.group-cta__body h2 { font-size: 30px; line-height: 36px; }

	.contact-layout { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; }

	.faq-head h2 { font-size: 38px; line-height: 42px; }
}

@media (max-width: 900px) {
	.main-nav {
		position: absolute;
		top: 88px; left: 16px; right: 16px;
		padding: 12px;
		background: rgba(11, 18, 32, .97);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border: 1px solid rgba(255, 255, 255, .12);
		border-radius: 16px;
		display: none;
	}
	.site-header.is-open .main-nav { display: block; }
	.main-nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
	.main-nav__list a { padding: 12px 16px; }
	.mobile-nav-toggle { display: flex; }
	.site-header__actions .btn { display: none; }
}

@media (max-width: 780px) {
	:root { --gutter: 20px; --section-y: 64px; }

	.hero h1 { font-size: 38px; line-height: 44px; letter-spacing: -0.76px; }
	.hero--contact h1 { line-height: 48px; }
	.hero h1 .accent .accent__underline { bottom: -10px; height: 16px; }
	.hero__lead { font-size: 16px; line-height: 26px; }
	.hero__inner { padding-top: 132px; padding-bottom: 64px; }
	.hero__actions .btn { flex: 1 1 100%; }

	.section-title,
	.group-cta__body h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.56px; }
	.faq-head h2 { font-size: 30px; line-height: 36px; letter-spacing: -0.6px; }

	.trust-bar__list { grid-template-columns: repeat(2, 1fr); }
	.trust-bar__item { border-right: 0; border-bottom: 1px solid var(--border); padding: 18px 12px; font-size: 13px; }
	.trust-bar__item:nth-child(odd) { border-right: 1px solid var(--border); }

	.features-grid,
	.courses-grid,
	.testimonials-grid { grid-template-columns: minmax(0, 1fr); }

	.founder__media,
	.founder__media img,
	.founder__media .photo-slot { width: 100%; height: auto; aspect-ratio: 384 / 458; }
	.founder blockquote { font-size: 21px; line-height: 30px; }

	.group-cta__checks { grid-template-columns: minmax(0, 1fr); }
	.group-cta__body { padding: 24px; }

	.consult-card__head { padding: 20px; }
	.consult-form { padding: 20px; }

	.footer__top { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; }
	.footer__bottom-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* WhatsApp floating live-chat button */
.whatsapp-float {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 58px;
	height: 58px;
	border-radius: 50%;
	background: #25D366;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	z-index: 999;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float svg {
	width: 30px;
	height: 30px;
}
.whatsapp-float:hover {
	transform: scale(1.08);
	box-shadow: 0 8px 24px rgba(0,0,0,0.32);
	color: #fff;
}
@media (max-width: 480px) {
	.whatsapp-float {
		right: 16px;
		bottom: 16px;
		width: 52px;
		height: 52px;
	}
}
/* Footer developer credit */
.footer__credit {
	display: inline-block;
	margin-left: 6px;
	opacity: 0.85;
}
.footer__credit a {
	color: inherit;
	text-decoration: underline;
}