/*

Theme Name: HelloDot Theme
Author: HelloDot Bartłomiej Hartuna
Author URI: https://hellodot.pl/
Version: 1.0.0
Text Domain: hellodot

*/

/* manrope-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/manrope-v20-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* manrope-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/manrope-v20-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  src: url('./fonts/mulish-v18-latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  src: url('./fonts/mulish-v18-latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* mulish-600 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  src: url('./fonts/mulish-v18-latin-ext-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	/* Ciemny tekst na jasnym tle */
	--text-dark:            #14232A;                    /* nagłówki, tekst główny */
	--text-dark-muted:      rgba(20, 35, 42, .82);      /* akapity — wyraźny, lekko spokojniejszy */
	--text-dark-soft:       rgba(20, 35, 42, .62);      /* podpisy, etykiety */

	/* Jasny tekst na ciemnym tle */
	--text-light:           rgba(237, 242, 244, .95);                    /* nagłówki, tekst główny na ciemnym */
	--text-light-muted:     rgba(237, 242, 244, .85);   /* akapity na ciemnym — wyraźny */
	--text-light-soft:      rgba(237, 242, 244, .75);   /* podpisy na ciemnym */

	/* Jasne tła */
	--bg:                   #F5F8F9;   /* główne tło strony — off-white z nutą chłodu */
	--bg-alt:               #FAFCFC;   /* BARDZO jasne — sekcje naprzemienne (jaśniejsze od bg) */
	--surface:              #FFFFFF;   /* karty na jasnym tle — czyste, "unoszą się" */

	/* Ciemne tła */
	--bg-dark:              #0F181C;   /* główna ciemna baza (hero, cennik, kontakt) */
	--bg-dark-alt:          #16232A;   /* jaśniejsza ciemna — wyróżnione karty na ciemnym */
	--bg-dark-soft:         #1E313A;   /* jeszcze jaśniejsza — hover na ciemnym */

	/* Na CIEMNYM tle — jasne przezroczystości (efekt szkła) */
	--glass-light:          rgba(237, 242, 244, .04);   /* tło karty-szkła na ciemnym */
	--glass-light-hover:    rgba(237, 242, 244, .07);   /* hover */
	--border-light:         rgba(237, 242, 244, .10);   /* obramowanie na ciemnym */
	--border-light-strong:  rgba(237, 242, 244, .18);   /* mocniejsze obramowanie / wyróżnione */

	/* Na JASNYM tle — ciemne przezroczystości (subtelna definicja) */
	--glass-dark:           rgba(15, 24, 28, .02);      /* ledwo widoczne tło karty na jasnym */
	--glass-dark-hover:     rgba(15, 24, 28, .04);
	--border-dark:          rgba(15, 24, 28, .08);      /* obramowanie na jasnym */
	--border-dark-strong:   rgba(15, 24, 28, .14);      /* mocniejsze obramowanie */

	--brand:                #1E7A9C;   /* główny — odrobinę żywszy niż #1E6E8C, bardziej "profesjonalny niebieski" */
	--brand-deep:           #165E78;   /* ciemniejszy — hover CTA, głębsze akcenty */
	--brand-bright:         #2E9BC4;   /* żywszy — akcenty, które mają "świecić" */
	--brand-soft:           #6BB2C8;   /* jasny — akcenty/ikony na ciemnym tle */
	--accent:               #34C3E8;   /* najżywszy — TYLKO kropka, hover, mikro-detale */

	/* Brand w przezroczystościach — tła tintów, glow, gradienty */
	--brand-05:             rgba(30, 122, 156, .05);
	--brand-10:             rgba(30, 122, 156, .10);
	--brand-15:             rgba(30, 122, 156, .15);
	--brand-25:             rgba(30, 122, 156, .25);
	--brand-40:             rgba(30, 122, 156, .40);




--shadow-card:          0 4px 20px rgba(15, 24, 28, .05);
  --shadow-card-hover:    0 8px 30px rgba(15, 24, 28, .09);
  --shadow-elevated:      0 12px 40px rgba(15, 24, 28, .14);
  --shadow-brand:         rgba(30, 122, 156, .22);   


	/* --background-primary: #FAFBFB;
	--background-primary-opacity-02: rgba(250, 251, 251, .02);
	--background-primary-opacity-04: rgba(250, 251, 251, .04);
	--background-primary-opacity-08: rgba(250, 251, 251, .08);
	--background-primary-opacity-12: rgba(250, 251, 251, .12);
	--background-primary-opacity-16: rgba(250, 251, 251, .16);
	--background-primary-opacity-32: rgba(250, 251, 251, .32);
	--background-secondary: #0F181C;
	--background-secondary-opacity-01: rgba(15, 24, 28, .01);
	--background-secondary-opacity-02: rgba(15, 24, 28, .02);
	--background-secondary-opacity-04: rgba(15, 24, 28, .04);
	--background-secondary-opacity-08: rgba(15, 24, 28, .08);
	--background-secondary-opacity-16: rgba(15, 24, 28, .16);

	--brand: #1E6E8C;
	--brand-opacity-05: rgba(30, 110, 140, .05);
	--brand-opacity-10: rgba(30, 110, 140, .10);
	--brand-opacity-20: rgba(30, 110, 140, .20);
	--brand-opacity-30: rgba(30, 110, 140, .30);
	--brand-opacity-40: rgba(30, 110, 140, .40);
	--brand-opacity-50: rgba(30, 110, 140, .50);
	--brand-soft: #6BAAC0;
	--brand-soft-opacity-02: rgba(107, 170, 192, .02);
	--brand-soft-opacity-05: rgba(107, 170, 192, .05);
	--brand-soft-opacity-10: rgba(107, 170, 192, .1);
	--brand-soft-opacity-15: rgba(107, 170, 192, .15);
	--brand-soft-opacity-25: rgba(107, 170, 192, .25);
	--brand-deep: #175A73;
	--brand-deep-opacity-02: rgba(23, 90, 115, .02);
	--brand-deep-opacity-04: rgba(23, 90, 115, .04);
	--brand-deep-opacity-08: rgba(23, 90, 115, .08);
	--brand-deep-opacity-16: rgba(23, 90, 115, .16); */

	--border-radius-very-small: .5rem;
	--border-radius-small: 1.5rem;
	--border-radius-medium: 2rem;
	--border-radius-large: 2.5rem;

	--gap-very-small: .25rem;
	--gap-small: 1.25rem;
	--gap-medium: 2rem;
	--gap-large: 2.75rem;
	--gap-extra-large: 3.75rem; 

	/* --dark-text: #0F1B20;
	--light-text: #EDF1F3;
	--light-text-secondary: rgba(237, 241, 243, .8); */

	--margin-very-small: .25rem;
	--margin-small: .75rem;
	--margin-medium: 1.5rem;

	--padding-very-small: 1rem;
	--padding-small: 1.5rem;
	--padding-medium: 2rem;
	--padding-large: 2.5rem;
}

* {
	border: none;
	box-sizing: border-box;
	color: var(--text-dark-muted);
	font-family: 'Mulish', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
	outline: none;
	padding: 0;
	-webkit-tap-highlight-color: transparent;
}

a:focus-visible, 
button:focus-visible {
	outline: 1px solid var(--brand);
    outline-offset: 4px;
}

::selection {
    background-color: var(--brand);
    color: var(--text-light);
}

::-moz-selection {
    background-color: var(--brand);
    color: var(--text-light);
}

html {
  	scroll-behavior: smooth;
}

body {
	background-color: var(--bg-alt);
	overflow-x: hidden;
}

section, footer {
	display: flex;
	flex-direction: column;
	padding-bottom: 3.5rem;
	padding-top: 3.5rem;
	row-gap: var(--gap-medium);
}

@media (min-width: 768px) {
	section, footer {
		padding-bottom: 4rem;
		padding-top: 4rem;
		row-gap: var(--gap-medium);
	}
}

@media (min-width: 1200px) {
	section, footer {
		padding-bottom: 4.5rem;
		padding-top: 4.5rem;
		row-gap: var(--gap-large);
	}
}

.container {
	inset: 0;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--padding-small);
	padding-right: var(--padding-small);
	width: 100%;
}

.container-zero {
    padding: 0;
    width: 100%;
}

@media (min-width: 576px) {
	.container {
		max-width: 540px;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}

	.container.max-768 {
		max-width: 768px;
	}
}

@media (min-width: 1200px) {
	.container {
		max-width: 1140px;
	}
	
	.container.max-992 {
		max-width: 992px;
	}
}

@media (min-width: 1400px) {
	.container {
		max-width: 1320px;
	}

	.container.max-1200 {
		max-width: 1200px;
	}
}

@media (min-width: 1600px) {
	.container {
		max-width: 1520px;
	}

	.container.max-1400 {
		max-width: 1400px;
	}
}

h2 {
	color: var(--text-dark);
	font-family: 'Manrope', sans-serif;
	font-size: 2.25rem;
	/* font-weight: 500; */
	letter-spacing: -1px;
	line-height: 1.2;
	max-width: 576px;
}

@media (min-width: 768px) {
	h2 {
		font-size: 2.75rem;
	}
}

@media (min-width: 1200px) {
	h2 {
		font-size: 3.25rem;
	}
}

p.price {
	background: linear-gradient(45deg, var(--text-light) 10%, var(--brand) 50%);
	background-clip: text;
	color: transparent;
	font-family: 'Manrope', sans-serif;
	font-size: 1.25rem;
	font-weight: 500 !important;
	/* letter-spacing: 0px; */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

@media (min-width: 768px) {
	p.price {
		font-size: 1.5rem;
	}
}

p.price span {
	font-family: inherit;
	font-size: 2.125rem;
	font-weight: inherit;
	/* letter-spacing: .5px; */
}

@media (min-width: 768px) {
	p.price span {
		font-size: 2.625rem;
	}
}

a {
	text-decoration: none;
}

.link {
	font-weight: 600;
	transition: all 200ms ease-in-out;
}

.link:hover {
	color: var(--brand);
	cursor: pointer;
}








.btn-primary {
	align-items: center;
	background: radial-gradient(circle at left bottom, var(--brand), var(--brand-bright));
	border-radius: var(--border-radius-large);
	color: var(--text-light);
	display: flex;
	font-size: 1.125rem;
	font-weight: 600;
	height: 3.5rem;
	padding: 0 var(--padding-medium);
	transition: all 200ms ease-in-out;
	width: fit-content;
}

.btn-primary:hover {
	box-shadow: 0 0 2.5rem -.5rem var(--shadow-brand);
	cursor: pointer;
	filter: brightness(1.1);
}












.content-left-grid {
	align-self: start;
	display: grid;
	grid-auto-flow: row;
	/* justify-content: center;
	justify-items: center; */
	/* padding: 0 var(--padding-very-small); */
	row-gap: var(--gap-small);
}

.content-left-grid h2, .content-left-grid h3, .content-left-grid p {
	max-height: 768px;
	text-align: left;
}

/* .content-left-grid > p {
	font-size: 1.125rem;
} */

@media (min-width: 992px) {
	.content-left-grid > p {
		/* font-size: 1.125rem; */
	}
}

.content-center-grid {
	display: grid;
	grid-auto-flow: row;
	justify-content: center;
	justify-items: center;
	padding: 0 var(--padding-very-small);
	row-gap: var(--gap-small);
}

.content-center-grid h2, .content-center-grid h3, .content-center-grid p {
	max-height: 768px;
	text-align: center;
}

/* .content-center-grid > p {
	font-size: 1.125rem;
} */

@media (min-width: 992px) {
	.content-center-grid > p {
		/* font-size: 1.125rem; */
	}
}

























/* website packages */
.website-packages-grid {
	background: var(--bg-dark);
	border-radius: var(--border-radius-small);
	column-gap: var(--gap-medium);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto auto;
	padding: var(--padding-very-small) var(--padding-very-small);
	row-gap: var(--gap-medium);
}

@media (min-width: 1200px) {
	.website-packages-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: auto;
		padding: var(--padding-small) var(--padding-small);
	}
}

.website-package {
	display: grid;
	grid-template-rows: auto auto auto auto 1fr auto;
	padding: var(--padding-small) var(--padding-very-small);
	row-gap: var(--gap-medium);
}

@media (min-width: 992px) {
	.website-package {
		padding: var(--padding-medium) var(--padding-small);
		row-gap: var(--gap-large);
	}
}

.website-package p {
	color: var(--text-light);
}

.website-package:nth-of-type(2) {
	background: radial-gradient(circle at 70% 30%, var(--glass-light-hover), var(--glass-dark));
	border-radius: var(--border-radius-small);
	outline: 1px solid var(--border-light-strong);
  	outline-offset: -1px;
}

.package-title {
	align-items: center;
	/* background: var(--background-primary-opacity-04); */
	display: flex;
	height: 2.5rem;
	padding: 0 var(--padding-very-small);
	position: relative;
	width: fit-content;
}

.package-title::before {
	border-bottom: 1px solid var(--brand-soft);
	border-left: 1px solid var(--brand-soft);
	bottom: -1px;
	content: "";
	height: .75rem;
	left: -1px;
	position: absolute;
	width: .75rem;
}

.package-title::after {
	border-right: 1px solid var(--brand-soft);
	border-top: 1px solid var(--brand-soft);
	content: "";
	height: .75rem;
	position: absolute;
	right: -1px;
	top: -1px;
	width: .75rem;
}

.package-title > p {
	color: var(--text-light);
	font-size: .75rem;
	/* font-weight: 600; */
	letter-spacing: 1px;
	text-transform: uppercase;
}

.package-include {
	display: flex;
	flex-direction: column;
	row-gap: var(--gap-medium);
}
.package-include > div {
	/* align-items: center; */
	column-gap: var(--gap-small);
	display: flex;
}

.package-include svg {
	fill: var(--brand-soft);
	flex-grow: 0;
	flex-shrink: 0;
	height: 1.5rem;
	width: 1.5rem;
}

.package-include p {
	color: var(--text-light-muted);
	font-weight: 400;
}

.price-info {
	margin-top: var(--margin-very-small);
	padding: 0 var(--padding-very-small);
	text-align: center;
}

















.realizations-grid {
    column-gap: var(--gap-small);
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-padding-left: var(--padding-small);
}

@media (min-width: 576px) {
    .realizations-grid {
        scroll-padding-left: calc((100vw - 540px) / 2 + var(--padding-small));
    }
}

@media (min-width: 768px) {
    .realizations-grid {
        scroll-padding-left: calc((100vw - 720px) / 2 + var(--padding-small));
    }
}

@media (min-width: 992px) {
    .realizations-grid {
        scroll-padding-left: calc((100vw - 960px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1200px) {
    .realizations-grid {
        scroll-padding-left: calc((100vw - 1140px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1400px) {
    .realizations-grid {
        scroll-padding-left: calc((100vw - 1320px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1600px) {
    .realizations-grid {
        scroll-padding-left: calc((100vw - 1520px) / 2 + var(--padding-small));
    }
}

.realization {
	/* background: red; */
	border-radius: var(--border-radius-small);
	outline: 1px solid var(--border-dark);
  	outline-offset: -1px;
    display: flex;
	flex-direction: column;
	row-gap: var(--gap-medium);
	flex-shrink: 0;
	max-width: 768px;
	height: auto;
	/* padding: var(--padding-medium) var(--padding-small); */
	position: relative;
	width: 80dvw;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.realization:nth-of-type(1) {
	margin-left: var(--padding-small);
}

.realization:last-of-type {
	margin-right: var(--padding-small);
}

@media (min-width: 576px) {
	.realization {
		/* width: 70dvw; */
	}

	.realization:nth-of-type(1) {
        margin-left: calc((100vw - 540px) / 2 + var(--padding-small));
    }
	
	.realization:last-of-type {
        margin-right: calc((100vw - 540px) / 2 + var(--padding-small));
    }
}

@media (min-width: 768px) {
	.realization {
		/* padding: var(--padding-medium); */
		/* width: 60dvw; */
	}

	.realization:nth-of-type(1) {
        margin-left: calc((100vw - 720px) / 2 + var(--padding-small));
    }
	
	.realization:last-of-type {
        margin-right: calc((100vw - 720px) / 2 + var(--padding-small));
    }
}

@media (min-width: 992px) {
	.realization {
		/* width: calc((960px - (var(--gap-small) + var(--padding-small) * 2)) / 2); */
	}

	.realization:nth-of-type(1) {
        margin-left: calc((100vw - 960px) / 2 + var(--padding-small));
    }
	
	.realization:last-of-type {
        margin-right: calc((100vw - 960px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1200px) {
	.realization {
		/* width: calc((1140px - (var(--gap-small) * 2 + var(--padding-small) * 2)) / 3); */
	}

	.realization:nth-of-type(1) {
        margin-left: calc((100vw - 1140px) / 2 + var(--padding-small));
    }
	
	.realization:last-of-type {
        margin-right: calc((100vw - 1140px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1400px) {
	.realization {
		/* width: calc((1320px - (var(--gap-small) * 2 + var(--padding-small) * 2)) / 3); */
	}

	.realization:nth-of-type(1) {
        margin-left: calc((100vw - 1320px) / 2 + var(--padding-small));
    }
	
	.realization:last-of-type {
        margin-right: calc((100vw - 1320px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1600px) {
	.realization {
		/* width: calc((1520px - (var(--gap-small) * 2 + var(--padding-small) * 2)) / 3); */
	}

	.realization:nth-of-type(1) {
        margin-left: calc((100vw - 1520px) / 2 + var(--padding-small));
    }
	
	.realization:last-of-type {
        margin-right: calc((100vw - 1520px) / 2 + var(--padding-small));
    }
}

.realization-image {
	height: 20rem;
	width: 100%;	
}





























/* opinions */
.opinions {
	/* background: var(--bg-alt); */
	/* background: radial-gradient(circle at center, transparent, var(--brand-deep-opacity-04)); */
}

.container:has(.opinions-grid) {
    /* overflow-x: visible; */
}

.opinions-grid {
    column-gap: var(--gap-small);
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    scroll-padding-left: var(--padding-small);
}

@media (min-width: 576px) {
    .opinions-grid {
        scroll-padding-left: calc((100vw - 540px) / 2 + var(--padding-small));
    }
}

@media (min-width: 768px) {
    .opinions-grid {
        scroll-padding-left: calc((100vw - 720px) / 2 + var(--padding-small));
    }
}

@media (min-width: 992px) {
    .opinions-grid {
        scroll-padding-left: calc((100vw - 960px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1200px) {
    .opinions-grid {
        scroll-padding-left: calc((100vw - 1140px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1400px) {
    .opinions-grid {
        scroll-padding-left: calc((100vw - 1320px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1600px) {
    .opinions-grid {
        scroll-padding-left: calc((100vw - 1520px) / 2 + var(--padding-small));
    }
}

.opinion {
	/* background: var(--surface); */
	/* background: var(--bg); */
	/* background: #F7FAFB; */
	border-radius: var(--border-radius-small);
	outline: 1px solid var(--border-dark);
  	outline-offset: -1px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr;
	justify-content: end;
	row-gap: var(--gap-medium);
	flex-shrink: 0;
	height: auto;
	padding: var(--padding-medium) var(--padding-small);
	position: relative;
	width: 80dvw;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	overflow: hidden;
}

.opinion:nth-of-type(1) {
	margin-left: var(--padding-small);
}

.opinion:last-of-type {
	margin-right: var(--padding-small);
}

@media (min-width: 576px) {
	.opinion {
		width: calc(540px - var(--padding-small) * 2);
	}

	.opinion:nth-of-type(1) {
        margin-left: calc((100vw - 540px) / 2 + var(--padding-small));
    }
	
	.opinion:last-of-type {
        margin-right: calc((100vw - 540px) / 2 + var(--padding-small));
    }
}

@media (min-width: 768px) {
	.opinion {
		padding: var(--padding-medium);
		width: calc((720px - (var(--gap-small) + var(--padding-small) * 2)) / 2);
	}

	.opinion:nth-of-type(1) {
        margin-left: calc((100vw - 720px) / 2 + var(--padding-small));
    }
	
	.opinion:last-of-type {
        margin-right: calc((100vw - 720px) / 2 + var(--padding-small));
    }
}

@media (min-width: 992px) {
	.opinion {
		width: calc((960px - (var(--gap-small) + var(--padding-small) * 2)) / 2);
	}

	.opinion:nth-of-type(1) {
        margin-left: calc((100vw - 960px) / 2 + var(--padding-small));
    }
	
	.opinion:last-of-type {
        margin-right: calc((100vw - 960px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1200px) {
	.opinion {
		width: calc((1140px - (var(--gap-small) * 2 + var(--padding-small) * 2)) / 3);
	}

	.opinion:nth-of-type(1) {
        margin-left: calc((100vw - 1140px) / 2 + var(--padding-small));
    }
	
	.opinion:last-of-type {
        margin-right: calc((100vw - 1140px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1400px) {
	.opinion {
		width: calc((1320px - (var(--gap-small) * 2 + var(--padding-small) * 2)) / 3);
	}

	.opinion:nth-of-type(1) {
        margin-left: calc((100vw - 1320px) / 2 + var(--padding-small));
    }
	
	.opinion:last-of-type {
        margin-right: calc((100vw - 1320px) / 2 + var(--padding-small));
    }
}

@media (min-width: 1600px) {
	.opinion {
		width: calc((1520px - (var(--gap-small) * 2 + var(--padding-small) * 2)) / 3);
	}

	.opinion:nth-of-type(1) {
        margin-left: calc((100vw - 1520px) / 2 + var(--padding-small));
    }
	
	.opinion:last-of-type {
        margin-right: calc((100vw - 1520px) / 2 + var(--padding-small));
    }
}

.opinion:nth-of-type(odd) {
    /* background: radial-gradient(circle at right top, var(--brand-soft-opacity-05), var(--brand-soft-opacity-10)); */
}

.opinion:nth-of-type(even) {
    /* background: radial-gradient(circle at left bottom, var(--background-primary-opacity-16), transparent); */
}

.opinion-author {
	column-gap: var(--gap-small);
	display: flex;
}

.opinion-author > div > p:first-of-type {
	color: var(--text-dark);
	font-weight: 600;
}

.opinion-author > div > p:last-of-type {
	color: var(--text-dark-soft);
}

.opinion-author svg {
	fill: var(--brand-10);
	height: 3rem;
	width: 3rem;
}

.opinion-stars {
	/* column-gap: var(--gap-very-small); */
	display: flex;
}

.opinion-stars svg {
	fill: var(--brand);
	height: .75rem;
	width: .75rem;
}

.opinion-text p {
    display: -webkit-box;
    -webkit-line-clamp: 7; 
    -webkit-box-orient: vertical;
    overflow: hidden;
}

















/* faq */
.faq {
	background: var(--bg);
	/* background: var(--background-secondary-opacity-02); */
}

.faq-grid {
	display: grid;
	grid-auto-flow: row;
	row-gap: var(--gap-large);
}

.faq-position {
	/* background: #fff; */
	/* border: 1px solid var(--border); */
	/* box-shadow: 0 1rem 4rem -1rem var(--box-shadow);
	border-radius: 1rem; */


	/* border-radius: var(--border-radius-small); */
	/* outline: 1px solid var(--brand-opacity-10);
  	outline-offset: -1px; */

	/* border-bottom: 1px solid var(--background-secondary); */

	position: relative;

	column-gap: 1rem;
	display: grid;
	grid-template-columns: 1.875rem 1fr;
    grid-template-rows: auto 0fr;
	/* padding: 1.5rem; */
	padding-bottom: var(--padding-medium);
	transition: all 200ms ease-in-out;
}

.faq-position:last-of-type {
	padding-bottom: 0;
}

.faq-position::after {
	content: "";
	background: var(--brand-10);
	bottom: -1px;
	height: 1px;
	left: calc(100% - (100% - 2.875rem));
	position: absolute;
	width: calc(100% - 2.875rem);
}

.faq-position:last-of-type::after {
	height: 0;
}

.faq-position:hover {
	/* border: 1px solid var(--border-secondary); */
	cursor: pointer;
}

.faq-position.open {
	grid-template-rows: auto 1fr;
}

.faq-position .question {
	font-size: 1.25rem;
	font-weight: 500;
	grid-column: 2 / span 1;
	grid-row: 1 / span 1;
}

.faq-position svg {
	background: var(--brand-soft);
	border-radius: var(--border-radius-large);
	fill: var(--text-light);
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	height: 1.875rem;
	transition: all 200ms ease-in-out;
	padding: .375rem;
	width: 1.875rem;
}

.faq-position.open svg {
	transform: rotate(180deg);
}

.faq-position .answer {
	grid-column: 2 / span 1;
	grid-row: 2 / span 1;
	margin-top: 0;
	opacity: 0;
	overflow: hidden;
	transition: all 200ms ease-in-out;
}

.faq-position.open .answer {
	margin-top: 1rem;
	opacity: 1;
}























/* footer */
footer {
	background: var(--bg-dark);
}

footer .content-left-grid {
	max-width: 576px;
}

footer p, footer a {
	color: var(--text-light);
}

.footer-grid {
	border-radius: var(--border-radius-small);
	column-gap: var(--gap-medium);
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	row-gap: var(--gap-large);
}

@media (min-width: 992px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;	
	}
}

.footer-grid h2 {
	background: linear-gradient(45deg, var(--text-light) 10%, var(--brand) 50%);
	background-clip: text;
	color: transparent;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.footer-grid > div:last-of-type {
	background: radial-gradient(circle at 70% 30%, var(--glass-light-hover), var(--glass-dark));
	border-radius: var(--border-radius-small);
	outline: 1px solid var(--border-light-strong);
  	outline-offset: -1px;
	padding: var(--padding-medium) var(--padding-medium);
}

.footer-grid input, .footer-grid textarea {
	background: var(--bg-dark);
	border-radius: var(--border-radius-very-small);
	color: var(--text-light);
	outline: 1px solid var(--border-light);
  	outline-offset: -1px;
	padding: var(--padding-very-small) var(--padding-small);
}

.footer-grid textarea {
	resize: none;
}

.ff-el-input--label {
	margin-bottom: var(--margin-small) !important;
	margin-left: var(--margin-small) !important;
}

.ff-el-input--label label {
	align-items: center;
	color: var(--text-light);
	font-size: .75rem;
	letter-spacing: 1px;
	font-weight: 500;
	display: flex;
	height: 2.5rem;
	padding: 0 var(--padding-very-small);
	position: relative;
	text-transform: uppercase;
	width: fit-content;
}

.ff-el-input--label label::before {
	border-bottom: 1px solid var(--brand-soft);
	border-left: 1px solid var(--brand-soft);
	bottom: -1px;
	content: "";
	height: .5rem;
	left: -1px;
	position: absolute;
	width: .75rem;
}

.ff-el-input--label label::after {
	border-right: 1px solid var(--brand-soft);
	border-top: 1px solid var(--brand-soft);
	content: "";
	height: .5rem;
	position: absolute;
	right: -1px;
	top: -1px;
	width: .75rem;
}

.ff-message-success {
	background: var(--glass-light-hover);
	border: none !important;
	padding: var(--padding-small) !important;
}

.ff-message-success p {
	color: var(--text-light);
	text-align: center;
}

.fluentform .ff-el-group:has(button) {
	margin-bottom: 0 !important;
}

.contact-info {
	align-items: center;
	column-gap: var(--gap-small);
	display: flex;
}

.contact-info svg {
	fill: var(--brand);
	height: 1.75rem;
	width: 1.75rem;
}

.contact-info a {
	color: var(--text-light);
}

footer .badge {
	background: var(--glass-light) !important;
	margin: 0 !important;
}

footer .badge > p {
	color: var(--text-light-muted);
}

footer .badge > div:first-of-type svg {
	fill: var(--text-light);
}

.copyright {
	background: var(--bg-dark-alt);
}

.copyright-grid {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto auto;
	padding: var(--padding-small) 0;
	row-gap: var(--gap-very-small);
}

@media (min-width: 768px) {
	.copyright-grid {	
		grid-template-columns: 1fr auto;
		grid-template-rows: auto;
	}
}

.copyright-grid a {
	align-items: center;
	display: flex;
	justify-content: center;
}

.copyright-grid p {
	color: var(--text-light);
	text-align: center;
}

@media (min-width: 768px) {
	.copyright-grid p {
		text-align: left;
	}
}

.copyright-grid > div:first-of-type {
	display: flex;
	flex-direction: column;
	row-gap: var(--gap-very-small);
}

.social-box {
	align-items: center;
	column-gap: var(--gap-very-small);
	display: flex;
	justify-content: center;
}

@media (min-width: 768px) {
	.social-box {
		justify-content: left;
	}
}

.social-box a svg {
	fill: var(--bg-alt);
	height: 2rem;
	opacity: .6;
	transition: all 200ms ease-in-out;
	width: 2rem;
}

.social-box a:hover svg {
	opacity: 1;
}

a:has(.footer-logo):hover .footer-logo {
	opacity: .5;
}

.footer-logo {
	filter: brightness(0) invert(1);
	opacity: .25;
	transition: all 200ms ease-in-out;
	width: 4rem;	
}

@media (min-width: 768px) {
	.footer-logo {
		width: 6rem;
	}
}






















































div.label {
	align-items: center;
	background: var(--brand-10);
	border-radius: var(--border-radius-large);
	display: flex;
	height: 2.25rem;
	padding: 0 var(--padding-very-small);
	width: fit-content;
}

.label p {
	color: var(--brand);
}

.label-box {
	align-items: center;
	display: flex;
	height: 2.5rem;
	padding: 0 var(--padding-very-small);
	position: relative;
	width: fit-content;
}

.label-box::before {
	border-bottom: 1px solid var(--brand-soft);
	border-left: 1px solid var(--brand-soft);
	bottom: -1px;
	content: "";
	height: .5rem;
	left: -1px;
	position: absolute;
	width: .75rem;
}

.label-box::after {
	border-right: 1px solid var(--brand-soft);
	border-top: 1px solid var(--brand-soft);
	content: "";
	height: .5rem;
	position: absolute;
	right: -1px;
	top: -1px;
	width: .75rem;
}

.label-box > p {
	color: var(--text-light);
	font-size: .75rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.badge {
	align-items: center;
	background: var(--bg);
	border-radius: var(--border-radius-large);
	column-gap: var(--gap-small);
	display: flex;
	height: 3rem;
	margin: var(--margin-medium) auto 0 auto;
	padding: 0 var(--padding-very-small);
	width: fit-content;
}

.badge > div:first-of-type {
	align-items: center;
	display: flex;
	justify-content: center;
}

.badge > div:first-of-type svg {
	fill: var(--bg-dark-soft);
	height: 1.25rem;
	width: 1.25rem;
}