/* ALTERRA VR — CLEAN RESPONSIVE BLOCK 01 V1
   Desktop baseline remains untouched.
   This file only affects <=1100px and only the clean mobile/tablet shell + hiding old desktop hero/header. */

.m1-header,.m1-hero,.m1-menu-backdrop,.m1-menu-panel{display:none}

@media (max-width:1100px){
  /* Hide only the old desktop header/hero on mobile/tablet. Other approved blocks stay exactly as they were for now. */
  .site-header,.hero,.mobile-dock{display:none !important}

  body{overflow-x:hidden}

  .m1-header{
    display:flex;
    position:fixed;
    z-index:9000;
    top:0;
    left:0;
    right:0;
    height:68px;
    padding:0 clamp(18px,4vw,34px);
    align-items:center;
    justify-content:space-between;
    box-sizing:border-box;
    background:linear-gradient(180deg,rgba(2,13,23,.94),rgba(2,13,23,.62) 72%,transparent);
    backdrop-filter:blur(4px);
  }

  .m1-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    color:#f5f9ff;
    text-decoration:none;
    font-weight:900;
    letter-spacing:.12em;
    font-size:15px;
    white-space:nowrap;
  }
  .m1-brand-mark{
    color:#37e8ff;
    font-size:26px;
    line-height:1;
    font-weight:1000;
    text-shadow:0 0 18px rgba(55,232,255,.32);
  }
  .m1-brand b{color:#38e7ff}

  .m1-burger{
    display:grid;
    place-items:center;
    width:42px;
    height:42px;
    flex:0 0 42px;
    padding:0;
    border:1px solid rgba(61,230,255,.62);
    border-radius:11px;
    background:rgba(3,18,30,.82);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 10px 30px rgba(0,0,0,.20);
    cursor:pointer;
  }
  .m1-burger-lines{position:relative;width:22px;height:16px}
  .m1-burger-lines i{
    position:absolute;
    left:0;
    width:22px;
    height:2px;
    border-radius:999px;
    background:#70efff;
    transition:transform .22s ease,opacity .18s ease,top .22s ease;
  }
  .m1-burger-lines i:nth-child(1){top:0}
  .m1-burger-lines i:nth-child(2){top:7px}
  .m1-burger-lines i:nth-child(3){top:14px}
  .m1-burger[aria-expanded="true"] .m1-burger-lines i:nth-child(1){top:7px;transform:rotate(45deg)}
  .m1-burger[aria-expanded="true"] .m1-burger-lines i:nth-child(2){opacity:0}
  .m1-burger[aria-expanded="true"] .m1-burger-lines i:nth-child(3){top:7px;transform:rotate(-45deg)}

  .m1-menu-backdrop{
    display:block;
    position:fixed;
    z-index:8998;
    inset:0;
    background:rgba(0,6,12,.66);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  .m1-menu-backdrop.is-open{opacity:1;pointer-events:auto}

  .m1-menu-panel{
    display:flex;
    position:fixed;
    z-index:8999;
    top:0;
    right:0;
    bottom:0;
    width:min(82vw,360px);
    padding:92px 24px 28px;
    box-sizing:border-box;
    flex-direction:column;
    gap:5px;
    background:linear-gradient(180deg,#071827,#03111d 75%);
    border-left:1px solid rgba(48,220,247,.34);
    box-shadow:-24px 0 70px rgba(0,0,0,.42);
    transform:translateX(105%);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .m1-menu-panel.is-open{transform:translateX(0)}
  .m1-menu-panel a{
    display:flex;
    min-height:50px;
    align-items:center;
    color:#f3f8fc;
    text-decoration:none;
    font-weight:800;
    font-size:16px;
    border-bottom:1px solid rgba(109,238,255,.12);
  }
  .m1-menu-panel .m1-menu-primary{
    justify-content:center;
    margin-top:18px;
    min-height:54px;
    color:#00101a;
    border:0;
    border-radius:7px;
    background:linear-gradient(180deg,#63efff,#32cee6);
    box-shadow:0 0 30px rgba(53,224,248,.16);
  }
  body.m1-menu-open{overflow:hidden}

  .m1-hero{
    display:block;
    position:relative;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
    background:#03111d;
    color:#f5f8fb;
  }
  .m1-hero-art{
    position:absolute;
    z-index:-3;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:54% 42%;
    filter:saturate(.98) contrast(1.03) brightness(.86);
  }
  .m1-hero::before{
    content:"";
    position:absolute;
    z-index:-2;
    inset:0;
    background:
      linear-gradient(180deg,rgba(1,9,16,.12) 0%,rgba(1,9,16,.08) 24%,rgba(1,9,16,.18) 42%,rgba(1,9,16,.88) 66%,#02101b 94%),
      linear-gradient(90deg,rgba(0,8,15,.12),transparent 58%,rgba(0,8,15,.14));
  }
  .m1-hero::after{
    content:"";
    position:absolute;
    z-index:-1;
    left:0;
    right:0;
    bottom:0;
    height:32%;
    background:linear-gradient(180deg,transparent,#02101b 86%);
  }

  .m1-inner{
    width:min(100% - 38px,920px);
    min-height:100svh;
    margin:0 auto;
    padding:clamp(290px,49svh,520px) 0 34px;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
  }
  .m1-kicker{
    margin:0 0 12px;
    color:#69efff;
    font-size:clamp(10px,2.7vw,13px);
    font-weight:950;
    line-height:1.2;
    letter-spacing:.17em;
  }
  .m1-title{
    margin:0;
    color:#f7f9fc;
    font-size:clamp(46px,13.2vw,76px);
    line-height:.88;
    letter-spacing:-.055em;
    font-weight:1000;
    text-transform:uppercase;
  }
  .m1-title span{display:block;color:#28dff3}
  .m1-lead{
    max-width:610px;
    margin:22px 0 0;
    color:#eef5fa;
    font-size:clamp(15px,3.8vw,20px);
    line-height:1.48;
  }
  .m1-note{
    margin:11px 0 0;
    color:#a9f6ff;
    font-size:clamp(12px,3.15vw,15px);
    line-height:1.42;
    font-weight:750;
  }

  .m1-features{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:22px;
  }
  .m1-feature{
    min-width:0;
    text-align:center;
    color:#f5f9fc;
    font-size:clamp(9px,2.25vw,12px);
    line-height:1.12;
    font-weight:900;
    text-transform:uppercase;
  }
  .m1-feature-icon{
    display:grid;
    place-items:center;
    width:39px;
    height:39px;
    margin:0 auto 8px;
    border:1px solid rgba(166,245,255,.92);
    border-radius:50%;
    color:#d9fbff;
    background:rgba(3,18,30,.46);
    box-shadow:0 0 0 8px rgba(25,198,229,.025),0 0 24px rgba(28,215,241,.08);
    font-size:15px;
  }

  .m1-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    margin-top:22px;
  }
  .m1-btn{
    display:flex;
    width:100%;
    min-height:56px;
    padding:0 18px;
    box-sizing:border-box;
    align-items:center;
    justify-content:center;
    gap:18px;
    text-decoration:none;
    text-align:center;
    font-size:14px;
    font-weight:950;
    letter-spacing:.01em;
  }
  .m1-btn-primary{
    color:#00111b;
    border:1px solid #67efff;
    background:linear-gradient(180deg,#66f0ff,#31cee5);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 0 28px rgba(44,220,242,.13);
  }
  .m1-btn-secondary{
    color:#f6f9fb;
    border:1px solid rgba(42,215,239,.72);
    background:rgba(2,15,25,.78);
  }
  .m1-bottom{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:28px;
    color:#93b7c6;
    font-size:9px;
    letter-spacing:.13em;
    text-transform:uppercase;
  }
  .m1-bottom-line{height:1px;flex:1;background:linear-gradient(90deg,#31d9ef,transparent)}
}

@media (max-width:767px){
  .m1-inner{width:calc(100% - 36px)}
}

@media (max-width:430px){
  .m1-header{height:64px;padding:0 18px}
  .m1-burger{width:40px;height:40px;flex-basis:40px}
  .m1-inner{
    width:calc(100% - 36px);
    padding-top:clamp(300px,48svh,410px);
    padding-bottom:24px;
  }
  .m1-title{font-size:clamp(45px,13vw,56px)}
  .m1-lead{margin-top:18px;font-size:15.5px}
  .m1-note{font-size:12px}
  .m1-features{gap:6px;margin-top:20px}
  .m1-feature{font-size:9px}
  .m1-feature-icon{width:38px;height:38px}
  .m1-actions{margin-top:20px}
  .m1-btn{min-height:54px}
  .m1-bottom{margin-top:25px}
}

@media (min-width:768px) and (max-width:1100px){
  .m1-header{height:76px}
  .m1-inner{
    width:min(100% - 70px,900px);
    padding-top:clamp(360px,48svh,570px);
    padding-bottom:42px;
  }
  .m1-title{font-size:clamp(64px,9vw,82px);max-width:780px}
  .m1-lead{font-size:19px;max-width:690px}
  .m1-note{font-size:14px}
  .m1-features{max-width:610px;gap:24px;margin-top:28px}
  .m1-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr);max-width:650px;gap:14px;margin-top:28px}
  .m1-btn{min-height:58px}
  .m1-bottom{max-width:650px}
}

@media (max-height:760px) and (max-width:767px){
  .m1-inner{padding-top:255px}
  .m1-title{font-size:44px}
  .m1-lead{font-size:14px;line-height:1.42;margin-top:14px}
  .m1-note{margin-top:8px}
  .m1-features{margin-top:14px}
  .m1-actions{margin-top:15px}
  .m1-btn{min-height:49px}
  .m1-bottom{margin-top:18px}
}