/* Homepage section styles — Doctor AI front page. */

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.hero {
	background-color: #595BA7;
	background-size: cover;
	background-position: center;
	padding: calc(var(--header-height) + 60px) 24px 150px;
	min-height: 120vh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(89, 91, 167, .45) 0%, rgba(136, 108, 234, .4) 36%, rgba(92, 194, 239, .35) 67%, rgba(165, 217, 208, .32) 100%);
	z-index: 0;
}

.hero::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 160px;
	background: var(--color-bg);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: scale(1.6, 1);
}

.hero__inner {
	max-width: 720px;
	margin-inline: auto;
	text-align: center;
	position: relative;
	z-index: 1;
}

.hero__logo {
	max-width: 340px;
	margin: 0 auto 40px;
}

.hero__title {
	font-family: var(--font-body);
	font-size: 26px;
	font-weight: 400;
	color: var(--color-bg);
}

.hero__headline {
	margin-top: 14px;
	font-family: var(--font-body);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.25;
	background: linear-gradient(90deg, #A5D9D0 0%, #5CC2EF 37.72%, #886CEA 66.67%, #595BA7 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(1.41px 1.41px 2px rgba(0, 0, 0, .6));
}

.hero__actions {
	margin-top: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	flex-wrap: wrap;
}

.hero .btn--outline {
	color: #fff;
	border-color: #fff;
}

/* -------------------------------------------------------------------------
   Intro / mission
   ---------------------------------------------------------------------- */
.intro {
	position: relative;
	background: var(--color-bg);
	padding-bottom: 90px;
}

.intro__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: 60px 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.intro__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.intro__text {
	flex: 1 1 420px;
	text-align: right;
}

.intro__lead {
	font-size: 28px;
	line-height: 1.7;
	text-align: right;
}

.intro__tagline {
	display: block;
	width: fit-content;
	margin-top: 0;
	margin-inline-end: auto;
	font-family: var(--font-body);
	font-size: 72px;
	font-weight: 700;
	line-height: 1.25;
	text-align: right;
	background: linear-gradient(90deg, #A5D9D0 0%, #5CC2EF 37.72%, #886CEA 66.67%, #595BA7 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
	filter: drop-shadow(1.41px 1.41px 2px rgba(0, 0, 0, .6));
}

.intro__text .btn {
	margin-top: 20px;
}

.intro__photo {
	flex: 0 0 320px;
	max-width: 320px;
	overflow: hidden;
}

.intro__photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.intro__wave {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 70px;
	background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-sky) 100%);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	transform: scale(1.4, 1);
}

/* -------------------------------------------------------------------------
   Tools carousel
   ---------------------------------------------------------------------- */
.tools {
	background: var(--color-bg);
	padding: 20px 24px 80px;
	text-align: center;
}

.tools__inner {
	max-width: var(--container-width);
	margin-inline: auto;
}

.tools .section-subtitle {
	margin-inline: auto;
	width: fit-content;
}

.tools-carousel {
	max-width: 980px;
	margin: 50px auto 0;
	position: relative;
}

.tools-carousel__viewport {
	overflow: hidden;
}

.tools-carousel__track {
	display: flex;
	gap: 23px;
	will-change: transform;
}

/* Card geometry copied from the live slideshow: 308px wide, square photo,
   dark panel, and a tag banner rounded only on its inline end. */
.tool-card {
	flex: 0 0 calc((100% - 46px) / 3);
	display: flex;
	flex-direction: column;
	text-align: start;
	background: #100C17;
	border-radius: 10px;
	overflow: hidden;
}

.tool-card__image {
	aspect-ratio: 308 / 309;
	overflow: hidden;
}

.tools .tool-card__image img,
.tools-carousel .tool-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tool-card__tag {
	margin-top: 24px;
	margin-inline-end: 24px;
	padding: 10px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	border-start-end-radius: 10px;
	border-end-end-radius: 10px;
}

.tool-card__tag--sky { background: #5DC3EF; }
.tool-card__tag--teal { background: #A5D9D1; }
.tool-card__tag--purple { background: #886CEA; }

.tool-card__text {
	margin-top: 30px;
	padding-inline: 10px;
	color: #fff;
	font-size: 16px;
	line-height: 24px;
}

.tool-card__link {
	margin-top: auto;
	padding: 20px 10px;
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	text-decoration: none;
}

.tool-card__link:hover {
	text-decoration: underline;
}

.tools-carousel__dots {
	margin-top: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
}

.tools-carousel__dot {
	width: 6px;
	height: 6px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #0A2E5A;
	cursor: pointer;
}

.tools-carousel__dot.is-active {
	width: 9px;
	height: 9px;
	background: transparent;
	border: 1.5px solid #0A2E5A;
	cursor: default;
}

/* Side arrows. They sit in the gutter between the 980px carousel and the
   1240px container on wide screens, and tuck over the card edges once that
   gutter runs out. The shared chevron points toward the inline start, so the
   next arrow is the mirrored one. */
.tools-carousel__arrow {
	position: absolute;
	/* The dots row is part of the carousel box, so pull up by half of it to
	   land on the middle of the cards rather than the middle of the block. */
	top: 50%;
	transform: translateY(calc(-50% - 18px));
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #fff;
	color: #0A2E5A;
	box-shadow: 0 2px 10px rgba(10, 46, 90, .22);
	cursor: pointer;
	z-index: 2;
	transition: background .15s ease, color .15s ease, opacity .15s ease;
}

.tools-carousel__arrow svg {
	width: 22px;
	height: 22px;
	display: block;
}

.tools-carousel__arrow--prev {
	inset-inline-start: -62px;
}

.tools-carousel__arrow--next {
	inset-inline-end: -62px;
}

.tools-carousel__arrow--next svg {
	transform: scaleX(-1);
}

.tools-carousel__arrow:hover {
	background: #0A2E5A;
	color: #fff;
}

.tools-carousel__arrow:disabled {
	opacity: .35;
	cursor: default;
	box-shadow: none;
}

.tools-carousel__arrow[hidden] {
	display: none;
}

/* Below the point where the container gutter disappears the arrows overlap
   the outer cards instead of sitting beside them. */
@media (max-width: 1150px) {
	.tools-carousel__arrow--prev {
		inset-inline-start: 6px;
	}

	.tools-carousel__arrow--next {
		inset-inline-end: 6px;
	}

	.tools-carousel__arrow {
		width: 38px;
		height: 38px;
		background: rgba(255, 255, 255, .92);
	}

	.tools-carousel__arrow svg {
		width: 19px;
		height: 19px;
	}
}

/* -------------------------------------------------------------------------
   LinkedIn CTA
   ---------------------------------------------------------------------- */
.linkedin-cta {
	background: var(--color-bg);
	padding: 20px 24px 80px;
	text-align: center;
}

.linkedin-cta__inner {
	max-width: 720px;
	margin-inline: auto;
}

.linkedin-cta__heading {
	font-family: var(--font-accent);
	font-size: 34px;
	font-weight: 600;
	line-height: 1.5;
	text-align: right;
}

.linkedin-cta__card {
	display: block;
	margin: 34px auto 0;
	max-width: 720px;
	border: 1px solid #dcdce6;
	border-radius: 4px;
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Fit check
   ---------------------------------------------------------------------- */
.fit-check {
	background: var(--color-bg);
	padding: 20px 24px 90px;
	text-align: center;
}

.fit-check__inner {
	max-width: 720px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.fit-check__text {
	flex: 1 1 480px;
	max-width: 420px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.8;
	text-align: right;
}

.fit-check .btn {
	flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Why here (dark section)
   ---------------------------------------------------------------------- */
.why-here {
	background: linear-gradient(160deg, #0c0c16 0%, var(--color-ink) 55%, #241f45 100%);
	color: #d6d6e6;
	padding: 70px 24px;
}

.why-here__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	display: flex;
	gap: 60px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.why-here__text {
	flex: 1 1 480px;
}

.why-here__text p {
	margin-top: 16px;
	font-size: 15px;
	line-height: 1.8;
}

.why-here__question {
	margin-top: 26px !important;
	font-weight: 700;
	color: #fff;
	text-decoration: underline;
}

.why-here__list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.why-here__list li {
	padding-inline-start: 18px;
	position: relative;
	font-size: 15px;
}

.why-here__list li::before {
	content: '•';
	position: absolute;
	inset-inline-start: 0;
	color: var(--color-sky);
}

.why-here__media {
	flex: 1 1 380px;
	position: relative;
	min-height: 360px;
}

.why-here__img {
	position: absolute;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
	object-fit: cover;
}

.why-here__img--a {
	width: 62%;
	top: 0;
	inset-inline-end: 0;
}

.why-here__img--b {
	width: 42%;
	top: 46%;
	inset-inline-start: 0;
}

.why-here__badge {
	position: absolute;
	bottom: 0;
	inset-inline-start: 10%;
	border-radius: 10px;
	padding: 18px 22px;
	text-align: center;
	color: #fff;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .3);
}

.why-here__badge--purple {
	background: var(--color-purple);
	top: 10%;
	inset-inline-start: -6px;
	bottom: auto;
}

.why-here__badge--teal {
	background: var(--color-teal-light);
	color: var(--color-ink);
	bottom: 4%;
	inset-inline-start: 4%;
}

.why-here__badge-num {
	display: block;
	font-family: var(--font-accent);
	font-size: 28px;
	font-weight: 700;
}

.why-here__badge-label {
	display: block;
	font-size: 12px;
}

/* -------------------------------------------------------------------------
   News
   ---------------------------------------------------------------------- */
.news {
	position: relative;
	isolation: isolate;
	background: linear-gradient(90deg, #595BA7 0%, #5CC2EF 100%);
	padding: 70px 24px 90px;
	text-align: center;
	overflow: hidden;
}

/* The live site lays the "AI revolution" photo over the gradient at 3%,
   which reads as a faint texture rather than a picture. */
.news__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: 50% 50%;
	opacity: .03;
	pointer-events: none;
}

/* Dark wave band pinned to the bottom edge, tallest in the middle. Same
   path the live site serves, filled #1F1F1F. */
.news__divider {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: -1;
	height: 200px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 125.7 1920 174.3' width='100%25' height='100%25'%3E%3Cpath fill='%231F1F1F' d='M1920 287.7c-480 0-480-162-960-162s-480 162-960 162V300h1920v-12.3z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-position: left bottom;
	background-repeat: repeat-x;
	pointer-events: none;
}

.news__inner {
	position: relative;
	max-width: var(--container-width);
	margin-inline: auto;
}

/* Beats the global h2 colour that the Elementor kit sets on this page. */
.news .section-title {
	color: #fff;
}

.news__all {
	margin-top: 12px;
	font-size: 25px;
	color: #fff;
}

.news__all-link {
	text-decoration: underline;
	color: inherit;
}

.news__rule {
	display: block;
	width: 60px;
	height: 2px;
	margin: 26px auto 0;
	background: #fff;
}

.news__carousel {
	overflow: hidden;
	margin-top: 40px;
}

.news__track {
	display: flex;
	gap: 30px;
	transition: transform .4s ease;
	will-change: transform;
}

/* Card styling mirrors the live Wix post list: mint panel, square corners,
   no shadow, and title/excerpt clamped so every card ends up the same
   height. */
.news-card {
	flex: 0 0 calc((100% - 60px) / 3);
	text-align: start;
	background: #D0ECE7;
	overflow: hidden;
}

.news-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.news-card__image {
	aspect-ratio: 319 / 239;
	overflow: hidden;
}

/* Scoped under .news so this outranks Elementor's own "img { height: auto }",
   which loads after the theme stylesheet and otherwise leaves the photo
   short of the bottom of its box. */
.news .news-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-card__body {
	padding: 28px 16px 25px;
}

.news-card__date {
	display: block;
	font-size: 12px;
	color: #886CAE;
}

.news-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 11px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.4;
	color: #595BA7;
}

.news-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: #886CAE;
}

/* Numbered pager, matching the live site: first / prev / page numbers /
   next / last, drawn over the dark wave band. */
.news__pagination {
	margin-top: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.news__pages {
	display: flex;
	align-items: center;
}

/* Specificity here has to beat the theme and Elementor button defaults,
   which otherwise paint these as solid purple pills. */
.news__pagination .news__step,
.news__pagination .news__page {
	min-width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #886CAE;
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	cursor: pointer;
	transition: color .2s;
}

.news__pagination .news__step {
	font-size: 18px;
}

.news__pagination .news__step:hover,
.news__pagination .news__page:hover {
	background: transparent;
	color: #fff;
}

.news__pagination .news__step:disabled {
	background: transparent;
	opacity: .35;
	cursor: default;
	pointer-events: none;
}

.news__pagination .news__page.is-active {
	color: #5CC2EF;
	cursor: default;
}

/* -------------------------------------------------------------------------
   Choosing us
   ---------------------------------------------------------------------- */
.choosing-us {
	background: var(--color-bg);
	padding: 80px 24px;
}

.choosing-us__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 60px;
	flex-wrap: wrap;
}

.choosing-us__media {
	flex: 1 1 320px;
	max-width: 380px;
}

.choosing-us__content {
	flex: 1 1 460px;
}

.choosing-us__lead {
	margin-top: 20px;
	font-size: 15px;
	line-height: 1.8;
	color: #555;
}

.choosing-us__features {
	margin-top: 36px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 30px;
	/* Verified against the snapshot: 1st item (הזדמנויות עסקיות) renders on
	   the left, 2nd (חידושים טכנולוגיים) on the right — LTR item flow. */
	direction: ltr;
}

.choosing-us__feature {
	direction: rtl;
}

.choosing-us__icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	color: var(--color-purple);
}

.choosing-us__icon svg {
	width: 100%;
	height: 100%;
}

.choosing-us__feature h3 {
	margin-top: 14px;
	font-size: 16px;
	font-weight: 700;
}

.choosing-us__feature p {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.7;
	color: #666;
}

/* -------------------------------------------------------------------------
   Testimonials
   ---------------------------------------------------------------------- */
.testimonials {
	background:
		radial-gradient(circle at 85% 30%, rgba(179, 163, 201, .5) 0%, rgba(179, 163, 201, 0) 35%),
		radial-gradient(circle at 10% 70%, rgba(92, 194, 239, .35) 0%, rgba(92, 194, 239, 0) 40%),
		var(--color-bg);
	padding: 70px 24px 90px;
}

.testimonials__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	text-align: center;
}

.testimonials__rating {
	font-size: 18px;
	font-weight: 600;
}

.testimonials__stars {
	color: #f5b301;
	letter-spacing: 2px;
	margin-inline: 6px;
}

.testimonials__grid {
	margin-top: 46px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	/* Verified against the snapshot: 1st card (דורון) renders leftmost —
	   LTR item flow, same as the tools carousel. */
	direction: ltr;
}

.testimonial-card {
	direction: rtl;
}

.testimonial-card {
	position: relative;
	min-height: 360px;
	border-radius: 4px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.testimonial-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(30, 45, 74, .88) 0%, rgba(30, 45, 74, .78) 100%);
	padding: 32px 26px;
	text-align: start;
	display: flex;
	flex-direction: column;
	color: #eef1f7;
}

.testimonial-card__name {
	font-family: var(--font-accent);
	font-size: 17px;
	font-weight: 600;
	color: #fff;
}

.testimonial-card__quote {
	margin-top: 20px;
	font-size: 14px;
	line-height: 1.8;
	font-style: italic;
}

.testimonial-card__mark {
	margin-top: auto;
	font-family: var(--font-accent);
	font-size: 40px;
	color: var(--color-teal-mid);
	align-self: flex-start;
}

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 900px) {
	.testimonials__grid {
		grid-template-columns: 1fr;
	}

	.tool-card {
		flex-basis: calc((100% - 23px) / 2);
	}

	.news-card {
		flex-basis: calc((100% - 30px) / 2);
	}

	.news__divider {
		height: 120px;
	}

	.news {
		padding-bottom: 110px;
	}

	.choosing-us__features {
		grid-template-columns: 1fr;
	}

	.why-here__inner {
		flex-direction: column;
	}

	.why-here__media {
		width: 100%;
	}

	.hero__headline {
		font-size: 30px;
	}

	.intro__tagline {
		font-size: 48px;
	}
}

@media (max-width: 600px) {
	.hero__title {
		font-size: 26px;
	}

	.intro__lead {
		font-size: 22px;
	}

	.intro__row,
	.fit-check__inner,
	.choosing-us__inner {
		flex-direction: column;
	}

	.news-card,
	.tool-card {
		flex-basis: 100%;
	}

	.news__all {
		font-size: 19px;
	}
}