/* =========================================================
   AuroraDigi v2 — brand layer, sliders, sample mockups.
   Loaded after style.css.
   ========================================================= */
:root{
  --violet:#7C5CFF;
  --aurora:linear-gradient(100deg,#12C2D6 0%,#3B82F6 52%,#7C5CFF 100%);
}

/* ---------- Brand ---------- */
.brand-mark{border-radius:11px;}
.brand-name b{font-weight:800; background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;}
.foot-brand .brand-name b{color:transparent;}

/* ---------- Topbar (no unverified contact details) ---------- */
.topbar-msg{display:inline-flex; align-items:center; gap:10px; color:#AFC0D8;}
.topbar-msg i{width:4px; height:4px; border-radius:50%; background:var(--cyan); display:inline-block;}

/* =========================================================
   HERO v2
   ========================================================= */
.hero2{position:relative; background:var(--navy); color:#fff; overflow:hidden;}
.hero2::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(700px 360px at 85% 8%, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(640px 420px at 70% 100%, rgba(18,194,214,.18), transparent 65%),
    radial-gradient(560px 380px at 0% 90%, rgba(27,95,217,.28), transparent 65%);
}
.hero2 .container{position:relative; display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(32px,4vw,64px); align-items:center; padding-block:clamp(48px,6.5vw,96px);}
.hero2 h1{color:#fff; font-size:clamp(34px,4.4vw,58px); margin-bottom:20px;}
.hero2 h1 .hl{background:var(--aurora); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero2 .lede{font-size:clamp(16px,1.3vw,18.5px); color:#BCCDE4; max-width:54ch; margin-bottom:24px;}
.hero-pills{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 30px; padding:0; list-style:none;}
.hero-pills li{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:#D7E3F4; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:30px; padding:7px 13px;}
.hero-pills svg{width:14px; height:14px; color:var(--cyan);}
.hero2 .btn-row{margin-bottom:0;}
.hero-stage{position:relative;}
.hero-stage .aud-slider .aud-dots{margin-top:18px;}
.hero-stage .aud-dots button{background:rgba(255,255,255,.28);}
.hero-stage .aud-dots button.is-active{background:var(--cyan);}
.hero-stage .aud-arrow{display:none;}
.scene{position:relative; aspect-ratio:1.18/1; container-type:size;}
.scene .sc-main{position:absolute; top:4cqh; inset-inline-start:0; width:88cqw; filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));}
.scene .sc-side{position:absolute; bottom:0; inset-inline-end:0; width:29cqw; filter:drop-shadow(0 20px 30px rgba(0,0,0,.5));}
.scene .sc-side.post{width:44cqw;}
.scene .sc-a{position:absolute; top:2cqh; inset-inline-start:2cqw; width:56cqw; transform:rotate(-4deg); filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));}
.scene .sc-b{position:absolute; bottom:2cqh; inset-inline-end:2cqw; width:52cqw; transform:rotate(3deg); filter:drop-shadow(0 24px 40px rgba(0,0,0,.45));}
html[dir="rtl"] .scene .sc-a{transform:rotate(4deg);}
html[dir="rtl"] .scene .sc-b{transform:rotate(-3deg);}
.scene-label{position:absolute; top:0; inset-inline-end:0; z-index:3; display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:#fff; background:rgba(11,30,59,.72); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(8px); padding:7px 13px; border-radius:30px;}
.scene-label i{width:7px; height:7px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 4px rgba(18,194,214,.18);}
@media(max-width:960px){
  .hero2 .container{grid-template-columns:1fr;}
  .hero-stage{max-width:620px; width:100%; margin-inline:auto;}
}

/* =========================================================
   SERVICES v2
   ========================================================= */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media(max-width:1080px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.svc-grid{grid-template-columns:1fr;}}
.svc{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 22px 22px; display:flex; flex-direction:column; transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease; overflow:hidden;}
.svc::after{content:""; position:absolute; inset-inline:0; top:0; height:3px; background:var(--aurora); opacity:0; transition:opacity .18s ease;}
.svc:hover{border-color:#C9D8EE; box-shadow:var(--shadow); transform:translateY(-3px);}
.svc:hover::after{opacity:1;}
.svc .card-icon{margin-bottom:16px;}
.svc h3{font-size:17.5px; margin-bottom:8px;}
.svc p{font-size:14.3px; color:var(--ink-soft); margin-bottom:14px;}
.svc .link-arrow{margin-top:auto; font-size:14px;}

/* =========================================================
   WHY v2
   ========================================================= */
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
@media(max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:580px){.why-grid{grid-template-columns:1fr;}}
.why-item{background:#fff; padding:28px 26px;}
.why-item .ic{width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--navy); color:var(--cyan); margin-bottom:16px;}
.why-item .ic svg{width:21px; height:21px;}
.why-item h3{font-size:17px; margin-bottom:6px;}
.why-item p{font-size:14.3px; color:var(--ink-soft); margin:0;}

/* =========================================================
   SLIDER
   ========================================================= */
.aud-slider{position:relative; --per:1; --gap:22px;}
.aud-viewport{overflow:hidden; border-radius:var(--radius-lg);}
.aud-slider[data-per="3"] .aud-viewport,.aud-slider[data-per="2"] .aud-viewport{margin-inline:calc(var(--gap) / -2); border-radius:0; padding-block:6px 18px;}
.aud-track{display:flex; transition:transform .75s cubic-bezier(.22,.61,.36,1); will-change:transform;}
.aud-slide{flex:0 0 calc(100% / var(--per)); min-width:0;}
.aud-slider[data-per="3"] .aud-slide,.aud-slider[data-per="2"] .aud-slide{padding-inline:calc(var(--gap) / 2);}
/* fade mode */
.aud-slider.is-fade .aud-track{display:grid; transform:none!important;}
.aud-slider.is-fade .aud-slide{grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .8s ease, visibility 0s linear .8s;}
.aud-slider.is-fade .aud-slide.is-active{opacity:1; visibility:visible; transition:opacity .8s ease;}
.aud-slider.is-fade .aud-viewport{overflow:visible; border-radius:0;}
/* dots */
.aud-dots{display:flex; justify-content:center; gap:8px; margin-top:22px; flex-wrap:wrap;}
.aud-dots button{width:8px; height:8px; padding:0; border:0; border-radius:8px; background:#C9D3E2; cursor:pointer; transition:width .3s ease, background .3s ease;}
.aud-dots button.is-active{width:26px; background:var(--blue);}
.section-navy .aud-dots button{background:rgba(255,255,255,.25);}
.section-navy .aud-dots button.is-active{background:var(--cyan);}
/* arrows */
.aud-arrow{position:absolute; top:calc(50% - 40px); z-index:4; width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--navy); display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow); transition:background .16s ease, transform .16s ease;}
.aud-arrow:hover{background:var(--blue-tint); transform:scale(1.05);}
.aud-arrow svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.aud-arrow.prev{inset-inline-start:-18px;}
.aud-arrow.next{inset-inline-end:-18px;}
html[dir="rtl"] .aud-arrow svg{transform:scaleX(-1);}
@media(max-width:1280px){.aud-arrow.prev{inset-inline-start:6px;} .aud-arrow.next{inset-inline-end:6px;}}
@media(max-width:700px){.aud-arrow{display:none;}}
.aud-slider:focus-within .aud-arrow{opacity:1;}

/* showcase slide: big media + caption */
.aud-show{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(24px,3.5vw,48px); align-items:center; padding:clamp(16px,2.4vw,28px); background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);}
.section-alt .aud-show{background:#fff;}
.section-navy .aud-show{background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.12);}
@media(max-width:860px){.aud-show{grid-template-columns:1fr;}}
.aud-show-media,.aud-card-media{position:relative;}

/* stage: tinted backdrop that sizes any mockup type */
.stage{position:relative; aspect-ratio:16/10.6; container-type:size; border-radius:calc(var(--radius) + 2px); background:var(--stage-bg,#EEF2F8); overflow:hidden; display:flex; align-items:center; justify-content:center;}
.stage::before{content:""; position:absolute; inset:0; background:radial-gradient(60% 70% at 85% 10%, rgba(255,255,255,.55), transparent 60%), radial-gradient(50% 60% at 10% 100%, rgba(255,255,255,.35), transparent 60%); pointer-events:none;}
.stage > .mk{position:relative;}
.stage > .mk-browser{width:min(94cqw,136cqh); box-shadow:0 18px 40px -18px rgba(11,30,59,.45);}
.stage > .mk-phone{width:44cqh;}
.stage > .mk-post{width:min(64cqh,80cqw);}
.stage > .mk-banner{width:92cqw;}
.stage > .mk-story{width:min(92cqw,150cqh);}
.stage > .mk-doc{width:min(92cqw,128cqh);}
.aud-card-media .stage{aspect-ratio:1/1.02;}
.aud-card-media .stage > .mk-browser{width:94cqw;}
.aud-card-media .stage > .mk-phone{width:45cqh;}
.aud-card-media .stage > .mk-post{width:min(70cqh,84cqw);}
.stage > .mk-l-fb{width:min(60cqh,80cqw)!important;}
.aud-card-media .stage > .mk-banner{width:94cqw;}
.aud-card-media .stage > .mk-story{width:94cqw;}
.aud-card-media .stage > .mk-doc{width:94cqw;}

/* caption */
.mk-cap{display:flex; flex-direction:column; align-items:flex-start;}
.mk-cap-flag{display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#8A5A00; background:#FFF4DB; border:1px solid #F5DFA8; border-radius:20px; padding:3px 10px; margin-bottom:12px;}
html[dir="rtl"] .mk-cap-flag{letter-spacing:0; text-transform:none; font-size:12px;}
.mk-cap-cat{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--blue); margin-bottom:6px;}
html[dir="rtl"] .mk-cap-cat{letter-spacing:0; text-transform:none; font-size:13px;}
.mk-cap-title{font-size:clamp(20px,2vw,26px); margin-bottom:8px;}
.mk-cap p{color:var(--ink-soft); font-size:15px; margin:0;}
.section-navy .mk-cap p{color:#B7C6DC;}
.section-navy .mk-cap-cat{color:var(--cyan);}

/* card carousel item */
.aud-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:100%; display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease;}
.aud-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.aud-card-media{padding:12px 12px 0;}
.aud-card .mk-cap{padding:16px 18px 20px;}
.aud-card .mk-cap-flag{margin-bottom:9px;}
.aud-card .mk-cap-title{font-size:17px; margin-bottom:5px;}
.aud-card .mk-cap p{font-size:13.8px;}

/* showcase section head with tabs-like category chips */
.show-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; margin-bottom:clamp(26px,3.4vw,40px);}
.show-head .sect-head{margin-bottom:0;}
.chip-row{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none;}
.chip-row li{font-size:12.5px; font-weight:600; color:var(--ink-soft); background:#fff; border:1px solid var(--line); border-radius:30px; padding:6px 12px;}
.section-alt .chip-row li{background:#fff;}
.section-navy .chip-row li{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.16); color:#C3D2E7;}

/* digital solutions list next to slider */
.sol-split{display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(28px,4vw,56px); align-items:center;}
@media(max-width:980px){.sol-split{grid-template-columns:1fr;}}
.sol-list{display:grid; gap:10px; margin:22px 0 28px; padding:0; list-style:none;}
.sol-list li{display:flex; gap:12px; align-items:flex-start; font-size:15px; color:#C3D2E7;}
.sol-list li svg{width:20px; height:20px; flex:none; color:var(--cyan); margin-top:3px;}
.sol-list li b{color:#fff; display:block; font-size:15px;}
.sol-list li span{font-size:13.8px; color:#9FB3CF;}

/* sample gallery (portfolio) */
.gal-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media(max-width:1000px){.gal-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:620px){.gal-grid{grid-template-columns:1fr;}}
.gal-grid .aud-card[hidden]{display:none;}
.gal-note{display:flex; gap:10px; align-items:flex-start; font-size:13.8px; color:var(--ink-soft); background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:var(--radius-sm); padding:12px 14px; margin-bottom:24px;}
.gal-note svg{width:18px; height:18px; flex:none; color:var(--blue); margin-top:2px;}

/* contact placeholder state */
.contact-soon{background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:var(--radius); padding:22px; margin-top:20px;}
.contact-soon b{display:block; font-size:15px; margin-bottom:6px; color:var(--ink);}
.contact-soon p{font-size:14.3px; color:var(--ink-soft); margin:0;}
.admin-note{display:block; margin-top:6px; font-size:12px; font-weight:600; color:var(--amber);}

/* pricing v2 */
.price-grid.five{grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px;}
.price-grid.five .price-card{padding:26px 18px;}
.price-grid.five .price-card .btn{padding-inline:12px; white-space:normal;}
.price-grid.five .for{min-height:2.9em;}
@media(max-width:1200px){.price-grid.five{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:820px){.price-grid.five{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.price-grid.five{grid-template-columns:1fr;}}
.price-card .amount{font-size:26px; font-weight:800; color:var(--ink); line-height:1.2;}
.price-card .amount small{display:block; font-size:12.5px; font-weight:600; color:var(--ink-mute); margin-top:4px;}
.price-card .soon{display:inline-flex; font-size:12.5px; font-weight:700; color:var(--blue); background:var(--blue-tint); border-radius:20px; padding:4px 11px;}

/* =========================================================
   MOCKUPS — all sizes in em, scaled to the mockup's width.
   ========================================================= */
.mk{container-type:inline-size; position:relative; --c1:#1B5FD9; --c2:#0B1E3B; --bg:#F4F7FC; color:#1A2333; text-align:start; line-height:1.35; user-select:none;}
.mk *{box-sizing:border-box;}
.mk-in{position:relative; width:100%; height:100%;}
.mk b,.mk strong{font-weight:700;}
.mk p{margin:0;}
.mk ul{list-style:none; margin:0; padding:0;}
.mk svg{display:block; width:100%; height:auto;}
.mk-btn{display:inline-flex; align-items:center; justify-content:center; background:var(--c1); color:#fff; border:.1em solid var(--c1); padding:.62em 1.2em; border-radius:.5em; font-size:.78em; font-weight:700; white-space:nowrap; line-height:1.2;}
.mk-btn.ghost{background:transparent; color:var(--c2); border-color:color-mix(in srgb, var(--c2) 30%, transparent);}
.mk-btn.sm{font-size:.68em; padding:.5em 1em;}
.mk-btn.block{display:flex; width:100%;}
.mk-logo{display:inline-flex; align-items:center; gap:.45em; font-weight:800; color:var(--c2); white-space:nowrap;}
.mk-logo b{width:1.35em; height:1.35em; border-radius:.35em; background:linear-gradient(135deg,var(--c1),var(--c2)); flex:none;}
.mk-line{display:block; height:.42em; border-radius:.3em; background:color-mix(in srgb, var(--c2) 12%, transparent); margin-top:.45em; width:90%;}
.mk-line.s{width:60%;}
.mk-h{display:block; color:var(--c2); font-weight:800; letter-spacing:-.02em; line-height:1.12;}
html[dir="rtl"] .mk-h{letter-spacing:0; line-height:1.3;}
.mk-eyebrow{display:block; font-size:.7em; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--c1); margin-bottom:.5em;}
html[dir="rtl"] .mk-eyebrow{letter-spacing:0; text-transform:none; font-size:.8em;}

/* ---- browser ---- */
.mk-browser{aspect-ratio:16/10.4; background:#fff; border-radius:1.1cqw; overflow:hidden; border:1px solid rgba(11,30,59,.10);}
.mk-browser .mk-in{font-size:1.6cqw; display:flex; flex-direction:column;}
.mk-bar{flex:none; height:2.5em; display:flex; align-items:center; gap:.45em; padding:0 1em; background:#EDF1F6; border-bottom:1px solid #E1E7EF;}
.mk-bar i{width:.68em; height:.68em; border-radius:50%; background:#F26B5B; display:block;}
.mk-bar i:nth-child(2){background:#F5BE4F;} .mk-bar i:nth-child(3){background:#5BC46B;}
.mk-url{margin-inline-start:1.2em; flex:0 1 46%; height:1.5em; border-radius:.75em; background:#fff; font-size:.72em; color:#7A8597; display:flex; align-items:center; padding:0 1em; direction:ltr; justify-content:flex-start; overflow:hidden; white-space:nowrap;}
.mk-site{flex:1; position:relative; background:var(--bg); overflow:hidden; display:flex; flex-direction:column;}
.mk-nav{display:flex; align-items:center; gap:1.6em; padding:1.15em 2.2em;}
.mk-nav .mk-logo{font-size:1.02em;}
.mk-nav ul{display:flex; gap:1.5em; margin-inline-start:auto; font-size:.76em; font-weight:600; color:color-mix(in srgb, var(--c2) 70%, #fff);}
.mk-nav ul li.on{color:var(--c1);}
.mk-icons{display:flex; gap:.6em; margin-inline-start:.4em;}
.mk-icons i{width:1.5em; height:1.5em; border-radius:50%; background:color-mix(in srgb, var(--c2) 10%, transparent); display:block;}
.mk-icons i.cart{background:var(--c1);}
.mk-hero{display:grid; grid-template-columns:1.12fr .88fr; gap:1.6em; align-items:center; padding:1.2em 2.2em 1.4em;}
.mk-hero .mk-h{font-size:2.2em; margin-bottom:.35em;}
.mk-hero p{font-size:.88em; color:#5B6678; margin-bottom:1.1em; max-width:30em;}
.mk-btns{display:flex; gap:.6em; flex-wrap:wrap;}
.mk-art{align-self:end;}
.mk-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1em; padding:0 2.2em 1.4em; margin-top:auto;}
.mk-cards > div{background:#fff; border-radius:.75em; padding:.95em 1em; box-shadow:0 .2em .8em rgba(11,30,59,.07);}
.mk-cards b{display:block; font-size:.82em; color:var(--c2); margin-top:.55em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mk-ic{display:block; width:1.9em; height:1.9em; border-radius:.5em; background:color-mix(in srgb, var(--c1) 16%, transparent); position:relative;}
.mk-ic::after{content:""; position:absolute; inset:.55em; border-radius:.2em; background:var(--c1);}

/* photo layout (dark full-bleed hero) */
.mk-photo{position:relative; flex:1; display:flex; flex-direction:column; background:linear-gradient(120deg, var(--c2) 0%, color-mix(in srgb, var(--c2) 80%, var(--c1)) 100%); overflow:hidden;}
.mk-photo .mk-logo{color:#fff;}
.mk-photo .mk-nav ul{color:rgba(255,255,255,.75);}
.mk-photo .mk-btn.ghost,.mk-l-photo .mk-btn.ghost{color:#fff; border-color:rgba(255,255,255,.45);}
.mk-photo .mk-btn.sm{background:var(--c1);}
.mk-photo-art{position:absolute; inset-block:2.5em 0; inset-inline-end:-2%; width:52%; display:flex; align-items:flex-end; opacity:.95;}
.mk-photo .mk-copy{position:relative; z-index:1; padding:1.6em 2.2em 1.8em; max-width:58%;}
.mk-photo .mk-h{color:#fff; font-size:2.35em; margin-bottom:.35em;}
.mk-photo p{color:rgba(255,255,255,.75); font-size:.88em; margin-bottom:1.1em;}
.mk-l-photo .mk-site{background:var(--c2);}
.mk-l-photo .mk-cards{padding-top:1.2em; background:var(--c2);}
.mk-l-photo .mk-cards > div{background:rgba(255,255,255,.07); box-shadow:none;}
.mk-l-photo .mk-cards b{color:#fff;}
.mk-l-photo .mk-line{background:rgba(255,255,255,.14);}

/* real estate */
.mk-estate{position:relative; margin:0 2.2em; border-radius:1em; overflow:hidden; background:linear-gradient(120deg, var(--c2), color-mix(in srgb, var(--c2) 60%, var(--c1))); padding:1.8em 2em 2em; min-height:15em;}
.mk-estate .mk-photo-art{inset-block:1em -1em; width:44%; opacity:.9;}
.mk-estate .mk-copy{position:relative; max-width:62%;}
.mk-estate .mk-eyebrow{color:color-mix(in srgb, var(--c1) 50%, #fff);}
.mk-estate .mk-h{color:#fff; font-size:2.1em; margin-bottom:.3em;}
.mk-estate p{color:rgba(255,255,255,.78); font-size:.86em; margin-bottom:1em;}
.mk-search{display:flex; gap:.4em; background:#fff; border-radius:.7em; padding:.45em; width:max-content; max-width:100%;}
.mk-search span:not(.mk-btn){font-size:.7em; color:#6B7686; padding:.55em .9em; border-inline-end:1px solid #E5EAF0; white-space:nowrap;}
.mk-listings{display:grid; grid-template-columns:repeat(3,1fr); gap:1em; padding:1.2em 2.2em 1.4em;}
.mk-listings > div{background:#fff; border-radius:.75em; padding:.6em; box-shadow:0 .2em .8em rgba(11,30,59,.07);}
.mk-listings b{display:block; font-size:.78em; color:var(--c2); margin-top:.5em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mk-thumb{display:block; aspect-ratio:16/8; border-radius:.5em; background:color-mix(in srgb, var(--c1) 18%, #fff); overflow:hidden; padding:.3em 1em 0;}
.mk-thumb.t1{background:color-mix(in srgb, var(--c2) 14%, #fff);}
.mk-thumb.t2{background:#EFE7DA;}

/* store */
.mk-promo{display:grid; grid-template-columns:1fr auto; align-items:center; gap:1em; margin:0 2.2em; padding:1.6em 2em; border-radius:1em; background:linear-gradient(120deg, var(--c2), color-mix(in srgb, var(--c2) 55%, var(--c1)));}
.mk-promo .mk-h{color:#fff; font-size:2em; margin-bottom:.25em;}
.mk-promo p{color:rgba(255,255,255,.8); font-size:.84em; margin-bottom:.9em;}
.mk-promo .mk-btn{background:#fff; color:var(--c2); border-color:#fff;}
.mk-promo-art{width:9em;}
.mk-products{display:grid; grid-template-columns:repeat(4,1fr); gap:1em; padding:1.2em 2.2em 1.4em;}
.mk-prod{background:#fff; border-radius:.75em; padding:.55em; box-shadow:0 .2em .8em rgba(11,30,59,.07); min-width:0;}
.mk-prod-ph{display:flex; align-items:center; justify-content:center; aspect-ratio:1/.82; border-radius:.55em; background:#EEF1F6; padding:12%;}
.mk-prod-ph svg{max-height:100%; width:auto; max-width:100%;}
.mk-prod b{display:block; font-size:.74em; color:var(--c2); margin-top:.55em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mk-prod em{display:block; font-style:normal; font-size:.72em; font-weight:800; color:var(--c1); margin-top:.15em;}

/* chatbot widget */
.mk-hero.dim{opacity:.5;}
.mk-widget{position:absolute; bottom:4.6em; inset-inline-end:2em; width:22em; background:#fff; border-radius:1em; box-shadow:0 1em 3em rgba(11,30,59,.25); overflow:hidden; z-index:2;}
.mk-w-head{display:flex; align-items:center; gap:.6em; padding:.8em 1em; background:linear-gradient(120deg, var(--c2), color-mix(in srgb, var(--c2) 50%, var(--c1))); color:#fff;}
.mk-w-head i{width:2em; height:2em; border-radius:50%; background:var(--c1); box-shadow:0 0 0 .2em rgba(255,255,255,.25); flex:none;}
.mk-w-head b{display:block; font-size:.8em;}
.mk-w-head span{display:block; font-size:.62em; opacity:.8;}
.mk-w-body{padding:.9em; display:flex; flex-direction:column; gap:.5em; background:#F7F8FC;}
.mk-msg{max-width:84%; font-size:.68em; line-height:1.45; padding:.6em .8em; border-radius:.8em;}
.mk-msg.bot{background:#fff; align-self:flex-start; border-start-start-radius:.2em; box-shadow:0 .1em .3em rgba(0,0,0,.06);}
.mk-msg.user{background:var(--c1); color:#fff; align-self:flex-end; border-start-end-radius:.2em;}
.mk-chips{display:flex; gap:.35em; flex-wrap:wrap;}
.mk-chips span{font-size:.62em; font-weight:700; color:var(--c1); border:1px solid color-mix(in srgb, var(--c1) 40%, transparent); background:#fff; border-radius:1em; padding:.35em .8em;}
.mk-w-input{display:flex; align-items:center; justify-content:space-between; padding:.7em 1em; border-top:1px solid #EEF1F6; font-size:.68em; color:#9AA3B2;}
.mk-w-input i{width:1.8em; height:1.8em; border-radius:50%; background:var(--c1);}
.mk-launcher{position:absolute; bottom:1.2em; inset-inline-end:2em; width:2.8em; height:2.8em; border-radius:50%; background:var(--c1); box-shadow:0 .5em 1.2em rgba(0,0,0,.25);}

/* booking */
.mk-book{display:grid; grid-template-columns:1.35fr 1fr; gap:1.2em; padding:.6em 2.2em 1.6em; flex:1;}
.mk-cal,.mk-slots{background:#fff; border-radius:1em; padding:1.2em 1.3em; box-shadow:0 .2em .8em rgba(11,30,59,.07);}
.mk-h.sm{font-size:1.45em; margin-bottom:.2em;}
.mk-svc{display:inline-block; font-size:.68em; font-weight:700; color:var(--c1); background:color-mix(in srgb, var(--c1) 12%, transparent); padding:.3em .8em; border-radius:1em; margin-bottom:.9em;}
.mk-cal-head{display:flex; justify-content:space-between; font-size:.78em; margin-bottom:.6em; color:var(--c2);}
.mk-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.3em; text-align:center;}
.mk-cal-grid em{font-style:normal; font-size:.6em; font-weight:700; color:#9AA3B2;}
.mk-cal-grid span{font-size:.66em; padding:.42em 0; border-radius:.45em; color:#3B4558;}
.mk-cal-grid span.on{background:var(--c1); color:#fff; font-weight:800;}
.mk-cal-grid span.off{color:#C6CDD8; text-decoration:line-through;}
.mk-slots{display:flex; flex-direction:column; gap:.5em;}
.mk-slots b{font-size:.8em; color:var(--c2); margin-bottom:.2em;}
.mk-slots span:not(.mk-btn){font-size:.74em; font-weight:600; text-align:center; padding:.65em; border:1px solid #E3E8EF; border-radius:.55em; color:#3B4558;}
.mk-slots span.on{border-color:var(--c1); background:color-mix(in srgb, var(--c1) 10%, #fff); color:var(--c1);}
.mk-slots .mk-btn{margin-top:auto;}

/* inquiry form */
.mk-formwrap{display:grid; grid-template-columns:.85fr 1.15fr; gap:1.6em; padding:.8em 2.2em 1.6em; flex:1; align-items:start;}
.mk-form-intro .mk-h{font-size:2em; margin-bottom:.35em;}
.mk-form-intro p{font-size:.84em; color:#5B6678; margin-bottom:1em;}
.mk-check{display:block; height:.5em; width:70%; border-radius:.3em; background:color-mix(in srgb, var(--c1) 22%, transparent); margin-bottom:.6em;}
.mk-form{display:grid; grid-template-columns:1fr 1fr; gap:.8em; background:#fff; border-radius:1em; padding:1.3em; box-shadow:0 .3em 1.2em rgba(11,30,59,.08);}
.mk-form label{display:flex; flex-direction:column; gap:.35em;}
.mk-form label.full{grid-column:1/-1;}
.mk-form label b{font-size:.66em; color:#3B4558;}
.mk-form label span{height:2.1em; border:1px solid #DFE5EE; border-radius:.45em; background:#FAFBFD;}
.mk-form label span.ta{height:4.4em;}
.mk-form .mk-btn{grid-column:1/-1; justify-self:start;}

/* dashboard */
.mk-dash{display:grid; grid-template-columns:12.5em 1fr; flex:1; min-height:0;}
.mk-dash aside{background:var(--c2); padding:1.2em 1em; display:flex; flex-direction:column; gap:.35em;}
.mk-dash aside .mk-logo{color:#fff; font-size:.9em; margin-bottom:1em;}
.mk-dash aside > span:not(.mk-logo){display:flex; align-items:center; gap:.6em; font-size:.72em; color:rgba(255,255,255,.65); padding:.6em .7em; border-radius:.5em;}
.mk-dash aside > span i{width:1em; height:1em; border-radius:.25em; background:rgba(255,255,255,.25);}
.mk-dash aside > span.on{background:rgba(255,255,255,.1); color:#fff;}
.mk-dash aside > span.on i{background:var(--c1);}
.mk-dash-main{padding:1.3em 1.6em; display:flex; flex-direction:column; gap:1em; min-width:0;}
.mk-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.9em;}
.mk-kpis div{background:#fff; border-radius:.8em; padding:.9em 1em; box-shadow:0 .2em .8em rgba(11,30,59,.06); position:relative; overflow:hidden;}
.mk-kpis span{display:block; font-size:.66em; color:#7A8597;}
.mk-kpis b{display:block; font-size:1.2em; color:var(--c2); margin-top:.15em; white-space:nowrap;}
.mk-kpis i{position:absolute; inset-inline-end:.8em; top:.9em; width:2.2em; height:1em; border-radius:.3em; background:color-mix(in srgb, #12A87C 18%, transparent);}
.mk-chart{background:#fff; border-radius:.8em; padding:.9em 1em; box-shadow:0 .2em .8em rgba(11,30,59,.06); flex:1; display:flex; flex-direction:column; min-height:9em;}
.mk-chart > span{font-size:.7em; font-weight:700; color:var(--c2); margin-bottom:.6em;}
.mk-chart .bars{flex:1; display:flex; align-items:flex-end; gap:.7em; border-bottom:1px solid #EEF1F6;}
.mk-chart .bars i{flex:1; border-radius:.3em .3em 0 0; background:linear-gradient(180deg, var(--c1), color-mix(in srgb, var(--c1) 35%, #fff));}
.mk-rows{display:grid; gap:.4em;}
.mk-rows span{display:flex; align-items:center; gap:.6em; font-size:.68em; color:#3B4558; background:#fff; border-radius:.5em; padding:.55em .8em;}
.mk-rows i{width:.7em; height:.7em; border-radius:50%; background:#12A87C;}
.mk-rows i.d1{background:#F5A524;} .mk-rows i.d2{background:var(--c1);}

/* ordering */
.mk-nav ul li{position:relative;}
.mk-l-order .mk-nav ul li.on::after{content:""; position:absolute; inset-inline:0; bottom:-.5em; height:.18em; border-radius:.2em; background:var(--c1);}
.mk-order{display:grid; grid-template-columns:1.5fr 1fr; gap:1.2em; padding:.6em 2.2em 1.6em; flex:1;}
.mk-menu{display:grid; grid-template-columns:1fr 1fr; gap:.9em;}
.mk-menu > div{background:#fff; border-radius:.8em; padding:.6em; box-shadow:0 .2em .8em rgba(11,30,59,.07); position:relative;}
.mk-menu .mk-prod-ph{aspect-ratio:16/9; background:color-mix(in srgb, var(--c1) 10%, #fff);}
.mk-menu b{display:block; font-size:.74em; color:var(--c2); margin-top:.45em;}
.mk-menu em{display:block; font-style:normal; font-size:.7em; font-weight:800; color:var(--c1);}
.mk-add{position:absolute; inset-inline-end:.7em; bottom:.7em; font-size:.6em; font-weight:800; color:#fff; background:var(--c1); border-radius:1em; padding:.3em .8em;}
.mk-cart{background:#fff; border-radius:1em; padding:1.1em 1.2em; box-shadow:0 .3em 1.2em rgba(11,30,59,.08); display:flex; flex-direction:column; gap:.55em;}
.mk-cart > b{font-size:.95em; color:var(--c2); margin-bottom:.3em;}
.mk-cart > span{font-size:.72em; color:#3B4558; display:flex; gap:.5em; padding-bottom:.5em; border-bottom:1px dashed #E3E8EF;}
.mk-cart > span em{font-style:normal; font-weight:800; color:var(--c1);}
.mk-total{display:flex; justify-content:space-between; font-size:.8em; margin-top:auto; padding-top:.4em;}
.mk-total b{color:var(--c2);}

/* ---- phone ---- */
.mk-phone{aspect-ratio:9/18.6;}
.mk-phone .mk-in{font-size:4.6cqw;}
.mk-phone-frame{position:absolute; inset:0; background:#0E1116; border-radius:3.2em; padding:.7em; box-shadow:inset 0 0 0 .15em #2A2F38;}
.mk-notch{position:absolute; top:1.1em; left:50%; transform:translateX(-50%); width:5.5em; height:1.5em; border-radius:1em; background:#0E1116; z-index:3;}
.mk-screen{position:relative; height:100%; border-radius:2.6em; overflow:hidden; background:var(--bg); display:flex; flex-direction:column;}
.mk-app-head{display:flex; justify-content:space-between; align-items:center; padding:3.3em 1.3em .8em;}
.mk-app-head .mk-logo{font-size:1.05em;}
.mk-app-search{margin:0 1.3em; padding:.7em 1em; border-radius:2em; background:#fff; font-size:.72em; color:#9AA3B2; box-shadow:0 .2em .6em rgba(0,0,0,.05);}
.mk-app-banner{margin:1em 1.3em .4em; border-radius:1.2em; padding:1.1em 1.1em; background:linear-gradient(120deg, var(--c2), color-mix(in srgb, var(--c2) 45%, var(--c1))); display:grid; grid-template-columns:1fr 5em; align-items:center; gap:.4em;}
.mk-app-banner strong{display:block; color:#fff; font-size:1.05em; line-height:1.25; margin-bottom:.7em;}
.mk-app-banner .mk-btn{background:#fff; color:var(--c2); border-color:#fff;}
.mk-phone .mk-products{grid-template-columns:1fr 1fr; padding:.8em 1.3em; gap:.75em;}
.mk-phone .mk-prod b{font-size:.68em;}
.mk-phone .mk-prod em{font-size:.66em;}
.mk-tabbar{margin-top:auto; display:flex; justify-content:space-around; padding:1em 1em 1.6em; background:#fff; border-top:1px solid #EEF1F6;}
.mk-tabbar i{width:1.3em; height:1.3em; border-radius:.4em; background:#D7DCE4;}
.mk-tabbar i.on{background:var(--c1);}
/* whatsapp */
.mk-wa-head{display:flex; align-items:center; gap:.7em; padding:3em 1.2em .9em; background:var(--c2); color:#fff;}
.mk-wa-head i{width:2.3em; height:2.3em; border-radius:50%; background:linear-gradient(135deg,#7C5CFF,#12C2D6); flex:none;}
.mk-wa-head b{display:block; font-size:.86em;}
.mk-wa-head span{display:block; font-size:.62em; opacity:.8;}
.mk-wa-body{flex:1; background:var(--bg); padding:1em .9em; display:flex; flex-direction:column; gap:.55em; background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px); background-size:1.2em 1.2em;}
.mk-bub{max-width:84%; font-size:.7em; line-height:1.45; padding:.6em .75em .45em; border-radius:.8em; box-shadow:0 .1em .15em rgba(0,0,0,.08);}
.mk-bub em{display:block; font-style:normal; font-size:.78em; color:#7A8A99; text-align:end; margin-top:.15em;}
.mk-bub.in{background:#fff; align-self:flex-start; border-start-start-radius:.15em;}
.mk-bub.out{background:#DCF8C6; align-self:flex-end; border-start-end-radius:.15em;}
.mk-wa-opts{display:flex; flex-direction:column; gap:.35em; align-self:flex-end; width:84%;}
.mk-wa-opts span{font-size:.68em; font-weight:700; text-align:center; color:#0B7A5A; background:#fff; border-radius:.7em; padding:.6em;}
.mk-wa-input{display:flex; align-items:center; gap:.6em; padding:.8em 1em 1.6em; background:#F0F0F0;}
.mk-wa-input span{flex:1; background:#fff; border-radius:2em; padding:.6em 1em; font-size:.7em; color:#9AA3B2;}
.mk-wa-input i{width:2.2em; height:2.2em; border-radius:50%; background:var(--c1); flex:none;}

/* ---- social post ---- */
.mk-post{background:#fff; border-radius:3cqw; overflow:hidden; border:1px solid rgba(11,30,59,.08);}
.mk-post .mk-in{font-size:3.3cqw;}
.mk-post-head{display:flex; align-items:center; gap:.6em; padding:.8em 1em;}
.mk-post-head i{width:2.2em; height:2.2em; border-radius:50%; background:linear-gradient(135deg, var(--c1), var(--bg)); box-shadow:0 0 0 .15em #fff, 0 0 0 .28em color-mix(in srgb, var(--c1) 60%, #F5BE4F);}
.mk-post-head b{display:block; font-size:.82em; color:#141A26;}
.mk-post-head span{display:block; font-size:.66em; color:#8A94A6;}
.mk-post-head em{margin-inline-start:auto; font-style:normal; color:#8A94A6; letter-spacing:.1em;}
.mk-creative{position:relative; aspect-ratio:1/1; overflow:hidden; padding:2em 1.8em; display:flex; flex-direction:column; align-items:flex-start; background:radial-gradient(90% 80% at 85% 90%, color-mix(in srgb, var(--c1) 55%, var(--bg)), var(--bg) 70%);}
.mk-creative .mk-tag{position:relative; z-index:1; font-size:.72em; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--c1); color:#fff; padding:.4em .9em; border-radius:2em; margin-bottom:1em;}
html[dir="rtl"] .mk-creative .mk-tag{letter-spacing:0; text-transform:none; font-size:.8em;}
.mk-creative strong{position:relative; z-index:1; font-size:2.5em; line-height:1.08; color:#fff; font-weight:800; max-width:62%; letter-spacing:-.02em;}
html[dir="rtl"] .mk-creative strong{letter-spacing:0; line-height:1.3;}
.mk-creative p{position:relative; z-index:1; color:var(--c2); font-size:.9em; margin:.7em 0 1.1em; max-width:58%;}
.mk-creative .mk-btn{position:relative; z-index:1; background:#fff; color:var(--bg); border-color:#fff; margin-top:auto;}
.mk-creative-art{position:absolute; inset-inline-end:-4%; bottom:-4%; width:58%;}
.mk-creative.wide{aspect-ratio:1.4/1;}
.mk-creative.wide strong{font-size:2.2em;}
.mk-creative.announce{align-items:center; text-align:center; justify-content:center; background:linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--bg) 70%, var(--c1)));}
.mk-creative.announce strong{max-width:90%; font-size:2.3em;}
.mk-creative.announce p{max-width:80%; color:color-mix(in srgb, var(--c2) 85%, transparent);}
.mk-creative.announce .mk-btn{margin-top:.4em;}
.mk-creative.announce .mk-creative-art{inset-inline:0; margin:auto; width:46%; bottom:-6%; opacity:.12;}
.mk-creative.announce::before{content:""; position:absolute; inset:1.2em; border:1px solid rgba(255,255,255,.2); border-radius:.8em;}
.mk-caption{font-size:.78em; color:#141A26; padding:0 1em .8em; line-height:1.5;}
.mk-post-actions{display:flex; gap:.9em; padding:.8em 1em;}
.mk-post-actions svg{width:1.45em; height:1.45em; fill:none; stroke:#141A26; stroke-width:1.8; stroke-linejoin:round;}
.mk-post-actions svg.end{margin-inline-start:auto;}
.mk-fb-actions{display:flex; justify-content:space-around; padding:.75em 1em; border-top:1px solid #EEF1F6; font-size:.74em; font-weight:700; color:#65676B;}

/* ---- banner ---- */
.mk-banner{border-radius:1.6cqw; overflow:hidden;}
.mk-banner .mk-in{font-size:1.9cqw;}
.mk-creative.banner{aspect-ratio:16/7; padding:2.6em 3em; justify-content:center; background:linear-gradient(110deg, var(--bg) 38%, color-mix(in srgb, var(--bg) 55%, var(--c1)) 100%);}
.mk-creative.banner strong{max-width:56%; font-size:2.8em;}
.mk-creative.banner p{max-width:50%;}
.mk-creative.banner .mk-btn{margin-top:.2em;}
.mk-creative.banner .mk-creative-art{width:44%; bottom:-6%; inset-inline-end:2%;}

/* ---- stories ---- */
.mk-story .mk-in{font-size:1.5cqw;}
.mk-stories{display:grid; grid-template-columns:repeat(3,1fr); gap:1.6em;}
.mk-sframe{position:relative; aspect-ratio:9/16; border-radius:1.4em; overflow:hidden; padding:2.4em 1.4em 2em; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(170deg, color-mix(in srgb, var(--bg) 80%, var(--c1)), var(--bg) 70%); box-shadow:0 1em 2em -1em rgba(0,0,0,.4);}
.mk-sframe.s1{background:linear-gradient(170deg, #5A3A1E, #2A1A10 70%);}
.mk-sframe.s2{background:linear-gradient(170deg, #1F5130, #10291A 70%);}
.mk-story-bar{position:absolute; top:.9em; inset-inline:1em; display:flex; gap:.3em;}
.mk-story-bar i{flex:1; height:.22em; border-radius:.2em; background:rgba(255,255,255,.35);}
.mk-sframe.s0 .mk-story-bar i:first-child,.mk-sframe.s1 .mk-story-bar i:nth-child(-n+2),.mk-sframe.s2 .mk-story-bar i{background:#fff;}
.mk-story-brand{position:absolute; top:1.9em; inset-inline-start:1.1em; display:flex; align-items:center; gap:.5em; font-size:.82em; font-weight:700; color:#fff;}
.mk-story-brand i{width:1.8em; height:1.8em; border-radius:50%; background:var(--c1);}
.mk-story-art{position:absolute; top:22%; inset-inline:18%;}
.mk-sframe .mk-tag{align-self:flex-start; position:relative; font-size:.8em; font-weight:800; color:var(--bg); background:var(--c1); padding:.35em .9em; border-radius:2em; margin-bottom:.7em;}
.mk-sframe strong{position:relative; color:#fff; font-size:1.7em; line-height:1.15; font-weight:800;}
html[dir="rtl"] .mk-sframe strong{line-height:1.35;}

/* ---- company profile document ---- */
.mk-doc .mk-in{font-size:1.5cqw;}
.mk-doc-spread{display:grid; grid-template-columns:1fr 1fr; gap:1.6em;}
.mk-page{aspect-ratio:210/297; border-radius:.6em; overflow:hidden; position:relative; box-shadow:0 1.2em 2.4em -1em rgba(11,30,59,.45);}
.mk-page.cover{background:linear-gradient(165deg, var(--c2) 55%, color-mix(in srgb, var(--c2) 55%, var(--c1))); padding:2.4em 2.2em; display:flex; flex-direction:column; color:#fff;}
.mk-page.cover .mk-logo{color:#fff; font-size:1em;}
.mk-cover-art{margin-top:auto; width:80%; opacity:.9; --c2:#fff;}
.mk-page.cover strong{font-size:2.6em; line-height:1.1; margin-top:.6em;}
.mk-page.cover em{font-style:normal; font-size:.9em; opacity:.8; margin-top:.4em;}
.mk-year{position:absolute; top:2.2em; inset-inline-end:2.2em; font-size:.9em; font-weight:800; color:var(--c1); background:#fff; border-radius:2em; padding:.2em .8em;}
.mk-page.inner{background:#fff; padding:2.4em 2.2em; display:flex; flex-direction:column; gap:1.3em;}
.mk-sec b{display:flex; align-items:center; gap:.5em; font-size:1.05em; color:var(--c2);}
.mk-sec b i{font-style:normal; font-size:.75em; color:#fff; background:var(--c1); border-radius:.3em; padding:.15em .4em;}
.mk-doc-img{margin-top:auto; height:7em; border-radius:.6em; background:linear-gradient(120deg, color-mix(in srgb, var(--c1) 30%, #fff), color-mix(in srgb, var(--c2) 20%, #fff));}

/* RTL: mirror illustrations that imply direction is not needed; keep art as-is. */

/* =========================================================
   Responsive tuning for mockups inside small cards
   ========================================================= */
@media(max-width:560px){
  .aud-show{padding:12px;}
  .scene-label{font-size:11.5px; padding:6px 11px;}
}
.mk-art{position:relative;}
.mk-art::before{content:""; position:absolute; inset:8% 4% 0; border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--c1) 22%, transparent), transparent); z-index:0;}
.mk-art svg{position:relative; z-index:1;}
.site-footer .brand-mark{box-shadow:0 0 0 1px rgba(255,255,255,.2);}
@media(max-width:620px){.gal-grid.teaser .aud-card:nth-child(n+4){display:none;}}