/* ============================================================
   Instroi — design system (base layer).
   Source of truth: Figma fI0dh0XmT14T8KQhNICmby.
   Zones (header/footer/home/…) live in their own CSS files.
   ============================================================
   1. Tokens
   2. Base / reset
   3. Typography
   4. Layout: container, sections, grid helpers
   5. Buttons (.c-btn)
   6. Form controls (.c-field)
   7. Modal (.c-modal)
   8. Accordion (.c-accordion)
   9. Lightbox (.c-lightbox)
   10. Reveal animation
   11. A11y / utilities
   ============================================================ */

/* 1. Tokens
   ------------------------------------------------------------ */
:root {
	--c-primary: #1387e5;
	--c-primary-light: #2da1ff;
	--c-primary-dark: #0f6fbd;
	--c-dark: #334659;
	--c-dark-deep: #1f3346;   /* header top bar / footer bottom band */
	--c-dark-muted: #4c647c;
	--c-gray-100: #dee7f0;
	--c-gray-50: #eef5fb;
	--c-off-white: #f4f4f4;
	--c-text: #404244;
	--c-white: #fff;
	--c-black: #000;
	--c-accent: #ffc107;
	--c-on-dark: rgba(255, 255, 255, 0.92);
	--c-on-dark-muted: rgba(255, 255, 255, 0.6);

	--container: 1200px;
	--gap: 16px;
	--gap-lg: 48px;
	--pad-section: clamp(56px, 8vw, 96px);

	--radius-btn: 5px;
	--radius-field: 10px;
	--radius-card: 10px;

	--fs-h1: clamp(2.5rem, 1.786rem + 3.57vw, 4rem);      /* 40 → 64 */
	--fs-h2: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);        /* 28 → 48 */
	--fs-h3: clamp(1.375rem, 1.1rem + 1.2vw, 2rem);       /* 22 → 32 */
	--fs-h4: clamp(1.25rem, 1.131rem + 0.6vw, 1.5rem);    /* 20 → 24 */
	--fs-p1: clamp(1.125rem, 1.006rem + 0.6vw, 1.375rem); /* 18 → 22 */
	--fs-p2: clamp(1.0625rem, 1.003rem + 0.3vw, 1.25rem); /* 17 → 20 */
	--fs-p3: 1.125rem;                                     /* 18 */
	--fs-small: 1rem;

	--shadow-modal: 0 24px 64px rgba(31, 51, 70, 0.35);
	--transition: 0.2s ease;
	--focus-ring: 0 0 0 3px rgba(19, 135, 229, 0.45);
}

/* 2. Base / reset
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
	font-size: var(--fs-p3);
	line-height: 1.6;
	color: var(--c-text);
	background: var(--c-white);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden; /* safety net; layout must not overflow anyway */
}

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

a { color: var(--c-primary); transition: color var(--transition); }
a:hover { color: var(--c-primary-light); }

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 3px;
}

body.has-modal-open { overflow: hidden; }

/* 3. Typography
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	overflow-wrap: break-word;
}
h1, .h1 { font-size: var(--fs-h1); line-height: 1.1; }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

p { margin: 0 0 1em; }
.text-p1 { font-size: var(--fs-p1); }
.text-p2 { font-size: var(--fs-p2); }
.text-small { font-size: var(--fs-small); }
.text-muted { color: var(--c-dark-muted); }

/* 4. Layout
   ------------------------------------------------------------ */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gap);
}

.section { padding-block: var(--pad-section); }

.section--dark {
	background: var(--c-dark);
	color: var(--c-on-dark);
}
.section--dark h1, .section--dark h2,
.section--dark h3, .section--dark h4 { color: var(--c-white); }
.section--dark a:not(.c-btn) { color: var(--c-primary-light); }

.section--gray { background: var(--c-gray-50); }

.section__head { margin-bottom: var(--gap-lg); }

/* Simple grid helpers: mobile-first, collapse to 1 column. */
.grid { display: grid; gap: var(--gap-lg) var(--gap); }
@media (min-width: 640px) {
	.grid--2 { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* 5. Buttons — Figma component btn-blue (106:939)
   ------------------------------------------------------------ */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 14px 26px;
	background: var(--c-primary);
	color: var(--c-white);
	font-size: var(--fs-p3);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	border: 2px solid transparent;
	border-radius: var(--radius-btn);
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.c-btn:hover { background: var(--c-primary-light); color: var(--c-white); }
.c-btn:active { background: var(--c-primary-dark); transform: translateY(1px); }
.c-btn:focus-visible { box-shadow: var(--focus-ring); }
.c-btn[disabled], .c-btn.is-loading {
	opacity: 0.6;
	pointer-events: none;
}

/* Large: Figma padding 20/26, text 22px */
.c-btn--lg {
	min-height: 62px;
	padding: 20px 26px;
	font-size: var(--fs-p1);
}

/* Ghost: for dark surfaces */
.c-btn--ghost {
	background: transparent;
	border-color: currentColor;
	color: var(--c-primary);
}
.c-btn--ghost:hover { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-white); }
.section--dark .c-btn--ghost { color: var(--c-white); }
.section--dark .c-btn--ghost:hover { color: var(--c-white); }

.c-btn__icon { flex: 0 0 auto; }

/* 6. Form controls — Figma popup fields (106:3052)
   ------------------------------------------------------------ */
.c-field {
	display: block;
	width: 100%;
	height: 54px;
	padding: 0 16px;
	background: var(--c-gray-50);
	color: var(--c-text);
	font: inherit;
	font-size: var(--fs-p3);
	border: 1px solid transparent;
	border-radius: var(--radius-field);
	transition: border-color var(--transition), background var(--transition);
	appearance: none;
}
.c-field::placeholder { color: var(--c-dark-muted); opacity: 1; }
.c-field:hover { background: var(--c-gray-100); }
.c-field:focus {
	outline: none;
	background: var(--c-white);
	border-color: var(--c-primary);
	box-shadow: var(--focus-ring);
}
textarea.c-field { height: auto; min-height: 120px; padding-block: 14px; resize: vertical; }

.c-form__row { margin-bottom: 6px; }
.c-form__status { margin-top: 12px; font-size: var(--fs-small); min-height: 1.4em; }
.c-form__status.is-error { color: #c0392b; }
.c-form__status.is-success { color: #1d7a3d; }

/* Honeypot — hide from humans, keep for bots */
.c-form__hp {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* 7. Modal — popup form (Figma 106:3063)
   ------------------------------------------------------------ */
.c-modal {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--gap);
}
.c-modal.is-open { display: flex; }

.c-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(31, 51, 70, 0.7);
}

.c-modal__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	width: min(1024px, 100%);
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	overflow: auto;
	background: var(--c-white);
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-modal);
}

.c-modal__media {
	position: relative;
	flex: 1 1 50%;
	min-height: 380px;
	background: linear-gradient(to bottom, #35c2ff, #1387e5);
	overflow: hidden;
}
.c-modal__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 8%;
}

.c-modal__body {
	flex: 1 1 50%;
	padding: clamp(28px, 5vw, 60px);
}
.c-modal__title { margin-bottom: 20px; font-size: var(--fs-h3); color: var(--c-black); }
.c-modal__intro { margin-bottom: clamp(28px, 4vw, 54px); font-size: var(--fs-p2); line-height: 1.4; }
.c-modal__form .c-btn { margin-top: clamp(28px, 4vw, 54px); }

.c-modal__close {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--c-primary);
	border-radius: 50%;
	transition: color var(--transition), background var(--transition);
}
.c-modal__close:hover { color: var(--c-primary-light); background: var(--c-gray-50); }

@media (max-width: 767px) {
	.c-modal__dialog { flex-direction: column; }
	.c-modal__media { min-height: 200px; flex: 0 0 auto; }
	.c-modal__close { color: var(--c-white); }
	.c-modal__close:hover { color: var(--c-white); background: rgba(255, 255, 255, 0.15); }
}

/* 8. Accordion
   ------------------------------------------------------------ */
.c-accordion__item { border-bottom: 1px solid var(--c-gray-100); }
.c-accordion__trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
	width: 100%;
	padding: 20px 0;
	font-size: var(--fs-h4);
	font-weight: 700;
	text-align: left;
	color: inherit;
	transition: color var(--transition);
}
.c-accordion__trigger:hover { color: var(--c-primary); }
.c-accordion__icon {
	flex: 0 0 auto;
	color: var(--c-primary);
	transition: transform var(--transition);
}
.c-accordion__trigger[aria-expanded="true"] .c-accordion__icon { transform: rotate(180deg); }
.c-accordion__panel { overflow: hidden; }
.c-accordion__panel[hidden] { display: none; }
.c-accordion__content { padding: 0 0 24px; }

/* 9. Lightbox
   ------------------------------------------------------------ */
.c-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: var(--gap);
	background: rgba(31, 51, 70, 0.9);
}
.c-lightbox.is-open { display: flex; }

.c-lightbox__stage {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: min(1100px, 100%);
}
.c-lightbox__stage img {
	max-width: 100%;
	max-height: calc(100vh - 112px);
	width: auto;
	height: auto;
	border-radius: var(--radius-card);
}

.c-lightbox__caption {
	max-width: 70ch;
	color: var(--c-on-dark);
	font-size: var(--fs-small);
	line-height: 1.4;
	text-align: center;
}
.c-lightbox__caption[hidden] { display: none; }

.c-lightbox__close,
.c-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--c-white);
	background: rgba(255, 255, 255, 0.12);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: background var(--transition);
}
.c-lightbox__close:hover,
.c-lightbox__nav:hover { background: rgba(255, 255, 255, 0.24); }
.c-lightbox__close:focus-visible,
.c-lightbox__nav:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.c-lightbox__close {
	top: 16px;
	right: 16px;
	width: 48px;
	height: 48px;
}

.c-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
}
.c-lightbox__nav[hidden] { display: none; }
.c-lightbox__nav--prev { left: clamp(8px, 3vw, 32px); }
.c-lightbox__nav--next { right: clamp(8px, 3vw, 32px); }

.c-lightbox__counter {
	position: absolute;
	top: 22px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--c-on-dark);
	font-size: var(--fs-small);
}
.c-lightbox__counter[hidden] { display: none; }

/* Anything the lightbox is wired to shows a zoom cursor. */
.is-zoomable { cursor: zoom-in; }

@media (max-width: 600px) {
	.c-lightbox__nav { width: 44px; height: 44px; }
}

/* 10. Reveal on scroll
   ------------------------------------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* 11. A11y / utilities
   ------------------------------------------------------------ */
.skip-link {
	position: absolute;
	left: -9999px;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	z-index: 2000;
	background: var(--c-white);
	color: var(--c-primary);
	padding: 0.5rem 1rem;
	border-radius: var(--radius-btn);
}

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