/* =====================================================================
   MARKENT — block theme supplementary styles
   Modern, fluid, gradient-touched. Pairs with theme.json tokens.
   ===================================================================== */

:root{
	--mk-baltic: var(--wp--preset--color--baltic, #0057B8);
	--mk-baltic-dark: var(--wp--preset--color--baltic-dark, #0A2A52);
	--mk-cornflower: var(--wp--preset--color--cornflower, #7AA9E8);
	--mk-cornflower-soft: var(--wp--preset--color--cornflower-soft, #E6EEF8);
	--mk-amber: var(--wp--preset--color--amber, #F2A516);
	--mk-ink: var(--wp--preset--color--ink, #111111);
	--mk-muted: var(--wp--preset--color--muted, #5B6470);
	--mk-limestone: var(--wp--preset--color--limestone, #F4F2EE);
	--mk-line: var(--wp--preset--color--line, #E4E2DC);
	--mk-white: var(--wp--preset--color--white, #FFFFFF);
	--mk-radius: 28px;
	--mk-radius-sm: 18px;
	--mk-shadow-sm: 0 2px 14px rgba(10,42,82,.06);
	--mk-shadow-md: 0 18px 50px rgba(10,42,82,.12);
	--mk-shadow-glow: 0 14px 34px rgba(0,87,184,.30);
}

/* ---- shared helpers ---- */
.markent-eyebrow{
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mk-baltic);
	display: inline-block;
}
.markent-grad-text{
	background: linear-gradient(120deg, var(--mk-baltic) 0%, var(--mk-cornflower) 70%, var(--mk-amber) 130%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.markent-muted{ color: var(--mk-muted); }

/* fluid auto-grids — reflow with no breakpoints needed */
.markent-grid{ display:grid; gap: clamp(1rem, 2.4vw, 2rem); }
.markent-grid--3{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.markent-grid--auto{ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.markent-grid--pillars{ grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* ---- cards ---- */
.markent-card{
	background: var(--mk-white);
	border: 1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	padding: clamp(1.6rem, 3vw, 2.4rem);
	box-shadow: var(--mk-shadow-sm);
	transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease;
	height: 100%;
}
.markent-card:hover{ transform: translateY(-6px); box-shadow: var(--mk-shadow-md); }

.markent-glass{
	background: rgba(255,255,255,.55);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,.7);
	border-radius: var(--mk-radius);
	box-shadow: var(--mk-shadow-md);
}

.markent-icon{
	width: 52px; height: 52px;
	border-radius: 14px;
	background: var(--mk-cornflower-soft);
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 1rem;
}
.markent-icon svg{ width: 24px; height: 24px; color: var(--mk-baltic); stroke: var(--mk-baltic); }

/* chips / tags */
.markent-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem; }
.markent-tags span{
	font-size:.8rem; font-weight:600; color: var(--mk-baltic);
	background: var(--mk-cornflower-soft);
	padding:.35rem .75rem; border-radius:100px;
}

/* ---- hero / sections with aurora ---- */
.markent-aurora{ position: relative; overflow: clip; isolation: isolate; }
.markent-aurora::before,
.markent-aurora::after{
	content:""; position:absolute; z-index:-1; border-radius:50%;
	filter: blur(70px); opacity:.5; pointer-events:none;
}
.markent-aurora::before{
	width:46vw; height:46vw; max-width:620px; max-height:620px;
	background: radial-gradient(circle at 30% 30%, var(--mk-cornflower), transparent 70%);
	top:-12%; right:-8%;
}
.markent-aurora::after{
	width:38vw; height:38vw; max-width:520px; max-height:520px;
	background: radial-gradient(circle at 50% 50%, var(--mk-amber), transparent 72%);
	opacity:.22; bottom:-14%; left:-6%;
}

.markent-illustration{
	border-radius: var(--mk-radius);
	overflow: hidden;
	box-shadow: var(--mk-shadow-md);
	border: 1px solid rgba(255,255,255,.6);
	background: var(--mk-cornflower-soft);
	line-height: 0;
}
.markent-illustration svg,
.markent-illustration img{ width:100%; height:auto; display:block; }

/* trust row */
.markent-trust{ display:flex; flex-wrap:wrap; gap:1.25rem 1.75rem; }
.markent-trust span{
	display:inline-flex; align-items:center; gap:.45rem;
	font-size:.92rem; font-weight:600; color: var(--mk-forest, #395241);
}
.markent-trust span::before{
	content:""; width:18px; height:18px; flex:none; border-radius:50%;
	background: var(--mk-baltic) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---- value props ---- */
.markent-value h3{ margin:.2rem 0 .5rem; }

/* ---- pricing ---- */
.markent-pricing{ display:grid; gap: clamp(1rem,2vw,1.5rem); grid-template-columns: repeat(auto-fit, minmax(235px,1fr)); align-items: stretch; }
.markent-pkg{
	background: var(--mk-white);
	border:1px solid var(--mk-line);
	border-radius: var(--mk-radius);
	padding: 2rem 1.7rem;
	display:flex; flex-direction:column; gap:.5rem;
	box-shadow: var(--mk-shadow-sm);
	transition: transform .35s ease, box-shadow .35s ease;
}
.markent-pkg:hover{ transform: translateY(-6px); box-shadow: var(--mk-shadow-md); }
.markent-pkg--featured{
	border: 1.5px solid var(--mk-baltic);
	box-shadow: var(--mk-shadow-glow);
	position: relative;
}
.markent-pkg--featured::before{
	content:"Most popular";
	position:absolute; top:-13px; left:50%; transform:translateX(-50%);
	background: linear-gradient(120deg, var(--mk-baltic), var(--mk-cornflower));
	color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.04em;
	padding:.3rem .9rem; border-radius:100px; white-space:nowrap;
}
.markent-pkg__name{ font-family: var(--wp--preset--font-family--display); font-weight:800; font-size:1.15rem; color:var(--mk-ink); }
.markent-pkg__price{ font-family: var(--wp--preset--font-family--display); font-weight:800; font-size:2.1rem; color:var(--mk-baltic); line-height:1.1; }
.markent-pkg__price small{ font-size:.85rem; font-weight:600; color:var(--mk-muted); }
.markent-pkg ul{ list-style:none; margin:.6rem 0 1.2rem; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.markent-pkg li{ position:relative; padding-left:1.6rem; font-size:.95rem; color:var(--mk-ink); }
.markent-pkg li::before{
	content:""; position:absolute; left:0; top:.25em; width:16px; height:16px;
	background: var(--mk-baltic) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
	border-radius:50%;
}
.markent-pkg .wp-block-button__link{ width:100%; text-align:center; }
.markent-pkg--featured .wp-block-button__link{ box-shadow: var(--mk-shadow-glow); }

/* ---- process timeline ---- */
.markent-steps{ display:grid; gap: clamp(1rem,2vw,1.6rem); grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); counter-reset: step; }
.markent-step{
	position:relative; background:var(--mk-white); border:1px solid var(--mk-line);
	border-radius: var(--mk-radius); padding:2.2rem 1.6rem 1.6rem; overflow:hidden;
}
.markent-step__n{
	font-family: var(--wp--preset--font-family--display); font-weight:800;
	font-size:3.2rem; line-height:1; color: var(--mk-cornflower-soft);
	position:absolute; top:.4rem; right:1rem;
}
.markent-step h3{ font-size:1.15rem; margin:.2rem 0 .5rem; }

/* ---- case studies ---- */
.markent-case{ display:grid; gap: clamp(1.4rem,3vw,2.5rem); grid-template-columns: 1fr 1.1fr; align-items:center; }
.markent-case--reverse{ grid-template-columns: 1.1fr 1fr; }
.markent-case--reverse .markent-illustration{ order:2; }
.markent-metrics{ display:flex; flex-wrap:wrap; gap:1.5rem; margin:1rem 0; }
.markent-metric strong{ display:block; font-family: var(--wp--preset--font-family--display); font-weight:800; font-size:1.8rem; color:var(--mk-baltic); line-height:1; }
.markent-metric span{ font-size:.85rem; color:var(--mk-muted); }
.markent-quote{
	border-left:3px solid var(--mk-baltic); padding-left:1.2rem; margin-top:1rem;
	font-style:italic; color:var(--mk-ink);
}
@media(max-width:781px){
	.markent-case, .markent-case--reverse{ grid-template-columns:1fr; }
	.markent-case--reverse .markent-illustration{ order:0; }
}

/* ---- final CTA ---- */
.markent-cta{
	position:relative; overflow:clip; isolation:isolate;
	background: linear-gradient(165deg, var(--mk-baltic-dark) 0%, #08203f 100%);
	border-radius: clamp(24px, 4vw, 40px);
	color:#fff; text-align:center;
	padding: clamp(3rem, 7vw, 6rem) clamp(1.5rem,5vw,4rem);
}
.markent-cta::before{
	content:""; position:absolute; z-index:-1; inset:auto -10% -40% auto;
	width:55%; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.45;
	background: radial-gradient(circle, var(--mk-cornflower), transparent 70%);
	top:-30%; right:-5%;
}
.markent-cta::after{
	content:""; position:absolute; z-index:-1; width:40%; aspect-ratio:1; left:-8%; bottom:-30%;
	border-radius:50%; filter:blur(80px); opacity:.3;
	background: radial-gradient(circle, var(--mk-amber), transparent 70%);
}
.markent-cta :where(h2,h3){ color:#fff; }
.markent-cta .markent-eyebrow{ color: var(--mk-cornflower); }

/* light button (on dark) */
.markent-btn-light .wp-block-button__link{
	background: var(--mk-white); color: var(--mk-ink);
}
.markent-btn-light .wp-block-button__link:hover{ background: var(--mk-cornflower-soft); color: var(--mk-baltic-dark); }

/* ---- page hero (inner pages) ---- */
.markent-pagehero{
	position:relative; overflow:clip; isolation:isolate;
	background: linear-gradient(160deg, var(--mk-cornflower-soft) 0%, var(--mk-limestone) 100%);
	border-radius: clamp(20px,3vw,32px);
}

/* ---- contact ---- */
.markent-contact{ display:grid; gap: clamp(1.5rem,4vw,4rem); grid-template-columns: 1fr 1.05fr; align-items:start; }
@media(max-width:781px){ .markent-contact{ grid-template-columns:1fr; } }
.markent-points{ list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem; }
.markent-points li{ display:flex; gap:.9rem; align-items:flex-start; }
.markent-points strong{ display:block; font-family: var(--wp--preset--font-family--display); color:var(--mk-ink); }
.markent-points span{ color:var(--mk-muted); font-size:.92rem; }

.markent-form{
	background: var(--mk-white); border:1px solid var(--mk-line);
	border-radius: var(--mk-radius); padding: clamp(1.6rem,3vw,2.4rem);
	box-shadow: var(--mk-shadow-sm);
}
.markent-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:560px){ .markent-form .row{ grid-template-columns:1fr; } }
.markent-form .field{ margin-bottom:1rem; }
.markent-form label{ display:block; font-size:.85rem; font-weight:600; color:var(--mk-ink); margin-bottom:.4rem; }
.markent-form input, .markent-form select, .markent-form textarea{
	width:100%; padding:.85rem 1rem; border:1px solid var(--mk-line); border-radius:12px;
	font:inherit; color:var(--mk-ink); background:#fff; transition:border-color .2s, box-shadow .2s;
}
.markent-form textarea{ min-height:130px; resize:vertical; }
.markent-form input:focus, .markent-form select:focus, .markent-form textarea:focus{
	outline:none; border-color:var(--mk-baltic); box-shadow:0 0 0 4px rgba(0,87,184,.12);
}
.markent-form button{
	width:100%; border:0; cursor:pointer; color:#fff; font-weight:600; font:inherit; font-weight:600;
	background: var(--mk-baltic); padding:1rem; border-radius:100px;
	box-shadow: var(--mk-shadow-glow); transition: transform .25s, background .25s;
}
.markent-form button:hover{ transform: translateY(-2px); background: var(--mk-baltic-dark); }
.markent-form__note{ font-size:.82rem; color:var(--mk-muted); text-align:center; margin-top:.9rem; }
.markent-form__success{
	background:#EAF4EC; border:1px solid #BFE0C7; color:#2C5C39;
	padding:1rem 1.1rem; border-radius:12px; margin-bottom:1.2rem; font-size:.95rem;
}

/* ---- honeypot (spam trap, visually hidden) ---- */
.markent-hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---- site header: sticky translucent "glass" ---- */
.markent-siteheader{
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,.72);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid var(--mk-line);
}
.markent-logo{ display:inline-flex; align-items:center; text-decoration:none; }
.markent-logo svg{ height: 40px; width: auto; display:block; }
.markent-siteheader .wp-block-navigation{ gap: .4rem 1.5rem; }
.markent-siteheader .wp-block-navigation a{
	color: var(--mk-ink); font-weight: 600; font-size: .95rem; text-decoration: none;
}
.markent-siteheader .wp-block-navigation a:hover{ color: var(--mk-baltic); }
.markent-siteheader .wp-block-button__link{ padding: .6rem 1.25rem; font-size: .92rem; }
@media(max-width:781px){
	.markent-logo svg{ height: 34px; }
}

/* ---- footer ---- */
.markent-footer{ color: rgba(255,255,255,.74); }
.markent-footer p{ color: rgba(255,255,255,.74); margin:.45rem 0; }
.markent-footer .markent-logo svg{ height: 42px; }
.markent-footer a{ color: rgba(255,255,255,.82); text-decoration: none; }
.markent-footer a:hover{ color: var(--mk-cornflower); }
.markent-footer .markent-eyebrow{ color: var(--mk-cornflower); margin-bottom:.4rem; }
.markent-footer .markent-icon{ background: rgba(255,255,255,.08); }
.markent-footer__bottom{
	display:flex; justify-content:space-between; flex-wrap:wrap; gap:.6rem;
	border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.3rem;
	font-size: .85rem; color: rgba(255,255,255,.55);
}

/* accessibility / motion */
@media (prefers-reduced-motion: reduce){
	*{ animation:none !important; transition:none !important; }
}