:root{
  --bg: #0a1524;
  --ink: #eaf2ff;
  --ink-dim: #b9c8e6;
  --accent: #4aa8ff;
  --overlay: rgba(7,16,28,0.6);
  --maxw: 1100px;
}

.hero.is-home #title {
  font-family: "Anton", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.hero.is-home #subtitle {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

.content #mailto-link,
.content #mailto-link:visited {
  color: #a8ff60; 
  text-decoration: none;
}
.content #mailto-link:hover,
.content #mailto-link:focus {
  color: #c9ff8f; 
  text-decoration: underline;
}

#mailto-display { color: inherit; }

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Noto Sans JP, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:linear-gradient(180deg, rgba(5,9,16,0.9), rgba(5,9,16,0.6) 70%, transparent);
  backdrop-filter:saturate(120%) blur(4px);
}

.nav{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:12px 20px;
}

.brand{
  font-weight:700;
  letter-spacing:0.06em;
  text-decoration:none;
  color:var(--ink);
}

.menu{
  list-style:none;
  margin:0 0 0 auto;
  padding:0;
  display:flex;
  gap:20px;
}

.menu a{
  color:var(--ink-dim);
  text-decoration:none;
  padding:8px 6px;
}
.menu a[aria-current="page"]{
  color:var(--ink);
  border-bottom:2px solid var(--accent);
}

.menu-toggle{
  display:none;
  margin-left:auto;
  font-size:1.25rem;
  background:none;border:0;color:var(--ink);
}

.hero{
  position:relative;
  min-height: clamp(460px, 70vh, 760px);
  background: radial-gradient(1200px 600px at 50% 100%, rgba(74,168,255,0.18), transparent 60%);
  overflow:hidden;
}
.backdrop{
  position:absolute; inset:0;
  background-image: linear-gradient(var(--overlay), var(--overlay)), url("assets/bg.png");
  background-size: cover;
  background-position: center bottom;
  filter: saturate(110%);
  transform: scale(1.02);
  transition:transform .6s ease;
}
.hero:hover .backdrop{ transform: scale(1.04) }

.hero-inner{
  position:relative;
  z-index:1;
  max-width:var(--maxw);
  margin:0 auto;
  padding: clamp(48px, 8vw, 120px) 20px;
}

.title{
  margin:0 0 6px;
  font-size: clamp(48px, 9vw, 96px);
  line-height:1.05;
  letter-spacing:.06em;
  font-weight:800;
  text-shadow: 0 6px 30px rgba(0,0,0,0.4);
}
.subtitle{
  margin:0 0 28px;
  color:var(--ink-dim);
  font-size: clamp(16px, 2.5vw, 20px);
}

/* When NOT on Home: shrink title and reveal content card */
.hero:not(.is-home) .title{
  font-size: clamp(24px, 4.2vw, 40px);
  font-weight:750;
  letter-spacing:.04em;
}
.hero:not(.is-home) .subtitle{ display:none }

.content{
  margin-top: 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: clamp(16px, 3vw, 28px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* Simple content styling */
.content h2{
  margin: 0 0 10px;
  font-size: 1.6rem;
}
.content p{ margin: 0.2em 0 0.8em }
.content ul{ padding-left: 1.2em }

/* Responsive menu */
@media (max-width: 720px){
  .menu-toggle{ display:block }
  .menu{
    position:absolute;
    top:100%; right:20px; left:20px;
    flex-direction:column;
    background: rgba(5,9,16,0.95);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:10px;
    display:none;
  }
  .menu.open{ display:flex }
}