/* Landing page visuals: real screenshots (assets/img/samples) inside device frames. */
.mk-bar { display: flex; align-items: center; gap: 6px; padding: .5rem .7rem; background: #F1F4F8; border-bottom: 1px solid #E3E8EF; }
.mk-bar > span { width: 9px; height: 9px; border-radius: 50%; background: #D3D9E2; flex: none; }
.mk-bar > span:nth-child(1) { background: #F87171; }
.mk-bar > span:nth-child(2) { background: #FBBF24; }
.mk-bar > span:nth-child(3) { background: #34D399; }
.mk-url { margin-left: .5rem; flex: 1; min-width: 0; background: #fff; border: 1px solid #E3E8EF; border-radius: 6px; font-size: .72rem; color: var(--muted); padding: .15rem .6rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage img, .sample img, .browser img { display: block; width: 100%; height: auto; }

/* ---- Devices ---- */
.browser { background: #fff; border: 1px solid #D7DEE8; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -32px rgba(15, 23, 42, .45); }
.phone { background: #0F172A; border-radius: 30px; padding: 7px; box-shadow: 0 30px 50px -22px rgba(15, 23, 42, .6); }
.phone img { border-radius: 23px; }
.phone-sm { border-radius: 20px; padding: 5px; }
.phone-sm img { border-radius: 15px; }

/* ---- Hero: laptop + phone ---- */
.stage { position: relative; width: 100%; max-width: 600px; justify-self: center; padding: 0 2.5rem 2.75rem 0; }
.laptop-screen { background: #0F172A; padding: 9px 9px 0; border-radius: 16px 16px 0 0; box-shadow: 0 40px 70px -40px rgba(30, 111, 208, .55); }
.laptop-screen .mk-bar { border-radius: 7px 7px 0 0; }
.laptop-screen img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.laptop-base { height: 16px; margin: 0 -8%; background: linear-gradient(#E5E7EB, #9CA3AF); border-radius: 0 0 16px 16px; position: relative; }
.laptop-base::after { content: ""; position: absolute; left: 42%; right: 42%; top: 0; height: 6px; background: #6B7280; border-radius: 0 0 8px 8px; }
.stage .phone { position: absolute; right: 0; bottom: 0; width: 30%; }
.stage .price-tag { right: auto; left: -26px; top: 58%; }
@media (max-width: 560px) {
  .stage { padding-right: 1.25rem; padding-bottom: 2rem; }
  .stage .phone { width: 33%; border-radius: 20px; padding: 5px; }
  .stage .phone img { border-radius: 15px; }
  .stage .price-tag { left: -6px; top: auto; bottom: .5rem; }
  .stage .price-tag strong { font-size: 1.2rem; }
}

/* ---- Before / after on Google ---- */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem; }
@media (max-width: 800px) { .ba { grid-template-columns: 1fr; } }
.ba-col { margin: 0; }
.ba-col figcaption { margin-bottom: .75rem; }
.ba-col p { color: #374151; margin: 1rem 0 0; }
.gm { background: #fff; border: 1px solid #DCE3EC; border-radius: 16px; padding: 1rem; box-shadow: 0 12px 30px -20px rgba(17, 24, 39, .35); }
.gm-search { border: 1px solid #DCE3EC; border-radius: 999px; padding: .5rem .9rem; color: #374151; font-size: .9rem; margin-bottom: .2rem; }
.gm-card { border: 1px solid #EEF0F3; border-radius: 12px; padding: .8rem .9rem; margin-top: .6rem; }
.gm-name { font-weight: 700; color: #1A0DAB; }
.gm-meta { color: var(--muted); font-size: .82rem; margin: .1rem 0 .55rem; }
.gm-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.gm-actions span { border: 1px solid #DCE3EC; border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; color: #1E40AF; font-weight: 600; }
.gm-actions .gm-missing { color: #B91C1C; border-style: dashed; border-color: #FCA5A5; font-weight: 500; }
.gm-actions .gm-web { background: var(--blue); border-color: var(--blue); color: #fff; }
.gm-dim { opacity: .7; }
.gm-win { border: 2px solid var(--blue); }
.gm-thumb { display: block; width: 100%; height: 150px; object-fit: cover; object-position: top; border-radius: 9px; margin-top: .75rem; border: 1px solid #E3E8EF; }

/* ---- Sample designs ---- */
.samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin-top: 2.25rem; }
@media (max-width: 900px) { .samples { grid-template-columns: 1fr; max-width: 520px; } }
.sample { margin: 0; }
.sample-shot { position: relative; padding: 0 1.25rem 1.75rem 0; }
.sample .browser img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.sample .phone-sm { position: absolute; right: 0; bottom: 0; width: 27%; }
.sample figcaption { margin-top: .9rem; }
.sample figcaption strong { display: block; font-size: 1.1rem; }
.sample figcaption span { color: var(--muted); font-size: .95rem; }

/* ---- Project page screenshot ---- */
.split { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 1.5rem; } }