/* ==========================================================================
   Marketing — landing page, page templates (about / contact / pricing / features)
   Uses the same tokens as base.css so light/dark stay consistent.
   ========================================================================== */

:root {
	--color-accent: #3ad3b1;
	--color-accent-soft: rgba(58, 211, 177, .14);
	--mk-band: linear-gradient(160deg, #141838 0%, #1f2459 100%);
	--mk-radius-xl: 28px;
}

/* ---- Scroll reveal (only when JS is present) ---- */
html.js-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
html.js-ready .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.js-ready .reveal { opacity: 1; transform: none; }
}

/* ---- Shared section heading ---- */
.mk-section { padding-block: 5rem; }
.mk-section--surface { background: var(--color-surface); }
.mk-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.mk-head h2 { font-size: clamp(1.6rem, 3.6vw, 2.35rem); margin-bottom: .75rem; }
.mk-head p { color: var(--color-muted); font-size: 1.05rem; margin: 0; }

.btn-lg { padding: .9rem 2rem; font-size: 1rem; }
.btn-accent { background: var(--color-accent); color: #0b1a2b; box-shadow: 0 12px 28px -12px rgba(58,211,177,.7); }
.btn-accent:hover { color: #0b1a2b; box-shadow: 0 16px 34px -12px rgba(58,211,177,.9); }
.btn-ghost-light { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.22); color: #fff; }
.btn-ghost-light:hover { background: rgba(255,255,255,.16); color: #fff; }
.btn svg { width: 18px; height: 18px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.mk-hero {
	position: relative;
	overflow: hidden;
	background: var(--mk-band);
	color: #fff;
	padding: 5.5rem 0 0;
	text-align: center;
}
.mk-hero::before,
.mk-hero::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}
.mk-hero::before {
	width: 1400px; height: 1400px;
	inset-inline-start: 50%;
	top: 46%;
	transform: translateX(50%);
	border: 1px solid rgba(255,255,255,.07);
	box-shadow: 0 0 0 90px rgba(255,255,255,.02), 0 0 0 180px rgba(255,255,255,.015);
}
html[dir="rtl"] .mk-hero::before { transform: translateX(50%); }
.mk-hero::after {
	width: 620px; height: 620px;
	top: -280px;
	inset-inline-end: -120px;
	background: radial-gradient(circle, rgba(58,211,177,.28), transparent 65%);
}
.mk-hero__inner { position: relative; z-index: 1; max-width: 820px; margin-inline: auto; }
.mk-hero h1 {
	color: #fff;
	font-size: clamp(2rem, 5.2vw, 3.4rem);
	line-height: 1.3;
	margin-bottom: 1.1rem;
}
.mk-hero h1 em { font-style: normal; color: var(--color-accent); }
.mk-hero__lead { color: #c7cbef; font-size: 1.12rem; max-width: 62ch; margin: 0 auto 2rem; }
.mk-hero__actions { display: flex; gap: .9rem; justify-content: center; flex-wrap: wrap; }
.mk-hero__note { margin-top: 1.1rem; font-size: .85rem; color: #98a0d6; }
.mk-hero__visual { position: relative; z-index: 2; margin-top: 3.5rem; margin-bottom: -6rem; }

/* ==========================================================================
   Browser-frame mockups (pure CSS, no images)
   ========================================================================== */
.mock {
	background: var(--color-card-bg);
	color: var(--color-fg);
	border: 1px solid var(--color-border);
	border-radius: 18px;
	box-shadow: 0 40px 80px -30px rgba(10, 14, 45, .55);
	text-align: start;
	overflow: hidden;
	font-size: .8rem;
}
.mock__bar { display: flex; align-items: center; gap: .4rem; padding: .65rem .9rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.mock__dot { width: 9px; height: 9px; border-radius: 50%; background: #f08775; }
.mock__dot:nth-child(2) { background: #f3c969; }
.mock__dot:nth-child(3) { background: #3ad3b1; }
.mock__title { margin-inline-start: .6rem; color: var(--color-muted); font-size: .72rem; }
.mock__body { padding: 1.1rem; }

.mock--dash { max-width: 1040px; margin-inline: auto; }
.mock--dash .mock__body { display: grid; grid-template-columns: 170px 1fr; gap: 1rem; padding: 0; }
.mock-side { background: var(--color-surface); border-inline-end: 1px solid var(--color-border); padding: 1rem .8rem; display: flex; flex-direction: column; gap: .35rem; }
.mock-side__item { padding: .5rem .7rem; border-radius: 8px; color: var(--color-muted); font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.mock-side__item::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--color-border); }
.mock-side__item.is-active { background: var(--color-accent-soft); color: var(--color-fg); }
.mock-side__item.is-active::before { background: var(--color-accent); }
.mock-main { padding: 1.1rem 1.1rem 1.1rem 0; display: flex; flex-direction: column; gap: 1rem; }
.mock-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.mock-kpi { border: 1px solid var(--color-border); border-radius: 12px; padding: .8rem .9rem; background: var(--color-card-bg); }
.mock-kpi small { color: var(--color-muted); display: block; font-size: .7rem; }
.mock-kpi strong { font-size: 1.35rem; font-weight: 800; }
.mock-kpi span { font-size: .68rem; color: #12a37f; font-weight: 700; }
.mock-panels { display: grid; grid-template-columns: 1.1fr 1.4fr; gap: .9rem; }
.mock-panel { border: 1px solid var(--color-border); border-radius: 12px; padding: .9rem; }
.mock-panel h4 { font-size: .8rem; margin: 0 0 .7rem; }
.mock-donut { display: flex; align-items: center; gap: 1rem; }
.mock-donut__ring {
	width: 104px; height: 104px; border-radius: 50%; flex-shrink: 0;
	background: conic-gradient(var(--color-accent) 0 42%, #4f7cff 42% 71%, #f3c969 71% 88%, #f08775 88% 100%);
	display: grid; place-items: center;
}
.mock-donut__ring::after { content: attr(data-value); width: 70px; height: 70px; border-radius: 50%; background: var(--color-card-bg); display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; }
.mock-legend { display: flex; flex-direction: column; gap: .35rem; color: var(--color-muted); font-size: .72rem; }
.mock-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-inline-end: .4rem; }
.mock-rows { display: flex; flex-direction: column; gap: .5rem; }
.mock-row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px dashed var(--color-border); }
.mock-row:last-child { border: 0; }
.mock-avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #4f7cff, #3ad3b1); flex-shrink: 0; }
.mock-row:nth-child(2) .mock-avatar { background: linear-gradient(135deg, #f08775, #f3c969); }
.mock-row:nth-child(3) .mock-avatar { background: linear-gradient(135deg, #1f2459, #4f7cff); }
.mock-row b { font-weight: 700; flex: 1; }
.mock-tag { padding: .12rem .55rem; border-radius: 999px; font-size: .66rem; font-weight: 700; background: var(--color-accent-soft); color: #0e8f76; }
.mock-tag--warn { background: rgba(243,201,105,.2); color: #a17a12; }
.mock-tag--blue { background: rgba(79,124,255,.15); color: #3559d6; }

/* Kanban / pipeline */
.mock-kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.mock-col { background: var(--color-surface); border-radius: 12px; padding: .7rem; display: flex; flex-direction: column; gap: .55rem; }
.mock-col h5 { margin: 0 0 .2rem; font-size: .74rem; display: flex; justify-content: space-between; color: var(--color-muted); }
.mock-deal { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: 10px; padding: .6rem .7rem; }
.mock-deal b { display: block; font-size: .76rem; }
.mock-deal small { color: var(--color-muted); font-size: .68rem; }
.mock-bar { height: 5px; border-radius: 99px; background: var(--color-border); margin-top: .5rem; overflow: hidden; }
.mock-bar i { display: block; height: 100%; background: var(--color-accent); border-radius: 99px; }

/* Chat / inbox */
.mock-chat { display: flex; flex-direction: column; gap: .6rem; }
.mock-msg { max-width: 82%; padding: .65rem .85rem; border-radius: 14px; background: var(--color-surface-2); line-height: 1.7; }
.mock-msg--me { align-self: flex-end; background: var(--color-accent-soft); }
.mock-msg small { display: block; color: var(--color-muted); font-size: .66rem; margin-top: .2rem; }
.mock-ai { border: 1px dashed var(--color-accent); border-radius: 12px; padding: .7rem .85rem; background: var(--color-accent-soft); display: flex; gap: .6rem; align-items: flex-start; }
.mock-ai svg { width: 18px; height: 18px; color: #0e8f76; flex-shrink: 0; margin-top: .15rem; }

/* Automation flow */
.mock-flow { display: flex; flex-direction: column; gap: .55rem; align-items: stretch; }
.mock-node { display: flex; align-items: center; gap: .7rem; border: 1px solid var(--color-border); border-radius: 12px; padding: .7rem .85rem; background: var(--color-card-bg); }
.mock-node svg { width: 20px; height: 20px; color: #0e8f76; flex-shrink: 0; }
.mock-node b { flex: 1; font-size: .78rem; }
.mock-node small { color: var(--color-muted); }
.mock-link { align-self: center; width: 2px; height: 14px; background: var(--color-border); }

@media (max-width: 860px) {
	.mock--dash .mock__body { grid-template-columns: 1fr; }
	.mock-side { display: none; }
	.mock-main { padding: 1rem; }
	.mock-kpis { grid-template-columns: repeat(2, 1fr); }
	.mock-panels { grid-template-columns: 1fr; }
	.mk-hero__visual { margin-bottom: -3rem; }
}

/* ==========================================================================
   Stats strip (sits under the overlapping hero mockup)
   ========================================================================== */
.mk-stats { padding-top: 9rem; padding-bottom: 1rem; }
.mk-stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; }
.mk-stat strong { display: block; font-size: 2.1rem; font-weight: 900; color: var(--color-fg); line-height: 1.2; }
.mk-stat span { color: var(--color-muted); font-size: .92rem; }
@media (max-width: 768px) {
	.mk-stats { padding-top: 5rem; }
	.mk-stats__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Steps / feature cards
   ========================================================================== */
.mk-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.mk-card {
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 1.75rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.mk-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(58,211,177,.5); }
.mk-card__icon {
	width: 48px; height: 48px; border-radius: 14px;
	display: grid; place-items: center;
	background: var(--color-accent-soft); color: #0e8f76;
	margin-bottom: 1.1rem;
}
html.dark .mk-card__icon { color: var(--color-accent); }
.mk-card__icon svg { width: 24px; height: 24px; }
.mk-card__step { font-size: .75rem; font-weight: 800; color: var(--color-muted); margin-bottom: .3rem; display: block; }
.mk-card h3 { font-size: 1.1rem; margin-bottom: .5rem; }
.mk-card p { color: var(--color-muted); font-size: .93rem; margin: 0; }
.mk-cards--4 { grid-template-columns: repeat(4, 1fr); }
.mk-cards--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1024px) { .mk-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 860px) { .mk-cards, .mk-cards--2 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mk-cards--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Feature split (text + visual, alternating)
   ========================================================================== */
.mk-split { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 3rem; align-items: center; }
.mk-split--reverse { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); }
.mk-split--reverse .mk-split__visual { order: -1; }
.mk-split__text h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin-bottom: .9rem; }
.mk-split__text > p { color: var(--color-muted); font-size: 1.02rem; margin-bottom: 1.4rem; }
.mk-split__visual {
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--mk-radius-xl);
	padding: 1.1rem;
}
.mk-checks { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.mk-checks li { display: flex; gap: .7rem; align-items: flex-start; }
.mk-checks__icon { width: 22px; height: 22px; border-radius: 50%; background: var(--color-accent); color: #0b1a2b; display: grid; place-items: center; flex-shrink: 0; margin-top: .2rem; }
.mk-checks__icon svg { width: 13px; height: 13px; }
.mk-checks b { display: block; font-size: .98rem; }
.mk-checks span { color: var(--color-muted); font-size: .9rem; }
@media (max-width: 900px) {
	.mk-split { grid-template-columns: 1fr; gap: 2rem; }
	.mk-split--reverse .mk-split__visual { order: 0; }
	.mk-split__visual { padding: 1.1rem; }
}

/* ==========================================================================
   Pricing (navy band)
   ========================================================================== */
.mk-band { background: var(--mk-band); color: #fff; border-radius: var(--mk-radius-xl); padding: 4.5rem 2rem; position: relative; overflow: hidden; }
.mk-band::before {
	content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%;
	top: -260px; inset-inline-start: -160px;
	background: radial-gradient(circle, rgba(58,211,177,.22), transparent 65%);
	pointer-events: none;
}
.mk-band .mk-head h2 { color: #fff; }
.mk-band .mk-head p { color: #c1c6ee; }
.mk-band > * { position: relative; }

.mk-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: stretch; max-width: 1040px; margin-inline: auto; }
.mk-plan {
	background: #fff; color: var(--color-ink);
	border-radius: var(--radius-lg); padding: 2rem 1.75rem;
	display: flex; flex-direction: column; gap: 1rem;
	position: relative;
}
html.dark .mk-plan { background: var(--color-card-bg); color: var(--color-fg); border: 1px solid var(--color-border); }
.mk-plan h3 { font-size: 1.1rem; margin: 0; color: inherit; }
.mk-plan__desc { color: var(--color-muted); font-size: .88rem; margin: 0; min-height: 2.8em; }
.mk-plan__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.mk-plan__price strong { font-size: 2.3rem; font-weight: 900; line-height: 1.1; }
.mk-plan__price span { color: var(--color-muted); font-size: .85rem; }
.mk-plan ul { list-style: none; margin: 0; padding: 1.1rem 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .65rem; flex: 1; font-size: .9rem; }
.mk-plan li { display: flex; gap: .6rem; align-items: flex-start; }
.mk-plan li svg { width: 17px; height: 17px; color: #12a37f; flex-shrink: 0; margin-top: .3rem; }
.mk-plan .btn { justify-content: center; width: 100%; }
.mk-plan--featured { top: -14px; box-shadow: 0 30px 60px -24px rgba(58,211,177,.45); border: 2px solid var(--color-accent); }
.mk-plan__badge { position: absolute; top: -13px; inset-inline-start: 50%; transform: translateX(50%); background: var(--color-accent); color: #0b1a2b; font-size: .72rem; font-weight: 800; padding: .25rem .9rem; border-radius: 999px; white-space: nowrap; }
html[dir="rtl"] .mk-plan__badge { transform: translateX(50%); }
.mk-plan--featured .btn-outline { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
@media (max-width: 900px) {
	.mk-plans { grid-template-columns: 1fr; max-width: 460px; }
	.mk-plan--featured { top: 0; }
	.mk-band { padding: 3rem 1rem; border-radius: 20px; }
}

/* On the standalone pricing page the plans sit on a plain background */
.mk-plans--plain .mk-plan { border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-fg); box-shadow: var(--shadow-soft); }
.mk-plans--plain .mk-plan--featured { border: 2px solid var(--color-accent); }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.mk-quote { display: flex; flex-direction: column; gap: 1.2rem; }
.mk-quote__stars { display: flex; gap: .15rem; color: #f3b93d; }
.mk-quote__stars svg { width: 16px; height: 16px; }
.mk-quote blockquote { margin: 0; font-size: .98rem; line-height: 1.9; flex: 1; }
.mk-quote footer { display: flex; align-items: center; gap: .8rem; }
.mk-quote__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--color-navy), var(--color-teal)); color: #fff; display: grid; place-items: center; font-weight: 800; }
.mk-quote footer b { display: block; font-size: .92rem; }
.mk-quote footer span { color: var(--color-muted); font-size: .8rem; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.mk-faq { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; align-items: start; max-width: 1000px; margin-inline: auto; }
.mk-faq details { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.mk-faq details[open] { border-color: rgba(58,211,177,.6); box-shadow: var(--shadow-soft); }
.mk-faq summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary svg { width: 18px; height: 18px; flex-shrink: 0; transition: transform .2s ease; color: var(--color-muted); }
.mk-faq details[open] summary svg { transform: rotate(180deg); }
.mk-faq details > div { padding: 0 1.3rem 1.2rem; color: var(--color-muted); font-size: .93rem; line-height: 1.9; }
@media (max-width: 860px) { .mk-faq { grid-template-columns: 1fr; } }

/* ==========================================================================
   Final CTA band
   ========================================================================== */
.mk-cta {
	background: var(--mk-band); color: #fff;
	border-radius: var(--mk-radius-xl);
	padding: 3.25rem 3rem;
	display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
	position: relative; overflow: hidden;
}
.mk-cta::after { content: ""; position: absolute; width: 380px; height: 380px; border-radius: 50%; inset-inline-end: -120px; bottom: -200px; background: radial-gradient(circle, rgba(58,211,177,.3), transparent 65%); pointer-events: none; }
.mk-cta h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: .4rem; }
.mk-cta p { color: #c1c6ee; margin: 0; }
.mk-cta__actions { display: flex; gap: .8rem; flex-wrap: wrap; position: relative; z-index: 1; }
@media (max-width: 768px) { .mk-cta { padding: 2.25rem 1.5rem; } }

/* ==========================================================================
   Section head with "view all" link (blog teaser)
   ========================================================================== */
.mk-row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.mk-row-head h2 { font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 .3rem; }
.mk-row-head p { color: var(--color-muted); margin: 0; }
.mk-link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.mk-link-arrow svg { width: 18px; height: 18px; }

/* ==========================================================================
   Inner-page hero (about / contact / pricing / features / generic pages)
   ========================================================================== */
.pg-hero { background: var(--mk-band); color: #fff; text-align: center; padding: 4.5rem 0 4rem; position: relative; overflow: hidden; }
.pg-hero::after { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; top: -240px; inset-inline-end: -100px; background: radial-gradient(circle, rgba(58,211,177,.26), transparent 65%); pointer-events: none; }
.pg-hero .container-narrow { position: relative; z-index: 1; }
.pg-hero h1 { color: #fff; font-size: clamp(1.8rem, 4.5vw, 2.8rem); margin-bottom: .8rem; }
.pg-hero p { color: #c7cbef; font-size: 1.08rem; max-width: 60ch; margin: 0 auto; }
.pg-hero .breadcrumb { justify-content: center; color: #98a0d6; margin-bottom: 1.2rem; }
.pg-hero .breadcrumb a { color: #b6bcea; }
.pg-hero .breadcrumb [aria-current="page"] { color: #fff; }

/* ==========================================================================
   About page
   ========================================================================== */
.mk-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; }
.mk-story h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.mk-story p { color: var(--color-muted); }
.mk-timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--color-border); display: flex; flex-direction: column; gap: 1.6rem; padding-inline-start: 1.6rem; }
.mk-timeline li { position: relative; }
.mk-timeline li::before { content: ""; position: absolute; inset-inline-start: calc(-1.6rem - 7px); top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-accent-soft); }
.mk-timeline b { display: block; }
.mk-timeline span { color: var(--color-muted); font-size: .9rem; }
.mk-team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.mk-member { text-align: center; }
.mk-member__avatar { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto .9rem; background: linear-gradient(135deg, var(--color-navy), var(--color-teal)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 1.6rem; }
.mk-member b { display: block; }
.mk-member span { color: var(--color-muted); font-size: .85rem; }
@media (max-width: 900px) {
	.mk-story { grid-template-columns: 1fr; gap: 2rem; }
	.mk-team { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.mk-contact { display: grid; grid-template-columns: 1fr 1.25fr; gap: 3rem; align-items: start; }
.mk-contact__info { display: flex; flex-direction: column; gap: 1rem; }
.mk-info { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.3rem; }
.mk-info .mk-card__icon { margin: 0; flex-shrink: 0; }
.mk-info b { display: block; margin-bottom: .15rem; }
.mk-info span, .mk-info a { color: var(--color-muted); font-size: .92rem; }
.mk-form { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--mk-radius-xl); padding: 2rem; box-shadow: var(--shadow-soft); }
.mk-form h2 { font-size: 1.35rem; }
.mk-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.mk-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.mk-field--full { grid-column: 1 / -1; }
.mk-field label { font-weight: 700; font-size: .88rem; }
.mk-field input, .mk-field select, .mk-field textarea {
	width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm);
	border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-fg); font-size: .95rem;
}
.mk-field textarea { min-height: 140px; resize: vertical; }
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.mk-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mk-alert { padding: .9rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.2rem; font-weight: 600; font-size: .92rem; }
.mk-alert--ok { background: var(--color-accent-soft); color: #0b7a63; border: 1px solid rgba(58,211,177,.5); }
.mk-alert--err { background: rgba(240,135,117,.15); color: #b1402e; border: 1px solid rgba(240,135,117,.5); }
html.dark .mk-alert--ok { color: var(--color-accent); }
html.dark .mk-alert--err { color: #f4a798; }
@media (max-width: 900px) {
	.mk-contact { grid-template-columns: 1fr; }
	.mk-form__grid { grid-template-columns: 1fr; }
	.mk-form { padding: 1.4rem; }
}

/* ---- Contact page: form card + colored panel + info cards ---- */
.ct-stage {
	position: relative;
	padding: 2.5rem 0 4rem;
	background:
		radial-gradient(circle at 12% 10%, var(--color-accent-soft), transparent 40%),
		radial-gradient(circle at 92% 70%, rgba(31, 36, 89, .08), transparent 42%),
		var(--color-surface);
}
.ct-stage .breadcrumb { margin-bottom: 2.25rem; }

.ct-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
	align-items: stretch;
	max-width: 1040px;
	margin-inline: auto;
	background: var(--color-card-bg);
	border-radius: var(--mk-radius-xl);
	box-shadow: 0 30px 70px -30px rgba(20, 24, 56, .28);
	border: 1px solid var(--color-border);
}
.ct-panel {
	position: relative;
	overflow: hidden;
	margin-block: -1.5rem;           /* panel pokes out above and below the card */
	padding: 3rem 2.25rem;
	border-radius: var(--mk-radius-xl);
	color: #fff;
	background: var(--mk-band);
	box-shadow: 0 30px 60px -28px rgba(20, 24, 56, .55);
}
.ct-panel::before,
.ct-panel::after { content: ""; position: absolute; pointer-events: none; }
.ct-panel::before {
	inset-inline-end: -40%; top: 38%;
	width: 140%; height: 34%;
	background: linear-gradient(90deg, rgba(58, 211, 177, .16), rgba(255, 255, 255, .04));
	transform: rotate(-18deg);
}
.ct-panel::after {
	inset-inline-start: -30%; bottom: -12%;
	width: 90%; height: 26%;
	background: rgba(255, 255, 255, .05);
	transform: rotate(-18deg);
}
.ct-panel > * { position: relative; z-index: 1; }
.ct-panel h1 { color: #fff; font-size: clamp(1.8rem, 3.6vw, 2.4rem); margin-bottom: 1rem; }
.ct-panel__lead { color: #fff; font-size: 1.12rem; font-weight: 700; line-height: 1.9; margin-bottom: 1rem; }
.ct-panel__text { color: #c7cbef; font-size: .95rem; line-height: 2; }
.ct-panel__text p { margin: 0 0 .8em; }
.ct-panel__text a { color: var(--color-teal); }

.ct-form { padding: 2.5rem 2.5rem 2.5rem; }
.ct-form h2 { font-size: 1.15rem; margin-bottom: 1.5rem; }
.ct-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ct-field { display: flex; flex-direction: column; gap: .4rem; }
.ct-field--full { grid-column: 1 / -1; }
.ct-field label { font-size: .85rem; font-weight: 700; color: var(--color-muted); }
.ct-field input,
.ct-field textarea {
	width: 100%;
	padding: .95rem 1.1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg);
	color: var(--color-fg);
	font-size: .95rem;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-field input[dir="ltr"] { text-align: right; }
.ct-field input::placeholder,
.ct-field textarea::placeholder { color: var(--color-muted); opacity: .7; }
.ct-field textarea { min-height: 150px; resize: vertical; }
.ct-field input:focus,
.ct-field textarea:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.ct-form__submit { margin-top: 1.4rem; width: 100%; justify-content: center; }

.ct-info-section { padding: 4.5rem 0 1rem; }
.ct-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; max-width: 1040px; margin-inline: auto; }
.ct-info__card {
	text-align: center;
	padding: 2rem 1.4rem;
	background: var(--color-card-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	display: flex; flex-direction: column; align-items: center; gap: .55rem;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.ct-info__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(58, 211, 177, .55); }
.ct-info__icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--color-accent-soft); color: #0e8f76; margin-bottom: .4rem; }
html.dark .ct-info__icon { color: var(--color-accent); }
.ct-info__icon svg { width: 30px; height: 30px; }
.ct-info__card h3 { font-size: 1.15rem; margin: 0; }
.ct-info__card p { color: var(--color-muted); font-size: .88rem; margin: 0; flex: 1; }
.ct-info__value { font-weight: 800; font-size: .98rem; word-break: break-word; margin-top: .3rem; }
a.ct-info__value { color: var(--color-fg); }
a.ct-info__value:hover { color: var(--color-teal); }

@media (max-width: 900px) {
	.ct-card { grid-template-columns: 1fr; }
	.ct-panel { margin-block: -1rem 0; padding: 2.25rem 1.6rem; }
	.ct-form { padding: 2rem 1.4rem; }
}
@media (max-width: 560px) {
	.ct-form__grid { grid-template-columns: 1fr; }
}

/* ---- Google Map ---- */
.mk-map { border: 1px solid var(--color-border); border-radius: var(--mk-radius-xl); overflow: hidden; background: var(--color-card-bg); box-shadow: var(--shadow-soft); }
.mk-map iframe { display: block; width: 100%; height: 380px; border: 0; }
.mk-map__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.3rem; }
.mk-map__bar span { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-muted); font-size: .92rem; }
.mk-map__bar svg { width: 18px; height: 18px; color: #0e8f76; flex-shrink: 0; }
@media (max-width: 600px) { .mk-map iframe { height: 300px; } }

/* ---- Footer contact (NAP) ---- */
.footer-contact { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; font-size: .88rem; }
.footer-contact li { display: flex; gap: .55rem; align-items: flex-start; color: #c7cbef; }
.footer-contact svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: .3rem; color: var(--color-teal); }

/* ==========================================================================
   Generic page content wrapper
   ========================================================================== */
.pg-content { padding-block: 3.5rem; }
.pg-content .entry-content { font-size: 1.02rem; }

/* ---- Tasks / calendar + permissions mockups ---- */
.mock-cal__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; font-size: .8rem; }
.mock-cal__head span { color: var(--color-muted); font-size: .72rem; }
.mock-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; text-align: center; font-size: .72rem; }
.mock-cal__grid span { color: var(--color-muted); font-weight: 700; padding-bottom: .2rem; }
.mock-cal__grid i { font-style: normal; padding: .45rem 0; border-radius: 8px; background: var(--color-surface); position: relative; }
.mock-cal__grid i.is-task::after { content: ""; position: absolute; bottom: 3px; inset-inline-start: 50%; transform: translateX(50%); width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }
.mock-cal__grid i.is-today { background: var(--color-navy); color: #fff; font-weight: 800; }
.mock-perms { display: flex; flex-direction: column; gap: .5rem; }
.mock-perm { display: flex; justify-content: space-between; align-items: center; padding: .6rem .8rem; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-card-bg); font-size: .78rem; }
.mock-perm i { width: 34px; height: 19px; border-radius: 99px; background: var(--color-border); position: relative; flex-shrink: 0; }
.mock-perm i::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; transition: transform .2s; }
.mock-perm i.is-on { background: var(--color-accent); }
.mock-perm i.is-on::after { transform: translateX(-15px); }

/* ---- Footer legal links ---- */
.footer-legal { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.footer-legal a { color: #aab0da; }
.footer-legal a:hover { color: var(--color-teal); }

/* ---- About: company card + team ---- */
.ab-company { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.6rem 1.6rem 1.2rem; box-shadow: var(--shadow-soft); }
.ab-company h3 { font-size: 1.05rem; margin-bottom: 1rem; }
.ab-company dl { margin: 0; }
.ab-company dl > div { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--color-border); font-size: .9rem; }
.ab-company dl > div:last-child { border-bottom: 0; }
.ab-company dt { color: var(--color-muted); flex-shrink: 0; }
.ab-company dd { margin: 0; font-weight: 700; text-align: left; word-break: break-word; }

.tm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; max-width: 1040px; margin-inline: auto; }
.tm-card { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.8rem 1.4rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.tm-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: rgba(58, 211, 177, .55); }
.tm-card__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin-bottom: .6rem; }
.tm-card__photo--initials { display: grid; place-items: center; background: linear-gradient(135deg, var(--color-navy), #2b3380); color: #fff; font-weight: 800; font-size: 2rem; }
.tm-card h3 { font-size: 1.05rem; margin: 0; }
.tm-card__role { color: #0e8f76; font-weight: 700; font-size: .86rem; margin: 0; }
html.dark .tm-card__role { color: var(--color-accent); }
.tm-card__bio { color: var(--color-muted); font-size: .86rem; line-height: 1.9; margin: .4rem 0 0; }
.tm-card__link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .6rem; font-size: .82rem; font-weight: 700; }
.tm-card__link svg { width: 15px; height: 15px; }
.tm-note { text-align: center; color: var(--color-muted); font-size: .88rem; margin: 2rem 0 0; }

/* ---- Legal pages (terms / privacy) ---- */
.lg-page { padding: 2.5rem 0 4rem; }
.lg-meta { display: flex; align-items: center; gap: .5rem; color: var(--color-muted); font-size: .88rem; margin: 0 0 2rem; }
.lg-meta svg { width: 16px; height: 16px; }
.lg-content { font-size: 1.02rem; line-height: 2; }
.lg-content h2 { font-size: 1.3rem; margin-top: 2.2em; }
.lg-content h2:first-child { margin-top: 0; }
.lg-content > p:first-of-type { font-size: 1.02rem; color: var(--color-fg); }
.lg-contact { max-width: var(--container-narrow); margin-top: 3rem; padding: 1.4rem 1.6rem; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.lg-contact h3 { font-size: 1rem; margin-bottom: .5rem; }
.lg-contact p { margin: 0; color: var(--color-muted); font-size: .92rem; }

/* ==========================================================================
   FAQ page
   ========================================================================== */
.fq-hero { padding-bottom: 3.5rem; }
.fq-search { position: relative; max-width: 620px; margin: 2rem auto 0; }
.fq-search > svg { position: absolute; inset-inline-start: 1.2rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--color-muted); pointer-events: none; }
.fq-search input[type="search"] {
	width: 100%; padding: 1.05rem 3.2rem 1.05rem 1.2rem; padding-inline-start: 3.2rem; padding-inline-end: 3.2rem;
	border-radius: var(--radius-full); border: 2px solid transparent; background: #fff; color: var(--color-ink);
	font-size: 1rem; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .55); -webkit-appearance: none; appearance: none;
}
.fq-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.fq-search input[type="search"]::placeholder { color: #7b809a; }
.fq-search input[type="search"]:focus { outline: 0; border-color: var(--color-accent); box-shadow: 0 0 0 4px rgba(58, 211, 177, .3), 0 18px 40px -18px rgba(0, 0, 0, .55); }
.fq-search__clear { position: absolute; inset-inline-end: .55rem; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--color-surface-2); color: var(--color-ink); display: grid; place-items: center; cursor: pointer; }
.fq-search__clear[hidden] { display: none; }
.fq-search__clear svg { width: 16px; height: 16px; }

.fq-page { padding: 2.5rem 0 1rem; }
.fq-toolbar { max-width: 860px; margin: 0 auto 1.75rem; display: flex; flex-direction: column; gap: 1rem; }
.fq-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.fq-chip {
	display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem; border-radius: var(--radius-full);
	border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-fg);
	font-size: .86rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.fq-chip span { font-size: .72rem; font-weight: 700; padding: .05rem .5rem; border-radius: 999px; background: var(--color-surface-2); color: var(--color-muted); }
.fq-chip:hover { border-color: var(--color-teal); }
.fq-chip.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.fq-chip.is-active span { background: rgba(255, 255, 255, .18); color: #fff; }
html.dark .fq-chip.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #0b1a2b; }
html.dark .fq-chip.is-active span { background: rgba(11, 26, 43, .15); color: #0b1a2b; }

.fq-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.fq-count { margin: 0; margin-inline-end: auto; color: var(--color-muted); font-size: .88rem; }
.fq-link-btn { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; color: var(--color-link); font-weight: 700; font-size: .85rem; cursor: pointer; }
.fq-link-btn:hover { color: var(--color-teal); }
.fq-link-btn svg { width: 15px; height: 15px; }

.fq-list { max-width: 860px; margin: 0 auto; }
.fq-cat { margin-bottom: 2.5rem; }
.fq-cat[hidden], .fq-item[hidden], .fq-empty[hidden] { display: none; }
.fq-cat > h2 { font-size: 1.15rem; margin: 0 0 1rem; padding-inline-start: .8rem; border-inline-start: 4px solid var(--color-accent); }
.fq-item { background: var(--color-card-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: .75rem; overflow: hidden; scroll-margin-top: 6rem; transition: border-color .15s ease, box-shadow .15s ease; }
.fq-item:hover { border-color: rgba(58, 211, 177, .55); }
.fq-item[open] { border-color: rgba(58, 211, 177, .7); box-shadow: var(--shadow-soft); }
.fq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 700; line-height: 1.8; }
.fq-item summary::-webkit-details-marker { display: none; }
.fq-item summary svg { width: 18px; height: 18px; flex-shrink: 0; color: var(--color-muted); transition: transform .2s ease; }
.fq-item[open] summary svg { transform: rotate(180deg); }
.fq-item__a { padding: 0 1.3rem 1.2rem; }
.fq-item__body { color: var(--color-muted); font-size: .96rem; line-height: 2; }
.fq-item__body > * + * { margin-top: .8em; }
.fq-item__body p { margin: 0; }
.fq-item__body ul, .fq-item__body ol { padding-inline-start: 1.4em; margin: 0; }
.fq-item__body li::marker { color: var(--color-teal); }
.fq-item__body a { text-decoration: underline; text-underline-offset: 3px; }
.fq-item__copy { margin-top: 1rem; color: var(--color-muted); font-weight: 600; font-size: .8rem; }
.fq-item mark { background: rgba(58, 211, 177, .3); color: inherit; border-radius: 4px; padding: 0 .15em; }

.fq-empty { text-align: center; padding: 3rem 1rem; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.fq-empty h3 { font-size: 1.1rem; }
.fq-empty p { color: var(--color-muted); }
@media (max-width: 560px) { .fq-item summary { padding: 1rem; } .fq-item__a { padding: 0 1rem 1rem; } }

.mk-faq__more { text-align: center; margin: 2rem 0 0; }

/* ---- Messaging + form builder mockup ---- */
.mock-tabs { display: flex; gap: .4rem; margin-bottom: .9rem; }
.mock-tabs span { padding: .35rem .9rem; border-radius: 999px; background: var(--color-surface); color: var(--color-muted); font-size: .74rem; font-weight: 700; }
.mock-tabs span.is-active { background: var(--color-navy); color: #fff; }
.mock-compose { border: 1px solid var(--color-border); border-radius: 12px; padding: .8rem; display: flex; flex-direction: column; gap: .7rem; background: var(--color-card-bg); }
.mock-compose__to { display: flex; align-items: center; gap: .5rem; font-size: .76rem; }
.mock-compose__text { background: var(--color-surface); border-radius: 10px; padding: .7rem .8rem; font-size: .78rem; line-height: 1.9; }
.mock-compose__foot { display: flex; justify-content: space-between; align-items: center; color: var(--color-muted); font-size: .7rem; }
.mock-compose__btn { background: var(--color-accent); color: #0b1a2b; font-weight: 800; padding: .35rem .9rem; border-radius: 999px; font-size: .74rem; }
.mock-form { display: flex; flex-direction: column; gap: .5rem; }
.mock-form__row { display: flex; align-items: center; gap: .6rem; border: 1px dashed var(--color-border); border-radius: 10px; padding: .55rem .75rem; font-size: .76rem; }
.mock-form__row i { width: 14px; height: 14px; border-radius: 4px; background: var(--color-accent-soft); border: 1px solid var(--color-accent); flex-shrink: 0; }

/* ==========================================================================
   Real screenshots (light/dark pair swapped by the html.dark class)
   ========================================================================== */
.shot { display: block; margin: 0; }
.shot.mock { max-width: none; }
.mock--dash.shot { max-width: 1040px; }
.shot__body { line-height: 0; background: var(--color-card-bg); }
.shot__img { display: block; width: 100%; height: auto; }
.shot__img--dark { display: none; }
html.dark .shot__img--light { display: none; }
html.dark .shot__img--dark { display: block; }

/* ==========================================================================
   Gallery slider
   ========================================================================== */
.mk-gallery { overflow: hidden; }
.gallery { max-width: 1040px; margin-inline: auto; }
.gallery__tabs { display: flex; gap: .4rem; overflow-x: auto; padding: .25rem; margin-bottom: 1.25rem; justify-content: center; scrollbar-width: none; }
.gallery__tabs::-webkit-scrollbar { display: none; }
.gallery__tab {
	flex-shrink: 0; border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-muted);
	font: inherit; font-size: .86rem; font-weight: 700; padding: .45rem 1.05rem; border-radius: var(--radius-full);
	cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.gallery__tab:hover { color: var(--color-fg); border-color: var(--color-accent); }
.gallery__tab.is-active { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
html.dark .gallery__tab.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #0b1a2b; }

.gallery__stage { position: relative; }
.gallery__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
	overscroll-behavior-x: contain; padding-block: .25rem 1rem; outline-offset: 6px;
}
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
.gallery__slide .shot { box-shadow: 0 14px 34px -20px rgba(10, 14, 45, .45); }
.gallery__caption { text-align: center; padding: 1.4rem 1rem 0; }
.gallery__caption h3 { font-size: 1.1rem; margin-bottom: .25rem; }
.gallery__caption p { color: var(--color-muted); margin: 0; font-size: .95rem; }

.gallery__nav {
	position: absolute; top: 42%; z-index: 2; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid var(--color-border); background: var(--color-card-bg); color: var(--color-fg); cursor: pointer;
	box-shadow: 0 10px 24px -10px rgba(10, 14, 45, .45); transition: transform .15s ease, background-color .2s ease;
}
.gallery__nav:hover { background: var(--color-accent); color: #0b1a2b; transform: scale(1.06); }
.gallery__nav svg { width: 20px; height: 20px; }
.gallery__nav--prev { inset-inline-start: -23px; }
.gallery__nav--next { inset-inline-end: -23px; }

.gallery__foot { display: flex; flex-direction: column; align-items: center; gap: .6rem; margin-top: 1.25rem; }
.gallery__dots { display: flex; gap: .45rem; }
.gallery__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--color-border); transition: width .25s ease, background-color .25s ease; cursor: pointer; }
.gallery__dot.is-active { width: 26px; background: var(--color-accent); }
.gallery__note { margin: 0; font-size: .76rem; color: var(--color-muted); }

@media (max-width: 1100px) {
	.gallery__nav--prev { inset-inline-start: .5rem; }
	.gallery__nav--next { inset-inline-end: .5rem; }
}
@media (max-width: 640px) {
	.gallery__nav { display: none; }
	.gallery__tabs { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
	.gallery__track { scroll-behavior: auto; }
}

/* Dashboard login button / link */
.btn-login { gap: .45rem; }
.btn-login svg { width: 16px; height: 16px; }
.mk-hero__login { margin: 1.1rem 0 0; font-size: .9rem; color: #c7cbef; }
.mk-hero__login a { color: var(--color-accent); font-weight: 700; margin-inline-start: .35rem; }
.mk-hero__login a:hover { text-decoration: underline; }
.mk-hero__login + .mk-hero__note { margin-top: .4rem; }

/* ==========================================================================
   Pricing v2 — plan cards, monthly/yearly switch, enterprise strip, comparison table
   ========================================================================== */
[data-pricing][data-mode="monthly"] .is-yearly { display: none; }
[data-pricing][data-mode="yearly"] .is-monthly { display: none; }

.pr-toggle {
	display: flex; width: max-content; max-width: 100%; margin: 0 auto 2.75rem; padding: .3rem; border-radius: 999px;
	background: var(--color-surface); border: 1px solid var(--color-border);
}
.pr-toggle[hidden] { display: none; }
.pr-toggle button {
	display: inline-flex; align-items: center; gap: .55rem; border: 0; background: transparent; cursor: pointer;
	font: inherit; font-size: .92rem; font-weight: 700; color: var(--color-muted); padding: .55rem 1.5rem; border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}
.pr-toggle button:hover { color: var(--color-fg); }
.pr-toggle button.is-active { background: var(--color-navy); color: #fff; box-shadow: 0 8px 18px -10px rgba(31, 36, 89, .8); }
html.dark .pr-toggle button.is-active, .pr--dark .pr-toggle button.is-active { background: var(--color-accent); color: #0b1a2b; }
.pr--dark .pr-toggle { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); }
.pr--dark .pr-toggle button { color: #c1c6ee; }
.pr--dark .pr-toggle button:hover { color: #fff; }
.pr--dark .pr-toggle button.is-active { color: #0b1a2b; }
.pr-save { font-size: .7rem; font-weight: 800; padding: .08rem .55rem; border-radius: 999px; background: rgba(58, 211, 177, .22); color: #0e8f76; }
.pr-toggle button.is-active .pr-save { background: rgba(255, 255, 255, .22); color: inherit; }
.pr--dark .pr-toggle button.is-active .pr-save { background: rgba(11, 26, 43, .18); }

.pr-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; max-width: 1080px; margin-inline: auto; }
.pr-card {
	position: relative; display: flex; flex-direction: column; gap: 1rem; padding: 2rem 1.75rem 1.75rem;
	border-radius: 24px; background: var(--color-card-bg); color: var(--color-fg);
	border: 1px solid var(--color-border); box-shadow: var(--shadow-soft);
}
.pr-card--featured { border: 2px solid var(--color-accent); box-shadow: 0 34px 70px -28px rgba(58, 211, 177, .55); transform: translateY(-14px); padding-top: 2.35rem; }
.pr-card__badge {
	position: absolute; top: -15px; inset-inline-start: 50%; transform: translateX(50%); display: inline-flex; align-items: center; gap: .35rem;
	background: var(--color-accent); color: #0b1a2b; font-size: .75rem; font-weight: 800; padding: .3rem 1rem; border-radius: 999px; white-space: nowrap;
	box-shadow: 0 10px 22px -10px rgba(58, 211, 177, .9);
}
.pr-card__badge svg { width: 13px; height: 13px; }
.pr-card__head { display: flex; align-items: center; gap: .75rem; }
.pr-card__head h3 { margin: 0; font-size: 1.3rem; color: inherit; }
.pr-card__icon { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.pr-card__icon svg { width: 23px; height: 23px; }
.pr-card__icon--1 { background: linear-gradient(135deg, #4f7cff, #7aa2ff); }
.pr-card__icon--2 { background: linear-gradient(135deg, #f3b93d, #f08775); }
.pr-card__icon--3 { background: linear-gradient(135deg, #1f2459, #7c5cff); }
.pr-card__desc { margin: 0; color: var(--color-muted); font-size: .9rem; line-height: 1.9; min-height: 3.8em; }

.pr-price { padding-block: .35rem .15rem; }
.pr-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.pr-price__amount { font-size: 2.15rem; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.pr-price__old { color: var(--color-muted); font-size: .95rem; font-weight: 600; }
.pr-price__unit { color: var(--color-muted); font-size: .9rem; font-weight: 600; }
.pr-price__per { margin: .15rem 0 0; color: var(--color-muted); font-size: .82rem; }
.pr-price__note { margin: .5rem 0 0; padding: .45rem .75rem; border-radius: 10px; font-size: .8rem; background: rgba(58, 211, 177, .14); color: var(--color-fg); }
.pr-card__cta { justify-content: center; width: 100%; margin-block: .25rem .35rem; }
.pr-card__intro { margin: .25rem 0 0; font-size: .85rem; font-weight: 800; color: var(--color-muted); }
.pr-list { list-style: none; margin: 0; padding: 1rem 0 0; border-top: 1px solid var(--color-border); display: flex; flex-direction: column; gap: .7rem; flex: 1; font-size: .9rem; }
.pr-card__intro + .pr-list { border-top: 0; padding-top: .35rem; }
.pr-list li { display: flex; gap: .6rem; align-items: flex-start; line-height: 1.7; }
.pr-list svg { width: 17px; height: 17px; color: #12a37f; flex-shrink: 0; margin-top: .3rem; }
.pr-more { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; font-weight: 700; color: var(--color-link); }
.pr-more svg { width: 15px; height: 15px; }
.pr-tax { text-align: center; margin: 1.75rem 0 0; font-size: .82rem; color: var(--color-muted); }
.pr--dark .pr-tax { color: #aab0da; }
.pr-all { text-align: center; margin: 1.5rem 0 0; }

.pr-ent {
	display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; max-width: 1080px; margin: 2rem auto 0; padding: 1.75rem 2rem;
	border-radius: 22px; color: #fff; background: var(--mk-band); position: relative; overflow: hidden;
}
.pr-ent::after { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; inset-inline-end: -110px; top: -170px; background: radial-gradient(circle, rgba(58, 211, 177, .28), transparent 65%); pointer-events: none; }
.mk-band .pr-ent { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); }
.pr-ent > * { position: relative; z-index: 1; }
.pr-ent__icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: rgba(58, 211, 177, .18); color: var(--color-accent); flex-shrink: 0; }
.pr-ent__icon svg { width: 26px; height: 26px; }
.pr-ent__text { flex: 1 1 320px; }
.pr-ent__text h3 { margin: 0 0 .3rem; color: #fff; font-size: 1.15rem; }
.pr-ent__text p { margin: 0; color: #c1c6ee; font-size: .92rem; line-height: 1.9; }
.pr-ent__action { display: flex; flex-direction: column; align-items: stretch; gap: .6rem; text-align: center; }
.pr-ent__price { font-size: .82rem; color: #aab0da; }
.pr-ent .btn-ghost-light:hover { color: #fff; }

/* Comparison table */
.pc-scroll { overflow-x: auto; max-width: 1080px; margin-inline: auto; border: 1px solid var(--color-border); border-radius: 22px; background: var(--color-card-bg); box-shadow: var(--shadow-soft); }
.pc { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0; font-size: .92rem; }
.pc th, .pc td { padding: .95rem 1.1rem; text-align: center; border-bottom: 1px solid var(--color-border); vertical-align: middle; }
.pc tbody th[scope="row"] { text-align: start; font-weight: 600; position: sticky; inset-inline-start: 0; background: var(--color-card-bg); min-width: 280px; z-index: 1; }
.pc thead th { background: var(--color-card-bg); padding-block: 1.4rem 1.1rem; vertical-align: bottom; }
.pc thead th b { display: block; font-size: 1.1rem; }
.pc-corner { min-width: 280px; }
.pc-price { display: block; margin-top: .35rem; font-weight: 800; font-size: 1.05rem; }
.pc-price small { font-weight: 600; font-size: .75rem; color: var(--color-muted); margin-inline-start: .25rem; }
.pc-badge { display: inline-block; margin-bottom: .45rem; font-size: .7rem; font-weight: 800; padding: .15rem .7rem; border-radius: 999px; background: var(--color-accent); color: #0b1a2b; }
.pc-group th { text-align: start; font-size: .82rem; font-weight: 800; letter-spacing: .02em; color: var(--color-muted); background: var(--color-surface); padding-block: .7rem; }
.pc .is-featured { background: rgba(58, 211, 177, .07); }
.pc thead th.is-featured { background: rgba(58, 211, 177, .12); box-shadow: inset 0 3px 0 var(--color-accent); }
.pc-yes { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(58, 211, 177, .2); color: #12a37f; }
.pc-yes svg { width: 15px; height: 15px; }
.pc-no { color: var(--color-muted); opacity: .7; }
.pc tfoot td { border-bottom: 0; padding-block: 1.3rem; }
.pc tbody tr:hover td, .pc tbody tr:hover th[scope="row"] { background-color: color-mix(in srgb, var(--color-accent) 6%, var(--color-card-bg)); }

@media (max-width: 900px) {
	.pr-grid { grid-template-columns: 1fr; max-width: 460px; gap: 1.75rem; }
	.pr-card--featured { transform: none; }
	.pr-ent { padding: 1.5rem; }
	.pr-ent__action { width: 100%; }
	.pc tbody th[scope="row"], .pc-corner { min-width: 220px; }
}
.pr--dark .pr-toggle button:not(.is-active) .pr-save { color: #7af0d3; }