/*
  Marina Nalyvaiko — Tilda mobile adaptation v2
  Target: <= 767px. Desktop is untouched.
  Visual language: black / warm white + electric blue + orange.
*/
.mn-mobile { display:none; }

@media (max-width: 767px) {
  :root { --mn-blue:#67c8ff; --mn-orange:#ff5a1f; --mn-ink:#070707; --mn-white:#f5f3ed; --mn-muted:#9aa4ae; }
  html, body { overflow-x:hidden !important; background:var(--mn-ink); }
  body.mn-mobile-ready > .mn-mobile { display:block; }
  body.mn-mobile-ready .t-rec { display:none !important; }

  .mn-mobile {
    --bg:var(--mn-ink);
    --fg:var(--mn-white);
    --muted:var(--mn-muted);
    --line:rgba(245,243,237,.15);
    background:var(--bg);
    color:var(--fg);
    font-family:Arial, Helvetica, sans-serif;
    min-height:100vh;
    line-height:1.25;
    -webkit-font-smoothing:antialiased;
    position:relative;
    overflow:hidden;
  }
  .mn-mobile:before,
  .mn-mobile:after { content:""; position:fixed; z-index:0; pointer-events:none; border-radius:50%; filter:blur(42px); opacity:.12; }
  .mn-mobile:before { width:180px; height:180px; background:var(--mn-blue); left:-110px; top:25vh; }
  .mn-mobile:after { width:210px; height:210px; background:var(--mn-orange); right:-140px; top:63vh; }
  .mn-mobile > * { position:relative; z-index:1; }
  .mn-mobile * { box-sizing:border-box; }
  .mn-wrap { width:100%; max-width:430px; margin:0 auto; padding:0 20px; }
  .mn-section { padding:64px 0; border-top:1px solid var(--line); position:relative; }
  .mn-section:after { content:""; position:absolute; width:90px; height:90px; border-radius:50%; filter:blur(30px); opacity:.08; pointer-events:none; }
  .mn-kicker { font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--mn-blue); margin-bottom:17px; font-weight:700; }
  .mn-h1 { font-size:45px; line-height:.93; letter-spacing:-.045em; margin:0 0 21px; font-weight:800; text-transform:uppercase; }
  .mn-h2 { font-size:31px; line-height:.98; letter-spacing:-.035em; margin:0 0 21px; font-weight:800; text-transform:uppercase; }
  .mn-h3 { font-size:19px; line-height:1.08; margin:0 0 8px; font-weight:700; }
  .mn-copy { font-size:15px; line-height:1.48; color:#d6dce0; margin:0; }
  .mn-small { font-size:12px; line-height:1.4; color:var(--muted); }
  .mn-rule { height:1px; background:var(--line); margin:28px 0; }

  /* Header */
  .mn-header { position:sticky; top:0; z-index:100; background:rgba(7,7,7,.86); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); }
  .mn-header-inner { height:64px; display:flex; align-items:center; justify-content:space-between; }
  .mn-logo { color:var(--mn-white); text-decoration:none; font-size:15px; line-height:1; font-weight:800; }
  .mn-logo span { display:inline; font-weight:800; color:var(--mn-orange); margin-left:5px; }
  .mn-menu-btn { width:42px; height:42px; border:1px solid rgba(103,200,255,.45); border-radius:50%; background:rgba(103,200,255,.07); color:var(--mn-white); font-size:20px; cursor:pointer; display:grid; place-items:center; }
  .mn-menu { display:none; position:fixed; inset:64px 0 0; z-index:99; background:rgba(7,7,7,.98); padding:22px 20px 30px; }
  .mn-menu.is-open { display:block; }
  .mn-menu a { display:block; color:var(--mn-white); text-decoration:none; font-size:28px; line-height:1.05; padding:16px 0; border-bottom:1px solid var(--line); }
  .mn-menu a::first-letter { color:var(--mn-orange); }
  .mn-menu .mn-menu-cta { margin-top:26px; border:0; text-align:center; padding:17px 20px; font-size:15px; background:var(--mn-orange); color:#070707; border-radius:999px; font-weight:800; }

  /* Hero */
  .mn-hero { padding:45px 0 62px; }
  .mn-availability { display:inline-flex; align-items:center; gap:7px; border:1px solid rgba(255,90,31,.65); border-radius:999px; padding:8px 12px; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--mn-orange); margin-bottom:22px; }
  .mn-availability:before { content:""; width:6px; height:6px; border-radius:50%; background:var(--mn-orange); box-shadow:0 0 0 4px rgba(255,90,31,.10); }
  .mn-hero-title { max-width:410px; }
  .mn-hero-title strong { display:block; }
  .mn-hero-title strong:first-child { color:var(--mn-white); }
  .mn-hero-title strong:last-child { color:var(--mn-orange); }
  .mn-hero-copy { max-width:390px; margin-bottom:27px; }
  .mn-hero-image-wrap { position:relative; width:min(100%,350px); margin:3px auto 27px; padding:9px; }
  .mn-hero-image-wrap:before { content:""; position:absolute; inset:-3px 10px 10px -4px; background:var(--mn-blue); opacity:.55; filter:blur(22px); border-radius:32px; z-index:-2; }
  .mn-hero-image-wrap:after { content:""; position:absolute; width:80px; height:80px; right:-4px; bottom:7px; background:var(--mn-orange); opacity:.75; filter:blur(20px); border-radius:50%; z-index:-1; }
  .mn-hero-image { width:100%; aspect-ratio:1 / 1; object-fit:cover; object-position:center 34%; display:block; border-radius:28px; border:1px solid rgba(245,243,237,.14); box-shadow:0 0 0 1px rgba(103,200,255,.12), 0 18px 55px rgba(0,0,0,.4); }
  .mn-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; margin:24px 0 29px; }
  .mn-stat { border-top:2px solid var(--mn-blue); padding-top:10px; min-width:0; }
  .mn-stat:nth-child(2) { border-top-color:var(--mn-orange); }
  .mn-stat:nth-child(3) { border-top-color:var(--mn-blue); }
  .mn-stat-value { display:block; font-size:22px; line-height:1; font-weight:800; letter-spacing:-.035em; margin-bottom:7px; color:var(--mn-orange); white-space:normal; }
  .mn-stat:nth-child(2) .mn-stat-value { color:var(--mn-orange); }
  .mn-stat:nth-child(3) .mn-stat-value { color:var(--mn-blue); }
  .mn-stat-label { display:block; font-size:9px; line-height:1.35; color:#d4d9dd; text-transform:uppercase; letter-spacing:.03em; }
  .mn-button { position:relative; display:inline-flex; align-items:center; justify-content:space-between; width:100%; min-height:54px; padding:8px 9px 8px 20px; border:0; color:#080808; background:var(--mn-orange); text-decoration:none; font-size:14px; font-weight:800; border-radius:999px; box-shadow:0 12px 28px rgba(255,90,31,.18); }
  .mn-button:after { content:''; display:block; width:22px; height:18px; flex:0 0 22px; margin-left:10px; background:linear-gradient(var(--mn-blue),var(--mn-blue)) left 10px / 14px 1.5px no-repeat; border-top:1.5px solid var(--mn-blue); border-right:1.5px solid var(--mn-blue); transform:translate(-2px,0) rotate(45deg); transform-origin:center; }

  /* Process */
  .mn-process-intro { max-width:400px; }
  .mn-process { display:grid; gap:0; margin-top:30px; }
  .mn-process-item { display:grid; grid-template-columns:40px minmax(0,1fr); gap:14px; padding:20px 0; border-top:1px solid var(--line); }
  .mn-process-num { width:32px; height:32px; border:1px solid var(--mn-blue); border-radius:50%; display:grid; place-items:center; font-size:10px; color:var(--mn-blue); }
  .mn-process-item:nth-child(odd) .mn-process-num { border-color:var(--mn-orange); color:var(--mn-orange); }
  .mn-process-title { font-size:15px; font-weight:800; text-transform:uppercase; margin-bottom:6px; }
  .mn-process-copy { font-size:12px; line-height:1.42; color:var(--muted); max-width:300px; }

  /* Cases */
  .mn-case { position:relative; overflow:visible; }
  .mn-case + .mn-case { margin-top:42px; }
  .mn-case-name { display:inline-block; font-size:12px; letter-spacing:.11em; font-weight:800; margin-bottom:10px; padding:6px 10px; border:1px solid rgba(103,200,255,.55); color:var(--mn-blue); border-radius:999px; }
  .mn-case:nth-of-type(2) .mn-case-name { border-color:rgba(255,90,31,.55); color:var(--mn-orange); }
  .mn-case-sub { font-size:21px; line-height:1.08; letter-spacing:-.02em; margin-bottom:17px; font-weight:700; }
  .mn-case-text { font-size:14px; line-height:1.52; color:#d6dce0; }
  .mn-case-stats { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:23px 0; }
  .mn-case-stat { padding:15px 12px 13px; border:1px solid rgba(103,200,255,.20); min-height:88px; border-radius:18px 8px 18px 8px; background:linear-gradient(145deg,rgba(103,200,255,.06),rgba(255,90,31,.03)); }
  .mn-case-stat:nth-child(2n) { border-color:rgba(255,90,31,.20); }
  .mn-case-stat b { display:block; font-size:23px; line-height:1.02; letter-spacing:-.04em; margin-bottom:7px; color:var(--mn-orange); }
  .mn-case-stat:nth-child(2n) b { color:var(--mn-blue); }
  .mn-case-stat span { display:block; color:var(--muted); font-size:9px; line-height:1.3; text-transform:uppercase; }
  .mn-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; }
  .mn-tag { border:1px solid rgba(245,243,237,.17); padding:7px 10px; color:#c8d0d6; font-size:10px; border-radius:999px; }

  /* Media */
  .mn-media { margin:27px -20px 25px; overflow:hidden; position:relative; }
  .mn-media:before { content:""; position:absolute; width:100px; height:100px; left:-45px; top:25%; background:var(--mn-blue); opacity:.18; filter:blur(30px); border-radius:50%; }
  .mn-media img { width:100%; height:auto; display:block; border-radius:28px 8px 28px 8px; position:relative; }
  .mn-media-scroll { display:flex; overflow-x:auto; gap:10px; margin:22px -20px 0; padding:0 20px 8px; scrollbar-width:none; }
  .mn-media-scroll::-webkit-scrollbar { display:none; }
  .mn-media-card { flex:0 0 78%; border:1px solid var(--line); border-radius:18px 8px 18px 8px; overflow:hidden; }
  .mn-media-card img { width:100%; aspect-ratio:1.25; object-fit:cover; display:block; }
  .mn-media-caption { padding:11px; font-size:11px; color:var(--muted); }

  /* Metrics */
  .mn-feature-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:25px; }
  .mn-feature { border-top:2px solid var(--mn-blue); padding:12px 3px 0; min-width:0; }
  .mn-feature:nth-child(2n) { border-top-color:var(--mn-orange); }
  .mn-feature-value { display:block; font-size:27px; line-height:1; font-weight:800; letter-spacing:-.04em; margin-bottom:7px; color:var(--mn-blue); }
  .mn-feature:nth-child(2n) .mn-feature-value { color:var(--mn-orange); }
  .mn-feature-label { display:block; font-size:9px; color:var(--muted); text-transform:uppercase; line-height:1.3; }

  /* Skills */
  .mn-skill { border-top:1px solid var(--line); padding:18px 0; }
  .mn-skill summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:17px; font-weight:800; }
  .mn-skill summary::-webkit-details-marker { display:none; }
  .mn-skill summary:after { content:'+'; color:var(--mn-blue); font-weight:400; font-size:22px; }
  .mn-skill[open] summary:after { content:'−'; color:var(--mn-orange); }
  .mn-skill ul { margin:15px 0 0; padding:0; list-style:none; color:var(--muted); font-size:13px; line-height:1.65; }
  .mn-skill li:before { content:'•'; color:var(--mn-orange); margin-right:8px; }
  .mn-ai { margin-top:18px; padding:19px; border:1px solid rgba(103,200,255,.35); border-radius:24px 8px 24px 8px; background:linear-gradient(135deg,rgba(103,200,255,.09),rgba(255,90,31,.06)); position:relative; overflow:hidden; }
  .mn-ai:after { content:"AI"; position:absolute; right:12px; bottom:-18px; font-size:82px; font-weight:900; color:rgba(103,200,255,.07); }
  .mn-ai-title { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--mn-blue); margin-bottom:10px; font-weight:800; }
  .mn-ai .mn-copy { position:relative; z-index:1; }

  /* Timeline */
  .mn-timeline { margin-top:25px; }
  .mn-timeline-item { border-left:1px solid rgba(103,200,255,.35); padding:0 0 27px 17px; position:relative; }
  .mn-timeline-item:nth-child(even) { border-left-color:rgba(255,90,31,.35); }
  .mn-timeline-item:before { content:''; position:absolute; left:-4px; top:4px; width:7px; height:7px; background:var(--mn-blue); border-radius:50%; }
  .mn-timeline-item:nth-child(even):before { background:var(--mn-orange); }
  .mn-year { font-size:11px; color:var(--mn-blue); margin-bottom:7px; font-weight:700; }
  .mn-timeline-item:nth-child(even) .mn-year { color:var(--mn-orange); }
  .mn-timeline-copy { font-size:14px; line-height:1.45; }

  /* Contact */
  .mn-contact { padding:78px 0 48px; position:relative; }
  .mn-contact:before { content:""; position:absolute; width:210px; height:210px; right:-130px; top:25px; background:var(--mn-orange); opacity:.16; filter:blur(35px); border-radius:50%; }
  .mn-contact-title { font-size:43px; line-height:.94; letter-spacing:-.05em; margin:0 0 27px; text-transform:uppercase; }
  .mn-contact-links { display:grid; gap:9px; margin-top:28px; }
  .mn-contact-links a { display:flex; align-items:center; justify-content:space-between; color:#080808; text-decoration:none; padding:14px 17px; background:var(--mn-white); border-radius:999px; font-size:14px; font-weight:800; }
  .mn-contact-links a:after { content:'↗'; color:#080808; }
  .mn-contact-links a:last-child { background:var(--mn-blue); }
  .mn-footer { padding:22px 0 32px; color:var(--muted); font-size:10px; border-top:1px solid var(--line); }

  @media (max-width:380px) {
    .mn-wrap { padding:0 17px; }
    .mn-h1 { font-size:40px; }
    .mn-contact-title { font-size:39px; }
    .mn-stats { gap:8px; }
    .mn-stat-value { font-size:19px; }
    .mn-stat-label { font-size:8px; }
    .mn-case-stat b { font-size:21px; }
  }
}


/* V4 — single rounded photo frame + centered CTA */
@media (max-width: 767px) {
  /* One frame only: remove the extra pseudo-frame, keep the blue/orange light. */
  .mn-hero-image-wrap {
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: visible !important;
  }
  .mn-hero-image-wrap:before {
    display: none !important;
  }
  .mn-hero-image {
    aspect-ratio: 1 / 1 !important;
    border-radius: 28px !important;
    clip-path: none !important;
    border: 1px solid rgba(103,200,255,.55) !important;
    box-shadow:
      0 0 0 1px rgba(103,200,255,.10),
      0 0 42px rgba(103,200,255,.30),
      0 18px 55px rgba(0,0,0,.40) !important;
  }

  /* CTA: centered text, no arrow/icon. */
  .mn-button {
    justify-content: center !important;
    padding: 8px 20px !important;
    text-align: center !important;
  }
  .mn-button:after {
    display: none !important;
    content: none !important;
  }
}

/* V5 — remove all visible photo frames; keep only rounded photo + ambient glow */
@media (max-width: 767px) {
  .mn-hero-image-wrap {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .mn-hero-image-wrap:before,
  .mn-hero-image-wrap:after {
    border: 0 !important;
    outline: 0 !important;
  }
  .mn-hero-image {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 28px !important;
  }
}