/* ==========================================================================
   Mahjooz — Atelier Dark
   Hand-written. No build step. Logical properties throughout so the same
   stylesheet serves RTL (ar) and LTR (en).
   ========================================================================== */

/* ---------- self-hosted fonts (no external requests) ---------- */
@font-face {
    font-family: 'El Messiri';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/el-messiri-arabic-600-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+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'El Messiri';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/el-messiri-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+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'El Messiri';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/el-messiri-arabic-700-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+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'El Messiri';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/el-messiri-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/tajawal-arabic-400-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+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/tajawal-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/tajawal-arabic-500-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+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/tajawal-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/tajawal-arabic-700-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+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
    font-family: 'Tajawal';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/tajawal-latin-700-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-tight-latin-400-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-tight-latin-500-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-tight-latin-600-normal.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter Tight';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/inter-tight-latin-700-normal.woff2') format('woff2');
}

:root {
  --ink:        #0B0B0F;
  --ink-2:      #121218;
  --ink-3:      #191921;
  --ink-4:      #22222C;
  --gold:       #C8A96A;
  --gold-soft:  #DCC391;
  --gold-dim:   rgba(200, 169, 106, .16);
  --cream:      #F5F2EC;
  --muted:      #9C978D;
  --muted-2:    #6E6A63;
  --rose:       #8E2C4B;
  --green:      #3F7A5E;
  --line:       rgba(245, 242, 236, .09);
  --line-2:     rgba(245, 242, 236, .16);

  --display: "El Messiri", "Inter Tight", ui-serif, Georgia, serif;
  --body:    "Tajawal", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1180px;
  --r:    16px;
  --r-sm: 10px;
}

html[lang="en"] {
  --display: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --body:    "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-block-start: 88px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.18; margin: 0; letter-spacing: -.01em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.section { padding-block: clamp(64px, 9vw, 118px); position: relative; }
.section + .section { border-block-start: 1px solid var(--line); }

/* ---------- shared type ---------- */
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-block-end: 18px; display: inline-flex; align-items: center; gap: 10px;
}
html[lang="ar"] .eyebrow { letter-spacing: .06em; text-transform: none; font-size: 14px; }
.eyebrow::before { content: ""; inline-size: 26px; block-size: 1px; background: var(--gold); opacity: .6; }

.h2 { font-size: clamp(30px, 4.2vw, 47px); margin-block-end: 18px; }
.h3 { font-size: clamp(20px, 2.4vw, 25px); margin-block-end: 10px; }
.lede { color: var(--muted); font-size: clamp(16px, 1.5vw, 18.5px); max-width: 62ch; }
.section-head { max-width: 720px; margin-block-end: 52px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 28px; border-radius: 999px; font-weight: 700; font-size: 16.5px;
  font-family: var(--body); border: 1px solid transparent; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold); color: #16130C; }
.btn-primary:hover { background: var(--gold-soft); }
.btn-ghost { border-color: var(--line-2); color: var(--cream); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn svg { inline-size: 19px; block-size: 19px; flex: none; }

/* ---------- header ---------- */
.site-header {
  position: sticky; inset-block-start: 0; z-index: 60;
  background: rgba(11, 11, 15, .82);
  backdrop-filter: saturate(150%) blur(14px);
  border-block-end: 1px solid var(--line);
}
.site-header .wrap {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 28px; block-size: 72px;
}
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.logo .mark { inline-size: 34px; block-size: 34px; flex: none; }
.logo .word { font-family: var(--display); font-weight: 700; font-size: 25px; color: var(--cream); line-height: 1; }
html[lang="en"] .logo .word { font-size: 21px; letter-spacing: .04em; }

.site-nav { display: flex; gap: 22px; justify-self: center; font-size: 15.5px; color: var(--muted); }
.site-nav a { transition: color .16s ease; white-space: nowrap; }
.site-nav a:hover { color: var(--cream); }
.header-cta { display: flex; align-items: center; gap: 10px; justify-self: end; }
.header-cta .btn { padding: 8px 18px; font-size: 14.5px; }
.lang-toggle {
  font-size: 14px; color: var(--muted); border: 1px solid var(--line-2);
  padding: 7px 14px; border-radius: 999px; transition: color .16s, border-color .16s;
  white-space: nowrap;
}
.lang-toggle:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 1180px) {
  .site-header .wrap { grid-template-columns: auto 1fr; gap: 16px; }
  .site-nav { display: none; }
}
@media (max-width: 560px) {
  .site-header .wrap { block-size: 60px; }
  .logo .word { font-size: 21px; }
  html[lang="en"] .logo .word { font-size: 18px; }
  .header-cta { gap: 8px; }
  .header-cta .btn { padding: 7px 14px; font-size: 13.5px; }
  .lang-toggle { padding: 6px 12px; font-size: 13px; }
}

/* ---------- hero ---------- */
.hero { padding-block: clamp(56px, 8vw, 104px) clamp(48px, 6vw, 84px); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset-block-start: -30%; inset-inline-start: 50%;
  translate: -50% 0; inline-size: min(1100px, 130%); block-size: 720px;
  background: radial-gradient(ellipse at center, rgba(200,169,106,.13), transparent 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; }
.hero-title { font-size: clamp(36px, 6.2vw, 74px); line-height: 1.1; max-width: 17ch; margin-block-end: 24px; }
.hero-title em { font-style: normal; color: var(--gold); position: relative; white-space: nowrap; }
.hero-title em::after {
  content: ""; position: absolute; inset-block-end: .08em; inset-inline: -.04em;
  block-size: .10em; background: var(--gold); opacity: .32; border-radius: 2px;
}
.hero-sub { color: var(--muted); font-size: clamp(16.5px, 1.8vw, 20px); max-width: 60ch; margin-block-end: 34px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero-shot { margin-block-start: clamp(44px, 6vw, 76px); position: relative; }
.hero-shot img { border-radius: var(--r); }

/* ---------- proof bar ---------- */
.proof { border-block: 1px solid var(--line); background: var(--ink-2); padding-block: 44px; }
.proof-label { font-size: 14px; color: var(--muted-2); margin-block-end: 26px; letter-spacing: .02em; }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.proof-item .v { font-family: var(--display); font-size: clamp(30px, 3.6vw, 42px); color: var(--gold); line-height: 1; margin-block-end: 8px; font-weight: 700; }
.proof-item .l { font-size: 14.5px; color: var(--muted); line-height: 1.5; }
@media (max-width: 860px) { .proof-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }

/* ---------- problem cards ---------- */
.cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .cards-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .cards-4 { grid-template-columns: 1fr; } }
.card {
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; transition: border-color .2s ease, transform .2s ease, background-color .2s ease;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.card .n { font-family: var(--display); font-size: 15px; color: var(--gold); opacity: .55; margin-block-end: 14px; }
.card h3 { font-size: 19.5px; margin-block-end: 10px; }
.card p { color: var(--muted); font-size: 15.5px; line-height: 1.68; }

/* ---------- lifecycle ---------- */
.flow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; position: relative; }
.flow::before {
  content: ""; position: absolute; inset-block-start: 26px; inset-inline: 8%;
  block-size: 1px; background: linear-gradient(to right, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}
.step { padding-inline: 14px; position: relative; }
.step .dot {
  inline-size: 52px; block-size: 52px; border-radius: 50%; background: var(--ink-2);
  border: 1px solid var(--line-2); display: grid; place-items: center;
  font-family: var(--display); font-size: 19px; color: var(--gold); margin-block-end: 18px; position: relative; z-index: 1;
}
.step h3 { font-size: 18px; margin-block-end: 8px; }
.step p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
@media (max-width: 1000px) {
  .flow { grid-template-columns: repeat(3, 1fr); gap: 34px 10px; }
  .flow::before { display: none; }
}
@media (max-width: 620px) { .flow { grid-template-columns: repeat(2, 1fr); } }

/* ---------- feature rows ---------- */
.feature { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(36px, 5vw, 70px); align-items: center; }
.feature > .feature-body  { grid-column: 1; grid-row: 1; }
.feature > .feature-media { grid-column: 2; grid-row: 1; }
.feature.reverse { grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr); }
.feature.reverse > .feature-body  { grid-column: 2; }
.feature.reverse > .feature-media { grid-column: 1; }
@media (max-width: 940px) {
  .feature, .feature.reverse { grid-template-columns: 1fr; gap: 34px; }
  .feature > .feature-body,  .feature.reverse > .feature-body  { grid-column: 1; grid-row: 1; }
  .feature > .feature-media, .feature.reverse > .feature-media { grid-column: 1; grid-row: 2; }
}
.feature-body .h2 { margin-block-end: 16px; }
.feature-body .lede { margin-block-end: 26px; }

.ticks { display: grid; gap: 13px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; color: var(--cream); }
.ticks li::before {
  content: ""; flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 4px; border-radius: 50%;
  background: var(--gold-dim);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.5' fill='none' stroke='%23C8A96A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
}

.shot { position: relative; }
.shot img { border-radius: var(--r); }
.shot figcaption { margin-block-start: 14px; font-size: 13.5px; color: var(--muted-2); line-height: 1.5; }

/* ---------- modules grid ---------- */
.mods { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mod { background: var(--ink); padding: 26px 24px; transition: background-color .2s ease; }
.mod:hover { background: var(--ink-2); }
.mod h3 { font-size: 17px; margin-block-end: 7px; color: var(--gold-soft); }
.mod p { font-size: 14.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 1000px) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .mods { grid-template-columns: 1fr; } }

/* ---------- store (no screenshots) ---------- */
.store-panel {
  border: 1px solid var(--line); border-radius: var(--r);
  background:
    radial-gradient(900px 380px at var(--glow-x, 88%) -10%, rgba(200,169,106,.10), transparent 62%),
    var(--ink-2);
  padding: clamp(34px, 5vw, 58px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: clamp(28px, 4vw, 56px); align-items: center;
}
@media (max-width: 900px) { .store-panel { grid-template-columns: 1fr; } }

/* ---------- mobile app: copy beside a phone-framed shot ---------- */
.mobile-panel {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(36px, 5vw, 80px); align-items: center;
}
.mobile-copy .h2 { margin-block-end: 16px; }
.mobile-copy .lede { margin-block-end: 26px; }
.phone { display: grid; justify-items: center; }
.phone-frame {
  inline-size: min(100%, 320px); padding: 12px; border-radius: 44px;
  background: #15151b; border: 1px solid var(--line-2);
  box-shadow: 0 30px 80px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  position: relative;
}
.phone-frame img { border-radius: 34px; inline-size: 100%; }
.phone figcaption { text-align: center; }
@media (max-width: 940px) {
  .mobile-panel { grid-template-columns: 1fr; gap: 40px; }
  .phone-frame { inline-size: min(100%, 280px); }
}
@media (max-width: 560px) {
  .phone-frame { padding: 9px; border-radius: 36px; }
  .phone-frame img { border-radius: 28px; }
}

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta .h2 { max-width: 18ch; margin-inline: auto; }
.cta .lede { margin-inline: auto; margin-block: 18px 34px; }
.cta-note { margin-block-start: 18px; font-size: 14.5px; color: var(--muted-2); }
.btn-wa { background: #25D366; color: #06280F; font-size: 17.5px; padding: 17px 34px; }
.btn-wa:hover { background: #38e378; }

/* ---------- footer ---------- */
.site-footer { border-block-start: 1px solid var(--line); padding-block: 40px; background: var(--ink-2); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: center; justify-content: space-between; }
.site-footer p { font-size: 14.5px; color: var(--muted-2); }

/* ---------- sticky mobile WhatsApp ---------- */
.wa-float {
  position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: 70;
  inline-size: 58px; block-size: 58px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: transform .2s ease;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { inline-size: 30px; block-size: 30px; }
@media (min-width: 861px) { .wa-float { display: none; } }

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- print ---------- */
@media print {
  .site-header, .wa-float { display: none; }
  body { background: #fff; color: #000; }
}

/* ---------- wide feature: copy, bullet row, full-width shot ---------- */
.feature-head { max-width: 760px; margin-block-end: 30px; }
.feature-head .lede { margin-block-start: 14px; }
.ticks-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px 34px; margin-block-end: 44px; max-width: 1040px;
}
.shot-wide img { inline-size: 100%; aspect-ratio: var(--ratio); border-radius: var(--r); }
.feature-media img { aspect-ratio: var(--ratio); }
/* phones: wide screens become a portrait window around the focal point, ~2.8x closer */
@media (max-width: 560px) {
  .zoom-mobile .shot-wide img { aspect-ratio: 4 / 5; object-fit: cover; object-position: var(--focus, 50% 50%); }
}
.shot-wide figcaption { text-align: center; }

/* panel-shaped shots sit centred in their column */
.is-side .feature-media img { margin-inline: auto; border-radius: var(--r); }
.is-side .feature-media { max-inline-size: 560px; }
.is-side .feature-media figcaption { text-align: center; }

/* ---------- mobile: shots bleed to the screen edge, hero buttons shrink ---------- */
@media (max-width: 560px) {
  .hero-actions { gap: 10px; }
  .hero-actions .btn { padding: 11px 20px; font-size: 15px; gap: 8px; }
  .hero-actions .btn svg { inline-size: 17px; block-size: 17px; }
  .hero-shot, .shot-wide { margin-inline: -24px; }
  .hero-shot img, .shot-wide img { border-radius: 0; inline-size: 100%; }
  .hero-shot figcaption, .shot-wide figcaption { padding-inline: 24px; text-align: center; }
  .is-side .feature-media { max-inline-size: none; }
  .is-side .feature-media img { inline-size: 100%; }
}

/* ---------- hero: laptop frame ------------------------------------------
   The dashboard sits inside a laptop drawn in CSS: an aluminium lid with a
   black glass bezel and camera, a glass reflection, and a deck with a lit
   top edge, a trackpad notch and rounded feet. Same shadow language as the
   phone frame in the mobile section. No 3D.
------------------------------------------------------------------------- */
.hero-shot { margin-block-start: clamp(44px, 6vw, 76px); }
.laptop { display: grid; justify-items: center; }
.laptop-frame {
  --alu:    #555562;                 /* aluminium rim */
  --alu-hi: #8b8b9c;                 /* lit edge */
  --alu-lo: #2d2d37;
  --glass:  #16161d;                 /* dark glass bezel, a step lighter than the page */
  --lid-r:  clamp(14px, 1.6vw, 24px);
  --bezel:  clamp(10px, 1.2vw, 18px);
  --top:    clamp(18px, 2.1vw, 30px);
  --chin:   clamp(14px, 1.6vw, 24px);
  --deck:   clamp(20px, 2.4vw, 36px);
  inline-size: 100%; position: relative;
}
.laptop-frame::before {                     /* champagne glow behind the lid */
  content: ""; position: absolute; inset-block: 4% -6%; inset-inline: 6%;
  background: radial-gradient(58% 58% at 50% 45%, rgba(200,169,106,.20), transparent 72%);
  filter: blur(46px); z-index: 0; pointer-events: none;
}

/* lid */
.laptop-screen {
  position: relative; z-index: 1;
  margin-inline: 7%;
  padding: var(--top) var(--bezel) var(--chin);
  border-radius: var(--lid-r) var(--lid-r) 0 0;
  background: var(--glass);
  border: 3px solid var(--alu); border-block-end: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),                 /* glass edge */
    inset 0 -10px 12px -10px rgba(0,0,0,.8),               /* hinge shadow at the foot of the lid */
    0 -1px 0 1px var(--alu-hi),                            /* lit top rim */
    0 30px 80px rgba(0,0,0,.6);
}
.laptop-screen::before {                    /* camera */
  content: ""; position: absolute; inset-block-start: calc(var(--top) / 2 - 3px); inset-inline-start: 50%;
  translate: -50% 0; inline-size: 7px; block-size: 7px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a4a5a, #14161c 60%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.07);
}
.laptop-screen::after {                     /* glass reflection over the screen */
  content: ""; position: absolute; inset: var(--top) var(--bezel) var(--chin);
  border-radius: clamp(3px, .4vw, 6px);
  background: linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 28%, rgba(255,255,255,0) 46%);
  pointer-events: none;
}
.laptop-screen img { inline-size: 100%; border-radius: clamp(3px, .4vw, 6px); display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06); }

/* deck: keyboard body seen from the front */
.laptop-base {
  position: relative; z-index: 2;
  block-size: var(--deck);
  border-radius: 3px 3px var(--deck) var(--deck) / 3px 3px 92% 92%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,0) 12% 88%, rgba(255,255,255,.06)),
    linear-gradient(180deg, #a3a3b4 0, var(--alu-hi) 6%, var(--alu) 30%, #3d3d49 60%, var(--alu-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.35),                   /* top edge highlight */
    inset 0 -1px 0 rgba(0,0,0,.6),
    0 24px 60px rgba(0,0,0,.55);
}
.laptop-base::before {                      /* trackpad notch */
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 50%; translate: -50% 0;
  inline-size: 15%; block-size: 36%; border-radius: 0 0 10px 10px;
  background: linear-gradient(#1a1a21, #2a2a34);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.10), 0 1px 0 rgba(255,255,255,.05);
}
.laptop-base::after {                       /* soft floor reflection under the feet */
  content: ""; position: absolute; inset-block-start: 100%; inset-inline: 6%; block-size: 44px;
  background: radial-gradient(50% 100% at 50% 0, rgba(200,169,106,.12), rgba(255,255,255,.02) 45%, transparent 75%);
  pointer-events: none;
}

/* phones: laptop bleeds to the screen edge; the screen zooms in on the dashboard
   (taller box + object-fit) so the title, sidebar and revenue cards stay readable */
@media (max-width: 700px) {
  .hero-shot { margin-inline: -24px; }
  .hero-shot figcaption { padding-inline: 24px; text-align: center; }
  .laptop-frame { --lid-r: 12px; --bezel: 6px; --top: 14px; --chin: 9px; --deck: 15px; }
  .laptop-screen { border-width: 2px; }
  .laptop-screen { margin-inline: 14px; }
  .laptop-screen::before { inline-size: 4px; block-size: 4px; inset-block-start: 5px; }
  .laptop-screen img { aspect-ratio: 4 / 3; object-fit: cover; object-position: right top; }
  .laptop-base::before { inline-size: 18%; border-radius: 0 0 6px 6px; }
  .laptop-frame::before { filter: blur(30px); }
}