*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#f3f2ee;--fg:#1a1a1a;--mid:#999;--light:#c0bfba;--divider:#e0dfdb;--card:#eceae6}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:'Cormorant Garamond','Noto Serif JP',serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

.hero{padding:120px 24px 80px;text-align:center;opacity:0;animation:fadeIn 1s ease forwards}
.hero .mono{font-family:'DM Mono',monospace;font-size:10px;letter-spacing:8px;text-transform:uppercase;color:var(--light);margin-bottom:36px}
.hero h1{font-weight:300;font-size:clamp(20px,3.2vw,30px);letter-spacing:8px;text-transform:uppercase}
.hero .hero-i{font-weight:300;font-size:clamp(80px,16vw,140px);letter-spacing:4px;text-transform:none;line-height:1}
.hero .sub{font-family:'DM Mono',monospace;font-weight:300;font-size:14px;letter-spacing:5px;color:var(--mid);margin-top:36px}
.hero .tagline{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(20px,3.2vw,30px);letter-spacing:8px;text-transform:uppercase;color:var(--fg);margin-top:44px;line-height:1.8}
.hline{width:32px;height:1px;background:var(--light);margin:70px auto 0}

/* Section Headers */
.section-header{
  max-width:460px;margin:0 auto;
  padding:50px 28px 0;
  text-align:center;
  opacity:0;animation:fadeIn 1s ease forwards;
}
.section-header .sec-mono{
  font-family:'DM Mono',monospace;font-size:8px;
  letter-spacing:6px;text-transform:uppercase;color:var(--light);
  margin-bottom:6px;
}
.sec-title{
  font-weight:300;font-size:22px;letter-spacing:6px;
  margin-bottom:4px;
}
.sec-sub{
  font-family:'Noto Serif JP',serif;font-weight:200;
  font-size:11px;letter-spacing:2px;color:var(--mid);
  margin-bottom:0;
}

.grid{
  max-width:460px;margin:0 auto;
  padding:36px 28px 0;
  display:grid;grid-template-columns:1fr 1fr;
  gap:28px 20px;
}

.card{
  background:var(--card);border-radius:10px;
  overflow:hidden;cursor:pointer;
  opacity:0;transform:translateY(20px);
  transition:box-shadow .4s;display:block;
}
.card:hover{box-shadow:0 8px 30px rgba(0,0,0,.06)}
.card.visible{animation:cardIn .7s ease forwards}

.card-img{width:100%;height:0;padding-bottom:100%;position:relative;overflow:hidden;background:var(--card)}
.card-img img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;filter:grayscale(40%) contrast(.95);transition:filter .5s,transform .5s}
.card:hover .card-img img{filter:grayscale(0%) contrast(1);transform:scale(1.04)}

.card-svg{width:100%;padding:32px;background:var(--bg);display:flex;align-items:center;justify-content:center}
.card-svg svg{width:100%;height:100%;transition:transform .5s}
.card:hover .card-svg svg{transform:scale(1.05)}

.card-text{width:100%;height:0;padding-bottom:100%;position:relative;overflow:hidden;background:var(--fg)}
.card-text-inner{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.card-text .ct-icon{font-family:'Cormorant Garamond',serif;font-weight:300;font-size:36px;letter-spacing:2px;color:var(--bg);opacity:.9}
.card-text .ct-label{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:4px;text-transform:uppercase;color:rgba(243,242,238,.4);margin-top:10px}
.card:hover .card-text{background:#2a2a2a}

.card-info{padding:14px 16px 18px}
.card-info .idx{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:3px;color:var(--light);margin-bottom:4px}
.card-info .ttl{font-weight:500;font-size:18px;letter-spacing:2px;text-transform:uppercase;line-height:1.3;transition:letter-spacing .4s}
.card:hover .ttl{letter-spacing:4px}
.card-info .jp{font-family:'Noto Serif JP',serif;font-weight:300;font-size:12px;letter-spacing:2px;color:var(--mid);margin-top:4px}
.card-info .tag{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:2px;text-transform:uppercase;color:var(--light);margin-top:8px;display:inline-block;padding:3px 7px;border:1px solid var(--divider);border-radius:3px}

/* SNS Section */
.sns-section{
  max-width:460px;margin:0 auto;
  padding:60px 28px 0;
  text-align:center;
}
.sns-section .sec-mono{
  font-family:'DM Mono',monospace;font-size:8px;
  letter-spacing:6px;text-transform:uppercase;color:var(--light);
  margin-bottom:6px;
}
.sns-section h2{
  font-weight:300;font-size:18px;letter-spacing:6px;text-transform:uppercase;
  margin-bottom:28px;
}
.sns-grid{
  justify-content:center;gap:24px 32px;
  display:grid;
}
.sns-top{grid-template-columns:repeat(4,auto)}
.sns-bottom{grid-template-columns:repeat(3,auto);margin-top:24px}
.sns-item{
  display:flex;flex-direction:column;align-items:center;
  text-decoration:none;color:inherit;
  opacity:0;transform:translateY(10px);
}
.sns-item.visible{animation:cardIn .5s ease forwards}
.sns-icon{
  width:56px;height:56px;
  border-radius:50%;background:var(--card);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,transform .3s;
}
.sns-item:hover .sns-icon{background:var(--fg);transform:scale(1.1)}
.sns-item:hover .sns-icon svg{fill:var(--bg)}
.sns-icon svg{width:22px;height:22px;fill:var(--fg);transition:fill .3s}
.sns-item span{
  margin-top:8px;
  font-family:'DM Mono',monospace;font-size:7px;
  letter-spacing:1px;text-transform:uppercase;color:var(--light);
}

.footer{text-align:center;padding:50px 24px 40px;max-width:460px;margin:0 auto}
.footer .mono{font-family:'DM Mono',monospace;font-size:8px;letter-spacing:5px;text-transform:uppercase;color:var(--light)}
.footer .copy{font-family:'Noto Serif JP',serif;font-weight:200;font-size:9px;color:var(--light);margin-top:8px;letter-spacing:1px}

/* Kyoten SVG */
.ky-pulse{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 5s ease-in-out infinite}
.ky-pulse:nth-of-type(2){animation-delay:1.2s}
.ky-pulse:nth-of-type(3){animation-delay:2.4s}
.ky-grid{fill:none;stroke:var(--fg);stroke-width:.4;opacity:.15}
.ky-axis{stroke:var(--fg);stroke-width:.4;opacity:.2}
.ky-conv{stroke:var(--fg);stroke-width:.3;opacity:.12;stroke-dasharray:3 5}
.ky-orbit{fill:none;stroke:var(--fg);stroke-width:.5;stroke-dasharray:2 5;transform-origin:center;animation:rot 50s linear infinite}
.ky-core{fill:var(--fg)}
.ky-glow{fill:none;stroke:var(--fg);stroke-width:.4;opacity:0;animation:pulse 3s ease-in-out infinite}
.ky-node{fill:none;stroke:var(--fg);stroke-width:.5}

/* Delta ZyccQ SVG */
.zq-pulse{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 4.8s ease-in-out infinite}
.zq-pulse:nth-of-type(2){animation-delay:1.6s}
.zq-tri{fill:none;stroke:var(--fg);stroke-width:1.2}
.zq-inner{fill:none;stroke:var(--fg);stroke-width:.7;stroke-dasharray:3 4}
.zq-slash{stroke:var(--fg);stroke-width:1.5;stroke-linecap:round;opacity:.7}
.zq-orbit{fill:none;stroke:var(--fg);stroke-width:.4;stroke-dasharray:1.5 4;transform-origin:center;animation:rot 45s linear infinite reverse}
.zq-net{stroke:var(--fg);stroke-width:.25;opacity:.1}
.zq-node{fill:none;stroke:var(--fg);stroke-width:.6}
.zq-core{fill:var(--fg)}
.zq-dot{stroke:var(--fg);stroke-width:.3;opacity:.1;stroke-dasharray:1 4}

/* Homodimes SVG */
.hd-pulse{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 4.2s ease-in-out infinite}
.hd-pulse:nth-of-type(2){animation-delay:1.4s}
.hd-pulse:nth-of-type(3){animation-delay:2.8s}
.hd-layer{fill:none;stroke:var(--fg);stroke-width:.4;opacity:.2;stroke-dasharray:3 5}
.hd-axis{stroke:var(--fg);stroke-width:.4;opacity:.15}
.hd-head{fill:none;stroke:var(--fg);stroke-width:1.2}
.hd-body{stroke:var(--fg);stroke-width:1.2;stroke-linecap:round}
.hd-orbit{fill:none;stroke:var(--fg);stroke-width:.5;stroke-dasharray:2 6;transform-origin:center;animation:rot 48s linear infinite}
.hd-node{fill:none;stroke:var(--fg);stroke-width:.6}
.hd-diag{stroke:var(--fg);stroke-width:.3;opacity:.1;stroke-dasharray:4 6}
.hd-dot{fill:var(--fg);opacity:.35}

/* i Operator SVG */
.op-pulse{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 4s ease-in-out infinite}
.op-pulse:nth-of-type(2){animation-delay:1.3s}
.op-rect{fill:none;stroke:var(--fg);stroke-width:.8;opacity:.25}
.op-rect-inner{fill:none;stroke:var(--fg);stroke-width:.5;opacity:.15;stroke-dasharray:4 3}
.op-ray{stroke:var(--fg);stroke-width:.8;stroke-linecap:round;opacity:.3}
.op-stem{stroke:var(--fg);stroke-width:4;stroke-linecap:round}
.op-serif{stroke:var(--fg);stroke-width:3;stroke-linecap:round}
.op-dot-l{fill:#4a7fd4}
.op-dot-r{fill:#c0392b}
.op-arrow{fill:none;stroke:var(--fg);stroke-width:.6;opacity:.3;stroke-dasharray:2 3}
.op-orbit{fill:none;stroke:var(--fg);stroke-width:.4;stroke-dasharray:1.5 5;transform-origin:center;animation:rot 42s linear infinite reverse}

/* i Theory SVG */
.vi-pulse{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 4.5s ease-in-out infinite}
.vi-pulse:nth-of-type(2){animation-delay:1.5s}
.vi-ring{fill:none;stroke:var(--fg);stroke-width:.7}
.vi-ro{stroke-dasharray:3 7;transform-origin:center;animation:rot 55s linear infinite}
.vi-axis{stroke:var(--fg);stroke-width:.5;opacity:.3}
.vi-ext{stroke:var(--fg);stroke-width:.3;opacity:.15;stroke-dasharray:4 6}
.vi-i-stem{stroke:var(--fg);stroke-width:3.5;stroke-linecap:round}
.vi-i-serif{stroke:var(--fg);stroke-width:2.5;stroke-linecap:round}
.vi-dot{fill:#c0392b}
.vi-node{fill:none;stroke:var(--fg);stroke-width:.6}
.vi-orbit{fill:none;stroke:var(--fg);stroke-width:.4;stroke-dasharray:1.5 3;transform-origin:center;animation:rot 40s linear infinite reverse}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:0;transform:scale(.85)}50%{opacity:.25;transform:scale(1)}}
.mp-ring{fill:none;stroke:var(--fg);stroke-width:.8}
.mp-ro{stroke-dasharray:4 8;transform-origin:center;animation:rot 60s linear infinite}
.mp-rm{stroke-dasharray:2 6;transform-origin:center;animation:rot 45s linear infinite reverse}
.mp-l{stroke:var(--fg);stroke-width:.5;opacity:.35}
.mp-n{fill:none;stroke:var(--fg);stroke-width:.6}
.mp-c{fill:var(--fg)}
.mp-p{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 4s ease-in-out infinite}
.mp-p:nth-of-type(2){animation-delay:1.3s}
.mp-p:nth-of-type(3){animation-delay:2.6s}
.sz-a{stroke:var(--fg);stroke-width:.4;opacity:.3}
.sz-p{fill:none;stroke:var(--fg);stroke-width:.6;opacity:.7}
.sz-f{fill:var(--fg);opacity:.03}
.sz-r{stroke:var(--fg);stroke-width:.3;opacity:.25;stroke-dasharray:2 4}
.sz-o{fill:none;stroke:var(--fg);stroke-width:.5;stroke-dasharray:1 3;transform-origin:center;animation:rot 50s linear infinite}
.sz-d{fill:var(--fg);opacity:.5}
.sz-x{fill:var(--fg)}
.sz-w{fill:none;stroke:var(--fg);stroke-width:.3;opacity:0;animation:pulse 5s ease-in-out infinite}
.sz-w:nth-of-type(2){animation-delay:1.7s}

@media(max-width:480px){
  .section-header{
    max-width:460px;margin:0 auto;
    padding:50px 28px 0;
    text-align:center;
    opacity:0;animation:fadeIn 1s ease forwards;
  }
  .section-header .sec-mono{
    font-family:'DM Mono',monospace;font-size:8px;
    letter-spacing:6px;text-transform:uppercase;color:var(--light);
    margin-bottom:6px;
  }
  .sec-title{
    font-weight:300;font-size:22px;letter-spacing:6px;
    margin-bottom:4px;
  }
  .sec-sub{
    font-family:'Noto Serif JP',serif;font-weight:200;
    font-size:11px;letter-spacing:2px;color:var(--mid);
    margin-bottom:0;
  }
  .grid{gap:28px 20px;padding:32px 16px 0}
  .sns-section{padding-left:16px;padding-right:16px}
  .card-info .ttl{font-size:16px}
  .card-info .jp{font-size:11px}
}