/*
Theme Name: Nisehatakiti Factory
Theme URI: https://nisehatakiti.online/
Author: Nisehatakiti
Description: Factory background parallax theme.
Version: 1.0.0
Text Domain: nisehatakiti-factory
*/

:root{
  --factory-parallax-y: 0px;
  --ink:#10161a;
  --paper:rgba(248,247,242,.92);
  --line:#20272b;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#070b0d;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
a{color:inherit;text-decoration:none}

.site-shell{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  isolation:isolate;
  background:#080c0f;
}

/* Factory artwork layer. User places assets/factory-art.jpg in the theme. */
.site-shell::before{
  content:"";
  position:absolute;
  z-index:-3;
  left:0;
  top:var(--factory-parallax-y);
  width:100%;
  height:calc(100% + 240px);
  background-image:url("assets/factory-art.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  will-change:transform,top;
}

.site-shell::after{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:linear-gradient(180deg,rgba(5,9,11,.28) 0%,rgba(5,9,11,.12) 50%,rgba(5,9,11,.55) 100%);
  pointer-events:none;
}

.site-header,.site-main,.site-footer{position:relative;z-index:1}

.site-header{
  background:rgba(8,13,16,.92);
  border-bottom:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(10px);
}
.header-inner{
  width:min(1460px,94vw);
  margin:auto;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{font-size:30px;font-weight:800;letter-spacing:.02em;color:#fff}
.brand small{display:block;font-size:12px;letter-spacing:.08em;margin-top:4px;color:#d7d7d7}
.primary-menu{display:flex;gap:30px;list-style:none;margin:0;padding:0;color:#fff;font-size:15px}
.primary-menu a{opacity:.9}
.primary-menu a:hover{opacity:1}

.hero{
  width:min(1460px,94vw);
  margin:0 auto;
  min-height:720px;
  display:grid;
  grid-template-columns:280px minmax(480px,1fr) 280px;
  align-items:center;
  gap:42px;
  padding:54px 0 84px;
}
.panel,.product-card,.feature-bar{
  background:var(--paper);
  border:3px solid rgba(20,25,28,.9);
  box-shadow:0 12px 26px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.45);
}
.panel{padding:44px 28px;text-align:center}
.panel h2{font-size:30px;margin:12px 0}
.panel p{line-height:1.9}
.hero-center{
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:50px;
  background:rgba(250,249,244,.88);
  border:3px solid rgba(20,25,28,.9);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
  border-radius:110px 110px 8px 8px;
}
.hero-center h1{font-size:70px;margin:0 0 8px}
.hero-center .subtitle{font-size:24px;margin:0 0 58px}
.hero-center .catch{font-size:36px;font-weight:800;line-height:1.55;margin:0 0 38px}
.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:170px;padding:16px 22px;
  background:#10171b;color:#fff;font-weight:700;
  border:1px solid #263037;
}
.button:hover{background:#263037}

.products{
  width:min(1200px,92vw);
  margin:0 auto;
  padding:38px 0 46px;
}
.section-title{color:#fff;font-size:28px;margin:0 0 18px}
.product-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:16px;
}
.product-card{text-align:center;padding:28px 16px}
.product-card h3{font-size:22px;margin:10px 0}
.product-card p{min-height:44px}
.price{font-size:24px;font-weight:800;margin:18px 0}
.product-card .button{min-width:100%;padding:14px}

.feature-bar{
  width:min(1200px,92vw);
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.feature{
  padding:28px 34px;
  border-right:1px solid rgba(20,25,28,.25);
}
.feature:last-child{border-right:0}
.feature strong{display:block;font-size:22px;margin-bottom:7px}
.feature span{font-size:14px}

.site-footer{
  background:rgba(7,11,13,.96);
  color:#fff;
  border-top:1px solid rgba(255,255,255,.12);
}
.footer-inner{
  width:min(1460px,94vw);margin:auto;
  padding:46px 0;
  display:flex;justify-content:space-between;gap:30px;align-items:end;
}
.footer-nav{display:flex;gap:26px;list-style:none;padding:0;margin:0}

@media (max-width:1100px){
  .hero{grid-template-columns:220px minmax(360px,1fr) 220px;gap:18px}
  .hero-center h1{font-size:54px}
  .hero-center .catch{font-size:30px}
  .product-grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .header-inner{min-height:86px}
  .primary-menu{display:none}
  .hero{
    min-height:auto;
    grid-template-columns:1fr;
    gap:18px;
    padding:28px 0 42px;
  }
  .hero-center{order:-1;min-height:520px;padding:32px 18px;border-radius:56px 56px 8px 8px}
  .hero-center h1{font-size:44px}
  .hero-center .subtitle{font-size:18px;margin-bottom:36px}
  .hero-center .catch{font-size:28px}
  .panel{padding:32px 22px}
  .product-grid{grid-template-columns:1fr 1fr}
  .feature-bar{grid-template-columns:1fr}
  .feature{border-right:0;border-bottom:1px solid rgba(20,25,28,.25)}
  .feature:last-child{border-bottom:0}
  .footer-inner{display:block}
  .footer-nav{margin-top:24px;flex-wrap:wrap}
  .site-shell::before{height:calc(100% + 140px)}
}