/* ---------- Fonts & Theme ---------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&display=swap');

:root{
  --primary-color:#ff6b6b;
  --secondary-color:#4ecdc4;
  --accent-color:#ffe66d;
  --dark-color:#1a535c;
  --light-color:#f7fff7;
  --ink:#24323a;
  --muted:#6b7b86;

  --hero-gradient: linear-gradient(135deg,#b3e5fc 0%,#e1f5fe 100%);
  --radius:16px;
  --shadow:0 10px 24px rgba(0,0,0,.08);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Poppins',system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--light-color);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* ---------- Header & Nav ---------- */
header{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 0;position:relative;gap:16px;
}
.logo h1{font-size:2rem;color:var(--dark-color)}
.logo p{font-size:.95rem;color:var(--muted)}
nav ul{display:flex;list-style:none;gap:20px}
nav a{
  text-decoration:none;color:var(--dark-color);font-weight:600;position:relative;
}
nav a:hover{color:var(--primary-color)}
nav a::after{
  content:'';position:absolute;left:0;bottom:-6px;height:2px;width:0;background:var(--primary-color);
  transition:width .25s ease;
}
nav a:hover::after{width:100%}
.menu-toggle{display:none;cursor:pointer;font-size:1.6rem;color:var(--dark-color)}

/* ---------- Hero ---------- */
.hero{
  min-height:72vh; display:flex; align-items:center; justify-content:center; text-align:center;
  background:var(--hero-gradient); border-radius:20px; margin:20px 0; position:relative; overflow:hidden;
  color:#073b4c;
}
.hero::before{
  content:''; position:absolute; inset:0; opacity:.08;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 24px 24px;
}
.hero-content{z-index:1; padding:24px}
.hero h2{font-size:2.6rem; margin-bottom:12px}
.hero p{font-size:1.2rem; margin-bottom:20px; color:#0b5563}
.hero-image img{max-width:100%; height:auto; display:block; margin:0 auto; border-radius:12px}

/* ---------- Sections ---------- */
.section{padding:72px 0; border-bottom:1px solid #eef2f4}
.section h2{
  font-size:2rem; text-align:center; margin-bottom:32px; color:var(--dark-color); position:relative;
}
.section h2::after{
  content:''; position:absolute; width:92px; height:4px; background:var(--primary-color);
  bottom:-12px; left:50%; transform:translateX(-50%); border-radius:2px;
}
.japanese{font-family:'Noto Sans JP',sans-serif; font-size:1.15rem; opacity:.75; margin-left:8px; letter-spacing:.02em}

/* ---------- Services Grid ---------- */
.service-cards{
  display:grid; gap:28px; grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}
.card{
  background:#fff; padding:24px; border-radius:var(--radius); box-shadow:var(--shadow);
  text-align:center; transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:0 14px 30px rgba(0,0,0,.12) }
.card h3{ color:var(--primary-color); margin:14px 0 8px; font-size:1.25rem }
.card p{ color:var(--ink) }
.card-art{ width:100%; height:auto; border-radius:12px; display:block }

/* ---------- Architecture ---------- */
.architecture-content{ display:grid; gap:28px; grid-template-columns:1.2fr .8fr; align-items:center }
.architecture-image img{ width:100%; height:auto; border-radius:var(--radius); box-shadow:var(--shadow) }
.architecture-text h3{ font-size:1.4rem; margin-bottom:10px }
.architecture-text p{ color:var(--muted) }

/* ---------- Certifications Grid ---------- */
.cert-grid{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.cert-card img{ width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow) }
.cert-card figcaption{ text-align:center; margin-top:10px; font-weight:600; color:var(--dark-color) }

/* ---------- Resources Panels ---------- */
.resources-list.panels{
  display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
}
.resources-list.panels img{ width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow) }

/* ---------- Contact ---------- */
.contact-info p{ color:var(--ink); text-align:center; margin-bottom:12px }
.social-links{ display:flex; gap:12px; justify-content:center; margin-bottom:12px }
.social-icon{ width:40px; height:40px; display:grid; place-items:center; background:#fff; border-radius:10px; box-shadow:var(--shadow) }
.contact-visual img{ width:100%; height:auto; border-radius:16px; box-shadow:var(--shadow); margin-top:16px }

/* ---------- Footer ---------- */
footer{ text-align:center; color:var(--muted); padding:28px 0 40px }
.footer-quote{ margin-top:6px; font-style:italic }

/* ---------- Scroll-in Animations ---------- */
.section{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease }
.section.visible{ opacity:1; transform:translateY(0) }
.highlight{ box-shadow:0 0 0 4px rgba(255,107,107,.18) inset; transition:box-shadow .6s ease }

/* ---------- Responsive Nav (Mobile) ---------- */
@media (max-width: 768px){
  .menu-toggle{ display:block }
  nav{
    position:absolute; top:100%; left:0; width:100%;
    background:#fff; padding:16px 20px; border-radius:12px; box-shadow:var(--shadow);
    transform:translateY(-16px); opacity:0; visibility:hidden; transition:all .25s ease;
  }
  nav.active{ transform:translateY(0); opacity:1; visibility:visible }
  nav ul{ flex-direction:column; gap:12px }
  .architecture-content{ grid-template-columns:1fr }
  .hero{ min-height:64vh }
  .hero h2{ font-size:2.1rem }
}

/* ---------- Small helpers ---------- */
img{ background:transparent; }