/* =========================================================
   Monopower – page sections (landing + product detail)
   ========================================================= */

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;background:linear-gradient(160deg,#0A2A16 0%,#0F3D20 55%,#0B2463 140%);color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 78% 50%,rgba(227,195,116,.16) 0%,rgba(227,195,116,0) 70%)}
.hero__inner{position:relative;padding-top:96px;padding-bottom:140px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:28px}
.hero-copy>*{animation:rise .9s var(--ease) both}
.hero-copy>*:nth-child(2){animation-delay:.1s}.hero-copy>*:nth-child(3){animation-delay:.2s}
.hero-copy>*:nth-child(4){animation-delay:.3s}.hero-copy>*:nth-child(5){animation-delay:.4s}
.hero__kicker{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.hero__kicker::before{content:"";width:40px;height:1px;background:var(--gold-dark);transform-origin:left;animation:grow 1.2s .6s var(--ease) both}
.hero h1{color:#fff;font-weight:500;font-size:clamp(44px,5.6vw,76px);line-height:1.04;letter-spacing:-.01em}
.gold-text{font-style:italic;background:linear-gradient(90deg,#E3C374 0%,#E3C374 40%,#FFF3D1 50%,#E3C374 60%,#E3C374 100%);background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sheen 7s 1.5s linear infinite}
.hero__lead{font-size:17.5px;line-height:1.75;color:var(--mint-2);max-width:500px;text-wrap:pretty}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.hero__stats{display:flex;flex-wrap:wrap;gap:28px 40px;padding-top:28px;border-top:1px solid rgba(227,195,116,.25)}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-family:var(--serif);font-size:34px;font-weight:600;color:var(--gold);line-height:1.1}
.stat b.jp{font-family:var(--jp);font-size:30px;line-height:1.2}
.stat span{font-size:13px;color:var(--mint)}
.hero-visual{position:relative;display:flex;justify-content:center;padding:40px 0;animation:fadein 1.4s .3s ease both}
.hero-visual .halo,.hero-visual .orbit,.hero-visual .ring{position:absolute;left:50%;top:50%;border-radius:50%}
.halo{width:520px;height:520px;margin:-260px 0 0 -260px;background:radial-gradient(circle,rgba(227,195,116,.28) 0%,rgba(227,195,116,0) 65%);animation:breathe 10s ease-in-out infinite}
.orbit{width:560px;height:560px;margin:-280px 0 0 -280px;border:1px dashed rgba(227,195,116,.35);animation:spin 60s linear infinite}
.hero-visual .ring{width:440px;height:440px;margin:-220px 0 0 -220px;border:1px solid rgba(227,195,116,.22)}
.hero-card{position:relative;width:min(100%,420px);border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 50px 90px -40px rgba(0,0,0,.7),0 0 0 1px rgba(227,195,116,.35);animation:float 8s 1.6s ease-in-out infinite}
.hero-card img{width:100%;aspect-ratio:1/1;object-fit:cover}
.hero-badge{position:absolute;right:0;bottom:64px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:16px;background:rgba(10,42,22,.85);border:1px solid rgba(227,195,116,.4);backdrop-filter:blur(8px);animation:float 8s 2.6s ease-in-out infinite}
.hero-badge__icon{width:40px;height:40px;border-radius:10px;background:var(--gold);display:flex;align-items:center;justify-content:center;color:var(--navy)}
.hero-badge small{display:block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.hero-badge strong{font-size:15px;font-weight:600}
@media (max-width:640px){.hero__inner{padding-top:64px;padding-bottom:120px}.hero__kicker{font-size:11px;letter-spacing:.12em;gap:10px}.hero__kicker::before{width:24px;flex-shrink:0}.hero-badge{right:8px;bottom:24px}.orbit,.halo{display:none}}

/* ---- Trust band ---- */
.trust{position:relative;z-index:2;margin-top:-64px}
.trust__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));background:#fff;border-radius:22px;border:1px solid var(--line);box-shadow:0 30px 60px -36px rgba(15,42,26,.35);overflow:hidden}
.trust__item{display:flex;gap:14px;align-items:flex-start;padding:26px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 -1px -1px 0}
.trust__item svg{flex-shrink:0;color:var(--gold-dark)}
.trust__item strong{display:block;font-size:15px;color:var(--ink);font-weight:600}
.trust__item span{font-size:13.5px;color:var(--muted-2)}

/* ---- About ---- */
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(480px,100%),1fr));gap:72px;align-items:center;padding-top:120px}
.about__media{position:relative;padding:0 48px 48px 0}
.about__media .frame:first-child{border-radius:24px}
.about__media .frame:first-child img{width:100%;aspect-ratio:4/3;object-fit:cover}
.about__media .frame--small{position:absolute;right:0;bottom:0;width:46%;border-radius:20px;border:6px solid var(--bg);box-shadow:0 24px 48px -24px rgba(15,42,26,.4)}
.about__media .frame--small img{width:100%;aspect-ratio:1/1;object-fit:cover}
.jp-tag{position:absolute;left:24px;top:-22px;padding:10px 16px;border-radius:10px;background:var(--navy);color:var(--gold);font-family:var(--jp);font-size:15px;font-weight:600;letter-spacing:.2em}
.info-list{margin:0;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 24px;font-size:14.5px;padding-top:22px;border-top:1px solid #DDE3D7}
.info-list dt{color:var(--muted-2)}
.info-list dd{margin:0;font-weight:500}

/* ---- Catalog ---- */
.catalog{background:#fff}
.catalog__inner{display:flex;flex-direction:column;gap:56px}
.chip-nav{display:flex;flex-wrap:wrap;gap:10px;padding-top:28px;margin-top:32px;border-top:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid #D9DFD6;color:#2C3A32;text-decoration:none;font-size:14px;font-weight:500}
.chip b{font-family:var(--serif);font-size:16px;font-weight:500;color:var(--green)}
.chip:hover,.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}
.chip:hover b,.chip.is-active b{color:var(--gold)}
@media (max-width:640px){
  /* Group chips become one swipeable row on phones */
  .chip-nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter));padding-left:var(--gutter);padding-right:var(--gutter);scroll-snap-type:x proximity}
  .chip-nav::-webkit-scrollbar{display:none}
  .chip{flex-shrink:0;scroll-snap-align:start;min-height:42px;padding:0 16px}
}
.group{display:flex;flex-direction:column;gap:24px}
.group+.group{padding-top:44px;border-top:1px solid var(--line)}
.group__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.group__head .num{font-family:var(--serif);font-size:18px;color:var(--gold-dark)}
.group__head h3{font-weight:600;font-size:30px}
.group__head span:last-child{font-size:14px;color:var(--muted-2)}
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px}
.product-card{display:flex;flex-direction:column;border-radius:20px;background:#fff;border:1px solid var(--line);overflow:hidden;text-decoration:none;color:inherit;transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s}
.product-card:hover{transform:translateY(-6px);box-shadow:0 30px 56px -28px rgba(15,42,26,.32);border-color:#D6DDD1;color:inherit}
.product-card__img{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(180deg,#F3F5F0,#E9EEE6);display:flex;align-items:center;justify-content:center;color:#8A978F}
.product-card__img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.product-card:hover .product-card__img img{transform:scale(1.04)}
.product-card__body{display:flex;flex-direction:column;gap:8px;padding:20px 22px 24px;flex:1}
.product-card__cat{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--green)}
.product-card h4{font-weight:600;font-size:25px;line-height:1.15}
.product-card p{font-size:14.5px;color:var(--muted-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.product-card__more{margin-top:auto;padding-top:8px;display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--green)}
.featured{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));border-radius:24px;background:linear-gradient(135deg,#0B2463 0%,#0F3D20 100%);color:#fff;overflow:hidden;box-shadow:0 30px 60px -36px rgba(11,36,99,.6);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.featured:hover{transform:translateY(-6px);box-shadow:0 40px 70px -36px rgba(11,36,99,.7)}
.featured__media{position:relative;padding:32px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%,rgba(227,195,116,.22) 0%,rgba(227,195,116,0) 65%)}
.featured__media img{width:100%;max-width:440px;border-radius:18px}
.featured__badge{position:absolute;left:24px;top:24px;padding:6px 12px;border-radius:999px;background:var(--gold);color:var(--navy);font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.featured__body{padding:40px 40px 36px;display:flex;flex-direction:column;gap:16px;justify-content:center}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:rgba(255,255,255,.12);color:#fff}
.tag--gold{color:var(--gold)}
.featured h4{color:#fff;font-weight:500;font-size:38px;line-height:1.1}
.jp-name{font-family:var(--jp);font-size:.5em;color:var(--gold);white-space:nowrap}
.featured p{font-size:15.5px;color:#D3DBF0;text-wrap:pretty}
.mini-specs{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr));gap:12px 20px;padding-top:16px;border-top:1px solid rgba(227,195,116,.3);font-size:14px}
.mini-specs dt{color:#AEBBE0;font-size:12.5px}
.mini-specs dd{margin:0;font-weight:600}
.featured .btn{align-self:flex-start}
.note-box{padding:20px 24px;border-radius:14px;background:var(--bg);font-size:14px;color:var(--muted-2);text-align:center}
.note-box a{font-weight:600}

/* ---- Okinawa band ---- */
.okinawa{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;color:#fff}
.okinawa>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.okinawa::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,42,22,.88) 0%,rgba(10,42,22,.55) 50%,rgba(10,42,22,.15) 100%)}
.okinawa__inner{position:relative;z-index:2;width:100%;padding-top:96px;padding-bottom:96px;display:flex;flex-direction:column;gap:22px}
.okinawa__jp{font-family:var(--jp);font-size:15px;letter-spacing:.4em;color:var(--gold)}
.okinawa h2{color:#fff;font-weight:500;font-size:clamp(36px,4.6vw,64px);line-height:1.05;max-width:640px}
.okinawa p{font-size:17px;color:#DCE6DD;max-width:520px}
.okinawa .btn{align-self:flex-start}