/* ===========================================================
   Simplaud 合同会社 — Light Neumorphism LP
   =========================================================== */
:root{
  --bg:#e7eaf0;
  --bg-deep:#e1e5ec;
  --light:#ffffff;
  --dark:#c2c9d6;
  --ink:#232c3d;
  --ink-soft:#3f4960;
  --muted:#6e7890;
  --line:#d3d8e2;
  --accent:#169a92;
  --accent-deep:#0f7d77;
  --accent-soft:rgba(22,154,146,.12);

  --raised:-7px -7px 15px var(--light), 7px 7px 15px var(--dark);
  --raised-sm:-4px -4px 9px var(--light), 4px 4px 9px var(--dark);
  --raised-lg:-12px -12px 26px var(--light), 12px 12px 26px var(--dark);
  --inset:inset -5px -5px 10px var(--light), inset 5px 5px 11px var(--dark);
  --inset-sm:inset -3px -3px 6px var(--light), inset 3px 3px 6px var(--dark);

  --r-lg:30px; --r-md:22px; --r-sm:16px;
  --maxw:1080px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:120px;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Noto Sans JP",sans-serif; font-weight:400;
  line-height:1.8; -webkit-font-smoothing:antialiased;
  letter-spacing:.01em;
}
.mono{font-family:"JetBrains Mono",monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}

/* ---------- neumorphism primitives ---------- */
.nm-raise{background:var(--bg); box-shadow:var(--raised); border-radius:var(--r-md);}
.nm-inset{background:var(--bg); box-shadow:var(--inset); border-radius:var(--r-md);}

/* ---------- buttons ---------- */
.btn{
  font-family:inherit; border:none; cursor:pointer; background:var(--bg);
  color:var(--ink); border-radius:999px; box-shadow:var(--raised-sm);
  display:inline-flex; align-items:center; gap:11px; font-weight:700;
  font-size:15px; padding:16px 30px; letter-spacing:.02em;
  transition:box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.btn:hover{transform:translateY(-1px);}
.btn:active{box-shadow:var(--inset-sm); transform:translateY(0);}
.btn--accent{color:var(--accent-deep);}
.btn--ghost{color:var(--muted); font-weight:500;}
.btn .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-soft);}

/* ---------- header ---------- */
.head{position:sticky; top:18px; z-index:50; margin-top:18px;}
.head__bar{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--bg); box-shadow:var(--raised-sm); border-radius:999px;
  padding:11px 11px 11px 22px;
}
.brand{display:flex; align-items:center; gap:12px; font-weight:900; font-size:20px; letter-spacing:-.01em;}
.brand .badge{width:42px;height:42px;border-radius:50%;background:var(--bg);
  box-shadow:var(--raised-sm); display:grid; place-items:center;}
.brand b{color:var(--accent);}
.nav{display:flex; align-items:center; gap:12px;}
.nav__track{display:flex; align-items:center; gap:10px; padding:0; background:transparent; box-shadow:none;}
.nav__track a{padding:11px 20px; font-size:13.5px; font-weight:500; color:var(--muted); border-radius:999px;
  background:var(--bg); box-shadow:var(--raised-sm);
  transition:color .16s ease, box-shadow .16s ease, transform .16s ease;}
.nav__track a:hover{color:var(--ink); transform:translateY(-1px);}
.nav__track a:active{color:var(--accent-deep); box-shadow:var(--inset-sm); transform:translateY(0);}
.nav .nav-cta{font-weight:700; color:var(--accent-deep); box-shadow:var(--raised-sm); padding:13px 22px;
  border-radius:999px; transition:box-shadow .16s ease, transform .16s ease;}
.nav .nav-cta:hover{transform:translateY(-1px);}
.nav .nav-cta:active{box-shadow:var(--inset-sm); transform:translateY(0);}
.burger{display:none;}

/* ---------- section scaffolding ---------- */
section{padding:104px 0;}
.eyebrow{font-size:12.5px; letter-spacing:.32em; font-weight:700; color:var(--accent-deep);
  text-transform:uppercase; display:inline-flex; align-items:center; gap:12px;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; opacity:.7;}
.sec-head{display:flex; flex-direction:column; gap:18px; margin-bottom:54px; max-width:680px;}
.sec-head h2{font-size:40px; font-weight:900; letter-spacing:-.02em; line-height:1.3; text-wrap:balance;}
.sec-head h2 .cl{display:inline-block;}
.sec-head p{color:var(--ink-soft); font-size:16.5px; line-height:1.95;}

/* ---------- hero ---------- */
.hero{padding:96px 0 110px; text-align:center;}
.hero__inner{display:flex; flex-direction:column; align-items:center; gap:30px;}
.hero__tile{width:112px;height:112px;border-radius:30px;display:grid;place-items:center;
  background:var(--bg); box-shadow:var(--raised-lg);}
.hero h1{font-size:clamp(40px,6.4vw,72px); font-weight:900; line-height:1.18; letter-spacing:-.025em;}
.hero h1 .ac{color:var(--accent);}
.hero__sub{max-width:600px; font-size:clamp(15px,2vw,18px); line-height:2; color:var(--ink-soft);}
.hero__cta{display:flex; gap:16px; flex-wrap:wrap; justify-content:center; margin-top:6px;}
.hero__scroll{margin-top:26px; font-size:11px; letter-spacing:.3em; color:var(--muted);
  display:inline-flex; flex-direction:column; align-items:center; gap:10px;}
.hero__scroll .stem{width:2px;height:34px;background:linear-gradient(var(--dark),transparent); border-radius:2px;}

/* ---------- philosophy ---------- */
.phil-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px;}
.phil-card{padding:40px 38px; border-radius:var(--r-lg); background:var(--bg); box-shadow:var(--raised);
  display:flex; flex-direction:column; gap:18px; transition:transform .2s ease, box-shadow .2s ease;}
.phil-card:hover{transform:translateY(-3px); box-shadow:var(--raised-lg);}
.phil-card__top{display:flex; align-items:center; gap:16px;}
.phil-num{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;background:var(--bg);
  box-shadow:var(--inset-sm); font-family:"JetBrains Mono",monospace; font-weight:500; font-size:15px; color:var(--accent-deep);}
.phil-card h3{font-size:21px; font-weight:700; letter-spacing:-.01em; line-height:1.5;}
.phil-card p{color:var(--ink-soft); font-size:15px; line-height:1.95;}

/* ---------- services ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.svc-card{padding:36px; border-radius:var(--r-lg); background:var(--bg); box-shadow:var(--raised);
  display:flex; gap:24px; align-items:flex-start; transition:transform .2s ease, box-shadow .2s ease;}
.svc-card:hover{transform:translateY(-3px); box-shadow:var(--raised-lg);}
.svc-card--wide{grid-column:1 / -1;}
@media (max-width:900px){.svc-card--wide{grid-column:auto;}}
.svc-ico{flex:none; width:62px;height:62px;border-radius:18px;display:grid;place-items:center;
  background:var(--bg); box-shadow:var(--raised-sm);}
.svc-card h3{font-size:19px; font-weight:700; margin-bottom:10px; letter-spacing:-.01em;}
.svc-no{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--accent-deep); letter-spacing:.1em; display:block; margin-bottom:8px;}
.svc-card p{color:var(--ink-soft); font-size:14.5px; line-height:1.9;}
.svc-card ul{margin:14px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px;}
.svc-card li{font-size:12px; color:var(--muted); background:var(--bg); box-shadow:var(--inset-sm);
  padding:6px 13px; border-radius:999px;}

/* ---------- profile ---------- */
.prof{max-width:760px;}
.prof__line{font-size:20px; font-weight:700; letter-spacing:-.01em; color:var(--ink); margin-bottom:34px;
  padding-bottom:26px; border-bottom:1px solid var(--line);}
.prof__line span{font-family:"JetBrains Mono",monospace; font-size:13px; font-weight:400; color:var(--muted); letter-spacing:.02em; margin-left:6px;}
.prof__body h3{font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--accent-deep); margin-bottom:18px;
  display:flex; align-items:center; gap:12px;}
.prof__body h3::before{content:""; width:8px;height:8px; border-radius:2px; background:var(--accent); transform:rotate(45deg);}

/* career timeline */
.career{list-style:none; margin:0 0 46px; padding:0; position:relative;}
.career::before{content:""; position:absolute; left:5px; top:10px; bottom:14px; width:2px;
  background:var(--line); border-radius:2px;}
.career li{position:relative; padding:0 0 26px 34px;}
.career li:last-child{padding-bottom:0;}
.career li p{font-size:15px; line-height:1.95; color:var(--ink-soft);}
.career li::before{content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--bg); box-shadow:var(--raised-sm); z-index:1;}
.career .career--now::before{background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);}
.career .career--now p{color:var(--ink); font-weight:700;}

/* ---------- company table ---------- */
.about{display:grid; grid-template-columns:1fr 1.2fr; gap:56px; align-items:start;}
.about__aside .eyebrow{margin-bottom:18px;}
.about__aside h2{font-size:40px; font-weight:900; letter-spacing:-.02em; line-height:1.3;}
.about__aside p{margin-top:20px; color:var(--ink-soft); font-size:15.5px; line-height:1.95;}
.spec{background:var(--bg); box-shadow:var(--raised); border-radius:var(--r-lg); padding:14px 36px;}
.spec dl{margin:0; display:grid; grid-template-columns:130px 1fr;}
.spec .row{display:contents;}
.spec dt,.spec dd{padding:20px 0; border-bottom:1px solid var(--line); font-size:15px;}
.spec .row:last-child dt,.spec .row:last-child dd{border-bottom:none;}
.spec dt{color:var(--muted); font-weight:500; font-size:13.5px; align-self:center;}
.spec dd{margin:0; color:var(--ink); font-weight:500;}
.spec dd .tentative{font-size:11px; color:var(--accent-deep); font-family:"JetBrains Mono",monospace; margin-left:8px;}

/* ---------- contact ---------- */
.contact{}
.contact__card{background:var(--bg); box-shadow:var(--raised-lg); border-radius:36px; padding:64px;
  display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.contact__card h2{font-size:34px; font-weight:900; letter-spacing:-.02em; line-height:1.35;}
.contact__card .lead{margin-top:20px; color:var(--ink-soft); font-size:15.5px; line-height:1.95;}
.contact__mail{margin-top:30px; display:inline-flex; align-items:center; gap:14px; padding:16px 24px;
  border-radius:16px; background:var(--bg); box-shadow:var(--inset-sm); font-family:"JetBrains Mono",monospace;
  font-size:15px; color:var(--ink);}
.contact__mail .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);}
.form{display:flex; flex-direction:column; gap:16px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field label{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.08em;}
.field input,.field textarea{font-family:inherit; font-size:15px; color:var(--ink); border:none; outline:none;
  background:var(--bg); box-shadow:var(--inset); border-radius:14px; padding:15px 18px; resize:none;}
.field input::placeholder,.field textarea::placeholder{color:#9aa3b5;}
.form__note{font-size:11.5px; color:var(--muted); font-family:"JetBrains Mono",monospace; line-height:1.7;}

/* ---------- footer ---------- */
footer{padding:56px 0 64px;}
.foot{display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding-top:36px; border-top:1px solid var(--line);}
.foot .brand{font-size:18px;}
.foot small{color:var(--muted); font-size:12.5px; font-family:"JetBrains Mono",monospace;}
.foot__links{display:flex; gap:22px; font-size:13px; color:var(--muted);}
.foot__links a:hover{color:var(--ink);}

/* ---------- responsive ---------- */
@media (max-width:900px){
  section{padding:76px 0;}
  .phil-grid,.svc-grid{grid-template-columns:1fr;}
  .about{grid-template-columns:1fr; gap:34px;}
  .contact__card{grid-template-columns:1fr; padding:40px; gap:36px;}
  .sec-head h2,.about__aside h2{font-size:31px;}

  /* mobile nav: hamburger + dropdown */
  .burger{
    display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:5px;
    width:46px; height:46px; padding:0; border:none; cursor:pointer;
    background:var(--bg); box-shadow:var(--raised-sm); border-radius:14px;
    transition:box-shadow .18s ease;
  }
  .burger span{display:block; width:20px; height:2px; background:var(--ink-soft); border-radius:2px;
    transition:transform .25s ease, opacity .2s ease;}
  .burger[aria-expanded="true"]{box-shadow:var(--inset-sm);}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .nav{
    position:absolute; top:calc(100% + 12px); left:0; right:0;
    flex-direction:column; align-items:stretch; gap:10px;
    background:var(--bg); box-shadow:var(--raised); border-radius:var(--r-md); padding:16px;
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .nav.open{opacity:1; visibility:visible; transform:none;}
  .nav__track{display:flex; flex-direction:column; align-items:stretch; gap:8px;}
  .nav__track a{text-align:center;}
  .nav .nav-cta{text-align:center;}
}
@media (max-width:560px){
  .wrap{padding:0 18px;}
  .head__bar{padding:9px 9px 9px 16px;}
  .brand{font-size:17px;}
  .svc-card{flex-direction:column; gap:18px;}
  .contact__card{padding:30px;}
  .foot{flex-direction:column; align-items:flex-start; gap:16px;}
}