/* AppEvidex Canonical Mobile V23 — HEADER + HERO only
   Authority: approved mobile HOME mockup (04/09/2026).
   Purpose: isolated visual validation. Desktop V13/V14 remains untouched.
*/
.bg23-mobile{display:none!important}

@media (max-width:820px){
  *{box-sizing:border-box!important}
  html,body{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    min-width:0!important;
    overflow-x:hidden!important;
    background:#020914!important;
    -webkit-text-size-adjust:100%!important;
    text-size-adjust:100%!important;
  }
  body{
    min-height:100vh!important;
    color:#f7f9fb!important;
    font-family:Inter,Segoe UI,Arial,sans-serif!important;
    background:
      radial-gradient(circle at 86% 10%,rgba(239,179,66,.07),transparent 28rem),
      radial-gradient(circle at 0 45%,rgba(23,85,140,.08),transparent 24rem),
      linear-gradient(180deg,#020914,#04111e 58%,#020914)!important;
  }

  .v15-desktop{display:none!important}

  .bg23-mobile{
    display:block!important;
    min-height:100vh!important;
  }

  .bg23-head{
    padding:18px 18px 10px;
    border-bottom:1px solid rgba(238,180,65,.12);
    background:rgba(2,9,20,.98);
  }
  .bg23-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
  }
  .bg23-brand{
    font-size:30px;
    font-weight:900;
    letter-spacing:-1.4px;
    color:#fff;
    text-decoration:none;
    line-height:1;
  }
  .bg23-brand b{color:#f2b43d}
  .bg23-langs{
    display:flex;
    gap:8px;
  }
  .bg23-langs a{
    width:44px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:999px;
    border:1px solid #243346;
    background:#06121f;
    color:#d7dee5;
    text-decoration:none;
    font-size:12px;
  }
  .bg23-langs .on{
    color:#181006;
    font-weight:900;
    border-color:#ffd56e;
    background:linear-gradient(135deg,#ffe58b,#d99c2b);
    box-shadow:0 0 22px rgba(239,179,66,.28);
  }

  .bg23-nav{
    display:grid;
    grid-template-columns:.9fr 1.15fr .9fr 1.25fr 1.15fr;
    gap:6px;
    margin-top:15px;
  }
  .bg23-nav a{
    min-width:0;
    height:42px;
    padding:0 4px;
    display:grid;
    place-items:center;
    text-align:center;
    border-radius:999px;
    border:1px solid #24354a;
    background:#071522;
    color:#e1e6eb;
    text-decoration:none;
    font-size:10px;
    white-space:nowrap;
    line-height:1;
    letter-spacing:-.08px;
  }
  .bg23-nav a.active{
    color:#ffca52;
    border-color:#ca8728;
    background:linear-gradient(180deg,rgba(239,179,66,.09),#071522);
    box-shadow:inset 0 0 18px rgba(239,179,66,.035);
  }

  .bg23-wrap{
    padding:14px 14px 34px;
  }

  .bg23-hero{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid #a66e24;
    border-radius:20px;
    background:
      linear-gradient(180deg,rgba(4,16,28,.96),rgba(4,15,26,.82)),
      radial-gradient(circle at 80% 40%,rgba(238,180,65,.12),transparent 16rem);
    box-shadow:
      0 18px 50px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.025);
  }
  .bg23-hero:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      linear-gradient(180deg,#06121f 0%,rgba(5,17,29,.92) 45%,rgba(4,14,24,.18) 62%,rgba(4,14,24,.18) 100%);
  }

  .bg23-copy{
    position:relative;
    z-index:4;
    padding:18px 18px 0;
  }
  .bg23-kicker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid #a87325;
    border-radius:999px;
    background:rgba(4,16,28,.72);
    color:#f6bd4b;
    font-size:11.8px;
    font-weight:800;
    letter-spacing:.52px;
    text-transform:uppercase;
  }
  .bg23-kicker:before{
    content:"";
    width:7px;
    height:7px;
    border-radius:50%;
    background:#f0b13c;
    box-shadow:0 0 12px #e5a12c;
  }
  .bg23-copy h1{
    margin:16px 0 10px;
    font-size:clamp(31px,8.7vw,38px);
    line-height:1.02;
    letter-spacing:-1.55px;
    font-weight:900;
    max-width:345px;
  }
  .bg23-gold{
    color:#f2b43d;
    text-shadow:0 0 18px rgba(239,179,66,.12);
  }
  .bg23-lead{
    margin:0 0 9px;
    max-width:345px;
    font-size:18px;
    line-height:1.38;
    color:#f1f4f7;
    font-weight:500;
  }
  .bg23-body{
    margin:0;
    max-width:340px;
    font-size:14.7px;
    line-height:1.52;
    color:#b4bec8;
  }

  .bg23-art{
    position:relative;
    z-index:1;
    margin:8px 12px 0;
    height:252px;
    background-image:url('/assets/approved-home-hero-v23.png?v=23');
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    filter:saturate(1.05) contrast(1.03);
    border-radius:16px;
    opacity:.98;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 8%,#000 28%,#000 92%,transparent 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.22) 8%,#000 28%,#000 92%,transparent 100%);
  }
  .bg23-art:after{
    content:"";
    position:absolute;
    inset:0;
    background:
      linear-gradient(90deg,rgba(3,12,21,.12),transparent 34%),
      linear-gradient(180deg,rgba(3,12,21,.08),transparent 34%);
  }

  .bg23-actions{
    position:relative;
    z-index:5;
    margin:10px 12px 14px;
    display:grid;
    grid-template-columns:minmax(0,1.82fr) minmax(0,1fr);
    gap:8px;
  }
  .bg23-btn{
    height:56px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:0 8px;
    text-decoration:none;
    font-size:10.7px;
    font-weight:800;
    white-space:nowrap;
    min-width:0;
  }
  .bg23-btn.primary{
    color:#161006;
    border:1px solid #ffe080;
    background:linear-gradient(135deg,#ffe68b,#f1b542 55%,#d69324);
    box-shadow:0 8px 24px rgba(218,153,39,.18);
  }
  .bg23-btn.secondary{
    color:#f0f3f6;
    border:1px solid #b37728;
    background:linear-gradient(180deg,#0b1a29,#07131f);
  }
  .bg23-btn svg{
    width:17px;
    height:17px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    flex:none;
  }
  .bg23-btn .play{
    fill:#f4b842;
    stroke:none;
  }
  .bg23-btn span{min-width:0}
  .bg23-btn.secondary .bg23-arrow{display:none}
  .bg23-arrow{
    font-size:17px;
    line-height:1;
    color:inherit;
    margin-left:auto;
  }

  .bg23-validation-note{
    text-align:center;
    color:#6f7f8f;
    font-size:11px;
    padding:16px 12px 0;
  }

  @media(max-width:370px){
    .bg23-head{padding-left:12px;padding-right:12px}
    .bg23-brand{font-size:27px}
    .bg23-langs a{width:40px;height:37px}
    .bg23-nav{gap:4px}
    .bg23-nav a{font-size:9.2px;height:39px;padding:0 2px}
    .bg23-wrap{padding-left:10px;padding-right:10px}
    .bg23-copy{padding-left:15px;padding-right:15px}
    .bg23-copy h1{font-size:31px}
    .bg23-lead{font-size:16.5px}
    .bg23-body{font-size:13.8px}
    .bg23-actions{grid-template-columns:minmax(0,1.82fr) minmax(0,1fr)}
    .bg23-btn{height:52px;font-size:10.2px;padding:0 7px}
  }
}

@media(min-width:821px){
  .bg23-mobile{display:none!important}
}