/* ALTERRA VR — CLEAN RESPONSIVE BLOCK 03 V1
   Desktop baseline untouched. This file affects <=1100px only.
   Static layout only. Motion will be added after responsive layout PASS. */

.m3-story{display:none}

@media (max-width:1100px){
  /* Hide only the approved desktop Block 03 on mobile/tablet. */
  .story-exact{display:none !important}

  .m3-story{
    display:block;
    position:relative;
    overflow:hidden;
    isolation:isolate;
    color:#f6fbff;
    background:
      radial-gradient(circle at 76% 18%,rgba(30,184,229,.13),transparent 32%),
      linear-gradient(180deg,#03111d 0%,#041522 52%,#020d17 100%);
    border-bottom:1px solid rgba(67,226,250,.14);
  }

  .m3-inner{
    width:min(calc(100% - 40px),920px);
    margin:0 auto;
    padding:48px 0 58px;
    box-sizing:border-box;
  }

  .m3-kicker{
    margin:0 0 14px;
    color:#65efff;
    font-size:clamp(10px,2vw,13px);
    line-height:1.2;
    letter-spacing:.17em;
    font-weight:950;
    text-transform:uppercase;
  }

  .m3-title{
    max-width:830px;
    margin:0;
    color:#f7f9fc;
    font-size:clamp(46px,7.7vw,76px);
    line-height:.94;
    letter-spacing:-.047em;
    font-weight:1000;
    text-transform:uppercase;
  }
  .m3-title span{color:#28dff1}

  .m3-copy{
    max-width:700px;
    margin:22px 0 0;
    color:#d5e4ee;
    font-size:clamp(15px,2.2vw,18px);
    line-height:1.55;
  }

  .m3-portal{
    position:relative;
    margin-top:30px;
    height:clamp(330px,54vw,510px);
    overflow:hidden;
    border:1px solid rgba(67,225,250,.42);
    border-radius:22px;
    background:#03111d;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.04),
      0 24px 64px rgba(0,0,0,.28),
      0 0 46px rgba(38,212,239,.06);
  }

  .m3-portal img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:saturate(1.12) contrast(1.07) brightness(.94);
    transform:scale(1.02);
  }

  .m3-portal::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:
      linear-gradient(180deg,rgba(2,12,20,.02) 0%,rgba(2,12,20,.03) 54%,rgba(2,12,20,.72) 100%),
      radial-gradient(circle at 64% 48%,rgba(33,221,246,.09),transparent 38%);
  }

  .m3-portal-badge{
    position:absolute;
    z-index:2;
    left:22px;
    bottom:20px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 13px;
    border:1px solid rgba(87,236,255,.44);
    border-radius:999px;
    background:rgba(2,16,28,.76);
    backdrop-filter:blur(10px);
    color:#f5fbff;
    font-size:12px;
    line-height:1;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  .m3-portal-badge::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#5cecff;
    box-shadow:0 0 14px rgba(92,236,255,.72);
  }

  .m3-steps{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
    margin-top:16px;
  }

  .m3-step{
    position:relative;
    min-height:178px;
    padding:20px 18px;
    overflow:hidden;
    border:1px solid rgba(67,224,248,.34);
    border-radius:17px;
    background:
      radial-gradient(circle at 88% 0%,rgba(32,201,235,.10),transparent 32%),
      rgba(4,24,38,.82);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
  }

  .m3-step-num{
    display:grid;
    place-items:center;
    width:38px;
    height:38px;
    margin-bottom:18px;
    border:1px solid rgba(86,235,255,.80);
    border-radius:50%;
    color:#63ecff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.05em;
    background:rgba(0,14,24,.62);
  }

  .m3-step strong{
    display:block;
    color:#f6fbff;
    font-size:16px;
    line-height:1.12;
    text-transform:uppercase;
  }

  .m3-step p{
    margin:9px 0 0;
    color:#bbcfdd;
    font-size:12.5px;
    line-height:1.46;
  }

  .m3-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    width:min(360px,100%);
    min-height:58px;
    margin:24px 0 0;
    box-sizing:border-box;
    border:1px solid #56e8f8;
    border-radius:10px;
    background:linear-gradient(180deg,#69effb 0%,#33d4e8 100%);
    color:#00131e;
    font-size:14px;
    font-weight:950;
    text-decoration:none;
    box-shadow:0 10px 30px rgba(30,215,238,.13);
  }

  .m3-index{
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:32px;
    color:#6eeafa;
    font-size:9px;
    line-height:1.2;
    letter-spacing:.16em;
    font-weight:850;
    text-transform:uppercase;
  }
  .m3-index::after{
    content:"";
    height:1px;
    flex:1;
    background:linear-gradient(90deg,#32d8ef,transparent);
  }
}

@media (max-width:767px){
  .m3-inner{
    width:calc(100% - 36px);
    padding:38px 0 48px;
  }

  .m3-title{
    font-size:clamp(39px,10.6vw,52px);
    line-height:.96;
    letter-spacing:-.042em;
  }

  .m3-copy{
    margin-top:18px;
    font-size:14.5px;
    line-height:1.52;
  }

  .m3-portal{
    height:clamp(270px,72vw,355px);
    margin-top:24px;
    border-radius:16px;
  }

  .m3-portal-badge{
    left:14px;
    bottom:13px;
    padding:8px 10px;
    font-size:10px;
  }

  .m3-steps{
    grid-template-columns:1fr;
    gap:10px;
    margin-top:13px;
  }

  .m3-step{
    min-height:0;
    padding:16px 15px 17px;
    border-radius:14px;
  }

  .m3-step-num{
    width:34px;
    height:34px;
    margin-bottom:11px;
  }

  .m3-step strong{font-size:15px}
  .m3-step p{font-size:11.5px;margin-top:6px}

  .m3-cta{
    width:100%;
    min-height:56px;
    margin-top:16px;
  }

  .m3-index{margin-top:26px}
}

@media (max-width:430px){
  .m3-inner{
    width:calc(100% - 32px);
    padding-top:34px;
  }

  .m3-kicker{
    margin-bottom:10px;
    font-size:9px;
  }

  .m3-title{
    font-size:clamp(36px,9.8vw,42px);
    line-height:.98;
    letter-spacing:-.036em;
  }

  .m3-copy{font-size:14px}

  .m3-portal{
    height:278px;
  }

  .m3-step strong{font-size:14px}
  .m3-step p{font-size:11px}
}