/*
 * basgro.com, "Daylight" (owner's choice, 2026-10-28): a white page over a
 * saturated emerald-to-gold field, one typeface (Readex Pro) for every
 * line, and the header, menus and footer shared by every public page.
 * Colours come from tokens.css in its light theme; classes are prefixed
 * mk- so they never meet site.css, which still dresses the sign-in pages.
 */

@font-face { font-family: 'basgro Readex'; font-weight: 160 700; font-display: swap; src: url(/fonts/readex-pro-arabic-wght-normal.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: 'basgro Readex'; font-weight: 160 700; font-display: swap; src: url(/fonts/readex-pro-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }
/* Headings: Inter for Latin, tightly set; Arabic falls through to Readex, never tracked. */
@font-face { font-family: 'basgro Head'; font-weight: 500 800; font-display: swap; src: url(/fonts/inter-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212; }

.mk {
    --mk-font: 'basgro Readex', 'basgro UI', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --mk-head: 'basgro Head', 'basgro Readex', 'basgro UI', 'Segoe UI', Tahoma, system-ui, sans-serif;
    --mk-bg: #fbfcf9;
    --mk-gold: #d9b44a;
    --mk-night: #04140f;
    --mk-ever: #0b4e3b;
    --mk-green: #2e9e73;
    --mk-mint: #7fd4ae;
    --mk-lift: 0 2px 4px rgba(4, 20, 15, .05), 0 24px 60px rgba(4, 20, 15, .16);
    background: var(--mk-bg);
    color: var(--ink);
    font: 400 16px/1.7 var(--mk-font);
}
.mk h1, .mk h2, .mk h3 { font-family: var(--mk-head); letter-spacing: 0; text-wrap: balance; }
.mk h1:lang(en), .mk h2:lang(en) { letter-spacing: -.03em; }
.mk h3:lang(en) { letter-spacing: -.015em; }
.mk a { color: inherit; text-decoration: none; }
.mk .beta-bar { background: var(--mk-night); color: #c7d3cc; border: 0; }
[dir="rtl"] .mk-arrow { display: inline-block; transform: scaleX(-1); }
.mk-wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: max(20px, env(safe-area-inset-left, 0px)); }
.mk-main { overflow-x: clip; }

/* Header */
.mk-hdr { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--mk-bg) 82%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.mk-hdr.is-scrolled { border-bottom-color: var(--line); }
.mk-hdr-row { display: flex; align-items: center; gap: 28px; height: 72px; }
.mk-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; color: var(--ink); }
.mk-mark { width: 24px; height: 28px; flex: none; }
.mk-nav { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.mk-nav > li { position: relative; }
.mk-nav-link { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink-2); font: 400 15px/1.5 var(--mk-font); cursor: pointer; }
.mk-nav-link:hover, .mk-nav-link[aria-expanded="true"] { background: var(--hover); color: var(--ink); }
.mk-chev { transition: transform .2s; }
.mk-nav-link[aria-expanded="true"] .mk-chev { transform: rotate(180deg); }
.mk-hdr-end { margin-inline-start: auto; display: flex; align-items: center; gap: 10px; }
.mk-lang { margin: 0; }
.mk-lang button { border: 0; background: none; color: var(--mute); font: 400 14px var(--mk-font); padding: 8px; cursor: pointer; }
.mk-lang button:hover { color: var(--ink); }
.mk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 20px; border-radius: 999px; border: 1px solid transparent; font: 600 15px/1.5 var(--mk-font); white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s; }
.mk .mk-btn-dark { background: var(--ink); color: #fff; }
.mk .mk-btn-dark:hover { background: var(--ink-2); color: #fff; }
.mk .mk-btn-ghost { background: #fff; border-color: var(--line-2); color: var(--ink); }
.mk .mk-btn-ghost:hover { border-color: var(--ink); }
.mk .mk-btn-brand { background: var(--brand); color: var(--on-brand); }
.mk .mk-btn-brand:hover { background: var(--brand-hover); color: var(--on-brand); }
.mk-burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); cursor: pointer; }

/* Mega menus */
.mk-mega { position: absolute; top: calc(100% + 10px); inset-inline-start: -12px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; width: min(860px, calc(100vw - 40px)); background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--mk-lift); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility .18s; }
.mk-mega.is-open { opacity: 1; visibility: visible; transform: none; }
.mk-mega-main { padding: 26px 28px; }
.mk-mega-side { padding: 26px 24px; background: #f3f6f2; border-inline-start: 1px solid var(--line); }
.mk-mega-label { margin: 0 0 12px; font-size: 13px; color: var(--mute); }
.mk-mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
.mk-item { display: block; padding: 9px 12px; margin-inline: -12px; border-radius: 12px; }
a.mk-item:hover { background: var(--hover); }
.mk-mega-side a.mk-item:hover { background: #fff; }
.mk-item strong { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15.5px; color: var(--ink); }
.mk-item > span { display: block; font-size: 13.5px; line-height: 1.5; color: var(--mute); }
.mk-item.is-soon strong { color: var(--ink-2); }
.mk-soon { font-style: normal; font-size: 11px; font-weight: 600; background: var(--line); color: var(--mute); border-radius: 999px; padding: 1px 8px; }
.mk-news { display: grid; gap: 4px; }
.mk-news-art { position: relative; display: block; height: 150px; margin-bottom: 12px; border-radius: 16px; overflow: hidden; background: radial-gradient(120% 90% at 85% 100%, #d9b44a 0%, transparent 55%), radial-gradient(90% 80% at 10% 90%, #2e9e73 0%, transparent 60%), linear-gradient(160deg, #04140f 25%, #0b4e3b); }
.mk-news-art img { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); width: 120px; height: auto; filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .5)); }
.mk-ring { position: absolute; top: 26px; inset-inline-end: 34px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid #d9b44a; box-shadow: 0 0 0 8px rgba(217, 180, 74, .18); }
.mk-news strong { font-size: 16px; }
.mk-news > span:not(.mk-news-art) { font-size: 13.5px; color: var(--mute); }
.mk-news em { font-style: normal; font-weight: 600; font-size: 14px; color: var(--brand); margin-top: 6px; }

/* Phone drawer */
.mk-drawer { position: fixed; inset: 0; z-index: 60; overflow-y: auto; background: var(--mk-bg); padding: calc(14px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); }
.mk-drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mk-drawer .mk-burger { display: inline-flex; }
.mk-drawer details { border-bottom: 1px solid var(--line); padding: 0; }
.mk-drawer summary { list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-weight: 600; font-size: 18px; cursor: pointer; }
.mk-drawer summary::-webkit-details-marker { display: none; }
.mk-drawer details[open] .mk-chev { transform: rotate(180deg); }
.mk-drawer .mk-item { margin: 0; padding: 8px 0; }
.mk-drawer .mk-mega-label { margin: 8px 0 2px; }
.mk-drawer-link { display: block; padding: 16px 0; font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--line); }
.mk-drawer-lang { margin: 0; border-bottom: 1px solid var(--line); }
.mk-drawer-lang button { width: 100%; padding: 16px 0; border: 0; background: none; color: var(--ink); font: 600 18px/1.5 var(--mk-font); text-align: start; cursor: pointer; }
.mk-drawer-cta { display: grid; gap: 10px; margin-top: 22px; }
.mk-drawer-cta .mk-btn { min-height: 50px; }

/* Hero */
.mk-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: 110px 0; text-align: center; }
.mk-field { position: absolute; inset: auto 0 0 0; height: 78%; z-index: -1; background:
    radial-gradient(45% 60% at 18% 70%, #d9b44a 0%, transparent 70%),
    radial-gradient(40% 55% at 82% 65%, #2e9e73 0%, transparent 70%),
    radial-gradient(35% 50% at 50% 95%, #0b4e3b 0%, transparent 75%),
    radial-gradient(50% 60% at 55% 55%, #7fd4ae 0%, transparent 70%),
    linear-gradient(180deg, transparent 0%, #bfe8d4 45%, #7fd4ae 100%); }
.mk-field::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--mk-bg) 0%, transparent 38%); }
.mk-hero-inner { display: flex; flex-direction: column; align-items: center; }
.mk-hero h1 { margin: 0; font-size: clamp(34px, 5vw, 56px); font-weight: 600; line-height: 1.15; }
.mk-hero h1:lang(ar) { line-height: 1.35; }
.mk-lead { margin: 14px auto 0; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.6; color: var(--mute); max-width: 60ch; text-wrap: balance; }
.mk-prompt { position: relative; width: min(680px, 100%); margin-top: 34px; padding: 16px 18px 12px; background: #fff; border-radius: 26px; box-shadow: var(--mk-lift); text-align: start; }
.mk-prompt:focus-within { box-shadow: 0 0 0 2px var(--focus), var(--mk-lift); }
.mk-prompt textarea { display: block; width: 100%; min-height: 54px; border: 0; outline: none; resize: none; background: none; color: var(--ink); font: 400 17px/1.6 var(--mk-font); }
.mk-prompt textarea::placeholder { color: var(--faint); }
.mk-error { margin: 4px 0 0; font-size: 13px; color: var(--danger); }
.mk-prompt-row { display: flex; align-items: center; gap: 10px; }
.mk-ready { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.mk-ready img { width: 28px; height: 28px; border-radius: 50%; background: var(--mk-night); }
.mk-send { margin-inline-start: auto; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--ink); color: #fff; cursor: pointer; flex: none; }
.mk-send:hover { background: var(--ink-2); }
.mk-peek { position: absolute; width: 120px; height: auto; bottom: -4px; inset-inline-end: -112px; filter: drop-shadow(0 12px 18px rgba(4, 20, 15, .25)); pointer-events: none; }

/* Studio showcase */
.mk-show { width: 100%; margin: 70px 0 0; }
.mk-win { max-width: 1080px; margin-inline: auto; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 60px rgba(4, 20, 15, .18); overflow: hidden; text-align: start; }
.mk-win-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.mk-dots { display: flex; gap: 6px; }
.mk-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); }
.mk-proj { font-weight: 600; font-size: 14px; }
.mk-wtabs { display: flex; gap: 4px; margin-inline: auto; padding: 3px; border-radius: 999px; background: #f0f3ef; }
.mk-wtabs span { padding: 3px 12px; border-radius: 999px; font-size: 12.5px; color: var(--mute); }
.mk-wtabs .is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.mk-pub { padding: 4px 14px; border-radius: 999px; background: var(--mk-gold); color: var(--mk-night); font-size: 13px; font-weight: 600; }
.mk-win-body { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 440px; }
.mk-chat { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-inline-end: 1px solid var(--line); font-size: 14px; }
.mk-msg { max-width: 88%; margin: 0; padding: 10px 13px; border-radius: 16px; line-height: 1.6; }
.mk-msg.is-me { align-self: flex-start; background: var(--mk-ever); color: #fff; border-start-start-radius: 4px; }
.mk-msg.is-athar { align-self: flex-end; background: #f2f5f1; border: 1px solid var(--line); border-start-end-radius: 4px; }
.mk-who { align-self: flex-end; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--mute); }
.mk-who img { width: 24px; height: 24px; border-radius: 50%; background: var(--mk-night); }
.mk-steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.mk-steps li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--mute); }
.mk-steps .is-done { color: var(--ink); }
.mk-dot { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--line-2); color: #fff; }
.mk-steps .is-done .mk-dot, .mk-scan .mk-dot { background: var(--mk-green); border-color: var(--mk-green); }
.mk-steps .is-now .mk-dot { border-color: var(--mk-gold); border-top-color: transparent; animation: mk-turn 1s linear infinite; }
.mk-ask { margin: auto 0 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px 9px 12px; border: 1px solid var(--line); border-radius: 14px; color: var(--mute); font-size: 13.5px; }
.mk-ask b { margin-inline-start: auto; width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; }
.mk-ask b svg { width: 14px; height: 14px; }
.mk-pv { padding: 22px; background: #f4f7f3; }
.mk-site { height: 100%; border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.mk-site-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; font-size: 13px; color: var(--mute); }
.mk-site-nav b { color: var(--ink); font-size: 15px; }
.mk-site-hero { position: relative; display: grid; justify-items: start; gap: 14px; margin: 4px 18px; padding: 30px 24px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, rgba(11, 78, 59, .95), rgba(46, 158, 115, .6)), radial-gradient(60% 80% at 10% 90%, rgba(217, 180, 74, .7), transparent 70%); }
.mk-site-hero strong { font-size: 24px; line-height: 1.3; max-width: 14ch; }
.mk-site-btn { padding: 5px 14px; border-radius: 999px; background: #fff; color: var(--mk-night); font-size: 12.5px; font-weight: 600; }
.mk-sel { position: absolute; top: 22px; inset-inline-start: 18px; width: 52%; height: 72px; border: 1.5px dashed var(--mk-gold); border-radius: 8px; }
.mk-sel::after { content: attr(data-label); position: absolute; top: -11px; inset-inline-end: -6px; padding: 0 8px; border-radius: 999px; background: var(--mk-gold); color: var(--mk-night); font-size: 11px; font-weight: 600; }
.mk-site-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 18px 18px; }
.mk-site-cards > i { height: 76px; border-radius: 10px; background: #f2f5f1; border: 1px solid var(--line); }

/* Sections */
.mk-sec { padding-block: 110px; }
.mk-head { max-width: 640px; margin-bottom: 48px; }
.mk-head h2 { margin: 0; font-size: clamp(26px, 3.2vw, 40px); font-weight: 600; line-height: 1.25; }
.mk-head p { margin: 12px 0 0; font-size: 17px; color: var(--mute); }
.mk-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mk-feat { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; }
.mk-art { height: 180px; display: grid; place-items: center; background: radial-gradient(70% 80% at 20% 0%, rgba(127, 212, 174, .45), transparent 70%), radial-gradient(60% 70% at 100% 100%, rgba(217, 180, 74, .3), transparent 70%), #f3f6f2; }
.mk-pill { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(4, 20, 15, .12); font-size: 14px; }
.mk-pill img { width: 26px; height: 26px; border-radius: 50%; background: var(--mk-night); }
.mk-vers { display: grid; gap: 6px; width: 70%; }
.mk-vers span { display: flex; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 10px; background: #fff; box-shadow: 0 4px 14px rgba(4, 20, 15, .08); font-size: 13px; }
.mk-vers small { color: var(--mute); }
.mk-vers .is-on { outline: 2px solid var(--mk-gold); }
.mk-shield { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 22px; background: #fff; color: var(--mk-green); box-shadow: 0 10px 30px rgba(4, 20, 15, .12); }
.mk-txt { padding: 22px 24px 26px; }
.mk-txt h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
.mk-txt p { margin: 6px 0 0; font-size: 15px; color: var(--mute); }

/* Night tour */
.mk-tour { margin-inline: max(12px, env(safe-area-inset-left, 0px)); padding-block: 88px; border-radius: 32px; background: var(--mk-night); color: #edf2ee; }
.mk-tour .mk-head p { color: #9fb3a9; }
.mk-tour-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.mk-tabs { display: flex; flex-direction: column; }
.mk-tab { position: relative; display: block; width: 100%; padding: 18px 0; border: 0; border-bottom: 1px solid #1b3a2d; background: none; color: inherit; text-align: start; font: inherit; cursor: pointer; }
.mk-tab:focus-visible { outline: 2px solid var(--mk-mint); outline-offset: 4px; border-radius: 6px; }
.mk-tab strong { font-weight: 500; font-size: 17px; color: #9fb3a9; transition: color .2s; }
.mk-tab[aria-selected="true"] strong { color: #edf2ee; }
.mk-tab-copy { display: none; margin-top: 8px; max-width: 42ch; font-size: 15px; color: #9fb3a9; }
.mk-tab[aria-selected="true"] .mk-tab-copy { display: block; }
.mk-bar { position: absolute; bottom: -1px; inset-inline-start: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--mk-gold), var(--mk-mint)); }
.mk-tab[aria-selected="true"] .mk-bar { animation: mk-fill 7s linear forwards; }
.mk-tour.is-paused .mk-tab[aria-selected="true"] .mk-bar { animation: none; width: 100%; }
.mk-stage { position: relative; min-height: 440px; border: 1px solid #1b3a2d; border-radius: 24px; background: radial-gradient(70% 60% at 50% 55%, rgba(46, 158, 115, .22), transparent 70%), #071811; overflow: hidden; }
.mk-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.mk-panel.is-on { opacity: 1; visibility: visible; }
.mk-glass { background: rgba(255, 255, 255, .04); border: 1px solid rgba(127, 212, 174, .25); border-radius: 18px; box-shadow: 0 30px 60px rgba(0, 0, 0, .4); }
.mk-host { width: min(420px, 92%); padding: 12px; box-shadow: 0 0 0 1.5px rgba(127, 212, 174, .55), 0 0 60px rgba(46, 158, 115, .35); }
.mk-host-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.mk-host-bar i { width: 9px; height: 9px; border-radius: 50%; background: #1b3a2d; }
.mk-host-bar span { flex: 1; padding: 3px 10px; border-radius: 999px; background: #0c2219; text-align: center; font-size: 12px; color: #9fb3a9; }
.mk-host-body { height: 170px; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items: center; border-radius: 12px; background: #0c2219; }
.mk-node { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(127, 212, 174, .3); background: radial-gradient(circle at 35% 30%, #2a4a3d, #10291f); color: var(--mk-mint); box-shadow: 0 8px 20px rgba(0, 0, 0, .4); }
.mk-node.is-big { width: 74px; height: 74px; color: var(--mk-gold); border-color: rgba(217, 180, 74, .5); }
.mk-host-labels { display: flex; justify-content: space-around; margin-top: 10px; font-size: 12px; color: #9fb3a9; }
.mk-share { position: relative; width: min(460px, 92%); }
.mk-share-site { display: grid; justify-items: start; gap: 8px; padding: 18px 16px 16px; }
.mk-share-site b { font-size: 17px; }
.mk-lines { display: grid; gap: 9px; width: 100%; }
.mk-lines i { display: block; height: 8px; border-radius: 4px; background: #1b3a2d; }
.mk-lines i:nth-child(2) { width: 80%; }
.mk-cta { position: relative; margin-top: 8px; padding: 6px 14px; border-radius: 10px; background: var(--mk-green); color: #fff; font-size: 13px; }
.mk-pulse { position: absolute; inset: -8px; border: 2px solid var(--mk-gold); border-radius: 14px; animation: mk-ping 1.8s ease-out infinite; }
.mk-tip { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; padding: 5px 10px; border-radius: 10px; background: var(--mk-gold); color: var(--mk-night); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.mk-live { position: absolute; top: -12px; inset-inline-start: 12px; padding: 2px 9px; border-radius: 999px; background: #b42318; color: #fff; font-size: 11px; font-weight: 600; }
.mk-agent { position: absolute; top: -26px; inset-inline-end: -10px; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: #fff; color: var(--ink); font-size: 12.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.mk-agent i { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--mk-green), var(--mk-ever)); }
.mk-timeline { display: grid; gap: 10px; width: min(420px, 92%); }
.mk-ver { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.mk-ver b { display: block; font-weight: 600; font-size: 14.5px; }
.mk-ver small { display: block; font-size: 12.5px; color: #9fb3a9; }
.mk-ver-n { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #0c2219; color: var(--mk-mint); font-size: 13px; }
.mk-ver-back { margin-inline-start: auto; padding: 3px 12px; border: 1px solid #1b3a2d; border-radius: 999px; font-size: 12.5px; white-space: nowrap; }
.mk-ver.is-cur { box-shadow: 0 0 0 1.5px var(--mk-gold); }
.mk-ver.is-cur .mk-ver-back { background: var(--mk-gold); border-color: var(--mk-gold); color: var(--mk-night); }
.mk-scan { width: min(420px, 92%); padding: 18px 20px; }
.mk-scan b { display: block; margin-bottom: 12px; font-size: 16px; }
.mk-scan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.mk-scan li { display: flex; align-items: center; gap: 8px; }
.mk-scan p { margin: 14px 0 0; font-size: 13px; color: var(--mk-gold); }
.mk-panel.is-on .mk-scan li { animation: mk-in .4s ease both; }
.mk-panel.is-on .mk-scan li:nth-child(2) { animation-delay: .3s; }
.mk-panel.is-on .mk-scan li:nth-child(3) { animation-delay: .6s; }
.mk-panel.is-on .mk-scan li:nth-child(4) { animation-delay: .9s; }
.mk-panel.is-on .mk-scan li:nth-child(5) { animation-delay: 1.2s; }
.mk-devices { position: relative; width: min(470px, 94%); height: 300px; }
.mk-laptop { position: absolute; top: 0; inset-inline-end: 0; width: 86%; }
.mk-scr { display: grid; align-content: start; gap: 8px; height: 230px; padding: 12px; border: 6px solid #1f3a2f; border-radius: 14px 14px 4px 4px; background: #0c2219; overflow: hidden; }
.mk-base { height: 12px; margin-inline: -6%; border-radius: 0 0 12px 12px; background: #2a4a3d; }
.mk-phone { position: absolute; bottom: 0; inset-inline-start: 0; display: grid; align-content: start; gap: 7px; width: 120px; height: 230px; padding: 12px 9px; border: 5px solid #2a4a3d; border-radius: 24px; background: #0c2219; box-shadow: 0 0 0 1.5px rgba(217, 180, 74, .6), 0 20px 40px rgba(0, 0, 0, .5); overflow: hidden; }
.mk-scr b, .mk-phone b { font-size: 14px; }
.mk-phone b { font-size: 12px; }
.mk-blk { display: block; height: 56px; border-radius: 8px; background: linear-gradient(120deg, var(--mk-ever), var(--mk-green)); }
.mk-phone .mk-blk { height: 44px; }

/* Examples */
.mk-projects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.mk-project { display: grid; gap: 4px; padding: 20px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.mk-project span { font-size: 13px; color: var(--mute); }

/* Plans */
.mk-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mk-plan { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 24px; background: #f3f6f2; }
.mk-plan-top { position: relative; display: flex; flex-direction: column; padding: 26px 26px 24px; border-radius: 23px; border-bottom: 1px solid var(--line); background: #fff; }
.mk-plan.is-pop .mk-plan-top { box-shadow: 0 0 0 2px var(--mk-green); }
.mk-badge { position: absolute; top: -12px; inset-inline-start: 22px; padding: 2px 12px; border-radius: 999px; background: var(--mk-green); color: #fff; font-size: 12px; font-weight: 600; }
.mk-plan h3 { margin: 0; font-size: 20px; font-weight: 600; }
.mk-desc { margin: 4px 0 0; font-size: 15px; color: var(--mute); }
.mk-price { margin: 18px 0 0; font-family: var(--mk-head); font-size: 44px; font-weight: 600; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mk-per { margin: 0 0 16px; font-size: 14px; color: var(--mute); }
.mk-incl { list-style: none; margin: 0; padding: 22px 26px 26px; display: grid; gap: 10px; font-size: 15px; color: var(--ink-2); }
.mk-incl li { display: flex; gap: 10px; align-items: flex-start; }
.mk-incl li::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232e9e73' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mk-more { display: inline-flex; gap: 6px; margin-top: 22px; font-weight: 600; color: var(--brand) !important; }

/* Questions */
.mk-faq { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
.mk-faq details { padding: 0; border-bottom: 1px solid var(--line); }
.mk-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-weight: 500; font-size: 17px; cursor: pointer; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--mute); transition: transform .2s; }
.mk-faq details[open] summary::after { transform: rotate(45deg); }
.mk-faq details p { margin: 0; padding-bottom: 18px; max-width: 60ch; font-size: 16px; color: var(--mute); }

/* Closing call */
.mk-closing { position: relative; isolation: isolate; overflow: hidden; padding-block: 110px 170px; text-align: center; }
.mk-closing .mk-field { height: 100%; }
.mk-closing-inner { display: flex; flex-direction: column; align-items: center; }
.mk-closing h2 { margin: 0; font-size: clamp(28px, 3.6vw, 44px); font-weight: 600; line-height: 1.25; }
.mk-closing-athar { width: 96px; height: auto; margin-bottom: 14px; border-radius: 50%; filter: drop-shadow(0 14px 20px rgba(4, 20, 15, .25)); }

/* Footer */
.mk-foot { position: relative; margin-top: -60px; }
.mk-foot-card { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; padding: 44px 40px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.mk-foot-card h2 { margin: 0 0 12px; font-size: 14px; font-weight: 600; }
.mk-foot-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; font-size: 14px; color: var(--mute); }
.mk-foot-card a:hover { color: var(--ink); }
.mk-foot-brand p { margin: 14px 0 0; max-width: 32ch; font-size: 14px; color: var(--mute); }
.mk-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 22px 40px; font-size: 13px; color: var(--mute); }

@keyframes mk-turn { to { transform: rotate(360deg); } }
@keyframes mk-fill { to { width: 100%; } }
@keyframes mk-ping { 0% { box-shadow: 0 0 0 0 rgba(217, 180, 74, .5); } 100% { box-shadow: 0 0 0 14px rgba(217, 180, 74, 0); } }
@keyframes mk-in { from { opacity: 0; } }

@media (max-width: 1100px) {
    .mk-peek { width: 90px; inset-inline-end: -30px; bottom: auto; top: -92px; }
    .mk-foot-card { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mk-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
    .mk-nav, .mk-hide-sm { display: none; }
    .mk-burger { display: inline-flex; }
    .mk-win-body, .mk-feats, .mk-tour-grid, .mk-plans, .mk-faq { grid-template-columns: minmax(0, 1fr); }
    .mk-chat { border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .mk-pv { min-height: 320px; }
    .mk-stage { min-height: 380px; }
}
@media (max-width: 640px) {
    .mk-hero { padding-top: 70px; }
    .mk-peek, .mk-wtabs, .mk-lang { display: none; }
    .mk-site-cards { grid-template-columns: repeat(2, 1fr); }
    .mk-site-cards .mk-unit:nth-child(3) { display: none; }
    .mk-sec { padding-block: 72px; }
    .mk-tour { padding-block: 64px; border-radius: 24px; }
    .mk-foot-card { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 30px 22px; }
    .mk-hdr-end .mk-btn { padding: 8px 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .mk *, .mk *::before, .mk *::after { animation: none !important; transition: none !important; }
}

/* Owner-provided site examples; absent images keep this section hidden in Blade. */
.mk-showcase-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.mk-showcase-card { min-width:0; overflow:hidden; border:1px solid #dce7df; border-radius:20px; background:#fff; box-shadow:0 12px 30px rgba(4,20,15,.07); }
.mk-showcase-browser { display:flex; align-items:center; gap:12px; min-height:34px; padding-inline:12px; background:#f1f5f0; border-bottom:1px solid #dce7df; }
.mk-showcase-dots { display:inline-flex; gap:4px; }
.mk-showcase-dots i { width:6px; height:6px; border-radius:50%; background:#c4d2c8; }
.mk-showcase-domain { flex:1; text-align:center; font:500 11px/1.4 'basgro Readex',system-ui,sans-serif; color:#71877a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-showcase-card > img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; transition:transform .4s ease; }
.mk-showcase-card { transition:transform .25s ease, box-shadow .25s ease; }
.mk-showcase-card:hover { transform:translateY(-3px); box-shadow:0 20px 40px rgba(4,20,15,.12); }
.mk-showcase-card:hover > img { transform:scale(1.03); }
.mk-showcase-copy { padding:18px; }
.mk-showcase-copy h3 { margin:0 0 5px; font-size:17px; color:#04140f; }
.mk-showcase-copy p { margin:0; color:#557066; font-size:13px; line-height:1.7; }
@media(max-width:900px) { .mk-showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) { .mk-showcase-grid { grid-template-columns:minmax(0,1fr); } }

/* Hero studio example: a real estate site (owner's choice) over a real photograph. */
.mk-site-hero { overflow: hidden; isolation: isolate; background: #04140f; }
.mk-site-hero::before { content: ""; position: absolute; inset: 0; z-index: -2; background: url(/brand/studio/re-hero.webp) center / cover no-repeat; }
[dir="rtl"] .mk-site-hero::before { transform: scaleX(-1); }
.mk-site-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(4, 20, 15, .9) 0%, rgba(4, 20, 15, .6) 45%, rgba(4, 20, 15, .1) 100%); }
[dir="rtl"] .mk-site-hero::after { background: linear-gradient(270deg, rgba(4, 20, 15, .9) 0%, rgba(4, 20, 15, .6) 45%, rgba(4, 20, 15, .1) 100%); }
.mk-site-btn { background: var(--mk-gold); color: var(--mk-night); }
.mk-site-cards { align-items: start; }
.mk-unit { display: grid; gap: 8px; padding: 6px 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 11.5px; color: var(--ink-2); }
.mk-unit b { font-weight: 500; padding-inline: 4px; }
.mk-unit-pic { position: relative; display: block; height: 64px; overflow: hidden; border-radius: 8px; background: #e9e4da; }
.mk-unit-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mk-unit-pic em { position: absolute; top: 6px; inset-inline-start: 6px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: var(--mk-ever); font-style: normal; font-size: 10px; font-weight: 600; }

/* Security page (basgro.com/security) */
.mk-sec-hero { padding-block: 120px 130px; }
.mk-sec-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 28px; }
.mk-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mk-control { padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: #fff; }
.mk-control-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #eef5f0; color: var(--mk-ever); }
.mk-control h3 { margin: 16px 0 0; font-size: 18px; font-weight: 600; line-height: 1.5; }
.mk-control p { margin: 6px 0 0; font-size: 15px; color: var(--mute); }
.mk-faq details a { color: var(--brand); }
@media (max-width: 760px) { .mk-controls { grid-template-columns: minmax(0, 1fr); } .mk-sec-hero { padding-block: 80px 90px; } }