:root{
  --navy:#071d3a;
  --red:#ed1b2f;
  --pale:#f3f7fb;
  --blue:#74aee0}

*{
  box-sizing:border-box}

html{
  scroll-behavior:smooth}

body{
  margin:0;
  font-family:Arial,'Noto Sans JP',sans-serif;
  color:var(--navy);
  background:#fff}

a{
  text-decoration:none;
  color:inherit}

.wrap{
  width:min(1180px,calc(100% - 56px));
  margin:auto}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:24px;
  background:var(--red);
  color:#fff;
  padding:16px 29px;
  border-radius:5px;
  font-size:13px;
  font-weight:800;
  box-shadow:0 5px 15px #e7192b2b}

.btn:after{
  content:'→';
  font-size:17px}

header{
  height:72px;
  background:transparent;
  position:relative;
  z-index:20}

.head{
  height:100%;
  display:flex;
  align-items:center;
  gap:34px;
  position:relative}

.head:before{
  content:'';
  position:absolute;
  z-index:-1;
  right:180px;
  left:calc((100vw - 1180px)/-2);
  top:0;
  height:72px;
  background:#fff;
  clip-path:polygon(0 0,100% 0,97.7% 100%,0 100%)}

.head:after{
  content:'';
  position:absolute;
  z-index:-2;
  right:-24px;
  top:0;
  width:188px;
  height:72px;
  background:rgba(255,255,255,.78);
  clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}

.logo{
  font-size:39px;
  font-weight:950;
  font-style:italic;
  letter-spacing:-3px;
  line-height:.8}

.logo small{
  font-size:8px;
  letter-spacing:.2px;
  font-style:normal;
  margin-left:10px}

.logo em{
  display:block;
  font-size:7px;
  letter-spacing:.3px;
  font-style:normal;
  font-weight:600;
  margin:7px 0 0 5px}

.nav{
  display:flex;
  gap:31px;
  margin-left:auto;
  font-size:12px;
  font-weight:800;
  align-items:center}

.nav a{
  white-space:nowrap}

.head>.btn{
  height:48px;
  min-width:164px;
  margin-left:22px;
  margin-right:-5px;
  position:relative;
  z-index:2;
  border-radius:4px}


/* HERO: no gradient/overlay */
.hero{
  height:80vh;
  min-height:620px;
  max-height:720px;
  position:relative;
  overflow:hidden;
  background:url('../images/main.png') center center/cover no-repeat;
  color:#fff}

.hero .wrap{
  height:100%;
  position:relative}

.hero-left{
  position:absolute;
  left:0;
  top:14%;
  width:49%;
  z-index:4}

.hero-copy-img{
  display:block;
  width:100%;
  max-width:580px;
  height:auto}

.hero-actions{
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:14px}

.subbtn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:1px solid #fff;
  border-radius:5px;
  padding:14px 22px;
  color:#fff;
  font-size:13px;
  font-weight:700;
  background:#071d3a2b}

.play{
  width:21px;
  height:21px;
  border-radius:50%;
  background:#fff;
  color:#071d3a;
  display:inline-grid;
  place-items:center;
  font-size:9px}

.hero-cards{
  position:absolute;
  right:-45px;
  top:11%;
  width:54%;
  height:500px;
  z-index:3}

.hero-card{
  position:absolute;
  width:245px;
  filter:drop-shadow(0 13px 14px #00162b80);
  transform-origin:50% 90%;
  opacity:0;
  animation:fan .9s cubic-bezier(.2,.8,.2,1) forwards}

.hero-card.c1{
  left:30px;
  top:55px;
  --r:-10deg;
  --x:-105px;
  animation-delay:.3s;
  z-index:1}

.hero-card.c2{
  left:205px;
  top:5px;
  --r:3deg;
  --x:0;
  animation-delay:.15s;
  z-index:3}

.hero-card.c3{
  left:395px;
  top:70px;
  --r:12deg;
  --x:105px;
  animation-delay:.45s;
  z-index:2}

@keyframes fan{
  0%{
  opacity:0;
  transform:translateX(var(--x)) scale(.72) rotate(0)}

100%{
  opacity:1;
  transform:translateX(0) scale(1) rotate(var(--r))}

}

.hero-moment{
  position:absolute;
  right:15px;
  bottom:7%;
  width:390px;
  z-index:4;
  filter:none}

.news{
  height:43px;
  border-bottom:1px solid #dce2e7;
  display:flex;
  align-items:center;
  font-size:12px}

.news .wrap{
  display:flex;
  align-items:center;
  gap:18px}

.news b{
  font-size:12px}

.news i{
  height:18px;
  border-left:1px solid #b8c0c8}

.news .more{
  margin-left:auto;
  font-weight:700}


.section{
  padding:58px 0}

.eyebrow{
  font-size:11px;
  color:#9b7659;
  font-weight:800;
  letter-spacing:1.4px}

.lineup-layout{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  gap:28px;
  align-items:center}

.lineup-copy h2{
  font-size:37px;
  line-height:1.28;
  margin:12px 0;
  white-space:nowrap}

.lineup-copy p{
  font-size:17px;
  font-weight:700}

.lineup-link{
  display:inline-block;
  margin-top:20px;
  font-size:12px;
  font-weight:800;
  border-bottom:1px solid}

.slider-shell{
  position:relative;
  background:#f5f7f9;
  border-radius:8px;
  padding:18px 18px 15px;
  box-shadow:0 8px 30px #0a31540a}

.slider-viewport{
  overflow:hidden}

.slider-track{
  display:flex;
  transition:transform .5s ease}

.slide{
  min-width:100%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px}

.card{
  text-align:center}

.card img{
  display:block;
  width:100%;
  height:270px;
  object-fit:contain;
  filter:drop-shadow(0 7px 7px #00152c2d)}

.card h3{
  font-size:13px;
  margin:10px 0 2px}

.card span{
  font-size:10px}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:30px;
  height:30px;
  border:0;
  border-radius:50%;
  background:#071d3a;
  color:#fff;
  cursor:pointer;
  font-size:17px}

.slider-btn.prev{
  left:-15px}

.slider-btn.next{
  right:-15px}

.slider-dots{
  text-align:center;
  margin-top:10px}

.slider-dots button{
  width:7px;
  height:7px;
  border:0;
  border-radius:50%;
  padding:0;
  margin:0 4px;
  background:#aebbc8}

.slider-dots button.active{
  background:#071d3a}


.how{
  padding:0 0 22px}

.steps{
  background:var(--pale);
  border-radius:7px;
  padding:26px 30px;
  display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);
  align-items:center;
  gap:24px}

.steps h2{
  font-size:25px;
  line-height:1.3;
  margin:8px 0}

.step{
  position:relative;
  text-align:center;
  padding:0 8px}

.step-head{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-bottom:8px}

.step strong{
  position:static;
  color:#79aede;
  font-size:24px;
  font-style:italic}

.step .icon{
  width:50px;
  height:50px;
  background:#dceaf6;
  border-radius:50%;
  display:grid;
  place-items:center;
  margin:0}

.step .icon img{
  width:28px;
  height:28px;
  object-fit:contain}

.step h3{
  font-size:14px;
  margin:0 0 6px;
  text-align:center}

.step p{
  font-size:10px;
  margin:0;
  color:#53687b;
  text-align:center}

.step:not(:last-child):after{
  content:'›';
  position:absolute;
  right:-17px;
  top:28px;
  font-size:35px}


.team{
  height:270px;
  background:#061f3d;
  color:#fff;
  position:relative;
  overflow:hidden}

.team:before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent 0%,transparent 43%,#061f3d 72%,#061f3d 100%),url('../images/teamidstar.png') left center/72% auto no-repeat}

.team .wrap{
  height:100%;
  position:relative}

.team-content{
  position:absolute;
  left:57%;
  top:50%;
  transform:translateY(-50%);
  width:43%;
  padding:10px 0}

.team-title{
  display:block;
  width:340px;
  max-width:85%;
  margin:0 0 14px}

.team-row{
  display:flex;
  align-items:end;
  gap:25px}

.team-row p{
  font-size:12px;
  line-height:1.8;
  margin:0;
  flex:1}

.team .btn{
  background:transparent;
  border:1px solid #fff;
  box-shadow:none;
  padding:12px 18px;
  font-size:11px;
  white-space:nowrap}


.scene-section{
  padding:45px 0}

.scene-title{
  font-size:26px;
  margin:8px 0 22px}

.scene-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px}

.scene img{
  display:block;
  width:100%;
  height:128px;
  object-fit:cover;
  border-radius:7px}

.scene h3{
  font-size:14px;
  margin:10px 0 5px}

.scene p{
  font-size:11px;
  margin:0;
  color:#53687b}


/* CTA recreated to match mockup */
.cta{
  height:205px;
  background:url('../images/footer_bg.png') center/cover no-repeat;
  color:#fff}

.cta .wrap{
  height:100%;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:45px}

.cta-script{
  font-family:'Yu Mincho','Hiragino Mincho ProN',serif;
  font-size:24px;
  line-height:1.5;
  font-style:italic;
  transform:rotate(-5deg);
  text-align:center;
  text-shadow:0 2px 5px #000}

.cta-right{
  text-align:center}

.cta-right p{
  font-size:14px;
  font-weight:700;
  margin:0 0 12px}

.cta-right .btn{
  width:330px;
  max-width:100%;
  padding:15px}

.cta-side{
  position:absolute;
  right:0;
  color:#ffffff1c;
  font-size:28px;
  font-weight:900;
  line-height:.9}

footer{
  height:86px}

.foot{
  height:100%;
  display:flex;
  align-items:center}

.foot .links{
  margin-left:auto;
  font-size:12px;
  font-weight:700;
  color:#455a6d}

.social{
  margin-left:28px;
  display:flex;
  gap:18px;
  align-items:center}

.social a{
  display:grid;
  place-items:center;
  width:24px;
  height:24px}

.social img{
  display:block;
  width:22px;
  height:22px}


/* ========================================
   Card modal / hero card flip
======================================== */
.card img {
  cursor: zoom-in;
}

.card-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 32px;
  background: rgba(0, 8, 20, 0.82);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.card-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.card-modal__image {
  display: block;
  max-width: min(520px, 88vw);
  max-height: 88vh;
  object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45));
  transform: scale(0.96);
  transition: transform 0.25s ease;
}

.card-modal.is-open .card-modal__image {
  transform: scale(1);
}

.hero-card-flip {
  position: absolute;
  width: 245px;
  perspective: 1200px;
  opacity: 0;
  transform-origin: 50% 90%;
  animation: fan 0.9s cubic-bezier(.2,.8,.2,1) forwards;
}

.hero-card-flip.c1 {
  left: 30px;
  top: 55px;
  --r: -10deg;
  --x: -105px;
  animation-delay: .3s;
  z-index: 1;
}

.hero-card-flip.c2 {
  left: 205px;
  top: 5px;
  --r: 3deg;
  --x: 0;
  animation-delay: .15s;
  z-index: 3;
}

.hero-card-flip.c3 {
  left: 395px;
  top: 70px;
  --r: 12deg;
  --x: 105px;
  animation-delay: .45s;
  z-index: 2;
}

.hero-card-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 2 / 3;
  transform-style: preserve-3d;
}

/*
  表 → 裏 → 表を同じ方向へ回転。
  回り始めはゆっくり、徐々に加速する ease-in。
  360°で回転を止め、その直後に小さな反動を付けます。
*/
.hero-card-inner.is-spinning {
  animation: heroCardFullSpin 1.2s both;
}

@keyframes heroCardFullSpin {
  /* ease-in：スタートはゆっくり、360°へ向かって加速 */
  0% {
    transform: rotateY(0deg);
    animation-timing-function: cubic-bezier(.55,.05,.85,.35);
  }

  /* ここで本回転を停止 */
  84% {
    transform: rotateY(360deg);
    animation-timing-function: ease-out;
  }

  /* 停止した勢いで軽く反動 */
  91% {
    transform: rotateY(353deg);
    animation-timing-function: ease-in-out;
  }

  96% {
    transform: rotateY(362deg);
    animation-timing-function: ease-out;
  }

  100% {
    transform: rotateY(360deg);
  }
}

.hero-card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 13px 14px rgba(0, 22, 43, 0.5));
}

.hero-card-face.back {
  transform: rotateY(180deg);
}

/* ========================================
   One-card-at-a-time slider
======================================== */
.slider-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
}

.slider-item {
  min-width: 0;
}

.slider-item .card img {
  height: 290px;
}

.slider-dots {
  display: none;
}


/* ========================================
   Responsive slider stability
   JavaScript calculates each item width.
======================================== */
.lineup-layout > * {
  min-width: 0;
}

.slider-shell {
  width: 100%;
  min-width: 0;
}

.slider-viewport {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.slider-track {
  width: 100%;
}

.slider-item {
  flex-shrink: 0;
  min-width: 0;
}

.slider-item .card {
  width: 100%;
  min-width: 0;
}

.slider-item .card img {
  width: 100%;
  max-width: 210px;
  height: auto;
  aspect-ratio: 2 / 3;
  margin: 0 auto;
  object-fit: contain;
}

.slider-btn {
  z-index: 5;
}


/* ========================================
   MOBILE FIXED MENU
   スマホ時のみメディアクエリ内で表示します。
======================================== */
.mobile-fixed-menu,
.mobile-menu-panel,
.mobile-menu-overlay {
  display: none;
}

/* ========================================
   MEDIA QUERIES
   Responsive rules are intentionally kept
   together at the end of this stylesheet.
======================================== */
@media (max-width: 900px) {
  .wrap {
    width: min(100% - 40px, 720px);
  }

  .nav {
    display: none;
  }

  .head {
    gap: 18px;
  }

  .head:before {
    right: 170px;
    left: -28px;
  }

  .head > .btn {
    margin-left: auto;
  }

  .hero {
    height: 80vh;
    min-height: 650px;
    background-position: 42% center;
  }

  .hero-left {
    top: 45px;
    width: 65%;
  }

  .hero-cards {
    right: -100px;
    top: 270px;
    width: 600px;
    transform: scale(.8);
    transform-origin: right top;
  }

  .hero-card-flip {
    width: 245px;
  }

  .hero-moment {
    width: 300px;
  }

  .lineup-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .lineup-copy br {
    display: none;
  }

  .slider-shell {
    max-width: 680px;
    margin: 0 auto;
  }

  .slider-item .card img {
    max-width: 220px;
  }

  .slide {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .steps {
    grid-template-columns: 1fr 1fr;
  }

  .steps > div:first-child {
    grid-column: 1 / -1;
  }

  .team-content {
    left: 48%;
    width: 52%;
  }

  .scene-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wrap {
    width: calc(100% - 32px);
  }

  header {
    height: 62px;
  }

  .head {
    gap: 10px;
  }

  .head:before {
    height: 62px;
    right: 124px;
    left: -16px;
  }

  .head:after {
    height: 62px;
    width: 142px;
    right: -16px;
  }

  .logo {
    font-size: 32px;
    flex: 0 0 auto;
  }

  .logo small {
    display: none;
  }

  .logo em {
    font-size: 6px;
    margin-top: 6px;
  }

  .head > .btn {
    min-width: 118px;
    height: 42px;
    margin: 0 0 0 auto;
    padding: 10px 12px;
    gap: 8px;
    font-size: 11px;
  }

  .hero {
    height: 650px;
    min-height: 0;
    background-position: 42% center;
  }

  .hero-left {
    top: 64px;
    width: 100%;
  }

  .hero-copy-img {
    width: 94%;
    max-width: 440px;
  }

  .hero-actions {
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }

  .hero-actions .btn,
  .hero-actions .subbtn {
    padding: 12px 14px;
    font-size: 11px;
  }

  .hero-cards {
    top: 355px;
    right: 50px;
    transform: scale(.5);
    transform-origin: right top;
  }

  .hero-moment {
    right: 60px;
    bottom: 12px;
    width: 235px;
  }

  .news {
    height: auto;
    min-height: 56px;
    padding: 10px 0;
  }

  .news .wrap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px 10px;
  }

  .news i,
  .news .more {
    display: none;
  }

  .news span:last-of-type {
    grid-column: 1 / -1;
    line-height: 1.5;
  }

  .section {
    padding: 42px 0;
  }

  .lineup-layout {
    gap: 24px;
  }

  .lineup-copy h2 {
    font-size: 30px;
    white-space: normal;
  }

  .lineup-copy p {
    font-size: 15px;
  }

  /* Smartphone slider: show 2 cards, move 1 card per slide. */
  .slider-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 18px 36px 16px;
    overflow: visible;
  }

  .slider-viewport {
    width: 100%;
    overflow: hidden;
  }

  .slider-track {
    align-items: flex-start;
  }

  .slider-item {
    min-width: 0;
  }

  .slider-item .card {
    padding: 0 2px;
  }

  .slider-item .card img {
    width: 100%;
    max-width: 160px;
    height: auto;
    margin: 0 auto;
  }

  .slider-item .card h3 {
    margin-top: 10px;
    font-size: 13px;
  }

  .slider-item .card span {
    font-size: 10px;
  }

  .slider-btn {
    top: 44%;
    width: 34px;
    height: 34px;
    font-size: 20px;
  }

  .slider-btn.prev {
    left: 7px;
  }

  .slider-btn.next {
    right: 7px;
  }

  /* Fallback layout before/without JavaScript. */
  .slide {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .how {
    padding-bottom: 24px;
  }

  /* HOW TO ORDER: vertical, wide and compact on smartphones. */
  .steps {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 22px 18px;
  }

  .steps > div:first-child {
    grid-column: auto;
    margin-bottom: 8px;
  }

  .steps h2 {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .step {
    display: grid;
    grid-template-columns: 102px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 1px;
    align-items: center;
    min-width: 0;
    padding: 9px 0;
    text-align: left;
  }

  .step + .step {
    border-top: 1px solid rgba(7, 29, 58, .08);
  }

  .step-head {
    grid-column: 1;
    grid-row: 1 / 3;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
  }

  .step strong {
    min-width: 30px;
    font-size: 20px;
  }

  .step .icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
  }

  .step .icon img {
    width: 24px;
    height: 24px;
  }

  .step h3 {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    text-align: left;
    white-space: nowrap;
  }

  .step p {
    grid-column: 2;
    grid-row: 2;
    margin: 1px 0 0;
    font-size: 9px;
    line-height: 1.35;
    text-align: left;
  }

  .step:not(:last-child):after {
    display: none;
  }

  .team {
    height: 390px;
  }

  .team:before {
    background:
      linear-gradient(180deg, transparent 0%, rgba(6,31,61,.12) 42%, #061f3d 70%, #061f3d 100%),
      url('../images/teamidstar.png') 28% top / auto 68% no-repeat;
  }

  .team-content {
    left: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    transform: none;
    padding: 20px 0 24px;
  }

  .team-title {
    width: 270px;
    max-width: 84%;
    margin-bottom: 10px;
  }

  .team-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .team-row p {
    order: 1;
    width: 100%;
    margin: 0;
    font-size: 10px;
    white-space: nowrap;
  }

  .team-copy-break {
    display: none;
  }

  .team .btn {
    order: 2;
    align-self: center;
    width: min(100%, 320px);
    padding: 11px 18px;
    justify-content: center;
    font-size: 10px;
    text-align: center;
  }

  .scene-section {
    padding: 40px 0;
  }

  .scene-title {
    font-size: 23px;
  }

  .scene-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
  }

  .scene img {
    height: 100px;
  }

  .scene h3 {
    font-size: 13px;
  }

  .scene p {
    font-size: 10px;
    line-height: 1.5;
  }

  .cta {
    height: 220px;
    background-position: 38% center;
  }

  .cta .wrap {
    grid-template-columns: 1fr;
  }

  .cta-script {
    display: none;
  }

  .cta-right {
    margin-left: 24%;
  }

  .cta-right p {
    font-size: 12px;
  }

  .cta-right .btn {
    width: 100%;
    max-width: 250px;
  }

  footer {
    height: auto;
    min-height: 86px;
    padding: 18px 0;
  }

  .foot {
    min-height: 50px;
  }

  .foot .links {
    display: none;
  }

  .foot .logo {
    font-size: 30px;
  }

  .social {
    margin-left: auto;
    gap: 12px;
  }

  .card-modal {
    padding: 20px;
  }

  .card-modal__image {
    max-width: 88vw;
    max-height: 84vh;
  }

  /* ----------------------------------------
     画面下固定メニュー
  ---------------------------------------- */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
  }

  .mobile-fixed-menu {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200;
    display: grid;
    grid-template-columns: 1fr 1fr 1.45fr 1fr;
    min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #071d3a;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, .20);
  }

  .mobile-fixed-menu a,
  .mobile-fixed-menu button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    min-height: 64px;
    margin: 0;
    padding: 7px 5px 6px;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, .22);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .03em;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .mobile-fixed-menu > :first-child {
    border-left: 0;
  }

  .mobile-fixed-menu__create {
    font-size: 11px !important;
  }

  .mobile-fixed-menu img {
    width: 21px;
    height: 21px;
    color: #fff;
  }

  .mobile-fixed-menu span {
    display: block;
    white-space: nowrap;
  }

  .mobile-menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .12);
  }

  .mobile-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1180;
    display: block;
    background: rgba(0, 8, 20, .68);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .28s ease, visibility .28s ease;
  }

  .mobile-menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(76px + env(safe-area-inset-bottom));
    z-index: 1190;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 1px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 16px 42px rgba(0, 0, 0, .34);
    opacity: 0;
    visibility: hidden;
    transform: translateY(22px) scale(.98);
    transform-origin: bottom center;
    transition:
      opacity .28s ease,
      visibility .28s ease,
      transform .32s cubic-bezier(.22,.75,.25,1);
    overflow: hidden;
  }

  .mobile-menu-panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }

  .mobile-menu-panel a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 10px 14px;
    background: #fff;
    color: var(--navy);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
  }

}

@media (max-width: 400px) {
  .wrap {
    width: calc(100% - 24px);
  }

  .head:before {
    left: -12px;
  }

  .head:after {
    right: -12px;
  }

  .logo {
    font-size: 29px;
  }

  .head > .btn {
    min-width: 108px;
    font-size: 10px;
  }

  .hero-actions .subbtn {
    padding-left: 10px;
    padding-right: 10px;
  }

  .slider-shell {
    padding-left: 32px;
    padding-right: 32px;
  }

  .slider-item .card img {
    width: 100%;
    max-width: 150px;
  }

  .scene-grid {
    grid-template-columns: 1fr;
  }

  .scene img {
    height: 150px;
  }
}